* { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
    font-family: "Orbitron";
    src: url("/static/fonts/orbitron.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background:
        radial-gradient(circle at top, rgba(107, 112, 82, 0.10), transparent 55%),
        #1F1F1B;
    color: #E9D6B0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.login-box {
    background: #2D2D27;
    padding: 36px 32px 32px;
    border-radius: 14px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 12px 40px rgba(0,0,0,0.6);
    border: 1px solid #46463F;
    width: 360px;
    text-align: center;
}

.login-mark {
    display: block;
    width: 200px;
    height: auto;
    margin: 0 auto 18px;
}

.login-box h1 {
    font-family: "Orbitron", -apple-system, sans-serif;
    color: #F5E9CB;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.login-box p {
    color: #9A8E73;
    font-size: 0.88em;
    margin-bottom: 22px;
}

input {
    width: 100%;
    padding: 12px 14px;
    background: #1F1F1B;
    border: 1px solid #46463F;
    border-radius: 8px;
    font-size: 1em;
    color: #E9D6B0;
    margin-bottom: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: #7A6F58; }
input:focus {
    outline: none;
    border-color: #6B7052;
    box-shadow: 0 0 0 2px rgba(107,112,82,0.35);
}

button {
    width: 100%;
    padding: 12px;
    background: #6B7052;
    color: #0E0E0C;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.12s;
}
button:hover { background: #7C8260; }
button:active { transform: translateY(1px); }

.error {
    background: rgba(194,90,79,0.18);
    color: #E5A097;
    border: 1px solid rgba(194,90,79,0.4);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.85em;
    margin-bottom: 14px;
}

*:focus-visible {
    outline: 2px solid #E9D6B0;
    outline-offset: 2px;
}