:root { --ink:#15202b; --muted:#5d6873; --paper:#fff; --bg:#f1f4f7; --brand:#3158d4; --line:#d8dee6; --danger:#a52a2a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { width:min(850px,calc(100% - 32px)); margin:40px auto; background:var(--paper); border-radius:18px; box-shadow:0 12px 40px #22303c18; overflow:hidden; }
.survey-header { padding:30px 42px 24px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0; color:var(--brand); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:.2rem 0 .5rem; font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.15; }
h2 { margin-top:0; font-size:1.55rem; }
#progress-text,.optional { color:var(--muted); font-size:.9rem; }
.progress { height:7px; background:#e8ebf0; border-radius:99px; overflow:hidden; }
.progress span { display:block; width:12.5%; height:100%; background:var(--brand); transition:width .25s; }
form { padding:34px 42px; }
.step { display:none; }
.step.active { display:block; }
fieldset { margin:24px 0; padding:0; border:0; }
legend,.field { display:block; margin-bottom:10px; font-weight:700; }
fieldset label { display:block; margin:9px 0; padding:13px 15px; border:1px solid var(--line); border-radius:10px; font-weight:500; cursor:pointer; }
input[type=radio] { margin-right:9px; }
select,textarea { display:block; width:100%; margin-top:7px; padding:12px; border:1px solid #bac3ce; border-radius:9px; background:#fff; color:var(--ink); font:inherit; }
textarea { min-height:110px; resize:vertical; }
.video-wrap { margin:20px 0 28px; }
video { display:block; width:100%; max-height:520px; background:#111; border-radius:12px; }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.video-grid h3 { margin:.4rem 0; }
.rating { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:8px 0 24px; }
.rating label { text-align:center; padding:9px 3px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.actions { display:flex; justify-content:space-between; gap:12px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
button { border:0; border-radius:9px; padding:12px 22px; background:var(--brand); color:#fff; font:inherit; font-weight:750; cursor:pointer; }
button.secondary { background:#fff; color:var(--ink); border:1px solid var(--line); }
button:disabled { opacity:.55; cursor:wait; }
.error { min-height:1.5em; color:var(--danger); font-weight:700; }
.privacy-note { color:var(--muted); font-size:.92rem; }
.button-link { display:inline-block; border-radius:9px; padding:12px 22px; background:var(--brand); color:#fff; font-weight:750; text-decoration:none; }
@media (max-width:650px) { .shell{width:100%;margin:0;border-radius:0;min-height:100vh}.survey-header,form{padding:24px 20px}.video-grid{grid-template-columns:1fr}.rating{gap:4px} }