:root {
  --bg: #0f0f0f;
  --panel: #171717;
  --panel-2: #1b1b1b;
  --border: #262626;
  --text: #e5e5e5;
  --muted: #a3a3a3;
  /* Shared nav/button sizing */
  --btn-h: 44px;
  --btn-radius: 12px;

  /* ── Nav / page accent colors ──────────────────────────────
     Single source of truth for all button, banner, border,
     confirm dialog, and toast colours across every page.
     ---------------------------------------------------------- */

  --nav-settings-bg: #ffeb3b; /* yellow  — Settings  */
  --nav-settings-fg: #111;

  --nav-scoreboard-bg: #ffffff; /* white   — Scoreboard */
  --nav-scoreboard-fg: #111;

  --nav-teams-bg: #1976d2; /* blue    — Teams     */
  --nav-teams-fg: #fff;

  --nav-animations-bg: #c0392b; /* red     — Animations */
  --nav-animations-fg: #fff;

  --action-exportimport-bg: #90ee90; /* green — Export/Import */
  --action-exportimport-fg: #000;

  /* ── Scoreboard element colors ─────────────────────────────
     Single source of truth for inning, out, and action buttons.
     ---------------------------------------------------------- */
  --inning-color: #2563eb; /* blue  — Inning border + label  */
  --out-color: #dc2626; /* red   — Out border + label      */

  --btn-green: #2ecc71; /* green — action / dirty highlight */
  --btn-green-border: #29b765;
  --btn-green-text: #0b2616;

  --focus: #66afe9; /* keyboard focus ring             */

  /* Page accent aliases — used by control cards, confirm dialogs, toasts */
  --action-teams-bg: var(--nav-teams-bg);
  --action-teams-fg: var(--nav-teams-fg);

  --action-animations-bg: var(--nav-animations-bg);
  --action-animations-fg: var(--nav-animations-fg);
}

/* Avoid mobile text auto-resize oddities */
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji";
}

/* Grid wrapper each page already has */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content: start;
}

/* Card — also used as control card */
.card {
  border: 1px solid #2225;
  border-radius: 16px;
  background: #121212;
  color: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 120px;
}

/* Small text utilities */
.file-name,
.bytes-label {
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 0.25rem 0;
}

/* Control Card (stands out, reversed) */
.control-card {
  background: #fff;
  color: #000;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 12px;
}

/* =========================================================
   ACTION CARD CONFIRM DIALOG (Teams / Animations / Scoreboard)
   ========================================================= */

#confirmDialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

#confirmDialog {
  border: none;
  background: transparent;
  padding: 0;
}

/* Card container */
.confirm-surface {
  margin: 0;
  padding: 0;
  min-width: 320px;
  max-width: min(420px, 92vw);
  border-radius: var(--btn-radius);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65);
  background: #ffffff;
  color: #111;
}

/* Green (themeable) header */
.confirm-surface h3 {
  margin: 0;
  padding: 0.9rem 1.25rem;
  background: var(--ss-accent-bg, var(--action-exportimport-bg));
  color: var(--ss-accent-fg, var(--action-exportimport-fg));
  font-weight: 700;
}

/* Message body */
.confirm-surface p {
  padding: 1rem 1.25rem 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Action row */
.confirm-actions {
  padding: 0.75rem 1.25rem 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

/* Buttons */
.confirm-actions button {
  min-width: 4.5rem;
  height: var(--btn-h);
  border-radius: var(--btn-radius);
  font-weight: 600;
  cursor: pointer;
}

/* Confirm (themeable) */
#confirmOkButton,
#confirmDialog .confirm-actions button[value="ok"] {
  background: var(--ss-accent-bg, var(--action-exportimport-bg));
  color: var(--ss-accent-fg, var(--action-exportimport-fg));
  border: none;
}

/* Cancel (neutral) */
.confirm-actions button[value="cancel"] {
  background: #f2f2f2;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.15);
}