/**
 * MagicBox AI — overlay theme for /app/
 * Подключается ПОСЛЕ app.css. Базовый app.css не меняется.
 * Включение: UI_THEME=magicbox в .env
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap');

html[data-ui-theme="magicbox"]:not([data-theme="light"]),
html[data-ui-theme="magicbox"]:not([data-theme="light"]):root {
  color-scheme: dark;
  --bg: #000000;
  --elev: #0a0a0a;
  --card: #111111;
  --modal: #141414;
  --border: rgba(255, 255, 255, .08);
  --text: #f5f5f5;
  --muted: #9a9aa0;
  --header-bg: rgba(0, 0, 0, .92);
  --surface: #111111;
  --surface-2: #0d0d0d;
  --surface-3: #0a0a0a;
  --surface-4: #1a1a1a;
  --surface-5: #0f0f0f;
  --hover: #141414;
  --chip-on: #1a0a2e;
  --icon-on: #0d1a2e;
  --input-bg: #0a0a0a;
  --gold: #00d4ff;
  --orange: #ff00ff;
  --accent-text: #ffffff;
  --promo-bg: linear-gradient(135deg, #0a0020 0%, #111111 100%);
  --promo-border: rgba(160, 32, 240, .25);
  --dock-fade: linear-gradient(transparent, #000 40%);
  --neon-blue: #00d4ff;
  --neon-purple: #a020f0;
  --neon-magenta: #ff00ff;
  --neon-gold: #d4af37;
  --gradient-brand: linear-gradient(90deg, #00d4ff, #a020f0, #ff00ff);
  --glow-ring: 0 0 0 3px rgba(160, 32, 240, .22), 0 0 16px rgba(0, 212, 255, .14);
  --glow-hover: 0 0 14px rgba(160, 32, 240, .22), 0 0 20px rgba(0, 212, 255, .12);
  --glow-strong: 0 0 22px rgba(0, 212, 255, .28), 0 0 28px rgba(160, 32, 240, .22);
}

html[data-ui-theme="magicbox"][data-theme="light"],
html[data-ui-theme="magicbox"][data-theme="light"]:root {
  color-scheme: light;
  --bg: #eceef2;
  --elev: #ffffff;
  --card: #ffffff;
  --modal: #ffffff;
  --border: rgba(20, 22, 30, .12);
  --text: #16181f;
  --muted: #646874;
  --header-bg: rgba(236, 238, 242, .92);
  --surface: #ffffff;
  --surface-2: #f3f4f7;
  --surface-3: #e8eaef;
  --surface-4: #e2e4ea;
  --surface-5: #ffffff;
  --hover: #e8eaef;
  --chip-on: #ede5ff;
  --icon-on: #e0f7ff;
  --input-bg: #f7f8fa;
  --gold: #0077aa;
  --orange: #a020f0;
  --accent-text: #ffffff;
  --promo-bg: linear-gradient(135deg, #e8f4ff, #f3f0ff);
  --promo-border: rgba(160, 32, 240, .22);
  --dock-fade: linear-gradient(transparent, #eceef2 45%);
  --neon-blue: #0077aa;
  --neon-purple: #8a2be2;
  --neon-magenta: #c026d3;
  --neon-gold: #b8860b;
  --gradient-brand: linear-gradient(90deg, #00a8d4, #8a2be2, #c026d3);
  --glow-ring: 0 0 0 3px rgba(138, 43, 226, .16), 0 0 12px rgba(0, 168, 212, .1);
  --glow-hover: 0 0 12px rgba(138, 43, 226, .14), 0 0 16px rgba(0, 168, 212, .08);
  --glow-strong: 0 0 18px rgba(0, 168, 212, .18), 0 0 24px rgba(138, 43, 226, .12);
}

body {
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(160, 32, 240, .25));
}

.logo-brand--compact {
  font-size: 13px;
}

.logo-magic {
  color: #fff;
}

.logo-box {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.logo-ai {
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .62em;
  font-weight: 700;
  color: #fff;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    var(--gradient-brand) border-box;
  box-shadow: 0 0 10px rgba(160, 32, 240, .28);
  vertical-align: super;
}

html[data-ui-theme="magicbox"][data-theme="light"] .logo-magic {
  color: #16181f;
}

html[data-ui-theme="magicbox"][data-theme="light"] .logo-ai {
  color: #16181f;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-brand) border-box;
  box-shadow: 0 0 8px rgba(138, 43, 226, .18);
}

html[data-ui-theme="magicbox"][data-theme="light"] .logo-brand {
  filter: none;
}

.logo-brand--compact .logo-ai {
  margin-left: 3px;
  padding: 1px 5px;
  font-size: .58em;
}

.logo-mark {
  display: none;
}

.logo-name {
  display: none;
}

html[data-ui-theme="magicbox"] .dock .go,
html[data-ui-theme="magicbox"] .gen,
html[data-ui-theme="magicbox"] .send,
html[data-ui-theme="magicbox"] .cookie-accept,
html[data-ui-theme="magicbox"] .hist-search button,
html[data-ui-theme="magicbox"] .job-open,
html[data-ui-theme="magicbox"] .support-form .gen,
html[data-ui-theme="magicbox"] .login-btn,
html[data-ui-theme="magicbox"] .bal-topup,
html[data-ui-theme="magicbox"] .buy {
  background: var(--gradient-brand);
  color: var(--accent-text);
  box-shadow: 0 0 16px rgba(160, 32, 240, .22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

html[data-ui-theme="magicbox"] .dock .go:hover,
html[data-ui-theme="magicbox"] .gen:hover,
html[data-ui-theme="magicbox"] .send:hover,
html[data-ui-theme="magicbox"] .cookie-accept:hover,
html[data-ui-theme="magicbox"] .hist-search button:hover,
html[data-ui-theme="magicbox"] .job-open:hover,
html[data-ui-theme="magicbox"] .login-btn:hover,
html[data-ui-theme="magicbox"] .bal-topup:hover,
html[data-ui-theme="magicbox"] .buy:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow-strong);
  filter: brightness(1.05);
}

html[data-ui-theme="magicbox"] .dock .go:focus-visible,
html[data-ui-theme="magicbox"] .gen:focus-visible,
html[data-ui-theme="magicbox"] .send:focus-visible,
html[data-ui-theme="magicbox"] .cookie-accept:focus-visible,
html[data-ui-theme="magicbox"] .hist-search button:focus-visible,
html[data-ui-theme="magicbox"] .job-open:focus-visible,
html[data-ui-theme="magicbox"] .login-btn:focus-visible,
html[data-ui-theme="magicbox"] .bal-topup:focus-visible,
html[data-ui-theme="magicbox"] .buy:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-glow-cta, var(--glow-strong));
}

.dock .go:active,
.gen:active,
.send:active,
.cookie-accept:active,
.hist-search button:active,
.job-open:active,
.login-btn:active {
  transform: translateY(0);
  filter: brightness(.98);
}

.job-copy,
.linkish {
  color: var(--neon-blue);
}

.job-copy:hover,
.linkish:hover {
  color: var(--neon-magenta);
}

.logo {
  max-width: min(13em, 48vw);
  overflow: hidden;
}

@media (max-width: 420px) {
  .logo-brand--compact {
    font-size: 11px;
  }

  .logo-brand--compact .logo-magic {
    display: none;
  }
}

input:focus,
textarea:focus,
select:focus {
  /* Canonical form focus lives in interaction.css / interaction-tokens.css */
  border-color: var(--ui-focus-border, rgba(168, 85, 247, 0.55));
  box-shadow: var(--ui-focus-glow);
}

.ctab.is-on i {
  border-color: var(--neon-purple);
  box-shadow: var(--glow-ring);
}

.chip.is-on,
.pill.is-on {
  border-color: var(--neon-purple);
  color: #fff;
  background: rgba(20, 8, 40, .95);
  box-shadow:
    0 0 0 1px rgba(160, 32, 240, .45),
    0 0 18px rgba(160, 32, 240, .55),
    0 0 34px rgba(0, 212, 255, .28);
}

.model-opt.is-on {
  border-color: var(--neon-purple);
  box-shadow: 0 0 0 1px rgba(160, 32, 240, .25), 0 0 12px rgba(0, 212, 255, .1);
}

html[data-ui-theme="magicbox"] .model-opt.is-on .model-opt-radio {
  border-color: var(--neon-blue);
  background: var(--neon-blue);
  box-shadow: 0 0 10px rgba(0, 212, 255, .45);
}

.plan-card.is-on .check {
  border-color: var(--neon-purple);
  box-shadow: inset 0 0 0 4px var(--neon-purple);
}

.job-tag-price {
  background: rgba(0, 212, 255, .1);
  color: var(--neon-blue);
  border-color: rgba(160, 32, 240, .25);
}

.hist-chip.is-on span {
  background: rgba(160, 32, 240, .2);
  color: var(--neon-blue);
}

.ticket-status {
  color: var(--neon-purple);
}

.bal-topup,
.bal-chip.is-on {
  background: var(--gradient-brand);
  color: var(--accent-text);
}

.badge-warn {
  background: rgba(160, 32, 240, .15);
  color: var(--neon-purple);
  border-color: rgba(160, 32, 240, .25);
}

/* --- Hover glow: icons, dock, cards, chips --- */

html[data-ui-theme="magicbox"] .icon i,
html[data-ui-theme="magicbox"] .ctab i {
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}

html[data-ui-theme="magicbox"] .icon:hover i,
html[data-ui-theme="magicbox"] .icon.is-on i {
  border-color: rgba(160, 32, 240, .55);
  box-shadow: var(--glow-ring);
  background: var(--icon-on);
  transform: translateY(-1px);
}

html[data-ui-theme="magicbox"] .icon:hover {
  color: var(--neon-blue);
}

html[data-ui-theme="magicbox"] .ctab:hover i {
  border-color: rgba(160, 32, 240, .5);
  box-shadow: var(--glow-ring);
  background: var(--icon-on);
  transform: translateY(-1px);
}

html[data-ui-theme="magicbox"] .ctab:hover {
  color: var(--text);
}

html[data-ui-theme="magicbox"] .ctab.is-on i {
  border-color: var(--neon-purple);
  box-shadow: var(--glow-ring);
}

html[data-ui-theme="magicbox"] .dock a.dock-link {
  transition: var(--ui-transition, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease, background .15s ease);
  border-color: rgba(255, 255, 255, .1);
}

html[data-ui-theme="magicbox"] .dock a.dock-link:hover,
html[data-ui-theme="magicbox"] .dock a.dock-link:focus-visible {
  border-color: var(--ui-hover-nav-border, rgba(0, 212, 255, .6));
  background: #140828;
  color: #fff;
  transform: none;
  box-shadow: var(--ui-hover-nav-glow,
    0 0 0 1px rgba(160, 32, 240, .45),
    0 0 18px rgba(160, 32, 240, .55),
    0 0 34px rgba(0, 212, 255, .28));
}

html[data-ui-theme="magicbox"][data-theme="light"] .dock a.dock-link {
  border-color: rgba(20, 22, 30, .12);
  background: #fff;
  color: var(--text);
}

html[data-ui-theme="magicbox"][data-theme="light"] .dock a.dock-link:hover,
html[data-ui-theme="magicbox"][data-theme="light"] .dock a.dock-link:focus-visible {
  background: #ede5ff;
  color: #16181f;
  border-color: rgba(138, 43, 226, .35);
}

html[data-ui-theme="magicbox"] .dock a.dock-link:active {
  transform: none;
  box-shadow:
    0 0 0 1px rgba(160, 32, 240, .35),
    0 0 12px rgba(160, 32, 240, .4);
}

html[data-ui-theme="magicbox"] .promo {
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

html[data-ui-theme="magicbox"] .promo:hover {
  border-color: rgba(160, 32, 240, .45);
  box-shadow: var(--glow-hover);
  transform: translateY(-1px);
}

html[data-ui-theme="magicbox"] .c-card {
  transition: box-shadow .15s ease, transform .15s ease;
}

html[data-ui-theme="magicbox"] .c-card:hover {
  box-shadow: var(--ui-hover-card-glow, var(--glow-hover));
  transform: translateY(-1px);
}

html[data-ui-theme="magicbox"] .menu a {
  transition: var(--ui-transition, border-color .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease, transform .15s ease);
  border: 1px solid transparent;
}

html[data-ui-theme="magicbox"] .menu a:hover,
html[data-ui-theme="magicbox"] .menu a.is-on {
  border-color: var(--ui-hover-nav-border, rgba(0, 212, 255, .6));
  background: var(--ui-hover-nav-bg, rgba(20, 8, 40, .95));
  color: #fff;
  box-shadow: var(--ui-hover-nav-glow,
    0 0 0 1px rgba(160, 32, 240, .45),
    0 0 18px rgba(160, 32, 240, .55),
    0 0 34px rgba(0, 212, 255, .28));
}

html[data-ui-theme="magicbox"] .menu a:focus-visible {
  border-color: rgba(0, 212, 255, .6);
  background: rgba(20, 8, 40, .95);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(160, 32, 240, .45),
    0 0 18px rgba(160, 32, 240, .55),
    0 0 34px rgba(0, 212, 255, .28);
}

html[data-ui-theme="magicbox"][data-theme="light"] .menu a:hover,
html[data-ui-theme="magicbox"][data-theme="light"] .menu a:focus-visible,
html[data-ui-theme="magicbox"][data-theme="light"] .menu a.is-on {
  background: #ede5ff;
  color: #16181f;
  border-color: rgba(138, 43, 226, .35);
  box-shadow:
    0 0 0 1px rgba(138, 43, 226, .25),
    0 0 14px rgba(138, 43, 226, .3),
    0 0 24px rgba(0, 168, 212, .15);
}

/* Create flat tabs use the same .menu a hover/active pill as Home (no underline fork). */
html[data-ui-theme="magicbox"] .menu > a:hover,
html[data-ui-theme="magicbox"] .menu > a:focus-visible {
  transform: none;
}

html[data-ui-theme="magicbox"][data-theme="light"] .lang-switch a.is-on {
  color: #fff;
  background: var(--gradient-brand);
}

html[data-ui-theme="magicbox"][data-theme="light"] .model-catalog-card {
  background: #fff;
  color: var(--text);
}

html[data-ui-theme="magicbox"] .model-catalog-card:hover {
  border-color: var(--ui-hover-card-border, rgba(168, 85, 247, 0.4));
  box-shadow: var(--ui-hover-card-glow, var(--glow-hover));
}

html[data-ui-theme="magicbox"][data-theme="light"] .model-catalog-card:hover {
  color: var(--text);
}

html[data-ui-theme="magicbox"] .model-catalog-hint {
  color: var(--muted);
}

html[data-ui-theme="magicbox"] .pill,
html[data-ui-theme="magicbox"] .chip,
html[data-ui-theme="magicbox"] .hist-chip,
html[data-ui-theme="magicbox"] .model-row,
html[data-ui-theme="magicbox"] .model-opt,
html[data-ui-theme="magicbox"] .job-reuse,
html[data-ui-theme="magicbox"] .t-card,
html[data-ui-theme="magicbox"] .upload-sq {
  transition: var(--ui-transition, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease, background .15s ease);
}

html[data-ui-theme="magicbox"] .pill {
  border-color: rgba(255, 255, 255, .1);
  background: var(--surface);
  color: var(--text);
}

html[data-ui-theme="magicbox"] .pill:hover,
html[data-ui-theme="magicbox"] .pill:focus-visible,
html[data-ui-theme="magicbox"] .pill.is-on {
  border-color: var(--ui-hover-nav-border, rgba(0, 212, 255, .6));
  background: var(--ui-hover-nav-bg, rgba(20, 8, 40, .95));
  color: #fff;
  transform: none;
  box-shadow: var(--ui-hover-nav-glow,
    0 0 0 1px rgba(160, 32, 240, .45),
    0 0 18px rgba(160, 32, 240, .55),
    0 0 34px rgba(0, 212, 255, .28));
}

html[data-ui-theme="magicbox"][data-theme="light"] .pill {
  border-color: rgba(20, 22, 30, .12);
  background: #fff;
  color: var(--text);
}

html[data-ui-theme="magicbox"][data-theme="light"] .pill:hover,
html[data-ui-theme="magicbox"][data-theme="light"] .pill:focus-visible,
html[data-ui-theme="magicbox"][data-theme="light"] .pill.is-on {
  background: #ede5ff;
  color: #16181f;
  border-color: rgba(138, 43, 226, .35);
  box-shadow:
    0 0 0 1px rgba(138, 43, 226, .25),
    0 0 14px rgba(138, 43, 226, .3),
    0 0 24px rgba(0, 168, 212, .15);
}

html[data-ui-theme="magicbox"] .upload-sq:hover,
html[data-ui-theme="magicbox"] .upload-sq:focus-visible {
  border-color: var(--ui-hover-form-border, rgba(168, 85, 247, 0.4));
  background: rgba(168, 85, 247, 0.06);
  transform: none;
  box-shadow: var(--ui-hover-form-glow, var(--ui-hover-glow, 0 0 8px rgba(168, 85, 247, 0.1)));
}

html[data-ui-theme="magicbox"] .chip:hover,
html[data-ui-theme="magicbox"] .model-row:hover,
html[data-ui-theme="magicbox"] .model-opt:not(.is-locked):hover,
html[data-ui-theme="magicbox"] .job-reuse:hover,
html[data-ui-theme="magicbox"] .t-card:hover {
  border-color: var(--ui-hover-border, rgba(168, 85, 247, 0.4));
  background: var(--ui-hover-soft, rgba(168, 85, 247, 0.06));
  box-shadow: var(--ui-hover-glow, var(--glow-hover));
}

html[data-ui-theme="magicbox"] .chip:focus-visible,
html[data-ui-theme="magicbox"] .model-row:focus-visible,
html[data-ui-theme="magicbox"] .model-opt:not(.is-locked):focus-visible,
html[data-ui-theme="magicbox"] .job-reuse:focus-visible,
html[data-ui-theme="magicbox"] .t-card:focus-visible,
html[data-ui-theme="magicbox"] .hist-chip:focus-visible {
  outline: none;
  border-color: var(--ui-focus-border, rgba(168, 85, 247, 0.55));
  box-shadow: var(--ui-focus-glow, var(--glow-hover));
}

html[data-ui-theme="magicbox"] .hist-chip:hover {
  border-color: rgba(160, 32, 240, .4);
  box-shadow: var(--glow-hover);
  color: var(--neon-blue);
}

html[data-ui-theme="magicbox"] .theme-toggle,
html[data-ui-theme="magicbox"] .help-ico,
html[data-ui-theme="magicbox"] .bal,
html[data-ui-theme="magicbox"] .ava,
html[data-ui-theme="magicbox"] .lang-switch,
html[data-ui-theme="magicbox"] .lang-switch a,
html[data-ui-theme="magicbox"] .h-row > a {
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}

html[data-ui-theme="magicbox"] .ava {
  border: 1px solid var(--border);
}

html[data-ui-theme="magicbox"] .h-row > a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
}

html[data-ui-theme="magicbox"] .theme-toggle:hover,
html[data-ui-theme="magicbox"] .help-ico:hover,
html[data-ui-theme="magicbox"] .ava:hover {
  border-color: var(--ui-hover-quiet-border, rgba(168, 85, 247, 0.35));
  background: var(--ui-hover-quiet-bg, rgba(168, 85, 247, 0.1));
  color: #fff;
  transform: none;
  box-shadow: var(--ui-hover-glow, 0 0 8px rgba(168, 85, 247, 0.1));
}

html[data-ui-theme="magicbox"] .theme-toggle:focus-visible,
html[data-ui-theme="magicbox"] .help-ico:focus-visible,
html[data-ui-theme="magicbox"] .ava:focus-visible,
html[data-ui-theme="magicbox"] .bal:focus-visible,
html[data-ui-theme="magicbox"] .lang-switch a:focus-visible,
html[data-ui-theme="magicbox"] .h-row > a:focus-visible {
  border-color: var(--ui-focus-nav-border, rgba(0, 212, 255, .6));
  background: var(--ui-focus-nav-bg, rgba(20, 8, 40, .95));
  color: #fff;
  transform: none;
  box-shadow: var(--ui-focus-nav-glow,
    0 0 0 1px rgba(160, 32, 240, .45),
    0 0 18px rgba(160, 32, 240, .55),
    0 0 34px rgba(0, 212, 255, .28));
}

html[data-ui-theme="magicbox"] .bal:hover,
html[data-ui-theme="magicbox"] .lang-switch:hover,
html[data-ui-theme="magicbox"] .lang-switch a:hover,
html[data-ui-theme="magicbox"] .h-row > a:hover {
  border-color: var(--ui-hover-nav-border, rgba(0, 212, 255, .6));
  background: var(--ui-hover-nav-bg, rgba(20, 8, 40, .95));
  color: #fff;
  transform: none;
  box-shadow: var(--ui-hover-nav-glow,
    0 0 0 1px rgba(160, 32, 240, .45),
    0 0 18px rgba(160, 32, 240, .55),
    0 0 34px rgba(0, 212, 255, .28));
}

html[data-ui-theme="magicbox"] .lang-switch a.is-on:hover,
html[data-ui-theme="magicbox"] .lang-switch a.is-on:focus-visible {
  background: var(--gradient-brand);
  color: #fff;
}

html[data-ui-theme="magicbox"][data-theme="light"] .theme-toggle:hover,
html[data-ui-theme="magicbox"][data-theme="light"] .help-ico:hover,
html[data-ui-theme="magicbox"][data-theme="light"] .ava:hover {
  background: var(--ui-hover-quiet-bg, rgba(138, 43, 226, 0.08));
  color: #16181f;
  border-color: var(--ui-hover-quiet-border, rgba(138, 43, 226, 0.3));
  box-shadow: var(--ui-hover-glow, 0 0 8px rgba(138, 43, 226, 0.1));
  transform: none;
}

html[data-ui-theme="magicbox"][data-theme="light"] .theme-toggle:focus-visible,
html[data-ui-theme="magicbox"][data-theme="light"] .help-ico:focus-visible,
html[data-ui-theme="magicbox"][data-theme="light"] .ava:focus-visible,
html[data-ui-theme="magicbox"][data-theme="light"] .bal:hover,
html[data-ui-theme="magicbox"][data-theme="light"] .bal:focus-visible,
html[data-ui-theme="magicbox"][data-theme="light"] .lang-switch:hover,
html[data-ui-theme="magicbox"][data-theme="light"] .lang-switch a:hover,
html[data-ui-theme="magicbox"][data-theme="light"] .lang-switch a:focus-visible,
html[data-ui-theme="magicbox"][data-theme="light"] .h-row > a:hover,
html[data-ui-theme="magicbox"][data-theme="light"] .h-row > a:focus-visible {
  background: #ede5ff;
  color: #16181f;
  border-color: rgba(138, 43, 226, .35);
  transform: none;
  box-shadow:
    0 0 0 1px rgba(138, 43, 226, .25),
    0 0 14px rgba(138, 43, 226, .3),
    0 0 24px rgba(0, 168, 212, .15);
}

html[data-ui-theme="magicbox"][data-theme="light"] .lang-switch a.is-on:hover,
html[data-ui-theme="magicbox"][data-theme="light"] .lang-switch a.is-on:focus-visible {
  background: var(--gradient-brand);
  color: #fff;
}

html[data-ui-theme="magicbox"] .buy-secondary:hover {
  border-color: rgba(160, 32, 240, .4);
  box-shadow: var(--glow-hover);
  color: var(--neon-blue);
}

/* --- create v2 (magicbox overlay) --- */
html[data-ui-theme="magicbox"] .create-layout {
  gap: 20px;
}

html[data-ui-theme="magicbox"] .create-sidebar-inner {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: none;
}

@media (min-width: 960px) {
  html[data-ui-theme="magicbox"] .sheet-create-v2-video .create-sidebar-inner {
    border-radius: var(--cv2-radius-lg, 16px);
    border: 1px solid var(--cv2-border, rgba(255, 255, 255, 0.1));
    box-shadow: none;
  }

  html[data-ui-theme="magicbox"] .sheet-create-v2-video .create-sidebar-preview-video:not(.has-result) {
    display: none;
  }
}

html[data-ui-theme="magicbox"] .sheet-h-create-v2-video .sheet-h-close,
html[data-ui-theme="magicbox"] .sheet-create-v2-video .aspect-all-h .x {
  box-sizing: border-box;
  border: 1px solid var(--border);
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

html[data-ui-theme="magicbox"] .sheet-h-create-v2-video .sheet-h-close:hover,
html[data-ui-theme="magicbox"] .sheet-h-create-v2-video .sheet-h-close:focus-visible,
html[data-ui-theme="magicbox"] .sheet-create-v2-video .aspect-all-h .x:hover,
html[data-ui-theme="magicbox"] .sheet-create-v2-video .aspect-all-h .x:focus-visible {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  outline: none;
  box-shadow: none;
}

html[data-ui-theme="magicbox"] .resolution-picker-v2-opt.is-on,
html[data-ui-theme="magicbox"] .create-quick-tool-card.is-on,
html[data-ui-theme="magicbox"] .create-quick-tool.is-on,
html[data-ui-theme="magicbox"] .model-opt.is-on {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 0 18px rgba(168, 85, 247, 0.12);
  color: #c084fc;
}

html[data-ui-theme="magicbox"] .sheet-create-v2-video .pill.is-on,
html[data-ui-theme="magicbox"] .sheet-create-v2-video .chip.is-on {
  box-shadow: var(--cv2-glow-selected, 0 0 0 1px rgba(168, 85, 247, 0.12), 0 0 8px rgba(168, 85, 247, 0.06));
  background: var(--cv2-accent-soft, rgba(168, 85, 247, 0.12));
  transform: none;
}

html[data-ui-theme="magicbox"] .sheet-create-v2-video .pill:not(.is-on):hover,
html[data-ui-theme="magicbox"] .sheet-create-v2-video .pill:not(.is-on):focus-visible {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
  transform: none;
}

html[data-ui-theme="magicbox"] .create-v2-ctabs .ctab.is-on {
  border-color: transparent;
  box-shadow: none;
  color: var(--text, #fff);
}

html[data-ui-theme="magicbox"] .sheet-create-v2 .task-mode-toggle-image .task-mode-btn.is-on {
  color: var(--text, #fff);
}

html[data-ui-theme="magicbox"] .sheet-create-v2 .suno-mode-toggle-v2 .task-mode-btn.is-on,
html[data-ui-theme="magicbox"] .sheet-create-v2 .suno-track-pills-v2 .pill.is-on {
  color: #0a0b0c;
  border-color: rgba(255, 255, 255, 0.9);
  background: #fff;
  box-shadow: none;
}

html[data-ui-theme="magicbox"] .create-quick-tool:hover {
  border-color: rgba(160, 32, 240, .45);
  box-shadow: var(--glow-hover);
}

html[data-ui-theme="magicbox"] .create-result-media-wrap {
  border: 1px solid var(--border);
  box-shadow: var(--glow-hover);
}

html[data-ui-theme="magicbox"] .create-result-grid-item.is-on {
  outline-color: var(--neon-blue);
  box-shadow: var(--glow-ring);
}

html[data-ui-theme="magicbox"] .fg-settings-advanced summary:hover {
  color: var(--neon-blue);
}

@media (max-width: 767px) {
  html[data-ui-theme="magicbox"] .sheet-create-v2-video .create-v2-ctabs .ctab.is-on {
    border-color: var(--cv2-accent-border);
    background: var(--cv2-accent-soft);
    box-shadow: var(--cv2-glow-selected, var(--cv2-accent-glow));
    color: var(--text, #fff);
  }
}

html[data-ui-theme="magicbox"] .model-sheet-v2 .model-opt:hover {
  border-color: rgba(160, 32, 240, .35);
  box-shadow: var(--glow-hover);
}

/* Video create page: flatten decorative glow on type tabs / dock; top nav keeps shared pill */
html[data-ui-theme="magicbox"].create-v2-video-page .ctab:hover i {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
  background: var(--cv2-input, var(--surface-5));
  transform: none;
}

html[data-ui-theme="magicbox"].create-v2-video-page .ctab.is-on i {
  border-color: var(--neon-purple);
  box-shadow: 0 0 12px rgba(168, 85, 247, .18);
}

html[data-ui-theme="magicbox"].create-v2-video-page .dock a.dock-link:hover,
html[data-ui-theme="magicbox"].create-v2-video-page .dock a.dock-link:focus-visible {
  border-color: rgba(255, 255, 255, .2);
  background: #1a1a1a;
  color: #fff;
  transform: none;
  box-shadow: none;
}

html[data-ui-theme="magicbox"][data-theme="light"].create-v2-video-page .dock a.dock-link:hover,
html[data-ui-theme="magicbox"][data-theme="light"].create-v2-video-page .dock a.dock-link:focus-visible {
  border-color: rgba(138, 43, 226, .35);
  background: #ede5ff;
  color: var(--text);
}

html[data-ui-theme="magicbox"].create-v2-video-page .dock a.dock-link.is-on {
  border-color: rgba(168, 85, 247, .55);
  background: #1c1228;
  box-shadow: 0 0 10px rgba(168, 85, 247, .12);
}

html[data-ui-theme="magicbox"][data-theme="light"].create-v2-video-page .dock a.dock-link.is-on {
  border-color: rgba(138, 43, 226, .5);
  background: var(--chip-on, #ede5ff);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(138, 43, 226, .12);
}

html[data-ui-theme="magicbox"].create-v2-video-page .dock .go {
  box-shadow: 0 0 12px rgba(160, 32, 240, .16);
  filter: brightness(.94);
}

html[data-ui-theme="magicbox"].create-v2-video-page .dock .go:hover {
  box-shadow: 0 0 16px rgba(160, 32, 240, .24);
  filter: brightness(1);
}

html[data-ui-theme="magicbox"].create-v2-video-page .sheet-create-v2-video .gen.create-sidebar-gen,
html[data-ui-theme="magicbox"].create-v2-video-page .sheet-create-v2-video .gen.create-mobile-gen,
html[data-ui-theme="magicbox"].create-v2-video-page .sheet-create-v2-video .gen.create-mobile-summary-gen {
  box-shadow: var(--cv2-glow-cta, 0 0 18px rgba(0, 212, 255, .22), 0 0 28px rgba(168, 85, 247, .28));
}

html[data-ui-theme="magicbox"].create-v2-video-page .bal-topup,
html[data-ui-theme="magicbox"].create-v2-video-page .buy {
  box-shadow: 0 0 10px rgba(160, 32, 240, .14);
}

html[data-ui-theme="magicbox"].create-v2-video-page .bal-topup:hover,
html[data-ui-theme="magicbox"].create-v2-video-page .buy:hover {
  box-shadow: 0 0 14px rgba(160, 32, 240, .2);
}