/* ══ Тест для доски (quiz.js) ════════════════════════════════════════════════
   Цвета — стандарт, часть 5.1: зелёный и красный только для «верно / неверно»,
   до проверки — нейтральная фиолетовая рамка, после — ✓ и ✗ рядом с цветом. */
.qz{ --right:#12A150; --wrong:#E0303F; --halfc:#E89A00; --sel:#6E4BFF;
  --q-ink:var(--ink,#17203A); --q-ink2:var(--ink2,#4A5370); --q-mute:var(--mute,#7A83A0);
  --q-card:var(--card,#FFFFFF); --q-line:var(--line,#D5DBE8); --q-paper:var(--paper,#EEF2F8);
  --q-display:var(--display,system-ui,sans-serif); --q-mono:var(--mono,ui-monospace,Menlo,monospace);
  color:var(--q-ink); font-family:var(--text,system-ui,sans-serif) }
.qz{height:100%;display:flex;flex-direction:column;gap:14px;max-width:1440px;margin:0 auto;width:100%}
.qz-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.qz-kicker{font-family:var(--q-mono);font-size:18px;font-weight:700;letter-spacing:.04em;color:var(--q-mute);text-transform:uppercase}
.qz-score{display:flex;gap:10px}
.qz-score i{font-style:normal;font-weight:700;font-size:19px;padding:8px 16px;border-radius:12px;background:var(--q-card);border:2px solid var(--q-line);color:var(--q-ink2)}
.qz-score i.on{border-color:var(--sel);color:var(--q-ink)}
.qz-q{font-size:40px;line-height:1.18;letter-spacing:-.02em;max-width:34ch;margin:4px 0 2px}
.qz-hint{font-size:20px;color:var(--q-ink2);margin:0}
.qz-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.qz-opts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.qz-opt{min-height:78px;font-size:25px;line-height:1.25;padding:14px 20px;border-width:3px;transition:background .18s,border-color .18s,opacity .18s}
.qz-opt .k{width:46px;height:46px;font-size:21px;border-radius:13px}
.qz-opt:hover:not(:disabled){border-color:var(--sel)}
/* состояния — одна функция mark() */
.qz .opt.sel{border-color:var(--sel);box-shadow:0 0 0 5px rgba(110,75,255,.22)}
.qz .opt.ok{background:var(--right);border-color:var(--right);color:#fff}
.qz .opt.bad{background:var(--wrong);border-color:var(--wrong);color:#fff}
.qz .opt.half{background:var(--halfc);border-color:var(--halfc);color:#fff}
.qz .opt.miss{border:3px dashed var(--right)}
.qz .opt.off{opacity:.45}
.qz .qz .opt.ok .k,.qz .opt.bad .k,.qz .opt.half .k{background:rgba(255,255,255,.22);color:#fff}
.qz .opt.ok::after{content:"✓";margin-left:auto;font-size:30px;font-weight:800}
.qz .opt.bad::after{content:"✗";margin-left:auto;font-size:30px;font-weight:800}
.qz .opt.half::after{content:"≈";margin-left:auto;font-size:30px;font-weight:800}
.qz-opt:disabled{cursor:default}
.qz-foot{margin-top:auto;display:flex;gap:18px;align-items:flex-end}
.qz-fb{flex:1;font-size:22px;line-height:1.38;min-height:0}
.qz-fb:empty{visibility:hidden}
.qz .fb{border-left:10px solid;padding:14px 20px;border-radius:14px;background:var(--q-card)}
.qz .fb.ok{border-color:var(--right)} .fb.bad{border-color:var(--wrong)} .fb.half{border-color:var(--halfc)}
.qz .fb b{font-size:24px}
.qz .fb.ok b{color:var(--right)} .fb.bad b{color:var(--wrong)} .fb.half b{color:#B87800}
.qz-extra{display:block;margin-top:6px;color:var(--q-ink2);font-size:20px}
.qz-go{min-width:220px;min-height:68px;font-size:24px;flex:0 0 auto}
/* порядок и пары */
.qz-order{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qz-match{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.qz-match>div{display:grid;gap:12px;align-content:start}
.qz-match .qz-opt{min-height:66px;font-size:22px}
/* ползунок */
.qz-slider{position:relative;background:var(--q-card);border:3px solid var(--q-line);border-radius:18px;padding:22px 28px 16px}
.qz-slider.ok{border-color:var(--right)} .qz-slider.bad{border-color:var(--wrong)} .qz-slider.sel{border-color:var(--sel)}
.qz-sv{display:flex;justify-content:space-between;align-items:baseline;font-size:24px;margin-bottom:10px}
.qz-sv b{font-family:var(--q-display);font-size:44px}
.qz-slider input{width:100%;height:36px}
.qz-sx{display:flex;justify-content:space-between;font-size:18px;color:var(--q-mute)}
.qz-band{position:absolute;bottom:52px;height:12px;border-radius:6px;background:var(--right);opacity:.55;margin-left:28px;max-width:calc(100% - 56px)}
/* найди на картинке */
.qz-spot{position:relative;height:380px;aspect-ratio:900/480;align-self:center;border-radius:16px;overflow:hidden;border:3px solid var(--q-line);background:var(--q-card)}
.qz-spot svg{position:absolute;inset:0;width:100%;height:100%}
.qz-z{position:absolute;inset:0;cursor:crosshair}
.qz-pin{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:5px solid var(--sel);background:rgba(110,75,255,.25)}
.qz-zone{position:absolute;border:5px solid;border-radius:14px}
.qz-zone.ok{border-color:var(--right);background:rgba(18,161,80,.18)} .qz-zone.bad{border-color:var(--wrong);background:rgba(224,48,63,.15)}
/* начало и итог */
.qz-start,.qz-end{justify-content:center;align-items:center;text-align:center}
.qz-start h2{font-size:46px}
.qz-lead{font-size:26px;color:var(--q-ink2);max-width:46ch;margin:0}
.qz-modes{display:flex;gap:22px;margin-top:10px}
.qz-mode{min-width:340px;min-height:130px;border-radius:20px;border:3px solid var(--q-line);background:var(--q-card);display:grid;gap:6px;place-content:center;padding:18px 26px}
.qz-mode:hover{border-color:var(--sel)}
.qz-mode b{font-family:var(--q-display);font-size:28px} .qz-mode span{font-size:19px;color:var(--q-ink2)}
.qz-big{font-family:var(--q-display);font-size:52px;letter-spacing:-.03em;color:var(--sel);max-width:22ch;line-height:1.1}
.qz-rep{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:1200px}
.qz-back{min-height:64px;font-size:21px}

.qz .opt{display:flex;gap:15px;align-items:center;text-align:left;border-radius:15px;border:3px solid var(--q-line);font-weight:600;background:var(--q-card);color:var(--q-ink);cursor:pointer;font-family:inherit}
.qz .opt .k{display:grid;place-items:center;background:var(--q-paper);font-family:var(--q-display);flex:0 0 auto;color:var(--q-ink)}
.qz .btn{border:0;border-radius:16px;background:var(--sel);color:#fff;font-family:var(--q-display);font-weight:700;padding:0 28px;cursor:pointer}
.qz .btn:disabled{opacity:.4;cursor:default}
.qz .btn.ghost{background:var(--q-card);color:var(--q-ink);border:3px solid var(--q-line)}
.qz h2{font-family:var(--q-display);font-weight:600;color:var(--q-ink)}