/* Страницы без меню — вход и сообщения об ошибках. Цвета и размеры — как в самой админке (admin-app/src/styles.css,
   по образцу TestForSupport): светлый фон, белая карточка с мягкой тенью, фиолетовый акцент; тёмная тема — из той же
   cookie, что выбирается в «Настройках» (сервер ставит data-theme на <html>). */

:root {
  color-scheme: light;
  --canvas: 246 248 251; --surface: 255 255 255;
  --ink: 26 31 54; --ink-2: 60 66 87; --ink-3: 105 115 134; --ink-4: 135 146 162; --ink-5: 163 172 185;
  --line: 227 232 238; --line-2: 238 241 245; --line-3: 244 246 249;
  --brand: 99 91 255; --brand-hover: 88 81 219; --brand-active: 75 69 196; --brand-ink: 63 58 168;
  --warn-bg: 248 229 185; --warn-ink: 152 55 5;
  --bad-bg: 253 226 221; --bad-ink: 164 28 78;
  --good-bg: 203 244 201; --good-ink: 14 98 69;
  --shadow-card: 0 1px 2px rgba(26, 31, 54, .06), 0 0 0 1px rgba(26, 31, 54, .04);
  --shadow-pop: 0 12px 32px rgba(26, 31, 54, .14), 0 0 0 1px rgba(26, 31, 54, .05);
  --shadow-btn: 0 1px 2px rgba(26, 31, 54, .1), inset 0 1px 0 rgba(255, 255, 255, .12);
  --shadow-focus: 0 0 0 4px rgba(99, 91, 255, .22);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: 19 21 26; --surface: 27 31 39;
  --ink: 222 224 228; --ink-2: 190 194 202; --ink-3: 152 160 172; --ink-4: 126 134 148; --ink-5: 88 96 110;
  --line: 50 56 67; --line-2: 40 46 55; --line-3: 36 41 50;
  --brand: 98 96 231; --brand-hover: 104 101 234; --brand-active: 88 86 203; --brand-ink: 182 172 242;
  --warn-bg: 62 48 21; --warn-ink: 224 181 107;
  --bad-bg: 72 32 39; --bad-ink: 242 157 167;
  --good-bg: 26 58 43; --good-ink: 125 206 162;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .32), 0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 255, 255, .1);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .1);
  --shadow-focus: 0 0 0 3px rgb(120 118 240 / .6);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --canvas: 19 21 26; --surface: 27 31 39;
    --ink: 222 224 228; --ink-2: 190 194 202; --ink-3: 152 160 172; --ink-4: 126 134 148; --ink-5: 88 96 110;
    --line: 50 56 67; --line-2: 40 46 55; --line-3: 36 41 50;
    --brand: 98 96 231; --brand-hover: 104 101 234; --brand-active: 88 86 203; --brand-ink: 182 172 242;
    --warn-bg: 62 48 21; --warn-ink: 224 181 107;
    --bad-bg: 72 32 39; --bad-ink: 242 157 167;
    --good-bg: 26 58 43; --good-ink: 125 206 162;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .32), 0 0 0 1px rgba(255, 255, 255, .06);
    --shadow-pop: 0 16px 40px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 255, 255, .1);
    --shadow-btn: 0 1px 2px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .1);
    --shadow-focus: 0 0 0 3px rgb(120 118 240 / .6);
  }
}

* { box-sizing: border-box; }
::selection { background: rgb(var(--brand) / .22); }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Шрифт — системный: Inter лежит только в сборке приложения (файлы с хешем в имени), сюда он не подключается. */
body { margin: 0; background: rgb(var(--canvas)); color: rgb(var(--ink));
  font: 14px/20px "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
a { color: rgb(var(--brand-ink)); text-decoration: none; }
a:hover { color: rgb(var(--brand-hover)); }
svg { width: 16px; height: 16px; flex: none; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 6px; }

body.bare { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; padding: 28px; border-radius: 12px; background: rgb(var(--surface)); box-shadow: var(--shadow-pop); }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px;
  background: rgb(var(--brand)); color: #fff; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-btn); }
.brand-name { color: rgb(var(--ink)); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.field > span { color: rgb(var(--ink)); font-size: 13px; font-weight: 500; }
.input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid rgb(var(--line)); border-radius: 6px; background: rgb(var(--surface));
  color: rgb(var(--ink)); font: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.input:hover { border-color: rgb(var(--ink-5)); }
.input:focus { outline: none; border-color: rgb(var(--brand)); box-shadow: var(--shadow-focus); }
.code-input { letter-spacing: .3em; font-variant-numeric: tabular-nums; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 6px;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s cubic-bezier(.22, 1, .36, 1), transform .1s; }
.btn:active { transform: scale(.985); }
.btn-primary { background: rgb(var(--brand)); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: rgb(var(--brand-hover)); }
.btn-primary:active { background: rgb(var(--brand-active)); }
.btn-block { width: 100%; margin-top: 4px; }

.alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; font-size: 13px; }
.alert svg { margin-top: 2px; }
.alert b { color: rgb(var(--ink)); font-weight: 600; }
.alert span { color: rgb(var(--ink-2)); }
.a-warning { background: rgb(var(--warn-bg) / .5); } .a-warning svg { color: rgb(var(--warn-ink)); }
.a-danger { background: rgb(var(--bad-bg) / .6); } .a-danger svg { color: rgb(var(--bad-ink)); }
.a-success { background: rgb(var(--good-bg) / .5); } .a-success svg { color: rgb(var(--good-ink)); }
.secondary { margin: 0; color: rgb(var(--ink-3)); font-size: 13px; }