:root {
    /* Cyan Theme (Default) - Enhanced cyan with modern accents */
    --color-dev: 30, 143, 143; /* Original cyan */
    --color: rgba(var(--color-dev), 0.2);
    --color-half: rgba(var(--color-dev), 0.6);
    --color-full: rgb(var(--color-dev));
    --color-dark: rgb(15, 71, 71); /* Deep cyan */
    --font-color: rgb(240, 255, 255); /* Cyan white */
    --active-link-color: rgb(178, 118, 178); /* Purple accent */
    --inactive-link-color: rgb(176, 224, 224); /* Light cyan */
    --main-background-color: rgb(20, 45, 45);
    --accent-color: rgba(143, 30, 143, 0.8); /* Purple highlights */

    /* Theme-specific button variables */
    --button-dark: #1a2e2e;
    --button-medium: #2a4444;
    --button-light: #355555;
    --button-hover-dark: #2a4444;
    --button-hover-medium: #3a5555;
    --button-hover-light: #456666;
    --input-bg-start: rgba(20, 45, 45, 0.8);
    --input-bg-end: rgba(var(--color-dev), 0.3);
    --input-bg-hover-start: rgba(20, 45, 45, 0.9);
    --input-bg-hover-end: rgba(var(--color-dev), 0.4);
    --user-highlight-bg: rgba(var(--color-dev), 0.4);
    --user-highlight-border: rgba(143, 30, 143, 0.8);
    --user-highlight-glow: rgba(143, 30, 143, 0.4);

    /* Theme texture and effects */
    --theme-texture: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
                     radial-gradient(circle at 80% 70%, rgba(30, 143, 143, 0.12) 0%, transparent 50%);
    --element-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.15);
    --theme-border: 2px solid rgba(var(--color-dev), 0.8);
    --theme-glow: 0 0 20px rgba(var(--color-dev), 0.4);

    /* Container and section colors */
    --container-bg-1: rgba(30, 143, 143, 0.2);
    --container-bg-2: rgba(20, 45, 45, 0.4);
    --container-bg-3: rgba(30, 143, 143, 0.15);
    --container-border: rgba(30, 143, 143, 0.6);
    --container-shadow-main: rgba(30, 143, 143, 0.3);
    --container-shadow-inset: rgba(255, 255, 255, 0.08);
    --section-bg-1: rgba(30, 143, 143, 0.15);
    --section-bg-2: rgba(20, 45, 45, 0.3);
    --section-bg-3: rgba(30, 143, 143, 0.1);
    --section-border: rgba(30, 143, 143, 0.4);

    /* Status colors */
    --status-correct-bg: rgba(34, 197, 94, 0.4);
    --status-correct-bg-light: rgba(34, 197, 94, 0.2);
    --status-wrong-bg: rgba(239, 68, 68, 0.4);
    --status-wrong-bg-light: rgba(239, 68, 68, 0.2);
    --status-text-shadow: rgba(0, 0, 0, 0.6);

    /* Disabled input colors */
    --disabled-input-color: rgba(255, 255, 255, 0.5);
    --disabled-input-bg: rgba(255, 255, 255, 0.7);

    /* GuessOver specific styling variables */
    --container-before-gradient-1: radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
    --container-before-gradient-2: radial-gradient(circle at 85% 75%, rgba(30, 143, 143, 0.1) 0%, transparent 40%);
    --container-title-bg-start: rgba(30, 143, 143, 0.3);
    --container-title-bg-end: rgba(20, 45, 45, 0.5);
    --container-title-border: rgba(30, 143, 143, 0.6);
    --container-title-hover-bg-start: rgba(143, 30, 143, 0.4);
    --container-title-hover-bg-end: rgba(178, 118, 178, 0.4);
    --container-title-hover-shadow: rgba(30, 143, 143, 0.4);
    --container-title-divider-color-1: rgba(30, 143, 143, 0.6);
    --container-title-divider-color-2: rgba(143, 30, 143, 0.8);
    --container-content-bg-start: rgba(30, 143, 143, 0.08);
    --container-content-bg-end: rgba(20, 45, 45, 0.15);
    --container-content-border: rgba(30, 143, 143, 0.3);
    --container-content-shadow: rgba(255, 255, 255, 0.1);
    --h3-divider-color-1: rgba(30, 143, 143, 0.8);
    --h3-divider-color-2: rgba(143, 30, 143, 0.9);
    --h3-divider-shadow: rgba(30, 143, 143, 0.5);

    /* GuessItem specific styling variables */
    --details-center-bg-end: rgba(143, 30, 143, 0.8);
    --details-center-border: rgba(255, 255, 255, 0.3);
    --details-center-shadow-main: rgba(0, 0, 0, 0.3);
    --details-center-shadow-inset: rgba(255, 255, 255, 0.2);

    /* NavigationSlider specific styling variables */
    --nav-menu-bg-start: rgba(10, 25, 25, 0.95);
    --nav-menu-bg-middle: rgba(20, 45, 45, 0.95);
    --nav-menu-bg-end: rgba(30, 60, 60, 0.95);
    --nav-menu-border: rgba(30, 143, 143, 0.6);
    --nav-menu-shadow: rgba(30, 143, 143, 0.3);
    --nav-link-text-shadow: rgba(0, 0, 0, 0.8);
    --nav-link-hover-bg-start: rgba(30, 143, 143, 0.2);
    --nav-link-hover-bg-end: rgba(20, 45, 45, 0.3);
    --nav-link-hover-shadow: rgba(30, 143, 143, 0.3);
    --nav-link-active-bg-start: rgba(143, 30, 143, 0.3);
    --nav-link-active-bg-end: rgba(178, 118, 178, 0.3);
    --nav-link-active-shadow: rgba(143, 30, 143, 0.5);
    --nav-fakelink-text-shadow: rgba(0, 0, 0, 0.8);
    --nav-fakelink-hover-bg-start: rgba(30, 143, 143, 0.2);
    --nav-fakelink-hover-bg-end: rgba(20, 45, 45, 0.3);
    --nav-fakelink-hover-shadow: rgba(30, 143, 143, 0.3);

    /* About page specific styling variables */
    --about-main-bg: linear-gradient(135deg, rgba(20, 45, 45, 0.95) 0%, rgba(30, 60, 60, 0.9) 100%);
    --about-section-bg: linear-gradient(145deg, rgba(30, 143, 143, 0.15) 0%, rgba(20, 45, 45, 0.25) 100%);
    --about-section-border: rgba(30, 143, 143, 0.4);
    --about-section-shadow: 0 8px 25px rgba(30, 143, 143, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1);
    --about-title-bg: linear-gradient(90deg, rgba(30, 143, 143, 0.4) 0%, rgba(143, 30, 143, 0.3) 100%);
    --about-title-shadow: rgba(30, 143, 143, 0.6);
    --about-link-color: rgb(178, 224, 255);
    --about-link-hover: rgb(143, 30, 143);
    --about-step-bg: rgba(30, 143, 143, 0.1);
    --about-step-border: rgba(30, 143, 143, 0.3);
    --about-image-shadow: 0 6px 20px rgba(30, 143, 143, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
    --about-highlight-bg: linear-gradient(45deg, rgba(143, 30, 143, 0.2) 0%, rgba(30, 143, 143, 0.2) 100%);
    --about-highlight-border: rgba(143, 30, 143, 0.5);

    /* Rules page specific styling variables */
    --rules-main-bg: linear-gradient(135deg, rgba(20, 45, 45, 0.95) 0%, rgba(30, 60, 60, 0.9) 100%);
    --rules-section-bg: linear-gradient(145deg, rgba(30, 143, 143, 0.15) 0%, rgba(20, 45, 45, 0.25) 100%);
    --rules-section-border: rgba(30, 143, 143, 0.4);
    --rules-section-shadow: 0 8px 25px rgba(30, 143, 143, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1);
    --rules-title-bg: linear-gradient(90deg, rgba(30, 143, 143, 0.4) 0%, rgba(143, 30, 143, 0.3) 100%);
    --rules-title-shadow: rgba(30, 143, 143, 0.6);
    --rules-points-bg: linear-gradient(135deg, rgba(143, 30, 143, 0.2) 0%, rgba(30, 143, 143, 0.2) 100%);
    --rules-points-border: rgba(143, 30, 143, 0.4);
    --rules-highlight-text: rgb(178, 224, 255);
    --rules-list-item-bg: rgba(30, 143, 143, 0.1);
    --rules-list-item-border: rgba(30, 143, 143, 0.3);
    --rules-ko-phase-bg: linear-gradient(45deg, rgba(143, 30, 143, 0.25) 0%, rgba(30, 143, 143, 0.15) 100%);
    --rules-winner-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(143, 30, 143, 0.2) 100%);
    --rules-winner-border: rgba(255, 215, 0, 0.5);

    /* Home page specific styling variables */
    --home-main-bg: linear-gradient(135deg, rgba(20, 45, 45, 0.95) 0%, rgba(30, 60, 60, 0.9) 100%);
    --home-welcome-bg: linear-gradient(90deg, rgba(30, 143, 143, 0.4) 0%, rgba(143, 30, 143, 0.3) 100%);
    --home-welcome-shadow: rgba(30, 143, 143, 0.6);
    --home-card-bg: linear-gradient(145deg, rgba(30, 143, 143, 0.15) 0%, rgba(20, 45, 45, 0.25) 100%);
    --home-card-border: rgba(30, 143, 143, 0.4);
    --home-card-shadow: 0 8px 25px rgba(30, 143, 143, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1);
    --home-button-bg: linear-gradient(135deg, rgba(143, 30, 143, 0.8) 0%, rgba(30, 143, 143, 0.8) 100%);
    --home-button-border: rgba(143, 30, 143, 0.6);
    --home-button-shadow: 0 6px 20px rgba(143, 30, 143, 0.4);
    --home-button-hover-bg: linear-gradient(135deg, rgba(143, 30, 143, 1) 0%, rgba(30, 143, 143, 1) 100%);
    --home-button-hover-shadow: 0 8px 25px rgba(143, 30, 143, 0.6);
    --home-link-color: rgb(178, 224, 255);
    --home-link-hover: rgb(143, 30, 143);
    --home-icon-glow: 0 0 30px rgba(30, 143, 143, 0.6), 0 0 60px rgba(143, 30, 143, 0.4);

    /* Admin section specific styling variables */
    --admin-main-bg: linear-gradient(135deg, rgba(30, 143, 143, 0.15) 0%, rgba(143, 30, 143, 0.1) 50%, rgba(30, 143, 143, 0.2) 100%);
    --admin-container-bg: linear-gradient(145deg, rgba(30, 143, 143, 0.2) 0%, rgba(143, 30, 143, 0.15) 100%);
    --admin-container-border: rgba(30, 143, 143, 0.4);
    --admin-container-shadow: 0 0 20px rgba(30, 143, 143, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.1);
    --admin-title-bg: linear-gradient(90deg, rgba(30, 143, 143, 0.3) 0%, rgba(143, 30, 143, 0.2) 100%);
    --admin-title-border: rgba(30, 143, 143, 0.5);
    --admin-item-bg: linear-gradient(135deg, rgba(30, 143, 143, 0.1) 0%, rgba(143, 30, 143, 0.05) 100%);
    --admin-item-border: rgba(30, 143, 143, 0.3);
    --admin-status-active: rgba(30, 143, 143, 0.4);
    --admin-status-inactive: rgba(143, 30, 143, 0.3);
    --admin-button-bg: linear-gradient(135deg, rgba(30, 143, 143, 0.8) 0%, rgba(143, 30, 143, 0.6) 100%);
    --admin-button-hover: linear-gradient(135deg, rgba(30, 143, 143, 1) 0%, rgba(143, 30, 143, 0.8) 100%);

    /* Common text shadows */
    --text-shadow-dark: rgba(0, 0, 0, 0.7);
    --text-shadow-light: rgba(0, 0, 0, 0.5);

    /* General UI colors */
    --text-muted: rgb(203, 203, 203);
    --success-bg: rgba(0, 255, 0, 0.236);
    --error-bg: rgba(255, 0, 0, 0.38);
    --overlay-bg: rgba(128, 128, 128, 0.298);
    --muted-text: rgba(255, 255, 255, 0.548);
    --border-color: rgba(29, 156, 156, 0.586);
    --compare-text: #58738f;
    --vue-green: #42b983;

    /* Rainbow colors for easter egg */
    --rainbow-red: rgba(255, 0, 0, 1);
    --rainbow-orange: rgba(255, 154, 0, 1);
    --rainbow-yellow: rgba(208, 222, 33, 1);
    --rainbow-green: rgba(79, 220, 74, 1);
    --rainbow-cyan: rgba(63, 218, 216, 1);
    --rainbow-blue: rgba(47, 201, 226, 1);
    --rainbow-indigo: rgba(28, 127, 238, 1);
    --rainbow-violet: rgba(95, 21, 242, 1);
    --rainbow-purple: rgba(186, 12, 248, 1);
    --rainbow-magenta: rgba(251, 7, 217, 1);

    /* Common text shadows */
    --text-shadow-dark: rgba(0, 0, 0, 0.7);
    --text-shadow-light: rgba(0, 0, 0, 0.5);
}

[data-theme="lekker"] {
    /* Lekker Theme - Orange with gray accents */
    --color-dev: 255, 140, 0 !important; /* Orange */
    --color: rgba(var(--color-dev), 0.2) !important;
    --color-half: rgba(var(--color-dev), 0.6) !important;
    --color-full: rgb(var(--color-dev)) !important;
    --color-dark: rgb(80, 60, 20) !important; /* Deep orange-brown */
    --font-color: rgb(255, 248, 240) !important; /* Warm white */
    --active-link-color: rgb(169, 169, 169) !important; /* Gray accent */
    --inactive-link-color: rgb(255, 218, 185) !important; /* Light orange */
    --main-background-color: rgb(45, 35, 25) !important;
    --accent-color: rgba(128, 128, 128, 0.8) !important; /* Gray highlights */

    /* Theme-specific button variables */
    --button-dark: #2e1e0e !important;
    --button-medium: #442a1a !important;
    --button-light: #553722 !important;
    --button-hover-dark: #442a1a !important;
    --button-hover-medium: #553722 !important;
    --button-hover-light: #66442a !important;
    --input-bg-start: rgba(45, 35, 25, 0.8) !important;
    --input-bg-end: rgba(var(--color-dev), 0.3) !important;
    --input-bg-hover-start: rgba(45, 35, 25, 0.9) !important;
    --input-bg-hover-end: rgba(var(--color-dev), 0.4) !important;
    --user-highlight-bg: rgba(var(--color-dev), 0.4) !important;
    --user-highlight-border: rgba(128, 128, 128, 0.8) !important;
    --user-highlight-glow: rgba(128, 128, 128, 0.4) !important;

    /* Theme texture and effects */
    --theme-texture: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
                     radial-gradient(circle at 80% 70%, rgba(255, 140, 0, 0.12) 0%, transparent 50%) !important;
    --element-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
    --theme-border: 2px solid rgba(var(--color-dev), 0.8) !important;
    --theme-glow: 0 0 20px rgba(var(--color-dev), 0.4) !important;

    /* Container and section colors */
    --container-bg-1: rgba(255, 140, 0, 0.2) !important;
    --container-bg-2: rgba(45, 35, 25, 0.4) !important;
    --container-bg-3: rgba(255, 140, 0, 0.15) !important;
    --container-border: rgba(255, 140, 0, 0.6) !important;
    --container-shadow-main: rgba(255, 140, 0, 0.3) !important;
    --container-shadow-inset: rgba(255, 255, 255, 0.08) !important;
    --section-bg-1: rgba(255, 140, 0, 0.15) !important;
    --section-bg-2: rgba(45, 35, 25, 0.3) !important;
    --section-bg-3: rgba(255, 140, 0, 0.1) !important;
    --section-border: rgba(255, 140, 0, 0.4) !important;

    /* Status colors */
    --status-correct-bg: rgba(34, 197, 94, 0.4) !important;
    --status-correct-bg-light: rgba(34, 197, 94, 0.2) !important;
    --status-wrong-bg: rgba(239, 68, 68, 0.4) !important;
    --status-wrong-bg-light: rgba(239, 68, 68, 0.2) !important;
    --status-text-shadow: rgba(0, 0, 0, 0.5) !important;

    /* Disabled input colors */
    --disabled-input-color: rgba(255, 255, 255, 0.5) !important;
    --disabled-input-bg: rgba(255, 255, 255, 0.7) !important;

    /* GuessOver specific styling variables */
    --container-before-gradient-1: radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 40%) !important;
    --container-before-gradient-2: radial-gradient(circle at 85% 75%, rgba(255, 140, 0, 0.1) 0%, transparent 40%) !important;
    --container-title-bg-start: rgba(255, 140, 0, 0.3) !important;
    --container-title-bg-end: rgba(45, 35, 25, 0.5) !important;
    --container-title-border: rgba(255, 140, 0, 0.6) !important;
    --container-title-hover-bg-start: rgba(128, 128, 128, 0.4) !important;
    --container-title-hover-bg-end: rgba(169, 169, 169, 0.4) !important;
    --container-title-hover-shadow: rgba(255, 140, 0, 0.4) !important;
    --container-title-divider-color-1: rgba(255, 140, 0, 0.6) !important;
    --container-title-divider-color-2: rgba(128, 128, 128, 0.8) !important;
    --container-content-bg-start: rgba(255, 140, 0, 0.08) !important;
    --container-content-bg-end: rgba(45, 35, 25, 0.15) !important;
    --container-content-border: rgba(255, 140, 0, 0.3) !important;
    --container-content-shadow: rgba(255, 255, 255, 0.1) !important;
    --h3-divider-color-1: rgba(255, 140, 0, 0.8) !important;
    --h3-divider-color-2: rgba(128, 128, 128, 0.9) !important;
    --h3-divider-shadow: rgba(255, 140, 0, 0.5) !important;

    /* GuessItem specific styling variables */
    --details-center-bg-end: rgba(128, 128, 128, 0.8) !important;
    --details-center-border: rgba(255, 255, 255, 0.3) !important;
    --details-center-shadow-main: rgba(128, 128, 128, 0.5) !important;
    --details-center-shadow-inset: rgba(255, 255, 255, 0.2) !important;

    /* NavigationSlider specific styling variables */
    --nav-menu-bg-start: rgba(35, 25, 15, 0.95) !important;
    --nav-menu-bg-middle: rgba(45, 35, 25, 0.95) !important;
    --nav-menu-bg-end: rgba(55, 45, 35, 0.95) !important;
    --nav-menu-border: rgba(255, 140, 0, 0.6) !important;
    --nav-menu-shadow: rgba(255, 140, 0, 0.3) !important;
    --nav-link-text-shadow: rgba(0, 0, 0, 0.8) !important;
    --nav-link-hover-bg-start: rgba(255, 140, 0, 0.2) !important;
    --nav-link-hover-bg-end: rgba(45, 35, 25, 0.3) !important;
    --nav-link-hover-shadow: rgba(255, 140, 0, 0.3) !important;
    --nav-link-active-bg-start: rgba(128, 128, 128, 0.3) !important;
    --nav-link-active-bg-end: rgba(169, 169, 169, 0.3) !important;
    --nav-link-active-shadow: rgba(128, 128, 128, 0.5) !important;
    --nav-fakelink-text-shadow: rgba(0, 0, 0, 0.8) !important;
    --nav-fakelink-hover-bg-start: rgba(255, 140, 0, 0.2) !important;
    --nav-fakelink-hover-bg-end: rgba(45, 35, 25, 0.3) !important;
    --nav-fakelink-hover-shadow: rgba(255, 140, 0, 0.3) !important;

    /* About page specific styling variables */
    --about-main-bg: linear-gradient(135deg, rgba(45, 35, 25, 0.95) 0%, rgba(55, 45, 35, 0.9) 100%) !important;
    --about-section-bg: linear-gradient(145deg, rgba(255, 140, 0, 0.15) 0%, rgba(45, 35, 25, 0.25) 100%) !important;
    --about-section-border: rgba(255, 140, 0, 0.4) !important;
    --about-section-shadow: 0 8px 25px rgba(255, 140, 0, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --about-title-bg: linear-gradient(90deg, rgba(255, 140, 0, 0.4) 0%, rgba(128, 128, 128, 0.3) 100%) !important;
    --about-title-shadow: rgba(255, 140, 0, 0.6) !important;
    --about-link-color: rgb(255, 218, 185) !important;
    --about-link-hover: rgb(128, 128, 128) !important;
    --about-step-bg: rgba(255, 140, 0, 0.1) !important;
    --about-step-border: rgba(255, 140, 0, 0.3) !important;
    --about-image-shadow: 0 6px 20px rgba(255, 140, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    --about-highlight-bg: linear-gradient(45deg, rgba(128, 128, 128, 0.2) 0%, rgba(255, 140, 0, 0.2) 100%) !important;
    --about-highlight-border: rgba(128, 128, 128, 0.5) !important;

    /* Rules page specific styling variables */
    --rules-main-bg: linear-gradient(135deg, rgba(45, 35, 25, 0.95) 0%, rgba(55, 45, 35, 0.9) 100%) !important;
    --rules-section-bg: linear-gradient(145deg, rgba(255, 140, 0, 0.15) 0%, rgba(45, 35, 25, 0.25) 100%) !important;
    --rules-section-border: rgba(255, 140, 0, 0.4) !important;
    --rules-section-shadow: 0 8px 25px rgba(255, 140, 0, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --rules-title-bg: linear-gradient(90deg, rgba(255, 140, 0, 0.4) 0%, rgba(128, 128, 128, 0.3) 100%) !important;
    --rules-title-shadow: rgba(255, 140, 0, 0.6) !important;
    --rules-points-bg: linear-gradient(135deg, rgba(128, 128, 128, 0.2) 0%, rgba(255, 140, 0, 0.2) 100%) !important;
    --rules-points-border: rgba(128, 128, 128, 0.4) !important;
    --rules-highlight-text: rgb(255, 218, 185) !important;
    --rules-list-item-bg: rgba(255, 140, 0, 0.1) !important;
    --rules-list-item-border: rgba(255, 140, 0, 0.3) !important;
    --rules-ko-phase-bg: linear-gradient(45deg, rgba(128, 128, 128, 0.25) 0%, rgba(255, 140, 0, 0.15) 100%) !important;
    --rules-winner-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(128, 128, 128, 0.2) 100%) !important;
    --rules-winner-border: rgba(255, 215, 0, 0.5) !important;

    /* Home page specific styling variables */
    --home-main-bg: linear-gradient(135deg, rgba(45, 35, 25, 0.95) 0%, rgba(55, 45, 35, 0.9) 100%) !important;
    --home-welcome-bg: linear-gradient(90deg, rgba(255, 140, 0, 0.4) 0%, rgba(128, 128, 128, 0.3) 100%) !important;
    --home-welcome-shadow: rgba(255, 140, 0, 0.6) !important;
    --home-card-bg: linear-gradient(145deg, rgba(255, 140, 0, 0.15) 0%, rgba(45, 35, 25, 0.25) 100%) !important;
    --home-card-border: rgba(255, 140, 0, 0.4) !important;
    --home-card-shadow: 0 8px 25px rgba(255, 140, 0, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --home-button-bg: linear-gradient(135deg, rgba(128, 128, 128, 0.8) 0%, rgba(255, 140, 0, 0.8) 100%) !important;
    --home-button-border: rgba(128, 128, 128, 0.6) !important;
    --home-button-shadow: 0 6px 20px rgba(128, 128, 128, 0.4) !important;
    --home-button-hover-bg: linear-gradient(135deg, rgba(128, 128, 128, 1) 0%, rgba(255, 140, 0, 1) 100%) !important;
    --home-button-hover-shadow: 0 8px 25px rgba(128, 128, 128, 0.6) !important;
    --home-link-color: rgb(255, 218, 185) !important;
    --home-link-hover: rgb(128, 128, 128) !important;
    --home-icon-glow: 0 0 30px rgba(255, 140, 0, 0.6), 0 0 60px rgba(128, 128, 128, 0.4) !important;

    /* Admin section specific styling variables */
    --admin-main-bg: linear-gradient(135deg, rgba(255, 140, 0, 0.15) 0%, rgba(128, 128, 128, 0.1) 50%, rgba(255, 140, 0, 0.2) 100%) !important;
    --admin-container-bg: linear-gradient(145deg, rgba(255, 140, 0, 0.2) 0%, rgba(128, 128, 128, 0.15) 100%) !important;
    --admin-container-border: rgba(255, 140, 0, 0.4) !important;
    --admin-container-shadow: 0 0 20px rgba(255, 140, 0, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --admin-title-bg: linear-gradient(90deg, rgba(255, 140, 0, 0.3) 0%, rgba(128, 128, 128, 0.2) 100%) !important;
    --admin-title-border: rgba(255, 140, 0, 0.5) !important;
    --admin-item-bg: linear-gradient(135deg, rgba(255, 140, 0, 0.1) 0%, rgba(128, 128, 128, 0.05) 100%) !important;
    --admin-item-border: rgba(255, 140, 0, 0.3) !important;
    --admin-status-active: rgba(255, 140, 0, 0.4) !important;
    --admin-status-inactive: rgba(128, 128, 128, 0.3) !important;
    --admin-button-bg: linear-gradient(135deg, rgba(255, 140, 0, 0.8) 0%, rgba(128, 128, 128, 0.6) 100%) !important;
    --admin-button-hover: linear-gradient(135deg, rgba(255, 140, 0, 1) 0%, rgba(128, 128, 128, 0.8) 100%) !important;

    /* Common text shadows */
    --text-shadow-dark: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="raiffeisen"] {
    /* Raiffeisen Theme - Red with black accents */
    --color-dev: 220, 20, 20 !important; /* Red */
    --color: rgba(var(--color-dev), 0.2) !important;
    --color-half: rgba(var(--color-dev), 0.6) !important;
    --color-full: rgb(var(--color-dev)) !important;
    --color-dark: rgb(80, 20, 20) !important; /* Deep red */
    --font-color: rgb(255, 240, 240) !important; /* Red-tinted white */
    --active-link-color: rgb(64, 64, 64) !important; /* Dark gray accent */
    --inactive-link-color: rgb(255, 192, 192) !important; /* Light red */
    --main-background-color: rgb(25, 15, 15) !important;
    --accent-color: rgba(32, 32, 32, 0.8) !important; /* Dark gray highlights */

    /* Theme-specific button variables */
    --button-dark: #1a0e0e !important;
    --button-medium: #2a1a1a !important;
    --button-light: #352222 !important;
    --button-hover-dark: #2a1a1a !important;
    --button-hover-medium: #352222 !important;
    --button-hover-light: #442a2a !important;
    --input-bg-start: rgba(25, 15, 15, 0.8) !important;
    --input-bg-end: rgba(var(--color-dev), 0.3) !important;
    --input-bg-hover-start: rgba(25, 15, 15, 0.9) !important;
    --input-bg-hover-end: rgba(var(--color-dev), 0.4) !important;
    --user-highlight-bg: rgba(var(--color-dev), 0.4) !important;
    --user-highlight-border: rgba(32, 32, 32, 0.8) !important;
    --user-highlight-glow: rgba(32, 32, 32, 0.4) !important;

    /* Theme texture and effects */
    --theme-texture: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
                     radial-gradient(circle at 80% 70%, rgba(220, 20, 20, 0.12) 0%, transparent 50%) !important;
    --element-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
    --theme-border: 2px solid rgba(var(--color-dev), 0.8) !important;
    --theme-glow: 0 0 20px rgba(var(--color-dev), 0.4) !important;

    /* Container and section colors */
    --container-bg-1: rgba(220, 20, 20, 0.2) !important;
    --container-bg-2: rgba(25, 15, 15, 0.4) !important;
    --container-bg-3: rgba(220, 20, 20, 0.15) !important;
    --container-border: rgba(220, 20, 20, 0.6) !important;
    --container-shadow-main: rgba(220, 20, 20, 0.3) !important;
    --container-shadow-inset: rgba(255, 255, 255, 0.08) !important;
    --section-bg-1: rgba(220, 20, 20, 0.15) !important;
    --section-bg-2: rgba(25, 15, 15, 0.3) !important;
    --section-bg-3: rgba(220, 20, 20, 0.1) !important;
    --section-border: rgba(220, 20, 20, 0.4) !important;

    /* Status colors */
    --status-correct-bg: rgba(34, 197, 94, 0.4) !important;
    --status-correct-bg-light: rgba(34, 197, 94, 0.2) !important;
    --status-wrong-bg: rgba(239, 68, 68, 0.4) !important;
    --status-wrong-bg-light: rgba(239, 68, 68, 0.2) !important;
    --status-text-shadow: rgba(0, 0, 0, 0.5) !important;

    /* Disabled input colors */
    --disabled-input-color: rgba(255, 255, 255, 0.5) !important;
    --disabled-input-bg: rgba(255, 255, 255, 0.7) !important;

    /* GuessOver specific styling variables */
    --container-before-gradient-1: radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 40%) !important;
    --container-before-gradient-2: radial-gradient(circle at 85% 75%, rgba(220, 20, 20, 0.1) 0%, transparent 40%) !important;
    --container-title-bg-start: rgba(220, 20, 20, 0.3) !important;
    --container-title-bg-end: rgba(25, 15, 15, 0.5) !important;
    --container-title-border: rgba(220, 20, 20, 0.6) !important;
    --container-title-hover-bg-start: rgba(32, 32, 32, 0.4) !important;
    --container-title-hover-bg-end: rgba(64, 64, 64, 0.4) !important;
    --container-title-hover-shadow: rgba(220, 20, 20, 0.4) !important;
    --container-title-divider-color-1: rgba(220, 20, 20, 0.6) !important;
    --container-title-divider-color-2: rgba(32, 32, 32, 0.8) !important;
    --container-content-bg-start: rgba(220, 20, 20, 0.08) !important;
    --container-content-bg-end: rgba(25, 15, 15, 0.15) !important;
    --container-content-border: rgba(220, 20, 20, 0.3) !important;
    --container-content-shadow: rgba(255, 255, 255, 0.1) !important;
    --h3-divider-color-1: rgba(220, 20, 20, 0.8) !important;
    --h3-divider-color-2: rgba(32, 32, 32, 0.9) !important;
    --h3-divider-shadow: rgba(220, 20, 20, 0.5) !important;

    /* GuessItem specific styling variables */
    --details-center-bg-end: rgba(32, 32, 32, 0.8) !important;
    --details-center-border: rgba(255, 255, 255, 0.3) !important;
    --details-center-shadow-main: rgba(32, 32, 32, 0.5) !important;
    --details-center-shadow-inset: rgba(255, 255, 255, 0.2) !important;

    /* NavigationSlider specific styling variables */
    --nav-menu-bg-start: rgba(15, 10, 10, 0.95) !important;
    --nav-menu-bg-middle: rgba(25, 15, 15, 0.95) !important;
    --nav-menu-bg-end: rgba(35, 25, 25, 0.95) !important;
    --nav-menu-border: rgba(220, 20, 20, 0.6) !important;
    --nav-menu-shadow: rgba(220, 20, 20, 0.3) !important;
    --nav-link-text-shadow: rgba(0, 0, 0, 0.8) !important;
    --nav-link-hover-bg-start: rgba(220, 20, 20, 0.2) !important;
    --nav-link-hover-bg-end: rgba(25, 15, 15, 0.3) !important;
    --nav-link-hover-shadow: rgba(220, 20, 20, 0.3) !important;
    --nav-link-active-bg-start: rgba(32, 32, 32, 0.3) !important;
    --nav-link-active-bg-end: rgba(64, 64, 64, 0.3) !important;
    --nav-link-active-shadow: rgba(32, 32, 32, 0.5) !important;
    --nav-fakelink-text-shadow: rgba(0, 0, 0, 0.8) !important;
    --nav-fakelink-hover-bg-start: rgba(220, 20, 20, 0.2) !important;
    --nav-fakelink-hover-bg-end: rgba(25, 15, 15, 0.3) !important;
    --nav-fakelink-hover-shadow: rgba(220, 20, 20, 0.3) !important;

    /* About page specific styling variables */
    --about-main-bg: linear-gradient(135deg, rgba(25, 15, 15, 0.95) 0%, rgba(35, 25, 25, 0.9) 100%) !important;
    --about-section-bg: linear-gradient(145deg, rgba(220, 20, 20, 0.15) 0%, rgba(25, 15, 15, 0.25) 100%) !important;
    --about-section-border: rgba(220, 20, 20, 0.4) !important;
    --about-section-shadow: 0 8px 25px rgba(220, 20, 20, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --about-title-bg: linear-gradient(90deg, rgba(220, 20, 20, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
    --about-title-shadow: rgba(220, 20, 20, 0.6) !important;
    --about-link-color: rgb(255, 182, 193) !important;
    --about-link-hover: rgb(255, 255, 255) !important;
    --about-step-bg: rgba(220, 20, 20, 0.1) !important;
    --about-step-border: rgba(220, 20, 20, 0.3) !important;
    --about-image-shadow: 0 6px 20px rgba(220, 20, 20, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    --about-highlight-bg: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(220, 20, 20, 0.2) 100%) !important;
    --about-highlight-border: rgba(255, 255, 255, 0.5) !important;

    /* Rules page specific styling variables */
    --rules-main-bg: linear-gradient(135deg, rgba(25, 15, 15, 0.95) 0%, rgba(35, 25, 25, 0.9) 100%) !important;
    --rules-section-bg: linear-gradient(145deg, rgba(220, 20, 20, 0.15) 0%, rgba(25, 15, 15, 0.25) 100%) !important;
    --rules-section-border: rgba(220, 20, 20, 0.4) !important;
    --rules-section-shadow: 0 8px 25px rgba(220, 20, 20, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --rules-title-bg: linear-gradient(90deg, rgba(220, 20, 20, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
    --rules-title-shadow: rgba(220, 20, 20, 0.6) !important;
    --rules-points-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(220, 20, 20, 0.2) 100%) !important;
    --rules-points-border: rgba(255, 255, 255, 0.4) !important;
    --rules-highlight-text: rgb(255, 182, 193) !important;
    --rules-list-item-bg: rgba(220, 20, 20, 0.1) !important;
    --rules-list-item-border: rgba(220, 20, 20, 0.3) !important;
    --rules-ko-phase-bg: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(220, 20, 20, 0.15) 100%) !important;
    --rules-winner-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
    --rules-winner-border: rgba(255, 215, 0, 0.5) !important;

    /* Home page specific styling variables */
    --home-main-bg: linear-gradient(135deg, rgba(25, 15, 15, 0.95) 0%, rgba(35, 25, 25, 0.9) 100%) !important;
    --home-welcome-bg: linear-gradient(90deg, rgba(220, 20, 20, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
    --home-welcome-shadow: rgba(220, 20, 20, 0.6) !important;
    --home-card-bg: linear-gradient(145deg, rgba(220, 20, 20, 0.15) 0%, rgba(25, 15, 15, 0.25) 100%) !important;
    --home-card-border: rgba(220, 20, 20, 0.4) !important;
    --home-card-shadow: 0 8px 25px rgba(220, 20, 20, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --home-button-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(220, 20, 20, 0.8) 100%) !important;
    --home-button-border: rgba(255, 255, 255, 0.6) !important;
    --home-button-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
    --home-button-hover-bg: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(220, 20, 20, 1) 100%) !important;
    --home-button-hover-shadow: 0 8px 25px rgba(255, 255, 255, 0.6) !important;
    --home-link-color: rgb(255, 182, 193) !important;
    --home-link-hover: rgb(255, 255, 255) !important;
    --home-icon-glow: 0 0 30px rgba(220, 20, 20, 0.6), 0 0 60px rgba(255, 255, 255, 0.4) !important;

    /* Admin section specific styling variables */
    --admin-main-bg: linear-gradient(135deg, rgba(220, 20, 20, 0.15) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(220, 20, 20, 0.2) 100%) !important;
    --admin-container-bg: linear-gradient(145deg, rgba(220, 20, 20, 0.2) 0%, rgba(255, 255, 255, 0.15) 100%) !important;
    --admin-container-border: rgba(220, 20, 20, 0.4) !important;
    --admin-container-shadow: 0 0 20px rgba(220, 20, 20, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --admin-title-bg: linear-gradient(90deg, rgba(220, 20, 20, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
    --admin-title-border: rgba(220, 20, 20, 0.5) !important;
    --admin-item-bg: linear-gradient(135deg, rgba(220, 20, 20, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    --admin-item-border: rgba(220, 20, 20, 0.3) !important;
    --admin-status-active: rgba(220, 20, 20, 0.4) !important;
    --admin-status-inactive: rgba(255, 255, 255, 0.3) !important;
    --admin-button-bg: linear-gradient(135deg, rgba(220, 20, 20, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%) !important;
    --admin-button-hover: linear-gradient(135deg, rgba(220, 20, 20, 1) 0%, rgba(255, 255, 255, 0.8) 100%) !important;

    /* Common text shadows */
    --text-shadow-dark: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="hockey"] {
    /* Hockey Theme - Ice blue with themed accents */
    --color-dev: 65, 160, 220 !important; /* Ice blue */
    --color: rgba(var(--color-dev), 0.2) !important;
    --color-half: rgba(var(--color-dev), 0.6) !important;
    --color-full: rgb(var(--color-dev)) !important;
    --color-dark: rgb(20, 50, 80) !important; /* Deep ice blue */
    --font-color: rgb(240, 248, 255) !important; /* Ice white */
    --active-link-color: rgb(255, 69, 0) !important; /* Hockey orange */
    --inactive-link-color: rgb(176, 196, 222) !important; /* Light steel blue */
    --main-background-color: rgb(25, 42, 65) !important;
    --accent-color: rgba(220, 20, 60, 0.8) !important; /* Crimson red for highlights */

    /* Theme-specific button variables */
    --button-dark: #1a1a1a !important;
    --button-medium: #2a2a2a !important;
    --button-light: #333333 !important;
    --button-hover-dark: #2a2a2a !important;
    --button-hover-medium: #3a3a3a !important;
    --button-hover-light: #444444 !important;
    --input-bg-start: rgba(25, 42, 65, 0.8) !important;
    --input-bg-end: rgba(var(--color-dev), 0.3) !important;
    --input-bg-hover-start: rgba(25, 42, 65, 0.9) !important;
    --input-bg-hover-end: rgba(var(--color-dev), 0.4) !important;
    --user-highlight-bg: rgba(var(--color-dev), 0.4) !important;
    --user-highlight-border: rgba(65, 160, 220, 0.8) !important;
    --user-highlight-glow: rgba(135, 206, 235, 0.4) !important;

    /* Theme texture and effects */
    --theme-texture: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                     radial-gradient(circle at 80% 70%, rgba(135, 206, 235, 0.15) 0%, transparent 50%) !important;
    --element-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
    --theme-border: 2px solid rgba(var(--color-dev), 0.8) !important;
    --theme-glow: 0 0 20px rgba(var(--color-dev), 0.4) !important;

    /* Container and section colors */
    --container-bg-1: rgba(65, 160, 220, 0.2) !important;
    --container-bg-2: rgba(25, 42, 65, 0.4) !important;
    --container-bg-3: rgba(65, 160, 220, 0.15) !important;
    --container-border: rgba(65, 160, 220, 0.6) !important;
    --container-shadow-main: rgba(65, 160, 220, 0.3) !important;
    --container-shadow-inset: rgba(255, 255, 255, 0.1) !important;
    --section-bg-1: rgba(65, 160, 220, 0.15) !important;
    --section-bg-2: rgba(25, 42, 65, 0.3) !important;
    --section-bg-3: rgba(65, 160, 220, 0.1) !important;
    --section-border: rgba(65, 160, 220, 0.4) !important;

    /* Status colors */
    --status-correct-bg: rgba(34, 197, 94, 0.4) !important;
    --status-correct-bg-light: rgba(34, 197, 94, 0.2) !important;
    --status-wrong-bg: rgba(239, 68, 68, 0.4) !important;
    --status-wrong-bg-light: rgba(239, 68, 68, 0.2) !important;
    --status-text-shadow: rgba(0, 0, 0, 0.5) !important;

    /* Disabled input colors */
    --disabled-input-color: rgba(255, 255, 255, 0.5) !important;
    --disabled-input-bg: rgba(255, 255, 255, 0.7) !important;

    /* GuessOver specific styling variables */
    --container-before-gradient-1: radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 40%) !important;
    --container-before-gradient-2: radial-gradient(circle at 85% 75%, rgba(65, 160, 220, 0.1) 0%, transparent 40%) !important;
    --container-title-bg-start: rgba(65, 160, 220, 0.3) !important;
    --container-title-bg-end: rgba(25, 42, 65, 0.5) !important;
    --container-title-border: rgba(65, 160, 220, 0.6) !important;
    --container-title-hover-bg-start: rgba(255, 69, 0, 0.4) !important;
    --container-title-hover-bg-end: rgba(220, 20, 60, 0.4) !important;
    --container-title-hover-shadow: rgba(65, 160, 220, 0.4) !important;
    --container-title-divider-color-1: rgba(65, 160, 220, 0.6) !important;
    --container-title-divider-color-2: rgba(255, 69, 0, 0.8) !important;
    --container-content-bg-start: rgba(65, 160, 220, 0.08) !important;
    --container-content-bg-end: rgba(25, 42, 65, 0.15) !important;
    --container-content-border: rgba(65, 160, 220, 0.3) !important;
    --container-content-shadow: rgba(255, 255, 255, 0.1) !important;
    --h3-divider-color-1: rgba(65, 160, 220, 0.8) !important;
    --h3-divider-color-2: rgba(255, 69, 0, 0.9) !important;
    --h3-divider-shadow: rgba(65, 160, 220, 0.5) !important;

    /* GuessItem specific styling variables */
    --details-center-bg-end: rgba(220, 20, 60, 0.8) !important;
    --details-center-border: rgba(255, 255, 255, 0.3) !important;
    --details-center-shadow-main: rgba(220, 20, 60, 0.5) !important;
    --details-center-shadow-inset: rgba(255, 255, 255, 0.2) !important;

    /* NavigationSlider specific styling variables */
    --nav-menu-bg-start: rgba(15, 32, 50, 0.95) !important;
    --nav-menu-bg-middle: rgba(25, 42, 65, 0.95) !important;
    --nav-menu-bg-end: rgba(35, 52, 75, 0.95) !important;
    --nav-menu-border: rgba(65, 160, 220, 0.6) !important;
    --nav-menu-shadow: rgba(65, 160, 220, 0.3) !important;
    --nav-link-text-shadow: rgba(0, 0, 0, 0.8) !important;
    --nav-link-hover-bg-start: rgba(65, 160, 220, 0.2) !important;
    --nav-link-hover-bg-end: rgba(25, 42, 65, 0.3) !important;
    --nav-link-hover-shadow: rgba(65, 160, 220, 0.3) !important;
    --nav-link-active-bg-start: rgba(255, 69, 0, 0.3) !important;
    --nav-link-active-bg-end: rgba(220, 20, 60, 0.3) !important;
    --nav-link-active-shadow: rgba(255, 69, 0, 0.5) !important;
    --nav-fakelink-text-shadow: rgba(0, 0, 0, 0.8) !important;
    --nav-fakelink-hover-bg-start: rgba(65, 160, 220, 0.2) !important;
    --nav-fakelink-hover-bg-end: rgba(25, 42, 65, 0.3) !important;
    --nav-fakelink-hover-shadow: rgba(65, 160, 220, 0.3) !important;

    /* About page specific styling variables */
    --about-main-bg: linear-gradient(135deg, rgba(25, 42, 65, 0.95) 0%, rgba(35, 52, 75, 0.9) 100%) !important;
    --about-section-bg: linear-gradient(145deg, rgba(65, 160, 220, 0.15) 0%, rgba(25, 42, 65, 0.25) 100%) !important;
    --about-section-border: rgba(65, 160, 220, 0.4) !important;
    --about-section-shadow: 0 8px 25px rgba(65, 160, 220, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --about-title-bg: linear-gradient(90deg, rgba(65, 160, 220, 0.4) 0%, rgba(255, 69, 0, 0.3) 100%) !important;
    --about-title-shadow: rgba(65, 160, 220, 0.6) !important;
    --about-link-color: rgb(176, 196, 222) !important;
    --about-link-hover: rgb(255, 69, 0) !important;
    --about-step-bg: rgba(65, 160, 220, 0.1) !important;
    --about-step-border: rgba(65, 160, 220, 0.3) !important;
    --about-image-shadow: 0 6px 20px rgba(65, 160, 220, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    --about-highlight-bg: linear-gradient(45deg, rgba(255, 69, 0, 0.2) 0%, rgba(65, 160, 220, 0.2) 100%) !important;
    --about-highlight-border: rgba(255, 69, 0, 0.5) !important;

    /* Rules page specific styling variables */
    --rules-main-bg: linear-gradient(135deg, rgba(25, 42, 65, 0.95) 0%, rgba(35, 52, 75, 0.9) 100%) !important;
    --rules-section-bg: linear-gradient(145deg, rgba(65, 160, 220, 0.15) 0%, rgba(25, 42, 65, 0.25) 100%) !important;
    --rules-section-border: rgba(65, 160, 220, 0.4) !important;
    --rules-section-shadow: 0 8px 25px rgba(65, 160, 220, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --rules-title-bg: linear-gradient(90deg, rgba(65, 160, 220, 0.4) 0%, rgba(255, 69, 0, 0.3) 100%) !important;
    --rules-title-shadow: rgba(65, 160, 220, 0.6) !important;
    --rules-points-bg: linear-gradient(135deg, rgba(255, 69, 0, 0.2) 0%, rgba(65, 160, 220, 0.2) 100%) !important;
    --rules-points-border: rgba(255, 69, 0, 0.4) !important;
    --rules-highlight-text: rgb(176, 196, 222) !important;
    --rules-list-item-bg: rgba(65, 160, 220, 0.1) !important;
    --rules-list-item-border: rgba(65, 160, 220, 0.3) !important;
    --rules-ko-phase-bg: linear-gradient(45deg, rgba(255, 69, 0, 0.25) 0%, rgba(65, 160, 220, 0.15) 100%) !important;
    --rules-winner-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 69, 0, 0.2) 100%) !important;
    --rules-winner-border: rgba(255, 215, 0, 0.5) !important;

    /* Home page specific styling variables */
    --home-main-bg: linear-gradient(135deg, rgba(25, 42, 65, 0.95) 0%, rgba(35, 52, 75, 0.9) 100%) !important;
    --home-welcome-bg: linear-gradient(90deg, rgba(65, 160, 220, 0.4) 0%, rgba(255, 69, 0, 0.3) 100%) !important;
    --home-welcome-shadow: rgba(65, 160, 220, 0.6) !important;
    --home-card-bg: linear-gradient(145deg, rgba(65, 160, 220, 0.15) 0%, rgba(25, 42, 65, 0.25) 100%) !important;
    --home-card-border: rgba(65, 160, 220, 0.4) !important;
    --home-card-shadow: 0 8px 25px rgba(65, 160, 220, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --home-button-bg: linear-gradient(135deg, rgba(255, 69, 0, 0.8) 0%, rgba(65, 160, 220, 0.8) 100%) !important;
    --home-button-border: rgba(255, 69, 0, 0.6) !important;
    --home-button-shadow: 0 6px 20px rgba(255, 69, 0, 0.4) !important;
    --home-button-hover-bg: linear-gradient(135deg, rgba(255, 69, 0, 1) 0%, rgba(65, 160, 220, 1) 100%) !important;
    --home-button-hover-shadow: 0 8px 25px rgba(255, 69, 0, 0.6) !important;
    --home-link-color: rgb(176, 196, 222) !important;
    --home-link-hover: rgb(255, 69, 0) !important;
    --home-icon-glow: 0 0 30px rgba(65, 160, 220, 0.6), 0 0 60px rgba(135, 206, 235, 0.4) !important;

    /* Admin section specific styling variables */
    --admin-main-bg: linear-gradient(135deg, rgba(65, 160, 220, 0.15) 0%, rgba(135, 206, 235, 0.1) 50%, rgba(65, 160, 220, 0.2) 100%) !important;
    --admin-container-bg: linear-gradient(145deg, rgba(65, 160, 220, 0.2) 0%, rgba(135, 206, 235, 0.15) 100%) !important;
    --admin-container-border: rgba(65, 160, 220, 0.4) !important;
    --admin-container-shadow: 0 0 20px rgba(65, 160, 220, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
    --admin-title-bg: linear-gradient(90deg, rgba(65, 160, 220, 0.3) 0%, rgba(135, 206, 235, 0.2) 100%) !important;
    --admin-title-border: rgba(65, 160, 220, 0.5) !important;
    --admin-item-bg: linear-gradient(135deg, rgba(65, 160, 220, 0.1) 0%, rgba(135, 206, 235, 0.05) 100%) !important;
    --admin-item-border: rgba(65, 160, 220, 0.3) !important;
    --admin-status-active: rgba(65, 160, 220, 0.4) !important;
    --admin-status-inactive: rgba(135, 206, 235, 0.3) !important;
    --admin-button-bg: linear-gradient(135deg, rgba(65, 160, 220, 0.8) 0%, rgba(135, 206, 235, 0.6) 100%) !important;
    --admin-button-hover: linear-gradient(135deg, rgba(65, 160, 220, 1) 0%, rgba(135, 206, 235, 0.8) 100%) !important;

    /* Common text shadows */
    --text-shadow-dark: rgba(0, 0, 0, 0.7) !important;
}



html {
    background-color: var(--main-background-color);
    background: var(--main-background-color);
}