/* Login only. Desktop keeps the original template's Bootstrap layout. */
.login-page .login-mobile-only {
    display: none;
}
.login-page .login-mobile-only[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .login-page {
        --login-ink: #302a24;
        --login-muted: #756c60;
        --login-accent: #f0bd5b;
        --login-border: #e4ded4;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        margin: 0;
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        align-items: stretch;
        color: var(--login-ink);
        background: #faf7f2;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        -webkit-tap-highlight-color: transparent;
    }

    .login-page .login-mobile-only {
        display: block;
    }

    .login-page[data-login-rtl] {
        direction: rtl;
    }

    .login-page[data-login-rtl] .login-submit-arrow {
        transform: rotate(180deg);
    }

    .login-page .login-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 460px;
        min-width: 0;
        padding: 22px 28px 20px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        text-align: start;
    }

    .login-page .login-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .login-page .login-wordmark {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.6px;
        overflow-wrap: anywhere;
    }

    .login-page .login-wordmark-dot {
        flex: 0 0 11px;
        width: 11px;
        height: 15px;
        border: 1.5px solid #9c7135;
        border-radius: 50% 50% 47% 47% / 62% 62% 38% 38%;
        background: #f5d593;
        transform: rotate(15deg);
    }

    .login-page .language-selector {
        flex-shrink: 0;
        margin: 0;
    }

    .login-page .language-selector select {
        width: 128px;
        min-height: 44px;
        padding: 9px 28px 9px 12px;
        border: 1px solid var(--login-border);
        border-radius: 22px;
        background-color: transparent;
        color: var(--login-ink);
        font-size: 16px;
        cursor: pointer;
    }

    .login-page .login-welcome {
        margin: clamp(22px, 4svh, 40px) 0 28px;
        text-align: center;
    }

    .login-page .login-art {
        position: relative;
        display: grid;
        place-items: center;
        width: 172px;
        height: 142px;
        margin: 0 auto 24px;
        isolation: isolate;
    }

    .login-page .login-art::before {
        position: absolute;
        z-index: -1;
        width: 126px;
        height: 126px;
        border-radius: 50%;
        background: #f5e9cf;
        content: "";
    }

    .login-page .login-orbit {
        position: absolute;
        z-index: -1;
        width: 172px;
        height: 108px;
        border: 1px solid #e7d7b7;
        border-radius: 50%;
        transform: rotate(-30deg);
        transition: transform .45s ease;
    }

    .login-page .login-orbit-two {
        width: 148px;
        height: 124px;
        transform: rotate(32deg);
        opacity: .6;
    }

    .login-page .login-art-dot {
        position: absolute;
        top: 24px;
        right: 18px;
        width: 8px;
        height: 8px;
        border: 2px solid #faf7f2;
        border-radius: 50%;
        background: #c49445;
    }

    .login-page .login-egg {
        width: 77px;
        height: 96px;
        filter: drop-shadow(0 10px 8px #9c703322);
        transform: rotate(-9deg);
        transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    }

    .login-page .login-company-mark {
        width: 80px;
        height: 80px;
        object-fit: contain;
    }

    .login-page .login-company-emoji {
        font-size: 62px;
        text-align: center;
    }

    .login-page[data-login-focus="username"] .login-egg {
        transform: translateY(-4px) rotate(5deg);
    }

    .login-page[data-login-focus="password"] .login-egg {
        transform: translateY(-4px) rotate(-16deg);
    }

    .login-page[data-login-focus] .login-orbit-one {
        transform: rotate(-15deg);
    }

    .login-page .login-eyebrow {
        margin: 0 0 12px;
        color: var(--login-muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.1px;
        line-height: 1.6;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    .login-page .login-welcome h1 {
        margin: 0 0 10px;
        font-size: clamp(29px, 8.2vw, 36px);
        font-weight: 650;
        letter-spacing: -1.3px;
        line-height: 1.12;
        text-wrap: balance;
    }

    .login-page .login-intro {
        margin: 0;
        color: var(--login-muted);
        font-size: 15px;
        line-height: 1.5;
        text-wrap: balance;
    }

    .login-page .login-desktop-title,
    .login-page .login-container > hr {
        display: none;
    }

    .login-page .login-sso {
        margin-bottom: 0 !important;
    }

    .login-page .btn-microsoft {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 54px;
        padding: 14px 16px;
        border: 1px solid var(--login-border);
        border-radius: 14px;
        background: #fff;
        color: var(--login-ink);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
    }

    .login-page .login-microsoft-icon {
        flex: 0 0 19px;
        width: 19px;
        height: 19px;
    }

    .login-page .login-divider {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 22px 0;
        color: var(--login-muted);
        font-size: 12px;
        text-align: center;
    }

    .login-page .login-divider::before,
    .login-page .login-divider::after {
        flex: 1 0 12px;
        height: 1px;
        background: var(--login-border);
        content: "";
    }

    .login-page .login-field {
        margin-bottom: 18px !important;
    }

    .login-page .login-field label {
        margin-bottom: 8px;
        color: #51483d;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
    }

    .login-page .form-control {
        width: 100%;
        min-height: 54px;
        padding: 14px 16px;
        border: 1px solid var(--login-border);
        border-radius: 13px;
        background: #fff;
        color: var(--login-ink);
        font-size: 16px; /* Prevent Safari from zooming the focused field. */
        line-height: 1.5;
        transition: border-color .18s ease, box-shadow .18s ease;
        scroll-margin-block: 24px;
    }

    .login-page .form-control::placeholder {
        color: #8a8277;
        opacity: 1;
    }

    .login-page .form-control:focus,
    .login-page .language-selector select:focus {
        outline: none;
        border-color: #aa792f;
        box-shadow: 0 0 0 3px #e9be7133;
    }

    .login-page .login-password-wrap {
        position: relative;
    }

    .login-page[data-login-enhanced] #login-password {
        padding-inline-end: 56px;
    }

    .login-page .login-password-toggle {
        position: absolute;
        inset-inline-end: 5px;
        top: 5px;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 11px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--login-muted);
        cursor: pointer;
        touch-action: manipulation;
    }

    .login-page .login-password-toggle svg {
        width: 22px;
        height: 22px;
    }

    .login-page .login-eye-slash {
        display: none;
    }

    .login-page .login-password-toggle[aria-pressed="true"] .login-eye-slash {
        display: block;
    }

    .login-page .login-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 56px;
        margin-top: 8px;
        padding: 14px 18px;
        border: 1px solid #e8b353;
        border-radius: 14px;
        background: var(--login-accent);
        color: var(--login-ink);
        box-shadow: 0 4px 0 #e4aa4329;
        font-size: 16px;
        font-weight: 650;
        line-height: 1.5;
    }

    .login-page .login-submit-arrow {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .login-page .btn,
    .login-page .login-password-toggle {
        transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
        touch-action: manipulation;
    }

    .login-page .btn:active {
        transform: translateY(1px);
    }

    .login-page .btn-microsoft:hover,
    .login-page .btn-microsoft:active {
        border-color: #d0c5b5;
        background: #f4efe6;
        color: var(--login-ink);
    }

    .login-page .login-submit:hover,
    .login-page .login-submit:active {
        border-color: #dea942;
        background: #eab34f;
        color: var(--login-ink);
    }

    .login-page .btn:focus-visible,
    .login-page .login-password-toggle:focus-visible {
        outline: 3px solid #9c7135;
        outline-offset: 3px;
        box-shadow: none;
    }

    .login-page .login-spinner {
        display: none;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        border: 2px solid #302a2433;
        border-top-color: currentColor;
        border-radius: 50%;
    }

    .login-page #login-form[aria-busy="true"] .login-spinner {
        display: block;
        animation: login-spin .75s linear infinite;
    }

    .login-page #login-form[aria-busy="true"] .login-submit-arrow {
        display: none;
    }

    .login-page [aria-disabled="true"] {
        cursor: wait;
        opacity: .75;
    }

    .login-page .login-status {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .login-page .alert {
        padding: 13px 15px;
        border: 1px solid #ecc8c3;
        border-radius: 12px;
        background: #fff0ed;
        color: #9a362b;
        font-size: 14px;
        line-height: 1.5;
    }

    .login-page .login-footer {
        margin-top: auto;
        padding-top: 32px;
        color: var(--login-muted);
        font-size: 11px;
        letter-spacing: .2px;
        text-align: center;
    }

    .login-page .login-footer-line {
        display: block;
        width: 24px;
        height: 2px;
        margin: 0 auto 12px;
        border-radius: 2px;
        background: #cfb98f;
    }

    .login-page .login-footer span:not(.login-footer-line) {
        margin-inline: 7px;
        color: #b6a992;
    }

    @keyframes login-spin {
        to { transform: rotate(360deg); }
    }
}

@media (max-width: 767px) and (max-height: 740px) {
    .login-page .login-container { padding-top: 14px; }
    .login-page .login-welcome { margin: 14px 0 20px; }
    .login-page .login-art { width: 116px; height: 76px; margin-bottom: 12px; }
    .login-page .login-art::before { width: 74px; height: 74px; }
    .login-page .login-orbit-one { width: 108px; height: 62px; }
    .login-page .login-orbit-two { width: 94px; height: 70px; }
    .login-page .login-egg { width: 47px; height: 59px; }
    .login-page .login-company-mark { width: 58px; height: 58px; }
    .login-page .login-company-emoji { font-size: 44px; }
    .login-page .login-eyebrow { margin-bottom: 8px; }
    .login-page .login-divider { margin: 16px 0; }
    .login-page .login-field { margin-bottom: 14px !important; }
    .login-page .login-footer { padding-top: 20px; }
}

@media (max-width: 359px) {
    .login-page .login-container { padding-inline: 20px; }
    .login-page .login-topbar { gap: 10px; }
    .login-page .language-selector select { width: 118px; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .login-page *, .login-page *::before, .login-page *::after {
        animation: none !important;
        transition: none !important;
    }
}