/* ---------- media (video / image / html file) ---------- */
.stage.media{padding:0;justify-content:stretch;background:#05070B}
.stage.media video,.stage.media img.full{width:100%;height:100%;object-fit:cover;display:block}
.stage.media iframe{width:100%;height:100%;border:none;background:#fff}
.playbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(6,10,18,.6);border:2px solid rgba(255,255,255,.8);display:grid;place-items:center;z-index:2;pointer-events:none}
.playbadge::after{content:"";border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.durpill{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:2px;background:rgba(6,10,18,.78);color:#E8EBF0;z-index:2;font-variant-numeric:tabular-nums}
.t.media{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.t.local{color:var(--warm);border-color:var(--warm);background:var(--warm-soft)}
/* ---------- upload ---------- */
.drop{border:1.5px dashed var(--line-strong);border-radius:6px;padding:34px 20px;text-align:center;color:var(--ink-3);cursor:pointer;transition:border-color .15s,background .15s;background:var(--ground)}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.drop .dt{font-size:14px;color:var(--ink);margin-bottom:6px}
.drop .dh{font-size:12px;line-height:1.7}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-top:18px}
.form .fi{display:flex;flex-direction:column;gap:5px}
.form label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.form input,.form select{padding:7px 9px;background:var(--ground);border:1px solid var(--line);border-radius:3px;font-size:13px}
.form .wide{grid-column:1/-1}
.form .fv{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.upprev{position:relative;max-width:400px;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#05070B;border:1px solid var(--line);margin-top:16px}
.upmeta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:8px;display:flex;gap:14px;flex-wrap:wrap}
/* ---------- modal ---------- */
.mask{position:fixed;inset:0;background:rgba(6,9,14,.74);backdrop-filter:blur(4px);z-index:80;display:none;align-items:center;justify-content:center;padding:24px}
.mask.on{display:flex}
.modal{background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;max-width:min(1080px,96vw);width:100%;max-height:92vh;overflow:auto;box-shadow:0 24px 70px -20px rgba(0,0,0,.6)}
.mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2}
.mhead h3{margin:0 0 3px;font-size:15px;font-weight:600}
.mhead .ms{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.mbody{padding:20px}
.previewbox{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#0A0D14;border:1px solid var(--line)}
.metagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.metagrid .mi .ml{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.metagrid .mi .mv{font-size:13px;color:var(--ink)}
.tree{font-family:var(--mono);font-size:12.5px;line-height:1.85;background:var(--ground);border:1px solid var(--line);border-radius:4px;padding:16px 18px;overflow-x:auto;white-space:pre;color:var(--ink-2);margin:0 0 16px}
.tree b{color:var(--accent);font-weight:500}
.tree i{color:var(--ink-3);font-style:normal}
.jsonbox{font-family:var(--mono);font-size:11.5px;line-height:1.7;background:var(--ground);border:1px solid var(--line);border-radius:4px;padding:16px 18px;overflow:auto;max-height:280px;white-space:pre;color:var(--ink-2);margin:0}
.notebar{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--warm);background:var(--warm-soft);border-radius:4px;margin-bottom:18px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.notebar b{color:var(--warm);font-weight:600}
h5.sech{margin:0 0 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
/* ---------- present ---------- */
.present{position:fixed;inset:0;background:#07090D;z-index:90;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:26px}
.present.on{display:flex;touch-action:none;overscroll-behavior:none}
.pbar,.ppg,.ppeek{touch-action:manipulation}
.pstage{width:min(96vw,calc((100vh - 130px) * 16 / 9));aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:4px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
transition:width .34s cubic-bezier(.22,.8,.28,1),aspect-ratio .34s cubic-bezier(.22,.8,.28,1)}
/* 竖版 9:16 放映容器 */
.present.v916 .pstage{width:min(96vw,calc((100vh - 130px) * 9 / 16));aspect-ratio:9/16}
.pbar{display:flex;align-items:center;gap:14px;color:rgba(241,244,249,.6);font-family:var(--mono);font-size:12px}
.pbar button{color:rgba(241,244,249,.72);border:1px solid rgba(255,255,255,.18);padding:5px 12px;border-radius:3px}
.pbar button:hover{color:#5B9CFF;border-color:#5B9CFF}
.ppg{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}
.viewseg{display:flex;flex:none}
.viewseg button{white-space:nowrap}
/* ---------- chrome ---------- */
#viewPaper .topbar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}#viewPaper .mk{font-weight:600;font-size:15px;white-space:nowrap}#viewPaper .mk i{font-style:normal;color:var(--accent)}#viewPaper .hint{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}#viewPaper .acts{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}#viewPaper .btn{padding:7px 12px;border:1px solid var(--line-strong);border-radius:3px;color:var(--ink-2);font-size:13px;white-space:nowrap;background:var(--surface)}#viewPaper .btn:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}#viewPaper .btn.primary{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);font-weight:500}#viewPaper .btn.primary:hover{background:#4A85FF;border-color:#4A85FF;color:#fff}#viewPaper .btn.ghost{border-color:transparent;color:var(--ink-3)}#viewPaper .btn.ghost:hover{color:var(--accent);background:var(--accent-soft)}#viewPaper .shell{display:grid;grid-template-columns:262px minmax(0,1fr);align-items:start}@media(max-width:900px){#viewPaper .shell{grid-template-columns:1fr}#viewPaper .prail{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)} }#viewPaper .prail{background:var(--surface);border-right:1px solid var(--line);position:sticky;top:53px;height:calc(100vh - 53px);overflow-y:auto;padding-bottom:40px}#viewPaper .sect{border-bottom:1px solid var(--line);padding:14px 16px}#viewPaper .sect h4{margin:0 0 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:400}#viewPaper .sect .sh{font-size:11.5px;color:var(--ink-3);margin:0 0 11px;line-height:1.6}#viewPaper .modlist{display:flex;flex-direction:column;gap:5px}#viewPaper .mod{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--ground);text-align:left;width:100%}#viewPaper .mod:hover{border-color:var(--accent-line);background:var(--accent-soft)}#viewPaper .mod .txt{flex:1;min-width:0}#viewPaper .mod .mn{font-size:13px;color:var(--ink);display:block}#viewPaper .mod .md{font-size:11px;color:var(--ink-3);line-height:1.5;display:block}#viewPaper .mod .plus{color:var(--accent);font-size:15px;line-height:1;flex:none}#viewPaper .bgs{display:grid;grid-template-columns:1fr 1fr;gap:8px}#viewPaper .bgbtn{border:1px solid var(--line);border-radius:3px;overflow:hidden;padding:0;background:none}#viewPaper .bgbtn.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-line)}#viewPaper .bgbtn .sw{height:52px;position:relative}#viewPaper .bgbtn .bn{font-size:11.5px;padding:5px 6px;color:var(--ink-2);border-top:1px solid var(--line);background:var(--ground)}#viewPaper .bgbtn.on .bn{color:var(--accent)}#viewPaper .swatches{display:flex;gap:8px;flex-wrap:wrap}#viewPaper .sw2{width:26px;height:26px;border-radius:50%;border:2px solid transparent;padding:0}#viewPaper .sw2.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ground) inset}#viewPaper .sideseg{display:flex;gap:6px;margin-bottom:11px}#viewPaper .sideseg button{flex:1;padding:5px;border:1px solid var(--line);border-radius:3px;font-size:12px;color:var(--ink-3);background:var(--ground)}#viewPaper .sideseg button.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}#viewPaper .canvas{padding:24px 20px 80px;display:flex;flex-direction:column;align-items:center;gap:26px}#viewPaper .plabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);align-self:flex-start;max-width:794px;width:100%;margin:0 auto -14px}#viewPaper .pagewrap{width:100%;max-width:794px;aspect-ratio:210/297;position:relative;overflow:hidden;border-radius:2px;box-shadow:0 20px 50px -24px rgba(0,0,0,.85);background:#fff}
/* ---------- the A4 sheet ---------- */
#viewPaper .page{
width:210mm;height:297mm;position:absolute;top:0;left:0;transform-origin:top left;
--brand:#3370FF; --pink:#0F1620; --pdim:#5A6472; --pline:#E2E6EC; --pbg:#FFFFFF; --psoft:#F3F6FA;
background:var(--pbg); color:var(--pink);
padding:14mm 14mm 12mm; display:flex; flex-direction:column; gap:6mm; overflow:hidden;
font-size:10.2pt; line-height:1.62;
}#viewPaper .page.bg-rule{background:
linear-gradient(var(--brand),var(--brand)) top left/100% 4mm no-repeat,
repeating-linear-gradient(180deg, var(--psoft) 0 1px, transparent 1px 14mm),
var(--pbg); padding-top:18mm}#viewPaper .page.bg-corner{background:var(--pbg)}#viewPaper .page.bg-corner::before{content:"";position:absolute;top:0;right:0;width:62mm;height:62mm;
background:linear-gradient(140deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 45%,#0F1620) 100%);
clip-path:polygon(100% 0,100% 100%,0 0)}#viewPaper .page.bg-wave{background:var(--pbg)}#viewPaper .page.bg-wave::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34mm;
background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand) 12%,#fff));
border-top:1px solid color-mix(in srgb,var(--brand) 26%,#fff)}#viewPaper .page.bg-dark{--pink:#F2F5FA; --pdim:#93A0B5; --pline:rgba(255,255,255,.14); --pbg:#0E1622; --psoft:rgba(255,255,255,.05);
background:linear-gradient(160deg,#0B1119 0%,#111C2C 60%,#0B121B 100%)}#viewPaper .page>*{position:relative;z-index:1}
/* blocks */
#viewPaper .blk{position:relative}#viewPaper .blk[contenteditable], #viewPaper .blk [contenteditable]{outline:none}#viewPaper .blk .ed:focus{background:color-mix(in srgb,var(--brand) 10%,transparent);border-radius:2px}#viewPaper .bar{position:absolute;top:-3mm;right:0;display:none;gap:3px;z-index:5}#viewPaper .blk:hover .bar{display:flex}#viewPaper .bar button{font-family:var(--mono);font-size:10px;line-height:1;padding:4px 6px;border-radius:2px;background:#0E1013;color:#C8D0DC;border:1px solid #333A45}#viewPaper .bar button:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}#viewPaper .bar .del:hover{background:#A33B3B;border-color:#A33B3B}#viewPaper .b-header{display:flex;align-items:flex-end;justify-content:space-between;gap:8mm;padding-bottom:3mm;border-bottom:1.6px solid var(--brand)}#viewPaper .b-header .lg{display:flex;flex-direction:column;align-items:flex-start;gap:2.4mm}
#viewPaper .b-header .pglg{display:flex;align-items:center;gap:3.4mm}
#viewPaper .b-header .pglg img{display:block;width:auto}
#viewPaper .b-header .pglg img.lg-xn{height:7.6mm}
#viewPaper .b-header .pglg img.lg-zc{height:5.2mm}
#viewPaper .b-header .pglg .lgsep{display:block;width:1px;height:6mm;background:var(--pline)}
#viewPaper .b-header .line{font-size:9.6pt;color:var(--pdim);line-height:1.5}
#viewPaper .page.sk-deep .b-header .pglg img,
#viewPaper .page.sk-beam .b-header .pglg img,
#viewPaper .page.bg-dark .b-header .pglg img{filter:brightness(0) invert(1)}#viewPaper .b-header .nm{font-size:19pt;font-weight:700;letter-spacing:.04em}#viewPaper .b-header .en{font-family:var(--mono);font-size:8pt;letter-spacing:.26em;color:var(--brand)}#viewPaper .b-header .rt{text-align:right;font-size:8.4pt;color:var(--pdim);line-height:1.5}#viewPaper .b-header .rt b{display:block;color:var(--pink);font-size:9.6pt;font-weight:600}#viewPaper .b-hero .h{font-size:23pt;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin-bottom:3mm}#viewPaper .b-hero .h em{font-style:normal;color:var(--brand)}#viewPaper .b-hero .p{font-size:10.4pt;color:var(--pdim);max-width:150mm}#viewPaper .b-six{display:grid;grid-template-columns:repeat(auto-fit,minmax(38mm,1fr));gap:3.5mm}#viewPaper .b-six .c{border:1px solid var(--pline);border-radius:1.5mm;padding:3.4mm;background:var(--psoft)}#viewPaper .b-six .c .t{font-size:10.4pt;font-weight:600;margin-bottom:1.6mm;display:flex;align-items:center;gap:2mm}#viewPaper .b-six .c .t::before{content:"";width:2.4mm;height:2.4mm;background:var(--brand);border-radius:.5mm;flex:none}#viewPaper .b-six .c .d{font-size:8.2pt;color:var(--pdim);line-height:1.6}#viewPaper .b-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm;padding:5mm 0;border-top:1px solid var(--pline);border-bottom:1px solid var(--pline);justify-items:center;text-align:center}#viewPaper .b-stats .s .v{font-family:var(--mono);font-size:24pt;font-weight:500;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums}#viewPaper .b-stats .s{display:flex;flex-direction:column;align-items:center}#viewPaper .b-stats .s .v{display:flex;align-items:baseline;justify-content:center}#viewPaper .b-stats .s .v small{font-size:11pt;color:var(--pdim);margin-left:1mm}#viewPaper .b-stats .s .l{font-size:8.8pt;color:var(--pdim);margin-top:2mm;line-height:1.5}#viewPaper .b-title .k{font-family:var(--mono);font-size:8pt;letter-spacing:.2em;color:var(--brand);margin-bottom:2mm}#viewPaper .b-title .h{font-size:15pt;font-weight:600}#viewPaper .b-problems{display:flex;flex-direction:column;gap:3.5mm}#viewPaper .b-problems .r{display:grid;grid-template-columns:minmax(0,51mm) auto minmax(0,1fr);gap:3.5mm;align-items:center;padding:3.5mm 4mm;border:1px solid var(--pline);border-radius:1.5mm}#viewPaper .b-problems .r .q{font-size:10pt;font-weight:600}#viewPaper .b-problems .r .ar{color:var(--brand);font-size:12pt;line-height:1}#viewPaper .b-problems .r .a{font-size:8.6pt;color:var(--pdim);line-height:1.5}#viewPaper .b-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm}#viewPaper .b-cases .c{border-top:2.2px solid var(--brand);padding-top:3mm}#viewPaper .b-cases .c .who{font-size:10pt;font-weight:600;margin-bottom:1.5mm}#viewPaper .b-cases .c .what{font-size:8.8pt;color:var(--pdim);margin-bottom:2.5mm;line-height:1.6}#viewPaper .b-cases .c .res{font-family:var(--mono);font-size:8.4pt;color:var(--brand);line-height:1.55}#viewPaper .b-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;padding-top:6mm}#viewPaper .b-flow .st{padding-right:4mm;position:relative}#viewPaper .b-flow .st .n{font-family:var(--mono);font-size:8pt;color:var(--brand);margin-bottom:1.5mm}#viewPaper .b-flow .st .t{font-size:10.4pt;font-weight:600;margin-bottom:1.5mm}#viewPaper .b-flow .st .d{font-size:8.6pt;color:var(--pdim);line-height:1.55}#viewPaper .b-flow .st::after{content:"";position:absolute;left:0;right:2mm;top:-3.4mm;height:1px;background:var(--pline)}#viewPaper .b-flow .st::before{content:"";position:absolute;left:0;top:-4.6mm;width:2.4mm;height:2.4mm;border-radius:50%;background:var(--brand)}#viewPaper .b-quote{border-left:2.5px solid var(--brand);padding:1mm 0 1mm 5mm}#viewPaper .b-quote .q{font-size:13pt;line-height:1.5;font-weight:300}#viewPaper .b-quote .a{font-size:8.6pt;color:var(--pdim);margin-top:2.5mm}#viewPaper .b-list .h{font-size:10.4pt;font-weight:600;margin-bottom:2.5mm}#viewPaper .b-list ul{margin:0;padding-left:4.4mm;display:flex;flex-direction:column;gap:1.6mm}#viewPaper .b-list li{font-size:9.2pt;color:var(--pdim)}#viewPaper .b-list li b{color:var(--pink);font-weight:600}#viewPaper .blk:has(.b-contact){margin-top:0}
#viewPaper .page:has(.b-contact){justify-content:flex-start}#viewPaper .b-contact{display:grid;grid-template-columns:1fr auto;gap:8mm;align-items:end;padding-top:4mm;border-top:1px solid var(--pline)}#viewPaper .b-contact .cl{display:flex;flex-direction:column;gap:1.6mm}#viewPaper .b-contact .cl .h{font-size:11pt;font-weight:600;margin-bottom:1mm}#viewPaper .b-contact .cl .l{font-size:9pt;color:var(--pdim)}#viewPaper .b-contact .cl .l b{color:var(--pink);font-weight:500}#viewPaper .b-contact .qr{text-align:center}#viewPaper .b-contact .qr img{width:22mm;height:22mm;display:block;border:1px solid var(--pline);border-radius:1mm;background:#fff;padding:1mm}#viewPaper .b-contact .qr span{display:block;font-size:7.4pt;color:var(--pdim);margin-top:1.5mm;line-height:1.4}#viewPaper .b-divider{height:1px;background:var(--pline)}#viewPaper .emptyhint{border:1.5px dashed var(--pline);border-radius:2mm;padding:8mm;text-align:center;color:var(--pdim);font-size:9pt}
/* ---------- print ---------- */
/* 单张 A4 打印 */
#printA4{display:none}
@media print{
html.printing-a4 body>*{display:none!important}
html.printing-a4 #printA4{display:block!important;position:static}
html.printing-a4 #printA4 .stage{width:auto;height:auto;position:static;padding:0;background:none;
display:block;overflow:visible;box-shadow:none}
html.printing-a4 #printA4 .a4{transform:none!important;width:210mm;height:297mm;box-shadow:none;
border-radius:0;print-color-adjust:exact;-webkit-print-color-adjust:exact}
html.printing-a4 .a4 .ed{outline:none!important;background:none!important}
}
/* OnePage 编辑器：文档选择器 */
#viewPaper .doclist{display:flex;flex-direction:column;gap:2px;max-height:none}
#viewPaper .doc{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;
padding:8px 10px;background:transparent;border:1px solid transparent;border-radius:3px;
color:var(--ink-2);cursor:pointer;font:inherit}
#viewPaper .doc:hover{background:var(--surface-2);color:var(--ink)}
#viewPaper .doc.on{background:color-mix(in srgb,var(--accent) 14%,transparent);
border-color:var(--accent-line);color:var(--ink)}
#viewPaper .doc .dn{font-size:12.8px;font-weight:600}
#viewPaper .doc .dd{font-size:11px;color:var(--ink-3)}
#viewPaper .doc.sub{padding:6px 10px 6px 16px}
#viewPaper .doc.sub .dn{font-size:12.2px;font-weight:500}
#viewPaper .docg{display:flex;align-items:center;gap:7px;margin:11px 0 3px;
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
#viewPaper .docg i{font-style:normal;font-size:10px;color:var(--accent)}
#viewPaper .docg::after{content:"";flex:1;height:1px;background:var(--line)}
#viewPaper .pagewrap.sheetwrap{aspect-ratio:794/1123}
#viewPaper .page.psheet{padding:0;background:none;box-shadow:none;width:794px;height:1123px;
transform:none;position:relative}
#viewPaper .page.psheet .a4{transform-origin:top left;position:absolute;left:0;top:0}
/* 后台新增的 OnePage：一张现成的 A4，尺寸写死，缩放交给 pFit（它按 794 算） */
#viewPaper .page.psheet .a4.ppa4{width:794px;height:1123px;overflow:hidden;background:#fff}
#viewPaper .ppframe{width:794px;height:1123px;border:0;display:block;background:#fff}
#viewPaper .doc .ppdraft{font-style:normal;margin-left:6px;font-size:10.5px;font-weight:600;
padding:1px 6px;border-radius:var(--r-pill);background:var(--warm-soft);color:var(--warm-ink)}
#viewPaper .page.psheet .a4 .ed{cursor:text;border-radius:2px;transition:background .12s}
#viewPaper .page.psheet .a4 .ed:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}
#viewPaper .page.psheet .a4 .ed:focus{outline:2px solid var(--brand);outline-offset:2px}
@media print{@page{size:A4;margin:0}html,body{background:#fff}.topbar, #viewLib, #viewPaper .prail, #viewPaper .plabel, #viewPaper .bar, .noprint{display:none !important}#viewPaper .shell{display:block}#viewPaper .canvas{padding:0;gap:0;display:block}#viewPaper .pagewrap{max-width:none;width:210mm;height:297mm;aspect-ratio:auto;overflow:visible;box-shadow:none;border-radius:0;page-break-after:always}#viewPaper .pagewrap:last-child{page-break-after:auto}#viewPaper .page{transform:none !important;position:relative;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
#viewPaper .page .t{background:none;border:none;padding:0;border-radius:0;white-space:normal;color:inherit}
/* ================================================================
版面饱满度：内容块撑满可用高度
之前舞台把内容居中，内容块按内容高，于是下半页大片留白。
这里让主内容块 flex:1，内部条目等分生长、文字垂直居中。
封面 / 观点 / 章节 / 封底这类刻意留白的页面不在此列。
================================================================ */
.stage > .arch,.stage > .stats,.stage > .cols3,.stage > .tl,
.stage > .podium,.stage > .stk,.stage > .bk,
.stage > .phgrid,.stage > .spwrap,.stage > .lwall{flex:1 1 auto;min-height:0}
/* 名称说明表：行等分生长，文字垂直居中 */
.stage .arch{justify-content:stretch}
.stage .arch .arow{flex:1 1 0;min-height:0}
.stage .arch.tight .arow,.stage .arch.snug .arow{flex:1 1 0}
/* 内容太少时不要把卡片抻空：给生长设个上限，剩下的空间靠配图或图形补 */
.stage > .cols3{max-height:462px;align-self:stretch}
.stage > .stats{max-height:300px}
.stage > .tl{max-height:430px}
.stage > .podium{max-height:470px}
/* 上面这些高度上限是按 720px 高的横版调的。竖版舞台有 1280px 高，
再套这个上限会让页面下半截整块空着，所以竖版一律解除。 */
.stage.v916 > .cols3,.stage.v916 > .stats,.stage.v916 > .tl,
.stage.v916 > .podium{max-height:none}
/* 三栏并置：卡片等高，内容垂直居中。
四种页面风格各自写过 justify-content，这里要用同等特异度才盖得住。 */
.stage .cols3{align-items:stretch}
.stage .cbox{display:flex;flex-direction:column}
.stage.st-tech .cols3 .cbox,.stage.st-depth .cols3 .cbox,
.stage.st-beam .cols3 .cbox,.stage.st-plain .cols3 .cbox{justify-content:center}
/* 数字条：卡片等高 */
.stage .stats{align-items:stretch}
.stage .stat{display:flex;flex-direction:column;justify-content:center;width:100%}
/* 承诺台 / 分层堆叠 / 图文左右 */
.stage .podium{align-items:stretch}
.stage .podium .pdi{display:flex;align-items:center}
.stage .spwrap{align-items:stretch}
.stage .spleft{display:flex;flex-direction:column;justify-content:space-evenly}
/* 时间轴：主干与圆点必须贴着容器上沿对齐，只让每段内容向下铺开 */
.stage .tl{align-content:stretch}
.stage .tl .tlp{display:flex;flex-direction:column}
/* 表格：撑满高度，行按内容比例分摊多出来的空间 */
.stage > table.cmp{flex:1 1 auto;min-height:0;height:100%}
.stage > table.cmp td,.stage > table.cmp th{vertical-align:middle}
/* 组件原子：撑满剩余空间 */
.stage .bk{display:flex;flex-direction:column;justify-content:center;margin-top:6px}
.stage .bk-cv{margin-top:auto;margin-bottom:auto}
/* ================================================================
放映进场动效：元素错落淡入上移。
只在放映态跑一次，编辑与缩略图不受影响；跟随系统的「减弱动效」设置。
================================================================ */
@keyframes bkRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bkFade{from{opacity:0}to{opacity:1}}
.stage.enter > .tbar,.stage.enter > .eyeb,.stage.enter > .center,
.stage.enter > .arch,.stage.enter > .cols3,.stage.enter > .stats,.stage.enter > .tl,
.stage.enter > table.cmp,.stage.enter > .podium,.stage.enter > .stk,.stage.enter > .bk,
.stage.enter > .phgrid,.stage.enter > .spwrap,.stage.enter > .lwall,.stage.enter > .sl-foot,
.stage.enter > .bkcap,.stage.enter > .creds,.stage.enter > .ringrow{
animation:bkRise .52s cubic-bezier(.22,.9,.3,1) both}
.stage.enter > .eyeb{animation-delay:.02s}
.stage.enter > .tbar{animation-delay:.06s}
.stage.enter > .center{animation-delay:.10s}
.stage.enter > .arch,.stage.enter > .cols3,.stage.enter > .stats,.stage.enter > .tl,
.stage.enter > table.cmp,.stage.enter > .podium,.stage.enter > .stk,.stage.enter > .bk,
.stage.enter > .phgrid,.stage.enter > .spwrap,.stage.enter > .lwall,
.stage.enter > .creds,.stage.enter > .ringrow{animation-delay:.16s}
.stage.enter > .bkcap,.stage.enter > .sl-foot{animation-delay:.30s}
/* 内部条目再错落一层，做出「逐条落位」的观感 */
.stage.enter .arow,.stage.enter .cbox,.stage.enter .stat,.stage.enter .tlp,
.stage.enter .pdi,.stage.enter .irw,.stage.enter .nrw,.stage.enter .duc,
.stage.enter .tlc,.stage.enter .buw,.stage.enter .baw,.stage.enter .ringitem,
.stage.enter table.cmp tbody tr{animation:bkRise .5s cubic-bezier(.22,.9,.3,1) both}
.stage.enter .arow:nth-child(1),.stage.enter .cbox:nth-child(1),.stage.enter .stat:nth-child(1),
.stage.enter .tlp:nth-child(1),.stage.enter .pdi:nth-child(1),.stage.enter .irw:nth-child(1),
.stage.enter .nrw:nth-child(1),.stage.enter .duc:nth-child(1),.stage.enter .tlc:nth-child(1),
.stage.enter .buw:nth-child(1),.stage.enter .baw:nth-child(1),.stage.enter .ringitem:nth-child(1),
.stage.enter table.cmp tbody tr:nth-child(1){animation-delay:.22s}
.stage.enter .arow:nth-child(2),.stage.enter .cbox:nth-child(2),.stage.enter .stat:nth-child(2),
.stage.enter .tlp:nth-child(2),.stage.enter .pdi:nth-child(2),.stage.enter .irw:nth-child(2),
.stage.enter .nrw:nth-child(2),.stage.enter .duc:nth-child(2),.stage.enter .tlc:nth-child(2),
.stage.enter .buw:nth-child(2),.stage.enter .baw:nth-child(2),.stage.enter .ringitem:nth-child(2),
.stage.enter table.cmp tbody tr:nth-child(2){animation-delay:.29s}
.stage.enter .arow:nth-child(3),.stage.enter .cbox:nth-child(3),.stage.enter .stat:nth-child(3),
.stage.enter .tlp:nth-child(3),.stage.enter .pdi:nth-child(3),.stage.enter .irw:nth-child(3),
.stage.enter .nrw:nth-child(3),.stage.enter .duc:nth-child(3),.stage.enter .tlc:nth-child(3),
.stage.enter .buw:nth-child(3),.stage.enter .baw:nth-child(3),.stage.enter .ringitem:nth-child(3),
.stage.enter table.cmp tbody tr:nth-child(3){animation-delay:.36s}
.stage.enter .arow:nth-child(n+4),.stage.enter .cbox:nth-child(n+4),.stage.enter .stat:nth-child(n+4),
.stage.enter .tlp:nth-child(n+4),.stage.enter .pdi:nth-child(n+4),.stage.enter .irw:nth-child(n+4),
.stage.enter .nrw:nth-child(n+4),.stage.enter .duc:nth-child(n+4),.stage.enter .tlc:nth-child(n+4),
.stage.enter .buw:nth-child(n+4),.stage.enter .baw:nth-child(n+4),.stage.enter .ringitem:nth-child(n+4),
.stage.enter table.cmp tbody tr:nth-child(n+4){animation-delay:.43s}
/* 图形类组件整体淡入，不逐件跳 */
.stage.enter .bkg{animation:bkFade .7s ease .2s both}
@media(prefers-reduced-motion:reduce){
.stage.enter,.stage.enter *{animation:none!important}
}
/* 组件库缩略图：只画结构本身 */
.stage.atomonly{padding:26px 30px;justify-content:center}
.stage.atomonly .bkcap{display:none}
/* 快捷选页头部 */
.railhead{background:var(--surface-2)}
.railhead h4{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.railhead .rhn{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600;letter-spacing:0}
.railops{display:flex;gap:7px;margin-top:10px}
.railops .btn{flex:1;padding:7px 8px;font-size:12px;text-align:center;justify-content:center}
.fgroup.on{background:var(--accent-soft)}
.fgroup.on h4{color:var(--accent)}
.fgroup h4 button{flex:none}
/* ---------- 图文类组件 ---------- */
.stage .bk-psplit{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:34px;align-items:stretch;flex:1 1 auto}
.stage .bk-psplit .pstx{display:flex;flex-direction:column;justify-content:center;gap:15px}
.stage .bk-psplit .psrow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:baseline;
padding:13px 0;border-bottom:1px solid var(--s-line)}
.stage .bk-psplit .psrow:last-child{border-bottom:none}
.stage .bk-psplit .psn{font-family:var(--num);font-size:20px;font-weight:600;line-height:1.2;
background:linear-gradient(140deg,var(--s-acc2),var(--s-acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.stage .bk-psplit b{display:block;font-size:22px;font-weight:600;line-height:1.35;color:var(--s-ink)}
.stage .bk-psplit span{display:block;margin-top:5px;font-size:15.5px;line-height:1.62;color:var(--s-dim)}
.stage .bk-psplit.d-md b{font-size:20.5px} .stage .bk-psplit.d-md span{font-size:15px}
.stage .bk-psplit.d-sm b{font-size:19px} .stage .bk-psplit.d-sm span{font-size:14.5px}
.stage .bk-psplit.d-sm .psrow{padding:10px 0}
.stage .bk-psplit.d-xs b{font-size:18px} .stage .bk-psplit.d-xs span{font-size:13.8px;line-height:1.55}
.stage .bk-psplit.d-xs .psrow{padding:8px 0}
.stage .pspic{margin:0;position:relative;border-radius:14px;overflow:hidden;
border:1px solid var(--s-cardln);background:var(--s-card)}
.stage .pspic img{width:100%;height:100%;object-fit:cover;display:block}
.stage .pspic figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:13px;
color:#fff;background:linear-gradient(180deg,transparent,rgba(6,10,22,.72))}
.stage .bk-pband{display:flex;flex-direction:column;gap:20px;flex:1 1 auto}
.stage .pbimg{margin:0;flex:1 1 auto;min-height:0;border-radius:14px;overflow:hidden;
border:1px solid var(--s-cardln);background:var(--s-card)}
.stage .pbimg img{width:100%;height:100%;object-fit:cover;display:block}
.stage .pbrow{display:grid;gap:16px;flex:none}
.stage .pbrow.n2{grid-template-columns:repeat(2,1fr)}
.stage .pbrow.n3{grid-template-columns:repeat(3,1fr)}
.stage .pbrow.n4{grid-template-columns:repeat(4,1fr)}
.stage .pbc{padding:14px 16px;border-radius:11px;background:var(--s-card);border:1px solid var(--s-cardln)}
.stage .pbc .pbi{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;
background:var(--s-ghost);border:1px solid var(--s-cardln);margin-bottom:8px}
.stage .pbc .pbi .ico{width:18px;height:18px}
.stage .pbc b{display:block;font-size:18.5px;font-weight:600;line-height:1.32;color:var(--s-ink)}
.stage .pbc span{display:block;margin-top:4px;font-size:14px;line-height:1.58;color:var(--s-dim)}
.stage .bk-pband.d-sm .pbc{padding:11px 13px} .stage .bk-pband.d-sm .pbc b{font-size:17px}
.stage .bk-pband.d-sm .pbc span{font-size:13.4px}
.stage .bk-pband.d-xs .pbc{padding:10px 12px} .stage .bk-pband.d-xs .pbc b{font-size:16px}
.stage .bk-pband.d-xs .pbc span{font-size:13px;line-height:1.5}
.stage .bk-pband.d-xs .pbc .pbi{width:26px;height:26px;margin-bottom:6px}
.stage .bk-phero{position:relative;flex:1 1 auto;border-radius:16px;overflow:hidden;min-height:0}
.stage .phbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .phscrim2{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(6,10,22,.30) 0%,rgba(6,10,22,.62) 52%,rgba(6,10,22,.86) 100%)}
.stage .phrow{position:absolute;left:0;right:0;bottom:0;display:grid;gap:1px;background:rgba(255,255,255,.12)}
.stage .phrow.n2{grid-template-columns:repeat(2,1fr)}
.stage .phrow.n3{grid-template-columns:repeat(3,1fr)}
.stage .phrow.n4{grid-template-columns:repeat(4,1fr)}
.stage .phrow .phc{padding:18px 20px;background:rgba(8,13,28,.62);backdrop-filter:blur(6px)}
.stage .phrow .phc b{display:block;font-size:19px;font-weight:600;color:#fff;line-height:1.32}
.stage .phrow .phc span{display:block;margin-top:5px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.80)}
.stage .bk-phero.d-sm .phrow .phc{padding:14px 16px}
.stage .bk-phero.d-sm .phrow .phc b{font-size:17.5px}
.stage .bk-phero.d-sm .phrow .phc span{font-size:13.4px}
.stage .bk-phero.d-xs .phrow .phc{padding:12px 14px}
.stage .bk-phero.d-xs .phrow .phc b{font-size:16.5px}
.stage .bk-phero.d-xs .phrow .phc span{font-size:13px;line-height:1.52}
/* 说明与标签分两级：说明一行，标签另起一行做成小色块 */
.a4 .psvc .pc span em,.a4 .pedge li span em{
display:inline-block;font-style:normal;margin:3px 5px 0 0;padding:1.5px 7px;
border-radius:3px;font-size:10.4px;line-height:1.5;
color:var(--pa);background:color-mix(in srgb,var(--pa) 9%,transparent);
border:1px solid color-mix(in srgb,var(--pa) 20%,transparent);white-space:nowrap}
.a4 .psvc .pc span br,.a4 .pedge li span br{line-height:0}
.a4.sk-deep .psvc .pc span em,.a4.sk-deep .pedge li span em,
.a4.sk-beam .psvc .pc span em,.a4.sk-beam .pedge li span em{
color:var(--pink);background:color-mix(in srgb,var(--pa) 22%,transparent);
border-color:color-mix(in srgb,var(--pa) 40%,transparent)}
/* OnePage 底部的个人微信二维码 */
#viewPaper .b-contact .qr .qrph{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:1.2mm;width:22mm;height:22mm;border:1px dashed var(--pline);border-radius:1mm;background:#fff;
padding:2mm;cursor:pointer;transition:border-color .15s}
#viewPaper .b-contact .qr .qrph:hover{border-color:var(--brand)}
#viewPaper .b-contact .qr .qrph i{display:block;width:3mm;height:3mm;border:1px solid var(--pline);border-radius:.6mm}
#viewPaper .b-contact .qr .qrph i:nth-child(2){margin-left:6mm;margin-top:-3.6mm}
#viewPaper .b-contact .qr .qrph i:nth-child(3){margin-top:1mm}
#viewPaper .b-contact .qr .qrph em{font-style:normal;font-size:6.4pt;color:var(--pdim);line-height:1.3;text-align:center}
#viewPaper .b-contact .qr img.qrup{cursor:pointer}
.qrbox{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start}
.qrprev{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
display:grid;place-items:center;overflow:hidden}
.qrprev img{width:100%;height:100%;object-fit:contain;background:#fff}
.qrprev span{font-size:12.5px;color:var(--ink-3)}
.qrside{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.qrpick{cursor:pointer}
.qrtip{margin:4px 0 0;font-size:12px;line-height:1.75;color:var(--ink-3)}
@media(max-width:820px){ .qrbox{grid-template-columns:1fr} }
/* ---------- PPT 模板 · 使用场景 ---------- */
.scnbar{margin:-2px 0 18px}
.scnchips{display:flex;gap:8px;flex-wrap:wrap}
.scnchip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);
border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13px;
font-weight:500;transition:all .15s}
.scnchip:hover{border-color:var(--accent-line);color:var(--accent)}
.scnchip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.scnchip i{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.72}
.scnhint{margin:11px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.7}
.scnnote{margin-top:12px;padding:13px 15px;border-radius:var(--r-md);background:var(--accent-soft);
border:1px solid var(--accent-line);display:flex;flex-direction:column;gap:5px}
.scnnote b{font-size:13.5px;color:var(--accent-ink);font-weight:700}
.scnnote span{font-size:12.5px;color:var(--ink-2);line-height:1.65}
.scnnote em{font-style:normal;font-weight:600;color:var(--ink-3);margin-right:9px}
.tcover .tscn{position:absolute;left:9px;top:9px;font-size:10.5px;padding:2px 9px;
border-radius:var(--r-pill);background:rgba(8,14,34,.62);color:rgba(255,255,255,.9);
max-width:calc(100% - 90px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){
.scnchip{padding:9px 12px;font-size:12.5px;min-height:40px}
.scnnote{padding:11px 13px}
}
/* ---------- 用户管理 ---------- */
.usload{padding:40px;text-align:center;color:var(--ink-3);font-size:13px}
.usbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.uscnt{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.ustable{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.ushead,.usrow{display:grid;grid-template-columns:118px minmax(0,1fr) 96px 104px auto;
gap:12px;align-items:center;padding:11px 14px}
.ushead{background:var(--surface-2);font-size:11.5px;font-weight:700;color:var(--ink-3)}
.usrow{border-top:1px solid var(--line);font-size:13px}
.usrow.off{opacity:.55}
.usph{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.usnm b{font-weight:600;color:var(--ink)}
.usnm i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:8px}
.usrole{font-size:11.5px;font-weight:600;border-radius:var(--r-pill);padding:3px 10px;text-align:center;
border:1px solid var(--line);color:var(--ink-2);background:var(--surface-2);white-space:nowrap}
.usrole.r-root{color:var(--on-accent);background:linear-gradient(140deg,var(--accent-strong),var(--accent));border-color:transparent}
.usrole.r-admin{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
.usst{font-size:12px;color:var(--ink-2)}
.usst i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:2px}
.usops{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.usops .btn{padding:4px 9px;font-size:11.5px}
.usempty{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:13px;
border:1px dashed var(--line-strong);border-radius:var(--r-md)}
.usnote{margin-top:14px;font-size:12px;line-height:1.7;color:var(--ink-2);
background:var(--warm-soft);border-radius:var(--r-md);padding:11px 14px}
.usnote b{color:var(--ink);margin-right:8px}
.usform{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-md);
padding:16px;margin-bottom:16px;display:flex;flex-direction:column;gap:12px}
.usfh{font-size:14px;font-weight:700;color:var(--ink)}
.usgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px}
.usgrid label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-3);font-weight:500}
.usgrid input{padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
background:var(--surface);color:var(--ink);font-size:13.5px}
.usgrid input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.usgrid input[readonly]{background:var(--surface-2);color:var(--ink-3)}
.usroles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.usrolebtn{text-align:left;padding:11px 13px;border-radius:var(--r-sm);border:1px solid var(--line);
background:var(--surface);transition:all .15s}
.usrolebtn:hover{border-color:var(--accent-line)}
.usrolebtn.on{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 2px var(--accent-soft)}
.usrolebtn b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.usrolebtn.on b{color:var(--accent)}
.usrolebtn span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.55}
.uslock{font-size:11.5px;color:var(--ink-3);border:1px dashed var(--line-strong);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}
.usmsg{font-size:12px;line-height:1.65;color:var(--warm-ink);background:var(--warm-soft);
border-radius:var(--r-sm);padding:9px 11px}
.usmsg.err{color:var(--crit);background:var(--crit-soft)}
.usfoot{display:flex;gap:9px}
@media(max-width:820px){
.ushead{display:none}
.usrow{grid-template-columns:1fr;gap:6px;padding:13px 14px}
.usops{justify-content:flex-start}
.usops .btn{min-height:36px;padding:6px 11px}
.usgrid{grid-template-columns:1fr}
.usroles{grid-template-columns:1fr}
}
/* ================================================================
移动端（≤820px）操作层重做
1. 顶栏 + 二级栏双层吸顶，二级栏压成一行
2. 搜索收进图标，点开才占一行
3. 外观 / 身份弹层改成底部抽屉，不再被横向滚动条裁切
4. 弹窗改成底部抽屉：头部吸顶、内容独立滚动、底部留安全区
5. 触控目标统一 ≥40px
================================================================ */
@media(max-width:820px){
/* --- 关键：去掉 backdrop-filter。它会给 position:fixed 造包含块，
也会让子元素被 overflow 容器裁切，是弹层点了没反应的根因 --- */
.topbar,.subbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
background:var(--surface)}
.topbar{box-shadow:0 1px 0 var(--line)}
/* --- 二级栏压成一行 --- */
.subbar{top:52px;padding:7px 10px;gap:8px;flex-wrap:nowrap;align-items:center;
overflow:visible;min-height:52px}
#btnSearch{flex:none;order:0;display:inline-grid;place-items:center;width:38px;height:38px;
padding:0;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface-2)}
#btnSearch svg{width:17px;height:17px;stroke:var(--ink-2);fill:none;stroke-width:2;stroke-linecap:round}
#btnSearch.on{border-color:var(--accent);background:var(--accent-soft)}
#btnSearch.on svg{stroke:var(--accent)}
.subbar .search{display:none}
body.searchon .subbar{flex-wrap:wrap}
body.searchon .subbar .search{display:block;order:9;flex:1 1 100%;max-width:none;min-width:0}
body.searchon .subbar .search input{width:100%;height:42px;padding:9px 14px 9px 36px}
body.searchon .subbar .search svg{left:13px}
.subbar #paperNow{flex:1 1 auto;order:1;max-width:none;padding:0;font-size:13px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subbar .tb-actions{order:2;width:auto;flex:1 1 auto;min-width:0;margin-left:0;
flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;row-gap:0;
scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start}
.subbar .tb-actions::-webkit-scrollbar{display:none}
.subbar .tb-actions>*{flex:none}
/* 一级菜单：四个标签必须一屏排满，不靠横向滚动 */
.viewseg{gap:0}
.topbar .brand{padding-right:10px}
.savecard{border-radius:18px 18px 0 0;width:100%;max-width:none}
.savemenu{align-items:flex-end}
/* --- 触控目标 --- */
.btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
select.btn{min-height:40px}
.viewseg button{min-height:44px}
.pick{width:40px;height:40px;border-radius:9px}
.pick svg{width:19px;height:19px}
.ftag,.skinchip,.bseg button,.pseg button{min-height:38px}
.chip{min-height:32px}
.opt{min-height:44px}
.citem .ops button{min-width:30px;min-height:30px}
.tfoot .btn,.blkfoot .btn,.basset .bf .btn,.kitem .kfoot .btn{min-height:38px}
#viewPaper .prail .doc{min-height:42px;display:flex;align-items:center}
.subbar #paperNow{flex:0 1 auto;max-width:40%}
/* --- 弹层：底部抽屉 --- */
/* .subbar 自身有 z-index，会造层叠上下文；抽屉开着时把它整体抬到遮罩之上，
否则遮罩会盖住抽屉——这正是「点了没反应」的第二个原因 */
/* 遮罩只负责压暗身后的页面，不该压在面板上。
它原来是 60、面板也是 60，靠 DOM 顺序决定谁在上——面板一长，
下半截就会被遮罩盖住，点上去毫无反应。把三层的次序写明：
遮罩 59 < 顶栏/工具条 61 < 面板 62。 */
.popmask{position:fixed;inset:0;background:rgba(12,20,38,.42);z-index:59;display:none}
body.popopen .popmask{display:block}
body.popopen .subbar,body.popopen .topbar{z-index:61}
body.popopen{overflow:hidden}
.pop,.pop-me,#popLook{position:fixed!important;left:0!important;right:0!important;
bottom:0!important;top:auto!important;width:auto!important;max-width:none!important;
max-height:80vh;overflow-y:auto;overscroll-behavior:contain;
/* 要比遮罩(60)和顶栏/工具条(61)都高。跟遮罩同为 60 时靠 DOM 顺序决定谁在上，
面板一长就会有一截被遮罩盖住——点上去没反应。 */
-webkit-overflow-scrolling:touch;z-index:62;
border-radius:18px 18px 0 0;border:none;padding:8px 16px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -10px 40px -12px rgba(12,20,38,.45);gap:11px}
.pop::before{content:"";display:block;flex:none;width:40px;height:4px;border-radius:2px;
background:var(--line-strong);margin:4px auto 8px}
/* 窄屏用下面那排 chip 代替原生 select —— 见 app.js 里 popChipsFor 的说明。
.poprow 本身是 flex 行（标题在左、下拉在右），塞一排会换行的 chip 进去
会和下一行叠在一起；窄屏直接改成块级排版：标题一行，选项一行。 */
/* flex:none 不能少：.pop 是 flex 列容器，内容一多就会把这些行压扁——
写成 min-height:0 时它真的被压成了 0 高，三组选项全叠在一起。 */
.poprow{display:block;flex:none}
.poprow>span{display:block;margin-bottom:8px}
.poprow select{display:none}
.optchips{display:flex;flex-wrap:wrap;gap:7px;width:100%}
.optchip{font:inherit;font-size:12.5px;line-height:1;min-height:36px;padding:0 13px;
border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface-2);
color:var(--ink-2);cursor:pointer}
.optchip.on{border-color:var(--accent);background:var(--accent-soft);
color:var(--accent);font-weight:600}
.popbtn{min-height:44px}
.bgpick{grid-template-columns:repeat(4,1fr);gap:9px}
.bgpick button{aspect-ratio:16/11}
/* --- 弹窗：底部抽屉 --- */
.mask{padding:0;align-items:flex-end}
.modal{width:100%;max-width:none;max-height:92vh;border-radius:18px 18px 0 0;
border:none;display:flex;flex-direction:column;overflow:hidden}
.modal::before{content:"";flex:none;width:40px;height:4px;border-radius:2px;
background:var(--line-strong);margin:8px auto 0}
/* 标题和「关闭」同一行：原来标题独占一整行，关闭按钮被挤到下一行，
弹窗一打开先看到一个孤零零的「关闭」，很怪 */
.mhead{position:static;flex:none;padding:12px 16px 12px;gap:10px;
flex-wrap:nowrap;align-items:flex-start}
.mhead>div:first-child{flex:1 1 auto;min-width:0}
.mhead h3{font-size:16px;line-height:1.4}
.mhead .ms{font-size:12px;line-height:1.55}
.mhead>div:last-child,.mhead .btn{flex:none}
.mhead>div[style]{width:100%;justify-content:flex-start!important;flex-wrap:wrap}
.mhead .btn{min-height:40px;padding:8px 12px;white-space:nowrap}
.mbody{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:14px 16px calc(20px + env(safe-area-inset-bottom))}
.metagrid{grid-template-columns:1fr 1fr}
.previewbox{border-radius:var(--r-sm)}
.bench{grid-template-columns:1fr}
.bform,.bprev{padding:13px}
.bpv canvas{max-height:44vh}
.logh{display:none}
}
@media(max-width:420px){
.subbar{padding:7px 8px;gap:6px}
.mhead{padding:12px 13px}
.mbody{padding:13px 13px calc(18px + env(safe-area-inset-bottom))}
.metagrid{grid-template-columns:1fr}
}
/* 个人中心底部的构建版本号：线上排查时用来确认部署的是哪一版 */
.uifoot .buildver{margin-top:2px;padding-top:8px;border-top:1px solid var(--line);
font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.uifoot .buildver b{font-family:var(--mono);color:var(--ink-2);font-weight:600}
/* ================================================================
竖版 9:16 · 可读性与版式修正
----------------------------------------------------------------
720px 宽的舞台在 390px 的手机上缩放 0.542 倍——舞台里的 15px 到手机上
只剩 8px，基本没法看。这一层做三件事：
1) 把正文字号抬到 21px 以上（手机上 ≥11.4px）
2) 把卡片内外边距收紧，把抬字号多占的高度还回来
3) 修掉 logo 墙、环形图这类照搬横版尺寸而崩掉的版式
放在 ui.css 末尾，是最后加载的一层，压得住前面的 !important 之外的规则。
================================================================ */
/* ---------- 通用：正文字号下限 ---------- */
.stage.v916 .arch .arow .ad{font-size:21px!important;line-height:1.55!important}
.stage.v916 .arch .arow .an{font-size:20px!important}
.stage.v916 .plat .pl .pn{font-size:21px!important}
.stage.v916 .plat .pl .pd em{font-size:17.5px!important;padding:5px 13px!important;line-height:1.5}
.stage.v916 .plat .pl .pd{gap:7px!important}
.stage.v916 .tlp .tt{font-size:22px!important}
.stage.v916 .tlp .td{font-size:18.5px!important;line-height:1.6!important}
.stage.v916 .tlp .tw{font-size:17px!important}
.stage.v916 .creds .crtop b{font-size:21px}
.stage.v916 .creds .crtop span,.stage.v916 .creds li{font-size:18px!important;line-height:1.6!important}
.stage.v916 .creds .crband{gap:8px}
.stage.v916 .cols3 .cbox b{font-size:21px}
.stage.v916 .cols3 .cbox span,.stage.v916 .cols3 .cbox li{font-size:18.5px!important;line-height:1.6!important}
.stage.v916 .stat .sl{font-size:19px!important}
.stage.v916 .statnote{font-size:18px!important;line-height:1.6}
/* 表格页：竖屏下列宽只有横版的一半，字号必须补回来 */
.stage.v916 table.cmp th,.stage.v916 table.cmp td{font-size:18px!important;padding:11px 12px!important;
line-height:1.5!important}
.stage.v916 table.cmp th{font-size:17px!important}
/* 案例页 */
.stage.v916 .case .cbody,.stage.v916 .case p,.stage.v916 .case span,
.stage.v916 .case li{font-size:19px!important;line-height:1.62!important}
.stage.v916 .case b,.stage.v916 .case h3{font-size:21px!important}
/* 照片页的说明文字 */
.stage.v916 .phgrid figcaption,.stage.v916 .phcap,
.stage.v916 .phgrid .pht{font-size:18px!important;line-height:1.55!important}
/* 通用兜底：竖版里凡是掉到 17px 以下的正文，一律抬到 18px。
写在最后，只管字号，不动布局。 */
.stage.v916 li,.stage.v916 p,.stage.v916 .d,.stage.v916 .s,
.stage.v916 .sub,.stage.v916 .desc{font-size:max(18px,1em)}
/* ---------- 收紧盒子，把抬字号占掉的高度还回来 ---------- */
.stage.v916 .arch .arow{padding:16px 18px 16px 48px!important}
.stage.v916 .arch{gap:9px!important}
.stage.v916 .plat .pl{padding:14px 18px!important}
.stage.v916 .plat{gap:9px}
.stage.v916 .cols3{gap:10px}
.stage.v916 .cols3 .cbox{padding:15px 17px}
.stage.v916 .creds .crtop{padding:13px 16px}
/* ---------- logo 墙：白底面板按内容收，不要撑满整屏 ---------- */
/* 横版里 .lwall 用 flex:1 撑满，竖屏下这块白底会拉成一个巨大的空白方块，
logo 图缩在中间一小条。改成按图的实际比例收。 */
.stage.v916 .lwall{
flex:0 1 auto!important;align-self:center;width:100%;
max-height:none;padding:20px 20px;margin:auto 0;
display:flex;align-items:center;justify-content:center}
.stage.v916 .lwall img{width:100%;height:auto;max-height:none}
/* ---------- 环形图 orbit：竖屏改单列，中心球缩小挪到顶部 ---------- */
.stage.v916 .orbit{
display:flex!important;flex-direction:column;align-items:stretch;
gap:12px;margin-top:10px}
.stage.v916 .orbit .obsvg{display:none} /* 连线是按三列画的，单列下没有意义 */
.stage.v916 .orbit .obc{
order:-1;width:180px!important;height:180px!important;align-self:center;
padding:0 18px!important;margin-bottom:4px}
.stage.v916 .orbit .obc b{font-size:22px!important}
.stage.v916 .orbit .obc span{font-size:15px!important}
.stage.v916 .orbit .obcol{gap:10px;align-items:stretch!important;text-align:left!important}
.stage.v916 .orbit .obcol.l .obi{flex-direction:row!important}
.stage.v916 .orbit .obi{max-width:none!important;padding:13px 16px!important}
.stage.v916 .orbit .obi b{font-size:20px!important}
.stage.v916 .orbit .obi span{font-size:17.5px!important;line-height:1.5!important}
/* ---------- 分栏页 split：竖屏拆成上下 ---------- */
.stage.v916 .split{display:flex!important;flex-direction:column;gap:14px}
.stage.v916 .split > *{width:auto!important;max-width:none!important}
.stage.v916 .split b,.stage.v916 .split .sph{font-size:21px!important}
.stage.v916 .split span,.stage.v916 .split li{font-size:18.5px!important;line-height:1.6!important}
/* ---------- 图文带 pband：竖屏图在上、字在下 ---------- */
.stage.v916 .pband{display:flex!important;flex-direction:column;gap:14px}
.stage.v916 .pband .pbtxt b,.stage.v916 .pband b{font-size:21px!important}
.stage.v916 .pband .pbtxt span,.stage.v916 .pband span,
.stage.v916 .pband li{font-size:18.5px!important;line-height:1.6!important}
/* ---------- 六层/层级页的标签 ---------- */
.stage.v916 .stk .stag,.stage.v916 .lay .tag,
.stage.v916 .plat .pl em{font-size:17.5px!important;padding:5px 12px!important}
/* ---------- 下面这批是按实际 DOM 逐个对出来的，不是猜的 ---------- */
.stage.v916 .cols3 .cbox .ch{font-size:20.5px!important}
.stage.v916 .cols3 .cbox .cc{font-size:18.5px!important;line-height:1.6!important}
.stage.v916 .psrow b{font-size:20.5px!important}
.stage.v916 .psrow span{font-size:18.5px!important;line-height:1.6!important}
.stage.v916 .kstrip .kc .kl{font-size:18px!important}
.stage.v916 .kstrip .kc .kv{font-size:30px!important}
.stage.v916 .phc figcaption b{font-size:19px!important}
.stage.v916 .phc figcaption span{font-size:17px!important;line-height:1.5!important}
.stage.v916 .pbrow .pbc b{font-size:20px!important}
.stage.v916 .pbrow .pbc span{font-size:18px!important;line-height:1.55!important}
.stage.v916 .pdi .col b{font-size:20.5px!important}
.stage.v916 .pdi .col span{font-size:18px!important;line-height:1.55!important}
.stage.v916 .hexlegend .hl .n{font-size:20px!important}
.stage.v916 .hexlegend .hl .s{font-size:17.5px!important;line-height:1.55!important}
.stage.v916 .dgfig figcaption{font-size:18px!important}
.stage.v916 ul li b{font-size:20px!important}
.stage.v916 .eyeb{font-size:17px!important;padding:7px 14px!important}
/* 页脚：手机上 12.5px 等于 6.8px，抬一档；它是落款不是正文，不用抬太多 */
.stage.v916 .sl-foot,.stage.v916 .sl-foot span{font-size:15px!important}
.stage.v916 .center .lede{font-size:22px!important;line-height:1.65!important}
/* ---------- 第二轮：按 DOM 又对了一遍剩下的 ---------- */
.stage.v916 .spwrap .spright figcaption{font-size:18px!important;line-height:1.5!important}
.stage.v916 .spleft .sprow b{font-size:21px!important}
.stage.v916 .spleft .sprow span{font-size:19px!important;line-height:1.6!important}
/* 注意选择器要写全 .podium：内联样式里那条是
.stage.v916 .podium .pdi .col span{font-size:14.5px!important}，
特异度比 .stage.v916 .pdi .col span 高，写短了压不住 */
.stage.v916 .podium .pdi .col b{font-size:21px!important}
.stage.v916 .podium .pdi .col span{font-size:19px!important;line-height:1.55!important;margin-top:8px!important}
.stage.v916 .podium .pdi .cap{width:56px!important;height:56px!important;font-size:21px!important}
.stage.v916 .pdbase{font-size:18.5px!important}
.stage.v916 .creds .crband .crlab{font-size:18px!important}
.stage.v916 .crg ul li{font-size:18px!important;line-height:1.5!important}
.stage.v916 .orbit .obc span{font-size:17px!important}
.stage.v916 .th .tkw .tsub{font-size:18.5px!important}
.stage.v916 .lgrid .ltile span{font-size:17.5px!important;word-break:break-word}
.stage.v916 .lgrid{gap:7px!important}
.stage.v916 .lgrid .ltile{padding:9px 10px!important;min-width:0}
.stage.v916 .dgrid .dchip span{font-size:18.5px!important}
/* 资质页：内联样式把 3 组证书压成 1 列，17 条竖着排下来要 838px，
字号一抬就溢出。改成 2 列——证书名本来就短，两列完全放得下。 */
.stage.v916 .crgs.n3,.stage.v916 .crgs.n2{grid-template-columns:1fr 1fr!important;gap:8px!important}
.stage.v916 .crg{padding:12px 14px!important}
.stage.v916 .crg h4{font-size:17px!important;margin-bottom:8px!important}
.stage.v916 .crg li{font-size:16.5px!important;line-height:1.4!important;padding-left:12px!important}
.stage.v916 .crg ul{gap:4px!important}
/* 条目特别多的那一页（17 条）再退半档，保证不溢出 */
.stage.v916 .creds:has(.crg li:nth-child(7)) .crg li{font-size:15.5px!important;line-height:1.38!important}
.stage.v916 .creds:has(.crg li:nth-child(7)) .crband{gap:5px!important}
.stage.v916 .creds:has(.crg li:nth-child(7)) .crtop{padding:8px 12px!important}
/* 资质页内容最多（335 字、17 条），字号抬上去之后要靠收紧盒子把高度还回来 */
.stage.v916 .creds{gap:7px!important}
.stage.v916 .creds .crband{gap:6px!important}
.stage.v916 .creds .crtop{padding:9px 13px!important}
.stage.v916 .creds .crtop b{font-size:19px!important}
.stage.v916 .creds .crtop span{font-size:17px!important;line-height:1.45!important}
.stage.v916 .creds .crband .crlab{font-size:17px!important}
.stage.v916 .crg{gap:5px!important}
.stage.v916 .crg ul{gap:3px!important}
.stage.v916 .crg ul li{padding:3px 0!important}
/* ---------- 导出弹窗里的三种导出方式 ---------- */
.expways{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:4px}
.expway{display:flex;flex-direction:column;gap:5px;text-align:left;padding:14px 16px;
border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;
transition:border-color .15s,background .15s,transform .15s}
.expway:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-2px)}
.expway:disabled{opacity:.55;cursor:not-allowed;transform:none}
.expway b{font-size:14px;font-weight:600;color:var(--ink)}
.expway span{font-size:12px;color:var(--ink-3);line-height:1.6}
@media(max-width:820px){ .expways{grid-template-columns:1fr} }
/* ================================================================
ReadyFiles · 卡片墙
把原来一条条等宽的列表行换成网格卡片：封面按格式画出来，
操作收进右下角的「⋯」，只留「下载」常驻。
标签分「使用场合 / 资料类型」两行，不再 16 个平铺在一起。
================================================================ */
.fwrap{max-width:1240px;margin:0 auto;padding:22px 22px 80px}
/* ---- 标签两组 ---- */
.ftags{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.ftrow{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.ftl{flex:none;width:56px;font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.ftag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
border:1px solid transparent;background:var(--surface-2);color:var(--ink-2);font-size:12.5px;
font-weight:500;cursor:pointer;transition:background .14s,color .14s,box-shadow .14s}
.ftag:hover{background:var(--accent-soft);color:var(--accent)}
.ftag.on{background:var(--accent);color:var(--on-accent);
box-shadow:0 2px 10px -3px color-mix(in srgb,var(--accent) 60%,transparent)}
.ftag i{font-style:normal;font-size:11px;opacity:.62;font-family:var(--mono)}
.ftag.all{background:var(--surface);border-color:var(--line-strong);font-weight:600}
.ftag.all.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* ---- 待替换提示条 ---- */
.demobar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--warm-soft);
border-radius:var(--r-pill);padding:8px 10px 8px 16px;font-size:12.5px;color:var(--warm-ink);
line-height:1.6;margin-bottom:18px}
.demobar b{font-weight:700;margin-right:1px}
.demobar .btn{margin-left:auto;flex:none;padding:5px 12px;font-size:12.5px}
/* ---- 卡片墙 ---- */
.flist{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:20px}
/* 卡片同时挂着老的 .frow（测试和事件委托还在用），而老规则里有
display:grid / align-items:center / padding / gap，不显式盖掉的话
align-items:center 会让封面在交叉轴上按内容收缩，宽度直接变 0。 */
.fcard{position:relative;display:flex!important;flex-direction:column;align-items:stretch!important;
justify-content:flex-start;gap:0!important;padding:0!important;
grid-template-columns:none!important;
background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
box-shadow:0 1px 2px rgba(24,38,72,.04);
transition:transform .18s cubic-bezier(.22,.8,.28,1),box-shadow .18s,border-color .18s}
/* 注意别给带左右 margin 的 .ffoot 设 width:100%，两者相加会把按钮挤出卡片；
上面的 align-items:stretch 已经保证它们撑满宽度了 */
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
/* 封面：按格式生成，不需要真图 */
.fcover{position:relative;aspect-ratio:16/10;overflow:hidden;
background:
radial-gradient(122% 120% at 80% 6%, color-mix(in srgb,var(--fc) 24%,transparent), transparent 64%),
linear-gradient(158deg, color-mix(in srgb,var(--fc) 12%,var(--surface)) 0%, var(--surface-2) 72%)}
.fcover .fgrain{position:absolute;inset:0;opacity:.5;
background-image:linear-gradient(color-mix(in srgb,var(--fc) 12%,transparent) 1px,transparent 1px);
background-size:100% 13px}
/* 从底部探头的一页纸 */
.fpage{position:absolute;left:50%;bottom:-16%;width:44%;aspect-ratio:3/4;
transform:translateX(-50%) rotate(-4deg);background:var(--surface);
border-radius:7px 7px 3px 3px;padding:12px 11px 0;display:flex;flex-direction:column;gap:5px;
box-shadow:0 12px 28px -12px rgba(16,26,56,.46), 0 0 0 1px var(--line);
transition:transform .22s cubic-bezier(.22,.8,.28,1)}
.fcard:hover .fpage{transform:translateX(-50%) rotate(-4deg) translateY(-7px)}
.fpage i{display:block;height:3px;border-radius:2px;background:color-mix(in srgb,var(--fc) 26%,var(--line))}
.fpage i:nth-child(1){width:66%;height:5px;border-radius:3px;background:color-mix(in srgb,var(--fc) 78%,transparent)}
.fpage i:nth-child(2){width:100%}
.fpage i:nth-child(3){width:86%}
.fpage i:nth-child(4){width:95%}
.fpage i:nth-child(5){width:74%}
/* 视频 */
.fplay{position:absolute;inset:0;display:grid;place-items:center}
.fplay span{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.94);
display:grid;place-items:center;box-shadow:0 10px 24px -9px rgba(10,18,40,.6);
transition:transform .2s cubic-bezier(.22,.8,.28,1)}
.fcard:hover .fplay span{transform:scale(1.09)}
.fplay span::after{content:"";width:0;height:0;margin-left:4px;border-left:14px solid var(--fc);
border-top:9px solid transparent;border-bottom:9px solid transparent}
/* 真图 */
.fthumb{position:absolute;inset:0;background-size:cover;background-position:center;
transition:transform .3s cubic-bezier(.22,.8,.28,1)}
.fcard:hover .fthumb{transform:scale(1.05)}
/* 角标 */
.fbadge{position:absolute;left:12px;top:12px;z-index:2;font-family:var(--mono);font-size:10.5px;
font-weight:700;letter-spacing:.06em;color:#fff;background:var(--fc);padding:3px 9px;
border-radius:var(--r-pill);box-shadow:0 3px 10px -3px color-mix(in srgb,var(--fc) 72%,transparent)}
.fpend{position:absolute;right:12px;top:12px;z-index:2;font-size:10.5px;font-weight:600;
color:var(--warm-ink);background:var(--warm-soft);padding:3px 9px;border-radius:var(--r-pill);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warm) 30%,transparent)}
.fmenu{position:absolute;right:0;bottom:38px;z-index:6;min-width:124px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:5px;
display:flex;flex-direction:column;gap:1px}
.fmenu button{text-align:left;padding:8px 11px;border-radius:var(--r-sm);font-size:13px;
color:var(--ink-2);border:none;background:none;cursor:pointer}
.fmenu button:hover{background:var(--surface-2);color:var(--ink)}
.fmenu button.del:hover{background:var(--crit-soft);color:var(--crit)}
/* 卡片正文 */
.fbody{padding:13px 15px 0;display:flex;flex-direction:column;gap:5px;flex:1}
.fname{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45}
.fdesc{font-size:12.5px;color:var(--ink-2);line-height:1.6;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fmeta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:3px}
.fchip{padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-2);
color:var(--ink-3);font-size:11px;font-weight:500;white-space:nowrap}
.fchip.scn{background:var(--accent-soft);color:var(--accent-ink)}
.fchip.demo{background:var(--warm-soft);color:var(--warm-ink)}
.fdot{display:none}
.ffoot{display:flex;align-items:center;gap:9px;margin:11px 15px 13px;padding-top:11px;
border-top:1px solid var(--line)}
.fstat{font-family:var(--mono);font-size:11px;color:var(--ink-3);min-width:0;flex:1;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ffoot .btn{flex:none;padding:6px 13px;font-size:12.5px}
/* 底栏操作区：图标按钮 + 下载，和站内其余按钮同一套语言 */
.fops{position:relative;flex:none;margin-left:auto;display:flex;align-items:center;gap:3px}
.fic{flex:none;width:30px;height:30px;padding:0;border-radius:var(--r-sm);
display:inline-grid;place-items:center;cursor:pointer;
background:transparent;color:var(--ink-3);border:1px solid transparent;
transition:background .15s,color .15s,border-color .15s}
.fic svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fic svg.dots circle{fill:currentColor;stroke:none}
.fic:hover{background:var(--surface-2);color:var(--accent-ink);border-color:var(--line)}
.fic.on{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)}
.fic:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fic.off{color:var(--line-strong)}
.fic.off:hover{background:transparent;border-color:transparent;color:var(--ink-3)}
.fops .btn{margin-left:4px}
.ffmt{display:none}
/* 生成工具：后台下架了、只有管理员还看得见的那张卡 */
.gcard.gdraft{opacity:.6;border-style:dashed}
/* ---------- 首页的小视频横条 ---------- */
.hvid{margin-top:20px}
.hvrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:11px}
.hvcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s}
.hvcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.hvcard .vstage{aspect-ratio:16/9}
.hvops{display:flex;gap:6px;padding:0 10px 11px}
.hvop{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:5px 8px;
border:1px solid var(--line);border-radius:var(--r-sm,6px);background:var(--ground);color:var(--ink-2);
font-size:12.5px;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.hvop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hvop:first-child svg{fill:currentColor;stroke:none}
.hvop:hover:not([disabled]){border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.hvop[disabled]{opacity:.45;cursor:not-allowed}
.hvname{padding:9px 12px 8px;font-size:13px;font-weight:600;color:var(--ink);line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:820px){ .hvrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} }
/* ---------- 小视频 ---------- */
.vidhd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.vidbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px;margin-top:16px}
.vcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
transition:box-shadow .2s,transform .2s,border-color .2s}
.vcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--line-strong)}
.vstage{position:relative;aspect-ratio:16/9;background:#0B1020;overflow:hidden}
.vplay{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;border:0}
/* 封面：整块就是播放按钮，手机上一指头点得到 */
.vposter{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
background-color:#0B1020;background-size:cover;background-position:center;
display:grid;place-items:center}
.vposter[disabled]{cursor:not-allowed;opacity:.72}
.vgrain{position:absolute;inset:0;
background:radial-gradient(120% 90% at 22% 12%, rgba(120,150,255,.28), transparent 62%),
linear-gradient(140deg,#101a3a 0%,#18265c 58%,#0C1330 100%)}
.vbtn{position:relative;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.94);
display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(6,12,30,.75);
transition:transform .2s cubic-bezier(.22,.8,.28,1)}
.vposter:hover .vbtn{transform:scale(1.08)}
.vbtn::after{content:"";width:0;height:0;margin-left:5px;border-left:17px solid var(--accent);
border-top:11px solid transparent;border-bottom:11px solid transparent}
.vsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vdur{position:absolute;right:9px;bottom:9px;font-family:var(--mono);font-size:11px;color:#fff;
background:rgba(8,14,30,.72);padding:2px 7px;border-radius:var(--r-pill)}
.vcard .fpend{left:12px;right:auto;top:12px}
.vbody{padding:13px 15px 0;display:flex;flex-direction:column;gap:5px;flex:1}
.vname{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45}
.vdesc{font-size:12.5px;color:var(--ink-2);line-height:1.6;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard .ffoot{margin:11px 15px 13px}
.vcard.demo{border-style:dashed;box-shadow:none}
@media(max-width:820px){
.vidgrid{grid-template-columns:1fr;gap:14px}
.vbody{padding:11px 12px 0}
.vcard .ffoot{margin:9px 12px 11px}
.vbtn{width:48px;height:48px}
.vbtn::after{border-left-width:15px;border-top-width:10px;border-bottom-width:10px}
}
/* 待替换的卡片压一档 */
.fcard.demo{border-style:dashed;box-shadow:none}
.fcard.demo:hover{box-shadow:var(--shadow)}
.fcard.demo .fcover{opacity:.72}
.fempty{grid-column:1/-1;padding:60px 24px;text-align:center;background:var(--surface);
border:1px dashed var(--line-strong);border-radius:var(--r-lg);
display:flex;flex-direction:column;align-items:center;gap:9px}
.fempty b{font-size:15.5px;color:var(--ink)}
.fempty span{font-size:13px;color:var(--ink-2);max-width:400px;line-height:1.7}
.fempty .btn{margin-top:8px}
@media(max-width:820px){
.fwrap{padding:14px 13px 96px}
.ftags{gap:8px;margin-bottom:14px}
.ftrow{gap:6px}
.ftl{width:100%;margin-bottom:-2px}
.flist{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:13px}
.fbody{padding:11px 12px 0}
.fname{font-size:13.5px}
.fdesc{font-size:12px}
.ffoot{margin:9px 12px 11px;padding-top:9px;flex-wrap:wrap;gap:6px}
.fstat{flex:1 0 100%;order:-1}
.fic{width:32px;height:32px}
}
/* ---------- 个人中心的身份卡（只读） ---------- */
.mecard{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r-md);
background:var(--surface-2);border:1px solid var(--line)}
.mecard .meav2{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:var(--on-accent);
font-style:normal;font-size:15px;font-weight:700}
.mecard .meinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mecard .meinfo b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.mecard .meinfo span{font-size:11.5px;color:var(--ink-3);font-family:var(--mono);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mecard .metag{flex:none;font-style:normal;font-size:11px;font-weight:600;padding:3px 9px;
border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2)}
.mecard .metag.r-root{background:var(--crit-soft);color:var(--crit)}
.mecard .metag.r-admin{background:var(--accent-soft);color:var(--accent-ink)}
.rolenow{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-2);
line-height:1.6;padding:2px 2px 0}
.rolenow i{font-style:normal;font-size:11px;color:var(--ink-3);line-height:1.55}
/* ---------- 用户面板：删除按钮与管理后台入口 ---------- */
.usops .usdel{color:var(--crit)}
.usops .usdel:hover{background:var(--crit-soft);border-color:var(--crit);color:var(--crit)}
.usnote .usmore{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--accent)}
.usnote i{display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:var(--ink-3)}
.usnote code{font-family:var(--mono);font-size:11.5px;background:var(--surface-2);
padding:1px 5px;border-radius:4px}
/* ======================================================================
移动端修正（v61）
起因：390 宽下顶栏四个标签放不下，XGO 被头像盖掉，只能横向拖才看得到；
ReadyFiles 的标签区把第一屏占满；两列卡片窄到文字被截断。
ui.css 最后加载，这一层放在文件末尾，压住 base.css 里的同名规则。
====================================================================== */
@media(max-width:820px){
/* ---- 顶栏：四个标签等分一屏，不横向滚 ---- */
.topbar{gap:2px}
.viewseg{flex:1 1 auto!important;min-width:0!important;overflow:visible!important;gap:0}
/* 按内容宽度排，不等分：XGO 短，把富余让给 ReadyFiles，四个才都能完整显示 */
.viewseg{justify-content:center}
.viewseg button{flex:0 1 auto!important;min-width:0;padding:0 5px!important;
font-size:12.5px!important;text-align:center;white-space:nowrap}
.viewseg button::after{left:2px;right:2px}
/* 头像收成一个圆：名字和角色在个人中心里已经写得很清楚，顶栏不必重复，
省下的 40px 正好够四个标签排开 */
.topbar .mechip{padding:0;border:none;background:none;gap:0}
.topbar .mechip > span{display:none}
.topbar .mechip > i{width:34px;height:34px;font-size:14px}
/* ---- 二级工具条：横向滚动的要给出可滚提示，别让人以为按钮丢了 ---- */
.subbar .tb-actions{position:relative;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.subbar .tb-actions.atend{-webkit-mask-image:none;mask-image:none}
/* ---- 触控目标：低于 32px 的一律抬到 32 ---- */
.ftag,.chip{min-height:34px}
.pseg button,.bseg button{min-height:34px}
.citem .ops button{min-width:32px;min-height:32px}
.rail .railops .btn{min-height:34px}
}
/* ---- 窄屏：卡片墙改单列，两列会把名称和「下载」都截断 ---- */
@media(max-width:460px){
.flist{grid-template-columns:1fr!important;gap:14px}
.fcover{aspect-ratio:16/9;max-height:172px}
/* 560 以下已经改成左图右文的横条，这里的高度上限会把封面压扁，撤掉 */
@media(max-width:560px){ .fcover{aspect-ratio:auto;max-height:none} }
.fname{font-size:15px!important}
.fdesc{font-size:12.5px!important;-webkit-line-clamp:2}
.ffoot .fstat{font-size:11.5px}
}
/* ---- 标签区：窄屏默认只留一行，其余收进「更多」 ---- */
@media(max-width:820px){
/* 折叠时每组只留一行，横向可滑；点「更多筛选」才换行铺开。
不要用 max-height 截——标签有 34px 的触控高度，截出来是半个按钮 */
/* min-width:0 不能省：.ftrow 是 flex 子项，默认 min-width:auto 会被里面
不换行的标签撑开，overflow 根本不生效，整页跟着横向变宽 */
.ftags{min-width:0}
.ftags.fold .ftrow{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
min-width:0;width:100%;max-width:100%;box-sizing:border-box;
scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.ftags.fold .ftrow::-webkit-scrollbar{display:none}
.ftags.fold .ftrow > *{flex:none}
/* 移动端块里 .ftl 是 width:100% 独占一行的；折叠成单行时必须改回行内宽度，
否则它会把后面所有标签挤出可视区（看起来就是标签全没了） */
.ftags.fold .ftl{width:auto!important;flex:none;margin-bottom:0;
position:sticky;left:0;z-index:1;background:var(--bg);padding-right:6px}
.ftags .fmoretag{align-self:flex-start;margin-top:-2px;padding:6px 12px;min-height:32px;
font-size:12.5px;font-weight:600;color:var(--accent);background:none;border:none;
border-radius:var(--r-pill);cursor:pointer}
.ftags .fmoretag:hover{background:var(--accent-soft)}
}
.ftags .fmoretag{display:none}
@media(max-width:820px){ .ftags .fmoretag{display:inline-flex;align-items:center;gap:4px} }
/* 更窄的机型（iPhone SE 一档）再降一档字号，保证四个标签都不被省略号截断 */
@media(max-width:380px){
.viewseg button{padding:0 3px!important;font-size:11.8px!important}
.topbar .brand .mk{font-size:15px}
}
/* 待替换提示条：窄屏上它变高，胶囊圆角会显得像个气泡。按卡片圆角走，
按钮也换行到自己一行，别贴在右下角 */
@media(max-width:560px){
.demobar{border-radius:var(--r-lg);flex-wrap:wrap;row-gap:10px;padding:13px 14px}
.demobar .btn{margin-left:0;width:100%}
}
/* OnePage 侧栏在窄屏是当抽屉用的，里面这两处点击目标低于 32px：
正面/反面切换 29px 高、配色圆点 26px。手指点不准。 */
@media(max-width:820px){
#viewPaper .sideseg button{min-height:36px;font-size:13px}
#viewPaper .swatches{gap:10px}
#viewPaper .sw2{width:34px;height:34px}
#viewPaper .bgbtn .sw{height:58px}
#viewPaper .mod{min-height:44px}
}
/* 左栏快捷选页里的「全选本类」只有 18px 高，抽屉在手机上就是靠手指点的 */
@media(max-width:820px){
.rail .fgroup .gsel,.rail .railops .btn,.rail .opt{min-height:36px}
.rail .fgroup h4 button,.rail .fgroup .gsel{padding:8px 10px;font-size:12.5px}
}
/* 横竖版切换在手机上只剩一个 ⇄ 图标，31px 宽偏窄 */
@media(max-width:820px){ #btnLayout{min-width:38px;padding:6px 9px} }
/* 「XGO」只有三个字母，按内容排就 31px 宽，手指点不准。给一个最小宽度 */
@media(max-width:820px){ .viewseg button{min-width:44px} }
/* ======================================================================
竖版 9:16 —— 专属视觉语言（v61）
用途：手机上翻着看、发给客户。所以一切按 390px 屏上的实际观感定：
舞台 720 宽，在 390 的手机上缩放系数 0.542，下面所有尺寸都按这个换算过。
竖版 44px 标题 → 手机上 24px
竖版 34px 副题 → 手机上 18px
竖版 22px 正文 → 手机上 12px（可读下限）
横版那一套不受影响：这一层全部挂在 .stage.v916 下。
====================================================================== */
/* ---- 页面骨架：上中下三段，中间那段吃掉所有剩余高度 ---- */
.stage.v916{padding:88px 54px 92px}
/* 顶部条：deck 名 + 页型，和右上角 logo 一条水平线 */
.stage.v916 .vtop{position:absolute;left:54px;top:30px;display:flex;align-items:center;gap:10px;
font-size:14px;letter-spacing:.04em;line-height:1;z-index:3}
.stage.v916 .vtop .vt-deck{color:var(--s-ink);opacity:.72;font-weight:500}
.stage.v916 .vtop .vt-type{color:var(--s-acc);font-weight:600;
padding:4px 10px;border-radius:999px;
background:color-mix(in srgb,var(--s-acc) 13%,transparent);
border:1px solid color-mix(in srgb,var(--s-acc) 26%,transparent)}
/* 底部：一条细进度 + 来源码 + 页码 */
.stage.v916 .vbot{position:absolute;left:54px;right:54px;bottom:30px;z-index:3}
.stage.v916 .vprog{height:3px;border-radius:2px;overflow:hidden;
background:color-mix(in srgb,var(--s-ink) 14%,transparent)}
.stage.v916 .vprog i{display:block;height:100%;border-radius:2px;
background:linear-gradient(90deg,var(--s-acc),color-mix(in srgb,var(--s-acc) 45%,transparent))}
.stage.v916 .vfoot{display:flex;justify-content:space-between;align-items:baseline;
margin-top:11px;font-family:var(--mono);font-size:15px;letter-spacing:.03em;
color:var(--s-dim);opacity:.85}
.stage.v916 .vpage{font-size:15px}
.stage.v916 .vpage b{font-size:20px;font-weight:600;color:var(--s-ink)}
/* 旧的 .sl-foot 和新的页脚会打架，竖版统一用新的 */
.stage.v916 > .sl-foot{display:none}
/* logo 挪到左上，和顶部条分列两端 */
.stage.v916 .sl-brand{top:26px;right:54px;left:auto}
/* ---- 标题：左对齐、更大、按词组断行 ---- */
.stage.v916 h2,
.stage.v916 .tbar h2{font-size:44px!important;line-height:1.28;letter-spacing:-.005em;
text-align:left;align-self:flex-start;margin:0 0 4px;max-width:100%;white-space:normal}
.stage.v916 .tbar.t-lg h2{font-size:40px!important}
.stage.v916 .tbar.t-xl h2{font-size:36px!important}
.stage.v916 .tbar{margin:0 0 18px;align-self:stretch;display:block}
.stage.v916 .tbar .tb{display:none} /* 居中标题两侧的横线，左对齐后没用了 */
/* 词组盒子：浏览器只能在盒与盒之间断行，孤字行就没了 */
.stage.v916 .vw{display:inline-block}
/* 没有标点可切的标题（「备件提前放在离客户最近的地方」这种），
靠 balance 把几行拉成等长，末行才不会只剩一个字 */
.stage.v916 h1,.stage.v916 h2,.stage.v916 .big,
.stage.v916 .ktxt h2,.stage.v916 .phtxt h2{text-wrap:balance}
/* 标题下方的短线，换成竖版自己的重点色块 */
.stage.v916 .eyeb{align-self:flex-start;font-size:15px;padding:6px 13px;margin:0 0 14px;letter-spacing:.16em}
.stage.v916 .lede{font-size:23px;line-height:1.62;text-align:left;margin-top:14px;max-width:100%}
/* 标题下的重点色短线。由 vwrapTitles() 插入为真实元素 .vrule，
页面本来就有 .h2rule 的不重复插。 */
.stage.v916 .vrule,.stage.v916 .h2rule{display:block;width:56px;height:4px;flex:none;
border-radius:2px;margin:16px 0 22px;align-self:flex-start;
background:linear-gradient(90deg,var(--s-acc),var(--s-acc2))}
.stage.v916 .center .vrule,.stage.v916 .center .h2rule{margin-left:auto;margin-right:auto;align-self:center}
/* 满版照片页自己有排版节奏，不插这条线 */
.stage.v916.kpiph .vrule,.stage.v916.ph-full .vrule{display:none}
/* 标题下只留一条线。极简风格的标题栏自己就画了一条（.tbar::after），
竖版再加 .vrule / .h2rule 就成了两条；原版页眉自带 .jhdln 同理。
保留和横版一样的那条，横竖版看起来才是同一套。 */
.stage.v916.st-plain .vrule,.stage.v916.st-plain .h2rule{display:none}
.stage.v916 .jhd .vrule{display:none}
/* ---- 封面 / 结尾页：这两类保持居中，竖屏上更像一张海报 ---- */
.stage.v916 .center{flex:1;justify-content:center;align-items:center;text-align:center;
padding-bottom:20px}
.stage.v916 .center h1{font-size:62px;line-height:1.24;text-align:center}
.stage.v916 .center h2{text-align:center!important;align-self:center!important;font-size:46px!important}
.stage.v916 .center .eyeb{align-self:center}
.stage.v916 .center .lede{text-align:center;font-size:24px;margin-top:22px}
.stage.v916 .center .rule{width:72px;height:4px;margin:26px auto}
.stage.v916 .center .big{font-size:50px;line-height:1.32;text-align:center}
.stage.v916 .center .thanks{font-size:92px}
/* ---- 内容区统一吃满剩余高度 ---- */
.stage.v916 .arch,.stage.v916 .plat,.stage.v916 .stk,
.stage.v916 .cols3,.stage.v916 .tl,.stage.v916 .podium,
.stage.v916 .stats,.stage.v916 .cmpwrap,.stage.v916 .spwrap{flex:1;min-height:0}
/* ---- 满版照片页（kpiphoto / photo）：竖屏里照片吃上半屏，文字压在下半屏 ---- */
.stage.v916.kpiph,.stage.v916.ph-full{padding:0;justify-content:flex-end}
.stage.v916.kpiph .vtop,.stage.v916.ph-full .vtop{left:44px;top:28px}
.stage.v916.kpiph .vbot,.stage.v916.ph-full .vbot{left:44px;right:44px;bottom:24px}
.stage.v916.kpiph .vfoot,.stage.v916.ph-full .vfoot{color:rgba(219,231,252,.72)}
.stage.v916.kpiph .vpage b,.stage.v916.ph-full .vpage b{color:#fff}
.stage.v916.kpiph .vprog,.stage.v916.ph-full .vprog{background:rgba(255,255,255,.22)}
.stage.v916.kpiph .vprog i,.stage.v916.ph-full .vprog i{background:#fff}
.stage.v916.kpiph .vt-deck,.stage.v916.ph-full .vt-deck{color:rgba(232,240,255,.8)}
.stage.v916.kpiph .vt-type,.stage.v916.ph-full .vt-type{color:#fff;
background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34)}
/* 竖屏上遮罩要更高：文字区从画面中段就开始压深，否则白字压在亮处读不清 */
.stage.v916.kpiph .kscrim,.stage.v916.ph-full .phscrim{
background:linear-gradient(180deg,rgba(6,14,32,.42) 0%,rgba(6,14,32,.12) 26%,
rgba(6,14,32,.60) 52%,rgba(6,14,32,.90) 78%,rgba(6,14,32,.96) 100%)}
.stage.v916.kpiph .ktxt{padding:0 44px 84px;position:relative;z-index:2}
.stage.v916.kpiph .ktxt h2{font-size:46px!important;line-height:1.24;margin:0 0 10px;text-align:left}
.stage.v916.kpiph .ktxt h2::after{display:none}
.stage.v916.kpiph .ktxt .klede{font-size:22px;line-height:1.6;margin-bottom:24px}
.stage.v916.kpiph .ktxt .eyeb{margin-bottom:16px}
/* 指标卡：竖屏一律单列铺满，横排三个在 720 宽里每个只剩 200px，数字都放不下 */
.stage.v916.kpiph .kstrip,
.stage.v916.kpiph .kstrip.n2,.stage.v916.kpiph .kstrip.n3,
.stage.v916.kpiph .kstrip.n4{grid-template-columns:1fr!important;gap:12px}
.stage.v916.kpiph .kc{display:flex;align-items:baseline;gap:16px;padding:16px 20px;border-radius:14px}
.stage.v916.kpiph .kc .kv{font-size:42px;flex:none;min-width:148px}
.stage.v916.kpiph .kc .kv small{font-size:17px}
.stage.v916.kpiph .kc .kl{margin-top:0;font-size:17px;line-height:1.45}
.stage.v916.kpiph .kfoot{left:44px;bottom:74px}
.stage.v916.ph-full .phtxt{padding:0 44px 86px;max-width:100%}
.stage.v916.ph-full .phtxt h2{font-size:46px!important;line-height:1.24;text-align:left}
.stage.v916.ph-full .phtxt h2::after{display:none}
.stage.v916.ph-full .phtxt .lede{font-size:22px;line-height:1.6;max-width:100%}
/* ---- 导出弹窗：三件事，一件一张卡 ---- */
.expways{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.expmsg{margin-top:12px;font-size:12.5px;color:var(--ink-3);min-height:18px;line-height:1.6}
/* 全屏预览的退出按钮 */
.fsquit{position:fixed;top:16px;right:18px;z-index:121;background:rgba(12,16,24,.82);
color:#E6EDF8;border:1px solid rgba(255,255,255,.22);border-radius:8px;
padding:9px 15px;font-size:13.5px;font-weight:600;cursor:pointer;min-height:40px}
.fsquit:hover{background:rgba(24,32,48,.92);border-color:rgba(255,255,255,.4)}
@media(max-width:700px){
.expways{grid-template-columns:1fr;gap:10px}
.fsquit{top:12px;right:12px}
}
/* ---- 生成分享链接：把结果摆出来，别只弹一句「已复制」 ---- */
.slout{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.slout label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.slout textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink);background:var(--surface-2);
resize:vertical;word-break:break-all}
.slops{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px}
.slops .slmsg{font-size:12.5px;color:var(--ink-3)}
.slhint{margin-top:9px;font-size:12px;color:var(--ink-3);line-height:1.6}
.notebar.warn{border-color:var(--warn-line,#E5B567);background:var(--warn-soft,#FDF6E7)}
.notebar .slfix{margin-top:9px;display:inline-flex}
@media(max-width:560px){
.slops{gap:8px}
.slops .btn{flex:1 1 auto;min-width:120px}
.slops .slmsg{flex:1 1 100%}
}
/* ---- 左栏抽屉：手机上要有明确的关闭入口 ---- */
.railx{display:none}
@media(max-width:820px){
.railhead h4{align-items:center}
.railx{display:inline-flex;align-items:center;justify-content:center;min-height:32px;
padding:5px 12px;margin-left:auto;border:1px solid var(--line);border-radius:var(--r-pill);
background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.railx:hover{border-color:var(--accent-line);color:var(--accent)}
/* 复选框本身只有 13px，虽然整行 label 都可点，但看着像点不中 */
.rail .opt input[type=checkbox]{width:19px;height:19px;flex:none}
.rail .opt{gap:10px}
}
/* ---- 剩下这几处触控目标：弹窗里的原生控件和放映视图的翻页条 ---- */
@media(max-width:820px){
/* 表单里的原生 select / input 没有 .btn 类，前面那条规则盖不到 */
.usform select,.usform input,.usform textarea,
.fform select,.fform input,.fform textarea,
.form select,.form input{min-height:42px;font-size:15px} /* 15px：iOS 低于 16 会自动放大页面，这里配合下面的 16px */
.usform textarea,.fform textarea{min-height:88px}
/* iOS Safari 在输入框字号 <16px 时会强行放大整页，放大后就退不回去了 */
.usform input,.fform input,.usform textarea,.fform textarea,
.subbar .search input{font-size:16px}
/* 面板里的文字链接 */
.usnote .usmore{min-height:36px;align-items:center;padding:6px 0}
/* 放映视图底部翻页条：客户翻页全靠这一排，41px 高的手指点 31px 的按钮很别扭 */
.present .pbar button{min-height:42px;padding:9px 14px;font-size:14px}
.present .pbar{gap:8px;padding:9px 10px;flex-wrap:nowrap;justify-content:center}
}
/* 导出弹窗在手机上：预览只是让人确认「导的是这份东西」，不必占半屏。
真正要点的是下面三张卡，让它们尽量出现在第一屏。 */
@media(max-width:560px){
#dkFrame{pointer-events:none} /* 手机上这么小的预览点不动，别让人白点 */
.previewbox:not(:has(.stage.v916)){aspect-ratio:16/8!important}
.expways{margin-top:14px}
.expway{padding:13px 14px}
.slout textarea{min-height:96px}
}
/* 资质页里最密的那一张（两项体系 + 十三项认证，17 条）在竖版会压到页脚。
竖版把标题抬到了 44px，密集页要把这部分还回去。 */
.stage.v916 .creds:has(.crg li:nth-child(7)){gap:7px;margin-top:0}
.stage.v916:has(.creds .crg li:nth-child(7)){padding-bottom:98px}
.stage.v916:has(.creds .crg li:nth-child(7)) h2{font-size:36px!important;line-height:1.26}
.stage.v916:has(.creds .crg li:nth-child(7)) .vrule{margin:12px 0 14px}
.stage.v916 .creds:has(.crg li:nth-child(7)) .crtop b{font-size:18px!important}
.stage.v916 .creds:has(.crg li:nth-child(7)) .crtop span{font-size:15px!important}
.stage.v916 .creds:has(.crg li:nth-child(7)) .crg li{font-size:14px!important;line-height:1.34!important}
.stage.v916 .creds:has(.crg li:nth-child(7)) .crfoot{font-size:11.5px;line-height:1.5}
.stage.v916 .creds:has(.crg li:nth-child(7)) .crtop{padding:7px 11px!important}
.stage.v916 .creds:has(.crg li:nth-child(7)) .crband{gap:4px!important}
/* ======================================================================
移动端性能：把按卡片重复出现的 backdrop-filter 换掉
backdrop-filter 每出现一次，浏览器就要单独开一层、把背后的像素读回来做模糊。
.pick 是每张卡片左上角的勾选框，一屏几十个，全都在做这件事。
换成半透明实色 + 一点描边，看上去几乎一样，省下的是显存和合成时间。
====================================================================== */
@media(max-width:820px){
.pick{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
background:rgba(6,10,18,.72)}
.card.sel .pick{background:var(--accent)}
/* 满版照片页里的玻璃卡同理：竖屏一次能看到三四个，不值当 */
.stage.kpiph .kc{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
background:rgba(255,255,255,.16)}
}
/* ======================================================================
首页门户
参考现代仪表盘：浅灰底 + 纯白大圆角卡片 + 一张彩色主卡承载主数字。
插画和图标全部是内联 SVG / CSS，不引外部图。
====================================================================== */
#viewHome{min-height:calc(100vh - 56px);
background:
radial-gradient(900px 420px at 8% -12%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 62%),
radial-gradient(760px 380px at 100% 4%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 58%),
var(--surface-2,#EFF1F6)}
.hwrap{max-width:1240px;margin:0 auto;padding:26px 24px 64px}
/* ---- 顶部：问候 + 一个搜索框，别的什么都不要 ---- */
.htop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
flex-wrap:wrap;margin-bottom:22px}
/* 标识挪到右上角，和问候语分列两端 */
.htop{align-items:flex-start}
.hbrand{display:flex;align-items:center;gap:13px;order:3;flex:0 0 auto;
margin-left:auto;padding-top:4px}
.hbrand img{display:block;width:auto}
.hbrand .hb-xn{height:25px}
.hbrand .hb-zc{height:16px;opacity:.9}
.hbrand .hb-sep{width:1px;height:19px;background:var(--line-strong);flex:none}
.hgreet h1{margin:0 0 6px;font-size:30px;line-height:1.25;font-weight:700;
letter-spacing:-.022em;color:var(--ink)}
.hgreet p{margin:0;font-size:14.5px;color:var(--ink-3)}
.hsearch{display:flex;align-items:center;gap:10px;padding:0 18px;height:46px;
min-width:320px;flex:0 1 380px;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
box-shadow:0 2px 3px rgba(24,38,72,.03)}
.hsearch:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.hsearch svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink-3);
stroke-width:1.9;stroke-linecap:round}
/* 输入框自己要撑满这一条的高度：外框是 46px，但 input 的盒子只有一行文字高（26px），
手指点在框里靠上或靠下的位置就点不进去 */
.hsearch input{flex:1;min-width:0;align-self:stretch;border:none;background:none;outline:none;
font-size:14.5px;color:var(--ink)}
.hsearch input::placeholder{color:var(--ink-3)}
/* ---- 四个模块：一张彩卡 + 三张白卡 ---- */
.hgrid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.85fr);
gap:18px;align-items:stretch}
.hcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hcards.n2{grid-template-columns:repeat(2,1fr)}
.hhero-card,.hcard{display:grid;grid-template-rows:auto auto 1fr auto;gap:13px;text-align:left;
padding:22px 22px 18px;border-radius:20px;cursor:pointer;position:relative;overflow:hidden;
transition:transform .2s cubic-bezier(.22,.8,.28,1),box-shadow .2s,border-color .2s}
.hhero-card:hover,.hcard:hover{transform:translateY(-3px)}
.hhero-card{border:none;color:#fff;
background:linear-gradient(145deg,#4B6BF5 0%,#3352E0 46%,#6B3CF0 100%);
box-shadow:0 26px 44px -26px rgba(45,70,200,.72)}
.hhero-card::after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;
border-radius:50%;background:rgba(255,255,255,.1)}
/* 左下再补一个更淡的光斑，主卡比三张白卡高不少，下半截原来是空的 */
.hhero-card::before{content:"";position:absolute;left:-90px;bottom:-110px;width:280px;height:280px;
border-radius:50%;background:rgba(255,255,255,.07)}
.hcard{background:var(--surface);border:1px solid var(--line);
box-shadow:0 1px 2px rgba(24,38,72,.05)}
.hcard:hover{box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
/* 顶部那道色条平时不显，鼠标移上去才亮——用的是每个模块自己的图标色，
让「这张卡属于哪个模块」这件事不只靠一个小图标 */
.hcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
opacity:0;transition:opacity .2s}
.hcard:hover::before{opacity:1}
.hm-op::before{background:linear-gradient(90deg,#9B7BFF,#6B3CF0)}
.hm-rf::before{background:linear-gradient(90deg,#4ADCA8,#17A97B)}
.hm-xg::before{background:linear-gradient(90deg,#FFB65C,#F08A1E)}
.hc-top{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.hc-top b{flex:none}
.hc-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.hc-ico svg{width:19px;height:19px}
.hhero-card .hc-ico{background:rgba(255,255,255,.2);color:#fff}
.hcard .hc-ico{color:#fff}
.hm-op .hc-ico{background:linear-gradient(135deg,#9B7BFF,#6B3CF0)}
.hm-rf .hc-ico{background:linear-gradient(135deg,#4ADCA8,#17A97B)}
.hm-xg .hc-ico{background:linear-gradient(135deg,#FFB65C,#F08A1E)}
.hc-top b{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.hcard .hc-top b{color:var(--ink)}
.hc-num{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;position:relative;z-index:1}
.hc-num b{font-family:var(--mono);font-weight:600;letter-spacing:-.03em;line-height:1}
.hhero-card .hc-num b{font-size:58px;color:#fff}
.hcard .hc-num b{font-size:36px;color:var(--ink)}
.hc-num i{font-style:normal;font-size:13px}
.hhero-card .hc-num i{color:rgba(255,255,255,.8)}
.hcard .hc-num i{color:var(--ink-3)}
.hc-num u{text-decoration:none;font-size:12px;padding:3px 10px;border-radius:var(--r-pill);
margin-left:4px;background:rgba(255,255,255,.18);color:#fff}
.hc-d{font-size:13px;line-height:1.65;position:relative;z-index:1;align-self:start}
.hhero-card .hc-d{max-width:44ch}
.hhero-card .hc-d{color:rgba(255,255,255,.8)}
.hcard .hc-d{color:var(--ink-2)}
.hc-go{display:flex;flex-wrap:wrap;gap:7px;align-self:end;padding-top:10px;position:relative;z-index:1}
.hc-go i{font-style:normal;font-size:12.5px;padding:7px 12px;border-radius:var(--r-pill);
min-height:32px;display:inline-flex;align-items:center;cursor:pointer}
.hhero-card .hc-go i{background:rgba(255,255,255,.17);color:#fff}
.hhero-card .hc-go i:hover{background:rgba(255,255,255,.3)}
.hcard .hc-go i{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.hcard .hc-go i:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
/* ---- 下面两块面板 ---- */
/* 两块面板按各自内容高度，不互相拉齐——强行等高会在短的那块下面留一大片空 */
.hpanels{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:18px;align-items:start}
.hpanel{background:var(--surface);border:1px solid var(--line);border-radius:20px;
padding:20px 22px 22px;box-shadow:0 1px 2px rgba(24,38,72,.05)}
.hph{display:flex;align-items:baseline;gap:10px;margin-bottom:13px}
.hph2{margin-top:22px}
.hph b{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
display:inline-flex;align-items:center;gap:8px}
.hph b::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--accent);flex:none}
.hph span{font-size:12.5px;color:var(--ink-3)}
.hmore{margin-left:auto;border:none;background:none;font-size:12.5px;color:var(--accent);
font-weight:600;cursor:pointer;min-height:32px;padding:0}
.hchips{display:flex;flex-wrap:wrap;gap:8px}
.hchip{display:inline-flex;align-items:baseline;gap:7px;padding:9px 14px;min-height:36px;
border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface-2);cursor:pointer}
.hchip b{font-size:13px;font-weight:600;color:var(--ink)}
.hchip i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.hchip:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.hchip:hover b{color:var(--accent)}
.hrecent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hrecent li + li{border-top:1px solid var(--line)}
.hrecent button{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
padding:11px 2px;border:none;background:none;cursor:pointer;min-height:44px}
.hrecent button:hover .hr-t{color:var(--accent)}
.hr-t{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.5;
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.hr-m{font-size:11.5px;color:var(--ink-3);display:flex;gap:8px}
.hr-m i{font-style:normal;font-family:var(--mono);opacity:.75}
.hfoot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
font-size:12px;color:var(--ink-3)}
/* ---- 窄屏 ---- */
@media(max-width:1000px){
.hgrid{grid-template-columns:1fr}
.hcards{grid-template-columns:repeat(3,1fr)}
.hcards.n2{grid-template-columns:repeat(2,1fr)}
.hpanels{grid-template-columns:1fr}
}
@media(max-width:820px){
.hwrap{padding:18px 16px 56px}
.htop{gap:14px;margin-bottom:16px}
.hgreet h1{font-size:25px}
.hgreet p{font-size:13.5px}
.hsearch{flex:1 1 100%;min-width:0;height:44px}
.hsearch input{font-size:16px} /* 16px：低于这个 iOS 会强行放大整页且退不回去 */
.hcards{grid-template-columns:1fr;gap:12px}
.hgrid{gap:12px}
.hpanels{gap:12px;margin-top:12px}
.hhero-card,.hcard{padding:18px 18px 15px;border-radius:18px}
.hhero-card .hc-num b{font-size:44px}
.hpanel{padding:17px 17px 19px;border-radius:18px}
}
/* ======================================================================
左侧抽屉导航（手机）
顶栏五个标签在 390 宽的屏上排不开。抽屉里每一项还能带计数和一句说明，
比挤成一排更好用。桌面端整个不显示，顶栏标签照旧。
====================================================================== */
.navburger{display:none}
.navdrawer{display:none}
.navscrim{display:none}
@media(max-width:820px){
/* 顶栏：汉堡 + 品牌，标签整条收进抽屉 */
.navburger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
width:40px;height:40px;flex:none;padding:0 10px;border:none;background:none;cursor:pointer}
.navburger span{display:block;height:2px;border-radius:2px;background:var(--ink-2);
transition:transform .22s cubic-bezier(.22,.8,.28,1),opacity .18s}
body.navon .navburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.navon .navburger span:nth-child(2){opacity:0}
body.navon .navburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.topbar .viewseg{display:none}
.topbar .brand{flex:1 1 auto;min-width:0}
.topbar .brand .mk{border:none;background:none;padding:0;cursor:pointer}
.topbar .brand .mk .mkw{display:inline} /* 标签走了，名字放得下了 */
.topbar .brand .mk{font-size:15px}
.navscrim{display:block;position:fixed;inset:0;z-index:70;
background:rgba(12,20,38,.42);opacity:0;transition:opacity .22s}
body.navon .navscrim{opacity:1}
.navdrawer{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;
z-index:71;width:min(84vw,310px);background:var(--surface);
border-right:1px solid var(--line);box-shadow:0 0 46px -12px rgba(16,26,52,.45);
transform:translateX(-101%);transition:transform .26s cubic-bezier(.22,.8,.28,1);
padding-top:env(safe-area-inset-top)}
body.navon .navdrawer{transform:none}
/* 收起时对键盘和读屏不可见，不然焦点会跑进看不见的抽屉里 */
.navdrawer{visibility:hidden}
body.navon .navdrawer{visibility:visible}
.nd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.nd-mk{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.nd-mk i{font-style:normal;color:var(--accent)}
.nd-x{min-height:36px;padding:6px 13px;border-radius:var(--r-pill);
border:1px solid var(--line);background:var(--surface);font-size:12.5px;
font-weight:600;color:var(--ink-2);cursor:pointer}
.nd-x:hover{border-color:var(--accent-line);color:var(--accent)}
.nd-nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 10px 18px}
.nd-nav button{display:grid;grid-template-columns:1fr auto;align-items:center;
width:100%;gap:2px 10px;text-align:left;padding:13px 14px;margin-bottom:4px;
border:1px solid transparent;border-radius:var(--r-md);background:none;
cursor:pointer;min-height:56px}
.nd-nav button b{grid-column:1;font-size:15px;font-weight:600;color:var(--ink)}
.nd-nav button em{grid-column:1;grid-row:2;font-style:normal;font-size:12.5px;color:var(--ink-3)}
.nd-nav button i{grid-column:2;grid-row:1/3;font-style:normal;font-family:var(--mono);
font-size:12px;color:var(--ink-3)}
.nd-nav button:hover{background:var(--surface-2)}
.nd-nav button.on{background:var(--accent-soft);border-color:var(--accent-line)}
.nd-nav button.on b{color:var(--accent)}
.nd-nav button.on i{color:var(--accent)}
.nd-foot{border-top:1px solid var(--line);padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.nd-me{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
cursor:pointer;min-height:56px;text-align:left}
.nd-me i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,var(--accent),var(--accent-strong));
color:var(--on-accent);font-style:normal;font-size:14px;font-weight:700}
.nd-me span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nd-me b{font-size:14px;font-weight:600;color:var(--ink)}
.nd-me em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
}
/* 首页上二级工具条是收起的，主区不必再留它的高度 */
body.v-home .subbar{display:none}
/* 抽屉里的常用场合 */
@media(max-width:820px){
.nd-sec{padding:14px 14px 8px;margin-top:6px;border-top:1px solid var(--line);
font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
.nd-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px}
.nd-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;
padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line);
background:var(--surface);font-size:13px;color:var(--ink-2);cursor:pointer}
.nd-chip i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.nd-chip:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
}
/* 手机上一屏很贵，开场区收紧 */
@media(max-width:560px){
.hhero{padding:16px 0 20px}
.hhero h1{margin-bottom:10px}
.hhero p{margin-bottom:16px;line-height:1.7}
.heyebrow{margin-bottom:14px;font-size:12px;padding:4px 11px}
.hquick{margin-top:12px}
.hsec{margin-top:30px}
.hsearch .btn{margin-top:6px}
}
/* 桌面端装饰区别被容器裁掉 */
@media(min-width:901px){
.hhero{padding-right:400px}
.hstage{right:-10px;top:8px;width:400px;height:320px;overflow:hidden;border-radius:24px}
}
/* 品牌名在手机上是「回首页」按钮，21px 高点不准 */
@media(max-width:820px){
/* 这里把 .mk 变成了 inline-flex，于是 XN 和 Brand Center
各自成了 flex 项；span 开头那个空格落在行盒起始位置会被吃掉，
手机上就读成「XNBrand Center」。用 gap 把这一个空格补回来。 */
.topbar .brand .mk{min-height:36px;display:inline-flex;align-items:center;padding:0 2px;
gap:.3em}
}
/* ---------- 客户墙：从 logo 库渲染 ---------- */
.stage .lgwall{flex:1;display:grid;gap:14px;align-content:center;min-height:0;padding:4px 0}
.stage .lgwall.c4{grid-template-columns:repeat(4,1fr)}
.stage .lgwall.c5{grid-template-columns:repeat(5,1fr)}
.stage .lgwall.c6{grid-template-columns:repeat(6,1fr)}
.stage .lgwall.c7{grid-template-columns:repeat(7,1fr);gap:11px}
/* 行高按可用高度均分，页面放多少个都不会撑破舞台 */
.stage .lgwall{grid-auto-rows:minmax(0,1fr)}
.stage .lgt{padding:0;border:none;background:none;border-radius:10px;overflow:hidden;
cursor:zoom-in;position:relative;line-height:0;
box-shadow:0 8px 18px -12px rgba(0,0,0,.5);
transition:transform .22s cubic-bezier(.22,.8,.28,1),box-shadow .22s,opacity .22s}
.stage .lgt{display:grid;place-items:center}
.stage .lgt img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.stage .lgwall:hover .lgt{opacity:.45}
.stage .lgwall .lgt:hover{opacity:1;transform:translateY(-4px) scale(1.04);
box-shadow:0 18px 30px -12px rgba(0,0,0,.6);z-index:2}
.stage .lgempty{flex:1;display:grid;place-items:center;color:var(--s-dim);font-size:17px;
text-align:center;padding:0 60px;line-height:1.7}
.stage .sl-foot .lgmore{font-style:normal;margin-left:12px;opacity:.7}
/* 竖版：一行少放几个，logo 太小认不出来 */
.stage.v916 .lgwall.c4,.stage.v916 .lgwall.c5,.stage.v916 .lgwall.c6,
.stage.v916 .lgwall.c7{grid-template-columns:repeat(4,1fr);gap:9px}
/* 放大看 */
.lgbig{display:grid;place-items:center;padding:26px;border-radius:var(--r-lg);
background:var(--surface-2);border:1px solid var(--line)}
.lgbig img{max-width:100%;width:auto;max-height:220px}
/* ---------- 客户 logo 库（XGO → 品牌元素） ---------- */
.lglib .bmeta span{line-height:1.6}
.lgbar{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.lgbar input{flex:0 1 260px;min-width:180px;padding:10px 14px;min-height:40px;
border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);
font-size:14px;color:var(--ink);outline:none}
.lgbar input:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.lgtags{display:flex;flex-wrap:wrap;gap:7px;flex:1 1 auto}
.lghint{font-size:12.5px;color:var(--ink-3);align-self:center}
.lggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.lgcell{position:relative;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);
background:var(--surface);text-align:center}
.lgcell.off{opacity:.42}
.lgcell.noname{border-style:dashed}
.lgimg{background:var(--surface-2);border-radius:var(--r-sm);padding:6px;margin-bottom:9px}
.lgimg img{width:100%;height:auto;display:block;border-radius:4px}
.lgname{font-size:13px;font-weight:600;color:var(--ink);line-height:1.45;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgcell.noname .lgname{color:var(--ink-3);font-weight:400}
.lgsub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.lgedit{margin-top:9px;width:100%;min-height:34px;font-size:12.5px}
.lgnone{padding:34px;text-align:center;color:var(--ink-3);font-size:14px}
.lgpager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;
font-size:12.5px;color:var(--ink-3)}
.lgpager .btn[disabled]{opacity:.4;pointer-events:none}
.lgck{display:flex!important;flex-direction:row!important;align-items:center;gap:9px;
font-size:13.5px;color:var(--ink-2);cursor:pointer}
.lgck input{width:18px;height:18px;flex:none}
@media(max-width:820px){
.lggrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.lgbar input{flex:1 1 100%;font-size:16px}
}
/* ============================================================
公司介绍 2026-09 原版还原版式
jcover / jtoc / jtimeline / jcerts / jorg
============================================================ */
/* ---------- P1 封面 ---------- */
.stage.jcov{padding:0;justify-content:flex-end;position:relative}
.stage.jcov .jcbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stage.jcov .jcscrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,rgba(4,12,38,.78) 0%,rgba(4,12,38,.40) 46%,rgba(4,12,38,0) 72%)}
.stage.jcov .sl-brand{top:44px;left:56px;right:auto;z-index:3}
.stage.jcov .jctxt{position:relative;z-index:2;padding:0 78px 104px}
/* 每句一行，不折行 */
.stage.jcov .jctxt h1{font-size:56px;line-height:1.34;font-weight:800;letter-spacing:.5px;
margin:0;color:#fff;white-space:nowrap;text-shadow:0 4px 24px rgba(0,20,60,.5)}
.stage.jcov .jctxt h1 em{font-style:normal;color:var(--s-acc);text-shadow:0 0 22px rgba(60,200,255,.35)}
.stage.jcov .jcdate{display:inline-block;margin-top:34px;padding:11px 30px;border-radius:999px;
font-size:20px;letter-spacing:2px;color:#EAF4FF;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34);
backdrop-filter:blur(2px)}
.stage.v916.jcov .jctxt{padding:0 44px 130px}
.stage.v916.jcov .jctxt h1{font-size:44px}
/* ---------- P2/P7/P17/P21 目录 ---------- */
.stage.jtoc{justify-content:flex-start;padding:64px 78px 70px}
.stage.jtoc .jthead{position:relative;text-align:center;height:132px;margin-bottom:8px}
.stage.jtoc .jtbig{position:absolute;left:50%;top:-6px;transform:translateX(-50%);
font-size:104px;font-weight:800;letter-spacing:10px;line-height:1;
color:rgba(255,255,255,.10);text-transform:uppercase;white-space:nowrap;pointer-events:none}
.stage.jtoc .jthead h2{position:relative;margin:28px 0 0;font-size:62px;font-weight:800;
letter-spacing:8px;color:#fff}
.stage.jtoc .jtgrid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;min-height:0;
align-content:center;padding:6px 0 10px}
.stage.jtoc .jtc{position:relative;border-radius:14px;padding:34px 20px 30px;text-align:center;
background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
border:1px solid var(--s-cardln);overflow:hidden;
transition:transform .24s cubic-bezier(.22,.8,.28,1),box-shadow .24s}
.stage.jtoc .jtc::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;
background:linear-gradient(180deg,transparent,var(--s-acc),transparent);opacity:.55}
.stage.jtoc .jtc.on{border-color:color-mix(in srgb,var(--s-acc) 52%,transparent);
background:linear-gradient(180deg,rgba(90,190,255,.16),rgba(255,255,255,.03));
box-shadow:0 18px 40px -22px rgba(0,120,255,.75)}
.stage.jtoc .jtn{font-size:52px;font-weight:800;line-height:1;color:rgba(255,255,255,.62)}
.stage.jtoc .jtc.on .jtn{color:var(--s-acc)}
.stage.jtoc .jtt{margin-top:18px;font-size:27px;font-weight:700;letter-spacing:3px;color:#fff}
.stage.jtoc .jte{margin-top:8px;font-size:11.5px;letter-spacing:1.6px;color:var(--s-dim)}
.stage.jtoc .jtr{display:block;width:34px;height:2px;margin:22px auto 0;background:rgba(255,255,255,.55)}
.stage.v916 .jtoc .jtgrid,.stage.v916.jtoc .jtgrid{grid-template-columns:repeat(2,1fr);gap:20px}
.stage.v916.jtoc .jtbig{font-size:64px}
.stage.v916.jtoc .jthead h2{font-size:52px}
/* ---------- P3 发展历程 ---------- */
.stage.jtl{padding:46px 44px 34px;justify-content:flex-start;position:relative}
.stage.jtl .jtlhd{position:relative;z-index:3}
.stage.jtl .jtlhd h2{margin:0;font-size:34px;font-weight:800;letter-spacing:1px;color:#fff;
display:flex;align-items:baseline;gap:6px}
.stage.jtl .jtlhd h2 b{font-size:46px;font-weight:900;color:var(--s-acc);
font-family:var(--sans);letter-spacing:-1px}
.stage.jtl .jtlmeta{display:flex;flex-direction:column;gap:3px;margin-top:12px;
font-size:13px;color:var(--s-dim);line-height:1.6}
.stage.jtl .jtlorb{position:absolute;left:5%;right:0;top:78px;height:300px;z-index:1;pointer-events:none}
.stage.jtl .jtlorb i{position:absolute;inset:0;border-radius:50%;
border:1px solid rgba(120,190,255,.30);transform:rotate(-9deg)}
.stage.jtl .jtlorb i:last-child{inset:26px 60px;border-color:rgba(120,190,255,.18);transform:rotate(-9deg)}
.stage.jtl .jtlbig{position:absolute;left:0;right:0;top:132px;text-align:center;z-index:2;
font-size:56px;font-weight:800;letter-spacing:12px;color:rgba(255,255,255,.92);
text-shadow:0 6px 26px rgba(0,40,120,.55)}
.stage.jtl .jtlrow{position:relative;z-index:3;flex:1;display:flex;gap:14px;align-items:flex-end;
margin-top:auto;min-height:0}
.stage.jtl .jtlc{flex:1 1 0;min-width:0;position:relative;padding-left:16px;
padding-bottom:calc(var(--i) * 34px)}
.stage.jtl .jtldot{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;
background:var(--s-acc);box-shadow:0 0 0 5px rgba(88,216,255,.18)}
.stage.jtl .jtlstem{position:absolute;left:6px;top:13px;bottom:0;width:1px;
background:linear-gradient(180deg,rgba(120,190,255,.5),transparent)}
.stage.jtl .jtly{font-size:23px;font-weight:800;color:#fff;letter-spacing:.5px;margin:14px 0 8px}
.stage.jtl .jtlul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.stage.jtl .jtlul li{font-size:10.5px;line-height:1.62;color:var(--s-dim);text-align:justify}
.stage.v916.jtl{padding:54px 46px 44px}
.stage.v916.jtl .jtlrow{flex-direction:column;align-items:stretch;gap:16px;overflow:hidden}
.stage.v916.jtl .jtlc{padding-bottom:0}
.stage.v916.jtl .jtlul li{font-size:12.5px}
.stage.v916.jtl .jtlbig{position:static;margin:22px 0 10px;font-size:46px}
.stage.v916.jtl .jtlorb{display:none}
/* ---------- P4 资质与荣誉 ---------- */
.stage.jcert{padding:52px 60px 44px}
.stage.jcert .jcgrid{flex:1;display:grid;grid-template-columns:4.2fr 4.7fr 2.9fr;gap:30px;
min-height:0;align-items:start;padding-top:6px}
.stage.jcert .jcl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.stage.jcert .jcl li{position:relative;padding-left:16px;font-size:12px;line-height:1.5;
color:var(--s-ink);opacity:.92}
.stage.jcert .jcl li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
border-radius:50%;background:rgba(255,255,255,.45)}
.stage.jcert .jcl li.hi{color:var(--s-acc);font-weight:600;opacity:1}
.stage.jcert .jcl li.hi::before{background:var(--s-acc);
box-shadow:0 0 0 3px rgba(88,216,255,.16)}
.stage.jcert .jckey{list-style:none;margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;
gap:18px;border-left:1px solid var(--s-line)}
.stage.jcert .jckey li{font-size:16px;font-weight:600;line-height:1.5;color:#fff;letter-spacing:.4px}
.stage.v916.jcert .jcgrid{grid-template-columns:1fr;gap:20px}
.stage.v916.jcert .jcl li{font-size:13px}
.stage.v916.jcert .jckey{border-left:none;border-top:1px solid var(--s-line);padding:18px 0 0}
/* ---------- P5 组织结构 ---------- */
.stage.jorg{padding:46px 40px 30px}
.stage.jorg .jocities{display:flex;gap:6px;justify-content:center;margin:6px 0 14px}
.stage.jorg .jocity{flex:0 0 46px;height:62px;display:grid;place-items:center;text-align:center;
border-radius:7px;font-size:12px;line-height:1.25;color:#EAF2FF;letter-spacing:.5px;
background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.18);padding:4px 3px}
.stage.jorg .jorow{display:flex;gap:14px;align-items:stretch}
.stage.jorg .joblk{display:flex;gap:5px}
.stage.jorg .jocol{flex:1 1 0;min-width:0;border-radius:7px;padding:10px 3px;
display:flex;justify-content:center;align-items:center;gap:2px;
background:linear-gradient(180deg,rgba(38,120,230,.62),rgba(22,70,170,.5));
border:1px solid rgba(120,190,255,.26)}
.stage.jorg .jocol.w2{flex:2 1 0}
.stage.jorg .jocol span{writing-mode:vertical-rl;text-orientation:upright;
font-size:12.5px;letter-spacing:1.5px;color:#fff;line-height:1.1;white-space:nowrap}
.stage.jorg .jorow.lab{margin-top:9px}
.stage.jorg .jolab{display:flex;gap:10px}
.stage.jorg .jolabx{flex:1 1 0;height:40px;display:grid;place-items:center;border-radius:8px;
font-size:18px;font-weight:700;letter-spacing:2px;color:#fff;
background:linear-gradient(180deg,rgba(64,150,255,.34),rgba(28,84,190,.28));
border:1px solid rgba(140,200,255,.42)}
.stage.jorg .jorow.t2{margin-top:12px;align-items:flex-start}
.stage.jorg .jot2{display:flex;flex-direction:column;gap:9px}
.stage.jorg .jot2row{display:flex;gap:8px}
.stage.jorg .jot2row span{flex:1 1 0;min-width:0;height:48px;display:grid;place-items:center;
text-align:center;border-radius:7px;font-size:11.5px;line-height:1.3;color:#0B2148;
background:#fff;border:1px solid rgba(255,255,255,.7);padding:4px 5px}
.stage.jorg .jolabx.alt{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
border-color:rgba(255,255,255,.28)}
.stage.jorg .jofoot{margin-top:12px;display:grid;place-items:center}
.stage.jorg .jofoot span{padding:7px 46px;border-radius:8px;font-size:19px;font-weight:700;
letter-spacing:4px;color:#fff;background:linear-gradient(90deg,rgba(64,150,255,.30),rgba(28,84,190,.22));
border:1px solid rgba(140,200,255,.36)}
.stage.v916.jorg{padding:48px 30px 36px}
.stage.v916.jorg .jocities{flex-wrap:wrap;gap:5px}
.stage.v916.jorg .jorow{flex-direction:column;gap:10px}
.stage.v916.jorg .joblk,.stage.v916.jorg .jolab{flex:1 1 auto!important}
.stage.v916.jorg .jocol span{font-size:11.5px}
/* 原版页眉（标题靠左，和 PPT 一致） */
.stage .jhd{position:relative;margin:0 0 14px;flex:none}
.stage .jhd h2{margin:0;font-size:32px;font-weight:800;letter-spacing:2px;color:#fff;line-height:1.2}
.stage .jhd .jhdln{display:block;width:238px;height:3px;margin-top:9px;border-radius:2px;
background:linear-gradient(90deg,var(--s-acc),rgba(120,200,255,.05))}
.stage.v916 .jhd h2{font-size:38px}
/* 组织结构：内容撑满舞台，不要下方留白 */
.stage.jorg .jocities{flex:0 0 auto;margin-top:auto}
.stage.jorg .jorow:not(.lab):not(.t2){flex:0 0 246px;min-height:0}
.stage.jorg .joblk{flex-direction:row}
.stage.jorg .jocol{padding:14px 3px}
.stage.jorg .jorow.t2{flex:0 0 auto}
.stage.jorg .jot2row span{height:56px}
.stage.jorg .jofoot{margin-top:14px}
/* ---------- P6 使命与战略 ---------- */
.stage.jmis{padding:46px 44px 40px;position:relative}
/* 圆环以内容块为圆心（元素已挪进 .jmbody）。
竖版内容排成一列会更高，圆环跟着放大一圈才包得住。 */
.stage.jmis .jmring{position:absolute;left:50%;top:50%;width:640px;height:640px;
transform:translate(-50%,-50%);
border:1px solid rgba(120,220,255,.34);border-radius:50%;pointer-events:none;z-index:0}
/* 竖版舞台只有 720 宽，圆环收一点免得贴边 */
.stage.v916.jmis .jmring{width:600px;height:600px}
.stage.jmis .jmbody{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:16px;min-height:0}
.stage.jmis .jmtop{width:78%;padding:16px 40px;text-align:center;
clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);
background:linear-gradient(180deg,rgba(70,160,255,.34),rgba(28,84,190,.22));
border-top:1px solid rgba(140,210,255,.45)}
.stage.jmis .jmtop span{font-size:29px;font-weight:800;letter-spacing:2px;color:#fff;white-space:nowrap}
.stage.jmis .jmarrow{width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;
border-bottom:30px solid rgba(120,220,255,.55);margin:2px 0 4px}
.stage.jmis .jmpair{display:grid;grid-template-columns:1fr 1fr;gap:0;width:72%;text-align:center}
.stage.jmis .jmp{padding:14px 18px}
.stage.jmis .jmp+.jmp{border-left:1px solid rgba(255,255,255,.18)}
.stage.jmis .jmp b{display:block;font-size:25px;font-weight:800;letter-spacing:1px;color:#fff}
.stage.jmis .jmp i{display:block;margin-top:7px;font-style:normal;font-size:11px;letter-spacing:.4px;color:var(--s-dim)}
.stage.jmis .jmways{display:flex;gap:56px;margin-top:6px}
.stage.jmis .jmw{text-align:center}
.stage.jmis .jmwi{display:grid;place-items:center;width:74px;height:74px;margin:0 auto;border-radius:50%;
color:var(--s-acc);border:2px solid color-mix(in srgb,var(--s-acc) 60%,transparent)}
.stage.jmis .jmwi svg{width:40px;height:40px}
.stage.jmis .jmw b{display:block;margin-top:12px;font-size:22px;font-weight:700;letter-spacing:2px;color:#fff}
.stage.v916.jmis .jmtop{width:100%}
.stage.v916.jmis .jmtop span{font-size:20px;white-space:normal}
.stage.v916.jmis .jmpair{width:100%;grid-template-columns:1fr;gap:12px}
.stage.v916.jmis .jmp+.jmp{border-left:none;border-top:1px solid rgba(255,255,255,.18)}
.stage.v916.jmis .jmways{gap:26px}
/* ---------- P8 五大业务单元 ---------- */
.stage.juni{padding:40px 36px 30px}
.stage.juni .jubody{flex:1;display:flex;gap:10px;min-height:0}
.stage.juni .juside{display:flex;gap:6px;flex:0 0 auto}
.stage.juni .juout{writing-mode:vertical-rl;text-orientation:upright;display:grid;place-items:center;
width:40px;font-size:19px;font-weight:800;letter-spacing:5px;color:#fff;border-radius:8px;
background:linear-gradient(180deg,rgba(40,120,230,.42),rgba(20,64,160,.30));
border:1px solid rgba(130,200,255,.30)}
.stage.juni .jusub{display:flex;gap:6px}
.stage.juni .jusub span{writing-mode:vertical-rl;text-orientation:upright;display:grid;place-items:center;
width:34px;font-size:14px;letter-spacing:3px;color:#DCEBFF;border-radius:7px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.stage.juni .jurl{display:flex;flex-direction:column;gap:5px;width:172px}
.stage.juni .jurl span{flex:1;display:grid;place-items:center;font-size:13px;color:#EAF3FF;
border-radius:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);padding:4px}
.stage.juni .jumain{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.stage.juni .jurow1{display:flex;gap:10px;flex:0 0 202px}
.stage.juni .jupanel{flex:1 1 0;min-width:0;border-radius:11px;padding:12px 14px;
background:rgba(255,255,255,.055);border:1px solid var(--s-cardln);display:flex;flex-direction:column}
.stage.juni .jupanel.wide{flex:2.1 1 0}
.stage.juni .jupanel h3{margin:0 0 10px;text-align:center;font-size:23px;font-weight:800;letter-spacing:2px;color:#fff}
.stage.juni .jutiles{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stage.juni .jutile{position:relative;border-radius:8px;overflow:hidden;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.16)}
.stage.juni .jutile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.stage.juni .jutile span{position:relative;font-size:15px;font-weight:600;color:#fff;letter-spacing:.6px;
text-shadow:0 2px 10px rgba(0,10,40,.8);padding:0 8px;text-align:center}
.stage.juni .juxc{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center}
.stage.juni .juxc span{display:grid;place-items:center;height:44px;border-radius:8px;font-size:17px;
font-weight:600;color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20)}
.stage.juni .juband{display:flex;align-items:center;gap:12px;padding:9px 16px;border-radius:9px;
background:rgba(255,255,255,.07);border:1px solid var(--s-cardln)}
.stage.juni .juband b{font-size:17px;font-weight:800;color:#fff;letter-spacing:1px}
.stage.juni .juband em{font-style:normal;font-size:15px;font-weight:700;color:var(--s-acc)}
.stage.juni .juband i{font-style:normal;font-size:13px;color:var(--s-dim)}
.stage.juni .jucards{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:0}
.stage.juni .jucard{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
background:rgba(255,255,255,.055);border:1px solid var(--s-cardln)}
.stage.juni .jucard>b{font-size:19px;font-weight:800;color:#fff;letter-spacing:1px;flex:none}
.stage.juni .jucr{flex:1;min-width:0;text-align:center}
.stage.juni .juchip{display:inline-block;padding:5px 14px;border-radius:7px;font-size:14px;font-weight:700;
color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26)}
.stage.juni .jucr i{display:block;margin-top:7px;font-style:normal;font-size:11px;line-height:1.45;color:var(--s-dim)}
.stage.juni .jucl{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.stage.juni .jucl span{display:grid;place-items:center;padding:5px 6px;border-radius:6px;font-size:11.5px;
color:#EAF3FF;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);text-align:center}
.stage.juni .jufoot{display:grid;place-items:center;height:44px;border-radius:9px;font-size:21px;
font-weight:800;letter-spacing:3px;color:#fff;
background:linear-gradient(90deg,rgba(64,150,255,.28),rgba(28,84,190,.20));
border:1px solid color-mix(in srgb,var(--s-acc) 46%,transparent)}
.stage.v916.juni .jubody{flex-direction:column}
.stage.v916.juni .juside{flex-direction:row}
.stage.v916.juni .juout{writing-mode:horizontal-tb;width:auto;padding:8px 16px}
.stage.v916.juni .jusub{flex:1}
.stage.v916.juni .jusub span{writing-mode:horizontal-tb;width:auto;flex:1;padding:8px}
.stage.v916.juni .jurl{flex-direction:row;flex-wrap:wrap;width:auto}
.stage.v916.juni .jurl span{flex:1 1 30%;padding:8px 4px}
.stage.v916.juni .jurow1{flex-direction:column;flex:0 0 auto}
/* ---------- P9 价值链路图 ---------- */
.stage.jval{padding:26px 26px 22px}
.stage.jval .jvwrap{flex:1;display:flex;gap:12px;min-height:0}
.stage.jval .jvmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.stage.jval .jvtop{display:flex;align-items:center;gap:20px;padding:8px 14px;border-radius:10px;
background:linear-gradient(90deg,rgba(96,72,220,.55),rgba(56,44,150,.35));
border:1px solid rgba(150,140,255,.34)}
.stage.jval .jvchip{flex:none;padding:7px 16px;border-radius:8px;font-size:14px;font-weight:700;color:#fff;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.stage.jval .jvinds{flex:1;display:flex;justify-content:space-around}
.stage.jval .jvinds b{font-size:20px;font-weight:800;letter-spacing:2px;color:#fff}
.stage.jval .jvpanels{flex:1;display:flex;gap:9px;min-height:0}
.stage.jval .jvp{flex:1 1 0;min-width:0;border-radius:11px;padding:10px;display:flex;flex-direction:column;
border:1px solid rgba(255,255,255,.18)}
.stage.jval .jvp.t-a{background:linear-gradient(180deg,rgba(38,92,210,.52),rgba(22,52,140,.34))}
.stage.jval .jvp.t-b{background:linear-gradient(180deg,rgba(84,66,214,.52),rgba(44,34,130,.34))}
.stage.jval .jvp.t-c{background:linear-gradient(180deg,rgba(74,170,86,.50),rgba(34,96,52,.32))}
.stage.jval .jvp.t-d{background:linear-gradient(180deg,rgba(34,84,190,.46),rgba(18,48,120,.30))}
.stage.jval .jvp header{text-align:center;margin-bottom:9px}
.stage.jval .jvp header b{display:block;font-size:19px;font-weight:800;letter-spacing:1px;color:#fff}
.stage.jval .jvp header i{display:block;margin-top:2px;font-style:normal;font-size:10px;color:rgba(255,255,255,.72)}
.stage.jval .jvrows{flex:1;display:flex;flex-direction:column;gap:7px}
.stage.jval .jvrow{flex:1;display:flex;gap:7px}
.stage.jval .jvcell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:2px;padding:6px 4px;border-radius:7px;text-align:center;
background:rgba(8,16,44,.46);border:1px solid rgba(255,255,255,.2)}
.stage.jval .jvcell b{font-size:13px;font-weight:700;color:#fff;line-height:1.2}
.stage.jval .jvcell i{font-style:normal;font-size:9.5px;color:rgba(255,255,255,.62)}
.stage.jval .jvspine{flex:0 0 30px;display:grid;place-items:center;border-radius:9px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.stage.jval .jvspine span{writing-mode:vertical-rl;text-orientation:upright;font-size:13px;
letter-spacing:3px;color:#EAF3FF}
.stage.jval .jvbase{flex:0 0 auto;border-radius:11px;padding:8px 10px;
background:linear-gradient(180deg,rgba(232,140,42,.55),rgba(150,84,20,.34));
border:1px solid rgba(255,190,120,.4)}
.stage.jval .jvbase header{text-align:center;margin-bottom:6px}
.stage.jval .jvbase header b{font-size:17px;font-weight:800;color:#fff;letter-spacing:1px}
.stage.jval .jvbase header i{margin-left:8px;font-style:normal;font-size:10px;color:rgba(255,255,255,.8)}
.stage.jval .jvbase .jvrow{gap:8px}
.stage.jval .jvbase .jvcell{padding:6px 4px}
.stage.jval .jvsup{display:flex;align-items:center;justify-content:center;gap:10px;height:30px;
border-radius:8px;background:linear-gradient(90deg,rgba(64,150,255,.26),rgba(28,84,190,.18));
border:1px solid rgba(140,200,255,.34)}
.stage.jval .jvsup b{font-size:16px;font-weight:800;color:#fff;letter-spacing:1px}
.stage.jval .jvsup i{font-style:normal;font-size:10px;color:rgba(255,255,255,.72)}
.stage.jval .jvsupr{flex:0 0 auto;display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.stage.jval .jvsupr span{display:grid;place-items:center;text-align:center;padding:8px 2px;border-radius:7px;
font-size:11px;line-height:1.28;color:#fff;background:rgba(84,66,214,.42);border:1px solid rgba(150,140,255,.34)}
.stage.jval .jvside{flex:0 0 250px;display:flex;flex-direction:column;gap:7px;border-radius:11px;
padding:9px;background:rgba(8,18,52,.42);border:1px solid rgba(255,255,255,.16)}
.stage.jval .jvsg{flex:1;display:flex;flex-direction:column;min-height:0}
.stage.jval .jvsg>b{text-align:center;font-size:15px;font-weight:800;color:#fff;letter-spacing:2px}
.stage.jval .jvsg>i{display:block;text-align:center;margin:3px 0 6px;font-style:normal;font-size:9px;
line-height:1.4;color:var(--s-dim)}
.stage.jval .jvsgrid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stage.jval .jvsgrid span{display:grid;place-items:center;text-align:center;border-radius:7px;font-size:11.5px;
color:#EAF3FF;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:3px}
.stage.v916.jval .jvwrap{flex-direction:column}
.stage.v916.jval .jvpanels{flex-direction:column}
.stage.v916.jval .jvspine{flex:0 0 32px}
.stage.v916.jval .jvspine span{writing-mode:horizontal-tb}
.stage.v916.jval .jvsupr{grid-template-columns:repeat(4,1fr)}
.stage.v916.jval .jvside{flex:0 0 auto}
/* ---------- P10 业务领域 ---------- */
.stage.jdom{padding:40px 44px 34px}
.stage.jdom .jdban{display:grid;place-items:center;margin:2px 0 16px}
.stage.jdom .jdban span{padding:11px 44px;font-size:27px;font-weight:800;letter-spacing:2px;color:#fff;
clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);
background:linear-gradient(180deg,rgba(70,160,255,.34),rgba(28,84,190,.20));
border-top:1px solid rgba(140,210,255,.45)}
.stage.jdom .jdgrid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;min-height:0}
.stage.jdom .jdc{display:flex;flex-direction:column;gap:9px;min-height:0}
.stage.jdom .jdh{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.stage.jdom .jdn{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
font-size:16px;font-weight:800;color:var(--s-acc);
border:1.5px solid color-mix(in srgb,var(--s-acc) 65%,transparent)}
.stage.jdom .jdh b{font-size:17px;font-weight:700;color:#fff;letter-spacing:.6px}
.stage.jdom .jdbody{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:12px;
border-radius:11px;background:rgba(255,255,255,.055);border:1px solid var(--s-cardln)}
.stage.jdom .jdimg{border-radius:8px;overflow:hidden;aspect-ratio:16/8;flex:none}
.stage.jdom .jdimg img{width:100%;height:100%;object-fit:cover;display:block}
.stage.jdom .jdbody ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.stage.jdom .jdbody li{position:relative;padding-left:15px;font-size:13px;line-height:1.45;color:#E6EFFF}
.stage.jdom .jdbody li::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;
border-radius:50%;background:var(--s-acc)}
.stage.v916.jdom .jdgrid{grid-template-columns:1fr 1fr;gap:14px}
.stage.v916.jdom .jdban span{font-size:20px;padding:10px 24px}
/* P9 修正：内容在 1280×720 内收得住，右侧栏避开角标 */
.stage.jval .jvpanels{flex:1 1 auto;min-height:0}
.stage.jval .jvp{min-height:0}
.stage.jval .jvrows{min-height:0}
.stage.jval .jvrow{min-height:0}
.stage.jval .jvsupr{flex:0 0 42px}
.stage.jval .jvsupr span{padding:4px 2px;font-size:10.5px}
.stage.jval .jvside{margin-top:50px;flex:0 0 244px}
.stage.jval .jvsg>b{font-size:14px}
.stage.jval .jvtop{flex:0 0 auto;padding-right:0}
.stage.jval .jvinds{padding-right:8px}
.stage.v916.jval .jvside{margin-top:0}
.stage.jval{padding-bottom:26px}
.stage.jval .jvtop{margin-right:44px}
/* P8 修正：整页收进 1280×720 */
.stage.juni{padding:38px 36px 24px}
.stage.juni .jurow1{flex:0 0 182px}
.stage.juni .jucards{min-height:0}
.stage.juni .jufoot{flex:0 0 42px;height:auto}
.stage.juni .jumain{min-height:0}
.stage.juni .jubody{overflow:hidden}
/* ---------- P11 行业研究与咨询服务 ---------- */
.stage.jrep{padding:38px 40px 28px}
.stage.jrep .jrcovs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;flex:0 0 214px}
.stage.jrep .jrcov{position:relative;margin:0;border-radius:10px;overflow:hidden;
border:1px solid rgba(255,255,255,.18);background:#0A1330}
.stage.jrep .jrcov img{width:100%;height:100%;object-fit:cover;display:block}
.stage.jrep .jrcov figcaption{position:absolute;left:0;right:0;top:44%;text-align:center;
font-size:17px;font-weight:700;line-height:1.5;color:#fff;text-shadow:0 2px 12px rgba(0,10,40,.9)}
.stage.jrep .jrbot{flex:1;display:grid;grid-template-columns:5fr 7fr;gap:16px;margin-top:14px;min-height:0}
.stage.jrep .jrtab{width:100%;border-collapse:collapse;font-size:11px;align-self:start}
.stage.jrep .jrtab th,.stage.jrep .jrtab td{border:1px solid rgba(255,255,255,.16);padding:4px 8px;
color:#E6EFFF;line-height:1.35}
.stage.jrep .jrtab thead th{background:rgba(64,150,255,.30);font-size:12px;font-weight:700;text-align:center}
.stage.jrep .jrtab tbody th{background:rgba(255,255,255,.07);font-weight:600;text-align:center;width:34%}
.stage.jrep .jrtab tbody td{background:rgba(255,255,255,.035);text-align:center}
.stage.jrep .jrchart{border-radius:10px;overflow:hidden;background:#fff;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.18)}
.stage.jrep .jrchart img{width:100%;height:auto;display:block}
.stage.v916.jrep .jrbot{grid-template-columns:1fr}
.stage.v916.jrep .jrcovs{grid-template-columns:1fr;flex:0 0 auto}
/* ---------- P12 全场景应用 ---------- */
.stage.jscn{padding:38px 40px 30px}
.stage.jscn .jsbody{flex:1;display:flex;gap:0;align-items:stretch;min-height:0;padding-top:8px}
.stage.jscn .jspanel{flex:0 0 400px;display:flex;flex-direction:column;gap:12px;padding:14px;
border-radius:12px;background:rgba(255,255,255,.055);border:1px solid var(--s-cardln)}
.stage.jscn .jsinds{display:flex;justify-content:space-between;padding:9px 8px;border-radius:8px;
background:rgba(64,150,255,.22);border:1px solid rgba(140,200,255,.3)}
.stage.jscn .jsinds b{font-size:15px;font-weight:700;color:#fff}
.stage.jscn .jsbig{display:grid;place-items:center;height:62px;border-radius:9px;font-size:27px;
font-weight:800;letter-spacing:4px;color:#fff;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.2)}
.stage.jscn .jscols{flex:1;display:flex;gap:10px;align-items:stretch}
.stage.jscn .jscol{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center}
.stage.jscn .jscol span{display:grid;place-items:center;text-align:center;padding:9px 6px;border-radius:7px;
font-size:12.5px;color:#EAF3FF;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.stage.jscn .jsmore{flex:0 0 46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
border-left:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14)}
.stage.jscn .jsmore b{font-size:13px;color:#EAF3FF}
.stage.jscn .jsmore i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.6)}
.stage.jscn .jsaxis{flex:0 0 58px;display:grid;place-items:center}
.stage.jscn .jsaxis span{writing-mode:vertical-rl;text-orientation:upright;font-size:19px;font-weight:700;
letter-spacing:3px;color:#fff}
.stage.jscn .jsgen{flex:0 0 172px;display:flex;flex-direction:column;justify-content:center;gap:14px;
padding:14px;border-radius:12px 0 0 12px;background:rgba(64,150,255,.16);
border:1px solid rgba(140,200,255,.26);border-right:none}
.stage.jscn .jsgen span{display:grid;place-items:center;height:46px;border-radius:8px;font-size:16px;
font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24)}
.stage.jscn .jsshot{flex:1;min-width:0;border-radius:0 12px 12px 0;overflow:hidden;
border:1px solid rgba(255,255,255,.2);background:#0A1330;display:grid;place-items:center}
.stage.jscn .jsshot img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.stage.v916.jscn .jsbody{flex-direction:column;gap:12px}
.stage.v916.jscn .jspanel,.stage.v916.jscn .jsgen{flex:0 0 auto;border-radius:12px;border-right:1px solid rgba(140,200,255,.26)}
.stage.v916.jscn .jsaxis{flex:0 0 34px}
.stage.v916.jscn .jsaxis span{writing-mode:horizontal-tb}
.stage.v916.jscn .jsshot{border-radius:12px;flex:0 0 240px}
/* ---------- P13 三模融合智能诊断机器人 ---------- */
.stage.jrob{padding:36px 36px 26px}
.stage.jrob .jbsub{margin:10px 0 0;font-size:14px;font-weight:600;letter-spacing:.6px;color:var(--s-acc)}
.stage.jrob .jbcards{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;flex:0 0 250px;margin-top:12px}
.stage.jrob .jbc{margin:0;display:flex;flex-direction:column;border-radius:11px;overflow:hidden;
background:rgba(255,255,255,.055);border:1px solid var(--s-cardln)}
.stage.jrob .jbc img{width:100%;flex:1;min-height:0;object-fit:cover;display:block}
.stage.jrob .jbc figcaption{padding:11px 12px 13px;text-align:center}
.stage.jrob .jbc figcaption b{display:block;font-size:17px;font-weight:700;color:#fff}
.stage.jrob .jbc figcaption i{display:block;margin-top:5px;font-style:normal;font-size:11px;color:var(--s-dim)}
.stage.jrob .jbband{flex:1;display:flex;gap:0;margin-top:14px;border-radius:12px;overflow:hidden;
background:linear-gradient(90deg,rgba(28,84,190,.36),rgba(38,120,230,.20));
border:1px solid rgba(140,200,255,.3);min-height:0}
.stage.jrob .jbbadge{position:relative;flex:0 0 190px;display:grid;place-items:center}
.stage.jrob .jbbadge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.stage.jrob .jbbadge span{position:relative;font-size:21px;font-weight:800;letter-spacing:3px;color:#fff;
text-shadow:0 2px 12px rgba(0,10,40,.9)}
.stage.jrob .jbadv{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:0;min-width:0}
.stage.jrob .jba{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
padding:12px 8px;text-align:center}
.stage.jrob .jba+.jba{border-left:1px solid rgba(255,255,255,.14)}
.stage.jrob .jbai{display:grid;place-items:center;width:44px;height:44px;margin-bottom:5px}
.stage.jrob .jbai img{width:100%;height:100%;object-fit:contain}
.stage.jrob .jba i{font-style:normal;font-size:11px;line-height:1.4;color:#EAF3FF}
.stage.v916.jrob .jbcards{grid-template-columns:1fr 1fr;flex:0 0 auto}
.stage.v916.jrob .jbband{flex-direction:column}
.stage.v916.jrob .jbbadge{flex:0 0 90px}
.stage.v916.jrob .jbadv{grid-template-columns:repeat(3,1fr)}
/* ---------- P14 风险论述 ---------- */
.stage.jin1{padding:38px 44px 34px}
.stage.jin1 .ji1lead{margin:6px 0 18px;padding:18px 26px;border-radius:12px;
background:linear-gradient(90deg,rgba(64,150,255,.24),rgba(28,84,190,.12));
border:1px solid rgba(140,200,255,.3)}
.stage.jin1 .ji1lead span{font-size:26px;font-weight:700;line-height:1.5;color:#fff}
.stage.jin1 .ji1body{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;min-height:0}
.stage.jin1 .ji1q{margin:0;font-size:27px;font-weight:600;line-height:1.85;color:#EAF3FF;text-align:center}
.stage.jin1 .ji1img{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.2);max-height:100%}
.stage.jin1 .ji1img img{width:100%;height:100%;object-fit:cover;display:block}
.stage.v916.jin1 .ji1body{grid-template-columns:1fr}
/* ---------- P15 五项价值 ---------- */
.stage.jin2{padding:36px 40px 26px}
.stage.jin2 .ji2top{flex:0 0 232px;display:flex;gap:20px;align-items:center;margin:6px 0 0}
.stage.jin2 .ji2tab{flex:0 0 520px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.18)}
.stage.jin2 .ji2tab img{width:100%;height:auto;display:block}
.stage.jin2 .ji2sh{flex:1;display:grid;place-items:center;min-width:0}
.stage.jin2 .ji2sh img{max-height:210px;width:auto}
.stage.jin2 .ji2band{margin:10px 0 12px}
.stage.jin2 .ji2band span{display:inline-block;font-size:26px;font-weight:800;letter-spacing:2px;color:#fff}
.stage.jin2 .ji2row{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;min-height:0}
.stage.jin2 .ji2c{display:flex;flex-direction:column;gap:10px;min-height:0}
.stage.jin2 .ji2c b{font-size:18px;font-weight:700;color:#fff;letter-spacing:.8px}
.stage.jin2 .ji2p{flex:1;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.2);min-height:0}
.stage.jin2 .ji2p img{width:100%;height:100%;object-fit:cover;display:block}
.stage.v916.jin2 .ji2top{flex-direction:column;flex:0 0 auto}
.stage.v916.jin2 .ji2tab{flex:0 0 auto}
.stage.v916.jin2 .ji2row{grid-template-columns:1fr 1fr}
/* ---------- P16 生态与首创 ---------- */
.stage.jfst{padding:36px 40px 26px}
.stage.jfst .jfbody{flex:1;display:grid;grid-template-columns:5.3fr 6.7fr;gap:26px;min-height:0;padding-top:6px}
.stage.jfst .jfwall{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:12px;
background:rgba(255,255,255,.05);border:1px solid var(--s-cardln);min-height:0}
.stage.jfst .jfhex{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;min-height:0}
.stage.jfst .jfh{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:8px 5px;background:#fff;border:1px solid rgba(255,255,255,.5);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.stage.jfst .jfh.dk{background:#0C1B3E;border-color:rgba(120,180,255,.35)}
.stage.jfst .jfh img{max-width:82%;max-height:52%;object-fit:contain}
.stage.jfst .jfh span{font-size:9.5px;color:#123;line-height:1.2;text-align:center}
.stage.jfst .jfh.dk span{color:#DCEBFF}
.stage.jfst .jfshots{flex:0 0 122px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:6px}
.stage.jfst .jfs{border-radius:5px;overflow:hidden;border:1px solid rgba(255,255,255,.16)}
.stage.jfst .jfs img{width:100%;height:100%;object-fit:cover;display:block}
.stage.jfst .jflist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
justify-content:space-between;min-height:0}
.stage.jfst .jflist li{position:relative;padding-left:20px}
.stage.jfst .jflist li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
border-radius:50%;background:var(--s-acc)}
.stage.jfst .jflist h3{margin:0;font-size:17px;font-weight:700;color:#fff;letter-spacing:.4px}
.stage.jfst .jflist h3 b{color:var(--s-acc);margin-right:8px;font-weight:800}
.stage.jfst .jflist p{margin:6px 0 0;font-size:11.5px;line-height:1.6;color:var(--s-dim)}
.stage.v916.jfst .jfbody{grid-template-columns:1fr}
/* P12 比例修正：左侧场景面板更重，右侧截图收窄 */
.stage.jscn .jspanel{flex:0 0 452px}
.stage.jscn .jsinds b{font-size:16px}
.stage.jscn .jsbig{height:70px;font-size:30px}
.stage.jscn .jscol span{font-size:13px;padding:11px 6px}
.stage.jscn .jsgen{flex:0 0 190px}
.stage.jscn .jsshot{flex:0 0 330px}
.stage.jscn .jsshot img{object-fit:cover;object-position:left top}
/* P14：主张句给回一张卡 */
.stage.jin1 .ji1q{padding:34px 26px;border-radius:14px;
background:linear-gradient(140deg,rgba(64,150,255,.18),rgba(28,84,190,.08));
border:1px solid rgba(140,200,255,.26)}
.stage.jin1 .ji1lead span{font-size:25px}
.stage.jscn .jscol{justify-content:space-evenly}
.stage.jscn .jsshot{align-self:flex-end;height:72%;border-radius:10px;border-color:rgba(255,255,255,.28)}
.stage.jscn .jsgen{align-self:center;height:76%;border-radius:12px;border-right:1px solid rgba(140,200,255,.26)}
/* ---------- P18 平台化交付能力 ---------- */
.stage.jplt{padding:36px 40px 28px}
.stage.jplt .jpbody{flex:1;display:grid;grid-template-columns:7.2fr 4.2fr;gap:24px;min-height:0;padding-top:4px}
.stage.jplt .jpleft{display:flex;flex-direction:column;gap:14px;min-height:0}
.stage.jplt .jpmap{flex:1;min-height:0;display:grid;place-items:center}
.stage.jplt .jpmap img{max-width:100%;max-height:100%;width:auto;height:auto}
.stage.jplt .jpbase{flex:0 0 78px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stage.jplt .jpb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
border-radius:9px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22)}
.stage.jplt .jpb b{font-size:25px;font-weight:800;color:#fff;line-height:1}
.stage.jplt .jpb b sup{font-size:.5em;vertical-align:super;margin-left:1px}
.stage.jplt .jpb i{font-style:normal;font-size:11.5px;color:var(--s-dim)}
.stage.jplt .jprows{display:flex;flex-direction:column;gap:9px;min-height:0}
.stage.jplt .jpr{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:0 20px;border-radius:9px;
background:linear-gradient(90deg,rgba(64,150,255,.26),rgba(28,84,190,.12));
border:1px solid rgba(140,200,255,.32)}
.stage.jplt .jpr b{font-size:25px;font-weight:800;color:#fff;letter-spacing:.5px}
.stage.jplt .jpr b sup{font-size:.5em;vertical-align:super}
.stage.jplt .jpr i{font-style:normal;font-size:13px;color:#D8E7FF}
.stage.v916.jplt .jpbody{grid-template-columns:1fr}
/* ---------- P19 / P20 共用的横幅 ---------- */
.stage .jsband{display:grid;place-items:center;margin:4px 0 14px;flex:none}
.stage .jsband span{display:inline-block;padding:9px 78px;font-size:25px;font-weight:800;letter-spacing:4px;
color:#fff;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
background:linear-gradient(90deg,rgba(34,196,236,.42),rgba(40,120,240,.42))}
/* ---------- P19 服务交付单元 ---------- */
.stage.jsht{padding:36px 40px 28px}
.stage.jsht .jsgrps{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;min-height:0}
.stage.jsht .jsgrp{display:flex;flex-direction:column;gap:10px;padding:11px;border-radius:12px;
background:rgba(255,255,255,.06);border:1px solid var(--s-cardln);min-height:0}
.stage.jsht .jsgt{display:flex}
.stage.jsht .jsgt span{padding:6px 22px;font-size:15px;font-weight:700;color:#fff;
clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
background:linear-gradient(90deg,rgba(40,120,240,.75),rgba(34,150,220,.5))}
.stage.jsht .jsgi{flex:1;display:grid;gap:8px;min-height:0}
.stage.jsht .jsgi.l1-2{grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1fr}
.stage.jsht .jsgi.l1-2 .jsh:first-child{grid-column:1 / -1}
.stage.jsht .jsgi.l3{grid-template-rows:repeat(3,1fr)}
.stage.jsht .jsgi.l2{grid-template-rows:1.2fr 1fr}
.stage.jsht .jsh{border-radius:7px;overflow:hidden;border:1px solid rgba(255,255,255,.2);min-height:0}
.stage.jsht .jsh img{width:100%;height:100%;object-fit:cover;display:block}
.stage.v916.jsht .jsgrps{grid-template-columns:1fr}
/* ---------- P20 服务基础设施 ---------- */
.stage.jnfr{padding:36px 40px 28px}
.stage.jnfr .jnwrap{flex:1;display:flex;flex-direction:column;padding:14px;border-radius:14px;
background:rgba(255,255,255,.05);border:1px solid var(--s-cardln);min-height:0}
.stage.jnfr .jngrid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;
gap:16px;min-height:0}
.stage.jnfr .jnc{display:flex;flex-direction:column;gap:8px;min-height:0}
.stage.jnfr .jnct{display:flex}
.stage.jnfr .jnct span{padding:5px 20px;font-size:14px;font-weight:700;color:#fff;
clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
background:linear-gradient(90deg,rgba(40,120,240,.8),rgba(34,150,220,.5))}
.stage.jnfr .jncp{flex:1;border-radius:8px;overflow:hidden;background:#fff;min-height:0;
border:1px solid rgba(255,255,255,.26)}
.stage.jnfr .jncp img{width:100%;height:100%;object-fit:cover;display:block}
.stage.v916.jnfr .jngrid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
/* ---------- P22 客户墙（原版） ---------- */
.stage.jwal{padding:36px 40px 24px}
.stage.jwal .jwtop{display:flex;gap:26px;align-items:center;flex:0 0 auto;margin:2px 0 14px}
.stage.jwal .jwlead{flex:1;margin:0;font-size:14.5px;line-height:1.85;color:#E4EDFF;text-align:justify}
.stage.jwal .jwstats{flex:0 0 400px;display:grid;grid-template-columns:1fr 1fr;
border-radius:10px;overflow:hidden;
background:linear-gradient(90deg,rgba(34,196,236,.30),rgba(40,120,240,.30));
border:1px solid rgba(140,210,255,.4)}
.stage.jwal .jwst{padding:12px 10px;text-align:center}
.stage.jwal .jwst+.jwst{border-left:1px solid rgba(255,255,255,.28)}
.stage.jwal .jwst b{display:block;font-size:30px;font-weight:800;color:#fff;line-height:1.1}
.stage.jwal .jwst b sup{font-size:.48em;vertical-align:super}
.stage.jwal .jwst i{display:block;margin-top:5px;font-style:normal;font-size:13px;color:#DCEBFF}
.stage.jwal .jwboards{flex:1;position:relative;min-height:0}
.stage.jwal .jwb{position:absolute;border:2px solid rgba(120,190,255,.55);border-radius:3px;overflow:hidden;
box-shadow:0 20px 44px -18px rgba(0,20,70,.85);background:#fff}
.stage.jwal .jwb img{width:100%;height:100%;object-fit:fill;display:block}
.stage.jwal .jwb.b1{left:1%;top:22%;width:33%;height:74%;z-index:1}
.stage.jwal .jwb.b2{left:29%;top:0;width:38%;height:98%;z-index:3}
.stage.jwal .jwb.b3{right:1%;top:26%;width:33%;height:70%;z-index:2}
.stage.v916.jwal .jwtop{flex-direction:column}
.stage.v916.jwal .jwstats{flex:0 0 auto;width:100%}
.stage.v916.jwal .jwb.b1{left:0;top:4%;width:100%;height:30%}
.stage.v916.jwal .jwb.b2{left:0;top:36%;width:100%;height:30%}
.stage.v916.jwal .jwb.b3{left:0;right:auto;top:68%;width:100%;height:30%}
/* P22 标识板按原比例显示，不拉伸 */
.stage.jwal .jwb{height:auto!important}
.stage.jwal .jwb img{height:auto;object-fit:contain}
.stage.jwal .jwb.b1{left:1%;top:auto;bottom:2%;width:33%}
.stage.jwal .jwb.b2{left:29%;top:auto;bottom:6%;width:38%}
.stage.jwal .jwb.b3{right:1%;top:auto;bottom:0;width:33%}
.stage.v916.jwal .jwb.b1{left:0;bottom:auto;top:2%;width:100%}
.stage.v916.jwal .jwb.b2{left:0;bottom:auto;top:35%;width:100%}
.stage.v916.jwal .jwb.b3{left:0;right:auto;bottom:auto;top:70%;width:100%}
/* ---------- 案例页共用副标题 ---------- */
.stage .jc2h2{margin:0 0 14px;font-size:29px;font-weight:800;letter-spacing:1px;color:var(--s-acc);flex:none}
/* ---------- P23 案例一 ---------- */
.stage.jcs1{padding:36px 44px 30px}
.stage.jcs1 .jc1body{flex:1;display:grid;grid-template-columns:4.4fr 7.6fr;gap:30px;min-height:0;align-items:start}
.stage.jcs1 .jc1fig{margin:0;position:relative;border-radius:12px;overflow:hidden;
border:1px solid rgba(255,255,255,.22);height:100%}
.stage.jcs1 .jc1fig img{width:100%;height:100%;object-fit:cover;display:block}
.stage.jcs1 .jc1fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 14px;text-align:center;
font-size:21px;font-weight:800;color:#fff;letter-spacing:1px;
background:linear-gradient(0deg,rgba(4,14,44,.92),transparent)}
.stage.jcs1 .jc1secs{display:flex;flex-direction:column;justify-content:space-between;gap:14px;height:100%}
.stage.jcs1 .jc1s h3{margin:0;position:relative;padding-left:18px;font-size:17px;font-weight:700;color:var(--s-acc)}
.stage.jcs1 .jc1s h3::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;
border:2px solid var(--s-acc)}
.stage.jcs1 .jc1s p{margin:7px 0 0;padding-left:18px;font-size:12.5px;line-height:1.75;color:#DFE9FF;text-align:justify}
.stage.v916.jcs1 .jc1body{grid-template-columns:1fr}
/* ---------- P24 案例二 ---------- */
.stage.jcs2{padding:34px 40px 24px}
.stage.jcs2 .jc2body{flex:1;display:grid;grid-template-columns:4.6fr 7.4fr;gap:26px;min-height:0}
.stage.jcs2 .jc2fig{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.22)}
.stage.jcs2 .jc2fig img{width:100%;height:100%;object-fit:cover;display:block}
.stage.jcs2 .jc2col{display:flex;flex-direction:column;gap:12px;min-height:0}
.stage.jcs2 .jc2s h3{margin:0;position:relative;padding-left:18px;font-size:17px;font-weight:700;color:var(--s-acc)}
.stage.jcs2 .jc2s h3 sup{font-size:.6em;vertical-align:super}
.stage.jcs2 .jc2s h3::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;
border:2px solid var(--s-acc)}
.stage.jcs2 .jc2s p{margin:6px 0 0;padding-left:18px;font-size:12.5px;line-height:1.7;color:#DFE9FF}
.stage.jcs2 .jc2chips{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:9px 0 0 18px}
.stage.jcs2 .jc2chips span{display:grid;place-items:center;padding:5px 3px;border-radius:5px;font-size:10.5px;
color:#EAF3FF;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.stage.jcs2 .jc2stats{flex:0 0 66px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
margin:14px 0 0 auto;width:60%}
.stage.jcs2 .jc2st{display:flex;flex-direction:column;align-items:center;justify-content:center;
border-radius:9px;background:rgba(64,150,255,.16);border:1px solid rgba(140,200,255,.4)}
.stage.jcs2 .jc2st b{font-size:25px;font-weight:800;color:#fff;line-height:1.1}
.stage.jcs2 .jc2st b sup{font-size:.5em;vertical-align:super}
.stage.jcs2 .jc2st i{font-style:normal;font-size:11.5px;color:#D8E7FF;margin-top:2px}
.stage.v916.jcs2 .jc2body{grid-template-columns:1fr}
.stage.v916.jcs2 .jc2stats{width:100%}
/* ---------- P25 案例三 ---------- */
.stage.jcs3{padding:32px 36px 22px}
.stage.jcs3 .jc3top{flex:0 0 auto;display:flex;align-items:center;gap:20px;padding:10px 16px;margin-bottom:14px;
border-radius:10px;background:rgba(8,20,54,.5);border:1px solid rgba(255,255,255,.16)}
.stage.jcs3 .jc3logo{flex:0 0 190px;background:#fff;border-radius:7px;padding:8px;display:grid;place-items:center}
.stage.jcs3 .jc3logo img{max-width:100%;height:auto;display:block}
.stage.jcs3 .jc3tt b{display:block;font-size:24px;font-weight:800;color:#fff}
.stage.jcs3 .jc3tt b sup{font-size:.5em;vertical-align:super}
.stage.jcs3 .jc3tt i{display:block;margin-top:6px;font-style:normal;font-size:14px;color:#DCEBFF}
.stage.jcs3 .jc3tt i sup{font-size:.6em;vertical-align:super}
.stage.jcs3 .jc3grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;min-height:0}
.stage.jcs3 .jc3c{display:flex;flex-direction:column;gap:10px;padding:13px;border-radius:12px;
background:rgba(255,255,255,.055);border:1px solid var(--s-cardln);min-height:0}
.stage.jcs3 .jc3c h3{margin:0;font-size:18px;font-weight:700;color:var(--s-acc);letter-spacing:.6px}
.stage.jcs3 .jc3l{flex:1;display:flex;flex-direction:column;gap:11px;min-height:0}
.stage.jcs3 .jc3i b{display:block;position:relative;padding-left:14px;font-size:12.5px;font-weight:700;color:#fff;line-height:1.5}
.stage.jcs3 .jc3i b::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;
background:var(--s-acc)}
.stage.jcs3 .jc3i p{margin:5px 0 0;padding-left:14px;font-size:11.5px;line-height:1.65;color:#D6E3FA}
.stage.jcs3 .jc3i:only-child p{padding-left:14px;position:relative}
.stage.v916.jcs3 .jc3grid{grid-template-columns:1fr 1fr}
/* ---------- P26 案例四 ---------- */
.stage.jcs4{padding:34px 40px 26px}
.stage.jcs4 .jc4body{flex:1;display:grid;grid-template-columns:5.6fr 6.4fr;gap:30px;min-height:0}
.stage.jcs4 .jc4left{display:flex;flex-direction:column;min-height:0}
.stage.jcs4 .jc4bubs{display:flex;gap:12px;justify-content:center}
.stage.jcs4 .jc4b{width:90px;height:90px;border-radius:50%;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:2px;
background:linear-gradient(160deg,rgba(64,150,255,.34),rgba(28,84,190,.18));
border:1px solid rgba(140,200,255,.45)}
.stage.jcs4 .jc4b b{font-size:20px;font-weight:800;color:#fff;line-height:1}
.stage.jcs4 .jc4b b sup{font-size:.5em;vertical-align:super}
.stage.jcs4 .jc4b i{font-style:normal;font-size:11.5px;color:#DCEBFF}
.stage.jcs4 .jc4arrow{width:0;height:0;margin:12px auto 10px;border-left:26px solid transparent;
border-right:26px solid transparent;border-bottom:26px solid rgba(120,200,255,.42)}
.stage.jcs4 .jc4lines{text-align:center}
.stage.jcs4 .jc4lines p{margin:0 0 6px;font-size:15px;font-weight:700;color:#fff}
.stage.jcs4 .jc4chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stage.jcs4 .jc4chips span{display:grid;place-items:center;padding:9px 4px;border-radius:999px;font-size:13px;
color:#EAF3FF;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22)}
.stage.jcs4 .jc4foot{margin-top:auto;display:grid;place-items:center;height:48px;border-radius:9px;
font-size:19px;font-weight:700;letter-spacing:4px;color:#fff;
background:linear-gradient(90deg,rgba(64,150,255,.24),rgba(28,84,190,.14));
border:1px solid color-mix(in srgb,var(--s-acc) 50%,transparent)}
.stage.jcs4 .jc4right{display:flex;flex-direction:column;min-height:0}
.stage.jcs4 .jc4fig{flex:1;min-height:0;border-radius:12px;overflow:hidden;
border:2px solid color-mix(in srgb,var(--s-acc) 55%,transparent)}
.stage.jcs4 .jc4fig img{width:100%;height:100%;object-fit:cover;display:block}
.stage.jcs4 .jc4scale{margin:16px 0 8px;font-size:23px;font-weight:800;color:#fff}
.stage.jcs4 .jc4scale sup{font-size:.5em;vertical-align:super}
.stage.jcs4 .jc4d{margin:0;font-size:13px;line-height:1.8;color:#DCEBFF;text-align:justify}
.stage.v916.jcs4 .jc4body{grid-template-columns:1fr}
/* ---------- P27 封底 ---------- */
.stage.jend{padding:0;justify-content:center;align-items:center;position:relative}
.stage.jend .jcbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stage.jend .jcscrim{position:absolute;inset:0;z-index:1;background:rgba(4,12,38,.16)}
.stage.jend .sl-brand{top:40px;right:56px;z-index:3}
.stage.jend .jetxt{position:relative;z-index:2;text-align:center}
.stage.jend .jea{font-size:54px;font-weight:800;letter-spacing:8px;color:#fff;
text-shadow:0 4px 24px rgba(0,20,60,.6)}
.stage.jend .jeb{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:14px}
.stage.jend .jetag{padding:11px 34px;font-size:23px;font-weight:700;letter-spacing:5px;color:#fff;
clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
background:linear-gradient(90deg,rgba(24,60,150,.9),rgba(20,44,110,.55))}
.stage.jend .jebw{font-size:54px;font-weight:800;letter-spacing:8px;color:#fff;
text-shadow:0 4px 24px rgba(0,20,60,.6)}
.stage.jend .jef{margin-top:24px;font-size:27px;font-weight:700;letter-spacing:3px;color:#EAF4FF}
.stage.v916.jend .jea,.stage.v916.jend .jebw{font-size:42px}
.stage.v916.jend .jeb{flex-direction:column;gap:14px}
.stage.v916.jend .jef{font-size:20px}
/* 案例页收口：保证正文不被舞台裁掉 */
.stage.jcs1{padding:32px 44px 26px}
.stage.jcs1 .jc1body{min-height:0;overflow:hidden;align-items:stretch}
.stage.jcs1 .jc1secs{justify-content:flex-start;gap:16px}
.stage.jcs1 .jc1s p{font-size:12px;line-height:1.7}
.stage.jcs1 .jc2h2{margin-bottom:10px}
.stage.jcs2 .jc2body{overflow:hidden}
.stage.jcs3 .jc3grid{overflow:hidden}
.stage.jcs3 .jc3c h3{font-size:17px}
.stage.jcs3 .jc3i b{font-size:12px}
.stage.jcs3 .jc3i p{font-size:11px;line-height:1.6}
.stage.jcs3 .jc3l{gap:9px;overflow:hidden}
.stage.jcs4 .jc4right{min-height:0;overflow:hidden}
.stage.jcs4 .jc4fig{flex:0 0 46%}
.stage.jcs4 .jc4scale{margin:14px 0 8px;font-size:21px}
.stage.jcs4 .jc4d{font-size:12.5px;line-height:1.75}
.stage.jcs4 .jc4left{overflow:hidden}
/* 时间轴：装饰圆不撑出舞台 */
.stage.jtl .jtlorb{right:12px;overflow:hidden}
.stage.jtl .jtlrow{overflow:hidden}
/* 竖版 9:16 收口 */
.stage.v916.jcert .jcgrid{gap:14px}
.stage.v916.jcert .jcl li{font-size:12px;line-height:1.45}
.stage.v916.jcert .jckey li{font-size:14px}
.stage.v916.jcert{padding:56px 44px 50px}
.stage.v916.jrep .jrcovs{grid-template-columns:1fr 1fr;flex:0 0 200px}
.stage.v916.jrep .jrbot{grid-template-rows:auto auto;gap:12px;overflow:hidden}
.stage.v916.jrep .jrtab{font-size:10.5px}
.stage.v916.jrep .jrchart{align-self:start}
.stage.v916.jscn .jsbody{overflow:hidden}
.stage.v916.jscn .jsshot{flex:0 0 200px;height:auto}
.stage.v916.jscn .jsgen{height:auto}
.stage.v916.jscn .jsgen span{height:38px;font-size:14px}
.stage.v916.jscn .jsbig{height:54px;font-size:24px}
.stage.v916.jwal .jwboards{overflow:hidden}
.stage.v916.jwal .jwb.b1{top:1%}
.stage.v916.jwal .jwb.b2{top:34%}
.stage.v916.jwal .jwb.b3{top:67%}
/* ============================================================
v66 · 页面状态（定稿/草稿）、一级分类标签、页面组合
============================================================ */
/* ---- 卡片区上方的一级分类 ---- */
.cattabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.cattab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;min-height:36px;
border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);
color:var(--ink-2);font-size:14px;font-weight:500;cursor:pointer;
transition:background .16s,border-color .16s,color .16s}
.cattab:hover{border-color:var(--accent-line);color:var(--ink)}
.cattab.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.cattab i{font-style:normal;font-size:12px;opacity:.7}
.cattab.on i{opacity:.85}
.subtabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px;padding-left:2px}
.subtab{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;min-height:30px;
border-radius:var(--r-pill);border:1px dashed var(--line);background:transparent;
color:var(--ink-3);font-size:13px;cursor:pointer}
.subtab:hover{border-style:solid;color:var(--ink-2)}
.subtab.on{border-style:solid;border-color:var(--accent-line);background:var(--accent-soft);color:var(--ink)}
.subtab i{font-style:normal;font-size:11.5px;opacity:.7}
/* ---- 管理员横幅 ---- */
.pgb{margin:0 0 12px;padding:10px 14px;border-radius:var(--r-md);font-size:13px;line-height:1.7;
color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line)}
.pgb b{color:var(--ink);font-weight:600}
.pgb.warn{background:color-mix(in srgb,#F0A020 12%,transparent);
border-color:color-mix(in srgb,#F0A020 42%,transparent)}
/* ---- 卡片上的状态 ---- */
.card.draft .thumb{opacity:.82}
/* 左上角是勾选框（.pick），状态角标只能放左下，不能压住它 */
.draftpill{position:absolute;left:10px;bottom:10px;z-index:3;pointer-events:none;
padding:3px 9px;border-radius:var(--r-pill);
font-size:11px;font-weight:600;letter-spacing:.4px;color:#fff;background:rgba(20,26,44,.78);
border:1px solid rgba(255,255,255,.28)}
.draftpill.fin{background:rgba(24,132,86,.86);border-color:rgba(120,230,180,.4)}
.statbtn{position:absolute;right:10px;top:10px;z-index:3;padding:4px 10px;min-height:26px;
border-radius:var(--r-pill);font-size:11.5px;line-height:1;cursor:pointer;
color:#fff;background:rgba(20,26,44,.78);border:1px solid rgba(255,255,255,.3)}
.statbtn:hover{background:var(--accent);border-color:var(--accent)}
.ctags .t.cat{font-weight:600;color:var(--ink);background:var(--accent-soft);
border-color:var(--accent-line)}
.ctags .t.cat .catq{font-style:normal;margin-left:5px;padding:0 4px;border-radius:5px;font-size:10px;
background:color-mix(in srgb,#F0A020 30%,transparent);color:var(--ink-2)}
.empty .es{display:inline-block;margin-top:8px;font-size:13px;color:var(--ink-3);line-height:1.8}
/* ---- 左栏：页面组合 ---- */
.railcombo h4 button{margin-left:auto;padding:2px 10px;min-height:24px;font-size:11.5px;
border-radius:var(--r-pill);border:1px solid var(--accent-line);background:var(--accent-soft);
color:var(--ink);cursor:pointer}
.cbwrap{display:flex;align-items:stretch;gap:6px;margin-bottom:7px}
.cbrow{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-areas:"n k" "m k";
gap:1px 8px;align-items:center;text-align:left;padding:9px 11px;border-radius:var(--r-md);
border:1px solid var(--line);background:var(--surface);cursor:pointer;
transition:border-color .16s,background .16s}
.cbrow:hover{border-color:var(--accent-line)}
.cbrow.on{border-color:var(--accent);background:var(--accent-soft)}
.cbrow.off{opacity:.5}
.cbn{grid-area:n;font-size:13.5px;font-weight:600;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbm{grid-area:m;font-size:11.5px;color:var(--ink-3)}
.cbk{grid-area:k;font-size:11.5px;color:var(--ink-3)}
.cbrow.on .cbk{color:var(--accent)}
.cbedit{flex:none;padding:0 9px;border-radius:var(--r-md);border:1px solid var(--line);
background:var(--surface);color:var(--ink-3);font-size:11.5px;cursor:pointer}
.cbedit:hover{border-color:var(--accent-line);color:var(--ink)}
.cbnone{margin:0;padding:10px 2px;font-size:12px;line-height:1.7;color:var(--ink-3)}
/* ---- 表单里的提示与危险按钮 ---- */
.fform .fnote{margin:2px 0 0;font-size:12px;line-height:1.7;color:var(--ink-3)}
.fform .fnote.warn{color:#C67A10}
.btn.danger{color:#C0392B;border-color:color-mix(in srgb,#C0392B 38%,transparent)}
.btn.danger:hover{background:color-mix(in srgb,#C0392B 10%,transparent)}
@media(max-width:820px){
.cattabs{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
scrollbar-width:none;-ms-overflow-style:none}
.cattabs::-webkit-scrollbar{display:none}
.cattab{flex:none;padding:8px 14px}
.subtabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtab{flex:none}
.statbtn{min-height:34px;padding:8px 13px;font-size:12.5px}
.cbedit{min-height:34px}
.subtab{min-height:34px}
}
/* ============================================================
样式表版本指纹
app.js 启动时读这个值，和 CONFIG.version 比对。
对不上 = CSS 和 JS 不是同一版（常见于只传了部分文件，或浏览器/网关吃了旧缓存），
页面会整个塌成没样式的样子。这时顶部会弹一条红条说明原因，不让人白找。
发版时这里要跟着改（当前 v69），_pkgcheck.sh 会卡这一条。
============================================================ */
:root{--xn-css:"v97"}
/* 版本不一致时的提示条 */
#xnVerBar{position:fixed;left:0;right:0;top:0;z-index:99999;padding:10px 16px;
font:500 13px/1.6 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
color:#fff;background:#B3261E;box-shadow:0 2px 12px rgba(0,0,0,.24);text-align:center}
#xnVerBar b{font-weight:700}
#xnVerBar button{margin-left:12px;padding:3px 10px;border-radius:999px;cursor:pointer;
color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5)}
body.xnverbar{padding-top:42px}
/* ---------- 卡片排序下拉 ---------- */
.sortwrap{display:inline-flex;align-items:center;gap:8px;padding:0 4px 0 12px;min-height:38px;
border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface)}
.sortwrap>span{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.sortwrap select{appearance:none;border:none;background:transparent;outline:none;cursor:pointer;
padding:8px 26px 8px 2px;min-height:36px;font-size:13.5px;color:var(--ink);
background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sortwrap:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
@media(max-width:820px){
.sortwrap{padding-left:10px}
.sortwrap>span{display:none}
.sortwrap select{font-size:16px;padding-right:24px}
}
/* ============================================================
v68 · 拖动排序、快捷分类、草稿箱
============================================================ */
/* ---- 草稿箱切换（分类标签行最右） ---- */
.cattab.boxtab{margin-left:auto;border-style:dashed;color:var(--ink-3)}
.cattab.boxtab:hover{border-style:solid}
.cattab.boxtab.on{background:#8A5A00;border-color:#8A5A00;border-style:solid;color:#fff}
/* ---- 拖动排序 ---- */
.card.drag{cursor:grab}
.card.drag .draghand{position:absolute;right:8px;bottom:8px;z-index:4;padding:2px 6px;border-radius:5px;
font-size:12px;line-height:1.2;letter-spacing:-1px;color:var(--ink-3);
background:var(--surface);border:1px solid var(--line);opacity:0;transition:opacity .16s}
.card.drag:hover .draghand{opacity:1}
.card.dragging{opacity:.4}
.card.dropto{outline:2px dashed var(--accent);outline-offset:3px}
/* ---- 左栏快捷分类 ---- */
.cbwrap.act .cbrow{border-color:var(--accent)}
.cbpick{flex:none;padding:0 10px;border-radius:var(--r-md);border:1px solid var(--line);
background:var(--surface);color:var(--ink-3);font-size:11.5px;cursor:pointer;white-space:nowrap}
.cbpick:hover{border-color:var(--accent-line);color:var(--ink)}
.cbpick.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
/* ---- 编辑弹窗里的页面清单 ---- */
.cbpages{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);padding:12px}
.cbphd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cbphd b{font-size:13.5px;color:var(--ink)}
.cbphd span{font-size:12px;color:var(--ink-3)}
.cbphd .btn{margin-left:auto;min-height:30px;padding:4px 12px;font-size:12.5px}
.cblist{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto;
display:flex;flex-direction:column;gap:6px}
.cbli{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);
background:var(--surface);border:1px solid var(--line)}
.cbli.gone{opacity:.55}
.cbi{flex:none;width:22px;text-align:center;font-size:11.5px;color:var(--ink-3)}
.cbt{flex:1;min-width:0;font-size:13px;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbt i{font-style:normal;margin-left:8px;font-size:11px;color:#C67A10}
.cbmv{flex:none;display:flex;gap:4px}
.cbmv button{width:26px;height:26px;border-radius:var(--r-sm);border:1px solid var(--line);
background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:12px;line-height:1}
.cbmv button[disabled]{opacity:.35;pointer-events:none}
.cbrm{flex:none;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line);
background:var(--surface);color:var(--ink-3);font-size:11.5px;cursor:pointer}
.cbrm:hover{color:#C0392B;border-color:color-mix(in srgb,#C0392B 38%,transparent)}
@media(max-width:820px){
.cattab.boxtab{margin-left:0}
.card.drag .draghand{opacity:1;min-height:30px;min-width:30px;display:grid;place-items:center}
.cbmv button{width:32px;height:32px}
.cbrm{min-height:32px}
.cbpick{min-height:34px}
}
/* 快捷分类：窄栏里三列挤不下，改成「一行名字 + 一行动作」 */
.railcombo h4 button{font-size:11px;padding:2px 9px}
.cbwrap{flex-direction:column;align-items:stretch;gap:0;margin-bottom:8px;
border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.cbwrap.act{border-color:var(--accent)}
.cbrow{border:none;background:transparent;border-radius:0;grid-template-columns:1fr;
grid-template-areas:"n" "m";padding:9px 11px 7px}
.cbrow:hover{background:var(--surface-2)}
.cbrow.on{background:var(--accent-soft)}
.cbn{white-space:normal;line-height:1.35}
.cbm{line-height:1.5}
.cbk{display:none}
.cbwrap .cbacts{display:flex;gap:0;border-top:1px solid var(--line)}
.cbpick,.cbedit{flex:1;border:none;border-radius:0;background:transparent;padding:7px 4px;
min-height:32px;font-size:11.5px;color:var(--ink-3)}
.cbpick+.cbedit{border-left:1px solid var(--line)}
.cbpick:hover,.cbedit:hover{background:var(--surface-2);color:var(--ink)}
.cbpick.on{color:var(--accent);font-weight:600}
/* ============================================================
v69 · 下载进行中状态 + ReadyFiles 移动端版式
============================================================ */
/* ---- 下载按钮：转圈 / 打勾 ---- */
.btn.dling,.btn.dlok{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn.dling{opacity:1;cursor:progress}
.btn[aria-busy="true"]{pointer-events:none}
.dlspin{flex:none;width:13px;height:13px;border-radius:50%;
border:2px solid currentColor;border-top-color:transparent;
animation:dlspin .7s linear infinite}
@keyframes dlspin{to{transform:rotate(360deg)}}
.btn.dlok{background:#178A5A;border-color:#178A5A;color:#fff}
.dltick{flex:none;width:13px;height:13px;position:relative}
.dltick::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;
border:2px solid currentColor;border-top:0;border-left:0;transform:rotate(42deg);
transform-origin:center;animation:dltick .22s ease-out}
@keyframes dltick{from{height:0;opacity:0}to{height:10px;opacity:1}}
/* 进行中时给按钮压一条走动的底纹，远看也知道在动 */
.btn.dling::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
background-size:220% 100%;animation:dlsweep 1.1s linear infinite}
.btn.dling{position:relative;overflow:hidden}
@keyframes dlsweep{from{background-position:120% 0}to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){
.dlspin{animation-duration:1.6s}
.btn.dling::before{animation:none}
.dltick::after{animation:none}
}
/* ---- ReadyFiles 移动端：一屏一张大卡片改成紧凑横条 ---- */
@media(max-width:560px){
/* 基础规则里 .fcard 用了 grid-template-columns:none!important（防止别处的
栅格把封面压成 0 宽），这里要盖回去就得同样带 !important */
.fcard{display:grid!important;grid-template-columns:104px minmax(0,1fr)!important;
grid-template-areas:"cover body" "cover foot"!important;align-items:stretch!important;
border-radius:var(--r-md)}
.fcard:hover{transform:none;box-shadow:var(--shadow)}
.fcover{grid-area:cover;aspect-ratio:auto;height:100%;min-height:118px;border-radius:0;
display:grid;place-items:center}
/* 这么小的一块放不下那叠假纸，留一块干净的色块 + 大字格式更好认 */
.fcover .fpage,.fcover .fgrain,.fcover .fplay{display:none}
.fcover .fthumb{display:block}
.fbadge{position:static;padding:0;font-size:19px;font-weight:700;letter-spacing:.5px;
background:none;border:none;box-shadow:none;color:var(--fc);opacity:.88}
.fcard.demo .fbadge{opacity:.6}
.fpend{left:6px;right:auto;top:6px;padding:2px 7px;font-size:10px}
/* 触屏没有 hover，「⋯」得一直露着，而且要够大点得中 */
.fbody{grid-area:body;padding:11px 12px 0;gap:4px}
.fname{font-size:14px;line-height:1.4}
.fdesc{font-size:12px;line-height:1.5;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fmeta{margin-top:1px}
.fchip{font-size:10.5px;padding:2px 7px}
.ffoot{grid-area:foot;margin:8px 12px 11px;padding-top:9px;gap:8px}
.fstat{font-size:10.5px}
.ffoot .btn{min-height:34px;padding:7px 15px;font-size:13px}
/* 待替换那条提示里的按钮，不要占满整行 */
.demobar .btn{width:auto;align-self:flex-start;min-height:36px;padding:8px 16px}
}
/* 窄到 360 以下，封面再让一点位置给文字 */
@media(max-width:380px){
.fcard{grid-template-columns:88px minmax(0,1fr)!important}
.fcover{min-height:106px}
}
/* ============================================================
v70 · 移动端顶栏居中 + OnePage 移动端版式（下拉切换分类）
============================================================ */
@media(max-width:820px){
/* ---- 顶栏标题居中 ----
汉堡在左、头像在右，两边宽度不等，标题用 flex 推是推不正的。
用绝对定位摆在正中，再给左右各留出一块宽度，长名字才不会压到按钮上。 */
/* 顶栏在宽屏是 align-items:stretch——那是给整条高的导航标签用的。
窄屏上导航标签收进抽屉了，stretch 只剩副作用：汉堡自带 40px 固定高度，
stretch 对定高元素不生效，它就顶在最上面，比标题和头像高出 6px。
这一行就是截图里那三个元素不在一条线上的原因。窄屏改成居中。 */
.topbar{position:sticky;justify-content:space-between;align-items:center}
.navburger,.topbar .tb-right{align-self:center}
.topbar .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
flex:none;width:max-content;max-width:calc(100% - 200px);padding:0;
display:flex;justify-content:center;pointer-events:none}
.topbar .brand .mk{pointer-events:auto;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:100%}
.topbar .brand .cnt{display:none} /* 居中之后再挂一行计数就挤了，本来也重复 */
.navburger{margin-right:auto}
.topbar .tb-right{margin-left:auto}
}
/* ---- OnePage 移动端 ---- */
.pnow{border:none;background:none;padding:0;text-align:left;color:inherit;font:inherit;
cursor:default}
#btnPSet{display:none}
.psheet-wrap{display:none}
@media(max-width:900px){
/* 侧栏在窄屏上会把文档列表铺成一整屏，人得先划过它才看得到内容。
收进底部抽屉：文档名本身就是入口，点一下弹出来选。 */
#viewPaper .shell{grid-template-columns:1fr}
#viewPaper .prail{display:none}
.psheet-wrap:not([hidden]) #viewPaper .prail,
#pSheetBody .prail{display:block;position:static;height:auto;width:100%;
border:none;overflow:visible;padding-bottom:0}
#pSheetBody .prail .sect{border-bottom:1px solid var(--line);padding:14px 16px}
#pSheetBody .prail .sect:last-child{border-bottom:none}
.psheet-wrap.only-doc #pSheetBody .prail .sect:not(:first-child){display:none}
.psheet-wrap.only-set #pSheetBody .prail .sect:first-child{display:none}
#btnPSet{display:inline-flex;flex:none}
.subbar .pnow{cursor:pointer;flex:1 1 auto;min-width:0;max-width:none;
display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 12px;
border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface-2);
font-size:13px;font-weight:600;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subbar .pnow::after{content:"▾";flex:none;font-size:11px;color:var(--ink-3)}
.subbar .pnow:active{background:var(--accent-soft);border-color:var(--accent-line)}
/* 抽屉本体 */
.psheet-wrap{display:block;position:fixed;inset:0;z-index:80}
.psheet-wrap[hidden]{display:none}
.psheet-mask{position:absolute;inset:0;background:rgba(12,20,38,.46)}
.psheet-card{position:absolute;left:0;right:0;bottom:0;max-height:82vh;
display:flex;flex-direction:column;background:var(--surface);
border-radius:18px 18px 0 0;box-shadow:0 -12px 40px -18px rgba(12,22,48,.6);
padding-bottom:env(safe-area-inset-bottom);
animation:psheetup .24s cubic-bezier(.22,.8,.28,1)}
@keyframes psheetup{from{transform:translateY(12%);opacity:.4}to{transform:none;opacity:1}}
.psheet-hd{flex:none;display:flex;align-items:center;gap:12px;padding:14px 16px 10px;
border-bottom:1px solid var(--line)}
.psheet-hd::before{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
width:38px;height:4px;border-radius:2px;background:var(--line-strong)}
.psheet-hd b{font-size:15px;color:var(--ink)}
.psheet-hd button{margin-left:auto;min-height:34px;padding:6px 14px;border-radius:var(--r-pill);
border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13px}
.psheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.psheeton{overflow:hidden}
/* 抽屉里的文档条目要够大、够好点 */
#pSheetBody .doc{min-height:46px;padding:10px 12px;border-radius:var(--r-sm)}
#pSheetBody .doc.sub{padding-left:18px}
#pSheetBody .doc .dn{font-size:14px}
#pSheetBody .doc .dd{font-size:11.5px}
#pSheetBody .docg{margin:14px 0 4px;font-size:11.5px}
#pSheetBody .mod{min-height:48px}
#pSheetBody .sw2{width:32px;height:32px}
#pSheetBody .bgbtn .sw{height:46px}
#pSheetBody .sideseg button{min-height:38px}
/* 画布：让 A4 完整撑满可用宽度，不要被 24px 内边距再削一圈 */
#viewPaper .canvas{padding:14px 12px 72px;gap:18px}
#viewPaper .plabel{font-size:10px;margin-bottom:-8px}
}
@media(max-width:900px){
.subbar .pacts2{display:none}
.subbar .pnow .pn-s{display:none}
#pSheetBody .pacts2{display:flex;flex-direction:column;gap:8px;margin-top:4px}
#pSheetBody .pacts2 .btn{width:100%;min-height:44px;justify-content:center}
}
.pacts2{display:contents}
@media(max-width:900px){
/* 上面那条 .prail .doc{align-items:center} 是给横向排版留的，
在竖排的 flex-direction:column 上会把文字推到正中间，抽屉里要拨回来 */
#pSheetBody .doc{align-items:flex-start;text-align:left}
#pSheetBody .doc .dn,#pSheetBody .doc .dd{text-align:left;width:100%}
/* 抽屉标题已经写了「选择 OnePage」，里面那行小标题就重复了 */
.psheet-wrap.only-doc #pSheetBody .sect:first-child > h4{display:none}
.psheet-wrap.only-doc #pSheetBody .sect:first-child{padding-top:10px}
}
/* OnePage 单页文档（.psheet）内部有一块写死 794px 宽的 A4 画板，靠 transform 缩放显示。
但 grid 项和 flex 项默认 min-width:auto，会被这块 794px 撑开，整页跟着横向滚动——
窄屏上表现就是「A4 右半边被切掉、还能往右拖」。每一层都显式收成 0。 */
#viewPaper .shell{grid-template-columns:262px minmax(0,1fr)}
#viewPaper .canvas{min-width:0;max-width:100%}
#viewPaper .pagewrap{min-width:0;overflow:hidden}
#viewPaper .plabel{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){
#viewPaper .shell{grid-template-columns:minmax(0,1fr)}
}
/* 块操作条（上移／下移／删除）挂在 A4 画板里，跟着画板一起被缩放。
窄屏上缩放比在 0.4 左右，按钮只剩 10px 见方，点不中；而且手机上没有 hover，
:hover 触发靠的是触摸后的残留状态，本来就不是能用的交互。
改稿排版这件事留在桌面端做，窄屏只读。 */
@media(max-width:900px){
#viewPaper .bar{display:none !important}
}
/* 搜索命中正文时，卡片上带一段上下文。
不带的话，用户看到一张标题里没有关键词的卡片，只会以为搜索坏了。 */
.card .chit{margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--ink-2);
background:color-mix(in srgb,var(--accent) 9%,transparent);
border-left:2px solid var(--accent);border-radius:0 3px 3px 0;
padding:4px 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 「这页有问题」表单 */
.fbform{display:flex;flex-direction:column;gap:14px;max-width:640px}
.fbform label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-2)}
.fbform select,.fbform textarea{width:100%;font:inherit;font-size:13.5px;color:var(--ink);
background:var(--ground);border:1px solid var(--line);border-radius:4px;padding:9px 10px}
.fbform textarea{resize:vertical;line-height:1.6;min-height:96px}
.fbform select:focus,.fbform textarea:focus{outline:none;border-color:var(--accent)}
/* 竖版 9:16 的预览框。
.previewbox 原来写死 aspect-ratio:16/9。竖版页面是 720×1280，
按 `容器宽 ÷ 720` 缩放后高度是宽度的 1.78 倍，而框只有 0.56 倍高、
又是 overflow:hidden——看到的就是「只剩上面一截，文字还叠在一起」。
用 :has 判断，而不是 body.v916：管理员编辑模式下舞台强制横版
（mountStage 里 mode==="edit" 不进竖版），跟着 body 走会把框换成竖的、
舞台还是横的，反而更错。
高度限在 70vh：9:16 撑满弹窗宽度会有一千九百多像素高，一屏放不下。 */
.previewbox:has(.stage.v916){aspect-ratio:9/16;height:min(70vh,1280px);width:auto;margin-inline:auto}
@media(max-width:560px){
.previewbox:has(.stage.v916){height:min(62vh,1280px)}
}
/* ---- 二级工具条：窄屏重排 ----
原来六个控件一行排下来要 512px，390 的屏放不下，
后面两个（快速开始 / 清空筛选）直接被切在屏外，而且 overflow 是 visible，
连横拖都拖不出来——就是「显示不全」的原因。
收的顺序按重要性来：
· 「清空筛选」没筛选时不显示（上面 render() 里控制），省 80px
· 「外观」在窄屏收成图标，文字挪到 title / aria-label，省 11px
· 「排序」去掉「排序」二字，下拉自己就说明了它是什么；宽度封顶
· 「搜索 / 筛选 / 快速开始」原样保留——这三个是真正每天要点的
再兜一层 overflow-x:auto：万一以后又加控件，是可以拖出来的，不会再被吃掉。 */
.btn.noflt{display:none}
@media(max-width:560px){
.subbar{overflow-x:auto;scrollbar-width:none}
.subbar::-webkit-scrollbar{display:none}
.subbar .tb-actions{flex-wrap:nowrap}
/* 外观：只留图标 */
#btnLook{width:38px;padding:0;position:relative;font-size:0;flex:none}
#btnLook::before{content:"";position:absolute;inset:0;background:currentColor;
-webkit-mask:var(--ico-look) center/19px 19px no-repeat;
mask:var(--ico-look) center/19px 19px no-repeat}
/* 排序：标题去掉，下拉自己说明它是什么 */
.sortwrap>span{display:none}
.sortwrap{padding-left:0}
.sortwrap select{max-width:132px;text-overflow:ellipsis}
}
/* 半黑半白的圆——主题 / 外观的通用图形，19px 下也认得出，
而且不会跟旁边的「筛选」撞车。三个点那版在这个尺寸下像张脸。 */
:root{--ico-look:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.4a8.6 8.6 0 0 0 0 17.2z' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3C/svg%3E")}
/* 360 这一档还差十来个像素，把下拉再收一点、间距压紧 */
@media(max-width:400px){
.subbar{gap:5px;padding-left:7px;padding-right:7px}
.sortwrap select{max-width:118px}
}
/* ---- 整页不横向滑动 ----
手机上整页能左右拽，是很明显的「没做好」的信号：内容看着像没对齐，
还会把固定的顶栏拖出一条白边。二级工具条、分类标签这些本来就是
横向滚动的条，它们自己带 overflow-x:auto，在这条规则下照常滚，
被挡住的只有「整个页面一起被拖走」。 */
html,body{overflow-x:hidden;max-width:100%}
body{overscroll-behavior-x:none}
/* ---- 登录输入框：手机上聚焦不要跳一下 ----
iOS Safari 在聚焦字号小于 16px 的输入框时会自动放大整页，
看起来就是「一点输入框，页面闪一下、字突然变大」，退出时再弹回来。
把这两个框的字号提到 16px，Safari 就不再缩放了。
（不用 maximum-scale=1 那种写法——那会连带禁掉用户自己双指放大。） */
.loginForm input{font-size:16px}
/* ---- 批量操作栏 ----
管理员勾了页就出现在卡片墙上方。原来这两个动作藏在左侧「快捷选页」面板里，
窄屏上那块在筛选抽屉后面，挑完页根本看不到按钮。 */
.bulkbar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
margin:0 0 14px;padding:11px 14px;border-radius:12px;
background:var(--accent-soft);border:1px solid var(--accent-line)}
.bulkbar>b{font-size:13.5px;color:var(--accent);font-weight:700}
.bulkbar .bbm{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.bulkbar .bbacts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.bulkbar .btn{min-height:34px;padding:0 13px;font-size:12.5px}
@media(max-width:560px){
.bulkbar{gap:8px;padding:10px 12px}
.bulkbar .bbacts{margin-left:0;width:100%}
.bulkbar .bbacts .btn{flex:1 1 auto}
}
/* ---- 图片自检 ---- */
.iaprog{font-family:var(--mono);font-size:13px;color:var(--ink-2);padding:8px 0}
.iasec{margin-bottom:18px}
.iasec h4{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--ink)}
.iarow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;
padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.iarow:last-child{border-bottom:0}
.iarow code{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);word-break:break-all}
.iarow span{color:var(--ink-3)}
@media(max-width:560px){ .iarow{grid-template-columns:minmax(0,1fr)} }
/* 图没加载出来时留个看得见的痕迹。
原来是一片空白，看上去像排版出了问题；现在是一块虚线占位，
一眼知道「这儿本来有张图，没下来」。 */
img[data-imgfail]{outline:1px dashed color-mix(in srgb,currentColor 40%,transparent);
outline-offset:-1px;background:color-mix(in srgb,currentColor 7%,transparent);
min-width:24px;min-height:24px}
/* 宽屏不需要这排 chip：那儿的原生下拉本来就好用，也不占地方 */
@media(min-width:561px){ .optchips{display:none} }
/* ======================================================================
竖版 9:16：202609 公司介绍这批页面的统一修正
----------------------------------------------------------------------
这批页每种版式都有自己的 .stage.jxxx{padding:...}，权重和 .stage.v916
一样、又写在后面，于是把竖版留给页眉页脚的那段留白覆盖掉了——
表现就是标题压住左上角的「公司介绍 / 页型」标签，底部内容压住页脚的
页码和来源码。这里把上下留白收回来，左右仍用各版式自己的。
封面、封底是整幅铺满的版式（padding:0），不在此列。
====================================================================== */
.stage.v916:not(.jcov):not(.jend){
padding-top:96px!important;
padding-bottom:104px!important;
}
/* 封面 / 封底：左上角本来就有贤牛 + 仁科的组合标识，
竖版页眉那枚「公司介绍 · 封面」标签正好压在它上面。
这两页不需要那枚标签——整幅铺满的版式，看一眼就知道是什么页。 */
.stage.v916.jcov .vtop,.stage.v916.jend .vtop{display:none}
/* 五大业务单元（P8）竖版：中间那排数据卡原来是 flex:1，
竖版多出来的高度全灌进它一格，三张卡被撑到 349px，
文字浮在正中、上下各留一大片空——看着像没排完版。
竖版让它按内容高，多出来的高度由整列平均分担。 */
.stage.v916.juni .jubody{gap:14px}
.stage.v916.juni .jumain{gap:12px;justify-content:space-between}
.stage.v916.juni .jucards{flex:0 0 auto}
.stage.v916.juni .jucard{padding:14px}
.stage.v916.juni .jurow1{flex:0 0 auto}
/* 组织结构（P5）竖版：横版给每段架构行写死了 246px 高（横排时刚好放下
一列竖排文字）。竖版把这一行改成了上下堆叠——竖排芯片 + 下面的部门条，
加起来早超过 246px，于是部门条压在芯片上（截图里「方案与交付中心」
骑在「市场研究 / 咨询服务…」那排上）。竖版让它按内容高。 */
.stage.v916.jorg .jorow:not(.lab):not(.t2){flex:0 0 auto!important;min-height:0}
.stage.v916.jorg .jocities{margin-top:0}
/* 价值链路与能力基座（P9）竖版：四条价值带原来是横向平分宽度（flex:1 1 0），
竖版改成上下堆叠后，那个 flex:1 变成了平分**高度**——四条带各自只分到
七十来像素，里面的标题和小格子只能互相叠着画。截图里「咨询服务 / 行业研究」
压在「Consulting Service / Industry Insight」上就是这么来的。
竖版让每条带按内容高，格子也给出真实高度。 */
.stage.v916.jval .jvwrap{gap:9px}
.stage.v916.jval .jvpanels{gap:8px}
.stage.v916.jval .jvp{flex:0 0 auto;padding:9px 10px 10px}
.stage.v916.jval .jvp header{margin-bottom:7px}
.stage.v916.jval .jvp header b{font-size:17px}
.stage.v916.jval .jvrows{flex:0 0 auto;gap:6px}
.stage.v916.jval .jvrow{flex:0 0 auto;gap:6px}
.stage.v916.jval .jvcell{flex:1 1 0;min-height:36px;padding:5px 6px;gap:1px}
.stage.v916.jval .jvcell b{font-size:13.5px;line-height:1.15}
.stage.v916.jval .jvcell i{font-size:10px}
/* 这一页在竖版是四条价值带上下堆，本来横排的内容全变成纵向叠加，
高度接近翻倍。光靠收紧间距还差四百多像素，再压字号就没法看了。
整块按比例缩——用 zoom 而不是 transform:scale：zoom 会真的重排，
不需要再去补偿宽高；内容一条不少，只是整体小一号。
万一哪个浏览器不认 zoom，表现就是回到「收紧过的版本」，不会更糟。 */
.stage.v916.jval .jvwrap{zoom:.71}
.stage.v916.jval .jvbase{padding:7px 9px}
.stage.v916.jval .jvbase header{margin-bottom:5px}
.stage.v916.jval .jvsup{padding:7px 9px}
.stage.v916.jval .jvsupr{gap:6px}
.stage.v916.jval .jvside{gap:6px}
/* 资质与认证（P4）竖版：三栏变一栏后总高多出六十来像素，
压到页脚上。整块按比例收一点，内容一条不少。 */
.stage.v916.jcert .jcgrid{zoom:.93}
/* 行业研究（P11）竖版：那张表的行高是按横排半幅宽算的，
竖版一行文字要折两到三行，内容比行高高出一倍——字互相压着。
竖版让行按内容高，字号也给回一点。 */
.stage.v916.jrep .jrtab{font-size:12.5px}
.stage.v916.jrep .jrtab th,.stage.v916.jrep .jrtab td{padding:7px 9px;line-height:1.45}
.stage.v916.jrep .jrtab tr{height:auto}
/* 行业研究竖版：下半区是「表格 + 图表」左右两栏，竖版堆成上下两块。
图表块没有高度约束，接着表格往下画，直接越过页脚跑出舞台。
给它一个上限，图按比例缩进去。 */
.stage.v916.jrep .jrbot{grid-template-columns:1fr;gap:12px;min-height:0}
.stage.v916.jrep .jrchart{max-height:150px;align-self:start}
.stage.v916.jrep .jrchart img{max-height:150px;width:auto;max-width:100%;object-fit:contain}
/* ======================================================================
二级工具条：统一控件形状
----------------------------------------------------------------------
原来一行里有四套尺寸：搜索图标 22 高、按钮 37 高圆角 8、
排序那个胶囊 38 高圆角 999、ReadyFiles 的两个下拉 35 高，
字号 13 / 13.5 / 14 混着用——排在一起高低不齐、粗细不一。
统一成：高 36、字号 13、圆角 8，图标按钮是 36 见方。
====================================================================== */
.subbar .btn,
.subbar > button,
.subbar select.btn,
.subbar .sortwrap{
height:36px;min-height:36px;font-size:13px;line-height:1;
border-radius:8px;box-sizing:border-box;
}
.subbar > button#btnSearch{width:36px;padding:0;display:grid;place-items:center;
border:1px solid var(--line);background:var(--surface-2);border-radius:8px}
.subbar > button#btnSearch svg{width:17px;height:17px}
.subbar .sortwrap{border-radius:8px;padding:0 4px 0 11px;gap:6px}
.subbar .sortwrap>span{font-size:13px}
/* 下拉本体的圆角跟着外壳走，别在胶囊里再画一个直角 */
.subbar .sortwrap select{font-size:13px;height:34px;border-radius:6px}
/* OnePage 的文档名里那段副标题，字号跟其它控件对齐 */
.subbar .pnow,.subbar .pnow *,.subbar #paperNow,.subbar #paperNow *{font-size:13px!important}
/* OnePage 的文档名也是个按钮（点开切换文档），跟着一起对齐 */
.subbar .pnow{height:36px;min-height:36px;font-size:13px;padding:0 11px;border-radius:8px;
border:1px solid var(--line);background:var(--surface-2);display:inline-flex;align-items:center}
.subbar .pnow .pn-n{font-size:13px;font-weight:600}
.subbar .pnow .pn-s{font-size:12px}
/* 统一控件尺寸后，360 这一档「快速开始」又差七八个像素。
排序胶囊左右内边距和下拉宽度再各收一点。 */
@media(max-width:400px){
.subbar .sortwrap{padding:0 3px 0 7px;gap:4px}
.subbar .sortwrap select{max-width:106px}
}
/* ---- 分享出去的页面：只留内容 ----
页眉那枚「公司介绍 · 封面」是给内部挑页用的，页脚那行来源码
（xn-corp-intro-20260915）也是内部编号——客户看到只会莫名其妙。
顺带解决一处对不上：页脚的页码算的是这一页在原 deck 里的位置，
而客户手里是挑出来的那几页，于是出现「一共 32 页、第一页写着 1/27」。
外面的放映条已经在报真实位置，这里直接不显示。 */
body.sharedview .stage .vtop,
body.sharedview .stage .vbot{display:none!important}
/* ---- 首页顶部：问候语在左、标识在右上、吉祥物贴在问候语旁边 ---- */
.htop{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* 问候语按内容宽，吉祥物才贴得住它右边；再宽就飘到屏幕中间去了 */
.hgreet{position:relative;padding-right:104px;min-width:0;flex:0 1 auto;padding-bottom:2px}
.hsearch{order:2}
/* 吉祥物只是装饰：不挡点击，读屏跳过（img 的 alt 是空的） */
/* 高度跟着问候语走，不写死宽度：写死就会在顶栏那条里露出半个头 */
.hmascot{position:absolute;right:0;bottom:-4px;height:calc(100% + 8px);width:auto;
pointer-events:none;user-select:none;
filter:drop-shadow(0 10px 20px rgba(40,60,140,.22))}
@media(max-width:1000px){
.hbrand{order:1;margin-left:0}
.hgreet{order:2;flex:1 1 100%}
.hsearch{order:3;flex:1 1 100%}
}
@media(max-width:560px){
.hgreet{padding-right:88px}
.hmascot{height:calc(100% + 6px);bottom:-3px}
}
/* ======================================================================
生成分享链接：把弹窗收紧
----------------------------------------------------------------------
原来两个字段各占一整行、按钮分在上下两处、链接是个三行的 textarea，
一条长链接铺满整块，整个弹窗散得厉害。现在：
两个字段并排一行 → 一个主按钮 → 出来的链接是一行，旁边就是「复制」。
====================================================================== */
/* 去掉整块的底色和大内边距——弹窗本身已经是一张卡了，里面再套一层显得散 */
.slform{display:flex;flex-direction:column;gap:16px;max-width:620px;
background:none;border:none;padding:0}
.slform .usgrid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;
padding:0;background:none;border:none}
.slform .usgrid label{display:flex;flex-direction:column;gap:6px;
font-size:12.5px;color:var(--ink-3)}
.slform .usgrid select,.slform .usgrid input{height:38px;font-size:13.5px;
border:1px solid var(--line-strong);border-radius:8px;background:var(--ground);
color:var(--ink);padding:0 11px;width:100%}
.slform .usgrid select:focus,.slform .usgrid input:focus{outline:none;
border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.slform .usfoot{display:flex;align-items:center;gap:10px;padding:0;border:none;background:none}
.slform .usfoot .btn{min-height:38px}
.slout{display:flex;flex-direction:column;gap:9px;padding-top:16px;
border-top:1px solid var(--line)}
.sllab{font-size:12.5px;color:var(--ink-3)}
.slbox{display:flex;gap:8px}
.slbox input{flex:1;min-width:0;height:40px;padding:0 12px;font-family:var(--mono);
font-size:13px;color:var(--ink);background:var(--surface-2);
border:1px solid var(--line-strong);border-radius:8px;
text-overflow:ellipsis}
.slbox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.slbox .btn{flex:none;min-height:40px;padding:0 16px}
.slops{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.slops .btn{min-height:34px;padding:0 13px;font-size:12.5px}
.slmsg{font-size:12px;color:var(--ink-3);line-height:1.6}
.slhint{font-size:12px;color:var(--ink-3)}
@media(max-width:560px){
.slform .usgrid{grid-template-columns:minmax(0,1fr)}
.slbox{flex-wrap:wrap}
.slbox input{flex:1 1 100%}
.slbox .btn{flex:1 1 auto}
}
/* 生成分享链接的弹窗不需要一千多像素宽——表单只有 620px，
剩下的都是空白，看着像少了半块内容。按内容收窄。 */
@media(min-width:821px){
.modal:has(.slform){max-width:min(700px,96vw)}
.slform{max-width:none}
}
/* ======================================================================
v81 · 吸顶失效的真正原因
----------------------------------------------------------------------
上面那条 html,body{overflow-x:hidden} 是为了「整页不能左右拽」加的，
但它有个副作用：给 body 设了 overflow-x 之后，overflow-y 会算成 auto，
body 自己就变成了一个滚动容器。而 body 的高度是内容高度、永远不滚，
于是里面所有 position:sticky 的东西（顶栏、二级工具条、左右两栏）
都贴在一个不滚动的容器上——表现就是「跟着页面一起划上去了」。
PC 和手机都中招。
overflow:clip 做的是同一件事（不许横向滚），但它不建立滚动容器，
sticky 照常工作。不认识 clip 的老浏览器仍然拿到上面那条 hidden。
====================================================================== */
@supports (overflow:clip){
html,body{overflow-x:clip}
}
/* ======================================================================
v81 · 弹窗标题被按钮挤成一列
----------------------------------------------------------------------
预览弹窗的按钮是一个带 inline style 的 div，窄屏下被判到 width:100%，
而 .mhead 又是 flex-wrap:nowrap——100% 宽的按钮组没处换行，
只能把左边的标题压到一个字宽，标题就竖着排下来了（微信里尤其明显）。
改成允许换行：按钮组的基准宽度略大于一整行，必然自己占一行；
标题基准宽度为 0，只有一个「关闭」时仍和标题同排。
====================================================================== */
@media(max-width:820px){
.mhead{flex-wrap:wrap}
.mhead>div:first-child{flex:1 1 0;min-width:0}
/* 按钮组带的是 inline style（flex:none），不加 !important 压不过它；
基准宽度比一整行多 1px，保证它一定被挤到下一行，
再用 width:100% 把它框回行宽，里面的按钮才会自己换行而不是溢出去。 */
.mhead>div[style]{flex:1 1 calc(100% + 1px)!important;width:100%;max-width:100%;
flex-wrap:wrap;justify-content:flex-start!important;gap:8px}
/* 按钮不止一个时，标题也单独占一行，免得挤成两三个字一折 */
.mhead:has(.btn ~ .btn)>div:first-child{flex:1 1 100%}
}
/* ---- OnePage 工具条：文档名那颗按钮放宽一点 ---- */
@media(max-width:900px){
.subbar .pnow{flex:1 1 auto;min-width:min(52vw,240px)}
}
/* ======================================================================
v81 · 手机端「已选资料」收起时也要能直接放映和导出
----------------------------------------------------------------------
原来收起只留 60px 的一条标题，要先展开抽屉才点得到「放映预览 / 导出」。
改成收起时就是一行：左边页数，右边两颗按钮；列表和「清空已选」仍然
展开后才出现。点标题区展开，点按钮直接执行，互不干扰。
====================================================================== */
@media(max-width:820px){
.cart:not(.open){transform:none;max-height:none;
display:flex;flex-direction:row;align-items:center;gap:10px;
padding:0 12px calc(8px + env(safe-area-inset-bottom))}
.cart:not(.open) .carthead{flex:1 1 auto;min-width:0;padding:9px 0 0;border:none}
.cart:not(.open) .carthead .ch{display:flex;align-items:center;gap:8px;margin:0}
.cart:not(.open) .carthead #btnTok{display:none}
.cart:not(.open) .cartlist{display:none}
.cart:not(.open) .cartfoot{flex:none;padding:9px 0 0;border:none;
display:flex;gap:8px;align-items:center}
.cart:not(.open) .cartfoot .cfrow:last-child{display:none}
.cart:not(.open) .cartfoot .cfrow{gap:8px}
.cart:not(.open) .cartfoot .btn{min-height:38px;padding:0 14px;font-size:13px}
}
/* ---- v81 · 侧栏吸顶位置对齐到二级栏底边 ----
原来写死 105px，是按当时的 56 + 49 算的；二级栏后来加高到 61，
于是左右两栏被二级栏压掉 12px。改成实际的 56 + 61。 */
/* --xn-top2 = 顶栏高 + 二级栏高，由 syncStickyTops() 每次换视图 / 改窗宽时量一次。
写死过 105，后来二级栏加高到 61，两栏就被压掉 12px——所以改成量出来的值。
变量还没写进去的那一帧用 117 兜底。 */
.rail,.cart{top:var(--xn-top2,117px);height:calc(100vh - var(--xn-top2,117px))}
@media(max-width:820px){
.rail{top:0;height:100%}
.cart{top:auto;height:auto}
/* 收起的已选条只占一行，别让上面那条 height 把它撑成满屏 */
.cart:not(.open){height:auto}
}
/* ---- v81 · 首页不再放标识，顶栏也不再挂那行计数 ---- */
.hbrand{display:none}
.topbar .brand .cnt{display:none}
/* ======================================================================
v83 · 二级分类条也吸顶
----------------------------------------------------------------------
WebSlide 的「全部 / 封面页 / …… / 草稿箱」和 XGO 的
「PPT 模板 / 品牌元素 / 生成工具」，往下翻的时候也要留在屏幕上。
位置接在二级工具条底下（顶栏 56 + 工具条 61 = 117；窄屏 52 + 53 = 105）。
z-index 比工具条低一级，重叠时被工具条盖住，而不是压在它上面。
====================================================================== */
.tabbar{position:sticky;top:var(--xn-top2,117px);z-index:38;background:var(--ground);
padding:8px 0 4px;margin-top:-8px}
.tabbar .cattabs:last-child{margin-bottom:6px}
#viewPpt .pseg{position:sticky;top:var(--xn-top2,117px);z-index:38;background:var(--ground);
padding-top:8px;margin-top:-20px}
@media(max-width:820px){
.tabbar{padding:7px 0 3px;margin-top:-7px}
#viewPpt .pseg{padding-top:6px;margin-top:-14px}
}
/* ======================================================================
v83 · 放映改成真·全屏
----------------------------------------------------------------------
原来四周留 26px、宽度封顶 96vw、还要给底下的按钮条让出 130px，
于是页面缩在中间、四周一圈黑边。现在：
· 舞台按屏幕算满（宽 = min(100vw, 100vh × 16/9)），不再预留按钮条的位置
· 底色取这一页自己的背景色（drawPresent 里量出来写上去），黑边就看不见了
· 按钮条浮在页面上，停手两秒多自己淡出；动一下鼠标 / 碰一下屏幕就回来
====================================================================== */
.present{padding:0;gap:0}
.pstage{width:min(100vw,calc(100vh * 16 / 9));border-radius:0;box-shadow:none}
.present.v916 .pstage{width:min(100vw,calc(100vh * 9 / 16))}
/* 浮在页面上的操作条：按钮一排固定宽，页码另起一颗，翻页时条子不会左右晃 */
.pbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
display:flex;align-items:center;gap:12px;z-index:40;
padding:9px 16px;border-radius:999px;
background:rgba(12,16,24,.78);border:1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
max-width:calc(100vw - 20px);
transition:opacity .3s ease,transform .3s ease}
.pbar.hide{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px)}
.pbar-ops{display:flex;align-items:center;gap:12px}
.pbar-ops button{flex:none}
/* 统一高度：不写的话按钮跟着各自的文字高度走，一排按钮的上沿参差不齐 */
.pbar button{color:rgba(241,244,249,.82);border:1px solid rgba(255,255,255,.18);
padding:0 12px;min-height:34px;border-radius:7px;white-space:nowrap;
display:inline-flex;align-items:center;justify-content:center;line-height:1}
.pbar #pLayout{min-width:8.6em}
.pbar #pFull{min-width:7.4em}
.ppg{position:fixed;left:50%;bottom:calc(22px + 56px);transform:translateX(-50%);
z-index:40;min-width:7.5ch;padding:6px 12px;border-radius:999px;text-align:center;
background:rgba(12,16,24,.78);border:1px solid rgba(255,255,255,.14);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
color:rgba(241,244,249,.7);font-family:var(--mono);font-size:12px;
font-variant-numeric:tabular-nums;letter-spacing:.04em;pointer-events:none;
transition:opacity .3s ease,transform .3s ease}
.ppg.hide{opacity:0;transform:translateX(-50%) translateY(8px)}
.ppeek{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;
padding:0 16px;min-height:34px;border-radius:999px;cursor:pointer;
background:rgba(12,16,24,.72);border:1px solid rgba(255,255,255,.16);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
color:rgba(241,244,249,.82);font-size:12.5px;font-family:inherit;
display:inline-flex;align-items:center;justify-content:center;
transition:opacity .3s ease,transform .3s ease}
.ppeek.hide{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px)}
/* 顶上那条进度：翻到第几页一眼能看见，导出的 deck 也有同一条 */
#pProg{position:fixed;left:0;top:0;height:3px;z-index:41;
background:linear-gradient(90deg,#BED2FF,#5B9CFF,#A78BFA);
transition:width .4s cubic-bezier(.22,1,.36,1);box-shadow:0 0 12px rgba(91,156,255,.55)}
.present:not(.on) ~ #pProg,#pProg[hidden]{display:none}
@media(max-width:820px){
/* 窄屏不再是贴底的整条，同样是一颗浮起来的胶囊 */
.pbar{left:50%;right:auto;bottom:calc(14px + env(safe-area-inset-bottom));
padding:8px 12px;gap:8px;border-top:none;flex-wrap:nowrap;
background:rgba(12,16,24,.8);font-size:12px}
.pbar-ops{gap:8px}
.pbar button{min-height:38px;padding:7px 12px;font-size:13px;min-width:0}
.pbar #pLayout,.pbar #pFull{min-width:0}
/* 页码在操作条上方留出空隙：条本身约 54px，再加 12px，避免压住按钮 */
.ppg{bottom:calc(14px + 54px + 12px + env(safe-area-inset-bottom))}
.ppeek{bottom:calc(14px + env(safe-area-inset-bottom));min-height:38px}
/* 竖屏比 9:16 高，居中会在顶上进度条和页脚都空一截。贴顶，余量留在下面。 */
.present.on:not(.zoomed){justify-content:flex-start;align-items:center}
.present.on:not(.zoomed) .pstage{margin-top:0}
/* 提示语跟着按钮条一起淡出，别常驻在页面上 */
.present::after{content:"上下滑动翻页";top:auto;
bottom:calc(74px + env(safe-area-inset-bottom));transition:opacity .3s}
.present.barhide::after{opacity:0}
.present.v916::after{content:"上下滑动翻页"}
}
/* 放映背景层：铺满、虚化，盖掉黑边 */
.pbackdrop{position:absolute;inset:-6%;z-index:0;pointer-events:none;
background-size:cover;background-position:center;
filter:blur(34px) saturate(1.08) brightness(.92);opacity:.95;
transition:opacity .3s ease}
.present .pstage{position:relative;z-index:1}
/* ---- v83 · 放映条在窄屏上的最终形态 ----
上面 @media 里那条 .present .pbar{flex-wrap:wrap} 比 .pbar 权重高，
会把胶囊压成一团，所以这里用同样的权重写回来。
手机上按钮要挑：iPhone 的 Safari 不支持网页全屏，那颗按钮留着也按不动，收起来。 */
@media(max-width:820px){
.present .pbar{flex-wrap:nowrap;justify-content:center;gap:7px;padding:8px 11px}
.present .pbar button{min-height:38px;padding:7px 11px;font-size:13px}
.present .pbar #pFull{display:none}
.present .pbar-ops{gap:7px}
}
/* 分享链接是发给客户的：「退出放映」会把客户丢进内部工具，不该出现。
原来只在窄屏藏了，桌面端还在。 */
body.sharedview .pbar #pExit{display:none!important}
/* 出图时藏编辑条，并盖一层遮罩，避免把 1:1 A4 画板闪到屏幕上 */
html.xn-shooting .bar,
html.xn-shooting .noprint{display:none !important}
#xnShotMask{position:fixed;inset:0;z-index:2147483000;background:#0B1119;
color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;
letter-spacing:.04em;pointer-events:auto}
/* ================= OnePage v96：三类 + 版式模板 ================= */
#viewPaper .opk{margin-bottom:10px}
#viewPaper .opk+.opk{padding-top:10px;border-top:1px solid var(--line)}
#viewPaper .opkh{display:flex;align-items:center;gap:8px;margin:2px 0 4px;font-size:13px;font-weight:600;color:var(--ink)}
#viewPaper .opkh i{font-style:normal;font-size:11px;font-weight:500;color:var(--ink-3)}
#viewPaper .doc .ppmine{font-style:normal;margin-left:6px;font-size:10.5px;font-weight:600;color:var(--accent)}
#viewPaper .opbar{width:100%;max-width:794px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:-6px}
#viewPaper .opseg{display:inline-flex;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden}
#viewPaper .opseg button{padding:6px 14px;font-size:12.5px;color:var(--ink-2);background:var(--surface);border:0}
#viewPaper .opseg button+button{border-left:1px solid var(--line-strong)}
#viewPaper .opseg button.on{background:var(--accent-strong);color:var(--on-accent)}
#viewPaper .opmeta{font-size:12px;color:var(--ink-3)}
#viewPaper .opmeta b{color:var(--accent);font-weight:600}
#viewPaper .opacts{margin-left:auto;display:flex;gap:8px}
#viewPaper .page.psheet .a4.opa4{display:block;width:794px;height:1123px;overflow:hidden;background:#fff}
#viewPaper .opa4 > .op-page{position:absolute;left:0;top:0}
#viewPaper .opphone{width:390px;max-width:100%;height:min(780px,calc(100vh - 190px));min-height:520px;border-radius:28px;border:10px solid #151A24;box-shadow:0 24px 60px -24px rgba(0,0,0,.6);overflow:hidden;background:#fff}
#viewPaper .opscr{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
#viewPaper .ophint{font-size:12px;color:var(--ink-3);margin:-10px 0 0}
.opform .opsec{margin-bottom:18px}
.opform h4{margin:0 0 10px;font-size:13.5px;color:var(--ink)}
.opform h4 small{margin-left:8px;font-size:11.5px;font-weight:400;color:var(--ink-3)}
.opform .opct{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.opform .opfr{margin-bottom:12px}
.opform .opfl{display:block;margin-bottom:4px;font-size:12px;color:var(--ink-2);font-weight:500}
.opform input,.opform textarea,.opform select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm,4px);background:var(--ground);color:var(--ink);font:inherit;font-size:13px;line-height:1.6}
.opform textarea{resize:vertical}
.opform .opfn{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.opform .oprow{display:flex;gap:6px;margin-bottom:6px}
.opform .oprow input{flex:1 1 0;min-width:0}
.opform .oprow input.w{flex:2.4 1 0}
.opform .oprm{flex:none;width:30px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink-3)}
.opform .oprm:hover{color:#C8413B;border-color:#C8413B}
.opform .opadd{font-size:12px;padding:4px 10px}
.opform .opfoot{position:sticky;bottom:-1px;background:var(--surface);padding:12px 0 2px;border-top:1px solid var(--line)}
.opchk{display:flex!important;align-items:center;gap:8px;flex-direction:row!important}
.opchk input{width:auto!important}
.ophist{margin-top:16px}
.ophi{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.ophi .ophits{color:var(--ink-3)}
@media(max-width:900px){
#viewPaper .opacts{margin-left:0}
.opform .opct{grid-template-columns:1fr 1fr}
}
@media print{#viewPaper .opbar,#viewPaper .ophint{display:none!important}}
/* ================= OnePage v99：结构精简 ================= */
/* 旧的「设计 / 版面 / 保存草稿 / 保存为模版 / 恢复原文」不再用：公司主体、恢复原文挪到画布工具条上 */
#pskinWrap, #pActs2, #btnPSet{display:none !important}
#viewPaper .opphone{border-width:1px}
#viewPaper .opnav{padding-top:12px}
#viewPaper .opcats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border-radius:8px;background:var(--ground);border:1px solid var(--line)}
#viewPaper .opcats button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border:0;border-radius:6px;background:transparent;
font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
#viewPaper .opcats button i{font-style:normal;font-size:11px;font-weight:500;color:var(--ink-3)}
#viewPaper .opcats button.on{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(20,32,60,.12)}
#viewPaper .opcats button.on i{color:var(--accent)}
#viewPaper .opq{width:100%;margin:10px 0 4px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--ground);color:var(--ink);font:inherit;font-size:12.5px}
#viewPaper .opnone{margin:14px 2px;font-size:12px;color:var(--ink-3)}
#viewPaper .oplogo{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
#viewPaper .oplogo select{padding:6px 8px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px}
/* 手机版预览：不要黑色机身框，就是一张干净的手机宽度页面 */
#viewPaper .opphone{width:390px;max-width:100%;height:min(820px,calc(100vh - 170px));min-height:520px;
border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden;
box-shadow:0 2px 6px rgba(20,32,60,.06),0 24px 60px -28px rgba(20,32,60,.45)}
#viewPaper .opscr{scrollbar-width:thin}
#viewPaper .opframe{display:block;width:100%;height:100%;border:0;background:#fff}