*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;background:#111a2d;color:#edf1f8;font:14px/1.5 system-ui,sans-serif}main{width:min(380px,calc(100vw - 32px));padding:28px;border:1px solid #34445b;border-radius:14px;background:#19263a}h1{font-size:22px;margin:16px 0 4px}p{color:#aab8cc;margin:0 0 20px}.logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#7567a5;font-size:20px;font-weight:700}form{display:grid;gap:8px}label{font-weight:600}#confirm-field:not([hidden]){display:grid;gap:8px}input,button{width:100%;padding:11px 12px;border-radius:8px;font:inherit}input{background:#111d30;border:1px solid #50617b;color:#fff}button{margin-top:8px;background:#7567a5;color:white;border:1px solid #8c7eb9;cursor:pointer;font-weight:600}button:disabled{opacity:.6}#error{color:#ffb9b9;margin:0;min-height:1em}input:focus-visible,button:focus-visible{outline:2px solid #c5b5ff;outline-offset:2px}