/* ============================================================
   绘梦山河 & 荒序 · AI真人肖像合作系统
   主题：未来科技 × 废土（NEON WASTELAND）
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --bg:#0c0a08;            /* 炭黑暖底 */
  --bg2:#17120d;           /* 废土深褐 */
  --card:#1c1610;          /* 面板 */
  --card2:#2a2118;         /* 次级面板 */
  --line:#4a3d2b;          /* 锈线 */
  --line2:#6e5b41;         /* 亮锈线 */
  --text:#ede4d3;          /* 暖白 */
  --muted:#a1917c;         /* 土灰 */
  --primary:#00e5b0;       /* 科技青 */
  --primary-d:#00b98e;     /* 科技青深 */
  --ok:#7cc97a;            /* 废土绿 */
  --warn:#f5a623;          /* 琥珀 */
  --danger:#e05a3d;        /* 铁锈红 */
  --rust:#c97b3d;          /* 铁锈橙 */
  --radius:12px;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
}
html,body { height:100%; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(201,123,61,.10), transparent 60%),
    radial-gradient(900px 420px at -10% 20%, rgba(0,229,176,.06), transparent 55%),
    linear-gradient(165deg,#0c0a08 0%,#17120d 55%,#0e0b08 100%);
  color:var(--text);
  padding-bottom:env(safe-area-inset-bottom);
  overflow-x:hidden;
}
/* 背景网格 + 扫描线（氛围层） */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(0,229,176,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,176,.045) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 75%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 75%);
}
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px);
}
#app { position:relative; z-index:2; max-width:520px; margin:0 auto; padding:20px 16px calc(36px + env(safe-area-inset-bottom)); }

/* HUD 四角框（未来科技装饰） */
.hud-frame { position:fixed; inset:0; pointer-events:none; z-index:3; }
.hud-frame i {
  position:absolute; width:22px; height:22px; border:2px solid rgba(0,229,176,.5);
  filter:drop-shadow(0 0 4px rgba(0,229,176,.35));
}
.hud-frame i:nth-child(1){ top:10px; left:10px; border-right:none; border-bottom:none; }
.hud-frame i:nth-child(2){ top:10px; right:10px; border-left:none; border-bottom:none; }
.hud-frame i:nth-child(3){ bottom:10px; left:10px; border-right:none; border-top:none; }
.hud-frame i:nth-child(4){ bottom:10px; right:10px; border-left:none; border-top:none; }

/* ---------------- 顶栏 ---------------- */
.topbar { position:relative; padding:6px 4px 18px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.topbar::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:linear-gradient(90deg, var(--primary), transparent 60%);
}
.brand-row { display:flex; align-items:center; gap:12px; }
.brand-glyph {
  flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#0c0a08; background:linear-gradient(160deg,var(--primary),#00b98e);
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  text-shadow:none; box-shadow:0 0 18px rgba(0,229,176,.35);
}
.brand-text h1 {
  font-size:20px; font-weight:800; letter-spacing:2px; color:var(--text);
  text-shadow:0 0 12px rgba(0,229,176,.35);
}
.brand-text p { font-size:12px; color:var(--muted); margin-top:3px; letter-spacing:1px; }
.sys-line {
  margin-top:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.5px;
}
.sys-line .dot {
  width:8px; height:8px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 8px var(--ok); animation:blink 2s infinite;
}
.sys-line .sep { color:var(--line2); }
.mono { font-family:var(--mono); }

/* ---------------- 步骤条（终端式） ---------------- */
.steps { display:flex; gap:6px; margin-bottom:18px; }
.step {
  flex:1; position:relative; text-align:center; padding:9px 2px 7px;
  background:var(--card); border:1px solid var(--line); clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.step i {
  display:block; width:22px; height:22px; line-height:22px; margin:0 auto 4px;
  border-radius:50%; font-style:normal; font-size:11px; font-family:var(--mono);
  background:var(--card2); color:var(--muted); border:1px solid var(--line2);
}
.step span { font-size:11px; color:var(--muted); letter-spacing:1px; }
.step.on { border-color:var(--primary); background:rgba(0,229,176,.08); box-shadow:0 0 14px rgba(0,229,176,.15) inset; }
.step.on::before {
  content:""; position:absolute; top:-1px; left:-1px; width:14px; height:14px;
  border-top:2px solid var(--primary); border-left:2px solid var(--primary);
}
.step.on i { background:var(--primary); color:#0c0a08; border-color:var(--primary); box-shadow:0 0 10px rgba(0,229,176,.5); }
.step.on span { color:var(--text); }
.step.done i { background:var(--ok); color:#0c0a08; border-color:var(--ok); }
.step.done span { color:var(--ok); }

/* ---------------- 面板与表单 ---------------- */
.panel.hidden, .hidden { display:none !important; }
.card {
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; overflow:hidden;
}
.card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--rust),var(--warn) 40%,transparent 85%);
}
.card.center { text-align:center; }
.card label { display:block; font-size:12px; color:var(--rust); margin:14px 0 6px; letter-spacing:1.5px; font-weight:600; }
.card label:first-child { margin-top:0; }
.card input, .card textarea, .card select {
  width:100%; background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  color:var(--text); font-size:16px; padding:12px 14px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.card select { appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--primary) 50%),linear-gradient(135deg,var(--primary) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; }
.card select option { background:var(--card); color:var(--text); }
.card input:focus, .card textarea:focus, .card select:focus {
  border-color:var(--primary); box-shadow:0 0 0 1px rgba(0,229,176,.25), 0 0 14px rgba(0,229,176,.12);
}
.card textarea { resize:vertical; }
.hint { font-size:12px; color:var(--muted); margin-top:14px; line-height:1.6; }
.hint b { color:var(--warn); }
.hint.ok-hint { color:var(--ok); }
.hint.warn-hint { color:var(--warn); }
.hint.err-hint { color:var(--danger); }

/* ---------------- 苹果/鸿蒙：页内拍身份证取景层（绝对定位，跨 webview 稳） ---------------- */
.idcam-layer {
  position:fixed; left:0; top:0; right:0; bottom:0;
  width:100vw; height:100vh; height:100dvh;
  background:#000; z-index:9999; overflow:hidden;
}
.idcam-layer.hidden { display:none; }
.idcam-layer video {
  position:absolute; left:0; top:0; width:100%; height:100%;
  object-fit:cover;
}
.idcam-tip-top {
  position:absolute; left:0; right:0; top:14px; text-align:center;
  color:#fff; font-size:14px; padding:8px 16px; z-index:10;
  text-shadow:0 1px 4px rgba(0,0,0,.9); pointer-events:none;
}
.idcam-guide {
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  width:min(86vw, 420px); aspect-ratio:1.585/1;   /* 身份证标准比例 */
  border-radius:10px; pointer-events:none; z-index:5;
}
.idcam-guide i { position:absolute; width:30px; height:30px; border:3px solid rgba(0,229,176,.95); }
.idcam-guide i:nth-child(1) { left:-2px; top:-2px; border-right:none; border-bottom:none; border-radius:10px 0 0 0; }
.idcam-guide i:nth-child(2) { right:-2px; top:-2px; border-left:none; border-bottom:none; border-radius:0 10px 0 0; }
.idcam-guide i:nth-child(3) { left:-2px; bottom:-2px; border-right:none; border-top:none; border-radius:0 0 0 10px; }
.idcam-guide i:nth-child(4) { right:-2px; bottom:-2px; border-left:none; border-top:none; border-radius:0 0 10px 0; }
.idcam-ctrl {
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  min-height:140px; padding:22px 28px 28px;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-sizing:border-box;
}
.idcam-btn-cancel {
  flex:0 0 auto; min-width:80px; padding:12px 18px;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4);
  border-radius:24px; font-size:15px; backdrop-filter:blur(6px);
  -webkit-tap-highlight-color:transparent;
}
.idcam-spacer { flex:0 0 80px; }
#idcam-shot {
  flex:0 0 auto; width:80px; height:80px; border-radius:50%;
  border:5px solid #fff; background:transparent; padding:0;
  box-shadow:0 0 0 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; cursor:pointer;
}
#idcam-shot:active { transform:scale(.92); }
.idcam-shot-inner {
  display:block; width:58px; height:58px; border-radius:50%;
  background:#fff; box-shadow:inset 0 0 0 4px rgba(0,0,0,.08);
}
#idcam-shot:active .idcam-shot-inner { background:rgba(255,255,255,.7); }
.idcam-mask {
  position:absolute; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.82); color:#fff; font-size:15px; letter-spacing:.5px;
}
.idcam-mask.hidden { display:none; }

/* ---------------- 视频步：录制后双按钮并排 ---------------- */
.ctrl.ctrl-2col { display:flex; gap:10px; margin-top:12px; }
.ctrl.ctrl-2col .btn { flex:1; width:auto; }

/* ---------------- 三面照：帮拍/自拍模式切换 ---------------- */
.mode-switch { display:flex; gap:8px; margin-bottom:12px; }
.pm-btn {
  flex:1; padding:11px 8px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line2); background:transparent; color:var(--muted); font-size:13px;
  -webkit-tap-highlight-color:transparent;
}
.pm-btn.on {
  border-color:var(--primary); color:var(--primary);
  background:rgba(0,229,176,.08); font-weight:600;
}
#cam-photo.mirror { transform:scaleX(-1); } /* 前置自拍取景镜像（仅显示，成片不镜像） */

/* ---------------- iPhone+微信：Safari 引导横幅 ---------------- */
.safari-tip {
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px; padding:12px 14px;
  background:rgba(255,193,7,.10); border:1px solid rgba(255,193,7,.35);
  border-radius:10px;
}
.safari-tip.hidden { display:none; }
.st-text { flex:1; font-size:13px; line-height:1.7; color:var(--text); }
.st-text b { color:var(--warn); }
#st-close {
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line2); background:transparent; color:var(--muted);
  font-size:13px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}

/* ---------------- 按钮 ---------------- */
.btn {
  display:block; width:100%; border:none; border-radius:8px; padding:14px;
  font-size:16px; font-weight:700; letter-spacing:2px; color:var(--text); background:var(--card2);
  border:1px solid var(--line2); cursor:pointer; margin-top:12px;
  position:relative; overflow:hidden; transition:transform .05s;
}
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn:not(:disabled):active { transform:translateY(1px); }
.btn.primary {
  background:linear-gradient(160deg,var(--primary),var(--primary-d)); border-color:transparent; color:#07130f;
  box-shadow:0 0 16px rgba(0,229,176,.25);
}
.btn.primary:not(:disabled):active { background:linear-gradient(160deg,var(--primary-d),#00997a); }
.btn.shoot { background:var(--ok); border-color:transparent; color:#0a150a; font-size:17px; padding:16px; box-shadow:0 0 14px rgba(124,201,122,.3); }
.btn.record { background:var(--danger); border-color:transparent; color:#fff; font-size:17px; padding:16px; box-shadow:0 0 14px rgba(224,90,61,.3); }
.btn.ghost { background:transparent; border-color:var(--line2); color:var(--muted); }
.btn.wide { width:100%; margin-top:14px; }
.btn.small { padding:10px; font-size:14px; margin-top:0; letter-spacing:1px; }
.btn.ghost.small { flex:1; }
.btn.primary.small { flex:1; }

/* ---------------- 授权声明视频（自拍+提词器） ---------------- */
.camera-wrap.video-cam video { object-fit:cover; transform:scaleX(1); }
.consent-overlay {
  position:absolute; left:10px; right:10px; bottom:14px; z-index:5;
  background:rgba(8,6,4,.78); border:1px solid var(--warn);
  border-radius:10px; padding:10px 14px; backdrop-filter:blur(2px);
}
.consent-tag { font-size:12px; color:var(--warn); letter-spacing:1px; margin-bottom:6px; font-weight:600; }
.consent-text {
  font-size:16px; line-height:1.7; color:#fff; font-weight:500;
  text-align:center; letter-spacing:.5px;
}
.consent-text .hl { color:var(--warn); font-weight:700; }
.rec-badge {
  position:absolute; top:12px; left:12px; color:#fff; background:var(--danger);
  font-size:12px; padding:4px 10px; border-radius:6px; animation:blink 1s infinite;
}
.rec-bar { height:8px; background:var(--card2); border-radius:4px; margin-top:14px; overflow:hidden; border:1px solid var(--line); }
.rec-progress { height:100%; width:0%; background:linear-gradient(90deg,var(--danger),var(--warn)); border-radius:4px; transition:width .1s linear; }
.rec-time { text-align:center; font-size:22px; font-variant-numeric:tabular-nums; margin-top:8px; font-weight:600; font-family:var(--mono); }
.video-preview { margin-top:12px; }
.video-preview video { width:100%; border-radius:10px; background:#000; border:1px solid var(--line2); }

/* ---------------- 拍照舞台 ---------------- */
.camera-wrap {
  position:relative; width:100%; aspect-ratio:3/4; border-radius:var(--radius);
  overflow:hidden; background:#000; border:1px solid var(--line2);
}
.camera-wrap::after {
  content:""; position:absolute; left:0; right:0; top:0; height:34px;
  background:linear-gradient(180deg, rgba(0,229,176,.16), transparent);
  animation:scan 4.5s linear infinite; pointer-events:none;
}
@keyframes scan { 0%{top:-10%;} 100%{top:110%;} }
.camera-wrap video { width:100%; height:100%; object-fit:cover; }

/* 构图引导（人物轮廓线图） */
.guide {
  position:absolute; inset:0; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  color:rgba(237,228,211,.92);
}
.pose-reference {
  display:block; aspect-ratio:1; background-image:url('assets/face-guides-v47.png');
  background-repeat:no-repeat; background-size:300% 100%; background-position:0% center;
  mix-blend-mode:screen;
  transform:translateX(var(--pose-offset, 0%));
}
.guide-portrait { width:100%; max-width:520px; opacity:.76; }
.guide-arrow { position:absolute; top:43%; font-size:38px; color:#ffc55c; text-shadow:0 1px 4px #000; }
.guide[data-direction="right"] .guide-arrow { right:6%; }
.guide[data-direction="left"] .guide-arrow { left:6%; }
.guide[data-direction="front"] .guide-arrow { display:none; }
.guide-angle {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  background:rgba(12,10,8,.8); border:1px solid var(--primary);
  color:var(--primary); font-size:12px; padding:5px 14px; border-radius:2px;
  letter-spacing:2px; font-family:var(--mono);
}
.guide-hint {
  position:absolute; bottom:10px; left:10px; right:10px; text-align:center;
  font-size:12px; line-height:1.6; color:var(--text); background:rgba(0,0,0,.72);
  padding:7px 8px; border-radius:4px;
}

.cam-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.cam-flash.go { animation:flash .18s ease-out; }
@keyframes flash { 0%{opacity:.9;} 100%{opacity:0;} }

/* ---------------- 三面缩略图 ---------------- */
.shot-strip { display:flex; gap:10px; margin-top:14px; }
.shot-cell { flex:1; text-align:center; cursor:pointer; }
.shot-thumb {
  position:relative; aspect-ratio:3/4; border-radius:8px; background:var(--card2);
  border:2px dashed var(--line2); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.shot-thumb span { font-size:12px; color:var(--muted); }
.shot-thumb .pose-reference { position:absolute; width:100%; top:6%; opacity:.9; }
.shot-thumb .pose-caption { position:absolute; bottom:8px; left:0; right:0; color:var(--text); font-size:11px; }
.shot-cell.ok .pose-reference, .shot-cell.ok .pose-caption { display:none; }
.shot-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shot-cell em { display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:6px; }
.shot-cell.ok .shot-thumb { border-color:var(--ok); border-style:solid; }
.shot-cell.ok em { color:var(--ok); }
.shot-cell.cur .shot-thumb { border-color:var(--primary); box-shadow:0 0 10px rgba(0,229,176,.2); }
.shot-cell.cur em { color:var(--text); }

/* ---------------- 步骤提示 ---------------- */
.step-msg { text-align:center; font-size:13px; color:var(--muted); margin-top:12px; }
.step-msg.warn { color:var(--warn); font-weight:600; }

/* ---------------- 提交 ---------------- */
.upload-state { font-size:clamp(17px,4.6vw,22px); font-weight:700; margin-bottom:8px; color:var(--primary); }
.upload-detail { font-size:13px; color:var(--muted); margin-bottom:24px; }
.upload-bar { height:14px; background:var(--card2); border-radius:7px; overflow:hidden; border:1px solid var(--line); }
#upload-progress { height:100%; width:0%; background:linear-gradient(90deg,var(--primary),#8bd5b3); transition:width .25s linear; position:relative; overflow:hidden; }
.upload-totals { display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; margin:12px 0; font-size:13px; font-variant-numeric:tabular-nums; }
.upload-totals strong { font-size:26px; color:var(--primary); white-space:nowrap; }
.upload-secondary { color:var(--muted); font-size:12px; }
.upload-eta { margin-top:20px; padding:12px 10px; font-size:13px; line-height:1.7; color:var(--text); background:rgba(0,229,176,.06); border:1px solid var(--line); border-radius:8px; }
.upload-orbit { width:64px; height:64px; margin:4px auto 20px; display:grid; place-items:center; position:relative; color:var(--primary); }
.upload-orbit span { font-size:32px; line-height:1; }
.upload-orbit::before { content:''; position:absolute; inset:0; border:3px solid rgba(0,229,176,.15); border-top-color:var(--primary); border-right-color:var(--primary); border-radius:50%; }
[data-phase="sending"] .upload-orbit::before, [data-phase="processing"] .upload-orbit::before { animation:upload-spin 1.1s linear infinite; }
[data-phase="sending"] .upload-orbit span { animation:upload-lift 1.2s ease-in-out infinite; }
[data-phase="sending"] #upload-progress::after, [data-phase="processing"] #upload-progress::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg,transparent 0 12px,rgba(255,255,255,.28) 12px 24px); background-size:53px 100%; animation:upload-flow 1s linear infinite; }
[data-phase="done"] .upload-orbit span, [data-phase="error"] .upload-orbit span { font-size:0; }
[data-phase="done"] .upload-orbit span::after { content:'✓'; font-size:32px; }
[data-phase="error"] .upload-orbit span::after { content:'!'; font-size:32px; color:var(--warn); }
[data-phase="error"] .upload-state { color:var(--warn); }
@keyframes upload-spin { to { transform:rotate(360deg); } }
@keyframes upload-lift { 50% { transform:translateY(-5px); } }
@keyframes upload-flow { to { background-position:53px 0; } }
@media (prefers-reduced-motion:reduce) {
  #upload-card *, #upload-card *::before, #upload-card *::after { animation:none !important; transition:none !important; }
}
.upload-result { margin-top:20px; text-align:center; }
.upload-result.ok h3 { color:var(--ok); font-size:20px; margin-bottom:10px; text-shadow:0 0 12px rgba(124,201,122,.4); }
.upload-result h3 { color:var(--danger); font-size:20px; margin-bottom:10px; }
.upload-result p { font-size:14px; color:var(--muted); margin-bottom:6px; word-break:break-all; }
.upload-result a { color:var(--primary); text-decoration:underline; word-break:break-all; }

/* ---------------- 身份证拍照登记 ---------------- */
.idcard-grid { display:flex; gap:10px; margin-top:8px; }
.idcard-slot { flex:1; text-align:center; cursor:pointer; }
.idcard-thumb {
  position:relative; aspect-ratio:4/2.6; border-radius:8px; background:var(--card2);
  border:2px dashed var(--line2); display:flex; align-items:center; justify-content:center;
  overflow:hidden; font-size:13px; color:var(--muted);
}
.idcard-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.idcard-slot em { display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:6px; }
.idcard-slot.ok .idcard-thumb { border-color:var(--ok); border-style:solid; }
.idcard-slot.ok em { color:var(--ok); }

/* ---------------- 电子合同 ---------------- */
.contract-box {
  margin-top:8px; position:relative;
  background:linear-gradient(165deg,#241d14,#17120d);
  border:1px solid var(--rust); border-radius:8px; padding:14px 16px; overflow:hidden;
}
.contract-box::before {
  content:"授权协议 · CONTRACT"; position:absolute; top:6px; right:10px;
  font-family:var(--mono); font-size:9px; letter-spacing:2px; color:rgba(201,123,61,.6);
}
.contract-text { font-size:15px; line-height:2; color:var(--text); text-align:justify; margin-top:8px; }
.contract-text .hl { color:var(--warn); font-weight:700; }

/* ---------------- 签字板 ---------------- */
.sign-wrap { margin-top:8px; }
.sign-wrap canvas {
  width:100%; height:auto; background:#e9e0d2; border:1px dashed var(--line2);
  border-radius:8px; touch-action:none; display:block;
}
.sign-ctrl { display:flex; gap:10px; margin-top:10px; }

/* ---------------- 弹层 ---------------- */
.modal {
  position:fixed; inset:0; background:rgba(8,6,4,.85); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(2px);
}
.modal-box {
  position:relative; background:var(--card); border:1px solid var(--line2); border-radius:var(--radius);
  padding:24px; max-width:360px; width:100%; text-align:center; overflow:hidden;
}
.modal-box::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--primary),transparent 70%);
}
.modal-box.wide { max-width:480px; }
.modal-box h3 { font-size:17px; margin-bottom:10px; letter-spacing:1px; }
.modal-box p { font-size:13px; color:var(--muted); margin-bottom:8px; line-height:1.6; word-break:break-all; }
.modal-tip { font-size:12px !important; }
.idcard-cam {
  position:relative; width:100%; aspect-ratio:4/3; border-radius:8px; overflow:hidden;
  background:#000; border:1px solid var(--line2); margin:10px 0;
}
.idcard-cam video { width:100%; height:100%; object-fit:cover; }

/* 通用动画 */
@keyframes blink { 50%{opacity:.35;} }
/* 镜头选择器（让用户从所有后置镜头中点选主摄） */
.lens-picker { display:flex; gap:8px; overflow-x:auto; padding:8px 0 4px; }
.lens-picker.hidden { display:none; }
.lens-opt {
  flex:0 0 auto; min-width:74px; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--line2); color:var(--text);
  font-size:12px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.lens-opt b { font-size:14px; color:var(--text); }
.lens-opt span { font-size:11px; color:var(--muted); }
.lens-opt.on { background:var(--primary-d); border-color:var(--primary); }
.lens-opt.on span { color:#fff; }
/* 镜头切换遮罩 */
.lens-mask {
  position:absolute; inset:0; z-index:20; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; letter-spacing:1px; border-radius:inherit;
}
.lens-mask.hidden { display:none; }
.cam-warn {
  margin:0 0 10px; padding:10px 12px; border-radius:8px;
  background:rgba(255,170,40,.12); border:1px solid rgba(255,170,40,.5); color:#ffb04c; font-size:13px;
}
.cam-warn.hidden { display:none; }

/* Actual captured dimensions, independent of compressed file size. */
.photo-meta { display:block; margin-top:5px; font-size:10px; color:var(--muted); line-height:1.5; overflow-wrap:anywhere; }


/* Keep framing and shutter together within the mobile viewport. */
#panel-photo { scroll-margin-top:10px; }
#panel-photo .photo-viewfinder { width:min(100%, 252px, 40vh); width:min(100%, 252px, 40svh); margin:0 auto; }
#panel-photo .photo-shutter { width:min(100%, 320px); margin:10px auto 0; }
#panel-photo .photo-shutter .btn { width:100%; min-height:48px; padding:12px; font-size:17px; }
#panel-photo .guide-angle { white-space:nowrap; font-size:11px; letter-spacing:0; padding:4px 8px; top:8px; }
#panel-photo .guide-hint { font-size:10px; left:5px; right:5px; bottom:5px; padding:5px 3px; }
#panel-photo .guide-arrow { font-size:28px; }
#panel-photo .shot-strip { max-width:320px; margin:12px auto 0; gap:10px; }
#panel-photo .shot-cell { min-width:0; }
#panel-photo .shot-thumb { max-width:76px; margin:0 auto; width:100%; }
#panel-photo .pose-caption { display:none; }
#panel-photo .photo-meta { font-size:9px; }
#photo-msg:empty { display:none; }