:root { color-scheme: light; --bg:#f8fafc; --card:#fff; --border:#e5e7eb; --text:#0f172a; --muted:#64748b; --ok:#16a34a; --err:#dc2626; --warn:#b45309; --warnbg:#fef3c7; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background: linear-gradient(180deg, #fff, var(--bg)); }
.container { max-width: 980px; margin: 0 auto; padding: 16px; }
.topbar { position: sticky; top:0; background: rgba(255,255,255,.8); backdrop-filter: blur(6px); border-bottom:1px solid var(--border); }
.row { display:flex; align-items:center; }
.col { display:flex; flex-direction: column; }
.space { justify-content: space-between; }
.gap { gap: 8px; }
.logo { font-weight: 700; padding: 10px 0; }
.card { background:var(--card); border:1px solid var(--border); border-radius: 14px; padding: 16px; margin: 16px 0; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.card.inner { margin: 10px 0; }
.input { width: 100%; padding: 10px; border:1px solid var(--border); border-radius: 10px; }
.input-line { min-width: 220px; }
.btn { padding: 8px 12px; border:1px solid var(--border); background:#fff; border-radius:10px; cursor:pointer; }
.btn.primary { background:#111827; color:#fff; border-color:#111827; }
.muted { color: var(--muted); font-size: 12px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.badge { display:inline-block; padding:2px 6px; border:1px solid #c7d2fe; background:#eef2ff; border-radius:999px; font-size:12px; }
.qtext { font-weight:600; margin-bottom:6px; }
.scale .chip { border:1px solid var(--border); padding:6px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; user-select: none; }
.scale input { display:none; }
.scale .chip input:checked + span, .chip:has(input:checked) { background:#111827; color:#fff; border-color:#111827; }
.qblock { margin-bottom: 16px; }
.input.comment { margin-top: 6px; }
.ok { color: var(--ok); font-weight: 600; }
.warn { color: var(--warn); background: var(--warnbg); padding: 8px 10px; border-radius: 8px; }
.footer { text-align:center; padding: 24px 0; }
.answer-item { border-top:1px solid var(--border); padding-top:6px; margin-top:6px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px); bottom: 20px; background: #111827; color: white; padding: 8px 12px; border-radius: 10px; opacity: 0; transition: opacity .15s ease, transform .15s ease; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }