/*
 * KG Channel Intelligence OS V11.0B — KG Monochrome
 *
 * Presentation-only layer loaded after V10.9 and V11.0A.
 * It replaces the champagne/yellow identity with the black, white and graphite
 * language of the KG logo. Semantic success and danger colors remain available
 * only where they communicate operational state.
 */

html[data-kg-theme="dark"] {
  --kg9-canvas: #070707;
  --kg9-canvas-top: #0b0b0b;
  --kg9-sidebar: #0a0a0a;
  --kg9-surface: #111111;
  --kg9-surface-raised: #161616;
  --kg9-surface-high: #1d1d1d;
  --kg9-surface-soft: #232323;
  --kg9-surface-hover: #2a2a2a;
  --kg9-surface-selected: #202020;
  --kg9-line: rgba(255, 255, 255, 0.09);
  --kg9-line-strong: rgba(255, 255, 255, 0.18);
  --kg9-text: #f7f7f7;
  --kg9-text-soft: #d0d0d0;
  --kg9-muted: #9b9b9b;
  --kg9-faint: #7e7e7e;
  --kg9-champagne-pale: #ffffff;
  --kg9-champagne: #eeeeee;
  --kg9-champagne-mid: #cfcfcf;
  --kg9-champagne-deep: #969696;
  --kg9-accent-label: #f2f2f2;
  --kg9-focus: 0 0 0 3px rgba(255, 255, 255, 0.17);
  --kgmono-primary: #f5f5f5;
  --kgmono-primary-hover: #ffffff;
  --kgmono-primary-text: #090909;
  --kgmono-selection: rgba(255, 255, 255, 0.09);
  --kgmono-selection-strong: rgba(255, 255, 255, 0.15);
}

html[data-kg-theme="light"] {
  --kg9-canvas: #f0f0f0;
  --kg9-canvas-top: #fafafa;
  --kg9-sidebar: #f5f5f5;
  --kg9-surface: #ffffff;
  --kg9-surface-raised: #ffffff;
  --kg9-surface-high: #ffffff;
  --kg9-surface-soft: #eeeeee;
  --kg9-surface-hover: #e7e7e7;
  --kg9-surface-selected: #e4e4e4;
  --kg9-line: rgba(0, 0, 0, 0.09);
  --kg9-line-strong: rgba(0, 0, 0, 0.18);
  --kg9-text: #0d0d0d;
  --kg9-text-soft: #343434;
  --kg9-muted: #686868;
  --kg9-faint: #7c7c7c;
  --kg9-champagne-pale: #404040;
  --kg9-champagne: #202020;
  --kg9-champagne-mid: #111111;
  --kg9-champagne-deep: #000000;
  --kg9-accent-label: #242424;
  --kg9-focus: 0 0 0 3px rgba(0, 0, 0, 0.14);
  --kgmono-primary: #0b0b0b;
  --kgmono-primary-hover: #252525;
  --kgmono-primary-text: #ffffff;
  --kgmono-selection: rgba(0, 0, 0, 0.055);
  --kgmono-selection-strong: rgba(0, 0, 0, 0.1);
}

html[data-kg-theme] {
  --kg8-border-gold: var(--kg9-line-strong);
  --kg5-accent-text: var(--kgmono-primary-text);
  --kg7-selected-gradient: linear-gradient(
    108deg,
    var(--kgmono-selection-strong),
    var(--kgmono-selection) 62%,
    transparent
  );
  --kg7-gold-shadow: 0 9px 24px rgba(0, 0, 0, 0.14);
}

html[data-kg-theme] body {
  background:
    radial-gradient(
      circle at 78% -13%,
      var(--kgmono-selection-strong),
      transparent 31rem
    ),
    linear-gradient(
      180deg,
      var(--kg9-canvas-top) 0,
      var(--kg9-canvas) 29rem
    ) fixed !important;
}

html[data-kg-theme] .mainContent::before {
  background: radial-gradient(
    circle,
    var(--kgmono-selection),
    transparent 68%
  ) !important;
}

html[data-kg-theme] .sidebar,
html[data-kg-theme="light"] .sidebar {
  border-right-color: var(--kg9-line) !important;
  background: linear-gradient(
    180deg,
    var(--kg9-surface-raised) 0%,
    var(--kg9-sidebar) 52%,
    var(--kg9-canvas) 100%
  ) !important;
  box-shadow:
    16px 0 42px rgba(0, 0, 0, 0.06),
    inset -1px 0 var(--kg9-line) !important;
}

html[data-kg-theme] .brand::after {
  background: linear-gradient(
    90deg,
    transparent,
    var(--kg9-line-strong),
    transparent
  ) !important;
}

html[data-kg-theme="light"] .brandMark {
  color: #ffffff !important;
  border-color: #000000 !important;
  background: linear-gradient(145deg, #292929, #050505 62%) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.16) !important;
}

html[data-kg-theme="dark"] .brandMark {
  color: #050505 !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  background: linear-gradient(145deg, #ffffff, #d5d5d5 68%) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.88) !important;
}

html[data-kg-theme] .sidebar nav a:hover,
html[data-kg-theme] .sidebarNavButton:hover,
html[data-kg-theme] .channelNavToggle:hover {
  background: linear-gradient(
    90deg,
    var(--kgmono-selection-strong),
    transparent
  ) !important;
}

html[data-kg-theme] .sidebar nav a.active,
html[data-kg-theme] .sidebarNavButton.active {
  color: var(--kg9-text) !important;
  background: linear-gradient(
    90deg,
    var(--kgmono-selection-strong),
    var(--kgmono-selection) 72%,
    transparent
  ) !important;
  box-shadow: inset 3px 0 var(--kg9-text) !important;
}

html[data-kg-theme] .pageHeader {
  border-color: var(--kg9-line-strong) !important;
  background: linear-gradient(
    128deg,
    var(--kg9-surface-high) 0%,
    var(--kg9-surface-raised) 54%,
    var(--kg9-surface) 100%
  ) !important;
}

html[data-kg-theme="light"] .pageHeader {
  background: linear-gradient(128deg, #ffffff 0%, #f7f7f7 56%, #ededed 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 15px 36px rgba(0, 0, 0, 0.075) !important;
}

html[data-kg-theme] .pageHeader::before,
html[data-kg-theme] .v985NextAction::before,
html[data-kg-theme] .v911ChannelSelection::before,
html[data-kg-theme] .v912IdeaScheduler::before,
html[data-kg-theme] .v983SeoPack::before,
html[data-kg-theme] .v912ProductionSchedule::before {
  background: linear-gradient(
    90deg,
    transparent,
    var(--kg9-faint) 16%,
    var(--kg9-text) 50%,
    var(--kg9-muted) 76%,
    transparent
  ) !important;
}

html[data-kg-theme] .pageHeader::after {
  border-color: var(--kg9-line-strong) !important;
  background: radial-gradient(
    circle,
    var(--kgmono-selection),
    transparent 68%
  ) !important;
}

html[data-kg-theme] .mainContent .sectionTitle::before {
  background: linear-gradient(
    180deg,
    var(--kg9-text),
    var(--kg9-muted) 52%,
    var(--kg9-text)
  ) !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent > .sectionTitle::after {
  background: linear-gradient(
    90deg,
    var(--kg9-line-strong),
    var(--kg9-line) 38%,
    transparent
  ) !important;
}

html[data-kg-theme]
  .mainContent
  :where(.eyebrow, .sectionEyebrow) {
  color: var(--kg9-text-soft) !important;
  border-color: var(--kg9-line) !important;
  background: var(--kgmono-selection) !important;
}

html[data-kg-theme]
  .mainContent
  :where(
    .card,
    .dataTable,
    .videoCard,
    .repairCard,
    .taskCard,
    .candidateCard,
    .postScanControls,
    .researchSubnav,
    .adminTabs,
    .adminSectionTabs,
    .taskDetailPanel,
    .v912IdeaScheduler,
    .v912ProductionSchedule,
    .v983SeoPack,
    .v98DataSurface > .sectionTitle:first-child,
    .v9114LiveActivity,
    .v91DailyRefresh,
    .v982IntelligenceCycle,
    .v9OwnerGuard,
    .v102ChannelProductionCard
  ) {
  border-color: var(--kg9-line) !important;
  background: linear-gradient(
    148deg,
    var(--kg9-surface-raised),
    var(--kg9-surface) 74%
  ) !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
  ) {
  background: linear-gradient(148deg, #ffffff 0%, #f6f6f6 76%) !important;
}

html[data-kg-theme]
  .mainContent
  :where(
    .card,
    .videoCard,
    .repairCard,
    .taskCard,
    .candidateCard,
    .v102ChannelProductionCard
  ):hover {
  border-color: var(--kg9-line-strong) !important;
}

html[data-kg-theme] .v985NextAction,
html[data-kg-theme] .v911ChannelSelection,
html[data-kg-theme] .v912IdeaScheduler,
html[data-kg-theme] .v983SeoPack,
html[data-kg-theme] .v912ProductionSchedule {
  border-color: var(--kg9-line-strong) !important;
  background: linear-gradient(
    145deg,
    var(--kg9-surface-raised),
    var(--kg9-surface)
  ) !important;
}

html[data-kg-theme] .v911ChannelChoice:hover:not(.isDisabled),
html[data-kg-theme] tbody tr:hover {
  background: linear-gradient(
    90deg,
    var(--kgmono-selection-strong),
    transparent
  ) !important;
}

html[data-kg-theme] .v911ChannelChoice.isSelected,
html[data-kg-theme] .v985SimpleProgress > .isActive,
html[data-kg-theme] .postScanContractStrip button.active {
  border-color: var(--kg9-line-strong) !important;
  background: var(--kg7-selected-gradient) !important;
  box-shadow:
    inset 3px 0 var(--kg9-text),
    0 10px 24px rgba(0, 0, 0, 0.1) !important;
}

html[data-kg-theme="light"] .v985SimpleProgress > .isActive > span,
html[data-kg-theme="light"] .kgBootGuardMark {
  color: #ffffff !important;
  background: linear-gradient(145deg, #292929, #050505 68%) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

html[data-kg-theme="dark"] .v985SimpleProgress > .isActive > span,
html[data-kg-theme="dark"] .kgBootGuardMark {
  color: #080808 !important;
  background: linear-gradient(145deg, #ffffff, #d6d6d6 68%) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34) !important;
}

html[data-kg-theme] .dataScanTabs button.active,
html[data-kg-theme] .postScanTabs button.active,
html[data-kg-theme] .v98DataTabs button.active,
html[data-kg-theme] .v98ScopeTabs button.active,
html[data-kg-theme] .v98PeriodBar button.active,
html[data-kg-theme] .periodToggle button.active,
html[data-kg-theme] .tabs button.active {
  color: var(--kg9-text) !important;
  background: var(--kgmono-selection-strong) !important;
  box-shadow: inset 0 -2px var(--kg9-text) !important;
}

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 {
  color: var(--kgmono-primary-text) !important;
  border-color: var(--kgmono-primary) !important;
  background: var(--kgmono-primary) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !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) {
  color: var(--kgmono-primary-text) !important;
  background: var(--kgmono-primary-hover) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

html[data-kg-theme] :where(button, .button).secondary,
html[data-kg-theme] .secondary,
html[data-kg-theme] .globalBackButton,
html[data-kg-theme] .youtubeDirectLink,
html[data-kg-theme] .secondaryLink,
html[data-kg-theme] .v9131LiveToggle,
html[data-kg-theme] .accountPasswordLink {
  color: var(--kg9-text-soft) !important;
  border-color: var(--kg9-line-strong) !important;
  background: var(--kg9-surface-raised) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08) !important;
}

html[data-kg-theme] :where(button, .button).secondary:hover:not(:disabled),
html[data-kg-theme] .globalBackButton:hover,
html[data-kg-theme] .youtubeDirectLink:hover,
html[data-kg-theme] .secondaryLink:hover,
html[data-kg-theme] .v9131LiveToggle:hover,
html[data-kg-theme] .accountPasswordLink:hover {
  color: var(--kg9-text) !important;
  border-color: var(--kg9-line-strong) !important;
  background: var(--kg9-surface-soft) !important;
}

html[data-kg-theme] :where(input, select, textarea):focus {
  border-color: var(--kg9-text-soft) !important;
  box-shadow:
    var(--kg9-focus),
    inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

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

html[data-kg-theme] .loginShell,
html[data-kg-theme] #kg-boot-guard {
  background:
    radial-gradient(
      circle at 70% 14%,
      var(--kgmono-selection-strong),
      transparent 31rem
    ),
    linear-gradient(
      145deg,
      var(--kg9-canvas-top),
      var(--kg9-canvas) 66%
    ) !important;
}

html[data-kg-theme] .loginBox.luxe,
html[data-kg-theme] .passwordRecoveryBox,
html[data-kg-theme] .modal,
html[data-kg-theme] .aiCostConfirmation,
html[data-kg-theme] .kgBootGuardCard {
  border-color: var(--kg9-line-strong) !important;
  background: linear-gradient(
    148deg,
    var(--kg9-surface-raised),
    var(--kg9-surface) 72%
  ) !important;
}

html[data-kg-theme] .loginBox.luxe::before {
  background: linear-gradient(
    90deg,
    transparent,
    var(--kg9-muted) 14%,
    var(--kg9-text) 50%,
    var(--kg9-muted) 72%,
    transparent
  ) !important;
}

/* Exercise Library: the same black/white identity inside both themes. */
.v11ExercisePage {
  --v11-line-strong: var(--kg9-line-strong);
  --v11-yellow: var(--kg9-text);
  --v11-yellow-strong: var(--kg9-muted);
}

html[data-kg-theme="light"] .v11ExercisePage {
  --v11-surface: rgba(255, 255, 255, 0.96);
  --v11-surface-strong: #ffffff;
  --v11-surface-soft: rgba(0, 0, 0, 0.035);
  --v11-line: rgba(0, 0, 0, 0.1);
  --v11-line-strong: rgba(0, 0, 0, 0.2);
  --v11-text: #0d0d0d;
  --v11-muted: #666666;
  --v11-yellow: #111111;
  --v11-yellow-strong: #4b4b4b;
}

html[data-kg-theme="dark"] .v11ExercisePage {
  --v11-surface: rgba(17, 17, 17, 0.94);
  --v11-surface-strong: #151515;
  --v11-surface-soft: rgba(255, 255, 255, 0.045);
  --v11-line: rgba(255, 255, 255, 0.1);
  --v11-line-strong: rgba(255, 255, 255, 0.2);
  --v11-text: #f7f7f7;
  --v11-muted: #a0a0a0;
  --v11-yellow: #f2f2f2;
  --v11-yellow-strong: #b8b8b8;
}

.v11ExerciseForm,
.v11SourcePanel,
.v11FormResult {
  background: var(--v11-surface) !important;
}

.v11Tabs button,
.v11HeaderDrive button,
.v11GhostButton,
.v11MiniButton,
.v11TagOptions button {
  color: var(--v11-muted) !important;
  border-color: var(--v11-line) !important;
  background: var(--v11-surface-soft) !important;
  box-shadow: none !important;
}

.v11Tabs button:hover,
.v11HeaderDrive button:hover,
.v11GhostButton:hover,
.v11MiniButton:hover,
.v11TagOptions button:hover {
  color: var(--v11-text) !important;
  border-color: var(--v11-line-strong) !important;
  background: var(--kgmono-selection-strong) !important;
}

.v11Tabs button.active,
.v11TagOptions button.selected,
.v11FormFooter button,
.v11ActionRow > button {
  color: var(--kgmono-primary-text) !important;
  border-color: var(--kgmono-primary) !important;
  background: var(--kgmono-primary) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

.v11Tabs button.active:hover,
.v11TagOptions button.selected:hover,
.v11FormFooter button:hover:not(:disabled),
.v11ActionRow > button:hover:not(:disabled) {
  color: var(--kgmono-primary-text) !important;
  background: var(--kgmono-primary-hover) !important;
}

.v11TagOptions button.add {
  color: var(--v11-text) !important;
  border-color: var(--v11-line-strong) !important;
  background: transparent !important;
}

.v11SectionNumber,
.v11FileDrop > span {
  color: var(--v11-text) !important;
  border-color: var(--v11-line-strong) !important;
  background: var(--kgmono-selection) !important;
}

.v11Progress i {
  background: linear-gradient(
    90deg,
    var(--kg9-muted),
    var(--kg9-text)
  ) !important;
}

.v11StatGrid b,
.v11CardTopline code,
.v11MiniButton,
.v11EmptyState > span,
.v11Eyebrow {
  color: var(--v11-text) !important;
}

.v11Preview,
.v11EmptyPreview {
  background:
    linear-gradient(135deg, var(--kgmono-selection-strong), transparent 46%),
    var(--v11-surface-soft) !important;
}

.v11Preview > span {
  color: var(--kgmono-primary-text) !important;
  background: var(--kgmono-primary) !important;
}

.v11ExerciseCard:hover {
  border-color: var(--v11-line-strong) !important;
}

#kg-boot-guard,
.kgBootGuardCard,
.kgBootGuardMark,
#kg-boot-retry {
  border-color: var(--kg9-line-strong) !important;
}

html[data-kg-theme="light"] #kg-boot-guard {
  color: #0d0d0d !important;
}

html[data-kg-theme="dark"] #kg-boot-guard {
  color: #f7f7f7 !important;
}