:root{
  --ink:#0b0b0b; --muted:#6b6b6b; --hair:rgba(11,11,11,.14); --bg:#ffffff;
  --m:#47B861; --not:#E54F54; --shadow:0 14px 50px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:880px;margin:0 auto;padding:22px 18px 60px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;justify-content:center;font-weight:950;letter-spacing:.6px;color:#fff;border-radius:14px;padding:10px 14px;box-shadow:var(--shadow)}
.pill.m{background:var(--m)} .pill.not{background:var(--not)}
.icon{width:40px;height:40px;border-radius:999px;border:1px solid var(--hair);background:#fff;font-weight:900;cursor:pointer}
.screen{padding:20px 4px}
.center{text-align:center}
h1{margin:22px 0 10px;font-size:40px;line-height:1.12;letter-spacing:-.6px;font-weight:950}
.sub{margin:0 0 18px;color:var(--muted);font-size:18px}
.valueRow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px auto 18px}
.vcard{border:1px solid var(--hair);border-radius:14px;padding:12px 14px;background:#fff;min-width:180px;box-shadow:0 10px 28px rgba(0,0,0,.04);text-align:left}
.vcard b{font-weight:950;display:block}
.vcard span{color:rgba(11,11,11,.72);font-size:14px}
.primary,.secondary,.ans,.ghost{border:none;border-radius:999px;padding:16px 22px;font-weight:950;cursor:pointer;user-select:none}
.primary{background:var(--ink);color:#fff}
.secondary{background:#fff;color:var(--ink);border:2px solid rgba(11,11,11,.20)}
.ghost{background:transparent;color:rgba(11,11,11,.72);border:1px solid rgba(11,11,11,.16)}
.primary:active,.secondary:active,.ans:active,.ghost:active{transform:translateY(1px)}
.micro{margin:16px 0 0;color:rgba(11,11,11,.55);font-size:12px;line-height:1.4}

/* Dashboard */
.dash{margin:22px auto 0;max-width:820px;text-align:left}
.dashHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:10px 2px 10px}
.dashTitle{font-weight:950;letter-spacing:-.2px}
.dashHint{color:rgba(11,11,11,.55);font-size:12px}
.dashGrid{display:grid;grid-template-columns:1fr;gap:12px}
.panel{border:1px solid var(--hair);border-radius:18px;padding:14px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.04)}
.plabel{font-size:12px;color:rgba(11,11,11,.55);font-weight:900;letter-spacing:.7px;margin-bottom:8px}
.pmeta{color:rgba(11,11,11,.55);font-size:12px;margin-top:8px}
.big{font-size:44px;font-weight:950;letter-spacing:-.6px;margin-top:6px}
.alert{font-size:18px;font-weight:900;margin-top:8px}
canvas{width:100%;height:auto;border-radius:14px;background:#fff}
.portfolio{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(11,11,11,.10);border-radius:14px;padding:10px 12px}
.row b{font-weight:950}
.badge{font-size:12px;font-weight:950;border-radius:999px;padding:6px 10px;color:#fff}
.badge.m{background:var(--m)}
.badge.not{background:var(--not)}
.small{color:rgba(11,11,11,.55);font-size:12px}

/* Scan */
.scanKicker{color:rgba(11,11,11,.60);font-size:13px;margin-top:8px}
.qbox{margin:32px auto 18px;max-width:720px;border:1px solid var(--hair);border-radius:22px;padding:18px 16px 14px;box-shadow:var(--shadow);text-align:left}
.qnum{color:rgba(11,11,11,.55);font-size:12px;font-weight:850;margin-bottom:10px}
.q{font-size:24px;line-height:1.25;font-weight:900;letter-spacing:-.2px}
.answers{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.ans{min-width:160px;border:2px solid rgba(11,11,11,.20);background:#fff;color:var(--ink)}

/* Result */
.resultPills{display:flex;justify-content:center;gap:10px;margin-top:6px}
.resultGrid{margin:22px auto 10px;max-width:760px;display:grid;grid-template-columns:1fr;gap:12px;text-align:left}
.metric{border:1px solid var(--hair);border-radius:18px;padding:14px 14px 12px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.04)}
.label{font-size:12px;color:rgba(11,11,11,.55);font-weight:900;letter-spacing:.7px}
.readout{font-size:34px;font-weight:950;margin-top:6px}
.value{font-size:18px;font-weight:850;margin-top:8px}
.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.saveRow{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:14px}
.input{border:1px solid var(--hair);border-radius:999px;padding:14px 16px;min-width:240px;font-weight:850}

/* About sheet */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.28);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.sheetBody{width:min(900px,100%);background:#fff;border-radius:22px;box-shadow:0 18px 80px rgba(0,0,0,.18);overflow:auto;max-height:88vh;padding-bottom:14px}
.sheetTop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 8px}
.sheetTitle{font-weight:950;font-size:16px}
.sheetBody h2{margin:16px 16px 8px;font-size:15px;letter-spacing:-.2px;font-weight:950}
.bodyP{margin:0 16px 10px;color:rgba(11,11,11,.72);line-height:1.5;font-size:14px}
.bullets{margin:0 16px 12px 34px;color:rgba(11,11,11,.72);line-height:1.55;font-size:14px}
.fine{margin:10px 16px 16px;color:rgba(11,11,11,.45);font-size:12px}

@media (min-width:900px){
  .dashGrid{grid-template-columns:1fr 1fr}
  .panel:nth-child(1){grid-column:1 / span 2}
  .panel:nth-child(4){grid-column:1 / span 2}
}
@media (max-width:520px){
  h1{font-size:34px}
  .q{font-size:22px}
  .readout{font-size:30px}
}