/* ═══════════════════════════════════════════════════════════════
   Design Tokens
   Light is the base palette on :root. Dark is applied in two
   places so both the OS preference and the explicit toggle win:
     1. @media (prefers-color-scheme: dark) — guarded so an
        explicit light choice is never overridden by the OS.
     2. [data-theme="dark"] — the in-app toggle.
   Never give a colour its ONLY definition inside a media block.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* — Type — */
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* — Surfaces — */
  --bg: #f3f3f5;
  --surface: #ffffff;
  --surface2: #f5f5f7;
  --surface3: #ebebef;
  --border: rgba(17, 17, 20, 0.07);
  --border-strong: rgba(17, 17, 20, 0.12);
  --border-hover: rgba(17, 17, 20, 0.22);

  /* — Text — */
  --text: #111114;
  --text-muted: #686874;
  --text-subtle: #a1a1ab;

  /* — Ink: the near-black used for primary buttons, active tabs and
       value chips. It inverts to near-white in dark mode, so a primary
       pill is always the highest-contrast thing on screen. — */
  --ink: #111114;
  --ink-hover: #2b2b31;
  --on-ink: #ffffff;
  --on-ink-muted: rgba(255, 255, 255, 0.58);
  --ink-divider: rgba(255, 255, 255, 0.12);

  /* — Accent (brand violet) — used for brand surfaces and emphasis,
       not for every button. — */
  --accent: #5b2ee6;
  --accent-hover: #4a20cf;
  --accent-soft: rgba(91, 46, 230, 0.08);
  --accent-grad-from: #5b2ee6;
  --accent-grad-to: #5b2ee6;
  --accent-shadow: rgba(91, 46, 230, 0.22);
  --on-accent: #ffffff;

  /* — Highlight (gold) — captains, ratings, podium — */
  --highlight: #ffc81f;
  --on-highlight: #111114;

  /* — Teams — */
  --black-team: #1a1a1a;
  --red-team: #c0392b;

  /* — Status — */
  --success: #12a150;
  --success-soft: rgba(18, 161, 80, 0.09);
  --success-border: rgba(18, 161, 80, 0.26);
  --warning: #b86e00;
  --warning-soft: rgba(184, 110, 0, 0.09);
  --warning-border: rgba(184, 110, 0, 0.26);
  --danger: #e5243f;
  --danger-soft: rgba(229, 36, 63, 0.08);
  --danger-border: rgba(229, 36, 63, 0.26);
  --info: #2f6bed;
  --info-soft: rgba(47, 107, 237, 0.08);
  --info-border: rgba(47, 107, 237, 0.26);

  /* — Translucent chrome (header / nav / banners) — */
  --chrome: rgba(255, 255, 255, 0.86);
  --chrome-solid: rgba(255, 255, 255, 0.98);
  --overlay: rgba(17, 17, 20, 0.48);
  --hover-wash: rgba(17, 17, 20, 0.03);
  --hover-wash-strong: rgba(17, 17, 20, 0.06);
  --pitch-bg: #5b2ee6;
  --login-glow: #ffffff;

  /* — Geometry — */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(17,17,20,0.03);
  --shadow-md: 0 2px 4px rgba(17,17,20,0.03), 0 8px 24px rgba(17,17,20,0.06);
  --shadow-lg: 0 24px 64px rgba(17,17,20,0.18);
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);

  /* — Type scale (major-third-ish, tightened for mobile density) — */
  --fs-2xs: 0.6875rem;  /* 11px — micro labels, table heads */
  --fs-xs:  0.75rem;    /* 12px — meta, hints, badges */
  --fs-sm:  0.8125rem;  /* 13px — dense body, table cells */
  --fs-base:0.875rem;   /* 14px — body */
  --fs-md:  0.9375rem;  /* 15px — emphasised body */
  --fs-lg:  1.0625rem;  /* 17px — card titles */
  --fs-xl:  1.375rem;   /* 22px — page titles */
  --fs-2xl: 1.75rem;    /* 28px — stat numerals */

  /* — Spacing (4px base) — */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* — Layering (single source of truth) — */
  --z-nav: 5001;
  --z-modal: 9000;
  --z-banner: 9400;
  --z-confirm: 9600;
  --z-toast: 9800;
}

/* Dark palette — one canonical list, emitted twice so BOTH the OS
   preference and the explicit toggle resolve it. Keep these two blocks
   byte-identical apart from indentation; edit both or neither. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090b;
    --surface: #141417;
    --surface2: #1c1c21;
    --surface3: #27272d;
    --border: rgba(255,255,255,0.07);
    --border-strong: rgba(255,255,255,0.12);
    --border-hover: rgba(255,255,255,0.22);
    --text: #f4f4f6;
    --text-muted: #9b9ba6;
    --text-subtle: #66666f;
    --ink: #f4f4f6;
    --ink-hover: #ffffff;
    --on-ink: #111114;
    --on-ink-muted: rgba(17, 17, 20, 0.55);
    --ink-divider: rgba(17, 17, 20, 0.12);
    --accent: #8b6dff;
    --accent-hover: #a28aff;
    --accent-soft: rgba(139, 109, 255, 0.14);
    --accent-grad-from: #5b2ee6;
    --accent-grad-to: #5b2ee6;
    --accent-shadow: rgba(139, 109, 255, 0.28);
    --success: #34c472;
    --success-soft: rgba(52, 196, 114, 0.13);
    --success-border: rgba(52, 196, 114, 0.30);
    --warning: #f0a92e;
    --warning-soft: rgba(240, 169, 46, 0.13);
    --warning-border: rgba(240, 169, 46, 0.30);
    --danger: #ff4d64;
    --danger-soft: rgba(255, 77, 100, 0.13);
    --danger-border: rgba(255, 77, 100, 0.30);
    --info: #6b9bff;
    --info-soft: rgba(107, 155, 255, 0.13);
    --info-border: rgba(107, 155, 255, 0.30);
    --chrome: rgba(9, 9, 11, 0.84);
    --chrome-solid: rgba(14, 14, 17, 0.98);
    --overlay: rgba(0, 0, 0, 0.72);
    --hover-wash: rgba(255,255,255,0.03);
    --hover-wash-strong: rgba(255,255,255,0.07);
    --pitch-bg: #4a25c9;
    --login-glow: #141417;
    --shadow: 0 1px 2px rgba(0,0,0,0.30);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.40);
    --shadow-lg: 0 24px 64px rgba(0,0,0,0.60);
    --picker-filter: invert(1) brightness(1.6);
  }
}

:root[data-theme="dark"] {
  --bg: #09090b;
  --surface: #141417;
  --surface2: #1c1c21;
  --surface3: #27272d;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.12);
  --border-hover: rgba(255,255,255,0.22);
  --text: #f4f4f6;
  --text-muted: #9b9ba6;
  --text-subtle: #66666f;
  --ink: #f4f4f6;
  --ink-hover: #ffffff;
  --on-ink: #111114;
  --on-ink-muted: rgba(17, 17, 20, 0.55);
  --ink-divider: rgba(17, 17, 20, 0.12);
  --accent: #8b6dff;
  --accent-hover: #a28aff;
  --accent-soft: rgba(139, 109, 255, 0.14);
  --accent-grad-from: #5b2ee6;
  --accent-grad-to: #5b2ee6;
  --accent-shadow: rgba(139, 109, 255, 0.28);
  --success: #34c472;
  --success-soft: rgba(52, 196, 114, 0.13);
  --success-border: rgba(52, 196, 114, 0.30);
  --warning: #f0a92e;
  --warning-soft: rgba(240, 169, 46, 0.13);
  --warning-border: rgba(240, 169, 46, 0.30);
  --danger: #ff4d64;
  --danger-soft: rgba(255, 77, 100, 0.13);
  --danger-border: rgba(255, 77, 100, 0.30);
  --info: #6b9bff;
  --info-soft: rgba(107, 155, 255, 0.13);
  --info-border: rgba(107, 155, 255, 0.30);
  --chrome: rgba(9, 9, 11, 0.84);
  --chrome-solid: rgba(14, 14, 17, 0.98);
  --overlay: rgba(0, 0, 0, 0.72);
  --hover-wash: rgba(255,255,255,0.03);
  --hover-wash-strong: rgba(255,255,255,0.07);
  --pitch-bg: #4a25c9;
  --login-glow: #141417;
  --shadow: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.60);
  --picker-filter: invert(1) brightness(1.6);
}

/* Paint the ground before Vue mounts so there is no flash of the
   wrong theme. app.js sets data-theme from localStorage inline. */
html { background: var(--bg); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }

/* ── Icons ──────────────────────────────────────────────────────
   <svg class="ico"><use href="#i-name"/></svg>
   Sized in em so an icon always tracks its parent's font-size, and
   stroked with currentColor so it tracks the parent's colour too. */
.ico {
  width: 1em; height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.135em;
  fill: none;
  stroke: currentColor;
  pointer-events: none;
}
.ico-sm { width: .875em; height: .875em; }
.ico-lg { width: 1.25em; height: 1.25em; }
.ico-xl { width: 1.5em; height: 1.5em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font);
  font-feature-settings: 'ss01', 'tnum' 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  width: 100%;
}

/* --- App Shell --- */
#app { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; max-width: 100vw; }

.app-header {
  background: var(--chrome);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-4);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
  position: sticky; top: 0; z-index: 100;
}

.header-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); overflow: hidden; }
/* The brand must keep a readable floor: with a logged-in player the
   header carries theme toggle + profile + logout + admin, which had
   squeezed the team name down to a single character. */
.team-brand {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0; flex: 1 1 auto; overflow: hidden;
}
.team-brand .team-name { min-width: 4ch; }
.header-actions, .header-top > .flex { flex-shrink: 0; min-width: 0; }

.team-logo {
  width: 32px; height: 32px; border-radius: 9px; object-fit: cover;
  border: 1px solid var(--border-strong);
}

.team-logo-placeholder {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}

/* Solid text, not gradient-clipped — the gradient wordmark was the single
   strongest "template" tell in the old header. */
.team-name {
  font-size: var(--fs-md); font-weight: 800; color: var(--text);
  letter-spacing: -0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

.header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* The signed-in name must never wrap the header onto two lines. On a
   logged-in public page there are already 4 controls competing with the
   brand, so the name hides below 560px — the profile button next to it
   leads to the same identity. */
.session-name {
  font-size: var(--fs-xs); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 96px; flex-shrink: 1; min-width: 0;
}
@media (max-width: 560px) { .session-name { display: none; } }

/* public nav */
.public-nav {
  display: flex; gap: 6px; margin-top: 12px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.pub-nav-item {
  padding: 8px 16px; border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--border-strong); color: var(--text-muted); font-size: var(--fs-sm);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: all var(--transition); letter-spacing: 0.01em;
}
.pub-nav-item:hover { border-color: var(--border-hover); color: var(--text); }
.pub-nav-item.active {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}

/* Announcement Banner ---- */
.announcement-banner {
  background: var(--accent-grad-from);
  color: #fff; padding: 12px 44px; font-weight: 600; text-align: center;
  font-size: var(--fs-sm); position: relative; animation: slideDown 0.4s ease;
  letter-spacing: 0.01em;
}
.announcement-banner .close-btn {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,0.8);
  font-size: 1.2rem; cursor: pointer; transition: opacity 0.2s;
}
.announcement-banner .close-btn:hover { opacity: 1; }
@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Bottom navigation ───────────────────────────────────────────
   Icon-forward with a small label. The active item gets an accent icon
   and a soft pill behind it rather than a top rule. */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--chrome);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--border);
  display: flex; z-index: var(--z-nav);
  padding: var(--sp-1) var(--sp-1) 0;
  padding-bottom: max(var(--sp-1), env(safe-area-inset-bottom));
}

.nav-item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: var(--sp-2) 2px;
  cursor: pointer; color: var(--text-subtle);
  font-size: var(--fs-2xs); font-weight: 600;
  border: none; background: none; letter-spacing: 0;
  position: relative; transition: color var(--transition);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
.nav-item .nav-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 24px; border-radius: var(--radius-pill);
  transition: background var(--transition);
}
.nav-item .nav-icon .ico { width: 1.15rem; height: 1.15rem; }
.nav-item:hover { color: var(--text-muted); }
.nav-item.active { color: var(--text); font-weight: 700; }
.nav-item.active .nav-icon { background: var(--surface3); }
.nav-item:focus-visible { outline: none; }
.nav-item:focus-visible .nav-icon { box-shadow: var(--ring); }

/* Main content */
.main-content {
  flex: 1; padding: var(--sp-4) var(--sp-4);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  max-width: 800px; margin: 0 auto; width: 100%;
}

/* ── Cards ───────────────────────────────────────────────────────
   Cards no longer hover-highlight: they are containers, not controls.
   Titles are a modest 17px so a card header never outweighs the data
   inside it. Section cards can opt into a tighter body via .card-tight. */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
  box-shadow: none;
}
.card-tight { padding: var(--sp-4); }
.card-flush { padding: 0; overflow: hidden; }

.card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-4); gap: var(--sp-2); flex-wrap: wrap;
}
.card-header > .card-title { flex: 1 1 auto; min-width: 0; }
.card-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.25;
}
.card-title .ico { color: var(--accent); }
/* Actions in a header stay on one row and never stretch */
.card-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex-shrink: 0; }

/* A quiet one-line description under a card title */
.card-sub {
  font-size: var(--fs-xs); color: var(--text-muted);
  margin-top: calc(var(--sp-1) * -1); margin-bottom: var(--sp-3);
  line-height: 1.5;
}

/* Section label for grouping inside a card — replaces bolded pseudo-headings */
.section-label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--text);
  margin: var(--sp-6) 0 var(--sp-3);
}
.section-label:first-child { margin-top: 0; }

/* ── Buttons ─────────────────────────────────────────────────────
   Flat fills, no gradients, no glow. Only ONE button on a screen should
   be .btn-primary; destructive actions are quiet by default (.btn-ghost
   + .btn-danger-text) and only go solid red inside a confirm dialog.
   44px min touch target on the default size. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-5);
  min-height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: inherit; font-weight: 700; font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
  white-space: nowrap; letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-hover); }
/* Brand-coloured variant for the rare moment that should feel like the product */
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-hover); }

.btn-secondary {
  background: var(--surface); color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface2); border-color: var(--border-hover); }

/* Transparent until hovered — for row-level and low-priority actions */
.btn-ghost {
  background: transparent; color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--hover-wash-strong); color: var(--text); }

.btn-success { background: var(--success); color: #fff; }
.btn-danger  { background: var(--danger);  color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }

/* Text-only destructive: reads as dangerous without shouting */
.btn-danger-text { background: transparent; color: var(--danger); border-color: transparent; }
.btn-danger-text:hover { background: var(--danger-soft); }
.btn-danger-soft { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.btn-danger-soft:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-sm { padding: 7px var(--sp-3); min-height: 34px; font-size: var(--fs-sm); }
.btn-xs { padding: 4px var(--sp-3); min-height: 28px; font-size: var(--fs-xs); gap: var(--sp-1); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none !important; }

/* Square icon-only button — keeps row actions from becoming word soup */
.btn-icon { padding: 0; width: 34px; height: 34px; min-height: 0; }
.btn-icon.btn-xs { width: 28px; height: 28px; }
.btn-icon .ico { width: 1.05em; height: 1.05em; }

.btn-black { background: var(--black-team); color: #fff; border-color: rgba(255,255,255,0.18); }
.btn-red   { background: var(--red-team);   color: #fff; }

/* Segmented control — replaces the oversized pill tabs */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  max-width: 100%;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented > button {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  padding: 7px var(--sp-4); border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  transition: all var(--transition);
}
.segmented > button:hover { color: var(--text); }
.segmented > button.active { background: var(--ink); color: var(--on-ink); }

/* forms */
.form-group { margin-bottom: var(--sp-3); }
.form-label {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-muted); margin-bottom: 6px;
}

.form-input, .form-select, .form-textarea, select.form-input {
  width: 100%; padding: 11px var(--sp-3); background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit;
  font-size: var(--fs-base); line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus, select.form-input:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-input::placeholder, .form-textarea::placeholder {
  color: var(--text-subtle); font-weight: 400;
}
.form-textarea { resize: vertical; min-height: 80px; }

/* ── Password field with visibility toggle ──────────────────────
   The input keeps its full width; the button sits inside the right
   padding so the layout is identical to a normal .form-input. */
.password-field { position: relative; display: block; }
.password-field .form-input { padding-right: 44px; }
.password-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: none; border-radius: var(--radius-xs);
  color: var(--text-subtle); cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.password-toggle:hover { color: var(--text); background: var(--hover-wash-strong); }
.password-toggle:focus-visible { outline: none; box-shadow: var(--ring); color: var(--text); }
.password-toggle .ico { width: 1.05rem; height: 1.05rem; }
/* Hide the browser's own reveal control so there are never two */
.password-field .form-input::-ms-reveal,
.password-field .form-input::-ms-clear { display: none; }
.form-hint {
  display: block; margin-top: 5px; font-size: 0.72rem;
  color: var(--text-muted); line-height: 1.45; font-weight: 500;
  letter-spacing: 0;
}

/* Native date/time/number pickers render their own glyphs — nudge them
   to the current theme so they are not black-on-dark. */
.form-input::-webkit-calendar-picker-indicator {
  filter: var(--picker-filter, none); cursor: pointer; opacity: .75;
}
.form-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── Theme toggle ── */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.theme-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px; border: none;
  background: none; color: var(--text-muted); cursor: pointer;
  transition: all var(--transition); font-size: 0.95rem; padding: 0;
}
.theme-toggle button:hover { color: var(--text); background: var(--hover-wash-strong); }
.theme-toggle button.active { background: var(--ink); color: var(--on-ink); }
.theme-toggle button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Narrow screens: a logged-in public header carries brand + 3 theme
   buttons + avatar + profile + logout + admin. Collapse the toggle to
   just the ACTIVE mode; tapping it cycles light → dark → system, so
   every mode stays reachable without a menu. */
@media (max-width: 560px) {
  .theme-toggle { padding: 2px; }
  .theme-toggle button:not(.active) { display: none; }
  .theme-toggle button.active { background: transparent; color: var(--text-muted); box-shadow: none; }
  .theme-toggle button.active:hover { background: var(--hover-wash-strong); color: var(--text); }
}

/* ── Player rows ─────────────────────────────────────────────────
   Denser: 36px avatar, 13px meta, hairline separators instead of gaps.
   The name gets a single line with ellipsis — two-line wraps were what
   made a 48-player list unreadable. */
.player-list { list-style: none; }
.player-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-1);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.player-item:last-child { border-bottom: none; }
.player-item:hover { background: var(--hover-wash); }
.player-rank {
  font-size: var(--fs-xs); color: var(--text-subtle); min-width: 22px;
  text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.player-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 700;
  font-size: var(--fs-xs); flex-shrink: 0; letter-spacing: 0.02em;
  overflow: hidden;
}
.player-avatar.early {
  background: var(--success-soft); color: var(--success);
  border: 1px solid var(--success-border);
}
.player-avatar.late {
  background: var(--warning-soft); color: var(--warning);
  border: 1px solid var(--warning-border);
}

/* Avatar images */
.avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.avatar-img-sm {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.avatar-img-xs {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.avatar-initials-sm {
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.65rem; background: var(--surface2); color: var(--text-muted); flex-shrink: 0;
}
.avatar-upload-wrap {
  position: relative; width: 56px; height: 56px; flex-shrink: 0; cursor: pointer;
  border-radius: 50%; overflow: hidden; border: 2px dashed var(--border-strong);
}
.avatar-upload-wrap:hover { border-color: var(--accent); }
.avatar-preview {
  width: 100%; height: 100%; object-fit: cover;
}
.avatar-preview-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; background: var(--surface2); color: var(--text-muted);
}
.avatar-file-input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

.player-info { flex: 1; min-width: 0; }
.player-name {
  font-weight: 600; font-size: var(--fs-base); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.35;
}
.player-meta {
  font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  line-height: 1.4;
}
.player-time { font-size: var(--fs-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.player-actions { display: flex; gap: var(--sp-1); align-items: center; flex-shrink: 0; }
.player-item.selected { background: var(--accent-soft); }
.player-item.selectable { cursor: pointer; }
.player-item.selectable:hover { background: var(--accent-soft); }

/* -- Team Display -- */
.teams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 500px) { .teams-grid { grid-template-columns: 1fr; } }

.team-card { border-radius: var(--radius); padding: var(--sp-4); border: 1px solid; color: #fff; }
.team-card-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.team-card-title { font-weight: 800; font-size: var(--fs-md); letter-spacing: -0.03em; }
.team-player-count {
  font-size: var(--fs-xs); opacity: 0.75; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.team-player {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 5px 0; font-size: var(--fs-sm);
}
.team-player .jersey {
  background: rgba(255,255,255,0.14); border-radius: var(--radius-pill);
  padding: 2px var(--sp-2); font-size: var(--fs-2xs); font-weight: 800;
  min-width: 28px; text-align: center; font-variant-numeric: tabular-nums;
}
.captain-badge {
  font-size: var(--fs-2xs); background: var(--highlight); color: var(--on-highlight);
  padding: 1px var(--sp-2); border-radius: var(--radius-pill); font-weight: 800;
  margin-left: auto; letter-spacing: 0.03em; text-transform: uppercase;
}

/* Player row inside a team card. Six controls per row could not fit a
   phone, so name+meta take the first line and the action cluster wraps
   to the right on its own line at narrow widths. Colours are derived
   from the card's own team colour via currentColor-friendly washes. */
.tp-name {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
.tp-stars {
  color: var(--highlight); font-size: var(--fs-2xs); letter-spacing: -1px;
  flex-shrink: 0;
}
.tp-stars-off { color: rgba(255,255,255,0.22); }

.tp-pos {
  font-size: var(--fs-2xs); font-family: inherit; font-weight: 600;
  padding: 1px var(--sp-1); width: auto; min-width: 46px; height: 22px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff; border-radius: var(--radius-xs);
  flex-shrink: 0; cursor: pointer;
}
.tp-pos option { background: var(--surface); color: var(--text); }
.tp-pos:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }

.tp-actions {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-left: auto; flex-shrink: 0;
}

/* Captain toggle: dashed outline when unset, solid amber when set */
.tp-cap {
  width: 22px; height: 22px; border-radius: var(--radius-xs);
  font-size: var(--fs-2xs); font-weight: 800; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.55);
  border: 1px dashed rgba(255,255,255,0.35);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition); font-family: inherit;
}
.tp-cap:hover { color: #fff; border-color: rgba(255,255,255,0.7); }
.tp-cap.is-captain {
  background: var(--highlight); color: var(--on-highlight);
  border: 1px solid var(--highlight); border-style: solid;
}

/* Move / remove: quiet by default so they stop competing with the
   page's primary actions — the old move button was solid accent pink. */
.tp-btn {
  width: 22px; height: 22px; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); color: #fff;
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--transition); padding: 0;
}
.tp-btn:hover { background: rgba(255,255,255,0.24); }
.tp-btn-danger:hover { background: var(--danger); color: #fff; }

/* Keep the row on ONE line at every width: the name absorbs the slack
   and the fixed-size controls shrink slightly rather than wrapping.
   An earlier attempt let this wrap, which stranded the position select
   on its own line and made rows twice as tall. */
.team-player { flex-wrap: nowrap; }
@media (max-width: 480px) {
  .team-player { gap: 5px; }
  .tp-pos { min-width: 40px; font-size: 10px; padding-left: 2px; padding-right: 0; }
  .tp-stars { display: none; }          /* skill already shows in Players */
  .tp-cap, .tp-btn { width: 21px; height: 21px; }
  .team-player .jersey { min-width: 22px; padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 360px) {
  .tp-pos { display: none; }            /* still editable from Players page */
}

/* Field Visualization */
.field-viz-container { margin-top: 4px; }
.field-half { border-radius: var(--radius); overflow: hidden; border: 1px solid; background: var(--pitch-bg); }

/* ── Data tables ─────────────────────────────────────────────────
   Used by both Standings and the Players/ELO list. Tightened to 13px with
   tabular numerals so columns align, and the name column is sticky so it
   stays readable while the stat columns scroll on a phone. */
.standings-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.standings-table th {
  background: var(--surface); padding: var(--sp-2) var(--sp-1);
  text-align: center; font-weight: 600; font-size: var(--fs-2xs);
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--border);
}
.standings-table td {
  padding: var(--sp-2) var(--sp-1); text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.standings-table tr:last-child td { border-bottom: none; }
.standings-table tr:hover td { background: var(--hover-wash); }

/* Rank + name columns pinned left */
.standings-table th:first-child,
.standings-table td:first-child {
  text-align: right; padding-left: var(--sp-3); padding-right: var(--sp-2);
  color: var(--text-subtle); font-size: var(--fs-xs); font-weight: 700;
  width: 1%;
}
.standings-table th:nth-child(2),
.standings-table td:nth-child(2) {
  text-align: left; font-weight: 600;
  position: sticky; left: 0; background: var(--surface);
  max-width: 42vw; overflow: hidden; text-overflow: ellipsis;
}
.standings-table th:nth-child(2) { background: var(--surface); z-index: 3; }
.standings-table tr:hover td:nth-child(2) { background: var(--surface); }
/* Emphasise the decisive column (Points / ELO) */
.standings-table td.col-key { font-weight: 800; color: var(--accent); }

.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Inline time editor inside a check-in row */
.time-inline {
  width: 84px; padding: 4px var(--sp-2);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text);
  font-size: var(--fs-xs); font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.time-inline:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.time-inline::-webkit-calendar-picker-indicator { filter: var(--picker-filter, none); opacity: .6; }

/* The time editor + delete button fit alongside the name down to ~430px;
   below that they wrap to their own line rather than crushing the name. */
@media (max-width: 430px) {
  .player-item { flex-wrap: wrap; row-gap: var(--sp-1); }
  .player-info { flex: 1 1 45%; }
  .player-actions { order: 5; width: 100%; justify-content: flex-end; }
}

/* ── Roster list (Players & ELO) ─────────────────────────────────
   Replaces an 8-column table that could not fit a phone: rank, avatar,
   name+meta, ELO, and actions in one flex row that reflows instead of
   scrolling sideways. Actions become always-visible on touch devices. */
.roster { list-style: none; }
.roster-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-1);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.roster-row:last-child { border-bottom: none; }
.roster-row:hover { background: var(--hover-wash); }

.roster-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0;
}
.roster-avatar-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--text-muted);
  font-weight: 700; font-size: var(--fs-sm);
  border: 1px solid var(--border);
}
.roster-main { flex: 1 1 auto; min-width: 0; }
.roster-name {
  font-weight: 600; font-size: var(--fs-base); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.35;
}
.roster-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px;
  min-width: 0;
}
.roster-stars { color: var(--highlight); letter-spacing: -1px; flex-shrink: 0; }

.roster-elo {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0; line-height: 1.2;
}
.roster-elo-num {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.roster-elo-rank {
  font-size: var(--fs-2xs); color: var(--text-subtle); margin-top: 3px;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}

.roster-actions { display: flex; gap: 2px; flex-shrink: 0; }
/* On a pointer device the row actions stay out of the way until hover;
   on touch there is no hover, so they are always visible. */
@media (hover: hover) and (pointer: fine) {
  .roster-actions { opacity: 0; transition: opacity var(--transition); }
  .roster-row:hover .roster-actions,
  .roster-row:focus-within .roster-actions { opacity: 1; }
}

/* Narrow phones: four action buttons were eating 36% of the row and
   truncating names to "Sunkanm...". Wrap the actions onto their own line
   so the name gets the full width; every control stays reachable.
   Touch devices get no hover, so the actions are always shown — the
   opacity rule above is scoped to fine pointers only. */
/* Narrow screens: rather than wrapping four buttons onto a second line
   for all 48 rows (which made the page 38% TALLER than the old table),
   the actions collapse behind a per-row toggle and only the open row
   expands. Rows stay ~55px; every control is still one tap away. */
/* The toggle only exists on narrow screens — base rule FIRST so the
   media query below can override it (equal specificity, source order). */
.roster-toggle {
  display: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex-shrink: 0;
  background: transparent; border: none; border-radius: var(--radius-xs);
  color: var(--text-subtle); cursor: pointer;
  transition: all var(--transition);
}
.roster-toggle:hover { background: var(--hover-wash-strong); color: var(--text); }
.roster-toggle .ico { transition: transform var(--transition); }
.roster-row.is-open .roster-toggle .ico { transform: rotate(180deg); }
.roster-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

@media (max-width: 470px) {
  .roster-toggle { display: inline-flex; }
  .roster-actions {
    display: none; order: 5; width: 100%;
    justify-content: flex-end; gap: var(--sp-1);
    padding-bottom: var(--sp-1);
  }
  .roster-row.is-open { flex-wrap: wrap; row-gap: var(--sp-1); }
  .roster-row.is-open .roster-actions { display: flex; }
  .roster-actions .btn-icon { width: 32px; height: 32px; }
}

.roster-password {
  padding: var(--sp-3);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  margin: var(--sp-2) 0;
}
.roster-password-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-lg); color: var(--accent); letter-spacing: 2px;
  font-weight: 700;
}

/* Match Card */
.match-card {
  background: var(--surface); border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2); border: 1px solid var(--border-strong);
  transition: border-color var(--transition);
}
.match-card:hover { border-color: var(--border-hover); }
.match-teams {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-2);
  letter-spacing: -0.02em;
}
.match-score {
  background: var(--ink); color: var(--on-ink);
  padding: 6px var(--sp-4); border-radius: var(--radius-pill);
  font-size: var(--fs-lg); min-width: 68px; text-align: center;
  font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.match-date { font-size: var(--fs-xs); color: var(--text-subtle); text-align: center; font-weight: 500; }
.match-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; }

.stat-tag {
  font-size: var(--fs-2xs); padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: transparent; border: 1px solid var(--border); font-weight: 600;
}
.stat-tag.goal { border-color: var(--success-border); color: var(--success); background: var(--success-soft); }
.stat-tag.assist { border-color: var(--info-border); color: var(--info); background: var(--info-soft); }
.stat-tag.yellow { border-color: var(--warning-border); color: var(--warning); background: var(--warning-soft); }
.stat-tag.red { border-color: var(--danger-border); color: var(--danger); background: var(--danger-soft); }
.stat-tag.foul { border-color: var(--warning-border); color: var(--warning); background: var(--warning-soft); }

/* --- Modal --- */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal); display: flex; align-items: flex-end;
  justify-content: center; animation: fadeIn 0.2s;
}
@media (min-width: 600px) { .modal-overlay { align-items: center; } }

/* Confirm sits above every other modal — it can be raised FROM one.
   Centred at all widths so it is never mistaken for a sheet. */
.confirm-overlay { z-index: var(--z-confirm); align-items: center; }
.confirm-overlay .modal-content { max-width: 380px; border-radius: var(--radius); margin: 16px; }

/* QR scanner wants a near-opaque ground for camera contrast */
.qr-overlay { background: rgba(0,0,0,0.94); }

.modal-content {
  background: var(--surface); width: 100%; max-width: 500px;
  max-height: min(90vh, 90dvh);
  border-radius: 24px 24px 0 0; overflow-y: auto;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}
@media (min-width: 600px) { .modal-content { border-radius: 24px; } }

.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.modal-title { font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.03em; }
.modal-close {
  background: transparent; border: none;
  color: var(--text); width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  cursor: pointer; display: flex; flex-shrink: 0;
  align-items: center; justify-content: center; transition: all var(--transition);
}
.modal-close:hover { background: var(--hover-wash-strong); color: var(--text); }
.modal-close:focus-visible { outline: none; box-shadow: var(--ring); }
.modal-body { padding: var(--sp-5); }
/* Footer is sticky so the action buttons stay reachable in tall
   modals, and clears the iOS home indicator. The overlay already
   sits above .bottom-nav (--z-modal > --z-nav), which is what used
   to trap these buttons behind the tab bar on mobile. */
.modal-footer {
  padding: 14px 20px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
  position: sticky; bottom: 0; background: var(--surface);
  z-index: 1;
}
.modal-footer .btn { min-height: 44px; }

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

/* tabs */
/* ── Tabs (segmented control) ────────────────────────────────────
   Same .tab / .tabs markup as before; restyled from oversized pills into
   a compact track so a row of 4 tabs no longer dominates the viewport. */
.tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  margin-bottom: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; max-width: 100%; vertical-align: top;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  padding: 8px var(--sp-4); border-radius: var(--radius-pill);
  background: none; border: none;
  color: var(--text-muted); font-size: var(--fs-sm);
  font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all var(--transition); font-family: inherit;
  letter-spacing: -0.005em; line-height: 1.2;
  display: inline-flex; align-items: center; gap: var(--sp-1);
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--ink); color: var(--on-ink); }
.tab:focus-visible { outline: none; box-shadow: var(--ring); }

/* ── Badges ──────────────────────────────────────────────────────
   Tighter, lower-contrast, with a hairline so soft fills stay legible
   against both surface and surface2. */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2); border-radius: var(--radius-pill);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-border); }
.badge-info    { background: var(--info-soft);    color: var(--info);    border-color: var(--info-border); }
/* Neutral count badge — for "26 players" style metadata */
.badge-neutral { background: var(--surface2); color: var(--text-muted); border-color: var(--border); }

/* -- Login -- */
.login-screen {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
  background: var(--bg);
}
.login-card {
  background: var(--surface); border-radius: var(--radius);
  padding: var(--sp-8) var(--sp-6); width: 100%; max-width: 400px;
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.login-title {
  text-align: center; font-size: var(--fs-2xl); font-weight: 800;
  margin-bottom: var(--sp-6); letter-spacing: -0.045em;
  color: var(--text);
}

/* Utility */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.w-full { width: 100%; }

.empty-state {
  text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--text-subtle);
}
.empty-state .icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0 auto var(--sp-3);
  border-radius: 50%; background: var(--surface2);
  color: var(--text-subtle); font-size: 1.5rem;
}
.empty-state .icon .ico { width: 1.4rem; height: 1.4rem; }
.empty-state p { font-size: var(--fs-sm); font-weight: 500; }

/* Toggle */
.toggle-wrap { display: flex; align-items: center; gap: 10px; }
.toggle {
  width: 46px; height: 26px; border-radius: 13px;
  background: var(--surface3); border: 1px solid var(--border);
  position: relative; cursor: pointer; transition: all var(--transition);
}
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle::after {
  content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; top: 2px; left: 2px; transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle.on::after { transform: translateX(20px); }

/* --- Season Selector --- */
.season-selector { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* admin badges */
.admin-badge {
  font-size: var(--fs-2xs); background: var(--accent-soft); color: var(--accent);
  padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.system-badge {
  font-size: var(--fs-2xs); background: var(--warning-soft); color: var(--warning);
  padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
}

/* Weather Bar ---- */
.weather-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500;
  margin-bottom: var(--sp-3);
}

/* -- Color Preview -- */
.color-preview {
  padding: 10px 18px; border-radius: var(--radius-sm); color: #fff;
  font-weight: 700; font-size: 0.88rem; text-align: center; min-width: 80px;
}

/* Rsvp */
/* ── RSVP ────────────────────────────────────────────────────────
   Replaces two <select> dropdowns with tappable targets: a horizontal
   strip of date cards and three large yes/maybe/no buttons. Colour is
   carried by the status itself so the choice reads at a glance. */

/* Date strip — scrolls horizontally when many dates are published */
.rsvp-dates {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: var(--sp-1); margin-bottom: var(--sp-2);
}
.rsvp-dates::-webkit-scrollbar { display: none; }

.rsvp-date {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 1px; min-width: 62px; padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); cursor: pointer;
  font-family: inherit; color: var(--text-muted);
  transition: all var(--transition); -webkit-tap-highlight-color: transparent;
}
.rsvp-date:hover { border-color: var(--border-hover); color: var(--text); }
.rsvp-date.active {
  background: var(--ink); border-color: var(--ink);
  color: var(--on-ink-muted);
}
.rsvp-date.past { opacity: 0.45; }
.rsvp-date:focus-visible { outline: none; box-shadow: var(--ring); }
.rsvp-date-dow {
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rsvp-date-day {
  font-size: var(--fs-xl); font-weight: 800; line-height: 1.05;
  letter-spacing: -0.03em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rsvp-date.active .rsvp-date-day { color: var(--on-ink); }
.rsvp-date-mon {
  font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rsvp-date-rel {
  margin-top: 3px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 5px; border-radius: var(--radius-pill);
  background: var(--surface3); color: var(--text-subtle);
}
.rsvp-date.active .rsvp-date-rel { background: var(--accent); color: #fff; }

.rsvp-note {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-muted);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}

/* Yes / Maybe / No */
.rsvp-choices {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.rsvp-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); padding: var(--sp-3) var(--sp-2); min-height: 74px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-muted); transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.rsvp-choice:hover { border-color: var(--border-hover); color: var(--text); }
.rsvp-choice:focus-visible { outline: none; box-shadow: var(--ring); }
.rsvp-choice .ico { opacity: 0.75; }
.rsvp-choice.active .ico { opacity: 1; }
.rsvp-choice.yes.active {
  background: var(--success-soft); border-color: var(--success); color: var(--success);
}
.rsvp-choice.maybe.active {
  background: var(--warning-soft); border-color: var(--warning); color: var(--warning);
}
.rsvp-choice.no.active {
  background: var(--danger-soft); border-color: var(--danger); color: var(--danger);
}

.rsvp-current {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--success-soft); border: 1px solid var(--success-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs); color: var(--success);
}
.rsvp-current strong { text-transform: uppercase; letter-spacing: 0.03em; }

.rsvp-error {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--danger-soft); border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs); color: var(--danger);
}

/* Tally */
.rsvp-tally {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.rsvp-tally-item {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-3) var(--sp-2); border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface2);
}
.rsvp-tally-item.yes   { background: var(--success-soft); border-color: var(--success-border); }
.rsvp-tally-item.maybe { background: var(--warning-soft); border-color: var(--warning-border); }
.rsvp-tally-item.no    { background: var(--danger-soft);  border-color: var(--danger-border); }
.rsvp-tally-num {
  font-size: var(--fs-2xl); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.rsvp-tally-item.yes   .rsvp-tally-num { color: var(--success); }
.rsvp-tally-item.maybe .rsvp-tally-num { color: var(--warning); }
.rsvp-tally-item.no    .rsvp-tally-num { color: var(--danger); }
.rsvp-tally-label {
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin-top: 1px;
}

/* People list */
.rsvp-people { list-style: none; }
.rsvp-person {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-1);
  border-bottom: 1px solid var(--border);
}
.rsvp-person:last-child { border-bottom: none; }
.rsvp-person-name {
  flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsvp-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.rsvp-dot.yes   { background: var(--success); }
.rsvp-dot.maybe { background: var(--warning); }
.rsvp-dot.no    { background: var(--danger); }

/* Legacy admin-side RSVP summary row */
.rsvp-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border); font-size: var(--fs-sm);
}
.rsvp-item:last-child { border-bottom: none; }
.rsvp-status { font-size: 1.1rem; }

/* Live Match */
.live-banner {
  background: var(--ink); color: var(--on-ink);
  padding: 10px 20px; display: flex; align-items: center;
  gap: 12px; font-size: var(--fs-sm); font-weight: 700; justify-content: center;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  animation: blink 1.2s infinite;
}
.live-timer { font-weight: 800; font-family: var(--font); font-size: 1rem; font-variant-numeric: tabular-nums; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
}

.live-control { text-align: center; }
.live-timer-big {
  font-size: 3.25rem; font-weight: 800; font-family: var(--font);
  color: var(--text); letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
}

.live-scoreboard {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: 20px; flex-wrap: wrap;
}
.live-team { text-align: center; }
.live-team > span:first-child {
  font-weight: 700; font-size: 0.95rem; display: block; margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.live-score-controls { display: flex; align-items: center; gap: 10px; }
.live-score-num { font-size: 2.5rem; font-weight: 800; min-width: 48px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* --- Penalties --- */
.penalties-display { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.penalty-dot { font-size: 0.9rem; cursor: default; }

/* stats grid (player profile) */
/* Rendered as a single ink panel with hairline dividers, like a
   scoreboard strip, rather than four separate tinted boxes. */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--radius); overflow: hidden;
}
.stat-box {
  padding: var(--sp-4) var(--sp-2);
  text-align: center; box-shadow: inset 1px 0 0 var(--ink-divider);
}
.stat-box:first-child { box-shadow: none; }
.stat-num {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.035em;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: var(--fs-2xs); color: var(--on-ink-muted); margin-top: var(--sp-1);
  text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em;
}

/* Achievements ---- */
.achievement-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.achievement-item:last-child { border-bottom: none; }

/* -- ELO Bar (MVP results) -- */
.elo-bar {
  height: 8px; background: var(--surface3); border-radius: var(--radius-pill);
  overflow: hidden;
}
.elo-fill {
  height: 100%; border-radius: 5px; transition: width 0.4s ease;
  min-width: 4px;
  background: var(--accent);
}

/* ── Public check-in page ────────────────────────────────────────
   Reuses the RSVP date-card strip. The primary action is one large
   button; everything else (cutoff, weather, pitch) is demoted to a
   single quiet conditions row so the page has one obvious next step. */

/* Single-date banner when there is nothing to choose between */
.checkin-today {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); margin-bottom: var(--sp-3);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md); font-weight: 600;
}
.checkin-today .ico { color: var(--text-muted); }

.checkin-conditions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.checkin-conditions .cond {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.checkin-conditions:empty { display: none; }

/* Identity row above the action button */
.checkin-identity {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); margin-bottom: var(--sp-3);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.checkin-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.checkin-avatar-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 800; font-size: var(--fs-md);
  border: 1px solid var(--accent-soft);
}
.checkin-identity-text { display: flex; flex-direction: column; min-width: 0; }
.checkin-identity-text strong {
  font-size: var(--fs-md); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.checkin-identity-text span { font-size: var(--fs-xs); color: var(--text-muted); }

/* The one primary action — deliberately tall and unmissable */
.btn-checkin {
  min-height: 52px; font-size: var(--fs-md); letter-spacing: -0.01em;
}

/* Confirmation state — replaces the button once checked in */
.checkin-done {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--success-soft); border: 1px solid var(--success-border);
  border-radius: var(--radius-sm);
}
.checkin-done-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--success); color: #fff; flex-shrink: 0;
}
.checkin-done strong { display: block; font-size: var(--fs-md); color: var(--success); }
.checkin-done-sub { font-size: var(--fs-xs); color: var(--text-muted); }

/* Geolocation gate */
.geo-status {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  border-radius: var(--radius-sm); font-size: var(--fs-xs);
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text-muted);
}
.geo-status .geo-text { flex: 1; min-width: 0; }
.geo-status.geo-ok {
  background: var(--success-soft); border-color: var(--success-border); color: var(--success);
}
.geo-status.geo-far, .geo-status.geo-denied {
  background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger);
}
.geo-status.geo-error {
  background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning);
}
.geo-status.geo-checking .ico { animation: geo-spin 1.1s linear infinite; }
@keyframes geo-spin { to { transform: rotate(360deg); } }

.checkin-hint {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-3); font-size: var(--fs-xs);
  color: var(--text-subtle); line-height: 1.5;
}
.checkin-hint .ico { margin-top: 2px; flex-shrink: 0; }

/* Arrival order badge in the "who's here" list */
.arrival-rank {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; background: var(--surface2);
  border: 1px solid var(--border);
  font-size: var(--fs-2xs); font-weight: 800; color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.player-item.is-me { background: var(--accent-soft); border-radius: var(--radius-xs); }
.player-item.is-me .arrival-rank { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.you-tag {
  display: inline-block; margin-left: var(--sp-1);
  padding: 0 5px; border-radius: var(--radius-xs);
  background: var(--accent); color: var(--on-accent);
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; vertical-align: 1px;
}

/* Check-in form section */
.checkin-form-section {
  background: var(--surface2); border-radius: var(--radius);
  padding: 16px; border: 1px solid var(--border);
}

/* Details/Summary */
details { margin-bottom: 0; }
details summary {
  cursor: pointer; user-select: none;
  color: var(--text-muted); font-size: 0.78rem;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em;
}
details summary:hover { color: var(--text); }
details[open] summary { margin-bottom: 4px; }

/* --- Buy Me a Coffee --- */
.coffee-section {
  text-align: center; padding: 16px;
  border-top: 1px solid var(--border); margin-top: 8px;
}
.coffee-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius-pill);
  background: #FFDD00; color: #000; font-weight: 700;
  font-size: 0.85rem; text-decoration: none;
  font-family: var(--font);
  transition: all var(--transition);
  box-shadow: none;
  letter-spacing: 0.01em; border: none; cursor: pointer;
}
.coffee-btn:hover {
  filter: brightness(0.96);
}
.coffee-btn img { height: 20px; }

/* responsive */
/* ── Narrow-screen refinements ───────────────────────────────────
   The base styles are already mobile-first; these only tighten the
   extremes. Nav icon sizing lives on .ico now, not font-size. */
@media (max-width: 480px) {
  .app-header { padding: var(--sp-2) var(--sp-3); padding-top: calc(var(--sp-2) + env(safe-area-inset-top)); }
  .team-logo, .team-logo-placeholder { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
  .team-name { font-size: var(--fs-base); }
  .header-actions span { font-size: var(--fs-xs) !important; }
  .nav-item { font-size: 0.6rem; }
  .nav-item .nav-icon { width: 28px; height: 22px; }
  .nav-item .nav-icon .ico { width: 1.05rem; height: 1.05rem; }
}
@media (max-width: 400px) {
  .main-content { padding: var(--sp-3) var(--sp-3); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .card { padding: var(--sp-4); }
  .card-tight { padding: var(--sp-3); }
  .btn { padding: 9px var(--sp-3); font-size: var(--fs-sm); }
  .standings-table { font-size: var(--fs-xs); }
  .standings-table th, .standings-table td { padding: 7px 3px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-box:nth-child(odd) { box-shadow: none; }
  .stat-box:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--ink-divider); }
  .stat-box:nth-child(even):nth-child(n+3) { box-shadow: inset 1px 0 0 var(--ink-divider), inset 0 1px 0 var(--ink-divider); }
  .live-timer-big { font-size: 2.2rem; }
}
@media (max-width: 350px) {
  .nav-item { font-size: 0.55rem; }
  .nav-item .nav-icon .ico { width: 1rem; height: 1rem; }
}

/* Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* -- Toast Notifications -- */
.toast-msg {
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  animation: toast-in 0.3s ease;
}
.toast-success { background: #111114; box-shadow: inset 4px 0 0 #34c472, 0 8px 24px rgba(0,0,0,0.25); }
.toast-error { background: #111114; box-shadow: inset 4px 0 0 #ff4d64, 0 8px 24px rgba(0,0,0,0.25); }
.toast-info { background: #111114; box-shadow: inset 4px 0 0 #8b6dff, 0 8px 24px rgba(0,0,0,0.25); }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
.toast-enter-active { animation: toast-in 0.3s ease; }
.toast-leave-active { transition: all 0.3s ease; }
.toast-leave-to { opacity: 0; transform: translateX(40px); }

/* Cookie consent banner */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-banner);
  background: var(--chrome-solid); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); padding: 16px 20px;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  animation: cookie-slide-up 0.4s ease;
}
@keyframes cookie-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie-content { max-width: 700px; margin: 0 auto; }
.cookie-content p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.cookie-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cookie-link { font-size: 0.8rem; color: var(--accent); text-decoration: underline; cursor: pointer; }
.cookie-link:hover { opacity: 0.8; }

/* pwa install banner */
.pwa-install-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-banner);
  background: #5b2ee6;
  padding: 14px 20px;
  animation: pwa-slide-down 0.5s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  box-sizing: border-box;
}
@keyframes pwa-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.pwa-install-content {
  max-width: 700px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.pwa-install-icon { font-size: 2rem; flex-shrink: 0; }
.pwa-install-text { flex: 1; }
.pwa-install-text strong { color: #fff; font-size: 0.95rem; display: block; margin-bottom: 2px; }
.pwa-install-text p { color: rgba(255,255,255,0.85); font-size: 0.78rem; line-height: 1.4; margin: 0; }
.pwa-install-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.pwa-install-actions .btn-primary { background: #fff; color: #111114; font-weight: 700; border: none; }
.pwa-install-actions .btn-primary:hover { background: #f0f0f0; }
.pwa-install-actions .btn-secondary { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.3); }

/* PWA banner mobile */
@media (max-width: 480px) {
  .pwa-install-banner { padding: 12px 14px; }
  .pwa-install-content { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pwa-install-icon { font-size: 1.3rem; }
  .pwa-install-text { width: 100%; }
  .pwa-install-text strong { font-size: 0.85rem; }
  .pwa-install-text p { font-size: 0.72rem; }
  .pwa-install-actions { flex-direction: row; width: 100%; gap: 8px; }
  .pwa-install-actions .btn { flex: 1; text-align: center; padding: 8px 10px; font-size: 0.78rem; }
}

/* Legal Footer */
.legal-footer {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 12px 0 8px; font-size: 0.75rem; color: var(--text-muted);
}
.legal-footer a { color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.legal-footer a:hover { color: var(--accent); }

/* Demo-mode credentials hint (shown only when the server runs with DEMO_MODE=true) */
.demo-hint {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px dashed var(--accent, #5b2ee6);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
}