:root {
  --bg: #05070f;
  --bg-2: #0a0e1f;
  --panel: rgba(12, 18, 36, 0.72);
  --panel-border: rgba(0, 240, 255, 0.28);
  --text: #e6f7ff;
  --text-dim: #7e8ca8;
  --cyan: #00f0ff;
  --magenta: #ff2bd6;
  --purple: #a855f7;
  --orange: #ff7a00;
  --blue: #3b82f6;
  --danger: #ff4d6d;
  --ok: #00ffa3;
  --glow-cyan: 0 0 14px rgba(0, 240, 255, 0.65), 0 0 30px rgba(0, 240, 255, 0.35);
  --font: 'Rajdhani', 'Orbitron', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

/*
  响应式基准：所有尺寸用 vmin（视口较短边），超大屏等比放大铺满。
  字号用 clamp(下限px, vmin, 上限px)：小屏不缩太小，大屏不爆大。
  手机竖屏 vmin≈屏宽；竖屏大屏 vmin≈屏宽，等比放大。
*/

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font); overflow: hidden; user-select: none;
}
#app { width: 100%; height: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* 主按钮 */
.cyber-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.8vmin; padding: 1.4vmin 2.8vmin;
  font-size: clamp(11px, 3.7vmin, 42px); font-weight: 600; letter-spacing: 0.2vmin;
  color: var(--text);
  background: linear-gradient(135deg, rgba(0,240,255,0.12), rgba(168,85,247,0.12));
  border: 1px solid var(--cyan); border-radius: 1vmin;
  clip-path: polygon(1vmin 0, 100% 0, 100% calc(100% - 1vmin), calc(100% - 1vmin) 100%, 0 100%, 0 1vmin);
  transition: all 0.2s ease; overflow: hidden;
}
.cyber-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.35), transparent);
  transform: translateX(-100%); transition: transform 0.5s ease;
}
.cyber-btn:hover::before { transform: translateX(100%); }
.cyber-btn:hover { box-shadow: 0 0 1.8vmin var(--cyan), inset 0 0 1.2vmin rgba(0,240,255,0.15); transform: translateY(-1px); }
.cyber-btn:active { transform: translateY(1px) scale(0.98); }
.cyber-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cyber-btn.ghost { background: transparent; border-color: rgba(126,140,168,0.5); color: var(--text-dim); }

/* 弱化辅助按钮：明显次于主操作按钮，引导用户聚焦主按钮 */
.cyber-btn.subtle {
  padding: 0.8vmin 1.4vmin;
  font-size: clamp(9px, 2.6vmin, 30px);
  letter-spacing: 0.14vmin;
  background: transparent;
  border-color: rgba(126,140,168,0.28);
  color: rgba(126,140,168,0.85);
  opacity: 0.8;
}
.cyber-btn.subtle:hover { border-color: rgba(126,140,168,0.5); color: var(--text-dim); box-shadow: none; }

/* 纯图标按钮：紧凑方形，图标白色但整体弱化 */
.cyber-btn.icon-only {
  padding: 1vmin;
  width: 6.4vmin; height: 6.4vmin;
  gap: 0;
  color: rgba(220,232,245,0.6);
  border-color: rgba(126,140,168,0.25);
}
.cyber-btn.icon-only:hover { color: rgba(230,247,255,0.9); border-color: rgba(126,140,168,0.5); box-shadow: none; }

/* 按钮内 SVG 图标：随按钮文字色，自适应缩放 */
.btn-icon { width: 3vmin; height: 3vmin; flex-shrink: 0; }
.cyber-btn.capture-btn .btn-icon { width: 3.4vmin; height: 3.4vmin; }

/* ===== 引导闪烁动画（主按钮呼吸脉冲，按强度分级） ===== */
/* 中等强度：用于 Step1 拍照、Step2 确认生成 */
@keyframes guide-pulse {
  0%, 100% { box-shadow: 0 0 1vmin var(--cyan), inset 0 0 0.6vmin rgba(0,240,255,0.12); border-color: var(--cyan); }
  50% { box-shadow: 0 0 2.6vmin var(--cyan), 0 0 5vmin rgba(0,240,255,0.45), inset 0 0 1.2vmin rgba(0,240,255,0.2); border-color: #7af6ff; transform: translateY(0); }
}
.guide-medium { animation: guide-pulse 1.4s ease-in-out infinite; }
/* 强度更高：用于 Step4 重新开始（完成态最终引导，最醒目） */
@keyframes guide-pulse-strong {
  0%, 100% { box-shadow: 0 0 1.4vmin var(--cyan), 0 0 2.4vmin rgba(0,240,255,0.35), inset 0 0 0.8vmin rgba(0,240,255,0.15); border-color: var(--cyan); transform: scale(1); }
  50% { box-shadow: 0 0 3.4vmin var(--cyan), 0 0 6.5vmin rgba(0,240,255,0.55), inset 0 0 1.6vmin rgba(0,240,255,0.28); border-color: #7af6ff; transform: scale(1.04); }
}
.guide-strong { animation: guide-pulse-strong 1.2s ease-in-out infinite; }
/* 倒计时/禁用态不闪 */
.cyber-btn.guide-medium:disabled,
.cyber-btn.guide-strong:disabled { animation: none; }

/* 风格卡片逐一引导闪烁：外框 accent 色快速亮起+光晕 */
@keyframes style-guide-flash {
  0%, 100% { border-color: rgba(126,140,168,0.3); box-shadow: none; }
  50% { border-color: var(--accent); box-shadow: 0 0 2vmin var(--accent), inset 0 0 1vmin rgba(255,255,255,0.06); }
}
.style-card.guide-flash { animation: style-guide-flash 0.42s ease-in-out 2; }

/* 面板 */
.cyber-panel {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 1.4vmin; backdrop-filter: blur(8px); position: relative;
}

.scanlines::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, rgba(0,240,255,0.06) 0, rgba(0,240,255,0.06) 1px, transparent 1px, transparent 3px);
}

@keyframes float-up { from { opacity: 0; transform: translateY(2vmin);} to { opacity: 1; transform: translateY(0);} }
.float-up { animation: float-up 0.6s ease both; }

@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 1.2vmin var(--cyan);} 50% { box-shadow: 0 0 2.8vmin var(--cyan), 0 0 5vmin rgba(0,240,255,0.4);} }

.view-enter-active, .view-leave-active { transition: opacity 0.4s ease, transform 0.4s ease; }
.view-enter-from { opacity: 0; transform: translateY(2.4vmin) scale(0.98); }
.view-leave-to { opacity: 0; transform: translateY(-2.4vmin) scale(0.98); }

::-webkit-scrollbar { width: 0.6vmin; }
::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.3); border-radius: 0.3vmin; }

/* ===== 背景 ===== */
.cyber-bg {
  position: fixed; inset: 0; overflow: hidden; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, #0a1230 0%, #05070f 60%);
}
.cyber-bg .particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.grid-floor {
  position: absolute; bottom: -10%; left: 50%;
  transform: translateX(-50%) perspective(360px) rotateX(70deg);
  width: 220%; height: 70%;
  background-image: linear-gradient(rgba(0,240,255,0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.25) 1px, transparent 1px);
  background-size: 4.4vmin 4.4vmin;
  mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  animation: grid-move 6s linear infinite;
}
@keyframes grid-move { from { background-position: 0 0; } to { background-position: 0 4.4vmin; } }
.cyber-bg .scanline {
  position: absolute; left: 0; right: 0; height: 12vmin; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(0,240,255,0.08), transparent);
  animation: scan 6s linear infinite;
}
@keyframes scan { from { top: -12vmin; } to { top: 100%; } }
.vignette { position: absolute; inset: 0; box-shadow: inset 0 0 18vmin rgba(0,0,0,0.8); pointer-events: none; }

/* ===== 设备外框（大屏铺满，铺满整个视口） ===== */
/* 竖屏超高分辨率（如 1440×2560）下，按高度铺满，避免按宽度等比放大后居中留白 */
.device { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: stretch; justify-content: center; padding: 0; }
.device-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100vh;
  border-radius: 2.5vmin; padding: 0.6vmin;
  background: linear-gradient(145deg, #0c1530, #05070f);
  box-shadow: 0 0 0 1px rgba(0,240,255,0.25), 0 0 4vmin rgba(0,240,255,0.2);
}
/* notch 缩小并下移到边框上，不遮挡内部文本 */
.notch { position: absolute; top: 0.8vmin; left: 50%; transform: translateX(-50%); width: 9vmin; height: 1.4vmin; background: #000; border-radius: 0 0 1.2vmin 1.2vmin; z-index: 5; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 3vmin; overflow: hidden; background: rgba(5,7,15,0.6); display: flex; flex-direction: column; }
.top { flex-shrink: 0; padding: 1.6vmin 0 0.2vmin; }
.brand-row { text-align: center; margin-bottom: 0; }
.brand { font-size: clamp(10px, 3vmin, 38px); letter-spacing: 0.4vmin; color: var(--cyan); text-shadow: 0 0 0.8vmin rgba(0,240,255,0.5); }
.content { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.footer { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 0.8vmin; padding: 0.4vmin; font-size: clamp(7px, 1.8vmin, 22px); letter-spacing: 0.2vmin; color: var(--text-dim); border-top: 1px solid rgba(0,240,255,0.08); }
.footer .tel { color: var(--cyan); letter-spacing: 0.1vmin; }
.footer .dot { color: var(--ok); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* ===== 顶部操作栏（各 Step 通用） ===== */
.action-bar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 1.2vmin;
  padding: 0.6vmin 1.6vmin 1.4vmin;
  flex-wrap: wrap;
}
.action-bar .cyber-btn { padding: 1.2vmin 2vmin; font-size: clamp(10px, 3.3vmin, 38px); }
.action-bar .capture-btn { padding: 1.7vmin 3.6vmin; font-size: clamp(12px, 4vmin, 46px); }

/* Step 页面容器 */
.step-page { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ===== StepBar ===== */
.step-bar { display: flex; align-items: flex-start; justify-content: space-between; padding: 1vmin 2.4vmin 0.4vmin; position: relative; z-index: 2; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6vmin; position: relative; }
.step .dot { width: 2.8vmin; height: 2.8vmin; border-radius: 50%; border: 1.5px solid rgba(126,140,168,0.5); display: flex; align-items: center; justify-content: center; font-size: clamp(11px, 2.8vmin, 32px); color: var(--text-dim); background: var(--bg-2); transition: all 0.3s ease; }
.step .label { font-size: clamp(9px, 2.4vmin, 28px); letter-spacing: 0.2vmin; color: var(--text-dim); }
.step .bar { position: absolute; top: 1.2vmin; left: 50%; width: 100%; height: 1.5px; background: rgba(126,140,168,0.2); z-index: -1; }
.step:last-child .bar { display: none; }
.step.active .dot { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 1.2vmin var(--cyan); }
.step.active .label { color: var(--cyan); }
.step.done .dot { border-color: var(--ok); color: var(--ok); }

/* ===== Step1 ===== */
.step1 { padding: 0 1.8vmin 1.8vmin; }
.step1 .cam-stage { margin: 0 auto; }
.cam-stage { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 60vh; overflow: hidden; border-radius: 1.6vmin; background: #000; }
.cam-stage video { width: 100%; height: 100%; object-fit: cover; }
.mirrored { transform: scaleX(-1); }
.cam-hint { position: absolute; bottom: 1vmin; left: 50%; transform: translateX(-50%); width: 90%; text-align: center; font-size: clamp(8px, 2.6vmin, 30px); color: var(--text-dim); letter-spacing: 0.1vmin; background: rgba(5,7,15,0.5); padding: 0.4vmin 0.8vmin; border-radius: 0.6vmin; }
.corner { position: absolute; width: 2.6vmin; height: 2.6vmin; border-color: var(--cyan); border-style: solid; border-width: 0; }
.corner.tl { top: 0.8vmin; left: 0.8vmin; border-top-width: 3px; border-left-width: 3px; }
.corner.tr { top: 0.8vmin; right: 0.8vmin; border-top-width: 3px; border-right-width: 3px; }
.corner.bl { bottom: 0.8vmin; left: 0.8vmin; border-bottom-width: 3px; border-left-width: 3px; }
.corner.br { bottom: 0.8vmin; right: 0.8vmin; border-bottom-width: 3px; border-right-width: 3px; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4vmin; background: rgba(5,7,15,0.85); color: var(--text); font-size: clamp(9px, 3vmin, 34px); text-align: center; padding: 2vmin; }
.spinner { width: 4.2vmin; height: 4.2vmin; border: 3px solid rgba(0,240,255,0.2); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.shutter { width: 1.2vmin; height: 1.2vmin; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0.8vmin var(--cyan); }

/* ===== 拍照倒计时 ===== */
/* 半透明大字覆盖在摄像头画面正中央，按 vmin 等比缩放适配任意屏幕。
   半透明 + 描边让数字醒目又不完全遮挡用户身位调整。
   用 cqh（容器高度单位）约束：数字不超过画面高度 55%，竖屏大屏仍巨大。 */
.cam-stage { container-type: size; }
.countdown-overlay { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.countdown-num {
  font-size: min(55cqh, 34vmin);
  font-weight: 800; line-height: 1;
  color: rgba(0,240,255,0.55);
  text-shadow:
    0 0 0.6vmin rgba(0,240,255,0.9),
    0 0 2.4vmin rgba(0,240,255,0.6),
    0 0 6vmin rgba(168,85,247,0.45);
  -webkit-text-stroke: 0.4vmin rgba(255,255,255,0.35);
  letter-spacing: 0;
}
/* 数字弹出动画：每次切换数字时缩放+淡入，配合 1s 倒计节奏 */
.cd-pop-enter-active { animation: cd-pop 0.95s ease both; }
.cd-pop-leave-active { transition: opacity 0.12s ease; }
@keyframes cd-pop {
  0% { opacity: 0; transform: scale(0.4); filter: blur(0.4vmin); }
  25% { opacity: 1; transform: scale(1.08); filter: blur(0); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.85; transform: scale(1); }
}

/* ===== Step2 ===== */
.step2 { padding: 0 1.8vmin 1.8vmin; }
.step2-body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1vmin; overflow-y: auto; }
.photo-wrap { position: relative; width: 18vmin; height: 18vmin; flex-shrink: 0; overflow: hidden; border-radius: 1.4vmin; }
.photo { width: 100%; height: 100%; object-fit: cover; }
.section-title { font-size: clamp(8px, 2.6vmin, 30px); letter-spacing: 0.3vmin; color: var(--text-dim); margin: 0.2vmin 0; }
.styles { display: grid; grid-template-columns: 1fr 1fr; gap: 1vmin; width: 100%; }
.style-card { position: relative; padding: 1.2vmin 1vmin; border: 1px solid rgba(126,140,168,0.3); border-radius: 1.2vmin; background: rgba(12,18,36,0.6); transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 0.6vmin; overflow: hidden; }
.style-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--accent), transparent 70%); opacity: 0; transition: opacity 0.3s; }
.style-card:hover::before { opacity: 0.18; }
.style-card.selected { border-color: var(--accent); box-shadow: 0 0 1.6vmin var(--accent), inset 0 0 1.2vmin rgba(255,255,255,0.04); }
.style-card.selected::before { opacity: 0.22; }
.style-icon { position: relative; width: 3vmin; height: 3vmin; display: flex; align-items: center; justify-content: center; }
.style-icon .ring { position: absolute; inset: 0; border: 1.5px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0.8vmin var(--accent); }
.style-icon .dot { width: 0.8vmin; height: 0.8vmin; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.8vmin var(--accent); }
.style-name { font-size: clamp(10px, 3.3vmin, 38px); font-weight: 600; letter-spacing: 0.2vmin; color: var(--text); }
.style-en { font-size: clamp(6px, 2vmin, 24px); letter-spacing: 0.1vmin; color: var(--text-dim); }
.tag { position: absolute; top: 0.8vmin; right: 0.8vmin; background: rgba(0,0,0,0.5); color: var(--cyan); font-size: clamp(6px, 2vmin, 24px); padding: 0.2vmin 0.6vmin; border: 1px solid rgba(0,240,255,0.4); letter-spacing: 0.1vmin; }

/* ===== Step3 ===== */
.step3 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.8vmin; padding: 2vmin; }
.core { position: relative; width: 16vmin; height: 16vmin; display: flex; align-items: center; justify-content: center; }
.orbit { position: absolute; inset: 0; }
.ring { position: absolute; border: 1.5px solid transparent; border-radius: 50%; border-top-color: var(--cyan); border-right-color: var(--magenta); }
.ring.r1 { inset: 0; animation: spin 1.4s linear infinite; }
.ring.r2 { inset: 1.6vmin; border-top-color: var(--purple); border-left-color: var(--cyan); animation: spin 1.1s linear infinite reverse; }
.ring.r3 { inset: 3.2vmin; border-top-color: var(--magenta); border-bottom-color: var(--cyan); animation: spin 0.8s linear infinite; }
.core-ball { position: relative; width: 2.8vmin; height: 2.8vmin; border-radius: 50%; background: radial-gradient(circle, #fff, var(--cyan)); box-shadow: 0 0 2.4vmin var(--cyan), 0 0 4.8vmin var(--magenta); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.2); box-shadow: 0 0 3.6vmin var(--cyan), 0 0 6.4vmin var(--magenta); } }
.pct { position: relative; z-index: 2; font-size: clamp(24px, 8vmin, 90px); font-weight: 700; color: var(--cyan); text-shadow: 0 0 1.2vmin var(--cyan); }
.pct span { font-size: clamp(12px, 4vmin, 45px); opacity: 0.7; }
.stage-text { font-size: clamp(9px, 3vmin, 34px); letter-spacing: 0.2vmin; color: var(--text); min-height: 2vmin; }
.bar-track { width: 70%; height: 0.6vmin; background: rgba(0,240,255,0.12); border-radius: 0.3vmin; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 1vmin var(--cyan); transition: width 0.3s ease; }
.style-label { font-size: clamp(9px, 3vmin, 34px); letter-spacing: 0.3vmin; text-shadow: 0 0 0.8vmin currentColor; }
.err { text-align: center; color: var(--danger); font-size: clamp(9px, 3vmin, 34px); display: flex; flex-direction: column; gap: 1vmin; align-items: center; }

/* ===== Step4 ===== */
.step4 { padding: 0 1.4vmin 0.6vmin; }
/* 顶部行：生成完成文字 + 重新开始按钮一行排列，节省垂直空间 */
.step4-top { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.2vmin 0.4vmin; }
.step4-top .kicker { margin: 0; font-size: clamp(7px, 2vmin, 22px); }
/* 重新开始按钮：缩小为辅助按钮，不再占用整行 */
.step4-restart { padding: 0.5vmin 1.2vmin; font-size: clamp(9px, 2.4vmin, 28px); }
/* 竖屏满高布局：上方压缩后二维码和图片共享更多空间 */
.step4-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.4vmin; min-height: 0; }
.kicker { font-size: clamp(7px, 2.6vmin, 30px); letter-spacing: 0.3vmin; color: var(--cyan); }
/* 成品图自适应剩余高度 */
.result-stage { position: relative; flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 1.6vmin; overflow: hidden; border: 1px solid rgba(0,240,255,0.3); }
.particles-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.result-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); filter: blur(8px) brightness(1.3); transition: opacity 1s ease, transform 1.2s ease, filter 1.2s ease; }
.result-img.shown { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
.badge { position: absolute; bottom: 1vmin; left: 50%; transform: translateX(-50%); z-index: 3; padding: 0.4vmin 1.4vmin; font-size: clamp(8px, 2.6vmin, 30px); letter-spacing: 0.3vmin; color: var(--accent, var(--cyan)); background: rgba(0,0,0,0.55); border: 1px solid var(--accent, var(--cyan)); border-radius: 0.4vmin; text-shadow: 0 0 0.6vmin currentColor; }
.scan-hint { font-size: clamp(8px, 2vmin, 24px); letter-spacing: 0.2vmin; color: var(--text-dim); margin: 0; }
.qr-row { display: flex; justify-content: center; }
/* 二维码区域：固定不缩放，让图片自动占用剩余高度 */
.qr-section { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.4vmin; }
/* 二维码放大：200px 方便大屏远距离扫码 */
.qr-wrap { padding: 0.8vmin; background: rgba(255,255,255,0.95); border-radius: 1vmin; box-shadow: 0 0 2vmin rgba(0,240,255,0.4); }
.qr-status { font-size: clamp(7px, 1.8vmin, 22px); letter-spacing: 0.1vmin; color: var(--text-dim); margin: 0; min-height: 1.4em; }
.qr-status.ready { color: var(--ok); }
.qr-status.err { color: var(--danger); }