/* ==================================================================
   ХимПодготовка — «прокачка» страниц тестов /tests/*.html

   У каждого теста свои встроенные стили (разные поколения шаблонов),
   но разметка у них общая: шапка .quiz-header, навигация .q-sidebar,
   карточка вопроса .q-card, кнопки .btn-check / .btn-solution и экран
   результатов. Этот файл подключается после встроенных стилей
   (tools/quiz_pro.js) и поднимает качество оформления всех тестов
   сразу, не трогая их логику: те же классы и состояния — selected,
   correct, wrong, active, show/ok/err.

   Палитра — фирменная оранжевая, как на остальном сайте.
   ================================================================== */

body {
    --qp-ink: #16213A;
    --qp-ink-2: #56627A;
    --qp-ink-3: #8C96A8;
    --qp-line: #ECE5DA;
    --qp-card: #FFFFFF;
    --qp-orange: #F5A623;
    --qp-orange-d: #E8850A;
    --qp-orange-soft: #FFF4E0;
    --qp-green: #16A34A;
    --qp-green-soft: #E9F9EF;
    --qp-red: #E5484D;
    --qp-red-soft: #FDEDEE;
    --qp-blue: #2563EB;
    --qp-sh: 0 1px 2px rgba(22, 33, 58, .05), 0 10px 30px -18px rgba(22, 33, 58, .35);
    --qp-sh-up: 0 2px 4px rgba(22, 33, 58, .05), 0 22px 44px -24px rgba(22, 33, 58, .45);
    --qp-ease: cubic-bezier(.2, .7, .2, 1);
    background:
        radial-gradient(1100px 520px at 110% -10%, rgba(245, 166, 35, .12), transparent 60%),
        radial-gradient(900px 480px at -10% 0%, rgba(37, 99, 235, .06), transparent 60%),
        linear-gradient(180deg, #FFFBF5 0%, #FBF7F1 100%) fixed !important;
}
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(22, 33, 58, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 33, 58, .035) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 80%);
}

/* ——— Шапка теста: тёмная, как шапка номера в банке заданий ———
   Сетка «миллиметровки», оранжевое свечение, плитка-иконка и полоса
   прогресса по нижнему краю. Все блоки страницы — одной ширины (1180). */
.quiz-header {
    position: relative !important; isolation: isolate; overflow: hidden !important;
    max-width: 1180px !important; width: calc(100% - 32px) !important;
    margin: 14px auto 14px !important; padding: 0 !important; border: 0 !important; border-radius: 26px !important;
    background:
        radial-gradient(460px 240px at 100% 0%, rgba(245, 166, 35, .30), transparent 70%),
        radial-gradient(300px 180px at 0% 100%, rgba(37, 99, 235, .16), transparent 70%),
        linear-gradient(160deg, #141A28, #0C111C) !important;
    box-shadow: 0 22px 44px -28px rgba(12, 17, 28, .85) !important;
}
.quiz-header::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.quiz-header::after { display: none !important; }
.quiz-header-inner {
    position: relative; overflow: visible; gap: 18px !important;
    max-width: none !important; margin: 0 !important;
    padding: 24px 28px 34px !important; border-radius: 0; border: 0 !important;
    background: transparent !important; box-shadow: none !important;
}
.quiz-h-icon {
    width: 64px !important; height: 64px !important; flex: none !important;
    border: 0 !important; border-radius: 19px !important; transform: rotate(-3deg);
    background: linear-gradient(145deg, #FFD27A, #F5A623 55%, #D9780A) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 30px -12px rgba(245, 166, 35, .6) !important;
    font-size: 30px !important;
}
.quiz-h-sup { letter-spacing: .14em !important; color: #F8C878 !important; }
.quiz-h-title {
    font-weight: 850 !important; letter-spacing: -.025em !important; color: #fff !important;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem) !important; line-height: 1.2 !important;
    white-space: normal !important; overflow: visible !important;
}
.quiz-h-stat {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 8px 13px !important; border-radius: 999px;
    background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-weight: 700 !important; color: #fff !important;
}
.quiz-h-stat * { color: inherit !important; }
.quiz-h-divider { display: none !important; }
.quiz-h-progress {
    position: absolute !important; left: 28px; right: 28px; bottom: 14px; top: auto !important; z-index: 1;
    width: auto !important; max-width: none !important; margin: 0 !important;
    height: 6px !important; border-radius: 999px !important; overflow: hidden;
    background: rgba(255, 255, 255, .1) !important; box-shadow: none;
}
.quiz-h-fill {
    position: relative; border-radius: 999px !important;
    background: linear-gradient(90deg, #FFC45C, var(--qp-orange-d)) !important;
    transition: width .6s var(--qp-ease) !important;
}
.quiz-h-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    background-size: 220% 100%; animation: qp-shimmer 2.4s linear infinite;
}
@keyframes qp-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ——— Карточки ——— */
.q-card, .info-card, .ring-card, .q-sidebar, .q-nav, .results-hero, .results-grid > *, .th-card {
    border: 0 !important; border-radius: 22px !important;
    background: var(--qp-card) !important;
    box-shadow: 0 0 0 1px var(--qp-line), var(--qp-sh) !important;
}
.q-card { overflow: hidden; }
.q-card-head {
    border-bottom: 1px solid #F3EEE6 !important;
    background: linear-gradient(180deg, #FFFDF9, #FFFFFF) !important;
}
.q-pill {
    border: 0 !important; border-radius: 999px !important;
    background: linear-gradient(135deg, #FFB547, var(--qp-orange-d)) !important; color: #fff !important;
    box-shadow: 0 8px 16px -10px rgba(232, 133, 10, .9) !important;
    letter-spacing: .06em;
}
.q-timer-wrap {
    border-radius: 999px !important; background: #FAF6EF !important; box-shadow: inset 0 0 0 1px var(--qp-line) !important;
    font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Новый вопрос появляется мягко: блоки пересоздаются при каждом переходе */
.q-question, .q-instruction, .q-options, .answer-row, .q-answer-row, .match-container, .q-match-wrap, .q-order-wrap, .smiles-grid, .wrap_flex_table {
    animation: qp-in .45s var(--qp-ease) both;
}
.q-instruction { animation-delay: .04s; } .q-options, .match-container, .q-match-wrap, .q-order-wrap { animation-delay: .08s; }
@keyframes qp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.q-question { color: var(--qp-ink) !important; letter-spacing: -.012em; line-height: 1.45 !important; }
.q-instruction {
    display: inline-flex !important; align-items: center; gap: 7px;
    padding: 5px 11px 5px 9px !important; border-radius: 999px;
    background: #F5F7FB; color: var(--qp-ink-2) !important; font-weight: 650 !important;
}
.q-instruction::before { content: '✎'; font-size: .85em; color: var(--qp-orange-d); }

/* ——— Варианты ответа ——— */
.q-option {
    position: relative;
    border: 1.5px solid #E6E0D6 !important; background: #fff !important;
    box-shadow: 0 1px 0 rgba(22, 33, 58, .04) !important;
    transition: transform .18s var(--qp-ease), box-shadow .18s, border-color .18s, background .18s !important;
}
.q-option:hover:not(.correct):not(.wrong) {
    transform: translateY(-2px);
    border-color: #F5C06B !important;
    box-shadow: 0 10px 20px -14px rgba(232, 133, 10, .6) !important;
}
.q-option:active { transform: translateY(0) scale(.98); }
.q-option.selected:not(.correct):not(.wrong) {
    border-color: var(--qp-orange) !important; background: var(--qp-orange-soft) !important;
    box-shadow: 0 0 0 4px rgba(245, 166, 35, .18) !important;
}
.q-option.correct {
    border-color: #34C26E !important; background: var(--qp-green-soft) !important; color: #11653A !important;
    animation: qp-pop .35s var(--qp-ease);
}
.q-option.wrong {
    border-color: var(--qp-red) !important; background: var(--qp-red-soft) !important; color: #9B1C22 !important;
    animation: qp-shake .4s ease;
}
.q-option.correct::after, .q-option.wrong::after {
    position: absolute; top: -8px; right: -8px; display: grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%; font: 900 11px/1 system-ui, sans-serif; color: #fff;
    box-shadow: 0 0 0 2px #fff;
}
.q-option.correct::after { content: '✓'; background: #22A559; }
.q-option.wrong::after { content: '✕'; background: var(--qp-red); }
@keyframes qp-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes qp-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.q-option-letter { border-radius: 8px !important; }

/* ——— Поля ввода ответа ——— */
.answer-input, .q-answer-input, .q-order-input {
    border: 1.5px solid #E1DACE !important; border-radius: 12px !important; background: #fff !important;
    font-weight: 700 !important; letter-spacing: .06em; color: var(--qp-ink) !important;
    transition: border-color .18s, box-shadow .18s !important;
}
.answer-input:focus, .q-answer-input:focus, .q-order-input:focus {
    outline: none !important; border-color: var(--qp-orange) !important; box-shadow: 0 0 0 4px rgba(245, 166, 35, .2) !important;
}
.answer-input.correct { border-color: #34C26E !important; background: var(--qp-green-soft) !important; animation: qp-pop .35s var(--qp-ease); }
.answer-input.wrong { border-color: var(--qp-red) !important; background: var(--qp-red-soft) !important; animation: qp-shake .4s ease; }
.answer-row, .q-answer-row, .q-order-answer-row {
    border-radius: 16px !important; background: #FAF7F1 !important; box-shadow: inset 0 0 0 1px var(--qp-line) !important;
}

/* ——— Соответствие и порядок ——— */
.match-item, .q-match-row, .q-order-chip, .smiles-item {
    border-radius: 14px !important; border: 1px solid #ECE6DC !important; background: #fff !important;
    box-shadow: 0 1px 0 rgba(22, 33, 58, .04) !important; transition: transform .18s var(--qp-ease), box-shadow .18s !important;
}
.match-item:hover, .q-order-chip:hover { transform: translateY(-1px); box-shadow: 0 10px 18px -14px rgba(22, 33, 58, .45) !important; }
.m-badge, .q-order-num, .smiles-letter {
    border-radius: 9px !important; background: linear-gradient(135deg, #FFB547, var(--qp-orange-d)) !important; color: #fff !important; border: 0 !important;
}
.q-m-num { border-radius: 9px !important; transition: transform .15s, box-shadow .15s !important; }
.q-m-num:hover { transform: translateY(-1px); }
.q-m-num.selected { box-shadow: 0 0 0 3px rgba(245, 166, 35, .25) !important; }
.q-order-chip.correct-chip { border-color: #34C26E !important; background: var(--qp-green-soft) !important; }
.q-order-chip.wrong-chip { border-color: var(--qp-red) !important; background: var(--qp-red-soft) !important; }

/* ——— Отклик после проверки ——— */
.q-feedback.show {
    position: relative; overflow: hidden; border-radius: 14px !important; border: 0 !important;
    padding: 12px 14px 12px 18px !important; animation: qp-slide .35s var(--qp-ease);
}
.q-feedback.show::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.q-feedback.show.ok { background: var(--qp-green-soft) !important; box-shadow: inset 0 0 0 1px rgba(52, 194, 110, .35) !important; }
.q-feedback.show.ok::before { background: #22A559; }
.q-feedback.show.err { background: var(--qp-red-soft) !important; box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .3) !important; }
.q-feedback.show.err::before { background: var(--qp-red); }
@keyframes qp-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ——— Кнопки ——— */
.btn-check, .btn-next, .btn-retry, .btn-show-solution {
    border: 0 !important; border-radius: 14px !important; font-weight: 800 !important; letter-spacing: -.01em;
    color: #fff !important;
    background: linear-gradient(180deg, #FFB547, var(--qp-orange-d)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 26px -14px rgba(232, 133, 10, .9) !important;
    transition: transform .18s var(--qp-ease), box-shadow .18s, filter .18s !important;
}
.btn-check:hover:not(:disabled), .btn-next:hover, .btn-retry:hover, .btn-show-solution:hover {
    transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 20px 34px -16px rgba(232, 133, 10, 1) !important;
}
.btn-check:disabled {
    background: #F3EEE6 !important; color: #B3A792 !important; box-shadow: inset 0 0 0 1.5px #E8E0D2 !important; cursor: not-allowed;
}
.btn-solution, .btn-theory {
    border-radius: 14px !important; background: #fff !important; color: var(--qp-ink) !important; font-weight: 750 !important;
    border: 1.5px solid #E6DFD3 !important; box-shadow: 0 1px 0 rgba(22, 33, 58, .04) !important;
    transition: transform .18s var(--qp-ease), border-color .18s, box-shadow .18s !important;
}
.btn-solution:hover, .btn-theory:hover {
    transform: translateY(-2px); border-color: #F5C06B !important; box-shadow: 0 12px 22px -16px rgba(22, 33, 58, .5) !important;
}
.btn-grade {
    border-radius: 14px !important; transition: transform .18s var(--qp-ease), box-shadow .18s !important;
}
.btn-grade:hover { transform: translateY(-2px); }
.btn-grade.chosen { box-shadow: 0 0 0 3px rgba(245, 166, 35, .35) !important; }
.q-card button:focus-visible, .q-card input:focus-visible, .q-dot:focus-visible { outline: 2px solid var(--qp-orange-d); outline-offset: 2px; }

/* ——— Решение ——— */
.solution-block {
    position: relative; border-radius: 16px !important; border: 0 !important;
    background: linear-gradient(180deg, #F7FAFF, #FFFFFF) !important;
    box-shadow: inset 0 0 0 1px #DCE6F7 !important; padding-left: 20px !important;
    animation: qp-slide .35s var(--qp-ease);
}
.solution-block::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #60A5FA, var(--qp-blue)); }
.sol-title { color: var(--qp-blue) !important; letter-spacing: .02em; }

/* ——— Навигация по вопросам ——— */
.q-nav-label { letter-spacing: .12em !important; color: var(--qp-ink-3) !important; }
.q-dot {
    border-radius: 9px !important; border: 1.5px solid #ECE5DA !important; background: #fff !important;
    font-weight: 800 !important; color: var(--qp-ink-2) !important;
    transition: transform .15s var(--qp-ease), box-shadow .15s, background .15s !important;
}
.q-dot:hover { transform: translateY(-2px) !important; border-color: #F5C06B !important; box-shadow: 0 8px 14px -10px rgba(232, 133, 10, .7) !important; }
.q-dot.correct { background: linear-gradient(135deg, #34C26E, #16A34A) !important; border-color: transparent !important; color: #fff !important; }
.q-dot.wrong { background: linear-gradient(135deg, #F06B6F, #E5484D) !important; border-color: transparent !important; color: #fff !important; }
.q-dot.active {
    background: linear-gradient(135deg, #FFB547, var(--qp-orange-d)) !important; border-color: transparent !important; color: #fff !important;
    animation: qp-ring 2s ease-out infinite;
}
@keyframes qp-ring { 0% { box-shadow: 0 0 0 0 rgba(245, 166, 35, .55); } 70% { box-shadow: 0 0 0 7px rgba(245, 166, 35, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); } }
.leg-dot { border-radius: 4px !important; }

/* ——— Результаты ——— */
.results-hero { overflow: hidden; background: linear-gradient(160deg, #FFFFFF, #FFF8EC) !important; }
.results-title { letter-spacing: -.025em; }
.results-score-big { letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ring-pct { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* ——— Ширина колонки вопроса ———
   Средняя колонка .quiz-layout — 1fr, а у элемента сетки минимальная
   ширина по умолчанию равна ширине содержимого. После ответа в карточке
   появлялся широкий блок, колонка раздувалась и правая панель уезжала
   за край экрана (горизонтальная прокрутка). min-width: 0 разрешает
   колонке остаться своей ширины, а широкие таблицы и формулы
   прокручиваются внутри карточки. */
.quiz-layout > * { min-width: 0; }
.q-card-body { overflow-wrap: break-word; }
.q-card-body table, .q-card-body pre, .solution-block table, .solution-block pre { display: block; max-width: 100%; overflow-x: auto; }
.q-card-body img, .solution-block img { max-width: 100%; height: auto; }
.q-card-body mjx-container[display='true'] { max-width: 100%; overflow-x: auto; overflow-y: hidden; }

@media (max-width: 720px) {
    .quiz-header { margin: 8px auto 12px !important; width: calc(100% - 16px) !important; border-radius: 20px !important; }
    .quiz-header-inner { gap: 12px !important; padding: 16px 16px 28px !important; }
    .quiz-h-icon { width: 50px !important; height: 50px !important; border-radius: 15px !important; font-size: 24px !important; }
    .quiz-h-progress { left: 16px; right: 16px; bottom: 12px; }
    .quiz-h-stat { padding: 4px 9px !important; }
}

/* ==================================================================
   Страница теста целиком

   Блоки шли разной ширины: полоска режимов — 900 px, шапка — 750,
   предупреждение о входе — 1266, сетка теста — 1280. Теперь всё
   выровнено по одной ширине 1180, как в банке заданий.

   На широком экране — две колонки: слева вопрос, справа панель —
   счёт и сетка вопросов (закреплена, пока листают длинный вопрос).
   Раньше навигация стояла узкой колонкой слева, счёт — справа, и
   вопрос зажимался посередине.
   ================================================================== */
.hp-modes--test { max-width: 1180px !important; width: calc(100% - 32px) !important; }

/* Предупреждение о входе: тише и той же ширины */
.test-auth-notice {
    max-width: 1180px !important; width: calc(100% - 32px) !important; margin: 0 auto 4px !important;
    padding: 9px 14px !important; border: 0 !important; border-radius: 14px !important;
    background: #FFF7E8 !important; box-shadow: inset 0 0 0 1px #F6E2BD;
}

@media (min-width: 1101px) {
    .quiz-layout {
        max-width: 1180px !important; width: calc(100% - 32px) !important;
        margin: 18px auto 2rem !important; padding: 0 !important;
        grid-template-columns: minmax(0, 1fr) 316px !important;
        grid-template-areas: "main side" "main nav";
        /* Первая строка — по высоте счёта, всё лишнее — второй: иначе
           длинный вопрос растягивал обе и между счётом и сеткой зияла дыра. */
        grid-template-rows: auto 1fr;
        gap: 16px 22px !important; align-items: start !important;
    }
    .quiz-layout:not(:has(> .q-sidebar)) { grid-template-areas: "main nav"; grid-template-rows: auto; }
    .quiz-layout > main { grid-area: main; }
    .quiz-layout > .q-sidebar { grid-area: side; position: static !important; }
    .quiz-layout > .q-nav {
        grid-area: nav; position: sticky !important; top: calc(var(--hp-bar-h, 62px) + var(--hp-bar-gap, 12px) * 2 + 10px) !important;
        width: auto !important; padding: 18px 16px 16px !important;
    }
    /* Сетка вопросов — по 6 в ряд на всю ширину панели */
    .quiz-layout > .q-nav .q-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px !important; margin-bottom: 14px !important; }
    .quiz-layout > .q-nav .q-dot { width: auto !important; height: auto !important; aspect-ratio: 1 !important; border-radius: 10px !important; font-size: .8rem !important; }
    .quiz-layout > .q-nav .q-legend { flex-direction: row !important; flex-wrap: wrap; gap: 6px 14px !important; }
}

/* ——— Лист вопроса ——— */
.q-card { border-radius: 26px !important; box-shadow: 0 0 0 1px var(--qp-line), 0 30px 60px -38px rgba(22, 33, 58, .45) !important; }
.q-card-body { font-size: 1.02rem; line-height: 1.62; color: #273244; }

/* ——— Подвал: у тестов нет общего style.css, стили подвала — здесь ——— */
.th-footer {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 100%; margin-top: 2.5rem; padding: 2rem 1.5rem; clear: both;
    border-top: 1px solid #ECE7DF; background: #FFFFFF;
    text-align: center; font-size: .82rem; color: #6B7280;
}
.th-footer p { max-width: 800px; margin: 0 auto; text-align: center; line-height: 1.6; }
.th-footer a { color: #D98A0B; text-decoration: none; }
.th-footer a:hover { color: #B86E00; }
.th-footer .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; width: 100%; margin-bottom: .75rem; }
.th-footer .footer-links a { color: #4B5563; font-weight: 600; }
.th-footer .footer-links a:hover { color: #D98A0B; }
.th-footer .footer-divider { width: 200px; height: 1px; margin: .5rem auto .75rem; background: #ECE7DF; }
@media (prefers-reduced-motion: reduce) {
    .q-question, .q-instruction, .q-options, .answer-row, .q-answer-row, .match-container, .q-match-wrap, .q-order-wrap,
    .q-option, .answer-input, .q-feedback.show, .solution-block, .q-dot.active, .quiz-h-fill::after { animation: none !important; transition: none !important; }
}

/* ——— Решение — только после ответа (js/quiz-guard.js) ——— */
.qp-sol-wait { opacity: .55; cursor: not-allowed !important; }
.qp-sol-wait:hover { transform: none !important; }
.qp-sol-tip {
    position: absolute; z-index: 60; width: 280px; padding: 10px 12px; border-radius: 12px;
    background: #16191F; color: #fff; font: 600 13px/1.35 'Inter', system-ui, sans-serif; text-align: center;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
    opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.qp-sol-tip.is-on { opacity: 1; transform: none; }

/* ——— Реванш: вопрос с ошибкой возвращается (js/quiz-guard.js) ——— */
.qp-revenge {
    margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
    border: 1px dashed #F0A43A; background: #FFFBF3; color: #7C4A03;
    font: 500 13.5px/1.4 'Inter', system-ui, sans-serif;
}
.qp-revenge[hidden] { display: none; }
.qp-revenge.is-ready { border-style: solid; background: #FFF4E0; }
.qp-revenge b { font-weight: 800; color: #16191F; }
.qp-revenge button {
    margin-left: 6px; padding: 4px 10px; border: 0; border-radius: 8px; cursor: pointer;
    background: linear-gradient(135deg, #F7B84B, #E8850A); color: #16191F; font: 800 12.5px/1.2 'Inter', system-ui, sans-serif;
}
.q-dot.qp-rv { box-shadow: 0 0 0 3px #FCD34D; }
/* Исправленное — ярко-жёлтым, открытое сейчас — бледно */
.q-dot.wrong.qp-rv-fixed { background: linear-gradient(145deg, #FBBF24, #D97706) !important; border-color: transparent !important; color: #fff !important; }
.q-dot.active.qp-rv-fixed { background: #FEF3C7 !important; border-color: #F59E0B !important; color: #B45309 !important; }