/* ===== FeyyazUcarV2 additions on top of the Precision template CSS (loaded last, wins by source order) ===== */

/* Placeholder body for routes whose content is not migrated yet (src/components/common/PagePlaceholder.tsx). */
.page-placeholder{max-width:1180px; margin:0 auto; padding:64px 32px; color:var(--color-text-primary);}
.page-placeholder h1{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:40px; line-height:1; margin:0 0 16px;}
.page-placeholder p{font-size:15px; color:rgba(2,19,41,.62); margin:0;}
@media (max-width:1024px){.page-placeholder{padding:40px 16px;} .page-placeholder h1{font-size:32px;}}

/* Short pages (placeholders, 404) must still fill the viewport below the mobile top bar; template pages are tall enough to hide this. */
@media (max-width:1024px){.content-col{min-height:calc(100vh - 56px);}}

/* League flags come from the API as SVG images (flagUri); the template used emoji in the same 18px slot. */
.league-submenu .flag img{width:18px; height:auto; display:inline-block; vertical-align:-2px;}

/* ===== Template rules kept from package v1 (v3 removed them as unused by the mock; V2 still renders these) ===== */
/* Toasts (src/contexts/ToastContext.tsx): the v1 stack; v3's mock moved to its notification toasts. */
.toast-stack{display:flex; flex-direction:column; gap:10px; max-width:380px;}
.toast-text{font-size:12px; color:rgba(225,230,236,.6); line-height:1.5;}
.toast-close{background:none; border:none; color:rgba(225,230,236,.4); cursor:pointer; flex-shrink:0; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-control);}
.toast-close:hover{background:rgba(225,230,236,.08); color:var(--color-text-primary);}
.toast-close svg{width:14px; height:14px; stroke-width:2;}
/* Interested leagues pane (src/components/profile/LeaguesPane.tsx): the template designed it but switched it off; the data exists here. */
.pr-lg-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;}
.pr-lg-head b{font-size:15px; font-weight:600; color:#FFFFFF; font-variant-numeric:tabular-nums;}
.pr-lg-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
.pr-lg{display:flex; align-items:center; gap:14px; min-width:0; padding:12px 14px; border:1px solid var(--color-border-strong); border-radius:8px; background:rgba(1,3,11,.28); cursor:pointer; text-align:left; font-family:var(--font-body); color:#E1E6EC; transition:border-color .12s ease, background .12s ease;}
.pr-lg:hover{border-color:rgba(225,230,236,.5); background:rgba(225,230,236,.05);}
.pr-lg:focus-visible{outline:2px solid #61E1EE; outline-offset:2px;}
.pr-lg.on{border-color:#61E1EE; background:rgba(97,225,238,.08);}
.pr-lg-ico{width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:6px; background:rgba(225,230,236,.08); overflow:hidden;}
.pr-lg-ico img{width:26px; height:26px; object-fit:contain; display:block;}
.pr-lg-flag{font-size:20px; line-height:1;}
.pr-lg-txt{flex:1; min-width:0;}
.pr-lg-txt b{display:block; font-size:14px; font-weight:600; color:#FFFFFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pr-lg-txt i{display:block; margin-top:2px; font-style:normal; font-size:12px; color:rgba(225,230,236,.55);}
.pr-lg-chk{width:22px; height:22px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1.5px solid rgba(225,230,236,.35); color:transparent; transition:background .12s ease, border-color .12s ease;}
.pr-lg-chk svg{width:13px; height:13px;}
.pr-lg.on .pr-lg-chk{background:#61E1EE; border-color:#61E1EE; color:#031429;}
@media (max-width:760px){.pr-lg-grid{grid-template-columns:minmax(0,1fr);}}

/* ===== Home page (src/components/home) ===== */

/* Watched fixtures open the match page on click. */
:where([data-page="home"]) .watch-table tbody tr.watch-row{cursor:pointer;}
:where([data-page="home"]) .watch-table tbody tr.watch-row:hover td{background:rgba(2,19,41,.03);}
:where([data-page="home"]) .watch-table .up-theory .dim{white-space:nowrap;}

/* Result card: the "see the breakdown" link inside the verdict (the mock's CTA row is hidden for members). */
:where([data-page="home"]) .result-link{color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; white-space:nowrap;}

/* Community highlights: states the mock's sample data never reached. */
:where([data-page="home"]) .hl-not-run{font-size:11px; font-weight:600; color:rgba(2,19,41,.45);}
:where([data-page="home"]) .hl-empty{font-size:12.5px; color:rgba(2,19,41,.5); padding:18px 0;}
:where([data-page="home"]) .hl-league{display:inline-block; margin-left:8px; font-size:10.5px; font-weight:600; color:rgba(2,19,41,.5); vertical-align:middle;}
:where([data-page="home"]) .hl-actions .btn[disabled]{opacity:.45; cursor:not-allowed;}

/* Peek dialog: duplicate-theory notice. */
:where([data-page="home"]) .peek-duplicate{border-top:1px solid var(--color-border-subtle); padding-top:14px;}
:where([data-page="home"]) .peek-duplicate .btn{margin-top:10px;}

/* Blog cards are real links here (the mock used div[role=link]). */
:where([data-page="home"]) a.blog-card{color:inherit; text-decoration:none;}

/* ===== Auth modal (src/components/auth/AuthModal.tsx) ===== */

/* Google renders its own button into this slot (an ID token is only issued by the rendered button flow). */
:where([data-page="home"]) .auth-google-slot{display:flex; justify-content:center; min-height:40px; margin-bottom:16px;}
/* The template's forgot-password control is a <button> (R35); here it is the old mailto link in the same slot. */
:where([data-page="home"]) a.auth-forgot{text-decoration:underline; text-underline-offset:3px;}
:where([data-page="home"]) .auth-input:disabled{opacity:.6;}
:where([data-page="home"]) .auth-submit:disabled{opacity:.6; cursor:default;}

/* The guest CTA buttons are real <button>s here (they open the dialog), not the template's anchors. */
.sidebar-guest-btn, .footer-guest-btn{font-family:inherit; cursor:pointer;}

/* ===== Visitor home (src/components/home/GuestHome.tsx) ===== */

/* Data-set tiles are loaded from the API; the note spans the grid while they are not there yet. */
:where([data-page="home"]) .ds-presets-note{grid-column:1 / -1; font-size:12px; line-height:1.5; color:rgba(2,19,41,.5); padding:8px 0;}
:where([data-page="home"]) .ds-preset{font-family:inherit;}
:where([data-page="home"]) .b-cta-buttons .btn[disabled]{opacity:.55; cursor:default;}
/* A demo result below its baseline (the template's sample grid only had positive lifts). */
.content-col :where([data-page="home"]) .edge-card-delta.down{color:var(--color-action-danger);}

/* ===== Match page (src/components/fixture, src/components/discussion) ===== */

/* Loading and error states share the page wrapper so the footer stays in place. */
:where([data-page="match"]) .md-state{padding:64px 32px; color:var(--color-text-primary);}
:where([data-page="match"]) .md-state h1{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:40px; line-height:1; margin:0 0 16px;}
:where([data-page="match"]) .md-state p{font-size:15px; color:rgba(2,19,41,.62); margin:0;}
:where([data-page="match"]) .md-empty-note{font-size:13.5px; line-height:1.6; color:rgba(2,19,41,.55); margin:0; padding:8px 0 20px;}

/* Hero: team names link to the team page; the kickoff time takes the score slot before the match. */
:where([data-page="match"]) .md-side-name a{color:inherit; text-decoration:none;}
:where([data-page="match"]) .md-side-name a:hover{text-decoration:underline; text-underline-offset:4px;}
:where([data-page="match"]) .md-score-big.md-score-time{font-size:56px; letter-spacing:.5px;}
@media (max-width:720px){:where([data-page="match"]) .md-score-big.md-score-time{font-size:36px;}}
:where([data-page="match"]) .md-hero-zone{font-weight:500; color:rgba(225,230,236,.6); margin-left:4px;}
:where([data-page="match"]) .md-scorer.md-scorer-none{color:rgba(225,230,236,.7);}
:where([data-page="match"]) .md-status-pill.live{background:var(--color-action-danger); color:#FFFFFF;}
:where([data-page="match"]) .md-comp-badge img[src$=".png"]{background:#FFFFFF; border-radius:50%; padding:1px;}
/* The mobile hero is a grid with the venue pinned to row 4 (11-mobile-tablet.css); the referee line takes the row below. */
@media (max-width:720px){main[data-page="match"] .md-referee{grid-row:5;}}

/* Overview: empty states of the facts and report columns. */
:where([data-page="match"]) .md-facts-empty, :where([data-page="match"]) .md-report-empty{font-size:13px; line-height:1.6; color:rgba(2,19,41,.5); margin:0;}

/* Lineups: player links and the event note after a name. */
:where([data-page="match"]) .md-player-link{color:inherit; text-decoration:none;}
:where([data-page="match"]) .md-player-link:hover{text-decoration:underline; text-underline-offset:3px;}
:where([data-page="match"]) .md-player-note{color:rgba(2,19,41,.4); font-size:11px; margin-left:4px;}
:where([data-page="match"]) a.md-jersey{text-decoration:none;}
:where([data-page="match"]) .md-lineup-table-col .data-table td:nth-child(3){white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Timeline: icons the template did not draw (missed penalty, VAR). */
:where([data-page="match"]) .md-tl-icon.miss{color:var(--color-action-danger);}
:where([data-page="match"]) .md-tl-icon.var{color:rgba(2,19,41,.5);}

/* Team stats: the player cards are real links; a card without a photo keeps the slot. */
main[data-page="match"] a.ts-pl{color:inherit; text-decoration:none;}
main[data-page="match"] .ts-pl-photo:not([style]){background:linear-gradient(160deg, #143E73 0%, #0B2A55 100%);}

/* Tooltip lines: the layer renders plain text, one line per row. */
main[data-page="match"] .ts-tip{white-space:nowrap;}

/* Discussion: threaded replies, votes and the inline forms on the template's md-disc classes. */
main[data-page="match"] .md-disc-list{list-style:none; margin:0; padding:0;}
main[data-page="match"] .md-disc-replies{margin-top:8px; padding-left:18px; border-left:2px solid rgba(2,19,41,.08);}
main[data-page="match"] .md-disc-replies .md-disc-item{padding:16px 0 0; border-bottom:none;}
main[data-page="match"] .md-disc-item.collapsed .md-disc-meta{margin-bottom:0;}
main[data-page="match"] .md-disc-toggle{appearance:none; width:16px; height:16px; padding:0; border:1px solid rgba(2,19,41,.18); border-radius:var(--radius-6); background:#FFFFFF; color:rgba(2,19,41,.5); font-size:11px; line-height:1; cursor:pointer; align-self:center;}
main[data-page="match"] .md-disc-toggle:hover{color:var(--color-navy-base-selected); border-color:var(--color-navy-base-selected);}
main[data-page="match"] .md-disc-name.masked{font-weight:400; font-style:italic; color:rgba(2,19,41,.45);}
main[data-page="match"] .md-name-av.masked{opacity:.5;}
main[data-page="match"] .md-disc-text{white-space:pre-wrap; overflow-wrap:anywhere;}
main[data-page="match"] .md-disc-text.masked{font-style:italic; color:rgba(2,19,41,.45);}
main[data-page="match"] .md-disc-notice{font-size:12px; color:#9A6B00; margin-top:4px;}
main[data-page="match"] .md-disc-foot{display:flex; align-items:center; flex-wrap:wrap; gap:16px;}
main[data-page="match"] .md-disc-link{appearance:none; background:none; border:none; padding:0; font-family:var(--font-body); font-size:11.5px; font-weight:700; color:rgba(2,19,41,.45); cursor:pointer;}
main[data-page="match"] .md-disc-link:hover:not(:disabled){color:var(--color-navy-base-selected);}
main[data-page="match"] .md-disc-link:disabled{cursor:default; opacity:.6;}
main[data-page="match"] .md-disc-vote{display:inline-flex; align-items:center; gap:2px;}
main[data-page="match"] .md-disc-vote-btn{appearance:none; width:22px; height:22px; padding:3px; border:none; border-radius:var(--radius-6); background:transparent; color:rgba(2,19,41,.45); cursor:pointer; display:inline-flex;}
main[data-page="match"] .md-disc-vote-btn svg{width:100%; height:100%;}
main[data-page="match"] .md-disc-vote-btn:hover:not(:disabled){background:rgba(2,19,41,.06);}
main[data-page="match"] .md-disc-vote-btn:disabled{cursor:default; opacity:.5;}
main[data-page="match"] .md-disc-vote-btn.up{color:var(--color-navy-base-selected);}
main[data-page="match"] .md-disc-vote-btn.down{color:var(--color-action-danger);}
main[data-page="match"] .md-disc-vote-score{min-width:18px; text-align:center; font-size:12px; font-weight:700; color:var(--color-text-primary);}
main[data-page="match"] .md-disc-error{font-size:12px; color:var(--color-action-danger); margin-top:6px;}
main[data-page="match"] .md-disc-error.inline{margin:0 0 0 8px;}
main[data-page="match"] .md-disc-count.low{color:#9A6B00; font-weight:700;}
main[data-page="match"] .md-disc-count.over{color:var(--color-action-danger); font-weight:700;}
main[data-page="match"] .md-disc-actions{display:flex; gap:8px; margin-left:auto;}
main[data-page="match"] .md-disc-compose-inline{padding:12px 0 0; margin:8px 0 0; border-bottom:none;}
main[data-page="match"] .md-disc-compose-inline .md-disc-input{min-height:60px;}
main[data-page="match"] .md-disc-notice a, main[data-page="match"] .md-disc-empty a{color:var(--color-navy-base-selected); font-weight:600;}
main[data-page="match"] div.md-disc-notice{font-size:13.5px; line-height:1.55; color:rgba(2,19,41,.7); background:rgba(2,19,41,.04); border-radius:var(--radius-container); padding:12px 16px; margin:0 0 22px;}
main[data-page="match"] .md-disc-allowance{font-size:12px; color:rgba(2,19,41,.5); margin:-4px 0 18px;}
main[data-page="match"] .md-disc-report{margin:10px 0 4px; padding:12px 14px; border:1px solid rgba(2,19,41,.12); border-radius:var(--radius-container); font-size:13px;}
main[data-page="match"] .md-disc-report fieldset{border:none; margin:0 0 8px; padding:0;}
main[data-page="match"] .md-disc-report legend{font-weight:700; margin-bottom:6px; font-size:13px;}
main[data-page="match"] .md-disc-report-option{display:block; font-weight:400; margin-bottom:3px;}
main[data-page="match"] .md-disc-report-note{min-height:0; margin:6px 0 10px; padding:8px 10px;}
main[data-page="match"] .md-disc-report.sent{color:rgba(2,19,41,.7);}
@media (max-width:575px){main[data-page="match"] .md-disc-replies{padding-left:10px;}}

/* ===== Team page (src/components/team), the template's club page ===== */

/* Loading, error and no-team states share the page wrapper so the footer stays in place. */
:where([data-page="club"]) .tm-state{padding:64px 32px; color:var(--color-text-primary);}
:where([data-page="club"]) .tm-state h1{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:40px; line-height:1; margin:0 0 16px;}
:where([data-page="club"]) .tm-state p{font-size:15px; color:rgba(2,19,41,.62); margin:0;}
/* The hero keeps the previous data while a season or league change loads. */
main[data-page="club"] .tm-hero.is-refreshing .tm-hero-grid{opacity:.6; transition:opacity .2s;}
/* Links the template drew as plain rows: latest fixtures, standings, press ranking, fixture difficulty, coach. */
main[data-page="club"] a.tm-lf, main[data-page="club"] a.tm-rank-r, main[data-page="club"] .tm-st-link, main[data-page="club"] .tm-fd-link, main[data-page="club"] .tm-cc-link, main[data-page="club"] .tm-fx td.vs i a{color:inherit; text-decoration:none;}
main[data-page="club"] a.tm-lf:hover .tm-lf-t, main[data-page="club"] .tm-st-link:hover, main[data-page="club"] .tm-fd-link:hover, main[data-page="club"] .tm-cc-link:hover, main[data-page="club"] .tm-fx td.vs i a:hover{text-decoration:underline; text-underline-offset:3px;}
main[data-page="club"] a.tm-rank-r{color:rgba(2,19,41,.72);}
main[data-page="club"] a.tm-rank-r:hover{background:rgba(4,39,85,.05);}
main[data-page="club"] a.tm-rank-r:focus-visible, main[data-page="club"] a.tm-lf:focus-visible{outline:2px solid #61E1EE; outline-offset:2px;}
main[data-page="club"] .tm-press-big em + em{margin-top:6px;}
/* Fixture rows open the match on click. */
main[data-page="club"] .tm-fx tbody tr.tm-fx-row{cursor:pointer;}
main[data-page="club"] .tm-fx tbody tr.tm-fx-row:hover td{background:rgba(4,39,85,.04);}
/* Empty-state copy inside the light detailed-stats chart column. */
main[data-page="club"] .pf-ms-chart .tm-empty{color:rgba(2,19,41,.62); padding:40px 0;}
/* Persistence legend row (the template keyed it off #tmPersistLeg). */
main[data-page="club"] .tm-persist-leg{margin:6px 0 22px;}
main[data-page="club"] .tm-persist-leg .pf-legend{margin:0; column-gap:22px; row-gap:10px; flex-wrap:wrap;}
/* Squad photos come from the provider; a slot without one keeps the template's gradient. */
main[data-page="club"] .tm-pp-ph .tm-mv{position:absolute; top:8px; right:8px; margin:0; color:#FFDB00;}
main[data-page="club"] .tm-pp-sub span{display:inline-block;}
main[data-page="club"] .tm-pt .tm-arr svg{width:14px; height:14px; vertical-align:-2px;}
/* Assist network on the dark band: role lanes and transitions. */
main[data-page="club"] .tm-net-main svg path[data-tip]{transition:stroke-opacity .15s;}
main[data-page="club"] .tm-net-main svg .tm-nd{transition:opacity .15s;}
/* Tooltip lines: the layer renders plain text, one line per row. */
main[data-page="club"] .pf-tip{white-space:nowrap;}

/* Empty-state copy on dark bands: the template's `.tm-panel .wrap > .tm-empty` rule paints it ink-dark, which disappears on a photo band. */
main[data-page="club"] .tm-panel .pf-band .wrap > .tm-empty, main[data-page="club"] .tm-panel .pf-band .tm-empty{color:rgba(225,230,236,.72);}
/* Legend items are spans holding swatch + label; keep the template's gap between them. */
main[data-page="club"] .pf-legend > span + span{margin-left:16px;}
main[data-page="club"] .pf-legend > span .pf-sw{margin-left:0;}
/* Coach headshots from the provider are small squares: fill the slot instead of the template's 140% portrait zoom. */
main[data-page="club"] .tm-cc-ph.has-photo{background-repeat:no-repeat; background-size:cover, cover; background-position:center, center 15%;}

/* ===== Data Sets page (src/components/datasets), the template's datasets page ===== */
/* Visitor notice under the hero, the same block as My Theories' .mt-guest. */
:where([data-page="datasets"]) .ds-guest{display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-top:44px;}
:where([data-page="datasets"]) .ds-guest p{font-size:15px; line-height:1.6; color:rgba(2,19,41,.7); margin:0; max-width:560px;}
/* The head note is a full sentence; without a cap it pushes "New data set" onto its own row at content widths under 1200px. */
:where([data-page="datasets"]) .ds-head > div{flex:1 1 480px; max-width:820px;}
/* Emoji flag when the API has no flag image for a league (the template's crest slot is an <img>). */
:where([data-page="datasets"]) .ds-flag{font-size:14px; line-height:1; flex-shrink:0;}

/* ===== My Theories page (src/components/theories), the template's theories page ===== */

/* Tokens are grouped with their AND joint; the group is transparent to the column layout of .tk-row. */
:where([data-page="theories"]) .tk-slot{display:contents;}
/* Parameter fields sit inline in the token after the condition name (the template's clause slots). */
:where([data-page="theories"]) .tk-name{font-weight:500;}
:where([data-page="theories"]) .tk-field{display:inline-flex; align-items:center; gap:4px;}
:where([data-page="theories"]) .tk-field-pair{display:inline-flex; align-items:center; gap:4px;}
:where([data-page="theories"]) .tk-lbl{font-size:11.5px; color:rgba(2,19,41,.5);}
:where([data-page="theories"]) .tk-missing{font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--color-action-danger); border:1px solid currentColor; border-radius:var(--radius-6); padding:1px 6px;}
/* The picker is a React child of the zone: same anchoring rule as the template's `.tk-zone > .pk`. */
:where([data-page="theories"]) .tk-zone > .pk{top:calc(100% + 10px); left:0;}
:where([data-page="theories"]) .pk-lift{color:var(--color-action-success); background:rgba(30,158,118,.12);}
:where([data-page="theories"]) .pk-lift.down{color:var(--color-action-danger); background:rgba(214,69,69,.1);}
:where([data-page="theories"]) .pk-slot{display:inline-block; font-size:10.5px; font-weight:600; color:rgba(14,124,136,.9); background:rgba(14,124,136,.1); border-radius:4px; padding:0 6px; margin:0 3px 2px 0;}
:where([data-page="theories"]) .pk-slot-pick{color:#725A00; background:rgba(138,109,0,.12);}
/* Template picker hangs off the kicker's button, right-aligned. */
:where([data-page="theories"]) .mt-template-anchor{position:relative;}
:where([data-page="theories"]) .mt-template-anchor > .pk{left:auto; right:0; top:calc(100% + 8px);}
:where([data-page="theories"]) .mt-template-btn{border:1px solid rgba(2,19,41,.18); border-radius:var(--radius-control); padding:0 14px; height:36px;}
:where([data-page="theories"]) .mt-template-btn:disabled{opacity:.45; cursor:not-allowed;}
:where([data-page="theories"]) .mt-template-pk .pk-topic{font-size:12px;}
/* Run box validation uses the section's error styling. */
:where([data-page="theories"]) .run-box.invalid .b-section-label{color:var(--color-action-danger);}
:where([data-page="theories"]) .run-box .field-error, :where([data-page="theories"]) .mt-save-error{display:flex;}
:where([data-page="theories"]) .run-pin.off{opacity:.55; cursor:not-allowed;}
:where([data-page="theories"]) .builder-card .btn:disabled{opacity:.45; cursor:not-allowed;}
:where([data-page="theories"]) .mt-saved-flash{display:inline-block;}
:where([data-page="theories"]) .result-sub{font-size:11.5px; color:rgba(225,230,236,.6);}
:where([data-page="theories"]) .mt-result .season-strip .data-table td b{color:var(--color-white);}
/* Run history actions and the breakdown panel. */
:where([data-page="theories"]) .rh-actions{display:flex; gap:6px; justify-content:flex-end; white-space:nowrap;}
:where([data-page="theories"]) .rh-action{background:rgba(14,124,136,.08); border:none; border-radius:var(--radius-control); color:#0E7C88; font-family:var(--font-body); font-size:11.5px; font-weight:600; padding:6px 10px; cursor:pointer; transition:background .12s ease;}
:where([data-page="theories"]) .rh-action:hover{background:rgba(14,124,136,.16);}
:where([data-page="theories"]) .rh-action:disabled{opacity:.5; cursor:default;}
:where([data-page="theories"]) .rb{margin-top:22px; padding-top:18px; border-top:1px solid var(--color-border-subtle);}
:where([data-page="theories"]) .rb-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px;}
:where([data-page="theories"]) .rb-kicker{font-size:10.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:rgba(2,19,41,.45);}
:where([data-page="theories"]) .rb-title{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:24px; letter-spacing:.2px; color:var(--color-text-primary); margin:2px 0 0; line-height:1.15;}
:where([data-page="theories"]) .rb-actions{display:flex; gap:8px; flex-shrink:0;}
:where([data-page="theories"]) .rb-note{font-size:12px; line-height:1.55; color:rgba(2,19,41,.62); margin:0 0 12px;}
:where([data-page="theories"]) .rb-wrap{background:transparent; border:none; box-shadow:none; margin-bottom:0; position:relative;}
:where([data-page="theories"]) .rb-table td{font-size:12.5px;}
:where([data-page="theories"]) .rb-table th.num, :where([data-page="theories"]) .rb-table td.num{text-align:right;}
:where([data-page="theories"]) .rb-name{font-weight:600;}
:where([data-page="theories"]) .rb-link{background:none; border:none; padding:0; font:inherit; color:#0A5F68; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
:where([data-page="theories"]) .rb-cell{font-variant-numeric:tabular-nums;}
:where([data-page="theories"]) .rb-fixtures tr.rb-hit td{background:rgba(30,158,118,.08);}
:where([data-page="theories"]) .rb-fixtures tr.rb-miss td{background:rgba(214,69,69,.07);}
:where([data-page="theories"]) .rb-fixture{color:var(--color-text-primary); font-weight:500;}
:where([data-page="theories"]) .rb-fixture b{font-weight:700;}
:where([data-page="theories"]) .rb-fixtures .pill{cursor:help;}
:where([data-page="theories"]) .ts-tip{position:fixed; z-index:90; max-width:320px; background:var(--color-navy-base); color:var(--color-light-neutral); border-radius:var(--radius-control); padding:9px 12px; font-size:11.5px; line-height:1.5; pointer-events:none; box-shadow:0 10px 28px rgba(2,19,41,.3);}
:where([data-page="theories"]) .ts-tip b{color:#FFFFFF;}
/* Saved theories table: local search, sortable headers, pager. */
:where([data-page="theories"]) .mt-table-tools{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
:where([data-page="theories"]) .mt-table-search{width:320px; max-width:100%;}
:where([data-page="theories"]) .mt-table-count{font-size:12px; color:rgba(2,19,41,.5);}
:where([data-page="theories"]) .mt-sort{background:none; border:none; padding:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:4px;}
:where([data-page="theories"]) .mt-sort.on{color:var(--color-text-primary);}
:where([data-page="theories"]) .mt-sort-dir{font-size:8px;}
:where([data-page="theories"]) .mt-table-foot{margin-top:4px;}
:where([data-page="theories"]) .up-table tbody tr.up-row{cursor:pointer;}
:where([data-page="theories"]) .up-table tbody tr.up-row:hover td{background:rgba(2,19,41,.03);}
/* Visitor notice (the page needs a session). */
:where([data-page="theories"]) .mt-guest{display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-top:44px;}
:where([data-page="theories"]) .mt-guest p{font-size:15px; line-height:1.6; color:rgba(2,19,41,.7); margin:0; max-width:560px;}
@media (max-width:760px){
  :where([data-page="theories"]) .rb-table{min-width:520px;}
  :where([data-page="theories"]) .mt-table-search{width:100%;}
}

/* ===== Predictions page (src/components/predictions), the template's predictions + predhist pages ===== */
/* Team names are real links; the template drew them as role=link spans. */
:where([data-page="predictions"],[data-page="predhist"]) .xp-teams a{color:inherit; text-decoration:none;}
:where([data-page="predictions"],[data-page="predhist"]) .xp-teams a:hover{text-decoration:underline; text-underline-offset:3px;}
/* The back link and the "Show ..." buttons are anchors here. */
:where([data-page="predhist"]) a.pl-back{text-decoration:none;}
:where([data-page="predictions"],[data-page="predhist"]) a.xp-headbtn{text-decoration:none;}
/* Loading, error and no-data notes in the list slot (the empty state without its filter link). */
:where([data-page="predictions"],[data-page="predhist"]) .xp-note{padding:56px 20px; text-align:center; font-size:14px; color:rgba(2,19,41,.6);}
:where([data-page="predictions"],[data-page="predhist"]) .xp-note button{margin-left:6px; border:0; background:none; padding:0; font:inherit; font-weight:700; color:#0E7C88; text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
:where([data-page="predhist"]) .xp-dk .xp-note{color:rgba(225,230,236,.7);}
:where([data-page="predhist"]) .xp-dk .xp-note button{color:#61E1EE;}
/* Accuracy tiles missing (efficiency call failed or nothing graded yet). */
:where([data-page="predhist"]) .xp-acc-none{margin:0; font-size:14px; color:rgba(2,19,41,.6);}
/* Member whose plan has no predictions access. */
:where([data-page="predictions"],[data-page="predhist"]) .xp-locked{display:flex; flex-direction:column; align-items:flex-start; gap:16px;}
:where([data-page="predictions"],[data-page="predhist"]) .xp-locked p{font-size:15px; line-height:1.6; color:rgba(2,19,41,.7); margin:0; max-width:560px;}
/* Visitor notice under the hero, the same block as My Theories' .mt-guest. */
:where([data-page="predictions"]) .xp-guest{display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-top:44px;}
:where([data-page="predictions"]) .xp-guest p{font-size:15px; line-height:1.6; color:rgba(2,19,41,.7); margin:0; max-width:560px;}
/* A pick the API has not graded yet keeps a neutral badge on the dark band (the template only drew held / missed there). */
:where([data-page="predhist"]) .xp-dk .xp-pick:not(.ok):not(.miss){background:rgba(225,230,236,.14); color:#FFFFFF;}

/* ===== Standings page (src/components/league), the template's league page ===== */
/* Loading, error and visitor states share the page wrapper so the footer stays in place. */
:where([data-page="league"]) .lg-state, :where([data-page="league"]) .lg-guest{padding:64px 32px; color:var(--color-text-primary);}
:where([data-page="league"]) .lg-state h1, :where([data-page="league"]) .lg-guest h1{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:40px; line-height:1; margin:0 0 16px;}
:where([data-page="league"]) .lg-state p, :where([data-page="league"]) .lg-guest p{font-size:15px; color:rgba(2,19,41,.62); margin:0;}
:where([data-page="league"]) .lg-guest p{margin-bottom:20px; max-width:560px;}
/* The hero keeps the previous table while another season loads. */
main[data-page="league"] .lg-hero.is-refreshing .lg-kpis, main[data-page="league"] .lg-hero.is-refreshing .pf-name{opacity:.6; transition:opacity .2s;}
/* The crest slot shows the country flag (the API has no league logo); emoji fallback when there is no image. */
main[data-page="league"] .lg-crest .lg-flag{font-size:64px; line-height:1;}
/* Team and player names are real links; the template drew plain text in role=link rows. */
main[data-page="league"] .lg-team a, main[data-page="league"] .lg-sn-name, main[data-page="league"] .lg-bc-name, main[data-page="league"] .lg-sc-pl a{color:inherit; text-decoration:none;}
main[data-page="league"] .lg-team a:hover, main[data-page="league"] .lg-sc-pl a:hover{text-decoration:underline;}
main[data-page="league"] .lg-tbl tbody tr[role="link"], main[data-page="league"] .lg-sn-lead, main[data-page="league"] .lg-sn-run li{cursor:pointer;}
main[data-page="league"] .lg-tbl tbody tr[role="link"]:hover td{background:rgba(2,19,41,.04);}
main[data-page="league"] .lg-tbl.dk tbody tr[role="link"]:hover td{background:rgba(225,230,236,.06);}
/* A leader without a provider photo keeps the template's navy slot with the player's initial hidden behind the badge. */
main[data-page="league"] .lg-sn-ph.no-photo{background-image:linear-gradient(160deg, #06326B, #031C3D);}
/* Empty-state copy next to a dark hero (no table for the season, failed league list). */
main[data-page="league"] .lg-note-dark{margin:0; padding:24px 0; font-size:14px; color:rgba(2,19,41,.62);}
main[data-page="league"] .lg-note-dark.wrap{padding:16px 32px 0;}
/* Chart marks and list rows that open a player page. */
main[data-page="league"] .lg-ch circle:hover{stroke-width:3;}
/* League chooser (`/standings/` without an id). */
main[data-page="league"] .lg-pick{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:28px 40px;}
main[data-page="league"] .lg-pick-group h3{margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:rgba(2,19,41,.55);}
main[data-page="league"] .lg-pick-item{display:flex; align-items:center; gap:12px; padding:10px 12px; margin:0 -12px; border-radius:var(--radius-6); color:var(--color-text-primary); text-decoration:none; font-size:15px; font-weight:600;}
main[data-page="league"] .lg-pick-item:hover{background:rgba(2,19,41,.05);}
main[data-page="league"] .lg-pick-flag{display:inline-flex; align-items:center; justify-content:center; width:24px; height:18px; font-size:18px; line-height:1;}
main[data-page="league"] .lg-pick-flag img{width:24px; height:18px; object-fit:cover; border-radius:2px;}

/* ===== Head to head (src/components/h2h) ===== */
/* Visitor notice under the hero, the same block as My Theories' .mt-guest. */
:where([data-page="h2h"]) .h2-guest{display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-top:44px;}
:where([data-page="h2h"]) .h2-guest p{font-size:15px; line-height:1.6; color:rgba(2,19,41,.7); margin:0; max-width:560px;}
/* Team names in the meetings table link to the team page; the row itself opens the match. */
main[data-page="h2h"] .h2-tbl td a{color:inherit; text-decoration:none;}
main[data-page="h2h"] .h2-tbl td a:hover{text-decoration:underline; text-underline-offset:3px;}
/* Swap is pointless with no team picked. */
main[data-page="h2h"] .h2-sw:disabled{opacity:.4; cursor:default; background:transparent;}

/* ===== Player page (src/components/player), the template's player page ===== */
/* Loading, error, no-id and visitor states share the page wrapper so the footer stays in place. */
:where([data-page="player"], [data-page="coach"]) .pf-state{padding:64px 32px; color:var(--color-text-primary);}
:where([data-page="player"], [data-page="coach"]) .pf-state h1{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:40px; line-height:1; margin:0 0 16px;}
:where([data-page="player"], [data-page="coach"]) .pf-state p{font-size:15px; color:rgba(2,19,41,.62); margin:0;}
:where([data-page="player"], [data-page="coach"]) .pf-guest p{margin-bottom:20px; max-width:560px;}
/* The hero keeps the previous season's numbers while the next one loads. */
main[data-page="player"] .pf-hero.is-refreshing .pf-kpis, main[data-page="player"] .pf-hero.is-refreshing .pf-bars{opacity:.6; transition:opacity .2s;}
/* Provider photos are small squares on white: contain them instead of the template's portrait crop. */
main[data-page="player"] .pf-photo{background-size:contain; background-repeat:no-repeat; background-position:center bottom;}
main[data-page="player"] .pf-photo.no-photo{display:flex; align-items:center; justify-content:center; background:rgba(225,230,236,.12); border:1px solid rgba(225,230,236,.2);}
main[data-page="player"] .pf-photo-init{font-family:var(--font-display); font-weight:800; font-size:72px; color:rgba(225,230,236,.7);}
/* Club line links to the team page. */
main[data-page="player"] .pf-team-link{display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none;}
main[data-page="player"] .pf-team-link:hover{color:#FFFFFF; text-decoration:underline; text-underline-offset:3px;}
/* Scoring below the 450-minute publish rule and the season without statistics. */
main[data-page="player"] .pf-score-empty{padding:28px 30px; border:1px solid rgba(2,19,41,.09); border-radius:var(--radius-container); background:#FFFFFF; font-size:14px; color:rgba(2,19,41,.62);}
main[data-page="player"] .pf-nostats .pf-lede{margin-top:10px;}
/* Radar tags of goalkeeping measures for outfield players, like the list rows. */
main[data-page="player"] .pf-tag.gk:not(.on){color:rgba(4,39,85,.45); border-color:rgba(2,19,41,.12);}
/* Chart notes on the dark band and the clickable points. */
main[data-page="player"] .pf-chart-note{margin:0; padding:120px 0; text-align:center; font-size:14px; color:rgba(225,230,236,.66);}
main[data-page="player"] .pf-pt{cursor:pointer;}

/* ===== Profile and subscribe pages (src/components/profile), the template's profile page ===== */
/* Loading, error and visitor states on the dark page. */
:where([data-page="profile"]) .pr-state{padding:64px 32px; color:#E1E6EC;}
:where([data-page="profile"]) .pr-state h1{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:40px; line-height:1; margin:0 0 16px; color:#FFFFFF;}
:where([data-page="profile"]) .pr-state p{font-size:15px; color:rgba(225,230,236,.7); margin:0;}
:where([data-page="profile"]) .pr-guest p{margin-bottom:20px; max-width:560px;}
/* Form bits the template did not draw: checkbox rows, inline errors, empty copy. */
main[data-page="profile"] .pr-check{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.45; color:#E1E6EC; cursor:pointer;}
main[data-page="profile"] .pr-check input{width:18px; height:18px; margin:1px 0 0; accent-color:#61E1EE; flex:none;}
main[data-page="profile"] .pr-f input[readonly]{color:rgba(225,230,236,.7); background:rgba(1,3,11,.2); cursor:default;}
main[data-page="profile"] .pr-error{margin-right:auto; font-size:13px; font-weight:600; color:#F59A92;}
main[data-page="profile"] .pr-cancel-txt .pr-error{margin:6px 0 0;}
main[data-page="profile"] .pr-empty{margin:0; padding:10px 0; font-size:13.5px; color:rgba(225,230,236,.6);}
main[data-page="profile"] .pr-note{margin:12px 0 0; font-size:12.5px; color:#FFDB00;}
main[data-page="profile"] .pr-lg-head-act{display:flex; align-items:center; gap:14px;}
main[data-page="profile"] .pr-lg[disabled]{opacity:.45; cursor:not-allowed;}
main[data-page="profile"] .pr-lg[disabled].on{opacity:.8;}
main[data-page="profile"] .pr-link[disabled]{opacity:.4; cursor:not-allowed;}
/* The free / guest plan card drops the gold frame. */
main[data-page="profile"] .pr-plan.free{background:var(--color-bg-elevated); border-color:var(--color-border-subtle);}
main[data-page="profile"] .pr-plan.free .pr-ended{justify-content:space-between;}
main[data-page="profile"] .pr-ended .btn{text-decoration:none;}
/* Plan change confirmation: the template's cancel block in neutral colours. */
main[data-page="profile"] .pr-confirm{margin-top:20px; padding:20px 22px; border-radius:8px; display:flex; align-items:center; gap:18px 20px; flex-wrap:wrap; background:rgba(97,225,238,.06); border:1px solid rgba(97,225,238,.3);}
main[data-page="profile"] .pr-confirm .pr-cancel-ic{background:rgba(97,225,238,.12); color:#61E1EE;}
/* Payment methods: header action, inline default pill, embedded card form. */
main[data-page="profile"] .pr-card-h-act{margin-left:auto;}
main[data-page="profile"] .pr-card-h-act svg{width:16px; height:16px;}
main[data-page="profile"] .pr-brand{text-transform:capitalize;}
main[data-page="profile"] .pr-pill-inline{margin-left:10px; vertical-align:2px;}
main[data-page="profile"] .pr-row .pr-icon-btn[disabled], main[data-page="profile"] .pr-row .btn[disabled]{opacity:.4; cursor:not-allowed;}
main[data-page="profile"] .pr-checkout{margin:8px 0 18px; padding:18px; border-radius:8px; background:#FFFFFF; color:#0B1B2E;}
main[data-page="profile"] .pr-checkout-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:14px;}
main[data-page="profile"] .pr-checkout-h .pr-link{color:rgba(2,19,41,.7);}
main[data-page="profile"] .pr-checkout-mount{min-height:320px;}
main[data-page="profile"] .pr-inv-x a{text-decoration:none;}
main[data-page="profile"] .pr-inv-x a + a{margin-left:8px;}
main[data-page="profile"] .pr-inv-s .pr-pill{text-transform:capitalize;}
/* Subscribe page: hero without the avatar, Stripe's pricing table on a card, trial offer. */
main[data-page="profile"] .sb-hero .pr-id-txt{flex:1 1 auto;}
main[data-page="profile"] .sb-state{display:flex; flex-direction:column; align-items:flex-start; gap:10px; font-size:14px; color:rgba(225,230,236,.7);}
main[data-page="profile"] .sb-state b{font-size:16px; color:#FFFFFF;}
main[data-page="profile"] .sb-state .btn{margin-top:8px;}
main[data-page="profile"] .sb-trial{margin:0 0 24px;}
main[data-page="profile"] .sb-table{padding:24px 8px; border-radius:8px; background:#FFFFFF;}
/* First-login setup dialog on the auth modal classes (src/components/profile/FirstLoginModal.tsx). */
.fl-photo{display:flex; align-items:center; gap:16px; margin:4px 0 18px;}
.fl-avatar{width:64px; height:64px; flex:none; border-radius:50%; background:rgba(2,19,41,.06) center/cover no-repeat; border:1px solid rgba(2,19,41,.14); display:flex; align-items:center; justify-content:center; color:rgba(2,19,41,.45);}
.fl-avatar svg{width:28px; height:28px;}
.fl-photo-txt{display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:rgba(2,19,41,.6);}
.fl-photo-txt b{font-size:14px; color:var(--color-text-primary);}
.fl-photo-txt .auth-switch-link{align-self:flex-start; margin-top:4px;}
.fl-hint{margin:6px 0 0; font-size:12.5px; color:rgba(2,19,41,.6);}
.auth-input.is-valid{border-color:#1F6B55;}
.auth-input.is-invalid{border-color:#B3261E;}
.fl-sug{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; font-size:12.5px; color:rgba(2,19,41,.6);}
.fl-sug button{height:28px; padding:0 10px; border:1px solid rgba(2,19,41,.22); border-radius:var(--radius-6); background:#FFFFFF; font-family:var(--font-body); font-size:12.5px; font-weight:600; color:#042755; cursor:pointer;}
.fl-sug button:hover{border-color:#042755;}
.fl-select{appearance:none; -webkit-appearance:none; cursor:pointer;}
.fl-modal .auth-submit{margin-top:18px;}

/* ===== Blog (R8 port): markdown body additions, index extras, Elite wall states ===== */
.bp-art h3{margin:32px 0 12px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:22px; line-height:1.1; letter-spacing:.2px; color:#FFFFFF;}
.bp-art ul, .bp-art ol{margin:0 0 20px; padding-left:24px; font-size:17px; line-height:1.75;}
.bp-art li{margin:0 0 6px;}
.bp-art li > p{margin:0;}
.bp-art a{color:#4FCBD9; text-decoration:underline; text-underline-offset:3px;}
.bp-art a:hover{color:#FFFFFF;}
.bp-art strong{color:#FFFFFF;}
.bp-art img{max-width:100%; height:auto; border-radius:var(--radius-container,8px); margin:8px 0 20px;}
.bp-art code{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size:.92em; padding:2px 6px; border-radius:4px; background:var(--color-bg-elevated); border:1px solid var(--color-border-subtle);}
.bp-art pre{margin:0 0 20px; padding:16px 18px; overflow-x:auto; border-radius:var(--radius-container,8px); background:var(--color-bg-elevated); border:1px solid var(--color-border-subtle); font-size:14px; line-height:1.6;}
.bp-art pre code{padding:0; border:0; background:none;}
.bp-art hr{border:0; border-top:1px solid var(--color-border-subtle); margin:32px 0;}
.bp-table{overflow-x:auto; margin:0 0 24px;}
.bp-table table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.5;}
.bp-table th, .bp-table td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--color-border-subtle); vertical-align:top;}
.bp-table th{font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:rgba(225,230,236,.55);}
.bp-table td{color:rgba(225,230,236,.82);}
.bp-art > p:first-of-type{font-size:21px; line-height:1.6; color:#FFFFFF; margin-bottom:36px;}
.bp-gated .bp-quote:first-child{margin-top:0;}
/* The template shows the wall through body.is-auth / body.no-elite + data-elite; V2 renders it from React state, so the
   entitled member's loading and error states (no template counterpart) need their own display rule. */
main[data-page="blogpost"] .bp-wall[data-state="loading"], main[data-page="blogpost"] .bp-wall[data-state="error"]{display:block;}
.bp-wall-state{font-size:13px; color:rgba(225,230,236,.6);}
/* Coach line in the lineup head (v1's .md-lineup-formation slot; the class was dropped in v3). */
:where([data-page="match"]) .md-lineup-coach{font-size:11.5px; color:rgba(2,19,41,.45); margin-left:auto;}
.bp-side-empty{font-size:13px; color:rgba(225,230,236,.55);}
.bl-tag-chip{display:inline-flex; align-items:center; gap:8px;}
.bl-tag-chip b{font-weight:700;}
.bl-tag-chip .bl-tag-x{display:inline-flex; width:16px; height:16px; align-items:center; justify-content:center; border-radius:50%; background:rgba(2,19,41,.12); font-size:11px; line-height:1;}
.bl-sub-note{margin:6px 0 0; font-size:12.5px; color:rgba(225,230,236,.5);}
main[data-page="blogpost"] .md-discussion{margin-top:56px;}

/* ===== Blog editor (/admin/blog/): on the profile page's form classes, `adm-` additions ===== */
.adm-blog .adm-hero{padding-bottom:28px;}
.adm-wrap{display:flex; flex-direction:column; gap:20px;}
.adm-h2{margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:22px; line-height:1.1; color:#FFFFFF;}
.adm-note{margin:6px 0 0; font-size:13px; line-height:1.5; color:rgba(225,230,236,.55);}
.adm-empty{margin:18px 0 0; font-size:14px; color:rgba(225,230,236,.6);}
.adm-page-error{margin:0;}
.adm-list-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.adm-table-wrap{overflow-x:auto; margin-top:18px;}
.adm-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.adm-table th{padding:0 12px 10px 0; text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:rgba(225,230,236,.5); border-bottom:1px solid rgba(225,230,236,.12); white-space:nowrap;}
.adm-table td{padding:12px 12px 12px 0; border-bottom:1px solid rgba(225,230,236,.08); vertical-align:middle; color:rgba(225,230,236,.78); white-space:nowrap;}
.adm-table tbody tr{cursor:pointer;}
.adm-table tbody tr:hover td{background:rgba(225,230,236,.04);}
.adm-table tbody tr:focus-visible{outline:2px solid var(--color-action-primary); outline-offset:-2px;}
.adm-td-title{white-space:normal !important; min-width:240px;}
.adm-title{display:block; font-weight:600; color:#FFFFFF;}
.adm-slug{display:block; margin-top:2px; font-size:12px; color:rgba(225,230,236,.45);}
.adm-td-act{text-align:right; padding-right:0 !important;}
.adm-form-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.adm-form-head .pl-back{margin:0;}
.adm-pills{display:flex; gap:6px; margin-left:auto;}
.adm-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:28px;}
.adm-span{grid-column:1 / -1;}
.adm-ta{width:100%; box-sizing:border-box; min-height:84px; padding:12px 14px; border:1px solid var(--color-border-strong); border-radius:6px; background:rgba(1,3,11,.35); color:#E1E6EC; font-family:var(--font-body); font-size:14px; line-height:1.5; resize:vertical;}
.adm-ta:focus-visible, .adm-md:focus-visible, .adm-tags:focus-within{outline:2px solid #4FCBD9; outline-offset:2px;}
.adm-img-row{display:flex; align-items:center; gap:12px;}
.adm-img-row input{flex:1;}
.adm-thumb{flex:none; width:72px; height:46px; object-fit:cover; border-radius:6px; border:1px solid var(--color-border-subtle); background:rgba(1,3,11,.35);}
.adm-thumb-empty{display:block;}
.adm-tags{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:46px; padding:6px 10px; border:1px solid var(--color-border-strong); border-radius:6px; background:rgba(1,3,11,.35);}
.adm-tags input{flex:1 1 140px; min-width:0; height:30px; padding:0 4px; border:0; background:none; color:#E1E6EC; font-family:var(--font-body); font-size:14px;}
.adm-tags input:focus{outline:none;}
.adm-tag{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 8px 0 10px; border-radius:6px; font-size:12.5px; font-weight:600; color:#E1E6EC; background:rgba(225,230,236,.12); border:1px solid rgba(225,230,236,.22);}
.adm-tag button{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:0; border-radius:50%; background:rgba(225,230,236,.14); color:#E1E6EC; font-size:13px; line-height:1; cursor:pointer;}
.adm-tag button:hover{background:rgba(225,230,236,.3);}
.adm-seg{display:inline-flex; padding:3px; border:1px solid var(--color-border-strong); border-radius:6px; background:rgba(1,3,11,.35);}
.adm-seg button{height:34px; padding:0 14px; border:0; border-radius:4px; background:none; color:rgba(225,230,236,.65); font-family:var(--font-body); font-size:12.5px; font-weight:600; cursor:pointer;}
.adm-seg button.on{background:#FFFFFF; color:#0B1B2E;}
.adm-seg button:focus-visible{outline:2px solid #4FCBD9; outline-offset:2px;}
.adm-body{display:flex; flex-direction:column; gap:8px; min-width:0;}
.adm-label{font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:rgba(225,230,236,.55);}
.adm-md-wrap{display:flex; flex-direction:column; gap:12px; min-width:0;}
.adm-md-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.adm-md-bar .adm-seg{margin-left:auto;}
.adm-md-bar .btn[disabled]{opacity:.38; cursor:not-allowed;}
.adm-help{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px 20px; margin:0; padding:14px 16px; border:1px solid var(--color-border-subtle); border-radius:6px; background:rgba(1,3,11,.3);}
.adm-help div{display:flex; flex-direction:column; gap:2px;}
.adm-help dt{font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:rgba(225,230,236,.55);}
.adm-help dd{margin:0; font-size:13px; line-height:1.5; color:rgba(225,230,236,.8); font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);}
.adm-md-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-width:0;}
.adm-md-grid.has-preview{grid-template-columns:repeat(2, minmax(0,1fr));}
.adm-md{width:100%; box-sizing:border-box; min-height:520px; padding:16px 18px; border:1px solid var(--color-border-strong); border-radius:6px; background:rgba(1,3,11,.35); color:#E1E6EC; font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size:13.5px; line-height:1.6; resize:vertical; tab-size:2;}
.adm-preview{padding:24px 26px; border:1px solid var(--color-border-subtle); border-radius:8px; min-height:520px; max-height:80vh; overflow:auto;}
.adm-preview .bp-art p{font-size:15px;}
.adm-preview .bp-art > p:first-of-type{font-size:18px;}
.adm-preview .bp-art h2{font-size:26px; margin-top:32px;}
.adm-bar-left{display:flex; align-items:center; min-width:0;}
.adm-bar-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.adm-confirm{display:inline-flex; align-items:center; gap:10px; font-size:13px; color:#FFDB00;}
.adm-danger{color:#FF7A7A;}
.adm-danger.btn-primary{background:#B23B3B; border-color:#B23B3B; color:#FFFFFF;}
.adm-blog .pr-saved{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#61E1EE;}
@media (max-width:900px){
  .adm-md-grid.has-preview{grid-template-columns:minmax(0,1fr);}
  .adm-md{min-height:320px;}
  .adm-preview{min-height:0;}
  .adm-blog .pr-grid{grid-template-columns:minmax(0,1fr);}
}

/* ---- Notifications (template R87 on the real feed; notifications-spec.md) ---- */
.ntf-sw-note{font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:rgba(225,230,236,.45); text-align:center;}
.pr-pane[data-pane="notifications"] .pr-error{margin:0; font-size:13px;}
@media (max-width:1024px){ .ntf-pref-sw .ntf-sw-note{text-align:left;} }

/* ===== Coach page (src/components/coach), the template's coach page ===== */
/* The template's white photo box without a provider photo: initials in ink. */
main[data-page="coach"] .cx-photo.no-photo{display:flex; align-items:center; justify-content:center;}
main[data-page="coach"] .pf-photo-init{font-family:var(--font-display); font-weight:800; font-size:72px; color:#042755;}
/* Club line and breakdown rows link to the team page. */
main[data-page="coach"] .pf-team-link{color:inherit; text-decoration:none;}
main[data-page="coach"] .pf-team-link:hover{color:#FFFFFF; text-decoration:underline; text-underline-offset:3px;}
main[data-page="coach"] .cx-tbl td:first-child a{color:inherit; text-decoration:none;}
main[data-page="coach"] .cx-tbl td:first-child a:hover{text-decoration:underline; text-underline-offset:3px;}

/* ===== Monitoring (/admin/monitoring/): on the blog editor's `adm-` classes, `mon-` additions ===== */
.adm-mon .adm-hero{padding-bottom:28px;}
.adm-mon .lg-tabs.mon-tabs{margin-bottom:4px;}
.adm-mon .adm-table tbody tr{cursor:default;}
.adm-mon .adm-table tbody tr:hover td{background:none;}
.adm-mon .adm-table tbody tr.mon-x{cursor:pointer;}
.adm-mon .adm-table tbody tr.mon-x:hover td{background:rgba(225,230,236,.04);}
.adm-mon .adm-table tbody tr.mon-x:focus-visible{outline:2px solid #61E1EE; outline-offset:-2px;}
.mon-tight{margin-top:0;}
.mon-tight .adm-table{font-size:13px;}
.mon-stack{display:flex; flex-direction:column; gap:12px;}
.mon-inline{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;}
.mon-acts{flex-wrap:nowrap; justify-content:flex-end; gap:6px;}
.adm-mon .pr-card > * + *:not(.adm-table-wrap){margin-top:14px;}
.mon-toolbar{margin-bottom:6px;}
.mon-foot{margin-top:14px;}
.mon-msg{margin:0; font-size:13px; line-height:1.5; color:#61E1EE;}
.mon-msg.bad{color:#F59A92;}
.mon-msg strong{color:#FFFFFF;}
.mon-pre{margin:0; padding:14px 16px; border:1px solid var(--color-border-subtle); border-radius:6px; background:rgba(1,3,11,.45); color:#E1E6EC; font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; max-height:420px; overflow:auto;}
.mon-pre.bad{border-color:rgba(245,154,146,.4); color:#F59A92;}
.mon-json{margin-top:4px;}
.mon-detail td{white-space:normal !important; padding:0 0 14px !important; background:none !important; border-bottom:0 !important;}
.mon-detail-in{display:flex; flex-direction:column; gap:10px; padding:14px 16px; border:1px solid var(--color-border-subtle); border-radius:6px; background:rgba(1,3,11,.3);}
.mon-detail-in .adm-table-wrap{margin-top:0;}
.mon-sub{font-size:12px; color:rgba(225,230,236,.45);}
.mon-wrap{white-space:normal !important; min-width:200px; overflow-wrap:anywhere;}
.mon-num{font-variant-numeric:tabular-nums;}
.mon-ok{color:#61E1EE; font-weight:600;}
.mon-bad{color:#F59A92; font-weight:600;}
.mon-caret{display:inline-block; width:14px; color:rgba(225,230,236,.45); font-size:11px;}
.mon-inline-title{display:inline;}
.mon-star{margin-right:4px; color:#FFDB00;}
.mon-indent{padding-left:22px !important; color:rgba(225,230,236,.6);}
.mon-season td{background:rgba(1,3,11,.2);}
.mon-h3{margin:0; font-size:15px; font-weight:700; color:#FFFFFF;}
.mon-form{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px 18px; align-items:end;}
.mon-form .pr-f input, .mon-form .pr-f select{height:42px;}
.mon-form .mon-f-wide{grid-column:span 2;}
.mon-form-act{display:flex; align-items:center; gap:14px; min-height:42px;}
.mon-f-id{flex:0 1 220px;}
.mon-f-id input{height:42px;}
.mon-f-btn{height:42px;}
.mon-f-search{flex:0 1 320px;}
.mon-f-search input{height:42px;}
.mon-f-select select{height:38px; padding:0 36px 0 12px; font-size:13px;}
.mon-checks{display:flex; flex-direction:column; gap:6px; margin-top:8px;}
.mon-check{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#E1E6EC; cursor:pointer;}
.mon-check input{width:16px; height:16px; margin:0; accent-color:#61E1EE; flex:none;}
.mon-link-btn{background:none; border:0; padding:0; font:inherit; font-size:12px; color:#61E1EE; cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.mon-link-btn:hover{color:#FFFFFF;}
.mon-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:20px 28px;}
.mon-suggest{position:relative;}
.mon-suggest-list{position:absolute; z-index:10; left:0; right:0; top:100%; margin-top:4px; max-height:260px; overflow:auto; border:1px solid var(--color-border-strong); border-radius:6px; background:#06203F; box-shadow:0 10px 30px rgba(0,0,0,.4);}
.mon-suggest-list button{display:block; width:100%; text-align:left; padding:8px 12px; border:0; background:none; color:#E1E6EC; font:inherit; font-size:13px; cursor:pointer;}
.mon-suggest-list button:hover, .mon-suggest-list button:focus-visible{background:rgba(225,230,236,.08); outline:none;}
.mon-stats{display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:rgba(225,230,236,.55);}
.mon-stats strong{color:#FFFFFF;}
.mon-chart{display:block; width:100%; max-width:760px; height:auto; margin-top:4px;}
.mon-chart-label{font-family:var(--font-body); font-size:9px; font-weight:600; fill:rgba(225,230,236,.45);}
.mon-chart-axis{font-family:var(--font-body); font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; fill:rgba(225,230,236,.6);}
.mon-chart-quad{font-family:var(--font-body); font-size:8px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;}
.mon-chart-dot{cursor:pointer; transition:r .15s ease, fill-opacity .15s ease;}
.mon-chart-dot:hover{r:6; fill-opacity:1;}
.mon-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding-top:8px; font-size:11px; color:rgba(225,230,236,.6);}
.mon-legend span{display:inline-flex; align-items:center; gap:5px;}
.mon-legend i{width:8px; height:8px; border-radius:50%;}
.mon-th-sort{all:unset; cursor:pointer; user-select:none; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;}
.mon-th-sort:hover{color:#FFFFFF;}
.mon-th-sort:focus-visible{outline:2px solid #61E1EE; outline-offset:2px;}
.mon-bar-th{width:140px;}
.mon-bar-track{height:6px; width:140px; border-radius:3px; background:rgba(225,230,236,.12); overflow:hidden;}
.mon-bar-fill{height:100%; border-radius:3px; transition:width .3s ease;}
.mon-comment{max-width:460px;}
.mon-comment-body{margin-bottom:4px; white-space:pre-wrap; color:#FFFFFF;}
.mon-notes{margin:6px 0 0; padding-left:16px; font-size:12px; color:rgba(225,230,236,.5);}
.mon-day{display:flex; align-items:baseline; gap:8px; margin:22px 0 6px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:15px; color:#FFFFFF;}
.mon-day small{font-family:var(--font-body); font-weight:400; text-transform:none; font-size:12px; color:rgba(225,230,236,.5);}
.mon-snap{min-width:170px; line-height:1.35; white-space:normal !important;}
.mon-snap strong{color:#FFFFFF;}
.mon-probs{font-size:11px; color:rgba(225,230,236,.5); font-variant-numeric:tabular-nums;}
.mon-tag{display:inline-block; margin-left:5px; padding:1px 6px; border-radius:4px; font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; vertical-align:middle;}
.mon-tag.ok{color:#61E1EE; background:rgba(97,225,238,.14);}
.mon-tag.bad{color:#F59A92; background:rgba(245,154,146,.14);}
.mon-tag.conf{color:#FFDB00; background:rgba(255,219,0,.12);}
.mon-summary{width:auto;}
.mon-summary th, .mon-summary td{padding-right:22px;}
.mon-row-held td:first-child{box-shadow:inset 3px 0 0 #61E1EE;}
.mon-row-missed td:first-child{box-shadow:inset 3px 0 0 #F59A92;}
@media (max-width:767px){
  .mon-bar-th{display:none;}
  .mon-form .mon-f-wide{grid-column:auto;}
}
/* Visually hidden header text (the blog editor's and monitoring tables); the template scopes its own `.sr-only` to the theories page. */
.adm-blog .sr-only, .adm-mon .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;}