/* poarta: PIN și cont blocat */
body.gate{display:grid;place-items:center;padding:24px 16px 48px}
.gate-card{position:relative;z-index:2;width:100%;max-width:372px;text-align:center;padding:30px 26px 24px;border-radius:24px;
  background:var(--glass);border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 80px rgba(0,0,0,.55),0 0 90px rgba(43,155,255,.10);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)}
.gate-card::before,.gate-card::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--blue);opacity:.75}
.gate-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:24px}
.gate-card::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:24px}
.gate-card h1{font-size:1.18rem;margin:18px 0 4px}

.orb{position:relative;width:150px;height:150px;margin:0 auto;display:grid;place-items:center}
.orb .brain3d{--s:104px}
.orb .halo{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,rgba(43,155,255,.28),transparent 64%);animation:breathe 4.5s ease-in-out infinite}
.orb .rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rings circle{fill:none;stroke-linecap:round;transform-origin:100px 100px}
.rings .r1{stroke:rgba(111,191,255,.55);stroke-width:1.2;stroke-dasharray:3 9;animation:spin 26s linear infinite}
.rings .r2{stroke:rgba(43,155,255,.85);stroke-width:2;stroke-dasharray:60 190 20 120;animation:spin 9s linear infinite reverse}
.rings .r3{stroke:rgba(222,154,99,.55);stroke-width:1.2;stroke-dasharray:2 14;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.08);opacity:.65}}

#user{display:block;width:100%;max-width:236px;margin:20px auto 0;padding:11px 14px;border-radius:12px;text-align:center;
  background:rgba(5,8,13,.6);border:1px solid rgba(111,191,255,.28);color:var(--text);font:600 1rem var(--f-mono);
  letter-spacing:.12em;outline:none;transition:border-color .15s,box-shadow .15s}
#user::placeholder{color:var(--dim);font-weight:400;letter-spacing:.2em}
#user:focus{border-color:var(--blue-ink);box-shadow:0 0 18px rgba(43,155,255,.3)}
.until{color:var(--amber-ink)}
.fine a{color:var(--blue-ink);text-decoration:none}
.fine a:hover{text-decoration:underline}
.dots{display:flex;justify-content:center;gap:14px;margin:18px 0 16px;min-height:14px}
.dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(111,191,255,.55);transition:.18s}
.dots i.on{background:var(--blue);border-color:var(--blue-ink);box-shadow:0 0 14px var(--blue)}
#pin{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.pad{display:grid;grid-template-columns:repeat(3,68px);gap:13px;justify-content:center}
.key{height:68px;border-radius:50%;border:1px solid rgba(111,191,255,.22);cursor:pointer;
  background:radial-gradient(circle at 35% 30%,rgba(111,191,255,.10),rgba(11,18,28,.7) 70%);
  font:600 1.45rem/1 var(--f-title);color:var(--text);box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:transform .08s,box-shadow .15s,border-color .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.key:hover{border-color:rgba(111,191,255,.55)}
.key:active,.key.hit{transform:scale(.93);box-shadow:0 0 22px rgba(43,155,255,.55),inset 0 0 18px rgba(43,155,255,.35);border-color:var(--blue)}
.key.fn{font-size:1.2rem;color:var(--muted)}
.key.go{background:radial-gradient(circle at 35% 30%,#3aa5ff,#135a9c 75%);border-color:var(--blue-ink);box-shadow:0 0 22px rgba(43,155,255,.45)}
.msg{min-height:1.4em;margin:16px 0 0;font-size:.9rem;color:var(--muted)}
.msg.warn{color:var(--amber-ink)}
.msg.danger{color:var(--red-ink);font-weight:600}
.fine{margin:18px 0 0;font-size:.76rem;color:var(--dim);font-family:var(--f-mono);letter-spacing:.02em}

.is-locked .gate-card{border-color:rgba(214,95,74,.45);box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 80px rgba(0,0,0,.55),0 0 90px rgba(214,95,74,.16)}
.is-locked .gate-card::before,.is-locked .gate-card::after{border-color:var(--red)}
.lock-ico{width:84px;height:84px;margin:4px auto 0;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,rgba(214,95,74,.22),transparent 70%)}
.lock-ico svg{width:52px;height:52px;fill:none;stroke:var(--red-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lead{color:var(--text);margin:14px 0 0}
@media (max-width:380px){.pad{grid-template-columns:repeat(3,62px);gap:11px}.key{height:62px}}