html,

body {

    min-height: 100%;

}



body.tp-auth-pending .sf-app,

body.tp-auth-guest .sf-app {

    display: none !important;

}



body.tp-authenticated #tpLoginScreen {

    display: none !important;

}



#tpLoginScreen {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 24px;

    background:

        radial-gradient(circle at top left, rgba(39, 113, 255, 0.14), transparent 36%),

        radial-gradient(circle at bottom right, rgba(75, 65, 255, 0.10), transparent 34%),

        #f5f7fb;

    font-family: Arial, Helvetica, sans-serif;

}



.tp-login-card {

    box-sizing: border-box;

    width: 100%;

    max-width: 420px;

    padding: 38px;

    background: #ffffff;

    border: 1px solid rgba(15, 23, 42, 0.08);

    border-radius: 20px;

    box-shadow:

        0 24px 60px rgba(15, 23, 42, 0.12),

        0 4px 14px rgba(15, 23, 42, 0.05);

}



.tp-login-logo {

    display: block;

    width: 190px;

    max-width: 70%;

    height: auto;

    margin: 0 auto 28px;

}



.tp-login-title {

    margin: 0 0 8px;

    text-align: center;

    font-size: 26px;

    line-height: 1.2;

    color: #111827;

}



.tp-login-subtitle {

    margin: 0 0 30px;

    text-align: center;

    color: #6b7280;

    font-size: 14px;

    line-height: 1.6;

}



.tp-login-field {

    margin-bottom: 18px;

}



.tp-login-field label {

    display: block;

    margin-bottom: 7px;

    color: #374151;

    font-size: 13px;

    font-weight: 600;

}



.tp-login-field input {

    box-sizing: border-box;

    width: 100%;

    height: 48px;

    padding: 0 14px;

    border: 1px solid #d6dbe5;

    border-radius: 10px;

    background: #ffffff;

    color: #111827;

    font-size: 15px;

    outline: none;

}



.tp-login-field input:focus {

    border-color: #3366ff;

    box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);

}



#tpLoginSubmit {

    width: 100%;

    height: 50px;

    margin-top: 4px;

    border: 0;

    border-radius: 10px;

    background: #2457ff;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

}



#tpLoginSubmit:hover {

    filter: brightness(0.96);

}



#tpLoginSubmit:disabled {

    cursor: wait;

    opacity: 0.65;

}



#tpLoginMessage {

    min-height: 20px;

    margin: 16px 0 0;

    text-align: center;

    color: #dc2626;

    font-size: 13px;

}



#tpLoginMessage.tp-login-status {

    color: #6b7280;

}



@media (max-width: 520px) {

    #tpLoginScreen {

        padding: 16px;

    }



    .tp-login-card {

        padding: 28px 22px;

        border-radius: 16px;

    }

}