/* ═══════════════════════════════════════════════════════════════
   Alloc42 — Theme Gallery
   13 themes: 2 professional + 11 creative
   Modern CSS: @property, color-mix(), trig fns, @starting-style
   ═══════════════════════════════════════════════════════════════ */

/* ── @property (animatable custom properties) ──────────────── */
@property --lightning-alpha {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}
@property --nebula-shift {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* ══════════════════════════════════════════════════════════════
   THEME PICKER UI
   ══════════════════════════════════════════════════════════════ */
.theme-picker {
    position: relative;
    margin-left: 0.75rem;
    z-index: 1002;
}

.theme-picker-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-alt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s,
                background 0.3s;
    position: relative;
    z-index: 1003;
}
.theme-picker-btn:hover {
    transform: scale(1.18) rotate(15deg);
    border-color: var(--accent);
}
.tp-icon {
    font-size: 1.3rem;
    line-height: 1;
    display: block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-picker-btn:hover .tp-icon {
    transform: rotate(-15deg) scale(1.1);
}

/* ── Panel ────────────────────────────────────── */
.theme-picker-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: -8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1rem 1rem 0.75rem;
    box-shadow: 0 14px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.94);
    transition: opacity 0.22s ease, visibility 0.22s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 270px;
    z-index: 1002;
}
.theme-picker-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Arrow pointer */
.theme-picker-panel::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 20px;
    width: 14px;
    height: 14px;
    background: var(--bg);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: rotate(45deg);
    z-index: -1;
}

/* ── Grid ─────────────────────────────────────── */
.tp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
.tp-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 2px 6px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.tp-opt span {
    font-size: 1.35rem;
    line-height: 1;
    display: block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tp-opt small {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}
.tp-opt:hover {
    background: var(--bg-alt);
    border-color: var(--border-light);
}
.tp-opt:hover span {
    transform: scale(1.35) rotate(-10deg);
}
.tp-opt.tp-active {
    background: var(--accent-light);
    border-color: var(--accent);
}
.tp-opt.tp-active small {
    color: var(--accent);
}

/* ── View Transition ──────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
}


/* ══════════════════════════════════════════════════════════════
   THEME: MONSTER — Frankenstein's Lab
   Lightning ❘ spider webs ❘ flickering lights ❘ tremors
   ══════════════════════════════════════════════════════════════ */
[data-theme="monster"] {
    --bg: #0d1a0d;
    --bg-alt: #152115;
    --text: #a8c8a0;
    --text-secondary: #7a9a72;
    --text-muted: #506848;
    --accent: #4cff00;
    --accent-hover: #3fcc00;
    --accent-light: rgba(76,255,0,0.08);
    --border: #2a4a22;
    --border-light: #1e3618;
    color-scheme: dark;
}

/* Lightning flash overlay — uses @property for smooth alpha */
[data-theme="monster"]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(180,255,120, var(--lightning-alpha));
    z-index: 10000;
    pointer-events: none;
    mix-blend-mode: screen;
    animation: lightning 9s ease-in-out infinite;
}
@keyframes lightning {
    0%,48%,52%,54%,100% { --lightning-alpha: 0; }
    49%     { --lightning-alpha: 0.45; }
    50%     { --lightning-alpha: 0; }
    53%     { --lightning-alpha: 0.25; }
}

/* Spider web — conic gradient in top-left corner */
[data-theme="monster"]::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 220px; height: 220px;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.12;
    background:
        conic-gradient(from 0deg at 0% 0%,
            transparent 0deg, rgba(180,255,120,0.3) 2deg, transparent 4deg,
            transparent 18deg, rgba(180,255,120,0.25) 20deg, transparent 22deg,
            transparent 38deg, rgba(180,255,120,0.2) 40deg, transparent 42deg,
            transparent 58deg, rgba(180,255,120,0.25) 60deg, transparent 62deg,
            transparent 78deg, rgba(180,255,120,0.2) 80deg, transparent 82deg,
            transparent 90deg
        ),
        radial-gradient(circle at 0% 0%, transparent 40px, rgba(180,255,120,0.08) 41px, transparent 42px),
        radial-gradient(circle at 0% 0%, transparent 80px, rgba(180,255,120,0.06) 81px, transparent 82px),
        radial-gradient(circle at 0% 0%, transparent 130px, rgba(180,255,120,0.05) 131px, transparent 132px),
        radial-gradient(circle at 0% 0%, transparent 180px, rgba(180,255,120,0.04) 181px, transparent 182px);
    background-repeat: no-repeat;
}

/* Text flicker */
[data-theme="monster"] h1,
[data-theme="monster"] h2 {
    animation: monsterFlicker 0.12s infinite alternate;
}
@keyframes monsterFlicker {
    0%   { opacity: 1;    text-shadow: 0 0 8px rgba(76,255,0,0.4); }
    30%  { opacity: 0.90; text-shadow: none; }
    70%  { opacity: 1;    text-shadow: 0 0 14px rgba(76,255,0,0.6); }
    100% { opacity: 0.94; text-shadow: 0 0 6px rgba(76,255,0,0.3); }
}

/* Shake on hover */
[data-theme="monster"] .tier-card:hover,
[data-theme="monster"] .project-card:hover {
    animation: monsterShake 0.35s ease;
}
@keyframes monsterShake {
    0%,100% { transform: translateX(0); }
    15% { transform: translateX(-4px) rotate(-0.5deg); }
    35% { transform: translateX(4px) rotate(0.5deg); }
    55% { transform: translateX(-3px) rotate(-0.3deg); }
    75% { transform: translateX(3px) rotate(0.3deg); }
}

/* Stitched card borders */
[data-theme="monster"] .tier-card,
[data-theme="monster"] .project-card,
[data-theme="monster"] .faq-item {
    border: 2px dashed var(--border);
    background: var(--bg-alt);
}
[data-theme="monster"] .nav {
    background: rgba(13,26,13,0.95);
}
[data-theme="monster"] .nav.scrolled {
    box-shadow: 0 2px 24px rgba(76,255,0,0.12);
}


/* ══════════════════════════════════════════════════════════════
   THEME: RETRO — Arcade Cabinet
   Scanlines ❘ neon glow ❘ CRT curve ❘ phosphor bleed
   ══════════════════════════════════════════════════════════════ */
[data-theme="retro"] {
    --bg: #0a0014;
    --bg-alt: #120020;
    --text: #ff00ff;
    --text-secondary: #00ffff;
    --text-muted: #8844aa;
    --accent: #ffff00;
    --accent-hover: #ffcc00;
    --accent-light: rgba(255,255,0,0.08);
    --border: #ff00ff;
    --border-light: #440066;
    color-scheme: dark;
}

/* CRT scanlines */
[data-theme="retro"]::before {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.15) 0px,
        rgba(0,0,0,0.15) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 9998;
}

/* CRT vignette */
[data-theme="retro"]::after {
    content: '';
    position: fixed; inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(10,0,20,0.7) 100%);
    pointer-events: none;
    z-index: 9997;
}

/* Neon glow text */
[data-theme="retro"] h1,
[data-theme="retro"] h2,
[data-theme="retro"] .nav-brand {
    text-shadow:
        0 0 7px currentColor,
        0 0 20px currentColor,
        0 0 42px currentColor;
    animation: retroPulse 2.5s ease-in-out infinite alternate;
}
@keyframes retroPulse {
    from { filter: brightness(1); }
    to   { filter: brightness(1.4); }
}

/* Pixel-glow cards */
[data-theme="retro"] .tier-card,
[data-theme="retro"] .project-card {
    border: 3px solid var(--border);
    background: rgba(18,0,32,0.9);
    box-shadow:
        0 0 12px rgba(255,0,255,0.25),
        0 0 36px rgba(255,0,255,0.08),
        inset 0 0 12px rgba(255,0,255,0.04);
}

/* Screen flicker */
[data-theme="retro"] body {
    animation: retroFlicker 5s infinite;
}
@keyframes retroFlicker {
    0%,96%,100% { filter: brightness(1); }
    97%  { filter: brightness(0.90); }
    98.5% { filter: brightness(1.08); }
}

[data-theme="retro"] .nav {
    background: rgba(10,0,20,0.96);
    border-bottom: 2px solid #ff00ff;
}


/* ══════════════════════════════════════════════════════════════
   THEME: MATRIX — Digital Rain
   Green monospace ❘ terminal cursor ❘ canvas rain (JS)
   ══════════════════════════════════════════════════════════════ */
[data-theme="matrix"] {
    --bg: #000000;
    --bg-alt: #001100;
    --text: #00ff41;
    --text-secondary: #008f11;
    --text-muted: #003b00;
    --accent: #00ff41;
    --accent-hover: #33ff66;
    --accent-light: rgba(0,255,65,0.06);
    --border: #003b00;
    --border-light: #001a00;
    color-scheme: dark;
}
/* Force monospace */
[data-theme="matrix"],
[data-theme="matrix"] * {
    font-family: 'Courier New', 'Lucida Console', monospace !important;
}

/* Green glow */
[data-theme="matrix"] h1,
[data-theme="matrix"] h2,
[data-theme="matrix"] h3 {
    text-shadow: 0 0 10px rgba(0,255,65,0.5), 0 0 30px rgba(0,255,65,0.15);
}

/* Terminal cursor after hero title */
[data-theme="matrix"] .hero-title::after {
    content: '\2588';
    color: var(--accent);
    animation: cursorBlink 1s step-end infinite;
    margin-left: 2px;
}
@keyframes cursorBlink {
    0%,50% { opacity: 1; }
    51%,100% { opacity: 0; }
}

/* Terminal-window cards */
[data-theme="matrix"] .tier-card,
[data-theme="matrix"] .project-card {
    border: 1px solid #003b00;
    background: rgba(0,17,0,0.85);
    box-shadow: 0 0 18px rgba(0,255,65,0.04);
}
[data-theme="matrix"] .tier-card::before {
    content: '> ';
    color: #00ff41;
}
[data-theme="matrix"] .nav {
    background: rgba(0,0,0,0.96);
    border-bottom: 1px solid #003b00;
}


/* ══════════════════════════════════════════════════════════════
   THEME: OCEAN — Deep Blue
   Waves ❘ bubbles ❘ floating cards ❘ click ripple (JS)
   ══════════════════════════════════════════════════════════════ */
[data-theme="ocean"] {
    --bg: #0a1628;
    --bg-alt: #0e1f3a;
    --text: #c8ddf0;
    --text-secondary: #7aa4c8;
    --text-muted: #3d6080;
    --accent: #00b4d8;
    --accent-hover: #00cfe8;
    --accent-light: rgba(0,180,216,0.08);
    --border: #1a3050;
    --border-light: #122440;
    color-scheme: dark;
}

/* Animated bubbles */
[data-theme="ocean"]::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9998;
    background-image:
        radial-gradient(circle 4px, rgba(0,180,216,0.18) 100%, transparent 100%),
        radial-gradient(circle 3px, rgba(0,180,216,0.14) 100%, transparent 100%),
        radial-gradient(circle 6px, rgba(0,180,216,0.12) 100%, transparent 100%),
        radial-gradient(circle 2px, rgba(0,180,216,0.20) 100%, transparent 100%),
        radial-gradient(circle 5px, rgba(0,180,216,0.10) 100%, transparent 100%),
        radial-gradient(circle 3px, rgba(0,180,216,0.16) 100%, transparent 100%);
    background-size: 8px 8px, 6px 6px, 12px 12px, 4px 4px, 10px 10px, 6px 6px;
    background-position: 10% 85%, 30% 65%, 55% 75%, 75% 90%, 45% 55%, 85% 70%;
    animation: oceanBubbles 14s linear infinite;
}
@keyframes oceanBubbles {
    0%   { background-position: 10% 85%, 30% 65%, 55% 75%, 75% 90%, 45% 55%, 85% 70%; }
    100% { background-position: 12% -20%, 28% -40%, 57% -30%, 73% -15%, 47% -45%, 83% -25%; }
}

/* Rolling wave at bottom */
[data-theme="ocean"]::after {
    content: '';
    position: fixed;
    bottom: 0; left: -10%;
    width: 120%; height: 90px;
    z-index: 9997;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 100%, rgba(0,180,216,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 100%, rgba(0,180,216,0.08) 0%, transparent 50%);
    animation: oceanWave 6s ease-in-out infinite;
}
@keyframes oceanWave {
    0%,100% { transform: translateX(0) translateY(0); }
    25%     { transform: translateX(-2%) translateY(-10px); }
    50%     { transform: translateX(0) translateY(-4px); }
    75%     { transform: translateX(2%) translateY(-8px); }
}

/* Floating cards */
[data-theme="ocean"] .tier-card,
[data-theme="ocean"] .project-card {
    animation: oceanFloat 5.5s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.4s);
    background: rgba(14,31,58,0.82);
    border: 1px solid rgba(0,180,216,0.18);
    backdrop-filter: blur(4px);
}
@keyframes oceanFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-7px); }
}

/* Caustic light on body */
[data-theme="ocean"] body {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0,180,216,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(0,180,216,0.02) 0%, transparent 50%),
        var(--bg);
}
[data-theme="ocean"] .nav {
    background: rgba(10,22,40,0.93);
    border-bottom: 1px solid rgba(0,180,216,0.12);
}


/* ══════════════════════════════════════════════════════════════
   THEME: COSMOS — Starfield
   Stars (box-shadow) ❘ nebula gradient ❘ comet ❘ floating
   ══════════════════════════════════════════════════════════════ */
[data-theme="cosmos"] {
    --bg: #08061a;
    --bg-alt: #0e0b28;
    --text: #d4c8f0;
    --text-secondary: #9a88cc;
    --text-muted: #5c4e80;
    --accent: #b06aff;
    --accent-hover: #c48aff;
    --accent-light: rgba(176,106,255,0.08);
    --border: #2a1e5a;
    --border-light: #1a1240;
    color-scheme: dark;
}

/* Nebula background */
[data-theme="cosmos"] body {
    background:
        radial-gradient(ellipse at 15% 85%, rgba(176,106,255,0.07) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 15%, rgba(100,60,200,0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(60,40,120,0.03) 0%, transparent 55%),
        var(--bg);
    animation: cosmosShift 25s ease-in-out infinite alternate;
    background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%;
}
@keyframes cosmosShift {
    0%   { background-position: 0% 100%,   100% 0%,  50% 50%, 0 0; }
    100% { background-position: 100% 0%,   0% 100%,  50% 50%, 0 0; }
}

/* Starfield (two layers for depth) */
[data-theme="cosmos"]::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: -1;
    box-shadow:
        /* Layer 1 — bright */
        95px 40px 0 0.6px rgba(255,255,255,0.9),
        310px 100px 0 0.4px rgba(255,255,255,0.8),
        540px 180px 0 0.6px rgba(255,255,255,0.7),
        70px 270px 0 0.3px rgba(255,255,255,0.85),
        830px 60px 0 0.5px rgba(255,255,255,0.75),
        180px 400px 0 0.4px rgba(255,255,255,0.6),
        650px 320px 0 0.6px rgba(255,255,255,0.8),
        1050px 130px 0 0.3px rgba(255,255,255,0.7),
        420px 480px 0 0.5px rgba(255,255,255,0.65),
        950px 370px 0 0.6px rgba(255,255,255,0.9),
        130px 560px 0 0.3px rgba(255,255,255,0.55),
        760px 510px 0 0.4px rgba(255,255,255,0.7),
        270px 650px 0 0.3px rgba(255,255,255,0.8),
        560px 610px 0 0.5px rgba(255,255,255,0.6),
        1150px 280px 0 0.4px rgba(255,255,255,0.75),
        /* Layer 2 — dim (parallax feel) */
        50px 150px 0 0.2px rgba(200,180,255,0.4),
        400px 60px 0 0.2px rgba(200,180,255,0.3),
        700px 250px 0 0.2px rgba(200,180,255,0.35),
        250px 500px 0 0.2px rgba(200,180,255,0.3),
        900px 450px 0 0.2px rgba(200,180,255,0.28),
        1100px 100px 0 0.2px rgba(200,180,255,0.32),
        600px 550px 0 0.2px rgba(200,180,255,0.25);
    animation: cosmosTwinkle 4s ease-in-out infinite alternate;
}
@keyframes cosmosTwinkle {
    0%   { opacity: 0.65; }
    100% { opacity: 1; }
}

/* Shooting star / comet */
[data-theme="cosmos"]::after {
    content: '';
    position: fixed;
    top: 12%;
    left: -8%;
    width: 90px;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(176,106,255,0.9), rgba(176,106,255,0.1), transparent);
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    animation: cosmosComet 15s linear infinite;
}
@keyframes cosmosComet {
    0%,82%    { opacity: 0; transform: translateX(0) translateY(0) rotate(-22deg); }
    84%       { opacity: 1; }
    92%       { opacity: 0.6; transform: translateX(115vw) translateY(42vh) rotate(-22deg); }
    93%,100%  { opacity: 0; }
}

/* Gently floating cards */
[data-theme="cosmos"] .tier-card,
[data-theme="cosmos"] .project-card {
    animation: cosmosFloat 8s ease-in-out infinite;
    background: rgba(14,11,40,0.78);
    border: 1px solid rgba(176,106,255,0.12);
    backdrop-filter: blur(4px);
}
@keyframes cosmosFloat {
    0%,100% { transform: translateY(0) rotate(0deg); }
    30%     { transform: translateY(-5px) rotate(0.3deg); }
    70%     { transform: translateY(-3px) rotate(-0.2deg); }
}
[data-theme="cosmos"] .nav {
    background: rgba(8,6,26,0.93);
    border-bottom: 1px solid rgba(176,106,255,0.08);
}


/* ══════════════════════════════════════════════════════════════
   THEME: COZY — Fireside
   Warm amber ❘ flickering glow ❘ soft shapes
   ══════════════════════════════════════════════════════════════ */
[data-theme="cozy"] {
    --bg: #2c1810;
    --bg-alt: #3a2218;
    --text: #f0dcc8;
    --text-secondary: #c8a888;
    --text-muted: #8a6e55;
    --accent: #e8923a;
    --accent-hover: #f0a050;
    --accent-light: rgba(232,146,58,0.10);
    --border: #5a3a28;
    --border-light: #4a2e1e;
    color-scheme: dark;
}

/* Warm ambient firelight */
[data-theme="cozy"]::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: -1;
    background:
        radial-gradient(ellipse at 50% 110%, rgba(232,146,58,0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 90%, rgba(200,100,20,0.07) 0%, transparent 40%);
    animation: cozyFlicker 3.5s ease-in-out infinite alternate;
}
@keyframes cozyFlicker {
    0%   { opacity: 0.7; }
    20%  { opacity: 1; }
    40%  { opacity: 0.85; }
    65%  { opacity: 1; }
    80%  { opacity: 0.9; }
    100% { opacity: 0.75; }
}

/* Soft, rounded shapes */
[data-theme="cozy"] .tier-card,
[data-theme="cozy"] .project-card,
[data-theme="cozy"] .faq-item {
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    box-shadow: 0 8px 32px rgba(232,146,58,0.06);
}
[data-theme="cozy"] .btn {
    border-radius: 32px;
}

/* Warm heading glow */
[data-theme="cozy"] h1,
[data-theme="cozy"] h2 {
    text-shadow: 0 0 50px rgba(232,146,58,0.12);
}
[data-theme="cozy"] .nav {
    background: rgba(44,24,16,0.95);
    border-bottom: 1px solid rgba(232,146,58,0.08);
}


/* ══════════════════════════════════════════════════════════════
   THEME: CANDY — Sugar Rush
   Pastel ❘ bouncy springs ❘ rainbow gradient text ❘ puffy
   ══════════════════════════════════════════════════════════════ */
[data-theme="candy"] {
    --bg: #fff5f8;
    --bg-alt: #ffe8f0;
    --text: #5a2040;
    --text-secondary: #884466;
    --text-muted: #aa7788;
    --accent: #ff6b9d;
    --accent-hover: #ff4d8a;
    --accent-light: rgba(255,107,157,0.08);
    --border: #ffc0d0;
    --border-light: #ffe0ea;
    color-scheme: light;
}

/* Pastel stripes */
[data-theme="candy"]::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: -1;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 22px,
        rgba(255,107,157,0.035) 22px,
        rgba(255,107,157,0.035) 44px,
        transparent 44px,
        transparent 66px,
        rgba(170,240,209,0.035) 66px,
        rgba(170,240,209,0.035) 88px
    );
}

/* Bouncy hover */
[data-theme="candy"] .tier-card,
[data-theme="candy"] .project-card {
    border-radius: 26px;
    border: 2px solid var(--border);
    background: var(--bg);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
[data-theme="candy"] .tier-card:hover,
[data-theme="candy"] .project-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 22px 44px rgba(255,107,157,0.12);
}

/* Rainbow gradient headings */
[data-theme="candy"] h1,
[data-theme="candy"] h2 {
    background: linear-gradient(135deg, #ff6b9d, #c084fc, #60a5fa, #34d399, #fbbf24, #ff6b9d);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: candyGradient 5s ease infinite;
}
@keyframes candyGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Puffy 3D buttons */
[data-theme="candy"] .btn {
    border-radius: 50px;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 60%, black);
    transition: all 0.15s;
}
[data-theme="candy"] .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 color-mix(in srgb, var(--accent) 60%, black);
}
[data-theme="candy"] .btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 60%, black);
}

[data-theme="candy"] .nav {
    background: rgba(255,245,248,0.96);
    border-bottom: 2px solid var(--border);
}


/* ══════════════════════════════════════════════════════════════
   THEME: NOIR — Private Eye
   B&W + red ❘ film grain ❘ vignette ❘ serif ❘ dramatic shadow
   ══════════════════════════════════════════════════════════════ */
[data-theme="noir"] {
    --bg: #0a0a0a;
    --bg-alt: #141414;
    --text: #d0d0d0;
    --text-secondary: #888888;
    --text-muted: #555555;
    --accent: #8b0000;
    --accent-hover: #aa0000;
    --accent-light: rgba(139,0,0,0.08);
    --border: #2a2a2a;
    --border-light: #1a1a1a;
    color-scheme: dark;
}
/* Serif override */
[data-theme="noir"],
[data-theme="noir"] * {
    font-family: 'Georgia', 'Times New Roman', serif !important;
}

/* Film grain via inline SVG noise */
[data-theme="noir"]::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 9998;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: noirGrain 0.4s steps(5) infinite;
}
@keyframes noirGrain {
    0%   { transform: translate(0,0); }
    20%  { transform: translate(-2px,1px); }
    40%  { transform: translate(1px,-2px); }
    60%  { transform: translate(-1px,2px); }
    80%  { transform: translate(2px,-1px); }
    100% { transform: translate(0,0); }
}

/* Vignette */
[data-theme="noir"]::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 9997;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.65) 100%);
}

/* Dramatic shadow cards */
[data-theme="noir"] .tier-card,
[data-theme="noir"] .project-card {
    border: 1px solid #2a2a2a;
    background: #0e0e0e;
    box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
}
[data-theme="noir"] img {
    filter: grayscale(1) contrast(1.2);
}
[data-theme="noir"] .nav-link-cta,
[data-theme="noir"] .btn-primary {
    text-shadow: 0 0 24px rgba(139,0,0,0.45);
}
[data-theme="noir"] .nav {
    background: rgba(10,10,10,0.96);
    border-bottom: 1px solid #1a1a1a;
}


/* ══════════════════════════════════════════════════════════════
   THEME: DISCO — Studio 54
   Color-cycling ❘ pulsing glow ❘ mouse spotlight (JS)
   ══════════════════════════════════════════════════════════════ */
[data-theme="disco"] {
    --bg: #1a0a2e;
    --bg-alt: #220e3a;
    --text: #f0e0ff;
    --text-secondary: #c0a0e0;
    --text-muted: #7a5aa0;
    --accent: #ff00ff;
    --accent-hover: #ff44ff;
    --accent-light: rgba(255,0,255,0.08);
    --border: #4a2080;
    --border-light: #3a1068;
    color-scheme: dark;
}

/* Radiant background */
[data-theme="disco"]::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: -1;
    background:
        radial-gradient(circle at 25% 25%, rgba(255,0,255,0.06) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0,255,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,0,0.03) 0%, transparent 50%);
    animation: discoBgPulse 4s ease-in-out infinite alternate;
}
@keyframes discoBgPulse {
    0%   { opacity: 0.5; transform: scale(1); }
    100% { opacity: 1;   transform: scale(1.05); }
}

/* Color-cycling cards */
[data-theme="disco"] .tier-card,
[data-theme="disco"] .project-card {
    background: rgba(34,14,58,0.82);
    border: 2px solid #ff00ff;
    animation: discoBorder 3s linear infinite, discoPulse 2.5s ease-in-out infinite;
}
@keyframes discoBorder {
    0%   { border-color: #ff00ff; }
    33%  { border-color: #00ffff; }
    66%  { border-color: #ffff00; }
    100% { border-color: #ff00ff; }
}
@keyframes discoPulse {
    0%,100% { box-shadow: 0 0 20px rgba(255,0,255,0.2); }
    50%     { box-shadow: 0 0 44px rgba(0,255,255,0.25); }
}

/* Color-cycling headings */
[data-theme="disco"] h1,
[data-theme="disco"] h2 {
    animation: discoText 3.5s ease-in-out infinite;
}
@keyframes discoText {
    0%,100% { text-shadow: 0 0 24px rgba(255,0,255,0.6); color: #ff88ff; }
    33%     { text-shadow: 0 0 24px rgba(0,255,255,0.6); color: #88ffff; }
    66%     { text-shadow: 0 0 24px rgba(255,255,0,0.6); color: #ffff88; }
}

[data-theme="disco"] .nav {
    background: rgba(26,10,46,0.93);
    border-bottom: 2px solid rgba(255,0,255,0.25);
}


/* ══════════════════════════════════════════════════════════════
   THEME: SNOW — Winter Wonderland
   Cool blue-white ❘ frost ❘ frosted glass ❘ snowfall (JS)
   ══════════════════════════════════════════════════════════════ */
[data-theme="snow"] {
    --bg: #e8f0ff;
    --bg-alt: #d8e8fa;
    --text: #1a2a40;
    --text-secondary: #3a5070;
    --text-muted: #6080a0;
    --accent: #0077cc;
    --accent-hover: #0066b0;
    --accent-light: rgba(0,119,204,0.06);
    --border: #c0d8f0;
    --border-light: #d8e8fa;
    color-scheme: light;
}

/* Frost line across top */
[data-theme="snow"]::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 4px;
    z-index: 10001;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(160,210,255,0.4),
        rgba(255,255,255,0.95),
        rgba(180,220,255,0.5),
        rgba(255,255,255,0.95),
        rgba(160,210,255,0.4)
    );
    box-shadow: 0 0 18px rgba(160,210,255,0.35), 0 0 36px rgba(160,210,255,0.15);
}

/* Frosted glass cards */
[data-theme="snow"] .tier-card,
[data-theme="snow"] .project-card {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(160,210,255,0.35);
    box-shadow: 0 4px 22px rgba(0,80,160,0.05),
                inset 0 0 0 1px rgba(255,255,255,0.45);
}

/* Cool headings */
[data-theme="snow"] h1,
[data-theme="snow"] h2 {
    color: #1a3a5c;
}
[data-theme="snow"] .section-label {
    text-shadow: 0 0 24px rgba(160,210,255,0.25);
}
[data-theme="snow"] .nav {
    background: rgba(232,240,255,0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(160,210,255,0.25);
}


/* ══════════════════════════════════════════════════════════════
   THEME: CHAOS — Web 1.0 Reborn
   Comic Sans ❘ rainbow ❘ blink ❘ spin ❘ mouse trails (JS)
   ══════════════════════════════════════════════════════════════ */
[data-theme="chaos"] {
    --bg: #ffff00;
    --bg-alt: #00ff00;
    --text: #ff00ff;
    --text-secondary: #0000ff;
    --text-muted: #ff0000;
    --accent: #ff0000;
    --accent-hover: #0000ff;
    --accent-light: rgba(255,0,0,0.15);
    --border: #ff00ff;
    --border-light: #00ffff;
    color-scheme: light;
}
[data-theme="chaos"],
[data-theme="chaos"] * {
    font-family: 'Comic Sans MS', 'Chalkboard SE', cursive !important;
}

/* Tiling rainbow background */
[data-theme="chaos"]::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: -1;
    background:
        repeating-linear-gradient(45deg,
            rgba(255,0,0,0.08) 0px, rgba(255,0,0,0.08) 12px,
            transparent 12px, transparent 24px
        ),
        repeating-linear-gradient(-45deg,
            rgba(0,0,255,0.08) 0px, rgba(0,0,255,0.08) 12px,
            transparent 12px, transparent 24px
        ),
        linear-gradient(90deg, #ffff00, #00ff00, #00ffff, #ff00ff, #ffff00);
    background-size: 100%, 100%, 500% 500%;
    animation: chaosRainbow 4s linear infinite;
}
@keyframes chaosRainbow {
    0%   { background-position: 0 0, 0 0, 0% 0%; }
    100% { background-position: 0 0, 0 0, 100% 100%; }
}

/* THE BLINK TAG RETURNS */
[data-theme="chaos"] .section-label,
[data-theme="chaos"] .nav-brand {
    animation: chaosBlink 0.7s step-end infinite;
}
@keyframes chaosBlink {
    0%,55%  { opacity: 1; }
    56%,100% { opacity: 0; }
}

/* SPINNING CARDS */
[data-theme="chaos"] .tier-card:hover,
[data-theme="chaos"] .project-card:hover {
    animation: chaosSpin 0.6s linear;
}
@keyframes chaosSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Rainbow cycling border */
[data-theme="chaos"] .tier-card,
[data-theme="chaos"] .project-card,
[data-theme="chaos"] .faq-item {
    border: 3px solid;
    animation: chaosBorderCycle 1.2s linear infinite;
    background: rgba(255,255,0,0.25);
}
@keyframes chaosBorderCycle {
    0%   { border-color: #ff0000; }
    17%  { border-color: #ff8800; }
    33%  { border-color: #ffff00; }
    50%  { border-color: #00ff00; }
    67%  { border-color: #0088ff; }
    83%  { border-color: #ff00ff; }
    100% { border-color: #ff0000; }
}

/* ── Chaos injected elements (via JS) ──────── */
.chaos-marquee {
    position: fixed;
    top: 64px; left: 0; right: 0;
    z-index: 10000;
    background: #ff0000;
    color: #ffff00;
    font-family: 'Comic Sans MS', cursive !important;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 6px 0;
    overflow: hidden;
    white-space: nowrap;
}
.chaos-marquee-inner {
    display: inline-block;
    padding-left: 100%;
    animation: chaosMarquee 14s linear infinite;
}
@keyframes chaosMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

.chaos-counter {
    position: fixed;
    bottom: 12px; right: 12px;
    background: #000080;
    color: #00ff00;
    font-family: 'Courier New', monospace !important;
    padding: 8px 14px;
    border: 2px inset #808080;
    font-size: 0.72rem;
    z-index: 10000;
    line-height: 1.4;
}

.chaos-trail-dot {
    position: fixed;
    width: 14px; height: 14px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Cursors */
[data-theme="chaos"]        { cursor: crosshair; }
[data-theme="chaos"] a,
[data-theme="chaos"] button { cursor: help; }

[data-theme="chaos"] .nav {
    background: rgba(0,255,0,0.88);
    border-bottom: 4px dashed #ff00ff;
}


/* ══════════════════════════════════════════════════════════════
   SHARED: Dark-theme adjustments (form inputs, status tags…)
   Using :is() for concise selectors
   ══════════════════════════════════════════════════════════════ */
:is(
    [data-theme="monster"],
    [data-theme="retro"],
    [data-theme="matrix"],
    [data-theme="ocean"],
    [data-theme="cosmos"],
    [data-theme="cozy"],
    [data-theme="noir"],
    [data-theme="disco"]
) {
    & input, & textarea, & select {
        background: var(--bg-alt);
        color: var(--text);
        border-color: var(--border);
    }

    & .status-shipped {
        background: rgba(0,200,100,0.12);
        color: #4cff7c;
    }
    & .status-active {
        background: rgba(0,150,255,0.12);
        color: #66bbff;
    }
    & .status-evolving {
        background: rgba(255,180,0,0.12);
        color: #ffcc44;
    }

    scrollbar-color: var(--border) var(--bg);
}

/* Theme picker panel dark adaptation */
:is(
    [data-theme="monster"],
    [data-theme="retro"],
    [data-theme="matrix"],
    [data-theme="ocean"],
    [data-theme="cosmos"],
    [data-theme="cozy"],
    [data-theme="noir"],
    [data-theme="disco"]
) .theme-picker-panel {
    background: var(--bg-alt);
    border-color: var(--border);
    box-shadow: 0 14px 48px rgba(0,0,0,0.45);
}
:is(
    [data-theme="monster"],
    [data-theme="retro"],
    [data-theme="matrix"],
    [data-theme="ocean"],
    [data-theme="cosmos"],
    [data-theme="cozy"],
    [data-theme="noir"],
    [data-theme="disco"]
) .theme-picker-panel::before {
    background: var(--bg-alt);
    border-color: var(--border);
}

[data-theme="chaos"] .theme-picker-panel {
    background: #ffff00;
    border: 3px dashed #ff00ff;
}
[data-theme="chaos"] .theme-picker-panel::before {
    background: #ffff00;
    border-color: #ff00ff;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .theme-picker-panel {
        position: absolute;
        top: calc(100% + 10px);
        bottom: auto;
        left: auto;
        right: 0;
        width: min(340px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
        border-radius: 20px;
        padding: 1rem 0.9rem 0.85rem;
        min-width: 0;
        max-height: none;
        overflow: visible;
        transform: translateY(100%);
    }
    .theme-picker-panel.open {
        transform: translateY(0);
    }
    .theme-picker-panel::before {
        display: none;
    }
    .tp-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }
    .tp-opt {
        padding: 8px 2px 6px;
    }
    .tp-opt span {
        font-size: 1.3rem;
    }
    .tp-opt small {
        font-size: 0.58rem;
    }
}