:root {
  color-scheme: dark;
  --bg: var(--fp-color-bg-page);
  --bg-deep: var(--fp-color-bg-page-accent);
  --panel: var(--fp-color-bg-surface);
  --panel2: var(--fp-color-bg-surface-raised);
  --panel3: var(--fp-color-bg-surface-strong);
  --text: var(--fp-color-text-primary);
  --muted: var(--fp-color-text-muted);
  --accent: var(--fp-color-brand-primary);
  --accent-bright: var(--fp-color-brand-primary-strong);
  --accent2: var(--fp-color-brand-accent);
  --danger: var(--fp-color-status-danger);
  --outline: var(--fp-color-border-subtle);
  --shadow: 0 1.25rem 2.5rem rgba(0,0,0,.34);
  --z-base: 1;
  --z-admin: 10;
  --z-header: 100;
  --z-dropdown: 105;
  --z-drawer: 110;
  --z-toast: 120;
  --color-bg: var(--bg);
  --color-bg-deep: var(--bg-deep);
  --color-surface: var(--panel);
  --color-surface-raised: var(--panel2);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-primary: var(--accent);
  --color-accent: var(--accent2);
  --color-border: var(--outline);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius-card: .5rem;
  font-family: var(--fp-font-body);
}

* { box-sizing: border-box; }
body { display: flex; flex-direction: column; margin: 0; min-height: 100vh; padding-top: 4rem; background: linear-gradient(180deg, rgba(74,222,128,.08), transparent 18rem), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px), var(--bg); background-size: auto, 4rem 4rem, 4rem 4rem; color: var(--text); line-height: 1.6; font-variant-numeric: tabular-nums; }
a { color: var(--accent-bright); text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
h1, h2, h3, .brand, .rail-brand strong { font-family: var(--fp-font-heading); letter-spacing: 0; }
h1 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; text-transform: uppercase; }
h2 { margin: 0 0 .75rem; font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.15; }
h3 { margin: 0 0 .5rem; }
h1, h2, h3 { overflow-wrap: break-word; }
small, .muted { color: var(--muted); }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); border-bottom: 1px solid var(--outline); background: color-mix(in srgb, var(--bg-deep) 94%, transparent); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25); backdrop-filter: blur(16px); }
.header-container { display: flex; gap: 1rem; align-items: center; justify-content: space-between; width: min(1440px, calc(100% - 2rem)); min-height: 4rem; margin: 0 auto; }
.brand, .rail-brand { display: inline-flex; gap: .75rem; align-items: center; color: var(--text); font-weight: 950; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--outline)); border-radius: .25rem; background: var(--accent); color: var(--bg-deep); font-size: .78rem; font-weight: 1000; letter-spacing: .05em; }
.primary-nav { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex: 1 1 auto; min-width: 0; }
.nav-links, .utility-nav { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; }
.utility-nav { flex: 0 0 auto; margin-left: auto; }
.nav-links a, .utility-link, .dropdown-menu a, .admin-menu a, .admin-menu summary, .rail-menu a { color: var(--muted); font-size: .86rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.nav-links > li > a, .utility-link { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-radius: .5rem; white-space: nowrap; }
.nav-links a:hover, .utility-link:hover, .nav-links a:focus-visible, .utility-link:focus-visible { color: var(--text); background: var(--panel2); }
.nav-links a[aria-current="page"], .utility-link[aria-current="page"], .admin-menu a[aria-current="page"], .admin-menu summary[aria-current="page"], .rail-menu a[aria-current="page"] { color: var(--bg-deep); background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-bright) 50%, transparent); }
.primary-nav .dropdown { position: relative; }
.primary-nav .dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: .75rem; }
.primary-nav .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); display: grid; visibility: hidden; opacity: 0; pointer-events: none; min-width: 13rem; padding: .5rem; margin: 0; list-style: none; border: 1px solid var(--outline); border-radius: .75rem; background: var(--panel); box-shadow: var(--shadow); transform: translateY(.5rem); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.primary-nav .dropdown-menu-right { left: auto; right: 0; }
.primary-nav .dropdown:hover .dropdown-menu, .primary-nav .dropdown:focus-within .dropdown-menu { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.dropdown-menu a, .dropdown-menu .nav-logout { display: block; width: 100%; padding: .6rem .8rem; border-radius: .5rem; color: var(--text); text-align: left; white-space: nowrap; }
.dropdown-menu a:hover, .dropdown-menu .nav-logout:hover, .dropdown-menu a:focus-visible, .dropdown-menu .nav-logout:focus-visible { color: var(--accent-bright); background: var(--panel2); }
.nav-logout { border: 0; background: transparent; font: inherit; font-size: .95rem; font-weight: 800; }
.mobile-nav-toggle { display: none; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0; border: 1px solid var(--outline); border-radius: .75rem; background: var(--panel2); }
.hamburger, .hamburger::before, .hamburger::after { display: block; width: 1.5rem; height: .125rem; border-radius: 999px; background: var(--text); content: ""; }
.hamburger { position: relative; }
.hamburger::before, .hamburger::after { position: absolute; left: 0; }
.hamburger::before { top: -.5rem; }
.hamburger::after { top: .5rem; }

.command-layout { --workspace-content-max: var(--fp-content-max); --workspace-rail-width: 16rem; --workspace-gutter: max(1rem, calc((100% - var(--workspace-rail-width) - var(--workspace-content-max)) / 2)); }
.command-layout .site-header { left: var(--workspace-rail-width); }
.command-rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-header); display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; width: 16rem; padding: 1rem; border-right: 1px solid var(--outline); background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: .75rem 0 2rem rgba(0,0,0,.2); }
.mobile-command-nav { display: none; }
.rail-brand { align-items: start; padding: .25rem; }
.rail-brand small { display: block; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.rail-menu, .admin-menu { display: grid; align-content: start; gap: .35rem; min-height: 0; overflow: auto; }
.rail-menu a, .admin-menu a, .admin-menu summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem .85rem; border-radius: .65rem; }
.rail-menu a:hover, .admin-menu a:hover, .admin-menu summary:hover, .rail-menu a:focus-visible, .admin-menu a:focus-visible, .admin-menu summary:focus-visible { color: var(--text); background: var(--panel2); }
.rail-section, .admin-menu-reference { display: grid; gap: .35rem; padding: .45rem; border: 1px solid color-mix(in srgb, var(--outline) 80%, transparent); border-radius: var(--radius-card); background: color-mix(in srgb, var(--panel2) 40%, transparent); }
.rail-section-label, .admin-menu-label { color: var(--accent2); font-size: .7rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.rail-submenu { display: grid; gap: .25rem; }
.rail-submenu a { padding: .6rem .65rem; }
.rail-actions { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--outline); }
.command-layout .page-shell { padding-left: var(--workspace-rail-width); }
.command-layout .container { width: min(var(--workspace-content-max), calc(100% - 2rem)); margin: 2rem auto; }

.page-shell { flex: 1 0 auto; width: 100%; }
.container { width: min(var(--fp-content-max), calc(100% - 2rem)); margin: 2rem auto; }
.site-footer { flex-shrink: 0; display: flex; gap: .75rem; align-items: center; justify-content: center; flex-wrap: wrap; width: min(var(--fp-content-max), calc(100% - 2rem)); margin: 0 auto 2rem; padding: 1rem 0 0; border-top: 1px solid var(--outline); color: var(--muted); font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.command-layout .site-footer { width: min(var(--workspace-content-max), calc(100% - var(--workspace-rail-width) - 2rem)); margin: 0 var(--workspace-gutter) 2rem calc(var(--workspace-rail-width) + var(--workspace-gutter)); }
.admin-layout .site-footer { width: min(calc(var(--fp-admin-content-max) - 266px), calc(100% - 2rem - 266px)); margin: 0 max(1rem, calc((100% - var(--fp-admin-content-max)) / 2)) 2rem calc(max(1rem, calc((100% - var(--fp-admin-content-max)) / 2)) + 266px); }
.hero, .panel, .card, .message-card, .api-status-card, .api-doc-grid section, .league-choice { border: 1px solid var(--outline); border-radius: var(--radius-card); background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.18); }
.container, .panel, .card, .message-card, .form-section, .settings-grid, .admin-main { min-width: 0; }
.panel, .card, .message-card { background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, transparent), transparent); }
.hero { padding: 2rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), color-mix(in srgb, var(--accent2) 10%, var(--panel))); }
.hero h1 { max-width: 12ch; }
.panel { padding: 1rem; margin: 1rem 0; }
.card { padding: 1rem; }
.grid { display: grid; gap: 1rem; }
.grid > *, .cards > *, .settings-grid > * { min-width: 0; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.stat strong { display: block; color: var(--text); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; }
.eyebrow, th { color: var(--accent2); text-transform: uppercase; letter-spacing: .14em; font-weight: 950; }
.stack { display: grid; gap: 1rem; }
.inline-form, .admin-grid-tools, .admin-grid-filters, .admin-grid-actions, .emoji-bar, .toast-actions, .section-heading { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.league-tournament-option { display: grid; gap: .35rem; padding: .7rem; border: 1px solid var(--outline); border-radius: .5rem; background: color-mix(in srgb, var(--panel2) 68%, transparent); }
.prediction-save-bar { position: fixed; right: 1rem; bottom: 1rem; z-index: calc(var(--z-header) - 1); display: flex; gap: .6rem; align-items: center; justify-content: flex-end; padding: .6rem; border: 1px solid var(--outline); border-radius: .65rem; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: var(--shadow); }
#prediction-form { padding-bottom: 5rem; }
.standings-team { display: inline-flex; gap: .4rem; align-items: center; min-width: 0; }
.standings-team img { width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; background: var(--panel2); }
.qualification-info { position: relative; display: inline-block; margin-left: .35rem; vertical-align: middle; }
.qualification-info summary { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid var(--outline); border-radius: 999px; background: var(--panel2); color: var(--accent2); font-size: .72rem; font-weight: 950; cursor: pointer; list-style: none; }
.qualification-info summary::-webkit-details-marker { display: none; }
.qualification-info p { position: absolute; z-index: var(--z-toast); width: min(18rem, calc(100vw - 2rem)); margin: .35rem 0 0; padding: .65rem; border: 1px solid var(--outline); border-radius: .5rem; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.section-heading { justify-content: space-between; }
.league-invite-link { align-items: flex-start; }
.league-invite-output { width: min(34rem, 100%); }
.table-wrap { overflow-x: auto; border-radius: .85rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem; border-bottom: 1px solid var(--outline); text-align: left; vertical-align: top; }
tr.locked { opacity: .62; }
.mini-table { table-layout: fixed; }
.mini-table th, .mini-table td { padding: .4rem; overflow-wrap: anywhere; }
.qualified td:first-child { color: var(--accent); font-weight: 950; }
.third-place td:first-child { color: var(--accent2); font-weight: 950; }
.match-card { display: grid; gap: .35rem; padding: .85rem 0; border-bottom: 1px solid var(--outline); }
.match-card span, .match-meta { color: var(--muted); }
.bracket-card { display: grid; gap: .5rem; }
.event-list { display: grid; gap: .25rem; margin-top: .5rem; }
.ranking-list { padding-left: 1.5rem; }
.ranking-list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--outline); padding: .5rem 0; }
.status-pill, .match-card .status-pill, .match-meta .status-pill { display: inline-flex; align-items: center; width: max-content; border-radius: .25rem; padding: .25rem .55rem; color: var(--bg-deep); background: var(--accent); font-size: .68rem; font-weight: 1000; letter-spacing: .07em; white-space: nowrap; text-transform: uppercase; }
.status-live { background: var(--danger); color: var(--bg-deep); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--danger) 22%, transparent); }
.status-finished, .status-scheduled { background: var(--accent); color: var(--bg-deep); }
.status-postponed { background: var(--panel3); color: var(--text); }
.status-forecast { background: var(--accent2); color: var(--bg-deep); }

input, select, textarea, button, .button { max-width: 100%; border: 1px solid var(--outline); border-radius: .25rem; padding: .75rem 1rem; background: var(--panel2); color: var(--text); }
input[type="file"] { width: 100%; }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; padding: 0; accent-color: var(--accent); flex: 0 0 auto; }
input[type="color"] { min-height: 2.6rem; padding: .25rem; }
input:focus, select:focus, textarea:focus, button:focus-visible, .button:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-color: transparent; }
textarea { width: 100%; resize: vertical; font: inherit; }
button, .button { cursor: pointer; border: 0; background: var(--accent); color: var(--bg-deep); font-weight: 950; letter-spacing: .03em; display: inline-block; min-height: 2.75rem; text-align: center; }
.secondary { background: var(--panel2); color: var(--text); border: 1px solid var(--outline); }
.danger-button { background: var(--danger); color: var(--bg-deep); }
.primary { margin-top: 1rem; font-size: 1rem; }
.score { width: 4.5rem; text-align: center; }
.score-pair, .score-with-help, .setting-label, .check-label { display: inline-flex; gap: .5rem; align-items: center; }
.score-pair.wrap { flex-wrap: wrap; }
.winner-cell { min-width: 12rem; }
.fixture-review-panel { display: grid; gap: .25rem; margin-top: .45rem; max-width: 24rem; }
.fixture-review-panel .button-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.winner-preview { display: block; margin-top: .5rem; font-size: .85rem; }
.stack label, .settings-grid label { display: grid; gap: .5rem; }
.field { min-width: 0; }
.wide-field { grid-column: 1 / -1; }
.settings-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.form-section { display: grid; gap: 1rem; }
.form-section h2, .form-section h3 { margin-bottom: 0; }
.settings-page { max-width: 960px; }
.bonus-question { display: grid; gap: .5rem; border-top: 1px solid var(--outline); padding: 1rem 0; }
.checkbox-field { display: flex; gap: .5rem; align-items: flex-start; max-width: 34rem; font-size: .85rem; color: var(--muted); }
.field textarea { min-height: 5rem; resize: vertical; }
.notice, .error { padding: .8rem; border-radius: .75rem; }
.notice { border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--outline)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.error { border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--outline)); background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--text); }
.notice-fading { opacity: 0; transform: translateY(-.5rem); transition: opacity .5s ease, transform .5s ease; }
.badge { display: inline-grid; place-items: center; min-width: 1.5rem; min-height: 1.5rem; padding: 0 .5rem; border-radius: .25rem; background: var(--danger); color: var(--bg-deep); font-weight: 950; }
.league-badge { display: inline-flex; border-radius: .25rem; padding: .35rem .7rem; background: color-mix(in srgb, var(--league-primary, var(--accent)) 20%, var(--panel2)); color: var(--league-text, var(--text)); font-weight: 950; }
.money-nudge { border-color: color-mix(in srgb, var(--accent) 52%, var(--outline)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.money-status { --money-status-color: var(--fp-color-status-neutral); display: inline-flex; align-items: center; gap: .35rem; width: max-content; max-width: 100%; border: 1px solid color-mix(in srgb, var(--money-status-color) 62%, var(--outline)); border-radius: .25rem; padding: .25rem .55rem; color: color-mix(in srgb, var(--money-status-color) 80%, white); background: color-mix(in srgb, var(--money-status-color) 16%, var(--panel2)); font-size: .72rem; font-weight: 950; letter-spacing: .04em; line-height: 1.2; overflow-wrap: anywhere; text-transform: uppercase; }
.money-status--eligible, .money-status--prize { --money-status-color: var(--fp-color-status-success); }
.money-status--due { --money-status-color: var(--fp-color-status-warning); color: color-mix(in srgb, var(--money-status-color) 70%, white); }
.money-status--points { --money-status-color: var(--fp-color-status-info); }
.money-status--closed { --money-status-color: var(--fp-color-status-neutral); }
.money-status-icon, button .money-status-icon, .button .money-status-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1rem; height: 1rem; }
.money-status-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button .money-status-icon, .button .money-status-icon { margin-right: .35rem; color: currentColor; vertical-align: -.15rem; }
.ranking-row--money-paid { box-shadow: inset .25rem 0 0 var(--fp-color-status-success); }
.ranking-row--money-unpaid { box-shadow: inset .25rem 0 0 var(--fp-color-status-warning); }
.ranking-row--non-money { box-shadow: inset .25rem 0 0 var(--fp-color-status-info); }
.ranking-row--non-money .money-status, .ranking-row--money-unpaid .money-status { font-weight: 950; }
.prize-split-card { display: grid; gap: 1rem; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel)); }
.prize-split-hero { display: flex; align-items: start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.prize-split-hero h2, .prize-split-hero p { margin: 0; }
.prize-split-net { display: grid; gap: .15rem; min-width: 10rem; padding: 1rem; border-radius: .85rem; background: var(--bg-deep); text-align: right; }
.prize-split-net strong { color: var(--accent2); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; }
.prize-split-net span, .prize-split-metrics span, .prize-payout-grid span { color: var(--muted); font-size: .78rem; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.prize-split-metrics, .prize-payout-grid, .prize-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.prize-split-metrics article, .prize-payout-grid article { display: grid; gap: .25rem; padding: .85rem; border: 1px solid var(--outline); border-radius: .75rem; background: color-mix(in srgb, var(--panel2) 86%, transparent); }
.prize-split-metrics strong, .prize-payout-grid strong { color: var(--text); font-size: 1.45rem; line-height: 1; }
.prize-split-detail { padding-top: .5rem; border-top: 1px solid var(--outline); }
.prize-split-detail summary { cursor: pointer; color: var(--accent-bright); font-weight: 950; }
.prize-detail-grid p { display: flex; justify-content: space-between; gap: 1rem; margin: .5rem 0; border-bottom: 1px solid var(--outline); padding-bottom: .5rem; }

.ui-themed { background: radial-gradient(circle at 8% 0, color-mix(in srgb, var(--ui-primary) 18%, transparent), transparent 28rem), radial-gradient(circle at 95% 8%, color-mix(in srgb, var(--ui-accent) 14%, transparent), transparent 26rem), var(--ui-bg); color: var(--ui-text); }
.ui-themed .site-header, .ui-themed .command-rail, .ui-themed .mobile-command-nav { border-color: var(--ui-border); background: color-mix(in srgb, var(--ui-surface) 94%, transparent); }
.ui-themed .primary-nav.is-open, .ui-themed .dropdown-menu { background: var(--ui-surface); border-color: var(--ui-border); }
.ui-themed .hero, .ui-themed .panel, .ui-themed .card, .ui-themed .message-card, .ui-themed .api-status-card, .ui-themed .api-doc-grid section, .ui-themed .league-choice, .ui-themed .subnav, .ui-themed .info-dialog { border-color: var(--ui-border); background: linear-gradient(180deg, color-mix(in srgb, var(--ui-surface) 96%, transparent), color-mix(in srgb, var(--ui-bg) 92%, transparent)); color: var(--ui-text); }
.ui-themed a { color: var(--ui-accent); overflow-wrap: anywhere; }
.ui-themed a:hover, .ui-themed a:focus-visible { color: color-mix(in srgb, var(--ui-accent) 76%, white); }
.ui-themed small, .ui-themed .muted, .ui-themed .match-meta, .ui-themed .match-card span { color: var(--ui-muted); }
.ui-themed .brand-mark, .ui-themed button:not(.secondary):not(.danger-button):not(.nav-logout), .ui-themed .button:not(.secondary):not(.danger-button), .ui-themed .status-pill, .ui-themed .mobile-command-nav a[aria-current="page"], .ui-themed .nav-links a[aria-current="page"], .ui-themed .utility-link[aria-current="page"], .ui-themed .admin-menu summary[aria-current="page"], .ui-themed .admin-menu a[aria-current="page"], .ui-themed .rail-menu a[aria-current="page"] { background: var(--ui-primary); color: var(--ui-on-primary); }
.ui-themed .secondary, .ui-themed button.secondary, .ui-themed .button.secondary, .ui-themed .nav-logout, .ui-themed input, .ui-themed select, .ui-themed textarea { border-color: var(--ui-border); background: var(--ui-surface-strong); color: var(--ui-text); }
.ui-themed .badge, .ui-themed .theme-current-badge { background: var(--ui-secondary); color: var(--ui-on-secondary); }
.ui-themed input:focus, .ui-themed select:focus, .ui-themed textarea:focus, .ui-themed button:focus-visible, .ui-themed .button:focus-visible, .ui-themed a:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
.ui-themed .toast { border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-text); }

.theme-settings-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: stretch; }
.theme-guidance-card, .theme-recommendation-banner { min-width: 0; overflow: hidden; overflow-wrap: anywhere; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--outline)); border-radius: .9rem; padding: 1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel)); }
.theme-guidance-card h3, .theme-guidance-card p, .theme-recommendation-banner p { margin: 0; }
.theme-recommendation-banner { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 1rem; }
.theme-recommendation-banner form { margin: 0; }
.theme-recommendation-banner button { min-height: 2.25rem; padding: .45rem .8rem; }
.theme-source-note { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.theme-current-badge { display: inline-flex; width: max-content; max-width: 100%; align-items: center; padding: .35rem .65rem; border-radius: .25rem; background: var(--accent); color: var(--bg-deep); font-size: .78rem; font-weight: 950; text-transform: uppercase; letter-spacing: .06em; overflow-wrap: anywhere; }
.profile-hero { align-items: center; }
.theme-preview-collection { display: grid; gap: 1rem; }
.theme-choice-section { display: grid; gap: .65rem; }
.theme-choice-section h3 { color: var(--accent2); font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; }
.theme-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.theme-choice-card, .ui-themed button.theme-choice-card { display: grid; gap: .65rem; width: 100%; min-height: 10rem; padding: .85rem; border: 1px solid var(--preview-border); border-radius: var(--radius-card); background: linear-gradient(135deg, color-mix(in srgb, var(--preview-primary) 15%, var(--preview-surface)), var(--preview-bg)); color: var(--preview-text); overflow: hidden; text-align: left; letter-spacing: 0; }
.theme-preview-auto {--preview-primary:#23D18B;--preview-secondary:#142B32;--preview-accent:#F2C94C;--preview-bg:#0C1518;--preview-surface:#182124;--preview-text:#DAE4E8;--preview-muted:#BBCABE;--preview-border:#3C4A41;--preview-on-primary:#071013;}
.theme-preview-default {--preview-primary:#23D18B;--preview-secondary:#142B32;--preview-accent:#F2C94C;--preview-bg:#0C1518;--preview-surface:#182124;--preview-text:#DAE4E8;--preview-muted:#BBCABE;--preview-border:#3C4A41;--preview-on-primary:#071013;}
.theme-preview-country-nl {--preview-primary:#F58220;--preview-secondary:#21468B;--preview-accent:#FFFFFF;--preview-bg:#071826;--preview-surface:#102A3D;--preview-text:#F7FBFF;--preview-muted:#B4BBC2;--preview-border:#82562E;--preview-on-primary:#071013;}
.theme-preview-country-de {--preview-primary:#FFCE00;--preview-secondary:#DD0000;--preview-accent:#000000;--preview-bg:#111111;--preview-surface:#1F1F1F;--preview-text:#F7F7F7;--preview-muted:#B7B7B7;--preview-border:#8F7610;--preview-on-primary:#071013;}
.theme-preview-country-fr {--preview-primary:#0055A4;--preview-secondary:#EF4135;--preview-accent:#FFFFFF;--preview-bg:#07122A;--preview-surface:#111F45;--preview-text:#F7FAFF;--preview-muted:#B4B9C3;--preview-border:#083A74;--preview-on-primary:#FFFFFF;}
.theme-preview-country-pt {--preview-primary:#006600;--preview-secondary:#FF0000;--preview-accent:#FFD100;--preview-bg:#071A10;--preview-surface:#10281B;--preview-text:#F5FFF8;--preview-muted:#B2BFB7;--preview-border:#08470E;--preview-on-primary:#FFFFFF;}
.theme-preview-country-br {--preview-primary:#009C3B;--preview-secondary:#FFDF00;--preview-accent:#002776;--preview-bg:#06190D;--preview-surface:#0E2D18;--preview-text:#F7FFF4;--preview-muted:#B4BFB3;--preview-border:#07642A;--preview-on-primary:#071013;}
.theme-preview-country-be {--preview-primary:#FAE042;--preview-secondary:#ED2939;--preview-accent:#000000;--preview-bg:#111111;--preview-surface:#211718;--preview-text:#FFF9D6;--preview-muted:#BCB89F;--preview-border:#8E7C2D;--preview-on-primary:#071013;}
.theme-preview-country-es {--preview-primary:#AA151B;--preview-secondary:#F1BF00;--preview-accent:#7A0D12;--preview-bg:#160809;--preview-surface:#2A1113;--preview-text:#FFF7E3;--preview-muted:#BEB4A6;--preview-border:#6A1317;--preview-on-primary:#FFFFFF;}
.theme-preview-country-us {--preview-primary:#3C3B6E;--preview-secondary:#B22234;--preview-accent:#FFFFFF;--preview-bg:#070A1F;--preview-surface:#121642;--preview-text:#F8FAFF;--preview-muted:#B5B7C0;--preview-border:#272858;--preview-on-primary:#FFFFFF;}
.theme-preview-country-au {--preview-primary:#00843D;--preview-secondary:#FFCD00;--preview-accent:#00008B;--preview-bg:#061A10;--preview-surface:#102B1C;--preview-text:#F6FFF8;--preview-muted:#B3BFB7;--preview-border:#08582C;--preview-on-primary:#FFFFFF;}
.theme-preview-country-ar {--preview-primary:#75AADB;--preview-secondary:#FFFFFF;--preview-accent:#FCBF49;--preview-bg:#071827;--preview-surface:#102D42;--preview-text:#F7FBFF;--preview-muted:#B4BBC3;--preview-border:#426C8E;--preview-on-primary:#071013;}
.theme-preview-country-ma {--preview-primary:#C1272D;--preview-secondary:#006233;--preview-accent:#F7D117;--preview-bg:#180708;--preview-surface:#2B1113;--preview-text:#FFF7F5;--preview-muted:#BEB4B3;--preview-border:#761C20;--preview-on-primary:#FFFFFF;}
.theme-preview-country-gb-eng {--preview-primary:#CE1124;--preview-secondary:#FFFFFF;--preview-accent:#00247D;--preview-bg:#090B18;--preview-surface:#151A2E;--preview-text:#F8FAFF;--preview-muted:#B5B7BE;--preview-border:#721629;--preview-on-primary:#FFFFFF;}
.theme-preview-club-real-madrid {--preview-primary:#00529F;--preview-secondary:#FEBE10;--preview-accent:#FFFFFF;--preview-bg:#041425;--preview-surface:#09233D;--preview-text:#F8FAFC;--preview-muted:#B4BAC0;--preview-border:#043A6E;--preview-on-primary:#FFFFFF;}
.theme-preview-club-barcelona {--preview-primary:#A50044;--preview-secondary:#004D98;--preview-accent:#EDBB00;--preview-bg:#220614;--preview-surface:#380C24;--preview-text:#F8FAFC;--preview-muted:#BCB6BB;--preview-border:#6E0634;--preview-on-primary:#FFFFFF;}
.theme-preview-club-atletico-madrid {--preview-primary:#CB3524;--preview-secondary:#272E61;--preview-accent:#FFFFFF;--preview-bg:#290F0F;--preview-surface:#421B1B;--preview-text:#F8FAFC;--preview-muted:#BEB8BA;--preview-border:#862820;--preview-on-primary:#FFFFFF;}
.theme-preview-club-manchester-united {--preview-primary:#DA291C;--preview-secondary:#FBE122;--preview-accent:#000000;--preview-bg:#2B0D0D;--preview-surface:#461818;--preview-text:#F8FAFC;--preview-muted:#BFB8B9;--preview-border:#90201A;--preview-on-primary:#FFFFFF;}
.theme-preview-club-manchester-city {--preview-primary:#6CABDD;--preview-secondary:#1C2C5B;--preview-accent:#FFC659;--preview-bg:#182530;--preview-surface:#283C4E;--preview-text:#F8FAFC;--preview-muted:#B9BEC3;--preview-border:#4A7496;--preview-on-primary:#071013;}
.theme-preview-club-liverpool {--preview-primary:#C8102E;--preview-secondary:#00B2A9;--preview-accent:#F6EB61;--preview-bg:#280910;--preview-surface:#41111D;--preview-text:#F8FAFC;--preview-muted:#BEB7BA;--preview-border:#841026;--preview-on-primary:#FFFFFF;}
.theme-preview-club-arsenal {--preview-primary:#EF0107;--preview-secondary:#063672;--preview-accent:#F5D063;--preview-bg:#2F0609;--preview-surface:#4C0D13;--preview-text:#F8FAFC;--preview-muted:#C0B6B8;--preview-border:#9E070D;--preview-on-primary:#FFFFFF;}
.theme-preview-club-chelsea {--preview-primary:#034694;--preview-secondary:#DBA111;--preview-accent:#FFFFFF;--preview-bg:#051223;--preview-surface:#0A203A;--preview-text:#F8FAFC;--preview-muted:#B4B9BF;--preview-border:#063367;--preview-on-primary:#FFFFFF;}
.theme-preview-club-tottenham {--preview-primary:#132257;--preview-secondary:#FFFFFF;--preview-accent:#C8102E;--preview-bg:#080C18;--preview-surface:#0F1629;--preview-text:#F8FAFC;--preview-muted:#B5B7BC;--preview-border:#111C40;--preview-on-primary:#FFFFFF;}
.theme-preview-club-bayern-munich {--preview-primary:#DC052D;--preview-secondary:#0066B2;--preview-accent:#FFFFFF;--preview-bg:#2C0710;--preview-surface:#470E1D;--preview-text:#F8FAFC;--preview-muted:#BFB6BA;--preview-border:#920A25;--preview-on-primary:#FFFFFF;}
.theme-preview-club-borussia-dortmund {--preview-primary:#FDE100;--preview-secondary:#000000;--preview-accent:#FFFFFF;--preview-bg:#322E08;--preview-surface:#504B11;--preview-text:#F8FAFC;--preview-muted:#C1C1B8;--preview-border:#A69608;--preview-on-primary:#071013;}
.theme-preview-club-psg {--preview-primary:#004170;--preview-secondary:#DA291C;--preview-accent:#FFFFFF;--preview-bg:#04111C;--preview-surface:#091E30;--preview-text:#F8FAFC;--preview-muted:#B4B9BD;--preview-border:#043050;--preview-on-primary:#FFFFFF;}
.theme-preview-club-marseille {--preview-primary:#009DDF;--preview-secondary:#FFFFFF;--preview-accent:#D4AF37;--preview-bg:#042230;--preview-surface:#09384F;--preview-text:#F8FAFC;--preview-muted:#B4BEC3;--preview-border:#046A97;--preview-on-primary:#071013;}
.theme-preview-club-juventus {--preview-primary:#000000;--preview-secondary:#FFFFFF;--preview-accent:#FCD116;--preview-bg:#040608;--preview-surface:#090C11;--preview-text:#F8FAFC;--preview-muted:#B4B6B8;--preview-border:#040608;--preview-on-primary:#FFFFFF;}
.theme-preview-club-inter {--preview-primary:#0057A8;--preview-secondary:#000000;--preview-accent:#FFFFFF;--preview-bg:#041526;--preview-surface:#092540;--preview-text:#F8FAFC;--preview-muted:#B4BAC0;--preview-border:#043E74;--preview-on-primary:#FFFFFF;}
.theme-preview-club-ac-milan {--preview-primary:#FB090B;--preview-secondary:#000000;--preview-accent:#FFFFFF;--preview-bg:#31070A;--preview-surface:#500F14;--preview-text:#F8FAFC;--preview-muted:#C0B6B8;--preview-border:#A60C10;--preview-on-primary:#071013;}
.theme-preview-club-napoli {--preview-primary:#12A3DD;--preview-secondary:#FFFFFF;--preview-accent:#002F6C;--preview-bg:#072330;--preview-surface:#0E3A4E;--preview-text:#F8FAFC;--preview-muted:#B5BEC3;--preview-border:#106E96;--preview-on-primary:#071013;}
.theme-preview-club-roma {--preview-primary:#8E1F2F;--preview-secondary:#F6A800;--preview-accent:#FFFFFF;--preview-bg:#1E0B11;--preview-surface:#31151E;--preview-text:#F8FAFC;--preview-muted:#BBB7BA;--preview-border:#601A26;--preview-on-primary:#FFFFFF;}
.theme-preview-club-ajax {--preview-primary:#D2122E;--preview-secondary:#FFFFFF;--preview-accent:#000000;--preview-bg:#2A0910;--preview-surface:#44111D;--preview-text:#F8FAFC;--preview-muted:#BEB7BA;--preview-border:#8B1226;--preview-on-primary:#FFFFFF;}
.theme-preview-club-psv {--preview-primary:#EE1C25;--preview-secondary:#FFFFFF;--preview-accent:#000000;--preview-bg:#2F0B0F;--preview-surface:#4C141B;--preview-text:#F8FAFC;--preview-muted:#C0B7BA;--preview-border:#9D1820;--preview-on-primary:#071013;}
.theme-preview-club-feyenoord {--preview-primary:#E30613;--preview-secondary:#FFFFFF;--preview-accent:#000000;--preview-bg:#2D070C;--preview-surface:#490E16;--preview-text:#F8FAFC;--preview-muted:#BFB6B9;--preview-border:#960A14;--preview-on-primary:#FFFFFF;}
.theme-preview-club-benfica {--preview-primary:#E83030;--preview-secondary:#FFFFFF;--preview-accent:#F6C800;--preview-bg:#2E0E11;--preview-surface:#4A1A1E;--preview-text:#F8FAFC;--preview-muted:#BFB8BA;--preview-border:#992527;--preview-on-primary:#071013;}
.theme-preview-club-porto {--preview-primary:#005BBB;--preview-secondary:#FFFFFF;--preview-accent:#D6A100;--preview-bg:#04162A;--preview-surface:#092645;--preview-text:#F8FAFC;--preview-muted:#B4BAC1;--preview-border:#044080;--preview-on-primary:#FFFFFF;}
.theme-preview-club-sporting-cp {--preview-primary:#00843D;--preview-secondary:#FFFFFF;--preview-accent:#000000;--preview-bg:#041E13;--preview-surface:#093122;--preview-text:#F8FAFC;--preview-muted:#B4BCBB;--preview-border:#045A30;--preview-on-primary:#FFFFFF;}
.theme-preview-club-celtic {--preview-primary:#009A44;--preview-secondary:#FFFFFF;--preview-accent:#000000;--preview-bg:#042114;--preview-surface:#093724;--preview-text:#F8FAFC;--preview-muted:#B4BDBB;--preview-border:#046834;--preview-on-primary:#071013;}
.theme-preview-club-rangers {--preview-primary:#0033A0;--preview-secondary:#C8102E;--preview-accent:#FFFFFF;--preview-bg:#040F25;--preview-surface:#091B3D;--preview-text:#F8FAFC;--preview-muted:#B4B8C0;--preview-border:#04276E;--preview-on-primary:#FFFFFF;}
.theme-preview-club-galatasaray {--preview-primary:#A32638;--preview-secondary:#FDB912;--preview-accent:#FFFFFF;--preview-bg:#210D12;--preview-surface:#371720;--preview-text:#F8FAFC;--preview-muted:#BCB8BA;--preview-border:#6D1E2C;--preview-on-primary:#FFFFFF;}
.theme-preview-club-fenerbahce {--preview-primary:#002D72;--preview-secondary:#FFED00;--preview-accent:#FFFFFF;--preview-bg:#040E1D;--preview-surface:#091930;--preview-text:#F8FAFC;--preview-muted:#B4B8BE;--preview-border:#042351;--preview-on-primary:#FFFFFF;}
.theme-preview-club-besiktas {--preview-primary:#000000;--preview-secondary:#FFFFFF;--preview-accent:#E30613;--preview-bg:#040608;--preview-surface:#090C11;--preview-text:#F8FAFC;--preview-muted:#B4B6B8;--preview-border:#040608;--preview-on-primary:#FFFFFF;}
.theme-preview-club-al-hilal {--preview-primary:#005BAC;--preview-secondary:#FFFFFF;--preview-accent:#D6A100;--preview-bg:#041627;--preview-surface:#092641;--preview-text:#F8FAFC;--preview-muted:#B4BAC0;--preview-border:#044076;--preview-on-primary:#FFFFFF;}
.theme-preview-club-al-nassr {--preview-primary:#F7D000;--preview-secondary:#0057B8;--preview-accent:#FFFFFF;--preview-bg:#312B08;--preview-surface:#4F4611;--preview-text:#F8FAFC;--preview-muted:#C0C0B8;--preview-border:#A38B08;--preview-on-primary:#071013;}
.theme-preview-club-flamengo {--preview-primary:#C8102E;--preview-secondary:#000000;--preview-accent:#FFFFFF;--preview-bg:#280910;--preview-surface:#41111D;--preview-text:#F8FAFC;--preview-muted:#BEB7BA;--preview-border:#841026;--preview-on-primary:#FFFFFF;}
.theme-preview-club-palmeiras {--preview-primary:#006437;--preview-secondary:#FFFFFF;--preview-accent:#D6A100;--preview-bg:#041812;--preview-surface:#092820;--preview-text:#F8FAFC;--preview-muted:#B4BBBA;--preview-border:#04462C;--preview-on-primary:#FFFFFF;}
.theme-preview-club-corinthians {--preview-primary:#000000;--preview-secondary:#FFFFFF;--preview-accent:#C0C0C0;--preview-bg:#040608;--preview-surface:#090C11;--preview-text:#F8FAFC;--preview-muted:#B4B6B8;--preview-border:#040608;--preview-on-primary:#FFFFFF;}
.theme-preview-club-boca-juniors {--preview-primary:#003391;--preview-secondary:#F4D35E;--preview-accent:#FFFFFF;--preview-bg:#040F22;--preview-surface:#091B39;--preview-text:#F8FAFC;--preview-muted:#B4B8BF;--preview-border:#042765;--preview-on-primary:#FFFFFF;}
.theme-preview-club-river-plate {--preview-primary:#E2231A;--preview-secondary:#FFFFFF;--preview-accent:#000000;--preview-bg:#2D0C0D;--preview-surface:#491618;--preview-text:#F8FAFC;--preview-muted:#BFB7B9;--preview-border:#961C19;--preview-on-primary:#FFFFFF;}
.theme-preview-club-inter-miami {--preview-primary:#F7B5CD;--preview-secondary:#231F20;--preview-accent:#FFFFFF;--preview-bg:#31262D;--preview-surface:#4F3F4A;--preview-text:#F8FAFC;--preview-muted:#C0BFC2;--preview-border:#A37A8C;--preview-on-primary:#071013;}
.theme-preview-club-lafc {--preview-primary:#000000;--preview-secondary:#C39E6D;--preview-accent:#FFFFFF;--preview-bg:#040608;--preview-surface:#090C11;--preview-text:#F8FAFC;--preview-muted:#B4B6B8;--preview-border:#040608;--preview-on-primary:#FFFFFF;}
.theme-preview-club-club-america {--preview-primary:#FEE500;--preview-secondary:#003DA5;--preview-accent:#C8102E;--preview-bg:#322F08;--preview-surface:#504C11;--preview-text:#F8FAFC;--preview-muted:#C1C1B8;--preview-border:#A79808;--preview-on-primary:#071013;}
.theme-preview-club-al-ahly {--preview-primary:#C8102E;--preview-secondary:#FFFFFF;--preview-accent:#000000;--preview-bg:#280910;--preview-surface:#41111D;--preview-text:#F8FAFC;--preview-muted:#BEB7BA;--preview-border:#841026;--preview-on-primary:#FFFFFF;}
.theme-preview-club-zamalek {--preview-primary:#FFFFFF;--preview-secondary:#DA291C;--preview-accent:#000000;--preview-bg:#323436;--preview-surface:#515458;--preview-text:#F8FAFC;--preview-muted:#C1C3C5;--preview-border:#A8AAAC;--preview-on-primary:#071013;}
.theme-preview-club-wydad {--preview-primary:#E30613;--preview-secondary:#FFFFFF;--preview-accent:#000000;--preview-bg:#2D070C;--preview-surface:#490E16;--preview-text:#F8FAFC;--preview-muted:#BFB6B9;--preview-border:#960A14;--preview-on-primary:#FFFFFF;}
.theme-choice-card.is-selected { box-shadow: 0 0 0 2px var(--accent), 0 0 2rem rgba(74,222,128,.18); }
.theme-choice-top { display: flex; justify-content: space-between; gap: .75rem; align-items: start; }
.theme-choice-top strong { color: var(--preview-text); line-height: 1.2; }
.theme-choice-top span, .theme-choice-card em { color: var(--preview-muted); font-size: .78rem; font-style: normal; font-weight: 850; text-transform: uppercase; }
.theme-swatch-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .35rem; }
.theme-swatch-row i { display: block; width: 100%; min-height: 1.1rem; border: 1px solid rgba(255,255,255,.18); border-radius: .2rem; }
.theme-swatch-row i:nth-child(1) { background: var(--preview-primary); }
.theme-swatch-row i:nth-child(2) { background: var(--preview-secondary); }
.theme-swatch-row i:nth-child(3) { background: var(--preview-accent); }
.theme-choice-sample { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .5rem; border: 1px solid color-mix(in srgb, var(--preview-border) 75%, transparent); border-radius: .25rem; background: color-mix(in srgb, var(--preview-surface) 78%, transparent); }
.theme-choice-sample b { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .2rem; background: var(--preview-primary); color: var(--preview-on-primary); }
.theme-choice-selected { justify-self: start; padding: .25rem .45rem; border-radius: .2rem; background: var(--preview-primary); color: var(--preview-on-primary); font-size: .72rem; font-weight: 950; text-transform: uppercase; }

.admin-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: start; width: min(1440px, calc(100% - 2rem)); margin: 2rem auto; }
.admin-layout .container { width: 100%; margin: 0; }
.admin-main { overflow-x: clip; }
.admin-sidebar { position: sticky; top: 5rem; z-index: var(--z-admin); display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--outline); border-radius: var(--radius-card); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--panel); box-shadow: var(--shadow); }
.admin-sidebar strong { color: var(--text); text-transform: uppercase; letter-spacing: .08em; }
.admin-menu-more { display: grid; gap: .35rem; min-width: 0; }
.admin-menu summary { cursor: pointer; list-style: none; }
.admin-menu summary::-webkit-details-marker { display: none; }
.admin-menu summary::after { content: "+"; font-weight: 950; }
.admin-menu-more[open] summary::after { content: "-"; }
.admin-menu-subgrid { display: grid; gap: .35rem; margin-left: .65rem; padding: .35rem 0 .35rem .65rem; border-left: 1px solid var(--outline); }
.admin-menu-label { margin-top: .4rem; color: var(--accent2); font-size: .68rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.admin-grid-panel, .api-panel { max-width: none; }
.admin-page-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--outline); border-radius: var(--radius-card); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), color-mix(in srgb, var(--accent2) 5%, var(--panel))); }
.admin-page-head h1, .admin-page-head p { margin-bottom: .35rem; }
.admin-page-head .button { flex: 0 0 auto; }
.admin-grid-header { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: .75rem; }
.admin-grid-header h2, .admin-grid-header p { margin: 0 0 .5rem; }
.admin-grid-filters label { display: grid; gap: .5rem; min-width: 14rem; }
.admin-grid th { position: sticky; top: 0; z-index: var(--z-base); background: color-mix(in srgb, var(--panel) 96%, black); }
.admin-grid td { min-width: 9rem; }
.admin-grid-panel > table,
#prediction-form .table-wrap > table { min-width: 1120px; }
#prediction-form .table-wrap td:nth-child(5),
#prediction-form .table-wrap th:nth-child(5) { min-width: 14rem; }
.admin-match-table-wrap { overflow-x: hidden; border: 1px solid var(--outline); background: color-mix(in srgb, var(--panel) 96%, transparent); }
.match-admin-table { display: block; font-size: .92rem; }
.match-admin-table thead { display: none; }
.match-admin-table tbody { display: grid; gap: .75rem; }
.match-admin-table tbody tr { display: grid; grid-template-columns: 4rem minmax(12rem, 1.25fr) minmax(10rem, 1fr) minmax(8rem, .8fr) minmax(11rem, 1fr); gap: .75rem; align-items: start; padding: .85rem; border: 1px solid var(--outline); border-radius: var(--radius-card); background: color-mix(in srgb, var(--accent) 3%, transparent); }
.match-admin-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.match-admin-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.match-admin-table td, .match-admin-table th { vertical-align: middle; }
.match-admin-table td { display: grid; gap: .3rem; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
.match-admin-table td::before { content: attr(data-label); color: var(--accent2); font-size: .7rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.match-admin-table td[data-label="Match"] { grid-column: 1 / span 2; }
.match-admin-table td[data-label="Knockout"] { grid-column: 1 / -1; }
.match-admin-table td[data-label="Status"] { grid-column: 5; }
.match-admin-table .match-line { display: flex; gap: .45rem; align-items: center; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; }
.match-admin-table .match-line strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.match-admin-table .match-versus { flex: 0 0 auto; }
.match-admin-table td[colspan] { display: block; grid-column: 1 / -1; }
.match-admin-table td[colspan]::before { content: none; }
.match-admin-table .score-pair { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.match-admin-table td[data-label="Score"] .score-pair { flex-wrap: nowrap; }
.admin-grid td input:not([type="checkbox"]):not([type="radio"]), .admin-grid td select { width: 100%; margin-bottom: .5rem; }
.admin-grid.match-admin-table td input.score { width: 4.5rem; max-width: 100%; margin-bottom: 0; }
.admin-grid.match-admin-table td select { margin-bottom: 0; }
.admin-grid-add-row { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.admin-grid-readonly { display: grid; gap: .25rem; }
.admin-grid-readonly small { color: var(--muted); }
.admin-grid tr.is-editing { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.compact-form input { min-width: 7rem; }
.home-page-head { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), color-mix(in srgb, var(--accent2) 5%, var(--panel))); }
.admin-terminal-hero { position: relative; overflow: hidden; min-height: 12rem; border-color: color-mix(in srgb, var(--accent) 28%, var(--outline)); }
.admin-terminal-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.025) 8px); opacity: .7; }
.admin-terminal-hero > * { position: relative; z-index: 1; }
.admin-hero-actions, .admin-console-toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.admin-ops-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.admin-ops-strip article { display: grid; gap: .25rem; padding: .9rem; border: 1px solid var(--outline); border-radius: var(--radius-card); background: color-mix(in srgb, var(--panel2) 74%, transparent); }
.admin-ops-strip span, .admin-console-toolbar .eyebrow { color: var(--accent2); font-size: .72rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.admin-ops-strip strong { color: var(--text); font-size: 2rem; line-height: 1; }
.admin-score-console { display: grid; gap: 1rem; }
.admin-console-toolbar { justify-content: space-between; padding: 1rem; border: 1px solid var(--outline); border-radius: var(--radius-card); background: var(--panel); }
.admin-console-toolbar h2, .admin-console-toolbar p { margin: 0; }
.admin-empty-state { display: grid; gap: .35rem; padding: 1rem; border: 1px dashed color-mix(in srgb, var(--accent2) 45%, var(--outline)); border-radius: var(--radius-card); background: rgba(250,204,21,.06); }
.admin-empty-state h2, .admin-empty-state p { margin: 0; }
.toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: var(--z-toast); display: grid; gap: .75rem; width: min(24rem, calc(100% - 2rem)); pointer-events: none; }
.toast { display: grid; gap: .5rem; max-height: min(28rem, 60vh); overflow: auto; overflow-wrap: anywhere; padding: 1rem; border: 1px solid var(--outline); border-radius: .85rem; background: var(--panel); color: var(--text); box-shadow: var(--shadow); pointer-events: auto; }
.toast p { margin: 0; }
.toast-success { border-color: color-mix(in srgb, var(--accent) 55%, var(--outline)); }
.toast-warning { border-color: color-mix(in srgb, var(--accent2) 60%, var(--outline)); }
.toast-info { border-color: color-mix(in srgb, var(--muted) 40%, var(--outline)); }
.toast-actions form { margin: 0; }
.toast .button, .toast button { padding: .5rem .75rem; }
.toast-close { justify-self: end; background: var(--panel2); color: var(--text); }
.toast[data-toast-href] { cursor: pointer; }
.toast[data-toast-href]:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.toast-fading { opacity: 0; transform: translateY(.5rem); transition: opacity .2s ease, transform .2s ease; }
.timezone-banner { display: flex; gap: .75rem; align-items: center; justify-content: space-between; width: min(var(--fp-content-max), calc(100% - 2rem)); margin: .75rem auto 0; padding: .65rem .85rem; border: 1px solid color-mix(in srgb, var(--muted) 34%, var(--outline)); border-radius: var(--radius-card); background: color-mix(in srgb, var(--panel) 94%, transparent); color: var(--muted); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.16); }
.timezone-banner p { margin: 0; }
.timezone-banner .toast-close { flex: 0 0 auto; }
.command-layout .timezone-banner { width: min(var(--workspace-content-max), calc(100% - 2rem)); margin-right: auto; margin-left: auto; }

.auth-layout .page-shell, .auth-layout .container { display: flex; flex: 1 0 auto; }
.auth-layout .container { width: 100%; margin: 0; }
.auth-shell { display: grid; flex: 1 1 auto; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(24rem, .82fr); min-height: 0; }
.auth-brand-panel { position: relative; display: grid; align-content: end; gap: 1rem; min-width: 0; overflow: hidden; min-height: 36rem; padding: clamp(2rem, 5vw, 4rem); border-right: 1px solid var(--outline); background: linear-gradient(145deg, var(--panel3), var(--bg-deep)); }
.auth-brand-panel::before { content: none; }
.auth-brand-panel > * { position: relative; z-index: 1; }
.auth-brand-panel h1 { max-width: 10ch; font-size: clamp(3rem, 7vw, 6rem); }
.auth-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 32rem; }
.auth-metric { padding: 1rem; border: 1px solid var(--outline); border-radius: .75rem; background: color-mix(in srgb, var(--panel) 72%, transparent); backdrop-filter: blur(12px); }
.auth-metric strong { display: block; font-size: 2rem; color: var(--accent2); }
.auth-form-panel { display: grid; min-width: 0; align-content: center; justify-items: center; padding: clamp(1.25rem, 4vw, 4rem); background: var(--bg); }
.auth-panel { width: min(28rem, 100%); margin: 0; }
.auth-panel form, .auth-panel label { min-width: 0; }
.auth-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .auth-panel select, .auth-panel textarea, .auth-panel button { width: 100%; }
.auth-panel select { overflow: hidden; text-overflow: ellipsis; }
.auth-panel .check-label { align-items: flex-start; min-width: 0; }
.auth-panel .check-label .money-status { flex: 1 1 auto; width: auto; min-width: 0; }
.auth-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--outline); margin-bottom: 1rem; }
.auth-tabs a, .auth-tabs strong { padding-bottom: .75rem; color: var(--muted); font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.auth-tabs strong { color: var(--accent); border-bottom: 2px solid var(--accent); }
.secure-note { display: inline-flex; gap: .5rem; align-items: center; color: var(--muted); font-size: .82rem; font-weight: 850; }

.info-dialog { width: min(560px, calc(100% - 2rem)); border: 1px solid var(--outline); border-radius: .85rem; padding: 1.5rem; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.league-dialog { width: min(920px, calc(100% - 2rem)); }
.info-dialog::backdrop { background: rgba(0, 0, 0, .62); }
.dialog-close { float: right; padding: .5rem .75rem; }
.dialog-form { clear: both; }
.dialog-actions { margin-top: 1rem; }
.detail-list { padding-left: 1.5rem; color: var(--muted); }
.subnav { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding: .75rem; border: 1px solid var(--outline); border-radius: var(--radius-card); margin: 1rem 0; background: var(--panel); }
.subnav a { color: var(--muted); }
.subnav a:hover, .subnav a:focus-visible { color: var(--accent-bright); }
.message-card { display: grid; gap: .5rem; padding: 1rem; background: var(--panel2); }
.message-card.unread { border-color: var(--accent2); }
.message-card header { display: flex; gap: .75rem; justify-content: space-between; flex-wrap: wrap; }
.shout { margin: .5rem 0; padding: .75rem; background: var(--panel); border: 1px solid var(--outline); border-radius: .75rem; }
.emoji-bar button { min-width: 2.5rem; padding: .5rem; background: var(--panel2); color: var(--text); border: 1px solid var(--outline); }
.clickable-card { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.clickable-card:hover, .clickable-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.team-card > img, .venue-card > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-card); margin-bottom: .75rem; background: var(--bg-deep); }
.card-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: auto; }
.card-actions .button, .card-actions button { min-height: 2.5rem; }
.flag { width: 1.5rem; height: 1rem; object-fit: cover; margin-right: .5rem; border-radius: .25rem; vertical-align: -.25rem; }
.team-detail-hero, .venue-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) 1.5fr; gap: 1.25rem; align-items: center; }
.team-detail-hero > img, .venue-detail-hero > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-card); background: var(--bg-deep); }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.roster-member-card { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .85rem; border: 1px solid var(--outline); border-radius: .75rem; background: var(--panel2); }
.roster-member-card img, .player-profile > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .65rem; background: var(--bg-deep); }
.roster-member-card h3 { margin: 0 0 .25rem; font-size: 1rem; }
.squad-number { color: var(--accent); margin-right: .25rem; }
.roster-position-section { margin-top: .75rem; }
.player-profile { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.avatar-preview { width: 7rem; height: 7rem; object-fit: cover; border-radius: 999px; border: 2px solid var(--accent); background: var(--panel2); }

.group-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.group-table { min-width: 0; overflow: hidden; }
.group-table h3 { margin: 0 0 .5rem; }
.repeat-row { display: grid; grid-template-columns: minmax(9rem, 1.2fr) minmax(8rem, .8fr) repeat(2, minmax(7rem, .8fr)) auto; gap: .5rem; align-items: end; }
.choice-grid { align-items: stretch; }
.league-choice { grid-template-columns: minmax(0, 1fr) 9rem; padding: .75rem; background: var(--panel2); }
.league-choice span { display: flex; gap: .5rem; align-items: center; min-width: 0; }
.theme-preview { display: grid; gap: .5rem; padding: 1rem; color: var(--league-text); border: 1px solid var(--league-border, var(--league-primary)); border-radius: var(--league-radius, 1rem); background: linear-gradient(135deg, var(--league-surface, var(--league-secondary)), var(--league-bg, var(--bg))); }
.theme-preview strong { color: var(--league-accent); }
.theme-preview small { color: var(--league-muted); }
.theme-preview button { justify-self: start; background: var(--league-primary); color: var(--league-bg); }
.help-tip { position: relative; display: inline-block; }
.help-tip summary { display: inline-grid; place-items: center; min-width: 1.5rem; min-height: 1.5rem; border-radius: 999px; background: var(--panel2); color: var(--accent2); cursor: pointer; font-weight: 950; list-style: none; }
.help-tip summary::-webkit-details-marker { display: none; }
.help-tip span { position: absolute; z-index: var(--z-dropdown); top: 2rem; left: 0; width: min(18rem, 80vw); padding: .75rem; border: 1px solid var(--outline); border-radius: .75rem; background: var(--bg-deep); color: var(--text); box-shadow: var(--shadow); }
.score-with-help .help-tip span { left: auto; right: 0; width: min(24rem, 80vw); }
.bars { display: grid; gap: .75rem; }
.bar-row { display: grid; grid-template-columns: 12rem 1fr 4rem; gap: 1rem; align-items: center; }
meter { width: 100%; height: 1rem; accent-color: var(--accent); }
.readable { max-width: 760px; line-height: 1.7; }
.code-box { max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; background: var(--bg-deep); border: 1px solid var(--outline); border-radius: .75rem; padding: 1rem; }
.api-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, .32fr); gap: 1rem; align-items: end; }
.api-workbench { display: grid; grid-template-columns: minmax(16rem, .75fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.api-sidebar { position: sticky; top: 6rem; }
.api-operation-list { display: grid; gap: .5rem; max-height: 68vh; overflow: auto; padding-right: .25rem; }
.api-operation-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; width: 100%; padding: .75rem; border: 1px solid var(--outline); background: var(--panel); color: var(--text); text-align: left; }
.api-operation-card.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.api-operation-card strong, .api-operation-card small { display: block; }
.api-badges { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.api-badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .25rem .5rem; border: 1px solid var(--outline); border-radius: 999px; background: var(--bg-deep); color: var(--muted); font-size: .8rem; font-weight: 950; }
.api-method-get, .api-method-patch { color: var(--accent); }
.api-method-post, .api-required { color: var(--accent2); }
.api-doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.api-field-table { margin-top: .5rem; }
.api-result { min-height: 10rem; }