/* Брендинг квиза (этап 1): тёмный фон клиента + его акценты. Активно только в body.is-branded.
   Переменные ставит app/static/js/branding.js. Светлые фоны — этап 2. */

body.is-branded {
  --mq-gradient-main: var(--brand-bg);
  --mq-grad-landing: var(--brand-bg);
  --mq-gradient-landing: var(--brand-bg);
  --mq-bg-app: var(--brand-bg);
  --mq-primary: var(--brand);
  --mq-primary-dark: var(--brand);
  --mq-primary-light: var(--brand);
  --mq-gradient-cta: linear-gradient(135deg, var(--brand-cta), var(--brand-cta));
  /* Фиолетовые токены tokens.css / quiz-editor-v2.css: вторичные кнопки итогов (.mq-btn--secondary,
     .rv2-csat__submit) и их цветные тени */
  --mq-gradient-button: linear-gradient(135deg, var(--brand), var(--brand));
  --mq-shadow-colored: 0 10px 30px rgba(15, 23, 42, .25);
  --mq-shadow-purple: 0 10px 30px rgba(15, 23, 42, .25);
  --mq-shadow-cta: 0 8px 24px color-mix(in srgb, var(--brand-cta) 42%, transparent);
  --mq-grad-purple: linear-gradient(135deg, var(--brand), var(--brand));
}

/* Сцена вопроса: второй glow был фиолетовым (question-v2.css .qr-stage::before) — оставляем белый */
body.is-branded .qr-stage::before {
  background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .18), transparent 50%);
}

/* Фон лобби задан прямым градиентом с glow-блобами (quiz-lobby-v2.css, body.lobby-fullbleed) */
body.is-branded.lobby-fullbleed {
  background: var(--brand-bg);
  background-attachment: fixed;
}

/* Плашка-слот: скрыта без бренда, в брендированном состоянии — белая «таблетка» как в макете */
.mq-brand-plate { display: none; }
body.is-branded .mq-brand-plate {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  padding: 6px 14px 6px 6px; border-radius: 16px; background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}
body.is-branded [data-brand-slot] .mq-brand__mark {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 900; font-size: 16px;
}
body.is-branded [data-brand-slot] .mq-brand__mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
body.is-branded [data-brand-slot] .mq-brand__name {
  font-weight: 900; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16ch;
}
body.is-branded .mq-brand-plate .mq-brand__name { color: var(--brand); font-size: 18px; }
/* .nav-logo красится градиентом через прозрачную заливку текста (style.css) — у бренда
   своя плашка: сплошной цвет названия и белая буква на знаке, иначе буква невидима */
body.is-branded .nav-logo[data-brand-slot] {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: var(--brand);
}
body.is-branded [data-brand-slot] .mq-brand__mark { -webkit-text-fill-color: #fff; }

/* Главные кнопки (CTA) — цвет «Запустить» с читаемым текстом */
body.is-branded .mqx-cta:not(.thinking) {
  background: var(--brand-cta);
  color: var(--brand-cta-ink);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-cta) 45%, transparent);
}

/* Плашка меньшего размера — сцена игрока (qr-p-top, узкая полоса) */
body.is-branded .mq-brand-plate--sm { padding: 4px 10px 4px 4px; border-radius: 12px; }
body.is-branded .mq-brand-plate--sm .mq-brand__mark { width: 24px; height: 24px; border-radius: 8px; font-size: 13px; }
body.is-branded .mq-brand-plate--sm .mq-brand__name { font-size: 14px; max-width: 12ch; }

/* ==========================================================================
   Аудит зашитых фиолетовых/оранжевых цветов (Step 6): только фон/бейдж/кнопка/
   акцентный текст на брендируемых экранах. Варианты ответа (--mq-grad-red/blue/
   amber/green), зелёный «правильно» и per-игрок палитры аватаров (data-pal) —
   НЕ трогаем, см. отчёт задачи.
   ========================================================================== */

/* Лобби (.mqx*): переменные локально переопределены внутри .mqx в quiz-lobby-v2.css,
   поэтому общий body.is-branded { --mq-primary: ... } их не перекрывает — переопределяем
   тот же набор прямо на .mqx. Это разом чинит фон nav-логотипа/аватара и CTA-кнопки,
   использующие var(--mq-grad-main)/var(--mq-grad-cta) внутри .mqx. */
body.is-branded .mqx {
  --mq-primary: var(--brand);
  --mq-primary-dark: var(--brand);
  --mq-grad-main: var(--brand-bg);
  --mq-grad-landing: var(--brand-bg);
  --mq-grad-cta: linear-gradient(135deg, var(--brand-cta), var(--brand-cta));
  --mq-primary-light: var(--brand);
  --mq-grad-start: var(--brand);
  --mq-grad-mid: var(--brand);
  --mq-grad-end: var(--brand);
  --mq-grad-purple: linear-gradient(135deg, var(--brand), var(--brand));
  --mq-shadow-cta: 0 8px 24px color-mix(in srgb, var(--brand-cta) 42%, transparent);
  --mq-shadow-purple: 0 10px 30px rgba(15, 23, 42, .25);
}

/* Зашитые фиолетовые тени/фокус-кольца/бейджи в quiz-lobby-v2.css (rgba(102,126,234) /
   rgba(99,102,241) / rgba(124,58,237), #ede9fe/#7c3aed) — нейтральная тень или цвет бренда */
body.is-branded .mqx-nav__logo-b,
body.is-branded .mqxh-players-head__c,
body.is-branded .mqxp-in__quiz-em { box-shadow: 0 3px 10px rgba(15, 23, 42, .25); }
body.is-branded .mqxh-role__seg::before {
  box-shadow: 0 6px 16px rgba(15, 23, 42, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.is-branded .mqxc-topic__dice,
body.is-branded .mqxc-count__tile.on { box-shadow: 0 8px 20px rgba(15, 23, 42, .25); }
body.is-branded .mqxc-topic__input:focus,
body.is-branded .mqxc-name:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
body.is-branded .mqx-nav__bal { background: #fff; color: var(--brand); }
/* Сиреневые пилюли (#ede9fe → #ddd6fe, текст #6d28d9): «ВЫ» в списке, музыка вкл., квиз у игрока */
body.is-branded .mqxh-p.you,
body.is-branded .mqxh-music.on,
body.is-branded .mqxp-in__quiz {
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  border-color: color-mix(in srgb, var(--brand) 45%, #fff);
}
body.is-branded .mqxh-music.on,
body.is-branded .mqxp-in__quiz { color: var(--brand); }
/* Полоса генерации (индиго-градиент) и розовый glow-блоб колонки лобби */
body.is-branded .mqxh-gen--strip { background: var(--brand); }
body.is-branded .mqx::after { background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent); }
body.is-branded .mqx-nav__bal-gem { background: var(--brand-cta); color: var(--brand-cta-ink); }

/* Оранжевый гем-бейдж баланса в верхней панели лобби/создания игры (рядом с плашкой) */
body.is-branded .mqx-topbal__gem { background: var(--brand-cta); }

/* Оранжевый текст-градиент счётчика очков на сцене ведущего */
body.is-branded .qr-host__points-num { background: linear-gradient(135deg, var(--brand-cta), var(--brand-cta)); }

/* Оранжевый гем-бейдж баланса в панели редактора вопросов */
body.is-branded .qe-nav__bal-gem { background: var(--brand-cta); }

/* ===== Панель «Брендинг» в редакторе ===== */
/* Как в макете: на широком экране панель — колонка справа, редактор, навбар и нижняя
   панель сужаются (body.bp-open); на узком — поверх экрана. Выше навбара (z-index 1001). */
@media (min-width: 900px) {
  body.bp-open.qe-editor-active .qe,
  body.bp-open.qe-editor-active .qe-foot { right: 380px; }
  body.bp-open.qe-editor-active nav.navbar {
    left: calc((100% - 380px) / 2) !important;
    width: calc(100% - 380px - 24px) !important;
  }
}
.mq-bp, .mq-bp * { box-sizing: border-box; }
.mq-bp__presets > *, .mq-bp__colors > *, .mq-bp__foot > * { min-width: 0; }
.mq-bp__txt { width: 100%; }
.mq-bp { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100%; z-index: 1300;
  display: flex; flex-direction: column; background: #fbfaf8; color: #1c1917;
  border-left: 1px solid #e7e5e4; box-shadow: -20px 0 40px rgba(0,0,0,.25); }
.mq-bp[hidden] { display: none; }
.mq-bp__head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #eeebe7; }
.mq-bp__head h2 { margin: 0; flex: 1; font-size: 17px; font-weight: 900; }
.mq-bp__pro { font-size: 10px; font-weight: 900; padding: 3px 7px; border-radius: 6px; background: #1c1917; color: #fbbf24; }
.mq-bp__x { width: 32px; height: 32px; border: 0; border-radius: 9px; background: #f0eeea; cursor: pointer; }
.mq-bp__body { flex: 1; overflow-y: auto; padding: 6px 20px 20px; }
.mq-bp__gt { margin: 18px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #78716c; }
.mq-bp__presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mq-bp__pre { border: 1.5px solid #e7e5e4; border-radius: 14px; background: #fff; padding: 6px; text-align: left; cursor: pointer; color: #1c1917; }
.mq-bp__sw { display: block; height: 40px; border-radius: 9px; }
.mq-bp__pre b { display: block; font-size: 12.5px; padding: 6px 4px 0; }
.mq-bp__pre small { display: block; font-size: 11px; color: #78716c; padding: 0 4px 3px; }
.mq-bp__fld { display: flex; flex-direction: column; gap: 6px; }
.mq-bp__fld small { text-align: right; font-size: 11px; color: #a8a29e; }
.mq-bp__txt { height: 42px; border: 1.5px solid #e7e5e4; border-radius: 11px; padding: 0 12px; font: inherit; font-weight: 600; }
.mq-bp__logo { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.mq-bp__logo-prev { width: 52px; height: 52px; border-radius: 12px; border: 1.5px solid #e7e5e4; background: #fff;
  display: grid; place-items: center; font-weight: 900; overflow: hidden; }
.mq-bp__logo-prev img { width: 100%; height: 100%; object-fit: contain; }
.mq-bp__drop { flex: 1; position: relative; height: 52px; border: 1.5px dashed #d6d3d1; border-radius: 12px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #57534e; background: #fff; cursor: pointer; }
.mq-bp__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mq-bp__link { margin-top: 8px; border: 0; background: none; padding: 0; color: #78716c; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.mq-bp__colors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mq-bp__col { display: flex; align-items: center; gap: 8px; border: 1.5px solid #e7e5e4; border-radius: 11px; padding: 5px; background: #fff; font-size: 12px; font-weight: 700; }
.mq-bp__col input { width: 30px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.mq-bp__seg { display: grid; grid-template-columns: 1fr 1fr; background: #f0eeea; border-radius: 11px; padding: 3px; }
.mq-bp__seg button { border: 0; background: none; padding: 8px; border-radius: 9px; font-weight: 700; color: #57534e; cursor: pointer; }
.mq-bp__seg button.on { background: #fff; color: #1c1917; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.mq-bp__warn { margin-top: 10px; font-size: 12px; font-weight: 600; color: #b45309; background: #fef3c7; border-radius: 9px; padding: 8px 10px; }
.mq-bp__err { margin-top: 10px; font-size: 12px; font-weight: 600; color: #b91c1c; }
.mq-bp__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 20px; border-top: 1px solid #eeebe7; }
.mq-bp__btn { height: 42px; border-radius: 12px; border: 1.5px solid #e7e5e4; background: #fff; font-weight: 800; cursor: pointer; }
.mq-bp__btn--ok { border: 0; background: #1c1917; color: #fff; }
.mq-bp__foot [data-bp-save-mine] { grid-column: 1 / -1; }
.mq-bp__apply { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: #57534e; display: flex; gap: 8px; align-items: center; }