/* 应用内扫码器：取景框是这一屏的签名时刻——与显码页的 QrCanvas 互为镜像。
   显码页把一枚码托在四角定位记号里给人看，扫码页则在同一组记号里「找」一枚码。
   同一套 accent L 形角标，同一套 recessed plate 语汇，零新全局样式。 */

.stage
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0 var(--space-1);
}

/* 取景框：方形 viewport，下沉 plate 把相机画面托成「一个对准的对象」。 */
.viewport
{
    position: relative;
    width: 248px;
    height: 248px;
    max-width: 100%;
    overflow: hidden;
    background: var(--surface-sunken);
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
}

/* 视频铺满取景框，居中裁切。镜像关闭——后置 / 外接相机扫码不应翻转。 */
.video
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 四角定位记号：与 QrCanvas 同款 accent L 形角标，内缩到取景框内沿。 */
.tick
{
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid var(--accent);
    pointer-events: none;
}

.tl { top: var(--space-3); left: var(--space-3);
      border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.tr { top: var(--space-3); right: var(--space-3);
      border-left: none; border-bottom: none; border-top-right-radius: 4px; }
.bl { bottom: var(--space-3); left: var(--space-3);
      border-right: none; border-top: none; border-bottom-left-radius: 4px; }
.br { bottom: var(--space-3); right: var(--space-3);
      border-left: none; border-top: none; border-bottom-right-radius: 4px; }

/* 扫描线：唯一的动效「时刻」，accent 横线在取景框内上下扫动，传达「正在找」。
   reduced-motion 下归零（见底部 media query）。 */
.beam
{
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    top: var(--space-3);
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px 0 var(--accent-ring);
    opacity: 0.85;
    animation: scan-beam 2.4s var(--ease-in-out) infinite;
    pointer-events: none;
}

@keyframes scan-beam
{
    0%   { transform: translateY(0); }
    50%  { transform: translateY(202px); }
    100% { transform: translateY(0); }
}

/* 命中过渡：解出有效码后取景框整体淡出，承接导航到批准页。 */
.viewportHit
{
    border-color: var(--accent-ring);
}

.statusLine
{
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-13);
    color: var(--text-muted);
}

/* 两步指引：与显码页同款语义序号列表。 */
.steps
{
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--fs-13);
    line-height: var(--lh-body);
    color: var(--text-muted);
}

.steps li::marker
{
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.actions
{
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@media (prefers-reduced-motion: reduce)
{
    .beam { animation: none; opacity: 0; }
}
