/*
 * KG Channel Intelligence OS V10.8 — Signature Dark
 *
 * Dark-theme presentation layer over V10.7. The light theme remains unchanged.
 * The visual system uses a deep neutral canvas, graphite surfaces and restrained
 * champagne-gold accents to create clearer hierarchy without yellow wash.
 */

html[data-kg-theme="dark"] {
  --kg8-canvas: #08090c;
  --kg8-canvas-soft: #0c0e12;
  --kg8-sidebar: #0d0f13;
  --kg8-surface: #13161b;
  --kg8-surface-raised: #181c22;
  --kg8-surface-high: #1d222a;
  --kg8-surface-soft: #222832;
  --kg8-border: #292f38;
  --kg8-border-soft: rgba(255, 255, 255, 0.065);
  --kg8-border-gold: rgba(231, 198, 106, 0.3);
  --kg8-text: #f5f6f8;
  --kg8-text-soft: #c7ccd4;
  --kg8-muted: #9299a5;
  --kg8-gold-pale: #f7e7ae;
  --kg8-gold: #e7c66a;
  --kg8-gold-mid: #d6ac42;
  --kg8-gold-deep: #a87522;
  --kg8-success: #2ccf91;
  --kg8-danger: #ff667a;
  --kg8-warning: #e7c66a;
  --kg8-info: #9eb7ff;

  /* Override inherited V10.7 tokens from one source of truth. */
  --kg7-canvas: var(--kg8-canvas);
  --kg7-canvas-top: var(--kg8-canvas-soft);
  --kg7-surface: var(--kg8-surface);
  --kg7-surface-high: var(--kg8-surface-raised);
  --kg7-surface-soft: var(--kg8-surface-soft);
  --kg7-border: var(--kg8-border);
  --kg7-border-high: #3b4350;
  --kg7-text: var(--kg8-text);
  --kg7-text-soft: var(--kg8-text-soft);
  --kg7-muted: var(--kg8-muted);
  --kg7-accent-label: var(--kg8-gold-pale);
  --kg7-gold: var(--kg8-gold);
  --kg7-gold-mid: var(--kg8-gold-mid);
  --kg7-gold-deep: var(--kg8-gold-deep);
  --kg7-success: var(--kg8-success);
  --kg7-danger: var(--kg8-danger);
  --kg7-card-gradient: linear-gradient(
    148deg,
    #1a1e24 0%,
    #15181e 48%,
    #121419 100%
  );
  --kg7-card-gradient-soft: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.042) 0%,
    rgba(255, 255, 255, 0.018) 48%,
    rgba(255, 255, 255, 0.008) 100%
  );
  --kg7-header-gradient:
    radial-gradient(
      circle at 88% -8%,
      rgba(231, 198, 106, 0.16),
      transparent 34%
    ),
    linear-gradient(128deg, #1b1f26 0%, #15181e 48%, #101217 100%);
  --kg7-key-gradient:
    radial-gradient(
      circle at 96% 0%,
      rgba(231, 198, 106, 0.1),
      transparent 30%
    ),
    linear-gradient(145deg, #1a1e24 0%, #14171c 54%, #111318 100%);
  --kg7-selected-gradient: linear-gradient(
    105deg,
    rgba(231, 198, 106, 0.14) 0%,
    rgba(231, 198, 106, 0.055) 42%,
    rgba(19, 22, 27, 0.98) 100%
  );
  --kg7-success-gradient: linear-gradient(
    110deg,
    rgba(44, 207, 145, 0.13),
    rgba(44, 207, 145, 0.035) 50%,
    rgba(19, 22, 27, 0.98)
  );
  --kg7-danger-gradient: linear-gradient(
    110deg,
    rgba(255, 102, 122, 0.13),
    rgba(255, 102, 122, 0.035) 50%,
    rgba(19, 22, 27, 0.98)
  );
  --kg7-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 12px 34px rgba(0, 0, 0, 0.23);
  --kg7-shadow-high:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 22px 58px rgba(0, 0, 0, 0.38);
  --kg7-gold-shadow: 0 10px 28px rgba(168, 117, 34, 0.22);

  /* Keep older compatibility layers aligned with the new dark palette. */
  --kg5-canvas: var(--kg8-canvas);
  --kg5-sidebar: var(--kg8-sidebar);
  --kg5-surface: var(--kg8-surface);
  --kg5-surface-raised: var(--kg8-surface-raised);
  --kg5-surface-soft: var(--kg8-surface-soft);
  --kg5-surface-hover: var(--kg8-surface-high);
  --kg5-surface-selected: #262215;
  --kg5-border: var(--kg8-border);
  --kg5-border-strong: #414956;
  --kg5-text: var(--kg8-text);
  --kg5-text-soft: var(--kg8-text-soft);
  --kg5-muted: var(--kg8-muted);
  --kg5-faint: #7f8793;
  --kg5-accent: var(--kg8-gold);
  --kg5-accent-hover: var(--kg8-gold-pale);
  --kg5-accent-label: var(--kg8-gold-pale);
  --kg5-success: var(--kg8-success);
  --kg5-success-text: #65e4b4;
  --kg5-danger: var(--kg8-danger);
  --kg5-danger-text: #ff8b9b;
  --kg5-warning: var(--kg8-gold-mid);
  --kg5-warning-text: var(--kg8-gold-pale);
  --kg5-info: var(--kg8-info);
  --kg5-focus: 0 0 0 3px rgba(231, 198, 106, 0.18);
}

/* Deep neutral canvas with one restrained warm light source. */
html[data-kg-theme="dark"] body {
  color: var(--kg8-text) !important;
  background:
    radial-gradient(
      circle at 79% -10%,
      rgba(231, 198, 106, 0.065),
      transparent 31rem
    ),
    radial-gradient(
      circle at 18% 115%,
      rgba(104, 123, 160, 0.045),
      transparent 38rem
    ),
    linear-gradient(180deg, #0c0e12 0%, var(--kg8-canvas) 30rem) fixed !important;
}

html[data-kg-theme="dark"] .mainContent::before {
  top: -260px;
  right: -300px;
  width: 720px;
  height: 720px;
  background: radial-gradient(
    circle,
    rgba(231, 198, 106, 0.038),
    transparent 67%
  );
}

/* Sidebar: visually quiet, with the active destination carrying the accent. */
html[data-kg-theme="dark"] .sidebar {
  border-right: 1px solid var(--kg8-border-soft) !important;
  background: linear-gradient(
    180deg,
    #111419 0%,
    var(--kg8-sidebar) 48%,
    #0a0c0f 100%
  ) !important;
  box-shadow:
    18px 0 48px rgba(0, 0, 0, 0.22),
    inset -1px 0 rgba(255, 255, 255, 0.018) !important;
}

html[data-kg-theme="dark"] .brand::after {
  right: 22px;
  left: 22px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(231, 198, 106, 0.32),
    transparent
  );
}

html[data-kg-theme="dark"] .brandMark {
  color: #17140d !important;
  border: 1px solid rgba(247, 231, 174, 0.42) !important;
  background: linear-gradient(
    142deg,
    var(--kg8-gold-pale) 0%,
    var(--kg8-gold) 44%,
    var(--kg8-gold-deep) 100%
  ) !important;
  box-shadow:
    0 10px 26px rgba(168, 117, 34, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.58) !important;
}

html[data-kg-theme="dark"] .sidebar nav a,
html[data-kg-theme="dark"] .sidebarNavButton,
html[data-kg-theme="dark"] .channelNavToggle {
  color: #aeb5bf !important;
  border: 1px solid transparent !important;
}

html[data-kg-theme="dark"] .sidebar nav a:hover,
html[data-kg-theme="dark"] .sidebarNavButton:hover,
html[data-kg-theme="dark"] .channelNavToggle:hover {
  color: var(--kg8-text) !important;
  border-color: rgba(255, 255, 255, 0.045) !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.052),
    rgba(255, 255, 255, 0.02)
  ) !important;
  transform: translateX(2px);
}

html[data-kg-theme="dark"] .sidebar nav a.active,
html[data-kg-theme="dark"] .sidebarNavButton.active {
  color: var(--kg8-text) !important;
  border-color: rgba(231, 198, 106, 0.15) !important;
  background: linear-gradient(
    90deg,
    rgba(231, 198, 106, 0.12),
    rgba(231, 198, 106, 0.035) 72%,
    transparent
  ) !important;
  box-shadow:
    inset 3px 0 var(--kg8-gold),
    inset 0 1px rgba(255, 255, 255, 0.025) !important;
}

html[data-kg-theme="dark"] .v10ThemeToggle {
  border-color: var(--kg8-border-soft) !important;
  background: linear-gradient(145deg, #171a20, #111419) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025),
    0 8px 22px rgba(0, 0, 0, 0.2) !important;
}

/* Page header: luxurious graphite, not a yellow panel. */
html[data-kg-theme="dark"] .pageHeader {
  min-height: 112px;
  border-color: rgba(231, 198, 106, 0.18) !important;
  background:
    radial-gradient(
      circle at 88% -12%,
      rgba(231, 198, 106, 0.15),
      transparent 35%
    ),
    radial-gradient(
      circle at 70% 130%,
      rgba(132, 150, 188, 0.045),
      transparent 42%
    ),
    linear-gradient(130deg, #1b1f26 0%, #15181e 50%, #101217 100%) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.04),
    0 22px 58px rgba(0, 0, 0, 0.34) !important;
}

html[data-kg-theme="dark"] .pageHeader::before {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--kg8-gold-deep) 12%,
    var(--kg8-gold-pale) 47%,
    var(--kg8-gold) 70%,
    transparent 100%
  );
  opacity: 0.86;
}

html[data-kg-theme="dark"] .pageHeader::after {
  top: -108px;
  right: -52px;
  width: 270px;
  height: 270px;
  border-color: rgba(231, 198, 106, 0.12);
  background: radial-gradient(
    circle,
    rgba(231, 198, 106, 0.055),
    transparent 69%
  );
}

html[data-kg-theme="dark"] .pageHeader h1 {
  color: var(--kg8-text) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
}

html[data-kg-theme="dark"] .pageHeader p {
  color: var(--kg8-text-soft) !important;
}

html[data-kg-theme="dark"]
  .mainContent
  :where(.eyebrow, .sectionEyebrow) {
  color: var(--kg8-gold-pale) !important;
  border-color: rgba(231, 198, 106, 0.23);
  background: linear-gradient(
    90deg,
    rgba(231, 198, 106, 0.12),
    rgba(231, 198, 106, 0.035)
  );
}

html[data-kg-theme="dark"] .mainContent .sectionTitle::before {
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--kg8-gold-pale),
    var(--kg8-gold) 48%,
    var(--kg8-gold-deep)
  );
  box-shadow: 0 0 16px rgba(231, 198, 106, 0.16);
}

html[data-kg-theme="dark"] .mainContent > .sectionTitle::after {
  background: linear-gradient(
    90deg,
    rgba(231, 198, 106, 0.34),
    rgba(255, 255, 255, 0.065) 34%,
    transparent
  );
}

/* Graphite surfaces: fewer competing outlines and cleaner depth. */
html[data-kg-theme="dark"]
  .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(--kg8-border-soft) !important;
  background: linear-gradient(
    148deg,
    #1a1e24 0%,
    #15181e 48%,
    #121419 100%
  ) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025),
    0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

html[data-kg-theme="dark"]
  .mainContent
  :where(
    .card,
    .videoCard,
    .repairCard,
    .taskCard,
    .candidateCard,
    .v102ChannelProductionCard
  ):hover {
  border-color: rgba(231, 198, 106, 0.2) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 19px 45px rgba(0, 0, 0, 0.31) !important;
  transform: translateY(-1px);
}

/* One clear premium treatment for operational priorities. */
html[data-kg-theme="dark"] .v985NextAction,
html[data-kg-theme="dark"] .v911ChannelSelection,
html[data-kg-theme="dark"] .v912IdeaScheduler,
html[data-kg-theme="dark"] .v983SeoPack,
html[data-kg-theme="dark"] .v912ProductionSchedule {
  border-color: rgba(231, 198, 106, 0.22) !important;
  background:
    radial-gradient(
      circle at 96% -8%,
      rgba(231, 198, 106, 0.085),
      transparent 31%
    ),
    linear-gradient(145deg, #1b1f26 0%, #15181e 53%, #111318 100%) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 20px 52px rgba(0, 0, 0, 0.34) !important;
}

html[data-kg-theme="dark"] .v985NextAction::before,
html[data-kg-theme="dark"] .v911ChannelSelection::before,
html[data-kg-theme="dark"] .v912IdeaScheduler::before,
html[data-kg-theme="dark"] .v983SeoPack::before,
html[data-kg-theme="dark"] .v912ProductionSchedule::before {
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent,
    var(--kg8-gold-deep) 12%,
    var(--kg8-gold-pale) 48%,
    var(--kg8-gold) 72%,
    transparent 100%
  ) !important;
  opacity: 0.88 !important;
}

html[data-kg-theme="dark"] .v911ChannelChoice,
html[data-kg-theme="dark"] .v985SimpleProgress > div,
html[data-kg-theme="dark"] .v9131LiveCollapsed,
html[data-kg-theme="dark"] .v982OperatingFlow > span,
html[data-kg-theme="dark"] .v982OperatingFlow > div,
html[data-kg-theme="dark"] .v91DailyStages > div,
html[data-kg-theme="dark"] .v984SeoBranchSummary,
html[data-kg-theme="dark"] .v102ProductionMeta > div,
html[data-kg-theme="dark"] .v102SeoGrid section,
html[data-kg-theme="dark"] .v102ProductionDetails,
html[data-kg-theme="dark"] .v102Variants {
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.045),
    rgba(255, 255, 255, 0.012)
  ) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.018),
    0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

html[data-kg-theme="dark"] .v911ChannelChoice:hover:not(.isDisabled) {
  border-color: rgba(231, 198, 106, 0.24) !important;
  background: linear-gradient(
    120deg,
    rgba(231, 198, 106, 0.07),
    rgba(255, 255, 255, 0.025)
  ) !important;
}

html[data-kg-theme="dark"] .v911ChannelChoice.isSelected,
html[data-kg-theme="dark"] .v985SimpleProgress > .isActive {
  border-color: rgba(231, 198, 106, 0.52) !important;
  background: linear-gradient(
    105deg,
    rgba(231, 198, 106, 0.145),
    rgba(231, 198, 106, 0.045) 48%,
    rgba(19, 22, 27, 0.98)
  ) !important;
  box-shadow:
    inset 3px 0 var(--kg8-gold),
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 12px 30px rgba(0, 0, 0, 0.26) !important;
}

html[data-kg-theme="dark"] .v985SimpleProgress > .isActive > span,
html[data-kg-theme="dark"] .kgBootGuardMark {
  color: #17140d !important;
  background: linear-gradient(
    142deg,
    var(--kg8-gold-pale),
    var(--kg8-gold) 48%,
    var(--kg8-gold-deep)
  ) !important;
  box-shadow: 0 9px 24px rgba(168, 117, 34, 0.22) !important;
}

/* Metrics keep their hierarchy without a bright stripe on every card. */
html[data-kg-theme="dark"] .postScanContractStrip button,
html[data-kg-theme="dark"] .mainContent .postScanContractStrip button,
html[data-kg-theme="dark"] .v98FactGrid .card,
html[data-kg-theme="dark"] .v98SectionCard,
html[data-kg-theme="dark"] .v98CoverageCard {
  border-color: var(--kg8-border-soft) !important;
  background: linear-gradient(148deg, #1a1e24, #13161b 72%) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025),
    0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

html[data-kg-theme="dark"] .postScanContractStrip button::before,
html[data-kg-theme="dark"] .v98FactGrid .card::before,
html[data-kg-theme="dark"] .v98SectionCard::before,
html[data-kg-theme="dark"] .v98CoverageCard::before {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(231, 198, 106, 0.68),
    transparent
  );
  opacity: 0.62;
}

html[data-kg-theme="dark"] .postScanContractStrip button:hover,
html[data-kg-theme="dark"] .postScanContractStrip button.active {
  border-color: rgba(231, 198, 106, 0.46) !important;
  background: linear-gradient(
    110deg,
    rgba(231, 198, 106, 0.13),
    rgba(19, 22, 27, 0.98) 72%
  ) !important;
}

html[data-kg-theme="dark"] .postScanContractStrip strong {
  color: var(--kg8-gold-pale) !important;
}

/* Tabs and tables: calm neutral base, precise active state. */
html[data-kg-theme="dark"] .dataScanTabs,
html[data-kg-theme="dark"] .postScanTabs,
html[data-kg-theme="dark"] .v98DataTabs,
html[data-kg-theme="dark"] .v98ScopeTabs,
html[data-kg-theme="dark"] .v98PeriodBar,
html[data-kg-theme="dark"] .periodToggle,
html[data-kg-theme="dark"] .tabs {
  border-color: var(--kg8-border-soft) !important;
  background: linear-gradient(145deg, #111419, #0e1014) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.02),
    0 6px 18px rgba(0, 0, 0, 0.2) !important;
}

html[data-kg-theme="dark"] .dataScanTabs button.active,
html[data-kg-theme="dark"] .postScanTabs button.active,
html[data-kg-theme="dark"] .v98DataTabs button.active,
html[data-kg-theme="dark"] .v98ScopeTabs button.active,
html[data-kg-theme="dark"] .v98PeriodBar button.active,
html[data-kg-theme="dark"] .periodToggle button.active,
html[data-kg-theme="dark"] .tabs button.active {
  color: var(--kg8-text) !important;
  border-color: rgba(231, 198, 106, 0.18) !important;
  background: linear-gradient(
    110deg,
    rgba(231, 198, 106, 0.12),
    rgba(255, 255, 255, 0.035)
  ) !important;
  box-shadow:
    inset 0 -2px var(--kg8-gold),
    0 6px 16px rgba(0, 0, 0, 0.19) !important;
}

html[data-kg-theme="dark"] .dataTable,
html[data-kg-theme="dark"] .v912IdeaTableWrap,
html[data-kg-theme="dark"] table {
  border-color: var(--kg8-border-soft) !important;
  background: linear-gradient(148deg, #181c22, #121419 74%) !important;
}

html[data-kg-theme="dark"] th {
  color: #d5d9df !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: linear-gradient(180deg, #20252d, #191d23) !important;
}

html[data-kg-theme="dark"] td {
  color: #bcc2cb !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
}

html[data-kg-theme="dark"] tbody tr:hover {
  background: linear-gradient(
    90deg,
    rgba(231, 198, 106, 0.07),
    rgba(255, 255, 255, 0.012)
  ) !important;
}

/* Primary actions use gold once; secondary actions stay graphite. */
html[data-kg-theme="dark"]
  .mainContent
  :where(button, .button):not(
    .secondary,
    .ghostDanger,
    .danger,
    .sidebarNavButton,
    .channelNavToggle,
    .v10ThemeToggle,
    .accountPasswordLink,
    .v9131LiveToggle
  ),
html[data-kg-theme="dark"] .accountLoginForm > button,
html[data-kg-theme="dark"] .passwordRecoveryBox > button,
html[data-kg-theme="dark"] #kg-boot-retry {
  color: #17140d !important;
  border-color: var(--kg8-gold-deep) !important;
  background: linear-gradient(
    142deg,
    var(--kg8-gold-pale) 0%,
    var(--kg8-gold) 44%,
    var(--kg8-gold-mid) 69%,
    var(--kg8-gold-deep) 100%
  ) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.55),
    0 9px 24px rgba(168, 117, 34, 0.2) !important;
}

html[data-kg-theme="dark"]
  .mainContent
  :where(button, .button):not(
    .secondary,
    .ghostDanger,
    .danger,
    .sidebarNavButton,
    .channelNavToggle,
    .v10ThemeToggle,
    .accountPasswordLink,
    .v9131LiveToggle
  ):hover:not(:disabled),
html[data-kg-theme="dark"] .accountLoginForm > button:hover:not(:disabled),
html[data-kg-theme="dark"] .passwordRecoveryBox > button:hover:not(:disabled),
html[data-kg-theme="dark"] #kg-boot-retry:hover:not(:disabled) {
  color: #12100a !important;
  border-color: var(--kg8-gold-mid) !important;
  background: linear-gradient(
    142deg,
    #fff1bb 0%,
    #efd37d 44%,
    var(--kg8-gold) 70%,
    #b78128 100%
  ) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.64),
    0 13px 30px rgba(168, 117, 34, 0.28) !important;
}

html[data-kg-theme="dark"] :where(button, .button).secondary,
html[data-kg-theme="dark"] .secondary,
html[data-kg-theme="dark"] .globalBackButton,
html[data-kg-theme="dark"] .youtubeDirectLink,
html[data-kg-theme="dark"] .secondaryLink,
html[data-kg-theme="dark"] .v9131LiveToggle,
html[data-kg-theme="dark"] .accountPasswordLink {
  color: var(--kg8-text-soft) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: linear-gradient(145deg, #1b1f26, #14171c) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025),
    0 7px 18px rgba(0, 0, 0, 0.2) !important;
}

html[data-kg-theme="dark"] :where(button, .button).secondary:hover:not(:disabled),
html[data-kg-theme="dark"] .globalBackButton:hover,
html[data-kg-theme="dark"] .youtubeDirectLink:hover,
html[data-kg-theme="dark"] .secondaryLink:hover,
html[data-kg-theme="dark"] .v9131LiveToggle:hover,
html[data-kg-theme="dark"] .accountPasswordLink:hover {
  color: var(--kg8-text) !important;
  border-color: rgba(231, 198, 106, 0.28) !important;
  background: linear-gradient(
    120deg,
    rgba(231, 198, 106, 0.075),
    #191d23
  ) !important;
}

html[data-kg-theme="dark"] :where(input, select, textarea) {
  color: var(--kg8-text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: linear-gradient(145deg, #111419, #0d0f13) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

html[data-kg-theme="dark"] :where(input, select, textarea)::placeholder {
  color: #777f8b !important;
}

html[data-kg-theme="dark"] :where(input, select, textarea):focus {
  border-color: rgba(231, 198, 106, 0.66) !important;
  box-shadow:
    0 0 0 3px rgba(231, 198, 106, 0.13),
    inset 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

/* Semantic colors are used only for meaning. */
html[data-kg-theme="dark"] .v102ConfirmedTitle,
html[data-kg-theme="dark"] .v102SyncNotice,
html[data-kg-theme="dark"]
  :where(.badge.success, .toast, .truthBanner, .strategyBanner, .dataScanNotice) {
  border-color: rgba(44, 207, 145, 0.3) !important;
  background: linear-gradient(
    110deg,
    rgba(44, 207, 145, 0.12),
    rgba(19, 22, 27, 0.98) 66%
  ) !important;
}

html[data-kg-theme="dark"] .v102ChannelProductionCard.cancelled,
html[data-kg-theme="dark"] .v102CancelReason,
html[data-kg-theme="dark"]
  :where(
    .badge.danger,
    .dangerPanel,
    .revisionBanner,
    .candidateExclusionNotice,
    .v9114LiveError
  ) {
  border-color: rgba(255, 102, 122, 0.3) !important;
  background: linear-gradient(
    110deg,
    rgba(255, 102, 122, 0.115),
    rgba(19, 22, 27, 0.98) 66%
  ) !important;
}

html[data-kg-theme="dark"]
  :where(
    .badge.warning,
    .warningBox,
    .dataScanDetailNotice,
    .v6ApprovalPanel,
    .badge.info,
    .infoBox,
    .dataScanSafetyBanner
  ),
html[data-kg-theme="dark"] .v985PaidAiGuard {
  border-color: rgba(231, 198, 106, 0.28) !important;
  background: linear-gradient(
    110deg,
    rgba(231, 198, 106, 0.105),
    rgba(19, 22, 27, 0.98) 68%
  ) !important;
}

/* Login, dialogs and boot recovery inherit the same premium surface. */
html[data-kg-theme="dark"] .loginShell,
html[data-kg-theme="dark"] #kg-boot-guard {
  color: var(--kg8-text) !important;
  background:
    radial-gradient(
      circle at 70% 14%,
      rgba(231, 198, 106, 0.075),
      transparent 31rem
    ),
    linear-gradient(145deg, #0d1014, var(--kg8-canvas) 66%) !important;
}

html[data-kg-theme="dark"] .loginBox.luxe,
html[data-kg-theme="dark"] .passwordRecoveryBox,
html[data-kg-theme="dark"] .modal,
html[data-kg-theme="dark"] .aiCostConfirmation,
html[data-kg-theme="dark"] .kgBootGuardCard {
  border-color: rgba(231, 198, 106, 0.19) !important;
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(231, 198, 106, 0.075),
      transparent 30%
    ),
    linear-gradient(148deg, #1b1f26, #13161b 72%) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 26px 68px rgba(0, 0, 0, 0.42) !important;
}

html[data-kg-theme="dark"] .loginBox.luxe::before {
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent,
    var(--kg8-gold-deep) 14%,
    var(--kg8-gold-pale) 50%,
    var(--kg8-gold) 72%,
    transparent
  ) !important;
}

html[data-kg-theme="dark"] #kg-boot-message {
  color: var(--kg8-muted) !important;
}

/* Fine polish */
html[data-kg-theme="dark"] :focus-visible {
  outline: 2px solid var(--kg8-gold) !important;
  outline-offset: 2px;
}

html[data-kg-theme="dark"] {
  scrollbar-color: #3c424c #0d0f13;
}

html[data-kg-theme="dark"] ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

html[data-kg-theme="dark"] ::-webkit-scrollbar-track {
  background: #0d0f13;
}

html[data-kg-theme="dark"] ::-webkit-scrollbar-thumb {
  border: 3px solid #0d0f13;
  border-radius: 999px;
  background: #3c424c;
}

html[data-kg-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #545c68;
}

@media (max-width: 760px) {
  html[data-kg-theme="dark"] .pageHeader {
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.035),
      0 16px 38px rgba(0, 0, 0, 0.3) !important;
  }

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

@media (prefers-reduced-motion: reduce) {
  html[data-kg-theme="dark"]
    .mainContent
    :where(
      .card,
      .videoCard,
      .repairCard,
      .taskCard,
      .candidateCard,
      .v102ChannelProductionCard
    ):hover {
    transform: none;
  }
}