/* ═══════════════════════════════════════════════════════════════════
   HDFPV DRONE SOCCER — PROFESSIONAL RED/WHITE/BLACK THEME v4.0
   Modern editorial aesthetic · Drone Soccer Championship branding
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;600;700;900&family=JetBrains+Mono:wght@600;800&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ─── DESIGN TOKENS ─── */
:root {
  --red:        #E8001D;
  --red-dk:     #B0001A;
  --red-xdk:    #750011;
  --red-lite:   #FF1F3A;
  --red-glow:   rgba(232,0,29,0.22);
  --red-tint:   rgba(232,0,29,0.06);
  --red-tint2:  rgba(232,0,29,0.12);

  --white:      #FFFFFF;
  --off-white:  #F8F8FA;
  --grey-50:    #F4F4F6;
  --grey-100:   #EBEBEF;
  --grey-200:   #D8D8DE;
  --grey-300:   #BEBEC8;
  --grey-400:   #9898A8;
  --grey-500:   #68687A;
  --grey-600:   #44444F;
  --grey-700:   #2E2E36;
  --grey-800:   #1C1C22;
  --grey-900:   #0E0E12;

  --black:      #0A0A0E;
  --black2:     #111116;
  --black3:     #18181F;

  --bg:         #FFFFFF;
  --bg2:        #F8F8FA;
  --bg3:        #F0F0F4;
  --bg4:        #E8E8EE;

  --border:     rgba(0,0,0,0.07);
  --border2:    rgba(0,0,0,0.12);
  --border3:    rgba(0,0,0,0.18);

  --txt:        #0A0A0E;
  --txt2:       #44444F;
  --txt3:       #68687A;
  --txt4:       #9898A8;

  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  22px;

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.11), 0 4px 12px rgba(0,0,0,0.07);
  --shadow-red: 0 4px 20px rgba(232,0,29,0.28), 0 2px 8px rgba(232,0,29,0.16);
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg3); }
::-webkit-scrollbar-thumb { background: var(--grey-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ══════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════ */
.nav {
  background: var(--black) !important;
  border-bottom: none !important;
  position: sticky !important;
  top: 0 !important; z-index: 100 !important;
  height: 62px !important;
  padding: 0 1.5rem !important;
  display: flex !important; align-items: center !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(12px) !important;
}

.nav::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--red) 0%, #FF4D5E 50%, var(--red) 100%);
  background-size: 200% auto;
  animation: nav-line 3s linear infinite;
}
@keyframes nav-line {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.nav-logo {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.18em !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}
.nav-logo span { color: var(--red); }

.nav-tabs {
  display: flex !important;
  gap: 4px !important;
  margin: 0 auto !important;
}

.nav-tab {
  padding: 0.42rem 1rem !important;
  border-radius: 7px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: var(--grey-400) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.nav-tab::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
  border-radius: 7px;
}
.nav-tab:hover { color: #fff !important; border-color: rgba(255,255,255,0.1) !important; }
.nav-tab:hover::before { transform: scaleX(1); }
.nav-tab > * { position: relative; z-index: 1; }
.nav-tab svg { position: relative; z-index: 1; }

.nav-tab.active {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
  box-shadow: var(--shadow-red) !important;
  font-weight: 700 !important;
}
.nav-tab.active::before { display: none; }

/* Export buttons in nav */
.nav > div:last-child .btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--grey-300) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.79rem !important;
  transition: all 0.18s !important;
}
.nav > div:last-child .btn:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-red) !important;
}

/* ══════════════════════════════════════════════
   PROFESSIONAL HEADER
══════════════════════════════════════════════ */
.professional-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--grey-100) !important;
  padding: 1.25rem 2rem !important;
  box-shadow: var(--shadow-xs) !important;
  position: relative !important;
  overflow: hidden !important;
}

.professional-header::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 6px; height: 100%;
  background: var(--red);
}

.professional-header::after {
  content: 'DRONE SOCCER';
  position: absolute;
  right: -24px; top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: 'Inter', sans-serif;
  font-size: 4.5rem;
  color: rgba(0,0,0,0.035);
  letter-spacing: 0.15em;
  pointer-events: none;
  white-space: nowrap;
}

.header-title {
  font-family: 'Inter', sans-serif !important;
    font-size: 2.8rem !important;
  text-shadow: none !important;
  line-height: 1 !important;
}

.header-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  color: var(--txt3) !important;
  margin-top: 0.3rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}

.logo-container {
  border: 2px solid var(--red) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 4px rgba(232,0,29,0.08), var(--shadow-red) !important;
  transition: all 0.25s !important;
}
.logo-container:hover {
  box-shadow: 0 0 0 6px rgba(232,0,29,0.14), 0 8px 30px rgba(232,0,29,0.4) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════
   PAGES & CARDS
══════════════════════════════════════════════ */
.page {
  background: var(--off-white) !important;
  min-height: calc(100vh - 62px - 180px) !important;
  padding: 1.75rem 2rem !important;
}

.card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
}

.card-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  margin-bottom: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.card-title::before {
  content: '';
  width: 3px; height: 14px;
  background: var(--red);
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.03em !important;
  border-radius: 9px !important;
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.18s;
  border-radius: inherit;
  pointer-events: none;
}
.btn:hover::after { background: rgba(255,255,255,0.1); }

.btn-primary {
  background: var(--black) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
.btn-primary:hover {
  background: var(--red) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-red) !important;
}

.btn-blue {
  background: var(--black) !important;
  color: #fff !important;
  border: none !important;
}
.btn-blue:hover {
  background: #1a1a22 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
}

.btn-gold {
  background: var(--off-white) !important;
  color: var(--txt) !important;
  border: 1.5px solid var(--border2) !important;
}
.btn-gold:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-red) !important;
}

.btn-ghost {
  background: transparent !important;
  border: 1.5px solid var(--border2) !important;
  color: var(--txt2) !important;
}
.btn-ghost:hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
  background: var(--red-tint) !important;
}

.btn-danger {
  background: var(--red-tint) !important;
  border: 1.5px solid rgba(232,0,29,0.2) !important;
  color: var(--red) !important;
}
.btn-danger:hover {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}

.btn-sm { padding: 0.42rem 0.9rem !important; font-size: 0.78rem !important; }

/* ══════════════════════════════════════════════
   INPUTS
══════════════════════════════════════════════ */
.input, .select {
  background: var(--white) !important;
  border: 1.5px solid var(--grey-200) !important;
  border-radius: 9px !important;
  color: var(--txt) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
.input:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(232,0,29,0.1) !important;
  background: var(--white) !important;
  outline: none !important;
}
.input::placeholder { color: var(--txt4) !important; }

/* ══════════════════════════════════════════════
   TEAM CARDS
══════════════════════════════════════════════ */
.team-card {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.team-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.team-card:hover {
  border-color: rgba(232,0,29,0.3) !important;
  box-shadow: 0 4px 20px rgba(232,0,29,0.1), var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}
.team-card:hover::before { transform: scaleY(1); }

.team-logo {
  border: 2px solid var(--grey-100) !important;
  box-shadow: none !important;
  transition: transform 0.22s !important;
}
.team-card:hover .team-logo { transform: scale(1.06) !important; }

/* ══════════════════════════════════════════════
   FORMAT & SIZE BUTTONS
══════════════════════════════════════════════ */
.format-btn {
  background: var(--white) !important;
  border: 2px solid var(--grey-200) !important;
  color: var(--txt3) !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  transition: all 0.18s !important;
}
.format-btn:hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
  background: var(--red-tint) !important;
}
.format-btn.selected {
  background: var(--black) !important;
  border-color: var(--black) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}

.size-btn {
  background: var(--white) !important;
  border: 2px solid var(--grey-200) !important;
  color: var(--txt3) !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.08em !important;
  transition: all 0.18s !important;
}
.size-btn:hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
  background: var(--red-tint) !important;
  transform: scale(1.05) !important;
}
.size-btn.selected {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  box-shadow: var(--shadow-red) !important;
}

/* ══════════════════════════════════════════════
   PHASE TABS
══════════════════════════════════════════════ */
.phase-tab {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--txt3) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  transition: all 0.18s !important;
}
.phase-tab:hover { border-color: var(--red) !important; color: var(--red) !important; }
.phase-tab.active {
  background: var(--black) !important;
  border-color: var(--black) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════
   MATCH CARDS (bracket & matches page)
══════════════════════════════════════════════ */
.vb-match {
  background: var(--white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.vb-match:hover {
  border-color: var(--red) !important;
  box-shadow: 0 6px 20px rgba(232,0,29,0.15) !important;
  transform: translateY(-3px) !important;
}
.vb-match.done { border-color: rgba(232,0,29,0.25) !important; background: #fffafa !important; }

.vb-match-num {
  background: var(--grey-50) !important;
  color: var(--txt4) !important;
  font-family: 'Inter', sans-serif !important;
}
.vb-match-num .vb-play-btn {
  background: var(--black) !important;
  border-radius: 5px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s !important;
}
.vb-match-num .vb-play-btn:hover { background: var(--red) !important; transform: scale(1.05) !important; }

.vb-team { font-family: 'Inter', sans-serif !important; font-size: 0.82rem !important; }
.vb-team.winner { background: rgba(232,0,29,0.06) !important; color: var(--red-dk) !important; }
.vb-team .vb-sc { font-family: 'JetBrains Mono', monospace !important; }
.vb-team.winner .vb-sc { color: var(--red) !important; }

/* ══════════════════════════════════════════════
   STATUS PILLS
══════════════════════════════════════════════ */
.status-pill { border-radius: 20px !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 0.75rem !important; }
.status-upcoming {
  background: var(--grey-50) !important;
  color: var(--txt3) !important;
  border: 1px solid var(--border) !important;
}
.status-done {
  background: rgba(232,0,29,0.06) !important;
  color: var(--red-dk) !important;
  border: 1px solid rgba(232,0,29,0.18) !important;
}

/* ══════════════════════════════════════════════
   MATCH LAUNCH BUTTON
══════════════════════════════════════════════ */
.match-launch-btn {
  background: var(--black) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  transition: all 0.18s !important;
  border: none !important;
}
.match-launch-btn:hover {
  background: var(--red) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-red) !important;
}

/* ══════════════════════════════════════════════
   GROUP CARDS
══════════════════════════════════════════════ */
.group-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}
.group-table th {
  background: var(--black) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
}
.group-table tr:hover td { background: var(--red-tint) !important; }
.group-table tr.qualify td:first-child { color: var(--red) !important; font-weight: 700 !important; }

.gm-row {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--white) !important;
  transition: all 0.18s !important;
}
.gm-row:hover { border-color: var(--red) !important; background: var(--red-tint) !important; }
.gm-row.done { border-color: rgba(232,0,29,0.15) !important; background: #fffafa !important; }
.gm-score.done { color: var(--red) !important; }
.gm-play { background: var(--red) !important; border-radius: 5px !important; }
.gm-play:hover { background: var(--red-dk) !important; }

/* ══════════════════════════════════════════════
   RESULTS / STANDINGS TABLE
══════════════════════════════════════════════ */
.rr-table th {
  background: var(--black) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
}
.rr-table tr:hover td { background: var(--red-tint) !important; }
.rr-table td { font-family: 'Inter', sans-serif !important; font-size: 0.9rem !important; }

.rank-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  background: var(--black) !important;
  color: #fff !important;
  border-radius: 6px !important;
  width: 30px !important; height: 30px !important;
}

/* ══════════════════════════════════════════════
   PODIUM
══════════════════════════════════════════════ */
.podium-1 { background: linear-gradient(180deg, var(--red) 0%, var(--red-dk) 100%) !important; box-shadow: 0 0 30px rgba(232,0,29,0.5) !important; }
.podium-2 { background: linear-gradient(180deg, var(--grey-700) 0%, var(--grey-900) 100%) !important; }
.podium-3 { background: linear-gradient(180deg, var(--grey-500) 0%, var(--grey-700) 100%) !important; }

/* ══════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════ */
.modal-overlay { backdrop-filter: blur(8px) !important; background: rgba(0,0,0,0.5) !important; }

.modal {
  background: var(--white) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06) !important;
}
.modal-title { color: var(--red) !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: 0.06em !important; }

/* ══════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════ */
.toast {
  background: var(--black) !important;
  border: 1.5px solid var(--red) !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  color: #fff !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 0 1px rgba(232,0,29,0.2) !important;
}

/* ══════════════════════════════════════════════
   UPLOAD ZONE
══════════════════════════════════════════════ */
.upload-zone {
  border: 2px dashed var(--grey-200) !important;
  border-radius: 12px !important;
  background: var(--off-white) !important;
  transition: all 0.2s !important;
}
.upload-zone:hover {
  border-color: var(--red) !important;
  background: var(--red-tint) !important;
}

/* ══════════════════════════════════════════════
   ADVANCE BAR
══════════════════════════════════════════════ */
.advance-bar {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
}
.advance-info { font-family: 'Inter', sans-serif !important; color: var(--txt3) !important; }

/* ══════════════════════════════════════════════
   SCOREBOARD OVERLAY — panel chrome
══════════════════════════════════════════════ */
#scoreboard-overlay {
  background: #f2f4f8 !important;
}

.sb-header {
  background: #000 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.sb-title {
  font-family: 'Oswald', 'Inter', sans-serif !important;
  color: #fff !important;
  letter-spacing: 0.06em !important;
}
.sb-match-label { color: #fff !important; font-family: 'Inter', sans-serif !important; }

/* Center column */
.sb-center {
  background: var(--white) !important;
  border-color: rgba(232,0,29,0.1) !important;
  box-shadow: 0 0 40px rgba(232,0,29,0.04) !important;
}
.sb-vs {
  color: var(--black) !important;
  font-family: 'Oswald', 'Inter', sans-serif !important;
  font-size: clamp(64px, 9vw, 120px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 3px 0 rgba(232,0,29,0.12) !important;
}
.sb-timer {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--black) !important;
  font-weight: 800 !important;
}
.sb-timer.running { color: var(--red) !important; }
.sb-timer.last10 { color: var(--red) !important; }
.sb-timer-label { color: var(--txt4) !important; font-family: 'Inter', sans-serif !important; letter-spacing: 0.14em !important; }

/* Side logos */
.sb-side-org-logo {
  border: 3px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.45) !important;
}

/* Square score box */
.sb-score-square {
  box-shadow: inset 0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.5) !important;
}
.sb-score {
  font-family: 'Oswald', 'Inter', sans-serif !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55) !important;
}

/* Sidebar controls */
#sb-sidebar {
  background: var(--white) !important;
  border-left: 1px solid var(--grey-100) !important;
  box-shadow: -4px 0 24px rgba(0,0,0,0.06) !important;
}
.sb-sidebar-hdr {
  color: var(--red) !important;
  font-family: 'Inter', sans-serif !important;
  border-bottom: 1px solid var(--grey-100) !important;
}
.sb-sidebar-lbl { color: var(--txt4) !important; font-family: 'Inter', sans-serif !important; }

#sb-sidebar-toggle {
  background: var(--white) !important;
  border: 1px solid var(--grey-200) !important;
  color: var(--txt3) !important;
  box-shadow: -2px 0 10px rgba(0,0,0,0.06) !important;
}
#sb-sidebar-toggle:hover { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }

/* Center buttons */
.sb-btn-start { background: linear-gradient(135deg, #1DBF6F, #0F8042) !important; }
.sb-btn-start.running { background: linear-gradient(135deg, var(--red-lite), var(--red-dk)) !important; box-shadow: 0 2px 10px rgba(232,0,29,0.3) !important; }
.sb-btn-reset { background: var(--grey-50) !important; color: var(--txt3) !important; border: 1px solid var(--grey-200) !important; }
.sb-btn-reset:hover { background: var(--grey-100) !important; color: var(--txt) !important; }
.sb-btn-save { background: linear-gradient(135deg, var(--black), var(--grey-800)) !important; }
.sb-btn-save:hover { background: var(--red) !important; }

.sb-ctrl-full {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  border-radius: 8px !important;
}
.sb-ctrl-start { background: linear-gradient(135deg, #1DBF6F, #0F8042) !important; color: #fff !important; }
.sb-ctrl-start.running { background: linear-gradient(135deg, var(--red-lite), var(--red-dk)) !important; }
.sb-ctrl-grey { background: var(--grey-50) !important; color: var(--txt3) !important; border: 1px solid var(--grey-200) !important; }
.sb-ctrl-grey:hover { background: var(--grey-100) !important; color: var(--txt) !important; }
.sb-ctrl-save { background: linear-gradient(135deg, var(--black), var(--grey-700)) !important; color: #fff !important; }
.sb-ctrl-save:hover { background: var(--red) !important; }

/* Score control pills */
.sb-ctrl-group { background: var(--grey-50) !important; border: 1px solid var(--grey-100) !important; border-radius: 10px !important; }
.sb-ctrl-row { border-bottom: 1px solid var(--grey-100) !important; }
.sb-ctrl-label { color: var(--txt4) !important; font-family: 'Inter', sans-serif !important; }

.sb-ctrl-plus-red { background: rgba(232,0,29,0.08) !important; color: var(--red) !important; border: 1px solid rgba(232,0,29,0.18) !important; }
.sb-ctrl-minus-red { background: rgba(232,0,29,0.04) !important; color: var(--red-dk) !important; border: 1px solid rgba(232,0,29,0.1) !important; }
.sb-ctrl-plus-blue { background: rgba(30,136,229,0.08) !important; color: #1565c0 !important; border: 1px solid rgba(30,136,229,0.18) !important; }
.sb-ctrl-minus-blue { background: rgba(30,136,229,0.04) !important; color: #0d47a1 !important; border: 1px solid rgba(30,136,229,0.1) !important; }
.sb-ctrl-plus-gold, .sb-ctrl-minus-gold { background: rgba(232,0,29,0.05) !important; color: var(--txt2) !important; border: 1px solid var(--border) !important; }

.sb-ctrl-pill {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  border-radius: 7px !important;
  transition: all 0.16s !important;
}
.sb-ctrl-pill:hover { transform: scale(1.08) !important; filter: brightness(1.15) !important; }

/* Match nav dots */
.sb-match-dot {
  background: var(--grey-50) !important;
  color: var(--txt4) !important;
  border: 1px solid var(--grey-200) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  transition: all 0.18s !important;
}
.sb-match-dot:hover { border-color: var(--red) !important; color: var(--red) !important; }
.sb-match-dot.active { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
.sb-match-dot.done { background: rgba(232,0,29,0.06) !important; color: var(--red-dk) !important; border-color: rgba(232,0,29,0.22) !important; }

/* Arduino section */
.sb-ard-toggle { background: var(--grey-50) !important; border: 1px solid var(--grey-200) !important; color: var(--txt3) !important; font-family: 'Inter', sans-serif !important; }
.sb-ard-toggle:hover { background: var(--grey-100) !important; }
.sb-ard-toggle.connected { color: #16a34a !important; border-color: rgba(22,163,74,0.3) !important; background: rgba(22,163,74,0.04) !important; }
.sb-ard-select { background: var(--white) !important; border: 1px solid var(--grey-200) !important; color: var(--txt) !important; font-family: 'Inter', sans-serif !important; }
.sb-ard-btn-conn { background: var(--black) !important; transition: all 0.18s !important; }
.sb-ard-btn-conn:hover { background: var(--red) !important; }
.sb-conn-status { color: var(--txt4) !important; font-family: 'Inter', sans-serif !important; }

/* Results list */
.sb-results-wrap { background: var(--grey-50) !important; border: 1px solid var(--grey-100) !important; border-radius: 8px !important; }
.sb-result-row { border-bottom: 1px solid var(--grey-100) !important; }
.sb-result-team { color: var(--txt) !important; font-family: 'Inter', sans-serif !important; }
.sb-result-score { color: var(--red) !important; font-family: 'JetBrains Mono', monospace !important; }
.sb-result-empty { color: var(--txt4) !important; font-family: 'Inter', sans-serif !important; }

/* ══════════════════════════════════════════════
   RESULT SCREEN
══════════════════════════════════════════════ */
#result-screen { background: var(--black) !important; }
.rs-bg { background: radial-gradient(ellipse at center, rgba(232,0,29,0.06) 0%, transparent 70%) !important; }
.rs-title { font-family: 'Inter', sans-serif !important; letter-spacing: 0.1em !important; }
.rs-winner-red { background: linear-gradient(135deg, var(--red), var(--red-dk)) !important; box-shadow: 0 4px 20px rgba(232,0,29,0.45) !important; }
.rs-winner-blue { background: linear-gradient(135deg, #1e88e5, #0d47a1) !important; }
.rs-winner-draw { background: linear-gradient(135deg, var(--grey-700), var(--grey-900)) !important; }
.rs-stat {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}
.rs-stat-label { font-family: 'Inter', sans-serif !important; }
.rs-stat-val { font-family: 'JetBrains Mono', monospace !important; }
.rs-btn-next { background: linear-gradient(135deg, var(--red), var(--red-dk)) !important; }
.rs-btn-next:hover { box-shadow: 0 6px 20px rgba(232,0,29,0.45) !important; }

/* ══════════════════════════════════════════════
   BRACKET VIEW PAGE
══════════════════════════════════════════════ */
.bv-canvas-wrap { background: var(--off-white) !important; }

/* FAB bar */
#bv-fab-bar {
  background: rgba(255,255,255,0.97) !important;
  border: 1px solid var(--grey-100) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.05) !important;
  backdrop-filter: blur(16px) !important;
}
.bvfab-btn {
  border: 1px solid var(--grey-200) !important;
  background: var(--grey-50) !important;
  color: var(--txt3) !important;
  border-radius: 7px !important;
  transition: all 0.16s !important;
}
.bvfab-btn:hover { border-color: var(--red) !important; color: var(--red) !important; background: var(--red-tint) !important; transform: scale(1.08) !important; }
.bvfab-label { color: var(--txt4) !important; font-family: 'Inter', sans-serif !important; font-size: 0.6rem !important; }
.bvfab-zoom-val { color: var(--txt) !important; font-family: 'JetBrains Mono', monospace !important; }
.bvfab-settings-btn { border: 1.5px solid rgba(232,0,29,0.25) !important; background: var(--red-tint) !important; color: var(--red) !important; }
.bvfab-settings-btn:hover, .bvfab-settings-btn.active { background: var(--red) !important; color: #fff !important; }

/* Bottom drawer */
#bv-drawer {
  background: rgba(255,255,255,0.98) !important;
  border-top: 2px solid rgba(232,0,29,0.18) !important;
  box-shadow: 0 -4px 28px rgba(0,0,0,0.08) !important;
}
.bvd-chip {
  background: var(--grey-50) !important;
  border: 1.5px solid var(--grey-200) !important;
  color: var(--txt3) !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: 20px !important;
  transition: all 0.16s !important;
}
.bvd-chip:hover { border-color: var(--red) !important; color: var(--red) !important; background: var(--red-tint) !important; }
.bvd-chip.active-a { background: linear-gradient(135deg, var(--red), var(--red-dk)) !important; border-color: var(--red-dk) !important; color: #fff !important; }
.bvd-chip.active-b { background: linear-gradient(135deg, #1565c0, #0d47a1) !important; border-color: #0d47a1 !important; color: #fff !important; }
.bvd-chip.active { background: var(--black) !important; border-color: var(--black) !important; color: #fff !important; }
.bvd-label { color: var(--txt4) !important; font-family: 'Inter', sans-serif !important; }

.bvd-action-btn { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; border-radius: 8px !important; transition: all 0.16s !important; }
.bvd-btn-full { background: var(--red-tint) !important; color: var(--red) !important; border: 1.5px solid rgba(232,0,29,0.2) !important; }
.bvd-btn-full:hover { background: var(--red) !important; color: #fff !important; }
.bvd-btn-branch-a { background: rgba(198,40,40,0.07) !important; color: #c62828 !important; border: 1.5px solid rgba(198,40,40,0.2) !important; }
.bvd-btn-branch-a:hover { background: #c62828 !important; color: #fff !important; }
.bvd-btn-branch-b { background: rgba(21,101,192,0.07) !important; color: #1565c0 !important; border: 1.5px solid rgba(21,101,192,0.2) !important; }
.bvd-btn-branch-b:hover { background: #1565c0 !important; color: #fff !important; }
.bvd-btn-fs { background: linear-gradient(135deg, var(--red), var(--red-dk)) !important; box-shadow: 0 2px 10px rgba(232,0,29,0.28) !important; }
.bvd-btn-fs:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 16px rgba(232,0,29,0.4) !important; }

/* ══════════════════════════════════════════════
   BRACKET / FULLSCREEN BARS
══════════════════════════════════════════════ */
#bk-fs-bar, #bv-full-fs-bar, #bv-bfs-bar {
  background: var(--white) !important;
  border-bottom: 3px solid var(--red) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
.bk-fs-title-main, .bvffs-title, .bfs-title-main {
  font-family: 'Inter', sans-serif !important;
  color: var(--red) !important;
  letter-spacing: 0.08em !important;
}
.bk-fs-title-sub, .bfs-title-sub { color: var(--txt4) !important; font-family: 'Inter', sans-serif !important; }

.bk-fs-zoom-btn, .bvffs-zoom-btn, .bfs-zoom-btn, .bvfab-btn {
  border: 1.5px solid var(--grey-200) !important;
  background: var(--grey-50) !important;
  color: var(--txt3) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.15s !important;
}
.bk-fs-zoom-btn:hover, .bvffs-zoom-btn:hover, .bfs-zoom-btn:hover { border-color: var(--red) !important; color: var(--red) !important; background: var(--red-tint) !important; }
.bk-fs-zoom-val, .bvffs-zoom-val, .bfs-zoom-val { color: var(--txt) !important; font-family: 'JetBrains Mono', monospace !important; }
.bk-fs-fit-btn, .bvffs-fit-btn, .bfs-fit-btn { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }
.bk-fs-fit-btn:hover, .bvffs-fit-btn:hover, .bfs-fit-btn:hover { border-color: var(--red) !important; color: var(--red) !important; }

.bk-fs-close-btn, .bvffs-close-btn, .bfs-close-btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border: 1.5px solid rgba(232,0,29,0.3) !important;
  background: var(--red-tint) !important;
  color: var(--red) !important;
  transition: all 0.18s !important;
}
.bk-fs-close-btn:hover, .bvffs-close-btn:hover, .bfs-close-btn:hover { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }

#bk-fs-statusbar, #bv-full-fs-statusbar, #bv-bfs-statusbar {
  background: var(--white) !important;
  border-top: 1px solid var(--grey-100) !important;
  color: var(--txt4) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Canvas backgrounds */
#bk-fs-canvas-wrap, #bv-full-fs-canvas-wrap, #bv-bfs-canvas-wrap { background: var(--off-white) !important; }

/* ══════════════════════════════════════════════
   FULLSCREEN BRACKET VIEWS backgrounds
══════════════════════════════════════════════ */
#bracket-fs, #bv-full-fs, #bv-branch-fs, #bv-fullscreen { background: var(--off-white) !important; }
.bv-fs-header { background: var(--white) !important; border-bottom-color: var(--red) !important; }
.bv-fs-title { color: var(--red) !important; font-family: 'Inter', sans-serif !important; }
.bv-fs-close { border-color: rgba(232,0,29,0.25) !important; color: var(--red) !important; background: var(--red-tint) !important; font-family: 'Inter', sans-serif !important; }
.bv-fs-close:hover { background: var(--red) !important; color: #fff !important; }
.bv-zoom-btn, .bvffs-zoom-btn { font-family: 'Inter', sans-serif !important; }

/* ══════════════════════════════════════════════
   BRANCH FULLSCREEN SWITCH BTN
══════════════════════════════════════════════ */
#bv-bfs-switch { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; }

/* ══════════════════════════════════════════════
   SCOREBOARD OVERLAY — panel chrome
══════════════════════════════════════════════ */
.sb-logo-left, .sb-logo-right {
  border: 1.5px solid rgba(232,0,29,0.2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════
   MISC / TAGS
══════════════════════════════════════════════ */
.tag { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; }
.tag-gold {
  background: rgba(232,0,29,0.06) !important;
  color: var(--red) !important;
  border: 1px solid rgba(232,0,29,0.2) !important;
}

/* ── Group badge pills ── */
.group-badge-pill { font-family: 'Inter', sans-serif !important; letter-spacing: 0.1em !important; }

/* ── Bracket page header actions ── */
#page-bracket > div:first-child .btn-gold {
  background: var(--off-white) !important;
  border: 1.5px solid var(--border2) !important;
  color: var(--txt) !important;
}
#page-bracket > div:first-child .btn-ghost:last-child {
  border-color: rgba(232,0,29,0.25) !important;
  color: var(--red) !important;
}
#page-bracket > div:first-child .btn-ghost:last-child:hover {
  background: var(--red) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════
   LIVE REALTIME BADGES
══════════════════════════════════════════════ */
.rt-live-match-card {
  border-color: rgba(34,197,94,0.6) !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.12), 0 4px 16px rgba(0,0,0,0.08) !important;
}
.rt-live-score-badge {
  background: rgba(34,197,94,0.1) !important;
  border: 1px solid rgba(34,197,94,0.3) !important;
  color: #16a34a !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ══════════════════════════════════════════════
   KBD SHORTCUT KEYS
══════════════════════════════════════════════ */
kbd {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  background: var(--black) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
}

/* ══════════════════════════════════════════════
   HOVER ANIMATIONS — micro-interactions
══════════════════════════════════════════════ */
@keyframes shimmer-red {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.btn-primary:hover, .sb-btn-save:hover, .bvd-btn-fs:hover {
  background-image: linear-gradient(135deg, var(--red-lite) 0%, var(--red) 50%, var(--red-dk) 100%) !important;
  background-size: 200% auto !important;
  animation: shimmer-red 0.8s ease !important;
}

/* Ripple effect on score control pills */
.sb-ctrl-pill { position: relative !important; overflow: hidden !important; }

/* ══════════════════════════════════════════════
   TYPOGRAPHY OVERRIDES — heading hierarchy
══════════════════════════════════════════════ */
h2 {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.02em !important;
  font-weight: 800 !important;
}

/* Section headings in match/bracket pages */
#page-bracket h2, #page-matches h2, #page-teams h2, #page-results h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: var(--black) !important;
}

/* Sub-labels */
#page-bracket p, #page-matches p, #page-teams p, #page-results p {
  font-family: 'Inter', sans-serif !important;
  color: var(--txt3) !important;
}

/* ══════════════════════════════════════════════
   COLOR-DOT refinement
══════════════════════════════════════════════ */
.color-dot { box-shadow: 0 0 0 2px rgba(0,0,0,0.08) !important; }