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

:root{
  color-scheme:dark;
  --gold:#4a96e2;--gold-2:#8ac0f6;--gold-dark:#1c538a;--gold-glow:rgba(74,150,226,0.35);
  --pitch:#050a0f;--pitch-2:#0b1520;--pitch-3:#122437;
  --cream:#dae6f3;--cream-dim:#b8c8d9;
  --surface:rgba(218,230,243,0.05);--surface-2:rgba(218,230,243,0.09);
  --border:rgba(74,150,226,0.16);--border-strong:rgba(74,150,226,0.32);
  --text:#e2ebf4;--muted:#9fae9f;--muted-2:#5c6a5d;
  --radius:20px;--radius-sm:12px;
  --shadow:0 26px 80px rgba(0,0,0,0.6);--shadow-gold:0 18px 70px rgba(74,150,226,0.16);
  --glass:linear-gradient(150deg,rgba(218,230,243,0.07),rgba(218,230,243,0.02));
  --mono:'Space Mono',monospace;--display:'Anton',sans-serif;
}

html{scroll-behavior:smooth;background:var(--pitch)}
body{
  background:
    radial-gradient(ellipse 60% 40% at 15% -10%,rgba(74,150,226,0.16),transparent 40%),
    radial-gradient(ellipse 55% 38% at 88% 0%,rgba(74,150,226,0.10),transparent 38%),
    radial-gradient(ellipse 70% 50% at 50% 100%,rgba(18,36,55,0.55),transparent 60%),
    linear-gradient(180deg,#050a0f 0%,#080f17 45%,#050a0f 100%);
  color:var(--text);font-family:'Inter',sans-serif;min-height:100vh;
  overflow-x:hidden;letter-spacing:-0.005em;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,0.012) 0 40px,transparent 40px 80px);
  mask-image:radial-gradient(circle at 50% 0%,black,transparent 78%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    conic-gradient(from 200deg at 6% 0%,rgba(138,192,246,0.10),transparent 22%),
    conic-gradient(from 340deg at 94% 0%,rgba(138,192,246,0.08),transparent 22%);
}
body > *{position:relative;z-index:1}

@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}

.nav{
  display:flex;justify-content:space-between;align-items:center;
  max-width:1180px;width:calc(100% - 32px);margin:14px auto 0;
  padding:12px 14px 12px 22px;background:linear-gradient(135deg,rgba(218,230,243,.12),rgba(218,230,243,.035));
  backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  position:sticky;top:12px;z-index:100;border:1px solid rgba(138,192,246,.28);border-radius:999px;
  box-shadow:0 18px 55px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.06) inset,0 1px 0 rgba(255,255,255,.16) inset;
}

.nav-logo{font-family:Inter,sans-serif;font-size:24px;font-weight:900;letter-spacing:.08em;color:#fff;line-height:1;text-transform:uppercase;white-space:nowrap}
.nav-logo span{color:#1978d7;text-shadow:0 0 18px rgba(25,120,215,.45)}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-cta{
  display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-dark));
  color:#040f1a;text-decoration:none;padding:11px 22px;border-radius:999px;font-weight:800;font-size:13px;
  transition:.25s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 1px rgba(255,255,255,0.18) inset,0 14px 34px var(--gold-glow);
}
.nav-cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 44px rgba(74,150,226,0.42)}
.nav-cta svg{width:16px;height:16px;flex-shrink:0}

.theme-toggle{
  height:40px;display:flex;align-items:center;justify-content:center;gap:7px;
  width:40px;padding:0;border-radius:999px;border:1px dashed var(--border-strong);
  background:rgba(218,230,243,.04);color:var(--cream);
  font-family:var(--mono);font-size:11px;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:.25s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle:hover{
  transform:translateY(-2px);border-color:var(--gold);
  background:rgba(74,150,226,.10);color:var(--gold-2);
}
.theme-icon{font-size:14px;line-height:1}
.theme-icon svg{width:17px;height:17px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.live-section{padding:0 24px 88px;max-width:1040px;margin:0 auto}
.section-sub{color:var(--muted);font-size:13px;margin:0 0 5px;line-height:1.2;font-family:var(--mono);min-height:0}
.ad-slider{position:relative;height:330px;width:calc(100% - 32px);max-width:1040px;margin:18px auto 8px;border:1px solid rgba(138,192,246,.30);border-radius:20px;overflow:hidden;background:linear-gradient(135deg,rgba(218,230,243,.10),rgba(5,10,15,.34));box-shadow:0 22px 65px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.06) inset,0 1px 0 rgba(255,255,255,.14) inset;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.ad-slide{position:absolute;inset:0;opacity:0;pointer-events:none;background-size:cover;background-position:center;transition:opacity .55s ease}
.ad-slide.active{opacity:1;pointer-events:auto}
.ad-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,15,.88),rgba(5,10,15,.28) 58%,rgba(5,10,15,.1))}

.ad-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:7px;font-weight:700}
.ad-title{font-family:var(--display);font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.5px}
.ad-caption{font-size:11px;color:rgba(255,255,255,.78);margin-top:8px;line-height:1.45}
.ad-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:30px;height:30px;border:1px solid rgba(138,192,246,.55);border-radius:50%;background:rgba(5,10,15,.52);color:var(--gold-2);cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.2s}
.ad-arrow:hover{background:var(--gold);color:#040f1a}
.ad-prev{left:12px}.ad-next{right:12px}
.ad-dots{position:absolute;z-index:3;bottom:12px;left:24px;display:flex;gap:6px}
.ad-dot{width:18px;height:3px;border:0;border-radius:99px;background:rgba(255,255,255,.35);cursor:pointer;padding:0;transition:.25s}
.ad-dot.active{background:var(--gold-2);width:30px}
.ad-slide-sponsor{
  display:flex;align-items:center;justify-content:center;padding:16px 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%,rgba(74,150,226,.20),transparent 60%),
    linear-gradient(135deg,rgba(218,230,243,.14),rgba(5,10,15,.38) 70%);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
}
.ad-slide-sponsor::after{display:none}
.ad-sponsor-inner{
  position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;width:100%;padding:0 16px;
}

.ad-sponsor-note{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--muted-2);
}

.ad-banner-inner{flex:0 0 auto;transform-origin:center center}
.ad-banner-inner iframe{display:block;border:0;width:100%;height:100%;background:transparent}

html[data-theme="light"] .ad-slide-sponsor{
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%,rgba(215,25,41,.20),transparent 60%),
    linear-gradient(150deg,#fff,var(--pitch-2) 75%);
}
html[data-theme="light"] .ad-banner{
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 28px rgba(150,0,12,.12);
}
.player-overlay-inner .ad-banner{margin:14px auto 0}
.toolbar{display:flex;gap:5px;background:rgba(5,10,15,.72);border:1px solid var(--border-strong);padding:5px;border-radius:16px;margin:0 auto 22px;position:sticky;top:78px;z-index:20;backdrop-filter:blur(18px) saturate(140%);box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(218,230,243,.06)}
.tab{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:0;text-align:center;padding:12px 10px;font-family:var(--mono);font-weight:700;font-size:11px;color:var(--muted);cursor:pointer;border-radius:11px;transition:.22s cubic-bezier(.2,.8,.2,1);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.tab-index{font-size:9px;color:var(--gold);opacity:.75;letter-spacing:0}
.tab.active{background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-dark));color:#040f1a;box-shadow:0 8px 20px rgba(74,150,226,.22),inset 0 1px 0 rgba(255,255,255,.32);transform:translateY(-1px)}
.tab.active .tab-index{color:#040f1a;opacity:.75}
.tab:hover:not(.active){background:rgba(74,150,226,.09);color:var(--cream);transform:translateY(-1px)}

.matches-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.match-card{
  min-height:166px;background:linear-gradient(135deg,rgba(218,230,243,.10),rgba(218,230,243,.025));
  border:1px solid rgba(74,150,226,.24);border-radius:18px;
  padding:14px 16px;cursor:pointer;transition:.28s cubic-bezier(.2,.8,.2,1);position:relative;overflow:visible;
  backdrop-filter:blur(14px) saturate(145%);-webkit-backdrop-filter:blur(14px) saturate(145%);
  box-shadow:0 14px 36px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.10) inset;
}
.match-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 22px 48px rgba(0,0,0,.32),0 0 26px rgba(74,150,226,.14)}
.match-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:10px;padding-bottom:8px;border-bottom:1px solid rgba(74,150,226,.16)}
.match-league{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--muted);font-family:var(--mono);font-weight:700;letter-spacing:.7px}
.match-league-logo{width:22px;height:22px;flex:0 0 22px;margin:-2px;object-fit:contain}
.match-league-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-badge{font-family:var(--mono);font-size:9px;padding:3px 7px;background:rgba(74,150,226,.12);border:1px solid var(--border-strong);color:var(--gold-2);font-weight:700;border-radius:999px;display:flex;align-items:center;gap:5px}
.live-dot2{width:5px;height:5px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 8px var(--gold);animation:breathe 1.2s ease-in-out infinite}
.match-teams{display:flex;justify-content:space-between;align-items:center;gap:8px}
.team-col{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0}

.team-logo{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(218,230,243,.08);border:1px solid var(--border-strong);font-family:var(--display);font-size:20px;color:var(--gold-2)}
.team-logo img{width:100%;height:100%;object-fit:contain}


.team-name{max-width:110px;font-size:12px;font-weight:700;text-align:center;line-height:1.25;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-score{font-family:var(--display);font-size:26px;color:var(--gold-2);text-align:center;padding:4px 10px;min-width:62px;letter-spacing:1px;background:rgba(0,0,0,.20);border-radius:10px;border:1px solid rgba(74,150,226,.24);box-shadow:0 4px 14px rgba(0,0,0,.14)}
.match-time{font-family:var(--mono);font-size:9.5px;color:var(--muted-2);text-align:center;margin-top:9px;padding-top:7px;border-top:1px solid rgba(74,150,226,.14)}
.kozin-live-card{grid-column:1/-1;position:relative;min-height:260px;border:1px solid var(--border-strong);border-radius:20px;overflow:hidden;cursor:pointer;background:#070d14 center/cover no-repeat;box-shadow:0 22px 58px rgba(0,0,0,.3);transition:.3s}
.kozin-live-card::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,15,.92),rgba(5,10,15,.48) 52%,rgba(5,10,15,.12)),linear-gradient(0deg,rgba(5,10,15,.6),transparent 60%)}
.kozin-live-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 35px rgba(74,150,226,.16)}
.kozin-live-card-content{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:30px;max-width:560px}
.kozin-live-eyebrow{display:flex;align-items:center;gap:8px;color:var(--gold-2);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.kozin-live-dot{width:7px;height:7px;border-radius:50%;background:#5cadff;box-shadow:0 0 10px #5cadff;animation:breathe 1.2s ease-in-out infinite}
.kozin-live-title{font-family:var(--display);font-size:42px;line-height:.98;letter-spacing:.5px;text-transform:uppercase;color:#fff}
.kozin-live-match{font-size:14px;font-weight:700;color:rgba(255,255,255,.86);margin-top:12px}
.kozin-live-cta{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-top:22px;padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#040f1a;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

.h-card,.news-card{
  background:linear-gradient(150deg,rgba(218,230,243,0.05),rgba(218,230,243,0.015));
  border:1px dashed var(--border-strong);border-radius:16px;
  cursor:pointer;transition:.28s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;
}
.h-card:hover,.news-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 26px rgba(74,150,226,.1)}
.h-card.disabled{opacity:.58;cursor:not-allowed}.h-card.disabled:hover{transform:none;border-color:var(--border-strong);box-shadow:none}
.news-card{border-style:solid;box-shadow:0 14px 32px rgba(0,0,0,.16)}
.news-card::after{content:'READ STORY  →';position:absolute;right:14px;bottom:14px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--gold-2);opacity:0;transform:translateY(4px);transition:.22s}
.news-card:hover::after{opacity:1;transform:translateY(0)}
.h-thumb{background:linear-gradient(135deg,rgba(74,150,226,.14),rgba(218,230,243,.03));height:126px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px dashed var(--border)}
.h-teams-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 22px}
.h-team{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:82px}
.h-team-logo{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(218,230,243,.08);border:1px solid var(--border-strong);font-family:var(--display);font-size:20px;color:var(--gold-2)}
.h-team-logo img{width:100%;height:100%;object-fit:contain}
.h-team-name{max-width:92px;font-size:10px;font-weight:700;text-align:center;color:var(--cream);line-height:1.25}
.h-score{font-family:var(--display);font-size:27px;color:var(--gold-2);padding:4px 10px;border:1px solid var(--border);border-radius:7px;background:rgba(0,0,0,.2);white-space:nowrap}
.h-play-mini{position:absolute;right:12px;bottom:10px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold);color:#040f1a}
.h-play-mini svg{width:12px;height:12px;fill:currentColor;margin-left:2px}
.highlight-subnav{display:none;gap:6px;width:max-content;margin:0 auto 16px;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.highlight-subnav.visible{display:flex}
.highlight-subtab{border:0;border-radius:999px;padding:9px 18px;background:transparent;color:var(--muted);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s}
.highlight-subtab.active{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#040f1a;box-shadow:0 5px 14px rgba(74,150,226,.18)}
.h-play{width:48px;height:48px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));border-radius:50%;display:flex;align-items:center;justify-content:center}
.h-play svg{width:18px;height:18px;margin-left:2px;fill:#040f1a}
.h-info,.news-body{padding:14px}
.h-teams{font-size:13px;font-weight:700;line-height:1.45;color:var(--cream)}
.h-meta{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.news-img{width:100%;height:178px;object-fit:cover;display:block;border-bottom:1px solid var(--border);filter:saturate(.88);transition:.3s}
.news-card:hover .news-img{transform:scale(1.035);filter:saturate(1.08)}
.news-title{font-size:15px;font-weight:800;line-height:1.45;color:var(--cream);padding-right:12px}
.news-body{min-height:92px;padding:16px 16px 36px;background:linear-gradient(180deg,rgba(218,230,243,.035),transparent)}
.news-img-placeholder{height:178px;background:linear-gradient(135deg,rgba(74,150,226,.16),rgba(218,230,243,.03));display:flex;align-items:center;justify-content:center;font-size:30px;border-bottom:1px solid var(--border)}
.news-detail-wrap{display:none}
.news-detail-wrap.visible{display:block;max-width:860px;margin:0 auto;padding:8px 0 24px}
.news-back{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border-strong);color:var(--gold-2);padding:9px 14px;border-radius:999px;cursor:pointer;font-weight:700;margin-bottom:18px;font-size:11px;font-family:var(--mono);transition:.2s}
.news-back:hover{background:rgba(74,150,226,.12);border-color:var(--gold);transform:translateX(-2px)}
.news-detail-img{width:100%;max-height:430px;object-fit:cover;border-radius:18px;margin-bottom:20px;border:1px solid var(--border-strong);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.news-detail-title{font-family:var(--display);font-weight:400;letter-spacing:.5px;font-size:30px;line-height:1.15;margin-bottom:14px;color:var(--cream);text-transform:uppercase}
.news-detail-desc{color:var(--muted);line-height:1.85;font-size:14px;white-space:pre-line}
.empty-state{grid-column:1/-1;border:1px dashed var(--border-strong);border-radius:16px;padding:24px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:12px;background:var(--surface)}
.hidden{display:none!important}
.contact-footer{max-width:1040px;margin:0 auto;padding:30px 24px 42px;border-top:1px solid var(--border);text-align:center;position:relative;z-index:1}
.contact-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:15px}
.contact-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.contact-link{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--cream);text-decoration:none;font-family:var(--mono);font-size:11px;font-weight:700;transition:.22s}
.contact-link:hover{transform:translateY(-3px);border-color:var(--gold);color:var(--gold-2);background:rgba(74,150,226,.1);box-shadow:0 12px 28px rgba(74,150,226,.14)}
.contact-link svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}

.player-overlay{
  position:fixed;inset:0;z-index:500;
  display:flex;flex-direction:column;
  background:radial-gradient(ellipse at 50% -10%,rgba(74,150,226,.14),transparent 42%),rgba(5,10,15,0.96);
  backdrop-filter:blur(22px);
  opacity:0;pointer-events:none;
  transition:opacity 0.35s cubic-bezier(.2,.8,.2,1);
}
.player-overlay.open{opacity:1;pointer-events:all}

.player-overlay-inner{
  --player-gutter:12px;
  display:flex;flex-direction:column;
  height:100%;max-width:1344px;width:100%;margin:0 auto;
  padding:var(--player-gutter) var(--player-gutter) 24px;
  overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.player-overlay-inner::-webkit-scrollbar{display:none;width:0;height:0}

.player-close{
  position:fixed;top:16px;right:24px;z-index:6;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border-strong);
  background:rgba(218,230,243,0.04);color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:18px;transition:.2s;
}
.player-close:hover{background:rgba(74,150,226,0.12);border-color:var(--gold);color:var(--gold-2)}

.player-video-wrap{
  position:relative;background:#000;border-radius:16px;overflow:hidden;
  width:100%;max-width:1320px;margin:0 auto;
  border:1px solid var(--border);flex-shrink:0;
  box-shadow:0 0 0 1px rgba(218,230,243,.02) inset,0 32px 80px rgba(0,0,0,.7),0 0 70px rgba(74,150,226,.05);
  aspect-ratio:16/9;
  outline:1px solid rgba(74,150,226,.08);outline-offset:4px;
}
#playerVideo{width:100%;height:100%;display:block;object-fit:contain;position:absolute;inset:0}
.player-main-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;align-items:start;max-width:1320px;margin:0 auto;width:100%}
.player-main-layout .player-video-wrap{max-width:none;margin:0}
.chat-room{display:flex;flex-direction:column;height:520px;min-height:520px;max-height:520px;align-self:start;border:1px solid var(--border-strong);border-radius:18px;background:linear-gradient(150deg,rgba(218,230,243,.08),rgba(218,230,243,.025));overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.22)}
.chat-head{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:13px 16px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2)}
.chat-online{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:9px;font-weight:400;letter-spacing:0;text-transform:none}
.chat-online::before{content:'';width:6px;height:6px;border-radius:50%;background:#6bb5ff;box-shadow:0 0 7px #6bb5ff}
.chat-online.connecting::before{background:#8ac0f6;box-shadow:0 0 7px #8ac0f6;animation:breathe 1.2s ease-in-out infinite}
.chat-online.online::before{background:#6bb5ff;box-shadow:0 0 7px #6bb5ff}
.chat-online.offline::before{background:#6bb5ff;box-shadow:0 0 7px #6bb5ff}
.chat-typing{min-height:0;padding:0 14px;color:var(--muted);font-family:var(--mono);font-size:9px;line-height:1.2;opacity:0;transition:opacity .18s,padding .18s}
.chat-typing.show{min-height:22px;padding-top:5px;padding-bottom:4px;opacity:1}
.chat-typing-dots{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.chat-typing-dots i{width:4px;height:4px;border-radius:50%;background:var(--gold-2);animation:typingDot 1s ease-in-out infinite}
.chat-typing-dots i:nth-child(2){animation-delay:.15s}.chat-typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat-messages{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:11px;scrollbar-width:thin;scrollbar-color:rgba(74,150,226,.45) transparent;scroll-behavior:smooth}
.chat-messages::-webkit-scrollbar{width:5px}
.chat-messages::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-2),var(--gold-dark));border-radius:99px}
.chat-message{display:flex;width:100%;gap:9px;align-items:flex-end;font-size:11px;line-height:1.5;color:var(--cream);word-break:break-word;animation:chatBubbleIn .22s ease-out}
.chat-avatar{width:30px;height:30px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--gold-2),var(--gold-dark));color:#040f1a;font-family:var(--mono);font-size:10px;font-weight:900;box-shadow:0 5px 14px rgba(74,150,226,.18)}
.chat-message strong{display:block;font-family:var(--mono);font-size:9px;color:var(--gold-2);margin:0 0 4px 3px;letter-spacing:.03em}
.chat-message p{width:fit-content;max-width:min(88%,430px);padding:10px 13px;border-radius:6px 16px 16px 16px;background:linear-gradient(135deg,#4d9eef,#0f63b8);border:1px solid rgba(183,219,255,.56);box-shadow:0 8px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .18s,box-shadow .18s}
.chat-message.is-other{align-self:flex-start;max-width:92%;flex-direction:row}
.chat-message.is-other>div{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start}
.chat-message.is-other .chat-avatar{background:linear-gradient(145deg,#6bb5ff,#19497a);color:#051220}
.chat-message.is-other strong{color:#8ebae7}
.chat-message.is-mine{align-self:flex-end;max-width:92%;flex-direction:row-reverse}
.chat-message.is-mine>div{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-end}
.chat-message.is-mine .chat-avatar{background:linear-gradient(145deg,#6bb5ff,#0f63b8);color:#fff}
.chat-message.is-mine strong{margin:0 3px 4px 0;color:#b7dbff}
.chat-message.is-mine p{border-radius:16px 6px 16px 16px;background:linear-gradient(135deg,#1978d7,#0d4d8e);border-color:rgba(183,219,255,.58);color:#fff;box-shadow:0 9px 22px rgba(15,99,183,.28),inset 0 1px 0 rgba(255,255,255,.16)}
.chat-message.is-mine p::selection{background:rgba(255,255,255,.32);color:#fff}
.chat-message.is-other p::selection{background:rgba(142,186,231,.30);color:#fff}
.chat-message:hover p{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}
@keyframes chatBubbleIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes chatEmojiPop{0%{opacity:0;transform:translateY(18px) scale(.35) rotate(-12deg);filter:blur(3px)}55%{opacity:1;transform:translateY(-6px) scale(1.22) rotate(4deg);filter:blur(0)}78%{transform:translateY(2px) scale(.94) rotate(-2deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes chatEmojiGlow{0%,100%{text-shadow:0 0 4px rgba(138,192,246,.25),0 0 0 transparent}50%{text-shadow:0 0 10px rgba(138,192,246,.95),0 0 24px rgba(74,150,226,.65)}}
@keyframes chatEmojiSparkle{0%{opacity:0;transform:scale(.4) rotate(0)}35%{opacity:1}100%{opacity:0;transform:scale(1.25) rotate(35deg)}}
.chat-message.emoji-only p{position:relative;padding:8px 12px;background:linear-gradient(135deg,rgba(74,150,226,.16),rgba(218,230,243,.06));border-color:rgba(138,192,246,.42);font-size:30px;line-height:1.05;letter-spacing:2px;animation:chatEmojiPop .62s cubic-bezier(.2,.9,.3,1.25),chatEmojiGlow 1.8s ease-in-out .62s 2;will-change:transform,filter}
.chat-message.emoji-only p::before,.chat-message.emoji-only p::after{position:absolute;pointer-events:none;color:var(--gold-2);font-size:12px;animation:chatEmojiSparkle .9s ease-out .18s both}
.chat-message.emoji-only p::before{content:'✦';top:-8px;right:-7px}
.chat-message.emoji-only p::after{content:'✧';bottom:-8px;left:-7px;animation-delay:.32s}
.chat-message.emoji-only .chat-avatar{animation:chatEmojiPop .48s ease-out both}
.chat-message.emoji-only strong{opacity:.78}

.chat-empty{margin:auto;text-align:center;color:var(--muted);font-family:var(--mono);font-size:10px;line-height:1.5}
.chat-form{position:relative;display:flex;gap:7px;padding:11px;border-top:1px solid var(--border);background:rgba(0,0,0,.12)}
.chat-form input{min-width:0;flex:1;width:100%;padding:10px 11px;border:1px solid var(--border);border-radius:9px;background:rgba(0,0,0,.25);color:var(--text);font-size:11px;outline:none}
.chat-form input:focus{border-color:var(--gold)}
.chat-form button{width:36px;flex:0 0 36px;border:0;border-radius:9px;background:var(--gold);color:#040f1a;font-weight:900;cursor:pointer;transition:.2s}
.chat-form button:hover{background:var(--gold-2);transform:translateY(-1px)}

.chat-emoji-btn{font-size:18px;line-height:1;background:rgba(218,230,243,.08)!important;color:var(--gold-2)!important;border:1px solid var(--border)!important}
.chat-emoji-btn[aria-expanded="true"]{background:var(--gold)!important;color:#040f1a!important;border-color:var(--gold)!important}
.emoji-picker{position:absolute;right:11px;bottom:58px;z-index:10;width:min(276px,calc(100% - 22px));padding:10px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;border:1px solid var(--border-strong);border-radius:14px;background:rgba(7,13,20,.97);box-shadow:0 18px 45px rgba(0,0,0,.48);backdrop-filter:blur(18px);opacity:0;transform:translateY(6px) scale(.98);pointer-events:none;transition:.16s ease}
.emoji-picker.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.emoji-picker button{width:28px;height:28px;padding:0!important;background:transparent!important;color:var(--text)!important;border:0!important;border-radius:7px;font-size:19px;line-height:1;cursor:pointer}
.emoji-picker button:hover{background:rgba(74,150,226,.18)!important;transform:none!important}
@media(max-width:420px){.emoji-picker{grid-template-columns:repeat(7,1fr)}.emoji-picker button{width:30px;height:30px}}
.username-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,10,15,.58);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:.22s}
.username-modal.open{opacity:1;pointer-events:auto}
.username-card{width:min(310px,100%);padding:18px;border:1px solid var(--border-strong);border-radius:15px;background:var(--pitch-2);box-shadow:0 20px 55px rgba(0,0,0,.42)}
.username-card h3{font-family:var(--display);font-size:21px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--cream);margin-bottom:5px}
.username-card p{color:var(--muted);font-size:11px;line-height:1.5;margin-bottom:12px}
.username-card input{width:100%;padding:10px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);outline:none;font-size:12px}
.username-card input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(74,150,226,.12)}
.username-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}
.username-actions button{padding:8px 13px;border:0;border-radius:999px;font-size:10px;font-weight:800;cursor:pointer}
.username-save{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#040f1a}
.username-cancel{background:transparent;border:1px solid var(--border)!important;color:var(--muted)}

.player-idle{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;pointer-events:none;transition:opacity .3s;padding:0 18px;text-align:center;
}
.player-idle-ring{
  width:60px;height:60px;border-radius:50%;
  border:1px dashed var(--border-strong);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.player-idle-ring svg{width:20px;height:20px;fill:var(--gold);opacity:0.8}
.player-idle-label{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.08em;text-transform:uppercase;line-height:1.5}

.player-controls{padding:16px 0 0;display:flex;flex-direction:column;gap:14px;flex-shrink:0}

.server-selector-section{
  background:linear-gradient(135deg,rgba(74,150,226,0.14),rgba(74,150,226,0.035));
  border:1px solid var(--border-strong);
  border-radius:18px;padding:18px;max-width:980px;width:100%;margin:20px auto 2px;
  box-shadow:0 16px 42px rgba(0,0,0,.22),inset 0 1px 0 rgba(138,192,246,.08);
}
.server-selector-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:12px;font-weight:700;
}
.server-dropdown-wrap{position:relative}
.server-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.server-card{position:relative;display:flex;flex-direction:column;gap:6px;min-height:68px;padding:12px 13px;text-align:left;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.28);color:var(--text);cursor:pointer;transition:.22s}
.server-card:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(74,150,226,.09)}
.server-card.active{border-color:var(--gold);background:linear-gradient(135deg,rgba(74,150,226,.22),rgba(74,150,226,.07));box-shadow:0 8px 24px rgba(74,150,226,.14),inset 0 0 0 1px rgba(138,192,246,.12)}
.server-card-name{font-family:var(--mono);font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.server-card-meta{font-family:var(--mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.server-card-check{position:absolute;top:10px;right:10px;width:16px;height:16px;border-radius:50%;border:1px solid var(--border-strong);color:transparent;font-size:10px;display:flex;align-items:center;justify-content:center}
.server-card.active .server-card-check{background:var(--gold);border-color:var(--gold);color:#040f1a}
.server-dropdown{
  display:none;width:100%;padding:8px 12px;background:rgba(0,0,0,.5);border:1px solid var(--border-strong);
  border-radius:8px;color:var(--text);font-family:var(--mono);font-size:11px;font-weight:600;
  cursor:pointer;transition:all .25s;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336a8ff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:16px;
  padding-right:32px;
}
.server-dropdown:hover{border-color:var(--gold);background-color:rgba(0,0,0,.6)}
.server-dropdown:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(74,150,226,.12)}
.server-dropdown option{background:#0b1520;color:var(--text)}

.server-info{
  display:flex;align-items:center;gap:6px;margin-top:5px;padding:5px 8px;
  background:rgba(74,150,226,0.06);border-radius:6px;font-size:10px;
}
.server-info-dot{width:4px;height:4px;border-radius:50%;background:var(--gold-2);flex-shrink:0}
.server-info-text{color:var(--muted);font-family:var(--mono)}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(11,14,18,.9);backdrop-filter:blur(18px);border:1px dashed var(--border-strong);padding:13px 22px;border-radius:10px;font-family:var(--mono);font-size:12px;font-weight:700;opacity:0;transition:.3s;z-index:999;pointer-events:none;max-width:min(90vw,420px);text-align:center;box-shadow:var(--shadow);color:var(--cream)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

html[data-theme="light"]{
  color-scheme:light;
  --gold:#d71929;--gold-2:#ff4f5e;--gold-dark:#99000d;--gold-glow:rgba(215,25,41,0.34);
  --pitch:#fff0f1;--pitch-2:#ffe1e3;--pitch-3:#ffc7cc;
  --cream:#250407;--cream-dim:#541016;
  --surface:rgba(215,25,41,0.085);--surface-2:rgba(25,120,215,0.13);
  --border:rgba(25,120,215,0.25);--border-strong:rgba(25,120,215,0.46);
  --text:#240407;--muted:#704246;--muted-2:#9b5f64;
  --shadow:0 26px 80px rgba(0,75,150,0.20);--shadow-gold:0 18px 70px rgba(25,120,215,0.25);
  --glass:linear-gradient(150deg,rgba(255,255,255,0.82),rgba(225,240,255,0.76));
}
html[data-theme="light"] body{
  color:var(--text);
  background:
    radial-gradient(ellipse 60% 40% at 15% -10%,rgba(215,25,41,0.25),transparent 42%),
    radial-gradient(ellipse 55% 38% at 88% 0%,rgba(255,79,94,0.28),transparent 40%),
    radial-gradient(ellipse 70% 50% at 50% 100%,rgba(199,227,255,0.90),transparent 62%),
    linear-gradient(180deg,#fff3f4 0%,#ffe3e5 45%,#fff6f7 100%);
}
html[data-theme="light"] body::before{background-image:none}
html[data-theme="light"] body::after{
  background:
    conic-gradient(from 200deg at 6% 0%,rgba(215,25,41,0.17),transparent 22%),
    conic-gradient(from 340deg at 94% 0%,rgba(255,79,94,0.16),transparent 22%);
}
html[data-theme="light"] .nav{
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,225,227,.70));
  border-color:rgba(25,120,215,.30);
  box-shadow:0 18px 55px rgba(0,75,150,.20),0 0 0 1px rgba(25,120,215,.08) inset,0 1px 0 rgba(255,255,255,.95) inset;
}
html[data-theme="light"] .match-card,
html[data-theme="light"] .h-card,
html[data-theme="light"] .news-card{
  background:var(--glass);box-shadow:0 12px 34px rgba(150,0,12,0.10);
}
html[data-theme="light"] .match-card{
  border-color:rgba(215,25,41,.22);box-shadow:0 12px 30px rgba(150,0,12,.10),0 1px 0 rgba(255,255,255,.86) inset;
}
html[data-theme="light"] .match-card:hover,
html[data-theme="light"] .h-card:hover,
html[data-theme="light"] .news-card:hover{
  box-shadow:0 20px 48px rgba(150,0,12,.20),0 0 28px rgba(215,25,41,.16);
}
html[data-theme="light"] .nav-cta,
html[data-theme="light"] .tab.active{color:#fff}
html[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.70);color:var(--text)}
html[data-theme="light"] .toolbar{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,225,227,.62));box-shadow:0 14px 34px rgba(20,70,120,.18),0 0 0 1px rgba(25,120,215,.08) inset,0 1px 0 rgba(255,255,255,.88) inset}
html[data-theme="light"] .tab:hover:not(.active){background:rgba(215,25,41,.10);color:var(--gold)}
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .player-close:hover{background:rgba(215,25,41,.12);color:var(--gold);border-color:var(--gold)}
html[data-theme="light"] .team-logo,
html[data-theme="light"] .match-score{background:rgba(255,255,255,.78)}
html[data-theme="light"] .match-score{color:var(--gold)}
html[data-theme="light"] .live-badge{background:rgba(215,25,41,.12);color:var(--gold)}
html[data-theme="light"] .h-thumb,
html[data-theme="light"] .news-img-placeholder{background:linear-gradient(135deg,rgba(215,25,41,.16),rgba(255,255,255,.68))}
html[data-theme="light"] .h-play svg{fill:#fff}
html[data-theme="light"] .player-overlay{background:rgba(255,240,241,.96)}
html[data-theme="light"] .username-modal{background:rgba(255,240,241,.58)}
html[data-theme="light"] .username-card{background:#fff;color:var(--text);box-shadow:0 20px 55px rgba(150,0,12,.20)}
html[data-theme="light"] .username-card input{background:rgba(255,255,255,.85);color:var(--text)}
html[data-theme="light"] .player-video-wrap{
  border-color:rgba(215,25,41,.28);outline-color:rgba(215,25,41,.16);
  box-shadow:0 26px 70px rgba(0,75,150,.20),0 0 64px rgba(25,120,215,.12);
}
html[data-theme="light"] .player-close{background:rgba(255,255,255,.72);color:var(--muted)}
html[data-theme="light"] .server-selector-section{background:linear-gradient(135deg,rgba(215,25,41,.14),rgba(255,255,255,.68))}
html[data-theme="light"] .server-dropdown{
  background-color:rgba(255,255,255,.88);color:var(--text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336a8ff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
html[data-theme="light"] .server-dropdown:hover{background-color:#fff}
html[data-theme="light"] .server-dropdown option{background:#fff0f1;color:var(--text)}
html[data-theme="light"] .server-info{background:rgba(215,25,41,.09)}
html[data-theme="light"] .toast{background:rgba(255,240,241,.96);color:var(--text);box-shadow:0 16px 50px rgba(150,0,12,.20)}
html[data-theme="dark"] .chat-message.is-other p{
  background:linear-gradient(135deg,#4d9eef,#0f63b8);
  border-color:rgba(183,219,255,.56);color:#fff;
}
html[data-theme="dark"] .chat-message.is-mine p{
  background:linear-gradient(135deg,#1978d7,#0d4d8e);
  border-color:rgba(183,219,255,.56);color:#fff;
}
html[data-theme="dark"] .chat-message.emoji-only p{
  background:linear-gradient(135deg,rgba(74,150,226,.20),rgba(18,36,55,.72));
  border-color:rgba(138,192,246,.50);
}
html[data-theme="light"] .chat-message.is-other p{
  background:linear-gradient(135deg,#ffd6d9,#ffb8be);
  border-color:rgba(215,25,41,.30);color:#5a0b12;
  box-shadow:0 8px 18px rgba(183,15,29,.16),inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] .chat-message.is-mine p{
  background:linear-gradient(135deg,#ef4d5a,#d71929);
  border-color:rgba(139,0,12,.34);color:#fff;
  box-shadow:0 9px 22px rgba(183,15,29,.20),inset 0 1px 0 rgba(255,255,255,.30);
}
html[data-theme] .chat-message.is-other .chat-avatar,
html[data-theme] .chat-message.is-mine .chat-avatar{
  background:linear-gradient(145deg,#6bb5ff,#0f63b8);
  color:#fff;
}

html[data-theme="dark"] .chat-message.is-other strong{color:#b7dbff}
html[data-theme="light"] .chat-message.is-other strong{color:#99000d}
html[data-theme="light"] .chat-message.is-other strong{color:#99000d}
html[data-theme="light"] .chat-message.is-mine strong{color:#99000d}
html[data-theme="light"] .chat-message.emoji-only p{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,150,159,.68));
  border-color:rgba(25,120,215,.30);
}


@media(min-width:721px){
  .chat-room{height:380px;min-height:380px;max-height:380px}
}

@media(max-width:720px){
  .nav{width:calc(100% - 20px);top:8px;padding:10px 10px 10px 16px}
  .nav-logo{font-size:22px}
  .nav-cta{padding:10px 14px;font-size:12px}
  .live-section{padding:0 16px 60px}
  .matches-grid{grid-template-columns:1fr}
  .match-card{min-height:154px;padding:12px 14px}
  .team-logo{width:50px;height:50px}
  .team-name{font-size:11px}
  .match-score{font-size:24px;min-width:58px;padding:3px 9px}
  .ad-slider{height:218px}
  
  .ad-title{font-size:15px}
  .ad-sponsor-inner{gap:10px}
  .ad-banner{padding:8px}
  .toolbar{top:66px;display:flex;gap:5px;padding:5px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .toolbar::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;min-width:112px;padding:11px 12px;font-size:10px;letter-spacing:.04em}
  .tab-index{font-size:8px}
  .player-main-layout{display:flex;flex-direction:column;gap:12px}
  .chat-room{height:auto;min-height:260px;max-height:none;align-self:stretch}
  .chat-messages{max-height:210px}
  .chat-form{padding:9px}
  .server-selector-section{padding:14px;margin-top:14px}
  .server-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .server-card{min-height:64px;padding:10px}
  .news-img,.news-img-placeholder{height:160px}
  .news-detail-wrap.visible{padding:4px 0 18px}
  .news-detail-title{font-size:25px}
  .news-detail-desc{font-size:13px;line-height:1.75}
  .kozin-live-card{min-height:220px}
  .kozin-live-card-content{padding:22px}
  .kozin-live-title{font-size:34px}
  .h-teams-row{padding:0 12px}
  .h-team{min-width:68px}
  .h-team-logo{width:50px;height:50px}
  .h-score{font-size:23px;padding:3px 7px}
  .highlight-subnav{width:100%;justify-content:center}
  .highlight-subtab{flex:1;padding:9px 12px}
}
@media(max-width:480px){
  .toolbar{position:sticky;top:66px;z-index:20}
  .theme-text{display:none}
  .theme-toggle{width:40px;padding:0}
  .nav-actions{gap:6px}
  .ad-sponsor-note{display:none}
}
@media(max-width:380px){
  .cta-text{display:none}
  .nav-cta{padding:10px 12px;gap:0}
}

@media(max-width:720px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .live-section{padding-bottom:calc(92px + env(safe-area-inset-bottom));position:relative;z-index:2}
  .contact-footer{padding-bottom:calc(132px + env(safe-area-inset-bottom));margin-bottom:0}
  .toolbar{
    position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));top:auto;
    z-index:1000;display:flex;align-items:stretch;gap:6px;margin:0;padding:7px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    border:1px solid rgba(255,255,255,.28);border-radius:24px;
    background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
    box-shadow:0 18px 55px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.08) inset,0 1px 0 rgba(255,255,255,.32) inset;
    backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  }
  .toolbar::before{
    content:'';position:absolute;inset:1px;border-radius:22px;pointer-events:none;
    background:linear-gradient(105deg,rgba(255,255,255,.22),transparent 30%,transparent 70%,rgba(255,255,255,.10));
    opacity:.8;
  }
  .toolbar::-webkit-scrollbar{display:none}
  .tab{
    position:relative;z-index:1;flex:1 0 108px;min-width:108px;min-height:46px;padding:10px 12px;
    border:1px solid transparent;border-radius:16px;background:rgba(255,255,255,.045);
    color:var(--muted);font-size:10px;letter-spacing:.04em;
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset;transition:.22s ease;
  }
  .tab:hover:not(.active){background:rgba(255,255,255,.10);color:var(--cream);transform:none}
  .tab.active{
    background:linear-gradient(135deg,rgba(138,192,246,.92),rgba(74,150,226,.72));
    border-color:rgba(255,255,255,.38);color:#040f1a;
    box-shadow:0 8px 22px rgba(74,150,226,.28),0 1px 0 rgba(255,255,255,.55) inset;
    transform:translateY(-1px);
  }
  html[data-theme="light"] .toolbar{
    border-color:rgba(215,25,41,.42);
    background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(225,240,255,.78));
    box-shadow:0 18px 48px rgba(0,52,105,.28),0 0 0 1px rgba(25,120,215,.12) inset,0 1px 0 rgba(255,255,255,.96) inset;
  }
  html[data-theme="light"] .toolbar::before{background:linear-gradient(105deg,rgba(255,255,255,.65),transparent 32%,transparent 70%,rgba(255,255,255,.34))}
  html[data-theme="light"] .tab{background:rgba(255,255,255,.58);border-color:rgba(215,25,41,.20);color:#704246;box-shadow:0 1px 0 rgba(255,255,255,.86) inset,0 2px 8px rgba(0,75,150,.06)}
  html[data-theme="light"] .tab:hover:not(.active){background:rgba(255,255,255,.82);color:#250407}
  html[data-theme="light"] .tab.active{background:linear-gradient(135deg,#ff717d,#c80f1e);border-color:rgba(139,0,12,.35);color:#fff;box-shadow:0 8px 22px rgba(215,25,41,.38),0 1px 0 rgba(255,255,255,.60) inset}
}

@media(max-width:380px){
  .ad-slider{height:194px}
  .toolbar{left:8px;right:8px;gap:4px;padding:6px}
  .tab{flex-basis:96px;min-width:96px;padding-left:8px;padding-right:8px;font-size:9px}
}

.ad-slider.is-single{height:auto}
.ad-slider.is-single .ad-slide{position:relative;opacity:1;pointer-events:auto}
.ad-slider.is-single .ad-arrow,
.ad-slider.is-single .ad-dots{display:none}
.native-banner-wrap{
  width:100%;max-width:100%;padding:14px 16px 16px;text-align:center;overflow:hidden;
}
.native-banner-label{
  margin-bottom:10px;color:var(--muted-2);font-family:var(--mono);font-size:8.5px;
  letter-spacing:.10em;text-transform:uppercase;
}
.native-banner-slot{min-height:1px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.native-banner-slot script{display:none}
html[data-theme="light"] .native-banner-wrap{background:transparent}
@media(max-width:520px){
  .native-banner-wrap{padding:12px 10px 13px}
}

.player-ad-label{
  text-align:center;margin:16px auto 6px;color:var(--muted-2);font-family:var(--mono);
  font-size:8.5px;letter-spacing:.10em;text-transform:uppercase;
}
.player-ad-slot{
  width:100%;min-height:76px;padding:8px 0 2px;border-top:1px solid var(--border);
}
.player-ad-slot .ad-banner-inner{max-width:100%;overflow:hidden;border-radius:8px;}

.native-banner-slot{min-height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.native-banner-slot script{display:none}

:root{
  --chat-bubble-bg:linear-gradient(135deg,#4d9eef,#0f63b8);
  --chat-bubble-border:rgba(183,219,255,.56);
  --chat-bubble-text:var(--text);
  --chat-bubble-shadow:0 8px 18px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.08);
}
.chat-message.is-other p,
.chat-message.is-mine p{
  background:var(--chat-bubble-bg);
  border-color:var(--chat-bubble-border);
  color:var(--chat-bubble-text);
  box-shadow:var(--chat-bubble-shadow);
}

@media (min-width:721px) and (max-width:1020px){
  .player-overlay-inner{--player-gutter:8px}
  .player-main-layout{grid-template-columns:minmax(0,1fr) 280px;gap:12px}
  .chat-room{height:440px;min-height:440px;max-height:440px}
}
@media (max-width:720px){
  .player-overlay-inner{
    --player-gutter:8px;
    padding:var(--player-gutter) var(--player-gutter) calc(18px + env(safe-area-inset-bottom));
  }
  .player-close{top:12px;right:16px;width:40px;height:40px}
  .player-video-wrap{border-radius:12px;outline-offset:2px}
  .chat-room{width:100%;min-height:270px;border-radius:14px}
  .chat-head{min-height:48px;padding:11px 13px}
  .chat-messages{padding:12px 10px;gap:10px}
  .chat-message{gap:7px;font-size:12px}
  .chat-message p{max-width:calc(100vw - 92px);padding:9px 11px}
  .chat-avatar{width:28px;height:28px;border-radius:9px;font-size:9px}
  .chat-form{gap:6px;padding:9px 8px calc(9px + env(safe-area-inset-bottom));}
  .chat-form input{font-size:16px;line-height:1.25;padding:10px 10px;}
  .chat-form button{width:40px;height:40px;flex-basis:40px;min-width:40px}
  .chat-emoji-btn{font-size:20px}
  .emoji-picker{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(78px + env(safe-area-inset-bottom));
    width:auto;
    max-height:min(60dvh,360px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:10px;
    grid-template-columns:repeat(8,minmax(0,1fr));
    scrollbar-width:thin;
    scrollbar-color:rgba(74,150,226,.55) transparent;
  }
  .emoji-picker::-webkit-scrollbar{width:5px}
  .emoji-picker::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-2),var(--gold-dark));border-radius:99px}
  .emoji-picker button{width:100%;height:34px;font-size:20px}
  .chat-message.emoji-only p{font-size:28px}
}
@media (max-width:380px){
  .player-overlay-inner{
    --player-gutter:6px;
    padding:var(--player-gutter) var(--player-gutter) calc(18px + env(safe-area-inset-bottom));
  }
  .player-main-layout{gap:9px}
  .chat-room{min-height:250px}
  .chat-head{padding-left:11px;padding-right:11px}
  .chat-messages{padding:10px 8px;gap:8px}
  .chat-message p{max-width:calc(100vw - 78px);padding:8px 10px}
  .chat-form{gap:4px;padding-left:6px;padding-right:6px}
  .chat-form button{width:38px;height:38px;flex-basis:38px;min-width:38px}
  .emoji-picker{left:8px;right:8px;bottom:calc(74px + env(safe-area-inset-bottom));grid-template-columns:repeat(7,minmax(0,1fr));padding:8px;max-height:min(58dvh,320px)}
  .emoji-picker button{height:32px;font-size:19px}
  .chat-message.emoji-only p{font-size:26px}
}
html[data-theme] .chat-room{
  position:relative;border:0;border-radius:22px;
  background:
    linear-gradient(160deg,rgba(218,230,243,.10),rgba(218,230,243,.02)) padding-box,
    linear-gradient(160deg,var(--gold-2),transparent 40%,var(--gold-dark)) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 26px 70px rgba(0,0,0,.35),0 0 40px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme] .chat-head{
  min-height:56px;padding:14px 18px;font-size:11px;letter-spacing:.14em;
  background:linear-gradient(180deg,rgba(74,150,226,.14),transparent);
  border-bottom:1px solid var(--border);
}
html[data-theme="light"] .chat-head{background:linear-gradient(180deg,rgba(215,25,41,.10),transparent)}
html[data-theme] .chat-head > span:first-child{display:flex;align-items:center;gap:8px}
html[data-theme] .chat-head > span:first-child::before{
  content:'';width:8px;height:8px;border-radius:50%;background:#4da6ff;
  box-shadow:0 0 12px #4da6ff;animation:breathe 1.2s ease-in-out infinite;
}
html[data-theme] .chat-online{
  padding:4px 10px;border-radius:999px;border:1px solid var(--border-strong);
  background:rgba(0,0,0,.18);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
html[data-theme="light"] .chat-online{background:rgba(255,255,255,.7)}
html[data-theme] .chat-messages{padding:16px 14px;gap:14px}
html[data-theme] .chat-message{gap:10px;font-size:12px}
html[data-theme] .chat-avatar{
  width:32px;height:32px;border-radius:50%;font-size:11px;
  border:2px solid rgba(255,255,255,.35);
  box-shadow:0 0 0 2px var(--border-strong),0 6px 16px rgba(0,0,0,.28);
}
html[data-theme] .chat-message strong{
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.95;margin-bottom:5px;
}
html[data-theme] .chat-message p{
  font-size:12.5px;line-height:1.55;padding:10px 14px;
  max-width:min(88%,430px);
}

html[data-theme] .chat-message.is-other p{
  border-radius:4px 18px 18px 18px;
  background:linear-gradient(145deg,rgba(218,230,243,.14),rgba(218,230,243,.05));
  border:1px solid rgba(138,192,246,.28);color:var(--cream);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="light"] .chat-message.is-other p{
  background:linear-gradient(145deg,#fff,#ffe6e8);
  border-color:rgba(215,25,41,.22);color:#3a070b;
  box-shadow:0 8px 20px rgba(150,0,12,.10),inset 0 1px 0 #fff;
}
html[data-theme] .chat-message.is-other strong{color:var(--gold-2)}
html[data-theme="light"] .chat-message.is-other strong{color:#99000d}
html[data-theme] .chat-message.is-mine p{
  border-radius:18px 4px 18px 18px;
  background:linear-gradient(135deg,#54a9ff 0%,#1978d7 55%,#0d4d8e 100%);
  border:1px solid rgba(214,234,255,.55);color:#fff;
  box-shadow:0 10px 26px rgba(25,120,215,.38),inset 0 1px 0 rgba(255,255,255,.28);
}
html[data-theme] .chat-message.is-mine strong{color:#b7dbff}
html[data-theme="light"] .chat-message.is-mine strong{color:#99000d}
html[data-theme] .chat-message.emoji-only p{
  background:transparent;border:0;box-shadow:none;backdrop-filter:none;
  font-size:34px;padding:2px 6px;
}

html[data-theme] .chat-typing.show{
  margin:0 14px 4px;padding:5px 12px;width:fit-content;border-radius:999px;
  background:rgba(74,150,226,.12);border:1px solid var(--border);
}

html[data-theme] .chat-form{
  gap:8px;padding:12px;align-items:center;
  border-top:1px solid var(--border);
  background:linear-gradient(0deg,rgba(0,0,0,.22),transparent);
}
html[data-theme="light"] .chat-form{background:linear-gradient(0deg,rgba(255,225,227,.7),transparent)}
html[data-theme] .chat-form input{
  height:42px;padding:0 16px;border-radius:999px;font-size:12.5px;
  background:rgba(0,0,0,.28);border:1px solid var(--border-strong);color:var(--text);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.18);transition:.2s;
}
html[data-theme="light"] .chat-form input{background:rgba(255,255,255,.9)}
html[data-theme] .chat-form input::placeholder{color:var(--muted-2)}
html[data-theme] .chat-form input:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow);
}
html[data-theme] .chat-form button{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-dark));
  color:#040f1a;font-size:15px;
  box-shadow:0 8px 20px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="light"] .chat-form button[type="submit"]{color:#fff}
html[data-theme] .chat-form button:hover{transform:translateY(-2px) scale(1.06)}
html[data-theme] .chat-form button:active{transform:scale(.94)}
html[data-theme] .chat-emoji-btn{
  background:rgba(218,230,243,.10)!important;color:var(--gold-2)!important;
  border:1px solid var(--border-strong)!important;box-shadow:none!important;
}
html[data-theme="light"] .chat-emoji-btn{background:rgba(255,255,255,.85)!important;color:var(--gold)!important}
html[data-theme] .emoji-picker{
  border-radius:18px;padding:12px;
  background:linear-gradient(160deg,rgba(14,23,32,.97),rgba(5,10,15,.97));
  border:1px solid var(--border-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 30px var(--gold-glow);
}
html[data-theme="light"] .emoji-picker{background:rgba(255,255,255,.98);box-shadow:0 24px 60px rgba(150,0,12,.22)}
html[data-theme] .chat-empty{
  padding:22px 18px;border:1px dashed var(--border-strong);border-radius:16px;
  background:var(--surface);font-size:11px;letter-spacing:.04em;
}
html[data-theme] .chat-empty::before{content:'💬';display:block;font-size:26px;margin-bottom:8px}
@media(max-width:720px){
  html[data-theme] .chat-room{border-radius:18px}
  html[data-theme] .chat-form input{font-size:16px;height:44px}
  html[data-theme] .chat-form button{width:44px;height:44px;flex-basis:44px}
}

html[data-theme] .chat-room{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:
    linear-gradient(160deg,rgba(14,23,32,.92),rgba(5,10,15,.96)) padding-box,
    linear-gradient(160deg,var(--gold-2),transparent 40%,var(--gold-dark)) border-box;
}
html[data-theme="light"] .chat-room{
  background:
    linear-gradient(160deg,#fff,#ffe6e8) padding-box,
    linear-gradient(160deg,var(--gold-2),transparent 40%,var(--gold-dark)) border-box;
}
html[data-theme] .chat-form .emoji-picker{
  position:absolute;left:12px;right:12px;bottom:68px;width:auto;
  max-height:224px;overflow-y:auto;overscroll-behavior:contain;
  padding:10px;gap:4px;
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  scrollbar-width:thin;scrollbar-color:rgba(74,150,226,.55) transparent;
}

html[data-theme] .chat-form .emoji-picker button{
  width:100%;height:32px;min-width:0;flex:none;padding:0!important;
  border-radius:8px;border:0!important;box-shadow:none!important;
  background:transparent!important;color:var(--text)!important;
  font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
html[data-theme] .chat-form .emoji-picker button:hover{
  background:rgba(74,150,226,.20)!important;transform:scale(1.15);
}
html[data-theme] .chat-form .emoji-picker button:active{transform:scale(.92)}

@media(max-width:720px){
  html[data-theme] .chat-form .emoji-picker{
    position:fixed;left:12px;right:12px;
    bottom:calc(78px + env(safe-area-inset-bottom));
    max-height:min(52dvh,300px);
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
  html[data-theme] .chat-form .emoji-picker button{height:36px;font-size:21px}
}
@media(max-width:380px){
  html[data-theme] .chat-form .emoji-picker{
    left:8px;right:8px;grid-template-columns:repeat(7,minmax(0,1fr));
  }
}

@media(max-width:720px){
  html[data-theme] .chat-form .emoji-picker{
    position:absolute;
    left:8px;right:8px;width:auto;
    top:auto;
    bottom:calc(100% + 6px);
    max-height:180px;
  }
  html[data-theme] .chat-form .emoji-picker button{height:34px;font-size:20px}
}
@media(max-width:380px){
  html[data-theme] .chat-form .emoji-picker{
    bottom:calc(100% + 6px);
    max-height:160px;
  }
}

.live-section{max-width:1180px;padding:8px 24px 88px}
#liveInfo{max-width:1180px;margin:0 auto 10px;padding-left:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2)}
.toolbar{position:relative;top:auto;max-width:1180px;width:100%;margin:0 auto 24px;padding:6px;border-radius:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:rgba(4,8,13,.9);border:1px solid var(--border-strong);box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.tab{min-height:42px;padding:10px 12px;border-radius:9px;font-size:10px;letter-spacing:.1em}
.tab.active{transform:none}
.tab:hover:not(.active){transform:none}
.matches-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.match-card{min-height:188px;padding:15px 16px;border-radius:14px}
.match-card-top{margin-bottom:12px}
.team-logo{width:56px;height:56px}
.match-score{font-size:24px;min-width:66px}
.kozin-live-card{min-height:250px}
@media(max-width:900px){.matches-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .live-section{padding:4px 12px 70px}
  #liveInfo{font-size:9px;margin-bottom:8px}
  .toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:18px}
  .tab{min-height:40px;font-size:9px;padding:9px 7px}
  .matches-grid{grid-template-columns:1fr;gap:12px}
  .match-card{min-height:172px}
}

:root{--gold:#36a8ff;--gold-2:#72d5ff;--gold-dark:#2563eb;--gold-glow:rgba(54,168,255,.35);--pitch:#080d18;--pitch-2:#0e1627;--pitch-3:#17243d;--cream:#eef6ff;--cream-dim:#a8b8cc;--surface:rgba(117,160,210,.08);--surface-2:rgba(117,160,210,.14);--border:rgba(95,157,230,.22);--border-strong:rgba(67,174,255,.48);--text:#eef6ff;--muted:#91a5bd;--muted-2:#60748e;--shadow:0 24px 70px rgba(0,0,0,.58);--shadow-gold:0 18px 70px rgba(28,146,255,.2)}
html,body{background:#080d18}
body{background:radial-gradient(ellipse 75% 46% at 50% -8%,rgba(39,109,198,.28),transparent 58%),radial-gradient(ellipse 50% 45% at 95% 45%,rgba(67,161,255,.12),transparent 60%),linear-gradient(180deg,#080d18 0%,#0a1220 52%,#070b14 100%);font-family:Inter,system-ui,sans-serif}
body::before{background-image:linear-gradient(rgba(94,165,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(94,165,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 72%)}
body::after{background:radial-gradient(circle at 12% 12%,rgba(41,152,255,.16),transparent 23%),radial-gradient(circle at 88% 30%,rgba(84,169,255,.12),transparent 24%)}
.nav{max-width:1180px;margin:16px auto 0;border-radius:14px;padding:12px 16px 12px 20px;background:rgba(11,20,36,.82);border:1px solid rgba(91,168,255,.25);box-shadow:0 14px 38px rgba(0,0,0,.32),0 0 24px rgba(25,131,255,.08);backdrop-filter:blur(20px)}
.nav-logo{font-family:Inter,sans-serif;font-size:24px;font-weight:900;letter-spacing:.08em;color:#fff;line-height:1;text-transform:uppercase;white-space:nowrap}.nav-logo span{color:#1978d7;text-shadow:0 0 18px rgba(25,120,215,.45)}
.nav-cta{background:linear-gradient(135deg,#55c8ff,#2478ff);color:#03101d;border-radius:9px;padding:10px 16px;box-shadow:0 9px 24px rgba(34,136,255,.28)}
.theme-toggle{border-style:solid;background:rgba(71,139,218,.08)}
.ad-slider{height:270px;margin:20px auto 18px;border-radius:16px;border-color:rgba(80,165,255,.32);box-shadow:0 22px 65px rgba(0,0,0,.4),0 0 30px rgba(35,137,255,.08)}
.live-section{max-width:1180px;padding:10px 24px 96px}
#liveInfo{color:#69cfff;letter-spacing:.16em;font-size:10px}
.toolbar{background:rgba(10,19,34,.9);border-color:rgba(76,163,255,.35);border-radius:12px;box-shadow:0 14px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(125,199,255,.08)}
.tab{color:#8ea6c2}.tab.active{background:linear-gradient(135deg,#52c9ff,#287cff);color:#03101d;box-shadow:0 8px 22px rgba(37,139,255,.32)}
.matches-grid{gap:14px}.match-card{background:linear-gradient(145deg,rgba(18,36,61,.9),rgba(10,19,34,.88));border-color:rgba(77,156,235,.28);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(132,201,255,.08)}
.match-card:hover{border-color:#4dbbff;box-shadow:0 20px 44px rgba(0,0,0,.38),0 0 26px rgba(39,150,255,.16)}
.live-badge{background:rgba(65,160,255,.13);border-color:rgba(87,171,255,.45);color:#71b8ff}.live-dot2{background:#4ba5ff;box-shadow:0 0 10px #4ba5ff}
.team-logo{background:rgba(80,153,232,.10);border-color:rgba(89,177,255,.4)}.match-score{color:#7bd7ff;background:rgba(4,12,25,.55);border-color:rgba(68,174,255,.35)}
.kozin-live-card{border-color:rgba(77,177,255,.45);box-shadow:0 22px 58px rgba(0,0,0,.4),0 0 32px rgba(37,137,255,.1)}
.kozin-live-eyebrow,.kozin-live-cta{color:#071322}.kozin-live-cta{background:linear-gradient(135deg,#6cd7ff,#348aff)}
.mobile-nav{display:none}
@media(max-width:620px){.nav{width:calc(100% - 20px);margin-top:10px}.nav-logo{font-size:17px;letter-spacing:.06em}.nav-cta{padding:9px 11px;font-size:11px}.ad-slider{height:205px;margin-top:12px}.live-section{padding-left:12px;padding-right:12px;padding-bottom:118px}.mobile-nav{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90;height:64px;padding:5px;border:1px solid rgba(83,170,255,.32);border-radius:16px;background:rgba(9,17,31,.92);backdrop-filter:blur(20px);box-shadow:0 12px 32px rgba(0,0,0,.48)}.mobile-nav button{flex:1;border:0;background:transparent;color:#7187a2;border-radius:11px;font:700 9px Space Mono,monospace;letter-spacing:.06em;text-transform:uppercase}.mobile-nav button:first-child{color:#65cfff;background:rgba(54,168,255,.12)}.mobile-nav .nav-icon{display:block;font-size:19px;line-height:1.1;margin-bottom:3px}}
html[data-theme="light"]{--gold:#ff2d3e;--gold-2:#ee1628;--gold-dark:#c01523;--pitch:#ffeeef;--pitch-2:#ffe5e7;--cream:#26080a;--text:#26080a;--muted:#7f474c;--muted-2:#a37175;--border:rgba(214,37,52,.24);--border-strong:rgba(214,37,52,.42)}
html[data-theme="light"] body{background:linear-gradient(180deg,#ffeeef,#ffdcdf 58%,#fff5f6)}

.toolbar{display:flex;align-items:center;gap:7px;max-width:1180px;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:relative;top:auto;margin:0 auto 22px;padding:7px;border:1px solid rgba(83,170,255,.28);border-radius:13px;background:rgba(9,17,31,.88);box-shadow:0 12px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(145,215,255,.07);backdrop-filter:blur(18px)}
.toolbar::-webkit-scrollbar{display:none}
.tab{position:relative;flex:0 0 auto;min-width:128px;min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid transparent;border-radius:9px;background:transparent;color:#8197b2;font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:none;white-space:nowrap;transition:.2s ease}
.tab::before{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:6px;color:#6f88a6;font-size:13px;line-height:1}
.tab::before{font-family:'Font Awesome 6 Free';font-weight:900}.tab:nth-child(1)::before{content:'\f00a'}.tab:nth-child(2)::before{content:'\f144'}.tab:nth-child(3)::before{content:'\f04b';color:#58abff}.tab:nth-child(4)::before{content:'\f1ea'}
.tab:hover:not(.active){background:rgba(61,153,240,.10);color:#c5e8ff;transform:none}
.tab.active{background:linear-gradient(135deg,rgba(55,174,255,.28),rgba(38,103,230,.34));border-color:rgba(77,188,255,.5);color:#76d7ff;box-shadow:0 6px 18px rgba(24,126,239,.18),inset 0 1px 0 rgba(177,235,255,.12);transform:none}
.tab.active::before{color:#75d9ff}
@media(max-width:620px){.toolbar{margin:0 0 18px;padding:6px;border-radius:12px}.tab{min-width:112px;min-height:40px;padding:9px 13px;font-size:10px}.tab::before{width:16px;height:16px;font-size:12px}}
html[data-theme="light"] .toolbar{background:rgba(255,240,241,.9);border-color:rgba(214,37,52,.28);box-shadow:0 10px 25px rgba(31,103,173,.12)}
html[data-theme="light"] .tab{color:#945b60}.tab.active{color:#76d7ff}

.toolbar{display:none !important}

.desktop-rail{position:fixed;left:18px;top:50%;z-index:80;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;width:68px;padding:8px 6px;border:1px solid rgba(83,170,255,.25);border-radius:18px;background:rgba(8,16,29,.82);backdrop-filter:blur(20px);box-shadow:0 18px 42px rgba(0,0,0,.38),inset 0 1px 0 rgba(144,219,255,.07)}
.rail-item{position:relative;width:56px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;border-radius:12px;background:transparent;color:#7389a4;cursor:pointer;font:700 9px Inter,system-ui,sans-serif;letter-spacing:.02em;transition:.2s ease}
.rail-item:hover{color:#c7ebff;background:rgba(54,168,255,.1)}.rail-item.active{color:#72d5ff;background:linear-gradient(145deg,rgba(54,168,255,.2),rgba(42,93,219,.18));box-shadow:inset 0 0 0 1px rgba(91,193,255,.28),0 5px 16px rgba(31,125,245,.15)}
.rail-icon{font-size:18px;line-height:1;font-weight:400}.rail-icon i,.nav-icon i{font-style:normal}.rail-item i{position:absolute;top:10px;right:11px;width:6px;height:6px;border-radius:50%;background:#50a7ff;box-shadow:0 0 8px #50a7ff}
@media(min-width:621px){body{padding-left:84px}.live-section{max-width:1180px}.ad-slider{max-width:1180px}}
@media(max-width:620px){.desktop-rail{display:none}}
html[data-theme="light"] .desktop-rail{background:rgba(255,239,240,.9);border-color:rgba(214,37,52,.25);box-shadow:0 16px 36px rgba(31,103,173,.16)}
html[data-theme="light"] .rail-item{color:#975c61}.rail-item.active{color:#72d5ff}

@media(max-width:620px){
  body{padding-bottom:88px}
  .mobile-nav{position:fixed !important;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom)) !important;z-index:9999;display:flex !important}
}

@media(max-width:620px){
  .mobile-nav{gap:3px}
  .mobile-nav button{position:relative;min-width:0;padding:5px 2px;text-decoration:none;color:#7389a4;font:700 9px Inter,system-ui,sans-serif;letter-spacing:.02em}
  .mobile-nav button.active{color:#72d5ff;background:linear-gradient(145deg,rgba(54,168,255,.2),rgba(42,93,219,.18));box-shadow:inset 0 0 0 1px rgba(91,193,255,.28),0 5px 16px rgba(31,125,245,.15)}
  .mobile-nav button:hover{color:#c7ebff;background:rgba(54,168,255,.1)}
  .mobile-nav button:nth-child(2)::after{content:'';position:absolute;top:8px;right:calc(50% - 17px);width:6px;height:6px;border-radius:50%;background:#50a7ff;box-shadow:0 0 8px #50a7ff}
  .mobile-nav .nav-icon{font-size:20px;line-height:1;font-weight:400;margin-bottom:3px}
}

html[data-theme="dark"] .desktop-rail,html[data-theme="dark"] .mobile-nav{background:rgba(8,16,29,.88);border-color:rgba(83,170,255,.28);color:#eef6ff}
html[data-theme="dark"] .rail-item,html[data-theme="dark"] .mobile-nav button{color:#7389a4}
html[data-theme="dark"] .rail-item.active,html[data-theme="dark"] .mobile-nav button.active{color:#72d5ff;background:linear-gradient(145deg,rgba(54,168,255,.2),rgba(42,93,219,.18))}
html[data-theme="light"] .desktop-rail,html[data-theme="light"] .mobile-nav{background:rgba(255,239,240,.94);border-color:rgba(214,37,52,.28);box-shadow:0 16px 36px rgba(31,103,173,.16),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme="light"] .rail-item,html[data-theme="light"] .mobile-nav button{color:#975c61}
html[data-theme="light"] .rail-item.active,html[data-theme="light"] .mobile-nav button.active{color:#d11222;background:linear-gradient(145deg,rgba(255,54,71,.18),rgba(230,72,85,.16));box-shadow:inset 0 0 0 1px rgba(37,125,214,.28),0 5px 16px rgba(31,103,173,.12)}

.mobile-nav button:first-child:not(.active){background:transparent;box-shadow:none;color:#7389a4}
html[data-theme="light"] .mobile-nav button:first-child:not(.active){background:transparent;box-shadow:none;color:#975c61}

.ad-slider{position:relative;width:calc(100% - 48px);max-width:1180px;height:auto;aspect-ratio:3 / 1;margin:18px auto 22px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#080e16;box-shadow:0 18px 45px rgba(0,0,0,.38),0 0 24px rgba(38,137,255,.08);backdrop-filter:none}
.ad-slide{inset:0;background-position:center;background-size:cover}
.ad-slide::after{background:linear-gradient(90deg,rgba(4,10,20,.68),rgba(4,10,20,.16) 62%,transparent)}
.ad-kicker{color:#79d9ff}.ad-title{font-size:clamp(22px,3.2vw,42px)}.ad-caption{font-size:12px;color:rgba(237,248,255,.78)}
.ad-arrow{display:none;width:36px;height:36px;border:1px solid rgba(255,255,255,.2);background:rgba(10,14,28,.55);backdrop-filter:blur(6px);color:#fff}
.ad-arrow:hover{background:rgba(10,14,28,.8);border-color:rgba(255,255,255,.4);color:#fff}.ad-prev{left:12px}.ad-next{right:12px}
@media(hover:hover) and (pointer:fine){.ad-arrow{display:flex}}
.ad-dots{left:50%;bottom:12px;transform:translateX(-50%);gap:7px}.ad-dot{width:26px;height:5px;background:rgba(255,255,255,.35)}.ad-dot.active{width:34px;background:#fff}
.ad-slide-sponsor{background:linear-gradient(135deg,#0b1424,#111d35 60%,#0a1020)}
@media(max-width:620px){.ad-slider{width:calc(100% - 24px);margin:12px auto 16px;border-radius:12px;aspect-ratio:2.5 / 1}.ad-kicker{font-size:8px}.ad-title{font-size:22px}.ad-caption{font-size:10px}.ad-arrow{width:32px;height:32px}.ad-dots{bottom:8px}.ad-dot{width:20px;height:4px}.ad-dot.active{width:28px}}

/* Light mode top-edge fix */
html[data-theme="light"]{background:#ffeeef !important;color-scheme:light}
html[data-theme="light"] body{background:linear-gradient(180deg,#ffeeef 0%,#ffdcdf 58%,#fff5f6 100%) !important}
html[data-theme="light"] body::before,html[data-theme="light"] body::after{background:none !important;display:none}

/* Compact desktop ad height */
@media(min-width:621px){.ad-slider{aspect-ratio:3.6 / 1}}

/* Pale blue light-theme base */
html[data-theme="light"]{
  --gold:#d71929;--gold-2:#ef5b67;--gold-dark:#a60f1c;--gold-glow:rgba(215,25,41,.24);
  --pitch:#fff0f1;--pitch-2:#ffe1e3;--pitch-3:#ffd0d4;
  --cream:#2a080b;--cream-dim:#6f3e42;--surface:rgba(215,25,41,.07);--surface-2:rgba(25,120,215,.12);
  --border:rgba(20,101,183,.18);--border-strong:rgba(25,120,215,.38);--text:#2a080b;--muted:#7d5659;--muted-2:#a47a7d;
}
html[data-theme="light"]{background:#fff0f1 !important}
html[data-theme="light"] body{background:linear-gradient(180deg,#fff0f1 0%,#ffe1e3 56%,#fff7f8 100%) !important;color:#2a080b}
html[data-theme="light"] .nav{background:rgba(255,247,248,.88);border-color:rgba(215,25,41,.24);box-shadow:0 14px 36px rgba(0,75,150,.12)}
html[data-theme="light"] .nav-logo{color:#250407}
html[data-theme="light"] .nav-logo span{color:#d71929;text-shadow:0 0 18px rgba(215,25,41,.2)}
html[data-theme="dark"] .nav-logo{color:#ffffff}
html[data-theme="dark"] .nav-logo span{color:#4da6ff;text-shadow:0 0 18px rgba(77,166,255,.45)}
html[data-theme="light"] .desktop-rail,html[data-theme="light"] .mobile-nav{background:rgba(255,241,242,.94);border-color:rgba(215,25,41,.24);box-shadow:0 16px 36px rgba(0,75,150,.14),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme="light"] .rail-item,html[data-theme="light"] .mobile-nav button{color:#8a595d}
html[data-theme="light"] .rail-item.active,html[data-theme="light"] .mobile-nav button.active{color:#c71927;background:linear-gradient(145deg,rgba(239,91,103,.22),rgba(215,25,41,.13));box-shadow:inset 0 0 0 1px rgba(25,120,215,.28),0 5px 16px rgba(0,75,150,.12)}
html[data-theme="light"] .mobile-nav button:first-child:not(.active){color:#8a595d}
html[data-theme="light"] .ad-slider{border-color:rgba(215,25,41,.24);box-shadow:0 18px 45px rgba(150,0,12,.14)}

/* Remove remaining blue accents from light mode */
html[data-theme="light"] .nav-cta{background:linear-gradient(135deg,#ef5b67,#d71929 58%,#a60f1c);color:#fff;box-shadow:0 10px 26px rgba(150,0,12,.2)}
html[data-theme="light"] .theme-toggle{border-color:rgba(215,25,41,.35);background:rgba(215,25,41,.06);color:#b31320}
html[data-theme="light"] .theme-toggle:hover{background:rgba(215,25,41,.12);color:#a60f1c;border-color:#d71929}
html[data-theme="light"] #liveInfo{color:#c71927}
html[data-theme="light"] .match-card,html[data-theme="light"] .h-card,html[data-theme="light"] .news-card{background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,225,227,.78));border-color:rgba(25,120,215,.22);box-shadow:0 12px 30px rgba(0,75,150,.1),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme="light"] .match-card:hover,html[data-theme="light"] .h-card:hover,html[data-theme="light"] .news-card:hover{border-color:#d71929;box-shadow:0 18px 40px rgba(150,0,12,.16),0 0 22px rgba(215,25,41,.1)}
html[data-theme="light"] .team-logo{background:rgba(215,25,41,.06);border-color:rgba(215,25,41,.3);color:#c71927}
html[data-theme="light"] .match-score{color:#c71927;background:rgba(255,255,255,.8);border-color:rgba(215,25,41,.28)}
html[data-theme="light"] .kozin-live-card{border-color:rgba(215,25,41,.34);box-shadow:0 22px 55px rgba(150,0,12,.16)}
html[data-theme="light"] .kozin-live-cta{background:linear-gradient(135deg,#ef5b67,#d71929);color:#fff}
html[data-theme="light"] .ad-kicker{color:#d71929}
html[data-theme="light"] .ad-arrow{background:rgba(110,10,18,.58);border-color:rgba(215,25,41,.42);color:#fff}
html[data-theme="light"] .ad-dot.active{background:#d71929}
html[data-theme="light"] .ad-dot{background:rgba(215,25,41,.3)}
html[data-theme="light"] .ad-slide-sponsor{background:linear-gradient(135deg,#fff7f8,#ffe1e3 60%,#fff0f1)}

/* Compact match-card sizing */
.match-card{min-height:166px;padding:13px 14px;border-radius:14px}
.match-card-top{margin-bottom:9px;padding-bottom:7px}
.match-teams{gap:6px}
.team-logo{width:48px;height:48px;font-size:18px}
.match-score{font-size:23px;min-width:58px;padding:3px 8px;border-radius:9px}
.match-time{margin-top:7px;padding-top:6px}
@media(max-width:620px){
  .matches-grid{gap:10px}
  .match-card{min-height:154px;padding:11px 12px;border-radius:13px}
  .match-card-top{margin-bottom:8px;padding-bottom:6px}
  .team-logo{width:46px;height:46px;font-size:17px}
  .match-score{font-size:22px;min-width:56px;padding:3px 7px}
  .team-name{font-size:11px}
}
@media(max-width:380px){
  .match-card{min-height:146px;padding:10px 11px}
  .team-logo{width:42px;height:42px}
  .match-score{font-size:20px;min-width:52px;padding:2px 6px}
}

/* AESPORT-style compact Live card */
.kozin-live-card{min-height:190px;border-radius:14px;box-shadow:0 16px 38px rgba(0,0,0,.34),0 0 24px rgba(39,150,255,.10)}
.kozin-live-card::before{background:linear-gradient(90deg,rgba(5,12,24,.92),rgba(5,12,24,.48) 54%,rgba(5,12,24,.12)),linear-gradient(0deg,rgba(5,12,24,.62),transparent 64%)}
.kozin-live-card-content{padding:18px 20px;max-width:470px;justify-content:center}
.kozin-live-eyebrow{gap:7px;font-size:9px;letter-spacing:.12em;margin-bottom:7px;color:#72d5ff}
.kozin-live-dot{width:6px;height:6px}
.kozin-live-title{font-size:32px;line-height:1;letter-spacing:.35px}
.kozin-live-match{font-size:12px;margin-top:8px;color:rgba(255,255,255,.82)}
.kozin-live-cta{gap:7px;margin-top:14px;padding:8px 13px;border-radius:999px;font-size:9px;letter-spacing:.05em}
@media(max-width:620px){
  .kozin-live-card{min-height:170px;border-radius:13px}
  .kozin-live-card-content{padding:15px 16px;max-width:88%}
  .kozin-live-eyebrow{font-size:8px;margin-bottom:6px}
  .kozin-live-title{font-size:26px}
  .kozin-live-match{font-size:11px;margin-top:7px}
  .kozin-live-cta{margin-top:11px;padding:7px 11px;font-size:8px}
}

/* Scale match-card content with the compact card */
.match-card-top{font-size:9px;margin-bottom:7px;padding-bottom:6px}
.match-league{font-size:9px;letter-spacing:.5px}
.live-badge{font-size:8px;padding:2px 6px;gap:4px}
.live-dot2{width:4px;height:4px}
.team-logo{width:40px;height:40px;font-size:16px}
.team-name{max-width:92px;font-size:10px;line-height:1.15}
.match-score{font-size:20px;min-width:52px;padding:2px 6px;border-radius:8px}
.match-time{font-size:8px;margin-top:5px;padding-top:5px}
@media(max-width:620px){
  .match-card-top{font-size:8px;margin-bottom:6px;padding-bottom:5px}
  .match-league{font-size:8px}
  .live-badge{font-size:7px;padding:2px 5px}
  .team-logo{width:38px;height:38px;font-size:15px}
  .team-name{max-width:82px;font-size:9px}
  .match-score{font-size:19px;min-width:50px;padding:2px 5px}
  .match-time{font-size:7.5px;margin-top:4px;padding-top:4px}
}
@media(max-width:380px){
  .team-logo{width:35px;height:35px;font-size:14px}
  .team-name{max-width:76px;font-size:8.5px}
  .match-score{font-size:18px;min-width:46px}
}

.match-card-top{font-size:10px;margin-bottom:9px;padding-bottom:7px}
.match-league{font-size:10px;letter-spacing:.7px}
.live-badge{font-size:9px;padding:3px 7px;gap:5px}
.live-dot2{width:5px;height:5px}
.team-logo{width:56px;height:56px;font-size:20px}
.team-name{max-width:110px;font-size:12px;line-height:1.25}
.match-score{font-size:24px;min-width:66px;padding:4px 10px;border-radius:10px}
.match-time{font-size:9.5px;margin-top:7px;padding-top:6px}
@media(max-width:620px){
  .match-card-top{font-size:10px;margin-bottom:8px;padding-bottom:6px}
  .match-league{font-size:10px}
  .live-badge{font-size:9px;padding:3px 7px}
  .team-logo{width:50px;height:50px;font-size:20px}
  .team-name{max-width:110px;font-size:12px}
  .match-score{font-size:24px;min-width:58px;padding:3px 9px}
  .match-time{font-size:9.5px;margin-top:5px;padding-top:5px}
}
@media(max-width:380px){
  .team-logo{width:46px;height:46px}
  .team-name{font-size:11px}
  .match-score{font-size:22px;min-width:56px}
}

/* AESPORT-style TV channel cards */
.tv-card{min-height:188px;padding:0;position:relative;overflow:hidden;border:1px solid rgba(83,170,255,.28);border-radius:14px;background:linear-gradient(145deg,rgba(18,36,61,.96),rgba(7,16,30,.98));cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;transition:.28s cubic-bezier(.2,.8,.2,1);box-shadow:0 14px 34px rgba(0,0,0,.3),inset 0 1px 0 rgba(144,219,255,.07)}
.tv-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(24,102,164,.18),transparent 42%,rgba(3,9,18,.6))}
.tv-card:hover{transform:translateY(-4px);border-color:#4dbbff;box-shadow:0 22px 46px rgba(0,0,0,.4),0 0 28px rgba(39,150,255,.18)}
.tv-card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px 8px;border-bottom:1px solid rgba(132,201,255,.14);font:700 8px Space Mono,monospace;letter-spacing:.07em;text-transform:uppercase}
.tv-card-category{color:#9dc4e4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-live-badge{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;color:#71b8ff}
.tv-live-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:#4ba5ff;box-shadow:0 0 8px #4ba5ff}
.tv-card-center{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 14px 8px;text-align:center}
.tv-card-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(80,153,232,.12);border:1px solid rgba(89,177,255,.4);color:#9be4ff;font-size:22px;overflow:hidden;box-shadow:0 7px 18px rgba(0,0,0,.22)}
.tv-card-icon img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.tv-card-name{max-width:100%;font-size:13px;font-weight:800;color:#eef6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-card-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px 11px}
.tv-card-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 8px Space Mono,monospace;letter-spacing:.06em;text-transform:uppercase;color:#72d5ff}
.tv-card-cta{flex-shrink:0;padding:6px 9px;border-radius:999px;background:linear-gradient(135deg,#6cd7ff,#348aff);color:#071322;font:700 8px Space Mono,monospace;letter-spacing:.04em;text-transform:uppercase;transition:.2s}
.tv-card:hover .tv-card-cta{box-shadow:0 0 16px rgba(108,215,255,.35)}
html[data-theme="light"] .tv-card{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,226,228,.92));border-color:rgba(37,125,214,.25);box-shadow:0 14px 34px rgba(31,103,173,.13),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme="light"] .tv-card::before{background:linear-gradient(180deg,rgba(238,93,105,.14),transparent 46%,rgba(255,255,255,.22))}
html[data-theme="light"] .tv-card-name{color:#4f171c}.tv-card-icon{color:#126bd1}
@media(max-width:620px){.tv-card{min-height:172px;border-radius:13px}.tv-card-top{padding:9px 11px 7px}.tv-card-center{gap:7px;padding:10px 12px 6px}.tv-card-icon{width:46px;height:46px;font-size:19px}.tv-card-name{font-size:12px}.tv-card-bottom{padding:7px 10px 9px}.tv-card-meta{font-size:7px}.tv-card-cta{padding:5px 8px;font-size:7px}}

/* TV category filter */
.tv-filter{display:flex;align-items:center;gap:6px;width:100%;margin:0 0 14px;padding:5px;border:1px solid rgba(83,170,255,.24);border-radius:13px;background:rgba(8,18,33,.72);overflow-x:auto;scrollbar-width:none}
.tv-filter::-webkit-scrollbar{display:none}
.tv-filter-label{flex:0 0 auto;padding:0 7px;color:#72d5ff;font:700 9px Space Mono,monospace;letter-spacing:.08em;text-transform:uppercase}
.tv-filter-btn{flex:0 0 auto;border:0;border-radius:9px;padding:8px 12px;background:transparent;color:#7890aa;cursor:pointer;font:700 9px Inter,system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;transition:.2s}
.tv-filter-btn:hover{color:#c7ebff;background:rgba(54,168,255,.1)}
.tv-filter-btn.active{color:#071322;background:linear-gradient(135deg,#6cd7ff,#348aff);box-shadow:0 5px 14px rgba(39,150,255,.2)}
html[data-theme="light"] .tv-filter{background:rgba(255,255,255,.82);border-color:rgba(214,37,52,.22);box-shadow:0 8px 20px rgba(31,103,173,.08)}
html[data-theme="light"] .tv-filter-label{color:#d11222}html[data-theme="light"] .tv-filter-btn{color:#975c61}
html[data-theme="light"] .tv-filter-btn:hover{color:#d11222;background:rgba(255,54,71,.1)}
@media(max-width:620px){.tv-filter{margin-bottom:11px;padding:4px;border-radius:11px}.tv-filter-label{font-size:8px;padding:0 5px}.tv-filter-btn{padding:7px 10px;font-size:8px}}

/* Theme-aware TV surfaces */
.tv-filter{background:rgba(8,16,29,.72);border-color:rgba(83,170,255,.24);box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(144,219,255,.05)}
#tvGrid{padding:12px;border-radius:16px;background:rgba(8,16,29,.28);border:1px solid rgba(83,170,255,.12)}
html[data-theme="light"] .tv-filter{background:rgba(255,241,242,.92);border-color:rgba(215,25,41,.22);box-shadow:0 10px 24px rgba(0,75,150,.08),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme="light"] #tvGrid{background:rgba(255,241,242,.48);border-color:rgba(215,25,41,.14);box-shadow:0 10px 26px rgba(0,75,150,.06)}
@media(max-width:620px){#tvGrid{padding:8px;border-radius:13px}}

/* Soft pale-blue TV light theme */
html[data-theme="light"] .tv-filter{background:rgba(255,241,242,.94);border-color:rgba(215,25,41,.22)}
html[data-theme="light"] .tv-filter-label{color:#c71927}
html[data-theme="light"] .tv-filter-btn{color:#8a595d}
html[data-theme="light"] .tv-filter-btn:hover{color:#c71927;background:rgba(239,91,103,.12)}
html[data-theme="light"] .tv-filter-btn.active{color:#fff;background:linear-gradient(135deg,#ef5b67,#d71929);box-shadow:0 5px 14px rgba(150,0,12,.16)}
html[data-theme="light"] .tv-card{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,225,227,.9));border-color:rgba(25,120,215,.24);box-shadow:0 14px 34px rgba(0,75,150,.1),inset 0 1px 0 rgba(255,255,255,.92)}
html[data-theme="light"] .tv-card::before{background:linear-gradient(180deg,rgba(239,91,103,.14),transparent 46%,rgba(255,241,242,.3))}
html[data-theme="light"] .tv-card:hover{border-color:#d71929;box-shadow:0 20px 42px rgba(150,0,12,.16),0 0 24px rgba(215,25,41,.1)}
html[data-theme="light"] .tv-card-top{border-bottom-color:rgba(215,25,41,.14)}
html[data-theme="light"] .tv-card-category{color:#8a595d}
html[data-theme="light"] .tv-card-icon{background:rgba(215,25,41,.07);border-color:rgba(215,25,41,.28);color:#c71927;box-shadow:0 7px 18px rgba(0,75,150,.08)}
html[data-theme="light"] .tv-card-name{color:#5b1f24}
html[data-theme="light"] .tv-card-meta{color:#c71927}
html[data-theme="light"] .tv-card-cta{background:linear-gradient(135deg,#ef5b67,#d71929);color:#fff}
html[data-theme="light"] .tv-card:hover .tv-card-cta{box-shadow:0 0 16px rgba(215,25,41,.28)}


/* ===== TV channel: remove the outer grid background card ===== */
#tvGrid{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
html[data-theme="light"] #tvGrid{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
@media(max-width:620px){
  #tvGrid{padding:0}
}



/* ===== Font Awesome navigation alignment and active colors ===== */
.rail-item .rail-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  color:inherit;
  line-height:1;
}
.rail-item .rail-icon i{
  position:static;
  display:block;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  color:inherit;
  font-size:18px;
  line-height:1;
  transform:none;
}
.rail-item > i{
  position:absolute;
  top:10px;
  right:11px;
  width:6px;
  height:6px;
  margin:0;
  padding:0;
}
.rail-item:hover .rail-icon{color:#c7ebff}
.rail-item.active .rail-icon{color:#72d5ff}
html[data-theme="light"] .rail-item:hover .rail-icon{color:#d11222}
html[data-theme="light"] .rail-item.active .rail-icon{color:#c71927}

@media(max-width:620px){
  .mobile-nav .nav-icon{
    width:24px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 3px;
    color:inherit;
    line-height:1;
  }
  .mobile-nav .nav-icon i{
    position:static;
    display:block;
    margin:0;
    padding:0;
    color:inherit;
    font-size:18px;
    line-height:1;
    transform:none;
  }
  .mobile-nav button:hover .nav-icon{color:#c7ebff}
  .mobile-nav button.active .nav-icon{color:#72d5ff}
  html[data-theme="light"] .mobile-nav button:hover .nav-icon{color:#d11222}
  html[data-theme="light"] .mobile-nav button.active .nav-icon{color:#c71927}
}



/* ===== Mobile navigation spacing and padding ===== */
@media(max-width:620px){
  .mobile-nav{
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    height:64px;
    min-height:64px;
    padding:5px;
    gap:4px;
    align-items:stretch;
    box-sizing:border-box;
  }
  .mobile-nav button{
    flex:1 1 0;
    width:0;
    min-width:0;
    height:100%;
    min-height:0;
    padding:5px 2px;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    line-height:1;
    text-align:center;
    box-sizing:border-box;
  }
  .mobile-nav .nav-icon{
    width:24px;
    height:21px;
    flex:0 0 21px;
    margin:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-nav .nav-icon i{font-size:18px}
  .mobile-nav button:nth-child(2)::after{
    top:7px;
    right:calc(50% - 16px);
  }
}
@media(max-width:380px){
  .mobile-nav{
    left:8px;
    right:8px;
    height:62px;
    min-height:62px;
    padding:4px;
    gap:2px;
  }
  .mobile-nav button{padding:4px 1px;font-size:8px;gap:2px}
  .mobile-nav .nav-icon{width:22px;height:20px;flex-basis:20px}
  .mobile-nav .nav-icon i{font-size:17px}
}



/* ===== Smaller mobile navigation icons ===== */
@media(max-width:620px){
  .mobile-nav .nav-icon{
    width:21px;
    height:19px;
    flex-basis:19px;
  }
  .mobile-nav .nav-icon i{font-size:15px}
}
@media(max-width:380px){
  .mobile-nav .nav-icon{
    width:20px;
    height:18px;
    flex-basis:18px;
  }
  .mobile-nav .nav-icon i{font-size:14px}
}



/* ===== Smaller desktop navigation icons ===== */
@media(min-width:621px){
  .rail-item .rail-icon{
    width:20px;
    height:20px;
    flex-basis:20px;
  }
  .rail-item .rail-icon i{font-size:15px}
}



/* ===== Compact desktop nav with hover transitions ===== */
@keyframes desktopNavPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.16);opacity:.78}
}
@media(min-width:621px){
  .desktop-rail{
    width:62px;
    padding:6px 5px;
    gap:4px;
    border-radius:16px;
    transition:width .28s ease,padding .28s ease,box-shadow .28s ease;
  }
  .rail-item{
    width:50px;
    min-height:54px;
    gap:3px;
    border-radius:11px;
    font-size:8px;
    transition:color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
  }
  .rail-item .rail-icon{
    width:18px;
    height:18px;
    flex-basis:18px;
    transition:transform .22s cubic-bezier(.2,.8,.2,1),color .22s ease,filter .22s ease;
  }
  .rail-item .rail-icon i{
    font-size:14px;
    transition:transform .22s cubic-bezier(.2,.8,.2,1),color .22s ease;
  }
  .rail-item:hover{
    transform:translateY(-2px);
    background:rgba(54,168,255,.14);
    box-shadow:inset 0 0 0 1px rgba(91,193,255,.22),0 6px 14px rgba(31,125,245,.14);
  }
  .rail-item:hover .rail-icon{
    transform:scale(1.1);
    filter:drop-shadow(0 0 6px rgba(114,213,255,.45));
  }
  .rail-item.active{
    transform:translateY(-1px);
    transition:color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
  }
  .rail-item.active .rail-icon i{
    transform:scale(1.04);
    filter:drop-shadow(0 0 7px rgba(114,213,255,.55));
  }
  .rail-item > i{
    top:8px;
    right:8px;
    animation:desktopNavPulse 1.5s ease-in-out infinite;
  }
  html[data-theme="light"] .rail-item:hover{
    background:rgba(215,25,41,.10);
    box-shadow:inset 0 0 0 1px rgba(215,25,41,.18),0 6px 14px rgba(0,75,150,.10);
  }
  html[data-theme="light"] .rail-item:hover .rail-icon{
    filter:drop-shadow(0 0 6px rgba(199,25,39,.32));
  }
  html[data-theme="light"] .rail-item.active .rail-icon i{
    filter:drop-shadow(0 0 7px rgba(199,25,39,.35));
  }
}



/* ===== Light mode only: replace blue hover highlight with soft red ===== */
html[data-theme="light"] .rail-item:hover,
html[data-theme="light"] .mobile-nav button:hover,
html[data-theme="light"] .tab:hover:not(.active),
html[data-theme="light"] .tv-filter-btn:hover,
html[data-theme="light"] .highlight-subtab:hover{
  color:#c71927 !important;
  background:rgba(239,91,103,.12) !important;
  border-color:rgba(215,25,41,.20) !important;
  box-shadow:none !important;
}
html[data-theme="light"] .rail-item:hover .rail-icon,
html[data-theme="light"] .rail-item:hover .rail-icon i,
html[data-theme="light"] .mobile-nav button:hover .nav-icon,
html[data-theme="light"] .mobile-nav button:hover .nav-icon i{
  color:#c71927 !important;
  filter:drop-shadow(0 0 5px rgba(199,25,39,.20));
}
html[data-theme="light"] .contact-link:hover,
html[data-theme="light"] .theme-toggle:hover{
  color:#c71927 !important;
  background:rgba(239,91,103,.12) !important;
  border-color:rgba(215,25,41,.30) !important;
  box-shadow:0 10px 26px rgba(0,75,150,.10) !important;
}


/* Custom ads loaded from Ads Management API */
.ad-copy{position:absolute;z-index:2;left:28px;bottom:34px;max-width:62%;pointer-events:none;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.ad-copy .ad-title{font-size:30px}
@media(max-width:620px){.ad-copy{left:18px;bottom:25px;max-width:72%}.ad-copy .ad-title{font-size:22px}}

/* adMaterialUrl banner ကို အပြည့်မြင်စေရန် */
.ad-slide.ad-material{
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#080e16;
}
.ad-slide.ad-material::after{display:none}

/* API-only slider: a single dynamic slide must fill the slider frame. */
.ad-slider.is-single .ad-slide{height:100%;min-height:100%;}

/* ===== Ad slider: theme-aware background (FIX) ===== */
:root{
  --ad-bg: linear-gradient(135deg, #0e1a2e, #12213a 55%, #0b1424);
  --ad-bg-solid: #0e1a2e;
  --ad-border: rgba(83,170,255,.28);
  --ad-shadow: 0 18px 45px rgba(0,0,0,.38), 0 0 24px rgba(38,137,255,.08);
}
html[data-theme="light"]{
  --ad-bg: linear-gradient(135deg, #fff7f8, #ffe1e3 60%, #fff0f1);
  --ad-bg-solid: #ffe9eb;
  --ad-border: rgba(215,25,41,.24);
  --ad-shadow: 0 18px 45px rgba(150,0,12,.14);
}

.ad-slider{
  background: var(--ad-bg) !important;
  border-color: var(--ad-border) !important;
  box-shadow: var(--ad-shadow) !important;
}

.ad-slide.ad-material{
  background-color: var(--ad-bg-solid) !important;
}

.ad-slide-sponsor{
  background: var(--ad-bg) !important;
}

/* Banner ပုံမရှိသေးချိန် / loading ဖြစ်နေချိန်မှာလည်း theme အရောင်ပဲ ပေါ်စေရန် */
.ad-slider:empty,
.ad-slider.is-single{
  background: var(--ad-bg) !important;
}

/* Shared app and website design tokens */
:root{
  color-scheme:dark;
  --gold:#4a96e2;
  --gold-2:#8ac0f6;
  --gold-dark:#1c538a;
  --gold-glow:rgba(74,150,226,.24);
  --pitch:#080c11;
  --pitch-2:#10151a;
  --pitch-3:#192027;
  --cream:#eff2f4;
  --cream-dim:#cbd2ca;
  --surface:rgba(239,242,244,.055);
  --surface-2:rgba(239,242,244,.09);
  --border:rgba(239,242,244,.10);
  --border-strong:rgba(25,120,215,.38);
  --text:#eff2f4;
  --muted:#a2ada4;
  --muted-2:#758178;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 20px 60px rgba(0,0,0,.38);
  --shadow-gold:0 14px 36px rgba(25,120,215,.14);
  --glass:linear-gradient(150deg,rgba(239,242,244,.075),rgba(239,242,244,.025));
  --ad-bg:linear-gradient(135deg,#11161b,#191f25 58%,#0d1217);
  --ad-bg-solid:#11161b;
  --ad-border:rgba(239,242,244,.13);
  --ad-shadow:0 18px 45px rgba(0,0,0,.32);
}
html,body{background:var(--pitch)}
body{
  background:
    radial-gradient(ellipse 75% 46% at 50% -8%,rgba(25,120,215,.11),transparent 58%),
    radial-gradient(ellipse 50% 45% at 95% 45%,rgba(74,150,226,.06),transparent 60%),
    linear-gradient(180deg,#080c11 0%,#0b1015 52%,#080c11 100%);
  font-family:Inter,system-ui,sans-serif;
}
body::before{background-image:none}
body::after{
  background:
    radial-gradient(circle at 12% 12%,rgba(25,120,215,.10),transparent 23%),
    radial-gradient(circle at 88% 30%,rgba(74,150,226,.06),transparent 24%);
}
.nav{
  background:rgba(16,21,26,.88);
  border-color:rgba(255,255,255,.11);
  border-radius:16px;
  box-shadow:0 14px 38px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-logo{font-size:21px;letter-spacing:.055em}
.nav-logo span{color:#5aa5f0;text-shadow:none}
.nav-cta{
  background:linear-gradient(135deg,#3b91e8,#156ec8);
  color:#fff;
  border-radius:11px;
  box-shadow:0 8px 22px rgba(25,120,215,.22);
}
.nav-cta:hover{box-shadow:0 12px 28px rgba(25,120,215,.30)}
.theme-toggle{border-style:solid;border-color:var(--border);background:var(--surface)}
.desktop-rail,.mobile-nav{
  background:rgba(16,21,26,.92);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 14px 36px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
}
.rail-item,.mobile-nav button{color:#9ba79d}
.rail-item:hover,.mobile-nav button:hover{
  color:var(--cream);
  background:rgba(25,120,215,.12);
  box-shadow:inset 0 0 0 1px rgba(25,120,215,.18);
}
.rail-item.active,.mobile-nav button.active{
  color:#77bbff;
  background:linear-gradient(145deg,rgba(25,120,215,.22),rgba(25,120,215,.10));
  box-shadow:inset 0 0 0 1px rgba(25,120,215,.28),0 5px 16px rgba(0,0,0,.12);
}
.rail-item.active .rail-icon,.mobile-nav button.active .nav-icon{color:#77bbff}
.live-section{max-width:1180px}
#liveInfo{color:var(--gold-2)}
.match-card,.h-card,.news-card,.tv-card{
  border-color:var(--border);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(22,28,34,.96),rgba(13,17,22,.96));
  box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);
}
.match-card:hover,.h-card:hover,.news-card:hover,.tv-card:hover{
  border-color:rgba(25,120,215,.42);
  box-shadow:0 18px 38px rgba(0,0,0,.30),0 0 20px rgba(25,120,215,.07);
}
.team-logo{background:rgba(239,242,244,.06);border-color:rgba(239,242,244,.12)}
.match-league{color:var(--muted)}
.live-badge{background:rgba(25,120,215,.14);border-color:rgba(25,120,215,.34);color:#77bbff}
.match-score{
  color:var(--gold-2);
  background:rgba(239,242,244,.055);
  border-color:rgba(74,150,226,.20);
}
.kozin-live-card{border-color:rgba(74,150,226,.28)}
.kozin-live-eyebrow,.tv-card-meta{color:var(--gold-2)}
.kozin-live-cta{background:linear-gradient(135deg,#8ac0f6,#4a96e2);color:#061524}
.tv-card-top{border-color:var(--border)}
.tv-card-category{color:var(--muted)}
.tv-card-icon{background:rgba(74,150,226,.09);border-color:rgba(74,150,226,.20);color:var(--gold-2)}
.tv-card-name{color:var(--text)}
.tv-card-cta{background:linear-gradient(135deg,#8ac0f6,#4a96e2);color:#061524}
.tv-filter-btn{color:var(--muted)}
.tv-filter-btn:hover{color:var(--text);background:rgba(25,120,215,.10)}
.tv-filter-btn.active,.highlight-subtab.active{
  color:#fff;
  background:linear-gradient(135deg,#3b91e8,#1466b9);
  box-shadow:0 6px 16px rgba(20,102,185,.18);
}
.highlight-subtab{border:1px solid transparent}
.highlight-subtab:hover{color:var(--gold-2);background:var(--surface)}
.contact-link{border-color:var(--border);background:var(--surface);color:var(--cream)}
.contact-link:hover{border-color:var(--border-strong);color:var(--gold-2);background:var(--surface-2);box-shadow:none}
.match-card,.h-card,.news-card,.tv-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.ad-slider{border-radius:18px}
.ad-kicker{color:var(--gold-2)}
.ad-dot.active{background:var(--gold-2)}
html[data-theme="light"]{
  color-scheme:light;
  --gold:#b91422;
  --gold-2:#d71929;
  --gold-dark:#8e111b;
  --gold-glow:rgba(185,20,34,.15);
  --pitch:#f6f1f1;
  --pitch-2:#fffafa;
  --pitch-3:#ede6e7;
  --cream:#281d1e;
  --cream-dim:#48564c;
  --surface:rgba(40,29,30,.045);
  --surface-2:rgba(29,34,40,.075);
  --border:rgba(29,34,40,.10);
  --border-strong:rgba(20,102,185,.32);
  --text:#281d1e;
  --muted:#5e6b62;
  --muted-2:#879188;
  --shadow:0 20px 55px rgba(28,33,39,.10);
  --shadow-gold:0 14px 36px rgba(20,102,185,.10);
  --glass:linear-gradient(150deg,rgba(255,255,255,.94),rgba(242,244,247,.88));
  --ad-bg:linear-gradient(135deg,#fffafa,#f3eced 60%,#ede6e7);
  --ad-bg-solid:#f3eced;
  --ad-border:rgba(29,34,40,.12);
  --ad-shadow:0 18px 40px rgba(28,33,39,.10);
}
html[data-theme="light"]{background:var(--pitch)!important}
html[data-theme="light"] body{
  color:var(--text);
  background:
    radial-gradient(ellipse 70% 42% at 50% -10%,rgba(215,25,41,.055),transparent 60%),
    linear-gradient(180deg,#f6f1f1 0%,#faf6f6 56%,#f3edee 100%)!important;
}
html[data-theme="light"] body::before,html[data-theme="light"] body::after{display:none}
html[data-theme="light"] .nav{
  background:rgba(255,250,250,.92);
  border-color:var(--border);
  box-shadow:0 12px 30px rgba(39,28,29,.08),inset 0 1px 0 #fff;
}
html[data-theme="light"] .nav-logo{color:var(--text)}
html[data-theme="light"] .nav-logo span{color:var(--gold);text-shadow:none}
html[data-theme="light"] .nav-cta{color:#fff}
html[data-theme="light"] .theme-toggle{color:var(--text)}
html[data-theme="light"] .desktop-rail,html[data-theme="light"] .mobile-nav{
  background:rgba(255,250,250,.95);
  border-color:var(--border);
  box-shadow:0 14px 32px rgba(39,28,29,.10),inset 0 1px 0 #fff;
}
html[data-theme="light"] .rail-item,html[data-theme="light"] .mobile-nav button{color:#647067}
html[data-theme="light"] .rail-item.active,html[data-theme="light"] .mobile-nav button.active{
  color:#a8121e;
  background:rgba(215,25,41,.08);
  box-shadow:inset 0 0 0 1px rgba(185,20,34,.14);
}
html[data-theme="light"] .rail-item.active .rail-icon,html[data-theme="light"] .mobile-nav button.active .nav-icon{color:#b91422}
html[data-theme="light"] .match-card,html[data-theme="light"] .h-card,html[data-theme="light"] .news-card,html[data-theme="light"] .tv-card{
  background:linear-gradient(145deg,#fffafa,#f5eff0);
  border-color:rgba(40,29,30,.10);
  box-shadow:0 10px 26px rgba(39,28,29,.075),inset 0 1px 0 #fff;
}
html[data-theme="light"] .match-card:hover,html[data-theme="light"] .h-card:hover,html[data-theme="light"] .news-card:hover,html[data-theme="light"] .tv-card:hover{
  border-color:rgba(185,20,34,.32);
  box-shadow:0 16px 34px rgba(39,28,29,.11);
}
html[data-theme="light"] .team-logo{background:rgba(40,29,30,.035);border-color:var(--border)}
html[data-theme="light"] .live-badge{background:rgba(185,20,34,.08);border-color:rgba(185,20,34,.20);color:#a8121e}
html[data-theme="light"] .match-score{color:#8e111b;background:#fffafa;border-color:rgba(185,20,34,.18)}
html[data-theme="light"] .tv-card-name{color:var(--text)}
html[data-theme="light"] .tv-card-category{color:var(--muted)}
html[data-theme="light"] .tv-filter-btn{color:var(--muted)}
html[data-theme="light"] .tv-filter-btn:hover{color:#a8121e;background:rgba(185,20,34,.07)}
html[data-theme="light"] .tv-filter-btn.active,html[data-theme="light"] .highlight-subtab.active{color:#fff}
html[data-theme="light"] .highlight-subtab{color:var(--muted)}
html[data-theme="light"] .highlight-subtab:hover{color:#a8121e;background:rgba(185,20,34,.06)}
html[data-theme="light"] .contact-link{color:var(--text)}
html[data-theme="light"] .contact-link:hover{color:#a8121e;background:rgba(185,20,34,.05)}
html[data-theme="light"] .ad-slide-sponsor{background:var(--ad-bg)!important}
@media(max-width:620px){
  .nav{border-radius:14px}
  .mobile-nav{border-radius:18px}
}

/* Keep the standalone player aligned with the shared app/site palette. */
html[data-theme="dark"]{
  --gold:#4a96e2;
  --gold-2:#5aa5f0;
  --gold-dark:#1c538a;
  --gold-glow:rgba(25,120,215,.20);
  --pitch:#080c11;
  --pitch-2:#10151a;
  --pitch-3:#192027;
  --cream:#eff2f4;
  --cream-dim:#cbd2ca;
  --surface:rgba(239,242,244,.055);
  --surface-2:rgba(239,242,244,.09);
  --border:rgba(239,242,244,.10);
  --border-strong:rgba(25,120,215,.38);
  --text:#eff2f4;
  --muted:#a2ada4;
  --muted-2:#758178;
  --glass:linear-gradient(150deg,rgba(239,242,244,.075),rgba(239,242,244,.025));
}
html[data-theme="light"]{
  --gold:#b91422;
  --gold-2:#d71929;
  --gold-dark:#8e111b;
  --gold-glow:rgba(185,20,34,.15);
  --pitch:#f6f1f1;
  --pitch-2:#fffafa;
  --pitch-3:#ede6e7;
  --cream:#281d1e;
  --cream-dim:#48564c;
  --surface:rgba(40,29,30,.045);
  --surface-2:rgba(29,34,40,.075);
  --border:rgba(29,34,40,.10);
  --border-strong:rgba(20,102,185,.32);
  --text:#281d1e;
  --muted:#5e6b62;
  --muted-2:#879188;
  --glass:linear-gradient(150deg,rgba(255,255,255,.94),rgba(242,244,247,.88));
}
html[data-theme] .player-close{
  background:rgba(239,242,244,.05);
  border-color:var(--border);
  color:var(--muted);
}
html[data-theme] .player-close:hover{
  background:rgba(25,120,215,.14);
  border-color:rgba(25,120,215,.45);
  color:#77bbff;
}
html[data-theme] .player-video-wrap{
  border-color:rgba(25,120,215,.26);
  outline-color:rgba(25,120,215,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,0 32px 80px rgba(0,0,0,.58),0 0 55px rgba(25,120,215,.08);
}
html[data-theme="dark"] .player-overlay{
  background:radial-gradient(ellipse at 50% -10%,rgba(25,120,215,.10),transparent 42%),rgba(8,12,17,.98);
}
html[data-theme] .chat-room{
  border-color:rgba(25,120,215,.25);
  background:linear-gradient(150deg,rgba(22,28,34,.97),rgba(13,17,22,.97));
  box-shadow:0 20px 50px rgba(0,0,0,.22);
}
html[data-theme] .chat-head{
  background:linear-gradient(180deg,rgba(25,120,215,.10),transparent);
  color:#77bbff;
}
html[data-theme] .chat-message.is-mine p{
  background:linear-gradient(135deg,#3b91e8,#1466b9);
  border-color:rgba(255,255,255,.18);
  color:#fff;
  box-shadow:0 9px 22px rgba(20,102,185,.22),inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme] .chat-message.is-mine strong,
html[data-theme] .chat-message.is-other strong{color:#6aadf0}
html[data-theme] .chat-message.is-other p{
  background:linear-gradient(145deg,rgba(239,242,244,.08),rgba(239,242,244,.035));
  border-color:var(--border);
  color:var(--cream);
}
html[data-theme] .chat-emoji-btn{
  background:rgba(25,120,215,.10)!important;
  color:#77bbff!important;
}
html[data-theme] .chat-form{
  background:linear-gradient(0deg,rgba(8,12,17,.45),transparent);
}
html[data-theme] .chat-form input{
  background:rgba(8,12,17,.62);
  color:var(--text);
}
html[data-theme] .chat-form button{
  background:linear-gradient(135deg,#3b91e8,#1466b9);
  color:#fff;
  box-shadow:0 8px 20px rgba(20,102,185,.20);
}
html[data-theme] .emoji-picker{
  background:linear-gradient(160deg,rgba(16,21,26,.98),rgba(8,12,17,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 30px rgba(25,120,215,.10);
}
html[data-theme] .server-selector-section{
  background:linear-gradient(135deg,rgba(25,120,215,.11),rgba(16,21,26,.82));
  border-color:rgba(25,120,215,.28);
}
html[data-theme] .server-card:hover,
html[data-theme] .server-card.active{
  border-color:#3b91e8;
  background:linear-gradient(135deg,rgba(25,120,215,.20),rgba(20,102,185,.10));
  box-shadow:0 8px 24px rgba(20,102,185,.12),inset 0 0 0 1px rgba(255,255,255,.06);
}
html[data-theme] .server-card-check{border-color:rgba(25,120,215,.40)}
html[data-theme] .server-card.active .server-card-check{background:#1466b9;border-color:#1466b9;color:#fff}
html[data-theme] .server-dropdown{
  border-color:rgba(25,120,215,.30);
  accent-color:#1466b9;
}
html[data-theme] .server-info{background:rgba(25,120,215,.08)}
html[data-theme] .player-idle-ring{border-color:rgba(25,120,215,.32)}
html[data-theme] .player-idle-ring svg{fill:#5aa5f0}
html[data-theme] .player-video-wrap .shaka-control-button:hover,
html[data-theme] .player-video-wrap .shaka-overflow-menu-button:hover,
html[data-theme] .player-video-wrap .shaka-fullscreen-button:hover{
  color:#77bbff;
  background:rgba(25,120,215,.14);
}
html[data-theme] .player-video-wrap .shaka-seek-bar-container,
html[data-theme] .player-video-wrap .shaka-volume-bar-container{
  --shaka-player-seek-bar-color:#1466b9;
  --shaka-player-buffered-range-color:rgba(90,165,240,.36);
}
html[data-theme] .player-video-wrap .shaka-range-element{accent-color:#1466b9}

html[data-theme] .player-ad-slot{border-color:rgba(25,120,215,.22)}
html[data-theme] .toast{
  background:rgba(16,21,26,.96);
  border-color:rgba(25,120,215,.32);
  color:var(--cream);
  box-shadow:0 16px 50px rgba(0,0,0,.36);
}
html[data-theme] .player-video-wrap .shaka-bottom-controls,
html[data-theme] .player-video-wrap .shaka-control-panel-container{
  background:transparent!important;
  box-shadow:none!important;
}
html[data-theme] .player-video-wrap .shaka-overflow-menu,
html[data-theme] .player-video-wrap .shaka-settings-menu{
  background:rgba(16,21,26,.98);
  border:1px solid rgba(25,120,215,.28);
  color:var(--cream);
  box-shadow:0 18px 45px rgba(0,0,0,.46);
}
html[data-theme] .player-video-wrap .shaka-overflow-menu button,
html[data-theme] .player-video-wrap .shaka-settings-menu button{color:var(--cream)}
html[data-theme] .player-video-wrap .shaka-overflow-menu button:hover,
html[data-theme] .player-video-wrap .shaka-settings-menu button:hover{
  background:rgba(25,120,215,.14);
  color:#77bbff;
}

html[data-theme="light"] .player-overlay{
  background:radial-gradient(ellipse at 50% -10%,rgba(215,25,41,.07),transparent 42%),rgba(246,241,241,.98);
}
html[data-theme="light"] .player-video-wrap{
  border-color:rgba(185,20,34,.18);
  outline-color:rgba(185,20,34,.10);
  box-shadow:0 26px 70px rgba(28,33,39,.16),0 0 48px rgba(25,120,215,.06);
}
html[data-theme="light"] .chat-room{
  background:linear-gradient(150deg,#fffafa,#f5eff0);
  border-color:rgba(185,20,34,.20);
  box-shadow:0 16px 38px rgba(39,28,29,.09);
}
html[data-theme="light"] .chat-head{
  background:linear-gradient(180deg,rgba(215,25,41,.05),transparent);
  color:#b91422;
}
html[data-theme="light"] .chat-message.is-other p{
  background:linear-gradient(145deg,#fffafa,#f5eff0);
  border-color:rgba(40,29,30,.12);
  color:#281d1e;
}
html[data-theme="light"] .chat-message.is-mine p{
  color:#fff;
  background:linear-gradient(135deg,#e83b49,#b91422);
}
html[data-theme="light"] .chat-message.is-mine strong,
html[data-theme="light"] .chat-message.is-other strong{color:#a8121e}
html[data-theme="light"] .server-selector-section{
  background:linear-gradient(135deg,rgba(215,25,41,.06),rgba(255,255,255,.88));
  border-color:rgba(20,102,185,.18);
}
html[data-theme="light"] .server-dropdown{
  background-color:#fffafa;
  border-color:rgba(185,20,34,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9141c' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
html[data-theme="light"] .server-dropdown option{background:#fffafa;color:#281d1e}
html[data-theme="light"] .server-info{background:rgba(215,25,41,.06)}
html[data-theme="light"] .player-idle-ring{border-color:rgba(185,20,34,.24)}
html[data-theme="light"] .player-idle-ring svg{fill:#b91422}

/* Website news follows the app's featured story and compact article list. */
#newsGrid.news-feed{
  display:block;
  max-width:860px;
  margin:0 auto;
}
#newsGrid.news-feed .empty-state{
  margin:8px 16px 0;
  padding:24px;
  border:1px dashed var(--border);
  border-radius:14px;
  background:var(--surface);
  color:var(--muted);
  font:400 14px "DM Sans",Inter,sans-serif;
  text-align:center;
}
.news-tab .section-sub{display:none}
.news-tab .contact-footer{display:none}
#newsGrid.news-feed:not(.hidden){
  animation:newsFeedIn .28s ease both;
}
.web-news-divider{
  width:32px;
  height:2px;
  margin:0 16px 14px;
  background:#106cc8;
}
.web-news-skeleton-featured{
  display:flex;
  height:240px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:9px;
  margin:8px 16px 0;
  padding:18px;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(145deg,var(--pitch-2),var(--pitch-3));
}
.web-news-skeleton-line,
.web-news-skeleton-thumb{
  display:block;
  flex:none;
  border-radius:5px;
  background:linear-gradient(100deg,rgba(239,242,244,.055) 20%,rgba(239,242,244,.12) 38%,rgba(239,242,244,.055) 60%);
  background-size:200% 100%;
  animation:newsSkeletonShimmer 1.2s ease-in-out infinite;
}
.web-news-skeleton-featured .web-news-skeleton-line{
  width:var(--skeleton-width);
  height:var(--skeleton-height,13px);
  max-width:100%;
  background-color:rgba(0,0,0,.2);
}
.web-news-skeleton-featured .web-news-skeleton-line:first-child{
  height:16px;
  margin-bottom:1px;
}
.web-news-skeleton-row{
  display:flex;
  gap:12px;
  margin:0 16px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.web-news-skeleton-thumb{
  width:72px;
  height:72px;
  border-radius:10px;
}
.web-news-skeleton-lines{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  padding-top:2px;
}
.web-news-skeleton-lines .web-news-skeleton-line{
  width:var(--skeleton-width);
  height:10px;
}
.web-news-skeleton-lines .web-news-skeleton-line:nth-child(2),
.web-news-skeleton-lines .web-news-skeleton-line:nth-child(3){height:13px}
@keyframes newsSkeletonShimmer{
  to{background-position-x:-200%}
}
.web-news-featured{
  position:relative;
  height:240px;
  margin:8px 16px 20px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--pitch-2);
  cursor:pointer;
  isolation:isolate;
  box-shadow:0 16px 38px rgba(0,0,0,.20);
}
.web-news-featured:focus-visible,
.web-news-row:focus-visible{
  outline:2px solid #1978d7;
  outline-offset:3px;
}
.web-news-featured-image,
.web-news-row-image{
  display:block;
  object-fit:cover;
}
.web-news-image-placeholder{
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 70% 0,rgba(25,120,215,.16),transparent 62%),var(--pitch-3);
}
.web-news-featured-image.web-news-image-placeholder::after{
  content:"📰";
  font-size:42px;
  opacity:.65;
}
.web-news-row-image.web-news-image-placeholder::after{
  content:"📰";
  font-size:25px;
  opacity:.65;
}
.web-news-featured-image{
  position:absolute;
  z-index:-2;
  inset:0;
  width:100%;
  height:100%;
  transition:transform .35s ease;
}
.web-news-featured::after{
  position:absolute;
  z-index:-1;
  inset:0;
  content:"";
  background:linear-gradient(180deg,rgba(8,12,17,.02) 5%,rgba(8,12,17,.24) 38%,rgba(8,12,17,.94) 100%);
}
.web-news-featured.image-unavailable{
  background:radial-gradient(ellipse at 70% 0,rgba(25,120,215,.18),transparent 58%),var(--pitch-2);
}
.web-news-featured:hover .web-news-featured-image{transform:scale(1.025)}
.web-news-featured-content{
  display:flex;
  height:240px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:18px;
}
.web-news-featured-tag{
  display:inline-flex;
  align-items:center;
  margin-bottom:9px;
  padding:4px 9px;
  border-radius:5px;
  background:#1466b9;
  color:#fff;
  font:700 9px "DM Sans",Inter,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.web-news-featured-title{
  max-width:700px;
  margin:0;
  color:#fff;
  font:700 clamp(20px,3vw,27px)/1.32 "Playfair Display",Georgia,serif;
  text-wrap:pretty;
}
.web-news-featured-meta{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:10px;
  color:rgba(255,255,255,.72);
  font:500 11px "DM Sans",Inter,sans-serif;
}
.web-news-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#3b91e8;
}
.web-news-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 16px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .18s ease;
}
.web-news-row:hover{background:var(--surface)}
.web-news-row-image{
  flex:0 0 72px;
  width:72px;
  height:72px;
  border-radius:10px;
  background:var(--pitch-3);
}
.web-news-row-content{flex:1;min-width:0}
.web-news-category{
  display:block;
  margin-bottom:5px;
  color:#106cc8;
  font:500 9px "DM Sans",Inter,sans-serif;
  letter-spacing:1.5px;
}
.web-news-row-title{
  display:-webkit-box;
  overflow:hidden;
  margin:0;
  color:var(--cream);
  font:700 14px/1.4 "Playfair Display",Georgia,serif;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.web-news-row-date{
  margin-top:6px;
  color:var(--muted);
  font:400 10px "DM Sans",Inter,sans-serif;
}
.web-news-index{
  flex:0 0 auto;
  padding:2px 3px 0;
  color:var(--muted-2);
  font:500 11px "DM Sans",Inter,sans-serif;
}
.web-news-detail-page{
  min-height:100vh;
  background:var(--pitch)!important;
}
.web-news-detail{
  position:relative;
  max-width:820px;
  min-height:100vh;
  margin:0 auto;
  background:var(--pitch);
}
.web-news-detail-toolbar{
  position:sticky;
  z-index:3;
  top:0;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:-56px;
  padding:8px 18px;
  pointer-events:none;
  transition:background .18s ease,box-shadow .18s ease;
}
.web-news-detail.is-scrolled .web-news-detail-toolbar{
  background:var(--pitch);
  box-shadow:0 1px 0 var(--border);
}
.web-news-circle-button{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(8,12,17,.56);
  color:#fff;
  cursor:pointer;
  pointer-events:auto;
  backdrop-filter:blur(12px);
}
.web-news-circle-button:hover{background:rgba(20,102,185,.88)}
.web-news-circle-button svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8;
}
.web-news-detail-hero{
  position:relative;
  height:300px;
  margin:0;
  overflow:hidden;
  background:var(--pitch-3);
}
.web-news-detail-hero.image-unavailable{
  background:radial-gradient(ellipse at 70% 0,rgba(25,120,215,.20),transparent 62%),var(--pitch-2);
}
.web-news-detail-hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.web-news-detail-hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.10),transparent 35%,var(--pitch) 100%);
}
.web-news-detail-category{
  position:absolute;
  bottom:18px;
  left:20px;
  padding:5px 10px;
  border-radius:5px;
  background:#1466b9;
  color:#fff;
  font:700 9px "DM Sans",Inter,sans-serif;
  letter-spacing:.14em;
}
.web-news-detail-content{
  position:relative;
  padding:4px 20px 40px;
}
.web-news-detail-date{
  margin:0 0 13px;
  color:var(--muted);
  font:500 11px "DM Sans",Inter,sans-serif;
  letter-spacing:.04em;
}
.web-news-detail-title{
  margin:0;
  color:var(--cream);
  font:700 24px/1.3 "Playfair Display",Georgia,serif;
  text-wrap:pretty;
}
.web-news-detail-divider{
  width:40px;
  height:2px;
  margin:19px 0;
  background:#1466b9;
}
.web-news-author{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.web-news-author-avatar{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--pitch-3);
  color:#1978d7;
  font:700 12px "DM Sans",Inter,sans-serif;
}
.web-news-author div{display:grid;gap:2px}
.web-news-author strong{
  color:var(--cream);
  font:600 13px "DM Sans",Inter,sans-serif;
}
.web-news-author div span{
  color:var(--muted);
  font:400 11px "DM Sans",Inter,sans-serif;
}
.web-news-detail-body{
  padding-top:18px;
  color:var(--muted);
  font:400 15px/1.8 "DM Sans",Inter,sans-serif;
  overflow-wrap:anywhere;
}
.web-news-detail-body p{margin:0 0 16px}
.web-news-detail-body h1,
.web-news-detail-body h2,
.web-news-detail-body h3{
  margin:20px 0 10px;
  color:var(--cream);
  font-family:"Playfair Display",Georgia,serif;
}
.web-news-detail-body h1{font-size:20px}
.web-news-detail-body h2{font-size:18px}
.web-news-detail-body h3{font-size:16px}
.web-news-detail-body strong{color:var(--cream);font-weight:600}
.web-news-detail-body a{color:var(--gold-2);text-decoration:none}
.web-news-detail-body blockquote{
  margin:12px 0;
  padding:12px 16px;
  border-left:2px solid #1466b9;
  background:var(--surface);
  color:var(--cream-dim);
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
}
.web-news-detail-body ul,
.web-news-detail-body ol{margin:0 0 16px;padding-left:22px}
.web-news-detail-body img{
  display:block;
  max-width:100%;
  height:auto;
  margin:14px auto;
  border-radius:10px;
}
.web-news-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.web-news-tags span{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  font:500 11px "DM Sans",Inter,sans-serif;
}
.web-news-detail.is-empty{
  display:flex;
  min-height:100vh;
  flex-direction:column;
  justify-content:center;
  padding:24px;
}
.web-news-detail.is-empty .web-news-detail-toolbar{
  position:absolute;
  top:0;
  right:0;
  left:0;
}
.web-news-detail.is-empty .web-news-detail-content{padding:0}
.web-news-empty-kicker{
  margin:0 0 12px;
  color:#1978d7;
  font:700 10px "DM Sans",Inter,sans-serif;
  letter-spacing:.14em;
}
.web-news-empty-copy{
  color:var(--muted);
  font:400 14px/1.6 "DM Sans",Inter,sans-serif;
}
.web-news-toast{
  position:fixed;
  z-index:10;
  right:18px;
  bottom:20px;
  left:18px;
  width:max-content;
  max-width:calc(100% - 36px);
  margin:0 auto;
  padding:11px 16px;
  transform:translateY(8px);
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--pitch-2);
  color:var(--cream);
  font:500 12px "DM Sans",Inter,sans-serif;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.web-news-toast.visible{transform:translateY(0);opacity:1}
@keyframes newsFeedIn{
  from{transform:translateY(5px);opacity:.5}
  to{transform:translateY(0);opacity:1}
}
@media(max-width:620px){
  #newsGrid.news-feed{margin:0}
  .web-news-featured,.web-news-featured-content{height:240px}
  .web-news-skeleton-featured{height:240px}
  .web-news-featured-content{padding:17px}
  .web-news-row{gap:12px;margin:0 16px;padding:14px 0}
  .web-news-row-image{flex-basis:72px;width:72px;height:72px}
  .web-news-detail-toolbar{padding-right:14px;padding-left:14px}
  .web-news-detail-hero{height:300px}
  .web-news-detail-content{padding:4px 20px 40px}
}

html[data-theme="light"]{
  --gold:#d71920;
  --gold-2:#ff4f63;
  --gold-dark:#990018;
  --gold-glow:rgba(215,25,32,.20);
  --pitch:#fff0f2;
  --pitch-2:#ffe1e6;
  --pitch-3:#ffc7d1;
  --cream:#250407;
  --cream-dim:#54101a;
  --surface:rgba(215,25,32,.06);
  --surface-2:rgba(215,25,32,.10);
  --border:rgba(37,40,44,.10);
  --border-strong:rgba(215,25,32,.32);
  --text:#240407;
  --muted:#70424a;
  --muted-2:#9b5f69;
  --shadow-gold:0 14px 36px rgba(215,25,32,.10);
}
html[data-theme="light"] body{
  background:linear-gradient(180deg,#fff3f5 0%,#ffe3e8 56%,#fff6f7 100%)!important;
}
html[data-theme="light"] .nav,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .desktop-rail,
html[data-theme="light"] .mobile-nav{
  border-color:rgba(215,25,32,.24);
}
html[data-theme="light"] .toolbar{
  box-shadow:0 10px 25px rgba(150,0,24,.12),0 0 0 1px rgba(215,25,32,.08) inset;
}
html[data-theme="light"] .nav-logo span{color:#d71920}
html[data-theme="light"] .nav-cta,
html[data-theme="light"] .tab.active,
html[data-theme="light"] .tv-filter-btn.active,
html[data-theme="light"] .highlight-subtab.active,
html[data-theme="light"] .chat-form button{
  background:linear-gradient(135deg,#ff4f63,#d71920)!important;
  color:#fff!important;
}
html[data-theme="light"] .rail-item.active,
html[data-theme="light"] .mobile-nav button.active{
  color:#b9141c;
  background:linear-gradient(145deg,rgba(215,25,32,.16),rgba(215,25,32,.08));
  box-shadow:inset 0 0 0 1px rgba(215,25,32,.22),0 5px 16px rgba(150,0,24,.10);
}
html[data-theme="light"] .tab:hover:not(.active),
html[data-theme="light"] .tv-filter-btn:hover,
html[data-theme="light"] .highlight-subtab:hover,
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .player-close:hover{
  color:#b9141c;
  background:rgba(215,25,32,.08);
}
html[data-theme="light"] .live-badge,
html[data-theme="light"] .match-score,
html[data-theme="light"] .tv-filter-label,
html[data-theme="light"] .tv-card-meta,
html[data-theme="light"] .web-news-category,
html[data-theme="light"] .web-news-author-avatar{
  color:#b9141c;
}
html[data-theme="light"] .live-badge,
html[data-theme="light"] .match-score,
html[data-theme="light"] .tv-filter,
html[data-theme="light"] .tv-card-icon{
  border-color:rgba(215,25,32,.22);
}
html[data-theme="light"] .match-card:hover,
html[data-theme="light"] .h-card:hover,
html[data-theme="light"] .news-card:hover,
html[data-theme="light"] .tv-card:hover{
  border-color:rgba(215,25,32,.32);
}
html[data-theme="light"] .tv-card-icon{
  background:rgba(215,25,32,.07);
  color:#b9141c;
}
html[data-theme="light"] .tv-card-cta,
html[data-theme="light"] .web-news-featured-tag,
html[data-theme="light"] .web-news-detail-category{
  background:linear-gradient(135deg,#ff4f63,#d71920);
  color:#fff;
}
html[data-theme="light"] .chat-room,
html[data-theme="light"] .server-selector-section{
  border-color:rgba(215,25,32,.20);
}
html[data-theme="light"] .chat-head,
html[data-theme="light"] .chat-message.is-mine strong,
html[data-theme="light"] .chat-message.is-other strong,
html[data-theme="light"] .player-idle-ring svg{
  color:#b9141c;
  fill:#b9141c;
}
html[data-theme="light"] .chat-message.is-mine p{
  background:linear-gradient(135deg,#ef4d5b,#d71920);
}
html[data-theme="light"] .player-idle-ring,
html[data-theme="light"] .player-video-wrap{
  border-color:rgba(215,25,32,.24);
}
html[data-theme="light"] .player-video-wrap .shaka-range-element{accent-color:#b9141c}
html[data-theme="light"] .player-video-wrap .shaka-seek-bar-container,
html[data-theme="light"] .player-video-wrap .shaka-volume-bar-container{
  --shaka-player-seek-bar-color:#b9141c;
  --shaka-player-buffered-range-color:rgba(240,90,97,.36);
}
html[data-theme="light"] .server-dropdown{
  accent-color:#b9141c;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d71920' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
html[data-theme="light"] .web-news-featured:focus-visible,
html[data-theme="light"] .web-news-row:focus-visible{
  outline-color:#d71920;
}
html[data-theme="light"] .web-news-circle-button:hover{background:rgba(215,25,32,.88)}
html[data-theme="light"] .web-news-detail-divider{background:#d71920}
html[data-theme="light"] .web-news-detail-body blockquote{border-left-color:#b9141c}

html[data-theme="light"] .player-close{
  background:rgba(215,25,32,.06);
  border-color:rgba(215,25,32,.22);
  color:#70424a;
}
html[data-theme="light"] .player-video-wrap{
  border-color:rgba(215,25,32,.24);
  outline-color:rgba(215,25,32,.12);
  box-shadow:0 26px 70px rgba(39,5,10,.16),0 0 48px rgba(215,25,32,.06);
}
html[data-theme="light"] .player-idle-ring{
  border-color:rgba(215,25,32,.42);
}
html[data-theme="light"] .server-selector-section{
  background:linear-gradient(135deg,rgba(215,25,32,.07),rgba(255,255,255,.88));
  border-color:rgba(215,25,32,.24);
  box-shadow:0 16px 42px rgba(39,5,10,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .server-selector-label{color:#b9141c}
html[data-theme="light"] .server-card{
  background:rgba(255,255,255,.82);
  border-color:rgba(37,40,44,.12);
  color:#240407;
}
html[data-theme="light"] .server-card:hover,
html[data-theme="light"] .server-card.active{
  border-color:rgba(215,25,32,.48);
  background:linear-gradient(135deg,rgba(255,79,99,.16),rgba(215,25,32,.07));
  box-shadow:0 8px 24px rgba(150,0,24,.10),inset 0 0 0 1px rgba(215,25,32,.10);
}
html[data-theme="light"] .server-card-check{border-color:rgba(215,25,32,.35)}
html[data-theme="light"] .server-card.active .server-card-check{
  background:#d71920;
  border-color:#d71920;
  color:#fff;
}
html[data-theme="light"] .server-dropdown{
  background-color:#fff;
  border-color:rgba(215,25,32,.3);
}
html[data-theme="light"] .server-info{background:rgba(215,25,32,.07)}
html[data-theme="light"] .chat-room{border-color:rgba(215,25,32,.22)}
html[data-theme="light"] .chat-head{
  background:linear-gradient(180deg,rgba(215,25,32,.07),transparent);
}
html[data-theme="light"] .chat-head > span:first-child::before{
  background:#d71920;
  box-shadow:0 0 12px rgba(215,25,32,.48);
}
html[data-theme="light"] .chat-typing.show{background:rgba(215,25,32,.07)}
html[data-theme="light"] .chat-emoji-btn[aria-expanded="true"]{
  background:#d71920!important;
  border-color:#d71920!important;
  color:#fff!important;
}
html[data-theme="light"] .emoji-picker{
  border-color:rgba(215,25,32,.24);
  box-shadow:0 24px 60px rgba(80,0,12,.14);
}
html[data-theme="light"] .player-video-wrap .shaka-control-button:hover,
html[data-theme="light"] .player-video-wrap .shaka-overflow-menu-button:hover,
html[data-theme="light"] .player-video-wrap .shaka-fullscreen-button:hover{
  color:#b9141c;
  background:rgba(215,25,32,.14);
}
html[data-theme="light"] .player-video-wrap .shaka-seek-bar-container,
html[data-theme="light"] .player-video-wrap .shaka-volume-bar-container{
  --shaka-player-seek-bar-color:#d71920;
  --shaka-player-buffered-range-color:rgba(215,25,32,.38);
}
html[data-theme="light"] .player-video-wrap .shaka-range-element{accent-color:#d71920}
html[data-theme="light"] .player-video-wrap .shaka-overflow-menu,
html[data-theme="light"] .player-video-wrap .shaka-settings-menu{
  background:rgba(255,255,255,.98);
  border:1px solid rgba(215,25,32,.24);
  color:#240407;
  box-shadow:0 18px 45px rgba(39,5,10,.24);
}
html[data-theme="light"] .player-video-wrap .shaka-overflow-menu button,
html[data-theme="light"] .player-video-wrap .shaka-settings-menu button{
  color:#240407;
}
html[data-theme="light"] .player-video-wrap .shaka-overflow-menu button:hover,
html[data-theme="light"] .player-video-wrap .shaka-settings-menu button:hover{
  background:rgba(215,25,32,.10);
  color:#b9141c;
}

#newsGrid.news-feed{
  width:100%;
  max-width:960px;
  margin:0 auto;
}
.web-news-skeleton-featured,
.web-news-featured{
  height:clamp(280px,34vw,380px);
  margin:8px 0 18px;
  border-radius:20px;
}
.web-news-featured-content{height:100%;padding:clamp(20px,4vw,36px)}
.web-news-featured-title{max-width:760px;font-size:clamp(24px,3.2vw,36px)}
.web-news-row{
  align-items:center;
  gap:16px;
  margin:0 0 10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.web-news-row:hover{
  background:var(--surface-2);
  border-color:var(--border-strong);
}
.web-news-row-image{
  flex-basis:112px;
  width:112px;
  height:78px;
  border-radius:10px;
}
.web-news-row-title{font-size:15px;line-height:1.45;-webkit-line-clamp:3}
.web-news-index{padding:0 5px}
.web-news-detail-hero{height:clamp(300px,38vw,440px)}
.web-news-detail-content{
  max-width:720px;
  margin:0 auto;
  padding:20px 28px 56px;
}
.web-news-detail-title{font-size:clamp(28px,4vw,38px);line-height:1.25}
.web-news-detail-body{font-size:16px;line-height:1.85}

@media(max-width:900px){
  #newsGrid.news-feed{max-width:820px}
  .web-news-detail-content{padding-right:24px;padding-left:24px}
}
@media(max-width:620px){
  #newsGrid.news-feed{max-width:none}
  .web-news-skeleton-featured,
  .web-news-featured{
    height:clamp(210px,58vw,270px);
    margin:4px 0 14px;
    border-radius:15px;
  }
  .web-news-featured-content{padding:16px}
  .web-news-featured-title{font-size:clamp(20px,5.6vw,27px);line-height:1.28}
  .web-news-featured-meta{font-size:10px;gap:7px}
  .web-news-row{
    gap:11px;
    margin:0 0 8px;
    padding:10px;
    border-radius:12px;
  }
  .web-news-row-image{flex-basis:78px;width:78px;height:68px;border-radius:8px}
  .web-news-category{font-size:8px;letter-spacing:1px}
  .web-news-row-title{font-size:13px;line-height:1.38;-webkit-line-clamp:3}
  .web-news-row-date{font-size:9px}
  .web-news-index{padding:0 1px;font-size:9px}
  .web-news-detail-hero{height:clamp(190px,58vw,300px)}
  .web-news-detail-toolbar{padding-right:12px;padding-left:12px}
  .web-news-detail-category{bottom:14px;left:14px}
  .web-news-detail-content{padding:18px 18px 40px}
  .web-news-detail-title{font-size:clamp(23px,6vw,30px);line-height:1.28}
  .web-news-detail-date{font-size:10px}
  .web-news-detail-body{padding-top:15px;font-size:14px;line-height:1.75}
  .web-news-detail-body h1{font-size:19px}
  .web-news-detail-body h2{font-size:17px}
  .web-news-detail-body h3{font-size:15px}
  .web-news-detail-body img{border-radius:8px}
  .web-news-tags{gap:6px;margin-top:18px}
  .web-news-tags span{font-size:10px}
}
@media(max-width:380px){
  .web-news-featured-content{padding:13px}
  .web-news-featured-title{font-size:19px}
  .web-news-row{gap:9px;padding:8px}
  .web-news-row-image{flex-basis:68px;width:68px;height:62px}
  .web-news-index{display:none}
  .web-news-detail-content{padding-right:15px;padding-left:15px}
}

@media(min-width:721px){
  .player-main-layout > .chat-room{margin-top:58px}
}

@media(min-width:1000px){
  #newsGrid.news-feed{
    display:grid;
    width:100%;
    max-width:1180px;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:minmax(82px,auto);
    column-gap:18px;
    row-gap:0;
    margin:0 auto;
  }
  .web-news-featured{
    grid-column:1 / span 7;
    grid-row:1 / span 4;
    height:auto;
    min-height:390px;
    margin:8px 0 18px;
    border-radius:20px;
  }
  .web-news-featured-content{
    height:100%;
    min-height:390px;
    padding:26px;
  }
  .web-news-featured-title{font-size:clamp(25px,2.4vw,34px)}
  .web-news-row:nth-child(2){
    grid-column:8 / -1;
    grid-row:1;
  }
  .web-news-row:nth-child(3){
    grid-column:8 / -1;
    grid-row:2;
  }
  .web-news-row:nth-child(4){
    grid-column:8 / -1;
    grid-row:3;
  }
  .web-news-row:nth-child(5){
    grid-column:8 / -1;
    grid-row:4;
  }
  .web-news-row{
    min-width:0;
    gap:14px;
    margin:0;
    padding:10px 0;
  }
  .web-news-row-image{
    flex-basis:82px;
    width:82px;
    height:72px;
  }
  .web-news-row-title{font-size:14px}
  .web-news-row:nth-child(n+6){
    grid-column:span 6;
    align-self:stretch;
    margin-top:4px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
  }
  .web-news-row:nth-child(n+6) .web-news-row-image{
    flex-basis:104px;
    width:104px;
    height:82px;
  }
}

@media(min-width:621px){
  .web-news-detail{
    width:calc(100% - 48px);
    max-width:1180px;
  }
  .web-news-detail-toolbar{
    top:14px;
    height:60px;
    margin-bottom:-60px;
    padding:10px 18px;
  }
  .web-news-detail-hero{
    height:clamp(340px,42vw,500px);
    border:1px solid var(--border);
    border-radius:22px;
  }
  .web-news-detail-hero-shade{
    background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 35%,var(--pitch) 100%);
  }
  .web-news-detail-category{left:28px;bottom:26px}
  .web-news-detail-content{
    max-width:820px;
    padding:26px 32px 64px;
  }
  .web-news-detail-date{margin-bottom:14px}
  .web-news-detail-title{
    font-size:clamp(30px,3.8vw,42px);
    line-height:1.24;
  }
  .web-news-detail-divider{margin:22px 0}
  .web-news-author{padding-bottom:22px}
  .web-news-detail-body{padding-top:22px}
}

@media(min-width:1000px){
  .web-news-detail-hero{height:460px}
  .web-news-detail-content{max-width:800px;padding-top:32px}
  .web-news-detail-title{font-size:42px}
  .web-news-detail-body{font-size:16px;line-height:1.9}
}

@media(max-width:620px){
  .web-news-detail{
    width:100%;
    max-width:none;
  }
  .web-news-detail-hero{
    border:0;
    border-radius:0;
  }
}