/* login.css — экран входа (двух-панельный, дизайн-ревизия ТЗ).
   Общий для on-prem и SaaS; различия по режиму — в самих шаблонах
   (login.html — логин+пароль+PIN; saas_login.html — организация+демо+регистрация).
   P2.1: инлайн-<style> убран из шаблонов входа в этот файл. На токенах →
   светлая/тёмная тема работают автоматически. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body.login-page {
    margin: 0;
    font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/* ── Брендовая панель ───────────────────────────────────────────────────── */
.brand-panel {
    position: relative; overflow: hidden; color: #fff;
    background: var(--sidebar-bg);
    display: flex; flex-direction: column; justify-content: space-between; padding: 48px;
}
.brand-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 80% at 50% -10%,
        color-mix(in srgb, var(--accent) 26%, transparent), transparent 55%);
}
.bp-top { position: relative; display: flex; align-items: center; gap: 11px; }
.bp-logo {
    width: 38px; height: 38px; flex-shrink: 0;
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}

/* ── Анимированный лого «Контроль-Q» (рисуется штрихом при загрузке) ────── */
.qmark { display: block; overflow: visible; }
.qmark .ring   { --len: 95; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 95; stroke-dashoffset: 0; }
.qmark .handle { --len: 17; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 17; stroke-dashoffset: 0; }
.qmark .tick   { --len: 26; fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 0; }
/* Покой — отрисовано (offset:0). Вход рисует штрих (both: до задержки скрыт). */
.qmark .ring   { animation: qmark-draw .62s cubic-bezier(.2,.6,.2,1) .14s both; }
.qmark .handle { animation: qmark-draw .34s cubic-bezier(.2,.6,.2,1) .70s both; }
.qmark .tick   { animation: qmark-draw .47s cubic-bezier(.2,.6,.2,1) .94s both; }
@keyframes qmark-draw { from { stroke-dashoffset: var(--len, 95); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .qmark .ring, .qmark .handle, .qmark .tick { animation: none; stroke-dashoffset: 0; }
}
.bp-top .wm { font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; color: #fff; text-decoration: none; }
/* Лого + надпись центрируем относительно центра тёмной панели (дизайн-макет). */
.bp-center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.bp-headline { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 0; max-width: 16ch; }
.bp-sub { font-size: 1.0625rem; color: rgba(255,255,255,.62); margin: 0; max-width: 40ch; line-height: 1.55; }

/* Оживление левой панели: блоки всплывают по очереди (CSS-стаггер, как форма) */
.bp-headline { animation: fadeInUp 520ms cubic-bezier(.22,1,.36,1) .16s both; }
.bp-sub      { animation: fadeInUp 540ms cubic-bezier(.22,1,.36,1) .28s both; }
.bp-proof    { animation: fadeInUp 560ms cubic-bezier(.22,1,.36,1) .40s both; }
.bp-trust    { animation: fadeInUp 560ms cubic-bezier(.22,1,.36,1) .52s both; }
@media (prefers-reduced-motion: reduce) { .bp-headline, .bp-sub, .bp-proof, .bp-trust { animation: none; } }
.bp-foot { position: relative; display: flex; gap: 22px; font-size: .8125rem; color: rgba(255,255,255,.5); }
.bp-foot b { color: rgba(255,255,255,.82); font-weight: 600; display: block; font-size: .9375rem; margin-bottom: 2px; }

/* ── Панель формы ───────────────────────────────────────────────────────── */
.form-panel { position: relative; display: flex; align-items: center; justify-content: center; padding: 48px; }
.form-card { width: 100%; max-width: 372px; animation: fadeInUp 380ms cubic-bezier(0.22, 1, 0.36, 1) both; }

.fc-pill {
    display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-2xs); font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-soft);
    padding: 4px 10px; border-radius: var(--r-full); margin: 0 auto 20px; width: max-content;
}
/* Заголовок формы центрируем по правой панели (дизайн-макет); поля — без изменений. */
.fc-h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; margin: 0 0 7px; color: var(--ink); text-align: center; }
.fc-lede { font-size: var(--text-md); color: var(--ink-2); margin: 0 0 28px; text-align: center; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); margin-bottom: 7px; }
.inp-wrap { position: relative; display: flex; align-items: center; }
.inp-wrap > i.lead { position: absolute; left: 13px; color: var(--ink-3); font-size: 1rem; pointer-events: none; }
.inp {
    width: 100%; font-family: inherit; font-size: var(--text-md); color: var(--ink); background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 11px 13px 11px 40px; outline: none;
    transition: border-color var(--m-fast), box-shadow var(--m-fast);
}
.inp::placeholder { color: var(--ink-3); }
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inp-wrap .toggle {
    position: absolute; right: 11px; color: var(--ink-3); cursor: pointer; padding: 4px;
    background: none; border: none; display: flex; align-items: center;
}
.inp-wrap .toggle:hover { color: var(--ink); }

.row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; }
.lnk { font-size: var(--text-sm); color: var(--accent); font-weight: 500; text-decoration: none; }
.lnk:hover { color: var(--accent-strong); }

.btn-submit {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: inherit; font-size: var(--text-md); font-weight: 600; color: var(--on-accent); background: var(--accent);
    border: none; border-radius: var(--r-sm); padding: 12px; cursor: pointer; min-height: 46px;
    transition: background var(--m-fast), box-shadow var(--m-fast), transform var(--m-fast);
}
.btn-submit:hover { background: var(--accent-hover, var(--accent-strong)); box-shadow: 0 2px 12px var(--accent-glow, transparent); }
.btn-submit:active { transform: translateY(1px); }
.btn-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fc-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--ink-3); font-size: var(--text-sm); }
.fc-divider::before, .fc-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

.fc-foot { margin-top: 24px; font-size: var(--text-sm); color: var(--ink-3); text-align: center; }
.fc-foot + .fc-foot { margin-top: 8px; }

/* Бейдж организации (SaaS, когда тенант уже известен) */
.org-badge {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 11px 14px; margin-bottom: 18px;
}
.org-badge-label { font-size: var(--text-2xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.org-badge-name { font-weight: 600; color: var(--ink); font-size: var(--text-md); }
.org-badge-name i { color: var(--accent-strong); margin-right: .3rem; }
.org-change { color: var(--ink-3); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.org-change:hover { color: var(--accent-strong); }

/* Флеш-сообщения */
.login-alert {
    display: flex; align-items: center; gap: 8px;
    background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
    color: var(--bad); border-radius: var(--r-sm);
    font-size: var(--text-sm); padding: 10px 13px; margin-bottom: 18px;
}

/* Ссылка «на главную» (SaaS) */
.back-link {
    position: fixed; top: 16px; left: 20px; z-index: 10;
    color: var(--ink-3); font-size: var(--text-sm); text-decoration: none;
    display: flex; align-items: center; gap: .35rem; transition: color var(--m-fast);
}
.back-link:hover { color: var(--ink); }

@media (max-width: 880px) {
    .login { grid-template-columns: 1fr; }
    .brand-panel { display: none; }
    .form-panel { padding: 32px 22px; }
}

/* Большой центральный лого-qmark на бренд-панели (дизайн-макет) */
.bp-logo-xl { display: block; color: #fff; opacity: .98; line-height: 0; margin: 0 auto 6px; }
.bp-logo-xl .qmark { width: 132px; height: 132px; }
@media (max-height: 620px) { .bp-logo-xl { display: none; } }

/* Чекбокс «Запомнить меня» */
.row-between .chk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--ink-2); cursor: pointer; user-select: none; }
.row-between .chk input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }

/* ════════ Дизайн-макет логина: живая панель, trust, org-row, alt-вход ════════ */

/* Раскладка Split — мягкий градиент-шов вместо жёсткой границы 50/50 (только
   login.html; saas_login использует базовый .login без .lay-split). */
.login.lay-split { grid-template-columns: 1fr 1fr;
    background: linear-gradient(96deg, var(--sidebar-bg) 0%, var(--sidebar-bg) 46%, var(--bg) 54%, var(--bg) 100%); }
.login.lay-split .brand-panel { background: transparent; }
.login.lay-split .bp-center { max-width: 30rem; margin: 0 auto; }
.login.lay-split .form-panel { padding-left: 64px; }
.bp-foot { justify-content: flex-start; }
.login.lay-split .bp-foot { justify-content: center; }

.bp-center { gap: 22px; max-width: 37rem; margin: 0 auto; align-self: center; }

/* «Живой прогон» — стеклянная карточка-демонстрация */
.bp-proof { width: 334px; margin: 4px auto 2px; text-align: left;
    background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); border-radius: 15px;
    padding: 14px 16px 15px; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
    box-shadow: 0 22px 48px -20px rgba(0,0,0,.55); color: #fff; }
.bp-proof .pr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.bp-proof .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.bp-proof .pr-state { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.92); }
.bp-proof .pr-dev { margin-left: auto; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.08); border-radius: 6px; padding: 2px 8px; }
.bp-proof .pr-title { font-size: .9rem; font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: 9px; }
.bp-proof .pr-spark { position: relative; overflow: hidden; height: 54px; margin: 0 -2px 9px; }
.bp-proof .pr-spark svg { width: 100%; height: 100%; display: block; }
.bp-proof .pr-spark .fl { fill: rgba(255,255,255,.10); }
.bp-proof .pr-spark .ln { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.bp-proof .pr-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 48px; pointer-events: none; transform: translateX(-48px);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 48%, transparent), transparent); }
.bp-proof .pr-prog { height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin: 0 0 11px; }
.bp-proof .pr-prog i { display: block; height: 100%; width: 42%; border-radius: 99px; background: var(--accent); }
.bp-proof .pr-meta { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: rgba(255,255,255,.6); white-space: nowrap; }
.bp-proof .pr-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4); }
.bp-proof .pr-meta b { color: rgba(255,255,255,.85); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes scan { 0% { transform: translateX(-48px); } 100% { transform: translateX(304px); } }
@keyframes prog { 0% { width: 6%; } 100% { width: 100%; } }
@keyframes livep { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: no-preference) {
    .bp-proof .pr-scan { animation: scan 3.2s linear infinite; }
    .bp-proof .pr-prog i { animation: prog 4.6s ease-in-out infinite; }
    .bp-proof .live-dot { animation: livep 2.6s ease-in-out infinite; }
}

/* Trust-бейджи (ALCOA+ / GMP / Part 11) */
.bp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2px; }
.bp-trust .tc { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600;
    color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-full); padding: 5px 11px; }
.bp-trust .tc i { color: var(--accent); font-size: .85rem; }

/* Строка «Сервер организации» в форме (инфо, без действия) */
.org-row { display: flex; align-items: center; gap: 11px; background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 10px 13px; margin-bottom: 18px; }
.org-row .oi { font-size: 1.15rem; color: var(--accent-strong); }
.org-row .ob { flex: 1; min-width: 0; }
.org-row .ok { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.org-row .ov { font-size: var(--text-base); font-weight: 600; color: var(--ink); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-row .os { font-size: var(--text-2xs); color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Альтернативный вход (PIN) — кнопкой под разделителем «или» */
.btn-alt { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: inherit; font-size: var(--text-base); font-weight: 500; color: var(--ink); background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 11px; cursor: pointer;
    transition: background var(--m-fast), border-color var(--m-fast); }
.btn-alt:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn-submit .lbl:not([hidden]) { display: inline-flex; align-items: center; gap: 9px; }
/* flask-лоадер в кнопке: на время сабмита прячем текст, показываем колбу
   в цвете текста кнопки (на акцентном фоне) */
.btn-submit.is-loading { cursor: progress; opacity: .96; }
.btn-submit .flask-load:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; }
.btn-submit .flask-load .flask-svg .glass,
.btn-submit .flask-load .flask-svg .glass-shine { stroke: var(--on-accent); }
.btn-submit .flask-load .flask-svg .liquid-fill,
.btn-submit .flask-load .flask-svg .liquid-surface,
.btn-submit .flask-load .flask-svg .pour,
.btn-submit .flask-load .flask-svg .drop { fill: var(--on-accent); }

.is-hidden { display: none !important; }

@media (max-width: 880px) {
    .bp-proof { width: 100%; max-width: 334px; }
    .login.lay-split { background: var(--bg); }
    .login.lay-split .form-panel { padding-left: 24px; }
}