/* ===== FASTRA password gate ===== */
:root{
  --g-bg:#ECF4F6; --g-card:#FFFFFF; --g-ink:#0A2E35; --g-ink2:#005966;
  --g-muted:#5E7A82; --g-line:#E2EEF1; --g-line2:#D3E5E9; --g-blue:#00A2B9;
  --g-grad:linear-gradient(135deg,#00B6CE 0%,#005966 100%);
  --g-shadow:0 2px 6px rgba(8,50,60,.06),0 24px 50px -18px rgba(0,89,102,.30);
  --g-shadow-blue:0 16px 36px -12px rgba(0,162,185,.55);
  --g-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
#gate{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  font-family:var(--g-sans);color:var(--g-ink);
  background:var(--g-bg);
  background-image:
    radial-gradient(900px 500px at 88% -8%,rgba(0,162,185,.12),transparent 60%),
    radial-gradient(800px 520px at -6% 4%,rgba(0,89,102,.12),transparent 55%);
  -webkit-font-smoothing:antialiased;
}
#gate.hidden{display:none}
.gate-card{
  width:100%;max-width:380px;background:var(--g-card);border:1px solid var(--g-line);
  border-radius:20px;box-shadow:var(--g-shadow);padding:34px 30px 30px;text-align:center;
  animation:gpop .4s cubic-bezier(.2,.8,.2,1)}
@keyframes gpop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.gate-mark{
  width:54px;height:54px;margin:0 auto 18px;background:var(--g-grad);
  box-shadow:var(--g-shadow-blue);display:grid;place-items:center;color:#fff;
  font-weight:800;font-size:24px;position:relative;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%)}
.gate-mark::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 45%)}
.gate-bt{font-size:10px;letter-spacing:.26em;color:var(--g-blue);font-weight:700;
  text-transform:uppercase;margin-bottom:5px}
.gate-card h1{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--g-ink2);margin:0 0 4px}
.gate-card h1 .dot{color:var(--g-blue);font-weight:800}
.gate-sub{font-size:12.5px;color:var(--g-muted);margin:0 0 22px;line-height:1.5}
.gate-field{position:relative;margin-bottom:12px}
.gate-field input{
  width:100%;padding:13px 44px 13px 15px;font-size:14px;font-family:inherit;
  color:var(--g-ink);background:#F2FAFC;border:1.5px solid var(--g-line2);
  border-radius:12px;outline:none;transition:border-color .15s,box-shadow .15s}
.gate-field input::placeholder{color:#9DB4BA}
.gate-field input:focus{border-color:var(--g-blue);box-shadow:0 0 0 4px rgba(0,162,185,.14)}
.gate-field.err input{border-color:#EF6B5B;box-shadow:0 0 0 4px rgba(239,107,91,.14)}
.gate-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
  border:none;background:transparent;cursor:pointer;color:var(--g-muted);
  display:grid;place-items:center;border-radius:8px}
.gate-toggle:hover{background:#E2EEF1;color:var(--g-ink2)}
.gate-btn{
  width:100%;padding:13px;font-size:14px;font-weight:600;font-family:inherit;color:#fff;
  background:var(--g-grad);border:none;border-radius:12px;cursor:pointer;
  box-shadow:var(--g-shadow-blue);transition:transform .12s,filter .15s}
.gate-btn:hover{filter:brightness(1.05)}
.gate-btn:active{transform:translateY(1px)}
.gate-msg{min-height:18px;margin-top:12px;font-size:12px;color:#EF6B5B;font-weight:500;
  opacity:0;transition:opacity .15s}
.gate-msg.show{opacity:1}
.gate-foot{margin-top:20px;font-size:10.5px;color:#9DB4BA;letter-spacing:.02em}
@media(max-width:420px){.gate-card{padding:28px 22px 24px}}