html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-ui);
}

html {
    color-scheme: dark;
}

body {
    min-width: 320px;
}

* {
    box-sizing: border-box;
}

button,
input {
    font: inherit;
}

a {
    color: inherit;
}

::selection {
    background: var(--surface-3);
    color: var(--text-primary);
}

/* The QR code for the authenticator. Its modules are created by script, so it is styled here and not in
   an isolated stylesheet. */
.qr{width:min(100%,240px);margin:0 auto;padding:10px;border-radius:12px;background:var(--qr-light)}
.qr svg{display:block;width:100%;height:auto}
.qr-light{fill:var(--qr-light)}
.qr-dark{fill:var(--qr-dark)}
.totp-secret{margin:0;color:var(--text-primary);font-family:var(--font-mono);font-size:.95rem;letter-spacing:.06em;overflow-wrap:anywhere;user-select:all}

/* Registering an authenticator: the same block on the sign-in screen and on the account page. */
.enroll{margin-top:16px;display:grid;gap:10px;text-align:left}
.enroll[hidden]{display:none}
.enroll p{margin:0;color:var(--text-tertiary);font-size:.8rem;line-height:1.5}
.enroll label{color:var(--text-primary);font-size:.8rem;font-weight:550}
.enroll input{width:100%;height:44px;box-sizing:border-box;padding:0 14px;border:1px solid var(--border-strong);border-radius:10px;outline:0;background:var(--surface-1);color:var(--text-primary);font-family:var(--font-mono);font-size:1rem;letter-spacing:.3em;text-align:center}
.enroll input:focus-visible{border-color:var(--focus-ring);box-shadow:0 0 0 3px var(--focus-glow)}
.enroll .totp-link{display:inline-block;color:var(--accent-text);font-size:.8rem}

/* The page the service worker shows when the server cannot be reached (wwwroot/offline.html). */
.offline-page{min-height:100vh;min-height:100dvh;box-sizing:border-box;display:grid;align-content:center;justify-items:center;gap:14px;padding:32px 24px;text-align:center;background:var(--bg-app);color:var(--text-primary)}
.offline-page h1{margin:0;font-size:1.5rem;font-weight:650;letter-spacing:-.02em}
.offline-page p{margin:0;max-width:34rem;color:var(--text-tertiary);line-height:1.6}
.offline-page .offline-note{font-size:.8rem}
.offline-retry{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:11px;background:var(--accent-fill);color:var(--on-accent);font-weight:650;text-decoration:none}