:root{--navy:#123C8C;--pink:#E8457C;--bg:#f5f7fc;--card:#fff;--ink:#1b1f2a;--mut:#5b6478;--line:#d5dcec;--ok:#17804f}
@media (prefers-color-scheme:dark){:root{--bg:#0e1424;--card:#172038;--ink:#eef1fa;--mut:#aab3cc;--line:#2c3860;--navy:#8fb0ff;--ok:#4cc38a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
main{max-width:620px;margin:0 auto;padding:16px}
.brand{font-weight:800;color:var(--navy);letter-spacing:.3px}.brand span{color:var(--pink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-top:14px}
h1{font-size:1.45rem;line-height:1.2;margin:6px 0 8px;color:var(--navy)}
h2{font-size:1.1rem;margin:0 0 12px}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:var(--pink);width:0;transition:width .25s}
button{font:inherit;cursor:pointer}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:transparent;color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:13px;margin-top:10px;min-height:52px}
.opt:active,.opt:focus-visible{border-color:var(--pink);outline:none}
.opt.sel{border-color:var(--pink);background:color-mix(in srgb,var(--pink) 12%,transparent)}
.opt b{flex:0 0 28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.9rem}
@media (prefers-color-scheme:dark){.opt b,.primary{color:#0e1424}}
.primary{background:var(--navy);color:#fff;border:0;border-radius:12px;padding:14px 20px;width:100%;font-weight:700;margin-top:14px}
.primary:disabled{opacity:.4;cursor:not-allowed}
.ghost{background:transparent;color:var(--navy);border:2px solid var(--navy);border-radius:12px;padding:12px;width:100%;margin-top:10px;font-weight:600}
.row{display:grid;grid-template-columns:1fr 64px;gap:8px;align-items:center;margin:9px 0}
.row .n{font-weight:600}.track{grid-column:1/2;height:12px;background:var(--line);border-radius:99px;overflow:hidden}
.track i{display:block;height:100%;background:var(--navy)}.top .track i{background:var(--pink)}
.pct{text-align:right;font-weight:700}.mut{color:var(--mut);font-size:.9rem}
.badge{display:inline-block;background:var(--pink);color:#fff;border-radius:99px;padding:2px 10px;font-size:.8rem;font-weight:700}
.res{border-left:5px solid var(--pink);padding-left:12px;margin:12px 0}.hide{display:none!important}
.status{font-size:.9rem;margin-top:10px;color:var(--mut)}.status.ok{color:var(--ok)}.status.warn{color:#b26a00}
@media (prefers-color-scheme:dark){.status.warn{color:#f2b01e}}
.grp{margin-top:6px}.grp h2{margin-top:18px}