/* 显码页：二维码是主角，其余安静。 */

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

/* recessed plate：下沉表面 + 内描边，把二维码托成「一个要对准相机的对象」。 */
.plate
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--surface-sunken);
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
}

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

.waitText
{
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* accent 脉冲点：唯一的动效「时刻」，传达「正在等待批准」的活体感。 */
.pulse
{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-ring);
    animation: qr-pulse 1.8s var(--ease-in-out) infinite;
    flex-shrink: 0;
}

@keyframes qr-pulse
{
    0%   { box-shadow: 0 0 0 0 var(--accent-ring); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* 两步指引：用真实序号（这是一个有顺序的过程），而非装饰性编号。 */
.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;
}

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