/* ============================================================
   Asturfútbol Stats — Tasugo design, bespoke implementation.
   Single source. No overlay. No legacy remnants.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Bebas+Neue&display=swap');

/* ---------- Tokens ---------- */
:root {
    color-scheme: light dark;

    --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --font-display: 'Bebas Neue', 'Space Grotesk', sans-serif;

    /* Pitch (primary) */
    --pitch-50:  oklch(97% 0.04 135);
    --pitch-100: oklch(94% 0.08 135);
    --pitch-200: oklch(88% 0.13 135);
    --pitch-400: oklch(76% 0.20 135);
    --pitch-500: oklch(70% 0.21 135);
    --pitch-600: oklch(62% 0.19 135);
    --pitch-700: oklch(52% 0.16 135);
    --pitch-800: oklch(40% 0.12 135);

    /* Whistle (red) */
    --whistle-100: oklch(93% 0.05 25);
    --whistle-400: oklch(72% 0.19 25);
    --whistle-500: oklch(66% 0.22 25);
    --whistle-600: oklch(58% 0.22 25);
    --whistle-700: oklch(48% 0.19 25);

    /* Sunrise (yellow/warn) */
    --sunrise-100: oklch(95% 0.08 85);
    --sunrise-500: oklch(82% 0.18 85);
    --sunrise-700: oklch(60% 0.15 85);

    /* Field (info blue) */
    --field-100: oklch(93% 0.05 240);
    --field-400: oklch(68% 0.17 240);
    --field-500: oklch(60% 0.18 240);
    --field-700: oklch(42% 0.16 240);

    /* Rose */
    --rose-500: oklch(68% 0.19 20);

    /* Night (neutrals) */
    --night-50:  oklch(98.5% 0.002 240);
    --night-100: oklch(96% 0.004 240);
    --night-150: oklch(93% 0.006 240);
    --night-200: oklch(90% 0.008 240);
    --night-300: oklch(82% 0.012 240);
    --night-400: oklch(68% 0.014 240);
    --night-500: oklch(54% 0.015 240);
    --night-600: oklch(42% 0.016 240);
    --night-700: oklch(32% 0.014 240);
    --night-800: oklch(22% 0.012 240);
    --night-850: oklch(17% 0.010 240);
    --night-900: oklch(12% 0.008 240);
    --night-950: oklch(8%  0.006 240);
    --night-1000: oklch(4% 0.004 240);

    /* Semantic — LIGHT */
    --bg-app: var(--night-50);
    --bg-surface: #ffffff;
    --bg-surface-2: var(--night-100);
    --bg-surface-3: var(--night-150);
    --bg-inverse: var(--night-950);
    --bg-brand-soft: var(--pitch-50);
    --bg-brand: var(--pitch-500);

    --fg-1: var(--night-900);
    --fg-2: var(--night-700);
    --fg-3: var(--night-500);
    --fg-4: var(--night-400);
    --fg-inverse: #ffffff;
    --fg-on-brand: var(--night-950);
    --fg-brand: var(--pitch-700);
    --fg-link: var(--pitch-700);
    --fg-danger: var(--whistle-700);
    --fg-warning: var(--sunrise-700);
    --fg-info: var(--field-700);

    --border-subtle: var(--night-150);
    --border-default: var(--night-200);
    --border-strong: var(--night-300);
    --border-brand: var(--pitch-500);

    --shadow-xs: 0 1px 0 0 oklch(0% 0 0 / 0.05);
    --shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.06), 0 1px 0 0 oklch(0% 0 0 / 0.04);
    --shadow-md: 0 4px 8px -2px oklch(0% 0 0 / 0.08), 0 2px 4px -2px oklch(0% 0 0 / 0.04);
    --shadow-lg: 0 12px 24px -8px oklch(0% 0 0 / 0.12), 0 4px 8px -4px oklch(0% 0 0 / 0.06);
    --shadow-xl: 0 24px 48px -12px oklch(0% 0 0 / 0.18), 0 8px 16px -8px oklch(0% 0 0 / 0.08);
    --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--pitch-500) 35%, transparent);

    --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
    --dur-1: 80ms;
    --dur-2: 140ms;
    --dur-3: 220ms;

    /* Header-specific */
    --header-h: 60px;
    --nav-bar-h: 36px;

    /* Status tints (for standings zones, stat cells) */
    --tint-green:  color-mix(in oklch, var(--pitch-500) 14%, transparent);
    --tint-yellow: color-mix(in oklch, var(--sunrise-500) 18%, transparent);
    --tint-red:    color-mix(in oklch, var(--whistle-500) 13%, transparent);
    --tint-blue:   color-mix(in oklch, var(--field-500) 14%, transparent);

    /* Legacy token aliases — keep a handful of app.js inline styles
       (renderIncidenciasPage, renderApiKeyPage, renderConfig*) from
       breaking. These should be retired the next time the render
       functions get touched; aliasing is cheaper than threading
       semantic tokens through every inline style. */
    --color-text-light: var(--fg-3);
    --color-accent-blue: var(--field-500);
    --color-red: var(--whistle-700);
}

[data-theme="dark"] {
    --bg-app: var(--night-950);
    --bg-surface: var(--night-900);
    --bg-surface-2: var(--night-850);
    --bg-surface-3: var(--night-800);
    --bg-inverse: var(--night-50);
    --bg-brand-soft: oklch(28% 0.08 135 / 0.3);

    --fg-1: var(--night-50);
    --fg-2: var(--night-200);
    --fg-3: var(--night-400);
    --fg-4: var(--night-600);
    --fg-inverse: var(--night-950);
    --fg-brand: var(--pitch-400);
    --fg-link: var(--pitch-400);
    --fg-danger: var(--whistle-400);
    --fg-warning: oklch(78% 0.16 85);
    --fg-info: var(--field-400);

    --border-subtle: var(--night-850);
    --border-default: var(--night-800);
    --border-strong: var(--night-700);

    --shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.4), 0 1px 0 0 oklch(0% 0 0 / 0.2);
    --shadow-md: 0 4px 8px -2px oklch(0% 0 0 / 0.45), 0 2px 4px -2px oklch(0% 0 0 / 0.3);
    --shadow-lg: 0 12px 24px -8px oklch(0% 0 0 / 0.55), 0 4px 8px -4px oklch(0% 0 0 / 0.35);
    --shadow-xl: 0 24px 48px -12px oklch(0% 0 0 / 0.65);

    --tint-green:  color-mix(in oklch, var(--pitch-500) 22%, transparent);
    --tint-yellow: color-mix(in oklch, var(--sunrise-500) 26%, transparent);
    --tint-red:    color-mix(in oklch, var(--whistle-500) 22%, transparent);
    --tint-blue:   color-mix(in oklch, var(--field-500) 22%, transparent);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body, .reset-body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--fg-1);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-2) var(--ease-out); }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--border-subtle); }

/* Mono helpers */
.mono, .t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.c { text-align: center; } .r { text-align: right; }
.t-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
}

/* ============================================================
   HEADER / SHELL
   ============================================================ */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}
.top-bar {
    background: var(--bg-surface);
    color: var(--fg-1);
}
.top-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Local-dev hazard stripes */
html[data-env="local"] .app-header { border-bottom-color: #f59e0b; }
html[data-env="local"] .top-bar {
    background-color: #fff7ed;
    background-image: repeating-linear-gradient(135deg, rgba(245, 158, 11, 0) 0 16px, rgba(245, 158, 11, 0.08) 16px 32px);
}
html[data-env="local"] .top-bar::after {
    content: "LOCAL DEV";
    position: fixed;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 2px 10px;
    background: #f59e0b;
    color: #1a1000;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    border-radius: 999px;
    pointer-events: none;
}

/* Brand lockup */
.logo-wrap { position: relative; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--fg-1); }
.logo:hover { text-decoration: none; }
.logo-mark {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 7px;
}
.logo-text {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}
.logo-word { color: var(--fg-1); }
.logo-accent { color: var(--pitch-700); }

.variant-toggle {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-3);
    border-radius: 6px;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.variant-toggle svg { width: 14px; height: 14px; }
.variant-toggle:hover { background: var(--bg-surface-2); color: var(--fg-1); }

.variant-menu {
    position: absolute;
    top: calc(100% + 8px); left: 0;
    width: 280px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 5px;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 1000;
}
.variant-menu.open { display: flex; }
.variant-option {
    display: grid;
    grid-template-columns: 10px 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
}
.variant-option:hover { background: var(--bg-surface-2); }
.variant-option.active {
    background: var(--bg-surface-2);
    box-shadow: inset 2px 0 0 0 var(--pitch-500);
}
.variant-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    grid-row: 1 / span 2;
    align-self: center;
}
.variant-label {
    grid-column: 2;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.variant-label strong { font-weight: 700; }
.variant-desc {
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Actions cluster */
.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
}

/* Omni trigger */
.omni-trigger {
    flex: 1;
    max-width: 440px;
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 12px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--fg-3);
    font-size: 13px;
    transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
    overflow: hidden;
}
.omni-trigger:hover { background: var(--bg-surface-3); border-color: var(--border-default); color: var(--fg-2); }
.omni-trigger-icon { width: 16px; height: 16px; flex-shrink: 0; }
.omni-trigger-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.omni-trigger-kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
    flex-shrink: 0;
}

/* Header nav */
.header-nav { display: flex; align-items: center; gap: 4px; }
.header-link {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    color: var(--fg-2);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
    white-space: nowrap;
}
.header-link:hover { background: var(--bg-surface-2); color: var(--fg-1); text-decoration: none; }

/* ── User menu: avatar trigger + dropdown ── */
.user-menu {
    position: relative;
    flex-shrink: 0;
}
.user-menu-trigger {
    width: 34px; height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: var(--bg-surface-2);
    color: var(--fg-1);
    transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
    cursor: pointer;
    padding: 0;
}
.user-menu-trigger:hover {
    background: var(--bg-surface-3);
    border-color: var(--border-default);
}
.user-menu.is-open .user-menu-trigger {
    border-color: var(--pitch-500);
    background: var(--bg-surface);
    box-shadow: var(--shadow-focus);
}
.user-menu-initial {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--fg-1);
    line-height: 1;
}
.user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
    z-index: 1000;
    transform-origin: top right;
}
.user-menu.is-open .user-menu-panel { display: block; }

.user-menu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px 10px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}
.user-menu-initial-big {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--pitch-500);
    color: var(--night-950);
    border-radius: 50%;
    font-size: 15px;
    flex-shrink: 0;
}
.user-menu-head-text { min-width: 0; flex: 1; }
.user-menu-email {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.005em;
}
.user-menu-role {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-top: 2px;
}

.user-menu-section { padding: 8px 10px 6px; }
.user-menu-section-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 6px;
}
.theme-selector {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
    padding: 2px;
    background: var(--bg-surface-2);
    border-radius: 8px;
}
.theme-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 28px;
    padding: 0 6px;
    background: transparent;
    color: var(--fg-2);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.theme-option:hover { color: var(--fg-1); }
.theme-option.is-active {
    background: var(--bg-surface);
    color: var(--fg-1);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}
.theme-option svg { flex-shrink: 0; }

.user-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-1);
    letter-spacing: -0.005em;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
    text-decoration: none;
}
.user-menu-item:hover {
    background: var(--bg-surface-2);
    color: var(--fg-1);
    text-decoration: none;
}
.user-menu-item svg { color: var(--fg-3); flex-shrink: 0; }
.user-menu-item:hover svg { color: var(--fg-brand); }
.user-menu-item-danger { color: var(--fg-danger); }
.user-menu-item-danger svg { color: var(--fg-danger); }
.user-menu-item-danger:hover {
    background: color-mix(in oklch, var(--whistle-500) 12%, transparent);
    color: var(--fg-danger);
}
.user-menu-item-danger:hover svg { color: var(--fg-danger); }

/* Hamburger */
.hamburger-btn {
    display: none;
    width: 36px; height: 36px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    align-items: center; justify-content: center;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.hamburger-bar {
    display: block;
    width: 16px; height: 2px;
    background: var(--fg-1);
    border-radius: 1px;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.hamburger-btn.open .hamburger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger-btn.open .hamburger-bar:nth-child(2) { opacity: 0; }
.hamburger-btn.open .hamburger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   Mobile navigation drawer.

   Visual language intentionally matches the desktop user-menu
   dropdown (.user-menu-panel / .user-menu-item / etc.) — same
   pitch-green brand avatar, same mono eyebrow section labels,
   same rounded-pill hover state on items, same 3-way segmented
   theme control. The ONLY differences are:
     - Full-width panel (slides down from header) instead of
       280px fixed anchored dropdown
     - Larger tap targets (44px-ish item height vs 13px font)
     - Fewer separators (structured sections, not per-link
       hairlines)

   Primary nav → optional user-header → account links → theme
   selector → logout. Separator hairlines live BETWEEN major
   section groups only.
   ============================================================ */
.mobile-nav-drawer {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
    /* 8px side padding creates a gutter so .mobile-nav-item rounded-
       pill hover states sit INSIDE the drawer edge — same pattern
       as the 6px-padded desktop user-menu-panel. */
    padding: 8px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-nav-drawer.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

.mobile-nav-section {
    display: flex;
    flex-direction: column;
    padding: 2px 0;
}
/* Separator between adjacent sections only (account → theme → logout).
   Deliberately NO border between the header and the account section
   below it — the avatar + email row reads as the "who you are" lead-in
   to the "your stuff" links, one coherent block with typographic
   contrast doing the separation work. Fewer hairlines overall
   compared to the old drawer's border-on-every-link pattern. */
.mobile-nav-section + .mobile-nav-section {
    border-top: 1px solid var(--border-subtle);
    margin-top: 6px;
    padding-top: 8px;
}
/* mobile-nav-user block separates from the primary nav above it
   by its own top border (the user div starts the logged-in
   portion of the drawer). For anonymous users, mobile-nav-user
   is empty — :empty drops the border so we don't ship a dangling
   hairline at the bottom of the drawer. */
.mobile-nav-user:not(:empty) {
    border-top: 1px solid var(--border-subtle);
    margin-top: 6px;
    padding-top: 4px;
}
.mobile-nav-section-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 6px 14px 6px;
}

/* Items: match .user-menu-item exactly (border-radius 8, flex
   row, fg-1 text, pitch-green icon tint on hover) — just
   scaled up for tap targets (14px font vs 13px desktop,
   12px 14px padding vs 8px 10px). The border-radius is the
   key — without it the hover state reads as an edge-to-edge
   highlight bar, a different UI pattern than the rest of the
   app's rounded-pill hover language. */
.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: var(--fg-1);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
    width: 100%;
}
.mobile-nav-item:hover,
.mobile-nav-item:active {
    background: var(--bg-surface-2);
    color: var(--fg-1);
    text-decoration: none;
}
.mobile-nav-item svg {
    color: var(--fg-3);
    flex-shrink: 0;
    transition: color var(--dur-2) var(--ease-out);
}
.mobile-nav-item:hover svg { color: var(--fg-brand); }
.mobile-nav-item--danger { color: var(--fg-danger); }
.mobile-nav-item--danger svg { color: var(--fg-danger); }
.mobile-nav-item--danger:hover {
    background: color-mix(in oklch, var(--whistle-500) 12%, transparent);
    color: var(--fg-danger);
}
.mobile-nav-item--danger:hover svg { color: var(--fg-danger); }

/* Logged-in user header — avatar + email + role. The avatar
   uses the pitch-green brand fill (matching .user-menu-initial-big
   on desktop) rather than a muted gray: this is the identity
   anchor for "you're logged in". Gray with a border read as
   off-brand and generic. */
.mobile-nav-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 12px;
}
.mobile-nav-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pitch-500);
    color: var(--night-950);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}
.mobile-nav-header-text { min-width: 0; flex: 1; }
.mobile-nav-email {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-nav-role {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-top: 2px;
}

/* Theme selector inside drawer — same markup as desktop so it
   inherits .theme-selector + .theme-option styling. Left/right
   padding 12px so the button text inside the 2px-padded selector
   track lines up horizontally with the 14px-padded item text
   above and below (8px drawer + 12px wrap + 2px track = 22px,
   matching 8px drawer + 14px item = 22px). Consistent horizontal
   gutter across the whole drawer. */
.mobile-nav-theme-wrap { padding: 4px 12px 8px; }
.mobile-nav-theme-wrap .theme-selector { width: 100%; }
.mobile-nav-theme-wrap .theme-option { height: 32px; font-size: 12px; }

/* The user header appears BEFORE the first section — so the
   section-border rule above would give the first account-links
   section a top border. That's what we want, since the header
   feels like its own "zero" section. But if we DON'T show a user
   header (anonymous user, mobile-nav-user empty), the primary
   nav section in the static HTML is the only thing visible —
   no separator needed at the top. Controlled by structure
   above. */

/* Breadcrumb */
.nav-bar {
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-subtle);
}
.nav-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: var(--nav-bar-h);
    display: flex;
    align-items: center;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 0;
    scrollbar-width: none;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb a { color: var(--fg-2); }
.breadcrumb a:hover { color: var(--fg-brand); text-decoration: none; }
.breadcrumb .sep { color: var(--fg-4); }
.breadcrumb .current { color: var(--fg-1); font-weight: 600; }

/* Main */
#app {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 96px;
    min-height: calc(100vh - var(--header-h) - var(--nav-bar-h));
}

/* Loading + empty */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}
.spinner {
    width: 32px; height: 32px;
    border: 2.5px solid var(--border-subtle);
    border-top-color: var(--pitch-500);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--fg-3);
    font-size: 15px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-default);
    border-radius: 12px;
}

/* ============================================================
   PRIMITIVES — badges, chips, buttons
   ============================================================ */

/* Form badges: W/D/L micro-chips — always 22px square, mono */
.badge-W, .badge-D, .badge-L {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    border-radius: 5px;
    margin-right: 2px;
}
.badge-W { background: var(--pitch-600); }
.badge-D { background: var(--sunrise-500); color: var(--night-950); }
.badge-L { background: var(--whistle-500); }

/* PPG pill — tabular, tiered green→red */
.ppg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
    background: var(--bg-surface-2);
    border-radius: 999px;
    letter-spacing: 0;
}
.ppg-high    { background: var(--pitch-500); color: var(--night-950); }
.ppg-good    { background: var(--pitch-200); color: var(--pitch-800); }
.ppg-mid     { background: var(--sunrise-100); color: var(--sunrise-700); }
.ppg-low-mid { background: color-mix(in oklch, var(--sunrise-500) 25%, transparent); color: var(--sunrise-700); }
.ppg-low     { background: var(--whistle-100); color: var(--whistle-700); }
[data-theme="dark"] .ppg-good { background: color-mix(in oklch, var(--pitch-500) 24%, transparent); color: var(--pitch-400); }
[data-theme="dark"] .ppg-mid { background: color-mix(in oklch, var(--sunrise-500) 24%, transparent); color: var(--fg-warning); }
[data-theme="dark"] .ppg-low { background: color-mix(in oklch, var(--whistle-500) 24%, transparent); color: var(--fg-danger); }

/* Live badge */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: var(--whistle-500);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    border-radius: 4px;
}
.live-badge-unconfirmed {
    background: var(--fg-3);
    color: #fff;
}
.live-dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: currentColor;
    border-radius: 50%;
    animation: livepulse 1.4s var(--ease-out) infinite;
}
@keyframes livepulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}

/* GK tag */
.gk-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    background: var(--sunrise-500);
    color: var(--night-950);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: -2px;
}

/* Gender dot */
.gender-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: 1px;
}
.gd-f { background: var(--rose-500); }
.gd-m { background: var(--field-500); }
.gd-u { background: var(--night-300); }

/* Age category. Full-name variant is the default; .age-cat-compact
   opts into a tighter pill (3-letter prefix + optional index,
   e.g. "PRE1") for tight table cells and squad rows. Both share
   the same semantic color tints below. */
.age-cat-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    background: var(--bg-surface-2);
    color: var(--fg-2);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    margin-left: 6px;
    vertical-align: 2px;
}
.age-cat-badge.age-cat-compact {
    height: 16px;
    padding: 0 5px;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin-left: 4px;
}
.age-cat-senior, .age-cat-sub { background: var(--night-800); color: #fff; border-color: transparent; }
.age-cat-juvenil { background: color-mix(in oklch, var(--pitch-500) 14%, transparent); color: var(--pitch-700); border-color: transparent; }
.age-cat-cadete  { background: var(--pitch-200); color: var(--pitch-800); border-color: transparent; }
.age-cat-infantil { background: var(--field-100); color: var(--field-700); border-color: transparent; }
.age-cat-alevín, .age-cat-alevin { background: var(--sunrise-100); color: var(--sunrise-700); border-color: transparent; }
.age-cat-benjamín, .age-cat-benjamin { background: color-mix(in oklch, var(--rose-500) 18%, transparent); color: oklch(42% 0.15 20); border-color: transparent; }
.age-cat-prebenjamín, .age-cat-prebenjamin { background: var(--whistle-100); color: var(--whistle-700); border-color: transparent; }
.age-cat-profútbol, .age-cat-profutbol { background: var(--night-100); color: var(--fg-3); }
.age-cat-debutantes { background: var(--night-100); color: var(--fg-2); }

/* Position circle */
.pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: var(--bg-surface-2);
    color: var(--fg-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
}
.pos.p1 { background: var(--pitch-500); color: var(--night-950); }
.pos.p2 { background: var(--pitch-200); color: var(--pitch-800); }
.pos.p3 { background: var(--sunrise-500); color: var(--night-950); }
/* Zone stripe — a concrete inline-block DOM element rendered
   into the first TD of standings rows whose teams are in a
   promotion or relegation zone. Sits next to the pos circle
   inside a wrapping .pos-cell-inner div.

   Earlier attempts put the stripe as an absolutely-positioned
   span anchored to the <td> (with `position: relative` on the
   td) — but position: relative on a TD inside a
   `border-collapse: collapse` table is a long-standing Safari
   quirk and the position gets silently ignored, sending the
   absolute span to the initial containing block. A
   `<div style="position:relative">` child of the td + a
   simple absolute-positioned span inside it works reliably.

   Alternative (equally valid): inline-block layout within the
   wrapping div. Used here so the stripe sits visually BEFORE
   the pos circle, anchored to the left edge of the wrapper. */
.pos-cell-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.zone-stripe {
    display: inline-block;
    width: 4px;
    height: 22px;         /* matches .pos circle height */
    flex-shrink: 0;
    border-radius: 1px;
}

/* Pos-circle zone tint.
   rgba base (universal — works back to IE9) so older Safari that
   doesn't support color-mix(in oklch) still shows the tint.
   color-mix upgrade via @supports for perceptually-accurate oklch
   mixing on 16.4+ browsers. Applied below to every
   pos/rank/tp-rk/dt-tr zone class together. */
.pos-promo { background: rgba(14, 194, 100, 0.2);  color: #1a7047; }
.pos-releg { background: rgba(213, 63, 69, 0.18); color: #8e2428; }
@supports (background: color-mix(in oklch, red, blue)) {
    .pos-promo { background: color-mix(in oklch, var(--pitch-500) 20%, transparent); color: var(--pitch-700); }
    .pos-releg { background: color-mix(in oklch, var(--whistle-500) 18%, transparent); color: var(--whistle-700); }
}

/* Player avatar (circular image) */
.pl-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    background: var(--bg-surface-2);
    border-radius: 50%;
    overflow: hidden;
    margin-right: 6px;
    vertical-align: -7px;
    flex-shrink: 0;
}
.pl-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* Penalty pill inside stat numbers */
.bar-pen {
    display: inline-block;
    padding: 0 4px;
    margin-left: 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--fg-warning);
    background: var(--sunrise-100);
    border-radius: 3px;
    vertical-align: 1px;
}
[data-theme="dark"] .bar-pen { background: color-mix(in oklch, var(--sunrise-500) 22%, transparent); }

/* Goals-val / yc / rc in player table */
.goals-val { font-weight: 700; color: var(--pitch-700); }
.yc { color: var(--sunrise-700); font-weight: 600; }
.rc { color: var(--whistle-700); font-weight: 600; }
[data-theme="dark"] .goals-val { color: var(--pitch-400); }
[data-theme="dark"] .yc { color: var(--fg-warning); }
[data-theme="dark"] .rc { color: var(--fg-danger); }

/* Buttons */
.btn-primary, .show-more-btn, .ps-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: var(--pitch-500);
    color: var(--night-950);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: 8px;
    transition: background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
    cursor: pointer;
}
.btn-primary:hover, .show-more-btn:hover, .ps-export-btn:hover { background: var(--pitch-400); }
.btn-primary:active, .show-more-btn:active, .ps-export-btn:active { transform: translateY(1px); }

.btn-ghost, .ps-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: transparent;
    color: var(--fg-2);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    transition: background var(--dur-2) var(--ease-out);
    cursor: pointer;
}
.btn-ghost:hover, .ps-reset:hover { background: var(--bg-surface-2); }

.page-h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 8px 0 20px;
    line-height: 1.1;
}
.page-h1-back { color: var(--fg-3); font-weight: 500; }
.page-h1-back:hover { color: var(--fg-brand); text-decoration: none; }

/* ============================================================
   HOME — competitions grid + widget sidebar
   ============================================================ */
.home-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}
.home-main { min-width: 0; }

.cat-section { margin-bottom: 20px; }
.cat-section:last-child { margin-bottom: 0; }
.cat-section-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 0;
    margin-bottom: 6px;
}

.competition-tile {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 64px 64px 20px;
    gap: 14px;
    align-items: center;
    padding: 8px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
    margin-bottom: 4px;
    cursor: pointer;
    transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.competition-tile:hover {
    border-color: var(--pitch-500);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}
.competition-tile .crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--bg-surface-2);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.competition-tile .crest img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.crest-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-4);
    font-size: 18px;
}
.competition-tile .info-box1 {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.2;
}
.competition-tile .name {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.competition-tile .type {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-brand);
    font-weight: 500;
}
.inline-flag { width: 12px; height: 8px; border-radius: 1px; }

.competition-tile .info-box2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.1;
}
.competition-tile .info-box2 h4 {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.competition-tile .info-box2 .stat-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    text-transform: uppercase;
    white-space: nowrap;
}
.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    color: var(--fg-4);
    font-size: 16px;
    line-height: 1;
    transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.competition-tile:hover .view-btn { color: var(--pitch-600); transform: translateX(2px); }

/* Sidebar widgets */
.sidebar-column { display: flex; flex-direction: column; gap: 16px; }

.widget-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    border-bottom: 1px solid var(--border-subtle);
}
.widget-icon {
    width: 16px;
    height: 16px;
    color: var(--fg-brand);
    flex-shrink: 0;
}
.widget-list { list-style: none; padding: 4px 0; }
.widget-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 14px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
}
.widget-row:hover { background: var(--bg-surface-2); }
.widget-badge { display: flex; justify-content: center; }
.widget-photo {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-surface-2);
    overflow: hidden;
}
.widget-photo img { width: 100%; height: 100%; object-fit: cover; }
.widget-item { display: flex; flex-direction: column; min-width: 0; }
.widget-player-link {
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widget-player-link:hover { color: var(--fg-brand); text-decoration: none; }
.widget-reason {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
    letter-spacing: 0.02em;
}

/* ============================================================
   GROUP TABS (shared by standings + fixtures)
   ============================================================ */
.group-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 12px;
    padding: 3px;
    background: var(--bg-surface-2);
    border-radius: 8px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.group-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    background: transparent;
    color: var(--fg-2);
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
    cursor: pointer;
}
.group-tab:hover { background: var(--bg-surface); color: var(--fg-1); }
.group-tab.active {
    background: var(--bg-surface);
    color: var(--fg-1);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}
.group-tab-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
    font-weight: 400;
}

/* ============================================================
   STANDINGS (league hero + table + next matchday + legend)
   ============================================================ */
.lg-two-col {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
}
.lg-aside { position: sticky; top: calc(var(--header-h) + var(--nav-bar-h) + 12px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lg-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.league-hero-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 16px;
    overflow: hidden;
    position: relative;
}
.league-hero-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--pitch-500);
}
.lh-info { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lh-badge {
    width: 44px; height: 44px;
    background: var(--night-900);
    color: var(--pitch-400);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.lh-meta { min-width: 0; }
.lh-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--fg-1);
    margin: 0;
    overflow-wrap: anywhere;
}
.lh-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 3px;
}
.lh-stats { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 2px; border-top: 1px solid var(--border-subtle); }
.lh-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fg-2);
}
.lh-meta-row strong { color: var(--fg-1); font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.lh-meta-row small { color: var(--fg-3); font-size: 11px; }
.lh-label {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.lh-progress-bar {
    flex: 0 0 80px;
    height: 4px;
    background: var(--bg-surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.lh-progress-fill { height: 100%; background: var(--pitch-500); border-radius: 999px; }
.lh-progress-pct { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--fg-1); min-width: 32px; text-align: right; }

.lh-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--bg-surface-2);
    border-radius: 8px;
    margin-top: 10px;
}
.lh-tab {
    flex: 1;
    height: 28px;
    padding: 0 12px;
    color: var(--fg-2);
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    transition: background var(--dur-2) var(--ease-out);
    cursor: pointer;
}
.lh-tab:hover { background: var(--bg-surface); }
.lh-tab--active {
    background: var(--bg-surface);
    color: var(--fg-1);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* Mini standings inside aside */
.lg-mini-standings {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.lg-mini-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
}

/* Next matchday card */
.next-md-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 12px 14px 2px;
    box-shadow: var(--shadow-xs);
}
.next-md-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 8px;
}
.next-md-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.next-md-tbl th {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 4px 6px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border-subtle);
}
.next-md-tbl .next-md-th-h { text-align: right; }
.next-md-tbl .next-md-th-a { text-align: left; }
.next-md-tbl td { padding: 8px 6px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.next-md-tbl tbody tr:last-child td { border-bottom: 0; }
.next-md-tbl tbody tr { transition: background var(--dur-2) var(--ease-out); cursor: pointer; }
.next-md-tbl tbody tr:hover { background: var(--bg-surface-2); }
.next-md-date { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; }
/* Per-side cell: team name above, meta (ppg + form) below as a flex
   row. Using flex gap means ppg and form sit exactly `gap` apart, no
   matter how many form badges the row has — which was the fix for
   the mobile asymmetry the grid approach couldn't reliably handle. */
.next-md-team { max-width: 220px; }
.next-md-team-h { text-align: right; }
.next-md-team-a { text-align: left; }
.next-md-name {
    display: block;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.next-md-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}
.next-md-team-h .next-md-meta { justify-content: flex-end; }
.next-md-team-a .next-md-meta { justify-content: flex-start; }
.next-md-form-inner { display: inline-flex; align-items: center; white-space: nowrap; }
.next-md-score {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.next-md-score-live { color: var(--whistle-600); }
.next-md-score-unconfirmed { color: var(--fg-3); }
.next-md-row-live { background: color-mix(in oklch, var(--whistle-500) 4%, transparent); }
.next-md-vs {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Main standings table */
.data-table-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.data-table-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-subtle);
}
.dt {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.dt thead th {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 8px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-2);
}
.dt thead th.c { text-align: center; }
.dt tbody td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.dt tbody tr { transition: background var(--dur-2) var(--ease-out); cursor: pointer; }
.dt tbody tr:hover { background: var(--bg-surface-2); }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt tr.promo { background: rgba(14, 194, 100, 0.06); }
.dt tr.releg { background: rgba(213, 63, 69, 0.06); }
@supports (background: color-mix(in oklch, red, blue)) {
    .dt tr.promo { background: color-mix(in oklch, var(--pitch-500) 5%, transparent); }
    .dt tr.releg { background: color-mix(in oklch, var(--whistle-500) 5%, transparent); }
}
.dt .team-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dt .team-crest { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.dt .team-link { font-weight: 600; font-size: 14px; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt .st-gf { color: var(--fg-success, var(--pitch-700)); }
.dt .st-ga { color: var(--fg-danger); }
[data-theme="dark"] .dt .st-gf { color: var(--pitch-400); }
.dt .gd-pos { color: var(--pitch-700); font-weight: 600; }
.dt .gd-neg { color: var(--fg-danger); font-weight: 600; }
[data-theme="dark"] .dt .gd-pos { color: var(--pitch-400); }
.dt .pts { font-weight: 700; font-size: 14px; color: var(--fg-1); }
.dt .form-cell { white-space: nowrap; }

/* Zone legend */
.zone-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 16px;
    background: var(--bg-surface-2);
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-2);
}
.zone-legend small { color: var(--fg-3); margin-left: 4px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.promo-dot { background: var(--pitch-500); }
.releg-dot { background: var(--whistle-500); }

/* Fixtures sidebar standings */
/* Mini standings (aside on fixtures / standings). Table-layout:fixed
   with explicit column widths — the earlier auto layout let a long
   team name blow the cell past 170px, shoving the Pts column off
   the right edge of the 300px aside. First cell gets extra left
   padding so the 4px row-zone color stripe has clearance before the
   position circle. */
.fix-standings-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}
.fix-standings-tbl th {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 4px 4px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}
.fix-standings-tbl th.c { text-align: center; }
.fix-standings-tbl th:nth-child(1) { width: 36px; }       /* #  */
.fix-standings-tbl th:nth-child(3) { width: 32px; }       /* PX */
.fix-standings-tbl th:nth-child(4) { width: 40px; }       /* DG */
.fix-standings-tbl th:nth-child(5) { width: 36px; }       /* Pts */
.fix-standings-tbl td { padding: 6px 4px; border-bottom: 1px solid var(--border-subtle); }
.fix-standings-tbl td:first-child, .fix-standings-tbl th:first-child { padding-left: 10px; }
.fix-standings-tbl tr { transition: background var(--dur-2) var(--ease-out); cursor: pointer; }
.fix-standings-tbl tr:hover, .fix-standings-tbl tr.fx-row-hl { background: var(--bg-surface-2); }
.fix-standings-tbl tbody tr:last-child td { border-bottom: 0; }
.fix-team-name { font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.fix-pts { font-weight: 700; color: var(--fg-1); }
.fix-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-2);
    border-radius: 50%;
    background: var(--bg-surface-2);
}
.rank-promo { background: rgba(14, 194, 100, 0.2);  color: #1a7047; }
.rank-releg { background: rgba(213, 63, 69, 0.18); color: #8e2428; }
@supports (background: color-mix(in oklch, red, blue)) {
    .rank-promo { background: color-mix(in oklch, var(--pitch-500) 20%, transparent); color: var(--pitch-700); }
    .rank-releg { background: color-mix(in oklch, var(--whistle-500) 18%, transparent); color: var(--whistle-700); }
}

/* ============================================================
   FIXTURES (matchday groups, fixture rows)
   ============================================================ */
.fixtures-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
}
.fixtures-heading {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.show-more-btn {
    position: absolute;
    top: 14px; right: 18px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    background: var(--bg-surface-2);
    color: var(--fg-2);
}
.show-more-btn:hover { background: var(--bg-surface-3); color: var(--fg-1); }
#fixtures-list { padding: 4px 0 12px; }

.matchday-group { padding: 8px 20px; }
/* Matchday section header — these group fixtures by date, so they
   are genuine section headers, not eyebrow labels. The old 10px
   mono-uppercase treatment read as a quiet caption, not a header,
   and flattened the hierarchy between "new date" and "individual
   fixture row". Promoted to sans 17px weight 700 with tighter
   tracking — proper section-header register, same as the other
   named section headers throughout the app. Border + breathing
   room above preserves the date-group visual separation. */
.matchday-date {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    padding: 20px 0 12px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 8px;
}
.matchday-group:first-child .matchday-date { border-top: 0; padding-top: 6px; margin-top: 0; }

.fixture-header {
    display: grid;
    grid-template-columns: 120px 1fr 36px 80px 36px 1fr;
    gap: 12px;
    padding: 0 10px 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-4);
    border-bottom: 1px solid var(--border-subtle);
}
.fh-col { display: block; }
.fh-home, .fh-form:first-of-type { text-align: right; }
.fh-form:last-of-type, .fh-away { text-align: left; }
.fh-score { text-align: center; }

.fixture-row {
    display: grid;
    grid-template-columns: 120px 1fr 36px 80px 36px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 10px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 14px;
    transition: background var(--dur-2) var(--ease-out);
    cursor: pointer;
}
.fixture-row:hover { background: var(--bg-surface-2); }
.fixture-row:last-child { border-bottom: 0; }
.fixture-row--completed { }
.fixture-row--live {
    background: color-mix(in oklch, var(--whistle-500) 5%, transparent);
    box-shadow: inset 3px 0 0 0 var(--whistle-500);
}
.fixture-datetime {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.fixture-home { font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixture-away { font-weight: 500; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixture-form { text-align: center; }
.fixture-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--fg-1);
}
.score-home, .score-away { min-width: 14px; text-align: center; }
.score-ft {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--fg-4);
    padding: 0 2px;
}
.score-ft-live { color: var(--whistle-500); }
.score-pen {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--fg-3);
    margin-left: 4px;
}
.fixture-score-live { color: var(--whistle-600); }
.fixture-score-unconfirmed { color: var(--fg-3); }
.fixture-pending {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--fg-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Form badge on fixtures (PPG-colored) */
.form-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 20px;
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    border-radius: 4px;
}
.form-badge--empty { background: transparent; color: var(--fg-4); }

/* ============================================================
   STATS DASHBOARD SECTIONS (gs-*)
   ============================================================ */
.gs-section-header { margin: 20px 0 10px; }
.gs-section-header h2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg-1);
}
.gs-player-grid, .gs-club-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}
.gs-pcard {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.gs-pc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px 8px;
    color: var(--fg-1);
    border-bottom: 1px solid var(--border-subtle);
}
.gs-pc-header .widget-icon { color: var(--fg-brand); }
.gs-pc-body { padding: 2px 0 4px; }

/* Row redesign. The old layout put the bar as a full-height
   absolute-positioned background tint behind the name/value, which
   forced the 1fr name cell to share space with the value and
   ellipsize at ~20 characters. Long federation names (first-last
   with accents and middle names) lost most of the surname. New
   layout: name gets the full row width, value sits on the same
   visual line flush-right, and the bar moved to a thin 3px track
   pinned to the bottom edge — data-viz with its own vertical lane
   rather than competing for text real estate. */
.gs-prow {
    position: relative;
    display: grid;
    grid-template-columns: 20px 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 5px 14px 10px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
}
.gs-prow:hover { background: var(--bg-surface-2); }
.gs-pbar-track {
    position: absolute;
    left: 14px; right: 14px;
    bottom: 3px;
    height: 3px;
    background: var(--bg-surface-2);
    border-radius: 999px;
    overflow: hidden;
    pointer-events: none;
}
.gs-pbar-fill {
    display: block;
    height: 100%;
    background: var(--pitch-500);
    border-radius: 999px;
    transition: width var(--dur-3) var(--ease-out);
}
.gs-prow:hover .gs-pbar-track { background: var(--bg-surface-3); }
.gs-prank {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
    font-weight: 600;
    text-align: right;
}
.gs-pavatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--bg-surface-2);
    overflow: hidden;
}
.gs-pavatar img { width: 100%; height: 100%; object-fit: cover; }
.gs-pcrest {
    width: 22px; height: 22px;
    object-fit: contain;
}
.gs-pname {
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.005em;
}
.gs-pval {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}
.gs-pen-extra { color: var(--sunrise-700); font-weight: 500; font-family: var(--font-mono); font-size: 10px; }
.gs-sample { color: var(--fg-3); font-weight: 400; font-family: var(--font-mono); font-size: 10px; }
[data-theme="dark"] .gs-pen-extra { color: var(--fg-warning); }

/* ============================================================
   CALENDAR DASHBOARD (mdb-*)
   ============================================================ */
.mdb-page { display: flex; flex-direction: column; gap: 16px; }

.ps-hero {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 24px 24px 20px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.ps-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--pitch-500);
}
.ps-hero-inner { max-width: 900px; }
.ps-hero-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--fg-1);
    margin: 0;
}
.ps-hero-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-3);
    letter-spacing: 0.04em;
    margin-top: 6px;
}

.ps-filters {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ps-filters-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ps-filters-search { gap: 10px; }
/* Selectors inside a filter row stretch to fill the row evenly,
   so the six-select row below the search input spans the same
   width as the input itself instead of sitting 160px-wide with
   dead space on the right. flex-basis is set to 0 so intrinsic
   option-count widths don't pull the track uneven. */
.ps-filters-row > .ss {
    flex: 1 1 0;
    min-width: 120px;
}
.ps-input {
    flex: 1;
    min-width: 200px;
    height: 36px;
    padding: 0 14px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 14px;
    color: var(--fg-1);
    transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.ps-input:focus { outline: none; border-color: var(--pitch-500); background: var(--bg-surface); box-shadow: var(--shadow-focus); }
.ps-input::placeholder { color: var(--fg-3); }

.mdb-week-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    background: var(--bg-surface-2);
    border-radius: 8px;
}
.mdb-week-btn {
    width: 28px; height: 28px;
    color: var(--fg-2);
    font-size: 18px;
    border-radius: 6px;
    transition: background var(--dur-2) var(--ease-out);
}
.mdb-week-btn:hover { background: var(--bg-surface); color: var(--fg-1); }
.mdb-week-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-1);
    padding: 0 10px;
    white-space: nowrap;
}
.mdb-today-btn {
    height: 28px;
    padding: 0 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pitch-700);
    border-radius: 6px;
    transition: background var(--dur-2) var(--ease-out);
}
[data-theme="dark"] .mdb-today-btn { color: var(--pitch-400); }
.mdb-today-btn:hover { background: color-mix(in oklch, var(--pitch-500) 14%, transparent); }

.mdb-date-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-surface-2);
    border-radius: 10px;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
}
.mdb-date-tabs::-webkit-scrollbar { display: none; }
.mdb-date-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-2);
    border-radius: 7px;
    white-space: nowrap;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.mdb-date-tab:hover { background: var(--bg-surface); color: var(--fg-1); text-decoration: none; }
.mdb-date-tab.active {
    background: var(--bg-surface);
    color: var(--fg-1);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.mdb-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--pitch-500);
    color: var(--night-950);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
}

.ps-result-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px;
}
.ps-result-count {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--fg-2);
}
.ps-fuzzy-hint { color: var(--fg-3); font-size: 11px; }

/* Match list */
.mdb-match-table {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.mdb-match-list-grid { padding: 4px 0; }

.mdb-match-row {
    display: grid;
    grid-template-columns: 30px 44px minmax(0, 1fr) 80px minmax(0, 1fr) minmax(160px, 220px);
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
}
.mdb-match-row:hover { background: var(--bg-surface-2); }
.mdb-match-row:last-child { border-bottom: 0; }
.mdb-match--live {
    background: color-mix(in oklch, var(--whistle-500) 4%, transparent);
    box-shadow: inset 3px 0 0 0 var(--whistle-500);
}
.mdb-day {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.mdb-time {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: 0;
}
.mdb-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mdb-team--home { justify-content: flex-end; }
.mdb-team--home .mdb-team-name { text-align: right; }
.mdb-team--away .mdb-team-name { text-align: left; }
.mdb-team-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.mdb-crest { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.mdb-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-1);
}
.mdb-score--live { color: var(--whistle-600); }
.mdb-score--unconfirmed { color: var(--fg-3); }
.mdb-score--pending {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--fg-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mdb-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
    line-height: 1.2;
}
/* Both lines sit in the quiet register (fg-3 / fg-4). Differentiation
   is typographic, not chromatic — comp reads as a mono eyebrow
   (uppercase, wide-tracked, slightly bolder), venue reads as body
   copy (sentence-case, normal tracking). Avoids the dark-bold comp
   label competing with the scoreline and team names next to it. */
.mdb-league {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mdb-venue {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0;
    color: var(--fg-4);
    font-weight: 400;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
}
.mdb-load-more { text-align: center; padding: 16px 0; }
.mdb-load-more a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--fg-2);
    font-size: 13px;
    font-weight: 500;
}
.mdb-load-more a:hover { background: var(--bg-surface-2); text-decoration: none; }

/* ============================================================
   PLAYER SEARCH TABLE (ps-*)
   ============================================================ */
.ps-export-btn {
    gap: 8px;
    background: var(--bg-surface-2);
    color: var(--fg-2);
    border: 1px solid var(--border-default);
}
.ps-export-btn:hover { background: var(--bg-surface-3); color: var(--fg-1); }
.ps-export-icon { font-family: var(--font-mono); font-size: 14px; }

.ps-table-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: auto;
}
.ps-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 1000px;
}
.ps-table thead th {
    position: sticky;
    top: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 12px 10px;
    text-align: left;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    white-space: nowrap;
    z-index: 1;
}
.ps-table thead th.ps-th-c { text-align: center; }
.ps-table thead th.ps-th-n { text-align: right; }
.ps-table thead th:hover { color: var(--fg-1); }
.ps-table tbody td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.ps-table tbody tr { transition: background var(--dur-2) var(--ease-out); cursor: pointer; }
.ps-table tbody tr:hover { background: var(--bg-surface-2); }
.ps-table tbody tr:last-child td { border-bottom: 0; }
.ps-td-c { text-align: center; }
.ps-td-n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ps-td-name { min-width: 200px; }
.ps-pname { font-weight: 600; color: var(--fg-1); }
.ps-td-team { min-width: 220px; max-width: 320px; }
/* Team cell: crest on the left, name + competition list stacked
   to its right as a two-line info block. Flex layout keeps the
   crest aligned with the first line regardless of name length,
   and both lines ellipsize cleanly when the column is tight
   instead of wrapping the badge to its own row. */
.ps-team-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ps-team-crest {
    width: 20px; height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}
.ps-team-lines {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.25;
}
.ps-team-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps-team-comp {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps-overflow {
    padding: 16px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    background: var(--bg-surface-2);
}

/* ============================================================
   SEARCHABLE SELECT (ss)
   ============================================================ */
.ss {
    position: relative;
    min-width: 160px;
}
.ss-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 13px;
    color: var(--fg-2);
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.ss-display:hover { background: var(--bg-surface-3); border-color: var(--border-default); }
.ss-active .ss-display {
    background: var(--bg-surface);
    border-color: var(--pitch-500);
    color: var(--fg-1);
    font-weight: 600;
}
.ss-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-arrow { color: var(--fg-3); font-size: 12px; transition: transform var(--dur-2) var(--ease-out); }
.ss-open .ss-arrow { transform: rotate(180deg); }

.ss-dropdown {
    position: absolute;
    top: calc(100% + 4px); left: 0;
    min-width: 240px;
    max-width: 360px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 90;
    max-height: 360px;
    overflow: hidden;
    flex-direction: column;
}
.ss-open .ss-dropdown { display: flex; }
.ss-search {
    margin: 8px;
    height: 32px;
    padding: 0 10px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-size: 13px;
    color: var(--fg-1);
}
.ss-search:focus { outline: none; border-color: var(--pitch-500); }
.ss-options { overflow: auto; padding-bottom: 6px; }
.ss-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--fg-1);
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
}
.ss-option:hover { background: var(--bg-surface-2); }
.ss-option-clear { color: var(--fg-3); font-style: italic; font-size: 12px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.ss-check {
    display: inline-block;
    width: 14px; height: 14px;
    border: 1.5px solid var(--border-strong);
    border-radius: 3px;
    flex-shrink: 0;
    transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
    position: relative;
}
.ss-selected .ss-check, .ss-option.ss-selected .ss-check, .ss-group-header.ss-selected .ss-check {
    background: var(--pitch-500);
    border-color: var(--pitch-500);
}
.ss-selected .ss-check::after, .ss-option.ss-selected .ss-check::after, .ss-group-header.ss-selected .ss-check::after {
    content: '';
    position: absolute;
    left: 3px; top: 0;
    width: 4px; height: 8px;
    border-right: 1.75px solid var(--night-950);
    border-bottom: 1.75px solid var(--night-950);
    transform: rotate(45deg);
}
.ss-section-header {
    padding: 8px 12px 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    font-weight: 600;
}
.ss-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    background: var(--bg-surface-2);
    color: var(--fg-1);
}
.ss-group-header:hover { background: var(--bg-surface-3); }
.ss-group-child { padding-left: 24px; }
.ss-option-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-3);
    letter-spacing: 0.04em;
    margin-left: auto;
}

/* ============================================================
   TEAM ROSTER (tp-*)
   ============================================================ */
.tp-hero {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
}
.tp-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--pitch-500);
}
.tp-hero-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    padding: 24px;
    align-items: start;
}
.tp-hero-left { display: flex; gap: 20px; align-items: center; min-width: 0; }
.tp-hero-crest {
    width: 72px; height: 72px;
    background: var(--bg-surface-2);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
    flex-shrink: 0;
}
.tp-hero-crest img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tp-hero-info { min-width: 0; }
.tp-hero-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--fg-1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.tp-hero-light, .pp-hero-light {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.tp-hero-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-2);
    letter-spacing: 0.04em;
    margin-top: 6px;
}
.tp-hero-sub a { color: var(--fg-link); }
.tp-hero-selectors { margin-top: 12px; }
.tp-comp-select {
    height: 32px;
    padding: 0 10px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    font-size: 13px;
    color: var(--fg-1);
    max-width: 100%;
}
.tp-comp-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
}
.tp-hero-right { min-width: 280px; }
.tp-upcoming {
    background: var(--bg-surface-2);
    border-radius: 10px;
    padding: 12px 14px;
}
.tp-upcoming-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 8px;
}
.tp-upcoming-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--fg-1);
    font-weight: 500;
    border-bottom: 1px solid var(--border-subtle);
}
.tp-upcoming-link:last-child { border-bottom: 0; }
.tp-upcoming-link:hover { color: var(--fg-brand); text-decoration: none; }
.tp-upcoming-date {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
    font-weight: 400;
}
.tp-upcoming-comp {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
}
.tp-venue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    flex-shrink: 0;
}
.tp-venue-home { background: var(--pitch-500); color: var(--night-950); }
.tp-venue-away { background: var(--bg-surface-3); color: var(--fg-2); }

/* Tabs */
.tp-tabs, .pp-tabs, .team-tabs {
    display: flex;
    gap: 2px;
    padding: 0;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tp-tabs::-webkit-scrollbar, .pp-tabs::-webkit-scrollbar { display: none; }
.tp-tab, .pp-tab, .team-tab {
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    color: var(--fg-2);
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.tp-tab:hover, .pp-tab:hover, .team-tab:hover { color: var(--fg-1); }
.tp-tab.active, .pp-tab.active, .team-tab.active {
    color: var(--fg-1);
    border-bottom-color: var(--pitch-500);
    font-weight: 600;
}
.tp-tab-panel, .pp-tab-panel { display: none; }
/* Flex-column with a gap so stacked .tp-card / .pp-card sections
   inside a tab panel have breathing room between them. The parent
   .tp-main also uses gap: 16px but that only spaces its direct
   children (the tab panels themselves), not the cards inside. */
.tp-tab-panel.active, .pp-tab-panel.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Layout */
.tp-layout, .pp-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}
.tp-main, .pp-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tp-sidebar, .pp-sidebar { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: calc(var(--header-h) + var(--nav-bar-h) + 16px); }

/* Stat cards on roster */
.tp-stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.tp-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tp-ppg-card { grid-row: span 1; }
.tp-ppg-top { display: flex; align-items: center; gap: 12px; }
.tp-stat-big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    border-radius: 8px;
    letter-spacing: 0;
}
.tp-stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.tp-stat-num {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.tp-stat-suffix {
    font-size: 12px;
    color: var(--fg-2);
    letter-spacing: -0.01em;
}
.tp-light { color: var(--fg-3); font-weight: 400; }
.tp-form-row { display: flex; gap: 2px; margin-top: 4px; }
.tp-form-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    border-radius: 5px;
}
.tp-form-w { background: var(--pitch-600); }
.tp-form-d { background: var(--sunrise-500); color: var(--night-950); }
.tp-form-l { background: var(--whistle-500); }

.tp-ppg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
}
.tp-ppg-good { background: var(--pitch-500); color: var(--night-950); }
.tp-ppg-avg { background: var(--sunrise-500); color: var(--night-950); }
.tp-ppg-poor { background: var(--whistle-500); color: #fff; }

.tp-cell-green { background: var(--tint-green); color: var(--pitch-700); font-weight: 600; }
.tp-cell-yellow { background: var(--tint-yellow); color: var(--sunrise-700); font-weight: 600; }
.tp-cell-red { background: var(--tint-red); color: var(--whistle-700); font-weight: 600; }
[data-theme="dark"] .tp-cell-green { color: var(--pitch-400); }
[data-theme="dark"] .tp-cell-yellow { color: var(--fg-warning); }
[data-theme="dark"] .tp-cell-red { color: var(--fg-danger); }

/* Cards */
.tp-card, .pp-card, .mp-card, .ref-card, .pp-analysis {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow-xs);
}
.tp-card-title, .pp-card-title, .mp-card-title, .ref-card-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tp-card-icon { display: inline-block; width: 14px; height: 18px; border-radius: 2px; }
.tp-card-yellow { background: var(--sunrise-500); }
.tp-card-red { background: var(--whistle-500); }

.tp-season-tbl, .tp-pct-tbl, .tp-impact-tbl, .tp-ha-tbl, .mp-ss-tbl, .mp-standings-tbl, .pp-stats-tbl, .pp-detail-tbl, .tp-league-tbl, .gbm-table, .ref-comp-tbl, .ref-matches-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tp-season-tbl th, .tp-pct-tbl th, .tp-impact-tbl th, .tp-ha-tbl th, .mp-ss-tbl th, .mp-standings-tbl th, .pp-stats-tbl th, .pp-detail-tbl th, .tp-league-tbl th, .gbm-table th, .ref-comp-tbl th, .ref-matches-tbl th {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-2);
    white-space: nowrap;
}
.tp-season-tbl th:first-child, .tp-pct-tbl th:first-child, .pp-stats-tbl th.pp-th-left, .pp-detail-tbl th.pp-th-left, .tp-impact-tbl th:first-child, .ref-matches-tbl th:first-child, .ref-comp-tbl th:first-child { text-align: left; }
.tp-season-tbl td, .tp-pct-tbl td, .tp-impact-tbl td, .tp-ha-tbl td, .mp-ss-tbl td, .mp-standings-tbl td, .pp-stats-tbl td, .pp-detail-tbl td, .tp-league-tbl td, .gbm-table td, .ref-comp-tbl td, .ref-matches-tbl td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: center;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.tp-row-label, .pp-td-left {
    text-align: left !important;
    font-family: var(--font-sans) !important;
    font-weight: 500;
    color: var(--fg-1);
}
.tp-overall-row td, .pp-total-row td {
    background: var(--bg-surface-2);
    font-weight: 700;
}
.tp-text-green { color: var(--pitch-700); }
.tp-text-orange { color: var(--sunrise-700); }
.tp-text-red { color: var(--whistle-700); }
[data-theme="dark"] .tp-text-green { color: var(--pitch-400); }
[data-theme="dark"] .tp-text-orange { color: var(--fg-warning); }
[data-theme="dark"] .tp-text-red { color: var(--fg-danger); }
.tp-stat-meta {
    padding: 12px 0 0;
    font-size: 12px;
    color: var(--fg-3);
    font-family: var(--font-mono);
}

/* Goals hero inside roster cards */
.tp-goals-hero {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0 16px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 12px;
}
.tp-goals-big {
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 700;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.tp-goals-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-3);
}

/* Sub-tabs inside team page */
.tp-subtabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-surface-2);
    border-radius: 8px;
    margin-bottom: 16px;
}
.tp-subtab {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-2);
    border-radius: 5px;
    transition: background var(--dur-2) var(--ease-out);
    cursor: pointer;
}
.tp-subtab.active { background: var(--bg-surface); color: var(--fg-1); font-weight: 600; box-shadow: var(--shadow-xs); }
.tp-subtab-panel { display: none; }
.tp-subtab-panel.active { display: block; }

.tp-timing-block { margin-bottom: 20px; }
.tp-timing-block h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-1);
    margin-bottom: 12px;
}
.tp-bar-chart {
    display: flex;
    align-items: stretch;
    gap: 6px;
    height: 140px;
}
/* Columns stretch to the chart's full height; their content
   packs to the bottom so the bar grows upward from the x-axis,
   percent label floats just above the bar, and the minute-range
   label sits at the bottom. The earlier align-items:flex-end on
   the chart left columns at intrinsic height, which meant the
   bars' height:X% had no definite parent height to resolve
   against — every bar collapsed to its min-height:3px. */
.tp-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 100%;
}
.tp-bar-pct {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-2);
    font-weight: 600;
    flex-shrink: 0;
}
.tp-bar {
    width: 100%;
    max-width: 32px;
    border-radius: 3px 3px 0 0;
    min-height: 3px;
    flex-shrink: 0;
}
.tp-bar-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--fg-3);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.tp-cards-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px 0;
}
.tp-cards-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px;
    background: var(--bg-surface-2);
    border-radius: 10px;
}
.tp-cards-big {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--fg-1);
}
.tp-cards-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
}

/* Impact table */
.tp-impact-desc, .pp-analysis-text, .gbm-sub, .gbm-note {
    font-size: 13px;
    color: var(--fg-2);
    margin-bottom: 12px;
    line-height: 1.5;
}
.tp-impact-tbl td { text-align: center; }
.tp-impact-tbl td:first-child { text-align: left; }
.tp-impact-bar-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 120px;
    height: 20px;
    background: var(--bg-surface-2);
    border-radius: 4px;
    overflow: hidden;
}
.tp-impact-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--pitch-500);
}
.tp-impact-pct {
    position: relative;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--fg-1);
    line-height: 20px;
    padding: 0 6px;
}

/* Fixtures inside team tab */
.tp-fix-group { margin-bottom: 18px; }
/* Team-page fixtures jornada header — same promotion as .matchday-date
   above. Kept as a tinted bar (bg-surface-2) to visually anchor each
   jornada group of fixture rows. */
.tp-fix-jornada {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    padding: 12px 16px;
    background: var(--bg-surface-2);
    border-radius: 8px 8px 0 0;
}
.tp-fix-row {
    display: grid;
    grid-template-columns: 80px 1fr 90px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-top: 0;
    transition: background var(--dur-2) var(--ease-out);
}
.tp-fix-row:last-child { border-radius: 0 0 8px 8px; }
.tp-fix-row:hover { background: var(--bg-surface-2); }
.tp-fix-date { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.tp-fix-team { font-size: 13px; font-weight: 500; }
.tp-fix-home { text-align: right; }
.tp-fix-score {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 4px 10px;
    border-radius: 6px;
}
.tp-fix-win { background: var(--tint-green); color: var(--pitch-700); }
.tp-fix-draw { background: var(--tint-yellow); color: var(--sunrise-700); }
.tp-fix-loss { background: var(--tint-red); color: var(--whistle-700); }
.tp-fix-future { background: var(--bg-surface-2); color: var(--fg-3); font-size: 11px; font-weight: 500; }
[data-theme="dark"] .tp-fix-win { color: var(--pitch-400); }
.tp-fix-timeline {
    grid-column: 1 / -1;
    padding: 6px 4px 2px;
}
.tp-fix-bar {
    position: relative;
    height: 6px;
    background: var(--bg-surface-2);
    border-radius: 999px;
}
.tp-fix-ht, .tp-fix-ft {
    position: absolute;
    top: -16px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--fg-4);
    letter-spacing: 0.04em;
}
.tp-fix-ht { left: 49%; }
.tp-fix-ft { right: 0; }
.tp-ball-scored, .tp-ball-conceded {
    position: absolute;
    top: -3px;
    width: 12px; height: 12px;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: var(--shadow-sm);
}
.tp-ball-scored { background: var(--pitch-500); }
.tp-ball-conceded { background: var(--whistle-500); }
.tp-ball-pen { box-shadow: 0 0 0 2px var(--sunrise-500); }
.tp-ball-og { box-shadow: 0 0 0 2px var(--fg-4); }

/* Groups combinations */
.tp-grp-tabs, .gbm-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-surface-2);
    border-radius: 8px;
    margin-bottom: 14px;
}
.tp-grp-tab, .gbm-tab {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-2);
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
}
.tp-grp-tab.active, .gbm-tab.active { background: var(--bg-surface); color: var(--fg-1); font-weight: 600; box-shadow: var(--shadow-xs); }
.tp-grp-grid { display: flex; flex-direction: column; gap: 10px; }
.tp-grp-header-row, .tp-grp-item-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.tp-grp-card-head {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: 8px;
}
.tp-grp-item {
    background: var(--bg-surface-2);
    border-radius: 8px;
    padding: 10px 12px;
    min-height: 76px;
}
.tp-grp-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.tp-grp-players {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tp-grp-player { font-size: 12px; font-weight: 500; color: var(--fg-1); }
.tp-grp-pct-big { font-family: var(--font-mono); font-size: 22px; font-weight: 700; }
.tp-grp-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tp-grp-stat { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.04em; }
.tp-grp-bar-wrap { flex: 1; height: 4px; background: var(--bg-surface-3); border-radius: 999px; overflow: hidden; }
.tp-grp-bar { height: 100%; border-radius: 999px; }
.tp-grp-panel { margin-top: 10px; }

/* Home/Away table */
.tp-ha-cell {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: inherit;
}
.tp-ha-win { background: var(--tint-green); color: var(--pitch-700); }
.tp-ha-draw { background: var(--tint-yellow); color: var(--sunrise-700); }
.tp-ha-loss { background: var(--tint-red); color: var(--whistle-700); }
[data-theme="dark"] .tp-ha-win { color: var(--pitch-400); }

/* Sidebar card */
.tp-sidebar-card, .pp-sidebar-card, .mp-sidebar-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.tp-sidebar-title, .pp-sidebar-title, .mp-sidebar-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-subtle);
}
.tp-league-tbl td { font-size: 12px; padding: 7px 6px; }
.tp-league-tbl th { padding: 8px 6px; }
.tp-league-tbl tr { cursor: pointer; transition: background var(--dur-2) var(--ease-out); }
.tp-league-tbl tr:hover { background: var(--bg-surface-2); }
.tp-st-name { text-align: left !important; font-family: var(--font-sans) !important; font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    background: var(--bg-surface-2);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    color: var(--fg-2);
}
.tp-rk-promo { background: rgba(14, 194, 100, 0.2);  color: #1a7047; }
.tp-rk-releg { background: rgba(213, 63, 69, 0.18); color: #8e2428; }
@supports (background: color-mix(in oklch, red, blue)) {
    .tp-rk-promo { background: color-mix(in oklch, var(--pitch-500) 20%, transparent); color: var(--pitch-700); }
    .tp-rk-releg { background: color-mix(in oklch, var(--whistle-500) 18%, transparent); color: var(--whistle-700); }
}
.tp-hl-row td { background: color-mix(in oklch, var(--pitch-500) 10%, transparent); font-weight: 700; }
.tp-gf { color: var(--pitch-700); }
.tp-ga { color: var(--whistle-700); }
[data-theme="dark"] .tp-gf { color: var(--pitch-400); }
[data-theme="dark"] .tp-ga { color: var(--fg-danger); }
.tp-gd-pos { color: var(--pitch-700); font-weight: 600; }
.tp-gd-neg { color: var(--whistle-700); font-weight: 600; }

/* Squad table */
.squad-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.squad-card-title {
    font-size: 14px;
    font-weight: 700;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
}
.squad-group-header {
    display: grid;
    grid-template-columns: 50px 2fr 60px 70px 70px 100px;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-surface-2);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    border-bottom: 1px solid var(--border-subtle);
}
.sg-dorsal { text-align: center; }
.sg-name { text-align: left; }
.sg-col, .sg-col-wide { text-align: center; }
/* Headers carry their own arrow suffix; prevent label + arrow
   from wrapping to a second row when a narrow column can't
   hold the full unicode arrow glyph on one line. */
.sg-dorsal, .sg-name, .sg-col, .sg-col-wide { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-sortable { cursor: pointer; transition: color var(--dur-2) var(--ease-out); }
.sg-sortable:hover { color: var(--fg-1); }
.squad-row {
    display: grid;
    grid-template-columns: 50px 2fr 60px 70px 70px 100px;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
}
/* Teammates variant: no age column, so the 6-col grid would
   leave a 100px gap on the right of every row. Modifier class
   gives it its own 5-col template. */
.squad-group-header.squad-tm, .squad-row.squad-tm {
    grid-template-columns: 50px 2fr 70px 70px 100px;
}
.squad-row:hover { background: var(--bg-surface-2); }
.squad-row:last-child { border-bottom: 0; }
.sq-dorsal {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--fg-2);
    text-align: center;
}
.sq-name {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-weight: 500;
    min-width: 0;
}
.sq-stat, .sq-stat-wide {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--fg-1);
    font-size: 13px;
}
.sq-hl { background: color-mix(in oklch, var(--pitch-500) 8%, transparent); font-weight: 700; }

.team-stats-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 20px 0 12px;
}
.bar-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}
.bar-chart-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.bar-chart-card-title {
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px 8px;
    color: var(--fg-1);
    border-bottom: 1px solid var(--border-subtle);
}
.bar-chart { padding: 6px 0; }
.bar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    margin: 4px 12px;
    background: color-mix(in oklch, var(--pitch-500) 12%, transparent);
    border-left: 3px solid var(--pitch-500);
    border-radius: 4px;
    font-size: 13px;
    color: var(--fg-1);
    font-weight: 500;
    min-width: 100px;
}
.bar-item:hover { background: color-mix(in oklch, var(--pitch-500) 20%, transparent); text-decoration: none; }
.bar-item strong { font-family: var(--font-mono); font-weight: 700; color: var(--fg-1); }

/* ============================================================
   PLAYER PAGE (pp-*)
   ============================================================ */
.pp-hero {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
}
.pp-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--pitch-500);
}
.pp-hero-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    padding: 24px;
    align-items: center;
}
.pp-hero-photo {
    position: relative;
    width: 100px; height: 100px;
    background: var(--bg-surface-2);
    border-radius: 14px;
    flex-shrink: 0;
    /* No overflow:hidden — the dorsal badge overhangs the
       bottom-right corner by design. The image itself carries
       the border-radius so it still reads as a rounded card. */
}
.pp-hero-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 14px;
}
.pp-no-photo { background: var(--bg-surface-3); }
.pp-dorsal {
    position: absolute;
    right: -8px; bottom: -8px;
    min-width: 36px; height: 36px;
    padding: 0 8px;
    background: var(--pitch-500);
    color: var(--night-950);
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.02em;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md);
}
.pp-dorsal-gk { background: var(--sunrise-500); color: var(--night-950); }
.pp-hero-info { min-width: 0; }
.pp-hero-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--fg-1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.pp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--fg-2);
}
.pp-hero-meta strong { color: var(--fg-1); }
.pp-gk-indicator {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sunrise-700);
    font-weight: 600;
    padding: 3px 8px;
    background: var(--sunrise-100);
    border-radius: 4px;
}
[data-theme="dark"] .pp-gk-indicator { background: color-mix(in oklch, var(--sunrise-500) 22%, transparent); color: var(--fg-warning); }
.pp-stale {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg-surface-2);
    color: var(--fg-3);
}
.pp-stale-warn { background: var(--sunrise-100); color: var(--sunrise-700); }
.pp-stale-danger { background: var(--whistle-100); color: var(--whistle-700); }
.pp-last-match {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
}

/* p90 grid cards */
.pp-p90-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.pp-p90-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
/* P90 card icons — Lucide SVGs via icon() helper. Default tint
   is pitch-green (--fg-brand) so each stat card leads with a
   brand accent. Yellow/red variants override for booking/send-
   off cards so the card-color reads as the card-color. */
.pp-p90-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--fg-brand);
}
.pp-p90-icon svg { color: inherit; width: 18px; height: 18px; }
/* Card chip sized for the p90-card icon slot — same card-shape
   aspect as the table-header chip (10×14 → 14×20 scaled) but
   sitting at the larger 18px icon scale. The filled-rect Lucide
   "card" SVG read as a heavy blob at this size; a properly
   proportioned rounded rect reads instantly as a football card. */
.pp-card-chip {
    display: inline-block;
    width: 14px;
    height: 20px;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.15);
}
.pp-card-chip-yellow { background: var(--sunrise-500); }
.pp-card-chip-red { background: var(--whistle-500); }

/* Inline card-badge for "tarjeta cada N minutos" in the
   analysis box. Same look as the match-page card markers but
   sized for body text. */
.pp-card-badge-inline {
    display: inline-block;
    width: 10px; height: 14px;
    border-radius: 2px;
    background: var(--sunrise-500);
    vertical-align: -2px;
    margin-right: 4px;
}
.pp-p90-val {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--fg-1);
    letter-spacing: -0.01em;
}
.pp-p90-val small { font-size: 13px; font-weight: 500; color: var(--fg-3); margin-left: 2px; }
.pp-p90-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.pp-p90-ctx {
    font-size: 11px;
    color: var(--fg-3);
    margin-top: 2px;
}
.pp-p90-ind {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 3px;
}
.pp-ind-green { background: var(--pitch-500); }
.pp-ind-yellow { background: var(--sunrise-500); }
.pp-ind-red { background: var(--whistle-500); }
.pp-ind-muted { background: var(--border-default); }

.pp-hl-green { color: var(--pitch-700); font-weight: 600; }
.pp-hl-yellow { color: var(--sunrise-700); font-weight: 600; }
.pp-hl-red { color: var(--whistle-700); font-weight: 600; }
[data-theme="dark"] .pp-hl-green { color: var(--pitch-400); }
[data-theme="dark"] .pp-hl-yellow { color: var(--fg-warning); }
[data-theme="dark"] .pp-hl-red { color: var(--fg-danger); }
.pp-stat-na { color: var(--fg-4); font-family: var(--font-mono); font-size: 11px; }
.pp-pct-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 80px;
    height: 16px;
    background: var(--bg-surface-2);
    border-radius: 3px;
    overflow: hidden;
}
.pp-pct-bar { position: absolute; left: 0; top: 0; bottom: 0; }
.pp-pct-bar.green { background: var(--pitch-500); }
.pp-pct-bar.yellow { background: var(--sunrise-500); }
.pp-pct-bar.red { background: var(--whistle-500); }
.pp-pct-num {
    position: relative;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--fg-1);
    line-height: 1;
    padding: 0 6px;
}

.pp-summary-bar { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 14px; border-top: 1px solid var(--border-subtle); margin-top: 12px; }
.pp-summary-item { display: flex; flex-direction: column; gap: 2px; }
.pp-summary-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.pp-summary-val { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--fg-1); }
.pp-summary-val small { font-family: var(--font-sans); font-weight: 400; font-size: 11px; color: var(--fg-3); }

/* Goal quality */
.pp-gq-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pp-gq-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-surface-2);
    color: var(--fg-2);
}
.pp-gq-opener { background: var(--tint-green); color: var(--pitch-700); }
.pp-gq-goahead { background: var(--tint-blue); color: var(--field-700); }
.pp-gq-equalizer { background: var(--tint-yellow); color: var(--sunrise-700); }
.pp-gq-insurance { background: color-mix(in oklch, var(--night-500) 12%, transparent); color: var(--fg-2); }
.pp-gq-consolation { background: color-mix(in oklch, var(--rose-500) 18%, transparent); color: oklch(45% 0.18 20); }
.pp-gq-pen { background: var(--tint-red); color: var(--whistle-700); }

/* Analysis */
.pp-analysis-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.pp-analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.pp-analysis-box { padding: 14px; background: var(--bg-surface-2); border-radius: 10px; }
.pp-analysis-box-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 8px;
}
.pp-analysis-row { padding: 4px 0; font-size: 13px; color: var(--fg-2); }
.pp-analysis-row strong { color: var(--fg-1); font-family: var(--font-mono); }

/* Comp tabs + detail.
   Styled as a segmented-control pill row (same pattern as
   .group-tabs and .lh-tabs) rather than a second underlined
   tab bar. The main player tabs above already use the
   underlined style; having a second identical bar stack
   underneath flattens the hierarchy — the user can't tell
   which is primary. Segmented control reads as clearly
   subordinate. */
.comp-tabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    margin: 0 0 14px;
    list-style: none;
    background: var(--bg-surface-2);
    border-radius: 8px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}
.comp-tabs::-webkit-scrollbar { display: none; }
.comp-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-2);
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.comp-tab:hover { background: var(--bg-surface); color: var(--fg-1); }
.comp-tab.active {
    background: var(--bg-surface);
    color: var(--fg-1);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}
.comp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.comp-detail-panel { display: flex; flex-direction: column; gap: 16px; }

/* Player match rows */
.pp-val-goals { color: var(--pitch-700); font-weight: 700; }
.pp-val-yc { color: var(--sunrise-700); font-weight: 700; }
.pp-val-rc { color: var(--whistle-700); font-weight: 700; }
[data-theme="dark"] .pp-val-goals { color: var(--pitch-400); }
[data-theme="dark"] .pp-val-yc { color: var(--fg-warning); }
[data-theme="dark"] .pp-val-rc { color: var(--fg-danger); }
.pp-group-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--fg-3);
}
.pp-match-row { cursor: pointer; transition: background var(--dur-2) var(--ease-out); }
.pp-match-row:hover { background: var(--bg-surface-2); }
.pp-match-date { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.pp-match-vs { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--fg-1); }
.pp-match-comp { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--fg-3); margin-top: 2px; }
.pp-starter-badge, .pp-sub-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 4px;
}
.pp-starter-badge { background: var(--tint-green); color: var(--pitch-700); }
.pp-sub-badge { background: var(--bg-surface-2); color: var(--fg-3); }
[data-theme="dark"] .pp-starter-badge { color: var(--pitch-400); }
.pp-res-win { color: var(--pitch-700); font-weight: 700; }
.pp-res-draw { color: var(--sunrise-700); font-weight: 700; }
.pp-res-loss { color: var(--whistle-700); font-weight: 700; }
[data-theme="dark"] .pp-res-win { color: var(--pitch-400); }
.pp-card-yc { color: var(--sunrise-700); }
.pp-card-rc { color: var(--whistle-700); }

/* Player-page admin maintenance bar. Lives below the main
   content, admin-only. Quiet right-aligned strip so it's
   discoverable when you need it but doesn't compete with the
   hero or the data above. */
.pp-admin-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0 0;
    margin-top: 16px;
    border-top: 1px dashed var(--border-subtle);
}
.pp-admin-bar-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-4);
    margin-right: auto;
}

/* Gender-flag button — the least-used admin control on the page,
   so it reads as a small quiet chip in the muted register.
   Transparent bg, smaller font than the neighboring rescrape
   chip, no hard border tint. */
.g-flag-btn {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    cursor: pointer;
    margin-left: 6px;
    vertical-align: 4px;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.g-flag-btn:hover:not(:disabled) {
    background: var(--bg-surface-2);
    color: var(--fg-2);
    border-color: var(--border-default);
}
.g-flag-btn:disabled { opacity: 0.5; cursor: default; }
.g-flag-btn.g-flag-done {
    background: var(--tint-green);
    border-color: color-mix(in oklch, var(--pitch-500) 35%, transparent);
    color: var(--pitch-700);
}
[data-theme="dark"] .g-flag-btn.g-flag-done { color: var(--pitch-400); }

/* Re-import button — icon-only, small and quiet. Same register
   as the gender-flag chip: admin affordance that shouldn't
   compete with favorites or the player's name. Tooltip carries
   the label. */
.rescrape-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-3);
    cursor: pointer;
    margin-left: 6px;
    vertical-align: 4px;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.rescrape-hero-btn:hover:not(:disabled) {
    background: var(--bg-surface-2);
    color: var(--fg-1);
    border-color: var(--border-default);
}
.rescrape-hero-btn:disabled { opacity: 0.5; cursor: default; }

/* ------------------------------------------------------
   Favorite + add-to-list buttons.
   Icon-only square chips (SVG Lucide star + plus) used
   inline in hero H1s (player / team / club / field pages).

   Shared base: 30x30 on desktop (bumps to 36x36 on mobile
   in the responsive block), rounded 8px, subtle border,
   centered SVG at 18x18. Aligns via flex align-self rather
   than the vertical-align: 3px magic number the old pills
   depended on.

   States:
   - Default  → transparent bg, fg-3 color, subtle border
   - Hover    → bg-surface-2, fg-1 color, border-default
   - Favorited (.fav-btn[data-fav="1"]) → sunrise tint bg,
                sunrise-700 icon color, SVG path fills
                currentColor so the star reads FILLED vs the
                default OUTLINE; replaces the old ☆/★ glyph
                swap since SVG-based icons can toggle fill
                via CSS alone.
   ------------------------------------------------------ */
.fav-btn, .fav-btn-add {
    /* `position: relative` establishes a positioning context
       for the .add-to-list-dd dropdown that showAddToList
       appends as a child. Handling it in CSS instead of
       JS-set inline style means the mobile hero's
       `position: absolute` override (pins the button
       top-right of the H1) isn't clobbered the first time
       the user taps the + — the old JS flipped the button
       back to relative, which dropped it into normal flow
       and visually shifted it leftward across the row. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--fg-3);
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        color var(--dur-2) var(--ease-out);
    margin: 0;
    vertical-align: middle;
}
.fav-btn svg, .fav-btn-add svg {
    width: 18px;
    height: 18px;
    color: inherit;
    transition: fill var(--dur-2) var(--ease-out);
}
.fav-btn:hover, .fav-btn-add:hover {
    background: var(--bg-surface-2);
    border-color: var(--border-default);
    color: var(--fg-1);
}
/* Favorited: filled amber star. SVG paths fill with currentColor
   so the hollow Lucide star becomes a solid shape — a real
   filled/outlined toggle rather than a background-tint hint. */
.fav-btn[data-fav="1"] {
    background: var(--sunrise-100);
    border-color: color-mix(in oklch, var(--sunrise-500) 45%, transparent);
    color: var(--sunrise-700);
}
.fav-btn[data-fav="1"] svg path { fill: currentColor; }
.fav-btn[data-fav="1"]:hover {
    background: color-mix(in oklch, var(--sunrise-500) 20%, transparent);
    border-color: color-mix(in oklch, var(--sunrise-500) 55%, transparent);
}
[data-theme="dark"] .fav-btn[data-fav="1"] {
    background: color-mix(in oklch, var(--sunrise-500) 22%, transparent);
    color: var(--fg-warning);
}

/* When the buttons sit inline inside a hero H1 (flex container
   with align-items: center), align-self: center + vertical-align:
   middle keep them vertically in sync with the name text. An 8px
   gap sits between the name and the first button — matched by
   flex gap on the H1, so the old `margin-left: 8px` per button
   is obsolete. */
.pp-hero-name, .tp-hero-name, .team-hero-name {
    gap: 6px;
}
.pp-hero-name .fav-btn, .pp-hero-name .fav-btn-add,
.tp-hero-name .fav-btn, .tp-hero-name .fav-btn-add,
.team-hero-name .fav-btn, .team-hero-name .fav-btn-add {
    margin-left: 0;
}
/* First fav/add button after the name gets an extra nudge so it
   doesn't sit flush against the gender dot / GK chip / age-cat
   badge next to the name. */
.pp-hero-name > .fav-btn:first-of-type,
.tp-hero-name > .fav-btn:first-of-type,
.team-hero-name > .fav-btn:first-of-type {
    margin-left: 6px;
}
.fav-remove {
    width: 24px; height: 24px;
    background: var(--bg-surface-2);
    color: var(--fg-3);
    border-radius: 5px;
    font-size: 12px;
}
.fav-remove:hover { background: var(--whistle-100); color: var(--whistle-700); }
[data-theme="dark"] .fav-remove:hover { background: color-mix(in oklch, var(--whistle-500) 22%, transparent); color: var(--fg-danger); }

.add-to-list-dd {
    position: absolute;
    top: calc(100% + 4px); right: 0;
    min-width: 180px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
}
.add-to-list-item { padding: 8px 12px; font-size: 13px; cursor: pointer; transition: background var(--dur-2) var(--ease-out); }
.add-to-list-item:hover { background: var(--bg-surface-2); }

/* ============================================================
   MATCH PAGE (mp-*)
   ============================================================ */
/* Match hero. Shares the "surface card with 3px pitch-green stripe"
   register used by every other hero (league, roster, player, club,
   referee). The earlier stadium-dark treatment was the only dark
   surface outside the scoreboard itself and broke the calm of the
   rest of the app. Scoreline keeps Bebas Neue but sits in the normal
   fg-1 register — the type is already the emphasis, the background
   doesn't need to shout too. */
.mp-hero {
    background: var(--bg-surface);
    color: var(--fg-1);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    position: relative;
}
.mp-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--pitch-500);
}
.mp-hero-inner { position: relative; padding: 20px 20px 22px; }
.mp-hero-league {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    text-align: center;
    margin-bottom: 16px;
}
.mp-hero-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
}
.mp-hero-team {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.mp-hero-home { flex-direction: row-reverse; text-align: right; justify-content: flex-start; }
.mp-hero-away { text-align: left; }
.mp-hero-team-crest {
    width: 60px; height: 60px;
    background: var(--bg-surface-2);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
    flex-shrink: 0;
}
.mp-team-crest { max-width: 100%; max-height: 100%; object-fit: contain; }
.mp-hero-team-info { min-width: 0; }
.mp-hero-team-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg-1);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: color var(--dur-2) var(--ease-out);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-hero-team-name:hover { color: var(--fg-brand); }
.mp-hero-form {
    display: flex;
    gap: 3px;
    margin-top: 6px;
}
.mp-hero-home .mp-hero-form { justify-content: flex-end; }
.mp-hero-ppg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.mp-hero-home .mp-hero-ppg { justify-content: flex-end; }
.mp-hero-ppg-label { color: var(--fg-3); }
.mp-form-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
}
.mp-form-w { background: var(--pitch-600); }
.mp-form-d { background: var(--sunrise-500); color: var(--night-950); }
.mp-form-l { background: var(--whistle-500); }
.mp-hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
}
.mp-hero-score {
    font-family: var(--font-display);
    font-size: 56px;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}
.mp-hero-score-live { color: var(--whistle-600); }
.mp-hero-center-unconfirmed .mp-hero-score-live { color: var(--fg-3); }
.mp-hero-vs {
    font-family: var(--font-display);
    font-size: 44px;
    letter-spacing: 0.04em;
    color: var(--fg-4);
}
.mp-hero-penalties, .mp-hero-ft {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-top: 6px;
}
.mp-hero-date { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); margin-top: 8px; font-weight: 500; }
.mp-hero-venue { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.mp-hero-venue a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--border-default); text-underline-offset: 2px; }
.mp-hero-venue a:hover { color: var(--fg-brand); text-decoration-color: var(--fg-brand); }

.mp-ppg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 2px 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
}
.mp-ppg-h { background: var(--pitch-500); color: var(--night-950); }
.mp-ppg-m { background: var(--sunrise-500); color: var(--night-950); }
.mp-ppg-l { background: var(--whistle-500); color: #fff; }

/* Match layout */
.mp-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}
.mp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mp-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + var(--nav-bar-h) + 16px); min-width: 0; }

/* Penalty shootout */
.mp-pk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.mp-pk-header {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-1);
    border-bottom: 1px solid var(--border-subtle);
}
.mp-pk-header-away { text-align: right; }
.mp-pk-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-subtle);
    grid-column: 1 / -1;
}
.mp-pk-row:last-child { border-bottom: 0; }
.mp-pk-name { font-size: 13px; font-weight: 500; }
.mp-pk-home { text-align: right; }
.mp-pk-away { text-align: left; }
.mp-pk-num { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); padding: 0 6px; }
.mp-pk-icon { font-size: 14px; }

/* Timeline grid: [home | min | away]. Minutes column is dead
   center across every row — identical x-position regardless of
   which side the event belongs to — and serves as the visual
   spine of the timeline. Home events fill the left side
   (right-aligned, icon flanks the min column); away events
   fill the right side (left-aligned, same story). Empty side
   on each row stays as an empty flex container so the grid
   stays stable. */
.mp-timeline { display: flex; flex-direction: column; gap: 0; }
.mp-tl-row {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.mp-tl-row:last-child { border-bottom: 0; }
.mp-tl-side {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.mp-tl-side-home { justify-content: flex-end; }
.mp-tl-side-away { justify-content: flex-start; }
.mp-tl-info {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--fg-1);
    line-height: 1.25;
    min-width: 0;
    flex-wrap: wrap;
}
.mp-tl-home .mp-tl-info { justify-content: flex-end; text-align: right; }
.mp-tl-away .mp-tl-info { justify-content: flex-start; text-align: left; }
.mp-tl-info a { color: var(--fg-1); font-weight: 500; }
.mp-tl-info a:hover { color: var(--fg-brand); }
.mp-tl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.mp-tl-dorsal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    margin-right: 4px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    flex-shrink: 0;
}
/* Sub dorsal chips stay neutral — direction color is carried by
   the small ↑/↓ arrow alone, which is enough to distinguish
   in/out without every element of the chip turning green or red. */

.mp-tl-svg { flex-shrink: 0; }
.mp-tl-svg-goal { color: var(--fg-brand); }
.mp-tl-svg-sub { color: var(--field-500); }
[data-theme="dark"] .mp-tl-svg-sub { color: var(--field-400); }
/* Minute pill is the timeline's scannable spine — it's the only
   element that always lands at the same x-coordinate across
   every row. So it carries the event-type color itself rather
   than pushing color into side-gradients or per-chip tints. A
   user scans the center column and instantly sees: green = goal,
   yellow = booking, red = sending-off, gray = substitution. */
.mp-tl-min {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Asymmetric: a touch more left padding to compensate for the
       trailing apostrophe's visual lightness — it sits high and
       reads half the weight of a digit, otherwise the pill looks
       offset to the left of the number. */
    padding: 3px 7px 3px 9px;
    min-width: 34px;
    margin: 0 auto;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1;
}
/* Pastel tint + saturated text — matches the convention used
   everywhere else in the system (.tp-cell-green/yellow/red,
   .tp-fix-win/draw/loss, .pp-starter-badge, H2H pills). The
   full-saturation backgrounds were shouting next to the rest
   of the calm UI; these tints still carry the event-type
   signal but sit in the same register as a form badge. */
.mp-tl-min-goal {
    background: var(--tint-green);
    border-color: color-mix(in oklch, var(--pitch-500) 40%, transparent);
    color: var(--pitch-700);
}
.mp-tl-min-yellow {
    background: var(--tint-yellow);
    border-color: color-mix(in oklch, var(--sunrise-500) 45%, transparent);
    color: var(--sunrise-700);
}
.mp-tl-min-red {
    background: var(--tint-red);
    border-color: color-mix(in oklch, var(--whistle-500) 40%, transparent);
    color: var(--whistle-700);
}
[data-theme="dark"] .mp-tl-min-goal { color: var(--pitch-400); }
[data-theme="dark"] .mp-tl-min-yellow { color: var(--fg-warning); }
[data-theme="dark"] .mp-tl-min-red { color: var(--fg-danger); }

/* Sub pair: incoming on top (↑ name in pitch-green), outgoing
   below (↓ name in whistle-red). Two stacked rows instead of
   one wide line — once you add jersey numbers alongside
   federation-length names the single-line layout gets cramped
   and the two chips bleed into each other. The row grid's
   align-items:center keeps the minute column vertically
   centered across the two lines. */
.mp-sub-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mp-tl-home .mp-sub-pair { align-items: flex-end; }
.mp-tl-away .mp-sub-pair { align-items: flex-start; }
.mp-sub-in, .mp-sub-out {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.mp-sub-in { color: var(--fg-1); }
.mp-sub-out { color: var(--fg-3); }
.mp-sub-in a { color: inherit; }
.mp-sub-out a { color: inherit; }
.mp-sub-arrow { flex-shrink: 0; }
.mp-sub-arrow-in { color: var(--pitch-600); }
.mp-sub-arrow-out { color: var(--fg-4); }
[data-theme="dark"] .mp-sub-arrow-in { color: var(--pitch-400); }

.mp-goal-tag {
    display: inline-block;
    padding: 1px 5px;
    margin-left: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    letter-spacing: 0.02em;
}
.mp-goal-pen { background: var(--tint-yellow); color: var(--sunrise-700); }
.mp-goal-og { background: var(--tint-red); color: var(--whistle-700); }

.mp-card-badge {
    display: inline-block;
    width: 10px; height: 14px;
    border-radius: 2px;
    vertical-align: -2px;
}
.mp-card-yellow { background: var(--sunrise-500); }
.mp-card-red { background: var(--whistle-500); }
.mp-card-2y {
    background: var(--whistle-500);
    box-shadow: inset 0 0 0 2px var(--sunrise-500);
}

.mp-sub-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-right: 4px;
}
.mp-sub-in { color: var(--pitch-700); font-weight: 500; }
.mp-sub-out { color: var(--whistle-700); font-weight: 500; }
[data-theme="dark"] .mp-sub-in { color: var(--pitch-400); }
[data-theme="dark"] .mp-sub-out { color: var(--fg-danger); }

/* Lineups. Each column is a flex-column so the "Cuerpu técnicu"
   section can pin to the bottom via margin-top:auto. The grid
   stretches both cols to the taller one's height (default align-
   items:stretch), which gives margin-top:auto actual space to
   consume — home and away coaches titles always line up across
   regardless of which side has more subs. */
.mp-lineups-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}
.mp-lineup-col { display: flex; flex-direction: column; min-width: 0; }
/* Team name is the column's thick separator — pitch-green
   border-bottom does the sectioning from the whole column
   below it. Individual section titles (Suplentes, Cuerpu
   técnicu) get their own hairline top border when they mark
   a NEW section midway down; the very first section title
   directly under the team name skips its top border since
   that would double up on the pitch-green line just above. */
.mp-lineup-team-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-1);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--pitch-500);
    margin-bottom: 14px;
}
.mp-lineup-section-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 16px 0 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
/* Adjacent-sibling selector instead of :first-of-type — the
   latter resolves against element tag (div), which the team
   name also is, so it never matched the first section title. */
.mp-lineup-team-name + .mp-lineup-section-title {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

/* Coaches sit in their own grid row below the lineups grid so
   "Cuerpu técnicu" titles start at the same top edge in both
   columns (alignment by grid construction, independent of how
   many coaches each side registered). Each column keeps its
   own per-column section-title top border — same split-by-
   column separator style as Titulares and Suplentes above,
   not a full-width row-level rule. */
.mp-coaches-grid {
    margin-top: 4px;
    padding-bottom: 4px;
}
.mp-lineup-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}
.mp-lineup-dorsal {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-3);
    text-align: center;
}
.mp-lineup-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 500; }
.mp-lineup-spacer { min-height: 31px; }
/* Captain badge: a quiet outline ring — visually reads as a
   small armband-circle rather than a bright filled chip.
   Still noticeable (mono C in fg-2 on a neutral surface) but
   doesn't compete with the goalkeeper sunrise badge or the
   goal/card color accents. Small extra margin-left gives it
   breathing room from the preceding gender dot — the 4px
   flex-gap alone was too tight against the tiny gender-dot
   circle. */
.mp-captain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    margin-left: 4px;
    background: var(--bg-surface-2);
    color: var(--fg-2);
    border: 1px solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
}
.mp-ref-tipo {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-left: 6px;
}

/* Referees as their own section below the lineups grid. Centered
   flex layout — the previous approach shoved a flex-like `justify-
   content: center` onto a grid row and got ignored, so names sat
   left-aligned in the leftover name track. */
.mp-refs-section {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--border-subtle);
}
.mp-refs-title {
    text-align: center;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 4px;
}
.mp-refs-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.mp-ref-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 4px 0;
    color: var(--fg-1);
}
.mp-ref-row a { color: var(--fg-1); font-weight: 500; }
.mp-ref-row a:hover { color: var(--fg-brand); }

/* H2H */
/* H2H record + chronological score-pill timeline.
   Redesign of the old proportion-bar + row-list pair:
     · Record strip reads as "A [V/E/V] B" — crest + name on each
       side, counts in the middle tinted pitch / sunrise / whistle.
     · Timeline below is a horizontal row of colored score pills,
       oldest on the left, newest on the right; each pill tint
       reflects the outcome for THIS match's home team so the eye
       can scan for trend instead of reading every line. Venue tag
       (H/A) distinguishes past home games from away games without
       repeating team names. Clicking a pill opens that match. */

.mp-card-title-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-left: 8px;
}

.mp-h2h-record {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 12px;
}
.mp-h2h-team-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-1);
    min-width: 0;
    letter-spacing: -0.01em;
}
.mp-h2h-team-label-home { justify-content: flex-end; text-align: right; }
.mp-h2h-team-label-home span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-h2h-team-label-away span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-h2h-crest { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
/* Big record tiles are intentionally neutral — the first and last
   column are both "V" (wins) and tinting one green and the other
   red would imply one team's wins are a good outcome and the
   other's are bad. The team labels flanking the strip already
   establish whose wins are whose; the tiles just carry the numbers.
   Draw column stays visually lighter to reinforce that a draw is a
   less-decisive outcome without borrowing a semantic color. */
.mp-h2h-counts {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 4px;
    background: var(--bg-surface-2);
    border-radius: 10px;
}
.mp-h2h-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 6px 10px;
    border-radius: 7px;
    line-height: 1.1;
    background: var(--bg-surface);
}
.mp-h2h-count-draw { background: transparent; }
.mp-h2h-count-num {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
}
.mp-h2h-count-draw .mp-h2h-count-num { color: var(--fg-3); font-weight: 600; }
.mp-h2h-count-lbl {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
}

.mp-h2h-timeline-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 8px;
}
.mp-h2h-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.mp-h2h-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 6px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-1);
    letter-spacing: 0.02em;
    transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.mp-h2h-pill:hover { transform: translateY(-1px); border-color: var(--border-default); text-decoration: none; }
.mp-h2h-pill-score { font-variant-numeric: tabular-nums; }
.mp-h2h-pill-venue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--fg-3);
}
/* Per-pill tints are OK here — a pill is a single match result, so
   win/draw/loss is unambiguous within that pill. The reference
   perspective (this match's home team) is stable across the whole
   row and picked up from the record strip above it. */
.mp-h2h-pill-win {
    background: color-mix(in oklch, var(--pitch-500) 18%, transparent);
    border-color: color-mix(in oklch, var(--pitch-500) 45%, transparent);
    color: var(--pitch-700);
}
.mp-h2h-pill-draw {
    background: color-mix(in oklch, var(--sunrise-500) 22%, transparent);
    border-color: color-mix(in oklch, var(--sunrise-500) 45%, transparent);
    color: var(--sunrise-700);
}
.mp-h2h-pill-loss {
    background: color-mix(in oklch, var(--whistle-500) 16%, transparent);
    border-color: color-mix(in oklch, var(--whistle-500) 45%, transparent);
    color: var(--whistle-700);
}
.mp-h2h-pill-win .mp-h2h-pill-venue,
.mp-h2h-pill-draw .mp-h2h-pill-venue,
.mp-h2h-pill-loss .mp-h2h-pill-venue { background: rgba(255,255,255,0.55); }
[data-theme="dark"] .mp-h2h-pill-win { color: var(--pitch-400); }
[data-theme="dark"] .mp-h2h-pill-draw { color: var(--fg-warning); }
[data-theme="dark"] .mp-h2h-pill-loss { color: var(--fg-danger); }
[data-theme="dark"] .mp-h2h-pill-win .mp-h2h-pill-venue,
[data-theme="dark"] .mp-h2h-pill-draw .mp-h2h-pill-venue,
[data-theme="dark"] .mp-h2h-pill-loss .mp-h2h-pill-venue { background: rgba(0,0,0,0.35); }

/* Season stats two-col */
.mp-season-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mp-ss-blk {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.mp-ss-hdr {
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--fg-1);
}
.mp-ss-tbl th { text-align: center; }
.mp-ss-tbl td { text-align: center; }
.mp-ss-tbl td:first-child { text-align: left; font-family: var(--font-sans); font-weight: 500; color: var(--fg-1); }
.mp-ss-hl { color: var(--pitch-700); font-weight: 700; }
[data-theme="dark"] .mp-ss-hl { color: var(--pitch-400); }
.mp-ss-hl-row td { background: color-mix(in oklch, var(--pitch-500) 8%, transparent); }

/* Rank rows inside match page */
.mp-rank-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}
.mp-rank-name { font-weight: 500; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-rank-bar-wrap { height: 8px; background: var(--bg-surface-2); border-radius: 999px; overflow: hidden; }
.mp-rank-bar { height: 100%; background: var(--pitch-500); border-radius: 999px; }
.mp-rank-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--fg-1); min-width: 40px; text-align: right; }
.mp-no-detail { padding: 20px; text-align: center; color: var(--fg-3); font-size: 13px; }

/* Goals by minute */
.goals-by-minute { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-xs); }
.gbm-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.gbm-panel { display: none; }
.gbm-panel.active { display: block; }
.gbm-val { font-family: var(--font-mono); font-weight: 700; }
.gbm-danger { background: var(--tint-red); color: var(--whistle-700); }
.gbm-low { background: color-mix(in oklch, var(--sunrise-500) 12%, transparent); color: var(--sunrise-700); }
.gbm-med { background: var(--tint-yellow); color: var(--sunrise-700); }
.gbm-high { background: var(--tint-green); color: var(--pitch-700); }
[data-theme="dark"] .gbm-danger { color: var(--fg-danger); }
[data-theme="dark"] .gbm-high { color: var(--pitch-400); }

/* Sidebar standings on match page */
.mp-standings-tbl th { padding: 8px 6px; }
.mp-standings-tbl td { padding: 7px 6px; font-size: 12px; }
.mp-standings-tbl tr { cursor: pointer; transition: background var(--dur-2) var(--ease-out); }
.mp-standings-tbl tr:hover { background: var(--bg-surface-2); }
.mp-st-name { text-align: left !important; font-family: var(--font-sans) !important; font-weight: 500; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-hl-row td { background: color-mix(in oklch, var(--pitch-500) 10%, transparent); font-weight: 700; }

/* Match info card */
.mp-info-list { display: flex; flex-direction: column; padding: 8px 0; }
.mp-info-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
}
.mp-info-row:last-child { border-bottom: 0; }
.mp-info-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    font-weight: 600;
}
.mp-info-value { color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; }

/* Field detail: resident clubs list. Dedicated row layout
   (crest + name in a flex row) — previous impl reused
   .mp-info-row which is a 100px + 1fr grid designed for
   label/value pairs; with only a value the name was starting
   100px from the left edge of the card. */
.fld-club-list {
    display: flex;
    flex-direction: column;
}
.fld-club-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    transition: color var(--dur-2) var(--ease-out);
}
.fld-club-row:last-child { border-bottom: 0; }
.fld-club-row:hover { color: var(--fg-brand); }
.fld-club-crest {
    width: 22px; height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    display: inline-block;
}
.fld-club-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg-1);
    font-weight: 500;
}
.fld-club-row:hover .fld-club-name { color: var(--fg-brand); }

/* ============================================================
   REFEREE (ref-*)
   ============================================================ */
.ref-hero {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}
.ref-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--pitch-500);
}
.ref-hero-inner { display: flex; align-items: center; gap: 20px; }
.ref-badge {
    width: 60px; height: 60px;
    background: var(--night-900);
    color: var(--pitch-400);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.ref-hero-info { min-width: 0; }
.ref-hero-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg-1);
}
.ref-hero-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    margin-top: 4px;
}

.ref-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.ref-stat {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--shadow-xs);
}
.ref-stat-val {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--fg-1);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ref-stat-lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-top: 2px;
}
.ref-stat-rate { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); margin-top: 4px; }
.card-pip {
    display: inline-block;
    width: 10px; height: 14px;
    border-radius: 2px;
}
.card-pip--yellow { background: var(--sunrise-500); }
.card-pip--red { background: var(--whistle-500); }
.hda-num { font-family: var(--font-mono); font-weight: 700; }
.hda-home { color: var(--pitch-700); }
.hda-draw { color: var(--sunrise-700); }
.hda-away { color: var(--whistle-700); }
[data-theme="dark"] .hda-home { color: var(--pitch-400); }
.hda-sep { color: var(--fg-4); padding: 0 2px; }
.ref-note {
    padding: 10px 14px;
    background: var(--sunrise-100);
    color: var(--sunrise-700);
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 16px;
}
[data-theme="dark"] .ref-note { background: color-mix(in oklch, var(--sunrise-500) 18%, transparent); color: var(--fg-warning); }
.ref-cell-yellow { color: var(--sunrise-700); font-weight: 600; }
.ref-cell-red { color: var(--whistle-700); font-weight: 600; }
.ref-team-list { list-style: none; padding: 0; }
.ref-team-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.ref-team-list li:last-child { border-bottom: 0; }
.ref-team-crest { width: 22px; height: 22px; object-fit: contain; }
.ref-team-name { flex: 1; font-weight: 500; }
.ref-team-count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.ref-score { font-family: var(--font-mono); font-weight: 700; color: var(--fg-1); }
.ref-score-pending { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.ref-date { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.ref-comp { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-2); }
.ref-matches-tbl tr { cursor: pointer; transition: background var(--dur-2) var(--ease-out); }
.ref-matches-tbl tr:hover { background: var(--bg-surface-2); }
.ref-matches-tbl td:nth-child(3) { text-align: right; font-family: var(--font-sans); font-weight: 500; }
.ref-matches-tbl td:nth-child(5) { text-align: left; font-family: var(--font-sans); font-weight: 500; }

/* Combined cards cell — one td containing both yellow and red
   chips as inline colored pips + counts. Stats for the whole
   match, so they live together rather than in two columns that
   would read as home-vs-away attribution. */
.ref-cards {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: nowrap;
}
.ref-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}
.ref-card-chip + .ref-card-chip { margin-left: 8px; }
.ref-card-chip-y { color: var(--sunrise-700); }
.ref-card-chip-y::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 12px;
    background: var(--sunrise-500);
    border-radius: 2px;
}
.ref-card-chip-r { color: var(--whistle-700); }
.ref-card-chip-r::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 12px;
    background: var(--whistle-500);
    border-radius: 2px;
}
[data-theme="dark"] .ref-card-chip-y { color: var(--fg-warning); }
[data-theme="dark"] .ref-card-chip-r { color: var(--fg-danger); }

/* ============================================================
   CLUBS / CLUB DETAIL / FIELD (team-hero reused)
   ============================================================ */
.clubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.club-tile {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.club-tile:hover { border-color: var(--pitch-500); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.club-tile-crest {
    width: 56px; height: 56px;
    background: var(--bg-surface-2);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
    overflow: hidden;
}
.club-tile-crest img { max-width: 100%; max-height: 100%; object-fit: contain; }
.club-tile-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.club-tile-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.club-tile-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    text-transform: uppercase;
}
.club-tile-meta a { color: inherit; }
.club-team-comp {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    margin-left: 6px;
}

/* Hero venue chip-row. The legacy single-line `.team-hero-standing`
   collapsed to one venue per club; clubs with multiple home fields
   (shared facilities, rented pitches across categories) now render
   each as a tappable chip. Primary / declared home field gets a
   pitch-green cast, secondaries stay in the neutral register. */
.venue-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.venue-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-2);
    letter-spacing: -0.005em;
    transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.venue-chip:hover {
    background: var(--bg-surface-3);
    border-color: var(--border-default);
    color: var(--fg-1);
    text-decoration: none;
}
.venue-chip svg { color: var(--fg-3); flex-shrink: 0; }
.venue-chip:hover svg { color: var(--fg-brand); }
.venue-chip-primary {
    background: var(--bg-brand-soft);
    border-color: color-mix(in oklch, var(--pitch-500) 40%, transparent);
    color: var(--pitch-700);
}
.venue-chip-primary svg { color: var(--pitch-600); }
[data-theme="dark"] .venue-chip-primary { color: var(--pitch-400); }
[data-theme="dark"] .venue-chip-primary svg { color: var(--pitch-400); }

/* Club-detail team rows. Ditched the squad-row reuse — that grid
   has six columns (built for the roster squad table) and the
   club page only fills three, leaving children to land in
   arbitrary tracks and wrap to four lines when a team plays in
   multiple competitions. This is a dedicated 3-col layout. */
.club-teams-card {
    margin-top: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.club-teams-header, .club-team-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px 60px;
    gap: 14px;
    align-items: center;
    padding: 10px 16px;
}
.club-teams-header {
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.club-teams-col-name { text-align: left; }
.club-teams-col-stat { text-align: center; }
.club-team-row {
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
    font-size: 13px;
}
.club-team-row:last-child { border-bottom: 0; }
.club-team-row:hover { background: var(--bg-surface-2); }
.club-team-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.club-team-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--fg-1);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.club-team-comps {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.club-team-stat {
    text-align: center;
    color: var(--fg-1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.club-team-stat.gd-pos { color: var(--pitch-700); }
.club-team-stat.gd-neg { color: var(--whistle-700); }
[data-theme="dark"] .club-team-stat.gd-pos { color: var(--pitch-400); }
[data-theme="dark"] .club-team-stat.gd-neg { color: var(--fg-danger); }

.team-hero {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
}
.team-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--pitch-500);
}
.team-hero-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
}
.team-hero-crest-wrap {
    width: 72px; height: 72px;
    background: var(--bg-surface-2);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
    flex-shrink: 0;
}
.team-hero-crest-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.team-hero-info { min-width: 0; flex: 1; }
.team-hero-name {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--fg-1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.team-hero-standing {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-3);
    letter-spacing: 0.04em;
    margin-top: 6px;
}
.team-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.team-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--bg-surface-2);
    color: var(--fg-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: 999px;
}

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: radial-gradient(ellipse at top, color-mix(in oklch, var(--pitch-500) 8%, var(--bg-app)), var(--bg-app) 70%);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow-xl);
    position: relative;
}
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--pitch-500);
    border-radius: 16px 16px 0 0;
}
.auth-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    color: var(--fg-1);
}
.auth-muted { font-size: 13px; color: var(--fg-2); line-height: 1.5; margin: 8px 0 20px; }
.auth-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    margin-bottom: 12px;
    min-height: 220px;
}
.auth-secret-details { margin-bottom: 16px; }
.auth-secret-details summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    padding: 6px 0;
}
.auth-secret {
    display: block;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-surface-2);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-1);
    border-radius: 6px;
    word-break: break-all;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.auth-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.auth-label input {
    height: 40px;
    padding: 0 12px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--fg-1);
    transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.auth-label input:focus { outline: none; border-color: var(--pitch-500); background: var(--bg-surface); box-shadow: var(--shadow-focus); }
.auth-btn {
    height: 44px;
    background: var(--pitch-500);
    color: var(--night-950);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    border-radius: 8px;
    transition: background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
    cursor: pointer;
    margin-top: 4px;
}
.auth-btn:hover { background: var(--pitch-400); }
.auth-btn:active { transform: translateY(1px); }
.auth-error {
    padding: 10px 12px;
    background: var(--whistle-100);
    color: var(--whistle-700);
    font-size: 13px;
    border-radius: 6px;
}
[data-theme="dark"] .auth-error { background: color-mix(in oklch, var(--whistle-500) 18%, transparent); color: var(--fg-danger); }

/* ============================================================
   ADMIN (incidencias, gender, api-key) — minimal pass
   ============================================================ */
.inc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.inc-stat {
    padding: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
}
.inc-stat-num { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--fg-1); line-height: 1; }
.inc-stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-top: 6px;
}
.inc-list { display: flex; flex-direction: column; gap: 12px; }
.inc-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.inc-card-header { padding: 14px 16px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface-2); }
.inc-card-match { display: flex; flex-direction: column; gap: 2px; }
.inc-card-date { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--fg-1); }
.inc-card-comp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--fg-3); }
.inc-card-team { font-weight: 600; font-size: 14px; color: var(--fg-1); }
.inc-card-body { padding: 8px 16px; }
.inc-violation { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.inc-violation:last-child { border-bottom: 0; }
.inc-violation-main { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.inc-susp-badge {
    display: inline-flex;
    padding: 2px 8px;
    background: var(--whistle-500);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 3px;
}
.inc-violation-role { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.inc-violation-meta, .inc-violation-reason { font-size: 12px; color: var(--fg-2); margin-top: 4px; }
.inc-empty { padding: 48px; text-align: center; color: var(--fg-3); }

.gp-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; }
.gp-result-count { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.gp-view-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-surface-2); border-radius: 8px; }
.gp-vt-btn { padding: 6px 12px; font-size: 12px; color: var(--fg-2); border-radius: 5px; cursor: pointer; }
.gp-vt-btn.active { background: var(--bg-surface); color: var(--fg-1); font-weight: 600; box-shadow: var(--shadow-xs); }
.gp-list { display: flex; flex-direction: column; gap: 4px; }
.gp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.gp-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}
.gp-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
    /* Grid row already stretches cards equal-height. Flex-column then
       pins content to the top, leaving the actions floating at varying
       Y positions across cards whose team / competition names wrap
       to different line counts. Fix: push actions to the bottom. */
    min-height: 100%;
}
.gp-card-actions { margin-top: auto; }
.gp-card-photo, .gp-row-photo {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--bg-surface-2);
    overflow: hidden;
}
.gp-row-photo { width: 40px; height: 40px; }
.gp-card-photo img, .gp-row-photo img { width: 100%; height: 100%; object-fit: cover; }
.gp-name, .gp-card-name { font-weight: 600; color: var(--fg-1); }
.gp-meta, .gp-card-meta { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.02em; }
.gp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.gp-status {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--bg-surface-2);
    color: var(--fg-3);
    border-radius: 4px;
}
.gp-actions, .gp-card-actions { display: inline-flex; gap: 4px; }
.gp-btn {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--fg-2);
    cursor: pointer;
}
.gp-btn-m:hover { border-color: var(--field-500); color: var(--field-700); }
.gp-btn-f:hover { border-color: var(--rose-500); color: oklch(45% 0.18 20); }
.gp-set-m { background: var(--field-500); color: #fff; }
.gp-set-f { background: var(--rose-500); color: #fff; }
.gp-saved { font-family: var(--font-mono); font-size: 11px; color: var(--pitch-700); font-weight: 700; }
[data-theme="dark"] .gp-saved { color: var(--pitch-400); }
.gp-done { opacity: 0.6; }

/* ============================================================
   OMNIBOX
   ============================================================ */
.omni-backdrop {
    position: fixed;
    inset: 0;
    background: oklch(0% 0 0 / 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 16px 16px;
    z-index: 1000;
    transition: opacity var(--dur-2) var(--ease-out);
}
.omni-hidden { opacity: 0; pointer-events: none; }
.omni-modal {
    width: 100%;
    max-width: 560px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 14px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}
.omni-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.omni-icon { font-size: 16px; color: var(--fg-3); display: inline-flex; }
.omni-input {
    flex: 1;
    background: transparent;
    border: 0;
    font-size: 16px;
    color: var(--fg-1);
}
.omni-input:focus { outline: none; }
.omni-kbd-esc {
    display: inline-flex;
    padding: 2px 8px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-3);
    letter-spacing: 0.08em;
}
.omni-results { flex: 1; overflow: auto; padding: 4px 0; }
.omni-empty-hint { padding: 24px; text-align: center; color: var(--fg-3); font-size: 13px; }
.omni-fuzzy-note {
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface-2);
}
.omni-group { padding: 4px 0; }
.omni-group-heading {
    padding: 8px 14px 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.omni-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 14px;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease-out);
}
.omni-row:hover, .omni-row-selected { background: var(--bg-surface-2); }
.omni-row-selected { box-shadow: inset 3px 0 0 0 var(--pitch-500); }
.omni-row-img, .omni-row-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-2);
    object-fit: cover;
    overflow: hidden;
    font-size: 14px;
    color: var(--fg-3);
}
.omni-row-label { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.omni-row-sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.omni-footer {
    display: flex;
    gap: 14px;
    padding: 8px 14px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface-2);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--fg-3);
}

/* ============================================================
   CONFIG PAGES (hub + users + tokens + scraper + api-key)
   Shared eyebrow titles, card surfaces, admin tables.
   ============================================================ */

.config-section-title, .admin-h2 {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin: 0 0 14px;
}

/* ── Hub: tool-tile grid ── */
.config-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.config-tools-title {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin: 4px 0 0;
}
.config-tool-link {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: center;
    padding: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    color: var(--fg-1);
    transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.config-tool-link:hover {
    border-color: var(--pitch-500);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.config-tool-icon {
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-2);
    border-radius: 10px;
    font-size: 20px;
    color: var(--fg-brand);
}
.config-tool-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.config-tool-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: -0.01em;
}
.config-tool-text small {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--fg-3);
    line-height: 1.4;
}

/* ── Shared: admin layout (users + tokens) ── */
.admin-users-wrap, .admin-tokens-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}
.admin-create-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: calc(var(--header-h) + var(--nav-bar-h) + 16px);
}
.admin-create-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.admin-create-form input[type="text"],
.admin-create-form input[type="email"],
.admin-create-form input[type="password"],
.admin-create-form select {
    height: 36px;
    padding: 0 12px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--fg-1);
    text-transform: none;
    transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.admin-create-form input:focus,
.admin-create-form select:focus {
    outline: none;
    border-color: var(--pitch-500);
    background: var(--bg-surface);
    box-shadow: var(--shadow-focus);
}
.admin-create-form .auth-btn { margin-top: 4px; }
.admin-check {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
    text-transform: none !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    color: var(--fg-2) !important;
    font-weight: 500 !important;
    cursor: pointer;
}
.admin-check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--pitch-500);
    cursor: pointer;
}

/* Shared admin table — users + tokens + api-keys */
.admin-table, .ak-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    font-size: 13px;
}
.admin-table thead th, .ak-table thead th {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 10px 12px;
    text-align: left;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.admin-table thead th.c, .ak-table thead th.c { text-align: center; }
.admin-table tbody td, .ak-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    color: var(--fg-1);
}
.admin-table tbody tr:last-child td, .ak-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody td small { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; }
.admin-table tbody tr:hover, .ak-table tbody tr:hover { background: var(--bg-surface-2); }

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.admin-actions button {
    height: 28px;
    padding: 0 10px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-2);
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.admin-actions button:hover {
    background: var(--bg-surface);
    color: var(--fg-1);
    border-color: var(--border-default);
}
.admin-actions button.danger {
    color: var(--fg-danger);
    border-color: color-mix(in oklch, var(--whistle-500) 40%, var(--border-subtle));
}
.admin-actions button.danger:hover {
    background: var(--whistle-500);
    color: #fff;
    border-color: var(--whistle-500);
}
[data-theme="dark"] .admin-actions button.danger:hover { background: var(--whistle-600); border-color: var(--whistle-600); }

/* Token reveal */
.token-reveal {
    padding: 16px;
    background: var(--sunrise-100);
    border: 1px solid color-mix(in oklch, var(--sunrise-500) 50%, transparent);
    border-radius: 10px;
    margin-bottom: 16px;
    color: var(--sunrise-700);
}
[data-theme="dark"] .token-reveal {
    background: color-mix(in oklch, var(--sunrise-500) 18%, transparent);
    border-color: color-mix(in oklch, var(--sunrise-500) 40%, transparent);
    color: var(--fg-warning);
}
.token-reveal strong { display: block; font-size: 13px; margin-bottom: 8px; color: inherit; }
.token-plain {
    display: block;
    padding: 10px 12px;
    background: var(--night-950);
    color: var(--pitch-400);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    border-radius: 6px;
    word-break: break-all;
    user-select: all;
}

/* ── Scraper config ── */
.config-category {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    margin-bottom: 16px;
    overflow: hidden;
}
.config-cat-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 18px;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-subtle);
}
.config-cat-name {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-1);
}
.config-cat-count {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    margin-left: auto;
}

.config-row {
    display: grid;
    grid-template-columns: 28px 28px 44px 1fr auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--dur-2) var(--ease-out);
}
.config-row:last-child { border-bottom: 0; }
.config-row:hover { background: var(--bg-surface-2); }
.config-row-incomplete { box-shadow: inset 3px 0 0 0 var(--sunrise-500); }

/* Gender / futsal micro-toggles — bucket pills */
.config-women-toggle, .config-futsal-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.config-women-toggle input, .config-futsal-toggle input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.config-women-label, .config-futsal-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--fg-3);
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.config-women-toggle input:checked ~ .config-women-label {
    background: var(--rose-500);
    border-color: var(--rose-500);
    color: #fff;
}
.config-futsal-toggle input:checked ~ .config-futsal-label {
    background: oklch(68% 0.18 30);
    border-color: oklch(68% 0.18 30);
    color: #fff;
}

/* Main competition on/off toggle (slider switch) */
.config-toggle {
    position: relative;
    display: inline-block;
    width: 40px; height: 22px;
    cursor: pointer;
    flex-shrink: 0;
}
.config-toggle input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.config-slider {
    position: absolute;
    inset: 0;
    background: var(--night-300);
    border-radius: 999px;
    transition: background var(--dur-2) var(--ease-out);
}
.config-slider::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-2) var(--ease-out);
}
.config-toggle input:checked ~ .config-slider { background: var(--pitch-500); }
.config-toggle input:checked ~ .config-slider::before { transform: translateX(18px); }
[data-theme="dark"] .config-slider { background: var(--night-700); }

.config-comp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.config-comp-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.config-comp-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--fg-3);
}
.config-zero { color: var(--fg-danger); font-weight: 600; }

/* Scrape progress chip — lives on the meta row so the homepage
   tiles don't have to carry this admin-only number. */
.config-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 4px 10px 4px 4px;
    background: var(--bg-surface-2);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-3);
    max-width: fit-content;
}
.config-progress-bar {
    display: block;
    width: 60px; height: 4px;
    background: var(--bg-surface-3);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}
.config-progress-fill {
    display: block;
    height: 100%;
    background: var(--pitch-500);
    border-radius: 999px;
    transition: width var(--dur-3) var(--ease-out);
}
.config-progress-text { white-space: nowrap; font-weight: 600; }
.config-progress-done { color: var(--pitch-700); }
.config-progress-done .config-progress-fill { background: var(--pitch-500); }
.config-progress-partial { color: var(--sunrise-700); }
.config-progress-partial .config-progress-fill { background: var(--sunrise-500); }
.config-progress-pending { color: var(--fg-3); }
.config-progress-pending .config-progress-fill { background: var(--border-strong); }
[data-theme="dark"] .config-progress-done { color: var(--pitch-400); }
[data-theme="dark"] .config-progress-partial { color: var(--fg-warning); }

.config-status {
    padding: 3px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
}
.config-status.active {
    background: var(--tint-green);
    color: var(--pitch-700);
}
.config-status.excluded {
    background: var(--bg-surface-3);
    color: var(--fg-3);
}
[data-theme="dark"] .config-status.active { color: var(--pitch-400); }

.config-purge-btn, .config-rescrape-btn {
    height: 30px;
    padding: 0 12px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.config-purge-btn:hover {
    background: var(--whistle-500);
    color: #fff;
    border-color: var(--whistle-500);
}
.config-rescrape-btn:hover:not(:disabled) {
    background: var(--pitch-500);
    color: var(--night-950);
    border-color: var(--pitch-500);
}
.config-rescrape-btn:disabled, .config-purge-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.config-rescrape-btn.rescrape-pending {
    background: var(--sunrise-100);
    color: var(--sunrise-700);
    border-color: color-mix(in oklch, var(--sunrise-500) 40%, transparent);
}
[data-theme="dark"] .config-rescrape-btn.rescrape-pending {
    background: color-mix(in oklch, var(--sunrise-500) 22%, transparent);
    color: var(--fg-warning);
}
.config-rescrape-btn.rescrape-done {
    background: var(--pitch-500);
    color: var(--night-950);
    border-color: var(--pitch-500);
}

/* ── API-key page ── */
.ak-current {
    padding: 18px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.ak-current::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; width: 3px;
    background: var(--pitch-500);
}
.ak-current-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 8px;
}
.ak-current-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--fg-1);
    word-break: break-all;
    line-height: 1.4;
}
.ak-current-value em { color: var(--fg-3); font-style: normal; font-weight: 400; }
.ak-current-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--fg-3);
    margin-top: 10px;
    line-height: 1.6;
}
.ak-current-meta code {
    padding: 1px 6px;
    background: var(--bg-surface-2);
    border-radius: 3px;
    color: var(--fg-2);
}

.ak-form-wrap {
    padding: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
    margin-bottom: 20px;
}
.ak-form-wrap form {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.ak-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-1);
    letter-spacing: 0.02em;
    transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.ak-input:focus { outline: none; border-color: var(--pitch-500); background: var(--bg-surface); box-shadow: var(--shadow-focus); }
.ak-btn {
    height: 40px;
    padding: 0 18px;
    background: var(--pitch-500);
    color: var(--night-950);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out);
    white-space: nowrap;
}
.ak-btn:hover:not(:disabled) { background: var(--pitch-400); }
.ak-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ak-btn-danger {
    height: 32px;
    padding: 0 12px;
    background: transparent;
    color: var(--fg-danger);
    border: 1px solid color-mix(in oklch, var(--whistle-500) 40%, var(--border-subtle));
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.ak-btn-danger:hover { background: var(--whistle-500); color: #fff; border-color: var(--whistle-500); }

.ak-hint {
    font-size: 12px;
    color: var(--fg-3);
    line-height: 1.6;
    margin-top: 8px;
}
.ak-hint strong { color: var(--fg-warning); }
.ak-hint code {
    padding: 1px 6px;
    background: var(--bg-surface-2);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
}

.ak-history {
    padding: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
}
.ak-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
    flex-wrap: wrap;
}
.ak-history .ak-table { box-shadow: none; border: 1px solid var(--border-subtle); }
.ak-key-cell { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); letter-spacing: 0.02em; }
.ak-row-current td { background: var(--tint-green); font-weight: 600; }
[data-theme="dark"] .ak-row-current td { color: var(--pitch-400); }
.ak-row-del {
    width: 26px; height: 26px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    color: var(--fg-3);
    font-size: 12px;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.ak-row-del:hover { background: var(--whistle-500); color: #fff; border-color: var(--whistle-500); }

.ak-flash {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.ak-flash code {
    padding: 1px 6px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 12px;
}
.ak-flash-ok {
    background: var(--tint-green);
    color: var(--pitch-700);
    border: 1px solid color-mix(in oklch, var(--pitch-500) 40%, transparent);
}
.ak-flash-err {
    background: var(--tint-red);
    color: var(--whistle-700);
    border: 1px solid color-mix(in oklch, var(--whistle-500) 40%, transparent);
}
[data-theme="dark"] .ak-flash-ok { color: var(--pitch-400); }
[data-theme="dark"] .ak-flash-err { color: var(--fg-danger); }

/* ============================================================
   RESPONSIVE
   ----
   Bespoke mobile pass: no horizontal scroll anywhere (overflow-x
   on the root uses `clip` so position:sticky keeps working, unlike
   `hidden` which creates a new scroll context and breaks sticky).
   Tables transform into card lists at phone widths instead of
   scrolling. Fixture/match/squad rows reflow their grid templates
   to stack neatly. Heroes collapse to a single column with smaller
   type. Every view gets mobile attention — no layers layered on top
   of another system.
   ============================================================ */

/* Root-level horizontal-scroll safety net. `clip` is a scroll-
   container-free overflow that the viewport can still paint past
   its sticky descendants — unlike `hidden`, which breaks sticky. */
html, body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }

/* Generic: any wide table gets a gentle horizontal scroll affordance
   below 1100px so we never clip data; mobile breakpoints below then
   convert the important tables into card layouts to kill the scroll
   entirely. */
.data-table-wrap, .ps-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1099px) {
    .home-layout { grid-template-columns: 1fr; }
    .lg-two-col, .tp-layout, .pp-layout, .mp-layout { grid-template-columns: 1fr; }
    .lg-aside, .tp-sidebar, .pp-sidebar, .mp-sidebar { position: static; }
    .admin-users-wrap, .admin-tokens-wrap { grid-template-columns: 1fr; }
    .admin-create-form { position: static; }

    /* Scraper config row at ≤1099: clean 3-row card layout.
       Row 1 (toolbar): [♀] [⚽5] [slider-toggle] · · · [status]
                        toggles clustered left, status pill right
       Row 2 (content): comp name + meta line + progress chip,
                        full-width for readability
       Row 3 (action):  [Desaniciar] or [Re-importar] full width —
                        the two buttons are mutually exclusive
                        (purge only when excluded+has-data;
                        rescrape only when not-excluded), so
                        giving both the same grid-area "btn" never
                        overlaps visually and lets whichever is
                        rendered fill the whole row.

       Replaces the earlier cramped layout that split row 2 into
       empty cells before `status`, and row 3 into two half-width
       buttons that were never both visible. */
    .config-row {
        grid-template-columns: auto auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "women futsal toggle .    status"
            "info  info   info   info info"
            "btn   btn    btn    btn  btn";
        column-gap: 10px;
        row-gap: 10px;
        padding: 14px 14px;
        align-items: center;
    }
    .config-row > .config-women-toggle { grid-area: women; }
    .config-row > .config-futsal-toggle { grid-area: futsal; }
    .config-row > .config-toggle { grid-area: toggle; }
    .config-row > .config-comp-info { grid-area: info; min-width: 0; }
    .config-row > .config-status { grid-area: status; justify-self: end; }
    .config-row > .config-purge-btn,
    .config-row > .config-rescrape-btn {
        grid-area: btn;
        width: 100%;
        justify-self: stretch;
    }
    /* Let the progress chip wrap its text if the card is narrow
       rather than blow past the card edge. */
    .config-progress { flex-wrap: wrap; max-width: 100%; }
}

@media (max-width: 880px) {
    /* -- Header / nav -- */
    .top-bar-inner { gap: 12px; padding: 0 12px; }
    .nav-bar-inner { padding: 0 12px; }
    .header-nav { display: none; }
    .user-menu { display: none; }
    .omni-trigger { max-width: none; }
    .hamburger-btn { display: flex; }

    #app { padding: 16px 12px 80px; }

    /* -- Home competition tiles -- */
    .competition-tile {
        grid-template-columns: 32px minmax(0, 1fr) 56px 56px;
        gap: 10px;
        padding: 8px 12px;
    }
    .competition-tile .view-btn { display: none; }
    .competition-tile .crest { width: 32px; height: 32px; }

    /* -- Team-page hero stacks crest-above-info above upcoming -- */
    .tp-hero-inner { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
    .tp-hero-right { min-width: 0; }
    /* 3 stat cards stay in a row on tablet; they only collapse at phone widths. */
    .tp-stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .tp-cards-summary { grid-template-columns: repeat(3, 1fr); gap: 8px; }

    /* Player-impact + player-groups tighten labels */
    .tp-impact-tbl th, .tp-impact-tbl td { padding: 8px 5px; font-size: 12px; }
    .tp-grp-header-row, .tp-grp-item-row { gap: 10px; }

    .pp-hero-inner { grid-template-columns: auto 1fr; gap: 16px; padding: 20px; }

    .mp-hero-row { grid-template-columns: 1fr auto 1fr; gap: 12px; }
    .mp-hero-center { padding: 0 8px; }
    .mp-hero-score { font-size: 48px; }
    .mp-hero-team-crest { width: 52px; height: 52px; }
    .mp-hero-team-name { font-size: 16px; }
    .mp-lineups-grid, .mp-season-two-col { grid-template-columns: 1fr; }
    .pp-analysis-grid { grid-template-columns: 1fr; }

    /* -- Fixture rows: drop form columns, shrink datetime -- */
    .fixture-header, .fixture-row {
        grid-template-columns: 96px minmax(0, 1fr) 72px minmax(0, 1fr);
        gap: 8px;
        padding: 10px 8px;
    }
    .fh-form, .fixture-form { display: none; }

    /* -- Match rows: drop meta column, tighten -- */
    .mdb-match-row {
        grid-template-columns: 28px 40px minmax(0, 1fr) 68px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 8px;
    }
    .mdb-meta { display: none; }

    /* -- Squad rows: drop age, tighten stat cols -- */
    .squad-group-header, .squad-row {
        grid-template-columns: 40px minmax(0, 1fr) 56px 56px 72px;
        padding: 10px 12px;
        gap: 8px;
    }
    .squad-group-header span:nth-child(3) { display: none; }
    .squad-row span:nth-child(3) { display: none; }

    /* -- Team-roster fixture rows -- */
    .tp-fix-row { grid-template-columns: 64px minmax(0, 1fr) 80px minmax(0, 1fr); gap: 8px; }

    /* -- Club tiles on /#/clubs -- */
    .clubs-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

    /* -- Match detail info card: labels narrower -- */
    .mp-info-row { grid-template-columns: 88px minmax(0, 1fr); padding: 8px 14px; }

    /* -- Match timeline: smaller center column -- */
    .mp-tl-row { grid-template-columns: 1fr 48px 1fr; gap: 8px; }

    /* -- Admin users/tokens -- */
    .admin-actions { gap: 4px; }

    /* -- Page title margin -- */
    .page-h1 { font-size: 24px; }
}

@media (max-width: 640px) {
    :root { --header-h: 54px; }

    /* -- Header tightens further -- */
    .logo-text { font-size: 17px; }
    .logo-mark { width: 28px; height: 28px; }
    .omni-trigger-label { display: none; }
    .omni-trigger-kbd { display: none; }
    .omni-trigger { max-width: 40px; width: 40px; padding: 0; justify-content: center; flex: 0 0 auto; }
    .top-bar-actions { gap: 8px; }
    .top-bar-inner { padding: 0 10px; gap: 8px; }
    .nav-bar-inner { padding: 0 10px; }

    #app { padding: 12px 10px 80px; }

    .breadcrumb { font-size: 10px; gap: 6px; }

    /* -- Buttons slightly smaller -- */
    .btn-primary, .btn-ghost, .show-more-btn, .ps-export-btn, .ps-reset { height: 34px; padding: 0 12px; font-size: 12px; }

    /* -- Heroes -- */
    .ps-hero, .tp-hero-inner, .pp-hero-inner, .team-hero-inner, .ref-hero,
    .ref-hero-inner { padding: 18px 14px; }
    .ps-hero-title, .page-h1 { font-size: 22px; }
    .ps-hero-sub { font-size: 11px; }
    /* Card padding stays 16px horizontally at phone widths (was 14px). 2px
       might sound trivial but it's the difference between numbers kissing
       the card's rounded corner and numbers sitting in a breathable inset. */
    .league-hero-card, .tp-card, .pp-card, .mp-card, .pp-analysis, .ref-card, .goals-by-minute { padding: 14px 16px; }

    /* ------------------------------------------------------
       Player page (/#/player/:code).

       Hero: photo | info side-by-side, with the upcoming-
       matches widget (tp-hero-right) pushed to a full-width
       row 2. The H1 gets the same fav-button treatment as
       the team hero — decorative "Stats" eyebrow hidden, fav
       + add buttons absolute-positioned top-right of the name
       block so a long player name doesn't wrap around them.
       ------------------------------------------------------ */
    .pp-hero-inner {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "photo info"
            "upcoming upcoming";
        gap: 14px;
        padding: 18px 14px;
    }
    .pp-hero-inner > .pp-hero-photo { grid-area: photo; }
    .pp-hero-inner > .pp-hero-info { grid-area: info; }
    .pp-hero-inner > .tp-hero-right { grid-area: upcoming; min-width: 0; width: 100%; }
    .pp-hero-photo { width: 72px; height: 72px; }
    .pp-dorsal { min-width: 28px; height: 28px; font-size: 15px; }
    .pp-hero-name, .tp-hero-name, .team-hero-name { font-size: 19px; }
    .pp-hero-name {
        display: block;
        position: relative;
        padding-right: 70px;
        min-height: 30px;       /* reserve button height so the
                                   two absolute-positioned 30x30 chips
                                   don't overflow into the meta row
                                   below when the name is a single
                                   line and the H1 would otherwise be
                                   shorter than the buttons */
        line-height: 1.2;
        gap: 0;
    }
    .pp-hero-name .pp-hero-light { display: none; }
    .pp-hero-name .fav-btn,
    .pp-hero-name .fav-btn-add {
        position: absolute;
        top: 0;
        margin: 0;
        vertical-align: baseline;
    }
    .pp-hero-name .fav-btn { right: 34px; }
    .pp-hero-name .fav-btn-add { right: 0; }
    .pp-hero-meta { font-size: 12px; gap: 10px; margin-top: 6px; }
    .pp-hero-meta:first-of-type { margin-top: 8px; }

    /* p90 grid — 2 cols at phone; cards are the page's main
       at-a-glance summary so they stay visible. Padding tightens
       a hair. */
    .pp-p90-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pp-p90-card { padding: 12px 12px 14px; }
    .pp-p90-val { font-size: 20px; }
    .pp-p90-label { font-size: 9px; }
    .pp-p90-ctx { font-size: 10px; }
    .pp-summary-bar { gap: 14px; }

    /* ------------------------------------------------------
       Per-season stats table (on #pp-panel-general) — 8 cols
       (Competición · PX · Goles · Titular · Sup · 🟨 · 🟥 · Min).
       Hide Titular, Sup, and Min on mobile — keep Competición,
       PX, Goles, yellow, red. Scoped to #pp-panel-general
       because the Partíos tab ALSO uses .pp-stats-tbl but
       with a different column order, and an unscoped rule
       was hiding Goles there. */
    #pp-panel-general .pp-stats-tbl th:nth-child(4), #pp-panel-general .pp-stats-tbl td:nth-child(4),   /* Titular */
    #pp-panel-general .pp-stats-tbl th:nth-child(5), #pp-panel-general .pp-stats-tbl td:nth-child(5),   /* Sup */
    #pp-panel-general .pp-stats-tbl th:nth-child(8), #pp-panel-general .pp-stats-tbl td:nth-child(8)    /* Min */
    { display: none; }

    /* Per-competition detail table (.pp-detail-tbl) — 4 cols
       (label · Total · Per 90 · Percentil). Fits but tight;
       shrink the percentile bar so the row has room. */
    .pp-detail-tbl th, .pp-detail-tbl td { font-size: 11px; }
    .pp-pct-cell { width: 60px; height: 14px; }
    .pp-pct-num { font-size: 9px; padding: 0 4px; }

    /* ------------------------------------------------------
       Partíos tab table (.pp-stats-tbl inside #pp-panel-matches)
       — 6 cols (Partíu block · Fecha · TIT/SUP · Min · Goles · Tarx).
       The first cell (pp-td-left) already contains score +
       vs opponent + comp as stacked spans. On mobile, hide
       the separate Fecha and Min cols (date can be inferred
       from match flow, min is less critical than starter
       status + goals + cards). Keeps: match-identity block,
       starter badge, goals, cards.
       ------------------------------------------------------ */
    #pp-panel-matches .pp-stats-tbl th:nth-child(2),
    #pp-panel-matches .pp-stats-tbl td:nth-child(2),   /* Fecha */
    #pp-panel-matches .pp-stats-tbl th:nth-child(4),
    #pp-panel-matches .pp-stats-tbl td:nth-child(4)    /* Min */
    { display: none; }

    /* pp-td-left contains score + vs-opponent + comp on
       stacked spans — give it column padding and ensure
       long opponent names ellipsize. */
    #pp-panel-matches .pp-stats-tbl .pp-td-left {
        max-width: 100%;
        min-width: 0;
        line-height: 1.3;
    }
    #pp-panel-matches .pp-match-vs { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #pp-panel-matches .pp-match-comp { font-size: 9px; }
    #pp-panel-matches .pp-starter-badge, #pp-panel-matches .pp-sub-badge {
        font-size: 9px;
        padding: 2px 5px;
    }

    /* Admin footer bar */
    .pp-admin-bar { flex-wrap: wrap; gap: 6px; }
    .pp-admin-bar-label { font-size: 9px; }

    /* Comp tabs pill row already scrolls horizontally; shrink pills */
    .comp-tabs .comp-tab { padding: 0 10px; font-size: 11px; }

    /* Goal-quality pill row */
    .pp-gq-badges { gap: 4px; }
    .pp-gq-badge { font-size: 10px; padding: 3px 8px; }

    /* Team hero inner: stack */
    .team-hero-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .team-hero-crest-wrap { width: 60px; height: 60px; }

    /* Referee hero */
    .ref-hero-inner { flex-direction: row; align-items: center; gap: 14px; }
    .ref-badge { width: 48px; height: 48px; font-size: 18px; }
    .ref-hero-name { font-size: 18px; }
    .ref-stat-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ref-stat { padding: 12px 14px; }
    .ref-stat-val { font-size: 20px; }

    /* League hero: tighter */
    .lh-badge { width: 40px; height: 40px; font-size: 16px; }
    .lh-title { font-size: 15px; }

    /* Stat/bar grids go one-col */
    .gs-player-grid, .gs-club-grid, .bar-chart-grid { grid-template-columns: 1fr; }

    /* -- Filter row stacks -- */
    .ps-filters-row { flex-direction: column; align-items: stretch; }
    .ps-filters-row > .ss { flex: 1 1 auto; }
    .ss { min-width: 0; width: 100%; }
    .ss-dropdown { min-width: 0; width: 100%; max-width: none; left: 0; right: 0; }

    /* ------------------------------------------------------
       Match hero — vertical stack per team at phone widths.

       Desktop has each team as a flex row (crest beside info),
       with home row-reversed so its info faces center. On a
       360px phone the side columns are ~130px wide, which can't
       fit crest (40) + gap + 5 form badges (80-88) + name +
       ppg-with-label without content overflowing or wrapping
       messily. Switching to a CENTERED column stack gives each
       side a clean vertical rhythm:
           [crest]
           Team name (can wrap 2 lines if needed)
           ▂▂▂▂▂ (form as colored underlines)
           1.85 PPX Casa
       And the center col carries just the big score + date
       + venue.
       ------------------------------------------------------ */
    .mp-hero-inner { padding: 18px 12px 20px; }
    .mp-hero-league { font-size: 9px; margin-bottom: 14px; }
    .mp-hero-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }
    .mp-hero-team,
    .mp-hero-home,
    .mp-hero-away {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 8px;
        min-width: 0;
    }
    .mp-hero-team-crest { width: 48px; height: 48px; padding: 4px; border-radius: 10px; }
    .mp-hero-team-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        min-width: 0;
        width: 100%;
    }
    .mp-hero-team-name {
        font-size: 13px;
        letter-spacing: -0.01em;
        line-height: 1.2;
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        text-align: center;
        /* Allow 2-line wrap for long names, clamp at 2 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        /* Reserve 2 lines of height ALWAYS so a 1-line home name and
           a 2-line away name (or vice-versa) don't give the two side
           columns different heights — which was misaligning the
           crest, form, and ppg rows across the hero. 2 × 1.2 line
           height = 2.4em min. */
        min-height: 2.4em;
    }
    /* Form indicator: collapse W/D/L squares into 4px-tall colored
       bars — the "recent form underline" micro-treatment, same
       pattern we use in the next-matchday widget. Five bars fit
       in 40px, comfortably inside the ~130px side col. */
    .mp-hero-form {
        gap: 2px;
        justify-content: center !important;
    }
    .mp-form-badge {
        width: 8px;
        height: 4px;
        padding: 0;
        font-size: 0;
        color: transparent;
        border-radius: 2px;
    }
    .mp-hero-ppg {
        font-size: 9px;
        justify-content: center !important;
        gap: 5px;
    }
    .mp-hero-ppg-label { display: none; }  /* just the pill; the "PPX Casa/Fuera" label crowds the tiny col */

    /* Center col */
    .mp-hero-center { padding: 0 2px; gap: 0; }
    .mp-hero-score { font-size: 34px; line-height: 1; }
    .mp-hero-vs { font-size: 24px; line-height: 1; }
    .mp-hero-date { font-size: 11px; margin-top: 10px; }
    .mp-hero-venue { font-size: 10px; }
    .mp-hero-ft, .mp-hero-penalties { font-size: 9px; margin-top: 4px; }

    /* ------------------------------------------------------
       Lineups card — put the coaches BESIDE their own team
       on mobile. Desktop renders two separate grids (lineups
       on top, coaches below) so the "Cuerpu técnicu" titles
       align by construction; on mobile both grids collapse
       to 1 col and the natural document order becomes
         home lineup / away lineup / home coach / away coach
       which separates each team from its own coaches.

       Fix: set mp-card to flex-column, dissolve both
       lineups-grid containers with `display: contents` (CSS
       selectors still traverse the DOM, but the boxes
       disappear from layout so their children become direct
       flex items of mp-card), then use `order` to interleave.
       Selector uses :has() so only the lineups card gets the
       flex treatment — other mp-card sections keep their
       default block flow.
       ------------------------------------------------------ */
    .mp-card:has(.mp-lineups-grid) {
        display: flex;
        flex-direction: column;
    }
    .mp-card:has(.mp-lineups-grid) > .mp-lineups-grid { display: contents; }
    .mp-card:has(.mp-lineups-grid) > .mp-card-title { order: 0; }
    .mp-card:has(.mp-lineups-grid) > .mp-lineups-grid:not(.mp-coaches-grid) > .mp-lineup-col:nth-child(1) { order: 1; }
    .mp-card:has(.mp-lineups-grid) > .mp-coaches-grid > .mp-lineup-col:nth-child(1) { order: 2; }
    .mp-card:has(.mp-lineups-grid) > .mp-lineups-grid:not(.mp-coaches-grid) > .mp-lineup-col:nth-child(2) { order: 3; }
    .mp-card:has(.mp-lineups-grid) > .mp-coaches-grid > .mp-lineup-col:nth-child(2) { order: 4; }
    /* Coach section title re-borders since the adjacent-sibling
       rule (.mp-lineup-team-name + .mp-lineup-section-title) that
       suppresses the top border only fires for the titulares
       title directly under the team name. Coach title sits below
       sub rows in its own column now — needs the hairline back. */
    .mp-card:has(.mp-lineups-grid) > .mp-coaches-grid > .mp-lineup-col > .mp-lineup-section-title {
        padding-top: 14px;
        margin-top: 8px;
        border-top: 1px solid var(--border-subtle);
    }
    /* Space between home-team block (lineup + coaches) and
       away-team block. The visual cue: a heavier dashed rule
       + big vertical gap, so it reads unmistakably as "new
       team starts here". Targets the AWAY lineup col (order 3,
       i.e. the first thing after the home coach finishes). */
    .mp-card:has(.mp-lineups-grid) > .mp-lineups-grid:not(.mp-coaches-grid) > .mp-lineup-col:nth-child(2) {
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px dashed var(--border-strong);
    }
    /* Referees: more breathing room above (was 16px; bump to
       28px with a matching dashed rule so the refs section
       has the same rhythm as the team separator above). */
    .mp-card:has(.mp-lineups-grid) > .mp-refs-section {
        order: 5;
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px dashed var(--border-strong);
    }

    /* ------------------------------------------------------
       H2H record strip — hide team names on mobile, keep just
       the crests. At phone width the team-name spans were
       breaking to 2 lines and pushing the counts row off
       center. Crests alone read fine next to the big V-E-V
       record tile in the middle.
       ------------------------------------------------------ */
    .mp-h2h-record { gap: 10px; }
    .mp-h2h-team-label > span { display: none; }
    .mp-h2h-team-label-home { justify-content: flex-end; }
    .mp-h2h-team-label-away { justify-content: flex-start; }
    .mp-h2h-crest { width: 40px; height: 40px; }

    /* -- Match timeline -- */
    .mp-tl-row { grid-template-columns: 1fr 40px 1fr; gap: 6px; padding: 8px 0; }
    .mp-tl-info { font-size: 12px; }
    .mp-tl-dorsal { min-width: 20px; height: 16px; font-size: 10px; padding: 0 4px; }

    /* -- Match info card: even tighter -- */
    .mp-info-row { grid-template-columns: 80px minmax(0, 1fr); padding: 7px 12px; font-size: 12px; }

    /* H2H pills wrap cleanly */
    .mp-h2h-counts { gap: 1px; padding: 3px; }
    .mp-h2h-count { min-width: 40px; padding: 5px 8px; }
    .mp-h2h-count-num { font-size: 16px; }

    /* ------------------------------------------------------
       Referee page (/#/referee/:cod).
       Two wide tables that need mobile card treatment:
       ------------------------------------------------------ */

    /* Per-competition table (ref-comp-tbl) — 6 cols. At phone
       widths, the L-X-V home/draw/away result breakdown and
       Goles/px cell add density without much value next to
       the hero stat strip above. Hide them. Keeps: comp
       name · matches · yellows · reds. */
    .ref-comp-tbl th:nth-child(5), .ref-comp-tbl td:nth-child(5),
    .ref-comp-tbl th:nth-child(6), .ref-comp-tbl td:nth-child(6) { display: none; }

    /* Matches-refereed list — 6 tds reflow into a 3-row card
       with a symmetric team row and a shared stats line:

         [         12/01/2026         ]   <- row 1 date
         [ Home Team ]  2-1  [ Away Team ]  <- row 2 symmetric teams
         [ tercera federación · 🟨4 🟥1 ]  <- row 3 comp + cards

       Cards live in a SINGLE td together so they read as
       match-wide stats (yellows + reds the ref gave out),
       not as per-team attribution. */
    .ref-matches-tbl,
    .ref-matches-tbl thead,
    .ref-matches-tbl tbody,
    .ref-matches-tbl tr,
    .ref-matches-tbl td { display: block; }
    .ref-matches-tbl thead { display: none; }
    .ref-matches-tbl tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "date  date   date"
            "home  score  away"
            "comp  comp   cards";
        column-gap: 10px;
        row-gap: 4px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-subtle);
        cursor: pointer;
    }
    .ref-matches-tbl tr:last-child td { border-bottom: 0; }
    .ref-matches-tbl td { padding: 0; border: 0; }
    /* td positions: 1=date, 2=comp, 3=home, 4=score, 5=away, 6=cards */
    .ref-matches-tbl td:nth-child(1) {
        grid-area: date;
        text-align: center;
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--fg-3);
    }
    .ref-matches-tbl td:nth-child(2) {
        grid-area: comp;
        text-align: left;
        font-size: 10px;
        letter-spacing: 0.04em;
        color: var(--fg-3);
        font-family: var(--font-mono);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .ref-matches-tbl td:nth-child(3) {
        grid-area: home;
        text-align: right !important;
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 500;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ref-matches-tbl td:nth-child(4) {
        grid-area: score;
        text-align: center;
        padding: 0 4px;
    }
    .ref-matches-tbl td:nth-child(5) {
        grid-area: away;
        text-align: left !important;
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 500;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ref-matches-tbl td.ref-cards {
        grid-area: cards;
        text-align: right;
        font-size: 11px;
    }
    .ref-matches-tbl .ref-card-chip { font-size: 11px; }
    .ref-matches-tbl .ref-card-chip + .ref-card-chip { margin-left: 6px; }
    .ref-matches-tbl .ref-card-chip-y::before,
    .ref-matches-tbl .ref-card-chip-r::before {
        width: 7px;
        height: 11px;
    }

    /* Top-teams list already a flex row — tighten vertical rhythm */
    .ref-team-list li { padding: 7px 0; }
    .ref-team-crest { width: 20px; height: 20px; }
    .ref-team-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

    /* -- Club-detail teams card -- */
    .club-teams-header, .club-team-row { grid-template-columns: minmax(0, 1fr) 48px 48px; gap: 10px; padding: 10px 12px; }
    .clubs-grid { grid-template-columns: 1fr; }

    /* ------------------------------------------------------
       Fixture rows — stack: [date eyebrow]
                             [home | score | away]
       Drop the visible score column from the grid; put the
       score pill centered between the team names using
       `grid-template-columns: 1fr auto 1fr` and the date
       label in its own row above. A single fixture is more
       readable as a compact badge-flanked score than as a
       squeezed 4-column row at phone widths.
       ------------------------------------------------------ */
    .fixture-header { display: none; }
    .fixture-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "date  date  date"
            "home  score away";
        gap: 4px 10px;
        padding: 10px 10px;
        font-size: 13px;
        row-gap: 6px;
    }
    .fixture-datetime { grid-area: date; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); }
    .fixture-home { grid-area: home; }
    .fixture-away { grid-area: away; }
    .fixture-score, .fixture-pending { grid-area: score; font-size: 15px; }

    /* Match-day calendar rows: same compact treatment */
    .mdb-match-row {
        grid-template-columns: 36px minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "day home  score away"
            "day meta  meta  meta";
        gap: 4px 8px;
        padding: 10px 10px;
        row-gap: 6px;
        font-size: 13px;
    }
    .mdb-day { grid-area: day; align-self: center; }
    .mdb-time {
        grid-area: meta;
        justify-self: start;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.06em;
        color: var(--fg-3);
        text-transform: uppercase;
    }
    .mdb-team--home { grid-area: home; }
    .mdb-team--away { grid-area: away; }
    .mdb-score, .mdb-score--pending { grid-area: score; font-size: 14px; }
    .mdb-crest { width: 18px; height: 18px; }
    .mdb-team-name { font-size: 13px; }

    /* ------------------------------------------------------
       Squad rows — clean 4-col layout on mobile:

         [#9]  [avatar + name · GK · gender]   3   1200'

       Shed the 6-col header, the age and apps columns, and
       the age-category pill. On a roster view the whole
       squad is almost always in one age bracket (SEN, JUV,
       INF) so the colored pill next to every row is pure
       noise and makes the list feel patchwork. Keep the GK
       yellow chip (informative per player) and the gender
       dot (tiny). Goals + mins sit as two mono cells on the
       right, aligned. No emoji.
       ------------------------------------------------------ */
    .squad-group-header { display: none; }
    .squad-row, .squad-row.squad-tm {
        grid-template-columns: 28px minmax(0, 1fr) auto auto;
        grid-template-rows: auto;
        grid-template-areas: none;
        column-gap: 12px;
        row-gap: 0;
        align-items: center;
        padding: 11px 16px;
        font-size: 13px;
    }
    .squad-row .sq-dorsal, .squad-row.squad-tm .sq-dorsal {
        font-family: var(--font-mono);
        font-size: 14px;
        font-weight: 700;
        color: var(--fg-3);
        text-align: left;
    }
    .squad-row .sq-name, .squad-row.squad-tm .sq-name {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .squad-row .sq-name a, .squad-row.squad-tm .sq-name a {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 0 1 auto;
    }
    /* Hide the age-category pill on squad rows (team-wide context
       already tells the user which category they're in). Keeps the
       GK tag + gender dot, which are per-player. */
    .squad-row .sq-name .age-cat-badge,
    .squad-row.squad-tm .sq-name .age-cat-badge { display: none; }
    /* Hide age (already hidden at 880) + apps on mobile. For the
       teammates variant (no age column) apps is at nth-child(3). */
    .squad-row span:nth-child(4),
    .squad-row.squad-tm span:nth-child(3) { display: none; }
    /* Goals — primary stat, 5th child on .squad-row / 4th on .squad-tm */
    .squad-row .sq-stat, .squad-row.squad-tm .sq-stat {
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 700;
        color: var(--fg-1);
        text-align: right;
        white-space: nowrap;
    }
    /* Mins — secondary stat in fg-3 */
    .squad-row .sq-stat-wide, .squad-row.squad-tm .sq-stat-wide {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 500;
        color: var(--fg-3);
        text-align: right;
        white-space: nowrap;
    }
    /* Avatar + GK chip shrink a hair at phone width */
    .squad-row .pl-avatar-wrap, .squad-row.squad-tm .pl-avatar-wrap {
        width: 22px; height: 22px; margin-right: 0; vertical-align: middle;
    }
    .squad-row .gk-tag, .squad-row.squad-tm .gk-tag {
        margin-right: 0;
    }

    /* ------------------------------------------------------
       Player-search table — card-list transform
       Hide thead; every row becomes a flex-wrap card with:
         Row 1: avatar + name (+ GK/gender/cat badge on right)
         Row 2: crest + team name + comp list
         Row 3: stat chips — apps, goals, mins, yellow, red
       Low-value cols (age, starts, g/90, M/P) hidden.
       ------------------------------------------------------ */
    .ps-table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .ps-table { display: block; min-width: 0; font-size: 14px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
    .ps-table thead { display: none; }
    .ps-table tbody { display: block; }
    .ps-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border-subtle);
    }
    .ps-table tbody tr:last-child { border-bottom: 0; }
    .ps-table tbody td { padding: 0; border: 0; text-align: left; vertical-align: baseline; }
    .ps-table .ps-td-name { flex: 1 1 60%; min-width: 0; font-size: 14px; font-weight: 600; order: 1; }
    /* cat badge — col 4 */
    .ps-table tbody td:nth-child(4) { flex: 0 0 auto; order: 2; margin-left: auto; }
    /* team cell — col 2 → full-width second row */
    .ps-table .ps-td-team { flex: 1 1 100%; order: 3; min-width: 0; max-width: none; padding-top: 2px; }
    /* stat row — apps(5), goals(7), mins(9), yc(11), rc(12) */
    .ps-table tbody td:nth-child(5),
    .ps-table tbody td:nth-child(7),
    .ps-table tbody td:nth-child(9),
    .ps-table tbody td:nth-child(11),
    .ps-table tbody td:nth-child(12) {
        flex: 0 0 auto;
        order: 4;
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 600;
        color: var(--fg-1);
        padding-top: 4px;
        text-align: left !important;
    }
    .ps-table tbody td:nth-child(5)::before { content: 'PX'; color: var(--fg-4); font-size: 10px; letter-spacing: 0.06em; margin-right: 4px; font-weight: 500; }
    .ps-table tbody td:nth-child(7)::before { content: 'G'; color: var(--fg-4); font-size: 10px; letter-spacing: 0.06em; margin-right: 4px; font-weight: 500; }
    .ps-table tbody td:nth-child(9)::before { content: 'MIN'; color: var(--fg-4); font-size: 10px; letter-spacing: 0.06em; margin-right: 4px; font-weight: 500; }
    .ps-table tbody td:nth-child(11)::before { content: ''; display: inline-block; width: 8px; height: 12px; background: var(--sunrise-500); border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
    .ps-table tbody td:nth-child(12)::before { content: ''; display: inline-block; width: 8px; height: 12px; background: var(--whistle-500); border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
    /* Hide the low-value columns on mobile: age(3), starts(6), g/90(8), mpa(10) */
    .ps-table tbody td:nth-child(3),
    .ps-table tbody td:nth-child(6),
    .ps-table tbody td:nth-child(8),
    .ps-table tbody td:nth-child(10) { display: none; }
    /* Hide 0-value stat chips so cards stay scannable (only wins/goals/cards worth showing) */
    /* Export button + filter row placement */
    .ps-export-btn { width: 100%; }

    /* ------------------------------------------------------
       Standings table (.dt) — hide secondary columns at phone
       widths so only position, team, PJ, DG, Pts, PPG remain.
       Column order in markup: #(1) team(2) PX(3) G(4) E(5)
       P(6) GF(7) GC(8) DG(9) PTS(10) Últimos5(11) PPX(12).
       ------------------------------------------------------ */
    .dt thead th, .dt tbody td { padding: 6px 4px; font-size: 12px; }
    .dt .team-link { font-size: 13px; }
    .dt .team-crest { width: 20px; height: 20px; }
    .dt thead th:nth-child(4), .dt tbody td:nth-child(4),  /* G */
    .dt thead th:nth-child(5), .dt tbody td:nth-child(5),  /* E */
    .dt thead th:nth-child(6), .dt tbody td:nth-child(6),  /* P */
    .dt thead th:nth-child(7), .dt tbody td:nth-child(7),  /* GF */
    .dt thead th:nth-child(8), .dt tbody td:nth-child(8),  /* GC */
    .dt thead th:nth-child(11), .dt tbody td:nth-child(11) /* form */
    { display: none; }
    /* Fixtures sidebar mini-standings already has table-layout:fixed; tighten */
    .fix-standings-tbl th, .fix-standings-tbl td { font-size: 11px; padding: 4px 3px; }

    /* ------------------------------------------------------
       Next-matchday widget (standings page).
       An 8-col table (date · form5 · home · ppg · score · ppg
       · away · form5) is impossible at phone widths, so we
       reflow every <tr> as a grid card:

         [date eyebrow spanning full width]
         [home name | score pill | away name]
         [home-ppg + home-form | (centered) | away-form + away-ppg]

       Form badges collapse from 22px squares with letters to
       4px-tall colored bars inline under the team name — the
       "recent form as a colored underline" treatment. PPG
       pills stay at full size so they keep their pitch-green /
       sunrise / whistle color signal.

       All rules scoped inside the tr so we don't regress the
       desktop table layout above.
       ------------------------------------------------------ */
    .next-md-card { padding: 10px 12px 4px; }
    .next-md-tbl,
    .next-md-tbl thead,
    .next-md-tbl tbody,
    .next-md-tbl tr,
    .next-md-tbl td { display: block; }
    .next-md-tbl thead { display: none; }
    /* 4-td card layout: date eyebrow, then [home-name+meta] |
       score | [away-name+meta]. The meta (ppg + form) is
       already a flex container defined at desktop scope with a
       fixed 6px gap, so ppg-to-form spacing is now structural
       rather than positional — it can't drift based on form
       length. */
    .next-md-tbl tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "date  date   date"
            "hteam score  ateam";
        column-gap: 10px;
        row-gap: 6px;
        align-items: center;
        padding: 10px 8px;
        border-bottom: 1px solid var(--border-subtle);
    }
    .next-md-tbl tr:last-child td { border-bottom: 0; }
    .next-md-tbl td { padding: 0; border: 0; background: transparent; }
    .next-md-tbl .next-md-date {
        grid-area: date;
        text-align: center;
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--fg-3);
    }
    .next-md-tbl tr > td:nth-child(2) {
        grid-area: hteam;
        min-width: 0;
        max-width: none;
    }
    .next-md-tbl tr > td:nth-child(3) {
        grid-area: score;
        text-align: center;
        padding: 0 2px;
        font-size: 15px;
    }
    .next-md-tbl tr > td:nth-child(4) {
        grid-area: ateam;
        min-width: 0;
        max-width: none;
    }
    .next-md-tbl .next-md-name { font-size: 13px; }
    .next-md-tbl .next-md-meta { gap: 6px; margin-top: 4px; }

    /* Form badges collapse to 4px colored bars under the team
       name — a visual "recent form underline" rather than five
       mono W/D/L squares. Scoped to the next-md-tbl so the
       widget on the home page and league-aside widgets keep
       their full badges. */
    .next-md-tbl .badge-W,
    .next-md-tbl .badge-D,
    .next-md-tbl .badge-L {
        width: 8px;
        height: 4px;
        padding: 0;
        margin: 0 1px 0 0;
        font-size: 0;
        color: transparent;
        border-radius: 2px;
        line-height: 0;
    }

    /* PPG pills shrink a touch so two sit flanking the score
       row without crowding the team names above them. */
    .next-md-tbl .ppg-badge {
        min-width: 34px;
        padding: 2px 6px;
        font-size: 10px;
    }

    /* Secondary stats tables used by roster/player/match pages.
       Cell padding bumped to 7px vertical / 8px horizontal so
       numbers have breathing room on both sides of the cell
       (was 5px, which made right-aligned values and tinted %-cells
       kiss the cell edge). Last cell in every row gets extra
       right-padding so the final column doesn't sit flush against
       the card's rounded-corner edge. */
    .tp-season-tbl, .tp-pct-tbl, .tp-impact-tbl, .tp-ha-tbl,
    .mp-ss-tbl, .mp-standings-tbl, .pp-stats-tbl, .pp-detail-tbl,
    .tp-league-tbl, .gbm-table, .ref-comp-tbl, .ref-matches-tbl {
        font-size: 12px;
    }
    .tp-season-tbl th, .tp-pct-tbl th, .tp-impact-tbl th, .tp-ha-tbl th,
    .mp-ss-tbl th, .mp-standings-tbl th, .pp-stats-tbl th, .pp-detail-tbl th,
    .tp-league-tbl th, .gbm-table th, .ref-comp-tbl th, .ref-matches-tbl th,
    .tp-season-tbl td, .tp-pct-tbl td, .tp-impact-tbl td, .tp-ha-tbl td,
    .mp-ss-tbl td, .mp-standings-tbl td, .pp-stats-tbl td, .pp-detail-tbl td,
    .tp-league-tbl td, .gbm-table td, .ref-comp-tbl td, .ref-matches-tbl td {
        padding: 7px 8px;
    }
    /* First/last cells get extra edge padding so values don't kiss
       the card's rounded-corner edge. Scoped to tabular tables that
       stay as a table-grid at this breakpoint; admin-table and
       ak-table deliberately omitted because they transform into
       block-stacked card rows below, where the tr carries the
       card padding and cells should sit flush inside that gutter. */
    .tp-season-tbl tr > :last-child, .tp-pct-tbl tr > :last-child,
    .tp-impact-tbl tr > :last-child, .tp-ha-tbl tr > :last-child,
    .mp-ss-tbl tr > :last-child, .mp-standings-tbl tr > :last-child,
    .pp-stats-tbl tr > :last-child, .pp-detail-tbl tr > :last-child,
    .tp-league-tbl tr > :last-child, .gbm-table tr > :last-child,
    .ref-comp-tbl tr > :last-child, .ref-matches-tbl tr > :last-child,
    .dt tr > :last-child, .next-md-tbl tr > :last-child,
    .fix-standings-tbl tr > :last-child {
        padding-right: 14px;
    }
    .tp-season-tbl tr > :first-child, .tp-pct-tbl tr > :first-child,
    .tp-impact-tbl tr > :first-child, .tp-ha-tbl tr > :first-child,
    .mp-ss-tbl tr > :first-child, .mp-standings-tbl tr > :first-child,
    .pp-stats-tbl tr > :first-child, .pp-detail-tbl tr > :first-child,
    .tp-league-tbl tr > :first-child, .ref-comp-tbl tr > :first-child,
    .ref-matches-tbl tr > :first-child, .dt tr > :first-child,
    .fix-standings-tbl tr > :first-child {
        padding-left: 14px;
    }

    /* ------------------------------------------------------
       Tab bars: keep horizontally scrollable but add a fade
       ------------------------------------------------------ */
    .tp-tabs, .pp-tabs, .team-tabs, .comp-tabs, .group-tabs,
    .mdb-date-tabs { -webkit-overflow-scrolling: touch; }
    .tp-tab, .pp-tab, .team-tab { padding: 11px 12px; font-size: 13px; }

    /* ------------------------------------------------------
       Team page fixture rows (Partíos tab). 5 children per
       row: date, home team, score pill, away team, and an
       optional goal-timeline bar (spans full width on desktop
       via grid-column: 1 / -1).

       Mobile layout reflows into three clean rows:
         [date eyebrow centered]
         [home name  | score pill | away name]
         [goal timeline bar — full width]

       NB: grid-template-areas must form RECTANGLES per named
       area. The earlier attempt had `score` spanning cols 2-3
       on row 1 and col 2 on row 2 — an L-shape — which is
       silently invalid, dropping every cell back to auto-
       placement and producing the "whole mess" on screen.
       ------------------------------------------------------ */
    .tp-fix-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "date  date  date"
            "home  score away"
            "tl    tl    tl";
        column-gap: 10px;
        row-gap: 6px;
        padding: 10px 12px;
    }
    .tp-fix-date {
        grid-area: date;
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--fg-3);
        text-align: center;
    }
    .tp-fix-home {
        grid-area: home;
        text-align: right;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }
    .tp-fix-score {
        grid-area: score;
        justify-self: center;
        align-self: center;
        white-space: nowrap;
    }
    .tp-fix-row > :nth-child(4) {
        grid-area: away;
        text-align: left;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }
    .tp-fix-timeline {
        /* grid-area is a shorthand that sets grid-column-start/end
           too, so it overrides the desktop `grid-column: 1 / -1`
           cleanly on its own. Do NOT add `grid-column: auto` here
           — that would re-override the named-area placement and
           auto-place the timeline into a single-column cell, which
           is what made the bar render at ~1/3 the row width. */
        grid-area: tl;
        padding: 10px 4px 0;
    }
    .tp-fix-bar { height: 5px; }

    /* ------------------------------------------------------
       Team page (/#/team/:codequipo/:group).
       Hero H1 was flex-wrap with [name · "Stats" · fav · add]
       inline — at phone widths the decorative light "Stats"
       word and the two fav-buttons wrapped onto a second row,
       looking crammed. Mobile fix: drop the "Stats" label, turn
       the H1 into a block with padding-right reserving space
       for the fav buttons which pin to top-right of the name
       block. Crest shrinks from 72 → 56, comp-select goes
       full-width, "Próximos partíos" panel blends into the
       hero column instead of sitting as a sidebar box.
       ------------------------------------------------------ */
    .tp-hero-inner { padding: 16px 14px; gap: 14px; }
    .tp-hero-left { gap: 14px; align-items: flex-start; }
    .tp-hero-crest { width: 56px; height: 56px; border-radius: 10px; padding: 5px; }
    .tp-hero-name {
        display: block;
        position: relative;
        padding-right: 70px;
        min-height: 30px;       /* same reason as pp-hero-name above */
        font-size: 19px;
        line-height: 1.2;
        gap: 0;
    }
    .tp-hero-name .tp-hero-light { display: none; }
    .tp-hero-name .fav-btn,
    .tp-hero-name .fav-btn-add {
        position: absolute;
        top: 0;
        margin: 0;
        vertical-align: baseline;
    }
    .tp-hero-name .fav-btn { right: 34px; }
    .tp-hero-name .fav-btn-add { right: 0; }
    .tp-hero-sub { margin-top: 4px; font-size: 11px; line-height: 1.4; }
    .tp-hero-selectors { margin-top: 10px; }
    .tp-comp-select { width: 100%; max-width: 100%; font-size: 13px; }
    .tp-hero-right { min-width: 0; width: 100%; }
    .tp-upcoming { padding: 10px 12px; }
    .tp-upcoming-title { font-size: 9px; margin-bottom: 6px; }
    .tp-upcoming-link { padding: 6px 0; font-size: 12px; gap: 8px; }
    .tp-upcoming-date { font-size: 10px; white-space: nowrap; }

    /* ------------------------------------------------------
       Stat cards — 3 tall cards stacked 1-col wastes phone
       space. Switch to 2-col with the PPG card spanning full
       width (it's the lead stat, visually richest), and
       Marcaos/Encaxaos flanking each other on row 2.
       ------------------------------------------------------ */
    .tp-stat-cards {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "ppg ppg" "gpg capg";
        gap: 8px;
    }
    .tp-stat-cards > :nth-child(1) { grid-area: ppg; }
    .tp-stat-cards > :nth-child(2) { grid-area: gpg; }
    .tp-stat-cards > :nth-child(3) { grid-area: capg; }
    .tp-stat-card { padding: 12px 14px; gap: 4px; }
    .tp-stat-big { min-width: 48px; padding: 5px 10px; font-size: 17px; }
    .tp-stat-num { font-size: 22px; }
    .tp-stat-suffix { font-size: 11px; }

    /* ------------------------------------------------------
       Season breakdown table (tp-season-tbl) — 10 cols don't
       fit at phone widths even with padding-shrunk cells, so
       we hide the three goal cols (GF/GC/DG) AND the 5-badge
       form column. What's left reads cleanly:
         Casa/Fuera/Total · PX · V · E · D · PPX
       Form is derivable from V/E/D; goals-for/against are
       their own informative block elsewhere on the page.
       ------------------------------------------------------ */
    .tp-season-tbl th:nth-child(6), .tp-season-tbl td:nth-child(6),
    .tp-season-tbl th:nth-child(7), .tp-season-tbl td:nth-child(7),
    .tp-season-tbl th:nth-child(8), .tp-season-tbl td:nth-child(8),
    .tp-season-tbl th:nth-child(10), .tp-season-tbl td:nth-child(10) { display: none; }
    .tp-season-tbl th, .tp-season-tbl td { padding: 7px 6px; font-size: 12px; }
    .tp-league-tbl .badge-W, .tp-league-tbl .badge-D, .tp-league-tbl .badge-L {
        width: 16px; height: 16px; font-size: 9px; margin-right: 1px;
    }

    /* Percentage tables (tp-pct-tbl) — already 4 cols, tighter */
    .tp-pct-tbl th, .tp-pct-tbl td { padding: 7px 5px; font-size: 12px; }
    .tp-goals-big { font-size: 28px; }
    .tp-goals-sub { font-size: 10px; }

    /* ------------------------------------------------------
       Player-impact table (tp-impact-tbl) — 10 cols.
       Hide PX/TIT/V/E/D and Eq/90 on phones; keep player ·
       Gol · Pts · %Pts bar. The bar cell is the value-dense
       one, so the trimmed row still reads as "who is driving
       results".
       ------------------------------------------------------ */
    .tp-impact-tbl th:nth-child(2), .tp-impact-tbl td:nth-child(2),
    .tp-impact-tbl th:nth-child(3), .tp-impact-tbl td:nth-child(3),
    .tp-impact-tbl th:nth-child(4), .tp-impact-tbl td:nth-child(4),
    .tp-impact-tbl th:nth-child(5), .tp-impact-tbl td:nth-child(5),
    .tp-impact-tbl th:nth-child(6), .tp-impact-tbl td:nth-child(6),
    .tp-impact-tbl th:nth-child(10), .tp-impact-tbl td:nth-child(10) { display: none; }
    .tp-impact-bar-wrap { max-width: 80px; height: 18px; }
    .tp-impact-pct { font-size: 10px; line-height: 18px; padding: 0 4px; }

    /* ------------------------------------------------------
       Player groups (pareyes / tríos / cuartetos) — 2-col
       grid of "Meyores" vs "Peores" becomes a single stack
       (best on top, then worst). The header row stays 2-col
       so the green/red labels still sit side-by-side and
       frame the content below them.
       ------------------------------------------------------ */
    .tp-grp-header-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .tp-grp-item-row { grid-template-columns: 1fr; gap: 8px; }
    .tp-grp-item { padding: 10px 12px; min-height: 0; }
    .tp-grp-card-head { padding: 8px 10px; font-size: 10px; }
    .tp-grp-pct-big { font-size: 18px; }
    .tp-grp-player { font-size: 12px; }
    .tp-grp-tabs { width: 100%; justify-content: flex-start; flex-wrap: wrap; }

    /* ------------------------------------------------------
       Goal-timing bar chart — 9 or 6 columns at phone width
       need microscopic labels. Shrink chart height a touch
       and drop label letter-spacing so "0'-10'" fits under
       each ~36px-wide column.
       ------------------------------------------------------ */
    .tp-bar-chart { height: 120px; gap: 3px; }
    .tp-bar-pct { font-size: 9px; }
    .tp-bar-label { font-size: 8px; letter-spacing: 0; }
    .tp-bar { max-width: 24px; }
    .tp-subtabs { width: 100%; justify-content: center; }
    .tp-timing-block h3 { font-size: 12px; margin-bottom: 10px; }

    /* ------------------------------------------------------
       Cards summary (totalYc / totalRc / ratio) — stays 3 col
       but tighter padding so the 3 big numbers don't burst
       their cells at 360px.
       ------------------------------------------------------ */
    .tp-cards-summary { gap: 6px; padding: 10px 0; }
    .tp-cards-item { padding: 10px 12px; }
    .tp-cards-big { font-size: 20px; }
    .tp-cards-label { font-size: 9px; }

    /* ------------------------------------------------------
       Team page sidebar mini-standings (.tp-league-tbl).
       8 cols is way too many for a 320px card; hide the
       stat-breakdown cols on mobile — pos · team · PX · DG
       · Pts is enough context at a glance. At 480 we also
       drop DG so it's 4 cols, keeping numbers off the card
       edge. The card itself has `overflow: hidden` on the
       rounded corners, so anything that escapes gets clipped
       — that was what made the Pts column look "barely in
       the container" on earlier widths.
       ------------------------------------------------------ */
    .tp-league-tbl th:nth-child(4), .tp-league-tbl td:nth-child(4),   /* V */
    .tp-league-tbl th:nth-child(5), .tp-league-tbl td:nth-child(5),   /* GF */
    .tp-league-tbl th:nth-child(6), .tp-league-tbl td:nth-child(6)    /* GC */
    { display: none; }
    .tp-league-tbl th, .tp-league-tbl td { padding: 7px 6px; font-size: 12px; }
    .tp-st-name { max-width: none; }
    .tp-rank { width: 18px; height: 18px; font-size: 9px; }

    /* ------------------------------------------------------
       Bar-chart cards (Máximos goleadores / Más partíos /
       etc on team squad tab). Desktop uses the inline
       `width: X%` to size each bar proportionally to its
       rank — but on mobile a narrow bar clips its
       <strong>value against the card's `overflow: hidden`
       rounded corner.

       Fix: app.js now emits both `width: X%` and `--pct: X%`
       on each bar. At phone widths we pin the element to
       full card width so the value never clips, and the
       proportional fill is painted as a linear-gradient
       background that stops at var(--pct). Same visual
       signal (ranked bar length), no overflow problem.
       ------------------------------------------------------ */
    .bar-chart-grid { gap: 10px; }
    .bar-chart-card-title { padding: 10px 14px 6px; font-size: 12px; }
    .bar-chart { padding: 4px 0; }
    .bar-item {
        width: auto !important;
        min-width: 0;
        margin: 3px 12px;
        padding: 7px 12px;
        font-size: 13px;
        background:
            linear-gradient(to right,
                color-mix(in oklch, var(--pitch-500) 18%, transparent) 0 var(--pct, 100%),
                transparent var(--pct, 100%) 100%);
    }
    .bar-item:hover {
        background:
            linear-gradient(to right,
                color-mix(in oklch, var(--pitch-500) 28%, transparent) 0 var(--pct, 100%),
                transparent var(--pct, 100%) 100%);
    }
    .bar-item > strong {
        flex-shrink: 0;
        margin-left: 10px;
    }

    /* Admin config-row already rearranged at 1099; tighten gap */
    .config-row { padding: 10px 14px; }
    .config-cat-header { padding: 12px 14px; }

    /* ------------------------------------------------------
       Admin pages (/#/config/*, /#/api-key, /#/incidencias,
       /#/gender). These are admin-only so less-used surfaces,
       but they were getting zero mobile attention — tables
       overflow, action-button rows crammed, form rows sat
       side-by-side.

       Plan:
       - admin-table + ak-table: transform every row into a
         card with a stacked label-above-value layout. Table
         headers hide; values get aria-style inline labels
         via ::before pseudo with data-lbl attrs where
         informative. Simpler path: just stack all cells
         under the first (identity) cell as a block.
       - admin-actions: wrap button row, bigger touch targets
       - ak-form-wrap: stack input + submit button
       - gp-row (gender page): compact card layout
       - inc-card-header: stack match info over team name
       ------------------------------------------------------ */

    /* ------------------------------------------------------
       Admin tables (users / tokens / api-keys history) on mobile.

       Each <tr> becomes a standalone card. Structure:
         1. First cell = identity heading (email / token label /
            masked key). Bold, larger.
         2. Cells with data-lbl="Propietariu" etc. render as a
            labeled row: mono uppercase eyebrow on the left in a
            fixed-width col, value on the right. Pseudo-element
            pulls the label text from attr(data-lbl).
         3. Last cell (.admin-actions) hosts the button row with
            a dashed-rule separator above — actions clearly sit
            below the meta stack as a footer band.

       The labels are crucial — without them the stacked ✓ / —
       cells on the users card give the user no idea which
       state corresponds to which column (Admin vs TOTP vs
       Disabled). */
    .admin-table, .ak-table,
    .admin-table thead, .ak-table thead,
    .admin-table tbody, .ak-table tbody,
    .admin-table tr, .ak-table tr,
    .admin-table td, .ak-table td { display: block; }
    .admin-table thead, .ak-table thead { display: none; }
    .admin-table, .ak-table {
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        overflow: hidden;
        background: var(--bg-surface);
        box-shadow: var(--shadow-xs);
    }
    .admin-table tr, .ak-table tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-subtle);
    }
    .admin-table tbody tr:last-child, .ak-table tbody tr:last-child { border-bottom: 0; }
    .admin-table td, .ak-table td {
        padding: 0;
        border: 0;
        background: transparent;
    }
    /* Identity heading (first cell) */
    .admin-table tr > td:first-child,
    .ak-table tr > td:first-child {
        font-weight: 700;
        font-size: 15px;
        color: var(--fg-1);
        letter-spacing: -0.01em;
        padding-bottom: 10px;
        word-break: break-word;
    }
    .admin-table tr > td:first-child small,
    .ak-table tr > td:first-child small {
        font-weight: 500;
        color: var(--fg-3);
        font-family: var(--font-mono);
        font-size: 11px;
        margin-left: 4px;
    }
    /* Labeled meta rows — attr() pulls the column name for
       the left column of a 2-col grid. */
    .admin-table td[data-lbl], .ak-table td[data-lbl] {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        column-gap: 10px;
        align-items: baseline;
        padding: 5px 0;
        font-size: 13px;
        color: var(--fg-1);
    }
    .admin-table td[data-lbl]::before, .ak-table td[data-lbl]::before {
        content: attr(data-lbl);
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--fg-3);
        justify-self: start;
    }
    /* Status cell chips — bright color for "yes", muted for
       "no", amber for pending, red for disabled. Scoped to
       inline spans inside admin-table td[data-lbl]. */
    .admin-yes {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        background: var(--tint-green);
        color: var(--pitch-700);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        border-radius: 4px;
    }
    [data-theme="dark"] .admin-yes { color: var(--pitch-400); }
    .admin-no {
        font-family: var(--font-mono);
        color: var(--fg-4);
        font-size: 13px;
    }
    .admin-pending {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        background: var(--sunrise-100);
        color: var(--sunrise-700);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        border-radius: 4px;
    }
    [data-theme="dark"] .admin-pending { background: color-mix(in oklch, var(--sunrise-500) 22%, transparent); color: var(--fg-warning); }
    .admin-danger-yes {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        background: var(--whistle-100);
        color: var(--whistle-700);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        border-radius: 4px;
    }
    [data-theme="dark"] .admin-danger-yes { background: color-mix(in oklch, var(--whistle-500) 22%, transparent); color: var(--fg-danger); }

    /* Action row footer — visually separate from meta stack
       via a dashed hairline + extra top padding. Apply
       display:flex HERE on the td.admin-actions directly
       rather than on the generic .admin-actions class: the
       td-stacking rule above (.admin-table td { display: block })
       has specificity 0,1,1 and was clobbering the generic
       flex rule at 0,1,0, so buttons were stacking as
       inline-block defaults — no gap, no flex-grow, no
       wrapping behavior. Scoping to .admin-table td.admin-actions
       (0,2,1) lets display:flex actually win. */
    .admin-table td.admin-actions, .ak-table td.admin-actions {
        display: flex;
        flex-wrap: wrap;
        column-gap: 8px;
        row-gap: 10px;
        padding: 12px 0 0;
        margin-top: 10px;
        border-top: 1px dashed var(--border-subtle);
    }
    /* Buttons as equal-growth flex items. `flex: 1 1 110px` —
       min basis 110px, grow 1 so remaining row width splits
       evenly. Consistent tap targets instead of each button
       shrinking to its own text width.

       .danger (Borrar / Revocar) gets flex-basis 100% so it
       wraps onto its own full-width row — visually separating
       destructive action from everyday toggles. */
    .admin-table td.admin-actions button,
    .ak-table td.admin-actions button {
        flex: 1 1 110px;
        min-height: 38px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 600;
    }
    .admin-table td.admin-actions button.danger,
    .ak-table td.admin-actions button.danger { flex: 1 1 100%; }
    /* ak-key-cell (masked api key preview) — keep mono, let
       it wrap if very long. */
    .ak-key-cell {
        font-family: var(--font-mono);
        font-size: 13px;
        word-break: break-all;
    }

    /* API-key form (input + button side-by-side on desktop) */
    .ak-form-wrap form {
        flex-direction: column;
        gap: 10px;
    }
    .ak-input, .ak-btn { width: 100%; }
    .ak-history-header { flex-direction: column; align-items: stretch; gap: 8px; }
    .ak-current { padding: 14px 16px; }
    .ak-current-value { font-size: 14px; }
    .ak-form-wrap, .ak-history { padding: 14px; }

    /* ------------------------------------------------------
       Gender management (/#/gender).
       - List view (.gp-row): 4-col grid reflows into a 2-row
         card — photo+info on top, status+actions bottom so
         the action buttons (♂/♀/skip) have room on their own
         line without crushing the name.
       - Card view (.gp-cards): tighten minmax to 150px so
         2 cards fit a 360px phone viewport.
       ------------------------------------------------------ */
    .gp-toolbar { flex-wrap: wrap; gap: 10px; }
    .gp-row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas:
            "photo  info    status"
            "photo  actions actions";
        gap: 6px 10px;
        padding: 10px 12px;
        align-items: center;
    }
    .gp-row > :nth-child(1) { grid-area: photo; align-self: start; }
    .gp-row > :nth-child(2) { grid-area: info; }
    .gp-row > :nth-child(3) { grid-area: status; justify-self: end; }
    .gp-row > :nth-child(4) { grid-area: actions; justify-self: end; }
    .gp-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .gp-card { padding: 12px; }
    .gp-card-photo { width: 48px; height: 48px; }

    /* ------------------------------------------------------
       Incidencias (/#/incidencias).
       Header flex-row with match info on left + team on right
       — stacks on mobile with team name below.
       ------------------------------------------------------ */
    .inc-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .inc-stat { padding: 12px; }
    .inc-stat-num { font-size: 22px; }
    .inc-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 14px;
    }
    .inc-card-team { font-size: 13px; }
    .inc-card-body { padding: 8px 14px; }
    .inc-violation-main { flex-wrap: wrap; gap: 6px 10px; }

    /* Config hub tool tiles — already grid auto-fill; just
       tighten padding on phones. */
    .config-tools { gap: 8px; }
    .config-tool-link { padding: 12px 14px; grid-template-columns: 40px 1fr; gap: 12px; }
    .config-tool-icon { width: 40px; height: 40px; font-size: 18px; }

    /* Scraper config category rows — already rearranged at
       1099 via grid-template-areas. At phone widths, tighten
       the padding so they don't look cavernous, and make
       progress chip wrap cleanly under the comp info instead
       of sitting on its own line stranded. */
    .config-cat-header { flex-wrap: wrap; row-gap: 6px; }
    .config-category { margin-bottom: 12px; }

    /* Lineups: already stack vertically at 880px — also shrink dorsal col */
    .mp-lineup-row { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; font-size: 12px; padding: 5px 0; }

    /* Auth pages stay centered but use less padding */
    .auth-card { padding: 24px 20px; }

    /* Widgets (homepage sidebar) */
    .widget-title { padding: 12px 14px 8px; font-size: 13px; }
    .widget-row { padding: 8px 12px; }

    /* Page title */
    .page-h1 { font-size: 20px; margin: 4px 0 14px; }
}

@media (max-width: 480px) {
    /* Very narrow phones — final squeeze */
    :root { --header-h: 52px; }

    .logo-text { font-size: 16px; }
    .top-bar-actions { gap: 6px; }
    #app { padding: 10px 8px 80px; }

    /* Heroes */
    .ps-hero, .tp-hero-inner, .pp-hero-inner, .team-hero-inner,
    .ref-hero, .ref-hero-inner, .mp-hero-inner { padding: 14px 12px; }
    .pp-hero-name, .tp-hero-name, .team-hero-name { font-size: 18px; }
    .pp-hero-photo { width: 64px; height: 64px; }
    .pp-dorsal { min-width: 26px; height: 26px; font-size: 14px; }
    .page-h1, .ps-hero-title { font-size: 19px; }

    /* Match hero really small */
    .mp-hero-team-crest { width: 34px; height: 34px; padding: 3px; border-radius: 8px; }
    .mp-hero-team-name { font-size: 12px; }
    .mp-hero-score { font-size: 30px; }
    .mp-hero-vs { font-size: 22px; }

    /* Widget/cards padding */
    .league-hero-card, .tp-card, .pp-card, .mp-card, .pp-analysis, .ref-card, .goals-by-minute { padding: 12px; }

    /* Competition tile: 3 cols at very narrow phones.
       Children in the tile are: crest · info-box1 (name+type)
       · info-box2 (goals/match) · info-box2 (equipos count)
       · view-btn. view-btn is already hidden at 880. To go to
       3 cols without the 4th child wrapping to row 2, hide the
       goals/match cell and keep the equipos count (it's the
       more universally informative stat of the two on a quick
       landing tile). Uses positional nth-child because
       nth-of-type counts ALL div siblings, not just .info-box2s. */
    .competition-tile {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        padding: 8px 10px;
        gap: 8px;
    }
    .competition-tile > :nth-child(3) { display: none; }
    .competition-tile .crest { width: 28px; height: 28px; }

    /* Player-search: hide cat badge too; avatar + name + team + 3 stats */
    .ps-table tbody td:nth-child(4) { display: none; }

    /* Ref stat strip: one col */
    .ref-stat-strip { grid-template-columns: 1fr; }

    /* PP-p90 grid: single col when v narrow */
    .pp-p90-grid { grid-template-columns: 1fr; }

    /* Squad row on very narrow: drop avatar in name */
    .squad-row { padding: 8px 10px; }

    /* Team page: single-col stat cards at very narrow, crest smaller */
    .tp-hero-crest { width: 48px; height: 48px; padding: 4px; border-radius: 9px; }
    .tp-hero-name { font-size: 18px; padding-right: 62px; }
    .tp-stat-cards { grid-template-columns: 1fr; grid-template-areas: "ppg" "gpg" "capg"; }
    /* Season table: also hide the per-venue V/E/D breakdown at this width
       so only Casa/Fuera/Total · PX · PPX · form remains — a 4-col table. */
    .tp-season-tbl th:nth-child(3), .tp-season-tbl td:nth-child(3),
    .tp-season-tbl th:nth-child(4), .tp-season-tbl td:nth-child(4),
    .tp-season-tbl th:nth-child(5), .tp-season-tbl td:nth-child(5) { display: none; }
    /* Cards-summary: 2-col with ratio spanning */
    .tp-cards-summary { grid-template-columns: 1fr 1fr; }
    .tp-cards-item:nth-child(3) { grid-column: 1 / -1; }
    /* Bar chart labels vanish on very narrow (keep pct + bar only) */
    .tp-bar-label { display: none; }

    /* Mini standings (.tp-league-tbl) at 480: also drop DG col so
       only pos · team · PX · Pts show — 4 clean columns that fit
       any 320-360px phone without edge-clipping. */
    .tp-league-tbl th:nth-child(7), .tp-league-tbl td:nth-child(7) { display: none; }

    /* Fixture row: datetime eyebrow gets smaller */
    .fixture-row { padding: 9px 10px; gap: 2px 8px; }
    .fixture-datetime { font-size: 9px; }

    /* Breadcrumb */
    .breadcrumb { font-size: 9px; padding: 6px 0; }

    /* Filter pills */
    .filter-pill, .group-tab { font-size: 11px; padding: 0 10px; }

    /* Config-rows even tighter */
    .config-row { padding: 10px 12px; gap: 8px; }

    /* Incidencias stats to single column; the 4-stat row becomes
       a vertical list at this width. */
    .inc-stats { grid-template-columns: 1fr; }

    /* Gender card grid: single column at this width — info
       cards with photo, name, meta, buttons need the width
       to breathe. */
    .gp-cards { grid-template-columns: 1fr; }
}

/* Fav-btn / fav-btn-add stay at 30x30 on phones too.
   The earlier 36x36 bump for a bigger tap target ended up
   feeling chunky against the hero name and — with the
   absolute-positioned version inside the H1 — spilled
   past the H1 bottom edge into the meta row below. 30px
   is still tappable; the hero is calm, not a gesture-heavy
   surface. No mobile size override needed. */

/* ------------------------------------------------------
   Hover-capable vs touch: suppress desktop hovers on
   touch devices — translate transforms + borderline-
   accessible color shifts can stick on tap, which reads
   as "that cell is still selected" on mobile.
   ------------------------------------------------------ */
@media (hover: none) {
    .club-tile:hover { transform: none; }
    .mp-h2h-pill:hover { transform: none; }
    .config-tool-link:hover { transform: none; }
}