* {
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
    font-family:
        Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: #f3f7ff;
    background:
        radial-gradient(circle at 18% 15%, rgba(51, 112, 255, .12), transparent 28%),
        radial-gradient(circle at 86% 84%, rgba(36, 82, 181, .09), transparent 32%),
        #07101d;
}

.hidden {
    display: none !important;
}

.app-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.app-orb {
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 999px;
    filter: blur(90px);
    opacity: .2;
}

.app-orb-one {
    top: -220px;
    left: -170px;
    background: #225eea;
}

.app-orb-two {
    right: -190px;
    bottom: -250px;
    background: #183e91;
}

.public-login-root {
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login {
    width: min(100%, 420px);
    padding: 38px 34px;
    border: 1px solid rgba(110, 153, 216, .25);
    border-radius: 19px;
    background:
        linear-gradient(
            145deg,
            rgba(15, 30, 52, .96),
            rgba(9, 20, 36, .97)
        );
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
    text-align: center;
}

.login-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.login-logo {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(113, 163, 255, .3);
    border-radius: 20px;
    color: #fff;
    background:
        linear-gradient(145deg, #5594ff, #3568cf);
    box-shadow: 0 14px 38px rgba(38, 101, 220, .28);
    font-size: 17px;
    font-weight: 900;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 13px;
    color: #69a7ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .19em;
}

.login h2 {
    margin: 0 0 12px;
    font-size: clamp(23px, 5vw, 29px);
    line-height: 1.15;
}

.login p {
    max-width: 340px;
    margin: 0 auto 23px;
    color: #94a6bf;
    font-size: 14px;
    line-height: 1.7;
}

.btn,
.login-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 19px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, #4c8af2, #3266ce);
    box-shadow: 0 12px 26px rgba(27, 81, 181, .23);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover,
.login-button:hover {
    filter: brightness(1.08);
}

.login.login-access-state {
    border-color: rgba(243, 95, 111, .3);
    background:
        radial-gradient(circle at 50% 0, rgba(243, 95, 111, .13), transparent 43%),
        rgba(10, 22, 38, .97);
}

.login.login-access-state.warning {
    border-color: rgba(246, 200, 86, .28);
}

.login-access-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border: 1px solid rgba(243, 95, 111, .34);
    border-radius: 20px;
    color: #ff9ca7;
    background: rgba(243, 95, 111, .11);
    font-size: 28px;
}

.login-access-detail {
    max-width: 350px;
    margin: 0 auto 20px;
    padding: 12px 14px;
    border: 1px solid rgba(139, 164, 199, .14);
    border-radius: 10px;
    color: #8fa1b8;
    background: rgba(92, 117, 151, .06);
    font-size: 11px;
    line-height: 1.6;
}

.login-access-reset {
    display: block;
    margin: 14px auto 0;
    padding: 6px;
    border: 0;
    color: #7f93ac;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
}

#protectedApp:empty {
    display: none;
}

@media (max-width: 520px) {
    .public-login-root {
        padding: 14px;
    }

    .login {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .login-button {
        width: 100%;
    }
}

#protectedApp {
    width: 100%;
    min-height: 100vh;
}

body.logged-out #protectedApp:empty {
    display: none;
}

body.protected-app-active {
    min-height: 100vh;
    overflow: auto;
}

body.protected-app-active > .app-background {
    display: none;
}

body.protected-app-active #protectedApp {
    display: block;
}

body.protected-app-active .public-login-root {
    display: none !important;
}