*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#071522;--panel:#0c2030;--panel2:#102a3d;--line:#1d3d52;--text:#edf5f9;--muted:#91a9b9;--cyan:#36b8d0;--green:#24b978}
html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 50% -10%,#123b51 0%,#071522 48%);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.app-shell{width:min(100%,560px);margin:0 auto;min-height:100dvh;padding:0 17px 26px}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;background:#07111d;padding:7px 10px;border-radius:7px}
.radar{width:32px;height:32px;fill:none;stroke:#36b8d0;stroke-width:1.8}
.radar path{fill:#36b8d0;stroke:none;opacity:.45}.radar .dot{fill:#7be2ed;stroke:none}
.wordmark{font-size:19px;font-weight:800;letter-spacing:-.7px;color:#e9f2f8;white-space:nowrap}
.wordmark b{color:#36b8d0}.wordmark small{font-size:15px;color:#9ab0bf;font-weight:600}
.icon-btn{width:42px;height:42px;border:1px solid #2c7187;border-radius:12px;background:#12374b;color:#eaf7fb;font-size:22px}
main{padding:25px 0 12px}
.intro .eyebrow,.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:850;color:#50c6d8}
h1{font-size:29px;letter-spacing:-1px;margin:7px 0 5px}
.intro p{color:var(--muted);font-size:13px;margin:0 0 22px;line-height:1.5}
.scan-form{background:#0c2030;border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:15px;box-shadow:0 12px 30px #0002}
.scan-form label{display:block;color:#b5c8d3;font-size:12px;font-weight:700;margin-bottom:8px}
.input-row{display:flex;gap:8px}
input[type=text]{min-width:0;flex:1;background:#071522;border:1px solid #315368;border-radius:9px;padding:13px 12px;color:#f2f8fb;font-size:16px;outline:none}
input[type=text]:focus{border-color:#36b8d0;box-shadow:0 0 0 3px #36b8d01c}
button{cursor:pointer;font:inherit}
#scanBtn{border:0;border-radius:9px;background:linear-gradient(180deg,#1094a8,#08788d);color:white;font-weight:800;padding:0 17px;min-width:83px}
#scanBtn:disabled{opacity:.55}
.form-note{font-size:10px;color:#7895a7;margin-top:8px}
.result-card{background:linear-gradient(160deg,#0d2537,#091a28);border:1px solid #20465d;border-radius:17px;padding:16px;box-shadow:0 18px 45px #0003}
.result-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.result-domain{font-size:15px;font-weight:750;overflow-wrap:anywhere;margin-top:5px}
.grade-badge{display:grid;place-items:center;min-width:55px;height:55px;border-radius:14px;font-size:23px;font-weight:950;border:1px solid #ffffff30;box-shadow:0 5px 18px #0003}
.grade-badge.neutral{background:#304454;color:#d7e2e8}
.grade-badge.Aplus,.grade-badge.A{background:#19a86d;color:#fff}
.grade-badge.B{background:#83b83b;color:#132333}
.grade-badge.C{background:#e2b52d;color:#182535}
.grade-badge.D{background:#e77b32;color:#fff}
.grade-badge.F{background:#d64545;color:#fff}
.score-wrap{display:flex;align-items:baseline;gap:7px;margin-top:14px}
.score{font-size:52px;line-height:1;font-weight:900;letter-spacing:-2px}
.score-denom{color:#8ca6b6;font-size:13px}
.status-text{font-size:12px;font-weight:700;color:#f1c56a;margin:8px 0 11px}
.status-text.good{color:#48d49a}.status-text.bad{color:#ff8585}
.progress-track{height:7px;border-radius:20px;background:#1b3547;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#119d72,#42d69b);border-radius:20px;transition:width .25s}
.grade-scale{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:12px;padding:9px;background:#0d2b40;border:1px solid #1c4b62;border-radius:10px}
.grade-scale span{height:26px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:900}
.g-ap{background:#16a36a}.g-a{background:#27b36a}.g-b{background:#83b83b;color:#142333}.g-c{background:#e2b52d;color:#142333}.g-d{background:#e77b32}.g-f{background:#d64545}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.metrics div{background:#10283a;border:1px solid #24475c;border-radius:11px;padding:11px 5px;text-align:center}
.metrics strong,.metrics small{display:block}.metrics strong{font-size:22px;font-weight:850}.metrics small{font-size:10px;color:#91a9b9;margin-top:2px}
.report-link{display:flex;justify-content:space-between;align-items:center;text-decoration:none;margin-top:13px;background:#10384b;border:1px solid #24647a;color:#8de4ee;padding:12px;border-radius:10px;font-size:12px;font-weight:800}
.report-link[hidden]{display:none}
.progress-text{font-size:11px;color:#9eb7c6;margin-top:11px}
.settings-card{margin-top:14px;background:#0c2030;border:1px solid var(--line);border-radius:14px;padding:14px}
.settings-title{font-size:12px;font-weight:850;color:#b9ccd6;margin-bottom:11px}
.toggle-row{display:flex;align-items:center;gap:12px;position:relative;cursor:pointer}
.toggle-row span{flex:1}.toggle-row strong,.toggle-row small{display:block}.toggle-row strong{font-size:13px}.toggle-row small{font-size:10px;color:var(--muted);margin-top:3px}
.toggle-row input{position:absolute;opacity:0;width:1px;height:1px}
.switch{width:44px;height:25px;border-radius:30px;background:#334c5d;border:1px solid #4a6678;position:relative;transition:.2s;flex:0 0 auto}
.switch:after{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;border-radius:50%;background:#e7f1f5;transition:.2s}
.toggle-row input:checked+.switch{background:#078ba0;border-color:#36b8d0}
.toggle-row input:checked+.switch:after{transform:translateX(19px);background:white}
.settings-note{font-size:10px;line-height:1.5;color:#7895a7;margin:10px 0 0}
.storage-note{display:flex;gap:11px;align-items:center;padding:13px 3px;margin-top:8px;color:#9bb5c4}
.cloud-icon{font-size:23px;color:#46c1d4}
.storage-note strong,.storage-note small{display:block}.storage-note strong{font-size:11px;color:#c7d8e1}.storage-note small{font-size:10px;line-height:1.4;margin-top:2px}
footer{text-align:center;color:#637f91;font-size:10px;padding:14px 0 4px}
@media(min-width:520px){.app-shell{padding-left:24px;padding-right:24px}.result-card{padding:20px}.score{font-size:58px}}