*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%}
body{background:#140b21;display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:24px;font-family:'Segoe UI',system-ui,sans-serif}
.box{background:#1a0f2b;border:1px solid #2f2049;border-radius:16px;padding:34px 30px;width:100%;max-width:380px;box-shadow:0 4px 24px rgba(0,0,0,.4)}
@media(max-width:560px){
  body{padding:0;align-items:stretch}
  /* без env(safe-area-inset-top) контент садился вплотную к самому верху
     экрана — первый тап по элементу у самого края съедала браузерная
     панель Safari (её сворачивание/разворачивание), а не сам элемент;
     нужен был повторный тап. Отступ сверху решает это. */
  .box{max-width:none;width:100%;border:none;border-radius:0;box-shadow:none;min-height:100dvh;
       display:flex;flex-direction:column;justify-content:center;
       padding:calc(32px + env(safe-area-inset-top)) 22px calc(32px + env(safe-area-inset-bottom))}
}
.logo{text-align:center;font-size:2.5rem;margin-bottom:4px}
h1{font-size:1.05rem;font-weight:700;color:#a996f5;text-align:center;margin-bottom:4px}
.sub{font-size:.78rem;color:#7d848d;text-align:center;margin-bottom:26px}
.fg{margin-bottom:12px}
label{display:block;font-size:.7rem;color:#7d848d;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
input{width:100%;background:#140b21;border:1px solid #2f2049;color:#e5e7ea;padding:12px 14px;border-radius:8px;font-size:16px;outline:none}
input:focus{border-color:#a996f5;box-shadow:0 0 0 3px rgba(169,150,245,.25)}
.btn{width:100%;background:#a996f5;color:#140b21;border:none;padding:13px;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;margin-top:6px}
.btn:hover{background:#b9abf7}
.err{color:#e88a86;font-size:.82rem;margin-bottom:14px;background:#3a1614;border:1px solid #5c2420;padding:8px 12px;border-radius:8px}
.hint{font-size:.75rem;color:#7d848d;text-align:center;margin-top:16px}
.code-input{letter-spacing:.3em;text-align:center;font-family:monospace;font-size:1.3rem}
.qr-box{text-align:center;background:#140b21;border:1px solid #2f2049;border-radius:10px;padding:16px}
.qr-box img{border-radius:8px;max-width:220px;width:100%}
.qr-box code{display:inline-block;margin-top:8px;color:#a996f5;font-size:.82rem;word-break:break-all}