:root {
  color-scheme: light;
  --ks-canvas: #F6F7FB;
  --ks-surface: #FFFFFF;
  --ks-subtle: #F2F4F8;
  --ks-ink: #39445A;
  --ks-muted-strong: #667188;
  --ks-muted: #8D97AA;
  --ks-blue: #9CC8EB;
  --ks-lilac: #C9B9E8;
  --ks-pink: #EBC5CF;
  --ks-border: rgb(57 68 90 / 0.10);
  --ks-focus: #5F86A6;
  --ks-verified: #286A4B;
  --ks-verified-soft: #DDEEE5;
  --ks-estimated: #755C18;
  --ks-estimated-soft: #F7EBC5;
  --ks-unavailable: #56616F;
  --ks-unavailable-soft: #E7EAEE;
  --accent: var(--ks-blue);
  --accent-pink: var(--ks-pink);
  --accent-purple: var(--ks-lilac);
  --accent-glow: rgb(156 200 235 / 0.16);
  --pink-glow: rgb(235 197 207 / 0.16);
  --bg-dark: var(--ks-canvas);
  --bg-card: rgb(255 255 255 / 0.72);
  --border-color: var(--ks-border);
  --border-hover: rgb(156 200 235 / 0.72);
  --text-primary: var(--ks-ink);
  --text-secondary: var(--ks-muted-strong);
  --text-muted: var(--ks-muted);
}

html,
body {
  background:
    radial-gradient(circle at 21% 16%, rgb(156 200 235 / 0.22), transparent 24rem),
    radial-gradient(circle at 78% 22%, rgb(201 185 232 / 0.20), transparent 24rem),
    radial-gradient(circle at 54% 86%, rgb(235 197 207 / 0.17), transparent 28rem),
    linear-gradient(155deg, #FCFCFE 0%, #F5F7FB 58%, #F8F5FA 100%) !important;
  color: var(--ks-ink) !important;
}

header,
aside {
  background: rgb(246 247 251 / 0.86) !important;
  border-color: var(--ks-border) !important;
}

.logo-icon {
  background: linear-gradient(135deg, var(--ks-blue), var(--ks-lilac), var(--ks-pink)) !important;
  border: 1px solid rgb(57 68 90 / 0.06) !important;
  box-shadow: none !important;
}

.logo-text,
.hero-text h2 {
  background: none !important;
  color: var(--ks-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

.search-input,
.sort-select,
.filter-btn,
.tag-pill,
.control-panel,
.hero-banner,
.asset-card,
.detail-content,
.ux-filter-dialog,
.ux-comparison-panel,
.ux-compare-tray {
  background: rgb(255 255 255 / 0.72) !important;
  color: var(--ks-ink) !important;
  border-color: var(--ks-border) !important;
  box-shadow: 0 0.5rem 1.8rem rgb(129 147 174 / 0.08) !important;
}

.search-input:focus,
.filter-btn:hover,
.tag-pill:hover,
.asset-card:hover {
  border-color: rgb(156 200 235 / 0.72) !important;
  box-shadow: 0 0.6rem 2rem rgb(129 147 174 / 0.11) !important;
}

.avatar-btn.active,
.category-btn.active,
.tag-pill.active {
  background: rgb(156 200 235 / 0.20) !important;
  border-color: rgb(156 200 235 / 0.72) !important;
  color: var(--ks-ink) !important;
  box-shadow: none !important;
}

.status-dot,
.status-dot.connected {
  box-shadow: none !important;
  animation: none !important;
}

.asset-card,
.control-panel,
.ux-compare-tray,
.ux-comparison-panel,
.detail-content {
  border-radius: 0.75rem !important;
}

.provenance-badge,
.asset-action,
.asset-compare,
.tag-pill {
  border-radius: 0.4rem !important;
}

.provenance-observed {
  color: var(--ks-verified) !important;
  background: var(--ks-verified-soft) !important;
}

.provenance-normalized,
.provenance-derived {
  color: var(--ks-estimated) !important;
  background: var(--ks-estimated-soft) !important;
}

.provenance-unknown {
  color: var(--ks-unavailable) !important;
  background: var(--ks-unavailable-soft) !important;
}

.comparison-contract {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--ks-subtle);
  border: 1px solid var(--ks-border);
  border-radius: 0.75rem;
}

.comparison-contract span {
  padding: 0.5rem;
  background: var(--ks-surface);
  font-size: 0.875rem;
}

.undo-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--ks-ink);
  color: #FFFFFF;
  border-radius: 0.75rem;
  box-shadow: 0 0.8rem 2.5rem rgb(57 68 90 / 0.16);
}

.undo-toast button {
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
}

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--ks-focus) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

@media (max-width: 650px) {
  .comparison-contract { grid-template-columns: 1fr; }
}

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

.ks-freshness {
  padding-left: 0.5rem;
  margin-left: 0.25rem;
  border-left: 1px solid var(--ks-border);
  color: var(--ks-muted-strong);
  font-weight: 500;
  letter-spacing: 0;
}