/* Appearance controls and the original Serviq webapp charcoal/violet palette. */
/* The pre-paint theme chooses a real screenshot; never invert the app's colors. */
.product-site [data-workspace-screen="dark"] { display: none; }
html[data-theme="dark"] .product-site [data-workspace-screen="light"] { display: none; }
html[data-theme="dark"] .product-site [data-workspace-screen="dark"] { display: block; }

.product-site {
  --surface: #f5f5f7;
  --raised: #fff;
  --action: #6045df;
  --action-hover: #4b32bd;
}
.nav-actions { display: flex; flex: none; align-items: center; gap: 12px; }
.theme-toggle {
  display: inline-grid;
  flex: 0 0 56px;
  place-items: center;
  width: 56px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle-track {
  position: relative;
  display: block;
  width: 56px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #ededf1;
  box-shadow: inset 0 1px 3px #00000005;
  transition: background .28s ease, border-color .28s ease;
}
.theme-toggle-thumb {
  position: absolute;
  inset: 2px auto auto 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px #16161b24, 0 1px 2px #16161b0d;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .28s ease;
}
.theme-toggle svg { position: absolute; top: 7px; width: 14px; height: 14px; transition: color .28s ease, transform .3s ease; }
.theme-toggle-sun { left: 7px; color: #5a4d91; }
.theme-toggle-moon { right: 7px; color: #777580; }
.theme-toggle:hover .theme-toggle-track { border-color: #9b90c8; }
.theme-toggle:active .theme-toggle-thumb { transform: scale(.92); }
.product-site .nav .nav-workspace { margin-left: 0; }
.product-site .workspace-auth-theme { top: 12px; right: 60px; border: 0; background: transparent; }
.product-site .workspace-auth-theme:hover { background: transparent; }
.workspace-auth-form input[aria-invalid="true"] { border-color: #b44242; }

html[data-theme="dark"] { color-scheme: dark; background: #16161b; }
html[data-theme="dark"] .product-site {
  --paper: #16161b;
  --ink: #f0eff5;
  --muted: #aaa8b3;
  --line: #373740;
  --violet: #a79eff;
  --deep: #c5bfff;
  --lilac: #302d50;
  --surface: #222229;
  --raised: #282830;
  --action: #665add;
  --action-hover: #776bec;
}
.product-site .button, .workspace-auth-primary { background: var(--action); }
.product-site .button:hover, .workspace-auth-primary:hover { background: var(--action-hover); }
html[data-theme="dark"] .theme-toggle-track { border-color: #625a99; background: #302d50; }
html[data-theme="dark"] .theme-toggle-thumb { transform: translateX(26px); background: #e4dfff; }
html[data-theme="dark"] .theme-toggle:active .theme-toggle-thumb { transform: translateX(26px) scale(.92); }
html[data-theme="dark"] .theme-toggle-sun { color: #b4acdf; transform: rotate(45deg); }
html[data-theme="dark"] .theme-toggle-moon { color: #4b398c; }
html[data-theme="dark"] .product-site .site-header { background: rgba(22,22,27,.86); border-color: var(--line); }
html[data-theme="dark"] .product-site .nav-links a { color: var(--muted); }
html[data-theme="dark"] .product-site .nav-links a:is(:hover,[aria-current="page"]) { color: var(--ink); }
html[data-theme="dark"] .gradient-text { color: #a79eff; background-image: linear-gradient(105deg,#b39cff,#a79eff 55%,#8ab5ef); }
html[data-theme="dark"] :is(.product-tile,.closing-section,.pricing-card,.screen-tabs),
html[data-theme="dark"] .product-site .support-note { background: var(--surface); }
html[data-theme="dark"] :is(.agenda-example,.form) { background: var(--surface); }
html[data-theme="dark"] .product-site .footer { background: var(--paper); }
html[data-theme="dark"] :is(.tile-violet,.pricing-card.plus-plan) { background: #29263d; }
html[data-theme="dark"] :is(.tile-ai,.pricing-card.ai-plan) { background: linear-gradient(125deg,#2d2543,#252434 58%,#202c3c); }
html[data-theme="dark"] .view-labels span { color: #c5bfff; background: #35305f; }
html[data-theme="dark"] :is(.workflow-labels span,.plan-features li) { color: #cac8d1; }
html[data-theme="dark"] .plan-features .inherited { color: var(--ink); }
html[data-theme="dark"] :is(.plan-fee,.screen-tabs) { border-color: var(--line); }
html[data-theme="dark"] .screen-tabs button[aria-pressed="true"] { background: #373740; }
html[data-theme="dark"] .screen-shell { border-color: var(--line); box-shadow: 0 24px 80px -26px #0008,0 0 0 7px var(--surface); }
html[data-theme="dark"] .mini-status { color: #84dab6; background: #1d4435; }
html[data-theme="dark"] .mini-status.neutral { color: #c5bfff; background: #35305f; }
html[data-theme="dark"] :is(.agenda-example .example-label,.meta) { color: var(--muted); }
html[data-theme="dark"] .about-statement { background: #1b1b21; }
html[data-theme="dark"] .product-site .field :is(input,select,textarea) { color: var(--ink); background: var(--raised); border-color: var(--line); }
html[data-theme="dark"] :is(input,textarea)::placeholder { color: #aaa8b3; opacity: 1; }
html[data-theme="dark"] .product-site .page-content a { color: var(--violet) !important; }
html[data-theme="dark"] .product-site .form-status.success { color: #84dab6; }
html[data-theme="dark"] .product-site .form-status.error { color: #ffaaa4; }
html[data-theme="dark"] .skip-link { color: var(--ink); background: var(--surface); }
html[data-theme="dark"] .workspace-auth-card {
  --auth-bg: #222229;
  --auth-ink: #f0eff5;
  --auth-muted: #aaa8b3;
  --auth-line: #373740;
  border-color: var(--auth-line);
  box-shadow: 0 30px 90px #0008;
}
html[data-theme="dark"] .workspace-auth-form input { background: #282830; }
html[data-theme="dark"] .workspace-auth-status { color: #ffaaa4; }
html[data-theme="dark"] .workspace-auth-status[data-tone="success"] { color: #84dab6; }
html[data-theme="dark"] .workspace-auth-form input[aria-invalid="true"] { border-color: #ef817a; }

@media (max-width: 760px) {
  .nav-actions { margin-left: auto; gap: 8px; }
  .product-site .nav .nav-workspace { font-size: 12px; }
  html[data-theme="dark"] .screen-shell { box-shadow: 0 18px 38px -20px #0008,0 0 0 4px var(--surface); }
}
@media (max-width: 380px) {
  .product-site .nav > .brand { gap: 8px; }
  .nav-actions { gap: 6px; }
  .product-site .nav .nav-workspace { padding-inline: 8px; }
  .nav-workspace span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle *, .theme-toggle *::before { transition: none; }
}