/* Екрани входу BAUST Media — за макетом «Медіатека v2» (Claude Design).
   Без збірки: файл підключається напряму, CSS Filament на цих сторінках не вантажиться.
   Токени ті самі, що в library.css: тло #141414, текст #f2f2f0, приглушений #5f5f5c / #8f8f8c,
   межі #3a3a38, помилка #e0796d. Gilroy 400/700/800. */

@font-face { font-family: 'Gilroy'; src: url('/fonts/gilroy/Gilroy-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/fonts/gilroy/Gilroy-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/fonts/gilroy/Gilroy-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #141414; -webkit-font-smoothing: antialiased; }
body { font-family: 'Gilroy', Helvetica, Arial, sans-serif; color: #f2f2f0; }
input, button { font-family: 'Gilroy', Helvetica, Arial, sans-serif; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #3a3a38; }
::-webkit-scrollbar-track { background: transparent; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ── Каркас ───────────────────────────────────────────────── */
.auth { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.auth-row { flex: 1 1 auto; display: flex; justify-content: center; min-height: 0; }
.auth-col { flex: 0 1 480px; max-width: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding: 56px 64px; overflow: auto; }
.auth-inner { margin: auto 0; width: 100%; display: flex; flex-direction: column; }
.auth-pane { display: flex; flex-direction: column; animation: fadein 200ms cubic-bezier(.22, .61, .36, 1); }

/* ── Бренд ────────────────────────────────────────────────── */
.auth-brand { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.auth-brand .name { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: #f2f2f0; line-height: 1; }
.auth-brand .sub { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #5f5f5c; }

/* ── Поля ─────────────────────────────────────────────────── */
.auth-input { width: 100%; height: 48px; background: transparent; border: 0; border-bottom: 1px solid #3a3a38; padding: 0; font-size: 16px; color: #f2f2f0; outline: none; color-scheme: dark; }
.auth-input:focus { border-bottom-color: #f2f2f0; }
.auth-input::placeholder { color: #5f5f5c; }
/* Автозаповнення Chrome інакше заливає поле білим. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f2f2f0;
  -webkit-box-shadow: 0 0 0 1000px #141414 inset;
  caret-color: #f2f2f0;
  transition: background-color 9999s ease-out 0s;
}
.auth-input-stacked { margin-top: 8px; }
.auth-pass { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #3a3a38; margin-top: 8px; }
.auth-pass-first { margin-top: 0; }
.auth-pass:focus-within { border-bottom-color: #f2f2f0; }
.auth-pass .auth-input { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.auth-pass .auth-input:focus { border-bottom: 0; }
.auth-pass-toggle { flex: 0 0 auto; border: 0; background: transparent; color: #5f5f5c; font-size: 12px; cursor: pointer; padding: 0; }
.auth-pass-toggle:hover { color: #f2f2f0; }

/* ── Повідомлення ─────────────────────────────────────────── */
.auth-error { font-size: 13px; line-height: 1.5; color: #e0796d; margin-top: 16px; }
.auth-notice { font-size: 13px; line-height: 1.5; color: #8f8f8c; margin-top: 16px; }
.auth-hint { font-size: 14px; line-height: 1.6; color: #8f8f8c; margin-bottom: 24px; }
.auth-sent-title { font-size: 16px; line-height: 1.6; color: #f2f2f0; }
.auth-sent-note { font-size: 13px; line-height: 1.6; color: #5f5f5c; margin-top: 12px; }
.auth-resent { font-size: 13px; color: #8f8f8c; margin-top: 28px; }

/* ── Дії ──────────────────────────────────────────────────── */
.auth-submit { margin-top: 40px; height: 48px; border: 0; background: #f2f2f0; color: #111; font-size: 14px; font-weight: 700; cursor: pointer; }
.auth-submit:hover { background: #fff; }
.auth-submit[disabled] { opacity: .6; cursor: default; }
.auth-link { display: inline-block; width: fit-content; border: 0; background: transparent; color: #5f5f5c; font-size: 13px; line-height: 1.4; cursor: pointer; padding: 0; text-decoration: none; }
.auth-link:hover { color: #f2f2f0; }
.auth-forgot { margin-top: 40px; }
.auth-back { margin-top: 28px; }
.auth-back-tight { margin-top: 16px; }
.auth-resend { margin-top: 28px; }

[x-cloak] { display: none !important; }