/* CROMCROM's supplied yellow and ink identity, shared by both site themes.
   Visual studies use data-design and keep their own palette and typography. */
:root[data-theme]:not([data-design]) {
  --theme-accent: #FFCE1F;
  --theme-accent-hover: #F4BE00;
  --theme-on-accent: #1C2128;
  --theme-banner: #1C2128;
  --theme-banner-text: #F8FAFC;
  --theme-banner-muted: #BDC6D0;
  --theme-shadow: 0 8px 28px rgb(28 33 40 / 7%);
  --paper: var(--theme-bg);
  --white: var(--theme-surface);
  --navy: var(--theme-text);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --border: var(--theme-border);
  --line: var(--theme-border);
  --bg: var(--theme-bg);
  --cobalt: var(--theme-link);
  --cobalt-dark: var(--theme-link-hover);
  --blue: var(--theme-link);
  --yellow: var(--theme-accent);
  --aqua: var(--theme-promo);
  --preview-line: var(--theme-border);
  color: var(--theme-text);
  background: var(--theme-bg);
}
:root[data-theme='light']:not([data-design]) {
  color-scheme: light;
  --theme-bg: #F5F6F7;
  --theme-surface: #FFFFFF;
  --theme-surface-soft: #EEF0F2;
  --theme-surface-hover: #E5E9EC;
  --theme-text: #1C2128;
  --theme-muted: #586574;
  --theme-border: #D5DBE1;
  --theme-border-strong: #9EAAB7;
  --theme-link: #1C2128;
  --theme-link-hover: #3A4450;
  --theme-focus: #1C2128;
  --theme-selected: #FFF3BE;
  --theme-promo: #EEEFEA;
  --theme-image: #E9EDEF;
  --theme-success-bg: #E7F3EC;
  --theme-danger-bg: #FFF0F0;
  --theme-warning-bg: #FFF5D2;
  --theme-warning-text: #72540B;
  --success: #21694B;
  --danger: #A82F3D;
}
:root[data-theme='dark']:not([data-design]) {
  color-scheme: dark;
  --theme-bg: #1C2128;
  --theme-surface: #242B33;
  --theme-surface-soft: #2C343D;
  --theme-surface-hover: #35404C;
  --theme-text: #F3F5F7;
  --theme-muted: #B8C2CF;
  --theme-border: #46515E;
  --theme-border-strong: #7B8998;
  --theme-link: #FFCE1F;
  --theme-link-hover: #FFDF70;
  --theme-focus: #FFCE1F;
  --theme-selected: #3E3924;
  --theme-promo: #2C3338;
  --theme-image: #38434D;
  --theme-success-bg: #203C30;
  --theme-danger-bg: #432830;
  --theme-warning-bg: #413823;
  --theme-warning-text: #FFDF89;
  --theme-shadow: 0 10px 32px rgb(0 0 0 / 18%);
  --success: #97D7B5;
  --danger: #FFB0B8;
}

/* The control remains a proper touch target and exposes its state in text. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--theme-border, #D5DBE1);
  border-radius: 8px;
  background: var(--theme-surface, #FFF);
  color: var(--theme-text, #1C2128);
  cursor: pointer;
}
.theme-toggle > svg { width: 21px; height: 21px; flex-shrink: 0; }
.theme-toggle:hover {
  background: var(--theme-surface-hover, #E5E9EC);
  border-color: var(--theme-border-strong, #9EAAB7);
}
.theme-toggle:focus-visible {
  outline: 3px solid var(--theme-focus, #1C2128);
  outline-offset: 3px;
}
.theme-toggle [hidden] { display: none; }
:root[data-theme]:not([data-design]) .header-actions > .theme-toggle {
  display: inline-flex;
  flex-basis: 44px;
  width: 44px;
  height: 44px;
}

/* Shared page surfaces and primary actions. */
:root[data-theme]:not([data-design]) body { color: var(--theme-text); background: var(--theme-bg); }
:root[data-theme]:not([data-design]) ::selection { color: var(--theme-on-accent); background: var(--theme-accent); }
:root[data-theme]:not([data-design]) :focus-visible { outline-color: var(--theme-focus); }
:root[data-theme]:not([data-design]) :is(input[type='checkbox'], input[type='radio'], progress) { accent-color: var(--theme-link); }
:root[data-theme]:not([data-design]) :is(.btn.primary, .btn.yellow) {
  color: var(--theme-on-accent);
  background: var(--theme-accent);
  border-color: var(--theme-accent);
}
:root[data-theme]:not([data-design]) :is(.btn.primary:hover, .btn.yellow:hover) {
  color: var(--theme-on-accent);
  background: var(--theme-accent-hover);
  border-color: var(--theme-accent-hover);
}
:root[data-theme]:not([data-design]) .btn.secondary {
  color: var(--theme-text);
  border-color: var(--theme-border-strong);
  background: transparent;
}
:root[data-theme]:not([data-design]) .btn.secondary:hover {
  color: var(--theme-text);
  background: var(--theme-surface-hover);
  border-color: var(--theme-link);
}
:root[data-theme]:not([data-design]) .btn.danger {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--theme-danger-bg);
}
:root[data-theme]:not([data-design]) .btn.danger:hover { background: var(--theme-danger-bg); }
:root[data-theme]:not([data-design]) :is(.badge-count, .account-unread-pill),
:root[data-theme]:not([data-design]) .step-list li.active::before {
  color: var(--theme-on-accent);
  background: var(--theme-accent);
  border-color: var(--theme-bg);
}
:root[data-theme]:not([data-design]) :is(
  .product-card, .category-card, .island-card, .filters, .detail-specs,
  .seller-card, .pricing-card, .form-card, .inbox-layout, .account-nav,
  .stat-card, .table-wrap, .saved-search, .order-summary, .success-state,
  .help-card, .dialog, .compare-grid > article, .seller-filters,
  .account-profile, .account-notifications, .account-inbox,
  .auth-account-panel, .seller-reviews-panel, .commerce-calculator,
  .quota-panel, .market-feedback, .admin-dialog
) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border);
}
:root[data-theme]:not([data-design]) :is(.empty-state, .upload-zone) {
  background: var(--theme-surface);
  border-color: var(--theme-border-strong);
}
:root[data-theme]:not([data-design]) :is(
  .category-card:hover, .product-card:hover, .island-card:hover,
  .upload-zone:hover, .icon-btn:hover
) {
  background: var(--theme-surface-hover);
  border-color: var(--theme-border-strong);
}
:root[data-theme]:not([data-design]) :is(.dialog, .admin-dialog, .home-category-dialog) { box-shadow: var(--theme-shadow); }
:root[data-theme]:not([data-design]) .dialog::backdrop,
:root[data-theme]:not([data-design]) .admin-dialog::backdrop,
:root[data-theme]:not([data-design]) .home-category-dialog::backdrop { background: rgb(10 14 20 / 68%); }

/* Header and footer have explicit ink surfaces, independent of text tokens. */
:root[data-theme]:not([data-design]) .demo-bar { background: var(--theme-surface-soft); color: var(--theme-muted); }
:root[data-theme]:not([data-design]) .site-header { background: var(--theme-surface); border-color: var(--theme-border); }
:root[data-theme]:not([data-design]) .site-header .nav { background: var(--theme-banner); }
:root[data-theme]:not([data-design]) .site-header .nav a { color: var(--theme-banner-text); }
:root[data-theme]:not([data-design]) .site-header .nav a:hover { color: var(--theme-banner-text); background: #35404C; }
:root[data-theme]:not([data-design]) .site-header .nav a[aria-current='page'] {
  color: var(--theme-on-accent);
  background: var(--theme-accent);
}
:root[data-theme]:not([data-design]) .site-header .nav a[aria-current='page'] > svg { color: var(--theme-on-accent); }
:root[data-theme]:not([data-design]) .site-header .nav a:focus-visible { outline-color: var(--theme-accent); outline-offset: -3px; }
:root[data-theme]:not([data-design]) :is(.language-picker select, .mobile-nav, .mobile-nav.open, .mobile-drawer:not([hidden])) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border);
}
:root[data-theme]:not([data-design]) :is(.language-picker select:hover, .mobile-drawer a:hover) {
  color: var(--theme-text);
  background: var(--theme-surface-hover);
  border-color: var(--theme-border-strong);
}
:root[data-theme]:not([data-design]) .mobile-nav a { color: var(--theme-muted); }
:root[data-theme]:not([data-design]) .mobile-nav a.active { background: var(--theme-selected); color: var(--theme-link); }
:root[data-theme]:not([data-design]) .mobile-nav a:nth-child(3),
:root[data-theme]:not([data-design]) :is(
  .page-catalog .mobile-nav a:first-child,
  .page-favorites .mobile-nav a:nth-child(2),
  .page-inbox .mobile-nav a:nth-child(4),
  .page-account .mobile-nav a:nth-child(5)
) { color: var(--theme-link); }
:root[data-theme]:not([data-design]) .site-footer { background: var(--theme-banner); color: var(--theme-banner-text); }
:root[data-theme]:not([data-design]) .site-footer :is(h3, h4, .brand) { color: var(--theme-banner-text); }
:root[data-theme]:not([data-design]) .site-footer :is(p, a:not(.brand)) { color: var(--theme-banner-muted); }
:root[data-theme]:not([data-design]) .site-footer a:hover { color: var(--theme-accent); }
:root[data-theme]:not([data-design]) .footer-bottom { border-color: #46515E; color: var(--theme-banner-muted); }
:root[data-theme]:not([data-design]) :is(.toast, .compare-bar, .skip-link) {
  color: var(--theme-banner-text);
  background: var(--theme-banner);
  border: 1px solid #46515E;
}
:root[data-theme]:not([data-design]) .compare-bar .icon-btn:hover { background: #35404C; }

/* Forms, search listboxes and category selection use the same surfaces. */
:root[data-theme]:not([data-design]) :is(
  .input, .select, textarea.input, .sort-select,
  .search-select-button, .search-select-listbox, .auth-methods button,
  .same-reference, .pagination a, .pagination button
) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border-strong);
}
:root[data-theme]:not([data-design]) :is(input, textarea)::placeholder { color: var(--theme-muted); opacity: 1; }
:root[data-theme]:not([data-design]) :is(.input:focus, .select:focus, .search-select-button:focus-visible) {
  border-color: var(--theme-focus);
  outline-color: var(--theme-focus);
}
:root[data-theme]:not([data-design]) :is(.select:disabled, .search-select-button:disabled, .vehicle-finder .select:disabled, .auth-form input:disabled) {
  color: var(--theme-muted);
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
}
:root[data-theme]:not([data-design]) .search-select-listbox { box-shadow: var(--theme-shadow); }
:root[data-theme]:not([data-design]) .search-select-option-active {
  color: var(--theme-text);
  background: var(--theme-selected);
  outline-color: var(--theme-border-strong);
}
:root[data-theme]:not([data-design]) .search-select-option:hover:not([aria-disabled='true']) { background: var(--theme-surface-hover); }
:root[data-theme]:not([data-design]) :is(.search-form, .hero-search.container .search-form) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}
:root[data-theme]:not([data-design]) :is(.search-island, .search-island > select, .search-island .search-select-button) {
  color: var(--theme-muted);
  background: transparent;
  border-color: var(--theme-border);
}
:root[data-theme]:not([data-design]) .vehicle-finder { background: var(--theme-surface); border-color: var(--theme-border); border-top-color: var(--theme-accent); }
:root[data-theme]:not([data-design]) :is(.vehicle-finder-symbol, .hero-stamp) { color: var(--theme-on-accent); background: var(--theme-accent); }
:root[data-theme]:not([data-design]) :is(.filter-summary button, .part-selected-path, .same-parts, .checkout-methods) {
  color: var(--theme-text);
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
}
:root[data-theme]:not([data-design]) .part-tree-search { border-color: var(--theme-border-strong); }
:root[data-theme]:not([data-design]) .part-tree-search .input { background: transparent; }
:root[data-theme]:not([data-design]) :is(.part-tree-group li > a:hover, .part-tree-filter summary:hover) { background: var(--theme-surface-hover); }
:root[data-theme]:not([data-design]) :is(.part-tree-group li > a[aria-current], .part-tree-group li > a[aria-current]:hover) {
  color: var(--theme-link);
  background: var(--theme-selected);
}
:root[data-theme]:not([data-design]) .part-tree-group li > a::before { border-color: var(--theme-border-strong); }
:root[data-theme]:not([data-design]) .part-tree-group li > a[aria-current]::before {
  background: var(--theme-link);
  border-color: var(--theme-link);
  box-shadow: inset 0 0 0 2.5px var(--theme-surface);
}
:root[data-theme]:not([data-design]) :is(.pagination .active, .pagination [aria-current='page']) {
  color: var(--theme-on-accent);
  background: var(--theme-accent);
  border-color: var(--theme-accent);
}
:root[data-theme]:not([data-design]) .checkout-methods label { border-color: var(--theme-border-strong); }
:root[data-theme]:not([data-design]) .checkout-methods label:has(input:checked) { background: var(--theme-selected); border-color: var(--theme-link); }

/* Product illustration backdrops, badges and seller blocks. */
:root[data-theme]:not([data-design]) :is(
  .product-image, .product-card:nth-child(4n + 2) .product-image,
  .product-card:nth-child(4n + 3) .product-image, .product-card:nth-child(4n + 4) .product-image,
  .detail-photo, .photo-thumb, .compare-photo, .account-listing img,
  .thread-item > img, .purchase-product img
) { background: var(--theme-image); }
:root[data-theme]:not([data-design]) :is(.product-image > svg, .detail-photo > svg, .photo-thumb svg) { color: var(--theme-muted); }
/* New listings can show a neutral text state until their owner adds a photo. */
.listing-photo-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 16px;
  color: var(--muted);
  background: var(--theme-image, var(--paper));
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.account-listing > .listing-photo-placeholder {
  flex: 0 0 64px;
  width: 64px;
  height: 52px;
  min-height: 0;
  padding: 6px;
  border-radius: 7px;
  font-size: 10px;
}
.page-account .account-listing > .listing-photo-placeholder {
  flex-basis: 90px;
  width: 90px;
  height: 70px;
}
.order-summary > .account-listing > .listing-photo-placeholder {
  flex-basis: 80px;
  width: 80px;
  height: 75px;
}
.listing-photo-placeholder.compare-photo { height: 190px; min-height: 0; }
.detail-photo > .listing-photo-placeholder { min-height: 200px; }
:root[data-theme]:not([data-design]) .category-card {
  min-height: 96px;
  padding: 20px 12px;
  gap: 8px;
}
:root[data-theme]:not([data-design]) .category-card > span {
  min-height: 0;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}
:root[data-theme]:not([data-design]) .category-card > small {
  font-size: 11px;
  line-height: 1.4;
  margin: 0;
}
:root[data-theme]:not([data-design]) .category-card.category-photo-card {
  padding: 0 0 16px;
  gap: 0;
  min-height: 0;
}
:root[data-theme]:not([data-design]) .category-card.category-photo-card > span {
  margin: 15px 0 5px;
  font-size: 15px;
  line-height: 1.4;
  min-height: 0;
}
:root[data-theme]:not([data-design]) .category-card.category-photo-card > small { margin: 0; font-size: 12px; }
@media (max-width: 600px) {
  :root[data-theme]:not([data-design]) .category-card.category-photo-card { padding-bottom: 13px; }
  :root[data-theme]:not([data-design]) .category-card.category-photo-card > span { margin-top: 12px; font-size: 14px; }
}
:root[data-theme]:not([data-design]) :is(.pill, .pill.neutral, .pill.demo, .pill.sold, .detail-photo > .pill, .admin-status) {
  color: var(--theme-muted);
  background: var(--theme-surface-soft);
}
:root[data-theme]:not([data-design]) :is(.pill.featured, .pricing-card.recommended > .pill),
:root[data-theme]:not([data-design]) .pricing-card.recommended::before {
  color: var(--theme-on-accent);
  background: var(--theme-accent);
}
:root[data-theme]:not([data-design]) .pill.verified { color: var(--success); background: var(--theme-success-bg); }
:root[data-theme]:not([data-design]) .save-button { color: var(--theme-text); background: var(--theme-surface); border-color: var(--theme-border); }
:root[data-theme]:not([data-design]) :is(.save-button.saved, .save-button[aria-pressed='true']) { color: var(--theme-link); }
:root[data-theme]:not([data-design]) :is(.save-button.saved svg, .save-button[aria-pressed='true'] svg) { fill: var(--theme-accent); }
:root[data-theme]:not([data-design]) .product-bottom > .compare-button[aria-pressed='true'] { background: var(--theme-selected); color: var(--theme-link); }
:root[data-theme]:not([data-design]) .promo-copy :is(.eyebrow, p, .pill) { color: var(--theme-muted); }
:root[data-theme]:not([data-design]) .promo-art > svg { color: var(--theme-on-accent); }
:root[data-theme]:not([data-design]) :is(.seller-avatar, .account-avatar, .account-header-avatar, .auth-entry .account-header-avatar) {
  color: var(--theme-text);
  background: var(--theme-selected);
  border-color: var(--theme-border);
}
:root[data-theme]:not([data-design]) .seller-hero { background: var(--theme-banner); color: var(--theme-banner-text); }
:root[data-theme]:not([data-design]) .seller-hero :is(h1, h2, .seller-rating) { color: var(--theme-banner-text); }
:root[data-theme]:not([data-design]) .seller-hero :is(p, .seller-stats span, .seller-rating small) { color: var(--theme-banner-muted); }
:root[data-theme]:not([data-design]) .seller-hero .seller-stats { border-color: #46515E; }
:root[data-theme]:not([data-design]) .review-bar,
:root[data-theme]:not([data-design]) .quota-meter::-webkit-progress-bar { background: var(--theme-surface-soft); }
:root[data-theme]:not([data-design]) .review-bar > span,
:root[data-theme]:not([data-design]) .quota-meter::-webkit-progress-value { background: var(--theme-accent); }
:root[data-theme='dark']:not([data-design]) :is(.seller-rating-star, .review-stars) { color: var(--theme-accent); }

/* Readable supporting copy, including older components with fixed colours. */
:root[data-theme]:not([data-design]) :is(
  .hero-description, .vehicle-finder > p, .trust-row, .eyebrow,
  .search-input svg, .search-input input::placeholder, .search-island > svg,
  .popular-searches, .popular-searches a, .popular-searches button,
  .category-card span, .category-card > small, .product-meta, .product-price small,
  .product-location, .product-bottom, .product-bottom .compare-button,
  .breadcrumbs, .check-label, .check-label small, .filter-summary > span,
  .detail-sections p, .spec-row span, .spec-row dt, .delivery-line, .seller-mini small,
  .seller-card .seller-stats span, .seller-card .seller-stats small,
  .step-list, .thread-item small, .thread-item > div > span, .message small,
  .message.system, .account-nav a, th, .account-listing small,
  .page-account .account-listing > div > span, .section-heading .eyebrow,
  .island-card > span:last-child, .account-message footer
) { color: var(--theme-muted); }
:root[data-theme]:not([data-design]) :is(.category-card > span, .seller-card .seller-stats .seller-rating) { color: var(--theme-text); }
:root[data-theme]:not([data-design]) :is(.product-bottom svg, .review-success) { color: var(--success); }
:root[data-theme]:not([data-design]) :is(
  .product-bottom, .filter-group, .spec-row, td, .thread-item,
  .same-parts-compare, details, .review-error, .seller-review, .seller-review-form,
  .review-eligibility, .part-selected-path
) { border-color: var(--theme-border); }

/* Sign-in, profile, conversations, notifications and administration. */
:root[data-theme]:not([data-design]) .auth-story { background: var(--theme-banner); color: var(--theme-banner-text); }
:root[data-theme]:not([data-design]) .auth-story h2 { color: var(--theme-banner-text); }
:root[data-theme]:not([data-design]) .auth-story .pill {
  color: var(--theme-on-accent);
  background: var(--theme-accent);
}
:root[data-theme]:not([data-design]) :is(.auth-tabs > [aria-current='page'], .billing-toggle button.active) {
  color: var(--theme-text);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}
:root[data-theme]:not([data-design]) :is(.billing-toggle, .account-conversations, .messages, th, .admin-listings-table thead, .support-result .support-prepared-text) { background: var(--theme-surface-soft); }
:root[data-theme]:not([data-design]) .auth-methods button.active { color: var(--theme-link); background: var(--theme-selected); border-color: var(--theme-link); }
:root[data-theme]:not([data-design]) :is(.account-conversation:hover, .thread-item:hover) { background: var(--theme-surface-hover); }
:root[data-theme]:not([data-design]) :is(.account-conversation.active, .thread-item.active, .account-nav a.active) { color: var(--theme-link); background: var(--theme-selected); }
:root[data-theme]:not([data-design]) :is(.thread-item, .message, .page-account .account-listing) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-border);
}
:root[data-theme]:not([data-design]) :is(.account-message, .local-drafts .account-listing) { color: var(--theme-text); background: var(--theme-surface-soft); }
:root[data-theme]:not([data-design]) :is(.account-message.own, .message.outgoing) {
  color: var(--theme-text);
  background: var(--theme-selected);
  border-color: var(--theme-border);
}
:root[data-theme]:not([data-design]) :is(.notice, .auth-notice, .payment-pending, .admin-status.hidden) {
  color: var(--theme-warning-text);
  background: var(--theme-warning-bg);
  border-color: var(--theme-border);
}
:root[data-theme]:not([data-design]) .notice svg { color: currentColor; }
:root[data-theme]:not([data-design]) :is(
  .notice.success, .auth-success, .admin-success, .admin-status.active,
  .review-verified, .success-state > svg
) { color: var(--success); background: var(--theme-success-bg); border-color: var(--success); }
:root[data-theme]:not([data-design]) :is(
  .account-error, .admin-error, .support-error-summary, .review-error, .market-error
) { color: var(--danger); background: var(--theme-danger-bg); border-color: var(--danger); }
:root[data-theme]:not([data-design]) :is(input, select, textarea, .search-select-button)[aria-invalid='true'] { border-color: var(--danger); }

/* The design comparison page also follows the selected site theme; its iframe
   retains its explicitly chosen steel, obsidian or copper study. */
:root[data-theme]:not([data-design]) :is(.preview-context, .preview-intro p, .preview-language, .preview-footnote, .palette-option small) { color: var(--theme-muted); }
:root[data-theme]:not([data-design]) .preview-type-note strong { color: var(--theme-text); }
:root[data-theme]:not([data-design]) :is(.preview-header, .preview-tools, .preview-device, .palette-swatches) { border-color: var(--theme-border); }
:root[data-theme]:not([data-design]) .preview-skip { background: var(--theme-surface); color: var(--theme-text); }
:root[data-theme]:not([data-design]) :is(.palette-option, .preview-language select) {
  color: var(--theme-text);
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
}
:root[data-theme]:not([data-design]) .palette-option[aria-pressed='true'] {
  background: var(--theme-surface);
  border-color: var(--theme-link);
  box-shadow: inset 0 0 0 1px var(--theme-link);
}
:root[data-theme]:not([data-design]) .palette-option:hover { border-color: var(--theme-border-strong); }
:root[data-theme]:not([data-design]) .preview-pages button[aria-pressed='true'] { background: var(--theme-accent); color: var(--theme-on-accent); }
:root[data-theme]:not([data-design]) :is(.preview-pages button:hover:not([aria-pressed='true']), .preview-device button:hover) { background: var(--theme-surface-hover); }
:root[data-theme]:not([data-design]) .preview-device button[aria-pressed='true'] { background: var(--theme-selected); border-color: var(--theme-border-strong); }
:root[data-theme]:not([data-design]) :is(.preview-stage, .preview-frame-wrap) { background: var(--theme-surface-soft); border-color: var(--theme-border-strong); }
:root[data-theme]:not([data-design]) .preview-screen-label { background: var(--theme-banner); color: var(--theme-banner-text); }
:root[data-theme]:not([data-design]) #preview-status { color: var(--theme-banner-muted); }

@media (max-width: 767px) {
  :root[data-theme]:not([data-design]) .header-actions { gap: 4px; }
  :root[data-theme]:not([data-design]) .preview-header { gap: 8px; }
}
@media (max-width: 479px) {
  :root[data-theme]:not([data-design]) .header-actions { gap: 2px; }
  :root[data-theme]:not([data-design]) .language-picker { width: 58px; flex-basis: 58px; }
  :root[data-theme]:not([data-design]) .language-picker select { padding-inline: 5px; }
  :root[data-theme]:not([data-design]) .preview-context { display: none; }
}
@media (forced-colors: active) {
  .theme-toggle { border: 1px solid ButtonText; }
}