/* ==========================================================================
   VetCRM — auth.css: СТРАНИЦЫ ВХОДА (вход и код второй ступени)
   --------------------------------------------------------------------------
   v1.19.995 (серия «вся система — к виду главной», релиз 7): оформление
   страниц входа переехало сюда из шаблонов auth/_shell, auth/_fonts_icons_login
   и two_factor/challenge (DESIGN_SYSTEM §1). Порядок на странице:
   radius.css (реестр радиусов системы) → auth.css.
   ========================================================================== */

/* ==========================================================================
   1. ШРИФТ «Vet OSHC» (копия app.css §1) и мини-набор значков входа
   ========================================================================== */
@font-face{font-family:'Vet OSHC';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/vetoshc/VetOSHC-Light.woff2') format('woff2')}
@font-face{font-family:'Vet OSHC';font-style:normal;font-weight:400 500;font-display:swap;src:url('../fonts/vetoshc/VetOSHC-Regular.woff2') format('woff2')}
@font-face{font-family:'Vet OSHC';font-style:normal;font-weight:600 700;font-display:swap;src:url('../fonts/vetoshc/VetOSHC-Bold.woff2') format('woff2')}
@font-face{font-family:'Vet OSHC';font-style:normal;font-weight:800 900;font-display:swap;src:url('../fonts/vetoshc/VetOSHC-ExtraBold.woff2') format('woff2')}
button,input,select,textarea,optgroup,option{font-family:inherit}
[hidden]{display:none!important}
/* бывший auth/_fonts_icons_login (v1.19.867): 13 глифов Font Awesome Solid в отдельном шрифте */
@font-face{font-family:'FA Login';font-style:normal;font-weight:900;font-display:block;src:url('../fonts/fontawesome/webfonts/fa-login-900.woff2') format('woff2')}
.fas{font-family:'FA Login';font-weight:900;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;width:1.25em;text-align:center}
.fa-arrow-right-to-bracket:before{content:"\f090"}.fa-circle-exclamation:before{content:"\f06a"}.fa-envelope:before{content:"\f0e0"}.fa-exclamation-triangle:before{content:"\f071"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-fingerprint:before{content:"\f577"}.fa-key:before{content:"\f084"}.fa-lock:before{content:"\f023"}.fa-mobile-alt:before{content:"\f3cd"}.fa-shield-alt:before{content:"\f3ed"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-unlock:before{content:"\f09c"}

/* ==========================================================================
   2. ЭКРАН ВХОДА (бывший <style> auth/_shell, v1.19.862–v1.19.867)
   ========================================================================== */
/* v1.19.862 (ТЗ «ПАНЕЛЬ И ВХОД», релиз 2) — ЭКРАН ВХОДА по утверждённому превью.
     Одна страница для компьютера, планшета, телефона и PWA; ту же композицию
     получает экран двухфакторного кода. Логика входа не менялась — только
     оформление. Классы lp-*, стили живут здесь (у публичных страниц свой слой,
     в общий слой системы ничего не тянется; углы числами — записанная граница
     реестра, см. DESIGN_SYSTEM).
     Композиция: слева (46 %) фиолетовая панель — фото под цветом, волны, сетка
     точек, «дышащий» логотип, название, слайдер фраз 01—02—03, три значка;
     справа карточка 420 px. Планшет 760–980: панель 40 %. Телефон <760:
     панель → фиолетовая шапка, фото и слайдер не грузятся. */
:root{--lp-amber:#fde68a;--lp-amber-d:#92400e;--lp-amber-l:#fef3c7;--lp-faint:#94a3b8;--lp-gray-bg:#f1f5f9;--lp-indigo:#545cd8;--lp-indigo-bg:#eef0fb;--lp-indigo-bg2:#f7f8fe;--lp-indigo-d:#3a3f9f;--lp-indigo-l:#6e74e0;--lp-ink:#1e293b;--lp-ink-2:#475569;--lp-ink-3:#334155;--lp-line:#e2e8f0;--lp-muted:#64748b;--lp-page:#f4f5fb;--lp-red:#dc2626;--lp-red-bg:#fef2f2;--lp-red-bg2:#fee2e2;--lp-red-d:#991b1b;--lp-red-line:#fecaca;--lp-red-line2:#fca5a5;--lp-white:#fff;}/* v1.19.995 — все цвета входа объявлены один раз здесь; палитра системы (DESIGN_SYSTEM §5) */
*{margin:0;padding:0;box-sizing:border-box;}
html{height:100%;}
body{font-family:'Vet OSHC',sans-serif;min-height:100vh;min-height:100dvh;background:var(--lp-page);color:var(--lp-ink);display:flex;flex-direction:column;}
.lp-shell{flex:1 1 auto;display:flex;min-height:100vh;min-height:100dvh;direction:ltr;}/* панель слева и в RTL */
.lp-brand,.lp-side{direction:rtl;}

/* ── левая панель ── */
.lp-brand{position:relative;flex:0 0 46%;overflow:hidden;background:linear-gradient(160deg,var(--lp-indigo) 0%,var(--lp-indigo-d) 100%);color:var(--lp-white);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:48px 40px;isolation:isolate;}
.lp-photo{position:absolute;inset:0;z-index:0;}
.lp-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.9);}
.lp-photo img.is-on{opacity:.78;}
/* v1.19.867 (ТЗ 30/08 п. 7) — первое фото стоит в разметке сервером с конечной
     прозрачностью .78 (класс is-on) — оно в самой первой отрисовке, без
     проявления; плавное проявление 1,2 с включается классом lp-anim только
     после старта слайдера (смена кадров), не при загрузке страницы. */
.lp-photo.lp-anim img{transition:opacity 1.2s ease;}
.lp-tint{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(84,92,216,.55) 0%,rgba(58,63,159,.82) 42%,rgba(58,63,159,.82) 72%,rgba(58,63,159,.75) 100%);}/* в зоне логотипа и текста плотнее (.82): белый текст ≥4,5:1 даже над белым участком фото */
.lp-wave{position:absolute;z-index:2;border-radius:var(--r-circle);background:rgba(255,255,255,.07);pointer-events:none;}
.lp-wave-1{width:140%;left:-20%;bottom:-38%;aspect-ratio:1;}
.lp-wave-2{width:110%;left:30%;bottom:-48%;aspect-ratio:1;background:rgba(255,255,255,.05);}
.lp-dots{position:absolute;z-index:2;top:28px;left:28px;width:150px;height:150px;background-image:radial-gradient(rgba(255,255,255,.35) 1.6px,transparent 1.7px);background-size:16px 16px;opacity:.7;pointer-events:none;}
.lp-brand-in{position:relative;z-index:3;max-width:420px;width:100%;}
.lp-mark{width:150px;height:150px;margin:0 auto 18px;display:block;filter:drop-shadow(0 14px 30px rgba(15,18,64,.35));animation:lpBreathe 6s ease-in-out infinite;}
@keyframes lpBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.03)}}
.lp-clinic{font-size:30px;font-weight:800;letter-spacing:-.3px;line-height:1.15;text-shadow:0 2px 12px rgba(15,18,64,.35);}
.lp-slides{position:relative;min-height:74px;margin:18px 0 8px;}
.lp-slide{position:absolute;inset:0;font-size:17px;line-height:1.55;font-weight:400;color:rgba(255,255,255,.95);opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease;text-shadow:0 1px 8px rgba(15,18,64,.35);}
.lp-slide.is-on{opacity:1;transform:none;}
.lp-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 30px;direction:ltr;}
.lp-nav-n{background:none;border:0;color:rgba(255,255,255,.55);font:inherit;font-size:13px;font-weight:700;letter-spacing:.5px;cursor:pointer;padding:6px 4px;transition:color .3s,transform .3s;border-radius:var(--r-btn-sm);}
.lp-nav-n[aria-selected="true"]{color:var(--lp-white);transform:scale(1.12);}
.lp-nav-n:focus-visible{outline:2px solid var(--lp-white);outline-offset:2px;}
.lp-nav-bar{width:44px;height:2px;background:rgba(255,255,255,.28);border-radius:var(--r-badge);overflow:hidden;position:relative;}
.lp-nav-bar i{position:absolute;inset:0;width:0;background:var(--lp-white);}
.lp-nav-bar.is-run i{animation:lpFill 4.5s linear forwards;}
.lp-nav-bar.is-done i{width:100%;}/* v1.19.995 — пройденная фраза: полоса заполнена (было style.width в скрипте) */
@keyframes lpFill{from{width:0}to{width:100%}}
.lp-feats{display:flex;justify-content:center;gap:26px;}
.lp-feat{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.92);}
.lp-feat-ico{width:46px;height:46px;border-radius:var(--r-icon-tile);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.lp-feat-ico svg{width:22px;height:22px;stroke:var(--lp-white);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.lp-ver{position:absolute;z-index:3;bottom:14px;left:18px;font-size:11px;color:rgba(255,255,255,.6);direction:ltr;}

/* ── правая половина и карточка ── */
.lp-side{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:32px 24px;min-width:0;}
.lp-card{width:420px;max-width:100%;background:var(--lp-white);border-radius:var(--r-block);padding:34px 34px 28px;box-shadow:0 24px 64px rgba(30,35,110,.14),0 6px 16px rgba(30,35,110,.06);}
.lp-h{font-size:24px;font-weight:800;color:var(--lp-ink);line-height:1.15;}
.lp-sub{font-size:13.5px;color:var(--lp-muted);margin:6px 0 22px;line-height:1.5;}
.lp-alert{background:var(--lp-red-bg);color:var(--lp-red-d);border:1px solid var(--lp-red-line);border-radius:var(--r-block);padding:10px 12px;margin-bottom:16px;font-size:13px;display:flex;gap:8px;align-items:flex-start;}
.lp-alert i{margin-top:2px;}
.lp-group{margin-bottom:14px;}
.lp-label{display:block;font-size:12.5px;font-weight:700;color:var(--lp-ink-2);margin-bottom:6px;}
.lp-inwrap{position:relative;display:block;}
.lp-input{width:100%;height:46px;padding:0 42px 0 12px;font-family:inherit;font-size:14px;color:var(--lp-ink);background:var(--lp-white);border:1px solid var(--lp-line);border-radius:var(--r-field);outline:none;direction:ltr;text-align:left;transition:border-color .15s,box-shadow .15s;}
.lp-input:focus{border-color:var(--lp-indigo);box-shadow:0 0 0 4px rgba(84,92,216,.14);}
.lp-input.is-invalid{border-color:var(--lp-red-line2);}
.lp-ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--lp-faint);font-size:14px;pointer-events:none;}
.lp-input.has-eye{padding-left:44px;}
.lp-eye{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:var(--lp-faint);cursor:pointer;border-radius:var(--r-icon-btn);font-size:14px;display:flex;align-items:center;justify-content:center;}
.lp-eye:focus-visible{color:var(--lp-indigo);background:var(--lp-indigo-bg);outline:none;}
@media (hover: hover){.lp-eye:hover{color:var(--lp-indigo);background:var(--lp-indigo-bg);outline:none;}}
.lp-feedback{margin-top:5px;font-size:12px;color:var(--lp-red);}
.lp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 18px;font-size:13px;color:var(--lp-ink-2);}
.lp-remember{display:flex;align-items:center;gap:7px;user-select:none;cursor:pointer;}
.lp-remember input{width:16px;height:16px;accent-color:var(--lp-indigo);}
.lp-forgot{color:var(--lp-indigo);font-weight:600;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:0;}
@media (hover: hover){.lp-forgot:hover{text-decoration:underline;}}
.lp-note{display:none;background:var(--lp-indigo-bg);color:var(--lp-indigo-d);border-radius:var(--r-block);padding:10px 12px;font-size:12.5px;margin:-8px 0 16px;line-height:1.5;}
.lp-note.is-on{display:block;}
.lp-submit{width:100%;height:50px;background:linear-gradient(135deg,var(--lp-indigo),var(--lp-indigo-d));color:var(--lp-white);border:0;border-radius:var(--r-btn);font-family:inherit;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 20px rgba(58,63,159,.30);cursor:pointer;transition:transform .12s,box-shadow .15s,filter .15s;}
@media (hover: hover){.lp-submit:hover{box-shadow:0 10px 24px rgba(58,63,159,.40);transform:translateY(-1px);}}
.lp-submit:disabled{cursor:default;filter:saturate(.8);transform:none;}
.lp-submit:focus-visible{outline:3px solid rgba(84,92,216,.45);outline-offset:2px;}
.lp-spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:var(--lp-white);border-radius:var(--r-circle);display:none;animation:lpSpin .8s linear infinite;}
@keyframes lpSpin{to{transform:rotate(360deg)}}
.lp-submit.is-loading .lp-spin{display:inline-block;}
.lp-submit.is-loading .lp-submit-ico{display:none;}
.lp-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--lp-faint);font-size:12.5px;}
.lp-or::before,.lp-or::after{content:'';flex:1;height:1px;background:var(--lp-line);}
.lp-bio{width:100%;height:46px;background:var(--lp-white);color:var(--lp-ink);border:1px solid var(--lp-line);border-radius:var(--r-btn);font-family:inherit;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:border-color .15s,background .15s;}
@media (hover: hover){.lp-bio:hover{border-color:var(--lp-indigo);background:var(--lp-indigo-bg2);}}
.lp-bio i{color:var(--lp-indigo);}
.lp-bio-error{display:none;margin-top:8px;padding:8px 12px;background:var(--lp-red-bg2);color:var(--lp-red-d);border-radius:var(--r-block);font-size:12.5px;text-align:center;}
.lp-bio-error.is-on{display:block;}
.lp-foot{margin-top:20px;text-align:center;font-size:11.5px;color:var(--lp-faint);line-height:1.5;}
.lp-ver-m{display:none;}

/* ── планшет 760–980 ── */
@media (max-width:980px){
  .lp-brand{flex-basis:40%;padding:40px 26px;}
  .lp-mark{width:120px;height:120px;}
  .lp-clinic{font-size:26px;}
  .lp-feats{gap:16px;}
  .lp-feat-ico{width:40px;height:40px;border-radius:var(--r-icon-tile);}
  .lp-feat{font-size:11.5px;}
  .lp-card{padding:28px 26px 24px;}
}
/* ── телефон и PWA (<760): панель → шапка ── */
@media (max-width:759px){
  .lp-shell{flex-direction:column;}
  .lp-brand{flex:0 0 auto;flex-direction:row;justify-content:flex-start;text-align:start;padding:calc(16px + env(safe-area-inset-top)) 18px 16px;min-height:0;}
  .lp-brand-in{display:flex;align-items:center;gap:14px;max-width:none;}
  .lp-mark{width:52px;height:52px;margin:0;animation:none;order:2;margin-inline-start:auto;}
  .lp-clinic{font-size:19px;}
  .lp-tag{display:block;font-size:12px;font-weight:400;color:rgba(255,255,255,.8);margin-top:2px;}
  .lp-photo,.lp-slides,.lp-nav,.lp-feats,.lp-dots,.lp-wave-2,.lp-ver{display:none;}
  .lp-wave-1{width:70%;left:auto;right:-20%;bottom:-120%;}
  .lp-side{padding:18px 14px 18px;align-items:flex-start;}
  .lp-card{width:100%;padding:24px 20px 20px;border-radius:var(--r-block);}
  .lp-ver-m{display:block;text-align:center;font-size:11px;color:var(--lp-faint);margin-top:12px;direction:ltr;}
}
@media (min-width:760px){ .lp-tag{display:none;} }
/* v1.19.865 — «занавес» на стороне входа (после успешной предпроверки пароля):
     кнопка «נכנסים… ✓» → карточка уходит вниз и тает (0,55 с) → панель
     раздвигается на весь экран (0,8 с с 0,35 с), надписи, значки и фото гаснут,
     логотип пульсирует один раз и тает → отправка формы (≈1,45 с) → панель
     системы продолжает занавесом. На телефоне шапка растёт сверху вниз. */
body.lp-go .lp-side{animation:lpCardOut .55s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes lpCardOut{to{opacity:0;transform:translateY(18px) scale(.96);}}
body.lp-go .lp-brand{animation:lpCurtain .8s cubic-bezier(.65,0,.35,1) .35s forwards;z-index:20;}
@keyframes lpCurtain{to{flex-basis:100%;}}
body.lp-go .lp-brand-in>*:not(.lp-mark),body.lp-go .lp-ver,body.lp-go .lp-dots,body.lp-go .lp-photo,body.lp-go .lp-wave{animation:lpFadeOut .35s ease forwards;}
@keyframes lpFadeOut{to{opacity:0;}}
body.lp-go .lp-mark{animation:lpPulseOut .9s ease-in-out .4s forwards;}
@keyframes lpPulseOut{0%{transform:scale(1);opacity:1;}50%{transform:scale(1.18);opacity:1;}100%{transform:scale(1);opacity:0;}}
@media (max-width:759px){
  body.lp-go .lp-brand{animation:lpCurtainTop .8s cubic-bezier(.65,0,.35,1) .35s forwards;}
  @keyframes lpCurtainTop{to{min-height:100vh;min-height:100dvh;}}
  body.lp-go .lp-brand-in>div:not(.lp-mark){animation:lpShrink .35s ease forwards;overflow:hidden;}
  @keyframes lpShrink{to{opacity:0;max-width:0;flex:0 0 0;}}
  body.lp-go .lp-brand{justify-content:center;}
  body.lp-go .lp-brand-in{flex:1 1 auto;justify-content:center;}
  body.lp-go .lp-mark{margin:0;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;}
}
    

/* ==========================================================================
   3. КОД ВТОРОЙ СТУПЕНИ (бывшая секция lp-styles two_factor/challenge)
   ========================================================================== */
.ch-icon{width:64px;height:64px;border-radius:var(--r-circle);background:linear-gradient(135deg,var(--lp-amber-l),var(--lp-amber));display:flex;align-items:center;justify-content:center;margin:0 0 14px;font-size:28px;color:var(--lp-amber-d);box-shadow:0 4px 16px rgba(245,158,11,.25);}
.ch-mode-toggle{display:flex;gap:0;background:var(--lp-gray-bg);border-radius:var(--r-btn);padding:3px;margin-bottom:16px;}
.ch-mode-btn{flex:1;padding:9px 12px;border:none;background:transparent;color:var(--lp-muted);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;border-radius:var(--r-btn-sm);transition:background-color .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
@media (hover: hover){.ch-mode-btn:hover{color:var(--lp-ink-3);}}
.ch-mode-btn.active{background:var(--lp-white);color:var(--lp-indigo-d);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.ch-input{width:100%;height:58px;border:2px solid var(--lp-line);border-radius:var(--r-field);padding:0 16px;font-family:monospace;font-size:1.5rem;font-weight:700;text-align:center;letter-spacing:8px;direction:ltr;outline:none;transition:border .15s,box-shadow .15s;}
.ch-input:focus{border-color:var(--lp-indigo);box-shadow:0 0 0 4px rgba(84,92,216,.15);}
.ch-input.recovery-mode{letter-spacing:2px;font-size:1.1rem;}
.ch-help{margin-top:16px;text-align:center;font-size:12.5px;color:var(--lp-faint);line-height:1.6;}
.ch-help strong{color:var(--lp-ink-2);}
.ch-logout{display:block;margin:14px auto 0;background:none;border:0;color:var(--lp-muted);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;}

/* ==========================================================================
   4. ПОД ПАЛЕЦ (v1.19.995, DESIGN_SYSTEM §7): на устройствах с касанием зона нажатия не меньше 40 px.
   На компьютере с мышью ничего не меняется.
   ========================================================================== */
@media (pointer: coarse) {
  .lp-eye{width:40px;height:40px;left:4px;}
  .lp-forgot{min-height:40px;display:inline-flex;align-items:center;}
  .lp-remember{min-height:40px;}
  .ch-logout{min-height:40px;display:flex;align-items:center;gap:6px;width:max-content;margin:6px auto 0;}
  .ch-mode-btn{min-height:40px;}
  .lp-nav-n{min-width:40px;min-height:40px;}
}