/* Only the editor shell changes. Screenshot themes keep their own colors. */
:root { --ui-text:#293025; --ui-muted:#718061; --ui-border:#dfe4d5; --ui-panel:#fff; }
.interface-theme-toggle { border:1px solid var(--ui-border); background:var(--ui-panel); color:var(--ui-text); border-radius:7px; padding:9px 12px; font:550 12px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer; white-space:nowrap; }
.interface-theme-toggle:hover { background:#eef4df; }
.interface-theme-toggle:focus-visible { outline:2px solid #8ead59; outline-offset:3px; }
.top-actions { flex-wrap:wrap; align-items:center; }
.top:has(.interface-theme-toggle) { height:auto; min-height:76px; padding-top:12px; padding-bottom:12px; }
header:not(.top) nav .interface-theme-toggle { margin-left:12px; }
html[data-interface-theme=dark] {
  color-scheme:dark;
  --ui-text:#e9eff9; --ui-muted:#99a9c2; --ui-border:#1a2539;
  --ui-panel:#080e19; --ui-bg:#03060d; --ui-soft:#0c1524;
  --ui-field:#050a13; --ui-hover:#111d30; --ui-selected:#101f34; --ui-accent:#79a3e3;
  color:var(--ui-text); background:var(--ui-bg);
}
html[data-interface-theme=dark] :is(.top,.sidebar,.inspector,.photo-picker,.saved-profiles,.export-options,.mention-picker,.capture-workspace aside,.plan) {
  background:var(--ui-panel); color:var(--ui-text); border-color:var(--ui-border);
}
html[data-interface-theme=dark] .workspace { background:var(--ui-bg); }
html[data-interface-theme=dark] :is(.sidebar,.inspector,.photo-picker,.saved-profiles,.export-options,.mention-picker,.capture-workspace aside) :is(button,input,textarea,select),
html[data-interface-theme=dark] .top-actions :is(button,a),
html[data-interface-theme=dark] .capture-workspace button,
html[data-interface-theme=dark] header nav button,
html[data-interface-theme=dark] .interface-theme-toggle {
  background:var(--ui-field); color:var(--ui-text); border-color:var(--ui-border);
}
html[data-interface-theme=dark] :is(.sidebar,.inspector,.photo-picker,.saved-profiles,.export-options,.mention-picker,.capture-workspace) button:hover,
html[data-interface-theme=dark] .top-actions button:hover,
html[data-interface-theme=dark] .interface-theme-toggle:hover { background:var(--ui-hover); }
html[data-interface-theme=dark] :is(.template-badge,.message-card,.pixelation-controls,.inspector-note,.email-image-card,.date-controls,.word-pixelation-item,.saved-library-intro,.saved-card,.saved-empty,.photo-picker-categories) {
  background:var(--ui-soft); border-color:var(--ui-border); color:var(--ui-text);
}
html[data-interface-theme=dark] :is(.message-card.selected,.photo-picker-grid>button[aria-pressed=true],.mention-picker button[aria-selected=true]) { background:var(--ui-selected); border-color:#335581; }
html[data-interface-theme=dark] :is(.tabs,.paste,.sidebar-foot,.person,.photo-picker-footer,.saved-card,.pixelation-option+.pixelation-option,footer) { border-color:var(--ui-border); }
html[data-interface-theme=dark] :is(.local,.brand em,.eyebrow,.section-label,.help,.paste p,.paste,.sidebar-foot,.sidebar-foot small,.preview-label,.canvas-caption,.template-badge small,.message-card small,.message-card .number,.person small,label,.pixelation-help,.pixelation-controls legend,.pixelation-strength label,.pixelation-strength output,.pixelation-strength span,.photo-picker-description,.photo-picker-status,.photo-picker-source a,.saved-intro,.saved-help,.saved-summary span,.saved-empty p,.saved-status,.saved-fields label,.saved-library-intro p,.mention-picker-title,#word-pixelation-value,.inspector-note b,.email-images-heading) { color:var(--ui-muted); }
html[data-interface-theme=dark] :is(.tabs button.active,.add) { color:var(--ui-accent); }
html[data-interface-theme=dark] :is(.sidebar,.inspector,.photo-picker,.saved-profiles) input:focus,
html[data-interface-theme=dark] :is(.sidebar,.inspector,.photo-picker,.saved-profiles) textarea:focus,
html[data-interface-theme=dark] :is(.sidebar,.inspector,.photo-picker,.saved-profiles) select:focus { border-color:var(--ui-accent); box-shadow:0 0 0 2px #82b1ff22; }
html[data-interface-theme=dark] :is(.top-actions,.sidebar,.inspector,.photo-picker,.saved-profiles) .primary,
html[data-interface-theme=dark] :is(#apply,#export,#add-area[aria-pressed=true],.plan button,.billing button) { background:#244b84; color:#fff; border-color:#3c649b; }
html[data-interface-theme=dark] :is(.top-actions,.sidebar,.inspector,.photo-picker,.saved-profiles) .danger,
html[data-interface-theme=dark] .saved-remove { color:#f2a99b; }
html[data-interface-theme=dark] :is(.photo-picker,.saved-profiles)::backdrop { background:#0009; }
html[data-interface-theme=dark] #toast { background:#101f34; color:var(--ui-text); }
html[data-interface-theme=dark] #font-warning { background:#352b18; border-color:#6b5530; color:#edcf92; }
/* Public/account pages share the preference without altering sample artwork. */
html[data-interface-theme=dark] :is(.lead,.free-note,.agreement,.features,.policy p,.policy li,.launch-badge,.stage-note) { color:var(--ui-muted); }
/* App chrome must not recolor the footer inside a screenshot template. */
html[data-interface-theme=dark] footer:not(.li-chat footer) { color:var(--ui-muted); }
html[data-interface-theme=dark] .launch-badge { border-color:var(--ui-border); }
html[data-interface-theme=dark] #auth-message { background:var(--ui-soft); }
html[data-interface-theme=dark] :is(.example,.export-chip) { color:#273022; color-scheme:light; }
html[data-interface-theme=dark] .interface-theme-toggle { margin:0; }
@media(max-width:800px) { .top:has(.interface-theme-toggle) { padding:10px; } }

html[data-interface-theme=dark] .tabs button.active { border-bottom-color:var(--ui-accent); }
html[data-interface-theme=dark] :is(.sidebar,.inspector,.photo-picker,.saved-profiles) :is(input[type=checkbox],input[type=range]) { accent-color:#6793d5; }
html[data-interface-theme=dark] :is(.interface-theme-toggle,.photo-picker button,.wa-theme-choice):focus-visible { outline-color:var(--ui-accent); }
html[data-interface-theme=dark] .wa-theme-choice[aria-pressed=true] { border-color:var(--ui-accent); background:#82b1ff0b; }
html[data-interface-theme=dark] .local i { background:#82b1ff; }
html[data-interface-theme=dark] .plan:nth-child(2) { border-color:#3c649b; }
html[data-interface-theme=dark] :is(.intro h1 span,.features span:before) { color:var(--ui-accent); }
html[data-interface-theme=dark] .stage { background:var(--ui-bg); }
html[data-interface-theme=dark] #preview { filter:drop-shadow(0 16px 24px #0006); }

html[data-interface-theme=dark] .brand b { background:#d7fa64; color:#293025; border-color:#bdd95d; }