/**
 * Arena App + Gestão themes (shell compartilhado).
 *
 * body.app-themed[data-theme="…"] — shell shared; presets = token blocks only.
 * WL branding overrides --green / --sidebar via ResellerService::cssVars().
 *
 * Catalog: Arena presets + 11 light / 11 dark from vscodethemes.com
 * (Atom One, Ayu, Dracula, Tokyo Night, Nord, …).
 */

/* ========== Token presets ========== */

[data-theme="arena-festive"] {
  --bg: #f3f7ee;
  --bg-elevated: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.92);
  --border: rgba(20, 32, 26, 0.1);
  --border-strong: rgba(20, 32, 26, 0.18);
  --text: #14201a;
  --text-muted: #5c6b60;
  --sidebar-text: #f3f7ee;
  --danger: #b91c1c;
  --input-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.7);
  --radius: 18px;
  --radius-sm: 12px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: color-mix(in srgb, var(--green, #6f9b1e) 28%, transparent);
  --bg-glow-b: rgba(245, 158, 11, 0.18);
  --accent-gold: #c49212;
  --accent-gold-dim: rgba(196, 146, 18, 0.16);
  --surface-festive: linear-gradient(135deg, #f0fdf4 0%, #fff7ed 52%, #ffffff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #9acd32) 22%, transparent);
  --shadow-card: 0 12px 32px rgba(20, 32, 26, 0.07);
  --login-wash: linear-gradient(180deg, #eef5e6 0%, var(--bg) 45%, #fff7ed 100%);
  color-scheme: light;
}

[data-theme="arena-light"] {
  --bg: #f5f6f8;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.18);
  --text: #0f172a;
  --text-muted: #64748b;
  --sidebar-text: #f8fafc;
  --danger: #dc2626;
  --input-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.85);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(59, 130, 246, 0.12);
  --bg-glow-b: rgba(148, 163, 184, 0.14);
  --accent-gold: #ca8a04;
  --accent-gold-dim: rgba(202, 138, 4, 0.12);
  --surface-festive: linear-gradient(135deg, #f8fafc 0%, #eff6ff 55%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #9acd32) 20%, transparent);
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
  --login-wash: linear-gradient(180deg, #eef2ff 0%, var(--bg) 50%, #f8fafc 100%);
  color-scheme: light;
}

[data-theme="arena-dark"] {
  --bg: #0e1116;
  --bg-elevated: #161b22;
  --bg-card: #1a212b;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #e8eef5;
  --text-muted: #9aa7b8;
  --sidebar-text: #e8eef5;
  --danger: #f87171;
  --input-bg: #12171f;
  --chip-bg: rgba(255, 255, 255, 0.08);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: color-mix(in srgb, var(--green, #6f9b1e) 18%, transparent);
  --bg-glow-b: rgba(56, 189, 248, 0.1);
  --accent-gold: #eab308;
  --accent-gold-dim: rgba(234, 179, 8, 0.16);
  --surface-festive: linear-gradient(135deg, #152018 0%, #1a212b 55%, #12171f 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #9acd32) 28%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
  --login-wash: linear-gradient(180deg, #0a0d11 0%, var(--bg) 55%, #121820 100%);
  color-scheme: dark;
}

[data-theme="arena-monitor"] {
  --bg: #0f1410;
  --bg-elevated: #1a2218;
  --bg-card: #1a2218;
  --border: rgba(154, 205, 50, 0.14);
  --border-strong: rgba(154, 205, 50, 0.28);
  --text: #f5f7f0;
  --text-muted: #9aa892;
  --sidebar-text: #f5f7f0;
  --danger: #f87171;
  --input-bg: #121812;
  --chip-bg: rgba(255, 255, 255, 0.06);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(154, 205, 50, 0.16);
  --bg-glow-b: rgba(232, 197, 71, 0.1);
  --accent-gold: #e8c547;
  --accent-gold-dim: rgba(232, 197, 71, 0.18);
  --surface-festive: linear-gradient(165deg, #0f1410 0%, #1a2218 55%, #121812 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #9acd32) 28%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --login-wash: linear-gradient(180deg, #0a0e0b 0%, var(--bg) 55%, #1a2218 100%);
  color-scheme: dark;
}

[data-theme="cool-breeze"] {
  --bg: #eef7fb;
  --bg-elevated: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.94);
  --border: rgba(14, 116, 144, 0.12);
  --border-strong: rgba(14, 116, 144, 0.22);
  --text: #0c4a6e;
  --text-muted: #54839a;
  --sidebar-text: #ecfeff;
  --danger: #e11d48;
  --input-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.8);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(14, 165, 233, 0.2);
  --bg-glow-b: rgba(45, 212, 191, 0.16);
  --accent-gold: #0ea5e9;
  --accent-gold-dim: rgba(14, 165, 233, 0.14);
  --surface-festive: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 50%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #22d3ee) 24%, transparent);
  --shadow-card: 0 10px 28px rgba(12, 74, 110, 0.08);
  --login-wash: linear-gradient(180deg, #e0f2fe 0%, var(--bg) 50%, #f0fdfa 100%);
  color-scheme: light;
}

[data-theme="mystical-forest"] {
  --bg: #0c1410;
  --bg-elevated: #132018;
  --bg-card: #17261c;
  --border: rgba(134, 239, 172, 0.12);
  --border-strong: rgba(134, 239, 172, 0.2);
  --text: #e8f5e9;
  --text-muted: #8fb89a;
  --sidebar-text: #e8f5e9;
  --danger: #fb7185;
  --input-bg: #0f1a14;
  --chip-bg: rgba(255, 255, 255, 0.06);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(34, 197, 94, 0.16);
  --bg-glow-b: rgba(16, 185, 129, 0.1);
  --accent-gold: #86efac;
  --accent-gold-dim: rgba(134, 239, 172, 0.14);
  --surface-festive: linear-gradient(135deg, #102016 0%, #17261c 55%, #0c1410 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #4ade80) 26%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --login-wash: linear-gradient(180deg, #08100c 0%, var(--bg) 55%, #132018 100%);
  color-scheme: dark;
}

[data-theme="moonlight-glow"] {
  --bg: #0f111a;
  --bg-elevated: #161a28;
  --bg-card: #1b2032;
  --border: rgba(165, 180, 252, 0.12);
  --border-strong: rgba(165, 180, 252, 0.2);
  --text: #e8eaf6;
  --text-muted: #9aa3c7;
  --sidebar-text: #e8eaf6;
  --danger: #f472b6;
  --input-bg: #121528;
  --chip-bg: rgba(255, 255, 255, 0.07);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(99, 102, 241, 0.18);
  --bg-glow-b: rgba(167, 139, 250, 0.12);
  --accent-gold: #a78bfa;
  --accent-gold-dim: rgba(167, 139, 250, 0.16);
  --surface-festive: linear-gradient(135deg, #15182a 0%, #1b2032 55%, #121528 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #818cf8) 28%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --login-wash: linear-gradient(180deg, #0a0c14 0%, var(--bg) 55%, #161a28 100%);
  color-scheme: dark;
}

[data-theme="spicy-ember"] {
  --bg: #140e0c;
  --bg-elevated: #1c1411;
  --bg-card: #241a16;
  --border: rgba(251, 146, 60, 0.14);
  --border-strong: rgba(251, 146, 60, 0.24);
  --text: #fff1e8;
  --text-muted: #c4a090;
  --sidebar-text: #fff1e8;
  --danger: #ef4444;
  --input-bg: #18110e;
  --chip-bg: rgba(255, 255, 255, 0.06);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(239, 68, 68, 0.16);
  --bg-glow-b: rgba(245, 158, 11, 0.14);
  --accent-gold: #f59e0b;
  --accent-gold-dim: rgba(245, 158, 11, 0.18);
  --surface-festive: linear-gradient(135deg, #1a100c 0%, #241a16 55%, #140e0c 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #fb923c) 26%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
  --login-wash: linear-gradient(180deg, #0c0806 0%, var(--bg) 55%, #1c1411 100%);
  color-scheme: dark;
}

[data-theme="festive-gold"] {
  --bg: #fff8eb;
  --bg-elevated: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.94);
  --border: rgba(180, 83, 9, 0.14);
  --border-strong: rgba(180, 83, 9, 0.24);
  --text: #422006;
  --text-muted: #92400e;
  --sidebar-text: #fffbeb;
  --danger: #b91c1c;
  --input-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.75);
  --radius: 18px;
  --radius-sm: 12px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(245, 158, 11, 0.28);
  --bg-glow-b: rgba(234, 179, 8, 0.2);
  --accent-gold: #d97706;
  --accent-gold-dim: rgba(217, 119, 6, 0.16);
  --surface-festive: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #fbbf24) 28%, transparent);
  --shadow-card: 0 12px 32px rgba(120, 53, 15, 0.1);
  --login-wash: linear-gradient(180deg, #fef3c7 0%, var(--bg) 50%, #fff7ed 100%);
  color-scheme: light;
}

/* —— Light · VS Code (vscodethemes.com) —— */

[data-theme="atom-one-light"] {
  --bg: #fafafa;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --border: rgba(56, 58, 66, 0.12);
  --border-strong: rgba(56, 58, 66, 0.2);
  --text: #383a42;
  --text-muted: #a0a1a7;
  --sidebar-text: #fafafa;
  --danger: #e45649;
  --input-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.9);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(64, 120, 242, 0.14);
  --bg-glow-b: rgba(166, 38, 164, 0.1);
  --accent-gold: #c18401;
  --accent-gold-dim: rgba(193, 132, 1, 0.14);
  --surface-festive: linear-gradient(135deg, #fafafa 0%, #eef2ff 55%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #4078f2) 22%, transparent);
  --shadow-card: 0 8px 24px rgba(56, 58, 66, 0.08);
  --login-wash: linear-gradient(180deg, #eef2ff 0%, var(--bg) 55%, #fafafa 100%);
  color-scheme: light;
}

[data-theme="ayu-light"] {
  --bg: #fafafa;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --border: rgba(92, 103, 115, 0.14);
  --border-strong: rgba(92, 103, 115, 0.22);
  --text: #5c6773;
  --text-muted: #828c99;
  --sidebar-text: #fafafa;
  --danger: #f07178;
  --input-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.9);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(255, 143, 64, 0.16);
  --bg-glow-b: rgba(65, 166, 217, 0.12);
  --accent-gold: #f29718;
  --accent-gold-dim: rgba(242, 151, 24, 0.14);
  --surface-festive: linear-gradient(135deg, #fff8f0 0%, #f0f9fc 55%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #ff8f40) 22%, transparent);
  --shadow-card: 0 8px 24px rgba(92, 103, 115, 0.08);
  --login-wash: linear-gradient(180deg, #fff4eb 0%, var(--bg) 55%, #fafafa 100%);
  color-scheme: light;
}

[data-theme="winter-is-coming-light"] {
  --bg: #ffffff;
  --bg-elevated: #f7fbff;
  --bg-card: #ffffff;
  --border: rgba(4, 100, 193, 0.12);
  --border-strong: rgba(4, 100, 193, 0.22);
  --text: #044f67;
  --text-muted: #5b7a8c;
  --sidebar-text: #eaf4ff;
  --danger: #c41d4a;
  --input-bg: #ffffff;
  --chip-bg: rgba(234, 244, 255, 0.85);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(4, 100, 193, 0.14);
  --bg-glow-b: rgba(11, 138, 143, 0.12);
  --accent-gold: #0b8a8f;
  --accent-gold-dim: rgba(11, 138, 143, 0.14);
  --surface-festive: linear-gradient(135deg, #eaf4ff 0%, #f0fffe 55%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #0464c1) 22%, transparent);
  --shadow-card: 0 8px 24px rgba(4, 79, 103, 0.08);
  --login-wash: linear-gradient(180deg, #e8f2ff 0%, var(--bg) 55%, #ffffff 100%);
  color-scheme: light;
}

[data-theme="night-owl-light"] {
  --bg: #fbfbfb;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --border: rgba(64, 63, 83, 0.12);
  --border-strong: rgba(64, 63, 83, 0.2);
  --text: #403f53;
  --text-muted: #989fb1;
  --sidebar-text: #fbfbfb;
  --danger: #bc5454;
  --input-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.9);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(72, 118, 214, 0.14);
  --bg-glow-b: rgba(153, 76, 195, 0.1);
  --accent-gold: #c96765;
  --accent-gold-dim: rgba(201, 103, 101, 0.14);
  --surface-festive: linear-gradient(135deg, #f5f7ff 0%, #fbf5ff 55%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #4876d6) 22%, transparent);
  --shadow-card: 0 8px 24px rgba(64, 63, 83, 0.08);
  --login-wash: linear-gradient(180deg, #f0f3ff 0%, var(--bg) 55%, #fbfbfb 100%);
  color-scheme: light;
}

[data-theme="tokyo-night-light"] {
  --bg: #e1e2e7;
  --bg-elevated: #d5d6db;
  --bg-card: #f0f0f4;
  --border: rgba(55, 96, 191, 0.14);
  --border-strong: rgba(55, 96, 191, 0.24);
  --text: #3760bf;
  --text-muted: #6172b0;
  --sidebar-text: #e1e2e7;
  --danger: #f52a65;
  --input-bg: #f0f0f4;
  --chip-bg: rgba(240, 240, 244, 0.9);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(46, 125, 233, 0.16);
  --bg-glow-b: rgba(152, 84, 241, 0.12);
  --accent-gold: #8c6c3e;
  --accent-gold-dim: rgba(140, 108, 62, 0.14);
  --surface-festive: linear-gradient(135deg, #dce3f8 0%, #ebe4fb 55%, #f0f0f4 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #2e7de9) 24%, transparent);
  --shadow-card: 0 8px 24px rgba(55, 96, 191, 0.1);
  --login-wash: linear-gradient(180deg, #d5d6db 0%, var(--bg) 55%, #e1e2e7 100%);
  color-scheme: light;
}

[data-theme="catppuccin-latte"] {
  --bg: #eff1f5;
  --bg-elevated: #e6e9ef;
  --bg-card: #ffffff;
  --border: rgba(76, 79, 105, 0.12);
  --border-strong: rgba(76, 79, 105, 0.2);
  --text: #4c4f69;
  --text-muted: #6c6f85;
  --sidebar-text: #eff1f5;
  --danger: #d20f39;
  --input-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.9);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(30, 102, 245, 0.14);
  --bg-glow-b: rgba(136, 57, 239, 0.1);
  --accent-gold: #df8e1d;
  --accent-gold-dim: rgba(223, 142, 29, 0.14);
  --surface-festive: linear-gradient(135deg, #e6e9ef 0%, #e8dafe 50%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #1e66f5) 22%, transparent);
  --shadow-card: 0 8px 24px rgba(76, 79, 105, 0.08);
  --login-wash: linear-gradient(180deg, #e6e9ef 0%, var(--bg) 55%, #eff1f5 100%);
  color-scheme: light;
}

[data-theme="noctis-lux"] {
  --bg: #fef8ec;
  --bg-elevated: #fffdf6;
  --bg-card: #fffdf6;
  --border: rgba(91, 81, 73, 0.14);
  --border-strong: rgba(91, 81, 73, 0.22);
  --text: #5b5149;
  --text-muted: #8a7f74;
  --sidebar-text: #fef8ec;
  --danger: #d44932;
  --input-bg: #fffdf6;
  --chip-bg: rgba(255, 253, 246, 0.9);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(0, 153, 173, 0.14);
  --bg-glow-b: rgba(212, 73, 50, 0.1);
  --accent-gold: #b2944b;
  --accent-gold-dim: rgba(178, 148, 75, 0.14);
  --surface-festive: linear-gradient(135deg, #fff4d6 0%, #e8f8fa 55%, #fffdf6 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #0099ad) 22%, transparent);
  --shadow-card: 0 8px 24px rgba(91, 81, 73, 0.08);
  --login-wash: linear-gradient(180deg, #fff1d4 0%, var(--bg) 55%, #fef8ec 100%);
  color-scheme: light;
}

[data-theme="gruvbox-light"] {
  --bg: #fbf1c7;
  --bg-elevated: #f2e5bc;
  --bg-card: #f9f5d7;
  --border: rgba(60, 56, 54, 0.14);
  --border-strong: rgba(60, 56, 54, 0.22);
  --text: #3c3836;
  --text-muted: #7c6f64;
  --sidebar-text: #fbf1c7;
  --danger: #9d0006;
  --input-bg: #f9f5d7;
  --chip-bg: rgba(249, 245, 215, 0.9);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(7, 102, 120, 0.14);
  --bg-glow-b: rgba(175, 58, 3, 0.12);
  --accent-gold: #b57614;
  --accent-gold-dim: rgba(181, 118, 20, 0.16);
  --surface-festive: linear-gradient(135deg, #f2e5bc 0%, #ebdbb2 55%, #f9f5d7 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #076678) 22%, transparent);
  --shadow-card: 0 8px 24px rgba(60, 56, 54, 0.1);
  --login-wash: linear-gradient(180deg, #ebdbb2 0%, var(--bg) 55%, #fbf1c7 100%);
  color-scheme: light;
}

[data-theme="eva-light"] {
  --bg: #fafafa;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --border: rgba(92, 103, 115, 0.12);
  --border-strong: rgba(92, 103, 115, 0.2);
  --text: #5c6773;
  --text-muted: #8a9199;
  --sidebar-text: #fafafa;
  --danger: #f07178;
  --input-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.9);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(41, 128, 255, 0.14);
  --bg-glow-b: rgba(86, 183, 196, 0.12);
  --accent-gold: #56b7c4;
  --accent-gold-dim: rgba(86, 183, 196, 0.14);
  --surface-festive: linear-gradient(135deg, #eef5ff 0%, #e8f8fa 55%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #2980ff) 22%, transparent);
  --shadow-card: 0 8px 24px rgba(92, 103, 115, 0.08);
  --login-wash: linear-gradient(180deg, #e8f1ff 0%, var(--bg) 55%, #fafafa 100%);
  color-scheme: light;
}

[data-theme="min-light"] {
  --bg: #ffffff;
  --bg-elevated: #f6f8fa;
  --bg-card: #ffffff;
  --border: rgba(36, 41, 46, 0.1);
  --border-strong: rgba(36, 41, 46, 0.18);
  --text: #24292e;
  --text-muted: #6a737d;
  --sidebar-text: #ffffff;
  --danger: #d73a49;
  --input-bg: #ffffff;
  --chip-bg: rgba(246, 248, 250, 0.95);
  --radius: 12px;
  --radius-sm: 8px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(61, 126, 255, 0.12);
  --bg-glow-b: rgba(255, 123, 204, 0.1);
  --accent-gold: #ff7bcc;
  --accent-gold-dim: rgba(255, 123, 204, 0.12);
  --surface-festive: linear-gradient(135deg, #f6f8fa 0%, #eef4ff 55%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #3d7eff) 20%, transparent);
  --shadow-card: 0 6px 20px rgba(36, 41, 46, 0.06);
  --login-wash: linear-gradient(180deg, #f6f8fa 0%, var(--bg) 55%, #ffffff 100%);
  color-scheme: light;
}

[data-theme="bearded-light"] {
  --bg: #f4f6f8;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --border: rgba(43, 55, 72, 0.12);
  --border-strong: rgba(43, 55, 72, 0.2);
  --text: #2b3748;
  --text-muted: #6b7a8d;
  --sidebar-text: #f4f6f8;
  --danger: #d64545;
  --input-bg: #ffffff;
  --chip-bg: rgba(255, 255, 255, 0.9);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(58, 124, 165, 0.14);
  --bg-glow-b: rgba(214, 126, 92, 0.12);
  --accent-gold: #d67e5c;
  --accent-gold-dim: rgba(214, 126, 92, 0.14);
  --surface-festive: linear-gradient(135deg, #eaf1f6 0%, #f8efe9 55%, #fff 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #3a7ca5) 22%, transparent);
  --shadow-card: 0 8px 24px rgba(43, 55, 72, 0.08);
  --login-wash: linear-gradient(180deg, #e8eef4 0%, var(--bg) 55%, #f4f6f8 100%);
  color-scheme: light;
}

/* —— Dark · VS Code (vscodethemes.com) —— */

[data-theme="dracula"] {
  --bg: #282a36;
  --bg-elevated: #343746;
  --bg-card: #44475a;
  --border: rgba(248, 248, 242, 0.1);
  --border-strong: rgba(248, 248, 242, 0.16);
  --text: #f8f8f2;
  --text-muted: #6272a4;
  --sidebar-text: #f8f8f2;
  --danger: #ff5555;
  --input-bg: #21222c;
  --chip-bg: rgba(255, 255, 255, 0.08);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(189, 147, 249, 0.18);
  --bg-glow-b: rgba(255, 121, 198, 0.12);
  --accent-gold: #f1fa8c;
  --accent-gold-dim: rgba(241, 250, 140, 0.14);
  --surface-festive: linear-gradient(135deg, #343746 0%, #44475a 55%, #282a36 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #bd93f9) 28%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
  --login-wash: linear-gradient(180deg, #191a21 0%, var(--bg) 55%, #21222c 100%);
  color-scheme: dark;
}

[data-theme="atom-one-dark"] {
  --bg: #282c34;
  --bg-elevated: #2c313a;
  --bg-card: #21252b;
  --border: rgba(171, 178, 191, 0.1);
  --border-strong: rgba(171, 178, 191, 0.18);
  --text: #abb2bf;
  --text-muted: #5c6370;
  --sidebar-text: #abb2bf;
  --danger: #e06c75;
  --input-bg: #1b1f25;
  --chip-bg: rgba(255, 255, 255, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(97, 175, 239, 0.16);
  --bg-glow-b: rgba(198, 120, 221, 0.12);
  --accent-gold: #e5c07b;
  --accent-gold-dim: rgba(229, 192, 123, 0.14);
  --surface-festive: linear-gradient(135deg, #2c313a 0%, #21252b 55%, #282c34 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #61afef) 26%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
  --login-wash: linear-gradient(180deg, #1b1f25 0%, var(--bg) 55%, #21252b 100%);
  color-scheme: dark;
}

[data-theme="ayu-dark"] {
  --bg: #0b0e14;
  --bg-elevated: #0f131a;
  --bg-card: #11151c;
  --border: rgba(191, 189, 182, 0.1);
  --border-strong: rgba(191, 189, 182, 0.16);
  --text: #bfbdb6;
  --text-muted: #6c7380;
  --sidebar-text: #bfbdb6;
  --danger: #f07178;
  --input-bg: #0a0d12;
  --chip-bg: rgba(255, 255, 255, 0.05);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(255, 143, 64, 0.14);
  --bg-glow-b: rgba(89, 194, 255, 0.1);
  --accent-gold: #e6b450;
  --accent-gold-dim: rgba(230, 180, 80, 0.14);
  --surface-festive: linear-gradient(135deg, #0f131a 0%, #11151c 55%, #0b0e14 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #ff8f40) 24%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
  --login-wash: linear-gradient(180deg, #05070a 0%, var(--bg) 55%, #0d1017 100%);
  color-scheme: dark;
}

[data-theme="monokai-pro"] {
  --bg: #2d2a2e;
  --bg-elevated: #403e41;
  --bg-card: #363337;
  --border: rgba(252, 252, 250, 0.1);
  --border-strong: rgba(252, 252, 250, 0.16);
  --text: #fcfcfa;
  --text-muted: #939293;
  --sidebar-text: #fcfcfa;
  --danger: #ff6188;
  --input-bg: #221f22;
  --chip-bg: rgba(255, 255, 255, 0.07);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(255, 216, 102, 0.14);
  --bg-glow-b: rgba(171, 157, 242, 0.12);
  --accent-gold: #ffd866;
  --accent-gold-dim: rgba(255, 216, 102, 0.16);
  --surface-festive: linear-gradient(135deg, #403e41 0%, #363337 55%, #2d2a2e 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #ffd866) 24%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --login-wash: linear-gradient(180deg, #1a181b 0%, var(--bg) 55%, #221f22 100%);
  color-scheme: dark;
}

[data-theme="night-owl"] {
  --bg: #011627;
  --bg-elevated: #0b2942;
  --bg-card: #0d2137;
  --border: rgba(214, 222, 235, 0.1);
  --border-strong: rgba(214, 222, 235, 0.16);
  --text: #d6deeb;
  --text-muted: #637777;
  --sidebar-text: #d6deeb;
  --danger: #ef5350;
  --input-bg: #01111d;
  --chip-bg: rgba(255, 255, 255, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(130, 170, 255, 0.16);
  --bg-glow-b: rgba(199, 146, 234, 0.12);
  --accent-gold: #ecc48d;
  --accent-gold-dim: rgba(236, 196, 141, 0.14);
  --surface-festive: linear-gradient(135deg, #0b2942 0%, #0d2137 55%, #011627 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #82aaff) 26%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --login-wash: linear-gradient(180deg, #000b14 0%, var(--bg) 55%, #01111d 100%);
  color-scheme: dark;
}

[data-theme="tokyo-night"] {
  --bg: #1a1b26;
  --bg-elevated: #24283b;
  --bg-card: #1f2335;
  --border: rgba(192, 202, 245, 0.1);
  --border-strong: rgba(192, 202, 245, 0.16);
  --text: #c0caf5;
  --text-muted: #565f89;
  --sidebar-text: #c0caf5;
  --danger: #f7768e;
  --input-bg: #16161e;
  --chip-bg: rgba(255, 255, 255, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(122, 162, 247, 0.16);
  --bg-glow-b: rgba(187, 154, 247, 0.12);
  --accent-gold: #e0af68;
  --accent-gold-dim: rgba(224, 175, 104, 0.14);
  --surface-festive: linear-gradient(135deg, #24283b 0%, #1f2335 55%, #1a1b26 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #7aa2f7) 26%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --login-wash: linear-gradient(180deg, #0f1017 0%, var(--bg) 55%, #16161e 100%);
  color-scheme: dark;
}

[data-theme="palenight"] {
  --bg: #292d3e;
  --bg-elevated: #32374c;
  --bg-card: #2f3447;
  --border: rgba(166, 172, 205, 0.1);
  --border-strong: rgba(166, 172, 205, 0.16);
  --text: #a6accd;
  --text-muted: #676e95;
  --sidebar-text: #a6accd;
  --danger: #ff5370;
  --input-bg: #1b1e2b;
  --chip-bg: rgba(255, 255, 255, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(130, 170, 255, 0.16);
  --bg-glow-b: rgba(199, 146, 234, 0.12);
  --accent-gold: #ffcb6b;
  --accent-gold-dim: rgba(255, 203, 107, 0.14);
  --surface-festive: linear-gradient(135deg, #32374c 0%, #2f3447 55%, #292d3e 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #82aaff) 26%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
  --login-wash: linear-gradient(180deg, #1b1e2b 0%, var(--bg) 55%, #222536 100%);
  color-scheme: dark;
}

[data-theme="synthwave-84"] {
  --bg: #262335;
  --bg-elevated: #2a2139;
  --bg-card: #2a2139;
  --border: rgba(255, 126, 219, 0.14);
  --border-strong: rgba(254, 222, 93, 0.2);
  --text: #ffffff;
  --text-muted: #848bbd;
  --sidebar-text: #ffffff;
  --danger: #fe4450;
  --input-bg: #241b2f;
  --chip-bg: rgba(255, 255, 255, 0.07);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(255, 126, 219, 0.18);
  --bg-glow-b: rgba(54, 249, 246, 0.1);
  --accent-gold: #fede5d;
  --accent-gold-dim: rgba(254, 222, 93, 0.16);
  --surface-festive: linear-gradient(135deg, #2a2139 0%, #34294a 55%, #262335 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #ff7edb) 26%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
  --login-wash: linear-gradient(180deg, #1a1424 0%, var(--bg) 55%, #241b2f 100%);
  color-scheme: dark;
}

[data-theme="shades-of-purple"] {
  --bg: #2d2b55;
  --bg-elevated: #1e1e3f;
  --bg-card: #1e1e3f;
  --border: rgba(250, 208, 0, 0.14);
  --border-strong: rgba(165, 153, 233, 0.22);
  --text: #e3dfff;
  --text-muted: #a599e9;
  --sidebar-text: #e3dfff;
  --danger: #ff628c;
  --input-bg: #1a1a36;
  --chip-bg: rgba(255, 255, 255, 0.07);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(250, 208, 0, 0.14);
  --bg-glow-b: rgba(165, 153, 233, 0.14);
  --accent-gold: #fad000;
  --accent-gold-dim: rgba(250, 208, 0, 0.16);
  --surface-festive: linear-gradient(135deg, #1e1e3f 0%, #3a3770 55%, #2d2b55 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #fad000) 24%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --login-wash: linear-gradient(180deg, #15152c 0%, var(--bg) 55%, #1e1e3f 100%);
  color-scheme: dark;
}

[data-theme="cobalt2"] {
  --bg: #193549;
  --bg-elevated: #1f4662;
  --bg-card: #15232d;
  --border: rgba(255, 198, 0, 0.14);
  --border-strong: rgba(0, 136, 255, 0.22);
  --text: #ffffff;
  --text-muted: #9fbed0;
  --sidebar-text: #ffffff;
  --danger: #ff628c;
  --input-bg: #122738;
  --chip-bg: rgba(255, 255, 255, 0.07);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(255, 198, 0, 0.16);
  --bg-glow-b: rgba(0, 136, 255, 0.14);
  --accent-gold: #ffc600;
  --accent-gold-dim: rgba(255, 198, 0, 0.16);
  --surface-festive: linear-gradient(135deg, #1f4662 0%, #15232d 55%, #193549 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #ffc600) 24%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --login-wash: linear-gradient(180deg, #0d1a24 0%, var(--bg) 55%, #122738 100%);
  color-scheme: dark;
}

[data-theme="nord"] {
  --bg: #2e3440;
  --bg-elevated: #3b4252;
  --bg-card: #3b4252;
  --border: rgba(236, 239, 244, 0.1);
  --border-strong: rgba(236, 239, 244, 0.16);
  --text: #eceff4;
  --text-muted: #4c566a;
  --sidebar-text: #eceff4;
  --danger: #bf616a;
  --input-bg: #242933;
  --chip-bg: rgba(255, 255, 255, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", "Inter", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", system-ui, sans-serif;
  --title-tracking: 0.02em;
  --bg-glow-a: rgba(136, 192, 208, 0.16);
  --bg-glow-b: rgba(129, 161, 193, 0.12);
  --accent-gold: #ebcb8b;
  --accent-gold-dim: rgba(235, 203, 139, 0.14);
  --surface-festive: linear-gradient(135deg, #3b4252 0%, #434c5e 55%, #2e3440 100%);
  --nav-active-bg: color-mix(in srgb, var(--green-bright, #88c0d0) 26%, transparent);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35);
  --login-wash: linear-gradient(180deg, #242933 0%, var(--bg) 55%, #3b4252 100%);
  color-scheme: dark;
}

/* ========== Shared shell (.app-themed) ========== */

.app-themed {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

.app-themed .adm-shell {
  background: var(--bg);
}

.app-themed .adm-sidebar {
  background:
    radial-gradient(ellipse 80% 40% at 0% 0%, color-mix(in srgb, var(--green-bright, #9acd32) 22%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sidebar, #14201a) 92%, #fff), var(--sidebar, #14201a) 55%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--sidebar-text);
}

.app-themed .adm-sidebar .brand {
  position: relative;
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
}

.app-themed .adm-sidebar .brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-bright, #9acd32), var(--accent-gold), transparent);
}

.app-themed .adm-sidebar nav a.is-active {
  background: var(--nav-active-bg);
  box-shadow: inset 3px 0 0 var(--green-bright, #9acd32);
  color: #fff;
}

.app-themed .adm-sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.app-themed .adm-sidebar .muted {
  color: color-mix(in srgb, var(--sidebar-text) 55%, transparent) !important;
}

.app-themed .adm-main {
  background:
    radial-gradient(ellipse 70% 45% at 8% -5%, var(--bg-glow-a), transparent 55%),
    radial-gradient(ellipse 55% 40% at 100% 0%, var(--bg-glow-b), transparent 50%),
    var(--bg);
  min-height: 100vh;
  color: var(--text);
}

.app-themed .adm-top h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  letter-spacing: var(--title-tracking);
  line-height: 1.2;
  color: var(--text);
}

.app-themed .adm-top-user {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  font-weight: 600;
  color: var(--text);
  backdrop-filter: blur(6px);
}

.app-themed .adm-top-user a {
  color: inherit;
}

.app-themed .card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  color: var(--text);
}

.app-themed .card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green, #6f9b1e), var(--green-bright, #9acd32), var(--accent-gold));
  opacity: 0.85;
}

.app-themed .muted {
  color: var(--text-muted);
}

.app-themed .btn {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--green, #6f9b1e) 28%, transparent);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.app-themed .btn:hover {
  transform: translateY(-1px);
}

.app-themed .btn-secondary {
  box-shadow: none;
  background: color-mix(in srgb, var(--bg-card) 80%, transparent);
  color: var(--text);
  border-color: var(--border-strong);
}

.app-themed input[type=text],
.app-themed input[type=email],
.app-themed input[type=password],
.app-themed input[type=tel],
.app-themed input[type=number],
.app-themed input[type=date],
.app-themed input[type=datetime-local],
.app-themed select,
.app-themed textarea {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border-strong);
}

.app-themed .table th {
  color: var(--text-muted);
}

.app-themed .table th,
.app-themed .table td {
  border-bottom-color: var(--border);
  color: var(--text);
}

.app-themed .dash-kpi {
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text);
}

.app-themed .dash-kpi::before {
  width: 4px;
  background: linear-gradient(180deg, var(--green-bright, #9acd32), var(--green, #6f9b1e));
}

.app-themed .dash-kpi--pts::before {
  background: linear-gradient(180deg, var(--accent-gold), #a16207);
}

.app-themed .dash-kpi--pts {
  background:
    linear-gradient(135deg, var(--accent-gold-dim), transparent 55%),
    var(--bg-card);
}

.app-themed .dash-kpi--podium::before {
  background: linear-gradient(180deg, #fbbf24, var(--green-bright, #9acd32));
}

.app-themed .dash-kpi--podium {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green-bright, #9acd32) 14%, transparent), transparent 50%),
    var(--bg-card);
}

.app-themed .dash-kpi-label {
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.app-themed .ranking-podium .podium-card {
  text-align: center;
  transition: transform 0.2s ease;
}

.app-themed .ranking-podium .podium-card:hover {
  transform: translateY(-3px);
}

.app-themed .ranking-podium .podium-place {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green, #4d7010);
}

.app-themed .ranking-podium .podium-card.is-first {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--green-bright, #9acd32) 22%, transparent), var(--accent-gold-dim) 45%, var(--bg-card) 100%);
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 55%, transparent);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--green, #6f9b1e) 16%, transparent);
}

.app-themed .ranking-podium .podium-card.is-first .podium-place {
  color: var(--accent-gold);
}

.app-themed .ranking-podium .podium-card.is-second .podium-place {
  color: #94a3b8;
}

.app-themed .ranking-podium .podium-card.is-third .podium-place {
  color: #d97706;
}

.app-themed .game-place-badge {
  background: color-mix(in srgb, var(--green-bright, #9acd32) 16%, transparent);
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 40%, transparent);
  color: var(--green, #4d7010);
}
.app-themed .game-place-badge.is-gold {
  background: linear-gradient(135deg, var(--accent-gold-dim, rgba(251,191,36,.25)), color-mix(in srgb, var(--green-bright, #9acd32) 18%, transparent));
  border-color: color-mix(in srgb, var(--accent-gold, #fbbf24) 55%, transparent);
  color: var(--accent-gold, #a16207);
}
.app-themed .game-mission-card {
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 35%, transparent);
  background: color-mix(in srgb, var(--green-bright, #9acd32) 10%, var(--bg-card));
}
.app-themed .game-mission-pts,
.app-themed .game-meta-top strong,
.app-themed .game-minirank-row .gm-place {
  color: var(--green-bright, #6f9b1e);
}
.app-themed .game-minirank-row.is-gold,
.app-themed .game-minirank-row.is-you {
  background: color-mix(in srgb, var(--green-bright, #9acd32) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 35%, transparent);
}
.app-themed .table tr.is-you td {
  background: color-mix(in srgb, var(--green-bright, #9acd32) 12%, transparent);
}
.app-themed .table tr.is-you td:first-child {
  box-shadow: inset 3px 0 0 var(--green-bright, #6f9b1e);
}
.app-themed .game-pts-chip {
  background: color-mix(in srgb, var(--green-bright, #9acd32) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 40%, transparent);
}
.app-themed .game-pts-chip strong { color: var(--green-bright, #6f9b1e); }

.app-themed .adm-main {
  background:
    radial-gradient(ellipse 55% 40% at 8% 0%, var(--bg-glow-a, rgba(154, 205, 50, 0.12)), transparent 55%),
    radial-gradient(ellipse 45% 35% at 92% 8%, var(--bg-glow-b, rgba(251, 191, 36, 0.08)), transparent 50%),
    var(--bg, #0a0a0a);
  background-attachment: local;
}

.app-themed .game-hero-art {
  background: color-mix(in srgb, var(--green-bright, #9acd32) 10%, var(--bg-card));
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 28%, transparent);
}
.app-themed .game-art-inline {
  background: color-mix(in srgb, var(--green-bright, #9acd32) 10%, var(--bg-card));
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 28%, transparent);
}
.app-themed .game-hero {
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 32%, transparent);
  background:
    radial-gradient(ellipse 70% 80% at 0% 0%, color-mix(in srgb, var(--green-bright, #9acd32) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 60% at 100% 100%, var(--accent-gold-dim, rgba(251,191,36,.12)), transparent 50%),
    var(--bg-card);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--green, #6f9b1e) 12%, transparent);
}
.app-themed .game-hero-side {
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 28%, transparent);
  background: color-mix(in srgb, var(--green-bright, #9acd32) 10%, var(--bg-card));
}
.app-themed .game-quest {
  background: var(--bg-card);
  border-color: var(--border);
}
.app-themed .game-quest.is-done,
.app-themed .game-quest:hover {
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 40%, transparent);
}
.app-themed .game-quest-icon {
  background: color-mix(in srgb, var(--green-bright, #9acd32) 14%, transparent);
  color: var(--green-bright, #6f9b1e);
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 35%, transparent);
}
.app-themed .game-chest-card.is-ready {
  border-color: color-mix(in srgb, var(--green-bright, #9acd32) 50%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--green-bright, #9acd32) 25%, transparent),
    0 14px 32px color-mix(in srgb, var(--green, #6f9b1e) 18%, transparent);
}
.app-themed .game-chest-icon {
  background: linear-gradient(145deg, var(--accent-gold-dim, rgba(251,191,36,.28)), color-mix(in srgb, var(--green-bright, #9acd32) 22%, transparent));
  border-color: color-mix(in srgb, var(--accent-gold, #fbbf24) 45%, transparent);
}
.app-themed .ranking-podium .podium-card.is-first::after {
  color: var(--accent-gold, #c49212);
}

.app-themed .aviso-hero {
  background:
    radial-gradient(circle at 12% 20%, var(--bg-glow-a), transparent 42%),
    radial-gradient(circle at 88% 10%, var(--bg-glow-b), transparent 40%),
    var(--surface-festive);
  border-color: color-mix(in srgb, var(--green, #6f9b1e) 45%, transparent);
}

.app-themed .aviso-hero-kicker {
  color: color-mix(in srgb, var(--green, #6f9b1e) 70%, var(--text));
}

.app-themed .aviso-card--festive {
  background:
    linear-gradient(120deg, var(--accent-gold-dim), var(--green-dim, rgba(111, 155, 30, 0.14)) 50%, var(--bg-card) 100%);
}

.app-themed .aviso-pill {
  background: linear-gradient(90deg, var(--green, #6f9b1e), color-mix(in srgb, var(--green, #6f9b1e) 70%, #14201a));
}

/* Login */
body.login-page.app-themed {
  background:
    radial-gradient(ellipse 70% 50% at 10% -10%, var(--bg-glow-a), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 0%, var(--bg-glow-b), transparent 50%),
    var(--login-wash);
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
}

body.login-page.app-themed .login-card {
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  color: var(--text);
}

body.login-page.app-themed .login-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green, #6f9b1e), var(--green-bright, #9acd32), var(--accent-gold));
}

body.login-page.app-themed .login-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: var(--title-tracking);
}

@media (prefers-reduced-motion: reduce) {
  .app-themed .btn,
  .app-themed .ranking-podium .podium-card {
    transition: none;
  }
  .app-themed .btn:hover,
  .app-themed .ranking-podium .podium-card:hover {
    transform: none;
  }
}

/* Branding UI swatches (gestao) */
.theme-group {
  margin-bottom: 1rem;
}
.theme-group-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5c6b60;
  margin: 0.75rem 0 0.45rem;
}
.theme-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 0.25rem 0 0.5rem;
}
.theme-swatch {
  display: block;
  border: 2px solid rgba(20, 32, 26, 0.12);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  background: #fff;
  text-align: left;
}
.theme-swatch.is-selected {
  border-color: var(--green, #6f9b1e);
  box-shadow: 0 0 0 1px var(--green, #6f9b1e);
}
.theme-swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.theme-swatch-bars {
  display: flex;
  gap: 4px;
  height: 28px;
  margin-bottom: 0.45rem;
  border-radius: 6px;
  overflow: hidden;
}
.theme-swatch-bars span {
  flex: 1;
}
.theme-swatch strong {
  display: block;
  font-size: 0.85rem;
}
.theme-swatch small {
  color: #5c6b60;
  font-size: 0.75rem;
}

.branding-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1.5rem;
  align-items: start;
  margin-top: 1rem;
}
.branding-preview-col {
  position: sticky;
  top: 1rem;
}
.branding-preview-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c6b60;
  margin-bottom: 0.5rem;
}
.branding-preview-frame {
  border: 1px solid rgba(20, 32, 26, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(20, 32, 26, 0.08);
}
.branding-app-preview {
  pointer-events: none;
  user-select: none;
}
.branding-preview-shell {
  display: grid !important;
  grid-template-columns: 132px 1fr;
  min-height: 360px;
  font-size: 0.78rem;
  min-height: 360px !important;
  position: relative !important;
  overflow: hidden;
}
.branding-preview-shell .adm-sidebar {
  padding: 0.75rem 0.5rem;
  min-height: 100%;
  width: auto !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  overflow: visible !important;
  box-shadow: none !important;
  flex-shrink: 0;
}
.branding-preview-shell .adm-sidebar .brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.branding-preview-shell .adm-sidebar .brand img {
  height: 22px;
  width: auto;
  max-width: 40px;
  object-fit: contain;
}
.branding-preview-shell .adm-sidebar .brand .adm-nav-close {
  display: none;
}
.branding-preview-shell .adm-sidebar nav a {
  display: block;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
}
.branding-preview-shell .adm-main {
  padding: 0.85rem;
  min-height: 420px;
}
.branding-preview-shell .adm-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.branding-preview-shell .adm-top h1 {
  margin: 0;
  font-size: 1.05rem !important;
}
.branding-preview-shell .adm-top-user {
  font-size: 0.7rem;
}
.branding-preview-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.branding-preview-hero {
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
  padding: 0.75rem;
  margin-bottom: 0.65rem;
}
.branding-preview-hero .game-hero-art {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}
.branding-preview-hero .game-hero-kicker {
  font-size: 0.62rem;
  margin-bottom: 0.15rem;
}
.branding-preview-hero .game-hero-name {
  margin-bottom: 0.35rem;
}
.branding-preview-hero .game-hero-stats {
  gap: 0.35rem;
  margin-bottom: 0;
}
.branding-preview-shell .game-quest {
  animation: none;
}
.branding-preview-shell .game-quest:hover {
  transform: none;
  box-shadow: none;
}
.branding-preview-shell .gm-place--art {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
  border: none;
  display: grid;
  place-items: center;
}
.branding-preview-shell .gm-place--art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.branding-preview-shell .dash-kpi {
  padding: 0.65rem 0.75rem 0.65rem 0.9rem;
  position: relative;
}
.branding-preview-shell .dash-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}
.branding-preview-shell .dash-kpi strong {
  font-size: 1rem;
}
.branding-preview-shell .btn {
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
}

.branding-color-mode {
  border: 1px solid rgba(20, 32, 26, 0.1);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
}
.branding-color-mode legend {
  padding: 0 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.branding-mode-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.branding-mode-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.color-field {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.5rem 0.65rem;
  align-items: center;
}
.color-field-picker {
  width: 44px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(20, 32, 26, 0.18);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.color-field-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}
.color-field-rgb {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.color-field-rgb label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #5c6b60;
  margin: 0;
}
.color-field-rgb input {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.4rem;
}
.branding-color-fields.is-locked {
  opacity: 0.72;
}
.branding-color-fields.is-locked .color-field-picker {
  cursor: not-allowed;
}

@media (max-width: 960px) {
  .branding-layout {
    grid-template-columns: 1fr;
  }
  .branding-preview-col {
    position: static;
    order: -1;
  }
}

@media (max-width: 768px) {
  .branding-preview-shell {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
  }
  .branding-preview-shell .adm-sidebar {
    position: relative !important;
    transform: none !important;
    width: auto !important;
  }
  .branding-preview-shell .adm-main {
    padding: 0.75rem !important;
  }
}