/* ── Auth pages shared styles ────────────────────────────────────── */

:root {
    --bg: #0e0f13; --bg2: #14161c; --bg3: #1c1e27;
    --border: #2a2d3a; --text: #e8eaf0; --text2: #9097b0; --text3: #5a6080;
    --accent: #5b7cfa; --accent2: #3d5ce8; --accent-dim: rgba(91,124,250,.12);
    --red: #f05252; --red-dim: rgba(240,82,82,.12);
    --green: #3ecf8e; --green-dim: rgba(62,207,142,.12);
    --amber: #f5a623; --amber-dim: rgba(245,166,35,.12);
    --radius: 10px; --radius-sm: 6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
    font-family: 'Sora', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-wrap { width: 100%; max-width: 400px; }

.login-brand { text-align: center; margin-bottom: 32px; }

.login-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'DM Mono', monospace;
    font-size: 20px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
}

.brand-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 16px var(--accent);
}

.login-tagline {
    color: var(--text3);
    font-size: 12px;
    margin-top: 8px;
    font-family: 'DM Mono', monospace;
}

.login-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
}

.login-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.login-subtitle { font-size: 13px; color: var(--text2); margin-bottom: 24px; line-height: 1.5; }
.login-subtitle strong { color: var(--text); }

.form-group { margin-bottom: 18px; }

.form-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text3);
    margin-bottom: 7px;
}

.form-input {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.form-input::placeholder { color: var(--text3); }

.btn-login {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    transition: background .15s;
    letter-spacing: -0.01em;
}
.btn-login:hover { background: var(--accent2); }

.alert-error {
    background: var(--red-dim);
    color: var(--red);
    border: 1px solid rgba(240,82,82,.25);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 20px;
}

.alert-success {
    background: var(--green-dim);
    color: var(--green);
    border: 1px solid rgba(62,207,142,.25);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 20px;
}

.alert-warning {
    background: var(--amber-dim);
    color: var(--amber);
    border: 1px solid rgba(245,166,35,.25);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 20px;
}

.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

.back-link { display: block; text-align: center; margin-top: 16px; font-size: 12px; color: var(--text3); text-decoration: none; }
.back-link:hover { color: var(--text2); }

.login-hint { text-align: center; margin-top: 16px; font-size: 12px; color: var(--text3); }
.login-hint a { color: var(--accent); text-decoration: none; }
.login-hint a:hover { text-decoration: underline; }

.login-footer { text-align: center; margin-top: 20px; font-size: 12px; color: var(--text3); font-family: 'DM Mono', monospace; }

/* ─── Login page ──────────────────────────────────────────────── */
.login-title { margin-bottom: 24px; }

/* ─── TOTP + OTP pages: code-entry input ─────────────────────── */
body.page-totp .form-input,
body.page-otp .form-input {
    font-family: 'DM Mono', monospace;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-align: center;
    padding: 14px;
}
body.page-totp .form-input::placeholder,
body.page-otp .form-input::placeholder { font-size: 18px; letter-spacing: 0.15em; }
.recovery-section { text-align: center; }
.recovery-link {
    color: var(--text3);
    font-size: 13px;
    text-decoration: none;
    transition: color .15s;
}
.recovery-link:hover { color: var(--text2); }

/* ─── TOTP recovery page: recovery-code input ────────────────── */
body.page-totp-recovery .form-input {
    font-family: 'DM Mono', monospace;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-align: center;
    padding: 14px;
}
body.page-totp-recovery .form-input::placeholder { font-size: 14px; letter-spacing: 0.05em; }
.back-to-totp { display: block; text-align: center; }
.btn-ghost {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text2);
    font-family: inherit;
    font-size: 13px;
    padding: 8px 18px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    text-decoration: none;
    display: inline-block;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ─── OTP page: resend button ────────────────────────────────── */
.resend-section { text-align: center; }
.btn-resend {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text2);
    font-family: inherit;
    font-size: 13px;
    padding: 8px 18px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.btn-resend:hover { border-color: var(--accent); color: var(--accent); }
.btn-resend:disabled { cursor: not-allowed; opacity: 0.45; }
.btn-resend:disabled:hover { border-color: var(--border); color: var(--text2); }

/* ─── Password visibility toggle ─────────────────────────────── */
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 40px; }
.pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    line-height: 1;
}
.pw-toggle:hover { color: var(--text2); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Icon swap is controlled by the JS .hidden property + [hidden] CSS rule above */