/* ==========================================================================
   RUNIC THEME: Cotton Candy Reforged
   Sugar blush, cherry bows, pearl gloss, candy ribbons, and kawaii sparkle.
   ========================================================================= */

[data-theme="cotton-candy"] {
    /* Core hue system */
    --hue-primary: 338;
    --hue-accent: 356;
    --hue-gm: 286;
    --hue-danger: 350;
    --hue-warning: 24;
    --hue-success: 148;
    --hue-toxicity: 104;
    --hue-neutral: 332;

    --sat-primary: 72%;
    --lit-primary: 56%;
    --lit-primary-hover: 62%;

    --sat-accent: 82%;
    --lit-accent: 58%;
    --lit-accent-hover: 64%;

    --sat-gm: 42%;
    --lit-gm: 58%;
    --lit-gm-text: 96%;

    --sat-danger: 72%;
    --lit-danger: 54%;
    --lit-danger-hover: 60%;

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

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

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

    --lightness-bg: 96%;

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

    --font-sans: 'Fredoka', 'Baloo 2', 'Quicksand', 'Trebuchet MS', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    --duration-75: 120ms;
    --duration-150: 220ms;
    --duration-250: 340ms;
    --duration-300: 460ms;
    --duration-400: 860ms;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Identity */
    --milk-white: hsl(350 100% 99%);
    --marshmallow: hsl(344 100% 97%);
    --blush-cream: hsl(340 82% 94%);
    --powder-pink: hsl(336 80% 88%);
    --candy-pink: hsl(336 86% 78%);
    --bubblegum: hsl(336 92% 68%);
    --cherry-bow: hsl(352 82% 58%);
    --strawberry-glaze: hsl(2 88% 66%);
    --peach-frosting: hsl(22 100% 84%);
    --butter-cream: hsl(48 100% 88%);
    --mint-macaroon: hsl(148 42% 82%);
    --lavender-ribbon: hsl(286 56% 84%);
    --plum-ink: hsl(330 30% 24%);
    --rosewood-ink: hsl(342 34% 18%);

    /* Surfaces */
    --bg-page: hsl(338 100% 97%);
    --bg-primary: hsl(338 88% 95%);
    --bg-secondary: hsl(336 84% 92% / 0.9);
    --bg-tertiary: hsl(336 72% 89% / 0.95);
    --bg-card: hsl(350 100% 98% / 0.95);
    --bg-hover: hsl(336 82% 86% / 0.72);
    --bg-input: hsl(350 100% 99%);

    --surface-elevated: hsl(344 96% 96%);
    --surface-overlay: hsl(350 100% 98% / 0.98);
    --surface-panel: hsl(338 76% 92% / 0.97);

    /* Text */
    --text-primary: hsl(338 34% 20%);
    --text-secondary: hsl(336 24% 32%);
    --text-label: hsl(346 62% 42%);
    --text-light: hsl(0 0% 100%);
    --text-muted: hsl(336 14% 46% / 0.86);
    --text-faint: hsl(336 12% 62%);

    /* Borders and shadows */
    --border-color: hsl(338 64% 74% / 0.56);
    --border-subtle: hsl(336 42% 76% / 0.32);
    --border-strong: hsl(346 72% 62% / 0.82);

    --shadow-glow-primary:
        0 16px 34px hsl(338 74% 76% / 0.28),
        0 0 36px hsl(346 90% 72% / 0.18);
    --shadow-glow-accent:
        0 14px 28px hsl(352 86% 66% / 0.2);
    --shadow-glow-danger:
        0 12px 26px hsl(350 72% 58% / 0.22);
    --shadow-glow-gold:
        0 10px 24px hsl(42 100% 82% / 0.28);

    /* Icons */
    --icon-color: hsl(346 72% 56%);
    --icon-filter: brightness(0) saturate(100%) invert(41%) sepia(54%)
        saturate(1223%) hue-rotate(303deg) brightness(94%) contrast(93%);

    /* Focus and tooltip */
    --color-focus-ring: hsl(346 90% 68% / 0.28);

    --color-tooltip-bg: hsl(350 100% 98% / 0.98);
    --color-tooltip-highlight: hsl(346 72% 46%);
    --color-tooltip-effect-bg: hsl(336 88% 72% / 0.12);
    --color-tooltip-text: hsl(338 28% 18%);
    --color-tooltip-label: hsl(342 34% 30%);
    --color-tooltip-muted: hsl(336 16% 42%);
    --color-tooltip-dim: hsl(336 10% 56%);
    --color-tooltip-pos: hsl(148 44% 34%);
    --color-tooltip-neg: hsl(350 62% 46%);
    --color-tooltip-separator: hsl(338 56% 74% / 0.48);
    --color-tooltip-section-bg: hsl(336 84% 92% / 0.86);

    /* Quality colors */
    --quality-0-color1: rgb(192, 176, 184);
    --quality-0-color2: rgb(152, 136, 145);
    --quality-1-color1: rgb(255, 240, 246);
    --quality-1-color2: rgb(227, 197, 210);
    --quality-2-color1: rgb(162, 226, 190);
    --quality-2-color2: rgb(102, 183, 142);
    --quality-3-color1: rgb(148, 208, 248);
    --quality-3-color2: rgb(92, 164, 214);
    --quality-4-color1: rgb(214, 174, 248);
    --quality-4-color2: rgb(170, 120, 220);
    --quality-5-color1: rgb(255, 223, 148);
    --quality-5-color2: rgb(244, 178, 86);
    --quality-6-color1: rgb(248, 144, 170);
    --quality-6-color2: rgb(212, 88, 126);
    --quality-7-color1: rgb(255, 210, 232);
    --quality-7-color2: rgb(213, 166, 242);

    /* Spell / element system */
    --element-fire-bg: hsl(12 100% 92% / 0.8);
    --element-fire-border: hsl(12 82% 68% / 0.56);
    --element-fire-hover: hsl(12 100% 88% / 0.94);
    --element-fire-glow: hsl(12 86% 68% / 0.18);

    --element-water-bg: hsl(202 86% 93% / 0.8);
    --element-water-border: hsl(202 70% 70% / 0.56);
    --element-water-hover: hsl(202 92% 89% / 0.94);
    --element-water-glow: hsl(202 74% 70% / 0.18);

    --element-earth-bg: hsl(96 56% 92% / 0.82);
    --element-earth-border: hsl(100 36% 64% / 0.56);
    --element-earth-hover: hsl(96 64% 88% / 0.94);
    --element-earth-glow: hsl(100 42% 60% / 0.18);

    --element-wind-bg: hsl(188 54% 95% / 0.78);
    --element-wind-border: hsl(186 34% 74% / 0.5);
    --element-wind-hover: hsl(188 62% 91% / 0.92);
    --element-wind-glow: hsl(186 36% 72% / 0.16);

    --element-light-bg: hsl(50 100% 92% / 0.84);
    --element-light-border: hsl(44 92% 72% / 0.62);
    --element-light-hover: hsl(50 100% 88% / 0.96);
    --element-light-glow: hsl(48 100% 76% / 0.24);

    --element-shadow-bg: hsl(282 64% 93% / 0.8);
    --element-shadow-border: hsl(282 42% 70% / 0.54);
    --element-shadow-hover: hsl(282 72% 89% / 0.94);
    --element-shadow-glow: hsl(282 48% 68% / 0.18);

    --element-death-bg: hsl(322 46% 93% / 0.8);
    --element-death-border: hsl(324 38% 68% / 0.54);
    --element-death-hover: hsl(322 54% 89% / 0.94);
    --element-death-glow: hsl(324 42% 66% / 0.18);

    --element-life-bg: hsl(146 58% 92% / 0.82);
    --element-life-border: hsl(148 42% 64% / 0.56);
    --element-life-hover: hsl(146 64% 88% / 0.94);
    --element-life-glow: hsl(148 42% 62% / 0.18);

    --element-arcane-bg: hsl(268 70% 94% / 0.8);
    --element-arcane-border: hsl(270 48% 72% / 0.56);
    --element-arcane-hover: hsl(268 78% 90% / 0.94);
    --element-arcane-glow: hsl(270 52% 70% / 0.18);

    --element-mind-bg: hsl(222 64% 95% / 0.8);
    --element-mind-border: hsl(224 40% 74% / 0.52);
    --element-mind-hover: hsl(222 72% 91% / 0.94);
    --element-mind-glow: hsl(224 42% 70% / 0.18);

    --element-physical-bg: hsl(338 36% 95% / 0.82);
    --element-physical-border: hsl(338 28% 74% / 0.5);
    --element-physical-hover: hsl(338 46% 91% / 0.94);
    --element-physical-glow: hsl(338 30% 72% / 0.16);

    --spell-temp-bg: hsl(350 92% 96%);
    --spell-temp-border: hsl(338 56% 70% / 0.76);
    --spell-temp-hover-bg: hsl(338 96% 92%);
    --spell-temp-hover-glow: hsl(346 86% 70% / 0.16);
    --spell-temp-badge-bg: hsl(352 82% 58%);
    --spell-temp-header-bg: hsl(336 84% 92%);
    --spell-temp-header-hover-bg: hsl(336 90% 88%);
    --spell-tile-hover-bg: hsl(336 92% 90%);

    /* Inventory / currency / buffs */
    --item-tile-base: hsl(350 100% 98%);
    --item-tile-border: hsl(338 54% 72% / 0.62);
    --item-tile-add-bg: hsl(338 90% 94%);
    --item-tile-add-border: hsl(338 44% 72% / 0.62);
    --item-tile-add-hover: hsl(336 96% 90%);
    --item-tile-add-border-hover: hsl(346 66% 60% / 0.82);

    --weight-display-bg: hsl(336 84% 92%);
    --weight-ok-color: hsl(148 44% 34%);
    --weight-warn-color: hsl(24 74% 50%);
    --weight-crit-color: hsl(350 62% 46%);
    --weight-bar-track-bg: hsl(336 40% 82%);

    --currency-tile-bg: hsl(350 100% 98%);
    --currency-tile-border: hsl(338 50% 72% / 0.58);
    --currency-tile-hover-bg: hsl(336 92% 92%);
    --currency-tile-hover-shadow: hsl(346 88% 72% / 0.18);
    --currency-quantity-bg: hsl(48 100% 86%);
    --currency-add-bg: hsl(336 88% 94%);
    --currency-add-border: hsl(338 44% 72% / 0.62);
    --currency-add-hover-bg: hsl(336 96% 90%);
    --currency-add-hover-border: hsl(346 66% 60% / 0.82);

    --color-buff-tile-bg: hsl(146 56% 92%);
    --color-buff-tile-border: hsl(148 36% 62% / 0.54);
    --color-buff-tile-hover: hsl(146 64% 88%);
    --color-buff-tile-glow: hsl(148 40% 62% / 0.14);
    --color-debuff-tile-bg: hsl(350 80% 94%);
    --color-debuff-tile-border: hsl(350 48% 66% / 0.56);
    --color-debuff-tile-hover: hsl(350 88% 90%);
    --color-debuff-tile-glow: hsl(350 54% 62% / 0.16);
    --color-neutral-tile-bg: hsl(336 62% 94%);
    --color-neutral-tile-border: hsl(338 32% 72% / 0.52);
    --color-neutral-tile-hover: hsl(336 72% 90%);
    --color-neutral-tile-glow: hsl(346 60% 72% / 0.12);
    --color-buff-indicator: hsl(148 44% 34%);
    --color-debuff-indicator: hsl(350 62% 46%);

    /* Common status colors */
    --color-heal: hsl(148 44% 34%);
    --color-gold: hsl(28 86% 58%);
    --color-amber: hsl(24 86% 62%);
    --color-amber-ui: hsl(24 86% 62%);
    --color-crit: hsl(350 72% 54%);
    --border-gold: hsl(42 100% 78% / 0.48);

    /* Overlays */
    --overlay-heavy: hsl(330 24% 18% / 0.62);
    --overlay-dark: hsl(330 20% 18% / 0.44);
    --overlay-medium: hsl(330 18% 18% / 0.26);
    --overlay-light: hsl(330 16% 18% / 0.12);
    --overlay-subtle: hsl(330 14% 18% / 0.06);
}

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

@keyframes kittyShimmer {
    0%, 100% {
        box-shadow:
            0 0 0 1px hsl(338 68% 72% / 0.26),
            0 12px 24px hsl(338 70% 78% / 0.16);
    }
    50% {
        box-shadow:
            0 0 0 1px hsl(346 82% 66% / 0.4),
            0 18px 36px hsl(346 88% 74% / 0.24),
            0 0 24px hsl(42 100% 82% / 0.22);
    }
}

@keyframes bowFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-4px) scale(1.02);
    }
}

@keyframes pearlTwinkle {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

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

[data-theme="cotton-candy"] body,
[data-theme="cotton-candy"] .page-content,
[data-theme="cotton-candy"] .main-content,
[data-theme="cotton-candy"] .content-wrapper {
    background:
        radial-gradient(circle at top left, hsl(48 100% 90% / 0.68), transparent 24%),
        radial-gradient(circle at top right, hsl(286 72% 90% / 0.48), transparent 22%),
        radial-gradient(circle at 50% 0%, hsl(336 100% 94% / 0.92), transparent 48%),
        linear-gradient(180deg, hsl(350 100% 99%), hsl(338 100% 96%) 38%, hsl(336 82% 93%) 100%);
    color: var(--text-primary);
}

[data-theme="cotton-candy"] .page-content::before,
[data-theme="cotton-candy"] .main-content::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, hsl(350 100% 100% / 0.9) 0 1.5px, transparent 2px),
        radial-gradient(circle at 72% 18%, hsl(48 100% 92% / 0.82) 0 1.5px, transparent 2px),
        radial-gradient(circle at 82% 64%, hsl(286 72% 92% / 0.72) 0 1.5px, transparent 2px),
        radial-gradient(circle at 30% 72%, hsl(336 100% 98% / 0.86) 0 1.5px, transparent 2px);
    background-size: 180px 180px, 220px 220px, 240px 240px, 200px 200px;
    opacity: 0.5;
    z-index: 0;
}

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

[data-theme="cotton-candy"] .icon-themed,
[data-theme="cotton-candy"] .spell-icon,
[data-theme="cotton-candy"] .resistance-icon,
[data-theme="cotton-candy"] .currency-icon,
[data-theme="cotton-candy"] .buff-icon,
[data-theme="cotton-candy"] .inventory-item img,
[data-theme="cotton-candy"] .inventory-slot img,
[data-theme="cotton-candy"] .spell-tile img,
[data-theme="cotton-candy"] .resistance-tile img {
    filter: var(--icon-filter) !important;
    opacity: 1 !important;
}

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

[data-theme="cotton-candy"] .content-box,
[data-theme="cotton-candy"] .dashboard-panel,
[data-theme="cotton-candy"] .modal-content,
[data-theme="cotton-candy"] .equipment-panel,
[data-theme="cotton-candy"] .inventory-section,
[data-theme="cotton-candy"] .spell-tooltip,
[data-theme="cotton-candy"] .login-container,
[data-theme="cotton-candy"] .widget-tile,
[data-theme="cotton-candy"] .character-item,
[data-theme="cotton-candy"] .attribute-card,
[data-theme="cotton-candy"] .bereich-tile {
    background:
        linear-gradient(180deg, hsl(350 100% 99% / 0.98), hsl(338 82% 94% / 0.98));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow:
        0 12px 34px hsl(338 62% 76% / 0.14),
        inset 0 1px 0 hsl(0 0% 100% / 0.95);
}

[data-theme="cotton-candy"] .content-box::before,
[data-theme="cotton-candy"] .dashboard-panel::before,
[data-theme="cotton-candy"] .modal-content::before,
[data-theme="cotton-candy"] .widget-tile::before,
[data-theme="cotton-candy"] .character-item::before,
[data-theme="cotton-candy"] .attribute-card::before,
[data-theme="cotton-candy"] .login-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg, hsl(0 0% 100% / 0.58), transparent 42%),
        radial-gradient(circle at top right, hsl(48 100% 88% / 0.22), transparent 24%);
}

[data-theme="cotton-candy"] .content-box:hover,
[data-theme="cotton-candy"] .dashboard-panel:hover,
[data-theme="cotton-candy"] .widget-tile:hover,
[data-theme="cotton-candy"] .character-item:hover,
[data-theme="cotton-candy"] .attribute-card:hover,
[data-theme="cotton-candy"] .bereich-tile:hover {
    border-color: var(--border-strong);
    box-shadow:
        0 18px 42px hsl(338 70% 76% / 0.2),
        0 0 24px hsl(346 88% 78% / 0.14);
}

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

[data-theme="cotton-candy"] .discipline-header,
[data-theme="cotton-candy"] .info-category-header,
[data-theme="cotton-candy"] .info-subcategory-header,
[data-theme="cotton-candy"] .itemtype-header {
    background:
        linear-gradient(135deg, hsl(336 92% 86%), hsl(350 100% 92%));
    color: hsl(342 56% 28%) !important;
    border: 1px solid hsl(338 58% 72% / 0.5);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.82);
}

[data-theme="cotton-candy"] .discipline-header:hover,
[data-theme="cotton-candy"] .info-category-header:hover,
[data-theme="cotton-candy"] .itemtype-header:hover {
    background:
        linear-gradient(135deg, hsl(336 96% 82%), hsl(350 100% 88%));
}

[data-theme="cotton-candy"] .subskill-item.passive {
    background: hsl(336 66% 94% / 0.82) !important;
}

/* ==========================================================================
   Navigation and Tabs
   ========================================================================= */

[data-theme="cotton-candy"] .navigation-bar {
    background:
        linear-gradient(180deg, hsl(350 100% 99% / 0.96), hsl(336 78% 91% / 0.96));
    border-bottom: 2px solid hsl(338 56% 76% / 0.42);
    box-shadow:
        0 10px 28px hsl(338 52% 76% / 0.12),
        inset 0 1px 0 hsl(0 0% 100% / 0.96);
}

[data-theme="cotton-candy"] .tab-top-navigation {
    background:
        linear-gradient(180deg, hsl(350 100% 99% / 0.98), hsl(336 74% 91% / 0.97));
    border-bottom: 2px solid hsl(346 72% 62% / 0.78);
    box-shadow:
        0 12px 30px hsl(338 52% 74% / 0.14),
        inset 0 1px 0 hsl(0 0% 100% / 0.98);
}

[data-theme="cotton-candy"] .tab_btn_horizontal,
[data-theme="cotton-candy"] .tab_btn_original {
    background:
        linear-gradient(180deg, hsl(350 100% 98%), hsl(336 66% 90%)) !important;
    border: 2px solid hsl(338 46% 72% / 0.62) !important;
    color: hsl(338 34% 28%) !important;
    box-shadow:
        inset 0 1px 0 hsl(0 0% 100% / 0.95),
        0 8px 18px hsl(338 38% 74% / 0.12);
}

[data-theme="cotton-candy"] .tab_btn_horizontal:hover,
[data-theme="cotton-candy"] .tab_btn_original:hover {
    background:
        linear-gradient(180deg, hsl(350 100% 97%), hsl(336 84% 86%)) !important;
    border-color: hsl(346 68% 62% / 0.82) !important;
    box-shadow:
        0 12px 24px hsl(338 46% 72% / 0.16),
        0 0 14px hsl(42 100% 84% / 0.1);
}

[data-theme="cotton-candy"] .tab_btn_horizontal img,
[data-theme="cotton-candy"] .tab_btn_original img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(24%)
        saturate(1222%) hue-rotate(300deg) brightness(94%) contrast(92%) !important;
    opacity: 1 !important;
}

[data-theme="cotton-candy"] .tab_btn_horizontal.active,
[data-theme="cotton-candy"] .tab_btn_horizontal.main-tab,
[data-theme="cotton-candy"] .tab_btn_horizontal.main-tab.active,
[data-theme="cotton-candy"] .tab_btn_original.active {
    background:
        linear-gradient(135deg, hsl(346 86% 66%), hsl(352 84% 58%)) !important;
    border-color: hsl(350 100% 92%) !important;
    color: hsl(0 0% 100%) !important;
    box-shadow:
        0 0 0 3px hsl(346 82% 70% / 0.2),
        0 14px 28px hsl(350 72% 56% / 0.24),
        0 0 18px hsl(42 100% 84% / 0.14) !important;
}

[data-theme="cotton-candy"] .tab_btn_horizontal.active img,
[data-theme="cotton-candy"] .tab_btn_horizontal.main-tab img,
[data-theme="cotton-candy"] .tab_btn_horizontal.main-tab.active img,
[data-theme="cotton-candy"] .tab_btn_original.active img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
        saturate(0%) hue-rotate(129deg) brightness(104%) contrast(101%) !important;
}

[data-theme="cotton-candy"] .tab_btn_original.combat-active {
    background:
        linear-gradient(135deg, hsl(12 90% 68%), hsl(346 86% 60%)) !important;
    border-color: hsl(24 100% 92%) !important;
    box-shadow:
        0 0 0 3px hsl(12 92% 72% / 0.22),
        0 14px 28px hsl(12 84% 60% / 0.22),
        0 0 20px hsl(24 100% 82% / 0.18) !important;
}

[data-theme="cotton-candy"] .tab_btn_original.combat-active img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
        saturate(0%) hue-rotate(129deg) brightness(104%) contrast(101%) !important;
}

[data-theme="cotton-candy"] .tab_btn,
[data-theme="cotton-candy"] .tab-buttons .tab-btn,
[data-theme="cotton-candy"] .tab-navigation .tab-btn {
    background:
        linear-gradient(180deg, hsl(350 100% 98%), hsl(336 70% 91%));
    border: 1px solid hsl(338 40% 74% / 0.5);
    color: hsl(338 38% 30%);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 hsl(0 0% 100% / 0.95),
        0 6px 16px hsl(338 40% 74% / 0.1);
    transition:
        transform var(--duration-150) var(--ease-in-out),
        box-shadow var(--duration-150) ease,
        border-color var(--duration-150) ease;
}

[data-theme="cotton-candy"] .tab_btn:hover,
[data-theme="cotton-candy"] .tab-buttons .tab-btn:hover,
[data-theme="cotton-candy"] .tab-navigation .tab-btn:hover {
    background:
        linear-gradient(180deg, hsl(350 100% 97%), hsl(336 84% 88%));
    border-color: hsl(346 64% 66% / 0.62);
    transform: translateY(-1px);
    box-shadow:
        0 10px 22px hsl(338 56% 72% / 0.14),
        0 0 14px hsl(346 88% 74% / 0.12);
}

[data-theme="cotton-candy"] .tab_btn.active-tab,
[data-theme="cotton-candy"] .tab-buttons .tab-btn.active,
[data-theme="cotton-candy"] .tab-navigation .tab-btn.active {
    background:
        linear-gradient(135deg, hsl(346 86% 66%), hsl(352 84% 58%));
    border-color: hsl(350 100% 92%) !important;
    color: hsl(0 0% 100%) !important;
    animation: kittyShimmer 2.8s ease-in-out infinite;
    box-shadow:
        0 0 0 4px hsl(346 86% 70% / 0.22),
        0 14px 28px hsl(350 72% 56% / 0.26),
        0 0 20px hsl(42 100% 82% / 0.16) !important;
}

[data-theme="cotton-candy"] .tab_btn.active-tab .tab_Icon,
[data-theme="cotton-candy"] .tab-buttons .tab-btn.active .tab_Icon,
[data-theme="cotton-candy"] .tab-navigation .tab-btn.active .tab_Icon {
    filter: brightness(0) invert(1) !important;
}

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

[data-theme="cotton-candy"] button,
[data-theme="cotton-candy"] .btn,
[data-theme="cotton-candy"] .roll-button,
[data-theme="cotton-candy"] input[type="button"],
[data-theme="cotton-candy"] input[type="submit"] {
    background:
        linear-gradient(135deg, hsl(336 92% 72%), hsl(352 84% 60%));
    color: hsl(0 0% 100%);
    border: 1px solid hsl(346 70% 58% / 0.82);
    border-radius: 999px;
    box-shadow:
        0 10px 20px hsl(346 74% 62% / 0.2),
        inset 0 1px 0 hsl(0 0% 100% / 0.28);
}

[data-theme="cotton-candy"] button:hover,
[data-theme="cotton-candy"] .btn:hover,
[data-theme="cotton-candy"] .roll-button:hover,
[data-theme="cotton-candy"] input[type="button"]:hover,
[data-theme="cotton-candy"] input[type="submit"]:hover {
    background:
        linear-gradient(135deg, hsl(336 96% 76%), hsl(352 88% 64%));
    transform: translateY(-1px);
    box-shadow:
        0 14px 26px hsl(346 78% 64% / 0.24),
        0 0 18px hsl(42 100% 84% / 0.12);
}

[data-theme="cotton-candy"] input,
[data-theme="cotton-candy"] textarea,
[data-theme="cotton-candy"] select,
[data-theme="cotton-candy"] .select,
[data-theme="cotton-candy"] .form-select,
[data-theme="cotton-candy"] .equipment-select {
    background:
        linear-gradient(180deg, hsl(350 100% 99%), hsl(336 54% 95%));
    border: 1px solid hsl(338 42% 76% / 0.6);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    box-shadow:
        inset 0 1px 0 hsl(0 0% 100% / 0.92),
        0 4px 12px hsl(338 40% 76% / 0.08);
}

[data-theme="cotton-candy"] input:focus,
[data-theme="cotton-candy"] textarea:focus,
[data-theme="cotton-candy"] select:focus,
[data-theme="cotton-candy"] .select:focus,
[data-theme="cotton-candy"] .form-select:focus,
[data-theme="cotton-candy"] .equipment-select:focus {
    border-color: hsl(346 72% 60%);
    box-shadow:
        0 0 0 4px var(--color-focus-ring),
        0 8px 18px hsl(338 50% 74% / 0.12);
    outline: none;
}

[data-theme="cotton-candy"] select,
[data-theme="cotton-candy"] .select,
[data-theme="cotton-candy"] .form-select,
[data-theme="cotton-candy"] .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='%23d84f77' stroke-width='2.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 and Rows
   ========================================================================= */

[data-theme="cotton-candy"] table {
    background: hsl(350 100% 99% / 0.96);
    border: 1px solid hsl(338 38% 78% / 0.34);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

[data-theme="cotton-candy"] th {
    background:
        linear-gradient(180deg, hsl(336 80% 90%), hsl(336 68% 86%));
    color: hsl(342 46% 28%);
}

[data-theme="cotton-candy"] td {
    background: hsl(350 100% 99% / 0.88);
    color: var(--text-primary);
    border-bottom: 1px solid hsl(338 38% 80% / 0.18);
}

[data-theme="cotton-candy"] tr:hover {
    background: hsl(336 90% 92% / 0.38);
}

[data-theme="cotton-candy"] tr:hover td {
    background: hsl(336 80% 95% / 0.96);
}

/* ==========================================================================
   Widgets and Character Cards
   ========================================================================= */

[data-theme="cotton-candy"] .widget-title,
[data-theme="cotton-candy"] .character-info h3,
[data-theme="cotton-candy"] .bereich-title,
[data-theme="cotton-candy"] .attribute-name {
    color: hsl(342 52% 30%);
}

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

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

[data-theme="cotton-candy"] .character-item::after,
[data-theme="cotton-candy"] .widget-tile::after,
[data-theme="cotton-candy"] .login-container::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    top: 14px;
    right: 16px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 35%, hsl(0 0% 100%), hsl(48 100% 88%) 45%, hsl(346 92% 74%) 100%);
    box-shadow:
        16px 8px 0 -2px hsl(336 88% 80% / 0.92),
        -10px 14px 0 -4px hsl(286 72% 86% / 0.9);
    animation: pearlTwinkle 2.8s ease-in-out infinite;
}

[data-theme="cotton-candy"] .login-container {
    border-radius: var(--radius-2xl);
    box-shadow:
        0 18px 44px hsl(338 56% 78% / 0.18),
        inset 0 1px 0 hsl(0 0% 100% / 0.96);
}

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

[data-theme="cotton-candy"] .attribute-cards-container {
    background:
        linear-gradient(180deg, hsl(350 100% 98% / 0.42), hsl(336 72% 92% / 0.42));
    border-radius: var(--radius-2xl);
}

[data-theme="cotton-candy"] .attribute-card {
    border-width: 2px;
}

[data-theme="cotton-candy"] .attribute-icon-container {
    background:
        linear-gradient(135deg, hsl(336 92% 88%), hsl(48 100% 90%));
    color: hsl(342 52% 34%);
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.76);
}

[data-theme="cotton-candy"] .attribute-value,
[data-theme="cotton-candy"] .stat-value,
[data-theme="cotton-candy"] .tt-total-label,
[data-theme="cotton-candy"] .tt-total-value {
    color: hsl(346 72% 44%);
}

[data-theme="cotton-candy"] .attribute-bonus {
    background: hsl(146 56% 90%);
    color: hsl(148 46% 30%);
}

[data-theme="cotton-candy"] .attribute-subskills,
[data-theme="cotton-candy"] .roll-result {
    background: hsl(350 100% 99% / 0.88);
    border: 1px solid hsl(338 38% 78% / 0.26);
    border-radius: var(--radius-lg);
}

[data-theme="cotton-candy"] .subskill-item {
    border-bottom-color: hsl(338 40% 78% / 0.2);
}

[data-theme="cotton-candy"] .subskill-name {
    color: hsl(342 62% 38%);
}

[data-theme="cotton-candy"] .subskill-effect,
[data-theme="cotton-candy"] .stat-label {
    color: hsl(336 24% 34%);
}

[data-theme="cotton-candy"] .attribute-card.physical {
    border-left-color: hsl(148 42% 52%);
}

[data-theme="cotton-candy"] .attribute-card.mental {
    border-left-color: hsl(208 66% 64%);
}

[data-theme="cotton-candy"] .attribute-card.social {
    border-left-color: hsl(24 88% 66%);
}

[data-theme="cotton-candy"] .attribute-card.special {
    border-left-color: hsl(282 58% 66%);
}

[data-theme="cotton-candy"] .stat-item {
    background:
        linear-gradient(180deg, hsl(350 100% 98%), hsl(336 74% 92%));
    border: 1px solid hsl(338 40% 76% / 0.34);
    border-radius: var(--radius-lg);
}

[data-theme="cotton-candy"] .stat-item:hover {
    background:
        linear-gradient(180deg, hsl(350 100% 97%), hsl(336 84% 88%));
}

/* ==========================================================================
   Inventory and Utility Tiles
   ========================================================================= */

[data-theme="cotton-candy"] .currency-tile,
[data-theme="cotton-candy"] .resistance-tile,
[data-theme="cotton-candy"] .buff-tile {
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.82);
}

[data-theme="cotton-candy"] .currency-add-icon {
    color: hsl(346 72% 54%);
}

[data-theme="cotton-candy"] .buff-duration {
    background-color: hsl(336 74% 88% / 0.72);
    color: hsl(338 30% 28%);
}

[data-theme="cotton-candy"] .no-buffs-message,
[data-theme="cotton-candy"] .resistance-stat-label {
    color: hsl(336 22% 46%);
}

[data-theme="cotton-candy"] .equipped-indicator-icon {
    background-color: hsl(346 82% 58%);
    filter: drop-shadow(0 0 6px hsl(346 82% 58% / 0.5));
}

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

[data-theme="cotton-candy"] .progress-container,
[data-theme="cotton-candy"] .bar-track,
[data-theme="cotton-candy"] .resource-bar,
[data-theme="cotton-candy"] .weight-bar-container {
    background:
        linear-gradient(180deg, hsl(350 100% 99%), hsl(336 56% 90%)) !important;
    border: 1px solid hsl(338 40% 76% / 0.62) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 2px 6px hsl(338 34% 74% / 0.16),
        inset 0 1px 0 hsl(0 0% 100% / 0.96),
        0 4px 10px hsl(338 34% 76% / 0.08);
}

[data-theme="cotton-candy"] #healthText,
[data-theme="cotton-candy"] #magicText,
[data-theme="cotton-candy"] #enduranceText {
    color: hsl(338 28% 22%);
    text-shadow:
        0 1px 0 hsl(0 0% 100% / 0.95),
        0 0 8px hsl(350 100% 98% / 0.42);
}

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

[data-theme="cotton-candy"] .progress-bar::after,
[data-theme="cotton-candy"] .progress-fill::after,
[data-theme="cotton-candy"] .bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, hsl(0 0% 100% / 0.4), transparent 62%);
    pointer-events: none;
}

[data-theme="cotton-candy"] .health-bar,
[data-theme="cotton-candy"] .hp-bar-fill {
    background:
        linear-gradient(90deg, hsl(342 78% 66%) 0%, hsl(356 92% 76%) 52%, hsl(18 100% 82%) 100%) !important;
    box-shadow:
        inset 0 1px 0 hsl(0 0% 100% / 0.28),
        0 4px 12px hsl(346 72% 68% / 0.18) !important;
}

[data-theme="cotton-candy"] .magic-bar,
[data-theme="cotton-candy"] .mana-bar-fill,
[data-theme="cotton-candy"] .energy-bar-fill {
    background:
        linear-gradient(90deg, hsl(276 62% 72%) 0%, hsl(312 68% 82%) 58%, hsl(332 88% 86%) 100%) !important;
    box-shadow:
        inset 0 1px 0 hsl(0 0% 100% / 0.28),
        0 4px 12px hsl(292 48% 76% / 0.2) !important;
}

[data-theme="cotton-candy"] .endurance-bar,
[data-theme="cotton-candy"] .stamina-bar-fill {
    background:
        linear-gradient(90deg, hsl(28 100% 76%) 0%, hsl(42 100% 82%) 55%, hsl(52 100% 88%) 100%) !important;
    box-shadow:
        inset 0 1px 0 hsl(0 0% 100% / 0.32),
        0 4px 12px hsl(34 92% 76% / 0.18) !important;
}

[data-theme="cotton-candy"] .weight-progress-bar.weight-ok,
[data-theme="cotton-candy"] .weight-fill,
[data-theme="cotton-candy"] .encumbrance-fill {
    background:
        linear-gradient(90deg, hsl(148 44% 62%) 0%, hsl(162 54% 80%) 100%) !important;
}

[data-theme="cotton-candy"] .weight-progress-bar.weight-warn {
    background:
        linear-gradient(90deg, hsl(28 100% 74%) 0%, hsl(46 100% 84%) 100%) !important;
}

[data-theme="cotton-candy"] .weight-progress-bar.weight-crit {
    background:
        linear-gradient(90deg, hsl(344 82% 66%) 0%, hsl(8 96% 78%) 100%) !important;
}

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

[data-theme="cotton-candy"] .unified-tooltip,
[data-theme="cotton-candy"] .spell-tooltip,
[data-theme="cotton-candy"] #item-tooltip {
    background:
        linear-gradient(180deg, hsl(350 100% 99% / 0.98), hsl(336 70% 93% / 0.98));
    border: 1px solid hsl(338 52% 72% / 0.62);
    border-radius: var(--radius-xl);
    color: var(--color-tooltip-text);
    box-shadow:
        0 18px 40px hsl(338 54% 72% / 0.2),
        0 0 18px hsl(42 100% 84% / 0.12);
}

[data-theme="cotton-candy"] .itooltip-title,
[data-theme="cotton-candy"] .skilltooltip-title,
[data-theme="cotton-candy"] .attrtooltip-title,
[data-theme="cotton-candy"] .stattooltip-title,
[data-theme="cotton-candy"] .unified-tooltip .tooltip-title {
    color: hsl(346 76% 46%) !important;
}

[data-theme="cotton-candy"] .itooltip-description,
[data-theme="cotton-candy"] .skilltooltip-description,
[data-theme="cotton-candy"] .attrtooltip-description,
[data-theme="cotton-candy"] .unified-tooltip .tooltip-description,
[data-theme="cotton-candy"] #item-tooltip div[style*="font-size: 14px"] {
    font-size: 0.75rem !important;
    line-height: 1.28 !important;
}

[data-theme="cotton-candy"] .tt-section {
    background: hsl(336 76% 92% / 0.64);
    border-radius: var(--radius-md);
    font-size: 13px;
}

[data-theme="cotton-candy"] .tt-row {
    font-size: 13px;
}

[data-theme="cotton-candy"] .tt-row-sm {
    font-size: 12px;
}

[data-theme="cotton-candy"] .tt-dim {
    font-size: 11px;
}

[data-theme="cotton-candy"] .tt-sep-accent {
    border-top-color: hsl(346 76% 52%);
}

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

[data-theme="cotton-candy"] .twohanded-toggle {
    background: hsl(350 100% 99%) !important;
    border: 2px solid hsl(346 72% 58%);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 hsl(0 0% 100% / 0.95),
        0 8px 16px hsl(338 42% 74% / 0.1);
    transition: all var(--duration-150) var(--ease-in-out);
}

[data-theme="cotton-candy"] .twohanded-toggle:hover {
    background: hsl(336 88% 94%) !important;
    border-color: hsl(346 76% 54%);
    box-shadow:
        0 10px 20px hsl(346 66% 64% / 0.16),
        0 0 14px hsl(42 100% 84% / 0.12);
}

[data-theme="cotton-candy"] .twohanded-toggle.active {
    background:
        linear-gradient(135deg, hsl(346 86% 66%), hsl(352 84% 58%)) !important;
    border-color: hsl(350 100% 92%);
    box-shadow:
        0 0 0 3px hsl(346 86% 70% / 0.22),
        0 14px 24px hsl(346 74% 60% / 0.24);
}

[data-theme="cotton-candy"] .twohanded-toggle.active .twohanded-toggle-icon {
    filter: brightness(0) invert(1) !important;
}

/* ==========================================================================
   Scrollbars and Selection
   ========================================================================= */

[data-theme="cotton-candy"] ::-webkit-scrollbar-track {
    background:
        linear-gradient(180deg, hsl(350 100% 98%), hsl(336 58% 92%));
    border-radius: 999px;
}

[data-theme="cotton-candy"] ::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, hsl(336 80% 74%), hsl(346 72% 62%));
    border-radius: 999px;
    border: 2px solid hsl(350 100% 98%);
}

[data-theme="cotton-candy"] ::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, hsl(336 86% 70%), hsl(346 76% 58%));
}

[data-theme="cotton-candy"] ::selection {
    background: hsl(336 92% 80% / 0.4);
    color: hsl(338 36% 16%);
}

/* ==========================================================================
   Cute Flavor
   ========================================================================= */

[data-theme="cotton-candy"] .sparkle,
[data-theme="cotton-candy"] .heart-beat,
[data-theme="cotton-candy"] .bounce {
    position: relative;
}

[data-theme="cotton-candy"] .sparkle::after {
    content: '✦';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 14px;
    color: hsl(42 100% 76%);
    text-shadow: 0 0 10px hsl(42 100% 82% / 0.48);
    animation: pearlTwinkle 1.8s ease-in-out infinite;
}

[data-theme="cotton-candy"] .heart-beat {
    animation: bowFloat 1.8s ease-in-out infinite;
}

[data-theme="cotton-candy"] .bounce:hover {
    transform: translateY(-3px);
}
[data-theme="cotton-candy"] .toxicity-container {
    border-color: var(--color-toxicity) !important;
}

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

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