:root{--primary-color:#6356ea;--primary-hover:#0052cc;--accent-color:#00c6fb;--bg-light:#f0f4f8;--card-bg:rgba(255,255,255,0.85);--text-main:#1e293b;--text-sub:#64748b;--border-color:rgba(0,0,0,0.08);--shadow-soft:0 10px 40px -10px rgba(0,102,255,0.15);--shadow-hover:0 20px 50px -10px rgba(0,102,255,0.25)}
*{margin:0;padding:0;box-sizing:border-box;font-family:'PingFang SC','Microsoft YaHei',sans-serif}
body{background-color:var(--bg-light);background-image:radial-gradient(circle at 10% 20%,rgba(0,102,255,0.05) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(0,198,251,0.05) 0%,transparent 40%);height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}
.login-card{width:520px;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.6);border-radius:24px;padding:40px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:30px;position:relative;overflow:hidden}
.login-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--primary-color),transparent)}
.tab-group{display:flex;background:#f1f5f9;padding:4px;border-radius:12px;position:relative;border:1px solid var(--border-color)}
.tab-btn{flex:1;padding:12px;border:none;background:transparent;color:var(--text-sub);font-size:15px;font-weight:500;cursor:pointer;border-radius:8px;transition:all 0.3s ease;z-index:2}
.tab-btn:hover{color:var(--primary-color);background:rgba(255,255,255,0.5)}
.tab-btn.active{color:#ffffff;background:var(--primary-color);box-shadow:0 4px 12px rgba(0,102,255,0.25)}
.display-area{width:100%;height:280px;background:#f8fafc;border-radius:16px;border:1px solid var(--border-color);position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;box-shadow:inset 0 2px 10px rgba(0,0,0,0.02)}
.content-item{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transform:scale(0.95);transition:all 0.4s ease;pointer-events:none}
.content-item.active{opacity:1;transform:scale(1);pointer-events:all}
.content-item h2{ font-size: 14px; font-weight: 600; margin: 0 0 20px 0;}
.camera-frame{width:200px;height:200px;border:2px solid #e2e8f0;border-radius:12px;position:relative;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,0.5)}
.scan-line{width:100%;height:2px;background:var(--primary-color);box-shadow:0 0 8px var(--primary-color);position:absolute;top:0;animation:scan 2s infinite linear}
.corner{position:absolute;width:20px;height:20px;border-color:var(--primary-color);border-style:solid;transition:all 0.3s;z-index:2}
.tl{top:-2px;left:-2px;border-width:2px 0 0 2px}
.tr{top:-2px;right:-2px;border-width:2px 2px 0 0}
.bl{bottom:-2px;left:-2px;border-width:0 0 2px 2px}
.br{bottom:-2px;right:-2px;border-width:0 2px 2px 0}
.face-hint{margin-top:20px;color:var(--text-sub);font-size:14px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.6);padding:8px 16px;border-radius:20px;border:1px solid rgba(0,0,0,0.05)}
.pulse-dot{width:8px;height:8px;background:#10b981;border-radius:50%;box-shadow:0 0 0 rgba(16,185,129,0.4);animation:pulse 2s infinite}
.qr-placeholder{width:180px;height:180px;background:white;padding:10px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.05);display:flex;justify-content:center;align-items:center}
.qr-code-img{width:100%;height:100%;}
.qr-code-img img{ width: 100%; height: 100%;}
.qr-hint{margin-top:20px;color:var(--text-main);font-size:16px;font-weight:600}
.qr-sub-hint{margin-top:8px;color:var(--text-sub);font-size:13px}

.login-input{ width: 100%; transition: all 0.3s ease; border: 2px solid transparent;outline: none;padding: 5px 10px; margin: 0; box-sizing: border-box; background-color: #fff; border-radius: 8px; height: 44px; line-height: 44px;}
.login-input:focus{background:white;border-color:#007bff;box-shadow:0 0 0 4px rgba(0,123,255,0.1)}
.login-input::placeholder{color:#ccc}
      
.action-btn{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--primary-color),#8248f3);color:white;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,102,255,0.2);display:flex;justify-content:center;align-items:center;gap:10px}
.action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,102,255,0.3);background:linear-gradient(135deg,#0077ff,#0055ee)}
.action-btn:active{transform:translateY(0)}
@keyframes scan{
  0%{top:0;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{top:100%;opacity:0}
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,0.4)}
  70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}