:root {
    --red: #d32f2f; --red-dark: #b71c1c; --red-glow: rgba(211,47,47,0.35);
    --red-ultra: rgba(211,47,47,0.55);
    --blue: #1e88e5; --blue-dark: #1565c0; --blue-glow: rgba(30,136,229,0.3);
    --gold: #ffd700; --gold-dark: #f9a825;
    --black: #111111; --black2: #1a1a1a; --black3: #222222;
    --bg: #f7f7f7; --bg2: #ffffff; --bg3: #f0f0f0;
    --border: rgba(0,0,0,0.09);
    --text: #111111; --text2: #555555;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 19px; }
  body { font-family: 'Inter', 'Segoe UI', Roboto, -apple-system, sans-serif !important; background: #f4f4f6; color: var(--text); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
  body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(135deg, rgba(211,47,47,0.04) 0%, transparent 50%), linear-gradient(225deg, rgba(0,0,0,0.02) 0%, transparent 50%); pointer-events: none; z-index: 0; }

  .nav { background: #ffffff; border-bottom: 3px solid var(--red); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 100; padding: 0 2rem; height: 70px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 16px rgba(211,47,47,0.10), 0 1px 4px rgba(0,0,0,0.06); }
  .nav-logo { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.4rem; background: linear-gradient(90deg, var(--red) 30%, #111 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.04em; }
  .nav-tabs { display: flex; gap: 0.5rem; }
  .nav-tab { padding: 0.5rem 1.2rem; border-radius: 4px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; border: 1.5px solid transparent; color: var(--text2); letter-spacing: 0.05em; background: none; display: inline-flex; align-items: center; gap: 0.35rem; }
  .nav-tab:hover { color: var(--red); border-color: var(--red); background: rgba(211,47,47,0.06); }
  .nav-tab.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 2px 10px var(--red-glow); }
  .nav-tab svg { width: 14px; height: 14px; flex-shrink: 0; }

  .page { display: none; padding: 2rem; max-width: 100%; margin: 0 auto; position: relative; z-index: 1; overflow-x: hidden; width: 100vw; }
  .page.active { display: block; animation: hdfpv-page-in 0.32s cubic-bezier(0.22,1,0.36,1); }
  @keyframes hdfpv-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .page.active { animation: none; } }

  .fade-in-item { animation: hdfpv-fade-in 0.35s cubic-bezier(0.22,1,0.36,1) both; }
  @keyframes hdfpv-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .fade-in-item { animation: none; } }

  .card { background: #ffffff; border: 1.5px solid var(--border); border-radius: 16px; padding: 1.85rem; box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease; }
  .card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: rgba(211,47,47,0.25); }
  .card-title { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 1.15rem; }

  /* Flat button system — border-radius 4px, không gradient, hover tối màu + đổ bóng nhẹ (Trắng-Đen-Đỏ) */
  .btn { padding: 0.7rem 1.5rem; border-radius: 4px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; cursor: pointer; border: 1.5px solid transparent; transition: all 0.18s ease; display: inline-flex; align-items: center; gap: 0.4rem; }
  .btn svg { width: 15px; height: 15px; flex-shrink: 0; }
  .btn-primary { background: var(--red); color: white; border-color: var(--red); }
  .btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-1px); box-shadow: 0 6px 18px -4px var(--red-glow); }
  .btn-blue { background: #fff; color: #111; border-color: #111; }
  .btn-blue:hover { background: #f4f4f4; }
  .btn-gold { background: #111111; color: #ffffff; border-color: #111; }
  .btn-gold:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px -4px var(--red-glow); }
  .btn-ghost { background: #fff; border-color: #111; color: #111; }
  .btn-ghost:hover { border-color: #111; color: #111; background: #f4f4f4; }
  .btn-danger { background: #fff; border-color: var(--red); color: var(--red); }
  .btn-danger:hover { background: rgba(211,47,47,0.06); }
  .btn-sm { padding: 0.5rem 1rem; font-size: 1rem; }
  .btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }

  /* ==================== FLAT BUTTON COMPONENT (header) ==================== */
  .btn-flat { border-radius: 4px; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: all 0.18s ease; display: inline-flex; align-items: center; gap: 0.4rem; border: 1.5px solid transparent; padding: 0.65rem 1.3rem; font-size: 0.9rem; }
  .btn-flat:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
  .btn-flat svg { width: 14px; height: 14px; flex-shrink: 0; }
  .btn-flat-sm { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
  .btn-flat-primary { background: var(--red); color: #fff; }
  .btn-flat-primary:hover { background: var(--red-dark); box-shadow: 0 6px 18px -4px var(--red-glow); transform: translateY(-1px); }
  .btn-flat-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
  .btn-flat-ghost-black { background: #fff; color: #111; border-color: #111; }
  .btn-flat-ghost-black:hover { background: #f4f4f4; }
  .btn-flat-ghost-red { background: #fff; color: var(--red); border-color: var(--red); }
  .btn-flat-ghost-red:hover { background: rgba(211,47,47,0.06); }
  .btn-flat-ghost-dark { background: rgba(255,255,255,0.06); color: #eee; border-color: rgba(255,255,255,0.2); }
  .btn-flat-ghost-dark:hover { background: rgba(255,255,255,0.14); color: #fff; }

  .input { background: #f7f7f7; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 0.95rem 1.15rem; color: var(--text); font-family: 'Inter', sans-serif; font-size: 1.2rem; outline: none; transition: all 0.2s; width: 100%; }
  .input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(211,47,47,0.08); background: #fff; }
  .select { background: #f7f7f7; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 0.95rem 1.15rem; color: var(--text); font-family: 'Inter', sans-serif; font-size: 1.2rem; outline: none; cursor: pointer; transition: all 0.2s; }
  .select:hover { border-color: rgba(211,47,47,0.4); }
  .select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(211,47,47,0.08); background: #fff; }

  .team-card { background: #fff; border: 1.5px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 1rem; display: flex; align-items: center; gap: 1rem; transition: all 0.2s; }
  .team-card:hover { border-color: var(--red); box-shadow: 0 3px 12px rgba(211,47,47,0.12); transform: translateY(-1px); }
  .team-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--red); background: white; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(211,47,47,0.1); }
  .color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

  /* ===================== BRACKET VISUAL — giống ảnh ===================== */
  .bracket-wrap { overflow-x: auto; padding-bottom: 1rem; }

  /* Phase tabs */
  .phase-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
  .phase-tab { padding: 0.55rem 1.2rem; border-radius: 8px; border: 1.5px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; background: #fff; color: var(--text2); transition: all 0.18s; display: inline-flex; align-items: center; gap: 0.4rem; }
  .phase-tab svg { width: 14px; height: 14px; }
  .phase-tab:hover { border-color: var(--red); color: var(--red); background: rgba(211,47,47,0.05); }
  .phase-tab.active { background: var(--black); color: #fff; border-color: var(--black); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
  .phase-tab.done { border-color: rgba(211,47,47,0.4); color: var(--red); background: rgba(211,47,47,0.05); }

  /* Visual bracket (knockout tree) */
  .vbracket { display: flex; gap: 0; align-items: stretch; min-width: max-content; }
  .vbracket-round { display: flex; flex-direction: column; min-width: 180px; }
  .vbracket-round-hdr { font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 10px 12px; color: #fff; background: #111; border-radius: 6px 6px 0 0; margin: 0 8px; }
  .vbracket-round-hdr.final { background: var(--red); font-size: 0.95rem; font-weight: 900; }
  .vbracket-body { flex: 1; display: flex; flex-direction: column; justify-content: space-around; padding: 12px 8px; gap: 8px; }

  .vb-match { background: #ffffff; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; transition: all 0.2s; cursor: pointer; width: 164px; }
  .vb-match:hover { border-color: var(--red); box-shadow: 0 4px 16px rgba(211,47,47,0.18); transform: translateY(-2px); }
  .vb-match.done { border-color: rgba(211,47,47,0.3); }
  .vb-team { display: flex; align-items: center; gap: 7px; padding: 8px 10px; font-size: 0.82rem; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); transition: background 0.12s; }
  .vb-team:last-child { border-bottom: none; }
  .vb-team:hover { background: rgba(211,47,47,0.04); }
  .vb-team.winner { background: rgba(211,47,47,0.08); color: #b71c1c; }
  .vb-team .vb-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .vb-team .vb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vb-team .vb-sc { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; font-weight: 700; min-width: 20px; text-align: right; color: var(--text2); }
  .vb-team.winner .vb-sc { color: #b71c1c; font-weight: 800; }
  .vb-match-num { font-size: 0.65rem; font-weight: 700; color: #666; letter-spacing: 0.08em; padding: 2px 10px; background: #f5f5f5; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .vb-match-num .vb-play-btn { background: var(--black); border: none; border-radius: 4px; color: #fff; padding: 2px 7px; font-size: 0.65rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; letter-spacing: 0.04em; transition: background 0.15s; }
  .vb-match-num .vb-play-btn svg { width: 9px; height: 9px; }
  .vb-match-num .vb-play-btn:hover { background: var(--red); }

  /* Connector lines between rounds */
  .vb-connector { display: flex; flex-direction: column; justify-content: space-around; width: 24px; padding: 12px 0; gap: 8px; }
  .vb-conn-group { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; }
  .vb-conn-line { width: 100%; height: 1px; background: var(--border); }
  .vb-conn-vert { position: absolute; right: 0; top: 25%; height: 50%; width: 1px; background: var(--border); }

  /* Groups grid */
  .groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
  .group-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease; }
  .group-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); border-color: rgba(211,47,47,0.25); transform: translateY(-2px); }
  .group-card-hdr { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
  .group-badge-pill { font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; padding: 4px 10px; border-radius: 20px; }
  .group-table { width: 100%; border-collapse: collapse; }
  .group-table th { font-family: 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; color: #fff; padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 700; background: #111; text-transform: uppercase; }
  .group-table th:not(:first-child) { text-align: center; }
  .group-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 0.82rem; transition: background 0.15s; }
  .group-table tbody tr:hover td { background: rgba(211,47,47,0.045); }
  .group-table td:not(:first-child) { text-align: center; }
  .group-table tr:last-child td { border-bottom: none; }
  .group-table tr.qualify td:first-child { font-weight: 700; color: var(--red); }
  .group-matches { padding: 0.6rem 0.75rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
  .gm-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg3); cursor: pointer; transition: all 0.15s; }
  .gm-row:hover { border-color: var(--red); background: rgba(211,47,47,0.04); }
  .gm-row.done { border-color: rgba(255,215,0,0.3); background: rgba(255,215,0,0.04); }
  .gm-team { flex: 1; font-size: 0.78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gm-score { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 700; color: var(--text2); min-width: 36px; text-align: center; }
  .gm-score.done { color: #d97706; }
  .gm-play { background: var(--red); border: none; border-radius: 4px; color: #fff; padding: 2px 8px; font-size: 0.7rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
  .gm-play svg { width: 9px; height: 9px; }
  .gm-play:hover { background: #b71c1c; }

  /* Advance button */
  .advance-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1.5rem; }
  .advance-info { font-size: 0.9rem; color: var(--text2); }
  .advance-info strong { color: var(--text); }

  /* Standings table */
  .rr-table { width: 100%; border-collapse: collapse; }
  .rr-table th { font-family: 'Inter', sans-serif; font-size: 0.85rem; letter-spacing: 0.08em; color: #fff; background: #111; padding: 0.8rem 1rem; text-align: left; font-weight: 700; }
  .rr-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); font-size: 1.1rem; }
  .rr-table tr:hover td { background: rgba(211,47,47,0.04); }
  .rank-badge { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; background: #111; color: white; }

  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
  .modal-overlay.open { display: flex; }
  .modal { background: #ffffff; border: 2px solid rgba(211,47,47,0.15); border-radius: 20px; padding: 2rem; max-width: 480px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(211,47,47,0.06); }
  .modal-title { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 1.5rem; color: var(--red); }

  .format-btn { padding: 1.3rem 1.9rem; border-radius: 4px; border: 2px solid var(--border); background: #fff; color: #555; font-family: 'Inter', sans-serif; font-size: 1.05rem; letter-spacing: 0.08em; cursor: pointer; transition: all 0.2s; text-align: center; font-weight: 600; }
  .format-btn:hover { border-color: var(--red); color: var(--red); background: rgba(211,47,47,0.04); }
  .format-btn.selected { border-color: #111; color: #fff; background: #111; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }

  .size-btn { width: 88px; height: 88px; border-radius: 4px; border: 2px solid var(--border); background: #fff; color: #555; font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
  .size-btn:hover { border-color: var(--red); color: var(--red); background: rgba(211,47,47,0.04); }
  .size-btn.selected { border-color: #111; color: #fff; background: #111; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }

  .tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.9rem; font-weight: 600; }
  .tag-gold { background: rgba(255,215,0,0.1); color: #f59e0b; border: 1px solid rgba(255,215,0,0.3); }

  .toast { position: fixed; bottom: 2rem; right: 2rem; background: #111; border: 2px solid var(--red); border-radius: 10px; padding: 1rem 1.5rem; font-size: 1.1rem; z-index: 999; transform: translateY(100px); opacity: 0; transition: all 0.3s; pointer-events: none; box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(211,47,47,0.2); display:flex; align-items:center; gap:0.5rem; color: #fff; }
  .toast.show { transform: translateY(0); opacity: 1; }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--red); }

  /* ── REALTIME ANIMATIONS ── */
  @keyframes rt-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(211,47,47,0); }
    50%      { box-shadow: 0 0 0 4px rgba(211,47,47,0.25); }
  }
  @keyframes rt-blink {
    0%,100% { opacity:1; box-shadow: 0 0 0 2px rgba(34,197,94,0.3); }
    50%      { opacity:0.5; box-shadow: none; }
  }
  @keyframes rt-score-flash {
    0%   { background: rgba(255,215,0,0); }
    30%  { background: rgba(255,215,0,0.25); }
    100% { background: rgba(255,215,0,0); }
  }
  .rt-live-match-card {
    border-color: rgba(34,197,94,0.7) !important;
    box-shadow: 0 0 0 2px rgba(34,197,94,0.15), 0 4px 16px rgba(0,0,0,0.12) !important;
    animation: rt-pulse 1.5s ease infinite;
  }
  .rt-live-score-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 5px;
    background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.35);
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 800;
    color: #22c55e; letter-spacing: 0.04em;
    animation: rt-pulse 1.5s ease infinite;
  }
  .rt-live-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #22c55e; flex-shrink: 0;
    animation: rt-blink 1s infinite;
  }

  .upload-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s; }
  .upload-zone:hover { border-color: var(--red); background: rgba(211,47,47,0.02); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
  @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } }
  .divider { height: 1px; background: var(--border); margin: 1.25rem 0; }
  .status-upcoming { background: rgba(0,0,0,0.05); color: var(--text2); border: 1px solid var(--border); }
  .status-done { background: rgba(255,215,0,0.08); color: #f59e0b; border: 1px solid rgba(255,215,0,0.25); }
  .status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.9rem; border-radius: 20px; font-size: 0.9rem; font-weight: 600; }
  .group-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; background: var(--red); color: white; }

  .podium { display: flex; align-items: flex-end; justify-content: center; gap: 0.5rem; margin: 2rem 0; }
  .podium-place { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
  .podium-block { width: 120px; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 800; }
  .podium-1 { background: linear-gradient(180deg, #d32f2f, #b71c1c); height: 120px; color: #fff; box-shadow: 0 0 24px rgba(211,47,47,0.4); }
  .podium-2 { background: linear-gradient(180deg, #555, #333); height: 90px; color: #fff; }
  .podium-3 { background: linear-gradient(180deg, #888, #666); height: 70px; color: #fff; }

  /* ==================== HDFPV HEADER (Trắng-Đen-Đỏ) ==================== */
  .hdfpv-header { background: #111111; border-bottom: 3px solid var(--red); position: sticky; top: 0; z-index: 100; }
  .hdfpv-header-inner { max-width: 1760px; margin: 0 auto; height: 96px; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
  .hdfpv-header-brand { display: flex; align-items: center; gap: 1rem; }
  .hdfpv-header-logo { width: 86px; height: 86px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,255,255,0.18); transition: box-shadow 0.25s ease, transform 0.25s ease; }
  .hdfpv-header-logo:hover { box-shadow: 0 0 0 3px rgba(255,255,255,0.3), 0 0 18px rgba(211,47,47,0.55); transform: scale(1.04); }
  .hdfpv-header-logo img { width: 100%; height: 100%; object-fit: contain; }
  .hdfpv-header-logo-sm { width: 52px; height: 52px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.18); }
  .hdfpv-header-title { font-family: 'Inter', sans-serif; font-size: 1.55rem; font-weight: 800; color: #fff; letter-spacing: 0.02em; }
  .hdfpv-header-subtitle { font-family: 'Inter', sans-serif; font-size: 0.95rem; color: #bbb; }
  .hdfpv-header-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
  .hdfpv-header-powered-inner { display: flex; align-items: center; gap: 0.5rem; }
  .hdfpv-header-powered-label { font-family: 'Inter', sans-serif; font-size: 0.7rem; color: #999; text-transform: uppercase; letter-spacing: 0.08em; }
  .hdfpv-header-navrow { background: #1a1a1a; border-top: 1px solid rgba(255,255,255,0.08); }
  .hdfpv-header-navrow .nav-tabs { max-width: 1760px; margin: 0 auto; padding: 0.65rem 2rem; justify-content: center; gap: 1rem; }
  .hdfpv-header .nav-tab { color: #bbb; font-size: 1.55rem; font-weight: 700; padding: 1rem 1.9rem; }
  .hdfpv-header .nav-tab svg { width: 25px; height: 25px; }
  .hdfpv-header .nav-tab:hover { color: #fff; border-color: transparent; background: rgba(255,255,255,0.08); }
  .hdfpv-header .nav-tab.active { background: var(--red); color: #fff; border-color: var(--red); }
  .hdfpv-header .btn-flat-sm { font-size: 0.8rem; font-weight: 600; padding: 0.45rem 0.85rem; }
  .hdfpv-header .btn-flat-sm svg { width: 14px; height: 14px; }
  @media (max-width: 1500px) { .hdfpv-header-inner { height: auto; flex-wrap: wrap; padding: 0.75rem 1.25rem; gap: 0.75rem; } .hdfpv-header-actions { flex-wrap: wrap; } .hdfpv-header-navrow .nav-tabs { padding: 0.65rem 1.25rem; } }

  /* ==================== HDFPV FOOTER ==================== */
  .hdfpv-footer { background: #111111; color: #ccc; padding: 2.5rem 2rem 1.5rem; font-family: 'Inter', sans-serif; }
  .hdfpv-footer-grid { max-width: 1760px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .hdfpv-footer-col-title { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 0.75rem; }
  .hdfpv-footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
  .hdfpv-footer-logo { height: 64px; width: 64px; border-radius: 50%; background: #fff; object-fit: contain; }
  .hdfpv-footer-desc { font-size: 0.85rem; color: #999; line-height: 1.6; }
  .hdfpv-footer-copy { max-width: 1760px; margin: 0 auto; padding-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: #888; flex-wrap: wrap; gap: 0.75rem; }
  .hdfpv-footer-copy img { width: 28px; height: 28px; border-radius: 50%; background: #fff; }
  @media (max-width: 900px) { .hdfpv-footer-grid { grid-template-columns: 1fr; } }

  input[type=file] { display: none; }

  /* ===================== BRACKET A/B STYLES ===================== */
  .bk-slot { display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:6px;font-weight:800;font-size:12px;color:#fff;min-width:92px;max-width:108px;height:30px;white-space:nowrap;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,0.16);cursor:default; }
  .bk-slot.bk-empty { background:rgba(0,0,0,0.07);color:var(--text2);font-style:italic;font-weight:400; }
  .bk-slot.bk-winner { background:#f59e0b;color:#5c2000; }
  .bk-name { flex:1;overflow:hidden;text-overflow:ellipsis; }
  .bk-win-input { height:28px;border-radius:6px;border:2px solid #d32f2f;background:#d32f2f;color:#fff;font-weight:800;font-size:11px;padding:0 7px;text-align:center;outline:none;width:116px; }
  .bk-win-input::placeholder { color:rgba(255,255,255,0.55);font-size:10px; }
  .bk-win-input:focus { border-color:#ff7043;background:#c62828; }
  .bk-final-input { background:#b71c1c; }
  .bk-champ-input { font-weight:900;font-size:12px; }
  .bk-champ-input:focus { filter:brightness(1.1); }

  /* ===================== SCOREBOARD OVERLAY ===================== */
  #scoreboard-overlay { position: fixed; inset: 0; z-index: 500; background: #f2f4f8; display: none; flex-direction: column; overflow: hidden; font-family: 'Inter', sans-serif; }
  #scoreboard-overlay.open { display: flex; }
  .sb-header { background: #000; border-bottom: none; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: auto; box-shadow: none; z-index: 10; }
  .sb-logo-left, .sb-logo-right { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1.5px solid rgba(211,47,47,0.25); background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.08); flex-shrink: 0; }
  .sb-logo-left img, .sb-logo-right img { width: 100%; height: 100%; object-fit: contain; }
  .sb-header-center { text-align: center; flex: 1; background: #000; padding: 0.8rem 1rem; border-radius: 0; }
  .sb-title { font-family: 'Oswald', 'Inter', sans-serif; font-size: clamp(24px,4.5vw,41.6px); font-weight: 600; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; margin: 0; }
  .sb-match-label { font-size: 15.2px; color: #fff; letter-spacing: 0.1em; margin-top: 2px; font-weight: 600; text-transform: uppercase; font-family: 'Inter', sans-serif; }
  /* ── SCOREBOARD MAIN LAYOUT (new: 3-col with side logos) ── */
  .sb-main { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; overflow: hidden; transition: margin-right 0.3s cubic-bezier(0.4,0,0.2,1); }
  .sb-main.sidebar-open { margin-right: 268px; }

  /* ── Each team side = vertical flex, logo on extreme edge, score square in center ── */
  .sb-panel {
    position: relative;
    display: flex;
    flex-direction: row;      /* horizontal: logo | content | (gap) */
    align-items: stretch;
    overflow: hidden;
    gap: 0;
  }
  .sb-panel::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 65%); pointer-events: none; z-index: 0; }
  .sb-panel-red  { background: #ffffff; }
  .sb-panel-blue { background: #ffffff; }

  /* ── Side logo column (extreme edge) ── */
  .sb-side-logo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    flex-shrink: 0;
    z-index: 1;
    gap: 1rem;
    min-width: clamp(90px, 12vw, 150px);
  }
  .sb-side-org-logo {
    width: clamp(70px, 9vw, 118px);
    height: clamp(70px, 9vw, 118px);
    border-radius: 16px;
    border: 3px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.45);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    backdrop-filter: blur(4px);
  }
  .sb-side-org-logo:hover { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(255,255,255,0.15), 0 12px 40px rgba(0,0,0,0.55); }
  .sb-side-org-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

  /* ── Main team content (center of each panel) ── */
  .sb-team-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0.5rem;
    z-index: 1;
    gap: 1rem;
  }

  /* ── Square score box — RED team ── */
  .sb-panel-red .sb-score-square {
    width: clamp(130px, 17vw, 210px);
    height: clamp(130px, 17vw, 210px);
    border-radius: 16px;
    background: #d32f2f;
    border: 3px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 24px rgba(211,47,47,0.35);
    flex-shrink: 0;
  }
  .sb-panel-red .sb-score-square .sb-score { color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }

  /* ── Square score box — BLUE team ── */
  .sb-panel-blue .sb-score-square {
    width: clamp(130px, 17vw, 210px);
    height: clamp(130px, 17vw, 210px);
    border-radius: 16px;
    background: #1565c0;
    border: 3px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 24px rgba(21,101,192,0.35);
    flex-shrink: 0;
  }
  .sb-panel-blue .sb-score-square .sb-score { color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
  .sb-score {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: clamp(80px, 14vw, 176px);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-shadow: 0 4px 30px rgba(0,0,0,0.6);
    transition: transform 0.1s;
    letter-spacing: 0.01em;
    user-select: none;
  }
  .sb-score.pop { animation: sb-pop 0.28s ease; }
  @keyframes sb-pop { 0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} }

  /* ── Team logo + name ── */
  .sb-team-top { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; z-index: 1; width: 100%; }
  .sb-team-logo-wrap {
    width: clamp(72px, 10vw, 120px); height: clamp(72px, 10vw, 120px);
    border-radius: 50%; border: 3px solid rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.04); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.12); transition: transform 0.3s;
  }
  .sb-team-logo-wrap:hover { transform: scale(1.06); }
  .sb-panel-red .sb-team-logo-wrap  { border-color: rgba(211,47,47,0.35); box-shadow: 0 4px 20px rgba(211,47,47,0.2); }
  .sb-panel-blue .sb-team-logo-wrap { border-color: rgba(21,101,192,0.35); box-shadow: 0 4px 20px rgba(21,101,192,0.2); }
  .sb-team-logo-wrap img { width: 100%; height: 100%; object-fit: cover; }
  .sb-logo-init { font-family: 'Oswald', 'Inter', sans-serif; font-size: clamp(32px, 4vw, 48px); font-weight: 600; color: rgba(0,0,0,0.5); }
  .sb-team-name { font-family: 'Oswald', 'Inter', sans-serif; font-size: clamp(30.4px,5.5vw,60.8px); text-align: center; letter-spacing: 0.05em; line-height: 1; z-index: 1; color: #111; font-weight: 700; padding: clamp(6.4px,1vw,12.8px) clamp(9.6px,2vw,19.2px); border-radius: 8px; border: 2px solid currentColor; background: rgba(255,255,255,0.95); }
  .sb-panel-red .sb-team-name  { color: #c62828; border-color: rgba(198,40,40,0.3); }
  .sb-panel-blue .sb-team-name { color: #1565c0; border-color: rgba(21,101,192,0.3); }

  .sb-score-controls { z-index: 1; display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: center; }
  .sb-ctrl-btn { width: clamp(40px,5vw,52px); height: clamp(40px,5vw,52px); border-radius: 9px; border: none; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
  .sb-ctrl-btn svg { width: 17px; height: 17px; }
  .sb-ctrl-plus  { background: rgba(0,0,0,0.07); color: #333; }
  .sb-ctrl-plus:hover  { background: rgba(0,0,0,0.14); transform: scale(1.1); }
  .sb-ctrl-minus { background: rgba(0,0,0,0.04); color: #999; }
  .sb-ctrl-minus:hover { background: rgba(0,0,0,0.1); color: #555; }
  .sb-ctrl-off-plus { background: rgba(245,158,11,0.1); color: #d97706; }
  .sb-ctrl-off-plus:hover { background: rgba(245,158,11,0.2); }

  .sb-offside-bar { z-index: 1; background: rgba(0,0,0,0.06); border-radius: 10px; padding: 0.4rem 1rem; display: flex; align-items: center; gap: 0.6rem; border: 2px solid rgba(0,0,0,0.12); }
  .sb-offside-label { font-size: 17.6px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 900; color: #000 !important; }
  .sb-panel-red  .sb-offside-label { color: #000 !important; }
  .sb-panel-blue .sb-offside-label { color: #000 !important; }
  .sb-offside-val { font-family: 'JetBrains Mono', monospace; font-size: clamp(32px, 5.5vw, 60.8px); font-weight: 700; color: #333; }

  /* ── Side logo col on white background ── */
  .sb-side-logo-col {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 2.5rem 1rem 1.5rem; flex-shrink: 0; z-index: 1; gap: 1rem;
    min-width: clamp(90px, 12vw, 150px);
    border-right: 1px solid rgba(0,0,0,0.06);
  }
  .sb-panel-blue .sb-side-logo-col { border-right: none; border-left: 1px solid rgba(0,0,0,0.06); }
  .sb-side-org-logo {
    width: clamp(70px, 9vw, 118px); height: clamp(70px, 9vw, 118px);
    border-radius: 16px; border: 2px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.02);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s; overflow: hidden;
  }
  .sb-side-org-logo:hover { transform: scale(1.07); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
  .sb-side-org-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

  /* ── FINALS SPECIFIC STYLING — 2 logos side by side ── */
  .sb-finals-mode .sb-side-logo-col {
    min-width: clamp(100px, 14vw, 160px);
    flex-direction: row !important;
    gap: 1rem !important;
    padding: 1.5rem 0.8rem !important;
  }
  .sb-finals-mode .sb-side-org-logo {
    width: clamp(60px, 8vw, 100px);
    height: clamp(60px, 8vw, 100px);
  }

  /* ── CENTER column (timer + VS) ── */
  .sb-center {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.25rem 0.6rem; background: #ffffff;
    min-width: clamp(130px,16vw,200px);
    border-left: 2px solid rgba(211,47,47,0.12);
    border-right: 2px solid rgba(211,47,47,0.12);
    flex-shrink: 0;
    box-shadow: 0 0 40px rgba(211,47,47,0.06);
    gap: 0.5rem;
  }
  /* Hide the old org logo wraps inside center — now on side cols */
  .sb-center .sb-org-logo-wrap { display: none !important; }

  .sb-org-logo-wrap { width: clamp(80px,11vw,136px); height: clamp(80px,11vw,136px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 18px; border: 3px solid rgba(211,47,47,0.5); background: rgba(255,255,255,0.1); box-shadow: 0 0 0 4px rgba(211,47,47,0.15), 0 0 28px rgba(211,47,47,0.45), 0 4px 16px rgba(0,0,0,0.3); transition: box-shadow 0.3s ease, transform 0.3s ease; }
  .sb-org-logo-wrap:hover { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(211,47,47,0.25), 0 0 44px rgba(211,47,47,0.6), 0 6px 24px rgba(0,0,0,0.4); }
  .sb-org-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }

  .sb-timer-wrap { text-align: center; }
  .sb-timer { font-family: 'JetBrains Mono', monospace; font-size: clamp(44.8px,7vw,80px); font-weight: 700; letter-spacing: 0.02em; line-height: 1; transition: color 0.3s; color: #111; display: block; }
  .sb-timer.running { color: #d32f2f; }
  .sb-timer.stopped { color: #111; }
  .sb-timer.last10  { color: #d32f2f; animation: blink-timer 0.5s infinite; }
  @keyframes blink-timer { 0%,100%{opacity:1} 50%{opacity:0.45} }
  .sb-timer-label { font-size: 10.4px; font-weight: 700; letter-spacing: 0.15em; color: #aaa; text-transform: uppercase; margin-top: 1px; }

  /* ── VS — MUCH LARGER ── */
  .sb-vs {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: clamp(64px, 9vw, 120px);
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(211,47,47,0.15);
  }
  .sb-center-controls { display: flex; flex-direction: column; gap: 0.38rem; align-items: center; width: 100%; }
  .sb-center-btn { width: 100%; padding: 0.56rem 0.3rem; border-radius: 8px; border: none; font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 700; cursor: pointer; transition: all 0.18s; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; gap: 0.3rem; text-transform: uppercase; }
  .sb-center-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
  .sb-center-btn:hover { transform: translateY(-1px); }
  .sb-btn-start  { background: linear-gradient(135deg,#22c55e,#15803d); color:#fff; box-shadow:0 2px 8px rgba(34,197,94,0.3); }
  .sb-btn-start:hover { background: linear-gradient(135deg,#4ade80,#22c55e); }
  .sb-btn-start.running { background: linear-gradient(135deg,#f97316,#c2410c); box-shadow:0 2px 8px rgba(249,115,22,0.35); }
  .sb-btn-reset  { background: #f0f0f2; color: #555; border: 1px solid #e0e0e2; }
  .sb-btn-save   { background: linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
  .sb-btn-close  { background: rgba(211,47,47,0.07); color: #d32f2f; border: 1.5px solid rgba(211,47,47,0.25); }
  .sb-btn-close:hover { background: #d32f2f; color: #fff; }
  .sb-btn-divider { width: 100%; height: 1px; background: #ececec; margin: 0.15rem 0; flex-shrink: 0; }
  .sb-match-nav { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center; }
  .sb-match-dot { width: 30px; height: 30px; border-radius: 6px; background: #f0f0f0; color: #aaa; border: 1px solid #e0e0e0; font-size: 0.82rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; transition: all 0.18s; }
  .sb-match-dot:hover { border-color: #d32f2f; color: #d32f2f; }
  .sb-match-dot.active { background: #d32f2f; color: #fff; border-color: #d32f2f; }
  .sb-match-dot.done   { background: rgba(245,158,11,0.1); color: #f59e0b; border-color: rgba(245,158,11,0.4); }
  #sb-sidebar { position: fixed; top: 0; right: -268px; width: 268px; height: 100vh; background: #fff; border-left: 1.5px solid #e8e8e8; z-index: 520; display: flex; flex-direction: column; transition: right 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: -4px 0 20px rgba(0,0,0,0.1); overflow-y: auto; }
  #sb-sidebar.open { right: 0; }
  #sb-sidebar-toggle { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 530; width: 26px; height: 72px; background: #fff; border: 1.5px solid #e0e0e0; border-right: none; border-radius: 10px 0 0 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #999; font-size: 0.9rem; font-weight: 700; transition: background 0.2s, right 0.3s, color 0.2s; box-shadow: -2px 0 8px rgba(0,0,0,0.06); }
  #sb-sidebar-toggle:hover { background: #d32f2f; color: #fff; border-color: #d32f2f; }
  #sb-sidebar-toggle.open { right: 268px; }
  .sb-sidebar-hdr { padding: 1rem 1rem 0.75rem; border-bottom: 1px solid #f0f0f0; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: #d32f2f; text-transform: uppercase; flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; }
  .sb-sidebar-section { padding: 0.8rem 1rem 0; }
  .sb-sidebar-lbl { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; color: #bbb; text-transform: uppercase; margin-bottom: 0.45rem; }
  .sb-ard-toggle { width: 100%; padding: 0.52rem 0.75rem; background: #f8f8f8; border: 1px solid #ebebeb; border-radius: 8px; color: #666; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 0.45rem; }
  .sb-ard-toggle:hover { background: #f0f0f0; color: #333; }
  .sb-ard-toggle.connected { color: #16a34a; border-color: rgba(22,163,74,0.3); background: rgba(22,163,74,0.04); }
  .sb-ard-dot { width: 7px; height: 7px; border-radius: 50%; background: #ccc; flex-shrink: 0; transition: background 0.3s; }
  .sb-ard-dot.on { background: #22c55e; animation: pulse-dot 1.5s infinite; }
  @keyframes pulse-dot { 0%,100%{opacity:1;box-shadow:0 0 0 2px rgba(34,197,94,0.2)} 50%{opacity:0.5;box-shadow:none} }
  .sb-ard-arrow { margin-left: auto; font-size: 0.6rem; color: #ccc; transition: transform 0.25s; }
  .sb-ard-toggle.open .sb-ard-arrow { transform: rotate(180deg); }
  .sb-ard-panel { overflow: hidden; max-height: 0; transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1); }
  .sb-ard-panel.open { max-height: 120px; }
  .sb-ard-inner { padding: 0.5rem 0; display: flex; flex-direction: column; gap: 0.38rem; }
  .sb-ard-row { display: flex; gap: 0.4rem; align-items: center; }
  .sb-ard-select { flex: 1; background: #fff; border: 1px solid #e0e0e0; color: #333; border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.82rem; font-family: 'Inter', sans-serif; outline: none; cursor: pointer; min-width: 0; }
  .sb-ard-select:focus { border-color: #1e88e5; }
  .sb-ard-btn { padding: 0.3rem 0.7rem; border: none; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.18s; white-space: nowrap; flex-shrink: 0; }
  .sb-ard-btn-conn { background: #1e88e5; color: #fff; }
  .sb-ard-btn-conn:hover { background: #42a5f5; }
  .sb-ard-btn-conn.connected { background: #16a34a; }
  .sb-ard-btn-ref { background: #f0f0f0; color: #666; border: 1px solid #e0e0e0; padding: 0.3rem 0.55rem; }
  .sb-ard-btn-ref:hover { background: #e4e4e4; }
  .sb-conn-status { font-size: 0.7rem; color: #aaa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-results-wrap { background: #f8f8f8; border: 1px solid #ebebeb; border-radius: 8px; min-height: 56px; overflow: hidden; }
  .sb-result-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.7rem; border-bottom: 1px solid #f0f0f0; font-size: 0.78rem; }
  .sb-result-row:last-child { border-bottom: none; }
  .sb-result-team { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #333; }
  .sb-result-score { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 800; color: #f59e0b; white-space: nowrap; flex-shrink: 0; }
  .sb-result-empty { padding: 0.75rem; font-size: 0.72rem; color: #bbb; text-align: center; line-height: 1.5; }
  .sb-ctrl-full { padding: 0.55rem 0.5rem; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all 0.18s; display: flex; align-items: center; justify-content: center; gap: 0.35rem; flex: 1; width: 100%; }
  .sb-ctrl-full:hover { transform: translateY(-1px); filter: brightness(1.1); }
  .sb-ctrl-start { background: linear-gradient(135deg,#22c55e,#15803d); color:#fff; box-shadow:0 2px 8px rgba(34,197,94,0.25); }
  .sb-ctrl-start.running { background: linear-gradient(135deg,#f97316,#c2410c); box-shadow:0 2px 8px rgba(249,115,22,0.3); }
  .sb-ctrl-grey { background: #f0f0f2; color: #555; border: 1px solid #e0e0e2; box-shadow: none; }
  .sb-ctrl-grey:hover { background: #e4e4e6; color: #333; filter: none; transform: none; }
  .sb-ctrl-save { background: linear-gradient(135deg,#f59e0b,#d97706); color:#fff; box-shadow:0 2px 8px rgba(245,158,11,0.2); }
  .sb-ctrl-group { background: #f8f8f8; border: 1px solid #ebebeb; border-radius: 8px; overflow: hidden; }
  .sb-ctrl-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.65rem; border-bottom: 1px solid #f0f0f0; }
  .sb-ctrl-row:last-child { border-bottom: none; }
  .sb-ctrl-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: #aaa; text-transform: uppercase; min-width: 48px; flex-shrink: 0; }
  .sb-ctrl-pair { display: flex; gap: 0.3rem; margin-left: auto; }
  .sb-ctrl-pill { padding: 0.28rem 0.7rem; border: none; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 0.25rem; letter-spacing: 0.02em; }
  .sb-ctrl-pill:hover { transform: scale(1.06); filter: brightness(1.12); }
  .sb-ctrl-plus-red  { background: rgba(211,47,47,0.12); color: #d32f2f; border: 1px solid rgba(211,47,47,0.25); }
  .sb-ctrl-minus-red { background: rgba(211,47,47,0.06); color: #b71c1c; border: 1px solid rgba(211,47,47,0.12); }
  .sb-ctrl-plus-blue  { background: rgba(30,136,229,0.12); color: #1e88e5; border: 1px solid rgba(30,136,229,0.25); }
  .sb-ctrl-minus-blue { background: rgba(30,136,229,0.06); color: #1565c0; border: 1px solid rgba(30,136,229,0.12); }
  .sb-ctrl-plus-gold  { background: rgba(245,158,11,0.12); color: #d97706; border: 1px solid rgba(245,158,11,0.25); }
  .sb-ctrl-minus-gold { background: rgba(245,158,11,0.06); color: #92400e; border: 1px solid rgba(245,158,11,0.12); }

  /* ===================== RESULT SCREEN ===================== */
  #result-screen { position: fixed; inset: 0; z-index: 600; background: #060609; display: none; flex-direction: column; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; overflow: hidden; }
  #result-screen.open { display: flex; }
  .rs-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(211,47,47,0.08) 0%, transparent 70%); pointer-events: none; }
  .rs-title { font-family: 'Inter', sans-serif; font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 700; letter-spacing: 0.08em; color: #fff; text-align: center; margin-bottom: 0.5rem; }
  .rs-subtitle { font-family: 'Inter', sans-serif; font-size: 0.95rem; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-align: center; margin-bottom: 2rem; }
  .rs-score-display { display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem; }
  .rs-team { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
  .rs-team-logo { width: 90px; height: 90px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .rs-team-logo img { width: 100%; height: 100%; object-fit: cover; }
  .rs-team-name { font-family: 'Inter', sans-serif; font-size: clamp(0.75rem, 2vw, 1rem); font-weight: 700; color: white; text-align: center; max-width: 160px; }
  .rs-score-num { font-family: 'JetBrains Mono', monospace; font-size: clamp(4rem, 10vw, 7rem); font-weight: 700; line-height: 1; }
  .rs-score-red { color: #ef4444; text-shadow: 0 0 40px rgba(239,68,68,0.5); }
  .rs-score-blue { color: #3b82f6; text-shadow: 0 0 40px rgba(59,130,246,0.5); }
  .rs-separator { font-family: 'JetBrains Mono', monospace; font-size: 2rem; color: rgba(255,255,255,0.2); }
  .rs-winner-badge { font-family: 'Inter', sans-serif; font-size: clamp(0.9rem, 2.5vw, 1.4rem); font-weight: 700; padding: 0.5rem 2rem; border-radius: 50px; letter-spacing: 0.08em; margin-bottom: 1.5rem; display:flex; align-items:center; gap:0.5rem; }
  .rs-winner-badge svg { width: 22px; height: 22px; }
  .rs-winner-red { background: linear-gradient(135deg, #d32f2f, #7f0000); color: white; box-shadow: 0 4px 20px rgba(211,47,47,0.4); }
  .rs-winner-blue { background: linear-gradient(135deg, #1e88e5, #0d3a6e); color: white; box-shadow: 0 4px 20px rgba(30,136,229,0.4); }
  .rs-winner-draw { background: linear-gradient(135deg, #f59e0b, #92400e); color: white; box-shadow: 0 4px 20px rgba(245,158,11,0.4); }
  .rs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; max-width: 480px; margin-bottom: 1.5rem; }
  .rs-stat { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0.75rem; text-align: center; }
  .rs-stat-label { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; margin-bottom: 0.25rem; }
  .rs-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 1.4rem; color: white; font-weight: 700; }
  .rs-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
  .rs-btn { padding: 0.7rem 1.75rem; border-radius: 8px; border: none; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; cursor: pointer; letter-spacing: 0.08em; transition: all 0.2s; display:inline-flex; align-items:center; gap:0.35rem; }
  .rs-btn svg { width: 16px; height: 16px; }
  .rs-btn-next { background: linear-gradient(135deg, #d32f2f, #b71c1c); color: white; }
  .rs-btn-next:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(211,47,47,0.4); }
  .rs-btn-back { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
  .rs-btn-back:hover { background: rgba(255,255,255,0.2); }
  #fireworks-canvas { position: absolute; inset: 0; pointer-events: none; }

  .match-launch-btn { background: #111111; color: white; border: none; border-radius: 7px; padding: 0.5rem 1.2rem; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700; cursor: pointer; letter-spacing: 0.02em; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.3rem; }
  .match-launch-btn svg { width: 14px; height: 14px; }
  .match-launch-btn:hover { background: var(--red); transform: translateY(-1px); box-shadow: 0 3px 12px rgba(211,47,47,0.35); }

  @media (max-width: 768px) { .page { padding: 1rem; } .sb-main { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .sb-panel { flex-direction: column; } .sb-side-logo-col { min-width:unset; flex-direction:row; padding:0.5rem; gap:0.5rem; } .sb-score-square { width:110px; height:110px; } .sb-score { font-size:72px; } .sb-center { min-width: unset; flex-direction: row; justify-content: center; gap: 1rem; padding: 0.75rem; border: none; border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); } .nav-tabs { gap: 0.2rem; } .nav-tab { padding: 0.3rem 0.6rem; font-size: 0.75rem; } }

  /* ======================== BRACKET VIEW PAGE ======================== */
  #page-bracketview { padding: 0; overflow: hidden; height: calc(100vh - 70px - 140px); display: none; position: relative; }
  #page-bracketview.active { display: flex; flex-direction: column; }

  /* ── Canvas area: full height, no top toolbar ── */
  .bv-canvas-wrap { flex: 1; overflow: auto; background: #f0f2f5; position: relative; }
  .bv-canvas { transform-origin: top left; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); padding: 2rem; display: inline-flex; flex-direction: column; min-width: 100%; }

  /* ── Floating action bar (top-right, always visible) ── */
  #bv-fab-bar {
    position: absolute; top: 12px; right: 14px; z-index: 20;
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 40px;
    padding: 5px 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
    backdrop-filter: blur(12px);
  }
  .bvfab-sep { width: 1px; height: 20px; background: rgba(0,0,0,0.1); flex-shrink: 0; }
  .bvfab-label { font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text2); text-transform: uppercase; white-space: nowrap; }
  .bvfab-zoom-val { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: var(--text); min-width: 34px; text-align: center; }
  .bvfab-btn {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid rgba(0,0,0,0.08); background: #f8f8f8;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 700; color: #555;
    transition: all 0.15s;
  }
  .bvfab-btn:hover { border-color: var(--red); color: var(--red); background: rgba(211,47,47,0.06); transform: scale(1.08); }
  .bvfab-btn svg { width: 11px; height: 11px; }
  .bvfab-btn.red { background: var(--red); border-color: var(--red); color: #fff; }
  .bvfab-btn.red:hover { background: #b71c1c; transform: scale(1.08); }
  .bvfab-btn.blue { background: #1565c0; border-color: #1565c0; color: #fff; }
  .bvfab-btn.blue:hover { background: #0d47a1; transform: scale(1.08); }
  .bvfab-btn.gold { background: linear-gradient(135deg,#ffd700,#f9a825); border-color: #f9a825; color: #5c3000; width: auto; padding: 0 10px; font-family: 'Inter', sans-serif; font-size: 0.62rem; letter-spacing: 0.05em; }
  .bvfab-btn.gold:hover { filter: brightness(1.08); }
  .bvfab-settings-btn {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1.5px solid rgba(211,47,47,0.3); background: rgba(211,47,47,0.06);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--red); transition: all 0.15s; flex-shrink: 0;
  }
  .bvfab-settings-btn svg { width: 13px; height: 13px; }
  .bvfab-settings-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
  .bvfab-settings-btn.active { background: var(--red); color: #fff; border-color: var(--red); }

  /* ── Bottom control drawer ── */
  #bv-drawer {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
    background: rgba(255,255,255,0.98);
    border-top: 2px solid rgba(211,47,47,0.2);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
    backdrop-filter: blur(16px);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    border-radius: 14px 14px 0 0;
    padding: 12px 18px 14px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  }
  #bv-drawer.open { transform: translateY(0); }

  /* Drawer handle pill */
  #bv-drawer::before {
    content: ''; position: absolute; top: 5px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 3px; background: rgba(0,0,0,0.12);
    border-radius: 2px;
  }

  .bvd-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .bvd-label {
    font-family: 'Inter', sans-serif; font-size: 0.6rem;
    font-weight: 700; color: var(--text2); letter-spacing: 0.12em;
    text-transform: uppercase; white-space: nowrap;
  }
  .bvd-sep { width: 1px; height: 26px; background: rgba(0,0,0,0.07); flex-shrink: 0; }

  .bvd-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 20px;
    border: 1.5px solid rgba(0,0,0,0.1); background: #f5f5f5;
    font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.04em; color: #555; cursor: pointer; transition: all 0.16s;
    white-space: nowrap;
  }
  .bvd-chip svg { width: 10px; height: 10px; flex-shrink: 0; }
  .bvd-chip:hover { border-color: var(--red); color: var(--red); background: rgba(211,47,47,0.05); }
  .bvd-chip.active-a { background: linear-gradient(135deg,#c62828,#b71c1c); border-color: #b71c1c; color: #fff; }
  .bvd-chip.active-b { background: linear-gradient(135deg,#1565c0,#0d47a1); border-color: #0d47a1; color: #fff; }
  .bvd-chip.active { background: var(--red); border-color: var(--red); color: #fff; }
  .bvd-chip.active-gold { background: linear-gradient(135deg,#f59e0b,#d97706); border-color: #d97706; color: #fff; }

  .bvd-zoom-btn {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid rgba(0,0,0,0.1); background: #f5f5f5;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 700; color: #555; transition: all 0.14s;
  }
  .bvd-zoom-btn:hover { border-color: var(--red); color: var(--red); background: rgba(211,47,47,0.05); }
  .bvd-zoom-val { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: var(--text); min-width: 34px; text-align: center; }

  .bvd-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 13px; border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.05em; cursor: pointer; transition: all 0.16s;
    white-space: nowrap; border: none;
  }
  .bvd-action-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
  .bvd-btn-full { background: rgba(211,47,47,0.08); color: var(--red); border: 1.5px solid rgba(211,47,47,0.22); }
  .bvd-btn-full:hover { background: var(--red); color: #fff; }
  .bvd-btn-branch-a { background: rgba(198,40,40,0.08); color: #c62828; border: 1.5px solid rgba(198,40,40,0.22); }
  .bvd-btn-branch-a:hover { background: #c62828; color: #fff; }
  .bvd-btn-branch-b { background: rgba(21,101,192,0.08); color: #1565c0; border: 1.5px solid rgba(21,101,192,0.22); }
  .bvd-btn-branch-b:hover { background: #1565c0; color: #fff; }
  .bvd-btn-fs { background: linear-gradient(135deg,#d32f2f,#b71c1c); color: #fff; border: none; box-shadow: 0 2px 8px rgba(211,47,47,0.3); }
  .bvd-btn-fs:hover { background: linear-gradient(135deg,#ef5350,#d32f2f); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(211,47,47,0.4); }

  /* ── bv-toggle-btn (still used in fs overlay) ── */
  .bv-toggle-btn { padding: 0.38rem 0.85rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg3); font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; transition: all 0.18s; color: var(--text2); display: inline-flex; align-items: center; gap: 0.3rem; }
  .bv-toggle-btn svg { width: 12px; height: 12px; }
  .bv-toggle-btn:hover { border-color: var(--red); color: var(--red); }
  .bv-toggle-btn.active { background: var(--red); border-color: var(--red); color: #fff; }
  .bv-toggle-btn.branch-a.active { background: linear-gradient(135deg, #c62828, #b71c1c); }
  .bv-toggle-btn.branch-b.active { background: linear-gradient(135deg, #1565c0, #0d47a1); }
  .bv-zoom-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg3); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: var(--text2); transition: all 0.15s; }
  .bv-zoom-btn:hover { border-color: var(--red); color: var(--red); background: rgba(211,47,47,0.05); }
  .bv-zoom-val { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700; color: var(--text); min-width: 36px; text-align: center; }

  /* ── Full bracket dedicated fullscreen ── */
  #bv-full-fs {
    position: fixed; inset: 0; z-index: 380;
    background: #eef0f5;
    display: none; flex-direction: column;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
  }
  #bv-full-fs.open { display: flex; }
  #bv-full-fs-bar {
    height: 54px; min-height: 54px;
    background: #fff; border-bottom: 3px solid var(--red);
    padding: 0 1.2rem; display: flex; align-items: center; gap: 0.8rem;
    flex-shrink: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.07); z-index: 10;
  }
  .bvffs-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; flex-shrink: 0; border: 2.5px solid #d32f2f; background: #fff; padding: 3px; box-shadow: 0 0 0 3px rgba(211,47,47,0.15), 0 0 16px rgba(211,47,47,0.35), 0 2px 8px rgba(0,0,0,0.1); }
  .bvffs-title { font-family: 'Inter', sans-serif; font-size: clamp(0.85rem,2vw,1.1rem); font-weight: 800; color: #d32f2f; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: center; }
  .bvffs-zoom-btn { width: 30px; height: 30px; border-radius: 7px; border: 1.5px solid #e0e0e0; background: #f8f8f8; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; color: #555; transition: all 0.14s; flex-shrink: 0; }
  .bvffs-zoom-btn:hover { border-color: var(--red); color: var(--red); }
  .bvffs-zoom-val { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; font-weight: 700; color: #333; min-width: 40px; text-align: center; flex-shrink: 0; }
  .bvffs-fit-btn { height: 30px; padding: 0 10px; border-radius: 7px; border: 1.5px solid #e0e0e0; background: #f8f8f8; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.64rem; font-weight: 700; color: #555; letter-spacing: 0.07em; transition: all 0.14s; display: flex; align-items: center; flex-shrink: 0; }
  .bvffs-fit-btn:hover { border-color: var(--red); color: var(--red); }
  .bvffs-close-btn { height: 30px; padding: 0 12px; border-radius: 7px; border: 1.5px solid rgba(211,47,47,0.3); background: rgba(211,47,47,0.06); color: var(--red); font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 700; cursor: pointer; letter-spacing: 0.05em; transition: all 0.16s; display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
  .bvffs-close-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
  #bv-full-fs-canvas-wrap { flex: 1; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.1) transparent; }
  #bv-full-fs-canvas-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
  #bv-full-fs-canvas-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
  #bv-full-fs-canvas { display: inline-block; transform-origin: top left; padding: 24px 28px; min-width: max-content; }
  #bv-full-fs-statusbar { height: 28px; min-height: 28px; background: #fff; border-top: 1px solid #ebebeb; padding: 0 1.2rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; font-size: 0.6rem; color: #bbb; letter-spacing: 0.06em; font-family: 'JetBrains Mono', monospace; }

  /* Center logos in bracket view */
  .bv-center-logo-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; }
  .bv-center-logo-img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12)); }
  .bv-center-logo-placeholder { width: 52px; height: 52px; border-radius: 8px; border: 1.5px dashed rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; }

  /* Branch panels */
  .bv-branch-panel { background: #fff; border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
  .bv-branch-panel.hidden { display: none; }
  .bv-branch-hdr { padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.6rem; border-bottom: 2px solid; }
  .bv-branch-a-hdr { border-color: var(--red); background: linear-gradient(90deg, rgba(211,47,47,0.06), transparent); }
  .bv-branch-b-hdr { border-color: var(--blue); background: linear-gradient(90deg, rgba(30,136,229,0.06), transparent); }
  .bv-branch-title { font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
  .bv-branch-a-title { color: var(--red); }
  .bv-branch-b-title { color: var(--blue); }
  .bv-branch-body { padding: 0.75rem; overflow-x: auto; }

  /* Full bracket container */
  .bv-full-wrap { background: #fff; border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; }
  .bv-full-hdr { padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.6rem; background: linear-gradient(90deg, rgba(211,47,47,0.04), rgba(30,136,229,0.04)); border-bottom: 2px solid var(--border); }
  .bv-full-title { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--text); letter-spacing: 0.08em; }

  /* Fullscreen overlay for bracket */
  #bv-fullscreen { position: fixed; inset: 0; z-index: 300; background: #f0f2f5; display: none; flex-direction: column; }
  #bv-fullscreen.open { display: flex; }
  .bv-fs-header { background: #fff; border-bottom: 3px solid var(--red); height: 56px; display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  .bv-fs-title { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; color: var(--red); letter-spacing: 0.08em; flex: 1; text-align: center; }
  .bv-fs-close { padding: 0.4rem 1rem; border-radius: 6px; border: 1.5px solid rgba(211,47,47,0.3); background: rgba(211,47,47,0.06); color: var(--red); font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; transition: all 0.18s; }
  .bv-fs-close:hover { background: var(--red); color: #fff; }
  .bv-fs-canvas-wrap { flex: 1; overflow: auto; padding: 1.5rem; }
  .bv-fs-zoom-controls { display: flex; align-items: center; gap: 0.4rem; }
#bracket-fs {
  position: fixed; inset: 0; z-index: 350;
  background: #f0f2f5;
  display: none; flex-direction: column;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}
#bracket-fs.open { display: flex; }

#bk-fs-bar {
  height: 60px; min-height: 60px;
  background: #ffffff;
  border-bottom: 3px solid var(--red);
  padding: 0 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  z-index: 10;
}
.bk-fs-logo {
  width: 52px; height: 52px;
  object-fit: contain; border-radius: 12px;
  border: 2.5px solid #d32f2f;
  background: #fff; padding: 3px;
  box-shadow: 0 0 0 3px rgba(211,47,47,0.15), 0 0 20px rgba(211,47,47,0.38), 0 2px 10px rgba(0,0,0,0.1);
  flex-shrink: 0;
  transition: box-shadow 0.3s;
}
.bk-fs-logo:hover { box-shadow: 0 0 0 5px rgba(211,47,47,0.22), 0 0 34px rgba(211,47,47,0.55); }
.bk-fs-logo-b {
  border-color: #d32f2f;
  box-shadow: 0 0 0 3px rgba(211,47,47,0.15), 0 0 20px rgba(211,47,47,0.38), 0 2px 10px rgba(0,0,0,0.1);
}
.bk-fs-title-wrap { flex: 1; min-width: 0; text-align: center; }
.bk-fs-title-main {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  font-weight: 800; color: #d32f2f;
  letter-spacing: 0.08em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.bk-fs-title-sub {
  font-size: 0.62rem; color: #bbb;
  letter-spacing: 0.14em; margin-top: 2px;
}
.bk-fs-zoom-group { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.bk-fs-zoom-btn {
  width: 32px; height: 32px;
  border-radius: 7px; border: 1.5px solid #e0e0e0;
  background: #f8f8f8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; color: #555;
  transition: all 0.15s;
}
.bk-fs-zoom-btn:hover { border-color: #d32f2f; color: #d32f2f; background: rgba(211,47,47,0.05); }
.bk-fs-zoom-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; font-weight: 700; color: #333;
  min-width: 46px; text-align: center;
}
.bk-fs-fit-btn {
  height: 32px; padding: 0 12px;
  border-radius: 7px; border: 1.5px solid #e0e0e0;
  background: #f8f8f8; cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem; font-weight: 700; color: #555;
  letter-spacing: 0.07em; transition: all 0.15s;
  display: flex; align-items: center;
}
.bk-fs-fit-btn:hover { border-color: #d32f2f; color: #d32f2f; background: rgba(211,47,47,0.05); }
.bk-fs-close-btn {
  height: 32px; padding: 0 14px;
  border-radius: 7px; border: 1.5px solid rgba(211,47,47,0.35);
  background: rgba(211,47,47,0.06); color: #d32f2f;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem; font-weight: 700; cursor: pointer;
  letter-spacing: 0.06em; transition: all 0.18s;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.bk-fs-close-btn:hover { background: #d32f2f; color: #fff; border-color: #d32f2f; }

#bk-fs-canvas-wrap {
  flex: 1; overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}
#bk-fs-canvas-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
#bk-fs-canvas-wrap::-webkit-scrollbar-track { background: transparent; }
#bk-fs-canvas-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.13); border-radius: 4px; }
#bk-fs-canvas-wrap::-webkit-scrollbar-thumb:hover { background: rgba(211,47,47,0.35); }

#bk-fs-canvas {
  display: inline-block;
  transform-origin: top left;
  padding: 28px 32px;
  min-width: max-content;
}

#bk-fs-statusbar {
  height: 30px; min-height: 30px;
  background: #fff; border-top: 1px solid #ebebeb;
  padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  font-size: 0.65rem; color: #aaa;
  letter-spacing: 0.06em;
  font-family: 'JetBrains Mono', monospace;
}
/* ── Branch Fullscreen Overlay ── */
#bv-branch-fs {
  position: fixed; inset: 0; z-index: 450;
  background: #eef0f5;
  display: none; flex-direction: column;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}
#bv-branch-fs.open { display: flex; }

/* ── Top bar ── */
#bv-bfs-bar {
  height: 56px; min-height: 56px;
  background: #ffffff;
  border-bottom: 3px solid #d32f2f;
  padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  gap: 1rem;
  z-index: 10;
}
.bfs-bar-left  { display:flex; align-items:center; gap:0.65rem; min-width:0; overflow:hidden; }
.bfs-bar-right { display:flex; align-items:center; gap:0.45rem; flex-shrink:0; }
.bfs-title-main {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.85rem, 2vw, 1.15rem);
  font-weight: 700; color: #1a1a1a;
  letter-spacing: 0.04em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.bfs-title-sub {
  font-size: 0.62rem; color: #999;
  letter-spacing: 0.12em; margin-top: 1px;
  white-space: nowrap;
}
.bfs-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  color: #fff; letter-spacing: 0.06em;
  flex-shrink: 0;
}
.bfs-sep { width:1px; height:26px; background:#e8e8e8; flex-shrink:0; }
.bfs-zoom-btn {
  width: 30px; height: 30px;
  border-radius: 7px; border: 1.5px solid #e0e0e0;
  background: #f8f8f8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #555;
  transition: all 0.15s; flex-shrink: 0;
}
.bfs-zoom-btn:hover { border-color: #d32f2f; color: #d32f2f; background: rgba(211,47,47,0.05); }
.bfs-zoom-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; font-weight: 700; color: #333;
  min-width: 44px; text-align: center; flex-shrink: 0;
}
.bfs-fit-btn {
  padding: 0 10px; height: 30px;
  border-radius: 7px; border: 1.5px solid #e0e0e0;
  background: #f8f8f8; cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem; font-weight: 700; color: #555;
  letter-spacing: 0.07em; transition: all 0.15s; flex-shrink: 0;
  display: flex; align-items: center;
}
.bfs-fit-btn:hover { border-color: #d32f2f; color: #d32f2f; background: rgba(211,47,47,0.05); }
.bfs-close-btn {
  height: 30px; padding: 0 12px;
  border-radius: 7px; border: 1.5px solid rgba(211,47,47,0.35);
  background: rgba(211,47,47,0.06); color: #d32f2f;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem; font-weight: 700; cursor: pointer;
  letter-spacing: 0.06em; transition: all 0.18s; flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
}
.bfs-close-btn:hover { background: #d32f2f; color: #fff; border-color: #d32f2f; }

/* ── Scrollable canvas wrapper ── */
#bv-bfs-canvas-wrap {
  flex: 1;
  overflow: auto;
  position: relative;
  /* custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}
#bv-bfs-canvas-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
#bv-bfs-canvas-wrap::-webkit-scrollbar-track { background: transparent; }
#bv-bfs-canvas-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
#bv-bfs-canvas-wrap::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }

/* ── Inner canvas: sized to content, transform scales from top-left ── */
#bv-bfs-canvas {
  display: inline-block;
  transform-origin: top left;
  /* Do NOT set transition here — causes layout jitter on open */
  padding: 24px;
  min-width: max-content;
}

/* ── Status bar ── */
#bv-bfs-statusbar {
  height: 30px; min-height: 30px;
  background: #fff;
  border-top: 1px solid #ebebeb;
  padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  font-size: 0.65rem; color: #aaa;
  letter-spacing: 0.06em;
  font-family: 'JetBrains Mono', monospace;
}