/* Marquee item interactive stylings */ .marquee-item{cursor:pointer;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);padding:4px 10px;border-radius:12px;transition:all 0.2s;display:inline-flex;align-items:center;gap:6px}.marquee-item:hover{background:rgba(6,182,212,0.2);border-color:var(--accent-neon);color:white;transform:scale(1.04)}.highlighted-subject{background:rgba(6,182,212,0.15)!important;border-color:rgba(6,182,212,0.4)!important;font-weight:bold!important}#right-desktop-shortcuts{position:fixed!important;top:90px!important;right:20px!important;display:flex!important;flex-direction:column!important;flex-wrap:wrap!important;max-height:calc(100vh - 140px)!important;gap:14px!important;z-index:100!important;width:auto!important;height:560px!important;align-content:flex-end!important}@media (max-width:1200px){#right-desktop-shortcuts{display:none!important}}.topics-marquee{position:fixed!important;bottom:0!important;left:0!important;width:100vw!important;height:40px!important;background:rgba(9,11,20,0.95)!important;border-top:1px solid rgba(255,255,255,0.12)!important;display:flex!important;align-items:center!important;overflow:hidden!important;white-space:nowrap!important;z-index:100000!important;backdrop-filter:blur(10px)!important}#desktop-taskbar{position:fixed!important;bottom:40px!important;left:0!important;width:100vw!important;z-index:99999!important}.marquee-item{cursor:pointer;border:1px solid rgba(255,255,255,0.08);padding:0.25rem 0.6rem;border-radius:4px;background:rgba(255,255,255,0.01);transition:all 0.25s cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;gap:0.4rem;margin:0 0.15rem}.marquee-item:hover{border-color:var(--accent-neon) !important;background:rgba(6,182,212,0.06) !important;transform:scale(1.04) translateY(-1px);box-shadow:0 0 8px rgba(6,182,212,0.2)}.marquee-item i{color:var(--text-secondary);transition:color 0.2s ease}.marquee-item:hover i{color:var(--accent-neon) !important}.highlighted-subject{border-color:rgba(6,182,212,0.4) !important;background:rgba(6,182,212,0.05) !important;font-weight:bold;text-shadow:0 0 5px var(--accent-neon)}.highlighted-subject i{color:var(--accent-neon) !important}/* Complexity Mode Hide/Show CSS rules */ body.simple-mode #telemetry-widget{display:none !important}body.simple-mode .roadmap-wrapper{display:none !important}body.simple-mode .project-stats-table{display:none !important}body.simple-mode .terminal-container{display:none !important}/* Arrange elements upwards in Simple Mode */ body.simple-mode .text-section{justify-content:flex-start !important;gap:2rem !important}body.simple-mode .image-section{justify-content:flex-start !important;gap:2rem !important}/* Clean static gradient background for Simple Mode */ body.simple-mode{background:radial-gradient(circle at center,#0f172a 0%,#030712 100%) !important}body.simple-mode.light-mode{background:radial-gradient(circle at center,#f8fafc 0%,#cbd5e1 100%) !important}body.simple-mode #bg-manager > *{opacity:0 !important;pointer-events:none !important;transition:opacity 0.5s ease !important}body.simple-mode .background-effects{display:none !important}body.simple-mode #noise-overlay{opacity:0.02 !important}/* Make background mode switching responsive (0.8s transition instead of slow 3s) */ #bg-manager > *{transition:opacity 0.8s ease-in-out !important}/* Neon and border smooth transition */ .glass-panel{transition:background 0.5s ease,border-color 0.5s ease,box-shadow 0.5s ease !important}body.simple-mode .glass-panel{box-shadow:inset 0 0 20px rgba(255,255,255,0.03),0 25px 50px -12px rgba(0,0,0,0.6) !important;border-color:rgba(255,255,255,0.08) !important}/* Glitch transition keyframe animation */ .glitch-transition-active{animation:transitionGlitch 0.25s linear !important}@keyframes transitionGlitch{0%{filter:contrast(1.5) saturate(1.5) hue-rotate(90deg);transform:scale(0.99) skewX(2deg);opacity:0.9}50%{filter:contrast(0.5) brightness(1.5);transform:scale(1.01) skewX(-2deg);opacity:0.8}100%{filter:none;transform:none;opacity:1}}/* Complexity checkbox styling for premium feel */ .complexity-toggle{display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);padding:0.3rem 0.8rem;border-radius:2rem;height:40px;font-family:'Space Grotesk',sans-serif;font-weight:bold;transition:all 0.3s;backdrop-filter:blur(10px)}.complexity-toggle:hover{transform:scale(1.05);background:rgba(255,255,255,0.1) !important;border-color:var(--accent-neon) !important;box-shadow:0 0 15px rgba(6,182,212,0.3)}body.light-mode .complexity-toggle{background:rgba(0,0,0,0.05) !important;border-color:rgba(0,0,0,0.1) !important;color:#0f172a}body.light-mode .complexity-toggle:hover{background:rgba(0,0,0,0.1) !important;border-color:var(--accent-purple) !important;box-shadow:0 0 15px rgba(139,92,246,0.3)}/* Admin Override Crimson Mode Variables Overrides */ body.admin-mode{--accent-blue:#ef4444 !important;--accent-purple:#b91c1c !important;--accent-neon:#f43f5e !important}body.admin-mode .hero-image{filter:sepia(1) saturate(5) hue-rotate(-50deg) !important;box-shadow:0 0 30px rgba(244,63,94,0.4) !important}body.admin-mode .hud-reticle{border-color:#ef4444 !important}body.admin-mode .reticle-ring{border-color:rgba(239,68,68,0.2) !important}body.admin-mode .complex-toggle,body.admin-mode .complexity-toggle:hover{border-color:var(--accent-neon) !important;box-shadow:0 0 15px rgba(244,63,94,0.3) !important}/* Retro Phosphor CRT Theme Styles */ body.retro-mode{--accent-blue:#22c55e !important;/* Phosphor Green */ --accent-purple:#f59e0b !important;/* Phosphor Amber */ --accent-neon:#10b981 !important;/* Emerald Glow */ --bg-dark:#022c22 !important;/* Dark Emerald terminal shade */}body.retro-mode .hero-image{filter:sepia(1) saturate(3) hue-rotate(60deg) !important;box-shadow:0 0 30px rgba(16,185,129,0.4) !important}body.retro-mode .hud-reticle{border-color:#10b981 !important}body.retro-mode .reticle-ring{border-color:rgba(16,185,129,0.2) !important}body.retro-mode .complex-toggle,body.retro-mode .complexity-toggle:hover{border-color:#10b981 !important;box-shadow:0 0 15px rgba(16,185,129,0.3) !important}/* Virtual Mechanical Keyboard Key Styling */ .key{min-width:32px;height:32px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:4px;color:var(--text-primary);font-family:'Space Grotesk',sans-serif;font-size:0.8rem;font-weight:bold;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all 0.15s;user-select:none}.key:hover{background:rgba(255,255,255,0.12) !important;border-color:var(--accent-neon) !important;box-shadow:0 0 8px rgba(6,182,212,0.3);transform:translateY(-1px)}.key:active{transform:translateY(1px);background:rgba(255,255,255,0.2) !important}body.retro-mode .key:hover{border-color:#10b981 !important;box-shadow:0 0 8px rgba(16,185,129,0.4) !important}/* Premium Cybernetic Corner Accents */ .corner-decor{position:absolute;width:16px;height:16px;border:2px solid var(--accent-neon);pointer-events:none;z-index:15;transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);opacity:0.6;filter:drop-shadow(0 0 4px var(--accent-neon))}.corner-decor.top-left{top:-2px;left:-2px;border-right:none;border-bottom:none;border-top-left-radius:12px}.corner-decor.top-right{top:-2px;right:-2px;border-left:none;border-bottom:none;border-top-right-radius:12px}.corner-decor.bottom-left{bottom:-2px;left:-2px;border-right:none;border-top:none;border-bottom-left-radius:12px}.corner-decor.bottom-right{bottom:-2px;right:-2px;border-left:none;border-top:none;border-bottom-right-radius:12px}.glass-panel:hover .corner-decor{opacity:1;width:24px;height:24px;filter:drop-shadow(0 0 8px var(--accent-neon))}/* Smooth neon pulse glow for terminal-container and roadmap-wrapper when hovered */ .terminal-container:hover{box-shadow:inset 0 2px 20px rgba(0,0,0,0.6),0 0 20px rgba(6,182,212,0.45) !important;border-color:var(--accent-neon) !important}.roadmap-wrapper:hover{box-shadow:inset 0 2px 20px rgba(0,0,0,0.6),0 0 20px rgba(139,92,246,0.4) !important;border-color:var(--accent-purple) !important}/* Auto-hide corners in Simple Mode */ body.simple-mode .corner-decor{display:none !important}/* High-tech HUD Reticle targeting the Owl hero image */ .image-container{position:relative;overflow:visible !important}.hud-reticle{position:absolute;inset:-15px;pointer-events:none;z-index:5;opacity:0.5;transition:opacity 0.5s ease,transform 0.5s ease}.glass-panel:hover .hud-reticle{opacity:0.85;transform:scale(1.02)}body.simple-mode .hud-reticle{display:none !important}/* Animated Holographic Scanline Overlay on Owl Hero */ .hologram-overlay{position:absolute;inset:0;background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,0.25) 50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06));background-size:100% 4px,6px 100%;z-index:6;opacity:0;pointer-events:none;transition:opacity 0.4s ease;border-radius:1.2rem}.image-container:hover .hologram-overlay{opacity:0.85;animation:holoFlicker 0.15s infinite}@keyframes holoFlicker{0%{background-color:rgba(6,182,212,0.02)}50%{background-color:rgba(6,182,212,0.08)}100%{background-color:rgba(6,182,212,0.02)}}/* Hide in Simple Mode */ body.simple-mode .hologram-overlay{display:none !important}/* Spinning HUD Rings */ .reticle-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px dashed var(--accent-neon);transform:translate(-50%,-50%);transition:all 0.5s ease}.ring-outer{width:85%;height:85%;border-style:dotted;animation:spinCW 25s linear infinite;opacity:0.3}.ring-middle{width:65%;height:65%;border:1px dashed var(--accent-purple);animation:spinCCW 15s linear infinite;opacity:0.4}.ring-inner{width:35%;height:35%;border:1px solid var(--accent-neon);opacity:0.2;animation:pulseInner 2s ease-in-out infinite alternate}/* Target HUD Corner Brackets around Owl image */ .hud-bracket{position:absolute;width:12px;height:12px;border:2px solid var(--accent-neon);filter:drop-shadow(0 0 3px var(--accent-neon));transition:all 0.3s ease}.b-tl{top:0;left:0;border-right:none;border-bottom:none}.b-tr{top:0;right:0;border-left:none;border-bottom:none}.b-bl{bottom:0;left:0;border-right:none;border-top:none}.b-br{bottom:0;right:0;border-left:none;border-top:none}.glass-panel:hover .hud-bracket{transform:scale(0.9);filter:drop-shadow(0 0 6px var(--accent-neon))}/* High-tech Screen Security Scanner Sweep */ .glass-panel::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(to right,transparent,var(--accent-neon),var(--accent-purple),var(--accent-neon),transparent);filter:drop-shadow(0 0 8px var(--accent-neon));opacity:0.12;z-index:10;animation:scannerSweep 6s linear infinite;pointer-events:none}@keyframes scannerSweep{0%{top:0%;opacity:0}10%{opacity:0.22}90%{opacity:0.22}100%{top:100%;opacity:0}}/* Hide scanner in Simple Mode */ body.simple-mode .glass-panel::before{display:none !important}@keyframes spinCW{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes spinCCW{0%{transform:translate(-50%,-50%) rotate(360deg)}100%{transform:translate(-50%,-50%) rotate(0deg)}}@keyframes pulseInner{0%{transform:translate(-50%,-50%) scale(0.95);opacity:0.15}100%{transform:translate(-50%,-50%) scale(1.05);opacity:0.35;filter:drop-shadow(0 0 5px var(--accent-neon))}}/* Interactive Terminal Window Dots */ .terminal-header .dot{cursor:pointer;transition:transform 0.2s ease,filter 0.2s ease}.terminal-header .dot:hover{transform:scale(1.3);filter:brightness(1.2) drop-shadow(0 0 4px currentColor)}#term-input:focus{color:#fff !important;text-shadow:0 0 8px rgba(167,243,208,0.8) !important}/* High-tech Holographic Tooltip Pop-up Animation */ #tooltip-card{transition:opacity 0.3s cubic-bezier(0.175,0.885,0.32,1.275),transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275) !important;transform:translate(-50%,-85%) scale(0.9) !important;/* Start slightly lower and smaller */ opacity:0;pointer-events:none}#tooltip-card.active{opacity:1 !important;transform:translate(-50%,-115%) scale(1) !important;/* Slide up and scale in */ filter:drop-shadow(0 0 15px var(--accent-neon)) !important}/* === PHASE 3:ADVANCED CYBERDECK UPGRADES === */ /* ── Fixed Bottom Buttons ── z-index:50000 (below modals 100000,above drawers 40000) */ .achievements-btn{position:fixed;bottom:2rem;right:2rem;z-index:50000;background:rgba(15,23,42,0.85);backdrop-filter:blur(12px);border:1px solid rgba(168,85,247,0.4);color:var(--accent-purple);padding:0.8rem 1.2rem;border-radius:8px;font-family:'Space Grotesk',sans-serif;font-weight:bold;cursor:pointer;box-shadow:0 0 15px rgba(168,85,247,0.2);transition:all 0.3s ease;display:flex;align-items:center;gap:0.5rem}.achievements-btn:hover{border-color:var(--accent-neon);color:var(--accent-neon);box-shadow:0 0 20px rgba(6,182,212,0.4);transform:scale(1.05)}.links-drawer-btn{position:fixed;bottom:2rem;right:14rem;z-index:50000;background:rgba(15,23,42,0.85);backdrop-filter:blur(12px);border:1px solid rgba(6,182,212,0.4);color:var(--accent-neon);padding:0.8rem 1.2rem;border-radius:8px;font-family:'Space Grotesk',sans-serif;font-weight:bold;cursor:pointer;box-shadow:0 0 15px rgba(6,182,212,0.2);transition:all 0.3s ease;display:flex;align-items:center;gap:0.5rem}.links-drawer-btn:hover{border-color:var(--accent-neon);color:var(--accent-neon);box-shadow:0 0 20px rgba(6,182,212,0.4);transform:scale(1.05)}/* ── Drawers ── z-index:40000 (below buttons 50000,below modals 100000) */ .links-drawer{position:fixed;top:2rem;bottom:5.5rem;right:2rem;width:320px;z-index:40000;background:rgba(15,23,42,0.9);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:1.2rem;box-shadow:0 8px 32px rgba(0,0,0,0.6);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);transform:translateX(360px);opacity:0;pointer-events:none;display:flex;flex-direction:column;gap:0.5rem}.links-drawer.active{transform:translateX(0);opacity:1;pointer-events:auto;border-color:var(--accent-neon);box-shadow:0 0 25px rgba(6,182,212,0.25)}.achievements-drawer{position:fixed;bottom:5.5rem;right:2rem;width:320px;max-height:calc(100vh - 10rem);z-index:40000;background:rgba(15,23,42,0.9);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:1.2rem;box-shadow:0 8px 32px rgba(0,0,0,0.6);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);transform:translateX(360px);opacity:0;pointer-events:none;overflow-y:auto}.achievements-drawer.active{transform:translateX(0);opacity:1;pointer-events:auto;border-color:var(--accent-purple);box-shadow:0 0 25px rgba(168,85,247,0.25)}.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem;margin-top:1rem}.badge-slot{aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all 0.3s ease}.badge-slot i{font-size:1.4rem;color:rgba(255,255,255,0.1);transition:all 0.3s ease}.badge-slot.unlocked{background:rgba(6,182,212,0.12);border-color:var(--accent-neon);box-shadow:0 0 10px rgba(6,182,212,0.3)}.badge-slot.unlocked i{color:var(--accent-neon) !important;text-shadow:0 0 8px rgba(6,182,212,0.6);transform:scale(1.1)}.badge-slot.unlocked:hover{box-shadow:0 0 15px rgba(6,182,212,0.5);transform:scale(1.08)}/* Quiz Styling */ .quiz-option{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:6px;padding:0.75rem 1rem;margin-bottom:0.5rem;cursor:pointer;transition:all 0.2s ease;text-align:left;width:100%;color:var(--text-primary);font-family:'Outfit',sans-serif;font-size:0.9rem}.quiz-option:hover{border-color:var(--accent-blue);background:rgba(6,182,212,0.05);transform:translateX(4px)}.quiz-option.correct{border-color:#22c55e !important;background:rgba(34,197,94,0.15) !important;color:#4ade80 !important}.quiz-option.incorrect{border-color:#ef4444 !important;background:rgba(239,68,68,0.15) !important;color:#f87171 !important}/* Dynamic generator block */ .generator-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:1.2rem;margin-top:1rem}/* 3D view and telecom simulator styling */ .simulator-canvas-holder{background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:0.5rem;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center}.canvas-diagnostic-log{font-family:'Space Grotesk',monospace;font-size:0.75rem;background:rgba(0,0,0,0.6);color:#4ade80;padding:0.5rem;width:100%;border-radius:4px;height:80px;overflow-y:auto;margin-top:0.5rem;border:1px solid rgba(255,255,255,0.05)}/* ========================================== ZEBRA STRIPING FOR PROGRAM LISTS ========================================== */ /* 1. Teacher Aids - Link Items Card list */ .group-accordion-body .link-item-card:nth-child(odd){background:rgba(255,255,255,0.03) !important;border-left:3px solid var(--accent-neon) !important}.group-accordion-body .link-item-card:nth-child(even){background:rgba(0,0,0,0.15) !important;border-left:3px solid var(--accent-blue) !important}/* 2. Teacher Aids - Group & Subject CRUD manager lists */ #crud-groups-list > div:nth-child(odd),#crud-subjects-list > div:nth-child(odd){background:rgba(255,255,255,0.03) !important;border-left:2px solid var(--accent-purple) !important}#crud-groups-list > div:nth-child(even),#crud-subjects-list > div:nth-child(even){background:rgba(0,0,0,0.15) !important;border-left:2px solid var(--accent-blue) !important}/* 3. Subject Details - Standard UL/OL lists */ #subject-modal ul > li:nth-child(odd),#subject-modal ol > li:nth-child(odd){background:rgba(255,255,255,0.03) !important;padding:0.35rem 0.6rem;border-radius:4px;margin-bottom:0.3rem}#subject-modal ul > li:nth-child(even),#subject-modal ol > li:nth-child(even){background:rgba(0,0,0,0.15) !important;padding:0.35rem 0.6rem;border-radius:4px;margin-bottom:0.3rem}/* 4. Subject Details - Textbook Cards list */ .textbook-card:nth-child(odd){background:rgba(255,255,255,0.03) !important}.textbook-card:nth-child(even){background:rgba(0,0,0,0.15) !important}/* 5. Telemetry HUD - Project Stats Table rows */ .project-stats-table .stat-row:nth-child(odd){background:rgba(255,255,255,0.03) !important}.project-stats-table .stat-row:nth-child(even){background:rgba(0,0,0,0.15) !important}/* 6. Agile HUD - Roadmap timeline items */ .roadmap-wrapper .roadmap-item{padding:0.35rem 0.6rem;border-radius:4px;margin-bottom:0.3rem}.roadmap-wrapper .roadmap-item:nth-child(odd){background:rgba(255,255,255,0.03) !important}.roadmap-wrapper .roadmap-item:nth-child(even){background:rgba(0,0,0,0.15) !important}/* 7. Subject Details - Interactive Quiz Options list */ div[id^="quiz-options-group-"] .quiz-option:not(.correct):not(.incorrect):nth-child(odd){background:rgba(255,255,255,0.04) !important}div[id^="quiz-options-group-"] .quiz-option:not(.correct):not(.incorrect):nth-child(even){background:rgba(0,0,0,0.15) !important}/* ========================================= */ /* COSMIC / GOD MODE CSS ANIMATIONS & STYLES */ /* ========================================= */ /* 1. 3D Diorama Mode */ .diorama-mode{perspective:1000px;transform-style:preserve-3d;overflow:visible !important}.diorama-mode #timeline-scroll-container{transform:rotateX(45deg) scale(0.9);box-shadow:0 20px 40px rgba(0,0,0,0.5);border-radius:12px;transition:transform 0.5s ease}/* 2. Weather Overlay */ #cosmic-weather-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden;display:none}.weather-rain{position:absolute;width:2px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(100,200,255,0.8));animation:rainDrop 0.5s linear infinite}@keyframes rainDrop{0%{transform:translateY(-20px);opacity:0}50%{opacity:1}100%{transform:translateY(100px);opacity:0}}/* 3. VHS Glitch / Time Machine Effect */ .glitch-active #timeline-bar-wrapper{animation:vhsGlitch 0.2s linear infinite;filter:hue-rotate(90deg) contrast(150%)}@keyframes vhsGlitch{0%{transform:translate(0) skew(0deg)}20%{transform:translate(-2px,1px) skew(-2deg)}40%{transform:translate(-1px,-1px) skew(2deg)}60%{transform:translate(2px,1px) skew(0deg)}80%{transform:translate(1px,-1px) skew(1deg)}100%{transform:translate(0) skew(0deg)}}.time-machine-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.15),rgba(0,0,0,0.15) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:100;animation:scanlines 10s linear infinite}@keyframes scanlines{0%{background-position:0 0}100%{background-position:0 1000px}}/* 4. AI Anomaly (Overload) */ .anomaly-high-load{box-shadow:0 0 15px #ef4444,inset 0 0 10px #ef4444 !important;animation:pulseAnomaly 1.5s infinite;border:1px solid #f87171 !important}@keyframes pulseAnomaly{0%{opacity:1}50%{opacity:0.7;box-shadow:0 0 25px #ef4444,inset 0 0 15px #ef4444}100%{opacity:1}}/* 5. Hyper-Focus Mode */ .hyper-focus-active .timeline-segment{transition:all 0.5s cubic-bezier(0.25,1,0.5,1);filter:brightness(0.3) blur(2px)}.hyper-focus-active .timeline-segment.current-lesson{flex:10 !important;/* expand massively */ filter:brightness(1.2) blur(0px);z-index:10;box-shadow:0 0 30px var(--accent-neon)}/* 6. Timeline Radio Equalizer */ #timeline-radio-eq{display:none;align-items:center;gap:2px;height:15px;margin-left:10px}.eq-bar{width:3px;background:#a78bfa;border-radius:1px;animation:eqPulse 0.5s alternate infinite ease-in-out}.eq-bar:nth-child(1){height:10px;animation-duration:0.4s}.eq-bar:nth-child(2){height:15px;animation-duration:0.6s}.eq-bar:nth-child(3){height:8px;animation-duration:0.5s}.eq-bar:nth-child(4){height:12px;animation-duration:0.7s}@keyframes eqPulse{0%{transform:scaleY(0.3)}100%{transform:scaleY(1)}}/* 7. Minigame overlay */ .minigame-container{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#10b981;font-family:'Courier New',monospace;backdrop-filter:blur(5px)}/* 8. Virtual Cursors (Multiplayer) */ .virtual-cursor{position:absolute;width:20px;height:20px;pointer-events:none;z-index:999;transition:all 2s cubic-bezier(0.25,1,0.5,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}@keyframes mgMove{0%{right:-20px}100%{right:320px}}/* --- Section Separator --- */ .db-list-row{cursor:pointer;transition:all 0.2s}.db-list-row:hover{background:rgba(255,255,255,0.08) !important}.db-list-row.selected-db-row{background:rgba(59,130,246,0.15) !important;border-left:3px solid var(--accent-blue)}.db-actions{opacity:0;pointer-events:none;transition:opacity 0.2s}.db-list-row.selected-db-row .db-actions{opacity:1;pointer-events:auto}/* ========================================= */ /* COSMIC / GOD MODE CSS ANIMATIONS & STYLES */ /* ========================================= */ /* 1. 3D Diorama Mode */ .diorama-mode{perspective:1000px;transform-style:preserve-3d;overflow:visible !important}.diorama-mode #timeline-scroll-container{transform:rotateX(45deg) scale(0.9);box-shadow:0 20px 40px rgba(0,0,0,0.5);border-radius:12px;transition:transform 0.5s ease}/* 2. Weather Overlay */ #cosmic-weather-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden;display:none}.weather-rain{position:absolute;width:2px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(100,200,255,0.8));animation:rainDrop 0.5s linear infinite}@keyframes rainDrop{0%{transform:translateY(-20px);opacity:0}50%{opacity:1}100%{transform:translateY(100px);opacity:0}}/* 3. VHS Glitch / Time Machine Effect */ .glitch-active #timeline-bar-wrapper{animation:vhsGlitch 0.2s linear infinite;filter:hue-rotate(90deg) contrast(150%)}@keyframes vhsGlitch{0%{transform:translate(0) skew(0deg)}20%{transform:translate(-2px,1px) skew(-2deg)}40%{transform:translate(-1px,-1px) skew(2deg)}60%{transform:translate(2px,1px) skew(0deg)}80%{transform:translate(1px,-1px) skew(1deg)}100%{transform:translate(0) skew(0deg)}}.time-machine-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.15),rgba(0,0,0,0.15) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:100;animation:scanlines 10s linear infinite}@keyframes scanlines{0%{background-position:0 0}100%{background-position:0 1000px}}/* 4. AI Anomaly (Overload) */ .anomaly-high-load{box-shadow:0 0 15px #ef4444,inset 0 0 10px #ef4444 !important;animation:pulseAnomaly 1.5s infinite;border:1px solid #f87171 !important}@keyframes pulseAnomaly{0%{opacity:1}50%{opacity:0.7;box-shadow:0 0 25px #ef4444,inset 0 0 15px #ef4444}100%{opacity:1}}/* 5. Hyper-Focus Mode */ .hyper-focus-active .timeline-segment{transition:all 0.5s cubic-bezier(0.25,1,0.5,1);filter:brightness(0.3) blur(2px)}.hyper-focus-active .timeline-segment.current-lesson{flex:10 !important;/* expand massively */ filter:brightness(1.2) blur(0px);z-index:10;box-shadow:0 0 30px var(--accent-neon)}/* 6. Timeline Radio Equalizer */ #timeline-radio-eq{display:none;align-items:center;gap:2px;height:15px;margin-left:10px}.eq-bar{width:3px;background:#a78bfa;border-radius:1px;animation:eqPulse 0.5s alternate infinite ease-in-out}.eq-bar:nth-child(1){height:10px;animation-duration:0.4s}.eq-bar:nth-child(2){height:15px;animation-duration:0.6s}.eq-bar:nth-child(3){height:8px;animation-duration:0.5s}.eq-bar:nth-child(4){height:12px;animation-duration:0.7s}@keyframes eqPulse{0%{transform:scaleY(0.3)}100%{transform:scaleY(1)}}/* 7. Minigame overlay */ .minigame-container{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#10b981;font-family:'Courier New',monospace;backdrop-filter:blur(5px)}/* 8. Virtual Cursors (Multiplayer) */ .virtual-cursor{position:absolute;width:20px;height:20px;pointer-events:none;z-index:999;transition:all 2s cubic-bezier(0.25,1,0.5,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}@keyframes mgMove{0%{right:-20px}100%{right:320px}}/* --- Section Separator --- */ /* Mobile Responsive Overrides */ @media screen and (max-width:768px){.window-frame{width:100% !important;height:calc(100% - 50px) !important;top:0 !important;left:0 !important;border-radius:0 !important;min-width:0 !important;min-height:0 !important}.window-header{border-radius:0 !important}#start-menu{width:100% !important;bottom:50px !important;left:0 !important;border-radius:12px 12px 0 0 !important;max-height:80vh !important}#taskbar-left-section,#system-tray{gap:5px !important}.taskbar-btn span,.taskbar-time{display:none !important;/* Hide texts on small screens */}#desktop-icons-container{grid-template-columns:repeat(auto-fill,minmax(70px,1fr)) !important}}/* ========================================= */ /* COSMIC / GOD MODE CSS ANIMATIONS & STYLES */ /* ========================================= */ /* 1. 3D Diorama Mode */ .diorama-mode{perspective:1000px;transform-style:preserve-3d;overflow:visible !important}.diorama-mode #timeline-scroll-container{transform:rotateX(45deg) scale(0.9);box-shadow:0 20px 40px rgba(0,0,0,0.5);border-radius:12px;transition:transform 0.5s ease}/* 2. Weather Overlay */ #cosmic-weather-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden;display:none}.weather-rain{position:absolute;width:2px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(100,200,255,0.8));animation:rainDrop 0.5s linear infinite}@keyframes rainDrop{0%{transform:translateY(-20px);opacity:0}50%{opacity:1}100%{transform:translateY(100px);opacity:0}}/* 3. VHS Glitch / Time Machine Effect */ .glitch-active #timeline-bar-wrapper{animation:vhsGlitch 0.2s linear infinite;filter:hue-rotate(90deg) contrast(150%)}@keyframes vhsGlitch{0%{transform:translate(0) skew(0deg)}20%{transform:translate(-2px,1px) skew(-2deg)}40%{transform:translate(-1px,-1px) skew(2deg)}60%{transform:translate(2px,1px) skew(0deg)}80%{transform:translate(1px,-1px) skew(1deg)}100%{transform:translate(0) skew(0deg)}}.time-machine-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.15),rgba(0,0,0,0.15) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:100;animation:scanlines 10s linear infinite}@keyframes scanlines{0%{background-position:0 0}100%{background-position:0 1000px}}/* 4. AI Anomaly (Overload) */ .anomaly-high-load{box-shadow:0 0 15px #ef4444,inset 0 0 10px #ef4444 !important;animation:pulseAnomaly 1.5s infinite;border:1px solid #f87171 !important}@keyframes pulseAnomaly{0%{opacity:1}50%{opacity:0.7;box-shadow:0 0 25px #ef4444,inset 0 0 15px #ef4444}100%{opacity:1}}/* 5. Hyper-Focus Mode */ .hyper-focus-active .timeline-segment{transition:all 0.5s cubic-bezier(0.25,1,0.5,1);filter:brightness(0.3) blur(2px)}.hyper-focus-active .timeline-segment.current-lesson{flex:10 !important;/* expand massively */ filter:brightness(1.2) blur(0px);z-index:10;box-shadow:0 0 30px var(--accent-neon)}/* 6. Timeline Radio Equalizer */ #timeline-radio-eq{display:none;align-items:center;gap:2px;height:15px;margin-left:10px}.eq-bar{width:3px;background:#a78bfa;border-radius:1px;animation:eqPulse 0.5s alternate infinite ease-in-out}.eq-bar:nth-child(1){height:10px;animation-duration:0.4s}.eq-bar:nth-child(2){height:15px;animation-duration:0.6s}.eq-bar:nth-child(3){height:8px;animation-duration:0.5s}.eq-bar:nth-child(4){height:12px;animation-duration:0.7s}@keyframes eqPulse{0%{transform:scaleY(0.3)}100%{transform:scaleY(1)}}/* 7. Minigame overlay */ .minigame-container{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#10b981;font-family:'Courier New',monospace;backdrop-filter:blur(5px)}/* 8. Virtual Cursors (Multiplayer) */ .virtual-cursor{position:absolute;width:20px;height:20px;pointer-events:none;z-index:999;transition:all 2s cubic-bezier(0.25,1,0.5,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}@keyframes mgMove{0%{right:-20px}100%{right:320px}}/* --- Section Separator --- */ body{overflow:hidden !important}/* Keep .container in DOM (so JS doesn't crash),but push it behind everything */ .container{position:fixed !important;top:-99999px !important;left:-99999px !important;opacity:0 !important;pointer-events:none !important;z-index:-1000 !important}/* Keep modals/drawer in DOM but invisible */ #teacher-aids-modal,#quiz-modal,#achievements-drawer,#links-drawer{position:fixed !important;top:-99999px !important;left:-99999px !important;opacity:0 !important;pointer-events:none !important;z-index:-1000 !important}/* ── Marquee (tantárgyak szövegfolyam) ── */ .topics-marquee{position:fixed !important;bottom:44px !important;left:0 !important;width:100vw !important;height:38px !important;background:rgba(15,23,42,0.98) !important;border-top:1px solid rgba(56,189,248,0.4) !important;border-bottom:1px solid rgba(255,255,255,0.1) !important;overflow:hidden !important;z-index:100004 !important;display:flex !important;align-items:center !important}.topics-marquee.hidden-marquee{display:none !important}#desktop-news-ticker-bar{position:fixed !important;bottom:82px !important;left:0 !important;width:100vw !important;height:40px !important;background:linear-gradient(90deg, rgba(15,23,42,0.98), rgba(30,41,59,0.98)) !important;border-top:1px solid rgba(56,189,248,0.4) !important;border-bottom:1px solid rgba(56,189,248,0.2) !important;z-index:100003 !important;display:flex !important;align-items:center !important}#desktop-news-ticker-bar.hidden-marquee{display:none !important}.marquee-content{display:flex !important;gap:0.5rem !important;white-space:nowrap !important;will-change:transform !important}/* ── Taskbar: legalul ── */ #taskbar-wrapper{position:fixed !important;bottom:0 !important;left:0 !important;width:100vw !important;height:44px !important;background:rgba(7,8,13,0.97) !important;backdrop-filter:blur(24px) !important;border-top:1px solid rgba(255,255,255,0.07) !important;display:flex !important;align-items:center !important;justify-content:center !important;z-index:100005 !important}#desktop-taskbar{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;flex-wrap:wrap;flex:1}.taskbar-btn{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#e2e8f0;padding:6px 13px;cursor:pointer;display:flex;align-items:center;gap:7px;font-family:'Outfit',sans-serif;font-size:0.78rem;transition:all 0.2s;white-space:nowrap}.taskbar-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.22)}.taskbar-btn.active{background:rgba(6,182,212,0.18);border-color:rgba(6,182,212,0.5);color:var(--accent-neon,#06b6d4);box-shadow:0 0 12px rgba(6,182,212,0.25)}.window-maximized{top:0 !important;left:0 !important;width:100vw !important;height:calc(100vh - 100px) !important;border-radius:0 !important;z-index:99990 !important}.window-frame{box-shadow:0 8px 40px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.08);border-radius:10px}.window-frame.focused,.window-frame.window-focused{border-color:rgba(6,182,212,0.35) !important;box-shadow:0 8px 50px rgba(6,182,212,0.15),0 0 0 1px rgba(6,182,212,0.2) !important}.window-content::-webkit-scrollbar{width:6px}.window-content::-webkit-scrollbar-track{background:rgba(0,0,0,0.15)}.window-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px}.window-content .close-modal-btn,.window-content .close-drawer-btn{display:none !important}/* Override links modal inside its window frame */ #links-window .modal-content{width:100% !important;max-width:none !important;height:100% !important;max-height:none !important;padding:12px !important;background:none !important;border:none !important;box-shadow:none !important;position:static !important;transform:none !important}#links-window .modal-content .close-btn{display:none !important}/* Hide redundant close buttons inside visitor links window */ #user-links-window .window-content button[onclick="toggleLinksDrawer()"]{display:none !important}/* Override accordion body inside Database Manager window */ #db-manager-window .accordion-body{max-height:none !important;overflow:visible !important;display:block !important;padding:0 !important;border:none !important}/* ─── Background Concept:Neural Network & Glowing Aurora ─── */ #bg-manager::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 15% 25%,rgba(139,92,246,0.08) 0%,transparent 40%),radial-gradient(circle at 85% 75%,rgba(6,182,212,0.08) 0%,transparent 45%),radial-gradient(circle at 50% 50%,rgba(15,23,42,0.3) 0%,transparent 85%);pointer-events:none;z-index:0;animation:bgPulse 25s ease-in-out infinite alternate}/* Hexagonal cyber texture and nodes rács */ #bg-manager::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 50% 50%,transparent 45%,rgba(6,182,212,0.03) 50%,transparent 55%),radial-gradient(circle at 0 0,transparent 45%,rgba(139,92,246,0.02) 50%,transparent 55%),radial-gradient(rgba(6,182,212,0.08) 1.5px,transparent 1.5px);background-size:60px 60px,60px 60px,40px 40px;background-position:0 0,0 0,20px 20px;pointer-events:none;z-index:1;opacity:0.65}@keyframes bgPulse{0%{filter:hue-rotate(0deg) brightness(0.9)}100%{filter:hue-rotate(15deg) brightness(1.1)}}/* ─── Combined Background Mode styles ─── */ .bg-mode-combined #particles-js{opacity:0.65 !important;display:block !important}.bg-mode-combined #matrix-canvas{opacity:0.18 !important;display:block !important}.bg-mode-combined #cyber-grid-container{opacity:0.25 !important;display:block !important}.bg-mode-combined #data-streams{opacity:0.35 !important;display:block !important}.bg-mode-combined #wave-canvas{opacity:0.22 !important;display:block !important}/* ─── Holographic Cyber Owl Assistant (No Borders/Reticles) ─── */ #owl-img-container{position:fixed !important;top:10px !important;right:10px !important;bottom:auto !important;width:750px !important;height:750px !important;z-index:5 !important;/* Under windows (>=1000) but above bg manager */ opacity:0.8 !important;pointer-events:auto !important;/* Keep clickable for the easter egg! */ transition:all 0.5s cubic-bezier(0.175,0.885,0.32,1.275) !important;border:none !important;box-shadow:none !important;background:none !important}#owl-img-container:hover{opacity:1 !important;transform:scale(1.03) translate3d(0,0,0) !important}/* Completely hide targeting grids,reticles,brackets,and decoration borders */ #owl-img-container .hud-reticle,#owl-img-container .hud-bracket,#owl-img-container .corner-decor,#owl-img-container::before,#owl-img-container::after{display:none !important}@media (max-width:1024px){#owl-img-container{width:500px !important;height:500px !important;top:10px !important;right:10px !important;bottom:auto !important}}/* ─── Cyber Owl Window Styling ─── */ #owl-window .window-content{padding:0 !important;overflow:hidden !important;background:rgba(0,0,0,0.1) !important}#owl-window #owl-img-container{position:relative !important;top:0 !important;right:0 !important;bottom:auto !important;left:0 !important;width:100% !important;height:100% !important;opacity:1 !important;transition:none !important}#owl-window #owl-img-container .hero-image{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:0 !important}/* ─── Database Manager Launcher in Header ─── */ .header-right #db-manager-launcher{margin:0 !important;border:1.5px solid rgba(255,255,255,0.08) !important;background:rgba(15,23,42,0.65) !important;border-radius:50px !important;overflow:hidden !important;width:auto !important;backdrop-filter:blur(10px) !important;box-shadow:0 4px 15px rgba(0,0,0,0.2) !important}.header-right #db-manager-launcher .accordion-header{background:transparent !important;padding:0.45rem 1.20rem !important;font-size:0.82rem !important;height:38px !important;box-sizing:border-box !important;display:flex !important;align-items:center !important;gap:10px !important;border:none !important;cursor:pointer !important}.header-right #db-manager-launcher .accordion-header div{font-family:'Space Grotesk',sans-serif !important;font-weight:600 !important;font-size:0.82rem !important;display:flex !important;align-items:center !important;gap:8px !important;color:var(--text-primary) !important}/* ─── Desktop Icons / Shortcuts Grid ─── */ #desktop-shortcuts{position:fixed !important;top:90px !important;left:20px !important;display:flex !important;flex-direction:column !important;flex-wrap:wrap !important;max-height:calc(100vh - 120px) !important;gap:16px !important;z-index:10 !important;pointer-events:none !important;width:auto !important;height:560px !important;/* Forces wrap after 6 items (6*80 + 5*16 = 560) */}#right-shortcuts{position:fixed !important;top:90px !important;right:20px !important;display:flex !important;flex-direction:column !important;flex-wrap:wrap-reverse !important;align-content:flex-start !important;gap:16px !important;z-index:10 !important;pointer-events:none !important;width:auto !important;height:560px !important;/* Forces wrap after 6 items */}body.focus-mode #right-shortcuts{opacity:0;pointer-events:none;transition:opacity 0.5s ease}.shortcut-icon{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;width:90px !important;height:auto !important;min-height:80px !important;cursor:pointer !important;border-radius:10px !important;transition:all 0.25s cubic-bezier(0.4,0,0.2,1) !important;pointer-events:auto !important;user-select:none !important;border:1.5px dashed transparent !important;padding:6px !important;box-sizing:border-box !important;text-align:center !important}.shortcut-icon .icon-wrap{width:42px !important;height:42px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:8px !important;background:rgba(255,255,255,0.03) !important;border:1px solid rgba(255,255,255,0.08) !important;font-size:1.25rem !important;color:var(--text-primary) !important;transition:all 0.25s ease-in-out !important;margin-bottom:5px !important;box-shadow:0 4px 8px rgba(0,0,0,0.12) !important}.shortcut-icon span{font-family:'Space Grotesk','Outfit',sans-serif !important;font-size:0.72rem !important;font-weight:500 !important;color:rgba(248,250,252,0.9) !important;text-shadow:0 1px 3px rgba(0,0,0,0.95),0 2px 5px rgba(0,0,0,0.7) !important;line-height:1.2 !important;white-space:normal !important;word-wrap:break-word !important;overflow:visible !important;width:100% !important}.shortcut-icon:hover{background:rgba(255,255,255,0.05) !important;border-color:rgba(6,182,212,0.2) !important}.shortcut-icon:hover .icon-wrap{background:rgba(6,182,212,0.15) !important;border-color:rgba(6,182,212,0.4) !important;color:var(--accent-neon) !important;transform:translateY(-2px) !important;box-shadow:0 6px 12px rgba(6,182,212,0.2) !important}.shortcut-icon.selected{background:rgba(6,182,212,0.1) !important;border-color:rgba(6,182,212,0.45) !important}.shortcut-icon.selected .icon-wrap{background:rgba(6,182,212,0.22) !important;border-color:rgba(6,182,212,0.55) !important;color:var(--accent-neon) !important;box-shadow:0 0 10px rgba(6,182,212,0.3) !important}/* ─── Cybernetic Lock Screen ─── */ #system-lock-screen{position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;background:radial-gradient(circle at center,rgba(9,14,26,0.98) 0%,rgba(3,4,8,0.99) 100%) !important;z-index:200000 !important;display:none;align-items:center !important;justify-content:center !important;flex-direction:column !important;opacity:0;transition:opacity 0.4s ease-in-out !important;backdrop-filter:blur(20px) !important}#system-lock-screen.active{display:flex !important;opacity:1 !important}#lock-avatar-container{animation:avatarPulse 4s infinite alternate}@keyframes avatarPulse{0%{border-color:var(--accent-neon);box-shadow:0 0 10px rgba(6,182,212,0.2)}100%{border-color:var(--accent-purple);box-shadow:0 0 20px rgba(139,92,246,0.4)}}#lock-passcode-input:focus{border-color:var(--accent-neon) !important;box-shadow:0 0 12px rgba(6,182,212,0.25) !important;background:rgba(255,255,255,0.06) !important}/* ─── Action Center Sidebar ─── */ #action-center-sidebar{position:fixed !important;top:0 !important;right:-350px !important;width:340px !important;height:100vh !important;background:rgba(9,9,12,0.96) !important;backdrop-filter:blur(25px) !important;border-left:1px solid rgba(255,255,255,0.08) !important;z-index:100000 !important;box-shadow:-10px 0 40px rgba(0,0,0,0.6) !important;transition:right 0.4s cubic-bezier(0.16,1,0.3,1) !important;padding:24px 20px !important;box-sizing:border-box !important;display:flex !important;flex-direction:column !important;gap:20px !important;color:#f8fafc !important}#action-center-sidebar.active{right:0 !important}/* Calendar styles */ .cal-day{padding:5px 0 !important;border-radius:4px !important;color:var(--text-secondary) !important;display:flex !important;align-items:center !important;justify-content:center !important}.cal-day.header-day{font-weight:bold !important;color:var(--accent-neon) !important}.cal-day.today{background:rgba(6,182,212,0.18) !important;border:1px solid rgba(6,182,212,0.4) !important;color:var(--text-primary) !important;font-weight:bold !important;box-shadow:0 0 8px rgba(6,182,212,0.3) !important}/* Notification History item */ .history-item{background:rgba(255,255,255,0.02) !important;border:1.5px solid rgba(255,255,255,0.05) !important;border-radius:6px !important;padding:8px 10px !important;display:flex !important;flex-direction:column !important;gap:2px !important;text-align:left !important;font-family:'Outfit',sans-serif !important;position:relative !important}.history-item.hist-success{border-left:3px solid #10b981 !important}.history-item.hist-warning{border-left:3px solid #f43f5e !important}.history-item.hist-info{border-left:3px solid var(--accent-neon) !important}/* Sidebar Notification history list scrollbar */ #sidebar-notification-history-list::-webkit-scrollbar{width:4px !important}#sidebar-notification-history-list::-webkit-scrollbar-track{background:transparent !important}#sidebar-notification-history-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1) !important;border-radius:2px !important}/* Theme presets buttons active styling */ .taskbar-btn.theme-preset-btn.active{border-color:var(--accent-neon) !important;background:rgba(6,182,212,0.15) !important;color:var(--text-primary) !important}/* Top date clock hover feedback */ .top-date-clock{cursor:pointer !important;transition:all 0.25s !important;border-radius:6px !important;padding:4px 8px !important;margin-left:-8px !important}.top-date-clock:hover{background:rgba(255,255,255,0.05) !important;box-shadow:0 2px 10px rgba(0,0,0,0.1) !important}/* ========================================= */ /* COSMIC / GOD MODE CSS ANIMATIONS & STYLES */ /* ========================================= */ /* 1. 3D Diorama Mode */ .diorama-mode{perspective:1000px;transform-style:preserve-3d;overflow:visible !important}.diorama-mode #timeline-scroll-container{transform:rotateX(45deg) scale(0.9);box-shadow:0 20px 40px rgba(0,0,0,0.5);border-radius:12px;transition:transform 0.5s ease}/* 2. Weather Overlay */ #cosmic-weather-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden;display:none}.weather-rain{position:absolute;width:2px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(100,200,255,0.8));animation:rainDrop 0.5s linear infinite}@keyframes rainDrop{0%{transform:translateY(-20px);opacity:0}50%{opacity:1}100%{transform:translateY(100px);opacity:0}}/* 3. VHS Glitch / Time Machine Effect */ .glitch-active #timeline-bar-wrapper{animation:vhsGlitch 0.2s linear infinite;filter:hue-rotate(90deg) contrast(150%)}@keyframes vhsGlitch{0%{transform:translate(0) skew(0deg)}20%{transform:translate(-2px,1px) skew(-2deg)}40%{transform:translate(-1px,-1px) skew(2deg)}60%{transform:translate(2px,1px) skew(0deg)}80%{transform:translate(1px,-1px) skew(1deg)}100%{transform:translate(0) skew(0deg)}}.time-machine-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.15),rgba(0,0,0,0.15) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:100;animation:scanlines 10s linear infinite}@keyframes scanlines{0%{background-position:0 0}100%{background-position:0 1000px}}/* 4. AI Anomaly (Overload) */ .anomaly-high-load{box-shadow:0 0 15px #ef4444,inset 0 0 10px #ef4444 !important;animation:pulseAnomaly 1.5s infinite;border:1px solid #f87171 !important}@keyframes pulseAnomaly{0%{opacity:1}50%{opacity:0.7;box-shadow:0 0 25px #ef4444,inset 0 0 15px #ef4444}100%{opacity:1}}/* 5. Hyper-Focus Mode */ .hyper-focus-active .timeline-segment{transition:all 0.5s cubic-bezier(0.25,1,0.5,1);filter:brightness(0.3) blur(2px)}.hyper-focus-active .timeline-segment.current-lesson{flex:10 !important;/* expand massively */ filter:brightness(1.2) blur(0px);z-index:10;box-shadow:0 0 30px var(--accent-neon)}/* 6. Timeline Radio Equalizer */ #timeline-radio-eq{display:none;align-items:center;gap:2px;height:15px;margin-left:10px}.eq-bar{width:3px;background:#a78bfa;border-radius:1px;animation:eqPulse 0.5s alternate infinite ease-in-out}.eq-bar:nth-child(1){height:10px;animation-duration:0.4s}.eq-bar:nth-child(2){height:15px;animation-duration:0.6s}.eq-bar:nth-child(3){height:8px;animation-duration:0.5s}.eq-bar:nth-child(4){height:12px;animation-duration:0.7s}@keyframes eqPulse{0%{transform:scaleY(0.3)}100%{transform:scaleY(1)}}/* 7. Minigame overlay */ .minigame-container{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#10b981;font-family:'Courier New',monospace;backdrop-filter:blur(5px)}/* 8. Virtual Cursors (Multiplayer) */ .virtual-cursor{position:absolute;width:20px;height:20px;pointer-events:none;z-index:999;transition:all 2s cubic-bezier(0.25,1,0.5,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}@keyframes mgMove{0%{right:-20px}100%{right:320px}}/* --- Section Separator --- */ #desktop-bell-timeline-container{/* now moved into window-content */ font-family:'Space Grotesk',sans-serif;color:white}.timeline-segment{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:0.72rem;font-weight:bold;color:rgba(255,255,255,0.8);position:relative;cursor:pointer;transition:all 0.3s ease}.timeline-segment:hover{opacity:1 !important;color:#ffffff !important;background:rgba(255,255,255,0.25) !important;box-shadow:inset 0 0 10px rgba(255,255,255,0.2)}.timeline-segment:hover .segment-time,.timeline-segment:hover .segment-txt,.timeline-segment:hover i{color:#ffffff !important;text-shadow:0 0 10px rgba(255,255,255,1);opacity:1 !important}.timeline-segment-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.timeline-segment.lesson-segment{background:rgba(56,189,248,0.25);border-right:1px solid rgba(56,189,248,0.6);box-shadow:inset 0 0 6px rgba(56,189,248,0.2)}.timeline-segment.break-segment{background:rgba(0,0,0,0.2);border-right:1px solid rgba(255,255,255,0.4)}.timeline-segment.normal-break-segment{background:rgba(255,255,255,0.15);border-right:1px solid rgba(255,255,255,0.6)}.timeline-segment.long-break-segment{background:rgba(168,85,247,0.35);border-right:1px solid rgba(168,85,247,0.8);box-shadow:inset 0 0 10px rgba(168,85,247,0.4)}.timeline-segment.off-school-segment{background:rgba(0,0,0,0.6);border-right:1px solid rgba(255,255,255,0.2)}.timeline-tick{position:absolute;border-left:1px dashed rgba(255,255,255,0.2);height:100%;top:0}.timeline-tick span{position:absolute;bottom:-16px;left:-12px;font-size:0.65rem;color:rgba(255,255,255,0.6);font-family:'Space Grotesk',sans-serif}.timeline-segment.active-segment{background:rgba(6,182,212,0.15);color:var(--accent-neon) !important;box-shadow:inset 0 0 10px rgba(6,182,212,0.25);border:1px solid rgba(6,182,212,0.3)}.timeline-segment.past-segment{opacity:0.35;background:rgba(0,0,0,0.3)}.timeline-segment .segment-time{font-size:0.55rem;color:rgba(255,255,255,0.55);margin-top:1px;font-weight:normal}.progress-bar-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,rgba(16,185,129,0.4),rgba(16,185,129,0.1));border-right:2px solid #10b981;z-index:1;transition:width 1s linear}.timeline-segment .tooltip{visibility:hidden;width:200px;background-color:rgba(15,23,42,0.95);color:#fff;text-align:left;border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:8px 12px;position:absolute;z-index:100;bottom:125%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.2s ease;box-shadow:0 4px 15px rgba(0,0,0,0.5);font-family:'Space Grotesk',sans-serif;font-size:0.72rem;pointer-events:none;line-height:1.4}.timeline-segment:hover .tooltip{visibility:visible;opacity:1}@keyframes pulse-alert{0%{box-shadow:inset 0 0 5px rgba(239,68,68,0.5);border-color:rgba(239,68,68,0.5)}50%{box-shadow:inset 0 0 20px rgba(239,68,68,0.9);border-color:rgba(239,68,68,1)}100%{box-shadow:inset 0 0 5px rgba(239,68,68,0.5);border-color:rgba(239,68,68,0.5)}}.timeline-segment.ending-soon{animation:pulse-alert 1.5s infinite;color:#fca5a5 !important}.timeline-minimap{width:100%;height:4px;background:rgba(0,0,0,0.4);border-radius:2px;position:absolute;top:-6px;left:0;overflow:hidden}.minimap-fill{height:100%;background:var(--accent-neon);border-radius:2px;transition:width 1s linear;position:relative}.minimap-fill::after{content:'';position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:8px;height:8px;background:#ffffff;border-radius:50%;box-shadow:0 0 8px var(--accent-neon),0 0 15px var(--accent-neon);animation:pulse-glow-dot 1.5s infinite alternate}@keyframes pulse-glow-dot{0%{opacity:0.7;box-shadow:0 0 4px var(--accent-neon)}100%{opacity:1;box-shadow:0 0 12px var(--accent-neon),0 0 20px var(--accent-neon)}}.quick-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:white;border-radius:4px;padding:2px 6px;font-size:0.6rem;cursor:pointer;margin:0 2px;transition:all 0.2s}.quick-btn:hover{background:rgba(255,255,255,0.25);transform:scale(1.1)}.substituted-segment{background:repeating-linear-gradient(45deg,rgba(234,179,8,0.2),rgba(234,179,8,0.2) 10px,rgba(0,0,0,0.3) 10px,rgba(0,0,0,0.3) 20px) !important;border:1px solid rgba(234,179,8,0.5) !important}.phase-marker{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,0.3);z-index:2}.marquee-container{width:100%;overflow:hidden;white-space:nowrap;display:inline-block}.marquee-text{display:inline-block;animation:marquee 8s linear infinite}@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}.audio-preview-btn{background:none;border:none;color:rgba(255,255,255,0.5);cursor:pointer;font-size:0.55rem;padding:0 4px;transition:color 0.2s}.audio-preview-btn:hover{color:var(--accent-neon)}#live-sync-btn{display:none;background:#ef4444;color:white;border:none;border-radius:4px;font-size:0.65rem;padding:2px 8px;cursor:pointer;font-weight:bold;animation:pulse-alert 1.5s infinite}/* ========================================= */ /* COSMIC / GOD MODE CSS ANIMATIONS & STYLES */ /* ========================================= */ /* 1. 3D Diorama Mode */ .diorama-mode{perspective:1000px;transform-style:preserve-3d;overflow:visible !important}.diorama-mode #timeline-scroll-container{transform:rotateX(45deg) scale(0.9);box-shadow:0 20px 40px rgba(0,0,0,0.5);border-radius:12px;transition:transform 0.5s ease}/* 2. Weather Overlay */ #cosmic-weather-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden;display:none}.weather-rain{position:absolute;width:2px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(100,200,255,0.8));animation:rainDrop 0.5s linear infinite}@keyframes rainDrop{0%{transform:translateY(-20px);opacity:0}50%{opacity:1}100%{transform:translateY(100px);opacity:0}}/* 3. VHS Glitch / Time Machine Effect */ .glitch-active #timeline-bar-wrapper{animation:vhsGlitch 0.2s linear infinite;filter:hue-rotate(90deg) contrast(150%)}@keyframes vhsGlitch{0%{transform:translate(0) skew(0deg)}20%{transform:translate(-2px,1px) skew(-2deg)}40%{transform:translate(-1px,-1px) skew(2deg)}60%{transform:translate(2px,1px) skew(0deg)}80%{transform:translate(1px,-1px) skew(1deg)}100%{transform:translate(0) skew(0deg)}}.time-machine-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.15),rgba(0,0,0,0.15) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:100;animation:scanlines 10s linear infinite}@keyframes scanlines{0%{background-position:0 0}100%{background-position:0 1000px}}/* 4. AI Anomaly (Overload) */ .anomaly-high-load{box-shadow:0 0 15px #ef4444,inset 0 0 10px #ef4444 !important;animation:pulseAnomaly 1.5s infinite;border:1px solid #f87171 !important}@keyframes pulseAnomaly{0%{opacity:1}50%{opacity:0.7;box-shadow:0 0 25px #ef4444,inset 0 0 15px #ef4444}100%{opacity:1}}/* 5. Hyper-Focus Mode */ .hyper-focus-active .timeline-segment{transition:all 0.5s cubic-bezier(0.25,1,0.5,1);filter:brightness(0.3) blur(2px)}.hyper-focus-active .timeline-segment.current-lesson{flex:10 !important;/* expand massively */ filter:brightness(1.2) blur(0px);z-index:10;box-shadow:0 0 30px var(--accent-neon)}/* 6. Timeline Radio Equalizer */ #timeline-radio-eq{display:none;align-items:center;gap:2px;height:15px;margin-left:10px}.eq-bar{width:3px;background:#a78bfa;border-radius:1px;animation:eqPulse 0.5s alternate infinite ease-in-out}.eq-bar:nth-child(1){height:10px;animation-duration:0.4s}.eq-bar:nth-child(2){height:15px;animation-duration:0.6s}.eq-bar:nth-child(3){height:8px;animation-duration:0.5s}.eq-bar:nth-child(4){height:12px;animation-duration:0.7s}@keyframes eqPulse{0%{transform:scaleY(0.3)}100%{transform:scaleY(1)}}/* 7. Minigame overlay */ .minigame-container{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#10b981;font-family:'Courier New',monospace;backdrop-filter:blur(5px)}/* 8. Virtual Cursors (Multiplayer) */ .virtual-cursor{position:absolute;width:20px;height:20px;pointer-events:none;z-index:999;transition:all 2s cubic-bezier(0.25,1,0.5,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}@keyframes mgMove{0%{right:-20px}100%{right:320px}}/* --- Section Separator --- */ @keyframes flashRed{0%,100%{background:rgba(239,68,68,0.15)}50%{background:rgba(239,68,68,0.45)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}#bell-panic-btn.alarm-active{animation:alarmPulse 0.5s infinite alternate !important}@keyframes alarmPulse{0%{transform:scale(1);box-shadow:0 0 25px rgba(239,68,68,0.4)}100%{transform:scale(1.08);box-shadow:0 0 45px rgba(239,68,68,0.9),inset 0 0 25px rgba(0,0,0,0.6);border-color:#fff}}.snap-preview{position:absolute;background:rgba(16,185,129,0.2);border:2px dashed rgba(16,185,129,0.6);backdrop-filter:blur(4px);z-index:999;pointer-events:none;transition:all 0.2s cubic-bezier(0.1,0.9,0.2,1);opacity:0;visibility:hidden}.snap-preview.active-left{top:0;left:0;width:50%;height:calc(100% - 50px);opacity:1;visibility:visible}.snap-preview.active-right{top:0;right:0;left:auto;width:50%;height:calc(100% - 50px);opacity:1;visibility:visible}.snap-preview.active-top{top:0;left:0;width:100%;height:calc(100% - 50px);opacity:1;visibility:visible}/* ========================================= */ /* COSMIC / GOD MODE CSS ANIMATIONS & STYLES */ /* ========================================= */ /* 1. 3D Diorama Mode */ .diorama-mode{perspective:1000px;transform-style:preserve-3d;overflow:visible !important}.diorama-mode #timeline-scroll-container{transform:rotateX(45deg) scale(0.9);box-shadow:0 20px 40px rgba(0,0,0,0.5);border-radius:12px;transition:transform 0.5s ease}/* 2. Weather Overlay */ #cosmic-weather-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden;display:none}.weather-rain{position:absolute;width:2px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(100,200,255,0.8));animation:rainDrop 0.5s linear infinite}@keyframes rainDrop{0%{transform:translateY(-20px);opacity:0}50%{opacity:1}100%{transform:translateY(100px);opacity:0}}/* 3. VHS Glitch / Time Machine Effect */ .glitch-active #timeline-bar-wrapper{animation:vhsGlitch 0.2s linear infinite;filter:hue-rotate(90deg) contrast(150%)}@keyframes vhsGlitch{0%{transform:translate(0) skew(0deg)}20%{transform:translate(-2px,1px) skew(-2deg)}40%{transform:translate(-1px,-1px) skew(2deg)}60%{transform:translate(2px,1px) skew(0deg)}80%{transform:translate(1px,-1px) skew(1deg)}100%{transform:translate(0) skew(0deg)}}.time-machine-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.15),rgba(0,0,0,0.15) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:100;animation:scanlines 10s linear infinite}@keyframes scanlines{0%{background-position:0 0}100%{background-position:0 1000px}}/* 4. AI Anomaly (Overload) */ .anomaly-high-load{box-shadow:0 0 15px #ef4444,inset 0 0 10px #ef4444 !important;animation:pulseAnomaly 1.5s infinite;border:1px solid #f87171 !important}@keyframes pulseAnomaly{0%{opacity:1}50%{opacity:0.7;box-shadow:0 0 25px #ef4444,inset 0 0 15px #ef4444}100%{opacity:1}}/* 5. Hyper-Focus Mode */ .hyper-focus-active .timeline-segment{transition:all 0.5s cubic-bezier(0.25,1,0.5,1);filter:brightness(0.3) blur(2px)}.hyper-focus-active .timeline-segment.current-lesson{flex:10 !important;/* expand massively */ filter:brightness(1.2) blur(0px);z-index:10;box-shadow:0 0 30px var(--accent-neon)}/* 6. Timeline Radio Equalizer */ #timeline-radio-eq{display:none;align-items:center;gap:2px;height:15px;margin-left:10px}.eq-bar{width:3px;background:#a78bfa;border-radius:1px;animation:eqPulse 0.5s alternate infinite ease-in-out}.eq-bar:nth-child(1){height:10px;animation-duration:0.4s}.eq-bar:nth-child(2){height:15px;animation-duration:0.6s}.eq-bar:nth-child(3){height:8px;animation-duration:0.5s}.eq-bar:nth-child(4){height:12px;animation-duration:0.7s}@keyframes eqPulse{0%{transform:scaleY(0.3)}100%{transform:scaleY(1)}}/* 7. Minigame overlay */ .minigame-container{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#10b981;font-family:'Courier New',monospace;backdrop-filter:blur(5px)}/* 8. Virtual Cursors (Multiplayer) */ .virtual-cursor{position:absolute;width:20px;height:20px;pointer-events:none;z-index:999;transition:all 2s cubic-bezier(0.25,1,0.5,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}@keyframes mgMove{0%{right:-20px}100%{right:320px}}