* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

  :root {
    --bg: #080b10;
    --bg-elev: #121821;
    --bg-card: #171d27;
    --border: #2a3340;
    --text: #f2f5f8;
    --text-dim: #a2adba;
    --text-faint: #768292;
    --accent: #ff5722;
    --accent-dim: #c0401a;
    --gold: #f5c842;
    --win: #3ddc84;
    --loss: #ff4757;
  }

  body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding-bottom: 80px;
    overflow-x: hidden;
    background-image: none;
  }

  /* Header */
  .header {
    padding: 20px 16px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
    background: rgba(10, 13, 18, 0.85);
  }

  .logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .logo span { color: var(--accent); }

  .user-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
  }

  .user-stats .points {
    color: var(--gold);
    font-weight: 700;
  }

  /* Tabs */
  .tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }

  .tab {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .tab.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }

  /* Tournament banner */
  .tournament-banner {
    margin: 8px 16px 20px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
  }

  .tournament-banner::before {
    content: none;
  }

  .tournament-banner > * {
    position: relative;
    z-index: 1;
  }

  .tournament-tag {
    display: inline-block;
    font-size: 10px;
    background: var(--accent);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }

  .tournament-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }

  .tournament-meta {
    font-size: 11px;
    color: var(--text-dim);
    display: flex;
    gap: 12px;
  }

  .prize-pool {
    color: var(--gold);
    font-weight: 700;
  }

  .tournament-rules {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.45;
  }

  .tournament-rules strong {
    color: var(--text);
    font-weight: 700;
  }

  .tournament-rules-action {
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(245, 200, 66, 0.24);
    border-radius: 8px;
    background: rgba(245, 200, 66, 0.08);
    color: var(--gold);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* Section title */
  .section-title {
    padding: 0 16px 12px;
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .section-title .live-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--loss);
  }

  #matches-history {
    margin-top: 38px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  #matches-history .section-title {
    margin: 0 14px 14px;
    padding: 12px 0 0;
    color: var(--text);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }

  .live-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--loss);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  /* Match card */
  .match-card {
    margin: 0 14px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
  }

  .match-card.picked {
    border-color: rgba(255, 87, 34, 0.64);
  }

  .match-card.result-win {
    border-color: rgba(61, 220, 132, 0.78);
    border-left: 5px solid var(--win);
    box-shadow: none;
  }

  .match-card.result-loss {
    border-color: rgba(255, 31, 61, 0.88);
    border-left: 5px solid #ff1f3d;
    box-shadow: none;
  }

  .match-card.result-missed {
    border-color: rgba(245, 200, 66, 0.35);
  }

  .match-card.finished .match-points {
    color: var(--gold);
    background: rgba(245, 200, 66, 0.1);
    border-color: rgba(245, 200, 66, 0.24);
  }

  .match-card.result-win .match-points {
    color: var(--win);
    background: rgba(61, 220, 132, 0.1);
    border-color: rgba(61, 220, 132, 0.28);
  }

  .match-card.result-loss .match-points {
    color: var(--loss);
    background: rgba(255, 31, 61, 0.1);
    border-color: rgba(255, 31, 61, 0.28);
  }

  .match-header {
    padding: 12px 14px 10px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
  }

  .pipeline-panel {
    margin: 0 16px 16px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .pipeline-summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .section-title.compact {
    padding: 0;
    margin: 0 0 4px;
  }

  .pipeline-copy {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.5;
  }

  .pipeline-prize {
    min-width: 126px;
    padding: 9px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .pipeline-prize span {
    display: block;
    color: var(--text-faint);
    font-size: 9px;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .prize-breakdown {
    display: grid;
    gap: 5px;
  }

  .prize-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.2;
  }

  .prize-row span {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
  }

  .prize-row strong {
    color: var(--gold);
    font-size: 11px;
    white-space: nowrap;
  }

  .score-model {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .score-model div {
    padding: 10px 8px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 0;
  }

  .score-model strong {
    display: block;
    color: var(--accent);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 4px;
  }

  .score-model span {
    display: block;
    color: var(--text-dim);
    font-size: 9px;
    line-height: 1.35;
  }

  .pipeline-track {
    display: grid;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 2px;
  }

  .pipeline-slot {
    padding: 11px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .pipeline-slot.ready {
    border-color: rgba(255, 87, 34, 0.34);
  }

  .pipeline-slot.finished {
    border-color: rgba(61, 220, 132, 0.34);
  }

  .pipeline-slot-top,
  .pipeline-slot-foot,
  .pipeline-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .pipeline-slot-top {
    margin-bottom: 8px;
  }

  .pipeline-slot-top span,
  .pipeline-slot-foot {
    color: var(--text-faint);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .pipeline-slot-top strong {
    font-size: 11px;
    text-align: right;
  }

  .pipeline-teams {
    color: var(--text);
    font-size: 11px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .pipeline-teams span {
    min-width: 0;
    flex: 1;
  }

  .pipeline-teams span:last-child {
    text-align: right;
  }

  .pipeline-teams em {
    flex: 0 0 auto;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--accent);
    font-style: normal;
    font-weight: 700;
  }

  .pipeline-pick {
    margin-top: 9px;
    padding: 8px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: 10px;
    line-height: 1.35;
  }

  .pipeline-pick.win {
    color: var(--win);
    border-color: rgba(61, 220, 132, 0.3);
    background: rgba(61, 220, 132, 0.06);
  }

  .pipeline-pick.loss {
    color: var(--loss);
    border-color: rgba(255, 71, 87, 0.3);
    background: rgba(255, 71, 87, 0.06);
  }

  .pipeline-pick.pending {
    color: var(--gold);
    border-color: rgba(245, 200, 66, 0.2);
    background: rgba(245, 200, 66, 0.04);
  }

  .match-time { color: var(--text-dim); }
  .match-bo { color: var(--accent); font-weight: 700; }

  .match-detail-button {
    background: transparent;
    border: 0;
    color: var(--accent);
    font: inherit;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
  }

  .match-points {
    flex: 0 0 auto;
    max-width: 44%;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 87, 34, 0.1);
    border: 1px solid rgba(255, 87, 34, 0.22);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: right;
  }

  .match-stage {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .match-stage span {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
  }

  .match-stage strong {
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
  }

  .match-subheader {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px 0;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.35;
  }

  .match-format,
  .match-lock {
    min-width: 0;
  }

  .match-lock {
    text-align: right;
  }

  .match-teams {
    padding: 12px 14px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .team {
    min-height: 132px;
    padding: 14px 10px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    font-family: inherit;
    color: var(--text);
  }

  .team:active { transform: scale(0.97); }

  .team.selected {
    border-color: rgba(255, 87, 34, 0.78);
    background: rgba(255, 87, 34, 0.08);
  }

  .team-logo {
    width: 38px;
    height: 38px;
    background: var(--bg-card);
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    border: 1px solid var(--border);
  }

  .team-name {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
  }

  .team-odds {
    min-height: 14px;
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.3;
  }

  .vs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
  }

  .match-footer {
    padding: 10px 14px;
    background: rgba(8, 11, 16, 0.36);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
  }

  .pick-count {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
  }

  .match-footer-status {
    min-width: 0;
    text-align: right;
    color: var(--text);
    overflow-wrap: anywhere;
  }

  .waiting-title {
    margin-top: 18px;
  }

  .waiting-card {
    margin: 0 14px 12px;
    background: rgba(23, 29, 39, 0.72);
    border: 1px dashed rgba(162, 173, 186, 0.32);
    border-left: 5px solid rgba(162, 173, 186, 0.42);
    border-radius: 8px;
    overflow: hidden;
  }

  .waiting-card-header {
    padding: 12px 14px 10px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(42, 51, 64, 0.82);
  }

  .waiting-badge {
    flex: 0 0 auto;
    max-width: 44%;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(162, 173, 186, 0.08);
    border: 1px solid rgba(162, 173, 186, 0.2);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
  }

  .waiting-subheader {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px 0;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.35;
  }

  .waiting-subheader span:last-child {
    text-align: right;
  }

  .waiting-teams {
    padding: 12px 14px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .waiting-team {
    min-height: 132px;
    padding: 14px 10px 12px;
    background: rgba(18, 24, 33, 0.72);
    border: 1px solid rgba(42, 51, 64, 0.82);
    border-radius: 8px;
    text-align: center;
    color: var(--text);
  }

  .waiting-team.pending {
    color: var(--text-dim);
  }

  .waiting-team.pending .team-logo {
    color: var(--text-dim);
    border-style: dashed;
  }

  .waiting-footer {
    padding: 10px 14px;
    background: rgba(8, 11, 16, 0.24);
    color: var(--text-dim);
    border-top: 1px solid rgba(42, 51, 64, 0.82);
    font-size: 12px;
    line-height: 1.4;
  }

  .inline-admin-action {
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 71, 87, 0.35);
    background: rgba(255, 71, 87, 0.08);
    color: var(--loss);
    font: inherit;
    font-size: 9px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }

  /* Live match */
  .match-card.live {
    border-color: rgba(255, 71, 87, 0.3);
  }

  .match-card.in-progress {
    position: relative;
    border-color: rgba(255, 87, 34, 0.78);
    border-left: 5px solid var(--accent);
    box-shadow: none;
  }

  .match-card.in-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 87, 34, 0.08), transparent 55%);
  }

  .match-card.in-progress .match-points,
  .match-card.in-progress .match-subheader span:last-child {
    color: var(--accent);
  }

  .live-score {
    padding: 12px 14px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    text-align: center;
  }

  .live-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .live-score-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 38px;
    line-height: 1;
  }

  .team-score-num {
    margin-top: 2px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px;
    line-height: 1;
    color: var(--text);
  }

  .winning { color: var(--win); }

  /* Voting widget */
  .vote-card {
    margin: 16px;
    padding: 16px;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 87, 34, 0.05) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .vote-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }

  .vote-desc {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 14px;
  }

  .vote-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    background: var(--bg-elev);
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    color: var(--text);
    font-family: inherit;
    text-align: left;
  }

  .vote-option:active { transform: scale(0.99); }
  .vote-option.selected { border-color: var(--accent); }

  .vote-option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .vote-option-name { font-size: 13px; font-weight: 700; }
  .vote-option-team { font-size: 10px; color: var(--text-dim); }

  .vote-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
  }

  .vote-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.5s;
  }

  .vote-percent {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    min-width: 40px;
    text-align: right;
  }

  /* Leaderboard */
  .leaderboard { padding: 0 16px; }

  .lb-row {
    display: grid;
    grid-template-columns: 32px 36px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 6px;
  }

  .lb-row.me {
    border-color: var(--accent);
    background: linear-gradient(90deg, rgba(255, 87, 34, 0.08) 0%, var(--bg-card) 100%);
  }

  .lb-rank {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: var(--text-faint);
    text-align: center;
  }

  .lb-rank.gold { color: var(--gold); font-size: 22px; }
  .lb-rank.silver { color: #c0c5cc; font-size: 20px; }
  .lb-rank.bronze { color: #cd7f32; font-size: 20px; }

  .lb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-elev);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-dim);
    font-size: 12px;
    border: 1px solid var(--border);
  }

  .lb-info { min-width: 0; }
  .lb-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lb-name .crown { color: var(--gold); }

  .lb-stats { font-size: 10px; color: var(--text-faint); margin-top: 2px; }

  .lb-score {
    text-align: right;
  }

  .lb-points {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    color: var(--gold);
    letter-spacing: 1px;
  }

  .lb-prize {
    margin-top: 2px;
    max-width: 120px;
    color: var(--gold);
    font-size: 9px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }

  /* Bottom nav */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 13, 18, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 10px 0 20px;
    z-index: 20;
  }

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-faint);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s;
    background: none;
    border: none;
    font-family: inherit;
  }

  .nav-item.active { color: var(--accent); }

  .nav-icon {
    font-size: 20px;
    font-family: 'Bebas Neue', sans-serif;
  }

  /* View switching */
  .view { display: none; }
  .view.active { display: block; animation: fadeIn 0.25s; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Toast */
  .toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 100;
  }

  .toast.show { opacity: 1; }

  .inline-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(3, 7, 18, 0.72);
    backdrop-filter: blur(10px);
  }

  .inline-confirm {
    width: min(100%, 390px);
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
  }

  .inline-confirm-kicker {
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .inline-confirm-title {
    margin: 4px 0 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 1px;
  }

  .inline-confirm-copy {
    margin: 0;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.45;
  }

  .inline-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
  }

  .inline-confirm-button {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-weight: 800;
    background: rgba(255, 255, 255, 0.03);
  }

  .inline-confirm-button.primary {
    color: #111827;
    border-color: var(--gold);
    background: var(--gold);
  }

  .inline-confirm-button.secondary {
    color: var(--text-dim);
  }

  body.sheet-open {
    overflow: hidden;
  }

  .sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 80;
  }

  .bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px 22px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.4);
  }

  .sheet-handle {
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--text-faint);
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }

  .sheet-kicker {
    color: var(--text-faint);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
  }

  .sheet-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 25px;
    letter-spacing: 1px;
  }

  .icon-button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .match-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }

  .info-box {
    padding: 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 0;
  }

  .info-label {
    color: var(--text-faint);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }

  .info-value {
    color: var(--text);
    font-size: 11px;
    line-height: 1.35;
  }

  .sheet-section-title {
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .sheet-pick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .sheet-team {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elev);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
  }

  .sheet-team.selected {
    border-color: var(--accent);
    background: rgba(255, 87, 34, 0.12);
  }

  .sheet-team:disabled {
    cursor: default;
    opacity: 0.65;
  }

  .sheet-team small {
    color: var(--text-dim);
    font-size: 10px;
  }

  .pick-slip {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
  }

  .pick-slip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 11px;
  }

  .pick-slip-row strong {
    color: var(--text);
    text-align: right;
  }

  .scoreline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .scoreline-option {
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    cursor: pointer;
  }

  .scoreline-option.selected {
    border-color: var(--accent);
    background: rgba(255, 87, 34, 0.12);
    color: var(--accent);
  }

  .sheet-confirm {
    margin-top: 12px;
  }

  .sheet-note {
    margin-top: 12px;
    padding: 12px;
    color: var(--text-dim);
    background: rgba(255, 87, 34, 0.06);
    border: 1px solid rgba(255, 87, 34, 0.18);
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.5;
  }

  .sheet-note strong {
    color: var(--accent);
  }

  .sheet-note.danger-note {
    background: rgba(255, 31, 61, 0.08);
    border-color: rgba(255, 31, 61, 0.28);
  }

  .admin-preview-summary {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
  }

  .admin-preview-summary > div {
    display: grid;
    gap: 5px;
    padding: 11px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .admin-preview-summary span,
  .admin-preview-row span {
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .admin-preview-summary strong {
    color: var(--text);
    font-size: 12px;
    line-height: 1.4;
  }

  .admin-preview-list {
    display: grid;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
  }

  .admin-preview-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .admin-preview-row > div {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .admin-preview-row strong {
    color: var(--text);
    font-size: 12px;
  }

  .admin-preview-row em {
    min-width: 44px;
    text-align: right;
    font-style: normal;
    font-size: 13px;
    font-weight: 800;
  }

  .admin-preview-row em.win { color: var(--win); }
  .admin-preview-row em.loss { color: var(--loss); }

  .admin-preview-empty {
    padding: 12px;
    color: var(--text-dim);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
  }

  .rules-list {
    display: grid;
    gap: 10px;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.55;
  }

  .rules-summary {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(245, 200, 66, 0.08);
    border: 1px solid rgba(245, 200, 66, 0.2);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
  }

  .rules-summary strong {
    color: var(--gold);
    font-size: 13px;
  }

  .rules-list div {
    display: grid;
    gap: 5px;
    padding: 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .rules-list strong {
    color: var(--text);
  }

  .tournament-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }

  .tournament-info-summary {
    border-color: rgba(129, 93, 246, 0.26);
    background: rgba(129, 93, 246, 0.08);
  }

  .tournament-info-summary strong {
    color: var(--text);
  }

  .tournament-source-link {
    width: fit-content;
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
  }

  .team-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .team-chip {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elev);
  }

  .team-chip > div {
    min-width: 0;
  }

  .team-chip .team-chip-emblem {
    width: 34px;
    height: 34px;
  }

  .team-chip .team-chip-emblem.has-logo {
    padding: 3px;
  }

  .team-chip strong,
  .team-chip span {
    display: block;
    overflow-wrap: anywhere;
  }

  .team-chip strong {
    color: var(--text);
    font-size: 12px;
    line-height: 1.2;
  }

  .team-chip span {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 800;
  }

  .team-chip-status,
  .team-chip-prize {
    display: block;
    margin-top: 6px;
    font-style: normal;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .team-chip-status {
    color: var(--gold);
    font-size: 9px;
    font-weight: 900;
  }

  .team-chip-status.eliminated {
    color: var(--loss);
  }

  .team-chip-status.active {
    color: var(--win);
  }

  .team-chip-prize {
    color: var(--text);
    font-size: 11px;
    font-weight: 900;
  }

  .prize-distribution-list {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
  }

  .prize-place-row {
    display: grid;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elev);
  }

  .prize-place-row.locked {
    border-color: rgba(247, 200, 75, 0.26);
    background: rgba(247, 200, 75, 0.05);
  }

  .prize-place-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
    gap: 10px;
    align-items: start;
  }

  .prize-place-main strong,
  .prize-place-main span {
    display: block;
  }

  .prize-place-main strong {
    color: var(--text);
    font-size: 12px;
    line-height: 1.2;
  }

  .prize-place-main span {
    margin-top: 4px;
    color: var(--text-faint);
    font-size: 9px;
    line-height: 1.25;
  }

  .prize-place-money {
    text-align: right;
  }

  .prize-place-money strong {
    color: var(--gold);
    font-size: 13px;
  }

  .prize-place-teams {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .prize-team-chip,
  .prize-place-empty {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(8, 13, 20, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
  }

  .prize-place-row.locked .prize-team-chip {
    color: var(--text);
    border-color: rgba(247, 200, 75, 0.22);
  }

  /* Profile view */
  .profile-card {
    margin: 16px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
  }

  .profile-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
    background: var(--bg-elev);
    border: 2px solid var(--gold);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    color: var(--gold);
  }

  .profile-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }

  .profile-title {
    font-size: 11px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }

  .profile-name-action {
    width: fit-content;
    margin: -6px auto 12px;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
  }

  .profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
  }

  .stat-box {
    padding: 12px 8px;
    background: var(--bg-elev);
    border-radius: 8px;
    border: 1px solid var(--border);
  }

  .stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: var(--text);
  }

  .stat-num.accent { color: var(--accent); }
  .stat-num.win { color: var(--win); }

  .stat-label {
    font-size: 9px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
  }

  /* Prize info */
  .prize-info {
    margin: 16px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.08), transparent);
    border: 1px solid rgba(245, 200, 66, 0.2);
    border-radius: 10px;
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.6;
  }

  .prize-info strong { color: var(--gold); }

  .prize-info-title {
    margin-bottom: 10px;
    color: var(--text);
  }

  .prize-info .prize-breakdown {
    margin-bottom: 10px;
    padding: 10px;
    background: rgba(245, 200, 66, 0.05);
    border: 1px solid rgba(245, 200, 66, 0.12);
    border-radius: 8px;
  }

  .prize-info-note {
    color: var(--text-dim);
  }

  /* MVP states */
  main { min-height: calc(100vh - 80px); }

  .state-card {
    margin: 16px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .state-card.error {
    border-color: rgba(255, 71, 87, 0.45);
    background: rgba(255, 71, 87, 0.06);
  }

  .state-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 6px;
  }

  .state-text {
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .match-card.locked .team {
    cursor: default;
    opacity: 0.86;
  }

  .match-card.finished .team {
    opacity: 1;
   }

  .team.winner {
    border-color: rgba(61, 220, 132, 0.86);
    background: rgba(61, 220, 132, 0.1);
  }

  .team.winner .team-logo {
    border-color: rgba(61, 220, 132, 0.56);
    background: rgba(61, 220, 132, 0.12);
  }

  .match-card.result-loss .team.selected:not(.winner) {
    border-color: rgba(255, 31, 61, 0.92);
    background: rgba(255, 31, 61, 0.12);
    box-shadow: none;
  }

  .match-card.result-loss .team.selected:not(.winner) .team-logo {
    border-color: rgba(255, 31, 61, 0.64);
    background: rgba(255, 31, 61, 0.12);
  }

  .team-odds {
    min-height: 14px;
  }

  .tournament-list {
    padding: 4px 16px 16px;
  }

  .tournament-card {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 14px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .tournament-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 21px;
    letter-spacing: 1px;
    margin-top: 8px;
  }

  .tournament-card-meta {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.5;
    margin-top: 3px;
  }

  .tournament-card-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    color: var(--text-dim);
    font-size: 10px;
    white-space: nowrap;
  }

  .tournament-card-stats strong {
    color: var(--gold);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
  }

  .status-pill {
    display: inline-flex;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 87, 34, 0.35);
    color: var(--accent);
    background: rgba(255, 87, 34, 0.08);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .achievement-list {
    text-align: left;
    padding: 14px;
  }

  .achievement-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
  }

  .achievement-row:last-child {
    margin-bottom: 0;
  }

  .achievement-row.muted {
    opacity: 0.42;
  }

  .achievement-icon {
    width: 32px;
    font-size: 26px;
    text-align: center;
  }

  .achievement-title {
    font-size: 13px;
    font-weight: 700;
  }

  .achievement-text {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 3px;
  }

  .action-card {
    display: grid;
    gap: 10px;
  }

  .admin-panel {
    text-align: left;
    padding: 14px;
  }

  .admin-form {
    display: grid;
    gap: 10px;
  }

  .admin-form label {
    display: grid;
    gap: 5px;
  }

  .admin-form label span {
    color: var(--text-faint);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .admin-form input,
  .admin-form select {
    width: 100%;
    min-height: 38px;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
  }

  .admin-two-col {
    display: grid;
    grid-template-columns: 1fr 76px;
    gap: 8px;
  }

  .admin-list {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }

  .admin-list-title {
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .admin-match-row {
    padding: 10px;
    margin-bottom: 8px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .admin-match-main {
    display: grid;
    gap: 3px;
    margin-bottom: 8px;
  }

  .admin-match-main strong {
    font-size: 12px;
  }

  .admin-match-main span {
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.45;
  }

  .admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .mini-action {
    padding: 7px 9px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
  }

  .mini-action.danger {
    border-color: rgba(255, 71, 87, 0.35);
    color: var(--loss);
  }

  .pick-history {
    padding: 8px;
    text-align: left;
  }

  .pick-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }

  .pick-row:last-child {
    border-bottom: 0;
  }

  .pick-row .team-logo {
    margin: 0;
  }

  .pick-row-info {
    min-width: 0;
  }

  .pick-row-title {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pick-row-meta {
    color: var(--text-faint);
    font-size: 10px;
    line-height: 1.4;
    margin-top: 2px;
  }

  .pick-result {
    min-width: 52px;
    text-align: right;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .pick-result.win { color: var(--win); }
  .pick-result.loss { color: var(--loss); }
  .pick-result.live { color: var(--loss); }
  .pick-result.pending { color: var(--gold); }

  .sheet-result {
    margin: 12px 0;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.5;
  }

  .sheet-result.result-win {
    border-color: rgba(61, 220, 132, 0.38);
    background: rgba(61, 220, 132, 0.08);
    color: var(--win);
  }

  .sheet-result.result-loss {
    border-color: rgba(255, 71, 87, 0.38);
    background: rgba(255, 71, 87, 0.08);
    color: var(--loss);
  }

  .sheet-result.result-missed {
    border-color: rgba(245, 200, 66, 0.25);
    background: rgba(245, 200, 66, 0.06);
    color: var(--gold);
  }

  .avatar-photo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .empty-inline {
    padding: 10px;
  }

  .primary-action,
  .secondary-action {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 1.5px;
    cursor: pointer;
  }

  .primary-action {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
  }

  .primary-action.danger-action {
    background: var(--loss);
    border-color: var(--loss);
    color: #fff;
  }

  .secondary-action {
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
  }

  .secondary-action.danger-action {
    color: var(--loss);
    border-color: rgba(255, 71, 87, 0.4);
    background: rgba(255, 71, 87, 0.08);
  }

  @media (max-width: 360px) {
    .match-header {
      flex-direction: column;
      gap: 8px;
    }

    .match-points,
    .waiting-badge {
      max-width: 100%;
      text-align: left;
    }

    .waiting-card-header {
      flex-direction: column;
      gap: 8px;
    }

    .match-teams,
    .live-score,
    .waiting-teams {
      grid-template-columns: 1fr;
    }

    .vs {
      margin: 0 auto;
    }

    .match-info-grid {
      grid-template-columns: 1fr;
    }

    .scoreline-grid {
      grid-template-columns: 1fr;
    }

    .score-model {
      grid-template-columns: 1fr;
    }

    .pipeline-summary {
      flex-direction: column;
    }

    .pipeline-prize {
      width: 100%;
      text-align: left;
    }

    .admin-two-col {
      grid-template-columns: 1fr;
    }

    .tournament-card {
      align-items: flex-start;
      flex-direction: column;
    }

    .tournament-card-stats {
      align-items: flex-start;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
    }
  }

  /* Matchday redesign: Variant 04 base with bracket/top accents */
  :root {
    --bg: #05070b;
    --bg-elev: #0b1119;
    --bg-card: #111823;
    --bg-soft: #171f2b;
    --border: rgba(148, 163, 184, 0.18);
    --border-strong: rgba(226, 232, 240, 0.28);
    --text: #f7fafc;
    --text-dim: #a9b3c1;
    --text-faint: #6f7b8d;
    --accent: #ff4d3d;
    --accent-dim: #c6312b;
    --gold: #f7c84b;
    --win: #39d98a;
    --loss: #ff4f5f;
    --cyan: #25d0df;
    --violet: #8a6cff;
    --shadow-card: 0 16px 34px rgba(0, 0, 0, 0.32);
  }

  html {
    background: #030407;
  }

  body {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background:
      linear-gradient(180deg, rgba(12, 18, 28, 0.96) 0%, rgba(5, 7, 11, 1) 34%, rgba(6, 8, 13, 1) 100%);
    color: var(--text);
    padding-bottom: 92px;
  }

  main,
  .header,
  .bottom-nav {
    width: 100%;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }

  main {
    padding-top: 8px;
  }

  .header {
    min-height: 62px;
    padding: 12px 16px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(5, 7, 11, 0.86);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
  }

  .app-brand {
    min-width: 0;
    display: grid;
    justify-items: center;
    padding-left: 62px;
    gap: 2px;
    line-height: 1.05;
  }

  .app-brand strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
  }

  .app-brand span {
    color: var(--text-faint);
    font-size: 9px;
  }

  .logo {
    display: none;
  }

  .user-stats {
    min-width: 52px;
    height: 30px;
    justify-content: center;
    padding: 5px 9px;
    gap: 6px;
    border-radius: 999px;
    border-color: rgba(247, 200, 75, 0.24);
    background: rgba(17, 24, 35, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .user-stats .points {
    color: var(--gold);
  }

  .tabs {
    padding: 10px 16px 12px;
    gap: 8px;
  }

  .tab {
    min-height: 32px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(17, 24, 35, 0.72);
    border-color: rgba(148, 163, 184, 0.16);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
  }

  .tab.active {
    color: var(--text);
    background: linear-gradient(180deg, rgba(138, 108, 255, 0.26), rgba(37, 208, 223, 0.12));
    border-color: rgba(138, 108, 255, 0.54);
    box-shadow: 0 0 0 1px rgba(138, 108, 255, 0.12);
  }

  .tournament-banner,
  .match-card,
  .waiting-card,
  .profile-card,
  .state-card,
  .pipeline-panel,
  .prize-info,
  .vote-card {
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(17, 24, 35, 0.96), rgba(10, 15, 22, 0.98));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
  }

  .tournament-banner {
    margin: 8px 14px 18px;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: center;
    overflow: hidden;
  }

  .tournament-tag {
    grid-column: 1;
    width: fit-content;
    margin: 0;
    background: rgba(247, 200, 75, 0.12);
    color: var(--gold);
    border: 1px solid rgba(247, 200, 75, 0.22);
    border-radius: 999px;
  }

  .tournament-name {
    grid-column: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
  }

  .tournament-meta,
  .tournament-rules {
    color: var(--text-dim);
  }

  .tournament-meta {
    grid-column: 1;
    font-size: 10px;
    gap: 8px;
  }

  .tournament-rules {
    display: none;
  }

  .tournament-rules-action {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: auto;
    min-width: 86px;
    margin: 0;
    align-self: stretch;
    border-radius: 8px;
    color: var(--gold);
    background: rgba(247, 200, 75, 0.09);
  }

  .section-title {
    padding: 2px 16px 10px;
    color: var(--text);
    font-size: 11px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
  }

  .section-title span:not(.live-dot) {
    color: var(--text);
  }

  #matches-history {
    margin-top: 28px;
    border-top-color: rgba(148, 163, 184, 0.12);
  }

  .match-card {
    margin: 0 14px 12px;
    overflow: hidden;
  }

  .match-scoreboard-card {
    padding: 0;
    background:
      linear-gradient(180deg, rgba(17, 24, 35, 0.96), rgba(7, 11, 17, 0.98)),
      linear-gradient(90deg, rgba(255, 77, 61, 0.2), transparent 55%);
  }

  .match-card.picked,
  .match-card.in-progress {
    border-color: rgba(255, 77, 61, 0.46);
  }

  .match-card.in-progress {
    border-left: 0;
    background:
      linear-gradient(180deg, rgba(24, 31, 42, 0.98), rgba(10, 15, 22, 0.98)),
      linear-gradient(90deg, rgba(255, 77, 61, 0.18), transparent 54%);
  }

  .match-card.in-progress::before {
    height: 3px;
    inset: 0 0 auto;
    background: linear-gradient(90deg, var(--loss), var(--gold), transparent);
  }

  .scoreboard-kicker,
  .scoreboard-stage,
  .scoreboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .scoreboard-kicker {
    padding: 10px 12px;
    background: rgba(3, 5, 8, 0.42);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    color: var(--loss);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }

  .scoreboard-kicker strong {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
  }

  .scoreboard-stage {
    padding: 10px 12px 2px;
    color: var(--text-dim);
    font-size: 10px;
  }

  .scoreboard-stage span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
  }

  .scoreboard-stage strong {
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
  }

  .scoreboard-main {
    padding: 12px 12px 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .scoreboard-team {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .scoreboard-team.right {
    text-align: right;
  }

  .scoreboard-team strong {
    color: var(--text);
    font-size: 24px;
    line-height: 1;
  }

  .scoreboard-team span {
    min-width: 0;
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .scoreboard-score {
    min-width: 98px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text);
  }

  .scoreboard-score strong {
    min-width: 28px;
    font-size: 42px;
    line-height: 1;
    text-align: center;
  }

  .scoreboard-score span {
    color: var(--accent);
    font-size: 28px;
    font-weight: 800;
  }

  .scoreboard-map {
    padding: 0 12px 12px;
    color: var(--text-faint);
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  .scoreboard-footer {
    padding: 10px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(3, 5, 8, 0.34);
    color: var(--text-dim);
    font-size: 10px;
    text-transform: uppercase;
  }

  .scoreboard-footer strong {
    color: var(--loss);
    font-size: 9px;
  }

  .match-card.result-win {
    border-left: 0;
    border-color: rgba(57, 217, 138, 0.45);
  }

  .match-card.result-loss {
    border-left: 0;
    border-color: rgba(255, 79, 95, 0.5);
  }

  .match-header {
    padding: 12px 14px 9px;
    border-bottom-color: rgba(148, 163, 184, 0.12);
  }

  .match-stage span {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }

  .match-stage strong {
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
  }

  .match-points,
  .waiting-badge {
    max-width: 52%;
    color: var(--gold);
    background: rgba(247, 200, 75, 0.08);
    border-color: rgba(247, 200, 75, 0.22);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .match-subheader {
    padding: 9px 14px 0;
    color: var(--text-dim);
    font-size: 11px;
  }

  .match-lock {
    color: var(--text);
  }

  .match-teams,
  .live-score,
  .waiting-teams {
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 8px;
  }

  .team,
  .waiting-team {
    min-height: 112px;
    border-radius: 8px;
    background: rgba(8, 13, 20, 0.84);
    border-color: rgba(148, 163, 184, 0.16);
  }

  .team.selected {
    border-color: rgba(37, 208, 223, 0.58);
    background: rgba(37, 208, 223, 0.08);
  }

  .team.winner {
    border-color: rgba(57, 217, 138, 0.62);
    background: rgba(57, 217, 138, 0.08);
  }

  .team-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(23, 31, 43, 0.96), rgba(9, 14, 21, 0.98));
    border-color: rgba(148, 163, 184, 0.18);
    color: var(--text);
  }

  .team-name {
    min-height: 34px;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .waiting-team .team-name {
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  .waiting-team.pending .team-odds {
    color: var(--text-faint);
  }

  .team-odds {
    color: var(--text-faint);
    font-size: 10px;
  }

  .vs {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-dim);
    font-size: 10px;
  }

  .match-footer {
    background: rgba(3, 5, 8, 0.44);
    border-top-color: rgba(148, 163, 184, 0.12);
    color: var(--text-dim);
  }

  .match-footer-status {
    color: var(--text);
  }

  .live-team {
    min-height: 86px;
    justify-content: center;
    border-radius: 8px;
    background: rgba(7, 11, 17, 0.66);
    border: 1px solid rgba(148, 163, 184, 0.12);
    color: var(--text);
  }

  .live-score-num,
  .team-score-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: 0;
  }

  .live-score-num {
    color: var(--accent);
    font-size: 34px;
  }

  .team-score-num {
    font-size: 26px;
  }

  .winning {
    color: var(--win);
  }

  .scoreline-grid {
    gap: 8px;
  }

  .scoreline-option {
    border-radius: 8px;
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(8, 13, 20, 0.84);
  }

  .scoreline-option.selected {
    color: #031014;
    background: var(--cyan);
    border-color: var(--cyan);
  }

  .waiting-card {
    border-style: solid;
    border-left: 0;
    background: rgba(12, 17, 25, 0.76);
  }

  .waiting-team.pending {
    border-style: dashed;
    opacity: 0.72;
  }

  .pipeline-panel {
    padding: 14px;
  }

  .pipeline-track {
    max-height: none;
    gap: 10px;
  }

  .pipeline-slot {
    position: relative;
    border-radius: 8px;
    background: rgba(8, 13, 20, 0.78);
  }

  .pipeline-slot.ready {
    border-color: rgba(138, 108, 255, 0.42);
  }

  .pipeline-slot.finished {
    border-color: rgba(57, 217, 138, 0.38);
  }

  .pipeline-teams em {
    color: var(--cyan);
    background: rgba(37, 208, 223, 0.08);
  }

  .pipeline-pick.pending {
    color: var(--gold);
  }

  .leaderboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 14px 18px;
  }

  .leaderboard.podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lb-row {
    margin: 0;
    border-radius: 8px;
    background: rgba(12, 17, 25, 0.92);
    border-color: rgba(148, 163, 184, 0.14);
  }

  .leaderboard.podium .lb-row:nth-child(-n+3) {
    min-height: 148px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
    padding: 14px 8px;
    text-align: center;
    background: linear-gradient(180deg, rgba(28, 22, 55, 0.74), rgba(12, 17, 25, 0.96));
    border-color: rgba(138, 108, 255, 0.24);
  }

  .leaderboard.podium .lb-row:nth-child(n+4) {
    grid-column: 1 / -1;
  }

  .lb-row.me {
    border-color: rgba(138, 108, 255, 0.58);
    background: linear-gradient(90deg, rgba(138, 108, 255, 0.16), rgba(12, 17, 25, 0.96));
  }

  .leaderboard.podium .lb-row:nth-child(-n+3).me {
    background: linear-gradient(180deg, rgba(138, 108, 255, 0.28), rgba(12, 17, 25, 0.96));
  }

  .leaderboard.podium .lb-row:nth-child(-n+3) .lb-rank {
    order: 2;
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
  }

  .lb-avatar {
    background: rgba(8, 13, 20, 0.92);
  }

  .leaderboard.podium .lb-row:nth-child(-n+3) .lb-avatar {
    width: 48px;
    height: 48px;
    order: 1;
    border-color: rgba(247, 200, 75, 0.42);
    color: var(--gold);
  }

  .leaderboard.podium .lb-row:nth-child(-n+3) .lb-info {
    order: 3;
    width: 100%;
  }

  .leaderboard.podium .lb-row:nth-child(-n+3) .lb-score {
    order: 4;
    text-align: center;
  }

  .lb-name {
    font-weight: 800;
  }

  .leaderboard.podium .lb-row:nth-child(-n+3) .lb-name,
  .leaderboard.podium .lb-row:nth-child(-n+3) .lb-stats {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .lb-stats {
    color: var(--text-faint);
  }

  .lb-points {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 0;
  }

  .bottom-nav {
    left: 50%;
    right: auto;
    width: min(100%, 430px);
    transform: translateX(-50%);
    padding: 9px 0 calc(13px + env(safe-area-inset-bottom));
    background: rgba(5, 7, 11, 0.92);
    border-top-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.34);
  }

  .nav-item {
    gap: 3px;
    color: var(--text-faint);
    font-size: 9px;
    letter-spacing: 0.5px;
  }

  .nav-item.active {
    color: var(--violet);
  }

  .nav-icon {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 16px;
  }

  .bottom-sheet {
    width: min(100%, 430px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg, #131b27, #080c12);
  }

  .primary-action,
  .secondary-action,
  .mini-action,
  .inline-admin-action,
  .tournament-rules-action {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.4px;
  }

  .primary-action {
    color: #061012;
    background: var(--gold);
    border-color: var(--gold);
    font-weight: 800;
  }

  .secondary-action {
    background: rgba(8, 13, 20, 0.84);
  }

  @media (min-width: 560px) {
    body {
      padding-top: 18px;
    }

    .header {
      border-radius: 18px 18px 0 0;
    }

    .bottom-nav {
      bottom: 18px;
      border-radius: 0 0 18px 18px;
      border: 1px solid rgba(148, 163, 184, 0.16);
    }
  }

  @media (max-width: 360px) {
    .header {
      grid-template-columns: 34px minmax(0, 1fr) auto;
      padding-left: 12px;
      padding-right: 12px;
    }

    .leaderboard {
      grid-template-columns: 1fr;
    }

    .leaderboard.podium .lb-row:nth-child(-n+3) {
      grid-template-columns: 34px 38px 1fr auto;
      justify-items: stretch;
      min-height: 0;
      text-align: left;
    }

    .leaderboard.podium .lb-row:nth-child(-n+3) .lb-rank,
    .leaderboard.podium .lb-row:nth-child(-n+3) .lb-avatar,
    .leaderboard.podium .lb-row:nth-child(-n+3) .lb-info,
    .leaderboard.podium .lb-row:nth-child(-n+3) .lb-score {
      order: initial;
    }

    .leaderboard.podium .lb-row:nth-child(-n+3) .lb-avatar {
      width: 34px;
      height: 34px;
    }

    .team-name {
      font-size: 15px;
    }
  }

  /* Bracket board redesign */
  .bracket-shell {
    margin: 0 14px 18px;
    padding: 0;
  }

  .bracket-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(17, 24, 35, 0.96), rgba(8, 13, 20, 0.98));
    box-shadow: var(--shadow-card);
  }

  .bracket-kicker {
    margin-bottom: 4px;
    color: var(--violet);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .bracket-hero h2 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    line-height: 1.05;
    text-transform: uppercase;
  }

  .bracket-hero p {
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.45;
  }

  .bracket-prize {
    min-width: 104px;
    padding: 10px;
    display: grid;
    place-content: center;
    gap: 5px;
    border-radius: 8px;
    border: 1px solid rgba(247, 200, 75, 0.24);
    background: rgba(247, 200, 75, 0.07);
    text-align: center;
  }

  .bracket-prize span {
    color: var(--text-faint);
    font-size: 9px;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .bracket-prize strong {
    color: var(--gold);
    font-size: 16px;
  }

  .bracket-score-model {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 10px 0;
  }

  .bracket-score-model div {
    padding: 10px 8px;
  }

  .bracket-score-model strong {
    font-size: 20px;
  }

  .bracket-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 12px;
  }

  .bracket-timeline::before {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    top: 17px;
    height: 1px;
    background: linear-gradient(90deg, rgba(57, 217, 138, 0.52), rgba(37, 208, 223, 0.36), rgba(247, 200, 75, 0.24));
  }

  .bracket-timeline-step {
    position: relative;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 0 2px;
    text-align: center;
  }

  .bracket-timeline-step span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 50%;
    background: #07101a;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 900;
    z-index: 1;
  }

  .bracket-timeline-step.done span {
    border-color: rgba(57, 217, 138, 0.44);
    color: var(--win);
  }

  .bracket-timeline-step.active span {
    border-color: rgba(247, 200, 75, 0.64);
    background: rgba(247, 200, 75, 0.12);
    color: var(--gold);
    box-shadow: 0 0 0 3px rgba(247, 200, 75, 0.08);
  }

  .bracket-timeline-step strong {
    color: var(--text);
    font-size: 9px;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .bracket-timeline-step em {
    color: var(--text-faint);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
  }

  .bracket-focus-panel {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid rgba(247, 200, 75, 0.24);
    border-radius: 8px;
    background:
      radial-gradient(circle at 94% 0%, rgba(247, 200, 75, 0.12), transparent 38%),
      linear-gradient(180deg, rgba(17, 24, 35, 0.98), rgba(7, 11, 17, 0.98));
  }

  .bracket-focus-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .bracket-focus-head span {
    display: block;
    color: var(--gold);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .bracket-focus-head strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
  }

  .bracket-focus-head em {
    max-width: 48%;
    color: var(--text-dim);
    font-size: 10px;
    font-style: normal;
    line-height: 1.35;
    text-align: right;
  }

  .bracket-focus-grid {
    display: grid;
    gap: 8px;
  }

  .bracket-focus-match {
    display: grid;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(6, 10, 16, 0.72);
  }

  .bracket-focus-match.open {
    border-color: rgba(247, 200, 75, 0.3);
  }

  .bracket-focus-match.locked {
    border-color: rgba(148, 163, 184, 0.18);
  }

  .bracket-focus-match-head,
  .bracket-focus-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
  }

  .bracket-focus-match-head strong {
    color: var(--text);
    font-size: 11px;
    text-transform: uppercase;
  }

  .bracket-focus-match-head span,
  .bracket-focus-foot span,
  .bracket-focus-foot strong {
    color: var(--text-faint);
    font-size: 9px;
    line-height: 1.35;
  }

  .bracket-focus-foot strong {
    color: var(--gold);
    text-align: right;
  }

  .bracket-focus-matchup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  .bracket-focus-matchup > span {
    align-self: center;
    justify-self: center;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 50%;
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 900;
  }

  .bracket-focus-team {
    min-width: 0;
    min-height: 82px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    padding: 8px 6px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(9, 15, 24, 0.88);
    color: var(--text);
    font-family: inherit;
    text-align: center;
  }

  button.bracket-focus-team {
    cursor: pointer;
  }

  button.bracket-focus-team:active {
    border-color: rgba(247, 200, 75, 0.54);
    background: rgba(247, 200, 75, 0.08);
  }

  .bracket-focus-team .bracket-focus-emblem {
    width: 38px;
    height: 38px;
  }

  .bracket-focus-team strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1;
  }

  .bracket-focus-team em {
    color: var(--text-faint);
    font-size: 9px;
    font-style: normal;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .bracket-flow-map {
    display: grid;
    gap: 10px;
  }

  .bracket-flow-stage {
    display: grid;
    gap: 9px;
    padding: 11px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(13, 19, 29, 0.98), rgba(6, 10, 16, 0.98));
  }

  .bracket-flow-stage.active {
    border-color: rgba(247, 200, 75, 0.28);
  }

  .bracket-flow-stage.done {
    border-color: rgba(57, 217, 138, 0.18);
  }

  .bracket-flow-stage-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
  }

  .bracket-flow-stage-head span {
    display: block;
    color: var(--text-faint);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .bracket-flow-stage-head strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
  }

  .bracket-flow-stage-head em {
    padding: 4px 7px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    color: var(--text-dim);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
  }

  .bracket-flow-stage.active .bracket-flow-stage-head em {
    border-color: rgba(247, 200, 75, 0.3);
    color: var(--gold);
  }

  .bracket-flow-slot.picked .bracket-flow-slot-head span {
    color: var(--violet);
  }

  .bracket-flow-stage p {
    margin: 0;
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.4;
  }

  .bracket-route-clusters {
    display: grid;
    gap: 8px;
  }

  .bracket-route-clusters > div > span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-faint);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .bracket-route-list.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bracket-route-list.compact .bracket-team-route {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
  }

  .bracket-route-list.compact .bracket-team-route span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bracket-route-list.compact .bracket-team-route em {
    grid-column: 2;
    margin-top: -2px;
    text-align: left;
  }

  .bracket-flow-slots {
    display: grid;
    gap: 8px;
  }

  .bracket-flow-slot {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    background: rgba(6, 10, 16, 0.72);
  }

  .bracket-flow-slot[data-action] {
    cursor: pointer;
  }

  .bracket-flow-slot.finished,
  .bracket-flow-slot.finished-win {
    border-color: rgba(57, 217, 138, 0.25);
  }

  .bracket-flow-slot.finished-loss {
    border-color: rgba(255, 74, 82, 0.25);
  }

  .bracket-flow-slot.open {
    border-color: rgba(247, 200, 75, 0.26);
  }

  .bracket-flow-slot.locked {
    border-color: rgba(148, 163, 184, 0.18);
  }

  .bracket-flow-slot.picked {
    border-color: rgba(138, 108, 255, 0.28);
    background: linear-gradient(180deg, rgba(18, 16, 33, 0.92), rgba(6, 10, 16, 0.92));
  }

  .bracket-flow-slot-head,
  .bracket-flow-slot-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
  }

  .bracket-flow-slot-head strong {
    color: var(--text);
    font-size: 10px;
    text-transform: uppercase;
  }

  .bracket-flow-slot-head span,
  .bracket-flow-slot-foot span,
  .bracket-flow-slot-foot strong {
    color: var(--text-faint);
    font-size: 8px;
    line-height: 1.35;
  }

  .bracket-flow-slot-foot strong {
    color: var(--text-dim);
    text-align: right;
  }

  .bracket-flow-teams {
    display: grid;
    gap: 5px;
  }

  .bracket-flow-team {
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    gap: 7px;
    align-items: center;
    padding: 6px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    background: rgba(9, 15, 24, 0.82);
    color: var(--text);
    font-family: inherit;
    text-align: left;
  }

  button.bracket-flow-team {
    cursor: pointer;
  }

  button.bracket-flow-team:active {
    border-color: rgba(247, 200, 75, 0.44);
  }

  .bracket-flow-team.winner {
    border-color: rgba(57, 217, 138, 0.24);
    background: rgba(57, 217, 138, 0.05);
  }

  .bracket-flow-team .bracket-flow-emblem {
    width: 30px;
    height: 30px;
  }

  .bracket-flow-team strong {
    display: block;
    color: var(--text);
    font-size: 11px;
    line-height: 1.1;
  }

  .bracket-flow-team span {
    display: block;
    margin-top: 2px;
    color: var(--text-faint);
    font-size: 8px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .bracket-flow-team em {
    color: var(--text-dim);
    font-style: normal;
    font-weight: 900;
    text-align: right;
  }

  .bracket-flow-team.winner strong,
  .bracket-flow-team.winner em {
    color: var(--win);
  }

  .bracket-route-list {
    display: grid;
    gap: 7px;
  }

  .bracket-team-route {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    background: rgba(6, 10, 16, 0.7);
  }

  .bracket-team-route.qualified {
    border-color: rgba(57, 217, 138, 0.28);
    background: rgba(57, 217, 138, 0.05);
  }

  .bracket-team-route.eliminated {
    opacity: 0.78;
  }

  .bracket-team-route .bracket-route-emblem {
    width: 34px;
    height: 34px;
  }

  .bracket-team-route strong {
    display: block;
    color: var(--text);
    font-size: 11px;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .bracket-team-route span {
    display: block;
    margin-top: 2px;
    color: var(--text-faint);
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .bracket-team-route em {
    color: var(--text-dim);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .bracket-team-route.qualified em {
    color: var(--win);
  }

  @media (max-width: 430px) {
    .bracket-hero {
      grid-template-columns: 1fr;
    }

    .bracket-prize {
      width: 100%;
      min-width: 0;
      grid-template-columns: 1fr auto;
      place-content: stretch;
      align-items: center;
      text-align: left;
    }
  }

  /* Local main page redesign */
  .matchday-hero {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 92px;
    margin: 8px 14px 14px;
    padding: 12px;
    background:
      radial-gradient(circle at 92% 18%, rgba(247, 200, 75, 0.14), transparent 34%),
      linear-gradient(180deg, rgba(18, 26, 37, 0.98), rgba(7, 11, 17, 0.99));
    border-color: rgba(247, 200, 75, 0.22);
  }

  .matchday-logo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #ffd85a, #d89614);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 10px 24px rgba(247, 200, 75, 0.12);
  }

  .matchday-logo img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
  }

  .matchday-hero-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
  }

  .matchday-hero .tournament-name {
    font-size: 16px;
    line-height: 1.25;
  }

  .matchday-hero .tournament-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 11px;
  }

  .matchday-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .matchday-rules-link {
    width: fit-content;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
    color: var(--text);
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
  }

  .matchday-prize-pill {
    align-self: stretch;
    min-width: 94px;
    display: grid;
    place-content: center;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid rgba(247, 200, 75, 0.36);
    border-radius: 8px;
    background: rgba(247, 200, 75, 0.08);
    color: var(--gold);
    font-family: inherit;
    cursor: pointer;
  }

  .matchday-prize-pill span {
    color: var(--text-dim);
    font-size: 9px;
    line-height: 1.2;
  }

  .matchday-prize-pill strong {
    font-size: 13px;
    line-height: 1;
  }

  .tournament-result-card {
    margin: -8px 16px 20px;
    padding: 12px;
    display: grid;
    gap: 12px;
    border: 1px solid rgba(57, 217, 138, 0.28);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(57, 217, 138, 0.12), rgba(5, 7, 11, 0.92) 62%),
      rgba(10, 17, 25, 0.94);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
  }

  .tournament-result-head,
  .tournament-result-user {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .tournament-result-head {
    align-items: flex-start;
  }

  .tournament-result-head span,
  .tournament-result-champion span,
  .tournament-result-user span {
    color: var(--text-faint);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .tournament-result-head strong {
    color: var(--gold);
    font-size: 11px;
    text-align: right;
  }

  .tournament-result-champion {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .tournament-result-emblem {
    width: 54px;
    height: 54px;
  }

  .tournament-result-champion strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 20px;
    line-height: 1.1;
  }

  .tournament-result-champion em {
    display: block;
    margin-top: 4px;
    color: var(--text-dim);
    font-size: 10px;
    font-style: normal;
  }

  .tournament-result-user {
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
  }

  .tournament-result-user strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 12px;
  }

  .tournament-result-user em {
    max-width: 48%;
    color: var(--text-dim);
    font-size: 10px;
    font-style: normal;
    text-align: right;
    line-height: 1.35;
  }

  .tournament-result-user em.win {
    color: var(--win);
  }

  .tournament-result-user em.loss {
    color: var(--loss);
  }

  .matchday-section-title {
    align-items: center;
    margin-top: 8px;
    padding: 0 16px 10px;
  }

  .matchday-section-count {
    min-width: 26px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    background: rgba(17, 24, 35, 0.86);
    color: var(--text);
    font-size: 11px;
  }

  .match-card-main {
    background:
      linear-gradient(180deg, rgba(18, 27, 39, 0.98), rgba(8, 13, 20, 0.99)),
      radial-gradient(circle at 50% 38%, rgba(37, 208, 223, 0.08), transparent 42%);
  }

  .match-card-main .match-header {
    padding-bottom: 8px;
  }

  .match-card-main .match-subheader {
    padding-top: 9px;
    align-items: center;
  }

  .main-matchup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px 12px 8px;
  }

  .main-team {
    min-width: 0;
    min-height: 126px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 7px;
    padding: 12px 8px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: rgba(6, 10, 16, 0.74);
    color: var(--text);
    font-family: inherit;
    text-align: center;
    cursor: pointer;
  }

  .main-team.selected {
    border-color: rgba(247, 200, 75, 0.56);
    background: rgba(247, 200, 75, 0.08);
  }

  .main-team strong {
    color: var(--text);
    font-size: 17px;
    line-height: 1;
  }

  .main-team span {
    max-width: 100%;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .main-vs {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
  }

  .team-emblem {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(24, 32, 44, 0.96), rgba(7, 11, 17, 0.98));
    overflow: hidden;
  }

  .team-emblem::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid currentColor;
    opacity: 0.22;
    transform: skew(-12deg) rotate(-8deg);
  }

  .team-emblem span {
    position: relative;
    color: currentColor;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  .team-emblem.has-logo {
    padding: 6px;
    background: rgba(8, 13, 20, 0.9);
  }

  .team-emblem.has-logo::before {
    display: none;
  }

  .team-logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.38));
    transform: scale(1.08);
    transform-origin: center;
  }

  .emblem-vitality .team-logo-image,
  .emblem-g2 .team-logo-image,
  .emblem-furia .team-logo-image {
    filter: brightness(0) invert(1) drop-shadow(0 5px 9px rgba(0, 0, 0, 0.38));
  }

  .emblem-vitality .team-logo-image { transform: scale(1.18); }
  .emblem-gamerlegion .team-logo-image { transform: scale(1.2); }
  .emblem-g2 .team-logo-image { transform: scale(1.78); }
  .emblem-furia .team-logo-image { transform: scale(1.72); }
  .emblem-fut .team-logo-image { transform: scale(1.2); }

  .emblem-navi { color: #ffe100; }
  .emblem-faze { color: #ff4f3a; }
  .emblem-vitality { color: #f7f1d5; }
  .emblem-gamerlegion { color: #9ed4ff; }
  .emblem-astralis { color: #ff423f; }
  .emblem-g2 { color: #f5f7fb; }
  .emblem-furia { color: #d7dbe2; }
  .emblem-fut { color: #ff7755; }
  .emblem-generic { color: var(--cyan); }

  .scoreboard-team {
    justify-items: start;
  }

  .scoreboard-team.right {
    justify-items: end;
  }

  .scoreboard-emblem {
    width: 48px;
    height: 48px;
    margin-bottom: 2px;
  }

  .match-result-row {
    display: grid;
    grid-template-columns: minmax(56px, 0.7fr) minmax(80px, 1fr) minmax(56px, 0.7fr) minmax(74px, auto);
    gap: 8px;
    align-items: center;
    min-height: 78px;
    padding: 10px 12px;
    cursor: pointer;
  }

  .result-team {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
  }

  .result-team-right {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .result-team-right .result-emblem {
    order: 2;
  }

  .result-team strong {
    min-width: 0;
    color: var(--text);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .result-team-right strong {
    text-align: right;
  }

  .result-emblem {
    width: 34px;
    height: 34px;
  }

  .result-emblem span {
    font-size: 9px;
  }

  .bracket-focus-result {
    min-height: 42px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(57, 217, 138, 0.22);
    border-radius: 8px;
    background: rgba(57, 217, 138, 0.05);
  }

  .bracket-focus-result span,
  .bracket-focus-result em {
    color: var(--text-faint);
    font-size: 9px;
    font-style: normal;
  }

  .bracket-focus-result strong {
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    text-align: center;
  }

  .bracket-focus-result em {
    text-align: right;
    color: var(--win);
  }

  .result-score {
    display: grid;
    justify-items: center;
    gap: 3px;
    color: var(--text);
  }

  .result-score strong {
    font-size: 18px;
    line-height: 1;
  }

  .result-score span {
    color: var(--text-dim);
    font-size: 10px;
  }

  .result-pick {
    justify-self: end;
    color: var(--loss);
    font-size: 10px;
    font-weight: 800;
    text-align: right;
    line-height: 1.25;
  }

  .result-pick.win {
    color: var(--win);
  }

  @media (max-width: 360px) {
    .matchday-hero {
      grid-template-columns: 46px minmax(0, 1fr);
    }

    .matchday-prize-pill {
      grid-column: 1 / -1;
      min-height: 42px;
      grid-template-columns: 1fr auto;
      place-content: stretch;
      align-items: center;
      text-align: left;
    }

    .matchday-logo {
      width: 44px;
      height: 44px;
    }

    .matchday-logo img {
      width: 32px;
      height: 32px;
    }

    .main-matchup {
      grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
      gap: 7px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .main-vs {
      width: 28px;
      height: 28px;
    }

    .main-team {
      min-height: 118px;
      padding-left: 6px;
      padding-right: 6px;
    }

    .team-emblem {
      width: 44px;
      height: 44px;
    }

    .match-result-row {
      grid-template-columns: minmax(0, 1fr) minmax(74px, auto) minmax(0, 1fr);
    }

    .result-pick {
      grid-column: 1 / -1;
      justify-self: stretch;
      text-align: center;
      padding-top: 6px;
      border-top: 1px solid rgba(148, 163, 184, 0.1);
    }
  }