:root{
  --bg:#080c0f;--panel:#101820;--border:#1e2d3d;--surface:#141c24;
  --green:#00e676;--text:#e2e8f0;--muted:#7b93a8;--red:#ff6b6b;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --display:"Barlow Condensed",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
}
.login-bg{
  position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 50% -10%,rgba(0,230,118,.12),transparent 60%),
    radial-gradient(600px 300px at 100% 100%,rgba(130,177,255,.08),transparent 50%),
    linear-gradient(180deg,#080c0f,#0b1218);
}
.login-bg::after{
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:48px 48px;
}
.login-shell{position:relative;z-index:1;width:min(440px,calc(100% - 32px));padding:32px 0}
.login-card{
  background:rgba(16,24,32,.92);border:1px solid var(--border);border-radius:16px;
  padding:36px 32px 32px;box-shadow:0 24px 80px rgba(0,0,0,.45);
  backdrop-filter:blur(12px);
}
.login-brand{text-align:center;margin-bottom:28px}
.login-pulse{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--green);margin-bottom:14px;
  box-shadow:0 0 0 0 rgba(0,230,118,.45);animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,230,118,.4)}
  50%{opacity:.7;box-shadow:0 0 0 8px rgba(0,230,118,0)}
}
.login-kicker{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);
  font-family:var(--mono);margin-bottom:8px;
}
.login-brand h1{
  font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.08em;
  line-height:1;
}
.login-sub{margin-top:10px;color:var(--muted);font-size:14px}
.login-alert{
  background:rgba(255,82,82,.1);border:1px solid rgba(255,82,82,.35);
  color:#ffc9c9;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:16px;
}
.field{display:block;margin-bottom:16px;position:relative}
.field-label{
  display:block;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.field input{
  width:100%;height:48px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font:16px/1.4 var(--sans);
  padding:0 44px 0 14px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.field input:focus{
  border-color:rgba(0,230,118,.55);
  box-shadow:0 0 0 3px rgba(0,230,118,.12);
}
.field-eye{
  position:absolute;right:8px;bottom:8px;width:32px;height:32px;
  border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px;
}
.field-eye:hover{color:var(--text);background:rgba(255,255,255,.05)}
.remember{
  display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);
  margin:4px 0 22px;cursor:pointer;user-select:none;
}
.remember input{accent-color:var(--green);width:16px;height:16px}
.login-btn{
  width:100%;height:48px;border:0;border-radius:10px;cursor:pointer;
  background:var(--green);color:#06210f;font-family:var(--display);
  font-size:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .12s,filter .12s;
}
.login-btn:hover{filter:brightness(1.05)}
.login-btn:active{transform:translateY(1px)}
.login-btn:disabled{opacity:.7;cursor:progress}
.btn-spinner{
  width:16px;height:16px;border:2px solid rgba(6,33,15,.25);
  border-top-color:#06210f;border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:480px){
  .login-card{padding:28px 20px}
  .login-brand h1{font-size:24px}
}