/* ---------- Страница входа ---------- */
body{ overflow:hidden; }

.orb.a{ width:46vw; height:46vw; left:-10%; top:-14%; background:radial-gradient(circle at 35% 35%, var(--accent), transparent 70%); animation: float1 26s ease-in-out infinite; }
.orb.b{ width:38vw; height:38vw; right:-8%; top:8%; background:radial-gradient(circle at 60% 40%, var(--accent-2), transparent 70%); animation: float2 32s ease-in-out infinite; }
.orb.c{ width:34vw; height:34vw; left:18%; bottom:-16%; background:radial-gradient(circle at 50% 50%, var(--accent-3), transparent 72%); animation: float3 28s ease-in-out infinite; opacity:.4; }

/* ---------- Layout ---------- */
.stage{
  position:relative; z-index:2;
  height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}

.mark{
  position:fixed; top:34px; left:0; right:0;
  z-index:3; display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:14px; letter-spacing:.02em; color:var(--ink-dim);
  opacity:0; animation: rise .8s var(--ease) .15s forwards;
}
.mark .dot{ width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px var(--accent); }

/* ---------- Glass card ---------- */
.card-wrap{
  perspective:1200px;
  opacity:0;
  animation: rise .9s var(--ease) .1s forwards;
}

.card{
  position:relative;
  width:380px; max-width:88vw;
  padding:42px 36px 34px;
  border-radius:var(--radius-xl);
  background:var(--glass);
  border:1px solid var(--stroke);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 30px 80px -20px rgba(0,0,0,.65),
    0 0 0 1px rgba(0,0,0,.2);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  overflow:hidden;
}

/* moving glare that follows cursor, like Apple product glass */
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,10%), rgba(255,255,255,.14), transparent 55%);
  opacity:0; transition:opacity .4s var(--ease);
  pointer-events:none;
}
.card:hover::before{ opacity:1; }

.card::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}

.glyph{
  width:46px; height:46px; border-radius:13px;
  background:linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  border:1px solid var(--stroke-strong);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.18) inset;
}
.glyph svg{ width:20px; height:20px; }

h1{
  font-size:22px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px;
}
.sub{
  font-size:13.5px; color:var(--ink-dim); margin:0 0 30px; line-height:1.5;
}

form{ display:flex; flex-direction:column; gap:14px; }

.field{
  position:relative;
}
.field input{
  width:100%;
  font-family:inherit;
  font-size:14.5px;
  color:var(--ink);
  background:rgba(255,255,255,.045);
  border:1px solid var(--stroke);
  border-radius:var(--radius-md);
  padding:14px 16px 14px 42px;
  outline:none;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder{ color:var(--ink-faint); }
.field input:focus{
  border-color:rgba(58,141,255,.55);
  background:rgba(255,255,255,.065);
  box-shadow:0 0 0 4px rgba(58,141,255,.14);
}
.field svg{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; opacity:.55; pointer-events:none;
}

.row-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:2px; font-size:12.5px;
}
.remember{ display:flex; align-items:center; gap:8px; color:var(--ink-dim); cursor:pointer; user-select:none; }
.remember input{ accent-color:var(--accent); width:14px; height:14px; }

button.submit{
  margin-top:10px;
  position:relative;
  font-family:inherit; font-size:14.5px; font-weight:600; letter-spacing:.01em;
  color:#fff; cursor:pointer;
  padding:14px 18px;
  border:none; border-radius:var(--radius-md);
  background:linear-gradient(155deg, var(--accent), #1f5fd6);
  box-shadow:0 10px 24px -8px rgba(58,141,255,.55), 0 1px 0 rgba(255,255,255,.3) inset;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
  overflow:hidden;
}
button.submit:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -8px rgba(58,141,255,.7), 0 1px 0 rgba(255,255,255,.3) inset; }
button.submit:active{ transform:translateY(0); filter:brightness(.94); }
button.submit:disabled{ opacity:.7; cursor:default; transform:none; }

button.submit .spin{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite; vertical-align:-2px; margin-right:8px;
  display:none;
}
.loading .spin{ display:inline-block; }
.loading .label{ opacity:.9; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.error{
  font-size:12.5px; color:#ff8a8a; background:rgba(255,90,90,.08);
  border:1px solid rgba(255,90,90,.25); border-radius:10px;
  padding:9px 12px; display:none; align-items:center; gap:8px;
  animation: shake .35s var(--ease);
}
.error.show{ display:flex; }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}

.divider{
  display:flex; align-items:center; gap:12px; margin:26px 0 18px;
  color:var(--ink-faint); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
}
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--stroke); }

.footer-note{
  text-align:center; font-size:12px; color:var(--ink-faint);
  margin-top:2px;
}
.footer-note a{ color:var(--ink-dim); text-decoration:none; border-bottom:1px solid var(--stroke-strong); }

.foot-links{
  position:fixed; bottom:28px; left:0; right:0;
  z-index:3; display:flex; justify-content:center; gap:22px; font-size:12px; color:var(--ink-faint);
  opacity:0; animation: rise .8s var(--ease) .3s forwards;
}
.foot-links a{ color:inherit; text-decoration:none; transition:.25s; }
.foot-links a:hover{ color:var(--ink-dim); }

@media (max-width:480px){
  .card{ padding:34px 24px 28px; border-radius:22px; }
  .mark{ top:22px; font-size:13px; }
  .foot-links{ bottom:18px; font-size:11px; gap:16px; }
}

@media (prefers-reduced-motion:reduce){
  .card-wrap, .mark, .foot-links{ animation:none !important; opacity:1; }
}