/* Theme toggle */
.theme-toggle {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 10px;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.theme-toggle:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html:not([data-theme="dark"]) .theme-toggle .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; }

.panel-landing-media--dark { display: none; }
html[data-theme="dark"] .panel-landing-media--light { display: none; }
html[data-theme="dark"] .panel-landing-media--dark { display: block; }

.app-showcase-media img.app-showcase-media--dark { display: none; }
html[data-theme="dark"] .app-showcase-media img.app-showcase-media--light { display: none; }
html[data-theme="dark"] .app-showcase-media img.app-showcase-media--dark { display: block; }

html:not([data-theme="dark"]) .app-showcase-eyebrow { color: var(--muted); }
html:not([data-theme="dark"]) .app-showcase-head h2 { color: var(--ink); }
html:not([data-theme="dark"]) .app-showcase-card {
  background: #eceae6;
}
html:not([data-theme="dark"]) .app-showcase-card h3 { color: var(--ink); }
html:not([data-theme="dark"]) .app-showcase-card p { color: var(--muted); }
html:not([data-theme="dark"]) .app-showcase-media { background: transparent; }

html[data-theme="dark"] .app-showcase-card {
  background: var(--surface);
}
html[data-theme="dark"] .app-showcase-media { background: transparent; }

.nav-theme-item { display: none; }
.nav-theme-desktop { display: contents; }
@media (max-width: 1080px) {
  .nav-theme-desktop { display: none; }
  .nav-theme-item {
    display: block;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .nav-theme-item .theme-toggle {
    margin-left: 2px;
    padding: 10px 12px;
    border-radius: 10px;
  }
}

/* ---------- Dark mode: reference charcoal palette ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101213;
  --ink: #f2f2f3;
  --muted: #85878a;
  --line: #242628;
  --surface: #191b1d;
  --surface-2: #202224;
  --surface-inset: #131516;
  --blue: #0b6bff;
  --blue-2: #2f80ff;
  --accent-soft: rgba(11, 107, 255, .16);
  --nav-bg: rgba(16,18,19,.96);
  --shadow: 0 24px 50px -20px rgba(0,0,0,.65);
  scrollbar-color: #45484b var(--bg);
}
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #45484b;
  border-radius: 999px;
  border: 2px solid var(--bg);
}

html[data-theme="dark"] .btn-outline {
  border-color: #45484b;
  background: var(--surface);
  color: var(--ink);
}
html[data-theme="dark"] .btn-outline:hover { background: var(--surface-2); }
html[data-theme="dark"] .btn-dark { background: #f2f2f3; color: #101213; }
html[data-theme="dark"] .btn-dark:hover { background: #fff; }

html[data-theme="dark"] .nav.scrolled,
html[data-theme="dark"] .nav:has(.has-menu.menu-open),
html[data-theme="dark"] .nav:has(.nav-links.open),
html[data-theme="dark"] .nav:has(.nav-item.expanded) {
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -14px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .mega {
  background: var(--surface);
  border-top-color: var(--line);
  box-shadow: 0 28px 40px -24px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .mega-title { color: var(--muted); }
html[data-theme="dark"] .mega-link { color: var(--ink); }
html[data-theme="dark"] .mega-link:hover { background: var(--surface-2); }
html[data-theme="dark"] .mega-card {
  border-color: var(--line);
  background: var(--surface-2);
}
html[data-theme="dark"] .mega-card:hover {
  border-color: color-mix(in srgb, var(--blue) 35%, var(--line));
  background: var(--surface);
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .mega-card-text b { color: var(--ink); }
html[data-theme="dark"] .mega-card-text small { color: var(--muted); }
html[data-theme="dark"] .mega-card-text em { color: color-mix(in srgb, var(--muted) 88%, #979a9e); }
html[data-theme="dark"] .mega-card:hover b { color: var(--blue-2); }
html[data-theme="dark"] .mega-card-ico {
  background: color-mix(in srgb, var(--c) 82%, var(--surface));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 6px 14px -8px color-mix(in srgb, var(--c) 45%, transparent);
}
html[data-theme="dark"] .burger span { background: var(--ink); }

html[data-theme="dark"] .prompt {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .prompt textarea { color: var(--ink); }
html[data-theme="dark"] .prompt-placeholder { color: var(--muted); }
html[data-theme="dark"] .picked { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .suggest {
  background: var(--surface);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .suggest li { color: var(--ink); }
html[data-theme="dark"] .suggest li.active { background: var(--surface-2); }

html[data-theme="dark"] .chip {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .chip[aria-pressed="true"] { background: #f2f2f3; color: #101213; }

html[data-theme="dark"] .card,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .t-card,
html[data-theme="dark"] .faq-item {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .t-quote { color: #b0b2b5; }
html[data-theme="dark"] .t-stars svg { fill: #f2f2f3; }
html[data-theme="dark"] .t-person b { color: var(--ink); }
html[data-theme="dark"] .t-person small { color: var(--muted); }

html[data-theme="dark"] .start-card {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .step-text { color: var(--muted); }
html[data-theme="dark"] .tabs {
  background: var(--surface-inset);
  border: 1px solid var(--line);
}
html[data-theme="dark"] .tab { color: #979a9e; }
html[data-theme="dark"] .tab span {
  background: #45484b;
  color: #f2f2f3;
}
html[data-theme="dark"] .tab.active {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line), 0 4px 12px -6px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .tab.active span {
  background: var(--blue);
  color: #fff;
}

html[data-theme="dark"] .footer-cols a { color: #b0b2b5; }
html[data-theme="dark"] .footer-bottom { color: var(--muted); border-top-color: var(--line); }
html[data-theme="dark"] .socials svg { fill: #85878a; }

html[data-theme="dark"] .billing {
  background: var(--surface-2);
  border-color: var(--line);
  box-shadow: none;
}
html[data-theme="dark"] .billing-opt { color: #b4bccf; }
html[data-theme="dark"] .billing-opt span { color: #4ade80; }
html[data-theme="dark"] .billing-opt.active {
  background: #f2f2f3;
  color: #101213;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .billing-opt.active span { color: #15803d; }

html[data-theme="dark"] .copy-toast {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Auth */
.auth-top-actions { display: flex; align-items: center; gap: 8px; }
html[data-theme="dark"] .auth-body { background: var(--bg); }
html[data-theme="dark"] .auth-side {
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(11, 107, 255, .12), transparent 70%),
    var(--bg);
}
html[data-theme="dark"] .auth-back { color: var(--muted); }
html[data-theme="dark"] .auth-back:hover { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .auth-tabs { background: var(--surface-2); }
html[data-theme="dark"] .auth-tabs a { color: var(--muted); }
html[data-theme="dark"] .auth-tabs a.active { color: var(--ink); }
html[data-theme="dark"] .auth-tabs-pill { background: var(--surface); }
html[data-theme="dark"] .input input { color: var(--ink); }
html[data-theme="dark"] .input input::placeholder { color: var(--muted); }
html[data-theme="dark"] .auth-success-ico {
  background: rgba(34, 197, 94, .18);
  box-shadow: 0 0 0 8px rgba(34, 197, 94, .08);
}
html[data-theme="dark"] .auth-success-ico svg { stroke: #4ade80; }

/* Onboarding */
html[data-theme="dark"] .ob-top { background: var(--nav-bg); }
html[data-theme="dark"] .ob-body,
html[data-theme="dark"] #dash-proj-onboarding-view {
  --blue: #0b6bff;
  --blue-2: #2f80ff;
  --accent-soft: rgba(11, 107, 255, .16);
}
html[data-theme="dark"] .ob-steps { background: var(--surface-2); }
html[data-theme="dark"] .ob-steps li { color: var(--muted); }
html[data-theme="dark"] .ob-steps li.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line), 0 4px 12px -6px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .ob-steps li span { background: #45484b; }
html[data-theme="dark"] .ob-steps li.active span { background: var(--blue); color: #fff; }
html[data-theme="dark"] .ob-steps li.done span { background: #22c55e; }
html[data-theme="dark"] .ob-steps li.done span::after { color: #fff; }
html[data-theme="dark"] .ob-steps li.clickable:hover { color: var(--ink); }
html[data-theme="dark"] .ob-logout { color: var(--muted); }
html[data-theme="dark"] .ob-logout:hover { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .ob-progress { background: var(--surface-2); }
html[data-theme="dark"] .ob-card,
html[data-theme="dark"] .ob-scan-card,
html[data-theme="dark"] .ob-method,
html[data-theme="dark"] .ob-signup {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .ob-desc,
html[data-theme="dark"] .ob-facts small { color: var(--muted); }
html[data-theme="dark"] .ob-site img { border-color: var(--line); }
html[data-theme="dark"] .ob-comp-list a { background: var(--surface-2); }
html[data-theme="dark"] .ob-comp-list a:hover { background: var(--surface); border-color: var(--line); }

/* Onboarding - scan step */
html[data-theme="dark"] .ob-scan-head h2 b {
  background: var(--accent-soft);
  color: var(--blue);
}
html[data-theme="dark"] .ob-chip {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .ob-chip img,
html[data-theme="dark"] .ob-chip i {
  background: var(--surface-inset);
  border-color: var(--line);
}
html[data-theme="dark"] .ob-task {
  background: var(--surface-inset);
  border-color: transparent;
  opacity: .7;
}
html[data-theme="dark"] .ob-task.running {
  background: var(--surface-2);
  border-color: rgba(11, 107, 255, .35);
  box-shadow: 0 0 0 3px rgba(11, 107, 255, .12);
}
html[data-theme="dark"] .ob-task.done {
  background: var(--surface-2);
  border-color: var(--line);
}
html[data-theme="dark"] .ob-task-ico { border-color: #45484b; }
html[data-theme="dark"] .ob-task.running .ob-task-ico {
  border-color: #45484b;
  border-top-color: var(--blue);
}
html[data-theme="dark"] .ob-task b { color: var(--ink); }
html[data-theme="dark"] .ob-task small { color: var(--muted); }
html[data-theme="dark"] .ob-scan-bar { background: var(--surface-inset); }
html[data-theme="dark"] .ob-scan-card {
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -28px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .ob-scan-visual { border-bottom-color: var(--line); }

/* Onboarding - results */
html[data-theme="dark"] .ob-card {
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -28px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .ob-facts div {
  background: var(--surface-inset);
  border: 1px solid var(--line);
}
html[data-theme="dark"] .ob-facts b { color: var(--ink); }
html[data-theme="dark"] .ob-tags i {
  background: var(--accent-soft);
  border-color: rgba(11, 107, 255, .28);
  color: #1d5fe0;
}
html[data-theme="dark"] .ob-comp-list a { border: 1px solid var(--line); }
html[data-theme="dark"] .ob-comp-list img {
  background: var(--surface-inset);
  border: 1px solid var(--line);
}
html[data-theme="dark"] .ob-empty { background: var(--surface-inset); }
html[data-theme="dark"] .ob-seg-ico { background: var(--surface-inset); border: 1px solid var(--line); }
html[data-theme="dark"] .ob-seg-bar { background: var(--surface-inset); }
html[data-theme="dark"] .ob-sub { color: var(--muted); }
html[data-theme="dark"] .ob-matches small { color: var(--muted); }
html[data-theme="dark"] .ob-matches em {
  color: #6ee7b7;
  background: rgba(34, 197, 94, .14);
}
html[data-theme="dark"] .ring em { background: var(--surface-2); color: #4ade80; }

/* Onboarding - methods & account */
html[data-theme="dark"] .ob-method-ico {
  background: color-mix(in srgb, var(--c) 18%, var(--surface-2));
}
html[data-theme="dark"] .ob-switch { background: #3a3f4d; }
html[data-theme="dark"] .ob-method-badge { box-shadow: 0 0 0 2px var(--surface); }
html[data-theme="dark"] .ob-summary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .ob-google {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .ob-google:hover { background: var(--surface); }
html[data-theme="dark"] .ob-leave-panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
}
html[data-theme="dark"] #obSignup input {
  background: var(--surface-inset);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] #obSignup input::placeholder { color: var(--muted); }
html[data-theme="dark"] #obSignup input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(11, 107, 255, .18);
}
html[data-theme="dark"] #obSignup label { color: var(--ink); }
html[data-theme="dark"] .ob-form-error { color: #fca5a5; }
html[data-theme="dark"] .ob-ghost { color: rgba(255, 255, 255, .85); }

/* Auth - form side */
html[data-theme="dark"] .field label { color: var(--ink); }
html[data-theme="dark"] .auth-google {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .auth-google:hover {
  background: var(--surface-2);
  border-color: #45484b;
  box-shadow: none;
}
html[data-theme="dark"] .auth-divider { color: var(--muted); }
html[data-theme="dark"] .input > svg { stroke: var(--muted); }
html[data-theme="dark"] .input input {
  background: var(--surface-inset);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .input input:hover { border-color: #45484b; }
html[data-theme="dark"] .input input:focus {
  background: var(--surface-2);
  box-shadow: 0 0 0 4px rgba(11, 107, 255, .18);
}
html[data-theme="dark"] .input input.invalid {
  background: rgba(229, 72, 77, .08);
  border-color: #e5484d;
}
html[data-theme="dark"] .pw-toggle { color: var(--muted); }
html[data-theme="dark"] .pw-toggle:hover { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .pw-meter i { background: var(--surface-inset); }
html[data-theme="dark"] .auth-error {
  background: rgba(229, 72, 77, .12);
  border-color: rgba(229, 72, 77, .35);
  color: #fca5a5;
}
html[data-theme="dark"] .auth-legal { color: var(--muted); }
html[data-theme="dark"] .auth-legal a { color: var(--ink); }
html[data-theme="dark"] .auth-foot { color: var(--muted); }
html[data-theme="dark"] .auth-foot a:hover { color: var(--ink); }

/* Auth - promo panel stats */
html[data-theme="dark"] .auth-stat {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .auth-stat-head b { color: var(--ink); }
html[data-theme="dark"] .auth-stat-head span {
  color: #4ade80;
  background: rgba(34, 197, 94, .16);
}
html[data-theme="dark"] .auth-stat-row div {
  background: var(--surface-inset);
  border: 1px solid var(--line);
}
html[data-theme="dark"] .auth-stat-row small { color: var(--muted); }
html[data-theme="dark"] .auth-stat-row b { color: var(--ink); }

/* Homepage - misc surfaces */
html[data-theme="dark"] .feature-head h2,
html[data-theme="dark"] .faq h2,
html[data-theme="dark"] .testimonials h2 { color: var(--ink); }
html[data-theme="dark"] .picked-clear { color: var(--muted); }
html[data-theme="dark"] .picked-clear:hover { background: var(--surface-2); color: var(--ink); }
/* Ask bar in hero: match dark page */
html[data-theme="dark"] .ask-bar {
  background: rgba(25, 27, 29, .95);
  box-shadow: 0 0 0 5px rgba(25, 27, 29, .55), 0 14px 30px -10px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .ask-bar input { color: var(--ink); }
html[data-theme="dark"] .ask-placeholder { color: var(--muted); }
html[data-theme="dark"] .ask-answer {
  background: var(--surface);
  border-color: var(--line);
  color: #b0b2b5;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .ask-answer b { color: var(--ink); }
html[data-theme="dark"] .ask-bar button[type="submit"] { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] .ask-bar .ask-dismiss { background: transparent; color: var(--muted); }
html[data-theme="dark"] .ask-bar .ask-dismiss:hover { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .ask.filled .ask-bar button[type="submit"] { background: var(--blue); color: #fff; }

/* Fixed bottom bar (after scroll): light chrome on dark pages */
html[data-theme="dark"] .ask.ask-fixed .ask-bar {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 14px 30px -10px rgba(10, 20, 60, .35);
}
html[data-theme="dark"] .ask.ask-fixed .ask-bar input { color: #111; }
html[data-theme="dark"] .ask.ask-fixed .ask-placeholder { color: #555; }
html[data-theme="dark"] .ask.ask-fixed .ask-answer {
  background: #fff;
  border-color: #e7e8ee;
  color: #333;
  box-shadow: 0 20px 40px -14px rgba(10, 20, 60, .35);
}
html[data-theme="dark"] .ask.ask-fixed .ask-answer b { color: #111; }
html[data-theme="dark"] .ask.ask-fixed .ask-bar button[type="submit"] { background: #eceef3; color: #555; }
html[data-theme="dark"] .ask.ask-fixed .ask-bar .ask-dismiss { background: transparent; color: #888; }
html[data-theme="dark"] .ask.ask-fixed .ask-bar .ask-dismiss:hover { background: #eceef3; color: #555; }
html[data-theme="dark"] .ask.ask-fixed.filled .ask-bar button[type="submit"] { background: var(--blue); color: #fff; }

@media (max-width: 1080px) {
  html[data-theme="dark"] .nav-links {
    background: var(--surface);
    border-bottom-color: var(--line);
  }
  html[data-theme="dark"] .mega { box-shadow: none; }
  html[data-theme="dark"] .nav:has(.nav-links.open),
  html[data-theme="dark"] .nav:has(.nav-item.expanded) {
    box-shadow: none;
  }
}

/* Dashboard dark tokens: dashboard-vars.css (loads after this file) */