:root {
  --bg: #07070a;
  --card: #14141b;
  --card2: #1c1c25;
  --text: #f7f7fb;
  --muted: #aaaab8;
  --red: #ff263f;
  --gold: #ffca3a;
  --line: rgba(255,255,255,.1);
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top, #242232, var(--bg) 55%); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.shell { max-width: 720px; margin: 0 auto; padding: 16px 16px 96px; }
.admin-shell { max-width: 1180px; margin: 0 auto; padding: 16px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.brand { font-weight: 900; letter-spacing: .08em; font-size: 22px; }
.brand span { color: var(--red); }
.badge { font-size: 12px; font-weight: 800; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); }
.badge.live { background: rgba(255,38,63,.16); color: #ff6b7a; border-color: rgba(255,38,63,.35); }
.badge.offline { background: rgba(255,255,255,.06); color: var(--muted); }
.card, .match-card, .chat-card { background: rgba(20,20,27,.88); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 50px rgba(0,0,0,.28); }
.card { padding: 20px; }
.center { text-align: center; padding: 42px 20px; }
.offline-icon { font-size: 54px; }
.upcoming-box { margin: 18px auto; padding: 16px; max-width: 480px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; }
.upcoming-box h2 { margin: 5px 0 8px; font-size: 24px; }
.upcoming-time { color: var(--gold); font-weight: 900; }
h1, h2, p { margin-top: 0; }
p, .small, .hint { color: var(--muted); }
.primary, button { border: 0; border-radius: 12px; padding: 12px 15px; font-weight: 800; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.primary { background: linear-gradient(135deg, var(--red), #ff7a18); color: white; }
.danger { background: #5a1420; color: #ffd4da; }
.ghost { background: rgba(255,255,255,.08); color: var(--text); }
.hidden { display: none !important; }
.match-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 8px; }
.red-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 18px var(--red); animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .35; transform: scale(.9); } }
.match-card h1 { margin: 2px 0 0; font-size: 22px; }
.player { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.player iframe, .player video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.player-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 12px; background: rgba(0,0,0,.55); color: white; font-weight: 800; text-align: center; padding: 18px; }
.player-overlay .ghost { border: 1px solid rgba(255,255,255,.18); }
.chat-card { margin-top: 12px; padding: 12px; }
.chat-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.messages { height: 210px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.msg { background: rgba(255,255,255,.06); border-radius: 12px; padding: 8px 10px; font-size: 14px; }
.msg b { color: var(--gold); margin-right: 6px; }
.disabled-input { width: 100%; margin-top: 10px; background: rgba(255,255,255,.08); color: var(--muted); }
.download-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(10,10,14,.94); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 12px; backdrop-filter: blur(18px); }
.download-bar span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.download-bar a { background: var(--red); color: white; text-decoration: none; font-weight: 900; padding: 10px 12px; border-radius: 12px; }
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 16px; }
.modal-card { width: min(420px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; text-align: center; box-shadow: 0 20px 80px rgba(0,0,0,.5); }
.modal-icon { font-size: 58px; }
.modal-card .primary, .modal-card .ghost { width: 100%; margin-top: 10px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-card { display: flex; flex-direction: column; gap: 10px; }
label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 13px; }
input { width: 100%; background: #0f0f15; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.checkbox { flex-direction: row; align-items: center; }
.checkbox input { width: auto; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
pre { white-space: pre-wrap; background: #0f0f15; border-radius: 12px; padding: 12px; overflow: auto; color: #d8d8e8; min-height: 220px; }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } .brand { font-size: 18px; } }

/* Public live landing upgrade — 2026-05-16 */
.public-shell { max-width: 980px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.hero-card { position: relative; min-height: 150px; border-radius: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 70px rgba(0,0,0,.42); background: #111118; margin-bottom: 8px; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); filter: saturate(1.08); }
.hero-bg.no-image { background: radial-gradient(circle at 20% 10%, rgba(255,202,58,.24), transparent 34%), radial-gradient(circle at 80% 20%, rgba(255,38,63,.26), transparent 36%), linear-gradient(145deg, #171722, #08080c); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,8,.18), rgba(5,5,8,.78) 58%, rgba(5,5,8,.94)); }
.hero-content { position: relative; z-index: 1; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
.hero-kicker { align-self: flex-start; color: #ffd7dd; background: rgba(255,38,63,.22); border: 1px solid rgba(255,38,63,.38); font-size: 12px; font-weight: 900; letter-spacing: .12em; border-radius: 999px; padding: 7px 10px; margin-bottom: 12px; }
.hero-card.is-live .hero-kicker { color: white; background: rgba(255,38,63,.9); box-shadow: 0 0 26px rgba(255,38,63,.38); }
.hero-card h1 { font-size: clamp(20px, 4.6vw, 30px); line-height: .98; margin: 0 0 7px; letter-spacing: -.04em; text-shadow: 0 5px 24px rgba(0,0,0,.45); }
.teams-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; align-items: center; margin-bottom: 7px; }
.team-box { min-width: 0; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 9px 10px; backdrop-filter: blur(12px); }
.team-box.away { text-align: right; }
.team-label { display: block; color: rgba(255,255,255,.6); font-size: 10px; font-weight: 900; letter-spacing: .10em; margin-bottom: 2px; }
.team-box strong { display: block; font-size: clamp(15px, 3.8vw, 22px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-pill { align-self: center; font-weight: 1000; color: #0d0d11; background: linear-gradient(135deg, var(--gold), #fff2a8); border-radius: 999px; padding: 8px 10px; box-shadow: 0 8px 26px rgba(255,202,58,.28); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: #f3f3fa; font-weight: 800; }
.hero-meta span { background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 8px; font-size: 12px; }
#liveNowText { color: #ffb6c0; }
.countdown-text { margin-top: 10px; color: var(--gold); font-weight: 900; }
.upcoming-grid span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.upcoming-panel { margin-top: 12px; }
.section-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.section-head h2 { margin: 3px 0 0; }
.mini-badge { color: var(--gold); background: rgba(255,202,58,.10); border: 1px solid rgba(255,202,58,.22); border-radius: 999px; padding: 7px 10px; font-size: 12px; font-weight: 900; }
.upcoming-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.upcoming-grid > div { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 11px; }
.upcoming-grid .wide { grid-column: 1 / -1; }
.upcoming-note { margin-bottom: 14px; }
.chat-head > div { display: flex; flex-direction: column; gap: 2px; }
.tiny-button { padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.08); color: var(--muted); font-size: 12px; }
.msg { display: block; }
.msg > div { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.msg p { margin: 0; color: #f1f1f7; }
.msg em { font-style: normal; color: #101014; background: var(--gold); font-size: 11px; font-weight: 1000; border-radius: 999px; padding: 1px 6px; }
.msg small { margin-left: auto; color: rgba(255,255,255,.42); font-size: 11px; }
.notice-msg { background: rgba(255,202,58,.10); border: 1px solid rgba(255,202,58,.16); }
.notice-msg p { color: #ffe8a8; }
.empty-chat { min-height: 170px; border: 1px dashed rgba(255,255,255,.13); border-radius: 14px; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 18px; }
@media (max-width: 760px) {
  .public-shell { padding-left: 12px; padding-right: 12px; }
  .hero-card, .hero-content { min-height: 150px; }
  .hero-content { padding: 14px; }
  .teams-row { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 6px; }
  .team-box { padding: 7px 8px; }
  .team-box.away { text-align: right; }
  .vs-pill { justify-self: center; padding: 6px 8px; font-size: 12px; }
  .section-head { flex-direction: column; }
}