*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #ffffff;
  min-height: 100vh;
}

#star-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

/* ── Key overlay ── */
#key-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
#key-overlay.hidden { display: none; }
.key-box {
  background: #1a1d27; border: 1px solid #2d3148; border-radius: 12px;
  padding: 2rem; width: 360px; display: flex; flex-direction: column; gap: 1rem;
}
.key-box h2 { font-size: 1.1rem; color: #a0aec0; }
.key-box input {
  background: #0f1117; border: 1px solid #2d3148; border-radius: 8px;
  color: #e2e8f0; font-size: 1rem; padding: 0.6rem 0.8rem; outline: none;
}
.key-box input:focus { border-color: #5a67d8; }
.key-box button {
  background: #5a67d8; border: none; border-radius: 8px;
  color: #fff; cursor: pointer; font-size: 1rem; padding: 0.6rem;
}
.key-box button:hover { background: #4c57c4; }
#key-error { color: #fc8181; font-size: 0.875rem; display: none; }

/* ── Toast ── */
#toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: #16a34a; color: #ffffff;
  border-radius: 8px; font-size: 0.875rem; font-weight: 600;
  padding: 0.5rem 1.1rem; opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none; z-index: 9999;
}
#toast.error { background: #dc2626; }
#toast.show { opacity: 1; }

/* ── Badges ── */
.badge {
  border-radius: 9999px; display: inline-block;
  font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.65rem;
}
.badge-success   { background: rgba(0,255,160,0.12);  color: #00ffa0; border: 1px solid rgba(0,255,160,0.25); }
.badge-error     { background: rgba(255,60,60,0.12);   color: #ff6060; border: 1px solid rgba(255,60,60,0.25); }
.badge-cancelled { background: rgba(255,170,0,0.12);   color: #ffaa00; border: 1px solid rgba(255,170,0,0.3); }

.portal-tag {
  background: rgba(0,170,255,0.1); border: 1px solid rgba(0,170,255,0.25);
  border-radius: 6px; color: #00aaff; font-size: 0.8rem; padding: 0.15rem 0.5rem;
}

/* ── Run type badges ── */
.badge-run-read {
  background: rgba(0,170,255,0.15); border: 1px solid rgba(0,170,255,0.4);
  color: #00aaff; border-radius: 4px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; padding: 0.1rem 0.4rem; white-space: nowrap;
  display: inline-block; vertical-align: middle;
}
.badge-run-write {
  background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.4);
  color: #c084fc; border-radius: 4px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; padding: 0.1rem 0.4rem; white-space: nowrap;
  display: inline-block; vertical-align: middle;
}