/* ============ TOKENS ============ */
:root{
  --bg:#141512;
  --bg-2:#171814;
  --surface:#1B1D19;
  --surface-solid:#171814;
  --border:#383B34;
  --border-strong:#4A4E45;
  --text:#F4F6EB;
  --text-2:#AAB78A;
  --text-3:#809546;
  --accent:#D4FB69;
  --accent-2:#C8F579;
  --accent-ink:#1A2110;
  --accent-soft:rgba(212,251,105,0.13);
  --success:#C8F579;
  --success-soft:rgba(200,245,121,0.13);
  --danger:#F4AA69;
  --danger-soft:rgba(244,170,105,0.14);
  --warning:#FFC38D;
  --warning-soft:rgba(255,195,141,0.14);
  --purple:#AD9BFF;
  --purple-soft:rgba(173,155,255,0.14);
  --green-deep:#344319;
  --radius-lg:18px;
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 8px 24px -6px rgba(0,0,0,0.55);
  --shadow-lg:0 16px 40px -10px rgba(0,0,0,0.65);
  --nav-w:250px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  color-scheme: dark;
  background:var(--bg);
  color:var(--text);
  font-family:'Cairo',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(1000px 500px at 100% -10%, rgba(212,251,105,0.08), transparent 60%),
    radial-gradient(800px 500px at 0% 110%, rgba(52,67,25,0.18), transparent 65%);
  pointer-events:none; z-index:0;
}
.num{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;}
.wordmark{font-family:'Outfit',sans-serif; letter-spacing:-0.02em;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:'Cairo',sans-serif; font-size:15px;}

::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15); border-radius:10px;}

/* ============ LAYOUT ============ */
.app{display:flex; min-height:100vh; position:relative; z-index:1;}

.sidebar{
  width:var(--nav-w); flex:0 0 var(--nav-w);
  padding:28px 18px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh;
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px 26px 10px;
}
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 38px;
}
.brand-mark.has-photo{overflow:hidden; background:var(--surface); border:1px solid var(--border-strong);}
.brand-mark.has-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.brand-name{font-family:'Outfit',sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.01em;}
.brand-sub{font-size:11px; color:var(--text-2); margin-top:1px;}

.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--radius-sm);
  color:var(--text-2); font-weight:600; font-size:14.5px;
  transition:background .15s, color .15s;
}
.nav-item svg{flex:0 0 20px; width:20px; height:20px;}
.nav-item:hover{background:rgba(0,0,0,0.035); color:var(--text);}
.nav-item.active{background:var(--surface-solid); color:var(--text); box-shadow:var(--shadow-sm);}
.nav-item.active svg{color:var(--accent);}
.nav-spacer{flex:1;}
.nav-footer{padding:10px; font-size:11px; color:var(--text-3);}

.main{flex:1; min-width:0; padding:26px 30px 90px 30px;}
.topbar{
  display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap;
}
.page-title{font-family:'Outfit',sans-serif; font-weight:700; font-size:26px; letter-spacing:-0.01em;}
.searchbar{
  flex:1; min-width:180px; max-width:380px;
  display:flex; align-items:center; gap:8px;
  background:var(--surface-solid); border:1px solid var(--border);
  border-radius:999px; padding:9px 16px; box-shadow:var(--shadow-sm);
}
.searchbar input{border:none; outline:none; background:transparent; flex:1; font-size:14px;}
.searchbar svg{width:16px; height:16px; color:var(--text-3); flex:0 0 16px;}
.spacer{flex:1;}

.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 18px; border-radius:999px; border:none;
  font-weight:700; font-size:14px; transition:transform .1s, box-shadow .15s;
}
.btn:active{transform:scale(0.96);}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 4px 14px -4px rgba(212,251,105,0.35);}
.btn-secondary{background:var(--surface-solid); color:var(--text); border:1px solid var(--border-strong); box-shadow:var(--shadow-sm);}
.btn-ghost{background:transparent; color:var(--text-2);}
.btn-ghost:hover{color:var(--text);}
.btn-danger{background:var(--danger-soft); color:var(--danger);}
.btn-sm{padding:7px 13px; font-size:12.5px; border-radius:999px;}
.btn svg{width:16px; height:16px;}
.icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border-strong);
  background:var(--surface-solid); display:flex; align-items:center; justify-content:center;
  color:var(--text-2); box-shadow:var(--shadow-sm); flex:0 0 36px;
}
.icon-btn svg{width:16px; height:16px;}
.icon-btn:hover{color:var(--text);}

/* ============ CARDS / VIEWFINDER SIGNATURE ============ */
.card{
  background:var(--surface-solid);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:20px;
  position:relative;
  transition:border-color .18s;
}
.card.clickable{cursor:pointer;}
.card.viewfinder:hover{border-color:var(--border-strong);}

.grid{display:grid; gap:16px;}
.grid>*{min-width:0;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.stat-card .stat-label{font-size:12.5px; color:var(--text-2); font-weight:600; display:flex; align-items:center; gap:6px;}
.stat-card .stat-value{font-family:'JetBrains Mono',monospace; font-size:25px; font-weight:700; margin-top:8px; letter-spacing:-0.02em;}
.stat-card .stat-sub{font-size:12px; color:var(--text-3); margin-top:4px;}
.achievement-hero{position:relative;overflow:hidden;padding:24px;background:linear-gradient(135deg,var(--accent-soft),var(--surface-solid) 58%,rgba(173,155,255,.13));}
.achievement-hero:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:var(--accent);opacity:.08;inset-inline-end:-70px;top:-90px;}
.achievement-title{font-family:'Outfit',sans-serif;font-size:24px;font-weight:900;line-height:1.35;max-width:720px;position:relative;z-index:1;}
.achievement-copy{color:var(--text-2);font-size:13px;margin-top:7px;position:relative;z-index:1;}
.achievement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px;}
.achievement-metric{padding:16px;min-height:126px;display:flex;flex-direction:column;justify-content:space-between;}
.achievement-metric .metric-icon{font-size:22px;}
.achievement-metric .metric-value{font-family:'JetBrains Mono',monospace;font-size:21px;font-weight:800;margin-top:10px;}
.achievement-metric .metric-label{font-size:12px;color:var(--text-2);margin-top:4px;line-height:1.5;}
.smart-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;border:1px solid rgba(244,170,105,.3);background:rgba(244,170,105,.08);border-radius:var(--radius-sm);margin-top:9px;}
.smart-alert.good{border-color:rgba(212,251,105,.24);background:var(--accent-soft);}
.smart-alert-icon{font-size:20px;line-height:1;}
.smart-alert-title{font-weight:800;font-size:13px;}
.smart-alert-copy{font-size:12px;color:var(--text-2);margin-top:3px;line-height:1.6;}
@media(max-width:800px){.achievement-grid{grid-template-columns:1fr;}.achievement-metric{min-height:104px;}.achievement-title{font-size:21px;}}

.client-view-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px;}
.client-view-card{appearance:none;text-align:inherit;color:var(--text);min-height:116px;padding:20px;border:1px solid var(--border-strong);border-radius:var(--radius);background:linear-gradient(145deg,var(--surface-solid),var(--surface));display:flex;align-items:center;gap:16px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.client-view-card:hover{transform:translateY(-2px);border-color:rgba(212,251,105,.42);}
.client-view-card.active{border-color:var(--accent);background:linear-gradient(135deg,rgba(212,251,105,.17),var(--surface-solid) 72%);box-shadow:0 12px 34px rgba(0,0,0,.22),inset 0 0 0 1px rgba(212,251,105,.1);}
.client-view-icon{width:58px;height:58px;flex:0 0 58px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--green-deep);color:var(--accent);}
.client-view-icon svg{width:28px;height:28px;}
.client-view-card.active .client-view-icon{background:var(--accent);color:#141512;box-shadow:0 8px 24px rgba(212,251,105,.2);}
.client-view-copy{min-width:0;flex:1;}
.client-view-title{display:block;font-family:'Outfit',sans-serif;font-size:20px;font-weight:900;line-height:1.2;}
.client-view-sub{display:block;color:var(--text-2);font-size:12.5px;line-height:1.55;margin-top:6px;}
.client-view-count{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:800;color:var(--accent);margin-inline-start:auto;}
.client-period-bar{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);background:var(--surface-solid);border-radius:var(--radius);margin-bottom:16px;flex-wrap:wrap;}
.client-period-options{display:flex;gap:7px;flex-wrap:wrap;}
.client-period-btn{appearance:none;border:1px solid transparent;background:transparent;color:var(--text-2);border-radius:999px;padding:10px 16px;font-family:'Cairo',sans-serif;font-weight:800;font-size:12.5px;cursor:pointer;}
.client-period-btn:hover{color:var(--text);background:var(--surface-2);}
.client-period-btn.active{background:var(--accent);color:#141512;box-shadow:0 7px 20px rgba(212,251,105,.15);}
.client-period-summary{font-size:12px;color:var(--text-3);margin-inline-start:auto;padding-inline:8px;}
@media(max-width:700px){.client-view-switch{grid-template-columns:1fr;gap:10px}.client-view-card{min-height:96px;padding:16px}.client-view-title{font-size:18px}.client-period-summary{width:100%;margin-inline-start:0}.client-period-options{width:100%}.client-period-btn{flex:1;padding-inline:10px}}

.section-title{font-family:'Outfit',sans-serif; font-weight:800; font-size:16.5px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between;}
.kicker{font-size:11px; font-weight:700; color:var(--text-3); letter-spacing:0.06em; margin-bottom:6px; display:block;}
.section-title .see-all{font-size:12.5px; font-weight:600; color:var(--accent);}

/* ============ BALANCE ALLOCATION ============ */
.allocation-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:26px;background:linear-gradient(135deg,rgba(212,251,105,.12),var(--surface-solid) 55%,rgba(173,155,255,.12));overflow:hidden}
.allocation-hero h2,.allocation-setup h2{font-family:'Outfit',sans-serif;font-size:28px;line-height:1.2;margin-bottom:7px}
.allocation-hero p,.allocation-setup p{color:var(--text-2);font-size:13px;line-height:1.7;max-width:680px}
.allocation-total{min-width:260px;padding:16px 20px;border:1px solid var(--border-strong);border-radius:var(--radius);background:rgba(20,21,18,.55);display:flex;flex-direction:column}
.allocation-total span,.allocation-total small{color:var(--text-2);font-size:11.5px}
.allocation-total strong{font-family:'JetBrains Mono',monospace;font-size:25px;color:var(--accent);margin:4px 0}
.allocation-toolbar{display:flex;gap:10px;justify-content:flex-end;margin:16px 0}
.allocation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-bottom:18px}
.allocation-card{appearance:none;text-align:inherit;color:var(--text);min-height:164px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--surface-solid),var(--surface));padding:22px;display:flex;align-items:center;gap:17px;box-shadow:var(--shadow-sm);transition:transform .18s,border-color .18s,box-shadow .18s}
.allocation-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.allocation-card-icon{width:58px;height:58px;flex:0 0 58px;border-radius:18px;display:grid;place-items:center;font-size:27px;background:var(--accent-soft)}
.allocation-card.orange .allocation-card-icon{background:var(--danger-soft)}
.allocation-card.purple .allocation-card-icon{background:var(--purple-soft)}
.allocation-card.blue .allocation-card-icon{background:rgba(90,160,255,.14)}
.allocation-card-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.allocation-card-copy small{font-size:12.5px;color:var(--text-2);font-weight:800}
.allocation-card-copy strong{font-family:'JetBrains Mono',monospace;font-size:26px;margin:7px 0 4px;white-space:nowrap}
.allocation-card-copy em{font-style:normal;color:var(--text-3);font-size:11.5px}
.allocation-card-arrow{font-size:30px;color:var(--text-3)}
.allocation-loans{margin-top:18px}
.allocation-safety{display:flex;align-items:flex-start;gap:12px;padding:15px 17px;border:1px solid rgba(212,251,105,.22);background:var(--accent-soft);border-radius:var(--radius);margin-top:18px}
.allocation-safety svg{width:22px;height:22px;color:var(--accent);flex:0 0 22px}
.allocation-safety strong{font-size:13px}.allocation-safety p{font-size:12px;color:var(--text-2);margin-top:3px}
.allocation-setup{max-width:800px;margin:20px auto;text-align:center;padding:34px}
.allocation-setup>p{margin:0 auto}.allocation-setup-total{margin:24px auto 16px;display:flex;flex-direction:column;padding:18px;border:1px solid var(--border-strong);border-radius:var(--radius);max-width:430px;background:var(--surface)}
.allocation-setup-total span{font-size:12px;color:var(--text-2)}.allocation-setup-total strong{font:800 29px 'JetBrains Mono',monospace;color:var(--accent);margin-top:5px}
.allocation-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}
.allocation-preview>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.allocation-preview span{color:var(--text-2);font-size:12px;font-weight:700}.allocation-preview strong{font:700 13px 'JetBrains Mono',monospace}
.allocation-setup>.btn{margin:4px auto 12px}.allocation-setup>small{display:block;color:var(--text-3);font-size:11.5px}
.allocation-detail-balance{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;border:1px solid var(--border-strong);border-radius:var(--radius);margin-bottom:12px;background:var(--accent-soft)}
.allocation-detail-balance span{color:var(--text-2);font-size:12px}.allocation-detail-balance strong{font:800 21px 'JetBrains Mono',monospace;color:var(--accent)}
.allocation-detail-list{max-height:480px;overflow:auto}.allocation-positive{color:var(--success)}.allocation-negative{color:var(--danger)}
.allocation-modal-note{color:var(--text-2);font-size:12.5px;line-height:1.7;margin-bottom:14px}
.allocation-ratio-total{padding:11px;border-radius:var(--radius-sm);background:var(--success-soft);color:var(--success);font-weight:800;text-align:center}.allocation-ratio-total.invalid{background:var(--danger-soft);color:var(--danger)}
@media(max-width:800px){.allocation-hero{align-items:stretch;flex-direction:column}.allocation-total{min-width:0}.allocation-grid{grid-template-columns:1fr}.allocation-card{min-height:132px;padding:17px}.allocation-card-copy strong{font-size:22px}.allocation-preview{grid-template-columns:1fr}.allocation-setup{padding:24px 18px}.allocation-toolbar .btn{flex:1;justify-content:center}}

/* ============ LISTS / ROWS ============ */
.row-list{display:flex; flex-direction:column;}
.row-item{
  display:flex; align-items:center; gap:12px; padding:13px 6px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.row-item:last-child{border-bottom:none;}
.row-avatar{
  width:38px; height:38px; border-radius:11px; flex:0 0 38px;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.row-main{flex:1 1 140px; min-width:140px;}
.row-title{font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row-sub{font-size:12.5px; color:var(--text-2); margin-top:2px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.row-amount{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14.5px; white-space:nowrap;}
.row-meta{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-inline-start:auto;}
.gmail-review-layout{grid-template-columns:minmax(260px,320px) minmax(0,1fr);align-items:start;}
.gmail-review-card{min-width:0;overflow:hidden;}
.gmail-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px 6px;border-bottom:1px solid var(--border);}
.gmail-row:last-child{border-bottom:none;}
.gmail-row-main{min-width:0;}
.gmail-row-title{font-weight:750;font-size:14px;white-space:normal;overflow-wrap:anywhere;line-height:1.45;}
.gmail-row-sub{font-size:12px;color:var(--text-2);margin-top:5px;white-space:normal;overflow-wrap:anywhere;}
.gmail-row-side{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;max-width:260px;}
.gmail-row-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;}
@media(max-width:900px){.gmail-review-layout{grid-template-columns:1fr;}.gmail-row{grid-template-columns:38px minmax(0,1fr);}.gmail-row-side{grid-column:1/-1;max-width:none;justify-content:space-between;padding-inline-start:48px;}}

.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700;
}
.badge-new{background:var(--warning-soft); color:var(--warning);}
.badge-editing{background:var(--accent-soft); color:var(--accent);}
.badge-ready{background:rgba(0,199,190,0.12); color:#00C7BE;}
.badge-delivered{background:var(--success-soft); color:var(--success);}
.badge-closed_unpaid{background:rgba(173,155,255,0.14); color:var(--purple);}
.badge-paid{background:var(--success-soft); color:var(--success);}
.badge-unpaid{background:var(--danger-soft); color:var(--danger);}
.badge-neutral{background:rgba(0,0,0,0.05); color:var(--text-2);}
.tag-chip{background:rgba(0,0,0,0.045); color:var(--text-2); font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px;}
.tag-chip.tag-option{border:1px solid var(--border-strong);cursor:pointer;font-family:'Cairo',sans-serif;}
.tag-chip.tag-option.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.tag-suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.tx-tag-entry{margin-top:10px}.tag-option{min-height:38px;padding:8px 12px;cursor:pointer}.tag-option.active{background:var(--accent);color:#141512;border-color:var(--accent)}
.category-tag-entry{display:flex;gap:8px;align-items:stretch;}
.category-tag-entry input{min-width:0;flex:1;}
.category-tag-entry .btn{flex:0 0 auto;border-radius:var(--radius-sm);padding-inline:16px;}
.category-tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;min-height:30px;}
.category-tag-item{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(214,244,76,.22);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;}
.category-tag-action{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border:0;border-radius:50%;background:rgba(255,255,255,.09);color:inherit;font-size:12px;line-height:1;padding:0;cursor:pointer;}
.category-tag-action:hover{background:rgba(255,255,255,.16);}
.category-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border:0;border-radius:50%;background:rgba(255,255,255,.09);color:inherit;font-size:15px;line-height:1;padding:0;}
.category-tag-empty{color:var(--text-3);font-size:12px;padding:5px 0;}
.category-tag-row{width:100%;display:grid;grid-template-columns:minmax(130px,1fr) auto minmax(150px,220px) auto auto auto;border-radius:14px}.category-tag-row select{min-height:34px;padding:6px 9px;font-size:11px}.category-row-actions{display:flex;align-items:center;gap:7px}.finance-settings-hero{padding:24px;background:linear-gradient(135deg,rgba(212,251,105,.11),var(--surface-solid) 58%,rgba(173,155,255,.1))}.finance-settings-hero h2{font-size:26px;margin:4px 0}.finance-settings-hero p{color:var(--text-2);font-size:13px;line-height:1.7;max-width:760px}
@media(max-width:720px){.category-tag-row{grid-template-columns:minmax(0,1fr) auto auto auto}.category-tag-row small{display:none}.category-tag-row select{grid-column:1/-1;width:100%}.category-row-actions .btn{padding-inline:10px}}

.empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 20px; color:var(--text-3); text-align:center; gap:10px;}
.empty-state svg{width:44px; height:44px; opacity:.5;}
.empty-state .es-title{font-weight:700; color:var(--text-2); font-size:14.5px;}
.empty-state .es-sub{font-size:12.5px;}

/* ============ FILTER PILLS ============ */
.pill-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.pill{
  padding:8px 15px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--surface-solid); border:1px solid var(--border-strong); color:var(--text-2);
  transition:all .15s;
}
.pill.active{background:var(--text); color:#fff; border-color:var(--text);}

/* ============ MODAL ============ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,20,25,0.45);
  backdrop-filter:blur(4px); z-index:100;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--surface-solid); border-radius:24px; width:100%; max-width:480px;
  max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg);
  animation:modalIn .22s cubic-bezier(.2,.9,.3,1);
}
.modal.wide{max-width:680px;}
@keyframes modalIn{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface-solid); z-index:2; border-radius:24px 24px 0 0;}
.modal-title{font-family:'Outfit',sans-serif; font-weight:700; font-size:18px;}
.modal-body{padding:20px 22px;}
.modal-foot{display:flex; gap:10px; padding:16px 22px 22px 22px; position:sticky; bottom:0; background:var(--surface-solid);}

.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--text-2); margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%; padding:11px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:#232326; outline:none; color:var(--text);
  transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}
.seg{display:flex; background:#2C2C2E; border-radius:999px; padding:3px; gap:2px;}
.seg button{flex:1; border:none; background:transparent; padding:9px 10px; border-radius:999px; font-weight:700; font-size:13px; color:var(--text-2);}
.seg button.active{background:#48484A; color:var(--text); box-shadow:var(--shadow-sm);}
.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:11px 0;}
.toggle-row span{font-weight:600; font-size:14px;}
.switch{width:46px; height:27px; border-radius:999px; background:#39393D; position:relative; transition:background .15s; flex:0 0 46px;}
.switch.on{background:var(--success);}
.switch::after{content:''; position:absolute; top:2.5px; left:2.5px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.3); transition:transform .15s;}
[dir="rtl"] .switch::after{left:auto; right:2.5px;}
.switch.on::after{transform:translateX(-19px);}
[dir="rtl"] .switch.on::after{transform:translateX(19px);}

.chip-select{display:flex; flex-wrap:wrap; gap:8px;}
.chip-opt{padding:8px 13px; border-radius:999px; border:1px solid var(--border-strong); font-size:13px; font-weight:600; background:#232326; color:var(--text-2);}
.chip-opt.active{background:var(--text); border-color:var(--text); color:#fff;}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#3A3A3C; color:#fff; padding:13px 22px; border-radius:999px; font-weight:600; font-size:13.5px;
  box-shadow:var(--shadow-lg); z-index:200; opacity:0; pointer-events:none; transition:all .25s;
  display:flex; align-items:center; gap:8px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============ BOTTOM NAV (mobile) ============ */
.bottom-nav{display:none;}
@media(max-width:880px){
  .sidebar{display:none;}
  .main{padding:16px 14px 90px 14px;}
  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:50;
    background:rgba(20,20,22,0.85); backdrop-filter:blur(20px);
    border-top:1px solid var(--border); padding:8px 4px calc(8px + env(safe-area-inset-bottom)) 4px;
  }
  .bottom-nav .nav-item{flex-direction:column; flex:1; text-align:center; gap:3px; font-size:10.5px; padding:6px 2px; border-radius:12px;}
  .bottom-nav .nav-item.active{background:transparent;}
  .bottom-nav .nav-item svg{margin:0 auto;}
}

.section{display:none;}
.section.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.banner{
  display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:var(--radius);
  background:linear-gradient(90deg, var(--warning-soft), transparent); border:1px solid rgba(255,149,0,0.25);
  margin-bottom:18px;
}
.banner svg{width:20px; height:20px; color:var(--warning); flex:0 0 20px;}
.banner strong{font-size:13.5px;}
.banner p{font-size:12.5px; color:var(--text-2); margin-top:2px;}
.banner .btn{margin-inline-start:auto;}

.chart-wrap{position:relative; height:220px;}
.finance-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.finance-toolbar .field{margin:0;min-width:150px;flex:1;}
.finance-toolbar select{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--border-strong);background:#232326;color:var(--text);}
.finance-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.finance-actions .btn{justify-content:center;min-height:48px;}
.finance-manage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.subscription-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.subscription-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.subscription-card{display:flex;flex-direction:column;gap:16px}.subscription-card.is-paused{opacity:.72}.subscription-card-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px}.subscription-card-head h3{font-size:17px;margin:0 0 5px}.subscription-card-head>strong{font-family:'JetBrains Mono',monospace;color:var(--accent);white-space:nowrap}.subscription-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.subscription-meta span{padding:10px;border-radius:12px;background:var(--surface-2);font-size:11px;color:var(--text-3)}.subscription-meta b{display:block;margin-top:4px;color:var(--text);font-size:12px}.subscription-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:auto}
@media(max-width:640px){.finance-actions{grid-template-columns:1fr 1fr}.finance-actions .btn:last-child{grid-column:1/-1}.finance-manage-grid{grid-template-columns:1fr}.chart-wrap{height:260px}}

.finance-subpage-head{display:flex;margin-bottom:16px}.finance-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.finance-hero h2{font-size:24px;margin:2px 0 0}.finance-kicker{font-size:12px;color:var(--text-2)}.finance-hero .finance-actions{display:flex;flex-wrap:wrap;margin:0}.finance-filterbar{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr)) auto}.finance-filterbar select{min-width:0}.finance-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.finance-summary-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:20px;text-align:start;color:var(--text);cursor:pointer;transition:.18s ease}.finance-summary-card:hover,.finance-summary-card.active{border-color:var(--accent);transform:translateY(-1px)}.finance-summary-card span,.finance-summary-card small{display:block;color:var(--text-2)}.finance-summary-card strong{display:block;font-family:'JetBrains Mono',monospace;font-size:25px;margin:8px 0}.finance-summary-card.income strong{color:var(--success)}.finance-summary-card.expense strong{color:var(--danger)}.finance-summary-card.net strong{color:var(--accent)}.finance-insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.finance-breakdown-list{display:flex;flex-direction:column}.finance-breakdown-row{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto 18px;align-items:center;gap:10px;padding:13px 4px;border-bottom:1px solid var(--border);background:transparent;color:var(--text);text-align:start;cursor:pointer}.finance-breakdown-row:last-child{border-bottom:0}.finance-breakdown-row:hover{color:var(--accent)}.finance-breakdown-icon{width:36px;height:36px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center}.finance-breakdown-copy strong,.finance-breakdown-copy small{display:block}.finance-breakdown-copy small{color:var(--text-3);margin-top:2px}.finance-breakdown-value{font-family:'JetBrains Mono',monospace;font-weight:700}.finance-breakdown-arrow{font-size:24px;color:var(--text-3)}.finance-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 14px;color:var(--text-2)}.finance-breadcrumb button{background:transparent;color:var(--accent);cursor:pointer}.finance-tag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.finance-tag-grid button{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:14px;color:var(--text);text-align:start;cursor:pointer}.finance-tag-grid span,.finance-tag-grid strong,.finance-tag-grid small{display:block}.finance-tag-grid strong{font-family:'JetBrains Mono',monospace;margin:7px 0;color:var(--danger)}.finance-tag-grid small{color:var(--text-3)}
.finance-charts-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:16px;margin-bottom:18px}.finance-chart-card .section-title{align-items:flex-start}.finance-chart-card .section-title span,.finance-chart-card .section-title small{display:block}.finance-chart-card .section-title small{font-size:11px;color:var(--text-3);font-weight:400}
.finance-detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.finance-detail-card .section-title{align-items:flex-start}.finance-detail-list .row-item{padding-block:16px}.finance-row-facts{gap:6px 12px;line-height:1.65}.finance-row-facts>span{display:inline-flex;align-items:center}.finance-row-date{font-weight:800;color:var(--text)}.finance-row-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.tag-empty-hint{display:block;width:100%;padding:10px 12px;border:1px dashed var(--border-strong);border-radius:12px;color:var(--text-3);font-size:12px}
@media(max-width:720px){.finance-hero{align-items:flex-start;flex-direction:column}.finance-hero .finance-actions{width:100%;display:grid;grid-template-columns:1fr 1fr auto}.finance-filterbar{display:grid;grid-template-columns:1fr 1fr}.finance-filterbar .btn{grid-column:1/-1}.finance-summary-grid{grid-template-columns:1fr 1fr}.finance-summary-card.net{grid-column:1/-1}.finance-summary-card{padding:15px}.finance-summary-card strong{font-size:20px}.finance-charts-grid,.finance-insight-grid{grid-template-columns:1fr}.finance-chart-card .chart-wrap{height:245px}.finance-tag-grid{grid-template-columns:1fr 1fr}.finance-breakdown-row{grid-template-columns:36px minmax(0,1fr) auto 12px}.finance-breakdown-value{font-size:12px}}
@media(max-width:720px){.finance-detail-list .row-item{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:start}.finance-detail-list .row-amount{grid-column:2;font-size:16px;margin-top:4px}.finance-row-facts{display:grid;gap:3px}.finance-row-tags{grid-column:1/-1}.finance-detail-card{padding-inline:14px}.tag-suggestions{max-height:180px;overflow-y:auto;padding:2px}}
@media(max-width:720px){.subscription-summary-grid{grid-template-columns:1fr 1fr}.subscription-summary-grid .finance-summary-card:last-child{grid-column:1/-1}.subscription-grid{grid-template-columns:1fr}.subscription-meta{grid-template-columns:1fr 1fr}.subscription-meta span:first-child{grid-column:1/-1}}
.notification-center-btn{position:relative}.notification-center-btn>span{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--danger);color:#171814;font:700 10px/18px 'JetBrains Mono',monospace;text-align:center}.notification-center-btn>span:empty{display:none}.sync-health-strip{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;padding:12px;margin-bottom:14px;border-radius:12px;background:var(--surface-2);font-size:12px}.sync-health-strip span,.sync-health-strip small{color:var(--text-3)}.sync-health-strip strong{font-family:'JetBrains Mono',monospace;text-align:end}.sync-health-strip small{grid-column:1/-1}.backup-warning{padding:10px 12px;margin:-4px 0 12px;border:1px solid rgba(244,170,105,.4);border-radius:10px;background:rgba(244,170,105,.08);color:var(--warning);font-size:12px}.health-section{margin-bottom:20px}.data-health-card{align-self:stretch}.invoice-status-select{width:auto;min-width:118px;padding:7px 10px;font-size:11px}.invoice-log-row{gap:10px}
@media(max-width:720px){.invoice-log-row{align-items:flex-start;flex-wrap:wrap}.invoice-log-row .row-main{min-width:60%}.invoice-status-select{width:100%;margin-inline-start:48px}.notification-center-btn{order:4}}
@media(max-width:520px){.tx-tag-entry{display:grid;grid-template-columns:minmax(0,1fr) auto}.tx-tag-entry .btn{padding-inline:12px}.tag-suggestions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tag-option{width:100%;white-space:normal}.finance-tag-grid{grid-template-columns:1fr}}
.invoice-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.invoice-page-head h2{margin:3px 0 0}.invoice-total-due{text-align:end}.invoice-total-due span,.invoice-total-due strong{display:block}.invoice-total-due span{font-size:12px;color:var(--text-2)}.invoice-total-due strong{font-family:'JetBrains Mono',monospace;font-size:24px;color:var(--danger);margin-top:4px}.invoice-outstanding-list{display:grid;gap:12px;margin-bottom:20px}.invoice-outstanding-card{display:grid;grid-template-columns:minmax(190px,1.1fr) minmax(160px,1fr) auto minmax(220px,auto);align-items:center;gap:16px}.invoice-client{display:flex;align-items:center;gap:10px}.invoice-client strong,.invoice-client small{display:block}.invoice-client small{color:var(--text-2);margin-top:3px}.invoice-months{display:flex;flex-wrap:wrap;gap:5px}.invoice-months span{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 8px;font-size:11px}.invoice-due span,.invoice-due strong{display:block}.invoice-due span{font-size:11px;color:var(--text-2)}.invoice-due strong{font-family:'JetBrains Mono',monospace;color:var(--danger);margin-top:3px}.invoice-card-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.invoice-phone{font-size:11px;color:var(--text-2);direction:ltr}.invoice-tools{margin-bottom:18px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}.invoice-tools summary{padding:16px 18px;cursor:pointer;font-weight:700}.invoice-tools-body{padding:0 16px 16px}
@media(max-width:850px){.invoice-outstanding-card{grid-template-columns:1fr auto}.invoice-months{grid-column:1/-1}.invoice-card-actions{grid-column:1/-1;justify-content:stretch}.invoice-card-actions .btn{flex:1}.invoice-page-head{align-items:flex-start}.invoice-total-due strong{font-size:19px}}

.tabs-strip{display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto; scrollbar-width:none;}
.tabs-strip::-webkit-scrollbar{display:none;}
.tab-btn{padding:10px 4px; margin-inline-end:22px; font-weight:700; font-size:14px; color:var(--text-2); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; flex:0 0 auto; cursor:pointer;}
.tab-btn.active{color:var(--text); border-color:var(--accent);}

.progress-track{height:6px; background:#2C2C2E; border-radius:999px; overflow:hidden;}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:999px;}

.wallet-card{border-radius:var(--radius-lg); padding:20px; color:#fff; position:relative; overflow:hidden; min-height:130px; display:flex; flex-direction:column; justify-content:space-between;}
.wallet-card::after{content:''; position:absolute; inset:0; background:radial-gradient(220px 140px at 100% 0%, rgba(255,255,255,0.25), transparent 60%);}
.wallet-card .wname{font-weight:700; font-size:14px; position:relative; z-index:1;}
.wallet-card .wbal{font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:700; position:relative; z-index:1;}
.wallet-card .wcur{font-size:11px; opacity:.85; position:relative; z-index:1;}

@media print{ .sidebar,.bottom-nav,.topbar{display:none;} }