/* Login */
#screen-login{overflow:hidden}
#login-globe-canvas{position:absolute;inset:0;width:100%;height:100%}
.login-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(29,110,245,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(29,110,245,.02) 1px,transparent 1px);background-size:60px 60px}
.login-corner{position:absolute;width:36px;height:36px;opacity:.2}
.login-corner-tl{top:18px;left:18px;border-top:1px solid var(--accent2);border-left:1px solid var(--accent2)}
.login-corner-tr{top:18px;right:18px;border-top:1px solid var(--accent2);border-right:1px solid var(--accent2)}
.login-corner-bl{bottom:18px;left:18px;border-bottom:1px solid var(--accent2);border-left:1px solid var(--accent2)}
.login-corner-br{bottom:18px;right:18px;border-bottom:1px solid var(--accent2);border-right:1px solid var(--accent2)}
.login-card{position:relative;z-index:10;width:340px;background:rgba(12,16,24,.92);border:1px solid var(--border2);border-radius:var(--r3);padding:32px 28px 24px;display:flex;flex-direction:column;align-items:center;box-shadow:0 40px 80px rgba(0,0,0,.6);backdrop-filter:blur(12px);opacity:0;transform:translateY(16px) scale(.97);transition:opacity .5s,transform .5s}
.login-card.visible{opacity:1;transform:translateY(0) scale(1)}
.login-logo-text{font-family:var(--font);font-weight:800;font-size:20px;letter-spacing:-.6px;margin-bottom:3px}
.login-logo-text .blue{color:var(--accent2)}
.login-subtitle{font-family:var(--mono);font-size:9px;color:var(--text3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px}
.pin-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:10px;text-align:center;width:100%}
.pin-display{display:flex;gap:10px;margin-bottom:6px;align-items:center;justify-content:center}
.pin-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--border3);background:transparent;transition:all .18s}
.pin-dot.filled{background:var(--accent2);border-color:var(--accent2);box-shadow:0 0 7px rgba(77,142,248,.5)}
.pin-dot.error{border-color:var(--red);background:var(--red);box-shadow:0 0 7px rgba(240,61,61,.5)}
.pin-display.shake{animation:pshake .35s}
@keyframes pshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin:14px 0 10px}
.pin-key{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;user-select:none;position:relative;overflow:hidden}
.pin-key:hover{background:var(--bg4);border-color:var(--border2);transform:translateY(-1px)}
.pin-key:active{transform:scale(.95);background:var(--accent3);border-color:var(--accent)}
.pin-key-num{font-family:var(--font);font-size:17px;font-weight:700;line-height:1;color:var(--text)}
.pin-key-letters{font-family:var(--mono);font-size:7px;letter-spacing:.1em;color:var(--text3);margin-top:1px}
.pin-key.danger:hover{border-color:var(--red)}
.pin-key.danger:hover .pin-key-num{color:var(--red)}
.ripple{position:absolute;border-radius:50%;background:rgba(77,142,248,.2);transform:scale(0);animation:rip .35s linear;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.pin-error-msg{font-family:var(--mono);font-size:10px;color:var(--red);text-align:center;min-height:13px;letter-spacing:.06em;opacity:0;transition:opacity .2s}
.pin-error-msg.show{opacity:1}
.pin-credit{font-family:var(--mono);font-size:9px;color:var(--text3);text-align:center;margin-top:10px;letter-spacing:.06em;opacity:.6}