LOGIN
══════════════════════════════════════ */
#loginScreen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 60% at 20% 50%,#181800 0%,transparent 60%),
             radial-gradient(ellipse 60% 50% at 80% 20%,#180a00 0%,transparent 50%),
             var(--bg);
  position:relative;overflow:hidden
}
#loginScreen::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(255,255,255,.012) 60px,rgba(255,255,255,.012) 61px),
             repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,.012) 60px,rgba(255,255,255,.012) 61px)
}
#loginScreen::after{
  content:'';position:absolute;bottom:-20%;left:50%;transform:translateX(-50%);
  width:600px;height:300px;
  background:radial-gradient(ellipse,rgba(232,255,0,.04) 0%,transparent 70%);
  pointer-events:none
}
.login-card{
  width:min(440px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border);
  border-radius:24px;padding:52px 44px;position:relative;z-index:1;
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(232,255,0,.04);
  animation:slideUp .5s cubic-bezier(.4,0,.2,1)
}
@keyframes logro-in{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes logro-out{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(20px)}}
@keyframes slideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.login-logo{font-family:'Bebas Neue';font-size:52px;letter-spacing:5px;color:var(--accent);line-height:1}
.login-logo span{color:var(--accent2)}
.login-sub{color:var(--muted2);font-size:11px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-bottom:32px}
.role-tabs{display:flex;gap:8px;margin-bottom:28px}
.role-tab{
  flex:1;padding:11px;background:var(--surface2);border:1px solid var(--border);
  color:var(--muted2);border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:500;
  text-align:center;transition:all var(--transition)
}
.role-tab.active{background:rgba(var(--accent-rgb),.08);border-color:var(--accent);color:var(--accent)}
.lfield{margin-bottom:18px}
.lfield label{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);margin-bottom:8px}
.lfield input{
  width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);
  padding:13px 16px;border-radius:var(--radius-sm);font-family:inherit;font-size:15px;
  outline:none;transition:border-color var(--transition),box-shadow var(--transition)
}
.lfield input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07)}
.btn-login{
  width:100%;padding:15px;background:var(--accent);color:#000;border:none;
  border-radius:var(--radius-sm);font-family:'DM Sans';font-size:14px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;margin-top:8px;
  transition:transform var(--transition),box-shadow var(--transition)
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(var(--accent-rgb),.3)}
.login-error{
  background:rgba(255,23,68,.08);border:1px solid rgba(255,23,68,.25);color:#ff6b6b;
  padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:16px;display:none
}
.login-demo{margin-top:22px;font-size:12px;color:var(--muted);text-align:center;line-height:1.8}
.login-demo strong{color:var(--muted2)}

/* ══════════════════════════════════════