/*
 * KG Channel Intelligence OS V10.7 — Premium Gradient UI
 *
 * Presentation-only layer over V10.6. It keeps the Binance-inspired neutral
 * foundation while adding a restrained gold gradient system, stronger section
 * hierarchy and clearer interactive states in both light and dark themes.
 */

:root {
  --kg7-radius-control: 8px;
  --kg7-radius-card: 14px;
  --kg7-radius-panel: 18px;
  --kg7-motion: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --kg7-gold: #fcd535;
  --kg7-gold-mid: #f4c718;
  --kg7-gold-deep: #f0b90b;
  --kg7-success: #0ecb81;
  --kg7-danger: #f6465d;
}

html[data-kg-theme="dark"] {
  --kg7-canvas: #0b0e11;
  --kg7-canvas-top: #101318;
  --kg7-surface: #181a20;
  --kg7-surface-high: #20242b;
  --kg7-surface-soft: #242931;
  --kg7-border: #303640;
  --kg7-border-high: #434b57;
  --kg7-text: #f4f5f6;
  --kg7-text-soft: #c4cad3;
  --kg7-muted: #969eaa;
  --kg7-accent-label: #fce27a;
  --kg7-card-gradient: linear-gradient(
    145deg,
    #20242b 0%,
    #1a1d23 42%,
    #181a20 100%
  );
  --kg7-card-gradient-soft: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.018) 50%,
    rgba(255, 255, 255, 0.006) 100%
  );
  --kg7-header-gradient:
    radial-gradient(
      circle at 84% 16%,
      rgba(252, 213, 53, 0.2),
      transparent 28%
    ),
    linear-gradient(
      118deg,
      rgba(252, 213, 53, 0.13) 0%,
      rgba(240, 185, 11, 0.055) 36%,
      rgba(32, 36, 43, 0.98) 72%,
      rgba(24, 26, 32, 0.98) 100%
    );
  --kg7-key-gradient:
    radial-gradient(
      circle at 92% 10%,
      rgba(252, 213, 53, 0.15),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(252, 213, 53, 0.095) 0%,
      rgba(32, 36, 43, 0.98) 48%,
      rgba(24, 26, 32, 0.98) 100%
    );
  --kg7-selected-gradient: linear-gradient(
    112deg,
    rgba(252, 213, 53, 0.2) 0%,
    rgba(240, 185, 11, 0.09) 54%,
    rgba(32, 36, 43, 0.96) 100%
  );
  --kg7-success-gradient: linear-gradient(
    120deg,
    rgba(14, 203, 129, 0.16),
    rgba(14, 203, 129, 0.045) 52%,
    rgba(24, 26, 32, 0.98)
  );
  --kg7-danger-gradient: linear-gradient(
    120deg,
    rgba(246, 70, 93, 0.15),
    rgba(246, 70, 93, 0.04) 52%,
    rgba(24, 26, 32, 0.98)
  );
  --kg7-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  --kg7-shadow-high:
    0 18px 48px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.035) inset;
  --kg7-gold-shadow: 0 10px 24px rgba(240, 185, 11, 0.2);
}

html[data-kg-theme="light"] {
  --kg7-canvas: #f7f8fa;
  --kg7-canvas-top: #fffdf5;
  --kg7-surface: #ffffff;
  --kg7-surface-high: #ffffff;
  --kg7-surface-soft: #f3f4f6;
  --kg7-border: #e4e7eb;
  --kg7-border-high: #ccd1d8;
  --kg7-text: #171b21;
  --kg7-text-soft: #424a55;
  --kg7-muted: #626b77;
  --kg7-accent-label: #715100;
  --kg7-card-gradient: linear-gradient(
    145deg,
    #ffffff 0%,
    #fffefa 55%,
    #fafbfc 100%
  );
  --kg7-card-gradient-soft: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 249, 251, 0.98) 100%
  );
  --kg7-header-gradient:
    radial-gradient(
      circle at 84% 12%,
      rgba(252, 213, 53, 0.42),
      transparent 29%
    ),
    linear-gradient(
      118deg,
      #fff4b8 0%,
      #fff9dc 34%,
      #fffef8 66%,
      #ffffff 100%
    );
  --kg7-key-gradient:
    radial-gradient(
      circle at 92% 8%,
      rgba(252, 213, 53, 0.28),
      transparent 28%
    ),
    linear-gradient(145deg, #fff9dc 0%, #fffefa 46%, #ffffff 100%);
  --kg7-selected-gradient: linear-gradient(
    112deg,
    #fff2ad 0%,
    #fff8d1 52%,
    #ffffff 100%
  );
  --kg7-success-gradient: linear-gradient(
    120deg,
    #e5fbf3,
    #f4fdf9 54%,
    #ffffff
  );
  --kg7-danger-gradient: linear-gradient(
    120deg,
    #fff0f2,
    #fff8f9 54%,
    #ffffff
  );
  --kg7-shadow: 0 10px 30px rgba(30, 35, 41, 0.085);
  --kg7-shadow-high:
    0 20px 52px rgba(30, 35, 41, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  --kg7-gold-shadow: 0 10px 24px rgba(240, 185, 11, 0.22);
}

/* Layered canvas: depth without reducing readability. */
html[data-kg-theme="dark"] body,
html[data-kg-theme="light"] body {
  color: var(--kg7-text);
  background:
    radial-gradient(
      circle at 76% -12%,
      color-mix(in srgb, var(--kg7-gold) 10%, transparent),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      var(--kg7-canvas-top) 0,
      var(--kg7-canvas) 28rem
    ) fixed !important;
}

.shell,
.mainContent {
  background: transparent !important;
}

.mainContent {
  position: relative;
  isolation: isolate;
}

.mainContent::before {
  position: fixed;
  z-index: -1;
  top: -160px;
  right: -220px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--kg7-gold) 7%, transparent),
    transparent 68%
  );
  content: "";
  pointer-events: none;
}

/* Sidebar and brand */
.sidebar,
html[data-kg-theme="dark"] .sidebar,
html[data-kg-theme="light"] .sidebar {
  border-right-color: var(--kg7-border) !important;
  background: linear-gradient(
    180deg,
    var(--kg7-surface-high) 0%,
    var(--kg7-surface) 44%,
    var(--kg7-canvas) 100%
  ) !important;
  box-shadow:
    16px 0 46px color-mix(in srgb, var(--kg7-canvas) 58%, transparent),
    inset -1px 0 color-mix(in srgb, var(--kg7-gold) 7%, transparent) !important;
}

.brand {
  position: relative;
  border-bottom: 0 !important;
}

.brand::after {
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--kg7-gold) 52%, var(--kg7-border)),
    transparent
  );
  content: "";
}

.brandMark,
html[data-kg-theme="dark"] .brandMark,
html[data-kg-theme="light"] .brandMark {
  color: #171b21 !important;
  border-radius: 10px !important;
  background: linear-gradient(
    135deg,
    #fff2a0 0%,
    var(--kg7-gold) 42%,
    var(--kg7-gold-deep) 100%
  ) !important;
  box-shadow:
    0 10px 24px rgba(240, 185, 11, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.72) inset !important;
}

.brand b {
  color: var(--kg7-text) !important;
  letter-spacing: -0.015em;
}

.brand span,
.userMeta span,
.v10ThemeText small {
  color: var(--kg7-muted) !important;
}

.sidebar nav a,
.sidebarNavButton,
.channelNavToggle {
  position: relative;
  overflow: hidden;
  border-radius: 9px !important;
  transition:
    color var(--kg7-motion),
    background var(--kg7-motion),
    box-shadow var(--kg7-motion),
    transform var(--kg7-motion) !important;
}

.sidebar nav a:hover,
.sidebarNavButton:hover,
.channelNavToggle:hover {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kg7-gold) 8%, var(--kg7-surface-high)),
    var(--kg7-surface-high)
  ) !important;
  transform: translateX(2px);
}

.sidebar nav a.active,
.sidebarNavButton.active {
  color: var(--kg7-text) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kg7-gold) 20%, var(--kg7-surface)),
    color-mix(in srgb, var(--kg7-gold) 7%, var(--kg7-surface)) 70%,
    transparent
  ) !important;
  box-shadow:
    inset 3px 0 var(--kg7-gold),
    inset 0 0 0 1px color-mix(in srgb, var(--kg7-gold) 16%, transparent) !important;
}

.v10ThemeToggle,
html[data-kg-theme="dark"] .v10ThemeToggle,
html[data-kg-theme="light"] .v10ThemeToggle {
  border-color: var(--kg7-border) !important;
  border-radius: 10px !important;
  background: var(--kg7-card-gradient-soft) !important;
  box-shadow: 0 8px 22px
    color-mix(in srgb, var(--kg7-canvas) 32%, transparent) !important;
}

/* Page header: one unmistakable focal area on every screen. */
.pageHeader {
  position: relative;
  z-index: 0;
  align-items: center;
  min-height: 118px;
  margin-bottom: 28px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid
    color-mix(in srgb, var(--kg7-gold) 30%, var(--kg7-border)) !important;
  border-radius: var(--kg7-radius-panel);
  background: var(--kg7-header-gradient) !important;
  box-shadow: var(--kg7-shadow-high);
}

.pageHeader::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--kg7-gold-deep),
    #ffe77c 46%,
    var(--kg7-gold) 72%,
    transparent
  );
  content: "";
}

.pageHeader::after {
  position: absolute;
  z-index: -1;
  top: -88px;
  right: -40px;
  width: 250px;
  height: 250px;
  border: 1px solid
    color-mix(in srgb, var(--kg7-gold) 20%, transparent);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--kg7-gold) 12%, transparent),
    transparent 68%
  );
  content: "";
}

.pageHeader > * {
  position: relative;
  z-index: 1;
}

.pageHeader h1 {
  max-width: 900px;
  color: var(--kg7-text) !important;
  font-size: clamp(30px, 2.3vw, 39px);
  font-weight: 780 !important;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.pageHeader p {
  max-width: 820px;
  color: var(--kg7-text-soft) !important;
}

.mainContent :where(.eyebrow, .sectionEyebrow) {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  color: var(--kg7-accent-label) !important;
  border: 1px solid
    color-mix(in srgb, var(--kg7-gold) 38%, var(--kg7-border));
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kg7-gold) 18%, transparent),
    color-mix(in srgb, var(--kg7-gold) 7%, transparent)
  );
}

/* Section labels and separators */
.mainContent .sectionTitle {
  position: relative;
  min-height: 44px;
  padding-left: 16px;
}

.mainContent .sectionTitle::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #ffe77c 0%,
    var(--kg7-gold) 46%,
    var(--kg7-gold-deep) 100%
  );
  box-shadow: 0 0 18px rgba(240, 185, 11, 0.2);
  content: "";
}

.mainContent > .sectionTitle::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kg7-gold) 50%, var(--kg7-border)),
    var(--kg7-border) 36%,
    transparent
  );
  content: "";
}

.sectionTitle h2,
.sectionTitle h3 {
  color: var(--kg7-text) !important;
  font-weight: 740;
  letter-spacing: -0.025em;
}

.sectionTitle p {
  color: var(--kg7-muted) !important;
}

/* Premium surface system */
.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(--kg7-border) !important;
  border-radius: var(--kg7-radius-card) !important;
  background: var(--kg7-card-gradient) !important;
  box-shadow: var(--kg7-shadow) !important;
}

.mainContent
  :where(
    .card,
    .videoCard,
    .repairCard,
    .taskCard,
    .candidateCard,
    .v102ChannelProductionCard
  ) {
  transition:
    border-color var(--kg7-motion),
    box-shadow var(--kg7-motion),
    transform var(--kg7-motion) !important;
}

.mainContent
  :where(
    .card,
    .videoCard,
    .repairCard,
    .taskCard,
    .candidateCard,
    .v102ChannelProductionCard
  ):hover {
  border-color: color-mix(
    in srgb,
    var(--kg7-gold) 24%,
    var(--kg7-border-high)
  ) !important;
  box-shadow: var(--kg7-shadow-high) !important;
}

/* High-priority operating areas */
.v985NextAction,
.v911ChannelSelection,
.v912IdeaScheduler,
.v983SeoPack,
.v912ProductionSchedule {
  position: relative;
  overflow: hidden;
  border-color: color-mix(
    in srgb,
    var(--kg7-gold) 34%,
    var(--kg7-border)
  ) !important;
  border-radius: var(--kg7-radius-panel) !important;
  background: var(--kg7-key-gradient) !important;
  box-shadow: var(--kg7-shadow-high) !important;
}

.v985NextAction::before,
.v911ChannelSelection::before,
.v912IdeaScheduler::before,
.v983SeoPack::before,
.v912ProductionSchedule::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    var(--kg7-gold-deep),
    #ffe77c 48%,
    var(--kg7-gold),
    transparent 94%
  ) !important;
  content: "";
  opacity: 1 !important;
}

.v911ChannelChoice,
.v985SimpleProgress > div,
.v9131LiveCollapsed,
.v982OperatingFlow > span,
.v982OperatingFlow > div,
.v91DailyStages > div,
.v984SeoBranchSummary,
.v102ProductionMeta > div,
.v102SeoGrid section,
.v102ProductionDetails,
.v102Variants {
  border-color: var(--kg7-border) !important;
  background: var(--kg7-card-gradient-soft) !important;
  box-shadow: 0 7px 18px
    color-mix(in srgb, var(--kg7-canvas) 26%, transparent) !important;
}

.v911ChannelChoice:hover:not(.isDisabled) {
  border-color: color-mix(
    in srgb,
    var(--kg7-gold) 34%,
    var(--kg7-border-high)
  ) !important;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--kg7-gold) 7%, var(--kg7-surface-high)),
    var(--kg7-surface-high)
  ) !important;
  transform: translateY(-1px);
}

.v911ChannelChoice.isSelected,
html[data-kg-theme="light"] .v911ChannelChoice.isSelected {
  border-color: var(--kg7-gold-deep) !important;
  background: var(--kg7-selected-gradient) !important;
  box-shadow:
    inset 4px 0 var(--kg7-gold),
    0 10px 26px color-mix(in srgb, var(--kg7-gold) 15%, transparent) !important;
}

.v985SimpleProgress > .isActive {
  border-color: var(--kg7-gold-deep) !important;
  background: var(--kg7-selected-gradient) !important;
  box-shadow: 0 10px 24px
    color-mix(in srgb, var(--kg7-gold) 13%, transparent) !important;
}

.v985SimpleProgress > .isActive > span {
  color: #171b21 !important;
  background: linear-gradient(
    135deg,
    #fff2a0,
    var(--kg7-gold) 48%,
    var(--kg7-gold-deep)
  ) !important;
  box-shadow: var(--kg7-gold-shadow) !important;
}

.v985SimpleProgress > .isDone,
.v982OperatingFlow > div {
  border-color: color-mix(
    in srgb,
    var(--kg7-success) 45%,
    var(--kg7-border)
  ) !important;
  background: var(--kg7-success-gradient) !important;
}

.v985SimpleProgress > .isDone > span {
  color: #071a13 !important;
  background: linear-gradient(135deg, #42e5aa, var(--kg7-success)) !important;
}

/* Metric strips and data cards */
.postScanContractStrip {
  gap: 12px;
}

.postScanContractStrip button,
.mainContent .postScanContractStrip button,
.v98FactGrid .card,
.v98SectionCard,
.v98CoverageCard {
  position: relative;
  overflow: hidden;
  border-color: var(--kg7-border) !important;
  border-radius: var(--kg7-radius-card) !important;
  background: var(--kg7-card-gradient) !important;
  box-shadow: var(--kg7-shadow) !important;
}

.postScanContractStrip button::before,
.v98FactGrid .card::before,
.v98SectionCard::before,
.v98CoverageCard::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--kg7-gold-deep),
    var(--kg7-gold) 52%,
    transparent
  );
  content: "";
  opacity: 0.72;
}

.postScanContractStrip button:hover,
.postScanContractStrip button.active {
  border-color: var(--kg7-gold-deep) !important;
  background: var(--kg7-selected-gradient) !important;
  box-shadow: var(--kg7-shadow-high) !important;
  transform: translateY(-1px);
}

.postScanContractStrip button.active {
  box-shadow:
    inset 0 3px var(--kg7-gold),
    var(--kg7-shadow-high) !important;
}

.postScanContractStrip strong {
  color: var(--kg7-accent-label) !important;
  text-shadow: none;
}

.v98DailyChart,
.v98BarChart,
.v98MixChart,
.v98RetentionGrid > div,
.v98StructuredFacts,
.v98SourceState,
.v98InlineLoading,
.postScanSelectionMeta {
  border-color: var(--kg7-border) !important;
  border-radius: 12px !important;
  background: var(--kg7-card-gradient-soft) !important;
}

/* Tabs: active state reads immediately without becoming visually heavy. */
.dataScanTabs,
.postScanTabs,
.v98DataTabs,
.v98ScopeTabs,
.v98PeriodBar,
.periodToggle,
.tabs {
  gap: 4px;
  padding: 4px;
  border-color: var(--kg7-border) !important;
  border-radius: 11px !important;
  background: var(--kg7-card-gradient-soft) !important;
  box-shadow: 0 6px 18px
    color-mix(in srgb, var(--kg7-canvas) 24%, transparent) !important;
}

.dataScanTabs button.active,
.postScanTabs button.active,
.v98DataTabs button.active,
.v98ScopeTabs button.active,
.v98PeriodBar button.active,
.periodToggle button.active,
.tabs button.active,
.mainContent .dataScanTabs button.active,
.mainContent .postScanTabs button.active,
.mainContent .v98DataTabs button.active,
.mainContent .v98ScopeTabs button.active,
.mainContent .v98PeriodBar button.active {
  color: var(--kg7-text) !important;
  border-radius: 7px !important;
  background: var(--kg7-selected-gradient) !important;
  box-shadow:
    inset 0 -2px var(--kg7-gold),
    0 5px 14px color-mix(in srgb, var(--kg7-gold) 12%, transparent) !important;
}

/* Tables */
.dataTable,
.v912IdeaTableWrap,
table {
  border-color: var(--kg7-border) !important;
  background: var(--kg7-card-gradient) !important;
}

th {
  color: var(--kg7-text-soft) !important;
  border-color: var(--kg7-border) !important;
  background: linear-gradient(
    180deg,
    var(--kg7-surface-soft),
    color-mix(in srgb, var(--kg7-surface-soft) 64%, var(--kg7-surface))
  ) !important;
}

td {
  color: var(--kg7-text-soft) !important;
  border-color: var(--kg7-border) !important;
}

tbody tr:hover {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kg7-gold) 9%, transparent),
    color-mix(in srgb, var(--kg7-gold) 2%, transparent)
  ) !important;
}

/* Buttons and form controls */
.mainContent
  :where(button, .button):not(
    .secondary,
    .ghostDanger,
    .danger,
    .sidebarNavButton,
    .channelNavToggle,
    .v10ThemeToggle,
    .accountPasswordLink,
    .v9131LiveToggle
  ),
.accountLoginForm > button,
.passwordRecoveryBox > button {
  color: #171b21 !important;
  border-color: #e8ae08 !important;
  border-radius: var(--kg7-radius-control) !important;
  background: linear-gradient(
    135deg,
    #ffe878 0%,
    var(--kg7-gold) 42%,
    var(--kg7-gold-mid) 68%,
    var(--kg7-gold-deep) 100%
  ) !important;
  box-shadow:
    0 8px 20px rgba(240, 185, 11, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
  transition:
    transform var(--kg7-motion),
    box-shadow var(--kg7-motion),
    filter var(--kg7-motion) !important;
}

.mainContent
  :where(button, .button):not(
    .secondary,
    .ghostDanger,
    .danger,
    .sidebarNavButton,
    .channelNavToggle,
    .v10ThemeToggle,
    .accountPasswordLink,
    .v9131LiveToggle
  ):hover:not(:disabled),
.accountLoginForm > button:hover:not(:disabled),
.passwordRecoveryBox > button:hover:not(:disabled) {
  color: #171b21 !important;
  border-color: var(--kg7-gold-deep) !important;
  background: linear-gradient(
    135deg,
    #fff09a 0%,
    #ffdf55 42%,
    var(--kg7-gold) 68%,
    var(--kg7-gold-deep) 100%
  ) !important;
  box-shadow:
    0 12px 28px rgba(240, 185, 11, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.76) inset !important;
  filter: saturate(1.04);
  transform: translateY(-1px);
}

:where(button, .button).secondary,
.secondary,
.globalBackButton,
.youtubeDirectLink,
.secondaryLink,
.v9131LiveToggle,
.accountPasswordLink {
  color: var(--kg7-text-soft) !important;
  border-color: var(--kg7-border-high) !important;
  border-radius: var(--kg7-radius-control) !important;
  background: var(--kg7-card-gradient-soft) !important;
  box-shadow: 0 6px 16px
    color-mix(in srgb, var(--kg7-canvas) 22%, transparent) !important;
}

:where(button, .button).secondary:hover:not(:disabled),
.globalBackButton:hover,
.youtubeDirectLink:hover,
.secondaryLink:hover,
.v9131LiveToggle:hover,
.accountPasswordLink:hover {
  color: var(--kg7-text) !important;
  border-color: color-mix(
    in srgb,
    var(--kg7-gold) 48%,
    var(--kg7-border-high)
  ) !important;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--kg7-gold) 8%, var(--kg7-surface-high)),
    var(--kg7-surface-high)
  ) !important;
}

:where(input, select, textarea),
html[data-kg-theme="dark"] :where(input, select, textarea),
html[data-kg-theme="light"] :where(input, select, textarea) {
  color: var(--kg7-text) !important;
  border-color: var(--kg7-border-high) !important;
  border-radius: var(--kg7-radius-control) !important;
  background: var(--kg7-card-gradient-soft) !important;
  box-shadow: 0 1px 0
    color-mix(in srgb, var(--kg7-text) 3%, transparent) inset !important;
}

:where(input, select, textarea):focus {
  border-color: var(--kg7-gold-deep) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--kg7-gold) 20%, transparent),
    0 10px 24px color-mix(in srgb, var(--kg7-gold) 7%, transparent) !important;
}

/* Proposal and semantic states */
.v102ChannelProductionCard {
  position: relative;
  overflow: hidden;
}

.v102ChannelProductionCard::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--kg7-gold-deep),
    var(--kg7-gold) 52%,
    transparent
  );
  content: "";
}

.v102ConfirmedTitle,
.v102SyncNotice,
:where(.badge.success, .toast, .truthBanner, .strategyBanner, .dataScanNotice) {
  border-color: color-mix(
    in srgb,
    var(--kg7-success) 45%,
    var(--kg7-border)
  ) !important;
  background: var(--kg7-success-gradient) !important;
}

.v102ChannelProductionCard.cancelled,
.v102CancelReason,
:where(
  .badge.danger,
  .dangerPanel,
  .revisionBanner,
  .candidateExclusionNotice,
  .v9114LiveError
) {
  border-color: color-mix(
    in srgb,
    var(--kg7-danger) 45%,
    var(--kg7-border)
  ) !important;
  background: var(--kg7-danger-gradient) !important;
}

:where(.badge.warning, .warningBox, .dataScanDetailNotice, .v6ApprovalPanel),
:where(.badge.info, .infoBox, .dataScanSafetyBanner),
.v985PaidAiGuard {
  border-color: color-mix(
    in srgb,
    var(--kg7-gold) 45%,
    var(--kg7-border)
  ) !important;
  background: var(--kg7-selected-gradient) !important;
}

/* Login and modal surfaces */
.loginShell,
html[data-kg-theme="dark"] .loginShell,
html[data-kg-theme="light"] .loginShell {
  background:
    radial-gradient(
      circle at 68% 16%,
      color-mix(in srgb, var(--kg7-gold) 16%, transparent),
      transparent 32rem
    ),
    linear-gradient(
      145deg,
      var(--kg7-canvas-top),
      var(--kg7-canvas) 64%
    ) !important;
}

.loginBox.luxe,
.passwordRecoveryBox,
.modal,
.aiCostConfirmation {
  position: relative;
  overflow: hidden;
  border-color: color-mix(
    in srgb,
    var(--kg7-gold) 28%,
    var(--kg7-border-high)
  ) !important;
  border-radius: var(--kg7-radius-panel) !important;
  background: var(--kg7-card-gradient) !important;
  box-shadow: var(--kg7-shadow-high) !important;
}

.loginBox.luxe::before {
  height: 4px !important;
  background: linear-gradient(
    90deg,
    var(--kg7-gold-deep),
    #ffe77c 48%,
    var(--kg7-gold),
    transparent
  ) !important;
}

.kgBootGuardCard {
  border-color: color-mix(
    in srgb,
    var(--kg7-gold) 28%,
    var(--kg7-border)
  ) !important;
  border-radius: var(--kg7-radius-panel) !important;
  background: var(--kg7-card-gradient) !important;
  box-shadow: var(--kg7-shadow-high) !important;
}

.kgBootGuardMark {
  color: #171b21 !important;
  border-radius: 10px !important;
  background: linear-gradient(
    135deg,
    #fff2a0,
    var(--kg7-gold) 48%,
    var(--kg7-gold-deep)
  ) !important;
  box-shadow: var(--kg7-gold-shadow);
}

@media (max-width: 980px) {
  .pageHeader {
    align-items: flex-start;
    min-height: 0;
    flex-direction: column;
  }

  .headerActions {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .pageHeader {
    padding: 18px;
    border-radius: 14px;
  }

  .pageHeader h1 {
    font-size: 28px;
  }

  .mainContent .sectionTitle {
    align-items: flex-start;
    flex-direction: column;
  }

  .sidebar {
    box-shadow: 0 14px 36px
      color-mix(in srgb, var(--kg7-canvas) 40%, transparent) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar nav a,
  .sidebarNavButton,
  .channelNavToggle,
  .mainContent :where(button, .button),
  .v911ChannelChoice,
  .postScanContractStrip button {
    transform: none !important;
  }
}