.theme-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface, #fff);
  font-size: 19px;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.theme-toggle:hover {
  transform: rotate(-12deg);
  border-color: #8ca266;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e5eee7;
  --muted: #bac6bd;
  --line: #35433a;
  --paper: #202a24;
  --surface: #1b2520;
  --surface-raised: #222d26;
  --surface-soft: #252f29;
  --page-bg: #111814;
  --field-bg: #151d18;
  --accent-strong: #c3df99;
  --accent-soft: #2a382f;
}

/* Keep dark text on pale lime buttons instead of inheriting the light text color. */
html[data-theme="dark"] .button.lime {
  color: #193d34;
}

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

html[data-theme="dark"] .site-header {
  background: var(--page-bg);
}

html[data-theme="dark"] .brand-symbol,
html[data-theme="dark"] .button.dark,
html[data-theme="dark"] .tabs button.active,
html[data-theme="dark"] .role-choice,
html[data-theme="dark"] .wizard-steps button.current > span,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .account-nav a.active {
  background: #d9ed9c;
  color: #193d34;
  border-color: #d9ed9c;
}

html[data-theme="dark"] .quota-card,
html[data-theme="dark"] .contact-banner,
html[data-theme="dark"] .hero-car:hover .hero-car-icon {
  background: #193d34;
  color: #fff;
}

html[data-theme="dark"] .vip-card .role-choice:not(:disabled) {
  background: #7652a5;
  border-color: #7652a5;
  color: #fff;
}

html[data-theme="dark"] .role-choice:disabled {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--muted);
}

html[data-theme="dark"] .market-main,
html[data-theme="dark"] .approach,
html[data-theme="dark"] .reviews-section,
html[data-theme="dark"] .form-panel,
html[data-theme="dark"] .empty,
html[data-theme="dark"] pre,
html[data-theme="dark"] .detail-link,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .dashboard-stats article,
html[data-theme="dark"] .account-empty,
html[data-theme="dark"] .my-listing,
html[data-theme="dark"] .profile-panel,
html[data-theme="dark"] .wizard-main,
html[data-theme="dark"] .wizard-steps,
html[data-theme="dark"] .live-preview-card,
html[data-theme="dark"] .upload-photo,
html[data-theme="dark"] .upload-symbol,
html[data-theme="dark"] .seller-detail,
html[data-theme="dark"] dialog {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .market-main {
  background: #151d18;
  border-color: #27332b;
}

html[data-theme="dark"] .demo-strip,
html[data-theme="dark"] .seller-invite,
html[data-theme="dark"] .quota-progress,
html[data-theme="dark"] .empty-car,
html[data-theme="dark"] .my-listing-image,
html[data-theme="dark"] .wizard-steps,
html[data-theme="dark"] .mini-photo,
html[data-theme="dark"] .upload-zone,
html[data-theme="dark"] .upload-tip,
html[data-theme="dark"] .final-preview-image,
html[data-theme="dark"] .seller-detail,
html[data-theme="dark"] .car-image {
  background: var(--surface-soft);
  border-color: var(--line);
}

html[data-theme="dark"] .demo-strip,
html[data-theme="dark"] .demo-strip strong,
html[data-theme="dark"] .car-specs,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .account-shell,
html[data-theme="dark"] .profile-panel,
html[data-theme="dark"] .wizard-panel,
html[data-theme="dark"] .vehicle-description,
html[data-theme="dark"] .dialog-specs dd {
  color: var(--ink);
}

html[data-theme="dark"] .demo-role-select,
html[data-theme="dark"] .market-form input:not([type="checkbox"]):not([type="file"]),
html[data-theme="dark"] .market-form select,
html[data-theme="dark"] .market-form textarea,
html[data-theme="dark"] #contact-form input,
html[data-theme="dark"] #contact-form textarea,
html[data-theme="dark"] #contact-form select,
html[data-theme="dark"] #project-form input,
html[data-theme="dark"] #project-form textarea,
html[data-theme="dark"] #project-form select,
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
  color: var(--ink);
  background: #151d18;
  border-color: var(--line);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #8d9b91;
}

html[data-theme="dark"] nav {
  background: transparent;
}

html[data-theme="dark"] .car-tag,
html[data-theme="dark"] .heart,
html[data-theme="dark"] .close,
html[data-theme="dark"] .remove-photo {
  color: #193d34;
}

html[data-theme="dark"] .status-badge,
html[data-theme="dark"] .quota-notice,
html[data-theme="dark"] .quota-notice.blocked,
html[data-theme="dark"] .preview-equipment > span {
  color: var(--ink);
}

/* Role labels keep their distinct, readable foregrounds on their pastel fills. */
html[data-theme="dark"] .role-badge.basic,
html[data-theme="dark"] .role-icon.basic {
  color: #46515a;
}

html[data-theme="dark"] .role-badge.secure,
html[data-theme="dark"] .role-icon.secure {
  color: #176348;
}

html[data-theme="dark"] .role-badge.vip,
html[data-theme="dark"] .role-icon.vip {
  color: #62418e;
}

html[data-theme="dark"] .car-info,
html[data-theme="dark"] .role-choice,
html[data-theme="dark"] .account-sidebar,
html[data-theme="dark"] .dashboard-panels > *,
html[data-theme="dark"] .account-panel,
html[data-theme="dark"] .wizard-panel,
html[data-theme="dark"] .dialog-specs > div,
html[data-theme="dark"] .search-bar {
  border-color: var(--line);
}

html[data-theme="dark"] .upload-zone,
html[data-theme="dark"] .quota-notice,
html[data-theme="dark"] .quota-notice.blocked,
html[data-theme="dark"] .preview-equipment > span,
html[data-theme="dark"] .form-errors {
  background: var(--surface-soft);
  color: var(--ink);
}

html[data-theme="dark"] .nav-active:after {
  background: var(--lime);
}

html[data-theme="dark"] .role-hero > .eyebrow,
html[data-theme="dark"] .role-hero h1 em,
html[data-theme="dark"] .wizard-steps button.complete,
html[data-theme="dark"] #profile-status {
  color: var(--accent-strong);
}

/* Shared dark surfaces and text across the public, account and seller pages. */
html[data-theme="dark"] .approach,
html[data-theme="dark"] .reviews-section,
html[data-theme="dark"] .market-main {
  background: var(--page-bg);
}

html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .car-card,
html[data-theme="dark"] .steps-grid article,
html[data-theme="dark"] .form-panel,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .seller-invite,
html[data-theme="dark"] .seller-role-card,
html[data-theme="dark"] .dashboard-stats article,
html[data-theme="dark"] .my-listing,
html[data-theme="dark"] .profile-panel,
html[data-theme="dark"] .wizard-main,
html[data-theme="dark"] .live-preview-card,
html[data-theme="dark"] .account-panel,
html[data-theme="dark"] .account-empty,
html[data-theme="dark"] .vehicle-description,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-preview-note {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .car-info,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .account-content,
html[data-theme="dark"] .account-shell,
html[data-theme="dark"] .seller-heading,
html[data-theme="dark"] .seller-body,
html[data-theme="dark"] .contact-aside,
html[data-theme="dark"] .vehicle-summary,
html[data-theme="dark"] .role-explainer {
  color: var(--ink);
}

html[data-theme="dark"] .car-info {
  background: var(--surface-raised);
}

html[data-theme="dark"] .catalog-page .car-card,
html[data-theme="dark"] .related-section .car-card {
  overflow: hidden;
}

html[data-theme="dark"] .car-image,
html[data-theme="dark"] .mini-photo,
html[data-theme="dark"] .upload-zone,
html[data-theme="dark"] .role-capacity,
html[data-theme="dark"] .demo-strip,
html[data-theme="dark"] .photo-tip,
html[data-theme="dark"] .seller-invite,
html[data-theme="dark"] .seller-role-card,
html[data-theme="dark"] .upload-tip,
html[data-theme="dark"] .quota-notice,
html[data-theme="dark"] .empty-car {
  background: var(--surface-soft);
  border-color: var(--line);
}

html[data-theme="dark"] .wizard-steps,
html[data-theme="dark"] .account-nav a:hover,
html[data-theme="dark"] .account-nav a.active,
html[data-theme="dark"] .contact-route > span,
html[data-theme="dark"] .detail-link,
html[data-theme="dark"] .password-visibility-toggle:hover,
html[data-theme="dark"] .password-visibility-toggle:focus-visible {
  background: var(--accent-soft);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .car-tag,
html[data-theme="dark"] .heart,
html[data-theme="dark"] .close,
html[data-theme="dark"] .remove-photo,
html[data-theme="dark"] .demo-role-select,
html[data-theme="dark"] .upload-photo,
html[data-theme="dark"] .search-bar select,
html[data-theme="dark"] .sort-label select,
html[data-theme="dark"] #project-form select,
html[data-theme="dark"] #contact-form select {
  background: var(--field-bg);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .search-bar label,
html[data-theme="dark"] .brands,
html[data-theme="dark"] .car-specs,
html[data-theme="dark"] .reason > span,
html[data-theme="dark"] .dialog-specs,
html[data-theme="dark"] .wizard-actions,
html[data-theme="dark"] .account-sidebar,
html[data-theme="dark"] .account-panel,
html[data-theme="dark"] .vehicle-description,
html[data-theme="dark"] .contact-route {
  border-color: var(--line);
}

html[data-theme="dark"] .review-pause,
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .sort-label select,
html[data-theme="dark"] #project-form select,
html[data-theme="dark"] #contact-form select {
  border-color: var(--line);
}

html[data-theme="dark"] .review-pause:hover,
html[data-theme="dark"] .detail-link:hover,
html[data-theme="dark"] .heart.saved {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

html[data-theme="dark"] .upload-symbol,
html[data-theme="dark"] .success-orbit,
html[data-theme="dark"] .review-avatar {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--line);
}

html[data-theme="dark"] .account-nav a,
html[data-theme="dark"] .sidebar-bottom a,
html[data-theme="dark"] .car-specs,
html[data-theme="dark"] .reason p,
html[data-theme="dark"] .demo-description,
html[data-theme="dark"] .role-capacity > span,
html[data-theme="dark"] .role-card li.unavailable,
html[data-theme="dark"] .seller-role-card p,
html[data-theme="dark"] .photo-tip p,
html[data-theme="dark"] .upload-zone > p,
html[data-theme="dark"] .upload-tip p,
html[data-theme="dark"] .upload-tip strong,
html[data-theme="dark"] .final-preview-body > p,
html[data-theme="dark"] .preview-specs,
html[data-theme="dark"] .preview-seller p,
html[data-theme="dark"] .auth-intro,
html[data-theme="dark"] .auth-switch,
html[data-theme="dark"] .auth-footnote,
html[data-theme="dark"] .auth-home-link a {
  color: var(--muted);
}

html[data-theme="dark"] .page-intro h1 em,
html[data-theme="dark"] .page-intro .eyebrow,
html[data-theme="dark"] .account-heading .eyebrow,
html[data-theme="dark"] .seller-heading .eyebrow,
html[data-theme="dark"] .seller-heading h1 em,
html[data-theme="dark"] .contact-aside h2 em,
html[data-theme="dark"] .aside-location,
html[data-theme="dark"] .car-info h3 a:hover,
html[data-theme="dark"] .text-link:hover,
html[data-theme="dark"] .auth-back-link span {
  color: var(--accent-strong);
}

html[data-theme="dark"] .auth-page,
html[data-theme="dark"] .auth-header {
  background: var(--page-bg);
}

html[data-theme="dark"] .auth-form input,
html[data-theme="dark"] #project-form input,
html[data-theme="dark"] #project-form textarea,
html[data-theme="dark"] #project-form select,
html[data-theme="dark"] #contact-form input,
html[data-theme="dark"] #contact-form textarea,
html[data-theme="dark"] #contact-form select,
html[data-theme="dark"] .market-form input:not([type="checkbox"]):not([type="file"]),
html[data-theme="dark"] .market-form select,
html[data-theme="dark"] .market-form textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--field-bg);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #94a198;
}

html[data-theme="dark"] .form-errors,
html[data-theme="dark"] .auth-form-status[data-state="error"] {
  background: #392522;
  border-color: #70463e;
  color: #ffd0c9;
}

html[data-theme="dark"] .quota-notice.blocked {
  background: #342c20;
  border-color: #594b32;
  color: #e4c78c;
}

html[data-theme="dark"] .upload-zone:hover,
html[data-theme="dark"] .upload-zone.drag-over {
  background: #303b2d;
}

html[data-theme="dark"] .auth-form-status:not([data-state="error"]) {
  background: #263423;
  border-color: #526647;
  color: #d8ebc6;
}

html[data-theme="dark"] .dialog-info,
html[data-theme="dark"] .contact-dialog-inner {
  background: var(--surface-raised);
  color: var(--ink);
}

html[data-theme="dark"] .dialog-info pre,
html[data-theme="dark"] #request-success pre {
  background: var(--field-bg);
  color: var(--ink);
  border-color: var(--line);
}

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