/**
 * Brand themes (Raw / SmackDown / NXT) — общий слой для прод-страниц.
 * Совместим с --tg-* из mobile-guide.css и с демо hybrid.
 * Отключить: localStorage wweSiteTheme=off или ?legacyTheme=1
 */
:root,
html[data-theme="raw"] {
  --bg0: #000000;
  --bg-mid: #1a0004;
  --glow-a: rgba(215, 24, 42, 0.55);
  --glow-b: rgba(215, 24, 42, 0.14);
  --brand: #d7182a;
  --gold: #d7182a;
  --gold-hi: #ffffff;
  --text: #ffffff;
  --muted: #c4a0a4;
  --tile: rgba(18, 0, 4, 0.92);
  --tile-border: rgba(215, 24, 42, 0.55);
  --btn-grad-a: #ff3b4e;
  --btn-grad-b: #a01020;
  --btn-text: #ffffff;
  --chrome: rgba(8, 0, 2, 0.92);
  --brand-a22: rgba(215, 24, 42, 0.22);
  --brand-a35: rgba(215, 24, 42, 0.35);
  --brand-a45: rgba(215, 24, 42, 0.45);
  --brand-a08: rgba(215, 24, 42, 0.08);
  --brand-a10: rgba(215, 24, 42, 0.1);
  --brand-a12: rgba(215, 24, 42, 0.12);
  --brand-a16: rgba(215, 24, 42, 0.16);
  --brand-a70: rgba(215, 24, 42, 0.7);

  --tg-bg: #000000;
  --tg-bg2: rgba(8, 0, 2, 0.96);
  --tg-bubble: rgba(18, 0, 4, 0.92);
  --tg-bubble-border: rgba(215, 24, 42, 0.45);
  --tg-accent: #d7182a;
  --tg-text: #ffffff;
  --tg-muted: #c4a0a4;
  --tg-btn: #5c1018;
  --tg-btn-active: #a01020;
}

html[data-theme="smackdown"] {
  --bg0: #000814;
  --bg-mid: #001e4d;
  --glow-a: rgba(0, 107, 201, 0.55);
  --glow-b: rgba(80, 170, 255, 0.16);
  --brand: #006bc9;
  --gold: #006bc9;
  --gold-hi: #e8f4ff;
  --text: #ffffff;
  --muted: #8eb4d8;
  --tile: rgba(0, 20, 48, 0.92);
  --tile-border: rgba(0, 107, 201, 0.55);
  --btn-grad-a: #3da0ff;
  --btn-grad-b: #004a9f;
  --btn-text: #ffffff;
  --chrome: rgba(0, 10, 28, 0.92);
  --brand-a22: rgba(0, 107, 201, 0.22);
  --brand-a35: rgba(0, 107, 201, 0.35);
  --brand-a45: rgba(0, 107, 201, 0.45);
  --brand-a08: rgba(0, 107, 201, 0.08);
  --brand-a10: rgba(0, 107, 201, 0.1);
  --brand-a12: rgba(0, 107, 201, 0.12);
  --brand-a16: rgba(0, 107, 201, 0.16);
  --brand-a70: rgba(0, 107, 201, 0.7);

  --tg-bg: #000814;
  --tg-bg2: rgba(0, 10, 28, 0.96);
  --tg-bubble: rgba(0, 20, 48, 0.92);
  --tg-bubble-border: rgba(0, 107, 201, 0.45);
  --tg-accent: #3da0ff;
  --tg-text: #ffffff;
  --tg-muted: #8eb4d8;
  --tg-btn: #003a80;
  --tg-btn-active: #006bc9;
}

html[data-theme="nxt"] {
  --bg0: #000000;
  --bg-mid: #12100a;
  --glow-a: rgba(253, 226, 3, 0.32);
  --glow-b: rgba(255, 196, 0, 0.14);
  --brand: #fde203;
  --gold: #fde203;
  --gold-hi: #fff8b0;
  --text: #ffffff;
  --muted: #a89f70;
  --tile: rgba(12, 12, 10, 0.94);
  --tile-border: rgba(253, 226, 3, 0.5);
  --btn-grad-a: #ffe94d;
  --btn-grad-b: #c9a400;
  --btn-text: #000000;
  --chrome: rgba(0, 0, 0, 0.92);
  --brand-a22: rgba(253, 226, 3, 0.22);
  --brand-a35: rgba(253, 226, 3, 0.35);
  --brand-a45: rgba(253, 226, 3, 0.45);
  --brand-a08: rgba(253, 226, 3, 0.08);
  --brand-a10: rgba(253, 226, 3, 0.1);
  --brand-a12: rgba(253, 226, 3, 0.12);
  --brand-a16: rgba(253, 226, 3, 0.16);
  --brand-a70: rgba(253, 226, 3, 0.7);

  --tg-bg: #000000;
  --tg-bg2: rgba(0, 0, 0, 0.96);
  --tg-bubble: rgba(12, 12, 10, 0.94);
  --tg-bubble-border: rgba(253, 226, 3, 0.45);
  --tg-accent: #fde203;
  --tg-text: #ffffff;
  --tg-muted: #a89f70;
  --tg-btn: #3a3200;
  --tg-btn-active: #c9a400;
}

html.brand-theme-on body.tg-app,
html.brand-theme-on body.hybrid,
html.brand-theme-on body.hub-page {
  color: var(--text);
  background:
    linear-gradient(90deg, var(--brand) 0 3px, transparent 3px),
    radial-gradient(ellipse 90% 50% at 50% -8%, var(--glow-a), transparent 55%),
    radial-gradient(ellipse 50% 40% at 95% 8%, var(--glow-b), transparent 50%),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg0) 45%, #000000 100%);
  border-top: 3px solid var(--brand);
}

html.brand-theme-on .tg-topbar {
  background: var(--chrome);
  border-bottom: 1px solid var(--brand-a22);
  backdrop-filter: blur(10px);
}

html.brand-theme-on .tg-btn,
html.brand-theme-on .tg-btn--primary {
  border: 1px solid var(--brand-a35);
}

html.brand-theme-on .tg-btn--primary {
  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
  color: var(--btn-text);
  border-color: transparent;
}

html.brand-theme-on .cabinet-stat,
html.brand-theme-on .tg-bubble {
  border-color: var(--tile-border);
  background: var(--tile);
}

html.brand-theme-on .tg-topbar__lang {
  border: 1px solid var(--brand-a35);
  color: var(--gold);
}

/* Theme chips (кабинет) */
.brand-theme-picker {
  margin: 0 0 16px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--tile-border, rgba(255, 255, 255, 0.12));
}
.brand-theme-picker__title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, var(--tg-accent));
}
.brand-theme-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.brand-theme-swatch {
  appearance: none;
  border: 2px solid transparent;
  border-radius: 10px;
  min-height: 44px;
  cursor: pointer;
  padding: 0;
  background: var(--swatch, #333);
  position: relative;
}
.brand-theme-swatch.is-on {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--brand, var(--tg-accent));
}
.brand-theme-swatch__name {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.brand-theme-picker__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted, var(--tg-muted));
}

/* ── Site-nav → hybrid chrome (не Telegram-синий) ── */
html.brand-theme-on {
  --sn-bg: var(--chrome);
  --sn-bg2: var(--bg0);
  --sn-accent: var(--gold);
  --sn-text: var(--text);
  --sn-border: var(--brand-a22);
  --dock-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

html.brand-theme-on .site-nav {
  background: var(--chrome);
  border-bottom: 1px solid var(--brand-a22);
  /* не ставить filter/backdrop-filter — ломает fixed-drawer, если он внутри шапки */
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}

html.brand-theme-on .site-nav__mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 28%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--brand-a45);
}

html.brand-theme-on .site-nav__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold-hi);
  text-decoration: none;
}

html.brand-theme-on .site-nav__brand-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

html.brand-theme-on .site-nav__btn {
  border: 1px solid var(--brand-a35);
  background: var(--brand-a08, rgba(215, 24, 42, 0.08));
  color: var(--gold);
  border-radius: 8px;
}

html.brand-theme-on .site-nav__pc a {
  color: var(--muted);
  opacity: 1;
}
html.brand-theme-on .site-nav__pc a:hover,
html.brand-theme-on .site-nav__pc a.is-on {
  color: var(--gold-hi);
  background: var(--brand-a10, rgba(215, 24, 42, 0.1));
}

html.brand-theme-on .site-nav__drawer {
  background: var(--bg0);
  border-left: 1px solid var(--brand-a22);
}

html.brand-theme-on .site-nav__drawer-hd {
  background: var(--chrome);
  border-bottom: 1px solid var(--brand-a22);
}

html.brand-theme-on .site-nav__drawer-title {
  color: var(--gold-hi);
}

html.brand-theme-on .site-nav__drawer-close {
  color: var(--gold);
}

html.brand-theme-on .site-nav__section {
  color: var(--brand-a70, var(--muted));
}

html.brand-theme-on .site-nav__link {
  background: var(--tile);
  border: 1px solid var(--tile-border);
  color: var(--gold-hi);
  border-radius: 12px;
  font-weight: 700;
}
html.brand-theme-on .site-nav__link:hover,
html.brand-theme-on .site-nav__link:focus-visible {
  border-color: var(--gold);
  color: var(--gold-hi);
  background: var(--brand-a12, rgba(215, 24, 42, 0.12));
  box-shadow: none;
}
html.brand-theme-on .site-nav__link[aria-current="page"] {
  color: var(--gold-hi);
  background: var(--brand-a16, rgba(215, 24, 42, 0.16));
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand-a35);
}

html.brand-theme-on .site-nav__logout {
  margin: 12px 14px 16px;
  width: calc(100% - 28px);
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--tile-border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--gold-hi);
  font-weight: 700;
  cursor: pointer;
}
html.brand-theme-on .site-nav__logout:hover {
  border-color: var(--gold);
}

/* Скрыть дубль tg-topbar на страницах с site-nav (как одна шапка в демо) */
html.brand-theme-on body.tg-app:has(#site-nav-root) > .tg-topbar {
  display: none;
}

/* Нижний dock как в hybrid */
.brand-dock {
  display: none;
}
html.brand-theme-on .brand-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  /* равные колонки при любом числе пунктов (3 или 4 с голосовым помощником) */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--dock-h) + var(--safe-b));
  padding: 4px 4px var(--safe-b);
  background: var(--chrome);
  border-top: 2px solid var(--brand);
  backdrop-filter: blur(12px);
}
html.brand-theme-on .brand-dock a,
html.brand-theme-on .brand-dock button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  min-height: 48px;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
html.brand-theme-on .brand-dock a.is-on { color: var(--gold); }
html.brand-theme-on .brand-dock__ico {
  width: 22px;
  height: 22px;
  display: block;
}
html.brand-theme-on .brand-dock__ico svg {
  width: 100%;
  height: 100%;
  display: block;
}
html.brand-theme-on body.has-brand-dock {
  padding-bottom: calc(var(--dock-h) + var(--safe-b) + 16px) !important;
}
html.brand-theme-on body.has-cabinet-bar.has-brand-dock {
  --cabinet-bar-offset: calc(72px + var(--dock-h) + var(--safe-b));
}
html.brand-theme-on body.has-brand-dock .cabinet-bar {
  bottom: calc(var(--dock-h) + var(--safe-b));
  z-index: 25;
  background: var(--chrome);
  border-top: 1px solid var(--brand-a22);
}
@media (min-width: 768px) {
  html.brand-theme-on .brand-dock { display: none; }
  /* dock скрыт; cabinet-bar остаётся — нужен отступ под него */
  html.brand-theme-on body.has-brand-dock:not(.has-cabinet-bar) {
    padding-bottom: 24px !important;
  }
  html.brand-theme-on body.has-cabinet-bar,
  html.brand-theme-on body.has-cabinet-bar.has-brand-dock {
    --cabinet-bar-offset: 96px;
    padding-bottom: calc(var(--cabinet-bar-offset, 96px) + 20px) !important;
  }
  html.brand-theme-on body.has-brand-dock .cabinet-bar {
    bottom: 0;
  }
}

/* Кабинет / кнопки в стиле hybrid */
html.brand-theme-on .cabinet-page {
  max-width: 1120px;
  padding-top: 16px;
  padding-left: 14px;
  padding-right: 14px;
  /* не затирать отступ под нижнюю панель */
  padding-bottom: calc(var(--cabinet-bar-offset, 28px) + env(safe-area-inset-bottom, 0px));
}
html.brand-theme-on body.has-cabinet-bar .cabinet-page {
  padding-bottom: calc(var(--cabinet-bar-offset, 96px) + 24px + env(safe-area-inset-bottom, 0px));
}
html.brand-theme-on .cabinet-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 520px) {
  html.brand-theme-on .cabinet-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
html.brand-theme-on .cabinet-stat {
  background: rgba(20, 8, 10, 0.75);
  border: 1px solid var(--brand-a22);
  border-radius: 14px;
}
html.brand-theme-on .cabinet-stat__value {
  color: var(--gold-hi);
  font-weight: 800;
}
html.brand-theme-on .cabinet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 640px) {
  html.brand-theme-on .cabinet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
html.brand-theme-on .cabinet-actions .tg-btn {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--tile-border);
  color: var(--gold-hi);
}
html.brand-theme-on .cabinet-actions .tg-btn--primary {
  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
  color: var(--btn-text);
  border-color: transparent;
}
html.brand-theme-on .cabinet-logout {
  width: 100%;
  margin-top: 12px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--tile-border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--gold-hi);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
html.brand-theme-on .cabinet-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Mobile hub keyboard — ближе к демо-плиткам */
html.brand-theme-on .tg-keyboard {
  background: transparent;
  border-top: none;
}
html.brand-theme-on .tg-btn {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--tile-border);
  color: var(--gold-hi);
  border-radius: 12px;
  font-weight: 700;
}
html.brand-theme-on #mi-btn-search.tg-btn,
html.brand-theme-on .tg-btn.tg-btn--hero {
  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
  color: var(--btn-text);
  border-color: transparent;
}

/* Hybrid buttons */
html.brand-theme-on .btn,
.hub-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
html.brand-theme-on .btn--gold,
.hub-page .btn--gold {
  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
  color: var(--btn-text);
}
html.brand-theme-on .btn--ghost,
.hub-page .btn--ghost {
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--tile-border);
  color: var(--gold-hi);
}

/* Moves catalog under brand theme (after moves-catalog.css) */
html.brand-theme-on body.moves-page {
  --bg: var(--bg0);
  --bg2: var(--chrome);
  --bg3: var(--tile);
  --line: var(--tile-border);
  --accent: var(--gold);
  --accent2: var(--brand);
  color: var(--text);
  max-width: none !important;
  width: 100%;
  margin: 0;
  background:
    linear-gradient(90deg, var(--brand) 0 3px, transparent 3px),
    radial-gradient(ellipse 90% 50% at 50% -8%, var(--glow-a), transparent 55%),
    radial-gradient(ellipse 50% 40% at 95% 8%, var(--glow-b), transparent 50%),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg0) 45%, #000000 100%) !important;
  border-top: 3px solid var(--brand);
}
html.brand-theme-on body.moves-page .move-card {
  border-color: var(--tile-border);
  background: var(--tile);
}
html.brand-theme-on body.auth-page {
  color: var(--text);
  background:
    linear-gradient(90deg, var(--brand) 0 3px, transparent 3px),
    radial-gradient(ellipse 90% 50% at 50% -8%, var(--glow-a), transparent 55%),
    radial-gradient(ellipse 50% 40% at 95% 8%, var(--glow-b), transparent 50%),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg0) 45%, #000000 100%) !important;
  border-top: 3px solid var(--brand);
}
html.brand-theme-on body.auth-page.has-brand-dock {
  padding-bottom: calc(var(--dock-h) + var(--safe-b) + 16px) !important;
}
@media (min-width: 768px) {
  html.brand-theme-on body.auth-page.has-brand-dock {
    padding-bottom: 24px !important;
  }
}
html.brand-theme-on .moves-page button.primary {
  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
  color: var(--btn-text);
}
html.brand-theme-on .kind-row button.active,
html.brand-theme-on .color-row button.active,
html.brand-theme-on .effect-row button.active,
html.brand-theme-on .moves-filters button.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--btn-text);
}
html.brand-theme-on .color-row button[data-color="ALL"].active,
html.brand-theme-on .color-row button.active[data-color=""] {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}