#authGate {
    position: fixed;
    inset: 0;

    z-index: 20000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 22px;

    background:
        radial-gradient(
            circle at top,
            #14372e 0,
            #071310 42%,
            #030908 100%
        );

    color: #f4fff9;
}


#authGate.show {
    display: flex;
}


.auth-panel {
    width: min(440px,100%);

    padding: 28px;

    border-radius: 28px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:
        rgba(5,18,15,.94);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.55);
}


.auth-kicker {
    color: #24e59d;

    font-size: 11px;
    font-weight: 950;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.auth-panel h1 {
    margin:
        10px 0 0;

    font-size: 29px;

    letter-spacing: -.035em;
}


.auth-panel p {
    margin:
        9px 0 21px;

    color: #91a9a1;

    font-size: 13px;

    line-height: 1.6;
}


.auth-field {
    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-top: 12px;
}


.auth-field label {
    color: #91a9a1;

    font-size: 11px;
}


.auth-field input {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 14px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 14px;

    outline: none;

    background: #091814;

    color: white;

    font: inherit;
}


.auth-field input:focus {
    border-color:
        rgba(36,229,157,.48);
}


.auth-submit {
    width: 100%;

    margin-top: 17px;

    padding: 13px 16px;

    border: 0;

    border-radius: 14px;

    background: #24e59d;

    color: #06100e;

    font: inherit;
    font-weight: 950;

    cursor: pointer;
}


.auth-submit:disabled {
    opacity: .55;
}


.auth-message {
    display: none;

    margin-top: 13px;

    padding: 11px 12px;

    border-radius: 12px;

    font-size: 12px;

    line-height: 1.45;
}


.auth-message.show {
    display: block;
}


.auth-message.error {
    color: #ffb0b6;

    background:
        rgba(255,112,123,.08);

    border:
        1px solid
        rgba(255,112,123,.18);
}


.auth-message.ok {
    color: #9fffd9;

    background:
        rgba(36,229,157,.07);

    border:
        1px solid
        rgba(36,229,157,.17);
}


.auth-security-note {
    margin-top: 17px;

    color: #6f8980;

    font-size: 10px;

    line-height: 1.55;
}


#authAccountLauncher {
    position: fixed;

    top: 16px;
    right: 16px;

    z-index: 9990;

    display: none;

    padding: 9px 12px;

    border-radius: 999px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:
        rgba(8,22,18,.92);

    color: #dff8ee;

    font: inherit;

    font-size: 11px;

    cursor: pointer;
}


#authAccountLauncher.show {
    display: block;
}


#authAccountMenu {
    position: fixed;

    top: 58px;
    right: 16px;

    z-index: 9991;

    display: none;

    width: 260px;

    padding: 15px;

    border-radius: 17px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background: #091814;

    color: white;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.45);
}


#authAccountMenu.show {
    display: block;
}


.auth-account-email {
    color: #91a9a1;

    margin-top: 4px;

    font-size: 11px;

    overflow-wrap: anywhere;
}


.auth-logout {
    width: 100%;

    margin-top: 13px;

    padding: 10px;

    border-radius: 11px;

    border:
        1px solid
        rgba(255,112,123,.18);

    background:
        rgba(255,112,123,.07);

    color: #ffb0b6;

    font: inherit;

    cursor: pointer;
}