/* Theme compatibility layer for staged non-Dashboard surfaces. Keep selectors component-scoped. */
html[data-theme="light"] .auth-gate,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .modal,
html[data-theme="light"] .drawer,
html[data-theme="light"] .shop-drawer {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
html[data-theme="light"] .auth-terminal,
html[data-theme="light"] .auth-password-field,
html[data-theme="light"] .auth-card input,
html[data-theme="light"] .drawer-deltas .delta-cell,
html[data-theme="light"] .item-change-row,
html[data-theme="light"] .precraft-panel,
html[data-theme="light"] .computer-commandbar,
html[data-theme="light"] .shop-product,
html[data-theme="light"] .shop-diagnostic-hero > div,
html[data-theme="light"] .shop-hardware-grid article,
html[data-theme="light"] .admin-panel,
html[data-theme="light"] .admin-row,
html[data-theme="light"] .me-item-admin,
html[data-theme="light"] .me-system-row,
html[data-theme="light"] .me-system-tile,
html[data-theme="light"] .flow-row,
html[data-theme="light"] .flow-summary > div {
  background: var(--ui-surface-subtle);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
html[data-theme="light"] .auth-hero,
html[data-theme="light"] .auth-brand,
html[data-theme="light"] .auth-card-copy,
html[data-theme="light"] .auth-session-status,
html[data-theme="light"] .auth-terminal small,
html[data-theme="light"] .drawer-titles small,
html[data-theme="light"] .precraft-panel small,
html[data-theme="light"] .computer-empty,
html[data-theme="light"] .shop-empty,
html[data-theme="light"] .shop-page .muted,
html[data-theme="light"] .admin-panel .muted {
  color: var(--ui-text-muted);
}
html[data-theme="light"] .auth-gate input,
html[data-theme="light"] .drawer input,
html[data-theme="light"] .drawer select,
html[data-theme="light"] .flow-toolbar input,
html[data-theme="light"] .flow-toolbar select,
html[data-theme="light"] .me-system-toolbar input,
html[data-theme="light"] .me-system-toolbar select,
html[data-theme="light"] .panel-grid input,
html[data-theme="light"] .panel-grid select,
html[data-theme="light"] .mini-form input,
html[data-theme="light"] .mini-form select,
html[data-theme="light"] .admin-row input,
html[data-theme="light"] .admin-row select,
html[data-theme="light"] .telegram-alert-row input,
html[data-theme="light"] .telegram-alert-row select,
html[data-theme="light"] .filters input,
html[data-theme="light"] .filters select,
html[data-theme="light"] .precraft-page input,
html[data-theme="light"] .precraft-page select,
html[data-theme="light"] .computers-page input,
html[data-theme="light"] .computers-page select,
html[data-theme="light"] .glasses-page input,
html[data-theme="light"] .glasses-page select,
html[data-theme="light"] .shop-page input,
html[data-theme="light"] .shop-page select {
  background: var(--ui-input);
  color: var(--ui-text);
  border-color: var(--ui-border);
}
html[data-theme="light"] .flow-toolbar,
html[data-theme="light"] .me-system-toolbar,
html[data-theme="light"] .admin-tabs,
html[data-theme="light"] .admin-head,
html[data-theme="light"] .shop-page .shop-tabs {
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
html[data-theme="light"] .admin-tab,
html[data-theme="light"] .seg button,
html[data-theme="light"] .chart-mode,
html[data-theme="light"] .shop-tabs button {
  background: var(--ui-surface-subtle);
  color: var(--ui-text-muted);
  border-color: var(--ui-border);
}
html[data-theme="light"] .admin-tab.active,
html[data-theme="light"] .seg button.active,
html[data-theme="light"] .chart-mode.active,
html[data-theme="light"] .shop-tabs button.active {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  border-color: var(--ui-accent);
}
html[data-theme="light"] .auth-submit,
html[data-theme="light"] .panel-actions button,
html[data-theme="light"] .shop-page button:not(.ghost),
html[data-theme="light"] .precraft-page button:not(.ghost) {
  color: var(--ui-text);
}
html[data-theme="light"] .drawer-overlay,
html[data-theme="light"] .shop-drawer-backdrop { background: var(--ui-overlay); }
html[data-theme="light"] .modal-close,
html[data-theme="light"] .drawer .modal-close { color: var(--ui-text); }
html[data-theme="light"] .shop-page .shop-page-head { border-color: var(--ui-border); }

@media (max-width: 720px) {
  html[data-theme="light"] .app-sidebar { background: var(--ui-surface); }
}