body {
    --color-accent: #ffffff;
    --color-text: #f7f7f8;
    --hh-panel: #0e0e11;
    --hh-tile: rgba(245,245,246,0.17);
    background: url("../images/bg-ZWwhdY1.jpg") center / cover fixed no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--color-text);
}

#box {
    width: min(380px, 92vw);
    border-radius: 32px;
    padding: 28px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--hh-panel) 58%, transparent), color-mix(in srgb, var(--hh-panel) 70%, transparent));
    -webkit-backdrop-filter: blur(46px);
    backdrop-filter: blur(46px);
    border: 1px solid rgba(245,245,246,0.22);
    box-shadow: inset 0 1px 0 rgba(245,245,246,0.24), 0 40px 90px rgba(0,0,0,0.5);
}

#top_login {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

#top_login img {
    height: 58px;
    width: auto;
}

h3 {
    text-align: center;
    padding: 0 0 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d0d0d4;
}

input {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--color-text);
    background: var(--hh-tile);
    border: 1px solid rgba(247,247,248,0.16);
    border-radius: 8px;
}

input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
}

button {
    width: 100%;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-accent);
    background: transparent;
    border: 1px solid var(--color-accent);
    padding: 10px 20px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

button:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

form div {
    margin: 12px 0;
}

.alert {
    padding: 10px 12px;
    border-radius: 8px;
    background: oklch(0.38 0.12 25);
    color: oklch(0.93 0.05 25);
    font-size: 13px;
}

#bottom_login {
    text-align: center;
    color: rgba(247,247,248,0.6);
    font-size: 11.5px;
    margin-top: 18px;
}