/*
 * Auth pages — sign in, sign up (forgot / reset to follow): ONE sheet for the card and its fields,
 * so the two pages cannot drift (Jesse 2026-10-12: "clean fields… the placeholder text looks too
 * present"). These pages load Bootstrap + style.css only, never the app shell, so the look lives
 * here. Dark only — the auth pages are pinned to data-bs-theme="dark".
 *
 * Shape: one quiet rounded field per line, no icon cells, no second outline, a placeholder that
 * recedes, a soft focus ring; the show/hide eye sits INSIDE the password field.
 */

body.auth-page { font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); -webkit-font-smoothing: antialiased; }

.auth-wrap { width: 90%; }
.auth-brand { display: inline-flex; align-items: center; gap: 8px; pointer-events: none; }

.auth-card { background: #1b1826; border: 1px solid rgba(255,255,255,.06); border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.35); }
.auth-card .card-body { padding: 30px 30px 26px; }
@media (max-width: 420px) { .auth-card .card-body { padding: 22px 18px 20px; } }

.auth-card .auth-title { font-size: 1.15rem; font-weight: 600; color: #f1f0f6; margin: 0 0 18px; text-align: center; }
.auth-card .auth-section { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8e8aa0; margin: 22px 0 12px; }
.auth-card .auth-section:first-of-type { margin-top: 0; }

.auth-card .lf-label { display: block; font-size: .82rem; font-weight: 500; color: #c9c6d6; margin-bottom: 7px; }
.auth-card .lf-label .req { color: #ff7d8a; margin-left: 2px; }
.auth-card .lf-field { position: relative; }
.auth-card .lf-input, .auth-card .lf-select {
    display: block; width: 100%; background: #2a2638; border: 1px solid rgba(255,255,255,.05); border-radius: 11px;
    color: #f1f0f6; font-size: .95rem; padding: 12px 14px; line-height: 1.35; box-shadow: none; appearance: none; -webkit-appearance: none;
    transition: border-color .12s, box-shadow .12s, background .12s; }
.auth-card .lf-input::placeholder { color: rgba(241,240,246,.32); text-transform: none; } /* the promo field uppercases its VALUE only */
.auth-card .lf-input:focus, .auth-card .lf-select:focus { outline: 0; background: #2d2940; border-color: rgba(77,143,255,.55); box-shadow: 0 0 0 3px rgba(77,143,255,.18); }
.auth-card .lf-input:-webkit-autofill, .auth-card .lf-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1f0f6; -webkit-box-shadow: 0 0 0 1000px #2a2638 inset; transition: background-color 9999s; }
/* Selects: the same box, a quiet chevron on the right; an empty choice reads like a placeholder */
.auth-card .lf-select { padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a9a5b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.auth-card .lf-select.is-empty { color: rgba(241,240,246,.32); }
.auth-card .lf-select option, .auth-card .lf-select optgroup { color: #f1f0f6; background: #2a2638; }
.auth-card .lf-hint { font-size: .76rem; color: #8e8aa0; margin-top: 6px; }

.auth-card .lf-field.has-eye .lf-input { padding-right: 46px; }
.auth-card .lf-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px;
    background: transparent; color: rgba(241,240,246,.45); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.auth-card .lf-eye:hover { color: #f1f0f6; background: rgba(255,255,255,.06); }
.auth-card .lf-eye .icon { font-size: 20px; }

.auth-card .form-check-input { background-color: #2a2638; border-color: rgba(255,255,255,.14); width: 1.05em; height: 1.05em; margin-top: .2em; }
.auth-card .form-check-input:checked { background-color: #4D8FFF; border-color: #4D8FFF; }
.auth-card .form-check-label, .auth-card .lf-link { font-size: .84rem; color: #c9c6d6; }
.auth-card .lf-link { color: #8fb6ff; text-decoration: none; }
.auth-card .lf-link:hover { text-decoration: underline; }

.auth-card .lf-submit { display: block; width: 100%; border: 0; border-radius: 11px; background: #4D8FFF; color: #fff; font-weight: 600; font-size: .98rem;
    padding: 13px 16px; transition: filter .12s, transform .08s; }
.auth-card .lf-submit:hover { filter: brightness(1.08); }
.auth-card .lf-submit:active { transform: translateY(1px); }
.auth-card .lf-submit:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(77,143,255,.35); }

.auth-card .lf-foot { border-top: 1px solid rgba(255,255,255,.07); margin-top: 22px; padding-top: 18px; text-align: center; font-size: .84rem; color: #8e8aa0; }
.auth-card .lf-note { text-align: center; font-size: .78rem; color: #8e8aa0; margin: 12px 0 0; }
.auth-card .alert { border-radius: 11px; font-size: .85rem; }
/* The plan line on sign-up: a quiet strip, not an alert */
.auth-card .auth-plan { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(77,143,255,.08);
    border: 1px solid rgba(77,143,255,.18); border-radius: 11px; padding: 10px 14px; font-size: .84rem; color: #c9c6d6; margin-bottom: 20px; }
.auth-card .auth-plan b { color: #f1f0f6; font-weight: 600; }
.auth-card .auth-plan .icon { color: #8fb6ff; vertical-align: -5px; margin-right: 4px; }
.auth-version { font-size: .7rem; color: #5c5870; }