:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08111f;
  --bg-alt: #0d1726;
  --alt: #0d1726;
  --ink: #edf5ff;
  --soft: #aeb9c8;
  --line: rgba(204, 225, 245, 0.14);
  --dark: #050b14;
  --bg-dark: #050b14;
  --bg-dark-2: #08111f;
  --ink-soft: #aeb9c8;
  --ink-invert: #edf5ff;
  --ink-invert-soft: #aeb9c8;
  --premium-border: rgba(204, 225, 245, 0.14);
}

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

.theme-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.theme-toggle::before {
  content: "☾";
  font: 700 18px/1 Arial, sans-serif;
  transform: translateY(-1px);
}

.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 157, 138, 0.45);
}

.theme-toggle:focus-visible {
  outline: 3px solid rgba(91, 87, 232, 0.35);
  outline-offset: 3px;
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(204, 225, 245, 0.2);
}

html[data-theme="dark"] .theme-toggle::before {
  content: "☀";
  color: #70e8d2;
  font-size: 16px;
}

html[data-theme="dark"] header,
html[data-theme="dark"] header#siteHeader,
html[data-theme="dark"] header#siteHeader nav,
html[data-theme="dark"] header#siteHeader nav.wrap {
  background: rgba(8, 17, 31, 0.86) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] header.scrolled {
  background: rgba(8, 17, 31, 0.94) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] header#siteHeader .logo,
html[data-theme="dark"] header#siteHeader .nav-links a,
html[data-theme="dark"] .logo,
html[data-theme="dark"] .burger {
  color: var(--ink) !important;
}

html[data-theme="dark"] .burger span,
html[data-theme="dark"] .burger span::before,
html[data-theme="dark"] .burger span::after {
  background: var(--ink) !important;
}

html[data-theme="dark"] header#siteHeader .nav-links.mobile-open {
  background: rgba(8, 17, 31, 0.98) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .hero:not(.dark),
html[data-theme="dark"] .section:not(.dark):not(.trust):not(.growth):not(.cta-final),
html[data-theme="dark"] .metrics,
html[data-theme="dark"] .pricing-preview,
html[data-theme="dark"] footer {
  background-color: var(--bg) !important;
  color: var(--ink);
  border-color: var(--line) !important;
}

html[data-theme="dark"] .alt,
html[data-theme="dark"] section.alt,
html[data-theme="dark"] #workflow {
  background: var(--bg-alt) !important;
}

html[data-theme="dark"] .hero-bg img {
  filter: saturate(0.72) contrast(1.02) brightness(0.48);
}

html[data-theme="dark"] .hero-bg::after {
  background:
    radial-gradient(ellipse 740px 440px at 76% 33%, rgba(91, 87, 232, 0.15), transparent 68%),
    radial-gradient(ellipse 620px 420px at 69% 64%, rgba(15, 157, 138, 0.15), transparent 68%),
    linear-gradient(103deg, rgba(8, 17, 31, 0.99) 0%, rgba(8, 17, 31, 0.95) 35%, rgba(8, 17, 31, 0.76) 62%, rgba(8, 17, 31, 0.52) 100%),
    linear-gradient(180deg, transparent 55%, var(--bg) 100%) !important;
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .category-nav a,
html[data-theme="dark"] .plan-trust span,
html[data-theme="dark"] .tag {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .mod-cell,
html[data-theme="dark"] .plan,
html[data-theme="dark"] .addon,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .contact-point,
html[data-theme="dark"] .form-shell,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .growth-node {
  background: #101c2c !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: 0 22px 55px -36px rgba(0, 0, 0, 0.72) !important;
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .mod-cell:hover,
html[data-theme="dark"] .category-nav a:hover {
  background: #142337 !important;
}

html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
  background: #0a1422 !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder {
  color: #77879a;
}

html[data-theme="dark"] .btn-ghost {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(204, 225, 245, 0.18) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-dark {
  background: #edf5ff !important;
  color: #08111f !important;
}

html[data-theme="dark"] .product-shell,
html[data-theme="dark"] .hero-chat,
html[data-theme="dark"] .premium-chat,
html[data-theme="dark"] .product-topbar,
html[data-theme="dark"] .product-main,
html[data-theme="dark"] .product-side,
html[data-theme="dark"] .dash-kpis > div,
html[data-theme="dark"] .dash-chart,
html[data-theme="dark"] .dash-queue > div,
html[data-theme="dark"] .real-kpi,
html[data-theme="dark"] .real-panel,
html[data-theme="dark"] .quick-item,
html[data-theme="dark"] .mini,
html[data-theme="dark"] .mini-chip,
html[data-theme="dark"] .mini-tracking .dot,
html[data-theme="dark"] .mini-delivery .channel-ico,
html[data-theme="dark"] .mini-chat .mchat-msg.ai,
html[data-theme="dark"] .mini-qr .qr-grid {
  background: #101c2c !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .product-side span.active,
html[data-theme="dark"] .product-search,
html[data-theme="dark"] .newbill {
  background: #17263a !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .report-showcase {
  background: #101c2c !important;
}

/* Keep the product preview visually faithful to the light application UI. */
html[data-theme="dark"] .product-shell {
  background: rgba(248, 251, 255, 0.94) !important;
  color: #12151c !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] .product-topbar,
html[data-theme="dark"] .product-main,
html[data-theme="dark"] .product-side,
html[data-theme="dark"] .dash-kpis > div,
html[data-theme="dark"] .dash-chart,
html[data-theme="dark"] .dash-queue > div,
html[data-theme="dark"] .real-kpi,
html[data-theme="dark"] .real-panel,
html[data-theme="dark"] .quick-item {
  background: #ffffff !important;
  color: #12151c !important;
  border-color: rgba(18, 21, 28, 0.1) !important;
}

html[data-theme="dark"] .product-side {
  background: #f4f7fa !important;
}

html[data-theme="dark"] .product-side span.active,
html[data-theme="dark"] .product-search,
html[data-theme="dark"] .newbill {
  background: #ffffff !important;
  color: #12151c !important;
}

html[data-theme="dark"] .features li,
html[data-theme="dark"] .feature-caption,
html[data-theme="dark"] .for,
html[data-theme="dark"] .note,
html[data-theme="dark"] .addon-note {
  color: var(--soft) !important;
}

html[data-theme="dark"] .footlinks a,
html[data-theme="dark"] .foot-col a,
html[data-theme="dark"] .foot-brand .contact,
html[data-theme="dark"] .foot-bottom {
  color: var(--soft) !important;
}

@media (max-width: 980px) {
  .theme-toggle {
    width: 34px;
    height: 34px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body,
  header,
  footer,
  .card,
  .plan,
  .form-shell,
  .contact-point {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
}