/* ============================================================
   ZURI POS — Login (premium centered)
   ============================================================ */
.login-body{
  min-height:100vh;margin:0;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(900px 500px at 15% 0%,var(--brand-grad-soft),transparent 55%),
    radial-gradient(900px 500px at 100% 100%,rgba(14,165,233,.06),transparent 55%),
    var(--bg);
  font-family:var(--font-sans);color:var(--text);
}
.login-theme{position:fixed;top:20px;right:20px;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-2);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-sm);z-index:10}
.login-theme:hover{color:var(--brand);border-color:var(--brand-300)}
.login-theme .ico{width:19px;height:19px}

.login-wrap{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:18px}
.login-card{
  width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-xl);padding:36px 32px 28px;text-align:center;
}
.login-logo{width:60px;height:60px;border-radius:17px;background:var(--brand-grad);display:grid;place-items:center;margin:0 auto 14px;
  box-shadow:0 10px 28px -6px rgba(79,70,229,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.login-logo .ico{width:30px;height:30px;color:#fff}
.login-brand{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.03em}
.login-sub{color:var(--text-3);font-size:var(--fs-sm);margin:6px 0 22px}

.pin-dots{display:flex;justify-content:center;gap:14px;margin-bottom:26px}
.pin-dot{width:14px;height:14px;border-radius:50%;background:var(--surface-3);border:1.5px solid var(--border-strong);transition:all var(--t-base) var(--ease-spring)}
.pin-dot.filled{background:var(--brand);border-color:var(--brand);transform:scale(1.12);box-shadow:0 0 0 4px var(--brand-soft)}
.pin-dots.err{animation:pinShake .42s var(--ease)}
@keyframes pinShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.key{height:62px;border:1px solid var(--border);background:var(--surface-2);border-radius:15px;font-family:inherit;
  font-size:24px;font-weight:600;color:var(--text);cursor:pointer;transition:all var(--t-fast) var(--ease);display:grid;place-items:center}
.key:hover{border-color:var(--brand-300);background:var(--surface);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.key:active{transform:translateY(0) scale(.95);background:var(--brand-soft)}
.key-fn{color:var(--text-3)}
.key-fn .ico{width:22px;height:22px}

.login-switch{margin-top:18px;font-size:var(--fs-sm);color:var(--text-3)}
.login-switch button{background:none;border:0;color:var(--brand);font:inherit;font-weight:650;cursor:pointer;padding:0}
.login-switch button:hover{text-decoration:underline}

.login-form{text-align:left;display:flex;flex-direction:column;gap:14px}
.login-form .field{margin:0}
.input-ico{position:relative;display:flex;align-items:center}
.input-ico .ico{position:absolute;left:13px;color:var(--text-3);pointer-events:none}
.input-ico .input{padding-left:40px}

.demo-creds{margin-top:24px;padding-top:18px;border-top:1px dashed var(--border);text-align:center}
.demo-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.demo-row{font-size:var(--fs-xs);color:var(--text-3);margin-top:7px;line-height:1.7}
.demo-row b{color:var(--brand);font-weight:700;font-variant-numeric:tabular-nums}
.login-foot{font-size:var(--fs-xs);color:var(--text-3)}

.fade-rise{animation:fadeRise .5s var(--ease)}
@keyframes fadeRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}