/* ==========================================================================
   Clean 主题层（ChatGPT / Claude 质感）· Claude 2026-06-14
   暖白底 + 白卡片柔阴影 + 单一柔和珊瑚强调 + 无衬线 + 柔圆角 + 舒展留白。
   加载顺序必须最后（晚于 styles/phase2-tokens/components）。
   回退深色：删 index.html 里本文件 <link>，或顶栏 🎨 切换。
   selectors 沿用上一版（已覆盖所有深色硬编码表面，防漏底），只重调质感。
   ========================================================================== */

:root {
  color-scheme: light;

  /* 暖白表面 —— Claude 纸感但更干净 */
  --c-bg:           #f7f6f2;
  --c-bg-2:         #f1efe8;
  --c-panel:        #ffffff;
  --c-panel-2:      #f3f1ea;
  --c-line:         rgba(34, 30, 24, 0.08);
  --c-line-strong:  rgba(34, 30, 24, 0.14);

  /* 墨色文字 */
  --c-text:         #1f1e1b;
  --c-text-soft:    #57534a;
  --c-text-muted:   #8c8579;

  /* 单一柔和珊瑚强调（Claude clay） */
  --c-accent:       #c96442;
  --c-accent-soft:  #d77a59;
  --c-accent-ink:   #ffffff;
  --c-accent-glow:  rgba(201, 100, 66, 0.12);
  --c-accent-line:  rgba(201, 100, 66, 0.38);
  /* 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: #4f7a3a; --c-red: #c0392b;

  /* 柔圆角 */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;

  /* 全无衬线（ChatGPT/Claude UI 质感），display 也用 sans */
  --font-display: var(--font-base);

  /* 柔阴影代替硬边框 */
  --shadow-1: 0 1px 2px rgba(34,30,24,0.05), 0 1px 3px rgba(34,30,24,0.06);
  --shadow-2: 0 16px 48px rgba(34,30,24,0.16);
}

/* === 全局：纯净暖白，去点阵与指示线 ================================== */
body {
  background-color: var(--c-bg);
  background-image: none;
}
body::before { display: none; }
::selection { background: var(--c-accent-glow); color: var(--c-text); }

/* === 标题：无衬线、中等字重、舒展 ==================================== */
h1 {
  font-family: var(--font-base);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.topbar { min-height: 56px; }
h2, h3 { letter-spacing: -0.01em; }
.eyebrow { color: var(--c-text-muted); letter-spacing: 0.06em; font-weight: 600; }

/* === 外壳 ============================================================ */
.rail { background: var(--c-bg-2); border-right: 1px solid var(--c-line); }
.nav-item { border-radius: 8px; }
.nav-item:hover { background: rgba(34,30,24,0.05); }
.nav-item.active { background: rgba(34,30,24,0.07); }
.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: var(--c-bg-2); 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: #ffffff; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-text); }
input:focus, select:focus, textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-glow); }
label span { color: var(--c-text-soft); font-weight: 500; }

/* === 按钮：珊瑚主按钮 + 柔灰 ghost，圆角克制 ======================== */
.primary-button, .ghost-button, .icon-button { border-radius: var(--r-md); }
.primary-button { background: var(--c-accent); color: #fff; 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: var(--c-panel); color: var(--c-text); border-color: var(--c-line-strong); font-weight: 500; }
.ghost-button:hover { background: var(--c-bg-2); border-color: var(--c-line-strong); }
.icon-button { background: var(--c-panel); color: var(--c-text-soft); border-color: var(--c-line-strong); }
.icon-button:hover { color: var(--c-text); background: var(--c-bg-2); border-color: var(--c-line-strong); }
.image-quick-gen-btn { background: var(--c-panel); color: var(--c-text); border-color: var(--c-line-strong); border-radius: var(--r-md); }
.image-quick-gen-btn:not(:disabled):hover { background: var(--c-bg-2); }

/* === 状态条 ========================================================== */
.status-pill { background: var(--c-panel); border: 1px solid var(--c-line-strong); color: var(--c-text-soft); }
.status-pill.ok, .status-pill.connected, .status-pill.is-online { color: #3c6a2a; background: rgba(79,122,58,0.1); border-color: rgba(79,122,58,0.34); }
.status-pill.err, .status-pill.disconnected, .status-pill.is-offline { color: var(--c-red); background: rgba(192,57,43,0.08); border-color: rgba(192,57,43,0.32); }

/* === 海报工作区 ====================================================== */
.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-accent); border-color: var(--c-accent-line); }
.poster-section-hint, .poster-upload-grid label, .poster-scale-grid label { color: var(--c-text-muted); }
.poster-segment button, .poster-style-grid button { background: var(--c-panel); 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: var(--c-accent); background: var(--c-accent-glow); box-shadow: inset 0 0 0 1px var(--c-accent-line); color: var(--c-text);
}
.poster-module-switch button { background: var(--c-panel); 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: #ffffff; }
.poster-scroll { background: transparent; }
.poster-sticky-actions { background: var(--c-panel); border-top: 1px solid var(--c-line); }
.poster-stage-pane { background: var(--c-bg-2); }
.poster-canvas-wrap, .poster-canvas-stage, .canvas-stage, [data-canvas-stage] {
  background-color: #efece4;
  background-image: radial-gradient(circle at 50% 42%, rgba(34,30,24,0.04), transparent 40%);
}
.poster-stage-head { border-bottom: 1px solid var(--c-line); }
.poster-stat { color: #a05236; background: var(--c-accent-glow); border-color: var(--c-accent-line); }
.poster-status { background: var(--c-panel); 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: #fff; 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(34,30,24,0.05); }
.hermes-conv-item.active { background: var(--c-accent-glow); border: 1px solid var(--c-accent-line); }
.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: #ffffff; border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); padding: 11px 14px; }
.hermes-input-row textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-glow); }
.hermes-msg.user .hermes-bubble { background: #efece4; 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: var(--c-bg-2); border: 1px solid var(--c-line); color: var(--c-accent); }
.hermes-artifact-copy strong { color: var(--c-text); }
.hermes-artifact-preview { background: var(--c-bg-2); border: 1px solid var(--c-line); color: var(--c-text-soft); }
.hermes-tool-card { background: var(--c-bg-2); color: var(--c-text-soft); border-color: var(--c-line); }
.hermes-doc-link-card { background: var(--c-bg-2); border-color: var(--c-line); }
.hermes-doc-link { color: var(--c-accent); }
.hermes-doc-link:hover { color: var(--c-accent-soft); }

/* === 结果区 ========================================================== */
.result-box { background: #ffffff; 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(34,30,24,0.04); }
.settings-subsection { border: 1px solid var(--c-line); background: var(--c-bg-2); border-radius: var(--r-md); }
.settings-label { color: var(--c-text); }
.settings-hint { color: var(--c-text-muted); }

/* === 弹层 / Toast / 工件查看器 ====================================== */
.toast { background: #20201c; color: #f7f6f2; border-radius: var(--r-md); }
.artifact-viewer-panel { background: var(--c-panel); border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); }
.artifact-viewer-head { background: var(--c-bg-2); border-bottom: 1px solid var(--c-line); }
.artifact-viewer-text { background: var(--c-bg-2); border: 1px solid var(--c-line); color: var(--c-text); }
.artifact-viewer-backdrop { background: rgba(34,30,24,0.45); }
.settings-overlay { background: rgba(34,30,24,0.32); }

/* === 单选/勾选钮：通用 input 规则把它们撑成大框了，恢复原生尺寸 + 主题色 ==== */
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: var(--c-accent); 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: var(--c-accent); }

/* === 面板填满 flex 网格，消除底部空白 ============================== */
#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(34,30,24,0.3); }