:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #172033;
    background: #eef3f8;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background:
        radial-gradient(circle at 10% 10%, #d7e8ff 0, transparent 34%),
        radial-gradient(circle at 90% 90%, #d9f5e9 0, transparent 30%),
        #eef3f8;
}

.card {
    width: min(100%, 430px);
    padding: 34px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #dce5ef;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(31, 48, 73, .13);
}

.card.wide { width: min(100%, 540px); }
.brand { color: #1769aa; font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 10px 0 12px; font-size: 1.75rem; }
.muted, .security-note { color: #66758a; }
.security-note { font-size: .82rem; margin-top: 22px; }

form { display: grid; gap: 16px; margin-top: 22px; }
label { display: grid; gap: 7px; font-weight: 650; }
input {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #bdcad8;
    border-radius: 9px;
    font: inherit;
}
input:focus { outline: 3px solid #b9dcff; border-color: #2178bf; }
.otp { text-align: center; font-size: 1.7rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; }

button, .button {
    padding: 12px 18px;
    border: 0;
    border-radius: 9px;
    color: white;
    background: #1769aa;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
button:hover, .button:hover { background: #10588f; }
.button.secondary { display: inline-block; margin-top: 12px; background: #516277; }

.alert { padding: 12px 14px; border-radius: 9px; margin: 16px 0; }
.alert.error { color: #8a1c25; background: #ffe8ea; border: 1px solid #ffc7cc; }
.alert.warning { color: #765500; background: #fff4ca; border: 1px solid #ffe38b; }
.qr { display: grid; place-items: center; margin: 20px 0; }
.qr img { width: 280px; max-width: 100%; border-radius: 10px; }
.secret { display: block; padding: 12px; margin-top: 8px; overflow-wrap: anywhere; background: #f2f5f8; }
.status { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: white; font-size: 2rem; font-weight: 800; }
.status.success { background: #168454; }
.status.failure { background: #c63845; }
ol { padding-left: 22px; line-height: 1.65; }