/* --- 1. CYBER RED: TACTICAL / STRIKE MODE ---
   Features: Heavy "bracket" borders, a steady glow, and sharp geometric cuts. */
.theme-cyber-red {
    --bg-main: #0a0101;
    --bg-panel: rgba(20, 2, 2, 0.95);
    --accent-primary: #ff003c;
    --accent-bright: #ff4d7a;
    --accent-dim: rgba(255, 0, 60, 0.1);
    --border-color: #440a15;
    --terminal-output: #ff003c;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
    --show-corners: block; /* We'll style these as tactical brackets below */

    /* Animation */
    --panel-animation: red-pulse 4s ease-in-out infinite;
}

/* Customizing the corner brackets for Cyber Red */
.theme-cyber-red .sidebar::before,
.theme-cyber-red .monitor-panel::before,
.theme-cyber-red .console-panel::before {
    width: 20px;
    height: 20px;
    border-width: 3px;
    border-color: var(--accent-primary);
    filter: drop-shadow(0 0 5px var(--accent-primary));
}

@keyframes red-pulse {
    0%, 100% { box-shadow: inset 0 0 20px rgba(255, 0, 60, 0.05); border-color: var(--border-color); }
    50% { box-shadow: inset 0 0 40px rgba(255, 0, 60, 0.15); border-color: var(--accent-primary); }
}


/* --- 2. GHOST BLUE: DATASTREAM / FLOAT MODE ---
   Features: Ultra-thin glass look and a "scanning" light beam. */
.theme-ghost-blue {
    --bg-main: #000b14;
    --bg-panel: rgba(5, 15, 25, 0.6);
    --accent-primary: #00d9ff;
    --accent-bright: #00f2ff;
    --accent-dim: rgba(0, 217, 255, 0.05);
    --border-color: rgba(0, 217, 255, 0.2);
    --terminal-output: #80faff;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: inset(0 round 0 30px 0 0); /* Single top-right slope */
    --show-corners: none;

    /* Animation */
    --panel-animation: blue-scan 6s linear infinite;
}

@keyframes blue-scan {
    0% { background: linear-gradient(180deg, rgba(0,217,255,0.05) 0%, transparent 10%); }
    50% { background: linear-gradient(180deg, transparent 45%, rgba(0,217,255,0.05) 50%, transparent 55%); }
    100% { background: linear-gradient(180deg, transparent 90%, rgba(0,217,255,0.05) 100%); }
}


/* --- 3. MATRIX: MONOLITH MODE ---
   Features: Solid, blocky, and "data-heavy" with sharp vertical lines. */
.theme-matrix {
    --bg-main: #020500;
    --bg-panel: rgba(5, 12, 5, 1);
    --accent-primary: #00ff41;
    --accent-bright: #adff2f;
    --accent-dim: rgba(0, 255, 65, 0.1);
    --border-color: #00ff41; /* Full brightness borders */
    --terminal-output: #00ff41;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: none; /* Pure rectangle */
    --show-corners: none;
}

/* Extra flair for Matrix: Add a "side-bar" inside every panel */
.theme-matrix .sidebar::after,
.theme-matrix .console-panel::after {
    content: "";
    position: absolute;
    left: 4px; top: 4px; bottom: 4px;
    width: 2px;
    background: var(--accent-primary);
    opacity: 0.3;
}

.theme-hazard-amber {
    --bg-main: #0f0b00;
    --bg-panel: rgba(25, 18, 0, 0.9);
    --accent-primary: #ffb000;
    --accent-bright: #ffcc00;
    --accent-dim: rgba(255, 176, 0, 0.1);
    --border-color: #553a00;
    --terminal-output: #ffb000;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(15px 0%, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    --show-corners: block;

    /* Animation */
    --panel-animation: hazard-flicker 8s step-end infinite;
}

/* Caution stripes flair for Hazard Amber */
.theme-hazard-amber .sidebar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: repeating-linear-gradient(45deg, var(--accent-primary), var(--accent-primary) 10px, #000 10px, #000 20px);
}

@keyframes hazard-flicker {
    0%, 95%, 98% { opacity: 1; }
    96%, 99% { opacity: 0.8; }
}

.theme-void-purple {
    --bg-main: #05000a;
    --bg-panel: rgba(15, 0, 30, 0.8);
    --accent-primary: #a100ff;
    --accent-bright: #d38fff;
    --accent-dim: rgba(161, 0, 255, 0.15);
    --border-color: #31004d;
    --terminal-output: #e0b0ff;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: inset(0 round 20px 2px 20px 2px);
    --show-corners: none;

    /* Animation */
    --panel-animation: void-breath 5s ease-in-out infinite;
}

/* Neural pulse effect */
@keyframes void-breath {
    0%, 100% { filter: drop-shadow(0 0 2px var(--accent-dim)); }
    50% { filter: drop-shadow(0 0 10px var(--accent-primary)); }
}

.theme-mercury-silver {
    --bg-main: #0a0a0c;
    --bg-panel: rgba(255, 255, 255, 0.03);
    --accent-primary: #e0e0e0;
    --accent-bright: #ffffff;
    --accent-dim: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.2);
    --terminal-output: #ffffff;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    --show-corners: block;

    /* Animation */
    --panel-animation: silver-sweep 10s linear infinite;
}

/* Precision crosshair corners */
.theme-mercury-silver .monitor-panel::before {
    content: "+";
    color: var(--accent-primary);
    position: absolute;
    top: 5px; right: 5px;
    font-size: 12px;
}

@keyframes silver-sweep {
    0% { border-left: 1px solid var(--border-color); }
    5% { border-left: 1px solid var(--accent-bright); }
    10% { border-left: 1px solid var(--border-color); }
}

.theme-toxic-neon {
    --bg-main: #020400;
    --bg-panel: rgba(4, 10, 0, 0.9);
    --accent-primary: #ccff00;
    --accent-bright: #f0ffb3;
    --accent-dim: rgba(204, 255, 0, 0.05);
    --border-color: #2c3300;
    --terminal-output: #ccff00;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 20% 100%, 0 80%);
    --show-corners: block;

    /* Animation */
    --panel-animation: toxic-jitter 0.2s infinite;
}

@keyframes toxic-jitter {
    0% { transform: translate(0,0); }
    25% { transform: translate(0.5px, 0.5px); }
    75% { transform: translate(-0.5px, 0.5px); }
}

.theme-toxic-neon .console-panel::after {
    content: "BIOHAZARD";
    font-size: 8px;
    position: absolute;
    bottom: 5px; right: 10px;
    color: var(--accent-primary);
    opacity: 0.5;
}

.theme-polaris {
    --bg-main: #000508;
    --bg-panel: rgba(10, 30, 45, 0.7);
    --accent-primary: #8ef3ff;
    --accent-bright: #ffffff;
    --accent-dim: rgba(142, 243, 255, 0.1);
    --border-color: #1a3a4a;
    --terminal-output: #b3f7ff;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
    --show-corners: none;

    /* Animation */
    --panel-animation: polaris-drift 12s ease-in-out infinite;
}

/* Glass frost effect */
.theme-polaris .monitor-panel {
    backdrop-filter: blur(10px);
    border-top: 2px solid var(--accent-primary);
}

@keyframes polaris-drift {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 0% 100%; }
}

/* --- 9. SOLAR FLARE: CORE REACTION ---
   Features: High-contrast gold, "heat-haze" glow, and sharp triangular notches. */
.theme-solar-flare {
    --bg-main: #0a0500;
    --bg-panel: rgba(20, 12, 0, 0.9);
    --accent-primary: #ffaa00;
    --accent-bright: #fff000;
    --accent-dim: rgba(255, 170, 0, 0.1);
    --border-color: #442e00;
    --terminal-output: #ffcc00;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(25px 0%, 100% 0, 100% 100%, 0 100%, 0 25px);
    --show-corners: block;

    /* Animation */
    --panel-animation: solar-burn 3s infinite alternate;
}

@keyframes solar-burn {
    0% { filter: contrast(1) brightness(1); }
    100% { filter: contrast(1.1) brightness(1.2); box-shadow: 0 0 20px rgba(255, 170, 0, 0.2); }
}

/* --- 10. DEEP ABYSS: SUBMERGED OPS ---
   Features: Heavy teal borders, "pressure" rounded corners, and a slow liquid ripple. */
.theme-deep-abyss {
    --bg-main: #00080a;
    --bg-panel: rgba(0, 15, 20, 0.85);
    --accent-primary: #00ced1;
    --accent-bright: #00ffff;
    --accent-dim: rgba(0, 206, 209, 0.1);
    --border-color: #003d40;
    --terminal-output: #7fffd4;

    /* Geometry */
    --ui-border-width: 3px;
    --ui-clip-path: inset(0 round 40px 5px 40px 5px);
    --show-corners: none;

    /* Animation */
    --panel-animation: abyss-ripple 8s ease-in-out infinite;
}

@keyframes abyss-ripple {
    0%, 100% { background-color: rgba(0, 15, 20, 0.85); }
    50% { background-color: rgba(0, 25, 35, 0.95); }
}

/* --- 11. NEON SUNSET: RETRO SYNTH ---
   Features: Hot pink/indigo fusion, double-lined borders, and scanline interference. */
.theme-neon-sunset {
    --bg-main: #0a000a;
    --bg-panel: rgba(15, 0, 15, 0.9);
    --accent-primary: #ff00ff;
    --accent-bright: #00ffff;
    --accent-dim: rgba(255, 0, 255, 0.1);
    --border-color: #4d004d;
    --terminal-output: #ff77ff;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), 80% 100%, 0 100%);
    --show-corners: block;

    /* Animation */
    --panel-animation: sunset-glitch 5s step-end infinite;
}

.theme-neon-sunset .sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 0, 255, 0.05) 3px);
    pointer-events: none;
}

@keyframes sunset-glitch {
    0%, 90% { transform: skew(0deg); }
    91% { transform: skew(1deg); }
    92% { transform: skew(-1deg); }
    93% { transform: skew(0deg); }
}

/* --- 9. CRIMSON ROYAL: NOBLESSE MODE ---
   Features: Deep blood red with high-luxury gold accents and ornate beveled corners. */
.theme-blood-royal {
    --bg-main: #0d0000;
    --bg-panel: rgba(30, 0, 0, 0.9);
    --accent-primary: #d4af37; /* Gold */
    --accent-bright: #ff0000; /* Blood Red */
    --accent-dim: rgba(212, 175, 55, 0.1);
    --border-color: #5e0000;
    --terminal-output: #ffd700;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
    --show-corners: block;

    /* Animation */
    --panel-animation: royal-glimmer 5s ease-in-out infinite;
}

@keyframes royal-glimmer {
    0%, 100% { border-color: var(--border-color); box-shadow: 0 0 10px rgba(212, 175, 55, 0.1); }
    50% { border-color: var(--accent-primary); box-shadow: 0 0 25px rgba(212, 175, 55, 0.3); }
}

/* --- 10. VOLT SURGE: OVERCLOCK MODE ---
   Features: High-voltage yellow, "sparking" animations, and industrial sharp-angled cuts. */
.theme-volt-surge {
    --bg-main: #0f0f00;
    --bg-panel: rgba(15, 15, 0, 0.95);
    --accent-primary: #ffff00;
    --accent-bright: #ffffff;
    --accent-dim: rgba(255, 255, 0, 0.05);
    --border-color: #333300;
    --terminal-output: #ffff00;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    --show-corners: block;

    /* Animation */
    --panel-animation: bolt-flicker 0.15s infinite;
}

@keyframes bolt-flicker {
    0% { opacity: 1; }
    50% { opacity: 0.98; filter: brightness(1.2); }
    100% { opacity: 1; }
}

/* --- 11. DEEP DIVE: SUB-AQUATIC MODE ---
   Features: Muted teal-blues, heavy "pressure" glass, and a slow sonar pulse. */
.theme-deep-dive {
    --bg-main: #000a0d;
    --bg-panel: rgba(0, 20, 30, 0.8);
    --accent-primary: #00ced1;
    --accent-bright: #00fbff;
    --accent-dim: rgba(0, 206, 209, 0.1);
    --border-color: #003344;
    --terminal-output: #00f2ff;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: inset(0 round 20px 0 20px 0);
    --show-corners: none;

    /* Animation */
    --panel-animation: sonar-pulse 4s ease-out infinite;
}

@keyframes sonar-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 206, 209, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(0, 206, 209, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 206, 209, 0); }
}

/* --- 9. CRIMSON ROYAL: NOBLESSE MODE ---
   Features: Deep blood red with high-luxury gold accents and ornate beveled corners. */
.theme-blood-royal {
    --bg-main: #0d0000;
    --bg-panel: rgba(30, 0, 0, 0.9);
    --accent-primary: #d4af37; /* Gold */
    --accent-bright: #ff0000; /* Blood Red */
    --accent-dim: rgba(212, 175, 55, 0.1);
    --border-color: #5e0000;
    --terminal-output: #ffd700;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
    --show-corners: block;

    /* Animation */
    --panel-animation: royal-glimmer 5s ease-in-out infinite;
}

@keyframes royal-glimmer {
    0%, 100% { border-color: var(--border-color); box-shadow: 0 0 10px rgba(212, 175, 55, 0.1); }
    50% { border-color: var(--accent-primary); box-shadow: 0 0 25px rgba(212, 175, 55, 0.3); }
}

/* --- 10. VOLT SURGE: OVERCLOCK MODE ---
   Features: High-voltage yellow, "sparking" animations, and industrial sharp-angled cuts. */
.theme-volt-surge {
    --bg-main: #0f0f00;
    --bg-panel: rgba(15, 15, 0, 0.95);
    --accent-primary: #ffff00;
    --accent-bright: #ffffff;
    --accent-dim: rgba(255, 255, 0, 0.05);
    --border-color: #333300;
    --terminal-output: #ffff00;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    --show-corners: block;

    /* Animation */
    --panel-animation: bolt-flicker 0.15s infinite;
}

@keyframes bolt-flicker {
    0% { opacity: 1; }
    50% { opacity: 0.98; filter: brightness(1.2); }
    100% { opacity: 1; }
}

/* --- 11. DEEP DIVE: SUB-AQUATIC MODE ---
   Features: Muted teal-blues, heavy "pressure" glass, and a slow sonar pulse. */
.theme-deep-dive {
    --bg-main: #000a0d;
    --bg-panel: rgba(0, 20, 30, 0.8);
    --accent-primary: #00ced1;
    --accent-bright: #00fbff;
    --accent-dim: rgba(0, 206, 209, 0.1);
    --border-color: #003344;
    --terminal-output: #00f2ff;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: inset(0 round 20px 0 20px 0);
    --show-corners: none;

    /* Animation */
    --panel-animation: sonar-pulse 4s ease-out infinite;
}

@keyframes sonar-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 206, 209, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(0, 206, 209, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 206, 209, 0); }
}

/* --- 16. TITAN INDUSTRY: HEAVY-MACHINERY MODE ---
   Features: Weathered bronze, industrial "warning" stripes, and heavy blocky geometry. */
.theme-titan-industry {
    --bg-main: #0f0d0a;
    --bg-panel: rgba(25, 22, 18, 0.95);
    --accent-primary: #cd7f32; /* Bronze */
    --accent-bright: #ffa500;
    --accent-dim: rgba(205, 127, 50, 0.1);
    --border-color: #3d2b1f;
    --terminal-output: #e6be8a;

    /* Geometry */
    --ui-border-width: 4px; /* Thicker for industrial feel */
    --ui-clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
    --show-corners: block;

    /* Animation */
    --panel-animation: titan-rumble 10s ease-in-out infinite;
}

@keyframes titan-rumble {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

/* --- 17. NULL ENTITY: SYSTEM-ERROR MODE ---
   Features: High-contrast monochrome, fragmented clip-paths, and chromatic aberration. */
.theme-null-entity {
    --bg-main: #ffffff; /* Rare light-mode variant */
    --bg-panel: rgba(240, 240, 240, 0.98);
    --accent-primary: #000000;
    --accent-bright: #ff0055; /* Glitch highlight */
    --accent-dim: rgba(0, 0, 0, 0.05);
    --border-color: #000000;
    --terminal-output: #000000;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
    --show-corners: none;

    /* Animation */
    --panel-animation: null-glitch 0.3s steps(1) infinite;
}

@keyframes null-glitch {
    0% { box-shadow: 2px 0 #ff0055, -2px 0 #00ffff; }
    50% { box-shadow: -1px 0 #ff0055, 1px 0 #00ffff; }
    100% { box-shadow: 2px 0 #ff0055, -2px 0 #00ffff; }
}

/* --- 18. SAKURA CIRCUIT: NEO-TOKYO MODE ---
   Features: Cherry blossom pink, elegant diagonal slopes, and a "falling petal" glow. */
.theme-sakura-circuit {
    --bg-main: #0f0005;
    --bg-panel: rgba(30, 0, 15, 0.8);
    --accent-primary: #ffb7c5;
    --accent-bright: #ffffff;
    --accent-dim: rgba(255, 183, 197, 0.15);
    --border-color: #4a1c26;
    --terminal-output: #ff69b4;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    --show-corners: block;

    /* Animation */
    --panel-animation: sakura-drift 4s ease-in-out infinite;
}

@keyframes sakura-drift {
    0%, 100% { filter: drop-shadow(0 0 2px var(--accent-dim)); }
    50% { filter: drop-shadow(0 0 8px var(--accent-primary)); }
}

/* --- 19. ABYSSAL RELIC: DEEP-SEA TECH ---
   Features: Bio-luminescent teal, rusted gold accents, and a "breathing" sonar animation. */
.theme-abyssal-relic {
    --bg-main: #001219;
    --bg-panel: rgba(0, 18, 25, 0.9);
    --accent-primary: #00fedc;
    --accent-bright: #e9d8a6;
    --accent-dim: rgba(0, 254, 220, 0.1);
    --border-color: #005f73;
    --terminal-output: #94d2bd;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0 80%, 0 20%);
    --show-corners: block;

    /* Animation */
    --panel-animation: abyssal-pulse 6s ease-in-out infinite;
}

@keyframes abyssal-pulse {
    0%, 100% { box-shadow: inset 0 0 15px rgba(0, 254, 220, 0.1); }
    50% { box-shadow: inset 0 0 30px rgba(0, 254, 220, 0.3); }
}

/* --- 20. NEON VELOCITY: AERODYNAMIC MODE ---
   Features: High-contrast magenta, aggressive forward slants, and a "streak" motion blur. */
.theme-neon-velocity {
    --bg-main: #0a0a0f;
    --bg-panel: rgba(15, 15, 25, 0.85);
    --accent-primary: #ff00ff;
    --accent-bright: #00ffff;
    --accent-dim: rgba(255, 0, 255, 0.15);
    --border-color: #333344;
    --terminal-output: #ffffff;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    --show-corners: none;

    /* Animation */
    --panel-animation: velocity-streak 0.5s ease-out;
}

@keyframes velocity-streak {
    from { transform: skewX(-10deg) translateX(-20px); opacity: 0; }
    to { transform: skewX(0deg) translateX(0); opacity: 1; }
}

/* --- 21. RUNIC OVERLOAD: OCCULT-DIGITAL MODE ---
   Features: Deep obsidian, ethereal violet, and a flickering "unstable power" effect. */
.theme-runic-overload {
    --bg-main: #050505;
    --bg-panel: rgba(10, 5, 15, 0.98);
    --accent-primary: #9d00ff;
    --accent-bright: #ffffff;
    --accent-dim: rgba(157, 0, 255, 0.2);
    --border-color: #4b0082;
    --terminal-output: #d8b4fe;

    /* Geometry */
    --ui-border-width: 3px;
    --ui-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    --show-corners: block;

    /* Animation */
    --panel-animation: runic-flicker 2s linear infinite;
}

@keyframes runic-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; filter: brightness(1); }
    20%, 24%, 55% { opacity: 0.8; filter: brightness(1.5) drop-shadow(0 0 10px var(--accent-primary)); }
}

/* --- 22. ORBITAL ECLIPSE: COSMIC STEALTH MODE ---
   Features: Event-horizon blacks, stellar cyan glow, slow orbital pulse. */
.theme-orbital-eclipse {
    --bg-main: #02030a;
    --bg-panel: rgba(6, 8, 20, 0.95);
    --accent-primary: #3df2ff;
    --accent-bright: #ffffff;
    --accent-dim: rgba(61, 242, 255, 0.12);
    --border-color: #1b263b;
    --terminal-output: #bdefff;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: ellipse(95% 85% at 50% 50%);
    --show-corners: none;

    /* Animation */
    --panel-animation: orbital-drift 10s linear infinite;
}

@keyframes orbital-drift {
    0% { box-shadow: 0 0 10px rgba(61, 242, 255, 0.15); }
    50% { box-shadow: 0 0 30px rgba(61, 242, 255, 0.35); }
    100% { box-shadow: 0 0 10px rgba(61, 242, 255, 0.15); }
}
/* --- 23. IRON PHANTOM: MILITARY STEALTH GRID ---
   Features: Night-vision green, scanline flicker, reinforced HUD panels. */
.theme-iron-phantom {
    --bg-main: #050a05;
    --bg-panel: rgba(8, 15, 10, 0.95);
    --accent-primary: #4cff4c;
    --accent-bright: #b6ffb6;
    --accent-dim: rgba(76, 255, 76, 0.12);
    --border-color: #1f3d1f;
    --terminal-output: #7dff7d;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(0 0, 95% 0, 100% 15%, 100% 100%, 5% 100%, 0 85%);
    --show-corners: block;

    /* Animation */
    --panel-animation: phantom-scan 3s steps(2, end) infinite;
}

@keyframes phantom-scan {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.25); }
    100% { filter: brightness(1); }
}

/* --- 24. MAGMA PROTOCOL: VOLCANIC INDUSTRIAL ---
   Features: Deep charcoal, burning orange, and a "heat throb" breathing effect. */
.theme-magma-protocol {
    --bg-main: #0a0505;
    --bg-panel: rgba(20, 10, 5, 0.96);
    --accent-primary: #ff4500;
    --accent-bright: #ffba08;
    --accent-dim: rgba(255, 69, 0, 0.15);
    --border-color: #800e00;
    --terminal-output: #ff9d6e;

    /* Geometry - Subtle octagonal snips */
    --ui-border-width: 3px;
    --ui-clip-path: polygon(3% 0, 97% 0, 100% 3%, 100% 97%, 97% 100%, 3% 100%, 0 97%, 0 3%);
    --show-corners: block;

    /* Animation */
    --panel-animation: magma-throb 4s ease-in-out infinite;
}

@keyframes magma-throb {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 69, 0, 0.2); filter: saturate(1); }
    50% { box-shadow: 0 0 35px rgba(255, 69, 0, 0.5); filter: saturate(1.5); }
}

/* --- 25. GLITCH CASCADE: CORRUPTED DATA MODE ---
   Features: Noise greys, hot magenta, and a rapid "displacement" jitter. */
.theme-glitch-cascade {
    --bg-main: #0d0d0d;
    --bg-panel: rgba(15, 15, 15, 0.98);
    --accent-primary: #ff0055;
    --accent-bright: #00f2ff;
    --accent-dim: rgba(255, 0, 85, 0.1);
    --border-color: #333;
    --terminal-output: #ffafff;

    /* Geometry - Almost square, very minor offset */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(0 1%, 100% 0, 99.5% 100%, 0.5% 99%);
    --show-corners: block;

    /* Animation */
    --panel-animation: glitch-jitter 0.2s steps(2) infinite;
}

@keyframes glitch-jitter {
    0% { transform: translate(0); }
    50% { transform: translate(-2px, 1px); skewX(0.5deg); }
    100% { transform: translate(2px, -1px); }
}

/* --- 26. ZENITH LUX: PRESTIGE GOLD TECH ---
   Features: Obsidian black, polished gold, and a slow "shimmer" sweep. */
.theme-zenith-lux {
    --bg-main: #050505;
    --bg-panel: rgba(10, 10, 10, 0.99);
    --accent-primary: #d4af37;
    --accent-bright: #fcf6ba;
    --accent-dim: rgba(212, 175, 55, 0.1);
    --border-color: #4a3708;
    --terminal-output: #eee8aa;

    /* Geometry - Asymmetric minor snips */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);
    --show-corners: none;

    /* Animation */
    --panel-animation: gold-shimmer 6s linear infinite;
}

@keyframes gold-shimmer {
    0% { border-color: #4a3708; }
    50% { border-color: #d4af37; }
    100% { border-color: #4a3708; }
}
/* --- 27. NEON PRISM: ARCADE POP ---
   Vibe: Energetic, retro-futuristic fun. Cyan, magenta, and yellow accents.
   Geometry: Playful, very minor opposing corner snips (3%). */
.theme-neon-prism {
    --bg-main: #0a0a14; /* Deep indigo background */
    --bg-panel: rgba(15, 15, 25, 0.97);
    --accent-primary: #00ffea; /* Cyan */
    --accent-bright: #ffea00; /* Yellow */
    --accent-dim: rgba(0, 255, 234, 0.15);
    --border-color: #ff00ff; /* Magenta border */
    --terminal-output: #80ffea;

    /* Geometry - Subtle opposing snips */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(3% 0, 100% 0, 100% 97%, 97% 100%, 0 100%, 0 3%);
    --show-corners: block;
    --corner-color: #ffea00;

    /* Animation - A slow, smooth color shifting glow */
    --panel-animation: prism-shift 8s linear infinite;
}

@keyframes prism-shift {
    0% { filter: hue-rotate(0deg) drop-shadow(0 0 5px rgba(0, 255, 234, 0.5)); }
    50% { filter: hue-rotate(180deg) drop-shadow(0 0 10px rgba(255, 0, 255, 0.5)); }
    100% { filter: hue-rotate(360deg) drop-shadow(0 0 5px rgba(0, 255, 234, 0.5)); }
}

/* --- 28. DREAMSCAPE: COTTON CANDY SKY ---
   Vibe: Soft, calming, optimistic. Pastel pinks and baby blues.
   Geometry: Extremely subtle, almost rounded 1% chamfers for a soft feel. */
.theme-dreamscape {
    --bg-main: #0f0a14; /* Deep soft purple bg */
    --bg-panel: rgba(20, 15, 25, 0.98);
    --accent-primary: #ff9ee4; /* Soft Pink */
    --accent-bright: #ffffff;
    --accent-dim: rgba(255, 158, 228, 0.1);
    --border-color: #8ac4ff; /* Baby Blue border */
    --terminal-output: #ffd1f3;

    /* Geometry - Barely there corners for softness */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(1% 0, 99% 0, 100% 1%, 100% 99%, 99% 100%, 1% 100%, 0 99%, 0 1%);
    --show-corners: none;

    /* Animation - Gentle, slow breathing pulse */
    --panel-animation: dream-pulse 6s ease-in-out infinite;
}

@keyframes dream-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 158, 228, 0.2); }
    50% { box-shadow: 0 0 25px rgba(138, 196, 255, 0.4); }
}

/* --- 29. SOLAR BLOOM: WARM OPTIMISM ---
   Vibe: Sunny, energetic growth. Warm oranges and lime greens.
   Geometry: A very slight upward taper (1%) suggesting rising energy. */
.theme-solar-bloom {
    --bg-main: #120a05; /* Deep warm brown bg */
    --bg-panel: rgba(25, 15, 10, 0.97);
    --accent-primary: #ffbd00; /* Warm Sunshine Yellow/Orange */
    --accent-bright: #fffcdd;
    --accent-dim: rgba(255, 189, 0, 0.15);
    --border-color: #ff6a00; /* Orange border */
    --terminal-output: #ffeba8;

    /* Geometry - Slight upward taper */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(1% 0, 99% 0, 100% 100%, 0% 100%);
    --show-corners: block;
    --corner-color: #9eff00; /* Lime green corners */

    /* Animation - A warm, uplifting glow effect */
    --panel-animation: solar-rise 5s ease-in-out infinite;
}

@keyframes solar-rise {
    0% { border-color: #ff6a00; box-shadow: 0 5px 15px rgba(255, 106, 0, 0.2); }
    50% { border-color: #ffbd00; box-shadow: 0 0 30px rgba(255, 189, 0, 0.4); }
    100% { border-color: #ff6a00; box-shadow: 0 5px 15px rgba(255, 106, 0, 0.2); }
}
/* --- 30. VICE CITY: MIAMI SYNTHWAVE ---
   Features: Animated gradient background, neon pink/cyan blur.
   Geometry: 2% corner snips. */
.theme-vice-city {
    --bg-main: #0a0410;
    --bg-panel: linear-gradient(135deg, rgba(255, 0, 212, 0.1), rgba(0, 242, 255, 0.1));
    --accent-primary: #ff00d4; /* Hot Pink */
    --accent-bright: #00f2ff; /* Electric Blue */
    --accent-dim: rgba(255, 0, 212, 0.2);
    --border-color: #ff00d4;
    --terminal-output: #00f2ff;

    /* Geometry */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(2% 0, 100% 0, 100% 98%, 98% 100%, 0 100%, 0 2%);
    --show-corners: block;

    /* Animation: Moving backdrop gradient and neon flicker */
    backdrop-filter: blur(10px);
    animation: miami-flow 8s ease infinite, neon-flicker 3s linear infinite;
}

@keyframes miami-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- 31. ABYSSAL SOUL: THE EVIL MODE ---
   Features: Blood red "bleeding" border and dark smoke backdrop.
   Geometry: Sharp 1% micro-cuts. */
.theme-abyssal-soul {
    --bg-main: #050000;
    --bg-panel: rgba(15, 0, 0, 0.95);
    --accent-primary: #ff0000;
    --accent-bright: #ff6600;
    --accent-dim: rgba(255, 0, 0, 0.05);
    --border-color: #4b0000;
    --terminal-output: #990000;

    /* Geometry */
    --ui-border-width: 3px;
    --ui-clip-path: polygon(1% 0, 99% 0, 100% 1%, 100% 99%, 99% 100%, 1% 100%, 0 99%, 0 1%);
    --show-corners: block;

    /* Animation: "Bleeding" pulse and darkening filter */
    --panel-animation: evil-pulse 4s ease-in-out infinite;
}

@keyframes evil-pulse {
    0%, 100% { box-shadow: inset 0 0 20px #000, 0 0 10px #4b0000; filter: brightness(0.8); }
    50% { box-shadow: inset 0 0 40px #660000, 0 0 20px #ff0000; filter: brightness(1.1); }
}

/* --- 32. SERAPHIM GLOW: THE ANGEL MODE ---
   Features: White-gold shimmer and a "heavenly light" sweep backdrop.
   Geometry: Soft 2% chamfers. */
.theme-seraphim-glow {
    --bg-main: #0a0a0f;
    --bg-panel: rgba(255, 255, 255, 0.03);
    --accent-primary: #fff5d6; /* Soft Gold */
    --accent-bright: #ffffff;
    --accent-dim: rgba(255, 255, 255, 0.1);
    --border-color: #f0e68c;
    --terminal-output: #ffffff;

    /* Geometry */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(0 0, 98% 0, 100% 2%, 100% 100%, 2% 100%, 0 98%);
    --show-corners: none;

    /* Animation: Heavenly shimmer sweep */
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    background-size: 200% 100%;
    backdrop-filter: blur(15px);
    animation: angel-shimmer 5s linear infinite;
}

@keyframes angel-shimmer {
    0% { background-position: 200% 0; box-shadow: 0 0 15px rgba(255, 245, 214, 0.2); }
    100% { background-position: -200% 0; box-shadow: 0 0 30px rgba(255, 245, 214, 0.4); }
}

/* --- 33. CHRONO SAPPHIRE: TEMPORAL GLASS ---
   Vibe: Deep-sea sapphire, refractive glass, and a "ticking" light sweep.
   Features: Glassmorphism with a rotating internal shimmer. */
.theme-chrono-sapphire {
    --bg-main: #020512;
    --bg-panel: rgba(5, 12, 30, 0.85);
    --accent-primary: #0077ff;
    --accent-bright: #70d6ff;
    --accent-dim: rgba(0, 119, 255, 0.15);
    --border-color: #1a3a6d;
    --terminal-output: #a2d2ff;

    /* Geometry - Precision 2% cuts to resemble a watch face or lens */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0 98%, 0 2%);
    --show-corners: block;
    --corner-color: #70d6ff;

    /* Animation: Refractive glass shimmer that "rotates" like a clock hand */
    backdrop-filter: blur(20px) saturate(150%);
    background: linear-gradient(110deg, transparent 40%, rgba(112, 214, 255, 0.1) 50%, transparent 60%);
    background-size: 300% 100%;
    animation: chrono-sweep 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes chrono-sweep {
    0% { background-position: 150% 0; box-shadow: inset 0 0 20px rgba(0, 119, 255, 0.1); }
    50% { box-shadow: inset 0 0 40px rgba(0, 119, 255, 0.2); }
    100% { background-position: -150% 0; box-shadow: inset 0 0 20px rgba(0, 119, 255, 0.1); }
}

/* --- 34. BIOTIC NEXUS: ORGANIC COMPUTING ---
   Vibe: Deep moss, bioluminescent teal, and a "breathing" cellular backdrop.
   Features: Soft-focus bloom and a rhythmic, organic pulse. */
.theme-biotic-nexus {
    --bg-main: #040806;
    --bg-panel: rgba(6, 15, 10, 0.94);
    --accent-primary: #00ffaa; /* Bioluminescent Teal */
    --accent-bright: #d0ffed;
    --accent-dim: rgba(0, 255, 170, 0.08);
    --border-color: #0d3d2a;
    --terminal-output: #85ffcf;

    /* Geometry - Very soft 1.5% chamfers to feel less "industrial" */
    --ui-border-width: 2px;
    --ui-clip-path: polygon(0 2%, 2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0 98%);
    --show-corners: none;

    /* Animation: A slow, organic "breathing" filter and border glow */
    --panel-animation: biotic-breath 8s ease-in-out infinite;
}

@keyframes biotic-breath {
    0%, 100% {
        filter: contrast(1) brightness(1) drop-shadow(0 0 5px rgba(0, 255, 170, 0.2));
        border-color: #0d3d2a;
    }
    50% {
        filter: contrast(1.1) brightness(1.2) drop-shadow(0 0 15px rgba(0, 255, 170, 0.5));
        border-color: #00ffaa;
    }
}
/* --- 35. NEBULA DREAM: DEEP COSMOS MODE ---
   Vibe: Interstellar clouds, twinkling stars, and infinite depth.
   Features: Shifting nebula background and a "twinkle" border effect. */
.theme-nebula-dream {
    --bg-main: #020208;
    --bg-panel: rgba(10, 10, 25, 0.92);
    --accent-primary: #b0d1ff; /* Starlight Blue */
    --accent-bright: #ffffff;
    --accent-dim: rgba(180, 100, 255, 0.15); /* Nebula Purple */
    --border-color: #2a1a4a;
    --terminal-output: #e0f7ff;

    /* Geometry - Minimal 2% corner snips for a sleek, modern portal look */
    --ui-border-width: 1px;
    --ui-clip-path: polygon(2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0 98%, 0 2%);
    --show-corners: block;
    --corner-color: #ffffff;

    /* Animation: Shifting deep-space nebula and twinkling starlight */
    backdrop-filter: blur(12px);
    background-image:
            radial-gradient(circle at 20% 30%, rgba(100, 50, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(0, 200, 255, 0.1) 0%, transparent 50%);
    background-size: 200% 200%;
    animation: nebula-drift 12s ease-in-out infinite, star-twinkle 4s linear infinite;
}

@keyframes nebula-drift {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

@keyframes star-twinkle {
    0%, 100% { border-color: #2a1a4a; box-shadow: 0 0 5px rgba(176, 209, 255, 0.2); }
    50% { border-color: #b0d1ff; box-shadow: 0 0 20px rgba(176, 209, 255, 0.5); }
}


/* --- RANDOM / CUSTOM: CHAOS PROTOCOL --- */
.theme-chaos-protocol {
    /* Values injected via JS */
    --show-corners: block;
    --panel-animation: none; /* We can even randomize this! */
}

/* --- CHAOS ANIMATION TEMPLATES --- */

/* 1. Subtle Breathing Glow */
@keyframes chaos-breath {
    0%, 100% { filter: drop-shadow(0 0 2px var(--accent-primary)); opacity: 1; }
    50% { filter: drop-shadow(0 0 var(--chaos-glow-size) var(--accent-bright)); opacity: 0.9; }
}

/* 2. Vertical Scanline */
@keyframes chaos-scan {
    0% { background: linear-gradient(180deg, var(--accent-dim) 0%, transparent 10%); }
    50% { background: linear-gradient(180deg, transparent 45%, var(--accent-dim) 50%, transparent 55%); }
    100% { background: linear-gradient(180deg, transparent 90%, var(--accent-dim) 100%); }
}

/* 3. Signal Interference (Flicker) */
@keyframes chaos-flicker {
    0%, 100% { opacity: 1; transform: scale(1); }
    33% { opacity: 0.95; transform: scale(1.001); }
    66% { opacity: 0.98; transform: skewX(var(--chaos-skew)); }
}

/* 4. Deep Sea Drift */
@keyframes chaos-drift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(var(--chaos-drift-y)) rotate(0.1deg); }
}

.theme-chaos-protocol {
    animation: var(--chaos-animation-name) var(--chaos-speed) ease-in-out infinite;
    transition: all 0.5s ease; /* Smooth transition between chaos clicks */
}