/*
 * KFT Matchroom
 * Final-authority visual layer. Keeps page behavior intact while giving the
 * suite a football-analysis identity: floodlights, touchlines and score data.
 */

:root {
  --kft-night: #05070a;
  --kft-stand: #091522;
  --kft-panel: #101f30;
  --kft-floodlight: #f5f7fa;
  --kft-muted: #aab5c2;
  --kft-touchline: #e63946;
  --kft-ball: #f5f7fa;
  --kft-result: #aab5c2;
  --kft-danger: #e63946;
  --kft-match-line: rgba(245, 247, 250, 0.14);
  --kft-match-line-strong: rgba(245, 247, 250, 0.26);
  --kft-display: "Arial Narrow", "Aptos Display", "Roboto Condensed", sans-serif;
  --kft-body: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
  --kft-data: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --kft-match-radius: 14px;
  --kft-match-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  --glass-blur: 0px;
  --glass-saturation: 1;
}

html {
  color-scheme: dark;
  background: var(--kft-night);
  scroll-padding-top: calc(var(--kft-nav-height, 66px) + 20px);
}

html:root {
  background: var(--kft-night) !important;
}

body {
  font-family: var(--kft-body);
  color: var(--kft-floodlight);
  background-color: var(--kft-night) !important;
  background-image: none !important;
  font-feature-settings: "kern" 1, "tnum" 1;
  text-rendering: optimizeLegibility;
}

body::before {
  opacity: 0.16 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  mask-image: linear-gradient(to bottom, #000, transparent 72vh) !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--kft-body);
}

h1,
h2,
h3,
.hero-title,
.section-title,
.hero-slide h3,
.card h3 {
  font-family: var(--kft-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

h1 {
  line-height: 0.96 !important;
}

h2 {
  line-height: 1.02 !important;
}

p,
li,
td,
th,
label {
  text-wrap: pretty;
}

::selection {
  color: #061019;
  background: var(--kft-touchline);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--kft-touchline) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(230, 57, 70, 0.18) !important;
}

/* Navigation: a compact stadium scoreboard rather than a floating glass card. */
.nav,
nav.nav,
body > nav,
body > header nav {
  top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 64px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 0 !important;
  background: rgba(9, 13, 20, 0.92) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
}

.nav::after,
nav.nav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  pointer-events: none;
  background: var(--kft-touchline);
  opacity: 0.72;
}

.nav-logo,
.nav-logo-text,
.brand-name {
  font-family: var(--kft-display) !important;
  letter-spacing: -0.02em !important;
}

.nav a,
.nav button,
body > nav a,
body > nav button {
  font-weight: 700 !important;
}

.nav a.active,
.nav a[aria-current="page"] {
  color: var(--kft-floodlight) !important;
}

.nav a.active::after,
.nav a[aria-current="page"]::after {
  background: var(--kft-touchline) !important;
  box-shadow: none;
}

/* Hero: the thesis is a live analysis board. */
#hero,
.hero-card {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

#hero::before,
.hero-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(5rem, 12vw, 10rem);
  right: -9rem;
  width: clamp(22rem, 42vw, 42rem);
  aspect-ratio: 1.65;
  border: 1px solid rgba(245, 247, 250, 0.13);
  border-right: 0;
  border-radius: 50% 0 0 50%;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(245, 247, 250, 0.09) 50%, transparent 50.2%),
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(230, 57, 70, 0.14) 18.3% 18.7%, transparent 19%);
  opacity: 0.64;
  pointer-events: none;
}

#hero h1,
.hero-card h1 {
  max-width: 14ch;
  color: var(--kft-floodlight) !important;
  font-size: clamp(3rem, 6.2vw, 6.7rem) !important;
}

/* The decorative "FPL ANALYTICS / 26–27" and "KFT / FIELD NOTES" hero kickers were
   removed: they added no information and read as filler above the H1. */

#hero p,
.hero-card > p,
.hero-card .lead {
  max-width: 65ch;
  color: var(--kft-muted) !important;
  font-size: clamp(1rem, 1.3vw, 1.18rem) !important;
  line-height: 1.7 !important;
}

.hero-snapshot,
.hero-carousel,
.hero-slide,
.hero-card {
  border-color: var(--kft-match-line-strong) !important;
  background: var(--kft-panel) !important;
  box-shadow: var(--kft-match-shadow) !important;
}

.hero-slide::before,
.hero-snapshot::before {
  border-color: rgba(245, 247, 250, 0.14) !important;
}


/* Content structure: section rules behave like touchlines. */
body > section:not(#hero),
main > section:not(.hero-card) {
  position: relative;
}

body > section:not(#hero)::before,
main > section:not(.hero-card)::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(16px, calc((100% - 1280px) / 2));
  width: min(84px, 18vw);
  height: 3px;
  background: var(--kft-touchline);
}

section > h2,
.section-head h2,
.section-header h2,
.page-shell h2 {
  color: var(--kft-floodlight) !important;
  font-size: clamp(2rem, 4vw, 4.2rem) !important;
}

.card,
.panel,
.table-wrap,
.chart-wrap,
.control-deck,
.hero-card,
.content-card,
.info-card,
.profile-card,
.planner-card,
.connect-card,
.newsletter-card {
  border: 1px solid var(--kft-match-line) !important;
  border-radius: var(--kft-match-radius) !important;
  background: rgba(17, 26, 39, 0.82) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18) !important;
}

.toolbar,
.controls,
.filter-row,
.segmented,
.control-row {
  border-color: var(--kft-match-line) !important;
  background: rgba(13, 20, 30, 0.88) !important;
}

button,
.btn,
[role="button"],
select,
input,
textarea {
  border-color: var(--kft-match-line-strong) !important;
  border-radius: 9px !important;
}

button,
.btn,
[role="button"] {
  min-height: 42px;
  font-weight: 750 !important;
}

button:hover,
.btn:hover,
[role="button"]:hover {
  border-color: rgba(230, 57, 70, 0.72) !important;
}

.primary,
.btn-primary,
button.primary,
[data-variant="primary"] {
  color: #071018 !important;
  border-color: var(--kft-touchline) !important;
  background: var(--kft-touchline) !important;
}

input,
select,
textarea {
  color: var(--kft-floodlight) !important;
  background: rgba(7, 12, 19, 0.88) !important;
}

input::placeholder,
textarea::placeholder {
  color: #7f8b9b !important;
  opacity: 1;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
.table-head,
.ticker th {
  color: #c8d6e6 !important;
  background: #0d151f !important;
  font-family: var(--kft-data) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase;
}

td,
th {
  border-color: rgba(196, 216, 237, 0.1) !important;
}

tbody tr:hover td {
  background-color: rgba(230, 57, 70, 0.07) !important;
}

.gw,
.gameweek,
.deadline-clock,
.stat-value,
.metric-value,
.price,
.xpts,
[data-deadline] {
  font-family: var(--kft-data) !important;
  font-variant-numeric: tabular-nums;
}

.status,
[role="status"] {
  color: var(--kft-muted);
}

.modal,
.dialog,
[role="dialog"],
[role="alertdialog"] {
  border-color: var(--kft-match-line-strong) !important;
  background: rgba(12, 18, 27, 0.97) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52) !important;
}

footer,
.footer {
  border-top: 1px solid var(--kft-match-line) !important;
  color: var(--kft-muted) !important;
  background: #080c12 !important;
}

footer a,
.footer a {
  color: #d9e3ed !important;
}

@media (max-width: 820px) {
  :root {
    --kft-match-radius: 12px;
  }

  #hero h1,
  .hero-card h1 {
    max-width: 16ch;
    font-size: clamp(2.65rem, 13vw, 4.8rem) !important;
  }

  #hero::before,
  .hero-card::before {
    top: 8rem;
    right: -13rem;
    opacity: 0.48;
  }

  .nav,
  nav.nav,
  body > nav,
  body > header nav {
    min-height: 60px !important;
  }

  button,
  .btn,
  [role="button"] {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  body::before {
    background-size: 32px 32px !important;
  }

  #hero h1::before,
  .hero-card h1::before {
    margin-bottom: 0.75rem;
    font-size: 0.62rem;
  }

  .card,
  .panel,
  .table-wrap,
  .chart-wrap,
  .control-deck,
  .hero-card,
  .content-card,
  .info-card {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid Highlight !important;
  }
}

/* -------------------------------------------------------------------------
   Match strip navigation — final authority over the legacy glass variants.
   ------------------------------------------------------------------------- */

html:root body > nav,
html:root body[class*="kft-page-"] > nav {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  padding: 0 clamp(16px, 2.6vw, 40px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 0 !important;
  background: rgba(8, 13, 20, 0.96) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  overflow: visible !important;
}

html:root body > nav::after,
html:root body[class*="kft-page-"] > nav::after {
  height: 2px !important;
  background: var(--kft-touchline) !important;
  opacity: 0.9 !important;
}

html:root body > nav .nav-brand {
  flex: 0 1 auto;
  min-width: 0;
  gap: 10px !important;
}

html:root body > nav .nav-brand span {
  max-width: 18ch;
  overflow: hidden;
  color: var(--kft-floodlight) !important;
  font-family: var(--kft-display) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:root body > nav .nav-links {
  width: auto !important;
  max-width: calc(100% - 220px) !important;
  margin-left: auto !important;
  gap: 2px !important;
  padding: 0 !important;
}

html:root body > nav .nav-links li {
  padding: 0 !important;
  border: 0 !important;
}

html:root body > nav .nav-links a,
html:root body[class*="kft-page-"] > nav .nav-links a[href] {
  min-height: 36px !important;
  padding: 0 clamp(7px, 0.72vw, 11px) !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #9eabba !important;
  background: transparent !important;
  font-family: var(--kft-body) !important;
  font-size: clamp(0.68rem, 0.78vw, 0.76rem) !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: color 150ms ease, background-color 150ms ease !important;
}

html:root body > nav .nav-links a:is(:hover, :focus-visible) {
  color: var(--kft-floodlight) !important;
  background: rgba(244, 247, 251, 0.07) !important;
}

html:root body > nav .nav-links a.active,
html:root body[class*="kft-page-"] > nav .nav-links a[href].active {
  color: #071018 !important;
  background: var(--kft-touchline) !important;
}

html:root body > nav .nav-links a.active::after {
  display: none !important;
}

html:root body.kft-page-analytics > nav .nav-links li:has(.nav-profile-link),
html:root body.kft-page-profile > nav .nav-links li:has(.nav-alt-link),
html:root body.kft-page-planner > nav .nav-links li:has(.nav-live-link) {
  margin-left: 8px !important;
  padding-left: 9px !important;
  border-left: 1px solid var(--kft-match-line-strong) !important;
}

html:root body > nav .nav-links :is(.nav-live-link, .nav-alt-link, .nav-profile-link, .nav-planner-link) {
  color: #d8e2ed !important;
  background: rgba(244, 247, 251, 0.045) !important;
}

/* -------------------------------------------------------------------------
   Scouting dossier carousel — one surface, no artwork/overlay stack.
   ------------------------------------------------------------------------- */

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-explainer {
  min-height: 390px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-explainer::before,
html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-explainer::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel {
  width: 100% !important;
  min-height: 390px !important;
  overflow: hidden !important;
  border: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 12px !important;
  background: #0d151f !important;
  background-image: none !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel::before {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  top: 28px !important;
  right: auto !important;
  bottom: 28px !important;
  left: 0 !important;
  width: 3px !important;
  height: auto !important;
  background: var(--kft-touchline) !important;
  opacity: 1 !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-track,
html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide {
  height: 390px !important;
  min-height: 390px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-image: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide {
  display: grid !important;
  grid-template-rows: auto auto minmax(5.6rem, auto) auto !important;
  align-content: center !important;
  gap: 14px !important;
  padding: 54px 86px 78px 44px !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide::before,
html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide::after {
  display: none !important;
  content: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide-kicker {
  color: var(--kft-touchline) !important;
  font-family: var(--kft-data) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide h3 {
  max-width: 12ch !important;
  margin: 0 !important;
  color: var(--kft-floodlight) !important;
  font-size: clamp(2.6rem, 4vw, 4.2rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.045em !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide p {
  max-width: 42ch !important;
  margin: 0 !important;
  color: #aebaca !important;
  font-size: 0.95rem !important;
  font-weight: 520 !important;
  line-height: 1.55 !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-top: 2px !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide-meta span {
  padding: 0 10px !important;
  border: 0 !important;
  border-left: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 0 !important;
  color: #cbd6e2 !important;
  background: transparent !important;
  font-family: var(--kft-data) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide-meta span:first-child {
  padding-left: 0 !important;
  border-left: 0 !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-controls {
  right: auto !important;
  bottom: 28px !important;
  left: 44px !important;
  width: auto !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-dots {
  gap: 6px !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-dots button {
  width: 28px !important;
  min-width: 28px !important;
  height: 3px !important;
  min-height: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #344252 !important;
  box-shadow: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-dots button.is-active {
  background: var(--kft-touchline) !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-arrow {
  bottom: 24px !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 8px !important;
  color: var(--kft-floodlight) !important;
  background: #111c29 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-arrow:hover {
  border-color: var(--kft-touchline) !important;
  background: #172535 !important;
  transform: translateY(-1px) !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-arrow-next {
  right: 24px !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-arrow-prev {
  right: 72px !important;
}

/* Planner exposure rows: real names, flexible copy, aligned data. */
html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) max-content !important;
  align-items: start !important;
  gap: 9px !important;
  min-height: 62px;
  padding: 9px 10px !important;
  border-color: var(--kft-match-line) !important;
  border-radius: 7px !important;
  background: #101925 !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-row:is(:hover, :focus-visible) {
  border-color: rgba(230, 57, 70, 0.62) !important;
  background: #142130 !important;
  transform: none !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-main {
  min-width: 0 !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-name {
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: var(--kft-floodlight) !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-sub {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  gap: 2px 6px !important;
  align-items: center !important;
  margin-top: 4px !important;
  font-size: 0.62rem !important;
  line-height: 1.25 !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-sub > span {
  min-width: 0;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-sub > span:last-child {
  white-space: nowrap;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-statbox {
  min-width: 44px;
  padding-top: 1px !important;
}

@media (max-width: 1180px) {
  html:root body > nav,
  html:root body[class*="kft-page-"] > nav {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 0 12px !important;
  }

  html:root body > nav .nav-links,
  html:root body[class*="kft-page-"] > nav .nav-links,
  html:root body[class*="kft-page-"].kft-nav-menu-active > nav .nav-links.active {
    top: 60px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(100dvh - 60px) !important;
    margin: 0 !important;
    padding: 18px !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0b121b !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:root body > nav .nav-links li,
  html:root body.kft-page-analytics > nav .nav-links li:has(.nav-profile-link),
  html:root body.kft-page-profile > nav .nav-links li:has(.nav-alt-link),
  html:root body.kft-page-planner > nav .nav-links li:has(.nav-live-link) {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kft-match-line) !important;
  }

  html:root body > nav .nav-links a,
  html:root body[class*="kft-page-"] > nav .nav-links a[href] {
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 12px !important;
    border-radius: 0 !important;
    font-size: 0.92rem !important;
  }

  html:root body > nav .nav-links :is(.nav-live-link, .nav-alt-link, .nav-profile-link, .nav-planner-link) {
    background: transparent !important;
  }

  html:root body > nav .hamburger {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 0 !important;
    border: 1px solid var(--kft-match-line-strong) !important;
    border-radius: 9px !important;
    background: #101925 !important;
    box-shadow: none !important;
  }

  html:root body > nav .hamburger span {
    position: static !important;
    display: block !important;
    width: 19px !important;
    height: 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: var(--kft-floodlight) !important;
    transform: none !important;
    transform-origin: center !important;
    transition: transform 160ms ease, opacity 160ms ease !important;
  }

  html:root body > nav .hamburger.active {
    gap: 0 !important;
  }

  html:root body > nav .hamburger.active span:nth-child(1) {
    transform: translateY(2px) rotate(45deg) !important;
  }

  html:root body > nav .hamburger.active span:nth-child(2) {
    opacity: 0 !important;
  }

  html:root body > nav .hamburger.active span:nth-child(3) {
    transform: translateY(-2px) rotate(-45deg) !important;
  }

  html:root body > nav .nav-links a.active,
  html:root body[class*="kft-page-"] > nav .nav-links a[href].active {
    color: var(--kft-touchline) !important;
    background: rgba(230, 57, 70, 0.09) !important;
    box-shadow: inset 3px 0 0 var(--kft-touchline) !important;
  }

  html:root body.kft-page-analytics > nav .nav-links li:has(.nav-profile-link),
  html:root body.kft-page-profile > nav .nav-links li:has(.nav-alt-link),
  html:root body.kft-page-planner > nav .nav-links li:has(.nav-live-link) {
    margin-top: 12px !important;
    border-top: 1px solid var(--kft-match-line-strong) !important;
  }
}

@media (max-width: 768px) {
  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-explainer,
  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel,
  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-track,
  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide {
    height: 350px !important;
    min-height: 350px !important;
  }

  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide {
    grid-template-rows: auto auto minmax(6rem, auto) auto !important;
    padding: 44px 24px 70px 30px !important;
  }

  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide h3 {
    font-size: clamp(2.45rem, 12vw, 3.6rem) !important;
  }

  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide p {
    font-size: 0.88rem !important;
  }

  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-controls {
    bottom: 24px !important;
    left: 30px !important;
  }
}

/* ========================================================================== */
/* KFT premium control system — final authority                                */
/* ========================================================================== */

html:root body[class*="kft-page-"] {
  --primary-plan: var(--kft-touchline);
  --secondary-plan: var(--kft-floodlight);
  --bg-paper: var(--kft-panel);
  --bg-white: var(--kft-panel);
  --bg-neutral: var(--kft-stand);
  --text-ink: var(--kft-floodlight);
  --text-muted: var(--kft-muted);
  --border: var(--kft-match-line);
  --glass-bg: var(--kft-panel);
  --glass-border: var(--kft-match-line);
  --shadow-soft: none;
  --shadow-card: none;
  --glow-hover: none;
  color: var(--kft-floodlight);
  background: var(--kft-night);
}

html:root body[class*="kft-page-"]::before {
  display: none !important;
}

html:root body[class*="kft-page-"] :is(
  .live-card,
  .sidebar-card,
  .planner-entry-panel,
  .transfer-panel,
  .control-deck,
  .toolbar,
  .controls,
  .filter-row,
  .segmented,
  .gw-summary-col,
  .modal-content,
  .dialog-content,
  .kft-dock-bar
) {
  border-color: var(--kft-match-line) !important;
  border-radius: 8px !important;
  background: var(--kft-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body[class*="kft-page-"] :is(
  button,
  .btn,
  .kft-btn,
  .plan-btn,
  .kft-dock-item,
  .kft-dl-btn,
  .xgi-page-btn,
  .exposure-page-btn,
  .mkt-page-btn,
  .path-btn,
  .ask-kiba-btn,
  .kft-gw-menu-trigger,
  .planner-manual-btn,
  .planner-autofill-btn,
  .gw-nav-btn,
  .step-btn,
  .planner-dock-action,
  .pcard-action,
  .pcard-float-btn
) {
  border-color: var(--kft-match-line-strong) !important;
  border-radius: 6px !important;
  color: var(--kft-floodlight) !important;
  background-color: var(--kft-stand) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body[class*="kft-page-"] :is(
  button,
  .btn,
  .kft-btn,
  .plan-btn,
  .kft-dock-item,
  .kft-dl-btn,
  .xgi-page-btn,
  .exposure-page-btn,
  .mkt-page-btn,
  .path-btn,
  .ask-kiba-btn,
  .kft-gw-menu-trigger,
  .planner-manual-btn,
  .planner-autofill-btn,
  .gw-nav-btn,
  .step-btn,
  .planner-dock-action,
  .pcard-action,
  .pcard-float-btn
):not(:disabled):hover {
  border-color: var(--kft-floodlight) !important;
  color: var(--kft-floodlight) !important;
  background-color: var(--kft-panel) !important;
  box-shadow: inset 0 -2px 0 var(--kft-touchline) !important;
  transform: translateY(-1px);
}

html:root body[class*="kft-page-"] :is(
  .kft-btn-primary,
  .btn-primary,
  .path-save,
  .ask-kiba-btn,
  .planner-autofill-btn,
  .planner-entry-submit,
  button[type="submit"]
) {
  border-color: var(--kft-touchline) !important;
  color: var(--kft-floodlight) !important;
  background-color: var(--kft-touchline) !important;
}

html:root body[class*="kft-page-"] :is(
  .kft-btn-primary,
  .btn-primary,
  .path-save,
  .ask-kiba-btn,
  .planner-autofill-btn,
  .planner-entry-submit,
  button[type="submit"]
):not(:disabled):hover {
  border-color: var(--kft-floodlight) !important;
  background-color: var(--kft-touchline) !important;
}

html:root body[class*="kft-page-"] :is(button, .btn, .kft-btn):disabled {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

html:root body[class*="kft-page-"] :is(
  button[aria-pressed="true"],
  .xgi-page-btn.active,
  .exposure-page-btn.active,
  .mkt-page-btn.active,
  .gw-nav-btn.active,
  .step-btn.active,
  .kft-dock-item.active
) {
  border-color: var(--kft-touchline) !important;
  color: var(--kft-floodlight) !important;
  background-color: var(--kft-touchline) !important;
  box-shadow: none !important;
}

/* Final authority for the atmospheric feature story and shared ledgers. */
html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 50% !important;
  right: -24px !important;
  width: clamp(230px, 34vw, 430px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  background: url("../KFT_newlogo-192.webp?v=0fa1ae5b") center / contain no-repeat !important;
  opacity: 0.075 !important;
  filter: blur(8px) grayscale(1) !important;
  pointer-events: none !important;
  transform: translate3d(0, -50%, 0) scale(0.98) !important;
  animation: kft-logo-breathe 9s ease-in-out infinite alternate paused !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel.is-in-view::after {
  animation-play-state: running !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-track {
  position: relative !important;
  z-index: 1 !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-feature-links button:not(#kft-chapter-lock):not(#kft-chapter-force):not(#kft-chapter-final):not(#kft-chapter-authority) {
  border: 0 !important;
  border-bottom: 1px solid var(--kft-match-line) !important;
  border-radius: 0 !important;
  color: var(--kft-muted) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html:root body.kft-page-planner .gameweek-intelligence-grid {
  align-items: stretch !important;
}

html:root body.kft-page-planner .intelligence-ledger {
  display: flex !important;
  flex-direction: column !important;
}

html:root body.kft-page-planner .gameweek-intelligence .exposure-list {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
}

html:root body.kft-page-planner .gameweek-intelligence .exposure-pagination {
  margin-top: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html:root body #hero .hero-carousel::after,
  html:root body #hero .hero-slide.is-active > :is(.hero-slide-kicker, h3, p, .hero-slide-meta) {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ========================================================================== */
/* Editorial authority v2 — architectural nav, dossier features and data desks */
/* ========================================================================== */

/* The legacy glass layer gives .is-scrolled a detached inset/capsule geometry.
   Match it explicitly so scrolling only changes density, never architecture. */
html:root body[class*="kft-page-"] > nav:not(#kft-editorial-nav-lock),
html:root body[class*="kft-page-"] > nav.is-scrolled:not(#kft-editorial-nav-lock) {
  inset: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 68px !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 0 clamp(16px, 3vw, 48px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 0 !important;
  background: var(--kft-night) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body[class*="kft-page-"] > nav.is-scrolled:not(#kft-editorial-nav-lock) {
  height: 60px !important;
  min-height: 60px !important;
  background: #091522 !important;
}

html:root body[class*="kft-page-"] > nav::before,
html:root body[class*="kft-page-"] > nav.is-scrolled::before,
html:root body[class*="kft-page-"] > nav::after,
html:root body[class*="kft-page-"] > nav.is-scrolled::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html:root body[class*="kft-page-"] > nav .nav-links a[href]:not(#kft-editorial-link-lock) {
  min-height: 34px !important;
  padding: 0 clamp(7px, 0.75vw, 12px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--kft-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:root body[class*="kft-page-"] > nav .nav-links a[href]:is(:hover, :focus-visible) {
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  box-shadow: inset 0 -1px 0 var(--kft-match-line-strong) !important;
  transform: none !important;
}

html:root body[class*="kft-page-"] > nav .nav-links a[href].active:not(#kft-editorial-link-lock),
html:root body[class*="kft-page-"] > nav .nav-links a[href][aria-current="page"]:not(#kft-editorial-link-lock) {
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--kft-touchline) !important;
}

html:root body[class*="kft-page-"] > nav .nav-links :is(.nav-live-link, .nav-alt-link, .nav-profile-link, .nav-planner-link) {
  background: transparent !important;
}

/* Feature dossier: one editorial composition, not a grid of generic cards. */
html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-content:not(#kft-editorial-feature-lock) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-content > :is(.hero-text, .hero-explainer) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-text {
  max-width: 960px !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-explainer:not(#kft-editorial-feature-lock) {
  display: grid !important;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.6fr) !important;
  gap: 0 !important;
  min-height: 410px !important;
  border-top: 1px solid var(--kft-match-line-strong) !important;
  border-bottom: 1px solid var(--kft-match-line-strong) !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-snapshot:not(#kft-editorial-feature-lock) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  padding: clamp(28px, 4vw, 54px) clamp(22px, 3vw, 42px) !important;
  border: 0 !important;
  border-right: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 0 !important;
  background: var(--kft-night) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-snapshot h2 {
  max-width: 13ch !important;
  font-size: clamp(1.7rem, 2.5vw, 2.8rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-feature-links {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-top: 24px !important;
  border-top: 1px solid var(--kft-match-line) !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-feature-links button:not(#kft-editorial-feature-lock) {
  justify-content: flex-start !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kft-match-line) !important;
  border-radius: 0 !important;
  color: var(--kft-muted) !important;
  background: transparent !important;
  text-align: left !important;
  box-shadow: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-feature-links button:hover {
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  box-shadow: inset 3px 0 0 var(--kft-touchline) !important;
  padding-left: 10px !important;
  transform: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel:not(#kft-editorial-feature-lock) {
  min-height: 410px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--kft-stand) !important;
  box-shadow: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel::before {
  top: 0 !important;
  bottom: auto !important;
  left: clamp(28px, 4vw, 60px) !important;
  width: 54px !important;
  height: 3px !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero :is(.hero-carousel-track, .hero-slide) {
  height: 410px !important;
  min-height: 410px !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide {
  grid-template-rows: auto auto minmax(4.5rem, auto) auto !important;
  padding: 62px clamp(74px, 8vw, 122px) 78px clamp(28px, 4vw, 60px) !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide h3 {
  max-width: 10ch !important;
  font-size: clamp(3.1rem, 5.5vw, 5.8rem) !important;
  line-height: 0.88 !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide::after {
  display: block !important;
  position: absolute !important;
  top: 54px !important;
  right: clamp(24px, 4vw, 56px) !important;
  color: #344252 !important;
  background: none !important;
  font-family: var(--kft-data) !important;
  font-size: clamp(2rem, 4vw, 4.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.06em !important;
  line-height: 1 !important;
}

html:root body #hero .hero-slide:nth-child(1)::after { content: "01" !important; }
html:root body #hero .hero-slide:nth-child(2)::after { content: "02" !important; }
html:root body #hero .hero-slide:nth-child(3)::after { content: "03" !important; }
html:root body #hero .hero-slide:nth-child(4)::after { content: "04" !important; }

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-arrow:not(#kft-editorial-feature-lock) {
  width: 38px !important;
  height: 38px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Professional data desks: flat frames, precise rules and tabular rhythm. */
html:root body[class*="kft-page-"] :is(
  .proj-table-wrap,
  .xgi-table-wrap,
  .bracket-table-wrap,
  .league-table-wrap,
  .compare-summary-wrap,
  .table-wrap,
  #kftTicker .kft-box,
  #plannerTicker .kft-box
):not(#kft-editorial-table-lock) {
  border: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 0 !important;
  background: var(--kft-night) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body[class*="kft-page-"] :is(.proj-table, .projections-table, .kft-table, .league-table, .compare-summary-table) {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

html:root body[class*="kft-page-"] :is(.proj-table, .projections-table, .kft-table, .league-table, .compare-summary-table) thead th:not(#kft-editorial-table-lock) {
  padding-block: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 0 !important;
  color: var(--kft-muted) !important;
  background: var(--kft-stand) !important;
  background-image: none !important;
  font-family: var(--kft-data) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.065em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html:root body[class*="kft-page-"] :is(.proj-table, .projections-table, .kft-table, .league-table, .compare-summary-table) tbody td:not(#kft-editorial-table-lock) {
  padding-block: 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kft-match-line) !important;
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root body[class*="kft-page-"] :is(.proj-table, .projections-table, .kft-table, .league-table, .compare-summary-table) tbody tr:hover td {
  background: var(--kft-stand) !important;
  box-shadow: inset 0 -1px 0 var(--kft-match-line-strong) !important;
}

html:root body[class*="kft-page-"] :is(.proj-table, .projections-table, .kft-table, .league-table, .compare-summary-table) :is(th, td):first-child {
  padding-left: 14px !important;
}

html:root body[class*="kft-page-"] :is(.proj-table, .projections-table, .kft-table, .league-table, .compare-summary-table) :is(th, td):last-child {
  padding-right: 14px !important;
}

html:root body.kft-page-analytics #xga .xgi-row:not(#kft-editorial-table-lock) {
  border: 0 !important;
  border-bottom: 1px solid var(--kft-match-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html:root body.kft-page-analytics #xga .xgi-row:hover:not(#kft-editorial-table-lock) {
  background: var(--kft-stand) !important;
  box-shadow: inset 3px 0 0 var(--kft-touchline) !important;
}

html:root body.kft-page-analytics #projections :is(.proj-edited-label, .proj-pts-edited) {
  color: var(--kft-touchline) !important;
}

html:root body.kft-page-analytics #projections .proj-table td.cell-pts:not(#kft-xpts-color-lock):not(#kft-xpts-color-force):not(#kft-xpts-color-final):not(#kft-xpts-color-authority) {
  color: var(--kft-touchline) !important;
}

html:root body.kft-page-analytics #projections .proj-pts-editable:is(:hover, :focus-visible) {
  color: var(--kft-floodlight) !important;
  background: var(--kft-stand) !important;
  outline-color: var(--kft-touchline) !important;
  box-shadow: inset 0 -2px 0 var(--kft-touchline) !important;
}

@media (max-width: 900px) {
  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-explainer:not(#kft-editorial-feature-lock) {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-snapshot:not(#kft-editorial-feature-lock) {
    border-right: 0 !important;
    border-bottom: 1px solid var(--kft-match-line-strong) !important;
  }
}

@media (max-width: 680px) {
  html:root body[class*="kft-page-"] > nav:not(#kft-editorial-nav-lock),
  html:root body[class*="kft-page-"] > nav.is-scrolled:not(#kft-editorial-nav-lock) {
    height: 58px !important;
    min-height: 58px !important;
    padding-inline: 12px !important;
  }

  html:root body[class*="kft-page-"] > nav .nav-links,
  html:root body[class*="kft-page-"].kft-nav-menu-active > nav .nav-links.active {
    top: 58px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kft-match-line-strong) !important;
    border-radius: 0 !important;
    background: var(--kft-night) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html:root body[class*="kft-page-"] > nav .hamburger:not(#kft-editorial-nav-lock) {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide {
    padding: 46px 24px 72px !important;
  }

  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide h3 {
    font-size: clamp(2.7rem, 15vw, 4.2rem) !important;
  }

  html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide::after {
    top: 20px !important;
    right: 20px !important;
    font-size: 2rem !important;
  }
}

/* ========================================================================== */
/* Feature atmosphere, ticker state and aligned intelligence ledgers           */
/* ========================================================================== */

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 50% !important;
  right: clamp(-42px, -2vw, -18px) !important;
  width: clamp(230px, 34vw, 430px) !important;
  aspect-ratio: 1 !important;
  background: url("../KFT_newlogo-192.webp?v=0fa1ae5b") center / contain no-repeat !important;
  opacity: 0.075 !important;
  filter: blur(8px) grayscale(1) !important;
  pointer-events: none !important;
  transform: translate3d(0, -50%, 0) scale(0.98) !important;
  animation: kft-logo-breathe 9s ease-in-out infinite alternate paused !important;
  will-change: transform, opacity;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel.is-in-view::after {
  animation-play-state: running !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-track {
  position: relative !important;
  z-index: 1 !important;
}

@keyframes kft-logo-breathe {
  from { opacity: 0.055; transform: translate3d(0, -50%, 0) scale(0.98); }
  to { opacity: 0.095; transform: translate3d(-6px, -50%, 0) scale(1.025); }
}

@keyframes kft-feature-copy-in {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide.is-active > :is(.hero-slide-kicker, h3, p, .hero-slide-meta) {
  animation: kft-feature-copy-in 360ms cubic-bezier(.22, 1, .36, 1) both;
}

html:root body #hero .hero-slide.is-active > h3 { animation-delay: 45ms; }
html:root body #hero .hero-slide.is-active > p { animation-delay: 90ms; }
html:root body #hero .hero-slide.is-active > .hero-slide-meta { animation-delay: 135ms; }

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-feature-links {
  counter-reset: kft-feature-index;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-feature-links button:not(#kft-chapter-lock):not(#kft-chapter-force):not(#kft-chapter-final):not(#kft-chapter-authority) {
  counter-increment: kft-feature-index;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kft-match-line) !important;
  border-radius: 0 !important;
  color: var(--kft-muted) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-align: left !important;
  transform: none !important;
}

html:root body #hero .hero-feature-links button::before {
  content: counter(kft-feature-index, decimal-leading-zero);
  color: var(--kft-touchline);
  font-family: var(--kft-data);
  font-size: 0.56rem;
  font-weight: 760;
  letter-spacing: 0.04em;
}

html:root body #hero .hero-feature-links button:hover {
  color: var(--kft-floodlight) !important;
  padding-left: 0 !important;
  box-shadow: inset 2px 0 0 var(--kft-touchline) !important;
}

html:root body[class*="kft-page-"] :is(#kftTicker, #plannerTicker) .ticker-sort-state {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: 10px;
  color: var(--kft-muted);
  font-family: var(--kft-data);
  font-size: 0.58rem;
  font-weight: 720;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

html:root body[class*="kft-page-"] :is(#kftTicker, #plannerTicker) #tcEase[aria-pressed="true"]:not(#kft-ticker-sort-lock):not(#kft-ticker-sort-force):not(#kft-ticker-sort-final):not(#kft-ticker-sort-authority) {
  border-color: var(--kft-touchline) !important;
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--kft-touchline) !important;
}

html:root body.kft-page-planner .gameweek-intelligence-grid {
  align-items: stretch;
}

html:root body.kft-page-planner .intelligence-ledger {
  display: flex;
  flex-direction: column;
}

html:root body.kft-page-planner .gameweek-intelligence .exposure-list {
  display: flex;
  flex: 1;
  flex-direction: column;
}

html:root body.kft-page-planner .gameweek-intelligence .exposure-pagination {
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  html:root body #hero .hero-carousel::after,
  html:root body #hero .hero-slide.is-active > :is(.hero-slide-kicker, h3, p, .hero-slide-meta) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 680px) {
  html:root body[class*="kft-page-"] :is(#kftTicker, #plannerTicker) .ticker-sort-state {
    width: 100%;
    min-width: 0;
    padding-inline: 0;
    white-space: normal;
  }
}

/* ========================================================================== */
/* Gameweek Intelligence — risk/opportunity editorial ledger                  */
/* ========================================================================== */

html:root body.kft-page-planner .gameweek-intelligence {
  position: relative;
  width: 100%;
  min-height: 0 !important;
  margin: 0;
  padding: clamp(22px, 3vw, 38px);
  border: 0;
  border-top: 1px solid var(--kft-match-line-strong);
  color: var(--kft-floodlight);
  background: var(--kft-night);
  background-image: none !important;
  box-shadow: none !important;
}

html:root body.kft-page-planner .gameweek-intelligence-head {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(260px, 0.55fr);
  gap: 28px;
  align-items: end;
  padding-bottom: 18px;
}

html:root body.kft-page-planner .gameweek-intelligence-kicker,
html:root body.kft-page-planner .intelligence-ledger-code {
  display: block;
  color: var(--kft-touchline);
  font-family: var(--kft-data);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

html:root body.kft-page-planner .gameweek-intelligence-head h3 {
  margin: 7px 0 0;
  color: var(--kft-floodlight);
  font-family: var(--kft-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 850;
  letter-spacing: -0.045em;
  line-height: 0.92;
}

html:root body.kft-page-planner .gameweek-intelligence-head p {
  max-width: 46ch;
  margin: 0;
  color: var(--kft-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

html:root body.kft-page-planner .gameweek-intelligence-axis {
  display: grid;
  grid-template-columns: max-content minmax(40px, 1fr) max-content;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--kft-match-line);
  border-bottom: 1px solid var(--kft-match-line);
  color: var(--kft-muted);
  font-family: var(--kft-data);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html:root body.kft-page-planner .gameweek-intelligence-axis i {
  position: relative;
  display: block;
  height: 2px;
  background: var(--kft-touchline);
}

html:root body.kft-page-planner .gameweek-intelligence-axis i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--kft-touchline);
  border-right: 2px solid var(--kft-touchline);
  transform: translateY(-50%) rotate(45deg);
}

html:root body.kft-page-planner .gameweek-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--kft-match-line-strong);
}

html:root body.kft-page-planner .intelligence-ledger {
  min-width: 0;
  padding: 22px 20px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html:root body.kft-page-planner .intelligence-ledger + .intelligence-ledger {
  border-left: 1px solid var(--kft-match-line-strong);
}

html:root body.kft-page-planner .intelligence-ledger-head {
  min-height: 102px;
  padding-bottom: 16px;
}

html:root body.kft-page-planner .intelligence-ledger-head h4 {
  margin: 6px 0 8px;
  color: var(--kft-floodlight);
  font-family: var(--kft-display);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 820;
  letter-spacing: -0.03em;
  line-height: 1;
}

html:root body.kft-page-planner .intelligence-ledger-head p {
  max-width: 60ch;
  margin: 0;
  color: var(--kft-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

html:root body.kft-page-planner .exposure-column-head {
  display: grid;
  grid-template-columns: 24px 32px minmax(0, 1fr) 214px 18px;
  gap: 9px;
  align-items: end;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--kft-match-line-strong);
  color: var(--kft-muted);
  font-family: var(--kft-data);
  font-size: 0.54rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-align: right;
  text-transform: uppercase;
}

html:root body.kft-page-planner .exposure-column-head > span:nth-child(3) {
  text-align: left;
}

html:root body.kft-page-planner .exposure-column-metrics {
  display: grid;
  grid-template-columns: 48px 54px 50px 38px;
  gap: 8px;
  min-width: 0;
}

html:root body.kft-page-planner .gameweek-intelligence .exposure-list {
  display: block;
  min-width: 0;
}

html:root body.kft-page-planner .gameweek-intelligence .loading-wrap {
  min-height: 82px;
  padding: 24px 0 !important;
  color: var(--kft-muted);
  background: transparent !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-row {
  display: grid !important;
  grid-template-columns: 24px 32px minmax(0, 1fr) 214px 18px !important;
  gap: 9px !important;
  align-items: center !important;
  min-height: 98px;
  padding: 10px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kft-match-line) !important;
  border-radius: 0 !important;
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 140ms ease, background-color 140ms ease !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-row:is(:hover, :focus-visible) {
  border-color: var(--kft-match-line) !important;
  background: var(--kft-stand) !important;
  box-shadow: inset 3px 0 0 var(--kft-touchline) !important;
  transform: none !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-rank {
  color: var(--kft-muted);
  font-family: var(--kft-data);
  font-size: 0.62rem;
  font-weight: 750;
  text-align: center;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .pcard-kit {
  width: 30px;
  height: 26px;
  margin: 0;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-main {
  min-width: 0 !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-name {
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: var(--kft-floodlight) !important;
  font-size: 0.8rem !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-sub {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2px 7px !important;
  align-items: center !important;
  margin-top: 5px !important;
  color: var(--kft-muted);
  font-size: 0.62rem !important;
  line-height: 1.25 !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-sub > span + span {
  position: relative;
  padding-left: 7px;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-sub > span + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 2px;
  background: var(--kft-touchline);
  transform: translateY(-50%);
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-metrics {
  display: grid;
  grid-template-columns: 48px 54px 50px 38px;
  gap: 8px;
  align-items: center;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-metric {
  min-width: 0;
  color: var(--kft-muted);
  font-family: var(--kft-data);
  font-size: 0.66rem;
  line-height: 1.2;
  text-align: right;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-metric::before {
  display: none;
  content: attr(data-label);
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-metric strong {
  color: var(--kft-floodlight);
  font-weight: 780;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-signal strong {
  color: var(--kft-touchline);
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-fx,
html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-fx .fixture-pill {
  max-width: none !important;
  overflow: visible !important;
  color: var(--kft-floodlight) !important;
  font-size: 0.6rem !important;
  font-weight: 760 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-action {
  color: var(--kft-touchline);
  font-family: var(--kft-data);
  font-size: 0.9rem;
  text-align: right;
}

html:root body.kft-page-planner .gameweek-intelligence .exposure-pagination {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  padding-top: 12px;
  color: var(--kft-muted);
  background: transparent !important;
  box-shadow: none !important;
}

html:root body.kft-page-planner .gameweek-intelligence .exposure-page-info {
  min-width: 42px;
  font-family: var(--kft-data);
  font-size: 0.62rem;
  text-align: center;
}

@media (max-width: 1180px) {
  html:root body.kft-page-planner .gameweek-intelligence-grid {
    grid-template-columns: 1fr;
  }

  html:root body.kft-page-planner .intelligence-ledger + .intelligence-ledger {
    border-top: 1px solid var(--kft-match-line-strong);
    border-left: 0;
  }

  html:root body.kft-page-planner .intelligence-ledger-head {
    min-height: 0;
  }
}

@media (max-width: 680px) {
  html:root body.kft-page-planner .gameweek-intelligence {
    padding: 22px 12px;
  }

  html:root body.kft-page-planner .gameweek-intelligence-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  html:root body.kft-page-planner .gameweek-intelligence-axis {
    grid-template-columns: max-content minmax(24px, 1fr) max-content;
    gap: 8px;
    font-size: 0.52rem;
  }

  html:root body.kft-page-planner .intelligence-ledger {
    padding: 20px 0 14px;
  }

  html:root body.kft-page-planner .exposure-column-head {
    display: none;
  }

  html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-row {
    grid-template-columns: 22px 30px minmax(0, 1fr) 18px !important;
    gap: 8px !important;
    padding: 11px 5px !important;
  }

  html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-metrics {
    grid-column: 3 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    padding-top: 7px;
    border-top: 1px solid var(--kft-match-line);
  }

  html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-metric {
    text-align: left;
  }

  html:root body.kft-page-planner :is(#punishList, #upsideList) .exposure-metric::before {
    display: block;
    margin-bottom: 3px;
    color: var(--kft-muted);
    font-size: 0.48rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* ========================================================================== */
/* Interactive chrome audit — final palette and material authority             */
/* Legacy layers contain high-specificity glass rules; inert ID guards are     */
/* required here so rendered menus and overlays, not merely source order, win. */
/* ========================================================================== */

html:root body :is(
  .brk-dropdown,
  .proj-gw-menu,
  .ticker-gw-menu,
  .kft-player-edit-menu,
  .pcard-float-menu,
  .card-action-panel,
  .manual-player-picker,
  .modal-card,
  .modal-box,
  .xgi-edit-panel,
  .kft-scenario-modal,
  .kft-toast
):not(#kft-chrome-lock):not(#kft-chrome-force):not(#kft-chrome-final):not(#kft-chrome-authority) {
  border-color: var(--kft-match-line-strong) !important;
  border-radius: 8px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
  background-image: none !important;
  box-shadow: 0 14px 34px rgba(5, 7, 10, 0.44) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body :is(
  .modal-overlay,
  .xgi-edit-overlay,
  .pitch-blur-overlay,
  .kft-dialog-overlay,
  .kft-scenario-overlay,
  .brk-overlay
):not(#kft-overlay-lock):not(#kft-overlay-force):not(#kft-overlay-final):not(#kft-overlay-authority) {
  background: rgba(5, 7, 10, 0.82) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body .brk-overlay:not(#kft-overlay-lock):not(#kft-overlay-force):not(#kft-overlay-final):not(#kft-overlay-authority) {
  background: transparent !important;
}

html:root body[class*="kft-page-"] :is(
  .kft-controls,
  .control-deck,
  .kft-control-deck-panel,
  .graph-toolbar,
  .modal-filters,
  .modal-actions,
  .chips-row,
  .planner-topbar,
  .pitch-action-row,
  .below-pitch-panels,
  .league-controls
):not(#kft-toolbar-lock):not(#kft-toolbar-force):not(#kft-toolbar-final):not(#kft-toolbar-authority) {
  border-color: var(--kft-match-line) !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body[class*="kft-page-"] :is(
  .kft-dock-ctrl-block,
  .kft-dock-ctrl-label
):not(#kft-dockpart-lock):not(#kft-dockpart-force):not(#kft-dockpart-final):not(#kft-dockpart-authority) {
  border-color: transparent !important;
  color: var(--kft-muted) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body.kft-page-planner .manual-planner-toolbar:not(#kft-toolbar-lock):not(#kft-toolbar-force):not(#kft-toolbar-final):not(#kft-toolbar-authority) {
  border-color: var(--kft-match-line) !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body :is(
  .brk-dropdown button,
  .brk-dropdown label,
  .proj-gw-menu-item,
  .ticker-gw-menu > button,
  .kft-player-edit-menu button,
  .pcard-float-btn,
  .card-action-panel button
):not(#kft-menuitem-lock):not(#kft-menuitem-force):not(#kft-menuitem-final):not(#kft-menuitem-authority) {
  border-color: transparent !important;
  border-radius: 4px !important;
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body :is(
  .brk-dropdown button,
  .brk-dropdown label,
  .proj-gw-menu-item,
  .ticker-gw-menu > button,
  .kft-player-edit-menu button,
  .pcard-float-btn,
  .card-action-panel button
):not(#kft-menuitem-lock):not(#kft-menuitem-force):not(#kft-menuitem-final):not(#kft-menuitem-authority):hover {
  border-color: transparent !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-stand) !important;
  box-shadow: inset 3px 0 0 var(--kft-touchline) !important;
  transform: none !important;
}

html:root body :is(
  .proj-gw-menu-label,
  .ticker-gw-menu-title,
  .modal-head,
  .modal-top,
  .kft-scenario-modal > header,
  .kft-scenario-modal > footer
) {
  border-color: var(--kft-match-line) !important;
  color: var(--kft-muted) !important;
  background: var(--kft-stand) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body[class*="kft-page-"] :is(
  .chip-badge,
  .kft-chip,
  .chip,
  .chip-mini,
  .status-chip,
  .gw-summary-chip,
  .meta-pill,
  .captain-pill,
  .fixture-chip,
  .gw-chip
):not(#kft-chip-lock):not(#kft-chip-force):not(#kft-chip-final):not(#kft-chip-authority) {
  border-color: var(--kft-match-line-strong) !important;
  border-radius: 5px !important;
  color: var(--kft-muted) !important;
  background: var(--kft-stand) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html:root body[class*="kft-page-"] :is(
  .chip-badge.chip-active,
  .kft-chip.active,
  .chip.active,
  .chip-toggle[aria-pressed="true"],
  .status-chip.active,
  .gw-summary-chip.active,
  .meta-pill.active
):not(#kft-chip-lock):not(#kft-chip-force):not(#kft-chip-final):not(#kft-chip-authority) {
  border-color: var(--kft-touchline) !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-touchline) !important;
}

html:root body :is(.xgi-tooltip, .kft-tooltip, [role="tooltip"]) {
  border-color: var(--kft-match-line-strong) !important;
  border-radius: 4px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
  background-image: none !important;
  box-shadow: 0 10px 24px rgba(5, 7, 10, 0.38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body :is(.market-pagination, .exposure-pagination, .xgi-pagination, .league-pagination) {
  border-color: var(--kft-match-line) !important;
  color: var(--kft-muted) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body :is(
  .entry-modal-body,
  .modal-note,
  .status-chip,
  .shell-pill,
  .league-pagination
):not(#kft-profilechrome-lock):not(#kft-profilechrome-force):not(#kft-profilechrome-final):not(#kft-profilechrome-authority) {
  border-color: var(--kft-match-line) !important;
  border-radius: 6px !important;
  color: var(--kft-muted) !important;
  background: var(--kft-stand) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body .entry-modal-body:not(#kft-profilechrome-lock):not(#kft-profilechrome-force):not(#kft-profilechrome-final):not(#kft-profilechrome-authority) {
  border-radius: 8px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
}

html:root body .league-pagination:not(#kft-profilechrome-lock):not(#kft-profilechrome-force):not(#kft-profilechrome-final):not(#kft-profilechrome-authority) {
  background: transparent !important;
}

html:root body :is(.proj-gw-menu-item-danger, .ticker-gw-menu-danger, .fbtn-red) {
  color: var(--kft-touchline) !important;
}

html:root body :is(.proj-gw-menu-item-danger, .ticker-gw-menu-danger, .fbtn-red):hover {
  color: var(--kft-floodlight) !important;
  background: var(--kft-touchline) !important;
  box-shadow: none !important;
}

html:root body :is(.cl-modalContent .cl-card, .cl-modalContent .cl-cardBox, .cl-modalContent .cl-rootBox) {
  border-color: var(--kft-match-line-strong) !important;
  border-radius: 8px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body .cl-modalBackdrop {
  background: rgba(5, 7, 10, 0.82) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body.kft-page-analytics :is(.cell-pts, .proj-pts-editable, .proj-xpts-medal, .proj-xpts-rank-1, .proj-xpts-rank-2, .proj-xpts-rank-3):not(#kft-dataaccent-lock):not(#kft-dataaccent-force):not(#kft-dataaccent-final):not(#kft-dataaccent-authority) {
  color: var(--kft-touchline) !important;
}

html:root body.kft-page-analytics :is(.cell-pts, .proj-pts-editable, .proj-xpts-medal, .proj-xpts-rank-1, .proj-xpts-rank-2, .proj-xpts-rank-3):not(#kft-dataaccent-lock):not(#kft-dataaccent-force):not(#kft-dataaccent-final):not(#kft-dataaccent-authority)::before,
html:root body.kft-page-analytics :is(.cell-pts, .proj-pts-editable, .proj-xpts-medal, .proj-xpts-rank-1, .proj-xpts-rank-2, .proj-xpts-rank-3):not(#kft-dataaccent-lock):not(#kft-dataaccent-force):not(#kft-dataaccent-final):not(#kft-dataaccent-authority)::after {
  border-color: var(--kft-touchline) !important;
  background: var(--kft-touchline) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-dots button::after {
  background: var(--kft-match-line-strong) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-dots button.is-active::after {
  background: var(--kft-touchline) !important;
}

html:root body > nav a::after,
html:root body[class*="kft-page-"] > nav a::after {
  background: var(--kft-touchline) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root body :is(
  .live-card,
  .transfer-panel,
  .paths-section,
  .sidebar-card,
  .kft-controls,
  .kft-box,
  .newsletter-card,
  .origin-card,
  .dashboard-card,
  .graph-shell,
  .insight-card,
  .panel-shell,
  .compare-summary
)::before {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

html:root body .notice {
  border-color: var(--kft-touchline) !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

@media (max-width: 680px) {
  html:root body[class*="kft-page-"] .kft-controls .kft-hint,
  html:root body[class*="kft-page-"] .kft-controls .kft-status {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

html:root body[class*="kft-page-"] :is(
  button.active,
  button.is-active,
  button.selected,
  button[aria-pressed="true"],
  button[aria-selected="true"],
  .kft-dock-item.active,
  .xgi-page-btn.active,
  .exposure-page-btn.active,
  .mkt-page-btn.active
):not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) {
  border-color: var(--kft-touchline) !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-touchline) !important;
  box-shadow: none !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-dots button:not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) {
  border-radius: 0 !important;
  background: var(--kft-match-line-strong) !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-dots button.is-active:not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) {
  background: var(--kft-touchline) !important;
}

html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-slide-meta span::before {
  background: var(--kft-touchline) !important;
  box-shadow: none !important;
}

html:root body.kft-page-dashboard main {
  border: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 8px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body.kft-page-dashboard :is(.success-mark, .verify-spinner) {
  border-color: var(--kft-touchline) !important;
  color: var(--kft-touchline) !important;
  background: var(--kft-stand) !important;
  box-shadow: none !important;
}

html:root body.kft-page-dashboard :is(.progress-track, .progress-bar) {
  background-image: none !important;
  box-shadow: none !important;
}

html:root body.kft-page-dashboard .progress-track {
  background-color: var(--kft-stand) !important;
}

html:root body.kft-page-dashboard .progress-bar {
  background-color: var(--kft-touchline) !important;
}

html:root body:not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) {
  color: var(--kft-floodlight) !important;
  background: var(--kft-night) !important;
  background-color: var(--kft-night) !important;
  background-image: none !important;
}

html:root body:not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) .section-title::after {
  width: 84px !important;
  height: 2px !important;
  background: var(--kft-touchline) !important;
  background-image: none !important;
}

html:root body:not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) > nav {
  background: var(--kft-night) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body[class*="kft-page-"] :is(
  input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  select,
  textarea
):not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) {
  border-color: var(--kft-match-line-strong) !important;
  border-radius: 6px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-night) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body.kft-page-planner :is(.planner-entry-method, .planner-entry-panel):not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) {
  border-color: var(--kft-match-line) !important;
  border-radius: 8px !important;
  background: var(--kft-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body .kft-dialog:not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) {
  height: auto !important;
  min-height: 0 !important;
  max-height: min(82dvh, 620px) !important;
  padding: 18px !important;
  border: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 8px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
  background-image: none !important;
  box-shadow: 0 18px 48px rgba(5, 7, 10, 0.48) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body .kft-dialog > footer {
  border-color: var(--kft-match-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body .kft-dialog-mark {
  border-radius: 0 !important;
  background: var(--kft-touchline) !important;
  box-shadow: none !important;
}

html:root body :is(a, button, input, select, textarea, [tabindex]):not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority):focus-visible {
  outline: 3px solid var(--kft-touchline) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

html:root body[class*="kft-page-"] :is(
  .market-row,
  .manual-player-row,
  .manual-picked-row,
  .exposure-row,
  .transfer-item,
  .player-row
) {
  border-color: var(--kft-match-line) !important;
  border-radius: 6px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body[class*="kft-page-"] :is(
  .market-row,
  .manual-player-row,
  .manual-picked-row,
  .exposure-row,
  .transfer-item,
  .player-row
):hover {
  border-color: var(--kft-touchline) !important;
  background: var(--kft-stand) !important;
  box-shadow: inset 3px 0 0 var(--kft-touchline) !important;
  transform: none !important;
}

html:root body.kft-page-planner :is(.pcard, .pcard-blank) {
  border-radius: 6px !important;
  box-shadow: none !important;
}

html:root body.kft-page-planner :is(.pcard:hover, .pcard.selected, .pcard.in-pcard, .pcard.sub-source, .pcard.sub-target) {
  filter: none !important;
  box-shadow: inset 0 -2px 0 var(--kft-touchline) !important;
}

html:root body.kft-page-planner .pcard-blur-overlay {
  background: rgba(5, 7, 10, 0.72) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body.kft-page-planner .pcard-float-menu {
  border-color: var(--kft-match-line-strong) !important;
  border-radius: 6px !important;
  background: var(--kft-panel) !important;
  box-shadow: 0 12px 32px rgba(5, 7, 10, 0.42) !important;
}

html:root body[class*="kft-page-"] :is(.proj-player-cell, .xgi-player-cell) {
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root body[class*="kft-page-"] :is(.proj-player-cell, .xgi-player-cell):hover {
  color: var(--kft-touchline) !important;
  box-shadow: none !important;
  transform: none !important;
}

html:root body[class*="kft-page-"] .hero-carousel-arrow span {
  border-color: var(--kft-touchline) !important;
}

html:root body[class*="kft-page-"] .hero-carousel-dot.active {
  border-color: var(--kft-touchline) !important;
  background: var(--kft-touchline) !important;
  box-shadow: none !important;
}

html:root body[class*="kft-page-"] :is(.hero-kicker, .section-kicker, .eyebrow) {
  color: var(--kft-touchline) !important;
}

html:root body[class*="kft-page-"] :is(input, select, textarea) {
  border-color: var(--kft-match-line-strong) !important;
  border-radius: 6px !important;
  color: var(--kft-floodlight) !important;
  background-color: var(--kft-night) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root body[class*="kft-page-"] :is(input, select, textarea):focus {
  border-color: var(--kft-touchline) !important;
  outline: 2px solid rgba(230, 57, 70, 0.3) !important;
  outline-offset: 1px !important;
}

/* Legacy glass used deliberate ID specificity. These inert guards establish
   this loaded-last layer as the control authority without changing markup. */
html:root body[class*="kft-page-"] :is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a.kft-btn,
  a.plan-btn,
  a.control-btn,
  a.compare-btn,
  a.path-btn
):not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) {
  border-color: var(--kft-match-line-strong) !important;
  border-radius: 6px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-stand) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body[class*="kft-page-"] :is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a.kft-btn,
  a.plan-btn,
  a.control-btn,
  a.compare-btn,
  a.path-btn
):not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority):not(:disabled):hover {
  border-color: var(--kft-floodlight) !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-panel) !important;
  box-shadow: inset 0 -2px 0 var(--kft-touchline) !important;
  transform: translateY(-1px);
}

html:root body[class*="kft-page-"] :is(
  .kft-btn-primary,
  .btn-primary,
  .path-save,
  .ask-kiba-btn,
  .planner-autofill-btn,
  .planner-entry-submit,
  button[type="submit"]
):not(#kft-matchroom-lock):not(#kft-matchroom-force):not(#kft-matchroom-final):not(#kft-matchroom-authority) {
  border-color: var(--kft-touchline) !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-touchline) !important;
  box-shadow: none !important;
}

/* KFT feature and intelligence final loaded-last lock. */
html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 50% !important;
  right: -24px !important;
  width: clamp(230px, 34vw, 430px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  background: url("../KFT_newlogo-192.webp?v=0fa1ae5b") center / contain no-repeat !important;
  opacity: 0.075 !important;
  filter: blur(8px) grayscale(1) !important;
  pointer-events: none !important;
  transform: translate3d(0, -50%, 0) scale(0.98) !important;
  animation: kft-logo-breathe 9s ease-in-out infinite alternate paused !important;
}
html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel.is-in-view::after { animation-play-state: running !important; }
html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-carousel-track { position: relative !important; z-index: 1 !important; }
html:root body.kft-page-planner .gameweek-intelligence-grid { align-items: stretch !important; }
html:root body.kft-page-planner .intelligence-ledger { display: flex !important; flex-direction: column !important; }
html:root body.kft-page-planner .gameweek-intelligence .exposure-list { display: flex !important; flex: 1 !important; flex-direction: column !important; }
html:root body.kft-page-planner .gameweek-intelligence .exposure-pagination { margin-top: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html:root body #hero .hero-carousel::after,
  html:root body #hero .hero-slide.is-active > :is(.hero-slide-kicker, h3, p, .hero-slide-meta) { animation: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   KFT watermark — one blurred logo layer behind table and panel surfaces.
   Applied via a single ::before per container (not per row) so scrolling cost
   is unchanged. Content is lifted above it with a stacking context rather than
   z-index on every child, so sticky headers and sticky first columns keep
   working. Opacity is deliberately low (0.05 light / 0.07 dark, blur 3px):
   at higher values the FDR colour cells and tabular numbers lost contrast.
   ========================================================================== */
.kft-watermark { position: relative; isolation: isolate; }
/* The layer must sit ABOVE the container's own background-color but BELOW its
   content, so it is painted at z-index 0 and the direct children are lifted to 1.
   Never apply .kft-watermark to an element that relies on its own positioning
   (the hero slides are absolutely positioned by the carousel — the carousel
   container carries the watermark instead). */
.kft-watermark > * { position: relative; z-index: 1; }
.kft-watermark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../KFT_newlogo-192.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(52%, 300px) auto;
  filter: blur(3px);
  opacity: 0.14;
}
/* Dark theme carries the mark slightly stronger: it sits behind near-black
   surfaces, so the same alpha reads fainter than it does on the light theme.
   These were 0.05 and 0.07, which no reader could see through a table row. */
html[data-theme="dark"] .kft-watermark::before { opacity: 0.2; }
@media (max-width: 768px) {
  .kft-watermark::before { background-size: min(64%, 200px) auto; }
}

/* Download controls use the shared red signal token. The button derives its
   border, fill, hover and dark-theme colours from --kft-accent, so remapping
   that single variable recolours every state without duplicating rules.
   --signal-red is already theme-aware on each page (light #E04F5F / dark #FF7C7C). */
.kft-dl-btn { --kft-accent: var(--signal-red, #E04F5F); }
.kft-dl-btn:focus-visible {
  outline: 2px solid var(--signal-red, #E04F5F);
  outline-offset: 2px;
}

/* Row surfaces inside a watermarked container are made translucent so the mark
   reads through them. Scoped to .kft-watermark so identical rows elsewhere are
   untouched, and expressed as an alpha reduction of the existing colour via
   color-mix, so hue and theme behaviour are unchanged. Hover states keep their
   own opaque treatment for feedback. */
/* These need ID-level specificity to beat the per-page row treatments, which use
   selectors like `body.kft-page-analytics #xga .xgi-row`. Still namespaced to
   .kft-watermark, so rows outside a watermarked container are untouched. */
html body .kft-watermark #xgiBody .xgi-row,
html body .kft-watermark #brkBody .brk-row {
  background-color: transparent !important;
  background-image: none !important;
}
/* The rows are keyboard activatable, so they carry role="button", which opts
   them into the button surface treatments in the glass and matchroom layers.
   Those repaint the row opaque with --kft-stand and cover the mark. Matching the
   attribute takes the row back. The fill keeps the same hue at reduced alpha so
   the row still reads as a row and the text contrast is unchanged. */
/* The :not(#...) chain is not decoration. The row surface is claimed by the
   late "clear glass" passes in this file and in the glass layer, which buy
   specificity the same way, and a plain selector loses to them however many
   !important flags it carries. Four hooks put this rule above them. */
html:root body:not(#kft-wm-lock):not(#kft-wm-force):not(#kft-wm-final):not(#kft-wm-authority) .kft-watermark #xgiBody .xgi-row[role="button"],
html:root body:not(#kft-wm-lock):not(#kft-wm-force):not(#kft-wm-final):not(#kft-wm-authority) .kft-watermark #brkBody .brk-row[role="button"] {
  background-color: rgba(9, 21, 34, 0.34) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root body:not(#kft-wm-lock):not(#kft-wm-force):not(#kft-wm-final):not(#kft-wm-authority) .kft-watermark #xgiBody .xgi-row[role="button"]:hover,
html:root body:not(#kft-wm-lock):not(#kft-wm-force):not(#kft-wm-final):not(#kft-wm-authority) .kft-watermark #xgiBody .xgi-row[role="button"]:focus-visible,
html:root body:not(#kft-wm-lock):not(#kft-wm-force):not(#kft-wm-final):not(#kft-wm-authority) .kft-watermark #brkBody .brk-row[role="button"]:hover,
html:root body:not(#kft-wm-lock):not(#kft-wm-force):not(#kft-wm-final):not(#kft-wm-authority) .kft-watermark #brkBody .brk-row[role="button"]:focus-visible {
  background-color: rgba(20, 38, 58, 0.96) !important;
}
html body .kft-watermark .proj-table tbody td,
html body .kft-watermark .kft-table tbody td,
html body .kft-watermark .kft-compare-table tbody td,
html body .kft-watermark .league-table tbody td {
  background-color: transparent !important;
}


/* ==========================================================================
   Hero feature tiles: off the navy panel, onto the KFT palette.
   --kft-panel is #101f30, a navy. Against a near-black page the hero carousel
   and its slides read as generic blue cards. The slides themselves are already
   transparent and borderless in this layer, so the surface a reader actually
   sees is the carousel container behind them. It moves to a neutral dark fill
   with the club-red touchline as the identifying edge, which is the accent the
   slide kickers and the download controls already use.

   Appended at the end of the file deliberately: the hero rules earlier in this
   stylesheet carry the same specificity, so source order is what decides.
   Text colours are untouched, so contrast is unchanged.
   ========================================================================== */
/* The carousel this recoloured is gone, replaced by the gameweek board, and the
   3px side stripe it carried was itself one of the flagged tells. The board is
   a flat data surface with no card chrome, so only the snapshot rule remains. */
html:root body[class*="kft-page-"] #hero .hero-snapshot:not(#kft-hero-tile-lock),
html:root body:is(.kft-page-analytics, .kft-page-profile, .kft-page-planner) #hero .hero-snapshot:not(#kft-hero-tile-lock) {
  border-color: rgba(245, 247, 250, 0.14) !important;
  background-image: none !important;
  background-color: #0b0d11 !important;
}

/* Homepage explainer disclosure. Its state is set before paint in index.html,
   then persisted after the reader explicitly opens or closes it. */
html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle {
  grid-column: 1 / -1 !important;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: var(--kft-floodlight, var(--text-ink));
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
html:root body.kft-page-analytics #hero .hero-explainer-toggle-icon {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transition: transform 360ms ease;
}
html:root[data-kft-explainer="open"] body.kft-page-analytics #hero .hero-explainer-toggle-icon {
  transform: rotate(180deg);
}
html:root body.kft-page-analytics #hero #heroExplainer:not(#kft-explainer-overflow-lock) {
  max-height: 3200px !important;
  opacity: 1;
  transform: translateY(0);
  transform-origin: top;
  overflow: hidden !important;
  transition: max-height 520ms cubic-bezier(.22,.8,.24,1), opacity 260ms ease, transform 420ms ease, margin 420ms ease !important;
}
html:root[data-kft-explainer="collapsed"] body.kft-page-analytics #hero #heroExplainer:not(#kft-explainer-overflow-lock) {
  min-height: 0 !important;
  max-height: 0 !important;
  margin-top: -28px !important;
  margin-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  opacity: 0;
  transform: translateY(-10px);
  overflow: hidden !important;
  pointer-events: none;
}
@media (max-width: 768px) {
  html:root body.kft-page-analytics #hero .hero-content {
    gap: 16px !important;
  }
  html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle {
    min-height: 36px;
    font-size: 12px;
  }
  html:root[data-kft-explainer="collapsed"] body.kft-page-analytics #hero #heroExplainer:not(#kft-explainer-overflow-lock) {
    margin-top: -16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root body.kft-page-analytics #hero #heroExplainer:not(#kft-explainer-overflow-lock),
  html:root body.kft-page-analytics #hero .hero-explainer-toggle-icon {
    transition: none !important;
  }
}

/* Analytics now uses the same KFT red throughout. The legacy variable name is
   retained for compatibility, but it no longer resolves to orange. */
html:root body.kft-page-analytics {
  --primary-orange: var(--kft-touchline) !important;
  --signal-red: var(--kft-touchline) !important;
  --kft-accent: var(--kft-touchline) !important;
}

/* Landing-page hero: concise promise, obvious product routes and proof points. */
html:root body.kft-page-analytics #hero .hero-text:not(#kft-landing-lock) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: clamp(28px, 5vw, 68px) 0 clamp(22px, 4vw, 48px) !important;
  overflow: visible;
}
html:root body.kft-page-analytics #hero .hero-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 24px !important;
  color: var(--kft-muted) !important;
  font-family: var(--kft-data);
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
html:root body.kft-page-analytics #hero .hero-kicker span:first-child {
  color: var(--kft-floodlight);
}
html:root body.kft-page-analytics #hero .hero-kicker span:first-child::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--kft-touchline);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--kft-touchline) 16%, transparent);
}
html:root body.kft-page-analytics #hero .hero-text h1 {
  max-width: 18ch !important;
  text-wrap: balance;
}
html:root body.kft-page-analytics #hero .hero-text h1::after {
  content: "";
  display: block;
  width: clamp(72px, 10vw, 132px);
  height: 5px;
  margin-top: 25px;
  background: var(--kft-touchline);
}
html:root body.kft-page-analytics #hero .hero-text .hero-lead {
  max-width: 72ch !important;
  margin-top: 25px !important;
  margin-bottom: 0 !important;
  color: color-mix(in srgb, var(--kft-floodlight) 76%, transparent) !important;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem) !important;
}
html:root body.kft-page-analytics #hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
html:root body.kft-page-analytics #hero .hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--kft-match-line-strong);
  color: var(--kft-floodlight) !important;
  background: rgba(245,247,250,.035);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease !important;
}
html:root body.kft-page-analytics #hero .hero-action span {
  transition: transform 180ms ease;
}
html:root body.kft-page-analytics #hero .hero-action:is(:hover,:focus-visible) {
  border-color: var(--kft-touchline);
  background: color-mix(in srgb, var(--kft-touchline) 9%, transparent);
  transform: translateY(-2px);
}
html:root body.kft-page-analytics #hero .hero-action:is(:hover,:focus-visible) span { transform: translateX(3px); }
html:root body.kft-page-analytics #hero .hero-action-primary {
  border-color: var(--kft-touchline);
  background: var(--kft-touchline);
  color: #fff !important;
}
html:root body.kft-page-analytics #hero .hero-action-primary:is(:hover,:focus-visible) {
  background: color-mix(in srgb, var(--kft-touchline) 86%, #000);
}
html:root body.kft-page-analytics #hero .hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 22px 0 0;
  padding: 0;
  color: var(--kft-muted);
  list-style: none;
  font-size: 12px;
  font-weight: 700;
}
html:root body.kft-page-analytics #hero .hero-proof li::before {
  content: "✓";
  margin-right: 8px;
  color: var(--kft-touchline);
  font-weight: 900;
}

/* The explainer trigger is a real disclosure rail, not an underlined text link. */
html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle:not(#kft-toggle-lock) {
  position: relative;
  isolation: isolate;
  justify-self: stretch;
  justify-content: space-between;
  width: 100%;
  min-height: 76px;
  padding: 14px 18px 14px 22px;
  overflow: hidden;
  border: 1px solid var(--kft-match-line-strong);
  border-radius: 12px;
  color: var(--kft-floodlight);
  background: linear-gradient(110deg, color-mix(in srgb, var(--kft-stand) 92%, #000), color-mix(in srgb, var(--kft-touchline) 8%, var(--kft-night)));
  box-shadow: inset 3px 0 0 var(--kft-touchline), 0 12px 30px rgba(0,0,0,.16);
  text-align: left;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease !important;
}
html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--kft-touchline) 14%, transparent) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform 650ms cubic-bezier(.16,1,.3,1);
}
html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle:is(:hover,:focus-visible) {
  border-color: color-mix(in srgb, var(--kft-touchline) 70%, var(--kft-match-line-strong));
  box-shadow: inset 3px 0 0 var(--kft-touchline), 0 16px 36px rgba(0,0,0,.24);
  transform: translateY(-2px);
}
html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle:is(:hover,:focus-visible)::before { transform: translateX(110%); }
html:root body.kft-page-analytics #hero .hero-explainer-toggle-copy {
  display: grid;
  gap: 3px;
}
html:root body.kft-page-analytics #hero .hero-explainer-toggle-copy small {
  color: var(--kft-touchline);
  font-family: var(--kft-data);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
html:root body.kft-page-analytics #hero .hero-explainer-toggle-copy strong {
  color: var(--kft-floodlight);
  font-size: 14px;
  line-height: 1.25;
}
html:root body.kft-page-analytics #hero .hero-explainer-toggle-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--kft-touchline) 58%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--kft-touchline) 12%, transparent);
  transform: none !important;
  transition: background 220ms ease, transform 520ms cubic-bezier(.16,1,.3,1) !important;
}
html:root body.kft-page-analytics #hero .hero-explainer-toggle-icon > span {
  position: relative;
  width: 14px;
  height: 2px;
  background: var(--kft-floodlight);
  transform: rotate(90deg);
  transition: transform 520ms cubic-bezier(.16,1,.3,1);
}
html:root body.kft-page-analytics #hero .hero-explainer-toggle-icon > span::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--kft-floodlight);
  border-right: 2px solid var(--kft-floodlight);
  transform: rotate(45deg);
}
html:root body.kft-page-analytics #hero .hero-explainer-toggle.is-open .hero-explainer-toggle-icon > span { transform: rotate(-90deg); }
html:root body.kft-page-analytics #hero .hero-explainer-toggle:is(:hover,:focus-visible) .hero-explainer-toggle-icon { background: var(--kft-touchline); }
html:root body.kft-page-analytics #hero #heroExplainer:not(#kft-explainer-overflow-lock) { transition: none !important; }

/* Active location is always marked by a visible KFT-red underline. */
html:root body.kft-page-analytics > nav .nav-links a.nav-link.active::after,
html:root body.kft-page-analytics > nav .nav-links a.nav-link[aria-current="location"]::after {
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 0 !important;
  left: 8px !important;
  display: block !important;
  height: 2px !important;
  background: var(--kft-touchline) !important;
}

/* Robust, legible gameweek navigation shared by all projection maps. */
html:root body.kft-page-analytics [data-scatter] .xgi-gw-btn {
  display: inline-grid !important;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0 !important;
  border: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 8px !important;
  color: var(--kft-floodlight) !important;
  background: rgba(245,247,250,.035) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
html:root body.kft-page-analytics [data-scatter] .xgi-gw-btn:not(:disabled):is(:hover,:focus-visible) {
  border-color: var(--kft-touchline) !important;
  background: color-mix(in srgb, var(--kft-touchline) 14%, transparent) !important;
  transform: translateY(-1px);
}
html:root body.kft-page-analytics [data-scatter] .xgi-gw-btn:disabled {
  opacity: .3 !important;
}
html:root body.kft-page-analytics [data-scatter] .kft-scatter-wrap {
  min-height: 980px;
}

@media (max-width: 768px) {
  html:root body.kft-page-analytics #hero .hero-text:not(#kft-landing-lock) { padding-top: 22px !important; }
  html:root body.kft-page-analytics #hero .hero-kicker { margin-bottom: 18px !important; }
  html:root body.kft-page-analytics #hero .hero-text h1::after { margin-top: 18px; height: 4px; }
  html:root body.kft-page-analytics #hero .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  html:root body.kft-page-analytics #hero .hero-action { width: 100%; }
  html:root body.kft-page-analytics #hero .hero-proof { display: grid; gap: 7px; }
  html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle:not(#kft-toggle-lock) {
    min-height: 68px;
    padding: 11px 13px 11px 17px;
  }
  html:root body.kft-page-analytics #hero .hero-explainer-toggle-icon { width: 38px; height: 38px; flex-basis: 38px; }
  html:root body.kft-page-analytics [data-scatter] .kft-scatter-wrap { min-height: 940px; }
}

/* Final disclosure control: a compact product action, not another content card. */
html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle:not(#kft-toggle-lock) {
  justify-self: start;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 9px 0 17px;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--kft-touchline) 72%, var(--kft-match-line-strong)) !important;
  border-radius: 999px !important;
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-align: center;
}
html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle::before { display: none; }
html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle > strong {
  color: inherit;
  font-family: var(--kft-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}
html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle:is(:hover,:focus-visible) {
  border-color: var(--kft-touchline) !important;
  background: color-mix(in srgb, var(--kft-touchline) 10%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kft-touchline) 12%, transparent) !important;
  transform: translateY(-1px);
}
html:root body.kft-page-analytics #hero .hero-explainer-toggle-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--kft-touchline);
  transform: none !important;
}
html:root body.kft-page-analytics #hero .hero-explainer-toggle-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms cubic-bezier(.16,1,.3,1);
}
html:root body.kft-page-analytics #hero .hero-explainer-toggle.is-open .hero-explainer-toggle-icon svg { transform: rotate(180deg); }

/* Player comparison keeps the shared watermark visible through every layer. */
html:root body.kft-page-analytics #comparePanel.kft-compare-panel {
  background: transparent !important;
}
html:root body.kft-page-analytics #comparePanel::before {
  filter: blur(10px);
  opacity: .14;
}
html:root body.kft-page-analytics #comparePanel :is(
  .kft-compare-head,
  .kft-compare-picker,
  .kft-compare-picker-controls,
  .kft-compare-graph-wrap,
  .kft-compare-table-wrap,
  .kft-compare-table,
  .kft-compare-table th,
  .kft-compare-table td
) {
  background: transparent !important;
}

/* Fixed vector chevrons do not depend on a font's arrow glyph. */
html:root body.kft-page-analytics [data-scatter] .xgi-gw-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* One alignment contract for every player name + shirt pairing. */
html:root body.kft-page-analytics .xgi-kit-wrap {
  display: inline-grid !important;
  place-items: center;
  align-self: center;
  width: 32px !important;
  min-width: 32px;
  height: 28px;
  line-height: 0;
  flex: 0 0 32px;
}
html:root body.kft-page-analytics .xgi-kit-wrap svg {
  display: block !important;
  width: 28px !important;
  height: 24px !important;
  margin: 0 !important;
}
html:root body.kft-page-analytics :is(.xgi-player-cell,.brk-player-cell,.proj-player-copy,.hero-board-name) {
  align-self: center;
  justify-content: center;
  min-width: 0;
  line-height: 1.2;
}
html:root body.kft-page-analytics .proj-player-cell {
  align-items: center !important;
  width: 100%;
  min-height: 36px;
  padding-block: 2px;
  text-align: left;
}
html:root body.kft-page-analytics .kft-compare-kit {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 20px;
  margin-right: 7px;
  line-height: 0;
  vertical-align: middle;
}
html:root body.kft-page-analytics .kft-compare-kit svg {
  display: block;
  width: 18px;
  height: 16px;
  margin: 0;
}

/* ========================================================================== */
/* Transparent KFT menu system + Profile/Planner matchroom refresh             */
/* ========================================================================== */

/* Every application-owned popup found in the interface audit uses one material.
   Native select option sheets remain platform-owned, but the select controls
   themselves use the same transparent matchroom treatment below. */
html:root body[class*="kft-page-"] {
  --kft-glass-surface: rgba(7, 12, 18, .58);
  --kft-glass-surface-soft: rgba(7, 12, 18, .36);
  --kft-glass-blur: blur(18px) saturate(.92);
}

html:root body :is(
  .brk-dropdown,
  .proj-gw-menu,
  .ticker-gw-menu,
  .kft-player-edit-menu,
  .pcard-float-menu,
  .card-action-panel,
  .manual-player-picker,
  .kft-compare-picker,
  .modal-card,
  .modal-box,
  .kfts-modal-box,
  .kfts-dd,
  .xgi-edit-panel,
  .kft-scenario-modal,
  .kft-dialog,
  .kft-toast,
  .kft-fdr-duration-panel
):not(#kft-transparent-menu-lock) {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 10px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-glass-surface) !important;
  background-image: none !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38) !important;
  backdrop-filter: var(--kft-glass-blur) !important;
  -webkit-backdrop-filter: var(--kft-glass-blur) !important;
}

html:root body :is(.modal-card, .modal-box, .kfts-modal-box, .xgi-edit-panel, .kft-scenario-modal, .kft-dialog, .kft-toast):not(#kft-staticglass-lock) {
  position: relative;
}

html:root body :is(
  .brk-dropdown,
  .proj-gw-menu,
  .ticker-gw-menu,
  .kft-player-edit-menu,
  .pcard-float-menu,
  .card-action-panel,
  .manual-player-picker,
  .kft-compare-picker,
  .modal-card,
  .modal-box,
  .kfts-modal-box,
  .kfts-dd,
  .xgi-edit-panel,
  .kft-scenario-modal,
  .kft-dialog,
  .kft-toast,
  .kft-fdr-duration-panel
):not(#kft-transparent-menu-lock)::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  pointer-events: none;
  background: url("../KFT_newlogo-192.webp") center / min(58%, 230px) auto no-repeat;
  filter: blur(11px);
  opacity: .15;
  transform: scale(1.04);
}

html:root body :is(
  .brk-dropdown,
  .proj-gw-menu,
  .ticker-gw-menu,
  .kft-player-edit-menu,
  .pcard-float-menu,
  .card-action-panel,
  .manual-player-picker,
  .kft-compare-picker,
  .modal-card,
  .modal-box,
  .kfts-modal-box,
  .kfts-dd,
  .xgi-edit-panel,
  .kft-scenario-modal,
  .kft-dialog,
  .kft-toast,
  .kft-fdr-duration-panel
):not(#kft-transparent-menu-lock) > * {
  position: relative;
  z-index: 1;
}

/* Headers, list rows and form wells must not paint an opaque slab over the mark. */
html:root body :is(
  .brk-dropdown,
  .proj-gw-menu,
  .ticker-gw-menu,
  .kft-player-edit-menu,
  .pcard-float-menu,
  .card-action-panel,
  .manual-player-picker,
  .kft-compare-picker,
  .modal-card,
  .modal-box,
  .kfts-modal-box,
  .kfts-dd,
  .xgi-edit-panel,
  .kft-scenario-modal,
  .kft-dialog,
  .kft-fdr-duration-panel
) :is(.modal-head, .modal-top, header, footer, .modal-body, .modal-filters, .cap-panel-head, .cap-panel-body, .pdash-kit-wrap, .kft-compare-picker-controls) {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:root body :is(.modal-overlay, .xgi-edit-overlay, .pitch-blur-overlay, .kft-dialog-overlay, .kft-scenario-overlay) {
  background: rgba(2, 5, 8, .62) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html:root body[class*="kft-page-"] :is(
  .brk-dropdown,
  .proj-gw-menu,
  .ticker-gw-menu,
  .kft-player-edit-menu,
  .pcard-float-menu,
  .card-action-panel,
  .manual-player-picker,
  .kft-compare-picker,
  .modal-card,
  .modal-box,
  .kfts-modal-box,
  .kfts-dd,
  .xgi-edit-panel,
  .kft-scenario-modal,
  .kft-dialog,
  .kft-fdr-duration-panel
) :is(input, select, textarea) {
  background: rgba(5, 7, 10, .46) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Profile and Planner now share Analytics' red matchroom identity and flat,
   editorial surface rhythm. No data or interaction selectors are changed. */
html:root body:is(.kft-page-profile, .kft-page-planner) {
  --primary-profile: var(--kft-touchline) !important;
  --primary-plan: var(--kft-touchline) !important;
  --secondary-plan: var(--kft-floodlight) !important;
  --signal-red: var(--kft-touchline) !important;
  --kft-accent: var(--kft-touchline) !important;
}

html:root body:is(.kft-page-profile, .kft-page-planner) :is(
  .dashboard-card,
  .insight-card,
  .graph-shell,
  .panel-shell,
  .compare-summary,
  .live-card,
  .sidebar-card,
  .planner-entry-panel,
  .planner-entry-method,
  .transfer-panel,
  .paths-section,
  .manual-builder-summary,
  .gameweek-intelligence,
  .intelligence-ledger
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--kft-match-line-strong) !important;
  border-radius: 8px !important;
  color: var(--kft-floodlight) !important;
  background: var(--kft-glass-surface-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) saturate(.9) !important;
  -webkit-backdrop-filter: blur(12px) saturate(.9) !important;
}

html:root body.kft-page-profile :is(.entry-modal-body, .modal-note):not(#kft-profileglass-lock):not(#kft-profileglass-force):not(#kft-profileglass-final):not(#kft-profileglass-authority) {
  border-color: var(--kft-match-line) !important;
  color: var(--kft-muted) !important;
  background: rgba(5, 7, 10, .22) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html:root body :is(.cl-modalContent .cl-card, .cl-modalContent .cl-cardBox, .cl-modalContent .cl-rootBox):not(#kft-authglass-lock):not(#kft-authglass-force):not(#kft-authglass-final):not(#kft-authglass-authority) {
  border-color: var(--kft-match-line-strong) !important;
  background: var(--kft-glass-surface) !important;
  background-image: url("../KFT_newlogo-192.webp") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: min(50%, 210px) auto !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38) !important;
  backdrop-filter: var(--kft-glass-blur) !important;
  -webkit-backdrop-filter: var(--kft-glass-blur) !important;
}

@media (max-width: 768px) {
  html:root body:is(.kft-page-profile, .kft-page-planner) :is(button, .kft-btn, .control-btn, input, select):not(#kft-mobiletap-lock):not(#kft-mobiletap-force):not(#kft-mobiletap-final):not(#kft-mobiletap-authority) {
    min-height: 44px !important;
  }
  html:root body.kft-page-planner .planner-entry-actions:not(#kft-mobileentry-lock):not(#kft-mobileentry-force):not(#kft-mobileentry-final):not(#kft-mobileentry-authority) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  html:root body.kft-page-planner :is(
    .planner-entry-method,
    .planner-entry-input-row,
    .planner-entry-input-row .gw-select-wrap,
    .planner-entry-input-row input,
    .planner-entry-input-row button,
    .planner-entry-method > button
  ):not(#kft-mobileentrypart-lock):not(#kft-mobileentrypart-force):not(#kft-mobileentrypart-final):not(#kft-mobileentrypart-authority) {
    width: 100% !important;
    max-width: none !important;
  }
  html:root body.kft-page-planner .planner-entry-method-manual:not(#kft-mobilemethod-lock):not(#kft-mobilemethod-force):not(#kft-mobilemethod-final):not(#kft-mobilemethod-authority) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html:root body:is(.kft-page-profile, .kft-page-planner) :is(
  .dashboard-card,
  .insight-card,
  .graph-shell,
  .panel-shell,
  .compare-summary,
  .live-card,
  .sidebar-card,
  .planner-entry-panel,
  .transfer-panel,
  .paths-section,
  .gameweek-intelligence,
  .intelligence-ledger
)::before {
  content: "" !important;
  position: absolute;
  inset: -28px;
  z-index: -1;
  pointer-events: none;
  background: url("../KFT_newlogo-192.webp") center / min(48%, 280px) auto no-repeat !important;
  filter: blur(12px);
  opacity: .085 !important;
  transform: scale(1.04);
}

html:root body:is(.kft-page-profile, .kft-page-planner) :is(
  .dashboard-card,
  .insight-card,
  .graph-shell,
  .panel-shell,
  .compare-summary,
  .live-card,
  .sidebar-card,
  .planner-entry-panel,
  .transfer-panel,
  .paths-section,
  .gameweek-intelligence,
  .intelligence-ledger
) > * {
  position: relative;
  z-index: 1;
}

html:root body.kft-page-profile :is(.dashboard-card, .insight-card) {
  min-height: 132px;
  padding: 17px 18px !important;
  border-top: 2px solid var(--kft-touchline) !important;
}
html:root body.kft-page-profile :is(.dashboard-card h3, .insight-card h4, .shell-title, .compare-summary-head) {
  font-family: var(--kft-data) !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}
html:root body.kft-page-profile .dashboard-value {
  color: var(--kft-floodlight) !important;
  font-variant-numeric: tabular-nums lining-nums;
}
html:root body.kft-page-profile :is(.shell-head, .compare-summary-head) {
  border-bottom: 1px solid var(--kft-match-line-strong) !important;
  background: rgba(5, 7, 10, .34) !important;
}

html:root body.kft-page-planner :is(.live-card-head, .planner-topbar, .chips-row, .paths-head, .transfer-head-row, .sidebar-card-title) {
  border-color: var(--kft-match-line-strong) !important;
  background: rgba(5, 7, 10, .34) !important;
  box-shadow: none !important;
}
html:root body.kft-page-planner :is(.gw-summary-col.current-gw, .pcard.selected, .planner-entry-method:focus-within) {
  border-color: var(--kft-touchline) !important;
  box-shadow: inset 0 -2px 0 var(--kft-touchline) !important;
}

@media (max-width: 768px) {
  html:root body :is(.modal-card, .modal-box, .kfts-modal-box, .xgi-edit-panel, .kft-scenario-modal, .kft-dialog) {
    width: min(100% - 20px, 620px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 12px !important;
  }
  html:root body :is(.brk-dropdown, .proj-gw-menu, .ticker-gw-menu, .kft-player-edit-menu, .kfts-dd) {
    max-width: calc(100vw - 20px) !important;
  }
  html:root body:is(.kft-page-profile, .kft-page-planner) :is(button, .kft-btn, .control-btn, input, select) {
    min-height: 44px;
  }
  html:root body.kft-page-profile :is(.dashboard-card, .insight-card) {
    min-height: 0;
    padding: 15px !important;
  }
  html:root body.kft-page-planner :is(.planner-entry-actions, .planner-entry-input-row, .manual-builder-filters) {
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  html:root body.kft-page-planner :is(.planner-entry-method, .planner-entry-input-row, .planner-entry-input-row .gw-select-wrap, .planner-entry-input-row input, .planner-entry-input-row button) {
    width: 100% !important;
    max-width: none !important;
  }
}
html:root body.kft-page-analytics .kft-compare-chip {
  align-items: center;
  line-height: 1.2;
}
html:root body.kft-page-analytics .kft-player-with-kit {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  line-height: 1.25;
  text-align: left;
}
html:root body.kft-page-analytics .kft-player-with-kit > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
html:root body.kft-page-analytics .kft-player-with-kit .kft-compare-swatch {
  display: inline-block;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
}

@media (max-width: 600px) {
  html:root body.kft-page-analytics :is(.xgi-chart-head,.xgi-row) {
    grid-template-columns: 32px minmax(0,1fr) minmax(76px,1fr) 44px !important;
    gap: 7px !important;
  }
  html:root body.kft-page-analytics :is(.brk-chart-head,.brk-row) {
    grid-template-columns: 32px minmax(96px,1fr) minmax(124px,1.1fr) 52px !important;
  }
  html:root body.kft-page-analytics .hero-board-player { align-items: center; }
  html:root body.kft-page-analytics .hero-board-player > svg { align-self: center; }
  html:root body.kft-page-analytics .kft-compare-chip { min-height: 38px; }
  html:root body.kft-page-analytics #hero .hero-content > .hero-explainer-toggle:not(#kft-toggle-lock) {
    width: auto;
    min-height: 44px;
    padding: 0 8px 0 15px;
  }
}

/* Specificity guard: late generic button rules use several ID-bearing :not()
   hooks. Keep this one purposeful control authoritative over that base layer. */
html:root body.kft-page-analytics #hero #heroExplainerToggle:not(#kft-toggle-lock):not(#kft-toggle-force):not(#kft-toggle-authority) {
  border: 1px solid var(--kft-touchline) !important;
  border-radius: 999px !important;
  color: var(--kft-floodlight) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root body.kft-page-analytics #hero #heroExplainerToggle:not(#kft-toggle-lock):not(#kft-toggle-force):not(#kft-toggle-authority):is(:hover,:focus-visible) {
  border-color: var(--kft-touchline) !important;
  background-color: color-mix(in srgb, var(--kft-touchline) 10%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kft-touchline) 12%, transparent) !important;
}

/* Profile and Planner use the same persistent disclosure interaction as the
   Analytics guide; the old rotating feature tiles are intentionally gone. */
html:root body:is(.kft-page-profile, .kft-page-planner) #hero .page-explainer-toggle:not(#kft-pageguide-lock):not(#kft-pageguide-force):not(#kft-pageguide-final):not(#kft-pageguide-authority) {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  min-height: 46px;
  padding: 0 9px 0 17px;
  border: 1px solid var(--kft-touchline) !important;
  border-radius: 999px !important;
  color: var(--kft-floodlight) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
html:root body:is(.kft-page-profile, .kft-page-planner) #hero .page-explainer-toggle:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--kft-touchline) 10%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kft-touchline) 12%, transparent) !important;
}
html:root body:is(.kft-page-profile, .kft-page-planner) #hero .page-explainer-toggle .hero-explainer-toggle-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kft-touchline);
}
html:root body:is(.kft-page-profile, .kft-page-planner) #hero .page-explainer-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
}
html:root body:is(.kft-page-profile, .kft-page-planner) #hero .page-explainer-toggle:not(.is-open) svg {
  transform: rotate(-90deg);
}
html:root body:is(.kft-page-profile, .kft-page-planner) #hero .page-explainer:not(#kft-pagepanel-lock):not(#kft-pagepanel-force):not(#kft-pagepanel-final):not(#kft-pagepanel-authority) {
  width: 100%;
  max-height: 900px !important;
  margin: 0 !important;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden !important;
  transition: max-height 520ms cubic-bezier(.22, .8, .24, 1), opacity 260ms ease, transform 420ms ease !important;
}
html:root body:is(.kft-page-profile, .kft-page-planner) #hero .page-explainer.is-collapsed:not(#kft-pagepanel-lock):not(#kft-pagepanel-force):not(#kft-pagepanel-final):not(#kft-pagepanel-authority) {
  min-height: 0 !important;
  max-height: 0 !important;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* Control decks inherit the page instead of painting the old light-blue slab.
   Borders keep each tool readable without reintroducing another card layer. */
html:root body.kft-page-analytics :is(
  #xga, #projections, #xgiScatterSection, #defconScatterSection,
  #customMapsSection, #brackets, #ticker
) :is(.kft-dock-bar, .kft-controls, .control-deck, .kft-control-deck-panel, .graph-toolbar):not(#kft-cleardeck-lock):not(#kft-cleardeck-force):not(#kft-cleardeck-final):not(#kft-cleardeck-authority) {
  border-color: var(--kft-match-line-strong) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:root body.kft-page-planner :is(
  .planner-topbar, .planner-gw-dock, .chips-row.kft-dock-bar,
  .manual-planner-toolbar, .below-pitch-panels, .league-controls,
  #plannerTicker .kft-controls, #plannerTicker .kft-dock-bar
):not(#kft-clearplanner-lock):not(#kft-clearplanner-force):not(#kft-clearplanner-final):not(#kft-clearplanner-authority) {
  border-color: var(--kft-match-line-strong) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:root body.kft-page-profile :is(.status-bar, .status-chip, .graph-toolbar, .league-controls):not(#kft-clearprofile-lock):not(#kft-clearprofile-force):not(#kft-clearprofile-final):not(#kft-clearprofile-authority) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  html:root body:is(.kft-page-profile, .kft-page-planner) #hero .page-explainer-toggle:not(#kft-pageguide-lock):not(#kft-pageguide-force):not(#kft-pageguide-final):not(#kft-pageguide-authority) {
    min-height: 44px !important;
    padding-left: 15px;
  }
  html:root body:is(.kft-page-profile, .kft-page-planner) #hero .page-explainer:not(#kft-pagepanel-lock):not(#kft-pagepanel-force):not(#kft-pagepanel-final):not(#kft-pagepanel-authority) {
    max-height: 1100px !important;
  }
  html:root body:is(.kft-page-profile, .kft-page-planner) #hero .page-explainer.is-collapsed:not(#kft-pagepanel-lock):not(#kft-pagepanel-force):not(#kft-pagepanel-final):not(#kft-pagepanel-authority) {
    max-height: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root body:is(.kft-page-profile, .kft-page-planner) #hero :is(.page-explainer, .page-explainer-toggle svg) {
    transition: none !important;
  }
}

/* Late specificity authority for legacy layers that carry ID-bearing guards. */
html:root body :is(
  .brk-dropdown, .proj-gw-menu, .ticker-gw-menu, .kft-player-edit-menu,
  .pcard-float-menu, .card-action-panel, .manual-player-picker,
  .kft-compare-picker, .modal-card, .modal-box, .kfts-modal-box, .kfts-dd,
  .xgi-edit-panel, .kft-scenario-modal, .kft-dialog, .kft-toast,
  .kft-fdr-duration-panel
):not(#kft-glass-lock):not(#kft-glass-force):not(#kft-glass-final):not(#kft-glass-authority) {
  background: var(--kft-glass-surface) !important;
  background-image: none !important;
  backdrop-filter: var(--kft-glass-blur) !important;
  -webkit-backdrop-filter: var(--kft-glass-blur) !important;
}

html:root body :is(
  .brk-dropdown, .proj-gw-menu, .ticker-gw-menu, .kft-player-edit-menu,
  .pcard-float-menu, .card-action-panel, .manual-player-picker,
  .kft-compare-picker, .modal-card, .modal-box, .kfts-modal-box, .kfts-dd,
  .xgi-edit-panel, .kft-scenario-modal, .kft-dialog, .kft-fdr-duration-panel
) :is(.modal-head, .modal-top, header, footer, .modal-body, .modal-filters, .cap-panel-head, .cap-panel-body, .pdash-kit-wrap, .kft-compare-picker-controls)
:not(#kft-glasspart-lock):not(#kft-glasspart-force):not(#kft-glasspart-final):not(#kft-glasspart-authority) {
  background: transparent !important;
  background-image: none !important;
}

html:root body:is(.kft-page-profile, .kft-page-planner) :is(
  .dashboard-card, .insight-card, .graph-shell, .panel-shell, .compare-summary,
  .live-card, .sidebar-card, .planner-entry-panel, .planner-entry-method,
  .transfer-panel, .paths-section, .manual-builder-summary,
  .gameweek-intelligence, .intelligence-ledger
):not(#kft-surface-lock):not(#kft-surface-force):not(#kft-surface-final):not(#kft-surface-authority) {
  border-color: var(--kft-match-line-strong) !important;
  background: var(--kft-glass-surface-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) saturate(.9) !important;
  -webkit-backdrop-filter: blur(12px) saturate(.9) !important;
}