:root { color-scheme: dark; --bg:#03090d; --surface:#091923; --surface2:#0d2530; --border:#244450; --soft:#18333e; --text:#e8f4f5; --muted:#7897a2; --cyan:#82d4e6; --gold:#d7b86b; --green:#6fd0a1; --red:#e98787; --serif:Georgia,'Times New Roman',serif; --sans:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); }
body { min-height:100vh; margin:0; background:radial-gradient(circle at 78% 3%,rgb(29 78 94 / .24),transparent 29rem),var(--bg); color:var(--text); font-family:var(--sans); }
button,input,select { font:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
button:disabled { cursor:wait!important; opacity:.55; }
.kicker { margin:0 0 8px; color:#6e9caa; font-size:9px; font-weight:900; letter-spacing:.18em; }
.positive { color:var(--green)!important; }
.negative { color:var(--red)!important; }
.login-body { display:grid; place-items:center; padding:22px; }
.login-shell { width:min(440px,100%); }
.login-card { position:relative; overflow:hidden; padding:38px; border:1px solid #355d6b; border-radius:16px; background:linear-gradient(145deg,#0c2733,#07161e); box-shadow:0 30px 90px rgb(0 0 0 / .55); }
.login-card::after { content:''; position:absolute; right:-100px; top:-120px; width:280px; height:280px; border:1px solid rgb(130 212 230 / .14); border-radius:50%; box-shadow:0 0 0 38px rgb(130 212 230 / .03),0 0 0 78px rgb(130 212 230 / .018); pointer-events:none; }
.login-emblem { position:relative; z-index:1; display:grid; width:54px; height:54px; margin-bottom:26px; place-items:center; border:1px solid #477888; border-radius:50%; color:var(--cyan); font-size:25px; box-shadow:0 0 28px rgb(130 212 230 / .16); }
.login-card h1 { position:relative; z-index:1; margin:0; font-family:var(--serif); font-size:34px; font-weight:400; }
.login-copy { margin:12px 0 26px; color:var(--muted); font-size:12px; line-height:1.65; }
.login-error { margin-bottom:18px; padding:12px 13px; border:1px solid #71434a; border-radius:8px; background:#2b171b; color:#f0a7ad; font-size:11px; }
.login-form { display:grid; gap:16px; }
.login-form label { display:grid; gap:7px; color:#9ab4bc; font-size:11px; font-weight:700; }
.login-form input { width:100%; min-height:47px; padding:0 13px; border:1px solid #315562; border-radius:8px; background:#06141b; color:var(--text); }
.login-form button { min-height:48px; margin-top:5px; border:1px solid #6abacc; border-radius:8px; background:linear-gradient(180deg,#79d0e2,#4aa1b5); color:#031017; font-weight:900; cursor:pointer; }
.privacy-note { display:flex; align-items:center; gap:8px; margin:23px 0 0; color:#66858f; font-size:9px; }
.privacy-note span { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.app-shell { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:30; display:flex; width:255px; flex-direction:column; padding:25px 17px 20px; border-right:1px solid var(--soft); background:linear-gradient(180deg,rgb(12 34 44 / .96),rgb(4 16 23 / .99)); }
.brand { display:flex; align-items:center; gap:12px; margin:0 5px 32px; padding:0; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.brand-mark { display:grid; width:43px; height:43px; place-items:center; border:1px solid #376272; border-radius:50%; color:var(--cyan); font-size:21px; }
.brand small,.brand strong { display:block; }
.brand small { color:var(--cyan); font-size:9px; font-weight:900; letter-spacing:.28em; }
.brand strong { margin-top:2px; font-family:var(--serif); font-size:20px; font-weight:400; }
.sidebar nav { display:grid; gap:5px; }
.sidebar nav>p { margin:0 12px 9px; color:#587784; font-size:9px; font-weight:900; letter-spacing:.2em; }
.nav-button { display:grid; min-height:44px; grid-template-columns:26px 1fr; align-items:center; gap:8px; padding:0 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:#8aa5ae; text-align:left; cursor:pointer; }
.nav-button.active { border-color:#315563; background:linear-gradient(90deg,#123341,#0d2732); color:white; box-shadow:inset 3px 0 var(--cyan); }
.logout-form { margin-top:auto; padding-top:18px; border-top:1px solid var(--soft); }
.logout-form button { width:100%; min-height:40px; border:1px solid #3b5d68; border-radius:7px; background:#091923; color:#94afb7; cursor:pointer; }
.main-content { min-height:100vh; margin-left:255px; padding:0 38px 54px; }
.topbar { display:flex; min-height:104px; align-items:center; gap:16px; margin-bottom:28px; border-bottom:1px solid var(--soft); }
.topbar h1 { margin:0; font-family:var(--serif); font-size:clamp(24px,3vw,32px); font-weight:400; }
.menu-button { display:none; }
.view { animation:reveal .22s ease; }
@keyframes reveal { from { opacity:0; transform:translateY(5px); } }
.balance-card,.what-if-card,.info-card,.monthly-card,.section-hero,.detail-card,.summary,.entry-list article,.future-card,.panel,.entry-editor { border:1px solid var(--border); border-radius:10px; background:linear-gradient(145deg,rgb(12 33 43 / .98),rgb(7 23 31 / .98)); box-shadow:0 18px 48px rgb(0 0 0 / .25); }
.balance-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.65fr); gap:32px; align-items:center; margin-bottom:18px; padding:30px 32px; background:linear-gradient(120deg,#0d2b38,#071923); }
.savings-focus-card { grid-template-columns:1fr; }
.balance-card h2,.section-hero h2,.future-card h2 { margin:6px 0 8px; font-family:var(--serif); font-size:clamp(42px,6vw,64px); font-weight:400; letter-spacing:-.035em; }
.balance-card>div>p:last-child,.section-hero p:last-child,.future-card p:last-child { margin:0; color:var(--muted); font-size:11px; }
.cash-possibility { display:grid; overflow:hidden; border:1px solid #554e34; border-radius:8px; background:#1c1c14; }
.cash-possibility>div { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 16px; color:#a8a17b; font-size:10px; }
.cash-possibility>div strong { color:#d8cd99; font-family:var(--serif); font-size:20px; font-weight:400; }
.cash-possibility .possibility-total { border-top:1px solid #48432f; background:#242317; color:#e7dfb8; }
.cash-possibility .possibility-total strong { color:var(--gold); font-size:27px; }
.cash-possibility>small { padding:0 16px 13px; color:#77745e; font-size:8px; }
.account-lines { display:grid; overflow:hidden; border:1px solid var(--soft); border-radius:8px; background:rgb(4 16 22 / .58); }
.account-lines>div { display:flex; justify-content:space-between; gap:15px; padding:14px 16px; border-top:1px solid var(--soft); font-size:11px; }
.account-lines>div:first-child { border-top:0; }
.what-if-card { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); gap:26px; align-items:center; margin:-2px 0 18px; padding:20px 24px; border-color:#554e34; background:linear-gradient(120deg,#1b1b13,#111812); }
.what-if-card h3 { margin:0 0 6px; font-family:var(--serif); font-size:20px; font-weight:400; }
.what-if-card>div>p:last-child { margin:0; color:#8d896e; font-size:9px; }
.what-if-calculation { display:flex; align-items:center; justify-content:flex-end; gap:10px; color:#9e9879; font-size:9px; }
.what-if-calculation b { color:#6e6a54; font-size:15px; }
.what-if-calculation strong { color:var(--gold); font-family:var(--serif); font-size:25px; font-weight:400; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.info-card { display:flex; min-height:218px; flex-direction:column; align-items:flex-start; padding:22px; color:var(--text); text-align:left; cursor:pointer; }
.info-card:hover { border-color:#4d7784; transform:translateY(-2px); }
.card-icon { display:grid; width:38px; height:38px; margin-bottom:18px; place-items:center; border:1px solid #315561; border-radius:9px; background:#102b36; color:var(--cyan); font-style:normal; }
.card-icon.gold { border-color:#5a5035; background:#282619; color:var(--gold); }
.card-icon.red { border-color:#5b4144; background:#27171a; color:var(--red); }
.info-card small,.detail-card small,.summary small,.entry-list small { color:#698b96; font-size:8px; font-weight:850; letter-spacing:.15em; }
.info-card>strong { margin:7px 0 8px; font-family:var(--serif); font-size:clamp(23px,2.7vw,31px); font-weight:400; }
.info-card p { margin:0; color:#78959e; font-size:10px; line-height:1.55; }
.info-card em { margin-top:auto; padding-top:18px; color:var(--cyan); font-size:9px; font-style:normal; font-weight:800; }
.monthly-card { display:grid; grid-template-columns:minmax(220px,1fr) minmax(280px,.8fr); gap:0 38px; align-items:center; padding:23px 25px; }
.monthly-card h3,.panel h3 { margin:0; font-family:var(--serif); font-size:22px; font-weight:400; }
.monthly-rows>div { display:flex; justify-content:space-between; gap:20px; padding:9px 0; border-top:1px solid var(--soft); color:#89a3ab; font-size:10px; }
.monthly-rows>div:first-child { border-top:0; }
.monthly-rows .total { color:#d8e8ea; font-weight:800; }
.section-hero,.future-card { margin-bottom:18px; padding:30px 32px; background:linear-gradient(120deg,#0d2b38,#071923); }
.two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.account-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.detail-card { padding:24px; }
.detail-card h2 { margin:6px 0 14px; font-family:var(--serif); font-size:24px; font-weight:400; }
.detail-card>strong { font-size:21px; }
.detail-card p { color:var(--muted); font-size:10px; }
.savings-preview { display:grid; gap:9px; margin:20px 0 18px; padding:14px; border:1px solid #554e34; border-radius:8px; background:#1c1c14; }
.savings-preview>.kicker { margin-bottom:2px; }
.savings-preview>div { display:flex; justify-content:space-between; gap:12px; color:#a8a17b; font-size:9px; }
.savings-preview>div strong { color:var(--gold); font-size:11px; }
.savings-preview .preview-total { padding-top:10px; border-top:1px solid #48432f; color:#e7dfb8; }
.savings-preview .preview-total strong { font-family:var(--serif); font-size:17px; font-weight:400; }
.savings-preview small { color:#8d896e; font-size:9px; line-height:1.5; }
.cash-transfer { min-height:38px; margin-top:4px; padding:0 10px; border:1px solid #756b42; border-radius:7px; background:#2d2a19; color:#e4d493; font-size:9px; font-weight:800; cursor:pointer; }
.account-adjust { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:20px; padding-top:17px; border-top:1px solid var(--soft); }
.account-adjust label,.entry-editor label { display:grid; gap:6px; color:#8da7af; font-size:9px; font-weight:750; }
.account-adjust input,.account-adjust select,.entry-editor input,.entry-editor select { width:100%; min-height:39px; padding:0 9px; border:1px solid #315562; border-radius:7px; background:#06141b; color:var(--text); }
.account-adjust>button { grid-column:1/-1; min-height:39px; border:1px solid #3e7180; border-radius:7px; background:#123340; color:#bce8f1; font-size:9px; font-weight:850; cursor:pointer; }
.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; margin-bottom:18px; background:var(--border); }
.summary>div { padding:18px 20px; background:#0a1a22; }
.summary small,.summary strong { display:block; }
.summary strong { margin-top:6px; font-family:var(--serif); font-size:23px; font-weight:400; }
.entry-editor { display:grid; grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr); gap:24px; align-items:start; margin-bottom:18px; padding:23px; }
.entry-editor h3 { margin:0 0 7px; font-family:var(--serif); font-size:22px; font-weight:400; }
.entry-editor>div>p:last-child { margin:0; color:var(--muted); font-size:10px; line-height:1.6; }
.entry-editor form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.entry-editor form>button { min-height:40px; align-self:end; border:1px solid #4d8493; border-radius:7px; background:linear-gradient(180deg,#376e7c,#25515e); color:#e5f8fa; font-size:9px; font-weight:900; cursor:pointer; }
.entry-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.entry-list article { display:grid; min-height:108px; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px 14px; padding:18px; }
.entry-icon { display:grid; width:38px; height:38px; place-items:center; border:1px solid #5b4144; border-radius:8px; background:#27171a; color:var(--red); }
.entry-icon.income { border-color:#315c4c; background:#10271f; color:var(--green); }
.entry-list h3 { margin:3px 0 0; font-family:var(--serif); font-size:18px; font-weight:400; }
.entry-list p { margin:4px 0 0; color:var(--muted); font-size:9px; }
.entry-list>article>strong { font-size:12px; }
.delete-entry { grid-column:2/-1; justify-self:end; padding:5px 0; border:0; background:transparent; color:#b37b80; font-size:8px; font-weight:800; cursor:pointer; }
.delete-entry:hover { color:#f1a7ad; }
.empty-state { grid-column:1/-1; padding:30px; border:1px dashed var(--border); border-radius:9px; color:var(--muted); text-align:center; }
.future-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(290px,.7fr); gap:18px; }
.panel { padding:23px; }
.milestones { display:grid; margin-top:22px; }
.milestones>div { display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--soft); color:var(--muted); }
.milestones strong { color:var(--text); font-family:var(--serif); font-size:20px; font-weight:400; }
.simulator { display:grid; gap:16px; }
.simulator label { display:grid; gap:7px; color:#91abb3; font-size:10px; font-weight:700; }
.simulator input,.simulator select { min-height:42px; padding:0 11px; border:1px solid #315562; border-radius:7px; background:#06141b; color:var(--text); }
.date-picker-label small { color:#6f8d96; font-size:8px; font-weight:500; line-height:1.5; }
.date-picker-label input { cursor:pointer; color-scheme:dark; }
.date-step-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.date-step-buttons button,.birthday-shortcut { min-height:39px; border:1px solid #3d6c79; border-radius:7px; background:#102e39; color:#bde6ef; font-size:9px; font-weight:850; cursor:pointer; }
.birthday-shortcut { width:100%; border-color:#6d6340; background:#282617; color:#e2d394; }
.loading,.error-panel { padding:30px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--muted); text-align:center; }
.error-panel { color:var(--red); }
.notice { position:fixed; right:22px; bottom:22px; z-index:100; max-width:min(360px,calc(100vw - 30px)); padding:13px 16px; border:1px solid #3f7962; border-radius:8px; background:#10291f; color:#b8f0d3; box-shadow:0 15px 45px rgb(0 0 0 / .45); font-size:10px; font-weight:750; }
.notice-error { border-color:#794a50; background:#2b171b; color:#f0a7ad; }
.scrim { display:none; }
@media (max-width:1100px) { .account-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .entry-editor { grid-template-columns:1fr; } }
@media (max-width:1050px) { .card-grid { grid-template-columns:1fr; } .info-card { min-height:180px; } }
@media (max-width:760px) {
  .sidebar { transform:translateX(-100%); transition:transform .2s ease; }
  .menu-open .sidebar { transform:translateX(0); }
  .menu-open .scrim { position:fixed; inset:0; z-index:20; display:block; border:0; background:rgb(0 0 0 / .55); }
  .main-content { margin-left:0; padding:0 14px 40px; }
  .topbar { min-height:88px; }
  .menu-button { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); }
  .topbar .kicker { display:none; }
  .topbar h1 { font-size:23px; }
  .balance-card,.what-if-card,.monthly-card { grid-template-columns:1fr; gap:20px; padding:24px 20px; }
  .what-if-calculation { justify-content:flex-start; flex-wrap:wrap; }
  .balance-card h2,.section-hero h2,.future-card h2 { font-size:42px; }
  .two-column,.account-grid,.entry-list,.future-layout { grid-template-columns:1fr; }
  .entry-editor form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .summary { grid-template-columns:1fr; }
  .summary>div { display:flex; justify-content:space-between; align-items:center; }
  .summary strong { margin-top:0; font-size:19px; }
}
@media (max-width:480px) { .login-card { padding:30px 22px; } .main-content { padding-inline:10px; } .entry-list article { grid-template-columns:38px 1fr; } .entry-list>article>strong { grid-column:2; } .entry-editor form,.account-adjust { grid-template-columns:1fr; } .account-adjust>button { grid-column:1; } .notice { right:15px; bottom:15px; } }