/* ================================================================
   Экспертное согласование — сдержанный научный инструмент.
   Прохладный фарфор, графитовые чернила, тонкая сетка. Цвет несёт
   только смысл: шкала согласия 1→5 одним градиентом.
   ================================================================ */
:root{
  --bg:#F2F3F5; --bg-2:#E9EBEF; --surface:#FFFFFF;
  --ink:#161B22; --ink-2:#4B5563; --ink-3:#8B93A1;
  --line:#DDE1E7; --line-2:#E8EBEF;
  --err:#B42318;
  --brand:#2F6B3F; --brand-2:#26583A;   /* глубокий зелёный — основное действие */
  --scale-gradient: linear-gradient(90deg, #CF4436 0%, #D9603A 18%, #E28A40 36%, #E2AE48 50%, #A9B64C 64%, #6FA54F 82%, #3E9550 100%);
  --s1:#D4533A; --s2:#DE7A3E; --s3:#E2AE48; --s4:#8DAE4E; --s5:#4F9C51;
  --gap:12px;
  --display:'Commissioner','Golos Text',system-ui,sans-serif;
  --text:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --card-shadow:0 0 0 1px var(--line-2), 0 1px 2px rgba(22,27,34,.04), 0 24px 60px -28px rgba(22,27,34,.22);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0; font-family:var(--text); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; -webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}

.backdrop{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 560px at -8% -12%, rgba(212,83,58,.10), transparent 62%),
    radial-gradient(820px 640px at 108% 112%, rgba(79,156,81,.13), transparent 62%),
    radial-gradient(1200px 520px at 50% -140px, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(var(--bg), var(--bg))}
.backdrop::before{content:''; position:absolute; inset:0;
  background-image:linear-gradient(to right, rgba(22,27,34,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(22,27,34,.045) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 38%, #000 10%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 38%, #000 10%, transparent 75%)}

.screen{position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:none}
.screen.on{display:flex}
.screen.center{align-items:center; justify-content:center; padding:32px 24px}

.mark{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.bars{display:inline-flex; align-items:flex-end; gap:2px}
.bars i{width:4px; height:14px; border-radius:1px}
.bars i:nth-child(1){height:8px; background:var(--s1)} .bars i:nth-child(2){height:11px; background:var(--s3)} .bars i:nth-child(3){height:14px; background:var(--s5)}

/* Квадратик входа для организаторов (правый верхний угол главной) */
.adm-link{position:fixed; top:max(16px, env(safe-area-inset-top)); right:16px; z-index:5; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--surface); box-shadow:0 0 0 1px var(--line-2), 0 6px 18px -10px rgba(22,27,34,.35); transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.adm-link:hover{transform:translateY(-1px); box-shadow:0 0 0 1px var(--line), 0 10px 22px -10px rgba(22,27,34,.4)}

.btn{appearance:none; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:.98rem; position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px; border-radius:12px;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background-color .2s, opacity .2s}
.btn:active{transform:scale(.985)}
.btn-ink{background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(22,27,34,.18), 0 8px 24px -8px rgba(47,107,63,.45)}
.btn-ink:hover{background:var(--brand-2)}
.btn-line{background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn:disabled:not(.loading){opacity:.35; cursor:not-allowed; box-shadow:none}
.btn:disabled:hover .arr{transform:none}
.btn.loading{color:transparent; pointer-events:none}
.btn.loading::after{content:''; position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; animation:spin .7s linear infinite}
.btn-line.loading::after{border-color:var(--line); border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px}

.link-back{appearance:none; border:0; background:none; cursor:pointer; font:inherit; font-size:.92rem; font-weight:500; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; padding:10px 4px; border-radius:8px; white-space:nowrap}
.link-back:hover{color:var(--ink)}

kbd{font-family:var(--display); font-weight:600; font-size:.78rem; min-width:24px; height:24px; padding:0 7px; display:inline-grid; place-items:center; vertical-align:1px;
  border-radius:6px; background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line), inset 0 -2px 0 var(--line)}

/* ---------- Карточки ---------- */
.card{position:relative; overflow:hidden; width:min(600px,100%); padding:44px 44px 38px; border-radius:20px; background:var(--surface); box-shadow:var(--card-shadow); animation:rise .6s var(--ease) both}
/* тонкая полоса шкалы согласия по верхнему краю карточки */
.card::before{content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--scale-gradient); opacity:.85}
@keyframes rise{from{opacity:0; transform:translateY(10px)}}
.card h1{font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,4vw,2.1rem); line-height:1.16; letter-spacing:-.025em; margin:22px 0 12px; text-wrap:balance}
.lead{margin:0 0 28px; color:var(--ink-2); font-size:1rem; line-height:1.65}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ---------- Вход по коду ---------- */
.code-card{width:min(520px,100%)}
.code-card .lead{margin-bottom:30px}
.code-label{display:block; font-size:.82rem; font-weight:500; color:var(--ink-2); margin-bottom:10px}
.cells{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.cell{width:50px; height:62px; border-radius:10px; border:0; padding:0; text-align:center; font-family:var(--display); font-weight:600; font-size:1.55rem; color:var(--ink);
  background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); caret-color:var(--ink); font-variant-numeric:tabular-nums; text-transform:uppercase;
  transition:box-shadow .18s var(--ease), background .18s}
.cell:focus{outline:none; background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--brand), 0 0 0 4px rgba(47,107,63,.14)}
.cell.filled{background:var(--surface)}
.cell.letter{background:var(--surface); box-shadow:inset 0 0 0 1px var(--ink-3)}
.cell.letter:focus{box-shadow:inset 0 0 0 1.5px var(--brand), 0 0 0 4px rgba(47,107,63,.14)}
.cells .dash{width:10px; height:2px; border-radius:2px; background:var(--line)}
.code-hint{font-size:.84rem; color:var(--ink-3); margin-bottom:10px}
.code-err{min-height:1.45em; font-size:.88rem; line-height:1.45; color:var(--err); margin-bottom:14px}
.has-err .cell{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--err) 45%, var(--line))}
.shake{animation:shake .4s var(--ease)}
@keyframes shake{20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}
.code-card .btn{width:100%}
.code-foot{margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2); font-size:.82rem; color:var(--ink-3); display:flex; gap:8px; align-items:center}
.code-foot svg{flex:none; width:15px; height:15px; stroke:var(--ink-3)}

/* ---------- Приветствие ---------- */
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 30px; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.fact{padding:14px 0 14px 18px; border-left:1px solid var(--line-2)}
.fact:first-child{padding-left:0; border-left:0}
.fact dt{font-size:.78rem; color:var(--ink-3); margin-bottom:4px}
.fact dd{margin:0; font-family:var(--display); font-weight:600; font-size:1.35rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- Правила ---------- */
.rules-card{width:min(700px,100%)}
.rules-card .lead{margin-bottom:18px}
.legend{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0 0 28px}
.lg{display:flex; flex-direction:column; gap:8px}
.lg b{height:40px; border-radius:10px; display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:600; font-size:1.1rem; text-shadow:0 1px 2px rgba(0,0,0,.18);
  background-image:var(--scale-gradient); background-size:calc(500% + 4 * 8px) 100%; background-repeat:no-repeat}
.lg:nth-child(1) b{background-position:0% 0} .lg:nth-child(2) b{background-position:25% 0} .lg:nth-child(3) b{background-position:50% 0}
.lg:nth-child(4) b{background-position:75% 0} .lg:nth-child(5) b{background-position:100% 0}
.lg span{font-size:.78rem; line-height:1.35; color:var(--ink-2)}
.rule-list{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:16px}
.rule-list li{display:grid; grid-template-columns:22px 1fr; gap:14px; font-size:.95rem; line-height:1.58; color:var(--ink-2)}
.rule-list svg{width:21px; height:21px; stroke:var(--brand); margin-top:1px}
.rule-list b{color:var(--ink); font-weight:600}
.consent{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; padding:16px 18px; border-radius:12px; background:var(--bg); font-size:.93rem; line-height:1.5; cursor:pointer; margin-bottom:24px; transition:box-shadow .2s}
.consent:hover{box-shadow:inset 0 0 0 1px var(--line)}
.consent input{appearance:none; width:22px; height:22px; margin:0; border-radius:6px; background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--ink-3); display:grid; place-items:center; cursor:pointer; transition:background .15s, box-shadow .15s}
.consent input:checked{background:var(--brand); box-shadow:none}
.consent input:checked::after{content:''; width:10px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-1px) rotate(-45deg)}

/* ---------- Экран утверждения ---------- */
#s-q{flex-direction:column; padding:max(20px, env(safe-area-inset-top)) 24px max(18px, env(safe-area-inset-bottom))}
.q-top{width:min(960px,100%); margin:0 auto; display:flex; align-items:center; gap:18px}
.q-count{margin-left:auto; font-variant-numeric:tabular-nums; font-size:.9rem; color:var(--ink-2); white-space:nowrap}
.q-count b{color:var(--ink); font-weight:600}
.track{width:min(960px,100%); margin:14px auto 0; display:grid; grid-template-columns:repeat(var(--n,1),1fr); gap:3px}
.track span{height:4px; border-radius:2px; background:var(--line); transition:background .5s var(--ease), transform .3s var(--ease)}
.track span[data-v="1"]{background:var(--s1)} .track span[data-v="2"]{background:var(--s2)}
.track span[data-v="3"]{background:var(--s3)} .track span[data-v="4"]{background:var(--s4)} .track span[data-v="5"]{background:var(--s5)}
.track span.cur:not([data-v]){background:var(--ink)}
.track span.cur{transform:scaleY(1.75)}

.q-body{flex:1; width:min(860px,100%); margin:0 auto; display:flex; flex-direction:column; justify-content:center; padding:18px 0; min-height:0}
.q-meta{display:flex; align-items:center; gap:12px; font-size:.85rem; color:var(--ink-3); margin-bottom:18px}
.q-meta .sec{color:var(--brand); font-weight:500}
.q-meta .sep{width:3px; height:3px; border-radius:50%; background:var(--ink-3); flex:none}
.q-text{font-family:var(--display); font-size:clamp(1.35rem,3vw,2.15rem); line-height:1.3; font-weight:500; letter-spacing:-.02em; margin:0; text-wrap:pretty; max-width:36ch}
.q-anim{animation:qin .45s var(--ease) both}
@keyframes qin{from{opacity:0; transform:translateY(10px)}}

.fb{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin-top:22px; padding:9px 14px; border-radius:12px; background:var(--surface); box-shadow:0 0 0 1px var(--line-2); width:fit-content; max-width:100%; font-size:.88rem; color:var(--ink-2)}
.fb-cap{font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.fb-hist{display:inline-flex; align-items:flex-end; gap:2px; height:22px}
.fb-hist i{width:7px; height:10%; border-radius:2px 2px 1px 1px}
.fb-hist i:nth-child(1){background:var(--s1)} .fb-hist i:nth-child(2){background:var(--s2)} .fb-hist i:nth-child(3){background:var(--s3)}
.fb-hist i:nth-child(4){background:var(--s4)} .fb-hist i:nth-child(5){background:var(--s5)}
.fb-hist i.zero{opacity:.25}
.fb b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.chip{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:6px; background:var(--bg-2)}
.chip[data-v]{color:#fff}
.chip[data-v="1"]{background:var(--s1)} .chip[data-v="2"]{background:var(--s2)} .chip[data-v="3"]{background:var(--s3)} .chip[data-v="4"]{background:var(--s4)} .chip[data-v="5"]{background:var(--s5)}

.scale-wrap{width:min(860px,100%); margin:0 auto}
.scale{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--gap)}
/* Пять кнопок — одна градиентная полоса, разрезанная на части: фон каждой
   кнопки размером со всю шкалу и сдвинут на её позицию (0/25/50/75/100%). */
.sc{--c:var(--s3); position:relative; appearance:none; border:0; cursor:pointer; height:clamp(64px,10vw,84px); border-radius:14px;
  font-family:var(--display); font-weight:600; font-size:clamp(1.35rem,3vw,1.8rem); font-variant-numeric:tabular-nums; color:#fff;
  background-image:var(--scale-gradient); background-size:calc(500% + 4 * var(--gap)) 100%; background-repeat:no-repeat;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.08), 0 6px 16px -10px rgba(22,27,34,.5);
  transition:transform .2s var(--ease), box-shadow .3s var(--ease), opacity .25s, filter .25s}
.sc:hover{transform:translateY(-2px); filter:brightness(1.04)}
.sc:active{transform:scale(.97)}
.sc:nth-child(1){--c:var(--s1); background-position:0% 0}
.sc:nth-child(2){--c:var(--s2); background-position:25% 0}
.sc:nth-child(3){--c:var(--s3); background-position:50% 0}
.sc:nth-child(4){--c:var(--s4); background-position:75% 0}
.sc:nth-child(5){--c:var(--s5); background-position:100% 0}
.scale.has-sel .sc:not(.sel){opacity:.72; filter:saturate(.85)}
.sc.sel{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, var(--c) 55%, transparent), 0 16px 38px -8px color-mix(in srgb, var(--c) 75%, transparent)}
.sc.sel::after{content:''; position:absolute; inset:-10px; border-radius:22px; z-index:-1;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), transparent); animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{opacity:.5}}
.scale-labels{display:flex; justify-content:space-between; gap:12px; margin-top:12px; font-size:.82rem; color:var(--ink-3)}
.q-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; min-height:44px}
.link-fwd{margin-left:auto}
.kbd-hint{display:none; align-items:center; gap:8px; flex-wrap:wrap; font-size:.84rem; color:var(--ink-2)}
@media (hover:hover) and (pointer:fine) and (min-width:700px){ .kbd-hint{display:inline-flex} }
.kbd-hint .kb-ic{width:18px; height:18px; stroke:var(--ink-3); flex:none}
.kbd-hint .sep{color:var(--ink-3)}

/* ---------- Все оценены ---------- */
.check{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg, var(--s4), var(--brand)); box-shadow:0 10px 24px -12px rgba(47,107,63,.6); margin-bottom:26px}
.check svg{width:26px; height:26px; stroke:#fff; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:34; stroke-dashoffset:34; animation:draw .7s .3s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.thanks h1{margin-top:0}
.fp-box{padding:16px 18px; border-radius:12px; background:var(--bg); margin-bottom:28px}
.fp-cap{display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-3); margin-bottom:10px; font-variant-numeric:tabular-nums}
.fp{display:grid; grid-template-columns:repeat(var(--cols,32),1fr); gap:3px}
.fp span{height:22px; border-radius:3px; background:var(--line)}
.fp span[data-v="1"]{background:var(--s1)} .fp span[data-v="2"]{background:var(--s2)} .fp span[data-v="3"]{background:var(--s3)}
.fp span[data-v="4"]{background:var(--s4)} .fp span[data-v="5"]{background:var(--s5)}
.thx-back{margin-top:14px; margin-left:-4px}
.done-foot{margin:0; font-size:.86rem; color:var(--ink-3)}
.done-card .lead{margin-bottom:18px}

/* ---------- Просмотр ответов ---------- */
#s-review{flex-direction:column; padding:max(20px, env(safe-area-inset-top)) 24px 0}
#s-review .q-count{padding:4px}
.rv-head{width:min(860px,100%); margin:34px auto 4px}
.rv-head h1{font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,3.6vw,2.1rem); letter-spacing:-.025em; margin:0 0 8px}
.rv-head p{margin:0; color:var(--ink-2); line-height:1.6}
.rv-list{width:min(860px,100%); margin:0 auto; padding-bottom:128px}
.rv-sec{font-family:var(--text); font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:30px 0 10px}
.rv-group{background:var(--surface); border-radius:16px; box-shadow:0 0 0 1px var(--line-2), 0 18px 40px -32px rgba(22,27,34,.3)}
.rv-row{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:18px; align-items:center; padding:14px 18px}
.rv-row + .rv-row{border-top:1px solid var(--line-2)}
.rv-num{font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:.85rem; font-weight:500}
.rv-text{margin:0; font-size:.95rem; line-height:1.52}
.mini{--mg:4px; display:grid; grid-template-columns:repeat(5,34px); gap:var(--mg)}
.mb{--c:var(--s3); appearance:none; border:0; cursor:pointer; height:34px; padding:0; border-radius:8px; color:#fff; font-family:var(--display); font-weight:600; font-size:.9rem; font-variant-numeric:tabular-nums;
  background-image:var(--scale-gradient); background-size:calc(500% + 4 * var(--mg)) 100%; background-repeat:no-repeat; text-shadow:0 1px 1px rgba(0,0,0,.15);
  opacity:.26; filter:saturate(.55); transition:opacity .2s, filter .2s, transform .2s var(--ease), box-shadow .25s var(--ease)}
.mb:nth-child(1){--c:var(--s1); background-position:0% 0} .mb:nth-child(2){--c:var(--s2); background-position:25% 0}
.mb:nth-child(3){--c:var(--s3); background-position:50% 0} .mb:nth-child(4){--c:var(--s4); background-position:75% 0}
.mb:nth-child(5){--c:var(--s5); background-position:100% 0}
.mb:hover{opacity:.7; filter:none}
.mb.sel{opacity:1; filter:none; box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--c) 60%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--c) 80%, transparent)}
.mini:not(.has-sel) .mb{opacity:.6}
.rv-bar{position:fixed; left:0; right:0; bottom:0; z-index:5; padding:14px 24px max(14px, env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line)}
.rv-bar-in{width:min(860px,100%); margin:0 auto; display:flex; align-items:center; gap:16px; justify-content:space-between}
.rv-status{font-size:.92rem; color:var(--ink-2); font-variant-numeric:tabular-nums}

/* ---------- Уведомление ---------- */
.toast{position:fixed; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); z-index:20; transform:translate(-50%,16px); opacity:0; pointer-events:none;
  width:max-content; max-width:min(520px, calc(100% - 32px)); padding:12px 16px; border-radius:12px; background:var(--ink); color:#fff; font-size:.9rem; line-height:1.45;
  box-shadow:0 12px 32px -12px rgba(22,27,34,.5); transition:opacity .25s, transform .3s var(--ease)}
.toast.on{opacity:1; transform:translate(-50%,0)}
.on-review .toast{bottom:96px}
.noscript{position:fixed; inset:auto 16px 16px; z-index:30; padding:14px 16px; border-radius:12px; background:var(--ink); color:#fff; text-align:center}

/* ---------- Телефон ---------- */
@media (max-width:640px){
  .screen.center{padding:16px}
  .card{padding:30px 20px 24px; border-radius:18px}
  .card h1{margin-top:18px}
  .thanks h1{margin-top:0}
  .cells{gap:5px; justify-content:space-between}
  .cell{width:38px; height:52px; font-size:1.25rem; border-radius:9px}
  .cells .dash{width:6px}
  .facts .fact{padding-left:12px}
  .fact dd{font-size:1.15rem}
  .actions .btn{width:100%}
  .legend{grid-template-columns:1fr; gap:6px}
  .lg{flex-direction:row; align-items:center; gap:12px}
  .lg b{width:40px; height:34px; flex:none; background-size:100% 100%; background-image:none; background-color:var(--c)}
  .lg:nth-child(1){--c:var(--s1)} .lg:nth-child(2){--c:var(--s2)} .lg:nth-child(3){--c:var(--s3)} .lg:nth-child(4){--c:var(--s4)} .lg:nth-child(5){--c:var(--s5)}
  .lg span{font-size:.88rem}
  .rule-kb{display:none!important}
  .rules-card .actions{flex-direction:column-reverse; align-items:stretch}
  #s-q{padding:max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom))}
  .track{margin-top:10px}
  .q-meta{margin-bottom:12px; font-size:.8rem}
  .q-text{font-size:clamp(1.15rem,5.2vw,1.45rem); line-height:1.34}
  .fb{margin-top:14px; font-size:.8rem; gap:6px 12px; padding:8px 12px}
  .sc{height:60px; border-radius:12px; font-size:1.3rem}
  .scale-labels{font-size:.74rem}
  .q-nav{margin-top:6px}
  .thx-back{width:100%; justify-content:center}
  #s-review{padding:max(14px, env(safe-area-inset-top)) 16px 0}
  .rv-head{margin-top:24px}
  .rv-row{grid-template-columns:22px minmax(0,1fr); gap:10px 8px; padding:14px 14px 16px}
  .mini{grid-column:1 / -1; grid-template-columns:repeat(5,minmax(0,1fr)); --mg:6px}
  .mb{height:42px; font-size:1rem}
  .rv-bar{padding:12px 16px max(12px, env(safe-area-inset-bottom))}
  .rv-bar .btn{height:48px; padding:0 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .check svg{stroke-dashoffset:0}
}