:root {
    --bg: #0a001a;
    --text: #e0f8ff;
    --primary: #00eeff;
    --secondary: #ff0088;
    --accent: #ff00ff;
    --nav-bg: rgba(10,14,23,0.96);
    --card: rgba(20,20,80,0.5);
    --border: rgba(0,238,255,0.5);
    --glow: 0 0 80px rgba(0,238,255,0.7);
}

[data-theme="light"] {
    --bg: #f0f8ff;
    --text: #0f172a;
    --primary: #0066ff;
    --secondary: #e91e63;
    --nav-bg: rgba(255,255,255,0.95);
    --card: rgba(255,255,255,0.92);
}

* { margin:0; padding:0; box-sizing:border-box; }

body { 
    background:var(--bg); 
    color:var(--text); 
    font-family:'Exo 2',sans-serif; 
    overflow-x:hidden; 
}

header {
    position:fixed; top:0; left:0; right:0; z-index:9999;
    background:var(--nav-bg); backdrop-filter:blur(25px);
    border-bottom:2px solid var(--border); padding: 20px;
}

.nav-container { max-width:1500px; margin:0 auto; padding:0 40px; text-align:center; }

nav ul { display:flex; gap:50px; justify-content:center; flex-wrap:wrap; list-style:none; }

nav a {
    color:var(--text); text-decoration:none; font-weight:800; font-size:1.2rem;
    padding:14px 34px; border-radius:60px; transition:all 0.4s;
}

nav a.active { background:var(--primary); color:#000; box-shadow:var(--glow); transform:scale(1.1); }

nav a:hover:not(.active) { background:rgba(0,238,255,0.25); transform:translateY(-4px); }

.theme-toggle {
    position:fixed; top:20px; right:30px; z-index:9999;
    width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary));
    border:none; cursor:pointer; box-shadow:var(--glow); display:flex; align-items:center; justify-content:center;
    transition:all 0.7s cubic-bezier(0.68,-0.55,0.265,1.55);
}

.theme-toggle i { font-size:2.4rem; color:#000; }

.theme-toggle:hover { transform:scale(1.3) rotate(360deg); box-shadow:0 0 120px var(--secondary); }

.hero {
    height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    background:linear-gradient(135deg,#0f0022,#1a0033,#000);
}

.hero h1 {
    font-family:'Orbitron',sans-serif; font-size:12rem; font-weight:900;
    background:linear-gradient(90deg,var(--primary),var(--secondary),#ff00ff,var(--primary));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:var(--glow); animation:neonPulse 3s infinite alternate;
}

.hero h2 {
    font-size:6rem; color:var(--secondary); text-shadow:0 0 80px var(--secondary);
    margin:20px 0; letter-spacing:12px;
}

.hero p {
    font-size:2.8rem; font-weight:800; margin-top:40px;
    background:linear-gradient(90deg,#00ffff,#ff00ff); -webkit-background-clip:text; color:transparent;
}

@keyframes neonPulse { 
    from{filter:drop-shadow(0 0 40px var(--primary));} 
    to{filter:drop-shadow(0 0 120px var(--secondary));} 
}

.news-block {
    padding: 100px 40px 140px;
    text-align: center;
    background: var(--card);
    border-top: 4px solid var(--primary);
    margin-top: -100px;
}

.news-block h2 {
    font-family:'Orbitron',sans-serif;
    font-size: 6rem;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: var(--glow);
    margin-bottom: 50px;
}

.news-placeholder {
    font-size: 3rem;
    font-weight: 800;
    opacity: 0.9;
    line-height: 1.4;
}

.page { 
    display:none; opacity:0; transform:translateY(50px); transition:all 0.9s ease; min-height:100vh; padding-top:140px; 
}

.page.active { display:block; opacity:1; transform:translateY(0); }

.container { max-width:1500px; margin:0 auto; padding:40px; }

h2.title {
    font-family:'Orbitron',sans-serif; font-size:6rem; text-align:center; color:var(--primary);
    margin:80px 0 60px; text-shadow:var(--glow);
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    -webkit-background-clip:text; color:transparent;
}

.week-info {
    text-align:center; margin-bottom:30px; font-size:1.4rem; opacity:0.9;
    background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; color:transparent;
}

.days-tabs { display:flex; justify-content:center; gap:25px; flex-wrap:wrap; margin:60px 0; }

.day-btn { 
    padding:30px 230px; background:var(--card); border:3px solid var(--border); border-radius:60px;
    color:var(--text); font-weight:800; font-size:1.3rem; cursor:pointer; transition:all 0.5s; 
}

.day-btn.active, .day-btn:hover { background:var(--primary); color:#000; box-shadow:var(--glow); transform:scale(1.1); }

.schedule-table {
    width:100%; border-collapse:collapse; background:var(--card); border-radius:25px;
    overflow:hidden; box-shadow:var(--glow); margin:40px 0; display:none;
}

.schedule-table.active { display:table; animation:fadeIn 0.8s; }

@keyframes fadeIn { from{opacity:0; transform:scale(0.95);} to{opacity:1; transform:scale(1);} }

.schedule-table th {
    background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#000;
    padding:22px; font-size:1.5rem; font-weight:900;
}

.schedule-table td {
    padding:20px; text-align:center; border-bottom:1px solid var(--border);
    font-size:1.2rem; transition:all 0.3s;
}

.schedule-table tr:hover td { background:rgba(0,238,255,0.15); transform:scale(1.02); }

.type { font-size:0.9rem; opacity:0.8; font-style:italic; }

.legends-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:40px; }

.legend-card {
    background:var(--card); border:3px solid var(--border); border-radius:30px;
    padding:50px 30px; text-align:center; transition:all 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
    backdrop-filter:blur(15px);
}

.legend-card:hover {
    transform:translateY(-40px) scale(1.12); border-color:var(--secondary);
    box-shadow:0 40px 100px rgba(255,0,136,0.5);
}

.legend-card h3 { font-size:2.8rem; color:var(--primary); margin-bottom:15px; text-shadow:0 0 30px var(--primary); }

.legend-card a { color:var(--secondary); font-size:2.2rem; font-weight:900; text-decoration:none; }

.contact-card { 
    max-width:1000px; margin:80px auto; padding:80px; background:var(--card); 
    border:4px solid var(--primary); border-radius:40px; text-align:center; box-shadow:var(--glow); 
}

footer { text-align:center; padding:120px 20px 80px; background:var(--nav-bg); border-top:2px solid var(--border); }

@media (max-width:768px) {
    .hero h1{font-size:7.5rem;} 
    .hero h2{font-size:4rem;} 
    .hero p{font-size:2rem;}
    .news-block h2 {font-size:4rem;}
    .news-placeholder {font-size:2rem;}
    h2.title{font-size:4rem;} 
    .day-btn{font-size:1.1rem; padding:14px 25px;}
}