/* ============================================================
   DBC – prematch panel styles
   ============================================================ */

/* ── sticky prematch header ── */
#prematchPanel .prematchStickyWrap {
  position: sticky; top: 10px; z-index: 80;
  background: rgba(11,17,32,.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  margin: -6px 0 10px 0;
}

/* ── panel sticky header (shared) ── */
.panel .header {
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(11,17,32,.95), rgba(11,17,32,.88));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.panel .header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(800px 120px at 16% -60%, rgba(65,189,217,.12), transparent);
}
.panel .header b { font-family: "Roboto Slab", serif; letter-spacing: .2px; }

/* ── tabs ── */
.tabs        { display: flex; gap: 8px; margin: 6px 0 8px 0; position: sticky; top: 44px; z-index: 3; }
.tabs button { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0c1426; color: var(--text); cursor: pointer; }
.tabs button.active { background: #14203b; border-color: #2a3a66; }
.tabs-pane        { display: none; }
.tabs-pane.active { display: block; }

/* ── teams row ── */
.teamsRow  { display: flex; gap: 16px; align-items: center; margin: 8px 0 12px; }
.teamTag   { display: flex; align-items: center; gap: 8px; }
.teamTag img {
  width: 36px; height: 36px; object-fit: contain;
  background: var(--bg1); border: 1px solid var(--line); border-radius: 8px;
}

/* ── A+ highlight (home xF ≥ 7.00) ── */
.teamTag.team-a-plus {
  padding: 6px 8px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,107,53,.18), rgba(65,189,217,.10));
  border: 1px solid rgba(255,107,53,.35);
  box-shadow: 0 0 0 1px rgba(255,107,53,.14), 0 10px 26px rgba(255,107,53,.12);
}
.teamNameWrap          { position: relative; display: inline-block; padding-right: 28px; }
.teamNameWrap.a-plus strong {
  background: linear-gradient(180deg, rgba(255,107,53,.22), rgba(255,107,53,.06));
  padding: 4px 10px; border-radius: 10px;
  border: 1px solid rgba(255,107,53,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.aPlusBadge {
  position: absolute; top: -10px; right: -10px;
  font-size: 11px; font-weight: 900; letter-spacing: .3px;
  padding: 4px 7px; border-radius: 999px;
  background: linear-gradient(180deg, #FF6B35, #FF996F);
  color: #0B1120;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 24px rgba(255,107,53,.22);
}

/* ── chart box ── */
.chartbox {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  position: relative;   /* anchor for .dlTools */
}

/* ── donut grid ── */
.donutGrid          { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.donutGrid.responsive { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.donutCaption       { text-align: center; margin-top: 4px; font-size: 11px; color: #94a3b8; }

/* ── pitch ── */
.pitchWrap   { width: 100%; overflow: auto; background: var(--bg1); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.pitchLegend { display: flex; gap: 10px; align-items: center; }
.dot         { width: 10px; height: 10px; border-radius: 50%; }

/* ── vector cards ── */
#vectorSummary { white-space: normal; line-height: 1.35; word-break: keep-all; }
.vcard  { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.vtitle { font-weight: 700; line-height: 1.2; }
.vmeta  { margin-top: 6px; font-size: 12px; opacity: .75; }
.vlist  { margin: 8px 0 0 18px; }
.vlist li { margin: 4px 0; }
.vbreak { margin-top: 8px; font-size: 12px; opacity: .8; }
.stack > :first-child { margin-top: 0; }

/* ── auth split ── */
.authSplit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 12px 0; }
@media (max-width: 820px) { .authSplit { grid-template-columns: 1fr; } }
.authCard  { background: var(--card); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }

/* ── auth links ── */
#authPanel a              { color: var(--accent) !important; text-decoration: underline dotted; }
#authPanel a:hover        { text-decoration: underline solid; filter: brightness(1.15); }

/* ── per-chart PNG download button ── */
.dlTools  { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .25rem; z-index: 5; }
.btnMini  {
  font: 600 11px/1.2 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  padding: .25rem .45rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: .5rem;
  background: rgba(0,0,0,.45);
  backdrop-filter: saturate(120%) blur(3px);
  cursor: pointer;
  color: #fff;
}
.btnMini:hover { background: rgba(0,0,0,.65); }