/*
 * Страницы входа и восстановления пароля в оформлении панели (PrimeVue Aura, основной
 * цвет noir): карточка в рамке-градиенте основного цвета, как вход в панель и Sakai.
 * Цвета берутся из системной темы: у этих страниц нет переключателя.
 */
:root {
  color-scheme: light;
  --auth-bg: #f8fafc; --auth-card: #ffffff; --auth-border: #cbd5e1;
  --auth-text: #334155; --auth-heading: #0f172a; --auth-muted: #64748b;
  --auth-primary: #020617; --auth-on-primary: #ffffff; --auth-primary-hover: #1e293b;
  --auth-soft: #f1f5f9; --auth-ring: rgba(2, 6, 23, .2);
  --auth-danger: #dc2626; --auth-danger-soft: #fef2f2; --auth-danger-border: #fecaca;
  --auth-success: #15803d; --auth-success-soft: #f0fdf4; --auth-success-border: #bbf7d0;
  --auth-font: "Inter Variable", Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --auth-bg: #09090b; --auth-card: #18181b; --auth-border: #52525b;
    --auth-text: #e4e4e7; --auth-heading: #fafafa; --auth-muted: #a1a1aa;
    --auth-primary: #fafafa; --auth-on-primary: #09090b; --auth-primary-hover: #e4e4e7;
    --auth-soft: #27272a; --auth-ring: rgba(250, 250, 250, .25);
    --auth-danger: #f87171; --auth-danger-soft: rgba(239, 68, 68, .12); --auth-danger-border: rgba(239, 68, 68, .35);
    --auth-success: #4ade80; --auth-success-soft: rgba(34, 197, 94, .12); --auth-success-border: rgba(34, 197, 94, .35);
  }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; background: var(--auth-bg); color: var(--auth-text); font: 14px/1.5 var(--auth-font); -webkit-font-smoothing: antialiased; }
.frame { width: 100%; max-width: 560px; padding: 4px; border-radius: 56px; background: linear-gradient(180deg, var(--auth-primary) 10%, transparent 30%); }
.card { padding: 56px 64px; border-radius: 52px; background: var(--auth-card); }
.logo { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 32px; text-align: center; }
.logo .ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--auth-soft); color: var(--auth-heading); }
.logo .ic svg { width: 30px; height: 30px; }
.logo h1 { margin: 0; color: var(--auth-heading); font-size: 30px; font-weight: 500; line-height: 1.2; }
.logo p { margin: 0; color: var(--auth-muted); font-weight: 500; }
form { display: grid; gap: 24px; }
form[hidden] { display: none; }
.field { display: grid; gap: 8px; }
.field label { color: var(--auth-heading); font-size: 18px; font-weight: 500; }
.field input { width: 100%; padding: 8px 12px; border: 1px solid var(--auth-border); border-radius: 6px; background: var(--auth-card); color: var(--auth-heading); font: inherit; transition: border-color .2s, box-shadow .2s; }
.field input:hover { border-color: var(--auth-muted); }
.field input:focus { outline: none; border-color: var(--auth-primary); box-shadow: 0 0 0 3px var(--auth-ring); }
.field input::placeholder { color: var(--auth-muted); }
.btn, button[type=submit] { width: 100%; padding: 8px 12px; border: 1px solid var(--auth-primary); border-radius: 6px; background: var(--auth-primary); color: var(--auth-on-primary); font: 500 14px/1.5 var(--auth-font); cursor: pointer; transition: background .2s; }
.btn:hover, button[type=submit]:hover { background: var(--auth-primary-hover); border-color: var(--auth-primary-hover); }
.btn:focus-visible, button[type=submit]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--auth-card), 0 0 0 4px var(--auth-primary); }
.err, .msg { margin-top: 24px; padding: 8px 12px; border: 1px solid; border-radius: 6px; }
.err { color: var(--auth-danger); background: var(--auth-danger-soft); border-color: var(--auth-danger-border); }
.msg { color: var(--auth-success); background: var(--auth-success-soft); border-color: var(--auth-success-border); }
.hint { margin: -16px 0 24px; color: var(--auth-muted); text-align: center; }
.hint[hidden] { display: none; }
.hint b { color: var(--auth-heading); font-weight: 500; }
.forgot { justify-self: end; margin-top: -16px; font-size: 14px; }
.links { margin: 32px 0 0; color: var(--auth-muted); text-align: center; font-size: 14px; }
a { color: var(--auth-heading); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--auth-primary); outline-offset: 2px; border-radius: 2px; }
.foot { margin-top: 24px; color: var(--auth-muted); font-size: 12px; }
@media (max-width: 640px) { .card { padding: 56px 24px; } }