/* Викторины сайта. Цвета из токенов темы; зеленый и красный только для отметки ответа. 15.11.2026 */
.qz { --qz-ok: #1f6f3a; --qz-bad: #a8261c; font-family: var(--a-sans); background: var(--a-soft); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 16px; margin: 24px 0; min-height: 400px; color: var(--a-text); }
.qz * { box-sizing: border-box; }
.entry-content .qz p { margin: 0 0 12px; font-family: var(--a-sans); }
.qz .qz-lead { font-size: 16px; line-height: 1.5; }
.qz .qz-note { font-size: 14px; line-height: 1.5; color: var(--a-muted); }
.qz-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.qz-tab { font: inherit; font-size: 15px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-surface); color: var(--a-text); cursor: pointer; }
.qz-tab[aria-pressed="true"] { background: var(--a-navy); border-color: var(--a-navy); color: #fff; }
.qz-row { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; font-size: 15px; }
.qz-row select, .qz-name { font: inherit; font-size: 16px; padding: 7px 9px; border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-surface); color: var(--a-text); }
.qz-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 0 0 12px; }
.qz-name { width: 100%; }
.qz-go { font: inherit; font-size: 17px; font-weight: 700; padding: 12px 26px; border: 0; border-radius: 8px; background: var(--a-link); color: #fff; cursor: pointer; margin: 4px 0 12px; }
.qz-go:hover { background: var(--a-link-hover); }
.qz .qz-prog { font-size: 14px; font-weight: 600; color: var(--a-muted); }
.qz .qz-q { font-family: var(--a-serif); font-size: 21px; line-height: 1.4; font-weight: 700; color: var(--a-navy); outline: 0; }
.qz-opts { display: grid; gap: 8px; margin: 0 0 12px; }
.qz-opt { font: inherit; font-size: 16px; line-height: 1.4; text-align: left; padding: 12px 14px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-surface); color: var(--a-text); cursor: pointer; }
.qz-opt:hover:enabled { border-color: var(--a-link); }
.qz-opt:disabled { cursor: default; color: var(--a-text); opacity: 1; }
.qz-opt.qz-ok { border: 2px solid var(--qz-ok); padding: 11px 13px; font-weight: 700; }
.qz-opt.qz-bad { border: 2px solid var(--qz-bad); padding: 11px 13px; }
.qz-res { min-height: 72px; font-size: 16px; line-height: 1.5; margin: 0 0 8px; }
.qz-t-ok { color: var(--qz-ok); }
.qz-t-bad { color: var(--qz-bad); }
.qz .qz-score { font-family: var(--a-serif); font-size: 26px; font-weight: 700; color: var(--a-navy); }
.qz-board { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.qz-board li { margin: 0; padding: 9px 12px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 6px; font-size: 16px; }
/* тема красит кнопки в серый при нажатии и фокусе: держим свои цвета во всех состояниях */
.qz .qz-opt, .qz .qz-opt:hover, .qz .qz-opt:focus, .qz .qz-opt:active, .qz .qz-opt:disabled { background: var(--a-surface); color: var(--a-text); }
.qz .qz-go, .qz .qz-go:focus, .qz .qz-go:active { background: var(--a-link); color: #fff; }
.qz .qz-go:hover { background: var(--a-link-hover); color: #fff; }
.qz .qz-tab, .qz .qz-tab:hover, .qz .qz-tab:focus, .qz .qz-tab:active { background: var(--a-surface); color: var(--a-text); }
.qz .qz-tab[aria-pressed="true"] { background: var(--a-navy); color: #fff; }
.qz button:focus-visible { outline: 2px solid var(--a-navy); outline-offset: 2px; }
.qz .qz-q, .qz .qz-score { font-family: var(--a-serif); }
/* шапка вопроса: счетчик и точки прогресса */
.qz .qz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.qz .qz-head .qz-prog { font-size: 14px; font-weight: 600; color: var(--a-muted); }
.qz .qz-dots { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; }
.qz .qz-dot { width: 22px; height: 8px; border-radius: 4px; background: var(--a-line); }
.qz .qz-d-cur { background: var(--a-navy); }
.qz .qz-d-ok { background: var(--qz-ok); }
.qz .qz-d-bad { background: var(--qz-bad); }
.qz .qz-foot { margin: 4px 0 0; min-height: 52px; }
.qz .qz-link, .qz .qz-link:hover, .qz .qz-link:focus, .qz .qz-link:active { font: inherit; font-size: 14px; padding: 6px 0; border: 0; background: none; color: var(--a-link); text-decoration: underline; cursor: pointer; }