/*
 * Image Studio theme system
 * Eight role-based palettes keep image previews neutral while changing the surrounding workspace.
 */

html[data-theme="porcelain"] {
  --theme-canvas: #f4f7fb;
  --theme-panel: #ffffff;
  --theme-panel-soft: #ebf1f7;
  --theme-panel-raised: #f9fbfd;
  --theme-text: #202737;
  --theme-text-muted: #616a7f;
  --theme-text-subtle: var(--theme-text-muted);
  --theme-border: #dce5ef;
  --theme-border-strong: #bfccdc;
  --theme-accent: #4966a3;
  --theme-accent-hover: #3e5d96;
  --theme-accent-soft: #e4ebf7;
  --theme-accent-contrast: #ffffff;
  --theme-secondary: #8eb4d4;
  --theme-secondary-soft: #edf5fb;
  --theme-success: #2f7d6e;
  --theme-danger: #b54c62;
  --theme-scrim: rgba(31, 42, 58, 0.46);
  --theme-shadow: 0 14px 34px rgba(59, 80, 112, 0.09);
  --theme-shadow-lg: 0 30px 78px rgba(54, 72, 103, 0.18);
  --theme-hero: radial-gradient(circle at 82% 18%, rgba(142, 180, 212, 0.32), transparent 30%), linear-gradient(145deg, #e9f1fa 0%, #f9fbfd 60%, #eef4f6 100%);
  --theme-hero-text: #202c40;
  --theme-hero-muted: #647189;
}

html[data-theme="obsidian"] {
  --theme-canvas: #f4f8f6;
  --theme-panel: #ffffff;
  --theme-panel-soft: #eaf2ee;
  --theme-panel-raised: #f8fbf9;
  --theme-text: #1f2b29;
  --theme-text-muted: #5d6d68;
  --theme-text-subtle: var(--theme-text-muted);
  --theme-border: #d9e7e1;
  --theme-border-strong: #b9cfc6;
  --theme-accent: #2d7166;
  --theme-accent-hover: #255f57;
  --theme-accent-soft: #dceee8;
  --theme-accent-contrast: #ffffff;
  --theme-secondary: #8aa6ba;
  --theme-secondary-soft: #eaf1f5;
  --theme-success: #2f776c;
  --theme-danger: #b9515f;
  --theme-scrim: rgba(29, 49, 44, 0.46);
  --theme-shadow: 0 14px 34px rgba(55, 91, 80, 0.09);
  --theme-shadow-lg: 0 30px 78px rgba(47, 80, 70, 0.18);
  --theme-hero: radial-gradient(circle at 80% 16%, rgba(138, 166, 186, 0.23), transparent 30%), linear-gradient(145deg, #e2f0eb 0%, #f9fcfa 58%, #edf4f1 100%);
  --theme-hero-text: #203630;
  --theme-hero-muted: #647a73;
}

html[data-theme="quantum"] {
  --theme-canvas: #f8f5fa;
  --theme-panel: #ffffff;
  --theme-panel-soft: #f0ebf4;
  --theme-panel-raised: #fbf9fc;
  --theme-text: #2d2733;
  --theme-text-muted: #6e6777;
  --theme-text-subtle: var(--theme-text-muted);
  --theme-border: #e6dfea;
  --theme-border-strong: #cfc3d6;
  --theme-accent: #765a9b;
  --theme-accent-hover: #60477f;
  --theme-accent-soft: #eee6f6;
  --theme-accent-contrast: #ffffff;
  --theme-secondary: #c18491;
  --theme-secondary-soft: #f7e9ec;
  --theme-success: #397c70;
  --theme-danger: #b54f66;
  --theme-scrim: rgba(49, 39, 57, 0.46);
  --theme-shadow: 0 14px 34px rgba(83, 65, 96, 0.09);
  --theme-shadow-lg: 0 30px 78px rgba(74, 57, 86, 0.18);
  --theme-hero: radial-gradient(circle at 82% 16%, rgba(193, 132, 145, 0.22), transparent 30%), linear-gradient(145deg, #eee8f4 0%, #fcf9fd 58%, #faf0f1 100%);
  --theme-hero-text: #352b3d;
  --theme-hero-muted: #756b7e;
}

html[data-theme="matcha"] {
  --theme-canvas: #f6f7f2;
  --theme-panel: #ffffff;
  --theme-panel-soft: #edf0e5;
  --theme-panel-raised: #fbfcf8;
  --theme-text: #252a20;
  --theme-text-muted: #666d5d;
  --theme-text-subtle: var(--theme-text-muted);
  --theme-border: #dfe4d4;
  --theme-border-strong: #c5ceb4;
  --theme-accent: #5f6d37;
  --theme-accent-hover: #596735;
  --theme-accent-soft: #e7edd8;
  --theme-accent-contrast: #ffffff;
  --theme-secondary: #a8b58a;
  --theme-secondary-soft: #f0f3e9;
  --theme-success: #557a50;
  --theme-danger: #a95654;
  --theme-scrim: rgba(35, 42, 29, 0.46);
  --theme-shadow: 0 14px 34px rgba(72, 84, 51, 0.09);
  --theme-shadow-lg: 0 30px 78px rgba(63, 75, 43, 0.18);
  --theme-hero: radial-gradient(circle at 82% 16%, rgba(168, 181, 138, 0.24), transparent 30%), linear-gradient(145deg, #edf1e5 0%, #fcfcf8 60%, #f4f2e8 100%);
  --theme-hero-text: #293122;
  --theme-hero-muted: #68715b;
}

html[data-theme="yuzu"] {
  --theme-canvas: #faeee5;
  --theme-panel: #fffaf6;
  --theme-panel-soft: #f8e5d7;
  --theme-panel-raised: #fffdfb;
  --theme-text: #302720;
  --theme-text-muted: #746358;
  --theme-text-subtle: var(--theme-text-muted);
  --theme-border: #efd8c8;
  --theme-border-strong: #ddbba5;
  --theme-accent: #a04721;
  --theme-accent-hover: #a9471e;
  --theme-accent-soft: #f8ddcd;
  --theme-accent-contrast: #ffffff;
  --theme-secondary: #e69b63;
  --theme-secondary-soft: #fbe9db;
  --theme-success: #4f7a62;
  --theme-danger: #aa4c4f;
  --theme-scrim: rgba(55, 39, 29, 0.48);
  --theme-shadow: 0 14px 34px rgba(134, 75, 40, 0.09);
  --theme-shadow-lg: 0 30px 78px rgba(121, 62, 31, 0.18);
  --theme-hero: radial-gradient(circle at 82% 16%, rgba(230, 155, 99, 0.25), transparent 30%), linear-gradient(145deg, #fae5d5 0%, #fffaf6 58%, #f8eee0 100%);
  --theme-hero-text: #3a281d;
  --theme-hero-muted: #7c6556;
}

html[data-theme="terracotta"] {
  --theme-canvas: #f8edeb;
  --theme-panel: #fffdfc;
  --theme-panel-soft: #f3e2de;
  --theme-panel-raised: #fffafa;
  --theme-text: #312624;
  --theme-text-muted: #71605d;
  --theme-text-subtle: var(--theme-text-muted);
  --theme-border: #ead7d3;
  --theme-border-strong: #d5b8b1;
  --theme-accent: #9a493c;
  --theme-accent-hover: #8d4035;
  --theme-accent-soft: #f3dcd7;
  --theme-accent-contrast: #ffffff;
  --theme-secondary: #c88d7e;
  --theme-secondary-soft: #f7e7e3;
  --theme-success: #517768;
  --theme-danger: #a5444f;
  --theme-scrim: rgba(52, 35, 32, 0.48);
  --theme-shadow: 0 14px 34px rgba(117, 68, 59, 0.09);
  --theme-shadow-lg: 0 30px 78px rgba(104, 54, 47, 0.18);
  --theme-hero: radial-gradient(circle at 82% 16%, rgba(200, 141, 126, 0.24), transparent 30%), linear-gradient(145deg, #f3dfda 0%, #fffaf8 58%, #f6e9e4 100%);
  --theme-hero-text: #3a2926;
  --theme-hero-muted: #79645f;
}

html[data-theme="orchid"] {
  color-scheme: dark;
  --theme-canvas: #121016;
  --theme-panel: #1d1a22;
  --theme-panel-soft: #27222e;
  --theme-panel-raised: #24202a;
  --theme-text: #f4f0f7;
  --theme-text-muted: #c0b6c8;
  --theme-text-subtle: var(--theme-text-muted);
  --theme-border: #383140;
  --theme-border-strong: #51465d;
  --theme-accent: #b77af2;
  --theme-accent-hover: #c792f6;
  --theme-accent-soft: #372846;
  --theme-accent-contrast: #17121c;
  --theme-secondary: #6e9fe8;
  --theme-secondary-soft: #222e43;
  --theme-success: #6db79c;
  --theme-danger: #e18493;
  --theme-scrim: rgba(5, 4, 7, 0.72);
  --theme-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
  --theme-shadow-lg: 0 30px 78px rgba(0, 0, 0, 0.46);
  --theme-hero: radial-gradient(circle at 82% 16%, rgba(183, 122, 242, 0.18), transparent 30%), linear-gradient(145deg, #1d1724 0%, #151219 58%, #191727 100%);
  --theme-hero-text: #f7f2fa;
  --theme-hero-muted: #bdb1c6;
}

html[data-theme="oat"] {
  --theme-canvas: #fdfcf9;
  --theme-panel: #ffffff;
  --theme-panel-soft: #f2f0eb;
  --theme-panel-raised: #faf9f6;
  --theme-text: #2d2925;
  --theme-text-muted: #706962;
  --theme-text-subtle: var(--theme-text-muted);
  --theme-border: #e5e1da;
  --theme-border-strong: #cbc4ba;
  --theme-accent: #6e635a;
  --theme-accent-hover: #5f564d;
  --theme-accent-soft: #ece8e2;
  --theme-accent-contrast: #ffffff;
  --theme-secondary: #b8aa98;
  --theme-secondary-soft: #f4f0ea;
  --theme-success: #557768;
  --theme-danger: #a85056;
  --theme-scrim: rgba(42, 38, 34, 0.46);
  --theme-shadow: 0 14px 34px rgba(74, 66, 58, 0.08);
  --theme-shadow-lg: 0 30px 78px rgba(66, 58, 51, 0.16);
  --theme-hero: radial-gradient(circle at 82% 16%, rgba(184, 170, 152, 0.21), transparent 30%), linear-gradient(145deg, #f3f0ea 0%, #fffefa 60%, #f5f1ea 100%);
  --theme-hero-text: #302b26;
  --theme-hero-muted: #736a62;
}

html[data-theme] {
  --bg: var(--theme-canvas);
  --paper: var(--theme-panel);
  --paper-soft: var(--theme-panel-soft);
  --panel: var(--theme-panel);
  --ink: var(--theme-text);
  --muted: var(--theme-text-muted);
  --subtle: var(--theme-text-subtle);
  --line: var(--theme-border);
  --line-strong: var(--theme-border-strong);
  --blue: var(--theme-accent);
  --blue-dark: var(--theme-accent-hover);
  --blue-soft: var(--theme-accent-soft);
  --green: var(--theme-success);
  --rose: var(--theme-danger);
  --shadow: var(--theme-shadow);
  --shadow-soft: var(--theme-shadow);
  background: var(--theme-canvas);
}

html[data-theme] body {
  background: var(--theme-canvas);
  color: var(--theme-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

html[data-theme] :focus-visible {
  outline-color: var(--theme-accent) !important;
}

/* Theme chooser */
.task-shell-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
}

.theme-control {
  position: relative;
}

.theme-menu-button {
  display: inline-grid;
  grid-template-columns: 26px auto 12px;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 6px;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  background: var(--theme-panel);
  color: var(--theme-text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.theme-menu-button:hover,
.theme-menu-button[aria-expanded="true"] {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

.theme-menu-button svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  transition: transform 160ms ease;
}

.theme-menu-button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.theme-menu-current {
  display: flex;
  width: 26px;
  height: 16px;
  align-items: center;
  justify-content: center;
}

.theme-menu-current i {
  width: 10px;
  height: 10px;
  margin-left: -3px;
  border: 1px solid var(--theme-panel);
  border-radius: 50%;
}

.theme-menu-current i:first-child { margin-left: 0; background: var(--theme-panel-soft); }
.theme-menu-current i:nth-child(2) { background: var(--theme-accent); }
.theme-menu-current i:nth-child(3) { background: var(--theme-secondary); }

.theme-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 250px;
  max-height: min(72vh, 476px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px;
  gap: 3px;
  border: 1px solid var(--theme-border);
  border-radius: 13px;
  background: var(--theme-panel-raised);
  box-shadow: var(--theme-shadow);
}

.theme-menu[hidden] {
  display: none !important;
}

.theme-menu > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--theme-text);
  text-align: left;
}

.theme-menu > button::after {
  color: var(--theme-accent);
  content: "";
  font-size: 15px;
  font-weight: 700;
}

.theme-menu > button:hover {
  background: var(--theme-panel-soft);
}

.theme-menu > button.active {
  border-color: var(--theme-border);
  background: var(--theme-accent-soft);
}

.theme-menu > button.active::after {
  content: "✓";
}

.theme-menu > button > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.theme-menu strong {
  color: var(--theme-text);
  font-size: 14px;
  line-height: 1.2;
}

.theme-menu small {
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 600;
}

.theme-option-swatch,
.theme-swatch {
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid rgba(127, 127, 127, 0.34);
  border-radius: 50%;
}

.theme-option-swatch {
  width: 30px;
  height: 30px;
}

.theme-swatch {
  width: 13px;
  height: 13px;
}

.theme-swatch-porcelain { background: conic-gradient(#ffffff 0 34%, #4f6faf 34% 67%, #a9c7df 67%); }
.theme-swatch-obsidian { background: conic-gradient(#ffffff 0 34%, #2f776c 34% 67%, #a9c4b9 67%); }
.theme-swatch-quantum { background: conic-gradient(#ffffff 0 34%, #765a9b 34% 67%, #d2a1aa 67%); }
.theme-swatch-matcha { background: conic-gradient(#ffffff 0 34%, #6f7f43 34% 67%, #a8b58a 67%); }
.theme-swatch-yuzu { background: conic-gradient(#fffaf6 0 34%, #c85b2b 34% 67%, #e69b63 67%); }
.theme-swatch-terracotta { background: conic-gradient(#fffdfc 0 34%, #aa5144 34% 67%, #c88d7e 67%); }
.theme-swatch-orchid { background: conic-gradient(#1d1a22 0 34%, #b77af2 34% 67%, #6e9fe8 67%); }
.theme-swatch-oat { background: conic-gradient(#ffffff 0 34%, #776c60 34% 67%, #b8aa98 67%); }

.auth-theme-chooser {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--theme-border);
}

.auth-theme-chooser > span {
  color: var(--theme-text-subtle);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.auth-theme-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.auth-theme-options button {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 700;
}

.auth-theme-options button:hover,
.auth-theme-options button.active {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-text);
}

/* Global surfaces */
html[data-theme] .app-shell {
  background: var(--theme-canvas);
}

html[data-theme] :where(.rail, .control-panel, .iteration-panel) {
  border-color: var(--theme-border);
  background: var(--theme-panel);
  color: var(--theme-text);
}

html[data-theme] .main-stage {
  border-color: var(--theme-border);
  background: var(--theme-canvas);
  color: var(--theme-text);
}

html[data-theme] :where(.task-shell-header, .workspace-topbar) {
  border-color: var(--theme-border);
  background: color-mix(in srgb, var(--theme-panel) 94%, transparent);
  color: var(--theme-text);
}

html[data-theme] :where(.task-shell-brand, .mode-screen-intro > span, .eyebrow, .auth-eyebrow) {
  color: var(--theme-text-subtle);
}

html[data-theme] :where(h1, h2, h3, .mode-screen-intro h1, .plan-mode-panel h1) {
  color: var(--theme-text);
}

html[data-theme] :where(.mode-screen-intro p, .plan-mode-panel p, .field-label strong, .selected-meta, .meta-list, .tile-copy span, .empty-state) {
  color: var(--theme-text-muted);
}

html[data-theme] .rail-logo {
  background: var(--theme-text);
  color: var(--theme-panel);
}

html[data-theme] .rail-button {
  color: var(--theme-text-muted);
}

html[data-theme] .rail-button:hover {
  background: var(--theme-panel-soft);
  color: var(--theme-text);
}

html[data-theme] .rail-button.active {
  background: var(--theme-text);
  color: var(--theme-panel);
}

html[data-theme] .rail-avatar {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
}

html[data-theme] .rail-avatar:hover {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] .control-mode-switcher,
html[data-theme] .workspace-tabs {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
}

html[data-theme] :where(.control-mode-button, .workspace-tab) {
  color: var(--theme-text-muted);
}

html[data-theme] :where(.control-mode-button:hover, .workspace-tab:hover) {
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

html[data-theme] :where(.control-mode-button.active, .workspace-tab.active, .workspace-tab[aria-selected="true"]) {
  background: var(--theme-panel-raised);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme] .creation-method-button {
  color: var(--theme-text-muted);
}

html[data-theme] .creation-method-button small {
  color: var(--theme-text-subtle);
}

html[data-theme] .creation-method-button:hover {
  border-color: var(--theme-border);
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

html[data-theme] .creation-method-button.active {
  border-color: color-mix(in srgb, var(--theme-accent) 34%, var(--theme-border));
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] .creation-method-button.active small {
  color: var(--theme-text-muted);
}

html[data-theme] .creation-method-button:focus-visible {
  outline-color: var(--theme-accent);
}

html[data-theme] .control-mode-button.has-selection::after {
  background: var(--theme-accent);
}

html[data-theme] :where(.project-panel, .generation-path-guide, .prompt-assist-result, .output-settings-body, .workflow-editor, .project-create-form, .project-manage-panel) {
  border-color: var(--theme-border);
  background: var(--theme-panel);
  color: var(--theme-text);
}

html[data-theme] .project-manage-panel :where(header strong, label) {
  color: var(--theme-text);
}

html[data-theme] .project-manage-panel :where(header div > span, .project-manage-status) {
  color: var(--theme-text-muted);
}

html[data-theme] .project-manage-mark {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] .project-delete-button {
  border-color: color-mix(in srgb, var(--theme-danger) 40%, var(--theme-border));
  background: color-mix(in srgb, var(--theme-danger) 10%, var(--theme-panel));
  color: var(--theme-danger);
}

html[data-theme] .project-delete-button:hover:not(:disabled) {
  border-color: var(--theme-danger);
  background: color-mix(in srgb, var(--theme-danger) 16%, var(--theme-panel));
}

html[data-theme] :where(textarea, input, select) {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

html[data-theme] :where(textarea, input)::placeholder {
  color: var(--theme-text-subtle);
}

html[data-theme] :where(textarea, input, select):focus {
  border-color: var(--theme-accent);
  background: var(--theme-panel-raised);
  box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

html[data-theme] :where(.field > span, .field-label, .project-panel-header h2, .generation-path-title strong) {
  color: var(--theme-text);
}

html[data-theme] :where(.primary-button, .auth-submit, #generateButton, #iterateButton, .smart-project-dialog-submit) {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}

html[data-theme] :where(.primary-button, .auth-submit, #generateButton, #iterateButton, .smart-project-dialog-submit):hover:not(:disabled) {
  border-color: var(--theme-accent-hover);
  background: var(--theme-accent-hover);
}

html[data-theme] :where(.ghost-button, .toolbar-button, .section-toggle-button, .panel-toggle, .image-action-button, .image-export-button) {
  border-color: var(--theme-border);
  background: var(--theme-panel-raised);
  color: var(--theme-text-muted);
}

html[data-theme] :where(.ghost-button, .toolbar-button, .section-toggle-button, .image-action-button, .image-export-button):hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-soft);
  color: var(--theme-text);
}

html[data-theme] .iteration-reference-panel {
  border-color: var(--theme-border);
  background: var(--theme-panel-raised);
}

html[data-theme] .iteration-reference-header strong {
  color: var(--theme-text);
}

html[data-theme] .iteration-reference-header :where(strong span, small) {
  color: var(--theme-text-subtle);
}

html[data-theme] .iteration-reference-add {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
}

html[data-theme] .iteration-reference-add:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-accent-soft);
  color: var(--theme-text);
}

html[data-theme] .iteration-reference-item {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
}

/* Compact generation modules */
html[data-theme] .generation-module-list,
html[data-theme] .generation-module-list > .prompt-assist-panel,
html[data-theme] .generation-module-list > .control-disclosure,
html[data-theme] .generate-mode-panel > .usage-card {
  border-color: var(--theme-border) !important;
}

html[data-theme] .generation-module-list :where(.prompt-assist-toggle, .control-disclosure > summary),
html[data-theme] .generate-mode-panel > .usage-card > summary {
  color: var(--theme-text-muted);
}

html[data-theme] .generation-module-list :where(.prompt-assist-toggle:hover, .control-disclosure > summary:hover),
html[data-theme] .generate-mode-panel > .usage-card > summary:hover {
  background: var(--theme-panel-soft);
}

html[data-theme] .generation-module-list :where(.prompt-assist-panel.expanded .prompt-assist-toggle, .control-disclosure[open] > summary) {
  background: var(--theme-panel-soft);
  color: var(--theme-text);
}

html[data-theme] .generation-module-list :where(.disclosure-label, .prompt-assist-toggle > span:first-child),
html[data-theme] .generation-module-list :where(.prompt-assist-panel.expanded .prompt-assist-toggle > span:first-child, .control-disclosure[open] .disclosure-label) {
  color: var(--theme-text);
}

html[data-theme] .generation-module-list :where(.prompt-assist-toggle small, .control-disclosure > summary > strong, .disclosure-icon, .disclosure-chevron),
html[data-theme] .generate-mode-panel > .usage-card :where(.disclosure-label, .disclosure-icon, .disclosure-chevron),
html[data-theme] .generate-mode-panel > .usage-card > summary > strong {
  color: var(--theme-text-muted);
}

html[data-theme] .generation-module-list .reference-dropzone {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

/* Workspace and cards */
html[data-theme] :where(.search-box, .stage-folder-bar, .status-strip, .saved-library, .activity-log, .tile-actions, .tile-info) {
  border-color: var(--theme-border);
  background: var(--theme-panel);
  color: var(--theme-text);
}

html[data-theme] .main-stage.workspace-view-saved > .saved-library,
html[data-theme] .main-stage.workspace-view-log > .activity-log {
  border-color: var(--theme-border);
  background: var(--theme-panel);
  color: var(--theme-text);
}

html[data-theme] .search-box:focus-within {
  border-color: var(--theme-accent);
  background: var(--theme-panel-raised);
  box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

html[data-theme] :where(.image-tile, .loading-card, .saved-tile, .log-item) {
  border-color: var(--theme-border);
  background: var(--theme-panel);
  color: var(--theme-text);
}

html[data-theme] .image-tile:hover {
  border-color: var(--theme-border-strong);
  box-shadow: var(--theme-shadow);
}

html[data-theme] .image-tile.selected {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

html[data-theme] :where(.empty-state, .saved-empty, .log-empty) {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
}

html[data-theme] .empty-mark {
  background: var(--theme-panel-raised);
  box-shadow: inset 0 0 0 1px var(--theme-border);
}

html[data-theme] :where(.stage-folder-chip, .stage-filter-toggle) {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
}

html[data-theme] :where(.stage-folder-chip.active, .stage-filter-toggle.active, .toolbar-button.active) {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] :where(.panel-resizer, .section-resizer) {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
}

html[data-theme] :where(.panel-resizer::before, .section-resizer::before) {
  background: var(--theme-border-strong);
}

/* Planning, help and dialogs */
html[data-theme] .smart-project-hero.smart-project-trigger {
  border-color: var(--theme-border-strong);
  background: var(--theme-hero);
  color: var(--theme-hero-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme] .smart-project-hero.smart-project-trigger:hover,
html[data-theme] .smart-project-hero.smart-project-trigger[aria-expanded="true"] {
  border-color: var(--theme-accent);
  background: var(--theme-hero);
  box-shadow: var(--theme-shadow-lg);
}

html[data-theme] .smart-project-hero-copy strong { color: var(--theme-hero-text); }
html[data-theme] .smart-project-hero-copy :where(small, span) { color: var(--theme-hero-muted); }
html[data-theme] .smart-project-hero-action { color: var(--theme-accent); }

html[data-theme] :where(.smart-project-dialog-backdrop, .help-assistant-backdrop, .image-modal) {
  background: var(--theme-scrim);
}

html[data-theme] :where(.smart-project-form.smart-project-dialog, .help-assistant-panel) {
  border-color: var(--theme-border);
  background: var(--theme-panel);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-lg);
}

html[data-theme] :where(.smart-project-dialog-header, .smart-project-dialog-footer, .help-assistant-header, .help-assistant-footer) {
  border-color: var(--theme-border);
  background: var(--theme-panel);
}

html[data-theme] :where(.smart-project-dialog-header h3, .help-assistant-header h2, .help-assistant-answer h3) {
  color: var(--theme-text);
}

html[data-theme] :where(.smart-project-dialog-header p, .help-assistant-context p, .help-assistant-answer > p) {
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-flow-tabs {
  background: var(--theme-border);
}

html[data-theme] .smart-project-flow-tabs > button,
html[data-theme] .help-assistant-context,
html[data-theme] .help-assistant-answer {
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-flow-tabs > button:hover:not(:disabled),
html[data-theme] .smart-project-flow-tabs > button[aria-selected="true"] {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  box-shadow: inset 0 -3px var(--theme-accent);
}

html[data-theme] .smart-project-flow-tabs :where(span, strong) {
  color: var(--theme-accent);
}

html[data-theme] .smart-project-flow-tabs small {
  color: var(--theme-text-muted);
}

html[data-theme] .plan-mode-summary {
  border-color: var(--theme-border);
}

html[data-theme] .plan-mode-summary > div {
  border-color: var(--theme-border);
}

html[data-theme] .plan-mode-summary strong {
  color: var(--theme-accent);
}

html[data-theme] .plan-mode-summary span,
html[data-theme] .plan-mode-note {
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-dialog-body {
  background: var(--theme-panel);
  color: var(--theme-text);
}

html[data-theme] .smart-project-dialog label {
  color: var(--theme-text);
}

html[data-theme] .smart-project-dialog label > span {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] .smart-project-example-row > span {
  color: var(--theme-text-subtle);
}

html[data-theme] .smart-project-example-row button {
  border-color: var(--theme-border);
  background: var(--theme-panel-raised);
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-example-row button:hover {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] .smart-project-advanced {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
}

html[data-theme] .smart-project-advanced summary,
html[data-theme] .smart-project-dialog-footer > div:first-child > strong {
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-dialog #createSmartProjectButton {
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
}

html[data-theme] .smart-project-mode-bar {
  background: transparent;
}

html[data-theme] :where(.agent-reference-panel, .smart-project-mode-help, .smart-project-target-panel, .smart-project-agent-fields, .smart-project-mode-summary, .smart-project-interview-panel, .smart-project-custom-answer-row) {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
}

html[data-theme] .smart-project-mode-bar button {
  border-color: var(--theme-border);
  background: var(--theme-panel-raised);
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-mode-bar button:hover {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-text);
}

html[data-theme] .smart-project-mode-bar button.active {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

html[data-theme] .smart-project-mode-bar span,
html[data-theme] :where(.agent-reference-heading small, .agent-reference-heading strong span, .smart-project-mode-chooser > header p, .smart-project-mode-help, .smart-project-mode-summary small, .smart-project-agent-fields p, .smart-project-field-hint) {
  color: var(--theme-text-muted);
}

html[data-theme] :where(.smart-project-mode-chooser h4, .smart-project-mode-bar strong, .smart-project-mode-help strong, .smart-project-mode-summary strong) {
  color: var(--theme-text);
}

html[data-theme] :where(.smart-project-mode-chooser > header > span, .smart-project-mode-summary span) {
  color: var(--theme-accent);
}

html[data-theme] .smart-project-mode-bar .smart-project-mode-number {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] .smart-project-mode-bar b {
  border-color: var(--theme-border);
  color: var(--theme-accent);
}

html[data-theme] .smart-project-back-button {
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-back-button:hover {
  color: var(--theme-text);
}

html[data-theme] .smart-project-mode-summary button {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-raised);
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-target-fields label {
  color: var(--theme-text);
}

html[data-theme] .smart-project-target-fields label span,
html[data-theme] .smart-project-target-fields > small {
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-target-fields :where(select, input, textarea) {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

html[data-theme] :where(.smart-project-interview-eyebrow, .smart-project-interview-step, .smart-project-question-dialog > header span) {
  color: var(--theme-accent);
}

html[data-theme] .smart-project-interview-step,
html[data-theme] .smart-project-question-options button > span {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] :where(.smart-project-interview-panel strong, .smart-project-question-body h4, .smart-project-question-options button > strong) {
  color: var(--theme-text);
}

html[data-theme] :where(.smart-project-interview-panel p, .smart-project-interview-summary span, .smart-project-question-body > p, .smart-project-question-dialog > footer span, .smart-project-question-dialog > header strong) {
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-interview-summary {
  border-color: var(--theme-border);
}

html[data-theme] :where(.smart-project-interview-summary button, .smart-project-question-options button, .smart-project-question-dialog > header button, .smart-project-question-dialog > footer button) {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-raised);
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-question-dialog {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel);
}

html[data-theme] :where(.smart-project-question-dialog > header, .smart-project-question-dialog > footer) {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
}

html[data-theme] .smart-project-question-options button:hover,
html[data-theme] .smart-project-question-options button[aria-pressed="true"] {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
}

html[data-theme] .smart-project-custom-toggle {
  color: var(--theme-accent);
}

html[data-theme] .smart-project-custom-answer-row button {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}

html[data-theme] .agent-reference-heading strong,
html[data-theme] .agent-plan-task-content > header strong,
html[data-theme] .agent-plan-preview h4 {
  color: var(--theme-text);
}

html[data-theme] .smart-project-dialog .agent-reference-add,
html[data-theme] .agent-reference-item img,
html[data-theme] .agent-plan-preview > header > strong,
html[data-theme] .agent-plan-task {
  border-color: var(--theme-border);
  background: var(--theme-panel-raised);
  color: var(--theme-text-muted);
}

html[data-theme] .agent-plan-preview {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-soft);
}

html[data-theme] :where(.agent-plan-preview > header p, .agent-plan-empty, .agent-plan-task label > span, .agent-execution-progress) {
  color: var(--theme-text-muted);
}

html[data-theme] .agent-plan-empty {
  border-color: var(--theme-border-strong);
}

html[data-theme] .agent-plan-task-index,
html[data-theme] .agent-plan-task-meta span {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] .smart-project-dialog .agent-plan-task .agent-plan-quick-setting {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
}

html[data-theme] .smart-project-dialog .agent-plan-task .agent-plan-count-setting {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
}

html[data-theme] .agent-plan-creativity-setting legend {
  color: var(--theme-text);
}

html[data-theme] .agent-plan-creativity-setting legend span,
html[data-theme] .agent-plan-creativity-description,
html[data-theme] .agent-plan-creativity-options small {
  color: var(--theme-text-muted);
}

html[data-theme] .agent-plan-creativity-options {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
}

html[data-theme] .agent-plan-creativity-options button {
  color: var(--theme-text-muted);
}

html[data-theme] .agent-plan-creativity-options button:hover {
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

html[data-theme] .agent-plan-creativity-options button.active {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  box-shadow: var(--theme-shadow);
}

html[data-theme] .agent-plan-creativity-options button.active small {
  color: var(--theme-text-muted);
}

html[data-theme] .smart-project-dialog .agent-plan-task .agent-plan-quick-setting:hover,
html[data-theme] .smart-project-dialog .agent-plan-task .agent-plan-quick-setting:focus-within {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
}

html[data-theme] .smart-project-dialog .agent-plan-task .agent-plan-count-setting:hover,
html[data-theme] .smart-project-dialog .agent-plan-task .agent-plan-count-setting:focus-within {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
}

html[data-theme] .smart-project-dialog .agent-plan-task .agent-plan-quick-setting > span {
  color: var(--theme-text-muted);
}

html[data-theme] .agent-plan-count-setting > span {
  color: var(--theme-text-muted);
}

html[data-theme] .agent-plan-count-setting output {
  color: var(--theme-text);
}

html[data-theme] .smart-project-dialog .agent-plan-task .agent-plan-quick-setting select {
  color: var(--theme-text);
}

html[data-theme] .smart-project-dialog .agent-plan-task textarea {
  border-color: var(--theme-border);
  background: var(--theme-panel);
  color: var(--theme-text);
}

html[data-theme] .smart-project-dialog .agent-execute-button {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] :where(.smart-project-dialog-close, .help-assistant-header [data-help-close], .help-assistant-topic-grid button) {
  border-color: var(--theme-border);
  background: var(--theme-panel-raised);
  color: var(--theme-text-muted);
}

html[data-theme] .help-assistant-topic-grid :where(button.active, button:hover) {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

/* Authentication screen */
html[data-theme] .auth-screen {
  background: var(--theme-canvas);
}

html[data-theme] .auth-shell {
  border-color: var(--theme-border);
  background: var(--theme-panel);
  box-shadow: var(--theme-shadow-lg);
}

html[data-theme] .auth-showcase {
  background: var(--theme-hero);
  color: var(--theme-hero-text);
}

html[data-theme] .auth-showcase :where(h2, strong) { color: var(--theme-hero-text); }
html[data-theme] .auth-showcase :where(p, small, .auth-kicker) { color: var(--theme-hero-muted); }
html[data-theme] .auth-benefits li { border-color: var(--theme-border); background: color-mix(in srgb, var(--theme-panel) 62%, transparent); color: var(--theme-hero-text); }
html[data-theme] .auth-benefits svg { color: var(--theme-accent); }

html[data-theme] .auth-card {
  background: var(--theme-panel);
  color: var(--theme-text);
}

html[data-theme] .auth-card :where(h1, label > span) { color: var(--theme-text); }
html[data-theme] .auth-subtitle,
html[data-theme] .auth-privacy { color: var(--theme-text-muted); }

html[data-theme] .auth-privacy {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
}

html[data-theme] .auth-privacy svg {
  color: var(--theme-accent);
}

html[data-theme] .auth-tabs {
  background: var(--theme-panel-soft);
}

html[data-theme] .auth-tab {
  color: var(--theme-text-muted);
}

html[data-theme] .auth-tab.active {
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

/* Theme character stays gentle and outside the neutral image canvas. */
html[data-theme] :where(.auth-showcase-brand .auth-brand-mark, .auth-card-mobile-brand .auth-brand-mark) {
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}

html[data-theme] :where(.rail-logo, .rail-button.active) {
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-accent) 18%, transparent) !important;
}

html[data-theme] :where(#generateButton, #iterateButton, .auth-submit, .smart-project-dialog-submit) {
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent) 20%, transparent) !important;
}

html[data-theme] :where(.task-shell-header, .workspace-topbar) {
  background: color-mix(in srgb, var(--theme-panel) 94%, transparent);
  backdrop-filter: blur(16px);
}

/* High-specificity guards for legacy component rules. */
html[data-theme="obsidian"] .control-mode-button.active,
html[data-theme="obsidian"] .workspace-tab[aria-selected="true"],
html[data-theme="quantum"] .control-mode-button.active,
html[data-theme="quantum"] .workspace-tab[aria-selected="true"] {
  border-color: var(--theme-border) !important;
  background: var(--theme-panel-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="obsidian"] .control-mode-button:hover,
html[data-theme="obsidian"] .workspace-tab:hover,
html[data-theme="quantum"] .control-mode-button:hover,
html[data-theme="quantum"] .workspace-tab:hover {
  background: var(--theme-panel-soft) !important;
  color: var(--theme-text) !important;
}

html[data-theme="obsidian"] #promptInput,
html[data-theme="obsidian"] .control-panel textarea,
html[data-theme="obsidian"] .control-panel input,
html[data-theme="obsidian"] .control-panel select,
html[data-theme="obsidian"] .iteration-panel textarea,
html[data-theme="obsidian"] .iteration-panel input,
html[data-theme="obsidian"] .iteration-panel select,
html[data-theme="quantum"] #promptInput,
html[data-theme="quantum"] .control-panel textarea,
html[data-theme="quantum"] .control-panel input,
html[data-theme="quantum"] .control-panel select,
html[data-theme="quantum"] .iteration-panel textarea,
html[data-theme="quantum"] .iteration-panel input,
html[data-theme="quantum"] .iteration-panel select {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-panel-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none;
}

html[data-theme="obsidian"] #promptInput::placeholder,
html[data-theme="obsidian"] .control-panel :is(textarea, input)::placeholder,
html[data-theme="quantum"] #promptInput::placeholder,
html[data-theme="quantum"] .control-panel :is(textarea, input)::placeholder {
  color: var(--theme-text-subtle) !important;
  opacity: 1;
}

html[data-theme="obsidian"] .control-panel :is(.project-panel, .generation-module-list, .usage-card),
html[data-theme="quantum"] .control-panel :is(.project-panel, .generation-module-list, .usage-card) {
  border-color: var(--theme-border) !important;
}

html[data-theme="obsidian"] .control-panel :is(.project-panel h2, .field > span, .field-label, .manual-project-entry strong),
html[data-theme="quantum"] .control-panel :is(.project-panel h2, .field > span, .field-label, .manual-project-entry strong) {
  color: var(--theme-text) !important;
}

html[data-theme="obsidian"] .control-panel :is(.manual-project-entry, .project-panel-header p, .project-context-line, .mode-screen-intro p),
html[data-theme="quantum"] .control-panel :is(.manual-project-entry, .project-panel-header p, .project-context-line, .mode-screen-intro p) {
  color: var(--theme-text-muted) !important;
}

html[data-theme="obsidian"] #generateButton,
html[data-theme="obsidian"] #iterateButton {
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
}

html[data-theme="quantum"] #generateButton,
html[data-theme="quantum"] #iterateButton {
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent) !important;
  color: var(--theme-accent-contrast) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent) 20%, transparent) !important;
}

html[data-theme="obsidian"] :is(.generation-module-list, .usage-card) summary,
html[data-theme="obsidian"] .generation-module-list .prompt-assist-toggle,
html[data-theme="quantum"] :is(.generation-module-list, .usage-card) summary,
html[data-theme="quantum"] .generation-module-list .prompt-assist-toggle {
  border-color: var(--theme-border) !important;
  color: var(--theme-text-muted) !important;
}

html[data-theme="obsidian"] .generation-module-list :is(.disclosure-label, .prompt-assist-toggle > span:first-child),
html[data-theme="quantum"] .generation-module-list :is(.disclosure-label, .prompt-assist-toggle > span:first-child) {
  color: var(--theme-text) !important;
}

html[data-theme="obsidian"] .generation-module-list .control-disclosure[open] > summary,
html[data-theme="obsidian"] .generation-module-list .prompt-assist-panel.expanded .prompt-assist-toggle,
html[data-theme="quantum"] .generation-module-list .control-disclosure[open] > summary,
html[data-theme="quantum"] .generation-module-list .prompt-assist-panel.expanded .prompt-assist-toggle {
  border-color: var(--theme-border) !important;
  background: var(--theme-panel-soft) !important;
  color: var(--theme-text) !important;
}

html[data-theme="obsidian"] :is(.workspace-topbar, .workspace-tabs, .workspace-tab),
html[data-theme="quantum"] :is(.workspace-topbar, .workspace-tabs, .workspace-tab) {
  border-color: var(--theme-border) !important;
}

@media (max-width: 430px) {
  .theme-menu {
    right: 0;
    width: min(250px, calc(100vw - 28px));
  }

  .theme-menu-button {
    grid-template-columns: 22px auto 10px;
    width: auto;
    min-width: 72px;
    padding: 0 6px;
  }
}

@media (max-width: 520px) {
  .auth-theme-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html[data-theme="orchid"] :where(.toolbar-button, .section-toggle-button, .search-box, .status-strip div) {
  border-color: var(--theme-border) !important;
  background: var(--theme-panel) !important;
  color: var(--theme-text-muted) !important;
}

html[data-theme="orchid"] :where(.control-mode-button.active, .workspace-tab[aria-selected="true"], textarea, input, select) {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-panel-raised) !important;
  color: var(--theme-text) !important;
}

html[data-theme="orchid"] :where(textarea, input)::placeholder {
  color: var(--theme-text-subtle) !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .theme-menu-button svg,
  html[data-theme] * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Minimal header theme mapping. The brand mark is informational, never a large button. */
html[data-theme] .rail .rail-logo {
  border: 0 !important;
  background: transparent !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme] .rail-brand-icon {
  border-color: var(--theme-border);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

html[data-theme] .rail-brand-copy small {
  color: var(--theme-text-muted);
}

html[data-theme] .rail-avatar {
  border-color: var(--theme-border);
  background: transparent;
  color: var(--theme-text-muted);
  box-shadow: none;
}

html[data-theme] .rail-avatar:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-soft);
  color: var(--theme-text);
}