/* ═══════════════════════════════════════════════════════════
   СудБокс — модальное окно квизов: слева видео, справа вопросы
   ═══════════════════════════════════════════════════════════ */
.qmodal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .35s ease}
.qmodal.open{opacity:1;pointer-events:auto}
.qmodal .scrim{position:absolute;inset:0;background:rgba(15,14,18,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.qdlg{position:relative;z-index:2;width:min(1080px,100%);height:min(680px,92vh);display:grid;grid-template-columns:42% 58%;border-radius:24px;overflow:hidden;background:#fff;transform:scale(.97) translateY(12px);transition:transform .45s cubic-bezier(.2,.8,.25,1)}
.qmodal.open .qdlg{transform:none}
.qvid{position:relative;background:#111}
.qvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qvid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,24,44,.15),rgba(0,24,44,.45))}
.qpane{position:relative;overflow-y:auto;padding:44px 44px 36px}
.qx{position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--carbon);display:flex;align-items:center;justify-content:center;cursor:pointer}
.qx:hover{background:var(--carbon);color:#fff}
.qx svg{width:18px;height:18px}
.qbody{min-height:100%;display:flex;flex-direction:column}
.qload{margin:auto 0;color:var(--mercury);font-size:15px}
.qload a{color:var(--carbon);font-weight:500}
.qhead{padding-right:44px}
.qprog{margin-top:16px;height:4px;border-radius:2px;background:rgba(50,45,42,.1);overflow:hidden}
.qprog span{display:block;height:100%;background:var(--blue);transition:width .4s ease}
.qstep{margin-top:10px;font-size:13px;color:#66615d}
.qintro{margin-top:22px;font-size:15px;line-height:1.55;color:var(--carbon);padding:14px 16px;border-left:3px solid var(--red);background:rgba(50,45,42,.04)}
.qform{flex:1;display:flex;flex-direction:column;margin-top:26px}
.qq{font-weight:400;font-size:clamp(21px,2.2vw,26px);line-height:1.2}
.qhint{margin-top:10px;font-size:14px;line-height:1.5;color:#66615d}
.qfield{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.qin{font-family:var(--font);font-size:17px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--carbon);outline:none;width:100%;transition:border-color .2s}
.qin:focus{border-color:var(--carbon)}
textarea.qin{resize:vertical;min-height:110px}
.qunit{position:relative;display:flex;align-items:center}
.qunit .qin{padding-right:54px}
.qunit span{position:absolute;right:18px;color:var(--mercury);font-size:16px}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopts.qyn{flex-direction:row}
.qopt{font:inherit;font-size:15px;text-align:left;padding:15px 18px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--carbon);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.qyn .qopt{min-width:110px;text-align:center}
.qopt:hover{border-color:var(--blue)}
.qopt.on{background:var(--blue);border-color:var(--blue);color:#fff}
.qcount{display:flex;flex-direction:column;gap:8px}
.qcount[hidden]{display:none}
.qcount label{font-size:13px;color:#66615d}
.qcount .qin{max-width:180px}
.qconsent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:#66615d;cursor:pointer}
.qconsent input{width:18px;height:18px;margin-top:1px;accent-color:var(--carbon);flex:none}
.qconsent a{color:var(--carbon);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.qerr{min-height:20px;margin-top:12px;font-size:13.5px;color:var(--red)}
.qerr a{color:var(--red);font-weight:500}
.qnav{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.qnav .btn[hidden]{display:none}
.qnav .btn{padding:15px 24px}
.qnav .btn-fill{background:var(--red)}
.qnav .btn-fill:hover{background:var(--red-deep)}
.qnav .btn:disabled{opacity:.6;pointer-events:none}
.qresult{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.qres{font-size:17px;line-height:1.55;color:var(--carbon)}
.qresult .btn{margin-top:10px}
.qnote{font-size:12.5px;line-height:1.5;color:#66615d;max-width:520px}
@media(max-width:860px){
  .qmodal{padding:0}
  .qdlg{grid-template-columns:1fr;height:100%;border-radius:0}
  .qvid{display:none}
  .qpane{padding:30px 22px 24px}
}