/* ==========================================================================
   RUNIC THEME: Crystal Shard Reforged
   Faceted crystal cathedral, prismatic frostlight, glacial glass, and luminous mineral edges.
   ========================================================================= */

[data-theme="crystal-shard"] {
    /* Core hue system */
    --hue-primary: 198;
    --hue-accent: 174;
    --hue-gm: 256;
    --hue-danger: 352;
    --hue-warning: 42;
    --hue-success: 156;
    --hue-toxicity: 126;
    --hue-neutral: 216;

    --sat-primary: 74%;
    --lit-primary: 68%;
    --lit-primary-hover: 74%;

    --sat-accent: 68%;
    --lit-accent: 64%;
    --lit-accent-hover: 70%;

    --sat-gm: 58%;
    --lit-gm: 66%;
    --lit-gm-text: 94%;

    --sat-danger: 64%;
    --lit-danger: 58%;
    --lit-danger-hover: 64%;

    --sat-warning: 74%;
    --lit-warning: 62%;

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

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

    --lightness-bg: 8%;

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

    --font-sans: 'Exo 2', 'Rajdhani', 'Trebuchet MS', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    --duration-75: 100ms;
    --duration-150: 180ms;
    --duration-250: 300ms;
    --duration-300: 420ms;
    --duration-400: 760ms;

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

    /* Identity */
    --void-ice: hsl(220 34% 8%);
    --glacier-blue: hsl(206 38% 18%);
    --crystal-cyan: hsl(194 84% 70%);
    --prism-aqua: hsl(180 72% 68%);
    --frost-white: hsl(202 44% 94%);
    --ice-silver: hsl(206 26% 84%);
    --amethyst-glint: hsl(256 52% 74%);
    --golden-refraction: hsl(42 74% 70%);
    --snow-mist: hsl(200 24% 78%);
    --deep-slate: hsl(216 22% 16%);
    --facet-shadow: hsl(220 24% 12%);
    --facet-blue: hsl(198 54% 30%);

    /* Surfaces */
    --bg-page: hsl(220 34% 8%);
    --bg-primary: hsl(220 30% 10%);
    --bg-secondary: hsl(214 26% 14% / 0.92);
    --bg-tertiary: hsl(206 28% 16% / 0.96);
    --bg-card: hsl(206 26% 15% / 0.94);
    --bg-hover: hsl(196 42% 24% / 0.5);
    --bg-input: hsl(210 24% 15%);

    --surface-elevated: hsl(206 28% 18%);
    --surface-overlay: hsl(216 28% 14% / 0.98);
    --surface-panel: hsl(204 28% 16% / 0.96);

    /* Text */
    --text-primary: hsl(202 36% 92%);
    --text-secondary: hsl(202 24% 78%);
    --text-label: hsl(194 66% 74%);
    --text-light: hsl(202 54% 98%);
    --text-muted: hsl(206 18% 68% / 0.82);

    /* Borders and shadows */
    --border-color: hsl(196 54% 68% / 0.24);
    --border-subtle: hsl(202 28% 74% / 0.12);
    --border-strong: hsl(194 78% 80% / 0.54);

    --shadow-glow-primary:
        0 18px 36px hsl(220 34% 5% / 0.42),
        0 0 28px hsl(194 84% 70% / 0.12);
    --shadow-glow-accent:
        0 10px 24px hsl(180 72% 68% / 0.18);
    --shadow-glow-danger:
        0 10px 22px hsl(352 64% 58% / 0.16);
    --shadow-glow-gold:
        0 0 24px hsl(42 74% 70% / 0.22);

    /* Icons */
    --icon-color: hsl(194 76% 76%);
    --icon-filter: brightness(0) saturate(100%) invert(88%) sepia(18%)
        saturate(1020%) hue-rotate(164deg) brightness(101%) contrast(94%);

    /* Focus and tooltip */
    --color-focus-ring: hsl(194 84% 70% / 0.22);

    --color-tooltip-bg: hsl(216 28% 12% / 0.98);
    --color-tooltip-highlight: hsl(194 84% 78%);
    --color-tooltip-effect-bg: hsl(194 84% 70% / 0.12);
    --color-tooltip-text: hsl(202 36% 92%);
    --color-tooltip-label: hsl(194 66% 74%);
    --color-tooltip-muted: hsl(206 18% 68%);
    --color-tooltip-dim: hsl(208 14% 56%);
    --color-tooltip-pos: hsl(156 40% 58%);
    --color-tooltip-neg: hsl(352 64% 62%);
    --color-tooltip-separator: hsl(194 54% 68% / 0.3);
    --color-tooltip-section-bg: hsl(206 24% 18% / 0.88);

    /* Quality colors */
    --quality-0-color1: rgb(116, 132, 146);
    --quality-0-color2: rgb(82, 96, 112);
    --quality-1-color1: rgb(224, 240, 250);
    --quality-1-color2: rgb(184, 208, 226);
    --quality-2-color1: rgb(118, 230, 228);
    --quality-2-color2: rgb(76, 184, 194);
    --quality-3-color1: rgb(142, 190, 255);
    --quality-3-color2: rgb(96, 146, 226);
    --quality-4-color1: rgb(184, 156, 255);
    --quality-4-color2: rgb(142, 108, 228);
    --quality-5-color1: rgb(255, 226, 154);
    --quality-5-color2: rgb(226, 188, 102);
    --quality-6-color1: rgb(255, 156, 176);
    --quality-6-color2: rgb(224, 108, 136);
    --quality-7-color1: rgb(210, 246, 255);
    --quality-7-color2: rgb(112, 214, 255);

    /* Spell / element system */
    --element-fire-bg: hsl(14 30% 20% / 0.82);
    --element-fire-border: hsl(20 56% 58% / 0.56);
    --element-fire-hover: hsl(14 34% 24% / 0.92);
    --element-fire-glow: hsl(20 56% 58% / 0.16);

    --element-water-bg: hsl(210 34% 18% / 0.82);
    --element-water-border: hsl(198 54% 62% / 0.56);
    --element-water-hover: hsl(210 38% 22% / 0.92);
    --element-water-glow: hsl(198 62% 68% / 0.18);

    --element-earth-bg: hsl(34 18% 20% / 0.82);
    --element-earth-border: hsl(38 28% 50% / 0.48);
    --element-earth-hover: hsl(34 22% 24% / 0.92);
    --element-earth-glow: hsl(38 34% 56% / 0.12);

    --element-wind-bg: hsl(214 22% 20% / 0.82);
    --element-wind-border: hsl(194 38% 62% / 0.48);
    --element-wind-hover: hsl(214 26% 24% / 0.92);
    --element-wind-glow: hsl(194 46% 68% / 0.14);

    --element-light-bg: hsl(202 22% 22% / 0.84);
    --element-light-border: hsl(194 72% 76% / 0.62);
    --element-light-hover: hsl(202 28% 26% / 0.94);
    --element-light-glow: hsl(194 84% 78% / 0.22);

    --element-shadow-bg: hsl(236 20% 18% / 0.84);
    --element-shadow-border: hsl(248 32% 62% / 0.5);
    --element-shadow-hover: hsl(236 24% 22% / 0.94);
    --element-shadow-glow: hsl(248 38% 68% / 0.14);

    --element-death-bg: hsl(332 18% 20% / 0.82);
    --element-death-border: hsl(340 34% 58% / 0.52);
    --element-death-hover: hsl(332 22% 24% / 0.92);
    --element-death-glow: hsl(340 40% 64% / 0.14);

    --element-life-bg: hsl(156 18% 20% / 0.82);
    --element-life-border: hsl(156 32% 54% / 0.5);
    --element-life-hover: hsl(156 22% 24% / 0.92);
    --element-life-glow: hsl(156 40% 60% / 0.14);

    --element-arcane-bg: hsl(256 22% 20% / 0.84);
    --element-arcane-border: hsl(256 48% 70% / 0.56);
    --element-arcane-hover: hsl(256 26% 24% / 0.94);
    --element-arcane-glow: hsl(256 54% 76% / 0.18);

    --element-mind-bg: hsl(224 22% 20% / 0.82);
    --element-mind-border: hsl(220 32% 60% / 0.48);
    --element-mind-hover: hsl(224 26% 24% / 0.92);
    --element-mind-glow: hsl(220 38% 66% / 0.14);

    --element-physical-bg: hsl(26 16% 20% / 0.84);
    --element-physical-border: hsl(28 26% 48% / 0.44);
    --element-physical-hover: hsl(26 20% 24% / 0.94);
    --element-physical-glow: hsl(28 30% 54% / 0.12);

    --spell-temp-bg: hsl(206 26% 18%);
    --spell-temp-border: hsl(194 48% 70% / 0.74);
    --spell-temp-hover-bg: hsl(202 30% 22%);
    --spell-temp-hover-glow: hsl(194 84% 70% / 0.16);
    --spell-temp-badge-bg: hsl(194 56% 52%);
    --spell-temp-header-bg: hsl(208 24% 20%);
    --spell-temp-header-hover-bg: hsl(202 28% 24%);
    --spell-tile-hover-bg: hsl(202 22% 22%);

    /* Inventory / currency / buffs */
    --item-tile-base: hsl(206 24% 18%);
    --item-tile-border: hsl(194 34% 56% / 0.38);
    --item-tile-add-bg: hsl(210 24% 16%);
    --item-tile-add-border: hsl(194 22% 50% / 0.3);
    --item-tile-add-hover: hsl(202 28% 20%);
    --item-tile-add-border-hover: hsl(194 54% 74% / 0.58);

    --weight-display-bg: hsl(206 22% 16%);
    --weight-ok-color: hsl(156 40% 58%);
    --weight-warn-color: hsl(42 72% 62%);
    --weight-crit-color: hsl(352 64% 60%);
    --weight-bar-track-bg: hsl(208 18% 24%);

    --currency-tile-bg: hsl(206 24% 18%);
    --currency-tile-border: hsl(194 32% 56% / 0.4);
    --currency-tile-hover-bg: hsl(202 28% 20%);
    --currency-tile-hover-shadow: hsl(194 84% 70% / 0.14);
    --currency-quantity-bg: hsl(210 20% 24%);
    --currency-add-bg: hsl(210 24% 16%);
    --currency-add-border: hsl(194 22% 50% / 0.3);
    --currency-add-hover-bg: hsl(202 28% 20%);
    --currency-add-hover-border: hsl(194 54% 74% / 0.62);

    --color-buff-tile-bg: hsl(156 16% 20%);
    --color-buff-tile-border: hsl(156 28% 52% / 0.42);
    --color-buff-tile-hover: hsl(156 20% 24%);
    --color-buff-tile-glow: hsl(156 40% 60% / 0.12);
    --color-debuff-tile-bg: hsl(352 18% 20%);
    --color-debuff-tile-border: hsl(352 34% 56% / 0.46);
    --color-debuff-tile-hover: hsl(352 22% 24%);
    --color-debuff-tile-glow: hsl(352 40% 60% / 0.14);
    --color-neutral-tile-bg: hsl(208 18% 20%);
    --color-neutral-tile-border: hsl(206 20% 46% / 0.34);
    --color-neutral-tile-hover: hsl(202 22% 24%);
    --color-neutral-tile-glow: hsl(194 38% 68% / 0.08);
    --color-buff-indicator: hsl(156 40% 58%);
    --color-debuff-indicator: hsl(352 64% 60%);

    /* Common status colors */
    --color-heal: hsl(156 40% 58%);
    --color-gold: hsl(42 72% 68%);
    --color-amber: hsl(42 72% 62%);
    --color-amber-ui: hsl(42 72% 62%);
    --color-crit: hsl(352 64% 60%);
    --border-gold: hsl(42 56% 68% / 0.36);

    /* Overlays */
    --overlay-heavy: hsl(220 34% 5% / 0.82);
    --overlay-dark: hsl(216 24% 10% / 0.56);
    --overlay-medium: hsl(206 18% 12% / 0.3);
    --overlay-light: hsl(202 14% 14% / 0.14);
    --overlay-subtle: hsl(204 10% 14% / 0.08);
}

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

@keyframes crystalPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px hsl(194 34% 68% / 0.16),
            0 16px 34px hsl(220 34% 5% / 0.42);
    }
    50% {
        box-shadow:
            0 0 0 1px hsl(194 84% 78% / 0.28),
            0 20px 42px hsl(220 34% 5% / 0.52),
            0 0 24px hsl(180 72% 68% / 0.12);
    }
}

@keyframes shimmerFacet {
    0%, 100% { opacity: 0.36; transform: scale(1); }
    50% { opacity: 0.78; transform: scale(1.05); }
}

/* ==========================================================================
   Global Atmosphere
   ========================================================================= */

[data-theme="crystal-shard"] body,
[data-theme="crystal-shard"] .page-content,
[data-theme="crystal-shard"] .main-content,
[data-theme="crystal-shard"] .content-wrapper {
    background:
        radial-gradient(circle at 50% 0%, hsl(194 54% 28% / 0.24), transparent 22%),
        radial-gradient(circle at 14% 72%, hsl(180 34% 24% / 0.08), transparent 16%),
        radial-gradient(circle at 86% 18%, hsl(256 28% 24% / 0.1), transparent 16%),
        linear-gradient(180deg, hsl(220 34% 9%), hsl(214 30% 8%) 44%, hsl(206 32% 9%) 100%);
    color: var(--text-primary);
}

[data-theme="crystal-shard"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0 18%, hsl(194 84% 78% / 0.04) 22%, transparent 26% 48%, hsl(180 72% 68% / 0.04) 52%, transparent 56% 100%),
        linear-gradient(60deg, transparent 0 24%, hsl(256 48% 72% / 0.03) 28%, transparent 32% 100%);
    background-size: 420px 420px, 520px 520px;
    opacity: 0.62;
    z-index: 0;
}

[data-theme="crystal-shard"] body::after {
    content: '';
    position: fixed;
    left: 50%;
    top: 12%;
    width: 42rem;
    height: 42rem;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        linear-gradient(132deg, transparent 0 28%, hsl(194 84% 78% / 0.12) 34%, transparent 40% 58%, hsl(256 52% 74% / 0.08) 64%, transparent 70%),
        linear-gradient(48deg, transparent 0 20%, hsl(180 72% 68% / 0.08) 24%, transparent 30% 100%),
        radial-gradient(circle at 50% 44%, hsl(202 54% 98% / 0.1), transparent 30%);
    clip-path: polygon(50% 0%, 72% 10%, 100% 36%, 88% 76%, 58% 100%, 22% 92%, 0% 58%, 12% 18%);
    animation: shimmerFacet 9s ease-in-out infinite;
    filter: blur(1px);
    opacity: 0.48;
    z-index: 0;
}

[data-theme="crystal-shard"] .navigation-bar,
[data-theme="crystal-shard"] .content-box,
[data-theme="crystal-shard"] .dashboard-panel,
[data-theme="crystal-shard"] .modal-content,
[data-theme="crystal-shard"] .character-sheet-panel,
[data-theme="crystal-shard"] .inventory-section {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Shared Panels
   ========================================================================= */

[data-theme="crystal-shard"] .content-box,
[data-theme="crystal-shard"] .dashboard-panel,
[data-theme="crystal-shard"] .modal-content,
[data-theme="crystal-shard"] .equipment-panel,
[data-theme="crystal-shard"] .inventory-section,
[data-theme="crystal-shard"] .spell-tooltip,
[data-theme="crystal-shard"] .login-container,
[data-theme="crystal-shard"] .widget-tile,
[data-theme="crystal-shard"] .character-item,
[data-theme="crystal-shard"] .attribute-card,
[data-theme="crystal-shard"] .bereich-tile,
[data-theme="crystal-shard"] .spell-tile,
[data-theme="crystal-shard"] .resistance-tile {
    background:
        linear-gradient(180deg, hsl(206 28% 18% / 0.9), hsl(216 24% 12% / 0.94));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow:
        0 18px 38px hsl(220 34% 5% / 0.46),
        inset 0 1px 0 hsl(202 54% 98% / 0.08);
    backdrop-filter: blur(10px);
}

[data-theme="crystal-shard"] .content-box::before,
[data-theme="crystal-shard"] .dashboard-panel::before,
[data-theme="crystal-shard"] .modal-content::before,
[data-theme="crystal-shard"] .widget-tile::before,
[data-theme="crystal-shard"] .character-item::before,
[data-theme="crystal-shard"] .attribute-card::before,
[data-theme="crystal-shard"] .login-container::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: calc(var(--radius-xl) - 8px);
    border: 1px solid hsl(194 48% 78% / 0.12);
    pointer-events: none;
}

[data-theme="crystal-shard"] .content-box::after,
[data-theme="crystal-shard"] .dashboard-panel::after,
[data-theme="crystal-shard"] .widget-tile::after,
[data-theme="crystal-shard"] .attribute-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(135deg, hsl(194 84% 78% / 0.08), transparent 26%, transparent 64%, hsl(256 52% 74% / 0.06) 100%);
    opacity: 0.7;
    pointer-events: none;
}

[data-theme="crystal-shard"] .content-box:hover,
[data-theme="crystal-shard"] .dashboard-panel:hover,
[data-theme="crystal-shard"] .widget-tile:hover,
[data-theme="crystal-shard"] .character-item:hover,
[data-theme="crystal-shard"] .attribute-card:hover,
[data-theme="crystal-shard"] .bereich-tile:hover,
[data-theme="crystal-shard"] .spell-tile:hover {
    border-color: var(--border-strong);
    animation: crystalPulse 3s ease-in-out infinite;
}

/* ==========================================================================
   Typography and Icons
   ========================================================================= */

[data-theme="crystal-shard"] h1,
[data-theme="crystal-shard"] h2,
[data-theme="crystal-shard"] h3,
[data-theme="crystal-shard"] .widget-title,
[data-theme="crystal-shard"] .character-info h3,
[data-theme="crystal-shard"] .bereich-title,
[data-theme="crystal-shard"] .attribute-name,
[data-theme="crystal-shard"] #charNameLabel {
    color: hsl(194 78% 82%);
    text-shadow:
        0 0 12px hsl(194 84% 78% / 0.22),
        0 0 28px hsl(180 72% 68% / 0.1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme="crystal-shard"] .icon-themed,
[data-theme="crystal-shard"] .spell-icon,
[data-theme="crystal-shard"] .resistance-icon,
[data-theme="crystal-shard"] .currency-icon,
[data-theme="crystal-shard"] .buff-icon,
[data-theme="crystal-shard"] .tab_Icon,
[data-theme="crystal-shard"] .tab_btn img,
[data-theme="crystal-shard"] .nav-icon-btn img,
[data-theme="crystal-shard"] #div_iconbar_left img,
[data-theme="crystal-shard"] #div_iconbar_right img {
    filter: var(--icon-filter);
}

/* ==========================================================================
   Headers and Category Bars
   ========================================================================= */

[data-theme="crystal-shard"] .discipline-header,
[data-theme="crystal-shard"] .info-category-header,
[data-theme="crystal-shard"] .info-subcategory-header,
[data-theme="crystal-shard"] .itemtype-header {
    background:
        linear-gradient(135deg, hsl(198 42% 28%), hsl(216 24% 18%));
    color: hsl(194 76% 82%) !important;
    border: 1px solid hsl(194 54% 70% / 0.3);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 hsl(202 54% 98% / 0.08);
}

[data-theme="crystal-shard"] .discipline-header:hover,
[data-theme="crystal-shard"] .info-category-header:hover,
[data-theme="crystal-shard"] .itemtype-header:hover {
    background:
        linear-gradient(135deg, hsl(194 46% 32%), hsl(216 26% 20%));
}

[data-theme="crystal-shard"] .subskill-item.passive {
    background: hsl(210 22% 20% / 0.6) !important;
}

/* ==========================================================================
   Navigation
   ========================================================================= */

[data-theme="crystal-shard"] .navigation-bar,
[data-theme="crystal-shard"] .tab-top-navigation {
    background:
        linear-gradient(180deg, hsl(206 28% 18% / 0.98), hsl(216 28% 12% / 0.98));
    border-bottom: 1px solid hsl(194 38% 68% / 0.24);
    box-shadow:
        0 14px 30px hsl(220 34% 5% / 0.46),
        inset 0 1px 0 hsl(202 54% 98% / 0.08);
    backdrop-filter: blur(12px);
}

[data-theme="crystal-shard"] .tab_btn,
[data-theme="crystal-shard"] .tab_btn_vertical,
[data-theme="crystal-shard"] .tab-buttons .tab-btn,
[data-theme="crystal-shard"] .tab-navigation .tab-btn,
[data-theme="crystal-shard"] .tab_btn_horizontal,
[data-theme="crystal-shard"] .tab_btn_original {
    background:
        linear-gradient(180deg, hsl(202 34% 24%), hsl(216 26% 14%)) !important;
    border: 1px solid hsl(194 32% 60% / 0.22) !important;
    color: hsl(194 72% 82%) !important;
    box-shadow:
        inset 0 1px 0 hsl(202 54% 98% / 0.08),
        0 8px 18px hsl(220 34% 5% / 0.28);
}

[data-theme="crystal-shard"] .tab_btn:hover,
[data-theme="crystal-shard"] .tab_btn_vertical:hover,
[data-theme="crystal-shard"] .tab-buttons .tab-btn:hover,
[data-theme="crystal-shard"] .tab-navigation .tab-btn:hover,
[data-theme="crystal-shard"] .tab_btn_horizontal:hover,
[data-theme="crystal-shard"] .tab_btn_original:hover {
    background:
        linear-gradient(180deg, hsl(194 42% 30%), hsl(216 28% 16%)) !important;
    border-color: hsl(194 54% 74% / 0.44) !important;
    box-shadow:
        0 10px 22px hsl(220 34% 5% / 0.32),
        0 0 18px hsl(194 84% 78% / 0.1);
}

[data-theme="crystal-shard"] .tab_btn.active,
[data-theme="crystal-shard"] .tab_btn.active-tab,
[data-theme="crystal-shard"] .tab_btn_vertical.active,
[data-theme="crystal-shard"] .tab-buttons .tab-btn.active,
[data-theme="crystal-shard"] .tab-navigation .tab-btn.active,
[data-theme="crystal-shard"] .tab_btn_horizontal.active,
[data-theme="crystal-shard"] .tab_btn_horizontal.main-tab,
[data-theme="crystal-shard"] .tab_btn_horizontal.main-tab.active,
[data-theme="crystal-shard"] .tab_btn_original.active,
[data-theme="crystal-shard"] #navi-btn-combat.tab_btn.combat-active {
    background:
        linear-gradient(135deg, hsl(194 68% 58%), hsl(256 38% 60%)) !important;
    border-color: hsl(202 66% 96%) !important;
    color: hsl(202 54% 98%) !important;
    box-shadow:
        0 0 0 3px hsl(194 84% 70% / 0.16),
        0 14px 28px hsl(220 34% 5% / 0.34),
        0 0 24px hsl(180 72% 68% / 0.14) !important;
}

[data-theme="crystal-shard"] .tab_btn.active-tab .tab_Icon,
[data-theme="crystal-shard"] .tab_btn.active-tab img,
[data-theme="crystal-shard"] .tab_btn_vertical.active img,
[data-theme="crystal-shard"] .tab-buttons .tab-btn.active .tab_Icon,
[data-theme="crystal-shard"] .tab-navigation .tab-btn.active .tab_Icon,
[data-theme="crystal-shard"] .tab_btn_horizontal.active img,
[data-theme="crystal-shard"] .tab_btn_horizontal.main-tab img,
[data-theme="crystal-shard"] .tab_btn_original.active img,
[data-theme="crystal-shard"] #navi-btn-combat.tab_btn.combat-active img {
    filter:
        brightness(0) saturate(100%) invert(99%) sepia(6%)
        saturate(250%) hue-rotate(176deg) brightness(104%) contrast(99%) !important;
}

/* ==========================================================================
   Buttons and Inputs
   ========================================================================= */

[data-theme="crystal-shard"] button,
[data-theme="crystal-shard"] .btn,
[data-theme="crystal-shard"] .roll-button,
[data-theme="crystal-shard"] input[type="button"],
[data-theme="crystal-shard"] input[type="submit"] {
    background:
        linear-gradient(135deg, hsl(194 68% 58%), hsl(216 48% 42%));
    color: hsl(202 54% 98%);
    border: 1px solid hsl(194 42% 70% / 0.34);
    border-radius: var(--radius-lg);
    box-shadow:
        0 10px 22px hsl(220 34% 5% / 0.34),
        inset 0 1px 0 hsl(202 54% 98% / 0.16);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

[data-theme="crystal-shard"] button:hover,
[data-theme="crystal-shard"] .btn:hover,
[data-theme="crystal-shard"] .roll-button:hover,
[data-theme="crystal-shard"] input[type="button"]:hover,
[data-theme="crystal-shard"] input[type="submit"]:hover {
    background:
        linear-gradient(135deg, hsl(194 74% 64%), hsl(256 44% 62%));
    box-shadow:
        0 14px 28px hsl(220 34% 5% / 0.38),
        0 0 20px hsl(194 84% 78% / 0.12);
}

[data-theme="crystal-shard"] input,
[data-theme="crystal-shard"] textarea,
[data-theme="crystal-shard"] select,
[data-theme="crystal-shard"] .select,
[data-theme="crystal-shard"] .form-select,
[data-theme="crystal-shard"] .equipment-select {
    background:
        linear-gradient(180deg, hsl(206 24% 18%), hsl(216 24% 14%));
    border: 1px solid hsl(194 24% 58% / 0.2);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 hsl(202 54% 98% / 0.06);
}

[data-theme="crystal-shard"] input:focus,
[data-theme="crystal-shard"] textarea:focus,
[data-theme="crystal-shard"] select:focus,
[data-theme="crystal-shard"] .select:focus,
[data-theme="crystal-shard"] .form-select:focus,
[data-theme="crystal-shard"] .equipment-select:focus {
    border-color: hsl(194 84% 70%);
    box-shadow:
        0 0 0 4px var(--color-focus-ring),
        0 0 18px hsl(194 84% 70% / 0.12);
    outline: none;
}

[data-theme="crystal-shard"] select,
[data-theme="crystal-shard"] .select,
[data-theme="crystal-shard"] .form-select,
[data-theme="crystal-shard"] .equipment-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2396ecf7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px;
    padding-right: 2rem;
}

/* ==========================================================================
   Tables
   ========================================================================= */

[data-theme="crystal-shard"] table {
    background: hsl(210 24% 14% / 0.96);
    border: 1px solid hsl(194 20% 54% / 0.16);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

[data-theme="crystal-shard"] th {
    background: hsl(198 32% 24% / 0.34);
    color: hsl(194 78% 82%);
}

[data-theme="crystal-shard"] td {
    background: hsl(210 22% 15% / 0.92);
    color: var(--text-primary);
    border-bottom: 1px solid hsl(194 14% 46% / 0.1);
}

[data-theme="crystal-shard"] tr:hover td {
    background: hsl(202 24% 19% / 0.96);
}

/* ==========================================================================
   Cards, Widgets, Login
   ========================================================================= */

[data-theme="crystal-shard"] .widget-tile,
[data-theme="crystal-shard"] .character-item {
    overflow: hidden;
}

[data-theme="crystal-shard"] .character-item:hover,
[data-theme="crystal-shard"] .widget-tile:hover {
    transform: translateY(-3px);
}

[data-theme="crystal-shard"] .character-item::after,
[data-theme="crystal-shard"] .widget-tile::after,
[data-theme="crystal-shard"] .login-container::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 16px;
    width: 14px;
    height: 14px;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    background:
        linear-gradient(135deg, hsl(202 54% 98%), hsl(194 84% 70%) 48%, hsl(256 52% 74%) 100%);
    box-shadow:
        18px 0 0 -5px hsl(180 72% 68% / 0.68),
        0 18px 0 -5px hsl(194 84% 78% / 0.68);
    animation: shimmerFacet 4s ease-in-out infinite;
}

[data-theme="crystal-shard"] .login-container {
    border-radius: var(--radius-2xl);
}

/* ==========================================================================
   Attribute Cards and Stats
   ========================================================================= */

[data-theme="crystal-shard"] .attribute-cards-container {
    background:
        linear-gradient(180deg, hsl(206 22% 14% / 0.42), hsl(216 20% 12% / 0.42));
    border-radius: var(--radius-2xl);
}

[data-theme="crystal-shard"] .attribute-card {
    position: relative;
}

[data-theme="crystal-shard"] .attribute-card::after {
    content: '';
    position: absolute;
    inset: 12px auto auto 12px;
    width: 26px;
    height: 26px;
    clip-path: polygon(50% 0%, 100% 35%, 84% 100%, 16% 100%, 0% 35%);
    background: linear-gradient(135deg, hsl(202 54% 98% / 0.18), hsl(194 84% 70% / 0.12));
    border: 1px solid hsl(194 54% 74% / 0.24);
    pointer-events: none;
}

[data-theme="crystal-shard"] .attribute-icon-container {
    background:
        linear-gradient(135deg, hsl(194 46% 30%), hsl(216 30% 24%));
    color: hsl(194 78% 82%);
}

[data-theme="crystal-shard"] .attribute-value,
[data-theme="crystal-shard"] .stat-value,
[data-theme="crystal-shard"] .tt-total-label,
[data-theme="crystal-shard"] .tt-total-value {
    color: hsl(194 84% 78%);
}

[data-theme="crystal-shard"] .attribute-bonus {
    background: hsl(156 18% 20%);
    color: hsl(156 40% 64%);
}

[data-theme="crystal-shard"] .attribute-subskills,
[data-theme="crystal-shard"] .roll-result {
    background: hsl(208 20% 16% / 0.88);
    border: 1px solid hsl(194 18% 52% / 0.16);
    border-radius: var(--radius-lg);
}

[data-theme="crystal-shard"] .subskill-item {
    border-bottom-color: hsl(194 14% 46% / 0.1);
}

[data-theme="crystal-shard"] .subskill-name {
    color: hsl(180 68% 76%);
}

[data-theme="crystal-shard"] .subskill-effect,
[data-theme="crystal-shard"] .stat-label {
    color: hsl(202 24% 78%);
}

[data-theme="crystal-shard"] .attribute-card.physical {
    border-left-color: hsl(156 40% 58%);
}

[data-theme="crystal-shard"] .attribute-card.mental {
    border-left-color: hsl(194 84% 70%);
}

[data-theme="crystal-shard"] .attribute-card.social {
    border-left-color: hsl(42 74% 70%);
}

[data-theme="crystal-shard"] .attribute-card.special {
    border-left-color: hsl(256 52% 74%);
}

[data-theme="crystal-shard"] .stat-item {
    background: hsl(208 18% 17% / 0.9);
    border: 1px solid hsl(194 16% 48% / 0.12);
    border-radius: var(--radius-lg);
}

[data-theme="crystal-shard"] .stat-item:hover {
    background: hsl(202 22% 20% / 0.94);
}

/* ==========================================================================
   Inventory, Spellbook, Resistances
   ========================================================================= */

[data-theme="crystal-shard"] .currency-tile,
[data-theme="crystal-shard"] .resistance-tile,
[data-theme="crystal-shard"] .buff-tile,
[data-theme="crystal-shard"] .inventory-slot,
[data-theme="crystal-shard"] .inventory-item {
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 hsl(202 54% 98% / 0.04);
}

[data-theme="crystal-shard"] .currency-add-icon {
    color: hsl(194 76% 78%);
}

[data-theme="crystal-shard"] .buff-duration {
    background-color: hsl(208 18% 22% / 0.72);
    color: hsl(202 36% 90%);
}

[data-theme="crystal-shard"] .no-buffs-message,
[data-theme="crystal-shard"] .resistance-stat-label {
    color: hsl(206 18% 68%);
}

[data-theme="crystal-shard"] .equipped-indicator-icon {
    background-color: hsl(194 56% 52%);
    filter: drop-shadow(0 0 6px hsl(194 84% 78% / 0.4));
}

[data-theme="crystal-shard"] .spell-tile.temp-spell {
    border-color: var(--spell-temp-border) !important;
    background:
        linear-gradient(180deg, var(--spell-temp-bg), hsl(216 22% 14%)) !important;
}

[data-theme="crystal-shard"] .spell-tile.temp-spell:hover {
    background:
        linear-gradient(180deg, var(--spell-temp-hover-bg), hsl(202 24% 18%)) !important;
}

[data-theme="crystal-shard"] .spell-name,
[data-theme="crystal-shard"] .spell-progress {
    color: hsl(202 36% 92%);
}

[data-theme="crystal-shard"] .spell-cost {
    color: hsl(194 68% 74%);
}

/* ==========================================================================
   Bars and Progress
   ========================================================================= */

[data-theme="crystal-shard"] .progress-container,
[data-theme="crystal-shard"] .bar-track,
[data-theme="crystal-shard"] .resource-bar,
[data-theme="crystal-shard"] .weight-bar-container {
    background:
        linear-gradient(180deg, hsl(208 18% 14%), hsl(220 22% 10%)) !important;
    border: 1px solid hsl(194 14% 46% / 0.16) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 2px 6px hsl(220 34% 5% / 0.44),
        inset 0 1px 0 hsl(202 54% 98% / 0.03);
}

[data-theme="crystal-shard"] #healthText,
[data-theme="crystal-shard"] #magicText,
[data-theme="crystal-shard"] #enduranceText {
    color: hsl(202 54% 98%);
    text-shadow: 0 0 10px hsl(220 34% 5% / 0.6);
}

[data-theme="crystal-shard"] .progress-bar,
[data-theme="crystal-shard"] .progress-fill,
[data-theme="crystal-shard"] .bar-fill {
    border-radius: 999px !important;
    overflow: hidden;
}

[data-theme="crystal-shard"] .health-bar,
[data-theme="crystal-shard"] .hp-bar-fill {
    background:
        linear-gradient(90deg, hsl(190 48% 38%) 0%, hsl(198 76% 58%) 56%, hsl(180 72% 72%) 100%) !important;
    box-shadow: 0 0 14px hsl(194 84% 70% / 0.16) !important;
}

[data-theme="crystal-shard"] .magic-bar,
[data-theme="crystal-shard"] .mana-bar-fill,
[data-theme="crystal-shard"] .energy-bar-fill {
    background:
        linear-gradient(90deg, hsl(228 42% 40%) 0%, hsl(256 54% 64%) 56%, hsl(194 76% 76%) 100%) !important;
    box-shadow: 0 0 16px hsl(256 52% 74% / 0.16) !important;
}

[data-theme="crystal-shard"] .endurance-bar,
[data-theme="crystal-shard"] .stamina-bar-fill {
    background:
        linear-gradient(90deg, hsl(180 34% 42%) 0%, hsl(194 62% 58%) 55%, hsl(202 84% 86%) 100%) !important;
    box-shadow: 0 0 14px hsl(194 84% 78% / 0.14) !important;
}

[data-theme="crystal-shard"] .weight-progress-bar.weight-ok,
[data-theme="crystal-shard"] .weight-fill,
[data-theme="crystal-shard"] .encumbrance-fill {
    background:
        linear-gradient(90deg, hsl(156 30% 42%) 0%, hsl(156 40% 58%) 100%) !important;
}

[data-theme="crystal-shard"] .weight-progress-bar.weight-warn {
    background:
        linear-gradient(90deg, hsl(34 54% 42%) 0%, hsl(42 72% 62%) 100%) !important;
}

[data-theme="crystal-shard"] .weight-progress-bar.weight-crit {
    background:
        linear-gradient(90deg, hsl(340 44% 40%) 0%, hsl(352 64% 60%) 100%) !important;
}

/* ==========================================================================
   Tooltips
   ========================================================================= */

[data-theme="crystal-shard"] .unified-tooltip,
[data-theme="crystal-shard"] .spell-tooltip,
[data-theme="crystal-shard"] #item-tooltip {
    background:
        linear-gradient(180deg, hsl(206 28% 16% / 0.98), hsl(216 24% 12% / 0.98));
    border: 1px solid hsl(194 28% 64% / 0.24);
    border-radius: var(--radius-xl);
    color: var(--color-tooltip-text);
    box-shadow:
        0 18px 40px hsl(220 34% 5% / 0.5),
        0 0 18px hsl(194 84% 78% / 0.08);
    backdrop-filter: blur(12px);
}

[data-theme="crystal-shard"] .itooltip-title,
[data-theme="crystal-shard"] .skilltooltip-title,
[data-theme="crystal-shard"] .attrtooltip-title,
[data-theme="crystal-shard"] .stattooltip-title,
[data-theme="crystal-shard"] .unified-tooltip .tooltip-title {
    color: hsl(194 78% 82%) !important;
}

[data-theme="crystal-shard"] .tt-section {
    background: hsl(206 22% 20% / 0.72);
    border-radius: var(--radius-md);
}

[data-theme="crystal-shard"] .tt-sep-accent {
    border-top-color: hsl(194 54% 74%);
}

/* ==========================================================================
   Toggles and Controls
   ========================================================================= */

[data-theme="crystal-shard"] .twohanded-toggle {
    background: transparent !important;
    border: 2px solid hsl(194 18% 52%);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 hsl(202 54% 98% / 0.04);
}

[data-theme="crystal-shard"] .twohanded-toggle:hover {
    background: hsl(202 24% 20% / 0.34) !important;
    border-color: hsl(194 54% 74%);
    box-shadow: 0 0 12px hsl(194 84% 78% / 0.1);
}

[data-theme="crystal-shard"] .twohanded-toggle.active {
    background:
        linear-gradient(135deg, hsl(194 68% 58%), hsl(256 38% 60%)) !important;
    border-color: hsl(202 66% 96%);
}

/* ==========================================================================
   Scrollbar and Selection
   ========================================================================= */

[data-theme="crystal-shard"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="crystal-shard"] ::-webkit-scrollbar-track {
    background: hsl(216 24% 12%);
}

[data-theme="crystal-shard"] ::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, hsl(198 46% 38%), hsl(216 26% 24%));
    border-radius: 999px;
    border: 2px solid hsl(216 24% 12%);
}

[data-theme="crystal-shard"] ::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, hsl(194 68% 58%), hsl(256 38% 60%));
    box-shadow: 0 0 12px hsl(194 84% 78% / 0.24);
}

[data-theme="crystal-shard"] ::selection {
    background: hsl(194 84% 70% / 0.3);
    color: hsl(216 32% 10%);
}

[data-theme="crystal-shard"] ::-moz-selection {
    background: hsl(194 84% 70% / 0.3);
    color: hsl(216 32% 10%);
}
[data-theme="crystal-shard"] .toxicity-container {
    border-color: var(--color-toxicity) !important;
}

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

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