/* 栖策 PERCH · 有栖科技视觉规范（栖境 Perchscape）
   主色取自公司 logo 板的手刷渐变：晴蓝 → 栖蓝 → 深钴；辅色取鸟形的暖白；纹样取石膏浮雕山脊线。 */
:root {
  --abyss: #06111F; --panel: #0B1A2E; --panel2: #0F2340; --line: #1A3354; --grid: #132A47;
  --tx: #E8EEF6; --mu: #7F93AD; --dim: #4F6A8A;
  --sky: #3FA6DC; --perch: #2486D2; --cobalt: #1A55B8; --plaster: #F7F4EC;
  --amber: #F2B544; --coral: #F0645A; --mint: #3FD0B0;
  --grad: linear-gradient(100deg, #3FA6DC 0%, #2486D2 48%, #1A55B8 100%);
  --num: "DIN Alternate", "Bahnschrift", "SF Mono", Menlo, monospace;
  --r: 12px;
}
* { box-sizing: border-box; }
html { background: var(--abyss); }
body { margin: 0; min-height: 100vh; font-family: "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif; font-size: 13px; line-height: 1.6; color: var(--tx); background: var(--abyss); overflow-x: hidden; }
.bgbrush { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 500px at 85% -10%, #1A55B833, transparent 70%),
    radial-gradient(900px 400px at -10% 10%, #3FA6DC22, transparent 70%),
    repeating-linear-gradient(90deg, #ffffff03 0 2px, transparent 2px 9px); }
code { font-family: var(--num); font-size: 11px; letter-spacing: .04em; color: var(--sky); background: #3FA6DC14; border: 1px solid #3FA6DC30; padding: 0 5px; border-radius: 4px; }
.num { font-family: var(--num); }
.mu { color: var(--mu); } .small { font-size: 11px; } .warn { color: var(--coral); } .okc { color: var(--mint); }
h2 { font-size: 20px; margin: 0 0 2px; letter-spacing: .02em; }

/* 顶栏 */
.top { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 12px 28px 16px; background: #06111Fe6; backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand img { border-radius: 9px; box-shadow: 0 4px 18px #2486D255; }
.wm b { display: block; font-size: 15px; letter-spacing: .12em; } .wm i, .pd i { display: block; font-style: normal; font-size: 10px; color: var(--mu); letter-spacing: .14em; }
.sep { width: 1px; height: 30px; background: var(--line); }
.pd b { font-size: 15px; } .pd em { font-style: normal; font-family: var(--num); letter-spacing: .16em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pd i { letter-spacing: .04em; }
.status { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.status span { font-size: 11px; color: var(--mu); border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px; background: var(--panel); }
.status .num { color: var(--tx); font-size: 12px; }
.led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); margin-right: 6px; vertical-align: 1px; }
.tools { display: flex; gap: 6px; }
.ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 16px; }
.ridge path { fill: none; stroke: #F7F4EC; stroke-opacity: .22; stroke-width: 1; vector-effect: non-scaling-stroke; }

.nav { display: flex; gap: 4px; padding: 10px 28px 0; max-width: 1360px; margin: 0 auto; overflow-x: auto; }
.nav button { white-space: nowrap; flex: none; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--mu); padding: 6px 14px 8px; text-align: left; }
.nav button b { display: block; font-size: 14px; font-weight: 600; } .nav button i { font-style: normal; font-size: 9px; letter-spacing: .16em; font-family: var(--num); }
.nav button:hover { color: var(--tx); background: none; }
.nav button.on { color: var(--tx); border-bottom-color: var(--sky); }
.nav button.on i { color: var(--sky); }
main { max-width: 1360px; margin: 0 auto; padding: 18px 28px 40px; }
.foot { max-width: 1360px; margin: 0 auto; padding: 16px 28px 30px; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 11px; color: var(--dim); border-top: 1px solid var(--line); }
.foot a { color: var(--sky); text-decoration: none; margin-left: auto; }

/* 控件 */
button { font: inherit; cursor: pointer; color: #fff; background: var(--grad); border: 0; border-radius: 8px; padding: 6px 16px; }
button.ghost { background: transparent; color: var(--tx); border: 1px solid var(--line); }
button.ghost:hover { border-color: var(--sky); color: var(--sky); }
button.sm { padding: 3px 10px; font-size: 11px; }
input, textarea { font: inherit; color: var(--tx); background: var(--abyss); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
textarea { width: 100%; font-family: var(--num); font-size: 11px; margin: 8px 0; }
input:focus, textarea:focus, .knob:focus-visible, .chip:focus-visible { outline: 1px solid var(--sky); outline-offset: 1px; }
input[type=file] { border: 0; padding: 0; color: var(--mu); }
.ni { width: 74px; text-align: right; font-family: var(--num); } .u { color: var(--mu); font-size: 11px; margin-left: 4px; }
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; border: 0; padding: 0; height: 18px; flex: 1; min-width: 80px; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--perch), var(--line)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--plaster); border: 3px solid var(--perch); box-shadow: 0 0 0 3px #2486D233; }
.seg { display: inline-flex; background: var(--abyss); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg button { background: none; color: var(--mu); padding: 4px 12px; border-radius: 6px; font-size: 12px; }
.seg button.on { background: var(--grad); color: #fff; }
.lbl { font-size: 11px; color: var(--mu); letter-spacing: .04em; white-space: nowrap; }
.sl { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 260px; } .sl b { font-family: var(--num); font-weight: 500; min-width: 92px; text-align: right; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.tg { position: relative; display: inline-block; width: 34px; height: 18px; flex: none; }
.tg input { opacity: 0; width: 0; height: 0; }
.tg span { position: absolute; inset: 0; background: var(--line); border-radius: 10px; transition: .2s; cursor: pointer; }
.tg span::before { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: var(--mu); border-radius: 50%; transition: .2s; }
.tg input:checked + span { background: var(--perch); } .tg input:checked + span::before { transform: translateX(16px); background: var(--plaster); }
.tg.lock span { cursor: not-allowed; opacity: .7; }
.pill { display: inline-block; font-size: 10px; padding: 0 7px; border-radius: 10px; border: 1px solid var(--line); color: var(--mu); }
.pill.ok { color: var(--mint); border-color: #3FD0B055; } .pill.core { color: var(--plaster); background: #1A55B8; border-color: #1A55B8; } .pill.config { color: var(--sky); border-color: #3FA6DC66; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }

/* 面板 */
.pn { background: linear-gradient(180deg, #0D1F37, #0A182B); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px; position: relative; overflow: hidden; }
.pn::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--grad); opacity: .7; }
.pn > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.pn > header h3 { margin: 0; font-size: 14px; font-weight: 600; }
.pn > header span { font-family: var(--num); font-size: 9.5px; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
.ch { width: 100%; } .h220 { height: 220px; } .h260 { height: 260px; } .h300 { height: 300px; } .h320 { height: 320px; } .h360 { height: 360px; }
.row2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; } .row2.eq { grid-template-columns: 1fr 1fr; }
.row2 > .pn { margin-bottom: 16px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.toolbar p { margin: 0; max-width: 820px; }
.scroll { overflow-x: auto; }

/* 模板条 */
.tpls { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.tpl { text-align: left; background: var(--panel); border: 1px solid var(--line); color: var(--tx); border-radius: 10px; padding: 10px 14px; position: relative; overflow: hidden; }
.tpl b { display: block; font-size: 15px; } .tpl i { font-style: normal; font-size: 10px; color: var(--mu); letter-spacing: .12em; font-family: var(--num); text-transform: uppercase; }
.tpl .tb { display: block; font-size: 10px; color: var(--sky); margin-bottom: 2px; }
.tpl:hover { border-color: var(--perch); background: var(--panel); }
.tpl.on { background: var(--grad); border-color: transparent; box-shadow: 0 6px 24px #2486D244; }
.tpl.on .tb, .tpl.on i { color: #E6F2FB; }
.tpl.cus { border-style: dashed; } .tpl.cus .tb { color: var(--amber); }

/* 旋钮 */
.deck { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.knobs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.knob { display: flex; flex-direction: column; align-items: center; cursor: ns-resize; user-select: none; touch-action: none; border-radius: 10px; padding: 4px 0; }
.knob:hover { background: #ffffff05; } .knob.drag { background: #2486D214; }
.kdial { width: 84px; height: 84px; } .kdial svg { width: 100%; height: 100%; overflow: visible; }
.ktrack { fill: none; stroke: #15304F; stroke-width: 4; stroke-linecap: round; }
.kfill { fill: none; stroke: var(--sky); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px #3FA6DC88); }
.kcap { fill: url(#none); fill: #102540; stroke: #22426A; stroke-width: 1.5; }
.kptr { stroke: var(--plaster); stroke-width: 3; stroke-linecap: round; }
.kt { stroke: #22426A; stroke-width: 1; } .kt.on { stroke: #3FA6DC99; }
.kval { margin-top: -6px; font-family: var(--num); } .kval b { font-size: 18px; font-weight: 500; } .kval i { font-style: normal; font-size: 10px; color: var(--mu); margin-left: 3px; }
.klab { font-size: 11px; color: var(--mu); }
.deckbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.gauges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 8px; } .gauges > div { height: 168px; }

.brief { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.bt { font-size: 12px; color: var(--mu); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.facts div { background: var(--abyss); border: 1px solid var(--grid); border-radius: 8px; padding: 6px 10px; min-width: 0; }
.facts span { display: block; font-size: 10.5px; color: var(--dim); } .facts b { font-family: var(--num); font-weight: 500; font-size: 15px; } .facts i { font-style: normal; font-size: 10px; color: var(--mu); margin-left: 3px; }
/* 参数滑杆 */
.prms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 22px; }
.prms.one { grid-template-columns: 1fr; }
.prm { padding: 6px 0; }
.prm .ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.prm .ph span { font-size: 12px; color: var(--mu); }
.nin { display: inline-flex; align-items: center; background: var(--abyss); border: 1px solid var(--line); border-radius: 6px; padding: 0 8px 0 0; }
.nin:focus-within { border-color: var(--sky); }
.nin input { width: 86px; border: 0; background: transparent; text-align: right; font-family: var(--num); font-size: 15px; padding: 3px 6px; }
.nin input:focus { outline: none; }
.nin i { font-style: normal; font-size: 10.5px; color: var(--mu); white-space: nowrap; }
.prm input[type=range] { width: 100%; }
.pscale { display: flex; justify-content: space-between; font-family: var(--num); font-size: 9.5px; color: var(--dim); margin-top: -2px; }
.cname { width: 160px; font-size: 12px; padding: 2px 8px; }
select { font: inherit; font-size: 12px; color: var(--tx); background: var(--abyss); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; max-width: 380px; }
.nw { white-space: nowrap; }
.pill.warnp { color: var(--amber); border-color: #F2B54466; }
.method { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.method div { background: var(--abyss); border: 1px solid var(--grid); border-radius: 8px; padding: 10px 12px; }
.method b { display: block; color: var(--sky); margin-bottom: 4px; } .method span { font-size: 12px; color: var(--mu); }
details.calc { margin-top: 8px; font-size: 11.5px; } details.calc summary { cursor: pointer; color: var(--sky); }
details.calc ol { margin: 6px 0 0; padding-left: 18px; color: var(--mu); } details.calc li { margin: 3px 0; } details.calc b { color: var(--tx); font-family: var(--num); font-weight: 500; }
.ni.sm { width: 56px; padding: 2px 4px; }
.h380 { height: 380px; }
.foot a, .row a { color: var(--sky); }
details.srcs { font-size: 12px; margin-top: 4px; } details.srcs summary { cursor: pointer; color: var(--sky); }
details.srcs ul { columns: 3; column-gap: 24px; margin: 8px 0 0; padding-left: 18px; } details.srcs li { margin: 2px 0; break-inside: avoid; } details.srcs a { color: var(--sky); text-decoration: none; } details.srcs a:hover { text-decoration: underline; }
optgroup { color: var(--mu); } option { color: var(--tx); }
.flows { display: none; }

.vendlist { margin-top: 4px; }
.conc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; background: var(--abyss); border: 1px solid var(--grid); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.conc span { display: block; font-size: 10.5px; color: var(--dim); } .conc b { font-family: var(--num); font-weight: 500; font-size: 17px; }
.conc p { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--mu); } .conc.hi b:first-of-type { color: var(--amber); }
.vrow { display: grid; grid-template-columns: 10px 1fr auto; grid-template-areas: "dot name val" "dot bar bar" "dot conf conf"; gap: 2px 8px; padding: 7px 0; border-top: 1px dashed var(--grid); align-items: center; }
.vrow > i { grid-area: dot; align-self: start; margin-top: 5px; width: 8px; height: 8px; border-radius: 2px; }
.vn { grid-area: name; min-width: 0; } .vn b { font-size: 12.5px; } .vn span { display: block; font-size: 10.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv { grid-area: val; text-align: right; } .vv b { font-family: var(--num); font-weight: 500; font-size: 14px; } .vv span { display: block; font-size: 10px; color: var(--dim); font-family: var(--num); }
.vb2 { grid-area: bar; height: 3px; background: var(--grid); border-radius: 2px; } .vb2 em { display: block; height: 100%; border-radius: 2px; }
.vc { grid-area: conf; font-size: 10.5px; color: var(--mu); font-family: var(--num); } .vc .pill { margin-left: 4px; font-family: "PingFang SC", sans-serif; }

.row2 > .pn { display: flex; flex-direction: column; }
#sankey { flex: 1; min-height: 380px; }

.zbtn { margin-left: auto; background: transparent; border: 1px solid var(--line); color: var(--mu); padding: 0 8px; font-size: 13px; line-height: 22px; border-radius: 6px; }
.zbtn:hover { color: var(--sky); border-color: var(--sky); background: transparent; }
.ch canvas { cursor: pointer; }
.zoom { position: fixed; inset: 0; z-index: 50; background: #020812cc; backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: zin .18s ease-out; }
.zoom[hidden] { display: none; }
@keyframes zin { from { opacity: 0; } to { opacity: 1; } }
.zbox { width: min(1400px, 100%); height: min(860px, 100%); background: linear-gradient(180deg, #0D1F37, #0A182B); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px #00000080; position: relative; }
.zbox::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); }
.zbox > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.zbox > header h3 { margin: 0; font-size: 16px; display: inline; } .zbox > header span { margin-left: 10px; font-family: var(--num); font-size: 10px; letter-spacing: .16em; color: var(--dim); }
.zbody { flex: 1; display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
.zchart { min-height: 0; padding: 10px; }
.zinfo { border-left: 1px solid var(--line); padding: 16px 18px; overflow-y: auto; font-size: 12.5px; }
.zinfo h4 { margin: 0 0 4px; font-size: 15px; } .zinfo h5 { margin: 14px 0 6px; font-size: 12px; color: var(--sky); font-weight: 600; }
.zinfo .zdesc { margin: 0 0 12px; padding: 10px 12px; background: var(--abyss); border: 1px solid var(--grid); border-radius: 8px; color: var(--mu); }
.zinfo .zdesc b { color: var(--tx); font-family: var(--num); }
.zstats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.zstats div { background: var(--abyss); border: 1px solid var(--grid); border-radius: 8px; padding: 6px 10px; } .zstats span { display: block; font-size: 10.5px; color: var(--dim); } .zstats b { font-family: var(--num); font-weight: 500; font-size: 16px; }
.zl { list-style: none; margin: 0; padding: 0; } .zl li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--grid); } .zl b { font-family: var(--num); font-weight: 500; white-space: nowrap; }
.zinfo ol { margin: 4px 0; padding-left: 18px; color: var(--mu); } .zinfo ol li { margin: 3px 0; } .zinfo ol b { color: var(--tx); font-family: var(--num); font-weight: 500; }
body.zooming { overflow: hidden; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; min-width: 0; }
.kpi .k { font-size: 11px; color: var(--mu); } .kpi .v { font-family: var(--num); font-size: 22px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v small { font-size: 14px; color: var(--mu); } .kpi .n { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.hl { background: var(--grad); border-color: transparent; } .kpi.hl .k, .kpi.hl .n { color: #DCEBF8; }

/* 模块 */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.mod { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; transition: opacity .2s, border-color .2s; }
.mod:hover { border-color: #2486D288; } .mod.off { opacity: .45; }
.mh { display: flex; align-items: center; gap: 8px; } .mh b { flex: 1; font-size: 14px; }
.mod p { margin: 6px 0 8px; font-size: 12px; color: var(--mu); min-height: 38px; }
.msl { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--mu); } .msl span { white-space: nowrap; } .msl b { font-family: var(--num); color: var(--tx); min-width: 34px; text-align: right; }
.mo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11.5px; font-family: var(--num); }
.mo span { color: var(--dim); font-family: "PingFang SC", sans-serif; margin-right: 6px; }
.mbar { grid-column: 1 / -1; height: 4px; background: var(--line); border-radius: 2px; margin-top: 6px; } .mbar i { display: block; height: 100%; background: var(--grad); border-radius: 2px; }
.mtot { grid-column: 1 / -1; font-size: 18px; text-align: right; } .mtot small { font-size: 11px; color: var(--mu); margin-left: 6px; }

/* 架构 */
.stack { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.ly { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: var(--panel); }
.ly.core { background: linear-gradient(100deg, #1A55B8, #123F8C); border-color: #2a62c4; }
.ly.config { background: linear-gradient(100deg, #0F2C4E, #0C2140); border-color: #22558a; }
.ly.custom { border-style: dashed; border-color: #F2B54466; }
.lyh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .lyh h3 { margin: 0; font-size: 16px; }
.lyh .en { font-family: var(--num); font-size: 10px; letter-spacing: .2em; padding: 1px 8px; border-radius: 4px; background: #ffffff1a; }
.ly.custom .lyh .en { color: var(--amber); background: #F2B5441a; }
.lyh .sub { font-size: 11px; color: #C9D8EA; }
.why { margin: 6px 0 10px; font-size: 12px; color: #C9D8EA; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.chip { background: #ffffff0d; border: 1px solid #ffffff1a; border-radius: 8px; padding: 7px 10px; }
.chip b { display: block; font-size: 12.5px; } .chip span { font-size: 11px; color: #B5C6DB; }
.ly.core .chip { background: #ffffff14; }
.api { align-self: center; font-family: var(--num); font-size: 10.5px; letter-spacing: .1em; color: var(--sky); padding: 6px 16px; position: relative; }
.api::before, .api::after { content: ""; position: absolute; left: 50%; width: 1px; height: 6px; background: var(--sky); }
.api::before { top: 0; } .api::after { bottom: 0; }

/* 表格 */
table.t { width: 100%; border-collapse: collapse; font-size: 12px; }
.t th, .t td { padding: 7px 10px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: top; }
.t thead th { color: var(--dim); font-weight: 500; font-size: 10.5px; letter-spacing: .06em; border-bottom-color: var(--line); white-space: nowrap; }
.t tbody th { font-weight: 500; white-space: nowrap; width: 1%; }
.t .r { text-align: right; white-space: nowrap; }
.t tr.dim td { opacity: .45; }
.t.mt { margin-top: 10px; }
.vbar { white-space: nowrap; } .vb { display: inline-block; width: 120px; height: 6px; background: var(--grid); border-radius: 3px; position: relative; vertical-align: middle; margin-right: 8px; }
.vb::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--mu); }
.vb i { position: absolute; top: 0; bottom: 0; border-radius: 3px; } .vb i.pos { left: 50%; background: var(--amber); } .vb i.neg { right: 50%; background: var(--sky); }
.vbar b { font-family: var(--num); font-weight: 500; }

/* 计费 */
.bill { display: grid; grid-template-columns: 150px 1fr 280px; gap: 16px; align-items: center; }
.billctl { text-align: center; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.packs .need { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack { background: var(--abyss); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.pack.fit { border-color: var(--mint); box-shadow: inset 0 0 0 1px #3FD0B033; }
.ph { display: flex; justify-content: space-between; align-items: center; }
.pp { font-family: var(--num); font-size: 22px; } .pp small { font-size: 11px; color: var(--mu); }
.pr { font-family: var(--num); font-size: 15px; color: var(--sky); }

@media (max-width: 1180px) {
  .method { grid-template-columns: 1fr 1fr; }
  .deck, .row2, .row2.eq, .bill { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .tpls { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 13px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .top { position: sticky; padding: 8px 14px 10px; gap: 6px 10px; }
  .brand img { width: 30px; height: 30px; } .wm i, .pd i, .sep { display: none; } .wm b, .pd b { font-size: 14px; }
  .tools { display: none; }
  .status { margin-left: 0; width: 100%; gap: 4px; } .status span { font-size: 10.5px; padding: 1px 8px; }
  /* 底部标签栏 */
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: none; margin: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: #06111Ff2; backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; overflow: visible; }
  .nav button { text-align: center; padding: 8px 2px 6px; border-bottom: 0; border-top: 2px solid transparent; }
  .nav button b { font-size: 12px; } .nav button i { display: none; }
  .nav button.on { border-top-color: var(--sky); border-bottom-color: transparent; background: #2486D214; }
  main { padding: 12px 12px 24px; } .foot { padding: 14px 14px 24px; }
  .foot a { margin-left: 0; }
  h2 { font-size: 18px; }
  /* 模板横向滑动 */
  .tpls { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -12px 12px; padding: 0 12px 4px; scrollbar-width: none; }
  .tpls::-webkit-scrollbar { display: none; }
  .tpl { flex: 0 0 132px; scroll-snap-align: start; padding: 8px 10px; } .tpl b { font-size: 14px; }
  .pn { padding: 12px; border-radius: 10px; margin-bottom: 12px; }
  .pn > header { flex-wrap: wrap; gap: 2px 8px; } .pn > header h3 { white-space: nowrap; } .pn > header span { font-size: 8.5px; }
  .prms { grid-template-columns: 1fr; gap: 0; } .nin input { width: 92px; font-size: 16px; }
  .deckbar { gap: 8px; } #tierhint { width: 100%; }
  .facts { grid-template-columns: repeat(3, 1fr); gap: 6px; } .facts div { padding: 5px 8px; } .facts b { font-size: 14px; }
  .gauges { grid-template-columns: 1fr 1fr; } .gauges > div { height: 150px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .kpi { padding: 8px 10px; } .kpi .v { font-size: 19px; }
  .h380 { height: 300px; } .h320 { height: 300px; } .h300 { height: 260px; } .h260 { height: 220px; }
  .flows { display: block; margin-top: 8px; }
  .flows div { display: grid; grid-template-columns: 12px 1fr auto; grid-template-rows: auto auto; gap: 0 8px; align-items: center; padding: 7px 0; border-top: 1px dashed var(--grid); }
  .flows .dot { grid-row: 1 / 3; } .flows .ft { font-size: 12px; } .flows .ft i { font-style: normal; color: var(--mu); font-size: 11px; }
  .flows b { font-family: var(--num); font-weight: 500; text-align: right; } .flows em { grid-column: 3; font-style: normal; font-size: 10.5px; color: var(--mu); text-align: right; }
  .toolbar { margin-bottom: 10px; } .toolbar .seg { width: 100%; } .seg { display: flex; } .seg button { flex: 1; }
  .mods { grid-template-columns: 1fr; } .mod p { min-height: 0; }
  .method { grid-template-columns: 1fr; }
  .packs { grid-template-columns: 1fr; } .packs .need { grid-template-columns: 1fr 1fr; }
  .sl { min-width: 0; width: 100%; }
  select { max-width: 100%; width: 100%; }
  .chips { grid-template-columns: 1fr 1fr; } .api { font-size: 9.5px; text-align: center; }
  .t th, .t td { padding: 6px 8px; }
  details.srcs ul { columns: 1; }
  .zoom { padding: 0; } .zbox { height: 100%; border-radius: 0; } .zbody { grid-template-columns: 1fr; grid-template-rows: 46% 1fr; } .zinfo { border-left: 0; border-top: 1px solid var(--line); }
}
/* 报告（打印）专用元素，屏幕上隐藏 */
.rp-cover, .rp-h { display: none; }

@media print {
  @page { size: A4; margin: 14mm 12mm 16mm;
    @top-left { content: ""; } @top-center { content: ""; } @top-right { content: ""; }
    @bottom-left { content: "上海有栖科技有限公司 · 栖策 PERCH"; font: 8pt "PingFang SC", sans-serif; color: #6B7D92; }
    @bottom-center { content: ""; }
    @bottom-right { content: "第 " counter(page) " / " counter(pages) " 页"; font: 8pt "PingFang SC", sans-serif; color: #6B7D92; } }
  html { background: #fff !important; }
}
/* 打印版面：由 printMode 给 body 加 printing 类，打印前就按 A4 宽度排版与绘图 */
body.printing { --abyss: #fff; --panel: #fff; --panel2: #fff; --line: #C9D6E3; --grid: #E3EAF2; --tx: #0B1A2E; --mu: #4F6278; --dim: #6B7D92; --plaster: #0B1A2E; }
body.printing * { box-shadow: none !important; text-shadow: none !important; filter: none !important; backdrop-filter: none !important; }
body.printing { background: #fff !important; color: var(--tx); font-size: 10.5px; padding: 0 !important; }
body.printing .zbtn, body.printing .zoom, body.printing .tools, body.printing .nav, body.printing .bgbrush, body.printing .foot, body.printing .noprint, body.printing input[type=file], body.printing textarea, body.printing button:not(.tpl), body.printing .pscale, body.printing input[type=range], body.printing details.calc, body.printing .tpls, body.printing .toolbar .seg, body.printing .deckbar .seg, body.printing #tierhint { display: none !important; }
body.printing .top { position: static; background: #fff; padding: 0 0 8px; }
body.printing .ridge path { stroke: #1A55B8; stroke-opacity: .5; }
body.printing .led { display: none; }
body.printing .status span { background: #fff !important; }
body.printing main { padding: 0; max-width: none; }
body.printing .rp-cover { display: block; padding: 18px 0 10px; border-bottom: 2px solid #1A55B8; margin-bottom: 14px; }
body.printing .rp-cover .rp-k { font-size: 10px; letter-spacing: .2em; color: #1A55B8; }
body.printing .rp-cover h1 { margin: 2px 0 4px; font-size: 22px; }
body.printing .rp-cover p { margin: 2px 0; }
body.printing .rp + .rp { break-before: page; }
body.printing .rp-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
body.printing .rp-h b { font-size: 16px; }
body.printing .rp-h span { font-family: var(--num); font-size: 9px; letter-spacing: .2em; color: #1A55B8; order: 2; }
body.printing .toolbar h2 { display: none; }
body.printing .toolbar p { font-size: 10px; }
body.printing .pn { background: #fff; padding: 10px 12px; margin-bottom: 10px; break-inside: avoid; page-break-inside: avoid; }
body.printing .kpi, body.printing .mod, body.printing .facts div, body.printing .pack, body.printing .method div, body.printing .nin, body.printing select, body.printing .chip { background: #fff !important; }
body.printing .kpi.hl, body.printing .ly.core, body.printing .ly.config { background: #fff !important; border: 1.5px solid #1A55B8; }
body.printing .kpi.hl .k, body.printing .kpi.hl .n, body.printing .ly .why, body.printing .ly .sub, body.printing .chip span, body.printing .lyh .sub { color: var(--mu); }
body.printing .chip { border-color: var(--line); }
body.printing .deck, body.printing .row2, body.printing .row2.eq { grid-template-columns: 1fr; }
body.printing .prms { grid-template-columns: 1fr 1fr; gap: 0 24px; }
body.printing .prm { padding: 2px 0; }
body.printing .nin { width: 128px; justify-content: flex-end; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
body.printing .nin input { color: var(--tx); width: 80px; font-size: 13px; }
body.printing .kpis { grid-template-columns: repeat(3, 1fr); }
body.printing .mods { grid-template-columns: 1fr 1fr; gap: 8px; }
body.printing .mod { padding: 8px 10px; break-inside: avoid; }
body.printing .mod p { min-height: 0; margin: 2px 0 4px; }
body.printing .msl { display: none; }
body.printing .mod.off { opacity: .5; }
body.printing .bill { grid-template-columns: 1fr; }
body.printing .billctl { display: none; }
body.printing .pd em { color: #1A55B8; -webkit-text-fill-color: #1A55B8; }
body.printing .h380 { height: 340px; }
body.printing main { width: 186mm; margin: 0; }
body.printing .top { width: 186mm; }
body.printing .t { font-size: 9.5px; }
body.printing .scroll { overflow: visible; }
body.printing .pn:has(table) { break-inside: auto; page-break-inside: auto; }
body.printing .t tr { break-inside: avoid; }
body.printing select { max-width: 58mm; width: auto; font-size: 9px; padding: 2px 4px; }
body.printing [data-slot] + .mu.small, body.printing .t td > .mu.small:first-child + br { display: none; }
body.printing .ni { width: 44px; font-size: 9.5px; padding: 1px 3px; }
body.printing .toolbar { margin-bottom: 6px; }
body.printing .top { position: relative; }
body.printing .deckbar { display: none; }
body.printing .top { padding-bottom: 16px; margin-bottom: 4px; }