/* ==========================================================================
   Authoritative 21 HMI Design Themes System
   Unified Tokens for Software & Electrical Realms
   ========================================================================== */

/* --- Universal Defaults & Helper Tokens --- */
:root {
  --bg-app: #070913;
  --bg-app-solid: #070913;
  --bg-panel-solid: #141830;
  --bg-sidebar: rgba(13, 17, 35, 0.45);
  --bg-panel: rgba(20, 24, 48, 0.35);
  --border-panel: rgba(255, 255, 255, 0.08);
  --text-main: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --primary: #6366f1;
  --primary-glow: rgba(99, 102, 241, 0.5);
  --accent: #d946ef;
  --accent-glow: rgba(217, 70, 239, 0.4);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --backdrop-blur: 16px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: rgba(13, 17, 35, 0.6);
  --input-border: rgba(255, 255, 255, 0.1);
  --btn-primary-bg: linear-gradient(135deg, #6366f1, #d946ef);
  --text-btn-primary: #ffffff;

  --el-bg: var(--bg-app, #070913);
  --el-bg-secondary: var(--bg-sidebar, #0b0f19);
  --el-card: var(--bg-panel-solid, #141830);
  --el-card-subtle: var(--bg-panel, #141830);
  --el-border: var(--border-panel, rgba(255, 255, 255, 0.1));
  --el-border-glow: var(--primary-glow, rgba(99, 102, 241, 0.5));
  --el-accent: var(--primary, #6366f1);
  --el-accent-hover: var(--accent, #d946ef);
  --el-text-main: var(--text-main, #f3f4f6);
  --el-text-secondary: var(--text-secondary, #9ca3af);
  --el-text-muted: var(--text-muted, #6b7280);
  --el-gradient-ribbon: var(--btn-primary-bg, linear-gradient(135deg, #111827 0%, #1f2937 100%));
}

/* 1. Aurora Glassmorphism (glassmorphism) */
html[data-theme="glassmorphism"], [data-theme="glassmorphism"] {
  --bg-app: #070913;
  --bg-app-solid: #070913;
  --bg-panel-solid: #141830;
  --bg-sidebar: rgba(13, 17, 35, 0.45);
  --bg-panel: rgba(20, 24, 48, 0.35);
  --border-panel: rgba(255, 255, 255, 0.08);
  --text-main: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --primary: #6366f1;
  --primary-glow: rgba(99, 102, 241, 0.5);
  --accent: #d946ef;
  --accent-glow: rgba(217, 70, 239, 0.4);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --backdrop-blur: 16px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: rgba(13, 17, 35, 0.6);
  --input-border: rgba(255, 255, 255, 0.1);
  --btn-primary-bg: linear-gradient(135deg, #6366f1, #d946ef);
  --text-btn-primary: #ffffff;
  --el-bg: #070913;
  --el-bg-secondary: #0b0f19;
  --el-card: #141830;
  --el-card-subtle: rgba(20, 24, 48, 0.35);
  --el-border: rgba(99, 102, 241, 0.25);
  --el-border-glow: rgba(99, 102, 241, 0.5);
  --el-accent: #6366f1;
  --el-accent-hover: #d946ef;
  --el-text-main: #f3f4f6;
  --el-text-secondary: #9ca3af;
  --el-text-muted: #6b7280;
  --el-gradient-ribbon: linear-gradient(135deg, #0d1123 0%, #141830 100%);
}

/* 2. Velvet Crimson Studio (velvet-crimson) */
html[data-theme="velvet-crimson"], [data-theme="velvet-crimson"] {
  --bg-app: #090d16;
  --bg-app-solid: #090d16;
  --bg-panel-solid: #0f172a;
  --bg-sidebar: #0b0f19;
  --bg-panel: #0f172a;
  --border-panel: rgba(244, 63, 94, 0.18);
  --text-main: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --primary: #f43f5e;
  --primary-glow: rgba(244, 63, 94, 0.35);
  --accent: #fb7185;
  --accent-glow: rgba(251, 113, 133, 0.25);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #e11d48;
  --info: #38bdf8;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #090d16;
  --input-border: rgba(244, 63, 94, 0.25);
  --btn-primary-bg: linear-gradient(135deg, #f43f5e, #fb7185);
  --text-btn-primary: #ffffff;
  --el-bg: #090d16;
  --el-bg-secondary: #0b0f19;
  --el-card: #0f172a;
  --el-card-subtle: #141d33;
  --el-border: rgba(244, 63, 94, 0.25);
  --el-border-glow: rgba(244, 63, 94, 0.5);
  --el-accent: #f43f5e;
  --el-accent-hover: #fb7185;
  --el-text-main: #f8fafc;
  --el-text-secondary: #cbd5e1;
  --el-text-muted: #64748b;
  --el-gradient-ribbon: linear-gradient(135deg, #14070d 0%, #200d17 100%);
}

/* 3. Velvet Rose Dawn (velvet-rose) - LIGHT */
html[data-theme="velvet-rose"], [data-theme="velvet-rose"] {
  --bg-app: #fff1f2;
  --bg-app-solid: #fff1f2;
  --bg-panel-solid: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-panel: #ffffff;
  --border-panel: #fecdd3;
  --text-main: #4c0519;
  --text-secondary: #881337;
  --text-muted: #9f1239;
  --primary: #e11d48;
  --primary-glow: rgba(225, 29, 72, 0.2);
  --accent: #f43f5e;
  --accent-glow: rgba(244, 63, 94, 0.15);
  --success: #16a34a;
  --warning: #d97706;
  --error: #be123c;
  --info: #0284c7;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #ffe4e6;
  --input-border: #fecdd3;
  --btn-primary-bg: linear-gradient(135deg, #e11d48, #f43f5e);
  --text-btn-primary: #ffffff;
  --el-bg: #fff1f2;
  --el-bg-secondary: #ffe4e6;
  --el-card: #ffffff;
  --el-card-subtle: #fff1f2;
  --el-border: #fecdd3;
  --el-border-glow: rgba(225, 29, 72, 0.3);
  --el-accent: #e11d48;
  --el-accent-hover: #f43f5e;
  --el-text-main: #4c0519;
  --el-text-secondary: #881337;
  --el-text-muted: #9f1239;
  --el-gradient-ribbon: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
}

/* 4. Matrix Paper CLI (matrix-paper) - LIGHT */
html[data-theme="matrix-paper"], [data-theme="matrix-paper"] {
  --bg-app: #f0fdf4;
  --bg-app-solid: #f0fdf4;
  --bg-panel-solid: #ffffff;
  --bg-sidebar: #f8fdf9;
  --bg-panel: #ffffff;
  --border-panel: #16a34a;
  --text-main: #052e16;
  --text-secondary: #166534;
  --text-muted: #15803d;
  --primary: #16a34a;
  --primary-glow: rgba(22, 163, 74, 0.25);
  --accent: #15803d;
  --accent-glow: rgba(21, 128, 61, 0.2);
  --success: #16a34a;
  --warning: #ca8a04;
  --error: #dc2626;
  --info: #0284c7;
  --backdrop-blur: 0px;
  --font-sans: 'JetBrains Mono', monospace;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #f8fdf9;
  --input-border: #16a34a;
  --btn-primary-bg: #16a34a;
  --text-btn-primary: #ffffff;
  --el-bg: #f0fdf4;
  --el-bg-secondary: #f8fdf9;
  --el-card: #ffffff;
  --el-card-subtle: #f0fdf4;
  --el-border: #16a34a;
  --el-border-glow: rgba(22, 163, 74, 0.3);
  --el-accent: #16a34a;
  --el-accent-hover: #15803d;
  --el-text-main: #052e16;
  --el-text-secondary: #166534;
  --el-text-muted: #15803d;
  --el-gradient-ribbon: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

/* 5. macOS Matrix Light (macos-matrix-light) - LIGHT */
html[data-theme="macos-matrix-light"], [data-theme="macos-matrix-light"] {
  --bg-app: #f2faf5;
  --bg-app-solid: #f2faf5;
  --bg-panel-solid: #ffffff;
  --bg-sidebar: rgba(240, 250, 243, 0.9);
  --bg-panel: #ffffff;
  --border-panel: rgba(22, 163, 74, 0.28);
  --text-main: #052e16;
  --text-secondary: #166534;
  --text-muted: #15803d;
  --primary: #16a34a;
  --primary-glow: rgba(22, 163, 74, 0.3);
  --accent: #15803d;
  --accent-glow: rgba(21, 128, 61, 0.25);
  --success: #16a34a;
  --warning: #ca8a04;
  --error: #dc2626;
  --info: #0284c7;
  --backdrop-blur: 8px;
  --font-sans: 'JetBrains Mono', -apple-system, BlinkMacSystemFont, 'SF Pro Display', monospace;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: rgba(255, 255, 255, 0.95);
  --input-border: rgba(22, 163, 74, 0.35);
  --btn-primary-bg: linear-gradient(180deg, #22c55e 0%, #16a34a 60%, #15803d 100%);
  --text-btn-primary: #ffffff;
  --el-bg: #f2faf5;
  --el-bg-secondary: #f0faf3;
  --el-card: #ffffff;
  --el-card-subtle: #f2faf5;
  --el-border: rgba(22, 163, 74, 0.3);
  --el-border-glow: rgba(22, 163, 74, 0.4);
  --el-accent: #16a34a;
  --el-accent-hover: #15803d;
  --el-text-main: #052e16;
  --el-text-secondary: #166534;
  --el-text-muted: #15803d;
  --el-gradient-ribbon: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}

/* 6. macOS Dark (macos-dark) */
html[data-theme="macos-dark"], [data-theme="macos-dark"] {
  --bg-app: #1e1e1e;
  --bg-app-solid: #1e1e1e;
  --bg-panel-solid: #282828;
  --bg-sidebar: rgba(32, 32, 35, 0.75);
  --bg-panel: rgba(42, 42, 46, 0.65);
  --border-panel: rgba(255, 255, 255, 0.12);
  --text-main: #f5f5f7;
  --text-secondary: #98989d;
  --text-muted: #636366;
  --primary: #0a84ff;
  --primary-glow: rgba(10, 132, 255, 0.35);
  --accent: #ff375f;
  --accent-glow: rgba(255, 55, 95, 0.3);
  --success: #30d158;
  --warning: #ffd60a;
  --error: #ff453a;
  --info: #64d2ff;
  --backdrop-blur: 8px;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --font-mono: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  --input-bg: rgba(0, 0, 0, 0.3);
  --input-border: rgba(255, 255, 255, 0.15);
  --btn-primary-bg: linear-gradient(180deg, #0a84ff 0%, #0066cc 100%);
  --text-btn-primary: #ffffff;
  --el-bg: #1e1e1e;
  --el-bg-secondary: #282828;
  --el-card: #282828;
  --el-card-subtle: #333333;
  --el-border: rgba(10, 132, 255, 0.25);
  --el-border-glow: rgba(10, 132, 255, 0.5);
  --el-accent: #0a84ff;
  --el-accent-hover: #ff375f;
  --el-text-main: #f5f5f7;
  --el-text-secondary: #98989d;
  --el-text-muted: #636366;
  --el-gradient-ribbon: linear-gradient(180deg, #0a84ff 0%, #0066cc 100%);
}

/* 7. macOS Light (macos-light) - LIGHT */
html[data-theme="macos-light"], [data-theme="macos-light"] {
  --bg-app: #f5f5f7;
  --bg-app-solid: #f5f5f7;
  --bg-panel-solid: #ffffff;
  --bg-sidebar: rgba(240, 240, 243, 0.85);
  --bg-panel: #ffffff;
  --border-panel: rgba(0, 0, 0, 0.08);
  --text-main: #1d1d1f;
  --text-secondary: #86868b;
  --text-muted: #a1a1a6;
  --primary: #007aff;
  --primary-glow: rgba(0, 122, 255, 0.2);
  --accent: #ff2d55;
  --accent-glow: rgba(255, 45, 85, 0.2);
  --success: #34c759;
  --warning: #ff9500;
  --error: #ff3b30;
  --info: #5AC8FA;
  --backdrop-blur: 8px;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --font-mono: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  --input-bg: rgba(255, 255, 255, 0.9);
  --input-border: rgba(0, 0, 0, 0.12);
  --btn-primary-bg: linear-gradient(180deg, #007aff 0%, #0056b3 100%);
  --text-btn-primary: #ffffff;
  --el-bg: #f5f5f7;
  --el-bg-secondary: #f0f0f3;
  --el-card: #ffffff;
  --el-card-subtle: #f5f5f7;
  --el-border: rgba(0, 122, 255, 0.2);
  --el-border-glow: rgba(0, 122, 255, 0.35);
  --el-accent: #007aff;
  --el-accent-hover: #ff2d55;
  --el-text-main: #1d1d1f;
  --el-text-secondary: #86868b;
  --el-text-muted: #a1a1a6;
  --el-gradient-ribbon: linear-gradient(180deg, #007aff 0%, #0056b3 100%);
}

/* 8. Matrix Escape (matrix-escape) */
html[data-theme="matrix-escape"], [data-theme="matrix-escape"] {
  --bg-app: #040506;
  --bg-app-solid: #040506;
  --bg-panel-solid: #0d1217;
  --bg-sidebar: #0a0e12;
  --bg-panel: #0d1217;
  --border-panel: #00ff66;
  --text-main: #00ff66;
  --text-secondary: #00cc52;
  --text-muted: #006629;
  --primary: #00ff66;
  --primary-glow: rgba(0, 255, 102, 0.3);
  --accent: #ffb700;
  --accent-glow: rgba(255, 183, 0, 0.3);
  --success: #00ff66;
  --warning: #ffb700;
  --error: #ff3333;
  --info: #00ffff;
  --backdrop-blur: 0px;
  --font-sans: 'JetBrains Mono', monospace;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #050709;
  --input-border: #00cc52;
  --btn-primary-bg: #00ff66;
  --text-btn-primary: #040506;
  --el-bg: #040506;
  --el-bg-secondary: #0a0e12;
  --el-card: #0d1217;
  --el-card-subtle: #121820;
  --el-border: #00ff66;
  --el-border-glow: rgba(0, 255, 102, 0.4);
  --el-accent: #00ff66;
  --el-accent-hover: #ffb700;
  --el-text-main: #00ff66;
  --el-text-secondary: #00cc52;
  --el-text-muted: #006629;
  --el-gradient-ribbon: linear-gradient(135deg, #050e08 0%, #0d1a10 100%);
}

/* 9. Industrial SCADA Steel (scada) - LIGHT */
html[data-theme="scada"], [data-theme="scada"] {
  --bg-app: #d1d5db;
  --bg-app-solid: #d1d5db;
  --bg-panel-solid: #f3f4f6;
  --bg-sidebar: #e5e7eb;
  --bg-panel: #f3f4f6;
  --border-panel: #9ca3af;
  --text-main: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --primary: #1f2937;
  --primary-glow: rgba(31, 41, 55, 0.2);
  --accent: #4b5563;
  --accent-glow: rgba(75, 85, 99, 0.2);
  --success: #047857;
  --warning: #b45309;
  --error: #b91c1c;
  --info: #1d4ed8;
  --backdrop-blur: 0px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: Consolas, monospace;
  --input-bg: #ffffff;
  --input-border: #9ca3af;
  --btn-primary-bg: #1f2937;
  --text-btn-primary: #ffffff;
  --el-bg: #d1d5db;
  --el-bg-secondary: #e5e7eb;
  --el-card: #f3f4f6;
  --el-card-subtle: #e5e7eb;
  --el-border: #9ca3af;
  --el-border-glow: rgba(31, 41, 55, 0.3);
  --el-accent: #1f2937;
  --el-accent-hover: #4b5563;
  --el-text-main: #111827;
  --el-text-secondary: #4b5563;
  --el-text-muted: #9ca3af;
  --el-gradient-ribbon: linear-gradient(135deg, #1f2937 0%, #374151 100%);
}

/* 10. Cognitive Solarized Calm (solarized) - LIGHT */
html[data-theme="solarized"], [data-theme="solarized"] {
  --bg-app: #fdf6e3;
  --bg-app-solid: #fdf6e3;
  --bg-panel-solid: #eee8d5;
  --bg-sidebar: #eee8d5;
  --bg-panel: #fdf6e3;
  --border-panel: #93a1a1;
  --text-main: #073642;
  --text-secondary: #586e75;
  --text-muted: #93a1a1;
  --primary: #268bd2;
  --primary-glow: rgba(38, 139, 210, 0.2);
  --accent: #d33682;
  --accent-glow: rgba(211, 54, 130, 0.2);
  --success: #859900;
  --warning: #b58900;
  --error: #dc322f;
  --info: #268bd2;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #eee8d5;
  --input-border: #586e75;
  --btn-primary-bg: #268bd2;
  --text-btn-primary: #fdf6e3;
  --el-bg: #fdf6e3;
  --el-bg-secondary: #eee8d5;
  --el-card: #eee8d5;
  --el-card-subtle: #fdf6e3;
  --el-border: #93a1a1;
  --el-border-glow: rgba(38, 139, 210, 0.3);
  --el-accent: #268bd2;
  --el-accent-hover: #d33682;
  --el-text-main: #073642;
  --el-text-secondary: #586e75;
  --el-text-muted: #93a1a1;
  --el-gradient-ribbon: linear-gradient(135deg, #073642 0%, #002b36 100%);
}

/* 11. Synthwave '84 Arcade (synthwave) */
html[data-theme="synthwave"], [data-theme="synthwave"] {
  --bg-app: #2b0f54;
  --bg-app-solid: #2b0f54;
  --bg-panel-solid: #25104d;
  --bg-sidebar: #1e093d;
  --bg-panel: rgba(37, 16, 77, 0.85);
  --border-panel: #ff007f;
  --text-main: #f5f3f7;
  --text-secondary: #b38df7;
  --text-muted: #623f99;
  --primary: #ff007f;
  --primary-glow: rgba(255, 0, 127, 0.5);
  --accent: #00ffff;
  --accent-glow: rgba(0, 255, 255, 0.5);
  --success: #00ff66;
  --warning: #ffb700;
  --error: #ff007f;
  --info: #00ffff;
  --backdrop-blur: 8px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #1e093d;
  --input-border: #b38df7;
  --btn-primary-bg: linear-gradient(to right, #ff007f, #00ffff);
  --text-btn-primary: #1e093d;
  --el-bg: #2b0f54;
  --el-bg-secondary: #1e093d;
  --el-card: #25104d;
  --el-card-subtle: rgba(37, 16, 77, 0.85);
  --el-border: #ff007f;
  --el-border-glow: rgba(255, 0, 127, 0.5);
  --el-accent: #ff007f;
  --el-accent-hover: #00ffff;
  --el-text-main: #f5f3f7;
  --el-text-secondary: #b38df7;
  --el-text-muted: #623f99;
  --el-gradient-ribbon: linear-gradient(to right, #ff007f, #00ffff);
}

/* 12. NeonDrift Synthwave (neondrift) */
html[data-theme="neondrift"], [data-theme="neondrift"] {
  --bg-app: #06040a;
  --bg-app-solid: #06040a;
  --bg-panel-solid: #0e0a18;
  --bg-sidebar: rgba(10, 6, 20, 0.65);
  --bg-panel: rgba(14, 10, 24, 0.45);
  --border-panel: rgba(0, 240, 255, 0.15);
  --text-main: #f3f4f6;
  --text-secondary: #9a90bd;
  --text-muted: #5b4d7e;
  --primary: #9d00ff;
  --primary-glow: rgba(157, 0, 255, 0.4);
  --accent: #00f0ff;
  --accent-glow: rgba(0, 240, 255, 0.4);
  --success: #00ff66;
  --warning: #ffb700;
  --error: #ff007f;
  --info: #00f0ff;
  --backdrop-blur: 20px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: rgba(6, 4, 10, 0.85);
  --input-border: rgba(0, 240, 255, 0.25);
  --btn-primary-bg: linear-gradient(135deg, #ff007f, #9d00ff);
  --text-btn-primary: #ffffff;
  --el-bg: #06040a;
  --el-bg-secondary: #0e0a18;
  --el-card: #0e0a18;
  --el-card-subtle: rgba(14, 10, 24, 0.55);
  --el-border: rgba(0, 240, 255, 0.25);
  --el-border-glow: rgba(0, 240, 255, 0.5);
  --el-accent: #00f0ff;
  --el-accent-hover: #ff007f;
  --el-text-main: #f3f4f6;
  --el-text-secondary: #9a90bd;
  --el-text-muted: #5b4d7e;
  --el-gradient-ribbon: linear-gradient(135deg, #0e0618 0%, #1c0c32 100%);
}

/* 13. PixelPunch Neubrutalist (pixelpunch) - LIGHT */
html[data-theme="pixelpunch"], [data-theme="pixelpunch"] {
  --bg-app: #ffd300;
  --bg-app-solid: #ffd300;
  --bg-panel-solid: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-panel: #ffffff;
  --border-panel: 4px solid #000000;
  --text-main: #000000;
  --text-secondary: #222222;
  --text-muted: #555555;
  --primary: #000000;
  --primary-glow: rgba(0, 0, 0, 0.1);
  --accent: #ff007f;
  --accent-glow: rgba(255, 0, 127, 0.2);
  --success: #00ff66;
  --warning: #ffd300;
  --error: #ff3333;
  --info: #00f0ff;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #ffffff;
  --input-border: #000000;
  --btn-primary-bg: #00ff66;
  --text-btn-primary: #000000;
  --el-bg: #ffd300;
  --el-bg-secondary: #ffffff;
  --el-card: #ffffff;
  --el-card-subtle: #fff5c0;
  --el-border: #000000;
  --el-border-glow: rgba(0, 0, 0, 0.2);
  --el-accent: #000000;
  --el-accent-hover: #ff007f;
  --el-text-main: #000000;
  --el-text-secondary: #222222;
  --el-text-muted: #555555;
  --el-gradient-ribbon: linear-gradient(135deg, #000000 0%, #222222 100%);
}

/* 14. Nordic Minimalist Slate (nordic) */
html[data-theme="nordic"], [data-theme="nordic"] {
  --bg-app: #1e293b;
  --bg-app-solid: #1e293b;
  --bg-panel-solid: #334155;
  --bg-sidebar: #0f172a;
  --bg-panel: #334155;
  --border-panel: #475569;
  --text-main: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --primary: #a78bfa;
  --primary-glow: rgba(167, 139, 250, 0.3);
  --accent: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.3);
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  --info: #60a5fa;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #0f172a;
  --input-border: #475569;
  --btn-primary-bg: #a78bfa;
  --text-btn-primary: #0f172a;
  --el-bg: #1e293b;
  --el-bg-secondary: #0f172a;
  --el-card: #334155;
  --el-card-subtle: #273549;
  --el-border: #475569;
  --el-border-glow: rgba(167, 139, 250, 0.4);
  --el-accent: #a78bfa;
  --el-accent-hover: #38bdf8;
  --el-text-main: #f8fafc;
  --el-text-secondary: #cbd5e1;
  --el-text-muted: #64748b;
  --el-gradient-ribbon: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* 15. Volcanic Obsidian Glass (obsidian) */
html[data-theme="obsidian"], [data-theme="obsidian"] {
  --bg-app: #050508;
  --bg-app-solid: #050508;
  --bg-panel-solid: #161826;
  --bg-sidebar: rgba(12, 13, 20, 0.7);
  --bg-panel: rgba(22, 24, 38, 0.55);
  --border-panel: rgba(255, 255, 255, 0.05);
  --text-main: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #4b5563;
  --primary: #c084fc;
  --primary-glow: rgba(192, 132, 252, 0.4);
  --accent: #f472b6;
  --accent-glow: rgba(244, 114, 182, 0.3);
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  --info: #60a5fa;
  --backdrop-blur: 20px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: rgba(12, 13, 20, 0.85);
  --input-border: rgba(255, 255, 255, 0.08);
  --btn-primary-bg: linear-gradient(135deg, #c084fc, #f472b6);
  --text-btn-primary: #050508;
  --el-bg: #050508;
  --el-bg-secondary: #0d0d16;
  --el-card: #161826;
  --el-card-subtle: rgba(22, 24, 38, 0.55);
  --el-border: rgba(192, 132, 252, 0.25);
  --el-border-glow: rgba(192, 132, 252, 0.5);
  --el-accent: #c084fc;
  --el-accent-hover: #f472b6;
  --el-text-main: #f3f4f6;
  --el-text-secondary: #9ca3af;
  --el-text-muted: #4b5563;
  --el-gradient-ribbon: linear-gradient(135deg, #10081d 0%, #1f0f35 100%);
}

/* 16. Digital Matrix CLI (matrix) */
html[data-theme="matrix"], [data-theme="matrix"] {
  --bg-app: #000000;
  --bg-app-solid: #000000;
  --bg-panel-solid: #050705;
  --bg-sidebar: #020202;
  --bg-panel: #050705;
  --border-panel: #00ff41;
  --text-main: #00ff41;
  --text-secondary: #00cc33;
  --text-muted: #004411;
  --primary: #00ff41;
  --primary-glow: rgba(0, 255, 65, 0.3);
  --accent: #00ff41;
  --accent-glow: rgba(0, 255, 65, 0.3);
  --success: #00ff41;
  --warning: #00ff41;
  --error: #ff3333;
  --info: #00ff41;
  --backdrop-blur: 0px;
  --font-sans: 'JetBrains Mono', monospace;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #000000;
  --input-border: #00cc33;
  --btn-primary-bg: #00ff41;
  --text-btn-primary: #000000;
  --el-bg: #000000;
  --el-bg-secondary: #020202;
  --el-card: #050705;
  --el-card-subtle: #081008;
  --el-border: #00ff41;
  --el-border-glow: rgba(0, 255, 65, 0.5);
  --el-accent: #00ff41;
  --el-accent-hover: #00cc33;
  --el-text-main: #00ff41;
  --el-text-secondary: #00cc33;
  --el-text-muted: #004411;
  --el-gradient-ribbon: linear-gradient(135deg, #020b04 0%, #061f0a 100%);
}

/* 17. High Roller Casino Felt (casino) */
html[data-theme="casino"], [data-theme="casino"] {
  --bg-app: #03140c;
  --bg-app-solid: #03140c;
  --bg-panel-solid: #062315;
  --bg-sidebar: #020b07;
  --bg-panel: #062315;
  --border-panel: #d4af37;
  --text-main: #ffffff;
  --text-secondary: #a2d2b5;
  --text-muted: #4e8061;
  --primary: #d4af37;
  --primary-glow: rgba(212, 175, 55, 0.4);
  --accent: #d62229;
  --accent-glow: rgba(214, 34, 41, 0.4);
  --success: #2ec4b6;
  --warning: #d4af37;
  --error: #d62229;
  --info: #3a86c8;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #020b07;
  --input-border: #d4af37;
  --btn-primary-bg: linear-gradient(135deg, #d4af37, #b8860b);
  --text-btn-primary: #020b07;
  --el-bg: #03140c;
  --el-bg-secondary: #020b07;
  --el-card: #062315;
  --el-card-subtle: #09331e;
  --el-border: #d4af37;
  --el-border-glow: rgba(212, 175, 55, 0.5);
  --el-accent: #d4af37;
  --el-accent-hover: #d62229;
  --el-text-main: #ffffff;
  --el-text-secondary: #a2d2b5;
  --el-text-muted: #4e8061;
  --el-gradient-ribbon: linear-gradient(135deg, #062315 0%, #0d3d25 100%);
}

/* 18. System Light (light) - LIGHT */
html[data-theme="light"], [data-theme="light"] {
  --bg-app: #f8fafc;
  --bg-app-solid: #f8fafc;
  --bg-panel-solid: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-panel: #ffffff;
  --border-panel: #e2e8f0;
  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --primary: #2563eb;
  --primary-glow: rgba(37, 99, 235, 0.15);
  --accent: #db2777;
  --accent-glow: rgba(219, 39, 119, 0.12);
  --success: #16a34a;
  --warning: #ca8a04;
  --error: #dc2626;
  --info: #2563eb;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #f1f5f9;
  --input-border: #cbd5e1;
  --btn-primary-bg: #2563eb;
  --text-btn-primary: #ffffff;
  --el-bg: #f8fafc;
  --el-bg-secondary: #f1f5f9;
  --el-card: #ffffff;
  --el-card-subtle: #f8fafc;
  --el-border: #e2e8f0;
  --el-border-glow: rgba(37, 99, 235, 0.25);
  --el-accent: #2563eb;
  --el-accent-hover: #db2777;
  --el-text-main: #0f172a;
  --el-text-secondary: #475569;
  --el-text-muted: #94a3b8;
  --el-gradient-ribbon: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

/* 19. System Dark (dark) */
html[data-theme="dark"], [data-theme="dark"] {
  --bg-app: #0f172a;
  --bg-app-solid: #0f172a;
  --bg-panel-solid: #1e293b;
  --bg-sidebar: #1e293b;
  --bg-panel: #1e293b;
  --border-panel: #334155;
  --text-main: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --primary: #3b82f6;
  --primary-glow: rgba(59, 130, 246, 0.25);
  --accent: #f472b6;
  --accent-glow: rgba(244, 114, 182, 0.2);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #0f172a;
  --input-border: #334155;
  --btn-primary-bg: #3b82f6;
  --text-btn-primary: #ffffff;
  --el-bg: #0f172a;
  --el-bg-secondary: #141f36;
  --el-card: #1e293b;
  --el-card-subtle: #273549;
  --el-border: #334155;
  --el-border-glow: rgba(59, 130, 246, 0.4);
  --el-accent: #3b82f6;
  --el-accent-hover: #f472b6;
  --el-text-main: #f8fafc;
  --el-text-secondary: #cbd5e1;
  --el-text-muted: #64748b;
  --el-gradient-ribbon: linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

/* 20. Midnight Ruby Stealth (ruby-stealth) */
html[data-theme="ruby-stealth"], [data-theme="ruby-stealth"] {
  --bg-app: #060911;
  --bg-app-solid: #060911;
  --bg-panel-solid: #0e1424;
  --bg-sidebar: #090e1a;
  --bg-panel: #0e1424;
  --border-panel: rgba(234, 38, 77, 0.16);
  --text-main: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --primary: #ea264d;
  --primary-glow: rgba(234, 38, 77, 0.38);
  --accent: #ff4d73;
  --accent-glow: rgba(255, 77, 115, 0.28);
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ea264d;
  --info: #38bdf8;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #070b14;
  --input-border: rgba(234, 38, 77, 0.22);
  --btn-primary-bg: linear-gradient(135deg, #ea264d, #d91b40);
  --text-btn-primary: #ffffff;
  --el-bg: #060911;
  --el-bg-secondary: #090e1a;
  --el-card: #0e1424;
  --el-card-subtle: #141c30;
  --el-border: rgba(234, 38, 77, 0.25);
  --el-border-glow: rgba(234, 38, 77, 0.5);
  --el-accent: #ea264d;
  --el-accent-hover: #ff4d73;
  --el-text-main: #ffffff;
  --el-text-secondary: #94a3b8;
  --el-text-muted: #64748b;
  --el-gradient-ribbon: linear-gradient(135deg, #17040a 0%, #290812 100%);
}

/* 21. Midnight Glass (midnight-glass) */
html[data-theme="midnight-glass"], [data-theme="midnight-glass"] {
  --color-midnight: #07111f;
  --color-sapphire: #2563eb;
  --color-cyan: #22d3ee;
  --color-glow: #7dd3fc;
  --color-violet: #8b5cf6;
  --color-text: #e8f4ff;
  --color-muted: #9bb4c9;
  --glass-bg: rgba(7, 17, 31, 0.62);
  --glass-border: rgba(125, 211, 252, 0.28);
  --glass-highlight: rgba(34, 211, 238, 0.18);
  --bg-app: #07111f;
  --bg-app-solid: #07111f;
  --bg-panel-solid: #0a1526;
  --bg-sidebar: rgba(7, 17, 31, 0.62);
  --bg-panel: rgba(7, 17, 31, 0.62);
  --border-panel: rgba(125, 211, 252, 0.28);
  --text-main: #e8f4ff;
  --text-secondary: #9bb4c9;
  --text-muted: #64748b;
  --primary: #2563eb;
  --primary-glow: rgba(37, 99, 235, 0.4);
  --accent: #22d3ee;
  --accent-glow: rgba(34, 211, 238, 0.4);
  --success: #86efac;
  --warning: #fcd34d;
  --error: #fca5a5;
  --info: #7dd3fc;
  --backdrop-blur: 18px;
  --font-sans: 'Inter', 'Outfit', "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: rgba(7, 17, 31, 0.72);
  --input-border: rgba(125, 211, 252, 0.28);
  --btn-primary-bg: rgba(37, 99, 235, 0.28);
  --text-btn-primary: #e8f4ff;
  --el-bg: #07111f;
  --el-bg-secondary: #0a1526;
  --el-card: rgba(7, 17, 31, 0.75);
  --el-card-subtle: #0d1e38;
  --el-border: rgba(125, 211, 252, 0.28);
  --el-border-glow: rgba(34, 211, 238, 0.45);
  --el-accent: #22d3ee;
  --el-accent-hover: #7dd3fc;
  --el-text-main: #e8f4ff;
  --el-text-secondary: #9bb4c9;
  --el-text-muted: #64748b;
  --el-gradient-ribbon: linear-gradient(135deg, #07172b 0%, #0c2747 100%);
}

/* 22. Electritects Classic Red & White (electritects-white & classic-red) */
html[data-theme="electritects-white"], [data-theme="electritects-white"],
html[data-theme="classic-red"], [data-theme="classic-red"] {
  --bg-app: #ffffff;
  --bg-app-solid: #ffffff;
  --bg-panel-solid: #f8fafc;
  --bg-sidebar: #f8fafc;
  --bg-panel: #ffffff;
  --border-panel: #e2e8f0;
  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --primary: #bf1e2d;
  --primary-glow: rgba(191, 30, 45, 0.2);
  --accent: #d92536;
  --accent-glow: rgba(217, 37, 54, 0.15);
  --success: #16a34a;
  --warning: #ca8a04;
  --error: #bf1e2d;
  --info: #bf1e2d;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --btn-primary-bg: #bf1e2d;
  --text-btn-primary: #ffffff;
  --el-bg: #ffffff;
  --el-bg-secondary: #f8fafc;
  --el-card: #ffffff;
  --el-card-subtle: #f8fafc;
  --el-border: #e2e8f0;
  --el-border-glow: rgba(191, 30, 45, 0.3);
  --el-accent: #bf1e2d;
  --el-accent-hover: #d92536;
  --el-text-main: #0f172a;
  --el-text-secondary: #475569;
  --el-text-muted: #64748b;
  --el-gradient-ribbon: linear-gradient(135deg, #bf1e2d 0%, #d92536 100%);
}

/* 23. Amber Gold & Dark Slate (amber-gold) */
html[data-theme="amber-gold"], [data-theme="amber-gold"] {
  --bg-app: #07090e;
  --bg-app-solid: #07090e;
  --bg-panel-solid: #0e1422;
  --bg-sidebar: #0b0f19;
  --bg-panel: #0e1422;
  --border-panel: rgba(245, 158, 11, 0.25);
  --text-main: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --primary: #f59e0b;
  --primary-glow: rgba(245, 158, 11, 0.5);
  --accent: #fbbf24;
  --accent-glow: rgba(251, 191, 36, 0.35);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #38bdf8;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #07090e;
  --input-border: rgba(245, 158, 11, 0.35);
  --btn-primary-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --text-btn-primary: #000000;
  --el-bg: #07090e;
  --el-bg-secondary: #0b0f19;
  --el-card: #0e1422;
  --el-card-subtle: #141d30;
  --el-border: rgba(245, 158, 11, 0.25);
  --el-border-glow: rgba(245, 158, 11, 0.5);
  --el-accent: #f59e0b;
  --el-accent-hover: #d97706;
  --el-text-main: #f8fafc;
  --el-text-secondary: #cbd5e1;
  --el-text-muted: #94a3b8;
  --el-gradient-ribbon: linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

/* 24. Electric Blue & Navy (cyan-blue) */
html[data-theme="cyan-blue"], [data-theme="cyan-blue"] {
  --bg-app: #040912;
  --bg-app-solid: #040912;
  --bg-panel-solid: #0a1b32;
  --bg-sidebar: #071322;
  --bg-panel: #0a1b32;
  --border-panel: rgba(56, 189, 248, 0.25);
  --text-main: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --primary: #38bdf8;
  --primary-glow: rgba(56, 189, 248, 0.5);
  --accent: #0284c7;
  --accent-glow: rgba(2, 132, 199, 0.35);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #38bdf8;
  --backdrop-blur: 0px;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: #040912;
  --input-border: rgba(56, 189, 248, 0.35);
  --btn-primary-bg: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  --text-btn-primary: #ffffff;
  --el-bg: #040912;
  --el-bg-secondary: #071322;
  --el-card: #0a1b32;
  --el-card-subtle: #0f2748;
  --el-border: rgba(56, 189, 248, 0.25);
  --el-border-glow: rgba(56, 189, 248, 0.5);
  --el-accent: #38bdf8;
  --el-accent-hover: #0284c7;
  --el-text-main: #f8fafc;
  --el-text-secondary: #cbd5e1;
  --el-text-muted: #94a3b8;
  --el-gradient-ribbon: linear-gradient(135deg, #07172b 0%, #0c2747 100%);
}

/* ==========================================================================
   Special Background Canvas Overrides
   ========================================================================== */
html[data-theme="midnight-glass"] body {
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.18), transparent 42%),
    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.12), transparent 36%),
    #07111f;
}

html[data-theme="midnight-glass"] .background-canvas {
  background-color: #07111f;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.12) 0%, transparent 36%);
  opacity: 1;
}

html[data-theme="neondrift"] .background-canvas {
  background-color: #06040a;
  background-image: 
    radial-gradient(circle at 15% 30%, rgba(255, 0, 127, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 85% 70%, rgba(0, 240, 255, 0.15) 0%, transparent 60%),
    linear-gradient(rgba(255, 0, 127, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  opacity: 1;
}

html[data-theme="pixelpunch"] .background-canvas {
  background-color: #ffd300;
  background-image: radial-gradient(#000000 2px, transparent 2px);
  background-size: 24px 24px;
  opacity: 0.08;
}

html[data-theme="electritects-white"] .background-canvas,
html[data-theme="classic-red"] .background-canvas {
  opacity: 0.04;
}

/* ==========================================================================
   Universal Contrast Engine & Typography Rules (Section 2)
   ========================================================================== */
html[data-theme-mode="light"] h1,
html[data-theme-mode="light"] h2,
html[data-theme-mode="light"] h3,
html[data-theme-mode="light"] h4,
html[data-theme-mode="light"] h5,
html[data-theme-mode="light"] h6 {
  color: var(--text-main);
}

/* Yellow & Amber Button Contrast Rule */
html[data-theme="matrix-escape"] .btn-primary,
html[data-theme="matrix-escape"] button[type="submit"],
html[data-theme="pixelpunch"] .btn-primary,
html[data-theme="pixelpunch"] button[type="submit"],
html[data-theme="amber-gold"] .btn-primary,
html[data-theme="amber-gold"] button[type="submit"] {
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Neubrutalist Contrast */
html[data-theme="pixelpunch"] .theme-name {
  color: #000000 !important;
  background: #ffd300 !important;
  border: 2px solid #000000 !important;
}

/* Global Theme Scrollbar Synchronisation */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-app);
}
::-webkit-scrollbar-thumb {
  background: var(--border-panel);
  border-radius: 6px;
  border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Theme Modal Name Legibility */
.theme-name {
  color: #ffffff !important;
  background: #0f172a !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Theme-Responsive Direct Inquiry Webform Wrapper (Both Realms)
   ========================================================================== */
.electritects-webform-wrapper {
  background: var(--bg-panel-solid, var(--bg-panel, #141830)) !important;
  border: 2px solid var(--primary, #bf1e2d) !important;
  border-radius: 8px !important;
  color: var(--text-main, #f8fafc) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.electritects-webform-wrapper h3 {
  color: var(--primary, #bf1e2d) !important;
  border-bottom: 2px solid var(--border-panel, rgba(255, 255, 255, 0.15)) !important;
}

.electritects-webform-wrapper label {
  color: var(--text-secondary, #cbd5e1) !important;
}

.electritects-webform-wrapper input,
.electritects-webform-wrapper textarea {
  background: var(--input-bg, #070913) !important;
  border: 1px solid var(--input-border, var(--border-panel, rgba(255, 255, 255, 0.15))) !important;
  color: var(--text-main, #f8fafc) !important;
  border-radius: 4px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.electritects-webform-wrapper input:focus,
.electritects-webform-wrapper textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 10px var(--primary-glow) !important;
}

.electritects-webform-wrapper button[type="submit"] {
  background: var(--btn-primary-bg, var(--primary, #bf1e2d)) !important;
  color: var(--text-btn-primary, #ffffff) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   Universal Theme Modal & Theme Tile Components (Software & Electrical)
   ========================================================================== */
#theme-modal-overlay, .theme-modal-overlay, #theme-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  padding: 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.theme-modal-dialog, .modal-content {
  background: var(--bg-panel-solid, #0f172a) !important;
  border: 1px solid var(--border-panel, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 12px !important;
  width: 100% !important;
  max-width: min(92vw, 620px) !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
  color: var(--text-main, #f8fafc) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 18px !important;
  position: relative !important;
}

.theme-modal-header, .modal-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--border-panel, rgba(255, 255, 255, 0.1)) !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.theme-modal-header h3, .modal-header h2 {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--primary, var(--el-accent, #6366f1)) !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.theme-modal-close, .modal-close {
  background: none !important;
  border: none !important;
  font-size: 26px !important;
  color: var(--text-muted, #94a3b8) !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 4px !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.18s ease !important;
}
.theme-modal-close:hover, .modal-close:hover {
  color: var(--primary, #ffffff) !important;
}

.modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}

.theme-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
  overflow-y: visible !important;
  padding: 4px !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .theme-modal-header h3, .modal-header h2 {
    font-size: 0.95rem !important;
  }
  .theme-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .theme-modal-dialog, .modal-content {
    padding: 14px !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
  }
}

.theme-tile {
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
  background: var(--bg-panel-solid, #1e293b) !important;
  box-sizing: border-box !important;
}
.theme-tile:hover {
  transform: translateY(-2px) !important;
  border-color: var(--primary, var(--el-accent, #6366f1)) !important;
}
.theme-tile.active {
  border-color: var(--primary, var(--el-accent, #6366f1)) !important;
  box-shadow: 0 0 12px var(--primary-glow, var(--el-border-glow, rgba(99, 102, 241, 0.5))) !important;
}

.theme-preview {
  width: 100% !important;
  height: 50px !important;
  background: var(--bg-app, #070913) !important;
  border-bottom: 1px solid var(--border-panel, rgba(255, 255, 255, 0.1)) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}
.theme-preview-header {
  height: 10px !important;
  background: var(--bg-panel, #141830) !important;
  border: 1px solid var(--border-panel, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 3px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 3px !important;
}
.theme-preview-btn {
  width: 14px !important;
  height: 4px !important;
  background: var(--primary, #6366f1) !important;
  border-radius: 2px !important;
}

.theme-name {
  padding: 8px 4px !important;
  font-size: 0.72rem !important;
  text-align: center !important;
  color: #ffffff !important;
  background: #0f172a !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

.theme-modal-footer {
  display: flex !important;
  flex-shrink: 0 !important;
  padding-top: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.theme-reset-btn {
  margin-top: 4px !important;
  width: 100% !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid var(--border-panel, rgba(255, 255, 255, 0.2)) !important;
  color: var(--text-main, #f8fafc) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.theme-reset-btn:hover {
  background: var(--border-panel, rgba(255, 255, 255, 0.1)) !important;
  border-color: var(--primary, #6366f1) !important;
  color: var(--primary, #6366f1) !important;
}