/* ==========================================================================
   岳小杰 · 个人作品集
   配色：中性灰 + 单一克制蓝，无多色渐变
   字体：微软雅黑（中英文统一），字重仅用 400 / 700
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* —— 中性色 —— */
  --bg:#F4F5F7;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --ink:#0F1216;
  --body:#3C4450;
  --muted:#79828F;
  --line:#E3E6EB;
  --line-soft:rgba(15,18,22,.07);

  /* —— 深色区 —— */
  --dark:#12151A;
  --dark-2:#191D25;
  --dark-3:#20252E;
  --dark-line:rgba(255,255,255,.11);
  --dark-text:#E7EAEF;
  --dark-muted:#8A93A2;

  /* —— 品牌色（由「设计 Token」卡片实时切换） —— */
  --acc:#4D144A;          /* 标准色：填充、描边、图标 */
  --acc-ink:#380E36;      /* 悬停加深 */
  --acc-txt:#4D144A;      /* 浅底上的小字（本身够深，直接用标准色） */
  --acc-soft:rgba(77,20,74,.08);
  --acc-line:rgba(77,20,74,.26);
  --acc-fill:var(--acc);  /* 填充层：开启渐变后变成 linear-gradient */
  /* 深色区专用：纯紫在近黑底上看不清，用同色系浅调 */
  --acc-dk:#C879C2;       /* 深色区的文字 / 描边 */
  --acc-dk-fill:#8E3A87;  /* 深色区的填充（白字压在上面） */
  --wash:linear-gradient(160deg,#FCF2F8 4%,#E3EAFD 100%);

  /* —— 状态色（低饱和） —— */
  --ok:#2E7D5B;--ok-bg:rgba(46,125,91,.1);
  --warn:#96671C;--warn-bg:rgba(150,103,28,.1);
  --off:#6B7280;--off-bg:rgba(107,114,128,.1);

  --sans:"Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB","Heiti SC",sans-serif;
  --e:cubic-bezier(.16,1,.3,1);
  --e2:cubic-bezier(.4,0,.2,1);
  --pad:clamp(18px,4.5vw,72px);
  --content-edge:max(var(--pad), calc((100% - 1440px) / 2));
  --r:14px;
  --r-lg:16px;   /* 由「设计 Token」卡片实时控制 */
}

html{-webkit-font-smoothing:antialiased}
html.native-smooth{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7;
  font-weight:400;overflow-x:hidden}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

/* —— 氛围底（中性，极淡） —— */
#amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#amb i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;display:block}
#amb .a1{width:46vw;height:46vw;background:rgba(140,60,134,.15);top:-14vw;right:-6vw}
#amb .a2{width:38vw;height:38vw;background:rgba(15,18,22,.06);bottom:-10vw;left:-8vw}
#amb .a3{width:30vw;height:30vw;background:rgba(140,60,134,.08);top:38%;left:34%}
#grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E")}

/* —— 光标 —— */
#dot{position:fixed;width:7px;height:7px;background:var(--acc);border-radius:50%;z-index:90;pointer-events:none;
 transform:translate(-50%,-50%);transition:opacity .3s}
#ring{position:fixed;width:34px;height:34px;border:1px solid var(--acc-line);border-radius:50%;z-index:89;
 pointer-events:none;transform:translate(-50%,-50%);
 transition:width .38s var(--e),height .38s var(--e),background .38s,border-color .38s}
body.hv #ring{width:72px;height:72px;background:var(--acc-soft)}
body.dk #ring{border-color:rgba(255,255,255,.3)}
body.dk #dot{background:#fff}
@media(hover:none),(max-width:900px){#dot,#ring{display:none}}

/* —— 载入 —— */
#load{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;
 transition:opacity .8s var(--e),visibility .8s}
#load.off{opacity:0;visibility:hidden}
#load .lw{text-align:center;width:min(80vw,260px)}
#load .lt{font-size:13px;letter-spacing:.34em;color:var(--muted);margin-bottom:16px}
#load .lb{height:2px;background:var(--line);overflow:hidden;border-radius:2px}
#load .lb i{display:block;height:100%;width:0;background:var(--acc-fill);animation:ld 1.3s var(--e) forwards}
@keyframes ld{to{width:100%}}

/* ============================ 导航 ============================ */
header{position:fixed;top:0;left:0;right:0;z-index:80;padding:14px var(--content-edge);
 display:flex;justify-content:space-between;align-items:center;transition:color .5s var(--e)}
header::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--e);
 background:rgba(244,245,247,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
 border-bottom:1px solid var(--line)}
body.scd header::before{opacity:1}
body.dk header{color:var(--dark-text)}
body.dk header::before{background:rgba(18,21,26,.8);border-bottom-color:var(--dark-line)}
.brand{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;letter-spacing:.02em}
.brand i{width:22px;height:22px;border-radius:6px;background:var(--acc-fill);display:grid;place-items:center;
 color:#fff;font-size:11px;font-weight:700;font-style:normal;flex:none}
nav{display:flex;align-items:center;gap:4px}
nav a{position:relative;padding:7px 12px;font-size:13px;color:inherit;opacity:.62;border-radius:8px;
 transition:opacity .3s,background .3s}
nav a:hover{opacity:1;background:var(--acc-soft)}
body.dk nav a:hover{background:rgba(255,255,255,.07)}
nav a.on{opacity:1;font-weight:700}
nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--acc-fill);border-radius:2px}
@media(max-width:760px){nav a{padding:6px 7px;font-size:11.5px}.brand span{display:none}}

/* ============================ 通用 ============================ */
section{position:relative;z-index:2}
.pad{padding:clamp(66px,9vw,132px) var(--pad)}
.wrapx{max-width:1440px;margin:0 auto}
.hd{display:flex;align-items:flex-end;gap:20px;margin-bottom:clamp(28px,4vw,54px);flex-wrap:wrap}
.hd .no{font-size:11px;letter-spacing:.26em;color:var(--acc-txt);font-weight:700;display:block;margin-bottom:10px}
#work .hd .no,#list .hd .no,#contact .hd .no{color:var(--acc)}
.hd h2{font-size:clamp(24px,3.4vw,42px);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.hd p{font-size:14px;color:var(--muted);margin-top:8px;max-width:52ch;word-break:keep-all;overflow-wrap:break-word}
.hd .side{margin-left:auto}
#work .hd h2,#list .hd h2,#contact .hd h2{color:var(--dark-text)}
#work .hd p,#list .hd p,#contact .hd p{color:var(--dark-muted)}

.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;transition:opacity .85s var(--e),transform .85s var(--e)}
.d1.in{transition-delay:.07s}.d2.in{transition-delay:.14s}.d3.in{transition-delay:.21s}.d4.in{transition-delay:.28s}

/* ============================ 首屏 ============================ */
#home{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
 padding:120px var(--content-edge) 64px;position:relative;perspective:1200px}
.eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;font-size:12px;letter-spacing:.18em;color:var(--muted);
 border:1px solid var(--line);background:rgba(255,255,255,.6);border-radius:99px;padding:6px 14px;
 margin-bottom:clamp(20px,2.2vw,28px);opacity:0;transform:translateY(14px);transition:all .9s var(--e) .15s}
.eyebrow b{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;
 box-shadow:0 0 0 3px rgba(46,125,91,.16)}
.htitle{font-size:clamp(32px,5.1vw,76px);font-weight:700;line-height:1.2;letter-spacing:-.025em;max-width:19ch}
.htitle .ln{display:block;overflow:hidden}
.htitle .ln>b{display:block;transform:translateY(106%);transition:transform 1.05s var(--e)}
.htitle .ac{color:var(--acc)}
body.on .eyebrow{opacity:1;transform:none}
body.on .htitle .ln>b{transform:none}
body.on .htitle .ln:nth-child(2)>b{transition-delay:.08s}
body.on .htitle .ln:nth-child(3)>b{transition-delay:.16s}
.hbot{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);
 margin-top:clamp(28px,3.2vw,44px);align-items:end;
 opacity:0;transform:translateY(20px);transition:all 1s var(--e) .6s}
body.on .hbot{opacity:1;transform:none}
@media(max-width:900px){.hbot{grid-template-columns:1fr;gap:26px}}
.hbot .lead{font-size:clamp(14px,1.4vw,16.5px);line-height:1.85;color:var(--body);width:100%;max-width:none;min-width:0}
.hstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hstats div{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:calc(max(0px, var(--r-lg) - 2px));
 padding:14px 16px;backdrop-filter:blur(8px);transition:border-color .4s,transform .5s var(--e)}
.hstats div:hover{border-color:var(--acc-line);transform:translateY(-3px)}
.hstats span{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--muted);margin-bottom:5px}
.hstats b{font-size:clamp(12px,1vw,14px);font-weight:600;line-height:1.5}
.scroll-cue{position:absolute;left:var(--content-edge);bottom:24px;display:flex;align-items:center;gap:10px;
 font-size:10.5px;letter-spacing:.26em;color:var(--muted)}
.scroll-cue i{display:block;width:1px;height:30px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--acc);animation:sl 2.1s var(--e) infinite}
@keyframes sl{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(max-width:760px){.scroll-cue{display:none}}


/* ============================ 背景 · 3D 点阵 ============================ */
.fx3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
 opacity:0;transition:opacity 1.4s var(--e) .35s}
body.on .fx3d{opacity:1}
#home>*:not(.fx3d){z-index:1}          /* #home 是 flex 容器，子项无需定位即可参与层叠 */
#about>.wrapx{position:relative;z-index:1}
@media(max-width:760px){.fx3d{opacity:.55}}

/* ============================ 关于 ============================ */
#about{background:linear-gradient(180deg,transparent,var(--surface-2));
 padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(52px,6vw,88px)}
#about .hd{margin-bottom:clamp(22px,2.6vw,34px)}
.about-one{max-width:min(100%,1000px)}
.about-one p{font-size:clamp(15.5px,1.45vw,20px);line-height:2.05;color:var(--body);max-width:50em}
.about-one p em{font-style:normal;font-weight:700;color:var(--ink);
 background:linear-gradient(transparent 66%,var(--acc-soft) 0)}

/* ============================ 精选项目 · 3D 推进 ============================ */
/* 深色三屏统一切到浅调紫 */
#work,#list,#contact{
  --acc:var(--acc-dk);
  --acc-txt:var(--acc-dk);
  --acc-fill:var(--acc-dk-fill);
  --acc-ink:#7A2F74;
  --acc-soft:rgba(200,121,194,.14);
  --acc-line:rgba(200,121,194,.36);
}
#work{background:var(--dark);color:var(--dark-text);
 border-radius:clamp(18px,2.4vw,36px) clamp(18px,2.4vw,36px) 0 0;position:relative;z-index:3}
.deckwrap{height:440vh;position:relative}
.deck{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;perspective:1500px}
.deck .floor{position:absolute;inset:-25% -25% -10% -25%;
 background-image:linear-gradient(var(--dark-line) 1px,transparent 1px),linear-gradient(90deg,var(--dark-line) 1px,transparent 1px);
 background-size:76px 76px;transform:rotateX(74deg) translateY(24%);transform-origin:bottom;opacity:.55;
 mask-image:linear-gradient(to top,#000,transparent 76%);-webkit-mask-image:linear-gradient(to top,#000,transparent 76%)}
.deck .halo{position:absolute;width:56vw;height:56vw;border-radius:50%;filter:blur(120px);
 background:rgba(140,60,134,.26)}
.dstage{position:relative;width:min(90vw,940px);height:min(66vh,530px);transform-style:preserve-3d}
.dcard{position:absolute;inset:0;border-radius:var(--r-lg);padding:clamp(15px,2vw,26px);display:flex;flex-direction:column;gap:14px;
 background:linear-gradient(160deg,var(--dark-3),var(--dark-2));border:1px solid var(--dark-line);
 box-shadow:0 34px 80px rgba(0,0,0,.55);will-change:transform,opacity}
.dcard .tp{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dcard .no{font-size:11px;letter-spacing:.22em;color:var(--acc);font-weight:700}
.dcard h3{font-size:clamp(19px,2.5vw,32px);font-weight:700;letter-spacing:-.015em;line-height:1.25;margin-top:7px}
.dcard .sb{font-size:12.5px;color:var(--dark-muted);margin-top:5px}
.dcard .vis{flex:1;position:relative;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03);
 border:1px solid var(--dark-line)}
.dprog{position:absolute;bottom:4.5vh;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:5}
.dprog i{width:24px;height:3px;background:rgba(255,255,255,.18);border-radius:3px;transition:background .4s,width .4s var(--e)}
.dprog i.on{background:var(--acc);width:40px}
.dhint{position:absolute;bottom:calc(4.5vh + 20px);left:50%;transform:translateX(-50%);
 font-size:10.5px;letter-spacing:.2em;color:var(--dark-muted)}
@media(max-width:900px){
 .deckwrap{height:auto}
 .deck{position:static;height:auto;display:block;perspective:none}
 .dstage{width:auto;height:auto;display:flex;flex-direction:column;gap:16px;transform:none!important}
 .dcard{position:relative;inset:auto;transform:none!important;opacity:1!important;box-shadow:none}
 .dcard .vis{height:180px;flex:none}
 .dprog,.dhint,.deck .floor,.deck .halo{display:none}
}

/* ============================ 项目清单 · 数据表 ============================ */
#list{background:var(--dark);color:var(--dark-text);padding-top:clamp(30px,4vw,60px);position:relative;z-index:3}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-size:12px;padding:6px 13px;border-radius:99px;border:1px solid var(--dark-line);
 color:var(--dark-muted);transition:all .3s var(--e2);white-space:nowrap}
.chip:hover{border-color:rgba(255,255,255,.28);color:var(--dark-text)}
.chip.on{background:var(--acc-fill);border-color:var(--acc);color:#fff;font-weight:700}
.chip em{font-style:normal;margin-left:6px;opacity:.6;font-size:10.5px}
.chip.on em{opacity:.85}
#list .segsm{background:rgba(255,255,255,.05);border-color:var(--dark-line)}
#list .segsm button{color:var(--dark-muted)}
#list .segsm button.on{background:rgba(255,255,255,.11);color:#fff;box-shadow:none}
.rowcount{font-size:11.5px;color:var(--dark-muted);margin-left:auto;white-space:nowrap}
.toolbar .seg{margin-left:0}
@media(max-width:900px){.rowcount{margin-left:0}}
.seg{display:flex;background:rgba(255,255,255,.05);border:1px solid var(--dark-line);border-radius:9px;padding:3px;margin-left:auto}
.seg button{padding:5px 13px;font-size:12px;border-radius:6px;color:var(--dark-muted);transition:all .3s var(--e2);
 display:flex;align-items:center;gap:6px}
.seg button.on{background:rgba(255,255,255,.1);color:#fff;font-weight:700}
.seg svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7}
.switchrow{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--dark-muted)}
.switch{width:38px;height:21px;border-radius:99px;background:var(--line);position:relative;
 transition:background .35s var(--e2);flex:none}
#list .switch{background:rgba(255,255,255,.14)}
.switch i{position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;
 box-shadow:0 1px 3px rgba(15,18,22,.22);transition:transform .35s var(--e)}
.switch.on{background:var(--acc-fill)}
.switch.on i{transform:translateX(17px)}

.tablewrap{border:1px solid var(--dark-line);border-radius:calc(max(0px, var(--r-lg) - 4px));overflow:hidden;background:rgba(255,255,255,.02)}
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:900px}
thead th{text-align:left;font-size:11px;letter-spacing:.14em;color:var(--dark-muted);font-weight:400;
 padding:12px 16px;border-bottom:1px solid var(--dark-line);background:rgba(255,255,255,.03);
 white-space:nowrap;cursor:pointer;user-select:none;transition:color .3s}
thead th:hover{color:var(--dark-text)}
thead th .ar{display:inline-block;margin-left:6px;opacity:.3;transition:opacity .3s,transform .3s}
thead th.srt .ar{opacity:1;color:var(--acc)}
thead th.nosort{cursor:default}
thead th.nosort:hover{color:var(--dark-muted)}
thead th.srt.desc .ar{transform:rotate(180deg)}
tbody td{padding:15px 16px;border-bottom:1px solid var(--dark-line);font-size:13.5px;vertical-align:middle}
tbody tr{transition:background .3s}
tbody tr:hover{background:rgba(255,255,255,.04)}
tbody tr:last-child td{border-bottom:none}
tbody .nm{font-weight:700;font-size:14.5px}
tbody .sub{font-size:11.5px;color:var(--dark-muted);margin-top:3px}
body.compact tbody td{padding:9px 16px}
body.compact tbody .sub{display:none}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:4px 10px;border-radius:99px;
 white-space:nowrap}
.badge i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.badge.ok{color:#5FCE9F;background:rgba(95,206,159,.13)}
.badge.warn{color:#E0B269;background:rgba(224,178,105,.13)}
.badge.off{color:#98A2B3;background:rgba(152,162,179,.12)}
.tagline{display:flex;gap:5px;flex-wrap:wrap}
.tagline b{font-size:10.5px;font-weight:400;color:var(--dark-muted);border:1px solid var(--dark-line);
 border-radius:5px;padding:2px 7px;white-space:nowrap}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.pcard{border:1px solid var(--dark-line);border-radius:calc(max(0px, var(--r-lg) - 4px));overflow:hidden;background:rgba(255,255,255,.02);
 transition:border-color .4s,transform .5s var(--e),box-shadow .5s var(--e);will-change:transform}
.pcard:hover{border-color:var(--acc-line);transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.pcard .ph{height:150px;position:relative;overflow:hidden;border-bottom:1px solid var(--dark-line)}
.pcard .pb{padding:14px 16px 16px}
.pcard h4{font-size:15px;font-weight:700;margin-bottom:4px}
.pcard .ps{font-size:11.5px;color:var(--dark-muted);margin-bottom:10px}
.empty{padding:40px 16px;text-align:center;color:var(--dark-muted);font-size:13px}
.hidden{display:none!important}
.note{margin-top:18px;font-size:12px;color:var(--dark-muted)}

/* 抽象界面缩略（中性） */
.mk{position:absolute;inset:0;padding:14px;display:flex;flex-direction:column;gap:8px}
.mk .b{height:7px;border-radius:3px;background:rgba(255,255,255,.1)}
.mk .b.a{background:var(--acc);opacity:.85}
.mk .r{display:flex;gap:8px;flex:1}
.mk .x{flex:1;border-radius:6px;background:rgba(255,255,255,.06)}
.mk .x.a{background:rgba(200,121,194,.32)}
.mk .c{width:40px;height:40px;border-radius:50%;border:6px solid rgba(200,121,194,.5);align-self:center}
.mk .sd{width:40px;flex:none;border-radius:6px;background:rgba(255,255,255,.05)}

/* ============================ 组件与机制 ============================ */
#system{background:var(--bg);transition:background .5s var(--e2)}
#method{background:var(--surface-2)}
#system.wash{background:var(--wash)}
.sysgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.sc{grid-column:span 3;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
 padding:18px;transition:border-color .4s,box-shadow .5s var(--e),transform .5s var(--e),padding .35s var(--e2);
 will-change:transform;display:flex;flex-direction:column}
.sc:hover{border-color:var(--acc-line);box-shadow:0 20px 44px rgba(15,18,22,.08)}
.sc.s2{grid-column:span 2}.sc.s4{grid-column:span 4}.sc.s6{grid-column:span 6}
@media(max-width:1180px){.sc,.sc.s2,.sc.s4{grid-column:span 6}}
@media(max-width:760px){.sysgrid{gap:12px}}
#system.dense .sc{padding:12px}

/* 设计 skill · 从需求到上线 */
.skpipe{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.sknode{text-align:left;padding:11px 12px;border:1px solid var(--line);border-radius:11px;
 background:var(--surface);position:relative;transition:all .35s var(--e2);overflow:hidden}
.sknode::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc-fill);
 transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
.sknode .sn{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted);margin-bottom:5px}
.sknode .st{display:block;font-size:13px;font-weight:700;color:var(--ink);line-height:1.5}
.sknode:hover{border-color:var(--acc-line)}
.sknode.on{border-color:transparent;background:var(--acc-soft);box-shadow:0 0 0 1px var(--acc-line) inset}
.sknode.on .sn{color:var(--acc-txt)}
.sknode.done::after{transform:none}
@media(max-width:900px){.skpipe{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.skpipe{grid-template-columns:1fr}}
.skdetail{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);
 border-radius:11px;overflow:hidden;background:var(--surface)}
.skdetail div{padding:12px 14px;border-right:1px solid var(--line)}
.skdetail div:last-child{border-right:none}
.skdetail span{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.skdetail b{display:block;font-size:12.5px;font-weight:400;line-height:1.75;color:var(--body)}
.skdetail .kill b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--acc-line)}
@media(max-width:760px){.skdetail{grid-template-columns:1fr}
 .skdetail div{border-right:none;border-bottom:1px solid var(--line)}
 .skdetail div:last-child{border-bottom:none}}
.skout{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-items:center}
.skout b{font-size:10.5px;font-weight:400;color:var(--acc-txt);background:var(--acc-soft);
 border-radius:6px;padding:4px 9px;opacity:0;transform:translateY(4px);transition:all .4s var(--e)}
.skout b.in{opacity:1;transform:none}

.sc .sh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.sc .sh h4{font-size:14px;font-weight:700}
.sc .sh .sd{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.6}
.sc .sh .tagx{font-size:10px;letter-spacing:.14em;color:var(--muted);border:1px solid var(--line);
 border-radius:99px;padding:3px 9px;white-space:nowrap;flex:none}
.sc .sb{flex:1;display:flex;flex-direction:column;gap:12px}
#system.dense .sc .sb{gap:9px}
@media(max-width:760px){
 .sc .sh{flex-direction:column;align-items:flex-start;gap:9px}
 .sc .sh .segsm{align-self:stretch}
 .sc .sh .segsm button{flex:1}
 .btr{grid-template-columns:24px 1fr 62px 62px;gap:8px;font-size:12px}
}

/* 通用小控件 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;
 border-radius:calc(max(0px, var(--r-lg) - 7px));font-size:12.5px;transition:all .28s var(--e2);
 border:1px solid transparent;white-space:nowrap}
.btn.pri{background:var(--acc-fill);color:#fff;font-weight:700}
.btn.pri:hover{background:var(--acc-ink)}
.btn.sec{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn.sec:hover{border-color:var(--acc-line);background:var(--acc-soft)}
.btn.ghost{color:var(--muted)}
.btn.ghost:hover{background:var(--acc-soft);color:var(--acc-txt)}
.btn.sm{padding:5px 11px;font-size:11.5px}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btnrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.segsm{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:2px;flex:none}
.segsm button{padding:4px 11px;font-size:11.5px;border-radius:7px;color:var(--muted);transition:all .28s var(--e2);white-space:nowrap}
.segsm button.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(15,18,22,.1)}
.tipwrap{position:relative;display:inline-flex}
.tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,5px);background:var(--ink);color:#fff;
 font-size:11px;padding:5px 10px;border-radius:7px;white-space:nowrap;opacity:0;visibility:hidden;
 transition:all .26s var(--e);pointer-events:none;z-index:12}
.tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
 border:5px solid transparent;border-top-color:var(--ink)}
.tipwrap:hover .tip{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* A · Design Token */
.tkrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tkrow .lb{font-size:11.5px;color:var(--muted);flex:none}
.swatches{display:flex;gap:6px}
.swatches button{width:24px;height:24px;border-radius:50%;position:relative;border:2px solid transparent;
 transition:transform .3s var(--e),border-color .3s}
.swatches button::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid transparent;
 transition:border-color .3s}
.swatches button:hover{transform:scale(1.1)}
.swatches button.on::after{border-color:currentColor}
.radchips{display:flex;gap:5px}
.radchips button{width:30px;height:26px;border:1px solid var(--line);font-size:10.5px;color:var(--muted);
 transition:all .28s var(--e2);display:grid;place-items:center;background:var(--surface)}
.radchips button:nth-child(1){border-radius:0}
.radchips button:nth-child(2){border-radius:6px}
.radchips button:nth-child(3){border-radius:10px}
.radchips button:nth-child(4){border-radius:14px}
.radchips button.on{border-color:var(--acc);color:var(--acc-txt);background:var(--acc-soft);font-weight:700}
.tkout{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
 border-top:1px dashed var(--line);padding-top:11px;font-size:11px;color:var(--muted);letter-spacing:.02em}
.tkout b{color:var(--ink);font-weight:700}

/* B · Agent 编排 */
.flow{display:flex;align-items:flex-start;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.flow::-webkit-scrollbar{display:none}
.nd{flex:none;width:74px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.nd .dt{width:28px;height:28px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);
 display:grid;place-items:center;font-size:11px;font-style:normal;color:var(--muted);
 transition:all .4s var(--e2);position:relative}
.nd .nl{font-size:11px;color:var(--body);line-height:1.35}
.nd .ns{font-size:10px;font-style:normal;color:var(--muted);opacity:0;transition:opacity .3s}
.nd.run .dt{border-color:var(--acc);color:var(--acc-txt);background:var(--acc-soft)}
.nd.run .dt::after{content:"";position:absolute;inset:-5px;border-radius:12px;border:1.5px solid var(--acc);
 opacity:.5;animation:pulse 1.3s var(--e) infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.25);opacity:0}}
.nd.done .dt{background:var(--acc-fill);border-color:var(--acc);color:#fff}
.nd.wait .dt{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.nd.err .dt{border-color:#B4453A;color:#B4453A;background:rgba(180,69,58,.1)}
.nd.run .ns,.nd.wait .ns,.nd.err .ns{opacity:1}
.nd.run .ns{color:var(--acc-txt)}.nd.wait .ns{color:var(--warn)}.nd.err .ns{color:#B4453A}
.cn{flex:1;min-width:14px;height:1.5px;background:var(--line);margin-top:13px;position:relative;overflow:hidden}
.cn i{position:absolute;inset:0;background:var(--acc-fill);transform:scaleX(0);transform-origin:left;
 transition:transform .5s var(--e)}
.cn.on i{transform:none}
.flowlog{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);
 background:var(--surface-2);border:1px solid var(--line);border-radius:calc(max(0px, var(--r-lg) - 6px));
 padding:8px 11px;min-height:34px}
.flowlog b{color:var(--ink);font-weight:700}
.hitl{display:flex;gap:6px;margin-left:auto}

/* C · 流式生成 */
.stream{border:1px solid var(--line);border-radius:calc(max(0px, var(--r-lg) - 4px));background:var(--surface-2);
 padding:13px;min-height:118px;font-size:12.5px;line-height:1.85;color:var(--body);position:relative}
.stream .cursor{display:inline-block;width:2px;height:1em;background:var(--acc);vertical-align:-2px;
 animation:blink .9s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.skel{display:flex;flex-direction:column;gap:8px}
.skel i{display:block;height:9px;border-radius:4px;background:linear-gradient(90deg,var(--line),#EEF0F4,var(--line));
 background-size:200% 100%;animation:shim 1.3s linear infinite}
.skel i:nth-child(2){width:82%}.skel i:nth-child(3){width:64%}
@keyframes shim{to{background-position:-200% 0}}
.thinking{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:10px}
.thinking i{width:5px;height:5px;border-radius:50%;background:var(--acc);animation:bob 1.1s var(--e) infinite}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
.statebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.statebar .sm{font-size:11px;color:var(--muted);margin-left:auto}

/* 方法论三条 */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,40px);
 margin-bottom:clamp(26px,4vw,48px)}
@media(max-width:880px){.principles{grid-template-columns:1fr;gap:22px}}
.pr{border-top:2px solid var(--acc);padding-top:14px}
.pr .n4{font-size:10.5px;letter-spacing:.22em;color:var(--acc-txt);font-weight:700;margin-bottom:8px}
.pr h4{font-size:clamp(15px,1.7vw,19px);font-weight:700;margin-bottom:9px;letter-spacing:-.01em;line-height:1.4}
.pr p{font-size:13px;line-height:1.9;color:var(--body)}

/* 复杂线框（设备监控台） */
.wf2{position:absolute;inset:0;z-index:1;background:var(--surface);display:flex;flex-direction:column}
.w2top{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--line);flex:none}
.w2t{font-size:11px;font-weight:700;white-space:nowrap}
.w2crumb{font-size:9px;color:var(--muted);white-space:nowrap}
.w2btns{margin-left:auto;display:flex;gap:3px;flex:none}
.w2b{height:17px;min-width:30px;padding:0 6px;border-radius:4px;background:var(--line);display:grid;
 place-items:center;font-size:8.5px;color:var(--muted);white-space:nowrap}
.w2b.pri{background:var(--acc-fill);color:#fff;font-weight:700;min-width:50px}
.w2body{flex:1;display:flex;min-height:0}
.w2side{width:84px;flex:none;border-right:1px solid var(--line);padding:8px 7px 30px;display:flex;
 flex-direction:column;gap:3px;overflow:hidden}
.w2nav{height:12px;border-radius:3px;background:var(--line);opacity:.85;flex:none;display:block}
.w2nav.on{background:var(--acc-soft);box-shadow:inset 2px 0 0 var(--acc)}
.w2grp{font-size:8px;color:var(--muted);margin:5px 0 1px;letter-spacing:.08em;flex:none}
.w2main{flex:1;padding:8px;display:flex;flex-direction:column;gap:7px;min-width:0}
.w2kpis{display:flex;gap:6px;flex:none}
.w2k{flex:1;border:1px solid var(--line);border-radius:5px;height:36px;background:var(--surface-2)}
.w2k.hero{flex:2;background:var(--acc-soft);border-color:var(--acc-line);position:relative;overflow:hidden}
.w2k.hero::after{content:"";position:absolute;left:5px;right:5px;bottom:5px;height:14px;background:var(--acc);
 opacity:.32;clip-path:polygon(0 78%,18% 58%,36% 68%,54% 32%,72% 44%,100% 8%,100% 100%,0 100%)}
.w2tab{flex:1;border:1px solid var(--line);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.w2r{display:flex;gap:4px;padding:4px 6px;border-bottom:1px solid var(--line);align-items:center;flex:1}
.w2r:last-child{border-bottom:none}
.w2r.h{background:var(--surface-2);flex:none}
.w2r.sel{background:var(--acc-soft)}
.w2c{height:6px;background:var(--line);border-radius:2px;flex:1;display:block}
.w2c.k{flex:2.6;height:8px;background:var(--muted);opacity:.5}
.w2c.s{flex:.85;background:var(--acc);opacity:.42;border-radius:99px}
.w2r.h .w2c{height:4px;opacity:.7}
.w2r.h .w2c.k{background:var(--line);opacity:.8;height:4px}
.w2r.h .w2c.s{background:var(--line);opacity:.8}
.w2pg{display:flex;gap:3px;justify-content:flex-end;flex:none}
.w2pg i{width:11px;height:11px;border-radius:2px;background:var(--line);display:block}
.w2right{width:94px;flex:none;border-left:1px solid var(--line);padding:8px 8px 30px;display:flex;
 flex-direction:column;gap:6px}
.w2rt{font-size:9px;font-weight:700}
.w2rl{display:flex;flex-direction:column;gap:5px}
.w2rl i{height:6px;background:var(--line);border-radius:2px;display:block}
.w2rb{margin-top:auto;height:18px;border-radius:4px;background:var(--acc-fill);flex:none}
/* 改版前：更挤、更平 */
.wf2.old .w2side{width:74px;gap:4px}
.wf2.old .w2r{gap:2.5px;padding:4px 5px}
.wf2.old .w2c{flex:1}
@media(max-width:760px){
 .w2side{width:60px}.w2right{width:72px}.w2b{min-width:22px;padding:0 4px;font-size:7.5px}
}

/* D · 改版前后对比 */
.swrow{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.abwrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:stretch}
@media(max-width:900px){.abwrap{grid-template-columns:1fr}}
.abbox{position:relative;height:clamp(300px,32vw,392px);border:1px solid var(--line);
 border-radius:calc(max(0px, var(--r-lg) - 4px));overflow:hidden;background:var(--surface);
 cursor:ew-resize;user-select:none;touch-action:none}
.abtag{position:absolute;bottom:6px;font-size:10px;letter-spacing:.1em;padding:3px 9px;border-radius:99px;
 background:rgba(15,18,22,.72);color:#fff;pointer-events:none}
.abtag.l{left:9px}.abtag.r{right:9px;background:var(--acc-fill)}
.abafter{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 50%)}
.abhandle{position:absolute;top:0;bottom:0;width:2px;background:var(--acc);z-index:5;left:50%;
 transform:translateX(-1px);pointer-events:none}
.abhandle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;
 border-radius:50%;background:var(--acc-fill);display:grid;place-items:center;color:#fff;font-size:12px;
 font-style:normal;box-shadow:0 4px 14px rgba(15,18,22,.28)}
.abhint{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:4;font-size:10px;
 color:var(--muted);background:var(--surface);padding:2px 9px;border-radius:99px;border:1px solid var(--line);
 pointer-events:none;transition:opacity .4s}
.abbox.moved .abhint{opacity:0}

/* 线框 */
.wf{position:absolute;inset:0;z-index:1;background:var(--surface);padding:13px;display:flex;flex-direction:column;gap:8px}
.wf .wtop{display:flex;align-items:center;gap:8px}
.wf .wt{font-size:11.5px;font-weight:700;white-space:nowrap}
.wf .wsub{font-size:9.5px;color:var(--muted);white-space:nowrap}
.wf .wbtns{display:flex;gap:4px;margin-left:auto;flex:none}
.wf .wb{height:19px;border-radius:5px;background:var(--line);width:38px;display:grid;place-items:center;
 font-size:9px;color:var(--muted);white-space:nowrap}
.wf .wb.pri{background:var(--acc-fill);color:#fff;width:56px;font-weight:700}
.wf .wfil{display:flex;gap:4px;flex-wrap:wrap}
.wf .wc1{height:17px;border-radius:99px;border:1px solid var(--line);min-width:46px;padding:0 8px;
 display:grid;place-items:center;font-size:9px;color:var(--muted);white-space:nowrap}
.wf .wc1.more{border-style:dashed;color:var(--acc-txt);border-color:var(--acc-line)}
.wf .wtab{flex:1;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.wf .wr{display:flex;gap:5px;padding:5px 7px;border-bottom:1px solid var(--line);align-items:center}
.wf .wr:last-child{border-bottom:none}
.wf .wr.h{background:var(--surface-2)}
.wf .wcell{height:7px;background:var(--line);border-radius:2px;flex:1}
.wf .wr.h .wcell{height:5px;opacity:.75}
.wf .wcell.k{flex:2.4;background:var(--muted);opacity:.55;height:9px}
.wf .wr.h .wcell.k{height:5px;background:var(--line);opacity:.75}
.wf .wcell.s{flex:.9;background:var(--acc);opacity:.42;border-radius:99px}
.wf.old .wcell{flex:1}
.wf.old .wr{gap:3px;padding:5px}

/* 改动点 */
.abnotes{display:flex;flex-direction:column;gap:9px;justify-content:center}
.abn{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.65;color:var(--body)}
.abn i{width:17px;height:17px;border-radius:50%;background:var(--acc-fill);color:#fff;font-size:9.5px;
 font-style:normal;display:grid;place-items:center;flex:none;margin-top:2px;font-weight:700}
.abn b{color:var(--ink);font-weight:700}
.abmetric{display:flex;gap:14px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:11px;margin-top:2px}
.abmetric div{font-size:10.5px;color:var(--muted)}
.abmetric b{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-top:2px}

/* E · 设计决策记录 */
.adr{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);
 border-radius:calc(max(0px, var(--r-lg) - 4px));overflow:hidden}
.adri{background:var(--surface);transition:background .3s}
.adrh{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:10px 12px;transition:background .3s}
.adrh:hover{background:var(--acc-soft)}
.adrh .no3{font-size:9.5px;letter-spacing:.1em;color:var(--muted);flex:none;width:16px}
.adrh .tt{font-size:12.5px;font-weight:700;flex:1;line-height:1.4}
.adrh .pl2{width:18px;height:18px;flex:none;position:relative;border-radius:50%;border:1px solid var(--line);
 transition:all .35s var(--e2)}
.adrh .pl2::before,.adrh .pl2::after{content:"";position:absolute;left:50%;top:50%;background:var(--muted);
 transform:translate(-50%,-50%);transition:all .35s var(--e)}
.adrh .pl2::before{width:8px;height:1.5px}
.adrh .pl2::after{width:1.5px;height:8px}
.adri.open .pl2{background:var(--acc-fill);border-color:transparent}
.adri.open .pl2::before,.adri.open .pl2::after{background:#fff}
.adri.open .pl2::after{opacity:0}
.adrb{max-height:0;overflow:hidden;transition:max-height .5s var(--e)}
.adrb .in3{padding:2px 12px 13px 37px;display:flex;flex-direction:column;gap:9px}
.adrow{display:flex;gap:9px;font-size:11.5px;line-height:1.65}
.adrow .k3{flex:none;width:44px;color:var(--muted);font-size:10.5px;padding-top:1px}
.adrow .v3{flex:1;color:var(--body)}
.opts{display:flex;flex-direction:column;gap:5px}
.opt{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.55;color:var(--muted)}
.opt i{width:13px;height:13px;border-radius:50%;border:1px solid var(--line);flex:none;margin-top:2px;
 display:grid;place-items:center;font-size:8px;font-style:normal}
.opt.pick{color:var(--ink)}
.opt.pick i{background:var(--acc-fill);border-color:transparent;color:#fff}
.opt.pick b{font-weight:700}
.cost{background:var(--surface-2);border-left:2px solid var(--acc-line);padding:7px 10px;font-size:11px;
 line-height:1.6;color:var(--body);border-radius:0 6px 6px 0}
.cost b{color:var(--ink)}

/* F · 复杂表单拆解 */
.fsum{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:2px}
.fsum .big2{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
.fsum .arw{color:var(--muted);font-size:14px}
.fsum .sm2{font-size:11.5px;color:var(--muted)}
.fbar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--line);gap:1.5px}
.fbar i{display:block}
.fbar .keep{background:var(--acc-fill)}
.fbar .fold{background:var(--acc);opacity:.42}
.fbar .auto{background:var(--muted);opacity:.4}
.fbar .cut{background:repeating-linear-gradient(45deg,var(--line),var(--line) 3px,var(--surface-2) 3px,var(--surface-2) 6px)}
.flegend{display:flex;gap:11px;flex-wrap:wrap;font-size:10.5px;color:var(--muted)}
.flegend span{display:flex;align-items:center;gap:5px}
.flegend em{width:9px;height:9px;border-radius:3px;display:block;font-style:normal}
.fsteps{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fsteps button{flex:1;background:var(--surface);padding:7px 6px;font-size:11px;color:var(--muted);
 transition:all .3s var(--e2);line-height:1.35}
.fsteps button b{display:block;font-size:10px;font-weight:400;opacity:.75;margin-top:2px}
.fsteps button.on{background:var(--acc-fill);color:#fff;font-weight:700}
.fsteps button.on b{opacity:.85}
.fgroups{display:flex;flex-direction:column;gap:9px;min-height:104px}
.fg{border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--surface-2)}
.fg .gh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.fg .gh b{font-size:11.5px;font-weight:700}
.fg .gh span{font-size:10px;color:var(--muted)}
.fchips{display:flex;gap:4px;flex-wrap:wrap}
.fchips b{font-size:10px;font-weight:400;padding:3px 8px;border-radius:5px;border:1px solid var(--line);
 background:var(--surface);color:var(--body);white-space:nowrap}
.fchips b.keep{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc-txt);font-weight:700}
.fchips b.fold{border-style:dashed;color:var(--muted)}
.fchips b.auto{color:var(--muted);opacity:.8}
.fchips b.cut{text-decoration:line-through;color:var(--muted);opacity:.55;border-style:dotted}
.fnote{font-size:11.5px;line-height:1.65;color:var(--body);margin-top:auto}
.fnote b{color:var(--ink);font-weight:700}

/* E · 监控 */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.kpi{border:1px solid var(--line);border-radius:calc(max(0px, var(--r-lg) - 5px));padding:10px 11px;background:var(--surface-2)}
.kpi .kn{font-size:10.5px;color:var(--muted);margin-bottom:5px}
.kpi .kv{font-size:19px;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.kpi .kd{font-size:10.5px;margin-top:3px;display:flex;align-items:center;gap:3px}
.kpi .kd.up{color:var(--ok)}.kpi .kd.down{color:var(--warn)}.kpi .kd.flat{color:var(--muted)}
.chartbox{position:relative;border:1px solid var(--line);border-radius:calc(max(0px, var(--r-lg) - 5px));
 background:var(--surface-2);padding:12px 12px 6px}
.chartbox .ct{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.chartbox .ct b{font-size:11.5px;font-weight:700}
.chartbox .ct span{font-size:10.5px;color:var(--muted)}
.chartbox svg{display:block;width:100%;height:88px;overflow:visible}
#cTip{position:absolute;background:var(--ink);color:#fff;font-size:11px;padding:5px 9px;border-radius:7px;
 white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-120%);transition:opacity .18s;z-index:8}
#cTip.on{opacity:1}
.mnote{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.65;color:var(--body);
 background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:calc(max(0px, var(--r-lg) - 6px));padding:9px 11px}
.mnote i{width:15px;height:15px;border-radius:50%;background:var(--acc-fill);color:#fff;font-size:9px;font-style:normal;
 display:grid;place-items:center;flex:none;margin-top:1px;font-weight:700}
.mnote b{color:var(--ink);font-weight:700}

/* ============================ 项目 POC 弹窗 ============================ */
.pocmask{position:fixed;inset:0;z-index:400;background:rgba(10,12,16,.62);backdrop-filter:blur(6px);
 -webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:clamp(12px,3vw,40px);
 opacity:0;visibility:hidden;transition:opacity .35s var(--e),visibility .35s}
.pocmask.on{opacity:1;visibility:visible}
.pocdlg{width:min(1180px,100%);height:min(780px,90vh);background:var(--surface);border-radius:var(--r-lg);
 overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.4);
 transform:translateY(16px) scale(.985);transition:transform .4s var(--e)}
.pocmask.on .pocdlg{transform:none}
.pochd{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);
 background:var(--surface-2);flex:none}
.pochd .no5{font-size:10.5px;letter-spacing:.2em;color:var(--acc-txt);font-weight:700}
.pochd h3{font-size:clamp(16px,2vw,21px);font-weight:700;letter-spacing:-.01em;margin-top:4px}
.pochd .meta5{font-size:11.5px;color:var(--muted);margin-top:5px}
.pochd .rt5{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.pocdlg:focus{outline:none}
.pocx{width:36px;height:36px;padding:0;border-radius:10px;border:1px solid transparent;display:grid;place-items:center;
 color:var(--muted);background:transparent;cursor:pointer;flex:none;
 transition:background .16s ease,color .16s ease,border-color .16s ease}
.pocx svg{display:block;pointer-events:none}
.pocx:hover{background:var(--surface);color:var(--ink);border-color:var(--line)}
.pocx:active{background:var(--line);color:var(--ink)}
.pocx:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:10px}
.pocbody{flex:1;display:flex;min-height:0}
.pocstage{flex:1;min-width:0;overflow:auto;padding:clamp(14px,2.2vw,26px);background:var(--bg)}
.pocside{width:288px;flex:none;border-left:1px solid var(--line);padding:18px;overflow:auto;
 display:flex;flex-direction:column;gap:14px}
.pocside h4{font-size:12px;font-weight:700;letter-spacing:.02em}
.pocside p{font-size:12.5px;line-height:1.85;color:var(--body)}
.pocside .canlist{display:flex;flex-direction:column;gap:7px}
.pocside .canlist span{display:flex;gap:8px;font-size:12px;line-height:1.6;color:var(--body)}
.pocside .canlist i{width:15px;height:15px;border-radius:50%;background:var(--acc-soft);color:var(--acc-txt);
 font-size:9px;font-style:normal;display:grid;place-items:center;flex:none;margin-top:2px;font-weight:700}
.pocside .kw5{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.pocside .kw5 b{font-size:10px;font-weight:400;color:var(--muted);border:1px solid var(--line);
 border-radius:5px;padding:3px 8px}
@media(max-width:900px){
 .pocdlg{height:92vh}
 .pocbody{flex-direction:column}
 .pocside{width:auto;border-left:none;border-top:1px solid var(--line);max-height:44%}
 .pocstage{padding:14px}
}

/* 空态：还没做 POC 的项目 */
.pocempty{height:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:14px;text-align:center;color:var(--muted)}
.pocempty .thumb5{width:min(360px,80%);aspect-ratio:16/10;border:1px solid var(--line);border-radius:10px;
 position:relative;overflow:hidden;background:var(--surface)}
.pocempty .thumb5 .mk .b{background:var(--line)}
.pocempty .thumb5 .mk .x{background:var(--surface-2)}
.pocempty p{font-size:12.5px;line-height:1.8;max-width:34ch}

/* 列表行 / 卡片可点 */
tbody tr{cursor:pointer}
tbody tr .nm{display:flex;align-items:center;gap:8px}
tbody tr .go{font-size:10.5px;color:var(--acc);opacity:0;transform:translateX(-4px);
 transition:all .3s var(--e2);white-space:nowrap;font-weight:400}
tbody tr:hover .go{opacity:1;transform:none}
.pcard{cursor:pointer;position:relative}
.pcard .go2{position:absolute;top:9px;right:9px;font-size:10px;background:var(--acc-fill);color:#fff;
 padding:3px 9px;border-radius:99px;opacity:0;transform:translateY(-4px);transition:all .35s var(--e);z-index:2}
.pcard:hover .go2{opacity:1;transform:none}

/* ============================ POC 内部通用件 ============================ */
.pw{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
 border-radius:12px;overflow:hidden}
.pw-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);
 background:var(--surface-2)}
.pw-top b{font-size:13px;font-weight:700}
.pw-top span{font-size:11.5px;color:var(--muted);margin-left:auto}
.pw-body{padding:clamp(14px,2vw,22px)}
.pstep{display:flex;align-items:center;margin-bottom:20px}
.pstep .s5{display:flex;align-items:center;gap:8px;flex:none}
.pstep .s5 i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
 font-size:11px;font-style:normal;color:var(--muted);background:var(--surface);transition:all .35s var(--e2)}
.pstep .s5 span{font-size:12px;color:var(--muted);transition:color .3s;white-space:nowrap}
.pstep .s5.on i{background:var(--acc-fill);border-color:transparent;color:#fff}
.pstep .s5.on span{color:var(--ink);font-weight:700}
.pstep .s5.done i{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-txt)}
.pstep .ln5{flex:1;height:1.5px;background:var(--line);margin:0 10px;position:relative;overflow:hidden}
.pstep .ln5 i{position:absolute;inset:0;background:var(--acc-fill);transform:scaleX(0);transform-origin:left;
 transition:transform .45s var(--e)}
.pstep .ln5.done i{transform:none}
.pfield{margin-bottom:15px}
.pfield label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.pfield label em{font-style:normal;color:#C0564A;margin-left:3px}
.pfield input,.pfield select{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
 font-size:13px;font-family:inherit;background:var(--surface);color:var(--ink);outline:none;
 transition:border-color .3s,box-shadow .3s}
.pfield input:focus,.pfield select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.pfield .hint5{font-size:11px;color:var(--muted);margin-top:6px}
.pfield.err input{border-color:#C0564A}
.pfield.err .hint5{color:#C0564A}
.prow2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.prow2{grid-template-columns:1fr}}
.pactions{display:flex;gap:8px;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.pactions .right5{margin-left:auto;display:flex;gap:8px}
.ptest{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:-4px;margin-bottom:14px;min-height:20px}
.ptest .dot5{width:7px;height:7px;border-radius:50%;flex:none}
.ptest.idle{color:var(--muted)}
.ptest.load{color:var(--muted)}
.ptest.load .dot5{background:var(--muted);animation:pul5 .9s infinite}
@keyframes pul5{50%{opacity:.3}}
.ptest.ok{color:var(--ok)}.ptest.ok .dot5{background:var(--ok)}
.ptest.bad{color:#C0564A}.ptest.bad .dot5{background:#C0564A}
.pmap{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.pmap .mh{display:grid;grid-template-columns:1fr 24px 1fr;gap:10px;padding:8px 12px;background:var(--surface-2);
 font-size:11px;color:var(--muted);border-bottom:1px solid var(--line)}
.pmap .mr{display:grid;grid-template-columns:1fr 24px 1fr;gap:10px;padding:9px 12px;align-items:center;
 border-bottom:1px solid var(--line)}
.pmap .mr:last-child{border-bottom:none}
.pmap .mr .src{font-size:12.5px}
.pmap .mr .arw5{text-align:center;color:var(--muted);font-size:12px}
.pmap .mr select{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:7px;font-size:12px;
 font-family:inherit;background:var(--surface);color:var(--ink);outline:none}
.pmap .mr select:focus{border-color:var(--acc)}
.pmap .mr.auto5{background:var(--acc-soft)}
.pdone{text-align:center;padding:26px 10px}
.pdone .ic5{width:46px;height:46px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;
 place-items:center;font-size:20px;margin:0 auto 14px}
.pdone h5{font-size:16px;font-weight:700;margin-bottom:8px}
.pdone p{font-size:12.5px;color:var(--muted);line-height:1.8;max-width:38ch;margin:0 auto 16px}
.psum{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:18px}
.psum div{padding:10px 16px;border-right:1px solid var(--line);text-align:left}
.psum div:last-child{border-right:none}
.psum span{display:block;font-size:10.5px;color:var(--muted);margin-bottom:3px}
.psum b{font-size:13px;font-weight:700}

/* ============================ 弹窗：16:9 + 浏览器外观 ============================ */
.pocdlg{aspect-ratio:16/9;width:min(1320px,94vw,calc(88vh * 16 / 9));height:auto;max-height:none}
.pochd{padding:13px 16px}
.pochd h3{margin-top:0}
.pochd .meta5{margin-top:3px}
.pocbody{display:block}
.pocstage{padding:0;background:var(--surface);height:100%}
@media(max-width:900px){
 .pocdlg{aspect-ratio:auto;width:100%;height:92vh;max-height:none}
}

/* —— 浏览器外壳 —— */
.bw{--sa:#E1140A;--sa-d:#B81009;--sa-s:rgba(225,20,10,.08);--sa-l:rgba(225,20,10,.28);
 --si:#1B1D21;--sm:#6C7280;--sl:#E4E6EA;--sf:#F5F6F8;
 height:100%;display:flex;flex-direction:column;background:#DFE1E5;overflow:hidden;position:relative}
.bw-tabs{display:flex;align-items:flex-end;gap:4px;padding:6px 8px 0;flex:none;overflow-x:auto;scrollbar-width:none}
.bw-tabs::-webkit-scrollbar{display:none}
.bw-tab{display:flex;align-items:center;gap:8px;max-width:210px;min-width:110px;padding:7px 10px;
 background:#CDD0D6;border-radius:8px 8px 0 0;font-size:11.5px;color:#4A4E56;cursor:pointer;
 transition:background .25s;flex:none}
.bw-tab:hover{background:#D8DAE0}
.bw-tab.on{background:#fff;color:var(--si);font-weight:700}
.bw-tab .fav{width:12px;height:12px;border-radius:3px;background:var(--sa);flex:none}
.bw-tab .tt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-tab .x{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:13px;
 color:#7A7E86;flex:none;transition:background .2s}
.bw-tab .x:hover{background:rgba(0,0,0,.12);color:#000}
.bw-bar{display:flex;align-items:center;gap:7px;padding:8px 10px;background:#fff;flex:none;
 border-bottom:1px solid var(--sl)}
.bw-nav{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;
 color:#5A5E66;transition:background .2s;flex:none}
.bw-nav:hover:not(:disabled){background:#EDEEF1}
.bw-nav:disabled{opacity:.3}
.bw-url{flex:1;display:flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:99px;
 background:#F1F2F4;font-size:11.5px;color:#5A5E66;min-width:0}
.bw-url i{width:9px;height:11px;border:1.4px solid #8A8E96;border-top:none;border-radius:0 0 2px 2px;
 position:relative;flex:none;margin-top:3px}
.bw-url i::before{content:"";position:absolute;left:1px;right:1px;bottom:100%;height:5px;
 border:1.4px solid #8A8E96;border-bottom:none;border-radius:3px 3px 0 0}
.bw-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-url b{color:var(--si);font-weight:400}
.bw-reset{font-size:11px;color:#5A5E66;border:1px solid var(--sl);border-radius:7px;padding:4px 10px;
 flex:none;transition:all .25s}
.bw-reset:hover{background:#F1F2F4;color:var(--si)}
.bw-view{flex:1;background:#fff;overflow:auto;position:relative}
.bw-closed{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
 color:var(--sm);font-size:13px;background:var(--sf)}

/* ============================ 乐享+ 站内样式 ============================ */
.sh{font-size:13px;color:var(--si);line-height:1.6}
.sh-top{display:flex;align-items:center;gap:20px;padding:12px 22px;border-bottom:1px solid var(--sl);
 position:sticky;top:0;background:#fff;z-index:6}
.sh-logo{font-size:15px;font-weight:700;letter-spacing:-.01em;cursor:pointer;flex:none}
.sh-logo span{color:var(--sa)}
.sh-nav{display:flex;gap:16px;font-size:12.5px;color:#4A4E56}
.sh-nav b{font-weight:400;cursor:pointer;padding:3px 0;border-bottom:2px solid transparent;transition:all .25s}
.sh-nav b:hover{color:var(--sa);border-bottom-color:var(--sa)}
.sh-nav b.on{color:var(--sa);border-bottom-color:var(--sa);font-weight:700}
.sh-search{margin-left:auto;display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;
 border:1px solid var(--sl);border-radius:99px;font-size:11.5px;color:var(--sm);width:200px;flex:none}
.sh-cart{position:relative;display:flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer;flex:none;
 padding:5px 12px;border-radius:99px;border:1px solid var(--sl);transition:all .25s}
.sh-cart:hover{border-color:var(--sa);color:var(--sa)}
.sh-cart .cnt6{min-width:17px;height:17px;border-radius:99px;background:var(--sa);color:#fff;font-size:10px;
 display:grid;place-items:center;padding:0 5px}
.sh-wrap{padding:22px}

/* 首页 */
.sh-hero{border-radius:12px;padding:34px 32px;background:linear-gradient(115deg,#1B1D21,#3A2024 62%,var(--sa-d));
 color:#fff;display:flex;align-items:center;gap:24px;margin-bottom:22px;overflow:hidden;position:relative}
.sh-hero .ht{flex:1;min-width:0}
.sh-hero .tag6{display:inline-block;font-size:10.5px;letter-spacing:.14em;border:1px solid rgba(255,255,255,.4);
 border-radius:99px;padding:3px 11px;margin-bottom:12px}
.sh-hero h2{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:9px;line-height:1.3}
.sh-hero p{font-size:12.5px;opacity:.8;max-width:44ch;line-height:1.8}
.sh-hero .hb{margin-top:16px;display:inline-flex;gap:8px}
.sh-hero .visual6{width:210px;height:126px;flex:none;border-radius:9px;background:rgba(255,255,255,.08);
 border:1px solid rgba(255,255,255,.18);position:relative;overflow:hidden}
.sh-hero .visual6::after{content:"";position:absolute;left:14%;right:14%;top:18%;bottom:32%;
 border-radius:4px;background:rgba(255,255,255,.14)}
.sh-hero .visual6::before{content:"";position:absolute;left:6%;right:6%;bottom:16%;height:7px;border-radius:3px;
 background:rgba(255,255,255,.22)}
.sh-h3{font-size:15px;font-weight:700;margin:0 0 12px;display:flex;align-items:baseline;gap:9px}
.sh-h3 span{font-size:11.5px;color:var(--sm);font-weight:400}
.sh-h3 .more6{margin-left:auto;font-size:11.5px;color:var(--sa);cursor:pointer;font-weight:400}
.sh-scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.sh-scene{border:1px solid var(--sl);border-radius:10px;padding:15px;cursor:pointer;
 transition:all .3s cubic-bezier(.4,0,.2,1);background:#fff}
.sh-scene:hover{border-color:var(--sa);box-shadow:0 8px 22px rgba(225,20,10,.1);transform:translateY(-2px)}
.sh-scene .ic6{width:30px;height:30px;border-radius:8px;background:var(--sa-s);margin-bottom:10px;
 display:grid;place-items:center;font-size:14px}
.sh-scene b{display:block;font-size:13px;margin-bottom:4px}
.sh-scene span{font-size:11px;color:var(--sm);line-height:1.6}
.sh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sh-grid.g3{grid-template-columns:repeat(3,1fr)}
.sh-card{border:1px solid var(--sl);border-radius:10px;overflow:hidden;cursor:pointer;background:#fff;
 transition:all .3s cubic-bezier(.4,0,.2,1)}
.sh-card:hover{border-color:var(--sa);box-shadow:0 10px 26px rgba(27,29,33,.1);transform:translateY(-3px)}
.sh-card .img6{height:118px;background:var(--sf);position:relative;overflow:hidden;
 display:grid;place-items:center}
.sh-card .img6 .dev6{width:66%;height:56%;border-radius:5px;background:#C9CCD2;position:relative;
 transition:transform .4s cubic-bezier(.4,0,.2,1)}
.sh-card:hover .img6 .dev6{transform:scale(1.06)}
.sh-card .img6 .dev6::after{content:"";position:absolute;left:8%;right:8%;top:10%;bottom:22%;
 border-radius:3px;background:#EDEFF2}
.sh-card .img6 .badge6{position:absolute;top:8px;left:8px;font-size:10px;background:var(--sa);color:#fff;
 padding:2px 7px;border-radius:4px}
.sh-card .bd6{padding:11px 12px 13px}
.sh-card .nm6{font-size:12.5px;font-weight:700;margin-bottom:4px;line-height:1.45}
.sh-card .sp6{font-size:11px;color:var(--sm);margin-bottom:8px;line-height:1.5;
 display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sh-card .pr6{display:flex;align-items:baseline;gap:6px}
.sh-card .pr6 b{font-size:15px;color:var(--sa);font-weight:700}
.sh-card .pr6 s{font-size:11px;color:#A0A4AC}

/* 列表页 */
.sh-list{display:grid;grid-template-columns:186px 1fr;gap:18px}
.sh-fl{border:1px solid var(--sl);border-radius:10px;padding:14px;align-self:start;position:sticky;top:76px}
.sh-fl h4{font-size:12px;font-weight:700;margin-bottom:10px}
.sh-fl .fg6{margin-bottom:14px}
.sh-fl .fg6:last-child{margin-bottom:0}
.sh-fl .ft6{font-size:11px;color:var(--sm);margin-bottom:7px}
.sh-fl .fo6{display:flex;flex-wrap:wrap;gap:5px}
.sh-fl .fo6 b{font-size:11px;font-weight:400;border:1px solid var(--sl);border-radius:6px;padding:4px 9px;
 cursor:pointer;transition:all .22s}
.sh-fl .fo6 b:hover{border-color:var(--sa);color:var(--sa)}
.sh-fl .fo6 b.on{background:var(--sa);border-color:var(--sa);color:#fff}
.sh-fl .clr6{font-size:11px;color:var(--sa);cursor:pointer;margin-top:4px;display:inline-block}
.sh-lt{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sh-lt .rc6{font-size:12px;color:var(--sm)}
.sh-sort{margin-left:auto;display:flex;gap:2px;border:1px solid var(--sl);border-radius:8px;padding:2px}
.sh-sort b{font-size:11.5px;font-weight:400;padding:4px 11px;border-radius:6px;cursor:pointer;
 color:var(--sm);transition:all .22s}
.sh-sort b.on{background:var(--si);color:#fff;font-weight:700}
.sh-empty6{padding:50px;text-align:center;color:var(--sm);font-size:12.5px;
 border:1px dashed var(--sl);border-radius:10px}

/* 详情页 */
.sh-crumb{font-size:11.5px;color:var(--sm);margin-bottom:16px}
.sh-crumb b{font-weight:400;cursor:pointer}
.sh-crumb b:hover{color:var(--sa)}
.sh-dt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.sh-gal .big6{aspect-ratio:4/3;border:1px solid var(--sl);border-radius:11px;background:var(--sf);
 display:grid;place-items:center;margin-bottom:10px;overflow:hidden}
.sh-gal .big6 .dev6{width:64%;height:58%;border-radius:7px;background:#C9CCD2;position:relative;
 transition:all .35s}
.sh-gal .big6 .dev6::after{content:"";position:absolute;left:8%;right:8%;top:10%;bottom:22%;
 border-radius:4px;background:#EDEFF2}
.sh-gal .thumbs6{display:flex;gap:8px}
.sh-gal .thumbs6 i{width:54px;height:42px;border:1.5px solid var(--sl);border-radius:7px;background:var(--sf);
 cursor:pointer;transition:all .25s;display:block}
.sh-gal .thumbs6 i.on{border-color:var(--sa)}
.sh-info h1{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;line-height:1.35}
.sh-info .sub6{font-size:12px;color:var(--sm);margin-bottom:14px}
.sh-price{background:var(--sf);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.sh-price .now6{font-size:26px;font-weight:700;color:var(--sa);letter-spacing:-.02em}
.sh-price .now6 em{font-size:14px;font-style:normal;margin-right:2px}
.sh-price .old6{font-size:12px;color:#A0A4AC;margin-left:8px}
.sh-price .tip6{font-size:11px;color:var(--sm);margin-top:5px}
.sh-opt{margin-bottom:14px}
.sh-opt .ot6{font-size:11.5px;color:var(--sm);margin-bottom:7px;display:flex;align-items:baseline;gap:8px}
.sh-opt .ot6 span{color:var(--si);font-weight:700}
.sh-opt .oo6{display:flex;flex-wrap:wrap;gap:7px}
.sh-opt .oo6 b{font-size:12px;font-weight:400;border:1.5px solid var(--sl);border-radius:8px;padding:7px 13px;
 cursor:pointer;transition:all .22s;position:relative}
.sh-opt .oo6 b:hover{border-color:var(--sa)}
.sh-opt .oo6 b.on{border-color:var(--sa);color:var(--sa);background:var(--sa-s);font-weight:700}
.sh-opt .oo6 b em{font-style:normal;color:var(--sm);font-size:11px;margin-left:5px}
.sh-opt .oo6 b.on em{color:var(--sa)}
.sh-buy{display:flex;gap:10px;margin-top:18px}
.sbtn{padding:11px 24px;border-radius:9px;font-size:13.5px;font-weight:700;transition:all .25s;flex:1}
.sbtn.pri6{background:var(--sa);color:#fff}
.sbtn.pri6:hover{background:var(--sa-d)}
.sbtn.sec6{border:1.5px solid var(--sa);color:var(--sa);background:#fff}
.sbtn.sec6:hover{background:var(--sa-s)}
.sbtn.gh6{border:1px solid var(--sl);color:var(--si);background:#fff;font-weight:400;flex:none;padding:11px 18px}
.sbtn.gh6:hover{border-color:var(--si)}
.sh-spec{margin-top:26px;border-top:1px solid var(--sl);padding-top:20px}
.sh-spec h4{font-size:14px;font-weight:700;margin-bottom:12px}
.sh-spec table{width:100%;border-collapse:collapse;min-width:0}
.sh-spec td{padding:9px 12px;border:1px solid var(--sl);font-size:12px}
.sh-spec td:nth-child(odd){background:var(--sf);color:var(--sm);width:110px}

/* 购物车 */
.sh-cartwrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;align-items:start}
.sh-ct{border:1px solid var(--sl);border-radius:10px;overflow:hidden}
.sh-ct .hh6{display:grid;grid-template-columns:26px 1fr 90px 108px 84px 34px;gap:10px;padding:10px 14px;
 background:var(--sf);font-size:11px;color:var(--sm);align-items:center}
.sh-ct .rr6{display:grid;grid-template-columns:26px 1fr 90px 108px 84px 34px;gap:10px;padding:13px 14px;
 border-top:1px solid var(--sl);align-items:center}
.sh-ct .nm7{font-size:12.5px;font-weight:700;margin-bottom:3px}
.sh-ct .cf7{font-size:11px;color:var(--sm)}
.sh-ct .pz7{font-size:12.5px}
.sh-ct .sub7{font-size:13px;font-weight:700;color:var(--sa)}
.sh-ct .del7{font-size:11.5px;color:var(--sm);cursor:pointer}
.sh-ct .del7:hover{color:var(--sa)}
.qty7{display:inline-flex;align-items:center;border:1px solid var(--sl);border-radius:7px;overflow:hidden}
.qty7 b{width:26px;height:26px;display:grid;place-items:center;font-size:14px;font-weight:400;cursor:pointer;
 color:var(--sm);transition:background .2s}
.qty7 b:hover{background:var(--sf);color:var(--si)}
.qty7 span{width:34px;text-align:center;font-size:12.5px;border-left:1px solid var(--sl);
 border-right:1px solid var(--sl);height:26px;line-height:26px}
.cbx7{width:15px;height:15px;border:1.5px solid var(--sl);border-radius:4px;cursor:pointer;
 display:grid;place-items:center;transition:all .2s}
.cbx7.on{background:var(--sa);border-color:var(--sa)}
.cbx7.on::after{content:"";width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
 transform:rotate(-45deg);margin-top:-2px}
.sh-sum{border:1px solid var(--sl);border-radius:10px;padding:16px;position:sticky;top:76px}
.sh-sum h4{font-size:13px;font-weight:700;margin-bottom:12px}
.sh-sum .ln7{display:flex;justify-content:space-between;font-size:12px;color:var(--sm);margin-bottom:8px}
.sh-sum .ln7 b{color:var(--si);font-weight:400}
.sh-sum .tot7{display:flex;justify-content:space-between;align-items:baseline;padding-top:11px;
 border-top:1px solid var(--sl);margin-top:11px;margin-bottom:14px}
.sh-sum .tot7 span{font-size:12px}
.sh-sum .tot7 b{font-size:20px;color:var(--sa);font-weight:700}
.sh-blank{padding:56px 20px;text-align:center;color:var(--sm);font-size:12.5px}
.sh-blank .bi7{width:52px;height:52px;border-radius:50%;background:var(--sf);margin:0 auto 14px;
 display:grid;place-items:center;font-size:20px}

/* 结算 / 成功 */
.sh-co{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;align-items:start}
.sh-blk{border:1px solid var(--sl);border-radius:10px;padding:16px;margin-bottom:14px}
.sh-blk h4{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sh-blk h4 i{width:4px;height:13px;border-radius:2px;background:var(--sa);font-style:normal}
.sh-addr{display:flex;gap:10px;flex-wrap:wrap}
.sh-addr div{flex:1;min-width:190px;border:1.5px solid var(--sl);border-radius:9px;padding:11px 13px;
 cursor:pointer;transition:all .22s;font-size:12px}
.sh-addr div:hover{border-color:var(--sa)}
.sh-addr div.on{border-color:var(--sa);background:var(--sa-s)}
.sh-addr b{display:block;font-size:12.5px;margin-bottom:4px}
.sh-addr span{color:var(--sm);font-size:11.5px;line-height:1.6}
.sh-pay{display:flex;gap:10px;flex-wrap:wrap}
.sh-pay div{flex:1;min-width:130px;border:1.5px solid var(--sl);border-radius:9px;padding:12px;cursor:pointer;
 display:flex;align-items:center;gap:9px;font-size:12.5px;transition:all .22s}
.sh-pay div:hover{border-color:var(--sa)}
.sh-pay div.on{border-color:var(--sa);background:var(--sa-s);font-weight:700}
.sh-pay i{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--sl);flex:none;font-style:normal;
 display:grid;place-items:center}
.sh-pay div.on i{border-color:var(--sa)}
.sh-pay div.on i::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--sa)}
.sh-mini{display:flex;gap:10px;align-items:center;font-size:12px;padding:8px 0;border-bottom:1px solid var(--sl)}
.sh-mini:last-child{border-bottom:none}
.sh-mini .mi7{width:34px;height:26px;border-radius:5px;background:var(--sf);flex:none}
.sh-mini .mn7{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-mini .mp7{color:var(--sa);font-weight:700;flex:none}
.sh-ok{max-width:460px;margin:40px auto;text-align:center}
.sh-ok .oi7{width:58px;height:58px;border-radius:50%;background:rgba(46,125,91,.1);color:#2E7D5B;
 display:grid;place-items:center;font-size:26px;margin:0 auto 16px}
.sh-ok h2{font-size:19px;font-weight:700;margin-bottom:8px}
.sh-ok p{font-size:12.5px;color:var(--sm);line-height:1.85;margin-bottom:18px}
.sh-ok .no7{display:inline-block;font-size:12px;background:var(--sf);border-radius:7px;padding:8px 14px;
 margin-bottom:20px;color:var(--si)}
.sh-ok .ob7{display:flex;gap:10px;justify-content:center}
.sh-toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,14px);background:rgba(27,29,33,.94);
 color:#fff;font-size:12px;padding:9px 16px;border-radius:9px;opacity:0;visibility:hidden;z-index:20;
 transition:all .32s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.sh-toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:900px){
 .sh-scenes,.sh-grid{grid-template-columns:repeat(2,1fr)}
 .sh-list,.sh-cartwrap,.sh-co,.sh-dt{grid-template-columns:1fr}
 .sh-fl,.sh-sum{position:static}
 .sh-nav,.sh-search{display:none}
}

/* 列表里的「预览」按钮 */
.prevbtn{font-size:11px;border:1px solid var(--dark-line);border-radius:7px;padding:5px 13px;
 color:var(--dark-text);transition:all .25s;white-space:nowrap;background:transparent}
.prevbtn:hover{background:var(--acc-fill);border-color:transparent;color:#fff}
tbody tr:hover .prevbtn{border-color:var(--acc-line)}

/* Toast */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:200;
 background:var(--ink);color:#fff;font-size:13px;padding:11px 18px;border-radius:12px;display:flex;
 align-items:center;gap:9px;box-shadow:0 18px 40px rgba(0,0,0,.28);opacity:0;visibility:hidden;
 transition:all .4s var(--e)}
#toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
#toast i{width:17px;height:17px;border-radius:50%;background:var(--ok);color:#fff;font-size:10px;
 display:grid;place-items:center;font-style:normal;flex:none}

/* ============================ 经历 · 手风琴 ============================ */
#exp{background:var(--bg)}
.acc{border-top:1px solid var(--line)}
.acc .item{border-bottom:1px solid var(--line)}
.acc .ah{display:flex;align-items:center;gap:clamp(12px,2.6vw,40px);padding:20px 0;width:100%;text-align:left;
 transition:padding-left .5s var(--e)}
.acc .item:hover .ah{padding-left:10px}
.acc .ah .t{font-size:11.5px;letter-spacing:.1em;color:var(--muted);width:150px;flex:none}
.acc .ah .n{flex:1;min-width:0}
.acc .ah h3{font-size:clamp(17px,2vw,23px);font-weight:700;letter-spacing:-.01em}
.acc .ah .rl{font-size:12.5px;color:var(--acc-txt);margin-top:3px}
.acc .ah .pl{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);flex:none;position:relative;
 transition:all .4s var(--e2)}
.acc .ah .pl::before,.acc .ah .pl::after{content:"";position:absolute;left:50%;top:50%;background:var(--muted);
 transform:translate(-50%,-50%);transition:all .4s var(--e)}
.acc .ah .pl::before{width:10px;height:1.5px}
.acc .ah .pl::after{width:1.5px;height:10px}
.acc .item.open .ah .pl{background:var(--acc-fill);border-color:var(--acc)}
.acc .item.open .ah .pl::before,.acc .item.open .ah .pl::after{background:#fff}
.acc .item.open .ah .pl::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc .bd{overflow:hidden;max-height:0;transition:max-height .55s var(--e)}
.acc .bd .inner{padding:0 0 24px;display:grid;grid-template-columns:150px 1fr;gap:clamp(12px,2.6vw,40px)}
.acc .bd p{font-size:14px;line-height:1.95;color:var(--body);max-width:62ch;grid-column:2}
.acc .bd .kw{grid-column:2;display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.acc .bd .kw b{font-size:11px;font-weight:400;color:var(--muted);border:1px solid var(--line);
 border-radius:6px;padding:3px 9px;background:var(--surface)}
@media(max-width:760px){
 .acc .ah .t{width:auto;font-size:11px}
 .acc .ah{flex-wrap:wrap;gap:6px}
 .acc .ah .n{flex-basis:100%;order:3}
 .acc .bd .inner{grid-template-columns:1fr}
 .acc .bd p,.acc .bd .kw{grid-column:1}
}

/* ============================ 联系 ============================ */
#contact{background:var(--dark);color:var(--dark-text);
 border-radius:clamp(18px,2.4vw,36px) clamp(18px,2.4vw,36px) 0 0;position:relative;z-index:3}
.cbox{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,3.4vw,56px);align-items:start}
@media(max-width:900px){.cbox{grid-template-columns:1fr}}
.mailrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
 border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);padding:22px 0;margin-bottom:22px}
.mailrow a{font-size:clamp(19px,3.2vw,40px);font-weight:700;letter-spacing:-.02em;word-break:break-all;
 position:relative;padding-bottom:4px}
.mailrow a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--acc);
 transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e)}
.mailrow a:hover::after{transform:scaleX(1);transform-origin:left}
.copybtn{border:1px solid var(--dark-line);color:var(--dark-muted);padding:7px 13px;border-radius:9px;font-size:12px;
 transition:all .3s var(--e2);white-space:nowrap}
.copybtn:hover{border-color:var(--acc);color:#fff;background:var(--acc-fill)}
.cinfo{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--dark-line);
 border:1px solid var(--dark-line);border-radius:calc(max(0px, var(--r-lg) - 4px));overflow:hidden}
.cinfo div{background:var(--dark-2);padding:16px 18px}
.cinfo h5{font-size:10.5px;letter-spacing:.2em;color:var(--dark-muted);margin-bottom:7px}
.cinfo p{font-size:14px}
.cnote{font-size:13px;color:var(--dark-muted);line-height:1.9;max-width:44ch}
footer{background:var(--dark);color:var(--dark-muted);padding:22px var(--pad);
 border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
 font-size:11.5px;position:relative;z-index:3}
.up{cursor:pointer;transition:color .3s}
.up:hover{color:#fff}

/* Project walkthrough controls stay outside the embedded product. */
.poc-tour[hidden]{display:none}
.poc-tour{display:flex;align-items:center;gap:14px;align-self:center;min-width:0;margin-left:12px}
.poc-tour-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;min-height:34px;padding:7px 13px;border:1px solid #d8c3dd;border-radius:9px;background:#f4ecf6;color:#6b3066;font-family:inherit;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;white-space:nowrap}
.poc-tour-button:hover{background:#eadcee}.poc-tour-button:focus-visible{outline:2px solid #7d3c71;outline-offset:3px}.poc-tour-button:disabled{opacity:.5;cursor:wait}
#pocTourIcon{font-size:11px;min-width:12px}.poc-tour-info{min-width:0;max-width:270px;font-size:11px;line-height:1.5;color:var(--muted)}
#pocTourStatus{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poc-tour-track{height:2px;background:#e8deec;margin-top:6px;border-radius:2px;overflow:hidden}.poc-tour-track i{display:block;width:0;height:100%;background:#7d3c71;transition:width .25s}
@media(max-width:900px){.poc-tour{margin-left:0;gap:8px}.poc-tour-info{max-width:180px}}
@media(max-width:640px){.pochd{flex-wrap:wrap;gap:8px}.poc-tour{order:3;width:100%}.poc-tour-info{max-width:none;flex:1}.poc-tour-button{min-height:36px}}

/* Project descriptions yield space to the compact metadata columns. */
#tableView th:first-child,#tableView td:first-child{width:100%}
#tableView .sub{max-width:560px;white-space:normal;overflow-wrap:break-word;line-height:1.8}
#tableView th:not(:first-child),#tableView td:not(:first-child){width:1%;white-space:nowrap}
@media(max-width:640px){
 #tableView table{min-width:780px}
 #tableView td:nth-child(2),#tableView td:nth-child(3){white-space:normal;min-width:80px}
}

/* 尚未补齐资料的项目，保留通用弹窗入口。 */
.project-pending{box-sizing:border-box;min-height:100%;padding:clamp(28px,6vw,88px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:#f7f8fa;color:#262b33}
.pending-kicker{font-size:12px;letter-spacing:.12em;color:#737d8b}
.project-pending h3{font-size:clamp(24px,3vw,38px);line-height:1.35;margin:20px 0 14px}
.project-pending p{max-width:560px;font-size:15px;line-height:1.9;color:#68717f}
.pending-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pending-tags span{padding:6px 12px;border:1px solid #dfe2e8;border-radius:8px;font-size:12px;color:#596372}
.pending-note{margin-top:40px;padding-top:22px;border-top:1px solid #dfe2e8;width:100%;font-size:13px;line-height:1.9;color:#7c8490}

.poc-tour-button[hidden]{display:none}
@media(max-width:640px){.poc-tour{flex-wrap:wrap}.poc-tour-info{flex-basis:100%}}

/* 项目清单：以公司与项目组组织，样式仅作用于清单区域。 */
#list{--pi-panel:#12151b;--pi-row:#181c23;--pi-line:rgba(255,255,255,.09);--pi-text:#e7eaf0;--pi-muted:#9aa3b1;--pi-accent:#d4a8df;color:var(--pi-text)}
#list .hd{margin-bottom:28px}#list .hd p{max-width:740px}
#list .project-filters{display:flex;flex-direction:column;gap:14px;padding:20px 24px;background:var(--pi-panel);border:1px solid var(--pi-line);border-radius:14px}
#list .filter-line{display:flex;align-items:center;gap:20px}#list .filter-label{width:32px;flex:none;font-size:12px;color:var(--pi-muted)}#list .chips{display:flex;flex-wrap:wrap;gap:8px}
#list .chip{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;min-height:34px;background:transparent;border:1px solid var(--pi-line);color:var(--pi-muted);border-radius:99px;font-size:12px;line-height:1.5}
#list .chip em{font-size:11px;font-style:normal;color:inherit;opacity:.75;background:none;padding:0;margin:0}#list .chip.on{background:#b783ca19;border-color:#b783ca66;color:#e2bfeb}#list .chip:hover:not(:disabled){border-color:#b783ca88;color:#eee}#list .chip:disabled{opacity:.35;cursor:not-allowed}
#list .project-controls{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:20px 0 30px;font-size:12px;color:var(--pi-muted)}#list .project-options{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:16px}#list .project-sort{display:flex;align-items:center;gap:8px}
#list .project-sort select,#list #densitySwitch,#list #resetFilters{font:inherit;color:var(--pi-muted);background:var(--pi-panel);border:1px solid var(--pi-line);border-radius:8px;min-height:34px;padding:6px 10px;cursor:pointer}
#list #densitySwitch[aria-pressed=true]{color:var(--pi-accent);border-color:#b783ca88}#list #resetFilters{background:transparent;color:var(--pi-accent)}
#list .seg{padding:3px;border:1px solid var(--pi-line);background:var(--pi-panel);border-radius:9px}#list .seg button{padding:6px 15px;color:var(--pi-muted);font-size:12px}#list .seg button.on{background:#d4a8df;color:#201425;box-shadow:none}
#list .project-groups{display:flex;flex-direction:column;gap:56px}#list .company-heading{display:flex;align-items:center;gap:14px;margin-bottom:16px}#list .company-heading h3{font-size:22px;font-weight:600;white-space:nowrap}#list .company-heading span{font-size:12px;color:var(--pi-muted);white-space:nowrap}#list .company-heading>i{height:1px;flex:1;background:var(--pi-line)}
#list .family-grid{display:grid;gap:14px}#list .project-family{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.6fr);gap:32px;padding:24px;background:var(--pi-panel);border:1px solid var(--pi-line);border-radius:14px;min-width:0}
#list .family-intro{min-width:0}#list .family-intro h4{display:flex;align-items:baseline;gap:10px;font-size:17px;line-height:1.6;font-weight:500;color:var(--pi-text)}#list .family-intro h4 i{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--family-color);align-self:center}#list .family-intro p{font-size:13px;line-height:1.85;margin-top:10px;color:var(--pi-muted);text-wrap:pretty}#list .family-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}#list .family-tags span{font-size:11px;line-height:1.5;padding:3px 9px;background:#ffffff06;color:#bbc3cd;border:1px solid var(--pi-line);border-radius:99px}
#list .family-items{min-width:0;align-self:start}#list .family-project{display:grid;grid-template-columns:66px minmax(0,1fr) auto;align-items:baseline;gap:16px;width:100%;padding:16px 12px;border:0;border-top:1px solid var(--pi-line);border-radius:0;background:transparent;color:var(--pi-text);text-align:left;cursor:pointer;font:inherit;transition:background .18s ease}
#list .family-project:first-child{border-top:0;padding-top:6px}#list .family-project:last-child{padding-bottom:6px}#list .family-project:hover{background:#ffffff04}#list .project-end{font-size:11px;color:var(--pi-muted);white-space:nowrap}#list .project-copy{display:flex;flex-direction:column;gap:5px;min-width:0}#list .project-copy strong{font-size:14px;font-weight:500;line-height:1.65;overflow-wrap:anywhere}#list .project-description{font-size:12px;line-height:1.8;color:var(--pi-muted)}#list .project-meta{font-size:11px;color:#8f99a7;line-height:1.6;display:flex;flex-wrap:wrap;gap:10px;margin-top:3px}#list .project-status{color:#bdab89}#list .project-preview{font-size:11px;line-height:1.6;padding:4px 10px;border:1px solid #c090cf55;color:var(--pi-accent);border-radius:6px;white-space:nowrap;transition:background .18s}#list .family-project:hover .project-preview{background:#c090cf1c;border-color:#c090cf99}
#list .is-card .family-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}#list .is-card .project-family{display:flex;flex-direction:column;gap:20px;height:100%}#list .is-card .family-items{width:100%;margin-top:auto;border:1px solid var(--pi-line);border-radius:10px;overflow:hidden;background:var(--pi-row)}#list .is-card .family-project{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:14px}#list .is-card .project-end{grid-column:1;grid-row:2}#list .is-card .project-copy{grid-column:1;grid-row:1}#list .is-card .project-preview{grid-column:2;grid-row:1 / 3;align-self:center}#list .is-card .project-description,#list .is-card .project-meta{display:none}
#list.project-compact .project-meta{display:none}
#list.project-compact #projectGroups .project-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis}#list.project-compact .family-project{padding-top:12px;padding-bottom:12px}#list.project-compact .family-intro p{display:none}#list .note{color:var(--pi-muted);margin-top:22px;font-size:12px}
#list button:focus-visible,#list select:focus-visible{outline:2px solid var(--pi-accent);outline-offset:3px}
@media(min-width:1450px){#list .is-card .family-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){#list .project-family{grid-template-columns:1fr;gap:20px}#list .project-controls{align-items:flex-start}#list .project-options{margin-left:0;width:100%}#list .is-card .family-grid{grid-template-columns:1fr}}
@media(max-width:520px){#list .project-filters{padding:16px;gap:16px}#list .filter-line{align-items:flex-start;gap:10px}#list .filter-label{width:24px;padding-top:7px}#list .chip{padding:6px 10px}#list .project-family{padding:18px 16px}#list .family-project{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:16px 0}#list .project-end{grid-row:1;grid-column:1}#list .project-copy{grid-row:2;grid-column:1}#list .project-preview{grid-row:2;grid-column:2;align-self:start}#list .project-options{gap:10px}#list .project-sort{flex:1}#list .company-heading{gap:10px}#list .company-heading h3{font-size:20px}#list .company-heading span{font-size:11px}#list .company-heading>i{display:none}}

/* 项目状态与预览统一靠右，列表、卡片及精简模式均保留状态。 */
#list .project-actions{display:flex;flex-direction:column;align-items:flex-end;gap:9px;align-self:start;white-space:nowrap}
#list .project-actions .project-status{font-size:11px;line-height:1.6;color:#c6ae85}
#list .project-actions .project-status.ok{color:#8fbaaa}
#list .is-card .project-actions{grid-column:2;grid-row:1 / 3;align-self:center}
#list .project-actions .project-preview{display:block}
@media(max-width:520px){#list .filter-label{width:28px;white-space:nowrap}#list .project-actions{grid-row:2;grid-column:2}#list .is-card .project-actions{grid-row:1 / 3}}

/* 分组矩阵：每项独立成卡，消除长组的侧栏空白。 */
#list .project-actions{flex-direction:row;align-items:center;justify-content:flex-end;gap:12px;width:118px;align-self:start}
#list .project-actions .project-status{width:48px;flex:none;text-align:center;line-height:28px}
#list .project-actions .project-preview{width:58px;flex:none;text-align:center;line-height:20px;padding:3px 0}
#list .project-copy strong{min-height:28px;display:flex;align-items:center}
#list .project-end{line-height:28px}
#list .project-groups:not(.is-card) .family-grid{gap:30px}
#list .project-groups:not(.is-card) .project-family{display:block;padding:0;border:0;background:none;border-radius:0}
#list .project-groups:not(.is-card) .family-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;margin-bottom:16px;padding:0 2px}
#list .project-groups:not(.is-card) .family-intro p{grid-column:1;margin:0;max-width:860px}
#list .project-groups:not(.is-card) .family-tags{grid-column:2;grid-row:1 / 3;align-self:center;margin:0}
#list .project-groups:not(.is-card) .family-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
#list .project-groups:not(.is-card) .family-project{grid-template-columns:minmax(0,1fr) 118px;grid-template-rows:auto 1fr;align-items:start;gap:12px 16px;padding:20px 22px;border:1px solid var(--pi-line);border-radius:12px;background:var(--pi-panel);transition:border-color .18s,background .18s}
#list .project-groups:not(.is-card) .family-project:hover{border-color:#c090cf66;background:#191c24}
#list .project-groups:not(.is-card) .project-end{grid-column:1;grid-row:1;align-self:center}
#list .project-groups:not(.is-card) .project-actions{grid-column:2;grid-row:1}
#list .project-groups:not(.is-card) .project-copy{grid-column:1 / -1;grid-row:2;height:100%;gap:8px}
#list .project-groups:not(.is-card) .project-copy strong{font-size:16px}
#list .project-groups:not(.is-card) .project-description{font-size:13px;line-height:1.8}
#list .project-groups:not(.is-card) .project-meta{margin-top:auto;padding-top:8px}
#list .project-groups:not(.is-card) .project-family:not(.family-multiple) .family-items{grid-template-columns:1fr}
#list .project-groups:not(.is-card) .project-family:not(.family-multiple) .family-intro{display:none}
#list .project-groups:not(.is-card) .project-family:not(.family-multiple) .project-copy{grid-column:1;grid-row:1 / 3}
#list .project-groups:not(.is-card) .project-family:not(.family-multiple) .project-end{grid-column:2;grid-row:2;text-align:right}
#list .is-card .project-actions{width:auto;gap:9px;flex-direction:column;align-self:start}
#list .is-card .project-actions .project-status{line-height:20px}
@media(max-width:720px){
 #list .project-groups:not(.is-card) .family-items{grid-template-columns:1fr}
 #list .project-groups:not(.is-card) .family-intro{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
 #list .project-groups:not(.is-card) .family-tags{align-self:flex-start}
 #list .project-groups:not(.is-card) .family-project{padding:18px}
 #list .project-groups:not(.is-card) .project-family:not(.family-multiple) .project-copy{grid-column:1 / -1;grid-row:2}
 #list .project-groups:not(.is-card) .project-family:not(.family-multiple) .project-end{grid-column:1;grid-row:1;text-align:left}
}

/* 首页个人介绍保留段落换行 */
#heroLead { white-space: pre-line; }

/* Featured home diagrams preserve the product layout at every viewport. */
.dcard .vis{display:grid;place-items:center;min-height:0}
@media(max-width:900px){.dcard .vis{height:auto;aspect-ratio:1200/570}}

/* Abstract featured wireframes share the original subdued sketch language. */
.featured-wireframe{width:100%;height:100%;padding:clamp(10px,1.4vw,18px);display:flex;flex-direction:column;gap:10px;overflow:hidden;--fw-fill:rgba(190,198,214,.08);--fw-stroke:rgba(190,198,214,.12)}
.fw-line{display:block;height:6px;min-height:3px;border-radius:3px;background:rgba(190,198,214,.19)}
.fw-accent{background:rgba(191,127,198,.58)!important}
.fw-top{display:flex;gap:18px;align-items:center;height:15px;flex:none}.fw-top>div{display:flex;gap:9px;flex:1;justify-content:center}.fw-top>b{width:12px;height:12px;border-radius:50%;background:var(--fw-fill)}
.fw-body{display:flex;gap:12px;flex:1;min-height:0}.fw-rail{width:13%;padding:15px 9px;display:flex;flex-direction:column;gap:18px;background:var(--fw-fill);border-radius:7px;flex:none}.fw-rail i{display:block;width:78%;height:5px;border-radius:3px;background:rgba(190,198,214,.17)}
.fw-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:12px}.fw-heading{display:flex;flex-direction:column;gap:10px;padding:8px 0}.fw-heading>.fw-accent{height:9px}.fw-block{background:var(--fw-fill);border-radius:7px;padding:12px;display:flex;flex-direction:column;gap:9px;min-width:0;min-height:0;position:relative}.fw-selected{background:rgba(173,116,183,.22)}
.fw-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;flex:1}.fw-columns{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;flex:2;min-height:0}.fw-list,.fw-flow{border:1px solid var(--fw-stroke);border-radius:7px;padding:10px;display:flex;flex-direction:column;justify-content:space-around;gap:8px}.fw-list>div{display:flex;flex-direction:column;gap:9px}.fw-flow>div{display:flex;align-items:center;gap:9px}.fw-flow b{width:12px;height:12px;border-radius:50%;background:var(--fw-fill)}
.fw-shop .fw-rail{width:5%;padding:15px 6px}.fw-shop .fw-main{padding:0 9%}.fw-shop .fw-heading{align-items:center}.fw-composer{padding:15px;border:1px solid rgba(191,127,198,.3);border-radius:9px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;flex:1}.fw-chips{display:flex;gap:7px}.fw-chips i{width:17%;height:12px;border-radius:7px;background:var(--fw-fill)}.fw-chips b{width:16px;height:16px;border-radius:50%;margin-left:auto}.fw-tabs{display:flex;justify-content:center;gap:8px}.fw-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1.7;min-height:0}.fw-products>div{display:flex;flex-direction:column;gap:8px}.fw-products b{flex:1;background:var(--fw-fill);border-radius:7px;min-height:15px}
.fw-wuma .fw-rail,.fw-dnake .fw-rail{width:6%;align-items:center;padding-inline:7px;justify-content:space-around;gap:8px}.fw-wuma .fw-rail i,.fw-dnake .fw-rail i{width:12px;height:12px;border-radius:4px}.fw-wuma-top{display:grid;grid-template-columns:1.65fr 1fr;gap:12px;flex:2;min-height:0}.fw-weather>div{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-top:auto}.fw-weather>div>.fw-line:first-child{height:16px}.fw-wuma-side{display:grid;grid-template-rows:1fr 1fr;gap:10px;min-height:0}.fw-energy{display:flex;justify-content:space-evenly;align-items:center;border-radius:7px;background:var(--fw-fill);min-height:0}.fw-energy i{height:65%;aspect-ratio:1;border:5px solid rgba(191,127,198,.35);border-radius:50%}.fw-energy i+ i{border-radius:12px;border-color:var(--fw-stroke)}.fw-scenes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;flex:1;min-height:0}
.fw-dnake .fw-main{display:grid;grid-template-columns:.7fr 1.4fr 1.3fr;gap:12px}.fw-clock{padding:10px 0;display:flex;flex-direction:column;gap:10px;justify-content:space-between}.fw-clock>b{height:23px;width:85%;border-radius:4px;margin-block:auto}.fw-clock>div{display:flex;flex-direction:column;gap:9px}.fw-dnake-center{display:grid;grid-template-rows:1fr 2fr;gap:10px;min-height:0}.fw-pair,.fw-services,.fw-devices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;min-height:0}.fw-services{grid-template-rows:repeat(2,minmax(0,1fr))}.fw-devices{grid-template-rows:repeat(3,minmax(0,1fr))}.fw-lift{grid-column:2;grid-row:2/4}.fw-toggle{width:25px;height:12px;border-radius:9px;background:var(--fw-stroke);margin-top:auto;align-self:flex-end}
@media(max-width:600px){.featured-wireframe{gap:7px}.fw-body,.fw-main,.fw-dnake .fw-main{gap:7px}.fw-block{padding:6px;gap:5px}.fw-line{height:4px}.fw-rail{gap:12px;padding:9px 5px}.fw-heading{padding:3px 0;gap:6px}.fw-top{gap:9px;height:10px}.fw-composer{padding:8px;gap:9px}.fw-products>div{gap:5px}.fw-energy i{border-width:3px}.fw-clock>b{height:15px}.fw-toggle{width:18px;height:9px}.fw-shop .fw-main{padding:0 4%}}

/* Lightweight particle field stays behind the featured cards. */
.deck-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.deck .halo{width:90%;height:100%;border-radius:0;filter:none;background:radial-gradient(ellipse at 50% 48%,rgba(140,60,134,.22),transparent 67%);pointer-events:none}
@media(max-width:900px){.deck-particles{display:none}}

/* 项目清单 · 右侧小图预览，沿用分组及整卡点击协议。 */
#list #projectGroups .family-project{grid-template-columns:minmax(0,1fr) 148px;grid-template-rows:1fr;align-items:start;gap:24px;padding:20px 22px}
#list #projectGroups .project-copy{grid-column:1;grid-row:1;gap:10px;height:100%}
#list .project-title-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
#list #projectGroups .project-title-line strong{font-size:17px;min-height:28px;line-height:1.6}
#list .project-title-line .project-status{font-size:11px;line-height:1.6;padding:3px 9px;border:1px solid #c6ae8526;border-radius:99px;background:#c6ae8509;color:#c6ae85;white-space:nowrap}
#list .project-title-line .project-status.ok{color:#8fbaaa;border-color:#8fbaaa26;background:#8fbaaa09}
#list #projectGroups .project-description{font-size:13px;line-height:1.8;text-wrap:pretty}
#list #projectGroups .project-meta{display:flex;margin-top:auto;padding-top:8px;gap:8px}
#list #projectGroups .project-actions{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:148px;align-self:start}
#list .project-thumbnail{display:block;width:100%;height:92px;overflow:hidden;border:1px solid #ffffff14;border-radius:6px;background:#20252e}
#list .project-thumbnail img{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .18s;opacity:.9}
#list .family-project:hover .project-thumbnail img{opacity:1}
#list #projectGroups .project-preview{display:block;width:100%;padding:4px 0;line-height:20px;text-align:center}
#list #projectGroups.is-card .family-project{grid-template-columns:minmax(0,1fr) 100px;gap:14px;padding:16px}
#list #projectGroups.is-card .project-actions{width:100px}
#list #projectGroups.is-card .project-thumbnail{height:64px}
#list #projectGroups.is-card .project-title-line strong{font-size:14px}
#list #projectGroups.is-card .project-meta{display:none}
#list.project-compact #projectGroups .family-project{grid-template-columns:minmax(0,1fr) 100px;padding-top:14px;padding-bottom:14px}
#list.project-compact #projectGroups .project-actions{width:100px}
#list.project-compact #projectGroups .project-thumbnail{height:62px}
#list.project-compact #projectGroups .project-meta{display:none}
@media(min-width:851px) and (max-width:1200px){
 #list #projectGroups .family-multiple .family-project{grid-template-columns:minmax(0,1fr) 112px;gap:16px;padding:18px}
 #list #projectGroups .family-multiple .project-actions{width:112px}
 #list #projectGroups .family-multiple .project-thumbnail{height:72px}
}
@media(max-width:520px){
 #list #projectGroups .family-project{grid-template-columns:minmax(0,1fr) 88px;gap:14px;padding:16px}
 #list #projectGroups .project-actions,#list #projectGroups.is-card .project-actions{width:88px}
 #list #projectGroups .project-thumbnail,#list #projectGroups.is-card .project-thumbnail{height:60px}
 #list #projectGroups .project-title-line strong{font-size:15px}
 #list .project-title-line{gap:6px}
 #list #projectGroups .project-description{font-size:12px;line-height:1.8}
 #list #projectGroups.is-card .family-project{grid-template-columns:minmax(0,1fr) 88px}
 #list.project-compact #projectGroups .family-project{grid-template-columns:minmax(0,1fr) 88px}
 #list.project-compact #projectGroups .project-actions{width:88px}
}
@media(max-width:520px){
 #list #projectGroups .project-copy{display:contents}
 #list #projectGroups .project-title-line{grid-column:1;grid-row:1;align-content:start;align-items:flex-start;flex-direction:column}
 #list #projectGroups .project-description{grid-column:1 / -1;grid-row:2}
 #list #projectGroups .project-meta{grid-column:1 / -1;grid-row:3;padding-top:0}
}

/* 项目清单标题层级：公司 > 业务模块 > 具体项目。 */
#list .company-heading{margin-bottom:24px;gap:16px}
#list .company-heading h3{font-size:26px;font-weight:700;line-height:1.3;letter-spacing:.02em}
#list .company-heading span{font-weight:400}
#list .family-intro h4{font-size:19px;font-weight:600;line-height:1.5}
#list #projectGroups .project-title-line strong{font-size:16px;font-weight:500;line-height:1.6;min-height:26px}
#list #projectGroups.is-card .project-title-line strong{font-size:15px}
@media(max-width:520px){
 #list .company-heading{margin-bottom:20px;gap:10px;flex-wrap:wrap}
 #list .company-heading h3{font-size:22px}
 #list .family-intro h4{font-size:17px}
 #list #projectGroups .project-title-line strong{font-size:15px;min-height:24px}
}

/* Keep slow or failed embedded previews understandable and recoverable. */
.pocstage { position:relative; }
.poc-loading { position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:#f5f6f8;color:#555;text-align:center;font-size:14px; }
.poc-loading button { padding:9px 20px;border:1px solid #cbb8d2;border-radius:8px;background:#fff;color:#65446d;cursor:pointer; }
.poc-loading button[hidden] { display:none; }