*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:radial-gradient(900px 500px at 82% -8%, var(--aqua-glow), transparent 60%),var(--bg);
  color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;}
.wrap{max-width:1180px; margin:0 auto; padding:26px 22px 60px}
.head{display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; margin-bottom:6px}
.brand{font-weight:680; font-size:21px; letter-spacing:-.02em}
.brand b{color:var(--aqua); font-weight:680}
.tag{color:var(--muted); font-size:12.5px}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:14px 0 18px}
.lede{color:var(--muted); font-size:13px; max-width:78ch; margin:-2px 0 0}
.lede b{color:var(--text); font-weight:600}
.status{font-family:var(--mono); font-size:10.5px; color:var(--faint)}
.themetoggle{background:var(--sunken); color:var(--muted); border:1px solid var(--line); border-radius:7px; padding:5px 10px; font-size:14px; line-height:1; cursor:pointer; margin-left:auto}
.themetoggle:hover{color:var(--text); border-color:var(--aqua-dim)}
.status.err{color:var(--over)}
.status.ok{color:var(--balanced)}
.cstrip{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin:18px 0 10px}
.cstrip .tabs{grid-column:2; margin-bottom:0}
.cstrip .guidebtn{grid-column:3; justify-self:start; height:100%; max-height:38px}
@media(max-width:640px){ .cstrip{display:flex; flex-direction:column} }
.guidebtn{background:var(--sunken); color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:7px 13px; font-size:12px; font-family:var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:6px; line-height:1}
.guidebtn:hover{color:var(--text); border-color:var(--aqua-dim)}
.guidebtn span{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--aqua-dim); color:var(--aqua); font-size:10px; font-weight:700}
.modal-overlay{position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:6vh 18px 24px; z-index:50; overflow-y:auto}
.modal-overlay[hidden]{display:none}
.modal{background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:14px; max-width:640px; width:100%; box-shadow:var(--shadow-lg); animation:modalin .18s ease}
@keyframes modalin{from{opacity:.3; transform:translateY(-8px)}to{opacity:1; transform:none}}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line)}
.modal-title{margin:0; font-size:15px; font-weight:640; letter-spacing:-.01em; color:var(--text)}
.modal-close{background:var(--sunken); color:var(--muted); border:1px solid var(--line); border-radius:7px; width:30px; height:30px; font-size:13px; cursor:pointer; flex:0 0 auto}
.modal-close:hover{color:var(--text); border-color:var(--aqua-dim)}
.modal-body{padding:16px 20px 20px; font-size:13px; color:var(--text); line-height:1.55}
.modal-body p{margin:0 0 11px; color:var(--muted)}
.modal-body p b{color:var(--text); font-weight:600}
.modal-body h4{margin:16px 0 7px; font-size:11px; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.modal-body ol{margin:0 0 11px; padding-left:20px; color:var(--muted)}
.modal-body ol li{margin:0 0 7px}
.modal-body ol li b{color:var(--text)}
.modal-body code{font-family:var(--mono); color:var(--aqua); font-size:12px}
.modal-body .modal-note{font-size:12px; color:var(--faint); background:var(--sunken); border:1px solid var(--line); border-left:2px solid var(--aqua-dim); border-radius:6px; padding:9px 11px; margin-top:14px}
body.modal-open{overflow:hidden}
.tabnote{color:var(--muted); font-size:13px; line-height:1.55; max-width:82ch; margin:0 auto 4px; text-align:center}
.tabnote b{color:var(--text); font-weight:600}
.tabnote-fixed{color:var(--faint); font-size:10.5px; font-family:var(--mono); text-align:center; margin:0 auto 18px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:12px; padding:16px}
.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:0 0 12px}
.controls{background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:12px; padding:16px 16px 14px; margin-bottom:18px}
.cgroup{display:none}
.cgroup.on{display:block}
.cgroup + .cgroup.on{margin-top:16px; border-top:1px solid var(--line); padding-top:14px}
.cgrid{display:flex; flex-direction:column}
.fieldblock{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 2px; border-bottom:1px dashed var(--line)}
.fieldblock:last-child{border-bottom:0}
.fieldblock .ftext{flex:1 1 auto; min-width:0}
label.ftext{cursor:pointer}
.fieldblock .fname{font-size:13px; color:var(--text); display:block}
.fieldblock .unit{color:var(--faint); font-size:10.5px; font-family:var(--mono); margin-left:5px}
.fieldblock .exp{font-size:11px; color:var(--muted); line-height:1.45; margin-top:3px}
.fieldblock input[type=number]{flex:0 0 auto; width:96px; background:var(--sunken); border:1px solid var(--line); color:var(--text); font-family:var(--mono); font-size:13px; text-align:right; padding:5px 8px; border-radius:6px}
.fieldblock .optcheck{flex:0 0 auto; width:15px; height:15px; margin:0; accent-color:var(--aqua); cursor:pointer}
.fieldblock.excluded{opacity:.5}
.fieldblock.excluded .exp{text-decoration:line-through}
.fieldblock input:disabled{color:var(--faint); background:var(--sunken); border-style:dashed}
.fieldblock input:focus{outline:none; border-color:var(--aqua-dim); box-shadow:0 0 0 2px var(--aqua-soft)}
.segblock .explabel{font-size:11px; color:var(--muted); line-height:1.45; margin-bottom:5px; max-width:52ch}
.rangeblock{padding:12px 2px 4px}
.rangeblock .rangehead{display:flex; justify-content:space-between; align-items:center}
.rangeblock label{font-size:13px; color:var(--text)}
.rangeblock .rangehead span{font-family:var(--mono); font-size:12px; color:var(--aqua)}
.rangeblock .exp{font-size:11px; color:var(--muted); line-height:1.45; margin-top:6px}
.rangeblock input[type=range]{width:100%;accent-color:var(--aqua);margin:8px 0 4px}
.reset{margin-top:14px; width:auto; background:var(--sunken); color:var(--muted); border:1px solid var(--line); border-radius:7px; padding:7px 16px; font-size:12px; cursor:pointer}
.reset:hover{color:var(--text); border-color:var(--aqua-dim)}
.tabs{display:inline-flex; gap:2px; background:var(--sunken); border:1px solid var(--line); border-radius:9px; padding:3px; margin-bottom:16px}
.tabs button{background:transparent; color:var(--muted); border:0; padding:7px 15px; font-size:12.5px; cursor:pointer; font-family:var(--sans); border-radius:7px}
.tabs button.on{background:var(--aqua-soft); color:var(--text)}
.panel{display:none}
.panel.on{display:block; animation:fade .2s ease}
@keyframes fade{from{opacity:.4}to{opacity:1}}
.readout{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media(max-width:560px){ .readout{grid-template-columns:repeat(2,1fr)} }
.met{background:var(--raised); border:1px solid var(--line); border-radius:10px; padding:11px 12px; position:relative; overflow:hidden}
.met .k{font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px}
.met.has-help{cursor:help}
.met .v{font-family:var(--mono); font-size:21px; font-weight:600; letter-spacing:-.01em; margin-top:5px}
.met .s{font-size:10.5px; font-family:var(--mono); letter-spacing:.04em; margin-top:2px; color:var(--faint)}
.met .bar{position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--line)}
.met.state-na .v,.met.state-need .v{font-size:15px; color:var(--faint); font-weight:500}
.met.state-need{border-color:var(--watch-line)} .met.state-need .s,.met.state-need .v{color:var(--watch)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.sub{color:var(--balanced)} .sub-bg{background:var(--balanced)}
.wat{color:var(--watch)} .wat-bg{background:var(--watch)}
.ovr{color:var(--over)} .ovr-bg{background:var(--over)}
.cor{color:var(--corr)} .cor-bg{background:var(--corr)}
.sectitle{display:flex; align-items:baseline; justify-content:space-between; margin:18px 2px 9px; gap:10px; flex-wrap:wrap}
.sectitle h3{margin:0; font-size:13px; font-weight:600; letter-spacing:-.01em}
.sectitle span{font-size:11px; color:var(--faint); font-family:var(--mono)}
.seg{display:inline-flex; background:var(--sunken); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.seg button{background:transparent; color:var(--muted); border:0; padding:5px 12px; font-size:11.5px; cursor:pointer; font-family:var(--sans)}
.seg button.on{background:var(--aqua-soft); color:var(--aqua)}
.segrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.chartbox{position:relative; height:300px}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:11.5px; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.foot{color:var(--faint); font-size:11px; margin-top:16px; line-height:1.5}
.foot code{font-family:var(--mono); color:var(--muted)}
.verdict{font-size:13px; color:var(--text); background:var(--raised); border:1px solid var(--line); border-left:3px solid var(--aqua-dim);
  border-radius:8px; padding:12px 14px; margin:2px 0 14px; line-height:1.5}
.verdict b{font-family:var(--mono)}
.verdict.warn{border-left-color:var(--over)} .verdict.ok{border-left-color:var(--balanced)}
.scen{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--violet);
  border:1px solid var(--violet-line); border-radius:4px; padding:2px 7px; margin-left:8px; vertical-align:middle}
.total{display:flex; align-items:baseline; gap:10px; margin:2px 2px 14px}
.total .big{font-family:var(--mono); font-size:28px; font-weight:680; color:var(--gold); letter-spacing:-.02em}
.total .cap{font-size:11px; color:var(--faint); font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em}
.opp{margin-bottom:10px}
.opp .top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:5px}
.opp .name{font-size:12.5px; color:var(--text)}
.opp .amt{font-family:var(--mono); font-size:13px; color:var(--gold)}
.opp .amt.pending{color:var(--watch)}
.opp .track{height:9px; background:var(--sunken); border:1px solid var(--line); border-radius:5px; overflow:hidden}
.opp .fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-2)); border-radius:4px 0 0 4px}
.opp .how{font-size:10.5px; color:var(--faint); margin-top:4px; font-family:var(--mono)}
.fnote{font-size:10.5px; color:var(--faint); font-family:var(--mono); margin-top:12px; padding:9px 11px; background:var(--sunken); border:1px solid var(--line); border-left:2px solid var(--violet); border-radius:6px; line-height:1.55}
.htable{margin:12px 0 2px; font-size:12px; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.hrow{display:grid; grid-template-columns:1.1fr 1.2fr 1fr 1.1fr 1.3fr; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:0}
.hrow>div{font-family:var(--mono); color:var(--text)}
.hrow.hhead>div{color:var(--faint); font-size:10px; letter-spacing:.08em; text-transform:uppercase}
.hrow .ok{color:var(--balanced)} .hrow .watch{color:var(--watch)} .hrow .bad{color:var(--over)}

/* Footer: the request status (cache hits, errors) — out of the way, never moving the layout. */
.foot{margin-top:28px; padding-top:12px; border-top:1px solid var(--line); text-align:center}
.foot .status.err{color:var(--over)}

/* Access gate (js/host.js checkAccess): the app stays hidden until access is confirmed. */
.gate{display:none}
html.gating .gate{display:flex; min-height:100vh; align-items:center; justify-content:center; padding:24px}
html.gating .wrap{display:none}
.gate-card{max-width:440px; width:100%; text-align:center}
.gate-wait{color:var(--faint); font-size:13px; font-family:var(--mono)}
.gate-card h1{font-size:20px; margin:0 0 10px; letter-spacing:-.01em}
.gate-card h1 b{color:var(--aqua)}
.gate-card p{color:var(--muted); font-size:14px; margin:0 0 18px; line-height:1.5}
.gate-card .gate-who{color:var(--text); font-weight:600}
.gate-acts{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.gate-acts button,.gate-acts a{background:var(--sunken); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:9px 16px; font:600 13px var(--sans); cursor:pointer; text-decoration:none}
.gate-acts .primary{background:var(--aqua); color:#fff; border-color:transparent}

/* Phones and touch screens: no visible scrollbars (Sentry convention); scrolling still works. */
@media (hover:none), (max-width:759px){
  html, body, .modal-overlay{scrollbar-width:none; -ms-overflow-style:none}
  html::-webkit-scrollbar, body::-webkit-scrollbar, .modal-overlay::-webkit-scrollbar{display:none; width:0; height:0}
}