:root {
    color-scheme: dark;
    --bg:#0f172a;
    --panel:#111827;
    --panel-strong:#0b1220;
    --surface:rgba(15,23,42,.88);
    --surface-raised:rgba(15,23,42,.96);
    --surface-glass:rgba(2,6,23,.82);
    --muted:#94a3b8;
    --muted-strong:#cbd5e1;
    --text:#e5e7eb;
    --heading:#f8fafc;
    --accent:#22c55e;
    --accent-2:#60a5fa;
    --line:#243044;
    --line-soft:rgba(148,163,184,.18);
    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;
    --gold:#fbbf24;
    --radius-card:22px;
    --radius-pill:999px;
    --shadow-card:0 18px 55px rgba(0,0,0,.22);
    --shadow-raised:0 24px 80px rgba(0,0,0,.35);
    --space-1:.35rem;
    --space-2:.55rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.25rem;
    --space-6:1.5rem;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    margin:0;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left,rgba(34,197,94,.18),transparent 30rem),
        radial-gradient(circle at top right,rgba(96,165,250,.16),transparent 28rem),
        linear-gradient(135deg,#1e293b,#020617 52%);
    color:var(--text);
    min-height:100vh;
}
body::before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:linear-gradient(rgba(148,163,184,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.04) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 70%);
}
a { color:#93c5fd; text-decoration:none; }
a:hover { text-decoration:underline; }
a, button, input, select, summary, .team-choice, .prediction-choice { transition:border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.team-choice, .prediction-choice, .week-picker-link, .button { touch-action:manipulation; }
:where(a, button, input, select, summary, .team-choice):focus-visible { outline:3px solid rgba(96,165,250,.8); outline-offset:3px; box-shadow:0 0 0 6px rgba(37,99,235,.22); }
.team-choice:has(.choice-radio:focus-visible), .prediction-choice:has(.choice-radio:focus-visible) { outline:3px solid rgba(96,165,250,.85); outline-offset:3px; box-shadow:0 0 0 6px rgba(37,99,235,.22), 0 16px 36px rgba(0,0,0,.22); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:1rem; top:0; z-index:100; transform:translateY(-140%); padding:.7rem 1rem; border-radius:0 0 14px 14px; background:#bfdbfe; color:#0f172a; font-weight:950; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.skip-link:focus-visible { transform:translateY(0); outline:3px solid #fbbf24; outline-offset:2px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1rem,4vw,3rem); border-bottom:1px solid var(--line); background:var(--surface-glass); position:sticky; top:0; backdrop-filter:blur(10px); z-index:10; }
.brand { display:flex; align-items:baseline; gap:.35rem; color:white; font-weight:800; letter-spacing:-.04em; font-size:1.25rem; }
.brand:hover { text-decoration:none; color:#f8fafc; }
.brand-name { text-shadow:0 0 26px rgba(34,197,94,.12); }
.brand-tagline { color:#cbd5e1; font-size:.88rem; font-weight:700; letter-spacing:0; }
.site-nav { display:flex; align-items:center; gap:1rem; }
.nav-link { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:.55rem .9rem; border:1px solid transparent; border-radius:999px; color:#bfdbfe; font-weight:800; }
.nav-link:hover { text-decoration:none; border-color:#334155; background:rgba(148,163,184,.10); color:#dbeafe; }
.user-menu { position:relative; }
.user-menu-trigger { display:inline-flex; align-items:center; gap:.6rem; min-height:44px; padding:.28rem .55rem .28rem .32rem; border:1px solid #334155; border-radius:999px; background:rgba(15,23,42,.92); color:#f8fafc; font-weight:850; cursor:pointer; list-style:none; list-style-type:none; -webkit-appearance:none; appearance:none; box-shadow:0 8px 24px rgba(0,0,0,.22); }
.user-menu-trigger:hover, .user-menu[open] .user-menu-trigger { border-color:#22c55e; background:rgba(30,41,59,.96); box-shadow:0 12px 34px rgba(34,197,94,.16), 0 12px 34px rgba(0,0,0,.32); text-decoration:none; transform:translateY(-1px); }
.user-menu summary::-webkit-details-marker { display:none; }
.user-menu summary::marker { content:""; display:none; }
.user-avatar { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; background:linear-gradient(135deg, #22c55e, #86efac); color:#052e16; font-size:.95rem; font-weight:950; box-shadow:inset 0 -2px 0 rgba(0,0,0,.16); }
.user-menu-name { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-menu-chevron { display:inline-block; width:.5rem; height:.5rem; margin-right:.2rem; border-right:2px solid #bbf7d0; border-bottom:2px solid #bbf7d0; transform:rotate(45deg) translateY(-1px); transition:transform .16s ease; }
.user-menu[open] .user-menu-chevron { transform:rotate(225deg) translate(-1px,-1px); }
.user-menu-panel { position:absolute; right:0; top:calc(100% + .7rem); width:280px; padding:.65rem; border:1px solid rgba(148,163,184,.28); border-radius:18px; background:rgba(15,23,42,.98); box-shadow:0 24px 80px rgba(0,0,0,.58); backdrop-filter:blur(14px); z-index:30; }
.user-menu-panel::before { content:""; position:absolute; right:1.25rem; top:-7px; width:12px; height:12px; transform:rotate(45deg); background:rgba(15,23,42,.98); border-left:1px solid rgba(148,163,184,.28); border-top:1px solid rgba(148,163,184,.28); }
.user-menu-heading { display:flex; flex-direction:column; gap:.2rem; padding:.8rem .85rem .85rem; margin-bottom:.4rem; border-bottom:1px solid rgba(148,163,184,.18); color:#e5e7eb; }
.user-menu-heading-label { color:#22c55e; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.14em; }
.user-menu-heading strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1rem; }
.user-menu-item, .menu-button { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:.75rem; width:100%; min-height:58px; padding:.7rem .8rem; border-radius:14px; color:#e5e7eb; text-align:left; }
.user-menu-item:hover, .menu-button:hover { background:rgba(148,163,184,.12); text-decoration:none; }
.menu-item-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:12px; background:rgba(59,130,246,.16); color:#bfdbfe; font-size:.8rem; font-weight:950; }
.menu-item-copy { display:flex; flex-direction:column; gap:.12rem; line-height:1.15; }
.menu-item-copy strong { font-size:.95rem; }
.menu-item-copy small { color:var(--muted); font-size:.78rem; font-weight:700; }
.user-menu-form { margin:0; }
.menu-button { background:transparent; border:0; font:inherit; cursor:pointer; }
.menu-button .menu-item-icon { background:rgba(239,68,68,.14); color:#fecaca; }
.container { position:relative; width:min(1160px, calc(100% - 2rem)); margin:2rem auto 5rem; }
.hero { position:relative; overflow:hidden; min-height:360px; display:flex; align-items:center; padding:3rem; border:1px solid rgba(148,163,184,.22); border-radius:28px; background:linear-gradient(135deg, rgba(34,197,94,.20), rgba(59,130,246,.12)), rgba(15,23,42,.82); box-shadow:var(--shadow-raised); }
.hero::before { content:""; position:absolute; inset:-30%; background:repeating-linear-gradient(90deg, transparent 0 72px, rgba(187,247,208,.09) 72px 75px), linear-gradient(135deg, transparent 0 60%, rgba(34,197,94,.14)); transform:rotate(-10deg); }
.hero::after { content:""; position:absolute; right:clamp(1rem,6vw,5rem); bottom:clamp(1rem,5vw,3rem); width:150px; height:150px; border:1px solid rgba(187,247,208,.22); border-radius:34px; background:linear-gradient(135deg, rgba(15,23,42,.66), rgba(34,197,94,.10)); box-shadow:0 26px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); transform:rotate(8deg); }
.hero-content { position:relative; z-index:1; }
.hero h1 { font-size:clamp(2.4rem, 7vw, 5.5rem); line-height:.92; margin:.25rem 0 1rem; max-width:850px; letter-spacing:-.06em; color:var(--heading); }
.hero p { max-width:680px; font-size:1.15rem; color:#cbd5e1; }
.trust-strip { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.35rem; }
.trust-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .7rem; border:1px solid rgba(187,247,208,.18); border-radius:999px; background:rgba(15,23,42,.55); color:#dbeafe; font-size:.82rem; font-weight:850; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:800; }
.page-title { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.page-title h1 { margin:.1rem 0; font-size:clamp(2rem, 5vw, 3.5rem); letter-spacing:-.045em; color:var(--heading); }
.page-title p { color:#cbd5e1; }
.actions { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.button, button.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.78rem 1rem; border:1px solid rgba(187,247,208,.18); border-radius:999px; background:linear-gradient(135deg, #22c55e, #86efac); color:#052e16; font-weight:900; cursor:pointer; box-shadow:0 12px 30px rgba(34,197,94,.18); }
.button:hover, button.button:hover { text-decoration:none; transform:translateY(-1px); box-shadow:0 16px 42px rgba(34,197,94,.26); }
.button:active, button.button:active { transform:translateY(0); box-shadow:0 8px 18px rgba(34,197,94,.18); }
.button.secondary { background:#1f2937; color:#e5e7eb; border:1px solid #334155; box-shadow:none; }
.button.secondary:hover { background:#263244; border-color:#475569; box-shadow:0 12px 28px rgba(0,0,0,.22); }
.button.small { min-height:36px; padding:.45rem .75rem; }
button:disabled, .button[aria-disabled="true"] { opacity:.55; cursor:not-allowed; transform:none; }
.button.is-busy { gap:.55rem; opacity:.82; cursor:progress; }
.button.is-busy::before { content:""; width:1em; height:1em; border:2px solid currentColor; border-right-color:transparent; border-radius:999px; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.link-button { background:none; border:none; color:#93c5fd; cursor:pointer; font:inherit; padding:0; }
.inline { display:inline; }
.grid { display:grid; gap:1rem; }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid.three { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:1rem; }
.card, .week-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:1.25rem; box-shadow:var(--shadow-card); }
.card, .week-card, .member-status-row { backdrop-filter:blur(6px); }
.card h2, .week-card h2 { margin-top:0; color:var(--heading); }
.card.narrow { max-width:540px; margin-inline:auto; }
.card:hover, .week-card:hover { border-color:rgba(148,163,184,.34); box-shadow:0 22px 64px rgba(0,0,0,.28); }
.feature-card { position:relative; overflow:hidden; }
.feature-card::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(34,197,94,.08), transparent 42%); opacity:.75; pointer-events:none; }
.feature-icon, .league-avatar { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:16px; background:linear-gradient(135deg, rgba(34,197,94,.9), rgba(96,165,250,.75)); color:#04111f; font-weight:950; box-shadow:inset 0 -10px 18px rgba(0,0,0,.13); }
.feature-card > * { position:relative; }
.muted { color:var(--muted); }
.messages { width:min(1160px, calc(100% - 2rem)); margin:1rem auto; display:grid; gap:.65rem; }
.message { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:.7rem; padding:.85rem 1rem; border-radius:16px; background:#1e293b; border:1px solid var(--line); box-shadow:0 14px 34px rgba(0,0,0,.18); }
.message-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background:rgba(148,163,184,.16); color:#e5e7eb; font-weight:950; }
.message-text { align-self:center; }
.message.success { border-color:#16a34a; background:rgba(22,163,74,.14); color:#dcfce7; }
.message.success .message-icon { background:rgba(34,197,94,.24); color:#bbf7d0; }
.message.error { border-color:#ef4444; background:rgba(239,68,68,.12); color:#fee2e2; }
.message.error .message-icon { background:rgba(239,68,68,.22); color:#fecaca; }
.message.warning { border-color:#f59e0b; background:rgba(245,158,11,.13); color:#fef3c7; }
.message.warning .message-icon { background:rgba(245,158,11,.20); color:#fde68a; }
.message.info { border-color:#60a5fa; background:rgba(59,130,246,.13); color:#dbeafe; }
.message.info .message-icon { background:rgba(59,130,246,.22); color:#bfdbfe; }
.winner-card { border-color:#fbbf24; background:linear-gradient(135deg, rgba(251,191,36,.18), rgba(15,23,42,.88)); margin-bottom:1rem; }
.stacked-form { display:grid; gap:1rem; margin-top:1rem; }
.form-field { display:grid; gap:.42rem; }
.form-field label { color:#dbeafe; font-weight:900; }
input, select { width:100%; background:#020617; color:var(--text); border:1px solid #334155; border-radius:14px; padding:.82rem .9rem; }
input:hover, select:hover { border-color:#475569; }
input:focus, select:focus { border-color:#60a5fa; }
.helptext { color:var(--muted); font-size:.88rem; margin:0; }
.errorlist, .field-errors, .form-errors { color:#fecaca; }
.field-errors p, .form-errors p { margin:.25rem 0 0; }
.form-errors { padding:.8rem 1rem; border:1px solid rgba(239,68,68,.4); border-radius:14px; background:rgba(239,68,68,.12); }
.form-field.has-error input, .form-field.has-error select { border-color:#ef4444; background:rgba(127,29,29,.18); }
.card.narrow .button { width:max-content; }
.invite-box strong, .code-chip { color:#fef3c7; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.invite-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.85rem; margin-top:1rem; }
.invite-token { display:grid; gap:.35rem; padding:.9rem; border:1px solid rgba(251,191,36,.25); border-radius:16px; background:rgba(251,191,36,.08); }
.invite-token span { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.mode-card { position:relative; display:grid; gap:.75rem; }
.mode-card.enabled { border-color:rgba(34,197,94,.32); }
.mode-card.disabled { opacity:.82; }
.mode-card-header, .league-card-top, .stat-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mode-description { color:#cbd5e1; margin-top:-.35rem; }
.status-dot { width:12px; height:12px; border-radius:99px; background:#64748b; position:absolute; right:1rem; top:1rem; }
.status-dot.on { background:var(--accent); box-shadow:0 0 22px var(--accent); }
.status-badge, .role-badge, .pick-status { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:.43rem .72rem; border-radius:999px; border:1px solid rgba(148,163,184,.24); background:rgba(148,163,184,.10); color:#cbd5e1; font-size:.78rem; font-weight:900; letter-spacing:.01em; }
.status-badge.success, .pick-status.submitted { color:#bbf7d0; border-color:rgba(34,197,94,.48); background:rgba(34,197,94,.16); box-shadow:0 0 24px rgba(34,197,94,.08); }
.status-badge.warning { color:#fde68a; border-color:rgba(245,158,11,.48); background:rgba(245,158,11,.14); }
.role-badge { color:#bfdbfe; border-color:rgba(96,165,250,.3); background:rgba(59,130,246,.13); }
.stat-card { display:grid; gap:.55rem; background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(15,23,42,.88)); }
.stat-number { font-size:clamp(2rem, 6vw, 3.6rem); line-height:1; letter-spacing:-.06em; font-weight:950; color:var(--heading); }
.league-card { display:grid; gap:.8rem; }
.league-card h2 { margin-bottom:0; }
.league-card h2 a { color:var(--heading); }
.league-card h2 a:hover { color:#bfdbfe; text-decoration:none; }
.card-action { display:inline-flex; width:max-content; color:#bbf7d0; font-weight:900; }
.capacity-meter, .progress-meter { width:100%; height:10px; overflow:hidden; border-radius:999px; background:rgba(15,23,42,.9); border:1px solid rgba(148,163,184,.18); }
.capacity-meter span, .progress-meter span { display:block; height:100%; width:var(--progress,0%); border-radius:inherit; background:linear-gradient(90deg, #22c55e, #60a5fa); box-shadow:0 0 22px rgba(34,197,94,.22); }
.empty-state { text-align:center; display:grid; place-items:center; gap:.45rem; padding:2rem; color:#cbd5e1; }
.empty-state-icon { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:18px; background:rgba(96,165,250,.13); color:#bfdbfe; font-weight:950; }
.checkbox-row { display:flex; align-items:center; gap:.6rem; }
.checkbox-row input[type="checkbox"] { width:1.05rem; height:1.05rem; flex:0 0 auto; margin:0; accent-color:var(--accent); }
.mode-toggle { display:flex; align-items:flex-start; gap:.75rem; padding:.85rem; border:1px solid rgba(148,163,184,.22); border-radius:16px; background:rgba(15,23,42,.50); cursor:pointer; }
.mode-toggle:hover { border-color:rgba(187,247,208,.42); background:rgba(30,41,59,.72); transform:translateY(-1px); }
.mode-toggle input[type="checkbox"] { width:1.2rem; height:1.2rem; flex:0 0 auto; margin:.15rem 0 0; accent-color:var(--accent); cursor:pointer; }
.mode-toggle-label { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.mode-toggle-label strong { color:var(--heading); }
.mode-toggle-label small { color:var(--muted); font-weight:750; line-height:1.35; }
.standings-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.standings-card-heading h2 { margin:.1rem 0 0; }
.standings-meta { max-width:13rem; margin:.15rem 0 0; color:var(--muted); font-size:.78rem; font-weight:800; line-height:1.35; text-align:right; }
.standings-list { list-style:none; display:grid; gap:.65rem; padding:0; margin:0; }
.standing-row { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.75rem .8rem; border:1px solid rgba(148,163,184,.20); border-radius:18px; background:linear-gradient(135deg, rgba(255,255,255,.042), rgba(255,255,255,.016)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.standing-row.rank-gold { border-color:rgba(251,191,36,.50); background:linear-gradient(135deg, rgba(251,191,36,.18), rgba(15,23,42,.62)); }
.standing-row.rank-silver { border-color:rgba(203,213,225,.42); background:linear-gradient(135deg, rgba(203,213,225,.13), rgba(15,23,42,.58)); }
.standing-row.rank-bronze { border-color:rgba(217,119,6,.42); background:linear-gradient(135deg, rgba(217,119,6,.14), rgba(15,23,42,.58)); }
.rank-badge { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 .45rem; border-radius:14px; background:rgba(15,23,42,.74); border:1px solid rgba(148,163,184,.22); color:#e5e7eb; font-weight:950; }
.rank-gold .rank-badge { color:#451a03; background:linear-gradient(135deg,#fbbf24,#fde68a); border-color:rgba(253,230,138,.70); }
.rank-silver .rank-badge { color:#0f172a; background:linear-gradient(135deg,#cbd5e1,#f8fafc); border-color:rgba(226,232,240,.70); }
.rank-bronze .rank-badge { color:#431407; background:linear-gradient(135deg,#d97706,#fdba74); border-color:rgba(253,186,116,.70); }
.standing-avatar { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:14px; background:rgba(59,130,246,.16); color:#bfdbfe; font-weight:950; }
.standing-copy { display:flex; flex-direction:column; min-width:0; gap:.12rem; }
.standing-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--heading); }
.standing-copy small { color:var(--muted); font-size:.8rem; font-weight:750; }
.standing-score { color:#bbf7d0; font-size:1rem; white-space:nowrap; }
.list { display:flex; flex-direction:column; gap:.5rem; }
.member-status-list { display:grid; gap:.75rem; margin-top:1.15rem; }
.member-status-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:.9rem; padding:.8rem .9rem; border:1px solid rgba(148,163,184,.18); border-radius:18px; background:linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); color:var(--text); }
.member-status-row.submitted { border-color:rgba(34,197,94,.32); background:linear-gradient(135deg, rgba(34,197,94,.11), rgba(255,255,255,.018)); }
.member-status-row.pending { border-color:rgba(148,163,184,.16); }
a.member-status-row:hover { border-color:rgba(147,197,253,.45); background:linear-gradient(135deg, rgba(59,130,246,.10), rgba(255,255,255,.026)); text-decoration:none; transform:translateY(-1px); }
.member-status-avatar { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:16px; background:rgba(15,23,42,.72); border:1px solid rgba(255,255,255,.08); color:#dbeafe; font-weight:950; box-shadow:inset 0 -10px 18px rgba(0,0,0,.16); }
.member-status-row.submitted .member-status-avatar { background:linear-gradient(135deg, #22c55e, #86efac); color:#052e16; border-color:rgba(187,247,208,.4); }
.member-status-copy { display:flex; flex-direction:column; min-width:0; gap:.12rem; }
.member-status-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1rem; letter-spacing:-.01em; }
.member-status-copy small { color:var(--muted); font-size:.82rem; font-weight:700; }
.member-status-badge { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-width:max-content; padding:.43rem .72rem; border-radius:999px; border:1px solid rgba(148,163,184,.22); background:rgba(148,163,184,.09); color:#cbd5e1; font-size:.78rem; font-weight:900; letter-spacing:.01em; }
.member-status-badge.submitted { color:#bbf7d0; border-color:rgba(34,197,94,.48); background:rgba(34,197,94,.16); box-shadow:0 0 24px rgba(34,197,94,.08); }
.member-status-badge.pending { color:#cbd5e1; border-color:rgba(148,163,184,.24); background:rgba(148,163,184,.10); }
.submit-feedback-status { display:block; min-height:1.2rem; margin:.25rem 0 0; color:#bfdbfe; font-size:.82rem; font-weight:850; }
.pick-progress-card { display:grid; gap:.85rem; margin-bottom:1rem; }
.pick-progress-main { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.pick-progress-main strong { color:var(--heading); font-size:clamp(1.5rem, 4vw, 2.25rem); letter-spacing:-.05em; }
.pick-progress-note, .week-choice-note { margin:0; color:var(--muted-strong); }
.pick-guidance-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.8fr); gap:1rem; padding:1rem; border:1px solid rgba(96,165,250,.24); border-radius:18px; background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(34,197,94,.08)); }
.pick-guidance-panel h2 { margin:.1rem 0 .35rem; color:var(--heading); font-size:clamp(1.25rem, 3vw, 1.75rem); letter-spacing:-.03em; }
.pick-guidance-panel p { margin:0; color:var(--muted-strong); }
.pick-guidance-steps { margin:0; padding-left:1.2rem; color:#dbeafe; font-weight:800; }
.pick-guidance-steps li + li { margin-top:.35rem; }
.week-jump-card { display:grid; gap:1rem; margin-bottom:1rem; }
.week-jump-header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.week-jump-header h2 { margin:.15rem 0 0; }
.week-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:.55rem; }
.primary-week-picker { grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); }
.week-picker-link { display:flex; flex-direction:column; gap:.15rem; min-height:62px; padding:.62rem .7rem; border:1px solid rgba(148,163,184,.20); border-radius:16px; background:rgba(15,23,42,.54); color:#e5e7eb; text-decoration:none; }
.week-picker-link:hover { transform:translateY(-1px); border-color:rgba(147,197,253,.48); background:rgba(37,99,235,.18); text-decoration:none; }
.week-picker-link.active { border-color:#bbf7d0; background:linear-gradient(135deg, rgba(34,197,94,.24), rgba(59,130,246,.14)); box-shadow:0 0 0 1px rgba(187,247,208,.14), 0 16px 36px rgba(0,0,0,.22); }
.week-picker-link.complete { border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.10); }
.week-picker-link span { font-weight:950; }
.week-picker-link small { color:var(--muted); font-weight:800; }
.all-weeks-disclosure { display:grid; gap:.75rem; }
.all-weeks-disclosure summary { display:flex; align-items:center; justify-content:center; min-height:44px; padding:.65rem .85rem; border:1px dashed rgba(148,163,184,.32); border-radius:16px; background:rgba(15,23,42,.42); color:#bfdbfe; cursor:pointer; font-weight:900; }
.all-weeks-disclosure summary:hover { border-color:rgba(147,197,253,.5); background:rgba(30,41,59,.72); }
.week-picker-compact { margin-top:.75rem; grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); }
.weeks { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1rem; }
.active-week-card { margin-top:1rem; }
.week-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.week-progress { color:#bfdbfe; font-size:.8rem; font-weight:900; padding:.35rem .6rem; border-radius:999px; background:rgba(59,130,246,.13); border:1px solid rgba(96,165,250,.25); white-space:nowrap; }
.week-game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; align-items:stretch; }
.week-game-grid .matchup { min-height:100%; border:1px solid var(--line); border-radius:18px; padding:.8rem; background:rgba(15,23,42,.45); }
.matchup { border-top:1px solid var(--line); padding:1rem 0; }
.matchup.needs-pick { box-shadow:inset 3px 0 0 rgba(245,158,11,.55); padding-left:.85rem; }
.matchup.picked { box-shadow:inset 3px 0 0 rgba(34,197,94,.55); padding-left:.85rem; }
.week-game-grid .matchup.needs-pick, .week-game-grid .matchup.picked { padding-left:.8rem; }
.matchup.readonly { box-shadow:none; padding-left:0; }
.game-meta { display:flex; align-items:center; justify-content:space-between; gap:.75rem; color:var(--muted); font-size:.85rem; margin-bottom:.55rem; }
.week-game-grid .game-meta { align-items:flex-start; flex-direction:column; gap:.35rem; font-size:.78rem; line-height:1.25; }
.pick-needed { color:#fde68a; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:950; }
.pick-result { display:inline-flex; width:max-content; margin-top:.55rem; padding:.25rem .55rem; border-radius:999px; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--line); color:#e5e7eb; }
.pick-result.correct { color:#bbf7d0; border-color:#16a34a; background:rgba(22,163,74,.18); }
.pick-result.incorrect { color:#fecaca; border-color:#dc2626; background:rgba(220,38,38,.16); }
.pick-result.pending { color:#bfdbfe; border-color:#2563eb; background:rgba(37,99,235,.14); }
.pick-result.push { color:#fde68a; border-color:#d97706; background:rgba(217,119,6,.16); }
.matchup-choice-group { border:0; margin:0; padding:0; min-inline-size:0; }
.team-choice { position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:.65rem; margin:.35rem 0; padding:.68rem .78rem; border-radius:16px; border:1px solid color-mix(in srgb, var(--team-color) 65%, white 0%); background:linear-gradient(90deg, color-mix(in srgb, var(--team-color) 30%, transparent), rgba(15,23,42,.52)); cursor:pointer; }
.week-game-grid .team-choice { min-height:56px; grid-template-columns:1fr auto; padding:.72rem .75rem; border-radius:14px; }
.team-choice:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.22); }
.team-choice:has(.choice-radio:checked) { border-color:#bbf7d0; background:linear-gradient(90deg, color-mix(in srgb, var(--team-color) 42%, transparent), rgba(34,197,94,.14)); box-shadow:0 0 0 1px rgba(187,247,208,.16), 0 16px 36px rgba(0,0,0,.22); }
.choice-radio { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.team-choice:has(.choice-radio:disabled), .prediction-choice:has(.choice-radio:disabled) { cursor:not-allowed; opacity:.74; }
.team-name { font-weight:900; }
.team-check { opacity:0; transform:scale(.8); display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; background:#bbf7d0; color:#052e16; font-size:.82rem; font-weight:950; }
.week-game-grid .team-check { justify-self:center; width:24px; height:24px; margin-top:0; }
.team-choice .choice-radio:checked ~ .team-check { opacity:1; transform:scale(1); }
.at { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; }
.week-pagination { display:flex; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.sticky-actions { position:sticky; bottom:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; padding-bottom:calc(1rem + env(safe-area-inset-bottom)); margin-top:1rem; background:rgba(2,6,23,.85); border:1px solid var(--line); border-radius:18px; backdrop-filter:blur(10px); box-shadow:0 -18px 42px rgba(0,0,0,.24); }
.sticky-action-copy { display:flex; flex-direction:column; gap:.18rem; min-width:220px; color:#e5e7eb; }
.sticky-action-copy strong { color:var(--heading); }
.sticky-action-copy small { color:var(--muted); font-weight:750; }
.sticky-action-buttons { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; flex-wrap:wrap; }
.primary-action { min-height:52px; padding:.88rem 1.25rem; }
.predictor-hero { margin-bottom:1rem; background:linear-gradient(135deg, rgba(34,197,94,.22), rgba(96,165,250,.16)), rgba(15,23,42,.88); }
.predictor-title-row h2 { margin:.1rem 0; font-size:clamp(1.8rem, 4vw, 3rem); color:var(--heading); letter-spacing:-.04em; }
.predictor-team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.predictor-team-card { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.9rem; min-height:118px; padding:1rem; border:1px solid color-mix(in srgb, var(--team-color) 45%, rgba(148,163,184,.25)); border-radius:22px; background:linear-gradient(135deg, color-mix(in srgb, var(--team-color) 22%, transparent), rgba(15,23,42,.86)); color:var(--text); box-shadow:var(--shadow-card); }
.predictor-team-card:hover { text-decoration:none; transform:translateY(-2px); border-color:color-mix(in srgb, var(--team-color) 75%, white); box-shadow:0 24px 70px rgba(0,0,0,.34); }
.predictor-team-avatar { display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:20px; background:linear-gradient(135deg, var(--team-color), color-mix(in srgb, var(--team-color-2, #fff) 65%, #ffffff)); color:#fff; border:1px solid rgba(255,255,255,.18); font-weight:950; letter-spacing:-.04em; box-shadow:inset 0 -12px 18px rgba(0,0,0,.18); text-shadow:0 1px 8px rgba(0,0,0,.35); }
.predictor-team-avatar.small { width:42px; height:42px; border-radius:15px; font-size:.8rem; }
.predictor-team-copy { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.predictor-team-copy strong { color:var(--heading); font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.predictor-team-copy small { color:var(--muted-strong); font-weight:750; }
.predictor-team-card .card-action { grid-column:2; color:#bbf7d0; }
.predictor-team-heading { padding:1.25rem; border:1px solid color-mix(in srgb, var(--team-color) 42%, rgba(148,163,184,.22)); border-radius:24px; background:linear-gradient(135deg, color-mix(in srgb, var(--team-color) 18%, transparent), rgba(15,23,42,.74)); }
.team-predictor-form { display:grid; gap:1rem; }
.prediction-schedule { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.prediction-matchup { display:grid; gap:.85rem; padding:1rem; border:1px solid color-mix(in srgb, var(--team-color) 36%, rgba(148,163,184,.24)); border-radius:20px; background:linear-gradient(135deg, color-mix(in srgb, var(--team-color) 12%, transparent), rgba(15,23,42,.72)); box-shadow:var(--shadow-card); }
.prediction-game-meta, .prediction-matchup-main { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.prediction-game-meta { color:var(--muted); font-size:.82rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.prediction-matchup-main strong { display:block; color:var(--heading); font-size:1.08rem; }
.prediction-matchup-main small { display:block; margin-top:.2rem; color:var(--muted); font-weight:700; }
.prediction-choices { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.prediction-choice { position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; justify-items:center; gap:.5rem; min-height:48px; padding:.7rem .8rem; border:1px solid rgba(148,163,184,.24); border-radius:16px; background:rgba(15,23,42,.62); color:#e5e7eb; font-weight:950; cursor:pointer; }
.prediction-choice:hover { transform:translateY(-1px); border-color:rgba(191,219,254,.48); background:rgba(30,41,59,.88); }
.prediction-choice:has(.choice-radio:checked) { border-color:#bbf7d0; background:linear-gradient(135deg, rgba(34,197,94,.22), rgba(59,130,246,.12)); box-shadow:0 0 0 1px rgba(187,247,208,.16); }
.prediction-choice.loss:has(.choice-radio:checked) { border-color:rgba(248,113,113,.72); background:linear-gradient(135deg, rgba(239,68,68,.18), rgba(15,23,42,.72)); }
.prediction-choice-check { opacity:0; transform:scale(.8); display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; background:#bbf7d0; color:#052e16; font-size:.82rem; font-weight:950; }
.prediction-choice.loss .prediction-choice-check { background:#fecaca; color:#450a0a; }
.prediction-choice .choice-radio:checked ~ .prediction-choice-check { opacity:1; transform:scale(1); }
.prediction-record-card { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem; border:1px solid rgba(187,247,208,.25); border-radius:22px; background:rgba(2,6,23,.88); backdrop-filter:blur(12px); box-shadow:0 -18px 48px rgba(0,0,0,.30); }
.prediction-record-card h2 { margin:.1rem 0; color:var(--heading); font-size:clamp(1.35rem, 3vw, 2rem); letter-spacing:-.035em; }
.prediction-record-card p { margin:.25rem 0 0; color:var(--muted-strong); }
.predictor-result-hero { margin-bottom:1rem; padding:clamp(1.35rem, 4vw, 2.5rem); border:1px solid color-mix(in srgb, var(--team-color) 45%, rgba(148,163,184,.22)); border-radius:28px; background:radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--team-color) 32%, transparent), transparent 18rem), linear-gradient(135deg, color-mix(in srgb, var(--team-color) 22%, transparent), rgba(15,23,42,.88)); box-shadow:var(--shadow-raised); }
.predictor-result-hero h1 { max-width:850px; margin:.2rem 0 .7rem; color:var(--heading); font-size:clamp(2.2rem, 6vw, 4.6rem); line-height:.96; letter-spacing:-.06em; }
.prediction-result-record { display:inline-flex; margin:.3rem 0 1rem; padding:.55rem .85rem; border-radius:999px; border:1px solid rgba(187,247,208,.26); background:rgba(34,197,94,.14); color:#dcfce7; font-weight:950; }
.prediction-result-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.prediction-share-toolbar { display:inline-flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-top:1rem; padding:.45rem .55rem .45rem .8rem; border:1px solid rgba(148,163,184,.24); border-radius:999px; background:rgba(2,6,23,.42); box-shadow:0 14px 36px rgba(0,0,0,.18); }
.prediction-share-label { color:var(--muted-strong); font-weight:900; letter-spacing:.02em; }
.social-share-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid rgba(148,163,184,.25); border-radius:999px; background:rgba(15,23,42,.74); color:#e5e7eb; }
button.social-share-icon { padding:0; font:inherit; cursor:pointer; }
.social-share-icon svg { width:20px; height:20px; fill:currentColor; }
.social-share-icon:hover { transform:translateY(-1px); border-color:rgba(226,232,240,.52); background:rgba(30,41,59,.9); text-decoration:none; }
.social-share-icon.copy-link { color:#bfdbfe; }
.social-share-icon.copy-link.copied { color:#bbf7d0; border-color:rgba(187,247,208,.52); }
.social-share-icon.x { color:#f8fafc; }
.social-share-icon.reddit { color:#ff4500; }
.social-share-icon.facebook { color:#60a5fa; }
.share-actions { margin-top:1rem; }
.prediction-result-card, .predictor-conversion-card { margin-top:1rem; }
.prediction-result-card { padding:1.25rem; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--shadow-card); }
.prediction-result-list { display:grid; gap:.7rem; }
.prediction-result-row { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.85rem; padding:.85rem; border:1px solid rgba(148,163,184,.20); border-radius:18px; background:rgba(15,23,42,.48); }
.prediction-result-row.win { border-color:rgba(34,197,94,.35); }
.prediction-result-row.loss { border-color:rgba(248,113,113,.30); }
.prediction-result-row strong { color:var(--heading); }
.prediction-result-row small { display:block; margin-top:.15rem; color:var(--muted); font-weight:700; }
.prediction-result-badge { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:15px; font-weight:950; }
.prediction-result-badge.win { background:rgba(34,197,94,.20); color:#bbf7d0; border:1px solid rgba(34,197,94,.48); }
.prediction-result-badge.loss { background:rgba(239,68,68,.16); color:#fecaca; border:1px solid rgba(248,113,113,.45); }
@media (max-width: 1100px) {
    .week-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
    .site-header { align-items:flex-start; flex-direction:column; }
    .site-header nav { flex-wrap:wrap; }
    .brand { align-items:flex-start; flex-direction:column; gap:.1rem; }
    .user-menu-panel { left:0; right:auto; max-width:calc(100vw - 2rem); }
    .user-menu-panel::before { left:1.35rem; right:auto; }
    .page-title, .pick-progress-main, .week-jump-header { flex-direction:column; align-items:flex-start; }
    .pick-guidance-panel { grid-template-columns:1fr; }
    .hero { padding:1.5rem; min-height:320px; }
    .hero::after { display:none; }
    .weeks { grid-template-columns:1fr; }
    .week-game-grid { display:block; }
    .week-game-grid .matchup { border-radius:16px; padding:.9rem; }
    .week-game-grid .matchup + .matchup { margin-top:.85rem; }
    .week-game-grid .team-choice { min-height:56px; grid-template-columns:1fr auto; }
    .week-game-grid .team-choice { padding:.7rem .75rem; }
    .week-game-grid .team-check { grid-column:auto; justify-self:center; width:24px; height:24px; margin-top:0; }
    .member-status-row { grid-template-columns:40px 1fr; align-items:flex-start; }
    .member-status-avatar { width:40px; height:40px; border-radius:14px; }
    .member-status-badge { grid-column:2; width:max-content; }
    .sticky-actions { display:grid; grid-template-columns:1fr; }
    .sticky-action-copy { min-width:0; }
    .sticky-action-buttons { display:grid; grid-template-columns:1fr; }
    .sticky-action-buttons .button { min-height:52px; }
    .sticky-actions .button, .card.narrow .button, .week-pagination .button { width:100%; }
    .actions .button { flex:1 1 180px; }
    .game-meta { align-items:flex-start; flex-direction:column; }
    .predictor-team-grid { grid-template-columns:1fr; }
    .predictor-team-card { min-height:104px; }
    .prediction-schedule { display:block; }
    .prediction-matchup + .prediction-matchup { margin-top:.85rem; }
    .prediction-matchup-main { align-items:flex-start; }
    .prediction-choices { grid-template-columns:1fr; }
    .prediction-choice { min-height:52px; }
    .prediction-record-card { position:static; flex-direction:column; align-items:stretch; }
    .prediction-record-card .button { width:100%; }
    .prediction-record-card .submit-feedback-status { text-align:center; }
    .prediction-result-actions { display:grid; grid-template-columns:1fr; }
    .prediction-result-actions .button, .prediction-result-actions button { width:100%; }
    .prediction-share-toolbar { width:100%; border-radius:20px; }
    .prediction-result-row { align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}