/* Страница входа 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}

/* ── тема «Хэллоуин» (20.10.2026) ──────────────────────── */
[data-theme=halloween]{--bg:linear-gradient(180deg,#0E1A16 0%,#182A23 38%,#22392F 70%,#2B463D 100%);
  --pumpkin:#E07A30} /* единственный цвет темы вне палитры, как яблоко у «Сумерек» */
[data-theme=halloween] .sub{padding-right:22px} /* тыква 14 + просвет 8: текст по центру знака */
.sub .pumpkin{width:14px;height:13px;flex:none;--pk-body:var(--pumpkin);--pk-rib:rgba(0,0,0,.14);--pk-hi:none;--pk-stem:#5E8A72;--pk-face:none}
.hw .star{position:absolute;border-radius:50%;background:var(--cream);opacity:.5;animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.2}to{opacity:.8}}
.hw .moon{top:10%;right:15%;width:120px;height:120px;
  background:radial-gradient(circle at 38% 34%,#F6EEE3 0%,#E9D2BD 55%,#D9BFA6 100%);
  box-shadow:0 0 70px 16px rgba(233,210,189,.16),0 0 220px 80px rgba(233,210,189,.07)}
.hw .bat{position:absolute;width:44px;height:22px;color:#0A1512;animation:drift 26s ease-in-out infinite alternate}
.hw .bat svg{display:block;width:100%;height:100%;fill:currentColor;animation:flap .55s ease-in-out infinite alternate;transform-origin:50% 40%}
.hw .bat.b1{top:9%;right:13%}
.hw .bat.b2{top:16%;right:19%;width:30px;height:15px;animation-duration:33s;animation-delay:-9s}
.hw .bat.b3{top:7%;right:24%;width:24px;height:12px;animation-duration:40s;animation-delay:-20s}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.5)}}
@keyframes drift{from{transform:translateX(-90px)}to{transform:translateX(90px)}}
.hw .hill{position:absolute;left:0;bottom:0;width:100%}
.hw .hill.back{height:230px;fill:#1B2F28}
.hw .hill.front{height:150px;fill:#0E1A16}
/* силуэты на гребне заднего холма */
.hw .pk{position:absolute;overflow:visible;--pk-body:#14241E;--pk-rib:rgba(0,0,0,.26);--pk-hi:none;--pk-stem:#0E1A16;--pk-face:none}
.hw .pk.s1{left:4%;bottom:118px;width:58px;height:54px}
.hw .pk.s2{left:19%;bottom:124px;width:40px;height:37px}
.hw .pk.s3{left:30%;bottom:120px;width:70px;height:64px}
.hw .pk.s4{left:66%;bottom:122px;width:48px;height:44px}
.hw .pk.s5{left:74%;bottom:118px;width:82px;height:75px}
/* светящиеся тыквы — кнопки; свечение псевдоэлементом, а не фильтром: дешевле */
.cr.jack{z-index:0;--pk-body:var(--pumpkin);--pk-rib:rgba(0,0,0,.13);--pk-hi:rgba(255,255,255,.07);--pk-stem:#1B2F28;--pk-face:#F6F5F2}
.cr.jack.j1{left:9%;bottom:28px;width:118px;height:108px}
.cr.jack.j2{left:21%;bottom:40px;width:74px;height:68px}
.cr.jack.j3{right:16%;bottom:34px;width:96px;height:88px}
.cr.jack::before{content:"";position:absolute;z-index:-1;left:-40%;right:-40%;top:-30%;bottom:-30%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,rgba(224,122,48,.45) 0%,rgba(233,210,189,.18) 45%,rgba(233,210,189,0) 70%);
  animation:candle 2.8s ease-in-out infinite alternate;transition:transform .3s var(--ease)}
.cr.jack:hover::before,.cr.jack.is-on::before{animation:none;opacity:1;transform:scale(1.15)}
@keyframes candle{from{opacity:.75}to{opacity:1}}
/* кот на гребне переднего холма; рисунок инлайном — анимация глаз в теневое дерево <use> не достаёт */
.cr.cat{right:7%;bottom:118px;width:62px;height:70px;color:#0A1512;--eye:#E9D2BD}
.cr.cat:hover,.cr.cat.is-on{color:#14241E}
.cr.cat .eyes{transform-box:fill-box;transform-origin:center;animation:blink 6s infinite}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}93%,97%{transform:scaleY(.1)}}
/* кнопка на ховере светится, как свеча в тыкве */
[data-theme=halloween] .btn:hover{animation:ring 1.4s ease-in-out infinite alternate}
@keyframes ring{from{box-shadow:0 0 0 3px rgba(233,210,189,.12)}to{box-shadow:0 0 0 6px rgba(233,210,189,.24)}}

@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}
}

/* ── телефон, «Хэллоуин» ───────────────────────────────── */
@media (max-width:899px){
  [data-theme=halloween] .login{padding-bottom:calc(140px + env(safe-area-inset-bottom))} /* девиз над тыквами */
  .hw .moon{width:68px;height:68px;top:6%;right:9%}
  .hw .hill.back{height:170px}
  .hw .hill.front{height:110px}
  .hw .m-hide{display:none}
  .hw .bat.b1{right:6%}
  .cr.cat{right:5%;bottom:86px;width:46px;height:52px}
}