/* ЭКРАН ВХОДА
   Единственная страница, которую видят до всего остального, поэтому она
   сделана в родной для бренда среде: чёрный фон, фирменный узор, один
   оранжевый акцент. Дальше сайт светлый — с ним работают часами, и там
   тёмный фон утомлял бы. */

body.вход-страница{
  background:var(--чёрный);color:var(--белый);
  min-height:100vh;display:grid;place-items:center;padding:24px;
  overflow:hidden;
}

.вход-сцена{position:fixed;inset:0;overflow:hidden}
#узор{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.свет{
  position:absolute;left:50%;bottom:-42%;width:min(1100px,140vw);height:min(1100px,140vw);
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,57,23,.5),rgba(255,57,23,.12) 45%,transparent 72%);
  filter:blur(30px);
  animation:дышать 9s ease-in-out infinite alternate;
}
@keyframes дышать{to{transform:translateX(-50%) scale(1.08);opacity:.85}}

.вход-обёртка{
  position:relative;z-index:1;width:100%;max-width:392px;
  display:flex;flex-direction:column;align-items:center;gap:26px;
  animation:вплыть .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes вплыть{from{opacity:0;transform:translateY(14px)}}

.вход-логотип{display:flex;align-items:center;gap:14px;color:var(--белый)}
.вход-логотип .mark{width:44px;height:45px;flex:0 0 auto}
.вход-логотип .mark svg{width:100%;height:100%;display:block}
.вход-логотип .word{display:flex;flex-direction:column;line-height:1}
.вход-логотип .word b{
  display:block;white-space:nowrap;
  font:500 21px/1 Manrope,sans-serif;letter-spacing:.22em;
}
.вход-логотип .word i{font-style:normal;color:var(--оранжевый)}
.вход-логотип .word em{
  display:block;white-space:nowrap;font-style:normal;margin-top:6px;
  font:400 9px/1 "Geist Mono",monospace;letter-spacing:.3em;
  text-transform:uppercase;color:var(--серый);
}

.вход-карточка{
  width:100%;background:rgba(53,60,64,.42);
  border:1px solid rgba(224,224,224,.14);border-radius:18px;
  padding:28px 26px 26px;backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.75);
}
.вход-карточка h1{font:600 23px/1.2 Manrope,sans-serif;letter-spacing:-.02em;color:var(--белый)}
.вход-подпись{
  font:400 13px/1.55 Manrope,sans-serif;color:var(--серый);margin:8px 0 22px;
}
.вход-карточка label{display:block;margin-bottom:16px}
.вход-карточка .label{display:block;margin-bottom:7px;color:var(--серый)}
.вход-карточка input{
  background:rgba(20,21,23,.55);border:1px solid rgba(224,224,224,.16);
  color:var(--белый);font-size:15px;padding:12px 14px;
}
.вход-карточка input:focus{
  border-color:var(--оранжевый);box-shadow:0 0 0 3px rgba(255,57,23,.18);
  background:rgba(20,21,23,.75);
}
.вход-карточка button{width:100%;margin-top:6px;padding:12px;font-size:15px}

.вход-ошибка{
  background:rgba(255,57,23,.12);border:1px solid rgba(255,57,23,.4);
  color:#FFC9BE;border-radius:10px;padding:11px 13px;font-size:13.5px;margin-bottom:18px;
}
.вход-низ{
  font:400 11px/1.5 "Geist Mono",monospace;letter-spacing:.08em;
  color:rgba(169,169,169,.6);text-align:center;
}

@media(max-width:420px){
  .вход-логотип .word b{font-size:18px}
  .вход-карточка{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){
  .свет{animation:none}
  .вход-обёртка{animation:none}
}