/* admin/login/style.css — Classic fixed status bar */
:root{
  --bg:#0f1221; --card:#171a2f; --text:#e9ecf5; --muted:#9aa0b4; --accent:#22c55e; --input:#0f1328; --border:#30344f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.card{background:var(--card);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);width:100%;max-width:420px;padding:28px}
h1{font-size:20px;margin:0 0 12px}
label{font-size:12px;color:var(--muted)}
input{width:100%;padding:12px 14px;margin-top:6px;margin-bottom:14px;border-radius:10px;border:1px solid var(--border);background:var(--input);color:var(--text)}
button{width:100%;padding:12px 14px;border:0;border-radius:10px;background:var(--accent);color:#08131b;font-weight:700;cursor:pointer;transition:transform .12s ease, opacity .12s ease}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.75;cursor:not-allowed}
.muted{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}
.err{background:#2a1c1c;color:#f3aaaa;border:1px solid #6a3b3b;padding:10px 12px;border-radius:10px;margin-bottom:12px;display:none}

/* Classic fixed status bar (top by default; switch to bottom by toggling body class 'bar-bottom') */
.statusbar{
  position:fixed;left:0;right:0;top:0;height:50px;
  background:linear-gradient(180deg,#151a33,#0f1428);
  border-bottom:1px solid #2b3150;
  display:flex;align-items:center;gap:12px;padding:0 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transform:translateY(-100%);opacity:0;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
  z-index:9999;
}
.bar-bottom .statusbar{top:auto;bottom:0;border-top:1px solid #2b3150;border-bottom:0;transform:translateY(100%)}
.status-visible .statusbar{transform:translateY(0);opacity:1}

.s-dot{
  width:10px;height:10px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  100%{box-shadow:0 0 0 16px rgba(34,197,94,0)}
}
.s-text{font-size:14px;letter-spacing:.2px}
.s-sub{font-size:12px;color:#aab0c3;margin-left:auto}
.s-progress{flex:0 0 220px;height:8px;border-radius:999px;background:#0f1328;border:1px solid #2f3555;overflow:hidden;margin-left:12px}
.s-bar{height:100%;width:0;background:#22c55e;animation:bar 1.8s ease-in-out infinite}
@keyframes bar{
  0%{width:10%} 30%{width:55%} 60%{width:82%} 100%{width:96%}
}