:root {
  --theme-surface: #fff;
  --theme-surface-soft: #f4f6f6;
  --theme-surface-muted: #edf5f3;
  --theme-hover: #eaf5f2;
  --theme-input: #fff;
}

:root[data-theme="science-blue"] {
  --teal: #1769aa;
  --coral: #e05a47;
  --paper: #f3f7fb;
  --line: #d9e3ec;
  --theme-surface-soft: #f3f7fb;
  --theme-surface-muted: #e9f2fa;
  --theme-hover: #e8f2fa;
}

:root[data-theme="fresh-green"] {
  --teal: #27845a;
  --coral: #e06a43;
  --paper: #f3f8f4;
  --line: #d9e6dd;
  --theme-surface-soft: #f3f8f4;
  --theme-surface-muted: #e8f4ec;
  --theme-hover: #e7f3eb;
}

:root[data-theme="warm-orange"] {
  --teal: #c45a20;
  --coral: #087f78;
  --paper: #faf6f2;
  --line: #eadfd5;
  --theme-surface-soft: #faf6f2;
  --theme-surface-muted: #f8ece2;
  --theme-hover: #f9ece2;
}

:root[data-theme="dark"] {
  --ink: #edf3f2;
  --soft: #b2bfbd;
  --line: #344542;
  --paper: #111917;
  --white: #1b2522;
  --teal: #58c8bb;
  --coral: #ff8064;
  --shadow: 0 18px 38px rgba(0, 0, 0, .34);
  --theme-surface: #1b2522;
  --theme-surface-soft: #111917;
  --theme-surface-muted: #22312d;
  --theme-hover: #273a35;
  --theme-input: #17211e;
}

:root[data-theme="soft-pink"] {
  --teal: #b84f76;
  --coral: #197d78;
  --paper: #fbf5f7;
  --line: #eadde2;
  --theme-surface-soft: #fbf5f7;
  --theme-surface-muted: #f7e9ee;
  --theme-hover: #f8e8ee;
}

:root[data-theme="elegant-purple"] {
  --teal: #7157a6;
  --coral: #c75b45;
  --paper: #f7f5fa;
  --line: #e2ddea;
  --theme-surface-soft: #f7f5fa;
  --theme-surface-muted: #eee9f6;
  --theme-hover: #eee8f7;
}

:root[data-theme="moon-gray"] {
  --teal: #526873;
  --coral: #b85d46;
  --paper: #f4f6f7;
  --line: #dce2e5;
  --theme-surface-soft: #f4f6f7;
  --theme-surface-muted: #e9eef0;
  --theme-hover: #e8edef;
}

:root[data-theme="lake-cyan"] {
  --teal: #087e8b;
  --coral: #d65e48;
  --paper: #f2f8f8;
  --line: #d6e6e7;
  --theme-surface-soft: #f2f8f8;
  --theme-surface-muted: #e4f1f2;
  --theme-hover: #e2f1f2;
}

:root[data-theme="berry-red"] {
  --teal: #a43d54;
  --coral: #247b76;
  --paper: #faf4f5;
  --line: #e8d9dd;
  --theme-surface-soft: #faf4f5;
  --theme-surface-muted: #f4e6e9;
  --theme-hover: #f4e5e9;
}

:root[data-theme="amber-gold"] {
  --teal: #9b6a08;
  --coral: #187a73;
  --paper: #faf8f1;
  --line: #e8e1cf;
  --theme-surface-soft: #faf8f1;
  --theme-surface-muted: #f5eedb;
  --theme-hover: #f5edd8;
}

:root[data-theme="glacier-blue"] {
  --teal: #3d7495;
  --coral: #c35f4a;
  --paper: #f2f7f9;
  --line: #d8e4e9;
  --theme-surface-soft: #f2f7f9;
  --theme-surface-muted: #e5f0f4;
  --theme-hover: #e3eef3;
}

.top-actions { display: flex; align-items: center; gap: 4px; }
.theme-control { position: relative; }
.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.theme-toggle:hover,
.theme-toggle[aria-expanded="true"] { background: var(--theme-hover); }
.theme-toggle:focus-visible,
.theme-popover button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.theme-toggle img { width: 27px; height: 27px; }
.theme-popover {
  position: absolute;
  right: 0;
  top: 50px;
  z-index: 30;
  width: 190px;
  padding: 7px;
  border: 1px solid var(--line);
  background: var(--theme-surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  max-height: min(620px, calc(100vh - 72px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.theme-popover[hidden] { display: none; }
.theme-popover-title { padding: 8px 10px 9px; color: var(--soft); font-size: 11px; font-weight: 800; }
.theme-popover button {
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.theme-popover button:hover,
.theme-popover button[aria-checked="true"] { background: var(--theme-hover); }
.theme-popover button i { color: var(--teal); font-style: normal; font-weight: 900; text-align: right; }
.theme-popover button[aria-checked="true"] i::before { content: "\2713"; }
.theme-swatch { width: 15px; height: 15px; border: 1px solid rgba(20, 24, 27, .18); border-radius: 50%; }
.swatch-laowang { background: #087f78; }
.swatch-blue { background: #1769aa; }
.swatch-green { background: #27845a; }
.swatch-orange { background: #c45a20; }
.swatch-pink { background: #b84f76; }
.swatch-purple { background: #7157a6; }
.swatch-gray { background: #526873; }
.swatch-cyan { background: #087e8b; }
.swatch-berry { background: #a43d54; }
.swatch-gold { background: #9b6a08; }
.swatch-glacier { background: #3d7495; }
.swatch-dark { background: #18211f; border-color: #63716e; }

html, body, .workspace, .topbar, .sidebar, .site-footer,
button, input, textarea, select, dialog { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }

:root[data-theme="dark"] body,
:root[data-theme="dark"] .workspace { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .site-footer { background: #151f1c; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .sidebar { background: #151f1c !important; color: var(--ink) !important; }
:root[data-theme="dark"] .sidebar .brand,
:root[data-theme="dark"] .sidebar .brand small,
:root[data-theme="dark"] .sidebar .side-label,
:root[data-theme="dark"] .sidebar .side-nav a { color: var(--soft) !important; }
:root[data-theme="dark"] .sidebar .brand strong { color: var(--ink) !important; }
:root[data-theme="dark"] .sidebar .side-nav > a { background: transparent !important; }
:root[data-theme="dark"] .sidebar .side-nav > a:hover,
:root[data-theme="dark"] .sidebar .side-nav > a.active { background: #22332f !important; color: var(--teal) !important; }
:root[data-theme="dark"] .sidebar .side-nav a .nav-icon-wrap { background: #23312e; box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .sidebar .side-status { border-color: var(--line) !important; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select { background: var(--theme-input); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #879693; }

:root[data-theme="dark"] :is(
  .card, .compact-feature-card, .feature-admin-shell, .feature-admin-toolbar,
  .content-admin-shell, .content-admin-row button, .help-card, .case-card,
  .help-search, .help-filters button, .help-doc-card, .help-contact,
  .notice-popover, .notice-popover-item, .announcement-dialog,
  .community-card, .community-dialog, .community-admin-dialog,
  .community-admin-list button, .about-admin-form > section,
  .assistant-panel, .assistant-form, .assistant-message.bot, .message-content,
  .assistant-related button, .assistant-template-manager, .identity-options,
  .identity-options button, .assistant-calendar, .analytics-chart-grid > article,
  .analytics-secondary > article, .analytics-loading, .analytics-error,
  .user-auth-card, .auth-card, .admin-login, .content-editor-dialog,
  .feature-detail-dialog, .feature-editor-dialog, .case-detail-dialog
) { background: var(--theme-surface) !important; color: var(--ink); border-color: var(--line); }

:root[data-theme="dark"] :is(
  .feature-admin-table-head, .analytics-ranking, .assistant-messages,
  .assistant-markdown blockquote, .assistant-markdown code,
  .community-card-signal, .community-activity-time, .help-info div,
  .admin-guide-grid div, .feature-card-top i, .file-dropzone,
  .case-image-dropzone, .knowledge-import, .theme-popover button:hover,
  .theme-popover button[aria-checked="true"]
) { background: var(--theme-surface-muted) !important; color: var(--ink); border-color: var(--line); }

:root[data-theme="dark"] :is(.feature-tabs button, .feature-search, .admin-feature-search,
  .assistant-image-pick, .community-filter, .community-search) {
  background: var(--theme-input); color: var(--ink); border-color: var(--line);
}
:root[data-theme="dark"] .feature-tabs button.active { background: var(--teal); color: #0c1714; }
:root[data-theme="dark"] .assistant-message.user { background: #30413d; color: #fff; }
:root[data-theme="dark"] .assistant-markdown pre { background: #0a100e; }
:root[data-theme="dark"] .markdown-content table,
:root[data-theme="dark"] .assistant-markdown table { border-color: var(--line); }
:root[data-theme="dark"] .markdown-content th,
:root[data-theme="dark"] .assistant-markdown th { background: #263632; color: var(--ink); }
:root[data-theme="dark"] .markdown-content td,
:root[data-theme="dark"] .assistant-markdown td { border-color: var(--line); }
:root[data-theme="dark"] img:not(.brand-mark):not(.nav-icon) { filter: brightness(.94); }
:root[data-theme="dark"] .theme-toggle img,
:root[data-theme="dark"] .notice-bell-icon,
:root[data-theme="dark"] .assistant-avatar img,
:root[data-theme="dark"] .community-card img { filter: none; }

@media (max-width: 520px) {
  .theme-popover { position: fixed; right: 12px; top: 62px; width: min(210px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  html, body, .workspace, .topbar, .sidebar, .site-footer,
  button, input, textarea, select, dialog { transition: none; }
}