/* PACOBOT – Sci-Fi-Look für die Login-Seite. Nur von login.html geladen.
   Der runde Orb (clip-path) und der Sternenstaub kommen aus scifi.css / scifi.js. */

body.login {
  background:
    radial-gradient(ellipse 70% 55% at 50% 22%, #0c1740 0%, transparent 62%),
    radial-gradient(ellipse 50% 45% at 88% 96%, rgba(110, 40, 220, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 45% 40% at 6% 82%, rgba(0, 150, 255, 0.08) 0%, transparent 70%),
    #03040a;
  overflow-x: hidden;
}
body.login > .login-card { position: relative; z-index: 2; }
body.login .hud-frame::before { /* Raster um den Orb herum */
  -webkit-mask-image: radial-gradient(ellipse 50% 45% at 50% 38%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 50% 45% at 50% 38%, #000 0%, transparent 78%);
}

.login-card .orb { margin: 54px 0 58px; }

.login-card h1 {
  font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: 0.46em; padding-left: 0.46em;
  color: #e2f4ff; text-shadow: 0 0 14px rgba(79, 195, 255, 0.65), 0 0 2px rgba(200, 240, 255, 0.8);
}
.login-card .sub {
  font: 10.5px/1.7 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(150, 205, 255, 0.7); margin: 10px 0 28px;
}
.login-card .sub::before { content: "[ "; opacity: 0.45; }
.login-card .sub::after { content: " ]"; opacity: 0.45; }

/* HUD-Karte für das Formular */
.login-card form {
  position: relative; border-radius: 8px;
  background: linear-gradient(180deg, rgba(12, 22, 54, 0.72), rgba(6, 11, 28, 0.78));
  border: 1px solid rgba(110, 190, 255, 0.2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(160, 220, 255, 0.07);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.login-card form::before, .login-card form::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 0 solid rgba(110, 200, 255, 0.6); transition: border-color 0.2s, transform 0.2s;
}
.login-card form::before { left: -6px; top: -6px; border-left-width: 1.5px; border-top-width: 1.5px; }
.login-card form::after { right: -6px; bottom: -6px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.login-card form:focus-within::before { border-color: var(--accent); transform: translate(-2px, -2px); }
.login-card form:focus-within::after { border-color: var(--accent); transform: translate(2px, 2px); }

.login-card label {
  font: 10.5px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(140, 190, 240, 0.65);
}
.login-card input {
  font: 15px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal; text-transform: none; color: var(--text);
  border-radius: 6px; background: rgba(4, 10, 26, 0.7); border-color: rgba(110, 190, 255, 0.2);
}
.login-card input:focus {
  border-color: rgba(79, 195, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(79, 195, 255, 0.1), 0 0 18px rgba(79, 195, 255, 0.15);
}
.login-card button {
  border-radius: 6px; font: 600 12px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(190, 235, 255, 0.35), 0 0 24px rgba(79, 195, 255, 0.4);
  transition: box-shadow 0.2s, transform 0.15s;
}
.login-card button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(210, 245, 255, 0.5), 0 0 32px rgba(79, 195, 255, 0.6); }
.login-card button:active:not(:disabled) { transform: scale(0.98); }
.login-card .error { font-size: 12.5px; text-shadow: 0 0 10px rgba(255, 90, 130, 0.35); }

@media (max-width: 420px) {
  .login-card .orb { margin: 46px 0 50px; }
  .login-card h1 { font-size: 18px; letter-spacing: 0.4em; padding-left: 0.4em; }
}