:root{
  --bg-1:#060f1b;
  --bg-2:#0e2033;
  --panel:rgba(12,24,40,.74);
  --line:rgba(255,255,255,.18);
  --text:#f5f9ff;
  --muted:#a5bdd8;
  --cyan:#56ddf0;
  --danger:#ff6b7f;
  --ff-body:"Inter","Segoe UI",sans-serif;
  --ff-mono:"Space Mono","JetBrains Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100vh;color:var(--text);font-family:var(--ff-body)}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    radial-gradient(circle at 20% 20%, rgba(86,221,240,.2), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(0,196,154,.14), transparent 40%),
    linear-gradient(160deg,var(--bg-1) 0%,var(--bg-2) 100%);
}
.login-box{
  width:420px;
  max-width:100%;
  border-radius:22px;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 24px 64px rgba(0,0,0,.42);
  backdrop-filter:blur(14px);
}
.login-header{padding:30px 30px 16px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
.login-logo{font-family:var(--ff-mono);font-size:30px;font-weight:700;letter-spacing:1px}
.login-logo span{color:var(--cyan)}
.login-ver{font-family:var(--ff-mono);font-size:12px;color:var(--muted);margin-top:6px}
.login-body{padding:24px 30px 30px}
.login-label{display:block;font-family:var(--ff-mono);font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;margin-top:16px}
.login-label:first-child{margin-top:0}
.login-input{
  width:100%;
  height:54px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:0 16px;
  font-size:16px;
  outline:none;
  transition:all .18s;
}
.login-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(86,221,240,.16)}
.login-btn{
  margin-top:22px;
  width:100%;
  height:54px;
  border:none;
  border-radius:12px;
  font-family:var(--ff-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  color:#062236;
  background:linear-gradient(135deg,#7ceaf7,#3bc8dc);
}
.login-btn:hover{filter:brightness(1.08)}
.login-btn:disabled{opacity:.5;cursor:not-allowed}
.login-btn-secondary{
  margin-top:12px;
  color:var(--text);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}
.login-error{margin-top:14px;padding:11px 14px;background:rgba(255,107,127,.1);border:1px solid rgba(255,107,127,.4);border-radius:10px;font-family:var(--ff-mono);font-size:12px;color:var(--danger);display:none;text-align:center;line-height:1.5}
.login-error.show{display:block}
.login-hint{margin-top:16px;text-align:center;font-family:var(--ff-mono);font-size:12px;color:var(--muted);line-height:1.5}
@media (max-width:520px){
  body{padding:0}
  .login-box{border-radius:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
}