/* =============================================
   EXTRA ATHENACORE THEMES
   Quantum Entanglement, Liquid Mercury, Underwater Reef,
   Bonsai Garden, Volcanic Ember, Arctic Frost, ASCII Mode
============================================= */

/* =============================================
   QUANTUM ENTANGLEMENT - Sci-fi paired particles
============================================= */
html[data-theme="quantum-entanglement"],
:root[data-theme="quantum-entanglement"] {
    --color-background: #060818;
    --color-surface: #0d1230;
    --color-surface-subtle: #11183d;
    --color-surface-elevated: #161e4a;
    --text-primary: #e0e6ff;
    --text-secondary: #9aa6e8;
    --text-tertiary: #6b78b8;
    --border-light: rgba(124, 92, 255, 0.18);
    --border-medium: rgba(124, 92, 255, 0.35);
    --border-dark: rgba(124, 92, 255, 0.55);
    --google-blue: #7c5cff;
    --google-blue-light: #a78bfa;
    --google-blue-dark: #5b3fd6;
    --google-blue-subtle: rgba(124, 92, 255, 0.15);
    --google-red: #ff5c8d;
    --google-yellow: #ffe066;
    --google-green: #34d399;
    --theme-radius-md: 14px;
    --theme-radius-lg: 18px;
}
html[data-theme="quantum-entanglement"] body {
    background:
        radial-gradient(ellipse at 20% 10%, rgba(124,92,255,0.20), transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(255,92,141,0.18), transparent 55%),
        linear-gradient(180deg, #060818 0%, #0a0e2a 100%);
    background-attachment: fixed;
    color: var(--text-primary);
}
html[data-theme="quantum-entanglement"] .glass-card,
html[data-theme="quantum-entanglement"] .card {
    background: rgba(13, 18, 48, 0.72);
    border: 1px solid var(--border-medium);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 24px rgba(124,92,255,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}
@keyframes quantumOrbit {
    0%   { transform: translate(0, 0); opacity: 0.6; }
    50%  { transform: translate(40px, -30px); opacity: 1; }
    100% { transform: translate(0, 0); opacity: 0.6; }
}
@keyframes quantumOrbitMirror {
    0%   { transform: translate(0, 0); opacity: 0.6; }
    50%  { transform: translate(-40px, 30px); opacity: 1; }
    100% { transform: translate(0, 0); opacity: 0.6; }
}

/* =============================================
   LIQUID MERCURY - Reflective metaball silver
============================================= */
html[data-theme="liquid-mercury"],
:root[data-theme="liquid-mercury"] {
    --color-background: #0e1117;
    --color-surface: #161b24;
    --color-surface-subtle: #1c2230;
    --color-surface-elevated: #232a39;
    --text-primary: #e8edf5;
    --text-secondary: #b6c0d0;
    --text-tertiary: #7d8898;
    --border-light: rgba(200, 215, 235, 0.12);
    --border-medium: rgba(200, 215, 235, 0.25);
    --border-dark: rgba(200, 215, 235, 0.45);
    --google-blue: #c9d6e8;
    --google-blue-light: #e6edf6;
    --google-blue-dark: #8d9bb0;
    --google-blue-subtle: rgba(201, 214, 232, 0.16);
    --google-red: #d49aa6;
    --google-yellow: #e3d6a6;
    --google-green: #a6d4be;
    --theme-radius-md: 16px;
    --theme-radius-lg: 22px;
}
html[data-theme="liquid-mercury"] body {
    background:
        radial-gradient(circle at 20% 25%, rgba(220,230,245,0.14), transparent 55%),
        radial-gradient(circle at 80% 75%, rgba(160,180,210,0.18), transparent 60%),
        linear-gradient(180deg, #0e1117 0%, #1a2030 100%);
    background-attachment: fixed;
    color: var(--text-primary);
}
html[data-theme="liquid-mercury"] .glass-card,
html[data-theme="liquid-mercury"] .card {
    background: linear-gradient(160deg, rgba(40,48,62,0.85), rgba(22,27,36,0.85));
    border: 1px solid rgba(200,215,235,0.18);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
}
@keyframes mercuryFlow1 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(60px, -40px) scale(1.1); }
}
@keyframes mercuryFlow2 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(-50px, 50px) scale(0.95); }
}

/* =============================================
   UNDERWATER REEF - Caustic light + bubbles
============================================= */
html[data-theme="underwater-reef"],
:root[data-theme="underwater-reef"] {
    --color-background: #021a2e;
    --color-surface: #052b46;
    --color-surface-subtle: #08395c;
    --color-surface-elevated: #0a4470;
    --text-primary: #d6f1ff;
    --text-secondary: #8fc8e8;
    --text-tertiary: #5e95b5;
    --border-light: rgba(120, 200, 230, 0.18);
    --border-medium: rgba(120, 200, 230, 0.32);
    --border-dark: rgba(120, 200, 230, 0.52);
    --google-blue: #2dd4bf;
    --google-blue-light: #5eead4;
    --google-blue-dark: #14b8a6;
    --google-blue-subtle: rgba(45, 212, 191, 0.15);
    --google-red: #ff7a7a;
    --google-yellow: #ffd166;
    --google-green: #a3e635;
    --theme-radius-md: 18px;
    --theme-radius-lg: 24px;
}
html[data-theme="underwater-reef"] body {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(94, 234, 212, 0.22), transparent 50%),
        radial-gradient(ellipse at 70% 100%, rgba(15, 60, 90, 0.6), transparent 60%),
        linear-gradient(180deg, #021a2e 0%, #042641 60%, #02101c 100%);
    background-attachment: fixed;
    color: var(--text-primary);
}
html[data-theme="underwater-reef"] .glass-card,
html[data-theme="underwater-reef"] .card {
    background: rgba(8, 50, 80, 0.72);
    border: 1px solid var(--border-medium);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 32px rgba(0,40,60,0.55);
}
@keyframes reefBubble {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.7; }
    100% { transform: translateY(-110vh) translateX(20px); opacity: 0; }
}
@keyframes reefCaustic {
    0%, 100% { transform: translate(0,0) scale(1); opacity: 0.35; }
    50%      { transform: translate(20px,-15px) scale(1.05); opacity: 0.55; }
}

/* =============================================
   BONSAI GARDEN - Zen ink-wash with raked sand
============================================= */
html[data-theme="bonsai-garden"],
:root[data-theme="bonsai-garden"] {
    --color-background: #f5f1e8;
    --color-surface: #fbf8f0;
    --color-surface-subtle: #ece5d2;
    --color-surface-elevated: #ffffff;
    --text-primary: #2b2820;
    --text-secondary: #5b5340;
    --text-tertiary: #8a8068;
    --border-light: #d8cfb8;
    --border-medium: #b8ad92;
    --border-dark: #908467;
    --google-blue: #5b7b4f;
    --google-blue-light: #7d9c70;
    --google-blue-dark: #3e5b34;
    --google-blue-subtle: rgba(91, 123, 79, 0.14);
    --google-red: #a05050;
    --google-yellow: #c9a352;
    --google-green: #5b7b4f;
    --theme-radius-md: 8px;
    --theme-radius-lg: 12px;
}
html[data-theme="bonsai-garden"] body {
    background: linear-gradient(180deg, #f5f1e8 0%, #ece5d2 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: 'Inter', 'Roboto', sans-serif;
}
html[data-theme="bonsai-garden"] .glass-card,
html[data-theme="bonsai-garden"] .card {
    background: rgba(251, 248, 240, 0.95);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 14px rgba(80, 70, 40, 0.08);
}
@keyframes bonsaiSway {
    0%, 100% { transform: rotate(-1deg); }
    50%      { transform: rotate(1deg); }
}

/* =============================================
   VOLCANIC EMBER - Drifting sparks + heat haze
============================================= */
html[data-theme="volcanic-ember"],
:root[data-theme="volcanic-ember"] {
    --color-background: #160505;
    --color-surface: #240b08;
    --color-surface-subtle: #31100b;
    --color-surface-elevated: #3d160e;
    --text-primary: #ffe8d6;
    --text-secondary: #f0a878;
    --text-tertiary: #b26a45;
    --border-light: rgba(255, 120, 60, 0.20);
    --border-medium: rgba(255, 120, 60, 0.38);
    --border-dark: rgba(255, 120, 60, 0.58);
    --google-blue: #ff6b35;
    --google-blue-light: #ff8c61;
    --google-blue-dark: #d84315;
    --google-blue-subtle: rgba(255, 107, 53, 0.16);
    --google-red: #ff4136;
    --google-yellow: #ffcc33;
    --google-green: #ff8c61;
    --theme-radius-md: 12px;
    --theme-radius-lg: 16px;
}
html[data-theme="volcanic-ember"] body {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(255, 80, 30, 0.35), transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(180, 30, 10, 0.30), transparent 55%),
        linear-gradient(180deg, #0a0202 0%, #1a0605 60%, #2a0a06 100%);
    background-attachment: fixed;
    color: var(--text-primary);
}
html[data-theme="volcanic-ember"] .glass-card,
html[data-theme="volcanic-ember"] .card {
    background: rgba(36, 11, 8, 0.82);
    border: 1px solid var(--border-medium);
    box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 24px rgba(255, 107, 53, 0.10);
    backdrop-filter: blur(4px);
}
@keyframes emberRise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 0.9; }
    100% { transform: translateY(-110vh) translateX(40px); opacity: 0; }
}
@keyframes heatHaze {
    0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.18; }
    50%      { transform: translateY(-4px) scaleY(1.02); opacity: 0.30; }
}

/* =============================================
   ARCTIC FROST - Frosted glass + falling snow
============================================= */
html[data-theme="arctic-frost"],
:root[data-theme="arctic-frost"] {
    --color-background: #eaf3fb;
    --color-surface: #ffffff;
    --color-surface-subtle: #d8e8f5;
    --color-surface-elevated: #ffffff;
    --text-primary: #14283c;
    --text-secondary: #3a5a7a;
    --text-tertiary: #6b8aa8;
    --border-light: #cadcec;
    --border-medium: #a5c1d9;
    --border-dark: #7aa2c2;
    --google-blue: #3b82f6;
    --google-blue-light: #60a5fa;
    --google-blue-dark: #2563eb;
    --google-blue-subtle: rgba(59, 130, 246, 0.12);
    --google-red: #ef4444;
    --google-yellow: #f5d76e;
    --google-green: #34d399;
    --theme-radius-md: 14px;
    --theme-radius-lg: 20px;
}
html[data-theme="arctic-frost"] body {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(180, 220, 255, 0.6), transparent 55%),
        linear-gradient(180deg, #eaf3fb 0%, #cfe2f3 100%);
    background-attachment: fixed;
    color: var(--text-primary);
}
html[data-theme="arctic-frost"] .glass-card,
html[data-theme="arctic-frost"] .card {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(165, 193, 217, 0.6);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 28px rgba(60, 110, 160, 0.14), inset 0 1px 0 rgba(255,255,255,0.7);
}
@keyframes snowFall {
    0%   { transform: translateY(-10vh) translateX(0); opacity: 0; }
    10%  { opacity: 0.9; }
    100% { transform: translateY(110vh) translateX(30px); opacity: 0; }
}

/* =============================================
   ASCII MODE - Monospace experimental
============================================= */
html[data-theme="ascii-mode"],
:root[data-theme="ascii-mode"] {
    --color-background: #0a0a0a;
    --color-surface: #111111;
    --color-surface-subtle: #161616;
    --color-surface-elevated: #1c1c1c;
    --text-primary: #d0d0d0;
    --text-secondary: #9a9a9a;
    --text-tertiary: #6a6a6a;
    --border-light: #2a2a2a;
    --border-medium: #3a3a3a;
    --border-dark: #5a5a5a;
    --google-blue: #c0c0c0;
    --google-blue-light: #e0e0e0;
    --google-blue-dark: #909090;
    --google-blue-subtle: rgba(192, 192, 192, 0.14);
    --google-red: #d0d0d0;
    --google-yellow: #d0d0d0;
    --google-green: #d0d0d0;
    --theme-radius-md: 0px;
    --theme-radius-lg: 0px;
}
html[data-theme="ascii-mode"] body {
    background: #0a0a0a;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace;
}
html[data-theme="ascii-mode"] body,
html[data-theme="ascii-mode"] h1,
html[data-theme="ascii-mode"] h2,
html[data-theme="ascii-mode"] h3,
html[data-theme="ascii-mode"] p,
html[data-theme="ascii-mode"] span,
html[data-theme="ascii-mode"] button,
html[data-theme="ascii-mode"] input,
html[data-theme="ascii-mode"] label {
    font-family: 'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace !important;
    letter-spacing: 0.02em;
}
html[data-theme="ascii-mode"] .glass-card,
html[data-theme="ascii-mode"] .card {
    background: #111111;
    border: 1px dashed var(--border-medium);
    border-radius: 0;
    box-shadow: none;
    position: relative;
}
html[data-theme="ascii-mode"] .glass-card::before,
html[data-theme="ascii-mode"] .card::before {
    content: "+--------------------------------------------------+";
    position: absolute;
    top: -0.6em;
    left: 0.75rem;
    right: 0.75rem;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    overflow: hidden;
    white-space: nowrap;
    background: var(--color-background);
    padding: 0 0.25rem;
    pointer-events: none;
}

/* =============================================
   MECHANICAL CLOCKWORK - Brass automaton interface
============================================= */
html[data-theme="mechanical-clockwork"],
:root[data-theme="mechanical-clockwork"] {
    --color-background: #120b05;
    --color-surface: rgba(47, 29, 13, 0.88);
    --color-surface-subtle: rgba(244, 192, 102, 0.14);
    --color-surface-elevated: rgba(71, 43, 18, 0.94);
    --text-primary: #fff1cf;
    --text-secondary: #e8c987;
    --text-tertiary: #b98946;
    --border-light: rgba(244, 192, 102, 0.28);
    --border-medium: rgba(244, 192, 102, 0.48);
    --border-dark: rgba(244, 192, 102, 0.70);
    --google-blue: #f4c066;
    --google-blue-light: #ffe3a1;
    --google-blue-dark: #9a5d24;
    --google-blue-subtle: rgba(244, 192, 102, 0.18);
    --google-red: #d2733f;
    --google-yellow: #f4c066;
    --google-green: #8fb36a;
    --theme-font: 'Inter', 'Roboto', sans-serif;
    --theme-radius-md: 6px;
    --theme-radius-lg: 10px;
    --theme-border-width: 1px;
    --theme-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 231, 173, 0.10);
    --theme-shadow-md: 0 14px 36px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 231, 173, 0.13);
    --theme-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.62), 0 0 22px rgba(244, 192, 102, 0.12);
}

html[data-theme="mechanical-clockwork"] body {
    background:
        radial-gradient(circle at 18% 12%, rgba(244, 192, 102, 0.16), transparent 28%),
        radial-gradient(circle at 82% 85%, rgba(141, 82, 32, 0.24), transparent 34%),
        linear-gradient(180deg, #120b05 0%, #201207 52%, #090502 100%);
    background-attachment: fixed;
    color: var(--text-primary);
}

html[data-theme="mechanical-clockwork"] .pill-nav {
    background:
        linear-gradient(90deg, rgba(255, 226, 160, 0.08), transparent 12%, transparent 88%, rgba(0,0,0,0.22)),
        linear-gradient(145deg, rgba(82, 51, 22, 0.96), rgba(31, 19, 9, 0.96));
    border: 1px solid rgba(244, 192, 102, 0.45);
    border-radius: 12px;
    box-shadow: var(--theme-shadow-lg), inset 0 0 0 1px rgba(255, 240, 190, 0.08);
}

/* Nav-side spinning gear pseudo-elements removed by request — the WebGL
   shader background already provides the mechanical motion. */

html[data-theme="mechanical-clockwork"] .pill-nav__item,
html[data-theme="mechanical-clockwork"] .pill-nav__dropdown-item,
html[data-theme="mechanical-clockwork"] .pill-nav-sidebar__item {
    border-radius: 8px;
    color: var(--text-secondary);
}

html[data-theme="mechanical-clockwork"] .pill-nav__item:hover,
html[data-theme="mechanical-clockwork"] .pill-nav__dropdown-item:hover,
html[data-theme="mechanical-clockwork"] .pill-nav-sidebar__item:hover {
    background: linear-gradient(145deg, rgba(244, 192, 102, 0.20), rgba(78, 47, 19, 0.45));
    color: #fff7df;
    box-shadow: inset 0 0 0 1px rgba(244, 192, 102, 0.25);
}

html[data-theme="mechanical-clockwork"] .pill-nav__item.active,
html[data-theme="mechanical-clockwork"] .pill-nav-sidebar__item.active {
    background: linear-gradient(145deg, #f4c066, #9a5d24);
    color: #1a1008;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 18px rgba(244, 192, 102, 0.30);
}

html[data-theme="mechanical-clockwork"] .pill-nav__dropdown-menu {
    background:
        linear-gradient(145deg, rgba(75, 45, 18, 0.98), rgba(25, 16, 9, 0.98));
    border: 1px solid rgba(244, 192, 102, 0.42);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 236, 181, 0.08);
}

html[data-theme="mechanical-clockwork"] .glass-card,
html[data-theme="mechanical-clockwork"] .card,
html[data-theme="mechanical-clockwork"] .response-card,
html[data-theme="mechanical-clockwork"] .agent-card,
html[data-theme="mechanical-clockwork"] .settings-section,
html[data-theme="mechanical-clockwork"] .tab-content {
    position: relative;
    background:
        linear-gradient(135deg, rgba(255, 226, 160, 0.08), transparent 22%),
        repeating-linear-gradient(90deg, rgba(255, 226, 160, 0.035) 0 1px, transparent 1px 18px),
        linear-gradient(145deg, rgba(65, 39, 16, 0.92), rgba(27, 17, 9, 0.94));
    border: 1px solid rgba(244, 192, 102, 0.36);
    border-radius: 10px;
    box-shadow: var(--theme-shadow-md);
    overflow: hidden;
}

html[data-theme="mechanical-clockwork"] .glass-card::before,
html[data-theme="mechanical-clockwork"] .card::before,
html[data-theme="mechanical-clockwork"] .response-card::before,
html[data-theme="mechanical-clockwork"] .agent-card::before,
html[data-theme="mechanical-clockwork"] .settings-section::before,
html[data-theme="mechanical-clockwork"] .tab-content::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(244, 192, 102, 0.18);
    border-radius: 7px;
    pointer-events: none;
}

html[data-theme="mechanical-clockwork"] .glass-card::after,
html[data-theme="mechanical-clockwork"] .card::after,
html[data-theme="mechanical-clockwork"] .response-card::after,
html[data-theme="mechanical-clockwork"] .agent-card::after,
html[data-theme="mechanical-clockwork"] .settings-section::after,
html[data-theme="mechanical-clockwork"] .tab-content::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 4px dashed rgba(244, 192, 102, 0.38);
    box-shadow: inset 0 0 0 5px rgba(18, 11, 5, 0.85);
    animation: clockGearSpin 12s linear infinite;
    pointer-events: none;
}

html[data-theme="mechanical-clockwork"] .glass-card:hover,
html[data-theme="mechanical-clockwork"] .card:hover,
html[data-theme="mechanical-clockwork"] .agent-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 227, 161, 0.58);
    box-shadow: 0 18px 48px rgba(0,0,0,0.62), 0 0 22px rgba(244, 192, 102, 0.14);
}

html[data-theme="mechanical-clockwork"] .btn,
html[data-theme="mechanical-clockwork"] .button,
html[data-theme="mechanical-clockwork"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item) {
    background: linear-gradient(145deg, #f4c066, #9a5d24 54%, #3b230e);
    border: 1px solid rgba(255, 227, 161, 0.58);
    border-radius: 7px;
    color: #1a1008;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -2px 0 rgba(0,0,0,0.35), 0 8px 18px rgba(0,0,0,0.35);
    text-shadow: 0 1px 0 rgba(255,255,255,0.28);
}

html[data-theme="mechanical-clockwork"] .btn:hover,
html[data-theme="mechanical-clockwork"] .button:hover,
html[data-theme="mechanical-clockwork"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item):hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

html[data-theme="mechanical-clockwork"] input,
html[data-theme="mechanical-clockwork"] select,
html[data-theme="mechanical-clockwork"] textarea {
    background:
        linear-gradient(145deg, rgba(18, 11, 5, 0.92), rgba(55, 33, 14, 0.88));
    border: 1px solid rgba(244, 192, 102, 0.36);
    border-radius: 6px;
    color: var(--text-primary);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.07);
}

html[data-theme="mechanical-clockwork"] input:focus,
html[data-theme="mechanical-clockwork"] select:focus,
html[data-theme="mechanical-clockwork"] textarea:focus {
    border-color: #ffe3a1;
    box-shadow: 0 0 0 3px rgba(244, 192, 102, 0.18), inset 0 2px 8px rgba(0,0,0,0.42);
    outline: none;
}

html[data-theme="mechanical-clockwork"] table {
    background: rgba(29, 18, 9, 0.82);
    border: 1px solid rgba(244, 192, 102, 0.30);
    border-radius: 10px;
    overflow: hidden;
}

html[data-theme="mechanical-clockwork"] th {
    background: linear-gradient(145deg, rgba(244, 192, 102, 0.24), rgba(85, 51, 20, 0.72));
    color: #fff1cf;
}

html[data-theme="mechanical-clockwork"] tr:hover {
    background: rgba(244, 192, 102, 0.10);
}

html[data-theme="mechanical-clockwork"] h1,
html[data-theme="mechanical-clockwork"] h2,
html[data-theme="mechanical-clockwork"] h3 {
    color: #ffe3a1;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 10px rgba(244, 192, 102, 0.10);
}

html[data-theme="mechanical-clockwork"] a:not(.pill-nav__item):not(.pill-nav__dropdown-item):not(.pill-nav-sidebar__item) {
    color: #ffe3a1;
}

@keyframes clockGearSpin {
    to { transform: rotate(360deg); }
}

@keyframes clockNavGearSpin {
    to { transform: translateY(-50%) rotate(360deg); }
}
html[data-theme="ascii-mode"] .btn,
html[data-theme="ascii-mode"] .btn-primary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: 0;
    font-family: 'JetBrains Mono', monospace !important;
}
html[data-theme="ascii-mode"] .btn::before { content: "[ "; }
html[data-theme="ascii-mode"] .btn::after  { content: " ]"; }
html[data-theme="ascii-mode"] .btn:hover {
    background: var(--color-surface-elevated);
    border-color: var(--text-primary);
}
@keyframes asciiBlink {
    0%, 49%  { opacity: 1; }
    50%, 100%{ opacity: 0; }
}

/* =============================================
   PREVIEW SWATCHES (Settings cards)
============================================= */
.theme-preview.quantum-entanglement {
    background: radial-gradient(ellipse at 30% 30%, #1a1f4a, #060818);
    position: relative;
    overflow: hidden;
}
.theme-preview.quantum-entanglement .qe-particle {
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: #a78bfa; box-shadow: 0 0 8px #a78bfa;
    animation: quantumOrbit 4s ease-in-out infinite;
}
.theme-preview.quantum-entanglement .qe-particle.qe-mirror {
    background: #ff5c8d; box-shadow: 0 0 8px #ff5c8d;
    animation: quantumOrbitMirror 4s ease-in-out infinite;
}
.theme-preview.quantum-entanglement .qe-1 { top: 20%; left: 20%; }
.theme-preview.quantum-entanglement .qe-2 { bottom: 20%; right: 20%; }
.theme-preview.quantum-entanglement .theme-preview__mini { background: rgba(13,18,48,0.85); border: 1px solid rgba(124,92,255,0.35); }
.theme-preview.quantum-entanglement .theme-preview__pill { background: #7c5cff; }
.theme-preview.quantum-entanglement .theme-preview__line { background: #9aa6e8; }

.theme-preview.liquid-mercury {
    background: linear-gradient(135deg, #232a39, #0e1117);
    position: relative;
    overflow: hidden;
}
.theme-preview.liquid-mercury .merc-blob {
    position: absolute; border-radius: 50%; filter: blur(14px); opacity: 0.7;
    background: radial-gradient(circle at 35% 35%, #e6edf6, #8d9bb0);
}
.theme-preview.liquid-mercury .merc-1 { width: 60%; height: 80%; top: -10%; left: -10%; animation: mercuryFlow1 6s ease-in-out infinite; }
.theme-preview.liquid-mercury .merc-2 { width: 50%; height: 70%; bottom: -10%; right: -10%; animation: mercuryFlow2 7s ease-in-out infinite; }
.theme-preview.liquid-mercury .theme-preview__mini { background: rgba(22,27,36,0.85); border: 1px solid rgba(200,215,235,0.25); }
.theme-preview.liquid-mercury .theme-preview__pill { background: #c9d6e8; }
.theme-preview.liquid-mercury .theme-preview__line { background: #b6c0d0; }

.theme-preview.underwater-reef {
    background: linear-gradient(180deg, #08395c 0%, #021a2e 100%);
    position: relative;
    overflow: hidden;
}
.theme-preview.underwater-reef .reef-bubble {
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(180, 240, 255, 0.7); box-shadow: 0 0 6px rgba(94,234,212,0.6);
    bottom: -10px;
    animation: reefBubble 4s linear infinite;
}
.theme-preview.underwater-reef .reef-b1 { left: 25%; animation-delay: 0s; }
.theme-preview.underwater-reef .reef-b2 { left: 55%; animation-delay: 1.2s; }
.theme-preview.underwater-reef .reef-b3 { left: 75%; animation-delay: 2.4s; }
.theme-preview.underwater-reef .theme-preview__mini { background: rgba(8,57,92,0.85); border: 1px solid rgba(120,200,230,0.32); }
.theme-preview.underwater-reef .theme-preview__pill { background: #2dd4bf; }
.theme-preview.underwater-reef .theme-preview__line { background: #8fc8e8; }

.theme-preview.bonsai-garden {
    background: linear-gradient(180deg, #f5f1e8 0%, #ece5d2 100%);
    position: relative;
    overflow: hidden;
}
.theme-preview.bonsai-garden .bonsai-svg {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 80%; height: 70%;
}
.theme-preview.bonsai-garden .bonsai-svg svg { width: 100%; height: 100%; }
.theme-preview.bonsai-garden .theme-preview__mini { background: rgba(251,248,240,0.95); border: 1px solid #b8ad92; }
.theme-preview.bonsai-garden .theme-preview__pill { background: #5b7b4f; }
.theme-preview.bonsai-garden .theme-preview__line { background: #5b5340; }

.theme-preview.volcanic-ember {
    background: radial-gradient(ellipse at 50% 100%, #ff6b35 0%, #240b08 70%);
    position: relative;
    overflow: hidden;
}
.theme-preview.volcanic-ember .ember-spark {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: #ffcc33; box-shadow: 0 0 6px #ff6b35;
    bottom: -5px;
    animation: emberRise 3.5s linear infinite;
}
.theme-preview.volcanic-ember .ember-1 { left: 30%; animation-delay: 0s; }
.theme-preview.volcanic-ember .ember-2 { left: 55%; animation-delay: 1s; }
.theme-preview.volcanic-ember .ember-3 { left: 75%; animation-delay: 2s; }
.theme-preview.volcanic-ember .theme-preview__mini { background: rgba(36,11,8,0.85); border: 1px solid rgba(255,120,60,0.38); }
.theme-preview.volcanic-ember .theme-preview__pill { background: #ff6b35; }
.theme-preview.volcanic-ember .theme-preview__line { background: #f0a878; }

.theme-preview.arctic-frost {
    background: linear-gradient(180deg, #eaf3fb 0%, #cfe2f3 100%);
    position: relative;
    overflow: hidden;
}
.theme-preview.arctic-frost .frost-flake {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: rgba(255,255,255,0.95); box-shadow: 0 0 4px rgba(180,220,255,0.8);
    top: -5px;
    animation: snowFall 4s linear infinite;
}
.theme-preview.arctic-frost .flake-1 { left: 25%; animation-delay: 0s; }
.theme-preview.arctic-frost .flake-2 { left: 55%; animation-delay: 1s; }
.theme-preview.arctic-frost .flake-3 { left: 80%; animation-delay: 2s; }
.theme-preview.arctic-frost .theme-preview__mini { background: rgba(255,255,255,0.75); border: 1px solid #a5c1d9; backdrop-filter: blur(4px); }
.theme-preview.arctic-frost .theme-preview__pill { background: #3b82f6; }
.theme-preview.arctic-frost .theme-preview__line { background: #3a5a7a; }

.theme-preview.ascii-mode {
    background: #0a0a0a;
    position: relative;
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
}
.theme-preview.ascii-mode::before {
    content: "+----------+\A|  ASCII   |\A|  M O D E |\A+----------+";
    white-space: pre;
    color: #d0d0d0;
    font-size: 0.55rem;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    line-height: 1.2;
    opacity: 0.85;
}
.theme-preview.ascii-mode .ascii-cursor {
    position: absolute; bottom: 8px; right: 8px;
    color: #d0d0d0; font-size: 0.7rem;
    animation: asciiBlink 1s steps(2) infinite;
}
.theme-preview.ascii-mode .theme-preview__mini { display: none; }

/* =============================================
   BAUHAUS WORKSHOP — primary blocks, sharp geometry
============================================= */
html[data-theme="bauhaus-workshop"],
:root[data-theme="bauhaus-workshop"] {
    --color-background: #f3eee2;
    --color-surface: #ffffff;
    --color-surface-subtle: #ebe6d8;
    --color-surface-elevated: #ffffff;
    --text-primary: #111111;
    --text-secondary: #3a3a3a;
    --text-tertiary: #6b6b6b;
    --border-light: rgba(17,17,17,0.10);
    --border-medium: rgba(17,17,17,0.30);
    --border-dark: #111111;
    --google-blue: #1f4ed8;
    --google-blue-light: #3b6df1;
    --google-blue-dark: #16357a;
    --google-blue-subtle: rgba(31,78,216,0.10);
    --google-red: #d43528;
    --google-yellow: #f7c815;
    --google-green: #1a7d3a;
    --theme-radius-md: 0px;
    --theme-radius-lg: 0px;
}
html[data-theme="bauhaus-workshop"] body {
    background: var(--color-background);
    color: var(--text-primary);
    font-family: 'Helvetica Neue', Helvetica, 'Inter', sans-serif;
}
html[data-theme="bauhaus-workshop"] .glass-card,
html[data-theme="bauhaus-workshop"] .card,
html[data-theme="bauhaus-workshop"] .response-card,
html[data-theme="bauhaus-workshop"] .agent-card,
html[data-theme="bauhaus-workshop"] .settings-section {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,241,229,0.98));
    border: 2px solid #111111;
    border-radius: 0;
    box-shadow:
        6px 6px 0 #111111,
        14px 14px 28px rgba(17,17,17,0.16);
    backdrop-filter: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
html[data-theme="bauhaus-workshop"] .glass-card:hover,
html[data-theme="bauhaus-workshop"] .card:hover {
    transform: translate(-3px, -3px);
    box-shadow:
        9px 9px 0 #111111,
        18px 18px 34px rgba(17,17,17,0.18);
}
html[data-theme="bauhaus-workshop"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item),
html[data-theme="bauhaus-workshop"] .btn,
html[data-theme="bauhaus-workshop"] .btn-primary {
    background: #f7c815;
    color: #111111;
    border: 2px solid #111111;
    border-radius: 0;
    box-shadow: 4px 4px 0 #111111;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
html[data-theme="bauhaus-workshop"] .btn:hover,
html[data-theme="bauhaus-workshop"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item):hover {
    transform: translate(-2px,-2px);
    box-shadow: 6px 6px 0 #111111;
}
html[data-theme="bauhaus-workshop"] .pill-nav {
    background:
        linear-gradient(90deg, #111111 0 16px, transparent 16px),
        linear-gradient(180deg, #fffaf0 0%, #f3eee2 100%);
    border: 3px solid #111111;
    border-radius: 0;
    box-shadow: 8px 8px 0 #111111, 16px 16px 28px rgba(17,17,17,0.18);
    gap: 0.25rem;
    padding: 0.55rem 0.8rem 0.55rem 1.15rem;
    overflow: visible;
}
html[data-theme="bauhaus-workshop"] .pill-nav__item {
    color: #111111;
    border-radius: 0;
    border: 2px solid transparent;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    transition: transform 0.10s ease, box-shadow 0.10s ease, background 0.10s ease, color 0.10s ease, border-color 0.10s ease;
}
html[data-theme="bauhaus-workshop"] .pill-nav__item:hover {
    background: #f7c815;
    color: #111111;
    border-color: #111111;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #111111;
}
html[data-theme="bauhaus-workshop"] .pill-nav__item.active {
    background: #d43528;
    color: #ffffff;
    border-color: #111111;
    box-shadow: 4px 4px 0 #111111;
}
html[data-theme="bauhaus-workshop"] .pill-nav__brand {
    border-right: 3px solid #111111;
}
html[data-theme="bauhaus-workshop"] .pill-nav__actions {
    border-left: 3px solid #111111;
}
html[data-theme="bauhaus-workshop"] .pill-nav__logo-text,
html[data-theme="bauhaus-workshop"] .pill-nav__user-name {
    color: #111111;
    font-weight: 900;
    letter-spacing: 0.02em;
}
html[data-theme="bauhaus-workshop"] .pill-nav__user-avatar {
    background: #1f4ed8;
    border: 2px solid #111111;
    border-radius: 0;
    box-shadow: 3px 3px 0 #111111;
}
html[data-theme="bauhaus-workshop"] .pill-nav__dropdown-menu {
    background: #fffaf0;
    border: 3px solid #111111;
    border-radius: 0;
    box-shadow: 7px 7px 0 #111111, 14px 14px 24px rgba(17,17,17,0.18);
    padding: 0.45rem;
}
html[data-theme="bauhaus-workshop"] .pill-nav__dropdown-item {
    color: #111111;
    border-radius: 0;
    border: 2px solid transparent;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
html[data-theme="bauhaus-workshop"] .pill-nav__dropdown-item:hover {
    background: #1f4ed8;
    color: #ffffff;
    border-color: #111111;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #111111;
}
html[data-theme="bauhaus-workshop"] input,
html[data-theme="bauhaus-workshop"] textarea,
html[data-theme="bauhaus-workshop"] select {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 0;
    color: #111111;
}

/* =============================================
   ART NOUVEAU CONSERVATORY — vines, iris, stained glass
============================================= */
html[data-theme="art-nouveau"],
:root[data-theme="art-nouveau"] {
    --color-background: #1a2a26;
    --color-surface: #243934;
    --color-surface-subtle: #2c4540;
    --color-surface-elevated: #355049;
    --text-primary: #f4ead0;
    --text-secondary: #d8c890;
    --text-tertiary: #9ba582;
    --border-light: rgba(212, 175, 55, 0.18);
    --border-medium: rgba(212, 175, 55, 0.40);
    --border-dark: rgba(212, 175, 55, 0.70);
    --google-blue: #4a7d8c;
    --google-blue-light: #6fa3b3;
    --google-blue-dark: #2e5560;
    --google-blue-subtle: rgba(74, 125, 140, 0.18);
    --google-red: #b14a5e;
    --google-yellow: #d4af37;
    --google-green: #6b8e3d;
    --theme-radius-md: 16px;
    --theme-radius-lg: 26px;
}
html[data-theme="art-nouveau"] body {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(212,175,55,0.12), transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(177,74,94,0.14), transparent 55%),
        linear-gradient(180deg, #1a2a26 0%, #0e1a17 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: 'Cormorant Garamond', Georgia, serif;
}
html[data-theme="art-nouveau"] h1,
html[data-theme="art-nouveau"] h2,
html[data-theme="art-nouveau"] h3 {
    font-style: italic;
    color: #d4af37;
    letter-spacing: 0.02em;
}
html[data-theme="art-nouveau"] .glass-card,
html[data-theme="art-nouveau"] .card,
html[data-theme="art-nouveau"] .response-card,
html[data-theme="art-nouveau"] .agent-card,
html[data-theme="art-nouveau"] .settings-section {
    background: linear-gradient(160deg, rgba(36,57,52,0.92), rgba(20,32,30,0.94));
    border: 1px solid rgba(212,175,55,0.40);
    border-radius: 26px 4px 26px 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(212,175,55,0.18);
    position: relative;
}
html[data-theme="art-nouveau"] .glass-card::before,
html[data-theme="art-nouveau"] .card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 60px; height: 60px;
    border-top: 2px solid #d4af37;
    border-left: 2px solid #d4af37;
    border-radius: 26px 0 0 0;
    pointer-events: none;
    opacity: 0.85;
}
html[data-theme="art-nouveau"] .pill-nav {
    background: linear-gradient(90deg, rgba(20,32,30,0.95), rgba(36,57,52,0.95));
    border: 1px solid rgba(212,175,55,0.50);
    box-shadow: 0 4px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(212,175,55,0.18);
}
html[data-theme="art-nouveau"] .pill-nav__item.active {
    background: linear-gradient(135deg, #d4af37, #b14a5e);
    color: #1a2a26;
    font-weight: 600;
}
html[data-theme="art-nouveau"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item),
html[data-theme="art-nouveau"] .btn-primary {
    background: linear-gradient(135deg, #d4af37, #a67c20);
    color: #1a2a26;
    border: 1px solid rgba(244,234,208,0.30);
    border-radius: 14px 4px 14px 4px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(212,175,55,0.25);
}

/* =============================================
   APOTHECARY — wooden shelves, jars, copper still
============================================= */
html[data-theme="apothecary"],
:root[data-theme="apothecary"] {
    --color-background: #1f140b;
    --color-surface: #2e1f12;
    --color-surface-subtle: #3a2818;
    --color-surface-elevated: #4a3320;
    --text-primary: #f1e3c4;
    --text-secondary: #c8a877;
    --text-tertiary: #b08a58;
    --border-light: rgba(196, 142, 78, 0.18);
    --border-medium: rgba(196, 142, 78, 0.38);
    --border-dark: rgba(196, 142, 78, 0.70);
    --google-blue: #5b8a7a;
    --google-blue-light: #7faa9a;
    --google-blue-dark: #3d6256;
    --google-blue-subtle: rgba(91, 138, 122, 0.18);
    --google-red: #b85838;
    --google-yellow: #e0a85a;
    --google-green: #7a9a52;
    --theme-radius-md: 8px;
    --theme-radius-lg: 14px;
}
html[data-theme="apothecary"] body {
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 60px),
        radial-gradient(ellipse at 75% 30%, rgba(224,168,90,0.14), transparent 55%),
        linear-gradient(180deg, #1f140b 0%, #0f0805 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: 'EB Garamond', Georgia, serif;
}
html[data-theme="apothecary"] .glass-card,
html[data-theme="apothecary"] .card,
html[data-theme="apothecary"] .content-card,
html[data-theme="apothecary"] .welcome-header,
html[data-theme="apothecary"] .stat-card,
html[data-theme="apothecary"] .response-card,
html[data-theme="apothecary"] .agent-card,
html[data-theme="apothecary"] .settings-section {
    --color-surface: #f5e7c3;
    --color-surface-subtle: rgba(91,54,24,0.10);
    --color-surface-elevated: #fff1cc;
    --text-primary: #241408;
    --text-secondary: #68451f;
    --text-tertiary: #7a5b32;
    --border-light: rgba(91,54,24,0.20);
    --border-medium: rgba(91,54,24,0.38);
    background:
        radial-gradient(ellipse at 18% 0%, rgba(255,245,210,0.35), transparent 55%),
        linear-gradient(180deg, rgba(245,231,195,0.97) 0%, rgba(224,202,160,0.96) 100%);
    color: #2c1b0d;
    border: 1px solid rgba(91,54,24,0.55);
    border-radius: 8px;
    box-shadow:
        0 6px 18px rgba(0,0,0,0.55),
        inset 0 0 0 1px rgba(196,142,78,0.30),
        inset 0 0 30px rgba(180,130,70,0.10);
}
html[data-theme="apothecary"] .card-header {
    border-bottom-color: rgba(91,54,24,0.28);
    background: linear-gradient(180deg, rgba(255,244,212,0.42), rgba(158,96,42,0.10));
}
html[data-theme="apothecary"] .settings-header,
html[data-theme="apothecary"] .settings-sidebar {
    background: linear-gradient(180deg, rgba(74,51,32,0.98), rgba(46,31,18,0.98));
    border-color: rgba(224,168,90,0.28);
}
html[data-theme="apothecary"] .settings-header h1,
html[data-theme="apothecary"] .settings-header p {
    color: #f1e3c4;
}
html[data-theme="apothecary"] .settings-sidebar .nav-item {
    color: #f1d9a8;
}
html[data-theme="apothecary"] .settings-sidebar .nav-item:hover,
html[data-theme="apothecary"] .settings-sidebar .nav-item.active {
    background: linear-gradient(180deg, #b87333, #8a4f1f);
    color: #fff3d5;
}
html[data-theme="apothecary"] .card-title,
html[data-theme="apothecary"] .activity-title,
html[data-theme="apothecary"] .upcoming-title,
html[data-theme="apothecary"] .quick-action-title,
html[data-theme="apothecary"] .empty-state-title,
html[data-theme="apothecary"] .stat-value,
html[data-theme="apothecary"] .progress-value {
    color: #241408;
}
html[data-theme="apothecary"] .card-title i,
html[data-theme="apothecary"] .empty-state-icon,
html[data-theme="apothecary"] .welcome-header::before {
    color: #8a4f1f;
}
html[data-theme="apothecary"] .stat-label,
html[data-theme="apothecary"] .stat-change,
html[data-theme="apothecary"] .activity-description,
html[data-theme="apothecary"] .activity-time,
html[data-theme="apothecary"] .upcoming-date,
html[data-theme="apothecary"] .quick-action-subtitle,
html[data-theme="apothecary"] .empty-state-text,
html[data-theme="apothecary"] .progress-label,
html[data-theme="apothecary"] .mini-stat-label {
    color: #68451f;
}
html[data-theme="apothecary"] .form-group label,
html[data-theme="apothecary"] .builder-item label,
html[data-theme="apothecary"] .text-muted,
html[data-theme="apothecary"] small {
    color: #68451f !important;
}
html[data-theme="apothecary"] input:not([type="range"]):not([type="color"]),
html[data-theme="apothecary"] select,
html[data-theme="apothecary"] textarea,
html[data-theme="apothecary"] .builder-item select {
    background: #fff4d3 !important;
    color: #241408 !important;
    border-color: rgba(91,54,24,0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
html[data-theme="apothecary"] input::placeholder,
html[data-theme="apothecary"] textarea::placeholder {
    color: #8a6a3d;
}
html[data-theme="apothecary"] .builder-item {
    background: rgba(255,244,211,0.72);
    border-color: rgba(91,54,24,0.24);
}
html[data-theme="apothecary"] .theme-card {
    background: rgba(255,244,211,0.78);
    color: #2c1b0d;
    border-color: rgba(91,54,24,0.26);
}
html[data-theme="apothecary"] .theme-name {
    color: #2c1b0d;
    font-weight: 700;
}
html[data-theme="apothecary"] .theme-card.selected .theme-name {
    color: #241408;
}
html[data-theme="apothecary"] .mini-stat,
html[data-theme="apothecary"] .upcoming-item,
html[data-theme="apothecary"] .quick-action {
    background: rgba(91,54,24,0.10);
    border: 1px solid rgba(91,54,24,0.18);
    color: #2c1b0d;
}
html[data-theme="apothecary"] .quick-action:hover,
html[data-theme="apothecary"] .upcoming-item:hover,
html[data-theme="apothecary"] .activity-item:hover {
    background: rgba(184,115,51,0.18);
    border-color: rgba(138,79,31,0.35);
}
html[data-theme="apothecary"] a:not(.pill-nav__item):not(.pill-nav__logo):not(.pill-nav__dropdown-item):not(.btn):not(.quick-action) {
    color: #5f7668;
    font-weight: 600;
}
html[data-theme="apothecary"] .pill-nav {
    background: linear-gradient(180deg, #4a3320 0%, #2e1f12 100%);
    border: 1px solid rgba(196,142,78,0.55);
    box-shadow: 0 4px 16px rgba(0,0,0,0.55), inset 0 1px 0 rgba(224,168,90,0.20);
}
html[data-theme="apothecary"] .pill-nav__item {
    color: #e0a85a;
}
html[data-theme="apothecary"] .pill-nav__item.active {
    background: linear-gradient(135deg, #b87333, #8a4f1f);
    color: #f1e3c4;
}
html[data-theme="apothecary"] .pill-nav__item:hover,
html[data-theme="apothecary"] .pill-nav__dropdown-item:hover {
    background: rgba(224,168,90,0.16);
    color: #fff0c8;
}
html[data-theme="apothecary"] .pill-nav__dropdown-menu {
    background: linear-gradient(180deg, #4a3320 0%, #2a1a0d 100%);
    border: 1px solid rgba(224,168,90,0.48);
    box-shadow: 0 10px 28px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,220,150,0.16);
}
html[data-theme="apothecary"] .pill-nav__dropdown-item {
    color: #f1d9a8;
}
html[data-theme="apothecary"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item),
html[data-theme="apothecary"] .btn-primary {
    background: linear-gradient(180deg, #b87333 0%, #8a4f1f 100%);
    color: #f1e3c4;
    border: 1px solid rgba(0,0,0,0.45);
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,200,140,0.30);
}
html[data-theme="apothecary"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item):hover,
html[data-theme="apothecary"] .btn-primary:hover {
    background: linear-gradient(180deg, #d08b47 0%, #9d5f28 100%);
    color: #fff3d5;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,220,160,0.40);
}

/* =============================================
   ORIGAMI FOLDED — paper texture, creases, geometric folds
============================================= */
html[data-theme="origami-folded"],
:root[data-theme="origami-folded"] {
    --color-background: #f5f0e6;
    --color-surface: #ffffff;
    --color-surface-subtle: #ece6d6;
    --color-surface-elevated: #ffffff;
    --text-primary: #2a2a2a;
    --text-secondary: #555555;
    --text-tertiary: #888888;
    --border-light: rgba(0,0,0,0.08);
    --border-medium: rgba(0,0,0,0.20);
    --border-dark: rgba(0,0,0,0.45);
    --google-blue: #d96c5a;
    --google-blue-light: #e9907f;
    --google-blue-dark: #a44734;
    --google-blue-subtle: rgba(217,108,90,0.14);
    --google-red: #c8553d;
    --google-yellow: #e8b54b;
    --google-green: #5a8e6a;
    --theme-radius-md: 0px;
    --theme-radius-lg: 0px;
}
html[data-theme="origami-folded"] body {
    background: var(--color-background);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}
html[data-theme="origami-folded"] .glass-card,
html[data-theme="origami-folded"] .card,
html[data-theme="origami-folded"] .response-card,
html[data-theme="origami-folded"] .agent-card,
html[data-theme="origami-folded"] .settings-section {
    background:
        linear-gradient(135deg, #ffffff 0%, #ffffff 49.8%, rgba(0,0,0,0.06) 50%, #ffffff 50.2%, #ffffff 100%);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 0;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        4px 4px 0 rgba(0,0,0,0.05),
        8px 8px 24px rgba(0,0,0,0.10);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    position: relative;
    transition: transform 0.24s cubic-bezier(.22,1,.36,1), box-shadow 0.24s ease;
}
html[data-theme="origami-folded"] .glass-card:hover,
html[data-theme="origami-folded"] .card:hover {
    transform: rotate(-0.25deg) translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        6px 6px 0 rgba(0,0,0,0.07),
        12px 12px 28px rgba(0,0,0,0.12);
}
html[data-theme="origami-folded"] .pill-nav {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.98) 47%, rgba(0,0,0,0.045) 48%, rgba(255,255,255,0.98) 50%),
        #ffffff;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 2px;
    clip-path: none;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.08), 10px 10px 22px rgba(0,0,0,0.10);
    overflow: visible;
    position: relative;
    width: min(98vw, 1560px);
    max-width: 98vw;
    gap: 0.18rem;
    padding: 0.42rem 0.48rem;
    box-sizing: border-box;
}
html[data-theme="origami-folded"] .pill-nav__brand {
    padding-right: 0.55rem;
    margin-right: 0.15rem;
    min-width: 0;
}
html[data-theme="origami-folded"] .pill-nav__logo {
    gap: 0.45rem;
}
html[data-theme="origami-folded"] .pill-nav__logo-img {
    width: 36px;
    height: 36px;
}
html[data-theme="origami-folded"] .pill-nav__logo-text {
    font-size: 1rem;
    line-height: 1;
}
html[data-theme="origami-folded"] .pill-nav__items {
    flex: 1 1 auto;
    gap: 0.05rem;
    min-width: 0;
    justify-content: center;
}
html[data-theme="origami-folded"] .pill-nav__actions {
    flex: 0 1 auto;
    min-width: 0;
    gap: 0.18rem;
    padding-left: 0.45rem;
}
html[data-theme="origami-folded"] .pill-nav::before,
html[data-theme="origami-folded"] .pill-nav::after {
    content: '';
    position: absolute;
    pointer-events: none;
}
html[data-theme="origami-folded"] .pill-nav::before {
    right: -1px;
    top: -1px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, rgba(232,181,75,0.95) 0 49%, rgba(0,0,0,0.18) 50%, rgba(255,255,255,0.95) 52%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
html[data-theme="origami-folded"] .pill-nav::after {
    left: -1px;
    bottom: -1px;
    width: 20px;
    height: 20px;
    background: linear-gradient(315deg, rgba(217,108,90,0.90) 0 49%, rgba(0,0,0,0.14) 50%, rgba(255,255,255,0.96) 52%);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}
html[data-theme="origami-folded"] .pill-nav__item {
    border-radius: 2px;
    color: #2a2a2a;
    gap: 0.25rem;
    padding: 0.42rem 0.48rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    min-width: 0;
    box-sizing: border-box;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
html[data-theme="origami-folded"] .pill-nav__item i {
    font-size: 0.82rem;
}
html[data-theme="origami-folded"] .pill-nav__item .fa-chevron-down {
    margin-left: 0.1rem !important;
    font-size: 0.58rem !important;
}
html[data-theme="origami-folded"] .pill-nav__user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 2px;
    font-size: 0.72rem;
    flex: 0 0 auto;
}
html[data-theme="origami-folded"] .pill-nav__user-name {
    display: inline-block;
    max-width: clamp(82px, 13vw, 180px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    line-height: 1;
}
html[data-theme="origami-folded"] .pill-nav__item:hover {
    background: rgba(217,108,90,0.12);
    color: #a44734;
    transform: translateY(-2px) rotate(-0.35deg);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}
html[data-theme="origami-folded"] .pill-nav__item.active {
    background: linear-gradient(135deg, #d96c5a, #c8553d);
    color: #ffffff;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.12);
}
html[data-theme="origami-folded"] .pill-nav__dropdown-menu {
    background:
        linear-gradient(135deg, #ffffff 0%, #ffffff 48%, rgba(0,0,0,0.045) 49%, #ffffff 51%),
        #ffffff;
    color: #2a2a2a;
    border: 1px solid rgba(0,0,0,0.20);
    border-radius: 2px;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.10), 12px 12px 26px rgba(0,0,0,0.14);
    clip-path: none;
    z-index: 10050;
}
html[data-theme="origami-folded"] .pill-nav__dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
html[data-theme="origami-folded"] .pill-nav__dropdown-item {
    color: #2a2a2a;
    border-radius: 2px;
}
html[data-theme="origami-folded"] .pill-nav__dropdown-item:hover {
    background: rgba(217,108,90,0.14);
    color: #a44734;
    transform: translateX(2px);
}
html[data-theme="origami-folded"] .pill-nav__dropdown-divider {
    background: rgba(0,0,0,0.12);
}
html[data-theme="origami-folded"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item),
html[data-theme="origami-folded"] .btn-primary {
    background: #d96c5a;
    color: #ffffff;
    border: 1px solid rgba(0,0,0,0.20);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    box-shadow: 3px 3px 0 rgba(0,0,0,0.10);
    font-weight: 600;
}

/* =============================================
   BONSAI WORKSHOP overrides (ID kept as bonsai-garden)
   Shoji rice-paper backdrop, clay terracotta accents.
============================================= */
html[data-theme="bonsai-garden"] .glass-card,
html[data-theme="bonsai-garden"] .card,
html[data-theme="bonsai-garden"] .response-card,
html[data-theme="bonsai-garden"] .agent-card,
html[data-theme="bonsai-garden"] .settings-section {
    background: linear-gradient(180deg, rgba(252,247,234,0.96) 0%, rgba(238,228,202,0.96) 100%);
    border: 1px solid rgba(120,80,40,0.30);
    box-shadow:
        0 4px 16px rgba(80,55,25,0.18),
        inset 0 0 0 1px rgba(180,130,70,0.10);
}
html[data-theme="bonsai-garden"] .pill-nav {
    background: linear-gradient(180deg, rgba(252,247,234,0.94), rgba(232,218,184,0.94));
    border: 1px solid rgba(120,80,40,0.35);
    box-shadow: 0 4px 14px rgba(80,55,25,0.18);
}
html[data-theme="bonsai-garden"] .pill-nav__item.active {
    background: linear-gradient(135deg, #b87333, #8a4f1f);
    color: #fcf7ea;
}

/* Compact, non-overlapping nav layout for the highly decorative themes. */
html[data-theme="origami-folded"] .pill-nav,
html[data-theme="bauhaus-workshop"] .pill-nav,
html[data-theme="bonsai-garden"] .pill-nav {
    width: calc(100vw - 1.25rem);
    max-width: 1680px;
    min-width: 0;
    box-sizing: border-box;
    flex-wrap: nowrap;
    gap: 0.2rem;
    padding: 0.4rem 0.5rem;
    overflow: visible;
}

html[data-theme="origami-folded"] .pill-nav__brand,
html[data-theme="bauhaus-workshop"] .pill-nav__brand,
html[data-theme="bonsai-garden"] .pill-nav__brand {
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 0.5rem;
    margin-right: 0.1rem;
}

html[data-theme="origami-folded"] .pill-nav__logo,
html[data-theme="bauhaus-workshop"] .pill-nav__logo,
html[data-theme="bonsai-garden"] .pill-nav__logo {
    gap: 0.42rem;
    min-width: 0;
}

html[data-theme="origami-folded"] .pill-nav__logo-img,
html[data-theme="bauhaus-workshop"] .pill-nav__logo-img,
html[data-theme="bonsai-garden"] .pill-nav__logo-img {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

html[data-theme="origami-folded"] .pill-nav__logo-text,
html[data-theme="bauhaus-workshop"] .pill-nav__logo-text,
html[data-theme="bonsai-garden"] .pill-nav__logo-text {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.98rem;
    line-height: 1;
}

html[data-theme="origami-folded"] .pill-nav__items,
html[data-theme="bauhaus-workshop"] .pill-nav__items,
html[data-theme="bonsai-garden"] .pill-nav__items {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.04rem;
    justify-content: center;
}

html[data-theme="origami-folded"] .pill-nav__dropdown,
html[data-theme="bauhaus-workshop"] .pill-nav__dropdown,
html[data-theme="bonsai-garden"] .pill-nav__dropdown,
html[data-theme="origami-folded"] .pill-nav__notif-bell,
html[data-theme="bauhaus-workshop"] .pill-nav__notif-bell,
html[data-theme="bonsai-garden"] .pill-nav__notif-bell {
    flex: 0 1 auto;
    min-width: 0;
}

html[data-theme="origami-folded"] .pill-nav__item,
html[data-theme="bauhaus-workshop"] .pill-nav__item,
html[data-theme="bonsai-garden"] .pill-nav__item {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 136px;
    gap: 0.26rem;
    padding: 0.42rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1;
    box-sizing: border-box;
}

html[data-theme="origami-folded"] .pill-nav__item > span,
html[data-theme="bauhaus-workshop"] .pill-nav__item > span,
html[data-theme="bonsai-garden"] .pill-nav__item > span {
    min-width: 0;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme="origami-folded"] .pill-nav__item i,
html[data-theme="bauhaus-workshop"] .pill-nav__item i,
html[data-theme="bonsai-garden"] .pill-nav__item i {
    font-size: 0.82rem;
    flex: 0 0 auto;
}

html[data-theme="origami-folded"] .pill-nav__item .fa-chevron-down,
html[data-theme="bauhaus-workshop"] .pill-nav__item .fa-chevron-down,
html[data-theme="bonsai-garden"] .pill-nav__item .fa-chevron-down {
    margin-left: 0.05rem !important;
    font-size: 0.56rem !important;
}

html[data-theme="origami-folded"] .pill-nav__actions,
html[data-theme="bauhaus-workshop"] .pill-nav__actions,
html[data-theme="bonsai-garden"] .pill-nav__actions {
    flex: 0 1 auto;
    min-width: 0;
    gap: 0.16rem;
    padding-left: 0.45rem;
}

html[data-theme="origami-folded"] .pill-nav__user-avatar,
html[data-theme="bauhaus-workshop"] .pill-nav__user-avatar,
html[data-theme="bonsai-garden"] .pill-nav__user-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
    flex: 0 0 auto;
}

html[data-theme="origami-folded"] .pill-nav__user-name,
html[data-theme="bauhaus-workshop"] .pill-nav__user-name,
html[data-theme="bonsai-garden"] .pill-nav__user-name {
    display: inline-block;
    max-width: clamp(58px, 8vw, 118px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    line-height: 1;
}

html[data-theme="bauhaus-workshop"] .pill-nav {
    border-width: 2px;
    box-shadow: 5px 5px 0 #111111, 12px 12px 22px rgba(17,17,17,0.16);
}

html[data-theme="bauhaus-workshop"] .pill-nav__item:hover,
html[data-theme="bauhaus-workshop"] .pill-nav__item.active,
html[data-theme="bauhaus-workshop"] .pill-nav__user-avatar {
    box-shadow: 2px 2px 0 #111111;
}

@media (max-width: 1280px) {
    html[data-theme="origami-folded"] .pill-nav__items .pill-nav__item > span,
    html[data-theme="bauhaus-workshop"] .pill-nav__items .pill-nav__item > span,
    html[data-theme="bonsai-garden"] .pill-nav__items .pill-nav__item > span,
    html[data-theme="origami-folded"] .pill-nav__user-name,
    html[data-theme="bauhaus-workshop"] .pill-nav__user-name,
    html[data-theme="bonsai-garden"] .pill-nav__user-name {
        display: none;
    }

    html[data-theme="origami-folded"] .pill-nav__item,
    html[data-theme="bauhaus-workshop"] .pill-nav__item,
    html[data-theme="bonsai-garden"] .pill-nav__item {
        max-width: 44px;
        padding-inline: 0.5rem;
    }
}

/* Final navbar reset for decorative themes: keep normal app navbar sizing/spacing; only recolor per theme. */
html[data-theme="origami-folded"] .pill-nav,
html[data-theme="bauhaus-workshop"] .pill-nav,
html[data-theme="bonsai-garden"] .pill-nav {
    width: auto;
    max-width: min(95vw, 1400px);
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    box-sizing: border-box;
    overflow: visible;
}

html[data-theme="origami-folded"] .pill-nav__brand,
html[data-theme="bauhaus-workshop"] .pill-nav__brand,
html[data-theme="bonsai-garden"] .pill-nav__brand {
    flex-shrink: 0;
    padding-right: 1rem;
    margin-right: 0;
    min-width: auto;
}

html[data-theme="origami-folded"] .pill-nav__logo,
html[data-theme="bauhaus-workshop"] .pill-nav__logo,
html[data-theme="bonsai-garden"] .pill-nav__logo {
    gap: 0.625rem;
}

html[data-theme="origami-folded"] .pill-nav__logo-img,
html[data-theme="bauhaus-workshop"] .pill-nav__logo-img,
html[data-theme="bonsai-garden"] .pill-nav__logo-img {
    width: 48px;
    height: 48px;
}

html[data-theme="origami-folded"] .pill-nav__logo-text,
html[data-theme="bauhaus-workshop"] .pill-nav__logo-text,
html[data-theme="bonsai-garden"] .pill-nav__logo-text {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    font-size: 1.125rem;
    line-height: normal;
}

html[data-theme="origami-folded"] .pill-nav__items,
html[data-theme="bauhaus-workshop"] .pill-nav__items,
html[data-theme="bonsai-garden"] .pill-nav__items {
    flex: 0 1 auto;
    min-width: 0;
    gap: 0.125rem;
    justify-content: flex-start;
}

html[data-theme="origami-folded"] .pill-nav__dropdown,
html[data-theme="bauhaus-workshop"] .pill-nav__dropdown,
html[data-theme="bonsai-garden"] .pill-nav__dropdown,
html[data-theme="origami-folded"] .pill-nav__notif-bell,
html[data-theme="bauhaus-workshop"] .pill-nav__notif-bell,
html[data-theme="bonsai-garden"] .pill-nav__notif-bell {
    flex-shrink: 0;
}

html[data-theme="origami-folded"] .pill-nav__item,
html[data-theme="bauhaus-workshop"] .pill-nav__item,
html[data-theme="bonsai-garden"] .pill-nav__item {
    flex-shrink: 0;
    max-width: none;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: normal;
    border: none;
    box-shadow: none;
    transform: none;
}

html[data-theme="origami-folded"] .pill-nav__item > span,
html[data-theme="bauhaus-workshop"] .pill-nav__item > span,
html[data-theme="bonsai-garden"] .pill-nav__item > span {
    display: inline;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

html[data-theme="origami-folded"] .pill-nav__item i,
html[data-theme="bauhaus-workshop"] .pill-nav__item i,
html[data-theme="bonsai-garden"] .pill-nav__item i {
    font-size: 0.9375rem;
}

html[data-theme="origami-folded"] .pill-nav__item .fa-chevron-down,
html[data-theme="bauhaus-workshop"] .pill-nav__item .fa-chevron-down,
html[data-theme="bonsai-garden"] .pill-nav__item .fa-chevron-down {
    margin-left: 0.25rem !important;
    font-size: 0.625rem !important;
}

html[data-theme="origami-folded"] .pill-nav__actions,
html[data-theme="bauhaus-workshop"] .pill-nav__actions,
html[data-theme="bonsai-garden"] .pill-nav__actions {
    flex-shrink: 0;
    gap: 0.5rem;
    padding-left: 0.75rem;
}

html[data-theme="origami-folded"] .pill-nav__user-avatar,
html[data-theme="bauhaus-workshop"] .pill-nav__user-avatar,
html[data-theme="bonsai-garden"] .pill-nav__user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.8125rem;
    box-shadow: none;
}

html[data-theme="origami-folded"] .pill-nav__user-name,
html[data-theme="bauhaus-workshop"] .pill-nav__user-name,
html[data-theme="bonsai-garden"] .pill-nav__user-name {
    display: inline;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.8125rem;
    line-height: normal;
}

html[data-theme="origami-folded"] .pill-nav::before,
html[data-theme="origami-folded"] .pill-nav::after {
    display: none;
}

html[data-theme="origami-folded"] .pill-nav {
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(0,0,0,0.14);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
html[data-theme="origami-folded"] .pill-nav__brand,
html[data-theme="origami-folded"] .pill-nav__actions {
    border-color: rgba(0,0,0,0.12);
}
html[data-theme="origami-folded"] .pill-nav__logo-text,
html[data-theme="origami-folded"] .pill-nav__user-name,
html[data-theme="origami-folded"] .pill-nav__item {
    color: #2a2a2a;
}
html[data-theme="origami-folded"] .pill-nav__item:hover {
    background: #ece6d6;
    color: #a44734;
    transform: none;
    box-shadow: none;
}
html[data-theme="origami-folded"] .pill-nav__item.active {
    background: #d96c5a;
    color: #ffffff;
    box-shadow: none;
}
html[data-theme="origami-folded"] .pill-nav__dropdown-menu {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
html[data-theme="origami-folded"] .pill-nav__dropdown-item {
    color: #2a2a2a;
    border-radius: 8px;
}
html[data-theme="origami-folded"] .pill-nav__dropdown-item:hover {
    background: #ece6d6;
    color: #a44734;
    transform: none;
}

html[data-theme="bauhaus-workshop"] .pill-nav {
    background: #fffaf0;
    border: 1px solid rgba(17,17,17,0.18);
    box-shadow: 0 8px 24px rgba(17,17,17,0.14);
}
html[data-theme="bauhaus-workshop"] .pill-nav__brand,
html[data-theme="bauhaus-workshop"] .pill-nav__actions {
    border-color: rgba(17,17,17,0.16);
}
html[data-theme="bauhaus-workshop"] .pill-nav__logo-text,
html[data-theme="bauhaus-workshop"] .pill-nav__user-name,
html[data-theme="bauhaus-workshop"] .pill-nav__item {
    color: #111111;
    text-transform: none;
}
html[data-theme="bauhaus-workshop"] .pill-nav__item:hover {
    background: #f7c815;
    color: #111111;
    transform: none;
    box-shadow: none;
}
html[data-theme="bauhaus-workshop"] .pill-nav__item.active {
    background: #d43528;
    color: #ffffff;
    box-shadow: none;
}
html[data-theme="bauhaus-workshop"] .pill-nav__dropdown-menu {
    background: #fffaf0;
    border: 1px solid rgba(17,17,17,0.18);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(17,17,17,0.14);
}
html[data-theme="bauhaus-workshop"] .pill-nav__dropdown-item {
    color: #111111;
    border-radius: 8px;
    text-transform: none;
}
html[data-theme="bauhaus-workshop"] .pill-nav__dropdown-item:hover {
    background: #1f4ed8;
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

html[data-theme="bonsai-garden"] .pill-nav {
    background: rgba(252,247,234,0.94);
    border: 1px solid rgba(120,80,40,0.24);
    box-shadow: 0 8px 24px rgba(80,55,25,0.14);
}
html[data-theme="bonsai-garden"] .pill-nav__brand,
html[data-theme="bonsai-garden"] .pill-nav__actions {
    border-color: rgba(120,80,40,0.18);
}
html[data-theme="bonsai-garden"] .pill-nav__logo-text,
html[data-theme="bonsai-garden"] .pill-nav__user-name,
html[data-theme="bonsai-garden"] .pill-nav__item {
    color: #3d2a18;
}
html[data-theme="bonsai-garden"] .pill-nav__item:hover {
    background: rgba(184,115,51,0.14);
    color: #8a4f1f;
    transform: none;
    box-shadow: none;
}
html[data-theme="bonsai-garden"] .pill-nav__item.active {
    background: linear-gradient(135deg, #b87333, #8a4f1f);
    color: #fcf7ea;
    box-shadow: none;
}
html[data-theme="bonsai-garden"] .pill-nav__dropdown-menu {
    background: #fcf7ea;
    border: 1px solid rgba(120,80,40,0.24);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(80,55,25,0.14);
}
html[data-theme="bonsai-garden"] .pill-nav__dropdown-item {
    color: #3d2a18;
    border-radius: 8px;
}
html[data-theme="bonsai-garden"] .pill-nav__dropdown-item:hover {
    background: rgba(184,115,51,0.14);
    color: #8a4f1f;
}

/* Keep the final nav item, divider, notification bell, and user action area cleanly separated. */
html[data-theme="origami-folded"] .pill-nav__items,
html[data-theme="bauhaus-workshop"] .pill-nav__items,
html[data-theme="bonsai-garden"] .pill-nav__items {
    margin-right: 0.5rem;
}

html[data-theme="origami-folded"] .pill-nav__items > .pill-nav__dropdown:last-child,
html[data-theme="bauhaus-workshop"] .pill-nav__items > .pill-nav__dropdown:last-child,
html[data-theme="bonsai-garden"] .pill-nav__items > .pill-nav__dropdown:last-child {
    margin-right: 0.25rem;
}

html[data-theme="origami-folded"] .pill-nav__actions,
html[data-theme="bauhaus-workshop"] .pill-nav__actions,
html[data-theme="bonsai-garden"] .pill-nav__actions {
    padding-left: 1rem;
    gap: 0.625rem;
}

html[data-theme="origami-folded"] .pill-nav__notif-bell .pill-nav__item,
html[data-theme="bauhaus-workshop"] .pill-nav__notif-bell .pill-nav__item,
html[data-theme="bonsai-garden"] .pill-nav__notif-bell .pill-nav__item {
    padding-inline: 0.65rem;
}

/* =============================================
   PREVIEW SWATCHES — new themes
============================================= */
.theme-preview.bauhaus-workshop {
    background: #f3eee2;
    position: relative;
    overflow: hidden;
}
.theme-preview.bauhaus-workshop::before {
    content: '';
    position: absolute;
    left: 6px; top: 6px;
    width: 28px; height: 28px;
    background: #d43528;
}
.theme-preview.bauhaus-workshop::after {
    content: '';
    position: absolute;
    right: 8px; top: 10px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #1f4ed8;
}
.theme-preview.bauhaus-workshop .bauhaus-tri {
    position: absolute;
    bottom: 10px; left: 14px;
    width: 0; height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 22px solid #f7c815;
}
.theme-preview.bauhaus-workshop .theme-preview__mini {
    background: #fff;
    border: 1.5px solid #111;
    box-shadow: 3px 3px 0 #111;
}
.theme-preview.bauhaus-workshop .theme-preview__pill { background: #111; }
.theme-preview.bauhaus-workshop .theme-preview__line { background: #111; }

.theme-preview.art-nouveau {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(212,175,55,0.22), transparent 55%),
        linear-gradient(180deg, #243934 0%, #0e1a17 100%);
    position: relative;
    overflow: hidden;
}
.theme-preview.art-nouveau::before {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 40px; height: 40px;
    border-top: 2px solid #d4af37;
    border-left: 2px solid #d4af37;
    border-radius: 18px 0 0 0;
}
.theme-preview.art-nouveau::after {
    content: '';
    position: absolute;
    bottom: 4px; right: 4px;
    width: 40px; height: 40px;
    border-bottom: 2px solid #d4af37;
    border-right: 2px solid #d4af37;
    border-radius: 0 0 18px 0;
}
.theme-preview.art-nouveau .nouveau-iris {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    background: radial-gradient(circle, #d4af37 0%, #b14a5e 60%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(212,175,55,0.55);
}
.theme-preview.art-nouveau .theme-preview__mini {
    background: linear-gradient(160deg, rgba(36,57,52,0.92), rgba(20,32,30,0.92));
    border: 1px solid rgba(212,175,55,0.45);
    border-radius: 14px 2px 14px 2px;
}
.theme-preview.art-nouveau .theme-preview__pill { background: linear-gradient(90deg, #d4af37, #b14a5e); }
.theme-preview.art-nouveau .theme-preview__line { background: rgba(212,175,55,0.55); }

.theme-preview.apothecary {
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 24px),
        linear-gradient(180deg, #4a3320 0%, #1f140b 100%);
    position: relative;
    overflow: hidden;
}
.theme-preview.apothecary .apo-jar {
    position: absolute;
    width: 12px; height: 18px;
    border-radius: 4px 4px 6px 6px;
    border: 1.5px solid rgba(241,227,196,0.55);
    background: linear-gradient(180deg, transparent 30%, rgba(122,154,82,0.7) 30%, rgba(91,122,52,0.85));
}
.theme-preview.apothecary .apo-jar.j1 { left: 8px; top: 16px; }
.theme-preview.apothecary .apo-jar.j2 { left: 26px; top: 18px; background: linear-gradient(180deg, transparent 35%, rgba(184,88,56,0.7) 35%, rgba(140,60,40,0.85)); }
.theme-preview.apothecary .apo-jar.j3 { left: 44px; top: 14px; background: linear-gradient(180deg, transparent 28%, rgba(224,168,90,0.7) 28%, rgba(176,124,60,0.85)); }
.theme-preview.apothecary::after {
    content: '';
    position: absolute;
    right: 10px; bottom: 10px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, #e0a85a 0%, #b87333 60%, #4a2c14 100%);
    box-shadow: 0 0 10px rgba(224,168,90,0.55);
}
.theme-preview.apothecary .theme-preview__mini {
    background: linear-gradient(180deg, rgba(241,227,196,0.94), rgba(229,212,176,0.94));
    border: 1px solid rgba(120,80,40,0.50);
}
.theme-preview.apothecary .theme-preview__pill { background: linear-gradient(90deg, #b87333, #8a4f1f); }
.theme-preview.apothecary .theme-preview__line { background: #8a4f1f; opacity: 0.55; }

.theme-preview.origami-folded {
    background:
        linear-gradient(135deg, #ffffff 0%, #ffffff 49.8%, rgba(0,0,0,0.10) 50%, #ffffff 50.2%, #ffffff 100%),
        #f5f0e6;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow: 4px 4px 0 rgba(0,0,0,0.08);
}
.theme-preview.origami-folded .origami-plane {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 22px solid #d96c5a;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.18));
}
.theme-preview.origami-folded .origami-fold {
    position: absolute;
    right: 16px; top: 16px;
    width: 26px; height: 26px;
    background: linear-gradient(135deg, #e8b54b 0%, #e8b54b 49%, rgba(0,0,0,0.18) 50%, #e8b54b 51%, #e8b54b 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.theme-preview.origami-folded .theme-preview__mini {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 0;
}
.theme-preview.origami-folded .theme-preview__pill { background: #d96c5a; }
.theme-preview.origami-folded .theme-preview__line { background: rgba(0,0,0,0.30); }

/* Bonsai Workshop preview overhaul (keep ID bonsai-garden) */
.theme-preview.bonsai-garden {
    background:
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(120,80,40,0.18) 38px 40px),
        repeating-linear-gradient(0deg,  transparent 0 28px, rgba(120,80,40,0.10) 28px 30px),
        linear-gradient(180deg, #fcf7ea 0%, #efe2c4 100%);
    position: relative;
    overflow: hidden;
}

/* =============================================
   FINAL PER-THEME NAVBARS
   Standard navbar geometry for every theme, unique colours only.
   ============================================= */

html[data-theme="sovereign-primary"] {
    --theme-nav-bg: rgba(255,255,255,0.96);
    --theme-nav-border: rgba(66,133,244,0.18);
    --theme-nav-text: #334155;
    --theme-nav-hover-bg: rgba(66,133,244,0.10);
    --theme-nav-hover-text: #1d4ed8;
    --theme-nav-active-bg: #4285f4;
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 24px rgba(66,133,244,0.14);
}

html[data-theme="sovereign-obsidian"] {
    --theme-nav-bg: rgba(12,18,28,0.94);
    --theme-nav-border: rgba(148,163,184,0.20);
    --theme-nav-text: #cbd5e1;
    --theme-nav-hover-bg: rgba(148,163,184,0.12);
    --theme-nav-hover-text: #f8fafc;
    --theme-nav-active-bg: #64748b;
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 28px rgba(0,0,0,0.38);
}

html[data-theme="liquid-glass"],
html[data-theme="glass"],
html[data-theme="glass-liquid"] {
    --theme-nav-bg: rgba(245,250,255,0.72);
    --theme-nav-border: rgba(120,170,210,0.26);
    --theme-nav-text: #1f3b52;
    --theme-nav-hover-bg: rgba(56,189,248,0.14);
    --theme-nav-hover-text: #0369a1;
    --theme-nav-active-bg: linear-gradient(135deg, #38bdf8, #818cf8);
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 10px 30px rgba(56,189,248,0.18);
}

html[data-theme="cyber-cipher"] {
    --theme-nav-bg: rgba(4,12,22,0.94);
    --theme-nav-border: rgba(0,255,180,0.28);
    --theme-nav-text: #8fffe0;
    --theme-nav-hover-bg: rgba(0,255,180,0.12);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: #00c896;
    --theme-nav-active-text: #03110d;
    --theme-nav-shadow: 0 0 24px rgba(0,255,180,0.16);
}

html[data-theme="mica-strategic"] {
    --theme-nav-bg: rgba(248,250,252,0.88);
    --theme-nav-border: rgba(71,85,105,0.16);
    --theme-nav-text: #334155;
    --theme-nav-hover-bg: rgba(71,85,105,0.08);
    --theme-nav-hover-text: #0f172a;
    --theme-nav-active-bg: #475569;
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 24px rgba(15,23,42,0.10);
}

html[data-theme="swiss-brutalist"] {
    --theme-nav-bg: #ffffff;
    --theme-nav-border: #111111;
    --theme-nav-text: #111111;
    --theme-nav-hover-bg: #eeeeee;
    --theme-nav-hover-text: #111111;
    --theme-nav-active-bg: #111111;
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 0 rgba(17,17,17,0.20);
}

html[data-theme="solaris-gold"] {
    --theme-nav-bg: rgba(36,26,10,0.94);
    --theme-nav-border: rgba(212,175,55,0.35);
    --theme-nav-text: #f6e7b0;
    --theme-nav-hover-bg: rgba(212,175,55,0.14);
    --theme-nav-hover-text: #fff7cf;
    --theme-nav-active-bg: linear-gradient(135deg, #d4af37, #a67c20);
    --theme-nav-active-text: #241a08;
    --theme-nav-shadow: 0 10px 30px rgba(212,175,55,0.18);
}

html[data-theme="paper-sketch"],
html[data-theme="sketch"] {
    --theme-nav-bg: #fffdf7;
    --theme-nav-border: rgba(44,62,80,0.28);
    --theme-nav-text: #263443;
    --theme-nav-hover-bg: rgba(44,62,80,0.08);
    --theme-nav-hover-text: #111827;
    --theme-nav-active-bg: #2c3e50;
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 18px rgba(44,62,80,0.12);
}

html[data-theme="quantum-flux"],
html[data-theme="quantum-entanglement"] {
    --theme-nav-bg: rgba(10,14,42,0.94);
    --theme-nav-border: rgba(124,92,255,0.30);
    --theme-nav-text: #c8d0ff;
    --theme-nav-hover-bg: rgba(124,92,255,0.16);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: linear-gradient(135deg, #7c5cff, #ff5c8d);
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 0 28px rgba(124,92,255,0.20);
}

html[data-theme="mono-chrome-pro"] {
    --theme-nav-bg: rgba(250,250,250,0.96);
    --theme-nav-border: rgba(0,0,0,0.16);
    --theme-nav-text: #262626;
    --theme-nav-hover-bg: #eeeeee;
    --theme-nav-hover-text: #000000;
    --theme-nav-active-bg: #111111;
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

html[data-theme="astro-foundry"] {
    --theme-nav-bg: rgba(13,20,34,0.94);
    --theme-nav-border: rgba(245,158,11,0.26);
    --theme-nav-text: #dbeafe;
    --theme-nav-hover-bg: rgba(245,158,11,0.14);
    --theme-nav-hover-text: #ffedd5;
    --theme-nav-active-bg: linear-gradient(135deg, #f59e0b, #ef4444);
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 10px 28px rgba(245,158,11,0.16);
}

html[data-theme="nebula-dream"] {
    --theme-nav-bg: rgba(30,20,56,0.88);
    --theme-nav-border: rgba(216,180,254,0.28);
    --theme-nav-text: #eadcff;
    --theme-nav-hover-bg: rgba(216,180,254,0.14);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: linear-gradient(135deg, #a78bfa, #f0abfc);
    --theme-nav-active-text: #25113d;
    --theme-nav-shadow: 0 10px 30px rgba(167,139,250,0.20);
}

html[data-theme="turing-test"] {
    --theme-nav-bg: rgba(7,16,25,0.94);
    --theme-nav-border: rgba(34,197,94,0.24);
    --theme-nav-text: #b7f7c8;
    --theme-nav-hover-bg: rgba(34,197,94,0.12);
    --theme-nav-hover-text: #ecfdf5;
    --theme-nav-active-bg: #22c55e;
    --theme-nav-active-text: #03120a;
    --theme-nav-shadow: 0 0 24px rgba(34,197,94,0.16);
}

html[data-theme="blueprint-architect"] {
    --theme-nav-bg: rgba(9,44,87,0.94);
    --theme-nav-border: rgba(147,197,253,0.28);
    --theme-nav-text: #dbeafe;
    --theme-nav-hover-bg: rgba(147,197,253,0.14);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: #60a5fa;
    --theme-nav-active-text: #082f49;
    --theme-nav-shadow: 0 8px 24px rgba(37,99,235,0.20);
}

html[data-theme="the-oracle"] {
    --theme-nav-bg: rgba(31,22,48,0.94);
    --theme-nav-border: rgba(234,179,8,0.26);
    --theme-nav-text: #f5e6b8;
    --theme-nav-hover-bg: rgba(234,179,8,0.13);
    --theme-nav-hover-text: #fff7d6;
    --theme-nav-active-bg: linear-gradient(135deg, #eab308, #7c3aed);
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 10px 30px rgba(124,58,237,0.20);
}

html[data-theme="fusion"] {
    --theme-nav-bg: rgba(255,255,255,0.96);
    --theme-nav-border: rgba(59,130,246,0.18);
    --theme-nav-text: #334155;
    --theme-nav-hover-bg: rgba(59,130,246,0.10);
    --theme-nav-hover-text: #2563eb;
    --theme-nav-active-bg: linear-gradient(135deg, #3b82f6, #ef4444);
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 24px rgba(59,130,246,0.14);
}

html[data-theme="cherry-blossom"] {
    --theme-nav-bg: rgba(255,247,250,0.96);
    --theme-nav-border: rgba(255,107,157,0.22);
    --theme-nav-text: #6b3348;
    --theme-nav-hover-bg: rgba(255,107,157,0.12);
    --theme-nav-hover-text: #d6336c;
    --theme-nav-active-bg: linear-gradient(135deg, #ff6b9d, #ff8fb4);
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 24px rgba(255,107,157,0.16);
}

html[data-theme="silver-metallic"],
html[data-theme="liquid-mercury"] {
    --theme-nav-bg: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(226,232,240,0.96));
    --theme-nav-border: rgba(100,116,139,0.28);
    --theme-nav-text: #1f2937;
    --theme-nav-hover-bg: rgba(148,163,184,0.22);
    --theme-nav-hover-text: #0f172a;
    --theme-nav-active-bg: linear-gradient(135deg, #cbd5e1, #64748b);
    --theme-nav-active-text: #0f172a;
    --theme-nav-shadow: 0 8px 24px rgba(100,116,139,0.18);
}

html[data-theme="softlight"] {
    --theme-nav-bg: rgba(255,252,248,0.94);
    --theme-nav-border: rgba(234,179,120,0.20);
    --theme-nav-text: #6b4b3a;
    --theme-nav-hover-bg: rgba(255,200,150,0.16);
    --theme-nav-hover-text: #9a4f2f;
    --theme-nav-active-bg: linear-gradient(135deg, #f7b267, #f79d9d);
    --theme-nav-active-text: #3a1f12;
    --theme-nav-shadow: 0 8px 24px rgba(247,178,103,0.16);
}

html[data-theme="ghibli-forest"] {
    --theme-nav-bg: rgba(240,249,235,0.94);
    --theme-nav-border: rgba(65,112,72,0.22);
    --theme-nav-text: #294b2f;
    --theme-nav-hover-bg: rgba(95,155,95,0.14);
    --theme-nav-hover-text: #1f6b35;
    --theme-nav-active-bg: linear-gradient(135deg, #5b8f5a, #9fbd73);
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 24px rgba(65,112,72,0.16);
}

html[data-theme="underwater-reef"] {
    --theme-nav-bg: rgba(7,44,63,0.88);
    --theme-nav-border: rgba(125,211,252,0.26);
    --theme-nav-text: #c8f5ff;
    --theme-nav-hover-bg: rgba(125,211,252,0.14);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: linear-gradient(135deg, #06b6d4, #14b8a6);
    --theme-nav-active-text: #042f3a;
    --theme-nav-shadow: 0 10px 28px rgba(6,182,212,0.18);
}

html[data-theme="bonsai-garden"] {
    --theme-nav-bg: rgba(252,247,234,0.94);
    --theme-nav-border: rgba(120,80,40,0.24);
    --theme-nav-text: #3d2a18;
    --theme-nav-hover-bg: rgba(184,115,51,0.14);
    --theme-nav-hover-text: #8a4f1f;
    --theme-nav-active-bg: linear-gradient(135deg, #b87333, #8a4f1f);
    --theme-nav-active-text: #fcf7ea;
    --theme-nav-shadow: 0 8px 24px rgba(80,55,25,0.14);
}

html[data-theme="mechanical-clockwork"] {
    --theme-nav-bg: rgba(31,22,13,0.94);
    --theme-nav-border: rgba(212,163,86,0.34);
    --theme-nav-text: #f2d39a;
    --theme-nav-hover-bg: rgba(212,163,86,0.14);
    --theme-nav-hover-text: #fff0c6;
    --theme-nav-active-bg: linear-gradient(135deg, #d4a356, #7a4a1f);
    --theme-nav-active-text: #160d05;
    --theme-nav-shadow: 0 10px 28px rgba(212,163,86,0.16);
}

html[data-theme="bauhaus-workshop"] {
    --theme-nav-bg: #fffaf0;
    --theme-nav-border: rgba(17,17,17,0.18);
    --theme-nav-text: #111111;
    --theme-nav-hover-bg: #f7c815;
    --theme-nav-hover-text: #111111;
    --theme-nav-active-bg: #d43528;
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 24px rgba(17,17,17,0.14);
}

html[data-theme="art-nouveau"] {
    --theme-nav-bg: rgba(20,32,30,0.94);
    --theme-nav-border: rgba(212,175,55,0.34);
    --theme-nav-text: #f4ead0;
    --theme-nav-hover-bg: rgba(212,175,55,0.14);
    --theme-nav-hover-text: #fff6d6;
    --theme-nav-active-bg: linear-gradient(135deg, #d4af37, #b14a5e);
    --theme-nav-active-text: #1a2a26;
    --theme-nav-shadow: 0 10px 28px rgba(0,0,0,0.32);
}

html[data-theme="apothecary"] {
    --theme-nav-bg: linear-gradient(180deg, #4a3320, #2e1f12);
    --theme-nav-border: rgba(196,142,78,0.55);
    --theme-nav-text: #e0a85a;
    --theme-nav-hover-bg: rgba(224,168,90,0.16);
    --theme-nav-hover-text: #fff0c8;
    --theme-nav-active-bg: linear-gradient(135deg, #b87333, #8a4f1f);
    --theme-nav-active-text: #f1e3c4;
    --theme-nav-shadow: 0 8px 24px rgba(0,0,0,0.42);
}

html[data-theme="origami-folded"] {
    --theme-nav-bg: rgba(255,255,255,0.94);
    --theme-nav-border: rgba(0,0,0,0.14);
    --theme-nav-text: #2a2a2a;
    --theme-nav-hover-bg: #ece6d6;
    --theme-nav-hover-text: #a44734;
    --theme-nav-active-bg: #d96c5a;
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

html[data-theme="terminal"] {
    --theme-nav-bg: rgba(13,17,23,0.96);
    --theme-nav-border: rgba(57,255,20,0.35);
    --theme-nav-text: #c9d1d9;
    --theme-nav-hover-bg: rgba(57,255,20,0.12);
    --theme-nav-hover-text: #39ff14;
    --theme-nav-active-bg: #39ff14;
    --theme-nav-active-text: #0d1117;
    --theme-nav-shadow: 0 0 22px rgba(57,255,20,0.14);
}

html[data-theme="retro"],
html[data-theme="neon"],
html[data-theme="vaporwave"] {
    --theme-nav-bg: rgba(26,26,46,0.94);
    --theme-nav-border: rgba(255,107,203,0.34);
    --theme-nav-text: #f9d5ff;
    --theme-nav-hover-bg: rgba(255,107,203,0.14);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: linear-gradient(135deg, #ff6bcb, #e94560);
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 0 24px rgba(255,107,203,0.18);
}

html[data-theme="frosted"] {
    --theme-nav-bg: rgba(255,255,255,0.74);
    --theme-nav-border: rgba(147,197,253,0.26);
    --theme-nav-text: #1e3a5f;
    --theme-nav-hover-bg: rgba(147,197,253,0.18);
    --theme-nav-hover-text: #1d4ed8;
    --theme-nav-active-bg: #60a5fa;
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 8px 24px rgba(96,165,250,0.16);
}

html[data-theme="cosmos"] {
    --theme-nav-bg: rgba(21,24,48,0.94);
    --theme-nav-border: rgba(129,140,248,0.30);
    --theme-nav-text: #e0e7ff;
    --theme-nav-hover-bg: rgba(129,140,248,0.14);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: linear-gradient(135deg, #818cf8, #6366f1);
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 10px 28px rgba(129,140,248,0.18);
}

html[data-theme="molten"] {
    --theme-nav-bg: rgba(45,10,10,0.94);
    --theme-nav-border: rgba(255,69,0,0.34);
    --theme-nav-text: #ffddd2;
    --theme-nav-hover-bg: rgba(255,69,0,0.14);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: linear-gradient(135deg, #ff4500, #ff8c00);
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 10px 28px rgba(255,69,0,0.18);
}

html[data-theme="prism"] {
    --theme-nav-bg: rgba(15,20,35,0.90);
    --theme-nav-border: rgba(167,139,250,0.32);
    --theme-nav-text: #f3f4f6;
    --theme-nav-hover-bg: rgba(167,139,250,0.14);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: linear-gradient(135deg, #a78bfa, #34d399, #fbbf24);
    --theme-nav-active-text: #111827;
    --theme-nav-shadow: 0 10px 30px rgba(167,139,250,0.18);
}

html[data-theme] .pill-nav {
    width: auto;
    max-width: min(95vw, 1400px);
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    background: var(--theme-nav-bg, var(--color-surface));
    border: 1px solid var(--theme-nav-border, var(--border-light));
    box-shadow: var(--theme-nav-shadow, var(--theme-shadow-lg));
    overflow: visible;
}

html[data-theme] .pill-nav__brand {
    flex-shrink: 0;
    padding-right: 1rem;
    margin-right: 0;
    border-right: 1px solid var(--theme-nav-border, var(--border-light));
}

html[data-theme] .pill-nav__actions {
    flex-shrink: 0;
    gap: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--theme-nav-border, var(--border-light));
}

html[data-theme] .pill-nav__items {
    flex: 0 1 auto;
    gap: 0.125rem;
    margin-right: 0;
    justify-content: flex-start;
}

html[data-theme] .pill-nav__logo-img {
    width: 48px;
    height: 48px;
}

html[data-theme] .pill-nav__logo-text,
html[data-theme] .pill-nav__user-name,
html[data-theme] .pill-nav__item {
    color: var(--theme-nav-text, var(--text-secondary));
}

html[data-theme] .pill-nav__logo-text {
    font-size: 1.125rem;
}

html[data-theme] .pill-nav__item {
    flex-shrink: 0;
    max-width: none;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: normal;
    border: none;
    box-shadow: none;
    text-transform: none;
    transform: none;
}

html[data-theme] .pill-nav__item > span {
    display: inline !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap;
}

html[data-theme] .pill-nav__item i {
    font-size: 0.9375rem;
}

html[data-theme] .pill-nav__item .fa-chevron-down {
    margin-left: 0.25rem !important;
    font-size: 0.625rem !important;
}

html[data-theme] .pill-nav__item:hover {
    background: var(--theme-nav-hover-bg, var(--color-surface-subtle));
    color: var(--theme-nav-hover-text, var(--text-primary));
    box-shadow: none;
    transform: none;
}

html[data-theme] .pill-nav__item.active {
    background: var(--theme-nav-active-bg, var(--google-blue-subtle));
    color: var(--theme-nav-active-text, var(--google-blue));
    box-shadow: none;
}

html[data-theme] .pill-nav__user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--theme-nav-active-bg, var(--google-blue));
    color: var(--theme-nav-active-text, #ffffff);
    font-size: 0.8125rem;
    box-shadow: none;
}

html[data-theme] .pill-nav__dropdown-menu {
    background: var(--theme-nav-bg, var(--color-surface-elevated));
    border: 1px solid var(--theme-nav-border, var(--border-light));
    border-radius: 12px;
    box-shadow: var(--theme-nav-shadow, 0 4px 12px rgba(0,0,0,0.15));
}

html[data-theme] .pill-nav__dropdown-item {
    color: var(--theme-nav-text, var(--text-secondary));
    border-radius: 8px;
    text-transform: none;
}

html[data-theme] .pill-nav__dropdown-item:hover { 
    background: var(--theme-nav-hover-bg, var(--color-surface-subtle)); 
    color: var(--theme-nav-hover-text, var(--text-primary)); 
    transform: none; 
    box-shadow: none; 
}

/* Origami theme: navbar spacing polish */
/* Let the navbar grow as wide as it needs so all sections fit without overlap. */
html[data-theme="origami-folded"] .pill-nav {
    width: max-content;
    max-width: 98vw;
    min-width: min(96vw, 1320px);
    gap: 0.85rem;
    padding: 0.65rem 1.35rem;
    flex-wrap: nowrap;
}

html[data-theme="origami-folded"] .pill-nav__brand,
html[data-theme="origami-folded"] .pill-nav__items,
html[data-theme="origami-folded"] .pill-nav__actions,
html[data-theme="origami-folded"] .pill-nav__item,
html[data-theme="origami-folded"] .pill-nav__dropdown,
html[data-theme="origami-folded"] .pill-nav__notif-bell,
html[data-theme="origami-folded"] .pill-nav__user-button {
    flex-shrink: 0;
}

/* Brand: extra breathing room before the divider */
html[data-theme="origami-folded"] .pill-nav__brand {
    padding-right: 1.35rem;
    margin-right: 0.9rem;
    gap: 0.65rem;
}

/* Items: clear separation between each entry */
html[data-theme="origami-folded"] .pill-nav__items {
    gap: 0.55rem;
    margin-right: 1.15rem;
}

html[data-theme="origami-folded"] .pill-nav__item {
    padding: 0.5rem 0.9rem;
    gap: 0.5rem;
}

/* Actions: push the bell well clear of the last nav item so the
   notification badge can't overlap "Dev Tools". */
html[data-theme="origami-folded"] .pill-nav__actions {
    padding-left: 1.7rem;
    gap: 1.05rem;
}

/* Notification bell: give the absolutely-positioned badge room */
html[data-theme="origami-folded"] .pill-nav__notif-bell {
    margin-left: 0.5rem;
    overflow: visible;
}

html[data-theme="origami-folded"] .pill-nav__notif-bell .pill-nav__item {
    padding: 0.5rem 0.75rem;
}

/* User button: constrain long emails so the navbar stays balanced */
html[data-theme="origami-folded"] .pill-nav__user-button {
    gap: 0.55rem;
    padding: 0.35rem 0.85rem 0.35rem 0.4rem;
}

html[data-theme="origami-folded"] .pill-nav__user-name {
    margin-left: 0.25rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme="bauhaus"] .pill-nav,
html[data-theme="bonsai-garden"] .pill-nav {
    width: max-content;
    max-width: 98vw;
    gap: 0.7rem;
    padding: 0.6rem 1.1rem;
    flex-wrap: nowrap;
}

html[data-theme="bauhaus"] .pill-nav__brand,
html[data-theme="bauhaus"] .pill-nav__items,
html[data-theme="bauhaus"] .pill-nav__actions,
html[data-theme="bauhaus"] .pill-nav__item,
html[data-theme="bauhaus"] .pill-nav__dropdown,
html[data-theme="bauhaus"] .pill-nav__notif-bell,
html[data-theme="bauhaus"] .pill-nav__user-button,
html[data-theme="bonsai-garden"] .pill-nav__brand,
html[data-theme="bonsai-garden"] .pill-nav__items,
html[data-theme="bonsai-garden"] .pill-nav__actions,
html[data-theme="bonsai-garden"] .pill-nav__item,
html[data-theme="bonsai-garden"] .pill-nav__dropdown,
html[data-theme="bonsai-garden"] .pill-nav__notif-bell,
html[data-theme="bonsai-garden"] .pill-nav__user-button {
    flex-shrink: 0;
}

html[data-theme="bauhaus"] .pill-nav__brand,
html[data-theme="bonsai-garden"] .pill-nav__brand {
    padding-right: 1.15rem;
    margin-right: 0.65rem;
}

html[data-theme="bauhaus"] .pill-nav__items,
html[data-theme="bonsai-garden"] .pill-nav__items {
    gap: 0.45rem;
    margin-right: 0.85rem;
}

html[data-theme="bauhaus"] .pill-nav__item,
html[data-theme="bonsai-garden"] .pill-nav__item {
    padding: 0.5rem 0.85rem;
    gap: 0.45rem;
}

html[data-theme="bauhaus"] .pill-nav__actions,
html[data-theme="bonsai-garden"] .pill-nav__actions {
    padding-left: 1.3rem;
    gap: 0.9rem;
}

html[data-theme="bauhaus"] .pill-nav__notif-bell,
html[data-theme="bonsai-garden"] .pill-nav__notif-bell {
    margin-left: 0.4rem;
    overflow: visible;
}

html[data-theme="bauhaus"] .pill-nav__notif-bell .pill-nav__item,
html[data-theme="bonsai-garden"] .pill-nav__notif-bell .pill-nav__item {
    padding: 0.5rem 0.7rem;
}

html[data-theme="bauhaus"] .pill-nav__user-button,
html[data-theme="bonsai-garden"] .pill-nav__user-button {
    gap: 0.5rem;
    padding: 0.35rem 0.8rem 0.35rem 0.4rem;
}

html[data-theme="bauhaus"] .pill-nav__user-name,
html[data-theme="bonsai-garden"] .pill-nav__user-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme="bauhaus"] .pill-nav,
html[data-theme="sketch"] .pill-nav {
    width: max-content;
    min-width: min(96vw, 1320px);
    max-width: 98vw;
    gap: 0.8rem;
    padding: 0.65rem 1.25rem;
    flex-wrap: nowrap;
}

html[data-theme="sketch"] .pill-nav__brand,
html[data-theme="sketch"] .pill-nav__items,
html[data-theme="sketch"] .pill-nav__actions,
html[data-theme="sketch"] .pill-nav__item,
html[data-theme="sketch"] .pill-nav__dropdown,
html[data-theme="sketch"] .pill-nav__notif-bell,
html[data-theme="sketch"] .pill-nav__user-button {
    flex-shrink: 0;
}

html[data-theme="bauhaus"] .pill-nav__brand,
html[data-theme="sketch"] .pill-nav__brand {
    padding-right: 1.3rem;
    margin-right: 0.8rem;
}

html[data-theme="bauhaus"] .pill-nav__items,
html[data-theme="sketch"] .pill-nav__items {
    gap: 0.5rem;
    margin-right: 1rem;
}

html[data-theme="bauhaus"] .pill-nav__item,
html[data-theme="sketch"] .pill-nav__item {
    padding: 0.5rem 0.9rem;
    gap: 0.5rem;
}

html[data-theme="bauhaus"] .pill-nav__actions,
html[data-theme="sketch"] .pill-nav__actions {
    padding-left: 1.45rem;
    gap: 1rem;
}

html[data-theme="bauhaus"] .pill-nav__notif-bell,
html[data-theme="sketch"] .pill-nav__notif-bell {
    margin-left: 0.45rem;
    overflow: visible;
}

html[data-theme="bauhaus"] .pill-nav__notif-bell .pill-nav__item,
html[data-theme="sketch"] .pill-nav__notif-bell .pill-nav__item {
    padding: 0.5rem 0.75rem;
}

html[data-theme="bauhaus"] .pill-nav__user-button,
html[data-theme="sketch"] .pill-nav__user-button {
    gap: 0.55rem;
    padding: 0.35rem 0.85rem 0.35rem 0.4rem;
}

html[data-theme="bauhaus"] .pill-nav__user-name,
html[data-theme="sketch"] .pill-nav__user-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bauhaus needs extra room so Dev Tools hover never collides with the notification bell. */
html[data-theme="bauhaus"] .pill-nav {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
    min-width: 0;
    gap: 1rem;
    padding-inline: 1.4rem;
}

html[data-theme="bauhaus"] .pill-nav__items {
    gap: 0.55rem;
    margin-right: 1.75rem;
}

html[data-theme="bauhaus"] .pill-nav__actions {
    padding-left: 2rem;
    gap: 1.1rem;
}

html[data-theme="bauhaus"] .pill-nav__notif-bell {
    margin-left: 0.75rem;
}

/* Sketch theme: keep the profile section readable on the dark active pill. */
html[data-theme="sketch"] .pill-nav__actions .pill-nav__dropdown > .pill-nav__item {
    background: #2c3e50;
    color: #ffffff;
    border: 1px solid rgba(44,62,80,0.45);
}

html[data-theme="sketch"] .pill-nav__actions .pill-nav__dropdown > .pill-nav__item:hover,
html[data-theme="sketch"] .pill-nav__actions .pill-nav__dropdown > .pill-nav__item.active {
    background: #263443;
    color: #ffffff;
}

html[data-theme="sketch"] .pill-nav__actions .pill-nav__dropdown > .pill-nav__item .pill-nav__user-name,
html[data-theme="sketch"] .pill-nav__actions .pill-nav__dropdown > .pill-nav__item .fa-chevron-down {
    color: #ffffff !important;
}

html[data-theme="sketch"] .pill-nav__actions .pill-nav__dropdown > .pill-nav__item .pill-nav__user-avatar {
    background: #ffffff;
    color: #2c3e50;
    border: 1px solid rgba(255,255,255,0.7);
}

/* =============================================
   FIX: Liquid Mercury & Glass Liquid — navbar profile contrast
============================================= */

/* Glass Liquid: dark frosted nav, needs light readable profile text */
html[data-theme="glass-liquid"] {
    --theme-nav-bg: rgba(15, 23, 42, 0.55);
    --theme-nav-border: rgba(148, 197, 255, 0.30);
    --theme-nav-text: #e2e8f0;
    --theme-nav-hover-bg: rgba(56, 189, 248, 0.18);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: linear-gradient(135deg, #38bdf8, #818cf8);
    --theme-nav-active-text: #0b1220;
    --theme-nav-shadow: 0 8px 24px rgba(56, 189, 248, 0.20);
}

html[data-theme="glass-liquid"] .pill-nav__user-name,
html[data-theme="glass-liquid"] .pill-nav__logo-text {
    color: #f1f5f9 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

html[data-theme="glass-liquid"] .pill-nav__actions .pill-nav__item,
html[data-theme="glass-liquid"] .pill-nav__actions .pill-nav__item .fa-chevron-down,
html[data-theme="glass-liquid"] .pill-nav__actions .pill-nav__item i {
    color: #f1f5f9 !important;
}

html[data-theme="glass-liquid"] .pill-nav__user-avatar {
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 4px 12px rgba(56, 189, 248, 0.35);
}

/* Liquid Mercury: increase nav/dropdown contrast on the metallic shell */
html[data-theme="liquid-mercury"] .pill-nav {
    background: linear-gradient(180deg, rgba(28, 33, 45, 0.92), rgba(18, 22, 31, 0.94)) !important;
    border-color: rgba(214, 224, 238, 0.14) !important;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="liquid-mercury"] .pill-nav__logo-text,
html[data-theme="liquid-mercury"] .pill-nav__user-name,
html[data-theme="liquid-mercury"] .pill-nav__item,
html[data-theme="liquid-mercury"] .pill-nav__item i,
html[data-theme="liquid-mercury"] .pill-nav__item .fa-chevron-down {
    color: #e7edf6 !important;
    text-shadow: none;
}

html[data-theme="liquid-mercury"] .pill-nav__item:hover {
    background: rgba(214, 224, 238, 0.10) !important;
    color: #ffffff !important;
}

html[data-theme="liquid-mercury"] .pill-nav__item:hover i,
html[data-theme="liquid-mercury"] .pill-nav__item:hover .fa-chevron-down {
    color: #ffffff !important;
}

html[data-theme="liquid-mercury"] .pill-nav__item.active {
    background: linear-gradient(135deg, rgba(214, 224, 238, 0.22), rgba(141, 155, 176, 0.24)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(201, 214, 232, 0.18) !important;
}

html[data-theme="liquid-mercury"] .pill-nav__item.active i,
html[data-theme="liquid-mercury"] .pill-nav__item.active .fa-chevron-down {
    color: #ffffff !important;
}

html[data-theme="liquid-mercury"] .pill-nav__dropdown-menu {
    background: linear-gradient(180deg, rgba(30, 36, 48, 0.96), rgba(20, 24, 34, 0.98)) !important;
    border-color: rgba(214, 224, 238, 0.16) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

html[data-theme="liquid-mercury"] .pill-nav__dropdown-item,
html[data-theme="liquid-mercury"] .pill-nav__dropdown-menu form button.pill-nav__dropdown-item {
    color: #e7edf6 !important;
}

html[data-theme="liquid-mercury"] .pill-nav__dropdown-item i,
html[data-theme="liquid-mercury"] .pill-nav__dropdown-menu form button.pill-nav__dropdown-item i {
    color: #c9d6e8 !important;
}

html[data-theme="liquid-mercury"] .pill-nav__dropdown-item:hover,
html[data-theme="liquid-mercury"] .pill-nav__dropdown-menu form button.pill-nav__dropdown-item:hover {
    background: rgba(214, 224, 238, 0.10) !important;
    color: #ffffff !important;
}

html[data-theme="liquid-mercury"] .pill-nav__dropdown-divider {
    background: rgba(214, 224, 238, 0.12) !important;
}

html[data-theme="liquid-mercury"] .temp-theme-switcher {
    background: rgba(22, 27, 36, 0.92) !important;
    border-color: rgba(214, 224, 238, 0.14) !important;
}

html[data-theme="liquid-mercury"] .temp-theme-switcher__label {
    color: #d7e0ec !important;
}

html[data-theme="liquid-mercury"] .temp-theme-switcher__select {
    background: linear-gradient(180deg, rgba(35, 42, 57, 0.98), rgba(26, 32, 44, 0.98)) !important;
    color: #f3f7fc !important;
    border-color: rgba(214, 224, 238, 0.18) !important;
}

html[data-theme="liquid-mercury"] .temp-theme-switcher__select option {
    background: #1a2030;
    color: #f3f7fc;
}

html[data-theme="liquid-mercury"] .pill-nav__user-avatar {
    background: linear-gradient(135deg, #475569, #1e293b);
    color: #f8fafc !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 4px 12px rgba(15, 23, 42, 0.30);
}

/* =============================================
   NEW THEME: Crystal Glass — smoked grey premium frosted glass
   Cool gunmetal/slate palette, deep frosted blur, refractive accents.
============================================= */
html[data-theme="crystal-glass"],
:root[data-theme="crystal-glass"] {
    --color-background: #1c2230;
    --color-surface: rgba(60, 72, 92, 0.42);
    --color-surface-subtle: rgba(60, 72, 92, 0.28);
    --color-surface-elevated: rgba(80, 92, 112, 0.55);
    --text-primary: #eef2f8;
    --text-secondary: #c4cdd9;
    --text-tertiary: #8b97a8;
    --border-light: rgba(200, 215, 235, 0.14);
    --border-medium: rgba(200, 215, 235, 0.24);
    --border-dark: rgba(200, 215, 235, 0.40);
    --google-blue: #7aa2d8;
    --google-blue-light: #9fc0e8;
    --google-blue-dark: #4a6b94;
    --google-blue-subtle: rgba(122, 162, 216, 0.14);
    --google-red: #d98a8a;
    --google-yellow: #e0c895;
    --google-green: #8cc9a8;
    --theme-radius-md: 16px;
    --theme-radius-lg: 24px;
    --theme-blur: 24px;
    --theme-saturation: 160%;
    --theme-shadow-md: 0 18px 48px rgba(8, 12, 22, 0.45);
    --theme-shadow-lg: 0 32px 72px rgba(8, 12, 22, 0.55);
}

html[data-theme="crystal-glass"] body {
    background:
        radial-gradient(circle at 18% 22%, rgba(140, 165, 200, 0.30), transparent 55%),
        radial-gradient(circle at 82% 78%, rgba(110, 130, 165, 0.35), transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(180, 195, 220, 0.10), transparent 70%),
        linear-gradient(180deg, #1a1f2c 0%, #232a38 45%, #1c2230 100%);
    background-attachment: fixed;
    color: var(--text-primary);
}

html[data-theme="crystal-glass"] {
    --theme-nav-bg: rgba(40, 48, 62, 0.55);
    --theme-nav-border: rgba(200, 215, 235, 0.22);
    --theme-nav-text: #eef2f8;
    --theme-nav-hover-bg: rgba(200, 215, 235, 0.10);
    --theme-nav-hover-text: #ffffff;
    --theme-nav-active-bg: linear-gradient(135deg, rgba(180, 200, 230, 0.85), rgba(140, 160, 190, 0.85));
    --theme-nav-active-text: #141821;
    --theme-nav-shadow: 0 14px 38px rgba(8, 12, 22, 0.55);
}

html[data-theme="crystal-glass"] .pill-nav {
    background: rgba(40, 48, 62, 0.45) !important;
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid rgba(200, 215, 235, 0.22) !important;
    box-shadow:
        0 18px 50px rgba(8, 12, 22, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="crystal-glass"] .glass-card,
html[data-theme="crystal-glass"] .card,
html[data-theme="crystal-glass"] .hero-panel {
    position: relative;
    background:
        linear-gradient(140deg, rgba(90, 105, 130, 0.40), rgba(50, 60, 78, 0.55)) !important;
    border: 1px solid rgba(200, 215, 235, 0.20) !important;
    border-radius: var(--theme-radius-lg);
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    box-shadow:
        0 22px 60px rgba(8, 12, 22, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    overflow: hidden;
    color: var(--text-primary);
}

html[data-theme="crystal-glass"] .glass-card::before,
html[data-theme="crystal-glass"] .card::before,
html[data-theme="crystal-glass"] .hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.0) 30%,
        rgba(255, 255, 255, 0.0) 70%,
        rgba(140, 170, 210, 0.12) 100%);
    pointer-events: none;
}

html[data-theme="crystal-glass"] .glass-card::after,
html[data-theme="crystal-glass"] .card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(220, 235, 255, 0.45),
        rgba(255, 255, 255, 0.0) 30%,
        rgba(255, 255, 255, 0.0) 70%,
        rgba(140, 170, 210, 0.40));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

html[data-theme="crystal-glass"] .pill-nav__user-avatar {
    background: linear-gradient(135deg, #9fc0e8, #6f8aae);
    color: #141821 !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.25),
        0 6px 20px rgba(8, 12, 22, 0.55);
}

html[data-theme="crystal-glass"] .btn-primary,
html[data-theme="crystal-glass"] .btn.btn-primary {
    background: linear-gradient(135deg, rgba(180, 200, 230, 0.85), rgba(120, 140, 175, 0.85));
    border: 1px solid rgba(220, 235, 255, 0.35);
    color: #141821;
    font-weight: 600;
    box-shadow:
        0 10px 28px rgba(8, 12, 22, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
}

html[data-theme="crystal-glass"] .btn-primary:hover,
html[data-theme="crystal-glass"] .btn.btn-primary:hover {
    background: linear-gradient(135deg, rgba(210, 225, 245, 0.95), rgba(150, 170, 200, 0.95));
    box-shadow:
        0 14px 36px rgba(8, 12, 22, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transform: translateY(-1px);
}

html[data-theme="crystal-glass"] h1,
html[data-theme="crystal-glass"] .display-1,
html[data-theme="crystal-glass"] .display-2,
html[data-theme="crystal-glass"] .hero-title {
    background: linear-gradient(135deg, #ffffff 0%, #c4d4ea 50%, #8aa0c0 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: 0 0 28px rgba(180, 200, 230, 0.18);
}

html[data-theme="crystal-glass"] a {
    color: #c4d4ea;
}

html[data-theme="crystal-glass"] a:hover {
    color: #ffffff;
}

html.shader-bg-active[data-theme="crystal-glass"] body {
    background: transparent !important;
}

/* =============================================
   NEW THEME: IATFusion — high-tech cyber edition
   Dark holographic surface, neon brand-color glow (red / yellow / blue)
   and a GPU-rendered shader background driven by theme-shaders.js.
============================================= */
html[data-theme="iatfusion"],
:root[data-theme="iatfusion"] {
    --color-background: #05070f;
    --color-surface: rgba(18, 24, 48, 0.62);
    --color-surface-subtle: rgba(14, 20, 42, 0.55);
    --color-surface-elevated: rgba(24, 32, 60, 0.78);
    --text-primary: #eef2ff;
    --text-secondary: #b8c4e6;
    --text-tertiary: #8b97c2;
    --border-light: rgba(120, 160, 255, 0.18);
    --border-medium: rgba(120, 160, 255, 0.32);
    --border-dark: rgba(120, 160, 255, 0.55);
    --iatfusion-red: #ff3d57;
    --iatfusion-yellow: #ffd23f;
    --iatfusion-blue: #4c8dff;
    --iatfusion-cyan: #5ce1ff;
    --google-blue: var(--iatfusion-blue);
    --google-blue-light: #7fb0ff;
    --google-blue-dark: #1e3a8a;
    --google-blue-subtle: rgba(76, 141, 255, 0.18);
    --google-red: var(--iatfusion-red);
    --google-yellow: var(--iatfusion-yellow);
    --google-green: #10e0a3;
    --theme-radius-md: 14px;
    --theme-radius-lg: 22px;
    --theme-shadow-md: 0 12px 36px rgba(76, 141, 255, 0.28);
    --theme-shadow-lg: 0 24px 70px rgba(76, 141, 255, 0.35);
}

html[data-theme="iatfusion"] body {
    background:
        radial-gradient(circle at 12% 18%, rgba(76, 141, 255, 0.22), transparent 55%),
        radial-gradient(circle at 88% 22%, rgba(255, 210, 63, 0.16), transparent 55%),
        radial-gradient(circle at 50% 95%, rgba(255, 61, 87, 0.18), transparent 60%),
        linear-gradient(180deg, #05070f 0%, #0a0f24 55%, #05070f 100%);
    background-attachment: fixed;
    color: var(--text-primary);
}

html[data-theme="iatfusion"] {
    --theme-nav-bg: rgba(10, 15, 36, 0.72);
    --theme-nav-border: rgba(76, 141, 255, 0.35);
    --theme-nav-text: #eef2ff;
    --theme-nav-hover-bg: rgba(76, 141, 255, 0.16);
    --theme-nav-hover-text: #7fb0ff;
    --theme-nav-active-bg: linear-gradient(135deg, #4c8dff 0%, #ff3d57 55%, #ffd23f 100%);
    --theme-nav-active-text: #050912;
    --theme-nav-shadow: 0 10px 32px rgba(76, 141, 255, 0.45);
}

/* Animated holographic top border on the nav */
html[data-theme="iatfusion"] .pill-nav {
    border: 1px solid transparent;
    border-radius: 999px;
    background-image:
        linear-gradient(rgba(10, 15, 36, 0.78), rgba(10, 15, 36, 0.78)),
        linear-gradient(90deg,
            var(--iatfusion-blue) 0%,
            var(--iatfusion-cyan) 25%,
            var(--iatfusion-red) 55%,
            var(--iatfusion-yellow) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
        0 0 0 1px rgba(76, 141, 255, 0.18),
        0 18px 50px rgba(8, 12, 30, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="iatfusion"] .pill-nav__user-avatar {
    background: linear-gradient(180deg, rgba(12, 18, 38, 0.94), rgba(20, 30, 58, 0.90));
    color: #e8f2ff !important;
    border: 1px solid rgba(92, 225, 255, 0.26);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(8, 12, 30, 0.38),
        0 0 20px rgba(76, 141, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Glass cards: dark holographic panels with neon edge glow */
html[data-theme="iatfusion"] .glass-card,
html[data-theme="iatfusion"] .card,
html[data-theme="iatfusion"] .hero-panel {
    background: linear-gradient(140deg, rgba(20, 28, 60, 0.62), rgba(10, 15, 36, 0.72));
    border: 1px solid rgba(120, 160, 255, 0.22);
    box-shadow:
        0 18px 48px rgba(5, 8, 22, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(76, 141, 255, 0.08);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    position: relative;
}

html[data-theme="iatfusion"] .glass-card::before,
html[data-theme="iatfusion"] .card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(76, 141, 255, 0.55),
        rgba(92, 225, 255, 0.20) 35%,
        rgba(255, 61, 87, 0.45) 70%,
        rgba(255, 210, 63, 0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.55;
}

/* Buttons: glowing neon gradient with animated sheen */
html[data-theme="iatfusion"] .btn-primary,
html[data-theme="iatfusion"] .btn.btn-primary {
    position: relative;
    background: linear-gradient(135deg, var(--iatfusion-blue), var(--iatfusion-red) 55%, var(--iatfusion-yellow));
    border: 0;
    color: #050912;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow:
        0 10px 28px rgba(76, 141, 255, 0.45),
        0 0 24px rgba(255, 61, 87, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    overflow: hidden;
}

html[data-theme="iatfusion"] .btn-primary::after,
html[data-theme="iatfusion"] .btn.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}

html[data-theme="iatfusion"] .btn-primary:hover,
html[data-theme="iatfusion"] .btn.btn-primary:hover {
    background: linear-gradient(135deg, var(--iatfusion-yellow), var(--iatfusion-red) 45%, var(--iatfusion-blue));
    box-shadow:
        0 14px 38px rgba(255, 61, 87, 0.45),
        0 0 32px rgba(255, 210, 63, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
}

html[data-theme="iatfusion"] .btn-primary:hover::after,
html[data-theme="iatfusion"] .btn.btn-primary:hover::after {
    transform: translateX(120%);
}

/* IATFusion project-card actions: keep foreground bright on blue buttons.
   Limit the solid blue pill treatment to project cards on the Projects page. */
html[data-theme="iatfusion"] :where(.projects-shell-v2 .project-card) :where(.pill, a.pill, button.pill, .action-link, a.action-link, button.action-link) {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2f6fff 0%, #4c8dff 55%, #67a8ff 100%) !important;
    border-color: #4c8dff !important;
    box-shadow:
        0 6px 16px rgba(76, 141, 255, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="iatfusion"] :where(.projects-shell-v2 .project-card) :where(.pill, .action-link) :where(i, span) {
    color: #ffffff !important;
}

html[data-theme="iatfusion"] .projects-shell-v2 .project-card .pill:hover,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card .pill:focus-visible,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card a.pill:hover,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card a.pill:focus-visible,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card button.pill:hover,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card button.pill:focus-visible,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card .action-link:hover,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card .action-link:focus-visible,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card a.action-link:hover,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card a.action-link:focus-visible,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card button.action-link:hover,
html[data-theme="iatfusion"] .projects-shell-v2 .project-card button.action-link:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(135deg, #2f6fff 0%, #4c8dff 55%, #67a8ff 100%) !important;
    border-color: #4c8dff !important;
    box-shadow:
        0 10px 26px rgba(76, 141, 255, 0.40),
        0 0 22px rgba(92, 225, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="iatfusion"] .projects-shell-v2 .project-card .pill:hover :where(i, span),
html[data-theme="iatfusion"] .projects-shell-v2 .project-card .pill:focus-visible :where(i, span),
html[data-theme="iatfusion"] .projects-shell-v2 .project-card .action-link:hover :where(i, span),
html[data-theme="iatfusion"] .projects-shell-v2 .project-card .action-link:focus-visible :where(i, span) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="iatfusion"] .projects-shell-v2 .hero-actions .action-link i,
html[data-theme="iatfusion"] .projects-shell-v2 .hero-actions .action-link:hover i,
html[data-theme="iatfusion"] .projects-shell-v2 .hero-actions .action-link:focus-visible i,
html[data-theme="iatfusion"] .projects-shell-v2 .hero-actions .action-link--github i,
html[data-theme="iatfusion"] .projects-shell-v2 .hero-actions .action-link--github:hover i,
html[data-theme="iatfusion"] .projects-shell-v2 .hero-actions .action-link--github:focus-visible i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Headings get a vibrant gradient inkwash */
html[data-theme="iatfusion"] h1,
html[data-theme="iatfusion"] .display-1,
html[data-theme="iatfusion"] .display-2,
html[data-theme="iatfusion"] .hero-title {
    background: linear-gradient(135deg, #ffffff 0%, #7fb0ff 35%, #ffd23f 65%, #ff3d57 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px rgba(76, 141, 255, 0.25);
}

html[data-theme="iatfusion"] a {
    color: var(--iatfusion-cyan);
}

html[data-theme="iatfusion"] a:hover {
    color: var(--iatfusion-yellow);
    text-shadow: 0 0 12px rgba(255, 210, 63, 0.55);
}

/* When the shader is active, drop the body gradient so the GPU canvas reads cleanly */
html.shader-bg-active[data-theme="iatfusion"] body {
    background: transparent !important;
}

/* =============================================
   NEW THEME: Glass Prism — clean, premium, modern glass
   Pairs with the 'glass-prism' WebGL shader. Bright, airy, refractive.
============================================= */
html[data-theme="glass-prism"],
:root[data-theme="glass-prism"] {
    --color-background: #eaf1fb;
    --color-surface: rgba(255, 255, 255, 0.55);
    --color-surface-subtle: rgba(255, 255, 255, 0.40);
    --color-surface-elevated: rgba(255, 255, 255, 0.72);
    --text-primary: #0e1a33;
    --text-secondary: #2a3a5e;
    --text-tertiary: #5b6886;
    --border-light: rgba(14, 26, 51, 0.10);
    --border-medium: rgba(14, 26, 51, 0.18);
    --border-dark: rgba(14, 26, 51, 0.30);
    --glass-tint-cool: rgba(110, 160, 240, 0.45);
    --glass-tint-warm: rgba(220, 180, 255, 0.35);
    --google-blue: #4c8dff;
    --google-blue-light: #7fb0ff;
    --google-blue-dark: #1e3a8a;
    --google-blue-subtle: rgba(76, 141, 255, 0.10);
    --google-red: #ff6b8a;
    --google-yellow: #ffd76b;
    --google-green: #5dd9b3;
    --theme-radius-md: 16px;
    --theme-radius-lg: 26px;
    --theme-shadow-md: 0 16px 48px rgba(76, 141, 255, 0.18);
    --theme-shadow-lg: 0 32px 80px rgba(76, 141, 255, 0.22);
}

html[data-theme="glass-prism"] body {
    background:
        radial-gradient(circle at 18% 20%, rgba(180, 210, 255, 0.55), transparent 55%),
        radial-gradient(circle at 82% 30%, rgba(220, 200, 255, 0.45), transparent 55%),
        radial-gradient(circle at 50% 95%, rgba(170, 230, 255, 0.40), transparent 60%),
        linear-gradient(180deg, #f4f8ff 0%, #eaf1fb 60%, #f8fbff 100%);
    background-attachment: fixed;
    color: var(--text-primary);
}

html[data-theme="glass-prism"] {
    --theme-nav-bg: rgba(255, 255, 255, 0.55);
    --theme-nav-border: rgba(255, 255, 255, 0.75);
    --theme-nav-text: #0e1a33;
    --theme-nav-hover-bg: rgba(76, 141, 255, 0.10);
    --theme-nav-hover-text: #1d4ed8;
    --theme-nav-active-bg: linear-gradient(135deg, rgba(76, 141, 255, 0.85), rgba(220, 180, 255, 0.85));
    --theme-nav-active-text: #ffffff;
    --theme-nav-shadow: 0 14px 38px rgba(76, 141, 255, 0.18);
}

html[data-theme="glass-prism"] .pill-nav {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        0 18px 48px rgba(76, 141, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(76, 141, 255, 0.10);
}

html[data-theme="glass-prism"] .pill-nav__user-avatar {
    background: linear-gradient(135deg, #7fb0ff, #c9b4ff 60%, #ffd76b);
    color: #0e1a33 !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.85),
        0 8px 22px rgba(76, 141, 255, 0.30);
}

/* Real frosted glass cards with crisp prism edge */
html[data-theme="glass-prism"] .glass-card,
html[data-theme="glass-prism"] .card,
html[data-theme="glass-prism"] .hero-panel {
    position: relative;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.30));
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--theme-radius-lg);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    box-shadow:
        0 22px 60px rgba(30, 58, 138, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(76, 141, 255, 0.08);
    overflow: hidden;
}

html[data-theme="glass-prism"] .glass-card::before,
html[data-theme="glass-prism"] .card::before,
html[data-theme="glass-prism"] .hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.0) 28%,
            rgba(255, 255, 255, 0.0) 72%,
            rgba(180, 210, 255, 0.18) 100%);
    pointer-events: none;
}

html[data-theme="glass-prism"] .glass-card::after,
html[data-theme="glass-prism"] .card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(127, 176, 255, 0.55),
        rgba(255, 255, 255, 0.0) 35%,
        rgba(255, 255, 255, 0.0) 65%,
        rgba(220, 180, 255, 0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

html[data-theme="glass-prism"] .btn-primary,
html[data-theme="glass-prism"] .btn.btn-primary {
    background: linear-gradient(135deg, #4c8dff, #7fb0ff);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    box-shadow:
        0 12px 30px rgba(76, 141, 255, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
}

html[data-theme="glass-prism"] .btn-primary:hover,
html[data-theme="glass-prism"] .btn.btn-primary:hover {
    background: linear-gradient(135deg, #5fa0ff, #c9b4ff);
    box-shadow:
        0 16px 38px rgba(127, 176, 255, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    transform: translateY(-1px);
}

html[data-theme="glass-prism"] h1,
html[data-theme="glass-prism"] .display-1,
html[data-theme="glass-prism"] .display-2,
html[data-theme="glass-prism"] .hero-title {
    background: linear-gradient(135deg, #0e1a33 0%, #4c8dff 55%, #c9b4ff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

html.shader-bg-active[data-theme="glass-prism"] body {
    background: transparent !important;
}

/* =============================================
   GLSL SHOWCASE THEMES — component materials
   These themes use WebGL shader backgrounds and reshape the UI surface language.
============================================= */
html[data-theme="samurai-steel"],
:root[data-theme="samurai-steel"],
html[data-theme="steel-sakura"],
:root[data-theme="steel-sakura"] {
    --color-background: #05070a;
    --color-surface: linear-gradient(160deg, rgba(25, 31, 38, 0.88), rgba(11, 14, 19, 0.90));
    --color-surface-subtle: rgba(183, 197, 209, 0.08);
    --color-surface-elevated: rgba(30, 36, 44, 0.90);
    --text-primary: #f5f7fa;
    --text-secondary: rgba(222, 230, 237, 0.80);
    --text-tertiary: rgba(167, 179, 190, 0.62);
    --border-light: rgba(205, 216, 224, 0.18);
    --border-medium: rgba(210, 41, 58, 0.42);
    --border-dark: rgba(255, 110, 120, 0.60);
    --google-blue: #cf2333;
    --google-blue-light: #ff8b95;
    --google-blue-dark: #7d121d;
    --google-blue-subtle: rgba(207, 35, 51, 0.18);
    --google-red: #cf2333;
    --google-yellow: #dde5ec;
    --google-green: #95a9b8;
    --theme-radius-md: 10px;
    --theme-radius-lg: 16px;
    --theme-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.34);
    --theme-shadow-md: 0 22px 56px rgba(0, 0, 0, 0.54), 0 0 34px rgba(207, 35, 51, 0.16);
}

html[data-theme="steel-sakura"],
:root[data-theme="steel-sakura"] {
    --color-surface-subtle: rgba(255, 143, 180, 0.08);
    --color-surface-elevated: rgba(34, 39, 47, 0.90);
    --border-medium: rgba(255, 143, 180, 0.34);
    --border-dark: rgba(255, 183, 197, 0.58);
    --google-blue: #ff8fb4;
    --google-blue-light: #ffd6e2;
    --google-blue-dark: #b93863;
    --google-blue-subtle: rgba(255, 143, 180, 0.16);
    --google-red: #ff6b9d;
    --google-yellow: #f3f6f8;
    --theme-shadow-md: 0 22px 56px rgba(0, 0, 0, 0.54), 0 0 34px rgba(255, 143, 180, 0.14);
}

html[data-theme="samurai-steel"] .pill-nav,
html[data-theme="steel-sakura"] .pill-nav {
    background: linear-gradient(135deg, rgba(18, 24, 31, 0.84), rgba(10, 13, 18, 0.72));
    border: 1px solid var(--border-medium);
    box-shadow: var(--theme-shadow-md), inset 0 1px 0 rgba(255,255,255,0.10);
    backdrop-filter: blur(20px) saturate(165%);
}

html[data-theme="samurai-steel"] .glass-card,
html[data-theme="samurai-steel"] .card,
html[data-theme="steel-sakura"] .glass-card,
html[data-theme="steel-sakura"] .card {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--border-light);
    box-shadow: var(--theme-shadow-md);
    backdrop-filter: blur(18px) saturate(150%);
    transform-style: preserve-3d;
}

html[data-theme="samurai-steel"] .glass-card::before,
html[data-theme="samurai-steel"] .card::before,
html[data-theme="steel-sakura"] .glass-card::before,
html[data-theme="steel-sakura"] .card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.72;
    background:
        repeating-linear-gradient(103deg, transparent 0 12px, rgba(255,255,255,0.05) 12px 13px),
        linear-gradient(118deg, transparent 40%, rgba(255,255,255,0.12) 43%, rgba(207,35,51,0.22) 46%, transparent 50%);
    animation: shaderBladeSheen 5.2s ease-in-out infinite;
}

html[data-theme="samurai-steel"] .pill-nav__item:hover,
html[data-theme="samurai-steel"] .pill-nav__item.active,
html[data-theme="samurai-steel"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item),
html[data-theme="samurai-steel"] .btn,
html[data-theme="samurai-steel"] .btn-primary,
html[data-theme="steel-sakura"] .pill-nav__item:hover,
html[data-theme="steel-sakura"] .pill-nav__item.active,
html[data-theme="steel-sakura"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item),
html[data-theme="steel-sakura"] .btn,
html[data-theme="steel-sakura"] .btn-primary {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 14%, transparent 16%),
        linear-gradient(135deg, #48515d 0%, #1a2027 58%, #6d111a 100%);
    border: 1px solid rgba(220,227,234,0.18);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(207,35,51,0.44);
}

html[data-theme="steel-sakura"] .pill-nav__item:hover,
html[data-theme="steel-sakura"] .pill-nav__item.active,
html[data-theme="steel-sakura"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item),
html[data-theme="steel-sakura"] .btn,
html[data-theme="steel-sakura"] .btn-primary {
    background: linear-gradient(135deg, #3d4651 0%, #1a2027 54%, #ff8fb4 100%);
    box-shadow: 0 16px 34px rgba(0,0,0,0.42), 0 0 24px rgba(255,143,180,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
}

html[data-theme="samurai-steel"] .settings-header,
html[data-theme="samurai-steel"] .settings-sidebar,
html[data-theme="steel-sakura"] .settings-header,
html[data-theme="steel-sakura"] .settings-sidebar {
    background: var(--color-surface-elevated);
    border: 1px solid var(--border-light);
    box-shadow: var(--theme-shadow-md);
    backdrop-filter: blur(18px) saturate(150%);
}

html[data-theme="samurai-steel"] input,
html[data-theme="samurai-steel"] select,
html[data-theme="samurai-steel"] textarea,
html[data-theme="steel-sakura"] input,
html[data-theme="steel-sakura"] select,
html[data-theme="steel-sakura"] textarea {
    background: var(--color-surface-subtle);
    border-color: var(--border-light);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

html[data-theme="samurai-steel"] .btn:hover,
html[data-theme="samurai-steel"] .btn-primary:hover,
html[data-theme="samurai-steel"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item):hover,
html[data-theme="steel-sakura"] .btn:hover,
html[data-theme="steel-sakura"] .btn-primary:hover,
html[data-theme="steel-sakura"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item):hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.48), 0 0 22px rgba(207,35,51,0.24), inset 0 1px 0 rgba(255,255,255,0.30);
    filter: brightness(1.05);
}

html[data-theme="samurai-steel"] .btn:active,
html[data-theme="samurai-steel"] .btn-primary:active,
html[data-theme="samurai-steel"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item):active,
html[data-theme="steel-sakura"] .btn:active,
html[data-theme="steel-sakura"] .btn-primary:active,
html[data-theme="steel-sakura"] button:not(.pill-nav__item):not(.pill-nav__toggle):not(.theme-card):not(.pill-nav-sidebar__item):active {
    transform: translateY(0);
    box-shadow: inset 0 2px 12px rgba(0,0,0,0.38), 0 10px 18px rgba(0,0,0,0.28);
}

html[data-theme="samurai-steel"] .pill-nav__item,
html[data-theme="steel-sakura"] .pill-nav__item {
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

html[data-theme="samurai-steel"] .pill-nav__item:hover,
html[data-theme="steel-sakura"] .pill-nav__item:hover {
    transform: translateY(-1px);
}

html[data-theme="samurai-steel"] input:focus,
html[data-theme="samurai-steel"] select:focus,
html[data-theme="samurai-steel"] textarea:focus,
html[data-theme="steel-sakura"] input:focus,
html[data-theme="steel-sakura"] select:focus,
html[data-theme="steel-sakura"] textarea:focus {
    border-color: var(--border-dark);
    box-shadow: 0 0 0 3px rgba(207,35,51,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
}

html[data-theme="samurai-steel"] .card,
html[data-theme="samurai-steel"] .glass-card,
html[data-theme="steel-sakura"] .card,
html[data-theme="steel-sakura"] .glass-card {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

@keyframes steelSakuraFall {
    0% { transform: translate3d(0, -8vh, 0) rotate(0deg) rotateY(0deg); opacity: 0; }
    8% { opacity: 0.88; }
    48% { transform: translate3d(var(--petal-sway), 48vh, 0) rotate(calc(220deg * var(--petal-spin))) rotateY(160deg); }
    92% { opacity: 0.78; }
    100% { transform: translate3d(var(--petal-drift), 108vh, 0) rotate(calc(520deg * var(--petal-spin))) rotateY(340deg); opacity: 0; }
}

@keyframes shaderCardSweep {
    0%, 100% { transform: translateX(-80%) skewX(-18deg); }
    50% { transform: translateX(80%) skewX(-18deg); }
}

@keyframes shaderBladeSheen {
    0%, 100% { transform: translateX(-12%) translateY(0); opacity: 0.34; }
    50% { transform: translateX(16%) translateY(-2%); opacity: 0.82; }
}