:root {
  --red:#C8102E; --black:#0a0a0a; --panel:#111; --border:#222;
  --text:#e8e8e8; --muted:#555; --green:#22c55e; --yellow:#eab308;
  --card-bg:#141414; --foot-bg:#0d0d0d;
  --row-divider:#181818; --row-hover:#141414;
  --vs-color:#2a2a2a; --conn-color:#2a2a2a;
  --blue-bg:#0d1525; --red-bg:#1a0d0d;
  --b-blue-bg:#0d1828; --b-red-bg:#1e0d0d; --b-win-bg:#071a07;
  --b-team-border:#222; --b-tb-bg:#2a2a2a;
  --input-bg:#1a1a1a; --autocomplete-bg:#1a1a1a; --autocomplete-hover:#252525;
  --minimap-bg:#0d0d0d; --minimap-border:#1e1e1e;
  --m-card-border:#1e1e1e; --m-sep-bg:#1a1a1a;
  --div-btn-bg:#1a1a1a; --toolbar-inner-border:#1a1a1a;
  --winner-none-color:#2a2a2a; --loser-color:#505050;
  --ring-badge-style:#2a1f00;
  --card-shadow:none;
  --lmh-color:#7cb8f0;
}
[data-theme="light"] {
  --black:#e9ecf1; --panel:#e9ecf1; --border:#c9cfd8; --yellow:#b45309;
  --text:#111111; --muted:#495261;
  --card-bg:#ffffff; --foot-bg:#f3f5f8;
  --row-divider:#ccd2db; --row-hover:#eef1f6;
  --vs-color:#9aa2af; --conn-color:#b7bfca;
  --blue-bg:#dbeafe; --red-bg:#fee2e2;
  --b-blue-bg:#dbeafe; --b-red-bg:#fee2e2; --b-win-bg:#dcfce7;
  --b-team-border:#d7dce3; --b-tb-bg:#d7dce3;
  --input-bg:#f3f4f6; --autocomplete-bg:#ffffff; --autocomplete-hover:#eef1f6;
  --minimap-bg:#dde1e7; --minimap-border:#c3c9d2;
  --m-card-border:#d7dce3; --m-sep-bg:#ccd2db;
  --div-btn-bg:#f3f4f6; --toolbar-inner-border:#d7dce3;
  --winner-none-color:#9aa2af; --loser-color:#6b7484;
  --ring-badge-style:#fef3c7;
  --card-shadow:0 1px 2px rgba(16,24,40,0.06);
  --lmh-color:#1d4ed8;
}
* { box-sizing:border-box; margin:0; padding:0; }
/* Without this, mobile Safari's rubber-band overscroll bounce at the top of
   the page reveals blank space above the sticky header (position:sticky
   can't follow the page past its own top edge during the bounce) — visible
   as a "gap between header and top of screen" whenever the page overscrolls. */
html { background:var(--black); overscroll-behavior-y:contain; }
body { background:var(--black); color:var(--text); font-family:'DM Sans',sans-serif; min-height:100vh; display:flex; flex-direction:column; overscroll-behavior-y:contain; }

header {
  background:var(--panel); border-bottom:2px solid var(--red);
  padding:12px 20px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:110;
}
.header-logo-img { height:32px; width:32px; object-fit:contain; flex-shrink:0; border-radius:4px; }
.logo {
  font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:2px; color:var(--red);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.logo span { color:var(--text); }
.header-extra {
  display:none; position:absolute; top:100%; right:20px;
  flex-direction:column; align-items:flex-end; gap:10px;
  padding:10px; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 6px 12px rgba(0,0,0,0.2); z-index:109;
}
.header-extra.open { display:flex; }
.header-extra-box {
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  border:1px solid var(--border); border-radius:6px; padding:6px;
}
.header-extra-box .admin-link { text-align:center; }
.admin-link { font-family:'DM Sans',sans-serif; font-size:10px; color:#333; text-decoration:none; }
.admin-link:hover { color:var(--muted); }
[data-theme="light"] .admin-link { color:#c3c9d2; }
[data-theme="light"] .admin-link:hover { color:var(--muted); }
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'DM Sans',sans-serif; font-size:13px; line-height:1;
  padding:5px 9px; border-radius:6px; border:1px solid var(--border);
  background:var(--div-btn-bg); color:var(--muted); cursor:pointer;
  transition:background 0.15s, color 0.15s; flex-shrink:0;
}
.theme-toggle:hover { color:var(--text); }
.header-hamburger {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; padding:5px 9px; border-radius:6px;
  border:1px solid var(--border); background:var(--div-btn-bg); color:var(--muted);
  cursor:pointer; flex-shrink:0;
}

.live-status {
  display:flex; align-items:center; gap:6px;
  font-family:'DM Sans',sans-serif; font-size:11px; color:var(--muted);
  flex-shrink:0; white-space:nowrap; margin-left:auto;
}
.live-spinner {
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--red);
  opacity:0; animation:live-spin 0.7s linear infinite;
}
.live-spinner.spinning { opacity:1; }
@keyframes live-spin { to { transform:rotate(360deg); } }

.tabs {
  display:flex; border-bottom:1px solid var(--border); background:var(--panel); padding:0 20px;
  position:sticky; top:var(--header-h,56px); z-index:105;
}
.tab {
  font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; padding:11px 18px; cursor:pointer;
  color:var(--muted); border-bottom:2px solid transparent; transition:all 0.15s;
}
.tab:hover { color:var(--text); }
.tab.active { color:var(--text); border-bottom-color:var(--red); }
.tab-content { display:none; }
.tab-content.active { display:block; }