/* css/auth.css -- sign in pages.
   Author: Nikita  Created: 2026-08-12 */

@font-face {
    font-family: 'Inter';
    src: url('/css/fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root { --ce-red: #CF1E2E; --ink: #1B1B1B; --ink-soft: #5A5F66; --line: #DFE3E8; }

* { box-sizing: border-box; }

/* The browser default for [hidden] is a plain rule that loses to any
   explicit display, so an element like .sheet with display:flex renders
   even when hidden. This makes the attribute mean what it says. */
[hidden] { display: none !important; }

body {
    margin: 0; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    font-family: Inter, system-ui, sans-serif; font-size: 15px;
    color: var(--ink); background: #fff; padding: 16px;
}
.card { width: 100%; max-width: 380px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.card-header { background: var(--ce-red); color: #fff; padding: 16px 20px; font-size: 16px; font-weight: 700; }
.card-body { padding: 20px; }
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
label.check { font-weight: 400; display: flex; gap: 8px; align-items: center; margin: 16px 0; }
input[type=text], input[type=password] {
    width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; min-height: 44px;
    border: 1px solid var(--line); border-radius: 4px;
}
.btn {
    display: block; width: 100%; text-align: center; margin-top: 16px;
    font: inherit; font-size: 15px; font-weight: 600; padding: 12px; min-height: 44px;
    border: 0; border-radius: 4px; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--ink); color: #fff; }
.alert { background: #FDECEA; color: #8A1C1C; padding: 10px 12px; border-radius: 4px; font-size: 14px; }
.muted { color: var(--ink-soft); font-size: 13px; margin-top: 16px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; color: var(--ink-soft); font-size: 13px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }