/* ============================================================
   AUTH: login overlay + user pill (HUD style)
   ============================================================ */
.login-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(0,20,30,0.85) 0%, rgba(0,0,0,0.95) 70%);
  backdrop-filter: blur(8px);
}
.login-overlay--visible { display: flex; }
.login-card {
  position: relative;
  width: min(420px, 92vw);
  padding: 36px 32px 28px;
  background: linear-gradient(145deg, rgba(2,16,28,0.95), rgba(0,8,16,0.92));
  border: 1px solid rgba(0,229,255,0.3);
  box-shadow: 0 0 40px rgba(0,229,255,0.15), inset 0 0 30px rgba(0,229,255,0.05);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.login-card__corner {
  position: absolute; width: 18px; height: 18px;
  border: 1.5px solid #00e5ff;
}
.login-card__corner--tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.login-card__corner--tr { top: 4px; right: 4px; border-left: none; border-bottom: none; }
.login-card__corner--bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
.login-card__corner--br { bottom: 4px; right: 4px; border-left: none; border-top: none; }
.login-card__brand { text-align: center; margin-bottom: 24px; }
.login-card__logo {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 36px; letter-spacing: 0.25em; color: #00e5ff;
  text-shadow: 0 0 12px rgba(0,229,255,0.6);
}
.login-card__sub {
  font-family: 'Rajdhani', sans-serif; font-size: 11px;
  color: #7d99b0; letter-spacing: 0.3em; margin-top: 6px;
}
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-field { display: flex; flex-direction: column; gap: 4px; }
.login-field span {
  font-family: 'Rajdhani', sans-serif; font-size: 10px;
  letter-spacing: 0.2em; color: #5d7d92;
}
.login-field input {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,229,255,0.25);
  color: #d5ebf4; padding: 10px 12px; font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.login-field input:focus {
  border-color: #00e5ff;
  box-shadow: 0 0 8px rgba(0,229,255,0.4);
}
.login-error {
  color: #ff2d55; font-family: 'Rajdhani'; font-size: 12px;
  letter-spacing: 0.05em; padding: 6px 8px;
  background: rgba(255,45,85,0.1); border-left: 2px solid #ff2d55;
}
.login-btn { margin-top: 8px; padding: 12px; font-size: 14px; letter-spacing: 0.2em; }
.login-btn:disabled { opacity: 0.5; cursor: wait; }
.login-card__hint {
  text-align: center; margin-top: 18px;
  font-family: 'JetBrains Mono'; font-size: 9px;
  color: #4d6d82; letter-spacing: 0.15em;
}

.user-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-right: 12px;
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.25);
  font-family: 'Rajdhani'; font-size: 12px;
  letter-spacing: 0.1em; color: #a5c5d4;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.user-pill__ico { font-size: 14px; }
.user-pill__name { color: #00e5ff; font-weight: 600; }
.user-pill__logout {
  background: transparent; border: none; color: #ff6680;
  cursor: pointer; font-size: 16px; padding: 0 4px;
  transition: color 0.2s;
}
.user-pill__logout:hover { color: #ff2d55; text-shadow: 0 0 8px rgba(255,45,85,0.6); }