:root {
    --bg-primary: #f0f2f5; --bg-card: #ffffff; --pl-purple: #38003c;
    /* --pl-purple itself is used BOTH as a background (buttons, header, chip pills - these are
       always-dark surfaces with white text, correctly unaffected by page theme) AND as a text
       color (headings, labels, stat values, on the page's own background). The two need to move
       independently in dark mode: buttons should stay the same near-black purple they always
       were, but purple TEXT on a now-dark page needs to lighten or it reads as barely-there dark-
       on-dark - which was the single biggest source of "this looks bad" once the actual dark
       colors were fixed. --pl-purple-text is what every `color: var(--pl-purple-text)` in this file
       was switched to; --pl-purple itself (and every `background:`) is untouched. Same value as
       --pl-purple in light mode - this only diverges once dark mode is active. */
    --pl-purple-text: #38003c;
    /* A deliberately different color from --pl-purple-text for the Games list's "this is your
       player" marking - purple is already the site's brand accent everywhere else on this page
       (headers, buttons, live-mode toggle), so reusing it for "mine" made it blend in rather
       than stand out where it matters most (a DefCon/BPS table sorted by the stat, not by
       ownership). Blue reads as clearly distinct at a glance. */
    --lx-mine: #2563eb; --lx-mine-soft: rgba(37,99,235,0.08);
    --pl-green: #00ff87; --pitch-green-dark: #22c55e; --text-dark: #1e293b;
    --text-muted: #64748b; --border-color: #e2e8f0;
    /* A recessed surface WITHIN a card - toggle-switch tracks, table headers, hover states,
       nested stat panels. One level more muted than --bg-card, same relationship in both
       themes: barely-there gray tint in light mode, a shade lighter than the card in dark mode
       (so it still reads as "recessed", not "the card just changed colour"). Was ~40 instances
       of two near-identical hardcoded hex values (#f8fafc/#f1f5f9) before this existed - none of
       them had a reason to stay fixed-light once dark mode existed. */
    --bg-subtle: #f1f5f9;
    /* One step darker again - hover states, scrollbar thumbs, disabled-state fills. */
    --bg-subtle-2: #cbd5e1;
    --card-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.08);
    --focus-ring: 0 0 0 3px rgba(56, 0, 60, 0.12);

    /* "nu" design tokens - the lighter, flatter system introduced with the landing page
       redesign (2026-08). Warm-neutral base, PL purple as the single accent, green/red
       reserved for up/down deltas only. Being rolled out landing -> model surfaces ->
       (if it lands) the whole site, so keep new work on these vars, not the ones above. */
    --nu-bg: #faf9f8;
    --nu-surface: #ffffff;
    --nu-surface-2: #f4f2ef;
    --nu-border: #e9e6e1;
    --nu-border-strong: #d8d4cd;
    --nu-text: #1b1a19;
    --nu-text-muted: #6c6a66;
    --nu-text-faint: #96938d;
    --nu-accent: #38003c;
    --nu-accent-hover: #4c0052;
    --nu-accent-soft: #f3e9f4;
    --nu-up: #15803d;
    --nu-down: #dc2626;
    --nu-radius: 10px;
    --nu-radius-lg: 16px;
    --nu-shadow: 0 1px 2px rgba(27,26,25,0.04), 0 8px 24px rgba(27,26,25,0.06);

    /* Compare Players' Head to Head card needs 2-3 distinct per-slot accents (site purple reused
       as "player 1" reads as an unrelated near-black smudge on a dark card, same reason
       --nu-accent itself swaps below) - own theme-aware tokens rather than fixed hex so slot 1
       stays recognizably "the site's purple" in both themes instead of one fixed shade that only
       works against a light background. */
    --h2h-slot-1: #38003c; --h2h-slot-1-rgb: 56,0,60;
    --h2h-slot-2: #2563eb; --h2h-slot-2-rgb: 37,99,235;
    --h2h-slot-3: #b45309; --h2h-slot-3-rgb: 180,83,9;
}

/* Dark mode: redefines only the structural tokens (page/card backgrounds, default text, borders)
   - the ones nearly everything on the site already reads through var(...) for. Brand/accent
   colors (--pl-purple, --nu-accent, badge colors, etc.) are deliberately left alone: they're
   saturated enough to still read fine against a darkened card, and are used inconsistently
   enough as both text-color and background-color across the codebase that flipping them
   site-wide risks breaking more contrast than it fixes. Two ways in: prefers-color-scheme (no
   explicit choice made) or [data-theme="dark"] (the toggle in the header, persisted to
   localStorage - see components.py). [data-theme="light"] always wins over system preference. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #14151a; --bg-card: #1d1f26; --bg-subtle: #262932; --bg-subtle-2: #3a3e48; --pl-purple-text: #d0a3e0; --text-dark: #e7e9ee;
        --text-muted: #98a0ac; --border-color: #33363f;
        --card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.35);
        --nu-bg: #14151a; --nu-surface: #1d1f26; --nu-surface-2: #262932;
        --nu-border: #33363f; --nu-border-strong: #40444f;
        --nu-text: #e7e9ee; --nu-text-muted: #98a0ac; --nu-text-faint: #6b6f7a;
        --nu-accent-soft: #2a1f2c; --nu-accent: #d0a3e0;
        --h2h-slot-1: #d0a3e0; --h2h-slot-1-rgb: 208,163,224;
        --h2h-slot-2: #60a5fa; --h2h-slot-2-rgb: 96,165,250;
        --h2h-slot-3: #fbbf24; --h2h-slot-3-rgb: 251,191,36;
        --lx-mine: #60a5fa; --lx-mine-soft: rgba(96,165,250,0.12);
    }
}
:root[data-theme="dark"] {
    --bg-primary: #14151a; --bg-card: #1d1f26; --bg-subtle: #262932; --bg-subtle-2: #3a3e48; --pl-purple-text: #d0a3e0; --text-dark: #e7e9ee;
    --text-muted: #98a0ac; --border-color: #33363f;
    --card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.35);
    --nu-bg: #14151a; --nu-surface: #1d1f26; --nu-surface-2: #262932;
    --nu-border: #33363f; --nu-border-strong: #40444f;
    --nu-text: #e7e9ee; --nu-text-muted: #98a0ac; --nu-text-faint: #6b6f7a;
    --nu-accent-soft: #2a1f2c; --nu-accent: #d0a3e0;
    --h2h-slot-1: #d0a3e0; --h2h-slot-1-rgb: 208,163,224;
    --h2h-slot-2: #60a5fa; --h2h-slot-2-rgb: 96,165,250;
    --h2h-slot-3: #fbbf24; --h2h-slot-3-rgb: 251,191,36;
    --lx-mine: #60a5fa; --lx-mine-soft: rgba(96,165,250,0.12);
}
/* Tinted status banners/alerts/highlights (purple/red/blue-on-pastel) don't fit the plain
   structural-token swap above - they're colour-coded on purpose, not neutral surfaces, so each
   gets its own darker/muted tint here instead of just inheriting --bg-card. Small inline
   badges/chips (delta arrows, position tags, the "Free" pill) are deliberately NOT included here
   - a little saturated colour on a dark card reads fine at that size, same as it would on any
   other dark-themed site; it's specifically the larger banners/panels that looked like a stray
   light-mode card left behind on an otherwise dark page. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .plan-mode-banner-slim.mode-wildcard { background: #2f1f42; color: #d8b4fe; }
    :root:not([data-theme="light"]) .plan-mode-banner-slim.mode-free_hit { background: #3d1f1f; color: #fca5a5; }
    :root:not([data-theme="light"]) .tips-callout { background: linear-gradient(135deg, #2f1f42 0%, #26182f 100%); border-color: #5b3a7a; }
    :root:not([data-theme="light"]) .tips-callout-row { color: #d8b4fe; }
    :root:not([data-theme="light"]) .tips-callout-row a,
    :root:not([data-theme="light"]) .tips-callout-row strong,
    :root:not([data-theme="light"]) .tips-callout-close { color: #e9d5ff; }
    :root:not([data-theme="light"]) .injury-alert-banner { background: #3d1f1f; border-color: #7f2f2f; color: #fca5a5; }
    :root:not([data-theme="light"]) .override-guest-nudge,
    :root:not([data-theme="light"]) .override-field-row.is-overridden,
    :root:not([data-theme="light"]) .fdr2-card.is-overridden { background: #1a2c42; border-color: #3a5a7a; color: #93c5fd; }
    :root:not([data-theme="light"]) .override-field-control input.field-dirty { background: #1a2c42 !important; border-color: #3a5a7a !important; }
    :root:not([data-theme="light"]) .ld-tile.ld-star { background: #14261c; border-color: #2c5940; }
    :root:not([data-theme="light"]) .ld-tile.ld-star .ld-tile-v { color: #6ee7b7; }
    :root:not([data-theme="light"]) .lx-td-threat { background: #332a14; border-color: #6b5220; }
    :root:not([data-theme="light"]) .lx-td-diff { background: #241b35; border-color: #4a3a6b; }
    :root:not([data-theme="light"]) .lx-td-threat .lx-eo,
    :root:not([data-theme="light"]) .lx-td-threat .lx-tc-eo { color: #f0b93f; }
    :root:not([data-theme="light"]) .lx-td-threat .lx-tc { border-color: #6b5220; }
    :root:not([data-theme="light"]) .lx-td-diff .lx-tc { border-color: #4a3a6b; }
}
:root[data-theme="dark"] .plan-mode-banner-slim.mode-wildcard { background: #2f1f42; color: #d8b4fe; }
:root[data-theme="dark"] .plan-mode-banner-slim.mode-free_hit { background: #3d1f1f; color: #fca5a5; }
:root[data-theme="dark"] .tips-callout { background: linear-gradient(135deg, #2f1f42 0%, #26182f 100%); border-color: #5b3a7a; }
:root[data-theme="dark"] .tips-callout-row { color: #d8b4fe; }
:root[data-theme="dark"] .tips-callout-row a,
:root[data-theme="dark"] .tips-callout-row strong,
:root[data-theme="dark"] .tips-callout-close { color: #e9d5ff; }
:root[data-theme="dark"] .injury-alert-banner { background: #3d1f1f; border-color: #7f2f2f; color: #fca5a5; }
:root[data-theme="dark"] .override-guest-nudge,
:root[data-theme="dark"] .override-field-row.is-overridden,
:root[data-theme="dark"] .fdr2-card.is-overridden { background: #1a2c42; border-color: #3a5a7a; color: #93c5fd; }
:root[data-theme="dark"] .override-field-control input.field-dirty { background: #1a2c42 !important; border-color: #3a5a7a !important; }
:root[data-theme="dark"] .ld-tile.ld-star { background: #14261c; border-color: #2c5940; }
:root[data-theme="dark"] .ld-tile.ld-star .ld-tile-v { color: #6ee7b7; }
:root[data-theme="dark"] .lx-td-threat { background: #332a14; border-color: #6b5220; }
:root[data-theme="dark"] .lx-td-diff { background: #241b35; border-color: #4a3a6b; }
:root[data-theme="dark"] .lx-td-threat .lx-eo,
:root[data-theme="dark"] .lx-td-threat .lx-tc-eo { color: #f0b93f; }
:root[data-theme="dark"] .lx-td-threat .lx-tc { border-color: #6b5220; }
:root[data-theme="dark"] .lx-td-diff .lx-tc { border-color: #4a3a6b; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--bg-primary); color: var(--text-dark); margin: 0; padding: 0 0 60px 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Tells the browser which native-control colour scheme(s) this page actually supports and
   themes for. Without this, a browser whose OS is set to dark applies ITS OWN dark styling to
   native inputs/selects/scrollbars - independent of and inconsistent with our own dark-mode CSS -
   the moment a page's CSS shows any dark-mode awareness at all (a prefers-color-scheme block is
   enough to trigger it), regardless of whether *our* toggle is on. That produced exactly the
   "gray text I can barely read" reports: the OS was quietly dark-styling controls we never
   touched. Explicit color-scheme + the blanket rule below (every input/select/textarea gets a
   real background+color from our own tokens, so nothing is left for the browser to guess about)
   together take that decision away from the browser entirely.
   color-scheme itself is theme-independent (deliberately not swapped by the dark-mode blocks
   below) - "light dark" just means "I support rendering either way", not "I am currently dark". */
:root { color-scheme: light dark; }
input, select, textarea { background: var(--bg-card); color: var(--text-dark); }

/* Consistent, on-brand focus states instead of the default blue browser outline */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--pl-purple-text) !important;
    box-shadow: var(--focus-ring);
}
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--pl-purple);
    outline-offset: 2px;
}

/* Header / Navbar */
/* padding-top here is normally 0 (env() only resolves once a page opts into viewport-fit=cover) -
   added so the header doesn't end up drawn under the notch/dynamic island on the two pages
   (My Team, WC/FH Planner) that now request that, for the mobile-nav safe-area fix below. */
.site-header { background: var(--pl-purple); position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 18px rgba(0,0,0,0.22); padding-top: env(safe-area-inset-top, 0px); }
.site-header-inner { max-width: 1450px; margin: 0 auto; padding: 12px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.site-brand { flex-shrink: 0; display: flex; align-items: center; gap: 10px; background: #ffffff; padding: 5px 14px; border-radius: 8px; }
.site-brand img { height: 24px; display: block; object-fit: contain; }
.site-tagline { color: var(--pl-purple-text); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.01em; white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 6px; flex: 1; }
.site-nav-link { color: rgba(255,255,255,0.68); text-decoration: none; font-weight: 700; font-size: 0.82rem; padding: 8px 16px; border-radius: 20px; white-space: nowrap; transition: 0.15s ease; background: transparent; }
.site-nav-link:hover { background: rgba(255,255,255,0.09); color: white; }
.site-nav-link.active { color: white; background: rgba(255,255,255,0.16); font-weight: 800; }
/* Fixed white pill inside the always-dark-purple header, regardless of site theme - its text
   stays a fixed dark purple too rather than --pl-purple-text (which lightens for dark mode and
   would wash out against this always-white background). */
.site-nav-link-primary { background: #ffffff; color: #38003c; font-weight: 900; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.site-nav-link-primary:hover { background: #ffffff; color: #38003c; opacity: 0.9; }
.site-nav-link-primary.active { background: #ffffff; color: #38003c; }
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-menu {
    position: absolute; top: 100%; left: 0; margin-top: 0; background: var(--bg-card); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.22); padding: 6px; min-width: 190px; z-index: 600;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.12s ease;
}
/* Open/close state is driven by JS (mouseenter/mouseleave with a grace-period timer - see the
   shared header script), not raw CSS :hover - :hover alone races real mouse movement against
   transition timing and reliably loses on anything but a perfectly straight cursor path. The
   zero top-margin also means the trigger and menu are geometrically flush, so there's no gap to
   lose hover in even before JS gets involved. */
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-dropdown-menu a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--text-dark); text-decoration: none; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: var(--bg-subtle); color: var(--pl-purple-text); }
.site-auth { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.site-auth-email { color: rgba(255,255,255,0.6); font-size: 0.72rem; font-weight: 600; display: none; margin-right: 2px; }
/* Theme toggle / X / mail - the 3 round icon buttons in the header, shared sizing so the mobile
   shrink below only needs to touch one rule instead of 3 separate inline-style overrides. */
.site-auth-icon { border: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; font-size: 0.95rem; }
.site-auth-btn { border: none; font-weight: 800; font-size: 0.74rem; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: 0.15s ease; }
.site-auth-btn-login { background: white; color: #38003c; display: inline-flex; align-items: center; gap: 6px; }
.site-auth-btn-login:hover { background: #f0edf1; }
/* Short, green "this costs nothing" marker for login/register prompts - the header button, and
   any guest-facing "log in to see this" prompt (Price Watch etc). Deliberately tiny - a nudge,
   not a headline. */
.free-badge-mini { display: inline-block; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.02em; color: #15803d; background: #dcfce7; border-radius: 20px; padding: 2px 7px; white-space: nowrap; }
.site-auth-btn-admin { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.4); display: none; }
.site-auth-btn-admin:hover { border-color: white; }
.site-auth-btn-logout { background: transparent; color: rgba(255,255,255,0.6); border: none; display: none; }
.site-auth-btn-logout:hover { color: white; }

/* Below this width the nav drops to its own full-width row so tabs aren't cut off */
@media (max-width: 680px) {
    .site-header-inner { padding: 8px 12px; gap: 6px 10px; }
    .site-brand img { height: 19px; }
    .site-brand { padding: 4px 10px; }
    .site-tagline { display: none; }
    /* One scrollable row instead of wrapping to 2-3 - same "shrink first, scroll if it still
       doesn't fit" pattern already used for My Team's chip bar. Four top-level items (My Team,
       WC/FH Planner, Model Workshop, Tools) reliably wrapped to 3 full header rows before this,
       eating a big chunk of a phone's vertical space before any real content started. */
    /* -webkit-overflow-scrolling:touch dropped - this nav lives inside .site-header's
       position:sticky, and that specific combination (a legacy momentum-scroll hint inside a
       sticky ancestor) is a known iOS Safari bug where the scrolled content renders invisible
       until the next repaint/scroll. Modern iOS already scrolls with momentum natively without
       the old hint. The compositing fix for the same bug (below, on .site-nav-link) deliberately
       is NOT applied to .site-nav itself - that would also become the containing block for the
       dropdown menu's position:fixed (any transformed ancestor does), undoing the fix that made
       the dropdown escape this same element's overflow:hidden clipping in the first place. */
    .site-nav { order: 3; flex: 1 1 100%; justify-content: flex-start; gap: 4px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 1px; }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav .nav-dropdown, .site-nav-link { flex-shrink: 0; }
    /* .site-nav's overflow-y:hidden (needed to stop the vertical scroll the horizontal-scroll fix
       accidentally allowed - overflow-x:auto alone implicitly promotes overflow-y to auto too,
       which still clips) also clips this dropdown menu, since position:absolute descendants are
       clipped by an ancestor's overflow same as anything else. Fixed positioning escapes that
       clipping entirely (ignores ancestor overflow) - the header script sets its top/left inline
       from the trigger's real position right before opening at this breakpoint. */
    .nav-dropdown-menu { position: fixed; top: auto; left: auto; }
    .site-auth { order: 2; gap: 5px; }
    /* Own compositing layer per link (not on .site-nav itself - see the comment above) as the
       actual fix for the invisible-until-scroll bug: forcing each scrolled item onto its own
       layer sidesteps the container-level paint bug some iOS Safari versions hit here. */
    .site-nav-link { padding: 6px 10px; font-size: 0.7rem; transform: translateZ(0); -webkit-transform: translateZ(0); }
    /* Brand + auth bar (wordmark, theme/X/mail icons, Login/Register) was wide enough on its own
       to wrap to 2 lines at phone widths, even before the nav row (which already gets its own
       row below, on purpose) - shrink the icon circles, tighten gaps, and drop "/ Register" +
       the "Free" badge so it reliably fits on one line down to ~360px. */
    .site-auth-icon { width: 25px; height: 25px; font-size: 0.8rem; }
    .site-auth-btn { padding: 6px 10px; font-size: 0.66rem; }
    .auth-btn-full-label, .site-auth-btn-login .free-badge-mini { display: none; }
    .site-auth-email { display: none !important; }
    .override-fields-grid { grid-template-columns: 1fr; }
    .teams-grid { grid-template-columns: 1fr; }
    .teams-page-toolbar { flex-direction: column; align-items: flex-start; }
    .players-grid { grid-template-columns: 1fr; }
    .players-page-toolbar { flex-direction: column; align-items: stretch; }
    .players-page-toolbar .search-input { width: auto; }
}

/* MASTER DASHBOARD CONTAINER */
.dashboard-master-wrapper { max-width: 1450px; margin: 25px auto; padding: 0 20px; display: grid; grid-template-columns: 380px 1fr 180px; gap: 20px; align-items: start; }
/* Two-column variant (no right settings panel) - used by pages like My Team that reuse the left
   sidebar + pitch layout without Squad Planner's chip/FDR/lock-avoid column. */
.dashboard-master-wrapper-2col { grid-template-columns: 380px 1fr; max-width: 1100px; }
/* Three-column variant - My Team's left player-select sidebar + pitch + a right Transfers column
   (same suggest-transfers/settings panel as Rate My Team, mirrored via .mt-transfers-col/
   .rmt-suggest-card so both pages share one visual language). */
.dashboard-master-wrapper-3col { grid-template-columns: 380px 1fr 300px; max-width: 1450px; }
.mt-transfers-col { min-width: 0; position: sticky; top: 20px; }
.center-dashboard-area { min-width: 0; display: flex; flex-direction: column; position: relative; }

/* RECALCULATE LOADING OVERLAY ON TOP OF PITCH */
.pitch-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(4px); z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; border-radius: 24px; }
html.personalizing #pitchLoadingOverlay { display: flex !important; }
.spinner { width: 45px; height: 45px; border: 4px solid var(--bg-subtle); border-top: 4px solid var(--pl-purple); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loading-text { font-weight: 800; color: var(--pl-purple-text); font-size: 0.95rem; }

/* LEFT SIDEBAR FOR PLAYER SELECTION */
.left-sidebar { width: 100%; box-sizing: border-box; background: transparent; border: none; padding: 0; box-shadow: none; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 8px; height: 94vh; max-height: 1100px; }
/* Player Selection is its own card, separate from the "Reload from FPL" / "Upload Screenshot"
   cards relocateSquadTools() puts above it once a squad exists (my_team_page.py) - flex:1 fills
   whatever height those leave, min-height:0 is the standard flexbox fix that lets the player
   list's own overflow-y:auto actually kick in inside a flex column instead of the box just
   growing forever. */
.player-selection-box { width: 100%; box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; flex: 1; min-height: 0; }
.left-sidebar h2 { margin: 0 0 4px 0; font-size: 1.3rem; color: var(--text-dark); font-weight: 800; letter-spacing: -0.5px; }
.left-sidebar p { font-size: 0.7rem; color: var(--text-muted); margin: 0 0 6px 0; line-height: 1.3; }
.left-search { width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border-color); margin-bottom: 8px; font-size: 0.78rem; outline: none; box-sizing: border-box; background: var(--bg-card); color: var(--text-dark); }
.left-filters { display: flex; gap: 6px; margin-bottom: 8px; }
.left-filter-sel { flex: 1; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--border-color); font-size: 0.72rem; color: var(--text-dark); background: var(--bg-card); cursor: pointer; }
.blue-banner { background: #3b82f6; color: white; text-align: center; padding: 5px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; margin-bottom: 6px; }
.list-header-row { display: flex; padding: 4px 4px 5px 38px; border-bottom: 2px solid var(--border-color); margin-bottom: 4px; }
.list-header-col { font-size: 0.6rem; color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.player-list-container { overflow-y: auto; flex: 1; padding-right: 4px; }
.player-list-container::-webkit-scrollbar { width: 5px; }
.player-list-container::-webkit-scrollbar-thumb { background: var(--bg-subtle-2); border-radius: 3px; }
.player-list-row { display: flex; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--bg-subtle); cursor: pointer; transition: 0.2s; }
.player-list-row:hover { background: var(--bg-subtle); }
.row-info-icon { font-family: serif; font-weight: bold; background: var(--bg-subtle); color: var(--text-muted); border-radius: 50%; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; font-style: italic; margin-right: 6px; margin-left: 2px; pointer-events: none; }
.row-badge { width: 20px; height: 20px; object-fit: contain; margin-right: 8px; pointer-events: none; }
.row-details { flex: 1; display: flex; flex-direction: column; overflow: hidden; pointer-events: none; }
.row-name { font-size: 0.76rem; font-weight: 800; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 0.58rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-top: 1px; }
.row-price { font-size: 0.68rem; color: var(--text-dark); width: 40px; text-align: right; pointer-events: none; }
.row-pts { font-size: 0.76rem; font-weight: 700; color: var(--text-dark); width: 35px; text-align: right; margin-right: 8px; pointer-events: none; }
.row-add-btn { background: var(--bg-subtle); border: none; width: 22px; height: 22px; border-radius: 50%; font-size: 0.9rem; line-height: 1; font-weight: bold; cursor: pointer; color: var(--text-dark); display: flex; align-items: center; justify-content: center; transition: 0.15s ease; }
.row-add-btn:hover { background: var(--bg-subtle-2); }
.row-add-btn.disabled-slot { background: var(--bg-subtle) !important; color: var(--bg-subtle-2) !important; border: 1px dashed var(--bg-subtle-2); cursor: not-allowed; opacity: 0.7; transform: scale(0.92); }

/* RIGHT SIDEBAR FOR METRICS */
.sidebar-column { width: 100%; box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 10px; box-shadow: var(--card-shadow); position: sticky; top: 20px; display: flex; flex-direction: column; gap: 10px; }
.sidebar-section-title { font-size: 0.62rem; text-transform: uppercase; font-weight: 800; color: var(--text-muted); border-bottom: 2px solid var(--border-color); padding-bottom: 3px; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; letter-spacing: 0.03em; }
.sidebar-hint { font-size: 0.6rem; color: var(--text-muted); font-weight: 500; line-height: 1.3; margin: 3px 0 5px 0; }
.sidebar-empty-hint { color: var(--text-muted); font-size: 0.72rem; line-height: 1.35; display: inline-block; }
.sidebar-tags-container { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; }
.tag { padding: 3px 5px; border-radius: 5px; font-weight: 700; font-size: 0.66rem; display: flex; align-items: center; justify-content: space-between; }
.tag-locked { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.tag-avoid { background: #ffe4e6; color: #9f1239; border: 1px solid #fecdd3; }
.tag-remove-btn { background: none; border: none; font-weight: 900; cursor: pointer; font-size: 0.7rem; padding: 0 4px; border-radius: 3px; line-height: 1; margin-left: 4px; }
.tag-locked .tag-remove-btn { color: #065f46; }
.tag-locked .tag-remove-btn:hover { background: #a7f3d0; }
.tag-avoid .tag-remove-btn { color: #9f1239; }
.tag-avoid .tag-remove-btn:hover { background: #fecdd3; }
/* Background is always the same bright green regardless of theme, so the text stays a fixed dark
   purple rather than following --pl-purple-text - that token lightens for dark mode (to read on a
   dark card), which turns to a washed-out, low-contrast mismatch against this always-bright button. */
.recalc-btn { background: var(--pl-green); color: #38003c; border: none; padding: 8px 10px; border-radius: 8px; font-weight: 800; cursor: pointer; font-size: 0.7rem; width: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; gap: 4px; transition: 0.2s; }
.recalc-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* FORMATION TABS & SUMMARY CARD */
.tabs-wrapper { display: flex; justify-content: center; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-bottom: 15px; padding-bottom: 3px; padding-top: 6px; }
.tabs-wrapper::-webkit-scrollbar { display: none; }
.formation-tab-wrapper { position: relative; display: inline-block; flex-shrink: 0; }
.tab-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-dark); padding: 6px 12px; border-radius: 16px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 5px; font-size: 0.63rem; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease; }
.tab-btn:hover:not(.active) { border-color: var(--pl-purple-text); }
.tab-btn.active { background: var(--pl-purple); color: white; border-color: var(--pl-purple-text); }
.tab-remove-btn { position: absolute; top: -6px; right: -6px; background: #ef4444; color: white; border: none; border-radius: 50%; width: 16px; height: 16px; font-size: 0.55rem; font-weight: bold; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 10; }
.formation-tab-wrapper:hover .tab-remove-btn { display: flex; }
.tab-remove-btn:hover { transform: scale(1.1); }
/* Wildcard streaming compute: a not-yet-solved formation's tab shows a tiny spinner in place of
   its score and can't be clicked into until its own result streams in. */
.tab-btn.tab-pending { opacity: 0.55; cursor: default; pointer-events: none; }
.tab-mini-spinner { width: 10px; height: 10px; border: 2px solid rgba(0,0,0,0.15); border-top: 2px solid var(--pl-purple); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
.tab-btn.active .tab-mini-spinner { border-color: rgba(255,255,255,0.35); border-top-color: #fff; }

/* Flat summary bar everywhere (My Team + WC/FH planner) - transparent, no card chrome. */
.summary-card { width: 100%; background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 6px 8px; margin: 0 auto 12px auto; max-width: 660px; display: flex; justify-content: space-between; gap: 4px; box-sizing: border-box; }
/* Visual reorder (no HTML restructuring) so the summary bar sits right below the chip buttons
   and above the pitch, on both mobile and web - .center-dashboard-area is flex-column globally
   (line 90), so this order pair works everywhere. .pitch-area-container/.save-squad-row default
   to order:0 same as the summary card, so both need an explicit higher order to land after it -
   otherwise the summary card just floats wherever it sits in source order relative to them. */
.my-team-page .summary-card { order: 1; }
.my-team-page .pitch-area-container, .my-team-page .save-squad-row { order: 2; }
/* Without an explicit order, this defaulted to 0 - ahead of the summary card (order:1) and the
   pitch (order:2) in the flex column, so it rendered at the very top instead of below the pitch
   where the DOM position already puts it. */
.my-team-page #liveGamesSection { order: 3; }
.summary-stat-box { border-right: 1px solid var(--border-color); padding-right: 4px; padding-left: 4px; flex: 1; text-align: center; }
.summary-stat-box:first-child { padding-left: 0; }
.summary-stat-box:last-child { border-right: none; padding-right: 0; flex: 1.4; }
.stat-label-top { font-size: 0.65rem; text-transform: uppercase; font-weight: 650; color: var(--text-muted); letter-spacing: 0.03em; }
.stat-value-big { font-size: 1rem; font-weight: 750; color: var(--pl-purple-text); margin-top: 2px; }

/* BUDGET TRACKER BAR */
.budget-tracker-container { max-width: 530px; margin: 0 auto 15px auto; padding: 0 10px; }
.budget-tracker-labels { display: flex; justify-content: space-between; margin-bottom: 4px; }
.budget-bar-bg { width: 100%; background: var(--bg-subtle); height: 8px; border-radius: 4px; overflow: hidden; }
.budget-bar-fill { background: var(--pl-purple); height: 100%; transition: width 0.3s ease, background 0.3s ease; }

/* UNIFIED PITCH AREA CONTAINER */
.pitch-gw-header { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 900; color: var(--pl-purple-text); margin-bottom: 8px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; }
.gw-nav-btn { background: var(--bg-subtle); border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; color: var(--pl-purple-text); transition: 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.gw-nav-btn:hover:not(:disabled) { background: var(--bg-subtle-2); transform: scale(1.05); }
.gw-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.gw-selector { appearance: auto; background: var(--bg-card); border: 2px solid var(--pl-purple); color: var(--pl-purple-text); border-radius: 6px; padding: 2px 8px; font-weight: 900; font-size: 0.95rem; cursor: pointer; text-transform: uppercase; text-align: center; }

.chip-active-badge { display: none; max-width: 530px; margin: 0 auto 12px auto; padding: 10px 16px; border-radius: 10px; font-size: 0.8rem; font-weight: 500; text-align: left; align-items: center; justify-content: center; gap: 10px; line-height: 1.4; border: 1px solid transparent; border-left: 3px solid transparent; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.chip-active-badge.active { display: flex; }
.chip-badge-icon { font-size: 1.05rem; flex-shrink: 0; }
.chip-active-badge b { font-weight: 700; }
.chip-badge-benchboost { background: #fffbeb; color: #92400e; border-color: #fde68a; border-left-color: #f59e0b; }
.chip-badge-freehit { background: #fef2f2; color: #991b1b; border-color: #fecaca; border-left-color: #ef4444; }
.chip-badge-wildcard { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; border-left-color: #8b5cf6; }
.gw-selector:focus { outline: none; border-color: var(--pl-green); }

.pitch-area-container { box-sizing: border-box; width: 100%; position: relative; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(6px); border: 1px solid var(--border-color); border-radius: 24px; padding: 2px 25px 8px 25px; max-width: 660px; margin: 0 auto; box-shadow: var(--card-shadow); }

/* Two small light "commercial sign" boards near the pitch's own top corners (close to where the
   corner arcs sit) - replaces both the old two-billboard-flanking-a-goal-net scenery AND this
   session's single dark center bar (whose dark-on-dark background hid the wordmark's own dark
   navy fill almost entirely). A light background is what actually makes the dark logo readable. */
/* Padding lands each sign roughly at the midpoint between the corner and the 18-yard box's own
   edge (penalty box is 250px wide, centered in ~630px of playable width -> its edge sits ~190px
   in from each side, so ~95px inset puts the sign about halfway between that and the corner). */
.pitch-brand-bar { box-sizing: border-box; width: 100%; max-width: 660px; margin: 0 auto -6px auto; position: relative; z-index: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 72px; pointer-events: none; }
.pitch-brand-sign { background: linear-gradient(180deg, #ffffff 0%, var(--bg-subtle) 100%); border-radius: 5px 5px 0 0; padding: 7px 14px; box-shadow: 0 -2px 5px rgba(0,0,0,0.12); }
.pitch-brand-logo { height: 17px; display: block; }

/* SOCCER PITCH - plain aligned rectangle (no perspective/trapezoid) so the top corner arcs are
   fully visible instead of clipped away, per feedback that the tilted version looked worse. */
.soccer-pitch-wrapper { box-sizing: border-box; position: relative; z-index: 1; width: 100%; max-width: 660px; margin: 0 auto 30px auto; background: linear-gradient(180deg, #10b981 0%, var(--pitch-green-dark) 100%); border: 3px solid #ffffff; border-radius: 14px; padding: 22px 12px 24px 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); }

/* CRISP PITCH LINES MATCHING FPL SCREENSHOT */
.pitch-penalty-box { position: absolute; top: 0; left: 50%; width: 250px; height: 85px; border: 2px solid rgba(255,255,255,0.7); border-top: none; transform: translateX(-50%); pointer-events: none; }
.pitch-goal-box { position: absolute; top: 0; left: 50%; width: 100px; height: 30px; border: 2px solid rgba(255,255,255,0.7); border-top: none; transform: translateX(-50%); pointer-events: none; }
.pitch-penalty-spot { position: absolute; top: 65px; left: 50%; width: 6px; height: 6px; background: rgba(255,255,255,0.85); border-radius: 50%; transform: translateX(-50%); pointer-events: none; }
.pitch-penalty-arc { position: absolute; top: 85px; left: 50%; width: 60px; height: 26px; border: 2px solid rgba(255,255,255,0.7); border-top: none; border-radius: 0 0 60px 60px; transform: translateX(-50%); pointer-events: none; }
.corner-arc-tl { position: absolute; top: 0; left: 0; width: 25px; height: 25px; border-right: 2px solid rgba(255,255,255,0.7); border-bottom: 2px solid rgba(255,255,255,0.7); border-radius: 0 0 25px 0; pointer-events: none; }
.corner-arc-tr { position: absolute; top: 0; right: 0; width: 25px; height: 25px; border-left: 2px solid rgba(255,255,255,0.7); border-bottom: 2px solid rgba(255,255,255,0.7); border-radius: 0 0 0 25px; pointer-events: none; }
.pitch-center-mark { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.5); transform: translateY(-50%); pointer-events: none; }
.pitch-center-circle { position: absolute; top: 50%; left: 50%; width: 65px; height: 65px; border: 2px solid rgba(255,255,255,0.5); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }

.pitch-line-up-gk { display: flex; justify-content: center; gap: 12px; position: relative; z-index: 2; margin: -15px 0 24px 0; }
.pitch-line-up-def { display: flex; justify-content: center; gap: 6px; position: relative; z-index: 2; margin: 4px 0 24px 0; }
.pitch-line-up-mid { display: flex; justify-content: center; gap: 8px; position: relative; z-index: 2; margin: 4px 0 24px 0; }
.pitch-line-up-fwd { display: flex; justify-content: center; gap: 14px; position: relative; z-index: 2; margin: 4px 0 16px 0; }

.swap-highlight { outline: 2px solid #3b82f6 !important; background: rgba(59, 130, 246, 0.15) !important; transform: scale(1.02); z-index: 20; transition: 0.2s; }
.swap-source-highlight { outline: 2px solid #f59e0b !important; background: rgba(245,158,11,0.15) !important; z-index: 21; }

/* Real kit renders (see components.py's _get_shirt_url) floating directly on the pitch, no card
   chrome around them - matches every reference pitch view we studied (official FPL app, fpl.page,
   nextXI.app) far more closely than the old translucent-badge-chip look. A solid white name-plate
   directly under the shirt (mirroring the same references) is what actually grounds the card
   visually, not a background box behind the whole thing. */
/* Card is narrow, but the plates below the (small, centred) shirt run wider so the live-mode
   info has room to breathe on one line each. */
.fpl-player-card { background: transparent; border-radius: 8px; width: 96px; text-align: center; overflow: visible; display: flex; flex-direction: column; align-items: center; cursor: pointer; border: none; transition: transform 0.2s ease; position: relative; }
.fpl-player-card:hover { transform: translateY(-3px) scale(1.04); z-index: 10; }
.fpl-shirt-wrap { display: flex; align-items: flex-end; justify-content: center; height: 52px; }
.fpl-shirt-img { max-height: 52px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35)); }
/* Everything from here through .fpl-xpts-val below (the pitch/bench player card's name + info
   plates) is DELIBERATELY theme-independent, fixed light-mode colors rather than var(...) - these
   plates float on the green pitch, not on the page background, and stay the same fixed white/
   lavender card regardless of site theme (same reasoning as the pitch cards' own white
   background just above). Dark mode used to make ONLY the background stay fixed while the text
   inside it followed the page theme and turned light too - invisible white-on-white player names
   were the single biggest complaint once dark mode shipped. */
.fpl-name-plate { background: #ffffff; border-radius: 0; padding: 2px 4px 1px; width: 100%; box-sizing: border-box; }
.fpl-player-name { font-weight: 800; font-size: 0.68rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
/* Third band - a soft lavender strip. Shows ONE thing at a time (the pitch %EO / Rank ± toggle
   decides which): either the two EO rows, or the rank-impact figure. */
.fpl-info-plate { background: #f8f3fa; padding: 2px 6px 3px; box-shadow: 0 2px 5px rgba(0,0,0,0.12); width: 100%; box-sizing: border-box; }
.fpl-player-subline { font-size: 0.56rem; font-weight: 700; color: #64748b; overflow: hidden; line-height: 1.45; }
.fpl-eo { display: block; }
.fpl-eo .fpl-eo-h { display: block; font-size: 0.74em; font-weight: 900; color: #b0a3b6; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; }
.fpl-eo .eo-row { display: flex; justify-content: space-between; align-items: baseline; }
.fpl-eo .eo-row i { font-style: normal; font-size: 0.85em; font-weight: 700; color: #9a8ea1; }
.fpl-eo .eo-row b { font-weight: 900; font-size: 1.05em; color: #38003c; }
.fpl-eo .eo-row.eo-dim b { color: #7c6f84; font-weight: 800; }
.fpl-eo-rank { font-size: 1.15em; font-weight: 900; line-height: 1.3; text-align: center; }
.fpl-eo-rank.up { color: #15803d; }
.fpl-eo-rank.down { color: #dc2626; }
.fpl-eo-rank.per { color: #9a8ea1; font-weight: 800; font-size: 0.95em; }

/* The %EO / Rank ± toggle, sitting on the pitch itself (top-right). */
.pitch-info-toggle { position: absolute; top: 58px; right: 30px; z-index: 13; display: none; gap: 1px; background: rgba(255,255,255,0.92); border-radius: 10px; padding: 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.28); }
.pitch-info-toggle button { border: none; background: transparent; font-family: inherit; font-weight: 800; font-size: 0.68rem; color: #64748b; padding: 5px 11px; border-radius: 8px; cursor: pointer; transition: 0.12s ease; }
.pitch-info-toggle button.on { background: var(--pl-purple); color: #fff; }
.pitch-info-toggle button:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 768px) { .pitch-info-toggle { top: 40px; right: 14px; } .pitch-info-toggle button { font-size: 0.6rem; padding: 4px 9px; } }
.fpl-subline-dot { opacity: 0.35; margin: 0 3px; font-weight: 400; }
/* The model's own projected score is the one number on this card actually worth drawing the eye
   to - price is context, xPts is the point of the whole app - so it gets its own treatment
   instead of blending into the same muted line as the price. A small pill (rather than just
   making the plain text bigger/bolder, which read as oddly floating mid-sentence) reads more like
   a deliberate stat badge. Padding/radius in em so it scales with whichever tier's own
   .fpl-player-subline/.fpl-bench-subline font-size. */
.fpl-xpts-val { display: inline-block; color: #38003c; background: rgba(56,0,60,0.1); font-weight: 800; font-size: 1em; padding: 0.05em 0.35em; border-radius: 0.5em; line-height: 1.35; }

.player-next-fix-strip { width: 100%; box-sizing: border-box; font-size: 0.5rem; font-weight: 800; color: white; padding: 2px 0; margin-top: auto; text-shadow: 0 1px 1px rgba(0,0,0,0.3); letter-spacing: 0.5px; border-radius: 0 0 8px 8px;}

.card-remove-btn { position: absolute; top: -5px; left: -5px; background: rgba(0,0,0,0.4); color: white; border: none; font-size: 0.45rem; font-weight: 900; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.card-remove-btn:hover { background: #ef4444; }
.sub-btn { position: absolute; bottom: -8px; left: -8px; top: auto; background: #3b82f6; border: 2px solid white; width: 19px; height: 19px; padding: 0; z-index: 7; box-shadow: 0 2px 5px rgba(0,0,0,0.35); transition: transform 0.12s ease, background 0.12s ease; }
.sub-btn svg { width: 11px; height: 11px; }
.sub-btn:hover { background: #2563eb; transform: scale(1.12); }
.sub-btn.swap-active { background: #f59e0b; }
.injury-badge { position: absolute; top: -5px; left: 11px; background: #ef4444; color: white; font-size: 0.45rem; font-weight: 900; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 5; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.captain-badge { position: absolute; top: -5px; right: -5px; background: #fbbf24; color: #78350f; font-size: 0.5rem; font-weight: 900; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #f59e0b; z-index: 5; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* EMPTY SLOT / ADD PLAYER STYLING */
.fpl-player-card.empty-slot { background: rgba(255, 255, 255, 0.15); border: 1px dashed rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.empty-slot-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; height: 100%; width: 100%; }
.empty-slot-icon { font-size: 1.2rem; font-weight: 900; color: #ffffff; background: rgba(0,0,0,0.25); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.empty-slot-text { font-size: 0.55rem; font-weight: 800; color: #ffffff; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

.fpl-bench-pod { background: rgba(20, 80, 40, 0.38); backdrop-filter: blur(3px); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 6px 14px rgba(0,0,0,0.15); padding: 2px 8px 11px 8px; margin: -58px auto 0; position: relative; z-index: 10; max-width: 380px; }
.fpl-bench-header { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; font-size: 0.5rem; font-weight: 800; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 5px; }
/* Sub button sits further out from the card than on the (bigger) pitch cards - bench cards are
   noticeably smaller, so the shared .sub-btn position was covering more of the card underneath. */
.fpl-bench-card .sub-btn { left: -13px; }
.fpl-bench-header span { flex: 0 0 60px; text-align: center; }
/* center (not space-around) - space-around stretched leftover pod width into ever-bigger gaps
   between cards instead of just packing them together with a fixed, modest gap. */
.fpl-bench-grid { display: flex; justify-content: center; gap: 6px; }
.fpl-bench-card { background: transparent; border-radius: 8px; width: 82px; text-align: center; overflow: visible; display: flex; flex-direction: column; align-items: center; cursor: pointer; border: none; position: relative; }
.fpl-bench-shirt-wrap { display: flex; align-items: flex-end; justify-content: center; height: 35px; }
.fpl-bench-shirt-img { max-height: 35px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
.fpl-bench-plate { background: #ffffff; padding: 1px 3px 0px; width: 100%; box-sizing: border-box; }
.fpl-bench-name { font-weight: 800; font-size: 0.56rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px; width: 100%; }
.fpl-bench-info-plate { background: #f8f3fa; padding: 1px 4px 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); width: 100%; box-sizing: border-box; }
.fpl-bench-subline { font-size: 0.5rem; font-weight: 700; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.fpl-bench-card .fpl-eo-rank, .fpl-bench-card .fpl-eo .eo-dim, .fpl-bench-card .fpl-eo-h { display: none; }

/* TABLES & MODALS */
.data-table-container { background: var(--bg-card); border-radius: 14px; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); overflow: hidden; margin-top: 20px; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.85rem; }
.data-table th { background: var(--bg-subtle); color: var(--pl-purple-text); font-weight: 800; padding: 12px 16px; border-bottom: 2px solid var(--border-color); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; }
.data-table td { padding: 10px 16px; border-bottom: 1px solid var(--border-color); color: var(--text-dark); cursor: pointer; transition: background 0.1s ease; }
.data-table tbody tr:nth-child(even) td { background: var(--bg-subtle); }
.data-table tr:hover td { background: var(--bg-subtle); }
.search-filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 15px; flex-wrap: wrap; }
.search-input { padding: 10px 16px; border-radius: 20px; border: 1px solid var(--border-color); width: 280px; font-size: 0.9rem; outline: none; }
.badge-cell { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin-right: 8px; }

/* Fixed overlapping issue with modal z-index */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; z-index: 10000; }
.modal-card { background: var(--bg-card); border-radius: 18px; max-width: 580px; width: 92%; max-height: 85vh; overflow-y: auto; padding: 20px; box-shadow: 0 20px 30px -5px rgba(0,0,0,0.25); position: relative; }
.modal-sticky-save-bar { position: sticky; bottom: 6px; z-index: 20; box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important; }
.modal-close { position: absolute; top: 14px; right: 18px; background: var(--bg-subtle); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; font-weight: bold; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }

.suggest-modal-card { max-width: 640px; padding: 26px 26px 22px 26px; background: var(--bg-card); }
.suggest-modal-header { font-size: 1.15rem; font-weight: 900; color: var(--pl-purple-text); margin-bottom: 14px; padding-right: 30px; }
.roll-card { background: var(--bg-subtle); }
.roll-card-body { display: flex; align-items: center; gap: 12px; }
.roll-card-icon { font-size: 1.6rem; flex-shrink: 0; }
.roll-card-text { font-size: 0.76rem; font-weight: 600; color: var(--text-dark); line-height: 1.4; }
@media (max-width: 768px) {
    .suggest-modal-card { padding: 18px 16px 16px 16px; }
}

.sp-explain { font-size: 0.76rem; line-height: 1.45; color: var(--text-dark); margin: 0 0 8px; }
.sp-explain-muted { color: var(--text-muted); margin-bottom: 14px; }
.sp-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border-color); }
.sp-row:last-child { border-bottom: none; }
.sp-name { font-size: 0.82rem; font-weight: 700; color: var(--text-dark); }
.sp-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sp-step { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-subtle); color: var(--text-dark); font-size: 0.95rem; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sp-step:hover { border-color: var(--pl-purple-text); color: var(--pl-purple-text); }
.sp-value { font-size: 0.8rem; font-weight: 800; color: var(--text-dark); min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.sp-reset { background: none; border: none; padding: 2px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; }
.sp-reset:hover { color: var(--pl-purple-text); }
.sp-trigger { background: none; border: none; padding: 0 2px; font-size: 0.78rem; opacity: 0.45; cursor: pointer; line-height: 1; }
.sp-trigger:hover { opacity: 1; }
.sp-trigger-on { opacity: 0.9; }
.modal-price-info { background: var(--bg-subtle); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.modal-price-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; padding: 3px 0; }
.modal-price-row span { color: var(--text-muted); font-weight: 600; }
.modal-price-row b { color: var(--text-dark); font-variant-numeric: tabular-nums; }
.modal-price-hint { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; }
.modal-price-hint a { color: var(--pl-purple-text); font-weight: 700; text-decoration: none; }
.modal-price-hint a:hover { text-decoration: underline; }
.player-header-box { background: linear-gradient(135deg, var(--pl-purple) 0%, #2a002e 100%); color: white; padding: 14px; border-radius: 12px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
.header-badge-img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.player-header-title { margin: 0; font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; justify-content: space-between; }
.player-header-sub { font-size: 0.82rem; color: #e2e8f0; margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.injury-alert-banner { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; padding: 8px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 800; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.stats-section-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; color: var(--pl-purple-text); margin: 14px 0 6px 0; border-bottom: 2px solid var(--border-color); padding-bottom: 4px; letter-spacing: 0.03em; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 4px; margin-bottom: 8px; }
.stat-box { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 5px; padding: 4px 2px; text-align: center; }
.stat-box-lbl { font-size: 0.52rem; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.stat-box-val { font-size: 0.8rem; font-weight: 800; color: var(--text-dark); margin-top: 1px; }
.calc-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border-color); font-size: 0.8rem; }
.term-explain { font-size: 0.7rem; color: var(--text-muted); display: block; }
.action-btn { background: var(--pl-purple); color: white; border: none; padding: 4px 10px; border-radius: 6px; font-weight: 700; cursor: pointer; font-size: 0.75rem; margin-left: 4px; transition: background 0.15s ease; }
.action-btn:hover { background: #520058; }
.action-btn.active-lock { background: #059669; }
.action-btn.active-avoid { background: #dc2626; }
.action-btn.active-injury { background: #ef4444; }

/* Personal model overrides - player/team modals */
.override-guest-nudge { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; padding: 8px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; margin-bottom: 12px; }
.override-guest-nudge a { color: #1e40af; font-weight: 800; text-decoration: underline; }

/* Rate My Team - 3-col layout keeps the pitch/rating AND the suggestions high on the page
   instead of below a stack of full-width cards/a long pitch: narrow sticky control column,
   the pitch dominating the center, and a sticky suggestions column on the right so the
   "Suggest Transfers" button is visible without scrolling. Collapses to 2 then 1 column as the
   viewport narrows (suggest column drops below the pitch, then everything stacks). */
/* box-sizing:border-box on both so `padding` doesn't silently widen the rendered box past
   max-width:1400px - without it these two ended up two different actual widths (1400px content +
   40px padding vs whatever the grid's own columns summed to), which is what read as the header
   not sitting centered over the layout below it. The two side columns are also equal width now
   (270/270, was 270/300) so the pitch - the actual visual focus - centers under the title instead
   of sitting slightly left of it. */
.rmt-page-header { max-width: 1400px; margin: 22px auto 4px auto; padding: 0 20px; text-align: center; box-sizing: border-box; }
.rmt-page-title { font-size: 1.7rem; color: var(--pl-purple-text); margin: 0 0 4px 0; font-weight: 900; }
.rmt-page-sub { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.rmt-layout { display: grid; grid-template-columns: 270px 1fr 270px; gap: 20px; max-width: 1400px; margin: 14px auto 22px auto; padding: 0 20px; align-items: start; box-sizing: border-box; }
/* Was position:sticky;top:20px on the side columns only - since the pitch column is plain static
   flow, the sticky offset (measured from the viewport, not accounting for the site's own sticky
   header) made the side cards visually start lower than the pitch instead of level with it. Plain
   static flow on all three keeps them aligned; the tradeoff is the side cards no longer stay
   pinned while scrolling past a tall pitch. */
.rmt-control-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rmt-pitch-col { min-width: 0; }
.rmt-suggest-col { min-width: 0; }
.rmt-source-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.rmt-source-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rmt-source-title { font-weight: 800; font-size: 0.82rem; color: var(--text-dark); }
.rmt-source-sub { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; margin-top: 1px; }
.rmt-source-btn { padding: 7px 14px; font-size: 0.75rem; white-space: nowrap; margin: 0; }
.rmt-gw-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; }
.rmt-gw-nav-label { font-weight: 900; font-size: 0.9rem; color: var(--pl-purple-text); min-width: 52px; text-align: center; }

/* The explicit "Rate My Team" trigger (item #3) - sits above the gauge/not-rated card so it reads
   as the one action that produces everything below it, whether that's a first rating or a re-rate
   of whatever gameweek is currently on the pitch. */
.rmt-rate-btn { width: 100%; justify-content: center; background: var(--pl-purple); color: white; font-size: 0.95rem; font-weight: 800; padding: 14px; border-radius: 12px; box-shadow: 0 4px 14px rgba(56,0,60,0.28); margin-bottom: 14px; }
.rmt-rate-btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* Shown instead of the gauge whenever the gameweek on the pitch hasn't been rated yet (browsing
   via navigateRmtGw never rates on its own - see that function in rate_my_team_page.py) - makes
   it explicit the score on screen, if any, belongs to a different gameweek than the one showing. */
.rmt-not-rated-card { background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: 16px; padding: 28px 16px; text-align: center; }
.rmt-not-rated-icon { font-size: 1.8rem; margin-bottom: 8px; }
.rmt-not-rated-text { font-weight: 800; font-size: 0.88rem; color: var(--pl-purple-text); }
.rmt-not-rated-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

/* Empty state - fills the pitch/suggest columns instantly (no fetch to wait on) whenever there's
   no squad loaded yet, so the page never reads as broken/half-built while loadSavedTeam()'s
   request is still in flight, and gives a guest with no saved squad something to actually act on
   instead of two small buttons floating in an otherwise-empty page. grid-column 2/-1 adapts to
   however many columns the layout currently has (3 on desktop, 2 or 1 as it collapses). */
.rmt-empty-state { grid-column: 2 / -1; min-width: 0; box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 52px 32px; text-align: center; box-shadow: 0 2px 10px rgba(56,0,60,0.07); }
.rmt-empty-icon { font-size: 3rem; margin-bottom: 10px; }
.rmt-empty-title { font-size: 1.5rem; font-weight: 900; color: var(--pl-purple-text); margin: 0 0 10px 0; }
.rmt-empty-sub { font-size: 0.85rem; color: var(--text-muted); max-width: 460px; margin: 0 auto 30px auto; line-height: 1.55; }
.rmt-empty-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; max-width: 640px; margin: 0 auto 34px auto; text-align: left; }
.rmt-empty-feature { display: flex; gap: 12px; align-items: flex-start; font-size: 0.78rem; color: var(--text-dark); line-height: 1.4; }
/* Round colored badge per feature instead of a bare emoji floating in whitespace - the flat
   emoji-on-nothing look was a big part of why this card read as "empty" rather than designed. */
.rmt-empty-feature-icon { font-size: 1.15rem; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rmt-empty-feature:nth-child(1) .rmt-empty-feature-icon { background: rgba(29,158,117,0.14); }
.rmt-empty-feature:nth-child(2) .rmt-empty-feature-icon { background: rgba(186,117,23,0.16); }
.rmt-empty-feature:nth-child(3) .rmt-empty-feature-icon { background: rgba(24,95,165,0.14); }
.rmt-empty-feature b { display: block; margin-bottom: 2px; color: var(--pl-purple-text); }
.rmt-empty-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.rmt-empty-actions .action-btn { padding: 13px 24px; font-size: 0.88rem; border-radius: 12px; box-shadow: 0 4px 14px rgba(56,0,60,0.16); margin: 0; }
@media (max-width: 900px) {
    .rmt-empty-state { grid-column: 1; padding: 36px 20px; }
}

.rmt-suggest-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); max-height: calc(100vh - 40px); overflow-y: auto; }
/* Live breakdown split into several one-tool-each cards (renderLiveExtras) - space them like any
   other stack of independent cards on this page. */
#liveExtrasCard .rmt-suggest-card + .rmt-suggest-card { margin-top: 14px; }
.rmt-suggest-card-header { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 0.88rem; color: var(--pl-purple-text); }
.rmt-settings-toggle { background: var(--bg-subtle); border: none; border-radius: 8px; width: 26px; height: 26px; cursor: pointer; font-size: 0.85rem; }
.rmt-settings-toggle:hover { background: var(--bg-subtle); }
.rmt-settings-panel { flex-direction: column; gap: 8px; background: var(--bg-subtle); border: 1px dashed var(--border-color); border-radius: 10px; padding: 10px; margin-top: 10px; }
.rmt-settings-hint { font-size: 0.65rem; color: var(--text-muted); font-weight: 600; }
.rmt-settings-label { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 700; color: var(--text-dark); gap: 8px; }
.rmt-settings-input { border: 1px solid var(--border-color); border-radius: 6px; padding: 4px 6px; font-size: 0.72rem; font-weight: 700; width: 90px; background: var(--bg-card); }
.rmt-settings-actions { display: flex; gap: 8px; margin-top: 2px; }
#rmtSimulatedBadge { display: none; font-size: 0.65rem; font-weight: 800; color: #b45309; background: rgba(245,158,11,0.12); border-radius: 6px; padding: 5px 8px; margin-top: 10px; }
#mtSimulatedBadge { display: none; font-size: 0.65rem; font-weight: 800; color: #b45309; background: rgba(245,158,11,0.12); border-radius: 6px; padding: 5px 8px; margin-top: 10px; }

/* The Suggest Transfers button is the payoff action of the whole Transfers panel on both Rate My
   Team and My Team - sized and shadowed to read as the primary action, not a settings-row button. */
.suggest-transfers-btn { width: 100%; margin-top: 10px; justify-content: center; font-size: 1rem; padding: 15px; border-radius: 12px; box-shadow: 0 4px 14px rgba(56,0,60,0.28); }
.suggest-transfers-btn:disabled, .suggest-transfers-btn.is-chip-disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); box-shadow: none; }

.get-started-callout { background: linear-gradient(135deg, #38003c 0%, #6b0e78 100%); border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 8px 22px rgba(56,0,60,0.25); }
.get-started-title { font-size: 1.05rem; font-weight: 900; color: white; }
.get-started-sub { font-size: 0.76rem; font-weight: 600; color: rgba(255,255,255,0.82); margin-top: 4px; line-height: 1.4; }
.get-started-fpl-id-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.get-started-input { flex: 1; min-width: 180px; padding: 10px 14px; border-radius: 10px; border: none; font-size: 0.82rem; font-weight: 600; outline: none; }
.get-started-alt { font-size: 0.7rem; color: rgba(255,255,255,0.75); margin-top: 10px; }
.get-started-alt a { color: white; font-weight: 800; text-decoration: underline; }

.get-started-callout.get-started-compact { background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: none; padding: 8px 12px; margin-bottom: 8px; }
.get-started-callout.get-started-compact .get-started-title { color: var(--pl-purple-text); font-size: 0.76rem; }
.get-started-callout.get-started-compact .get-started-sub { color: var(--text-muted); }
.get-started-callout.get-started-compact .get-started-input { border: 1.5px solid var(--border-color); color: var(--text-dark); padding: 7px 12px; font-size: 0.76rem; }
.get-started-callout.get-started-compact .get-started-fpl-id-row { margin-top: 6px; }

/* Same reasoning as get-started-compact - once a squad already exists, the full-size card with
   its explanatory sub-text is only useful the very first time. Applied on top of .adjustment-card
   (not replacing it) so this only needs to override what actually changes. */
.adjustment-card.adjustment-card-compact { padding: 8px 12px; margin-bottom: 8px; }
.adjustment-card.adjustment-card-compact .adjustment-card-name { font-size: 0.78rem; }
.adjustment-card.adjustment-card-compact .adjustment-card-sub { display: none; }
.adjustment-card.adjustment-card-compact .adjustment-card-badge { display: none; }

.chip-strategy-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--border-color); font-size: 0.72rem; font-weight: 700; }
.chip-strategy-row:last-child { border-bottom: none; }
.chip-strategy-status { color: var(--text-muted); font-weight: 600; font-style: italic; }
.chip-strategy-effect { color: var(--pl-purple-text); font-weight: 700; text-align: right; }

.reset-plan-link { display: block; width: 100%; margin-top: 10px; padding: 6px 8px; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); background: none; border: none; border-top: 1px solid var(--border-color); cursor: pointer; text-align: center; transition: 0.15s ease; }
.reset-plan-link:hover { color: #dc2626; }

/* Prominent Explore / Wildcard / Free Hit switch at the top of the pitch column. */
.plan-mode-switch { display: flex; gap: 4px; max-width: 460px; margin: 0 auto 8px auto; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 12px; padding: 4px; }
.pm-btn { flex: 1; background: transparent; color: var(--text-muted); border: none; border-radius: 9px; padding: 9px 6px; font-size: 0.78rem; font-weight: 800; cursor: pointer; transition: 0.15s ease; font-family: inherit; white-space: nowrap; }
.pm-btn:hover { color: var(--text-dark); }
.pm-btn.is-active { background: var(--bg-card); color: var(--pl-purple-text); box-shadow: 0 1px 4px rgba(15,23,42,0.12); }
.pm-btn[data-mode="wildcard"].is-active { color: #6d28d9; }
.pm-btn[data-mode="free_hit"].is-active { color: #b91c1c; }

/* Slim one-line context banner under the switch (replaces the big PLANNER sign). */
.plan-mode-banner-slim { align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; text-align: center; padding: 7px 14px; border-radius: 9px; margin-bottom: 10px; font-size: 0.72rem; font-weight: 600; line-height: 1.4; }
.plan-mode-banner-slim b { font-weight: 800; }
.plan-mode-banner-slim.mode-wildcard { background: #f3e8ff; color: #4c1d95; }
.plan-mode-banner-slim.mode-free_hit { background: #fee2e2; color: #7f1d1d; }

/* Calmer right-sidebar controls. */
.sidebar-select { width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-dark); font-weight: 600; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 0.72rem; font-family: inherit; }
.sidebar-select:focus { outline: none; border-color: var(--pl-purple-text); box-shadow: var(--focus-ring); }
.sidebar-select-quiet { color: var(--text-muted); font-size: 0.68rem; padding: 5px 8px; }

.chip-strategy-box { display: flex; flex-direction: column; gap: 9px; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px; }
.chip-row-label { display: block; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 3px; }
.chip-row-label.chip-wc { color: #6d28d9; }
.chip-row-label.chip-fh { color: #b91c1c; }
.chip-row-label.chip-bb { color: #b45309; }
.chip-select { border-left-width: 3px; }
.chip-select.chip-wc { border-left-color: #8b5cf6; }
.chip-select.chip-fh { border-left-color: #ef4444; }
.chip-select.chip-bb { border-left-color: #f59e0b; }
.chip-row-check { display: none; align-items: center; gap: 5px; margin-top: 6px; font-size: 0.62rem; font-weight: 700; color: #78350f; cursor: pointer; }
.chip-row-check input { cursor: pointer; }

/* Save My Squad - the one action on this page nobody should miss, so it's the visually loudest
   button here rather than a modest row-item next to the selection count. */
.save-my-squad-btn { font-size: 1rem; padding: 14px 32px; border-radius: 14px; box-shadow: 0 4px 14px rgba(16,185,129,0.35); background: #10b981; color: white; }
.save-my-squad-btn:not(:disabled) { animation: save-btn-pulse 2.2s ease-in-out infinite; }
.save-my-squad-btn:disabled { opacity: 0.5; box-shadow: none; animation: none; }
@keyframes save-btn-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(16,185,129,0.35); }
    50% { box-shadow: 0 4px 22px rgba(16,185,129,0.6); }
}

/* Fun circular % gauge - a real 0-100% scale with headroom (see ELITE_PTS_PER_STARTER_PER_GW
   server-side) rather than a compressed always-high number. */
.score-gauge-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 18px 14px; text-align: center; box-shadow: 0 2px 8px rgba(56,0,60,0.06); }
.score-gauge-wrap { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.score-gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: #e9e2ec; stroke-width: 10; }
.gauge-fill { fill: none; stroke: var(--pl-purple-text); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.7 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s ease; }
.gauge-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; padding: 0 20px; box-sizing: border-box; }
.gauge-score { font-size: 1.9rem; font-weight: 900; color: var(--text-dark); line-height: 1; }
.gauge-pct-sign { font-size: 0.85rem; font-weight: 800; color: var(--text-muted); line-height: 1; align-self: center; margin-top: 2px; }
.gauge-verdict { font-size: 0.95rem; font-weight: 800; margin-top: 8px; }
.gauge-detail { font-size: 0.78rem; font-weight: 700; color: var(--text-dark); margin-top: 6px; }
.gauge-sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
.gauge-rated-with { font-size: 0.64rem; font-weight: 700; color: var(--pl-purple-text); background: rgba(56,0,60,0.06); border-radius: 8px; padding: 4px 8px; margin-top: 8px; display: inline-block; }

/* Settings panel lives directly under the gauge it affects (not tucked in the far-right Transfers
   column) so changing a what-if and watching the score react is one glance, not a cross-page
   scan. */
/* Nudges the Apply button once a horizon/chip change hasn't been applied yet - same pulse used
   everywhere else a "you changed something, act on it" hint is needed. */
#rmtApplyBtn.is-dirty { animation: rmtReratePulse 1.4s ease-in-out infinite; }
@keyframes rmtReratePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(56,0,60,0.35); } 50% { box-shadow: 0 0 0 5px rgba(56,0,60,0); } }
#rmtSimulatedBadge { display: none; align-items: center; gap: 6px; font-size: 0.65rem; font-weight: 800; color: #b45309; background: rgba(245,158,11,0.12); border-radius: 6px; padding: 5px 8px; margin-top: 10px; }
.rmt-simulated-reset { color: inherit; text-decoration: underline; cursor: pointer; }

/* Suggested Transfers - a real card grid rather than a plain list, so the payoff of clicking
   the button reads as a highlight of the page, not another settings row. */
.suggestions-heading { font-size: 0.95rem; font-weight: 800; color: var(--pl-purple-text); margin: 18px 0 10px 0; text-align: center; }
.suggestions-grid { display: flex; flex-direction: column; gap: 12px; }
.suggestion-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(15,23,42,0.06); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.suggestion-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(56,0,60,0.1); }
.suggestion-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.suggestion-rank-group { display: flex; align-items: center; gap: 8px; }
.suggestion-rank-circle { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 900; }
.suggestion-count-badge { background: rgba(56,0,60,0.08); color: var(--pl-purple-text); font-weight: 800; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 20px; }
.suggestion-score-block { display: flex; align-items: baseline; gap: 6px; }
.suggestion-score { font-size: 1.3rem; font-weight: 900; color: var(--text-dark); }
.suggestion-score-delta { font-size: 0.72rem; font-weight: 800; color: #10b981; background: rgba(16,185,129,0.12); padding: 2px 6px; border-radius: 6px; }
.suggestion-swaps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.suggestion-swap-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.78rem; font-weight: 700; background: var(--bg-subtle); border-radius: 8px; padding: 6px 10px; }
.suggestion-out { color: #dc2626; }
.suggestion-in { color: #10b981; }
.suggestion-cost { color: var(--text-muted); font-weight: 600; font-size: 0.7rem; }
.suggestion-arrow { color: var(--text-muted); font-weight: 900; }
.suggestion-footer { font-size: 0.72rem; font-weight: 800; color: var(--pl-purple-text); text-align: right; }

@media (max-width: 1300px) {
    .rmt-layout { grid-template-columns: 270px 1fr; }
    .rmt-suggest-col { grid-column: 2; position: static; }
}
@media (max-width: 900px) {
    .rmt-layout { grid-template-columns: 1fr; }
    .rmt-control-col { position: static; }
    .rmt-suggest-col { grid-column: 1; }
}
.override-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.override-field-row { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; box-sizing: border-box; }
.override-field-row.is-overridden { background: #eff6ff; border-color: #93c5fd; }
.override-field-row label { display: block; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; letter-spacing: 0.02em; }
.override-field-desc { font-size: 0.6rem; color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: normal; margin: -2px 0 5px 0; line-height: 1.25; }
.override-field-control { display: flex; align-items: center; gap: 4px; }
.override-field-control input[type="number"] { width: 100%; padding: 4px 6px; border: 2px solid var(--border-color); border-radius: 5px; font-weight: 700; font-size: 0.78rem; box-sizing: border-box; }
.override-field-row.is-overridden .override-field-control input[type="number"] { border-color: #1e3a8a; }
.override-field-control input.field-dirty { border-color: #3b82f6 !important; background: #eff6ff; }
.override-field-control input[type="checkbox"] { width: 18px; height: 18px; }
.override-slider { width: 100%; margin: 2px 0 6px 0; accent-color: var(--pl-purple-text); cursor: pointer; }
.override-reset-btn { background: var(--bg-subtle); border: none; border-radius: 5px; width: 24px; height: 24px; flex-shrink: 0; cursor: pointer; font-size: 0.8rem; color: var(--pl-purple-text); }
.override-reset-btn:hover { background: var(--bg-subtle-2); }
.override-default-hint { font-size: 0.6rem; color: var(--text-muted); margin-top: 2px; }
.override-customized-badge { display: inline-block; background: #1e3a8a; color: white; font-size: 0.5rem; font-weight: 800; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; margin-left: 4px; letter-spacing: 0.02em; }

/* FDR band editor - colored to match the same difficulty scale used on the pitch fixture strips */
.override-field-row.fdr-band-1 { border-top: 4px solid #15803d; }
.override-field-row.fdr-band-2 { border-top: 4px solid #22c55e; }
.override-field-row.fdr-band-3 { border-top: 4px solid #94a3b8; }
.override-field-row.fdr-band-4 { border-top: 4px solid #f97316; }
.override-field-row.fdr-band-5 { border-top: 4px solid #dc2626; }
.fdr-band-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.penalty-takers-list { display: flex; flex-direction: column; gap: 6px; }
.penalty-taker-row { display: flex; gap: 6px; align-items: center; }
.penalty-taker-row .pen-player-select { flex: 2; padding: 5px; border: 2px solid var(--border-color); border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
.penalty-taker-row .pen-share-input { flex: 1; padding: 5px; border: 2px solid var(--border-color); border-radius: 6px; font-size: 0.75rem; font-weight: 700; }
#recalcBtn.has-pending-personalization { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.5); }
.callout-dismiss-btn { background: none; border: none; color: #4c1d95; font-weight: 800; cursor: pointer; font-size: 0.9rem; flex-shrink: 0; padding: 2px 6px; }
.callout-dismiss-btn:hover { opacity: 0.6; }
.tips-callout { position: relative; background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); border: 1.5px solid #d8b4fe; border-radius: 10px; padding: 7px 26px 7px 11px; margin: 0 auto 10px auto; max-width: 820px; box-shadow: 0 2px 8px rgba(76,29,149,0.07); }
.tips-callout-close { position: absolute; top: 3px; right: 4px; color: var(--pl-purple-text); font-size: 0.7rem; padding: 2px 5px; }
.tips-callout-badge { position: absolute; top: -9px; left: -13px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; box-shadow: 0 2px 6px rgba(76,29,149,0.35); border: 2px solid white; }
.tips-callout-body { display: flex; flex-direction: column; gap: 3px; }
.tips-callout-row { display: flex; align-items: flex-start; gap: 6px; font-size: 0.66rem; color: #3b0764; line-height: 1.3; }
.tips-callout-icon { font-size: 0.78rem; flex-shrink: 0; line-height: 1.25; }
.tips-callout-row a { color: var(--pl-purple-text); font-weight: 800; text-decoration: underline; }
.tips-callout-row strong { color: var(--pl-purple-text); }
@media (max-width: 640px) {
    .tips-callout { padding: 6px 24px 6px 10px; }
    .tips-callout-row { font-size: 0.63rem; }
}

/* My Adjustments page */
.adjustments-browse-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 22px; }
.adjustments-browse-card { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--text-dark); box-shadow: 0 1px 2px rgba(15,23,42,0.04); transition: 0.15s ease; }
.adjustments-browse-card:hover { border-color: var(--pl-purple-text); box-shadow: 0 4px 10px rgba(56,0,60,0.1); transform: translateY(-1px); }
.adjustments-browse-icon { font-size: 1.6rem; flex-shrink: 0; }
.adjustments-browse-sub { color: var(--text-muted); font-size: 0.75rem; font-weight: 500; }
.adjustments-section-title { font-size: 0.95rem; font-weight: 800; color: var(--pl-purple-text); margin: 22px 0 10px 0; padding-bottom: 6px; border-bottom: 2px solid var(--border-color); }
.adjustment-card { display: flex; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); cursor: pointer; transition: 0.15s ease; }
.adjustment-card:hover { border-color: var(--pl-purple-text); box-shadow: 0 4px 10px rgba(56,0,60,0.08); }
.adjustment-card-badge { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; margin-top: 2px; }
.adjustment-card-body { flex-grow: 1; min-width: 0; }
.adjustment-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.adjustment-card-name { font-weight: 800; font-size: 0.92rem; color: var(--text-dark); }
.adjustment-card-sub { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; margin-top: 1px; }
.adjustments-field-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--border-color); font-size: 0.78rem; }
.adjustments-field-row:last-child { border-bottom: none; }
.adjustments-tier-label { font-size: 0.68rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }

/* Fixture Ticker page */
.fixtures-quicknav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px 0; }
.fixtures-quicknav a { display: flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--pl-purple-text); font-weight: 800; font-size: 0.76rem; padding: 8px 14px; border-radius: 20px; text-decoration: none; box-shadow: 0 1px 2px rgba(15,23,42,0.04); transition: 0.15s ease; }
.fixtures-quicknav a:hover { border-color: var(--pl-purple-text); box-shadow: 0 3px 10px rgba(56,0,60,0.12); transform: translateY(-1px); }
.fixtures-section-anchor { scroll-margin-top: 84px; }
.fixtures-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; }
.fixtures-view-toggle { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 3px; }
.fixtures-view-toggle button { border: none; background: none; padding: 6px 12px; border-radius: 6px; font-size: 0.72rem; font-weight: 800; color: var(--text-muted); cursor: pointer; }
.fixtures-view-toggle button.active { background: var(--pl-purple); color: white; }
.fixtures-controls select { background: var(--bg-card); border: 2px solid var(--border-color); color: var(--text-dark); font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 0.72rem; }
.fixtures-controls label { font-size: 0.68rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-right: 4px; }
.fixtures-team-picker { display: flex; flex-wrap: wrap; gap: 5px; max-width: 100%; margin-top: 10px; }
.fixtures-team-chip { display: flex; align-items: center; gap: 4px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 3px 9px 3px 4px; font-size: 0.68rem; font-weight: 700; cursor: pointer; user-select: none; transition: 0.15s ease; }
.fixtures-team-chip img { width: 16px; height: 16px; object-fit: contain; }
.fixtures-team-chip.off { opacity: 0.32; }
.fixtures-team-picker-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.fixtures-team-picker-actions button { border: none; background: none; color: var(--pl-purple-text); font-weight: 800; font-size: 0.66rem; cursor: pointer; text-decoration: underline; padding: 0; }

.ticker-scroll-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); max-height: 560px; overflow-y: auto; }
.ticker-table { border-collapse: collapse; width: 100%; }
.ticker-table th, .ticker-table td { padding: 4px 5px; text-align: center; font-size: 0.66rem; white-space: nowrap; }
.ticker-table thead th { background: var(--bg-subtle); color: var(--pl-purple-text); font-weight: 800; text-transform: uppercase; font-size: 0.6rem; position: sticky; top: 0; z-index: 2; border-bottom: 2px solid var(--border-color); padding: 8px 6px; }
.ticker-team-cell { position: sticky; left: 0; background: var(--bg-card); z-index: 3; text-align: left; display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--text-dark); border-right: 2px solid var(--border-color); min-width: 130px; padding: 6px 10px; cursor: pointer; }
.ticker-team-cell:hover { color: var(--pl-purple-text); }
.ticker-team-cell img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.ticker-table thead th:first-child { position: sticky; left: 0; z-index: 4; text-align: left; padding-left: 10px; }
.ticker-fdr-cell { color: white; font-weight: 700; border-radius: 6px; margin: 2px auto; padding: 5px 4px; min-width: 52px; }
.ticker-blank-cell { color: var(--text-muted); background: var(--bg-subtle); border-radius: 6px; margin: 2px auto; padding: 5px 4px; font-style: italic; min-width: 52px; }
.ticker-avg-badge { display: inline-block; font-weight: 800; color: white; border-radius: 20px; padding: 3px 9px; font-size: 0.65rem; }
.ticker-fdr-cell.ticker-picked, .ticker-blank-cell.ticker-picked { box-shadow: 0 0 0 2px #1e3a8a; position: relative; }

.rotation-combo-result { display: flex; align-items: center; gap: 10px; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; cursor: pointer; transition: 0.15s ease; }
.rotation-combo-result:hover { border-color: var(--pl-purple-text); background: var(--bg-card); box-shadow: 0 2px 8px rgba(56,0,60,0.08); }
.rotation-combo-badges { display: flex; }
.rotation-combo-badges img { width: 26px; height: 26px; object-fit: contain; border-radius: 50%; border: 2px solid white; margin-left: -8px; background: var(--bg-card); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.rotation-combo-badges img:first-child { margin-left: 0; }
.rotation-combo-names { font-weight: 700; font-size: 0.78rem; color: var(--text-dark); }
.rotation-combo-score { margin-left: auto; font-weight: 800; color: var(--pl-purple-text); font-size: 0.85rem; text-align: right; }
.rotation-combo-score span { display: block; font-size: 0.6rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }

/* Players page (Model Workshop) */
.players-page-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.players-page-toolbar .search-input { width: 220px; padding: 8px 14px; margin: 0; }
.players-page-toolbar select { width: auto; background: var(--bg-card); border: 2px solid var(--border-color); color: var(--text-dark); font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 0.72rem; }
.player-count-badge { display: inline-block; background: var(--pl-purple); color: white; font-size: 0.68rem; font-weight: 800; padding: 5px 12px; border-radius: 20px; margin: 12px 0 2px 0; }
.players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; }
.player-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); cursor: pointer; transition: 0.15s ease; }
.player-card:hover { border-color: var(--pl-purple-text); box-shadow: 0 6px 14px rgba(56,0,60,0.1); transform: translateY(-2px); }
.player-card-header { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.player-card-badge { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.player-card-name-wrap { flex-grow: 1; min-width: 0; }
.player-card-name { font-weight: 800; font-size: 0.85rem; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-card-team { font-size: 0.64rem; color: var(--text-muted); font-weight: 600; margin-top: 1px; }
.injury-dot { font-size: 0.6rem; }
.player-pos-pill { font-size: 0.58rem; font-weight: 800; color: white; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; flex-shrink: 0; }
.player-card-stats-row { display: flex; gap: 5px; }
.player-card-stats-row .stat-box { flex: 1; padding: 4px 1px; }
.player-card-cta { margin-top: 11px; font-size: 0.64rem; font-weight: 800; color: var(--pl-purple-text); text-align: right; }

/* Teams page (Model Workshop) */
.teams-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 14px; }
.team-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); cursor: pointer; transition: 0.15s ease; }
.team-card:hover { border-color: var(--pl-purple-text); box-shadow: 0 6px 14px rgba(56,0,60,0.1); transform: translateY(-2px); }
.team-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.team-card-badge { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.team-card-name { font-weight: 800; font-size: 0.95rem; color: var(--text-dark); }
.team-meter-row { margin-bottom: 9px; }
.team-meter-label { display: flex; justify-content: space-between; font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 3px; }
.team-meter-label span:last-child { color: var(--text-dark); font-weight: 800; }
.team-meter-bg { width: 100%; background: var(--bg-subtle); height: 7px; border-radius: 4px; overflow: hidden; }
.team-meter-fill { height: 100%; border-radius: 4px; }
.team-card-pills { display: flex; gap: 6px; margin: 12px 0 10px 0; }
.team-fdr-pill { font-size: 0.62rem; font-weight: 800; color: white; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.02em; }
.team-card-stats-row { display: flex; gap: 6px; }
.team-card-stats-row .stat-box { flex: 1; }
.team-card-cta { margin-top: 12px; font-size: 0.66rem; font-weight: 800; color: var(--pl-purple-text); text-align: right; }

/* FDR editor page */
.fdr-legend { display: flex; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,0.06); margin: 18px 0 6px 0; }
.fdr-legend-segment { flex: 1; text-align: center; padding: 8px 4px; font-size: 0.68rem; font-weight: 800; color: white; }
.fdr-legend-caption { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 20px; }
.fdr-tier-tabs { display: flex; gap: 6px; background: var(--bg-subtle); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.fdr-tier-tab { flex: 1; border: none; background: none; padding: 9px 8px; border-radius: 8px; font-size: 0.75rem; font-weight: 800; color: var(--text-muted); cursor: pointer; transition: 0.15s ease; }
.fdr-tier-tab:hover { color: var(--pl-purple-text); }
.fdr-tier-tab.active { background: var(--pl-purple); color: white; box-shadow: 0 2px 6px rgba(56,0,60,0.25); }
.fdr2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.fdr2-card { display: flex; gap: 12px; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; align-items: flex-start; }
.fdr2-card.is-overridden { background: #eff6ff; border-color: #93c5fd; }
.fdr2-badge { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 0.95rem; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.fdr2-body { flex-grow: 1; min-width: 0; }
.fdr2-title { font-size: 0.72rem; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.fdr2-title .fdr2-sub { color: var(--text-muted); font-weight: 600; text-transform: none; }
.fdr2-input { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 2px solid var(--border-color); border-radius: 6px; font-size: 0.8rem; font-weight: 700; margin-bottom: 4px; }
.fdr2-card.is-overridden .fdr2-input { border-color: #1e3a8a; }

.fixture-blocks-row { display: flex; gap: 8px; margin-top: 4px; margin-bottom: 12px; }
.fixture-block { flex: 1; text-align: center; padding: 4px; border-radius: 6px; font-weight: 800; font-size: 0.7rem; box-shadow: 0 1px 2px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 2px; border: 1px solid rgba(0,0,0,0.05); }
.fixture-block-gw { font-size: 0.5rem; text-transform: uppercase; opacity: 0.8; }

.collapsible-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: background 0.2s; }
.collapsible-header:hover { background: rgba(56, 0, 60, 0.04); border-radius: 4px; padding: 2px 6px; margin-left: -6px; margin-right: -6px; }
.arrow { font-size: 0.7rem; transition: transform 0.2s ease; }
.arrow.collapsed { transform: rotate(-90deg); }
.breakdown-content { overflow: hidden; transition: max-height 0.3s ease; }

/* MOBILE BOTTOM NAV */
.mobile-bottom-nav { display: none; }

@media (max-width: 1100px) {
    /* 80px used to be the nav's own height + margin, but that's tight the moment a real phone's
       address bar is expanded (shrinks the visible viewport without shrinking page content) or
       the device has a home-indicator gesture area - both eat into that margin and the fixed nav
       ends up sitting over the last row of content (the bench). Extra headroom + the safe-area
       inset (0 on devices without a home indicator/notch) covers both without affecting desktop. */
    .dashboard-master-wrapper { grid-template-columns: 1fr; padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
    /* My Team's Transfers column is a desktop enhancement - on mobile it would just sit below
       the existing pitch/players tab system with no toggle of its own, so it's hidden rather
       than cluttering the already-tight mobile layout. */
    .mt-transfers-col { display: none; }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 15px; right: 15px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        z-index: 9999;
        border: 1px solid rgba(226, 232, 240, 0.8);
        border-radius: 20px;
        padding: 4px;
        gap: 4px;
    }

    .mobile-nav-btn {
        flex: 1; padding: 6px 0; background: transparent; border: none;
        color: var(--text-muted); font-size: 0.62rem; font-weight: 800;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        cursor: pointer; transition: all 0.2s; text-transform: uppercase;
        border-radius: 16px;
    }

    .mobile-nav-btn.active {
        color: var(--pl-purple-text);
        background: var(--bg-subtle);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .mobile-nav-btn i { font-style: normal; font-size: 1rem; transition: transform 0.2s; }
    .mobile-nav-btn.active i { transform: scale(1.1); }

    body.mobile-view-pitch .left-sidebar, body.mobile-view-pitch .sidebar-column, body.mobile-view-pitch .mt-transfers-col { display: none !important; }
    body.mobile-view-pitch .center-dashboard-area { display: flex !important; width: 100%; }

    body.mobile-view-players .center-dashboard-area, body.mobile-view-players .sidebar-column, body.mobile-view-players .mt-transfers-col { display: none !important; }
    body.mobile-view-players .left-sidebar { display: flex !important; width: auto; height: auto; max-height: calc(100vh - 120px); position: static; margin: 0 10px; }

    /* My Team's Transfers column (chip strategy, transfer plan/summary, Suggest Transfers) - a
       desktop-only third grid column normally (see .mt-transfers-col { display: none } above),
       given its own mobile tab here instead of staying permanently unreachable on mobile. */
    body.mobile-view-transfers .center-dashboard-area, body.mobile-view-transfers .left-sidebar { display: none !important; }
    body.mobile-view-transfers .mt-transfers-col { display: block !important; width: auto; position: static; margin: 0 10px; }

    body.mobile-view-settings .center-dashboard-area, body.mobile-view-settings .left-sidebar { display: none !important; }
    body.mobile-view-settings .sidebar-column { display: flex !important; width: auto; position: static; border-radius: 16px; border: 1px solid var(--border-color); margin: 0 10px; }

    /* Chip buttons are built with inline padding/flex styles (JS template, reused from
       .action-btn), so overriding them here needs !important - the goal is one row of four
       always, shrinking first and only falling back to horizontal scroll if they still don't
       fit at the smallest reasonable size. */
    #chipBar { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 2px; }
    #chipBar button { padding: 5px 8px !important; font-size: 0.62rem !important; flex-shrink: 0; }
    #chipBar button span:first-child { font-size: 0.62rem !important; white-space: nowrap; }
    #chipBar button span:last-child { font-size: 0.5rem !important; }

    /* Left/right padding here was still the desktop 25px each side - on a ~375px phone that's
       ~50px (13% of the viewport) spent on empty margin around the pitch instead of the pitch
       itself, when every other mobile-tier rule below is fighting to reclaim width for cards.
       The negative margin cancels out .dashboard-master-wrapper's own 20px side padding (a global
       wrapper shared by every mobile page, left untouched here on purpose) so the pitch card
       alone stretches close to the real screen edges, matching the official app's mobile pitch -
       everything else on the page keeps its normal inset. */
    /* Full-bleed via the standard 100vw/left:50%/-50vw technique instead of a negative margin
       sized to cancel .dashboard-master-wrapper's own padding - that only works out symmetric if
       nothing else on the page is nudging the container's effective width off-center, which is
       exactly what went wrong (flush on the left, a visible gap still on the right). This version
       anchors to the true viewport width directly, so it comes out centered regardless of what any
       ancestor's own box model happens to be doing. */
    .pitch-area-container { box-sizing: border-box; width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 2px 3px 6px 3px; border-radius: 0; }

    .pitch-brand-bar { max-width: none; margin: 0 4px -2px 4px; padding: 0 30px; }
    .pitch-brand-sign { padding: 4px 8px; }
    .pitch-brand-logo { height: 10px; }

    .soccer-pitch-wrapper {
        border-radius: 12px;
        padding: 22px 3px 14px 3px; /* Taller overall - was cramped */
        margin-bottom: 28px;
    }

    .fpl-player-card { width: 84px; }
    .fpl-shirt-wrap { height: 48px; }
    .fpl-shirt-img { max-height: 48px; }
    .fpl-name-plate { padding: 1px 3px; }
    .fpl-player-name { font-size: 0.52rem; }
    .fpl-player-subline { font-size: 0.42rem; }
    /* Wasn't shrunk with everything else - at the old 0.5rem/letter-spacing it's wider than a
       46px card, and .fpl-player-card's overflow:visible (needed for the remove/sub buttons that
       hang outside the card) let it spill sideways into neighboring cards instead of clipping. */
    .player-next-fix-strip { font-size: 0.4rem; letter-spacing: 0.1px; padding: 1px 0; }

    /* The goal/penalty box markings are fixed-pixel regardless of viewport, so they don't shrink
       along with the pitch itself on mobile - GK row sits noticeably low relative to the (now
       proportionally oversized) box lines without this. */
    .pitch-line-up-gk { margin: -6px 0 18px 0; }
    .pitch-goal-box { width: 60px; height: 18px; }
    .pitch-penalty-box { width: 160px; height: 52px; }
    .pitch-penalty-spot { top: 40px; }
    .pitch-penalty-arc { top: 52px; width: 40px; height: 16px; border-radius: 0 0 40px 40px; }

    /* Closer to a flat stat bar (no card chrome) rather than a bordered/shadowed box, and sits
       tighter to the pitch below it. Ordering itself (below the chips, above the pitch) is set
       globally now - see .my-team-page .summary-card order rule near line 154. */
    .summary-card { padding: 3px 4px; margin: 2px auto 4px auto; }
    .stat-value-big { font-size: 0.74rem; margin-top: 0; }
    .stat-label-top { font-size: 0.48rem; }

    /* Slightly bigger margins on pitch lines - GK deliberately excluded here, it has its own
       smaller margin above (line 742) tuned specifically so it sits inside the goal box instead
       of low against the DEF row; this rule used to also match .pitch-line-up-gk and silently
       override that with a much bigger margin, which is what was actually pushing the GK low. */
    .pitch-line-up-def { margin: 12px 0 26px 0; }
    .pitch-line-up-mid { margin: 12px 0 26px 0; }
    .pitch-line-up-fwd { margin: 12px 0 15px 0; }

    .pitch-line-up-gk { gap: 8px; }
    .pitch-line-up-def, .pitch-line-up-mid { gap: 3px; }
    .pitch-line-up-fwd { gap: 8px; }

    .fpl-bench-pod { max-width: 100%; margin-top: -20px; border-radius: 12px; padding-top: 2px; padding-bottom: 3px; }
    .fpl-bench-card { width: 68px; }
    .fpl-bench-card .sub-btn { left: -15px; }
    .fpl-bench-header { gap: 6px; margin-bottom: 6px; }
    .fpl-bench-header span { flex-basis: 62px; }
    .fpl-bench-grid { gap: 4px; }
    .fpl-bench-shirt-wrap { height: 26px; }
    .fpl-bench-shirt-img { max-height: 26px; }
    .fpl-bench-name { font-size: 0.48rem; }
    .fpl-bench-subline { font-size: 0.34rem; }

    /* Was a fixed 25px regardless of viewport - proportionally oversized once the pitch itself
       is this much narrower on mobile. */
    .corner-arc-tl, .corner-arc-tr { width: 14px; height: 14px; }
    .corner-arc-tl { border-radius: 0 0 14px 0; }
    .corner-arc-tr { border-radius: 0 0 0 14px; }

    /* Modal adjustments for smaller screens to allow scrolling */
    .modal-card { max-height: 75vh; padding: 15px; padding-bottom: 30px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .player-header-box { padding: 10px; margin-bottom: 10px; }
    .header-badge-img { width: 38px; height: 38px; }
    .player-header-title { font-size: 1.1rem; }
    .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .stat-box { padding: 4px 2px; }
    .calc-row { padding: 4px 0; font-size: 0.75rem; }
}

@media (max-width: 400px) {
    .fpl-player-card { width: 74px; border-width: 1px; }
    .fpl-bench-card { width: 62px; }
    .fpl-bench-card .sub-btn { left: -16px; }
    .fpl-bench-header { gap: 4px; }
    .fpl-bench-header span { flex-basis: 56px; }
    .fpl-bench-grid { gap: 4px; }
    .fpl-bench-shirt-wrap { height: 22px; }
    .fpl-bench-shirt-img { max-height: 22px; }
    .fpl-bench-name { font-size: 0.36rem; }
    .fpl-bench-subline { font-size: 0.3rem; }
    .pitch-line-up-gk, .pitch-line-up-def, .pitch-line-up-mid, .pitch-line-up-fwd { gap: 10px; }
    .fpl-player-name { font-size: 0.4rem; }
    .fpl-player-subline { font-size: 0.34rem; }
    .fpl-shirt-wrap { height: 43px; }
    .fpl-shirt-img { max-height: 43px; }
    .player-next-fix-strip { font-size: 0.36rem; }
    .corner-arc-tl, .corner-arc-tr { width: 11px; height: 11px; }
    .corner-arc-tl { border-radius: 0 0 11px 0; }
    .corner-arc-tr { border-radius: 0 0 0 11px; }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .calc-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .calc-row strong { align-self: flex-end; }
}

/* Compare Players tool - player picker */
.cmp-slots { display: grid; gap: 14px; margin-bottom: 12px; }
.cmp-slots-2 { grid-template-columns: repeat(2, 1fr); }
.cmp-slots-3 { grid-template-columns: repeat(3, 1fr); }
.cmp-slot { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--card-shadow); min-height: 168px; display: flex; flex-direction: column; align-items: center; position: relative; transition: 0.15s ease; }
.cmp-slot-empty { justify-content: center; padding: 20px 16px; border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--border-color)); box-shadow: none; background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); gap: 10px; }
.cmp-slot-empty-avatar { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, white); color: var(--accent); font-size: 1.3rem; font-weight: 300; display: flex; align-items: center; justify-content: center; line-height: 1; }
.cmp-search-box { width: 100%; position: relative; }
.cmp-search-input { width: 100%; box-sizing: border-box; padding: 9px 14px; border-radius: 20px; border: 1.5px solid var(--border-color); font-size: 0.8rem; outline: none; text-align: center; font-weight: 600; }
.cmp-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cmp-search-results { display: none; position: absolute; top: calc(100% + 6px); left: -8px; right: -8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 10px 28px rgba(15,23,42,0.18); z-index: 40; max-height: 280px; overflow-y: auto; text-align: left; }
.cmp-search-result { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; }
.cmp-search-result:hover { background: var(--bg-subtle); }
.cmp-search-result img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.cmp-search-result-name { font-weight: 700; font-size: 0.8rem; color: var(--text-dark); flex-shrink: 0; }
.cmp-search-result-pos { font-size: 0.6rem; padding: 2px 6px; flex-shrink: 0; }
.cmp-search-result-sub { font-size: 0.66rem; color: var(--text-muted); font-weight: 600; margin-left: auto; text-align: right; white-space: nowrap; }
.cmp-search-empty { padding: 12px; font-size: 0.75rem; color: var(--text-muted); text-align: center; }
.cmp-slot-filled { padding: 20px 14px 16px 14px; gap: 4px; border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color)); box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 20%, transparent); }
.cmp-slot-remove { position: absolute; top: 8px; right: 8px; background: var(--bg-subtle); border: none; width: 22px; height: 22px; border-radius: 50%; font-size: 0.7rem; font-weight: 800; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.15s ease; }
.cmp-slot-remove:hover { background: #fee2e2; color: #dc2626; }
.cmp-slot-photo-wrap { position: relative; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 6px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 22%, white), var(--bg-subtle)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, white); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.cmp-slot-photo { width: 100%; height: auto; position: relative; z-index: 1; }
.cmp-slot-photo-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: var(--accent); background-size: 58% auto; background-position: center 60%; background-repeat: no-repeat; }
.cmp-slot-badge { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; object-fit: contain; background: var(--bg-card); border-radius: 50%; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,0.25); z-index: 2; }
.cmp-slot-name { font-weight: 800; font-size: 0.88rem; color: var(--text-dark); text-align: center; }
.cmp-slot-team { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }
.cmp-add-third-btn { display: block; margin: 0 auto 22px auto; background: none; border: 1.5px dashed var(--border-color); border-radius: 20px; padding: 7px 18px; font-size: 0.75rem; font-weight: 800; color: var(--text-muted); cursor: pointer; transition: 0.15s ease; }
.cmp-add-third-btn:hover { border-color: var(--pl-purple-text); color: var(--pl-purple-text); background: rgba(56,0,60,0.04); }
.cmp-empty-hint { text-align: center; color: var(--text-muted); font-size: 0.82rem; padding: 40px 20px; border: 1px dashed var(--border-color); border-radius: 12px; }

/* Compare Players - Head to Head shareable card */
.h2h-toolbar { display: none; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.h2h-horizon-control { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 800; color: var(--pl-purple-text); }
.h2h-horizon-select { border: 1.5px solid var(--border-color); border-radius: 20px; padding: 6px 12px; font-size: 0.75rem; font-weight: 800; color: var(--pl-purple-text); background: var(--bg-card); cursor: pointer; }
.h2h-download-btn { background: var(--pl-purple); color: white; border: none; border-radius: 20px; padding: 9px 18px; font-size: 0.78rem; font-weight: 800; cursor: pointer; box-shadow: 0 3px 10px rgba(56,0,60,0.22); }
.h2h-download-btn:hover { background: #4a0050; }
.h2h-download-btn:disabled { opacity: 0.6; cursor: default; }
.h2h-card-wrap { overflow-x: auto; padding-bottom: 4px; }
.h2h-card {
    position: relative; overflow: hidden; box-sizing: border-box;
    /* Narrower than before (900 -> 680) and less padded - the original size read fine on the
       page itself but came out oversized/low-density once posted and scaled down in an X
       timeline card, where most of that width was just background. Light nu-surface card
       (not a dark purple-gradient hero) to match every other shareable card on the site (the
       Model Workshop tweak/FDR cards) rather than inventing a separate visual language here. */
    width: 100%; max-width: 680px; margin: 0 auto;
    background: var(--nu-surface); border: 1px solid var(--nu-border);
    border-radius: var(--nu-radius-lg); padding: 22px 22px 16px 22px;
    box-shadow: var(--nu-shadow);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.h2h-card-header { text-align: center; margin-bottom: 14px; }
.h2h-eyebrow { font-size: 0.95rem; font-weight: 900; letter-spacing: 0.09em; color: var(--nu-accent); }
.h2h-subeyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; color: var(--nu-text-faint); margin-top: 2px; text-transform: uppercase; }

.h2h-players-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.h2h-player-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.h2h-vs { flex-shrink: 0; font-size: 0.95rem; font-weight: 900; color: var(--nu-text-faint); letter-spacing: 0.05em; padding: 0 4px; }

.h2h-player-photo-wrap { position: relative; border-radius: 50%; margin-bottom: 8px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
    background: radial-gradient(circle at 50% 25%, rgba(var(--accent-rgb), 0.16), var(--nu-surface-2) 72%);
    box-shadow: 0 0 0 3px var(--accent), 0 0 14px rgba(var(--accent-rgb), 0.25);
}
.h2h-card-2 .h2h-player-photo-wrap { width: 100px; height: 100px; }
.h2h-card-3 .h2h-player-photo-wrap { width: 78px; height: 78px; }
.h2h-player-photo { width: 100%; height: auto; position: relative; z-index: 1; }
/* Faint team-badge watermark (set inline via background-image, see playerHeaderHTML) behind the
   initials for players FPL's own CDN has no photo for - reads as a deliberate "team-forward"
   treatment rather than a missing image. */
.h2h-player-photo-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--accent); background-size: 60% auto; background-position: center 60%; background-repeat: no-repeat; }
.h2h-card-2 .h2h-player-photo-fallback { font-size: 1.7rem; }
.h2h-card-3 .h2h-player-photo-fallback { font-size: 1.3rem; }
.h2h-player-badge { position: absolute; bottom: 1px; right: 1px; width: 22px; height: 22px; object-fit: contain; background: var(--nu-surface); border-radius: 50%; padding: 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); z-index: 2; }
.h2h-player-name { font-weight: 900; color: var(--nu-text); text-align: center; line-height: 1.2; }
.h2h-card-2 .h2h-player-name { font-size: 0.96rem; }
.h2h-card-3 .h2h-player-name { font-size: 0.78rem; }
.h2h-player-meta { font-size: 0.6rem; font-weight: 700; color: var(--nu-text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; text-align: center; }
.h2h-player-pts { font-weight: 900; color: var(--accent); line-height: 1; margin-top: 8px; }
.h2h-card-2 .h2h-player-pts { font-size: 1.8rem; }
.h2h-card-3 .h2h-player-pts { font-size: 1.3rem; }
.h2h-player-pts span { font-size: 0.6em; font-weight: 800; color: var(--nu-text-faint); margin-left: 3px; }
.h2h-player-sub { font-size: 0.58rem; font-weight: 700; color: var(--nu-text-faint); margin-top: 4px; text-align: center; }
.h2h-injury-badge { margin-left: 4px; }

/* Single-column list, one line per stat - a 2-3 column grid packed more stats into less height
   but broke the natural top-to-bottom scan (each stat's two values sat in different cells rather
   than on one line), which read as cluttered rather than clear. This keeps every stat's label,
   bars and both values on a single row, so density comes from tightening row height rather than
   splitting the reading flow into columns. */
.h2h-stats { display: flex; flex-direction: column; background: var(--nu-surface-2); border: 1px solid var(--nu-border); border-radius: 14px; padding: 2px 12px; }
.h2h-stat-row { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 0; border-bottom: 1px solid var(--nu-border); position: relative; }
.h2h-stat-row:last-child { border-bottom: none; }
.h2h-stat-label { flex: 0 0 78px; font-size: 0.58rem; font-weight: 800; color: var(--nu-text-muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2h-stat-players { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.h2h-bar-seg { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.h2h-bar-track { flex: 1; min-width: 0; height: 6px; border-radius: 4px; background: var(--nu-border); overflow: hidden; }
.h2h-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.h2h-bar-fill.is-winner { box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5); }
.h2h-bar-val { flex-shrink: 0; min-width: 28px; text-align: right; font-size: 0.64rem; font-weight: 800; color: var(--nu-text-muted); white-space: nowrap; }
.h2h-bar-val.is-winner { color: var(--nu-text); }
/* Per-row manual "remove this stat" - tucked past the right edge, only visible on hover so it
   doesn't visually compete with the stat itself; hidden outright during the Download Image
   capture (see downloadH2H) so it never ends up baked into a shared graphic. */
.h2h-stat-remove { position: absolute; right: -2px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--nu-text-faint); font-size: 0.62rem; font-weight: 800; cursor: pointer; padding: 4px 6px; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease; }
.h2h-stat-row:hover .h2h-stat-remove { opacity: 1; }
.h2h-stat-remove:hover { color: var(--nu-down); }
.h2h-restore-stats { display: block; margin: 8px auto 0 auto; background: none; border: none; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; cursor: pointer; text-decoration: underline; }

.h2h-footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--nu-border); }
.h2h-footer-logo { font-size: 0.76rem; font-weight: 900; color: var(--nu-accent); }
.h2h-footer-url { font-size: 0.66rem; font-weight: 700; color: var(--nu-text-faint); }

/* Left or Right tool - player picker (compact horizontal rows, not the big Compare Players tiles,
   since a side can hold up to 5 players) */
.lor-settings-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.lor-setting { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 800; color: var(--pl-purple-text); }
.lor-setting-hint { font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.lor-setting-input { border: 1.5px solid var(--border-color); border-radius: 20px; padding: 6px 12px; font-size: 0.75rem; font-weight: 800; color: var(--pl-purple-text); background: var(--bg-card); cursor: pointer; }
.lor-setting-input-sm { width: 70px; cursor: text; }
.lor-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 14px; }
.lor-side-title { font-weight: 900; font-size: 0.9rem; color: var(--pl-purple-text); margin-bottom: 8px; }
.lor-pick-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.lor-pick-slot { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 10px; padding: 8px 10px; position: relative; }
.lor-pick-slot-empty { border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--border-color)); box-shadow: none; background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); }
.lor-pick-slot-filled { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color)); }
.lor-pick-avatar-empty { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, white); color: var(--accent); font-size: 1.1rem; font-weight: 300; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.lor-pick-avatar-wrap { position: relative; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 22%, white), var(--bg-subtle)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, white); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.lor-pick-avatar { width: 100%; height: auto; position: relative; z-index: 1; }
.lor-pick-avatar-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.7rem; color: var(--accent); }
.lor-pick-badge { position: absolute; bottom: -2px; right: -2px; width: 15px; height: 15px; object-fit: contain; background: var(--bg-card); border-radius: 50%; padding: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); z-index: 2; }
.lor-pick-info { flex: 1; min-width: 0; }
.lor-pick-name { font-weight: 800; font-size: 0.78rem; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lor-pick-team { font-size: 0.64rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.lor-add-btn { display: block; width: 100%; background: none; border: 1.5px dashed var(--border-color); border-radius: 12px; padding: 7px 10px; font-size: 0.72rem; font-weight: 800; color: var(--text-muted); cursor: pointer; transition: 0.15s ease; }
.lor-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Left or Right - shareable card (light, styled after the FPL "confirm transfers" screen) */
.lor-card { position: relative; box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 22px; padding: 20px; box-shadow: 0 10px 40px rgba(15,23,42,0.14); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.lor-banner { background: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%); border-radius: 14px; padding: 14px 18px; text-align: center; margin-bottom: 16px; }
.lor-banner-title { font-size: 1.15rem; font-weight: 900; color: #1e1b4b; }
.lor-columns-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 4px; }
.lor-columns-label { font-size: 0.85rem; font-weight: 900; letter-spacing: 0.04em; }
.lor-swap-icon { font-size: 1.2rem; flex-shrink: 0; }
.lor-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.lor-row { display: flex; align-items: center; gap: 8px; background: var(--bg-subtle); border-radius: 12px; padding: 8px 10px; }
.lor-row-side { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.lor-row-side-empty { visibility: hidden; }
.lor-row-arrows { flex-shrink: 0; display: flex; align-items: center; gap: 2px; font-weight: 900; }
.lor-arrow-left { color: #0891b2; }
.lor-arrow-right { color: #e11d48; transform: scaleX(-1); }
.lor-row-avatar-wrap { position: relative; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb), 0.22), var(--bg-subtle)); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.lor-row-avatar { width: 100%; height: auto; position: relative; z-index: 1; }
.lor-row-avatar-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.66rem; color: var(--accent); }
.lor-row-badge { position: absolute; bottom: -2px; right: -2px; width: 15px; height: 15px; object-fit: contain; background: var(--bg-card); border-radius: 50%; padding: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); z-index: 2; }
.lor-row-info { min-width: 0; flex: 1; }
.lor-row-name { font-weight: 800; font-size: 0.78rem; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lor-row-team { font-size: 0.62rem; color: var(--text-muted); font-weight: 600; }
.lor-row-pts { flex-shrink: 0; font-weight: 900; font-size: 0.8rem; color: var(--accent); text-align: right; line-height: 1.1; }
.lor-row-pts span { display: block; font-size: 0.55em; font-weight: 700; color: var(--text-muted); }
.lor-summary { display: flex; align-items: center; gap: 10px; background: var(--bg-subtle); border-radius: 14px; padding: 14px; }
.lor-summary-side { flex: 1; text-align: center; border-radius: 10px; padding: 6px 4px; }
.lor-summary-side.is-winner { background: rgba(var(--accent-rgb), 0.12); box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb), 0.4); }
.lor-summary-label { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.lor-summary-value { font-size: 1.5rem; font-weight: 900; color: var(--accent); line-height: 1.15; }
.lor-summary-value span { font-size: 0.5em; font-weight: 800; color: var(--text-muted); margin-left: 2px; }
.lor-summary-sub { font-size: 0.6rem; font-weight: 700; color: var(--text-muted); }
.lor-summary-mid { flex-shrink: 0; text-align: center; padding: 0 6px; }
.lor-summary-verdict { font-size: 0.78rem; font-weight: 900; color: var(--pl-purple-text); white-space: nowrap; }
.lor-summary-caption { font-size: 0.58rem; font-weight: 700; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }
.lor-footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-color); }

/* Stat Leaderboards (reports/pages/leaderboards_page.py) */
.lb-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(15,23,42,0.05); }
.lb-control-group { display: flex; flex-direction: column; gap: 5px; }
.lb-control-group label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.lb-control-group select, .lb-control-group input[type="text"] { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 0.8rem; font-weight: 700; color: var(--text-dark); background: var(--bg-card); outline: none; }
.lb-min-minutes-input { width: 68px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 0.8rem; font-weight: 700; color: var(--text-dark); background: var(--bg-card); outline: none; }
.lb-pos-pills { display: flex; gap: 4px; }
.lb-pos-pill { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-muted); font-size: 0.76rem; font-weight: 800; cursor: pointer; }
.lb-pos-pill:hover { border-color: var(--pl-purple-text); color: var(--pl-purple-text); }
.lb-pos-pill.active { background: var(--pl-purple); border-color: var(--pl-purple-text); color: white; }
.lb-control-checkbox { justify-content: center; padding-bottom: 6px; }
.lb-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; color: var(--text-dark); cursor: pointer; white-space: nowrap; }
.lb-checkbox-label input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--pl-purple-text); }

.lb-card { position: relative; box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 22px; padding: 22px; box-shadow: 0 10px 40px rgba(15,23,42,0.14); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.lb-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #2b0230 0%, #4a0e5c 48%, #5b21b6 100%); border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 8px 22px rgba(43,2,48,0.32); }
.lb-banner::after { content: ''; position: absolute; top: -55%; right: -8%; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(0,255,135,0.22), transparent 72%); pointer-events: none; }
.lb-banner-icon { position: relative; z-index: 1; flex-shrink: 0; width: 50px; height: 50px; font-size: 1.7rem; line-height: 1; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.lb-banner-text { position: relative; z-index: 1; min-width: 0; }
.lb-banner-title { font-size: 1.12rem; font-weight: 900; color: white; letter-spacing: 0.03em; line-height: 1.2; text-transform: uppercase; }
.lb-banner-sub { font-size: 0.7rem; font-weight: 800; color: #5eead4; margin-top: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
.lb-rows { display: flex; flex-direction: column; gap: 7px; }
.lb-row { display: flex; align-items: center; gap: 10px; background: var(--bg-subtle); border-radius: 12px; padding: 8px 12px; }
.lb-rank { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-subtle); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 900; }
.lb-rank-gold { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; box-shadow: 0 0 0 2px rgba(245,158,11,0.35); }
.lb-rank-silver { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; box-shadow: 0 0 0 2px rgba(148,163,184,0.35); }
.lb-rank-bronze { background: linear-gradient(135deg, #fdba74, #c2703d); color: #431407; box-shadow: 0 0 0 2px rgba(194,112,61,0.35); }
.lb-row-avatar-wrap { position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 50% 30%, rgba(56,0,60,0.12), var(--bg-subtle)); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.lb-row-avatar { width: 100%; height: auto; position: relative; z-index: 1; }
.lb-row-badge { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; object-fit: contain; background: var(--bg-card); border-radius: 50%; padding: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); z-index: 2; }
.lb-row-info { min-width: 0; flex: 1; }
.lb-row-name { font-weight: 800; font-size: 0.82rem; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row-team { font-size: 0.62rem; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; }
.lb-row-bar-track { height: 4px; background: var(--bg-subtle); border-radius: 3px; overflow: hidden; }
.lb-row-bar-fill { height: 100%; background: linear-gradient(90deg, #38003c, #00ff87); border-radius: 3px; }
.lb-row-val { flex-shrink: 0; font-weight: 900; font-size: 1rem; color: var(--pl-purple-text); text-align: right; min-width: 52px; }
.lb-footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.lb-pos-pills.lb-disabled { opacity: 0.4; pointer-events: none; }

/* Multi-column leaderboard layout (3 or 4 positions side by side in one graphic) */
.lb-card-wide { max-width: 820px; }
.lb-cols { display: grid; gap: 10px; align-items: start; }
.lb-cols-1 { grid-template-columns: repeat(1, 1fr); max-width: 280px; margin: 0 auto; }
.lb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.lb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.lb-cols-4 { grid-template-columns: repeat(4, 1fr); }
.lb-col { background: var(--bg-subtle); border-radius: 12px; padding: 10px 8px; min-width: 0; }
.lb-col-header { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.04em; color: var(--pl-purple-text); text-align: center; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid rgba(56,0,60,0.12); }
.lb-col-rows { display: flex; flex-direction: column; gap: 5px; }
.lb-col-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.lb-col-badge { width: 15px; height: 15px; object-fit: contain; flex-shrink: 0; }
.lb-col-name { flex: 1; min-width: 0; font-size: 0.68rem; font-weight: 800; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-col-val { flex-shrink: 0; font-size: 0.7rem; font-weight: 900; color: var(--pl-purple-text); }
.lb-col-empty { font-size: 0.64rem; font-weight: 700; color: var(--text-muted); text-align: center; padding: 10px 4px; }
.lb-rank-sm { width: 18px; height: 18px; font-size: 0.6rem; flex-shrink: 0; }

/* Price Watch tool (reports/pages/price_watch_page.py) - a plain shareable card (deliberately no
   .lb-banner gradient banner, that's the right amount of branding for the stat leaderboards but
   too loud here) using the exact .pw-row/.pw-bar/.pw-label markup from the My Team sidebar's
   Price watch widget (see my_team_page.py) for visual consistency with that card, everything
   below is scoped under .pwt-board so it can't leak into that widget's own styling. */
.pwt-board { max-width: 100%; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 18px; padding: 18px 20px 14px; box-shadow: 0 10px 40px rgba(15,23,42,0.14); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }
.pwt-topline { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.pwt-topline-icon { font-size: 1.15rem; }
.pwt-topline-title { font-size: 1.02rem; font-weight: 900; color: var(--pl-purple-text); }
.pwt-topline-gw { margin-left: auto; font-size: 0.66rem; font-weight: 800; color: var(--text-muted); background: var(--bg-subtle); padding: 2px 9px; border-radius: 8px; }

.pwt-section-title { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); margin: 2px 0 6px; }
.pwt-section-title:first-of-type { margin-top: 0; }
.pwt-count { font-weight: 700; opacity: 0.65; }
.pwt-empty { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); padding: 2px 2px 8px; }

/* Rows: avatar, a capped-width name/team block, then a bar that actually gets to grow and fill
   most of the row (.pwt-bar-wrap - the point of this whole layout), then a small fixed label/pct
   block at the end. Sized down as far as still-legible so the row stays genuinely short. */
/* Each category scrolls on its own past ~9 rows rather than silently truncating at a fixed count -
   "Risen/fallen this week" in particular is a complete list of real events, not a top-N ranking.
   .pwt-capture (toggled only for the download-image capture, see downloadPwtCard) reverts to full
   height so the shared PNG still shows everyone, not just what's scrolled into view. */
.pwt-board .pw-list { max-height: 290px; overflow-y: auto; scrollbar-width: thin; margin-top: 0; }
/* Capture-mode also splits every section into 2 columns - once the 10-per-category cap was
   lifted, a genuinely busy category (uncapped "Risen/fallen this week" especially) made the
   downloaded image absurdly tall to actually post anywhere. Halves the height for roughly the
   same width; the row layout itself (avatar/name/bar/metrics) was already compact enough to sit
   comfortably at half its old width. */
.pwt-board.pwt-capture .pw-list { max-height: none; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.pwt-board.pwt-capture .pw-row { margin-bottom: 0; }
/* The shared image is public, postable content (tonight's risers/fallers) - not a dump of your
   own squad, watchlist, or every marginal "close to changing" name. These sections stay on the
   page (still scrollable/filterable there) but drop out of the download entirely. */
.pwt-board.pwt-capture .pwt-hide-capture { display: none; }
.pwt-planned { font-size: 0.55rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; border-radius: 5px; padding: 1px 5px; margin-left: 5px; white-space: nowrap; }
.pwt-planned-out { background: rgba(220,38,38,0.12); color: #dc2626; }
.pwt-planned-in { background: rgba(16,185,129,0.14); color: #059669; }
.pwt-board .pw-row { display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 8px; background: var(--bg-subtle); margin-bottom: 3px; border: 1.5px solid transparent; box-sizing: border-box; min-height: 30px; }
.pwt-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: top; flex-shrink: 0; background: var(--bg-card); box-sizing: border-box; }
.pwt-avatar.pwt-avatar-fallback { object-fit: contain; padding: 3px; }
.pwt-name-block { flex: 0 1 130px; min-width: 0; }
.pwt-name { font-size: 0.72rem; font-weight: 800; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.pwt-sub { font-size: 0.52rem; font-weight: 700; color: var(--text-muted); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
/* The bar wrapper is the one flex-growing element in the row - it's what makes the bar "go
   through most of the line" instead of being boxed into a small corner. The .pw-bar inside it is
   deliberately NOT a flex item of its own (see pwtBarHtml's comment in price_watch_page.py) -
   plain block + width:100% of an already-sized parent is what actually survives html2canvas. */
.pwt-bar-wrap { flex: 1 1 120px; min-width: 50px; }
.pwt-bar-wrap .pw-bar { display: block; width: 100%; height: 4px; }
.pwt-metrics { flex: 0 0 96px; text-align: right; }
/* font-size:0 on these two wrapper divs kills the invisible line-box "strut" they'd otherwise
   inherit from the page's own (much larger) base font-size/line-height - without it, the block
   reserves height for that inherited strut regardless of how small the .pw-label/.pw-pct span
   inside actually is, which is why the row wasn't shrinking no matter how far the row/font
   sizes above got cut. The spans set their own explicit font-size so they're unaffected. */
.pwt-metrics-top, .pwt-metrics-bot { font-size: 0; line-height: 1; }
.pwt-board .pw-label { font-size: 0.63rem; }
.pwt-metrics-bot { margin-top: 3px; }
.pwt-board .pw-pct { font-size: 0.56rem; }
.pwt-board .pw-x { margin-left: 2px; }

/* "My team" marking: a real `border` (not box-shadow) - html2canvas, the library behind Download
   Image, renders inset box-shadows wildly oversized, a real border round-trips through the canvas
   export correctly. Starter is solid, bench is dashed and a touch lighter so the two read apart
   without needing a text label. Both get an explicit dark-mode pass since the light-mode colors
   (dark ink at low opacity) all but disappear once the card background itself goes dark. */
.pwt-board .pw-row.pwt-mine-starter { background: rgba(91,33,182,0.08); border-color: #7c3aed; }
.pwt-board .pw-row.pwt-mine-bench { background: rgba(100,116,139,0.07); border-style: dashed; border-color: #64748b; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pwt-board .pw-row.pwt-mine-starter { background: rgba(196,181,253,0.12); border-color: #c4b5fd; }
    :root:not([data-theme="light"]) .pwt-board .pw-row.pwt-mine-bench { background: rgba(203,213,225,0.1); border-color: #cbd5e1; }
    :root:not([data-theme="light"]) .pwt-board .pw-bar b { background: rgba(255,255,255,0.85); }
}
:root[data-theme="dark"] .pwt-board .pw-row.pwt-mine-starter { background: rgba(196,181,253,0.12); border-color: #c4b5fd; }
:root[data-theme="dark"] .pwt-board .pw-row.pwt-mine-bench { background: rgba(203,213,225,0.1); border-color: #cbd5e1; }
:root[data-theme="dark"] .pwt-board .pw-bar b { background: rgba(255,255,255,0.85); }

.pwt-watching-block { max-width: 640px; margin: 0 auto; }
.pwt-watching-block .pw-list { max-height: none; overflow: visible; }
.pwt-watching-block .pw-row { background: var(--bg-subtle); }

/* Captain Picker (reports/pages/captain_picker_page.py) - a plain ranked table, deliberately no
   colored section banners anywhere (not even per-stat headers) so a screenshot reads as data. */
.cap-board { max-width: 100%; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 18px; padding: 18px 20px 14px; box-shadow: 0 10px 40px rgba(15,23,42,0.14); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }
.cap-topline { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cap-topline-icon { font-size: 1.15rem; }
.cap-topline-title { font-size: 1.02rem; font-weight: 900; color: var(--pl-purple-text); }
.cap-topline-gw { font-size: 0.66rem; font-weight: 800; color: var(--text-muted); background: var(--bg-subtle); padding: 2px 9px; border-radius: 8px; }
/* The one global tune toggle (not per-row) - opens/closes every row's tune strip at once. */
.cap-tune-toggle { margin-left: auto; font-size: 0.66rem; font-weight: 800; color: var(--pl-purple-text); background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 8px; padding: 5px 11px; cursor: pointer; }
.cap-tune-toggle:hover { border-color: var(--pl-purple-text); }

/* Plain text column labels, no background fill - just enough to align with the row grid below. */
.cap-header-row { display: flex; align-items: center; gap: 8px; padding: 0 9px 5px; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-color); margin-bottom: 6px; }
.cap-header-name { flex: 1 1 auto; padding-left: 46px; }
.cap-header-fdr { flex: 0 0 60px; text-align: center; }
.cap-header-pts { flex: 0 0 54px; text-align: center; }
.cap-header-const { flex: 0 0 150px; text-align: right; }
.cap-header-spacer { flex: 0 0 16px; }

.cap-rows { display: flex; flex-direction: column; }
.cap-row-wrap { margin-bottom: 3px; }
/* Extra room + a unifying border around the row+tune pair once it's open, so it reads as one
   grouped block instead of the tune strip looking loose against its neighbours. Closed rows are
   untouched by this (no border, tight spacing) - only kicks in when there's something to group. */
.cap-row-wrap.has-tune-open { margin-bottom: 10px; padding: 5px; border: 1px solid var(--border-color); border-radius: 10px; }
.cap-row-wrap.has-tune-open .cap-row { background: transparent; padding: 4px; }
.cap-row { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 8px; background: var(--bg-subtle); min-height: 34px; box-sizing: border-box; }
.cap-pin-btn { flex: 0 0 16px; background: none; border: none; padding: 0; font-size: 0.9rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.cap-pin-btn.is-pinned { color: #f59e0b; }
.cap-row-tune-btn { flex: 0 0 16px; background: none; border: none; padding: 0; font-size: 0.72rem; line-height: 1; opacity: 0.45; cursor: pointer; }
.cap-row-tune-btn:hover, .cap-row-tune-btn.is-open { opacity: 1; }
.cap-avatar { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--bg-card); box-sizing: border-box; }
.cap-avatar.cap-avatar-fallback { object-fit: contain; padding: 3px; }
.cap-name-block { flex: 1 1 auto; min-width: 0; }
.cap-name { font-size: 0.76rem; font-weight: 800; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.cap-sub { font-size: 0.55rem; font-weight: 700; color: var(--text-muted); line-height: 1.15; margin-top: 2px; }
.cap-fdr-chip { flex: 0 0 60px; text-align: center; font-size: 0.62rem; font-weight: 800; color: #fff; border-radius: 6px; padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-fdr-chip.cap-fdr-blank { background: #cbd5e1; color: #334155; }
.cap-pts { flex: 0 0 54px; text-align: center; font-size: 0.92rem; font-weight: 900; color: var(--pl-purple-text); position: relative; }
.cap-tweaked-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pl-purple-text); margin-left: 3px; vertical-align: middle; }
.cap-const-stats { flex: 0 0 150px; display: flex; justify-content: flex-end; gap: 10px; }
.cap-const-stat { display: flex; flex-direction: column; align-items: center; min-width: 34px; }
.cap-const-stat span { font-size: 0.68rem; font-weight: 800; color: var(--text-dark); }
.cap-const-stat label { font-size: 0.5rem; font-weight: 700; color: var(--text-muted); margin-top: 1px; }
.cap-exclude-btn { flex: 0 0 16px; background: none; border: none; padding: 0; font-size: 0.68rem; line-height: 1; color: var(--text-muted); opacity: 0.4; cursor: pointer; }
.cap-exclude-btn:hover { opacity: 1; color: var(--nu-down, #dc2626); }

/* The tunable strip - a visibly different (but calmer, solid-bordered rather than dashed) surface
   from the constant-stat row above it. A CSS grid with a FIXED column per field, always all 5,
   rather than flexing to however many a given player has - so Finishing/Creativity/Defense/Pen
   share/Minutes sit at the same x-position on every row; a position that doesn't apply (Defense
   for a FWD) is left as a genuinely empty cell rather than reflowing the rest leftward. */
.cap-tune-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px 10px; align-items: start; margin-top: 3px; padding: 6px 11px; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 8px; }
@media (max-width: 700px) {
    .cap-tune-row { grid-template-columns: repeat(2, 1fr); }
}
.cap-tune-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cap-tune-label { font-size: 0.55rem; font-weight: 800; color: var(--text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em; }
.cap-tune-control { display: flex; align-items: center; gap: 6px; }
/* Fully reset the native control so the thumb can actually be sized/colored - accent-color alone
   still leaves a large native thumb in most browsers. Sized up a bit from the first pass (9px)
   for a cleaner, more deliberate look rather than a near-invisible speck. */
.cap-tune-slider { flex: 1 1 auto; min-width: 0; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: var(--border-color); outline: none; cursor: pointer; }
.cap-tune-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--pl-purple-text); border: 2px solid var(--bg-card); box-shadow: 0 1px 3px rgba(15,23,42,0.3); cursor: pointer; }
.cap-tune-slider::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--pl-purple-text); border: 2px solid var(--bg-card); box-shadow: 0 1px 3px rgba(15,23,42,0.3); cursor: pointer; }
.cap-tune-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border-color); }
.cap-tune-val { flex: 0 0 30px; font-size: 0.56rem; font-weight: 800; color: var(--text-dark); text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.cap-fdr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cap-tune-reset { grid-column: 1 / -1; justify-self: end; margin-top: 2px; font-size: 0.54rem; font-weight: 800; color: var(--text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; }
.cap-tune-reset:hover { color: var(--nu-down, #dc2626); }

@media (max-width: 640px) {
    .lb-controls { gap: 10px; padding: 12px; }
    .lb-card { padding: 16px; border-radius: 16px; }
    .lb-banner { padding: 12px 14px; gap: 10px; }
    .lb-banner-icon { font-size: 1.7rem; }
    .lb-banner-title { font-size: 0.92rem; }
    .lb-banner-sub { font-size: 0.62rem; }
    .lb-row { padding: 6px 8px; gap: 7px; }
    .lb-row-avatar-wrap { width: 32px; height: 32px; }
    .lb-row-name { font-size: 0.7rem; }
    .lb-row-val { font-size: 0.82rem; min-width: 40px; }
    .lb-cols-3, .lb-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .lb-col-name { font-size: 0.6rem; }
    .lb-col-val { font-size: 0.62rem; }
}

/* ===== GW Spotlight (Top xPts / One-Week Punts) - reuses .lb-card/.lb-cols/.lb-rank chrome from
   Stat Leaderboards (proven to render + html2canvas-export cleanly) but with its own banner
   theming and fixture-aware rows, so it doesn't look like a reskinned Leaderboards card. ===== */
.spot-mode-toggle { display: inline-flex; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 30px; padding: 4px; gap: 4px; margin-bottom: 14px; }
.spot-mode-toggle button { border: none; background: none; padding: 9px 18px; border-radius: 24px; font-size: 0.8rem; font-weight: 800; color: var(--text-muted); cursor: pointer; transition: 0.15s ease; }
.spot-mode-toggle button.active { background: var(--pl-purple); color: white; box-shadow: 0 3px 10px rgba(56,0,60,0.28); }

.spot-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 8px 22px rgba(15,23,42,0.22); }
.spot-banner::after { content: ''; position: absolute; top: -55%; right: -8%; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 72%); pointer-events: none; }
.spot-banner-fire { background: linear-gradient(135deg, #7c2d12 0%, #c2410c 48%, #f97316 100%); }
.spot-banner-gem { background: linear-gradient(135deg, #064e3b 0%, #0f766e 48%, #14b8a6 100%); }
.spot-banner-gw { position: relative; z-index: 1; flex-shrink: 0; margin-left: auto; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; padding: 6px 12px; font-size: 0.95rem; font-weight: 900; color: white; letter-spacing: 0.02em; }

.spot-row { display: flex; align-items: center; gap: 10px; background: var(--bg-subtle); border-radius: 12px; padding: 8px 12px; }
.spot-fdr-chip { flex-shrink: 0; color: white; font-weight: 800; font-size: 0.66rem; border-radius: 7px; padding: 5px 8px; text-align: center; min-width: 48px; letter-spacing: 0.01em; }
.spot-fdr-blank { background: #94a3b8; font-style: italic; }
.spot-row-val-unit { display: block; font-size: 0.56rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 1px; }

.spot-punt-col { background: linear-gradient(180deg, #f0fdfa, var(--bg-subtle)); border: 1px solid #ccfbf1; }
.spot-punt-row { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 0; }
.spot-punt-info { flex: 1; min-width: 0; }
.spot-punt-owned { font-size: 0.58rem; font-weight: 700; color: #0f766e; }

@media (max-width: 640px) {
    .spot-mode-toggle button { padding: 7px 13px; font-size: 0.72rem; }
    .spot-banner-gw { font-size: 0.76rem; padding: 5px 9px; }
    .spot-row { padding: 6px 8px; gap: 7px; }
    .spot-fdr-chip { font-size: 0.56rem; min-width: 38px; padding: 4px 5px; }
}

/* ===== Team Fixture Outlook ===== */
.outlook-card { max-width: 900px; }
.outlook-banner { background: linear-gradient(135deg, #1e1b4b 0%, #38003c 55%, #5b21b6 100%); }
.outlook-banner-badge { position: relative; z-index: 1; flex-shrink: 0; width: 50px; height: 50px; object-fit: contain; background: rgba(255,255,255,0.12); border-radius: 13px; padding: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.outlook-players { display: flex; flex-direction: column; gap: 12px; }
.outlook-player-card { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 14px; padding: 12px; }
.outlook-player-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.outlook-player-info { min-width: 0; flex: 1; }
.outlook-player-name { font-weight: 900; font-size: 0.92rem; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outlook-player-meta { font-size: 0.66rem; color: var(--text-muted); font-weight: 700; margin-top: 2px; }
.outlook-player-total { flex-shrink: 0; text-align: right; background: linear-gradient(135deg, #38003c, #5b21b6); border-radius: 10px; padding: 6px 12px; }
.outlook-player-total-val { font-size: 1.05rem; font-weight: 900; color: white; line-height: 1; }
.outlook-player-total-label { font-size: 0.56rem; font-weight: 800; color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.outlook-fdr-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.outlook-fdr-block { color: white; border-radius: 10px; padding: 8px 6px; text-align: center; box-shadow: 0 2px 6px rgba(15,23,42,0.12); }
.outlook-fdr-blank { background: #94a3b8; }
.outlook-fdr-gw { font-size: 0.6rem; font-weight: 800; opacity: 0.85; letter-spacing: 0.02em; }
.outlook-fdr-opp { font-size: 0.76rem; font-weight: 900; margin: 3px 0; white-space: nowrap; }
.outlook-fdr-pts { font-size: 0.62rem; font-weight: 700; opacity: 0.92; }

@media (max-width: 640px) {
    .outlook-banner-badge { width: 40px; height: 40px; }
    .outlook-player-name { font-size: 0.8rem; }
    .outlook-player-total-val { font-size: 0.9rem; }
    .outlook-fdr-strip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
    .outlook-fdr-opp { font-size: 0.68rem; }
    .outlook-fdr-pts { font-size: 0.56rem; }
}

@media (max-width: 640px) {
    .cmp-slots-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .cmp-slot { min-height: 140px; }
    .cmp-slot-photo-wrap { width: 52px; height: 52px; }
    .h2h-card { padding: 18px 14px 16px 14px; border-radius: 16px; }
    .h2h-card-2 .h2h-player-photo-wrap { width: 88px; height: 88px; }
    .h2h-card-3 .h2h-player-photo-wrap { width: 62px; height: 62px; }
    .h2h-card-2 .h2h-player-pts { font-size: 1.5rem; }
    .h2h-card-3 .h2h-player-pts { font-size: 1.1rem; }
    .h2h-card-2 .h2h-player-name { font-size: 0.86rem; }
    .h2h-card-3 .h2h-player-name { font-size: 0.68rem; }
    .h2h-player-meta { font-size: 0.56rem; }
    .h2h-vs { font-size: 0.8rem; }
    .h2h-stats { padding: 2px 10px; }
    .h2h-stat-label { flex-basis: 56px; font-size: 0.54rem; }
    .h2h-stat-players { gap: 8px; }
    .h2h-bar-seg { gap: 4px; }
    .h2h-bar-val { min-width: 24px; font-size: 0.6rem; }
    .h2h-toolbar { flex-wrap: wrap; }
    .lor-sides { grid-template-columns: 1fr; gap: 10px; }
    .lor-card { padding: 14px; border-radius: 16px; }
    .lor-banner-title { font-size: 0.92rem; }
    .lor-row { flex-wrap: nowrap; gap: 4px; padding: 6px; }
    .lor-row-avatar-wrap { width: 28px; height: 28px; }
    .lor-row-name { font-size: 0.62rem; white-space: normal; line-height: 1.15; }
    .lor-row-team { font-size: 0.52rem; }
    .lor-row-pts { font-size: 0.64rem; }
    .lor-row-arrows { gap: 0; }
    .lor-arrow-left, .lor-arrow-right { font-size: 0.8rem; }
    .lor-summary { flex-wrap: wrap; padding: 10px; }
    .lor-summary-value { font-size: 1.15rem; }
    .lor-summary-mid { order: -1; flex: 0 0 100%; padding-bottom: 6px; }
}

/* ===================================================================
   LANDING PAGE (nu-*) + the shared "assumption lab" component (alab-*,
   reused in the player card and Model Workshop). Light/flat system on
   the --nu-* tokens; see :root. Compact scale - matches the concept
   mockup: small type, tight cards, the live demo one screen high.
   =================================================================== */
body.nu-body { background: var(--nu-bg); color: var(--nu-text); }
.nu-wrap { max-width: 940px; margin: 0 auto; padding: 0 22px; }

.nu-topbar { border-bottom: 1px solid var(--nu-border); background: var(--nu-surface); }
.nu-topbar-inner { max-width: 940px; margin: 0 auto; padding: 11px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nu-topbar img { height: 19px; display: block; }
.nu-topbar-nav { display: flex; align-items: center; gap: 8px; }
.nu-topbar-nav a { font-size: 0.8rem; font-weight: 600; color: var(--nu-text-muted); text-decoration: none; padding: 7px 9px; border-radius: var(--nu-radius); }
.nu-topbar-nav a:hover { color: var(--nu-text); }

.nu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 0.82rem; padding: 9px 15px; border-radius: var(--nu-radius); text-decoration: none; border: 1px solid transparent; transition: 0.15s ease; white-space: nowrap; cursor: pointer; }
.nu-btn svg { width: 14px; height: 14px; }
.nu-btn-primary { background: var(--nu-accent); color: #fff; }
.nu-btn-primary:hover { background: var(--nu-accent-hover); }
.nu-btn-ghost { background: var(--nu-surface); color: var(--nu-text); border-color: var(--nu-border-strong); }
.nu-btn-ghost:hover { border-color: var(--nu-text-muted); }
.nu-btn-sm { padding: 7px 12px; font-size: 0.78rem; }

/* hero - centred and compact, so the demo strip below sits within one screen */
/* Soft multi-colour wash behind the hero only - the rest of the page stays the flat warm-neutral
   "nu" background; this is deliberately the one spot with more colour, not a site-wide change. */
.nu-hero {
    padding: 30px 0 22px; text-align: center;
    background:
        radial-gradient(480px 220px at 18% 0%, rgba(37,99,235,0.10), transparent 70%),
        radial-gradient(480px 220px at 82% 10%, rgba(5,150,105,0.09), transparent 70%),
        radial-gradient(600px 260px at 50% 100%, rgba(56,0,60,0.07), transparent 70%);
    margin: 0 -22px; padding-left: 22px; padding-right: 22px; border-radius: 0 0 20px 20px;
}
.nu-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nu-accent); }
.nu-h1 { font-size: 1.9rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--nu-text); margin: 10px 0 0; }
.nu-lede { font-size: 0.92rem; line-height: 1.55; color: var(--nu-text-muted); margin: 12px auto 0; max-width: 40em; }
.nu-cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 18px; }
.nu-teamform { display: flex; gap: 6px; }
.nu-teamform-input { width: 130px; height: 38px; padding: 0 11px; border: 1px solid var(--nu-border-strong); border-radius: var(--nu-radius); font-size: 0.85rem; font-family: inherit; background: var(--nu-surface); color: var(--nu-text); }
.nu-teamform-input:focus { outline: none; border-color: var(--nu-accent); box-shadow: 0 0 0 3px var(--nu-accent-soft); }
.nu-teamresult { min-height: 1.2em; margin-top: 12px; font-size: 0.82rem; line-height: 1.5; color: var(--nu-text-muted); }
.nu-teamresult.err { color: var(--nu-down); }
.nu-teamresult.ok { color: var(--nu-text); }
.nu-teamresult a { color: var(--nu-accent); font-weight: 600; white-space: nowrap; }

/* "It's free" - the one loud green note on the page. */
.nu-free { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 12px;
    font-size: 0.8rem; font-weight: 700; color: #15803d; background: #dcfce7;
    border: 1px solid #bbf7d0; border-radius: 20px; }
.nu-free svg { width: 13px; height: 13px; }
.nu-free-inline { color: #15803d; font-weight: 800; }
/* de-emphasised secondary path, so the FPL-team-ID field is clearly the ask */
.nu-cta-alt { display: block; margin-top: 10px; font-size: 0.8rem; color: var(--nu-text-muted);
    text-decoration: underline; text-underline-offset: 2px; }
.nu-cta-alt:hover { color: var(--nu-text); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nu-free { color: #4ade80; background: rgba(21,128,61,0.16); border-color: rgba(74,222,128,0.28); }
    :root:not([data-theme="light"]) .nu-free-inline { color: #4ade80; }
}
:root[data-theme="dark"] .nu-free { color: #4ade80; background: rgba(21,128,61,0.16); border-color: rgba(74,222,128,0.28); }
:root[data-theme="dark"] .nu-free-inline { color: #4ade80; }

/* Chip-window strip under the hero - timely, removable after the deadline. */
.nu-chipstrip { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 16px; font-size: 0.8rem; color: var(--nu-text-muted); }
.nu-chipstrip strong { color: var(--nu-text); font-weight: 700; }

/* hairline between each phase of the page (hero / demo / why / features / footer) */
.nu-wrap > section + section { border-top: 1px solid var(--nu-border); }

.nu-section { padding: 26px 0 4px; }
.nu-section-label { text-align: center; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nu-text-faint); margin-bottom: 14px; }
#assumption-lab { padding-top: 22px; }

.nu-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nu-why-card { background: var(--nu-surface); border: 1px solid var(--nu-border); border-radius: var(--nu-radius); padding: 12px 13px; }
.nu-why-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.nu-why-ic { width: 24px; height: 24px; border-radius: 6px; background: var(--nu-accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nu-why-ic svg { width: 14px; height: 14px; stroke: var(--nu-accent); fill: none; }
.nu-why-name { font-weight: 700; font-size: 0.86rem; color: var(--nu-text); }
.nu-why-desc { font-size: 0.78rem; line-height: 1.45; color: var(--nu-text-muted); }

.nu-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nu-feature-head { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nu-accent); margin-bottom: 8px; }
.nu-feature-item { display: flex; gap: 7px; align-items: flex-start; font-size: 0.82rem; line-height: 1.45; color: var(--nu-text-muted); padding: 3px 0; }
.nu-feature-item svg { width: 14px; height: 14px; stroke: var(--nu-accent); flex-shrink: 0; margin-top: 3px; }

.nu-foot { text-align: center; padding: 44px 0 20px; }
.nu-foot h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: var(--nu-text); margin: 0 0 6px; }
.nu-foot p { color: var(--nu-text-muted); font-size: 0.86rem; margin: 0 0 16px; }

/* ---- assumption lab (shared component: sliders | live projection board) ---- */
.alab { background: var(--nu-surface); border: 1px solid var(--nu-border); border-radius: var(--nu-radius-lg); box-shadow: var(--nu-shadow); overflow: hidden; }
.alab-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.alab.alab-narrow .alab-body { grid-template-columns: 1fr; }
.alab-controls { padding: 15px 16px; display: flex; flex-direction: column; gap: 13px; min-height: 168px; }
.alab-loading { flex: 1; display: flex; align-items: center; justify-content: center; }
.alab-slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.alab-slider-label { font-size: 0.74rem; font-weight: 600; color: var(--nu-text); }
.alab-slider-val { font-size: 0.78rem; font-weight: 700; color: var(--nu-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.alab-slider-default { font-size: 0.62rem; color: var(--nu-text-faint); margin-top: 4px; }

.alab-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; margin: 8px 0 0; cursor: pointer;
    background: linear-gradient(to right, var(--nu-accent) 0%, var(--nu-accent) var(--fill, 50%), var(--nu-border-strong) var(--fill, 50%), var(--nu-border-strong) 100%); }
.alab-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--nu-accent); border: 2px solid var(--nu-surface); box-shadow: 0 0 0 1px var(--nu-border-strong); cursor: pointer; }
.alab-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--nu-accent); border: 2px solid var(--nu-surface); cursor: pointer; }
.alab-range:focus-visible { outline: 2px solid var(--nu-accent); outline-offset: 3px; }

.alab-results { padding: 15px 16px; background: var(--nu-surface-2); border-left: 1px solid var(--nu-border); display: flex; flex-direction: column; }
.alab.alab-narrow .alab-results { border-left: none; border-top: 1px solid var(--nu-border); }
.alab-results-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nu-text-faint); margin-bottom: 6px; }
.alab-board { display: flex; flex-direction: column; }
.alab-row { display: flex; align-items: center; gap: 8px; padding: 6px 1px; border-bottom: 1px solid var(--nu-border); }
.alab-row:last-child { border-bottom: none; }
.alab-row-badge { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.alab-row-name { font-size: 0.82rem; font-weight: 600; color: var(--nu-text); flex: 1; }
.alab-row-pts { font-size: 0.86rem; font-weight: 700; color: var(--nu-text); font-variant-numeric: tabular-nums; }
.alab-delta { font-size: 0.64rem; font-weight: 700; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; color: var(--nu-text-faint); }
.alab-delta.up { color: var(--nu-up); }
.alab-delta.down { color: var(--nu-down); }
.alab-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.alab-foot-hint { font-size: 0.64rem; color: var(--nu-text-faint); text-align: center; }

/* alab wrapper for a single slider row (shared by landing + player card) */
.alab-slider { display: block; }
.alab-slider-reset { background: none; border: none; color: var(--nu-text-faint); cursor: pointer; font-size: 0.8rem; padding: 0 2px; line-height: 1; }
.alab-slider-reset:hover { color: var(--nu-accent); }

/* ---- player card: Stats / Model Workshop mode switch ---- */
.pcard-modes { display: flex; gap: 5px; margin: 12px 0 12px; }
.pcard-mode-btn { flex: 1; background: var(--nu-surface-2); color: var(--nu-text-muted); border: 1px solid var(--nu-border); border-radius: var(--nu-radius); padding: 8px 6px; font-size: 0.74rem; font-weight: 700; cursor: pointer; transition: 0.15s ease; font-family: inherit; }
.pcard-mode-btn:hover { color: var(--nu-text); }
.pcard-mode-btn.is-active { background: var(--nu-accent); color: #fff; border-color: var(--nu-accent); }

/* ---- player-card Model Workshop lab (plab-*) ---- */
.plab { margin: 2px 0 0; }
.plab .alab-controls { min-height: 0; }
.plab-subhead { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nu-accent); padding-bottom: 5px; border-bottom: 1px solid var(--nu-border); margin: 2px 0 4px; }
.alab-slider + .plab-subhead { margin-top: 12px; }
.plab-proj { display: flex; flex-direction: column; }
.plab-proj-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 1px; border-bottom: 1px solid var(--nu-border); font-size: 0.78rem; }
.plab-proj-row:last-child { border-bottom: none; }
.plab-proj-gw { font-weight: 700; color: var(--nu-text-faint); font-size: 0.66rem; min-width: 34px; }
.plab-proj-opp { color: var(--nu-text-muted); flex: 1; font-size: 0.7rem; }
.plab-proj-pts { font-weight: 700; color: var(--nu-text); font-variant-numeric: tabular-nums; }
.plab-proj-delta { font-size: 0.64rem; font-weight: 700; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.plab-proj-delta.up { color: var(--nu-up); }
.plab-proj-delta.down { color: var(--nu-down); }
.plab-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 10px; }

/* ---- team card model lab (tlab-* / fdr-pick) ---- */
.tlab-board .plab-proj-row { gap: 8px; }
.tlab-board .plab-proj-gw { min-width: 30px; }
.tlab-board .plab-proj-opp { font-weight: 600; color: var(--nu-text); }
.tlab-fdr { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--nu-border); }
.fdr-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.fdr-pick-lbl { font-size: 0.8rem; font-weight: 600; color: var(--nu-text); }
.fdr-pick-lbl span { display: block; font-size: 0.66rem; font-weight: 400; color: var(--nu-text-faint); }
.fdr-pick-segs { display: inline-flex; gap: 4px; flex-shrink: 0; }
.fdr-seg { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--nu-border-strong); background: var(--nu-surface); color: var(--nu-text-muted); font-size: 0.82rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: 0.12s ease; }
.fdr-seg:hover { border-color: var(--fc); }
.fdr-seg.is-active { background: var(--fc); border-color: var(--fc); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.fdr-pick-note, .tlab-fdr-note { font-size: 0.68rem; color: var(--nu-text-faint); line-height: 1.5; margin-top: 10px; }
.tlab-fdr-note a { color: var(--nu-accent); font-weight: 600; }
.tlab-pens { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--nu-border); }

.nu-btn-danger { background: var(--nu-surface); color: var(--nu-down); border-color: var(--nu-border-strong); }
.nu-btn-danger:hover { border-color: var(--nu-down); }

/* ===== Model Workshop (mw-*) ===== */
.mw-page { max-width: 740px; padding-top: 24px; padding-bottom: 64px; }
.mw-head { margin-bottom: 16px; }
.mw-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--nu-text); margin: 0 0 8px; }
.mw-sub { font-size: 0.86rem; line-height: 1.55; color: var(--nu-text-muted); margin: 0; }

/* slim toolbar above the list: model count on the left, add / reset on the right */
.mw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--nu-border); margin-bottom: 12px; }
.mw-toolbar-status { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mw-status-num { font-size: 1.4rem; font-weight: 800; color: var(--nu-accent); line-height: 1; font-variant-numeric: tabular-nums; }
.mw-status-label { font-size: 0.8rem; color: var(--nu-text-muted); line-height: 1.4; }
.mw-toolbar-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mw-toolbar-add-lbl { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nu-text-faint); margin-right: 2px; }

.mw-add-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--nu-text); background: var(--nu-surface); border: 1px solid var(--nu-border-strong); border-radius: var(--nu-radius); padding: 6px 10px; text-decoration: none; cursor: pointer; font-family: inherit; transition: 0.12s ease; }
.mw-add-btn:hover { border-color: var(--nu-accent); color: var(--nu-accent); }
.mw-add-btn svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
.mw-add-btn-danger { color: var(--nu-down); }
.mw-add-btn-danger:hover { border-color: var(--nu-down); color: var(--nu-down); }
.mw-add-btn.is-open { border-color: var(--nu-accent); color: var(--nu-accent); background: var(--nu-accent-soft); }

/* A clear seam between "Add" (creates a new override, links to other pages) and "My Adjustments"
   (views/manages what's already active) - these used to read as one long row of similar-looking
   buttons with no indication they do two different things. */
.mw-section-heading { font-size: 1.05rem; font-weight: 800; color: var(--nu-text); margin: 28px 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--nu-accent); }
.mw-toolbar-second { padding-bottom: 10px; }
.mw-toolbar-second .mw-adj-tabs { margin-bottom: 0; }

.mw-fdr-section { margin-top: 36px; }
.mtc-edit-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; color: var(--nu-accent); text-decoration: none; }
.mtc-edit-link:hover { text-decoration: underline; }
.mtc-edit-link svg { width: 13px; height: 13px; stroke: currentColor; }

.mw-card-desc { font-size: 0.78rem; line-height: 1.5; color: var(--nu-text-muted); }
.mw-blend-pills { display: flex; gap: 10px; margin: 12px 0 4px; }
.mw-blend-pill { flex: 1; background: var(--nu-surface-2); border-radius: var(--nu-radius); padding: 8px 10px; }
.mw-blend-pill-lbl { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nu-text-faint); }
.mw-blend-pill-val { font-size: 0.82rem; font-weight: 700; color: var(--nu-text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.mw-blend-pill-val span { font-weight: 400; font-size: 0.6rem; color: var(--nu-text-faint); }

.mw-loading { display: flex; justify-content: center; padding: 28px; }
.mw-empty { text-align: center; padding: 22px 20px; color: var(--nu-text-muted); font-size: 0.83rem; background: var(--nu-surface); border: 1px dashed var(--nu-border-strong); border-radius: var(--nu-radius-lg); }
.mw-empty a { color: var(--nu-accent); font-weight: 600; }

/* your adjustments - segmented tabs + dense expandable rows */
.mw-adj-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.mw-adj-tabs:empty { display: none; }
.mw-adj-tab { background: transparent; border: 1px solid transparent; color: var(--nu-text-muted); font-size: 0.76rem; font-weight: 600; font-family: inherit; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: 0.12s ease; }
.mw-adj-tab:hover { color: var(--nu-text); }
.mw-adj-tab.is-active { background: var(--nu-accent-soft); color: var(--nu-accent); }
.mw-adj-tab-n { font-variant-numeric: tabular-nums; opacity: 0.65; margin-left: 2px; }

.mw-adj { border: 1px solid var(--nu-border); border-radius: var(--nu-radius); background: var(--nu-surface); margin-bottom: 6px; overflow: hidden; }
.mw-adj-global { border-color: var(--nu-border-strong); margin-bottom: 10px; }
.mw-adj-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: left; }
.mw-adj-row:not(.mw-adj-row-static):hover { background: var(--nu-surface-2); }
.mw-adj-row-static { cursor: default; }
.mw-adj-row-static .mw-adj-link { flex-shrink: 0; }
.mw-adj-badge { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.mw-adj-badge-ic { display: flex; align-items: center; justify-content: center; }
.mw-adj-badge-ic svg { width: 15px; height: 15px; stroke: var(--nu-accent); }
.mw-adj-badge-accent { width: 20px; height: 20px; border-radius: 6px; background: var(--nu-accent-soft); }
.mw-adj-badge-accent svg { width: 13px; height: 13px; }
.mw-adj-name { font-weight: 600; font-size: 0.84rem; color: var(--nu-text); white-space: nowrap; }
.mw-adj-meta { font-size: 0.72rem; color: var(--nu-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.mw-adj-count { font-size: 0.68rem; font-weight: 700; color: var(--nu-accent); background: var(--nu-accent-soft); padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.mw-adj-chev { width: 15px; height: 15px; stroke: var(--nu-text-faint); flex-shrink: 0; transition: transform 0.15s ease; }
.mw-adj-row.is-open .mw-adj-chev { transform: rotate(180deg); }
.mw-adj-x { flex-shrink: 0; background: none; border: none; color: var(--nu-text-faint); cursor: pointer; font-size: 0.9rem; padding: 0 2px; line-height: 1; }
.mw-adj-x:hover { color: var(--nu-down); }

.mw-adj-detail { border-top: 1px solid var(--nu-border); background: var(--nu-surface-2); padding: 8px 12px 10px; }
.mw-adj-fields { display: flex; flex-direction: column; }
.mw-adj-field { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 0.78rem; }
.mw-adj-field + .mw-adj-field { border-top: 1px solid var(--nu-border); }
.mw-adj-field-lbl { color: var(--nu-text-muted); flex: 1; }
.mw-adj-field-vals { display: flex; align-items: baseline; gap: 7px; }
.mw-adj-field-vals strong { color: var(--nu-text); font-variant-numeric: tabular-nums; }
.mw-adj-field-was { font-size: 0.68rem; color: var(--nu-text-faint); }
.mw-adj-detail-actions { display: flex; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--nu-border); }
.mw-adj-link { background: none; border: none; padding: 0; font-family: inherit; font-size: 0.74rem; font-weight: 600; color: var(--nu-accent); cursor: pointer; }
.mw-adj-link:hover { text-decoration: underline; }
.mw-adj-link-danger { color: var(--nu-down); }
.mw-adj-chev-btn { background: none; border: none; padding: 2px; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; }
.mw-adj-chev-btn.is-open .mw-adj-chev { transform: rotate(180deg); }

.mw-tweak-loading { font-size: 0.74rem; color: var(--nu-text-faint); padding: 16px 0; text-align: center; }
.mtc-slot { display: block; }

/* Real HTML/CSS "model tweak" share-card preview - crisp at any zoom/DPI (the canvas version
   this replaced for on-screen display looked blurry when scaled). Themed with the page's own
   --nu-* tokens (light/dark aware) rather than a fixed purple graphic, so it reads as part of
   the page, not an inserted image - only the FDR scale colors stay fixed (same absolute hex the
   pitch/spotlight FDR chips already use everywhere else, a semantic scale, not a theme color).
   The exported PNG (drawTweakCard, further down) keeps its own fixed branded dark look - same
   split the live-GW dashboard already has between its themed on-screen view and its own
   canvas-drawn share image. */
.mtc-card { background: var(--nu-surface); border: 1px solid var(--nu-border); border-radius: var(--nu-radius-lg); padding: 16px; font-family: inherit; color: var(--nu-text); }
.mtc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mtc-brand { font-size: 0.68rem; font-weight: 800; color: var(--nu-text-faint); letter-spacing: 0.04em; }
.mtc-tag { font-size: 0.68rem; font-weight: 800; background: var(--nu-accent-soft); color: var(--nu-accent); padding: 3px 10px; border-radius: 999px; }
.mtc-name-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.mtc-name { font-size: 1rem; font-weight: 700; }
.mtc-team { font-size: 0.72rem; font-weight: 500; color: var(--nu-text-muted); }
.mtc-accent { color: var(--nu-accent); }
.mtc-dim { color: var(--nu-text-faint); }
.mtc-arrow { color: var(--nu-text-faint); }
.mtc-big { font-size: 1rem; font-weight: 700; }

.mtc-box { background: var(--nu-surface-2); border: 1px solid var(--nu-border); border-radius: var(--nu-radius); padding: 12px 14px; margin-bottom: 10px; }
.mtc-slider-row + .mtc-slider-row { margin-top: 20px; }
.mtc-slider-label { font-size: 0.72rem; color: var(--nu-text-muted); margin-bottom: 10px; }
.mtc-slider-wrap { position: relative; padding: 0 2px; }
/* A native <input type=range> IS the draggable "after" value - dragging it saves the override
   live (see onTweakSliderChange). The "before" tick is a decorative overlay div (no native way
   to mark a second point on a range input), positioned by JS at (before-min)/(max-min). */
.mtc-slider-input { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; margin: 0; cursor: pointer; }
.mtc-slider-input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--nu-border-strong); }
.mtc-slider-input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--nu-border-strong); }
.mtc-slider-input::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--nu-accent); box-shadow: 0 0 0 3px var(--nu-accent-soft); }
.mtc-slider-input::-moz-range-thumb { border: none; width: 18px; height: 18px; border-radius: 50%; background: var(--nu-accent); box-shadow: 0 0 0 3px var(--nu-accent-soft); }
.mtc-slider-tick { position: absolute; top: 7px; width: 2px; height: 14px; background: var(--nu-text-faint); transform: translateX(-50%); pointer-events: none; }
.mtc-slider-vals { position: relative; height: 16px; margin-top: 6px; }
.mtc-slider-vals span { position: absolute; transform: translateX(-50%); font-size: 0.68rem; white-space: nowrap; }
.mtc-slider-before { color: var(--nu-text-faint); }
.mtc-slider-after { color: var(--nu-accent); font-weight: 700; }

.mtc-tiles { display: flex; gap: 10px; margin-bottom: 10px; }
.mtc-tile { flex: 1; background: var(--nu-surface-2); border: 1px solid var(--nu-border); border-radius: var(--nu-radius); padding: 10px 12px; }
.mtc-tile-lbl { font-size: 0.68rem; color: var(--nu-text-muted); margin-bottom: 4px; }
.mtc-tile-val { font-size: 1.05rem; font-weight: 700; }

/* FDR chips - same shape/weight as .spot-fdr-chip (Spotlight page) so this reads as the site's
   one FDR-chip convention, not a lookalike. Wider than that one to fit GW + match + before/after. */
.mtc-fdr-strip { display: flex; gap: 6px; margin-bottom: 10px; }
.mtc-fdr-cell { flex: 1 1 0; min-width: 0; border-radius: 7px; padding: 7px 4px; text-align: center; color: #fff; }
.mtc-fdr-gw { font-size: 0.78rem; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.mtc-fdr-match { font-size: 0.68rem; font-weight: 700; opacity: 0.95; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.mtc-fdr-pts { overflow: hidden; }
.mtc-fdr-pts { margin-top: 4px; display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.mtc-fdr-before { font-size: 0.7rem; font-weight: 600; text-decoration: line-through; opacity: 0.9; }
.mtc-fdr-after { font-size: 0.95rem; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }

.mtc-team-box { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.mtc-team-vals { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mtc-team-total { text-align: right; }
.mtc-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 8px; font-weight: 800; font-size: 0.8rem; }
.mtc-player-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.mtc-player-row { display: flex; justify-content: space-between; font-size: 0.76rem; padding: 3px 2px; }
.mtc-player-row > span:last-child { display: flex; gap: 10px; }

.mtc-bands-box { display: flex; flex-direction: column; gap: 14px; }
.mtc-band-row { display: flex; align-items: center; gap: 10px; }

/* My FDR ratings - a general team-by-team grid, not a before/after diff. */
.mtc-fdr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.mtc-fdr-grid-row { display: flex; align-items: center; gap: 8px; background: var(--nu-surface-2); border: 1px solid var(--nu-border); border-radius: var(--nu-radius); padding: 6px 8px; }
.mtc-fdr-grid-badge { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.mtc-fdr-grid-name { font-size: 0.7rem; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtc-fdr-grid-pills { display: flex; gap: 4px; flex-shrink: 0; }

/* The standalone "My FDR ratings" showcase - its own section, full names, a numbered ranking
   feel, and a tagline baked into the card itself. Meant to look good enough to post on its own
   and invite a reply ("come rate yours"), not squeezed to match a player/team diff card's size. */
.mtc-fdr-standalone-card { max-width: 720px; margin: 0 auto; padding: 22px; }
.mtc-fdr-headline { font-size: 1.3rem; font-weight: 800; }
.mtc-fdr-tagline { font-size: 0.8rem; color: var(--nu-text-muted); margin: -8px 0 14px; }
/* Sized so all 20 teams (10 rows over 2 columns) fit without an inner scrollbar on a typical
   viewport - tightened row padding/pill height rather than relying on max-height alone, with a
   slightly taller cap (70vh, up from 60vh) as headroom for shorter windows. */
.mtc-fdr-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; margin-bottom: 14px; max-height: 70vh; overflow-y: auto; }
.mtc-fdr-rank-row { display: flex; align-items: center; gap: 7px; background: var(--nu-surface-2); border: 1px solid var(--nu-border); border-radius: var(--nu-radius); padding: 5px 8px; }
.mtc-fdr-rank-num { flex-shrink: 0; width: 16px; font-size: 0.68rem; font-weight: 800; color: var(--nu-text-faint); text-align: center; }
.mtc-fdr-pill-labeled { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mtc-fdr-pill-lbl { font-size: 0.52rem; font-weight: 800; color: var(--nu-text-faint); letter-spacing: 0.03em; }
.mtc-fdr-standalone-card .mtc-pill { min-width: 20px; height: 20px; padding: 0 5px; font-size: 0.7rem; }
.mtc-fdr-standalone-card .mtc-fdr-grid-badge { width: 16px; height: 16px; }
.mtc-fdr-standalone-card .mtc-fdr-grid-name { font-size: 0.68rem; }

@media (max-width: 560px) {
    .mtc-fdr-grid-2col { grid-template-columns: 1fr; }
}

.mtc-caption-input { width: 100%; box-sizing: border-box; font-size: 0.76rem; padding: 7px 10px; border-radius: var(--nu-radius); border: 1px solid var(--nu-border); background: var(--nu-surface-2); color: var(--nu-text); font-family: inherit; margin-bottom: 10px; }
.mtc-caption-input::placeholder { color: var(--nu-text-faint); }
/* Capture-only stand-in for a filled caption input (see fixTweakCloneForCapture) - html2canvas
   can't rasterize a real <input> at all (same issue as the range sliders), so the share image
   needs this instead: same box, but as plain text rather than an editable-looking field. */
.mtc-caption-static { width: 100%; box-sizing: border-box; font-size: 0.76rem; font-weight: 600; padding: 7px 10px; border-radius: var(--nu-radius); background: var(--nu-surface-2); color: var(--nu-text); font-family: inherit; margin-bottom: 10px; }
.mtc-footer { display: flex; justify-content: space-between; align-items: center; }
.mtc-reset-btn { background: none; border: none; padding: 0; font-family: inherit; font-size: 0.72rem; font-weight: 600; color: var(--nu-text-faint); cursor: pointer; }
.mtc-reset-btn:hover { color: var(--nu-down); }
.mtc-save-btn { background: none; border: 1px solid var(--nu-accent); padding: 6px 12px; border-radius: var(--nu-radius); font-family: inherit; font-size: 0.72rem; font-weight: 700; color: var(--nu-accent); cursor: pointer; margin-left: 10px; }
.mtc-save-btn:hover { background: var(--nu-accent-soft); }
.mtc-save-btn:disabled { opacity: 0.6; cursor: default; }
.mtc-share-btn { background: var(--nu-accent); border: none; padding: 7px 16px; border-radius: var(--nu-radius); font-family: inherit; font-size: 0.76rem; font-weight: 700; color: var(--nu-surface); cursor: pointer; }
.mtc-share-btn:hover { background: var(--nu-accent-hover); }
.mtc-footer .mtc-share-btn:only-child { margin-left: auto; }

/* My FDR Ratings edit popup (openMyFdrEditModal) - a purpose-built modal in place of the old
   link out to the generic Team Lab page, so editing FDRs doesn't require finding the right
   field on an unrelated multi-purpose page. Reuses .modal-overlay/.modal-card (see #playerModal)
   with a wider card, since 20 team rows need more horizontal room than a typical popup. */
.mw-fdr-edit-card { max-width: 640px; }
.mw-modal-title { font-size: 1.05rem; font-weight: 800; color: var(--text-dark); margin: 0 0 4px; }
.mw-fdr-edit-list { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; max-height: 55vh; overflow-y: auto; }
.mw-fdr-edit-row { display: flex; align-items: center; gap: 8px; background: var(--nu-surface-2); border: 1px solid var(--nu-border); border-radius: var(--nu-radius); padding: 7px 10px; }
.mw-fdr-edit-row .mtc-fdr-grid-name { flex: 1; font-size: 0.78rem; }
.mw-fdr-edit-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mw-fdr-edit-group .mtc-fdr-pill-lbl { width: 24px; }
.mw-fdr-edit-pills { display: flex; gap: 3px; }
.mw-fdr-edit-pill { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--nu-border-strong); background: var(--nu-surface); color: var(--nu-text-muted); font-family: inherit; font-size: 0.68rem; font-weight: 800; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.mw-fdr-edit-pill:hover { border-color: var(--nu-accent); }
.mw-fdr-edit-pill.is-active { border-color: transparent; }
.mw-fdr-edit-footer { display: flex; justify-content: flex-end; gap: 10px; align-items: center; padding-top: 10px; border-top: 1px solid var(--nu-border); }

@media (max-width: 640px) {
    .mw-fdr-edit-row { flex-wrap: wrap; }
    .mw-fdr-edit-row .mtc-fdr-grid-name { flex-basis: 100%; order: -1; margin-left: 24px; }
}

@media (max-width: 820px) {
    .nu-why { grid-template-columns: 1fr; }
    .nu-features { grid-template-columns: 1fr; gap: 16px; }
    .alab-body { grid-template-columns: 1fr; }
    .alab-results { border-left: none; border-top: 1px solid var(--nu-border); }
}
@media (max-width: 560px) {
    .mw-toolbar { flex-direction: column; align-items: stretch; }
    .mw-toolbar-actions { justify-content: flex-start; }
    .mw-adj:not(.mw-adj-global) .mw-adj-meta { display: none; }
}
@media (max-width: 520px) {
    .nu-wrap { padding: 0 15px; }
    .nu-topbar-inner { padding: 10px 15px; }
    .nu-hero { padding: 24px 15px 18px; margin: 0 -15px; }
    .nu-h1 { font-size: 1.65rem; }
}

/* ===== Players / Teams browse pages (pl-* / tl-*) ===== */
.pl-page { max-width: 1180px; padding-top: 22px; padding-bottom: 64px; }
.pl-head { margin-bottom: 14px; }
.pl-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--nu-text); margin: 0 0 6px; }
.pl-sub { font-size: 0.86rem; color: var(--nu-text-muted); margin: 0; }

.pl-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; margin-bottom: 4px; }
.pl-search { flex: 1 1 200px; min-width: 160px; height: 36px; padding: 0 12px; border: 1px solid var(--nu-border-strong); border-radius: var(--nu-radius); font-size: 0.85rem; font-family: inherit; background: var(--nu-surface); color: var(--nu-text); }
.pl-search:focus { outline: none; border-color: var(--nu-accent); box-shadow: 0 0 0 3px var(--nu-accent-soft); }
.pl-select { height: 36px; padding: 0 30px 0 11px; border: 1px solid var(--nu-border-strong); border-radius: var(--nu-radius); font-size: 0.82rem; font-family: inherit; background: var(--nu-surface); color: var(--nu-text); cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c6a66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.pl-select:focus { outline: none; border-color: var(--nu-accent); }
.pl-count { font-size: 0.76rem; color: var(--nu-text-faint); font-weight: 600; margin-left: auto; white-space: nowrap; }

.nu-seg { display: inline-flex; background: var(--nu-surface-2); border-radius: var(--nu-radius); padding: 3px; gap: 2px; }
.nu-seg-btn { border: none; background: transparent; color: var(--nu-text-muted); font-size: 0.76rem; font-weight: 600; font-family: inherit; padding: 5px 11px; border-radius: 6px; cursor: pointer; transition: 0.12s ease; }
.nu-seg-btn:hover { color: var(--nu-text); }
.nu-seg-btn.is-active { background: var(--nu-surface); color: var(--nu-accent); box-shadow: 0 1px 2px rgba(27,26,25,0.06); }

.nu-tablewrap { border: 1px solid var(--nu-border); border-radius: var(--nu-radius-lg); overflow: hidden; background: var(--nu-surface); }
.nu-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.nu-table thead th { background: var(--nu-surface-2); text-align: left; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nu-text-faint); padding: 9px 12px; border-bottom: 1px solid var(--nu-border); white-space: nowrap; user-select: none; }
.nu-table thead th[data-sort] { cursor: pointer; }
.nu-table thead th[data-sort]:hover { color: var(--nu-text-muted); }
.nu-table thead th.sorted { color: var(--nu-accent); }
.nu-table thead th .sort-caret { font-size: 0.7rem; margin-left: 3px; opacity: 0.9; }
.nu-table th.num, .nu-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* first column absorbs the slack and is the one that ellipsises when space is tight */
.pl-page .nu-table td:first-child, .pl-page .nu-table th:first-child { max-width: 0; width: 100%; }
.pl-page .nu-table td:first-child { overflow: hidden; }
.nu-table tbody tr { border-top: 1px solid var(--nu-border); cursor: pointer; transition: background 0.1s ease; }
.nu-table tbody tr:first-child { border-top: none; }
.nu-table tbody tr:hover { background: var(--nu-surface-2); }
.nu-table td { padding: 9px 12px; vertical-align: middle; color: var(--nu-text); }
.nu-empty-row td { text-align: center; padding: 30px; color: var(--nu-text-muted); font-size: 0.84rem; }

/* players table */
.pl-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-badge { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.pl-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-inj { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--nu-down); vertical-align: middle; margin: 0 0 2px 4px; flex-shrink: 0; }
.pl-team { font-size: 0.72rem; color: var(--nu-text-faint); white-space: nowrap; }
.pl-tag { font-size: 0.58rem; font-weight: 800; padding: 1px 5px; border-radius: 4px; letter-spacing: 0.02em; flex-shrink: 0; }
.pl-tag-GK { background: #fef1d6; color: #92400e; }
.pl-tag-DEF { background: #dce8fb; color: #1e40af; }
.pl-tag-MID { background: #d6f2e4; color: #065f46; }
.pl-tag-FWD { background: #fbe0e0; color: #991b1b; }
.pl-pts { font-weight: 700; }
.pl-fix { display: flex; gap: 3px; }
.pl-fix-chip { font-size: 0.6rem; font-weight: 700; color: #fff; padding: 2px 5px; border-radius: 4px; white-space: nowrap; }
.pl-muted { color: var(--nu-text-faint); }

/* teams table */
.tl-page { max-width: 900px; }
.tl-team { display: flex; align-items: center; gap: 9px; }
.tl-badge { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.tl-name { font-weight: 600; }
.tl-bar-cell { min-width: 120px; }
.tl-bar-row { display: flex; align-items: center; gap: 8px; }
.tl-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--nu-surface-2); overflow: hidden; }
.tl-bar > span { display: block; height: 100%; background: var(--nu-accent); border-radius: 3px; }
.tl-bar-num { font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.tl-fdr { display: inline-block; font-size: 0.66rem; font-weight: 800; color: #fff; width: 20px; text-align: center; padding: 2px 0; border-radius: 4px; }

@media (max-width: 820px) {
    .pl-fix, .nu-table .col-fix { display: none; }
    .pl-team { display: none; }
}
@media (max-width: 560px) {
    .pl-toolbar { gap: 6px; }
    .pl-search { flex-basis: 100%; }
    .pl-count { margin-left: 0; }
    .nu-table .col-xg, .nu-table .col-xa, .nu-table .col-home, .nu-table .col-away { display: none; }
    .nu-table td, .nu-table thead th { padding-left: 9px; padding-right: 9px; }
    .tl-bar-cell { min-width: 84px; }
}
/* ============ Live gameweek (pitch overlay) + Price watch ============ */
/* Compact dark results box - replaces the summary card + chip bar while the viewed GW is in
   progress. Deliberately matches drawShareHeader (the share image) so a natural screenshot of
   this box looks the same as the "Share on X" output. Three compartments: points | overall
   rank | this gameweek. */
.live-box { display: none; width: 100%; max-width: 660px; margin: 0 auto 12px auto; box-sizing: border-box;
    background: linear-gradient(135deg, #4c2b58 0%, #33203c 100%);
    border-radius: 14px; padding: 10px 15px 11px; color: #fff;
    box-shadow: 0 8px 20px rgba(28,10,34,0.28); }
.lv-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lv-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.58rem; font-weight: 900;
    letter-spacing: 0.07em; text-transform: uppercase; color: #cdb9d4; white-space: nowrap; }
.lv-tag i { width: 6px; height: 6px; border-radius: 50%; background: #cdb9d4; }
.lv-tag.is-live { color: #fb8686; }
.lv-tag.is-live i { background: #fb8686; animation: livePulse 1.8s infinite; }
.lv-chiptag { font-size: 0.54rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
    color: #fde68a; background: rgba(253,230,138,0.15); padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.lv-team { font-size: 0.76rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; flex: 1; min-width: 0; }
.lv-brand { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em; color: rgba(255,255,255,0.42); white-space: nowrap; }
.lv-share { margin-left: auto; border: none; background: rgba(255,255,255,0.14); color: #fff;
    font-family: inherit; font-weight: 800; font-size: 0.66rem; padding: 5px 11px; border-radius: 7px;
    cursor: pointer; white-space: nowrap; transition: 0.12s ease; }
.lv-share:hover { background: rgba(255,255,255,0.24); }
.lv-share:disabled { opacity: 0.55; cursor: default; }
.lv-cols { display: flex; align-items: stretch; }
.lv-col { flex: 1; min-width: 0; padding: 1px 11px; }
.lv-col + .lv-col { border-left: 1px solid rgba(255,255,255,0.13); }
.lv-col-pts { flex: 0 0 auto; padding-left: 2px; padding-right: 13px; }
.lv-pts { font-size: 1.95rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.lv-pts-l { font-size: 0.54rem; font-weight: 800; color: #cdb9d4; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 3px; }
.lv-col-k { font-size: 0.52rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.48); margin-bottom: 2px; }
.lv-col-v { font-size: 0.8rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-chip { font-size: 0.64rem; font-weight: 800; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
.lv-chip.up { color: #5ee08f; background: rgba(94,224,143,0.16); }
.lv-chip.down { color: #fb8686; background: rgba(251,134,134,0.16); }
.lv-col-sub { font-size: 0.6rem; font-weight: 600; color: #cdb9d4; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-foot { margin-top: 9px; font-size: 0.62rem; font-weight: 700; color: #cdb9d4; text-align: center; letter-spacing: 0.01em; }
.lv-note { font-size: 0.72rem; color: #cdb9d4; margin-top: 6px; }

/* legacy - kept for liveTilesHTML / any other .ld-* consumers */
.live-dash { display: none; width: 100%; max-width: 660px; margin: 0 auto 12px auto; padding: 11px 14px 12px; background: linear-gradient(180deg, #fff 0%, #fbf7fb 100%); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--card-shadow); box-sizing: border-box; }
.ld-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.ld-live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.09em; color: #dc2626; text-transform: uppercase; white-space: nowrap; }
.ld-live i { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; animation: livePulse 1.8s infinite; }
.ld-chip { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pl-purple-text); background: var(--nu-accent-soft); padding: 3px 9px; border-radius: 20px; }
.ld-toggle { margin-left: auto; display: inline-flex; background: var(--bg-subtle); border-radius: 9px; padding: 2px; }
.ld-tab { border: none; background: transparent; font-family: inherit; font-weight: 800; font-size: 0.68rem; color: var(--text-muted); padding: 5px 15px; border-radius: 7px; cursor: pointer; transition: 0.12s ease; }
.ld-tab.on { background: var(--bg-card); color: var(--pl-purple-text); box-shadow: 0 1px 3px rgba(15,23,42,0.13); }
.ld-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; }
.ld-hero { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ld-hero-num { font-size: 2.5rem; font-weight: 900; color: var(--pl-purple-text); line-height: 1; letter-spacing: -0.02em; }
.ld-hero-unit { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); margin-left: 7px; letter-spacing: 0; }
.ld-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ld-proj { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); }
.ld-delta { font-size: 0.74rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.ld-delta.up { color: #15803d; background: #dcfce7; }
.ld-delta.down { color: #dc2626; background: #fee2e2; }
.ld-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ld-pill { font-size: 0.66rem; font-weight: 800; color: var(--text-dark); background: var(--bg-subtle); padding: 3px 9px; border-radius: 20px; }
.ld-pill-live { color: #b45309; background: #fef3c7; }
.ld-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 4px; }
.ld-tile { display: flex; flex-direction: column; gap: 1px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 6px 8px; min-width: 0; }
.ld-tile-sub b.tu { color: #15803d; }
.ld-tile-sub b.td { color: #dc2626; }
.ld-team { font-size: 0.8rem; font-weight: 800; color: var(--pl-purple-text); margin-top: 3px; }
.ld-safety { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; margin-top: 7px; font-size: 0.76rem; }
.ld-safety-l { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ld-safety b { font-weight: 900; color: var(--pl-purple-text); font-size: 0.9rem; }
.ld-safety-arr { font-weight: 900; padding: 2px 8px; border-radius: 20px; }
.ld-safety-arr.green { color: #15803d; background: #dcfce7; }
.ld-safety-arr.red { color: #dc2626; background: #fee2e2; }
.ld-safety-arr.flat { color: var(--text-muted); background: var(--bg-subtle); }
.ld-safety-hint { font-size: 0.62rem; font-weight: 600; color: var(--text-muted); }
.ld-tile-k { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ld-tile-v { font-size: 0.86rem; font-weight: 900; color: var(--pl-purple-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-tile-sub { font-size: 0.62rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-tile.ld-star { border-color: #bbf7d0; background: #f0fdf4; }
.ld-tile.ld-star .ld-tile-v { color: #15803d; }
.ld-tile.ld-flop { border-color: var(--border-color); background: var(--bg-subtle); }
.ld-tile.ld-flop .ld-tile-v { color: var(--text-dark); }
.ld-share { margin-left: auto; border: none; background: #0f172a; color: #fff; font-family: inherit; font-weight: 800; font-size: 0.68rem; padding: 6px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: 0.12s ease; }
.ld-share:hover { background: #1e293b; }
.ld-share:disabled { opacity: 0.6; cursor: default; }
.mt-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: #0f172a; color: #fff; font-size: 0.8rem; font-weight: 700; padding: 11px 18px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.28); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; max-width: 90vw; text-align: center; }
.mt-toast.on { opacity: 1; transform: translate(-50%, 0); }
.ld-live.is-final { color: var(--pl-purple-text); }
.ld-live.is-final i { background: var(--pl-purple); animation: none; }
.ld-rank { display: flex; align-items: center; gap: 6px 9px; flex-wrap: wrap; margin-top: 9px; font-size: 0.8rem; }
.ld-rank-main { font-weight: 900; color: var(--pl-purple-text); }
.ld-rank-sub { font-size: 0.64rem; font-weight: 700; color: var(--text-muted); }
.ld-rank-chip { font-size: 0.72rem; font-weight: 900; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.ld-rank-chip.green { color: #15803d; background: #dcfce7; }
.ld-rank-chip.red { color: #dc2626; background: #fee2e2; }
.ld-rank-chip.flat { color: var(--text-muted); background: var(--bg-subtle); }

/* The "Share on X" screenshot used to force this DOM into a fixed device-independent layout and
   screenshot it (html-to-image, SVG foreignObject) - replaced with drawing the share image
   directly on canvas (drawSharePitch, my_team_page.py) after that approach kept breaking on real
   mobile browsers in ways impossible to reproduce or catch from this dev environment (a
   drop-shadow filter silently killing the render was one already-shipped fix; shirts not
   appearing at all was the next report). No .share-shot forcing needed any more - nothing left
   references this class.
*/

/* Live / Planner mode switch - big segmented control, same family as the WC/FH plan-mode-switch. */
.mt-mode-switch { display: none; gap: 5px; width: 100%; max-width: 520px; margin: 0 auto 14px auto; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 14px; padding: 5px; box-sizing: border-box; }
.mt-mode-btn { flex: 1; border: none; background: transparent; font-family: inherit; font-weight: 800; font-size: 0.92rem; color: var(--text-muted); padding: 12px 8px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: 0.14s ease; white-space: nowrap; }
.mt-mode-btn:hover { color: var(--text-dark); }
.mt-mode-btn.on { background: var(--bg-card); box-shadow: 0 2px 6px rgba(15,23,42,0.14); }
.mt-mode-btn[data-mode="live"].on { color: #dc2626; }
.mt-mode-btn[data-mode="planner"].on { color: var(--pl-purple-text); }
.mt-mode-btn .mt-mode-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.mt-mode-btn[data-mode="live"].on .mt-mode-dot { opacity: 1; animation: livePulse 1.8s infinite; }

/* Reload-from-FPL + Upload-screenshot, relocated to the top of the left sidebar once a squad
   exists (compact classes already applied; this just makes them sit in the narrow column). */
.mt-sidebar-tools { display: flex; flex-direction: column; gap: 6px; margin-bottom: 2px; }
.mt-sidebar-tools .get-started-callout, .mt-sidebar-tools #uploadSection { margin: 0; }
.mt-sidebar-tools .get-started-callout.get-started-compact,
.mt-sidebar-tools .adjustment-card.adjustment-card-compact { padding: 6px 10px; }
/* The explanatory sub-line ("Re-syncs from your FPL Team ID below.") is kept even once compact -
   without it the input's purpose isn't obvious at a glance - but shrunk down so it costs a lot
   less height than the first-time sentence-length version. */
.mt-sidebar-tools .get-started-sub { font-size: 0.66rem; line-height: 1.25; margin-top: 2px; }
.mt-sidebar-tools .get-started-fpl-id-row { flex-direction: column; gap: 4px; margin-top: 4px; }
.mt-sidebar-tools .get-started-input { min-width: 0; width: 100%; box-sizing: border-box; padding: 6px 10px; font-size: 0.72rem; }
.mt-sidebar-tools .get-started-fpl-id-row .action-btn { width: 100%; justify-content: center; font-size: 0.68rem; padding: 6px 10px; }
.mt-sidebar-tools .adjustment-card-header { flex-direction: column; align-items: flex-start; gap: 4px; }
.mt-sidebar-tools .adjustment-card-header .action-btn { width: auto; align-self: flex-start; font-size: 0.68rem; padding: 6px 12px; }
.mt-sidebar-tools .get-started-alt { display: none; }

/* Live mode: the team can't change, so no Save. */
body.mt-live-mode .save-squad-row { display: none !important; }

.mt-greeting { font-size: 0.98rem; font-weight: 900; color: var(--pl-purple-text); margin: 0 0 2px 0; line-height: 1.25; }
.left-sidebar > .mt-greeting { padding-bottom: 5px; border-bottom: 1px solid var(--border-color); }
@media (max-width: 768px) { .mt-greeting { font-size: 0.92rem; } }

/* Live-mode right column: points breakdown (kept short - scrolls past ~9 rows). */
.lx-list { margin-top: 3px; }
.lx-scroll { max-height: 258px; overflow-y: auto; }
.lx-scroll::-webkit-scrollbar { width: 5px; }
.lx-scroll::-webkit-scrollbar-thumb { background: #d5dbe3; border-radius: 3px; }
.lx-row { display: grid; grid-template-columns: 8px minmax(0,1fr) auto auto auto; align-items: center; gap: 6px; padding: 2px 0; font-size: 0.7rem; border-top: 1px solid var(--bg-subtle); }
.lx-row:first-child { border-top: none; }
.lx-row.lx-bench { opacity: 0.55; }
.lx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-subtle-2); }
.lx-dot.is-live { background: #f59e0b; }
.lx-dot.is-done { background: var(--pl-purple); }
.lx-dot.is-up { background: var(--bg-subtle-2); }
.lx-name { font-weight: 700; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-sub { color: #15803d; font-weight: 900; }
.lx-mins { font-size: 0.6rem; color: var(--text-muted); }
.lx-eo { font-size: 0.66rem; font-weight: 800; color: var(--text-dark); text-align: right; min-width: 32px; }
.lx-pts { font-size: 0.72rem; font-weight: 900; color: var(--pl-purple-text); min-width: 18px; text-align: right; }
.lx-row.lx-head { border-top: none; padding-bottom: 1px; position: sticky; top: 0; background: var(--bg-card); }
.lx-row.lx-head .lx-name, .lx-row.lx-head .lx-eo, .lx-row.lx-head .lx-pts { font-size: 0.54rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.lx-eo-toggle { display: inline-flex; background: var(--bg-subtle); border-radius: 8px; padding: 2px; margin: 5px 0 2px; }
.lx-eo-tab { border: none; background: transparent; font-family: inherit; font-weight: 800; font-size: 0.6rem; color: var(--text-muted); padding: 3px 9px; border-radius: 6px; cursor: pointer; }
.lx-eo-tab.on { background: var(--bg-card); color: var(--pl-purple-text); box-shadow: 0 1px 2px rgba(15,23,42,0.12); }
.lx-rp { font-size: 0.62rem; font-weight: 800; color: var(--text-muted); text-align: right; min-width: 30px; }
.lx-rp.up { color: #15803d; }
.lx-rp.down { color: #dc2626; }
.lx-foot { font-size: 0.6rem; color: var(--text-muted); margin-top: 7px; line-height: 1.4; }
.lx-foot.lx-soon { font-style: italic; }

.lx-td { margin-top: 9px; display: flex; flex-direction: column; gap: 8px; }
.lx-td-col { border: 1px solid var(--border-color); border-radius: 10px; padding: 7px 9px; }
.lx-td-threat { background: #fffbeb; border-color: #fde68a; }
.lx-td-diff { background: #f5f3ff; border-color: #ddd6fe; }
.lx-td-h { font-size: 0.64rem; font-weight: 900; color: var(--text-dark); margin-bottom: 3px; }
.lx-td-h i { font-style: normal; font-weight: 600; font-size: 0.9em; color: var(--text-muted); }
.lx-td-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 6px; align-items: center; font-size: 0.68rem; padding: 1px 0; }
.lx-td-row .lx-name { font-weight: 700; color: var(--text-dark); }
.lx-td-threat .lx-eo { color: #b45309; font-weight: 800; }
.lx-td-diff .lx-eo { color: var(--pl-purple-text); font-weight: 800; }

/* Threats / differentials as mini player cards */
.lx-tc-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 1px 2px; scrollbar-width: thin; }
/* Points breakdown specifically: exactly 2 rows (most points top-left, reading left-to-right
   then wrapping to row 2) rather than one long horizontal scroll - a grid with a fixed 2-row
   template and grid-auto-flow:column fills down each column before starting the next, so it
   naturally becomes "most points on the left, scroll right for the rest" without needing to
   compute row breaks by hand. */
.lx-tc-row-2row { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 84px; }
.lx-tc { flex: 0 0 auto; width: 84px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 9px; padding: 6px 5px 5px; text-align: center; }
.lx-td-threat .lx-tc { border-color: #fcd77f; }
.lx-td-diff .lx-tc { border-color: #cec4fb; }
.lx-tc-shirt { width: 30px; height: 30px; object-fit: contain; display: block; margin: 0 auto 2px; }
.lx-tc-name { font-weight: 800; font-size: 0.62rem; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-tc-eo { font-size: 0.62rem; font-weight: 800; margin-top: 1px; }
.lx-tc-stats { font-size: 0.8rem; line-height: 1.3; margin-top: 2px; word-break: break-word; }
.lx-tc-none { font-size: 0.6rem; color: var(--text-muted); font-weight: 700; }
.lx-td-threat .lx-tc-eo { color: #b45309; }
.lx-td-diff .lx-tc-eo { color: var(--pl-purple-text); }
.lx-tc-foot { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 3px; font-size: 0.56rem; font-weight: 700; }
.lx-tc-pts { color: var(--text-muted); }
.lx-tc-rp { font-weight: 900; }
.lx-tc-rp.up { color: #15803d; }
.lx-tc-rp.down { color: #dc2626; }

/* Chips-in-play / squad-played-progress boxes (Live mode's right column, per-bucket %EO extras) */
.lx-chip-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.lx-chip-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; }
.lx-chip-lbl { color: var(--text-dark); font-weight: 700; }
.lx-chip-pct { color: var(--pl-purple-text); font-weight: 900; font-variant-numeric: tabular-nums; }
.lx-progress-main { font-size: 1.5rem; font-weight: 900; color: var(--text-dark); line-height: 1.2; margin-top: 2px; }
.lx-progress-of { font-size: 0.9rem; font-weight: 700; color: var(--text-muted); }
.lx-progress-sub { font-size: 0.62rem; color: var(--text-muted); margin-top: 2px; }
.lx-progress-cap { font-size: 0.68rem; font-weight: 700; color: var(--text-dark); margin-top: 8px; }

/* Rank ladder - a thin ranked table: points ahead/behind each overall-rank milestone */
.lx-ladder { margin-top: 10px; border-top: 1px solid var(--border-color); padding-top: 9px; }
.lx-lad-rows { margin-top: 5px; border: 1px solid var(--border-color); border-radius: 9px; overflow: hidden; }
.lx-lad-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 10px; font-size: 0.7rem; border-top: 1px solid var(--bg-subtle); }
.lx-lad-row:first-child { border-top: none; }
.lx-lad-row.is-you { background: rgba(56, 0, 60, 0.07); }
.lx-lad-r { font-weight: 800; color: var(--text-dark); letter-spacing: 0.01em; }
.lx-lad-r b { color: var(--pl-purple-text); font-weight: 800; }
.lx-lad-d { font-weight: 900; font-variant-numeric: tabular-nums; }
.lx-lad-d.up { color: #15803d; }
.lx-lad-d.down { color: #dc2626; }
.lx-lad-d.flat { color: var(--text-muted); }
.lx-lad-d.pending { color: var(--text-muted); font-weight: 700; font-style: italic; opacity: 0.7; }

/* Games list (under the pitch, Live mode) - every fixture this GW, collapsed to badges/score,
   expands to live DefCon/BPS tables, goal/assist/save chips, and player cards. Squad players
   (starting or bench) get a consistent accent treatment - bold name + left border/background
   tint - everywhere they turn up (DefCon/BPS rows, scorer/save chips, player cards), so "is this
   one of mine" reads at a glance across every sub-list here. */
.lx-games-card { margin-top: 14px; }
.lx-games-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.lx-game { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: var(--bg-card); transition: border-color 0.15s ease; }
.lx-game-live { border-color: #f59e0b; box-shadow: 0 0 0 1px rgba(245,158,11,0.25); }
.lx-game-open { border-color: var(--pl-purple-text); }
.lx-game-row { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 8px 12px; cursor: pointer; font-family: inherit; text-align: left; }
.lx-game-team { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 900; color: var(--text-dark); }
.lx-game-team-away { justify-content: flex-end; text-align: right; }
.lx-game-badge { width: 27px; height: 27px; object-fit: contain; flex-shrink: 0; }
.lx-game-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; min-width: 78px; }
.lx-game-score-box { font-size: 1.05rem; font-weight: 900; color: var(--text-dark); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--bg-subtle); border-radius: 7px; padding: 2px 12px; }
.lx-game-live .lx-game-score-box { background: rgba(245,158,11,0.14); color: #b45309; }
.lx-game-score-kickoff { font-size: 0.68rem; font-weight: 800; color: var(--text-muted); background: none; padding: 0; }
.lx-game-live-badge { display: flex; align-items: center; gap: 4px; font-size: 0.56rem; font-weight: 900; color: #f59e0b; letter-spacing: 0.04em; }
.lx-game-live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #dc2626; animation: livePulse 1.8s infinite; }
.lx-game-ft-badge { font-size: 0.56rem; font-weight: 900; color: var(--text-muted); letter-spacing: 0.04em; }
/* Fixed width regardless of whether the "N of yours" badge is present - otherwise a fixture
   with none of your players sits narrower here than one that has some, which (since
   .lx-game-team-away is flex:1) visibly shifted the away team's badge/name and the chevron
   left/right row to row instead of keeping them in one consistent column. */
.lx-game-row-end { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; min-width: 46px; }
.lx-game-mine-count { font-size: 0.6rem; font-weight: 800; color: var(--lx-mine); background: var(--lx-mine-soft); border-radius: 10px; padding: 2px 6px; white-space: nowrap; }
.lx-game-chev { flex-shrink: 0; font-size: 0.6rem; color: var(--text-muted); transition: transform 0.15s ease; }
.lx-game-open .lx-game-chev { transform: rotate(180deg); }
.lx-game-detail { padding: 2px 12px 14px; border-top: 1px solid var(--bg-subtle); }
.lx-game-minute { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); margin: 12px 0 4px; }
.lx-game-minute-live { color: #b45309; }
/* One consistent block unit for every sub-section of the expanded row (Goals & Assists, Saves,
   the DefCon/BPS tables, Your players, each team's roster) - generous top margin between them is
   what actually fixes "hard to find things", not any one element's own styling. */
.lx-game-section { margin-top: 16px; }
.lx-game-hdr { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 900; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 5px; margin-bottom: 7px; border-bottom: 2px solid var(--border-color); }
.lx-game-hdr-ic { font-size: 0.9rem; }
.lx-game-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.lx-game-chip { font-size: 0.68rem; font-weight: 700; color: var(--text-dark); background: var(--bg-subtle); border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.lx-game-chip-mine { color: var(--lx-mine); background: var(--lx-mine-soft); font-weight: 800; }
.lx-game-chip-empty { font-size: 0.68rem; color: var(--text-muted); }
.lx-game-split { display: flex; gap: 10px; }
.lx-game-split-col { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; min-width: 0; }
.lx-game-split-away { justify-content: flex-end; }
.lx-game-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lx-game-stat-table { border: 1px solid var(--border-color); border-radius: 9px; overflow: hidden; }
.lx-game-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; font-size: 0.68rem; border-top: 1px solid var(--bg-subtle); }
.lx-game-stat-row:first-child { border-top: none; }
.lx-game-stat-mine { background: var(--lx-mine-soft); border-left: 3px solid var(--lx-mine); padding-left: 5px; }
.lx-game-stat-name { color: var(--text-dark); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-game-stat-mine .lx-game-stat-name { font-weight: 800; color: var(--lx-mine); }
.lx-game-stat-val { flex-shrink: 0; display: flex; align-items: center; gap: 4px; font-weight: 800; color: var(--text-dark); font-variant-numeric: tabular-nums; }
/* DefCon threshold crossed - green + bold on the number itself, no separate checkmark text to
   parse; independent of (and layered on top of) the blue "mine" marking, so both signals read
   at once rather than competing for the same color. */
.lx-stat-hit { color: #15803d; font-weight: 900; }
.lx-bonus-badge { font-size: 0.56rem; font-weight: 900; color: #4a2e00; border-radius: 5px; padding: 1px 4px; line-height: 1.3; }
.lx-bonus-gold { background: #fbbf24; }
.lx-bonus-silver { background: #cbd5e1; }
.lx-bonus-bronze { background: #d99a5b; }
.lx-game-empty { font-size: 0.68rem; color: var(--text-muted); padding: 8px; text-align: center; }
.lx-tc-row-wrap { flex-wrap: wrap; overflow-x: visible; }
.lx-tc-mine { border-color: var(--lx-mine); box-shadow: 0 0 0 1px var(--lx-mine-soft); position: relative; }
.lx-tc-blank { opacity: 0.55; }
.lx-tc-bench-tag { position: absolute; top: 3px; right: 3px; font-size: 0.5rem; font-weight: 900; color: #fff; background: var(--text-muted); border-radius: 4px; padding: 1px 4px; letter-spacing: 0.02em; }
.lx-tc-sm { width: 66px; padding: 5px 4px 4px; }
.lx-tc-sm .lx-tc-shirt { width: 24px; height: 24px; }
.lx-tc-sm .lx-tc-name { font-size: 0.56rem; }
.lx-tc-sm .lx-tc-stats { font-size: 0.68rem; }
.lx-tc-sm .lx-tc-foot { font-size: 0.5rem; }

@media (max-width: 640px) {
    .lx-game-tables { grid-template-columns: 1fr; }
    .lx-game-team span { display: none; }
}

/* Chip markings drawn onto the pitch. */
.captain-badge.tc-badge { background: var(--bg-card); color: #111; border-color: #111; }
.fpl-bench-pod.bb-active { background: rgba(56, 0, 60, 0.55); border-color: rgba(251, 191, 36, 0.75); box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35), 0 6px 14px rgba(0,0,0,0.2); }
.fpl-bench-pod.bb-active .fpl-bench-header { color: #fde68a; }
.pitch-chip-ribbon { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 12; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; padding: 4px 14px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); white-space: nowrap; pointer-events: none; }
.pitch-chip-ribbon.wildcard { background: #7c3aed; }
.pitch-chip-ribbon.free_hit { background: #dc2626; }

/* Player card: bold live-points band replacing the fixture strip once a player's kicked off. */
.live-pts { width: 100%; box-sizing: border-box; margin-top: auto; padding: 1px 0 2px; border-radius: 0 0 8px 8px; font-weight: 900; font-size: 0.72rem; line-height: 1.25; }
.live-pts.is-done { background: var(--pl-purple); color: #fff; }
.live-pts.is-live { background: #f59e0b; color: #fff; }
.live-pts.is-blank { background: var(--bg-subtle-2); color: var(--text-muted); }
.fpl-bench-card .live-pts { font-size: 0.58rem; }

.fpl-player-card.live-subbed-out .fpl-shirt-wrap img, .fpl-bench-card.live-subbed-out .fpl-bench-shirt-wrap img { opacity: 0.35; filter: grayscale(1); }
.fpl-player-card.live-subbed-out .fpl-name-plate, .fpl-player-card.live-subbed-out .fpl-info-plate,
.fpl-bench-card.live-subbed-out .fpl-bench-plate, .fpl-bench-card.live-subbed-out .fpl-bench-info-plate { opacity: 0.5; }
.live-sub-mark { position: absolute; top: -3px; left: -3px; width: 15px; height: 15px; border-radius: 50%; font-size: 0.55rem; font-weight: 900; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 7; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.live-sub-mark.in { background: #15803d; }
.live-sub-mark.out { background: #9ca3af; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.55); } 70% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } }

@media (max-width: 768px) {
    .ld-hero-num { font-size: 2.4rem; }
    .live-pts { font-size: 0.68rem; }
    .fpl-bench-card .live-pts { font-size: 0.56rem; }
    .pitch-chip-ribbon { font-size: 0.55rem; padding: 3px 11px; }

    /* Live box spans the full screen width (same full-bleed technique as the pitch card) and
       tightens up - a natural screenshot then frames the box + pitch cleanly. */
    .live-box { width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%;
        margin-left: -50vw; margin-right: -50vw; border-radius: 8px; padding: 9px 13px 10px; }
    .lv-cols { }
    .lv-pts { font-size: 1.7rem; }
    .lv-col { padding: 1px 8px; }
    .lv-col-pts { padding-right: 10px; }
    .lv-col-v { font-size: 0.74rem; }
    .lv-col-k { font-size: 0.5rem; }
    .lv-col-sub { font-size: 0.56rem; }
    .lv-chip { font-size: 0.58rem; }

    /* Pitch a touch smaller on mobile so more of it lands in one screenshot. */
    .fpl-player-card { width: 78px; }
    .fpl-shirt-wrap { height: 44px; }
    .fpl-shirt-img { max-height: 44px; }
    .pitch-line-up-def { margin: 10px 0 20px 0; }
    .pitch-line-up-mid { margin: 10px 0 20px 0; }
    .pitch-line-up-fwd { margin: 10px 0 12px 0; }
    .soccer-pitch-wrapper { padding: 18px 3px 12px 3px; margin-bottom: 22px; }
}

/* No hard cap on how many players can appear here (squad + pinned + planned transfers +
   anything FPL itself flags as imminent) - that's the point, but unbounded height meant a
   watch-list with a lot of live risk right now could grow to dominate the whole sidebar. Caps
   the visible height to ~8 rows and scrolls the rest, rather than the whole card growing forever. */
.pw-list { margin-top: 4px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.pw-row { padding: 4px 0; border-top: 1px solid var(--bg-subtle); }
.pw-row:first-child { border-top: none; }
.pw-row-top { display: flex; align-items: baseline; gap: 6px; }
.pw-name { font-size: 0.7rem; font-weight: 700; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.pw-price { font-size: 0.6rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.pw-label { font-size: 0.6rem; font-weight: 700; white-space: nowrap; text-align: right; flex-shrink: 0; }
.pw-up .pw-label { color: #15803d; }
.pw-down .pw-label { color: #dc2626; }
.pw-label.pw-strong { font-weight: 900; }
.pw-row-bot { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.pw-bar { position: relative; flex: 1; height: 5px; border-radius: 3px; background: var(--bg-subtle); overflow: hidden; }
.pw-bar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; }
.pw-bar b { position: absolute; top: -1px; width: 2px; height: 7px; background: rgba(15,23,42,0.55); }
.pw-up .pw-bar i { background: #15803d; }
.pw-down .pw-bar i { background: #dc2626; }
.pw-pct { font-size: 0.58rem; font-weight: 800; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.pw-pct-next { font-weight: 700; opacity: 0.75; }
.pw-x { border: none; background: var(--bg-subtle); color: var(--text-muted); width: 14px; height: 14px; line-height: 1; border-radius: 50%; font-size: 0.66rem; font-weight: 900; cursor: pointer; padding: 0; flex-shrink: 0; }
.pw-x:hover { background: #fecaca; color: #b91c1c; }
.pw-pins { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pw-pin { display: inline-flex; align-items: center; gap: 4px; font-size: 0.62rem; font-weight: 700; color: var(--text-muted); background: var(--bg-subtle); padding: 3px 4px 3px 8px; border-radius: 12px; }
.pw-add { margin-top: 7px; position: relative; }
.pw-add input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--border-color); border-radius: 8px; padding: 5px 9px; font-family: inherit; font-size: 0.68rem; font-weight: 600; outline: none; }
.pw-add input:focus { border-color: var(--pl-purple-text); }
.pw-results { position: fixed; z-index: 200; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 9px; box-shadow: 0 10px 28px rgba(15,23,42,0.2); max-height: 232px; overflow-y: auto; padding: 3px; }
.pw-res { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 0.72rem; }
.pw-res:hover { background: #f5f3f7; }
.pw-res-badge { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
.pw-res-name { font-weight: 700; color: var(--text-dark); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-res-pos { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text-muted); text-transform: uppercase; }
.pw-res-price { font-size: 0.64rem; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
.pw-foot { font-size: 0.58rem; color: var(--text-muted); margin-top: 7px; line-height: 1.4; }