body[data-skin] {
  --skin-bg-0: #07111f;
  --skin-bg-1: #0f1a30;
  --skin-bg-2: #18284a;
  --skin-surface-0: rgba(10, 18, 35, 0.94);
  --skin-surface-1: rgba(16, 28, 52, 0.9);
  --skin-surface-2: rgba(24, 40, 74, 0.82);
  --skin-border-soft: rgba(88, 194, 255, 0.24);
  --skin-border-strong: rgba(88, 194, 255, 0.48);
  --skin-text: #eaf7ff;
  --skin-text-dim: #9db8d7;
  --skin-primary: #58c2ff;
  --skin-secondary: #7fff8e;
  --skin-warning: #ffc76a;
  --skin-danger: #ff7687;
  --skin-card-shadow: rgba(0, 0, 0, 0.44);
  --skin-strong-shadow: 0 24px 44px rgba(0, 0, 0, 0.42);
  --skin-topbar-bg: rgba(8, 16, 33, 0.82);
  --skin-topbar-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
  --skin-modal-backdrop: rgba(6, 12, 23, 0.78);
  --skin-button-text: #041d11;
  --skin-toggle-bg: rgba(12, 24, 43, 0.52);
  --skin-toggle-knob: rgba(255, 255, 255, 0.96);
  --skin-toggle-shadow: rgba(0, 0, 0, 0.24);
  --skin-page-gradient:
    radial-gradient(circle at 12% -12%, color-mix(in srgb, var(--skin-primary) 24%, transparent), transparent 44%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--skin-secondary) 18%, transparent), transparent 38%),
    linear-gradient(180deg, var(--skin-bg-2), var(--skin-bg-1) 42%, var(--skin-bg-0));

  --color-bg: var(--skin-bg-0);
  --color-text: var(--skin-text);
  --color-heading: var(--skin-secondary);
  --color-accent: var(--skin-primary);
  --color-accent-hover: color-mix(in srgb, var(--skin-primary) 78%, #ffffff);
  --color-button-text: var(--skin-button-text);
  --color-surface: var(--skin-surface-0);
  --color-surface-alt: var(--skin-surface-1);
  --color-muted: var(--skin-text-dim);
  --color-subtle: color-mix(in srgb, var(--skin-text) 80%, #6b7280);
  --color-border: var(--skin-border-soft);
  --color-border-strong: var(--skin-border-strong);
  --color-pill-border: color-mix(in srgb, var(--skin-primary) 36%, transparent);
  --color-pill-bg: color-mix(in srgb, var(--skin-primary) 14%, transparent);
  --color-pill-text: color-mix(in srgb, var(--skin-text) 88%, var(--skin-primary));
  --color-topbar-link: var(--skin-primary);
  --color-topbar-link-hover: color-mix(in srgb, var(--skin-primary) 14%, transparent);
  --color-toggle-bg: var(--skin-toggle-bg);
  --color-toggle-knob: var(--skin-toggle-knob);
  --color-toggle-shadow: var(--skin-toggle-shadow);
  --color-toggle-text: var(--skin-text);
  --color-toggle-active-text: #0f172a;
  --color-card-shadow: var(--skin-card-shadow);
  --color-accent-soft: color-mix(in srgb, var(--skin-primary) 12%, transparent);
  --color-accent-soft-strong: color-mix(in srgb, var(--skin-primary) 24%, transparent);
  --color-success: var(--skin-secondary);
  --color-success-hover: color-mix(in srgb, var(--skin-secondary) 82%, #ffffff);
  --color-warning: var(--skin-warning);
  --color-danger: var(--skin-danger);
}

body[data-skin="original"] {
  --skin-bg-0: #f0f8ff;
  --skin-bg-1: #f8fbff;
  --skin-bg-2: #dff1ff;
  --skin-surface-0: rgba(255, 255, 255, 0.96);
  --skin-surface-1: rgba(248, 251, 255, 0.94);
  --skin-surface-2: rgba(231, 242, 255, 0.9);
  --skin-border-soft: rgba(0, 191, 255, 0.18);
  --skin-border-strong: rgba(255, 105, 180, 0.3);
  --skin-text: #263347;
  --skin-text-dim: #5a6b86;
  --skin-primary: #00bfff;
  --skin-secondary: #ff69b4;
  --skin-warning: #f59e0b;
  --skin-danger: #ef4444;
  --skin-card-shadow: rgba(15, 23, 42, 0.12);
  --skin-strong-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
  --skin-topbar-bg: rgba(255, 255, 255, 0.92);
  --skin-topbar-shadow: 0 14px 35px rgba(15, 23, 42, 0.15);
  --skin-modal-backdrop: rgba(38, 51, 71, 0.62);
  --skin-button-text: #ffffff;
  --skin-toggle-bg: #e2e8f0;
  --skin-toggle-knob: #ffffff;
  --skin-toggle-shadow: rgba(15, 23, 42, 0.12);
  --skin-page-gradient:
    radial-gradient(circle at 10% 10%, rgba(0, 191, 255, 0.12), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(255, 105, 180, 0.12), transparent 30%),
    linear-gradient(180deg, #ffffff, #f3f9ff 48%, #e7f3ff);
}

body[data-skin="arena"] {
  --skin-bg-0: #07111f;
  --skin-bg-1: #0f1a30;
  --skin-bg-2: #18284a;
  --skin-surface-0: rgba(10, 18, 35, 0.94);
  --skin-surface-1: rgba(16, 28, 52, 0.9);
  --skin-surface-2: rgba(24, 40, 74, 0.82);
  --skin-border-soft: rgba(88, 194, 255, 0.24);
  --skin-border-strong: rgba(88, 194, 255, 0.48);
  --skin-text: #eaf7ff;
  --skin-text-dim: #9db8d7;
  --skin-primary: #58c2ff;
  --skin-secondary: #7fff8e;
  --skin-warning: #ffc76a;
  --skin-danger: #ff7687;
}

body[data-skin="slate"] {
  --skin-bg-0: #121826;
  --skin-bg-1: #1b2538;
  --skin-bg-2: #26334d;
  --skin-surface-0: rgba(25, 35, 53, 0.94);
  --skin-surface-1: rgba(35, 48, 71, 0.9);
  --skin-surface-2: rgba(42, 58, 85, 0.82);
  --skin-border-soft: rgba(166, 191, 221, 0.24);
  --skin-border-strong: rgba(166, 191, 221, 0.42);
  --skin-text: #edf3fb;
  --skin-text-dim: #a8b6cb;
  --skin-primary: #9dc4ff;
  --skin-secondary: #dfe7f2;
  --skin-warning: #f5c26b;
  --skin-danger: #ff8b94;
}

body[data-skin="ice"] {
  --skin-bg-0: #eef8ff;
  --skin-bg-1: #f9fdff;
  --skin-bg-2: #d9f0ff;
  --skin-surface-0: rgba(255, 255, 255, 0.95);
  --skin-surface-1: rgba(240, 249, 255, 0.93);
  --skin-surface-2: rgba(220, 240, 255, 0.88);
  --skin-border-soft: rgba(83, 194, 255, 0.18);
  --skin-border-strong: rgba(83, 194, 255, 0.34);
  --skin-text: #203247;
  --skin-text-dim: #58728d;
  --skin-primary: #4db8ff;
  --skin-secondary: #38bdf8;
  --skin-warning: #f6c567;
  --skin-danger: #ef6f92;
  --skin-modal-backdrop: rgba(32, 50, 71, 0.56);
  --skin-page-gradient:
    radial-gradient(circle at 12% 8%, rgba(77, 184, 255, 0.12), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(56, 189, 248, 0.12), transparent 30%),
    linear-gradient(180deg, #ffffff, #f2fbff 50%, #e6f5ff);
}

body[data-skin="sunset"] {
  --skin-bg-0: #201121;
  --skin-bg-1: #341731;
  --skin-bg-2: #55253e;
  --skin-surface-0: rgba(36, 18, 34, 0.94);
  --skin-surface-1: rgba(56, 24, 45, 0.9);
  --skin-surface-2: rgba(84, 36, 61, 0.82);
  --skin-border-soft: rgba(255, 154, 96, 0.24);
  --skin-border-strong: rgba(255, 197, 111, 0.42);
  --skin-text: #fff1ea;
  --skin-text-dim: #d4b2a7;
  --skin-primary: #ff9a60;
  --skin-secondary: #ff5f8f;
  --skin-warning: #ffd166;
  --skin-danger: #ff7b7b;
  --skin-modal-backdrop: rgba(32, 17, 33, 0.76);
  --skin-page-gradient:
    radial-gradient(circle at 8% -10%, rgba(255, 154, 96, 0.2), transparent 42%),
    radial-gradient(circle at 92% 0%, rgba(255, 95, 143, 0.18), transparent 36%),
    linear-gradient(180deg, #6b2b43, #341731 44%, #201121);
}

body[data-skin="retro"] {
  --skin-bg-0: #1a0904;
  --skin-bg-1: #3b1609;
  --skin-bg-2: #862b0d;
  --skin-surface-0: rgba(28, 11, 5, 0.95);
  --skin-surface-1: rgba(59, 22, 9, 0.92);
  --skin-surface-2: rgba(112, 42, 12, 0.84);
  --skin-border-soft: rgba(255, 193, 7, 0.26);
  --skin-border-strong: rgba(230, 117, 20, 0.46);
  --skin-text: #fff0bf;
  --skin-text-dim: #e2b96a;
  --skin-primary: #e67514;
  --skin-secondary: #06923e;
  --skin-warning: #ffc107;
  --skin-danger: #e67514;
  --skin-modal-backdrop: rgba(26, 9, 4, 0.8);
  --skin-page-gradient:
    radial-gradient(circle at 10% -12%, rgba(255, 193, 7, 0.2), transparent 38%),
    radial-gradient(circle at 88% 0%, rgba(6, 146, 62, 0.18), transparent 34%),
    radial-gradient(circle at 58% 18%, rgba(230, 117, 20, 0.18), transparent 28%),
    linear-gradient(180deg, #a63d12, #862b0d 22%, #3b1609 56%, #1a0904);
}

body.has-global-top-bar[data-skin] .global-top-bar {
  background: var(--skin-topbar-bg);
  box-shadow: var(--skin-topbar-shadow);
}

body.has-global-top-bar[data-skin="original"] .global-top-bar {
  border: 1px solid rgba(0, 191, 255, 0.12);
}

body.lockout-home-page[data-skin],
body.lockout-mode-page[data-skin],
body.lockout-game-page[data-skin],
body.lockout-popout-page[data-skin] {
  --lockout-bg-0: var(--skin-bg-0);
  --lockout-bg-1: var(--skin-bg-1);
  --lockout-bg-2: var(--skin-bg-2);
  --lockout-surface: var(--skin-surface-1);
  --lockout-surface-strong: var(--skin-surface-0);
  --lockout-border: var(--skin-border-strong);
  --lockout-border-soft: var(--skin-border-soft);
  --lockout-text: var(--skin-text);
  --lockout-text-dim: var(--skin-text-dim);
  --lockout-cyan: var(--skin-primary);
  --lockout-green: var(--skin-secondary);
  --lockout-orange: var(--skin-warning);
  --lockout-shadow: var(--skin-strong-shadow);
}

body.bro-join-page[data-skin],
body.bro-arena-page[data-skin] {
  --bro-bg-0: var(--skin-bg-0);
  --bro-bg-1: var(--skin-bg-1);
  --bro-bg-2: var(--skin-bg-2);
  --bro-surface-0: var(--skin-surface-0);
  --bro-surface-1: var(--skin-surface-1);
  --bro-surface-2: var(--skin-surface-2);
  --bro-border-soft: var(--skin-border-soft);
  --bro-border-strong: var(--skin-border-strong);
  --bro-text: var(--skin-text);
  --bro-text-dim: var(--skin-text-dim);
  --bro-cyan: var(--skin-primary);
  --bro-cyan-strong: color-mix(in srgb, var(--skin-primary) 76%, #ffffff);
  --bro-green: var(--skin-secondary);
  --bro-orange: var(--skin-warning);
  --bro-red: var(--skin-danger);
  --bro-card-shadow: var(--skin-strong-shadow);
  --bro-glow: 0 0 0 1px color-mix(in srgb, var(--skin-primary) 28%, transparent), 0 0 30px color-mix(in srgb, var(--skin-primary) 16%, transparent);
}

body.mini-setup-page[data-skin],
body.mini-page.mini-hub-page[data-skin],
body.mini-page.mini-popout-page[data-skin],
body.mini-link-page[data-skin],
body.bro-mini-popout-page[data-skin] {
  --mini-bg-0: var(--skin-bg-0);
  --mini-bg-1: var(--skin-bg-1);
  --mini-bg-2: var(--skin-bg-2);
  --mini-surface-0: var(--skin-surface-0);
  --mini-surface-1: var(--skin-surface-1);
  --mini-surface-2: var(--skin-surface-2);
  --mini-border-soft: var(--skin-border-soft);
  --mini-border-strong: var(--skin-border-strong);
  --mini-text: var(--skin-text);
  --mini-text-dim: var(--skin-text-dim);
  --mini-cyan: var(--skin-primary);
  --mini-cyan-strong: color-mix(in srgb, var(--skin-primary) 76%, #ffffff);
  --mini-green: var(--skin-secondary);
  --mini-amber: var(--skin-warning);
  --mini-red: var(--skin-danger);
  --mini-shadow: var(--skin-strong-shadow);
}

body.scoreboard-setup-page[data-skin],
body.scoreboard-page[data-skin],
body.scoreboard-popout-page[data-skin],
body.scoreboard-link-page[data-skin] {
  --scoreboard-bg-0: var(--skin-bg-0);
  --scoreboard-bg-1: var(--skin-bg-1);
  --scoreboard-bg-2: var(--skin-bg-2);
  --scoreboard-surface-0: var(--skin-surface-0);
  --scoreboard-surface-1: var(--skin-surface-1);
  --scoreboard-surface-2: var(--skin-surface-2);
  --scoreboard-border-soft: var(--skin-border-soft);
  --scoreboard-border-strong: var(--skin-border-strong);
  --scoreboard-text: var(--skin-text);
  --scoreboard-text-dim: var(--skin-text-dim);
  --scoreboard-cyan: var(--skin-primary);
  --scoreboard-green: var(--skin-secondary);
  --scoreboard-amber: var(--skin-warning);
  --scoreboard-red: var(--skin-danger);
  --scoreboard-shadow: var(--skin-strong-shadow);
}

body.tournament-setup-page[data-skin],
body.tournament-arena-page[data-skin],
body.tournament-popout-page[data-skin] {
  --tour-bg-0: var(--skin-bg-0);
  --tour-bg-1: var(--skin-bg-1);
  --tour-bg-2: var(--skin-bg-2);
  --tour-surface-0: var(--skin-surface-0);
  --tour-surface-1: var(--skin-surface-1);
  --tour-surface-2: var(--skin-surface-2);
  --tour-border-soft: var(--skin-border-soft);
  --tour-border-strong: var(--skin-border-strong);
  --tour-text: var(--skin-text);
  --tour-text-dim: var(--skin-text-dim);
  --tour-cyan: var(--skin-primary);
  --tour-green: var(--skin-secondary);
  --tour-amber: var(--skin-warning);
  --tour-red: var(--skin-danger);
  --tour-shadow: var(--skin-strong-shadow);
}

body.card-builder-page[data-skin],
body.card-preview-page[data-skin] {
  --forge-bg-0: var(--skin-bg-0);
  --forge-bg-1: var(--skin-bg-1);
  --forge-bg-2: var(--skin-bg-2);
  --forge-surface-0: var(--skin-surface-0);
  --forge-surface-1: var(--skin-surface-1);
  --forge-surface-2: var(--skin-surface-2);
  --forge-border-soft: var(--skin-border-soft);
  --forge-border-strong: var(--skin-border-strong);
  --forge-text: var(--skin-text);
  --forge-text-dim: var(--skin-text-dim);
  --forge-cyan: var(--skin-primary);
  --forge-green: var(--skin-secondary);
  --forge-amber: var(--skin-warning);
  --forge-red: var(--skin-danger);
  --forge-shadow: var(--skin-strong-shadow);
}

body.gallery-vault-page[data-skin] {
  --vault-bg-0: var(--skin-bg-0);
  --vault-bg-1: var(--skin-bg-1);
  --vault-bg-2: var(--skin-bg-2);
  --vault-surface-0: var(--skin-surface-0);
  --vault-surface-1: var(--skin-surface-1);
  --vault-surface-2: var(--skin-surface-2);
  --vault-border-soft: var(--skin-border-soft);
  --vault-border-strong: var(--skin-border-strong);
  --vault-text: var(--skin-text);
  --vault-text-dim: var(--skin-text-dim);
  --vault-cyan: var(--skin-primary);
  --vault-green: var(--skin-secondary);
  --vault-amber: var(--skin-warning);
  --vault-red: var(--skin-danger);
}

body[data-skin="original"] .lockout-home-page,
body.lockout-home-page[data-skin="original"],
body.lockout-mode-page[data-skin="original"],
body.lockout-game-page[data-skin="original"],
body.lockout-popout-page[data-skin="original"],
body.bro-join-page[data-skin="original"],
body.bro-arena-page[data-skin="original"],
body.mini-setup-page[data-skin="original"],
body.mini-page.mini-hub-page[data-skin="original"],
body.mini-page.mini-popout-page[data-skin="original"],
body.scoreboard-setup-page[data-skin="original"],
body.scoreboard-page[data-skin="original"],
body.tournament-setup-page[data-skin="original"],
body.tournament-arena-page[data-skin="original"],
body.card-builder-page[data-skin="original"],
body.card-preview-page[data-skin="original"],
body.gallery-vault-page[data-skin="original"] {
  color: var(--skin-text);
}