/* 固定屏展示页：1920x1080 科技风 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%;min-width: 1920px; height: 1080px; overflow: hidden; }
body {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    color: #eaf6ff;
    background: #050d1f radial-gradient(1200px 700px at 70% 20%, #0c2c55 0%, #050d1f 60%);
}
body.has-bg { background: #050d1f url('/bg') center/cover no-repeat; }
body.has-bg::before { content: ""; position: fixed; inset: 0; background: rgba(4, 12, 30, .55); }

.stage { position: relative; width: 1920px; height: 1080px; }
.stage::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: linear-gradient(rgba(64,160,255,.08) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(64,160,255,.08) 1px, transparent 1px);
    background-size: 48px 48px;
}
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.glow-a { width: 640px; height: 640px; left: -160px; top: -180px; background: #0a4a8f; }
.glow-b { width: 720px; height: 720px; right: -200px; bottom: -260px; background: #123f74; }

.hd { position: absolute; top: 56px; left: 96px; display: flex; align-items: center; gap: 20px; }
.hd h1 { font-size: 44px; letter-spacing: 6px; font-weight: 600; text-shadow: 0 0 24px rgba(60,160,255,.6); }
.logo-dot { width: 18px; height: 18px; border-radius: 50%; background: #37c8ff; box-shadow: 0 0 18px #37c8ff; }

.main {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -48%);
    display: flex; align-items: center; gap: 100px;
}
.qr-card {
    position: relative; flex: 0 0 400px; width: 400px; height: 400px; padding: 20px;
    aspect-ratio: 1 / 1;
    background: #fff; border-radius: 18px;
    box-shadow: 0 0 60px rgba(55,200,255,.35), 0 24px 60px rgba(0,0,0,.5);
}
/* 二维码必须保持 1:1：容器一旦不是正方形，拉伸后的码可能扫不出来 */
.qr-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr-corner { position: absolute; width: 42px; height: 42px; border: 5px solid #37c8ff; }
.qr-corner.tl { left: -16px; top: -16px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.qr-corner.tr { right: -16px; top: -16px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.qr-corner.bl { left: -16px; bottom: -16px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.qr-corner.br { right: -16px; bottom: -16px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.qr-state {
    position: absolute; left: 0; right: 0; bottom: -64px; text-align: center;
    font-size: 24px; color: #37c8ff; letter-spacing: 2px;
}
.qr-state.busy { color: #ffd166; }

.side { max-width: 560px; }
.tip { font-size: 40px; line-height: 1.5; font-weight: 600; margin-bottom: 48px; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.steps li { display: flex; align-items: center; gap: 22px; font-size: 30px; margin: 26px 0; color: #cfe9ff; letter-spacing: 2px; }
.steps b {
    width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px; line-height: 52px; text-align: center;
    font-size: 26px; color: #04182e; background: linear-gradient(140deg, #59d2ff, #2f8ef7);
    box-shadow: 0 0 18px rgba(60,170,255,.7);
}
.clock { margin-top: 64px; font-size: 26px; color: #7fb8e6; font-family: Consolas, monospace; letter-spacing: 3px; }

.ft {
    position: absolute; bottom: 36px; left: 0; right: 0; text-align: center;
    font-size: 22px; color: #86b9e2; letter-spacing: 4px;
}