/*
 * KG Channel Intelligence OS V10.9 — Executive Dual Theme
 *
 * Presentation-only layer over V10.8. Both themes share the same restrained
 * graphite/champagne visual language. Light mode replaces large pure-white
 * fields with warm mineral layers; dark mode removes the remaining navy cast,
 * reduces outlines and reserves champagne for hierarchy and action.
 */

:root {
  --kg9-radius-control: 8px;
  --kg9-radius-card: 12px;
  --kg9-radius-panel: 16px;
  --kg9-motion: 170ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

html[data-kg-theme="dark"] {
  color-scheme: dark;
  --kg9-canvas: #090a0c;
  --kg9-canvas-top: #0d0e11;
  --kg9-sidebar: #0c0d10;
  --kg9-surface: #141518;
  --kg9-surface-raised: #1a1c20;
  --kg9-surface-high: #202328;
  --kg9-surface-soft: #25282e;
  --kg9-surface-hover: #292d33;
  --kg9-surface-selected: #282315;
  --kg9-line: rgba(255, 255, 255, 0.07);
  --kg9-line-strong: rgba(255, 255, 255, 0.13);
  --kg9-text: #f4f2ed;
  --kg9-text-soft: #cbc8c0;
  --kg9-muted: #9d9a93;
  --kg9-faint: #85837d;
  --kg9-champagne-pale: #f0dfa9;
  --kg9-champagne: #d8b765;
  --kg9-champagne-mid: #c49a3d;
  --kg9-champagne-deep: #967022;
  --kg9-accent-label: #efdc9e;
  --kg9-success: #35c990;
  --kg9-success-text: #72dfb5;
  --kg9-danger: #f16b7d;
  --kg9-danger-text: #ff98a6;
  --kg9-info: #8eb4dc;
  --kg9-info-text: #b7d0eb;
  --kg9-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 12px 30px rgba(0, 0, 0, 0.24);
  --kg9-shadow-high:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 22px 54px rgba(0, 0, 0, 0.38);
  --kg9-focus: 0 0 0 3px rgba(216, 183, 101, 0.18);
}

html[data-kg-theme="light"] {
  color-scheme: light;
  --kg9-canvas: #e9eae7;
  --kg9-canvas-top: #f2f0e8;
  --kg9-sidebar: #eeede8;
  --kg9-surface: #f3f2ed;
  --kg9-surface-raised: #f8f7f2;
  --kg9-surface-high: #fbfaf6;
  --kg9-surface-soft: #e7e7e2;
  --kg9-surface-hover: #e1e1dc;
  --kg9-surface-selected: #eee4c8;
  --kg9-line: rgba(24, 27, 31, 0.09);
  --kg9-line-strong: rgba(24, 27, 31, 0.16);
  --kg9-text: #1a1d21;
  --kg9-text-soft: #41474f;
  --kg9-muted: #626a73;
  --kg9-faint: #747b83;
  --kg9-champagne-pale: #f1dfaa;
  --kg9-champagne: #c89c36;
  --kg9-champagne-mid: #b58524;
  --kg9-champagne-deep: #775713;
  --kg9-accent-label: #6d500e;
  --kg9-success: #177a59;
  --kg9-success-text: #0f6649;
  --kg9-danger: #bc3e53;
  --kg9-danger-text: #a62d41;
  --kg9-info: #315f8d;
  --kg9-info-text: #274f78;
  --kg9-shadow:
    0 1px 1px rgba(24, 27, 31, 0.035),
    0 9px 24px rgba(24, 27, 31, 0.065);
  --kg9-shadow-high:
    0 1px 1px rgba(24, 27, 31, 0.04),
    0 18px 44px rgba(24, 27, 31, 0.1);
  --kg9-focus: 0 0 0 3px rgba(181, 133, 36, 0.18);
}

/* Feed every inherited visual layer from the V10.9 tokens. */
html[data-kg-theme] {
  --kg8-canvas: var(--kg9-canvas);
  --kg8-canvas-soft: var(--kg9-canvas-top);
  --kg8-sidebar: var(--kg9-sidebar);
  --kg8-surface: var(--kg9-surface);
  --kg8-surface-raised: var(--kg9-surface-raised);
  --kg8-surface-high: var(--kg9-surface-high);
  --kg8-surface-soft: var(--kg9-surface-soft);
  --kg8-border: var(--kg9-line);
  --kg8-border-soft: var(--kg9-line);
  --kg8-border-gold: color-mix(
    in srgb,
    var(--kg9-champagne) 32%,
    transparent
  );
  --kg8-text: var(--kg9-text);
  --kg8-text-soft: var(--kg9-text-soft);
  --kg8-muted: var(--kg9-muted);
  --kg8-gold-pale: var(--kg9-champagne-pale);
  --kg8-gold: var(--kg9-champagne);
  --kg8-gold-mid: var(--kg9-champagne-mid);
  --kg8-gold-deep: var(--kg9-champagne-deep);
  --kg8-success: var(--kg9-success);
  --kg8-danger: var(--kg9-danger);
  --kg8-warning: var(--kg9-champagne);
  --kg8-info: var(--kg9-info);

  --kg7-canvas: var(--kg9-canvas);
  --kg7-canvas-top: var(--kg9-canvas-top);
  --kg7-surface: var(--kg9-surface);
  --kg7-surface-high: var(--kg9-surface-raised);
  --kg7-surface-soft: var(--kg9-surface-soft);
  --kg7-border: var(--kg9-line);
  --kg7-border-high: var(--kg9-line-strong);
  --kg7-text: var(--kg9-text);
  --kg7-text-soft: var(--kg9-text-soft);
  --kg7-muted: var(--kg9-muted);
  --kg7-accent-label: var(--kg9-accent-label);
  --kg7-gold: var(--kg9-champagne);
  --kg7-gold-mid: var(--kg9-champagne-mid);
  --kg7-gold-deep: var(--kg9-champagne-deep);
  --kg7-success: var(--kg9-success);
  --kg7-danger: var(--kg9-danger);
  --kg7-card-gradient: linear-gradient(
    145deg,
    var(--kg9-surface-raised),
    var(--kg9-surface) 74%
  );
  --kg7-card-gradient-soft: linear-gradient(
    145deg,
    color-mix(in srgb, var(--kg9-surface-high) 86%, transparent),
    color-mix(in srgb, var(--kg9-surface) 94%, transparent)
  );
  --kg7-selected-gradient: linear-gradient(
    108deg,
    color-mix(in srgb, var(--kg9-champagne) 19%, var(--kg9-surface-raised)),
    color-mix(in srgb, var(--kg9-champagne) 6%, var(--kg9-surface)) 60%,
    var(--kg9-surface)
  );
  --kg7-success-gradient: linear-gradient(
    112deg,
    color-mix(in srgb, var(--kg9-success) 14%, var(--kg9-surface-raised)),
    var(--kg9-surface) 68%
  );
  --kg7-danger-gradient: linear-gradient(
    112deg,
    color-mix(in srgb, var(--kg9-danger) 13%, var(--kg9-surface-raised)),
    var(--kg9-surface) 68%
  );
  --kg7-shadow: var(--kg9-shadow);
  --kg7-shadow-high: var(--kg9-shadow-high);
  --kg7-gold-shadow: 0 9px 24px
    color-mix(in srgb, var(--kg9-champagne-deep) 20%, transparent);

  --kg5-canvas: var(--kg9-canvas);
  --kg5-sidebar: var(--kg9-sidebar);
  --kg5-surface: var(--kg9-surface);
  --kg5-surface-raised: var(--kg9-surface-raised);
  --kg5-surface-soft: var(--kg9-surface-soft);
  --kg5-surface-hover: var(--kg9-surface-hover);
  --kg5-surface-selected: var(--kg9-surface-selected);
  --kg5-border: var(--kg9-line);
  --kg5-border-strong: var(--kg9-line-strong);
  --kg5-text: var(--kg9-text);
  --kg5-text-soft: var(--kg9-text-soft);
  --kg5-muted: var(--kg9-muted);
  --kg5-faint: var(--kg9-faint);
  --kg5-accent: var(--kg9-champagne);
  --kg5-accent-hover: var(--kg9-champagne-mid);
  --kg5-accent-text: #17140d;
  --kg5-accent-label: var(--kg9-accent-label);
  --kg5-success: var(--kg9-success);
  --kg5-success-text: var(--kg9-success-text);
  --kg5-danger: var(--kg9-danger);
  --kg5-danger-text: var(--kg9-danger-text);
  --kg5-warning: var(--kg9-champagne-mid);
  --kg5-warning-text: var(--kg9-accent-label);
  --kg5-info: var(--kg9-info);
  --kg5-shadow: var(--kg9-shadow);
  --kg5-shadow-raised: var(--kg9-shadow-high);
  --kg5-focus: var(--kg9-focus);

  --kg4-canvas: var(--kg9-canvas);
  --kg4-canvas-soft: var(--kg9-canvas-top);
  --kg4-sidebar: var(--kg9-sidebar);
  --kg4-surface: var(--kg9-surface);
  --kg4-surface-raised: var(--kg9-surface-raised);
  --kg4-surface-soft: var(--kg9-surface-soft);
  --kg4-surface-hover: var(--kg9-surface-hover);
  --kg4-surface-selected: var(--kg9-surface-selected);
  --kg4-border: var(--kg9-line);
  --kg4-border-strong: var(--kg9-line-strong);
  --kg4-text: var(--kg9-text);
  --kg4-text-soft: var(--kg9-text-soft);
  --kg4-muted: var(--kg9-muted);
  --kg4-faint: var(--kg9-faint);
  --kg4-accent: var(--kg9-champagne);
  --kg4-accent-strong: var(--kg9-champagne-mid);
  --kg4-accent-soft: var(--kg9-accent-label);
  --kg4-success: var(--kg9-success);
  --kg4-success-soft: var(--kg9-success-text);
  --kg4-warning: var(--kg9-accent-label);
  --kg4-danger: var(--kg9-danger-text);
  --kg4-info: var(--kg9-info);
  --kg4-shadow: var(--kg9-shadow);
  --kg4-shadow-raised: var(--kg9-shadow-high);
  --kg4-focus: var(--kg9-focus);

  --kgs-canvas: var(--kg9-canvas);
  --kgs-canvas-deep: var(--kg9-canvas-top);
  --kgs-sidebar: var(--kg9-sidebar);
  --kgs-surface: var(--kg9-surface);
  --kgs-surface-raised: var(--kg9-surface-raised);
  --kgs-surface-soft: var(--kg9-surface-soft);
  --kgs-surface-hover: var(--kg9-surface-hover);
  --kgs-surface-selected: var(--kg9-surface-selected);
  --kgs-border: var(--kg9-line);
  --kgs-border-strong: var(--kg9-line-strong);
  --kgs-text: var(--kg9-text);
  --kgs-text-soft: var(--kg9-text-soft);
  --kgs-muted: var(--kg9-muted);
  --kgs-faint: var(--kg9-faint);
  --kgs-accent: var(--kg9-champagne);
  --kgs-accent-strong: var(--kg9-champagne-mid);
  --kgs-accent-soft: var(--kg9-accent-label);
  --kgs-violet: var(--kg9-champagne-mid);
  --kgs-cyan: var(--kg9-info);
  --kgs-success: var(--kg9-success);
  --kgs-warning: var(--kg9-champagne-mid);
  --kgs-danger: var(--kg9-danger);
  --kgs-shadow: var(--kg9-shadow);
  --kgs-shadow-raised: var(--kg9-shadow-high);
  --kgs-focus: var(--kg9-focus);

  --kgp-bg: var(--kg9-canvas);
  --kgp-bg-elevated: var(--kg9-sidebar);
  --kgp-surface: var(--kg9-surface);
  --kgp-surface-raised: var(--kg9-surface-raised);
  --kgp-surface-soft: var(--kg9-surface-soft);
  --kgp-line: var(--kg9-line);
  --kgp-line-strong: var(--kg9-line-strong);
  --kgp-text: var(--kg9-text);
  --kgp-text-soft: var(--kg9-text-soft);
  --kgp-muted: var(--kg9-muted);
  --kgp-faint: var(--kg9-faint);
  --kgp-accent: var(--kg9-champagne);
  --kgp-accent-2: var(--kg9-champagne-mid);

  --ink: var(--kg9-text);
  --muted: var(--kg9-muted);
  --green: var(--kg9-champagne-mid);
  --green2: var(--kg9-champagne);
  --nav: var(--kg9-sidebar);
  --line: var(--kg9-line);
  --soft: var(--kg9-surface-raised);
  --white: var(--kg9-surface);
  --amber: var(--kg9-champagne-mid);
  --red: var(--kg9-danger);
  --gold: var(--kg9-champagne);
  --gold2: var(--kg9-champagne-mid);
  --bg: var(--kg9-canvas);
  --surface: var(--kg9-surface);
  --shadow: var(--kg9-shadow);
  --shadow2: var(--kg9-shadow-high);
}

html[data-kg-theme="dark"] {
  --kg7-header-gradient:
    radial-gradient(
      circle at 88% -12%,
      rgba(216, 183, 101, 0.12),
      transparent 34%
    ),
    linear-gradient(128deg, #1c1d20 0%, #16171a 52%, #111214 100%);
  --kg7-key-gradient:
    radial-gradient(
      circle at 96% -4%,
      rgba(216, 183, 101, 0.07),
      transparent 30%
    ),
    linear-gradient(145deg, #1b1c20 0%, #151619 56%, #121315 100%);
}

html[data-kg-theme="light"] {
  --kg7-header-gradient:
    radial-gradient(
      circle at 88% -14%,
      rgba(200, 156, 54, 0.24),
      transparent 36%
    ),
    linear-gradient(128deg, #eee5ce 0%, #eeede7 50%, #e4e6e3 100%);
  --kg7-key-gradient:
    radial-gradient(
      circle at 96% -6%,
      rgba(200, 156, 54, 0.16),
      transparent 31%
    ),
    linear-gradient(145deg, #f0eadb 0%, #f2f1ec 52%, #e9eae6 100%);
}

/* Canvas: calm mineral layers, without a white or blue wash. */
html[data-kg-theme] body {
  color: var(--kg9-text) !important;
  background:
    radial-gradient(
      circle at 78% -11%,
      color-mix(in srgb, var(--kg9-champagne) 8%, transparent),
      transparent 31rem
    ),
    linear-gradient(
      180deg,
      var(--kg9-canvas-top) 0,
      var(--kg9-canvas) 29rem
    ) fixed !important;
}

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

html[data-kg-theme] .mainContent::before {
  top: -280px;
  right: -340px;
  width: 760px;
  height: 760px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--kg9-champagne) 4%, transparent),
    transparent 68%
  );
}

/* Sidebar: one quiet rail and one unmistakable active destination. */
html[data-kg-theme] .sidebar {
  border-right: 1px solid var(--kg9-line) !important;
  background: linear-gradient(
    180deg,
    var(--kg9-surface-raised) 0%,
    var(--kg9-sidebar) 46%,
    var(--kg9-canvas-top) 100%
  ) !important;
  box-shadow:
    16px 0 42px color-mix(in srgb, var(--kg9-canvas) 36%, transparent),
    inset -1px 0 color-mix(in srgb, var(--kg9-champagne) 4%, transparent) !important;
}

html[data-kg-theme="light"] .sidebar {
  background: linear-gradient(
    180deg,
    #f2f0e9 0%,
    var(--kg9-sidebar) 48%,
    #e7e8e4 100%
  ) !important;
}

html[data-kg-theme] .brand::after {
  right: 24px;
  left: 24px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--kg9-champagne) 34%, var(--kg9-line)),
    transparent
  );
}

html[data-kg-theme] .brandMark {
  color: #17140d !important;
  border: 1px solid
    color-mix(in srgb, var(--kg9-champagne-pale) 48%, transparent) !important;
  border-radius: 9px !important;
  background: linear-gradient(
    142deg,
    var(--kg9-champagne-pale),
    var(--kg9-champagne) 48%,
    var(--kg9-champagne-deep)
  ) !important;
  box-shadow:
    0 9px 22px
      color-mix(in srgb, var(--kg9-champagne-deep) 20%, transparent),
    inset 0 1px rgba(255, 255, 255, 0.58) !important;
}

html[data-kg-theme] .brand b,
html[data-kg-theme] .userMeta b,
html[data-kg-theme] .v10ThemeText b {
  color: var(--kg9-text) !important;
}

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

html[data-kg-theme] .sidebar nav a,
html[data-kg-theme] .sidebarNavButton,
html[data-kg-theme] .channelNavToggle {
  color: var(--kg9-text-soft) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition:
    color var(--kg9-motion),
    background var(--kg9-motion),
    box-shadow var(--kg9-motion),
    transform var(--kg9-motion) !important;
}

html[data-kg-theme] .sidebar nav a:hover,
html[data-kg-theme] .sidebarNavButton:hover,
html[data-kg-theme] .channelNavToggle:hover {
  color: var(--kg9-text) !important;
  border-color: transparent !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kg9-champagne) 7%, var(--kg9-surface-raised)),
    color-mix(in srgb, var(--kg9-surface) 76%, transparent)
  ) !important;
  transform: translateX(2px);
}

html[data-kg-theme] .sidebar nav a.active,
html[data-kg-theme] .sidebarNavButton.active {
  color: var(--kg9-text) !important;
  border-color: transparent !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kg9-champagne) 18%, var(--kg9-surface-raised)),
    color-mix(in srgb, var(--kg9-champagne) 4%, var(--kg9-surface)) 72%,
    transparent
  ) !important;
  box-shadow:
    inset 3px 0 var(--kg9-champagne),
    inset 0 1px color-mix(in srgb, var(--kg9-champagne-pale) 8%, transparent) !important;
}

html[data-kg-theme] .v10ThemeToggle {
  border-color: var(--kg9-line) !important;
  border-radius: 10px !important;
  background: linear-gradient(
    145deg,
    var(--kg9-surface-raised),
    var(--kg9-surface)
  ) !important;
  box-shadow: var(--kg9-shadow) !important;
}

/* Page header: premium focal point with restrained champagne light. */
html[data-kg-theme] .pageHeader {
  min-height: 112px;
  margin-bottom: 24px;
  border: 1px solid
    color-mix(in srgb, var(--kg9-champagne) 24%, var(--kg9-line)) !important;
  border-radius: var(--kg9-radius-panel);
  background: var(--kg7-header-gradient) !important;
  box-shadow: var(--kg9-shadow-high) !important;
}

html[data-kg-theme="light"] .pageHeader {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.48) inset,
    0 15px 36px rgba(34, 32, 27, 0.085) !important;
}

html[data-kg-theme] .pageHeader::before {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--kg9-champagne-deep) 14%,
    var(--kg9-champagne-pale) 48%,
    var(--kg9-champagne) 72%,
    transparent 100%
  );
  opacity: 0.82;
}

html[data-kg-theme] .pageHeader::after {
  top: -112px;
  right: -58px;
  width: 280px;
  height: 280px;
  border-color: color-mix(
    in srgb,
    var(--kg9-champagne) 15%,
    transparent
  );
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--kg9-champagne) 6%, transparent),
    transparent 68%
  );
}

html[data-kg-theme] .pageHeader h1,
html[data-kg-theme] .mainContent :where(h1, h2, h3, h4, h5, strong, b, summary) {
  color: var(--kg9-text) !important;
}

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

html[data-kg-theme]
  .mainContent
  :where(p, li, td, label, .description, .helperText) {
  color: var(--kg9-text-soft);
}

html[data-kg-theme]
  .mainContent
  :where(
    small,
    .muted,
    .subtitle,
    .meta,
    .hint,
    .emptyState,
    .sectionDescription
  ) {
  color: var(--kg9-muted) !important;
}

html[data-kg-theme]
  .mainContent
  :where(.eyebrow, .sectionEyebrow) {
  color: var(--kg9-accent-label) !important;
  border-color: color-mix(
    in srgb,
    var(--kg9-champagne) 24%,
    transparent
  ) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kg9-champagne) 13%, var(--kg9-surface-raised)),
    color-mix(in srgb, var(--kg9-champagne) 3%, var(--kg9-surface))
  ) !important;
}

html[data-kg-theme] .mainContent .sectionTitle::before {
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--kg9-champagne-pale),
    var(--kg9-champagne) 50%,
    var(--kg9-champagne-deep)
  );
  box-shadow: 0 0 14px
    color-mix(in srgb, var(--kg9-champagne) 14%, transparent);
}

html[data-kg-theme] .mainContent > .sectionTitle::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kg9-champagne) 30%, transparent),
    var(--kg9-line) 34%,
    transparent
  );
}

/* Main surfaces: fewer outlines and a clear three-level elevation system. */
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;
  border-radius: var(--kg9-radius-card);
  background: linear-gradient(
    148deg,
    var(--kg9-surface-raised),
    var(--kg9-surface) 72%
  ) !important;
  box-shadow: var(--kg9-shadow) !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,
    #f8f6ef 0%,
    #f1f1ec 72%
  ) !important;
}

html[data-kg-theme]
  .mainContent
  :where(
    .card,
    .videoCard,
    .repairCard,
    .taskCard,
    .candidateCard,
    .v102ChannelProductionCard
  ):hover {
  border-color: color-mix(
    in srgb,
    var(--kg9-champagne) 24%,
    var(--kg9-line)
  ) !important;
  box-shadow:
    var(--kg9-shadow),
    0 16px 36px color-mix(in srgb, var(--kg9-canvas) 24%, transparent) !important;
  transform: translateY(-1px);
}

/* Operational priority panels receive one restrained champagne signature. */
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: color-mix(
    in srgb,
    var(--kg9-champagne) 24%,
    var(--kg9-line)
  ) !important;
  background: var(--kg7-key-gradient) !important;
  box-shadow: var(--kg9-shadow-high) !important;
}

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 {
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent,
    var(--kg9-champagne-deep) 13%,
    var(--kg9-champagne-pale) 49%,
    var(--kg9-champagne) 73%,
    transparent
  ) !important;
  opacity: 0.82 !important;
}

/* Nested tiles use the middle tone instead of more white or more navy. */
html[data-kg-theme] .v911ChannelChoice,
html[data-kg-theme] .v985SimpleProgress > div,
html[data-kg-theme] .v9131LiveCollapsed,
html[data-kg-theme] .v982OperatingFlow > span,
html[data-kg-theme] .v982OperatingFlow > div,
html[data-kg-theme] .v91DailyStages > div,
html[data-kg-theme] .v984SeoBranchSummary,
html[data-kg-theme] .v102ProductionMeta > div,
html[data-kg-theme] .v102SeoGrid section,
html[data-kg-theme] .v102ProductionDetails,
html[data-kg-theme] .v102Variants,
html[data-kg-theme] .v98FactGrid .card,
html[data-kg-theme] .v98SectionCard,
html[data-kg-theme] .v98CoverageCard,
html[data-kg-theme] .postScanContractStrip button {
  border-color: var(--kg9-line) !important;
  background: linear-gradient(
    145deg,
    var(--kg9-surface-raised),
    var(--kg9-surface-soft)
  ) !important;
  box-shadow:
    inset 0 1px
      color-mix(in srgb, var(--kg9-champagne-pale) 5%, transparent),
    0 7px 18px color-mix(in srgb, var(--kg9-canvas) 20%, transparent) !important;
}

html[data-kg-theme="light"] .v911ChannelChoice,
html[data-kg-theme="light"] .v985SimpleProgress > div,
html[data-kg-theme="light"] .v9131LiveCollapsed,
html[data-kg-theme="light"] .v982OperatingFlow > span,
html[data-kg-theme="light"] .v982OperatingFlow > div,
html[data-kg-theme="light"] .v91DailyStages > div,
html[data-kg-theme="light"] .v984SeoBranchSummary,
html[data-kg-theme="light"] .v102ProductionMeta > div,
html[data-kg-theme="light"] .v102SeoGrid section,
html[data-kg-theme="light"] .v102ProductionDetails,
html[data-kg-theme="light"] .v102Variants,
html[data-kg-theme="light"] .v98FactGrid .card,
html[data-kg-theme="light"] .v98SectionCard,
html[data-kg-theme="light"] .v98CoverageCard,
html[data-kg-theme="light"] .postScanContractStrip button {
  background: linear-gradient(145deg, #f1f0ea, #e8e8e3) !important;
}

html[data-kg-theme] .v911ChannelChoice:hover:not(.isDisabled) {
  border-color: color-mix(
    in srgb,
    var(--kg9-champagne) 30%,
    var(--kg9-line)
  ) !important;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--kg9-champagne) 8%, var(--kg9-surface-raised)),
    var(--kg9-surface-soft)
  ) !important;
}

html[data-kg-theme] .v911ChannelChoice.isSelected,
html[data-kg-theme] .v985SimpleProgress > .isActive,
html[data-kg-theme] .postScanContractStrip button.active {
  border-color: color-mix(
    in srgb,
    var(--kg9-champagne) 52%,
    var(--kg9-line)
  ) !important;
  background: var(--kg7-selected-gradient) !important;
  box-shadow:
    inset 3px 0 var(--kg9-champagne),
    0 10px 24px color-mix(in srgb, var(--kg9-canvas) 22%, transparent) !important;
}

html[data-kg-theme] .v985SimpleProgress > .isActive > span,
html[data-kg-theme] .kgBootGuardMark {
  color: #17140d !important;
  background: linear-gradient(
    142deg,
    var(--kg9-champagne-pale),
    var(--kg9-champagne) 48%,
    var(--kg9-champagne-deep)
  ) !important;
  box-shadow: 0 8px 20px
    color-mix(in srgb, var(--kg9-champagne-deep) 20%, transparent) !important;
}

html[data-kg-theme] .postScanContractStrip button::before,
html[data-kg-theme] .v98FactGrid .card::before,
html[data-kg-theme] .v98SectionCard::before,
html[data-kg-theme] .v98CoverageCard::before {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--kg9-champagne) 56%, transparent),
    transparent
  );
  opacity: 0.48;
}

html[data-kg-theme] .postScanContractStrip strong {
  color: var(--kg9-accent-label) !important;
}

/* Tabs and tables remain neutral; gold identifies only the active state. */
html[data-kg-theme] .dataScanTabs,
html[data-kg-theme] .postScanTabs,
html[data-kg-theme] .v98DataTabs,
html[data-kg-theme] .v98ScopeTabs,
html[data-kg-theme] .v98PeriodBar,
html[data-kg-theme] .periodToggle,
html[data-kg-theme] .tabs {
  border-color: var(--kg9-line) !important;
  background: linear-gradient(
    145deg,
    var(--kg9-surface-soft),
    var(--kg9-surface)
  ) !important;
  box-shadow: 0 5px 14px
    color-mix(in srgb, var(--kg9-canvas) 17%, transparent) !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;
  border-color: transparent !important;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--kg9-champagne) 13%, var(--kg9-surface-raised)),
    var(--kg9-surface-raised)
  ) !important;
  box-shadow: inset 0 -2px var(--kg9-champagne) !important;
}

html[data-kg-theme] .dataTable,
html[data-kg-theme] .v912IdeaTableWrap,
html[data-kg-theme] table {
  border-color: var(--kg9-line) !important;
  background: linear-gradient(
    148deg,
    var(--kg9-surface-raised),
    var(--kg9-surface) 74%
  ) !important;
}

html[data-kg-theme] th {
  color: var(--kg9-text) !important;
  border-color: var(--kg9-line) !important;
  background: linear-gradient(
    180deg,
    var(--kg9-surface-soft),
    var(--kg9-surface-raised)
  ) !important;
}

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

html[data-kg-theme] tbody tr:nth-child(even) {
  background: color-mix(
    in srgb,
    var(--kg9-surface-soft) 28%,
    transparent
  ) !important;
}

html[data-kg-theme] tbody tr:hover {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kg9-champagne) 7%, var(--kg9-surface-raised)),
    transparent
  ) !important;
}

/* Primary actions are champagne; secondary actions stay inside the surface. */
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: #17140d !important;
  border-color: var(--kg9-champagne-deep) !important;
  border-radius: var(--kg9-radius-control) !important;
  background: linear-gradient(
    142deg,
    var(--kg9-champagne-pale),
    var(--kg9-champagne) 46%,
    var(--kg9-champagne-mid) 72%,
    var(--kg9-champagne-deep)
  ) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.54),
    0 8px 20px
      color-mix(in srgb, var(--kg9-champagne-deep) 20%, transparent) !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: #110f0a !important;
  background: linear-gradient(
    142deg,
    #f7e9bd,
    color-mix(in srgb, var(--kg9-champagne) 88%, #f4df9b) 46%,
    var(--kg9-champagne-mid) 72%,
    color-mix(in srgb, var(--kg9-champagne-deep) 90%, #6f5015)
  ) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.62),
    0 12px 28px
      color-mix(in srgb, var(--kg9-champagne-deep) 26%, transparent) !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: linear-gradient(
    145deg,
    var(--kg9-surface-raised),
    var(--kg9-surface)
  ) !important;
  box-shadow: 0 5px 14px
    color-mix(in srgb, var(--kg9-canvas) 16%, transparent) !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: color-mix(
    in srgb,
    var(--kg9-champagne) 32%,
    var(--kg9-line)
  ) !important;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--kg9-champagne) 7%, var(--kg9-surface-raised)),
    var(--kg9-surface-raised)
  ) !important;
}

html[data-kg-theme] :where(input, select, textarea) {
  color: var(--kg9-text) !important;
  border-color: var(--kg9-line-strong) !important;
  border-radius: var(--kg9-radius-control) !important;
  background: linear-gradient(
    145deg,
    var(--kg9-surface),
    var(--kg9-canvas-top)
  ) !important;
  box-shadow: inset 0 1px 2px
    color-mix(in srgb, var(--kg9-canvas) 20%, transparent) !important;
}

html[data-kg-theme] :where(input, select, textarea)::placeholder {
  color: var(--kg9-faint) !important;
}

html[data-kg-theme] :where(input, select, textarea):focus {
  border-color: color-mix(
    in srgb,
    var(--kg9-champagne) 66%,
    var(--kg9-line)
  ) !important;
  box-shadow:
    var(--kg9-focus),
    inset 0 1px 2px
      color-mix(in srgb, var(--kg9-canvas) 20%, transparent) !important;
}

/* Semantic colors appear only where they carry operational meaning. */
html[data-kg-theme] .v102ConfirmedTitle,
html[data-kg-theme] .v102SyncNotice,
html[data-kg-theme]
  :where(.badge.success, .toast, .truthBanner, .strategyBanner, .dataScanNotice) {
  color: var(--kg9-success-text) !important;
  border-color: color-mix(
    in srgb,
    var(--kg9-success) 31%,
    var(--kg9-line)
  ) !important;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--kg9-success) 12%, var(--kg9-surface-raised)),
    var(--kg9-surface) 67%
  ) !important;
}

html[data-kg-theme] .v102ChannelProductionCard.cancelled,
html[data-kg-theme] .v102CancelReason,
html[data-kg-theme]
  :where(
    .badge.danger,
    .dangerPanel,
    .revisionBanner,
    .candidateExclusionNotice,
    .v9114LiveError
  ) {
  color: var(--kg9-danger-text) !important;
  border-color: color-mix(
    in srgb,
    var(--kg9-danger) 31%,
    var(--kg9-line)
  ) !important;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--kg9-danger) 11%, var(--kg9-surface-raised)),
    var(--kg9-surface) 67%
  ) !important;
}

html[data-kg-theme]
  :where(
    .badge.warning,
    .warningBox,
    .dataScanDetailNotice,
    .v6ApprovalPanel
  ),
html[data-kg-theme] .v985PaidAiGuard {
  color: var(--kg9-accent-label) !important;
  border-color: color-mix(
    in srgb,
    var(--kg9-champagne) 29%,
    var(--kg9-line)
  ) !important;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--kg9-champagne) 10%, var(--kg9-surface-raised)),
    var(--kg9-surface) 68%
  ) !important;
}

html[data-kg-theme]
  :where(.badge.info, .infoBox, .dataScanSafetyBanner) {
  color: var(--kg9-info-text) !important;
  border-color: color-mix(
    in srgb,
    var(--kg9-info) 28%,
    var(--kg9-line)
  ) !important;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--kg9-info) 9%, var(--kg9-surface-raised)),
    var(--kg9-surface) 68%
  ) !important;
}

/* Login, dialogs and recovery screens use the same material system. */
html[data-kg-theme] .loginShell,
html[data-kg-theme] #kg-boot-guard {
  color: var(--kg9-text) !important;
  background:
    radial-gradient(
      circle at 70% 14%,
      color-mix(in srgb, var(--kg9-champagne) 8%, transparent),
      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: color-mix(
    in srgb,
    var(--kg9-champagne) 22%,
    var(--kg9-line)
  ) !important;
  background:
    radial-gradient(
      circle at 92% 0%,
      color-mix(in srgb, var(--kg9-champagne) 7%, transparent),
      transparent 30%
    ),
    linear-gradient(
      148deg,
      var(--kg9-surface-raised),
      var(--kg9-surface) 72%
    ) !important;
  box-shadow: var(--kg9-shadow-high) !important;
}

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

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

/* Focus, scrollbars and reduced motion. */
html[data-kg-theme] :focus-visible {
  outline: 2px solid var(--kg9-champagne) !important;
  outline-offset: 2px;
}

html[data-kg-theme="dark"] {
  scrollbar-color: #3b3d42 var(--kg9-sidebar);
}

html[data-kg-theme="light"] {
  scrollbar-color: #aaa79f var(--kg9-canvas);
}

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

html[data-kg-theme] ::-webkit-scrollbar-track {
  background: var(--kg9-canvas);
}

html[data-kg-theme] ::-webkit-scrollbar-thumb {
  border: 3px solid var(--kg9-canvas);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--kg9-muted) 62%,
    var(--kg9-surface-soft)
  );
}

html[data-kg-theme] ::-webkit-scrollbar-thumb:hover {
  background: color-mix(
    in srgb,
    var(--kg9-muted) 78%,
    var(--kg9-surface-soft)
  );
}

@media (max-width: 760px) {
  html[data-kg-theme] .pageHeader {
    box-shadow: var(--kg9-shadow-high) !important;
  }

  html[data-kg-theme] .sidebar {
    box-shadow: 0 16px 38px
      color-mix(in srgb, var(--kg9-canvas) 42%, transparent) !important;
  }
}

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