/* Loaded last by the authentication layout so every card uses one subtitle surface. */
.login-page .login-card {
    box-sizing: border-box;
    height: min(710px, calc(100dvh - 24px)) !important;
    padding-bottom: 18px;
}

.company-card .module-selection {
    margin: 2px 0 4px;
    padding: 12px;
    border: 1px solid rgba(31, 79, 166, .25);
    border-radius: 14px;
    background: rgba(240, 246, 255, .72);
}

.company-address-form {
    gap: 7px !important;
}

.company-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
}

.company-address-grid .address-wide {
    grid-column: 1 / -1;
}

.company-address-grid .form-group {
    min-width: 0;
}

.company-address-grid .phone-input-group {
    gap: 7px;
}

.company-address-grid .phone-country-code {
    flex: 0 0 auto;
    padding-right: 7px;
    border-right: 1px solid #cbd7e8;
    color: #173d8f;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.company-address-grid .phone-input-group input {
    min-width: 0;
}

.company-address-grid .select2-container--default .select2-selection--single,
.company-address-grid .select2-container--default .select2-selection--single .select2-selection__rendered,
.company-address-grid .select2-container--default .select2-selection--single .select2-selection__placeholder {
    text-align: left !important;
    justify-content: flex-start !important;
}

.select2-dropdown .select2-results__option,
.select2-dropdown .select2-results__group,
.select2-dropdown .select2-search__field {
    text-align: left !important;
}

.company-card .module-selection legend {
    padding: 0 5px;
    color: #173d8f;
    font-weight: 700;
    font-size: .88rem;
}

.company-card .module-selection > p {
    margin: 0 0 9px;
    color: #66738e;
    font-size: .76rem;
}

.company-card .module-select-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    color: #173d8f;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 700;
}

.company-card .module-select-all input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #0d1e4d;
    cursor: pointer;
}

.company-card .module-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
}

.company-card .module-options label {
    position: relative;
    height: 100%;
    cursor: pointer;
}

.company-card .module-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.company-card .module-options span {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 24px 1fr;
    min-height: 52px;
    height: 100%;
    padding: 8px;
    border: 1px solid #cbd7ec;
    border-radius: 10px;
    background: #fff;
    color: #30415f;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.company-card .module-options i {
    position: relative;
    z-index: 1;
    grid-row: 1 / span 2;
    align-self: center;
    color: #2454ad;
}

.company-card .module-options strong,
.company-card .module-options small {
    position: relative;
    z-index: 1;
}
.company-card .module-options strong { font-size: .77rem; }
.company-card .module-options small { color: #76839a; font-size: .65rem; }
.company-card .module-options input:checked + span {
    border-color: #1e3a8a;
    background: linear-gradient(180deg, #172f68, #081841);
    color: #fff;
    box-shadow: 0 8px 18px rgba(7, 19, 43, .25), inset 0 1px 1px rgba(255, 255, 255, .12);
}

.company-card .module-options input:checked + span i {
    color: #82c8ff;
}

.company-card .module-options input:checked + span small {
    color: #c8d8f5;
}

.company-card .module-options input:checked + span::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translate3d(-140%, 0, 0);
    animation: account-strength-running-glow 2.5s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

.company-card .module-options input:focus-visible + span {
    outline: 2px solid #2464d7;
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .company-card .module-selection { padding: 9px; }
    .company-card .module-options { gap: 6px; }
    .company-card .module-options span { min-height: 58px; height: 100%; padding: 6px; }
    .company-address-grid { gap: 5px 7px; }
    .company-address-grid .input-group { padding-right: 8px; padding-left: 8px; }
    .company-address-grid .phone-country-code { padding-right: 5px; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .company-card .module-options input:checked + span::after { animation: none; }
}

.login-page .login-card .login-form {
    min-height: 0;
}

.login-page .login-card .login-form > :last-child {
    margin-bottom: 0;
}

.login-page .login-card .login-header .login-subtitle {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 6px auto 0 !important;
    padding: 7px 12px !important;
    border: 2px solid #1e3a8a !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #f8faff 0%, #edf3ff 100%) !important;
    color: #5f6f8b !important;
    font-size: .9rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    box-shadow:
        0 0 0 3px rgba(30, 58, 138, .10),
        0 6px 16px rgba(30, 58, 138, .12) !important;
}

/* Balanced Sign In spacing without changing the card's width or height. */
.login-page .login-card:not(.account-card) .login-header {
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
}

.login-page .login-card:not(.account-card) {
    padding-right: 20px;
    padding-left: 20px;
}

.login-page .login-card:not(.account-card) .login-form {
    justify-content: flex-start !important;
    gap: 9px !important;
}

.login-page .login-card:not(.account-card) .form-group {
    gap: 5px !important;
}

.login-page .login-card:not(.account-card) .login-options {
    min-height: 42px;
    margin: 4px 0 2px !important;
    padding: 8px 11px;
    border: 1px solid #dbe5f4;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248, 251, 255, .94), rgba(241, 246, 255, .88));
    box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(30, 58, 138, .05);
}

.login-page .login-card:not(.account-card) .remember-me {
    font-size: 14px;
    font-weight: 500;
}

.login-page .login-card:not(.account-card) .login-options a {
    font-size: 14px;
}

.login-page .login-card:not(.account-card) .btn-login {
    margin-top: 2px;
}

.login-page .login-card:not(.account-card) .divider {
    margin: 8px 0 !important;
}

.login-page .login-card:not(.account-card) .signup-section {
    margin-top: auto !important;
    padding-top: 10px !important;
    padding-bottom: 6px;
}

.login-page .login-card.account-card .form-actions {
    margin-top: auto;
    padding-bottom: 6px;
}

.login-page .login-card.account-card .form-actions .account-footer {
    margin-bottom: 6px;
}

.login-page .login-card .signup-section .btn-register,
.login-page .login-card .form-actions .btn-login {
    margin-bottom: 0;
}

.login-page .login-card:not(.account-card) .signup-text {
    margin-bottom: 5px;
}

.login-page .login-card:not(.account-card) .signup-title {
    margin-bottom: 2px;
    font-size: 13px;
}

.login-security-note {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 1px 0 2px;
    padding: 5px 10px;
    border: 1px solid rgba(30, 58, 138, .13);
    border-radius: 12px;
    background: rgba(238, 245, 255, .72);
    color: #52627d;
}

.login-security-note > span {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    border-radius: 9px;
    background: linear-gradient(145deg, #24469a, #10275e);
    color: #fff;
    font-size: 11px;
    box-shadow: 0 4px 10px rgba(30, 58, 138, .18);
}

.login-security-note > div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.login-security-note strong {
    color: #263653;
    font-size: 10px;
    font-weight: 700;
}

.login-security-note small {
    color: #71809a;
    font-size: 9px;
}

/* One visual standard for the Create Account and Company Details cards. */
.account-page .login-card.account-card {
    max-width: 640px;
    padding: 20px 20px 18px;
}

.account-page .login-card.account-card .login-header {
    margin-bottom: 6px !important;
    padding-bottom: 2px !important;
}

.account-page .login-card.account-card .security-badge {
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
}

.account-page .login-card.account-card .security-badge i {
    font-size: 19px;
}

.account-page .login-card.account-card .login-header h2 {
    margin-bottom: 5px;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.2;
}

.account-page .login-card.account-card .login-form {
    gap: 10px !important;
}

.account-page .login-card.account-card .form-group {
    gap: 2px !important;
}

.account-page .login-card.account-card .form-group label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.account-page .login-card.account-card .input-group {
    height: 40px;
    padding: 0 13px;
}

.account-page .login-card.account-card .input-group input,
.account-page .login-card.account-card .input-group select,
.account-page .login-card.account-card .select2-selection__rendered {
    font-size: 14px;
}

.account-page .login-card.account-card .form-actions {
    position: static;
    flex-shrink: 0;
    gap: 4px;
    padding-bottom: 6px;
}

.account-page .login-card.account-card .account-footer {
    margin: 0 0 6px;
    font-size: .84rem;
    font-weight: 400;
    line-height: 1.3;
}

.account-login-link {
    position: absolute;
    top: 17px;
    right: 20px;
    z-index: 2;
    padding: 5px 9px;
    border: 1px solid rgba(30, 58, 138, .16);
    border-radius: 99px;
    background: rgba(242, 247, 255, .88);
    color: #718096;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}

.account-login-link a {
    margin-left: 3px;
    color: #1e40af;
    font-weight: 800;
    text-decoration: none;
}

.account-login-link a:hover {
    color: #2563eb;
    text-decoration: underline;
}

.account-login-link--inline {
    position: static;
    align-self: center;
    margin-bottom: 2px;
}

/* BFC-style password strength meter for Create Account. */
.account-password-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 226px;
    align-items: stretch;
    gap: 4px;
}

.account-password-fields {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.account-password-meter {
    position: relative;
    min-width: 0;
    align-self: start;
    margin-top: 19px;
    padding: 12px 15px 7px 12px;
    overflow: hidden;
    border: 1px solid rgba(30, 58, 138, .20);
    border-radius: 13px;
    background: linear-gradient(145deg, #f8fbff, #edf4ff);
    box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(30, 58, 138, .08);
}

.account-strength-header {
    display: block;
    min-height: 18px;
    margin-bottom: 6px;
    padding-right: 76px;
    color: #1e3a8a;
    font-size: 10px;
    font-weight: 700;
}

.account-strength-header span,
.account-strength-header strong {
    white-space: nowrap;
}

.account-strength-header > span {
    font-size: 12px;
    font-weight: 800;
}

.account-strength-header > strong {
    position: absolute;
    top: 11px;
    right: 6px;
    min-width: 66px;
    margin-right: 0;
    padding: 3px 7px;
    border: 1px solid currentColor;
    border-radius: 99px;
    background: rgba(255, 255, 255, .82);
    font-size: 9px;
    line-height: 1;
    text-align: center;
    box-shadow: inset 0 1px 0 #fff;
}

.account-strength-header i {
    margin-right: 4px;
}

.account-strength-bar {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: #d8e1ef;
}

.account-strength-bar > span {
    position: relative;
    display: block;
    width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: #dc3545;
    transition: width .3s ease, background-color .3s ease;
}

.account-strength-glow {
    position: absolute;
    inset: 0;
    display: block;
    width: 45%;
    /* No filter: a blurred child forces Safari to repaint the clipped bar every frame.
       translate3d keeps the run on the GPU so it is as smooth as Chrome. */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translate3d(-140%, 0, 0);
    animation: account-strength-running-glow 2.5s ease-in-out infinite;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
}

@keyframes account-strength-running-glow {
    0%, 22% {
        transform: translate3d(-140%, 0, 0);
        opacity: 0;
    }
    35% {
        opacity: .9;
    }
    78% {
        transform: translate3d(320%, 0, 0);
        opacity: .9;
    }
    100% {
        transform: translate3d(320%, 0, 0);
        opacity: 0;
    }
}

/* Compact feature tiles while preserving the Workspace visual treatment. */
.login-page.account-page .workspace-setup-card .module-selection {
    padding: 9px;
}

.login-page.account-page .workspace-setup-card .module-options {
    gap: 7px;
}

.login-page.account-page .workspace-setup-card .module-options label > span {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 56px;
    padding: 8px 10px;
    border-radius: 11px;
}

.login-page.account-page .workspace-setup-card .module-options i {
    font-size: 1rem;
}

.login-page.account-page .workspace-setup-card .module-options strong {
    font-size: .78rem;
}

.login-page.account-page .workspace-setup-card .module-options small {
    font-size: .65rem;
}

@media (max-width: 520px) {
    .login-page.account-page .workspace-setup-card .module-options label > span {
        min-height: 54px;
        padding: 7px 8px;
    }
}

.account-password-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.account-password-checklist li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    color: #718096;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.15;
    transition: color .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .account-strength-glow {
        animation: none;
    }
}

.account-password-checklist li i {
    flex: 0 0 auto;
    color: #9aa8bc;
    font-size: 6px;
}

.account-password-checklist li.valid {
    color: #198754;
    font-weight: 600;
}

.account-password-checklist li.valid i {
    color: #198754;
}

.account-password-checklist li.invalid {
    color: #9a5c65;
}

.account-password-checklist li.invalid i {
    color: #dc6b78;
}

@media (max-width: 760px) {
    .account-page .login-card.account-card:not(.company-card) {
        max-width: 420px;
    }

    .account-password-layout {
        grid-template-columns: 1fr;
    }

    .account-password-meter {
        display: block;
        width: 100%;
        margin-top: 0;
        padding: 7px 10px;
        border-radius: 12px;
    }

    .account-strength-header {
        min-height: 18px;
        margin-bottom: 4px;
        padding-right: 82px;
    }

    .account-strength-header > span {
        font-size: 11px;
    }

    .account-strength-header > strong {
        top: 6px;
        right: 9px;
        min-width: 72px;
        font-size: 9px;
    }

    .account-password-checklist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px 7px;
        margin-top: 5px;
    }

    .account-password-checklist li {
        gap: 3px;
        font-size: 8px;
        line-height: 1.05;
    }

    .account-strength-bar > span {
        transition: background-color .2s ease;
        contain: paint;
    }

    .account-strength-glow {
        display: block;
        filter: none;
        animation: account-strength-running-glow 2.5s ease-in-out infinite;
    }

    .account-strength-bar.is-updating .account-strength-glow {
        animation: none;
        opacity: 0;
        transform: translate3d(-140%, 0, 0);
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
    .account-strength-glow {
        animation: none;
    }
}

/* Desktop Safari: same steady glow as mobile. Safari restarted the glow on
   every width-transition frame while typing, so it lagged until the page sat
   idle. The fill jumps to its new width (colour still fades), paint is
   contained, and the glow pauses while typing (is-updating, set by
   registration-password-meter.js) and restarts 280ms after the last key. */
.account-strength-bar--safari > span {
    transition: background-color .2s ease;
    contain: paint;
}

.account-strength-bar--safari .account-strength-glow {
    display: block;
    filter: none;
    animation: account-strength-running-glow 2.5s ease-in-out infinite;
}

.account-strength-bar--safari.is-updating .account-strength-glow {
    animation: none;
    opacity: 0;
    transform: translate3d(-140%, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .account-strength-bar--safari .account-strength-glow {
        animation: none;
    }
}

/* Mobile authentication layout: prioritize the usable form and remove desktop overflow. */
@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .login-page,
    .login-page.account-page {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 100dvh;
        padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
        background: linear-gradient(160deg, #071735 0%, #0b2862 48%, #eef4fb 48.2%, #f8fafc 100%);
    }

    .login-left {
        display: none;
    }

    .login-right,
    .account-page .login-right {
        width: 100%;
        min-width: 0;
        min-height: calc(100dvh - 36px);
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .login-page .login-card,
    .login-page .login-card:not(.account-card),
    .login-page .login-card.account-card,
    .account-page .login-card.account-card:not(.company-card) {
        width: 100%;
        max-width: 430px;
        height: auto !important;
        max-height: none;
        min-height: 0;
        padding: 22px 20px;
        border-radius: 22px;
        overflow: visible;
    }

    .login-page .login-card .login-header {
        margin-top: 4px;
    }

    .login-page .login-card .login-form {
        width: 100%;
        min-width: 0;
    }

    .login-page,
    .login-right,
    .login-page .login-card,
    .login-page .login-card .login-form {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .login-page::-webkit-scrollbar,
    .login-right::-webkit-scrollbar,
    .login-page .login-card::-webkit-scrollbar,
    .login-page .login-card .login-form::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .login-page input,
    .login-page select,
    .login-page textarea {
        font-size: 16px !important;
    }

    .login-page .login-card:not(.account-card) .btn-login,
    .login-page .login-card:not(.account-card) .btn-google,
    .login-page .login-card:not(.account-card) .btn-register {
        width: 100%;
        height: 48px !important;
        min-height: 48px;
        flex: 0 0 48px;
        padding: 0 16px;
        border-radius: 13px;
        font-size: 15px;
        line-height: 1;
    }

    .login-page .login-card:not(.account-card) .btn-google .google-logo {
        width: 22px;
        height: 22px;
    }

    .login-page .login-card:not(.account-card) .divider {
        min-height: 24px;
        flex: 0 0 24px;
    }

    .login-page .login-card:not(.account-card) .login-security-note,
    .login-page .login-card:not(.account-card) .signup-section,
    .login-page .login-card:not(.account-card) .login-options,
    .login-page .login-card:not(.account-card) .form-group {
        flex-shrink: 0;
    }
}

/* All registration cards share the finalized Login card visual system. */
.login-page.account-page,
.login-page.account-page .login-right {
    background: #dce3eb;
}

.login-page.account-page .login-card.account-card,
.login-page.account-page .login-card.account-card.company-card,
.login-page.account-page .login-card.account-card.workspace-setup-card {
    border-color: #24469a;
    background: #dfe5ea;
    box-shadow: 0 2px 7px rgba(15, 31, 58, .08), 0 0 0 1px rgba(79, 96, 116, .06);
}

.login-page.account-page .login-card .login-header,
.login-page.account-page .login-card .login-form,
.login-page.account-page .login-card .form-actions,
.login-page.account-page .login-card footer {
    background: transparent;
}

.login-page.account-page .login-card .login-subtitle,
.login-page.account-page .company-card .module-selection,
.login-page.account-page .account-password-meter {
    border-color: #9facb9;
    background: #e9edf1 !important;
    box-shadow: none !important;
}

.login-page.account-page .login-card .input-group,
.login-page.account-page .login-card .select2-selection--single,
.login-page.account-page .company-card .module-options span {
    background: #e9edf1;
}

.login-page.account-page .login-card .input-group input,
.login-page.account-page .login-card .input-group select {
    background: transparent !important;
}

.login-page.account-page .login-card .input-group:focus-within,
.login-page.account-page .login-card .select2-container--focus .select2-selection--single,
.login-page.account-page .login-card .select2-container--open .select2-selection--single {
    border-color: #8adfff;
    background: #e3e8ed;
    box-shadow: 0 0 0 3px rgba(121, 212, 255, .22), 0 0 12px rgba(121, 212, 255, .38), 0 12px 24px rgba(15, 23, 42, .14);
}

.login-page.account-page .login-card .security-badge {
    border-color: #9facb9;
    background: #e9edf1;
    box-shadow: none;
}

.login-page.account-page .company-address-grid .phone-country-code {
    border-color: #9facb9;
    background: transparent;
}

.login-page.account-page .login-card .btn-login {
    box-shadow: 0 0 0 1px rgba(49, 95, 165, .24), 0 0 10px rgba(121, 212, 255, .14);
}

.login-page.account-page .login-card .btn-login:hover {
    box-shadow: 0 0 0 3px rgba(121, 212, 255, .24), 0 0 16px rgba(121, 212, 255, .42);
}

/* Final field-border correction for every registration step. */
.login-page.account-page .login-card .input-group {
    border: 2px solid #1e3a8a !important;
}

.login-page.account-page .login-card .input-group:focus-within {
    border-color: #8adfff !important;
}

.login-page.account-page .login-card .input-group .select2-selection--single {
    border: 0 !important;
    background: transparent;
    box-shadow: none;
}

/* Workspace feature selection keeps the established Workspace-page design. */
.login-page.account-page .workspace-setup-card .module-selection {
    border: 1px solid #9facb9;
    border-radius: 14px;
    background: #dfe5ea !important;
}

.login-page.account-page .workspace-setup-card .module-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 12px;
}

.login-page.account-page .workspace-setup-card .module-options label > span {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 76px;
    height: 100%;
    align-content: center;
    padding: 13px 15px;
    border: 1px solid #9facb9;
    border-radius: 14px;
    background: #dfe5ea;
    color: #30415f;
    box-shadow: 0 1px 3px rgba(49, 95, 165, .08);
}

.login-page.account-page .workspace-setup-card .module-options label:hover > span {
    border-color: #8adfff;
    box-shadow: 0 0 0 3px rgba(121, 212, 255, .22), 0 0 12px rgba(121, 212, 255, .38);
    transform: translateY(-1px);
}

.login-page.account-page .workspace-setup-card .module-options i {
    font-size: 1.15rem;
}

.login-page.account-page .workspace-setup-card .module-options strong {
    font-size: .9rem;
}

.login-page.account-page .workspace-setup-card .module-options small {
    font-size: .72rem;
}

.login-page.account-page .workspace-setup-card .module-options input:checked + span {
    border-color: #1e3a8a;
    background: linear-gradient(180deg, #172f68, #081841);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(121, 212, 255, .18), 0 0 12px rgba(121, 212, 255, .30);
}

@media (max-width: 520px) {
    .login-page.account-page .workspace-setup-card .module-options {
        gap: 6px;
    }

    .login-page.account-page .workspace-setup-card .module-options label > span {
        min-height: 68px;
        padding: 8px 10px;
    }
}

/* Keep authentication focus glows aligned to rounded control borders. */
.login-page .input-group,
.account-page .input-group,
.login-page .input-group:focus-within,
.account-page .input-group:focus-within {
    border-radius: 14px;
}

.login-page .input-group::before,
.account-page .input-group::before {
    border-radius: inherit;
}

.login-page .input-group input:focus,
.account-page .input-group input:focus,
.login-page .input-group select:focus,
.account-page .input-group select:focus {
    outline: 0;
    box-shadow: none !important;
}

.login-page .select2-container--focus .select2-selection--single,
.account-page .select2-container--focus .select2-selection--single,
.login-page .select2-container--open .select2-selection--single,
.account-page .select2-container--open .select2-selection--single {
    border-radius: 14px !important;
}

/* Card controls retain the Login card's dark-blue outline. */
.login-page .login-card .input-group,
.account-page .login-card .input-group,
.login-page .login-card .select2-selection--single,
.account-page .login-card .select2-selection--single {
    border: 2px solid #1e3a8a;
}

.login-page .login-card .input-group:focus-within,
.account-page .login-card .input-group:focus-within,
.login-page .login-card .select2-container--focus .select2-selection--single,
.account-page .login-card .select2-container--focus .select2-selection--single,
.login-page .login-card .select2-container--open .select2-selection--single,
.account-page .login-card .select2-container--open .select2-selection--single {
    border-color: #8adfff;
}

/* Sign In and Google actions use identical dimensions. */
.login-page .login-card:not(.account-card) .btn-login,
.login-page .login-card:not(.account-card) .btn-google {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    padding: 0 20px;
    border-width: 2px;
    border-radius: 14px;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 900px) {
    .login-page .login-card:not(.account-card) .btn-login,
    .login-page .login-card:not(.account-card) .btn-google {
        height: 48px;
        min-height: 48px;
        flex-basis: 48px;
        padding: 0 16px;
        border-radius: 13px;
        font-size: 15px;
    }
}

/* Keep all authentication cards inside short phone browser viewports. */
@media (max-width: 760px) and (max-height: 900px) {
    .login-page,
    .login-page.account-page {
        padding-top: max(8px, env(safe-area-inset-top));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .login-right,
    .account-page .login-right {
        min-height: calc(100dvh - 16px);
    }

    .login-page .login-card,
    .login-page .login-card:not(.account-card),
    .login-page .login-card.account-card,
    .account-page .login-card.account-card:not(.company-card) {
        padding: 12px 16px;
        border-radius: 18px;
    }

    .login-page .login-card .login-header,
    .account-page .login-card.account-card .login-header {
        margin: 0 0 5px !important;
        padding: 0 !important;
    }

    .login-page .login-card .security-badge,
    .account-page .login-card.account-card .security-badge {
        width: 38px;
        height: 38px;
        margin: 0 auto 2px;
    }

    .login-page .login-card .login-header h2,
    .account-page .login-card.account-card .login-header h2 {
        margin-bottom: 3px;
        font-size: 1.72rem;
    }

    .login-page .login-card .login-header .login-subtitle {
        margin-top: 3px !important;
        padding: 4px 9px !important;
        font-size: .78rem !important;
        line-height: 1.25 !important;
    }

    .account-page .login-card.account-card .login-form {
        gap: 3px;
    }

    .account-page .login-card.account-card .form-group,
    .account-password-fields {
        gap: 2px;
    }

    .account-page .login-card.account-card .input-group {
        min-height: 38px;
        height: 38px;
    }

    .account-password-layout {
        gap: 3px;
    }

    .account-page .login-card.account-card .form-actions {
        gap: 3px;
        padding-bottom: 0;
    }

    .account-page .login-card.account-card .account-footer {
        margin: 1px 0 3px;
        font-size: .78rem;
    }

    .account-page .login-card.account-card .btn-login {
        height: 42px !important;
        min-height: 42px;
    }
}

@media (max-width: 380px) {
    .login-page,
    .login-page.account-page {
        padding-right: 10px;
        padding-left: 10px;
    }

    .login-page .login-card,
    .login-page .login-card:not(.account-card),
    .login-page .login-card.account-card {
        padding: 18px 15px;
        border-radius: 18px;
    }

    .login-options {
        align-items: flex-start;
        gap: 8px;
    }
}

/* Keep every authentication step the same size while navigating on phones, with no page scroll. A step with more
   content (Create Account) is compacted to fit on short screens instead (see the max-height: 760px rules below). */
@media (max-width: 900px) {
    .login-page .login-card,
    .login-page .login-card:not(.account-card),
    .login-page .login-card.account-card,
    .login-page .login-card.account-card.company-card,
    .login-page .login-card.account-card.workspace-setup-card,
    .account-page .login-card.account-card:not(.company-card) {
        height: min(710px, calc(100dvh - 28px)) !important;
        min-height: min(710px, calc(100dvh - 28px)) !important;
        max-height: min(710px, calc(100dvh - 28px)) !important;
        overflow: hidden;
    }
}

@media (max-width: 760px) and (max-height: 760px) {
    .login-page .login-card,
    .login-page .login-card:not(.account-card),
    .login-page .login-card.account-card,
    .login-page .login-card.account-card.company-card,
    .login-page .login-card.account-card.workspace-setup-card,
    .account-page .login-card.account-card:not(.company-card) {
        height: calc(100dvh - 16px) !important;
        min-height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
}

/* Interactive feature cards on the authentication hero. */
.feature-card {
    min-height: 112px;
    padding: 0;
    border: 0;
    overflow: visible;
    cursor: pointer;
    background: transparent;
    backdrop-filter: none;
    perspective: 900px;
}

.feature-card::before { display: none; }

.feature-card:hover,
.feature-card:focus-visible {
    transform: translateY(-4px);
    outline: none;
}

.feature-card:focus-visible .feature-card-inner {
    box-shadow: 0 0 0 2px #7dd3fc, 0 18px 38px rgba(0, 0, 0, .28);
}

.feature-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 112px;
    border-radius: 18px;
    transform-style: preserve-3d;
    transition: transform .65s cubic-bezier(.2, .75, .25, 1), box-shadow .35s ease;
}

.feature-card.is-flipped .feature-card-inner {
    transform: rotateY(180deg);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .3), 0 0 30px rgba(59, 130, 246, .18);
}

.feature-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: inherit;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.feature-card-front {
    align-items: flex-start;
    gap: 14px;
    padding: 18px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
    backdrop-filter: blur(18px);
}

.feature-card-back {
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 14px 16px;
    color: #fff;
    background: linear-gradient(145deg, rgba(29, 78, 216, .92), rgba(8, 24, 63, .98));
    transform: rotateY(180deg);
}

.feature-back-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-back-heading i { color: #7dd3fc; }

.feature-back-heading h4,
.feature-card-back p { margin: 0; }

.feature-back-heading h4 {
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
}

.feature-card-back p {
    color: rgba(255, 255, 255, .78);
    font-size: .72rem;
    line-height: 1.35;
}

.feature-card-back > span {
    align-self: flex-end;
    color: #7dd3fc;
    font-size: .66rem;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .feature-card,
    .feature-card-inner { transition: none; }
}

/* Soft light-gray surfaces shared by Sign In and every registration step. */
.login-page .login-right,
.account-page .login-right {
    background: #e7eaee;
}

.login-page .login-card,
.login-page .login-card:not(.account-card),
.login-page .login-card.account-card,
.login-page .login-card.account-card.company-card,
.login-page .login-card.account-card.workspace-setup-card,
.account-page .login-card.account-card {
    background: #eef1f4;
}

.login-page .login-card .login-subtitle,
.account-page .login-card .login-subtitle,
.company-card .module-selection,
.login-security-note,
.login-options,
.signup-section {
    background-color: #e7eaee;
}

.login-page .input-group,
.account-page .input-group,
.login-page .input-group input,
.account-page .input-group input,
.account-page .input-group select,
.login-page .select2-selection--single,
.account-page .select2-selection--single,
.login-page .btn-google,
.login-page .btn-register,
.message-modal-content,
.message-modal-content .modal-body {
    background-color: #f4f5f6;
}

.company-card .module-options span {
    background: #eef1f4;
}

.company-card .module-options input:checked + span {
    background: linear-gradient(180deg, #172f68, #081841);
}

/* Shared low-glare navy-slate palette for every authentication step. */
.login-page .login-right,
.account-page .login-right {
    background: #dce3eb;
}

.login-page .login-card,
.login-page .login-card:not(.account-card),
.login-page .login-card.account-card,
.login-page .login-card.account-card.company-card,
.login-page .login-card.account-card.workspace-setup-card,
.account-page .login-card.account-card,
.login-page .login-card .login-header,
.account-page .login-card .login-header,
.login-page .login-card .form-actions,
.account-page .login-card .form-actions,
.login-page .login-card footer,
.account-page .login-card footer {
    background: #e5eaf0;
}

.login-page .login-card,
.account-page .login-card {
    box-shadow: 0 8px 24px rgba(15, 31, 58, .12);
}

.login-page .login-card .login-subtitle,
.account-page .login-card .login-subtitle,
.company-card .module-selection,
.login-security-note,
.login-options,
.signup-section,
.company-card .module-options span {
    background: #dfe6ed;
}

.login-page .input-group,
.account-page .input-group,
.login-page .input-group input,
.account-page .input-group input,
.account-page .input-group select,
.login-page .select2-selection--single,
.account-page .select2-selection--single,
.login-page .btn-google,
.login-page .btn-register {
    background-color: #edf1f5;
}

.login-page .login-card .login-header,
.account-page .login-card .login-header,
.login-page .login-card .form-actions,
.account-page .login-card .form-actions,
.login-page .login-card footer,
.account-page .login-card footer {
    background-color: #eef1f4;
}

/* Authentication surfaces use the same muted navy-slate workspace palette. */
.login-page .login-card,
.login-page .login-card:not(.account-card),
.login-page .login-card.account-card,
.login-page .login-card.account-card.company-card,
.login-page .login-card.account-card.workspace-setup-card,
.account-page .login-card.account-card,
.login-page .login-card .login-header,
.account-page .login-card .login-header,
.login-page .login-card .form-actions,
.account-page .login-card .form-actions,
.login-page .login-card footer,
.account-page .login-card footer,
.company-card .module-selection,
.company-card .module-options span {
    background: #e5eaf0;
}

.company-card .module-options input:checked + span {
    background: linear-gradient(180deg, #172f68, #081841);
}

body.login-page,
body.account-page,
.login-page .login-container,
.account-page .login-container,
.login-page .login-right,
.account-page .login-right {
    background: #dce3eb;
}

.login-page .login-card .login-subtitle,
.account-page .login-card .login-subtitle {
    background: #dfe6ed !important;
    box-shadow: 0 2px 7px rgba(15, 31, 58, .08) !important;
}

.login-page .login-card:not(.account-card) .security-badge,
.account-page .login-card.account-card .security-badge {
    background: #e2e9f0;
    box-shadow: 0 2px 7px rgba(15, 31, 58, .08);
}

.login-page .login-card,
.account-page .login-card,
.login-page .login-card::before,
.account-page .login-card::before {
    box-shadow: none;
}

.login-page .login-card,
.account-page .login-card {
    box-shadow: 0 6px 18px rgba(15, 31, 58, .12);
}

/* Refined Sign In hierarchy: seamless controls and softer layered contrast. */
.login-page .login-right {
    background: #d8e0e8;
}

.login-page .login-card:not(.account-card) {
    background: #e8edf2;
    border-color: #294985;
    box-shadow: 0 6px 18px rgba(15, 31, 58, .10);
}

.login-page .login-card:not(.account-card) .login-header,
.login-page .login-card:not(.account-card) .login-form,
.login-page .login-card:not(.account-card) footer,
.login-page .login-card:not(.account-card) .signup-section {
    background: transparent;
}

.login-page .login-card:not(.account-card) .login-subtitle {
    background: #e1e7ed !important;
    box-shadow: 0 2px 6px rgba(15, 31, 58, .07) !important;
}

.login-page .login-card:not(.account-card) .input-group {
    background: #f1f4f6;
}

.login-page .login-card:not(.account-card) .input-group input,
.login-page .login-card:not(.account-card) .input-group input:focus {
    background: transparent !important;
    box-shadow: none !important;
}

.login-page .login-card:not(.account-card) .login-options,
.login-page .login-card:not(.account-card) .login-security-note {
    background: #e1e7ed;
    box-shadow: none;
}

.login-page .login-card:not(.account-card) .btn-google,
.login-page .login-card:not(.account-card) .btn-register {
    background: #edf1f4;
}

/* Use one continuous muted grey canvas behind both authentication panels. */
body.login-page,
body.account-page,
.login-page,
.login-page.account-page,
.login-page .login-container,
.account-page .login-container,
.login-page .login-left,
.account-page .login-left,
.login-page .login-right,
.account-page .login-right {
    background: #d8e0e8;
}

/* Authentication fields use the same low-glare workspace treatment. */
.login-page .input-group,
.account-page .input-group,
.login-page .select2-selection--single,
.account-page .select2-selection--single {
    background: #e9edf1;
}

.login-page .input-group input,
.account-page .input-group input {
    background: transparent !important;
}

.login-page .input-group:focus-within,
.account-page .input-group:focus-within,
.login-page .select2-container--focus .select2-selection--single,
.account-page .select2-container--focus .select2-selection--single,
.login-page .select2-container--open .select2-selection--single,
.account-page .select2-container--open .select2-selection--single {
    border-color: #8adfff;
    background: #e3e8ed;
    box-shadow: 0 0 0 3px rgba(121, 212, 255, .22), 0 0 12px rgba(121, 212, 255, .38), 0 12px 24px rgba(15, 23, 42, .14);
}

/* Login card aligned with the finalized ClueCRM workspace palette. */
body.login-page,
.login-page,
.login-page .login-container,
.login-page .login-left,
.login-page .login-right {
    background-color: #dce3eb;
}

.login-page .login-card:not(.account-card) {
    border-color: #24469a;
    background: #dfe5ea;
    box-shadow: 0 2px 7px rgba(15, 31, 58, .08), 0 0 0 1px rgba(79, 96, 116, .06);
}

.login-page .login-card:not(.account-card) .login-subtitle,
.login-page .login-card:not(.account-card) .login-options,
.login-page .login-card:not(.account-card) .login-security-note {
    border-color: #9facb9;
    background: #e9edf1 !important;
    box-shadow: none !important;
}

.login-page .login-card:not(.account-card) .input-group,
.login-page .login-card:not(.account-card) .btn-google,
.login-page .login-card:not(.account-card) .btn-register {
    background: #e9edf1;
}

.login-page .login-card:not(.account-card) .input-group:focus-within {
    border-color: #8adfff;
    background: #e3e8ed;
    box-shadow: 0 0 0 3px rgba(121, 212, 255, .22), 0 0 12px rgba(121, 212, 255, .38), 0 12px 24px rgba(15, 23, 42, .14);
}

.login-page .login-card:not(.account-card) .btn-login {
    box-shadow: 0 0 0 1px rgba(49, 95, 165, .24), 0 0 10px rgba(121, 212, 255, .14);
}

.login-page .login-card:not(.account-card) .btn-login:hover {
    box-shadow: 0 0 0 3px rgba(121, 212, 255, .24), 0 0 16px rgba(121, 212, 255, .42);
}

/* Google and Register Company actions use identical dimensions. */
.login-page .login-card:not(.account-card) .btn-google,
.login-page .login-card:not(.account-card) .btn-register {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    padding: 0 20px;
    border-width: 2px;
    border-radius: 14px;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 900px) {
    .login-page .login-card:not(.account-card) .btn-google,
    .login-page .login-card:not(.account-card) .btn-register {
        height: 48px;
        min-height: 48px;
        flex-basis: 48px;
        padding: 0 16px;
        border-radius: 13px;
        font-size: 15px;
    }
}

/* Final registration palette override; kept last to win the legacy cascade. */
.login-page.account-page,
.login-page.account-page .login-right {
    background: #dce3eb;
}

.login-page.account-page .login-card.account-card,
.login-page.account-page .login-card.account-card.company-card,
.login-page.account-page .login-card.account-card.workspace-setup-card {
    border-color: #24469a;
    background: #dfe5ea;
    box-shadow: 0 2px 7px rgba(15, 31, 58, .08), 0 0 0 1px rgba(79, 96, 116, .06);
}

.login-page.account-page .login-card .login-header,
.login-page.account-page .login-card .login-form,
.login-page.account-page .login-card .form-actions,
.login-page.account-page .login-card footer {
    background: transparent;
}

.login-page.account-page .login-card .login-subtitle,
.login-page.account-page .company-card .module-selection,
.login-page.account-page .account-password-meter {
    border-color: #9facb9;
    background: #e9edf1 !important;
    box-shadow: none !important;
}

.login-page.account-page .login-card .input-group,
.login-page.account-page .login-card .select2-selection--single,
.login-page.account-page .company-card .module-options span,
.login-page.account-page .login-card .security-badge {
    border-color: #9facb9;
    background: #e9edf1;
    box-shadow: none;
}

.login-page.account-page .login-card .input-group input,
.login-page.account-page .login-card .input-group select {
    background: transparent !important;
}

.login-page.account-page .login-card .input-group:focus-within,
.login-page.account-page .login-card .select2-container--focus .select2-selection--single,
.login-page.account-page .login-card .select2-container--open .select2-selection--single {
    border-color: #8adfff;
    background: #e3e8ed;
    box-shadow: 0 0 0 3px rgba(121, 212, 255, .22), 0 0 12px rgba(121, 212, 255, .38), 0 12px 24px rgba(15, 23, 42, .14);
}

.login-page.account-page .company-address-grid .phone-country-code {
    border-color: #9facb9;
    background: transparent;
}

.login-page.account-page .login-card .btn-login {
    box-shadow: 0 0 0 1px rgba(49, 95, 165, .24), 0 0 10px rgba(121, 212, 255, .14);
}

.login-page.account-page .login-card .btn-login:hover {
    box-shadow: 0 0 0 3px rgba(121, 212, 255, .24), 0 0 16px rgba(121, 212, 255, .42);
}

/* ============================================================
   WORKSPACE SETUP - FINAL COMPACT MODULE CARDS
   Matches the earlier Workspace Setup layout
   ============================================================ */

.login-page.account-page
.workspace-setup-card
.module-selection {
    padding: 9px !important;
}

.login-page.account-page
.workspace-setup-card
.module-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 7px !important;
}

.login-page.account-page
.workspace-setup-card
.module-options label {
    height: auto !important;
}

.login-page.account-page
.workspace-setup-card
.module-options label > span {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 56px !important;
    height: 56px !important;
    align-content: center;
    padding: 7px 10px !important;
    border-radius: 11px !important;
}

.login-page.account-page
.workspace-setup-card
.module-options i {
    font-size: 1rem !important;
}

.login-page.account-page
.workspace-setup-card
.module-options strong {
    font-size: .78rem !important;
    line-height: 1.15;
}

.login-page.account-page
.workspace-setup-card
.module-options small {
    margin-top: 2px;

    font-size: .65rem !important;
    line-height: 1.15;
}

/* Keep the selected module appearance unchanged */
.login-page.account-page
.workspace-setup-card
.module-options input:checked + span {
    border-color: #1e3a8a;

    background:
        linear-gradient(180deg, #172f68, #081841);

    color: #fff;
}

/* Mobile */
@media (max-width: 520px) {

    .login-page.account-page
    .workspace-setup-card
    .module-options {
        gap: 6px !important;
    }

    .login-page.account-page
    .workspace-setup-card
    .module-options label > span {
        min-height: 54px !important;
        height: 54px !important;

        padding: 6px 8px !important;
    }
}

/* Match the primary authentication and onboarding cards to the CRM content canvas. */
.login-page .login-card:not(.account-card):not(.force-password-card),
.login-page.account-page .login-card.account-card,
.login-page.account-page .login-card.account-card.company-card,
.login-page.account-page .login-card.account-card.workspace-setup-card {
    background: #dce3eb;
}

/* Legacy compact rules are retained for narrow screens only. */
@media (min-width: 901px) {
    .login-page .login-card:not(.account-card) {
        max-height: calc(100dvh - 24px);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

@media (max-width: 900px) and (max-height: 760px) {
    .login-page .login-card:not(.account-card) {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .login-page .login-card:not(.account-card) .login-header {
        margin-bottom: 6px !important;
    }

    .login-page .login-card:not(.account-card) .security-badge {
        width: 38px;
        height: 38px;
        margin-bottom: 2px;
    }

    .login-page .login-card:not(.account-card) .login-header h2 {
        margin-bottom: 2px;
        font-size: 1.7rem;
    }

    .login-page .login-card:not(.account-card) .login-subtitle {
        margin-top: 3px !important;
        padding: 4px 9px !important;
        font-size: .78rem !important;
        line-height: 1.25 !important;
    }

    .login-page .login-card:not(.account-card) .login-form {
        gap: 4px !important;
    }

    .login-page .login-card:not(.account-card) .form-group {
        gap: 2px !important;
    }

    .login-page .login-card:not(.account-card) .login-options {
        min-height: 36px;
        margin: 1px 0 !important;
        padding: 5px 9px;
    }

    .login-page .login-card:not(.account-card) .login-security-note {
        min-height: 34px;
        margin: 0;
        padding: 3px 8px;
    }

    .login-page .login-card:not(.account-card) .divider {
        margin: 3px 0 !important;
    }

    .login-page .login-card:not(.account-card) .signup-section {
        padding-top: 5px !important;
        padding-bottom: 10px;
    }
}

/* Keep every authentication step at one shared responsive desktop height. */
@media (min-width: 901px) {
    .login-page,
    .login-page.account-page {
        grid-template-columns: minmax(920px, 72%) minmax(0, 1fr);
    }

    .login-page .login-right,
    .login-page.account-page .login-right {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        margin-left: -120px;
        padding: 12px 24px 12px 0;
        justify-content: flex-start;
    }

    .login-page:not(.account-page) .login-right {
        width: calc(100% + 100px);
    }

    .login-page.account-page .login-right {
        width: calc(100% + 200px);
        margin-left: -200px;
        background: transparent !important;
    }

    .login-page.account-page .login-card.account-card {
        width: calc(100% - 48px);
        max-width: 580px;
        margin-left: 58px;
    }

    .login-page .login-card:not(.account-card):not(.force-password-card) {
        box-sizing: border-box;
        width: min(100%, 440px);
        max-width: 100%;
        padding-bottom: 16px;
        scroll-padding-bottom: 16px;
    }

    .login-page .login-card:not(.force-password-card) {
        height: min(710px, calc(100dvh - 24px)) !important;
        min-height: 0 !important;
        max-height: min(710px, calc(100dvh - 24px)) !important;
        overflow-x: hidden;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .login-page .login-card:not(.force-password-card)::-webkit-scrollbar {
        display: none;
    }

    .login-page .login-card:not(.account-card) .login-form {
        flex: 0 0 auto;
    }

    .login-page:not(.account-page) .login-card .login-options {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    .login-page:not(.account-page) .login-card .login-header {
        margin-bottom: 6px !important;
        padding-bottom: 2px !important;
    }

    .login-page:not(.account-page) .login-card .security-badge {
        width: 44px;
        height: 44px;
        margin-bottom: 4px;
    }

    .login-page:not(.account-page) .login-card .security-badge i {
        font-size: 19px;
    }

    .login-page:not(.account-page) .login-card .login-header h2 {
        margin-bottom: 5px;
        font-size: 2.1rem;
        line-height: 1.2;
    }

    .login-page:not(.account-page) .login-card .login-form {
        gap: 10px !important;
    }

    .login-page:not(.account-page) .login-card .form-group {
        gap: 2px !important;
    }

    .login-page:not(.account-page) .login-card .form-group label {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
    }

    .login-page:not(.account-page) .login-card .input-group {
        height: 40px;
        min-height: 40px;
        padding: 0 13px;
    }

    .login-page:not(.account-page) .login-card .input-group input {
        font-size: 14px;
    }

    .login-page:not(.account-page) .login-card .btn-login {
        height: 40px;
        min-height: 40px;
        font-size: 15px;
    }

    .login-page:not(.account-page) .login-card .btn-login {
        margin-bottom: 8px;
    }

    .login-page:not(.account-page) .login-card .login-security-note {
        margin-top: 8px;
        margin-bottom: 3px;
    }

    .login-page:not(.account-page) .login-card .divider {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }

    .login-page:not(.account-page) .login-card .btn-google {
        margin-top: 1px;
        margin-bottom: 8px;
    }

    .login-page .login-card:not(.account-card) .signup-section {
        margin-top: 2px !important;
        padding-top: 3px !important;
        padding-bottom: 10px;
        flex-shrink: 0;
    }

    .login-page .login-card:not(.account-card) .btn-register {
        flex-shrink: 0;
        margin-bottom: 2px;
    }
}

/*
   Preserve the approved desktop composition on shorter Windows browser
   viewports.  The entire foreground composition is fitted proportionally;
   individual typography, spacing and card dimensions above stay unchanged.
   The 820px ceiling also covers Safari on a 1470x956 MacBook (~790px
   viewport), so Safari gets the same compact layout as Chrome (~757px).
   Taller desktop viewports never enter this rule.
*/
@media (min-width: 901px) and (max-height: 820px) {
    body.login-page,
    body.account-page,
    .login-page,
    .login-page.account-page {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .login-page .login-left-content,
    .login-page.account-page .login-left-content {
        width: 117.647%;
        max-width: 847px;
        height: 117.647dvh;
        zoom: .85;
    }

    .login-page .login-card:not(.force-password-card) {
        height: 710px !important;
        min-height: 710px !important;
        max-height: 710px !important;
        zoom: .85;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) {
        width: 595px;
        max-width: 595px;
        height: 816px !important;
        min-height: 816px !important;
        max-height: 816px !important;
        zoom: .74;
        overflow: hidden;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .security-badge {
        width: 51px;
        height: 51px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .security-badge i {
        font-size: 22px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-subtitle {
        margin-top: 7px !important;
        padding: 8px 14px !important;
        font-size: 1.034rem !important;
        line-height: 1.4 !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-form {
        gap: 11.5px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .form-group {
        gap: 2.3px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .form-group label {
        font-size: 15px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .input-group {
        height: 46px;
        min-height: 46px;
        padding-right: 15px;
        padding-left: 15px;
        border-width: 2.3px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .input-group input {
        font-size: 16px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .btn-login {
        height: 46px;
        min-height: 46px;
        flex-basis: 46px;
        padding: 0 23px;
        border-radius: 16px;
        font-size: 17px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .btn-login i {
        font-size: 21px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .btn-google,
    .login-page:not(.account-page) .login-card:not(.account-card) .btn-register {
        height: 46px;
        min-height: 46px;
        flex-basis: 46px;
        border-radius: 16px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-security-note {
        min-height: 44px;
        gap: 10px;
        padding: 6px 12px;
        border-radius: 14px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-security-note > span {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        border-radius: 10px;
        font-size: 13px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-security-note strong {
        font-size: 11.5px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-security-note small {
        font-size: 10.3px;
    }

    .login-page.account-page .login-card.account-card {
        width: min(calc(117.647% - 48px), 682px);
        max-width: 682px;
    }
}

/* Restore the original desktop Sign In width and keep the registration action
   inside the fixed-height card. The bottom inset matches Create Account; only
   optional vertical whitespace above the action is reclaimed. */
@media (min-width: 901px) {
    .login-page:not(.account-page) .login-card:not(.account-card):not(.force-password-card) {
        width: min(100%, 440px);
        max-width: 440px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-form {
        gap: 3px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-options {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .btn-login,
    .login-page:not(.account-page) .login-card:not(.account-card) .login-security-note,
    .login-page:not(.account-page) .login-card:not(.account-card) .btn-google {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .divider {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-section {
        margin-top: auto !important;
        padding-top: 3px !important;
        padding-bottom: 6px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-title {
        margin-bottom: 1px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-text {
        margin-bottom: 3px !important;
    }
}

/* The short-desktop layout is zoomed to .74, so this is the equivalent
   pre-zoom width of the restored 440px card. Its height remains untouched. */
@media (min-width: 901px) and (max-height: 820px) {
    .login-page:not(.account-page) .login-card:not(.account-card):not(.force-password-card) {
        width: 595px;
        max-width: 595px;
    }
}

/* Give all four authentication cards additional room only on iPad-class touch
   viewports. Their widths, controls, and all non-iPad layouts stay unchanged. */
@media (min-width: 700px) and (max-width: 1180px) and (hover: none) and (pointer: coarse) {
    .login-page {
        --ipad-login-card-height: min(750px, calc(100dvh - 28px));
    }

    .login-page:not(.account-page) .login-card:not(.account-card),
    .login-page.account-page .create-account-card,
    .login-page.account-page .company-details-card,
    .login-page.account-page .company-contact-card,
    .login-page.account-page .workspace-details-card {
        height: var(--ipad-login-card-height) !important;
        min-height: var(--ipad-login-card-height) !important;
        max-height: var(--ipad-login-card-height) !important;
    }

    /* iPad Safari needs a layout-position animation; its transform animation
       can remain visually static inside the dynamically sized fill element. */
    .account-strength-bar > span {
        contain: paint;
    }

    .account-strength-glow {
        inset: 0 auto 0 -45%;
        display: block;
        width: 45%;
        filter: none;
        transform: none;
        animation: account-strength-running-glow-ipad 2.5s ease-in-out infinite;
        -webkit-animation: account-strength-running-glow-ipad 2.5s ease-in-out infinite;
    }
}

@keyframes account-strength-running-glow-ipad {
    0%, 22% { left: -45%; opacity: 0; }
    35% { opacity: .9; }
    78% { left: 100%; opacity: .9; }
    100% { left: 100%; opacity: 0; }
}

@-webkit-keyframes account-strength-running-glow-ipad {
    0%, 22% { left: -45%; opacity: 0; }
    35% { opacity: .9; }
    78% { left: 100%; opacity: .9; }
    100% { left: 100%; opacity: 0; }
}

@media (min-width: 700px) and (max-width: 1180px) and (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
    .account-strength-glow {
        animation: none;
        -webkit-animation: none;
    }
}

/* Keep the Sign In heading identical to the Create Account heading. */
.login-page:not(.account-page) .login-card:not(.account-card) .login-header h2,
.login-page.account-page .login-card.account-card .login-header h2 {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.2;
}

@media (max-width: 900px) and (max-height: 760px) {
    .login-page:not(.account-page) .login-card:not(.account-card) .login-header h2,
    .login-page.account-page .login-card.account-card .login-header h2 {
        font-size: 1.72rem;
    }
}

/* Keep the Sign In header icon identical to the Create Account header icon. */
.login-page:not(.account-page) .login-card:not(.account-card) .security-badge,
.login-page.account-page .login-card.account-card .security-badge {
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 14px;
}

.login-page:not(.account-page) .login-card:not(.account-card) .security-badge i,
.login-page.account-page .login-card.account-card .security-badge i {
    font-size: 19px;
    line-height: 1;
}

/* Extra vertical fit for common 1366x768 Windows browser viewports. */
@media (min-width: 901px) and (max-width: 1440px) and (max-height: 820px) {
    .login-page .login-left-content,
    .login-page.account-page .login-left-content {
        width: 128.205%;
        max-width: 923px;
        height: 128.205dvh;
        zoom: .78;
    }
}

/* Slightly narrow and right-align every authentication/onboarding card. */
@media (min-width: 901px) {
    .login-page:not(.account-page) .login-card:not(.account-card):not(.force-password-card) {
        width: min(100%, 428px);
        max-width: 428px;
        margin-left: 12px;
    }

    .login-page.account-page .login-card.account-card,
    .login-page.account-page .login-card.account-card.company-card,
    .login-page.account-page .login-card.account-card.workspace-setup-card {
        width: calc(100% - 60px);
        max-width: 568px;
        margin-left: 70px;
    }
}

/* Preserve the same rendered adjustment inside the short Windows fit mode. */
@media (min-width: 901px) and (max-height: 820px) {
    .login-page:not(.account-page) .login-card:not(.account-card):not(.force-password-card) {
        width: 578px;
        max-width: 578px;
        margin-left: 16px;
    }

    .login-page.account-page .login-card.account-card,
    .login-page.account-page .login-card.account-card.company-card,
    .login-page.account-page .login-card.account-card.workspace-setup-card {
        width: min(calc(117.647% - 60px), 668px);
        max-width: 668px;
        margin-left: 70px;
    }
}

/* Use the Create Account action footer as the single bottom-spacing standard.
   Card heights and action dimensions remain unchanged at every breakpoint. */
.login-page:not(.account-page) .login-card:not(.account-card) .signup-section,
.login-page.account-page .login-card.account-card .form-actions {
    padding-bottom: 6px !important;
}

@media (min-width: 901px) {
    .login-page:not(.account-page) .login-card:not(.account-card) {
        padding-bottom: 18px;
    }
}

/* Match the animated Cancel/Reset hover on the Login card's white actions.
   This intentionally changes only interaction effects, not their sizing. */
.login-page .login-card:not(.account-card) .btn-google,
.login-page .login-card:not(.account-card) .btn-register {
    position: relative;
    overflow: hidden;
    transition: border-color .25s ease, background-color .25s ease,
        box-shadow .25s ease, transform .25s ease !important;
}

.login-page .login-card:not(.account-card) .btn-google::after,
.login-page .login-card:not(.account-card) .btn-register::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0;
    top: -60% !important;
    left: -35% !important;
    width: 45% !important;
    height: 220% !important;
    pointer-events: none !important;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255, 255, 255, .05) 30%,
        rgba(255, 255, 255, .45) 50%,
        rgba(255, 255, 255, .05) 70%,
        transparent 100%) !important;
    transform: translateX(-180%) rotate(20deg) !important;
    transition: transform .9s cubic-bezier(.22, .61, .36, 1) !important;
}

.login-page .login-card:not(.account-card) .btn-google:hover::after,
.login-page .login-card:not(.account-card) .btn-register:hover::after {
    transform: translateX(380%) rotate(20deg) !important;
}

.login-page .login-card:not(.account-card) .btn-google > *,
.login-page .login-card:not(.account-card) .btn-register > * {
    position: relative;
    z-index: 1;
}

.login-page .login-card:not(.account-card) .btn-google .google-logo,
.login-page .login-card:not(.account-card) .btn-register i {
    transition: transform .25s ease;
}

.login-page .login-card:not(.account-card) .btn-google:hover,
.login-page .login-card:not(.account-card) .btn-register:hover {
    border-color: #8adfff !important;
    background: #dfe6ec !important;
    color: #1e3a8a;
    transform: none !important;
    filter: brightness(1.04);
    box-shadow: 0 0 0 4px rgba(121, 212, 255, .30),
        0 0 20px rgba(121, 212, 255, .70),
        0 0 40px rgba(121, 212, 255, .50),
        0 18px 36px rgba(15, 23, 42, .20) !important;
}

.login-page .login-card:not(.account-card) .btn-google:hover .google-logo,
.login-page .login-card:not(.account-card) .btn-register:hover i {
    transform: scale(1.08);
}

/* Prevent the flexible login-form spacer from opening a large gap between
   Google and the registration prompt on iPhone 11 and narrower phones. */
@media (max-width: 414px) {
    .login-page:not(.account-page) .login-card:not(.account-card) .signup-section {
        margin-top: 4px !important;
        padding-top: 5px !important;
    }
}

/* Keep only the desktop Sign In card slightly narrower and centered within
   its right-side column. Card height and internal spacing remain unchanged. */
@media (min-width: 901px) {
    .login-page:not(.account-page) .login-card:not(.account-card):not(.force-password-card) {
        width: min(100%, 418px);
        max-width: 418px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* Equivalent pre-zoom width for short Windows browser viewports. */
@media (min-width: 901px) and (max-height: 820px) {
    .login-page:not(.account-page) .login-card:not(.account-card):not(.force-password-card) {
        width: 565px;
        max-width: 565px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* Improve Secure Access readability without changing the panel footprint. */
.login-page:not(.account-page) .login-card:not(.account-card) .login-security-note strong {
    font-size: 11px;
}

.login-page:not(.account-page) .login-card:not(.account-card) .login-security-note small {
    font-size: 10px;
}

@media (min-width: 901px) {
    .login-page:not(.account-page) .login-card:not(.account-card) .login-security-note strong {
        font-size: 12.5px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-security-note small {
        font-size: 11.2px;
    }
}

/* Final login-only width alignment. Do not alter card height or its controls. */
@media (min-width: 901px) {
    .login-page:not(.account-page) .login-card:not(.account-card):not(.force-password-card) {
        width: min(100%, 398px);
        max-width: 398px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* Preserve the same rendered 398px width in the short-viewport zoom mode. */
@media (min-width: 901px) and (max-height: 820px) {
    .login-page:not(.account-page) .login-card:not(.account-card):not(.force-password-card) {
        width: 538px;
        max-width: 538px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* Match the complete Sign In header rhythm to Create Account. */
.login-page:not(.account-page) .login-card:not(.account-card) .login-header {
    margin-bottom: 6px !important;
    padding-bottom: 2px !important;
}

.login-page:not(.account-page) .login-card:not(.account-card) .security-badge {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0 auto 4px;
    border: 2px solid #9facb9;
    border-radius: 14px;
    background: #e9edf1;
    box-shadow: none;
}

.login-page:not(.account-page) .login-card:not(.account-card) .security-badge i {
    font-size: 19px;
    line-height: 1;
    filter: none;
}

.login-page:not(.account-page) .login-card:not(.account-card) .login-header h2 {
    margin-top: 0;
    margin-bottom: 5px;
}

/* The Sign In card uses .74 zoom in short desktop viewports while Create
   Account uses .85; compensate so the header still renders at the same size. */
@media (min-width: 901px) and (max-height: 820px) {
    .login-page:not(.account-page) .login-card:not(.account-card) .login-header {
        margin-bottom: 6.89px !important;
        padding-bottom: 2.3px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .security-badge {
        width: 50.54px;
        height: 50.54px;
        margin-bottom: 4.59px;
        border-width: 2.3px;
        border-radius: 16.08px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .security-badge i {
        font-size: 21.82px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-header h2 {
        margin-bottom: 5.74px;
        font-size: 2.41rem;
    }
}

/* Keep the fixed-height Sign In card inside short desktop browser viewports.
   Reclaim space only around Secure Access so the content below moves upward;
   card and control heights remain unchanged. */
@media (min-width: 901px) and (max-height: 820px) {
    /* The short Mac/desktop layout must retain the same action-footer inset as
       Create Account. Compress only the optional vertical rhythm above it. */
    .login-page:not(.account-page) .login-card:not(.account-card) .login-form {
        gap: 3px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-options {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .btn-login {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-security-note {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .divider {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .btn-google {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-section {
        margin-top: 0 !important;
        padding-top: 2px !important;
        padding-bottom: 6px !important;
    }
}

/* Final fixed-height desktop correction. Keep this after the historical width
   rules above so the original width and Create Account bottom inset win. */
@media (min-width: 901px) {
    .login-page:not(.account-page) .login-card:not(.account-card):not(.force-password-card) {
        width: min(100%, 440px);
        max-width: 440px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-form {
        gap: 4px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-options {
        margin-top: 11px !important;
        margin-bottom: 4px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .btn-login {
        margin-top: 11px !important;
        margin-bottom: 10px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-security-note {
        margin-top: 1px !important;
        margin-bottom: 2px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .divider {
        margin: 14px 0 !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .btn-google {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-section {
        margin-top: auto !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-title {
        margin-bottom: 2px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-text {
        margin-bottom: 5px !important;
    }
}

@media (min-width: 901px) and (max-height: 820px) {
    .login-page:not(.account-page) .login-card:not(.account-card):not(.force-password-card) {
        width: 595px;
        max-width: 595px;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-section {
        margin-top: 0 !important;
    }
}

/* Anchor the Login registration action to the same footer position as the
   Create Account action. A legacy desktop rule changed the form to
   flex: 0 0 auto, which left unused card space below Register Company. */
@media (min-width: 901px) {
    .login-page:not(.account-page) .login-card:not(.account-card) .login-form {
        flex: 1 1 auto;
        min-height: 0;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-section {
        margin-top: auto !important;
    }
}

/* Final Sign In rhythm: distribute spare card height between all form rows.
   The previous auto margin consumed it entirely above "New to Clue CRM?". */
@media (min-width: 901px) and (min-height: 651px) {
    .login-page:not(.account-page) .login-card:not(.account-card) .login-form {
        justify-content: space-between !important;
        gap: 4px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-section {
        margin-top: 0 !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-options {
        margin-top: 8px !important;
        margin-bottom: 4px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .btn-login {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .login-security-note {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .divider {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .btn-google {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }
}

/* Very short desktop/landscape screens keep the compact, bottom-anchored
   layout so the fixed-height controls cannot be clipped. */
@media (min-width: 901px) and (max-height: 650px) {
    .login-page:not(.account-page) .login-card:not(.account-card) .login-form {
        justify-content: flex-start !important;
        gap: 3px !important;
    }

    .login-page:not(.account-page) .login-card:not(.account-card) .signup-section {
        margin-top: auto !important;
    }
}

/* Premium Forgot Password card. */
.forgot-password-page .forgot-password-card {
    max-width: 520px;
    padding: 28px 24px 22px;
}

.forgot-password-page .forgot-password-card .login-header {
    margin-bottom: 18px !important;
}

.forgot-password-page .forgot-password-badge {
    position: relative;
    color: #1e3a8a;
}

.forgot-password-page .forgot-password-badge::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(52, 214, 255, .42);
    border-radius: 16px;
    animation: forgot-password-badge-pulse 2.4s ease-in-out infinite;
    pointer-events: none;
}

.forgot-password-page .forgot-password-card .forgot-password-form {
    justify-content: flex-start !important;
    gap: 16px !important;
}

.forgot-password-guidance {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #9facb9;
    border-radius: 14px;
    background: linear-gradient(145deg, #e9edf1, #dfe7ee);
    box-shadow: inset 0 1px rgba(255, 255, 255, .72), 0 5px 14px rgba(15, 31, 58, .07);
}

.forgot-password-guidance > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(52, 214, 255, .38);
    border-radius: 12px;
    background: #dff5ff;
    color: #1e3a8a;
    font-size: 18px;
}

.forgot-password-guidance strong {
    display: block;
    margin-bottom: 3px;
    color: #17365f;
    font-size: .84rem;
}

.forgot-password-guidance p {
    margin: 0;
    color: #607087;
    font-size: .72rem;
    line-height: 1.5;
}

.forgot-password-page .forgot-password-card .btn-login {
    min-height: 44px;
    margin-top: 2px !important;
}

.forgot-password-security {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #b8c6d5;
    border-radius: 12px;
    background: #e9edf1;
    color: #607087;
    font-size: .7rem;
    line-height: 1.5;
}

.forgot-password-security i {
    margin-top: 2px;
    color: #2454ad;
}

.forgot-password-back {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #b9c5d1;
}

.forgot-password-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1e3a8a;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.forgot-password-back a:hover {
    color: #2563eb;
}

@keyframes forgot-password-badge-pulse {
    0%, 100% { opacity: .35; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1.04); }
}

@media (max-width: 900px) {
    .forgot-password-page .forgot-password-card {
        width: min(100%, 500px);
        max-width: 500px;
        min-height: 0;
        height: auto !important;
        padding: 22px 18px max(20px, env(safe-area-inset-bottom));
    }

    .forgot-password-page .forgot-password-card .forgot-password-form {
        gap: 13px !important;
    }

    .forgot-password-back {
        margin-top: 4px;
    }
}

@media (max-width: 420px) {
    .forgot-password-guidance {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 11px;
    }

    .forgot-password-guidance > span {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .forgot-password-page .forgot-password-badge::after { animation: none; }
}

/* One text-link treatment across every authentication and onboarding screen. */
.login-page .login-card a:not(.btn-login):not(.btn-google):not(.btn-register) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease;
}

.login-page .login-card a:not(.btn-login):not(.btn-google):not(.btn-register)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .2s ease;
}

.login-page .login-card a:not(.btn-login):not(.btn-google):not(.btn-register):hover,
.login-page .login-card a:not(.btn-login):not(.btn-google):not(.btn-register):focus-visible {
    color: #1d4ed8;
}

.login-page .login-card a:not(.btn-login):not(.btn-google):not(.btn-register):hover::after,
.login-page .login-card a:not(.btn-login):not(.btn-google):not(.btn-register):focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
    .login-page .login-card a:not(.btn-login):not(.btn-google):not(.btn-register)::after {
        transition: none;
    }
}

/* Improve Create Account password-meter readability without changing geometry. */
.create-account-card .account-strength-header,
.create-account-card .account-strength-header > span {
    color: #17365f;
}

.create-account-card .account-strength-header > strong {
    color: #24469a;
    background: rgba(241, 246, 252, .96);
}

.create-account-card .account-password-checklist li {
    color: #4f6078;
    font-size: 9.5px;
    font-weight: 650;
}

.create-account-card .account-password-checklist li i {
    color: #64748b;
}

.create-account-card .account-password-checklist li.invalid {
    color: #8b4350;
}

.create-account-card .account-password-checklist li.invalid i {
    color: #c24152;
}

@media (max-width: 760px) {
    .create-account-card .account-password-checklist li {
        font-size: 8.5px;
    }
}

/* Force Password Change uses the same compact control rhythm and meter. */
.login-page:not(.account-page) .login-card.force-password-card .login-form.force-password-form {
    justify-content: flex-start !important;
    gap: 10px !important;
}

.login-page:not(.account-page) .login-card.force-password-card .login-form.force-password-form > .form-group {
    flex: 0 0 auto;
    gap: 5px !important;
    margin: 0 !important;
}

.force-password-card .force-password-meter {
    width: 100%;
    margin: 4px 0 0;
    padding: 10px 12px 8px;
    border-color: #9facb9;
    background: #e9edf1;
    box-shadow: none;
}

.login-page:not(.account-page) .login-card.force-password-card .login-form.force-password-form > .btn-login {
    margin-top: auto !important;
}

@media (max-width: 760px) {
    .login-page:not(.account-page) .login-card.force-password-card .login-form.force-password-form {
        gap: 8px !important;
    }

    .force-password-card .force-password-meter {
        margin-top: 2px;
    }

}

/* One visual specification for password meters on both authentication cards. */
.create-account-card .account-password-meter,
.force-password-card .account-password-meter {
    border-color: #879bb4;
    background: #f4f7fb;
    font-family: inherit;
    box-shadow: none;
}

.create-account-card .account-strength-header,
.create-account-card .account-strength-header > span,
.force-password-card .account-strength-header,
.force-password-card .account-strength-header > span {
    color: #17365f;
    font-size: 13px;
    font-weight: 800;
}

.create-account-card .account-strength-header > strong,
.force-password-card .account-strength-header > strong {
    background: rgba(241, 246, 252, .96);
    font-size: 11px;
    font-weight: 700;
}

.create-account-card .account-password-checklist li,
.force-password-card .account-password-checklist li {
    color: #4f6078;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

.create-account-card .account-password-checklist li i,
.force-password-card .account-password-checklist li i {
    color: #64748b;
    font-size: 7px;
}

.create-account-card .account-password-checklist li.valid,
.force-password-card .account-password-checklist li.valid,
.create-account-card .account-password-checklist li.valid i,
.force-password-card .account-password-checklist li.valid i {
    color: #157347;
}

.create-account-card .account-password-checklist li.invalid,
.force-password-card .account-password-checklist li.invalid {
    color: #853344;
}

.create-account-card .account-password-checklist li.invalid i,
.force-password-card .account-password-checklist li.invalid i {
    color: #c24152;
}

@media (max-width: 760px) {
    .create-account-card .account-password-checklist li,
    .force-password-card .account-password-checklist li {
        font-size: 11px;
    }
}

.create-account-card .account-password-checklist,
.force-password-card .account-password-checklist {
    row-gap: 6px;
}

.create-account-card .account-strength-bar,
.force-password-card .account-strength-bar {
    height: 7px;
    background: #cbd5e1;
}

/* Shared readable meter sizing: registration and the password-reset/change flow. */
.login-card .account-password-meter {
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8px 10px;
    box-sizing:border-box;
}
.create-account-card .account-password-meter { align-self:stretch; }
.login-card .account-password-meter .account-strength-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    padding:0;
    min-height:16px;
    margin-bottom:5px;
    font-size:11px;
}
.login-card .account-password-meter .account-strength-header > span { font-size:11px; line-height:16px; }
.login-card .account-password-meter .account-strength-header > strong {
    position:static;
    flex:0 0 auto;
    min-width:0;
    margin:0;
    padding:2px 6px;
    font-size:10px;
    line-height:12px;
}
.login-card .account-password-meter .account-password-checklist { gap:3px 8px; margin-top:5px; }
.login-card .account-password-meter .account-password-checklist li { font-size:11px; line-height:14px; gap:4px; }
.login-card .account-password-meter .account-strength-bar { height:5px; flex-shrink:0; }
@media (max-width:760px) {
    .create-account-card .account-password-meter { margin-top:0; }
}

/* Create Account on short phone screens (iPhone 11-15: Safari shows only ~660-715px): every auth card keeps the same fixed
   size with no scroll, so this card - the one with the most content - is compacted to fit, Create Account button included
   (owner, 2026-10-08). Taller phones (Pro Max), iPads and desktop keep the full spacing. */
@media (max-width: 760px) and (max-height: 760px) {
    .login-page.account-page .login-card.create-account-card { padding-top: 10px !important; padding-bottom: 10px !important; }
    .login-page.account-page .login-card.create-account-card .login-header { gap: 4px !important; margin: 0 0 6px !important; }
    .login-page.account-page .login-card.create-account-card .security-badge { width: 34px !important; height: 34px !important; min-height: 0 !important; margin: 0 auto !important; border-radius: 10px !important; }
    .login-page.account-page .login-card.create-account-card .security-badge i { font-size: 15px !important; }
    .login-page.account-page .login-card.create-account-card .login-header h2 { margin: 0 !important; font-size: 26px !important; line-height: 1.1 !important; }
    .login-page.account-page .login-card.create-account-card .login-subtitle { margin: 0 !important; padding: 4px 10px !important; font-size: 12px !important; line-height: 1.3 !important; }
    .login-page.account-page .login-card.create-account-card .login-form { gap: 5px !important; row-gap: 5px !important; }
    .login-page.account-page .login-card.create-account-card .name-fields { gap: 6px !important; row-gap: 6px !important; }
    .login-page.account-page .login-card.create-account-card .form-group { gap: 3px !important; margin: 0 !important; }
    .login-page.account-page .login-card.create-account-card .input-group { height: 34px !important; min-height: 34px !important; }
    .login-page.account-page .login-card.create-account-card .account-password-meter { padding-top: 5px !important; padding-bottom: 5px !important; }
    .login-page.account-page .login-card.create-account-card .form-actions { gap: 6px !important; margin-top: 2px !important; }
    .login-page.account-page .login-card.create-account-card .btn-login { height: 40px !important; min-height: 40px !important; }
}

/* Short phone screens (iPhone 11-15): the card's content fills the card the way it does on an iPhone Pro Max - the form
   stretches to the card's height and any spare space is shared evenly between its rows, so the last button (Sign In's
   Register Company, Create Account ...) sits near the bottom edge instead of above an empty strip, and no single gap
   balloons (owner, 2026-10-08). The card itself keeps its fixed size and no scroll. */
@media (max-width: 760px) and (max-height: 760px) {
    .login-page .login-card { display: flex !important; flex-direction: column !important; }
    /* Doubled classes: outranks the per-card login-form layouts that pin the rows to the top. */
    body .login-page .login-right .login-card > form.login-form.login-form { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; min-height: 0; }
    .login-page .login-card > .login-form > .validation-summary:empty,
    .login-page .login-card > .login-form > .validation-summary.validation-summary-valid { display: none !important; }
    .login-page .login-card:not(.account-card) .signup-section,
    .login-page .login-card.account-card .form-actions { margin-top: 0 !important; }
}