/*
 * KG Channel Intelligence OS V11.1 R6 — KG Editorial Neutral
 *
 * Presentation-only correction loaded after V11.1 Executive Graphite.
 * The operating flow, routes, data, permissions, APIs and integrations stay
 * unchanged. Visual direction: editorial black/white/grey with a restrained
 * vermilion signal for current state and key emphasis.
 */

html[data-kg-theme="light"] {
  --kge-canvas: #f6f6f4;
  --kge-canvas-top: #ffffff;
  --kge-sidebar: #fbfbfa;
  --kge-surface: #ffffff;
  --kge-surface-alt: #f3f3f1;
  --kge-surface-strong: #e9e9e6;
  --kge-surface-hover: #eeeeeb;
  --kge-line: #e1e1dd;
  --kge-line-strong: #c9c9c4;
  --kge-ink: #0b0b0c;
  --kge-ink-soft: #3f3f42;
  --kge-muted: #737376;
  --kge-faint: #9c9c9f;
  --kge-primary: #101011;
  --kge-primary-hover: #2a2a2c;
  --kge-primary-strong: #050506;
  --kge-primary-text: #ffffff;
  --kge-signal: #d83a24;
  --kge-signal-hover: #bd2f1c;
  --kge-signal-soft: rgba(216, 58, 36, 0.075);
  --kge-selection: rgba(12, 12, 13, 0.065);
  --kge-selection-soft: rgba(12, 12, 13, 0.035);
  --kge-success: #147a5a;
  --kge-success-soft: rgba(20, 122, 90, 0.08);
  --kge-warning: #a96813;
  --kge-warning-soft: rgba(169, 104, 19, 0.09);
  --kge-danger: #bd3545;
  --kge-danger-soft: rgba(189, 53, 69, 0.085);
  --kge-shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.035),
    0 10px 30px rgba(10, 10, 11, 0.04);
  --kge-shadow-md: 0 2px 4px rgba(10, 10, 11, 0.04),
    0 22px 54px rgba(10, 10, 11, 0.07);
  --kge-button-shadow: 0 8px 20px rgba(10, 10, 11, 0.14);
  --kge-focus: rgba(241, 60, 38, 0.22);
}

html[data-kg-theme="dark"] {
  --kge-canvas: #070708;
  --kge-canvas-top: #0a0a0b;
  --kge-sidebar: #09090a;
  --kge-surface: #111113;
  --kge-surface-alt: #171719;
  --kge-surface-strong: #202023;
  --kge-surface-hover: #242427;
  --kge-line: #29292c;
  --kge-line-strong: #414145;
  --kge-ink: #f5f5f3;
  --kge-ink-soft: #cdcdca;
  --kge-muted: #9a9a9e;
  --kge-faint: #747478;
  --kge-primary: #f2f2ef;
  --kge-primary-hover: #ffffff;
  --kge-primary-strong: #d6d6d2;
  --kge-primary-text: #0a0a0b;
  --kge-signal: #ff5238;
  --kge-signal-hover: #ff6a52;
  --kge-signal-soft: rgba(255, 82, 56, 0.11);
  --kge-selection: rgba(255, 255, 255, 0.09);
  --kge-selection-soft: rgba(255, 255, 255, 0.045);
  --kge-success: #43c89d;
  --kge-success-soft: rgba(67, 200, 157, 0.1);
  --kge-warning: #e5ad55;
  --kge-warning-soft: rgba(229, 173, 85, 0.11);
  --kge-danger: #ef7182;
  --kge-danger-soft: rgba(239, 113, 130, 0.11);
  --kge-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 12px 34px rgba(0, 0, 0, 0.18);
  --kge-shadow-md: 0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 24px 60px rgba(0, 0, 0, 0.32);
  --kge-button-shadow: 0 9px 24px rgba(0, 0, 0, 0.28);
  --kge-focus: rgba(255, 82, 56, 0.26);
}

/* Neutralise the older cobalt token bridge without changing component logic. */
html[data-kg-theme] {
  --kgx-canvas: var(--kge-canvas);
  --kgx-canvas-top: var(--kge-canvas-top);
  --kgx-sidebar-bg: var(--kge-sidebar);
  --kgx-surface-0: var(--kge-canvas);
  --kgx-surface-1: var(--kge-surface);
  --kgx-surface-2: var(--kge-surface-alt);
  --kgx-surface-3: var(--kge-surface-strong);
  --kgx-surface-hover: var(--kge-surface-hover);
  --kgx-surface-selected: var(--kge-selection);
  --kgx-line: var(--kge-line);
  --kgx-line-strong: var(--kge-line-strong);
  --kgx-line-bright: var(--kge-line-strong);
  --kgx-text: var(--kge-ink);
  --kgx-text-soft: var(--kge-ink-soft);
  --kgx-muted: var(--kge-muted);
  --kgx-faint: var(--kge-faint);
  --kgx-accent: var(--kge-primary);
  --kgx-accent-hover: var(--kge-primary-hover);
  --kgx-accent-strong: var(--kge-primary-strong);
  --kgx-accent-soft: var(--kge-selection);
  --kgx-accent-softer: var(--kge-selection-soft);
  --kgx-success: var(--kge-success);
  --kgx-success-soft: var(--kge-success-soft);
  --kgx-warning: var(--kge-warning);
  --kgx-warning-soft: var(--kge-warning-soft);
  --kgx-danger: var(--kge-danger);
  --kgx-danger-soft: var(--kge-danger-soft);
  --kgx-shadow-sm: var(--kge-shadow-sm);
  --kgx-shadow-md: var(--kge-shadow-md);
  --kgx-shadow-lg: var(--kge-shadow-md);
  --kgx-focus: 0 0 0 3px var(--kge-focus);
  --kg9-canvas: var(--kge-canvas);
  --kg9-canvas-top: var(--kge-canvas-top);
  --kg9-sidebar: var(--kge-sidebar);
  --kg9-surface: var(--kge-surface);
  --kg9-surface-raised: var(--kge-surface-alt);
  --kg9-surface-high: var(--kge-surface-strong);
  --kg9-surface-soft: var(--kge-surface-alt);
  --kg9-surface-hover: var(--kge-surface-hover);
  --kg9-surface-selected: var(--kge-selection);
  --kg9-line: var(--kge-line);
  --kg9-line-strong: var(--kge-line-strong);
  --kg9-text: var(--kge-ink);
  --kg9-text-soft: var(--kge-ink-soft);
  --kg9-muted: var(--kge-muted);
  --kg9-faint: var(--kge-faint);
  --kg9-champagne-pale: var(--kge-primary-hover);
  --kg9-champagne: var(--kge-primary);
  --kg9-champagne-mid: var(--kge-primary-strong);
  --kg9-champagne-deep: var(--kge-primary-strong);
  --kg9-accent-label: var(--kge-ink);
  --kg9-success: var(--kge-success);
  --kg9-danger: var(--kge-danger);
  --kg9-shadow: var(--kge-shadow-sm);
  --kg9-shadow-high: var(--kge-shadow-md);
  --kgmono-primary: var(--kge-primary);
  --kgmono-primary-hover: var(--kge-primary-hover);
  --kgmono-primary-text: var(--kge-primary-text);
  --kgmono-selection: var(--kge-selection-soft);
  --kgmono-selection-strong: var(--kge-selection);
  --kg7-selected-gradient: linear-gradient(
    120deg,
    var(--kge-selection),
    var(--kge-selection-soft) 66%,
    transparent
  );
  --kg5-accent: var(--kge-primary);
  --kg5-accent-hover: var(--kge-primary-hover);
  --kg5-accent-text: var(--kge-primary-text);
  --ink: var(--kge-ink);
  --muted: var(--kge-muted);
  --line: var(--kge-line);
  --soft: var(--kge-surface-alt);
  --white: var(--kge-surface);
}

html[data-kg-theme] body {
  color: var(--kge-ink) !important;
  background: linear-gradient(
      180deg,
      var(--kge-canvas-top) 0,
      var(--kge-canvas) 360px
    )
    fixed !important;
}

html[data-kg-theme] body::before,
html[data-kg-theme] .mainContent::before {
  display: none !important;
}

html[data-kg-theme] ::selection {
  color: #ffffff;
  background: var(--kge-signal);
}

html[data-kg-theme] :focus-visible {
  outline-color: var(--kge-signal) !important;
}

/* Editorial frame and identity */
html[data-kg-theme] .mainContent {
  padding-top: clamp(28px, 2.7vw, 44px) !important;
}

html[data-kg-theme] .sidebar {
  border-right-color: var(--kge-line) !important;
  background: var(--kge-sidebar) !important;
  box-shadow: 10px 0 36px rgba(0, 0, 0, 0.035) !important;
}

html[data-kg-theme="dark"] .sidebar {
  box-shadow: 10px 0 36px rgba(0, 0, 0, 0.2) !important;
}

html[data-kg-theme] .brand::after {
  background: linear-gradient(
    90deg,
    var(--kge-signal) 0 42px,
    var(--kge-line) 42px 100%
  ) !important;
  opacity: 1 !important;
}

html[data-kg-theme] .brandMark,
html[data-kg-theme="light"] .brandMark {
  border-color: var(--kge-line-strong) !important;
  background: linear-gradient(145deg, #202023, #060607 72%) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.26),
    inset 0 1px rgba(255, 255, 255, 0.12) !important;
}

html[data-kg-theme] .sidebar nav a.active,
html[data-kg-theme] .sidebarNavButton.active {
  color: var(--kge-ink) !important;
  border-color: var(--kge-line) !important;
  background: var(--kge-surface-alt) !important;
  box-shadow: inset 3px 0 var(--kge-signal) !important;
}

html[data-kg-theme] .sidebar nav a.active::after,
html[data-kg-theme] .sidebarNavButton.active::after {
  background: var(--kge-signal) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .avatar {
  color: var(--kge-primary-text) !important;
  background: var(--kge-primary) !important;
  box-shadow: none !important;
}

/* Cleaner page hierarchy inspired by editorial information sites. */
html[data-kg-theme] .pageHeader,
html[data-kg-theme] .v11PageHeader {
  min-height: 132px;
  border-color: var(--kge-line) !important;
  border-radius: 18px !important;
  background: var(--kge-surface) !important;
  box-shadow: var(--kge-shadow-sm) !important;
}

html[data-kg-theme] .pageHeader::before,
html[data-kg-theme] .v11PageHeader::before {
  height: 2px !important;
  background: linear-gradient(
    90deg,
    var(--kge-signal) 0 84px,
    var(--kge-line) 84px 100%
  ) !important;
  opacity: 1 !important;
}

html[data-kg-theme] .pageHeader::after {
  display: none !important;
}

html[data-kg-theme] .pageHeader h1,
html[data-kg-theme] .v11PageHeader h1 {
  color: var(--kge-ink) !important;
  font-family:
    "Arial Narrow",
    "Roboto Condensed",
    Inter,
    "Segoe UI",
    sans-serif !important;
  font-weight: 820 !important;
  letter-spacing: -0.04em !important;
}

html[data-kg-theme] :where(.eyebrow, .sectionEyebrow, .v11Eyebrow) {
  color: var(--kge-ink-soft) !important;
  border-color: var(--kge-line) !important;
  background: var(--kge-surface-alt) !important;
}

html[data-kg-theme]
  .mainContent
  :where(
    .card,
    .dataTable,
    .videoCard,
    .repairCard,
    .taskCard,
    .candidateCard,
    .postScanControls,
    .researchSubnav,
    .adminTabs,
    .adminSectionTabs,
    .taskDetailPanel,
    .v912IdeaScheduler,
    .v912ProductionSchedule,
    .v983SeoPack,
    .v9114LiveActivity,
    .v91DailyRefresh,
    .v982IntelligenceCycle,
    .v9OwnerGuard,
    .v102ChannelProductionCard,
    .v98SectionCard,
    .v98CoverageCard,
    .v98FactGrid .card
  ) {
  border-color: var(--kge-line) !important;
  background: var(--kge-surface) !important;
  box-shadow: var(--kge-shadow-sm) !important;
}

html[data-kg-theme="light"]
  .mainContent
  :where(
    .card,
    .dataTable,
    .videoCard,
    .repairCard,
    .taskCard,
    .candidateCard,
    .postScanControls,
    .researchSubnav,
    .adminTabs,
    .adminSectionTabs,
    .taskDetailPanel,
    .v912IdeaScheduler,
    .v912ProductionSchedule,
    .v983SeoPack,
    .v9114LiveActivity,
    .v91DailyRefresh,
    .v982IntelligenceCycle,
    .v9OwnerGuard,
    .v102ChannelProductionCard,
    .v98SectionCard,
    .v98CoverageCard,
    .v98FactGrid .card
  ) {
  background: #ffffff !important;
}

/* Primary actions remain visually strong, with no cobalt shadow. */
html[data-kg-theme]
  .mainContent
  :where(button, .button):not(
    .secondary,
    .ghostDanger,
    .danger,
    .sidebarNavButton,
    .channelNavToggle,
    .v10ThemeToggle,
    .accountPasswordLink,
    .v9131LiveToggle
  ),
html[data-kg-theme] .accountLoginForm > button,
html[data-kg-theme] .passwordRecoveryBox > button,
html[data-kg-theme] #kg-boot-retry,
html[data-kg-theme] .v985NextActionMain > button:not(:disabled) {
  color: var(--kge-primary-text) !important;
  border-color: var(--kge-primary) !important;
  background: var(--kge-primary) !important;
  box-shadow: var(--kge-button-shadow) !important;
}

html[data-kg-theme]
  .mainContent
  :where(button, .button):not(
    .secondary,
    .ghostDanger,
    .danger,
    .sidebarNavButton,
    .channelNavToggle,
    .v10ThemeToggle,
    .accountPasswordLink,
    .v9131LiveToggle
  ):hover:not(:disabled),
html[data-kg-theme] .accountLoginForm > button:hover:not(:disabled),
html[data-kg-theme] .passwordRecoveryBox > button:hover:not(:disabled),
html[data-kg-theme] #kg-boot-retry:hover:not(:disabled),
html[data-kg-theme] .v985NextActionMain > button:hover:not(:disabled) {
  color: var(--kge-primary-text) !important;
  border-color: var(--kge-primary-hover) !important;
  background: var(--kge-primary-hover) !important;
  box-shadow: var(--kge-button-shadow) !important;
}

html[data-kg-theme] .mainContent .globalBackButton,
html[data-kg-theme] .mainContent :where(button, .button).secondary,
html[data-kg-theme] .mainContent .secondary {
  width: auto !important;
  color: var(--kge-ink-soft) !important;
  border-color: var(--kge-line-strong) !important;
  background: var(--kge-surface) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent .globalBackButton {
  min-height: 34px !important;
  justify-self: start !important;
  padding: 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-kg-theme] .mainContent .globalBackButton:hover,
html[data-kg-theme] .mainContent :where(button, .button).secondary:hover:not(:disabled),
html[data-kg-theme] .mainContent .secondary:hover:not(:disabled) {
  color: var(--kge-signal) !important;
  border-color: var(--kge-line-strong) !important;
  background: var(--kge-surface-alt) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent .globalBackButton:hover {
  background: transparent !important;
}

/* Exact repair for the scanned-data screen shown by the owner. */
html[data-kg-theme] .postScanContractStrip {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html[data-kg-theme] .mainContent .postScanContractStrip button {
  position: relative;
  min-height: 92px !important;
  padding: 16px 14px !important;
  color: var(--kge-ink) !important;
  border: 1px solid var(--kge-line) !important;
  border-radius: 13px !important;
  background: var(--kge-surface) !important;
  box-shadow: var(--kge-shadow-sm) !important;
  transform: none !important;
}

html[data-kg-theme] .mainContent .postScanContractStrip button::before {
  display: none !important;
}

html[data-kg-theme] .mainContent .postScanContractStrip button:hover {
  color: var(--kge-ink) !important;
  border-color: var(--kge-line-strong) !important;
  background: var(--kge-surface-alt) !important;
  box-shadow: var(--kge-shadow-sm) !important;
}

html[data-kg-theme] .mainContent .postScanContractStrip button.active {
  color: var(--kge-ink) !important;
  border-color: var(--kge-line-strong) !important;
  background: var(--kge-surface) !important;
  box-shadow:
    inset 3px 0 var(--kge-signal),
    var(--kge-shadow-sm) !important;
}

html[data-kg-theme] .postScanContractStrip strong {
  color: var(--kge-ink) !important;
  font-size: 29px !important;
}

html[data-kg-theme] .postScanContractStrip button.active strong {
  color: var(--kge-signal) !important;
}

html[data-kg-theme] .postScanContractStrip span {
  color: var(--kge-muted) !important;
}

html[data-kg-theme] .postScanTabs.dataScanTabs {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden;
  padding: 4px !important;
  border: 1px solid var(--kge-line) !important;
  border-radius: 12px !important;
  background: var(--kge-surface) !important;
  box-shadow: var(--kge-shadow-sm) !important;
}

html[data-kg-theme] .mainContent .postScanTabs.dataScanTabs button {
  min-width: 0;
  min-height: 40px !important;
  padding: 8px 10px !important;
  color: var(--kge-muted) !important;
  border: 0 !important;
  border-right: 1px solid var(--kge-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-kg-theme]
  .mainContent
  .postScanTabs.dataScanTabs
  button:last-child {
  border-right: 0 !important;
}

html[data-kg-theme] .mainContent .postScanTabs.dataScanTabs button:hover {
  color: var(--kge-ink) !important;
  background: var(--kge-surface-alt) !important;
}

html[data-kg-theme] .mainContent .postScanTabs.dataScanTabs button.active {
  color: var(--kge-signal) !important;
  background: var(--kge-signal-soft) !important;
  box-shadow: inset 0 -2px var(--kge-signal) !important;
}

html[data-kg-theme] .postScanControls {
  border-color: var(--kge-line) !important;
  background: var(--kge-surface) !important;
}

html[data-kg-theme] .postScanTabIntro {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kge-line);
}

html[data-kg-theme] .postScanSelectors select,
html[data-kg-theme]
  :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  color: var(--kge-ink) !important;
  border-color: var(--kge-line-strong) !important;
  background: var(--kge-surface) !important;
  box-shadow: none !important;
}

html[data-kg-theme]
  :where(input, select, textarea):not([type="checkbox"]):not(
    [type="radio"]
  ):focus {
  border-color: var(--kge-signal) !important;
  box-shadow: 0 0 0 3px var(--kge-focus) !important;
}

/* Data tabs use the reference site's text-and-underline treatment. */
html[data-kg-theme]
  :where(.v98PeriodBar, .v98DataTabs, .v98ScopeTabs, .periodToggle, .tabs) {
  gap: 4px !important;
  padding: 5px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kge-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-kg-theme] .v98PeriodBar > span {
  color: var(--kge-muted) !important;
}

html[data-kg-theme] .mainContent .v98PeriodBar button,
html[data-kg-theme] .mainContent .v98DataTabs button,
html[data-kg-theme] .mainContent .v98ScopeTabs button,
html[data-kg-theme] .mainContent .periodToggle button,
html[data-kg-theme] .mainContent .tabs button {
  min-height: 36px !important;
  padding: 7px 10px !important;
  color: var(--kge-muted) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-kg-theme] .mainContent .v98PeriodBar button:hover,
html[data-kg-theme] .mainContent .v98DataTabs button:hover,
html[data-kg-theme] .mainContent .v98ScopeTabs button:hover,
html[data-kg-theme] .mainContent .periodToggle button:hover,
html[data-kg-theme] .mainContent .tabs button:hover {
  color: var(--kge-ink) !important;
  background: transparent !important;
}

html[data-kg-theme] .mainContent .v98PeriodBar button.active,
html[data-kg-theme] .mainContent .v98DataTabs button.active,
html[data-kg-theme] .mainContent .v98ScopeTabs button.active,
html[data-kg-theme] .mainContent .periodToggle button.active,
html[data-kg-theme] .mainContent .tabs button.active {
  color: var(--kge-signal) !important;
  border-bottom-color: var(--kge-signal) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-kg-theme] .v98DataSurface > .sectionTitle:first-child {
  border-color: var(--kge-line) !important;
  background: var(--kge-surface) !important;
  box-shadow: var(--kge-shadow-sm) !important;
}

html[data-kg-theme="light"] .v98FactGrid .card,
html[data-kg-theme="light"] .v98SectionCard,
html[data-kg-theme="light"] .v98CoverageCard {
  background: #ffffff !important;
}

/* Tables mirror the clean financial-information reference. */
html[data-kg-theme] :where(.dataTable, table) {
  border-color: var(--kge-line) !important;
  background: var(--kge-surface) !important;
}

html[data-kg-theme] thead th {
  color: var(--kge-ink-soft) !important;
  border-color: var(--kge-line) !important;
  background: var(--kge-surface-strong) !important;
}

html[data-kg-theme] tbody td {
  color: var(--kge-ink-soft) !important;
  border-color: var(--kge-line) !important;
}

html[data-kg-theme] tbody tr:hover {
  background: var(--kge-selection-soft) !important;
}

/* Owner command centre and channel selection stay premium but neutral. */
html[data-kg-theme] .v985NextAction {
  border-color: var(--kge-line) !important;
  background: var(--kge-surface) !important;
  box-shadow: var(--kge-shadow-md) !important;
}

html[data-kg-theme] .v985NextAction::before {
  height: 2px !important;
  background: linear-gradient(
    90deg,
    var(--kge-signal) 0 96px,
    var(--kge-line) 96px 100%
  ) !important;
}

html[data-kg-theme] .v985NextAction::after {
  display: none !important;
}

html[data-kg-theme] .v911ChannelSelection,
html[data-kg-theme] .v985SimpleProgress > div,
html[data-kg-theme] .v9131LiveCollapsed {
  border-color: var(--kge-line) !important;
  background: var(--kge-surface-alt) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .v911ChannelSelection::before,
html[data-kg-theme] .v9114LiveActivity::before {
  background: var(--kge-signal) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .v911ChannelChoice {
  border-color: var(--kge-line) !important;
  background: var(--kge-surface) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .v911ChannelChoice:hover:not(.isDisabled) {
  border-color: var(--kge-line-strong) !important;
  background: var(--kge-surface-alt) !important;
  box-shadow: var(--kge-shadow-sm) !important;
}

html[data-kg-theme] .v911ChannelChoice.isSelected,
html[data-kg-theme] .v985SimpleProgress > .isActive {
  border-color: var(--kge-line-strong) !important;
  background: var(--kge-surface) !important;
  box-shadow: inset 3px 0 var(--kge-signal) !important;
}

html[data-kg-theme] .v911ChannelChoice.isSelected::after {
  color: #ffffff !important;
  background: var(--kge-signal) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .v911ChannelChoice input[type="checkbox"]:checked {
  border-color: var(--kge-signal) !important;
  background: var(--kge-signal) !important;
}

html[data-kg-theme] .v985SimpleProgress > .isActive > span {
  color: var(--kge-primary-text) !important;
  border-color: var(--kge-primary) !important;
  background: var(--kge-primary) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .v985TechnicalDetails > summary {
  background: var(--kge-surface) !important;
}

/* Exercise Library follows the same neutral hierarchy. */
html[data-kg-theme] .v11ExercisePage {
  --v11-yellow: var(--kge-primary);
  --v11-yellow-strong: var(--kge-primary-hover);
}

html[data-kg-theme] .v11PageHeader {
  background: var(--kge-surface) !important;
}

html[data-kg-theme] .v11Tabs {
  border-color: var(--kge-line) !important;
  background: var(--kge-surface-alt) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent .v11Tabs button {
  color: var(--kge-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent .v11Tabs button.active {
  color: var(--kge-primary-text) !important;
  border-color: var(--kge-primary) !important;
  background: var(--kge-primary) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .v11SectionNumber {
  color: var(--kge-primary-text) !important;
  border-color: var(--kge-primary) !important;
  background: var(--kge-primary) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent .v11TagOptions button {
  color: var(--kge-muted) !important;
  border-color: var(--kge-line) !important;
  background: var(--kge-surface-alt) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent .v11TagOptions button.selected {
  color: var(--kge-primary-text) !important;
  border-color: var(--kge-primary) !important;
  background: var(--kge-primary) !important;
  box-shadow: none !important;
}

html[data-kg-theme]
  :where(.v11ExerciseForm, .v11SourcePanel, .v11FormResult, .v11ExerciseCard) {
  border-color: var(--kge-line) !important;
  background: var(--kge-surface) !important;
  box-shadow: var(--kge-shadow-sm) !important;
}

html[data-kg-theme] .v11FormSection,
html[data-kg-theme] :where(.v11Preview, .v11EmptyPreview),
html[data-kg-theme] .v11EmptyState {
  border-color: var(--kge-line) !important;
  background: var(--kge-surface-alt) !important;
}

/* Login and startup stay consistent with the selected theme. */
html[data-kg-theme] :where(.login, .loginShell, .luxeLogin),
html[data-kg-theme] #kg-boot-guard {
  background: linear-gradient(
    145deg,
    var(--kge-canvas-top),
    var(--kge-canvas) 68%
  ) !important;
}

html[data-kg-theme] .loginBox.luxe::before {
  background: linear-gradient(
    90deg,
    var(--kge-signal) 0 76px,
    var(--kge-line) 76px 100%
  ) !important;
}

html[data-kg-theme] .loginCrest,
html[data-kg-theme] .kgBootGuardMark {
  color: #ffffff !important;
  border-color: var(--kge-line-strong) !important;
  background: linear-gradient(145deg, #202023, #060607 72%) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26) !important;
}

/* Desktop, laptop and mobile fixes for tab wrapping. */
@media (max-width: 1180px) {
  html[data-kg-theme] .postScanContractStrip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html[data-kg-theme] .postScanTabs.dataScanTabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html[data-kg-theme]
    .mainContent
    .postScanTabs.dataScanTabs
    button:nth-child(3n) {
    border-right: 0 !important;
  }
}

@media (max-width: 760px) {
  html[data-kg-theme] .postScanContractStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-kg-theme] .postScanTabs.dataScanTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-kg-theme]
    .mainContent
    .postScanTabs.dataScanTabs
    button:nth-child(3n) {
    border-right: 1px solid var(--kge-line) !important;
  }

  html[data-kg-theme]
    .mainContent
    .postScanTabs.dataScanTabs
    button:nth-child(2n) {
    border-right: 0 !important;
  }
}

@media (max-width: 480px) {
  html[data-kg-theme] .postScanContractStrip,
  html[data-kg-theme] .postScanTabs.dataScanTabs {
    grid-template-columns: 1fr !important;
  }

  html[data-kg-theme] .mainContent .postScanTabs.dataScanTabs button {
    border-right: 0 !important;
    border-bottom: 1px solid var(--kge-line) !important;
  }

  html[data-kg-theme]
    .mainContent
    .postScanTabs.dataScanTabs
    button:last-child {
    border-bottom: 0 !important;
  }
}