/* ============================================================
   2P_BOT — «Квиз-доска»: пакеты, запуск, пульт ведущего, история.
   Страница — .gw.qb: переменные, поля, кнопки и вкладки берёт у «Розыгрышей»
   (giveaways.css), здесь только своё. Все классы с префиксом qb- .
   ============================================================ */

.qb {
    --qb-board-cell: #1c1733;
    --qb-board-cell-2: #161229;
    --qb-board-line: rgba(145, 70, 255, 0.24);
    --qb-gold: #fbbf24;
}

.qb-ico { width: 16px; height: 16px; flex-shrink: 0; }
.qb [hidden] { display: none !important; }

/* ---------- Мелочи ---------- */
.qb-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qb-row-gap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qb-spacer { flex: 1; }
.qb-muted { color: var(--g-fg-3); font-size: 0.8125rem; display: inline-flex; align-items: center; gap: 6px; }
.qb-muted .qb-ico { width: 14px; height: 14px; }
.qb-ok { color: var(--g-ok) !important; }
.qb-err { color: var(--g-err) !important; }
.qb-gold { color: var(--qb-gold); }
.qb-optional { color: var(--g-fg-3); font-weight: 400; margin-left: 4px; }
.qb-self-start { align-self: flex-start; }
.qb-self-end { align-self: flex-end; }
.qb-sel-inline { width: 210px; flex-shrink: 0; }
.qb-input-wide { width: 110px; }
.qb-tag-btn { border: none; cursor: pointer; font-family: inherit; }

.qb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--g-fg-3); flex-shrink: 0; }
.qb-dot.ok { background: var(--g-ok); }
.qb-dot.warn { background: var(--g-warn); }
.qb-dot.err { background: var(--g-err); }

.qb-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 44px 24px; text-align: center;
    font-size: 0.875rem; color: var(--g-fg-2);
}
.qb-empty b { font-size: 1rem; color: var(--g-fg); }
.qb-empty span { max-width: 32rem; line-height: 1.55; color: var(--g-fg-3); }
.qb-empty-icon { width: 34px; height: 34px; color: var(--g-accent-hi); opacity: 0.8; }

.qb-progress { height: 5px; border-radius: 4px; background: var(--g-surface-3); overflow: hidden; }
.qb-progress-bar { height: 100%; border-radius: 4px; background: var(--g-accent); transition: width 0.3s var(--g-ease); }
.qb-progress.ok .qb-progress-bar { background: var(--g-ok); }

.qb-place {
    width: 24px; height: 24px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; background: var(--g-surface-3);
    font-size: 0.75rem; font-weight: 700; color: var(--g-fg-2);
    font-variant-numeric: tabular-nums;
}
.qb-place.p1 { background: rgba(251, 191, 36, 0.16); color: var(--qb-gold); }
.qb-place.p2 { background: rgba(203, 213, 225, 0.14); color: #cbd5e1; }
.qb-place.p3 { background: rgba(217, 119, 6, 0.16); color: #f59e0b; }

/* ---------- Формы ---------- */
.qb-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.qb-field-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.qb-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qb-counter { font-size: 0.6875rem; color: var(--g-fg-3); font-variant-numeric: tabular-nums; }
.qb-counter.over { color: var(--g-err); }
.qb-textarea { min-height: 84px; }

.qb-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-surface-2); align-self: flex-start; }
.qb-seg-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border: none; border-radius: 7px;
    background: transparent; color: var(--g-fg-3);
    font-family: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.qb-seg-btn .qb-ico { width: 14px; height: 14px; }
.qb-seg-btn:hover { color: var(--g-fg); }
.qb-seg-btn.active { background: var(--g-accent-dim); color: var(--g-accent-hi); font-weight: 600; }

.qb-image-row { display: flex; align-items: center; gap: 8px; }
.qb-image-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; border: 1px solid var(--g-line); flex-shrink: 0; }

.qb-options-edit, .qb-answers-edit { display: flex; flex-direction: column; gap: 6px; }
.qb-option-edit, .qb-answer-edit { display: flex; align-items: center; gap: 8px; }
.qb-option-radio {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; border: 1px solid var(--g-line-2); background: var(--g-surface-2);
    color: var(--g-fg-3); font-family: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.qb-option-radio:hover { border-color: var(--g-accent-line); color: var(--g-fg); }
.qb-option-edit.correct .qb-option-radio { background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.45); color: var(--g-ok); }
.qb-option-edit.correct .gw-input { border-color: rgba(52, 211, 153, 0.35); }
.qb-answer-tag {
    min-width: 52px; text-align: center; flex-shrink: 0;
    padding: 3px 0; border-radius: 6px;
    background: var(--g-surface-3); color: var(--g-fg-3);
    font-size: 0.6875rem; font-weight: 600;
}
.qb-answer-tag.main { background: rgba(52, 211, 153, 0.12); color: var(--g-ok); }
.qb-tester { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--g-line); }
.qb-tester .gw-input { height: 34px; font-size: 0.8125rem; }

/* ---------- Редактор вопроса ---------- */
.qb-qe { display: flex; flex-direction: column; gap: 16px; padding: 18px; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: var(--g-surface); }
.qb-qe-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--g-line); }
.qb-qe-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qb-qe-eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--g-fg-3); }
.qb-qe-title { font-size: 1.0625rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-qe-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--g-line); }
.qb-qe-errors { margin: 0; padding-left: 16px; font-size: 0.78125rem; line-height: 1.6; color: var(--g-warn); }

/* ============================================================
   Список пакетов
   ============================================================ */
.qb-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.qb-pack-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: var(--g-surface);
    transition: border-color 0.16s var(--g-ease);
}
.qb-pack-card:hover { border-color: var(--g-line-2); }
.qb-pack-card.ready { border-color: rgba(145, 70, 255, 0.22); }
.qb-pack-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qb-pack-title { font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-pack-desc { font-size: 0.8125rem; line-height: 1.5; color: var(--g-fg-2); }
.qb-pack-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.qb-pack-meta span { padding: 2px 8px; border-radius: 100px; background: rgba(255, 255, 255, 0.05); font-size: 0.71875rem; color: var(--g-fg-2); }
.qb-pack-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 0.71875rem; color: var(--g-fg-3); }
.qb-pack-actions { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--g-line); }

/* ============================================================
   Редактор пакета
   ============================================================ */
.qb-editor { display: flex; flex-direction: column; gap: 18px; }
.qb-editor-bar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px; margin: -4px 0 0;
    border: 1px solid var(--g-line); border-radius: var(--g-r); background: rgba(20, 20, 31, 0.92);
    backdrop-filter: blur(8px);
}
.qb-editor-state { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: var(--g-fg-3); }
.qb-editor-state.dirty { color: var(--g-warn); }
.qb-errors ul { margin: 6px 0 0; padding-left: 18px; }
.qb-errors li { margin: 2px 0; }
.qb-editor-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 18px 20px; }
.qb-input-title { font-size: 1rem; font-weight: 600; }

.qb-round-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qb-round-tab {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 14px;
    border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-surface);
    color: var(--g-fg-2); font-family: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.qb-round-tab:hover { border-color: var(--g-line-2); color: var(--g-fg); }
.qb-round-tab.active { border-color: var(--g-accent-line); background: var(--g-accent-dim); color: var(--g-fg); font-weight: 600; }
.qb-round-tab.add { border-style: dashed; color: var(--g-fg-3); }
.qb-round-tab.final .qb-ico { color: var(--qb-gold); width: 15px; height: 15px; }
.qb-round-tab-name span { color: var(--g-fg-3); font-weight: 500; }
.qb-round-tab-count { font-size: 0.6875rem; color: var(--g-fg-3); font-variant-numeric: tabular-nums; }
.qb-round-tabs-sep { flex: 1; }

.qb-editor-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.qb-editor-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.qb-qpanel { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; }
.qb-qpanel-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 0.8125rem; color: var(--g-fg-2); line-height: 1.55; }
.qb-qpanel-empty b { color: var(--g-fg); font-size: 0.9375rem; }
.qb-tips { margin: 4px 0 0; padding-left: 18px; color: var(--g-fg-3); }
.qb-tips li { margin: 4px 0; }

.qb-round-settings { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) 130px auto; gap: 14px; padding: 16px 18px; align-items: end; }

.qb-eboard { display: flex; flex-direction: column; gap: 6px; }
.qb-eboard-row { display: grid; grid-template-columns: 170px repeat(var(--qb-cols, 5), minmax(0, 1fr)); gap: 6px; }
.qb-eboard-theme { position: relative; display: flex; align-items: center; }
.qb-theme-input {
    width: 100%; height: 100%; min-height: 68px; padding: 8px 28px 8px 12px;
    border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-surface-2);
    color: var(--g-fg); font-family: inherit; font-size: 0.8125rem; font-weight: 700; outline: none;
}
.qb-theme-input:focus { border-color: var(--g-accent-line); }
.qb-theme-del {
    position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px; background: transparent; color: var(--g-fg-3); cursor: pointer; opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.qb-theme-del .qb-ico { width: 12px; height: 12px; }
.qb-eboard-theme:hover .qb-theme-del { opacity: 1; }
.qb-theme-del:hover { color: var(--g-err); background: rgba(248, 113, 113, 0.1); }

.qb-ecell {
    display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 68px;
    padding: 8px 10px; text-align: left;
    border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-surface);
    color: var(--g-fg); font-family: inherit; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.qb-ecell:hover { border-color: var(--g-line-2); background: var(--g-surface-2); }
.qb-ecell-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.qb-ecell-price { font-size: 0.875rem; font-weight: 800; color: var(--qb-gold); font-variant-numeric: tabular-nums; }
.qb-ecell-text { font-size: 0.6875rem; line-height: 1.35; color: var(--g-fg-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qb-ecell.empty { border-style: dashed; }
.qb-ecell.empty .qb-ecell-price { color: var(--g-fg-3); }
.qb-ecell.ready { border-color: rgba(52, 211, 153, 0.22); }
.qb-ecell.ready .qb-ecell-text { color: var(--g-fg-2); }
.qb-ecell.error { border-color: rgba(240, 180, 41, 0.38); background: rgba(240, 180, 41, 0.04); }
.qb-ecell.selected { border-color: var(--g-accent); box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.22); background: rgba(145, 70, 255, 0.08); }
.qb-kind-ico { width: 14px; height: 14px; }
.qb-kind-ico.cat { color: var(--qb-gold); }
.qb-kind-ico.auction { color: var(--g-accent-hi); }

.qb-eboard-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.qb-legend { display: inline-flex; flex-wrap: wrap; gap: 14px; font-size: 0.71875rem; color: var(--g-fg-3); }
.qb-legend > span { display: inline-flex; align-items: center; gap: 6px; }

.qb-final-intro { display: flex; flex-direction: column; gap: 16px; }
.qb-final-intro-head { display: flex; gap: 14px; }
.qb-final-intro-head b { display: block; font-size: 1rem; margin-bottom: 6px; }
.qb-final-intro-head p { font-size: 0.8125rem; line-height: 1.6; color: var(--g-fg-2); }
.qb-final-icon { width: 34px; height: 34px; color: var(--qb-gold); flex-shrink: 0; }

/* ============================================================
   Запуск
   ============================================================ */
.qb-pack-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.qb-pack-option {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 14px 44px; border: 1px solid var(--g-line); border-radius: var(--g-r);
    background: var(--g-surface-2); cursor: pointer;
    transition: border-color 0.16s, background 0.16s;
}
.qb-pack-option .gw-choice-radio { left: 16px; right: auto; top: 50%; transform: translateY(-50%); }
.qb-pack-option:hover { border-color: var(--g-line-2); }
.qb-pack-option.active { border-color: var(--g-accent-line); background: rgba(145, 70, 255, 0.08); }
.qb-pack-option.active .gw-choice-radio { border-color: var(--g-accent); box-shadow: inset 0 0 0 3.5px var(--g-accent); }
.qb-pack-option.disabled { cursor: default; opacity: 0.75; }
.qb-pack-option.disabled .gw-choice-radio { opacity: 0.35; }
.qb-pack-option-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.qb-pack-option-title { font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-pack-option-meta { font-size: 0.75rem; color: var(--g-fg-3); }
.qb-pack-option .gw-link { white-space: nowrap; }

.qb-fake-link {
    display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
    border: 1px dashed var(--g-line-2); border-radius: 9px;
    font-size: 0.8125rem; color: var(--g-fg-2);
}

.qb-prize-head, .qb-prize-row { display: grid; grid-template-columns: 190px 140px minmax(0, 1fr) 30px; gap: 10px; align-items: center; padding: 0 18px; }
.qb-prize-head { padding-top: 14px; padding-bottom: 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-fg-3); }
.qb-prize-row { padding-top: 6px; padding-bottom: 6px; }
.qb-prize-places { display: flex; align-items: center; gap: 6px; color: var(--g-fg-3); }
.qb-prize-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 18px 14px; border-top: 1px solid var(--g-line); margin-top: 8px; }

.qb-range-ctl { width: 260px; }
.qb-range-value { min-width: 46px; text-align: right; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.qb-rail-big { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

/* ============================================================
   Пульт ведущего
   ============================================================ */
.qb-console { display: flex; flex-direction: column; gap: 16px; }

.qb-status {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 14px 18px; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: var(--g-surface);
}
.qb-status-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.qb-status-title { font-size: 1.0625rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-status-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.78125rem; color: var(--g-fg-3); }
.qb-status-meta span { display: inline-flex; align-items: center; gap: 5px; }
.qb-status-meta .qb-ico { width: 13px; height: 13px; }
.qb-status-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qb-status-actions .gw-icon-btn { width: 32px; height: 32px; }
.qb-status-actions .gw-icon-btn.on { color: var(--g-warn); border-color: rgba(240, 180, 41, 0.35); }

.qb-phase {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px;
    background: rgba(255, 255, 255, 0.06); color: var(--g-fg-2); font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.qb-phase::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.qb-phase.live { background: rgba(52, 211, 153, 0.1); color: var(--g-ok); }
.qb-phase.live::before { animation: gw-pulse-dot 2s ease-in-out infinite; }
.qb-phase.done { background: rgba(251, 191, 36, 0.12); color: var(--qb-gold); }
.qb-phase.off { background: rgba(248, 113, 113, 0.1); color: var(--g-err); }

.qb-flash { animation: qb-in 0.2s var(--g-ease); }
@keyframes qb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.qb-console-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.qb-stage-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qb-side-col { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }

.qb-stage { display: flex; flex-direction: column; gap: 18px; padding: 20px 22px 22px; }
.qb-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.qb-stage-head > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qb-eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--g-fg-3); }
.qb-stage-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.qb-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qb-badges .gw-tag .qb-ico, .gw-tag .qb-ico { width: 12px; height: 12px; }
.qb-stage-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qb-stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; }

/* Ответ прячется от захвата панели в OBS: размыт, пока не навести */
.qb-console.hide-answers .qb-secret { filter: blur(7px); transition: filter 0.15s; cursor: help; }
.qb-console.hide-answers .qb-secret:hover { filter: none; }

/* ---------- Лобби ---------- */
.qb-lobby { display: flex; flex-direction: column; gap: 22px; }
.qb-lobby-count { display: flex; align-items: baseline; gap: 12px; }
.qb-lobby-num { font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--g-accent-hi); font-variant-numeric: tabular-nums; }
.qb-lobby-label { font-size: 1rem; color: var(--g-fg-2); }
.qb-lobby-feed { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.qb-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px;
    border-radius: 100px; background: var(--g-surface-2); border: 1px solid var(--g-line);
    font-size: 0.78125rem; animation: qb-in 0.25s var(--g-ease);
}
.qb-chip .gw-ava { width: 22px; height: 22px; font-size: 0.625rem; }
.qb-lobby-info { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; border-radius: var(--g-r); background: var(--g-surface-2); font-size: 0.8125rem; color: var(--g-fg-2); }
.qb-lobby-info > div { display: flex; align-items: center; gap: 10px; }
.qb-lobby-info .qb-ico { color: var(--g-accent-hi); }

/* ---------- Доска ---------- */
.qb-board { display: grid; grid-template-columns: minmax(110px, 190px) repeat(var(--qb-cols, 5), minmax(0, 1fr)); gap: 6px; }
.qb-board-theme {
    display: flex; align-items: center; padding: 0 14px; min-height: 58px;
    border-radius: 10px; background: var(--g-surface-2); border: 1px solid var(--g-line);
    font-size: 0.8125rem; font-weight: 700; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis;
}
.qb-cell {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 58px;
    border: 1px solid var(--qb-board-line); border-radius: 10px;
    background: linear-gradient(180deg, var(--qb-board-cell), var(--qb-board-cell-2));
    color: var(--qb-gold); font-family: inherit; cursor: default;
    transition: transform 0.12s var(--g-ease), border-color 0.15s, box-shadow 0.15s;
}
.qb-cell:disabled { cursor: default; }
.qb-cell.clickable { cursor: pointer; }
.qb-cell.clickable:hover { border-color: var(--g-accent); box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.2), 0 6px 18px rgba(145, 70, 255, 0.18); transform: translateY(-1px); }
.qb-cell.selected { border-color: var(--g-accent); box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.35); background: rgba(145, 70, 255, 0.2); }
.qb-cell.active { border-color: var(--g-accent); background: var(--g-accent); color: #fff; animation: qb-glow 1.6s ease-in-out infinite; }
@keyframes qb-glow { 50% { box-shadow: 0 0 0 4px rgba(145, 70, 255, 0.25), 0 0 24px rgba(145, 70, 255, 0.45); } }
.qb-cell-price { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.qb-cell.played, .qb-cell.voided { background: var(--g-surface); border-color: var(--g-line); color: var(--g-fg-3); }
.qb-cell-played { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.qb-cell-void { font-size: 0.875rem; text-decoration: line-through; opacity: 0.6; }
.qb-cell-kind { position: absolute; top: 6px; right: 6px; width: 13px; height: 13px; }
.qb-cell-kind.cat { color: var(--qb-gold); }
.qb-cell-kind.auction { color: var(--g-accent-hi); }

.qb-peek {
    display: flex; flex-direction: column; gap: 12px; padding: 16px 18px;
    border: 1px solid var(--g-accent-line); border-radius: var(--g-r); background: rgba(145, 70, 255, 0.06);
    animation: qb-in 0.2s var(--g-ease);
}
.qb-peek-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qb-peek-text { font-size: 1rem; line-height: 1.5; }
.qb-peek-answer { display: flex; align-items: baseline; gap: 8px; font-size: 0.875rem; }
.qb-peek-answer b { color: var(--g-ok); }

/* ---------- Вопрос ---------- */
.qb-q-text { font-size: 1.25rem; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; }
.qb-q-image { max-width: 100%; max-height: 280px; border-radius: var(--g-r); border: 1px solid var(--g-line); object-fit: contain; align-self: flex-start; }

.qb-opt-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qb-opt-bar {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
    border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-surface-2); overflow: hidden;
}
.qb-opt-fill { position: absolute; inset: 0 auto 0 0; background: rgba(145, 70, 255, 0.14); transition: width 0.4s var(--g-ease); }
.qb-opt-bar > *:not(.qb-opt-fill) { position: relative; }
.qb-opt-letter {
    width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; background: var(--g-surface-3); font-size: 0.75rem; font-weight: 700; color: var(--g-fg-2);
}
.qb-opt-text { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 500; }
.qb-opt-check { color: var(--g-ok); display: inline-flex; }
.qb-opt-count { font-size: 0.8125rem; font-weight: 700; color: var(--g-fg-2); font-variant-numeric: tabular-nums; }
.qb-opt-bar.shown { border-color: rgba(52, 211, 153, 0.5); }
.qb-opt-bar.shown .qb-opt-fill { background: rgba(52, 211, 153, 0.18); }
.qb-opt-bar.shown .qb-opt-letter { background: rgba(52, 211, 153, 0.2); color: var(--g-ok); }
.qb-opt-bar.dim { opacity: 0.6; }

.qb-progress-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: end; }
.qb-timer { display: flex; flex-direction: column; gap: 8px; }
.qb-timer-label { display: inline-flex; align-items: center; gap: 7px; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.qb-timer-label.urgent { color: var(--g-err); }
.qb-timer-track { height: 8px; border-radius: 6px; background: var(--g-surface-3); overflow: hidden; }
.qb-timer-fill { height: 100%; border-radius: 6px; background: var(--g-accent); transition: width 0.25s linear; }
.qb-timer-fill.urgent { background: var(--g-err); }
.qb-timer-fill.pending { background: repeating-linear-gradient(-45deg, rgba(145, 70, 255, 0.35) 0 10px, rgba(145, 70, 255, 0.18) 10px 20px); }
.qb-closed-note { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--g-warn); }
.qb-answered { display: flex; flex-direction: column; gap: 8px; font-size: 0.8125rem; color: var(--g-fg-2); }
.qb-answered b { color: var(--g-fg); font-size: 1rem; font-variant-numeric: tabular-nums; }

.qb-bidding { display: flex; align-items: center; gap: 22px; }
.qb-bidding-body { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.qb-big-text { font-size: 0.9375rem; line-height: 1.55; color: var(--g-fg-2); }
.qb-ring, .qb-ring svg { width: 96px; height: 96px; }
.qb-ring .gw-ring-num { font-size: 1.75rem; }
.qb-stats { border-radius: var(--g-r); overflow: hidden; border: 1px solid var(--g-line); }

/* ---------- Раскрытие ---------- */
.qb-answer-banner {
    display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
    border: 1px solid rgba(52, 211, 153, 0.35); border-radius: var(--g-r); background: rgba(52, 211, 153, 0.07);
    animation: qb-in 0.25s var(--g-ease);
}
.qb-answer-main { font-size: 1.5rem; font-weight: 800; color: var(--g-ok); letter-spacing: -0.02em; }
.qb-answer-explain { font-size: 0.875rem; line-height: 1.5; color: var(--g-fg-2); }
.qb-reveal-facts { display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.8125rem; color: var(--g-fg-2); }
.qb-reveal-facts span { display: inline-flex; align-items: center; gap: 6px; }
.qb-reveal-facts .qb-ico { color: var(--qb-gold); }

.qb-groups { display: flex; flex-direction: column; gap: 6px; }
.qb-groups-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.qb-group {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px;
    border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-surface-2);
}
.qb-group.correct { border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.05); }
.qb-group-mark { display: inline-flex; color: var(--g-err); }
.qb-group.correct .qb-group-mark { color: var(--g-ok); }
.qb-group-text { flex: 1; min-width: 0; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-group-count { font-size: 0.8125rem; font-weight: 700; color: var(--g-fg-2); font-variant-numeric: tabular-nums; }

/* ---------- Таблицы ---------- */
.qb-standings { display: flex; flex-direction: column; gap: 4px; }
.qb-standing { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--g-surface-2); }
.qb-standing-name { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-standing-score { font-size: 0.9375rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }

/* ---------- Финал ---------- */
.qb-final-rows { display: flex; flex-direction: column; gap: 6px; }
.qb-final-row {
    display: grid; grid-template-columns: minmax(0, 1.2fr) 70px minmax(0, 1.4fr) 110px 70px 30px; gap: 10px; align-items: center;
    padding: 10px 12px; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-surface-2);
    font-size: 0.8125rem; transition: border-color 0.2s, background 0.2s;
}
.qb-final-row.next { border-color: var(--g-accent-line); }
.qb-final-row.correct { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.06); }
.qb-final-row.wrong { border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.05); }
.qb-final-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-final-score, .qb-final-delta { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.qb-final-answer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-fg-2); }
.qb-final-stake { color: var(--g-fg-3); font-variant-numeric: tabular-nums; }
.qb-final-row .gw-icon-btn.on { color: var(--g-ok); border-color: rgba(52, 211, 153, 0.35); }

/* ---------- Итоги ---------- */
.qb-finish { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 4px; text-align: center; }
.qb-finish-crown { width: 44px; height: 44px; color: var(--qb-gold); margin-bottom: 6px; }
.qb-finish-name { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.qb-finish-score { font-size: 0.9375rem; color: var(--qb-gold); font-weight: 600; }
.qb-awards { display: flex; flex-direction: column; gap: 6px; }
.qb-award { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--g-surface-2); }
.qb-award-name { font-weight: 700; font-size: 0.875rem; }
.qb-award-prize { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---------- Боковая колонка ---------- */
.qb-leaders { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.qb-leaders-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.qb-leaders-head .qb-ico { color: var(--g-fg-3); }
/* Игрок | за вопрос | счёт — отдельными колонками, чтобы «+100» и «−100» не читались одним числом */
.qb-leaders-cols, .qb-leader { display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px 64px; gap: 10px; align-items: center; }
.qb-leaders-cols { padding: 0 6px 4px; font-size: 0.65625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-fg-3); }
.qb-leaders-cols span:first-child { grid-column: 1 / 3; }
.qb-leaders-cols span:not(:first-child) { text-align: right; }
.qb-leader { padding: 6px; border-radius: 8px; }
.qb-leader:hover { background: rgba(255, 255, 255, 0.03); }
.qb-leader-name { min-width: 0; font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-leader-delta {
    justify-self: end; padding: 2px 7px; border-radius: 100px;
    font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--g-fg-3);
}
.qb-leader-delta.up { background: rgba(52, 211, 153, 0.12); color: var(--g-ok); }
.qb-leader-delta.down { background: rgba(248, 113, 113, 0.12); color: var(--g-err); }
.qb-leader-score { text-align: right; font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.qb-widget-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.qb-widget-card .qb-muted { display: block; line-height: 1.5; }
.qb-widget-url { display: flex; align-items: center; gap: 8px; }
.qb-widget-url code {
    flex: 1; min-width: 0; padding: 7px 9px; border-radius: 8px; background: var(--g-surface-2);
    font-size: 0.6875rem; color: var(--g-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   История
   ============================================================ */
.qb-history { display: flex; flex-direction: column; gap: 10px; }
.qb-history-head {
    display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 18px;
    background: none; border: none; color: var(--g-fg); font-family: inherit; text-align: left; cursor: pointer;
}
.qb-history-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.qb-history-title { font-size: 0.9375rem; font-weight: 700; }
.qb-history-stats { display: flex; gap: 14px; font-size: 0.8125rem; color: var(--g-fg-2); font-variant-numeric: tabular-nums; }
.qb-history-stats span { display: inline-flex; align-items: center; gap: 5px; }
.qb-history-stats .qb-ico { width: 13px; height: 13px; }
.qb-history-chevron { color: var(--g-fg-3); transition: transform 0.2s var(--g-ease); }
.qb-history-item.open .qb-history-chevron { transform: rotate(90deg); }
.qb-history-body { display: flex; flex-direction: column; gap: 12px; padding: 0 18px 18px; }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 1400px) {
    .qb-editor-body { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1240px) {
    .qb-console-grid { grid-template-columns: minmax(0, 1fr); }
    .qb-side-col { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .qb-editor-body { grid-template-columns: minmax(0, 1fr); }
    .qb-qpanel { position: static; max-height: none; }
}
@media (max-width: 900px) {
    .qb-editor-meta, .qb-round-settings { grid-template-columns: minmax(0, 1fr); }
    .qb-eboard-row { grid-template-columns: 110px repeat(var(--qb-cols, 5), minmax(0, 1fr)); }
    .qb-ecell-text { display: none; }
    .qb-progress-row { grid-template-columns: minmax(0, 1fr); }
    .qb-opt-bars { grid-template-columns: minmax(0, 1fr); }
    .qb-prize-head { display: none; }
    .qb-prize-row { grid-template-columns: 1fr 1fr 30px; padding-bottom: 12px; border-bottom: 1px solid var(--g-line); }
    .qb-prize-row > input[type="text"] { grid-column: 1 / 3; }
    .qb-final-row { grid-template-columns: minmax(0, 1fr) 60px 30px; }
    .qb-final-answer, .qb-final-stake { grid-column: 1 / 2; }
    .qb-history-stats { display: none; }
    .qb-range-ctl { width: 180px; }
}
@media (max-width: 640px) {
    .qb-board { grid-template-columns: 90px repeat(var(--qb-cols, 5), minmax(0, 1fr)); gap: 4px; }
    .qb-board-theme { padding: 0 8px; font-size: 0.6875rem; }
    .qb-cell-price { font-size: 0.875rem; }
    .qb-bidding { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Скин-приз: из пула дропов или свой предмет
   ============================================================ */
.qb-skin-pick { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qb-skin-pick > .qb-sel { flex: 1 1 220px; }
.qb-skin-pick > input { flex: 1 1 200px; min-width: 0; }
.qb-sel-trigger.pool { border-color: rgba(52, 211, 153, 0.38); }
.qb-sel-trigger.manual { border-color: rgba(251, 191, 36, 0.32); }
.qb-award-error { flex-basis: 100%; text-align: right; font-size: 0.75rem; line-height: 1.4; color: var(--g-err); }
.qb-spin-dim { width: 10px; height: 10px; border-color: rgba(255, 255, 255, 0.2); border-top-color: var(--g-fg-2); }
@media (max-width: 900px) {
    .qb-prize-row > .qb-skin-pick { grid-column: 1 / 3; flex-wrap: wrap; }
}

/* ---------- Картинки ---------- */
.qb-image-upload { max-width: 360px; }

/* ---------- Медиа вопроса (QuizMediaField) ---------- */
.qb-media-usage { font-size: 0.71875rem; color: var(--g-fg-3); white-space: nowrap; }
.qb-media-usage.warn { color: var(--g-warn); }
.qb-media-preview {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 10px;
    border-radius: 12px; border: 1px solid var(--g-line); background: var(--g-surface-2); max-width: 460px;
}
.qb-media-preview img, .qb-media-preview video { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; background: #000; }
.qb-media-preview.audio { padding-right: 10px; }
.qb-media-preview audio { flex: 1; min-width: 0; height: 36px; }
.qb-media-audio-icon { width: 30px; height: 30px; padding: 6px; flex-shrink: 0; border-radius: 8px; background: var(--g-accent-dim); color: var(--g-accent-hi); }
.qb-media-remove { position: absolute; top: 8px; right: 8px; background: rgba(10, 10, 18, 0.82); }
.qb-media-preview.audio .qb-media-remove { position: static; flex-shrink: 0; }
.qb-media-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qb-media-pick { position: relative; overflow: hidden; cursor: pointer; }
.qb-media-pick.disabled { opacity: 0.5; pointer-events: none; }
.qb-media-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.qb-media-progress { width: 160px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.qb-media-progress span { display: block; height: 100%; background: var(--g-accent); transition: width 0.2s; }
.qb-media-error { font-size: 0.75rem; line-height: 1.45; color: var(--g-err); }
.qb-q-image.small { max-height: 160px; }
.qb-q-audio { display: flex; align-items: center; gap: 10px; max-width: 460px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--g-line); background: var(--g-surface-2); }
.qb-q-audio .qb-ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--g-accent-hi); }
.qb-q-audio audio { flex: 1; min-width: 0; height: 34px; }
.qb-award-skin-img {
    width: 48px; height: 32px; flex-shrink: 0; object-fit: contain;
    border-radius: 6px; background: var(--g-surface-3);
}

/* ---------- Сохранение и запуск: закреплены внизу экрана ---------- */
.qb-launch-sticky { position: sticky; bottom: 16px; z-index: 6; }
.qb-launch-sticky .gw-launch {
    background: rgba(20, 20, 31, 0.96);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.qb-save-state { display: inline-flex; align-items: center; gap: 7px; min-height: 16px; font-size: 0.75rem; color: var(--g-fg-3); }
.qb-save-state.dirty { color: var(--g-warn); }

/* ============================================================
   Выпадающий список (QuizSelect) вместо системного <select>
   ============================================================ */
.qb-sel { position: relative; min-width: 0; }
.qb-sel-trigger {
    display: flex; align-items: center; gap: 9px;
    width: 100%; height: 38px; padding: 0 10px 0 12px; box-sizing: border-box;
    background: var(--g-surface-2); border: 1px solid var(--g-line); border-radius: 9px;
    color: var(--g-fg); font: inherit; font-size: 0.875rem; text-align: left;
    cursor: pointer; outline: none;
    transition: border-color 0.15s var(--g-ease), background 0.15s var(--g-ease), box-shadow 0.15s var(--g-ease);
}
.qb-sel-trigger:hover:not(:disabled) { border-color: var(--g-line-2); }
.qb-sel-trigger:focus-visible, .qb-sel.open .qb-sel-trigger {
    border-color: var(--g-accent-line); background: var(--g-surface-3);
    box-shadow: 0 0 0 3px var(--g-accent-dim);
}
.qb-sel-trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.qb-sel.sm .qb-sel-trigger { height: 34px; font-size: 0.8125rem; }

.qb-sel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.qb-sel-value.qb-sel-placeholder { color: var(--g-fg-3); font-weight: 400; }
.qb-sel-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--g-fg-3); transition: transform 0.18s var(--g-ease), color 0.15s; }
.qb-sel.open .qb-sel-chevron { transform: rotate(180deg); color: var(--g-accent-hi); }

.qb-sel-lead:empty { display: none; }
.qb-sel-lead { display: inline-flex; flex-shrink: 0; }
.qb-sel-thumb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 28px; border-radius: 6px; overflow: hidden;
    background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--g-line);
}
.qb-sel-thumb img { width: 100%; height: 100%; object-fit: contain; }
.qb-sel-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px; background: var(--g-surface-3); color: var(--g-fg-2);
}
.qb-sel-icon .qb-ico { width: 15px; height: 15px; }
.qb-sel-trigger .qb-sel-thumb { width: 34px; height: 24px; }
.qb-sel-trigger .qb-sel-icon { width: 24px; height: 24px; border-radius: 6px; }
.qb-sel-trigger .qb-sel-icon .qb-ico { width: 13px; height: 13px; }
.qb-sel.sm .qb-sel-trigger .qb-sel-thumb { height: 22px; }

.qb-sel-badge {
    flex-shrink: 0; padding: 2px 7px; border-radius: 999px;
    font-size: 0.6875rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
    background: rgba(255, 255, 255, 0.06); color: var(--g-fg-2);
}
.qb-sel-badge.ok { background: rgba(52, 211, 153, 0.12); color: var(--g-ok); }
.qb-sel-badge.warn { background: rgba(240, 180, 41, 0.12); color: var(--g-warn); }
.qb-sel-badge.err { background: rgba(248, 113, 113, 0.12); color: var(--g-err); }

.qb-sel-menu {
    position: fixed; z-index: 1000;
    display: flex; flex-direction: column; gap: 1px;
    padding: 6px; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
    background: #1c1c2b; border: 1px solid var(--g-line-2); border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
    animation: qb-sel-in 0.12s var(--g-ease);
}
@keyframes qb-sel-in { from { opacity: 0; } }

.qb-sel-search {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    margin: -6px -6px 4px; padding: 10px 12px;
    background: #1c1c2b; border-bottom: 1px solid var(--g-line); color: var(--g-fg-3);
}
.qb-sel-search .qb-ico { width: 15px; height: 15px; flex-shrink: 0; }
.qb-sel-search input {
    flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: transparent;
    color: var(--g-fg); font: inherit; font-size: 0.8125rem;
}
.qb-sel-search input::placeholder { color: var(--g-fg-3); }

.qb-sel-group {
    padding: 10px 10px 5px; font-size: 0.6875rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-fg-3);
}
.qb-sel-group:first-child { padding-top: 6px; }
.qb-sel-info { padding: 8px 10px; font-size: 0.75rem; line-height: 1.45; color: var(--g-fg-3); }

.qb-sel-opt {
    display: flex; align-items: center; gap: 10px;
    min-height: 36px; padding: 6px 8px 6px 10px; border-radius: 8px;
    cursor: pointer; user-select: none;
    transition: background 0.1s;
}
.qb-sel-opt.active { background: rgba(255, 255, 255, 0.055); }
.qb-sel-opt.selected .qb-sel-label { color: var(--g-accent-hi); }
.qb-sel-opt.selected .qb-sel-icon { background: var(--g-accent-dim); color: var(--g-accent-hi); }
.qb-sel-opt.disabled { cursor: not-allowed; }
.qb-sel-opt.disabled .qb-sel-lead, .qb-sel-opt.disabled .qb-sel-text { opacity: 0.42; }
.qb-sel-opt.disabled.active { background: rgba(255, 255, 255, 0.025); }

.qb-sel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qb-sel-label {
    font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: var(--g-fg); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qb-sel-hint { font-size: 0.71875rem; color: var(--g-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-sel-tick { display: inline-flex; width: 16px; flex-shrink: 0; color: var(--g-accent-hi); }
.qb-sel-tick .qb-ico { width: 15px; height: 15px; }
.gw-row-ctl > .qb-sel { width: 300px; }
@media (max-width: 900px) {
    .gw-row-ctl > .qb-sel, .qb-sel-inline { width: 100%; }
}

/* ---------- Лимит пакетов ---------- */
.gw-count.warn { background: rgba(240, 180, 41, 0.14); color: var(--g-warn); }
.qb-limit-note { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(240, 180, 41, 0.28); border-radius: var(--g-r); background: rgba(240, 180, 41, 0.06); color: var(--g-warn); font-size: 0.8125rem; }

/* ---------- Окно поверх страницы (импорт пака SIGame) ---------- */
.qb-modal-overlay {
    /* Выше плавающей кнопки «Поддержка» (9999): на телефоне она закрывала кнопки окна */
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(6, 6, 12, 0.72);
    backdrop-filter: blur(6px);
    animation: qb-modal-fade 0.18s ease;
}
@keyframes qb-modal-fade { from { opacity: 0; } }
.qb-modal {
    width: 100%; max-width: 600px; max-height: 88vh;
    display: flex; flex-direction: column;
    border: 1px solid var(--g-line-2); border-radius: var(--g-r-lg, 16px);
    background: var(--g-surface); color: var(--g-fg);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
    animation: qb-modal-rise 0.22s var(--g-ease);
}
@keyframes qb-modal-rise { from { opacity: 0; transform: translateY(12px); } }
.qb-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--g-line); }
.qb-modal-title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.qb-modal-sub { display: block; margin-top: 4px; font-size: 0.78125rem; color: var(--g-fg-3); }
.qb-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; }
.qb-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--g-line); }

.qb-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 30px 22px; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--g-line-2); border-radius: var(--g-r);
    background: var(--g-surface-2); color: var(--g-fg-2); font-size: 0.8125rem; line-height: 1.5;
    transition: border-color 0.16s var(--g-ease), background 0.16s var(--g-ease);
}
.qb-drop:hover { border-color: var(--g-accent-line); background: var(--g-accent-dim); }
.qb-drop.busy { cursor: progress; }
.qb-drop b { color: var(--g-fg); font-size: 0.9375rem; }
.qb-drop span { max-width: 420px; }
.qb-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: inherit; }
.qb-drop-icon { width: 30px; height: 30px; color: var(--g-accent-hi); }

.qb-import-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--g-line); border-radius: var(--g-r); background: var(--g-surface-2); }
.qb-import-file > .qb-ico { width: 22px; height: 22px; color: var(--g-accent-hi); }
.qb-import-file > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qb-import-file b { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-import-file span { font-size: 0.75rem; color: var(--g-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qb-import-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qb-import-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--g-line); border-radius: var(--g-r); }
.qb-import-stats b { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.qb-import-stats span { font-size: 0.71875rem; color: var(--g-fg-3); }
.qb-import-media { padding: 12px 14px; border: 1px solid var(--g-line); border-radius: var(--g-r); }
.qb-warn-text { color: var(--g-warn); font-weight: 600; }

.qb-import-notes { padding: 12px 14px; border: 1px solid rgba(240, 180, 41, 0.28); border-radius: var(--g-r); background: rgba(240, 180, 41, 0.06); font-size: 0.78125rem; line-height: 1.5; color: var(--g-fg-2); }
.qb-import-notes-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-weight: 600; color: var(--g-warn); }
.qb-import-notes ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.qb-import-ok, .qb-import-error { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--g-r); font-size: 0.8125rem; }
.qb-import-ok { background: rgba(52, 211, 153, 0.1); color: var(--g-ok); }
.qb-import-error { background: rgba(248, 113, 113, 0.1); color: var(--g-err); }
.qb-link-btn { margin-top: 6px; padding: 0; border: none; background: none; color: var(--g-accent-hi); font: inherit; font-weight: 600; cursor: pointer; }
.qb-link-btn:hover { text-decoration: underline; }

.qb-import-progress, .qb-import-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 6px; text-align: center; }
.qb-import-progress .qb-progress { width: 100%; }
.qb-import-done b { font-size: 0.9375rem; }
.qb-import-done span { font-size: 0.8125rem; color: var(--g-fg-2); }
.qb-import-done-icon { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: rgba(52, 211, 153, 0.12); color: var(--g-ok); }

@media (max-width: 600px) {
    .qb-modal-overlay { padding: 0; align-items: flex-end; }
    .qb-modal { max-height: 92vh; border-radius: 16px 16px 0 0; }
    .qb-import-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qb-import-file { flex-wrap: wrap; }
}