:root{ --bg:#f7f8fa; --card:#fff; --text:#1f2937; --muted:#6b7280; --primary:#2563eb; --border:#e5e7eb; --focus:#9333ea; }
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",sans-serif; background:var(--bg); color:var(--text)}
.container{max-width:920px; margin:24px auto; padding:0 16px}
.site-header,.site-footer{text-align:center; padding:16px}
.progress{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px}
.progress-bar{height:10px; background:linear-gradient(90deg,var(--primary),#60a5fa); width:0%; border-radius:8px}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin:16px 0}
.card h3{margin-top:0}
.scale{display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap}
.options{display:flex; gap:8px; flex-wrap:wrap}
.option{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fafafa; cursor:pointer}
.option input{accent-color:var(--primary); transform:scale(1.25)}
.num-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:700}
.word-badge{ margin-left:6px; color:var(--muted); font-size:0.9rem }
.actions{display:flex; gap:8px; justify-content:flex-end; margin-top:16px}
.btn{padding:10px 14px; border-radius:10px; border:1px solid var(--border); cursor:pointer}
.btn.primary{background:var(--primary); color:#fff; border-color:var(--primary)}
.btn.secondary{background:#fff}
.results{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-top:16px}
.bar{height:10px; background:#e5e7eb; border-radius:6px; overflow:hidden}
.bar>div{height:100%; background:var(--primary)}
@media (max-width:640px){ .option{width:100%} .option input{transform:scale(1.35)} }
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}