/* ==========================================================================
   Dark 主题层（ChatGPT 风格）· Claude 2026-06-14
   中性深灰 #212121 + 侧栏 #171717 + 卡面 #2b2b2b + 近白文字 + 近白主按钮。
   与 phase2-editorial.css(浅/Claude) 互斥，由顶栏 🎨 切换（exactly one enabled）。
   selectors 沿用浅色层，保证暗色同样全覆盖、无冷蓝/漏底。
   ========================================================================== */

:root {
  color-scheme: dark;

  --c-bg:           #212121;   /* ChatGPT 主背景 */
  --c-bg-2:         #171717;   /* 侧栏更深 */
  --c-panel:        #2b2b2b;   /* 卡面 */
  --c-panel-2:      #353535;
  --c-line:         rgba(255, 255, 255, 0.10);
  --c-line-strong:  rgba(255, 255, 255, 0.16);

  --c-text:         #ececec;
  --c-text-soft:    #c4c4c4;
  --c-text-muted:   #9a9a9a;

  /* ChatGPT 中性强调：主按钮近白、深字；高亮用白透明 */
  --c-accent:       #ececec;
  --c-accent-soft:  #ffffff;
  --c-accent-ink:   #1c1c1c;
  --c-accent-glow:  rgba(255, 255, 255, 0.12);
  --c-accent-line:  rgba(255, 255, 255, 0.34);
  /* phase2 旧组件(选中风格边框/focus 轮廓/角标)用 --p2-accent 且带 !important，必须一并改成主题色，否则残留青色 */
  --p2-accent:      var(--c-accent);
  --p2-accent-soft: var(--c-accent-soft);
  --p2-accent-glow: var(--c-accent-glow);
  --p2-accent-line: var(--c-accent-line);

  --c-orange: var(--c-accent); --c-gold: var(--c-accent); --c-blue: var(--c-accent);
  --c-green: #5fb37a; --c-red: #f0746a;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --font-display: var(--font-base);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.34);
  --shadow-2: 0 16px 48px rgba(0,0,0,0.55);
}

body { background-color: var(--c-bg); background-image: none; }
body::before { display: none; }
::selection { background: rgba(255,255,255,0.16); color: var(--c-text); }

h1 { font-family: var(--font-base); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-text); }
h2, h3 { letter-spacing: -0.01em; }
.eyebrow { color: var(--c-text-muted); letter-spacing: 0.06em; font-weight: 600; }
.topbar { min-height: 56px; }

/* === 外壳 === */
.rail { background: var(--c-bg-2); border-right: 1px solid var(--c-line); }
.nav-item { border-radius: 8px; }
.nav-item:hover { background: rgba(255,255,255,0.06); }
.nav-item.active { background: rgba(255,255,255,0.10); color: var(--c-text); }
.nav-item.active::before { background: var(--c-accent); }
.nav-settings-btn { border-radius: 8px; }
.workspace { background: var(--c-bg); }
.topbar { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }

/* === 卡片 === */
.tool-panel, .output-panel, .debug-panel {
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.tool-guide { background: #232323; border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-text-soft); }
.tool-guide strong { color: var(--c-text); }

/* === 表单 === */
input, select, textarea { background: #2b2b2b; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-text); }
input:focus, select:focus, textarea:focus { border-color: rgba(255,255,255,0.4); box-shadow: 0 0 0 3px var(--c-accent-glow); }
label span { color: var(--c-text-soft); font-weight: 500; }
select option { background: #2b2b2b; color: var(--c-text); }

/* === 按钮 === */
.primary-button, .ghost-button, .icon-button { border-radius: var(--r-md); }
.primary-button { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); box-shadow: none; font-weight: 600; }
.primary-button:hover { background: var(--c-accent-soft); border-color: var(--c-accent-soft); }
.ghost-button { background: transparent; color: var(--c-text); border-color: var(--c-line-strong); font-weight: 500; }
.ghost-button:hover { background: rgba(255,255,255,0.06); border-color: var(--c-line-strong); }
.icon-button { background: transparent; color: var(--c-text-soft); border-color: var(--c-line-strong); }
.icon-button:hover { color: var(--c-text); background: rgba(255,255,255,0.06); }
.image-quick-gen-btn { background: transparent; color: var(--c-text); border-color: var(--c-line-strong); border-radius: var(--r-md); }
.image-quick-gen-btn:not(:disabled):hover { background: rgba(255,255,255,0.06); }

/* === 状态条 === */
.status-pill { background: #2b2b2b; border: 1px solid var(--c-line-strong); color: var(--c-text-soft); }
.status-pill.ok, .status-pill.connected, .status-pill.is-online { color: #7fd49a; background: rgba(95,179,122,0.12); border-color: rgba(95,179,122,0.36); }
.status-pill.err, .status-pill.disconnected, .status-pill.is-offline { color: var(--c-red); background: rgba(240,116,106,0.1); border-color: rgba(240,116,106,0.34); }

/* === 海报工作区 === */
.poster-native-shell { background: var(--c-bg); }
.poster-control-pane { background: var(--c-panel); border-right: 1px solid var(--c-line); }
.poster-pane-head { border-bottom: 1px solid var(--c-line); }
.poster-pane-head h2, .poster-stage-head h3 { color: var(--c-text); }
.poster-section-title { color: var(--c-text-soft); }
.poster-section-title span { color: var(--c-text); border-color: var(--c-line-strong); }
.poster-section-hint, .poster-upload-grid label, .poster-scale-grid label { color: var(--c-text-muted); }
.poster-segment button, .poster-style-grid button { background: #2b2b2b; border: 1px solid var(--c-line-strong); color: var(--c-text); border-radius: var(--r-md); }
.poster-segment button span { color: var(--c-text-muted); }
.poster-segment button.active, .poster-style-grid button.active, .poster-module-switch button.active {
  border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); color: var(--c-text);
}
.poster-module-switch button { background: #2b2b2b; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); }
.poster-module-switch button strong { color: var(--c-text); }
.poster-module-switch button span { color: var(--c-text-muted); }
.poster-textarea { background: #232323; }
.poster-scroll { background: transparent; }
.poster-sticky-actions { background: var(--c-panel); border-top: 1px solid var(--c-line); }
.poster-stage-pane { background: #1a1a1a; }
.poster-canvas-wrap, .poster-canvas-stage, .canvas-stage, [data-canvas-stage] {
  background-color: #181818; background-image: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.05), transparent 40%);
}
.poster-stage-head { border-bottom: 1px solid var(--c-line); }
.poster-stat { color: #d8d8d8; background: rgba(255,255,255,0.08); border-color: var(--c-line-strong); }
.poster-status { background: #2b2b2b; border: 1px solid var(--c-line); color: var(--c-text-muted); }
.poster-canvas-wrap canvas, .poster-template-dom, .poster-template-image { border: 1px solid var(--c-line); background: #111; box-shadow: var(--shadow-1); }

/* === Hermes 对话 === */
.hermes-sidebar { background: var(--c-bg-2); border-right: 1px solid var(--c-line); }
.hermes-sidebar-head { border-bottom: 1px solid var(--c-line); }
.hermes-conv-item { border-radius: 8px; }
.hermes-conv-item:hover { background: rgba(255,255,255,0.06); }
.hermes-conv-item.active { background: rgba(255,255,255,0.10); border: 1px solid var(--c-line-strong); }
.hermes-conv-label { color: var(--c-text-soft); }
.hermes-input-row { background: var(--c-panel); border-top: 1px solid var(--c-line); padding: 14px 16px; }
.hermes-input-row textarea { background: #2b2b2b; border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); padding: 11px 14px; }
.hermes-input-row textarea:focus { border-color: rgba(255,255,255,0.4); box-shadow: 0 0 0 3px var(--c-accent-glow); }
.hermes-msg.user .hermes-bubble { background: #2f2f2f; color: var(--c-text); border-radius: var(--r-lg); }
.hermes-msg.assistant .hermes-bubble { border-left: 2px solid var(--c-accent); color: var(--c-text); }
.hermes-welcome { color: var(--c-text-muted); }
.hermes-artifact-card { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.hermes-artifact-icon { background: #232323; border: 1px solid var(--c-line); color: var(--c-text); }
.hermes-artifact-copy strong { color: var(--c-text); }
.hermes-artifact-preview { background: #1c1c1c; border: 1px solid var(--c-line); color: var(--c-text-soft); }
.hermes-tool-card { background: #232323; color: var(--c-text-soft); border-color: var(--c-line); }
.hermes-doc-link-card { background: #232323; border-color: var(--c-line); }
.hermes-doc-link { color: #8ab4f8; }
.hermes-doc-link:hover { color: #aecbfa; }

/* === 结果区 === */
.result-box { background: #1c1c1c; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); }
.result-text, .result-box pre { color: var(--c-text); }
.result-empty, .result-progress, .image-preview-placeholder { color: var(--c-text-muted); }

/* === 设置抽屉 === */
.settings-drawer { background: var(--c-panel); border-right: 1px solid var(--c-line); box-shadow: var(--shadow-2); }
.settings-drawer-head { border-bottom: 1px solid var(--c-line); }
.settings-section { border-bottom: 1px solid var(--c-line); }
.settings-section summary { color: var(--c-text); }
.settings-section summary:hover { background: rgba(255,255,255,0.04); }
.settings-subsection { border: 1px solid var(--c-line); background: #232323; border-radius: var(--r-md); }
.settings-label { color: var(--c-text); }
.settings-hint { color: var(--c-text-muted); }

/* === 弹层 / Toast / 工件查看器 === */
.toast { background: #343434; color: var(--c-text); border-radius: var(--r-md); border: 1px solid var(--c-line); }
.artifact-viewer-panel { background: var(--c-panel); border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); }
.artifact-viewer-head { background: #232323; border-bottom: 1px solid var(--c-line); }
.artifact-viewer-text { background: #1c1c1c; border: 1px solid var(--c-line); color: var(--c-text); }
.artifact-viewer-backdrop { background: rgba(0,0,0,0.7); }
.settings-overlay { background: rgba(0,0,0,0.55); }

/* === 单选/勾选钮 === */
input[type="radio"], input[type="checkbox"] {
  width: 16px !important; height: 16px !important; min-height: 0 !important; padding: 0 !important;
  margin: 0 6px 0 0; flex: none; justify-self: start; align-self: center;
  accent-color: #ececec; vertical-align: -3px;
}
.poster-section-hint label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; }
input[type="range"], .poster-scale-grid input[type="range"] { accent-color: #ececec; }

/* === 面板填满，去底部空白 === */
#tool-tianti.active, #tool-jifen.active, #tool-kaixiang.active, #tool-suite.active,
.hermes-panel, .hermes-panel.active { height: 100% !important; max-height: 100% !important; }

/* === 滚动条 === */
::-webkit-scrollbar-thumb { background: var(--c-line-strong); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }