/* ============================================================
   Экран входа в раздел «Проекты» — olgasworld.ru/projects/login.php
   ============================================================ */

:root{
  --ink:#171a18;
  --muted:#8b938e;
  --line:rgba(255,255,255,.1);
  --accent:#3f9a6e;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:16px; line-height:1.5;
  color:#e9ece9;
  background:#101211;
  -webkit-font-smoothing:antialiased;
}

.gate{
  position:relative; min-height:100%;
  display:grid; place-items:center;
  padding:32px 20px;
  overflow:hidden;
}
.gate__glow{
  position:absolute; top:-30vh; left:50%; transform:translateX(-50%);
  width:min(900px, 130vw); height:min(900px, 130vw); border-radius:50%;
  background:radial-gradient(circle, rgba(63,154,110,.22) 0%, rgba(63,154,110,0) 62%);
  pointer-events:none;
}

.box{
  position:relative; width:100%; max-width:400px;
  padding:clamp(30px,5vw,44px);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  border-radius:28px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:rise .55s var(--ease) both;
}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

.box__dot{
  display:block; width:14px; height:14px; border-radius:50%; background:var(--accent);
  margin-bottom:24px; box-shadow:0 0 0 6px rgba(63,154,110,.16);
}
.box h1{margin:0; font-size:30px; font-weight:800; letter-spacing:-.035em; color:#fff}
.box__sub{margin:8px 0 26px; font-size:15px; color:var(--muted)}

.alert{
  margin:0 0 18px; padding:12px 16px; border-radius:14px;
  background:rgba(255,96,88,.14); border:1px solid rgba(255,96,88,.3);
  color:#ffb4af; font-size:14px;
  animation:shake .4s var(--ease);
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

.field{display:block; margin-bottom:14px}
.field__label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:7px}
.field input{
  width:100%; padding:14px 16px;
  font:inherit; font-size:16px; color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:14px;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.field input::placeholder{color:#6d746f}
.field input:focus{
  outline:none; background:rgba(255,255,255,.08);
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(63,154,110,.16);
}

.submit{
  width:100%; margin-top:10px; padding:15px 20px;
  font:inherit; font-size:16px; font-weight:600; color:#fff;
  background:var(--accent); border:0; border-radius:999px; cursor:pointer;
  transition:transform .18s var(--ease), background-color .2s, box-shadow .25s var(--ease);
}
.submit:hover{background:#47ab7c; transform:translateY(-2px); box-shadow:0 12px 26px rgba(63,154,110,.3)}
.submit:active{transform:translateY(0) scale(.99)}
.submit:focus-visible{outline:3px solid rgba(63,154,110,.55); outline-offset:3px}

.box__foot{margin:22px 0 0; font-size:13px; color:#767d78; line-height:1.5}
.box__foot a{color:#a8b1ac; text-decoration:none; white-space:nowrap}
.box__foot a:hover{color:#fff}

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