@import url('../../fonts/edc-fonts.css');
        
        :root {
            --primary: #00ffaa;
            --secondary: #00d4ff;
            --accent-mint: #c4f0de;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: #050505;
            color: #ffffff;
            margin: 0;
            overflow-x: hidden;
        }

        /* POZADÍ KLIKNI */
        #energy-canvas {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: -1;
            opacity: 0.5;
        }

        /* GLASSMORPHISMUS PRO KARTY */
        .glass-card {
            background: rgba(196, 240, 222, 0.05);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .traffic-light-container:hover .glass-card {
            transform: translateY(-10px);
            background: var(--accent-mint);
            border: 1px solid var(--accent-mint);
            box-shadow: 0 20px 40px rgba(196, 240, 222, 0.2);
        }

        /* TEXT V KARTĚ PŘI HOVERU */
        .traffic-light-container:hover .traffic-light-label {
            color: #05282a;
        }

        .text-gradient {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* === ZACHOVÁNÍ TVOJEHO REALISTICKÉHO SEMAFORU === */
        .traffic-light {
            width: 80px;
            height: 120px;
            position: relative;
            margin: 0 auto;
            transform-style: preserve-3d;
        }

        .traffic-light-body {
            width: 100%; height: 100%;
            background: linear-gradient(135deg, #333 0%, #111 100%);
            border-radius: 15px;
            position: absolute;
            border: 2px solid #444;
            z-index: 2;
        }

        .traffic-light-red {
            width: 40%; height: 22%;
            background: radial-gradient(circle at 30% 30%, #ff4444 0%, #990000 100%);
            border-radius: 50%;
            position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
            box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
            z-index: 3;
            animation: redGlow 2s infinite alternate;
        }

        @keyframes redGlow { from { opacity: 0.7; } to { opacity: 1; box-shadow: 0 0 25px rgba(255, 68, 68, 0.8); } }

        .traffic-light-orange, .traffic-light-green {
            width: 40%; height: 22%;
            background: #222;
            border-radius: 50%;
            position: absolute; left: 50%; transform: translateX(-50%);
            z-index: 3;
            transition: all 0.3s ease;
        }

        .traffic-light-orange { top: 39%; }
        .traffic-light-green { top: 68%; }

        /* Aktivní stavy semaforu */
        .traffic-light-container:hover .traffic-light-green {
            background: radial-gradient(circle at 30% 30%, #44ff44 0%, #006600 100%);
            box-shadow: 0 0 30px rgba(68, 255, 68, 0.8);
            animation: greenBlink 0.8s infinite alternate;
        }

        .traffic-light-container:hover .traffic-light-orange {
            background: radial-gradient(circle at 30% 30%, #ffaa44 0%, #994400 100%);
            box-shadow: 0 0 20px rgba(255, 170, 68, 0.5);
        }

        @keyframes greenBlink { from { opacity: 1; } to { opacity: 0.6; } }

        /* MODÁL STYL KLIKNI */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0; top: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
        }

        .modal-content {
            background: rgba(15, 15, 15, 0.98);
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin: 5vh auto;
            padding: 40px;
            border-radius: 32px;
            width: 90%;
            max-width: 850px;
            max-height: 85vh;
            overflow-y: auto;
        }

        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 20px;
            background: #000;
            margin: 20px 0;
        }

        .video-wrapper iframe,
        .video-wrapper video {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            border: 0;
            background: #000;
        }

        /* WCAG AAA REŽIM */
        [data-theme="wcag-aaa"] { background: #000 !important; }
        [data-theme="wcag-aaa"] .glass-card { background: #000 !important; border: 2px solid #fff !important; color: #fff !important; }
        [data-theme="wcag-aaa"] .text-gradient { -webkit-text-fill-color: #ffff00 !important; }
        [data-theme="wcag-aaa"] .audio-subtitles { display: block !important; border: 2px dashed #ffff00; padding: 15px; margin-top: 15px; }
        /* Styl pro nové logo v headeru */
        .logo-link {
            display: flex;
            align-items: center;
            transition: transform 0.3s ease;
        }

        .logo-link:hover {
            transform: scale(1.05); /* Jemné zvětšení při najetí */
        }

        .logo-img {
            height: 40px; /* Upravte výšku podle potřeby */
            width: auto;
            display: block;
            /* Pokud má logo tmavé barvy, můžete přidat filtr pro lepší viditelnost */
            filter: drop-shadow(0 0 10px rgba(0, 255, 170, 0.2)); 
        }

        /* Responzivní úprava pro mobilní telefony */
        @media (max-width: 480px) {
            .logo-img {
                height: 32px;
            }
        }
        /* --- STYLY PRO BÍLÉ LOGO --- */
        .logo-link {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .logo-img {
            height: 48px; /* Upraveno pro lepší viditelnost */
            width: auto;
            display: block;
            /* Tento filtr udělá logo kompletně bílým */
            filter: brightness(0) invert(1); 
            transition: transform 0.2s ease, filter 0.2s ease;
        }

        .logo-link:hover .logo-img {
            transform: scale(1.05);
        }

        .hero-reveal {
            opacity: 0;
            animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
        }

        @keyframes fadeUp {
            0% { opacity: 0; transform: translateY(50px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .float-anim { animation: floating 3s ease-in-out infinite; }
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }

        /* ===================================================================== */
        /* ===== „NASKOČÍ ZELENÁ" PO PROHLÉDNUTÍ KROKU                      ===== */
        /* ===== (drženo jen v paměti stránky → po refreshi zase výchozí)   ===== */
        /* ===================================================================== */

        /* Přepnutí semaforu: červená zhasne → oranžová blikne → zelená naskočí a zůstane */
        .traffic-light-container.done .traffic-light-red { animation: tlRedOff .5s ease forwards; }
        @keyframes tlRedOff { 0%{opacity:1;} 100%{opacity:.22; box-shadow:none;} }

        .traffic-light-container.done .traffic-light-orange { animation: tlOrange 1.15s ease forwards; }
        @keyframes tlOrange {
            0%,22%   { background:#222; box-shadow:none; }
            30%,52%  { background: radial-gradient(circle at 30% 30%, #ffaa44 0%, #994400 100%); box-shadow:0 0 20px rgba(255,170,68,.75); }
            66%,100% { background:#222; box-shadow:none; }
        }

        .traffic-light-container.done .traffic-light-green { animation: tlGreen 1.15s ease forwards; }
        @keyframes tlGreen {
            0%,58%  { background:#222; box-shadow:none; transform:translateX(-50%) scale(1); }
            70%     { background: radial-gradient(circle at 30% 30%, #44ff44 0%, #006600 100%); box-shadow:0 0 32px rgba(68,255,68,.95); transform:translateX(-50%) scale(1.14); }
            100%    { background: radial-gradient(circle at 30% 30%, #44ff44 0%, #006600 100%); box-shadow:0 0 30px rgba(68,255,68,.9);  transform:translateX(-50%) scale(1); }
        }

        /* Autíčko, co po naskočení zelené odsviští pryč (jeď!) */
        .traffic-light .car {
            position: absolute; top: 50%; left: 50%; font-size: 1.5rem; z-index: 6;
            opacity: 0; pointer-events: none; transform: translate(-50%, -50%);
            animation: carZoom 1s ease-in .78s forwards;
        }
        @keyframes carZoom {
            0%   { opacity: 0; transform: translate(-50%, -50%); }
            12%  { opacity: 1; }
            100% { opacity: 0; transform: translate(150px, -50%); }
        }

        /* Odznak „hotovo" pod semaforem */
        .traffic-light-container .done-badge {
            align-self: center; background: #00c389; color: #04241c;
            font-size: 0.72rem; font-weight: 800; letter-spacing: .02em;
            padding: 4px 12px; border-radius: 999px; white-space: nowrap;
            box-shadow: 0 6px 16px rgba(0,0,0,0.35);
            transform: scale(0); transform-origin: center;
            animation: badgePop .5s cubic-bezier(.2,1.4,.4,1) .85s forwards;
        }
        @keyframes badgePop { to { transform: scale(1); } }

        /* Ukazatel „zatížení sítě" – přelévá se z červené přes oranžovou do zelené */
        .load-meter {
            display: inline-flex; align-items: center; gap: 12px; margin-top: 20px;
            padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 0.9rem;
            color: #dfe9e6; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
        }
        .load-meter-label { font-weight: 600; opacity: 0.85; }
        .load-bar { width: 120px; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; position: relative; }
        .load-bar::after {
            content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct, 0%); border-radius: 999px;
            background: linear-gradient(90deg, #ff4444 0%, #ffaa44 50%, #44ff44 100%);
            background-size: 120px 100%; background-repeat: no-repeat;
            transition: width .5s cubic-bezier(.2,.8,.2,1);
        }
        .load-meter.full { border-color: #00c389; color: #04241c; background: #00c389; box-shadow: 0 0 25px rgba(0,195,137,0.5); }
        .load-meter.full .load-bar { background: rgba(4,36,28,0.25); }

        /* Konfety + toast */
        .confetti-piece {
            position: fixed; width: 9px; height: 14px; z-index: 3000; border-radius: 2px;
            pointer-events: none; opacity: 0; animation: confettiFly 1.2s ease-out forwards;
        }
        @keyframes confettiFly {
            0%   { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1); }
            100% { opacity: 0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px) + 120px)) rotate(var(--rot,360deg)) scale(0.6); }
        }
        .edc-toast {
            position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
            background: #00c389; color: #04241c; font-weight: 800; padding: 14px 26px; border-radius: 14px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.45); z-index: 4000; opacity: 0; max-width: 90%; text-align: center;
            transition: opacity .4s ease, transform .4s ease;
        }
        .edc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

        /* Respekt k „omezit pohyb" */
        @media (prefers-reduced-motion: reduce) {
            .traffic-light-container.done .traffic-light-red,
            .traffic-light-container.done .traffic-light-orange,
            .traffic-light-container.done .traffic-light-green { animation: none !important; }
            .traffic-light-container.done .traffic-light-red { opacity: .22; }
            .traffic-light-container.done .traffic-light-green {
                background: radial-gradient(circle at 30% 30%, #44ff44 0%, #006600 100%); box-shadow: 0 0 18px rgba(68,255,68,.7);
            }
            .traffic-light .car { display: none; }
            .traffic-light-container .done-badge { animation: none; transform: scale(1); }
        }

        /* WCAG kontrast */
        [data-theme="wcag-aaa"] .traffic-light-container.done .traffic-light-green {
            background: #ffff00 !important; box-shadow: none !important; border: 2px solid #ffff00 !important;
        }
        [data-theme="wcag-aaa"] .traffic-light-container .done-badge { background: #ffff00 !important; color: #000 !important; }
        [data-theme="wcag-aaa"] .load-meter { background: #000 !important; border-color: #ffff00 !important; color: #ffff00 !important; }
        [data-theme="wcag-aaa"] .load-meter.full { background: #ffff00 !important; color: #000 !important; }