:root {
  --bg: #080c14;
  --panel: #111827;
  --panel-2: #151e2f;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.13);
  --text: #eef4ff;
  --muted: #8ea1ba;
  --green: #31d980;
  --red: #ff6f73;
  --yellow: #e3bd56;
  --blue: #4f7cff;
  --shadow: 0 18px 44px rgba(0,0,0,.28);
  --radius: 16px;
  --leaderboard-custom-bg: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(79,124,255,.12), transparent 28rem),
    linear-gradient(180deg, #090e18 0%, #070b12 100%);
  color: var(--text);
}

button, input, select { font: inherit; }
button { cursor: pointer; }
.btn, button {
  border: 0;
  border-radius: 10px;
  padding: .62rem .82rem;
  background: var(--green);
  color: #06110b;
  font-weight: 800;
  transition: opacity .15s ease, transform .15s ease;
}
button:hover { transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.secondary { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line); }
.ghost { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.danger { color: var(--red) !important; }

input, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(5,10,18,.72);
  color: var(--text);
  padding: .68rem .78rem;
  outline: none;
}
input:focus, select:focus { border-color: rgba(49,217,128,.55); }
label { display: grid; gap: .42rem; color: var(--muted); font-size: .86rem; font-weight: 700; }

.app-shell {
  width: min(1420px, calc(100% - 24px));
  margin: 12px auto 28px;
}

.topbar, .admin-bar, .panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(12,18,30,.98));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #31d980, #18a859);
  color: #06110b; font-weight: 950;
}
.brand strong { display:block; font-size: 1rem; line-height: 1.15; }
.brand small, .connection-card small, .subtle-text, .scope-label, .muted-note { color: var(--muted); }
.status-area { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.connection-card {
  display: flex; align-items: center; gap: 9px;
  min-width: 190px;
  padding: .6rem .72rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.connection-card strong { display:block; font-size:.9rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(255,111,115,.12); flex: 0 0 auto; }
.dot.online { background: var(--green); box-shadow: 0 0 0 5px rgba(49,217,128,.12); }
.dot.demo { background: var(--yellow); box-shadow: 0 0 0 5px rgba(227,189,86,.12); }
.pill { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:.52rem .72rem; color:var(--muted); font-size:.8rem; background:rgba(255,255,255,.035); }

.tabs {
  display:flex; gap:8px; overflow-x:auto; padding: 10px 0;
}
.tabs button {
  white-space: nowrap;
  border-radius: 999px;
  padding: .58rem .82rem;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  border: 1px solid var(--line);
}
.tabs button.active { color:#06110b; background:var(--green); border-color:transparent; }

.admin-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.admin-badge { display:inline-flex; border-radius:999px; padding:.34rem .58rem; background:rgba(49,217,128,.12); color:var(--green); margin-right:8px; }
.admin-actions { display:flex; gap:8px; flex-wrap:wrap; }
.role-line { color: var(--yellow); }
.hidden { display:none !important; }

.layout-grid {
  display:grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 12px;
  align-items:start;
}
.main-panel { min-width:0; overflow:hidden; }
.side-panel { display:grid; gap:12px; min-width:0; position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto; }
.side-panel.leaderboard-only { align-self:start; }
.compact-panel { padding: 12px; }
.panel-head, .leaderboard-head, .section-head, .daily-board-head, .detail-head, .meter-head, .participants-head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
}
.panel-head h2, .leaderboard-head h2, .daily-board-head h2, .detail-head h2, .dialog-card h2 { margin:0; font-size:1.05rem; }
.eyebrow { margin:0 0 4px; color:var(--green); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:900; }

.match-list { display:grid; gap:8px; }
.match-item {
  width:100%; text-align:left;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.028);
  color:var(--text);
}
.match-item.active { border-color: rgba(49,217,128,.55); background: rgba(49,217,128,.07); }
.match-item-top, .match-item-bottom, .mini-team-row { display:flex; align-items:center; }
.match-item-top { justify-content:space-between; gap:8px; margin-bottom:8px; }
.match-item-bottom { justify-content:space-between; gap:8px; margin-top:8px; color:var(--muted); font-size:.76rem; }
.competition-tag { color:var(--green); text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; font-weight:900; }
.status-badge { display:inline-flex; border-radius:999px; padding:.26rem .48rem; background:rgba(255,255,255,.06); color:var(--text); font-size:.72rem; font-weight:800; }
.status-badge.live { background:rgba(49,217,128,.13); color:var(--green); }
.status-badge.final { background:rgba(255,255,255,.09); }
.status-badge.review { background:rgba(255,111,115,.14); color:var(--red); }
.mini-team-row { justify-content:space-between; gap:8px; }
.mini-team { display:flex; align-items:center; gap:6px; min-width:0; flex:1; }
.mini-team.right { justify-content:flex-end; text-align:right; }
.mini-team span { overflow-wrap:anywhere; font-size:.84rem; }
.mini-logo { width:24px; height:24px; object-fit:contain; border-radius:6px; background:rgba(255,255,255,.04); padding:2px; }
.mini-score { min-width:48px; text-align:center; font-size:.9rem; }

.match-detail { min-height: 720px; }
.empty-detail { padding: 14px; }
.empty-state { border:1px dashed var(--line); border-radius:12px; padding:20px; color:var(--muted); text-align:center; }
.empty-state.compact { padding:12px; }
.daily-board-head, .detail-head, .odds-panel, .meter-panel, .participants-panel { padding:14px; }
.daily-board-head, .detail-head, .odds-panel, .meter-panel { border-bottom:1px solid rgba(255,255,255,.06); }
.subtle-text { margin: 6px 0 0; font-size:.86rem; line-height:1.45; }
.board-stats { display:grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap:8px; margin-top:12px; }
.board-stats div, .mini-stats > div, .bookie-mini { border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.028); padding:10px; }
.board-stats strong, .mini-stats strong, .bookie-mini strong { display:block; font-size:1rem; }
.board-stats span, .mini-stats span, .bookie-mini span { color:var(--muted); font-size:.76rem; }

.daily-groups { display:grid; gap:12px; padding:14px; }
.daily-group { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.018); }
.daily-group-head { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
.daily-group-head h3 { margin:0 0 3px; font-size:.98rem; }
.daily-group-head small { color:var(--muted); }
.daily-match-list { display:grid; }
.daily-match-row { display:grid; grid-template-columns: 110px minmax(0,1fr) 180px 62px; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.055); }
.daily-match-row:last-child { border-bottom:0; }
.daily-match-row.is-open { background:rgba(49,217,128,.035); }
.daily-match-row.is-live { background:rgba(79,124,255,.04); }
.daily-time strong { display:block; font-size:.9rem; }
.daily-time span, .daily-meta { color:var(--muted); font-size:.76rem; }
.daily-teams { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.daily-team { display:flex; align-items:center; gap:6px; min-width:0; flex:1; }
.daily-team.right { justify-content:flex-end; text-align:right; }
.daily-team img { width:22px; height:22px; object-fit:contain; border-radius:6px; background:rgba(255,255,255,.04); padding:2px; }
.daily-team span { font-size:.86rem; overflow-wrap:anywhere; }
.daily-score { min-width:48px; text-align:center; }
.daily-meta { display:grid; gap:3px; justify-items:end; }
.table-btn { padding:.46rem .62rem; border-radius:8px; background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--line); font-size:.8rem; }

.head-side { display:grid; gap:8px; min-width: 280px; }
.result-box { border:1px solid var(--line); border-radius:12px; padding:10px; background:rgba(255,255,255,.028); }
.result-box span { display:block; color:var(--muted); font-size:.78rem; margin-bottom:6px; }
.active-team-note { color:var(--muted); font-size:.84rem; text-align:right; }
.odds-grid, .meter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.odds-field, .meter-card, .add-bet-box { border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:12px; padding:10px; }
.odds-field span { display:block; color:var(--muted); margin-bottom:6px; }
.odds-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }
.meter-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.meter-title { display:flex; align-items:center; gap:6px; min-width:0; }
.meter-title strong { overflow-wrap:anywhere; font-size:.9rem; }
.draw-chip { width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; color:var(--muted); }
.meter-percent { font-size:.92rem; }
.meter-bar, .leader-progress { height:9px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:8px; }
.meter-bar span, .leader-progress span { display:block; height:100%; border-radius:inherit; background:var(--green); }
.meter-sub { color:var(--muted); margin-top:7px; font-size:.78rem; }

.table-wrap { border:1px solid var(--line); border-radius:12px; overflow:auto; background:rgba(255,255,255,.018); }
.participants-table { width:100%; border-collapse:collapse; min-width:680px; }
.participants-table th { text-align:left; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; padding:10px; border-bottom:1px solid var(--line); }
.participants-table td { padding:10px; border-bottom:1px solid rgba(255,255,255,.05); }
.table-empty { text-align:center; color:var(--muted); padding:16px !important; }
.add-bet-box { margin-top:12px; }
.add-bet-grid { display:grid; grid-template-columns:minmax(160px,1.3fr) minmax(140px,1fr) 120px 70px; gap:8px; margin-top:8px; }
.positive, .good { color:var(--green); }
.negative, .bad { color:var(--red); }
.muted-cell { color:var(--muted); }

.leaderboard-toggle { display:flex; gap:6px; margin:10px 0; }
.leaderboard-toggle button { flex:1; padding:.5rem .62rem; border-radius:9px; background:rgba(255,255,255,.045); color:var(--muted); border:1px solid var(--line); }
.leaderboard-toggle button.active { color:#06110b; background:var(--green); }
.mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.leaderboard-list { display:grid; gap:7px; }
.leader-group { display:grid; gap:7px; }
.leader-group h3 { margin:8px 2px 2px; color:var(--green); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.lb-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.lb-rank { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--muted); font-weight:900; font-size:.78rem; }
.lb-row.top .lb-rank { background:var(--yellow); color:#14100a; }
.lb-main { min-width:0; display:grid; gap:4px; }
.lb-name { display:flex; align-items:center; gap:6px; min-width:0; }
.lb-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
.lb-chip { flex:0 0 auto; border-radius:999px; padding:.18rem .42rem; font-size:.66rem; font-weight:800; background:rgba(49,217,128,.12); color:var(--green); }
.lb-chip.bad { background:rgba(255,111,115,.12); color:var(--red); }
.lb-meta { display:flex; flex-wrap:wrap; gap:6px 10px; color:var(--muted); font-size:.72rem; }
.lb-side { display:grid; gap:5px; justify-items:end; min-width:90px; }
.lb-net { font-weight:900; font-size:.88rem; white-space:nowrap; }
.lb-bar { width:86px; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.lb-bar span { display:block; height:100%; background:var(--green); border-radius:inherit; }
.lb-row.bad .lb-bar span { background:var(--red); }

.dialog { border:0; padding:0; background:transparent; }
.dialog::backdrop { background:rgba(0,0,0,.66); }
.dialog-card { width:min(520px, calc(100vw - 24px)); display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#121827,#0c1220); color:var(--text); box-shadow:var(--shadow); }
.dialog-head { display:flex; justify-content:space-between; gap:12px; }
.icon-btn { width:34px; height:34px; padding:0; background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--line); }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
.dialog-actions.split { justify-content:space-between; }
.toast { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:99; background:#fff; color:#07100d; border-radius:999px; padding:10px 14px; font-weight:850; box-shadow:var(--shadow); }

@media (max-width: 1100px) {
  .layout-grid { grid-template-columns:1fr; }
  .side-panel { position:static; max-height:none; overflow:visible; grid-template-columns:1fr 1fr; }
}
@media (max-width: 820px) {
  .topbar { align-items:flex-start; flex-direction:column; }
  .status-area { justify-content:flex-start; width:100%; }
  .connection-card { min-width:0; flex:1; }
  .side-panel { grid-template-columns:1fr; }
  .daily-board-head, .detail-head { flex-direction:column; }
  .board-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .daily-match-row { grid-template-columns:1fr; justify-items:start; }
  .daily-meta { justify-items:start; }
  .odds-grid, .meter-grid { grid-template-columns:1fr; }
  .add-bet-grid { grid-template-columns:1fr; }
  .head-side { min-width:0; width:100%; }
  .active-team-note { text-align:left; }
}
@media (max-width: 560px) {
  .app-shell { width:min(100% - 12px, 1420px); margin-top:6px; }
  .topbar, .admin-bar, .compact-panel, .daily-board-head, .detail-head, .odds-panel, .meter-panel, .participants-panel, .daily-groups { padding:10px; }
  .board-stats { grid-template-columns:1fr; }
  .lb-row { grid-template-columns:30px minmax(0,1fr); }
  .lb-side { grid-column:2 / -1; justify-items:start; width:100%; }
  .lb-bar { width:100%; }
}

/* v16: grouped match dashboard */
.match-bucket-board .bucket-board-head {
  border-bottom: 1px solid var(--line);
}

.match-buckets {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.match-bucket {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.018);
}

.bucket-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.026);
}

.bucket-head h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  letter-spacing: -.01em;
}

.bucket-head small,
.bucket-counter span {
  color: var(--muted);
  font-size: .78rem;
}

.bucket-counter {
  text-align: right;
  min-width: 104px;
}

.bucket-counter strong {
  display: block;
  font-size: 1.05rem;
  color: var(--text);
}

.bucket-list {
  display: grid;
}

.bucket-match-row {
  grid-template-columns: 92px minmax(0,1fr) 190px 86px 54px;
  cursor: pointer;
}

.bucket-match-row:hover {
  background: rgba(255,255,255,.04);
}

.bucket-match-row.is-finished {
  opacity: .82;
}

.bucket-next .bucket-head h3::before { content: "▶ "; color: var(--green); }
.bucket-today .bucket-head h3::before { content: "● "; color: #f5c84b; }
.bucket-finished .bucket-head h3::before { content: "✓ "; color: var(--muted); }

.bucket-match-row .status-badge {
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .bucket-match-row {
    grid-template-columns: 82px minmax(0,1fr) 150px 78px 52px;
  }
}

@media (max-width: 820px) {
  .bucket-head {
    flex-direction: column;
  }
  .bucket-counter { text-align: left; }
  .bucket-match-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .bucket-match-row .status-badge { justify-self: start; }
}

/* v18: match tabs + matchday grouping */
.match-tabbar-wrap {
  padding: 12px 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.match-tabbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.match-tab {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: rgba(255,255,255,.035);
  color: var(--text);
}

.match-tab strong {
  font-size: .88rem;
  line-height: 1.15;
}

.match-tab span {
  color: var(--muted);
  font-size: .74rem;
}

.match-tab.active {
  background: linear-gradient(180deg, rgba(49,217,128,.22), rgba(49,217,128,.10));
  border-color: rgba(49,217,128,.55);
  color: #eafff3;
}

.match-tab.active span {
  color: rgba(234,255,243,.78);
}

.single-tab-view.match-buckets {
  padding-top: 12px;
}

.matchday-list {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.matchday-group {
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 13px;
  overflow: hidden;
  background: rgba(0,0,0,.10);
}

.matchday-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.matchday-head h4 {
  margin: 0 0 3px;
  font-size: .9rem;
  letter-spacing: -.01em;
}

.matchday-head small {
  color: var(--muted);
  font-size: .74rem;
}

.matchday-rows {
  display: grid;
}

.matchday-rows .bucket-match-row:last-child {
  border-bottom: 0;
}

@media (max-width: 680px) {
  .match-tabbar {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
  }

  .match-tab {
    min-width: 180px;
    scroll-snap-align: start;
  }
}

/* v21: competition color highlights for matchday groups */
.matchday-group,
.bucket-match-row {
  --matchday-accent: rgba(255,255,255,.07);
  --matchday-accent-soft: rgba(255,255,255,.04);
  --matchday-accent-border: rgba(255,255,255,.28);
  --matchday-accent-text: #eef4ff;
}

.matchday-group.comp-hyundai,
.bucket-match-row.comp-hyundai {
  --matchday-accent: rgba(82, 196, 255, .22);
  --matchday-accent-soft: rgba(82, 196, 255, .055);
  --matchday-accent-border: #52c4ff;
  --matchday-accent-text: #9fddff;
}

.matchday-group.comp-nfl,
.bucket-match-row.comp-nfl {
  --matchday-accent: rgba(255, 79, 93, .22);
  --matchday-accent-soft: rgba(255, 79, 93, .055);
  --matchday-accent-border: #ff4f5d;
  --matchday-accent-text: #ff9ca5;
}

.matchday-group.comp-nba,
.bucket-match-row.comp-nba {
  --matchday-accent: rgba(49, 217, 128, .22);
  --matchday-accent-soft: rgba(49, 217, 128, .055);
  --matchday-accent-border: #31d980;
  --matchday-accent-text: #8dffc3;
}

.matchday-group.comp-isl,
.bucket-match-row.comp-isl {
  --matchday-accent: rgba(61, 125, 255, .24);
  --matchday-accent-soft: rgba(61, 125, 255, .06);
  --matchday-accent-border: #3d7dff;
  --matchday-accent-text: #a9c5ff;
}

.matchday-group.comp-pl,
.bucket-match-row.comp-pl {
  --matchday-accent: rgba(168, 85, 247, .24);
  --matchday-accent-soft: rgba(168, 85, 247, .06);
  --matchday-accent-border: #a855f7;
  --matchday-accent-text: #d8b4fe;
}

.matchday-group {
  border-color: var(--matchday-accent-border);
  box-shadow: inset 0 0 0 1px var(--matchday-accent-soft);
}

.matchday-head {
  position: relative;
  background: linear-gradient(90deg, var(--matchday-accent), rgba(255,255,255,.035) 62%);
  border-left: 5px solid var(--matchday-accent-border);
}

.matchday-competition {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 6px;
  padding: .24rem .48rem;
  border-radius: 999px;
  border: 1px solid var(--matchday-accent-border);
  background: rgba(0,0,0,.16);
  color: var(--matchday-accent-text);
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.bucket-match-row {
  position: relative;
  border-left: 3px solid transparent;
}

.bucket-match-row.comp-hyundai,
.bucket-match-row.comp-nfl,
.bucket-match-row.comp-nba,
.bucket-match-row.comp-isl,
.bucket-match-row.comp-pl {
  border-left-color: var(--matchday-accent-border);
  background-image: linear-gradient(90deg, var(--matchday-accent-soft), transparent 42%);
}

.bucket-match-row.comp-hyundai .daily-meta span:first-child,
.bucket-match-row.comp-nfl .daily-meta span:first-child,
.bucket-match-row.comp-nba .daily-meta span:first-child,
.bucket-match-row.comp-isl .daily-meta span:first-child,
.bucket-match-row.comp-pl .daily-meta span:first-child {
  color: var(--matchday-accent-text);
  font-weight: 800;
}

/* v22: compact density, sticky matchday header, admin drawer */
.admin-drawer {
  position: fixed;
  right: 14px;
  top: 78px;
  z-index: 70;
  width: min(360px, calc(100vw - 28px));
  display: grid;
  gap: 12px;
  padding: 12px;
  margin: 0;
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.admin-drawer.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.admin-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.admin-drawer .admin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-drawer #adminResult {
  display: block;
  max-height: 140px;
  overflow: auto;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0,0,0,.16);
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-drawer .role-line { display: block; margin-top: 5px; }

.bucket-board-head {
  align-items: stretch;
}
.board-title-block { min-width: 220px; }
.board-tools {
  display: grid;
  gap: 8px;
  justify-items: end;
  min-width: min(520px, 100%);
}
.density-toggle {
  display: inline-flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}
.density-toggle button {
  padding: .36rem .62rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .76rem;
}
.density-toggle button.active {
  background: var(--green);
  color: #06110b;
}
.board-tools .board-stats {
  margin-top: 0;
  width: 100%;
}
.board-tools .board-stats div {
  padding: 8px 9px;
}
.board-tools .board-stats strong { font-size: .92rem; }
.board-tools .board-stats span { font-size: .7rem; }

.match-detail.density-compact .match-buckets {
  gap: 10px;
  padding: 10px;
}
.match-detail.density-compact .match-bucket {
  border-radius: 14px;
}
.match-detail.density-compact .bucket-head {
  padding: 9px 11px;
}
.match-detail.density-compact .bucket-head h3 {
  font-size: .9rem;
  margin-bottom: 2px;
}
.match-detail.density-compact .bucket-head small,
.match-detail.density-compact .bucket-counter span {
  font-size: .7rem;
}
.match-detail.density-compact .matchday-list {
  gap: 8px;
  padding: 8px;
}
.match-detail.density-compact .matchday-group {
  overflow: visible;
  border-radius: 12px;
}
.matchday-head {
  position: sticky;
  top: 0;
  z-index: 6;
  backdrop-filter: blur(12px);
}
.match-detail.density-compact .matchday-head {
  padding: 6px 9px;
  border-left-width: 4px;
}
.match-detail.density-compact .matchday-competition {
  margin-bottom: 3px;
  padding: .16rem .38rem;
  font-size: .58rem;
}
.match-detail.density-compact .matchday-head h4 {
  font-size: .8rem;
  margin-bottom: 1px;
}
.match-detail.density-compact .matchday-head small {
  font-size: .66rem;
}
.match-detail.density-compact .bucket-match-row {
  grid-template-columns: 68px minmax(0,1fr) 150px 70px 44px;
  gap: 7px;
  padding: 6px 8px;
  min-height: 42px;
}
.match-detail.density-compact .daily-time strong {
  font-size: .78rem;
  line-height: 1.1;
}
.match-detail.density-compact .daily-time span {
  display: none;
}
.match-detail.density-compact .daily-team {
  gap: 5px;
}
.match-detail.density-compact .daily-team img {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}
.match-detail.density-compact .daily-team span {
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-detail.density-compact .daily-score {
  min-width: 38px;
  font-size: .82rem;
}
.match-detail.density-compact .daily-meta {
  gap: 0;
  font-size: .69rem;
}
.match-detail.density-compact .daily-meta span:first-child {
  display: none;
}
.match-detail.density-compact .status-badge {
  padding: .18rem .38rem;
  font-size: .65rem;
}
.match-detail.density-compact .table-btn {
  padding: .32rem .46rem;
  font-size: .72rem;
  border-radius: 7px;
}

.match-detail.density-detail .bucket-match-row {
  grid-template-columns: 104px minmax(0,1fr) 220px 90px 58px;
  padding: 12px;
}
.match-detail.density-detail .matchday-head {
  padding: 10px 12px;
}
.match-detail.density-detail .daily-team img {
  width: 26px;
  height: 26px;
}
.match-detail.density-detail .daily-team span {
  font-size: .9rem;
}

@media (max-width: 1180px) {
  .match-detail.density-compact .bucket-match-row {
    grid-template-columns: 62px minmax(0,1fr) 128px 60px 42px;
  }
  .match-detail.density-detail .bucket-match-row {
    grid-template-columns: 88px minmax(0,1fr) 165px 76px 52px;
  }
}
@media (max-width: 820px) {
  .bucket-board-head,
  .board-tools {
    justify-items: stretch;
  }
  .density-toggle { width: max-content; }
  .match-detail.density-compact .bucket-match-row,
  .match-detail.density-detail .bucket-match-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 9px;
  }
  .match-detail.density-compact .daily-time span,
  .match-detail.density-compact .daily-meta span:first-child {
    display: inline;
  }
  .match-detail.density-compact .daily-meta { justify-items: start; }
  .matchday-head { top: 0; }
  .admin-drawer { top: 12px; right: 8px; width: calc(100vw - 16px); }
}
@media (max-width: 560px) {
  .admin-drawer .admin-actions { grid-template-columns: 1fr; }
  .board-tools .board-stats { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .board-tools .board-stats div { min-width: 56px; }
}