/* =============================================================================
   Викторины 2.0 — общие стили (ученик и учитель).
   Подключается после css/tgame.css: использует его токены и компоненты
   (.tg, .tg-btn, .tgd-card, .tgd-table, .tg-q, .tg-o-opt …).
   Здесь — элементы, которые выводит сервер (App_Code/QzQuestions.cs), и общие блоки.
   ============================================================================= */

.qz {
    --qz-c0: #e0503a;  /* цвета вариантов на экране ведущего и в распределении */
    --qz-c1: #2f7fd8;
    --qz-c2: #e3a224;
    --qz-c3: #2fa86a;
    --qz-c4: #8a4fd0;
    --qz-c5: #1fa5a0;
    --qz-ok: #1e7a46;
    --qz-ok-soft: #e8f5ec;
    --qz-bad: #a23b2b;
    --qz-bad-soft: #fdecea;
    --qz-warn-soft: #fdf5e2;
}

/* Буква варианта (А, Б, В…) */
.qz-letter {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 28px; height: 28px; margin-right: 10px; border-radius: 6px;
    font: 800 14px/1 "Nunito Sans", system-ui, sans-serif; color: #fff; background: #2f5578;
}
.tg-o-opt { display: flex; align-items: center; }
.tg-o-opt .qz-opt-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tg-o-opt.sel .qz-letter { background: #fff; color: #2f5578; }
.tg-o-opt.sel { background: #2f5578; color: #fff; border-color: #2f5578; }

/* Правильный ответ / ответ ученика */
.qz-ans-list { margin: 4px 0 0; padding-left: 22px; }
.qz-ans-list li { margin: 2px 0; }
.qz-muted { color: #8a7f72; }

/* Вопрос на экране ведущего (проектор) */
.qz-hostq-body { font-size: clamp(18px, 2.4vw, 30px); line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
.qz-hostq-body img { max-width: 100%; height: auto; }
.qz-hostq-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 18px; }
.qz-hostq-opt {
    display: flex; align-items: center; gap: 4px; padding: 14px 16px; border-radius: 10px;
    font: 700 clamp(15px, 1.6vw, 22px)/1.3 "Nunito Sans", system-ui, sans-serif; color: #fff;
}
.qz-hostq-opt .qz-letter { background: rgba(255, 255, 255, .25); color: #fff; }
.qz-c0 { background: var(--qz-c0, #e0503a); }
.qz-c1 { background: var(--qz-c1, #2f7fd8); }
.qz-c2 { background: var(--qz-c2, #e3a224); }
.qz-c3 { background: var(--qz-c3, #2fa86a); }
.qz-c4 { background: var(--qz-c4, #8a4fd0); }
.qz-c5 { background: var(--qz-c5, #1fa5a0); }
.qz-hostq-note { margin-top: 10px; font-size: 13px; color: #8a7f72; }
/* Вопрос банка на проекторе: поля ввода недоступны */
.qz-preview { pointer-events: none; }
.qz-preview .tg-q-body { font-size: clamp(18px, 2.2vw, 28px); font-weight: 700; line-height: 1.35; }
.qz-preview input, .qz-preview select, .qz-preview textarea, .qz-preview .tg-s-btns { display: none; }

/* Плашка режима */
.qz-mode {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font: 700 12.5px/1.4 "Nunito Sans", system-ui, sans-serif; color: #2f5578; background: #e9f0f8; white-space: nowrap;
}
.qz-mode-1 { color: #7b5a00; background: #fdf3d6; }
.qz-mode-2 { color: #1e7a46; background: #e8f5ec; }
.qz-mode-3 { color: #6a3f9e; background: #f1e9fa; }
.qz-mode-4 { color: #a23b2b; background: #fdecea; }

/* Оценка 2–5 */
.qz-grade {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px;
    font: 800 18px/1 "Nunito Sans", system-ui, sans-serif; color: #fff;
}
.qz-grade-5 { background: #1e7a46; }
.qz-grade-4 { background: #2f7fd8; }
.qz-grade-3 { background: #e3a224; }
.qz-grade-2 { background: #a23b2b; }

/* Горизонтальная полоса распределения ответов */
.qz-dist { display: flex; flex-direction: column; gap: 6px; }
.qz-dist-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 46px; gap: 10px; align-items: center; }
.qz-dist-bar { position: relative; height: 26px; border-radius: 6px; background: #efe8d6; overflow: hidden; }
.qz-dist-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: #b9c9da; transition: width .5s; }
.qz-dist-row.qz-right .qz-dist-fill { background: #2fa86a; }
.qz-dist-text { position: relative; z-index: 1; display: block; padding: 4px 10px; font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1a1612; }
.qz-dist-count { text-align: right; font: 600 14px/1 "IBM Plex Mono", ui-monospace, monospace; }
.qz-dist-row.qz-right .qz-letter { background: #1e7a46; }

/* Пустой экран без миграции */
.qz-setup { max-width: 640px; margin: 40px auto; padding: 22px; background: #fff; border: 1px solid #e6dcc2; border-left: 4px solid #e3a224; }
.qz-setup h2 { margin: 0 0 8px; font: 800 20px/1.2 "Nunito Sans", system-ui, sans-serif; }

/* =============================================================================
   Викторины 2.0 — страницы ученика: QzJoin, QzPlay (js/qz-play.js), QzMy, QzResult.
   Префикс .qzp-. Мобильный экран (от 360 px) — основной.
   ============================================================================= */

/* ---------- вход по PIN ---------- */
.qzp-join-mark { grid-template-columns: repeat(2, 22px); }
.qzp-join-mark span { width: 22px; height: 22px; border-radius: 5px; }
.qzp-join-note { margin: 14px 0 4px; padding: 10px 12px; text-align: left; font-size: 14px; background: #fdf5e2; border-left: 4px solid #e3a224; }
.qzp-join-hint { margin-top: 4px; text-align: left; font-size: 12.5px; color: #8a7f72; }
.qzp-join-foot { margin: 16px 0 0; font-size: 13px; color: #8a7f72; }
.qzp-join-foot a { display: inline-block; margin-top: 8px; font-weight: 700; color: #2f5578; }

/* ---------- каркас экрана ---------- */
.qzp { max-width: 780px; margin: 0 auto; padding: 14px 16px 56px; }
.qzp-app { position: relative; min-height: 50vh; }
.qzp-booting .qzp-top { visibility: hidden; }
.qzp-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }
.qzp-top-main { flex: 1 1 240px; min-width: 0; }
.qzp-title { font: 800 21px/1.2 "Nunito Sans", system-ui, sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.qzp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.qzp-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.qzp-meta-chip {
    display: inline-flex; align-items: center; gap: 2px; padding: 6px 12px; white-space: nowrap;
    font: 600 14px/1.2 "IBM Plex Mono", ui-monospace, monospace; color: #2f5578; background: #fff;
    border: 1px solid #e6dcc2; border-radius: 8px;
}
.qzp-meta-chip b { font-weight: 700; }
.qzp-meta-sub { font-family: "Nunito Sans", system-ui, sans-serif; color: #8a7f72; font-weight: 700; }
.qzp-meta-dl { color: #7b5a00; }
.qzp-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; white-space: nowrap;
    font: 700 12.5px/1.4 "Nunito Sans", system-ui, sans-serif; color: #4a423a; background: #fffdf8;
    border: 1px solid #e6dcc2; border-radius: 999px;
}
.qzp-offline .qzp-view { opacity: .75; }

.qzp-card { background: #fff; border: 1px solid #e6dcc2; border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.qzp-h2 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; font: 800 22px/1.25 "Nunito Sans", system-ui, sans-serif; }
.qzp-h3 { margin: 22px 0 8px; font: 800 13px/1 "Nunito Sans", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #8a7f72; }
.qzp-sub { margin: 0 0 14px; text-align: center; color: #8a7f72; font-size: 14px; }
.qzp-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: #8a7f72; }

/* кнопки */
.qzp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.qzp-actions > .tg-btn { flex: 1 1 auto; }
.qzp-actions-split > .tg-btn-ghost { flex: 0 1 auto; }
.qzp-actions-center { justify-content: center; }
.qzp-actions-center > .tg-btn { flex: 0 1 auto; }
.qzp-big { min-height: 52px; font-size: 17px; }
.qzp-link-btn {
    padding: 6px 4px; border: 0; background: none; cursor: pointer;
    font: 700 13px/1.3 "Nunito Sans", system-ui, sans-serif; color: #8a7f72;
}
.qzp-link-btn:hover { color: #a23b2b; }
.qzp-link-btn-warn { color: #a23b2b; }
.qzp-link-btn:disabled { opacity: .5; cursor: default; }
.qzp-q-foot { margin-top: 10px; text-align: center; }
.qzp-back { margin-top: 18px; font-size: 14px; font-weight: 700; }
.qzp-back a { color: #2f5578; }

/* ---------- экраны ожидания ---------- */
.qzp-hero { text-align: center; padding: 30px 18px; }
.qzp-hero h2 { margin: 10px 0 6px; font: 800 24px/1.25 "Nunito Sans", system-ui, sans-serif; }
.qzp-hero p { margin: 0 auto; max-width: 440px; color: #4a423a; }
.qzp-hero-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px;
    border-radius: 50%; font-size: 34px; color: #2f5578; background: #e9f0f8;
}
.qzp-hero-wait .qzp-hero-icon { animation: qzp-breathe 2.4s ease-in-out infinite; }
.qzp-hero-ok .qzp-hero-icon { color: #fff; background: #2fa86a; animation: qzp-pop .45s ease-out; }
.qzp-hero-bad .qzp-hero-icon { color: #fff; background: #a23b2b; }
.qzp-hero-none .qzp-hero-icon { color: #7b5a00; background: #fdf3d6; }
.qzp-hero .qzp-time { margin: 0 0 18px; }
.qzp-hero-extra { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.qzp-name { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-weight: 800; font-size: 17px; background: #fdf6e8; border: 1px solid #e6dcc2; border-radius: 999px; }
.qzp-lobby-count { color: #8a7f72; font-weight: 700; }
.qzp-lobby-count b { font-size: 22px; color: #2f5578; }

/* ---------- вопрос ---------- */
.qzp-q { padding: 16px 18px 18px; }
.qzp-q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.qzp-q-no { font: 800 14px/1.2 "Nunito Sans", sans-serif; color: #8a7f72; text-transform: uppercase; letter-spacing: .05em; }
.qzp-progress { margin-bottom: 12px; height: 6px; }
.qzp-q-body { font-size: 17px; overflow-x: auto; }
.qzp-q-body img { max-width: 100%; height: auto; }
.qzp-q-body .tg-q-body { font-size: 18px; font-weight: 700; line-height: 1.4; }
.qzp-fb-line { padding: 10px 0 0; min-height: 0; }
.qzp-fb-line:empty { padding: 0; }
.qzp-live .tg-o-opt { min-height: 58px; padding: 14px 16px; font-size: 17px; }
.qzp-live .qz-letter { width: 32px; height: 32px; font-size: 16px; }
.qzp-locked .qzp-q-body { pointer-events: none; opacity: .65; }

/* таймер */
.qzp-time { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qzp-time-track { flex: 1 1 auto; height: 10px; overflow: hidden; background: #efe8d6; border-radius: 5px; }
.qzp-time-track i { display: block; height: 100%; width: 100%; background: #2f5578; border-radius: 5px; transition: width .25s linear; }
.qzp-time-text { min-width: 44px; text-align: right; font: 600 17px/1 "IBM Plex Mono", ui-monospace, monospace; color: #2f5578; }
.qzp-time-low .qzp-time-track i { background: #e0503a; }
.qzp-time-low .qzp-time-text { color: #a23b2b; animation: tg-blink 1s steps(2) infinite; }

/* пауза */
.qzp-pause {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10040;
    display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(26, 22, 18, .55);
}
.qzp-pause[hidden] { display: none !important; }
.qzp-pause-box {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 30px; max-width: 320px; text-align: center;
    background: #fff; border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, .3); color: #1a1612;
}
.qzp-pause-box i { font-size: 32px; color: #2f5578; }
.qzp-pause-box b { font: 800 22px/1.2 "Nunito Sans", sans-serif; }
.qzp-pause-box span { color: #8a7f72; }

/* ---------- показ ответа (с ведущим) ---------- */
.qzp-verdict {
    display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; padding: 26px 16px;
    text-align: center; color: #fff; border-radius: 14px; animation: qzp-pop .4s ease-out;
}
.qzp-verdict-ok { background: #1e7a46; }
.qzp-verdict-part { background: #b07a00; }
.qzp-verdict-bad { background: #a23b2b; }
.qzp-verdict-none { background: #6f665b; }
.qzp-verdict-icon { font-size: 40px; line-height: 1; }
.qzp-verdict-title { font: 800 30px/1.15 "Nunito Sans", system-ui, sans-serif; }
.qzp-verdict-text { font: 600 18px/1.3 "IBM Plex Mono", ui-monospace, monospace; opacity: .95; }
.qzp-streak {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 14px;
    font-weight: 800; color: #7b3a00; background: #ffe2a8; border-radius: 999px;
}
.qzp-streak i { color: #e0503a; }

.qzp-sec { padding: 10px 0; border-top: 1px solid #efe8d6; }
.qzp-sec:first-child { border-top: 0; padding-top: 0; }
.qzp-sec-label { margin-bottom: 4px; font: 800 12px/1 "Nunito Sans", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #8a7f72; }
.qzp-sec-body { overflow-wrap: anywhere; overflow-x: auto; }
.qzp-sec-body img { max-width: 100%; height: auto; }
.qzp-sec-right .qzp-sec-label { color: #1e7a46; }
.qzp-sec-right .qzp-sec-body { padding: 8px 10px; background: #e8f5ec; border-radius: 6px; }
.qzp-place-line { padding-top: 10px; border-top: 1px solid #efe8d6; font-size: 15px; }
.qzp-place-line i { color: #e3a224; }

/* ---------- рейтинг ---------- */
.qzp-board { list-style: none; margin: 0; padding: 0; }
.qzp-board-row {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
    padding: 10px 8px; border-bottom: 1px solid #efe8d6; font-size: 16px;
}
.qzp-board-me { background: #eef4fb; border-radius: 8px; font-weight: 800; }
.qzp-board-place { font-weight: 800; color: #8a7f72; text-align: right; }
.qzp-board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qzp-board-val { font: 600 15px/1 "IBM Plex Mono", ui-monospace, monospace; color: #2f5578; }
.qzp-board-gain { font: 600 13px/1 "IBM Plex Mono", ui-monospace, monospace; color: #1e7a46; text-align: right; }
.qzp-board-gap { padding: 2px 0; text-align: center; color: #8a7f72; letter-spacing: .3em; }
.qzp-board-card .qzp-h2 i, .qzp-final-icon { color: #e3a224; }

/* ---------- пьедестал ---------- */
.qzp-final { text-align: center; }
.qzp-final-icon { font-size: 44px; margin-bottom: 4px; }
.qzp-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 18px 0 8px; }
.qzp-pod { flex: 0 1 140px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; animation: qzp-rise .6s ease-out both; }
.qzp-pod-2 { animation-delay: .15s; }
.qzp-pod-3 { animation-delay: .3s; }
.qzp-pod-name { padding: 0 4px; font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qzp-pod-val { margin-bottom: 6px; font: 600 13px/1.2 "IBM Plex Mono", ui-monospace, monospace; color: #8a7f72; }
.qzp-pod-block {
    display: flex; align-items: flex-start; justify-content: center; padding-top: 10px;
    border-radius: 10px 10px 0 0; color: #fff; font: 800 30px/1 "Nunito Sans", sans-serif;
}
.qzp-pod-1 .qzp-pod-block { height: 120px; background: #e3a224; }
.qzp-pod-2 .qzp-pod-block { height: 88px; background: #9aa7b4; }
.qzp-pod-3 .qzp-pod-block { height: 64px; background: #c07a4a; }
.qzp-pod-me .qzp-pod-name { color: #2f5578; }
.qzp-pod-me .qzp-pod-block { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7); }
.qzp-board-rest { max-width: 420px; margin: 0 auto; text-align: left; }
.qzp-final-me { margin-top: 18px; font-size: 18px; }
.qzp-final-me b { font-size: 26px; color: #2f5578; }
.qzp-final-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 6px; color: #4a423a; font-weight: 700; }
.qzp-final-stats i { color: #8a7f72; }

/* ---------- вступление (самостоятельно) ---------- */
.qzp-intro { text-align: center; }
.qzp-intro-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 8px;
    border-radius: 16px; font-size: 28px; color: #2f5578; background: #e9f0f8;
}
.qzp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 6px; text-align: left; }
.qzp-fact { padding: 10px 12px; background: #fffdf8; border: 1px solid #efe8d6; border-radius: 8px; }
.qzp-fact-label { font-size: 12px; font-weight: 700; color: #8a7f72; }
.qzp-fact-label i { width: 14px; text-align: center; }
.qzp-fact-val { margin-top: 2px; font-weight: 800; font-size: 15px; }
.qzp-fact-sub { font-weight: 600; font-size: 12.5px; color: #7b5a00; }
.qzp-intro .tg-label { margin-top: 18px; }
.qzp-name-input { font-size: 18px; height: auto; padding: 10px 12px; }
.qzp-notice {
    display: block; margin: 14px 0; padding: 12px 14px; text-align: left; font-weight: 600; font-size: 14.5px;
    background: #fdf5e2; border-left: 4px solid #e3a224; border-radius: 4px;
}
.qzp-notice i { margin-right: 4px; }
.qzp-notice-info { background: #eef4fb; border-color: #2f5578; }
.qzp-notice-bad { background: #fdecea; border-color: #a23b2b; }

.qzp-hist { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.qzp-hist-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px;
    color: #1a1612; background: #fff; border: 1px solid #e6dcc2; border-radius: 8px; text-decoration: none;
}
.qzp-hist-row:hover { border-color: #3f8eff; text-decoration: none; color: #1a1612; }
.qzp-hist-no { font: 600 13px/1 "IBM Plex Mono", ui-monospace, monospace; color: #8a7f72; }
.qzp-hist-main b { margin-right: 8px; font-size: 16px; color: #2f5578; }
.qzp-hist-sub { font-size: 12.5px; color: #8a7f72; }
.qzp-hist-go { font-size: 13px; font-weight: 700; color: #2f5578; white-space: nowrap; }

/* ---------- обратная связь после ответа ---------- */
.qzp-fb { margin-top: 14px; padding: 12px 14px; border-radius: 10px; animation: qzp-pop .35s ease-out; }
.qzp-fb-ok { background: #e8f5ec; border: 1px solid #b7dfc5; }
.qzp-fb-part { background: #fdf5e2; border: 1px solid #f0d9a0; }
.qzp-fb-bad { background: #fdecea; border: 1px solid #f0c2b9; }
.qzp-fb-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 17px; }
.qzp-fb-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff;
}
.qzp-fb-ok .qzp-fb-icon { background: #1e7a46; }
.qzp-fb-part .qzp-fb-icon { background: #b07a00; }
.qzp-fb-bad .qzp-fb-icon { background: #a23b2b; }
.qzp-fb-pts { margin-left: auto; font: 600 15px/1 "IBM Plex Mono", ui-monospace, monospace; }
.qzp-fb .qzp-sec { margin-top: 10px; padding-bottom: 0; border-top-color: rgba(0, 0, 0, .08); }

/* ---------- «Мои викторины» ---------- */
.qzp-pinbox { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: #fff; border: 1px solid #e6dcc2; border-radius: 10px; }
.qzp-pinbox-label { margin: 0; font-weight: 800; font-size: 14px; }
.qzp-pinbox-input { width: 130px !important; font: 600 20px/1.2 "IBM Plex Mono", ui-monospace, monospace !important; letter-spacing: .15em; text-align: center; height: auto !important; }
.qzp-guest p { margin: 0 0 14px; color: #4a423a; }
.qzp-tabs { overflow-x: auto; }
.qzp-tabs .tgd-tab { white-space: nowrap; }
.qzp-tab-count {
    display: inline-block; min-width: 20px; margin-left: 4px; padding: 1px 6px; text-align: center;
    font-size: 12px; font-weight: 800; color: #4a423a; background: #efe8d6; border-radius: 999px;
}
.qzp-tab-hot { color: #fff; background: #e0503a; }
.qzp-row-urgent { background: #fffaf0; }
.qzp-st {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; white-space: nowrap;
    font-size: 12.5px; font-weight: 800; border-radius: 999px;
}
.qzp-st-open { color: #24425e; background: #e9f0f8; }
.qzp-st-progress { color: #7b5a00; background: #fdf3d6; }
.qzp-st-done { color: #1e7a46; background: #e8f5ec; }
.qzp-st-late { color: #a23b2b; background: #fdecea; }
.qzp-st-soon { color: #6a3f9e; background: #f1e9fa; }
.qzp-urgent { color: #a23b2b; border-color: #f0c2b9; font-weight: 700; }
.qzp-dl-chip { white-space: normal; }
.qzp-grade-sm { width: 28px; height: 28px; font-size: 15px; border-radius: 6px; }
.qzp-my .tgd-row-meta .qz-mode { padding: 1px 8px; font-size: 11.5px; }

/* ---------- результат ---------- */
.qzp-score { padding: 22px 18px; }
.qzp-score-main { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 26px; }
.qzp-ring {
    --p: 0; position: relative; width: 140px; height: 140px; flex: 0 0 auto; border-radius: 50%;
    background: conic-gradient(var(--qzp-ring, #2f5578) calc(var(--p) * 1%), #efe8d6 0);
}
.qzp-ring-5 { --qzp-ring: #1e7a46; }
.qzp-ring-4 { --qzp-ring: #2f7fd8; }
.qzp-ring-3 { --qzp-ring: #e3a224; }
.qzp-ring-2 { --qzp-ring: #a23b2b; }
.qzp-ring-in {
    position: absolute; top: 12px; right: 12px; bottom: 12px; left: 12px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; background: #fff; border-radius: 50%;
}
.qzp-ring-in b { font: 800 28px/1 "Nunito Sans", system-ui, sans-serif; }
.qzp-ring-in span { margin-top: 2px; font-size: 12px; color: #8a7f72; }
.qzp-score-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qzp-score-grade { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.qzp-score-pts { font: 600 16px/1.3 "IBM Plex Mono", ui-monospace, monospace; color: #4a423a; }
.qzp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 18px; }
.qzp-stat { padding: 10px 12px; text-align: center; background: #fffdf8; border: 1px solid #efe8d6; border-radius: 8px; }
.qzp-stat b { display: block; font: 800 19px/1.2 "Nunito Sans", sans-serif; color: #2f5578; }
.qzp-stat span { font-size: 12.5px; color: #8a7f72; }
.qzp-res-actions { margin: 0 0 18px; }
.qzp-review .qzp-h2 { justify-content: flex-start; margin: 22px 0 12px; font-size: 19px; }

.qzp-ans { margin-bottom: 10px; padding: 14px 16px; background: #fff; border: 1px solid #e6dcc2; border-left-width: 5px; border-radius: 8px; }
.qzp-ans-ok { border-left-color: #2fa86a; }
.qzp-ans-part { border-left-color: #e3a224; }
.qzp-ans-bad { border-left-color: #e0503a; }
.qzp-ans-skip { border-left-color: #c9bfae; }
.qzp-ans-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; font-size: 13.5px; }
.qzp-ans-no {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px;
    font-weight: 800; color: #fff; background: #2f5578; border-radius: 6px;
}
.qzp-ans-mark { font-weight: 800; }
.qzp-ans-ok .qzp-ans-mark { color: #1e7a46; }
.qzp-ans-part .qzp-ans-mark { color: #9a6a00; }
.qzp-ans-bad .qzp-ans-mark { color: #a23b2b; }
.qzp-ans-skip .qzp-ans-mark { color: #8a7f72; }
.qzp-ans-pts { margin-left: auto; font: 600 13px/1 "IBM Plex Mono", ui-monospace, monospace; }
.qzp-ans-time { font-size: 12.5px; color: #8a7f72; }
.qzp-ans-body { overflow-wrap: anywhere; overflow-x: auto; }
.qzp-ans-body img { max-width: 100%; height: auto; }
.qzp-ans-line { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #efe8d6; }
.qzp-ans-label { font-size: 12.5px; font-weight: 800; color: #8a7f72; }
.qzp-ans-val { overflow-wrap: anywhere; }
.qzp-ans-right .qzp-ans-label { color: #1e7a46; }
.qzp-ans-right .qzp-ans-val { padding: 4px 8px; background: #e8f5ec; border-radius: 4px; }

/* ---------- анимации ---------- */
@keyframes qzp-pop { 0% { transform: scale(.92); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); } }
@keyframes qzp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes qzp-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .qzp-hero-icon, .qzp-verdict, .qzp-pod, .qzp-fb, .qzp-time-low .qzp-time-text { animation: none !important; }
    .qzp-time-track i { transition: none; }
}

/* ---------- адаптив ---------- */
@media (max-width: 560px) {
    .qzp { padding: 10px 10px 48px; }
    .qzp-card { padding: 14px; border-radius: 10px; }
    .qzp-title { font-size: 18px; }
    .qzp-q-body .tg-q-body { font-size: 17px; }
    .qzp-actions-split .tg-btn { padding: 10px 12px; }
    .qzp-verdict-title { font-size: 26px; }
    .qzp-pod-1 .qzp-pod-block { height: 96px; }
    .qzp-pod-2 .qzp-pod-block { height: 70px; }
    .qzp-pod-3 .qzp-pod-block { height: 52px; }
    .qzp-pod-name { font-size: 13px; }
    .qzp-ans-line { grid-template-columns: minmax(0, 1fr); }
    .qzp-ring { width: 120px; height: 120px; }
    .qzp-ring-in b { font-size: 24px; }
    .qzp-pinbox { width: 100%; }
    .qzp-pinbox-input { flex: 1 1 110px; width: auto !important; }
}

/* =============================================================================
   Викторины 2.0 — страницы учителя: список, запуск, итоги (.qzt-*)
   ============================================================================= */
.qzt .tgd-head-t .qz-mode { margin-bottom: 6px; }
.qzt-nowrap { white-space: nowrap; }
.qzt-acts-right { justify-content: flex-end; flex-wrap: nowrap; }

/* блок «Сейчас идут и открыты» */
.qzt-active { border-left: 4px solid var(--tg-navy); }
.qzt-active-list { border-top: 1px solid var(--tg-line); }
.qzt-active-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 18px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--tg-line); }
.qzt-active-row:last-child { border-bottom: 0; }
.qzt-active-main { min-width: 0; }
.qzt-active-name { margin-left: 8px; font-weight: 800; font-size: 15.5px; overflow-wrap: anywhere; }
.qzt-active-count { text-align: right; line-height: 1.15; }
.qzt-active-count b { display: block; font: 800 20px/1.1 "Nunito Sans", system-ui, sans-serif; color: var(--tg-navy); }
.qzt-active-count span { font-size: 12px; color: var(--tg-mute); }
.qzt-pin { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--tg-ink); }
.qzt-chip-practice { color: #a23b2b; border-color: #f0c2b9; background: #fdf3f1; }

/* запуск */
.qzt-modes { margin-bottom: 18px; }
.qzt-modes .tgd-mech b i { width: 18px; color: var(--tg-navy); }
.qzt-settings { padding: 16px; background: var(--tg-cream); border: 1px solid var(--tg-line); border-radius: 8px; }
.qzt-settings > .tgd-grid + .tgd-grid { margin-top: 14px; }
.qzt-settings .form-control { max-width: 100%; }
.qzt-optional { font-weight: 600; color: var(--tg-mute); }
.qzt-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 2px 18px; margin-top: 14px; }
.qzt-checks .tgd-check span { display: flex; align-items: flex-start; gap: 8px; }
.qzt-checks .tgd-check input { margin-top: 4px; flex: 0 0 auto; }
.qzt-mode-note { margin-top: 14px; padding: 10px 12px; font-size: 13.5px; color: var(--tg-ink-soft); background: #fff; border-left: 3px solid var(--tg-navy); }
.qzt-mode-note i { color: var(--tg-navy); margin-right: 4px; }
.qzt-disabled { opacity: .5; pointer-events: none; }
.qzt-server-time { grid-column: 1 / -1; margin-top: -4px; }
.qzt-deleted { display: inline-block; margin-left: 8px; padding: 2px 9px; vertical-align: middle; font-size: 12.5px; font-weight: 700; color: var(--tg-danger); background: #fdecea; border-radius: 999px; }
.qzh-server-time { margin-top: 6px; }
.qzt-lead { margin: -6px 0 14px; font-size: 13.5px; }
.qzt-on { color: var(--tg-ok); font-weight: 800; }

/* запуски */
.qzt-run { display: inline-block; padding: 2px 9px; font-size: 12px; font-weight: 700; border-radius: 999px; white-space: nowrap; background: #efe8d6; color: var(--tg-ink-soft); }
.qzt-run-live { background: #e8f5ec; color: var(--tg-ok); }
.qzt-run-open { background: #e9f0f8; color: var(--tg-navy); }
.qzt-run-wait { background: #fdf5e2; color: var(--tg-warn); }
.qzt-run-stale { background: #f3efe6; color: var(--tg-mute); }

/* участники */
.qzt-people td { white-space: nowrap; }
.qzt-people td:nth-child(2) { white-space: normal; min-width: 160px; }
.qzt-status { display: inline-block; padding: 2px 9px; font-size: 12px; font-weight: 700; border-radius: 999px; background: #efe8d6; color: var(--tg-ink-soft); }
.qzt-status-finished { background: #e8f5ec; color: var(--tg-ok); }
.qzt-status-progress { background: #e9f0f8; color: var(--tg-navy); }
.qzt-status-lobby { background: #fdf5e2; color: var(--tg-warn); }
.qzt-st-none td { color: var(--tg-mute); }
.qzt-people .qz-grade { width: 28px; height: 28px; font-size: 15px; }

/* вопросы */
.qzt-qstats { border-top: 1px solid var(--tg-line); }
.qzt-qstat { padding: 14px 4px; border-bottom: 1px solid var(--tg-line); }
.qzt-qstat-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) 220px; gap: 12px; align-items: center; }
.qzt-qnum {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
    font: 800 14px/1 "Nunito Sans", system-ui, sans-serif; color: var(--tg-navy); background: #e9f0f8;
}
.qzt-qstat-title { min-width: 0; overflow-wrap: anywhere; }
.qzt-qstat-title .tgd-qtype { margin-right: 6px; }
.qzt-qstat-pct { font-size: 13px; white-space: nowrap; }
.qzt-pct-ok i { background: var(--tg-ok); }
.qzt-pct-mid i { background: #e3a224; }
.qzt-pct-bad i { background: var(--tg-danger); }
.qzt-noanswers { color: var(--tg-mute); font-size: 13px; }
.qzt-dist { margin: 10px 0 0 46px; max-width: 640px; }

/* ответы участника */
.qzt-grade-big { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.qzt-grade-big .qz-grade { width: 46px; height: 46px; font-size: 24px; border-radius: 10px; }
.qzt-attempts { align-items: center; margin-bottom: 14px; }
.qzt-attempts a.tgd-chip { text-decoration: none; color: var(--tg-navy); }
.qzt-attempts a.tgd-chip:hover { border-color: var(--tg-accent); }
.qzt-attempt-current { background: var(--tg-navy); border-color: var(--tg-navy); color: #fff; font-weight: 700; }
.qzt-attempts-label { font-size: 13px; font-weight: 700; color: var(--tg-mute); }
.qzt-answer { border-left: 4px solid var(--tg-line); }
.qzt-answer-ok { border-left-color: #2fa86a; }
.qzt-answer-part { border-left-color: #e3a224; }
.qzt-answer-bad { border-left-color: #e0503a; }
.qzt-answer-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 13.5px; }
.qzt-answer-mark { font-weight: 800; }
.qzt-answer-ok .qzt-answer-mark { color: var(--tg-ok); }
.qzt-answer-part .qzt-answer-mark { color: var(--tg-warn); }
.qzt-answer-bad .qzt-answer-mark { color: var(--tg-danger); }
.qzt-answer-none .qzt-answer-mark { color: var(--tg-mute); }
.qzt-answer-points { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.qzt-answer-time { color: var(--tg-mute); }
.qzt-answer-body { font-size: 15px; overflow-wrap: anywhere; }
.qzt-answer-body img { max-width: 100%; height: auto; }
.qzt-answer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--tg-line); }
.qzt-answer-given, .qzt-answer-right { overflow-wrap: anywhere; }
.qzt-answer-right { color: var(--tg-ok); font-weight: 600; }
.qzt-answer-bad .qzt-answer-given { color: var(--tg-danger); }

@media (max-width: 760px) {
    .qzt-active-row { grid-template-columns: minmax(0, 1fr); }
    .qzt-active-count { text-align: left; }
    .qzt-qstat-head { grid-template-columns: 34px minmax(0, 1fr); }
    .qzt-qstat-pct { grid-column: 2; }
    .qzt-dist { margin-left: 0; }
}

/* =============================================================================
   Викторины 2.0 — экран запуска (teacher/QzHost.aspx, js/qz-host.js) (.qzh-*)
   Крупно и контрастно: экран часто стоит на проекторе.
   ============================================================================= */
.qzh-bar { align-items: center; }
.qzh-head { flex: 1 1 280px; min-width: 0; }
.qzh-title { margin: 6px 0 2px; font: 800 clamp(20px, 2.4vw, 28px)/1.2 "Nunito Sans", system-ui, sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.qzh-sub { font-size: 13.5px; color: var(--tg-mute); }
.qzh-pinbox { flex-wrap: wrap; min-width: 0; }
.qzh-pinbox > div { min-width: 0; }
.qzh-pinbox .tg-join-url { overflow-wrap: anywhere; }
.qzh-pinbox .tg-pin-big { font-size: clamp(40px, 5vw, 64px); }
.qzh-pinbox.tg-pinbox-compact .tg-pin-big { font-size: 30px; }
.qzh-linkbox { flex: 1 1 340px; min-width: 0; }
.qzh-linkbox .form-control { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; }
.qzh-linkbox .tg-pin-label { display: block; margin-bottom: 6px; }

.qzh-app:not(.qzh-booting) .qzh-boot { display: none; }
.qzh-booting .qzh-stage { display: none; }
.qzh-busy .tg-btn { opacity: .7; cursor: progress; }

.qzh-card { padding: clamp(14px, 2vw, 24px); margin-bottom: 16px; background: #fff; border: 1px solid var(--tg-line); border-radius: 10px; }
.qzh-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 clamp(18px, 2vw, 24px)/1.2 "Nunito Sans", system-ui, sans-serif; }
.qzh-card h2 i { color: var(--tg-navy); }
.qzh-lead { margin: -4px 0 12px; color: var(--tg-ink-soft); }
.qzh-empty { padding: 14px 4px; color: var(--tg-mute); font-size: 14px; }
.qzh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.qzh-actions-center { justify-content: center; }
.qzh-btn-big { padding: 14px 26px; font-size: clamp(16px, 1.6vw, 20px); }
.qzh-btn-finish { color: var(--tg-danger); }
.qzh-btn-finish:hover { border-color: #e9b7ad; }
.qzh-settings { margin-top: 14px; }
.qzh-settings i { color: var(--tg-navy); }

/* лобби */
.qzh-lobby-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.qzh-lobby-count { font-size: clamp(18px, 2vw, 24px); font-weight: 700; }
.qzh-lobby-count b { font-size: clamp(36px, 4.5vw, 56px); line-height: 1; color: var(--tg-navy); }
.qzh-lobby-hint { color: var(--tg-mute); }
.qzh-chips { gap: 8px; min-height: 40px; }
.qzh-chip { font-size: clamp(14px, 1.4vw, 17px); padding: 6px 6px 6px 12px; }
.qzh-chip.qzh-new { animation: tg-in .25s ease-out; }
.qzh-chip-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qzh-chip .tg-kick { font-size: 16px; }
.qzh-off { opacity: .55; }
.qzh-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #c9bfae; flex: 0 0 auto; vertical-align: middle; }
.qzh-dot-on { background: #2fa86a; }

/* вопрос */
.qzh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.qzh-main { min-width: 0; }
.qzh-qtop { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.qzh-qnum { flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: clamp(15px, 1.5vw, 19px); }
.qzh-qnum b { font-weight: 800; }
.qzh-qpts { color: var(--tg-mute); font-size: 14px; }
.qzh-timer { font-size: clamp(30px, 4vw, 52px); padding: 8px 16px; min-width: 120px; text-align: center; }
.qzh-timer-paused { color: var(--tg-mute); }
.qzh-q { font-size: clamp(16px, 1.6vw, 20px); overflow-wrap: anywhere; }
.qzh-q img { max-width: 100%; height: auto; }
.qzh-q .qz-hostq-body { margin-bottom: 4px; }
.qzh-q-small .qz-hostq-body, .qzh-q-small .qz-preview .tg-q-body { font-size: clamp(16px, 1.7vw, 22px); }
.qzh-q-small .qz-hostq-opts { margin-top: 10px; gap: 6px; }
.qzh-q-small .qz-hostq-opt { padding: 8px 12px; font-size: clamp(13px, 1.3vw, 17px); }
.qzh-progress { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-weight: 700; font-size: clamp(15px, 1.5vw, 19px); }
.qzh-progress-bar { flex: 1 1 auto; height: 12px; overflow: hidden; background: #efe8d6; border-radius: 6px; }
.qzh-progress-bar i { display: block; width: 0; height: 100%; background: var(--tg-navy); transition: width .4s; }
.qzh-paused-note { display: none; margin-top: 12px; padding: 10px 14px; font-weight: 700; color: var(--tg-warn); background: #fdf5e2; border-left: 4px solid #e3a224; }

.qzh-side { position: sticky; top: 12px; padding: 12px; background: #fff; border: 1px solid var(--tg-line); border-radius: 10px; max-height: calc(100vh - 24px); overflow: auto; }
.qzh-side h3 { margin: 0 0 8px; font: 800 12.5px/1 "Nunito Sans", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--tg-mute); }
.qzh-plist { list-style: none; margin: 0; padding: 0; }
.qzh-prow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 18px; gap: 6px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--tg-line); font-size: 14px; }
.qzh-prow:last-child { border-bottom: 0; }
.qzh-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qzh-prate { font: 600 12.5px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--tg-mute); }
.qzh-place { font-weight: 800; color: var(--tg-mute); text-align: right; }
.qzh-mark { color: #c9bfae; text-align: center; }
.qzh-mark-ok { color: var(--tg-ok); }
.qzh-prow .tg-kick { font-size: 16px; padding: 0; }

/* показ ответа */
.qzh-correct { margin: 16px 0; padding: 12px 16px; background: #e8f5ec; border-left: 4px solid #2fa86a; border-radius: 4px; }
.qzh-correct-label { margin-bottom: 4px; font-weight: 800; color: var(--tg-ok); }
.qzh-correct-body { font-size: clamp(16px, 1.8vw, 22px); font-weight: 700; overflow-wrap: anywhere; }
.qzh-dist .qz-dist-bar { height: clamp(28px, 3vw, 40px); }
.qzh-dist .qz-dist-text { padding: 6px 12px; font-size: clamp(13px, 1.4vw, 17px); }
.qzh-dist .qz-dist-count { font-size: clamp(14px, 1.6vw, 20px); }
.qzh-dist .qz-dist-row { grid-template-columns: 36px minmax(0, 1fr) 54px; }
.qzh-reveal-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; color: var(--tg-ink-soft); font-size: 15px; }
.qzh-reveal-stats b { color: var(--tg-ok); font-size: 18px; }
.qzh-auto { margin-top: 8px; min-height: 18px; font-size: 13px; color: var(--tg-mute); }

/* рейтинг */
.qzh-btable { font-size: clamp(15px, 1.5vw, 19px); }
.qzh-btable td { padding: 10px 8px; }
.qzh-bplace { width: 60px; font-weight: 800; text-align: center; color: var(--tg-mute); }
.qzh-bname { font-weight: 700; overflow-wrap: anywhere; }
.qzh-brate { font-weight: 700; color: var(--tg-navy); }
.qzh-bdelta { color: var(--tg-ok); font-weight: 700; }
.qzh-top1 .qzh-bplace { color: #c8920a; }
.qzh-top2 .qzh-bplace { color: #8a96a3; }
.qzh-top3 .qzh-bplace { color: #a86a3d; }
.qzh-top1 td { background: #fffaf0; }

/* пьедестал */
.qzh-final-head { text-align: center; }
.qzh-final-head h2 { justify-content: center; margin: 6px 0 18px; }
.qzh-podium { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 2vw, 22px); margin: 0 auto 22px; max-width: 760px; }
.qzh-pod { flex: 1 1 0; min-width: 0; max-width: 230px; text-align: center; animation: tg-in .5s ease-out both; }
.qzh-pod-name { font: 800 clamp(15px, 1.8vw, 22px)/1.2 "Nunito Sans", system-ui, sans-serif; overflow-wrap: anywhere; }
.qzh-pod-score { margin: 2px 0 8px; font: 600 clamp(12px, 1.2vw, 15px)/1.2 "IBM Plex Mono", ui-monospace, monospace; color: var(--tg-mute); }
.qzh-pod-block { display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; border-radius: 8px 8px 0 0; color: #fff; font: 800 clamp(26px, 3.5vw, 44px)/1 "Nunito Sans", system-ui, sans-serif; }
.qzh-pod-1 .qzh-pod-block { height: clamp(110px, 16vw, 170px); background: #e3a224; }
.qzh-pod-2 .qzh-pod-block { height: clamp(80px, 11vw, 120px); background: #8a96a3; }
.qzh-pod-3 .qzh-pod-block { height: clamp(60px, 8vw, 90px); background: #a86a3d; }
.qzh-pod-1 { animation-delay: .35s; }
.qzh-pod-3 { animation-delay: .15s; }

/* свободно, ДЗ, по ссылке */
.qzh-stat-ok b { color: var(--tg-ok); }
.qzh-stat-warn b { color: var(--tg-warn); }
.qzh-rtable td { vertical-align: middle; }
.qzh-rname { font-weight: 700; overflow-wrap: anywhere; }
.qzh-rdate { white-space: nowrap; font-size: 13px; color: var(--tg-mute); }
.qzh-racts { white-space: nowrap; text-align: right; }
.qzh-racts .tgd-act { padding: 5px 9px; }
.qzh-r-none td { color: var(--tg-mute); }
.qzh-st { display: inline-block; margin-right: 4px; padding: 2px 9px; font-size: 12px; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.qzh-st-ok { background: #e8f5ec; color: var(--tg-ok); }
.qzh-st-go { background: #e9f0f8; color: var(--tg-navy); }
.qzh-st-wait { background: #fdf5e2; color: var(--tg-warn); }
.qzh-st-none { background: #f3efe6; color: var(--tg-mute); }
.qzh-rowprog { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.qzh-rowprog-bar { flex: 1 1 auto; height: 6px; overflow: hidden; background: #efe8d6; border-radius: 3px; }
.qzh-rowprog-bar i { display: block; height: 100%; background: var(--tg-navy); transition: width .4s; }
.qzh-rowprog-text { font: 600 12.5px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--tg-mute); }
.qzh-deadline { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; }
.qzh-deadline-date { margin-top: 4px; font: 700 clamp(20px, 2.4vw, 28px)/1.2 "IBM Plex Mono", ui-monospace, monospace; color: var(--tg-navy); }
.qzh-deadline-left { display: block; margin-top: 4px; font-weight: 700; color: var(--tg-ink-soft); }
.qzh-opens { margin-top: 2px; font-size: 13px; color: var(--tg-warn); font-weight: 600; }
.qzh-deadline-form { flex: 0 1 420px; min-width: 0; }
.qzh-deadline-form .tgd-inline { flex-wrap: wrap; }
.qzh-deadline-form .form-control { flex: 1 1 200px; }
.qzh-deadline-form .qzh-btn-finish { margin-top: 10px; }
.qzh-ended .qzh-pinbox { opacity: .45; }

@media (max-width: 920px) {
    .qzh-grid { grid-template-columns: minmax(0, 1fr); }
    .qzh-side { position: static; max-height: none; }
}
@media (max-width: 520px) {
    .qzh-actions .tg-btn { flex: 1 1 auto; }
    .qzh-pinbox { gap: 12px; }
    .qzh-timer { min-width: 0; }
    .qzh-podium { gap: 6px; }
    .qzh-rtable th:nth-child(3), .qzh-rtable td:nth-child(3) { display: none; }
    .qzh-linkbox .tgd-inline { flex-wrap: wrap; }
}

/* =============================================================================
   Викторины с ИИ: вход в мастер (список викторин) и показ ответов интерактивных вопросов
   ============================================================================= */
.qzt-ai { margin-top: 14px; }
.qzt-ai-link {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px;
    color: var(--tg-ink); text-decoration: none; background: linear-gradient(90deg, #f4f0fe, #fff 70%);
    border: 1px solid #d9cff6; border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
.qzt-ai-link:hover { color: var(--tg-ink); text-decoration: none; border-color: #6b4fd0; box-shadow: 0 2px 10px rgba(107, 79, 208, .15); }
.qzt-ai-link:focus { color: var(--tg-ink); text-decoration: none; border-color: #6b4fd0; box-shadow: 0 0 0 3px rgba(107, 79, 208, .3); outline: 0; }
.qzt-ai-ico { display: grid; place-items: center; width: 44px; height: 44px; font-size: 19px; color: #fff; background: #6b4fd0; border-radius: 12px; }
.qzt-ai-text b { display: block; font-size: 16px; }
.qzt-ai-text small { display: block; margin-top: 2px; font-size: 13px; color: var(--tg-ink-soft); }
.qzt-ai-go { color: #6b4fd0; }

/* Ответ интерактивного вопроса (QzInteractiveKey) и код в тексте вопроса */
.qz-ans-seq { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.qz-ans-seq span { padding: 1px 7px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .95em; background: #f4efe3; border-radius: 4px; }
.qz-blank { padding: 0 6px; color: var(--tg-ok, #1e7a46); background: #e8f5ec; border-radius: 4px; }
.qz-code { margin: 8px 0; padding: 10px 12px; font: 13.5px/1.5 "IBM Plex Mono", ui-monospace, monospace; color: #e8eef5; background: #1f2a36; border-radius: 6px; overflow-x: auto; white-space: pre; text-align: left; }
.qz-code code { padding: 0; color: inherit; background: none; }