/* ==========================================================================
   RUNIC THEME: Synthwave Reforged
   Neon dusk, chrome glass, outrun grid, and a burning horizon sun.
   ========================================================================= */

[data-theme="synthwave"] {
    /* Core hue system */
    --hue-primary: 322;
    --hue-accent: 188;
    --hue-gm: 280;
    --hue-danger: 2;
    --hue-warning: 42;
    --hue-success: 150;
    --hue-toxicity: 104;
    --hue-neutral: 252;

    --sat-primary: 92%;
    --lit-primary: 58%;
    --lit-primary-hover: 64%;

    --sat-accent: 96%;
    --lit-accent: 58%;
    --lit-accent-hover: 66%;

    --sat-gm: 72%;
    --lit-gm: 58%;
    --lit-gm-text: 92%;

    --sat-danger: 82%;
    --lit-danger: 56%;
    --lit-danger-hover: 62%;

    --sat-warning: 92%;
    --lit-warning: 58%;

    --sat-success: 62%;
    --lit-success: 46%;

    --sat-toxicity: 88%;
    --lit-toxicity: 58%;

    --lightness-bg: 6%;

    /* Form and timing */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;

    --font-sans: 'Space Grotesk', 'Montserrat', 'Arial', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    --duration-75: 90ms;
    --duration-150: 170ms;
    --duration-250: 280ms;
    --duration-300: 360ms;
    --duration-400: 620ms;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Identity */
    --neon-magenta: hsl(322 100% 62%);
    --neon-pink: hsl(332 100% 70%);
    --laser-cyan: hsl(188 100% 62%);
    --electric-blue: hsl(206 100% 66%);
    --sunset-orange: hsl(24 100% 60%);
    --sunset-gold: hsl(44 100% 62%);
    --violet-deep: hsl(266 50% 18%);
    --violet-night: hsl(252 48% 10%);
    --chrome-lilac: hsl(276 38% 84%);
    --road-black: hsl(246 24% 8%);
    --synth-horizon-y: 48vh;
    --synth-grid-depth: 62vh;

    /* Surfaces */
    --bg-page: hsl(250 40% 6%);
    --bg-primary: hsl(252 38% 8%);
    --bg-secondary: hsl(254 34% 12% / 0.88);
    --bg-tertiary: hsl(256 30% 14% / 0.95);
    --bg-card: hsl(256 34% 12% / 0.9);
    --bg-hover: hsl(266 40% 18% / 0.62);
    --bg-input: hsl(254 32% 12%);

    --surface-elevated: hsl(258 32% 16%);
    --surface-overlay: hsl(258 36% 18% / 0.98);
    --surface-panel: hsl(256 28% 14% / 0.96);

    /* Text */
    --text-primary: hsl(302 16% 94%);
    --text-secondary: hsl(284 20% 78%);
    --text-label: hsl(188 92% 68%);
    --text-light: hsl(0 0% 100%);
    --text-muted: hsl(278 18% 62% / 0.82);

    /* Borders and shadows */
    --border-color: hsl(322 100% 62% / 0.28);
    --border-subtle: hsl(188 100% 62% / 0.12);
    --border-strong: hsl(188 100% 62% / 0.62);

    --shadow-glow-primary:
        0 0 18px hsl(322 100% 62% / 0.34),
        0 0 42px hsl(322 100% 62% / 0.16);
    --shadow-glow-accent:
        0 0 18px hsl(188 100% 62% / 0.34),
        0 0 42px hsl(188 100% 62% / 0.16);
    --shadow-glow-danger:
        0 0 18px hsl(2 90% 58% / 0.28);
    --shadow-glow-gold:
        0 0 18px hsl(42 100% 64% / 0.24);

    /* Icons */
    --icon-color: hsl(188 100% 62%);
    --icon-filter: brightness(0) saturate(100%) invert(76%) sepia(48%)
        saturate(2416%) hue-rotate(134deg) brightness(104%) contrast(101%);

    /* Focus and tooltip */
    --color-focus-ring: hsl(188 100% 62% / 0.3);

    --color-tooltip-bg: hsl(254 34% 12% / 0.98);
    --color-tooltip-highlight: hsl(44 100% 62%);
    --color-tooltip-effect-bg: hsl(322 100% 62% / 0.08);
    --color-tooltip-text: hsl(302 18% 92%);
    --color-tooltip-label: hsl(188 90% 70%);
    --color-tooltip-muted: hsl(278 18% 68%);
    --color-tooltip-dim: hsl(276 14% 56%);
    --color-tooltip-pos: hsl(150 68% 62%);
    --color-tooltip-neg: hsl(2 88% 64%);
    --color-tooltip-separator: hsl(322 90% 62% / 0.28);
    --color-tooltip-section-bg: hsl(256 28% 16% / 0.88);

    /* Quality colors */
    --quality-0-color1: rgb(101, 95, 123);
    --quality-0-color2: rgb(58, 54, 73);
    --quality-1-color1: rgb(208, 198, 236);
    --quality-1-color2: rgb(150, 138, 192);
    --quality-2-color1: rgb(88, 255, 190);
    --quality-2-color2: rgb(42, 194, 136);
    --quality-3-color1: rgb(90, 212, 255);
    --quality-3-color2: rgb(40, 161, 214);
    --quality-4-color1: rgb(203, 110, 255);
    --quality-4-color2: rgb(145, 60, 214);
    --quality-5-color1: rgb(255, 212, 94);
    --quality-5-color2: rgb(214, 150, 38);
    --quality-6-color1: rgb(255, 96, 116);
    --quality-6-color2: rgb(214, 42, 60);
    --quality-7-color1: rgb(255, 150, 221);
    --quality-7-color2: rgb(255, 82, 186);

    /* Spell / element system */
    --element-fire-bg: hsl(18 64% 18% / 0.82);
    --element-fire-border: hsl(18 100% 58% / 0.66);
    --element-fire-hover: hsl(18 72% 24% / 0.94);
    --element-fire-glow: hsl(18 100% 58% / 0.18);

    --element-water-bg: hsl(208 46% 16% / 0.82);
    --element-water-border: hsl(188 100% 62% / 0.64);
    --element-water-hover: hsl(206 58% 20% / 0.94);
    --element-water-glow: hsl(188 100% 62% / 0.18);

    --element-earth-bg: hsl(286 34% 16% / 0.82);
    --element-earth-border: hsl(322 80% 60% / 0.58);
    --element-earth-hover: hsl(286 40% 20% / 0.94);
    --element-earth-glow: hsl(322 80% 60% / 0.16);

    --element-wind-bg: hsl(188 38% 16% / 0.82);
    --element-wind-border: hsl(188 90% 62% / 0.6);
    --element-wind-hover: hsl(188 46% 20% / 0.94);
    --element-wind-glow: hsl(188 100% 62% / 0.16);

    --element-light-bg: hsl(40 80% 18% / 0.84);
    --element-light-border: hsl(44 100% 62% / 0.68);
    --element-light-hover: hsl(42 88% 24% / 0.96);
    --element-light-glow: hsl(44 100% 62% / 0.22);

    --element-shadow-bg: hsl(262 42% 16% / 0.84);
    --element-shadow-border: hsl(280 80% 60% / 0.6);
    --element-shadow-hover: hsl(264 46% 20% / 0.96);
    --element-shadow-glow: hsl(280 80% 60% / 0.18);

    --element-death-bg: hsl(344 44% 16% / 0.84);
    --element-death-border: hsl(344 88% 60% / 0.6);
    --element-death-hover: hsl(344 50% 20% / 0.96);
    --element-death-glow: hsl(344 88% 60% / 0.18);

    --element-life-bg: hsl(156 44% 16% / 0.84);
    --element-life-border: hsl(156 88% 58% / 0.6);
    --element-life-hover: hsl(156 48% 20% / 0.96);
    --element-life-glow: hsl(156 88% 58% / 0.18);

    --element-arcane-bg: hsl(276 48% 16% / 0.86);
    --element-arcane-border: hsl(322 100% 64% / 0.64);
    --element-arcane-hover: hsl(278 54% 22% / 0.96);
    --element-arcane-glow: hsl(322 100% 64% / 0.18);

    --element-mind-bg: hsl(224 34% 16% / 0.84);
    --element-mind-border: hsl(206 100% 66% / 0.6);
    --element-mind-hover: hsl(226 40% 20% / 0.96);
    --element-mind-glow: hsl(206 100% 66% / 0.18);

    --element-physical-bg: hsl(254 24% 16% / 0.84);
    --element-physical-border: hsl(188 90% 62% / 0.54);
    --element-physical-hover: hsl(256 30% 20% / 0.96);
    --element-physical-glow: hsl(188 90% 62% / 0.14);

    --spell-temp-bg: hsl(258 34% 16%);
    --spell-temp-border: hsl(322 90% 62% / 0.76);
    --spell-temp-hover-bg: hsl(260 40% 20%);
    --spell-temp-hover-glow: hsl(188 100% 62% / 0.16);
    --spell-temp-badge-bg: hsl(322 100% 60%);
    --spell-temp-header-bg: hsl(258 30% 20%);
    --spell-temp-header-hover-bg: hsl(260 36% 24%);
    --spell-tile-hover-bg: hsl(260 40% 20%);

    /* Inventory / currency / buffs */
    --item-tile-base: hsl(258 34% 14%);
    --item-tile-border: hsl(322 76% 60% / 0.44);
    --item-tile-add-bg: hsl(256 30% 12%);
    --item-tile-add-border: hsl(188 80% 60% / 0.38);
    --item-tile-add-hover: hsl(260 36% 18%);
    --item-tile-add-border-hover: hsl(188 100% 62% / 0.72);

    --weight-display-bg: hsl(258 28% 14%);
    --weight-ok-color: hsl(150 74% 60%);
    --weight-warn-color: hsl(42 100% 62%);
    --weight-crit-color: hsl(2 88% 62%);
    --weight-bar-track-bg: hsl(252 20% 20%);

    --currency-tile-bg: hsl(258 34% 14%);
    --currency-tile-border: hsl(322 74% 60% / 0.44);
    --currency-tile-hover-bg: hsl(260 40% 18%);
    --currency-tile-hover-shadow: hsl(44 100% 62% / 0.18);
    --currency-quantity-bg: hsl(322 64% 24%);
    --currency-add-bg: hsl(256 30% 12%);
    --currency-add-border: hsl(188 80% 60% / 0.38);
    --currency-add-hover-bg: hsl(260 36% 18%);
    --currency-add-hover-border: hsl(188 100% 62% / 0.72);

    --color-buff-tile-bg: hsl(156 40% 14%);
    --color-buff-tile-border: hsl(156 88% 58% / 0.5);
    --color-buff-tile-hover: hsl(156 46% 18%);
    --color-buff-tile-glow: hsl(156 88% 58% / 0.12);
    --color-debuff-tile-bg: hsl(344 38% 14%);
    --color-debuff-tile-border: hsl(344 88% 60% / 0.52);
    --color-debuff-tile-hover: hsl(344 42% 18%);
    --color-debuff-tile-glow: hsl(344 88% 60% / 0.12);
    --color-neutral-tile-bg: hsl(258 28% 14%);
    --color-neutral-tile-border: hsl(188 80% 60% / 0.34);
    --color-neutral-tile-hover: hsl(260 34% 18%);
    --color-neutral-tile-glow: hsl(188 100% 62% / 0.1);
    --color-buff-indicator: hsl(156 88% 58%);
    --color-debuff-indicator: hsl(344 88% 60%);

    /* Common status colors */
    --color-heal: hsl(156 88% 58%);
    --color-gold: hsl(44 100% 62%);
}

/* ==========================================================================
   Animations
   ========================================================================= */

@keyframes synthGridFlow {
    0% {
        background-position: 0 0, 0 0;
        opacity: 0.95;
        filter: saturate(1) brightness(1);
    }
    100% {
        background-position: 0 0, 0 80px;
        opacity: 1;
        filter: saturate(1.08) brightness(1.06);
    }
}

@keyframes vhsGlitch {
    0%, 100% { text-shadow: 2px 0 hsl(188 100% 62%), -2px 0 hsl(322 100% 62%); }
    20% { text-shadow: -2px 0 hsl(188 100% 62%), 2px 0 hsl(322 100% 62%); }
    40% { text-shadow: 3px 0 hsl(188 100% 62%), -1px 0 hsl(322 100% 62%); }
    60% { text-shadow: -1px 0 hsl(188 100% 62%), 3px 0 hsl(322 100% 62%); }
    80% { text-shadow: 1px 0 hsl(188 100% 62%), -3px 0 hsl(322 100% 62%); }
}

@keyframes sunsetPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.96;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.025);
        opacity: 1;
    }
}

@keyframes neonSweep {
    0% {
        transform: translateX(-140%) skewX(-18deg);
        opacity: 0;
    }
    20% {
        opacity: 0.42;
    }
    100% {
        transform: translateX(280%) skewX(-18deg);
        opacity: 0;
    }
}

/* ==========================================================================
   Horizon Background
   ========================================================================= */

[data-theme="synthwave"] body {
    position: relative;
    isolation: isolate;
    color: var(--text-primary);
    background:
        radial-gradient(circle at 50% calc(var(--synth-horizon-y) + 2vh), hsl(38 100% 72% / 0.24) 0%, transparent 18%),
        radial-gradient(circle at 50% calc(var(--synth-horizon-y) - 8vh), hsl(24 100% 62% / 0.18) 0%, transparent 22%),
        radial-gradient(circle at 50% 18%, hsl(322 100% 42% / 0.28) 0%, transparent 38%),
        linear-gradient(180deg,
            hsl(266 60% 20%) 0%,
            hsl(292 58% 28%) 24%,
            hsl(328 60% 36%) 46%,
            hsl(18 86% 46%) 70%,
            hsl(246 46% 12%) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

[data-theme="synthwave"] body::before {
    content: '';
    display: block;
    position: fixed;
    top: var(--synth-horizon-y);
    left: -50%;
    width: 200%;
    height: var(--synth-grid-depth);
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0,
            transparent 78px,
            hsl(322 100% 62% / 0.72) 78px,
            hsl(322 100% 62% / 0.72) 80px),
        repeating-linear-gradient(0deg,
            transparent 0,
            transparent 78px,
            hsl(322 100% 62% / 0.52) 78px,
            hsl(322 100% 62% / 0.52) 80px);
    background-position: 0 0, 0 0;
    transform: perspective(640px) rotateX(74deg) translate3d(0, 0, 0);
    transform-origin: top center;
    animation: synthGridFlow 6s linear infinite;
    pointer-events: none;
    z-index: -2;
    opacity: 0.98;
    will-change: background-position, opacity, filter;
    box-shadow:
        inset 0 120px 90px hsl(258 44% 12% / 0.78);
}

[data-theme="synthwave"] body::after {
    content: '';
    display: block;
    position: fixed;
    left: 50%;
    top: var(--synth-horizon-y);
    width: min(36vw, 360px);
    height: min(36vw, 360px);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(180deg,
            hsl(44 100% 72%) 0%,
            hsl(24 100% 62%) 34%,
            hsl(332 100% 62%) 72%,
            hsl(322 100% 56%) 100%);
    clip-path: inset(0 0 50% 0);
    box-shadow:
        0 -34px 58px hsl(24 100% 60% / 0.42),
        0 -82px 132px hsl(44 100% 62% / 0.26),
        0 -138px 200px hsl(332 100% 62% / 0.14);
    pointer-events: none;
    z-index: -1;
    will-change: transform, opacity;
    animation: sunsetPulse 8s ease-in-out infinite;
}

[data-theme="synthwave"] #div_page_container,
[data-theme="synthwave"] #main,
[data-theme="synthwave"] .app-shell,
[data-theme="synthwave"] .character-sheet,
[data-theme="synthwave"] .content-panel,
[data-theme="synthwave"] .page-content {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Typography
   ========================================================================= */

[data-theme="synthwave"] h1,
[data-theme="synthwave"] h2,
[data-theme="synthwave"] h3 {
    background: linear-gradient(180deg,
        hsl(188 100% 68%) 0%,
        hsl(188 100% 42%) 34%,
        hsl(322 100% 64%) 58%,
        hsl(44 100% 66%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: vhsGlitch 3.4s infinite;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-style: italic;
}

[data-theme="synthwave"] h4,
[data-theme="synthwave"] h5,
[data-theme="synthwave"] h6,
[data-theme="synthwave"] .widget-title,
[data-theme="synthwave"] .modal-title {
    color: hsl(188 100% 68%);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

[data-theme="synthwave"] a {
    color: hsl(188 100% 68%);
}

[data-theme="synthwave"] a:hover {
    color: hsl(44 100% 66%);
}

/* ==========================================================================
   Core Surfaces
   ========================================================================= */

[data-theme="synthwave"] .card,
[data-theme="synthwave"] .card-glass,
[data-theme="synthwave"] .character-card,
[data-theme="synthwave"] .widget-tile,
[data-theme="synthwave"] .attribute-card,
[data-theme="synthwave"] .character-item,
[data-theme="synthwave"] .login-container,
[data-theme="synthwave"] .modal,
[data-theme="synthwave"] .story-note-item,
[data-theme="synthwave"] .spell-tile,
[data-theme="synthwave"] .buff-tile,
[data-theme="synthwave"] .item-tile,
[data-theme="synthwave"] .currency-tile {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, hsl(266 36% 16% / 0.18), transparent 24%),
        linear-gradient(135deg, hsl(254 38% 12% / 0.92), hsl(262 34% 16% / 0.96));
    border: 1px solid var(--border-color);
    box-shadow:
        inset 0 1px 0 hsl(188 100% 78% / 0.08),
        inset 0 -22px 30px hsl(0 0% 0% / 0.2),
        0 16px 30px hsl(0 0% 0% / 0.28),
        0 0 26px hsl(322 100% 62% / 0.08);
    backdrop-filter: blur(10px);
}

[data-theme="synthwave"] .card::before,
[data-theme="synthwave"] .character-card::before,
[data-theme="synthwave"] .widget-tile::before,
[data-theme="synthwave"] .attribute-card::before,
[data-theme="synthwave"] .modal::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            transparent 0 2.6%,
            hsl(188 100% 62% / 0.08) 2.6% 3%,
            transparent 3% 97%,
            hsl(322 100% 62% / 0.08) 97% 97.4%,
            transparent 97.4% 100%),
        linear-gradient(180deg,
            transparent 0 3.4%,
            hsl(322 100% 62% / 0.06) 3.4% 3.8%,
            transparent 3.8% 96.2%,
            hsl(188 100% 62% / 0.06) 96.2% 96.6%,
            transparent 96.6% 100%);
    pointer-events: none;
}

[data-theme="synthwave"] .card::after,
[data-theme="synthwave"] .character-card::after,
[data-theme="synthwave"] .widget-tile::after,
[data-theme="synthwave"] .btn-primary::after,
[data-theme="synthwave"] .roll-button::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 36%;
    background: linear-gradient(
        90deg,
        transparent,
        hsl(188 100% 86% / 0.08) 28%,
        hsl(188 100% 82% / 0.34) 50%,
        hsl(322 100% 74% / 0.18) 62%,
        transparent
    );
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}

[data-theme="synthwave"] .card:hover,
[data-theme="synthwave"] .card-glass:hover,
[data-theme="synthwave"] .character-card:hover,
[data-theme="synthwave"] .widget-tile:hover,
[data-theme="synthwave"] .attribute-card:hover,
[data-theme="synthwave"] .character-item:hover,
[data-theme="synthwave"] .story-note-item:hover,
[data-theme="synthwave"] .spell-tile:hover,
[data-theme="synthwave"] .buff-tile:hover,
[data-theme="synthwave"] .item-tile:hover,
[data-theme="synthwave"] .currency-tile:hover {
    border-color: hsl(188 100% 62% / 0.72);
    box-shadow:
        inset 0 1px 0 hsl(188 100% 82% / 0.14),
        0 18px 34px hsl(0 0% 0% / 0.3),
        0 0 34px hsl(188 100% 62% / 0.16),
        0 0 70px hsl(322 100% 62% / 0.08);
}

[data-theme="synthwave"] .card:hover::after,
[data-theme="synthwave"] .character-card:hover::after,
[data-theme="synthwave"] .widget-tile:hover::after {
    animation: neonSweep 1.1s ease-out forwards;
}

/* ==========================================================================
   Buttons and Tabs
   ========================================================================= */

[data-theme="synthwave"] .btn-primary,
[data-theme="synthwave"] .roll-button,
[data-theme="synthwave"] .save-note-btn,
[data-theme="synthwave"] button,
[data-theme="synthwave"] .btn,
[data-theme="synthwave"] .btn-modal,
[data-theme="synthwave"] .modal button {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, hsl(322 100% 58%), hsl(280 90% 54%));
    border: 1px solid hsl(322 100% 62% / 0.86);
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    box-shadow: var(--shadow-glow-primary);
}

[data-theme="synthwave"] .btn-primary:hover,
[data-theme="synthwave"] .roll-button:hover,
[data-theme="synthwave"] .save-note-btn:hover,
[data-theme="synthwave"] button:hover,
[data-theme="synthwave"] .btn:hover,
[data-theme="synthwave"] .btn-modal:hover,
[data-theme="synthwave"] .modal button:hover {
    background:
        linear-gradient(135deg, hsl(188 100% 58%), hsl(206 100% 60%));
    border-color: hsl(188 100% 62%);
    box-shadow: var(--shadow-glow-accent);
    color: #fff;
}

[data-theme="synthwave"] .btn-secondary,
[data-theme="synthwave"] .btn-ghost,
[data-theme="synthwave"] .tab-btn,
[data-theme="synthwave"] .tab_btn,
[data-theme="synthwave"] .tab_btn_vertical,
[data-theme="synthwave"] .twohanded-toggle,
[data-theme="synthwave"] .nav-icon-btn {
    background:
        linear-gradient(180deg, hsl(258 34% 16%), hsl(254 30% 12%));
    border: 1px solid hsl(322 100% 62% / 0.34);
    color: var(--text-primary);
}

[data-theme="synthwave"] .btn-secondary:hover,
[data-theme="synthwave"] .btn-ghost:hover,
[data-theme="synthwave"] .tab-btn:hover,
[data-theme="synthwave"] .tab_btn:hover,
[data-theme="synthwave"] .tab_btn_vertical:hover,
[data-theme="synthwave"] .twohanded-toggle:hover,
[data-theme="synthwave"] .nav-icon-btn:hover {
    border-color: hsl(188 100% 62% / 0.72);
    box-shadow: 0 0 20px hsl(188 100% 62% / 0.18);
    color: hsl(188 100% 72%);
}

[data-theme="synthwave"] .tab-btn.active,
[data-theme="synthwave"] .tab_btn.active,
[data-theme="synthwave"] .tab_btn.active-tab,
[data-theme="synthwave"] .tab_btn_vertical.active,
[data-theme="synthwave"] .nav-icon-btn.active,
[data-theme="synthwave"] #navi-btn-combat.tab_btn.combat-active,
[data-theme="synthwave"] #edit_btn_nav.active {
    background:
        radial-gradient(circle at 28% 24%, hsl(188 100% 82% / 0.16) 0%, transparent 32%),
        linear-gradient(135deg, hsl(322 100% 58%), hsl(188 100% 58%));
    border-color: hsl(188 100% 62%);
    box-shadow:
        0 0 24px hsl(322 100% 62% / 0.28),
        0 0 56px hsl(188 100% 62% / 0.22);
    color: #fff;
}

[data-theme="synthwave"] .tab_Icon,
[data-theme="synthwave"] .tab_btn img,
[data-theme="synthwave"] .nav-icon-btn img,
[data-theme="synthwave"] #div_iconbar_left img,
[data-theme="synthwave"] #div_iconbar_right img,
[data-theme="synthwave"] .icon-themed {
    filter: var(--icon-filter);
}

/* ==========================================================================
   Forms, Tables, Tooltips
   ========================================================================= */

[data-theme="synthwave"] input,
[data-theme="synthwave"] select,
[data-theme="synthwave"] textarea,
[data-theme="synthwave"] .modal-input {
    background: hsl(254 34% 10% / 0.92);
    border: 1px solid hsl(322 100% 62% / 0.32);
    color: var(--text-primary);
    box-shadow: inset 0 0 10px hsl(322 100% 62% / 0.06);
}

[data-theme="synthwave"] input:focus,
[data-theme="synthwave"] select:focus,
[data-theme="synthwave"] textarea:focus,
[data-theme="synthwave"] .modal-input:focus {
    border-color: hsl(188 100% 62%);
    box-shadow:
        0 0 0 2px hsl(188 100% 62% / 0.16),
        0 0 20px hsl(188 100% 62% / 0.16);
    outline: none;
}

[data-theme="synthwave"] table,
[data-theme="synthwave"] .equipment-table {
    background: hsl(256 34% 12% / 0.92);
    border: 1px solid hsl(322 100% 62% / 0.24);
}

[data-theme="synthwave"] th,
[data-theme="synthwave"] .equipment-table th {
    background:
        linear-gradient(135deg, hsl(322 100% 58% / 0.24), hsl(188 100% 58% / 0.16));
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

[data-theme="synthwave"] tr:hover td {
    background: hsl(188 100% 62% / 0.06);
}

[data-theme="synthwave"] .tooltip,
[data-theme="synthwave"] .unified-tooltip,
[data-theme="synthwave"] .itooltip,
[data-theme="synthwave"] .skilltooltip,
[data-theme="synthwave"] .attrtooltip,
[data-theme="synthwave"] .stattooltip,
[data-theme="synthwave"] #item-tooltip,
[data-theme="synthwave"] .basic-tooltip,
[data-theme="synthwave"] .tooltiptext {
    background: linear-gradient(180deg, hsl(256 38% 12% / 0.98), hsl(252 28% 14% / 0.98));
    border: 1px solid hsl(322 100% 62% / 0.34);
    color: var(--color-tooltip-text);
    box-shadow:
        0 0 20px hsl(322 100% 62% / 0.16),
        0 0 40px hsl(188 100% 62% / 0.08);
}

/* ==========================================================================
   HUD and widgets
   ========================================================================= */

[data-theme="synthwave"] .progress-container,
[data-theme="synthwave"] .progress,
[data-theme="synthwave"] progress {
    background: hsl(254 34% 10%);
    border: 1px solid hsl(322 100% 62% / 0.46);
    box-shadow: 0 0 8px hsl(322 100% 62% / 0.24);
}

[data-theme="synthwave"] .progress-fill,
[data-theme="synthwave"] .bar-fill {
    background: linear-gradient(90deg, hsl(322 100% 52%), hsl(188 100% 58%));
    box-shadow: 0 0 18px hsl(188 100% 62% / 0.28);
}

[data-theme="synthwave"] .widget-tile .dice-result,
[data-theme="synthwave"] .widget-tile .attack-result,
[data-theme="synthwave"] .widget-tile .skill-result,
[data-theme="synthwave"] .widget-tile .activity-display {
    background: transparent;
    border: none;
    box-shadow: none;
}

[data-theme="synthwave"] .widget-tile .dice-value,
[data-theme="synthwave"] .widget-tile .attack-damage-value,
[data-theme="synthwave"] .widget-tile .attack-roll-value,
[data-theme="synthwave"] .widget-tile .skill-total-value {
    color: hsl(44 100% 72%);
    text-shadow:
        0 0 12px hsl(44 100% 62% / 0.22),
        0 0 18px hsl(322 100% 62% / 0.12);
}

/* ==========================================================================
   Navigation bars and utilities
   ========================================================================= */

[data-theme="synthwave"] .navigation-bar,
[data-theme="synthwave"] #div_top_navigation,
[data-theme="synthwave"] #div_right_navigation,
[data-theme="synthwave"] #div_iconbar_left,
[data-theme="synthwave"] #div_iconbar_right {
    background:
        linear-gradient(180deg, hsl(252 42% 10% / 0.98), hsl(258 34% 8% / 0.96));
    border-color: hsl(322 100% 62% / 0.24);
    box-shadow:
        inset 0 1px 0 hsl(188 100% 80% / 0.06),
        0 0 28px hsl(322 100% 62% / 0.08);
}

[data-theme="synthwave"] .highlight,
[data-theme="synthwave"] .text-highlight,
[data-theme="synthwave"] .rarity-legendary {
    color: hsl(44 100% 66%);
    text-shadow: 0 0 14px hsl(44 100% 62% / 0.22);
}

[data-theme="synthwave"] .muted,
[data-theme="synthwave"] .secondary-text,
[data-theme="synthwave"] .hint {
    color: var(--text-muted);
}

[data-theme="synthwave"] ::-webkit-scrollbar-track {
    background: hsl(252 34% 10%);
}

[data-theme="synthwave"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, hsl(322 100% 58%), hsl(188 100% 58%));
}
[data-theme="synthwave"] .toxicity-container {
    border-color: var(--color-toxicity) !important;
}

[data-theme="synthwave"] .toxicity-bar {
    background: var(--gradient-toxicity-resource) !important;
    box-shadow: var(--shadow-glow-toxicity) !important;
}

[data-theme="synthwave"] #toxicityText {
    color: var(--text-light);
}