body, html {
    height: 100%;
    min-height: 100vh;
}
.login-viewport {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-light);
}
.login-box {
    background: var(--text-inverse);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow);
    padding: var(--padding-xlarge) var(--padding-card-small);
    width: 100%;
    max-width: var(--width-max-small-card);
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);
}
.login-box h2 {
    color: var(--primary);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0;
    font-size: var(--font-size-header);
}
.input-box label {
    color: var(--primary);
    font-size: var(--font-size-label);
    margin-bottom: var(--margin-xs);
}
.input-box input {
    background: var(--secondary-light);
    color: var(--primary);
    border: var(--border-xthin) solid var(--secondary-dark);
    border-radius: var(--border-radius);
    padding: var(--padding-medium) 12px;
    font-size: var(--font-size-input);
    transition: border 0.2s;
}
.input-box input:focus {
    border: 1.5px solid var(--accent);
    outline: none;
}
.text-button.full-button {
    background: var(--accent);
    color: var(--text-inverse);
    font-weight: 600;
    border-radius: var(--border-radius);
    font-size: var(--font-size-button);
    padding: 12px 0;
    margin-top: 0;
}
.text-button.full-button:hover {
    background: var(--accent-dark);
    box-shadow: var(--box-shadow-hover);
}
.form-footer {
    text-align: center;
    margin-top: 0;
}
.form-footer a {
    color: var(--accent);
    font-size: var(--font-size-label);
}
.forgot-pass a {
    color: var(--primary-light);
    font-size: var(--font-size-small);
}
@media (max-width: 480px) {
    .login-box {
        padding: 22px 8px;
        max-width: 98vw;
        border-radius: var(--border-radius);
    }
}