:root{
  --bg:#07110d;
  --panel:#0d1914;
  --panel-2:#12231b;
  --text:#eef8f1;
  --muted:#88a093;
  --line:#20382c;
  --accent:#6df09b;
  --accent-2:#b8ffcb;
  --warning:#f6cc66;
  --danger:#ff8d8d;
  --shadow:0 24px 80px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 85% 0%,rgba(74,199,119,.12),transparent 30%),
    radial-gradient(circle at 10% 90%,rgba(109,240,155,.05),transparent 25%),
    var(--bg);
  color:var(--text);
  font-family:"DM Sans",system-ui,sans-serif;
  min-height:100vh;
}
button,input,select{font:inherit}
button{cursor:pointer}

.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;padding:28px 22px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;background:rgba(5,14,10,.78);backdrop-filter:blur(18px)
}
.brand-wrap{display:flex;gap:12px;align-items:center}
.logo-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,var(--accent),#2b9a57);display:grid;place-items:center;color:#06210f;font:800 24px/1 Manrope;box-shadow:0 10px 30px rgba(109,240,155,.22)}
.brand{font:800 19px/1.1 Manrope;letter-spacing:-.03em}
.brand-sub{font-size:11px;color:var(--muted);margin-top:4px;max-width:150px}
.nav{display:grid;gap:7px;margin-top:42px}
.nav-item{border:0;background:transparent;color:var(--muted);text-align:left;padding:12px 14px;border-radius:13px;font-weight:600;display:flex;gap:12px;align-items:center;transition:.2s}
.nav-item:hover,.nav-item.active{background:#11251a;color:var(--text)}
.nav-item.active{box-shadow:inset 0 0 0 1px rgba(109,240,155,.09)}
.nav-item span{width:18px;text-align:center;color:var(--accent)}
.sidebar-bottom{margin-top:auto;display:grid;gap:10px}
.privacy-chip{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;padding:0 6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(109,240,155,.08)}

.main{padding:38px 42px 70px;max-width:1540px;width:100%;margin:0 auto}
.topbar{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:34px}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-weight:700;font-size:11px;color:var(--accent);margin:0 0 7px}
h1,h2,h3,p{margin-top:0}
h1{font:800 clamp(28px,3vw,44px)/1 Manrope;letter-spacing:-.045em;margin-bottom:0}
h2{font:800 22px/1.1 Manrope;letter-spacing:-.035em;margin-bottom:0}
h3{font:800 31px/1 Manrope;letter-spacing:-.04em;margin:7px 0 0}
.top-actions{display:flex;gap:10px}
.primary-btn,.ghost-btn,.text-btn,.icon-btn{border:0;border-radius:12px;font-weight:700;transition:.2s}
.primary-btn{background:var(--accent);color:#06210f;padding:12px 16px;box-shadow:0 10px 30px rgba(109,240,155,.14)}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.ghost-btn{background:#102018;color:var(--text);padding:11px 14px;border:1px solid var(--line)}
.text-btn{background:transparent;color:var(--accent);padding:8px}
.icon-btn{width:38px;height:38px;background:#132219;color:var(--text);font-size:25px}
.full{width:100%;margin-top:4px}

.section{display:none}.active-section{display:block}
.hero-grid{display:grid;grid-template-columns:1.6fr .7fr;gap:18px}
.hero-card,.panel,.room-card{background:linear-gradient(180deg,rgba(17,31,24,.96),rgba(10,22,16,.96));border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.hero-card{padding:28px}
.hero-card.big{min-height:245px;display:flex;flex-direction:column}
.gradient-card{background:radial-gradient(circle at 90% 10%,rgba(184,255,203,.18),transparent 30%),linear-gradient(145deg,#173b28,#0c1d15);position:relative;overflow:hidden}
.gradient-card:after{content:"";position:absolute;width:170px;height:170px;border:1px solid rgba(184,255,203,.12);border-radius:50%;right:-55px;bottom:-65px;box-shadow:0 0 0 30px rgba(184,255,203,.025),0 0 0 60px rgba(184,255,203,.018)}
.card-topline,.panel-head,.room-card-head,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.status-pill,.trend,.pro-pill,.live-pill{font-size:11px;font-weight:800;padding:6px 9px;border-radius:999px}
.safe,.good{background:rgba(109,240,155,.11);color:var(--accent)}
.pro-pill{background:rgba(246,204,102,.12);color:var(--warning)}
.live-pill{background:#10251a;color:var(--accent);display:flex;align-items:center;gap:6px}.live-pill i{width:6px;height:6px;background:var(--accent);border-radius:50%}
.hero-number{font:800 clamp(48px,7vw,82px)/.95 Manrope;letter-spacing:-.065em;margin-top:24px}
.hero-number.small{font-size:48px;margin-top:18px}
.hero-sub,.muted{color:var(--muted);font-size:13px}.hero-sub{margin-top:10px}
.score{font:800 82px/.9 Manrope;letter-spacing:-.07em;margin-top:28px}.gradient-card p{color:#bad1c1;max-width:280px;font-size:14px;line-height:1.55;margin-top:18px}
.meter{height:9px;background:#13271c;border-radius:999px;overflow:hidden;margin-top:auto}.meter.compact{margin-top:22px;height:7px}.meter-fill{height:100%;background:linear-gradient(90deg,#34b76d,var(--accent));border-radius:inherit}.meter-fill.warning{background:linear-gradient(90deg,#d89e34,var(--warning))}
.meter-row,.room-meta{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:11px}.room-meta strong{color:var(--text)}
.section-heading{margin:34px 0 16px}.section-heading.solo{margin-top:0}.section-heading .muted{margin:7px 0 0}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.room-card{padding:20px}.room-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font:800 16px Manrope;margin-bottom:24px}.tfsa{background:#183a27;color:#79efa1}.rrsp{background:#1d2d44;color:#93bfff}.fhsa{background:#3a2d17;color:#ffd481}.trend{background:#322b16;color:var(--warning)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.panel{padding:22px}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}.stat-row div{display:grid;gap:7px}.stat-row span,.quote span,.trade-summary span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.stat-row strong{font:800 23px Manrope}.positive{color:var(--accent)!important}.negative{color:var(--danger)!important}.mini-chart{height:120px;margin-top:18px;color:var(--accent)}.mini-chart svg{width:100%;height:100%;filter:drop-shadow(0 8px 16px rgba(109,240,155,.15))}
.option-row{display:grid;grid-template-columns:1fr auto auto;gap:22px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}.option-row:last-child{border-bottom:0}.option-row>div:first-child{display:grid;gap:3px}.option-row strong{text-transform:lowercase}.option-row span{font-size:12px;color:var(--muted)}.quote{display:grid;text-align:right;gap:3px}.quote strong{font-size:14px}

.ledger-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px}label{display:grid;gap:8px;color:var(--muted);font-size:12px;font-weight:700;margin-top:18px}input,select{background:#0b1711;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:13px;outline:none}input:focus,select:focus{border-color:#3e7754;box-shadow:0 0 0 3px rgba(109,240,155,.06)}.whatif-result{margin-top:16px;padding:13px 14px;border-radius:12px;background:#0b1711;color:var(--muted);font-size:13px}.ledger-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.ledger-row:last-child{border-bottom:0}.ledger-row>div{display:flex;gap:11px;align-items:center}.ledger-row div div{display:grid;gap:3px}.ledger-row small{color:var(--muted)}.activity-icon{width:32px;height:32px;border-radius:10px;background:#183a27;color:var(--accent);display:grid;place-items:center}.activity-icon.withdrawal{background:#1d2d44;color:#93bfff}
.trade-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.trade-summary div{background:#0d1914;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:7px}.trade-summary strong{font:800 24px Manrope}.trade-table-wrap{overflow:auto}.trade-table{width:100%;border-collapse:collapse;min-width:700px}.trade-table th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:12px;border-bottom:1px solid var(--line)}.trade-table td{padding:16px 12px;border-bottom:1px solid rgba(32,56,44,.65);font-size:13px}.income-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.month-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.month-card{background:#0d1914;border:1px solid var(--line);padding:18px;border-radius:16px}.month-card span{color:var(--muted);font-size:11px;text-transform:uppercase}.month-card strong{display:block;font:800 24px Manrope;margin-top:7px}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);display:none;place-items:center;padding:20px;z-index:20}.modal-backdrop.open{display:grid}.modal{width:min(470px,100%);background:#0c1812;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 30px 100px #000}.modal-head,.modal-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.modal-actions{margin-top:24px;justify-content:flex-end}.toast{position:fixed;right:24px;bottom:24px;background:var(--accent);color:#06210f;padding:11px 15px;border-radius:12px;font-weight:800;transform:translateY(80px);opacity:0;transition:.25s;z-index:30}.toast.show{transform:translateY(0);opacity:1}

body.light{--bg:#f1f7f3;--panel:#fff;--panel-2:#eef6f0;--text:#102018;--muted:#6d7d73;--line:#d8e6dc;--shadow:0 20px 60px rgba(39,72,52,.08);background:#f1f7f3}.light .sidebar{background:rgba(247,251,248,.9)}.light .nav-item:hover,.light .nav-item.active{background:#e4f1e8}.light .ghost-btn{background:#f7fbf8}.light .hero-card,.light .panel,.light .room-card,.light .trade-summary div,.light .month-card{background:#fff}.light input,.light select,.light .whatif-result{background:#f5faf6}.light .gradient-card{background:linear-gradient(145deg,#dff6e6,#eef8f1)}

@media(max-width:1050px){.app-shell{grid-template-columns:88px 1fr}.sidebar{padding:24px 14px}.brand-wrap>div:last-child,.nav-item:not(.active){font-size:0}.brand-wrap{justify-content:center}.nav-item{justify-content:center;padding:13px}.nav-item span{font-size:16px}.privacy-chip{display:none}.hero-grid,.two-col{grid-template-columns:1fr}.room-grid{grid-template-columns:1fr 1fr}.main{padding:32px 26px 60px}}
@media(max-width:720px){.app-shell{display:block}.sidebar{position:fixed;z-index:10;left:0;right:0;bottom:0;top:auto;width:auto;height:70px;border-right:0;border-top:1px solid var(--line);padding:9px 10px}.brand-wrap,.sidebar-bottom{display:none}.nav{display:grid;grid-template-columns:repeat(5,1fr);margin:0;gap:4px}.nav-item,.nav-item:not(.active){font-size:0;padding:12px 4px;justify-content:center}.nav-item span{font-size:17px}.main{padding:24px 16px 100px}.topbar{align-items:flex-start;display:grid}.top-actions{width:100%}.top-actions button{flex:1}.hero-grid,.room-grid,.two-col,.ledger-layout,.income-grid{grid-template-columns:1fr}.trade-summary{grid-template-columns:1fr 1fr}.month-grid{grid-template-columns:1fr 1fr}.hero-number{font-size:56px}.section-heading{align-items:flex-end}.stat-row{grid-template-columns:1fr 1fr}.option-row{grid-template-columns:1fr auto}.option-row .quote:last-child{display:none}}

/* global viewport fit: desktop, ultrawide and standalone pages */
html,body{width:100%;max-width:none!important;min-width:0;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
.app-shell,.main,main{max-width:none!important;width:100%}
.main{margin:0!important}
body{max-width:none!important}
@media(min-width:1400px){.main{padding-left:clamp(28px,2.4vw,82px)!important;padding-right:clamp(28px,2.4vw,82px)!important}.month-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.hero-grid{grid-template-columns:minmax(0,1.65fr) minmax(340px,.65fr)}}
@media(min-width:1800px){.main{padding-left:clamp(36px,2.8vw,100px)!important;padding-right:clamp(36px,2.8vw,100px)!important}.month-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(min-width:2500px){.main{padding-left:clamp(48px,3vw,120px)!important;padding-right:clamp(48px,3vw,120px)!important}.month-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}