:root{
  --navy:#233343; --navy2:#2f4459; --terra:#C74C33; --terra2:#e0654c;
  --cream:#FBF7F0; --cream2:#F2E9DC; --card:#ffffff; --ink:#1c2530; --muted:#6B6256;
  --line:#e7ddcd; --good:#2e7d52; --bad:#c0392b; --gold:#d8a23a;
  --shadow:0 1px 2px rgba(35,51,67,.06),0 8px 24px rgba(35,51,67,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,Arial,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}

/* ===== GATE ===== */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% -10%,#2f4459 0%,#233343 55%,#1a2733 100%);z-index:50}
.gate-card{background:var(--cream);width:min(92vw,400px);border-radius:24px;padding:42px 38px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.gate-logo img{height:52px;display:block;margin:0 auto 8px}
.gate-sub{margin:6px 0 26px;color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px}
#gateForm{display:flex;flex-direction:column;gap:12px}
#pw{padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;background:#fff;outline:none;text-align:center}
#pw:focus{border-color:var(--terra)}
#gateBtn{padding:14px;border:none;border-radius:12px;background:var(--navy);color:#fff;font-weight:700;font-size:15px;transition:.15s}
#gateBtn:hover{background:var(--terra)}
.gate-err{color:var(--bad);font-size:13px;min-height:16px;font-weight:600}
.gate-foot{margin-top:24px;color:var(--muted);font-size:11px}

/* ===== TOPBAR ===== */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 22px;background:var(--navy);color:#fff;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.brand{display:flex;align-items:center;gap:11px}
.logo-chip{background:#fff;border-radius:9px;padding:6px 11px;display:flex;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.logo-chip img{height:22px;display:block}
.brand .bs{font-size:11px;color:#b9c4cf;letter-spacing:.5px;border-left:1px solid rgba(255,255,255,.2);padding-left:11px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.tabs button{background:transparent;border:none;color:#c4ced8;padding:9px 14px;border-radius:9px;font-weight:600;font-size:13.5px;transition:.15s}
.tabs button:hover{background:rgba(255,255,255,.08);color:#fff}
.tabs button.active{background:var(--terra);color:#fff}
.actions{display:flex;align-items:center;gap:8px}
.savestate{font-size:12px;color:#b9c4cf;min-width:60px;text-align:right}
.btn{border:none;border-radius:10px;padding:9px 15px;font-weight:700;font-size:13px;transition:.15s}
.btn-primary{background:var(--terra);color:#fff}.btn-primary:hover{background:var(--terra2)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-link{background:transparent;color:#b9c4cf}.btn-link:hover{color:#fff}

/* ===== VIEW ===== */
.view{flex:1;padding:24px;max-width:1320px;margin:0 auto;width:100%}
.foot{display:flex;justify-content:space-between;padding:14px 24px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.page-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.page-head h2{margin:0;font-size:24px;color:var(--navy);letter-spacing:-.4px}
.page-head .sub{color:var(--muted);font-size:13.5px}
.yearpick{display:flex;gap:6px}
.yearpick button{border:1.5px solid var(--line);background:#fff;color:var(--navy);border-radius:10px;padding:7px 14px;font-weight:700;font-size:13px}
.yearpick button.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--terra)}
.kpi .k-label{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.kpi .k-val{font-size:26px;font-weight:800;color:var(--navy);margin-top:6px;letter-spacing:-.5px}
.kpi .k-sub{font-size:12px;margin-top:3px;font-weight:600}
.k-sub.up{color:var(--good)}.k-sub.down{color:var(--bad)}.k-sub.flat{color:var(--muted)}

/* grid of cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card h3{margin:0 0 4px;font-size:15px;color:var(--navy)}
.card .ch-sub{color:var(--muted);font-size:12px;margin-bottom:8px}
.chart{width:100%;height:300px}
.chart.tall{height:340px}
.chart.short{height:230px}

/* tables */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table.model{border-collapse:collapse;width:100%;font-size:12.5px;min-width:880px}
table.model th,table.model td{padding:7px 9px;border-bottom:1px solid #f0e9db;text-align:right;white-space:nowrap}
table.model th:first-child,table.model td:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:1;font-weight:600;min-width:210px}
table.model thead th{background:var(--navy);color:#fff;position:sticky;top:0;text-align:center;font-weight:700}
table.model thead th:first-child{z-index:2}
table.model tr.section td{background:var(--cream2);font-weight:800;color:var(--navy);text-transform:uppercase;font-size:11px;letter-spacing:.5px}
table.model tr.total td{background:#faf4ea;font-weight:800;color:var(--navy);border-top:2px solid var(--terra)}
table.model tr.calc td{color:#33414f}
table.model td.neg{color:var(--bad)}
table.model input{width:74px;border:1px solid transparent;border-radius:6px;padding:4px 5px;text-align:right;font-size:12.5px;background:#fffdf6;color:#0b3d91}
table.model input:hover{border-color:var(--line)}
table.model input:focus{outline:none;border-color:var(--terra);background:#fff}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:10px 2px}
.legend b{font-weight:700}
.assume-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.assume{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.assume h4{margin:0 0 6px;color:var(--navy);font-size:15px;display:flex;align-items:center;gap:8px}
.tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:2px 8px;border-radius:999px}
.tag-f{background:#e7f0e9;color:var(--good)}
.tag-r{background:#f0e9db;color:var(--muted)}
.assume-desc{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.4}
.assume .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed #eee3d2;font-size:13px}
.assume .row:last-of-type{border-bottom:none}
.assume .row span:first-child{display:flex;flex-direction:column}
.assume .row small{color:var(--muted);font-size:11px;font-weight:500;margin-top:1px}
.assume .inwrap{display:inline-flex;align-items:center;gap:3px}
.assume .inwrap i{color:var(--muted);font-style:normal;font-size:12px;font-weight:700}
.assume input{width:72px;border:1px solid var(--line);border-radius:7px;padding:5px 7px;text-align:right;color:#0b3d91;background:#fffdf6}
.note{background:#fff;border-left:4px solid var(--gold);border-radius:10px;padding:12px 16px;color:#5b5345;font-size:13px;margin-top:14px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 22px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.3);z-index:60;opacity:0;transition:.25s}
.toast.show{opacity:1}
.toast.err{background:var(--bad)}
.pillrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--navy)}
.pill b{color:var(--terra)}
@media(max-width:860px){.g2,.g3{grid-template-columns:1fr}.tabs{order:3;width:100%}.chart{height:260px}}
