/* Страница входа /auth/login (login.html). Вынесено из встроенного <style> дословно 24.10.2026 (хвосты интерфейса, п.5). */
        /* Локальный токен-слой (страница входа standalone, не наследует base.html):
           значения = светлая палитра дизайн-системы монитора (см. base.html), тёмной темы у входа нет. */
        :root {
          --accent:#E8192C; --accent-hover:#C8101F; --accent-tint:#FDE7E9;
          --tx-primary:#262343; --tx-secondary:#5C5A72; --tx-tertiary:#9291A1;
          --bg-canvas:#F4F4F6; --bg-sidebar:#1A1A1A;
          --border-input:rgba(38,35,67,.16);
          /* приглушённый текст на тёмной брендовой панели (= сайдбар монитора, 5:1 — AA) и рамка error-бокса */
          --sb-tx-cap:#8A8A8A; --danger-border:#FFCDD2;
          /* Ф1.5 (23.10.2026): зеркало токенов base.html (значения 1:1, светлая тема) */
          --accent-on:#FFFFFF; --bg-surface:#FFFFFF;
          --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-24:24px;
          --sp-1:4px; --sp-1-5:6px; --sp-2:8px; --sp-2-5:10px; --sp-3:12px; --sp-3-5:14px; --sp-4:16px;
          --sp-4-5:18px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
          --sh-modal:0 16px 48px rgba(38,35,67,.22);
          /* Ф3.8 (23.10.2026): ещё токены base.html 1:1 — шрифт, вес, трекинг, скругления, движение, кольцо фокуса */
          --font-sans:'Inter', -apple-system, system-ui, sans-serif;
          --fw-semibold:600; --fw-bold:700; --lh-loose:1.6; --ls-caps:0.04em; --ls-wide:0.1em;
          --r-control:6px; --r-modal:14px; --dur-fast:.15s;
          --ring-focus:0 0 0 3px var(--accent-tint);
          --login-w:820px; --login-side-w:280px; /* раскладка карточки входа (ширина окна и тёмной панели), не отступ */
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: var(--font-sans);
            background: var(--bg-canvas);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--sp-4);
        }

        /* Карточка не шире экрана: на узком — сжимается, на ≤768px панель уходит наверх полосой */
        .login-wrap {
            display: flex;
            width: 100%;
            max-width: var(--login-w);
            min-height: 480px;
            border-radius: var(--r-modal);
            overflow: hidden;
            box-shadow: var(--sh-modal);
        }

        .login-left {
            background: var(--bg-sidebar);
            width: var(--login-side-w);
            flex: 0 0 var(--login-side-w);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: var(--sp-6);
            padding: var(--sp-8);
        }

        /* логотип — канонический светлый полный знак (design/logo, на тёмном — светлая версия; мин. высота 28px) */
        .login-left .logo-img { display: block; height: 28px; width: auto; }

        .login-left .logo-sub {
            font-size: var(--fs-12);
            color: var(--sb-tx-cap);
            margin-top: var(--sp-2);
            text-transform: uppercase;
            letter-spacing: var(--ls-wide);
        }

        .login-left .left-footer {
            font-size: var(--fs-12);
            color: var(--sb-tx-cap);
            line-height: var(--lh-loose);
        }

        .login-right {
            background: var(--bg-surface);
            flex: 1;
            min-width: 0;
            padding: var(--sp-12) var(--sp-10);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .login-right h1 {
            font-size: var(--fs-24);
            font-weight: var(--fw-bold);
            color: var(--tx-primary);
            margin-bottom: var(--sp-1-5);
        }

        .login-right .subtitle {
            font-size: var(--fs-13);
            color: var(--tx-tertiary);
            margin-bottom: var(--sp-8);
        }

        .form-group { margin-bottom: var(--sp-4-5); }

        .form-group label {
            display: block;
            font-size: var(--fs-12);
            font-weight: var(--fw-semibold);
            color: var(--tx-secondary);
            margin-bottom: var(--sp-1-5);
            text-transform: uppercase;
            letter-spacing: var(--ls-caps);
        }

        .form-group input {
            width: 100%;
            padding: var(--sp-3) var(--sp-3-5);
            border: 1.5px solid var(--border-input);
            border-radius: var(--r-control);
            font-size: var(--fs-14);
            font-family: inherit;
            color: var(--tx-primary);
            background: var(--bg-surface);
            transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
            outline: none;
        }

        .form-group input:focus { border-color: var(--accent); box-shadow: var(--ring-focus); }

        .btn-login {
            width: 100%;
            padding: var(--sp-3);
            background: var(--accent);
            color: var(--accent-on);
            border: none;
            border-radius: var(--r-control);
            font-size: var(--fs-14);
            font-weight: var(--fw-semibold);
            cursor: pointer;
            font-family: inherit;
            margin-top: var(--sp-2);
            transition: background var(--dur-fast);
        }

        .btn-login:hover { background: var(--accent-hover); }
        /* фокус с клавиатуры — единое кольцо монитора */
        .btn-login:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

        .error-msg {
            background: var(--accent-tint);
            color: var(--accent);
            border: 1px solid var(--danger-border);
            border-radius: var(--r-control);
            padding: var(--sp-2-5) var(--sp-3-5);
            font-size: var(--fs-13);
            margin-bottom: var(--sp-5);
        }

        /* Телефон и узкий планшет: тёмная панель — полосой сверху (логотип + подпись), форма — на всю ширину */
        @media (max-width: 768px) {
            body { align-items: flex-start; }
            .login-wrap { flex-direction: column; min-height: 0; }
            .login-left {
                width: auto; flex: none;
                flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--sp-3);
                padding: var(--sp-4) var(--sp-6);
            }
            .login-left .logo-sub { margin-top: 0; }
            .login-left > div:first-child { display: flex; align-items: center; gap: var(--sp-3); }
            .login-left .left-footer { display: none; }
            .login-right { padding: var(--sp-8) var(--sp-6); }
        }
        @media (max-width: 560px) {
            body { padding: 0; }
            .login-wrap { border-radius: 0; box-shadow: none; min-height: 100vh; }
            .login-right { justify-content: flex-start; padding: var(--sp-6) var(--sp-4); }
        }