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

* { box-sizing: border-box; }

body {
    background: #f3f7fb;
    color: #132a43;
    margin: 0;
    min-height: 100vh;
}

.m8-auth-shell {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.m8-auth-card {
    background: #fff;
    border: 1px solid #d9e5f5;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(19, 42, 67, 0.1);
    max-width: 31rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    width: 100%;
}

.m8-auth-header { align-items: center; display: flex; gap: 0.875rem; margin-bottom: 1.5rem; }
.m8-auth-header h1 { font-size: 1.5rem; margin: 0; }
.m8-auth-mark { align-items: center; background: #2d6cdf; border-radius: 0.75rem; color: #fff; display: flex; font-size: 1.5rem; font-weight: 800; height: 3rem; justify-content: center; width: 3rem; }
.m8-auth-eyebrow { color: #2d6cdf; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; margin: 0 0 0.2rem; }
.m8-auth-form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.m8-auth-form label { display: grid; font-size: 0.875rem; font-weight: 650; gap: 0.4rem; }
.m8-auth-form input[type="text"], .m8-auth-form input[type="password"] { border: 1px solid #718078; border-radius: 0.5rem; font: inherit; min-height: 2.75rem; padding: 0.65rem 0.75rem; width: 100%; }
.m8-auth-form input:focus-visible, .m8-auth-form button:focus-visible, .m8-auth-footer a:focus-visible { outline: 3px solid #9bc3ff; outline-offset: 2px; }
.m8-auth-form button { background: #2d6cdf; border: 0; border-radius: 0.5rem; color: #fff; cursor: pointer; font: inherit; font-weight: 750; min-height: 2.75rem; padding: 0.7rem 1rem; }
.m8-auth-form .m8-auth-secondary { background: #e8f1ff; color: #174f9d; }
.m8-auth-alert { background: #fff0f0; border: 1px solid #edb7b7; border-radius: 0.5rem; color: #8b2020; margin: 1rem 0; padding: 0.75rem; }
.m8-auth-alert--warning { background: #fff8e5; border-color: #e8cc83; color: #674a00; }
.m8-auth-qr { display: grid; margin: 1rem auto; max-width: 15rem; place-items: center; }
.m8-auth-qr svg { height: auto; max-width: 100%; width: 100%; }
.m8-auth-secret { background: #f4f7fa; border-radius: 0.5rem; display: grid; gap: 0.4rem; overflow-wrap: anywhere; padding: 0.75rem; }
.m8-auth-secret span { font-size: 0.75rem; font-weight: 700; }
.m8-auth-codes { columns: 2; padding-left: 1.5rem; }
.m8-auth-codes li { margin: 0.4rem 0; }
.m8-auth-check { align-items: start; grid-template-columns: auto 1fr; }
.m8-auth-check input { margin-top: 0.2rem; }
.m8-auth-recovery { border-top: 1px solid #e2e8ef; margin-top: 1.5rem; padding-top: 1rem; }
.m8-auth-recovery summary { cursor: pointer; font-weight: 700; }
.m8-auth-footer { border-top: 1px solid #e2e8ef; display: grid; font-size: 0.78rem; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; }
.m8-auth-footer a { color: #174f9d; font-weight: 700; }
.m8-auth-footer span { color: #506274; }

@media (max-width: 30rem) {
    .m8-auth-codes { columns: 1; }
}