/* app/look3/tokens.css */
/* WEB-LOOK-3 "Floodlight" tokens (LOOK3-1). Everything is scoped to
   html[data-look="3"], so with the flag off nothing here applies.
   Fonts come from app/look3/fonts.js (next/font/local sets --f-display/--f-body/--f-mono).
   Accent rule: --accent is ALWAYS the brand ice blue under this look. The tenant
   colour lives in --league-accent (written by app/[league]/layout.js) and the
   section colour in --sec; both are markers only (dots, crest ring, icon tiles). */

html[data-look="3"] {
  --bg: #06080C;
  --bg-deep: #040508;
  --glow-1: 64 132 255;
  --glow-2: 70 210 235;

  --glass-top: rgb(255 255 255 / .065);
  --glass-bot: rgb(255 255 255 / .018);
  --glass-edge: rgb(255 255 255 / .07);
  --hair: rgb(255 255 255 / .075);
  --lift: 0 1px 0 0 var(--glass-edge) inset, 0 24px 48px -28px rgb(0 0 0 / .8);

  --text: #EEF2F7;
  --text-2: #AEB8C6;
  --text-3: #8B96A6;

  --brand-accent: #4DB8FF;
  --accent: var(--brand-accent);
  --accent-hover: #74C8FF;
  --accent-press: #39A3EC;
  --on-accent: #03121D;
  --accent-soft: rgb(77 184 255 / .12);

  --live: #FF5D62;
  --good: #4FD08B;
  --bad: #FF7A7A;

  --sec-leagues: #F5B14C;
  --sec-cards: #A98BFF;
  --sec-manager: #6CB6FF;
  --sec-manage: #FF8A6E;
  --sec-admin: #A8D8EA;
  --sec: var(--sec-leagues);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-sm: 8px; --r: 12px; --r-lg: 18px;
  --scoop: 20px;
  --tap: 44px;
  --page: 1200px;
  --label-min: 12px;

  color-scheme: dark;
}

/* The old per-section accent (globals.css body[data-section]) becomes a marker colour. */
html[data-look="3"] body[data-section] { --accent: var(--brand-accent); }
html[data-look="3"] body[data-section="home"] { --sec: var(--sec-leagues); }
html[data-look="3"] body[data-section="cardgame"] { --sec: var(--sec-cards); }
html[data-look="3"] body[data-section="manager"] { --sec: var(--sec-manager); }
html[data-look="3"] body[data-section="manage"] { --sec: var(--sec-manage); }
html[data-look="3"] body[data-section="admin"] { --sec: var(--sec-admin); }

html[data-look="3"] body {
  font-family: var(--f-body), system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* app/look3/header.css */
/* WEB-LOOK-3 "Floodlight" header (LOOK3-4a). Everything is scoped to html[data-look="3"]; with the flag off the
   header is never rendered. Geometry follows design/web-look-3/mock.css (.top, .brand, .nav, .iconbtn, .search, .me).
   The header sits in the page flow (not fixed), like the mock, so the old body padding for the rail / top bar /
   tab bar (nav.css) is reset here. */
html[data-look="3"] body { padding: 0; }
html[data-look="3"] .skip-link { display: block; }
html[data-look="3"] .side-rail, html[data-look="3"] .tab-bar, html[data-look="3"] .top-bar { display: none; }
/* The page headers' own bell / account / link copies are replaced by the global header at every width. */
html[data-look="3"] .nav .desktop-nav-links, html[data-look="3"] .nav .notif-bell, html[data-look="3"] .nav .auth-status { display: none !important; }

html[data-look="3"] .l3-top { position: relative; z-index: 110; }
html[data-look="3"] .l3-wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--s6); height: 72px; display: flex; align-items: center; gap: var(--s5); }
html[data-look="3"] .l3-top a, html[data-look="3"] .l3-top button { text-decoration: none; }
html[data-look="3"] .l3-top :is(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html[data-look="3"] .l3-brand { display: flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--text); }
html[data-look="3"] .l3-mark { flex: none; width: 30px; height: 30px; }
html[data-look="3"] .l3-word { font-family: var(--f-display), system-ui, sans-serif; font-stretch: 125%; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
html[data-look="3"] .l3-word span { font-family: var(--f-body), system-ui, sans-serif; font-stretch: 100%; font-weight: 400; text-transform: none; color: var(--text-2); letter-spacing: 0; margin-left: 3px; }

html[data-look="3"] .l3-nav { display: flex; gap: var(--s1); margin-left: var(--s5); }
html[data-look="3"] .l3-nav a { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px; border-radius: 10px; color: var(--text-2); font-weight: 500; font-size: 14.5px; }
html[data-look="3"] .l3-nav a:hover { color: var(--text); background: rgb(255 255 255 / .04); }
html[data-look="3"] .l3-nav a[aria-current] { color: var(--text); }
html[data-look="3"] .l3-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--accent)); opacity: .9; }

html[data-look="3"] .l3-end { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
html[data-look="3"] .l3-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-look="3"] .l3-iconbtn,
html[data-look="3"] .l3-end .notif-bell-btn { flex: none; width: var(--tap); height: var(--tap); display: grid; place-items: center; padding: 0; border-radius: 12px; color: var(--text-2); background: none; border: 0; box-shadow: none; transform: none; cursor: pointer; position: relative; }
html[data-look="3"] .l3-iconbtn:hover,
html[data-look="3"] .l3-end .notif-bell-btn:hover { color: var(--text); background: rgb(255 255 255 / .05); border: 0; transform: none; }
html[data-look="3"] .l3-end .notif-bell-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }
html[data-look="3"] .l3-end .notif-badge { top: 6px; right: 6px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--bg); }

html[data-look="3"] .l3-search { display: flex; align-items: center; gap: 10px; min-height: var(--tap); min-width: 230px; margin-right: var(--s2); padding: 0 8px 0 14px; border: 0; border-radius: 12px; color: var(--text-3); background: rgb(255 255 255 / .04); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); font: inherit; font-size: 14px; white-space: nowrap; cursor: text; text-align: left; text-transform: none; letter-spacing: 0; clip-path: none; }
html[data-look="3"] .l3-search:hover, html[data-look="3"] .l3-search:focus-within { color: var(--text-2); background: rgb(255 255 255 / .06); }
html[data-look="3"] .l3-search:focus-within { box-shadow: 0 0 0 2px var(--accent); }
html[data-look="3"] .l3-search-input { flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; outline: none; box-shadow: none; clip-path: none; appearance: none; }
html[data-look="3"] .l3-search-input::placeholder { color: var(--text-3); }
html[data-look="3"] .l3-search-input::-webkit-search-cancel-button { appearance: none; }
html[data-look="3"] .l3-search-sm[aria-current] { color: var(--accent); }
html[data-look="3"] .l3-search .l3-kbd { margin-left: auto; font: 500 11.5px var(--f-mono), monospace; color: var(--text-3); padding: 3px 7px; border-radius: 6px; background: rgb(255 255 255 / .05); }
html[data-look="3"] .l3-search-sm { display: none; }

html[data-look="3"] .l3-me { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: var(--tap); min-height: var(--tap); margin-left: var(--s1); padding: 0 10px 0 6px; border: 0; border-radius: 12px; background: none; box-shadow: none; clip-path: none; color: var(--text); font: inherit; font-weight: 500; font-size: 14.5px; text-transform: none; letter-spacing: 0; cursor: pointer; }
html[data-look="3"] .l3-me:hover { background: rgb(255 255 255 / .05); }
html[data-look="3"] .l3-me img { box-shadow: 0 0 0 2px rgb(255 255 255 / .08); }
html[data-look="3"] .l3-nm { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-look="3"] .l3-chev { color: var(--text-3); flex: none; }
html[data-look="3"] .l3-signin { margin-left: var(--s1); white-space: nowrap; }
html[data-look="3"] .l3-top .top-account-slot { display: inline-block; width: 52px; height: var(--tap); }
html[data-look="3"] .l3-top .rail-account-menu { top: calc(100% + 6px); right: 0; }

@media (max-width: 760px) {
  html[data-look="3"] .l3-wrap { padding: 0 var(--s4); height: 64px; gap: var(--s2); }
  html[data-look="3"] .l3-nav, html[data-look="3"] .l3-search, html[data-look="3"] .l3-nm, html[data-look="3"] .l3-chev { display: none; }
  html[data-look="3"] .l3-search-sm { display: grid; }
  html[data-look="3"] .l3-me { padding: 0 4px; margin-left: 0; }
  html[data-look="3"] .l3-signin { padding-inline: 12px; }
  html[data-look="3"] .l3-signin svg { display: none; }
}
@media (max-width: 420px) { html[data-look="3"] .l3-word span { display: none; } html[data-look="3"] .l3-wrap { gap: var(--s1); } }
/* 761-1000: the nav and a full search field do not both fit beside the brand; the field drops to its icon. */
@media (min-width: 761px) and (max-width: 1000px) {
  html[data-look="3"] .l3-search { display: none; }
  html[data-look="3"] .l3-search-sm { display: grid; }
  html[data-look="3"] .l3-nav { margin-left: var(--s2); }
}
html[data-look="3"] body.print-mode .l3-top { display: none; }
@media (forced-colors: active) { html[data-look="3"] .l3-nav a[aria-current] { outline: 1px solid Highlight; } }
/* No rail under the look: the page menu drawer opens from the screen edge (nav.css offsets it by the rail). */
html[data-look="3"] .side-menu-overlay, html[data-look="3"][data-nav-pinned="1"] .side-menu-overlay { left: 0; }

/* app/menu/menu.css */
/* WEB-LOOK-3 "Floodlight" menu drawer + live previews (LOOK3-5). Everything is scoped to html[data-look="3"]; with the
   flag off the drawer is never rendered. Geometry follows design/web-look-3/mock.css (.drawer, .mgroup, .mi, .mi-feat,
   .preview). The dialog shell is NavDrawer (.side-menu-overlay > .side-menu-panel.nav-drawer.l3m-drawer). */
html[data-look="3"] .side-menu-overlay:has(.l3m-drawer) { background: rgb(3 4 7 / .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 120; }
html[data-look="3"] .side-menu-panel.l3m-drawer {
  width: min(404px, 100%); max-width: 100%; border: 0; border-radius: 0; display: flex; flex-direction: column; overflow: visible;
  background: radial-gradient(120% 380px at 0 0, rgb(var(--glow-1) / .12), transparent 70%), linear-gradient(180deg, #0B0E14, #080A0F);
  box-shadow: 1px 0 0 var(--hair), 30px 0 60px -20px rgb(0 0 0 / .7);
}
html[data-look="3"] .l3m-drawer .side-menu-header { height: 72px; min-height: 72px; padding: 0 var(--s4) 0 var(--s5); border: 0; align-items: center; }
html[data-look="3"] .l3m-drawer .side-menu-header strong { font: 800 15px var(--f-display), system-ui, sans-serif; font-stretch: 125%; letter-spacing: .02em; text-transform: uppercase; }
html[data-look="3"] .l3m-drawer .nav-drawer-close { width: var(--tap); height: var(--tap); border-radius: 12px; color: var(--text-2); }
html[data-look="3"] .l3m-drawer .nav-drawer-close:hover { color: var(--text); background: rgb(255 255 255 / .05); }
html[data-look="3"] .l3m-drawer .nav-drawer-close:focus-visible, html[data-look="3"] .l3m-item:focus-visible, html[data-look="3"] .l3m-pv-row:focus-visible, html[data-look="3"] .l3m-pv-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-look="3"] .l3m-drawer .nav-drawer-body { display: block; padding: var(--s2) var(--s4) var(--s5); }
html[data-look="3"] .l3m-body { display: block; }

html[data-look="3"] .l3m-scoop { filter: drop-shadow(0 18px 24px rgb(0 0 0 / .45)); }
html[data-look="3"] .l3m-feat { -webkit-mask: radial-gradient(circle var(--scoop, 22px) at 100% 0, #0000 calc(100% - .5px), #000 100%); mask: radial-gradient(circle var(--scoop, 22px) at 100% 0, #0000 calc(100% - .5px), #000 100%); }
html[data-look="3"] .l3m-group { margin-top: var(--s5); }
html[data-look="3"] .l3m-group-label { display: flex; justify-content: space-between; padding: 0 var(--s3) var(--s2); font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

html[data-look="3"] .l3m-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 64px; padding: 10px var(--s3); border-radius: 14px; color: var(--text); text-decoration: none; }
html[data-look="3"] .l3m-item:hover, html[data-look="3"] .l3m-item:focus-visible { background: rgb(255 255 255 / .05); }
html[data-look="3"] .l3m-item[aria-current] .l3m-t::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--c, var(--accent)); vertical-align: middle; }
html[data-look="3"] .l3m-tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--c, var(--accent)); background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--accent)) 18%, transparent), color-mix(in srgb, var(--c, var(--accent)) 6%, transparent)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
html[data-look="3"] .l3m-text { min-width: 0; }
html[data-look="3"] .l3m-t { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; }
html[data-look="3"] .l3m-d { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
html[data-look="3"] .l3m-chev { color: var(--text-3); opacity: 0; transition: opacity .15s, transform .15s; }
html[data-look="3"] .l3m-item:hover .l3m-chev, html[data-look="3"] .l3m-item:focus-visible .l3m-chev { opacity: 1; transform: translateX(2px); }

html[data-look="3"] .l3m-feat { position: relative; margin: 0 0 var(--s2); padding: 18px var(--s4) 18px var(--s3); border-radius: 16px; background: radial-gradient(140% 120% at 0 0, color-mix(in srgb, var(--accent) 24%, transparent), transparent 65%), linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); }
html[data-look="3"] .l3m-feat:hover, html[data-look="3"] .l3m-feat:focus-visible { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), rgb(255 255 255 / .03) 70%); }
html[data-look="3"] .l3m-feat .l3m-tile { color: var(--on-accent); background: var(--accent); box-shadow: none; }
html[data-look="3"] .l3m-feat .l3m-chev { opacity: 1; color: var(--accent); }
html[data-look="3"] .l3m-note { margin: var(--s5) var(--s3) 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
html[data-look="3"] .l3m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The preview: a glass panel against the drawer's right edge, level with the row (top is set inline). Desktop mice only. */
html[data-look="3"] .l3m-preview { position: fixed; z-index: 130; left: 416px; width: 380px; max-height: calc(100vh - 120px); overflow-y: auto; padding: var(--s5); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), #12161D; box-shadow: var(--lift); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: l3m-pv-in .14s ease-out; }
html[data-look="3"] .l3m-preview::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; } /* hover bridge across the gap from the drawer */
html[data-look="3"] .l3m-pv-head { font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .l3m-pv-rows { list-style: none; margin: var(--s3) 0 0; padding: 0; }
html[data-look="3"] .l3m-pv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: var(--tap); padding: 8px 0; color: var(--text); text-decoration: none; box-shadow: inset 0 1px 0 var(--hair); }
html[data-look="3"] .l3m-pv-rows li:first-child .l3m-pv-row { box-shadow: none; }
html[data-look="3"] .l3m-pv-row:hover .l3m-pv-main { text-decoration: underline; text-underline-offset: 3px; }
html[data-look="3"] .l3m-pv-main { font-weight: 600; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
html[data-look="3"] .l3m-pv-sub { width: 100%; font-size: 14px; color: var(--text-2); }
html[data-look="3"] .l3m-pv-live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
html[data-look="3"] .l3m-pv-more { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); margin-top: var(--s2); color: var(--accent); font-weight: 600; font-size: 14.5px; text-decoration: none; }
html[data-look="3"] .l3m-pv-empty { margin: 0; font-size: 14px; color: var(--text-2); }
html[data-look="3"] .l3m-pv-skel { display: grid; gap: 14px; }
html[data-look="3"] .l3m-pv-skel span { height: 18px; border-radius: 6px; background: rgb(255 255 255 / .06); }
@keyframes l3m-pv-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 719px) {
  html[data-look="3"] .side-menu-panel.l3m-drawer { width: 100%; }
  html[data-look="3"] .l3m-preview { display: none; }
}
@media (hover: none) { html[data-look="3"] .l3m-preview { display: none; } }
@media (prefers-reduced-motion: reduce) { html[data-look="3"] .l3m-preview { animation: none; } }
html[data-look="3"][data-motion="reduced"] .l3m-preview, html[data-look="3"][data-motion="none"] .l3m-preview { animation: none; }
@media (forced-colors: active) { html[data-look="3"] .l3m-item[aria-current] { outline: 1px solid Highlight; } }

/* app/ticker/ticker.css */
/* WEB-LOOK-3 global ticker (LOOK3-4b). Scoped to html[data-look="3"]; with the flag off the bar is never rendered.
   Fixed 44px height, so it never shifts the page when the items arrive. Marquee = CSS only, two identical sets and
   a -50% slide; paused on hover / focus; reduced motion (media query or html[data-motion]) = a scrollable strip. */
html[data-look="3"] .tk { position: relative; height: 44px; border-block: 1px solid var(--hair); background: var(--bg-deep); overflow: hidden; }
html[data-look="3"] .tk__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html[data-look="3"] .tk__view { height: 100%; overflow: hidden; outline-offset: -3px; }
html[data-look="3"] .tk__view:focus-visible { outline: 2px solid var(--accent); }
html[data-look="3"] .tk__track { display: flex; width: max-content; height: 100%; animation: tk-slide var(--tk-dur, 60s) linear infinite; }
html[data-look="3"] .tk:hover .tk__track, html[data-look="3"] .tk:focus-within .tk__track { animation-play-state: paused; }
html[data-look="3"] .tk__set { display: flex; align-items: center; gap: var(--s6, 32px); padding-inline: var(--s3, 16px); }
html[data-look="3"] .tk__item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; color: var(--text-2); font-size: max(13px, var(--label-min, 12px)); text-decoration: none; }
html[data-look="3"] .tk__item:hover, html[data-look="3"] .tk__item:focus-visible { color: var(--text); }
html[data-look="3"] .tk__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
html[data-look="3"] .tk__item strong { color: var(--text); font-weight: 600; }
html[data-look="3"] .tk__tag { font-size: var(--label-min, 12px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
html[data-look="3"] .tk__item--live .tk__tag { color: var(--live); }
html[data-look="3"] .tk__score { font-family: var(--f-display), system-ui, sans-serif; font-stretch: 125%; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
html[data-look="3"] .tk__when { color: var(--text-3); }
html[data-look="3"] .tk__crest { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex: none; }

@keyframes tk-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html[data-look="3"] .tk__view { overflow-x: auto; scrollbar-width: thin; }
  html[data-look="3"] .tk__track { animation: none; }
  html[data-look="3"] .tk__set + .tk__set { display: none; }
}
html[data-look="3"]:is([data-motion="reduced"], [data-motion="none"]) .tk__view { overflow-x: auto; scrollbar-width: thin; }
html[data-look="3"]:is([data-motion="reduced"], [data-motion="none"]) .tk__track { animation: none; }
html[data-look="3"]:is([data-motion="reduced"], [data-motion="none"]) .tk__set + .tk__set { display: none; }

/* app/home/home.css */
/* WEB-LOOK-3 "Floodlight" home (LOOK3-6). Everything is scoped to html[data-look="3"] .h3-home; flag off = no rule applies.
   Ported from design/web-look-3 mock.css (shared claude/c-hard-19-web-look-3@642aa1a). The scoop corner is used on the live panel only. */

html[data-look="3"] .h3-home { position: relative; overflow-x: clip; isolation: isolate; font-family: var(--f-body), system-ui, sans-serif; color: var(--text); }
/* two soft floodlight pools behind the top of the page */
html[data-look="3"] .h3-home::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1300px; pointer-events: none; z-index: -1;
  background:
    radial-gradient(60% 520px at 18% 120px, rgb(var(--glow-1) / .17), transparent 70%),
    radial-gradient(40% 460px at 86% 380px, rgb(var(--glow-2) / .09), transparent 70%);
}
html[data-look="3"] .h3-wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--s6) var(--s8); }
html[data-look="3"] .h3-home a { color: inherit; text-decoration: none; }
html[data-look="3"] .h3-home b { font-weight: 600; color: var(--text); }
html[data-look="3"] .h3-home svg { display: block; flex: none; }
html[data-look="3"] .h3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-look="3"] .h3-home :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
html[data-look="3"] .h3-num { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-look="3"] .h3-arr, html[data-look="3"] .h3-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* shortcuts */
html[data-look="3"] .h3-shortcuts { display: flex; flex-wrap: wrap; gap: var(--s3); padding-top: var(--s7); }
html[data-look="3"] .h3-sc { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 8px 18px 8px 8px; border-radius: 16px; font-size: 15px; color: var(--text-2); background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .02)); box-shadow: 0 1px 0 var(--glass-edge) inset; transition: background .2s, color .2s; }
html[data-look="3"] .h3-sc:hover { background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .035)); color: var(--text); }
html[data-look="3"] .h3-sc-tile { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgb(255 255 255 / .05); color: var(--c, var(--text)); }
html[data-look="3"] .h3-sc-tile svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-look="3"] .h3-sc .h3-arr { width: 18px; height: 18px; color: var(--text-3); margin-left: 4px; transition: transform .2s, color .2s; }
html[data-look="3"] .h3-sc:hover .h3-arr { transform: translateX(3px); color: var(--text); }

/* hero */
html[data-look="3"] .h3-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--s8); align-items: center; padding: var(--s8) 0 var(--s9); position: relative; }
html[data-look="3"] .h3-hero--solo { grid-template-columns: minmax(0, 1fr); }
html[data-look="3"] .h3-hero-side { position: relative; }
html[data-look="3"] .h3-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--s5); font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .h3-eyebrow > span { display: inline-flex; align-items: center; gap: 10px; }
html[data-look="3"] .h3-k { color: var(--text); }
html[data-look="3"] .h3-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
html[data-look="3"] .h3-display { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; font-size: clamp(42px, 5.3vw, 70px); line-height: .94; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
html[data-look="3"] .h3-display em { font-style: normal; color: var(--accent); }
html[data-look="3"] .h3-lede { font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 44ch; margin: var(--s5) 0 0; }
html[data-look="3"] .h3-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); align-items: center; }
/* the faint centre circle and halfway line */
html[data-look="3"] .h3-ring { position: absolute; right: -120px; top: 50%; width: 620px; height: 620px; transform: translateY(-50%); border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .045); pointer-events: none; z-index: -1; }
html[data-look="3"] .h3-ring::after { content: ""; position: absolute; left: 50%; top: -150px; bottom: -300px; width: 1px; background: linear-gradient(transparent, rgb(255 255 255 / .04) 30%, rgb(255 255 255 / .04) 70%, transparent); }

/* live panel: glass, lit from inside, one scooped corner */
html[data-look="3"] .h3-scoop-shadow { filter: drop-shadow(0 28px 32px rgb(0 0 0 / .55)); }
html[data-look="3"] .h3-glass { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); border-radius: var(--r-lg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-look="3"] .h3-scoop { -webkit-mask: radial-gradient(circle var(--scoop) at 100% 0, #0000 calc(100% - .5px), #000 100%); mask: radial-gradient(circle var(--scoop) at 100% 0, #0000 calc(100% - .5px), #000 100%); }
html[data-look="3"] .h3-match { position: relative; padding: var(--s5) var(--s5) var(--s4); background: radial-gradient(120% 90% at 0 0, color-mix(in srgb, var(--accent) 19%, transparent), transparent 62%), linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .h3-match-head { display: flex; align-items: center; gap: 10px; font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
html[data-look="3"] .h3-live { display: inline-flex; align-items: center; gap: 8px; color: #FF8A8E; }
html[data-look="3"] .h3-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgb(255 93 98 / .18); animation: h3-pulse 1.8s ease-in-out infinite; }
html[data-look="3"] .h3-lg { margin-left: auto; letter-spacing: .08em; text-align: right; }
html[data-look="3"] .h3-side { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
html[data-look="3"] .h3-side + .h3-side { box-shadow: inset 0 1px 0 var(--hair); }
html[data-look="3"] .h3-name { font-size: 18px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
html[data-look="3"] .h3-you { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-left: 8px; white-space: nowrap; }
html[data-look="3"] .h3-score { margin-left: auto; font-size: 40px; line-height: 1; }
html[data-look="3"] .h3-timeline { position: relative; height: 34px; margin: 10px 0 6px; }
html[data-look="3"] .h3-track { position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .1); }
html[data-look="3"] .h3-fill { position: absolute; left: 0; top: 10px; height: 2px; border-radius: 2px; background: var(--accent); }
html[data-look="3"] .h3-ht { position: absolute; top: 6px; width: 1px; height: 10px; background: rgb(255 255 255 / .25); }
html[data-look="3"] .h3-goal { position: absolute; top: 6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--text); }
html[data-look="3"] .h3-goal span { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font: 500 11px var(--f-mono); color: var(--text-3); white-space: nowrap; }
html[data-look="3"] .h3-now { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
html[data-look="3"] .h3-match-foot { display: flex; align-items: center; gap: var(--s3); padding-top: var(--s3); box-shadow: inset 0 1px 0 var(--hair); font-size: 14px; color: var(--text-2); }
html[data-look="3"] .h3-follow { margin-left: auto; flex: none; }

/* facts */
html[data-look="3"] .h3-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); padding: var(--s6) 0 0; box-shadow: inset 0 1px 0 var(--hair); }
html[data-look="3"] .h3-label { font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .h3-val { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; font-size: 16px; color: var(--text-2); }
html[data-look="3"] .h3-val .h3-num { font-size: 30px; color: var(--text); }

/* bands */
html[data-look="3"] .h3-band { padding: var(--s8) 0 0; position: relative; }
html[data-look="3"] .h3-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s8); }
html[data-look="3"] .h3-sec-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
html[data-look="3"] .h3-h2 { font: 600 20px/1.3 var(--f-body); letter-spacing: -.01em; margin: 0; }
html[data-look="3"] .h3-meta { font-size: 14px; color: var(--text-3); }
html[data-look="3"] .h3-more { margin-left: auto; font-size: 14px; color: var(--text-2); }
html[data-look="3"] .h3-empty { margin: 0; padding: var(--s4) 0; color: var(--text-3); font-size: 15px; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .h3-rows { list-style: none; margin: 0; padding: 0; }
html[data-look="3"] .h3-rows li { box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .h3-res { display: grid; grid-template-columns: 1fr 22px 78px 22px 1fr minmax(0, 96px); align-items: center; gap: 12px; min-height: 56px; font-size: 15px; }
html[data-look="3"] .h3-res .h3-h { text-align: right; }
html[data-look="3"] .h3-res .h3-score { margin: 0; text-align: center; font-size: 18px; line-height: 1.2; color: var(--text); }
html[data-look="3"] .h3-res .h3-score i { font-style: normal; color: var(--text-3); margin: 0 5px; }
html[data-look="3"] .h3-w { font-weight: 600; } html[data-look="3"] .h3-l { color: var(--text-2); }
html[data-look="3"] .h3-gw { font: 500 12px var(--f-mono); color: var(--text-3); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-look="3"] .h3-lrow { display: flex; align-items: center; gap: 14px; min-height: 56px; font-size: 15px; color: var(--text-2); }
html[data-look="3"] .h3-lrow:hover { color: var(--text); }
html[data-look="3"] .h3-lrow .h3-arr { margin-left: auto; width: 18px; height: 18px; color: var(--text-3); }
html[data-look="3"] .h3-lname { font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
html[data-look="3"] .h3-lcrest { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex: none; }
html[data-look="3"] .h3-lcrest--blank { background: rgb(255 255 255 / .07); }
html[data-look="3"] .h3-feed { list-style: none; margin: 0; padding: 0; }
html[data-look="3"] .h3-feed li { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 6px 0; box-shadow: inset 0 -1px 0 var(--hair); font-size: 15px; color: var(--text-2); }
html[data-look="3"] .h3-feed-text { min-width: 0; overflow-wrap: anywhere; }
html[data-look="3"] .h3-feed-text--wrap { display: flex; flex-direction: column; gap: 2px; }
html[data-look="3"] .h3-feed-text a:hover { color: var(--text); }
html[data-look="3"] .h3-sub { font-size: 13px; color: var(--text-3); font-weight: 400; }
html[data-look="3"] .h3-when { margin-left: auto; font: 500 12px var(--f-mono); color: var(--text-3); white-space: nowrap; }
html[data-look="3"] .h3-pic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px var(--f-body); color: var(--text); background: rgb(255 255 255 / .07); flex: none; }
html[data-look="3"] .h3-next { display: grid; grid-template-columns: 84px 1fr auto 1fr; align-items: center; gap: 14px; min-height: 64px; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .h3-nwhen { font: 500 12px/1.35 var(--f-mono); letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; }
html[data-look="3"] .h3-nwhen b { display: block; color: var(--text); font-size: 13px; }
html[data-look="3"] .h3-t { display: flex; align-items: center; gap: 10px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
html[data-look="3"] .h3-t--h { justify-content: flex-end; text-align: right; }
html[data-look="3"] .h3-v { font: 500 12px var(--f-mono); color: var(--text-3); }
html[data-look="3"] .h3-perf { counter-reset: none; }
html[data-look="3"] .h3-prow { display: flex; align-items: center; gap: 14px; min-height: 60px; font-size: 15px; }
html[data-look="3"] .h3-rank { width: 20px; font: 500 13px var(--f-mono); color: var(--text-3); }
html[data-look="3"] .h3-pname { display: flex; flex-direction: column; min-width: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
html[data-look="3"] .h3-avg { margin-left: auto; font-size: 20px; color: var(--text); }

@keyframes h3-pulse { 50% { box-shadow: 0 0 0 7px rgb(255 93 98 / 0); } }
@media (prefers-reduced-motion: reduce) {
  html[data-look="3"] .h3-live-dot { animation: none; }
  html[data-look="3"] .h3-home * { transition: none !important; }
}
html[data-motion="reduced"][data-look="3"] .h3-live-dot, html[data-motion="none"][data-look="3"] .h3-live-dot { animation: none; }

@media (max-width: 760px) {
  html[data-look="3"] .h3-wrap { padding: 0 var(--s4) var(--s8); }
  html[data-look="3"] .h3-shortcuts { padding-top: var(--s5); flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--s4) * -1); padding-left: var(--s4); padding-right: var(--s4); scroll-padding: 0 var(--s4); }
  html[data-look="3"] .h3-sc { flex: none; white-space: nowrap; scroll-snap-align: start; }
  html[data-look="3"] .h3-hero { grid-template-columns: 1fr; gap: var(--s7); padding: var(--s7) 0 var(--s8); }
  html[data-look="3"] .h3-display { font-size: 42px; }
  html[data-look="3"] .h3-lede { font-size: 16.5px; }
  html[data-look="3"] .h3-actions .btn { flex: 1 1 auto; }
  html[data-look="3"] .h3-hide-sm { display: none !important; }
  html[data-look="3"] .h3-ring { width: 420px; height: 420px; right: -200px; top: 72%; }
  html[data-look="3"] .h3-score { font-size: 34px; }
  html[data-look="3"] .h3-cols { grid-template-columns: 1fr; gap: var(--s7); }
  html[data-look="3"] .h3-band { padding-top: var(--s7); }
  html[data-look="3"] .h3-facts { gap: var(--s4); }
  html[data-look="3"] .h3-val { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 13.5px; line-height: 1.35; }
  html[data-look="3"] .h3-val .h3-num { font-size: 28px; }
  html[data-look="3"] .h3-label { font-size: 11.5px; letter-spacing: .1em; }
  html[data-look="3"] .h3-res { grid-template-columns: minmax(0, 1fr) 20px 64px 20px minmax(0, 1fr); gap: 8px; font-size: 14px; }
  html[data-look="3"] .h3-gw { display: none; }
  html[data-look="3"] .h3-next { grid-template-columns: 70px 1fr auto 1fr; gap: 8px; font-size: 14px; }
}

/* app/[league]/look3/league.css */
/* WEB-LOOK-3 league overview + league chrome (LOOK3-7). Scoped to html[data-look="3"]; flag off = matches nothing.
   Geometry from design/web-look-3/mock.css (.lg-*, .tabs, .match, .scoop). The league colour (--league-mark, written by
   [league]/layout.js, contrast-lifted) only tints: hero light pool, crest ring, active tab underline, live-card edge.
   Buttons, links and focus stay on --accent (brand ice blue). */

/* one column wrapper from [league]/layout.js: the hero (a sibling of <main>) is ordered above the tab strip */
html[data-look="3"] .l3-league { display: flex; flex-direction: column; min-height: 0; }
html[data-look="3"] .l3-league > * { order: 5; }
html[data-look="3"] .l3-league > .l3-herozone { order: 1; }
html[data-look="3"] .l3-league > .l3-tabs { order: 2; }
html[data-look="3"] .l3-pw { width: 100%; max-width: var(--page, 1200px); margin-inline: auto; padding-inline: var(--s6, 32px); box-sizing: border-box; }
html[data-look="3"] .l3-page { padding-block: 0 var(--s8, 64px); }

/* ---- hero ---- */
html[data-look="3"] .l3-herozone { position: relative; isolation: isolate; overflow: clip; }
html[data-look="3"] .l3-herozone::before { content: ""; position: absolute; inset: -40% -10% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 18% 40%, color-mix(in srgb, var(--league-mark, var(--accent)) 16%, transparent), transparent 70%),
    radial-gradient(50% 60% at 85% 20%, rgb(var(--glow-1, 64 132 255) / .10), transparent 70%); }
html[data-look="3"] .l3-herozone[style*="--l3-art"]::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background: var(--l3-art) center / cover; mask-image: linear-gradient(180deg, #000, transparent); -webkit-mask-image: linear-gradient(180deg, #000, transparent); }
html[data-look="3"] .l3-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s6, 32px); align-items: center; padding-block: var(--s8, 64px) var(--s6, 32px); }
html[data-look="3"] .l3-hero__crest { width: 104px; height: 104px; border-radius: 26px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(160deg, rgb(255 255 255 / .09), rgb(255 255 255 / .02)); box-shadow: var(--lift), 0 0 0 1px color-mix(in srgb, var(--league-mark, var(--accent)) 38%, transparent); }
html[data-look="3"] .l3-hero__crest span { font: 800 44px var(--f-display), sans-serif; color: var(--league-mark, var(--accent)); }
html[data-look="3"] .l3-hero__crest img { width: 68px; height: 68px; object-fit: contain; }
html[data-look="3"] .l3-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0 0 14px; font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .l3-eyebrow > span { display: inline-flex; align-items: center; gap: 10px; }
html[data-look="3"] .l3-eyebrow__k { color: var(--text); }
html[data-look="3"] .l3-eyebrow__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
html[data-look="3"] .l3-hero__title { margin: 0; font-family: var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 4.6vw, 60px); line-height: .95; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; color: var(--text); }
html[data-look="3"] .l3-hero__sub { margin: 14px 0 0; font-size: 16px; color: var(--text-2); max-width: 60ch; }
html[data-look="3"] .l3-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3, 12px); margin-top: var(--s4, 16px); }
html[data-look="3"] .l3-hero__actions:empty { display: none; }
html[data-look="3"] .l3-hero__stats { display: flex; gap: var(--s6, 32px); margin: 0; }
html[data-look="3"] .l3-hero__stats > div { display: flex; flex-direction: column-reverse; text-align: right; gap: 4px; }
html[data-look="3"] .l3-hero__stats dt { font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .l3-hero__stats dd { margin: 0; font-size: 30px; line-height: 1.1; color: var(--text); }
html[data-look="3"] .l3-hero__stats dd small { font-size: .6em; color: var(--text-3); }

/* ---- tab strip ---- */
html[data-look="3"] .l3-tabs { position: relative; display: flex; align-items: stretch; width: min(calc(100% - 2 * var(--s6, 32px)), calc(var(--page, 1200px) - 2 * var(--s6, 32px))); margin-inline: auto; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .l3-tabs__strip { display: flex; gap: var(--s1, 4px); min-width: 0; overflow-x: auto; scrollbar-width: none; margin-left: -14px; }
html[data-look="3"] .l3-tabs__strip::-webkit-scrollbar { display: none; }
html[data-look="3"] .l3-tab { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; color: var(--text-2); font: 500 15px var(--f-body), system-ui, sans-serif; white-space: nowrap; text-decoration: none; background: none; border: 0; border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: 0; cursor: pointer; list-style: none; clip-path: none; }
html[data-look="3"] .l3-tab::-webkit-details-marker { display: none; }
html[data-look="3"] .l3-tab:hover { color: var(--text); background: none; }
html[data-look="3"] .l3-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 8px; }
html[data-look="3"] .l3-tab[aria-current] { color: var(--text); }
html[data-look="3"] .l3-tab[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--league-mark, var(--accent)); }
html[data-look="3"] .l3-more-tab { position: relative; flex: none; }
html[data-look="3"] .l3-more-tab > summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 8px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .7; }
html[data-look="3"] .l3-more-tab[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
html[data-look="3"] .l3-more-panel { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; width: min(520px, 90vw); max-height: min(70vh, 520px); overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4, 16px) var(--s5, 24px); padding: var(--s4, 16px) var(--s5, 24px); border-radius: var(--r-lg, 18px); background: color-mix(in srgb, var(--bg, #06080C) 92%, #fff 8%); box-shadow: var(--lift); border: 1px solid var(--hair); }
html[data-look="3"] .l3-more-group__title { margin: 0 0 6px; font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .l3-more-link { display: flex; align-items: center; min-height: 40px; color: var(--text-2); font-size: 15px; text-decoration: none; border-radius: 8px; }
html[data-look="3"] .l3-more-link:hover { color: var(--text); }
html[data-look="3"] .l3-more-link[aria-current] { color: var(--text); font-weight: 600; }
html[data-look="3"] .l3-more-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- grid ---- */
html[data-look="3"] .l3-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s8, 64px); padding: var(--s7, 48px) 0 var(--s8, 64px); }
html[data-look="3"] .l3-stack { min-width: 0; }
html[data-look="3"] .l3-stack > * + * { margin-top: var(--s8, 64px); }
html[data-look="3"] .l3-after { margin: 12px 0 0; }
html[data-look="3"] .l3-trail__n { font-size: 16px; color: var(--text); }

/* ---- live / next card: glass with one scooped corner and a league-coloured edge ---- */
html[data-look="3"] .l3-glass { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); border-radius: var(--r-lg, 18px); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-look="3"] .l3-scoop-shadow { filter: drop-shadow(0 28px 32px rgb(0 0 0 / .55)); }
html[data-look="3"] .l3-scoop { -webkit-mask: radial-gradient(circle var(--scoop, 20px) at 100% 0, #0000 calc(100% - .5px), #000 100%); mask: radial-gradient(circle var(--scoop, 20px) at 100% 0, #0000 calc(100% - .5px), #000 100%); }
html[data-look="3"] .l3-match { position: relative; padding: var(--s5, 24px) var(--s5, 24px) var(--s4, 16px); background: radial-gradient(120% 90% at 0 0, color-mix(in srgb, var(--accent) 19%, transparent), transparent 62%), linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift), inset 3px 0 0 var(--league-mark, var(--accent)); }
html[data-look="3"] .l3-match__head { display: flex; align-items: center; gap: 10px; font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
html[data-look="3"] .l3-match__lg { margin-left: auto; letter-spacing: .08em; }
html[data-look="3"] .l3-live__tag { display: inline-flex; align-items: center; gap: 8px; color: #FF8A8E; }
html[data-look="3"] .l3-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgb(255 93 98 / .16); }
html[data-look="3"] .l3-side { display: flex; align-items: center; gap: 14px; min-height: 64px; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .l3-side:last-of-type { box-shadow: none; }
html[data-look="3"] .l3-side__name { min-width: 0; font-size: 19px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
html[data-look="3"] .l3-side__score { margin-left: auto; font-size: 40px; line-height: 1; color: var(--text); }
html[data-look="3"] .l3-you { font: 500 11px var(--f-mono), ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-left: 4px; }
html[data-look="3"] .l3-tline { position: relative; height: 34px; margin: 10px 0 6px; }
html[data-look="3"] .l3-tline__track, html[data-look="3"] .l3-tline__fill { position: absolute; left: 0; top: 10px; height: 2px; border-radius: 2px; }
html[data-look="3"] .l3-tline__track { right: 0; background: rgb(255 255 255 / .1); }
html[data-look="3"] .l3-tline__fill { background: var(--accent); }
html[data-look="3"] .l3-tline__ht { position: absolute; top: 6px; width: 1px; height: 10px; background: rgb(255 255 255 / .25); }
html[data-look="3"] .l3-tline__goal { position: absolute; top: 6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--text); }
html[data-look="3"] .l3-tline__goal span { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font: 500 11px var(--f-mono), ui-monospace, monospace; color: var(--text-3); white-space: nowrap; }
html[data-look="3"] .l3-tline__now { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
html[data-look="3"] .l3-match__foot { display: flex; align-items: center; gap: var(--s3, 12px); padding-top: var(--s3, 12px); margin-top: var(--s2, 8px); box-shadow: inset 0 1px 0 var(--hair); font-size: 14px; color: var(--text-2); }
html[data-look="3"] .l3-match__foot b { color: var(--text); }
html[data-look="3"] .l3-match__foot .l3-more { margin-left: auto; color: var(--text); }
html[data-look="3"] .l3-countdown { color: var(--text); }

/* ---- band under the grid ---- */
html[data-look="3"] .l3-band { padding-top: var(--s7, 48px); box-shadow: inset 0 1px 0 var(--hair); }
html[data-look="3"] .l3-band__body { min-width: 0; }

/* ---- phone ---- */
@media (max-width: 760px) {
  html[data-look="3"] .l3-pw, html[data-look="3"] .l3-tabs { padding-inline: var(--s4, 16px); }
  html[data-look="3"] .l3-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s4, 16px); padding-block: var(--s6, 32px) var(--s5, 24px); }
  html[data-look="3"] .l3-hero__crest { width: 64px; height: 64px; border-radius: 18px; }
  html[data-look="3"] .l3-hero__crest img { width: 42px; height: 42px; }
  html[data-look="3"] .l3-hero__crest span { font-size: 28px; }
  html[data-look="3"] .l3-hero__title { font-size: 30px; }
  html[data-look="3"] .l3-hero__stats { grid-column: 1 / -1; justify-content: space-between; gap: var(--s4, 16px); }
  html[data-look="3"] .l3-hero__stats > div { text-align: left; }
  html[data-look="3"] .l3-hero__stats dd { font-size: 28px; }
  html[data-look="3"] .l3-tabs__strip { margin-left: -14px; }
  html[data-look="3"] .l3-tabs[data-edge~="right"] .l3-tabs__strip { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  html[data-look="3"] .l3-more-panel { position: fixed; left: var(--s4, 16px); right: var(--s4, 16px); top: auto; bottom: var(--s4, 16px); width: auto; max-height: 70vh; grid-template-columns: 1fr; background: color-mix(in srgb, var(--bg, #06080C) 88%, #fff 12%); }
  html[data-look="3"] .l3-grid { display: flex; flex-direction: column; gap: var(--s7, 48px); padding-top: var(--s6, 32px); }
  html[data-look="3"] .l3-grid > .l3-stack { display: contents; }
  html[data-look="3"] .l3-stack > * + * { margin-top: 0; }
  html[data-look="3"] .l3-live { order: -1; }
  html[data-look="3"] .l3-side__score { font-size: 34px; }
  html[data-look="3"] .l3-eyebrow { letter-spacing: .1em; }
}

/* app/[league]/look3/pages.css */
/* WEB-LOOK-3 league subpages (LOOK3-8a), part 1: page frame, hero band, toolbars, pills, cards, tables, empty states.
   Scoped to html[data-look="3"]; flag off = matches nothing. The pages keep their own markup (hub-*, lp-*, th-*, ph-*,
   tw-*, sq-*), so this file restyles those classes with the Floodlight tokens (app/look3/tokens.css) and the shared
   primitives in app/ui/table.css. Marker colour (--league-mark) only tints the hero pool; links/focus stay on --accent.
   Part 2 (lists, schedule, rankings): pages-lists.css. Part 3 (team, player, match): pages-profiles.css. */

/* ---- page frame: <main> dissolves so its hero can sit above the tab strip (layout orders .l3-league children) ---- */
html[data-look="3"] .l3-league > main.container { display: contents; }
html[data-look="3"] .l3-league > main.container > * { order: 5; box-sizing: border-box; width: min(calc(100% - 2 * var(--s6, 32px)), calc(var(--page, 1200px) - 2 * var(--s6, 32px))); margin-inline: auto; }
html[data-look="3"] .l3-league > main.container > * + * { margin-top: var(--s5, 24px); }
html[data-look="3"] .l3-league > main.container > style { display: none; }
html[data-look="3"] .l3-league > main.container > :last-child { margin-bottom: var(--s8, 64px); }
html[data-look="3"] .l3-league > main.container > .hub-hero { order: 1; width: 100%; margin-top: 0; margin-bottom: var(--s5, 24px); padding-inline: max(var(--s6, 32px), calc((100% - var(--page, 1200px)) / 2 + var(--s6, 32px))); }
/* the first block under the tabs gets breathing room (it is no longer preceded by the hero) */
html[data-look="3"] .l3-league > main.container > .hub-hero ~ :not(.hub-hero) { margin-top: var(--s5, 24px); }

/* ---- hero band: no box, a light pool in the league marker colour, mono eyebrow, display title ---- */
html[data-look="3"] main.container > .hub-hero { position: relative; isolation: isolate; overflow: clip; border: 0; border-radius: 0; box-shadow: none; background: none;
  padding-block: var(--s7, 48px) var(--s5, 24px); min-height: 0; }
html[data-look="3"] main.container > .hub-hero::before { content: ""; position: absolute; inset: -40% -10% 0; z-index: -1; pointer-events: none; opacity: 1; border-radius: 0;
  background:
    radial-gradient(60% 70% at 18% 40%, color-mix(in srgb, var(--league-mark, var(--accent)) 16%, transparent), transparent 70%),
    radial-gradient(50% 60% at 85% 20%, rgb(var(--glow-1, 64 132 255) / .10), transparent 70%); }
html[data-look="3"] main.container > .hub-hero::after { display: none; }
html[data-look="3"] .hub-hero__edge, html[data-look="3"] .hub-hero__watermark { display: none; }
html[data-look="3"] .hub-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 0 var(--s3, 12px); font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
html[data-look="3"] .hub-eyebrow::before { display: none; }
html[data-look="3"] .hub-eyebrow span, html[data-look="3"] .lp-hero .hub-eyebrow span { color: var(--text-3); letter-spacing: .14em; }
html[data-look="3"] .lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--s6, 32px); align-items: center; }
html[data-look="3"] .lp-hero--solo { grid-template-columns: minmax(0, 1fr); }
html[data-look="3"] .lp-hero__main { min-width: 0; }
html[data-look="3"] .lp-title { display: flex; align-items: center; gap: var(--s3, 12px); margin: 0; font-family: var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 4.2vw, 54px); line-height: .98; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; color: var(--text); }
html[data-look="3"] .lp-title__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r, 12px); background: rgb(255 255 255 / .06); box-shadow: 0 0 0 1px var(--hair) inset; color: var(--league-mark, var(--accent)); }
html[data-look="3"] .lp-title__icon svg { width: 22px; height: 22px; }
html[data-look="3"] .lp-sub { margin: var(--s3, 12px) 0 0; max-width: 60ch; font-size: 16px; line-height: 1.5; color: var(--text-2); }
html[data-look="3"] .lp-stats { display: flex; flex-wrap: wrap; gap: var(--s3, 12px) var(--s6, 32px); margin-top: var(--s5, 24px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html[data-look="3"] .lp-stat { display: flex; flex-direction: column-reverse; gap: 4px; padding: 0; border: 0; background: none; text-align: left; min-width: 0; }
html[data-look="3"] .lp-stat--accent { background: none; }
html[data-look="3"] .lp-stat__value { font: 700 28px/1.1 var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 112%; font-variation-settings: "wdth" 112; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .lp-stat--accent .lp-stat__value { color: var(--accent); }
html[data-look="3"] .lp-stat__value small { font-size: .55em; color: var(--text-3); margin-left: 4px; }
html[data-look="3"] .lp-stat__label { font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .lp-progress { height: 2px; margin-top: var(--s4, 16px); max-width: 420px; border-radius: 2px; background: rgb(255 255 255 / .1); overflow: hidden; }
html[data-look="3"] .lp-progress > span { display: block; height: 100%; background: var(--accent); }
html[data-look="3"] .lp-actions { display: flex; flex-wrap: wrap; gap: var(--s3, 12px); margin-top: var(--s4, 16px); }
html[data-look="3"] .lp-hero__feature { min-width: 0; }

/* ---- section heads ---- */
html[data-look="3"] .hub-section-head, html[data-look="3"] .section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3, 12px); margin: 0 0 var(--s3, 12px); padding: 0; border: 0; background: none; }
html[data-look="3"] .hub-section-head h2, html[data-look="3"] .section-head h2, html[data-look="3"] .section-head h3 { margin: 0; font: 600 20px/1.3 var(--f-body), system-ui, sans-serif; letter-spacing: -.01em; text-transform: none; color: var(--text); }
html[data-look="3"] .hub-section-head::after { display: none; }
html[data-look="3"] .hub-count, html[data-look="3"] .count-pill { padding: 0; border: 0; border-radius: 0; background: none; font: 500 13px var(--f-body), system-ui, sans-serif; color: var(--text-3); }
html[data-look="3"] .hub-label, html[data-look="3"] .category-label, html[data-look="3"] .lp-toolbar__label { font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .lp-note { margin: 0 0 var(--s4, 16px); font-size: 14px; line-height: 1.5; color: var(--text-3); max-width: 70ch; }
html[data-look="3"] .lp-block { min-width: 0; }

/* ---- toolbars + filter pills: quiet text chips, the active one is the accent ---- */
html[data-look="3"] .lp-toolbar, html[data-look="3"] .tw-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s4, 16px); padding: 0; border: 0; background: none; }
html[data-look="3"] .lp-toolbar__scroll, html[data-look="3"] .filter-pills { display: flex; flex-wrap: nowrap; gap: var(--s2, 8px); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
html[data-look="3"] .filter-pills { flex-wrap: wrap; overflow: visible; }
html[data-look="3"] .lp-toolbar__scroll::-webkit-scrollbar { display: none; }
html[data-look="3"] .pill, html[data-look="3"] .filter-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .05); box-shadow: 0 0 0 1px var(--hair) inset; color: var(--text-2); font: 500 14px var(--f-body), system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
html[data-look="3"] .pill:hover, html[data-look="3"] .filter-pill:hover { background: rgb(255 255 255 / .09); color: var(--text); }
html[data-look="3"] .pill--scheduled, html[data-look="3"] .filter-pill.is-active, html[data-look="3"] .filter-pill[aria-current], html[data-look="3"] .lp-col--active { color: var(--text); }
html[data-look="3"] a.pill--scheduled.filter-pill, html[data-look="3"] .filter-pill.pill--scheduled { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) inset; }
html[data-look="3"] .pill:focus-visible, html[data-look="3"] .filter-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-look="3"] .lp-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: rgb(255 255 255 / .06); color: var(--text-2); font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
html[data-look="3"] .lp-chip--accent { background: var(--accent-soft); color: var(--accent); }
html[data-look="3"] .lp-filterbar { display: flex; flex-wrap: wrap; gap: var(--s3, 12px); align-items: center; }
html[data-look="3"] .lp-filterbar__search input, html[data-look="3"] .lp-filterbar input[type="search"], html[data-look="3"] .lp-filterbar input[type="text"] { min-height: var(--tap, 44px); padding: 0 14px; border: 0; border-radius: var(--r, 12px); background: rgb(255 255 255 / .05); box-shadow: 0 0 0 1px var(--hair) inset; color: var(--text); font: 400 15px var(--f-body), system-ui, sans-serif; }
html[data-look="3"] .lp-filterbar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- cards: a flat panel, hairline edge, no gloss ---- */
html[data-look="3"] main.container .card { border: 0; border-radius: var(--r-lg, 18px); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-look="3"] main.container .card::before, html[data-look="3"] main.container .card::after { display: none; }
html[data-look="3"] main.container .card:hover { transform: none; border-color: transparent; }
html[data-look="3"] .lp-table-card { padding: 0; overflow: hidden; }

/* ---- tables (standings, stat tables): app/ui/table.css vocabulary applied to the legacy <table class="data-table"> ---- */
html[data-look="3"] main.container .data-table { width: 100%; border-collapse: collapse; border-spacing: 0; background: none; font-size: 15px; font-variant-numeric: tabular-nums; }
html[data-look="3"] main.container .data-table thead { background: none; }
html[data-look="3"] main.container .data-table th { padding: 12px 10px; border: 0; background: none; box-shadow: inset 0 -1px 0 var(--hair); font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); text-align: right; white-space: nowrap; }
html[data-look="3"] main.container .data-table th:first-child { text-align: left; padding-left: var(--s4, 16px); }
html[data-look="3"] main.container .data-table td { padding: 10px; border: 0; background: none; box-shadow: inset 0 -1px 0 var(--hair); color: var(--text-2); text-align: right; vertical-align: middle; }
html[data-look="3"] main.container .data-table td:first-child { text-align: left; padding-left: var(--s4, 16px); }
html[data-look="3"] main.container .data-table tbody tr { background: none; transition: background .15s; }
html[data-look="3"] main.container .data-table tbody tr:last-child td { box-shadow: none; }
html[data-look="3"] main.container .data-table tbody tr:hover { background: rgb(255 255 255 / .03); }
html[data-look="3"] main.container .data-table tbody tr[class*="standings-row--"], html[data-look="3"] main.container .data-table tbody tr[class*="lp-row--"] { box-shadow: none; background: none; }
html[data-look="3"] .lp-standings tbody tr.lp-row--leader td { background: none; }
html[data-look="3"] .lp-standings tbody tr.lp-row--leader td:first-child, html[data-look="3"] .lp-standings tbody tr.lp-row--qual td:first-child { box-shadow: inset 3px 0 0 var(--league-mark, var(--accent)), inset 0 -1px 0 var(--hair); }
html[data-look="3"] .lp-standings tbody tr.lp-row--leader .lp-team-cell__name { font-size: inherit; }
html[data-look="3"] .lp-standings .pts-pill { min-width: 0; font-size: inherit; }
html[data-look="3"] .lp-stats-table td.lp-col--active, html[data-look="3"] .lp-stats-table th.lp-col--active { background: none; font-family: inherit; font-weight: 700; color: var(--text); }

/* projected finish: hairline rows, a flat bar */
html[data-look="3"] .lp-proj { display: block; }
html[data-look="3"] .lp-proj__row { display: grid; grid-template-columns: 28px minmax(120px, 220px) minmax(0, 1fr) 96px; align-items: center; gap: var(--s4, 16px); padding: 10px 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .lp-proj__row.is-top { background: none; border: 0; }
html[data-look="3"] .lp-proj__bar { height: 6px; background: rgb(255 255 255 / .08); }
html[data-look="3"] .lp-proj__now { background: var(--accent); }
html[data-look="3"] .lp-proj__add { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 3px, transparent 3px 6px); }
html[data-look="3"] .lp-proj__pts b { font: 700 18px var(--f-display), system-ui, sans-serif; font-stretch: 112%; color: var(--text); }
html[data-look="3"] .lp-proj__pts small { font: 500 12px var(--f-mono), ui-monospace, monospace; color: var(--text-3); }
html[data-look="3"] main.container .data-table tbody tr.standings-row--gold td:first-child { box-shadow: inset 3px 0 0 var(--league-mark, var(--accent)), inset 0 -1px 0 var(--hair); }
html[data-look="3"] .sort-col-link { color: inherit; text-decoration: none; }
html[data-look="3"] .sort-col-link:hover, html[data-look="3"] .sort-col-active { color: var(--text); }
html[data-look="3"] .lp-team-cell, html[data-look="3"] .lp-player-cell { display: inline-flex; align-items: center; gap: var(--s3, 12px); min-width: 0; }
html[data-look="3"] .lp-team-cell__name, html[data-look="3"] .lp-team-link, html[data-look="3"] .lp-player-cell__name { color: var(--text); font-weight: 600; text-decoration: none; }
html[data-look="3"] .lp-team-cell__name:hover, html[data-look="3"] .lp-team-link:hover, html[data-look="3"] .lp-player-cell__name:hover { color: var(--accent); }
html[data-look="3"] .rank-badge { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .07); box-shadow: none; color: var(--text-2); font: 600 12.5px var(--f-body), system-ui, sans-serif; text-shadow: none; }
html[data-look="3"] .rank-badge--gold { background: color-mix(in srgb, var(--league-mark, var(--accent)) 24%, transparent); color: var(--text); }
html[data-look="3"] .rank-badge--silver, html[data-look="3"] .rank-badge--bronze { background: rgb(255 255 255 / .1); color: var(--text); }
html[data-look="3"] .gd-chip { display: inline; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: var(--text-2); }
html[data-look="3"] .pts-pill { display: inline; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; color: var(--text); font-weight: 700; }
html[data-look="3"] .pts-pill span { color: inherit; }
html[data-look="3"] .pts-pill--leader { color: var(--text); }
html[data-look="3"] .form-row { display: inline-flex; gap: 4px; }

/* ---- empty / hint states ---- */
html[data-look="3"] .empty-state-card { display: flex; align-items: center; gap: var(--s4, 16px); padding: var(--s5, 24px) 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); text-align: left; }
html[data-look="3"] .empty-state-illustration { flex: none; opacity: .55; max-width: 72px; max-height: 72px; }
html[data-look="3"] .empty-state-title { font: 600 17px var(--f-body), system-ui, sans-serif; color: var(--text); }
html[data-look="3"] .empty-state-hint, html[data-look="3"] .mp-empty { font-size: 14px; color: var(--text-3); }

/* ---- buttons that pages draw themselves ---- */
html[data-look="3"] main.container .lh-ghost-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r, 12px); background: rgb(255 255 255 / .06); box-shadow: 0 0 0 1px var(--hair) inset; color: var(--text); font: 600 14px var(--f-body), system-ui, sans-serif; text-decoration: none; clip-path: none; }
html[data-look="3"] main.container .lh-ghost-btn:hover { background: rgb(255 255 255 / .1); }
html[data-look="3"] main.container .lh-ghost-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- phone ---- */
@media (max-width: 760px) {
  html[data-look="3"] .l3-league > main.container > * { width: calc(100% - 2 * var(--s4, 16px)); }
  html[data-look="3"] .l3-league > main.container > .hub-hero { padding-inline: var(--s4, 16px); padding-block: var(--s6, 32px) var(--s4, 16px); }
  html[data-look="3"] .lp-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s4, 16px); }
  html[data-look="3"] .lp-title { font-size: 30px; }
  html[data-look="3"] .lp-title__icon { width: 36px; height: 36px; }
  html[data-look="3"] .lp-stats { justify-content: space-between; gap: var(--s3, 12px) var(--s4, 16px); }
  html[data-look="3"] .lp-stat__value { font-size: 24px; }
  html[data-look="3"] .lp-toolbar__scroll { flex: 1 1 100%; }
  html[data-look="3"] .lp-col--extra, html[data-look="3"] .lp-standings .lp-col--wdl { display: none; }
  html[data-look="3"] .lp-proj__row { grid-template-columns: 28px minmax(0, 1fr) 84px; gap: var(--s3, 12px); }
  html[data-look="3"] .lp-proj__bar { grid-column: 2 / -1; grid-row: 2; }
  html[data-look="3"] main.container .data-table th, html[data-look="3"] main.container .data-table td { padding-inline: 6px; }
  html[data-look="3"] .lp-table-card { overflow-x: auto; }
}

/* app/[league]/look3/pages-lists.css */
/* WEB-LOOK-3 league subpages (LOOK3-8a), part 2: result / fixture / schedule rows, story tiles, hero feature card,
   rankings and market lists, roster sheets, transfer toolbar. html[data-look="3"] only; markup is the pages' own.
   Rule of thumb: boxed tiles become hairline rows, glows and gradients go, numbers stay tabular, text stays on --text*. */

/* ---- hero feature (spotlight / next match / latest result): one glass panel ---- */
html[data-look="3"] .lp-spot, html[data-look="3"] .lh-next.lp-match { position: relative; display: grid; justify-items: center; gap: var(--s2, 8px); padding: var(--s5, 24px); border: 0; border-radius: var(--r-lg, 18px); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift), inset 3px 0 0 var(--league-mark, var(--accent)); text-decoration: none; color: var(--text); }
html[data-look="3"] .lp-spot::before, html[data-look="3"] .lp-spot::after, html[data-look="3"] .lh-next::before, html[data-look="3"] .lh-next::after { display: none; }
html[data-look="3"] a.lp-spot:hover, html[data-look="3"] a.lh-next:hover { transform: none; background: linear-gradient(180deg, rgb(255 255 255 / .09), var(--glass-bot)); }
html[data-look="3"] .lp-spot__label, html[data-look="3"] .lh-next__label { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
html[data-look="3"] .lp-spot__name { font: 600 19px var(--f-body), system-ui, sans-serif; color: var(--text); }
html[data-look="3"] .lp-spot__value { font: 700 36px/1 var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .lp-spot__value small, html[data-look="3"] .lp-spot__meta { font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .08em; color: var(--text-3); }
html[data-look="3"] .lp-spot__avatar { box-shadow: 0 0 0 2px var(--hair); }
html[data-look="3"] .lh-next__teams { display: flex; align-items: center; justify-content: center; gap: var(--s4, 16px); width: 100%; }
html[data-look="3"] .lh-next__team { display: grid; justify-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 14px; color: var(--text); text-align: center; }
html[data-look="3"] .lh-next__score { font: 700 36px/1 var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .lh-next__score i { font-style: normal; color: var(--text-3); margin: 0 6px; }
html[data-look="3"] .lh-next__vs { font: 500 13px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; color: var(--text-3); }
html[data-look="3"] .lh-next__time, html[data-look="3"] .lh-next__empty { font-size: 14px; color: var(--text-2); text-align: center; }
html[data-look="3"] .lh-next__countdown { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .06em; }

/* ---- story tiles (results page): three quiet hairline facts ---- */
html[data-look="3"] .lp-stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4, 16px) var(--s6, 32px); }
html[data-look="3"] .lp-story { display: flex; align-items: center; gap: var(--s3, 12px); padding: var(--s3, 12px) 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--hair); color: var(--text-2); text-decoration: none; }
html[data-look="3"] a.lp-story:hover { transform: none; color: var(--text); }
html[data-look="3"] .lp-story__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r, 12px); background: rgb(255 255 255 / .06); box-shadow: none; color: var(--league-mark, var(--accent)); }
html[data-look="3"] .lp-story__icon svg { width: 20px; height: 20px; }
html[data-look="3"] .lp-story__label { font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .lp-story__text strong { font: 600 16px var(--f-body), system-ui, sans-serif; color: var(--text); }
html[data-look="3"] .lp-story__sub { font-size: 13px; color: var(--text-3); }

/* ---- results: one hairline row per match (name  score  name  date) ---- */
html[data-look="3"] .lp-results { display: block; }
html[data-look="3"] .lp-res { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "board top"; align-items: center; gap: var(--s4, 16px); min-height: 60px; padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--hair); color: var(--text-2); text-decoration: none; transition: color .15s; }
html[data-look="3"] .lp-res::before, html[data-look="3"] .lp-res::after { display: none; }
html[data-look="3"] .lp-res:hover { transform: none; background: none; color: var(--text); }
html[data-look="3"] .lp-res:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
html[data-look="3"] .lp-res__top { grid-area: top; display: flex; align-items: center; gap: var(--s3, 12px); justify-content: flex-end; }
html[data-look="3"] .lp-res__date { font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .04em; color: var(--text-3); white-space: nowrap; }
html[data-look="3"] .lp-res__board { grid-area: board; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s4, 16px); min-width: 0; }
html[data-look="3"] .lp-res__team { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; font-size: 15px; color: var(--text-2); }
html[data-look="3"] .lp-res__team:first-child { flex-direction: row-reverse; justify-content: flex-start; }
html[data-look="3"] .lp-res__team:last-child { justify-content: flex-start; }
html[data-look="3"] .lp-res__team.is-beaten { opacity: 1; color: var(--text-3); }
html[data-look="3"] .lp-res__team:not(.is-beaten) .lp-res__name { color: var(--text); font-weight: 600; }
html[data-look="3"] .lp-res__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-look="3"] .lp-res__team :is(img, svg) { margin: 0 !important; width: 28px; height: 28px; flex: none; }
html[data-look="3"] .lp-res__score { display: inline-flex; align-items: center; justify-content: center; gap: 0; font: 700 22px/1 var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .lp-res__score b { min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: var(--text); }
html[data-look="3"] .lp-res__score b:not(.is-win) { color: var(--text-3); }
html[data-look="3"] .lp-res__score i { font-style: normal; color: var(--text-3); margin: 0 6px; }

/* ---- schedule timeline: gameweek heads + hairline fixtures ---- */
html[data-look="3"] .lp-gw { grid-template-columns: 20px minmax(0, 1fr); gap: 0 var(--s4, 16px); }
html[data-look="3"] .lp-gw__body { padding: 0 0 var(--s6, 32px); }
html[data-look="3"] .lp-gw__rail::before { background: var(--hair); width: 1px; }
html[data-look="3"] .lp-gw__dot { width: 10px; height: 10px; margin-top: 10px; border: 2px solid var(--text-3); background: var(--bg); box-shadow: none; }
html[data-look="3"] .lp-gw--done .lp-gw__dot { border-color: var(--good); background: var(--bg); }
html[data-look="3"] .lp-gw--focus .lp-gw__dot, html[data-look="3"] .lp-gw--current .lp-gw__dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
html[data-look="3"] .lp-gw--live .lp-gw__dot { border-color: var(--live); background: var(--live); box-shadow: 0 0 0 4px rgb(255 93 98 / .16); }
html[data-look="3"] .lp-gw__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s3, 12px); margin: 0 0 var(--s2, 8px); }
html[data-look="3"] .lp-gw__num { display: inline-flex; align-items: baseline; gap: 6px; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 700 24px/1 var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 112%; color: var(--text); }
html[data-look="3"] .lp-gw__num small { font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; color: var(--text-3); }
html[data-look="3"] .lp-gw--focus .lp-gw__num { background: none; box-shadow: none; }
html[data-look="3"] .lp-gw__meta strong { font: 600 16px var(--f-body), system-ui, sans-serif; color: var(--text); }
html[data-look="3"] .lp-gw__meta span { font-size: 13px; color: var(--text-3); }
html[data-look="3"] .lp-gw__count { font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .06em; color: var(--text-3); }
html[data-look="3"] .lh-fixtures, html[data-look="3"] .lp-gw__fixtures { display: block; }
html[data-look="3"] .lh-fx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, auto) minmax(0, 1fr); align-items: center; gap: var(--s4, 16px); min-height: 60px; padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--hair); color: var(--text); text-decoration: none; }
html[data-look="3"] .lp-gw--done .lh-fx, html[data-look="3"] .lp-gw--focus .lh-fx { background: none; border: 0; }
html[data-look="3"] .lh-fx::before, html[data-look="3"] .lh-fx::after { display: none; }
html[data-look="3"] a.lh-fx:hover { transform: none; background: rgb(255 255 255 / .03); }
html[data-look="3"] .lh-fx:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
html[data-look="3"] .lh-fx__team { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; font-size: 15px; font-weight: 500; color: var(--text); }
html[data-look="3"] .lh-fx__team--away { flex-direction: row; }
html[data-look="3"] .lh-fx__team :is(img, svg) { margin: 0 !important; width: 28px; height: 28px; flex: none; }
html[data-look="3"] .lh-fx__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-look="3"] .lh-fx__mid { display: grid; justify-items: center; gap: 2px; text-align: center; }
html[data-look="3"] .lh-fx__vs { font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; color: var(--text-3); }
html[data-look="3"] .lh-fx__status { font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .lh-fx__score, html[data-look="3"] .lh-fx__mid b { font: 700 22px/1 var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .lh-fx__score i { font-style: normal; color: var(--text-3); margin: 0 5px; }
html[data-look="3"] .lh-more { color: var(--text-2); font-weight: 600; text-decoration: none; }
html[data-look="3"] .lh-more:hover { color: var(--text); }

/* ---- power rankings / master rankings / medal lists ---- */
html[data-look="3"] .lp-power { display: block; }
html[data-look="3"] .lp-power__row { display: grid; align-items: center; gap: var(--s4, 16px); padding: var(--s3, 12px) 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .lp-power__row::before, html[data-look="3"] .lp-power__row::after { display: none; }
html[data-look="3"] .lp-power__rank, html[data-look="3"] .lp-mv-row__rank, html[data-look="3"] .lt-rank { font: 700 18px var(--f-display), system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text-2); background: none; border: 0; box-shadow: none; }
html[data-look="3"] .lp-power__row--1 .lp-power__rank { color: var(--league-mark, var(--accent)); }
html[data-look="3"] .lp-power__blurb { font-size: 14px; color: var(--text-3); }
html[data-look="3"] .lp-medal { background: rgb(255 255 255 / .08); color: var(--text); box-shadow: none; }
html[data-look="3"] .lp-mv-top { gap: var(--s4, 16px); }
html[data-look="3"] .lp-mv-card { border: 0; border-radius: var(--r-lg, 18px); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] a.lp-mv-card:hover { transform: none; }
html[data-look="3"] .lp-mv-card::before, html[data-look="3"] .lp-mv-card::after { display: none; }
html[data-look="3"] .lp-mv-card__value, html[data-look="3"] .lp-mv-row__value { font: 700 18px var(--f-display), system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .lp-mv-list { display: block; }
html[data-look="3"] .lp-mv-row { padding: 8px 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .lp-mv-row::before { display: none; }
html[data-look="3"] a.lp-mv-row:hover, html[data-look="3"] .lp-mv-row:hover { transform: none; background: rgb(255 255 255 / .03); }
html[data-look="3"] .lp-mv-row__name { color: var(--text); }
html[data-look="3"] .lp-mv-row__team { color: var(--text-3); }
html[data-look="3"] .lp-rules, html[data-look="3"] .lp-rule { border: 0; border-radius: 0; background: none; box-shadow: none; }
html[data-look="3"] .lp-rule { padding: var(--s3, 12px) 0; box-shadow: inset 0 -1px 0 var(--hair); color: var(--text-2); }
html[data-look="3"] .lp-cta { display: flex; align-items: center; gap: var(--s4, 16px); padding: var(--s4, 16px) var(--s5, 24px); border: 0; border-radius: var(--r-lg, 18px); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); color: var(--text); text-decoration: none; }
html[data-look="3"] .lp-cta__icon { color: var(--accent); }
html[data-look="3"] .lp-cta__arrow { color: var(--accent); }

/* ---- rosters (squad sheets) and transfers ---- */
html[data-look="3"] .sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s6, 32px) var(--s6, 32px); }
html[data-look="3"] .sq-sheet { padding: 0; border: 0; border-top: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; min-width: 0; }
html[data-look="3"] .sq-sheet::before, html[data-look="3"] .sq-sheet::after { display: none; }
html[data-look="3"] .sq-sheet__head { display: flex; align-items: center; gap: var(--s3, 12px); padding-bottom: var(--s3, 12px); background: none; border: 0; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .sq-sheet__club { font: 600 18px var(--f-body), system-ui, sans-serif; color: var(--text); }
html[data-look="3"] .sq-sheet__count { margin-left: auto; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .08em; color: var(--text-3); }
html[data-look="3"] .sq-group__label { font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .sq-group__count { color: var(--text-3); }
html[data-look="3"] .sq-player { display: flex; align-items: center; gap: var(--s3, 12px); min-height: 52px; padding: 6px 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--hair); color: var(--text-2); text-decoration: none; }
html[data-look="3"] a.sq-player:hover { background: none; transform: none; color: var(--text); }
html[data-look="3"] .sq-player__name { color: var(--text); font-weight: 600; }
html[data-look="3"] .sq-player__meta { font-size: 13px; color: var(--text-3); }
html[data-look="3"] .sq-pos, html[data-look="3"] .lp-pos { display: inline-grid; place-items: center; min-width: 36px; height: 22px; padding: 0 6px; border: 0; border-radius: 6px; background: rgb(255 255 255 / .07); box-shadow: none; color: var(--text-2); font: 500 11px var(--f-mono), ui-monospace, monospace; letter-spacing: .06em; }
html[data-look="3"] .tw-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6, 32px); align-items: end; }
html[data-look="3"] .tw-title { margin: 0; font-family: var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 4.2vw, 54px); line-height: .98; color: var(--text); }
html[data-look="3"] .tw-sub { margin: var(--s3, 12px) 0 0; max-width: 60ch; font-size: 16px; color: var(--text-2); }
html[data-look="3"] .tw-hero__stats { display: flex; flex-wrap: wrap; gap: var(--s3, 12px) var(--s6, 32px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html[data-look="3"] .tw-stat small { font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: visible; }
html[data-look="3"] .sq-sheet__head::before, html[data-look="3"] .sq-sheet__head::after { display: none; }
html[data-look="3"] .sq-sheet__club { display: flex; align-items: center; gap: var(--s3, 12px); }
html[data-look="3"] .sq-sheet__club strong { font: 600 18px var(--f-body), system-ui, sans-serif; color: var(--text); }
html[data-look="3"] .sq-sheet__club small { font-size: 13px; color: var(--text-3); }
html[data-look="3"] .tw-stat { display: flex; min-width: 0; flex-direction: column-reverse; gap: 4px; padding: 0; border: 0; background: none; text-align: left; }
html[data-look="3"] .tw-stat b, html[data-look="3"] .tw-stat strong { font: 700 28px/1.1 var(--f-display), system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .tw-stat--gold b, html[data-look="3"] .tw-stat--gold strong { color: var(--accent); }
html[data-look="3"] .tw-sort { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); }
html[data-look="3"] .tw-sort__opt { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .05); box-shadow: 0 0 0 1px var(--hair) inset; color: var(--text-2); font: 500 14px var(--f-body), system-ui, sans-serif; text-decoration: none; }
html[data-look="3"] .tw-sort__opt.is-active { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) inset; }
html[data-look="3"] .tw-rules { color: var(--text-2); font-size: 14px; }
html[data-look="3"] .tw-rules > summary { cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; color: var(--text-2); }
html[data-look="3"] .th-money { font-variant-numeric: tabular-nums; color: var(--text); }

/* ---- player stats tiles (players page) ---- */
html[data-look="3"] .player-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4, 16px); }
html[data-look="3"] .player-tile { border: 0; border-radius: var(--r-lg, 18px); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); color: var(--text); }
html[data-look="3"] .player-tile::before, html[data-look="3"] .player-tile::after { display: none; }
html[data-look="3"] a.player-tile:hover { transform: none; background: linear-gradient(180deg, rgb(255 255 255 / .09), var(--glass-bot)); }
html[data-look="3"] .player-tile-name { color: var(--text); font-weight: 600; }
html[data-look="3"] .player-tile-position { font: 500 11px var(--f-mono), ui-monospace, monospace; letter-spacing: .08em; color: var(--text-3); }
html[data-look="3"] .player-tile-value { font: 700 20px var(--f-display), system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .stat-label { font: 500 11px var(--f-mono), ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* ---- phone ---- */
@media (max-width: 760px) {
  html[data-look="3"] .lp-res { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "board"; gap: 4px; padding: 10px 0; }
  html[data-look="3"] .lp-res__top { justify-content: space-between; }
  html[data-look="3"] .lp-res__team :is(img, svg), html[data-look="3"] .lh-fx__team :is(img, svg) { width: 24px; height: 24px; }
  html[data-look="3"] .lh-fx { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s3, 12px); }
  html[data-look="3"] .lp-gw { grid-template-columns: 12px minmax(0, 1fr); gap: 0 var(--s3, 12px); }
  html[data-look="3"] .tw-hero { grid-template-columns: minmax(0, 1fr); }
  html[data-look="3"] .tw-hero__stats { justify-content: space-between; gap: var(--s4, 16px); }
  html[data-look="3"] .sq-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-look="3"] .player-tile-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3, 12px); }
  html[data-look="3"] .lp-mv-top { grid-template-columns: minmax(0, 1fr); }
}

/* stats tables: rank, player, team, position read left to right, numbers stay right-aligned */
html[data-look="3"] .lp-stats-table :is(th, td):nth-child(-n+4) { text-align: left; }
html[data-look="3"] .lp-stats-table th:first-child, html[data-look="3"] .lp-stats-table td:first-child { width: 48px; }
html[data-look="3"] .lp-stats-note, html[data-look="3"] main.container > p.lp-note { text-align: left; }

/* app/[league]/look3/pages-profiles.css */
/* WEB-LOOK-3 league subpages (LOOK3-8a), part 3: team profile, player profile, match centre.
   html[data-look="3"] only. The club hero sits above the tabs like the other league pages; the player hero holds a
   stats table and filters, so it stays in the page flow below the tabs. Markup is the pages' own (th-*, ph-*, mc-*). */

/* ---- player profile: hero stays under the tabs, full content width, no box ---- */
html[data-look="3"] .l3-league > main.container > .ph-hero { order: 5; width: min(calc(100% - 2 * var(--s6, 32px)), calc(var(--page, 1200px) - 2 * var(--s6, 32px))); padding: var(--s5, 24px) 0; overflow: visible; margin-top: var(--s5, 24px); }
html[data-look="3"] .ph-hero::before { display: none; }
html[data-look="3"] .ph-name, html[data-look="3"] .th-name { margin: 0; font-family: var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4vw, 52px); line-height: .98; letter-spacing: -.01em; overflow-wrap: anywhere; color: var(--text); }
html[data-look="3"] .ph-idline, html[data-look="3"] .th-idline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3, 12px); color: var(--text-2); }
html[data-look="3"] .ph-club { color: var(--text); font-weight: 600; text-decoration: none; }
html[data-look="3"] .ph-club:hover { color: var(--accent); }
html[data-look="3"] .ph-pos, html[data-look="3"] .th-position { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: rgb(255 255 255 / .08); box-shadow: none; color: var(--text); font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .08em; }
html[data-look="3"] .ph-pos--main { background: var(--accent-soft); color: var(--accent); }
html[data-look="3"] .ph-stage__pos { color: rgb(255 255 255 / .07); -webkit-text-stroke: 0; }
html[data-look="3"] .ph-stage__light { opacity: .5; }
html[data-look="3"] .ph-split, html[data-look="3"] .ph-breakdown { color: var(--text-2); }
html[data-look="3"] .ph-breakdown { font-size: 14px; }
html[data-look="3"] .ph-breakdown th { font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); border: 0; box-shadow: inset 0 -1px 0 var(--hair); background: none; }
html[data-look="3"] .ph-breakdown td { border: 0; box-shadow: inset 0 -1px 0 var(--hair); background: none; color: var(--text-2); }
html[data-look="3"] .ph-breakdown__total td, html[data-look="3"] .ph-breakdown__total th { color: var(--text); }
html[data-look="3"] .ph-note { font-size: 13px; color: var(--text-3); }

/* the stat bar (player + club): numbers with mono labels, no boxes */
html[data-look="3"] .ph-statbar, html[data-look="3"] .th-statbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s3, 12px) var(--s6, 32px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html[data-look="3"] .ph-stat, html[data-look="3"] .th-stat { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; text-align: left; min-width: 0; }
html[data-look="3"] .th-stat--pts, html[data-look="3"] .th-stat--win, html[data-look="3"] .th-stat--loss { background: none; }
html[data-look="3"] .ph-stat__value, html[data-look="3"] .th-stat__value { font: 700 28px/1.1 var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); text-shadow: none; }
html[data-look="3"] .th-stat--win .th-stat__value { color: var(--good); }
html[data-look="3"] .th-stat--loss .th-stat__value { color: var(--bad); }
html[data-look="3"] .th-stat--pts .th-stat__value { color: var(--accent); }
html[data-look="3"] .ph-stat__label, html[data-look="3"] .th-stat__label { font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .ph-ring, html[data-look="3"] .th-ring { background: none; border: 0; box-shadow: none; }
html[data-look="3"] .ph-ring__label { font: 500 11px var(--f-mono), ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
html[data-look="3"] .ph-ring__value { color: var(--text); font-variant-numeric: tabular-nums; }

/* player body: card column + sections */
html[data-look="3"] .ph-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s7, 48px); align-items: start; }
html[data-look="3"] .l3-league > main.container > .ph-body { width: min(calc(100% - 2 * var(--s6, 32px)), calc(var(--page, 1200px) - 2 * var(--s6, 32px))); }
html[data-look="3"] .ph-side { min-width: 0; }
html[data-look="3"] .ph-cardstage { padding: var(--s4, 16px); border: 0; border-radius: var(--r-lg, 18px); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); color: var(--text-3); }
html[data-look="3"] .ph-main { min-width: 0; }
html[data-look="3"] .ph-section { padding: 0; border: 0; background: none; box-shadow: none; }
html[data-look="3"] .ph-section + .ph-section { margin-top: var(--s7, 48px); }
html[data-look="3"] .ph-achv-progress { height: 3px; border-radius: 3px; background: rgb(255 255 255 / .1); }
html[data-look="3"] .ph-achv-progress > * { background: var(--accent); }
html[data-look="3"] .ph-next__list, html[data-look="3"] .ph-locked__grid { gap: var(--s3, 12px); }
html[data-look="3"] .ph-next__item, html[data-look="3"] .ph-locked__item { border: 0; border-radius: var(--r, 12px); background: rgb(255 255 255 / .04); box-shadow: 0 0 0 1px var(--hair) inset; color: var(--text-2); }
html[data-look="3"] .ph-next__bar { background: rgb(255 255 255 / .1); }
html[data-look="3"] .ph-next__bar > * { background: var(--accent); }
html[data-look="3"] .ph-next__text strong, html[data-look="3"] .ph-next__text b { color: var(--text); }
html[data-look="3"] .ph-next__count { font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ---- club profile ---- */
html[data-look="3"] .th-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s6, 32px); align-items: center; }
html[data-look="3"] .th-crest { position: relative; display: grid; place-items: center; flex: none; }
html[data-look="3"] .th-crest__ring { opacity: .5; }
html[data-look="3"] .th-info { min-width: 0; display: grid; gap: var(--s3, 12px); }
html[data-look="3"] .th-form, html[data-look="3"] .th-idline .form-row { display: inline-flex; gap: 4px; }
html[data-look="3"] .th-side { display: grid; gap: var(--s3, 12px); justify-items: stretch; min-width: 140px; }
html[data-look="3"] .th-money { font: 700 20px var(--f-display), system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; }
html[data-look="3"] .form-box { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: rgb(255 255 255 / .08); box-shadow: none; color: var(--text-2); font: 600 11px var(--f-body), system-ui, sans-serif; }
html[data-look="3"] .form-box--w { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
html[data-look="3"] .form-box--l { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }
html[data-look="3"] .th-tabs { display: flex; gap: var(--s1, 4px); width: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .th-tabs::-webkit-scrollbar { display: none; }
html[data-look="3"] .th-tab { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text-2); font: 500 15px var(--f-body), system-ui, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; text-decoration: none; cursor: pointer; }
html[data-look="3"] .th-tab:hover { color: var(--text); background: none; }
html[data-look="3"] .th-tab.is-active { background: none; color: var(--text); box-shadow: none; }
html[data-look="3"] .th-tab.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--league-mark, var(--accent)); }
html[data-look="3"] .th-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 8px; }
html[data-look="3"] .th-overview { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s7, 48px); margin-top: var(--s5, 24px); }
html[data-look="3"] .th-overview__main, html[data-look="3"] .th-overview__side { min-width: 0; display: grid; gap: var(--s6, 32px); align-content: start; }
html[data-look="3"] .th-block { min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }
html[data-look="3"] .th-next { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4, 16px); padding: var(--s5, 24px); border: 0; border-radius: var(--r-lg, 18px); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift), inset 3px 0 0 var(--league-mark, var(--accent)); color: var(--text); }
html[data-look="3"] .th-next::before, html[data-look="3"] .th-next::after { display: none; }
html[data-look="3"] .th-next__team { display: grid; justify-items: center; gap: 6px; font-weight: 600; color: var(--text); text-align: center; text-decoration: none; }
html[data-look="3"] .th-next__mid { display: grid; justify-items: center; gap: 6px; text-align: center; }
html[data-look="3"] .th-next__vs { font: 500 13px var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; color: var(--text-3); -webkit-text-stroke: 0; }
html[data-look="3"] .th-next__when { font-size: 14px; color: var(--text-2); }
html[data-look="3"] .th-dim { color: var(--text-3); }

/* recent results (team + player): hairline rows */
html[data-look="3"] .ph-results { display: block; margin: 0; padding: 0; list-style: none; }
html[data-look="3"] .ph-result { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3, 12px); min-height: 56px; padding: 6px 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--hair); color: var(--text-2); text-decoration: none; }
html[data-look="3"] .ph-result::before { display: none; }
html[data-look="3"] a.ph-result:hover { background: rgb(255 255 255 / .03); transform: none; }
html[data-look="3"] .ph-result__badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: rgb(255 255 255 / .08); box-shadow: none; color: var(--text-2); font: 600 11px var(--f-body), system-ui, sans-serif; }
html[data-look="3"] .ph-result--w .ph-result__badge { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
html[data-look="3"] .ph-result--l .ph-result__badge { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }
html[data-look="3"] .ph-result__team { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; color: var(--text-2); }
html[data-look="3"] .ph-result__team.is-mine { color: var(--text); font-weight: 600; }
html[data-look="3"] .ph-result__team--away { justify-content: flex-end; }
html[data-look="3"] .ph-result__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-look="3"] .ph-result__score { display: inline-flex; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 700 20px/1 var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .ph-result__score .is-low { color: var(--text-3); }
html[data-look="3"] .ph-result__line, html[data-look="3"] .th-result__date { font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .04em; color: var(--text-3); white-space: nowrap; }

/* ---- match centre ---- */
html[data-look="3"] main.container > .mc-hero { position: relative; isolation: isolate; overflow: clip; padding: var(--s6, 32px); border: 0; border-radius: var(--r-lg, 18px); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] main.container > .mc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 0; background: radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--league-mark, var(--accent)) 14%, transparent), transparent 70%); opacity: 1; }
html[data-look="3"] main.container > .mc-hero::after { display: none; }
html[data-look="3"] .mc-hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3, 12px); }
html[data-look="3"] .mc-hero__meta { font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .08em; color: var(--text-3); }
html[data-look="3"] .mc-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s5, 24px); }
html[data-look="3"] .mc-club { display: grid; justify-items: center; gap: var(--s2, 8px); min-width: 0; text-align: center; text-decoration: none; color: var(--text); }
html[data-look="3"] .mc-club__name { font: 600 22px var(--f-body), system-ui, sans-serif; color: var(--text); overflow-wrap: anywhere; }
html[data-look="3"] .mc-vs { font: 800 56px/1 var(--f-display), "Arial Black", system-ui, sans-serif; font-stretch: 125%; color: var(--text-3); -webkit-text-stroke: 0; background: none; }
html[data-look="3"] .mc-center { display: grid; justify-items: center; gap: var(--s2, 8px); }
html[data-look="3"] .mc-status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .07); box-shadow: none; color: var(--text-2); font: 500 11.5px var(--f-mono), ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
html[data-look="3"] .mc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .06); box-shadow: 0 0 0 1px var(--hair) inset; color: var(--text); font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .06em; }
html[data-look="3"] .mc-hero__foot { display: flex; justify-content: center; margin-top: var(--s4, 16px); }
html[data-look="3"] .mc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--s6, 32px); align-items: start; }
html[data-look="3"] .mc-main, html[data-look="3"] .mc-aside { min-width: 0; display: grid; gap: var(--s5, 24px); }
html[data-look="3"] .mc-panel { padding: var(--s5, 24px); border: 0; border-radius: var(--r-lg, 18px); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); color: var(--text-2); }
html[data-look="3"] .mc-panel::before, html[data-look="3"] .mc-panel::after { display: none; }
html[data-look="3"] .mc-h2h__tally { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
html[data-look="3"] .mc-h2h__num { font: 700 28px/1.1 var(--f-display), system-ui, sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .mc-h2h__bar { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .1); overflow: hidden; }
html[data-look="3"] .mc-h2h__row { background: none; border: 0; border-radius: 0; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .mc-h2h__score { font: 700 15px var(--f-display), system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--text); background: none; }
html[data-look="3"] .mc-muted { color: var(--text-3); }
html[data-look="3"] .mc-wide { grid-column: 1 / -1; }

/* ---- phone ---- */
@media (max-width: 760px) {
  html[data-look="3"] .l3-league > main.container > .ph-hero, html[data-look="3"] .l3-league > main.container > .ph-body { width: calc(100% - 2 * var(--s4, 16px)); }
  html[data-look="3"] .ph-body, html[data-look="3"] .th-overview, html[data-look="3"] .mc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s6, 32px); }
  html[data-look="3"] .th-hero { grid-template-columns: auto minmax(0, 1fr); gap: var(--s4, 16px); }
  html[data-look="3"] .th-hero .th-side { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  html[data-look="3"] .th-statbar, html[data-look="3"] .ph-statbar { justify-content: space-between; gap: var(--s3, 12px) var(--s4, 16px); }
  html[data-look="3"] .ph-stat__value, html[data-look="3"] .th-stat__value { font-size: 22px; }
  html[data-look="3"] .th-next { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: var(--s4, 16px); }
  html[data-look="3"] .ph-result { grid-template-columns: 24px minmax(0, 1fr) auto minmax(0, 1fr); }
  html[data-look="3"] .ph-result__line, html[data-look="3"] .th-result__date { display: none; }
  html[data-look="3"] main.container > .mc-hero { padding: var(--s4, 16px); }
  html[data-look="3"] .mc-board { gap: var(--s3, 12px); }
  html[data-look="3"] .mc-club__name { font-size: 16px; }
  html[data-look="3"] .mc-vs { font-size: 32px; }
}

/* app/look3/areas-browse.css */
/* WEB-LOOK-3 LOOK3-8d: directory, search, You (/me), help ("Floodlight"). Scoped to html[data-look="3"]; flag off = matches nothing.
   Markers only: a community's own colour (--dx-accent, written inline per card) tints the icon ring and meter, never buttons or links
   (those use --accent). Surfaces are lit glass with a hairline, no accent-gradient headlines, no coloured glows. Card art / crests keep their images. */

html[data-look="3"] :is(.dx, .sx, .me-page, .help-page) { --text-dim: var(--text-2); --border: var(--hair); --bg-elevated: rgb(255 255 255 / .03); --bg-elevated-2: rgb(255 255 255 / .06); }

/* ---- shared panel surface ---- */
html[data-look="3"] :is(.dx-card, .dx-feature, .dx-totals, .sx-top, .sx-tile, .sx-article, .me-card, .help-card) {
  border: 0;
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bot));
  box-shadow: var(--lift);
}
html[data-look="3"] :is(.dx-card, .dx-feature, .sx-top, .sx-tile) { border-radius: var(--r-lg); }
html[data-look="3"] :is(.me-card, .help-card, .sx-article) { border-radius: var(--r); }
html[data-look="3"] .help-card { border-left: 0; box-shadow: var(--lift), inset 3px 0 0 var(--c, var(--sec)); }
html[data-look="3"] .sx-article { border-left: 0; }

/* ---- directory ---- */
html[data-look="3"] .dx-title { font: 800 clamp(2.25rem, 5vw, 3.75rem)/1 var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; text-shadow: none; }
html[data-look="3"] .dx-title em { color: var(--accent); background: none; -webkit-text-fill-color: currentColor; }
html[data-look="3"] .dx-lede { color: var(--text-2); font-size: 16px; }
html[data-look="3"] .dx-total { border-left-color: var(--hair); }
html[data-look="3"] .dx-cloud__crest { background: rgb(255 255 255 / .05); border-color: var(--hair); }
html[data-look="3"] .dx-btn { min-height: var(--btn-h, 44px); padding: 0 20px; justify-content: center; border-radius: var(--btn-radius, 11px); font-size: 14px; font-weight: 600; box-shadow: none; transition: background-color .15s, transform .08s; }
html[data-look="3"] .dx-btn--primary { color: var(--on-accent); background: var(--accent); }
html[data-look="3"] .dx-btn--primary:hover { background: var(--accent-hover); box-shadow: none; transform: none; }
html[data-look="3"] .dx-btn--primary:active { background: var(--accent-press); transform: translateY(1px); }
html[data-look="3"] .dx-btn--ghost { color: var(--text); background: rgb(255 255 255 / .06); border-color: var(--hair); }
html[data-look="3"] .dx-btn--ghost:hover { background: rgb(255 255 255 / .1); border-color: var(--hair); transform: none; }
html[data-look="3"] .dx-btn:focus-visible, html[data-look="3"] .dx-sort:focus-visible, html[data-look="3"] .dx-card__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-look="3"] .dx-sorts { border-color: var(--hair); }
html[data-look="3"] .dx-sort { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 14px; color: var(--text-2); }
html[data-look="3"] .dx-card { border: 0; }
html[data-look="3"] a.dx-card:hover, html[data-look="3"] .dx-card:hover { transform: none; box-shadow: var(--lift), 0 0 0 1px var(--hair); }
html[data-look="3"] .dx-card__rank { font-family: var(--f-mono), ui-monospace, monospace; }
html[data-look="3"] .dx-card__stats { border-color: var(--hair); background: rgb(255 255 255 / .03); }
html[data-look="3"] .dx-card__invite { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--btn-radius, 11px); font-size: 14px; box-shadow: none; }
html[data-look="3"] .dx-card__enter { width: var(--tap); height: var(--tap); }

/* ---- search ---- */
html[data-look="3"] .sx-title { font: 800 clamp(2rem, 4.5vw, 3rem)/1.05 var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; }
html[data-look="3"] .sx-top__name { font-family: var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; }
html[data-look="3"] .sx-top__label, html[data-look="3"] .sx-browse__label { font-family: var(--f-mono), ui-monospace, monospace; letter-spacing: .12em; color: var(--text-3); }
html[data-look="3"] .sx-top__go { color: var(--on-accent); }
html[data-look="3"] .sx-section__icon { background: var(--accent-soft); border: 0; color: var(--accent); }
html[data-look="3"] .sx-club__name, html[data-look="3"] .sx-player__name, html[data-look="3"] .sx-article__title { font-family: var(--f-body), system-ui, sans-serif; font-weight: 600; color: var(--text); }
html[data-look="3"] .sx-club__league, html[data-look="3"] .sx-player__club, html[data-look="3"] .sx-article__excerpt, html[data-look="3"] .sx-top__meta { color: var(--text-2); }
html[data-look="3"] .sx-tile:hover, html[data-look="3"] .sx-article:hover { transform: none; background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03)); }
html[data-look="3"] :is(.sx-tile, .sx-article, .sx-top):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-look="3"] .sx-browse__chip { min-height: var(--tap); display: inline-flex; align-items: center; }

/* ---- You ---- */
html[data-look="3"] .me-head__text h1 { font: 800 clamp(1.75rem, 3.5vw, 2.5rem)/1.1 var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; }
html[data-look="3"] .me-card__title h2 { font: 600 17px/1.3 var(--f-body), system-ui, sans-serif; }
html[data-look="3"] .me-field dt { font-family: var(--f-mono), ui-monospace, monospace; letter-spacing: .08em; color: var(--text-3); }
html[data-look="3"] .me-flash { border-color: var(--hair); background: var(--accent-soft); }
html[data-look="3"] .me-flash--bad { background: rgb(255 122 122 / .12); }
html[data-look="3"] .me-pending { display: inline-flex; align-items: center; min-height: var(--tap); }
html[data-look="3"] .me-card__actions > * { min-height: var(--tap); }

/* ---- help ---- */
html[data-look="3"] .help-head h1 { font: 800 clamp(2rem, 4.5vw, 3rem)/1.05 var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; }
html[data-look="3"] .help-card h2 { font: 600 20px/1.3 var(--f-body), system-ui, sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] .help-card ul { color: var(--text-2); font-size: 15px; }
html[data-look="3"] .help-link { color: var(--accent); }
html[data-look="3"] .help-page :focus-visible { outline-color: var(--accent); }

/* ---- directory hero (.hub-hero is the shared hero shell; only this page's .dx-hero is restyled): one calm panel, no grid, no edge glow ---- */
html[data-look="3"] .dx-hero.hub-hero { border: 0; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .dx-hero.hub-hero::before, html[data-look="3"] .dx-hero .hub-hero__edge { display: none; }
html[data-look="3"] .dx-sort.is-active { color: var(--on-accent); background: var(--accent); box-shadow: none; }
html[data-look="3"] .dx-card__banner { background: linear-gradient(180deg, transparent 30%, #0B0F17 100%), linear-gradient(135deg, color-mix(in srgb, var(--dx-accent) 22%, #0B0F17), #0B0F17); }

/* ---- shared hero eyebrow on directory + search: 12 px floor ---- */
html[data-look="3"] :is(.dx, .sx) .hub-eyebrow { font-size: var(--label-min); }
html[data-look="3"] :is(.dx, .sx) .hub-eyebrow span { font-size: inherit; }

/* app/look3/areas-floor-browse.css */
/* WEB-LOOK-3 LOOK3-8d: directory + search - 12 px floor (SP-11). GENERATED by scripts/look3-floor.mjs; do not edit by hand.
   Lifts every text size below 12 px to var(--label-min) under html[data-look="3"]. Flag off = matches nothing. */
html[data-look="3"] .dx-total span { font-size: var(--label-min); }
html[data-look="3"] .dx-card__rank { font-size: var(--label-min); }
html[data-look="3"] .dx-card__more { font-size: var(--label-min); }
html[data-look="3"] .dx-card__stats span { font-size: var(--label-min); }
html[data-look="3"] .sx-jump__chip b { font-size: var(--label-min); }
html[data-look="3"] .sx-browse__label { font-size: var(--label-min); }
html[data-look="3"] .sx-top__label { font-size: var(--label-min); }
html[data-look="3"] .sx-pos, html[data-look="3"] .sx-player__pos { font-size: var(--label-min); }
html[data-look="3"] .sx-tile__server { font-size: var(--label-min); }
html[data-look="3"] .sx-article__meta { font-size: var(--label-min); }

/* app/look3/areas-manage.css */
/* WEB-LOOK-3 LOOK3-8d: Staff Console (/manage, /manage/<league>/*) - "Floodlight" chrome.
   Everything is scoped to html[data-look="3"] .sc-shell (or .sc-shell's page body); flag off = matches nothing.
   Approach: legacy tokens are re-pointed inside the shell so the ~1800 lines of manage.css re-colour with no mass edit, then
   the few things that carry the old look (gradient buttons, glow, tinted panel icons, accent-gradient rule) are flattened.
   Markers only: the section colour (--sec) tints the shell's nav dot / active link, never whole panels. Buttons and links stay --accent. */

html[data-look="3"] .sc-shell {
  --text-dim: var(--text-2);
  --glass-border: var(--hair);
  --border: var(--hair);
  --bg-elevated: rgb(255 255 255 / .03);
  --bg-elevated-2: #11151C;
  --bg-elevated-3: #161B24;
  --win: var(--good);
  --loss: var(--bad);
  --btn-radius: var(--btn-radius, 11px);
  color: var(--text);
}

/* ---- sidebar: hairline column, active link = accent text on a soft wash ---- */
html[data-look="3"] .sc-side {
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bot));
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
html[data-look="3"] .sc-id__icon { border-radius: var(--r); box-shadow: none; }
html[data-look="3"] .sc-nav-link { min-height: var(--tap); border-radius: var(--r-sm); }
html[data-look="3"] .sc-nav-link.on { color: var(--text); background: var(--accent-soft); box-shadow: none; }
html[data-look="3"] .sc-nav-link.on svg { color: var(--sec-manage); }
html[data-look="3"] .sc-nav-link:focus-visible,
html[data-look="3"] .sc-side__toggle:focus-visible,
html[data-look="3"] .sc-tab:focus-visible,
html[data-look="3"] .sc-row--link:focus-visible,
html[data-look="3"] .sc-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-look="3"] .sc-side__toggle { min-height: var(--tap); border-radius: var(--btn-radius, 11px); }
html[data-look="3"] .sc-nav-badge { color: var(--on-accent); background: var(--accent); }
html[data-look="3"] .sc-nav-badge--info { color: var(--text); background: rgb(255 255 255 / .12); }

/* ---- page head: one heading style - sentence case Geist title, mono eyebrow, hairline rule (no accent gradient) ---- */
html[data-look="3"] .sc-head::after { background: var(--hair); }
html[data-look="3"] .sc-head__eyebrow { color: var(--text-3); letter-spacing: .12em; font-family: var(--f-mono), ui-monospace, monospace; }
html[data-look="3"] .sc-head__eyebrow-icon { background: var(--accent-soft); border: 0; color: var(--accent); }
html[data-look="3"] .sc-head__title { font: 800 clamp(1.75rem, 3vw, 2.5rem)/1.08 var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] .sc-head__desc { color: var(--text-2); font-size: 15px; }
html[data-look="3"] .sc-back { min-height: var(--tap); color: var(--text-2); }
html[data-look="3"] .sc-back:hover { color: var(--text); }

/* ---- buttons: flat (no gradient, no gloss, no glow), 44 px, press moves 1 px ---- */
html[data-look="3"] .sc-btn, html[data-look="3"] a.sc-btn {
  min-height: var(--btn-h, 44px);
  padding: 0 18px;
  border-radius: var(--btn-radius, 11px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  box-shadow: none;
  transition: background-color .15s, color .15s, transform .08s;
}
html[data-look="3"] .sc-btn:hover, html[data-look="3"] a.sc-btn:hover { background: var(--accent-hover); box-shadow: none; }
html[data-look="3"] .sc-btn:active, html[data-look="3"] a.sc-btn:active { background: var(--accent-press); transform: translateY(1px); }
html[data-look="3"] .sc-btn:focus-visible, html[data-look="3"] a.sc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-look="3"] .sc-btn:disabled { opacity: .45; background: var(--accent); }
html[data-look="3"] .sc-btn--ghost, html[data-look="3"] a.sc-btn--ghost { color: var(--text); background: rgb(255 255 255 / .06); border: 1px solid var(--hair); }
html[data-look="3"] .sc-btn--ghost:hover, html[data-look="3"] a.sc-btn--ghost:hover { color: var(--text); background: rgb(255 255 255 / .1); border-color: var(--hair); }
html[data-look="3"] .sc-btn--ghost:active, html[data-look="3"] a.sc-btn--ghost:active { background: rgb(255 255 255 / .04); }
html[data-look="3"] .sc-btn--danger, html[data-look="3"] a.sc-btn--danger { color: var(--bad); background: rgb(255 122 122 / .1); border: 1px solid rgb(255 122 122 / .4); }
html[data-look="3"] .sc-btn--danger:hover, html[data-look="3"] a.sc-btn--danger:hover { color: #1A0808; background: var(--bad); box-shadow: none; }
html[data-look="3"] .sc-btn--good { color: var(--on-accent); background: var(--good); }
html[data-look="3"] .sc-btn--good:hover { background: var(--good); filter: brightness(1.08); }
/* small = 36 px with a mouse, 44 px on touch (same rule as app/ui/button.css) */
html[data-look="3"] .sc-btn--sm, html[data-look="3"] a.sc-btn--sm { min-height: var(--btn-h-sm, 36px); padding: 0 12px; border-radius: var(--btn-radius-sm, 9px); }

/* ---- panels: lit glass, hairline separators, panel icon tile is a quiet wash ---- */
html[data-look="3"] .sc-panel {
  border: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bot));
  box-shadow: var(--lift);
}
html[data-look="3"] .sc-panel__head { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .sc-panel__icon { color: var(--accent); background: var(--accent-soft); border: 0; border-radius: var(--r-sm); }
html[data-look="3"] .sc-panel__title { font: 600 17px/1.3 var(--f-body), system-ui, sans-serif; letter-spacing: -.005em; color: var(--text); }
html[data-look="3"] .sc-panel__desc { color: var(--text-2); }
html[data-look="3"] .sc-panel--danger { box-shadow: var(--lift), 0 0 0 1px rgb(255 122 122 / .35); }
html[data-look="3"] .sc-panel--accent { box-shadow: var(--lift), 0 0 0 1px rgb(77 184 255 / .35); }
html[data-look="3"] .sc-subhead { color: var(--text-3); font-family: var(--f-mono), ui-monospace, monospace; }

/* ---- stat tiles, rows, tabs ---- */
html[data-look="3"] .sc-stat { border: 0; border-radius: var(--r); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .sc-stat::before { display: none; }
html[data-look="3"] .sc-stat__label { color: var(--text-3); font-family: var(--f-mono), ui-monospace, monospace; }
html[data-look="3"] .sc-stat__value { font-family: var(--f-display), var(--f-body), sans-serif; font-variant-numeric: tabular-nums; color: var(--text); }
html[data-look="3"] .sc-row { min-height: 56px; border-top-color: var(--hair); }
html[data-look="3"] .sc-row--link:hover { background: rgb(255 255 255 / .04); }
html[data-look="3"] .sc-row__meta { color: var(--text-3); }
html[data-look="3"] .sc-tab { min-height: var(--tap); padding: 0 16px; color: var(--text-2); border-color: var(--hair); background: rgb(255 255 255 / .04); }
html[data-look="3"] .sc-tab:hover { color: var(--text); }
html[data-look="3"] .sc-tab--active { color: var(--on-accent); background: var(--accent); border-color: transparent; }

/* ---- forms: 44 px fields, switches and checkbox rows are 44 px tall targets, labels readable ---- */
html[data-look="3"] .sc-field__label { font-size: 13px; color: var(--text); }
html[data-look="3"] .sc-field__hint { color: var(--text-3); line-height: 1.45; }
html[data-look="3"] .sc-field :is(input:not([type="checkbox"], [type="radio"], [type="color"]), select) { min-height: var(--tap); }
html[data-look="3"] .sc-field textarea { min-height: 96px; }
html[data-look="3"] .sc-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html[data-look="3"] .sc-switch { min-height: var(--tap); align-items: center; padding: 4px 0; font-size: 15px; }
html[data-look="3"] .sc-switch input[type="checkbox"] { width: 44px; height: 26px; }
html[data-look="3"] .sc-switch input[type="checkbox"]::after { top: 3px; left: 3px; width: 18px; height: 18px; background: var(--text-2); }
html[data-look="3"] .sc-switch input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
html[data-look="3"] .sc-switch input[type="checkbox"]:checked::after { transform: translateX(18px); background: var(--on-accent); }
html[data-look="3"] .sc-switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-look="3"] .sc-switch__hint { color: var(--text-3); }
/* plain checkboxes / radios inside forms: the whole label row is the target */
html[data-look="3"] .sc-form label:not(.sc-switch):has(> input[type="checkbox"]),
html[data-look="3"] .sc-form label:not(.sc-switch):has(> input[type="radio"]) { display: flex; align-items: center; gap: 12px; min-height: var(--tap); cursor: pointer; }
html[data-look="3"] .sc-form label:not(.sc-switch) > input[type="checkbox"], html[data-look="3"] .sc-form label:not(.sc-switch) > input[type="radio"] { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
html[data-look="3"] .sc-form-status--good { color: var(--good); }
html[data-look="3"] .sc-form-status--danger { color: var(--bad); }

/* ---- sticky save bar: hairline top, opaque enough to read over scrolling content ---- */
html[data-look="3"] .sc-savebar { background: rgb(10 14 20 / .92); border: 0; border-radius: var(--r); box-shadow: 0 -1px 0 var(--hair) inset, 0 12px 32px -12px rgb(0 0 0 / .8); }
@supports (backdrop-filter: blur(1px)) { html[data-look="3"] .sc-savebar { backdrop-filter: blur(8px); } }

/* ---- overview hero: lit glass, no grid texture, flat crest tile (the league's own colour stays on the crest ring only) ---- */
html[data-look="3"] .sc-hero { border: 0; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .sc-hero::after { display: none; }
html[data-look="3"] .sc-hero__crest { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px #0B0E14, 0 0 0 5px var(--league-accent, var(--hair)); }
html[data-look="3"] .sc-hero__kicker { color: var(--text-3); font-family: var(--f-mono), ui-monospace, monospace; }
html[data-look="3"] .sc-hero__name { font-family: var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; color: var(--text); }

/* ---- 390: shell padding follows the page gutter ---- */
@media (max-width: 640px) {
  html[data-look="3"] .sc-shell { padding-inline: var(--s4); }
  html[data-look="3"] .sc-panel__head, html[data-look="3"] .sc-row { padding-inline: var(--s4); }
}

/* ---- data tables inside the console: 12 px header floor ---- */
html[data-look="3"] .sc-shell th { font-size: var(--label-min); }

/* app/look3/areas-floor-manage.css */
/* WEB-LOOK-3 LOOK3-8d: manage - 12 px floor (SP-11). GENERATED by scripts/look3-floor.mjs; do not edit by hand.
   Lifts every text size below 12 px to var(--label-min) under html[data-look="3"]. Flag off = matches nothing. */
html[data-look="3"] .sc-id__kicker { font-size: var(--label-min); }
html[data-look="3"] .sc-id__link { font-size: var(--label-min); }
html[data-look="3"] .sc-season-chip { font-size: var(--label-min); }
html[data-look="3"] .sc-nav-label { font-size: var(--label-min); }
html[data-look="3"] .sc-nav-badge { font-size: var(--label-min); }
html[data-look="3"] .sc-head__eyebrow { font-size: var(--label-min); }
html[data-look="3"] .sc-btn--sm, html[data-look="3"] a.sc-btn--sm { font-size: var(--label-min); }
html[data-look="3"] .sc-stat__label { font-size: var(--label-min); }
html[data-look="3"] .sc-stat__hint { font-size: var(--label-min); }
html[data-look="3"] .sc-field__hint { font-size: var(--label-min); }
html[data-look="3"] .sc-subhead { font-size: var(--label-min); }
html[data-look="3"] .sc-switch__hint { font-size: var(--label-min); }
html[data-look="3"] .sc-chip { font-size: var(--label-min); }
html[data-look="3"] .sc-hero__kicker { font-size: var(--label-min); }
html[data-look="3"] .sc-quick__sub { font-size: var(--label-min); }
html[data-look="3"] .sc-check__detail { font-size: var(--label-min); }
html[data-look="3"] .sc-tl__meta { font-size: var(--label-min); }
html[data-look="3"] .sc-match__score--vs { font-size: var(--label-min); }
html[data-look="3"] .sc-picker__meta { font-size: var(--label-min); }
html[data-look="3"] .sc-details--inline > summary { font-size: var(--label-min); }
html[data-look="3"] .sc-access-area__hint { font-size: var(--label-min); }
html[data-look="3"] .sc-wiz-table th { font-size: var(--label-min); }
html[data-look="3"] .sc-setsearch__where { font-size: var(--label-min); }
html[data-look="3"] .sc-pos__long small { font-size: var(--label-min); }
html[data-look="3"] .sc-posmap__old small { font-size: var(--label-min); }

/* app/look3/areas-overlays.css */
/* WEB-LOOK-3 LOOK3-8d: overlays - sign-in modal, bug report, command palette, 404 ("Floodlight").
   Scoped to html[data-look="3"]; flag off = matches nothing. Imported by the components that render them
   (sign-in-modal.js, floating-bug-report.js, command-palette.js, not-found.js). The inbox draws nothing of its own (it feeds the bell). */

/* ---- modal: lit glass card, hairline edge, no accent glow ---- */
html[data-look="3"] .modal-overlay { background: rgb(4 5 8 / .78); }
html[data-look="3"] .modal-card {
  border: 0; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03)), #0E1219;
  box-shadow: var(--lift), 0 0 0 1px var(--hair);
  color: var(--text);
}
html[data-look="3"] .modal-card :is(h1, h2, h3) { font: 600 20px/1.3 var(--f-body), system-ui, sans-serif; letter-spacing: -.01em; }
html[data-look="3"] .modal-card :is(p, .hint) { color: var(--text-2); }
html[data-look="3"] .modal-card :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { min-height: var(--tap); }
html[data-look="3"] .modal-card :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html[data-look="3"] .modal-card label:has(> input[type="checkbox"]), html[data-look="3"] .modal-card label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 12px; min-height: var(--tap); }
html[data-look="3"] .modal-card :is(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- bug-report button: flat accent pill, 48 px ---- */
html[data-look="3"] .bug-report-fab { background: var(--accent); border: 0; color: var(--on-accent); box-shadow: 0 10px 28px -10px rgb(0 0 0 / .8); }
html[data-look="3"] .bug-report-fab:hover { background: var(--accent-hover); filter: none; }
html[data-look="3"] .bug-report-fab:active { background: var(--accent-press); transform: translateY(1px); }
html[data-look="3"] .bug-report-fab:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* ---- command palette ---- */
html[data-look="3"] .cmdk-overlay { background: rgb(4 5 8 / .7); }
html[data-look="3"] .cmdk-panel {
  border: 0; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .025)), #0E1219;
  box-shadow: var(--lift), 0 0 0 1px var(--hair);
}
html[data-look="3"] .cmdk-input-row { border-bottom-color: var(--hair); }
html[data-look="3"] .cmdk-input { min-height: var(--tap); font-size: 16px; color: var(--text); }
html[data-look="3"] .cmdk-group-label { font-family: var(--f-mono), ui-monospace, monospace; letter-spacing: .1em; color: var(--text-3); }
html[data-look="3"] .cmdk-item { min-height: var(--tap); border-radius: var(--r-sm); font-size: 15px; }
html[data-look="3"] .cmdk-item:hover, html[data-look="3"] .cmdk-item.active { background: var(--accent-soft); }
html[data-look="3"] .cmdk-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-look="3"] .cmdk-item-meta, html[data-look="3"] .cmdk-hint { color: var(--text-3); }
html[data-look="3"] .cmdk-kbd { font-family: var(--f-mono), ui-monospace, monospace; background: rgb(255 255 255 / .07); border-color: var(--hair); color: var(--text-2); }

/* ---- 404: the page has no class of its own - icon tile + hero title in the container is its signature ---- */
html[data-look="3"] main.container > .icon-tile + .hero-title { font: 800 clamp(2rem, 5vw, 3.25rem)/1.05 var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; text-transform: none; }
html[data-look="3"] main.container > .icon-tile + .hero-title ~ p { color: var(--text-2) !important; }
html[data-look="3"] main.container > .icon-tile:has(+ .hero-title) { background: var(--accent-soft); color: var(--accent); border: 0; }
html[data-look="3"] main.container > .icon-tile + .hero-title { background: none; -webkit-text-fill-color: currentColor; color: var(--text); text-shadow: none; }
html[data-look="3"] main.container > .icon-tile:has(+ .hero-title) { box-shadow: none; }

/* app/look3/areas-floor-overlays.css */
/* WEB-LOOK-3 LOOK3-8d: overlays - 12 px floor (SP-11). GENERATED by scripts/look3-floor.mjs; do not edit by hand.
   Lifts every text size below 12 px to var(--label-min) under html[data-look="3"]. Flag off = matches nothing. */
html[data-look="3"] .cmdk-kbd { font-size: var(--label-min); }
html[data-look="3"] .cmdk-group-label { font-size: var(--label-min); }

/* app/look3/areas-admin.css */
/* WEB-LOOK-3 LOOK3-8d: admin tools + bug reports (/admin, /admin/roadmap, /admin/discovery, /bugreports) ("Floodlight").
   Scoped to html[data-look="3"] body[data-section="admin"]; flag off = matches nothing. Chrome only: surfaces, headings, rows, links.
   The admin section colour (--sec-admin) is a marker (heading dot), never a tint on whole panels. */

html[data-look="3"] body[data-section="admin"] { --text-dim: var(--text-2); --border: var(--hair); }
html[data-look="3"] body[data-section="admin"] .card {
  border: 0; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bot));
  box-shadow: var(--lift);
}
html[data-look="3"] body[data-section="admin"] .card::before { display: none; }
html[data-look="3"] body[data-section="admin"] a.card:hover { transform: none; background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03)); }
html[data-look="3"] body[data-section="admin"] :is(a.card, button.card):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* one section-heading style: hairline rule instead of the glowing bar, h1 in the display face, h2 in sentence case */
html[data-look="3"] body[data-section="admin"] .section-head { margin: var(--s7) 0 var(--s4); gap: var(--s3); }
html[data-look="3"] body[data-section="admin"] .section-head::before { display: none; }
html[data-look="3"] body[data-section="admin"] .section-head::after { background: var(--hair); margin-left: var(--s2); }
html[data-look="3"] body[data-section="admin"] .section-head h1 { font: 800 clamp(28px, 4vw, 40px)/1.1 var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] body[data-section="admin"] .section-head h2 { font: 600 20px/1.3 var(--f-body), system-ui, sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] body[data-section="admin"] .container > .section-head:first-child { margin-top: var(--s6); }

html[data-look="3"] body[data-section="admin"] :is(.rm-lane, .rm-card) { border-color: var(--hair); border-radius: var(--r); background: rgb(255 255 255 / .03); }
html[data-look="3"] body[data-section="admin"] .fd-dim { color: var(--text-3); }
html[data-look="3"] body[data-section="admin"] .fd-stat { font-family: var(--f-display), var(--f-body), sans-serif; font-variant-numeric: tabular-nums; }
html[data-look="3"] body[data-section="admin"] input:not([type="checkbox"], [type="radio"]), html[data-look="3"] body[data-section="admin"] select { min-height: var(--tap); }
html[data-look="3"] body[data-section="admin"] label:has(> input[type="checkbox"]), html[data-look="3"] body[data-section="admin"] label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); }

/* app/look3/areas-settings.css */
/* WEB-LOOK-3 LOOK3-8d: /settings/notifications ("Floodlight"). Scoped to html[data-look="3"] .notify-settings; flag off = matches nothing.
   SP-11 residual: 12 px floor, 44 px checkbox rows (the whole Site / DM cell is the target), one section-heading style,
   Save sticks to the bottom of the viewport so it is never scrolled away on the long list. */

html[data-look="3"] .notify-settings { max-width: 760px; --text-dim: var(--text-2); --border: var(--hair); }
html[data-look="3"] .notify-settings .section-head { margin: var(--s6) 0 var(--s4); }
html[data-look="3"] .notify-settings .section-head::before { display: none; }
html[data-look="3"] .notify-settings .section-head::after { background: var(--hair); margin-left: var(--s2); }
html[data-look="3"] .notify-settings .section-head h1 { font: 800 clamp(28px, 4vw, 40px)/1.1 var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] .notify-settings-lede { color: var(--text-2); font-size: 15px; line-height: 1.55; }
html[data-look="3"] .notify-settings-lede strong { color: var(--text); }
html[data-look="3"] .notify-settings-flash { border-radius: var(--r); font-size: 14px; background: rgb(79 208 139 / .14); color: var(--text); }
html[data-look="3"] .notify-settings-flash--error { background: rgb(255 122 122 / .16); }

/* group = one lit panel; the group title is the section heading (same style as .l3-sechead__title) */
html[data-look="3"] .notify-settings-group { padding: var(--s2) var(--s5) var(--s3); border: 0; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .notify-settings-group h2 { margin: var(--s3) 0 var(--s2); font: 600 20px/1.3 var(--f-body), system-ui, sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] .notify-settings-head, html[data-look="3"] .notify-settings-row { grid-template-columns: minmax(0, 1fr) 64px 64px; gap: var(--s2); }
html[data-look="3"] .notify-settings-head span { font: 500 12px var(--f-mono), ui-monospace, monospace; letter-spacing: .08em; color: var(--text-3); }
html[data-look="3"] .notify-settings-row { min-height: 56px; padding: 6px 0; border-top: 1px solid var(--hair); }
html[data-look="3"] .notify-settings-label { font-size: 15px; color: var(--text); }
html[data-look="3"] .notify-settings-label small { font-size: 13px; line-height: 1.4; color: var(--text-3); }
html[data-look="3"] .notify-settings-na { color: var(--text-3); }
html[data-look="3"] .notify-settings-row--tips { grid-template-columns: minmax(0, 1fr) 128px; }

/* 44 x 44 checkbox cell; the visible box stays 22 px */
html[data-look="3"] .notify-settings-toggle { align-items: center; min-width: var(--tap); min-height: var(--tap); cursor: pointer; }
html[data-look="3"] .notify-settings-toggle input { width: 22px; height: 22px; accent-color: var(--accent); }
html[data-look="3"] .notify-settings-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-look="3"] .notify-settings-toggle input:disabled { opacity: .5; }

/* sticky Save: pinned to the viewport bottom inside the form, opaque bar with a hairline */
html[data-look="3"] .notify-settings-actions {
  position: sticky; bottom: 0; z-index: 5;
  margin: var(--s5) calc(var(--s4) * -1) 0; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: rgb(6 8 12 / .94);
  box-shadow: 0 -1px 0 var(--hair);
}
@supports (backdrop-filter: blur(1px)) { html[data-look="3"] .notify-settings-actions { backdrop-filter: blur(8px); } }
html[data-look="3"] .notify-settings-actions button { min-height: var(--btn-h, 44px); padding: 0 24px; border-radius: var(--btn-radius, 11px); }
html[data-look="3"] .notify-settings-link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 14px; color: var(--text-2); }
html[data-look="3"] .notify-settings-link:hover { color: var(--text); }
html[data-look="3"] .notify-settings-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 640px) {
  html[data-look="3"] .notify-settings-group { padding-inline: var(--s4); }
  html[data-look="3"] .notify-settings-head, html[data-look="3"] .notify-settings-row { grid-template-columns: minmax(0, 1fr) 48px 48px; gap: 0; }
  html[data-look="3"] .notify-settings-row--tips { grid-template-columns: minmax(0, 1fr) 96px; }
}

/* app/look3/areas-pages.css */
/* WEB-LOOK-3 LOOK3-8d: changelog + get-started residuals (12 px floor, one heading style). Scoped to html[data-look="3"]; flag off = matches nothing.
   These pages have no class of their own, so each rule keys on a descendant only that page renders. */

/* changelog: the Website / Bot switch and every entry pill */
html[data-look="3"] main.container:has(a[href="/changelog/bot"]) .pill { font-size: var(--label-min); min-height: 28px; display: inline-flex; align-items: center; }
html[data-look="3"] main.container:has(a[href="/changelog/bot"]) > div:first-child .pill { min-height: var(--tap); padding-inline: var(--s4); }
/* get-started: the count chips on the roadmap */
html[data-look="3"] main.container:has(.roadmap-item) .count-pill { font-size: var(--label-min); }

/* app/cardgame/look3/chrome.css */
/* WEB-LOOK-3 LOOK3-8b: card game chrome ("Floodlight"). Only html[data-look="3"] body[data-section="cardgame"] (/cardgame/*,
   /shop, /card-maker, /formation-maker). Flag off = matches nothing.
   Chrome only: surfaces, panels, headings, pills, tables, fields, links. NOT touched (keep their own colours): card faces,
   rarity frames and art (.pack-tier-card gradient tints, .pack-open-*, goal/card faces), pitch art, the Spark coin, shop previews.
   Primitives from app/ui (table.css, row.js) are reused by class name where markup allows; nothing here edits app/ui. */

/* ---- surfaces: .card becomes a lit glass panel (no accent top line, no glow, no lift on hover) ---- */
html[data-look="3"] body[data-section="cardgame"] .card {
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bot));
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  padding: var(--s4) var(--s5);
}
html[data-look="3"] body[data-section="cardgame"] .card::before { display: none; }
html[data-look="3"] body[data-section="cardgame"] a.card:hover, html[data-look="3"] body[data-section="cardgame"] button.card:hover {
  transform: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03));
  box-shadow: var(--lift);
}
html[data-look="3"] body[data-section="cardgame"] a.card:focus-visible, html[data-look="3"] body[data-section="cardgame"] button.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- headings: hairline instead of the glowing bar; display face for the page title only ---- */
html[data-look="3"] body[data-section="cardgame"] .section-head { margin: var(--s7) 0 var(--s4); gap: var(--s3); }
html[data-look="3"] body[data-section="cardgame"] .section-head::before { display: none; }
html[data-look="3"] body[data-section="cardgame"] .section-head::after { background: var(--hair); margin-left: var(--s2); }
html[data-look="3"] body[data-section="cardgame"] .section-head h2 { font: 600 20px/1.3 var(--f-body), system-ui, sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] body[data-section="cardgame"] .section-head h1 { font: 800 clamp(28px, 4vw, 40px)/1.1 var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] body[data-section="cardgame"] .container > .section-head:first-child { margin-top: var(--s6); }

/* ---- HUD: currencies are quiet chips with a marker dot, nav rail icons flat ---- */
html[data-look="3"] body[data-section="cardgame"] .cardgame-hud { padding: var(--s4) var(--s5); }
html[data-look="3"] body[data-section="cardgame"] .cardgame-currency {
  color: var(--text);
  background: rgb(255 255 255 / .05);
  border: 1px solid var(--hair);
  box-shadow: none;
  font-family: var(--f-mono), ui-monospace, monospace;
  font-size: .95rem;
}
html[data-look="3"] body[data-section="cardgame"] .cardgame-currency--kon, html[data-look="3"] body[data-section="cardgame"] .cardgame-currency--gem { color: var(--text); background: rgb(255 255 255 / .05); border-color: var(--hair); box-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .cardgame-currency-dot { box-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .cardgame-currency--kon .cardgame-currency-dot { background: var(--sec-leagues); box-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .cardgame-currency--gem .cardgame-currency-dot { background: var(--sec-cards); box-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .cardgame-currency-label { font-family: var(--f-mono), ui-monospace, monospace; font-size: .72rem; color: var(--text-2); opacity: 1; }
html[data-look="3"] body[data-section="cardgame"] .cardgame-server-switcher summary { border-color: var(--hair); background: rgb(255 255 255 / .04); color: var(--text); }

/* ---- hub tiles: flat panels, "ready" state is an accent ring, not a pulsing glow ---- */
html[data-look="3"] body[data-section="cardgame"] .cardgame-hero-tile {
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bot));
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--lift);
  min-height: var(--tap);
}
html[data-look="3"] body[data-section="cardgame"] .cardgame-hero-tile:not(:disabled):hover { border: 0; transform: none; background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03)); }
html[data-look="3"] body[data-section="cardgame"] .cardgame-hero-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-look="3"] body[data-section="cardgame"] .cardgame-hero-tile-title { font-weight: 600; font-size: 1rem; }
html[data-look="3"] body[data-section="cardgame"] .cardgame-hero-tile-sub { color: var(--text-3); font-size: .85rem; }
html[data-look="3"] body[data-section="cardgame"] .cardgame-hero-tile--ready { border: 0; animation: none; box-shadow: var(--lift), 0 0 0 1px var(--accent); }

/* ---- pills and chips ---- */
html[data-look="3"] body[data-section="cardgame"] .pill { border: 0; background: rgb(255 255 255 / .07); color: var(--text-2); font-family: var(--f-mono), ui-monospace, monospace; letter-spacing: .02em; text-transform: none; }
html[data-look="3"] body[data-section="cardgame"] .pill--live { background: color-mix(in srgb, var(--live) 18%, transparent); color: var(--live); }
html[data-look="3"] body[data-section="cardgame"] .pill--scheduled { background: var(--accent-soft); color: var(--accent); }
html[data-look="3"] body[data-section="cardgame"] .pill--win { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); }
html[data-look="3"] body[data-section="cardgame"] .pill--loss { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
html[data-look="3"] body[data-section="cardgame"] .pill--draw, html[data-look="3"] body[data-section="cardgame"] .pill--final { background: rgb(255 255 255 / .07); color: var(--text-2); }
html[data-look="3"] body[data-section="cardgame"] .pill--gold { background: color-mix(in srgb, var(--sec-leagues) 20%, transparent); color: var(--sec-leagues); }

/* ---- links in running text ---- */
html[data-look="3"] body[data-section="cardgame"] main a:not(.btn):not(.card):not([class*="tile"]):not([class*="btn"]) { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
html[data-look="3"] body[data-section="cardgame"] main a:not(.btn):not(.card):not([class*="tile"]):not([class*="btn"]):hover { color: var(--accent-hover); }

/* ---- data tables: same geometry as the shared l3-tbl (app/ui/table.css) ---- */
html[data-look="3"] body[data-section="cardgame"] .data-table { border-collapse: collapse; background: transparent; border: 0; box-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .data-table thead th { background: transparent; color: var(--text-3); font: 500 12px/1.4 var(--f-mono), ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; border: 0; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] body[data-section="cardgame"] .data-table tbody tr { background: transparent; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] body[data-section="cardgame"] .data-table tbody tr:hover { background: rgb(255 255 255 / .03); }
html[data-look="3"] body[data-section="cardgame"] .data-table td { border: 0; color: var(--text-2); }
html[data-look="3"] body[data-section="cardgame"] .data-table td:first-child, html[data-look="3"] body[data-section="cardgame"] .data-table th:first-child { box-shadow: none; border-left: 0; background: transparent; }
html[data-look="3"] body[data-section="cardgame"] .data-table tbody tr:hover td:first-child { background: transparent; box-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .stat-value { font-family: var(--f-display), var(--f-body), sans-serif; color: var(--text); text-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .stat-label { font-family: var(--f-mono), ui-monospace, monospace; color: var(--text-3); letter-spacing: .04em; }

/* ---- fields ---- */
html[data-look="3"] body[data-section="cardgame"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  min-height: var(--tap);
  background: rgb(255 255 255 / .05);
  border: 1px solid var(--hair);
  border-radius: var(--btn-radius, 11px);
  color: var(--text);
  box-shadow: none;
}
html[data-look="3"] body[data-section="cardgame"] :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
html[data-look="3"] body[data-section="cardgame"] :is(input, textarea)::placeholder { color: var(--text-3); }
html[data-look="3"] body[data-section="cardgame"] .hint, html[data-look="3"] body[data-section="cardgame"] .lu-muted, html[data-look="3"] body[data-section="cardgame"] .cm-hint, html[data-look="3"] body[data-section="cardgame"] .lm-hint { color: var(--text-3); }

/* ---- packs: the tier cards keep their tinted art, only the frame around changes ---- */
html[data-look="3"] body[data-section="cardgame"] .pack-tier-card { border: 0; border-radius: var(--r-lg); box-shadow: var(--lift); }
html[data-look="3"] body[data-section="cardgame"] .pack-tier-card:hover { transform: none; }
html[data-look="3"] body[data-section="cardgame"] .pack-tier-name { font-weight: 600; letter-spacing: -.01em; }
html[data-look="3"] body[data-section="cardgame"] .pack-tier-odds .pill { font-family: var(--f-mono), ui-monospace, monospace; }

/* ---- challenge / vs scoreboards ---- */
html[data-look="3"] body[data-section="cardgame"] .challenge-scoreboard-score { font-family: var(--f-display), var(--f-body), sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .challenge-vs-banner { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 0; box-shadow: var(--lift); border-radius: var(--r-lg); }
html[data-look="3"] body[data-section="cardgame"] .challenge-vs-badge { background: rgb(255 255 255 / .08); color: var(--text); box-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .challenge-log-line { border-color: var(--hair); }

@media (max-width: 640px) {
  html[data-look="3"] body[data-section="cardgame"] .card { padding: var(--s4); }
  html[data-look="3"] body[data-section="cardgame"] .section-head { margin: var(--s6) 0 var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-look="3"] body[data-section="cardgame"] .cardgame-hero-tile--ready { animation: none; }
}

/* app/cardgame/look3/areas.css */
/* WEB-LOOK-3 LOOK3-8b: card game areas - lineup builder, lineup/card makers, shop, guide. html[data-look="3"] only.
   Art keeps its colours: pitch drawing, player tokens and kit colours (--lm-kit/--lm-trim), card skins, the Spark coin,
   shop previews, guide card art and the tier/chemistry colour keys. Only the panels, fields, chips and type around them change. */

/* ---- lineup builder (.lu, app/components/lineup): also used on team / match / career pages, so scoped by class only ---- */
html[data-look="3"] .lu { --lu-line: var(--hair); --lu-chip: rgb(255 255 255 / .06); --lu-accent: var(--accent); }
html[data-look="3"] .lu-btn { border: 0; border-radius: var(--btn-radius, 11px); background: var(--lu-chip); color: var(--text); font-weight: 600; }
html[data-look="3"] .lu-btn:hover { background: rgb(255 255 255 / .1); }
html[data-look="3"] .lu-btn--primary { background: var(--accent); color: var(--on-accent); }
html[data-look="3"] .lu-btn--primary:hover { background: var(--accent-hover); }
html[data-look="3"] .lu-btn--danger { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 55%, transparent); }
html[data-look="3"] .lu-btn--ghost { background: transparent; }
html[data-look="3"] :is(.lu-select, .lu-input) { background: rgb(255 255 255 / .05); border: 1px solid var(--hair); border-radius: var(--btn-radius, 11px); color: var(--text); }
html[data-look="3"] .lu-note { background: var(--accent-soft); border: 0; color: var(--text-2); border-radius: var(--r); }
html[data-look="3"] .lu-row { border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 -1px 0 var(--hair); }
html[data-look="3"] .lu-tag { border: 0; background: var(--accent-soft); color: var(--accent); font-family: var(--f-mono), ui-monospace, monospace; }
html[data-look="3"] .lu-chip { border: 0; background: var(--lu-chip); border-radius: var(--btn-radius, 11px); }
html[data-look="3"] .lu-chip[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
html[data-look="3"] .lu-roster { border: 0; background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border-radius: var(--r-lg); box-shadow: var(--lift); }
html[data-look="3"] .lu-pick { background: transparent; }
html[data-look="3"] .lu-pick:hover { background: rgb(255 255 255 / .05); }
html[data-look="3"] .lu-bench { border: 1px dashed var(--hair); border-radius: var(--r); }
html[data-look="3"] .lu-sheet { background: color-mix(in srgb, var(--bg) 92%, white 8%); border: 0; box-shadow: var(--lift); }
html[data-look="3"] .lu-bar { background: color-mix(in srgb, var(--bg) 94%, white 6%); border-top: 1px solid var(--hair); }
html[data-look="3"] .lu-banner { background: var(--accent-soft); border: 0; border-radius: var(--r); color: var(--text); }
html[data-look="3"] .lu-pitch { border: 0; box-shadow: var(--lift); }

/* ---- Lineup Maker + Card Maker ---- */
html[data-look="3"] body[data-section="cardgame"] .fm-lead, html[data-look="3"] body[data-section="cardgame"] .cm-lead { color: var(--text-2); }
html[data-look="3"] body[data-section="cardgame"] :is(.lm-panel, .cm-controls) { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 0; border-radius: var(--r-lg); box-shadow: var(--lift); }
html[data-look="3"] body[data-section="cardgame"] .cm-field > span { font-family: var(--f-mono), ui-monospace, monospace; color: var(--text-3); letter-spacing: .04em; }
html[data-look="3"] body[data-section="cardgame"] :is(.cm-field select, .cm-field input, .lm-xi textarea) { background: rgb(255 255 255 / .05); border: 1px solid var(--hair); border-radius: var(--btn-radius, 11px); color: var(--text); }
html[data-look="3"] body[data-section="cardgame"] .lm-chip { border: 0; background: rgb(255 255 255 / .06); color: var(--text-2); min-height: var(--tap); }
html[data-look="3"] body[data-section="cardgame"] .lm-chip.is-on { background: var(--accent); color: var(--on-accent); }
html[data-look="3"] body[data-section="cardgame"] .lm-segment { border: 0; background: rgb(255 255 255 / .05); border-radius: var(--btn-radius, 11px); }
html[data-look="3"] body[data-section="cardgame"] .lm-segment button { background: transparent; color: var(--text-2); }
html[data-look="3"] body[data-section="cardgame"] .lm-segment button.is-on { background: rgb(255 255 255 / .14); color: var(--text); }
html[data-look="3"] body[data-section="cardgame"] .lm-swatch.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
html[data-look="3"] body[data-section="cardgame"] :is(.cm-skin, .cm-roblox-btn) { border-radius: var(--r); }
html[data-look="3"] body[data-section="cardgame"] .cm-skin--active { background: var(--accent-soft); border-color: var(--accent); }
html[data-look="3"] body[data-section="cardgame"] .cm-roblox-btn { border: 0; background: rgb(255 255 255 / .06); color: var(--text); }
html[data-look="3"] body[data-section="cardgame"] .lm-editor { background: color-mix(in srgb, var(--bg) 92%, white 8%); border: 0; box-shadow: var(--lift); border-radius: var(--r-lg); }
html[data-look="3"] body[data-section="cardgame"] .lm-editor__close { border: 0; background: rgb(255 255 255 / .06); color: var(--text); }
html[data-look="3"] body[data-section="cardgame"] .lm-editor__error { color: var(--bad); }
html[data-look="3"] body[data-section="cardgame"] .lm-xi__order li { background: rgb(255 255 255 / .05); }

/* ---- Spark shop: the coin stays gold art; hero, bars, chips and buttons use the system ---- */
html[data-look="3"] body[data-section="cardgame"] .sh-page { --sh-spark: var(--sec-leagues); }
html[data-look="3"] body[data-section="cardgame"] .sh-hero { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 0; box-shadow: var(--lift); }
html[data-look="3"] body[data-section="cardgame"] .sh-hero::before, html[data-look="3"] body[data-section="cardgame"] .sh-hero::after { display: none; }
html[data-look="3"] body[data-section="cardgame"] .sh-balance b { font-family: var(--f-display), var(--f-body), sans-serif; color: var(--text); text-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .sh-balance > span:last-child { font-family: var(--f-mono), ui-monospace, monospace; letter-spacing: .08em; color: var(--text-2); }
html[data-look="3"] body[data-section="cardgame"] .sh-coin { box-shadow: none; }
html[data-look="3"] body[data-section="cardgame"] .sh-hero__sub { color: var(--text-2); }
html[data-look="3"] body[data-section="cardgame"] .sh-claim { border-radius: var(--btn-radius, 11px); min-height: var(--tap); background: var(--accent); color: var(--on-accent); box-shadow: none; font-weight: 600; }
html[data-look="3"] body[data-section="cardgame"] .sh-claim:hover { filter: none; background: var(--accent-hover); }
html[data-look="3"] body[data-section="cardgame"] .sh-daily__wait { background: rgb(255 255 255 / .05); border: 0; border-radius: var(--btn-radius, 11px); color: var(--text-2); }
html[data-look="3"] body[data-section="cardgame"] .sh-collection { background: rgb(255 255 255 / .04); border: 0; border-radius: var(--r); }
html[data-look="3"] body[data-section="cardgame"] .sh-bar i { background: var(--accent); }
html[data-look="3"] body[data-section="cardgame"] .sh-section__head h2 { font: 600 20px/1.3 var(--f-body), system-ui, sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] body[data-section="cardgame"] .sh-count { font-family: var(--f-mono), ui-monospace, monospace; background: rgb(255 255 255 / .07); border: 0; color: var(--text-2); }
html[data-look="3"] body[data-section="cardgame"] .sh-page .shop-item-card { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 0; box-shadow: var(--lift); border-radius: var(--r-lg); }
html[data-look="3"] body[data-section="cardgame"] .sh-page .shop-item-card--equipped { box-shadow: var(--lift), 0 0 0 1px var(--accent); }
html[data-look="3"] body[data-section="cardgame"] .sh-chip { border: 0; background: rgb(255 255 255 / .07); color: var(--text-2); font-family: var(--f-mono), ui-monospace, monospace; }
html[data-look="3"] body[data-section="cardgame"] .sh-chip--price { color: var(--sec-leagues); background: color-mix(in srgb, var(--sec-leagues) 16%, transparent); }
html[data-look="3"] body[data-section="cardgame"] .sh-chip--equipped { color: var(--on-accent); background: var(--accent); }
html[data-look="3"] body[data-section="cardgame"] .sh-btn { min-height: var(--tap); border-radius: var(--btn-radius, 11px); font-weight: 600; }
html[data-look="3"] body[data-section="cardgame"] .sh-btn--buy { background: var(--accent); color: var(--on-accent); }
html[data-look="3"] body[data-section="cardgame"] .sh-btn--buy:hover { background: var(--accent-hover); }
html[data-look="3"] body[data-section="cardgame"] .sh-btn--short { background: rgb(255 255 255 / .04); border: 1px dashed var(--hair); color: var(--text-3); }

/* ---- guide: panels and headings only; card art, tier bars, chemistry and coin keys keep their colours ---- */
html[data-look="3"] body[data-section="cardgame"] .cg-guide { --g-panel: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__hero { background: radial-gradient(70% 90% at 80% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%), linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 0; box-shadow: var(--lift); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__hero::before { display: none; }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__hero h1 { font-family: var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__kicker { font-family: var(--f-mono), ui-monospace, monospace; color: var(--text-2); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__toc { background: color-mix(in srgb, var(--bg) 92%, transparent); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__toc a { border: 0; background: rgb(255 255 255 / .06); color: var(--text-2); min-height: var(--tap); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__toc a:hover { color: var(--text); background: rgb(255 255 255 / .1); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__section > h2 { font: 600 24px/1.3 var(--f-body), system-ui, sans-serif; letter-spacing: -.01em; }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__section > h2::before { display: none; }
html[data-look="3"] body[data-section="cardgame"] :is(.cg-guide__step, .cg-guide__special, .cg-guide__block, .cg-guide__packs, .cg-guide__pitch, .cg-guide__tiers) { border: 0; box-shadow: var(--lift); border-radius: var(--r-lg); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__tiers { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__step-icon { background: var(--accent-soft); color: var(--accent); }
html[data-look="3"] body[data-section="cardgame"] :is(.cg-guide__chem-list li, .cg-guide__command) { border: 0; background: rgb(255 255 255 / .04); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__ladder::before { background: var(--hair); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__rung { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 0; box-shadow: var(--lift); }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__rung-icon { background: var(--accent-soft); border: 0; }
html[data-look="3"] body[data-section="cardgame"] .cg-guide__end { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 0; box-shadow: var(--lift), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---- shared hub hero (hub-hero in the shop): no glow edge, no watermark, flat eyebrow ---- */
html[data-look="3"] body[data-section="cardgame"] .hub-hero { --hub-accent: var(--accent); border-radius: var(--r-lg); }
html[data-look="3"] body[data-section="cardgame"] .hub-hero::before,
html[data-look="3"] body[data-section="cardgame"] .hub-hero__edge,
html[data-look="3"] body[data-section="cardgame"] .hub-hero__watermark { display: none; }
html[data-look="3"] body[data-section="cardgame"] .hub-eyebrow { font-family: var(--f-mono), ui-monospace, monospace; color: var(--text-2); }
html[data-look="3"] body[data-section="cardgame"] .hub-eyebrow::before { display: none; }
html[data-look="3"] body[data-section="cardgame"] .hub-eyebrow span, html[data-look="3"] body[data-section="cardgame"] .hub-label { color: var(--text-3); letter-spacing: .06em; }

/* app/manager/look3/remap.css */
/* WEB-LOOK-3 LOOK3-8c phase 1: Football Manager / Career Mode chrome remap. GENERATED by scripts/look3-manager.mjs from
   59 area stylesheets; do not edit by hand (hand-written rules live in app/manager/look3/manager.css).
   Every selector is under html[data-look="3"]; flag off = matches nothing. */
html[data-look="3"] .ch-stage__frame .profile-hero-avatar-ring { box-shadow: var(--lift); }
html[data-look="3"] .ch-pos { color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .ch-name { color: var(--text); text-shadow: none; }
html[data-look="3"] .ch-club { color: var(--text-2); }
html[data-look="3"] .ch-club strong { color: var(--text); }
html[data-look="3"] .ch-free { border: 1px dashed var(--hair); }
html[data-look="3"] .ch-stat { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 1px solid var(--hair); }
html[data-look="3"] .ch-stat b { color: var(--text); }
html[data-look="3"] .ch-stat--accent { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ch-visit { color: var(--text); border: 1px solid var(--hair); }
html[data-look="3"] .ch-visit:hover { border-color: color-mix(in srgb, var(--hub-accent) 55%, transparent); }
html[data-look="3"] .ch-tabs.career-tabs { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 1px solid var(--hair); }
html[data-look="3"] .ch-tabs .career-tab { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-look="3"] .ch-tabs .career-tab.is-active { color: var(--on-accent); background: linear-gradient(135deg, color-mix(in srgb, var(--ch-accent, var(--accent)) 80%, white), var(--ch-accent, var(--accent))); box-shadow: none; }
html[data-look="3"] .ch-panel { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .ch-panel__head { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .ch-panel__head h2 { color: var(--text-2); }
html[data-look="3"] .ch-panel__head::before { display: none; }
html[data-look="3"] .ch-next__crest { box-shadow: none; }
html[data-look="3"] .ch-next__vs { color: var(--text-2); }
html[data-look="3"] .ch-score { border: 1px solid var(--hair); }
html[data-look="3"] a.ch-score:hover { border-color: color-mix(in srgb, var(--ch-accent, var(--accent)) 45%, transparent); }
html[data-look="3"] .ch-score__side--mine span { color: var(--text); }
html[data-look="3"] .ch-score__result { color: var(--text); }
html[data-look="3"] .ch-score__result.is-W { color: var(--win, #2fe89a); }
html[data-look="3"] .ch-score__result.is-L { color: var(--loss, #ff5d6c); }
html[data-look="3"] .ch-record b { color: var(--text); }
html[data-look="3"] .ch-timeline::before { display: none; }
html[data-look="3"] .ch-feed li { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .ch-chip { border: 1px solid var(--hair); }
html[data-look="3"] .ch-journey li + li::before { display: none; }
html[data-look="3"] .ch-journey li.is-current .ch-journey__crest { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-accent, var(--accent)) 22%, transparent); }
html[data-look="3"] .ch-spell + .ch-spell { border-top: 1px solid var(--hair); }
html[data-look="3"] .ch-spell.is-current { border-top-color: transparent; }
html[data-look="3"] .ch-spell.is-current + .ch-spell { border-top-color: transparent; }
html[data-look="3"] .ch-move + .ch-move { border-top: 1px solid var(--hair); }
html[data-look="3"] .ch-move::after { box-shadow: 0 0 0 3px #0b1019; }
html[data-look="3"] .ch-move.is-off::after { box-shadow: 0 0 0 3px #0b1019; }
html[data-look="3"] .ch-move__club--none { border: 1px dashed var(--hair); }
html[data-look="3"] .ch-inout__row + .ch-inout__row { border-top: 1px solid var(--hair); }
html[data-look="3"] .ch-seg { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 1px solid var(--hair); }
html[data-look="3"] .ch-seg a:hover { color: var(--text); }
html[data-look="3"] .ch-seg a.is-active { color: var(--on-accent); background: linear-gradient(135deg, color-mix(in srgb, var(--ch-accent, var(--accent)) 80%, white), var(--ch-accent, var(--accent))); }
html[data-look="3"] .ch-seasons a { border: 1px solid var(--hair); }
html[data-look="3"] .ch-seasons a:hover { color: var(--text); border-color: var(--hair); }
html[data-look="3"] .ch-seasons a.is-active { color: var(--text); background: color-mix(in srgb, var(--ch-accent, var(--accent)) 14%, transparent); }
html[data-look="3"] .ch-seasons i { color: var(--on-accent); }
html[data-look="3"] .ch-big { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ch-big::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%); }
html[data-look="3"] .ch-big b { color: var(--text); }
html[data-look="3"] .ch-big span { color: var(--text-2); }
html[data-look="3"] .ch-big--accent { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: none; }
html[data-look="3"] .ch-results__rate { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: none; }
html[data-look="3"] .ch-wdl .is-d { background: linear-gradient(180deg, #a3adbf, #7d8799); }
html[data-look="3"] .ch-wdl__legend b { color: var(--text); }
html[data-look="3"] .ch-wdl__legend .is-w { color: var(--win); }
html[data-look="3"] .ch-wdl__legend .is-d { color: var(--text-2); }
html[data-look="3"] .ch-wdl__legend .is-l { color: var(--loss); }
html[data-look="3"] .ch-discipline > span { border: 1px solid var(--hair); }
html[data-look="3"] .ch-oob::before { display: none; }
html[data-look="3"] .ch-ach-hero__text b { color: var(--text); }
html[data-look="3"] .ch-ach__text strong { color: var(--text); }
html[data-look="3"] .ch-ach__count { color: var(--text); }
html[data-look="3"] .ch-ach-next__item + .ch-ach-next__item { border-top: 1px solid var(--hair); }
html[data-look="3"] .ch-ach-locked + .ch-ach-locked { border-top: 1px solid var(--hair); }
html[data-look="3"] .ch-depth__area { border: 1px solid var(--hair); }
html[data-look="3"] .ch-depth__area:hover { border-color: var(--hair); }
html[data-look="3"] .ch-depth__area.is-on { border-color: color-mix(in srgb, var(--ch-accent, var(--accent)) 55%, transparent); background: color-mix(in srgb, var(--ch-accent, var(--accent)) 8%, transparent); }
html[data-look="3"] .ch-depth__top b { color: var(--text); }
html[data-look="3"] .ch-depth__avg { color: var(--text); }
html[data-look="3"] .ch-depth__area.is-weak .ch-depth__avg { color: var(--loss); }
html[data-look="3"] .ch-scout__row + .ch-scout__row, html[data-look="3"] .ch-scout__item + .ch-scout__item, html[data-look="3"] .ch-scout__row + .ch-scout__item, html[data-look="3"] .ch-scout__item + .ch-scout__row { border-top: 1px solid var(--hair); }
html[data-look="3"] .ch-scout__who b { color: var(--text); }
html[data-look="3"] .ch-scout__value { color: var(--text); }
html[data-look="3"] .ch-scout__value.is-over { color: var(--loss); }
html[data-look="3"] .ch-club__name b { color: var(--text); }
html[data-look="3"] .ch-club__wdl .is-d { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ch-lineup > .card { background: transparent; box-shadow: none; }
html[data-look="3"] .ch-squad__row + .ch-squad__row { border-top: 1px solid var(--hair); }
html[data-look="3"] .ch-squad__row.is-you { background: color-mix(in srgb, var(--ch-accent, var(--accent)) 7%, transparent); }
html[data-look="3"] .ch-squad__who b { color: var(--text); }
html[data-look="3"] .ch-btn--off { border: 1px solid var(--hair); }
html[data-look="3"] .ch-plan-slot > b { color: var(--text); }
html[data-look="3"] .ch-select { border: 1px solid var(--hair); }
html[data-look="3"] .ch-btn--primary { color: var(--on-accent); }
html[data-look="3"] .ch-res { color: var(--text); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ch-res--w { color: var(--on-accent); }
html[data-look="3"] .ch-plan-depth__row b { color: var(--text); }
html[data-look="3"] .cupd-hero { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cupd-hero__team em { color: var(--on-accent); }
html[data-look="3"] .cupd-verdict span { border: 1px solid var(--hair); }
html[data-look="3"] .cupd-group { border: 1px solid var(--hair); }
html[data-look="3"] .cupd-row { border-top: 1px solid var(--hair); }
html[data-look="3"] .cupd-news__item { border: 1px solid var(--hair); }
html[data-look="3"] .cf-shootout { border: 1px solid var(--rf-edge, var(--hair)); }
html[data-look="3"] .cf-group + .cf-group { border-top: 1px solid var(--rf-edge, var(--hair)); }
html[data-look="3"] .ds-overlay { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); }
html[data-look="3"] .ds-sheet { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); box-shadow: var(--lift); }
html[data-look="3"] .ds-close { border: 1px solid var(--hair); }
html[data-look="3"] .ds-cal__day { border: 1px solid var(--hair); }
html[data-look="3"] .ds-cal__day.is-today { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
html[data-look="3"] .ds-assistant { border: 1px solid var(--hair); }
html[data-look="3"] .ds-assistant__face { color: var(--on-accent); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ds-card { border: 1px solid color-mix(in srgb, var(--gold-bright, #f5c065) 32%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--gold-bright, #f5c065) 8%, transparent), transparent 70%),
    #0e131d; }
html[data-look="3"] .ds-card.is-answered { border-color: var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ds-option { border: 1px solid var(--hair); }
html[data-look="3"] .ds-option:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
html[data-look="3"] .ds-outcome { border-top: 1px dashed var(--hair); }
html[data-look="3"] .ds-chip { border: 1px solid var(--hair); }
html[data-look="3"] .ds-settled { border: 1px solid var(--hair); }
html[data-look="3"] .ds-headline { border: 1px solid var(--hair); }
html[data-look="3"] .ds-headline--lead { background: transparent; }
html[data-look="3"] .ds-panel { border: 1px solid var(--hair); }
html[data-look="3"] .ds-mood__row { background: transparent; }
html[data-look="3"] .ds-news { border: 1px solid var(--hair); }
html[data-look="3"] .ds-foot { border-top: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); }
@media (max-width: 640px) {
  html[data-look="3"] .ds-sheet { border: 0; }
}
html[data-look="3"] .ds-post { border: 1px solid var(--hair); }
html[data-look="3"] .gwo-when { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .gwo-score { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .gwo-row { background: transparent; }
html[data-look="3"] .gwo-pill--played { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mib { --mib-edge: var(--hair); --mib-edge-strong: var(--hair); --mib-row: transparent; --mib-row-hover: rgb(255 255 255 / .05); }
html[data-look="3"] .mib-kicker i { box-shadow: none; }
html[data-look="3"] .mib-head { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .mib-head__text h1 { color: var(--text); }
html[data-look="3"] .mib-head__stats span { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mib-head__stats b { color: var(--text); }
html[data-look="3"] .mib-kind, html[data-look="3"] .mib-tool { border: 1px solid var(--mib-edge-strong); color: var(--ink-soft, #c4cee2); }
html[data-look="3"] .mib-kind:hover, html[data-look="3"] .mib-tool:hover { color: var(--text); border-color: var(--hair); }
html[data-look="3"] .mib-kind.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html[data-look="3"] .mib-kind.is-on em { color: var(--on-accent); }
html[data-look="3"] .mib-tool.is-on { border-color: rgba(67, 255, 196, 0.6); color: var(--accent); }
html[data-look="3"] .mib-list { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mib-item { border: 0; border-bottom: 1px solid var(--hair); background: var(--mib-row); }
html[data-look="3"] .mib-item:last-child { border-bottom: 0; }
html[data-look="3"] .mib-item:hover { background: var(--mib-row-hover); }
html[data-look="3"] .mib-item.is-open { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mib-item.is-unread::before { display: none; }
html[data-look="3"] .mib-item__icon { color: var(--ink-soft, #c4cee2); }
html[data-look="3"] .mib-item--matches .mib-item__icon { color: var(--accent); }
html[data-look="3"] .mib-item--transfers .mib-item__icon { color: var(--accent); }
html[data-look="3"] .mib-item--dressing .mib-item__icon { color: var(--sec-leagues); }
html[data-look="3"] .mib-item--club .mib-item__icon { color: #c79bff; }
html[data-look="3"] .mib-item.is-unread .mib-item__top b { color: var(--text); }
html[data-look="3"] .mib-read { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); }
html[data-look="3"] .mib-read__empty b { color: var(--text); }
html[data-look="3"] .mib-msg h2 { color: var(--text); }
html[data-look="3"] .mib-go { color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .intl-day__champion { color: var(--sec-leagues); }
html[data-look="3"] .intl-day__champion-title { color: var(--text); }
html[data-look="3"] .intl-day__rating.is-high { color: var(--on-accent); }
html[data-look="3"] .intl-day__rating.is-low { color: var(--bad); }
html[data-look="3"] .intl-day__results li { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .intl-day__side { color: var(--text-dim); }
html[data-look="3"] .intl-day__side.is-won { color: var(--text); }
html[data-look="3"] .lgm-panel { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .lgm-league { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .lgm-hour button, html[data-look="3"] .lgm-plain { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .lgm-rules li { background: transparent; }
html[data-look="3"] .lgm-ok { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .lgm-strip { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .lgm-gw__row { background: transparent; }
html[data-look="3"] .lgm-pill--played { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mcr { --mcr-edge: var(--hair); --mcr-edge-strong: var(--hair); --mcr-surface: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .mcr-rail__step { background: rgba(255, 255, 255, 0.02); color: var(--text-dim); }
html[data-look="3"] .mcr-rail__step:hover { color: var(--text); }
html[data-look="3"] .mcr-rail__step.is-done .mcr-rail__n { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--accent); }
html[data-look="3"] .mcr-rail__step.is-on { border-color: rgba(67, 255, 196, 0.55); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); box-shadow: none; }
html[data-look="3"] .mcr-rail__step.is-on .mcr-rail__n { background: var(--accent); color: var(--on-accent); }
html[data-look="3"] .mcr-step { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html[data-look="3"] .mcr-step__head h2 { color: var(--text); }
html[data-look="3"] .mcr-field__label { color: var(--text); }
html[data-look="3"] .mcr-field__picked { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mcr-field__hint.is-bad { color: var(--loss); }
html[data-look="3"] .mcr-input { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mcr-nations { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mcr-nation { background: rgba(255, 255, 255, 0.025); color: var(--ink-soft, #c4cee2); }
html[data-look="3"] .mcr-nation:hover { color: var(--text); }
html[data-look="3"] .mcr-nation.is-on { border-color: rgba(67, 255, 196, 0.6); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .mcr-choice { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); }
html[data-look="3"] .mcr-choice b { color: var(--text); }
html[data-look="3"] .mcr-choice.is-on { border-color: rgba(67, 255, 196, 0.65); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 0 0 1px rgba(67, 255, 196, 0.18); }
html[data-look="3"] .mcr-choice.is-on::after { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303130d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
html[data-look="3"] .mcr-tags em.is-good { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--win); }
html[data-look="3"] .mcr-tags em.is-bad { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--loss); }
html[data-look="3"] .mcr-rung__n { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mcr-summary { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mcr-summary__big { color: var(--text); }
html[data-look="3"] .mcr-points { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mcr-points.is-spent b { color: var(--text); }
html[data-look="3"] .mcr-points.is-over { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mcr-preset { border: 1px solid var(--mcr-edge-strong); color: var(--ink-soft, #c4cee2); }
html[data-look="3"] .mcr-preset:hover { color: var(--text); border-color: var(--hair); }
html[data-look="3"] .mcr-preset.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html[data-look="3"] .mcr-attr-group { background: transparent; }
html[data-look="3"] .mcr-attr__name { color: var(--text); }
html[data-look="3"] .mcr-attr.is-soon .mcr-attr__name { color: var(--ink-soft, #c4cee2); }
html[data-look="3"] .mcr-attr__ctl button { color: var(--text); }
html[data-look="3"] .mcr-val { color: var(--on-accent); }
html[data-look="3"] .mcr-review__row { background: transparent; }
html[data-look="3"] .mcr-review__row b { color: var(--text); }
html[data-look="3"] .mcr-review__row b.is-bad { color: var(--loss); }
html[data-look="3"] .mcr-btn { color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .mcr-btn:hover:not(:disabled) { box-shadow: none; }
html[data-look="3"] .mcr-btn--ghost:hover:not(:disabled) { border-color: var(--hair); }
html[data-look="3"] .mcr-btn:disabled { box-shadow: none; }
html[data-look="3"] .mcr-btn--ghost { border-color: var(--mcr-edge-strong); }
html[data-look="3"] .mcr-btn--go { background: var(--accent); box-shadow: none; }
html[data-look="3"] .mcr-error { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--bad); }
html[data-look="3"] .mcr-warn { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--bad); }
html[data-look="3"] .mma { --mma-edge: var(--hair); --mma-surface: color-mix(in srgb, white 3.5%, var(--bg)); --mma-raised: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .mp-form li { color: var(--on-accent); }
html[data-look="3"] .mp-stakes { border: 1px solid var(--hair); }
html[data-look="3"] .fmg { --fmg-edge: var(--hair); --fmg-edge-strong: var(--hair); }
html[data-look="3"] .fmg-hero h1 { color: var(--text); }
html[data-look="3"] .fmg-mode { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html[data-look="3"] .fmg-mode:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
html[data-look="3"] .fmg-mode--career { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .fmg-mode--pro { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .fmg-pill { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .fmg-pill--live { box-shadow: none; }
html[data-look="3"] .fmg-game__crest { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
html[data-look="3"] .fmg-game__who h2 { color: var(--text); }
html[data-look="3"] .fmg-sep { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .fmg-stats > div { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .fmg-stats b { color: var(--text); }
html[data-look="3"] .fmg-manager { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .fmg-manager__text b { color: var(--text); }
html[data-look="3"] .fmg-feature b { color: var(--text); }
html[data-look="3"] .fmg-btn { background: var(--accent); color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .fmg-btn:hover { filter: brightness(1.06); }
html[data-look="3"] .fmg-btn--ghost { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: none; }
html[data-look="3"] .fmg-mode--career .fmg-btn:not(.fmg-btn--ghost) { background: var(--accent); box-shadow: none; }
html[data-look="3"] .fmg-mode--pro .fmg-btn:not(.fmg-btn--ghost) { background: var(--accent); box-shadow: none; }
html[data-look="3"] .mmn { --mmn-edge: var(--hair); --mmn-edge-strong: var(--hair); }
html[data-look="3"] .mmn-kicker i { box-shadow: none; }
html[data-look="3"] .mmn-hero { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .mmn-hero__crest { box-shadow: var(--lift); }
html[data-look="3"] .mmn-hero__id h1 { color: var(--text); }
html[data-look="3"] .mmn-alert { border: 1px solid rgba(67, 255, 196, 0.35); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mmn-alert.is-warn { border-color: rgba(245, 192, 101, 0.45); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mmn-alert__icon { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mmn-alert.is-warn .mmn-alert__icon { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mmn-alert:hover { border-color: var(--hair); }
html[data-look="3"] .mmn-section__title::after { display: none; }
html[data-look="3"] .mmn-tile { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mmn-tile:hover { box-shadow: var(--lift); }
html[data-look="3"] .mmn-tile__icon { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mmn-tile__text b { color: var(--text); }
html[data-look="3"] .mmn-tile__text b em { color: var(--on-accent); }
html[data-look="3"] .mmn-feature { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mmn-feature b { color: var(--text); }
html[data-look="3"] .mmn-feature__tag { color: var(--on-accent); }
html[data-look="3"] .pro-result { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .pro-result--error { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-pro .pro-face { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: none; }
html[data-look="3"] .cm-pro .pro-tag--good { color: var(--good); }
html[data-look="3"] .cm-pro .pro-tag--warn { color: var(--sec-leagues); }
html[data-look="3"] .cm-pro .pro-tag--bad { color: var(--bad); }
html[data-look="3"] .pro-go__btn { background: var(--accent); color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .pro-go__btn:hover:not(:disabled) { box-shadow: none; }
html[data-look="3"] .pro-go__skip { border: 1px solid var(--pk-edge-strong, var(--hair)); }
html[data-look="3"] .pro-go__skip:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
html[data-look="3"] .pro-mc { border: 1px solid var(--pk-edge-strong, var(--hair)); }
html[data-look="3"] .pro-mc.is-w { border-color: rgba(67, 255, 196, 0.45); }
html[data-look="3"] .pro-mc.is-l { border-color: rgba(255, 110, 110, 0.45); }
html[data-look="3"] .pro-mc__res.is-w { color: var(--good); }
html[data-look="3"] .pro-mc__res.is-l { color: var(--bad); }
html[data-look="3"] .pro-rating { color: var(--on-accent); }
html[data-look="3"] .pro-rating.is-good { background: linear-gradient(180deg, #7dffd6, #2fd39f); }
html[data-look="3"] .pro-rating.is-none { color: var(--text-dim); }
html[data-look="3"] .pro-chip--goal { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--good); }
html[data-look="3"] .pro-chip--assist { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--accent); }
html[data-look="3"] .pro-chip--potm { color: var(--on-accent); }
html[data-look="3"] .cm-pro .pro-avail.is-good { color: var(--good); }
html[data-look="3"] .cm-pro .pro-avail.is-warn { color: var(--sec-leagues); }
html[data-look="3"] .cm-pro .pro-avail.is-bad { color: var(--bad); }
html[data-look="3"] .cm-pro .pro-last__num small.is-w { color: var(--good); }
html[data-look="3"] .cm-pro .pro-last__num small.is-l { color: var(--bad); }
html[data-look="3"] .cm-pro .pro-bar__track { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .pro-legend i.is-good { background: #2fd39f; }
html[data-look="3"] .pro-facts__row { border-bottom: 1px solid var(--pk-edge, var(--hair)); }
html[data-look="3"] .pro-facts__row:last-child { border-bottom: 0; }
html[data-look="3"] .cm-pro .pro-interest__level { background: rgba(255, 255, 255, 0.07); color: var(--text-dim); }
html[data-look="3"] .cm-pro .pro-interest li.is-l2 .pro-interest__level { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--accent); }
html[data-look="3"] .cm-pro .pro-interest li.is-l3 .pro-interest__level { background: linear-gradient(180deg, #ffe08a, #f5b941); color: var(--on-accent); }
html[data-look="3"] .cm-pro .pro-career tr.is-current td { background: transparent; }
html[data-look="3"] .pro-who__tab { border: 1px solid var(--border); }
html[data-look="3"] .pro-who__tab:hover { border-color: var(--hair); }
html[data-look="3"] .pro-who__tab.is-on { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
html[data-look="3"] .pro-cand--big { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-pro .pro-highlights li.is-good b { color: var(--good); }
html[data-look="3"] .cm-pro .pro-highlights li.is-bad b { color: var(--bad); }
html[data-look="3"] .pro-dec__btn { border: 1px solid var(--pk-edge-strong, var(--hair)); }
html[data-look="3"] .pro-dec__btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
html[data-look="3"] .pro-dec__btn--go { background: var(--accent); color: var(--on-accent); }
html[data-look="3"] .pro-dec__btn--go:hover:not(:disabled) { background: var(--accent); }
html[data-look="3"] .pro-dec__btn--warn { color: var(--sec-leagues); }
html[data-look="3"] .pro-dec__reply { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .pro-dec__reply.is-bad { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-pro .pro-talk { background: color-mix(in srgb, var(--accent) 8%, transparent); }
html[data-look="3"] .cm-pro .pro-talk.is-final { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-pro .pro-list.is-listed .pro-list__state { color: var(--sec-leagues); }
html[data-look="3"] .cm-pro .pro-offer__clock { background: rgba(255, 255, 255, 0.07); color: var(--text-dim); }
html[data-look="3"] .cm-pro .pro-offer__clock.is-urgent { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--sec-leagues); }
html[data-look="3"] .cm-pro .pro-history li.is-good span { color: var(--good); }
html[data-look="3"] .cm-pro .pro-history li.is-bad span { color: var(--bad); }
html[data-look="3"] .pro-daynews li { border: 1px solid var(--pk-edge, var(--hair)); }
html[data-look="3"] .rf-card { --rf-edge: var(--hair); --rf-edge-strong: var(--hair); --rf-panel: color-mix(in srgb, white 3.5%, var(--bg)); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .rf-score { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html[data-look="3"] .rf-clock--live { color: var(--text); }
html[data-look="3"] .rf-track-ht { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .rf-banner-tag { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 1px solid var(--hair); }
html[data-look="3"] .rf-final-pill--loss { color: var(--text); }
html[data-look="3"] .rf-result-score { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .skip-close { border: 1px solid var(--border); }
html[data-look="3"] .skip-close:hover { border-color: var(--edge-strong, var(--hair)); }
html[data-look="3"] .skip-option { border: 1px solid var(--border); }
html[data-look="3"] .skip-option:hover { border-color: var(--edge-strong, var(--hair)); }
html[data-look="3"] .skip-option.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
html[data-look="3"] .skip-result { color: var(--on-accent); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .skip-result--L { color: var(--on-accent); }
html[data-look="3"] .skip-needs li { background: transparent; }
html[data-look="3"] .mle-hint { background: rgba(255, 255, 255, 0.025); }
html[data-look="3"] .mle-hint.is-held { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .mle-player { border: 1px solid transparent; background: rgba(255, 255, 255, 0.03); }
html[data-look="3"] .mle-player:hover:not(:disabled) { border-color: var(--border); background: rgba(255, 255, 255, 0.06); }
html[data-look="3"] .mle-player.is-held { border-color: #ffd166; background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mle-player__slot { color: var(--text); }
html[data-look="3"] .mle-player__slot.is-bench { background: rgba(255, 255, 255, 0.06); color: var(--text-dim); }
html[data-look="3"] .mle-overlay { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); }
html[data-look="3"] .mle-sheet { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); box-shadow: var(--lift); }
html[data-look="3"] .totm-news__reveal { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .totm-news__ribbon { color: var(--on-accent); }
html[data-look="3"] .totm-news__cta { color: var(--on-accent); }
html[data-look="3"] .totm-news__line strong { color: var(--text); }
html[data-look="3"] .tut-card { border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--hair)); box-shadow: var(--lift); }
html[data-look="3"] button.tut-icon-btn { border: 1px solid var(--hair); }
html[data-look="3"] .tut-btn--primary, html[data-look="3"] button.tut-btn--primary { background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
html[data-look="3"] .tut-btn--primary:hover { box-shadow: none; }
html[data-look="3"] button.tut-btn--ghost { border: 1px solid var(--hair); }
html[data-look="3"] button.tut-btn--ghost:hover { border-color: var(--accent); }
html[data-look="3"] button.tut-btn--danger { color: var(--text); }
html[data-look="3"] button.tut-pill { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--hair)); }
html[data-look="3"] button.tut-pill:hover { border-color: var(--accent); }
html[data-look="3"] .aw-picker__field select { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .aw-history-link { color: var(--text); }
html[data-look="3"] .aw-award--empty { border-color: var(--hair); }
html[data-look="3"] .aw-tabs { border: 1px solid var(--hair); }
html[data-look="3"] .aw-tab { color: var(--text-dim); }
html[data-look="3"] .aw-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
html[data-look="3"] .aw-tab.is-on { color: var(--on-accent); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: none; }
html[data-look="3"] .aw-chip, html[data-look="3"] .aw-month { border: 1px solid var(--hair); background: transparent; color: var(--text-dim); }
html[data-look="3"] .aw-chip:hover, html[data-look="3"] .aw-month:hover { color: var(--text); border-color: var(--hair); }
html[data-look="3"] .aw-chip.is-on, html[data-look="3"] .aw-month.is-on { color: var(--text); border-color: var(--gold, #f5c065); background: color-mix(in srgb, var(--gold, #f5c065) 14%, #0d1420); }
html[data-look="3"] .aw-ballon__art { filter: none; }
html[data-look="3"] .aw-podium__step { border: 1px solid var(--hair); }
html[data-look="3"] .aw-podium__av { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
html[data-look="3"] .aw-podium__step--1 .aw-podium__av { box-shadow: 0 0 0 3px var(--gold, #f5c065); }
html[data-look="3"] .aw-podium__step--1 .aw-podium__place { color: var(--on-accent); }
html[data-look="3"] .hh-pill--live { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--accent); }
html[data-look="3"] .hh-ballon { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .hh-step__av { box-shadow: 0 0 0 3px var(--step),
    0 8px 18px rgba(0, 0, 0, 0.45); }
html[data-look="3"] .hh-step--1 .hh-step__av { box-shadow: 0 0 0 3px var(--step), 0 10px 22px rgba(0, 0, 0, 0.5); }
html[data-look="3"] .hh-step em { color: var(--text-2); }
html[data-look="3"] .hh-step__base { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .hh-step__base span { color: var(--text-2); }
html[data-look="3"] .hh-step.is-mine .hh-step__av { box-shadow: 0 0 0 3px var(--accent),
    0 8px 18px rgba(0, 0, 0, 0.45); }
html[data-look="3"] .hh-rest { border-top: 1px solid var(--hair); }
html[data-look="3"] .hh-reveal { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .hh-pending { border: 1px dashed var(--hair); }
html[data-look="3"] .hh-cup { border: 1px solid var(--hair); border-bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); }
html[data-look="3"] .hh-cup.is-won { border-color: color-mix(in srgb, var(--hh-gold) 28%, var(--hair)); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .hh-cup.is-mine { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .hh-cup__note b { color: var(--text); }
html[data-look="3"] .hh-cup.is-live .hh-cup__note b { color: var(--accent); }
html[data-look="3"] .hh-xi { border: 1px solid color-mix(in srgb, var(--xi) 28%, var(--hair)); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .hh-xi__tag { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--on-accent); }
html[data-look="3"] .hh-xi__name { color: var(--text); }
html[data-look="3"] .hh-xi__name:not(:last-child)::after { color: var(--text-dim); }
html[data-look="3"] .hh-xi__name.is-mine { color: var(--accent); }
html[data-look="3"] .hh-more { border: 1px solid var(--hair); }
html[data-look="3"] .hh-more[open] > summary { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .hh-more__tag { color: var(--on-accent); }
html[data-look="3"] .hh-more__open { border: 1px solid var(--hair); color: var(--text); }
html[data-look="3"] .hh-more > summary:hover .hh-more__open { border-color: var(--hh-gold); }
html[data-look="3"] .hh-totm li { background: transparent; }
html[data-look="3"] .hh-totm__count { color: var(--on-accent); }
html[data-look="3"] .hh-roll th, html[data-look="3"] .hh-roll td { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .hh-roll__season { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); }
html[data-look="3"] .hh-roll thead .hh-roll__season { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); }
html[data-look="3"] .hh-roll__club, html[data-look="3"] .hh-roll__player { color: inherit; }
html[data-look="3"] .hh-roll td.is-live .hh-roll__club { color: var(--accent); }
html[data-look="3"] .hh-roll__lead { color: var(--accent); }
html[data-look="3"] .hh-roll td.is-mine { background: color-mix(in srgb, var(--accent) 11%, transparent); }
html[data-look="3"] .hh-roll__row--live > * { background-color: rgb(255 255 255 / .04); }
html[data-look="3"] .hh-fold { border: 1px solid var(--pk-edge, var(--hair)); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .hh-fold[open] { border-color: color-mix(in srgb, var(--hh-gold) 30%, var(--hair)); }
html[data-look="3"] .hh-fold__num { color: var(--on-accent); }
html[data-look="3"] .hh-fold__open { border: 1px solid var(--hair); }
html[data-look="3"] .hh-fold__head:hover .hh-fold__open, html[data-look="3"] .hh-fold[open] .hh-fold__open { border-color: var(--hh-gold); }
@media (max-width: 640px) {
  html[data-look="3"] .hh-cup { border-bottom: 1px solid var(--hair); }
  html[data-look="3"] .hh-cup.is-won { border-bottom-color: color-mix(in srgb, var(--hh-gold) 28%, var(--hair)); }
}
html[data-look="3"] .cm-career { --crr-edge: var(--hair); --crr-edge-strong: var(--hair); --crr-surface: color-mix(in srgb, white 3.5%, var(--bg)); --crr-row: transparent; --crr-row-hover: rgb(255 255 255 / .05); --crr-head: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .cm-career :where(button:not(.btn)) { box-shadow: none; }
html[data-look="3"] .cm-career .crr-chip { background: rgba(255, 255, 255, 0.04); color: var(--text); }
html[data-look="3"] .cm-career .crr-chip.is-good { background: color-mix(in srgb, var(--crr-good) 12%, transparent); color: var(--text); }
html[data-look="3"] .cm-career .crr-chip.is-warn { background: color-mix(in srgb, var(--crr-warn) 12%, transparent); color: var(--crr-warn); }
html[data-look="3"] .cm-career .crr-chip.is-bad { background: color-mix(in srgb, var(--crr-bad) 12%, transparent); color: var(--text); }
html[data-look="3"] .cm-career .crr-chip.is-gold { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--sec-leagues); }
html[data-look="3"] .cm-career .is-tone-neutral { color: var(--accent); }
html[data-look="3"] .cm-career .crr-term__label { color: var(--text); }
html[data-look="3"] .cm-career .crr-ult { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
html[data-look="3"] .cm-career .crr-ult__title { color: var(--text); }
html[data-look="3"] .cm-career .crr-ult__text { color: var(--bad); }
html[data-look="3"] .cm-career .crr-ult__pts { color: var(--text); }
html[data-look="3"] .cm-career .crr-ult__pts small { color: var(--bad); }
html[data-look="3"] .cm-career .crr-track__mark.is-you { color: var(--text); }
html[data-look="3"] .cm-career .crr-track__mark.is-you i { box-shadow: 0 0 0 4px hsl(var(--crr-h) 70% 50% / 0.45); }
html[data-look="3"] .cm-career .crr-track__mark.is-target { color: var(--crr-good); }
html[data-look="3"] .cm-career .crr-fact b { color: var(--text); }
html[data-look="3"] .cm-career .crr-badge { color: #cdd6e6; }
html[data-look="3"] .cm-career .crr-badge.is-held { background: linear-gradient(160deg, #f5d38a, #b8860b 70%); color: var(--on-accent); }
html[data-look="3"] .cm-career .crr-badge.is-top { color: var(--on-accent); }
html[data-look="3"] .cm-career .crr-step { background: var(--crr-row); }
html[data-look="3"] .cm-career .crr-step.is-held { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-career .crr-step.is-current { box-shadow: 0 0 0 1px rgba(245, 192, 101, 0.3); }
html[data-look="3"] .cm-career .crr-step__name { color: var(--text); }
html[data-look="3"] .cm-career .crr-step__tag { color: var(--on-accent); }
html[data-look="3"] .cm-career .crr-step.is-next .crr-step__tag { color: var(--bg); }
html[data-look="3"] .cm-career .crr-event__title { color: var(--text); }
html[data-look="3"] .cm-career .crr-table td { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .cm-career .crr-club { color: var(--text); }
html[data-look="3"] .cm-career .crr-offer { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-career .crr-offer__name { color: var(--text); }
html[data-look="3"] .cm-career .crr-offer__text { color: var(--accent); }
html[data-look="3"] .cm-career .crr-offer__look { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .cm-career .crr-scout { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-career .crr-face { color: var(--text); }
html[data-look="3"] .cm-career .crr-scout__name { color: var(--text); }
html[data-look="3"] .cm-career .crr-attr b { color: var(--text); }
html[data-look="3"] .cm-career .crr-fam__row { color: var(--text-dim); }
html[data-look="3"] .cm-career .crr-fam__row.is-assigned { color: var(--text); }
html[data-look="3"] .cm-career .crr-fam__row b { color: var(--text); }
html[data-look="3"] .cm-career .crr-region__name { color: var(--text); }
html[data-look="3"] .cm-career .crr-region__range b { color: var(--text); }
html[data-look="3"] .cm-career .crr-objective { color: var(--text); }
html[data-look="3"] .cm-career .crr-goal__label { color: var(--text); }
html[data-look="3"] .cm-career .crr-verdicts__head b { color: var(--text); }
html[data-look="3"] .cm-career .crr-resign label { color: var(--bad); }
html[data-look="3"] .cd { --cd-edge: var(--hair); --cd-edge-strong: var(--hair); }
html[data-look="3"] .cd-card { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cd-chip { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .cd-ovr { color: var(--on-accent); }
html[data-look="3"] .cd-ovr.is-good { background: linear-gradient(180deg, #7dffcf, #2fcf96); }
html[data-look="3"] .cd-ovr.is-none { color: var(--text-dim); }
html[data-look="3"] .cd-line__label { color: var(--ink-soft, #c4cee2); }
html[data-look="3"] .cd-line__value { color: var(--text); }
html[data-look="3"] .cd-line--total .cd-line__label { color: var(--text); }
html[data-look="3"] .cd-note { color: var(--ink-soft, #c4cee2); }
html[data-look="3"] .cd-note.is-good { background: color-mix(in srgb, var(--cd-good) 8%, transparent); color: var(--good); }
html[data-look="3"] .cd-note.is-good::before { background: var(--cd-good); }
html[data-look="3"] .cd-note.is-bad { background: color-mix(in srgb, var(--cd-bad) 9%, transparent); color: var(--bad); }
html[data-look="3"] .cd-note.is-bad::before { background: var(--cd-bad); }
html[data-look="3"] .cd-note.is-warn { background: color-mix(in srgb, var(--cd-warn) 8%, transparent); color: var(--sec-leagues); }
html[data-look="3"] .cd-note.is-warn::before { background: var(--cd-warn); }
html[data-look="3"] .cd-captain { color: var(--on-accent); }
html[data-look="3"] .cd-row__name { color: var(--text); }
html[data-look="3"] a.cd-row__name:hover { color: var(--accent); }
html[data-look="3"] .cd-row__role.is-on { color: hsl(var(--cd-h) 80% 70%); }
html[data-look="3"] .cm-squad { --cmq-edge: var(--hair); --cmq-edge-strong: var(--hair); --cmq-surface: color-mix(in srgb, white 3.5%, var(--bg)); --cmq-row: transparent; --cmq-row-hover: rgb(255 255 255 / .05); --cmq-head: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .cm-squad .cmq-hero { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .cm-squad .cmq-hero__crest { box-shadow: var(--lift); }
html[data-look="3"] .cm-squad .cmq-hero__name { color: var(--text); text-shadow: none; }
html[data-look="3"] .cm-squad .cmq-hero__meta { color: var(--text-2); }
html[data-look="3"] .cm-squad .cmq-chip { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .cm-squad .cmq-btn { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
html[data-look="3"] .cm-squad .cmq-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
html[data-look="3"] .cm-squad .cmq-btn--light { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); border: 1px solid var(--hair); }
html[data-look="3"] .cm-squad .cmq-btn--light:hover { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-squad .cmq-tile { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-squad .cmq-tile--alert { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-squad .cmq-tile__v { color: var(--text); }
html[data-look="3"] .cm-squad .cmq-tile__v.is-good { color: var(--win); }
html[data-look="3"] .cm-squad .cmq-tile__v.is-bad { color: var(--loss); text-shadow: none; }
html[data-look="3"] .cm-squad .cmq-tile__split i.is-xi { box-shadow: none; }
html[data-look="3"] .cm-squad .cmq-tile__split i.is-bench { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-squad .cmq-tone-ovr.is-elite, html[data-look="3"] .cm-squad .cmq-tone-ovr.is-good, html[data-look="3"] .cm-squad .cmq-tone-ovr.is-avg, html[data-look="3"] .cm-squad .cmq-tone-ovr.is-low { color: var(--t); }
html[data-look="3"] .cm-squad .cmq-tile__v.cmq-tone-ovr { text-shadow: none; }
html[data-look="3"] .cm-squad .cmq-ovr { color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
html[data-look="3"] .cm-squad .cmq-panel { box-shadow: var(--lift); }
html[data-look="3"] .cm-squad .cmq-panel__head { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-squad .cmq-panel__title { color: var(--text); }
html[data-look="3"] .cm-squad .cmq-panel__title::before { display: none; }
html[data-look="3"] .cm-squad .cmq-band { background: linear-gradient(100deg, hsl(var(--cmq-h) 66% 40%) 0%, hsl(var(--cmq-h) 58% 25%) 48%, hsl(var(--cmq-h) 40% 13%) 100%); }
html[data-look="3"] .cm-squad .cmq-band::before { background: none; }
html[data-look="3"] .cm-squad .cmq-band__title h2 { color: var(--text); text-shadow: none; }
html[data-look="3"] .cm-squad .cmq-band__title span { color: var(--text-2); }
html[data-look="3"] .cm-squad .cmq-xi__side { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-squad .cmq-side__val { color: var(--text); }
html[data-look="3"] .cm-squad .cmq-side__val.is-empty { color: var(--text-3); }
html[data-look="3"] .cm-squad .cmq-style b { color: var(--text); }
html[data-look="3"] .cm-squad .cmq-armband { color: var(--on-accent); }
html[data-look="3"] .cm-squad .cmq-armband--c { box-shadow: none; }
html[data-look="3"] .cm-squad .cmq-pos { border: 1px solid color-mix(in srgb, var(--g, var(--hair)) 50%, transparent); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-squad .cmq-group__head { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-squad .cmq-group__badge { color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .cm-squad .cmq-group__label { color: var(--text); }
html[data-look="3"] .cm-squad .cmq-row { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .cm-squad .cmq-group:last-child .cmq-row:last-child { border-bottom: 0; }
html[data-look="3"] .cm-squad .cmq-row.is-xi { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 80%, transparent); }
html[data-look="3"] .cm-squad .cmq-row__role { border: 1px solid var(--hair); color: var(--text-3); }
html[data-look="3"] .cm-squad .cmq-row__role.is-xi { border-color: transparent; color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .cm-squad .cmq-row__name { color: var(--text); }
html[data-look="3"] .cm-squad .cmq-row.is-xi .cmq-row__name { color: var(--text); }
html[data-look="3"] .cm-squad .cmq-row__player:hover .cmq-row__name { color: var(--accent); }
html[data-look="3"] .cm-squad .cmq-injury { color: var(--text); }
html[data-look="3"] .cm-squad .cmq-row__cond b { color: var(--text); }
html[data-look="3"] .cm-squad .cmq-row__contract small { color: var(--text-3); }
html[data-look="3"] .cm-squad .cmq-release { color: color-mix(in srgb, var(--loss) 75%, #c8cfdc); }
html[data-look="3"] .cm-squad .cmq-release:hover, html[data-look="3"] .cm-squad .cmq-release:focus-visible { color: var(--text); }
html[data-look="3"] .cm-squad .cmq-release--link.is-final { background: color-mix(in srgb, var(--cmq-tired) 10%, transparent); }
html[data-look="3"] .cm-squad .cmq-fit { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-dress { --cmd-edge: var(--hair); --cmd-edge-strong: var(--hair); --cmd-surface: color-mix(in srgb, white 3.5%, var(--bg)); --cmd-raised: color-mix(in srgb, white 3.5%, var(--bg)); --cmd-row: transparent; }
html[data-look="3"] .cm-dress .cmd-atmos { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-dress .cmd-spread__seg { color: var(--on-accent); }
html[data-look="3"] .cm-dress .cmd-count { color: var(--on-accent); }
html[data-look="3"] .cm-dress .cmd-deadline.is-urgent { color: var(--cmd-verypoor); background: color-mix(in srgb, var(--cmd-verypoor) 10%, transparent); }
html[data-look="3"] .cm-dress .cmd-trust i.is-mid { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-dress .cmd-trust i.is-neg.is-on { background: var(--cmd-verypoor); }
html[data-look="3"] .cm-dress .cmd-trust i.is-pos.is-on { background: var(--cmd-superb); }
html[data-look="3"] .cm-dress .cmd-trust i.is-mid.is-on { background: rgba(255, 255, 255, 0.6); }
html[data-look="3"] .cm-dress .cmd-status-form select { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-dress .cmd-story li.is-good { color: color-mix(in srgb, var(--cmd-happy) 80%, var(--text)); }
html[data-look="3"] .cm-dress .cmd-story li.is-bad { color: color-mix(in srgb, var(--cmd-verypoor) 75%, var(--text)); }
html[data-look="3"] .cm-dress .cmd-history__list li.is-bad { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cmd-poor) 70%, transparent); }
html[data-look="3"] .drd { --drd-edge: var(--hair); --drd-edge-strong: var(--hair); --drd-surface: color-mix(in srgb, white 3.5%, var(--bg)); --drd-raised: color-mix(in srgb, white 3.5%, var(--bg)); --drd-row: transparent; }
html[data-look="3"] .drd-chip { color: var(--text-dim); }
html[data-look="3"] .drd-chip.is-good { color: var(--drd-good); }
html[data-look="3"] .drd-chip.is-warn { color: var(--drd-warn); }
html[data-look="3"] .drd-chip.is-bad { color: var(--drd-bad); }
html[data-look="3"] .drd-chip.is-gold { color: var(--on-accent); background: var(--drd-mentor); }
html[data-look="3"] .drd-btn { color: var(--text); }
html[data-look="3"] .drd-rung { color: var(--text-3); }
html[data-look="3"] .drd-rung.is-here { color: var(--text); }
html[data-look="3"] .drd-captaincy { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .drd-feud.is-active { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .drd-feud__tries .is-good { color: var(--text); }
html[data-look="3"] .drd-feud__tries .is-bad { color: var(--text); }
html[data-look="3"] .drd-settle.is-isolated { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .drd-breakthrough .is-no { color: var(--drd-bad); }
html[data-look="3"] .drd-rel__why em.is-bad { color: var(--drd-poor); }
html[data-look="3"] .cm-club .clh-board { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-club .clh-board__count { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-club .clh-board__count b { text-shadow: none; }
html[data-look="3"] .cm-club .clh-board__cells b { color: var(--text-3); }
html[data-look="3"] .cm-club .clh-board__rep-head b { color: var(--text); }
html[data-look="3"] .cm-club .clh-chip.is-gold { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--gold-bright); }
html[data-look="3"] .cm-club .clh-cup { color: var(--text-dim); }
html[data-look="3"] .cm-club .clh-cup.is-gold { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--gold-bright); }
html[data-look="3"] .cm-club .clh-cup.is-silver { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--accent); }
html[data-look="3"] .cm-club .clh-cup.is-live { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
html[data-look="3"] .cm-club .clh-table .is-pos { color: var(--win); }
html[data-look="3"] .cm-club .clh-table .is-neg { color: var(--loss); }
html[data-look="3"] .cm-club .clh-table tr.is-champion td { background: transparent; }
html[data-look="3"] .cm-club .clh-pos { background: rgba(255, 255, 255, 0.05); }
html[data-look="3"] .cm-club .clh-pos.is-gold { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--gold-bright); }
html[data-look="3"] .cm-club .clh-pos.is-europe { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--accent); }
html[data-look="3"] .cm-club .clh-pos.is-danger { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--loss); }
html[data-look="3"] .cm-club .clh-record > b { color: var(--text); }
html[data-look="3"] .cm-club .clh-ledger b { color: var(--text); }
html[data-look="3"] .cm-club .clh-rival.is-good { background: linear-gradient(180deg, color-mix(in srgb, var(--win) 9%, transparent), transparent); }
html[data-look="3"] .cm-club .clh-rival.is-bad { background: linear-gradient(180deg, color-mix(in srgb, var(--loss) 9%, transparent), transparent); }
html[data-look="3"] .cm-club .is-w { color: var(--win); }
html[data-look="3"] .cm-club .is-d { color: var(--draw); }
html[data-look="3"] .cm-club .is-l { color: var(--loss); }
html[data-look="3"] .cm-club .clh-wdl i.is-d { background: var(--cmp-draw-bg); }
html[data-look="3"] .cm-club .clh-manager__badge { color: var(--text); }
html[data-look="3"] .cm-club .clh-supporters.is-neutral b { color: var(--text); }
html[data-look="3"] .cm-club .clh-milestone { background: rgba(255, 255, 255, 0.02); }
html[data-look="3"] .cm-club .clh-milestone.is-earned { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-club .clh-milestone__icon { color: var(--text-3); }
html[data-look="3"] .cm-club .clh-milestone.is-earned .clh-milestone__icon { color: var(--gold-bright); text-shadow: none; }
html[data-look="3"] .cm-squad .cmq-loan { color: var(--accent); }
html[data-look="3"] .cm-squad .cmq-away__row { border: 1px dashed var(--hair); }
html[data-look="3"] .ctf { --ctf-edge: var(--hair); }
html[data-look="3"] .ctx { --ctx-edge: var(--hair); --ctx-edge-strong: var(--hair); --ctx-row: transparent; }
html[data-look="3"] .ctx-strength { background: transparent; }
html[data-look="3"] .ctx-strength__big { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ctx-strength__big b { text-shadow: none; }
html[data-look="3"] .ctx .mle.card { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-look="3"] .ctx .mle-formation select { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .ctx .mle-toolbar__actions .btn--secondary { background: rgba(255, 255, 255, 0.03); color: var(--text); }
html[data-look="3"] .ctx .mle-toolbar__actions .btn--secondary:first-child { background: var(--accent); color: var(--text); }
html[data-look="3"] .ctx .mle-toolbar__actions .btn--secondary:hover:not(:disabled) { color: var(--text); }
html[data-look="3"] .ctx .mle-hint { background: rgba(255, 255, 255, 0.02); }
html[data-look="3"] .ctx .mle-player { border-color: var(--hair); background: rgba(255, 255, 255, 0.025); }
html[data-look="3"] .ctx .mle-player:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: rgba(255, 255, 255, 0.05); }
html[data-look="3"] .ctx .mle-player.is-held { border-color: #ffd166; background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ctx .mle-player__slot { color: var(--text); }
html[data-look="3"] .ctx .mle-player__slot.is-bench { background: rgba(255, 255, 255, 0.06); color: var(--text-dim); }
html[data-look="3"] .ctx .mle-player__ovr { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ctx-card__tag, html[data-look="3"] .ctx-reset { color: var(--text-dim); }
html[data-look="3"] .ctx-reset { color: var(--text); }
html[data-look="3"] .ctx .ctx-group--ip { --ctx-card: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .ctx .ctx-group--oop { --ctx-card: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .ctx .ctx-group--tr { --ctx-card: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .ctx .ctx-group--more { --ctx-card: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .ctx .ctx-group .pk-panel__title::before { box-shadow: none; }
html[data-look="3"] .ctx-seg { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ctx-seg__opt { border: 1px solid transparent; box-shadow: none; color: var(--text-dim); }
html[data-look="3"] .ctx-seg__opt:hover:not(:disabled) { box-shadow: none; color: var(--text); }
html[data-look="3"] .ctx-seg__opt.is-on, html[data-look="3"] .ctx-seg__opt.is-on:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 70%, var(--hair)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent)); box-shadow: none; color: var(--on-accent); }
html[data-look="3"] .ctx-seg__badge { background: rgba(255, 255, 255, 0.06); }
html[data-look="3"] .ctx-seg__opt.is-on .ctx-seg__badge { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ctx-mtile { background: rgba(255, 255, 255, 0.025); box-shadow: none; }
html[data-look="3"] .ctx-mtile:hover:not(:disabled) { box-shadow: none; }
html[data-look="3"] .ctx-mtile.is-on, html[data-look="3"] .ctx-mtile.is-on:hover:not(:disabled) { border-color: var(--mt); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 0 0 1px var(--mt); }
html[data-look="3"] .ctx-mtile__name { color: var(--text); }
html[data-look="3"] .ctx .is-up { color: var(--win); }
html[data-look="3"] .ctx .is-down { color: var(--loss); }
html[data-look="3"] .ctx-phase__title { color: var(--text); }
html[data-look="3"] .ctx-known { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ctx-known__head b { color: var(--text); }
html[data-look="3"] .ctx-taker__badge { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .ctx-taker__label { color: var(--text); }
html[data-look="3"] .ctx-taker__pick select { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .ctx-save { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); box-shadow: none; }
html[data-look="3"] .ctx-save.is-dirty { box-shadow: 0 0 0 1px rgba(245, 192, 101, 0.15); }
html[data-look="3"] .ctx-save__dirty::before { box-shadow: none; }
html[data-look="3"] .ctx-compare > details.card { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-look="3"] .ctx-compare summary { color: var(--text); }
html[data-look="3"] .ctx-compare summary::before { display: none; }
html[data-look="3"] .cm-clubprofile .cpf-meta__item b { color: var(--text); }
html[data-look="3"] .cm-clubprofile .cpf-result__score { color: var(--text); }
html[data-look="3"] .cm-clubprofile .cpf-table tr.is-me td { background: transparent; }
html[data-look="3"] .cm-clubprofile .cpf-manager b { color: var(--text); }
html[data-look="3"] .cm-cups { --cup-edge: var(--hair); --cup-edge-strong: var(--hair); --cup-surface: color-mix(in srgb, white 3.5%, var(--bg)); --cup-card: color-mix(in srgb, white 3.5%, var(--bg)); --cup-card-hover: rgb(255 255 255 / .05); }
html[data-look="3"] .cm-cups .cup-seasons a[aria-current="page"] { color: var(--on-accent); }
html[data-look="3"] .cm-cups .cup-next { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-cups .cup-pill--done { color: var(--on-accent); }
html[data-look="3"] .cm-cups .cup-tie--mine { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
html[data-look="3"] .cm-cups .cup-tie--final { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-cups .cup-tie__row + .cup-tie__row { border-top: 1px solid var(--hair); }
html[data-look="3"] .cm-cups .cup-tie__foot { border-top: 1px solid var(--hair); }
html[data-look="3"] .cm-cups .cup-myrun__res--through { color: var(--on-accent); }
html[data-look="3"] .cm-cups .cup-myrun__res--out { color: var(--on-accent); }
html[data-look="3"] .cm-cups .cup-fold { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-cups .cup-honours td { border-top: 1px solid var(--hair); }
html[data-look="3"] .cm-data .dh-conf { border: 1px solid var(--hair); }
html[data-look="3"] .cm-data .dh-seasons a:hover { border-color: var(--hair); }
html[data-look="3"] .cm-data .dh-seasons a.is-on { color: var(--on-accent); background: var(--pk-gold); border-color: var(--pk-gold); }
html[data-look="3"] .cm-data .dh-table .is-good { color: var(--dh-good); }
html[data-look="3"] .cm-data .dh-table .is-bad { color: var(--dh-bad); }
html[data-look="3"] .cm-data .dh-form__nums em.is-good { color: var(--dh-good); }
html[data-look="3"] .cm-data .dh-form__nums em.is-bad { color: var(--dh-bad); }
html[data-look="3"] .cm-fin { --fin-edge: var(--hair); --fin-edge-strong: var(--hair); --fin-surface: color-mix(in srgb, white 3.5%, var(--bg)); --fin-row: transparent; }
html[data-look="3"] .cm-fin :where(button:not(.btn)) { box-shadow: none; }
html[data-look="3"] .cm-fin .fin-table th { background: transparent; }
html[data-look="3"] .cm-fin .fin-form select, html[data-look="3"] .cm-fin .fin-form input { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-fin .fin-reasons .is-good::marker { color: var(--fin-good); }
html[data-look="3"] .cm-fin .fin-reasons .is-bad::marker { color: var(--fin-bad); }
html[data-look="3"] .cm-fin .pk-panel.fin-stadium { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-fin .fin-effects li.is-good { color: var(--text); }
html[data-look="3"] .cm-fin .fin-effects li.is-bad { color: var(--text); }
html[data-look="3"] .cm-fin .fin-project__icon { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-fin .fin-payback b, html[data-look="3"] .cm-fin .fin-payback-note { color: var(--text); }
html[data-look="3"] .cm-fin .fin-verdicts li.is-no { color: var(--text); }
html[data-look="3"] .cm-fin .fin-tile { border: 1px solid var(--hair); }
html[data-look="3"] .cm-fin .fin-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
html[data-look="3"] .cm-fin .fin-tile.is-attention { border-color: color-mix(in srgb, #f5c065 55%, transparent); }
html[data-look="3"] .cm-fin .fin-tile__v { color: var(--text); }
html[data-look="3"] .cm-fin .fin-tile__text { color: var(--text-dim); }
html[data-look="3"] .cm-fin .fin-tile.is-attention .fin-tile__text { color: var(--sec-leagues); }
html[data-look="3"] .cm-guide .gd-card { border: 1px solid var(--pk-edge, var(--hair)); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-guide .gd-tips li { border: 1px solid var(--hair); }
html[data-look="3"] .cm-intl { --intl-edge: var(--hair); --intl-edge-strong: var(--hair); --intl-card: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .cm-intl .intl-picker a[aria-current="page"] { color: var(--on-accent); }
html[data-look="3"] .cm-intl .intl-next { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-intl .intl-next--champions { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-intl .intl-table td { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .cm-intl .intl-tie--final { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-intl .intl-tie__row + .intl-tie__row { border-top: 1px solid var(--hair); }
html[data-look="3"] .cm-intl .intl-tie__foot { border-top: 1px solid var(--hair); }
html[data-look="3"] .lg-chip { border: 1px solid var(--lm-edge, var(--hair)); }
html[data-look="3"] .lg-chip--goal { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-look="3"] .lg-result-score { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 1px solid var(--lm-edge, var(--hair)); }
html[data-look="3"] .lg-table th { border-bottom: 1px solid var(--lm-edge-strong, var(--hair)); }
html[data-look="3"] .lg-table td { border-bottom: 1px solid var(--lm-edge, var(--hair)); }
html[data-look="3"] .lg-you { color: var(--on-accent); }
html[data-look="3"] .htr { border: 1px solid var(--hair); }
html[data-look="3"] .htr-point__mark { background: transparent; }
html[data-look="3"] .htr-take { border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
html[data-look="3"] .htr-take:disabled { border-color: var(--hair); }
html[data-look="3"] .lm-root, html[data-look="3"] .lm-pre { --lm-panel: color-mix(in srgb, white 3.5%, var(--bg)); --lm-edge: var(--hair); --lm-edge-strong: var(--hair); }
html[data-look="3"] .lm-scoreboard { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html[data-look="3"] .lm-sb-score { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html[data-look="3"] .lm-sb-clock--live { color: var(--text); }
html[data-look="3"] .lm-camera-toggle { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); color: var(--text); }
html[data-look="3"] .lm-camera-toggle:hover { border-color: var(--hair); }
html[data-look="3"] .lm-cut { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); }
html[data-look="3"] .lm-replay-badge { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); border: 1px solid var(--hair); color: var(--text); }
html[data-look="3"] .lm-weather { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); border: 1px solid var(--hair); color: var(--text); }
html[data-look="3"] .lm-goal-banner { border: 2px solid color-mix(in srgb, var(--lm-team-glow, var(--hair)) 80%, var(--hair)); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7); }
html[data-look="3"] .lm-goal-word { color: var(--text); text-shadow: none; }
html[data-look="3"] .lm-goal-detail { color: var(--text); }
html[data-look="3"] .lm-goal-score { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .lm-skip-tag { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 1px solid var(--hair); color: var(--text); }
html[data-look="3"] .lm-break-card { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); backdrop-filter: blur(6px); }
html[data-look="3"] .lm-ctl--play { color: var(--on-accent); }
html[data-look="3"] .lm-ctl--play:hover:not(:disabled) { color: var(--on-accent); }
html[data-look="3"] .lm-tab--on { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .lm-seg-btn--on { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .lm-notice { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); box-shadow: none; }
html[data-look="3"] .lm-pre-hero { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .lm-pre-vs strong { color: var(--text); }
html[data-look="3"] .lm-form span { color: var(--on-accent); }
html[data-look="3"] .lm-form .L { color: var(--text); }
html[data-look="3"] .lm-kickoff { box-shadow: none; }
html[data-look="3"] .lm-sheet-row:nth-child(odd) { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); }
html[data-look="3"] .lm-choice-news li { border: 1px solid var(--hair); }
html[data-look="3"] .lm-cup-strip { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .lm-break-card--cup { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .lm-shootout__kick { border: 2px solid var(--hair); }
html[data-look="3"] .lm-shootout__kick--scored { color: var(--on-accent); }
html[data-look="3"] .lm-goal-moment { color: var(--text); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 1px solid var(--hair); }
html[data-look="3"] .lm-feed-row--moment { border-left: 3px dotted color-mix(in srgb, var(--lm-team, var(--accent)) 80%, var(--hair)); }
html[data-look="3"] .pc-card { border: 1px solid var(--hair); }
html[data-look="3"] .pc-count { border: 1px solid var(--hair); }
html[data-look="3"] .pc-q { border: 1px solid var(--hair); }
html[data-look="3"] .pc-num { color: var(--on-accent); }
html[data-look="3"] .pc :where(.pc-option) { border: 1px solid var(--hair); }
html[data-look="3"] .pc :where(.pc-option:hover:not(:disabled)) { border-color: color-mix(in srgb, var(--gold-bright, #f5c065) 60%, transparent); }
html[data-look="3"] .pc-fx { border: 1px solid var(--hair); }
html[data-look="3"] .tt { --tt-edge: var(--hair); --tt-edge-strong: var(--hair); --tt-panel: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .tt :where(button:not(.btn)) { box-shadow: none; }
html[data-look="3"] .tt-chip--select select option { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .tt-card::before { display: none; }
html[data-look="3"] .tt-card--picked { box-shadow: var(--lift); }
html[data-look="3"] .tt-open--done { border-color: var(--tt-edge-strong, var(--hair)) !important; }
html[data-look="3"] .tt-modal { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); }
html[data-look="3"] .tt-modal__box { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); box-shadow: var(--lift); }
html[data-look="3"] .tt-modal__close { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg) !important; }
html[data-look="3"] .tt-prematch { border: 1px solid var(--hair); }
html[data-look="3"] .tt-talk__title { color: var(--text); }
html[data-look="3"] .cm-menu { --mmn-edge: var(--hair); --mmn-edge-strong: var(--hair); }
html[data-look="3"] .mst-tile { border: 1px solid var(--pk-edge, var(--hair)); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mst-tile.is-featured { border-color: hsl(var(--pk-h, 160) 70% 55% / 0.45); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mst-tile.is-done { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .fw { --fw-edge: var(--hair); --fw-card: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .fw-preview { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); box-shadow: none; }
html[data-look="3"] .fw-steps .is-on > * { color: var(--on-accent); }
html[data-look="3"] .fw-field input { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .fw-choice { color: var(--text); }
html[data-look="3"] .fw-choice.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html[data-look="3"] .fw-row { background: transparent; }
html[data-look="3"] .fw-row.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .fw-kittabs .is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
html[data-look="3"] .fw-error { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--bad); }
html[data-look="3"] .fw-btn { color: var(--on-accent); }
html[data-look="3"] .fw-btn--ghost { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .fw-card, html[data-look="3"] .fw-sign { border: 1px dashed var(--fw-edge, var(--hair)); }
html[data-look="3"] .fw-sign { border-color: var(--accent); }
html[data-look="3"] .fw-note { border: 1px solid var(--border, var(--hair)); }
html[data-look="3"] .ng { --ng-edge: var(--hair); --ng-edge-strong: var(--hair); }
html[data-look="3"] .ng-hero { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .ng-hero--club { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ng-hero__crest { box-shadow: var(--lift); }
html[data-look="3"] .ng-hero__text h1 { color: var(--text); }
html[data-look="3"] .ng-hero__meta b { color: var(--text); }
html[data-look="3"] .ng-sep { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ng-progress li { background: transparent; }
html[data-look="3"] .ng-progress li.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
html[data-look="3"] .ng-progress li.is-done { color: var(--accent); }
html[data-look="3"] .ng-btn { color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .ng-btn--ghost { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ng-error { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--bad); }
html[data-look="3"] .ng-legacy { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ng-legacy__text b { color: var(--text); }
html[data-look="3"] .ng-league { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); }
html[data-look="3"] .ng-league__text b { color: var(--text); }
html[data-look="3"] .ng-league.is-on { border-color: rgba(67, 255, 196, 0.6); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: none; }
html[data-look="3"] .ng-club { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .ng-club:hover { box-shadow: none; }
html[data-look="3"] .ng-club__name { color: var(--text); }
html[data-look="3"] .ng-club.is-on { border-color: hsl(var(--h) 75% 62% / 0.85); box-shadow: 0 0 0 1px hsl(var(--h) 75% 62% / 0.5); }
html[data-look="3"] .ng-club__lines b { color: var(--text); }
html[data-look="3"] .ng-look { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
html[data-look="3"] .ng-look__text h2 { color: var(--text); }
html[data-look="3"] .ng-look__meta b { color: var(--text); }
html[data-look="3"] .ng-look__note { color: var(--sec-leagues); }
html[data-look="3"] .ng-squadbar__lead b { color: var(--text); }
html[data-look="3"] .ng-squadbar__best b { color: var(--text); }
html[data-look="3"] .cm-news { --nw-line: var(--hair); }
html[data-look="3"] .cm-news .nw-lead { border: 1px solid var(--pk-edge, var(--hair)); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-news .nw-lead.nw-tone--warn { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-news .nw-lead.nw-tone--bad { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-news .nw-lead__title { color: var(--text); }
html[data-look="3"] .cm-news .nw-results li + li { border-top: 1px solid var(--hair); }
html[data-look="3"] .cm-news .nw-post { border: 1px solid var(--hair); }
html[data-look="3"] .cm-page { --pk-surface: color-mix(in srgb, white 3.5%, var(--bg)); --pk-raised: color-mix(in srgb, white 3.5%, var(--bg)); --pk-edge: var(--hair); --pk-edge-strong: var(--hair); }
html[data-look="3"] .cm-page .pk-head { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .cm-page .pk-head::before { background: none; }
html[data-look="3"] .cm-page .pk-head__crest { box-shadow: var(--lift); }
html[data-look="3"] .cm-page .pk-head__title { color: var(--text); }
html[data-look="3"] .cm-page .pk-stat { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-page .pk-stat dd { color: var(--text); }
html[data-look="3"] .cm-page a.pk-stat--link:hover { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-page .pk-nav { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)), var(--bg); box-shadow: none; }
html[data-look="3"] .cm-page .pk-nav__label { color: var(--text-3); }
html[data-look="3"] .cm-page .pk-nav a:hover { color: var(--text); }
html[data-look="3"] .cm-page .pk-nav a.is-active { background: color-mix(in srgb, var(--pk-gold) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-gold) 38%, transparent); color: var(--text); }
html[data-look="3"] .cm-page .pk-nav__count { color: var(--pk-gold); }
html[data-look="3"] .cm-page .pk-nav__count.is-urgent { background: var(--loss); color: var(--text); }
html[data-look="3"] .cm-page .pk-sec__head::after { display: none; }
html[data-look="3"] .cm-page .pk-sec__title { color: var(--text); }
html[data-look="3"] .cm-page .pk-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) 240px), var(--pk-surface); box-shadow: var(--lift); }
html[data-look="3"] .cm-page .pk-panel__head { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-page .pk-panel__title { color: var(--text); }
html[data-look="3"] .cm-page .pk-panel__title::before { display: none; }
html[data-look="3"] .cm-page .pk-panel--attention .pk-panel__title::before { box-shadow: none; }
html[data-look="3"] .cm-page .pk-panel--bad .pk-panel__title::before { box-shadow: none; }
html[data-look="3"] .cm-page .pk-link { color: var(--accent); }
html[data-look="3"] .cm-page .pk-link:hover { color: var(--text); }
html[data-look="3"] .cm-page .pk-empty { background: rgba(255, 255, 255, 0.015); }
html[data-look="3"] .cm-portal { --cmp-edge: var(--hair); --cmp-edge-strong: var(--hair); --cmp-surface: color-mix(in srgb, white 3.5%, var(--bg)); --cmp-row: transparent; --cmp-row-hover: rgb(255 255 255 / .05); --cmp-head: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .cm-portal .cmp-id { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html[data-look="3"] .cm-portal .cmp-id__crest { box-shadow: inset 0 0 0 1px hsl(var(--cmp-h) 70% 64% / 0.4), 0 0 0 7px rgba(4, 7, 12, 0.35); }
html[data-look="3"] .cm-portal .cmp-id__name { color: var(--text); text-shadow: none; }
html[data-look="3"] .cm-portal .cmp-id__meta { color: var(--text-2); }
html[data-look="3"] .cm-portal .cmp-id__pill { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-id__pill b { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-objective.is-on { border-color: color-mix(in srgb, var(--win) 45%, transparent); }
html[data-look="3"] .cm-portal .cmp-objective.is-behind em { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-quick__link { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .cm-portal .cmp-quick__link:hover { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-board { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-board__pos { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-board__pos b { text-shadow: none; }
html[data-look="3"] .cm-portal .cmp-board__cells b { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-board__cells b.is-pos, html[data-look="3"] .cm-portal .cmp-mini td.is-pos { color: var(--win); }
html[data-look="3"] .cm-portal .cmp-board__cells b.is-neg, html[data-look="3"] .cm-portal .cmp-mini td.is-neg { color: var(--loss); }
html[data-look="3"] .cm-portal .cmp-board__progress-head b { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-track i.is-next { box-shadow: inset 0 0 0 2px var(--accent); }
html[data-look="3"] .cm-portal .cmp-panel { box-shadow: var(--lift); }
html[data-look="3"] .cm-portal .cmp-panel__head { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-panel__title { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-panel__title::before { display: none; }
html[data-look="3"] .cm-portal .cmp-panel__link { color: var(--accent); }
html[data-look="3"] .cm-portal .cmp-panel__link:hover { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-count--warn { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-btn { background: var(--accent); color: var(--on-accent); }
html[data-look="3"] .cm-portal .cmp-btn--ghost { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-btn--ghost:hover { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-next, html[data-look="3"] .cm-portal .pk-panel.cmp-next { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border-color: var(--cmp-edge-strong); }
html[data-look="3"] .cm-portal .cmp-next::before { display: none; }
html[data-look="3"] .cm-portal .cmp-next::after { border: 1px solid var(--hair); }
html[data-look="3"] .cm-portal .cmp-next.is-live { border-color: color-mix(in srgb, var(--live) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--live) 25%, transparent); }
html[data-look="3"] .cm-portal .cmp-next__head { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-next__comp { color: var(--text-2); }
html[data-look="3"] .cm-portal .cmp-countdown { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .cm-portal .cmp-countdown.is-today { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--gold-bright); }
html[data-look="3"] .cm-portal .cmp-countdown.is-live { background: color-mix(in srgb, var(--live) 16%, transparent); color: var(--text); }
html[data-look="3"] .cm-portal .cmp-stage__ha em { color: var(--on-accent); }
html[data-look="3"] .cm-portal .cmp-stage__crest { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
html[data-look="3"] .cm-portal .cmp-stage__side--home .cmp-stage__crest { box-shadow: inset 0 0 0 1px hsl(var(--home-h) 70% 62% / 0.35); }
html[data-look="3"] .cm-portal .cmp-stage__side--away .cmp-stage__crest { box-shadow: inset 0 0 0 1px hsl(var(--away-h) 70% 62% / 0.35); }
html[data-look="3"] .cm-portal .cmp-stage__name { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-stage__side.is-mine .cmp-stage__name { color: var(--accent); }
html[data-look="3"] .cm-portal .cmp-stage__pos b { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-stage__vs { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .cm-portal .cmp-stage__score { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .cm-portal .cmp-next__foot { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-form i.is-w { color: var(--on-accent); }
html[data-look="3"] .cm-portal .cmp-form i.is-d { background: var(--cmp-draw-bg); color: var(--text); }
html[data-look="3"] .cm-portal .cmp-form i.is-l { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-form i.is-empty { border: 1px dashed var(--hair); }
html[data-look="3"] .cm-portal .cmp-allclear b { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-alert { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-alert:hover { background: var(--cmp-row-hover); }
html[data-look="3"] .cm-portal .cmp-alert.is-warn { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-alert__icon { background: rgba(255, 255, 255, 0.05); }
html[data-look="3"] .cm-portal .cmp-alert.is-warn .cmp-alert__icon { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-alert.is-info .cmp-alert__icon { background: color-mix(in srgb, var(--accent) 12%, transparent); }
html[data-look="3"] .cm-portal .cmp-mail__item { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-mail__title { color: var(--text-2); }
html[data-look="3"] .cm-portal .cmp-mail__item.is-unread .cmp-mail__title { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-res { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-res.is-d::before { background: var(--cmp-draw-bg); }
html[data-look="3"] .cm-portal .cmp-res__score { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-res__opp { color: var(--text-2); }
html[data-look="3"] .cm-portal .cmp-ha--a { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-chip-res--w { color: var(--on-accent); }
html[data-look="3"] .cm-portal .cmp-chip-res--d { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-chip-res--l { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-mini td { color: var(--text-2); }
html[data-look="3"] .cm-portal .cmp-mini__name { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-mini td.cmp-mini__pts { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-mini__row.is-mine td { background: transparent; }
html[data-look="3"] .cm-portal .cmp-mini__row.is-mine .cmp-mini__name { color: var(--accent); }
html[data-look="3"] .cm-portal .cmp-mini__gap span { border-top: 2px dotted var(--hair); }
html[data-look="3"] .cm-portal .cmp-counts__c { background: rgba(255, 255, 255, 0.025); }
html[data-look="3"] .cm-portal .cmp-counts__c b { color: var(--text-3); }
html[data-look="3"] .cm-portal .cmp-counts__c.is-tired.is-on { border-color: rgba(245, 192, 101, 0.4); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-counts__c.is-injured.is-on { border-color: color-mix(in srgb, var(--loss) 45%, transparent); background: color-mix(in srgb, var(--loss) 8%, transparent); }
html[data-look="3"] .cm-portal .cmp-condbar__track i.is-tired { background: var(--cmp-warn); }
html[data-look="3"] .cm-portal .cmp-condbar__avg b { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-player__name { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-player__pct { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-player__inj { color: var(--bad); }
html[data-look="3"] .cm-portal .cmp-fin__hero b { text-shadow: none; }
html[data-look="3"] .cm-portal .cmp-fin__total b { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-fin__rows dd { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-fin__rows dd.is-over { color: var(--loss); }
html[data-look="3"] .cm-portal .cmp-wages__track i { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-wages__track i.is-hot { background: linear-gradient(90deg, #b8454f, var(--loss)); }
html[data-look="3"] .cm-portal .cmp-contract { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-contract__cta { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-auction { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-cup { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-cup.is-today { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-page.cm-portal .pk-panel.cmp-next .pk-panel__head { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-page.cm-portal .cmp-next__empty .pk-empty { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-paper__lead { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-portal .cmp-paper__lead b { color: var(--text); }
html[data-look="3"] .cm-portal .cmp-paper__list li + li { border-top: 1px solid var(--hair); }
html[data-look="3"] .cm-rec .cmr-loanf__steps button { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-loanf__steps button.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
html[data-look="3"] .cm-rec .cmr-loanf__steps button.is-done b { color: var(--on-accent); }
html[data-look="3"] .cm-rec .cmr-loanf__places.is-bad { color: var(--loss); }
html[data-look="3"] .cm-rec .cmr-select { background: rgba(255, 255, 255, 0.05); }
html[data-look="3"] .cm-rec--dossier .pw-potential { color: var(--text); }
html[data-look="3"] .cm-rec--dossier .pw-bio { color: var(--text-2); }
html[data-look="3"] .cm-rec--dossier .pw-bio__age b { color: var(--text); }
html[data-look="3"] .cm-rec--dossier .pw-tabs { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); border: 1px solid var(--hair); }
html[data-look="3"] .cm-rec--dossier .pw-tab { box-shadow: none; color: var(--text-dim); }
html[data-look="3"] .cm-rec--dossier .pw-tab:hover { color: var(--text); box-shadow: none; }
html[data-look="3"] .cm-rec--dossier .pw-tab.is-active { color: var(--on-accent); background: linear-gradient(135deg, hsl(var(--cmr-h, 160) 75% 70%), hsl(var(--cmr-h, 160) 70% 52%)); box-shadow: none; }
html[data-look="3"] .cm-rec--dossier .pw-tab__badge { color: var(--text); }
html[data-look="3"] .cm-rec--dossier .pw-facts > div { border: 1px solid var(--hair); }
html[data-look="3"] .cm-rec--dossier .pw-facts dd { color: var(--text); }
html[data-look="3"] .cm-rec--dossier .pw-dev__arrow { color: var(--text-3); }
html[data-look="3"] .cm-rec--dossier .fm-attr-panel { border-color: var(--hair); background: transparent; }
html[data-look="3"] .cm-rec--dossier .fm-attr-panel-head { color: var(--text-2); border-bottom-color: var(--hair); }
html[data-look="3"] .cm-rec--dossier .pw-trait { color: var(--text); border: 1px solid var(--hair); }
html[data-look="3"] .cm-rec--dossier .pw-history__delta { color: var(--text-dim); }
html[data-look="3"] .cm-rec--dossier .pw-history__delta.is-up { color: var(--good); }
html[data-look="3"] .cm-rec--dossier .pw-history__delta.is-down { color: var(--bad); }
html[data-look="3"] .cm-rec--dossier .pw-honours__tile { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text-3); }
html[data-look="3"] .cm-rec--dossier .pw-honours__tile.is-won { color: var(--text); border-color: color-mix(in srgb, hsl(var(--cmr-h, 160) 70% 60%) 40%, transparent); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, hsl(var(--cmr-h, 160) 70% 50%) 22%, transparent), transparent 60%),
    rgba(10, 14, 22, 0.85); }
html[data-look="3"] .cm-rec--dossier .pw-honours__tile.is-gold { border-color: rgba(245, 200, 101, 0.6); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec--dossier .pw-honours__tile.is-gold b { color: var(--sec-leagues); }
html[data-look="3"] .cm-rec--dossier .pw-honours__tile.is-gold .pw-honours__art { filter: none; }
html[data-look="3"] .cm-rec--dossier .pw-honours__season { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec--dossier .pw-honours__num small { color: var(--text-3); }
html[data-look="3"] .cm-rec--dossier .pw-honours__num b { color: var(--text); }
html[data-look="3"] .cm-rec--dossier .pw-honour { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec--dossier .pw-honour__text strong { color: var(--text); }
html[data-look="3"] .cm-rec--dossier .pw-honour__text small { color: var(--text-3); }
html[data-look="3"] .cm-rec { --cmr-edge: var(--hair); --cmr-edge-strong: var(--hair); --cmr-surface: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .cm-rec .cmr-hero, html[data-look="3"] .cm-rec .cmr-dhero { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .cm-rec .cmr-hero__crest { box-shadow: var(--lift); }
html[data-look="3"] .cm-rec .cmr-hero__title, html[data-look="3"] .cm-rec .cmr-dhero__name { color: var(--text); text-shadow: none; }
html[data-look="3"] .cm-rec .cmr-hero__meta { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-kpi { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html[data-look="3"] .cm-rec .cmr-kpi.is-alert { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-kpi.is-hot { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html[data-look="3"] .cm-rec .cmr-kpi__v { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-tabs { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-tab { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-tab:hover { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-tab.is-on { color: var(--on-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent) 78%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
html[data-look="3"] .cm-rec .cmr-tab__badge { color: var(--text); box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-banner.is-good { background: linear-gradient(90deg, color-mix(in srgb, var(--win) 18%, transparent), transparent 70%); color: var(--good); }
html[data-look="3"] .cm-rec .cmr-banner.is-bad { background: linear-gradient(90deg, color-mix(in srgb, var(--loss) 16%, transparent), transparent 70%); color: var(--text); }
html[data-look="3"] .cm-rec .cmr-btn { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
html[data-look="3"] .cm-rec .cmr-btn:disabled { filter: grayscale(0.8) brightness(0.7); }
html[data-look="3"] .cm-rec .cmr-btn--ghost { background: rgba(255, 255, 255, 0.06); color: var(--text); }
html[data-look="3"] .cm-rec .cmr-btn--ghost:hover { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-btn--danger { color: var(--bad); }
html[data-look="3"] .cm-rec .cmr-input, html[data-look="3"] .cm-rec .cmr-select { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-panel { box-shadow: var(--lift); }
html[data-look="3"] .cm-rec .cmr-panel--hot { box-shadow: var(--lift); }
html[data-look="3"] .cm-rec .cmr-panel__head { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-panel__title { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-panel__title::before { display: none; }
html[data-look="3"] .cm-rec .cmr-panel--hot .cmr-panel__title::before { box-shadow: none; }
html[data-look="3"] .cm-rec a.cmr-player:hover .cmr-player__name { color: var(--accent); }
html[data-look="3"] .cm-rec .cmr-player__name { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-sstat { border: 1px solid var(--hair); }
html[data-look="3"] .cm-rec .cmr-sstat__v { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-savestats__res.is-w { color: var(--win); }
html[data-look="3"] .cm-rec .cmr-savestats__res.is-l { color: var(--loss); }
html[data-look="3"] .cm-rec .cmr-savestats__line b { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-dhero__handle { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-ovr { color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
html[data-look="3"] .cm-rec .cmr-ovr--xl { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
html[data-look="3"] .cm-rec .cmr-pos { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-age b { color: var(--accent); }
html[data-look="3"] .cm-rec .cmr-club { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-club.is-muted { color: var(--text-dim); }
html[data-look="3"] .cm-rec .cmr-tag { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-tag--bid { box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-days.is-urgent { color: var(--loss); }
html[data-look="3"] .cm-rec .cmr-outcome { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-track li { color: var(--text-3); }
html[data-look="3"] .cm-rec .cmr-track li i { border: 2px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-track li.is-done { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-track li.is-done i { box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-track li.is-done::before, html[data-look="3"] .cm-rec .cmr-track li.is-live::before { background: color-mix(in srgb, var(--accent) 60%, transparent); }
html[data-look="3"] .cm-rec .cmr-track li.is-live { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-track li.is-live i { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-msg { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-msg__who { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-msg__text { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-deal { background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), var(--cmr-raise); }
html[data-look="3"] .cm-rec .cmr-deal::before { display: none; }
html[data-look="3"] .cm-rec .cmr-deal.is-waiting { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-deal.is-waiting::before { background: var(--cmr-amber); box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-deal__body { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-deal__money { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-deal__status p { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-story { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-story--done, html[data-look="3"] .cm-rec .cmr-story--sold, html[data-look="3"] .cm-rec .cmr-story--free_signing { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-story__icon { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-story__outlet { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-story__ribbon { color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-story__headline { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-story__body { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-rel i { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-rel i.is-on { background: color-mix(in srgb, var(--s, var(--accent)) 90%, white); }
html[data-look="3"] .cm-rec .cmr-lead { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-lead__kicker { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-lead__headline { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-lead__body { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-need.is-empty { border-color: color-mix(in srgb, var(--loss) 55%, transparent); }
html[data-look="3"] .cm-rec .cmr-need__count { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-need__foot { color: var(--text-dim); }
html[data-look="3"] .cm-rec .cmr-need.is-empty .cmr-need__foot { color: var(--bad); }
html[data-look="3"] .cm-rec .cmr-results-head b { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-chip { border: 1px solid var(--cmr-edge-strong); color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-chip:hover { color: var(--text); border-color: var(--hair); }
html[data-look="3"] .cm-rec .cmr-chip.is-on { border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
html[data-look="3"] .cm-rec .cmr-scout { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html[data-look="3"] .cm-rec .cmr-scout:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html[data-look="3"] .cm-rec .cmr-fav { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text-3); }
html[data-look="3"] .cm-rec .cmr-fav:hover { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-fav.is-on { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold-bright) 50%, transparent); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-scout__avatar { box-shadow: 0 0 0 2px hsl(var(--cmr-card-h) 70% 60% / 0.45); }
html[data-look="3"] .cm-rec .cmr-scout__name { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-scout__stats dd { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-table td { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .cm-rec .cmr-dhero.is-free { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-dhero__avatar { box-shadow: var(--lift); }
html[data-look="3"] .cm-rec .cmr-dhero__club .cmr-club { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-stance::before { box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-fact { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-fact__v { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-fact__v.is-warn { color: var(--cmr-amber); }
html[data-look="3"] .cm-rec .cmr-room__lead { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-counter__v { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-bid, html[data-look="3"] .cm-rec .cmr-terms { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-bid__input { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-bid__input.is-over { color: var(--loss); }
html[data-look="3"] .cm-rec .cmr-bid__note { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-bid__note.is-low, html[data-look="3"] .cm-rec .cmr-bid__note.is-over { color: var(--bad); }
html[data-look="3"] .cm-rec .cmr-bid__note.is-mid { color: var(--sec-leagues); }
html[data-look="3"] .cm-rec .cmr-bid__note.is-high { color: var(--good); }
html[data-look="3"] .cm-rec .cmr-scale__track { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-scale__marker { border: 3px solid var(--hair); box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-scale__marker.is-low { box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-scale__marker.is-mid { background: var(--cmr-amber); box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-scale__legend-band { color: var(--sec-leagues); }
html[data-look="3"] .cm-rec .cmr-quick__btn b { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-terms__demand { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-field__value { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-field__value.is-bad, html[data-look="3"] .cm-rec .cmr-field__hint .is-bad { color: var(--loss); }
html[data-look="3"] .cm-rec .cmr-years__btn { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-years__btn.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-mood { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-mood__marker { border: 3px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-mood.is-accept .cmr-mood__label { color: var(--win); }
html[data-look="3"] .cm-rec .cmr-mood.is-accept .cmr-mood__marker { background: var(--win); }
html[data-look="3"] .cm-rec .cmr-mood.is-counter .cmr-mood__label { color: var(--cmr-amber); }
html[data-look="3"] .cm-rec .cmr-mood.is-counter .cmr-mood__marker { background: var(--cmr-amber); }
html[data-look="3"] .cm-rec .cmr-mood.is-reject .cmr-mood__label { color: var(--bad); }
html[data-look="3"] .cm-rec .cmr-mood.is-reject .cmr-mood__marker { background: var(--loss); }
html[data-look="3"] .cm-rec .cmr-report__lead b { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-reasons li { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-attr__v { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-release p { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-release__cost .cmr-money { color: var(--bad); }
html[data-look="3"] .cm-rec .cmr-release__confirm { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-agent__style { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-agent__ask dd { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-ovr--band { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); text-shadow: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 70%, transparent); }
html[data-look="3"] .cm-rec .cmr-know__text { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-bandv.is-hidden { border: 1px dashed var(--hair); }
html[data-look="3"] .cm-rec .cmr-grade { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-grade b { color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-grade span { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-fog { color: var(--accent); }
html[data-look="3"] .cm-rec .cmr-fog p { color: var(--text-2); }
html[data-look="3"] .cm-rec .cmr-fog b { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-fog a { color: var(--accent); }
html[data-look="3"] .cm-rec .cmr-fav--scout:hover { color: var(--accent); }
html[data-look="3"] .cm-rec .cmr-panel--cool .cmr-panel__title::before { box-shadow: none; }
html[data-look="3"] .cm-rec .cmr-report-card { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-report-card__headline { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-report-card__grid dd { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-rchip.is-good { color: var(--cmr-good); background: color-mix(in srgb, var(--cmr-good) 12%, transparent); }
html[data-look="3"] .cm-rec .cmr-rchip.is-bad { color: var(--bad); background: color-mix(in srgb, var(--cmr-low) 10%, transparent); }
html[data-look="3"] .cm-rec .cmr-report-card__fit { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-locked { border: 1px dashed var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec--dossier .fm-attr-chip.is-band { background-image: linear-gradient(180deg, var(--glass-top), var(--glass-bot)) !important; }
html[data-look="3"] .cm-rec .cmr-wnd { border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.05); }
html[data-look="3"] .cm-rec .cmr-wnd.is-open { border-color: rgba(47, 232, 154, 0.45); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-wnd__state { color: var(--text); }
html[data-look="3"] .cm-rec .cmr-wnd__state i { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cmr-count { color: var(--text); }
html[data-look="3"] .cm-rec .cms-more > summary { color: var(--text-2); }
html[data-look="3"] .cm-rec .cms-group { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-rec .cms-check { color: var(--text-2); }
html[data-look="3"] .cm-rec .cms-active__chip { color: var(--text); }
html[data-look="3"] .cm-rec .cms-active__clear { color: var(--text-dim); }
html[data-look="3"] .cm-rec .cms-active__clear:hover { color: var(--text); }
html[data-look="3"] .cm-rec .cms-preset b { color: var(--text); }
html[data-look="3"] .cm-rec .cms-preset.is-on { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
html[data-look="3"] .cm-rec .cms-sort { border-bottom: 1px dotted var(--hair); }
html[data-look="3"] .cm-rec .cms-sort:hover, html[data-look="3"] .cm-rec .cms-sort.is-on { color: var(--accent); border-bottom-color: currentColor; }
html[data-look="3"] .cm-rec .cms-pot { color: var(--gold-bright); }
html[data-look="3"] .cm-rec .cms-pot.is-est { color: var(--sec-leagues); }
html[data-look="3"] .cm-rec .cms-pager__n, html[data-look="3"] .cm-rec .cms-pager__step { color: var(--text-2); }
html[data-look="3"] .cm-rec a.cms-pager__n:hover, html[data-look="3"] .cm-rec a.cms-pager__step:hover { color: var(--text); }
html[data-look="3"] .cm-rec .cms-pager__n.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
html[data-look="3"] .cm-rec .cms-bygroup li span { color: var(--text); }
html[data-look="3"] .cm-career .scd-row__who b { color: var(--text); }
html[data-look="3"] .cm-career .scd-grade b { color: var(--on-accent); }
html[data-look="3"] .cm-career .scd-grade span { color: var(--text); }
html[data-look="3"] .crr-brief { border-top: 1px solid var(--hair); }
html[data-look="3"] .crr-brief__row label { color: var(--text-2); }
html[data-look="3"] .cm-career .scm-wage { color: var(--text); }
html[data-look="3"] .cm-career .scm-actions { border-top: 1px solid var(--hair); }
html[data-look="3"] .cm-career .scm-row { border: 1px solid var(--crr-edge, var(--hair)); }
html[data-look="3"] .cm-career .scm-who b { color: var(--text); }
html[data-look="3"] .cm-career .scm-judging b { color: var(--text); }
html[data-look="3"] .cm-career .scm-money b { color: var(--text); }
html[data-look="3"] .srv-hero { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .srv-hero__trophies { color: var(--sec-leagues); }
html[data-look="3"] .srv-seasons a { border: 1px solid var(--hair); }
html[data-look="3"] .srv-seasons a.is-on { color: var(--on-accent); background: var(--win, #2fe89a); border-color: transparent; }
html[data-look="3"] .srv-card { border: 1px solid var(--hair); }
html[data-look="3"] .srv-list li.is-you { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .an-head__art { filter: none; }
html[data-look="3"] .an-reveal__cta { color: var(--on-accent); }
html[data-look="3"] .an-tab { border: 1px solid var(--hair); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text-dim); }
html[data-look="3"] .an-tab.is-on { color: var(--text); border-color: #5fd4ff; background: color-mix(in srgb, #5fd4ff 14%, #0d1420); }
html[data-look="3"] .an-podium__slot { border: 1px solid var(--hair); }
html[data-look="3"] .an-podium__slot--1.is-in { box-shadow: none; }
html[data-look="3"] .an-step__av { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); }
html[data-look="3"] .an-step--1 .an-step__av { box-shadow: 0 0 0 3px var(--gold, #f5c065); }
html[data-look="3"] .an-step--3 .an-step__av { box-shadow: 0 0 0 3px #d99a62; }
html[data-look="3"] .an-step--1 .an-step__place { color: var(--on-accent); }
html[data-look="3"] .an-mine__stat { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .an-mine__stat--year { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-page .srv-headmeta__league { color: var(--text); }
html[data-look="3"] .cm-season { --cms-edge: var(--hair); --cms-edge-strong: var(--hair); --cms-surface: color-mix(in srgb, white 3.5%, var(--bg)); --cms-row: transparent; --cms-row-hover: rgb(255 255 255 / .05); --cms-head: color-mix(in srgb, white 3.5%, var(--bg)); }
html[data-look="3"] .cm-season .cms-hero { border: 1px solid var(--cms-edge-strong); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .cm-season .cms-hero::before { border: 1px solid var(--hair); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.015) inset; }
html[data-look="3"] .cm-season .cms-hero::after { display: none; }
html[data-look="3"] .cm-season .cms-hero__league { color: var(--text); text-shadow: none; }
html[data-look="3"] .cm-season .cms-chip { color: var(--text-2); }
html[data-look="3"] .cm-season .cms-links__chip { color: var(--text); }
html[data-look="3"] .cm-season .cms-progress__md b { color: var(--text); }
html[data-look="3"] .cm-season .cms-progress__track span.is-played { box-shadow: none; }
html[data-look="3"] .cm-season .cms-progress__track span.is-next { box-shadow: inset 0 0 0 1.5px var(--accent); }
html[data-look="3"] .cm-season .cms-you { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); backdrop-filter: blur(8px); }
html[data-look="3"] .cm-season .cms-you__name { color: var(--text); }
html[data-look="3"] .cm-season .cms-stat__v { color: var(--text); }
html[data-look="3"] .cm-season .cms-stat--pos .cms-stat__v { color: var(--accent); text-shadow: none; }
html[data-look="3"] .cm-season .cms-stat__v.is-pos { color: var(--win); }
html[data-look="3"] .cm-season .cms-stat__v.is-neg { color: var(--loss); }
html[data-look="3"] .cm-season .cms-hero__foot { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-season .cms-fixcard__label { color: var(--text-dim); }
html[data-look="3"] .cm-season .cms-fixcard__name { color: var(--text); }
html[data-look="3"] .cm-season .cms-fixcard__score { color: var(--text); }
html[data-look="3"] .cm-season .cms-continue__btn .btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
html[data-look="3"] .cm-season .cms-panel { box-shadow: var(--lift); }
html[data-look="3"] .cm-season .cms-panel__head { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-season .cms-panel__title { color: var(--text); }
html[data-look="3"] .cm-season .cms-panel__title::before { display: none; }
html[data-look="3"] .cm-season .cms-table td { border-bottom: 1px solid var(--hair); color: var(--text-2); }
html[data-look="3"] .cm-season .cms-table td.is-pos { color: var(--text); }
html[data-look="3"] .cm-season .cms-table td.is-neg { color: var(--text); }
html[data-look="3"] .cm-season .cms-table td.cms-t-pts { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--text); }
html[data-look="3"] .cm-season .cms-table th.cms-t-pts { color: var(--text); }
html[data-look="3"] .cm-season .cms-pos { color: var(--text); }
html[data-look="3"] .cm-season .cms-row.is-top .cms-pos { color: var(--text); }
html[data-look="3"] .cm-season .cms-row.is-bottom .cms-pos { color: var(--text); }
html[data-look="3"] .cm-season .cms-row.is-leader .cms-pos { color: var(--gold-bright); text-shadow: none; }
html[data-look="3"] .cm-season .cms-move { color: var(--text-3); }
html[data-look="3"] .cm-season .cms-move.is-up { color: var(--win); }
html[data-look="3"] .cm-season .cms-move.is-down { color: var(--loss); }
html[data-look="3"] .cm-season .cms-club__name { color: var(--text); }
html[data-look="3"] .cm-season .cms-row.is-mine td.cms-t-pts { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); color: var(--accent); }
html[data-look="3"] .cm-season .cms-row.is-mine .cms-club__name { color: var(--text); }
html[data-look="3"] .cm-season .cms-tag--ai { color: var(--text-3); border: 1px solid var(--hair); }
html[data-look="3"] .cm-season .cms-tag--you { color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .cm-season .cms-form i.is-w { color: var(--on-accent); }
html[data-look="3"] .cm-season .cms-form i.is-d { background: var(--cms-draw-bg); color: var(--text); }
html[data-look="3"] .cm-season .cms-form i.is-l { color: var(--text); }
html[data-look="3"] .cm-season .cms-form i.is-empty { border: 1px dashed var(--hair); }
html[data-look="3"] .cm-season .cms-mdpick__key i.is-d { background: var(--cms-draw-bg); }
html[data-look="3"] .cm-season .cms-md { border: 1px solid var(--hair); color: var(--text-3); }
html[data-look="3"] .cm-season .cms-md:hover { border-color: var(--cms-edge-strong); color: var(--text); }
html[data-look="3"] .cm-season .cms-md.is-played { color: var(--text); }
html[data-look="3"] .cm-season .cms-md.is-w::after { box-shadow: none; }
html[data-look="3"] .cm-season .cms-md.is-d::after { background: #8d9ab3; }
html[data-look="3"] .cm-season .cms-md.is-l::after { box-shadow: none; }
html[data-look="3"] .cm-season .cms-md.is-next { border-color: color-mix(in srgb, var(--accent) 65%, transparent); color: var(--accent); }
html[data-look="3"] .cm-season .cms-md.is-sel { border-color: var(--accent); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
html[data-look="3"] .cm-season .cms-mdhead__title b { color: var(--text); }
html[data-look="3"] .cm-season .cms-mdhead__status.is-played { color: var(--text); }
html[data-look="3"] .cm-season .cms-mdhead__status.is-next { color: var(--accent); }
html[data-look="3"] .cm-season .cms-fx { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .cm-season .cms-fx:last-child { border-bottom: 0; }
html[data-look="3"] .cm-season .cms-fx.is-mine { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 75%); }
html[data-look="3"] .cm-season .cms-fx__name { color: var(--text); }
html[data-look="3"] .cm-season .cms-fx__team.is-lost .cms-fx__name { color: var(--text-dim); }
html[data-look="3"] .cm-season .cms-fx__score { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 14px -8px rgba(0, 0, 0, 0.9); }
html[data-look="3"] .cm-season .cms-fx__score b { color: var(--text); }
html[data-look="3"] .cm-season .cms-fx__score.is-vs, html[data-look="3"] .cm-season .cms-fx__score.is-void { background: rgba(255, 255, 255, 0.02); box-shadow: none; }
html[data-look="3"] .cm-season .cms-fx__motm b { color: var(--text); }
html[data-look="3"] .cm-season .cms-fx__open { color: var(--text-3); }
html[data-look="3"] .cm-season .cms-fx__body { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-season .cms-ha--h { color: var(--on-accent); }
html[data-look="3"] .cm-season .cms-ha--a { border: 1px solid var(--hair); }
html[data-look="3"] .cm-season .cms-res--w { color: var(--on-accent); box-shadow: none; }
html[data-look="3"] .cm-season .cms-res--d { color: var(--text); }
html[data-look="3"] .cm-season .cms-res--l { color: var(--text); box-shadow: none; }
html[data-look="3"] .cm-season .cms-yours__record b { color: var(--text); }
html[data-look="3"] .cm-season .cms-ys { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 3px 0 0 var(--res); }
html[data-look="3"] .cm-season .cms-ys.is-next { box-shadow: inset 3px 0 0 var(--accent); }
html[data-look="3"] .cm-season .cms-ys__md { color: var(--text); }
html[data-look="3"] .cm-season .cms-ys__score { color: var(--text); }
html[data-look="3"] .cm-season .cms-ys__next { color: var(--on-accent); }
html[data-look="3"] .cm-season .cms-chip--final { color: var(--text); }
html[data-look="3"] .cm-season .cms-live { color: var(--text); }
html[data-look="3"] .cm-season .cms-fixcard.is-live .cms-fixcard__label { color: var(--text); }
html[data-look="3"] .cm-season .cms-fixcard__cta, html[data-look="3"] .cm-season .cms-fx__watch { color: var(--on-accent); }
html[data-look="3"] .cm-season .cms-bye { border: 1px dashed var(--hair); }
html[data-look="3"] .cm-season .cms-countdown b { color: var(--text); }
html[data-look="3"] .cm-season .cms-countdown.is-today b { text-shadow: none; }
html[data-look="3"] .cm-season .cms-md.is-bye::after { border-top: 2px dotted var(--hair); }
html[data-look="3"] .cm-season .cms-mdhead__status.is-live { color: var(--text); }
html[data-look="3"] .cm-season .cms-fx__score.is-live { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html[data-look="3"] .cm-season .cms-fx.is-live.is-mine { background: linear-gradient(90deg, color-mix(in srgb, var(--loss) 12%, transparent), transparent 75%); box-shadow: inset 3px 0 0 var(--loss); }
html[data-look="3"] .cm-season div.cms-fx--bye { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-season .cms-fx__byelabel { border: 1px dashed var(--hair); }
html[data-look="3"] .cm-season .cms-fx__byeclub { color: var(--text); }
html[data-look="3"] .cm-season .cms-ys.is-live { box-shadow: inset 3px 0 0 var(--loss); }
html[data-look="3"] .cm-season .cms-ys__next--live { color: var(--text); }
html[data-look="3"] .cm-season .cms-ys.is-bye { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
@media (max-width: 720px) {
  html[data-look="3"] .cm-season .cms-tview { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
  html[data-look="3"] .cm-season #cms-tv-short:checked ~ .cms-panel__head label[for="cms-tv-short"], html[data-look="3"] .cm-season #cms-tv-full:checked ~ .cms-panel__head label[for="cms-tv-full"] { color: var(--on-accent); box-shadow: none; }
}
html[data-look="3"] .cm-page.cm-season .cms-headmeta__league { color: var(--text); }
html[data-look="3"] .cm-page.cm-season .pk-head__aside .cms-you { backdrop-filter: none; }
html[data-look="3"] .cm-page.cm-season .cms-todaypanel .cms-hero__foot { background: none; }
html[data-look="3"] .cm-season .cms-gwnote { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .cm-train { --cmt-edge: var(--hair); --cmt-edge-strong: var(--hair); --cmt-row: transparent; }
html[data-look="3"] .cm-train .cmt-week { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-train .cmt-dash { color: var(--text-3); }
html[data-look="3"] .cm-train .cmt-btn { color: var(--on-accent); }
html[data-look="3"] .cm-train .cmt-oop__badge { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-train .cmt-option { box-shadow: none; background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-train .cmt-option:hover { box-shadow: none; }
html[data-look="3"] .cm-train .cmt-option.is-on { border-color: color-mix(in srgb, var(--tone) 75%, transparent); background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent); }
html[data-look="3"] .cm-train .cmt-option__badge { color: var(--on-accent); }
html[data-look="3"] .cm-train .cmt-shapes__item em { color: var(--on-accent); }
html[data-look="3"] .cm-train .cmt-legend__item i { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-train .cmt-prospect-card { background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--cmt-grow) 10%, transparent), transparent 60%),
    var(--pk-surface); }
html[data-look="3"] .cm-train .cmt-prospect-card.is-complete { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-train .cmt-growth__band { background: transparent; }
html[data-look="3"] .cm-train .cmt-xi { color: var(--on-accent); }
html[data-look="3"] .cm-train .cmt-squad__apps i.is-on { background: var(--accent); border-color: transparent; }
html[data-look="3"] .cm-train .cmt-fac__lines li.is-good { color: var(--text); }
html[data-look="3"] .cm-train .cmt-fac__lines li.is-bad { color: var(--text); }
html[data-look="3"] .cm-train .cmt-tile { border: 1px solid var(--hair); }
html[data-look="3"] .cm-train .cmt-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
html[data-look="3"] .cm-train .cmt-tile.is-attention { border-color: color-mix(in srgb, #f5c065 55%, transparent); }
html[data-look="3"] .cm-train .cmt-tile__v { color: var(--text); }
html[data-look="3"] .cm-train .cmt-tile__text { color: var(--text-dim); }
html[data-look="3"] .cm-train .cmt-tile.is-attention .cmt-tile__text { color: var(--sec-leagues); }
html[data-look="3"] .cm-train .cmt-hurt__row { border-bottom: 1px solid var(--hair); }
html[data-look="3"] .cm-train .cmt-hurt__row:last-child { border-bottom: 0; }
html[data-look="3"] .cm-world .dt-table tbody tr.ow-mine td { background: transparent; }
html[data-look="3"] .cm-youth { --mya-edge: var(--hair); --mya-edge-strong: var(--hair); }
html[data-look="3"] .cm-youth .cmy-val.is-gold { color: var(--gold-bright, #f5c065); }
html[data-look="3"] .cm-youth .cmy-val.is-good { color: var(--mya-good); }
html[data-look="3"] .cm-youth .cmy-val.is-low { color: var(--mya-low); }
html[data-look="3"] .cm-page.cm-youth .cmy-prospect { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .cm-youth .cmy-prospect .mya-card { background: none; box-shadow: none; }
html[data-look="3"] .cm-youth .cmy-needs__who b { color: var(--text); }
html[data-look="3"] .cmy-academy__note.is-good { color: var(--good); }
html[data-look="3"] .cmy-academy__note.is-bad { color: var(--bad); }
html[data-look="3"] .cm-youth .scd-row__who b { color: var(--text); }
html[data-look="3"] .cm-youth .scd-grade b { color: var(--on-accent); }
html[data-look="3"] .cm-youth .scd-grade span { color: var(--text); }
html[data-look="3"] .cm-youth .cmy-briefs b { color: var(--text); }
html[data-look="3"] .mya { --mya-edge: var(--hair); --mya-edge-strong: var(--hair); }
html[data-look="3"] .mya-kicker i { box-shadow: none; }
html[data-look="3"] .mya-hero { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .mya-hero__crest { box-shadow: var(--lift); }
html[data-look="3"] .mya-hero__id h1 { color: var(--text); }
html[data-look="3"] .mya-tile { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mya-tile b { color: var(--text); }
html[data-look="3"] .mya-tile b.is-gold { color: var(--gold-bright, #f5c065); }
html[data-look="3"] .mya-tile b.is-elite, html[data-look="3"] .mya-ovr.is-elite { color: var(--mya-elite); }
html[data-look="3"] .mya-tile b.is-good, html[data-look="3"] .mya-ovr.is-good { color: var(--mya-good); }
html[data-look="3"] .mya-tile b.is-avg, html[data-look="3"] .mya-ovr.is-avg { color: var(--mya-avg); }
html[data-look="3"] .mya-tile b.is-low, html[data-look="3"] .mya-ovr.is-low { color: var(--mya-low); }
html[data-look="3"] .mya-panel { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mya-card { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); box-shadow: var(--lift); }
html[data-look="3"] .mya-card.is-high { box-shadow: none; }
html[data-look="3"] .mya-card__who b { color: var(--text); }
html[data-look="3"] .mya-pot { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }
html[data-look="3"] .mya-ovr { color: var(--text); }
html[data-look="3"] .mya-card__controls select { background: linear-gradient(180deg, var(--glass-top), var(--glass-bot)); }

/* app/manager/look3/floor.css */
/* WEB-LOOK-3 Football Manager / Career Mode (LOOK3-8c) - 12 px floor (SP-11). GENERATED by scripts/look3-floor.mjs; do not edit by hand.
   Lifts every text size below 12 px to var(--label-min) under html[data-look="3"]. Flag off = matches nothing. */
html[data-look="3"] .ch-role { font-size: var(--label-min); }
html[data-look="3"] .ch-stat span { font-size: var(--label-min); }
html[data-look="3"] .ch-next__vs small { font-size: var(--label-min); }
html[data-look="3"] .ch-award small { font-size: var(--label-min); }
html[data-look="3"] .ch-feed time { font-size: var(--label-min); }
html[data-look="3"] .ch-chip { font-size: var(--label-min); }
html[data-look="3"] .ch-journey small { font-size: var(--label-min); }
html[data-look="3"] .ch-spell__nums small { font-size: var(--label-min); }
html[data-look="3"] .ch-movestats small, html[data-look="3"] .ch-heat__nums small, html[data-look="3"] .ch-window small { font-size: var(--label-min); }
html[data-look="3"] .ch-move__date { font-size: var(--label-min); }
html[data-look="3"] .ch-move__club--none { font-size: var(--label-min); }
html[data-look="3"] .ch-inout__dir { font-size: var(--label-min); }
html[data-look="3"] .ch-inout__who small { font-size: var(--label-min); }
html[data-look="3"] .ch-seasons i { font-size: var(--label-min); }
html[data-look="3"] .ch-big span { font-size: var(--label-min); }
html[data-look="3"] .ch-big small { font-size: var(--label-min); }
html[data-look="3"] .ch-results__rate span { font-size: var(--label-min); }
html[data-look="3"] .ch-medal > span:last-child { font-size: var(--label-min); }
html[data-look="3"] .ch-radar__label { font-size: var(--label-min); }
html[data-look="3"] .ch-discipline small { font-size: var(--label-min); }
html[data-look="3"] .ch-ach-hero__text span { font-size: var(--label-min); }
html[data-look="3"] .ch-ach-trophy small { font-size: var(--label-min); }
html[data-look="3"] .ch-ach-shelf h3 { font-size: var(--label-min); }
html[data-look="3"] .ch-depth__avg small { font-size: var(--label-min); }
html[data-look="3"] .ch-depth__count { font-size: var(--label-min); }
html[data-look="3"] .ch-scout__pos { font-size: var(--label-min); }
html[data-look="3"] .ch-scout__value small { font-size: var(--label-min); }
html[data-look="3"] .ch-squad__who small { font-size: var(--label-min); }
html[data-look="3"] .ch-pitch__spot small { font-size: var(--label-min); }
html[data-look="3"] .ch-pitch__spot i { font-size: var(--label-min); }
html[data-look="3"] .ch-pitch__hole { font-size: var(--label-min); }
html[data-look="3"] .ch-plan-slot > span { font-size: var(--label-min); }
html[data-look="3"] .ch-plan-slider > span:first-child { font-size: var(--label-min); }
html[data-look="3"] .ch-plan-form-guide > small { font-size: var(--label-min); }
html[data-look="3"] .ch-res { font-size: var(--label-min); }
html[data-look="3"] .cupd-kicker { font-size: var(--label-min); }
html[data-look="3"] .cupd-kicker__icon { font-size: var(--label-min); }
html[data-look="3"] .cupd-hero__comp { font-size: var(--label-min); }
html[data-look="3"] .cupd-hero__team em { font-size: var(--label-min); }
html[data-look="3"] .cupd-tag { font-size: var(--label-min); }
html[data-look="3"] .cupd-verdict span { font-size: var(--label-min); }
html[data-look="3"] .cupd-section { font-size: var(--label-min); }
html[data-look="3"] .cupd-group__head { font-size: var(--label-min); }
html[data-look="3"] .cupd-row__note { font-size: var(--label-min); }
html[data-look="3"] .cf-track-label { font-size: var(--label-min); }
html[data-look="3"] .cf-group-title { font-size: var(--label-min); }
html[data-look="3"] .ds-kicker { font-size: var(--label-min); }
html[data-look="3"] .ds-cal__when { font-size: var(--label-min); }
html[data-look="3"] .ds-cal__sub { font-size: var(--label-min); }
html[data-look="3"] .ds-assistant__name { font-size: var(--label-min); }
html[data-look="3"] .ds-heading { font-size: var(--label-min); }
html[data-look="3"] .ds-tag { font-size: var(--label-min); }
html[data-look="3"] .ds-card__due { font-size: var(--label-min); }
html[data-look="3"] .ds-option__hint { font-size: var(--label-min); }
html[data-look="3"] .ds-chip { font-size: var(--label-min); }
html[data-look="3"] .ds-headline__tag { font-size: var(--label-min); }
html[data-look="3"] .ds-digest__heading { font-size: var(--label-min); }
html[data-look="3"] .ds-heading__link { font-size: var(--label-min); }
html[data-look="3"] .ds-heading__aside { font-size: var(--label-min); }
html[data-look="3"] .ds-headline__quote span { font-size: var(--label-min); }
html[data-look="3"] .ds-post__likes { font-size: var(--label-min); }
html[data-look="3"] .gwo-kicker { font-size: var(--label-min); }
html[data-look="3"] .gwo-who em { font-size: var(--label-min); }
html[data-look="3"] .gwo-who small { font-size: var(--label-min); }
html[data-look="3"] .gwo-pill { font-size: var(--label-min); }
html[data-look="3"] .mib-kicker { font-size: var(--label-min); }
html[data-look="3"] .mib-head__stats small { font-size: var(--label-min); }
html[data-look="3"] .mib-kind em { font-size: var(--label-min); }
html[data-look="3"] .mib-item__top time { font-size: var(--label-min); }
html[data-look="3"] .mib-chip { font-size: var(--label-min); }
html[data-look="3"] .intl-day__label { font-size: var(--label-min); }
html[data-look="3"] .intl-day__group { font-size: var(--label-min); }
html[data-look="3"] .intl-day__note { font-size: var(--label-min); }
html[data-look="3"] .lgm-host { font-size: var(--label-min); }
html[data-look="3"] .lgm-pill { font-size: var(--label-min); }
html[data-look="3"] .mcr-kicker { font-size: var(--label-min); }
html[data-look="3"] .mcr-rail__text small { font-size: var(--label-min); }
html[data-look="3"] .mcr-sub { font-size: var(--label-min); }
html[data-look="3"] .mcr-field__picked { font-size: var(--label-min); }
html[data-look="3"] .mcr-nation__none { font-size: var(--label-min); }
html[data-look="3"] .mcr-tags em { font-size: var(--label-min); }
html[data-look="3"] .mcr-points small { font-size: var(--label-min); }
html[data-look="3"] .mcr-attr-group__title { font-size: var(--label-min); }
html[data-look="3"] .mcr-soon { font-size: var(--label-min); }
html[data-look="3"] .mcr-attr__blurb { font-size: var(--label-min); }
html[data-look="3"] .mcr-review__row > span { font-size: var(--label-min); }
html[data-look="3"] .mma-kicker { font-size: var(--label-min); }
html[data-look="3"] .mma-shape__row--head { font-size: var(--label-min); }
html[data-look="3"] .mma-shape__label { font-size: var(--label-min); }
html[data-look="3"] .mma-finding__conf { font-size: var(--label-min); }
html[data-look="3"] .mma-evidence__chip { font-size: var(--label-min); }
html[data-look="3"] .mma-player__pos { font-size: var(--label-min); }
html[data-look="3"] .mma-player__did { font-size: var(--label-min); }
html[data-look="3"] .mma-lesson__because { font-size: var(--label-min); }
html[data-look="3"] .mp-you { font-size: var(--label-min); }
html[data-look="3"] .mp-side__pos { font-size: var(--label-min); }
html[data-look="3"] .mp-side__mgr { font-size: var(--label-min); }
html[data-look="3"] .mp-vs small { font-size: var(--label-min); }
html[data-look="3"] .mp-form li { font-size: var(--label-min); }
html[data-look="3"] .mp-form-none { font-size: var(--label-min); }
html[data-look="3"] .mp-derby span { font-size: var(--label-min); }
html[data-look="3"] .mp-quote figcaption { font-size: var(--label-min); }
html[data-look="3"] .fmg-kicker { font-size: var(--label-min); }
html[data-look="3"] .fmg-mode__kicker { font-size: var(--label-min); }
html[data-look="3"] .fmg-pill { font-size: var(--label-min); }
html[data-look="3"] .fmg-stats small { font-size: var(--label-min); }
html[data-look="3"] .fmg-stats em { font-size: var(--label-min); }
html[data-look="3"] .fmg-manager__text small { font-size: var(--label-min); }
html[data-look="3"] .fmg-manager__rep small { font-size: var(--label-min); }
html[data-look="3"] .mmn-kicker { font-size: var(--label-min); }
html[data-look="3"] .mmn-section__title { font-size: var(--label-min); }
html[data-look="3"] .mmn-tile__text b em { font-size: var(--label-min); }
html[data-look="3"] .mmn-feature__tag { font-size: var(--label-min); }
html[data-look="3"] .pro-field > span { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-tag { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-ovr__label { font-size: var(--label-min); }
html[data-look="3"] .pro-mc__top { font-size: var(--label-min); }
html[data-look="3"] .pro-chip { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-last__num small { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-bar__label { font-size: var(--label-min); }
html[data-look="3"] .pro-legend { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-fixtures__md { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-fixtures__dnp { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-interest__level { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-news small { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-career th { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-highlights span { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-talk__kicker { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-list__state { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-offer__clock { font-size: var(--label-min); }
html[data-look="3"] .cm-pro .pro-offer__terms dt { font-size: var(--label-min); }
html[data-look="3"] .rf-kicker { font-size: var(--label-min); }
html[data-look="3"] .rf-kicker-sub { font-size: var(--label-min); }
html[data-look="3"] .rf-you { font-size: var(--label-min); }
html[data-look="3"] .rf-score-dash { font-size: var(--label-min); }
html[data-look="3"] .rf-banner-tag { font-size: var(--label-min); }
html[data-look="3"] .rf-ticker-tag { font-size: var(--label-min); }
html[data-look="3"] .rf-final-pill { font-size: var(--label-min); }
html[data-look="3"] .rf-section-title { font-size: var(--label-min); }
html[data-look="3"] .rf-result-foot { font-size: var(--label-min); }
html[data-look="3"] .rf-table-head { font-size: var(--label-min); }
html[data-look="3"] .rf-move { font-size: var(--label-min); }
html[data-look="3"] .rf-replay-link { font-size: var(--label-min); }
html[data-look="3"] .skip-kicker { font-size: var(--label-min); }
html[data-look="3"] .skip-fixture__name em, html[data-look="3"] .skip-chip em { font-size: var(--label-min); }
html[data-look="3"] .skip-log__day { font-size: var(--label-min); }
html[data-look="3"] .skip-result { font-size: var(--label-min); }
html[data-look="3"] .skip-stat small { font-size: var(--label-min); }
html[data-look="3"] .skip-report > div > .skip-section, html[data-look="3"] .skip-section { font-size: var(--label-min); }
html[data-look="3"] .skip-results__match small { font-size: var(--label-min); }
html[data-look="3"] .mle-squad__head { font-size: var(--label-min); }
html[data-look="3"] .mle-player__slot { font-size: var(--label-min); }
html[data-look="3"] .mle-player__pos { font-size: var(--label-min); }
html[data-look="3"] .mle-sheet__kicker { font-size: var(--label-min); }
html[data-look="3"] .mle-current__name small { font-size: var(--label-min); }
html[data-look="3"] .mle-options__head { font-size: var(--label-min); }
html[data-look="3"] .mle-option__name small { font-size: var(--label-min); }
html[data-look="3"] .mle-option__sub { font-size: var(--label-min); }
html[data-look="3"] .totm-news__ribbon { font-size: var(--label-min); }
html[data-look="3"] .tut-avatar--sm { font-size: var(--label-min); }
html[data-look="3"] .tut-who__role { font-size: var(--label-min); }
html[data-look="3"] .tut-progress__label { font-size: var(--label-min); }
html[data-look="3"] .tut-hint { font-size: var(--label-min); }
html[data-look="3"] .tut-btn, html[data-look="3"] button.tut-btn { font-size: var(--label-min); }
html[data-look="3"] button.tut-skip { font-size: var(--label-min); }
html[data-look="3"] button.tut-pill { font-size: var(--label-min); }
html[data-look="3"] .aw-picker__field { font-size: var(--label-min); }
html[data-look="3"] .aw-who__text small { font-size: var(--label-min); }
html[data-look="3"] .aw-award__title { font-size: var(--label-min); }
html[data-look="3"] .aw-chip em { font-size: var(--label-min); }
html[data-look="3"] .aw-board__apps { font-size: var(--label-min); }
html[data-look="3"] .aw-podium__step small { font-size: var(--label-min); }
html[data-look="3"] .aw-podium__place { font-size: var(--label-min); }
html[data-look="3"] .hh-label { font-size: var(--label-min); }
html[data-look="3"] .hh-pill { font-size: var(--label-min); }
html[data-look="3"] .hh-step small { font-size: var(--label-min); }
html[data-look="3"] .hh-step em { font-size: var(--label-min); }
html[data-look="3"] .hh-step__base span { font-size: var(--label-min); }
html[data-look="3"] .hh-cup__comp { font-size: var(--label-min); }
html[data-look="3"] .hh-cup__note { font-size: var(--label-min); }
html[data-look="3"] .hh-xi__tag { font-size: var(--label-min); }
html[data-look="3"] .hh-xi__pos { font-size: var(--label-min); }
html[data-look="3"] .hh-more__tag { font-size: var(--label-min); }
html[data-look="3"] .hh-more__open { font-size: var(--label-min); }
html[data-look="3"] .hh-totm__who small { font-size: var(--label-min); }
html[data-look="3"] .hh-totm__count { font-size: var(--label-min); }
html[data-look="3"] .hh-roll thead th { font-size: var(--label-min); }
html[data-look="3"] .hh-roll__season small { font-size: var(--label-min); }
html[data-look="3"] .hh-roll__lead { font-size: var(--label-min); }
html[data-look="3"] .hh-roll__trophy { font-size: var(--label-min); }
html[data-look="3"] .hh-fold__num small { font-size: var(--label-min); }
html[data-look="3"] .hh-fold__fact small { font-size: var(--label-min); }
html[data-look="3"] .hh-fold__open { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-chip { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-kicker { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-gauge__label { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-formula { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-pip { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-track__end { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-track__mark { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-step__reach { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-step__tag { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-event__when { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-table th { font-size: var(--label-min); }
html[data-look="3"] .cm-career .crr-more > summary { font-size: var(--label-min); }
html[data-look="3"] .cd-card__head h3 { font-size: var(--label-min); }
html[data-look="3"] .cd-chip { font-size: var(--label-min); }
html[data-look="3"] .cd-squad__scouted { font-size: var(--label-min); }
html[data-look="3"] .cd-xi__avg small { font-size: var(--label-min); }
html[data-look="3"] .cd-line__place { font-size: var(--label-min); }
html[data-look="3"] .cd-lines__key { font-size: var(--label-min); }
html[data-look="3"] .cd-star__text small { font-size: var(--label-min); }
html[data-look="3"] .cd-captain { font-size: var(--label-min); }
html[data-look="3"] .cd-group__title { font-size: var(--label-min); }
html[data-look="3"] .cd-row__who small { font-size: var(--label-min); }
html[data-look="3"] .cd-row__role { font-size: var(--label-min); }
html[data-look="3"] .drd-kicker { font-size: var(--label-min); }
html[data-look="3"] .drd-legend { font-size: var(--label-min); }
html[data-look="3"] .drd-chip { font-size: var(--label-min); }
html[data-look="3"] .drd-cause__label { font-size: var(--label-min); }
html[data-look="3"] .drd-node__name { font-size: var(--label-min); }
html[data-look="3"] .drd-webnote { font-size: var(--label-min); }
html[data-look="3"] .drd-leader__tier { font-size: var(--label-min); }
html[data-look="3"] .drd-leader__why { font-size: var(--label-min); }
html[data-look="3"] .drd-read summary { font-size: var(--label-min); }
html[data-look="3"] .drd-group__lead, html[data-look="3"] .drd-group__warn { font-size: var(--label-min); }
html[data-look="3"] .drd-settle__meta { font-size: var(--label-min); }
html[data-look="3"] .drd-rels__group h4 small { font-size: var(--label-min); }
html[data-look="3"] .drd-rel__strength { font-size: var(--label-min); }
html[data-look="3"] .drd-rel__why, html[data-look="3"] .drd-rel__last { font-size: var(--label-min); }
html[data-look="3"] .drd-traits__table thead th { font-size: var(--label-min); }
html[data-look="3"] .ctf__eyebrow { font-size: var(--label-min); }
html[data-look="3"] .ctf-meter__label { font-size: var(--label-min); }
html[data-look="3"] .ctf-meter__foot span { font-size: var(--label-min); }
html[data-look="3"] .ctf-phase__label { font-size: var(--label-min); }
html[data-look="3"] .ctf-phase__effect { font-size: var(--label-min); }
html[data-look="3"] .ctx-strength small { font-size: var(--label-min); }
html[data-look="3"] .ctx-strength__big em { font-size: var(--label-min); }
html[data-look="3"] .ctx-strength__label { font-size: var(--label-min); }
html[data-look="3"] .ctx-flag { font-size: var(--label-min); }
html[data-look="3"] .ctx-card__tag, html[data-look="3"] .ctx-reset { font-size: var(--label-min); }
html[data-look="3"] .ctx-seg__badge { font-size: var(--label-min); }
html[data-look="3"] .ctx-mtile__lean { font-size: var(--label-min); }
html[data-look="3"] .ctx-phase__title small { font-size: var(--label-min); }
html[data-look="3"] .ctx-phase__lean { font-size: var(--label-min); }
html[data-look="3"] .ctx-known__label { font-size: var(--label-min); }
html[data-look="3"] .ctx-known__value { font-size: var(--label-min); }
html[data-look="3"] .ctx-dial__label { font-size: var(--label-min); }
html[data-look="3"] .ctx-dial__state { font-size: var(--label-min); }
html[data-look="3"] .ctx-fx__item { font-size: var(--label-min); }
html[data-look="3"] .ctx-fx--none { font-size: var(--label-min); }
html[data-look="3"] .ctx-taker__label small { font-size: var(--label-min); }
html[data-look="3"] .ctx-best { font-size: var(--label-min); }
html[data-look="3"] .ctx-routine__note { font-size: var(--label-min); }
html[data-look="3"] .ctx-compare summary::after { font-size: var(--label-min); }
html[data-look="3"] .cm-fin .pk-stat dd small { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-next__label { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-next__more, html[data-look="3"] .cm-intl .intl-next__sub { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-tag { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-table th { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-fixtures__day { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-round__head { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-tie__score small { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-tie__foot { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-tie--waiting .intl-tie__row { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-day__num { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-day__state { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-scorers__rank { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-team__name small, html[data-look="3"] .cm-intl .intl-team__state small { font-size: var(--label-min); }
html[data-look="3"] .cm-intl .intl-squad__pos { font-size: var(--label-min); }
html[data-look="3"] .lg-strip-head { font-size: var(--label-min); }
html[data-look="3"] .lg-chip-foot { font-size: var(--label-min); }
html[data-look="3"] .lg-result-scorers { font-size: var(--label-min); }
html[data-look="3"] .lg-table-title { font-size: var(--label-min); }
html[data-look="3"] .lg-table th { font-size: var(--label-min); }
html[data-look="3"] .lg-you { font-size: var(--label-min); }
html[data-look="3"] .lg-friend { font-size: var(--label-min); }
html[data-look="3"] .lg-move { font-size: var(--label-min); }
html[data-look="3"] .htr-xg__label { font-size: var(--label-min); }
html[data-look="3"] .htr-head { font-size: var(--label-min); }
html[data-look="3"] .htr-take { font-size: var(--label-min); }
html[data-look="3"] .htr-more { font-size: var(--label-min); }
html[data-look="3"] .lm-sb-meta { font-size: var(--label-min); }
html[data-look="3"] .lm-you { font-size: var(--label-min); }
html[data-look="3"] .lm-sb-phase { font-size: var(--label-min); }
html[data-look="3"] .lm-card-head { font-size: var(--label-min); }
html[data-look="3"] .lm-camera-toggle { font-size: var(--label-min); }
html[data-look="3"] .lm-replay-badge { font-size: var(--label-min); }
html[data-look="3"] .lm-weather { font-size: var(--label-min); }
html[data-look="3"] .lm-goal-score { font-size: var(--label-min); }
html[data-look="3"] .lm-skip-tag { font-size: var(--label-min); }
html[data-look="3"] .lm-break-kicker { font-size: var(--label-min); }
html[data-look="3"] .lm-stat-label { font-size: var(--label-min); }
html[data-look="3"] .lm-feed-row--period { font-size: var(--label-min); }
html[data-look="3"] .lm-list-head { font-size: var(--label-min); }
html[data-look="3"] .lm-num { font-size: var(--label-min); }
html[data-look="3"] .lm-pos { font-size: var(--label-min); }
html[data-look="3"] .lm-tag { font-size: var(--label-min); }
html[data-look="3"] .lm-tactic-label { font-size: var(--label-min); }
html[data-look="3"] .lm-seg-btn { font-size: var(--label-min); }
html[data-look="3"] .lm-rated-line { font-size: var(--label-min); }
html[data-look="3"] .lm-pre-kicker { font-size: var(--label-min); }
html[data-look="3"] .lm-pre-vs span { font-size: var(--label-min); }
html[data-look="3"] .lm-form span { font-size: var(--label-min); }
html[data-look="3"] .lm-choice-kicker { font-size: var(--label-min); }
html[data-look="3"] .lm-choice-team em { font-size: var(--label-min); }
html[data-look="3"] .lm-cup-strip { font-size: var(--label-min); }
html[data-look="3"] .lm-sb-tie { font-size: var(--label-min); }
html[data-look="3"] .lm-shootout__kick { font-size: var(--label-min); }
html[data-look="3"] .lm-goal-moment { font-size: var(--label-min); }
html[data-look="3"] .lm-sb-occasion, html[data-look="3"] .lm-pre-occasion { font-size: var(--label-min); }
html[data-look="3"] .lm-sb-watching { font-size: var(--label-min); }
html[data-look="3"] .lm-clock-open-line { font-size: var(--label-min); }
html[data-look="3"] .lm-derby-tag { font-size: var(--label-min); }
html[data-look="3"] .pc-kicker { font-size: var(--label-min); }
html[data-look="3"] .pc-fact { font-size: var(--label-min); }
html[data-look="3"] .pc-num { font-size: var(--label-min); }
html[data-look="3"] .pc-option__tone { font-size: var(--label-min); }
html[data-look="3"] .pc-tone small { font-size: var(--label-min); }
html[data-look="3"] .pc-fx { font-size: var(--label-min); }
html[data-look="3"] .tt-kicker { font-size: var(--label-min); }
html[data-look="3"] .tt-power { font-size: var(--label-min); }
html[data-look="3"] .tt-card__label { font-size: var(--label-min); }
html[data-look="3"] .tt-tag { font-size: var(--label-min); }
html[data-look="3"] .tt-pill { font-size: var(--label-min); }
html[data-look="3"] .tt-listeners__name small { font-size: var(--label-min); }
html[data-look="3"] .tt-delta { font-size: var(--label-min); }
html[data-look="3"] .tt-talk__tone { font-size: var(--label-min); }
html[data-look="3"] .fw-preview__league { font-size: var(--label-min); }
html[data-look="3"] .fw-panel h2 small { font-size: var(--label-min); }
html[data-look="3"] .fw-swatch { font-size: var(--label-min); }
html[data-look="3"] .ng-kicker { font-size: var(--label-min); }
html[data-look="3"] .ng-progress li { font-size: var(--label-min); }
html[data-look="3"] .ng-league__text small { font-size: var(--label-min); }
html[data-look="3"] .ng-club__facts small { font-size: var(--label-min); }
html[data-look="3"] .ng-club__xi small { font-size: var(--label-min); }
html[data-look="3"] .ng-club__lines small { font-size: var(--label-min); }
html[data-look="3"] .ng-squadbar__best small { font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-head__kicker { font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-stat dt { font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-stat__sub { font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-nav__label { font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-nav a b { font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-nav__count { font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-panel__sub { font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-link { font-size: var(--label-min); }
html[data-look="3"] .srv-kicker { font-size: var(--label-min); }
html[data-look="3"] .srv-seasons a { font-size: var(--label-min); }
html[data-look="3"] .an-step small { font-size: var(--label-min); }
html[data-look="3"] .an-step em { font-size: var(--label-min); }
html[data-look="3"] .an-step__place { font-size: var(--label-min); }
html[data-look="3"] .cm-youth .cmy-needs__who small { font-size: var(--label-min); }
html[data-look="3"] .cm-youth .cmy-chip { font-size: var(--label-min); }
html[data-look="3"] .cm-youth .cmy-guide dt { font-size: var(--label-min); }
html[data-look="3"] .mya-kicker { font-size: var(--label-min); }
html[data-look="3"] .mya-tile small { font-size: var(--label-min); }
html[data-look="3"] .mya-tile span { font-size: var(--label-min); }
html[data-look="3"] .mya-card__who small { font-size: var(--label-min); }
html[data-look="3"] .mya-pot small { font-size: var(--label-min); }
html[data-look="3"] .mya-card__controls small { font-size: var(--label-min); }
@media (max-width: 760px) {
  html[data-look="3"] .ch-pitch__spot small { font-size: var(--label-min); }
  html[data-look="3"] .rf-kicker { font-size: var(--label-min); }
}
@media (max-width: 640px) {
  html[data-look="3"] .hh-step small { font-size: var(--label-min); }
  html[data-look="3"] .hh-step em { font-size: var(--label-min); }
}

/* app/manager/look3/manager.css */
/* WEB-LOOK-3 LOOK3-8c phase 1: Football Manager / Career Mode (/manager/**, /career/**) - "Floodlight" chrome, hand-written part.
   Only html[data-look="3"] body[data-section="manager"] (lib/sections.js maps /career to the manager section too). Flag off = matches nothing.
   Loaded after app/manager/look3/remap.css (GENERATED by scripts/look3-manager.mjs: surfaces, borders, glows, text tiers) so these win ties.
   Approach: the legacy tokens the ~970 KB of area CSS reads are re-pointed here, so it re-colours with no mass edit; then the shared
   pieces every page carries (hub header + tab bars, buttons, chips, tables, form fields, page heads) get the Floodlight primitives.
   Art keeps its own colours: card faces, the pitch, kits, crests, flags, meters (see ART in the generator). Buttons and links = --accent;
   the section colour (--sec, manager blue) is a marker only. */

html[data-look="3"] body[data-section="manager"] {
  --text-dim: var(--text-2);
  --border: var(--hair);
  --glass-border: var(--hair);
  --glass-bg-1: var(--glass-top);
  --glass-bg-2: var(--glass-bot);
  --edge: var(--hair);
  --edge-strong: var(--hair);
  /* opaque: popovers and sticky bars paint with these, so they must not show what is under them */
  --bg-elevated: color-mix(in srgb, white 3%, var(--bg));
  --bg-elevated-2: color-mix(in srgb, white 5%, var(--bg));
  --bg-elevated-3: color-mix(in srgb, white 7%, var(--bg));
  --win: var(--good);
  --loss: var(--bad);
  --font-display: var(--f-display);
  --font-body: var(--f-body);
  --font-mono: var(--f-mono);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: var(--lift);
}

/* ---- hub header: "Football Manager" bar + the section tab bars (NavTabs). Gold active pills -> Floodlight tabs:
   plain text, the open tab is --text with a 2 px accent underline; sub tabs are a quiet wash. --c is set inline (gold), hence !important. ---- */
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tabs { --c: var(--accent) !important; border-bottom-color: var(--hair); gap: 2px; }
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tab {
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: 0;
  background: none;
  color: var(--text-2);
  font-weight: 500;
}
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tab:hover { color: var(--text); background: none; }
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tab.on { color: var(--text); font-weight: 600; background: none; box-shadow: inset 0 -2px 0 var(--accent); }
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tab-num { background: none; color: var(--text-3); font-family: var(--f-mono), ui-monospace, monospace; font-size: var(--label-min); width: auto; }
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tab.on .nav-tab-num { background: none; color: var(--accent); }
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tab-badge { background: var(--accent); color: var(--on-accent); font-size: var(--label-min); }
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tabs--sub { gap: 4px; padding-top: 8px; border-bottom: 0; }
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tabs--sub .nav-tab { min-height: 36px; padding: 0 12px; border-radius: var(--r-sm); font-size: 14px; }
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tabs--sub .nav-tab.on { color: var(--text); background: rgb(255 255 255 / .07); box-shadow: none; }
html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (pointer: coarse) {
  html[data-look="3"] body[data-section="manager"] .manager-tabbar-wrap .nav-tabs--sub .nav-tab { min-height: var(--tap); }
}
html[data-look="3"] body[data-section="manager"] .manager-purpose { color: var(--text-2); font-size: 13px; }
html[data-look="3"] body[data-section="manager"] .manager-purpose__label { color: var(--text-3); font-family: var(--f-mono), ui-monospace, monospace; font-size: var(--label-min); }
html[data-look="3"] body[data-section="manager"] .manager-util-icon { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--r); color: var(--text-2); }
html[data-look="3"] body[data-section="manager"] .manager-util-icon:hover { color: var(--text); background: rgb(255 255 255 / .05); }
/* Manager World strip under the tabs: a hairline note, the league name in text (not a green frame) */
html[data-look="3"] body[data-section="manager"] .lgm-strip { border: 0; border-radius: var(--r); box-shadow: var(--lift); color: var(--text-2); }
html[data-look="3"] body[data-section="manager"] .lgm-strip b { color: var(--text); }
html[data-look="3"] body[data-section="manager"] .lgm-strip a { color: var(--accent); }

/* ---- page kit (app/manager/world/page-kit.js, every /manager/world page): head, key numbers, "on this page", sections, panels ---- */
html[data-look="3"] .cm-page .pk-head { border: 0; border-radius: var(--r-lg); box-shadow: var(--lift); }
html[data-look="3"] .cm-page .pk-head::before { display: none; }
html[data-look="3"] .cm-page .pk-head__kicker { color: var(--text-2); letter-spacing: .12em; font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-head__dot { background: var(--sec); box-shadow: none; }
html[data-look="3"] .cm-page .pk-head__title { font: 800 clamp(28px, 3vw, 40px)/1.08 var(--f-display), var(--f-body), sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] .cm-page .pk-head__lead { color: var(--text-2); font-size: 15px; }
html[data-look="3"] .cm-page .pk-head__crest { background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--hair); }
html[data-look="3"] .cm-page .pk-stat { border: 0; border-radius: var(--r); background: rgb(255 255 255 / .04); box-shadow: none; }
html[data-look="3"] .cm-page :is(.pk-stat--good, .pk-stat--warn, .pk-stat--bad, .pk-stat--accent) { box-shadow: none; }
html[data-look="3"] .cm-page .pk-stat dt { color: var(--text-3); letter-spacing: .1em; }
html[data-look="3"] .cm-page .pk-stat dd { font-family: var(--f-mono), ui-monospace, monospace; font-weight: 600; letter-spacing: -.02em; }
html[data-look="3"] .cm-page .pk-stat--warn dd { color: var(--sec-leagues); }
html[data-look="3"] .cm-page a.pk-stat--link:hover { background: rgb(255 255 255 / .07); }
html[data-look="3"] .cm-page .pk-nav { border: 0; border-radius: var(--r); box-shadow: inset 0 -1px 0 var(--hair); gap: 2px; }
html[data-look="3"] .cm-page .pk-nav__label { color: var(--text-3); font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-nav a { min-height: 36px; color: var(--text-2); }
html[data-look="3"] .cm-page .pk-nav a b { color: var(--text-3); }
html[data-look="3"] .cm-page .pk-nav a:hover { color: var(--text); }
html[data-look="3"] .cm-page .pk-nav a.is-active { color: var(--text); background: rgb(255 255 255 / .07); box-shadow: none; }
html[data-look="3"] .cm-page .pk-nav a.is-active b { color: var(--accent); }
html[data-look="3"] .cm-page .pk-nav__count { color: var(--text-2); background: rgb(255 255 255 / .08); }
html[data-look="3"] .cm-page .pk-sec__head { border-bottom-color: var(--hair); }
html[data-look="3"] .cm-page .pk-sec__num { min-width: 0; height: auto; padding: 4px 0 0; border: 0; background: none; color: var(--text-3); font-weight: 500; }
html[data-look="3"] .cm-page .pk-sec__title { font: 600 22px/1.25 var(--f-body), system-ui, sans-serif; letter-spacing: -.01em; color: var(--text); }
html[data-look="3"] .cm-page .pk-sec__lead { color: var(--text-2); font-size: 14px; }
html[data-look="3"] .cm-page .pk-panel { border: 0; border-radius: var(--r-lg); box-shadow: var(--lift); }
html[data-look="3"] .cm-page :is(.pk-panel--attention, .pk-panel--good, .pk-panel--bad, .pk-panel--accent) { box-shadow: var(--lift); }
html[data-look="3"] .cm-page .pk-panel--attention { box-shadow: var(--lift), inset 2px 0 0 var(--sec-leagues); }
html[data-look="3"] .cm-page .pk-panel--bad { box-shadow: var(--lift), inset 2px 0 0 var(--bad); }
html[data-look="3"] .cm-page .pk-panel__head { background: none; border-bottom-color: var(--hair); }
html[data-look="3"] .cm-page .pk-panel__title { font: 600 16px/1.3 var(--f-body), system-ui, sans-serif; letter-spacing: -.005em; text-transform: none; color: var(--text); }
html[data-look="3"] .cm-page .pk-panel__sub { color: var(--text-3); font-size: var(--label-min); }
html[data-look="3"] .cm-page .pk-panel__foot { background: none; border-top-color: var(--hair); color: var(--text-3); font-size: 13px; }
html[data-look="3"] .cm-page .pk-link { min-height: 36px; font: 600 14px var(--f-body), system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--accent); }
html[data-look="3"] .cm-page .pk-link:hover { color: var(--accent-hover); }
html[data-look="3"] .cm-page .pk-empty { border: 0; border-radius: var(--r); background: rgb(255 255 255 / .03); color: var(--text-2); }
html[data-look="3"] .cm-page .pk-empty__title { color: var(--text); }
html[data-look="3"] .cm-page :is(.pk-banner--good, .pk-banner--warn, .pk-banner--bad) { border-width: 0 0 0 2px; border-radius: var(--r-sm); background: rgb(255 255 255 / .04); }

/* ---- buttons: area classes that app/ui/button.css does not list join the flat system (geometry + colour); 44 px on touch ---- */
html[data-look="3"] body[data-section="manager"] :is(.mcr-btn, .tut-btn, .drd-btn, .cmt-btn, .cmq-btn, .mle-btn, .cmd-btn, .ch-btn, .cmp-btn, .scm-btn) {
  min-height: var(--btn-h-sm, 36px);
  border-radius: var(--btn-radius, 11px);
  box-shadow: none;
  filter: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
html[data-look="3"] body[data-section="manager"] :is(.mcr-btn, .tut-btn--primary, .ch-btn--primary, .cmt-btn--pos):not(:disabled) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
html[data-look="3"] body[data-section="manager"] :is(.mcr-btn, .tut-btn--primary, .ch-btn--primary, .cmt-btn--pos):not(:disabled):hover { background: var(--accent-hover); }
html[data-look="3"] body[data-section="manager"] :is(.mcr-btn--ghost, .tut-btn--ghost, .mle-btn--ghost, .cmt-btn--ghost, .cmp-btn--ghost, .cmq-btn--light, .ch-btn--off) { background: rgb(255 255 255 / .06); color: var(--text); border: 1px solid var(--hair); }
html[data-look="3"] body[data-section="manager"] :is(.tut-btn--danger, .ch-btn--danger) { background: rgb(255 122 122 / .1); color: var(--bad); border: 1px solid rgb(255 122 122 / .4); }
html[data-look="3"] body[data-section="manager"] :is(button, a)[class*="btn"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) {
  html[data-look="3"] body[data-section="manager"] :is(button, a)[class*="btn"]:not([class*="icon"]) { min-height: var(--tap); }
}

/* ---- form fields: one quiet field (hairline, 44 px), accent focus ring ---- */
html[data-look="3"] body[data-section="manager"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  border-color: var(--hair);
  background-color: rgb(255 255 255 / .04);
  color: var(--text);
  box-shadow: none;
}
html[data-look="3"] body[data-section="manager"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select) { min-height: var(--tap); }
html[data-look="3"] body[data-section="manager"] :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* ---- Career Portal (/career/*, app/career/career-hub.css): the tenant colour (--ch-accent, set inline) stays a marker
   (rings, your name, chips); tabs, links and buttons follow Floodlight ---- */
html[data-look="3"] .ch-tabs.career-tabs { border: 0; border-radius: var(--r); box-shadow: inset 0 -1px 0 var(--hair); background: none; padding: 0; gap: 2px; }
html[data-look="3"] .ch-tabs .career-tab { min-height: var(--tap); border-radius: 0; color: var(--text-2); }
html[data-look="3"] .ch-tabs .career-tab:hover { color: var(--text); background: none; }
html[data-look="3"] .ch-tabs .career-tab.is-active { color: var(--text); background: none; box-shadow: inset 0 -2px 0 var(--accent); font-weight: 600; }
html[data-look="3"] .ch-tabs .career-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-look="3"] :is(.ch-panel__head a, .ch-empty__link) { color: var(--accent); }
html[data-look="3"] .ch-panel__head h2 { color: var(--text-2); letter-spacing: .1em; }