/* QrCanvas：二维码主体 + 四角定位记号。视觉语言对齐 Theme B——
   recessed（下沉表面）plate 让二维码读作「一个要对准相机的对象」，而非装饰。 */

.frame
{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 二维码取色令牌：module（深）= 前景文字色，底（浅）= 抬升表面。
       两者在浅 / 深主题里自然反转，对比始终 >7:1 满足扫码。 */
    --qr-dark: var(--text);
    --qr-light: var(--surface-raised);
}

.canvas
{
    display: block;
    border-radius: var(--radius-control);
    /* 切到新二维码时淡入，避免位图突变；reduced-motion 下 motion.css 兜底归零。 */
    transition: opacity var(--dur-base) var(--ease-out);
}

/* 四角定位记号：1.5px 描边的 L 形角标，复用 DeviceTypeIcon 的线稿语汇。
   accent 着色——是整块里唯一允许的「克制的大胆」着色点。 */
.tick
{
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--accent);
    pointer-events: none;
}

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