@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --auth-primary: #e41f07;
    --auth-secondary: #00918e;
    --auth-bg: #f5f6f8;
    --auth-surface: #ffffff;
    --auth-border: #e8eaee;
    --auth-text: #262a2a;
    --auth-muted: #6f7680;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 8% 10%, rgba(228, 31, 7, 0.12), transparent 36%),
        radial-gradient(circle at 90% 85%, rgba(0, 145, 142, 0.18), transparent 35%),
        linear-gradient(160deg, #f6f8fb 0%, #edf1f5 100%);
    font-family: 'Noto Sans', sans-serif;
    color: var(--auth-text);
    padding: 16px;
}

.login-container {
    width: 100%;
    max-width: 1040px;
    background: var(--auth-surface);
    border: 1px solid var(--auth-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
    display: flex;
    min-height: 640px;
}

.login-left {
    flex: 0 0 46%;
    background:
        radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.16), transparent 35%),
        linear-gradient(150deg, #182436 0%, #1f3049 45%, #24456a 100%);
    color: #f8fbff;
    position: relative;
    padding: 48px 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.brand-content h1 {
    margin: 0 0 10px;
    font-size: 1.9rem;
    font-weight: 700;
}

.brand-content p {
    margin: 0;
    color: rgba(245, 249, 255, 0.92);
    line-height: 1.6;
    font-size: 0.92rem;
}

.brand-logo {
    width: 90px;
    height: 90px;
    margin: 0 auto 18px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-logo i {
    font-size: 2rem;
    color: #fff;
}

.brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-features {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.brand-features i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
}

.login-form-section {
    flex: 1;
    padding: 36px 38px 30px;
    overflow-y: auto;
}

.login-header {
    margin-bottom: 18px;
}

.login-header h1 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    color: #1c232b;
}

.login-header p {
    margin: 8px 0 0;
    color: var(--auth-muted);
    font-size: 0.9rem;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    color: #3f4a57;
    font-size: 0.84rem;
    font-weight: 600;
}

.input-wrapper {
    position: relative;
    margin-bottom: 14px;
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row .input-wrapper {
    flex: 1;
}

.input-wrapper i.fa-user,
.input-wrapper i.fa-envelope,
.input-wrapper i.fa-phone,
.input-wrapper i.fa-lock,
.input-wrapper i.fa-user-tag,
.input-wrapper i.fa-key {
    position: absolute;
    left: 14px;
    top: 39px;
    color: #8a93a0;
    font-size: 0.92rem;
    z-index: 1;
}

.form-control {
    width: 100%;
    border: 1px solid #d7dde5;
    border-radius: 10px;
    background: #f9fbfd;
    color: #1f2831;
    height: 44px;
    padding: 10px 40px;
    font-size: 0.93rem;
    transition: all 0.2s ease;
}

.form-control:focus {
    background: #fff;
    border-color: var(--auth-secondary);
    box-shadow: 0 0 0 3px rgba(0, 145, 142, 0.14);
    outline: none;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 37px;
    border: 0;
    background: transparent;
    color: #8a93a0;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--auth-secondary);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 0.83rem;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-check-input {
    margin: 0;
    accent-color: var(--auth-secondary);
}

.form-check-label {
    color: var(--auth-muted);
}

.forgot-link,
.signup-text a {
    color: var(--auth-secondary);
    font-weight: 600;
    text-decoration: none;
}

.forgot-link:hover,
.signup-text a:hover {
    color: #0a7a79;
}

.btn-primary {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #00918e 0%, #0f6b8d 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 145, 142, 0.24);
}

.btn-secondary {
    width: 100%;
    border: 1px solid #d8dde6;
    background: #fff;
    color: #3b4654;
    border-radius: 10px;
    padding: 11px 14px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: 600;
}

.btn-secondary:hover {
    border-color: var(--auth-secondary);
    color: var(--auth-secondary);
}

.signup-text {
    margin: 14px 0 0;
    text-align: center;
    font-size: 0.86rem;
    color: #687381;
}

.divider {
    margin: 14px 0;
    position: relative;
    text-align: center;
}

.divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #e5e8ee;
}

.divider span {
    position: relative;
    display: inline-block;
    background: #fff;
    padding: 0 10px;
    color: #8a93a0;
    font-size: 0.74rem;
    font-weight: 700;
}

.alert {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.86rem;
}

.alert-danger {
    border-color: #ffd8d2;
    background: #fff1ef;
    color: #9b2d1f;
}

.alert-success {
    border-color: #b5e8d9;
    background: #eefcf7;
    color: #0a6b60;
}

.text-danger {
    display: block;
    color: #bc3a2f;
    margin-top: 4px;
    font-size: 0.78rem;
}

@media (max-width: 992px) {
    body {
        padding: 12px;
    }

    .login-container {
        max-width: 700px;
        min-height: auto;
    }

    .login-left {
        display: none;
    }

    .login-form-section {
        padding: 28px 22px;
    }
}

@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

html.dark-mode body {
    background:
        radial-gradient(circle at 12% 15%, rgba(228, 31, 7, 0.08), transparent 34%),
        radial-gradient(circle at 90% 80%, rgba(0, 145, 142, 0.12), transparent 34%),
        linear-gradient(150deg, #121620 0%, #171c29 100%);
    color: #dde4ee;
}

html.dark-mode .login-container {
    background: #1b2231;
    border-color: #2d374b;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

html.dark-mode .login-header h1 {
    color: #f1f5fb;
}

html.dark-mode .login-header p,
html.dark-mode .signup-text,
html.dark-mode .form-check-label {
    color: #9ca6b6;
}

html.dark-mode .form-label {
    color: #d2d9e5;
}

html.dark-mode .form-control {
    background: #232d40;
    border-color: #34405a;
    color: #e3eaf5;
}

html.dark-mode .form-control:focus {
    background: #232d40;
    border-color: #16a5a2;
}

html.dark-mode .input-wrapper i.fa-user,
html.dark-mode .input-wrapper i.fa-envelope,
html.dark-mode .input-wrapper i.fa-phone,
html.dark-mode .input-wrapper i.fa-lock,
html.dark-mode .input-wrapper i.fa-user-tag,
html.dark-mode .input-wrapper i.fa-key,
html.dark-mode .password-toggle {
    color: #9eacc2;
}

html.dark-mode .divider span {
    background: #1b2231;
    color: #90a0b8;
}

html.dark-mode .divider::before {
    border-top-color: #303b51;
}

html.dark-mode .btn-secondary {
    background: #232d40;
    border-color: #34405a;
    color: #d0d9e7;
}

html.dark-mode .btn-secondary:hover {
    border-color: #16a5a2;
    color: #16a5a2;
}

/* Modern auth refresh: realtime, responsive, no-page-scroll layout */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --auth-accent-a: #0f766e;
    --auth-accent-b: #1d4ed8;
    --auth-glow: rgba(29, 78, 216, 0.2);
}

html,
body,
body.account-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body.account-page {
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Manrope', sans-serif;
    background:
        radial-gradient(1100px 500px at 5% 10%, rgba(16, 185, 129, 0.14), transparent 65%),
        radial-gradient(900px 420px at 96% 92%, rgba(59, 130, 246, 0.22), transparent 64%),
        linear-gradient(135deg, #edf3ff 0%, #f8fbff 100%);
}

.login-container {
    width: min(1180px, 96vw) !important;
    height: min(92vh, 820px) !important;
    min-height: 0 !important;
    max-height: 92vh !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.2),
        0 6px 18px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(6px);
}

.login-left {
    flex: 0 0 48% !important;
    padding: clamp(24px, 3vw, 42px) !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.16), transparent 36%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.18), transparent 30%),
        linear-gradient(155deg, #0f172a 0%, #1e3a8a 52%, #0f766e 100%) !important;
}

.brand-content h1 {
    font-size: clamp(1.7rem, 2.4vw, 2.4rem) !important;
    letter-spacing: -0.02em;
}

.brand-content p {
    max-width: 38ch;
    margin: 0 auto;
    font-size: 0.95rem !important;
}

.brand-logo {
    width: clamp(84px, 10vw, 108px) !important;
    height: clamp(84px, 10vw, 108px) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.brand-features i {
    width: 38px;
    height: 38px;
}

.login-form-section {
    padding: clamp(18px, 2.8vw, 34px) clamp(18px, 3vw, 34px) !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-brand {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.form-brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #0f766e 0%, #1d4ed8 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 18px var(--auth-glow);
}

.form-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.form-brand-meta h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.form-brand-meta p {
    margin: 0;
    font-size: 0.74rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.login-header {
    margin-bottom: 10px !important;
}

.login-header h1 {
    font-size: clamp(1.35rem, 2vw, 1.95rem) !important;
    letter-spacing: -0.02em;
}

.login-header p {
    margin-top: 4px !important;
}

.form-label {
    margin-bottom: 5px !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.input-wrapper {
    margin-bottom: 10px !important;
}

.form-row {
    gap: 10px !important;
}

.form-control {
    height: 42px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border-color: #dbe3ef !important;
    font-size: 0.9rem !important;
}

.form-control:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.16) !important;
}

.input-wrapper i.fa-user,
.input-wrapper i.fa-envelope,
.input-wrapper i.fa-phone,
.input-wrapper i.fa-lock,
.input-wrapper i.fa-user-tag,
.input-wrapper i.fa-key {
    top: 36px !important;
}

.password-toggle {
    top: 34px !important;
}

.btn-primary {
    height: 44px !important;
    border-radius: 12px !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    font-size: 0.93rem !important;
    background: linear-gradient(120deg, #0f766e 0%, #1d4ed8 100%) !important;
}

.btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 22px rgba(29, 78, 216, 0.22) !important;
}

.btn-secondary {
    border-radius: 12px !important;
    padding: 10px 14px !important;
}

.form-options {
    margin-bottom: 12px !important;
}

.divider {
    margin: 10px 0 !important;
}

.signup-text {
    margin-top: 10px !important;
}

.alert {
    margin-bottom: 10px !important;
    padding: 9px 11px !important;
}

@media (max-width: 992px) {
    body.account-page {
        background:
            radial-gradient(700px 300px at 8% 8%, rgba(16, 185, 129, 0.16), transparent 62%),
            radial-gradient(720px 350px at 92% 90%, rgba(59, 130, 246, 0.22), transparent 62%),
            linear-gradient(145deg, #eef3ff 0%, #f8fbff 100%);
    }

    .login-container {
        width: min(760px, 96vw) !important;
        height: min(94vh, 760px) !important;
        max-height: 94vh !important;
        border-radius: 18px !important;
    }

    .login-left {
        display: none !important;
    }

    .form-brand {
        display: flex;
    }
}

@media (max-width: 640px) {
    .login-container {
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .login-form-section {
        padding: 14px 14px 10px !important;
    }

    .form-row {
        gap: 8px !important;
    }

    .form-control {
        height: 40px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .btn-primary,
    .btn-secondary {
        height: 42px !important;
    }
}

@media (max-height: 780px) {
    .login-container {
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    .login-form-section {
        padding: 10px 14px !important;
    }

    .brand-content h1 {
        font-size: 1.6rem !important;
    }

    .brand-logo {
        width: 78px !important;
        height: 78px !important;
        margin-bottom: 12px !important;
    }

    .input-wrapper {
        margin-bottom: 8px !important;
    }

    .form-options,
    .divider,
    .signup-text,
    .alert {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
}

/* =====================================================================
   AUTH V3 MOBILE-FIRST OVERRIDES (Modern SaaS inspired)
   ===================================================================== */

body.account-page {
    min-height: 100dvh !important;
    overflow-x: hidden !important;
}

.login-container {
    display: grid !important;
    grid-template-columns: minmax(320px, 0.95fr) minmax(340px, 1.05fr) !important;
    align-items: stretch !important;
}

.login-left {
    display: flex !important;
}

.login-form-section {
    position: relative;
}

.login-form-section form {
    width: 100%;
}

.login-header h1 {
    font-weight: 800 !important;
}

.form-control,
.btn-primary,
.btn-secondary {
    border-radius: 14px !important;
}

.btn-primary {
    font-weight: 700 !important;
}

.input-wrapper i.fa-user,
.input-wrapper i.fa-envelope,
.input-wrapper i.fa-phone,
.input-wrapper i.fa-lock,
.input-wrapper i.fa-user-tag,
.input-wrapper i.fa-key {
    pointer-events: none;
}

.text-danger {
    line-height: 1.2;
}

/* Tablet */
@media (max-width: 1100px) {
    body.account-page {
        overflow-y: auto !important;
        padding: 10px !important;
    }

    .login-container {
        width: min(900px, 98vw) !important;
        max-height: none !important;
        height: auto !important;
        grid-template-columns: 42% 58% !important;
        border-radius: 18px !important;
    }

    .login-left {
        padding: 20px !important;
    }

    .brand-content h1 {
        font-size: 1.55rem !important;
    }

    .login-form-section {
        overflow: visible !important;
        padding: 20px !important;
    }
}

/* Mobile: convert to single-column, full readable flow */
@media (max-width: 768px) {
    html,
    body,
    body.account-page {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.account-page {
        padding: 0 !important;
        background:
            radial-gradient(380px 180px at 4% 2%, rgba(16, 185, 129, 0.14), transparent 70%),
            radial-gradient(420px 220px at 98% 98%, rgba(59, 130, 246, 0.18), transparent 72%),
            linear-gradient(160deg, #f3f7ff 0%, #fcfdff 100%) !important;
    }

    .login-container {
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        grid-template-columns: 1fr !important;
        background: transparent !important;
    }

    .login-left {
        display: none !important;
    }

    .login-form-section {
        overflow: visible !important;
        padding: 16px 14px 18px !important;
        justify-content: flex-start !important;
        background: transparent !important;
    }

    .form-brand {
        display: flex !important;
        margin-bottom: 14px !important;
    }

    .form-brand-logo {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    .form-brand-meta h2 {
        font-size: 1rem !important;
    }

    .form-brand-meta p {
        font-size: 0.7rem !important;
    }

    .login-header {
        margin-bottom: 12px !important;
    }

    .login-header h1 {
        font-size: 1.35rem !important;
        line-height: 1.2;
    }

    .login-header p {
        font-size: 0.82rem !important;
    }

    .form-row {
        display: block !important;
    }

    .input-wrapper {
        margin-bottom: 11px !important;
    }

    .form-label {
        font-size: 0.74rem !important;
        margin-bottom: 4px !important;
    }

    .form-control {
        height: 44px !important;
        font-size: 0.92rem !important;
        padding-left: 38px !important;
        padding-right: 40px !important;
    }

    .input-wrapper i.fa-user,
    .input-wrapper i.fa-envelope,
    .input-wrapper i.fa-phone,
    .input-wrapper i.fa-lock,
    .input-wrapper i.fa-user-tag,
    .input-wrapper i.fa-key {
        top: 34px !important;
        left: 12px !important;
    }

    .password-toggle {
        top: 33px !important;
        right: 8px !important;
    }

    .form-options {
        gap: 8px;
        margin-bottom: 12px !important;
    }

    .form-check-label,
    .forgot-link,
    .signup-text {
        font-size: 0.8rem !important;
    }

    .btn-primary,
    .btn-secondary {
        height: 44px !important;
        font-size: 0.9rem !important;
    }

    .divider {
        margin: 12px 0 !important;
    }

    .divider span {
        font-size: 0.7rem !important;
    }

    .alert {
        margin-bottom: 10px !important;
        padding: 10px !important;
        font-size: 0.82rem !important;
    }
}

/* Very small mobile phones */
@media (max-width: 390px) {
    .login-form-section {
        padding: 12px 10px 16px !important;
    }

    .form-brand {
        margin-bottom: 10px !important;
    }

    .login-header h1 {
        font-size: 1.2rem !important;
    }

    .form-control,
    .btn-primary,
    .btn-secondary {
        height: 42px !important;
    }

    .input-wrapper {
        margin-bottom: 9px !important;
    }
}

/* Dark mode parity for new mobile overrides */
html.dark-mode body.account-page {
    background:
        radial-gradient(520px 230px at 4% 0%, rgba(16, 185, 129, 0.08), transparent 70%),
        radial-gradient(580px 280px at 98% 100%, rgba(59, 130, 246, 0.14), transparent 72%),
        linear-gradient(160deg, #0c1322 0%, #111a2b 100%) !important;
}

@media (max-width: 768px) {
    html.dark-mode .login-container,
    html.dark-mode .login-form-section {
        background: transparent !important;
    }

    html.dark-mode .form-brand-meta h2 {
        color: #eaf1ff !important;
    }
}

/* =====================================================================
   AUTH V4 COMPLETE STYLE (Login/Register/ForgotPassword)
   ===================================================================== */
.auth-v4.login-container {
    width: min(1180px, 96vw) !important;
    min-height: min(90vh, 780px) !important;
    max-height: min(90vh, 780px) !important;
    border-radius: 26px !important;
    border: 1px solid rgba(157, 168, 189, 0.3) !important;
    box-shadow: 0 26px 70px rgba(13, 24, 46, 0.16) !important;
    display: grid !important;
    grid-template-columns: 44% 56% !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.auth-v4 .auth-showcase {
    background:
        radial-gradient(circle at 16% 16%, rgba(255, 255, 255, 0.18), transparent 34%),
        radial-gradient(circle at 80% 86%, rgba(255, 255, 255, 0.14), transparent 30%),
        linear-gradient(155deg, #0b3f6f 0%, #0f766e 50%, #f97316 100%) !important;
    padding: clamp(24px, 3vw, 40px) !important;
    color: #f8fbff;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

.auth-v4 .auth-showcase-header h1 {
    margin: 0 0 10px;
    font-size: clamp(1.75rem, 2.8vw, 2.45rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.auth-v4 .auth-showcase-header p {
    margin: 0;
    max-width: 34ch;
    color: rgba(247, 252, 255, 0.95);
    line-height: 1.6;
    font-size: 0.95rem;
}

.auth-v4 .auth-points {
    margin: 0;
    display: grid;
    gap: 10px;
}

.auth-v4 .auth-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(248, 252, 255, 0.97);
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.auth-v4 .auth-points i {
    width: 24px;
    text-align: center;
}

.auth-v4 .brand-logo {
    width: 88px !important;
    height: 88px !important;
    border-radius: 18px !important;
    margin: 0 0 18px !important;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.auth-v4 .brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auth-v4 .brand-logo i {
    color: #ffffff;
    font-size: 2rem;
}

.auth-v4 .login-form-section {
    padding: clamp(18px, 2.8vw, 36px) clamp(16px, 2.6vw, 34px) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.auth-v4 .login-header {
    margin-bottom: 12px !important;
}

.auth-v4 .login-header h1 {
    margin: 0;
    color: #10213c;
    font-size: clamp(1.4rem, 2.1vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.auth-v4 .login-header p {
    margin: 5px 0 0;
    color: #5f7086;
    font-size: 0.9rem;
}

.auth-v4 .form-label {
    color: #35455d;
    margin-bottom: 5px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.auth-v4 .input-wrapper {
    margin-bottom: 10px !important;
}

.auth-v4 .form-row {
    gap: 10px !important;
}

.auth-v4 .form-control {
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid #d7e0ec !important;
    background: #f8fbff !important;
    color: #10213c;
    padding-left: 38px !important;
    padding-right: 40px !important;
    font-size: 0.92rem;
}

.auth-v4 .form-control:focus {
    border-color: #0f766e !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14) !important;
}

.auth-v4 .input-wrapper i.fa-user,
.auth-v4 .input-wrapper i.fa-envelope,
.auth-v4 .input-wrapper i.fa-phone,
.auth-v4 .input-wrapper i.fa-lock,
.auth-v4 .input-wrapper i.fa-user-tag,
.auth-v4 .input-wrapper i.fa-key {
    top: 34px !important;
    left: 12px !important;
    color: #6e7f98 !important;
}

.auth-v4 .password-toggle {
    top: 33px !important;
    right: 8px !important;
    color: #6e7f98 !important;
}

.auth-v4 .password-toggle:hover {
    color: #0f766e !important;
}

.auth-v4 .form-options {
    margin-bottom: 12px !important;
}

.auth-v4 .form-check-label,
.auth-v4 .forgot-link,
.auth-v4 .signup-text {
    font-size: 0.84rem !important;
}

.auth-v4 .btn-primary {
    height: 46px !important;
    border-radius: 14px !important;
    background: linear-gradient(120deg, #0b3f6f 0%, #0f766e 55%, #f97316 100%) !important;
    color: #ffffff !important;
    border: none;
    font-size: 0.92rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none !important;
}

.auth-v4 .btn-primary:hover {
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.24) !important;
}

.auth-v4 .btn-secondary {
    height: 44px;
    border-radius: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-v4 .alert {
    border-radius: 12px !important;
    margin-bottom: 10px !important;
}

.auth-v4 .divider {
    margin: 11px 0 !important;
}

.auth-v4 .divider span {
    font-size: 0.7rem !important;
}

.auth-v4 .form-brand {
    display: none;
}

@media (max-width: 1024px) {
    .auth-v4.login-container {
        width: min(900px, 98vw) !important;
        max-height: none !important;
        min-height: auto !important;
        grid-template-columns: 42% 58% !important;
    }

    .auth-v4 .login-form-section {
        overflow: visible !important;
    }
}

@media (max-width: 768px) {
    html,
    body,
    body.account-page {
        min-height: 100dvh !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    body.account-page {
        padding: 0 !important;
    }

    .auth-v4.login-container {
        width: 100% !important;
        min-height: 100dvh !important;
        max-height: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        grid-template-columns: 1fr !important;
    }

    .auth-v4 .auth-showcase {
        display: none !important;
    }

    .auth-v4 .login-form-section {
        padding: 14px 12px 16px !important;
        justify-content: flex-start;
    }

    .auth-v4 .form-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .auth-v4 .form-brand-logo {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: linear-gradient(120deg, #0b3f6f 0%, #0f766e 55%, #f97316 100%);
        display: grid;
        place-items: center;
        overflow: hidden;
        color: #ffffff;
    }

    .auth-v4 .form-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #ffffff;
    }

    .auth-v4 .form-brand-meta h2 {
        margin: 0;
        font-size: 0.98rem;
        font-weight: 800;
        color: #10213c;
    }

    .auth-v4 .form-brand-meta p {
        margin: 0;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #64748b;
        font-weight: 700;
    }

    .auth-v4 .form-row {
        display: block !important;
    }

    .auth-v4 .input-wrapper {
        margin-bottom: 11px !important;
    }
}

@media (max-width: 390px) {
    .auth-v4 .login-form-section {
        padding: 10px !important;
    }

    .auth-v4 .login-header h1 {
        font-size: 1.22rem !important;
    }

    .auth-v4 .form-control,
    .auth-v4 .btn-primary,
    .auth-v4 .btn-secondary {
        height: 42px !important;
    }
}

html.dark-mode .auth-v4.login-container {
    background: #141e30 !important;
    border-color: #28364b !important;
}

html.dark-mode .auth-v4 .login-form-section {
    background: linear-gradient(180deg, #172236 0%, #18283c 100%) !important;
}

html.dark-mode .auth-v4 .login-header h1,
html.dark-mode .auth-v4 .form-brand-meta h2,
html.dark-mode .auth-v4 .form-label {
    color: #e9f0fb !important;
}

html.dark-mode .auth-v4 .login-header p,
html.dark-mode .auth-v4 .form-brand-meta p,
html.dark-mode .auth-v4 .signup-text,
html.dark-mode .auth-v4 .form-check-label {
    color: #a8b6cb !important;
}

html.dark-mode .auth-v4 .form-control {
    background: #1d2b42 !important;
    border-color: #324865 !important;
    color: #e4ecf9 !important;
}

html.dark-mode .auth-v4 .form-control:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.24) !important;
}

html.dark-mode .auth-v4 .input-wrapper i.fa-user,
html.dark-mode .auth-v4 .input-wrapper i.fa-envelope,
html.dark-mode .auth-v4 .input-wrapper i.fa-phone,
html.dark-mode .auth-v4 .input-wrapper i.fa-lock,
html.dark-mode .auth-v4 .input-wrapper i.fa-user-tag,
html.dark-mode .auth-v4 .input-wrapper i.fa-key,
html.dark-mode .auth-v4 .password-toggle {
    color: #9bb0cd !important;
}

html.dark-mode .auth-v4 .btn-secondary {
    background: #1d2b42 !important;
    border-color: #324865 !important;
    color: #e4ecf9 !important;
}

html.dark-mode .auth-v4 .btn-secondary:hover {
    border-color: #14b8a6 !important;
    color: #14b8a6 !important;
}

/* =====================================================================
   AUTH V5 FIGMA-INSPIRED STYLE (Desktop + Mobile)
   ===================================================================== */
.auth-v5.login-container {
    width: min(1120px, 94vw) !important;
    min-height: min(86vh, 760px) !important;
    max-height: min(86vh, 760px) !important;
    display: grid !important;
    grid-template-columns: 48% 52% !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    border: 1px solid #e3e8f3 !important;
    background: #ffffff !important;
    box-shadow: 0 32px 80px rgba(14, 30, 62, 0.16) !important;
}

.auth-v5 .auth-showcase {
    position: relative;
    background: linear-gradient(155deg, #f4f7ff 0%, #ecf5ff 52%, #eef9f6 100%) !important;
    color: #0f2a4a;
    padding: clamp(26px, 3vw, 42px) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.auth-v5 .auth-showcase::before,
.auth-v5 .auth-showcase::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.auth-v5 .auth-showcase::before {
    width: 360px;
    height: 360px;
    left: -160px;
    top: -120px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0.02) 72%);
}

.auth-v5 .auth-showcase::after {
    width: 300px;
    height: 300px;
    right: -130px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.2) 0%, rgba(15, 118, 110, 0.02) 74%);
}

.auth-v5 .auth-showcase-header,
.auth-v5 .auth-points {
    position: relative;
    z-index: 1;
}

.auth-v5 .auth-showcase-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-v5 .brand-logo {
    width: 76px !important;
    height: 76px !important;
    margin: 0 0 16px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid #d9e4f6 !important;
    box-shadow: 0 12px 24px rgba(52, 86, 146, 0.14);
}

.auth-v5 .brand-logo i {
    color: #2563eb;
}

.auth-v5 .auth-showcase-header h1 {
    margin: 0 0 10px;
    font-size: clamp(1.72rem, 2.6vw, 2.3rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: #14335d;
}

.auth-v5 .auth-showcase-header p {
    margin: 0;
    max-width: 36ch;
    color: #3f5f86;
    font-size: 0.93rem;
    line-height: 1.64;
}

.auth-v5 .auth-points {
    margin-top: 20px;
    margin-bottom: 0;
    display: grid;
    gap: 10px;
    width: min(100%, 360px);
}

.auth-v5 .auth-points li {
    border-radius: 14px;
    border: 1px solid #dbe5f3;
    background: rgba(255, 255, 255, 0.86);
    color: #294a74;
    font-weight: 650;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.auth-v5 .auth-points i {
    width: 22px;
    color: #0f766e;
    text-align: center;
}

.auth-v5 .login-form-section {
    background: #ffffff !important;
    padding: clamp(24px, 2.8vw, 38px) clamp(18px, 2.8vw, 34px) !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-v5 .login-header {
    margin-bottom: 12px !important;
}

.auth-v5 .login-header h1 {
    margin: 0;
    color: #0f2745;
    font-size: clamp(1.45rem, 2vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.auth-v5 .login-header p {
    margin: 4px 0 0;
    color: #647892;
    font-size: 0.88rem;
}

.auth-v5 .form-brand {
    display: none;
}

.auth-v5 .form-label {
    font-size: 0.74rem;
    color: #415773;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 5px;
}

.auth-v5 .input-wrapper {
    position: relative;
    margin-bottom: 10px !important;
}

.auth-v5 .input-wrapper .text-danger {
    position: relative;
}

.auth-v5 .form-row {
    gap: 10px !important;
}

.auth-v5 .form-control {
    height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid #d9e3f2 !important;
    background: #f9fbff !important;
    color: #102741;
    padding-left: 40px !important;
    padding-right: 42px !important;
    font-size: 0.92rem !important;
}

.auth-v5 .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
    background: #ffffff !important;
}

.auth-v5 .input-wrapper i.fa-user,
.auth-v5 .input-wrapper i.fa-envelope,
.auth-v5 .input-wrapper i.fa-phone,
.auth-v5 .input-wrapper i.fa-lock,
.auth-v5 .input-wrapper i.fa-user-tag,
.auth-v5 .input-wrapper i.fa-key {
    position: absolute !important;
    top: 36px !important;
    bottom: auto !important;
    left: 13px !important;
    color: #7086a6 !important;
}

.auth-v5 .password-toggle {
    position: absolute !important;
    top: 34px !important;
    bottom: auto !important;
    right: 8px !important;
    color: #7086a6 !important;
}

/* Hide browser native password reveal button */
.auth-v5 input[type="password"]::-ms-reveal,
.auth-v5 input[type="password"]::-ms-clear,
.auth-v5 input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
}

.auth-v5 .password-toggle:hover {
    color: #2563eb !important;
}

.auth-v5 .form-options {
    margin-bottom: 12px !important;
}

.auth-v5 .form-check-label,
.auth-v5 .forgot-link,
.auth-v5 .signup-text {
    font-size: 0.83rem !important;
}

.auth-v5 .btn-primary {
    height: 47px !important;
    border-radius: 14px !important;
    background: linear-gradient(120deg, #2563eb 0%, #0f766e 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.91rem !important;
    text-transform: none !important;
    border: 0 !important;
}

.auth-v5 .btn-primary:hover {
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.24) !important;
}

.auth-v5 .btn-secondary {
    height: 45px;
    border-radius: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-v5 .divider {
    margin: 12px 0 !important;
}

.auth-v5 .alert {
    margin-bottom: 10px !important;
    border-radius: 12px !important;
}

@media (max-width: 1024px) {
    .auth-v5.login-container {
        width: min(920px, 98vw) !important;
        min-height: auto !important;
        max-height: none !important;
        grid-template-columns: 44% 56% !important;
    }

    .auth-v5 .login-form-section {
        overflow: visible !important;
    }
}

@media (max-width: 768px) {
    html,
    body,
    body.account-page {
        min-height: 100dvh !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    .auth-v5.login-container {
        width: 100% !important;
        min-height: 100dvh !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .auth-v5 .auth-showcase {
        display: none !important;
    }

    .login-left {
        display: none !important;
    }

    .auth-v5 .login-form-section {
        padding: 16px 12px 18px !important;
        justify-content: flex-start;
        background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%) !important;
    }

    .auth-v5 .form-brand {
        display: none !important;
    }

    .auth-v5 .form-brand-logo {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: linear-gradient(120deg, #2563eb 0%, #0f766e 100%);
        color: #ffffff;
    }

    .auth-v5 .form-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #ffffff;
    }

    .auth-v5 .form-brand-meta h2 {
        margin: 0;
        font-size: 0.98rem;
        color: #103056;
        font-weight: 800;
    }

    .auth-v5 .form-brand-meta p {
        margin: 0;
        color: #6c829f;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
    }

    .auth-v5 .form-row {
        display: block !important;
    }

    .auth-v5 .input-wrapper {
        margin-bottom: 11px !important;
    }
}

@media (max-width: 390px) {
    .auth-v5 .login-form-section {
        padding: 12px 10px 16px !important;
    }

    .auth-v5 .login-header h1 {
        font-size: 1.22rem !important;
    }

    .auth-v5 .form-control,
    .auth-v5 .btn-primary,
    .auth-v5 .btn-secondary {
        height: 43px !important;
    }
}

html.dark-mode .auth-v5.login-container {
    border-color: #2a3950 !important;
    background: #142036 !important;
}

html.dark-mode .auth-v5 .auth-showcase {
    background: linear-gradient(155deg, #152336 0%, #1c3050 50%, #1d4f4a 100%) !important;
}

html.dark-mode .auth-v5 .auth-showcase-header h1 {
    color: #eef4ff;
}

html.dark-mode .auth-v5 .auth-showcase-header p {
    color: #afc2de;
}

html.dark-mode .auth-v5 .auth-points li {
    background: rgba(20, 33, 55, 0.72);
    border-color: #2f4462;
    color: #d7e3f6;
}

html.dark-mode .auth-v5 .brand-logo {
    background: #1f314b !important;
    border-color: #335177 !important;
}

html.dark-mode .auth-v5 .brand-logo i {
    color: #89b6ff;
}

html.dark-mode .auth-v5 .login-form-section {
    background: linear-gradient(180deg, #17263d 0%, #182a41 100%) !important;
}

html.dark-mode .auth-v5 .login-header h1,
html.dark-mode .auth-v5 .form-brand-meta h2,
html.dark-mode .auth-v5 .form-label {
    color: #e8f0fc !important;
}

html.dark-mode .auth-v5 .login-header p,
html.dark-mode .auth-v5 .form-brand-meta p,
html.dark-mode .auth-v5 .signup-text,
html.dark-mode .auth-v5 .form-check-label {
    color: #a5b7d1 !important;
}

html.dark-mode .auth-v5 .form-control {
    background: #20334e !important;
    border-color: #334c6d !important;
    color: #e3edfb !important;
}

html.dark-mode .auth-v5 .form-control:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important;
}

html.dark-mode .auth-v5 .input-wrapper i.fa-user,
html.dark-mode .auth-v5 .input-wrapper i.fa-envelope,
html.dark-mode .auth-v5 .input-wrapper i.fa-phone,
html.dark-mode .auth-v5 .input-wrapper i.fa-lock,
html.dark-mode .auth-v5 .input-wrapper i.fa-user-tag,
html.dark-mode .auth-v5 .input-wrapper i.fa-key,
html.dark-mode .auth-v5 .password-toggle {
    color: #98afcf !important;
}

html.dark-mode .auth-v5 .btn-secondary {
    background: #20334e !important;
    border-color: #334c6d !important;
    color: #e6eeff !important;
}

html.dark-mode .auth-v5 .btn-secondary:hover {
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}

/* Realtime interaction polish */
.auth-ready .login-container {
    animation: authFadeIn 0.42s ease-out;
}

.auth-ready .login-form-section .input-wrapper,
.auth-ready .login-form-section .form-options,
.auth-ready .login-form-section .btn-primary,
.auth-ready .login-form-section .signup-text,
.auth-ready .login-form-section .divider,
.auth-ready .login-form-section .btn-secondary {
    animation: authRise 0.34s ease-out;
}

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes authRise {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.input-wrapper {
    transition: transform 0.18s ease;
}

.input-wrapper.is-filled .form-control {
    background: #ffffff !important;
}

.input-wrapper.field-valid .form-control {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important;
}

.input-wrapper.field-invalid .form-control {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.caps-lock-hint {
    display: none;
    color: #dc2626;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0.02em;
}

.caps-lock-hint.show {
    display: block;
}

.password-strength {
    margin-top: 6px;
}

.password-strength-bar {
    height: 6px;
    border-radius: 999px;
    width: 0;
    background: #d1d5db;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.password-strength-bar.weak { background: #ef4444; }
.password-strength-bar.medium { background: #f59e0b; }
.password-strength-bar.strong { background: #22c55e; }

.password-strength-text {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 0.72rem;
}

.btn-primary.is-loading {
    opacity: 0.92;
    pointer-events: none;
}

html.dark-mode .input-wrapper.is-filled .form-control {
    background: #1b2a3f !important;
}

html.dark-mode .caps-lock-hint {
    color: #fca5a5;
}

html.dark-mode .password-strength-text {
    color: #93a4bf;
}

html.dark-mode body.account-page {
    background:
        radial-gradient(800px 380px at 8% 12%, rgba(16, 185, 129, 0.1), transparent 65%),
        radial-gradient(920px 400px at 94% 86%, rgba(59, 130, 246, 0.16), transparent 63%),
        linear-gradient(145deg, #0b1220 0%, #121a2a 100%) !important;
}

html.dark-mode .form-brand-meta h2 {
    color: #e7edf9;
}

html.dark-mode .form-brand-meta p {
    color: #93a4bf;
}

html.dark-mode .form-control {
    background: #182336 !important;
    border-color: #2c3a56 !important;
}

html.dark-mode .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.24) !important;
}

/* =====================================================================
   AUTH V5 MOBILE HOTFIX (final priority)
   ===================================================================== */
@media (max-width: 768px) {
    html,
    body,
    body.account-page {
        min-height: 100dvh !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.account-page {
        padding: 10px !important;
        display: block !important;
    }

    .auth-v5.login-container {
        width: 100% !important;
        min-height: auto !important;
        max-height: none !important;
        height: auto !important;
        border-radius: 18px !important;
        border: 1px solid #e2e8f3 !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    .auth-v5 .login-form-section {
        padding: 16px 14px !important;
        overflow: visible !important;
        background: #f8fbff !important;
    }

    .auth-v5 .login-form-section form {
        background: #ffffff;
        border: 1px solid #e3eaf5;
        border-radius: 14px;
        padding: 12px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    }

    .auth-v5 .form-brand {
        margin-bottom: 10px !important;
    }

    .auth-v5 .login-header {
        margin-bottom: 10px !important;
    }

    .auth-v5 .login-header h1 {
        font-size: 1.3rem !important;
        line-height: 1.2 !important;
    }

    .auth-v5 .login-header p {
        font-size: 0.8rem !important;
    }

    .auth-v5 .form-row {
        display: block !important;
    }

    .auth-v5 .input-wrapper {
        margin-bottom: 10px !important;
    }

    .auth-v5 .form-label {
        font-size: 0.72rem !important;
    }

    .auth-v5 .form-control {
        height: 44px !important;
        font-size: 0.9rem !important;
        border-radius: 12px !important;
    }

    .auth-v5 .input-wrapper i.fa-user,
    .auth-v5 .input-wrapper i.fa-envelope,
    .auth-v5 .input-wrapper i.fa-phone,
    .auth-v5 .input-wrapper i.fa-lock,
    .auth-v5 .input-wrapper i.fa-user-tag,
    .auth-v5 .input-wrapper i.fa-key {
        top: 34px !important;
        bottom: auto !important;
    }

    .auth-v5 .password-toggle {
        top: 32px !important;
        bottom: auto !important;
    }

    .auth-v5 .form-options {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .auth-v5 .btn-primary,
    .auth-v5 .btn-secondary {
        height: 44px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
        display: block !important;
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .auth-v5 .btn-secondary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .auth-v5 .divider {
        margin: 10px 0 !important;
    }
}

@media (max-width: 390px) {
    body.account-page {
        padding: 8px !important;
    }

    .auth-v5 .login-form-section {
        padding: 12px 10px !important;
    }

    .auth-v5 .login-form-section form {
        padding: 10px;
    }

    .auth-v5 .login-header h1 {
        font-size: 1.16rem !important;
    }
}

@media (max-width: 768px) {
    html.dark-mode .auth-v5.login-container {
        border-color: #2c3c56 !important;
        background: #152236 !important;
    }

    html.dark-mode .auth-v5 .login-form-section {
        background: #101b2c !important;
    }

    html.dark-mode .auth-v5 .login-form-section form {
        background: #17253b;
        border-color: #304660;
        box-shadow: none;
    }

    html.dark-mode .auth-v5 .form-brand {
        background: linear-gradient(155deg, #152336 0%, #1c3050 50%, #1d4f4a 100%) !important;
    }

    html.dark-mode .auth-v5 .form-brand-logo {
        background: transparent !important;
        border: 1px solid #304660 !important;
    }

    html.dark-mode .auth-v5 .form-brand-meta h2,
    html.dark-mode .auth-v5 .form-brand-meta p {
        color: #e8f0fc !important;
    }
}

/* =====================================================================
   AUTH V5 MOBILE FULLSCREEN ENFORCE
   ===================================================================== */
@media (max-width: 768px) {
    html,
    body,
    body.account-page {
        width: 100% !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .auth-v5.login-container {
        width: 100vw !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .auth-v5 .login-form-section {
        min-height: 100dvh !important;
        height: auto !important;
        border-radius: 0 !important;
        width: 100vw !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .auth-v5 .login-form-section form {
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 12px 18px !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.42) !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .auth-v5 .form-brand {
        display: none !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 12px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        background: linear-gradient(155deg, #f4f7ff 0%, #ecf5ff 52%, #eef9f6 100%) !important;
    }

    .auth-v5 .form-brand-logo {
        width: calc(100vw - 24px) !important;
        max-width: 100% !important;
        height: 92px !important;
        border-radius: 10px !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        border: 1px solid #dbe5f3 !important;
    }

    .auth-v5 .form-brand-logo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        background: transparent !important;
    }

    .auth-v5 .form-brand-meta {
        width: 100% !important;
        text-align: center !important;
    }

    .auth-v5 .form-brand-meta h2,
    .auth-v5 .form-brand-meta p {
        color: #14335d !important;
        text-align: center !important;
    }

    .auth-v5 .login-header,
    .auth-v5 .alert,
    .auth-v5 .form-options,
    .auth-v5 .signup-text,
    .auth-v5 .divider,
    .auth-v5 .btn-secondary,
    .auth-v5 .btn-primary,
    .auth-v5 .input-wrapper {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .auth-v5 .form-row {
        padding: 0 12px;
    }

    .auth-v5 .input-wrapper {
        margin-bottom: 10px !important;
    }
}

/* =====================================================================
   RED COLOR THEME FOR LOGIN, REGISTER & FORGOT PASSWORD PAGES
   ===================================================================== */
/* Red button styling for all auth pages */
.auth-v5.auth-login-page .btn-primary,
.auth-v5.auth-register-page .btn-primary,
.auth-v5.auth-forgot-page .btn-primary {
    background: linear-gradient(135deg, #e41f07 0%, #c71605 100%) !important;
    box-shadow: 0 4px 12px rgba(228, 31, 7, 0.24);
}

.auth-v5.auth-login-page .btn-primary:hover,
.auth-v5.auth-register-page .btn-primary:hover,
.auth-v5.auth-forgot-page .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(228, 31, 7, 0.32) !important;
}

/* Red focus states for inputs on all auth pages */
.auth-v5.auth-login-page .form-control:focus,
.auth-v5.auth-register-page .form-control:focus,
.auth-v5.auth-forgot-page .form-control:focus {
    border-color: #e41f07 !important;
    box-shadow: 0 0 0 3px rgba(228, 31, 7, 0.14) !important;
    background: #fff !important;
}

/* Red accent for links on all auth pages */
.auth-v5.auth-login-page .forgot-link,
.auth-v5.auth-login-page .signup-text a,
.auth-v5.auth-register-page .forgot-link,
.auth-v5.auth-register-page .signup-text a,
.auth-v5.auth-forgot-page .forgot-link,
.auth-v5.auth-forgot-page .signup-text a {
    color: #e41f07 !important;
}

.auth-v5.auth-login-page .forgot-link:hover,
.auth-v5.auth-login-page .signup-text a:hover,
.auth-v5.auth-register-page .forgot-link:hover,
.auth-v5.auth-register-page .signup-text a:hover,
.auth-v5.auth-forgot-page .forgot-link:hover,
.auth-v5.auth-forgot-page .signup-text a:hover {
    color: #c71605 !important;
}

/* Red checkbox accent for all auth pages */
.auth-v5.auth-login-page .form-check-input,
.auth-v5.auth-register-page .form-check-input,
.auth-v5.auth-forgot-page .form-check-input {
    accent-color: #e41f07 !important;
}

/* Black background with white text on secondary button hover for all auth pages */
.auth-v5.auth-login-page .btn-secondary:hover,
.auth-v5.auth-register-page .btn-secondary:hover,
.auth-v5.auth-forgot-page .btn-secondary:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Dark mode red theme for all auth pages */
html.dark-mode .auth-v5.auth-login-page .btn-primary,
html.dark-mode .auth-v5.auth-register-page .btn-primary,
html.dark-mode .auth-v5.auth-forgot-page .btn-primary {
    background: linear-gradient(135deg, #f44e3a 0%, #e41f07 100%) !important;
}

html.dark-mode .auth-v5.auth-login-page .form-control:focus,
html.dark-mode .auth-v5.auth-register-page .form-control:focus,
html.dark-mode .auth-v5.auth-forgot-page .form-control:focus {
    border-color: #e41f07 !important;
    box-shadow: 0 0 0 3px rgba(228, 31, 7, 0.2) !important;
}

html.dark-mode .auth-v5.auth-login-page .forgot-link,
html.dark-mode .auth-v5.auth-login-page .signup-text a,
html.dark-mode .auth-v5.auth-register-page .forgot-link,
html.dark-mode .auth-v5.auth-register-page .signup-text a,
html.dark-mode .auth-v5.auth-forgot-page .forgot-link,
html.dark-mode .auth-v5.auth-forgot-page .signup-text a {
    color: #f44e3a !important;
}

/* Register-specific mobile fix: allow scroll when validation messages expand fields */
@media (max-width: 768px) {
    .auth-v5.auth-register-page {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .auth-v5.auth-register-page .login-form-section {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 24px !important;
    }

    .auth-v5.auth-register-page .login-form-section form {
        padding-bottom: 28px !important;
    }
}

/* Remove any visible logo box on mobile */
@media (max-width: 768px) {
    .auth-v5 .form-brand-logo,
    .auth-v5 .brand-logo {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .auth-v5 .form-brand-logo img,
    .auth-v5 .brand-logo img {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 768px) {
    html.dark-mode .auth-v5 .form-brand-logo,
    html.dark-mode .auth-v5 .brand-logo,
    html.dark-mode .auth-v5 .form-brand-logo img,
    html.dark-mode .auth-v5 .brand-logo img {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 768px) {
    html.dark-mode .auth-v5 .login-form-section form {
        background: rgba(23, 37, 59, 0.5) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Center mobile content for Login + Forgot Password */
@media (max-width: 768px) {
    .auth-v5.auth-login-page .login-form-section,
    .auth-v5.auth-forgot-page .login-form-section {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .auth-v5.auth-login-page .login-form-section form,
    .auth-v5.auth-forgot-page .login-form-section form {
        width: min(100%, 430px) !important;
        margin: 0 auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .auth-v5.auth-login-page .form-brand,
    .auth-v5.auth-forgot-page .form-brand,
    .auth-v5.auth-login-page .login-header,
    .auth-v5.auth-forgot-page .login-header,
    .auth-v5.auth-login-page .alert,
    .auth-v5.auth-forgot-page .alert,
    .auth-v5.auth-login-page .input-wrapper,
    .auth-v5.auth-forgot-page .input-wrapper,
    .auth-v5.auth-login-page .form-options,
    .auth-v5.auth-forgot-page .form-options,
    .auth-v5.auth-login-page .divider,
    .auth-v5.auth-forgot-page .divider,
    .auth-v5.auth-login-page .signup-text,
    .auth-v5.auth-forgot-page .signup-text,
    .auth-v5.auth-login-page .btn-primary,
    .auth-v5.auth-forgot-page .btn-primary,
    .auth-v5.auth-login-page .btn-secondary,
    .auth-v5.auth-forgot-page .btn-secondary {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .auth-v5.auth-login-page .form-options,
    .auth-v5.auth-forgot-page .form-options {
        align-items: center !important;
    }

    .auth-v5.auth-login-page .form-check,
    .auth-v5.auth-forgot-page .form-check {
        justify-content: center !important;
    }
}

/* Final mobile alignment + color-layer fix for Login/Forgot pages */
@media (max-width: 768px) {
    .auth-v5.auth-login-page .login-form-section form,
    .auth-v5.auth-forgot-page .login-form-section form {
        background: rgba(255, 255, 255, 0.46) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .auth-v5.auth-login-page .login-header,
    .auth-v5.auth-forgot-page .login-header,
    .auth-v5.auth-login-page .input-wrapper,
    .auth-v5.auth-forgot-page .input-wrapper,
    .auth-v5.auth-login-page .form-label,
    .auth-v5.auth-forgot-page .form-label,
    .auth-v5.auth-login-page .form-options,
    .auth-v5.auth-forgot-page .form-options,
    .auth-v5.auth-login-page .forgot-link,
    .auth-v5.auth-forgot-page .forgot-link,
    .auth-v5.auth-login-page .text-danger,
    .auth-v5.auth-forgot-page .text-danger {
        text-align: left !important;
    }

    .auth-v5.auth-login-page .form-options,
    .auth-v5.auth-forgot-page .form-options {
        align-items: flex-start !important;
    }

    .auth-v5.auth-login-page .form-check,
    .auth-v5.auth-forgot-page .form-check {
        justify-content: flex-start !important;
    }
}

@media (max-width: 768px) {
    html.dark-mode .auth-v5.auth-login-page .login-form-section form,
    html.dark-mode .auth-v5.auth-forgot-page .login-form-section form {
        background: rgba(23, 37, 59, 0.56) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
}

/* Login/Forgot mobile + high-zoom scroll fix */
@media (max-width: 768px) {
    .auth-v5.auth-login-page,
    .auth-v5.auth-forgot-page {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .auth-v5.auth-login-page .login-form-section,
    .auth-v5.auth-forgot-page .login-form-section {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding-bottom: 24px !important;
    }

    .auth-v5.auth-login-page .login-form-section form,
    .auth-v5.auth-forgot-page .login-form-section form {
        padding-bottom: 28px !important;
    }
}

/* Card scales down with zoom */
@media (min-width: 769px) {
    body.account-page {
        display: grid !important;
        place-items: center !important;
    }

    .login-container.auth-v5.auth-login-page,
    .login-container.auth-v5.auth-register-page,
    .login-container.auth-v5.auth-forgot-page {
        width: clamp(240px, 75vw, 1100px) !important;
        height: auto !important;
        min-height: 34rem !important;
        max-height: none !important;
        border-radius: clamp(12px, 1.8vw, 26px) !important;
    }

    .login-container.auth-v5.auth-login-page .login-form-section,
    .login-container.auth-v5.auth-register-page .login-form-section,
    .login-container.auth-v5.auth-forgot-page .login-form-section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* Final mobile override: hide left showcase and remove logo card background */
@media (max-width: 768px) {
    .login-left,
    .auth-v5 .auth-showcase {
        display: none !important;
    }

    .form-brand,
    .auth-v5 .form-brand {
        display: flex !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .auth-v5 .auth-showcase-header h1,
    .auth-v5 .auth-showcase-header p,
    .auth-v5 .auth-points,
    .form-brand-meta,
    .auth-v5 .form-brand-meta {
        display: none !important;
    }

    .login-container,
    .auth-v5.login-container {
        display: flex !important;
        flex-direction: column !important;
    }

    .auth-v5 .login-form-section {
        background: transparent !important;
    }

    .auth-v5.auth-login-page .login-form-section,
    .auth-v5.auth-register-page .login-form-section,
    .auth-v5.auth-forgot-page .login-form-section {
        min-height: 100dvh !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .auth-v5.auth-login-page .login-form-section form,
    .auth-v5.auth-register-page .login-form-section form,
    .auth-v5.auth-forgot-page .login-form-section form {
        width: min(100%, 460px) !important;
        margin: 0 auto !important;
    }
}


/* Mobile: center login header text */
@media (max-width: 768px) {
    .auth-v5 .login-header {
        text-align: center !important;
    }

    .auth-v5 .login-header h1,
    .auth-v5 .login-header p {
        text-align: center !important;
    }
}