/* Страница входа CRM — канон «Экран входа» дизайн-системы MILKY (03.10.2026).
   Тема события — атрибутом data-theme на <body>, выбирает её login_theme.php. */
:root{
  --green:#274138;--green-2:#375B4F;--cream:#F6F5F2;--beige:#EBDBD1;--sand:#E9D2BD;
  --grey:#8C9497;--grey-caps:#677275;--ink:#222;
  --fs-10:10px;--fs-12:12px;--fs-14:14px;--fs-16:16px;--fs-24:24px;--fs-28:28px;
  --ease:cubic-bezier(.22,1,.36,1);
  --bg:var(--green);
  --apple:#8E2A22; /* «Сумерки»: яблоко с обложки */
}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{background:var(--bg);background-attachment:fixed;color:var(--cream);overflow-x:hidden;
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif}
button,input{font-family:inherit}

/* ── форма ─────────────────────────────────────────────── */
/* Слой формы на весь экран, но клики пропускает к лесу: иначе фигуры пасхалки не нажать */
.login{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:24px 24px 20px;pointer-events:none}
.col{width:min(340px,100%);margin:auto 0;display:flex;flex-direction:column;pointer-events:auto}
.mark{font-size:var(--fs-28);font-weight:500;letter-spacing:.16em;color:var(--cream);text-align:center;text-transform:uppercase;white-space:nowrap}
.mark .par{color:var(--sand)}
.sub{margin-top:10px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:var(--fs-12);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sand);text-align:center}
form{margin-top:32px;display:flex;flex-direction:column;gap:12px}
input{height:44px;width:100%;border:0;border-radius:12px;background:var(--cream);color:var(--ink);font-size:var(--fs-16);padding:0 14px;outline:none}
input::placeholder{color:var(--grey)}
input:focus-visible{outline:2px solid var(--sand);outline-offset:2px}
/* автозаполнение Chrome красит поле в свой цвет — возвращаем крем */
input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--cream) inset;-webkit-text-fill-color:var(--ink)}
.msg{font-size:var(--fs-14);line-height:1.45;color:var(--sand);text-align:center;text-wrap:balance}
.msg b{font-weight:600}
.msg.caps{display:none}
.msg.caps.is-on{display:block}
.btn{position:relative;overflow:hidden;height:44px;border:0;border-radius:7px;background:var(--sand);color:var(--green);
  font-size:var(--fs-14);font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--beige)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--cream);outline-offset:2px}

.motto{margin-top:32px;max-width:640px;text-align:center;font-size:var(--fs-12);line-height:1.5;color:rgba(246,245,242,.55)}
.chrome{display:none;margin-top:6px;color:var(--sand)}
.chrome.is-on{display:block}

/* ── тема «Сумерки» ────────────────────────────────────── */
[data-theme=twilight]{--bg:linear-gradient(180deg,#121F1B 0%,#1A2C26 34%,#22392F 62%,#2B463D 100%)}
.scene{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.moon{position:absolute;top:10%;right:14%;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#FCFBF8 0%,#EDE8DE 62%,#DCD5C8 100%);
  box-shadow:0 0 60px 12px rgba(246,245,242,.16),0 0 180px 60px rgba(233,210,189,.08)}
.fog{position:absolute;left:-20%;width:140%;border-radius:50%;filter:blur(28px);
  background:radial-gradient(ellipse at center,rgba(246,245,242,.11) 0%,rgba(246,245,242,0) 70%)}
.fog.f1{bottom:120px;height:220px;animation:drift 70s ease-in-out infinite alternate}
.fog.f2{bottom:40px;height:180px;opacity:.8;animation:drift 95s ease-in-out infinite alternate-reverse}
.fog.f3{top:28%;height:260px;opacity:.45;animation:drift 120s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.forest{position:absolute;left:0;bottom:0;width:100%}
.forest.back{fill:#1B2F28;opacity:.9}
.forest.front{fill:#0E1A16}

/* яблоко с обложки — единственный цвет темы вне палитры; текст подписи — по центру знака */
.sub .apple{width:12px;height:14px;flex:none}
[data-theme=twilight] .sub{padding-right:20px}

/* на ховере кнопка блестит, как Эдвард на солнце */
[data-theme=twilight] .btn::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 47%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.75) 53%,transparent 70%)}
[data-theme=twilight] .btn:hover::after{animation:shine 1.1s ease-out}
@keyframes shine{to{transform:translateX(120%)}}

/* Пасхалка: оборотень и вампир на прогалинах между ближними елями. Цвет — между дальним
   и ближним лесом, контраст едва заметный; выдают их глаз волка и искра на щеке */
.cr{position:absolute;bottom:6px;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;
  color:#14241E;transition:color .6s var(--ease)}
.cr svg{display:block;width:100%;height:100%;fill:currentColor;overflow:visible}
.cr:hover,.cr.is-on{color:#203A31}
.cr.wolf{width:64px;height:78px}
.cr.vamp{width:40px;height:96px}
.cr .eye{fill:#E9D2BD;opacity:.3;animation:blink 7s infinite}
.cr .face{fill:#F6F5F2;opacity:.09;transition:opacity .6s}
.cr .glint{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;animation:glint 9s 2s infinite}
.cr:hover .eye,.cr.is-on .eye{animation:none;opacity:.95}
.cr:hover .face,.cr.is-on .face{opacity:.2}
@keyframes blink{0%,84%,100%{opacity:.3}88%,94%{opacity:.95}}
@keyframes glint{0%,88%,100%{opacity:0;transform:scale(.3) rotate(0)}93%{opacity:1;transform:scale(1) rotate(45deg)}}

/* реплика — подсказка по канону: белая карточка 14/1.45, ширина до 260, хвостик к фигуре.
   Тень темнее канонной: на ночном небе зелёная тень не видна */
.bubble{position:fixed;z-index:3;max-width:260px;background:#fff;color:var(--ink);border-radius:12px;padding:12px 14px;
  font-size:var(--fs-14);line-height:1.45;box-shadow:0 10px 28px rgba(0,0,0,.28);
  opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;pointer-events:none}
.bubble.is-open{opacity:1;transform:none}
.bubble .who{font-size:var(--fs-12);color:var(--grey-caps);margin-bottom:4px}
.bubble::after{content:"";position:absolute;top:100%;left:var(--tail,50%);margin-left:-7px;border:7px solid transparent;border-top-color:#fff}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── телефон ───────────────────────────────────────────── */
@media (max-width:899px){
  .login{padding:24px 20px calc(20px + env(safe-area-inset-bottom))}
  .mark{font-size:var(--fs-24)}
  .moon{width:56px;height:56px;top:7%;right:10%}
  .cr.wolf{width:52px;height:63px}
  .cr.vamp{width:32px;height:77px}
}