:root { color-scheme: light; font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: #f4f5f7; color: #1c2430; }
.auth { width: min(100% - 32px, 340px); padding: 28px; border-radius: 10px; background: white; box-shadow: 0 5px 30px #17233d16; }
.auth label { display: block; font-size: 13px; margin: 0 0 7px; }
.auth input, .auth select { display: block; width: 100%; padding: 11px 12px; font: inherit; font-size: 15px; border: 1px solid #b7c0cd; border-radius: 5px; outline-offset: 2px; margin: 0 0 18px; background: white; color: #1c2430; }
.auth input:focus, .auth select:focus { outline: 2px solid #415775; border-color: #415775; }
.auth button { display: block; width: 100%; min-height: 42px; border: none; border-radius: 5px; background: #33485f; color: white; font-size: 15px; font-weight: 550; cursor: pointer; }
.auth button:hover { background: #25384d; }
.auth .message { margin: 0 0 18px; padding: 10px; border-radius: 5px; background: #f4eded; color: #732e2e; font-size: 13px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) { .auth button { transition: background .15s; } }

.auth .retry {display:block;text-align:center;text-decoration:none;background:#33485f;color:white;border-radius:5px;padding:11px;margin-top:6px;}
.auth .secret{word-break:break-all;text-align:center;font-size:13px;}
.auth .qr {display:flex;justify-content:center;margin-bottom:14px;}
.auth .qr img {max-width:100%;height:auto;}