/* Tool UI themes only. The homepage and user-generated previews are independent. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #050811;
  --theme-panel: #09111f;
  --theme-raised: #0d1729;
  --theme-card: #101c31;
  --theme-text: #edf7ff;
  --theme-muted: #9bb2c9;
  --theme-faint: #8398af;
  --theme-line: rgba(144,188,222,.18);
  --theme-strong: rgba(90,198,255,.36);
  --theme-accent: #62ddff;
  --theme-bright: #a9f4ff;
  --theme-dim: rgba(98,221,255,.12);
  --theme-purple: #ad98ff;
  --theme-pd: rgba(157,131,255,.15);
  --theme-orange: #ffbc70;
  --theme-od: rgba(249,115,22,.15);
  --theme-green: #52dba8;
  --theme-gd: rgba(16,185,129,.15);
  --theme-red: #ff8f9c;
  --theme-on: #04101a;
  --theme-surface: rgba(155,178,201,.06);
  --theme-surface2: rgba(155,178,201,.12);
  --theme-shadow: 0 4px 24px rgba(0,0,0,.3);

}
:root[data-theme="light"] {
  color-scheme: light;
  --theme-bg: #f3f6fa;
  --theme-panel: #ffffff;
  --theme-raised: #edf2f8;
  --theme-card: #e7eef7;
  --theme-text: #17263c;
  --theme-muted: #4e6075;
  --theme-faint: #5b6d81;
  --theme-line: #d5dfeb;
  --theme-strong: #9bb5d5;
  --theme-accent: #185fc7;
  --theme-bright: #124fa9;
  --theme-dim: rgba(24,95,199,.09);
  --theme-purple: #7044bc;
  --theme-pd: rgba(112,68,188,.09);
  --theme-orange: #995009;
  --theme-od: rgba(153,80,9,.09);
  --theme-green: #14734f;
  --theme-gd: rgba(20,115,79,.09);
  --theme-red: #b83248;
  --theme-on: #ffffff;
  --theme-surface: rgba(28,60,100,.035);
  --theme-surface2: rgba(28,60,100,.075);
  --theme-shadow: 0 4px 24px rgba(35,61,94,.07);

}
:root[data-theme="warm"] {
  color-scheme: light;
  --theme-bg: #f5f1e8;
  --theme-panel: #fffcf5;
  --theme-raised: #eee9dd;
  --theme-card: #e7e2d4;
  --theme-text: #2c352c;
  --theme-muted: #596151;
  --theme-faint: #686d5c;
  --theme-line: #dcd7c7;
  --theme-strong: #a6b596;
  --theme-accent: #416837;
  --theme-bright: #355b2c;
  --theme-dim: rgba(65,104,55,.10);
  --theme-purple: #796044;
  --theme-pd: rgba(121,96,68,.10);
  --theme-orange: #92501c;
  --theme-od: rgba(146,80,28,.10);
  --theme-green: #376b47;
  --theme-gd: rgba(55,107,71,.10);
  --theme-red: #ad3e3c;
  --theme-on: #ffffff;
  --theme-surface: rgba(72,82,48,.035);
  --theme-surface2: rgba(72,82,48,.08);
  --theme-shadow: 0 4px 24px rgba(76,67,40,.07);

}

.theme-control { position: relative; display: flex; align-items: center; flex-shrink: 0; gap: 8px; margin: 8px 4px 0; padding: 0 10px; min-height: 44px; border: 1px solid var(--theme-line); border-radius: 9px; background: var(--theme-surface); color: var(--theme-muted); }
.theme-control svg { width: 18px; height: 18px; flex-shrink: 0; }
.theme-control select { width: 100%; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--theme-text); font: inherit; font-size: 12px; cursor: pointer; }
.theme-control option { background: var(--theme-panel); color: var(--theme-text); }
.theme-control:focus-within { outline: 2px solid var(--theme-accent); outline-offset: 2px; }
.theme-control select:focus-visible { outline: none; }
.is-sidebar-collapsed .theme-control { width: 44px; margin-inline: auto; justify-content: center; padding: 0; }
.is-sidebar-collapsed .theme-control select { position: absolute; inset: 0; width: 100%; opacity: 0; }
:root[data-theme] { accent-color: var(--theme-accent); }
:root[data-theme] .navbar { background: var(--theme-panel); }
:root[data-theme] ::-webkit-scrollbar-thumb { background: var(--theme-strong); }
:root[data-theme] .workbench-app { background: var(--theme-bg); }
:root[data-theme] .tool-panel { background: var(--theme-panel); }
:root[data-theme] .tool-tab.is-active { background: var(--theme-dim); border-color: var(--theme-strong); }
:root[data-theme] .tool-search { background: var(--theme-surface); border-color: var(--theme-line); }
:root[data-theme] .tool-search:focus-within { border-color: var(--theme-accent); box-shadow: 0 0 0 2px var(--theme-dim); }
:root[data-theme] .tool-tab:hover, :root[data-theme] .sidebar-toggle:hover, :root[data-theme] .sidebar-home-link:hover { background: var(--theme-surface2); }
:root[data-theme] .editor-card, :root[data-theme] .control-panel { background: var(--theme-panel); box-shadow: var(--theme-shadow); }
:root[data-theme] .primary-action, :root[data-theme] .main-btn, :root[data-theme] .top-button.primary, :root[data-theme] .device-switcher button.active { background: var(--theme-accent); color: var(--theme-on); }
:root[data-theme] .segmented button.active { color: var(--theme-purple); }
:root[data-theme] .primary-button { background: var(--theme-orange); color: var(--theme-on); }
@media (max-width: 760px) {
  .theme-control, .is-sidebar-collapsed .theme-control { margin: 6px 4px 0; width: auto; max-width: 200px; }
  .is-sidebar-collapsed .theme-control { padding: 0 10px; justify-content: flex-start; }
  .is-sidebar-collapsed .theme-control select { position: static; opacity: 1; }
}

:root[data-theme] {
  --bg: var(--theme-bg);
  --bg-2: var(--theme-panel);
  --bg-3: var(--theme-raised);
  --surface: var(--theme-surface);
  --surface-2: var(--theme-surface2);
  --border: var(--theme-line);
  --border-2: var(--theme-strong);
  --cyan: var(--theme-accent);
  --cyan-dim: var(--theme-dim);
  --purple: var(--theme-purple);
  --purple-dim: var(--theme-pd);
  --orange: var(--theme-orange);
  --orange-dim: var(--theme-od);
  --green: var(--theme-green);
  --green-dim: var(--theme-gd);
  --red: var(--theme-red);
  --text: var(--theme-text);
  --text-2: var(--theme-muted);
  --text-3: var(--theme-faint);
  --shadow: var(--theme-shadow);
  --shadow-lg: var(--theme-shadow);
  --workbench-ink: var(--theme-bg);
  --workbench-panel: var(--theme-panel);
  --workbench-panel-soft: var(--theme-raised);
  --workbench-surface: var(--theme-panel);
  --workbench-surface-raised: var(--theme-raised);
  --workbench-card: var(--theme-card);
  --workbench-white: var(--theme-text);
  --workbench-muted: var(--theme-muted);
  --workbench-faint: var(--theme-faint);
  --workbench-line: var(--theme-line);
  --workbench-line-strong: var(--theme-strong);
  --workbench-green: var(--theme-accent);
  --workbench-green-bright: var(--theme-bright);
  --workbench-violet: var(--theme-purple);
  --workbench-amber: var(--theme-orange);
  --workbench-red: var(--theme-red);
  --text-ink: var(--theme-bg);
  --text-panel: var(--theme-panel);
  --text-panel-soft: var(--theme-raised);
  --text-surface: var(--theme-panel);
  --text-surface-raised: var(--theme-raised);
  --text-card: var(--theme-card);
  --text-white: var(--theme-text);
  --text-muted: var(--theme-muted);
  --text-faint: var(--theme-faint);
  --text-line: var(--theme-line);
  --text-line-strong: var(--theme-strong);
  --text-green: var(--theme-accent);
  --text-green-bright: var(--theme-bright);
  --text-violet: var(--theme-purple);
  --text-amber: var(--theme-orange);
  --text-red: var(--theme-red);
}

:root[data-theme] .panel-chrome { background: var(--theme-raised); }
:root[data-theme] .tool-panel { box-shadow: var(--theme-shadow); border-color: var(--theme-line); }
:root[data-theme] .btn-primary { background: var(--theme-accent); color: var(--theme-on); box-shadow: none; }
:root[data-theme] .search-bar, :root[data-theme] .device-switcher { background: var(--theme-surface2); }
:root[data-theme] .progress-track, :root[data-theme] .progress-bar-bg { background: var(--theme-surface2); }
:root[data-theme] .tool-button.is-primary, :root[data-theme] .action-button.is-primary { color: var(--theme-on); }
:root[data-theme] .action-button.is-danger:hover { color: var(--theme-red); }
:root[data-theme="light"] .workbench-app::before, :root[data-theme="warm"] .workbench-app::before,
:root[data-theme="light"] .workbench-app::after, :root[data-theme="warm"] .workbench-app::after,
:root[data-theme="light"] .tool-panel::before, :root[data-theme="warm"] .tool-panel::before { display: none; }
:root[data-theme="warm"] .text-tool-page, :root[data-theme="warm"] .pdf-page, :root[data-theme="warm"] .tool-body { background: var(--theme-bg); }
:root[data-theme="warm"] .text-tool-page::before, :root[data-theme="warm"] .text-tool-page::after { display: none; }

:root[data-theme] .panel-card { box-shadow: var(--theme-shadow); }

:root[data-theme] .preview-stage { background-color: var(--theme-raised); background-image: linear-gradient(45deg,var(--theme-line) 25%,transparent 25%),linear-gradient(-45deg,var(--theme-line) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--theme-line) 75%),linear-gradient(-45deg,transparent 75%,var(--theme-line) 75%); }