/* Shared layout and controls; theme selection changes palette variables only. */
.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  line-height: 18px;
}
.theme-switch svg { flex-shrink: 0; }
.topbar-quick-actions .theme-switch { order: 3; }
.theme-icon-classic { display: none; }
.theme-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.auth-theme-control {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
}
#authView.hidden ~ .auth-theme-control { display: none; }

/* The extra control gets its own row in the existing mobile header. */
@media (max-width: 760px) {
  .topbar:has([data-theme-toggle]) { padding-right: 14px !important; }
  .topbar-quick-actions:has([data-theme-toggle]) {
    position: static;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 10px;
  }
}

/* Persisted "classic" remains the dark palette for existing users. */
:root[data-ui-theme] { --radius-xl: 12px; --radius-lg: 10px; }
:root[data-ui-theme="classic"] {
  color-scheme: dark;
  --bg: #0c1118;
  --panel: #121b27;
  --panel-strong: #182332;
  --surface-subtle: #172230;
  --surface-soft: #1d2a3a;
  --text: #e8eef6;
  --text-secondary: #bcc8d9;
  --muted: #94a6bd;
  --placeholder: #8093aa;
  --line: #28374a;
  --line-strong: #364b64;
  --accent: #49d2b4;
  --accent-2: #49d2b4;
  --accent-hover: #64ddc2;
  --accent-soft: #152e2c;
  --accent-line: #264f49;
  --intro-bg: #142724;
  --chip-bg: rgba(18, 27, 39, 0.85);
  --on-accent: #082e26;
  --focus: #315a55;
  --success: #a5e2bb;
  --success-soft: #183025;
  --success-line: #2c503b;
  --danger: #ffb2a8;
  --danger-soft: #342026;
  --danger-hover: #47262b;
  --danger-line: #674148;
  --warning: #f5d27a;
  --shadow-rgb: 0, 0, 0;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  --overlay-bg: rgba(0, 0, 0, 0.66);
  --icon-filter: brightness(0) invert(1);
}
:root[data-ui-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --surface-subtle: #f8f9fb;
  --surface-soft: #f2f4f7;
  --text: #1d2939;
  --text-secondary: #344054;
  --muted: #667085;
  --placeholder: #737d8d;
  --line: #e6e9ee;
  --line-strong: #d9dee6;
  --accent: #087f70;
  --accent-2: #087f70;
  --accent-hover: #06695c;
  --accent-soft: #eaf6f2;
  --accent-line: #d0e7dc;
  --intro-bg: #f1f8f5;
  --chip-bg: rgba(255, 255, 255, 0.72);
  --on-accent: #ffffff;
  --focus: #c0e5db;
  --success: #067647;
  --success-soft: #ecfdf3;
  --success-line: #abefc6;
  --danger: #b42318;
  --danger-soft: #fff5f4;
  --danger-hover: #fee4e2;
  --danger-line: #fecdca;
  --warning: #9a6700;
  --shadow-rgb: 16, 24, 40;
  --shadow: 0 2px 4px rgba(16, 24, 40, 0.025);
  --overlay-bg: rgba(29, 41, 57, 0.35);
  --icon-filter: brightness(0);
}
:root[data-ui-theme] body {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
:root[data-ui-theme] .bg-orb { display: none; }
:root[data-ui-theme] a { color: var(--accent); }
:root[data-ui-theme] .glass { backdrop-filter: none; }
:root[data-ui-theme] .eyebrow,
:root[data-ui-theme] .section-title,
:root[data-ui-theme] .small-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
:root[data-ui-theme] .meta {
  font-size: 13px;
  line-height: 1.8;
}
:root[data-ui-theme] .app-shell {
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  align-items: start;
}
:root[data-ui-theme] .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding: 30px 20px 20px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
:root[data-ui-theme] .brand-block {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
:root[data-ui-theme] .brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  letter-spacing: -0.5px;
}
:root[data-ui-theme] .brand-block .eyebrow {
  font-size: 8px;
  letter-spacing: 0.08em;
}
:root[data-ui-theme] .brand-block h1 {
  margin: 5px 0 10px;
  font-size: 16px;
  letter-spacing: -0.4px;
}
:root[data-ui-theme] .brand-block p { font-size: 11px; }
:root[data-ui-theme] .brand-block > div:last-child { min-height: 36px; }
:root[data-ui-theme] .brand-logo { background: transparent; }
:root[data-ui-theme] .brand-logo-img { width: 100%; height: 100%; object-fit: contain; }
:root[data-ui-theme] .sidebar-section { margin-top: 38px; }
:root[data-ui-theme] .section-title { padding-left: 12px; }
:root[data-ui-theme] .nav-list { gap: 5px; margin-top: 14px; }
:root[data-ui-theme] .nav-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}
:root[data-ui-theme] .nav-list button.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  font-weight: 600;
}
:root[data-ui-theme] .nav-list button:hover:not(.active) { background: var(--bg); }
:root[data-ui-theme] .nav-item-main { gap: 11px; min-width: 0; }
:root[data-ui-theme] .nav-item-icon { width: 18px; height: 18px; opacity: 1; }
:root[data-ui-theme] .nav-item-icon:not([src*="slgailogo"]) { filter: var(--icon-filter); opacity: 0.6; }
:root[data-ui-theme] .nav-list button.active .nav-item-icon:not([src*="slgailogo"]) { opacity: 0.7; }
:root[data-ui-theme] .sidebar-toggle-icon { filter: var(--icon-filter); opacity: 0.6; }
:root[data-ui-theme] .status-card {
  margin-top: 32px;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-subtle);
}
:root[data-ui-theme] .status-line { margin-top: 7px; font-size: 12px; }
:root[data-ui-theme] .main-shell { padding: 26px 36px 40px; }
:root[data-ui-theme] .topbar {
  padding: 0 0 22px;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:root[data-ui-theme] .topbar-title { font-size: 13px; font-weight: 500; }
:root[data-ui-theme] .topbar-meta { color: var(--muted); font-size: 11px; line-height: 1.7; }
:root[data-ui-theme] .topbar-actions { align-items: center; flex-wrap: wrap; gap: 8px; }
:root[data-ui-theme] .quota-inline { gap: 6px; }
:root[data-ui-theme] .quota-mini {
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--panel);
  font-size: 11px;
}
:root[data-ui-theme] .quota-mini strong { color: var(--accent); font-variant-numeric: tabular-nums; }
:root[data-ui-theme] .dashboard { gap: 22px; }
:root[data-ui-theme] .hero {
  position: relative;
  padding: 28px;
  overflow: hidden;
}
:root[data-ui-theme] .hero::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
:root[data-ui-theme] .hero .eyebrow { color: var(--accent); }
:root[data-ui-theme] .hero-main h2 {
  margin: 10px 0;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.8px;
}
:root[data-ui-theme] .hero-main p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
:root[data-ui-theme] .view-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 22px;
  align-items: start;
}
:root[data-ui-theme] .panel,
:root[data-ui-theme] .report-card,
:root[data-ui-theme] .history-list { padding: 26px; box-shadow: var(--shadow); }
:root[data-ui-theme] .panel h3,
:root[data-ui-theme] .report-card h3,
:root[data-ui-theme] .history-list h3 {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.4px;
}
:root[data-ui-theme] .form-grid { gap: 18px; }
:root[data-ui-theme] label { gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 500; }
:root[data-ui-theme] input,
:root[data-ui-theme] textarea,
:root[data-ui-theme] select {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.025);
}
:root[data-ui-theme] input::placeholder,
:root[data-ui-theme] textarea::placeholder { color: var(--placeholder); }
:root[data-ui-theme] input:focus,
:root[data-ui-theme] textarea:focus,
:root[data-ui-theme] select:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent);
}
:root[data-ui-theme] input[type="file"] {
  padding: 20px 14px;
  border: 1px dashed var(--line-strong);
  background: var(--surface-subtle);
  box-shadow: none;
}
:root[data-ui-theme] input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text-secondary);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
:root[data-ui-theme] .primary-btn,
:root[data-ui-theme] .secondary-btn,
:root[data-ui-theme] .danger-btn {
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
:root[data-ui-theme] .primary-btn { background: var(--accent); color: var(--on-accent); }
:root[data-ui-theme] .primary-btn:hover:not(:disabled) { background: var(--accent-hover); }
:root[data-ui-theme] .secondary-btn { background: var(--panel); border-color: var(--line-strong); color: var(--text-secondary); }
:root[data-ui-theme] .secondary-btn:hover:not(:disabled) { background: var(--surface-subtle); }
:root[data-ui-theme] .danger-btn { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
:root[data-ui-theme] .danger-btn:hover:not(:disabled) { background: var(--danger-hover); }
:root[data-ui-theme] .text-btn { color: var(--accent); font-weight: 500; }
:root[data-ui-theme] button:focus-visible,
:root[data-ui-theme] a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root[data-ui-theme] .primary-btn:disabled,
:root[data-ui-theme] .secondary-btn:disabled,
:root[data-ui-theme] .danger-btn:disabled { opacity: 0.5; }
:root[data-ui-theme] .result-frame,
:root[data-ui-theme] .report-section,
:root[data-ui-theme] .stat-box,
:root[data-ui-theme] .quota-card,
:root[data-ui-theme] .preview-card {
  padding: 16px;
  border-radius: 8px;
  background: var(--surface-subtle);
}
:root[data-ui-theme] .result-frame:has(> .meta):not(:has(img)) {
  display: flex;
  min-height: 232px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-style: dashed;
  text-align: center;
}
:root[data-ui-theme] .result-frame:has(> .meta):not(:has(img))::before {
  content: "";
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-ui-theme] .preview-thumb { border-radius: 6px; background: var(--panel); }
:root[data-ui-theme] .preview-meta { min-width: 0; overflow-wrap: anywhere; }
:root[data-ui-theme] .preview-meta strong { font-size: 13px; }
:root[data-ui-theme] .loading-card { border-color: var(--accent-line); border-radius: 8px; background: var(--accent-soft); }
:root[data-ui-theme] .spinner { border-color: var(--accent-line); border-top-color: var(--accent); }
:root[data-ui-theme] .loading-bar { height: 5px; background: var(--accent-line); }
:root[data-ui-theme] .loading-bar::after { background: var(--accent); }
:root[data-ui-theme] .pill { padding: 5px 9px; border-radius: 5px; background: var(--surface-subtle); font-size: 11px; }
:root[data-ui-theme] pre { color: var(--text-secondary); font-size: 12px; }
:root[data-ui-theme] .report-section h4 { font-size: 13px; }
:root[data-ui-theme] .report-list { font-size: 13px; }
:root[data-ui-theme] .stat-box strong { display: block; margin-top: 8px; font-size: 14px; }
:root[data-ui-theme] .quota-card strong { color: var(--accent); font-variant-numeric: tabular-nums; }
:root[data-ui-theme] .history-item,
:root[data-ui-theme] .admin-user { padding: 20px 0; font-size: 13px; overflow-wrap: anywhere; }
:root[data-ui-theme] .alert,
:root[data-ui-theme] .auth-alert { border-radius: 8px; background: var(--panel); font-size: 13px; }
:root[data-ui-theme] .alert.success,
:root[data-ui-theme] .auth-alert.success { background: var(--success-soft); border-color: var(--success-line); }
:root[data-ui-theme] .alert.error,
:root[data-ui-theme] .auth-alert.error { background: var(--danger-soft); border-color: var(--danger-line); }
:root[data-ui-theme] .result-image,
:root[data-ui-theme] .audio-player { border-radius: 8px; }
[data-ui-theme="light"] .theme-icon-light { display: none; }
[data-ui-theme="light"] .theme-icon-classic { display: block; }

/* Login and registration use the same layout in both palettes. */
:root[data-ui-theme] .auth-page { padding: 88px 24px 36px; background: var(--bg); }
:root[data-ui-theme] .auth-card {
  grid-template-columns: 1fr 0.92fr;
  width: min(940px, 100%);
  background: var(--panel);
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(var(--shadow-rgb), 0.06);
}
:root[data-ui-theme] .auth-panel { padding: 44px; }
:root[data-ui-theme] .auth-panel.hero-side { background: var(--intro-bg); }
:root[data-ui-theme] .auth-panel.form-side { background: var(--panel); display: flex; flex-direction: column; justify-content: center; }
:root[data-ui-theme] .auth-panel h2 { margin-top: 14px; font-size: 30px; letter-spacing: -1px; }
:root[data-ui-theme] .auth-panel h3 { margin-top: 10px; font-size: 22px; letter-spacing: -0.5px; }
:root[data-ui-theme] .auth-panel p { font-size: 13px; }
:root[data-ui-theme] .auth-feature-list { gap: 10px; margin-top: 26px; }
:root[data-ui-theme] .auth-feature { padding: 13px 15px; background: var(--panel); border-color: var(--accent-line); border-radius: 8px; }
:root[data-ui-theme] .auth-feature strong { font-size: 13px; font-weight: 600; }
:root[data-ui-theme] .auth-feature p { margin: 5px 0 0; font-size: 12px; }
:root[data-ui-theme] .auth-tabs { align-self: flex-start; padding: 4px; border-radius: 8px; background: var(--surface-soft); margin-bottom: 26px; }
:root[data-ui-theme] .auth-tabs button { padding: 7px 20px; border-radius: 5px; font-size: 12px; font-weight: 500; }
:root[data-ui-theme] .auth-tabs button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.08); }
:root[data-ui-theme] .auth-footer { margin-top: 22px; font-size: 12px; }

/* Components added in the commercial version share the same surfaces. */
:root[data-ui-theme] .result-card,
:root[data-ui-theme] .tool-subtabs,
:root[data-ui-theme] .bg-batch-note,
:root[data-ui-theme] .batch-thumb-card,
:root[data-ui-theme] .batch-result-card,
:root[data-ui-theme] .tts-usage-note,
:root[data-ui-theme] .voice-hint-card,
:root[data-ui-theme] .tts-player-wrap,
:root[data-ui-theme] .password-compact,
:root[data-ui-theme] .compare-card,
:root[data-ui-theme] .ancient-reading-block,
:root[data-ui-theme] .admin-user-card,
:root[data-ui-theme] .admin-package-card,
:root[data-ui-theme] .admin-summary-item,
:root[data-ui-theme] .admin-section,
:root[data-ui-theme] .admin-usage,
:root[data-ui-theme] .purchase-mini-meta div,
:root[data-ui-theme] .purchase-rule-grid div,
:root[data-ui-theme] .purchase-order-item,
:root[data-ui-theme] .payment-qr-wrap,
:root[data-ui-theme] .payment-code-block,
:root[data-ui-theme] .payment-code-text {
  background: var(--surface-subtle);
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: none;
}
:root[data-ui-theme] .admin-create-panel,
:root[data-ui-theme] .admin-package-panel,
:root[data-ui-theme] .purchase-card { background: var(--panel); border-color: var(--line); }
:root[data-ui-theme] .purchase-card { border-radius: 12px; box-shadow: var(--shadow); }
:root[data-ui-theme] .purchase-card-featured { border-color: var(--accent); }
:root[data-ui-theme] .purchase-hero-card { background: var(--accent-soft); border-color: var(--accent-line); border-radius: 10px; }
:root[data-ui-theme] .purchase-mini-meta strong,
:root[data-ui-theme] .purchase-rule-grid strong,
:root[data-ui-theme] .purchase-price,
:root[data-ui-theme] .purchase-rule-inline-compact strong,
:root[data-ui-theme] .payment-code-text,
:root[data-ui-theme] .bg-batch-note strong,
:root[data-ui-theme] .batch-thumb-meta strong,
:root[data-ui-theme] .ancient-reading-text,
:root[data-ui-theme] .tts-input-label strong,
:root[data-ui-theme] .tts-note-row.compact strong { color: var(--text); }
:root[data-ui-theme] .purchase-price { font-size: 26px; }
:root[data-ui-theme] .purchase-badge,
:root[data-ui-theme] .voice-gender-badge,
:root[data-ui-theme] .vip-mini-badge,
:root[data-ui-theme] .result-badge {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
  border-radius: 5px;
}
:root[data-ui-theme] .purchase-pay-btn { border-color: var(--line-strong); background: var(--panel); box-shadow: none; }
:root[data-ui-theme] .purchase-pay-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
:root[data-ui-theme] .purchase-hero-card { grid-template-columns: minmax(0, 1fr); }
:root[data-ui-theme] .purchase-package-grid-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-ui-theme] .view-layout-purchase-customer { grid-template-columns: 1fr; }
:root[data-ui-theme] .view-layout-purchase-customer > .report-card { display: none; }
:root[data-ui-theme] .purchase-card-top { flex-wrap: wrap; }
:root[data-ui-theme] .purchase-rule-inline { background: var(--surface-subtle); border-color: var(--line); border-radius: 8px; }
:root[data-ui-theme] .purchase-rule-inline-compact span { color: var(--muted); }
:root[data-ui-theme] .tool-subtabs { padding: 4px; border-radius: 8px; }
:root[data-ui-theme] .tool-subtab {
  color: var(--muted);
  border-color: transparent;
  border-radius: 5px;
  font-size: 12px;
}
:root[data-ui-theme] .tool-subtab.active { background: var(--panel); border-color: var(--line); color: var(--accent); }
:root[data-ui-theme] .batch-empty-state { background: var(--surface-subtle); border-color: var(--line-strong); color: var(--muted); border-radius: 8px; }
:root[data-ui-theme] .batch-thumb-remove,
:root[data-ui-theme] .result-icon-btn,
:root[data-ui-theme] .preview-remove-btn,
:root[data-ui-theme] .image-lightbox-close { background: var(--panel); color: var(--text-secondary); border-color: var(--line-strong); }
:root[data-ui-theme] .result-icon-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
:root[data-ui-theme] .batch-result-card.failed { border-color: var(--danger-line); background: var(--danger-soft); }
:root[data-ui-theme] .batch-result-fail { color: var(--danger); }
:root[data-ui-theme] .batch-result-card.waiting .pill { color: var(--muted); }
:root[data-ui-theme] .admin-tab-btn { border-radius: 6px; min-height: 36px; padding: 9px 16px; font-size: 12px; background: var(--panel); }
:root[data-ui-theme] .admin-tab-panel { padding: 12px 16px; }
:root[data-ui-theme] .admin-tab-section { display: grid; gap: 20px; }
:root[data-ui-theme] .admin-tab-btn.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); box-shadow: none; }
:root[data-ui-theme] .admin-tab-btn:hover:not(.active) { background: var(--surface-subtle); border-color: var(--line-strong); color: var(--text); }
:root[data-ui-theme] .admin-summary-grid { gap: 8px; }
:root[data-ui-theme] .admin-summary-item { padding: 12px; }
:root[data-ui-theme] .admin-summary-item span { font-size: 11px; }
:root[data-ui-theme] .admin-summary-item strong { font-size: 18px; font-variant-numeric: tabular-nums; }
:root[data-ui-theme] .admin-layout { grid-template-columns: minmax(0, 1fr); }
:root[data-ui-theme] .field-tip,
:root[data-ui-theme] .mini-help,
:root[data-ui-theme] .tts-submit-hint { color: var(--muted); font-size: 11px; }
:root[data-ui-theme] #ttsCharCount.near-limit { color: var(--warning); }
:root[data-ui-theme] .result-image-wrap { background-color: var(--surface-soft); border-color: var(--line); border-radius: 8px; }
:root[data-ui-theme] .ancient-reading-block.secondary { background: var(--surface-subtle); }
:root[data-ui-theme] .coming-soon-modal,
:root[data-ui-theme] .image-lightbox { background: var(--overlay-bg); }
:root[data-ui-theme] .coming-soon-panel,
:root[data-ui-theme] .image-lightbox-panel { background: var(--panel); border-color: var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(var(--shadow-rgb), 0.12); }
:root[data-ui-theme] .captcha-image-btn { background: var(--surface-subtle); border-color: var(--line-strong); border-radius: 7px; }
:root[data-ui-theme] .captcha-image { background: var(--surface-subtle); }
:root[data-ui-theme] .captcha-tip-btn { color: var(--muted); }
:root[data-ui-theme] .auth-feature-icon { filter: none; opacity: 1; }
:root[data-ui-theme] .auth-feature-icon:not([src*="slgailogo"]) { filter: var(--icon-filter); opacity: 0.6; }
:root[data-ui-theme] .auth-feature-list { grid-template-columns: 1fr; }
:root[data-ui-theme] .auth-brand-logo { border-color: var(--accent-line); border-radius: 10px; }
:root[data-ui-theme] .auth-page .primary-btn { font-weight: 500; }
:root[data-ui-theme] .field-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-hover); }
:root[data-ui-theme] input:-webkit-autofill,
:root[data-ui-theme] input:-webkit-autofill:hover,
:root[data-ui-theme] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--panel) inset;
}

@media (max-width: 820px) {
  :root[data-ui-theme] .auth-card { grid-template-columns: 1fr; max-width: 480px; }
  :root[data-ui-theme] .mobile-auth-brand { background: var(--intro-bg); border-color: var(--accent-line); border-radius: 8px; }
  :root[data-ui-theme] .mobile-auth-brand h4 { font-size: 16px; }
}

@media (max-width: 1180px) {
  :root[data-ui-theme] .app-shell { grid-template-columns: 216px minmax(0, 1fr); }
  :root[data-ui-theme] .sidebar { padding: 26px 14px 18px; }
  :root[data-ui-theme] .main-shell { padding: 24px; }
  :root[data-ui-theme] .view-layout { grid-template-columns: 1fr; }
  :root[data-ui-theme] .admin-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .auth-theme-control { top: 14px; right: 14px; }
  .auth-theme-control .theme-switch {
    min-height: 32px;
    padding: 6px 10px;
    gap: 5px;
    font-size: 11px;
  }
  :root[data-ui-theme] .app-shell { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 !important; }
  :root[data-ui-theme] .sidebar {
    position: static;
    height: auto;
    overflow: visible;
    padding: 20px 18px 16px !important;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0 !important;
  }
  :root[data-ui-theme] .brand-block { grid-template-columns: 36px minmax(0, 1fr) !important; gap: 10px !important; }
  :root[data-ui-theme] .brand-logo { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
  :root[data-ui-theme] .brand-block h1 { font-size: 16px !important; }
  :root[data-ui-theme] .brand-block p { margin: 0; }
  :root[data-ui-theme] .sidebar-section { margin-top: 20px !important; }
  :root[data-ui-theme] .section-title { padding-left: 0; }
  :root[data-ui-theme] .sidebar.mobile-nav-expanded .nav-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  :root[data-ui-theme] .sidebar.mobile-nav-expanded .nav-list button { padding: 10px !important; gap: 8px; border-radius: 7px !important; font-size: 12px !important; }
  :root[data-ui-theme] .sidebar-toggle { background: var(--surface-subtle) !important; border-color: var(--line-strong) !important; border-radius: 6px; font-size: 12px; }
  :root[data-ui-theme] [data-view="settings"] { margin-top: 0; }
  :root[data-ui-theme] .status-card { margin-top: 16px; padding: 10px 12px; }
  :root[data-ui-theme] .main-shell { padding: 20px 16px 32px; }
  :root[data-ui-theme] .topbar { display: flex !important; flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 20px; padding: 0 0 20px !important; border-radius: 0 !important; }
  :root[data-ui-theme] .topbar-title { font-size: 13px !important; }
  :root[data-ui-theme] .topbar-meta { font-size: 11px !important; }
  :root[data-ui-theme] .topbar-actions { flex-direction: row; align-items: center; width: 100%; }
  :root[data-ui-theme] .topbar-actions { margin-top: 0 !important; }
  :root[data-ui-theme] .quota-inline { flex: 1 0 100%; margin-bottom: 0; }
  :root[data-ui-theme] .topbar-quick-actions { width: 100%; justify-content: flex-end; margin-top: 0; }
  :root[data-ui-theme] .topbar-quick-actions .theme-switch { margin-left: auto; min-height: 32px; padding: 6px 10px; }
  :root[data-ui-theme] .topbar-quick-actions #refreshBtn,
  :root[data-ui-theme] .topbar-quick-actions #logoutBtn { height: 32px !important; min-height: 32px !important; padding: 0 10px !important; font-size: 12px !important; line-height: 32px !important; border-radius: 7px !important; }
  :root[data-ui-theme] .hero { padding: 22px; }
  :root[data-ui-theme] .hero-main h2 { font-size: 22px; }
  :root[data-ui-theme] .panel,
  :root[data-ui-theme] .report-card,
  :root[data-ui-theme] .history-list { padding: 20px !important; border-radius: 12px !important; }
  :root[data-ui-theme] .form-grid { gap: 16px !important; }
  :root[data-ui-theme] .admin-tab-section:not(.hidden) { display: grid !important; gap: 16px; }
  :root[data-ui-theme] .main-shell .panel .primary-btn,
  :root[data-ui-theme] .main-shell .panel .secondary-btn,
  :root[data-ui-theme] .main-shell .panel .danger-btn,
  :root[data-ui-theme] .main-shell .report-card .secondary-btn { font-size: 13px !important; border-radius: 7px !important; }
  :root[data-ui-theme] .result-frame,
  :root[data-ui-theme] .report-section,
  :root[data-ui-theme] .preview-card { border-radius: 8px !important; }
  :root[data-ui-theme] #bgSubmit,
  :root[data-ui-theme] #visionSubmit,
  :root[data-ui-theme] #ttsSubmit,
  :root[data-ui-theme] #enhanceSubmit,
  :root[data-ui-theme] #saveSettingsBtn,
  :root[data-ui-theme] #saveVoiceBtn,
  :root[data-ui-theme] #changePasswordBtn,
  :root[data-ui-theme] #createUserBtn { font-size: 13px !important; border-radius: 7px !important; }
  :root[data-ui-theme] .purchase-package-grid-pricing { grid-template-columns: 1fr; }
  :root[data-ui-theme] .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-ui-theme] .auth-card { grid-template-columns: 1fr; }
  :root[data-ui-theme] .auth-panel { padding: 28px; }
  :root[data-ui-theme] .auth-panel.hero-side { border-right: 0; border-bottom: 1px solid var(--line); }
  :root[data-ui-theme] .auth-page { padding: 76px 16px 24px; }
  :root[data-ui-theme] .auth-alert { width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-ui-theme] .spinner { animation: none; }
  :root[data-ui-theme] .loading-bar::after { animation: none; width: 100%; }
}