/* ============================================================
   PixelForge Shared Theme System — Light / Dark mode
   Loaded on all inner pages alongside ps-user-header.css
   ============================================================ */

/* === Theme Toggle Button === */
.ps-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--ps-border, #ded9d1);
  border-radius: 999px;
  background: transparent;
  color: var(--ps-muted, #766f66);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ps-theme-toggle:hover {
  border-color: var(--ps-accent, #c9633f);
  color: var(--ps-accent, #c9633f);
  background: rgba(201, 99, 63, .06);
}
.ps-theme-toggle { overflow: hidden; flex-wrap: nowrap; }
.ps-theme-toggle svg { display: block; flex: 0 0 auto; }
/* 默认月亮；缺 html.light 时不能两个都显示 */
.ps-theme-toggle .ps-theme-icon-sun { display: none; }
.ps-theme-toggle .ps-theme-icon-moon { display: block; }
html.dark .ps-theme-toggle .ps-theme-icon-sun { display: block; }
html.dark .ps-theme-toggle .ps-theme-icon-moon { display: none; }

/* === Aspect picker（场景动画 / 等距房间等通用） === */
.ps-aspect-wrap,
.sa-aspect-wrap { position: relative; flex: 0 0 auto; }
/* 与左侧参考图 / 附件按钮拉开间距，避免贴死 */
.ps-prompt-left > .ps-aspect-wrap,
.ps-prompt-left > .sa-aspect-wrap,
.ps-prompt-toolbar > .ps-aspect-wrap,
.ps-prompt-toolbar > .sa-aspect-wrap {
  margin-left: 14px;
}
.ps-aspect-trigger,
.sa-aspect-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-width: 220px;
  padding: 7px 12px 7px 14px;
  border: 1px solid #e6dfd6;
  border-radius: 999px;
  background: #fff;
  color: #3f3832;
  font: 600 13px inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(52, 39, 26, .04);
}
.ps-aspect-trigger:hover,
.sa-aspect-trigger:hover {
  border-color: #d8c4b4;
  background: #fff7f1;
}
.ps-aspect-trigger .ps-aspect-label,
.sa-aspect-trigger #aspectTriggerLabel,
.sa-aspect-trigger .ps-aspect-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-aspect-trigger .ps-aspect-caret,
.ps-aspect-trigger .sa-caret,
.sa-aspect-trigger .sa-caret {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f1ebe4;
  color: #5b544d;
  font-size: 14px;
  line-height: 1;
}
.ps-aspect-popover,
.sa-aspect-popover {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 200px;
  padding: 8px;
  border: 1px solid #ebe4db;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(52, 39, 26, .12);
  z-index: 20;
}
.ps-aspect-popover.open,
.sa-aspect-popover.open { display: block; }
.ps-aspect-popover button,
.sa-aspect-popover button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3f3832;
  font: 600 13px inherit;
  cursor: pointer;
  text-align: left;
}
.ps-aspect-popover button:hover,
.sa-aspect-popover button:hover { background: #fff7f1; }
.ps-aspect-popover button.selected,
.sa-aspect-popover button.selected {
  background: #fff6f1;
  color: var(--accent, var(--ps-accent, #c9633f));
}
.ps-aspect-popover button .ps-aspect-check,
.ps-aspect-popover button .sa-check,
.sa-aspect-popover button .sa-check {
  opacity: 0;
  color: var(--accent, var(--ps-accent, #c9633f));
}
.ps-aspect-popover button.selected .ps-aspect-check,
.ps-aspect-popover button.selected .sa-check,
.sa-aspect-popover button.selected .sa-check { opacity: 1; }

/* === Topbar (shared .ps-topbar across all pages) === */
html.dark .ps-topbar {
  background: #1a1d27 !important;
  border-bottom-color: #2a2e3a !important;
}
html.dark .ps-brand { color: #f7f7f5 !important; }
html.dark .ps-back {
  background: #1a1d27 !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .ps-back:hover {
  border-color: #ff9f43 !important;
  color: #ff9f43 !important;
  background: #1e212b !important;
}

/* === Credits button (from ps-user-header) === */
html.dark .ps-credits-btn {
  background: transparent;
  border-color: #2a2e3a;
  color: #f7f7f5;
}
html.dark .ps-credits-btn .ps-token-icon,
html.dark .ps-credits-btn b { color: #ff9f43; }
html.dark .ps-gallery-btn {
  border-color: #2a2e3a;
  color: #f7f7f5;
}
html.dark .ps-gallery-btn svg { color: #a7adb8; }
html.dark .ps-register-btn { background: #ff9f43; color: #1a0f05; }

/* === Shared stepper / steps (multiple naming schemes) === */
html.dark .ps-stepper,
html.dark .sa-stepper,
html.dark .steps {
  background: #1a1d27 !important;
  border-bottom-color: #2a2e3a !important;
}
html.dark .ps-step,
html.dark .sa-step,
html.dark .step {
  color: #6b7280 !important;
}
html.dark .ps-step-dot,
html.dark .sa-step-dot,
html.dark .step i {
  background: #2a2e3a !important;
  color: #6b7280 !important;
}
html.dark .ps-step.active,
html.dark .ps-step.done,
html.dark .sa-step.active,
html.dark .sa-step.done,
html.dark .step.active,
html.dark .step.done {
  color: #f7f7f5 !important;
}
html.dark .ps-step.active .ps-step-dot,
html.dark .ps-step.done .ps-step-dot,
html.dark .sa-step.active .sa-step-dot,
html.dark .sa-step.done .sa-step-dot,
html.dark .step.active i,
html.dark .step.done i {
  background: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .ps-step:not(:last-child)::after,
html.dark .sa-step:not(:last-child)::after {
  background: #2a2e3a !important;
}
html.dark .ps-step.done:not(:last-child)::after,
html.dark .sa-step.done:not(:last-child)::after {
  background: #d68a4a !important;
}

/* === Shared card backgrounds === */
html.dark .ps-card,
html.dark .sa-card,
html.dark .card {
  background: #151821 !important;
  border-color: #2a2e3a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important;
}

/* === Shared titles & descriptions === */
html.dark .ps-title,
html.dark .sa-card h1,
html.dark h1 {
  color: #f7f7f5 !important;
}
html.dark .ps-desc,
html.dark .sa-desc,
html.dark .lead {
  color: #a7adb8 !important;
}

/* === Shared form elements === */
html.dark .ps-textarea,
html.dark .sa-textarea,
html.dark textarea {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #f7f7f5 !important;
}
html.dark .ps-textarea:focus,
html.dark .sa-textarea:focus,
html.dark textarea:focus {
  border-color: #ff9f43 !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 67, .1) !important;
}
html.dark .ps-textarea::placeholder,
html.dark .sa-textarea::placeholder,
html.dark textarea::placeholder {
  color: #6b7280 !important;
}

/* === Shared upload areas === */
html.dark .ps-upload,
html.dark .sa-upload {
  background: #1e212b !important;
  border-color: #3a3e4a !important;
  color: #6b7280 !important;
}
html.dark .ps-upload:hover,
html.dark .sa-upload:hover {
  border-color: #ff9f43 !important;
  background: #252830 !important;
}
html.dark .ps-upload strong,
html.dark .sa-upload strong {
  color: #f7f7f5 !important;
}

/* === Shared buttons (non-primary) === */
html.dark .ps-btn,
html.dark .sa-btn,
html.dark .btn {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .ps-btn:hover,
html.dark .sa-btn:hover,
html.dark .btn:hover {
  border-color: #3a3e4a !important;
}

/* === Primary buttons — keep accent, adjust for dark === */
html.dark .ps-btn.primary,
html.dark .sa-btn.primary,
html.dark .btn.primary {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .ps-btn.primary:hover,
html.dark .sa-btn.primary:hover,
html.dark .btn.primary:hover {
  background: #e88f3a !important;
}

/* === Shared labels === */
html.dark .ps-label,
html.dark .sa-label,
html.dark .label {
  color: #f7f7f5 !important;
}

/* === Shared image stages (checkerboard backgrounds) === */
html.dark .ps-image-stage,
html.dark .sa-sheet-stage,
html.dark .sa-preview-stage,
html.dark .sa-selected-preview,
html.dark .ps-result-frame,
html.dark .fx-frame-stage,
html.dark .sa-stage {
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/16px 16px !important;
  border-color: #2a2e3a !important;
}

/* === Shared tabs === */
html.dark .ps-tabs {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
}
html.dark .ps-tab,
html.dark .tab {
  background: transparent !important;
  border-color: transparent !important;
  color: #a7adb8 !important;
}
html.dark .ps-tab:hover {
  color: #f7f7f5 !important;
}
html.dark .ps-tab.active,
html.dark .ps-tab:has(input:checked),
html.dark .tab.active {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25) !important;
}

/* === Action cards === */
html.dark .ps-action-card {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .ps-action-card:hover {
  border-color: #3a3e4a !important;
}
html.dark .ps-action-card.active {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .ps-action-card b { color: #f7f7f5 !important; }
html.dark .ps-action-card small { color: #6b7280 !important; }

/* === Direction buttons === */
html.dark .ps-direction {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .ps-direction.active {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .1) !important;
  color: #ff9f43 !important;
}

/* === Model options === */
html.dark .ps-model-option {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
}
html.dark .ps-model-option b { color: #f7f7f5 !important; }
html.dark .ps-model-option small { color: #6b7280 !important; }
html.dark .ps-model-option:has(input:checked) {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}

/* === Progress / status === */
html.dark .ps-progress-line { background: #2a2e3a !important; }
html.dark .ps-status { color: #6b7280 !important; }
html.dark .ps-status.active { color: #ff9f43 !important; }
html.dark .ps-result-pending,
html.dark .ps-result-failed {
  background: #151821 !important;
  border-color: #2a2e3a !important;
}
html.dark .ps-frame-align { border-top-color: #2a2e3a !important; }
html.dark .ps-align-select {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #f7f7f5 !important;
}

/* === Result grids === */
html.dark .ps-result-grid {
  background: #1a1d27 !important;
  border-color: #2a2e3a !important;
}

/* === Notices / chips === */
html.dark .sa-chip,
html.dark .sa-note,
html.dark .notice {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}

/* === Effect grid === */
html.dark .sa-effect {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
}
html.dark .sa-effect.active {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .sa-effect b { color: #f7f7f5 !important; }
html.dark .sa-effect small { color: #6b7280 !important; }
html.dark .sa-effect-current {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}

/* === Selection overlay === */
html.dark .sa-selection {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .12) !important;
}
html.dark .sa-selection::after,
html.dark .sa-overlay-box::after {
  background: #ff9f43 !important;
}
html.dark .sa-overlay-box {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .sa-overlay-handle,
html.dark .sa-selection-handle {
  background: #ff9f43 !important;
  border-color: #fff !important;
}
html.dark .sa-preview-fs {
  background: rgba(26, 29, 39, .92) !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .sa-fs-modal { background: rgba(11, 12, 16, .85) !important; }
html.dark .sa-fs-dialog {
  background: #151821 !important;
  border-color: #2a2e3a !important;
}
html.dark .sa-fs-head { border-bottom-color: #2a2e3a !important; }
html.dark .sa-fs-head strong { color: #f7f7f5 !important; }
html.dark .sa-fs-close { color: #6b7280 !important; }
html.dark .sa-fs-close:hover { background: #1e212b !important; color: #f7f7f5 !important; }
html.dark .sa-fs-stage {
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/18px 18px !important;
}

/* === Frame cells (shared between animation/effects/scene-animation) === */
html.dark .fx-frame-cell {
  background: #1e212b !important;
  border-color: #3a3e4a !important;
}
html.dark .fx-frame-cell.is-disabled { opacity: .35 !important; }
html.dark .fx-frame-stage {
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/10px 10px !important;
}
html.dark .fx-frame-badge { background: rgba(107, 114, 128, .9) !important; }
html.dark .fx-frame-hide {
  background: rgba(30, 33, 43, .95) !important;
  border-color: #3a3e4a !important;
  color: #a7adb8 !important;
}
html.dark .fx-frame-duration {
  background: rgba(30, 33, 43, .95) !important;
  border-top-color: #2a2e3a !important;
}
html.dark .fx-frame-duration-btn,
html.dark .fx-frame-duration-input { color: #a7adb8 !important; }
html.dark .fx-frame-duration-input {
  border-color: rgba(255, 159, 67, .45) !important;
  color: #f7f7f5 !important;
}

/* === Speed slider === */
html.dark .sa-speed { color: #a7adb8 !important; }
html.dark .sa-speed b { color: #f7f7f5 !important; }
html.dark .sa-speed input[type=range] { accent-color: #ff9f43 !important; }

/* === Body background fallback === */
html.dark body {
  background: #0b0c10 !important;
  color: #f7f7f5 !important;
}

/* === Gallery panel override === */
html.dark .ps-credits-btn:disabled { opacity: .4; }

/* === Section borders === */
html.dark .ps-section,
html.dark .ps-direction-block,
html.dark .ps-action-custom-row,
html.dark .ps-config-side.right-side,
html.dark .fx-section,
html.dark .pp-section,
html.dark .ps-form-section,
html.dark .scene-section,
html.dark .scene-kit {
  border-top-color: #2a2e3a !important;
  border-left-color: #2a2e3a !important;
}

/* ============================================================
   CSS VARIABLE OVERRIDES — override inline :root definitions
   html.dark has higher specificity than :root
   ============================================================ */
html.dark {
  --ps-bg: #0b0c10 !important;
  --ps-card: #151821 !important;
  --ps-accent: #ff9f43 !important;
  --ps-accent-hover: #e88f3a !important;
  --ps-text: #f7f7f5 !important;
  --ps-muted: #a7adb8 !important;
  --ps-border: #2a2e3a !important;
  --ps-soft: rgba(255, 159, 67, .08) !important;
  --ps-surface: #1e212b !important;
  --ps-accent-light: rgba(255, 159, 67, .1) !important;
  --fx: #ff9f43 !important;
  --fx-dark: #e88f3a !important;
  --text: #f7f7f5 !important;
  --muted: #a7adb8 !important;
  --border: #2a2e3a !important;
  --accent: #ff9f43 !important;
  --ink: #f7f7f5 !important;
  --line: #2a2e3a !important;
  --paper: #151821 !important;
  --bg: #0b0c10 !important;
}

/* ============================================================
   EFFECTS PAGE (fx- prefix)
   ============================================================ */
html.dark .fx-topbar,
html.dark .fx-stepper {
  background: #1a1d27 !important;
  border-bottom-color: #2a2e3a !important;
}
html.dark .fx-back { color: #a7adb8 !important; }
html.dark .fx-brand { color: #f7f7f5 !important; }
html.dark .fx-step { color: #6b7280 !important; }
html.dark .fx-step::after { background: #2a2e3a !important; }
html.dark .fx-step-dot {
  background: #2a2e3a !important;
  color: #6b7280 !important;
}
html.dark .fx-step.active,
html.dark .fx-step.done { color: #f7f7f5 !important; }
html.dark .fx-step.active .fx-step-dot,
html.dark .fx-step.done .fx-step-dot {
  background: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .fx-step.done:not(:last-child)::after { background: #d68a4a !important; }
html.dark .fx-card {
  background: #151821 !important;
  border-color: #2a2e3a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important;
}
html.dark .fx-card h1 { color: #f7f7f5 !important; }
html.dark .fx-desc { color: #a7adb8 !important; }
html.dark .fx-label { color: #f7f7f5 !important; }
html.dark .fx-type,
html.dark .fx-frame-opt {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
}
html.dark .fx-type.active,
html.dark .fx-frame-opt.active {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .fx-type small,
html.dark .fx-frame-opt small { color: #6b7280 !important; }
html.dark .fx-prompt-box {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .fx-prompt-box:focus-within {
  border-color: #ff9f43 !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 67, .1) !important;
}
html.dark .fx-attach {
  border-color: #3a3e4a !important;
  background: rgba(30, 33, 43, .8) !important;
  color: #6b7280 !important;
}
html.dark .fx-attach:hover { background: #252830 !important; }
html.dark .fx-attach-thumb {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .fx-note,
html.dark .fx-chip {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .fx-btn {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .fx-btn.primary {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .fx-result-pane {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .fx-result-pane h2 { color: #f7f7f5 !important; }
html.dark .fx-pane-meta { color: #a7adb8 !important; }
html.dark .fx-sheet-stage,
html.dark .fx-preview-stage {
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/16px 16px !important;
  border-color: #2a2e3a !important;
}
html.dark .fx-speed { color: #a7adb8 !important; }
html.dark .fx-speed b { color: #f7f7f5 !important; }
html.dark .fx-speed input[type=range] { accent-color: #ff9f43 !important; }

/* ============================================================
   SCENE PAGE (scene-, room-, ss- prefix)
   ============================================================ */
html.dark .scene-topbar,
html.dark .scene-stepper {
  background: #1a1d27 !important;
  border-bottom-color: #2a2e3a !important;
}
html.dark .scene-back { color: #a7adb8 !important; }
html.dark .scene-brand { color: #f7f7f5 !important; }
html.dark .scene-step { color: #6b7280 !important; }
html.dark .scene-step::after { background: #2a2e3a !important; }
html.dark .scene-step-dot {
  background: #2a2e3a !important;
  color: #6b7280 !important;
}
html.dark .scene-step.active,
html.dark .scene-step.done { color: #f7f7f5 !important; }
html.dark .scene-step.active .scene-step-dot,
html.dark .scene-step.done .scene-step-dot {
  background: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .scene-card {
  background: #151821 !important;
  border-color: #2a2e3a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important;
}
html.dark .scene-card h1,
html.dark .scene-card h2 { color: #f7f7f5 !important; }
html.dark .scene-desc,
html.dark .scene-help,
html.dark .scene-kit p { color: #a7adb8 !important; }
html.dark .scene-shape,
html.dark .scene-template,
html.dark .scene-asset-card {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
}
html.dark .scene-shape:hover,
html.dark .scene-template:hover { border-color: #3a3e4a !important; }
html.dark .scene-shape.active,
html.dark .scene-template.active {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .scene-shape-preview { background: #151821 !important; }
html.dark .scene-shape-copy small,
html.dark .scene-template small,
html.dark .scene-asset-card p { color: #6b7280 !important; }
html.dark .scene-check {
  border-color: #3a3e4a !important;
  background: #1e212b !important;
}
html.dark .scene-shape.active .scene-check {
  color: #fff !important;
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
}
html.dark .scene-textarea,
html.dark .scene-option {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #f7f7f5 !important;
}
html.dark .scene-option:has(input:checked) {
  color: #ff9f43 !important;
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .scene-upload {
  border-color: #3a3e4a !important;
  background: #1e212b !important;
  color: #6b7280 !important;
}
html.dark .scene-upload:hover {
  border-color: #ff9f43 !important;
  background: #252830 !important;
}
html.dark .scene-upload small,
html.dark .scene-upload-preview { color: #6b7280 !important; }
html.dark .scene-summary,
html.dark .scene-category,
html.dark .scene-notice,
html.dark .scene-deliverable,
html.dark .scene-flow-step,
html.dark .scene-config-note {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .scene-summary b,
html.dark .scene-category b,
html.dark .scene-deliverable b,
html.dark .scene-flow-step b { color: #f7f7f5 !important; }
html.dark .scene-category a,
html.dark .scene-remove { color: #ff9f43 !important; }
html.dark .scene-btn {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .scene-btn.primary {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .scene-progress-line { background: #2a2e3a !important; }
html.dark .scene-status { color: #6b7280 !important; }
html.dark .scene-status .active,
html.dark .scene-status .done { color: #a7adb8 !important; }
html.dark .scene-status div::before { background: #2a2e3a !important; }
html.dark .scene-status .done::before {
  background: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .scene-result-image {
  border-color: #2a2e3a !important;
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/14px 14px !important;
}
html.dark .scene-meta {
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .scene-meta b { color: #f7f7f5 !important; }
html.dark .scene-kit-card,
html.dark .scene-asset-card button,
html.dark .scene-kit-card button {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .scene-flow-no {
  background: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .scene-attach-button {
  color: #6b7280 !important;
}
html.dark .scene-attach-button:hover {
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .scene-template.with-preview img { background: #151821 !important; }

/* room- prefix (isometric room in scene.html) */
html.dark .room-socket-board {
  background: #151821 !important;
  border-color: #2a2e3a !important;
}
html.dark .room-center {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .room-socket {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #6b7280 !important;
}
html.dark .room-socket.open {
  border-color: #ff9f43 !important;
  background: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .room-purpose {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .room-purpose:has(input:checked) {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .room-custom input {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #f7f7f5 !important;
}
html.dark .room-socket-legend,
html.dark .room-config-note p { color: #a7adb8 !important; }
html.dark .room-config-note b { color: #f7f7f5 !important; }

/* ss- prefix (side-scroll chunks in scene.html) */
html.dark .ss-chunks-title { color: #f7f7f5 !important; }
html.dark .ss-chunk-block {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important;
}
html.dark .ss-chunk-header {
  background: linear-gradient(135deg, #1a1d27 0%, #151821 100%) !important;
  border-bottom-color: #2a2e3a !important;
}
html.dark .ss-chunk-header b { color: #f7f7f5 !important; }
html.dark .ss-chunk-header small { color: #6b7280 !important; }
html.dark .ss-comp-section { background: #151821 !important; }
html.dark .ss-comp-title { color: #a7adb8 !important; }
html.dark .ss-comp-item {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
}
html.dark .ss-comp-item small { color: #6b7280 !important; }
html.dark .ss-chunk-item {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .ss-chunk-item b { color: #f7f7f5 !important; }
html.dark .ss-chunk-item small { color: #6b7280 !important; }

/* ============================================================
   DUNGEON ROOMS PAGE (dr- prefix)
   ============================================================ */
html.dark .dr-top {
  background: #1a1d27 !important;
  border-bottom-color: #2a2e3a !important;
}
html.dark .dr-top a { color: #a7adb8 !important; }
html.dark .dr-brand { color: #f7f7f5 !important; }
html.dark .dr-card {
  background: #151821 !important;
  border-color: #2a2e3a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important;
}
html.dark .dr-card h2 { color: #f7f7f5 !important; }
html.dark .dr-room-item {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .dr-room-item.active {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .dr-room-item b { color: #f7f7f5 !important; }
html.dark .dr-room-item .dr-room-state {
  color: #c5c9d1 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
html.dark .dr-room-item .dr-room-state.is-done { color: #ff9f43 !important; }
html.dark .dr-room-item small,
html.dark .dr-help { color: #a7adb8 !important; }
html.dark .dr-legend { color: #a7adb8 !important; }
html.dark .dr-room-item img { background: #151821 !important; }
html.dark .dr-form-col .ps-prompt-box {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .dr-form-col .ps-textarea { color: #f7f7f5 !important; }
html.dark .dr-form-col .ps-textarea::placeholder { color: #6b7280 !important; }
html.dark .dr-form-col .ps-attach-button {
  border-color: #3a3e4a !important;
  background: rgba(30, 33, 43, .8) !important;
  color: #6b7280 !important;
}
html.dark .dr-form-col .ps-attach-thumb {
  border-color: #3a3e4a !important;
  background: #151821 !important;
}
html.dark .dr-opt-chip {
  border-color: #3a3e4a !important;
  background: #1e212b !important;
  color: #d7dde8 !important;
}
html.dark .dr-opt-chip:has(input:checked) {
  border-color: #ff9f43 !important;
  background: #2a221c !important;
  color: #ff9f43 !important;
  box-shadow: inset 0 0 0 1px rgba(255,159,67,.75) !important;
}
html.dark .dr-dd-trigger {
  border-color: #3a3e4a !important;
  background: rgba(30,33,43,.88) !important;
  color: #d7dde8 !important;
}
html.dark .dr-dd-trigger:hover,
html.dark .dr-dd-trigger[aria-expanded="true"] {
  border-color: #ff9f43 !important;
  background: #2a221c !important;
  color: #ff9f43 !important;
}
html.dark .dr-dd-menu {
  border-color: #3a3e4a !important;
  background: #1e212b !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
}
html.dark .dr-dd-item { color: #d7dde8 !important; }
html.dark .dr-dd-item:hover { background: #252830 !important; }
html.dark .dr-dd-item.is-selected {
  background: #2a221c !important;
  color: #ff9f43 !important;
}
html.dark .dr-tool {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #c5c9d1 !important;
}
html.dark .dr-tool:hover {
  border-color: #3a3e4a !important;
  color: #f7f7f5 !important;
}
html.dark .dr-tool.active {
  background: rgba(255, 159, 67, .12) !important;
  border-color: #ff9f43 !important;
  color: #f7f7f5 !important;
  box-shadow: inset 0 0 0 1px #ff9f43 !important;
}
html.dark .dr-tool .dr-chip-erase {
  background: #252830 !important;
  color: #a7adb8 !important;
  border-color: #3a3e4a !important;
}
html.dark .dr-tool-ghost { color: #a7adb8 !important; }
html.dark .dr-tool-random {
  border-color: rgba(255, 159, 67, 0.45) !important;
  background: rgba(255, 159, 67, .12) !important;
  color: #ff9f43 !important;
}
html.dark .dr-meta { color: #a7adb8 !important; }
html.dark .dr-room-del { color: #6b7280 !important; }
html.dark .dr-room-del:hover {
  background: rgba(239, 68, 68, .15) !important;
  color: #ef4444 !important;
}
html.dark .dr-swatch { border-color: #3a3e4a !important; }
html.dark .dr-label { color: #f7f7f5 !important; }
html.dark .dr-input,
html.dark .dr-textarea {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #f7f7f5 !important;
}
html.dark .dr-btn-ghost {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .dr-btn-add {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .dr-btn-add:hover {
  background: #e88f3a !important;
  border-color: #e88f3a !important;
}
html.dark .dr-btn-primary {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .dr-style-hint { color: #6b7280 !important; }
html.dark .dr-style-hint strong { color: #c5c9d1 !important; }
html.dark .dr-preview {
  border-color: #2a2e3a !important;
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/14px 14px !important;
}
html.dark .dr-status { color: #a7adb8 !important; }
html.dark .dr-status.error { color: #ef4444 !important; }
html.dark .dr-status.ok { color: #22c55e !important; }

/* ============================================================
   ISOMETRIC ROOM PAGE (generic class names)
   ============================================================ */
html.dark .top {
  background: #1a1d27 !important;
  border-bottom-color: #2a2e3a !important;
}
html.dark .top a { color: #a7adb8 !important; }
html.dark .brand { color: #f7f7f5 !important; }
html.dark .steps {
  background: #1a1d27 !important;
  border-bottom-color: #2a2e3a !important;
}
html.dark .step { color: #6b7280 !important; }
html.dark .step::after { background: #2a2e3a !important; }
html.dark .step i {
  background: #2a2e3a !important;
  color: #6b7280 !important;
}
html.dark .step.active,
html.dark .step.done { color: #f7f7f5 !important; }
html.dark .step.active i,
html.dark .step.done i {
  background: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .step.done:not(:last-child)::after { background: #d68a4a !important; }
html.dark .card {
  background: #151821 !important;
  border-color: #2a2e3a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important;
}
html.dark .card h1,
html.dark .card h2 { color: #f7f7f5 !important; }
html.dark .lead { color: #a7adb8 !important; }
html.dark .prompt textarea,
html.dark .ps-textarea {
  border-color: #2a2e3a !important;
  background: transparent !important;
  color: #f7f7f5 !important;
}
html.dark .prompt,
html.dark .ps-prompt-box {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .ps-label { color: #f7f7f5 !important; }
html.dark .room-example {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .room-example:hover {
  border-color: #3a3e4a !important;
  background: #252830 !important;
}
html.dark .room-example.active {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .room-example span { color: #a7adb8 !important; }
html.dark .room-example.active span { color: #ff9f43 !important; }
html.dark .attach { color: #6b7280 !important; }
html.dark .attach:hover {
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .ref { color: #a7adb8 !important; }
html.dark .choice {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .choice::before {
  border-color: #3a3e4a !important;
  background: #151821 !important;
}
html.dark .choice:has(input:checked) {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .choice:has(input:checked)::before {
  border-color: #ff9f43 !important;
  background: #ff9f43 !important;
}
html.dark .proj-choice {
  border-color: rgba(58, 62, 74, .65) !important;
  background: transparent !important;
}
html.dark .proj-choice b { color: #a7adb8 !important; }
html.dark .proj-choice small { color: #a7adb8 !important; }
html.dark .proj-choice:hover {
  border-color: rgba(90, 96, 112, .9) !important;
  background: transparent !important;
}
html.dark .proj-choice:has(input:checked) {
  border-color: rgba(255, 159, 67, .75) !important;
  background: transparent !important;
}
html.dark .proj-choice:has(input:checked) b { color: #ff9f43 !important; }
html.dark .tab {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #a7adb8 !important;
}
html.dark .tab.active {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .tool-box {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .tool-box p { color: #a7adb8 !important; }
html.dark .result-item {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .result-item span { color: #6b7280 !important; }
html.dark .notice {
  background: #1e212b !important;
  color: #a7adb8 !important;
}
html.dark .time-card {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .time-label { background: #151821 !important; color: #a7adb8 !important; }
html.dark .extract-results .pair,
html.dark .extract-pair {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .extract-results .pair h3,
html.dark .extract-pair h3 {
  background: #151821 !important;
  color: #f7f7f5 !important;
}
html.dark .pair-label,
html.dark .left-img .label,
html.dark .right-label { color: #6b7280 !important; }
html.dark .piece-card { background: #1e212b !important; border-color: #2a2e3a !important; }
html.dark .piece-card img {
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/10px 10px !important;
}
html.dark .rebirth-section {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .rebirth-section p { color: #a7adb8 !important; }
html.dark .furniture-card {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .f-label { color: #6b7280 !important; }

/* ============================================================
   PROPS PAGE (pp- prefix)
   ============================================================ */
html.dark .pp-topbar,
html.dark .pp-stepper {
  background: #1a1d27 !important;
  border-bottom-color: #2a2e3a !important;
}
html.dark .pp-back { color: #a7adb8 !important; }
html.dark .pp-brand { color: #f7f7f5 !important; }
html.dark .pp-step { color: #6b7280 !important; }
html.dark .pp-step::after { background: #2a2e3a !important; }
html.dark .pp-step-dot {
  background: #2a2e3a !important;
  color: #6b7280 !important;
}
html.dark .pp-step.active,
html.dark .pp-step.done { color: #f7f7f5 !important; }
html.dark .pp-step.active .pp-step-dot,
html.dark .pp-step.done .pp-step-dot {
  background: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .pp-step.done:not(:last-child)::after { background: #d68a4a !important; }
html.dark .pp-card {
  background: #151821 !important;
  border-color: #2a2e3a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important;
}
html.dark .pp-card h1 { color: #f7f7f5 !important; }
html.dark .pp-desc { color: #a7adb8 !important; }
html.dark .pp-label { color: #f7f7f5 !important; }
html.dark .pp-prompt-box {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .pp-prompt-box:focus-within {
  border-color: #ff9f43 !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 67, .1) !important;
}
html.dark .pp-attach {
  border-color: #3a3e4a !important;
  background: rgba(30, 33, 43, .8) !important;
  color: #6b7280 !important;
}
html.dark .pp-attach:hover { background: #252830 !important; }
html.dark .pp-attach-label { color: #6b7280 !important; }
html.dark .pp-attach-thumb {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .pp-btn {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .pp-btn.primary {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .pp-grid {
  border-color: #2a2e3a !important;
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/14px 14px !important;
}
html.dark .pp-check { color: #6b7280 !important; }

/* ============================================================
   SCENE ANIMATION PAGE (sa- additional classes)
   ============================================================ */
html.dark .sa-topbar,
html.dark .sa-stepper {
  background: #1a1d27 !important;
  border-bottom-color: #2a2e3a !important;
}
html.dark .sa-back { color: #a7adb8 !important; }
html.dark .sa-brand { color: #f7f7f5 !important; }
html.dark .sa-step { color: #6b7280 !important; }
html.dark .sa-step::after { background: #2a2e3a !important; }
html.dark .sa-step-dot {
  background: #2a2e3a !important;
  color: #6b7280 !important;
}
html.dark .sa-step.active,
html.dark .sa-step.done { color: #f7f7f5 !important; }
html.dark .sa-step.active .sa-step-dot,
html.dark .sa-step.done .sa-step-dot {
  background: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .sa-step.done:not(:last-child)::after { background: #d68a4a !important; }
html.dark .sa-card {
  background: #151821 !important;
  border-color: #2a2e3a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3) !important;
}
html.dark .sa-card h1 { color: #f7f7f5 !important; }
html.dark .sa-desc { color: #a7adb8 !important; }
html.dark .sa-label { color: #f7f7f5 !important; }
html.dark .sa-prompt-box {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .sa-prompt-box:focus-within {
  border-color: #ff9f43 !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 67, .1) !important;
}
html.dark .ps-aspect-trigger,
html.dark .sa-aspect-trigger {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #a7adb8 !important;
}
html.dark .ps-aspect-trigger:hover,
html.dark .sa-aspect-trigger:hover {
  border-color: #3a3e4a !important;
  background: #252830 !important;
}
html.dark .ps-aspect-trigger .ps-aspect-caret,
html.dark .ps-aspect-trigger .sa-caret,
html.dark .sa-aspect-trigger .sa-caret {
  background: #151821 !important;
  color: #6b7280 !important;
}
html.dark .ps-aspect-popover,
html.dark .sa-aspect-popover {
  border-color: #2a2e3a !important;
  background: #151821 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4) !important;
}
html.dark .ps-aspect-popover button,
html.dark .sa-aspect-popover button { color: #a7adb8 !important; }
html.dark .ps-aspect-popover button:hover,
html.dark .sa-aspect-popover button:hover { background: #1e212b !important; }
html.dark .ps-aspect-popover button.selected,
html.dark .sa-aspect-popover button.selected {
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .sa-upload {
  border-color: #3a3e4a !important;
  background: #1e212b !important;
  color: #6b7280 !important;
}
html.dark .sa-upload:hover {
  border-color: #ff9f43 !important;
  background: #252830 !important;
}
html.dark .sa-upload strong { color: #f7f7f5 !important; }
html.dark .sa-selected {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .sa-selected-meta strong { color: #f7f7f5 !important; }
html.dark .sa-btn {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .sa-btn.primary {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .sa-result-pane {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .sa-result-pane h2 { color: #f7f7f5 !important; }
html.dark .sa-pane-meta { color: #a7adb8 !important; }
html.dark .sa-effect-current b { color: #ff9f43 !important; }

/* ============================================================
   AUDIO PAGE (ps- redefinitions + unique classes)
   ============================================================ */
html.dark .ps-form-section {
  border-top-color: #2a2e3a !important;
}
html.dark .ps-label-icon {
  background: rgba(255, 159, 67, .15) !important;
  color: #ff9f43 !important;
}
html.dark .ps-required { color: #ff9f43 !important; }
html.dark .ps-option {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #6b7280 !important;
}
html.dark .ps-option:hover {
  border-color: #3a3e4a !important;
  background: #252830 !important;
}
html.dark .ps-option:has(input:checked) {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .ps-option b { color: #f7f7f5 !important; }
html.dark .ps-option small { color: #6b7280 !important; }
html.dark .ps-custom-input {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #f7f7f5 !important;
}
html.dark .ps-hint { color: #6b7280 !important; }
html.dark .ps-meta span {
  border-color: #2a2e3a !important;
  background: rgba(255, 159, 67, .1) !important;
  color: #ff9f43 !important;
}
html.dark .ps-error {
  background: rgba(239, 68, 68, .1) !important;
  border-color: rgba(239, 68, 68, .3) !important;
  color: #ef4444 !important;
}

/* ============================================================
   GENERATE PAGE (additional ps- sub-classes)
   ============================================================ */
html.dark .ps-eyebrow {
  background: rgba(255, 159, 67, .12) !important;
  color: #ff9f43 !important;
}
html.dark .ps-direction-badge {
  border-color: rgba(255, 159, 67, .3) !important;
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .ps-direction-heading p { color: #a7adb8 !important; }
html.dark .ps-option-visual {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .ps-option-visual:hover { border-color: #3a3e4a !important; }
html.dark .ps-option-visual:has(input:checked) {
  border-color: #ff9f43 !important;
  background: linear-gradient(135deg, rgba(255, 159, 67, .06) 0%, rgba(255, 159, 67, .12) 100%) !important;
}
html.dark .ps-option-preview {
  background: radial-gradient(circle at 50% 40%, #1e212b 0%, #151821 69%) !important;
}
html.dark .ps-option-copy b { color: #f7f7f5 !important; }
html.dark .ps-option-copy b em { color: #ff9f43 !important; }
html.dark .ps-option-copy small { color: #6b7280 !important; }
html.dark .ps-option-check {
  border-color: #3a3e4a !important;
  background: #1e212b !important;
}
html.dark .ps-option-visual:has(input:checked) .ps-option-check {
  border-color: #ff9f43 !important;
  background: #ff9f43 !important;
}
html.dark .ps-prompt-box {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .ps-prompt-box:focus-within {
  border-color: #ff9f43 !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 67, .1) !important;
}
html.dark .ps-attach-button {
  border-color: #3a3e4a !important;
  background: rgba(30, 33, 43, .8) !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}
html.dark .ps-attach-button:hover,
html.dark .ps-attach-button:focus {
  border-color: #4a4f5c !important;
  background: #252830 !important;
  color: #8b929e !important;
}
html.dark .ps-attach-thumb {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .ps-model-trigger {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #a7adb8 !important;
}
html.dark .ps-model-trigger:hover {
  border-color: #3a3e4a !important;
  background: #252830 !important;
}
html.dark .ps-model-trigger .ps-caret {
  background: #151821 !important;
  color: #6b7280 !important;
}
html.dark .ps-model-popover {
  border-color: #2a2e3a !important;
  background: #151821 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4) !important;
}
html.dark .ps-model-auto-row {
  border-bottom-color: #2a2e3a !important;
}
html.dark .ps-model-auto-row b { color: #f7f7f5 !important; }
html.dark .ps-model-auto-row small { color: #6b7280 !important; }
html.dark .ps-switch span { background: #2a2e3a !important; }
html.dark .ps-switch span::after { background: #6b7280 !important; }
html.dark .ps-switch input:checked + span { background: #ff9f43 !important; }
html.dark .ps-switch input:checked + span::after { background: #fff !important; }
html.dark .ps-model-list button { color: #a7adb8 !important; }
html.dark .ps-model-list button:hover { background: #1e212b !important; }
html.dark .ps-model-list button.selected {
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .ps-direction-option {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .ps-direction-option:hover { border-color: #3a3e4a !important; }
html.dark .ps-direction-option b { color: #f7f7f5 !important; }
html.dark .ps-direction-option small { color: #6b7280 !important; }
html.dark .ps-direction-option:has(input:checked) {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .ps-direction-preview {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .ps-direction-cell { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.dark .ps-result-label { color: #6b7280 !important; }
html.dark .ps-result-frame {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .ps-result-frame-transparent,
html.dark .ps-grid-editor-viewport,
html.dark .ps-frame,
html.dark .ps-preview,
html.dark .ps-upload-preview img {
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/14px 14px !important;
}
html.dark .ps-grid-editor-toolbar {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .ps-grid-tool {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #a7adb8 !important;
}
html.dark .ps-grid-tool:hover {
  border-color: #3a3e4a !important;
  background: #252830 !important;
}
html.dark .ps-grid-tool.active {
  background: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .ps-grid-tool-sep { background: #2a2e3a !important; }
html.dark .ps-grid-color-swatch { border-color: #3a3e4a !important; }
html.dark .ps-grid-zoom-label { color: #6b7280 !important; }
html.dark .ps-grid-done-btn {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .ps-download-menu {
  border-color: #2a2e3a !important;
  background: #151821 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important;
}
html.dark .ps-download-menu button { color: #a7adb8 !important; }
html.dark .ps-download-menu button:hover {
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .ps-download-menu button small { color: #6b7280 !important; }
html.dark .ps-textarea-box {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .ps-textarea-box:focus-within {
  border-color: #ff9f43 !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 67, .1) !important;
}
html.dark .ps-tool {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #a7adb8 !important;
}
html.dark .ps-tool:hover {
  border-color: #ff9f43 !important;
  color: #ff9f43 !important;
}
html.dark .ps-tool.active {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .12) !important;
  color: #ff9f43 !important;
}
html.dark .ps-mask-wrap { border-color: #2a2e3a !important; }
html.dark .ps-mask-stage {
  border-color: #2a2e3a !important;
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/14px 14px !important;
}
html.dark .ps-grid9 { background: #151821 !important; }
html.dark .ps-frame.disabled {
  background: #151821 !important;
  opacity: .5 !important;
}
html.dark .ps-frame.disabled::after {
  color: #6b7280 !important;
  background: rgba(21, 24, 33, .75) !important;
}
html.dark .ps-frame-no {
  background: #3a3e4a !important;
  color: #a7adb8 !important;
}
html.dark .ps-inline-shimmer { background: rgba(30, 33, 43, .5) !important; }
html.dark .ps-remove,
html.dark .ps-remove-upload {
  background: rgba(30, 33, 43, .78) !important;
  color: #ef4444 !important;
}
html.dark .ps-result-actions .ps-btn { color: #f7f7f5 !important; }
html.dark .ps-result-actions .ps-btn.primary {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .ps-result-actions .ps-btn.primary:hover {
  background: #e88f3a !important;
}

/* ============================================================
   BATCH PAGE (additional classes)
   ============================================================ */
html.dark .ps-detail-option {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .ps-detail-option:has(input:checked) {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .ps-detail-option b { color: #f7f7f5 !important; }
html.dark .ps-detail-option small { color: #6b7280 !important; }
html.dark .ps-attach {
  border-color: #3a3e4a !important;
  background: rgba(30, 33, 43, .8) !important;
  color: #6b7280 !important;
}
html.dark .ps-attach:hover { background: #252830 !important; }
html.dark .ps-attach-thumb {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .ps-result-cell {
  background: #151821 !important;
  border-color: #2a2e3a !important;
}

/* ============================================================
   EDIT PAGE (additional classes)
   ============================================================ */
html.dark .ps-edit-layout { color: #a7adb8 !important; }
html.dark .ps-left-actions .ps-btn {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .ps-left-actions .ps-btn:hover {
  border-color: #ff9f43 !important;
  color: #ff9f43 !important;
}
html.dark .ps-result-preview {
  border-color: #2a2e3a !important;
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/14px 14px !important;
}

/* ============================================================
   WORKSPACE PAGE
   ============================================================ */
html.dark .shell { color: #a7adb8 !important; }
html.dark .shell h1 { color: #f7f7f5 !important; }
/* 只染主按钮；勿全局染 .shell 内所有 button（会把添加参考图的 + 染成橙色） */
html.dark .shell .btn.primary,
html.dark .shell button.primary {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #1a0f05 !important;
}
html.dark .shell .btn.primary:hover,
html.dark .shell button.primary:hover { background: #e88f3a !important; }
html.dark .shell .ps-attach-button,
html.dark .shell .ps-attach-button:hover,
html.dark .shell .ps-attach-button:focus {
  background: rgba(30, 33, 43, .8) !important;
  border: 1px solid #3a3e4a !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}
html.dark .shell .ps-attach-button:hover,
html.dark .shell .ps-attach-button:focus {
  background: #252830 !important;
  border-color: #4a4f5c !important;
  color: #8b929e !important;
}

/* ============================================================
   SCENE-PARALLAX PAGE — already dark, minimal overrides
   ============================================================ */
html.dark .ps-user-header-mount span { color: #a7adb8 !important; }

/* ============================================================
   SHARED PATTERN: topTools text in scene-parallax topbar
   ============================================================ */
html.dark #topTools { color: #6b7280 !important; }

/* ============================================================
   LOGIN LINK
   ============================================================ */
html.dark .ps-login-link { color: #a7adb8 !important; }
html.dark .ps-login-link:hover { color: #f7f7f5 !important; }

/* ============================================================
   AUTH ACTIONS
   ============================================================ */
html.dark .ps-auth-actions { color: #a7adb8 !important; }

/* ============================================================
   ANIMATION PAGE (ps-upload-hero, ps-sheet-stage, etc.)
   ============================================================ */
html.dark .ps-upload-hero {
  border-color: #3a3e4a !important;
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/16px 16px !important;
  color: #6b7280 !important;
}
html.dark .ps-upload-hero:hover { border-color: #ff9f43 !important; }
html.dark .ps-upload-hero .ps-up-ico {
  background: rgba(255, 159, 67, .15) !important;
  color: #ff9f43 !important;
}
html.dark .ps-upload-hero strong { color: #f7f7f5 !important; }
html.dark .ps-sheet-stage,
html.dark .ps-preview-stage {
  border-color: #2a2e3a !important;
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/16px 16px !important;
}
html.dark .ps-result-pane {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .ps-result-pane h2 { color: #f7f7f5 !important; }
html.dark .ps-pane-meta { color: #a7adb8 !important; }
html.dark .ps-result-pending,
html.dark .ps-result-failed {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .ps-result-failed p { color: #a7adb8 !important; }
html.dark .ps-direction-visual {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
}
html.dark .ps-direction-visual:hover { background: #252830 !important; }
html.dark .ps-direction-visual.active {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
  box-shadow: inset 0 0 0 1px #ff9f43 !important;
}
html.dark .ps-direction-visual b { color: #a7adb8 !important; }
html.dark .ps-direction-visual.active b { color: #ff9f43 !important; }
html.dark .ps-recent-item {
  border-color: #2a2e3a !important;
  background: #151821 !important;
}
html.dark .ps-recent-item img {
  background: repeating-conic-gradient(#1e212b 0 25%, #151821 0 50%) 50%/10px 10px !important;
}
html.dark .ps-chip {
  background: #1e212b !important;
  border-color: #2a2e3a !important;
  color: #a7adb8 !important;
}
html.dark .ps-card-title { color: #f7f7f5 !important; }
html.dark .ps-character-input .ps-textarea {
  border-color: #2a2e3a !important;
  background: #1e212b !important;
  color: #f7f7f5 !important;
}
html.dark .ps-character-input .ps-textarea::placeholder { color: #6b7280 !important; }
html.dark .ps-select-all { color: #ff9f43 !important; }
html.dark .ps-action-card:hover { border-color: #3a3e4a !important; }
html.dark .ps-action-card.active {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .ps-direction:hover {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
  color: #ff9f43 !important;
}
html.dark .ps-model-option:hover { border-color: #3a3e4a !important; }
html.dark .ps-model-option:has(input:checked) {
  border-color: #ff9f43 !important;
  background: rgba(255, 159, 67, .08) !important;
}
html.dark .ps-section { border-top-color: #2a2e3a !important; }
html.dark .ps-direction-block { border-top-color: #2a2e3a !important; }
html.dark .ps-config-side.right-side { border-left-color: #2a2e3a !important; }
html.dark .ps-character-input { border-bottom-color: #2a2e3a !important; }

/* ============================================================
   SCROLLBAR (dark mode)
   ============================================================ */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0b0c10; }
html.dark ::-webkit-scrollbar-thumb {
  background: #2a2e3a;
  border-radius: 5px;
}
html.dark ::-webkit-scrollbar-thumb:hover { background: #3a3e4a; }