:root {
    --bg:#070a12;
    --surface:#111624;
    --surface-2:#171d2e;
    --text:#fff;
    --muted:#aab3c8;
    --primary:#7352ff;
    --secondary:#00a8ff;
    --live:#ff3f64;
    --warning:#ffad42;
    --border:rgba(255,255,255,.09);
}

*{box-sizing:border-box}
body{margin:0;font-family:Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
.page{width:min(1450px,94%);margin:auto;padding:28px 0 60px}
.topnav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 3%;background:rgba(7,10,18,.88);backdrop-filter:blur(15px);border-bottom:1px solid var(--border)}
.brand-mini{font-weight:900;font-size:20px}
.view-links{display:flex;gap:8px;flex-wrap:wrap}
.view-links a{padding:9px 13px;border:1px solid var(--border);border-radius:10px;color:var(--muted)}
.view-links a.active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent}
.eyebrow{font-size:12px;letter-spacing:2px;color:var(--secondary)}
.hero,.sports-hero,.glass-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:38px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(135deg,#1b2035,#0a0d18)}
.hero h1,.sports-hero h1,.glass-hero h1{margin:8px 0;font-size:clamp(30px,5vw,52px)}
.hero p,.sports-hero p,.glass-hero p{color:var(--muted)}
.hero-logo,.glass-orb{display:flex;align-items:center;justify-content:center;width:110px;height:110px;border-radius:30px;font-size:34px;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--secondary))}
.metrics,.control-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.metrics>div,.control-metrics>div{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.metrics span,.control-metrics span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.metrics strong,.control-metrics strong{font-size:28px}
.block{margin-top:36px}.block-title{display:flex;align-items:center;gap:12px;margin-bottom:17px}.block-title h2{margin:0}
.live-pulse{width:11px;height:11px;border-radius:50%;background:var(--live);animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(.75);opacity:.5}}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.event-card{padding:22px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(155deg,#1a2035,#0b0e1a)}
.event-card-top,.event-times,.wall-top,.glass-meta,.control-title{display:flex;justify-content:space-between;align-items:center;gap:12px}
.channel-chip,.live-chip,.upcoming-chip{padding:8px 12px;border-radius:999px;font-size:12px}
.channel-chip{background:rgba(115,82,255,.15)}.channel-chip.unassigned{color:var(--warning)}
.live-chip{color:var(--live);background:rgba(255,63,100,.12)}.upcoming-chip{color:var(--secondary);background:rgba(0,168,255,.12)}
.event-card h3{min-height:64px;line-height:1.7;direction:ltr;text-align:left}
.event-times,.event-date{color:var(--muted);font-size:13px}
.progress-track{height:7px;border-radius:999px;background:#20263a;overflow:hidden;margin-top:15px}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--live),var(--primary))}
.countdown{margin-top:14px;padding:11px;border-radius:12px;background:rgba(0,168,255,.08);color:var(--secondary);text-align:center}

/* Guide */
.guide-page{padding-top:35px}.guide-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.guide-header h1{margin:6px 0}.guide-table{border:1px solid var(--border);border-radius:20px;overflow:hidden}
.guide-row{display:grid;grid-template-columns:160px 100px 1fr 260px;gap:10px;align-items:center;padding:17px 20px;border-bottom:1px solid var(--border);background:#0f1421}
.guide-row:last-child{border-bottom:0}.guide-head{background:#1b2233;font-weight:700}.guide-channel{font-weight:800}
.status-live,.status-upcoming{display:inline-block;padding:6px 10px;border-radius:999px;font-size:11px}
.status-live{color:var(--live);background:rgba(255,63,100,.12)}.status-upcoming{color:var(--secondary);background:rgba(0,168,255,.12)}
.guide-title{direction:ltr;text-align:left}

/* Wall */
.wall-page{padding:28px 3% 60px}.wall-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.wall-header h1{margin:6px 0}
.wall-clock{font-size:28px;font-weight:900}.wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.wall-tile{min-height:220px;padding:20px;border:1px solid var(--border);border-radius:18px;background:#111827}
.wall-tile.live-tile{background:linear-gradient(145deg,#27121a,#111827);border-color:rgba(255,63,100,.35)}
.wall-tile h2{min-height:90px;line-height:1.5;direction:ltr;text-align:left}.wall-live{color:var(--live)}.wall-soon{color:var(--secondary)}

/* Control */
.control-page{padding-top:35px}.server-badge{padding:10px 15px;border-radius:999px;background:rgba(44,217,155,.12);color:#2ed99b}
.control-metrics{grid-template-columns:repeat(4,1fr)}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.control-panel{border:1px solid var(--border);border-radius:20px;background:#0f1421;overflow:hidden}.panel-title{padding:18px;background:#1a2132;font-weight:800}
.control-row{display:flex;justify-content:space-between;gap:18px;padding:16px 18px;border-top:1px solid var(--border)}
.control-row strong,.control-row span{display:block}.control-row span{color:var(--muted);font-size:12px;margin-top:5px}.control-live{color:#2ed99b}

/* Glass */
.glass-bg{min-height:100vh;background:radial-gradient(circle at 15% 15%,rgba(115,82,255,.35),transparent 30%),radial-gradient(circle at 85% 85%,rgba(0,168,255,.28),transparent 30%),#080b14}
.glass-hero,.glass-card{backdrop-filter:blur(20px);background:rgba(255,255,255,.07)}
.glass-columns{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}.glass-card{padding:20px;margin-bottom:14px;border:1px solid rgba(255,255,255,.14);border-radius:20px}
.glass-card h3{direction:ltr;text-align:left;line-height:1.6}.glass-card>div:last-child{color:var(--muted)}

/* Shared */
.error-box{margin:25px 0;padding:25px;border:1px solid rgba(255,63,100,.3);border-radius:18px;background:rgba(255,63,100,.08);color:#ff8ca0}
@media(max-width:900px){
    .metrics,.control-metrics{grid-template-columns:repeat(2,1fr)}
    .control-grid,.glass-columns{grid-template-columns:1fr}
    .guide-row{grid-template-columns:120px 80px 1fr}
    .guide-row>div:last-child{grid-column:1/-1;color:var(--muted)}
}
@media(max-width:650px){
    .topnav{align-items:flex-start;flex-direction:column}
    .hero,.sports-hero,.glass-hero{align-items:flex-start;flex-direction:column}
    .metrics,.control-metrics{grid-template-columns:1fr}
    .guide-row{grid-template-columns:1fr}
    .guide-head{display:none}
}


/* Visitor statistics strip */
.visitor-strip {
    width: min(1450px, 94%);
    margin: 14px auto 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.visitor-strip > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(14px);
}

.visitor-strip small {
    color: var(--muted);
}

.visitor-strip strong {
    font-size: 20px;
}

.visitor-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2ed99b;
    box-shadow: 0 0 0 5px rgba(46,217,155,.12);
    animation: visitorPulse 1.6s infinite;
}

@keyframes visitorPulse {
    50% {
        opacity: .45;
        transform: scale(.8);
    }
}

@media (max-width: 650px) {
    .visitor-strip {
        grid-template-columns: 1fr;
    }

    .visitor-strip > div {
        justify-content: space-between;
    }
}


/* Sports-only navigation */
.sports-topnav {
    justify-content: space-between;
}

.topnav-label {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 1.8px;
}

@media (max-width: 650px) {
    .sports-topnav {
        flex-direction: row;
        align-items: center;
    }

    .topnav-label {
        font-size: 10px;
        letter-spacing: 1px;
        text-align: left;
    }
}