/* BASIC */

body {
    font-family: "Poppins", sans-serif;
    height: 100vh;
    margin: 0;
}

a {
    color: #FFB27A;
    display:inline-block;
    text-decoration: none;
    font-weight: 400;
}

.sf-toolbar {
    display: none !important;
}

*:focus {
    outline: none;
}

/* Shared authentication shell */
:root { 
    --auth-accent: #FF7A1A; 
    --auth-accent-soft: rgba(255, 122, 26, .16); 
    --auth-ink: #0f172a; 
    --auth-muted: #64748b; --auth-light: #f7f9f8; 
}

.login-page, .login-page * { 
    box-sizing: border-box; 
}

.login-page { 
    position: relative; 
    min-height: 100vh; 
    isolation: isolate; 
    overflow: hidden; 
    color: var(--auth-light); 
    background: linear-gradient(135deg, #1B0E05 0%, #3D1D09 52%, #A84B0C 100%); 
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 
}

.login-page::before { 
    content: ""; 
    position: absolute; 
    inset: 0; z-index: -3; 
    background: radial-gradient(circle at 72% 34%, rgba(255, 122, 26, .2), transparent 26rem), radial-gradient(circle at 28% 72%, rgba(255, 178, 122, .18), transparent 28rem), linear-gradient(135deg, #241207 0%, #7A3206 48%, #A84B0C 100%); 
}

.login-page::after { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    z-index: -2; 
    opacity: .42; 
    background: linear-gradient(115deg, rgba(255, 255, 255, .08), transparent 32%), repeating-linear-gradient(120deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 16px), linear-gradient(90deg, rgba(6, 11, 14, .88) 0%, rgba(6, 11, 14, .66) 37%, rgba(6, 11, 14, .16) 70%, rgba(6, 11, 14, .28) 100%); 
}

.login-page .layout { 
    min-height: 100vh; 
    display: grid; 
    grid-template-columns: minmax(350px, 430px) 1fr; 
}

.login-page .login-panel {
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    padding: 28px clamp(24px, 3vw, 44px);
    display: flex;
    flex-direction: column;
    color: var(--auth-ink);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .96));
    border-right: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 26px 0 80px rgba(15, 23, 42, .08);
    backdrop-filter: blur(22px) saturate(120%);
}

.login-page .brand { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    color: var(--auth-ink); 
    font-weight: 700; 
    letter-spacing: .04em; 
}

.login-page .brand-mark { 
    position: relative; 
    width: 34px; 
    height: 34px; 
    flex: 0 0 34px; 
}

.login-page .brand-mark::before, .login-page .brand-mark::after { 
    content: ""; 
    position: absolute; 
    left: 4px; 
    width: 23px; 
    height: 10px; 
    border-radius: 999px 2px 999px 2px; 
    background: linear-gradient(135deg, #FF7A1A, #FFB27A); 
    box-shadow: 0 0 24px rgba(255, 122, 26, .32); 
    transform: rotate(-28deg); 
}

.login-page .brand-mark::before { 
    top: 7px; 
}

.login-page .brand-mark::after {
    top: 17px; 
    opacity: .66; 
    transform: rotate(28deg); 
}

.login-page .brand small { 
    display: block; 
    margin-top: 1px; 
    color: var(--auth-muted); 
    font-size: 10px; 
    font-weight: 500; 
    letter-spacing: .22em; 
    text-transform: uppercase; 
}

.login-page .login-content { 
    width: 100%; 
    max-width: 370px; 
    margin: auto 0; 
    padding: 28px 0 18px; 
}

.login-page .eyebrow { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin: 0 0 12px; 
    color: #C2540A; 
    font-size: 11px; 
    font-weight: 700; 
    letter-spacing: .18em; 
    text-transform: uppercase; 
}

.login-page .eyebrow::before { 
    content: ""; 
    width: 30px; 
    height: 1px; 
    background: currentColor; 
}

.login-page .tenant-note { 
    margin: -6px 0 14px; 
    color: var(--auth-muted); 
    font-size: 11px; 
    letter-spacing: .08em; 
}

.login-page h1 {
    margin: 0 0 10px;
    color: var(--auth-ink);
    font-size: 44px;
    font-weight: 730;
    letter-spacing: -.045em;
    line-height: 1;
    text-align: left;
    text-transform: none;
}

.login-page .intro {
    max-width: 100%;
    margin: 0 0 20px;
    color: var(--auth-muted);
    font-size: 14px;
    line-height: 1.55;
}

.login-page .field { 
    position: relative; 
    margin-bottom: 12px; 
}

.login-page button, .login-page input { 
    font: inherit; 
}

.login-page .field input { 
    width: 100%; 
    height: 54px; 
    padding: 18px 48px 7px 16px; 
    border: 1px solid #d8e1ec; 
    border-radius: 14px; 
    outline: none; 
    color: var(--auth-ink) !important; 
    text-align: left; 
    background: #fff; 
    box-shadow: 0 10px 24px rgba(15, 23, 42, .035); 
    transition: .2s ease; 
}

.login-page .field label { 
    position: absolute; 
    top: 17px; 
    left: 16px; 
    color: #94a3b8; 
    font-size: 14px; 
    pointer-events: none; 
    transition: .2s ease; 
}

.login-page .field input:focus { 
    border-color: rgba(255, 122, 26, .72); 
    box-shadow: 0 0 0 4px var(--auth-accent-soft); 
}

.login-page .field input:focus + label, .login-page .field input:not(:placeholder-shown) + label { 
    top: 8px; 
    color: #C2540A; 
    font-size: 10px; 
    letter-spacing: .08em; 
    text-transform: uppercase; 
}

.login-page .toggle-password { 
    position: absolute; 
    top: 50%; 
    right: 12px; 
    display: grid; 
    width: 34px; 
    height: 34px; 
    place-items: center; 
    transform: translateY(-50%); 
    border: 0; 
    border-radius: 9px; 
    color: var(--auth-muted); 
    background: transparent; 
    cursor: pointer; 
}

.login-page .toggle-password:hover { 
    color: var(--auth-ink); 
    background: #f1f5f9; 
}

.login-page .toggle-password svg { 
    width: 18px; 
    height: 18px; 
    fill: none; 
    stroke: currentColor;
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 1.8; 
}

.login-page .form-meta { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 16px; 
    margin: 10px 0 20px; 
    color: var(--auth-muted); 
    font-size: 12px; 
}

.login-page .remember { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    cursor: pointer; 
}

.login-page .remember input { 
    accent-color: var(--auth-accent); 
}

.login-page .form-meta a, .login-page .back a { 
    color: #C2540A; 
    font-weight: 700; 
    text-decoration: none; 
}

.login-page .form-meta a:hover, .login-page .back a:hover { 
    text-decoration: underline; 
}

.login-page .submit { 
    display: block; 
    width: 100%; 
    min-height: 54px; 
    border: 0; 
    border-radius: 14px; 
    color: #0a120c; 
    background: var(--auth-accent); 
    box-shadow: 0 14px 34px rgba(255, 122, 26, .18); 
    font-weight: 750; 
    cursor: pointer; 
    transition: transform .2s ease, box-shadow .2s ease; 
}

.login-page .submit:hover { 
    box-shadow: 0 18px 42px rgba(255, 122, 26, .26); 
    transform: translateY(-2px); 
}

.login-page .submit:disabled, .login-page .text-action:disabled { 
    cursor: wait; 
    opacity: .58; 
}

.login-page .submit-link { 
    display: grid; 
    place-items: center; 
    text-decoration: none; 
}

.login-page .text-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    padding: 8px;
    border: 0; 
    color: #C2540A; 
    background: transparent; 
    font-weight: 800; 
    cursor: pointer; 
}

.login-page .resend-countdown { 
    font-variant-numeric: tabular-nums; 
}

.login-page .back {
    margin: 12px 0 0;
    color: var(--auth-muted);
    font-size: 12px;
}

.login-page .auth-terms { 
    display: flex; 
    align-items: flex-start; 
    gap: 9px; 
    margin: 0 0 18px; 
    padding: 13px 14px; 
    border: 1px solid #d8e1ec; 
    border-radius: 14px; 
    color: #475569; 
    background: #f8fafc; 
    font-size: 12px; 
    line-height: 1.45; 
}

.login-page .auth-terms input { 
    margin-top: 2px; 
    accent-color: #C2540A; 
}

.login-page .invited-email { 
    margin: -2px 0 14px; 
    padding: 12px 14px; 
    border: 1px solid #d8e1ec; 
    border-radius: 14px; 
    background: #f8fafc; 
}

.login-page .invited-email small, .login-page .invited-email strong { 
    display: block; 
}

.login-page .invited-email small { 
    color: #64748b; 
    font-size: 10px; 
    font-weight: 800; 
    letter-spacing: .08em; 
    text-transform: uppercase; 
}

.login-page .invited-email strong { 
    color: var(--auth-ink); 
    font-size: 14px; 
}

.login-page .two-factor-step { 
    display: flex; 
    gap: 12px; 
    margin: 0 0 14px; 
    padding-bottom: 14px; 
    border-bottom: 1px solid #e2e8f0; 
}

.login-page .two-factor-step > span { 
    display: grid; 
    width: 28px; 
    height: 28px; 
    place-items: center; 
    flex: 0 0 auto; 
    border-radius: 50%; 
    color: #7A3206; 
    background: var(--auth-accent); 
    font-size: 13px; 
    font-weight: 850; 
}

.login-page .two-factor-step strong { 
    color: var(--auth-ink); 
    font-size: 13px; 
}

.login-page .two-factor-step p { 
    margin: 3px 0 0; 
    color: var(--auth-muted); 
    font-size: 12px; 
    line-height: 1.45; 
}

.login-page .two-factor-qr { 
    display: block; 
    width: 132px; 
    height: 132px; 
    margin: 10px 0 8px; 
    border: 1px solid #d8e1ec; 
    border-radius: 10px; 
}

.login-page .two-factor-step code { 
    display: block; 
    overflow-wrap: anywhere; 
    color: #475569; 
    font-size: 10px; 
}

.login-page .auth-alert, .login-page .recovery-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    color: #991b1b;
    background: #fef2f2;
    font-size: 12px;
    line-height: 1.4;
}

.login-page .auth-alert strong, .login-page .recovery-note strong {
    display: block; 
    margin-bottom: 2px; 
    font-size: 13px; 
}

.login-page .auth-alert.warning { 
    border-color: #fde68a; 
    color: #92400e; 
    background: #fffbeb; 
}

.login-page .auth-alert.success, .login-page .recovery-note.success { 
    border-color: #bbf7d0; 
    color: #166534; 
    background: #f0fdf4; 
}

.login-page .auth-alert.info { 
    border-color: #bfdbfe; 
    color: #1d4ed8; 
    background: #eff6ff; 
}

.login-page .recovery-note { 
    display: block; 
    margin-top: 14px; 
    border-color: #e2e8f0; 
    color: var(--auth-muted); 
    background: #f8fafc;
}

.login-page .state-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 12px;
    padding: 13px;
    border: 1px solid #d8e1ec;
    border-radius: 16px; 
    background: #fff; 
    box-shadow: 0 10px 26px rgba(15, 23, 42, .045); 
}

.login-page .state-icon { 
    display: grid; 
    width: 42px; 
    height: 42px; 
    place-items: center; 
    flex: 0 0 auto; 
    border-radius: 14px; 
    font-weight: 900; 
}

.login-page .state-icon.warning { 
    color: #b45309; 
    background: #fffbeb; 
}

.login-page .state-icon.error { 
    color: #b91c1c; 
    background: #fef2f2; 
}

.login-page .state-icon.success { 
    color: #047857; 
    background: #ecfdf5; 
}

.login-page .state-card strong, .login-page .state-card span { 
    display: block; 
}

.login-page .state-card strong { 
    color: var(--auth-ink); 
    font-weight: 850; 
}

.login-page .state-card span { 
    margin-top: 2px; 
    color: var(--auth-muted); 
    font-size: 12px; 
    line-height: 1.45; 
}

.login-page .steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.login-page .dot { 
    display: grid; 
    width: 26px; 
    height: 26px; 
    place-items: center; 
    border: 1px solid #d8e1ec; 
    border-radius: 50%; 
    color: #94a3b8; 
    background: #fff; 
    font-size: 11px; 
    font-weight: 850; 
}

.login-page .dot.done { 
    border-color: #bbf7d0; 
    color: #047857; 
    background: #ecfdf5; 
}

.login-page .dot.active { 
    border-color: var(--auth-accent); 
    color: #7A3206; 
    background: var(--auth-accent); 
}

.login-page .line { 
    height: 1px; 
    flex: 1; 
    background: #d8e1ec; 
}

.login-page .codes {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
}

.login-page .codes input { 
    width: 100%; 
    height: 52px; 
    padding: 0; 
    border: 1px solid #d8e1ec; 
    border-radius: 12px; 
    color: var(--auth-ink); 
    text-align: center; 
    font-size: 22px; 
    font-weight: 800; 
}

.login-page .timer {
    display: flex;
    justify-content: space-between;
    margin: 0 0 12px;
    color: var(--auth-muted);
    font-size: 12px;
}

.login-page .password-rules { 
    display: grid; 
    gap: 6px; 
    margin: 0 0 16px; 
    color: var(--auth-muted); 
    font-size: 12px; 
    font-weight: 650; 
}

.login-page .password-rules div { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.login-page .password-rules span { 
    width: 9px; 
    height: 9px; 
    border-radius: 50%; 
    background: #cbd5e1; 
}

.login-page .password-rules .ok { 
    color: #047857; 
}

.login-page .password-rules .ok span { 
    background: #22c55e; 
}

.login-page .panel-footer { 
    display: flex; 
    justify-content: space-between; 
    gap: 16px; 
    color: #94a3b8; 
    font-size: 11px; 
}

.login-page .panel-footer span:last-child { 
    color: var(--auth-muted); 
}

.login-page .visual-copy { 
    min-height: 100vh; 
    padding: 34px 44px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.login-page .topline { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    gap: 12px; 
    color: rgba(255, 255, 255, .72); 
    font-size: 12px; 
    letter-spacing: .05em; 
}

.login-page .live-dot { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background: var(--auth-accent); 
    box-shadow: 0 0 0 6px rgba(255, 122, 26, .13), 0 0 24px rgba(255, 122, 26, .5); 
}

.login-page .destination-copy { 
    max-width: 770px; 
    align-self: flex-end; 
    text-align: right; 
}

.login-page .place { 
    margin: 0 0 8px; 
    color: rgba(255, 255, 255, .72); 
    font-size: 13px; 
    letter-spacing: .12em; 
    text-transform: uppercase; 
}

.login-page .destination-copy h2 { 
    display: block; 
    margin: 0; 
    color: var(--auth-light); 
    font-size: clamp(46px, 6.1vw, 92px); 
    font-weight: 680; 
    letter-spacing: -.07em; 
    line-height: .86; 
    text-align: right; 
    text-transform: none; 
    text-shadow: 0 10px 45px rgba(0, 0, 0, .38); 
}

.login-page .destination-copy em { 
    color: var(--auth-accent); 
    font-style: normal; 
}

.login-page .stats { 
    display: flex; 
    justify-content: flex-end; 
    gap: 12px; 
    flex-wrap: wrap; 
    margin-top: 24px; 
}

.login-page .stat { 
    min-width: 140px; 
    padding: 13px 15px; 
    border: 1px solid rgba(255, 255, 255, .16); 
    border-radius: 15px; 
    color: var(--auth-light); 
    background: rgba(6, 12, 14, .28); 
    text-align: left; 
    backdrop-filter: blur(14px); 
}

.login-page .stat strong { 
    display: block; 
    font-size: 19px; 
    letter-spacing: -.03em; 
}

.login-page .stat span { 
    color: rgba(255, 255, 255, .55); 
    font-size: 10px; 
    letter-spacing: .09em; 
    text-transform: uppercase; 
}

@media (max-width: 880px) { 
    .login-page .layout { display: block; }
    .login-page .login-panel { width: min(100%, 460px); }
    .login-page .visual-copy { display: none; } 
}

@media (max-width: 520px) {
    .login-page .login-panel {
        padding: 24px;
    }

    .login-page .login-content {
        padding: 36px 0;
    }

    .login-page h1 {
        font-size: 38px;
    }

    .login-page .panel-footer {
        flex-direction: column;
    }
}

@media (max-height: 700px) {
    .login-page h1 {
        margin-bottom: 6px;
    }

    .login-page .intro {
        margin: 0 0 14px;
        font-size: 13px;
        line-height: 1.4;
    }

    .login-page .login-content {
        padding: 14px 0 10px;
    }

    .login-page .auth-alert,
    .login-page .recovery-note,
    .login-page .state-card {
        margin-bottom: 10px;
        padding: 9px 12px;
    }

    .login-page .steps {
        margin-bottom: 8px;
    }

    .login-page .codes,
    .login-page .timer {
        margin-bottom: 8px;
    }

    .login-page .text-action {
        margin-top: 6px;
    }

    .login-page .back {
        margin-top: 8px;
    }

    .login-page .panel-footer {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-page *,
    .login-page *
    ::before, .login-page *
    ::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}