:root{
  --bg:#0f1115; --panel:#16191f; --panel2:#1d212a; --line:#2a2f3a;
  --ink:#ece9e3; --muted:#9aa1ad; --gold:#c9a86a; --gold-d:#a8894f;
  --good:#6fae7d; --build:#c9a86a; --check:#cf6b5e; --radius:16px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);
  line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line)}
.brand{font-weight:600;letter-spacing:.12em;font-size:15px}
.brand span{color:var(--gold);margin-left:6px;font-weight:400;letter-spacing:.18em}
#nav{display:flex;gap:14px;font-size:13px}
#nav button{background:none;border:none;color:var(--muted);cursor:pointer;font:inherit}
#nav button:hover{color:var(--ink)}
main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:26px 18px 60px}
footer.disclaimer{font-size:11px;color:var(--muted);text-align:center;padding:14px 18px;border-top:1px solid var(--line)}

h1{font-size:28px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
h2{font-size:20px;font-weight:600;margin-bottom:6px}
.lede{color:var(--muted);margin-bottom:22px;font-size:15px}
.section-title{color:var(--gold);font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:30px 0 12px}
.progress{height:4px;background:var(--panel2);border-radius:4px;overflow:hidden;margin-bottom:8px}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-d),var(--gold));transition:width .25s}
.stepcount{font-size:12px;color:var(--muted);margin-bottom:18px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.q{font-size:17px;margin-bottom:14px;line-height:1.4}
.q .ex{font-size:13px;color:var(--muted);margin-top:6px;font-style:italic}
.note{font-size:12.5px;color:var(--muted);margin-top:10px}
label.opt{display:flex;align-items:center;gap:12px;padding:13px 15px;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;margin-bottom:9px;cursor:pointer;font-size:15px;transition:border-color .15s,background .15s}
label.opt:hover{border-color:var(--gold-d)}
label.opt.sel{border-color:var(--gold);background:#20242e}
label.opt input{accent-color:var(--gold);width:18px;height:18px}
textarea,input[type=number],input[type=text],input[type=date]{width:100%;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit;font-size:15px;padding:12px 13px;margin-top:6px}
textarea{min-height:84px;resize:vertical}
.scale{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.scale button{flex:1;min-width:38px;padding:11px 0;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;color:var(--ink);cursor:pointer;font:inherit}
.scale button.sel{background:var(--gold);color:#1a1206;border-color:var(--gold);font-weight:600}

.btn{display:block;width:100%;padding:15px;border:none;border-radius:12px;font:inherit;font-size:16px;
  font-weight:600;cursor:pointer;background:var(--gold);color:#1a1206;margin-top:14px}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row2{display:flex;gap:10px}
.row2 .btn{margin-top:14px}

.test-hero{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.test-hero h3{font-size:18px;margin-bottom:4px}
.test-meta{font-size:13px;color:var(--muted);margin:10px 0}
.test-meta b{color:var(--ink);font-weight:600}
.safety{border-left:3px solid var(--check);padding:8px 12px;background:#241a18;border-radius:0 8px 8px 0;font-size:13px;color:#e8c4bf;margin:10px 0}

/* results: responsive grid (PENDING + UNKNOWN added in Phase A) */
.pbc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
@media(max-width:560px){.pbc{grid-template-columns:1fr 1fr}}
.pbc .col{border-radius:var(--radius);padding:18px;border:1px solid var(--line)}
.pbc .protect{background:#13211a;border-color:#274d39}
.pbc .build{background:#211d14;border-color:#4d4327}
.pbc .check{background:#241a18;border-color:#4d2c27}
.pbc .pending{background:#1a2030;border-color:#2c3a5a}
.pbc .unknown{background:#1f1a2a;border-color:#3a2c4d}
.pbc h3{font-size:13px;letter-spacing:.06em;margin-bottom:10px}
.pbc .protect h3{color:var(--good)} .pbc .build h3{color:var(--build)} .pbc .check h3{color:var(--check)}
.pbc .pending h3{color:#8fa8e0} .pbc .unknown h3{color:#b593e0}
.pbc ul{list-style:none;font-size:14px}
.pbc li{margin-bottom:9px;padding-left:16px;position:relative}
.pbc li:before{content:"·";position:absolute;left:2px;color:var(--gold)}

/* unit abstraction (Phase A) */
.numwrap{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.numwrap input{flex:1;min-width:140px}
.unit-toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.unit-toggle button{background:var(--panel2);border:none;color:var(--muted);font:inherit;font-size:13px;padding:10px 14px;cursor:pointer}
.unit-toggle button.sel{background:var(--gold);color:#1a1206;font-weight:600}
.priorities{background:var(--panel);border:1px solid var(--gold-d);border-radius:var(--radius);padding:18px;margin:8px 0 18px}
.priorities h3{color:var(--gold);font-size:14px;letter-spacing:.08em;margin-bottom:10px}
.priorities ol{margin-left:18px;font-size:15px}
.priorities li{margin-bottom:9px}
.hidden{display:none}
.kpi{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.kpi .chip{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px}
.kpi .chip b{color:var(--gold)}
.banner{background:#13211a;border:1px solid #274d39;color:#bfe3c9;padding:12px 14px;border-radius:12px;font-size:14px;margin-bottom:14px}
.err{color:var(--check);font-size:13px;margin-top:8px}