:root{--bg:#f7f8fb;--card:#ffffff;--accent:#0b5cff;--muted:#6b7280}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:#0f172a;margin:0;padding:24px}
.container{max-width:760px;margin:0 auto}
header h1{margin:0;font-size:1.5rem}
.lead{margin:8px 0 18px;color:var(--muted)}
.card{background:var(--card);border-radius:8px;padding:16px;box-shadow:0 1px 2px rgba(2,6,23,0.06);margin-top:12px}
.item{display:flex;align-items:flex-start;gap:12px;padding:10px;border-bottom:1px solid #eef2ff}
.item:last-child{border-bottom:none}
.item label{flex:1}
.item input[type=checkbox]{margin-top:6px;width:18px;height:18px}
#result-area .card{display:flex;flex-direction:column;gap:8px}
#score{font-weight:700;font-size:1.2rem}
#interpretation{color:var(--muted)}
.muted{color:var(--muted);font-size:0.9rem;margin-top:12px}
.breadcrumb{font-size:0.85rem;color:var(--muted);margin:0 0 8px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
@media (max-width:520px){body{padding:14px}.container{padding:0 6px}}