:root{
  --brand:#0d6efd;
  --brand-dark:#0a58ca;
  --ok:#12b76a;
  --ok-bg:#e8f8f0;
  --warn:#f04438;
  --warn-bg:#fdecea;
  --text:#1f2430;
  --muted:#8a93a6;
  --line:#e9edf5;
  --bg:#f4f6fb;
  --card:#fff;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,sans-serif;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column;
}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:13px}
.center{text-align:center}

.page{flex:1;display:flex;flex-direction:column;max-width:640px;width:100%;margin:0 auto;padding:0 14px;padding-bottom:env(safe-area-inset-bottom)}

.hd{
  padding:22px 0 18px;text-align:center;
  background:linear-gradient(135deg,var(--brand) 0%,#3b8cff 100%);
  margin:0 -14px 16px;padding-left:14px;padding-right:14px;
  border-radius:0 0 22px 22px;
}
.hd-logo{color:#fff;font-size:21px;font-weight:700;letter-spacing:1px}
.hd-tip{color:rgba(255,255,255,.78);font-size:11px;letter-spacing:2px;margin-top:4px;text-transform:uppercase}

.main{flex:1}

.card{background:var(--card);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:0 2px 12px rgba(20,40,80,.06)}

/* ========== NFC 读取芯片动画（风格 D · 拟物贴近感应） ========== */
.scan-card{padding:26px 18px 20px;overflow:hidden}
.nfc-stage{position:relative;width:220px;height:218px;margin:0 auto 14px}

/* 3D 场景与手机 */
/* 说明：扫描阶段（默认状态）完全不依赖 3D 上下文与 backface-visibility，
   以兼容微信 X5 / 旧国产内核；仅当 JS 检测到支持时加 .has3d 启用翻面亮屏。 */
.scene3d{position:absolute;left:0;top:0;right:0;bottom:0}
.phone3d{
  position:absolute;left:50%;top:6px;width:104px;height:186px;margin-left:-52px;
}
/* 2D 兜底模式下的轻微呼吸浮动（3D 模式下避免干扰 preserve-3d 层级） */
/* 2D 兜底模式下的轻微呼吸浮动（3D 模式下避免干扰 preserve-3d 层级）
   关键：用 top 位移而非 transform，避免占用 transform 通道与 flip 翻面冲突 */
.scene3d:not(.has3d) .pback{animation:phoneFloat 3.4s ease-in-out 1 both}
@keyframes phoneFloat{0%,100%{top:0}50%{top:-3px}}
.scene3d.has3d{perspective:900px;-webkit-perspective:900px}
.phone3d.has3d{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .85s cubic-bezier(.45,.05,.3,1)}
/* 翻面：强制声明优先级并加 will-change，避免被内部元素的动画层覆盖 */
.phone3d.flip{transform:rotateY(180deg) !important;-webkit-transform:rotateY(180deg) !important;z-index:5}

/* 手机背面（拟物） */
.pback{
  position:absolute;left:0;top:0;right:0;bottom:0;border-radius:20px;
  background:linear-gradient(145deg,#f8fafd 0%,#e9eff9 42%,#dde6f3 100%);
  border:1px solid #c6d3e9;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -3px 6px rgba(96,120,160,.2),
    inset 2px 0 3px rgba(255,255,255,.65),
    inset -2px 0 4px rgba(120,145,185,.25),
    0 24px 42px -18px rgba(30,50,90,.5);
  overflow:hidden;
}
.pback::before{
  content:"";position:absolute;top:-45%;left:-35%;width:75%;height:190%;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 78%);
  transform:rotate(14deg);pointer-events:none;
}
.pcam{
  position:absolute;top:8px;left:8px;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(150deg,#f0f4fb,#dce5f1);
  border:1px solid #c9d6ea;
  box-shadow:inset 0 1.5px 2px rgba(255,255,255,.95),0 2px 6px rgba(30,50,90,.2);
}
.pcam i{position:absolute;border-radius:50%}
.pcam i:nth-child(1){top:4px;left:4px;width:14px;height:14px;
  background:radial-gradient(circle at 35% 32%,#5a7096 0%,#20304e 46%,#0a1425 100%);
  box-shadow:inset 0 1.5px 2px rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.45)}
.pcam i:nth-child(2){bottom:4px;right:4px;width:14px;height:14px;
  background:radial-gradient(circle at 35% 32%,#5a7096 0%,#20304e 46%,#0a1425 100%);
  box-shadow:inset 0 1.5px 2px rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.45)}
.pcam i:nth-child(3){top:5px;right:5px;width:8px;height:8px;
  background:radial-gradient(circle at 35% 32%,#fffbe8,#ecd98f 55%,#c8b25e)}
.pcam i:nth-child(4){bottom:6px;left:6px;width:6px;height:6px;background:#c4d0e4;box-shadow:inset 0 1px 1px rgba(255,255,255,.8)}
.pnzone{position:absolute;left:50%;top:20px;width:60px;height:52px;margin-left:-30px;z-index:3}
.pring,.pcore{position:absolute;left:50%;top:50%;border-radius:50%;-webkit-border-radius:50%}
/* 中心实心点：呼吸 */
.pcore{
  width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--brand);
  box-shadow:0 0 8px 2px rgba(13,110,253,.55);
  animation:corePulse 3.4s linear .3s 1 both;
}
@keyframes corePulse{0%{transform:scale(1);opacity:.85}22%{transform:scale(1.35);opacity:1}62%{transform:scale(1);opacity:.9}84%{transform:scale(1);opacity:.45}96%,100%{transform:scale(.7);opacity:0}}
/* 扩散圆圈：3.4s 单次播放，由小到大扩散，86% 起（标签移出）同步淡出 */
.pring{border:2px solid rgba(13,110,253,.55);opacity:0;width:10px;height:10px;margin:-5px 0 0 -5px}
.pring.p1{animation:pringOut 3.4s ease-out 1 both}
.pring.p2{border-color:rgba(91,141,255,.5);animation:pringOut 3.4s ease-out .2s 1 both}
.pring.p3{border-color:rgba(157,184,238,.45);animation:pringOut 3.4s ease-out .4s 1 both}
@keyframes pringOut{
  0%{transform:scale(.3);opacity:0}
  12%{opacity:.9}
  80%{transform:scale(4.4);opacity:.42}
  94%{transform:scale(4.6);opacity:.12}
  100%{transform:scale(4.6);opacity:0}
}
.plogo{
  position:absolute;bottom:12px;left:4px;right:4px;text-align:center;
  font-size:5px;line-height:1;font-weight:700;color:#a9b8d2;letter-spacing:.4px;
  white-space:nowrap;
}

/* 手机正面（翻面亮屏）：默认隐藏，仅在 .has3d 模式下参与 3D 翻转 */
.pfront{
  position:absolute;left:0;top:0;right:0;bottom:0;border-radius:20px;
  background:linear-gradient(165deg,#12203c 0%,#0d1830 100%);
  border:1px solid #2a3f68;
  box-shadow:inset 0 0 0 3px #050a17,0 24px 42px -18px rgba(8,16,40,.65);
  transform:rotateY(180deg);-webkit-transform:rotateY(180deg);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
  display:none;align-items:center;justify-content:center;
}
/* 3D 模式下两面互斥：翻面时背面必须让位，否则视觉上仍是背面 */
.scene3d.has3d .pback{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.phone3d.has3d .pfront{display:flex}
.pbar{position:absolute;top:0;left:0;right:0;height:22px;display:flex;align-items:center;justify-content:center}
.pbar i{width:40px;height:8px;border-radius:99px;background:#04091a}
.pmini{
  display:none;flex-direction:column;align-items:center;text-align:center;color:#fff;
  padding-top:10px;opacity:0;transition:opacity .4s .5s;
}
#loading:not(.outcome-bad) .pmini-ok{display:flex}
#loading.outcome-bad .pmini-bad{display:flex}
.phone3d.flip .pmini{opacity:1}
.pmini .pshield{width:38px;height:38px;margin-bottom:6px;display:block}
.pmini b{display:block;font-size:12px;letter-spacing:1px}
.pmini span{display:block;margin-top:5px;font-family:Menlo,Consolas,monospace;font-size:8.5px;color:#7ea6ff;letter-spacing:1px}
.pmini em{display:block;font-style:normal;margin-top:4px;font-size:8.5px;color:#8fa3c8}
.ps1{fill:rgba(52,211,153,.1);stroke:#34d399;stroke-width:2.4;stroke-linejoin:round;opacity:0}
.pmini-bad .ps1{fill:rgba(239,68,68,.1);stroke:#f87171}
.pmini-bad span,.pmini-bad em{color:#f3b0b0}
.phone3d.flip .ps1{animation:psIn .5s ease .45s forwards}
@keyframes psIn{to{opacity:1}}
.ps2{fill:none;stroke:#34d399;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.pmini-bad .ps2{stroke:#f87171}
.phone3d.flip .ps2{animation:psDraw .4s ease-out .6s forwards}
@keyframes psDraw{to{stroke-dashoffset:0}}

/* NFC 标签贴纸（拟物）：定位于手机背面上部（摄像头下方），与感应区重合 */
.nfcTag{
  position:absolute;left:50%;top:26px;width:110px;height:78px;margin-left:-55px;
  border-radius:14px;
  box-shadow:0 14px 16px -6px rgba(30,50,90,.38);
  z-index:1;
  animation:tagMove 3.4s cubic-bezier(.3,.7,.3,1) forwards;
}
/* 手机翻面亮屏时，标签与波纹粒子需强制隐藏（位于 3D 上下文之外，
   不会随翻面旋转，会悬浮遮挡亮屏内容）。
   注意：CSS 规则优先级低于 tagMove 动画，实际由 JS 在翻面前写内联样式，
   此处保留作为 JS 未执行时的兜底。 */
.phone3d.flip ~ .nfcTag,
.phone3d.flip ~ .nfc-wave,
.phone3d.flip ~ .nfc-particle{opacity:0;visibility:hidden}
/* 感应圆圈浮到标签之上（.pnzone 在 .pback 内，需提升整层） */
.pback{z-index:2}
.nfcTag svg{width:100%;height:100%;display:block;overflow:visible}
.tagshine{
  position:absolute;top:2px;bottom:2px;left:-50%;width:34%;border-radius:10px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.8),transparent);
  animation:shine 1.7s ease .85s 2 both;pointer-events:none;
}
@keyframes shine{0%{left:-50%}55%,100%{left:125%}}
.tant{animation:antPulse 1s ease-in-out .95s 2 both}
.tant.t2{animation-delay:1.15s}
@keyframes antPulse{
  0%,100%{opacity:.4;stroke-width:2.2}
  50%{opacity:1;stroke-width:3.4}
}
@keyframes tagMove{
  0%{transform:translateY(150px) rotate(8deg) scale(.92);opacity:0}
  16%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}
  30%{transform:translateY(7px)}
  44%{transform:translateY(0)}
  58%{transform:translateY(7px)}
  72%{transform:translateY(0)}
  86%{transform:translateY(3px);opacity:1}
  100%{transform:translateY(-120px) rotate(-7deg) scale(.94);opacity:0}
}
/* 标签位移动画改由 JS 按时间驱动（.is-jsmove），避免个别内核节流 CSS 关键帧
   导致标签停在起点不动；此处只保留初始隐藏态 */
.nfcTag.is-jsmove{animation:none;opacity:0}

/* 感应波纹与数据粒子（随标签上移，居中于标签芯片位置） */
.nfc-wave{
  position:absolute;left:50%;top:65px;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;border:2px solid rgba(13,110,253,.5);opacity:0;z-index:4;
}
.nfc-wave.s1{animation:contactWave 1.5s ease-out .9s 1 both}
.nfc-wave.s2{animation:contactWave 1.5s ease-out 1.4s 1 both}
.nfc-wave.s3{animation:contactWave 1.5s ease-out 1.9s 1 both}
@keyframes contactWave{0%{transform:scale(.4);opacity:.9}100%{transform:scale(4);opacity:0}}
.nfc-particle{
  position:absolute;left:50%;top:62px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 8px 2px rgba(13,110,253,.55);opacity:0;z-index:4;
}
.nfc-particle.q1{animation:flowUp .95s ease-in 1s 1 both}
.nfc-particle.q2{animation:flowUp .95s ease-in 1.25s 1 both}
.nfc-particle.q3{animation:flowUp .95s ease-in 1.5s 1 both}
.nfc-particle.q4{animation:flowUp .95s ease-in 1.75s 1 both}
@keyframes flowUp{
  0%{transform:translateY(9px) scale(.6);opacity:0}
  30%{opacity:1}
  70%{opacity:.9}
  100%{transform:translateY(-40px) scale(1.05);opacity:0}
}

.nfc-step{font-size:14px;font-weight:600;color:var(--text);letter-spacing:.5px;min-height:22px}
/* 阶段文案：5 段堆叠，CSS 动画控制显隐，不依赖 JS 定时器 */
.nfc-steps{position:relative;height:22px;margin:0}
.nfc-steps .nfc-step{position:absolute;left:0;right:0;top:0;visibility:hidden;margin:0}
.nfc-steps .nfc-step.on{visibility:visible}
/* 完成态：JS 在收尾时会移除 #loading.css-anim 停掉所有 CSS 动画，
   再给 .nfc-done 加 .on，避免动画关键帧压过样式表规则造成文案重叠 */
/* 阶段文案：5 段互斥显示（visibility 硬切换，杜绝重叠与插值淡入淡出） */
#loading.css-anim .nfc-steps .nfc-step[data-i]{animation:stepWin 3.4s steps(1,end) both;visibility:hidden}
#loading.css-anim .nfc-steps .nfc-step[data-i="0"]{animation-name:stepWin0}
#loading.css-anim .nfc-steps .nfc-step[data-i="1"]{animation-name:stepWin1}
#loading.css-anim .nfc-steps .nfc-step[data-i="2"]{animation-name:stepWin2}
#loading.css-anim .nfc-steps .nfc-step[data-i="3"]{animation-name:stepWin3}
#loading.css-anim .nfc-steps .nfc-step[data-i="4"]{animation-name:stepWin4}
/* steps(1,end) 逐帧切换；区间 = 进度阶段（0-16 / 16-38 / 38-62 / 62-85 / 85-100%） */
@keyframes stepWin0{0%{visibility:visible}16.99%{visibility:visible}17%{visibility:hidden}100%{visibility:hidden}}
@keyframes stepWin1{0%{visibility:hidden}17%{visibility:visible}38.99%{visibility:visible}39%{visibility:hidden}100%{visibility:hidden}}
@keyframes stepWin2{0%{visibility:hidden}39%{visibility:visible}62.99%{visibility:visible}63%{visibility:hidden}100%{visibility:hidden}}
@keyframes stepWin3{0%{visibility:hidden}63%{visibility:visible}85.99%{visibility:visible}86%{visibility:hidden}100%{visibility:hidden}}
@keyframes stepWin4{0%{visibility:hidden}86%{visibility:visible}100%{visibility:visible}}
@keyframes stepWin{0%{visibility:hidden}100%{visibility:visible}}
.nfc-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--brand),#3b8cff);transition:width .18s linear}
/* 动画能力探测用关键帧（JS 通过 document.getAnimations 检测 CSS 动画是否真的在跑） */
@keyframes __nfcProbe{from{opacity:0}to{opacity:0}}
/* CSS 驱动模式：进度条由 CSS 动画推进（合成器线程执行，不受 JS 节流影响） */
#loading.css-anim .nfc-bar i{width:0;animation:nfcFill 3.4s linear forwards}
@keyframes nfcFill{from{width:0}to{width:92%}}
/* 圆点点亮：5 段阶梯动画，各自独立延时，无需 JS 参与
   （挂在 #loading.css-anim 上，避免依赖 ~ 相邻兄弟选择器的兼容性） */
#loading.css-anim .nfc-dots i:nth-child(1){animation:dotOn .34s linear .5s both}
#loading.css-anim .nfc-dots i:nth-child(2){animation:dotOn .34s linear 1s both}
#loading.css-anim .nfc-dots i:nth-child(3){animation:dotOn .34s linear 2s both}
#loading.css-anim .nfc-dots i:nth-child(4){animation:dotOn .34s linear 2.6s both}
#loading.css-anim .nfc-dots i:nth-child(5){animation:dotOn .34s linear 3.1s both}
@keyframes dotOn{from{background:#d4dfee;width:7px;box-shadow:none}to{background:var(--brand);width:20px;box-shadow:0 0 8px rgba(13,110,253,.55)}}
.nfc-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.nfc-dots i{width:7px;height:7px;border-radius:99px;background:#d4dfee;transition:all .35s}
.nfc-dots i.on{background:var(--brand);width:20px;box-shadow:0 0 8px rgba(13,110,253,.55)}
.nfc-tip{font-size:11px;color:#b3bccd;margin-top:6px}
@media (prefers-reduced-motion:reduce){
  .nfc-wave,.nfc-particle,.pring,.pcore,.tagshine,.tant{animation:none!important}
  .nfcTag{display:none}
  .phone3d{transition:none!important}
  .pmini{opacity:1;transition:none}
  .ps2{stroke-dashoffset:0}
  .phone3d.flip .ps1,.phone3d.flip .ps2{animation:none;opacity:1}
}

.icon-ok,.icon-bad{
  width:66px;height:66px;line-height:66px;border-radius:50%;
  margin:6px auto 14px;font-size:32px;font-weight:700;color:#fff;
}
.icon-ok{background:var(--ok);box-shadow:0 6px 18px rgba(18,183,106,.28)}
.icon-bad{background:var(--warn);box-shadow:0 6px 18px rgba(240,68,56,.28)}
.title-ok{font-size:19px;color:var(--ok);font-weight:700;margin-bottom:6px}
.title-bad{font-size:19px;color:var(--warn);font-weight:700;margin-bottom:6px}
.uid-line{font-family:Menlo,Consolas,monospace;letter-spacing:1px;color:var(--muted);font-size:12px;margin-top:10px;word-break:break-all}

.banner{
  border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;
  display:flex;gap:10px;align-items:flex-start;font-size:14px;
}
.banner .b-ico{font-size:18px;line-height:1.3;flex:none}
.banner-ok{background:var(--ok-bg);color:#087443;border:1px solid #b9ecd3}
.banner-warn{background:var(--warn-bg);color:#b3261e;border:1px solid #f8c9c4;font-weight:600}
.banner-info{background:#eef4ff;color:#1a4fbf;border:1px solid #cadcff}

.sec-title{
  font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px;
  padding-left:10px;border-left:3px solid var(--brand);line-height:1.2;
}
.sec-title.warn{border-left-color:var(--warn)}

/* 参数行：左对齐布局，参数名定宽成列，名称与内容之间用冒号分隔 */
.kv{
  display:flex;justify-content:flex-start;align-items:flex-start;gap:0;
  padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;
}
.kv:last-child{border-bottom:0}
/* 参数名：定宽列 + 名称与冒号自动撑开
   （宽度按「4 个中文字 + 冒号」= 5 个字符宽，预留余量防折行） */
.kv .k{
  color:var(--muted);flex:none;
  width:5.6em;line-height:1.5;white-space:nowrap;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;
  -webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;
}
/* 名称文字作为独立 flex item 才能被 space-between 分开 */
.kv .k > span{flex:0 1 auto;min-width:0}
.kv .k > .colon{flex:none;margin-left:.1em}
/* 参数值：与参数名保持固定间距，超长自动换行 */
.kv .v{
  flex:1;min-width:0;text-align:left;word-break:break-word;overflow-wrap:anywhere;
  font-weight:500;line-height:1.5;padding-left:.7em;
}
/* 窄屏：缩小字号与列宽，但仍保持「名称：内容」列对齐，不堆叠不折行 */
@media (max-width:360px){
  .kv{font-size:12.5px}
  .kv .k{width:5.4em}
}

.p-img{width:100%;border-radius:10px;margin-bottom:12px;display:block;background:var(--bg)}
.count-wrap{display:flex;gap:10px;margin-bottom:14px}
.count-item{flex:1;background:var(--card);border-radius:var(--radius);padding:14px 10px;text-align:center;box-shadow:0 2px 12px rgba(20,40,80,.06)}
.count-num{font-size:22px;font-weight:700;color:var(--brand);line-height:1.2}
.count-num.warn{color:var(--warn)}
.count-label{font-size:12px;color:var(--muted);margin-top:2px}

.trace-item{padding:12px 0;border-bottom:1px dashed var(--line)}
.trace-item:last-child{border-bottom:0;padding-bottom:0}
.trace-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.trace-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.trace-name{font-weight:600;font-size:14px}
/* 追溯节点右侧日期：仅在标题未写日期时才出现，弱化显示避免抢视觉 */
.trace-date{margin-left:auto;font-size:11px;color:#c2cad8;flex:none;padding-left:8px}
.trace-body{color:#4a5266;font-size:13.5px;white-space:pre-line;word-break:break-word;padding-left:16px}
.trace-imgs{display:flex;gap:8px;flex-wrap:wrap;padding-left:16px;margin-top:8px}
.trace-imgs img{width:calc(33.33% - 6px);border-radius:8px;display:block;background:var(--bg);cursor:pointer}

.timeline{position:relative;padding-left:18px}
.timeline::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:8px 0;font-size:13px}
.tl-item::before{content:"";position:absolute;left:-18px;top:14px;width:8px;height:8px;border-radius:50%;background:#c6cfdf;border:2px solid #fff}
.tl-item.first::before{background:var(--ok)}
.tl-time{font-weight:600;color:var(--text)}
.tl-meta{color:var(--muted);font-size:12px;margin-top:2px}
.tl-badge{display:inline-block;font-size:11px;color:#fff;background:var(--ok);border-radius:4px;padding:0 6px;margin-left:6px;vertical-align:1px}

/* 历史记录分页 */
.pager{display:none;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.pg-btn{
  width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--text);font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s,opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.pg-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pg-btn:disabled{opacity:.35;cursor:default}
.pg-num{font-size:13px;color:var(--muted);min-width:44px;text-align:center}

.m-ft{margin-top:6px}
.m-company{font-weight:600;font-size:14px;margin-bottom:8px}
.m-intro{color:#5a6376;font-size:13px;white-space:pre-line;word-break:break-word}
.m-logo{height:34px;margin-bottom:10px;display:block}

.ft{padding:18px 0 calc(22px + env(safe-area-inset-bottom));text-align:center;color:#a6aebf;font-size:12px;line-height:1.7}
.ft-line{margin:0}

.viewer{
  position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.9);z-index:99;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.viewer img{max-width:100%;max-height:100%;border-radius:8px}

@media (min-width:768px){
  body{font-size:15px}
  .page{max-width:720px;padding:0 20px}
  .hd{margin:0 -20px 20px;padding:30px 20px 24px}
  .hd-logo{font-size:24px}
  .card{padding:22px}
  .count-num{font-size:26px}
}

.manual-row{display:flex;gap:10px;margin-top:14px}
.manual-input{
  flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--text);font-size:16px;font-family:Menlo,Consolas,monospace;
  letter-spacing:2px;text-transform:uppercase;outline:none;
}
.manual-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(13,110,253,.12)}
.btn-query{
  height:44px;padding:0 20px;border:0;border-radius:10px;background:var(--brand);color:#fff;
  font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.btn-query:active{background:var(--brand-dark)}
.manual-tip{margin-top:10px;min-height:18px;font-size:13px;color:var(--warn)}