@charset "UTF-8";
@media screen {
  .login-qr-entry { margin:0 0 20px; }
  .login-form .btn.login-qr-button { display:flex; justify-content:flex-start; align-items:center; gap:14px; width:100%; min-height:68px; padding:14px 18px; border:2px solid #375583; border-radius:14px; color:#213e69; background:#eef3fc; font-size:19px; font-weight:800; text-align:left; box-shadow:0 5px 15px #29457112; }
  .login-qr-button > svg { width:34px; height:34px; flex:0 0 34px; stroke-width:1.8; }
  .login-qr-button > span:last-child { margin-left:auto; font-size:25px; }
  .login-form .btn.login-qr-button:hover { background:#e2eaf8; border-color:#19385f; }
  .login-qr-entry > p { margin:8px 3px 0; font-size:13px; color:#5b6e89; line-height:1.5; }
  #modal.qr-scanner-dialog { width:min(510px,calc(100vw - 24px)); }
  #modal.qr-scanner-dialog .modal-head { padding:18px 20px; }
  #modal.qr-scanner-dialog .modal-body { padding:18px 20px; }
  #modal.qr-scanner-dialog .modal-foot { padding:12px 20px; }
  .qr-scanner-intro { margin:0 0 14px; color:#365171; font-size:16px; font-weight:700; }
  .qr-scanner-frame { position:relative; overflow:hidden; width:100%; aspect-ratio:4/3; border-radius:16px; background:#182a43; }
  .qr-scanner-frame video { display:block; width:100%; height:100%; object-fit:cover; opacity:0; }
  .qr-scanner-frame.is-streaming video { opacity:1; }
  .qr-scanner-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; color:#c3d4e8; font-size:14px; }
  .qr-scanner-placeholder svg { width:72px; height:72px; color:#e5f2ff; }
  .is-streaming .qr-scanner-placeholder { display:none; }
  .qr-scanner-reticle { position:absolute; inset:15% 22%; pointer-events:none; border:2px solid #c1f8e0; border-radius:12px; box-shadow:0 0 0 100vmax #08152326; }
  .qr-scanner-status { min-height:44px; margin:14px 0 10px; color:#315475; font-size:15px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
  .qr-scanner-status.is-error { color:#a43a25; }
  .qr-scanner-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  #modal .qr-scanner-actions .btn { min-height:46px; padding:10px 8px; font-size:15px; font-weight:750; }
  #modal #qr-scanner-image { display:none !important; }
  .qr-scanner-help { margin:12px 0 0; font-size:13px; color:#60758b; line-height:1.5; }
}
@media screen and (max-width:400px) {
  .login-form .btn.login-qr-button { min-height:60px; padding:12px 14px; font-size:18px; gap:11px; }
  #modal.qr-scanner-dialog .modal-body { padding:15px; }
  #modal .qr-scanner-actions .btn { font-size:14px; }
}