@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ── Reset & Base ─────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #0B1730;
    --card-bg: #ffffff;
    --cobalt: #142850;
    --cobalt-dark: #0B1730;
    --cobalt-light: #1F3B73;
    --amber: #C89B3C;

    --text-dark: #1A1F36;
    --text-mid: #454C60;
    --text-muted: #656C7E;

    --border: #E1E5EE;
    --input-bg: #EEF1F7;

    --danger-bg: rgba(193, 68, 46, 0.08);
    --danger-text: #C1442E;
    --danger-bdr: rgba(193, 68, 46, 0.25);

    --success-bg: rgba(31, 138, 112, 0.08);
    --success-text: #1F8A70;
    --success-bdr: rgba(31, 138, 112, 0.25);

    --info-bg: rgba(44, 110, 158, 0.08);
    --info-text: #2C6E9E;
    --info-bdr: rgba(44, 110, 158, 0.25);

    --radius: 8px;
    --transition: 0.18s ease;

    --dapss-cobalt-shadow: rgba(20, 40, 80, 0.35);
    --font-heading: 'Source Serif 4', Georgia, serif;
}


html,
body {
    height: 100%;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 60% 50% at 50% -10%, rgba(20, 40, 80, 0.35) 0%, transparent 70%),
        repeating-linear-gradient(0deg,
            transparent,
            transparent 79px,
            rgba(255, 255, 255, 0.02) 79px,
            rgba(255, 255, 255, 0.02) 80px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 79px,
            rgba(255, 255, 255, 0.02) 79px,
            rgba(255, 255, 255, 0.02) 80px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Page wrapper ─────────────────────────────────────────── */
.auth-page {
    flex: 1;
    display: flex;
    padding: 2rem 1rem;
    min-height: 100vh;
    /* No align-items/justify-content here on purpose: centering a flex
       item via align-items:center (even the "safe center" keyword, which
       most browsers don't actually honor) still pushes an item taller
       than this container above the page's scrollable start when it
       overflows, clipping it with no way to scroll back up to it. Auto
       margins on .auth-card below do the centering instead - those
       gracefully clamp to 0 instead of going negative, so a page taller
       than the viewport (e.g. About) just starts at the top and scrolls
       normally, while short pages (login) still look vertically centered. */
}

/* ── Card ─────────────────────────────────────────────────── */
.auth-card {
    background: var(--card-bg);
    width: 100%;
    max-width: 420px;
    margin: auto;
    border-radius: var(--radius);
    padding: 2.5rem 2.25rem 2.25rem;
    border-top: 4px solid var(--cobalt);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 4px 6px -1px rgba(0, 0, 0, 0.12),
        0 20px 40px -10px rgba(0, 0, 0, 0.35);
    position: relative;
    /* Was "hidden" - clipped any content taller than the viewport (e.g.
       the About page) with no way to scroll to see the rest. Nothing here
       needs clipping: ::before below stays fully inside the card bounds. */
    overflow: visible;
}

/* amber hairline beneath top border */
.auth-card::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(200, 155, 60, 0.4);
    pointer-events: none;
}

/* ── Brand ────────────────────────────────────────────────── */
.auth-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: var(--cobalt);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: -0.02em;
    box-shadow: 3px 3px 0 var(--amber);
    overflow: hidden;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* ── Profile / developer-credit photos (about.php public view) ───── */
.user-avatar {
    align-items: center;
    background: var(--input-bg);
    border-radius: 50%;
    color: var(--cobalt);
    display: flex;
    font-size: 0.75rem;
    font-weight: 600;
    height: 32px;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
}

.profile-photo-lg {
    align-items: center;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--cobalt);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 2rem;
    font-weight: 700;
    height: 112px;
    justify-content: center;
    object-fit: cover;
    width: 112px;
}

.profile-photo-placeholder {
    text-transform: uppercase;
}

.auth-brand h1 {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.06em;
    line-height: 1.15;
}

.auth-brand p {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    margin-top: 2px;
    line-height: 1.3;
}

/* ── PWA install banner (login form only) ─────────────────── */
.pwa-install-banner[hidden] {
    /* Without this, the [hidden] attribute gets overridden by the
       display:flex rule below - author CSS always beats the browser's
       default [hidden]{display:none} styling regardless of selector
       specificity, so the banner would render even while "hidden". */
    display: none;
}

.pwa-install-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--info-bg);
    border: 1px solid var(--info-bdr);
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.25rem;
}

.pwa-install-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cobalt);
    color: #fff;
}

.pwa-install-icon svg {
    width: 18px;
    height: 18px;
}

.pwa-install-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.pwa-install-copy strong {
    font-size: 0.85rem;
    color: var(--text-dark);
}

.pwa-install-copy span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.pwa-install-action {
    flex-shrink: 0;
    background: var(--cobalt);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}

.pwa-install-action:hover {
    background: var(--cobalt-light);
}

.pwa-install-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.pwa-install-dismiss:hover {
    color: var(--text-dark);
}

/* ── Page heading (inside card, below brand) ──────────────── */
.auth-heading {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

/* ── Step indicator (for multi-step flows) ────────────────── */
.auth-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.auth-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    flex: 1;
    position: relative;
}

.auth-step::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
    margin-left: 0.4rem;
}

.auth-step:last-child::after {
    display: none;
}

.auth-step.active {
    color: var(--cobalt);
}

.auth-step.done {
    color: var(--success-text);
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.auth-step.active .step-num {
    background: var(--cobalt);
    color: #fff;
    border-color: var(--cobalt);
}

.auth-step.done .step-num {
    background: var(--success-text);
    color: #fff;
    border-color: var(--success-text);
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.84rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    border-left: 3px solid;
    line-height: 1.45;
}

.alert-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-text);
    border-right: 1px solid var(--danger-bdr);
    border-top: 1px solid var(--danger-bdr);
    border-bottom: 1px solid var(--danger-bdr);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-text);
    border-right: 1px solid var(--success-bdr);
    border-top: 1px solid var(--success-bdr);
    border-bottom: 1px solid var(--success-bdr);
}

.alert-info {
    background: var(--info-bg);
    color: var(--info-text);
    border-color: var(--info-text);
    border-right: 1px solid var(--info-bdr);
    border-top: 1px solid var(--info-bdr);
    border-bottom: 1px solid var(--info-bdr);
}

/* dev OTP badge — visible only in development */
.dev-otp {
    display: inline-block;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    background: #EEF2FF;
    color: #3730A3;
    border: 1px dashed #A5B4FC;
    border-radius: var(--radius);
    padding: 0.4rem 0.75rem;
    margin-bottom: 1.25rem;
    letter-spacing: 0.1em;
}

.dev-otp::before {
    content: 'DEV — OTP: ';
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* ── Account summary block (forgot_password confirmed state) ─ */
.auth-account-card {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.auth-account-card .account-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.auth-account-card .account-username {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: 0.04em;
}

/* ── Form elements ────────────────────────────────────────── */
.auth-form {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
}

/* When there's no explicit .auth-form class (plain <form>) */
.auth-card>form {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
}

/* suppress top border when form follows an alert directly */
.alert+form,
.alert+.auth-form {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
}

.mb-3 {
    margin-bottom: 1.1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-mid);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.form-hint {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    line-height: 1.4;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.93rem;
    color: var(--text-dark);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.form-control:hover {
    border-color: #CBD5E1;
}

.form-control:focus {
    border-color: var(--cobalt);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(20, 40, 80, 0.12);
}

.form-control::placeholder {
    color: #9CA3AF;
}

/* ── Password visibility toggle ───────────────────────────── */
.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 2.75rem;
}

/* Edge/IE inject their own built-in reveal-password eye icon inside the
   input, which sits right next to our custom toggle button and looks like
   two eye icons — suppress the native one since we already have our own. */
.password-field .form-control::-ms-reveal,
.password-field .form-control::-ms-clear {
    display: none;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.password-toggle-btn:hover {
    color: var(--cobalt);
    background: var(--info-bg);
}

.password-toggle-btn svg {
    width: 20px;
    height: 20px;
}

.password-toggle-btn .icon-eye-off {
    display: none;
}

.password-toggle-btn[aria-pressed="true"] .icon-eye {
    display: none;
}

.password-toggle-btn[aria-pressed="true"] .icon-eye-off {
    display: inline-flex;
}

/* OTP input — six individual digit boxes */
.otp-boxes {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.otp-box {
    width: 48px;
    height: 56px;
    padding: 0;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: var(--cobalt);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.otp-box:hover {
    border-color: #CBD5E1;
}

.otp-box:focus {
    border-color: var(--cobalt);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(20, 40, 80, 0.12);
}

@media (max-width: 400px) {
    .otp-box {
        width: 42px;
        height: 50px;
        font-size: 1.25rem;
    }

    .otp-boxes {
        gap: 0.4rem;
    }
}

/* ── Password strength indicator ──────────────────────────── */
.password-strength {
    margin-top: 0.5rem;
    display: flex;
    gap: 4px;
    align-items: center;
}

.strength-bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--border);
    transition: background var(--transition);
}

.strength-bar.weak {
    background: #EF4444;
}

.strength-bar.fair {
    background: #F59E0B;
}

.strength-bar.strong {
    background: #10B981;
}

.strength-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 48px;
    text-align: right;
}

/* ── Radio / method selection (forgot_password) ───────────── */
.method-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.method-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    font-size: 0.88rem;
    color: var(--text-mid);
}

.method-option:hover {
    border-color: var(--cobalt);
    background: var(--info-bg);
}

.method-option input[type="radio"] {
    accent-color: var(--cobalt);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.method-option input[type="radio"]:checked+span {
    color: var(--cobalt);
    font-weight: 600;
}

.method-option:has(input:checked) {
    border-color: var(--cobalt);
    background: var(--info-bg);
}

.method-icon {
    font-size: 1rem;
    opacity: 0.6;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--cobalt);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--cobalt-dark);
    box-shadow: 0 4px 12px rgba(20, 40, 80, 0.35);
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow: none;
}

.btn-primary:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 2px;
}

.w-100 {
    width: 100%;
    margin-top: 0.5rem;
}

/* ── Footer links ─────────────────────────────────────────── */
.auth-links {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    text-align: center;
}

.auth-links a,
.auth-links p {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: none;
}

.auth-links a {
    color: var(--cobalt);
    font-weight: 500;
    transition: color var(--transition);
}

.auth-links a:hover {
    color: var(--cobalt-dark);
    text-decoration: underline;
}

.auth-links p>a {
    display: inline;
}

.auth-links a {
    display: inline-block;
    padding: 0.15rem 0;
}

.auth-links-divider {
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
    color: var(--text-muted);
    font-weight: 400;
}

.auth-links-divider:hover {
    color: var(--cobalt);
    text-decoration: underline;
}

.auth-links-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}

/* ── Depth & Motion Layer ──────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, var(--cobalt) 0%, var(--cobalt-dark) 100%);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--cobalt-dark) 0%, #16264f 100%);
    box-shadow: 0 10px 24px rgba(20, 40, 80, 0.4);
}

.form-control:focus {
    box-shadow: 0 0 0 3px rgba(20, 40, 80, 0.14), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.alert {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

:focus-visible {
    outline: 2px solid var(--cobalt);
    outline-offset: 2px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-page {
        padding: 0;
        align-items: stretch;
    }

    .auth-card {
        padding: 2rem 1.5rem 1.75rem;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        /* Not "center": the same bug as .auth-page above, one level
           deeper - centering a flex column's children when they're
           taller than the container pushes the top out of scroll reach.
           flex-start vertically centers short content (a login form) well
           enough while still starting from the top and scrolling normally
           when content (e.g. the About page) is taller than the screen. */
        justify-content: flex-start;
    }
}

/* ── Split-screen auth layout — a single two-pane "card" (brand
   visual + form) centered on the page, like .auth-page/.auth-card
   but split in half, rather than stretched edge-to-edge ─────────── */
.auth-page-split {
    flex: 1;
    display: flex;
    padding: 2rem 1rem;
    min-height: 100vh;
    /* Auto margins on .auth-shell below do the centering - see .auth-page
       above for why not align-items/justify-content here. */
}

.auth-shell {
    display: flex;
    width: 100%;
    max-width: 900px;
    margin: auto;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 4px 6px -1px rgba(0, 0, 0, 0.12),
        0 20px 40px -10px rgba(0, 0, 0, 0.35);
}

.auth-visual {
    flex: 1;
    background: linear-gradient(160deg, var(--cobalt) 0%, var(--cobalt-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    overflow: hidden;
}

.auth-visual-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.auth-visual::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    border: 1px solid rgba(200, 155, 60, 0.25);
    top: -140px;
    right: -140px;
}

.auth-visual-logo {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: #fff;
    padding: 10px;
    object-fit: contain;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    margin-bottom: 28px;
    position: relative;
}

.auth-visual-title {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    max-width: 380px;
    position: relative;
}

.auth-visual-subtitle {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 10px;
    position: relative;
}

.auth-visual-tag {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
    position: relative;
}

.auth-form-panel {
    width: 400px;
    flex-shrink: 0;
    max-width: 100%;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    padding: 48px 40px;
}

.auth-form-inner {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

/* ── Compact brand row shown only when .auth-visual (the full crest
   panel) is hidden on narrow screens - otherwise the login form has no
   logo at all on mobile. Hidden on wider screens by default; the
   max-width:860px block below flips it on. Declared before that media
   query so the override actually wins (equal specificity - source order
   decides ties, so a later unconditional rule would otherwise beat it). */
.auth-mobile-brand {
    display: none;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.auth-mobile-brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.auth-mobile-brand-text strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.2;
}

.auth-mobile-brand-text span {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

@media (max-width: 860px) {
    .auth-page-split {
        padding: 0;
        align-items: stretch;
    }

    .auth-shell {
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-visual {
        display: none;
    }

    .auth-mobile-brand {
        display: flex;
    }

    .auth-form-panel {
        width: 100%;
        min-height: 100vh;
    }
}

@media (max-width: 480px) {
    .auth-form-panel {
        padding: 2rem 1.5rem;
    }
}