/* ═══════════════════════════════════════════════════════════════════════
   主题 v2（易客风格）· 2026-10-15
   ---------------------------------------------------------------------
   为什么是一个独立文件：styles.css 里有 200+ 处硬编码的绿色调，逐处改
   风险高、回退难。这里在最后加载、集中覆盖，**回退只需删掉 index.html
   里的这一行 link**（或删除本文件）。
   原则：
     · 品牌色（绿 #214e40）→ 靛紫 #5244f7
     · 中性底（暖米 #f5f4ee）→ 中性灰 #f5f5f5，卡片改纯白
     · 侧栏（深绿）→ 白底 + 深灰字
     · **状态色一律保留**：成功/已完成仍是绿色，失败红、待处理琥珀
       —— 易客也是「紫色品牌 + 绿色成功状态」
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. 变量 ───────────────────────────────────────────────────────── */
:root{
  --bg:#f5f5f5;
  --paper:#ffffff;
  --white:#ffffff;
  --ink:#1f2333;
  --body:#3a3f52;
  --muted:#8b8fa3;
  --line:#ececf0;
  --green:#5244f7;
  --green-dark:#1f2333;
  --green-light:#f1f0fe;
  --radius:10px;
  --shadow:0 2px 10px #1f233308;
}

/* ── 2. 字体：Verdana（中文回退 PingFang SC）+ 行高 1.5 ─────────────── */
body{
  font-family:Verdana,Geneva,Tahoma,sans-serif;
  font-size:14px;
  line-height:1.5;
  background:var(--bg);
  color:var(--body);
}
h1{color:var(--ink);font-weight:600}
h2{color:var(--ink)}
th{font-size:13px;font-weight:600}
td{font-size:12px}
code{font-family:"SF Mono",Menlo,Consolas,monospace}
.eyebrow{color:var(--muted);letter-spacing:1.6px}
.muted{color:var(--muted)}
.small{font-size:11px}
.topbar{background:#ffffffd9;border-bottom:1px solid var(--line)}
.topbar-date{color:var(--muted)}
.mode-pill{background:#f4f4f7;border-color:var(--line);color:#6b7085}
.mode-pill.live{background:#eaf7f5;border-color:#cfe9e6;color:#2f7d73}

/* ── 3. 侧栏：深绿 → 白底深灰字 ─────────────────────────────────────── */
.sidebar{background:#fff;color:#5b6076;border-right:1px solid var(--line)}
.brand{color:var(--ink)}
.brand-mark{background:#5244f7;border-color:#5244f733;color:#fff}
.brand-sub{color:#a3a7b8}
.nav-label{color:#a3a7b8}
.nav-item{color:#5b6076}
.nav-item:hover{background:#f7f7fb;color:var(--ink)}
.nav-item.active{background:#f1f0fe;color:var(--green)}
.nav-item.active .icon{color:var(--green)}
.nav-item .nav-count{background:#5244f7;color:#fff}
.sidebar-note{border-top-color:var(--line);color:#a3a7b8}
.sidebar-note strong{color:#5b6076}

/* ── 4. 按钮 ───────────────────────────────────────────────────────── */
.btn{background:var(--green);color:#fff;border-radius:8px}
.btn.secondary{background:#fff;color:#4b5066;border:1px solid var(--line)}
.btn.secondary:hover{background:#f7f7fb;border-color:#ded9fb;color:var(--green)}
.btn.ghost{color:#5b6076}
.btn.ghost:hover{color:var(--green)}

/* ── 5. 标签页 / 筛选 ───────────────────────────────────────────────── */
.tabs{border-bottom:1px solid var(--line)}
.tab{color:#8b8fa3}
.tab.active{color:var(--green);border-bottom-color:var(--green)}
.tab:hover{color:#4b5066}

/* ── 6. 面板 / 表格 / 表单 ──────────────────────────────────────────── */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-header{border-bottom:1px solid var(--line)}
.panel-subtitle{color:var(--muted)}
.table-wrap{background:var(--paper)}
.table-footer{color:var(--muted)}
thead th{color:var(--muted);border-bottom:1px solid var(--line)}
tbody td{border-bottom:1px solid var(--line)}
tbody tr:hover{background:#fafafd}
input,select,textarea{background:#fff;border:1px solid var(--line);color:var(--body);border-radius:8px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px #5244f71f}
.field label,.field-hint,.field-counter{color:var(--muted)}
a{color:var(--green)}

/* ── 7. 工作流组件（仅中性外壳；步骤"已完成"仍是绿色） ──────────────── */
.lw-overview>div{background:var(--paper);border:1px solid var(--line)}
.lw-overview strong{color:var(--ink)}
.lw-overview span{color:var(--muted)}
.lw-batch{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.lw-boundary strong{color:var(--ink)}
.lw-boundary span{color:var(--muted)}
.lw-product-image,.lw-product-choice img,.lw-product-choice .lw-no-image{
  background:#f4f4f7;border:1px solid var(--line)}
.lw-image-pair{background:#fafafd;border:1px solid var(--line)}
.lw-receipt{background:#fafafd;border:1px solid var(--line)}
.lw-form-products{border-top:1px solid var(--line)}
.lw-search{border:1px solid var(--line);background:#fff}
.lw-filter-tabs{border-bottom:1px solid var(--line)}
.lw-completion progress{accent-color:var(--green)}
.lw-completion progress::-webkit-progress-value{background:var(--green)}
.lw-item,.lw-row{border-color:var(--line)}
.lw-disclosure summary{color:var(--body)}
.lw-footnote,.lw-note,.lw-reset-note{color:var(--muted)}
/* 注意：.lw-step--completed / .pill（已完成）/ .notice.green 保持原绿色 —— 那是状态语义 */

/* ── 8. 分组导航的选中态（与 .nav-item.active 同一套靛紫）─────────────── */
.nav-group{color:#5b6076}
.nav-sub{color:#6b7085}
.nav-sub:hover{background:#f7f7fb;color:var(--green)}
.nav-sub.active{background:#f1f0fe;color:var(--green)}
.nav-sub.active:after{content:"";position:absolute;right:14px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.nav-sub{position:relative}

/* ── 9. 八节点轨道与节点弹出层：仍是旧暖绿配色，拉齐到中性 ─────────────── */
.lw-steps{background:#fafafd;border-color:var(--line)}
.lw-steps--compact{background:#fafafd;border-color:var(--line)}
.lw-row .lw-steps{background:#fafafd;border-color:var(--line)}
.lw-node-content{background:#fff;border-color:var(--line);box-shadow:0 6px 22px #1f233312}
.lw-node-content>strong{color:var(--ink)}
.lw-node-content p{color:var(--body)}
.lw-step:not(:last-child):after{border-top-color:#dcdce4}
.lw-step strong{color:#5b6076}
.lw-step span{color:var(--muted)}

/* ── 10. 落地结果栅格 + 节点筛选下拉 ───────────────────────────────── */
.lw-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:13px 0 0;background:var(--paper)}
.lw-facts>div{padding:9px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-width:0}
.lw-facts>div:nth-child(4n){border-right:0}
.lw-facts>div:nth-last-child(-n+4){border-bottom:0}
.lw-facts span{display:block;font-size:10.5px;color:var(--muted);margin-bottom:3px}
.lw-facts strong{font-size:12.5px;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.lw-facts strong.ok{color:var(--green)}
@media(max-width:1180px){.lw-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lw-facts>div:nth-child(4n){border-right:1px solid var(--line)}
 .lw-facts>div:nth-child(2n){border-right:0}
 .lw-facts>div:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
 .lw-facts>div:nth-last-child(-n+2){border-bottom:0}}
.lw-node-filter select{background:#fff;border:1px solid var(--line);color:var(--body);border-radius:8px}

/* ═══ 11. 收尾：清掉残留的绿色激活态与浅绿大面积底 ═══════════════════════
   起因：用户指出红框处「色调有违和感」。复查发现上一轮太保守 —— 我守住了
   「绿=成功」，但把一批**根本不是成功态**的元素也留成了绿色：
     · .notice.green 的三处用途全是「范围/流程说明」（都以“不发布”结尾），
       不是成功消息；
     · .catalog-tab.active 是深绿 #174e42，与靛紫主色直接冲突；
     · .btn:hover、进度条、toast、遮罩、各类浅绿底横条同理。
   **仍然保留绿色的只有真正的成功语义**：.pill（已完成）、.lw-status--completed、
   .lw-step--completed .lw-step-number、.lw-dot.is-done、.status-dot、
   .lw-status-card--completed 顶条。 */

/* ① 激活/交互态：紫 */
.catalog-tab{border-color:var(--line);color:var(--body)}
.catalog-tab.active{background:var(--green);color:#fff;border-color:var(--green)}
.catalog-tab:hover:not(.active){border-color:#ded9fb;color:var(--green)}
.catalog-tabs button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.btn:hover:not(:disabled){background:#4536d9}
.batch-progress progress{background:var(--line);accent-color:var(--green)}
.batch-progress progress::-webkit-progress-bar{background:var(--line)}
.batch-progress progress::-webkit-progress-value{background:var(--green)}
.progress{background:var(--line)}
.progress span{background:var(--green)}
.catalog-shop-stats{color:var(--muted)}
.catalog-shop-stats strong{color:var(--ink)}

/* ② 深绿遮罩与提示条：中性深色 */
.overlay.visible{background:#1c203055}
dialog::backdrop{background:#1c203055}
.toast{background:#242938;color:#f4f5f8;box-shadow:0 6px 28px #1f233325}

/* ③ 说明/边界/注意条：中性 or 品牌紫淡底（不再是暖米/浅绿） */
.notice{background:#f7f7fa;border-color:var(--line);color:var(--body)}
.notice.green{background:var(--green-light);border-color:#ded9fb;color:var(--green)}
.notice.red{background:var(--red-light);border-color:#f0dcda;color:var(--red)}
.lw-boundary{background:var(--green-light);border-color:#ded9fb}
.lw-boundary strong{color:var(--ink)}
.lw-boundary span{color:var(--muted)}
.lw-rules{background:#fafafd}
.lw-metrics>div{border-right-color:var(--line)}
.lw-completion progress::-webkit-progress-bar{background:var(--line)}

/* ④ 残留浅绿大面积底 → 中性 */
.selection-bar{background:#f7f7fa;border-bottom-color:var(--line)}
.task-strip{background:#f7f7fa;border-color:var(--line);color:var(--muted)}
.welcome-card{background:#fafafd;border-color:var(--line)}
.workflow-note{background:#f7f7fa;color:var(--muted)}
.reference-empty{background:#fafafd;border-color:var(--line);color:var(--muted)}
.empty .empty-icon,.lw-empty-icon{background:#f0f0f5;color:var(--muted)}
.lw-empty{background:transparent}
.lw-item-header{background:#fafafd}
.lw-item-index{background:#f0f0f5;color:var(--muted)}
.lw-copy-columns section{background:#fafafd}
.lw-preview-items img,.lw-preview-items .lw-no-image{background:#f4f4f7}
.lw-filter-tabs button.active{background:var(--green-light);color:var(--green)}
.lw-filter-tabs button:hover{background:#f0f0f5}
.art-card{background:#f4f4f7;border-color:var(--line)}
.art-card:nth-child(2){background:#eceaf7}
/* 注意：这里刻意【不】覆盖 .lw-status 默认底色 —— 它本身就是近中性 #eff1ed，
   而任何 .lw-status{...} 覆盖都会与 .lw-status--completed 等同优先级且更靠后，
   从而打掉成功/进行/警示的语义色。同理 .lw-status--skipped 也保持原样。 */