/* ─────────────────────────────────────────
   HACKER LOGIN OVERLAY
───────────────────────────────────────── */

/* ── Token badge (top-right, always visible after first auth) ── */
#token-badge {
  position: fixed;
  top: 10px; right: 16px;
  z-index: 9998;
  display: none;
  align-items: center;
  gap: 8px;
  font-family: 'Fira Code', monospace;
  font-size: .7rem;
  letter-spacing: .5px;
  color: #00ff88;
  background: rgba(6,9,16,.85);
  border: 1px solid rgba(0,255,136,.25);
  border-radius: 6px;
  padding: 5px 12px;
  backdrop-filter: blur(10px);
  transition: color .3s, border-color .3s;
}
#token-badge.warning {
  color: #fb923c;
  border-color: rgba(251,146,60,.4);
}
#token-badge.critical {
  color: #ef4444;
  border-color: rgba(239,68,68,.5);
  animation: badge-pulse .6s ease-in-out infinite;
}
#token-badge .badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: badge-blink 1.4s ease-in-out infinite;
}
@keyframes badge-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: .2; }
}
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ── Full-screen overlay ── */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #060910;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Fira Code', monospace;
  overflow: hidden;
}

/* scanline effect */
#login-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,255,136,.015) 2px,
    rgba(0,255,136,.015) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* vignette */
#login-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Boot log lines ── */
.login-boot {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 18px 28px;
  font-size: .68rem;
  color: rgba(0,255,136,.25);
  letter-spacing: .3px;
  line-height: 1.8;
  pointer-events: none;
  z-index: 2;
}
.login-boot span { display: block; }

/* ── Corner decorations ── */
.login-corner {
  position: absolute;
  font-size: .62rem;
  color: rgba(0,255,136,.2);
  letter-spacing: 1px;
  line-height: 1.6;
  z-index: 2;
  pointer-events: none;
}
.login-corner--tl { top: 14px; left: 16px; }
.login-corner--br { bottom: 14px; right: 16px; text-align: right; }

/* ── Main terminal card ── */
.login-card {
  position: relative;
  z-index: 3;
  width: min(480px, 92vw);
  background: rgba(6,9,16,.92);
  border: 1px solid rgba(0,255,136,.22);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(0,255,136,.06),
    0 0 40px rgba(0,255,136,.07),
    0 0 80px rgba(0,255,136,.04);
  overflow: hidden;
  animation: card-in .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes card-in {
  from { opacity:0; transform: translateY(24px) scale(.97); }
  to   { opacity:1; transform: none; }
}

/* ── Card title bar ── */
.login-card__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0,255,136,.045);
  border-bottom: 1px solid rgba(0,255,136,.12);
}
.login-card__bar-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.login-card__bar-dot--red    { background: #ef4444; }
.login-card__bar-dot--yellow { background: #eab308; }
.login-card__bar-dot--green  { background: #22c55e; }
.login-card__bar-title {
  margin-left: 8px;
  font-size: .72rem;
  color: rgba(0,255,136,.5);
  letter-spacing: 1.5px;
  flex: 1;
}
.login-card__bar-status {
  font-size: .65rem;
  color: #ef4444;
  letter-spacing: 1px;
  animation: blink-soft 1.2s ease-in-out infinite;
}
.login-card__bar-status.ok {
  color: #00ff88;
  animation: none;
}

/* ── Card body ── */
.login-card__body {
  padding: 28px 28px 24px;
}

/* ── System header ── */
.login-sys {
  margin-bottom: 22px;
}
.login-sys__label {
  font-size: .62rem;
  color: rgba(0,255,136,.35);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.login-sys__name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #00ff88;
  letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(0,255,136,.35);
}
.login-sys__sub {
  font-size: .68rem;
  color: rgba(0,255,136,.4);
  letter-spacing: 1px;
  margin-top: 3px;
}

/* ── Expired alert ── */
.login-expired {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 6px;
  font-size: .75rem;
  color: #fca5a5;
  letter-spacing: .5px;
  animation: shake .4s ease both;
}
.login-expired.show { display: flex; }
.login-expired__icon { font-size: 1rem; flex-shrink: 0; }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* ── Terminal prompt lines ── */
.login-prompt {
  font-size: .72rem;
  color: rgba(0,255,136,.4);
  letter-spacing: .5px;
  margin-bottom: 18px;
  line-height: 1.7;
}
.login-prompt .acc { color: #00ff88; }
.login-prompt .dim { color: rgba(0,255,136,.25); }
.login-prompt .warn { color: #fb923c; }

/* ── Form ── */
.login-form { display: flex; flex-direction: column; gap: 14px; }

.login-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.login-field__label {
  font-size: .65rem;
  color: rgba(0,255,136,.45);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.login-field__row {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,255,136,.04);
  border: 1px solid rgba(0,255,136,.18);
  border-radius: 5px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.login-field__row:focus-within {
  border-color: rgba(0,255,136,.45);
  box-shadow: 0 0 0 2px rgba(0,255,136,.07);
}
.login-field__row.error {
  border-color: rgba(239,68,68,.5);
  box-shadow: 0 0 0 2px rgba(239,68,68,.07);
  animation: shake .4s ease both;
}
.login-field__prompt {
  padding: 0 10px;
  font-size: .82rem;
  color: #00ff88;
  user-select: none;
  flex-shrink: 0;
}
.login-field__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Fira Code', monospace;
  font-size: .82rem;
  color: #e2e8f0;
  padding: 10px 10px 10px 0;
  letter-spacing: 1px;
  caret-color: #00ff88;
}
.login-field__input::placeholder { color: rgba(226,232,240,.2); }

/* ── Reveal toggle button ── */
.login-reveal {
  background: none;
  border: none;
  border-left: 1px solid rgba(0,255,136,.1);
  padding: 0 11px;
  cursor: pointer;
  color: rgba(0,255,136,.35);
  display: flex;
  align-items: center;
  height: 100%;
  transition: color .2s;
  flex-shrink: 0;
}
.login-reveal:hover { color: #00ff88; }

/* ── Hint block ── */
.login-hint {
  font-size: .65rem;
  color: rgba(0,255,136,.3);
  letter-spacing: .5px;
  line-height: 1.7;
  padding: 9px 12px;
  border: 1px dashed rgba(0,255,136,.12);
  border-radius: 4px;
  background: rgba(0,255,136,.02);
}
.login-hint .h-acc { color: rgba(0,255,136,.65); }
.login-hint .h-key { color: #fb923c; }

/* ── Error message ── */
.login-error {
  display: none;
  font-size: .68rem;
  color: #fca5a5;
  letter-spacing: .5px;
  padding: 2px 0 0 4px;
}
.login-error.show { display: block; animation: shake .35s ease both; }

/* ── Submit button ── */
.login-submit {
  width: 100%;
  padding: 11px;
  background: rgba(0,255,136,.08);
  border: 1px solid rgba(0,255,136,.3);
  border-radius: 5px;
  color: #00ff88;
  font-family: 'Fira Code', monospace;
  font-size: .82rem;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, border-color .2s;
  margin-top: 4px;
  text-transform: uppercase;
}
.login-submit:hover {
  background: rgba(0,255,136,.14);
  border-color: rgba(0,255,136,.55);
  box-shadow: 0 0 18px rgba(0,255,136,.12);
}
.login-submit:active { transform: scale(.98); }
.login-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ── Footer ── */
.login-footer {
  padding: 12px 28px;
  border-top: 1px solid rgba(0,255,136,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .62rem;
  color: rgba(0,255,136,.2);
  letter-spacing: .5px;
}
.login-footer .f-warn { color: rgba(239,68,68,.45); }

/* ── Auth success flash ── */
.login-overlay--granted {
  animation: granted-flash .5s ease both;
}
@keyframes granted-flash {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(2.5) hue-rotate(0deg); }
  100% { filter: brightness(0) brightness(0); opacity: 0; }
}

/* ── Screen flicker on expire ── */
@keyframes screen-flicker {
  0%,100% { opacity: 1; }
  10%      { opacity: .4; }
  20%      { opacity: .9; }
  30%      { opacity: .3; }
  50%      { opacity: 1; }
  70%      { opacity: .6; }
  80%      { opacity: 1; }
}
.login-overlay--flicker {
  animation: screen-flicker .5s ease both;
}