/* 仙津 SRM 对接说明 v4 */
:root{
  --bg:#f4f6fb; --bg2:#eef1f8; --card:#ffffff; --ink:#0f172a; --ink2:#334155; --muted:#64748b; --line:#e2e8f0; --line2:#cbd5e1;
  --brand:#1d4ed8; --brand2:#3b82f6; --brand-soft:#e8efff;
  --in:#16a34a; --out:#2563eb; --warn:#d97706; --bad:#dc2626; --ok:#059669;
  --std:#0ea5e9; --cus:#8b5cf6;
  --s-srm:#1d4ed8; --s-t100:#4f46e5; --s-hly:#ea580c; --s-feishu:#0284c7; --s-esign:#7c3aed; --s-oa:#475569; --s-pay:#059669; --s-biz:#0891b2; --s-inv:#ca8a04; --s-dms:#6b7280; --s-supp:#db2777;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);
  --radius:16px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b1020; --bg2:#0f1629; --card:#121a30; --ink:#e6ebf5; --ink2:#c3cce0; --muted:#8a96b2; --line:#1f2a44; --line2:#2b3a5c;
  --brand:#7aa2ff; --brand2:#5b8cff; --brand-soft:#17234a; --in:#34d399; --out:#60a5fa;
  --s-srm:#6d94ff; --s-t100:#8b88ff; --s-hly:#fb8c4a; --s-feishu:#38bdf8; --s-esign:#a78bfa; --s-oa:#94a3b8; --s-pay:#34d399; --s-biz:#22d3ee; --s-inv:#facc15; --s-dms:#9ca3af; --s-supp:#f472b6;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0b1020; --bg2:#0f1629; --card:#121a30; --ink:#e6ebf5; --ink2:#c3cce0; --muted:#8a96b2; --line:#1f2a44; --line2:#2b3a5c;
  --brand:#7aa2ff; --brand2:#5b8cff; --brand-soft:#17234a; --in:#34d399; --out:#60a5fa;
  --s-srm:#6d94ff; --s-t100:#8b88ff; --s-hly:#fb8c4a; --s-feishu:#38bdf8; --s-esign:#a78bfa; --s-oa:#94a3b8; --s-pay:#34d399; --s-biz:#22d3ee; --s-inv:#facc15; --s-dms:#9ca3af; --s-supp:#f472b6;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
code{font-family:var(--mono);font-size:.88em;background:var(--bg2);padding:1px 6px;border-radius:6px;border:1px solid var(--line)}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{line-height:1.3;margin:0}
.muted{color:var(--muted);font-size:13px}
[hidden]{display:none!important}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:10px 24px;background:color-mix(in srgb,var(--card) 86%,transparent);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);white-space:nowrap}
.brand b{display:block;font-size:15px}.brand small{display:block;color:var(--muted);font-size:11px;line-height:1.2}
.logo{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--brand),#7c3aed)}
.topnav{display:flex;gap:2px;flex:1;overflow:auto;scrollbar-width:none}
.topnav a{color:var(--ink2);font-size:13.5px;padding:6px 10px;border-radius:8px;white-space:nowrap}
.topnav a:hover{background:var(--bg2);color:var(--ink)}
.topact{display:flex;align-items:center;gap:8px}
.pill-btn{border:1px solid var(--line2);background:var(--card);padding:5px 12px;border-radius:999px;font-size:13px;white-space:nowrap;transition:.15s}
.pill-btn:hover{border-color:var(--brand)}
.pill-btn.accent{background:var(--brand);border-color:var(--brand);color:#fff}
.pill-btn.accent b{background:rgba(255,255,255,.25);padding:0 7px;border-radius:999px;margin-left:2px}
.icon-btn{border:1px solid var(--line2);background:var(--card);width:32px;height:32px;border-radius:10px;display:grid;place-items:center}
.search{position:relative}
.search input{width:200px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;outline:none;transition:width .2s}
.search input:focus{width:260px;border-color:var(--brand)}
.qres{position:absolute;right:0;top:40px;width:360px;max-height:60vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px}
.qres a{display:flex;gap:8px;align-items:baseline;padding:8px 10px;border-radius:8px;color:var(--ink);font-size:13.5px}
.qres a:hover,.qres a.on{background:var(--brand-soft)}
.qres small{color:var(--muted)}

main{max-width:1280px;margin:0 auto;padding:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin:20px 0}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sec-head h2{font-size:21px;display:flex;align-items:center;gap:10px}
.sec-no{font:600 12px var(--mono);color:var(--brand);background:var(--brand-soft);padding:3px 8px;border-radius:6px}
h3.sub{font-size:15px;margin:22px 0 10px;color:var(--ink2)}
.note{background:var(--bg2);border-left:3px solid var(--warn);padding:10px 14px;border-radius:8px;font-size:14px;color:var(--ink2)}

/* hero */
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center;padding:28px 4px 8px}
.eyebrow{font-size:13px;color:var(--brand);font-weight:600;letter-spacing:.06em;margin:0 0 8px}
.hero h1{font-size:34px;letter-spacing:-.01em;margin-bottom:14px;background:linear-gradient(90deg,var(--ink),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--ink2);font-size:16px;max-width:680px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--card);color:var(--ink);padding:9px 16px;border-radius:12px;font-size:14px;font-weight:500;transition:.15s}
.btn:hover{border-color:var(--brand);transform:translateY(-1px)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.sm{padding:5px 12px;font-size:13px;border-radius:9px}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);animation:rise .6s forwards}
.stat b{display:block;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--brand)}
.stat span{font-size:13px;color:var(--muted)}
@keyframes rise{to{opacity:1;transform:none}}

.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.howto-step{display:flex;gap:12px;background:var(--card);border:1px dashed var(--line2);border-radius:14px;padding:14px 16px}
.howto-step i{font-style:normal;width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:700}
.howto-step b{display:block}.howto-step span{font-size:13.5px;color:var(--ink2)}

/* 分段按钮 */
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:4px 10px;border-radius:7px;font-size:13px;color:var(--ink2)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600}
.toggle{font-size:13px;color:var(--ink2);display:flex;gap:6px;align-items:center;cursor:pointer}
.map-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* 地图 */
.map-card{padding-bottom:16px}
.map-wrap{position:relative;overflow-x:auto;border-radius:12px;background:radial-gradient(1200px 600px at 50% 40%,var(--brand-soft),transparent 70%),var(--bg);border:1px solid var(--line)}
#mapSvg{display:block;width:100%;min-width:940px;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:13px;color:var(--ink2);align-items:center}
.legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.dot.in{background:var(--in)}.dot.out{background:var(--out)}
.chip-std,.chip-cus{display:inline-block;width:18px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.chip-std{background:color-mix(in srgb,var(--std) 25%,transparent);border:1px solid var(--std)}
.chip-cus{background:color-mix(in srgb,var(--cus) 25%,transparent);border:1px solid var(--cus)}
.legend .dash{display:inline-block;width:22px;border-top:2px dashed var(--muted);margin-right:6px;vertical-align:3px}
.map-tip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px;font-size:13px;max-width:280px;z-index:5}
.map-tip b{display:block;font-size:14px}
.tour-cap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:var(--card);border-radius:12px;padding:10px 16px;font-size:14px;max-width:min(680px,90%);box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}
.tour-cap button{background:transparent;border:1px solid currentColor;color:inherit;border-radius:8px;padding:2px 10px;font-size:12px;white-space:nowrap}

/* SVG 地图元素 */
.sysnode rect.box{fill:var(--card);stroke-width:1.5}
.sysnode text{fill:var(--ink)}
.sysnode .sub{fill:var(--muted);font-size:11px}
.sysnode{cursor:pointer;transition:opacity .25s}
.sysnode.pending rect.box{stroke-dasharray:6 4}
.lk{cursor:pointer;transition:opacity .25s}
.lk path.wire{fill:none;stroke-width:2.2;stroke-linecap:round}
.lk path.hit{fill:none;stroke:transparent;stroke-width:22}
.lk.optional path.wire{stroke-dasharray:6 5}
.lk .pillbg{fill:var(--card);stroke-width:1.2}
.lk .pilltx{font-size:12px;fill:var(--ink);font-weight:600}
.lk .pillnum{font-size:10px;fill:var(--muted)}
.lk:hover path.wire,.lk.sel path.wire{stroke-width:4}
.lk.sel .pillbg{stroke-width:2.4}
.dim{opacity:.13}
.mod{cursor:pointer}
.mod rect{transition:.2s}
.mod:hover rect,.mod.on rect{stroke-width:2}
.mod text{font-size:12px;fill:var(--ink)}
.particle{pointer-events:none}
.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pop{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

/* 详情 */
.detail{scroll-margin-top:70px}
.detail:empty{display:none}
.dt{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;animation:slideIn .45s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.dt-head{padding:22px 24px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--sysc) 14%,var(--card)),var(--card) 70%);border-bottom:1px solid var(--line)}
.crumb{font-size:13px;color:var(--muted);margin-bottom:6px}
.dt-title{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dt-title h2{font-size:26px}
.dt-why{margin:12px 0 0;font-size:15.5px;color:var(--ink2);max-width:900px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);background:var(--card);white-space:nowrap}
.tag.std{color:var(--std);border-color:color-mix(in srgb,var(--std) 45%,transparent)}
.tag.cus{color:var(--cus);border-color:color-mix(in srgb,var(--cus) 45%,transparent)}
.tag.opt{border-style:dashed}
.tag.new{color:#fff;background:var(--warn);border-color:var(--warn)}
.dirflow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.sysdot{display:inline-flex;align-items:center;gap:6px}
.sysdot::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--c)}
.arrowmove{position:relative;display:inline-block;width:46px;height:10px}
.arrowmove::before{content:"";position:absolute;left:0;right:6px;top:4px;border-top:2px solid var(--ac)}
.arrowmove::after{content:"";position:absolute;right:0;top:0;border:5px solid transparent;border-left:7px solid var(--ac);border-right:0}
.arrowmove i{position:absolute;top:2px;left:0;width:6px;height:6px;border-radius:50%;background:var(--ac);animation:mv 1.4s linear infinite}
.arrowmove.both i{animation:mv2 2.4s ease-in-out infinite}
@keyframes mv{from{left:0;opacity:0}20%{opacity:1}to{left:38px;opacity:0}}
@keyframes mv2{0%,100%{left:0}50%{left:36px}}
.dt-body{padding:20px 24px 24px}
.dt-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px;border-top:1px solid var(--line);padding-top:16px}

/* 流程图 */
.flow-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
.flow-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--card);flex-wrap:wrap}
.flow-bar b{margin-right:auto;font-size:14px}
.flow-scroll{overflow-x:auto}
.flow-svg{display:block;margin:0 auto}
.flow-cap{min-height:52px;padding:12px 16px;border-top:1px solid var(--line);background:var(--card);font-size:14.5px;color:var(--ink2);display:flex;gap:10px;align-items:flex-start}
.flow-cap .stepno{flex:none;font:600 12px var(--mono);color:#fff;background:var(--brand);border-radius:6px;padding:2px 7px;margin-top:2px}
.fn{transition:opacity .3s}
.fn .shape{stroke-width:1.6;transition:filter .3s,stroke-width .3s}
.fn text{font-size:13px;fill:var(--ink)}
.fn.k-start .shape,.fn.k-end .shape{fill:color-mix(in srgb,var(--fc) 16%,var(--card))}
.fn.k-dec .shape{fill:color-mix(in srgb,var(--warn) 12%,var(--card));stroke:var(--warn)}
.fn.k-proc .shape,.fn.k-store .shape{fill:var(--card)}
.fn.act .shape{stroke-width:3;filter:drop-shadow(0 0 8px var(--fc))}
.fn{cursor:pointer}
.fe path{fill:none;stroke:var(--muted);stroke-width:1.6} /* ⚠️ 别加 stroke-opacity：纯竖直的线（包围盒宽 0）会被 Chrome 整条丢掉 */
.fe.x path.ln{stroke:var(--ec);stroke-width:2}
.fe.x path.anim{stroke:var(--ec);stroke-width:2;stroke-dasharray:4 10;animation:dash 1.1s linear infinite;opacity:.9}
@keyframes dash{to{stroke-dashoffset:-14}}
.fe.act path.ln{stroke-width:3.2}
.fe text{font-size:11.5px;fill:var(--ink2)}
.fe .lbg{fill:var(--bg)}
.apichip{cursor:pointer}
.apichip rect{fill:var(--card);stroke:var(--ec);stroke-width:1.4}
.apichip text{fill:var(--ec);font-weight:700;font-size:11.5px}
.apichip:hover rect{fill:var(--ec)}.apichip:hover text{fill:#fff}
.lanehd text{font-weight:700;font-size:14px}
.lanebg{fill:var(--card)}
.lanebg.alt{fill:var(--bg2)}
.flow-token{pointer-events:none;filter:drop-shadow(0 0 6px var(--brand))}

/* 接口卡 */
.if-list{display:grid;gap:16px;margin-top:22px}
.ifc{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;transition:box-shadow .25s,border-color .25s}
.ifc.flash{animation:flash 1.6s ease}
@keyframes flash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 35%,transparent);border-color:var(--brand)}}
.ifc-head{display:flex;align-items:center;gap:10px;padding:14px 18px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.ifid{font:700 13px var(--mono);color:#fff;background:var(--sysc,var(--brand));padding:3px 8px;border-radius:7px}
.ifc-head h3{font-size:17px}
.ifc-head .old{font-size:12px;color:var(--muted)}
.ifc-head .spacer{flex:1}
.st{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.st-ready{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.st-shell{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.st-todo{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.st-creds{background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--ink2)}
.ow{font-size:12px;font-weight:700;padding:2px 9px;border-radius:6px}
.ow-client{background:#fee2e2;color:#b91c1c}.ow-third{background:#ffedd5;color:#c2410c}.ow-vendor{background:#dbeafe;color:#1d4ed8}.ow-none{background:#dcfce7;color:#15803d}
:root[data-theme="dark"] .ow-client{background:#3b1414;color:#fca5a5}:root[data-theme="dark"] .ow-third{background:#3a2210;color:#fdba74}:root[data-theme="dark"] .ow-none{background:#0f2e1c;color:#86efac}:root[data-theme="dark"] .ow-vendor{background:#13224a;color:#93c5fd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ow-client{background:#3b1414;color:#fca5a5}:root:not([data-theme="light"]) .ow-third{background:#3a2210;color:#fdba74}:root:not([data-theme="light"]) .ow-none{background:#0f2e1c;color:#86efac}:root:not([data-theme="light"]) .ow-vendor{background:#13224a;color:#93c5fd}}
.changed{margin:0;padding:10px 18px;background:color-mix(in srgb,var(--warn) 10%,var(--card));border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.six>div{padding:14px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.six>div:nth-child(3n){border-right:0}
.six .k{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.six .k i{font-style:normal;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;background:var(--bg2);font-size:11px}
.six .v{font-size:14.5px}
.six ul{margin:0;padding-left:18px}
.six li{margin:2px 0}
.six .wide{grid-column:1/-1;border-right:0}
.checks{list-style:none;padding:0!important;margin:0}
.checks li{display:flex;gap:8px;align-items:flex-start;padding:4px 0}
.checks li::before{content:"";flex:none;width:16px;height:16px;margin-top:4px;border:1.6px solid var(--ok);border-radius:4px;background:color-mix(in srgb,var(--ok) 10%,transparent)}
.spec{border-top:0}
.spec summary{list-style:none;cursor:pointer;padding:12px 18px;font-size:14px;font-weight:600;color:var(--brand);display:flex;align-items:center;gap:8px;user-select:none}
.spec summary::-webkit-details-marker{display:none}
.spec summary::before{content:"▸";transition:transform .2s}
.spec[open] summary::before{transform:rotate(90deg)}
.spec-in{padding:0 18px 18px;display:grid;gap:14px}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.kv-grid div{background:var(--bg2);border-radius:10px;padding:8px 12px;font-size:13.5px}
.kv-grid div b{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.code{position:relative;background:#0b1224;color:#dbe4ff;border-radius:12px;padding:14px 16px;font:12.5px/1.65 var(--mono);overflow:auto;margin:0;white-space:pre}
.code .k{color:#8fb4ff}.code .s{color:#a6e3a1}.code .n{color:#fab387}.code .b{color:#f5c2e7}
.code .copy{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:7px;font-size:11.5px;padding:2px 8px}
.code-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.code-lbl{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.rules{margin:0;padding-left:18px;font-size:14px}

/* 表格 */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line2);white-space:nowrap;background:var(--bg2)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--brand-soft)}
.tbl.kv td:first-child{white-space:nowrap;color:var(--ink2);font-weight:600;width:1%}
.tbl code{white-space:nowrap}

/* 链路卡 / 模块卡 */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.lcard{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card);cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.lcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sysc)}
.lcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--sysc)}
.lcard h4{margin:0 0 4px;font-size:15.5px;display:flex;gap:8px;align-items:center}
.lcard p{margin:6px 0 10px;font-size:13px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lcard .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.mcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg)}
.mcard b{display:flex;gap:6px;align-items:center;font-size:14px}
.mcard .mlinks{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.mcard .mlinks button{border:1px solid var(--line2);background:var(--card);border-radius:7px;font-size:12px;padding:1px 8px}
.mcard .mlinks button:hover{border-color:var(--brand);color:var(--brand)}

/* 工作量 */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bar{margin:8px 0}
.bar .lbl{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:4px}
.bar .lbl b{font-variant-numeric:tabular-nums}
.bar .track{height:10px;background:var(--bg2);border-radius:999px;overflow:hidden}
.bar .fill{height:100%;width:0;border-radius:999px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bar .ids{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.batch-line{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;margin-top:8px}
.batch{position:relative;padding:44px 10px 0}
.batch::before{content:"";position:absolute;left:0;right:0;top:17px;height:3px;background:var(--line2)}
.batch:first-child::before{left:50%}.batch:last-child::before{right:50%}
.batch .n{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:var(--card);border:3px solid var(--brand);display:grid;place-items:center;font-weight:700;color:var(--brand);z-index:1}
.batch b{display:block;font-size:14px;text-align:center}
.batch p{font-size:12.5px;color:var(--ink2);margin:4px 0 0;text-align:center}
.batch .bl{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:6px}
.batch .bl button{border:1px solid var(--line2);background:var(--bg);border-radius:6px;font-size:11.5px;padding:0 6px}

/* 待确认 */
.pending-list{display:grid;gap:8px}
.pd{display:flex;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.pd .lv{flex:none;width:10px;height:10px;border-radius:50%}
.pd .lv.red{background:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 18%,transparent);animation:pulse 2s infinite}
.pd .lv.amber{background:var(--warn)}.pd .lv.green{background:var(--ok)}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--bad) 5%,transparent)}}
.pd .t{flex:1}
.pd .s{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* 回执 / BOM */
.rs{font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap;background:var(--bg2)}
.rs.g{color:var(--ok)}.rs.a{color:var(--warn)}.rs.b{color:var(--brand)}
.bom{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.bom summary{cursor:pointer;padding:12px 16px;font-weight:600}
.bom-body{padding:0 16px 14px}
.bom-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bom-two>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.bom-two .tag{margin-left:8px}
.sys-t100{color:var(--s-t100)}.sys-srm{color:var(--s-srm)}

.spec-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.tip-box{margin-top:12px;background:var(--brand-soft);border-radius:10px;padding:10px 14px;font-size:13.5px}
.gloss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.gl{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--bg)}
.gl b{font-size:14.5px}.gl small{color:var(--muted);margin-left:6px}
.gl p{margin:4px 0 0;font-size:13.5px;color:var(--ink2)}
.gl .ex{font-size:12.5px;color:var(--muted);margin-top:4px}
.gl.flash{animation:flash 1.6s}

/* 版本 */
.ver-list{display:grid;gap:12px}
.ver{display:grid;grid-template-columns:150px 1fr;gap:16px;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--bg)}
.ver.cur{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--card))}
.ver .vh b{font-size:22px;display:block}
.ver .vh span{font-size:13px;color:var(--muted)}
.ver ul{margin:6px 0 0;padding-left:18px;font-size:14px}
.ver .vstat{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ver .vstat span{font-size:12.5px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 10px}

.foot{text-align:center;color:var(--muted);font-size:13px;padding:24px 0 60px}

/* 术语 */
.term{border-bottom:1.5px dotted color-mix(in srgb,var(--brand) 70%,transparent);cursor:help}
.term:hover{background:var(--brand-soft);border-radius:3px}
.term-card{position:fixed;z-index:90;max-width:320px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;font-size:13.5px;animation:pop .2s forwards}
.term-card b{font-size:15px;display:block;margin-bottom:4px}
.term-card .ex{color:var(--muted);font-size:12.5px;margin-top:6px}
.term-card .act{margin-top:8px;display:flex;gap:8px}
.sel-bar{position:fixed;z-index:95;display:flex;gap:2px;background:var(--ink);border-radius:10px;padding:4px;box-shadow:var(--shadow);animation:pop .15s forwards}
.sel-bar button{background:transparent;border:0;color:var(--card);font-size:13px;padding:5px 10px;border-radius:7px;white-space:nowrap}
.sel-bar button:hover{background:rgba(127,127,127,.3)}
mark.cq{background:color-mix(in srgb,#facc15 40%,transparent);color:inherit;border-bottom:2px solid #eab308;cursor:pointer;border-radius:2px}

/* 评论角标 */
.cbadge{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line2);background:var(--card);color:var(--ink2);border-radius:999px;font-size:12px;padding:2px 10px;white-space:nowrap}
.cbadge:hover{border-color:var(--brand);color:var(--brand)}
.cbadge.has{border-color:var(--warn);color:var(--warn);font-weight:600}
.cbadge.done{border-color:var(--ok);color:var(--ok)}
.sec-c{margin-left:auto}

/* 抽屉 */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--card);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.12);z-index:80;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.drawer.open{transform:none}
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.25);z-index:70}
.dr-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.dr-head b{display:block;font-size:16px}.dr-head small{color:var(--muted);font-size:12.5px}
.dr-filters{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center}
.dr-filters select{border:1px solid var(--line2);background:var(--card);color:var(--ink);border-radius:8px;padding:4px 8px;font:inherit;font-size:13px}
.dr-body{flex:1;overflow:auto;padding:12px 16px;display:grid;gap:12px;align-content:start}
.empty{color:var(--muted);text-align:center;padding:36px 12px;font-size:14px}
.th{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg)}
.th.closed{opacity:.8}
.th-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.th-top .where{color:var(--brand);font-weight:600;cursor:pointer}
.th .q{border-left:3px solid #eab308;background:color-mix(in srgb,#facc15 12%,transparent);padding:4px 10px;border-radius:0 6px 6px 0;font-size:13px;color:var(--ink2);margin:8px 0}
.msg{margin-top:8px}
.msg .who{font-size:12.5px;color:var(--muted)}
.msg .who b{color:var(--ink);font-weight:600}
.msg .body{white-space:pre-wrap;font-size:14px;margin-top:2px;word-break:break-word}
.reply{margin-left:14px;padding-left:10px;border-left:2px solid var(--line2)}
.role{font-size:11px;font-weight:700;padding:0 6px;border-radius:5px;margin-left:4px}
.role-client{background:#fee2e2;color:#b91c1c}.role-vendor{background:#dbeafe;color:#1d4ed8}.role-other{background:var(--bg2);color:var(--ink2)}
.logl{font-size:12px;color:var(--muted);margin-top:6px}
.sp{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px}
.sp-open{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.sp-answered{background:color-mix(in srgb,var(--brand) 15%,transparent);color:var(--brand)}
.sp-closed{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.th-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.th-act button{border:1px solid var(--line2);background:var(--card);border-radius:8px;font-size:12.5px;padding:2px 10px}
.th-act button:hover{border-color:var(--brand);color:var(--brand)}
.composer{border-top:1px solid var(--line);padding:12px 16px;display:grid;gap:8px;background:var(--card)}
.composer textarea{width:100%;border:1px solid var(--line2);background:var(--bg);color:var(--ink);border-radius:10px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical}
.composer textarea:focus,.composer input:focus{outline:none;border-color:var(--brand)}
.cmp-row{display:flex;gap:8px}
.cmp-row input,.cmp-row select{border:1px solid var(--line2);background:var(--bg);color:var(--ink);border-radius:8px;padding:5px 8px;font:inherit;font-size:13px;min-width:0}
.cmp-row input{flex:1}
.cmp-anchor{font-size:12.5px;color:var(--muted)}
.cmp-anchor b{color:var(--brand)}
.cmp-anchor button{border:0;background:none;color:var(--muted);text-decoration:underline;font-size:12px}
.composer .quote{border-left:3px solid #eab308;background:color-mix(in srgb,#facc15 12%,transparent);padding:4px 10px;font-size:13px;border-radius:0 6px 6px 0;display:flex;gap:8px}
.composer .quote span{flex:1}
.composer .quote button{border:0;background:none;color:var(--muted)}
.cmp-hint{font-size:12px;color:var(--muted)}
.cmp-hint.err{color:var(--bad)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--card);padding:10px 18px;border-radius:12px;font-size:14px;z-index:99;box-shadow:var(--shadow);animation:pop .2s forwards}
.offline{background:color-mix(in srgb,var(--warn) 14%,var(--card));color:var(--ink2);border-radius:10px;padding:8px 12px;font-size:13px}

@media (max-width:1000px){
  .topnav{display:none}
  .hero{grid-template-columns:1fr}
  .howto,.work-grid,.spec-grid,.bom-two{grid-template-columns:1fr}
  .six{grid-template-columns:1fr 1fr}.six>div:nth-child(3n){border-right:1px solid var(--line)}.six>div:nth-child(2n){border-right:0}
  .code-two{grid-template-columns:1fr}
  .batch-line{grid-template-columns:1fr;gap:10px}
  .batch{padding:0 0 0 52px;min-height:40px}.batch::before{display:none}.batch .n{left:0;transform:none}.batch b,.batch p{text-align:left}.batch .bl{justify-content:flex-start}
  .ver{grid-template-columns:1fr}
}
@media (max-width:640px){
  main{padding:12px 16px}
  .topbar{padding:8px 16px;gap:8px}
  .brand small,.search,#verBtn{display:none}
  .hero h1{font-size:25px}
  .card{padding:16px}
  .six{grid-template-columns:1fr}.six>div{border-right:0!important}
  .dt-head,.dt-body{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.ifc-table{margin:14px 0 4px}