:root { --ink:#18242f; --muted:#5b6b7a; --bg:#eef4f1; --card:#fff; --line:#d7e1dc; --green:#1f8a5b; --green-d:#166a46; --green-l:#e1f4ea;
  --amber:#c27a0a; --amber-l:#fff3dc; --red:#c8402f; --red-l:#fde9e6; --blue:#2c6fb0; --blue-l:#e5effa; --r:14px; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; }
.hidden { display:none !important; }
main { max-width:980px; margin:0 auto; padding:18px 14px 70px; }
.loading { text-align:center; color:var(--muted); margin-top:20vh; }
h1 { font-size:2rem; margin:0 0 6px; letter-spacing:-.02em; } h2 { font-size:1.35rem; margin:0 0 8px; } h3 { font-size:1.05rem; margin:0 0 6px; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .center { text-align:center; }
.card { background:var(--card); border-radius:var(--r); padding:22px; box-shadow:0 2px 10px rgba(20,50,40,.08); border:1px solid var(--line); margin-bottom:16px; }
.eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; color:var(--green); }

/* top bar */
#top { position:sticky; top:0; z-index:20; background:#12352a; color:#fff; padding:8px 16px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:.9rem; }
#top b { color:#9be6c0; } #top .sw { color:#b9d3c7; cursor:pointer; text-decoration:underline; background:none; border:0; font:inherit; }
.track { flex:1; min-width:160px; max-width:360px; height:8px; background:#2c5546; border-radius:5px; overflow:hidden; } .track i { display:block; height:100%; background:#5fd49b; transition:width .4s; }
.flash { max-width:960px; margin:12px auto 0; padding:10px 16px; border-radius:10px; background:var(--blue-l); border:1px solid #b9d3ee; color:#1c4a7a; font-weight:600; }
.flash.err { background:var(--red-l); border-color:#f0b8b0; color:#8a2417; } .flash.good { background:var(--green-l); border-color:#a8dcc0; color:#14583a; }

/* buttons & inputs */
.btn { font:inherit; font-weight:700; padding:11px 22px; border-radius:10px; border:2px solid var(--green); background:var(--green); color:#fff; cursor:pointer; }
.btn:hover { background:var(--green-d); border-color:var(--green-d); } .btn:disabled { background:#b9c7c0; border-color:#b9c7c0; cursor:not-allowed; }
.btn.ghost { background:#fff; color:var(--green-d); } .btn.ghost:hover { background:var(--green-l); } .btn.big { padding:14px 30px; font-size:1.1rem; }
input, select, textarea { font:inherit; padding:10px 12px; border:2px solid #c5d3cc; border-radius:10px; background:#fff; color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--green); }
textarea { width:100%; min-height:110px; resize:vertical; }
label.f { display:block; font-weight:600; margin:10px 0 4px; }

/* login */
.login { max-width:440px; margin:6vh auto; } .login .row { display:flex; gap:12px; } .login .row > div { flex:1; } .login input, .login select { width:100%; font-size:1.2rem; }

/* scenarios */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.sc { background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:16px; cursor:pointer; text-align:left; font:inherit; color:inherit; transition:.15s; }
.sc:hover { border-color:var(--green); transform:translateY(-2px); box-shadow:0 6px 16px rgba(20,60,40,.12); }
.sc .em { font-size:2rem; } .sc .t { font-weight:800; font-size:1.05rem; } .sc .pay { font-size:1.4rem; font-weight:800; color:var(--green-d); }
.pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .pill { font-size:.75rem; background:var(--green-l); color:var(--green-d); padding:2px 9px; border-radius:99px; font-weight:600; }

/* tables */
table { border-collapse:collapse; width:100%; } th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); } th { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; } tr.total td { font-weight:800; border-top:2px solid var(--ink); } .neg { color:var(--red); } .pos { color:var(--green-d); }

/* budget builder */
.opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin-top:8px; }
.opt { background:#fff; border:2px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.opt:hover:not(:disabled) { border-color:var(--green); } .opt.sel { border-color:var(--green); background:var(--green-l); } .opt:disabled { opacity:.5; cursor:not-allowed; }
.opt .c { font-weight:800; font-size:1.1rem; } .opt .d { font-size:.85rem; color:var(--muted); }
.wrow { display:grid; grid-template-columns:1fr 150px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); } .wrow input { width:100%; text-align:right; }
.bar-rem { position:sticky; bottom:0; margin:16px -22px -22px; padding:14px 22px; background:#fff; border-top:3px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-radius:0 0 var(--r) var(--r); }
.bar-rem .rem { font-size:1.4rem; font-weight:800; } .bar-rem.ok { border-top-color:var(--green); } .bar-rem.ok .rem { color:var(--green-d); } .bar-rem.bad .rem { color:var(--red); }

/* simulation */
.bal { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; } .bal > div { background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.bal .l { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } .bal .v { font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; } .bal .debt .v { color:var(--red); }
.meters { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:14px; } .meter { background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px; font-size:.85rem; }
.meter .m { height:10px; border-radius:6px; background:#e3ebe7; overflow:hidden; margin-top:4px; } .meter .m i { display:block; height:100%; background:var(--green); } .meter.warn .m i { background:var(--amber); } .meter.over .m i { background:var(--red); } .meter.over b { color:var(--red); }
.event { border-left:8px solid var(--green); } .event.curve { border-left-color:var(--red); background:#fffaf9; } .event.windfall { border-left-color:#d9a400; background:#fffdf3; }
.tag { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 10px; border-radius:99px; background:var(--green-l); color:var(--green-d); } .event.curve .tag { background:var(--red-l); color:var(--red); } .event.windfall .tag { background:#fff0b8; color:#7a5a00; }
.choice { display:flex; justify-content:space-between; gap:12px; width:100%; text-align:left; background:#fff; border:2px solid var(--line); border-radius:12px; padding:12px 16px; margin-top:8px; cursor:pointer; font:inherit; color:inherit; }
.choice:hover { border-color:var(--green); } .choice.sel { border-color:var(--green); background:var(--green-l); } .choice .cost { font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pay { margin-top:14px; padding:14px; background:#f6faf8; border-radius:12px; border:1px solid var(--line); } .payopt { display:flex; align-items:center; gap:10px; padding:8px 4px; cursor:pointer; } .payopt.dis { opacity:.45; cursor:not-allowed; } .payopt input { width:auto; }
.warn-box { margin-top:10px; padding:9px 12px; border-radius:10px; background:var(--amber-l); border:1px solid #f0d49a; color:#6f4a00; font-size:.9rem; } .warn-box.red { background:var(--red-l); border-color:#f0b8b0; color:#8a2417; }
.wc { font-size:.8rem; color:var(--muted); text-align:right; } .wc.ok { color:var(--green-d); }
@media (max-width:600px) { .bal { grid-template-columns:1fr; } .wrow { grid-template-columns:1fr 110px; } h1 { font-size:1.6rem; } }

.modal { position:fixed; inset:0; background:rgba(10,30,22,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px; }
.modal .box { background:#fff; border-radius:var(--r); padding:22px; max-width:420px; width:100%; box-shadow:0 10px 40px rgba(0,0,0,.35); } .modal p { margin:0 0 16px; font-size:1.05rem; } .modal .acts { display:flex; gap:10px; justify-content:flex-end; }

/* phones: save vertical space */
@media (max-width:600px) {
  #top { position:static; padding:8px 12px; font-size:.82rem; gap:6px; } .track { order:3; flex-basis:100%; max-width:none; }
  main { padding:12px 10px 60px; } .card { padding:16px; }
  .bar-rem { margin:14px -16px -16px; padding:10px 16px; } .bar-rem .rem { font-size:1.15rem; } .bar-rem .btn { padding:10px 18px; font-size:1rem; flex:1; } .bar-rem .small { font-size:.75rem; }
  .btn.big { padding:12px 20px; font-size:1rem; } .login { margin:3vh auto; }
}
@media (max-width:600px) {
  .bal { grid-template-columns:repeat(3,1fr); gap:6px; } .bal > div { padding:6px 8px; } .bal .l { font-size:.6rem; line-height:1.2; } .bal .v { font-size:1.05rem; }
  .meters { grid-template-columns:1fr 1fr; gap:6px; } .meter { padding:6px 8px; font-size:.75rem; }
}