/* ==========================================================================
   Glow in the Dark Theme - Neon & Futuristic Calendar
   Version: 1.2
   Updated: 2024-06-08
   Changes:
   - Futuristic neon glow design with dark background and vibrant accents
   - Cyberpunk-inspired aesthetic with glowing elements and dark theme
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&family=Exo+2:wght@300;400;500;600&display=swap');

:root {
    /* Glow in the Dark Palette */
    --gd-bg: #0A0A0F;
    --gd-text: #E0F7FA;
    --gd-primary: #12121A;
    --gd-secondary: #1A1A25;
    --gd-date-number: #E0F7FA;

    /* Neon Greens */
    --gd-neon1: #00FF88;
    --gd-neon2: #00CC6A;
    --gd-neon3: #00994C;
    --gd-neon4: rgba(0, 255, 136, 0.7);
    --gd-neon5: rgba(0, 255, 136, 0.5);

    /* Electric Blues */
    --gd-electric1: #00D4FF;
    --gd-electric2: #00A8CC;
    --gd-electric3: #007C99;
    --gd-electric4: rgba(0, 212, 255, 0.7);
    --gd-electric5: rgba(0, 212, 255, 0.5);

    /* Hot Pinks */
    --gd-pink1: #FF00FF;
    --gd-pink2: #CC00CC;
    --gd-pink3: #990099;
    --gd-pink4: rgba(255, 0, 255, 0.7);
    --gd-pink5: rgba(255, 0, 255, 0.5);

    /* Cyber Purple */
    --gd-purple1: #9D00FF;
    --gd-purple2: #7A00CC;
    --gd-purple3: #580099;
    --gd-purple4: rgba(157, 0, 255, 0.7);
    --gd-purple5: rgba(157, 0, 255, 0.5);

    /* Theme Variables */
    --gd-shadow: rgba(0, 255, 136, 0.3);
    --gd-radius: 8px;
    --gd-transition: 0.25s ease;
    --gd-hover: #00FFAA;
    --gd-glow: 0 0 20px rgba(0, 255, 136, 0.5);
    --gd-pattern: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".15" fill="%2300FF88"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".2" fill="%2300FF88"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" opacity=".25" fill="%2300FF88"/></svg>');
}

/* ==================== ANIMATIONS ==================== */
@keyframes gd-fade {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

@keyframes gd-slide {
    from {
        transform: translateY(5px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes gd-pulse {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(0, 255, 136, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.7);
    }
}

@keyframes gd-glow {

    0%,
    100% {
        text-shadow:
            0 0 5px var(--gd-neon1),
            0 0 10px var(--gd-neon1);
    }

    50% {
        text-shadow:
            0 0 10px var(--gd-neon1),
            0 0 20px var(--gd-neon1),
            0 0 30px var(--gd-neon1);
    }
}

@keyframes gd-scan {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes gd-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes gd-flicker {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes gd-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes gd-shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* ==================== BASE STYLES ==================== */
.glow-in-the-dark {
    font-family: 'Exo 2', sans-serif;
    color: var(--gd-text);
    line-height: 1.6;
    font-size: 1rem;
    background-color: var(--gd-bg);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.glow-in-the-dark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, var(--gd-neon5) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, var(--gd-electric5) 0%, transparent 50%),
        linear-gradient(45deg, transparent 49%, rgba(0, 255, 136, 0.05) 50%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(0, 212, 255, 0.05) 50%, transparent 51%);
    background-size:
        300px 300px,
        300px 300px,
        50px 50px,
        50px 50px;
    pointer-events: none;
    z-index: 1;
}

.glow-in-the-dark .container {
    background-color: var(--gd-primary);
    padding: 2rem;
    border: 1px solid var(--gd-neon4);
    box-shadow:
        var(--gd-glow),
        inset 0 0 20px rgba(0, 255, 136, 0.1);
    position: relative;
    overflow: hidden;
    max-width: 1600px;
    margin: 0 auto;
    border-radius: 12px;
    z-index: 2;
    background-image:
        linear-gradient(45deg, rgba(0, 255, 136, 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 255, 136, 0.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 255, 136, 0.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 255, 136, 0.05) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.glow-in-the-dark .container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--gd-neon1) 0%,
            var(--gd-electric1) 50%,
            var(--gd-pink1) 100%);
    animation: gd-pulse 2s ease-in-out infinite;
}

.glow-in-the-dark .container::after {
    content: "⚡";
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 1.5rem;
    opacity: 0.8;
    animation: gd-flicker 1s ease-in-out infinite;
}

/* Scan line effect */
.glow-in-the-dark .container .scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gd-neon1), transparent);
    animation: gd-scan 3s linear infinite;
    z-index: 1;
}

/* ==================== HEADER & TITLE ==================== */
.glow-in-the-dark #calendar-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--gd-text);
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1.2rem;
    letter-spacing: 0.1em;
    position: relative;
    font-weight: 700;
    animation: gd-glow 2s ease-in-out infinite;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--gd-neon1) 0%, var(--gd-electric1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: gd-shimmer 3s linear infinite;
}

.glow-in-the-dark #calendar-title::after {
    content: "✨";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    opacity: 0.8;
    animation: gd-rotate 4s linear infinite;
}

/* ==================== DATE & WEATHER DISPLAY ==================== */
.glow-in-the-dark #date-weather-container {
    text-align: center;
    margin: 1.8rem 0;
    padding: 1.5rem;
    background-color: var(--gd-primary);
    border: 1px solid var(--gd-neon4);
    border-radius: var(--gd-radius);
    position: relative;
    box-shadow:
        0 0 20px rgba(0, 255, 136, 0.2),
        inset 0 0 10px rgba(0, 255, 136, 0.1);
    overflow: hidden;
}

.glow-in-the-dark #date-weather-container::before {
    content: "SYSTEM ACTIVE";
    position: absolute;
    top: -10px;
    right: 20px;
    background-color: var(--gd-primary);
    padding: 0 10px;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--gd-neon1);
    font-weight: 600;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    animation: gd-flicker 2s ease-in-out infinite;
}

.glow-in-the-dark #date-weather-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gd-neon1), transparent);
}

.glow-in-the-dark #current-date {
    font-family: 'Orbitron', sans-serif;
    color: var(--gd-text);
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
    text-shadow: 0 0 5px var(--gd-neon1);
}

.glow-in-the-dark #today-weather {
    font-family: 'Exo 2', sans-serif;
    color: var(--gd-electric1);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-shadow: 0 0 3px var(--gd-electric1);
}

/* ==================== ANALOG CLOCK ==================== */
.glow-in-the-dark #analog-watch {
    display: flex;
    justify-content: center;
    margin: 1.8rem 0;
}

.glow-in-the-dark .clock-face {
    width: 180px;
    height: 180px;
    border: 2px solid var(--gd-neon1);
    border-radius: 50%;
    position: relative;
    background-color: var(--gd-primary);
    box-shadow:
        0 0 30px rgba(0, 255, 136, 0.3),
        inset 0 0 20px rgba(0, 255, 136, 0.1);
    overflow: hidden;
}

.glow-in-the-dark .clock-face::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, var(--gd-neon1) 0%, var(--gd-electric1) 100%);
    border-radius: 50%;
    z-index: 10;
    box-shadow:
        0 0 15px rgba(0, 255, 136, 0.5),
        inset 0 0 5px rgba(255, 255, 255, 0.5);
}

.glow-in-the-dark .clock-face::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg 7.5deg,
            rgba(0, 255, 136, 0.3) 7.5deg 12.5deg,
            transparent 12.5deg 30deg,
            transparent 30deg 37.5deg,
            rgba(0, 212, 255, 0.3) 37.5deg 42.5deg,
            transparent 42.5deg 60deg,
            transparent 60deg 67.5deg,
            rgba(255, 0, 255, 0.3) 67.5deg 72.5deg,
            transparent 72.5deg 90deg,
            transparent 90deg 97.5deg,
            rgba(157, 0, 255, 0.3) 97.5deg 102.5deg,
            transparent 102.5deg 120deg,
            transparent 120deg 127.5deg,
            rgba(0, 255, 136, 0.3) 127.5deg 132.5deg,
            transparent 132.5deg 150deg,
            transparent 150deg 157.5deg,
            rgba(0, 212, 255, 0.3) 157.5deg 162.5deg,
            transparent 162.5deg 180deg,
            transparent 180deg 187.5deg,
            rgba(255, 0, 255, 0.3) 187.5deg 192.5deg,
            transparent 192.5deg 210deg,
            transparent 210deg 217.5deg,
            rgba(157, 0, 255, 0.3) 217.5deg 222.5deg,
            transparent 222.5deg 240deg,
            transparent 240deg 247.5deg,
            rgba(0, 255, 136, 0.3) 247.5deg 252.5deg,
            transparent 252.5deg 270deg,
            transparent 270deg 277.5deg,
            rgba(0, 212, 255, 0.3) 277.5deg 282.5deg,
            transparent 282.5deg 300deg,
            transparent 300deg 307.5deg,
            rgba(255, 0, 255, 0.3) 307.5deg 312.5deg,
            transparent 312.5deg 330deg,
            transparent 330deg 337.5deg,
            rgba(157, 0, 255, 0.3) 337.5deg 342.5deg,
            transparent 342.5deg 360deg);
}

.glow-in-the-dark .hand {
    position: absolute;
    top: 50%;
    transform-origin: 100%;
    transform: rotate(90deg);
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    z-index: 5;
}

.glow-in-the-dark .hour-hand {
    width: 35%;
    left: 15%;
    height: 4px;
    background: linear-gradient(90deg, var(--gd-neon1) 0%, transparent 100%);
    margin-top: -2px;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--gd-neon1);
}

.glow-in-the-dark .minute-hand {
    width: 45%;
    left: 5%;
    height: 3px;
    background: linear-gradient(90deg, var(--gd-electric1) 0%, transparent 100%);
    margin-top: -1.5px;
    border-radius: 1.5px;
    box-shadow: 0 0 10px var(--gd-electric1);
}

.glow-in-the-dark .second-hand {
    width: 45%;
    left: 5%;
    height: 1px;
    background: linear-gradient(90deg, var(--gd-pink1) 0%, transparent 100%);
    margin-top: -0.5px;
    box-shadow: 0 0 10px var(--gd-pink1);
}

/* ==================== CALENDAR TABLE ==================== */
.glow-in-the-dark table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    margin: 1.8rem auto;
    background-color: transparent;
    table-layout: fixed;
}

/* DAY OF WEEK HEADERS */
.glow-in-the-dark th {
    background: linear-gradient(135deg, var(--gd-neon1) 0%, var(--gd-electric1) 100%);
    color: var(--gd-primary) !important;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    padding: 1rem 0.5rem;
    border-radius: var(--gd-radius);
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.glow-in-the-dark th::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 100%);
    pointer-events: none;
}

.glow-in-the-dark th span.full-day-name {
    display: inline;
    position: relative;
    z-index: 1;
}

.glow-in-the-dark th abbr {
    display: none;
    text-decoration: none;
    border-bottom: none;
}

/* DATE NUMBER STYLES */
.glow-in-the-dark td {
    background-color: var(--gd-primary);
    color: var(--gd-text);
    padding: 1rem;
    border: 1px solid var(--gd-neon4);
    height: 90px;
    vertical-align: top;
    transition: all var(--gd-transition);
    position: relative;
    border-radius: var(--gd-radius);
    box-shadow:
        inset 0 0 10px rgba(0, 255, 136, 0.1),
        0 0 10px rgba(0, 255, 136, 0.1);
}

.glow-in-the-dark td .date-number {
    color: var(--gd-text) !important;
    font-weight: 600;
    font-size: 1.2rem;
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 3px var(--gd-neon1);
}

.glow-in-the-dark td:hover {
    background-color: var(--gd-secondary);
    box-shadow:
        0 0 20px rgba(0, 255, 136, 0.3),
        inset 0 0 15px rgba(0, 255, 136, 0.2);
    border-color: var(--gd-neon1);
    transform: translateY(-3px);
}

/* Current date highlight */
.glow-in-the-dark td.current-day {
    background-color: rgba(0, 255, 136, 0.1);
    border: 2px solid var(--gd-neon1);
    animation: gd-pulse 2s infinite;
    box-shadow:
        0 0 25px rgba(0, 255, 136, 0.4),
        inset 0 0 15px rgba(0, 255, 136, 0.2);
}

.glow-in-the-dark td.current-day .date-number {
    color: var(--gd-neon1) !important;
    font-weight: 700;
    text-shadow: 0 0 10px var(--gd-neon1);
}

.glow-in-the-dark td.current-day::before {
    content: "🔆";
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    font-size: 1.1rem;
    animation: gd-flicker 1.5s ease-in-out infinite;
}

/* ==================== EVENT MARKERS ==================== */
.glow-in-the-dark .event-marker {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--gd-neon1) 0%, var(--gd-electric1) 100%);
    margin: 0 1px;
    transition: all var(--gd-transition);
    animation: gd-pulse 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 5px var(--gd-neon1);
}

.glow-in-the-dark .event-marker::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 3px;
    background-color: var(--gd-text);
    border-radius: 50%;
    opacity: 0.8;
}

.glow-in-the-dark .event-marker:hover {
    transform: scale(1.5);
    background: radial-gradient(circle at center, var(--gd-electric1) 0%, var(--gd-pink1) 100%);
    box-shadow: 0 0 10px var(--gd-pink1);
}

/* ==================== MODAL STYLES ==================== */
.glow-in-the-dark .modal-content {
    position: relative;
    background-color: var(--gd-primary);
    border: 1px solid var(--gd-neon4);
    padding: 25px;
    color: var(--gd-text);
    box-shadow:
        0 0 40px rgba(0, 255, 136, 0.3),
        inset 0 0 20px rgba(0, 255, 136, 0.1);
    border-radius: 12px;
    animation: gd-slide 0.3s ease-out;
    background-image:
        linear-gradient(45deg, rgba(0, 255, 136, 0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 255, 136, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 255, 136, 0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 255, 136, 0.1) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    overflow: hidden;
}

.glow-in-the-dark .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--gd-neon1) 0%,
            var(--gd-electric1) 50%,
            var(--gd-pink1) 100%);
    animation: gd-pulse 2s ease-in-out infinite;
}

.glow-in-the-dark .modal-content h2 {
    color: var(--gd-text);
    font-family: 'Orbitron', sans-serif;
    font-size: 2em;
    margin-bottom: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--gd-neon1) 0%, var(--gd-electric1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

/* Modal date display */
.glow-in-the-dark .modal-date {
    font-family: 'Orbitron', sans-serif;
    color: var(--gd-text);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--gd-neon4);
    text-shadow: 0 0 5px var(--gd-neon1);
}

/* Event list */
.glow-in-the-dark .event-list {
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.glow-in-the-dark .event-item {
    background-color: var(--gd-secondary);
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--gd-neon1);
    border-radius: var(--gd-radius);
    transition: all var(--gd-transition);
    box-shadow:
        0 0 15px rgba(0, 255, 136, 0.1),
        inset 0 0 10px rgba(0, 255, 136, 0.05);
}

.glow-in-the-dark .event-item:hover {
    background-color: rgba(0, 255, 136, 0.1);
    transform: translateX(5px);
    border-left-color: var(--gd-electric1);
    box-shadow:
        0 0 25px rgba(0, 212, 255, 0.3),
        inset 0 0 15px rgba(0, 212, 255, 0.1);
}

.glow-in-the-dark .event-time {
    font-family: 'Exo 2', sans-serif;
    color: var(--gd-neon1);
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 0.3rem;
    display: block;
    text-shadow: 0 0 3px var(--gd-neon1);
}

.glow-in-the-dark .event-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--gd-text);
    text-shadow: 0 0 2px var(--gd-electric1);
}

.glow-in-the-dark .event-description {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--gd-text);
    opacity: 0.9;
}

.glow-in-the-dark .modal-content button {
    background: linear-gradient(135deg, var(--gd-neon1) 0%, var(--gd-electric1) 100%);
    color: var(--gd-primary);
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--gd-transition);
    letter-spacing: 0.05em;
    font-family: 'Orbitron', sans-serif;
    border-radius: var(--gd-radius);
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.glow-in-the-dark .modal-content button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.glow-in-the-dark .modal-content button:hover::before {
    left: 100%;
}

.glow-in-the-dark .modal-content button:hover {
    background: linear-gradient(135deg, var(--gd-hover) 0%, var(--gd-electric2) 100%);
    box-shadow:
        0 0 25px rgba(0, 255, 136, 0.5),
        0 0 10px rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
}

/* Close Button */
.glow-in-the-dark .modal .close-button {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: var(--gd-primary);
    color: var(--gd-neon1);
    border: 1px solid var(--gd-neon1);
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: all var(--gd-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    box-shadow:
        0 0 10px rgba(0, 255, 136, 0.3),
        inset 0 0 5px rgba(0, 255, 136, 0.1);
}

.glow-in-the-dark .modal .close-button:hover {
    background-color: var(--gd-neon1);
    color: var(--gd-primary);
    border-color: var(--gd-neon1);
    transform: rotate(90deg);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

/* ==================== BUTTONS & CONTROLS ==================== */
.glow-in-the-dark .button,
.glow-in-the-dark .transparent-button {
    border: 1px solid var(--gd-neon1);
    color: var(--gd-neon1);
    background-color: transparent;
    padding: 0.8rem 1.5rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--gd-transition);
    position: relative;
    overflow: hidden;
    margin: 0.4rem;
    border-radius: var(--gd-radius);
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    text-transform: uppercase;
    box-shadow:
        0 0 10px rgba(0, 255, 136, 0.3),
        inset 0 0 5px rgba(0, 255, 136, 0.1);
}

.glow-in-the-dark .button::before,
.glow-in-the-dark .transparent-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), transparent);
    transition: left 0.6s;
}

.glow-in-the-dark .button:hover::before,
.glow-in-the-dark .transparent-button:hover::before {
    left: 100%;
}

.glow-in-the-dark .button:hover,
.glow-in-the-dark .transparent-button:hover {
    background-color: var(--gd-neon1);
    color: var(--gd-primary);
    box-shadow:
        0 0 20px rgba(0, 255, 136, 0.5),
        inset 0 0 10px rgba(0, 255, 136, 0.2);
    transform: translateY(-2px);
}

.glow-in-the-dark .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 1.2rem 0;
    gap: 0.5rem;
}

/* ==================== THEME SWITCHER ==================== */
.glow-in-the-dark #theme-switcher-container {
    position: relative;
    margin: 0 0.8rem;
    min-width: 200px;
    z-index: 1000;
}

.glow-in-the-dark #theme-switcher {
    background-color: var(--gd-primary);
    color: var(--gd-neon1) !important;
    border: 1px solid var(--gd-neon1);
    padding: 0.8rem 2.2rem 0.8rem 1rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300FF88'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem;
    cursor: pointer;
    transition: all var(--gd-transition);
    border-radius: var(--gd-radius);
    text-transform: uppercase;
    box-shadow:
        0 0 10px rgba(0, 255, 136, 0.3),
        inset 0 0 5px rgba(0, 255, 136, 0.1);
}

.glow-in-the-dark #theme-switcher option {
    background-color: var(--gd-primary) !important;
    color: var(--gd-neon1) !important;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 10px 12px !important;
}

.glow-in-the-dark #theme-switcher:focus {
    outline: none;
    border-color: var(--gd-neon1);
    box-shadow:
        0 0 0 3px rgba(0, 255, 136, 0.3),
        0 0 20px rgba(0, 255, 136, 0.5);
}

/* ==================== BACK TO TOP BUTTON ==================== */
.glow-in-the-dark #backToTopBtn {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
    border: none;
    padding: 1rem 1.7rem;
    font-size: 0.95rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    color: var(--gd-primary);
    background: linear-gradient(135deg, var(--gd-neon1) 0%, var(--gd-electric1) 100%);
    cursor: pointer;
    transition: all var(--gd-transition);
    opacity: 0.9;
    display: none;
    border-radius: var(--gd-radius);
    box-shadow:
        0 0 25px rgba(0, 255, 136, 0.5),
        0 0 10px rgba(0, 212, 255, 0.3);
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.glow-in-the-dark #backToTopBtn:hover {
    background: linear-gradient(135deg, var(--gd-hover) 0%, var(--gd-electric2) 100%);
    opacity: 1;
    transform: translateY(-3px);
    box-shadow:
        0 0 35px rgba(0, 255, 136, 0.7),
        0 0 15px rgba(0, 212, 255, 0.5);
}

/* ==================== FOOTER ==================== */
.glow-in-the-dark footer {
    text-align: center;
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--gd-neon4);
    color: var(--gd-neon1);
    font-size: 0.9rem;
    font-weight: 500;
    text-shadow: 0 0 3px var(--gd-neon1);
}

/* ==================== MEDIA QUERIES ==================== */
@media (max-width: 992px) {
    .glow-in-the-dark .container {
        padding: 1.5rem;
    }

    .glow-in-the-dark #calendar-title {
        font-size: 2.2rem;
    }

    .glow-in-the-dark #current-date {
        font-size: 1.5rem;
    }

    .glow-in-the-dark #today-weather {
        font-size: 1.1rem;
    }

    .glow-in-the-dark .modal-date {
        font-size: 1.3rem;
    }

    .glow-in-the-dark .event-title {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .glow-in-the-dark {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .glow-in-the-dark .clock-face {
        width: 150px;
        height: 150px;
    }

    .glow-in-the-dark th {
        font-size: 0.85rem;
        padding: 0.7rem 0.3rem;
    }

    .glow-in-the-dark th span.full-day-name {
        display: none;
    }

    .glow-in-the-dark th abbr {
        display: inline;
    }

    .glow-in-the-dark td {
        padding: 0.7rem;
        height: 80px;
        font-size: 0.85rem;
    }

    .glow-in-the-dark td .date-number {
        font-size: 1.1rem;
        top: 6px;
        left: 6px;
    }

    .glow-in-the-dark td.current-day::before {
        font-size: 1rem;
        top: 4px;
        right: 4px;
    }

    .glow-in-the-dark #backToTopBtn {
        right: 15px;
        bottom: 15px;
        padding: 0.9rem 1.5rem;
        font-size: 0.9rem;
    }

    .glow-in-the-dark #theme-switcher {
        padding: 0.7rem 1.8rem 0.7rem 0.8rem;
        font-size: 0.9rem;
        min-width: 170px;
    }

    .glow-in-the-dark .modal-content {
        padding: 20px;
    }

    .glow-in-the-dark .event-item {
        padding: 0.8rem;
    }
}

@media (max-width: 576px) {
    .glow-in-the-dark .container {
        padding: 1rem;
    }

    .glow-in-the-dark #calendar-title {
        font-size: 1.8rem;
    }

    .glow-in-the-dark #current-date {
        font-size: 1.3rem;
    }

    .glow-in-the-dark #today-weather {
        font-size: 0.9rem;
    }

    .glow-in-the-dark .clock-face {
        width: 130px;
        height: 130px;
    }

    .glow-in-the-dark th {
        font-size: 0.8rem;
        padding: 0.6rem 0.3rem;
    }

    .glow-in-the-dark td {
        padding: 0.6rem;
        height: 70px;
        font-size: 0.8rem;
    }

    .glow-in-the-dark td .date-number {
        font-size: 0.9rem;
        top: 5px;
        left: 5px;
    }

    .glow-in-the-dark #theme-switcher {
        min-width: 150px;
        font-size: 0.85rem;
    }

    .glow-in-the-dark .modal-content {
        padding: 15px;
    }

    .glow-in-the-dark .modal-date {
        font-size: 1.2rem;
    }

    .glow-in-the-dark .event-time {
        font-size: 0.85rem;
    }
}

@media (max-width: 400px) {
    .glow-in-the-dark th {
        font-size: 0.75rem;
        padding: 0.5rem 0.2rem;
    }

    .glow-in-the-dark td {
        height: 60px;
    }

    .glow-in-the-dark td .date-number {
        font-size: 0.85rem;
    }

    .glow-in-the-dark #theme-switcher {
        min-width: 130px;
        font-size: 0.8rem;
    }

    .glow-in-the-dark .controls {
        flex-direction: column;
        gap: 0.3rem;
    }

    .glow-in-the-dark .button,
    .glow-in-the-dark .transparent-button {
        width: 100%;
        margin: 0.1rem 0;
        text-transform: uppercase;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .glow-in-the-dark {
        --gd-neon1: #00FF00;
        --gd-electric1: #00FFFF;
        --gd-pink1: #FF00FF;
    }

    .glow-in-the-dark td.current-day {
        border: 3px solid var(--gd-neon1);
        background-color: rgba(0, 255, 0, 0.15);
    }

    .glow-in-the-dark th {
        background: var(--gd-neon1);
        color: var(--gd-primary) !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .glow-in-the-dark *,
    .glow-in-the-dark *::before,
    .glow-in-the-dark *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .glow-in-the-dark .hand {
        transition: none;
    }

    .glow-in-the-dark .container::before,
    .glow-in-the-dark .modal-content::before {
        animation: none;
    }
}

/* Light mode support (alternative) */
@media (prefers-color-scheme: light) {
    .glow-in-the-dark {
        --gd-bg: #F5F5F5;
        --gd-text: #1A1A1A;
        --gd-primary: #FFFFFF;
        --gd-secondary: #F0F0F0;
        --gd-date-number: #1A1A1A;
    }

    .glow-in-the-dark .container,
    .glow-in-the-dark td {
        box-shadow:
            0 8px 30px rgba(0, 255, 136, 0.2),
            inset 0 0 10px rgba(0, 255, 136, 0.1);
    }

    .glow-in-the-dark .modal-content {
        box-shadow:
            0 15px 50px rgba(0, 255, 136, 0.2),
            inset 0 0 10px rgba(0, 255, 136, 0.1);
    }

    .glow-in-the-dark .button,
    .glow-in-the-dark .transparent-button {
        box-shadow:
            0 2px 8px rgba(0, 255, 136, 0.2),
            inset 0 0 5px rgba(0, 255, 136, 0.1);
    }
}