:root{
  --bg:#0b0d13; --panel:#12151f; --panel2:#171b28; --line:#232838;
  --ink:#e7e9ef; --dim:#95a0b8; --gold:#d4b25a; --gold2:#e9cf92;
  --cyan:#4fd8e8; --violet:#8b7cf6; --good:#5fd6a4; --warn:#f2c14e; --bad:#ff7676;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Manrope',-apple-system,system-ui,sans-serif;
  font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
a{color:var(--gold); text-decoration:none}
h1,h2,h3{font-weight:800; letter-spacing:-.02em; margin:0 0 10px}
h1{font-size:21px} h2{font-size:17px} h3{font-size:15px}
small{color:var(--dim)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* top bar */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px;
  background:rgba(11,13,19,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
}
.burger{background:none;border:0;color:var(--ink);font-size:22px;line-height:1;padding:4px 6px}
.brand{font-weight:800; letter-spacing:.14em; color:var(--gold); font-size:17px}
.topact{margin-left:auto; font-size:13px; font-weight:700; border:1px solid var(--gold);
  padding:7px 12px; border-radius:999px}

/* drawer */
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:270px; z-index:60;
  background:var(--panel); border-right:1px solid var(--line);
  transform:translateX(-102%); transition:transform .22s ease;
  overflow-y:auto; padding:calc(18px + env(safe-area-inset-top)) 0 30px;
}
.drawer.open{transform:none}
.dr-head{padding:0 18px 14px; font-weight:800; letter-spacing:.14em; color:var(--gold)}
.dr-head small{display:block; letter-spacing:0; font-weight:400; font-size:11px; margin-top:2px}
.dr-sec{padding:16px 18px 6px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--dim)}
.drawer a{display:block; padding:11px 18px; color:var(--ink); font-size:14px; border-left:3px solid transparent}
.drawer a.on{border-left-color:var(--gold); background:var(--panel2); color:var(--gold)}
.pill{background:var(--bad); color:#fff; border-radius:999px; padding:1px 7px; font-size:11px}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:50; display:none}
.scrim.on{display:block}

.wrap{padding:14px 14px 20px; max-width:900px; margin:0 auto}

/* bottom tabs */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex;
  background:rgba(11,13,19,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{flex:1; text-align:center; padding:9px 0 8px; font-size:10.5px; color:var(--dim); font-weight:600}
.tabbar a span{display:block; font-size:15px; line-height:1.2; margin-bottom:1px}
.tabbar a.on{color:var(--gold)}

/* cards */
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px}
.card.tight{padding:11px 13px}
.flash{background:#1b2a22; border:1px solid #2f5a45; color:var(--good);
  padding:11px 13px; border-radius:10px; margin-bottom:12px; font-size:14px}
.grid{display:grid; gap:10px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:520px){ .g3{grid-template-columns:repeat(2,1fr)} }

.kpi{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px}
.kpi b{display:block; font-size:20px; font-weight:800; letter-spacing:-.03em}
.kpi small{font-size:11px; text-transform:uppercase; letter-spacing:.08em}
.kpi.gold b{color:var(--gold)} .kpi.good b{color:var(--good)} .kpi.bad b{color:var(--bad)}

/* rows */
.row{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .grow{flex:1; min-width:0}
.row .name{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .sub{font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.avatar{width:36px; height:36px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--panel2); color:var(--gold); font-weight:800; font-size:13px; border:1px solid var(--line)}

/* tags and chips */
.tag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; border:1px solid var(--line); color:var(--dim); background:var(--panel2)}
.tag.gold{color:var(--gold); border-color:#4a3d1d}
.tag.good{color:var(--good); border-color:#2f5a45}
.tag.warn{color:var(--warn); border-color:#5a4a1d}
.tag.bad{color:var(--bad); border-color:#5a2f2f}
.tag.cyan{color:var(--cyan); border-color:#1d4a52}
.chips{display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch}
.chips a{flex:0 0 auto; padding:7px 13px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--dim); font-size:12.5px; font-weight:600; white-space:nowrap}
.chips a.on{background:var(--gold); border-color:var(--gold); color:#0b0d13}

/* forms */
label{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--dim); margin:12px 0 5px; font-weight:700}
input,select,textarea{
  width:100%; padding:11px 12px; font-size:16px; font-family:inherit;
  background:#0e111a; border:1px solid #2a3145; border-radius:9px; color:var(--ink);
}
input:focus,select,textarea:focus{outline:0; border-color:var(--gold)}
textarea{min-height:84px; resize:vertical}
.btn{display:inline-block; text-align:center; padding:12px 16px; border:0; border-radius:9px;
  background:var(--gold); color:#0b0d13; font-weight:800; font-size:15px; font-family:inherit}
.btn.full{display:block; width:100%}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
.btn.sm{padding:8px 12px; font-size:13px}
.btn.bad{background:#3a1f22; color:var(--bad); border:1px solid #5a2f2f}
.actions{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}
.searchbar{display:flex; gap:8px; margin-bottom:12px}
.searchbar input{flex:1}

/* score */
.score{flex:0 0 auto; width:46px; text-align:center; font-weight:800; font-size:17px;
  font-family:'JetBrains Mono',monospace}
.score small{display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase}
.score.hot{color:var(--good)} .score.warm{color:var(--gold)}
.score.cool{color:var(--cyan)} .score.cold{color:var(--dim)}

/* results panel for calculators */
.res{background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:12px; margin-top:12px}
.res .line{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #222839; font-size:14px}
.res .line:last-child{border-bottom:0}
.res .line b{font-family:'JetBrains Mono',monospace}
.res .line.hero{font-size:17px; padding-top:10px}
.res .line.hero b{color:var(--gold); font-size:19px}
.verdict{margin-top:10px; padding:10px 12px; border-radius:9px; font-weight:700; font-size:13.5px}
.verdict.go{background:#132a20; color:var(--good); border:1px solid #2f5a45}
.verdict.no{background:#2a1618; color:var(--bad); border:1px solid #5a2f2f}
.verdict.mid{background:#2a2413; color:var(--warn); border:1px solid #5a4a1d}

.stagebar{display:flex; gap:3px; margin:10px 0 4px}
.stagebar i{flex:1; height:5px; border-radius:3px; background:var(--line)}
.stagebar i.on{background:var(--gold)}
.hr{height:1px; background:var(--line); margin:14px 0}
.empty{text-align:center; color:var(--dim); padding:26px 10px; font-size:14px}
.reasons{font-size:12px; color:var(--dim); margin-top:3px}
.reasons b{color:var(--good); font-weight:600}
.reasons i{color:var(--bad); font-style:normal}
table.t{width:100%; border-collapse:collapse; font-size:13px}
table.t th{text-align:left; color:var(--dim); font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; padding:7px 6px; border-bottom:1px solid var(--line)}
table.t td{padding:9px 6px; border-bottom:1px solid var(--line)}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch}