:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#f7f7fb;
  background:#090b10;
  --bg:#090b10;
  --panel:#11141b;
  --panel-soft:#0e1117;
  --panel-hover:#171a23;
  --line:#242936;
  --muted:#8991a1;
  --text:#f7f7fb;
  --purple:#9b70e7;
  --purple-2:#b084f0;
  --green:#52d58a;
  --red:#ff7180;
  --blue:#70a7ff;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 55% -10%,rgba(117,76,174,.20),transparent 30%),
    #090b10;
  color:var(--text);
}

body{min-height:100vh}

button,input,select{font:inherit}

button{cursor:pointer}

.shell{
  min-height:100vh;
  display:flex;
}

.sidebar{
  width:238px;
  flex:0 0 238px;
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:22px 14px;
  background:rgba(10,12,17,.97);
  border-right:1px solid var(--line);
  z-index:40;
}

.sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
}

.brand{
  font-weight:850;
  letter-spacing:.15em;
  font-size:17px;
}

.sidebar-sub{
  color:var(--muted);
  font-size:12px;
  padding:7px 10px 24px;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.nav-item{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  color:#bfc5d0;
  padding:11px 12px;
  border-radius:11px;
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  transition:.16s ease;
}

.nav-item span{
  width:20px;
  flex:0 0 20px;
  text-align:center;
  font-size:16px;
}

.nav-item b{
  font-weight:600;
}

.nav-item:hover{
  background:#151821;
  color:#fff;
}

.nav-item.active{
  background:#20192d;
  border-color:#33284a;
  color:#fff;
  box-shadow:inset 3px 0 0 var(--purple);
}

.sidebar-bottom{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sidebar-mini{
  border:1px solid var(--line);
  border-radius:14px;
  background:#0f1218;
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.sidebar-mini div{
  min-width:0;
}

.sidebar-mini span,
.sidebar-mini small{
  display:block;
}

.sidebar-mini span{
  color:#dce0e7;
  font-size:12px;
}

.sidebar-mini small{
  color:var(--muted);
  font-size:10px;
  margin-top:3px;
}

.sidebar-mini strong{
  white-space:nowrap;
  font-size:14px;
}

.logout-btn{
  width:100%;
  background:transparent;
  border:1px solid var(--line);
  color:#fff;
  padding:10px;
  border-radius:11px;
}

.content{
  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:24px 28px 50px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.page-title{
  font-size:24px;
  font-weight:800;
  letter-spacing:-.02em;
}

.muted{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}

.card{
  margin-top:0;
  background:rgba(17,20,27,.92);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 12px 34px rgba(0,0,0,.16);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(330px,.85fr);
  gap:14px;
}

.balance-card{
  min-height:255px;
  padding:24px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 15%,rgba(158,113,231,.18),transparent 34%),
    linear-gradient(145deg,#15121d,#11141b 65%);
}

.balance-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.eyebrow{
  color:#aeb4c0;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:700;
}

.balance-title{
  color:#fff;
  font-size:18px;
  font-weight:700;
  margin-top:5px;
}

.balance-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#241b34;
  color:#c29cf7;
  font-weight:800;
}

.balance-value{
  margin-top:35px;
  font-size:42px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.04em;
}

.balance-note{
  color:var(--muted);
  margin-top:9px;
  font-size:12px;
}

.balance-actions{
  display:flex;
  gap:8px;
  margin-top:28px;
}

.quick-card{
  padding:18px;
}

.quick-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

.quick-actions button{
  background:#0f1218;
  border:1px solid var(--line);
  color:#fff;
  border-radius:12px;
  padding:11px;
  display:flex;
  align-items:flex-start;
  gap:9px;
  text-align:left;
  min-height:72px;
}

.quick-actions button:hover{
  background:#171a22;
  border-color:#363c49;
}

.quick-actions span{
  font-size:17px;
}

.quick-actions strong{
  display:block;
  font-size:12px;
}

.quick-actions small{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:4px;
  line-height:1.35;
}

.stats-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:14px;
}

.stat-card{
  padding:17px 18px;
}

.stat-label{
  color:var(--muted);
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
}

.stat-card strong{
  display:block;
  font-size:22px;
  margin-top:9px;
}

.stat-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  display:block;
}

.income-dot{background:var(--green)}
.expense-dot{background:var(--red)}
.saved-dot{background:var(--purple)}

.dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);
  gap:14px;
  margin-top:14px;
  align-items:start;
}

.main-column,
.side-column{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.main-column .card,
.side-column .card{
  padding:18px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.section-head h2{
  font-size:15px;
  margin:0;
}

.small{
  border:0;
  border-radius:10px;
  background:#292230;
  color:#fff;
  padding:8px 11px;
  font-size:12px;
}

.small:hover,
button:hover{
  filter:brightness(1.08);
}

.small.primary,
.modal-box>form>button{
  background:linear-gradient(135deg,#8259c8,#a979ea);
  font-weight:700;
}

.big-money{
  font-size:23px;
  font-weight:800;
  margin:17px 0 12px;
}

.positive{color:var(--green)}
.negative{color:var(--red)}

.empty-small{
  padding:8px 0 2px;
}

.bars{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}

.bar-row{
  display:grid;
  grid-template-columns:120px 1fr 90px;
  gap:12px;
  align-items:center;
  font-size:12px;
}

.bar{
  height:8px;
  border-radius:999px;
  background:#20242c;
  overflow:hidden;
}

.bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#8c64d6,#c59aff);
  border-radius:999px;
}

.amount{
  text-align:right;
}

.list{
  display:flex;
  flex-direction:column;
  margin-top:13px;
}

.account{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}

.account:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.account .name{
  font-weight:650;
  font-size:13px;
}

.account small{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px;
}

.account>strong{
  font-size:13px;
  white-space:nowrap;
}

.stack-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.debt-card{
  border:1px solid var(--line);
  padding:12px;
  border-radius:12px;
  background:#0f1218;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.debt-card.closed{
  opacity:.58;
}

.row-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.row-top strong{
  font-size:12px;
}

.row-top span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px;
}

.note{
  color:#c9ced7;
  font-size:11px;
}

.debt-meta{
  color:var(--muted);
  font-size:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
  margin-top:7px;
}

.tiny{
  font-size:10px;
  padding:6px 8px;
}

.danger{
  background:#2a1b20;
}

.goals{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}

.goal{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:#0f1218;
}

.goal-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
}

.goalbar{
  height:7px;
  background:#20242c;
  border-radius:999px;
  margin:10px 0;
  overflow:hidden;
}

.goalbar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#5865f2,#9f7aea);
}

.goal-meta{
  color:var(--muted);
  font-size:10px;
}

.table-wrap{
  overflow:auto;
  margin-top:11px;
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

th,td{
  padding:11px 7px;
  border-bottom:1px solid var(--line);
  text-align:left;
  white-space:nowrap;
}

th{
  color:var(--muted);
  font-weight:500;
}

.income{color:var(--green)}
.expense{color:var(--red)}

.view{
  display:none;
}

.active-view{
  display:block;
}

.page-card{
  padding:20px;
}

.section-summary{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin:15px 0;
}

.summary-pill{
  border:1px solid var(--line);
  border-radius:11px;
  padding:9px 11px;
  min-width:125px;
  background:#0d1015;
}

.summary-pill span{
  display:block;
  color:var(--muted);
  font-size:10px;
}

.summary-pill strong{
  display:block;
  margin-top:3px;
  font-size:15px;
}

.debt-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.accounts-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:16px;
}

.account-card{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#0f1218;
}

.account-icon{
  width:39px;
  height:39px;
  border-radius:11px;
  background:#1c1726;
  display:grid;
  place-items:center;
}

.account-info{
  flex:1;
  min-width:0;
}

.account-info strong{
  display:block;
  font-size:13px;
}

.account-info span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px;
}

.account-balance{
  font-size:13px;
  white-space:nowrap;
}

.large-goals{
  grid-template-columns:repeat(3,1fr);
}

.empty{
  padding:36px 10px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:12px;
}

.mobile-only{
  display:none !important;
}

.icon-btn{
  width:36px;
  height:36px;
  padding:0;
  border-radius:10px;
  background:transparent;
  border:1px solid var(--line);
  color:#fff;
  display:inline-grid;
  place-items:center;
}

.sidebar-overlay{
  display:none;
}

.modal{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(0,0,0,.68);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.modal.open{
  display:flex;
}

.modal-box{
  width:min(470px,100%);
  background:#12151b;
  border:1px solid var(--line);
  border-radius:17px;
  padding:22px;
  box-shadow:0 24px 90px rgba(0,0,0,.45);
  position:relative;
}

.modal-box h2{
  margin:0 0 15px;
  font-size:17px;
}

.close{
  position:absolute;
  top:8px;
  right:10px;
  background:transparent!important;
  font-size:24px;
  color:#fff;
  padding:4px!important;
}

form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:12px;
}

input,select{
  width:100%;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0d1015;
  color:#fff;
  outline:none;
}

input:focus,select:focus{
  border-color:#65478d;
}

.seg{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  background:#0e1116;
  border-radius:11px;
}

.seg button{
  background:transparent;
  color:#fff;
}

.seg button.active{
  background:#292231;
}

.toast{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:100;
  display:none;
  padding:11px 14px;
  border-radius:11px;
  background:#171b22;
  border:1px solid var(--line);
}

.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
}

.login-card{
  width:min(390px,100%);
  background:#12151b;
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px;
  box-shadow:0 20px 80px rgba(0,0,0,.35);
}

.login-subtitle{
  color:var(--muted);
  margin:7px 0 22px;
}

.login-card form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.login-card button{
  background:linear-gradient(135deg,#8159c6,#a979e9);
  font-weight:700;
  border:0;
  border-radius:10px;
  padding:11px;
  color:#fff;
}

@media(max-width:1100px){
  .sidebar{
    width:218px;
    flex-basis:218px;
  }

  .content{
    padding:22px 20px 44px;
  }

  .hero-grid,
  .dashboard-grid{
    grid-template-columns:1fr;
  }

  .side-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
  }

  .side-column .card:first-child{
    grid-column:1 / -1;
  }

  .side-column .card{
    min-width:0;
  }

  .accounts-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:760px){
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    transform:translateX(-100%);
    transition:transform .2s ease;
  }

  .sidebar-open .sidebar{
    transform:translateX(0);
  }

  .sidebar-open .sidebar-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:30;
    background:rgba(0,0,0,.58);
  }

  .mobile-only{
    display:inline-grid !important;
  }

  .stats-row{
    grid-template-columns:1fr;
  }

  .goals,
  .large-goals,
  .accounts-grid,
  .debt-grid{
    grid-template-columns:1fr;
  }

  .side-column{
    grid-template-columns:1fr;
  }

  .side-column .card:first-child{
    grid-column:auto;
  }
}

@media(max-width:580px){
  .content{
    padding:16px 12px 38px;
  }

  .page-title{
    font-size:20px;
  }

  .balance-card{
    padding:20px;
    min-height:230px;
  }

  .balance-value{
    font-size:34px;
    margin-top:28px;
  }

  .quick-actions{
    grid-template-columns:1fr;
  }

  .bar-row{
    grid-template-columns:85px 1fr 72px;
    gap:9px;
    font-size:11px;
  }

  .table-wrap{
    margin-left:-4px;
    margin-right:-4px;
  }

  .table-wrap table{
    min-width:700px;
  }

  .topbar{
    align-items:flex-start;
  }
}


/* ===== DASHBOARD V2 ===== */

.balance-overview{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  min-height:220px;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 18%,rgba(145,101,215,.16),transparent 34%),
    linear-gradient(135deg,#15131d,#11141b 68%);
}

.balance-main{
  padding:25px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.balance-overview .balance-value{
  margin-top:14px;
  font-size:42px;
}

.balance-overview .balance-note{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}

.balance-actions{
  display:flex;
  gap:8px;
  margin-top:24px;
}

.balance-metrics{
  border-left:1px solid var(--line);
  padding:20px;
  display:grid;
  grid-template-columns:1fr;
  align-content:center;
  gap:10px;
}

.balance-metric{
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(12,15,21,.56);
}

.metric-label{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:11px;
}

.metric-dot{
  width:6px;
  height:6px;
  border-radius:50%;
}

.balance-metric strong{
  display:block;
  margin-top:6px;
  font-size:19px;
}

.finance-summary-row{
  margin-top:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.finance-summary-row strong{
  display:block;
  margin-top:4px;
  font-size:20px;
}

.finance-summary-label{
  display:block;
  color:#dfe3e9;
  font-size:12px;
}

.summary-link{
  width:31px;
  height:31px;
  padding:0;
  border-radius:9px;
  background:#292230;
  color:#fff;
  border:0;
}

.summary-divider{
  height:1px;
  background:var(--line);
  margin:14px 0;
}

.compact-stack{
  margin-top:8px;
}

.compact-stack .debt-card{
  padding:9px 10px;
  gap:5px;
}

.compact-stack .debt-card .debt-meta{
  font-size:9px;
}

.compact-stack .debt-card .note{
  font-size:10px;
}

@media(max-width:1100px){
  .content{
    padding-left:20px;
    padding-right:20px;
  }

  .balance-overview{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px){
  .balance-overview{
    grid-template-columns:1fr;
  }

  .balance-metrics{
    border-left:0;
    border-top:1px solid var(--line);
    grid-template-columns:1fr 1fr 1fr;
    padding:14px;
  }

  .balance-main{
    padding:20px;
  }

  .balance-overview .balance-value{
    font-size:34px;
  }
}

@media(max-width:580px){
  .balance-metrics{
    grid-template-columns:1fr;
  }
}

.balance-overview{
  grid-template-columns:1.2fr 1fr;
  min-height:190px;
}

.balance-main{
  padding:22px 24px;
}

.balance-overview .balance-value{
  font-size:38px;
  margin-top:12px;
}

.balance-metrics{
  grid-template-columns:repeat(3,1fr);
  align-content:center;
  align-items:stretch;
  border-left:1px solid var(--line);
  padding:18px;
}

.balance-metric{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.balance-metric strong{
  font-size:17px;
}

@media(max-width:760px){
  .balance-overview{
    grid-template-columns:1fr;
  }

  .balance-metrics{
    grid-template-columns:1fr 1fr 1fr;
    border-left:0;
    border-top:1px solid var(--line);
  }
}

@media(max-width:580px){
  .balance-metrics{
    grid-template-columns:1fr;
  }
}

.account-card{
  align-items:flex-start;
}

.account-card-right{
  margin-left:auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:9px;
}

.account-card-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.transfer-amount{
  color:var(--blue);
  font-weight:650;
}

@media(max-width:700px){
  .account-card{
    flex-wrap:wrap;
  }

  .account-card-right{
    width:100%;
    align-items:flex-start;
    margin-left:51px;
  }

  .account-card-actions{
    justify-content:flex-start;
  }
}

.account-card-actions{
  max-width:520px;
}

.account-card-actions .tiny{
  white-space:nowrap;
}

@media(max-width:900px){
  .account-card-right{
    width:100%;
    align-items:flex-start;
    margin-left:51px;
  }

  .account-card-actions{
    justify-content:flex-start;
  }
}

.account-card-actions{
  max-width:520px;
}

.account-card-actions .tiny{
  white-space:nowrap;
}

@media(max-width:900px){
  .account-card-right{
    width:100%;
    align-items:flex-start;
    margin-left:51px;
  }

  .account-card-actions{
    justify-content:flex-start;
  }
}


/* ===== MONTH FILTER / RECURRING ===== */

.header-controls{
  display:flex;
  align-items:center;
  gap:8px;
}

.month-filter{
  width:145px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#11141b;
  color:#fff;
}

.recurring-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:16px;
}

.recurring-card{
  border:1px solid var(--line);
  border-radius:13px;
  background:#0f1218;
  padding:14px;
}

.recurring-card.inactive{
  opacity:.55;
}

.recurring-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.recurring-top strong{
  display:block;
  font-size:13px;
}

.recurring-top span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:4px;
}

.recurring-info{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  color:var(--muted);
  font-size:10px;
}

@media(max-width:850px){
  .recurring-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  .header-controls{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

  .month-filter{
    width:100%;
  }
}


.month-controls{
  display:flex;
  align-items:center;
  gap:7px;
}

.month-current{
  min-width:125px;
  text-align:center;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#11141b;
}

.month-current strong{
  display:block;
  font-size:12px;
}

.month-current span{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:2px;
}

.month-nav{
  width:34px;
  height:34px;
  padding:0;
  border-radius:9px;
  border:1px solid var(--line);
  background:#11141b;
  color:#fff;
}

.month-nav:hover{
  background:#191d26;
}

@media(max-width:650px){
  .month-controls{
    width:100%;
    flex-wrap:wrap;
  }

  .month-current{
    flex:1;
  }
}

/* ===== CATEGORIES ===== */

.category-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}

.category-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  margin-bottom:8px;
}

.category-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:block;
}

.expense-category-dot{
  background:var(--red);
}

.income-category-dot{
  background:var(--green);
}

.category-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.category-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0f1218;
}

.category-card-info{
  min-width:0;
}

.category-card-info strong{
  display:block;
  font-size:13px;
}

.category-card-info span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px;
}

.category-card-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media(max-width:760px){
  .category-columns{
    grid-template-columns:1fr;
  }
}

/* ===== TRANSACTION FILTERS ===== */

.transaction-filters{
  display:grid;
  grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(140px,1fr)) auto;
  gap:7px;
  margin-top:16px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0e1117;
}

.filter-input,
.filter-select{
  width:100%;
  padding:9px 10px;
  border-radius:9px;
  border:1px solid var(--line);
  background:#11141b;
  color:#fff;
  outline:none;
}

.filter-info{
  color:var(--muted);
  font-size:11px;
  margin:9px 2px;
}

.operation-actions{
  display:flex;
  align-items:center;
  gap:5px;
}

.operation-locked{
  color:var(--muted);
  font-size:12px;
}

@media(max-width:1050px){
  .transaction-filters{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:650px){
  .transaction-filters{
    grid-template-columns:1fr;
  }

  .operation-actions{
    flex-direction:column;
    align-items:stretch;
  }
}

/* ===== СЧЕТА — НОВЫЕ КНОПКИ ===== */

#accountsPage button {
  appearance: none;
  border: 1px solid #334155;
  background: #151923;
  color: #f8fafc;
  border-radius: 9px;
  padding: 8px 12px;
  min-height: 34px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease,
    box-shadow .18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

#accountsPage button:hover {
  transform: translateY(-1px);
  border-color: #64748b;
  background: #1c2330;
  color: #ffffff;
}

#accountsPage button:active {
  transform: translateY(0);
}

/* Пополнить */
#accountsPage button.primary,
#accountsPage button[onclick*="deposit"],
#accountsPage button[onclick*="add"] {
  background: #123b28;
  border-color: #22c55e;
  color: #86efac;
}

#accountsPage button.primary:hover,
#accountsPage button[onclick*="deposit"]:hover,
#accountsPage button[onclick*="add"]:hover {
  background: #185332;
  border-color: #4ade80;
  color: #bbf7d0;
  box-shadow: 0 0 16px rgba(34,197,94,.18);
}

/* Списать */
#accountsPage button[onclick*="withdraw"],
#accountsPage button[onclick*="expense"],
#accountsPage button[onclick*="spend"] {
  background: #402b12;
  border-color: #f59e0b;
  color: #fcd34d;
}

#accountsPage button[onclick*="withdraw"]:hover,
#accountsPage button[onclick*="expense"]:hover,
#accountsPage button[onclick*="spend"]:hover {
  background: #563811;
  border-color: #fbbf24;
  color: #fde68a;
  box-shadow: 0 0 16px rgba(245,158,11,.18);
}

/* Перевести */
#accountsPage button[onclick*="transfer"] {
  background: #102f4f;
  border-color: #3b82f6;
  color: #93c5fd;
}

#accountsPage button[onclick*="transfer"]:hover {
  background: #143e68;
  border-color: #60a5fa;
  color: #bfdbfe;
  box-shadow: 0 0 16px rgba(59,130,246,.20);
}

/* Изменить */
#accountsPage button[onclick*="edit"],
#accountsPage button[onclick*="Edit"] {
  background: #2d1f4d;
  border-color: #8b5cf6;
  color: #c4b5fd;
}

#accountsPage button[onclick*="edit"]:hover,
#accountsPage button[onclick*="Edit"]:hover {
  background: #3b2763;
  border-color: #a78bfa;
  color: #ddd6fe;
  box-shadow: 0 0 16px rgba(139,92,246,.20);
}

/* Удалить */
#accountsPage button.danger,
#accountsPage button[onclick*="delete"] {
  background: #42191d;
  border-color: #ef4444;
  color: #fca5a5;
}

#accountsPage button.danger:hover,
#accountsPage button[onclick*="delete"]:hover {
  background: #5a2025;
  border-color: #f87171;
  color: #fecaca;
  box-shadow: 0 0 16px rgba(239,68,68,.20);
}

/* Контейнер кнопок */
#accountsPage .account-actions,
#accountsPage .actions,
#accountsPage .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 700px) {
  #accountsPage button {
    padding: 9px 11px;
    min-height: 36px;
    font-size: 12px;
  }

  #accountsPage .account-actions,
  #accountsPage .actions,
  #accountsPage .buttons {
    gap: 7px;
  }
}


/* ===== ACCOUNT CARDS: нормальная раскладка ===== */

.account-card {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
}

.account-card > .account-icon {
  grid-column: 1;
  grid-row: 1;
}

.account-main {
  grid-column: 2;
  min-width: 0;
  width: 100%;
}

.account-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.account-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.account-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-balance {
  flex: 0 0 auto;
  white-space: nowrap;
}

.account-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 11px !important;
  min-width: 0 !important;
}

.account-btn {
  appearance: none !important;
  border-radius: 9px !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease,
    box-shadow .18s ease !important;
}

/* Пополнить */
.account-btn.deposit {
  background: #123b28 !important;
  border: 1px solid #22c55e !important;
  color: #86efac !important;
}
.account-btn.deposit:hover {
  background: #185332 !important;
  border-color: #4ade80 !important;
  color: #bbf7d0 !important;
  box-shadow: 0 0 15px rgba(34,197,94,.16) !important;
}

/* Списать */
.account-btn.withdraw {
  background: #402b12 !important;
  border: 1px solid #f59e0b !important;
  color: #fcd34d !important;
}
.account-btn.withdraw:hover {
  background: #563811 !important;
  border-color: #fbbf24 !important;
  color: #fde68a !important;
  box-shadow: 0 0 15px rgba(245,158,11,.16) !important;
}

/* Перевести */
.account-btn.transfer {
  background: #102f4f !important;
  border: 1px solid #3b82f6 !important;
  color: #93c5fd !important;
}
.account-btn.transfer:hover {
  background: #143e68 !important;
  border-color: #60a5fa !important;
  color: #bfdbfe !important;
  box-shadow: 0 0 15px rgba(59,130,246,.16) !important;
}

/* Изменить */
.account-btn.edit {
  background: #2d1f4d !important;
  border: 1px solid #8b5cf6 !important;
  color: #c4b5fd !important;
}
.account-btn.edit:hover {
  background: #3b2763 !important;
  border-color: #a78bfa !important;
  color: #ddd6fe !important;
  box-shadow: 0 0 15px rgba(139,92,246,.16) !important;
}

/* Удалить */
.account-btn.delete {
  background: #42191d !important;
  border: 1px solid #ef4444 !important;
  color: #fca5a5 !important;
}
.account-btn.delete:hover {
  background: #5a2025 !important;
  border-color: #f87171 !important;
  color: #fecaca !important;
  box-shadow: 0 0 15px rgba(239,68,68,.16) !important;
}

.account-btn:hover {
  transform: translateY(-1px) !important;
}

@media (max-width: 620px) {
  .account-top {
    gap: 10px;
  }

  .account-card-actions {
    gap: 7px !important;
  }

  .account-btn {
    padding: 8px 10px !important;
  }
}


/* =========================================================
   MY FINANCE — ЕДИНЫЙ СТИЛЬ КНОПОК
   ========================================================= */

button.tiny,
button.account-btn {
  appearance: none !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  min-height: 34px !important;
  padding: 8px 12px !important;

  border-radius: 8px !important;
  border: 1px solid #2b3140 !important;

  background: #151821 !important;
  color: #d7dbea !important;

  cursor: pointer !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .12s ease !important;
}

/* обычная кнопка */
button.tiny:hover,
button.account-btn:hover {
  background: #1b1f2b !important;
  border-color: #555d70 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(139,92,246,.08),
              0 5px 18px rgba(0,0,0,.22) !important;
  transform: translateY(-1px);
}

button.tiny:active,
button.account-btn:active {
  transform: translateY(0);
}

/* Главный акцент */
button.tiny.primary,
button.tiny[class*="primary"] {
  background: #211b35 !important;
  border-color: #6650a8 !important;
  color: #d8ccff !important;
}

button.tiny.primary:hover,
button.tiny[class*="primary"]:hover {
  background: #2a2244 !important;
  border-color: #8067ca !important;
  color: #eee9ff !important;
  box-shadow: 0 0 18px rgba(139,92,246,.16) !important;
}

/* Удаление / опасные действия */
button.tiny.danger,
button.account-btn.delete {
  background: #241719 !important;
  border-color: #63343a !important;
  color: #dba7ad !important;
}

button.tiny.danger:hover,
button.account-btn.delete:hover {
  background: #301c20 !important;
  border-color: #82434b !important;
  color: #f0c5ca !important;
  box-shadow: 0 0 16px rgba(190,70,85,.10) !important;
}

/* Убираем старые кислотные цвета со счётов */
button.account-btn.deposit,
button.account-btn.withdraw,
button.account-btn.transfer,
button.account-btn.edit,
button.account-btn.delete {
  background: #151821 !important;
  color: #d7dbea !important;
  border-color: #2b3140 !important;
}

button.account-btn.deposit:hover,
button.account-btn.withdraw:hover,
button.account-btn.transfer:hover,
button.account-btn.edit:hover {
  background: #1b1f2b !important;
  border-color: #6650a8 !important;
  color: #eee9ff !important;
  box-shadow: 0 0 18px rgba(139,92,246,.12) !important;
}

button.account-btn.delete:hover {
  background: #301c20 !important;
  border-color: #82434b !important;
  color: #f0c5ca !important;
}

/* Кнопки "Изменить" / "Редактировать" */
button.tiny:not(.primary):not(.danger):hover {
  border-color: #6650a8 !important;
}

/* Небольшие кнопки верхней панели */
button.small.primary {
  background: #211b35 !important;
  border-color: #6650a8 !important;
  color: #d8ccff !important;
  font-family: inherit !important;
}

button.small.primary:hover {
  background: #2a2244 !important;
  border-color: #8067ca !important;
  color: #eee9ff !important;
  box-shadow: 0 0 18px rgba(139,92,246,.16) !important;
}

/* Мобильный вид */
@media (max-width: 700px) {
  button.tiny,
  button.account-btn {
    min-height: 35px !important;
    padding: 8px 11px !important;
    font-size: 12px !important;
  }
}



/* =========================================================
   MY FINANCE — АНАЛИТИКА
   ========================================================= */

.analytics-card {
  margin-top: 18px;
}

.analytics-period {
  font-size: 12px;
  color: #8e95a7;
  white-space: nowrap;
}

.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.analytics-metric {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid #242936;
  background: #13161d;
  border-radius: 10px;
}

.analytics-metric-label {
  display: block;
  font-size: 11px;
  color: #858c9e;
  margin-bottom: 7px;
}

.analytics-metric strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e8ebf2;
  font-size: 15px;
}

.analytics-wide {
  grid-column: span 2;
}

.analytics-positive {
  color: #b8a4f7 !important;
}

.analytics-negative {
  color: #d3a5ad !important;
}

.analytics-chart-block {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #242936;
  background: #12151b;
  border-radius: 10px;
}

.analytics-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.analytics-chart-head strong {
  display: block;
  font-size: 13px;
  color: #e6e9f0;
  margin-bottom: 3px;
}

.analytics-chart-head .muted {
  font-size: 11px;
}

.analytics-daily {
  height: 180px;
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  gap: 5px;
  align-items: end;
  padding: 8px 2px 0;
  border-bottom: 1px solid #252a36;
}

.analytics-day {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}

.analytics-bars {
  width: 100%;
  height: 145px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.analytics-bar {
  width: 42%;
  max-width: 8px;
  min-height: 0;
  border-radius: 4px 4px 1px 1px;
  transition: opacity .18s ease, transform .18s ease;
}

.analytics-bar.income {
  background: #6f649b;
}

.analytics-bar.expense {
  background: #8a5964;
}

.analytics-day:hover .analytics-bar {
  opacity: 1;
  transform: translateY(-2px);
}

.analytics-day > span {
  display: block;
  height: 12px;
  font-size: 9px;
  line-height: 12px;
  color: #737b8d;
}

.analytics-legend {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  color: #7f8799;
  font-size: 11px;
}

.analytics-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.analytics-legend i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 2px;
}

.analytics-legend-income {
  background: #6f649b;
}

.analytics-legend-expense {
  background: #8a5964;
}

@media (max-width: 1050px) {
  .analytics-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-wide {
    grid-column: span 2;
  }
}

@media (max-width: 700px) {
  .analytics-period {
    display: none;
  }

  .analytics-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .analytics-wide {
    grid-column: span 2;
  }

  .analytics-metric {
    padding: 12px;
  }

  .analytics-chart-block {
    padding: 12px 10px;
  }

  .analytics-daily {
    gap: 3px;
    height: 155px;
  }

  .analytics-bars {
    height: 125px;
  }

  .analytics-bar {
    max-width: 6px;
  }
}




/* =========================================================
   MY FINANCE — УПРОЩЁННАЯ ГЛАВНАЯ / БАЛАНС
   ========================================================= */

.balance-overview {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.balance-overview .balance-main {
  padding: 25px 28px 22px !important;
  min-width: 0;
}

.balance-overview .balance-value {
  font-size: 36px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.8px;
  margin-top: 7px;
}

.balance-overview .balance-note {
  margin-top: 6px;
  color: #858c9e;
}

.balance-overview .balance-actions {
  margin-top: 18px;
}

/* Правая часть */

.balance-summary-line {
  min-width: 430px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;

  padding: 20px 18px;

  border-left: 1px solid #252a36;
  background: rgba(15,18,25,.42);
}

.balance-summary-item {
  flex: 1;
  min-width: 105px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 9px;
  text-align: center;

  padding: 15px 12px;

  border: 1px solid #292e3a;
  border-radius: 10px;

  background: #13161d;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 4px 14px rgba(0,0,0,.12);

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.balance-summary-item:hover {
  background: #161a22;
  border-color: #363c4b;
  transform: translateY(-1px);
}

.balance-summary-item span {
  font-size: 11px;
  color: #858c9e;
}

.balance-summary-item strong {
  font-size: 23px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.3px;
  color: #e7e9ef;
  white-space: nowrap;
}

.balance-summary-separator {
  display: none;
}

/* мобильный */
@media (max-width: 900px) {
  .balance-overview {
    grid-template-columns: 1fr !important;
  }

  .balance-summary-line {
    min-width: 0;
    border-left: 0;
    border-top: 1px solid #252a36;
    padding: 18px 22px 20px;
  }
}

@media (max-width: 560px) {
  .balance-overview .balance-main {
    padding: 21px 19px 18px !important;
  }

  .balance-summary-line {
    padding: 15px 12px 17px;
  }

  .balance-summary-item {
    min-width: 0;
  }

  .balance-summary-item strong {
    font-size: 17px;
  }

  .balance-summary-separator {
    margin: 0 8px;
    height: 32px;
  }
}