/* ABOT login – the glowing team above, a quiet glass card below. Phone first. */
.login-page{min-height:100dvh}
.gate{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  padding:0 16px calc(24px + env(safe-area-inset-bottom))}
/* room for the organism, which sits at its "home" position (see organism.js) */
.gate-space{flex:none;height:calc(8vh + 160px)}
@media (min-width:600px){.gate-space{height:calc(16vh + 230px)}}

.gate-card{width:min(400px,100%);display:flex;flex-direction:column;gap:16px;padding:26px 22px 20px;
  border:1px solid rgba(62,240,200,.28);border-radius:var(--r-l);
  background:linear-gradient(180deg,rgba(15,45,56,.78),rgba(6,24,32,.86));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(62,240,200,.05),0 30px 80px -30px rgba(62,240,200,.35);
  animation:gateIn .8s cubic-bezier(.2,.7,.2,1) both .15s}
@media (min-width:600px){.gate-card{padding:30px 30px 22px}}
@keyframes gateIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.gate-brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.gate-mark{font:700 34px/1 var(--display);letter-spacing:.42em;margin-right:-.42em;color:var(--glow);
  text-shadow:0 0 22px rgba(62,240,200,.55)}
.gate-full{font:12px var(--display);font-stretch:condensed;color:var(--faint);letter-spacing:.02em}
.gate-lead{margin:2px 0 4px;text-align:center;font:400 17px/1.4 var(--display);color:var(--text)}

.gate-field{display:flex;flex-direction:column;gap:7px;font:13px var(--display);color:var(--mute)}
.gate-input{position:relative;display:flex}
.gate-input input{flex:1;min-width:0;height:52px;padding:0 84px 0 16px;border-radius:var(--r-m);
  border:1px solid var(--line);background:rgba(3,14,19,.75);color:var(--text);font:17px var(--body);outline:none;
  transition:border-color .2s,box-shadow .2s}
.gate-input input:focus{border-color:var(--glow-dim);box-shadow:0 0 0 3px rgba(62,240,200,.12)}
.gate-peek{position:absolute;right:6px;top:6px;bottom:6px;padding:0 12px;border:0;border-radius:10px;
  background:transparent;color:var(--mute);font:13px var(--display);cursor:pointer}
.gate-peek:hover,.gate-peek:focus-visible{color:var(--text);background:rgba(62,240,200,.08);outline:none}

.gate-err{margin:-4px 0 0;min-height:1.3em;font-size:14px;color:var(--coral);text-align:center}
.gate-err:empty{min-height:0;margin:0}
.gate-card.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

.gate-go{height:52px;font-size:16px;border-radius:var(--r-m)}
.gate-go[aria-busy=true]{opacity:.7;pointer-events:none}

.gate-note{margin:4px 0 0;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--faint);text-align:center}
.gate-chip{padding:2px 9px;border-radius:99px;border:1px dashed rgba(255,180,92,.55);color:var(--ember);font:12px var(--display)}

@media (prefers-reduced-motion:reduce){.gate-card{animation:none}.gate-card.shake{animation:none}}