:root {
  color-scheme: dark;
  --theme-canvas: #0b0e18;
  --theme-surface: #141827;
  --theme-raised: #1b2030;
  --theme-input: #101523;
  --theme-text: #f2f3fb;
  --theme-muted: #adb5ca;
  --theme-border: #30374b;
  --theme-hover: #22283b;
  --theme-accent: #a99aff;
  --theme-accent-soft: #282244;
  --theme-shadow: #0008;
}

:root[data-theme="light"] {
  color-scheme: light;
  --theme-canvas: #f5f6fa;
  --theme-surface: #ffffff;
  --theme-raised: #f8f9fc;
  --theme-input: #ffffff;
  --theme-text: #17182b;
  --theme-muted: #626a80;
  --theme-border: #e1e4ed;
  --theme-hover: #f1efff;
  --theme-accent: #6248e8;
  --theme-accent-soft: #f0edff;
  --theme-shadow: #17182b1c;
}

html { background: var(--theme-canvas); color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body { background-color: var(--theme-canvas); color: var(--theme-text); }
::selection { background: #7357f36b; color: #fff; }
html[data-theme="light"] ::selection { background: #d9d0ff; color: #211746; }
input, select, textarea { color-scheme: inherit; }

.vitt-theme-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 11px;
  background: var(--theme-raised);
  color: var(--theme-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.vitt-theme-toggle:hover { background: var(--theme-hover); transform: translateY(-1px); }
.vitt-theme-toggle:focus-visible { outline: 3px solid #a99aff; outline-offset: 3px; }
.vitt-theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.top .vitt-theme-toggle { margin-left: 12px; }
.nav > .vitt-theme-toggle { margin-left: 20px; }
.legal-top .vitt-theme-toggle { margin-left: auto; }
.formbox { position: relative; }
.formbox > .vitt-theme-toggle { position: absolute; top: 20px; right: 22px; }

/* Shared dark surfaces for the authenticated app and generated content. */
html[data-theme="dark"] body:not(:has(.hero)) { background: var(--theme-canvas); color: var(--theme-text); }
html[data-theme="dark"] .main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .view { color: var(--theme-text); }
html[data-theme="dark"] .top,
html[data-theme="dark"] .card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .vmodal,
html[data-theme="dark"] .widget-card,
html[data-theme="dark"] .field-config-row,
html[data-theme="dark"] .conversation-shell,
html[data-theme="dark"] .conversation-list,
html[data-theme="dark"] .conversation-item,
html[data-theme="dark"] .chat-head,
html[data-theme="dark"] .reply-form,
html[data-theme="dark"] .vfield input,
html[data-theme="dark"] .vfield select,
html[data-theme="dark"] .vfield textarea,
html[data-theme="dark"] .searchbar input,
html[data-theme="dark"] .field-config-row input:not([type="checkbox"]),
html[data-theme="dark"] .field-config-row select {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
}
html[data-theme="dark"] .top { border-color: var(--theme-border); }
html[data-theme="dark"] .chat-history,
html[data-theme="dark"] .empty-chat,
html[data-theme="dark"] .loading { background: var(--theme-raised); color: var(--theme-muted); }
html[data-theme="dark"] .conversation-item { border-color: var(--theme-border); }
html[data-theme="dark"] .conversation-item:hover,
html[data-theme="dark"] .conversation-item.active { background: var(--theme-hover); }
html[data-theme="dark"] .conversation-item span,
html[data-theme="dark"] .conversation-item small,
html[data-theme="dark"] .chat-head small { color: var(--theme-muted); }
html[data-theme="dark"] .chat-message:not(.agent) { background: var(--theme-raised); border-color: var(--theme-border); color: var(--theme-text); }
html[data-theme="dark"] .reply-form { border-color: var(--theme-border); }
html[data-theme="dark"] .reply-form input,
html[data-theme="dark"] .vfield input,
html[data-theme="dark"] .vfield select,
html[data-theme="dark"] .vfield textarea,
html[data-theme="dark"] .searchbar input,
html[data-theme="dark"] .field-config-row input:not([type="checkbox"]),
html[data-theme="dark"] .field-config-row select { background: var(--theme-input); }
html[data-theme="dark"] .vclose { background: var(--theme-hover); color: var(--theme-text); }
html[data-theme="dark"] .btn:not(.primary):not(.danger),
html[data-theme="dark"] .history-toolbar input,
html[data-theme="dark"] .history-detail,
html[data-theme="dark"] .history-item {
  background-color: var(--theme-raised);
  color: var(--theme-text);
  border-color: var(--theme-border);
}
html[data-theme="dark"] .btn:not(.primary):not(.danger):hover,
html[data-theme="dark"] .history-item:hover,
html[data-theme="dark"] .history-item.active { background-color: var(--theme-hover); }
html[data-theme="dark"] .btn:not(.primary):not(.danger):disabled { color: var(--theme-muted); opacity: .62; }
html[data-theme="dark"] .history-item span,
html[data-theme="dark"] .history-item small { color: var(--theme-muted); }
html[data-theme="dark"] .history-card,
html[data-theme="dark"] .history-list { border-color: var(--theme-border); }
html[data-theme="dark"] .plan-usage { background: #25213e; border-color: #48406c; }
html[data-theme="dark"] .domain { background: #302a50; color: #d5ccff; }
html[data-theme="dark"] .clickrow:hover { background: var(--theme-hover); }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td { border-color: var(--theme-border); }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .loading,
html[data-theme="dark"] .color-label { color: var(--theme-muted); }
html[data-theme="dark"] .badge { background: #153c34; color: #83e1c7; }
html[data-theme="dark"] .code { background: #0b0e18; color: #ded8ff; }
html[data-theme="dark"] .vmodal::backdrop { background: #050711bd; }

/* The marketing surface has its own composed palette in either appearance. */
html[data-theme="light"] body:has(.hero) { --ink: #19192b; --mut: #5f687b; --line: #dfe3ec; --soft: #f5f6fa; background: #f5f6fa; color: #19192b; }
html[data-theme="light"] body:has(.hero) .nav { border-color: #dfe3ec; }
html[data-theme="light"] body:has(.hero) .nav nav > a:not(.btn),
html[data-theme="light"] body:has(.hero) .logo,
html[data-theme="light"] body:has(.hero) .hero > div > p,
html[data-theme="light"] body:has(.hero) .proof,
html[data-theme="light"] body:has(.hero) .section-head p,
html[data-theme="light"] body:has(.hero) .section-copy,
html[data-theme="light"] body:has(.hero) .step p,
html[data-theme="light"] body:has(.hero) .feature p,
html[data-theme="light"] body:has(.hero) .faq details p,
html[data-theme="light"] body:has(.hero) .closing p,
html[data-theme="light"] body:has(.hero) .foot { color: #5f687b; }
html[data-theme="light"] body:has(.hero) .nav nav > a:not(.btn):hover,
html[data-theme="light"] body:has(.hero) .foot-links a:hover { color: #211746; }
html[data-theme="light"] body:has(.hero) .nav .btn,
html[data-theme="light"] body:has(.hero) .actions .btn:not(.primary),
html[data-theme="light"] body:has(.hero) .menu-toggle { background: #fff; color: #27243b; border-color: #dfe3ec; }
html[data-theme="light"] body:has(.hero) .hero:before { background: radial-gradient(ellipse,#7357f31c,transparent 68%); }
html[data-theme="light"] body:has(.hero) .desk { background: linear-gradient(145deg,#fff,#f4f2ff); border-color: #d8ddec; box-shadow: 0 30px 80px #33304424; }
html[data-theme="light"] body:has(.hero) .desk-top,
html[data-theme="light"] body:has(.hero) .desk-chat-head { color: #292a40; border-color: #dfe3ec; }
html[data-theme="light"] body:has(.hero) .desk-side { color: #666e81; border-color: #dfe3ec; }
html[data-theme="light"] body:has(.hero) .desk-brand,
html[data-theme="light"] body:has(.hero) .desk-chat-head b { color: #24243a; }
html[data-theme="light"] body:has(.hero) .bubble:not(.me) { background: #fff; color: #303248; border-color: #e2e5ee; }
html[data-theme="light"] body:has(.hero) .bubble small { color: #656d81; }
html[data-theme="light"] body:has(.hero) .desk-footer { color: #596276; border-color: #dfe3ec; }
html[data-theme="light"] body:has(.hero) .float-note { background: #fff; color: #27283e; border-color: #e0e3ec; box-shadow: 0 15px 40px #26243b20; }
html[data-theme="light"] body:has(.hero) .pricing { background: linear-gradient(180deg,#eceef5,#f5f6fa); border-color: #e1e4ec; }
html[data-theme="light"] body:has(.hero) .plan { background: #fff; color: #202137; border-color: #dfe3ec; box-shadow: 0 12px 35px #25243b0d; }
html[data-theme="light"] body:has(.hero) .plan.pop { border-color: #907cff; box-shadow: 0 20px 45px #6048e816; }
html[data-theme="light"] body:has(.hero) .plan ul { color: #555d72; }
html[data-theme="light"] body:has(.hero) .closing { background: radial-gradient(ellipse at 85% 5%,#917cff20,transparent 40%),linear-gradient(130deg,#fff,#efedfa); border-color: #dfddec; }
html[data-theme="light"] body:has(.hero) .faq summary { color: #24243a; }
html[data-theme="light"] .side { background: #fff; color: #626a80; border-right: 1px solid #e1e4ed; }
html[data-theme="light"] .side .logo { color: #22243a; border-color: #e1e4ed; }
html[data-theme="light"] .menu button.active,
html[data-theme="light"] .menu button:hover { color: #30245e; background: #f0edff; }
html[data-theme="light"] .acct { border-color: #e1e4ed; }
html[data-theme="light"] .logout { color: #626a80; }
html[data-theme="light"] .legal-copy .updated,
html[data-theme="light"] .legal-copy p,
html[data-theme="light"] .legal-copy li,
html[data-theme="light"] .legal-toc a { color: #535d72; }
html[data-theme="light"] .legal-identity { color: #2b3044; border-color: #e1e4ed; }
html[data-theme="light"] .legal-warning { background: #fff8e8; border-color: #ead9ac; color: #66511f; }

/* Authentication and legal reading surfaces. */
html[data-theme="dark"] body:has(.formbox) { background: radial-gradient(ellipse at 15% 20%,#352761 0,transparent 42%),linear-gradient(135deg,#101321,#0b0e18); }
html[data-theme="dark"] body:has(.formbox),
html[data-theme="dark"] body:has(.formbox) .side,
html[data-theme="dark"] .formbox { color: #f2f3fb; }
html[data-theme="dark"] .formbox { background: #141827; box-shadow: -20px 0 70px #0004; }
html[data-theme="dark"] .form input { background: var(--theme-input); color: var(--theme-text); border-color: var(--theme-border); }
html[data-theme="dark"] .error { background: #451e2a; color: #ffb8c6; }
html[data-theme="dark"] .legal-top { border-color: var(--theme-border); }
html[data-theme="dark"] .legal-copy .updated,
html[data-theme="dark"] .legal-copy p,
html[data-theme="dark"] .legal-copy li,
html[data-theme="dark"] .legal-toc a { color: #c0c7d9; }
html[data-theme="dark"] .legal-identity { color: #e1e5f0; border-color: var(--theme-border); }
html[data-theme="dark"] .legal-warning { background: #352e1d; border-color: #756137; color: #f1d58d; }

@media (max-width: 700px) {
  .vitt-theme-toggle { min-height: 38px; padding: 7px 9px; }
  .nav > .vitt-theme-toggle { margin-left: auto; margin-right: 9px; }
  .nav .menu-toggle { margin-left: 0; }
  .top .vitt-theme-toggle span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vitt-theme-toggle { transition: none; }
}