web 改为暖黄浅色主题

- 暖黄页面背景(#f3efe4) + 白卡 + 柔和文字色，对齐 mockup 配色
- What蓝/Why紫/How绿；作用域五棵树浅底深字（实质蓝/形式绿/感受紫/作用橙/意图红）
- 阶段改中性灰 pill

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/index.html

@@ -8,54 +8,66 @@
 <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 <style>
-  :root{--bg:#0f1115;--panel:#171a21;--panel2:#1e222b;--line:#2a2f3a;--fg:#e6e8ec;--mut:#8b93a1;--ac:#5b9dff;--ok:#36c08a;--no:#e0556b;--warn:#e0a23a;--what:#5b9dff;--why:#c084fc;--how:#36c08a;}
+  :root{
+    --bg:#f3efe4;        /* 暖黄页面背景 */
+    --panel:#ffffff;     /* 白卡 */
+    --panel2:#faf7ef;    /* 略暖的内卡 */
+    --line:#e7e2d4;      /* 浅暖描边 */
+    --line2:#ece7d9;
+    --fg:#2c2c2a;        /* 近黑正文 */
+    --mut:#6f6e68;       /* 次要文字 */
+    --tert:#9a978d;      /* 提示文字 */
+    --ac:#185fa5;        /* 蓝 */
+    --what:#185fa5; --why:#534ab7; --how:#0f6e56;
+    --ok:#0f6e56; --no:#a32d2d; --warn:#854f0b;
+  }
   *{box-sizing:border-box}
-  body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 -apple-system,"PingFang SC",Segoe UI,Roboto,sans-serif}
-  header{padding:14px 20px;border-bottom:1px solid var(--line);font-weight:600;display:flex;gap:10px;align-items:center}
+  body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 -apple-system,"PingFang SC",Segoe UI,Roboto,sans-serif}
+  header{padding:14px 20px;background:var(--panel);border-bottom:1px solid var(--line);font-weight:600;display:flex;gap:10px;align-items:center}
   header .sub{color:var(--mut);font-weight:400;font-size:13px}
   .wrap{display:flex;height:calc(100vh - 51px)}
-  .side{width:300px;border-right:1px solid var(--line);overflow:auto;flex:none}
+  .side{width:300px;background:var(--panel);border-right:1px solid var(--line);overflow:auto;flex:none}
   .main{flex:1;overflow:auto;padding:20px}
   .pitem{padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer}
-  .pitem:hover{background:var(--panel)}
-  .pitem.sel{background:var(--panel2);border-left:3px solid var(--ac)}
+  .pitem:hover{background:#f7f3ea}
+  .pitem.sel{background:#eef4fb;border-left:3px solid var(--ac)}
   .pitem .id{font-size:12px;color:var(--mut);word-break:break-all}
   .pitem .row{display:flex;gap:8px;align-items:center;margin-top:4px}
-  .badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:var(--panel2);color:var(--mut);border:1px solid var(--line)}
-  .badge.ok{background:rgba(54,192,138,.15);color:var(--ok);border-color:transparent}
-  .badge.no{background:rgba(224,85,107,.15);color:var(--no);border-color:transparent}
-  .badge.ac{background:rgba(91,157,255,.15);color:var(--ac);border-color:transparent}
-  .badge.warn{background:rgba(224,162,58,.15);color:var(--warn);border-color:transparent}
-  .stage{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:16px;overflow:hidden}
-  .stage>h3{margin:0;padding:10px 16px;background:var(--panel2);font-size:13px;display:flex;gap:8px;align-items:center}
-  .stage>h3 .n{width:20px;height:20px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
+  .badge{display:inline-block;padding:1px 9px;border-radius:10px;font-size:12px;background:#efeadd;color:#5f5e5a}
+  .badge.ok{background:#e1f5ee;color:var(--ok)}
+  .badge.no{background:#fcebeb;color:var(--no)}
+  .badge.ac{background:#e6f1fb;color:var(--ac)}
+  .badge.warn{background:#faeeda;color:var(--warn)}
+  .stage{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:16px;overflow:hidden}
+  .stage>h3{margin:0;padding:11px 16px;background:#f7f3ea;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center}
+  .stage>h3 .n{width:20px;height:20px;border-radius:50%;background:#3f86d6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
   .stage .body{padding:14px 16px}
   .kv{color:var(--mut);font-size:12px;margin:0 0 4px}
   .imgs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
   .imgs img{width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in;transition:transform .1s}
   .imgs img:hover{transform:scale(1.05);border-color:var(--ac)}
-  .card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px}
+  .card{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;margin-bottom:10px}
   .kphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
-  .kphead h4{margin:0;font-size:14px}
-  .ktype{font-size:12px;padding:3px 10px;border-radius:8px;background:rgba(91,157,255,.15);color:var(--ac);white-space:nowrap;flex:none}
+  .kphead h4{margin:0;font-size:15px}
+  .ktype{font-size:12px;padding:3px 10px;border-radius:8px;background:#e6f1fb;color:#0c447c;white-space:nowrap;flex:none}
   .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0}
-  pre{white-space:pre-wrap;word-break:break-word;background:#0c0e12;border:1px solid var(--line);border-radius:6px;padding:10px;font-size:12px;color:#c8cdd6;margin:6px 0 0;max-height:260px;overflow:auto}
-  details summary{cursor:pointer;color:var(--mut);font-size:12px;margin-top:8px}
+  pre{white-space:pre-wrap;word-break:break-word;background:#f6f2e8;border:1px solid var(--line);border-radius:6px;padding:10px;font-size:12px;color:#444441;margin:6px 0 0;max-height:260px;overflow:auto}
+  details summary{cursor:pointer;color:var(--mut);font-size:12px}
   .whh{margin:8px 0;padding-left:10px;border-left:2px solid var(--line)}
   .whh.w{border-color:var(--what)} .whh.y{border-color:var(--why)} .whh.h{border-color:var(--how)}
   .whh b{font-size:12px}
   .whh.w b{color:var(--what)} .whh.y b{color:var(--why)} .whh.h b{color:var(--how)}
-  .sect{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;display:flex;flex-direction:column;gap:10px}
+  .sect{border-top:1px solid var(--line2);margin-top:12px;padding-top:10px;display:flex;flex-direction:column;gap:10px}
   .srow{display:flex;align-items:flex-start;gap:10px}
   .slabel{font-size:13px;color:var(--mut);min-width:62px;flex:none;padding-top:2px}
   .scope{display:flex;align-items:baseline;gap:8px}
   .scn{font-size:12px;padding:2px 8px;border-radius:8px;flex:none}
-  .foot{border-top:1px solid var(--line);margin-top:10px;padding-top:6px;display:flex;gap:18px;flex-wrap:wrap}
-  .link{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(91,157,255,.12);border:1px solid var(--ac);border-radius:8px;color:var(--ac);text-decoration:none;font-size:13px;margin-bottom:10px}
-  .crit{background:#0c0e12;border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:12px}
+  .foot{border-top:1px solid var(--line2);margin-top:10px;padding-top:8px;display:flex;gap:18px;flex-wrap:wrap}
+  .link{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:#e6f1fb;border:1px solid #9cc3ee;border-radius:8px;color:var(--ac);text-decoration:none;font-size:13px;margin-bottom:10px}
+  .crit{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:10px 14px;margin-bottom:12px}
   .crit .t{color:var(--mut);font-size:12px;margin-bottom:6px}
   .crit ul{margin:0;padding-left:18px} .crit li{margin:3px 0;font-size:13px}
-  .lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:50;cursor:zoom-out}
+  .lb{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:50;cursor:zoom-out}
   .lb img{max-width:92vw;max-height:92vh;border-radius:8px}
   a{color:var(--ac)}
   .empty{color:var(--mut);padding:40px;text-align:center}
@@ -69,9 +81,9 @@ const {useState,useEffect} = React;
 const j = (u)=>fetch(u).then(r=>r.json());
 const SCOPE_CN = {substance:"实质",form:"形式",feeling:"感受",effect:"作用",intent:"意图"};
 const SCOPE_COLOR = {
-  substance:["rgba(91,157,255,.16)","#9ec3ff"], form:["rgba(54,192,138,.16)","#6fe0b5"],
-  feeling:["rgba(192,132,252,.16)","#d8b6ff"], effect:["rgba(224,162,58,.16)","#f0c97a"],
-  intent:["rgba(224,85,107,.16)","#f0a0ad"]};
+  substance:["#e6f1fb","#0c447c"], form:["#e1f5ee","#0f6e56"],
+  feeling:["#eeedfe","#3c3489"], effect:["#faeeda","#854f0b"],
+  intent:["#faece7","#993c1d"]};
 
 function Badge({kind,children}){return <span className={"badge "+(kind||"")}>{children}</span>;}
 
@@ -109,7 +121,7 @@ function KPCard({it,idx}){
       <div className="srow">
         <span className="slabel">对应阶段</span>
         <div className="chips">
-          {stages.length? stages.map(s=><Badge key={s} kind="ac">{s}</Badge>) : <span className="kv">—</span>}
+          {stages.length? stages.map(s=><Badge key={s}>{s}</Badge>) : <span className="kv">—</span>}
           {stages.length>1 && <span className="kv">（{stages.length} 个阶段都 cover）</span>}
         </div>
       </div>
@@ -117,7 +129,7 @@ function KPCard({it,idx}){
         <span className="slabel">作用域</span>
         <div style={{display:'flex',flexDirection:'column',gap:6}}>
           {scopes.length? scopes.map((s,i)=>{
-            const c=SCOPE_COLOR[s.scope_type]||["var(--panel)","var(--mut)"];
+            const c=SCOPE_COLOR[s.scope_type]||["#efeadd","#5f5e5a"];
             return <div className="scope" key={i}>
               <span className="scn" style={{background:c[0],color:c[1]}}>{SCOPE_CN[s.scope_type]||s.scope_type}</span>
               <span>{s.value}</span></div>;