/*
 * KG Channel Intelligence OS V11.1 R7 — KG Command Clarity
 *
 * Presentation-only repair loaded after R6. It restores semantic visual
 * hierarchy, WCAG-oriented text contrast and consistent component states in
 * both themes. Routes, data, permissions, APIs and integrations are unchanged.
 */

html[data-kg-theme="light"] {
  --kgc-canvas: #f1f3f5;
  --kgc-canvas-top: #f8f9fa;
  --kgc-sidebar: #f8f9fa;
  --kgc-surface: #ffffff;
  --kgc-surface-raised: #fbfcfd;
  --kgc-surface-alt: #f5f7f9;
  --kgc-surface-strong: #e9edf1;
  --kgc-surface-hover: #edf1f4;
  --kgc-line: #d5dae0;
  --kgc-line-strong: #b8c0c9;
  --kgc-ink: #15181d;
  --kgc-ink-soft: #353b44;
  --kgc-muted: #59626d;
  --kgc-faint: #68727e;
  --kgc-primary: #171a1f;
  --kgc-primary-hover: #2a2f36;
  --kgc-primary-text: #ffffff;
  --kgc-signal: #c83a24;
  --kgc-signal-hover: #ad301d;
  --kgc-signal-soft: rgba(200, 58, 36, 0.09);
  --kgc-selection: rgba(21, 24, 29, 0.075);
  --kgc-selection-soft: rgba(21, 24, 29, 0.038);
  --kgc-success: #176d52;
  --kgc-success-soft: rgba(23, 109, 82, 0.105);
  --kgc-warning: #885814;
  --kgc-warning-soft: rgba(136, 88, 20, 0.11);
  --kgc-danger: #a83243;
  --kgc-danger-soft: rgba(168, 50, 67, 0.1);
  --kgc-info: #3f596f;
  --kgc-info-soft: rgba(63, 89, 111, 0.1);
  --kgc-shadow-xs: 0 1px 2px rgba(15, 20, 26, 0.04);
  --kgc-shadow-sm:
    0 1px 2px rgba(15, 20, 26, 0.04), 0 10px 28px rgba(15, 20, 26, 0.055);
  --kgc-shadow-md:
    0 2px 5px rgba(15, 20, 26, 0.045), 0 20px 52px rgba(15, 20, 26, 0.085);
  --kgc-shadow-button: 0 8px 18px rgba(15, 20, 26, 0.16);
  --kgc-focus: rgba(200, 58, 36, 0.22);
}

html[data-kg-theme="dark"] {
  --kgc-canvas: #080a0c;
  --kgc-canvas-top: #0b0d10;
  --kgc-sidebar: #0c0e11;
  --kgc-surface: #14171b;
  --kgc-surface-raised: #181c21;
  --kgc-surface-alt: #1b1f24;
  --kgc-surface-strong: #23282f;
  --kgc-surface-hover: #282e36;
  --kgc-line: #30363f;
  --kgc-line-strong: #505a66;
  --kgc-ink: #f4f5f6;
  --kgc-ink-soft: #d7dade;
  --kgc-muted: #aab0b8;
  --kgc-faint: #949ca6;
  --kgc-primary: #f2f3f4;
  --kgc-primary-hover: #ffffff;
  --kgc-primary-text: #111419;
  --kgc-signal: #ff684f;
  --kgc-signal-hover: #ff806a;
  --kgc-signal-soft: rgba(255, 104, 79, 0.13);
  --kgc-selection: rgba(244, 245, 246, 0.105);
  --kgc-selection-soft: rgba(244, 245, 246, 0.055);
  --kgc-success: #63d5aa;
  --kgc-success-soft: rgba(99, 213, 170, 0.13);
  --kgc-warning: #f0bd67;
  --kgc-warning-soft: rgba(240, 189, 103, 0.14);
  --kgc-danger: #ff8795;
  --kgc-danger-soft: rgba(255, 135, 149, 0.13);
  --kgc-info: #b4c7d8;
  --kgc-info-soft: rgba(180, 199, 216, 0.12);
  --kgc-shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
  --kgc-shadow-sm:
    0 1px 0 rgba(255, 255, 255, 0.028) inset, 0 14px 34px rgba(0, 0, 0, 0.22);
  --kgc-shadow-md:
    0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 64px rgba(0, 0, 0, 0.34);
  --kgc-shadow-button: 0 10px 24px rgba(0, 0, 0, 0.34);
  --kgc-focus: rgba(255, 104, 79, 0.28);
}

/* Refresh the final token layer so every earlier theme resolves consistently. */
html[data-kg-theme] {
  --kge-canvas: var(--kgc-canvas);
  --kge-canvas-top: var(--kgc-canvas-top);
  --kge-sidebar: var(--kgc-sidebar);
  --kge-surface: var(--kgc-surface);
  --kge-surface-alt: var(--kgc-surface-alt);
  --kge-surface-strong: var(--kgc-surface-strong);
  --kge-surface-hover: var(--kgc-surface-hover);
  --kge-line: var(--kgc-line);
  --kge-line-strong: var(--kgc-line-strong);
  --kge-ink: var(--kgc-ink);
  --kge-ink-soft: var(--kgc-ink-soft);
  --kge-muted: var(--kgc-muted);
  --kge-faint: var(--kgc-faint);
  --kge-primary: var(--kgc-primary);
  --kge-primary-hover: var(--kgc-primary-hover);
  --kge-primary-strong: var(--kgc-primary);
  --kge-primary-text: var(--kgc-primary-text);
  --kge-signal: var(--kgc-signal);
  --kge-signal-hover: var(--kgc-signal-hover);
  --kge-signal-soft: var(--kgc-signal-soft);
  --kge-selection: var(--kgc-selection);
  --kge-selection-soft: var(--kgc-selection-soft);
  --kge-success: var(--kgc-success);
  --kge-success-soft: var(--kgc-success-soft);
  --kge-warning: var(--kgc-warning);
  --kge-warning-soft: var(--kgc-warning-soft);
  --kge-danger: var(--kgc-danger);
  --kge-danger-soft: var(--kgc-danger-soft);
  --kge-shadow-sm: var(--kgc-shadow-sm);
  --kge-shadow-md: var(--kgc-shadow-md);
  --kge-button-shadow: var(--kgc-shadow-button);
  --kge-focus: var(--kgc-focus);
  color-scheme: light dark;
}

/* Foundation: readable type and explicit foreground colours. */
html[data-kg-theme] body {
  color: var(--kgc-ink) !important;
  background:
    radial-gradient(
      circle at 78% -12rem,
      var(--kgc-selection) 0,
      transparent 34rem
    ),
    linear-gradient(180deg, var(--kgc-canvas-top) 0, var(--kgc-canvas) 31rem)
      fixed !important;
  font-size: 14px;
  line-height: 1.5;
}

html[data-kg-theme] .mainContent {
  max-width: none !important;
  color: var(--kgc-ink) !important;
  font-size: 14px !important;
}

html[data-kg-theme]
  .mainContent
  :where(h1, h2, h3, h4, h5, h6, b, strong, label, legend) {
  color: var(--kgc-ink) !important;
}

html[data-kg-theme]
  .mainContent
  :where(p, li, dd, .pageHeader p, .sectionTitle p) {
  color: var(--kgc-ink-soft) !important;
}

html[data-kg-theme]
  .mainContent
  :where(small, dt, .muted, .helperText, .formHint, .meta, .subtle) {
  color: var(--kgc-muted) !important;
}

html[data-kg-theme] .mainContent :where(small, .muted) {
  font-size: max(12px, 0.82em);
  line-height: 1.5;
}

html[data-kg-theme] .mainContent a:not(.button) {
  color: var(--kgc-signal);
  text-underline-offset: 3px;
}

html[data-kg-theme] .mainContent a:not(.button):hover {
  color: var(--kgc-signal-hover);
}

html[data-kg-theme] ::placeholder {
  color: var(--kgc-faint) !important;
  opacity: 1 !important;
}

html[data-kg-theme] :focus-visible {
  outline: 2px solid var(--kgc-signal) !important;
  outline-offset: 2px !important;
}

/* Shell and navigation: stronger labels, calm idle state, clear current state. */
html[data-kg-theme] .shell {
  background: transparent !important;
}

html[data-kg-theme] .sidebar {
  color: var(--kgc-ink-soft) !important;
  border-right: 1px solid var(--kgc-line) !important;
  background: linear-gradient(
    180deg,
    var(--kgc-sidebar),
    var(--kgc-canvas)
  ) !important;
  box-shadow: 12px 0 38px rgba(0, 0, 0, 0.045) !important;
}

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

html[data-kg-theme] .brand strong,
html[data-kg-theme] .brand b,
html[data-kg-theme] .userMeta strong {
  color: var(--kgc-ink) !important;
}

html[data-kg-theme] :where(.brand span, .userMeta span, .v10ThemeText small) {
  color: var(--kgc-muted) !important;
}

html[data-kg-theme] .sidebar nav a,
html[data-kg-theme] .sidebarNavButton,
html[data-kg-theme] .channelNavToggle {
  min-height: 42px;
  color: var(--kgc-muted) !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
}

html[data-kg-theme] .sidebar nav a:hover,
html[data-kg-theme] .sidebarNavButton:hover,
html[data-kg-theme] .channelNavToggle:hover,
html[data-kg-theme] .channelNavGroup.expanded > .channelNavToggle {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-alt) !important;
  transform: none !important;
}

html[data-kg-theme] .sidebar nav a.active,
html[data-kg-theme] .sidebarNavButton.active {
  color: var(--kgc-ink) !important;
  border-color: var(--kgc-line-strong) !important;
  background:
    linear-gradient(90deg, var(--kgc-signal-soft), transparent 72%),
    var(--kgc-surface-strong) !important;
  box-shadow:
    inset 3px 0 var(--kgc-signal),
    var(--kgc-shadow-xs) !important;
}

html[data-kg-theme] .channelToolLinks a {
  min-height: 34px;
  color: var(--kgc-muted) !important;
  font-size: 12.5px !important;
}

html[data-kg-theme] .channelToolLinks a:hover,
html[data-kg-theme] .channelToolLinks a.active {
  color: var(--kgc-ink) !important;
  background: var(--kgc-surface-alt) !important;
}

html[data-kg-theme] .navIcon,
html[data-kg-theme] .navChevron {
  color: var(--kgc-faint) !important;
  opacity: 1 !important;
}

html[data-kg-theme] .v10ThemeToggle,
html[data-kg-theme] .sidebarFooter > div,
html[data-kg-theme] .userPanel {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-raised) !important;
  box-shadow: var(--kgc-shadow-xs) !important;
}

/* Page and section hierarchy. */
html[data-kg-theme] .pageHeader,
html[data-kg-theme] .v11PageHeader {
  min-height: 144px;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(26px, 2.6vw, 40px) clamp(26px, 3vw, 46px) !important;
  border: 1px solid var(--kgc-line-strong) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, var(--kgc-surface) 0 65%, transparent 100%),
    var(--kgc-surface-raised) !important;
  box-shadow: var(--kgc-shadow-md) !important;
}

html[data-kg-theme] .pageHeader::before,
html[data-kg-theme] .v11PageHeader::before {
  height: 3px !important;
  background: linear-gradient(
    90deg,
    var(--kgc-signal) 0 108px,
    var(--kgc-line-strong) 108px 32%,
    transparent 62%
  ) !important;
}

html[data-kg-theme] .pageHeader::after,
html[data-kg-theme] .v11PageHeader::after {
  display: block !important;
  top: -165px !important;
  right: -105px !important;
  width: 360px !important;
  height: 360px !important;
  border: 1px solid var(--kgc-line) !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle,
    var(--kgc-signal-soft) 0,
    transparent 66%
  ) !important;
  opacity: 0.62 !important;
}

html[data-kg-theme] .pageHeader h1,
html[data-kg-theme] .v11PageHeader h1 {
  color: var(--kgc-ink) !important;
  font-family:
    Inter,
    "Segoe UI",
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif !important;
  font-size: clamp(34px, 3vw, 48px) !important;
  font-weight: 820 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
}

html[data-kg-theme] .pageHeader p,
html[data-kg-theme] .v11PageHeader p {
  max-width: 900px;
  color: var(--kgc-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.62 !important;
}

html[data-kg-theme] :where(.eyebrow, .sectionEyebrow, .v11Eyebrow) {
  color: var(--kgc-ink-soft) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-strong) !important;
}

html[data-kg-theme] .mainContent .sectionTitle {
  position: relative;
  min-height: 46px;
  gap: 16px !important;
  padding-left: 16px !important;
}

html[data-kg-theme] .mainContent .sectionTitle::before {
  top: 4px !important;
  bottom: 4px !important;
  width: 3px !important;
  background: linear-gradient(
    180deg,
    var(--kgc-signal),
    var(--kgc-signal-hover)
  ) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .sectionTitle h2 {
  color: var(--kgc-ink) !important;
  font-size: clamp(21px, 1.55vw, 27px) !important;
  font-weight: 780 !important;
  letter-spacing: -0.028em !important;
}

html[data-kg-theme] .sectionTitle p {
  color: var(--kgc-muted) !important;
  font-size: 13.5px !important;
}

html[data-kg-theme] .mainContent :where(.card, .dataTable) > h2,
html[data-kg-theme] .mainContent .subhead {
  color: var(--kgc-ink) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  letter-spacing: -0.018em;
}

/* Surfaces: distinguish page, section, card and selected data without colour noise. */
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,
    .v11ExerciseForm,
    .v11SourcePanel,
    .v11FormResult,
    .v11ExerciseCard
  ) {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface) !important;
  box-shadow: var(--kgc-shadow-sm) !important;
}

html[data-kg-theme]
  .mainContent
  :where(
    .adminSplit > .card,
    .channelAdminCard,
    .taskDetailPanel,
    .v985NextAction,
    .v11ExerciseForm,
    .v11SourcePanel
  ) {
  border-color: var(--kgc-line-strong) !important;
  box-shadow: var(--kgc-shadow-md) !important;
}

html[data-kg-theme] .card {
  border-radius: 16px !important;
}

html[data-kg-theme] .card p,
html[data-kg-theme] .card li,
html[data-kg-theme] .card dd {
  color: var(--kgc-ink-soft) !important;
}

html[data-kg-theme] hr,
html[data-kg-theme] .subhead,
html[data-kg-theme] .channelNavTree,
html[data-kg-theme] .sidebarFooter {
  border-color: var(--kgc-line) !important;
}

/* Action hierarchy. Generic action buttons remain primary; controls are reset below. */
html[data-kg-theme] .mainContent :where(button, .button) {
  min-height: 40px;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 740 !important;
  letter-spacing: -0.005em;
}

html[data-kg-theme]
  .mainContent
  :where(button, .button):not(
    .secondary,
    .ghostDanger,
    .danger,
    .dangerButton,
    .iconButton,
    .sidebarNavButton,
    .channelNavToggle,
    .v10ThemeToggle,
    .accountPasswordLink,
    .v9131LiveToggle
  ) {
  box-shadow: var(--kgc-shadow-button) !important;
}

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

html[data-kg-theme] .mainContent :where(.secondary, .globalBackButton):hover,
html[data-kg-theme]
  .mainContent
  :where(button, .button).secondary:hover:not(:disabled) {
  color: var(--kgc-signal) !important;
  border-color: var(--kgc-signal) !important;
  background: var(--kgc-signal-soft) !important;
}

html[data-kg-theme] .mainContent :where(.ghostDanger, .danger, .dangerButton) {
  color: var(--kgc-danger) !important;
  border-color: var(--kgc-danger) !important;
  background: var(--kgc-danger-soft) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent :where(.iconButton, .iconButton.light) {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-alt) !important;
  box-shadow: none !important;
}

html[data-kg-theme] :where(button, input, select, textarea):disabled {
  cursor: not-allowed !important;
  opacity: 0.62 !important;
}

/* Forms and selectable rows. */
html[data-kg-theme]
  :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  min-height: 40px;
  color: var(--kgc-ink) !important;
  border-color: var(--kgc-line-strong) !important;
  background: var(--kgc-surface-raised) !important;
}

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

html[data-kg-theme] :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--kgc-signal);
}

html[data-kg-theme] .checkGrid label,
html[data-kg-theme] .interactiveChecklist label {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-alt) !important;
}

html[data-kg-theme] .checkGrid label:hover,
html[data-kg-theme] .interactiveChecklist label:hover {
  color: var(--kgc-ink) !important;
  border-color: var(--kgc-line-strong) !important;
  background: var(--kgc-surface-hover) !important;
}

html[data-kg-theme] .checkGrid label:has(input:checked),
html[data-kg-theme] .interactiveChecklist label:has(input:checked) {
  color: var(--kgc-ink) !important;
  border-color: var(--kgc-signal) !important;
  background: var(--kgc-signal-soft) !important;
  box-shadow: inset 3px 0 var(--kgc-signal) !important;
}

/* Tabs and segmented controls must never inherit the primary-action fill. */
html[data-kg-theme]
  .mainContent
  :where(
    .adminTabs,
    .taskTabs,
    .tabs,
    .dataScanTabs,
    .postScanTabs,
    .v98DataTabs,
    .v98ScopeTabs,
    .v98PeriodBar,
    .periodToggle,
    .segmented,
    .qaButtons,
    .fitButtons,
    .radarFilters,
    .dataScanFeedbackActions,
    .v11Tabs,
    .v11TagOptions
  )
  button {
  color: var(--kgc-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-kg-theme]
  .mainContent
  :where(
    .taskTabs,
    .segmented,
    .qaButtons,
    .fitButtons,
    .radarFilters,
    .dataScanFeedbackActions
  ) {
  color: var(--kgc-muted) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-alt) !important;
}

html[data-kg-theme]
  .mainContent
  :where(
    .taskTabs,
    .segmented,
    .qaButtons,
    .fitButtons,
    .radarFilters,
    .dataScanFeedbackActions
  )
  button:hover {
  color: var(--kgc-ink) !important;
  background: var(--kgc-surface-hover) !important;
}

html[data-kg-theme]
  .mainContent
  :where(
    .taskTabs,
    .segmented,
    .qaButtons,
    .fitButtons,
    .radarFilters,
    .dataScanFeedbackActions
  )
  button.active {
  color: var(--kgc-signal) !important;
  border-color: var(--kgc-signal) !important;
  background: var(--kgc-signal-soft) !important;
  box-shadow: inset 0 -2px var(--kgc-signal) !important;
}

html[data-kg-theme] .mainContent .adminTabs {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: 5px !important;
  padding: 5px !important;
  border: 1px solid var(--kgc-line-strong) !important;
  border-radius: 14px !important;
  background: var(--kgc-surface) !important;
  box-shadow: var(--kgc-shadow-sm) !important;
}

html[data-kg-theme] .mainContent .adminTabs button {
  min-height: 44px !important;
  color: var(--kgc-muted) !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
}

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

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

html[data-kg-theme] .mainContent .adminSectionTabs {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 5px !important;
  padding: 5px !important;
  border: 1px solid var(--kgc-line) !important;
  background: var(--kgc-surface) !important;
}

html[data-kg-theme] .mainContent .adminSectionTabs a {
  color: var(--kgc-muted) !important;
  text-align: center;
  border: 1px solid transparent;
  background: transparent !important;
}

html[data-kg-theme] .mainContent .adminSectionTabs a:hover {
  color: var(--kgc-ink) !important;
  background: var(--kgc-surface-alt) !important;
}

html[data-kg-theme] .mainContent .adminSectionTabs a.active {
  color: var(--kgc-primary-text) !important;
  border-color: var(--kgc-primary) !important;
  background: var(--kgc-primary) !important;
}

/* Exact repair for the Administration screen supplied with R6. */
html[data-kg-theme] .adminKpis {
  gap: 16px;
  margin-bottom: 22px;
}

html[data-kg-theme] .adminKpis .card {
  min-height: 112px;
  padding: 20px 20px 18px !important;
  border-color: var(--kgc-line-strong) !important;
  background: linear-gradient(
    145deg,
    var(--kgc-surface),
    var(--kgc-surface-raised)
  ) !important;
  box-shadow: var(--kgc-shadow-sm) !important;
}

html[data-kg-theme] .adminKpis .card::before {
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--kgc-signal), transparent 72%);
  content: "";
}

html[data-kg-theme] .adminKpis .card::after {
  right: -30px;
  bottom: -42px;
  width: 112px;
  height: 112px;
  border: 1px solid var(--kgc-line) !important;
  background: var(--kgc-selection-soft) !important;
}

html[data-kg-theme] .adminKpis span {
  color: var(--kgc-muted) !important;
  font-size: 12.5px !important;
  font-weight: 680;
}

html[data-kg-theme] .adminKpis strong {
  color: var(--kgc-ink) !important;
  font-size: 34px !important;
  font-weight: 820 !important;
  line-height: 1;
}

html[data-kg-theme] .adminSplit {
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  gap: 20px !important;
}

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

html[data-kg-theme] .invitePanel > h2 {
  color: var(--kgc-ink) !important;
  font-size: 20px !important;
  font-weight: 780 !important;
}

html[data-kg-theme] .peopleList {
  gap: 10px !important;
}

html[data-kg-theme] .mainContent .personRow {
  min-height: 72px;
  color: var(--kgc-ink-soft) !important;
  border: 1px solid var(--kgc-line) !important;
  border-radius: 12px !important;
  background: var(--kgc-surface-raised) !important;
  box-shadow: var(--kgc-shadow-xs) !important;
}

html[data-kg-theme] .mainContent .personRow:hover {
  color: var(--kgc-ink) !important;
  border-color: var(--kgc-line-strong) !important;
  background: var(--kgc-surface-hover) !important;
  box-shadow: var(--kgc-shadow-sm) !important;
  transform: translateY(-1px) !important;
}

html[data-kg-theme] .personRow b {
  color: var(--kgc-ink) !important;
  font-size: 13.5px !important;
  font-weight: 760 !important;
}

html[data-kg-theme] .personRow div:nth-child(2) span,
html[data-kg-theme] .personRow small {
  color: var(--kgc-muted) !important;
  font-size: 12.25px !important;
}

html[data-kg-theme] .avatar.premium {
  color: var(--kgc-primary-text) !important;
  border: 1px solid var(--kgc-line-strong) !important;
  background: var(--kgc-primary) !important;
  box-shadow: var(--kgc-shadow-xs) !important;
}

html[data-kg-theme] .mainContent .matrixRow > button {
  color: var(--kgc-ink-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
}

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

html[data-kg-theme] :where(.matrixHead, .matrixRow, .inviteRow) {
  border-color: var(--kgc-line) !important;
}

html[data-kg-theme] .matrixHead {
  color: var(--kgc-muted) !important;
  background: var(--kgc-surface-alt) !important;
}

html[data-kg-theme] .matrixRow .granted {
  color: var(--kgc-success) !important;
}

html[data-kg-theme] .matrixRow .blocked {
  color: var(--kgc-faint) !important;
}

/* Badges and feedback retain meaning with readable text in either theme. */
html[data-kg-theme] .badge {
  color: var(--kgc-ink-soft) !important;
  border: 1px solid var(--kgc-line) !important;
  background: var(--kgc-surface-strong) !important;
  font-size: 11.5px !important;
  font-weight: 780 !important;
}

html[data-kg-theme] .badge.success {
  color: var(--kgc-success) !important;
  border-color: var(--kgc-success) !important;
  background: var(--kgc-success-soft) !important;
}

html[data-kg-theme] .badge.warning {
  color: var(--kgc-warning) !important;
  border-color: var(--kgc-warning) !important;
  background: var(--kgc-warning-soft) !important;
}

html[data-kg-theme] .badge.danger {
  color: var(--kgc-danger) !important;
  border-color: var(--kgc-danger) !important;
  background: var(--kgc-danger-soft) !important;
}

html[data-kg-theme]
  :where(.warningBox, .warningPanel, .dangerPanel, .errorBox, .toast) {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line-strong) !important;
  background: var(--kgc-surface-alt) !important;
}

html[data-kg-theme] :where(.warningBox, .warningPanel) {
  box-shadow: inset 3px 0 var(--kgc-warning) !important;
}

html[data-kg-theme] :where(.dangerPanel, .errorBox) {
  box-shadow: inset 3px 0 var(--kgc-danger) !important;
}

html[data-kg-theme] .toast {
  color: var(--kgc-ink) !important;
  box-shadow:
    inset 3px 0 var(--kgc-signal),
    var(--kgc-shadow-md) !important;
}

/* Tables and dense data: stable row contrast and legible secondary text. */
html[data-kg-theme] :where(.dataTable, table) {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface) !important;
}

html[data-kg-theme] thead th {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-strong) !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  letter-spacing: 0.025em;
}

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

html[data-kg-theme] tbody tr:nth-child(even) {
  background: var(--kgc-selection-soft) !important;
}

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

html[data-kg-theme] code,
html[data-kg-theme] pre {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-strong) !important;
}

/* Workflow, channel selection and Exercise Library. */
html[data-kg-theme] .v985NextAction,
html[data-kg-theme] .v911ChannelSelection {
  border-color: var(--kgc-line-strong) !important;
  background: linear-gradient(
    145deg,
    var(--kgc-surface),
    var(--kgc-surface-raised)
  ) !important;
  box-shadow: var(--kgc-shadow-md) !important;
}

html[data-kg-theme] .v911ChannelChoice {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-raised) !important;
}

html[data-kg-theme] .v911ChannelChoice:hover:not(.isDisabled) {
  color: var(--kgc-ink) !important;
  border-color: var(--kgc-line-strong) !important;
  background: var(--kgc-surface-hover) !important;
}

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

html[data-kg-theme] .v985SimpleProgress > div {
  color: var(--kgc-muted) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-alt) !important;
}

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

html[data-kg-theme] .v985TechnicalDetails > summary {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line) !important;
  background: var(--kgc-surface-alt) !important;
}

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

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

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

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

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

/* Modal, login and startup surfaces. */
html[data-kg-theme] .modalBackdrop {
  background: rgba(4, 6, 8, 0.76) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-kg-theme] .modalCard,
html[data-kg-theme] .loginBox.luxe,
html[data-kg-theme] .kgBootGuardCard {
  color: var(--kgc-ink-soft) !important;
  border-color: var(--kgc-line-strong) !important;
  background: var(--kgc-surface) !important;
  box-shadow: var(--kgc-shadow-md) !important;
}

html[data-kg-theme] :where(.login, .loginShell, .luxeLogin),
html[data-kg-theme] #kg-boot-guard {
  color: var(--kgc-ink) !important;
  background:
    radial-gradient(
      circle at 76% 14%,
      var(--kgc-signal-soft),
      transparent 31rem
    ),
    linear-gradient(145deg, var(--kgc-canvas-top), var(--kgc-canvas) 68%) !important;
}

html[data-kg-theme] #kg-boot-message,
html[data-kg-theme] .loginBox.luxe p {
  color: var(--kgc-muted) !important;
}

@media (max-width: 1180px) {
  html[data-kg-theme] .adminSplit {
    grid-template-columns: 1fr;
  }

  html[data-kg-theme] .invitePanel {
    position: static;
  }
}

@media (max-width: 860px) {
  html[data-kg-theme] .mainContent .adminTabs {
    grid-template-columns: repeat(2, minmax(132px, 1fr));
  }

  html[data-kg-theme] .pageHeader,
  html[data-kg-theme] .v11PageHeader {
    min-height: auto;
    padding: 25px 22px !important;
  }

  html[data-kg-theme] .pageHeader h1,
  html[data-kg-theme] .v11PageHeader h1 {
    font-size: 32px !important;
  }
}

@media (max-width: 560px) {
  html[data-kg-theme] .mainContent .adminTabs,
  html[data-kg-theme] .mainContent .adminSectionTabs {
    grid-template-columns: 1fr;
  }

  html[data-kg-theme] .adminKpis {
    grid-template-columns: 1fr;
  }

  html[data-kg-theme] .personRow {
    grid-template-columns: 42px minmax(0, 1fr);
  }
}

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