/* ===== Shared Auth Pages (Login & Register) ===== */
@keyframes slideGlow {
    0% { background-position: 200% 0 }
    100% { background-position: -200% 0 }
}

.auth-page {
    margin-left: 3.5vw;
    min-height: 100vh;
    background: #f5f6f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Inter', system-ui, sans-serif;
}

.auth-page *,
.auth-page *::before,
.auth-page *::after {
    box-sizing: border-box;
}

/* Header — design folder style (white, gradient strip). Scoped to .auth-page to avoid affecting layout header buttons */
.auth-page .auth-header {
    width: 100%;
    padding: 2vw 2vw 1.6vw;
    text-align: center;
    background: #fff;
    border-bottom: 0.06vw solid #e2e5ea;
    position: relative;
    overflow: hidden;
}

.auth-page .auth-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0.2vw;
    background: linear-gradient(90deg, #4f6ef7, #6366f1, #4f6ef7);
    background-size: 200% 100%;
    animation: slideGlow 4s linear infinite;
}

.auth-page .auth-header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7vw;
    margin-bottom: 0.35vw;
}

.auth-page .auth-header-icon {
    width: 2.6vw;
    height: 2.6vw;
    border-radius: 0.5vw;
    background: linear-gradient(135deg, #4f6ef7, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.2vw 0.8vw rgba(79,110,247,0.25);
    flex-shrink: 0;
}

.auth-page .auth-header-icon i,
.auth-page .auth-header-icon svg {
    width: 1.3vw;
    height: 1.3vw;
    color: #fff;
}

.auth-page .auth-header h1 {
    font-size: 1.6vw;
    font-weight: 800;
    color: #111318;
    font-family: 'Inter', system-ui, sans-serif;
}

.auth-page .auth-header p {
    font-size: 1vw;
    color: #667085;
    margin: 0 auto 0.5vw;
}

.auth-page .auth-today-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35vw;
    background: transparent;
    border: none;
    border-radius: 2vw;
    padding: 0.3vw 0.8vw;
}

.auth-page .auth-today-pill svg {
    width: 0.75vw;
    height: 0.75vw;
    color: #6366f1;
}

.auth-page .auth-today-pill .count {
    font-size: 0.85vw;
    font-weight: 700;
    color: #6366f1;
}

.auth-page .auth-today-pill .label {
    font-size: 0.78vw;
    font-weight: 500;
    color: #111318;
}

/* Why Join card — compact, stylish */
.auth-why-card {
    padding: 1.2vw 1.4vw !important;
    min-height: unset;
}

.auth-why-card h3 {
    font-size: 0.95vw;
    font-weight: 700;
    color: #111318;
    margin-bottom: 0.9vw;
    margin-top: 0;
    font-family: 'Inter', system-ui, sans-serif;
}

.auth-why-item {
    display: flex;
    align-items: center;
    gap: 0.6vw;
    margin-bottom: 0.55vw;
}

.auth-why-item:last-child {
    margin-bottom: 0;
}

.auth-why-dot {
    width: 0.4vw;
    height: 0.4vw;
    border-radius: 50%;
    flex-shrink: 0;
}

.auth-why-item span {
    font-size: 0.88vw;
    color: #344054;
    font-weight: 500;
}

/* Content grids */
.auth-content {
    display: grid;
    gap: 1.5vw;
    margin-top: 1.6vw;
    padding-bottom: 3vw;
}

.auth-content--login {
    width: 48vw;
    grid-template-columns: 1fr 1fr;
}

.auth-content--register {
    width: 58vw;
    grid-template-columns: 1fr 1.3fr;
}

.auth-left-column {
    display: flex;
    flex-direction: column;
    gap: 1.2vw;
    align-self: start;
}

.auth-page .filter-group {
    margin-bottom: 0;
}

.auth-page .filter-group .filter-label {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Cards */
.auth-card {
    background: #fff;
    border-radius: 0.6vw;
    border: 0.06vw solid #e2e5ea;
    padding: 1.4vw;
}

.auth-card-title {
    display: flex;
    align-items: center;
    gap: 0.4vw;
    margin-bottom: 1vw;
}

.auth-card-title svg,
.auth-card-title i {
    width: 0.9vw;
    height: 0.9vw;
    color: #4f6ef7;
}

.auth-card-title h2 {
    font-size: 0.85vw;
    font-weight: 700;
    color: #111318;
    text-transform: uppercase;
    letter-spacing: 0.06vw;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Social buttons */
.auth-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
}

.auth-social-btn {
    display: flex;
    align-items: center;
    gap: 0.55vw;
    padding: 0.6vw 0.9vw;
    border-radius: 0.4vw;
    cursor: pointer;
    font-size: 0.8vw;
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none;
    font-family: inherit;
}

.auth-social-btn--google {
    border: 0.06vw solid #e2e5ea;
    background: #fff;
    color: #111318;
}
.auth-social-btn--google:hover {
    border-color: #4f6ef7;
    background: #f8f9ff;
}

.auth-social-btn--x {
    border: none;
    background: #0f1419;
    color: #fff;
}
.auth-social-btn--x:hover { background: #1a2530; }

.auth-social-btn--facebook {
    border: none;
    background: #1877F2;
    color: #fff;
}
.auth-social-btn--facebook:hover { background: #1565d8; }

.auth-social-btn--reddit {
    border: none;
    background: #FF4500;
    color: #fff;
}
.auth-social-btn--reddit:hover { background: #e03d00; }

.auth-social-btn img,
.auth-social-btn svg {
    width: 1vw;
    height: 1vw;
    flex-shrink: 0;
}

.auth-social-divider {
    display: flex;
    align-items: center;
    gap: 0.6vw;
    margin-top: 1vw;
}
.auth-social-divider span {
    font-size: 0.68vw;
    color: #667085;
    font-weight: 500;
    white-space: nowrap;
}
.auth-social-divider::before,
.auth-social-divider::after {
    content: '';
    flex: 1;
    height: 0.06vw;
    background: #e2e5ea;
}

/* Form elements */
.auth-label {
    display: block;
    font-size: 0.78vw;
    font-weight: 600;
    color: #344054;
    margin-bottom: 0.3vw;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-wrap svg,
.auth-input-wrap i {
    position: absolute;
    left: 0.6vw;
    top: 50%;
    transform: translateY(-50%);
    width: 0.8vw;
    height: 0.8vw;
    color: #667085;
    pointer-events: none;
}

.auth-input {
    width: 100%;
    height: 2.3vw;
    padding: 0 0.7vw 0 2.2vw;
    border: 0.06vw solid #e2e5ea;
    border-radius: 0.35vw;
    font-size: 0.82vw;
    color: #111318;
    background: #f9fafb;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}

.auth-input:focus {
    border-color: #4f6ef7;
    box-shadow: 0 0 0 0.15vw rgba(79,110,247,0.1);
    background: #fff;
}

.auth-input--no-icon {
    padding-left: 0.7vw;
}

/* Selects — styled like newswire filters */
.auth-select-wrap {
    position: relative;
}

.auth-select {
    width: 100%;
    height: 2.3vw;
    padding: 0.6vw 2.2vw 0.6vw 0.9vw;
    border: 0.069vw solid rgba(0, 0, 0, 0.08);
    border-radius: 0.35vw;
    font-size: 0.75vw;
    font-weight: 500;
    color: #1e293b;
    background: #fafafa;
    outline: none;
    transition: all 0.2s ease;
    font-family: inherit;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.6vw center;
    background-size: 0.85vw;
}

.auth-select:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.03);
}

.auth-select:focus {
    border-color: #6366F1;
    box-shadow: 0 0 0 0.207vw rgba(99, 102, 241, 0.1);
    background-color: #fff;
}

.auth-select--with-icon {
    padding-left: 2.2vw;
}

/* Username with @ prefix — no gap */
.auth-username-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-username-prefix {
    position: absolute;
    left: 0.6vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82vw;
    font-weight: 500;
    color: #667085;
    pointer-events: none;
    z-index: 1;
}

.auth-username-wrap .auth-input {
    padding-left: 1.4vw;
}

.auth-username-wrap .auth-char-counter {
    right: 0.6vw;
}

.auth-char-counter {
    position: absolute;
    right: 0.6vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65vw;
    color: #98a2b3;
    background: #f9fafb;
    padding: 0 0.15vw;
    border-radius: 0.15vw;
}

/* Password requirements */
.auth-pw-reqs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25vw 0.6vw;
    padding: 0.5vw 0.6vw;
    background: #f9fafb;
    border-radius: 0.3vw;
    border: 0.06vw solid #e2e5ea;
    margin-bottom: 0.8vw;
}

.auth-pw-req {
    display: flex;
    align-items: center;
    gap: 0.3vw;
    font-size: 0.68vw;
    font-weight: 500;
}

.auth-pw-req svg {
    width: 0.65vw;
    height: 0.65vw;
    flex-shrink: 0;
}

.auth-pw-req--met { color: #10b981; }
.auth-pw-req--met svg { color: #10b981; }
.auth-pw-req--unmet { color: #98a2b3; }
.auth-pw-req--unmet svg { color: #d1d5db; }

/* Row helpers */
.auth-row { display: grid; gap: 0.8vw; margin-bottom: 0.8vw; }
.auth-row--2 { grid-template-columns: 1fr 1fr; }
.auth-row--3 { grid-template-columns: 1fr 1.5fr 1fr; }
.auth-row--dob { grid-template-columns: 1fr 1.5fr 1fr; gap: 0.5vw; }

.auth-group { margin-bottom: 0.8vw; }

.auth-group.auth-group--dob {
    margin-top: 0.8vw;
}

/* Checkbox */
.auth-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.45vw;
    cursor: pointer;
    font-size: 0.75vw;
    color: #344054;
    margin-bottom: 0.5vw;
}

.auth-checkbox-label input[type="checkbox"] {
    width: 0.8vw;
    height: 0.8vw;
    accent-color: #4f6ef7;
    cursor: pointer;
    margin-top: 0.05vw;
    flex-shrink: 0;
}

.auth-checkbox-label a {
    color: #4f6ef7;
    font-weight: 600;
    text-decoration: none;
}

.auth-checkbox-label a:hover {
    text-decoration: underline;
}

/* Submit button */
.auth-submit {
    width: 100%;
    height: 2.4vw;
    background: linear-gradient(135deg, #4f6ef7, #6366f1);
    color: #fff;
    border: none;
    border-radius: 0.4vw;
    font-size: 0.85vw;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4vw;
    transition: all 0.2s;
    box-shadow: 0 0.15vw 0.5vw rgba(79,110,247,0.3);
    font-family: inherit;
}

.auth-submit:hover {
    transform: translateY(-0.1vw);
    box-shadow: 0 0.25vw 0.8vw rgba(79,110,247,0.4);
}

.auth-form-submit-wrap {
    margin-top: 1.2vw;
}

.auth-submit svg {
    width: 0.85vw;
    height: 0.85vw;
}

/* Redirect text */
.auth-redirect {
    text-align: center;
    margin-top: 0.8vw;
    font-size: 0.78vw;
    color: #667085;
}

.auth-redirect a {
    color: #4f6ef7;
    font-weight: 600;
    text-decoration: none;
}

.auth-redirect a:hover {
    text-decoration: underline;
}

/* Error messages */
.auth-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 0.5vw 0.7vw;
    border-radius: 0.35vw;
    margin-bottom: 0.8vw;
    border: 0.06vw solid #fecaca;
    font-size: 0.78vw;
    font-weight: 500;
}

.auth-field-error {
    color: #dc2626;
    font-size: 0.7vw;
    margin-top: 0.2vw;
    display: block;
    font-weight: 500;
}

/* Forgot password */
.auth-forgot {
    text-align: right;
    margin-bottom: 1vw;
}

.auth-forgot a {
    font-size: 0.72vw;
    color: #4f6ef7;
    font-weight: 600;
    text-decoration: none;
}

.auth-forgot a:hover {
    text-decoration: underline;
}

/* Toggle password */
.auth-toggle-pw {
    position: absolute;
    right: 0.5vw;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-toggle-pw svg {
    position: static;
    transform: none;
    width: 0.8vw;
    height: 0.8vw;
    color: #667085;
    pointer-events: none;
}

/* ============================================================
   Auth pages — Tablet (641px – 1024px)
   ============================================================ */
@media (max-width: 1024px) {

    /* Remove sidebar indent, add bottom nav clearance */
    .auth-page {
        margin-left: 0;
        padding-bottom: calc(var(--bottom-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    /* ── Header ── */
    .auth-page .auth-header {
        padding: clamp(20px, 3vw, 32px) clamp(16px, 4vw, 32px) clamp(16px, 2.5vw, 26px);
    }

    .auth-page .auth-header::before {
        height: 3px;
    }

    .auth-page .auth-header-inner {
        gap: clamp(8px, 1.2vw, 14px);
        margin-bottom: 6px;
    }

    .auth-page .auth-header-icon {
        width: clamp(32px, 5vw, 44px);
        height: clamp(32px, 5vw, 44px);
        border-radius: 8px;
    }

    .auth-page .auth-header-icon i,
    .auth-page .auth-header-icon svg {
        width: clamp(16px, 2.5vw, 22px);
        height: clamp(16px, 2.5vw, 22px);
    }

    .auth-page .auth-header h1 {
        font-size: clamp(20px, 3vw, 28px);
    }

    .auth-page .auth-header p {
        font-size: clamp(13px, 1.8vw, 16px);
        max-width: clamp(260px, 60vw, 500px);
        margin-bottom: 0;
    }

    .auth-page .auth-today-pill {
        gap: clamp(4px, 0.6vw, 8px);
        margin-top: clamp(4px, 0.6vw, 8px);
        padding: 4px 10px;
    }

    .auth-page .auth-today-pill svg {
        width: clamp(12px, 1.5vw, 14px);
        height: clamp(12px, 1.5vw, 14px);
    }

    .auth-page .auth-today-pill .count {
        font-size: clamp(12px, 1.6vw, 14px);
    }

    .auth-page .auth-today-pill .label {
        font-size: clamp(11px, 1.5vw, 13px);
    }

    /* ── Content grid ── */
    .auth-content {
        width: 100% !important;
        box-sizing: border-box;
        gap: clamp(12px, 2vw, 20px);
        margin-top: clamp(16px, 2.5vw, 24px);
        padding: 0 clamp(12px, 3vw, 24px) clamp(24px, 4vw, 40px);
    }

    .auth-content--login {
        max-width: 720px;
        grid-template-columns: 1fr 1fr;
    }

    .auth-content--register {
        max-width: 840px;
        grid-template-columns: 1fr 1.3fr;
    }

    /* ── Cards ── */
    .auth-card {
        border-radius: clamp(8px, 1.2vw, 12px);
        padding: clamp(14px, 2.2vw, 22px) !important;
    }

    .auth-card-title {
        gap: 6px;
        margin-bottom: clamp(10px, 1.5vw, 16px);
    }

    .auth-card-title svg,
    .auth-card-title i {
        width: clamp(14px, 1.8vw, 18px);
        height: clamp(14px, 1.8vw, 18px);
    }

    .auth-card-title h2 {
        font-size: clamp(11px, 1.4vw, 14px);
        letter-spacing: 0.06em;
    }

    /* ── Social buttons ── */
    .auth-social-buttons {
        gap: clamp(6px, 1vw, 10px);
    }

    .auth-social-btn {
        padding: clamp(8px, 1.2vw, 12px) clamp(10px, 1.6vw, 16px);
        font-size: clamp(12px, 1.5vw, 14px);
        gap: clamp(6px, 1vw, 10px);
        border-radius: clamp(5px, 0.8vw, 8px);
    }

    .auth-social-btn img,
    .auth-social-btn svg {
        width: clamp(16px, 2.2vw, 20px);
        height: clamp(16px, 2.2vw, 20px);
    }

    .auth-social-divider {
        margin-top: clamp(10px, 1.5vw, 16px);
        gap: 8px;
    }

    .auth-social-divider span {
        font-size: clamp(9px, 1.1vw, 11px);
    }

    /* ── Form labels & inputs ── */
    .auth-label {
        font-size: clamp(11px, 1.3vw, 13px);
        margin-bottom: clamp(3px, 0.5vw, 5px);
    }

    .auth-input-wrap svg,
    .auth-input-wrap i {
        left: clamp(8px, 1.2vw, 12px);
        width: clamp(13px, 1.6vw, 15px);
        height: clamp(13px, 1.6vw, 15px);
    }

    .auth-input {
        height: clamp(36px, 5.5vw, 42px);
        border-radius: clamp(5px, 0.8vw, 7px);
        font-size: clamp(13px, 1.8vw, 15px);
        padding-left: clamp(30px, 4.5vw, 38px);
        padding-right: clamp(8px, 1.2vw, 14px);
    }

    .auth-username-prefix {
        left: clamp(8px, 1.2vw, 12px);
        font-size: clamp(13px, 1.8vw, 15px);
    }

    .auth-username-wrap .auth-input {
        padding-left: clamp(20px, 3vw, 26px);
    }

    .auth-char-counter {
        font-size: clamp(9px, 1.1vw, 11px);
        right: clamp(6px, 1vw, 10px);
    }

    /* Password toggle */
    .auth-toggle-pw {
        right: clamp(6px, 1vw, 10px);
    }

    .auth-toggle-pw svg {
        width: clamp(13px, 1.6vw, 15px);
        height: clamp(13px, 1.6vw, 15px);
    }

    /* Password requirements */
    .auth-pw-reqs {
        gap: clamp(2px, 0.5vw, 5px) clamp(6px, 1.2vw, 12px);
        padding: clamp(6px, 1vw, 10px) clamp(8px, 1.2vw, 12px);
        margin-bottom: clamp(8px, 1.2vw, 14px);
        border-radius: clamp(4px, 0.6vw, 6px);
    }

    .auth-pw-req {
        font-size: clamp(10px, 1.3vw, 12px);
        gap: clamp(3px, 0.5vw, 5px);
    }

    .auth-pw-req svg {
        width: clamp(10px, 1.3vw, 12px);
        height: clamp(10px, 1.3vw, 12px);
    }

    /* Row helpers */
    .auth-row {
        gap: clamp(8px, 1.2vw, 14px);
        margin-bottom: clamp(8px, 1.2vw, 14px);
    }

    .auth-group {
        margin-bottom: clamp(8px, 1.2vw, 14px);
    }

    .auth-group--dob {
        margin-top: clamp(5px, 0.8vw, 10px);
    }

    /* Checkboxes */
    .auth-checkbox-label {
        font-size: clamp(11px, 1.5vw, 13px);
        gap: clamp(5px, 0.8vw, 8px);
        margin-bottom: clamp(5px, 0.8vw, 8px);
    }

    .auth-checkbox-label input[type="checkbox"] {
        width: clamp(13px, 1.8vw, 16px);
        height: clamp(13px, 1.8vw, 16px);
    }

    /* Submit button */
    .auth-submit {
        height: clamp(36px, 5.5vw, 44px);
        border-radius: clamp(5px, 0.8vw, 8px);
        font-size: clamp(13px, 1.8vw, 15px);
        gap: clamp(4px, 0.6vw, 8px);
    }

    .auth-submit svg {
        width: clamp(14px, 1.8vw, 16px);
        height: clamp(14px, 1.8vw, 16px);
    }

    .auth-form-submit-wrap {
        margin-top: clamp(12px, 1.8vw, 18px);
    }

    /* Forgot password */
    .auth-forgot {
        margin-bottom: clamp(10px, 1.5vw, 16px);
    }

    .auth-forgot a {
        font-size: clamp(10px, 1.3vw, 12px);
    }

    /* Error messages */
    .auth-error {
        padding: clamp(6px, 1vw, 10px) clamp(8px, 1.2vw, 12px);
        border-radius: clamp(4px, 0.6vw, 7px);
        margin-bottom: clamp(8px, 1.2vw, 14px);
        font-size: clamp(12px, 1.5vw, 14px);
    }

    .auth-field-error {
        font-size: clamp(10px, 1.3vw, 12px);
        margin-top: 3px;
    }

    /* Redirect */
    .auth-redirect {
        font-size: clamp(11px, 1.5vw, 13px);
        margin-top: clamp(8px, 1.2vw, 14px);
    }

    /* Why Join card */
    .auth-why-card {
        padding: clamp(12px, 1.8vw, 18px) clamp(14px, 2vw, 20px) !important;
    }

    .auth-why-card h3 {
        font-size: clamp(12px, 1.6vw, 15px);
        margin-bottom: clamp(8px, 1.2vw, 14px);
    }

    .auth-why-item {
        gap: clamp(6px, 1vw, 10px);
        margin-bottom: clamp(5px, 0.8vw, 9px);
    }

    .auth-why-dot {
        width: clamp(5px, 0.7vw, 7px);
        height: clamp(5px, 0.7vw, 7px);
    }

    .auth-why-item span {
        font-size: clamp(12px, 1.5vw, 14px);
    }

    .auth-left-column {
        gap: clamp(10px, 1.6vw, 18px);
    }

    /* DOB custom selects — match auth-input height */
    .auth-page .select-selected {
        height: clamp(36px, 5.5vw, 42px);
        font-size: clamp(13px, 1.8vw, 15px);
        border-radius: clamp(5px, 0.8vw, 7px);
        display: flex;
        align-items: center;
        padding: 0 clamp(28px, 4vw, 36px) 0 clamp(10px, 1.4vw, 14px);
    }
}

/* ============================================================
   Auth pages — Phone only (max-width: 640px)
   ============================================================ */
@media (max-width: 640px) {

    /* Single-column layout for both pages */
    .auth-content--login,
    .auth-content--register {
        grid-template-columns: 1fr !important;
        max-width: 100%;
        padding: 0 16px calc(var(--bottom-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 24px);
    }

    /* Name + Username row: also 2 columns on phone (compact) */
    .auth-row--2 {
        grid-template-columns: 1fr;
    }

    /* Keep DOB row as 3 cols */
    .auth-row--dob {
        grid-template-columns: 1fr 1.5fr 1fr;
        gap: 6px;
    }

    /* Header */
    .auth-page .auth-header h1 {
        font-size: clamp(20px, 5.5vw, 26px);
    }

    .auth-page .auth-header p {
        font-size: 13px;
        max-width: 100%;
    }

    /* Social buttons — touch-friendly */
    .auth-social-btn {
        padding: 11px 14px;
        font-size: 14px;
        gap: 10px;
        border-radius: 8px;
    }

    .auth-social-btn img,
    .auth-social-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Inputs */
    .auth-input {
        height: 44px;
        font-size: 15px;
        padding-left: 36px;
    }

    .auth-input-wrap svg,
    .auth-input-wrap i {
        left: 10px;
        width: 15px;
        height: 15px;
    }

    .auth-label {
        font-size: 13px;
        margin-bottom: 4px;
    }

    /* Password with toggle — ensure enough right padding */
    .auth-input[type="password"],
    .auth-input[type="text"] {
        padding-right: 40px !important;
    }

    .auth-toggle-pw {
        right: 10px;
    }

    .auth-toggle-pw svg {
        width: 16px;
        height: 16px;
    }

    /* Username @ prefix */
    .auth-username-prefix {
        font-size: 15px;
        left: 10px;
    }

    .auth-username-wrap .auth-input {
        padding-left: 22px;
    }

    /* Char counter */
    .auth-char-counter {
        font-size: 10px;
        right: 8px;
    }

    /* Password requirements */
    .auth-pw-reqs {
        gap: 4px 8px;
        padding: 8px 10px;
        margin-bottom: 10px;
    }

    .auth-pw-req {
        font-size: 11px;
        gap: 4px;
    }

    .auth-pw-req svg {
        width: 10px;
        height: 10px;
    }

    /* Submit */
    .auth-submit {
        height: 44px;
        font-size: 15px;
        border-radius: 8px;
    }

    .auth-submit svg {
        width: 16px;
        height: 16px;
    }

    /* Form spacing */
    .auth-row,
    .auth-group {
        margin-bottom: 12px;
    }

    .auth-form-submit-wrap {
        margin-top: 14px;
    }

    /* Checkboxes */
    .auth-checkbox-label {
        font-size: 13px;
        gap: 8px;
    }

    .auth-checkbox-label input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 1px;
    }

    /* Error messages */
    .auth-error {
        font-size: 13px;
        padding: 8px 12px;
    }

    .auth-field-error {
        font-size: 11px;
    }

    /* Redirect / forgot */
    .auth-redirect {
        font-size: 13px;
        margin-top: 12px;
    }

    .auth-forgot a {
        font-size: 12px;
    }

    /* DOB custom selects */
    .auth-page .select-selected {
        height: 44px;
        font-size: 14px;
        border-radius: 6px;
    }

    /* Why Join card */
    .auth-why-card h3 {
        font-size: 13px;
    }

    .auth-why-item span {
        font-size: 13px;
    }

    .auth-why-item {
        gap: 8px;
        margin-bottom: 7px;
    }
}