@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600&family=Bebas+Neue&family=Exo+2:wght@400;600&display=swap');

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    margin: 0;
    background: repeating-linear-gradient(0deg, #dedede 0, #dedede 3px, #e2e2e2 3px, #e2e2e2 6px);
    color: #252525;
    font: 14px 'Exo 2', 'Barlow', Arial, sans-serif;
}
.auth-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}
.auth-card {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 380px;
    padding: 28px;
    background: #f5f5f5;
    border: 2px groove #b8b8b8;
    border-radius: 2px;
}
h1 { margin: 0; font: 400 28px 'Bebas Neue', 'Exo 2', sans-serif; letter-spacing: 1px; }
p { margin: 0; }
.muted { color: #646464; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
input, button { font: inherit; border: 1px solid #999; border-radius: 2px; }
input { width: 100%; padding: 8px 9px; background: #fff; border-style: inset; }
button {
    padding: 7px 11px;
    background: linear-gradient(#304b75, #182f58);
    border-color: #101f3b;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
button:hover { filter: brightness(.94); }
button:disabled { cursor: wait; opacity: .5; }
:focus-visible { outline: 2px solid #182f58; outline-offset: 2px; }
.message.error { padding: 12px; border-left: 3px solid #9d2534; background: #f5e8e9; color: #9d2534; }