/* =========================================================
   引物在线设计工具（/primer-design/，2026-11-11）：标题区、工具本体（页签、反应条件、输入、结果表格、
   错配热图、模板定位图）、怎么用、计算方法、常见问题。
   由区块 primer-tool 的 block.json 引用，只在工具页加载。标题区沿用产品中心的 .pl-hero、按钮沿用 .pd-btn（shop.css）。
   电脑上的尺寸用 calc(n * var(--r))，手机断点 <900 用 px。
   ========================================================= */

.prm-hero,.prm,.prm-doc{--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}

/* ---------- 标题区 ---------- */
.prm-hero .pl-hero-in{min-height:calc(2.9 * var(--r));padding-bottom:calc(.42 * var(--r))}
.prm-orb{width:calc(4.6 * var(--r));right:calc(-1.4 * var(--r));margin-top:calc(-2.3 * var(--r))}
.prm-intro{max-width:calc(7.4 * var(--r));margin-top:calc(.16 * var(--r));font-size:max(15px,calc(.19 * var(--r)));line-height:1.7;color:rgba(255,255,255,.82)}

/* ---------- 工具本体：白底大卡片 ---------- */
.prm{position:relative;padding:calc(.5 * var(--r)) 0 calc(.8 * var(--r));background:radial-gradient(45% 60% at 0 0,rgba(214,232,255,.5),transparent 70%),linear-gradient(#f5f8fd,#fff 80%);scroll-margin-top:calc(var(--hd-h) + 12px)}
.prm-app{scroll-margin-top:calc(var(--hd-h) + 16px);border-radius:calc(.22 * var(--r));background:#fff;box-shadow:0 24px 60px rgba(15,37,87,.09),0 0 0 1px rgba(15,37,87,.04)}

/* 页签 */
.prm-tabs{position:relative;display:flex;gap:calc(.08 * var(--r));padding:0 calc(.4 * var(--r));border-bottom:1px solid #e6eaf0;overflow-x:auto;scrollbar-width:none}
.prm-tabs::-webkit-scrollbar{display:none}
.prm-tab{flex:none;display:inline-flex;align-items:center;gap:calc(.1 * var(--r));height:max(58px,calc(.7 * var(--r)));padding:0 calc(.2 * var(--r)) 0 0;margin-right:calc(.14 * var(--r));font-size:max(15px,calc(.17 * var(--r)));color:#4a4f57;white-space:nowrap;transition:color .3s}
.prm-tab:hover{color:var(--blue-2)}
.prm-tab.on{color:var(--blue-deep);font-weight:600}
.prm-tab:focus-visible{outline:2px solid var(--blue-2);outline-offset:-4px;border-radius:10px}
.prm-tab-ic{flex:none;display:grid;place-items:center;width:max(28px,calc(.34 * var(--r)));height:max(28px,calc(.34 * var(--r)));border-radius:10px;color:var(--blue-2);background:#eef4fc;transition:color .35s,background .35s,transform .45s var(--ease-back),box-shadow .35s}
.prm-tab-ic svg{width:max(16px,calc(.2 * var(--r)));height:max(16px,calc(.2 * var(--r)))}
.prm-tab:hover .prm-tab-ic{transform:translateY(-2px)}
.prm-tab.on .prm-tab-ic{color:#fff;background:linear-gradient(135deg,#1f7ad8,#154297);box-shadow:0 6px 14px rgba(23,100,189,.28)}
.prm-tab-ink{position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:2px 2px 0 0;background:linear-gradient(90deg,var(--blue-2),var(--blue-deep));opacity:0;pointer-events:none;transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s}
.prm-tab-ink.ready{opacity:1}

/* 反应条件（折叠） */
.prm-cond{margin:calc(.28 * var(--r)) calc(.4 * var(--r)) 0;border-radius:14px;background:#f7fafe;box-shadow:inset 0 0 0 1px #e3ecf7}
.prm-cond summary{display:flex;align-items:center;gap:calc(.12 * var(--r));padding:max(11px,calc(.13 * var(--r))) calc(.2 * var(--r));font-size:max(14px,calc(.15 * var(--r)));list-style:none;cursor:pointer}
.prm-cond summary::-webkit-details-marker{display:none}
.prm-cond-ic{flex:none;display:grid;place-items:center;color:var(--blue-2)}
.prm-cond-ic svg{width:max(18px,calc(.2 * var(--r)));height:max(18px,calc(.2 * var(--r)))}
.prm-cond-k{flex:none;font-weight:600;color:var(--ink)}
.prm-cond-now{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--body)}
.prm-cond-edit{flex:none;color:var(--blue);text-decoration:underline;text-decoration-color:rgba(23,100,189,.35);text-underline-offset:3px}
.prm-cond summary:hover .prm-cond-edit{text-decoration-color:currentColor}
.prm-cond-edit .is-open,.prm-cond[open] .prm-cond-edit .is-closed{display:none}
.prm-cond[open] .prm-cond-edit .is-open{display:inline}
.prm-cond-body{padding:calc(.18 * var(--r)) calc(.2 * var(--r)) calc(.2 * var(--r));border-top:1px dashed #dbe5f1}
.prm-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px calc(.1 * var(--r));font-size:max(13px,calc(.14 * var(--r)));color:var(--muted)}
.prm-presets button{height:max(30px,calc(.34 * var(--r)));padding:0 max(14px,calc(.16 * var(--r)));border-radius:99px;font-size:max(13px,calc(.14 * var(--r)));color:var(--blue);background:#fff;box-shadow:inset 0 0 0 1px #c9d8ee;transition:background .3s,box-shadow .3s,transform .3s}
.prm-presets button:hover{background:#eef5fd;box-shadow:inset 0 0 0 1px var(--blue-2);transform:translateY(-1px)}
.prm-cond-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(.14 * var(--r)) calc(.16 * var(--r));margin-top:calc(.18 * var(--r))}
.prm-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.prm-f-wide{grid-column:span 2}
.prm-f>span{font-size:max(13px,calc(.14 * var(--r)));color:#4a5566}
.prm-f em{margin-left:4px;font-style:normal;color:#a2aab6}
.prm-f input,.prm-f select,.prm-sel select{width:100%;height:max(40px,calc(.44 * var(--r)));padding:0 12px;border:1px solid #dfe7f2;border-radius:10px;outline:none;background:#fff;font-family:var(--f-num),var(--f-cn);font-size:max(15px,calc(.16 * var(--r)));color:var(--ink);transition:border-color .3s,box-shadow .3s}
.prm-f select,.prm-sel select{font-family:var(--f-cn);font-size:max(14px,calc(.15 * var(--r)))}
.prm-f input:focus,.prm-f select:focus,.prm-sel select:focus{border-color:rgba(31,122,216,.55);box-shadow:0 0 0 4px rgba(31,122,216,.1)}

/* 输入区 */
.prm-panel{padding:calc(.3 * var(--r)) calc(.4 * var(--r)) 0}
.prm-l{display:block;font-size:max(15px,calc(.17 * var(--r)));font-weight:600;color:var(--ink)}
.prm-l small{margin-left:8px;font-size:max(13px,calc(.14 * var(--r)));font-weight:400;color:var(--muted)}
.prm-ta,.prm-in{display:block;width:100%;margin-top:calc(.1 * var(--r));padding:12px 14px;border:1px solid #dfe7f2;border-radius:14px;outline:none;background:#f7f9fc;font-family:var(--mono);font-size:14px;line-height:1.7;letter-spacing:.02em;color:var(--ink);caret-color:var(--blue);transition:background .3s,border-color .3s,box-shadow .3s}
.prm-ta{min-height:96px;resize:vertical}
.prm-in{height:50px;padding:0 14px}
.prm-ta::placeholder,.prm-in::placeholder{color:#a8b0bc}
.prm-ta:focus,.prm-in:focus{background:#fff;border-color:rgba(31,122,216,.55);box-shadow:0 0 0 4px rgba(31,122,216,.1)}
.prm-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:calc(.2 * var(--r))}
.prm-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px calc(.24 * var(--r));margin-top:calc(.16 * var(--r))}
.prm-acts{display:flex;align-items:center;gap:calc(.2 * var(--r));margin-left:auto}
.prm-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px calc(.24 * var(--r))}
.prm-link{font-size:max(14px,calc(.15 * var(--r)));color:var(--blue);text-decoration:underline;text-decoration-color:rgba(23,100,189,.35);text-underline-offset:3px;white-space:nowrap;transition:text-decoration-color .3s,color .3s}
.prm-link:hover{text-decoration-color:currentColor}
.prm-go{min-width:max(104px,calc(1.3 * var(--r)))}
.prm-chk{display:inline-flex;align-items:center;gap:8px;font-size:max(14px,calc(.15 * var(--r)));color:var(--body);cursor:pointer}
.prm-chk input{flex:none;width:16px;height:16px;accent-color:var(--blue)}
.prm-sel{display:inline-flex;align-items:center;gap:8px;font-size:max(14px,calc(.15 * var(--r)));color:var(--body);white-space:nowrap}
.prm-sel select{width:auto;height:36px;padding:0 8px}
.prm-file{position:relative;display:inline-flex}
.prm-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.prm-file span{display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1px dashed #a9c0e2;border-radius:99px;font-size:max(14px,calc(.15 * var(--r)));color:var(--blue);background:#fff;transition:background .3s,border-color .3s}
.prm-file:hover span,.prm-file input:focus-visible+span{border-color:var(--blue-2);background:#eef5fd}
.prm-more{margin-top:calc(.14 * var(--r))}
.prm-more summary{display:inline-block;font-size:max(14px,calc(.15 * var(--r)));color:var(--blue);cursor:pointer}
.prm-hint{font-size:max(13px,calc(.14 * var(--r)));line-height:1.7;color:var(--muted)}
.prm-hint.is-bad{color:#b3261e}
.prm-note{margin-top:calc(.14 * var(--r));font-size:max(13px,calc(.14 * var(--r)));line-height:1.7;color:var(--muted)}
.prm-note:empty{display:none}
.prm-err,.prm-warn,.prm-ok{margin-top:calc(.14 * var(--r));padding:10px 14px;border-radius:10px;font-size:max(14px,calc(.15 * var(--r)));line-height:1.6}
.prm-err{color:#b3261e;background:#fff1f0}
.prm-warn{color:#8a5300;background:#fff6e5}
.prm-ok{color:#0d7a55;background:#eaf7f1}
.prm-ok-s{font-size:13px;color:#0d7a55}
.prm-safe{display:flex;align-items:center;gap:8px;margin:calc(.3 * var(--r)) calc(.4 * var(--r)) 0;padding:calc(.16 * var(--r)) 0 calc(.2 * var(--r));border-top:1px solid #eef2f7;font-size:max(13px,calc(.14 * var(--r)));color:var(--muted)}
.prm-safe svg{flex:none;width:16px;height:16px;color:#11966a}
.prm-noscript{margin:0 calc(.4 * var(--r));padding-bottom:calc(.24 * var(--r));font-size:14px;color:#b3261e}

/* ---------- 结果 ---------- */
.prm-out:empty{display:none}
.prm-out{margin-top:calc(.3 * var(--r))}
.prm-out.is-in{animation:prmIn .6s var(--ease) both}
@keyframes prmIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.prm-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px calc(.2 * var(--r));margin-bottom:calc(.16 * var(--r));padding-top:calc(.26 * var(--r));border-top:1px dashed #e1e8f2}
.prm-cap p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-width:0}
.prm-cap b{font-size:max(16px,calc(.18 * var(--r)));font-weight:600;color:var(--ink)}
.prm-cap span{font-size:max(13px,calc(.14 * var(--r)));color:var(--muted)}
.prm-csv{flex:none;height:max(34px,calc(.38 * var(--r)));padding:0 max(16px,calc(.2 * var(--r)));font-size:max(14px,calc(.15 * var(--r)))}
.prm-block{margin-top:calc(.32 * var(--r))}
.prm-h3{margin-bottom:calc(.12 * var(--r));font-size:max(16px,calc(.19 * var(--r)));font-weight:600;color:var(--ink)}
.prm-block>.prm-ok{margin-top:0}

.prm-scroll{overflow-x:auto;border-radius:14px;box-shadow:inset 0 0 0 1px #e6ecf4;-webkit-overflow-scrolling:touch}
.prm-table{width:100%;min-width:820px;border-collapse:collapse;font-size:max(14px,calc(.15 * var(--r)));color:var(--body)}
.prm-table-s{min-width:540px}
.prm-table th{padding:11px 14px;text-align:left;font-size:max(13px,calc(.14 * var(--r)));font-weight:600;white-space:nowrap;color:#4a5566;background:#f3f7fc}
.prm-table th em{margin-left:3px;font-style:normal;font-weight:400;color:#9aa3af}
.prm-table td{padding:12px 14px;border-top:1px solid #edf1f6;vertical-align:top}
.prm-table tbody tr:not(.prm-detail):hover td{background:#fafcff}
.prm-table .num{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.prm-table .idx{width:40px;font-family:var(--f-num);color:var(--muted)}
.prm-table .name{min-width:5em;max-width:13em;font-weight:500;color:var(--ink);overflow-wrap:break-word}
.prm-table .seq{min-width:15em}
.prm-table .pair{min-width:19em}
.prm-table .act{text-align:right;white-space:nowrap}
.prm-table .tm b{font-size:max(16px,calc(.17 * var(--r)));font-weight:600;color:var(--navy)}
.prm-table .tm b.is-bad{color:#b3261e}
.prm-table small{display:block;margin-top:2px;font-family:var(--f-cn);font-size:12px;font-weight:400;white-space:normal;color:var(--muted)}
.prm-table code,.prm-dt code{font-family:var(--mono);font-size:13.5px;letter-spacing:.04em;word-break:break-all;color:var(--ink)}
.prm-dash{color:#b5bcc7}
.prm-dot{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%}
.prm-tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:12.5px;font-weight:500;white-space:nowrap}
.prm-tag.is-low{color:#5c6675;background:#eef1f5}
.prm-tag.is-mid{color:#8a5300;background:#ffedc9}
.prm-tag.is-high{color:#b3261e;background:#ffe1df}

/* Tm 计算：展开的修饰和反向互补 */
.prm-table .prm-detail td{padding:16px 18px 18px 54px;background:#f8fafd}
.prm-dt-seq{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.prm-dt-seq>span{flex:none;font-size:13px;color:var(--muted)}
.prm-dt-seq code{flex:1;min-width:12em}
.prm-dt-mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;margin-top:14px}
.prm-dt .prm-note{margin-top:12px}

/* 错配热图 */
.prm-mm-scroll{padding:4px 10px 12px}
.prm-mm{border-collapse:separate;border-spacing:3px}
.prm-mm caption{caption-side:top;padding:10px 4px 8px;text-align:left;font-size:max(13px,calc(.14 * var(--r)));line-height:1.6;color:var(--muted)}
.prm-mm thead th{min-width:46px;padding-bottom:2px;text-align:center;font-weight:400}
.prm-mm thead th i{display:block;font-family:var(--f-num);font-size:11px;font-style:normal;color:#9aa3af}
.prm-mm thead th b{display:block;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink)}
.prm-mm .corner{min-width:34px;vertical-align:bottom;font-family:var(--f-num);font-size:12px;color:#9aa3af}
.prm-mm tbody th{position:sticky;left:0;z-index:1;min-width:34px;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--navy);background:#fff}
.prm-mm td{padding:0}
.prm-mm .wc{height:34px;border-radius:8px;text-align:center;font-size:18px;line-height:34px;color:#b5bcc7;background:#f6f8fb}
.prm-cell{display:block;width:100%;height:34px;border-radius:8px;font-family:var(--f-num);font-size:13px;font-variant-numeric:tabular-nums;transition:transform .25s var(--ease),box-shadow .25s}
.prm-cell:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(15,37,87,.2)}
.prm-cell:focus-visible{outline:2px solid var(--blue-2);outline-offset:1px}
.prm-cell.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy)}
.prm-mm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px calc(.3 * var(--r));margin-top:calc(.16 * var(--r))}
.prm-legend{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.prm-legend i{width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,#eef4fc,#154297)}
.prm-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:max(14px,calc(.15 * var(--r)));color:var(--body)}
.prm-sum b{font-family:var(--f-num),var(--f-cn);font-size:max(16px,calc(.18 * var(--r)));font-weight:600;color:var(--navy)}
.prm-sum em{font-style:normal;color:var(--muted)}

/* 模板定位图 */
.prm-mapbox{padding:16px 18px 14px;border-radius:14px;background:#f7fafe;box-shadow:inset 0 0 0 1px #e3ecf7}
.prm-map{position:relative;height:64px}
.prm-map-line{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#b9c7da}
.prm-map-amp{position:absolute;top:0;bottom:0;border:dashed rgba(31,122,216,.55);border-width:0 1px;background:rgba(31,122,216,.12)}
.prm-map-s{position:absolute;height:12px;min-width:14px;background:var(--c);transition:transform .3s var(--ease)}
.prm-map-s:hover{transform:scaleY(1.35)}
.prm-map-s.is-f{top:12px;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%)}
.prm-map-s.is-r{bottom:12px;clip-path:polygon(7px 0,100% 0,100% 100%,7px 100%,0 50%)}
.prm-map-s.is-mm{opacity:.45}
.prm-map-ax{display:flex;justify-content:space-between;margin-top:4px;font-family:var(--f-num),var(--f-cn);font-size:12px;color:var(--muted)}
.prm-map-lg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13px;color:var(--body)}
.prm-map-lg span i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px}
.prm-map-lg .prm-map-k{flex-basis:100%;color:var(--muted)}
.prm-aln{display:inline-grid;grid-template-columns:auto auto auto;gap:0 8px;align-items:center;font-size:12px;line-height:1.35;white-space:nowrap;color:var(--muted)}
.prm-aln code{font-size:13px;letter-spacing:.06em;white-space:pre;word-break:normal;color:var(--body)}
.prm-aln .mid{line-height:1;color:#9aa3af}
.prm-aln mark{border-radius:2px;color:#b3261e;background:#ffe1df}

/* 引物对评估 */
.prm-po{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 10px;align-items:start}
.prm-po+.prm-po{margin-top:10px}
.prm-po-k{grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;font-family:var(--f-num);font-size:12px;font-weight:600;color:var(--blue);background:#e8f0fa}
.prm-po-v{font-family:var(--f-num),var(--f-cn);font-size:12.5px;color:var(--muted)}
.prm-po-v b{font-size:14px;font-weight:600;color:var(--navy)}
.prm-po.is-none{align-items:center;font-size:13px;color:var(--muted)}
.prm-po.is-none .prm-po-k{grid-row:auto;color:#9aa3af;background:#eef1f5}
.prm-pairs .flags{min-width:13em}
.prm-pairs .flags li{position:relative;padding-left:14px;font-size:13px;line-height:1.7;color:#8a5300}
.prm-pairs .flags li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:#e09a1a}
.prm-table+.prm-hint,.prm-scroll+.prm-hint{margin-top:10px}
.prm-hint+.prm-scroll{margin-top:8px}

/* ---------- 怎么用、计算方法、常见问题 ---------- */
.prm-doc{position:relative;padding:calc(.8 * var(--r)) 0;border-top:1px solid #e9eef5}
.prm-head{margin-bottom:calc(.34 * var(--r))}
.prm-en{font-family:"Helvetica Neue",Arial,sans-serif;font-size:max(12px,calc(.12 * var(--r)));font-weight:500;letter-spacing:.2em;color:var(--blue-2)}
.prm-h2{margin-top:calc(.06 * var(--r));font-size:max(24px,calc(.36 * var(--r)));font-weight:700;line-height:1.3;color:var(--ink)}

.prm-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(.24 * var(--r));list-style:none}
.prm-step{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;padding:calc(.28 * var(--r)) calc(.26 * var(--r)) calc(.24 * var(--r));border-radius:calc(.18 * var(--r));background:#fff;box-shadow:0 0 0 1px #e8edf4,0 10px 30px rgba(15,37,87,.05);transition:box-shadow .45s,transform .5s var(--ease)}
.prm-step::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#1f7ad8,#5fb2ff);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.prm-step:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(31,122,216,.2),0 22px 50px rgba(15,37,87,.1)}
.prm-step:hover::before{transform:none}
.prm-step-ic{display:grid;place-items:center;width:max(44px,calc(.52 * var(--r)));height:max(44px,calc(.52 * var(--r)));border-radius:15px;color:#fff;background:linear-gradient(135deg,#1f7ad8,#154297);box-shadow:0 10px 24px rgba(23,100,189,.28);transition:transform .5s var(--ease-back)}
.prm-step-ic svg{width:max(22px,calc(.28 * var(--r)));height:max(22px,calc(.28 * var(--r)))}
.prm-step:hover .prm-step-ic{transform:translateY(-3px) rotate(-5deg)}
.prm-step h3{margin-top:calc(.2 * var(--r));font-size:max(17px,calc(.2 * var(--r)));font-weight:600;line-height:1.45;color:var(--ink)}
.prm-step p{margin-top:calc(.08 * var(--r));font-size:max(14px,calc(.15 * var(--r)));line-height:1.75;color:var(--body)}
.prm-step-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:calc(.2 * var(--r));font-size:max(14px,calc(.15 * var(--r)));font-weight:600;color:var(--blue)}
.prm-step-go svg{width:16px;height:16px;transition:transform .45s var(--ease)}
.prm-step:hover .prm-step-go svg{transform:translateX(4px)}

.prm-method{background:#f7f9fc}
.prm-method-in{display:grid;grid-template-columns:minmax(0,1fr) calc(4.2 * var(--r));gap:calc(.6 * var(--r));align-items:start}
.prm-dl>div{display:grid;grid-template-columns:calc(1.6 * var(--r)) minmax(0,1fr);gap:calc(.2 * var(--r));padding:calc(.18 * var(--r)) 0;border-bottom:1px solid #e3e9f1}
.prm-dl>div:first-child{border-top:1px solid #e3e9f1}
.prm-dl dt{font-size:max(15px,calc(.17 * var(--r)));font-weight:600;line-height:1.7;color:var(--ink)}
.prm-dl dd{font-size:max(14px,calc(.16 * var(--r)));line-height:1.8;color:var(--body)}
.prm-disclaimer{margin-top:calc(.26 * var(--r));padding:14px 18px;border-radius:12px;font-size:max(14px,calc(.15 * var(--r)));line-height:1.7;color:#33507f;background:#e9f1fb}
.prm-refs{position:sticky;top:calc(var(--hd-h) + 24px);padding:calc(.28 * var(--r));border-radius:calc(.18 * var(--r));background:#fff;box-shadow:0 0 0 1px #e8edf4,0 10px 30px rgba(15,37,87,.05)}
.prm-refs h3{font-size:max(16px,calc(.18 * var(--r)));font-weight:600;color:var(--ink)}
.prm-refs ol{margin-top:6px;padding-left:20px}
.prm-refs li{margin-top:10px;font-size:13px;line-height:1.7;color:var(--body)}
.prm-refs li::marker{font-family:var(--f-num);color:var(--muted)}

.prm-q{border-bottom:1px solid #e6eaf0}
.prm-q:first-child{border-top:1px solid #e6eaf0}
.prm-q summary{display:flex;align-items:center;justify-content:space-between;gap:calc(.16 * var(--r));padding:max(16px,calc(.22 * var(--r))) 0;font-size:max(15px,calc(.18 * var(--r)));font-weight:600;line-height:1.55;color:var(--ink);list-style:none;cursor:pointer;transition:color .3s}
.prm-q summary::-webkit-details-marker{display:none}
.prm-q summary:hover{color:var(--blue-2)}
.prm-q summary>i{position:relative;flex:none;width:max(22px,calc(.28 * var(--r)));height:max(22px,calc(.28 * var(--r)));border-radius:50%;background:#eef4fc;transition:background .35s,transform .5s var(--ease)}
.prm-q summary>i::before,.prm-q summary>i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;margin:-.8px 0 0 -5px;border-radius:1px;background:var(--blue);transition:transform .45s var(--ease),background .35s}
.prm-q summary>i::after{transform:rotate(90deg)}
.prm-q[open] summary>i{background:var(--blue);transform:rotate(180deg)}
.prm-q[open] summary>i::before,.prm-q[open] summary>i::after{background:#fff}
.prm-q[open] summary>i::after{transform:none}
.prm-q p{max-width:calc(10 * var(--r));padding:0 calc(.5 * var(--r)) calc(.24 * var(--r)) 0;font-size:max(14px,calc(.16 * var(--r)));line-height:1.85;color:var(--body)}
.prm-cta{display:flex;align-items:center;justify-content:space-between;gap:calc(.2 * var(--r)) calc(.4 * var(--r));margin-top:calc(.5 * var(--r));padding:calc(.3 * var(--r)) calc(.36 * var(--r));border-radius:calc(.2 * var(--r));background:radial-gradient(50% 120% at 100% 0,rgba(214,232,255,.6),transparent 70%),linear-gradient(135deg,#f2f7fd,#fafcff);box-shadow:inset 0 0 0 1px #e3ecf7}
.prm-cta p{max-width:calc(8 * var(--r));font-size:max(15px,calc(.17 * var(--r)));line-height:1.75;color:var(--ink)}
.prm-cta-acts{flex:none;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 手机 ---------- */
@media (max-width:899px){
  .prm-hero .pl-hero-in{min-height:0}
  .prm{padding:20px 0 48px}
  .prm-app{border-radius:18px}
  .prm-tabs{gap:0;padding:0 14px}
  .prm-tab{height:52px;margin-right:18px;padding:0;font-size:15px}
  .prm-tab:last-of-type{margin-right:0}
  .prm-tab-ic{display:none}
  .prm-cond{margin:16px 14px 0}
  .prm-cond summary{flex-wrap:wrap;gap:6px 10px;padding:11px 12px;font-size:14px}
  .prm-cond-now{flex:1 1 100%;order:3;white-space:normal;font-size:13px}
  .prm-cond-edit{margin-left:auto}
  .prm-cond-body{padding:14px 12px 16px}
  .prm-cond-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
  .prm-f input,.prm-f select{height:42px;font-size:16px}
  .prm-panel{padding:20px 14px 0}
  .prm-l{font-size:15px}
  .prm-l small{display:block;margin:4px 0 0;font-size:13px;line-height:1.6}
  .prm-ta,.prm-in{margin-top:10px;font-size:16px;line-height:1.6}
  .prm-cols{grid-template-columns:1fr;gap:18px}
  .prm-row{margin-top:14px}
  .prm-acts{width:100%;gap:18px}
  .prm-go{flex:1;height:44px;margin-left:auto;max-width:180px}
  .prm-safe{margin:22px 14px 0;padding:14px 0 16px}
  .prm-out{margin-top:22px}
  .prm-cap{padding-top:20px}
  .prm-table .prm-detail td{padding:14px}
  .prm-dt{position:sticky;left:14px;width:calc(100vw - 86px);max-width:100%}
  .prm-dt-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prm-mapbox{padding:14px 12px 12px}
  .prm-legend i{width:80px}

  .prm-doc{padding:44px 0}
  .prm-head{margin-bottom:22px}
  .prm-h2{font-size:22px}
  .prm-steps{grid-template-columns:1fr;gap:14px}
  .prm-step{padding:20px 18px;border-radius:16px}
  .prm-step h3{margin-top:14px}
  .prm-step-go{padding-top:14px}
  .prm-method-in{grid-template-columns:1fr;gap:28px}
  .prm-dl>div{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .prm-refs{position:static;padding:20px 18px;border-radius:16px}
  .prm-q p{padding:0 0 18px}
  .prm-cta{flex-direction:column;align-items:flex-start;margin-top:32px;padding:22px 18px;border-radius:16px}
  .prm-cta-acts{width:100%}
  .prm-cta-acts .pd-btn{flex:1;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .prm-out.is-in{animation:none}
  .prm-tab-ic,.prm-tab-ink,.prm-step,.prm-step-ic,.prm-step-go svg,.prm-cell,.prm-map-s,.prm-presets button{transition:none!important}
}