/* Avelune — страницы входа/регистрации (раунд 17, премиальный редизайн — раунд 19).
   Бренд: графит #101216, кость #EFEDE6, киноварь #D2400D; шрифт Onest
   (вариативный, кириллица) — маунт /web-static/fonts из вендора hermes-webui.
   Дизайн-язык = лендинг (18.2): те же токены и моушен (expo.out-ease, тихий
   ambient-glow, стаггер-появление), сплит-макет «бренд-панель + форма» —
   мировой стандарт премиальных SaaS-форм. Радикальное вычитание: без
   градиентных заливок и внешних ресурсов (CSP-дружелюбно).
   Скрытые-по-умолчанию состояния живут ТОЛЬКО под html.anim (head-скрипт
   ставит его лишь при работающем JS и без reduced-motion) и только как
   CSS-анимации с fill:both — контент не может «застрять» невидимым. */

@font-face{font-family:'Onest';src:url('/web-static/fonts/onest-cyrillic.woff2') format('woff2');unicode-range:U+0400-04FF;font-weight:100 900;font-display:swap;}
@font-face{font-family:'Onest';src:url('/web-static/fonts/onest-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-weight:100 900;font-display:swap;}
@font-face{font-family:'Onest';src:url('/web-static/fonts/onest-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;font-weight:100 900;font-display:swap;}

:root{
  --graphite:#101216;
  --surface:#181B21;
  --surface2:#1E222A;
  --border:#2A2E36;
  --border-lift:#3A3F49;
  --border-focus:#3D434E;
  --bone:#EFEDE6;
  --muted:#9AA0AA;
  --cinnabar:#D2400D;
  --cinnabar-press:#B53709;
  --error:#E4573D;
  --ok:#4C9E64;
  /* Моушен-токены — зеркалят лендинг (панель 18.2). */
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.22,0.61,0.36,1);
  --dur-micro:190ms;
  --dur-reveal:560ms;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;}
body{
  background:var(--graphite);
  color:var(--bone);
  font-family:'Onest','Avenir Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* Премиальный клавиатурный фокус (мышиный гасим) — как на лендинге. */
:focus:not(:focus-visible){outline:none;}

/* ── Сплит-макет: бренд-панель слева, форма справа ── */
.shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;}

.side{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:44px 56px;
  min-height:100vh;
}
/* Один тихий ambient-glow киновари — СВЕТ (низкая альфа), не заливка. */
.side::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:14%;left:52%;width:min(560px,80%);height:min(560px,80%);
  transform:translate(-50%,0);
  background:radial-gradient(circle,rgba(210,64,13,.11),rgba(210,64,13,.05) 34%,transparent 68%);
  animation:sideGlow 19s var(--ease-soft) infinite alternate;
}
@keyframes sideGlow{
  from{transform:translate(-50%,0) scale(1);}
  to{transform:translate(calc(-50% + 22px),-18px) scale(1.07);}
}

.logo{font-size:21px;font-weight:800;letter-spacing:-.02em;text-decoration:none;color:inherit;user-select:none;width:max-content;}
.logo em{font-style:normal;color:var(--cinnabar);}
a.logo:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px;border-radius:4px;}

.side-body{max-width:430px;padding:36px 0;}
.side-h{font-size:33px;line-height:1.16;font-weight:800;letter-spacing:-.025em;margin-bottom:14px;}
.side-h em{font-style:normal;color:var(--cinnabar);}
.side-sub{font-size:15.5px;color:var(--muted);margin-bottom:30px;}

.side-feats{list-style:none;display:flex;flex-direction:column;gap:18px;}
.side-feat{display:flex;gap:14px;align-items:flex-start;}
.side-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:rgba(210,64,13,.12);color:var(--cinnabar);
  display:flex;align-items:center;justify-content:center;
}
.side-ico svg{width:18px;height:18px;}
.side-feat h3{font-size:14.5px;font-weight:700;margin-bottom:2px;}
.side-feat p{font-size:13px;color:var(--muted);}

/* «На связи» — живая строка статуса (echo чат-мокапа лендинга). */
.side-live{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-top:26px;}
.side-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ok);flex-shrink:0;animation:livePulse 2.4s var(--ease-soft) infinite;}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.35;}}

.side-trust{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);max-width:430px;}
.side-trust svg{width:15px;height:15px;color:var(--cinnabar);flex-shrink:0;}

/* ── Панель формы ── */
.pane{
  position:relative; /* якорь кнопки языка */
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  padding:44px 24px;
}

/* Переключатель языка (E1-i18n) — как на лендинге, в углу панели формы. */
.lang{
  position:absolute;top:18px;right:20px;
  padding:6px 12px;
  background:transparent;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  cursor:pointer;
  transition:color var(--dur-micro) var(--ease-soft),border-color var(--dur-micro) var(--ease-soft);
}
.lang:hover{color:var(--bone);border-color:var(--border-lift);}
.lang:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(210,64,13,.35);}
.pane-in{width:100%;max-width:392px;}
.logo--pane{display:none;margin-bottom:22px;}

.card h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;}
.card-sub{font-size:13.5px;color:var(--muted);margin-bottom:22px;}

.field{margin-bottom:15px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.inwrap{position:relative;}
.field input{
  width:100%;
  padding:12px 13px;
  background:var(--graphite);
  color:var(--bone);
  border:1px solid var(--border);
  border-radius:10px;
  font:inherit;
  font-size:14.5px;
  transition:border-color var(--dur-micro) var(--ease-soft),box-shadow var(--dur-micro) var(--ease-soft);
}
.inwrap input{padding-right:46px;}
.field input::placeholder{color:#5C626D;}
.field input:focus{outline:none;border-color:var(--border-focus);}
.field input:focus-visible{border-color:var(--cinnabar);box-shadow:0 0 0 3px rgba(210,64,13,.16);}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px;transition:color var(--dur-micro) var(--ease-soft);}
.field .hint.ok{color:var(--ok);}
.field .hint.ok::before{content:'✓ ';}

/* Кнопка-глазок: показать/скрыть пароль. */
.peek{
  position:absolute;top:0;right:0;bottom:0;width:44px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;color:var(--muted);
  border-radius:0 10px 10px 0;
  transition:color var(--dur-micro) var(--ease-soft);
}
.peek:hover{color:var(--bone);}
.peek:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(210,64,13,.55);}
.peek svg{width:17px;height:17px;}
.peek .slash{display:none;}
.peek[aria-pressed="true"] .slash{display:block;}

/* Подсказка про Caps Lock — каушен, не ошибка формы. */
.capshint{font-size:11.5px;color:var(--error);margin-top:5px;}

.btn{
  width:100%;
  padding:12px 14px;
  margin-top:8px;
  background:var(--cinnabar);
  color:#fff;
  border:1px solid var(--cinnabar);
  border-radius:10px;
  font:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background var(--dur-micro) var(--ease-soft),
             border-color var(--dur-micro) var(--ease-soft),
             transform var(--dur-micro) var(--ease-soft);
}
.btn:hover{background:var(--cinnabar-press);border-color:var(--cinnabar-press);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.55;cursor:default;transform:none;}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(210,64,13,.45);}

.status{
  display:none;
  margin-top:16px;
  font-size:13px;
  color:var(--muted);
  text-align:center;
}
.status.on{display:block;}
.status .spinner{
  display:inline-block;width:12px;height:12px;margin-right:7px;
  border:2px solid var(--border-focus);border-top-color:var(--cinnabar);
  border-radius:50%;vertical-align:-2px;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.error{
  display:none;
  margin-top:16px;
  padding:10px 12px;
  background:rgba(228,87,61,.07);
  border:1px solid var(--error);
  border-radius:10px;
  color:var(--error);
  font-size:13px;
  line-height:1.5;
}
.error.on{display:block;}

.alt{margin-top:22px;font-size:13.5px;color:var(--muted);text-align:center;}
.alt a{color:var(--bone);font-weight:600;text-decoration:none;border-bottom:1px solid var(--border-focus);
  transition:color var(--dur-micro) var(--ease-soft),border-color var(--dur-micro) var(--ease-soft);}
.alt a:hover{color:var(--cinnabar);border-color:var(--cinnabar);}
.alt a:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px;}

.foot{margin-top:26px;font-size:12px;color:var(--muted);text-align:center;}

/* ── Появление при загрузке (только в .anim-режиме) ──
   CSS-анимация с fill:both: до конца задержки элемент в from-состоянии,
   дальше доигрывает сам — без JS-триггеров, «застрять» скрытым не может
   (нет .anim или нет поддержки animation → правило неактивно, всё видно). */
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.anim .rise{animation:rise var(--dur-reveal) var(--ease-expo) both;animation-delay:calc(var(--i,0) * 60ms);}
/* Ошибка привлекает взгляд коротким shake — только при анимациях. */
@keyframes shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-3px);}40%,60%{transform:translateX(3px);}}
.anim .error.on{animation:shake .4s var(--ease-soft);}

@media (max-width:880px){
  .shell{grid-template-columns:1fr;min-height:100vh;}
  .side{display:none;} /* бренд-панель — только desktop; glow уходит вместе с ней */
  .pane{border-left:0;padding:40px 20px;align-items:flex-start;}
  .pane-in{max-width:400px;margin:0 auto;}
  .logo--pane{display:inline-block;}
}

@media (prefers-reduced-motion:reduce){
  .anim .rise{animation:none;}
  .anim .error.on{animation:none;}
  .side::before{animation:none;}
  .side-live::before{animation:none;}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}