/* ── Background ─────────────────────────────────────────── */
body, html { background: #020b18 !important; }

body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at  8% 12%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 44%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 47%  8%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 67%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 28%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 53%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 36% 91%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 17%, rgba(255,255,255,.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 38%, rgba(120,200,255,.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 82%, rgba(100,180,255,.5) 0%, transparent 100%);
}

/* ── Remove llama & side panel ──────────────────────────── */
.no-auth-wrapper    { background-image: none !important; }
.noauth-container .image { display: none !important; }

/* ── Center & constrain the form ───────────────────────── */
.noauth-container .content {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
}

/* ── High-tech card ─────────────────────────────────────── */
.card, .box {
  width: 100% !important;
  max-width: 420px !important;
  background: rgba(2, 12, 28, 0.93) !important;
  border: 1px solid rgba(0, 190, 255, 0.2) !important;
  border-radius: 3px !important;
  box-shadow:
    0 0 40px rgba(0, 120, 255, 0.08),
    inset 0 0 30px rgba(0, 40, 90, 0.15) !important;
  position: relative;
  padding: 2.5rem !important;
}

/* Corner brackets */
.card::before, .box::before,
.card::after,  .box::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: rgba(0, 200, 255, 0.55);
  border-style: solid;
}
.card::before, .box::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.card::after,  .box::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* ── Title ──────────────────────────────────────────────── */
.title, h2 {
  color: #90d4f7 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* ── Labels — hidden on login ───────────────────────────── */
.noauth-container .label { display: none !important; }

/* ── Inputs ─────────────────────────────────────────────── */
input, .input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 160, 255, 0.35) !important;
  border-radius: 0 !important;
  color: #b0dcf5 !important;
  font-family: ui-monospace, 'Courier New', monospace !important;
  letter-spacing: 0.04em;
  box-shadow: none !important;
  padding-left: 2px !important;
}
input:focus, .input:focus, .input.is-focused {
  border-bottom-color: rgba(0, 210, 255, 0.75) !important;
  box-shadow: 0 1px 0 0 rgba(0, 200, 255, 0.25) !important;
  outline: none !important;
}

/* ── Primary button ─────────────────────────────────────── */
.button.is-primary {
  background: transparent !important;
  border: 1px solid rgba(0, 190, 255, 0.45) !important;
  border-radius: 2px !important;
  color: #7dd3fc !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  font-family: ui-monospace, 'Courier New', monospace !important;
  box-shadow: 0 0 14px rgba(0, 140, 255, 0.15) !important;
  transition: box-shadow 0.2s, border-color 0.2s, color 0.2s;
}
.button.is-primary:hover, .button.is-primary:focus {
  border-color: rgba(0, 220, 255, 0.8) !important;
  color: #e0f7ff !important;
  box-shadow: 0 0 22px rgba(0, 200, 255, 0.35) !important;
}

/* ── Hide instance URL message ──────────────────────────── */
.api-url-info, .api-config__change-button { display: none !important; }

/* ── Stay logged in ──────────────────────────────────────── */
.noauth-container label.checkbox {
  display: flex !important;
  justify-content: center !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
  color: rgba(100, 170, 210, 0.6) !important;
  text-transform: uppercase !important;
  font-family: ui-monospace, 'Courier New', monospace !important;
  gap: 0.4rem;
}

/* ── Login button — centered ─────────────────────────────── */
.noauth-container form > .button,
.noauth-container .button.is-primary {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
  min-width: 140px !important;
}

/* ── Hide help/validation messages ──────────────────────── */
.noauth-container .help { display: none !important; }

/* ── Placeholders ────────────────────────────────────────── */
input::placeholder { color: transparent !important; }

/* ── "Forgot your password?" ─────────────────────────────── */
.reset-password-link {
  font-size: 0.6rem !important;
  letter-spacing: 0.06em !important;
  opacity: 0.6;
}

/* ── Links & misc text ──────────────────────────────────── */
a { color: #38bdf8 !important; }
p { color: rgba(130, 190, 230, 0.7) !important; font-size: 0.8rem !important; }