/* ============ shared tokens & base ============ */
:root{
  --bg:#0a0b0d;
  --surface:#111317;
  --surface-2:#15171c;
  --border:#1f2228;
  --text:#e6e8eb;
  --muted:#767c85;
  --accent:#56e1ff;
  --accent-dim:rgba(86,225,255,.10);
  --green:#3ddc84;
  --yellow:#f5c542;
  --red:#f0555a;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
  z-index:0;
}

a{ color:var(--accent); }

/* ---------- card ---------- */
.card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:32px 28px;
}

/* ---------- badges ---------- */
.badges{ display:flex; flex-wrap:wrap; gap:6px; }
.badge{
  font-size:11px;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:var(--surface-2);
}

/* ---------- pulse divider (signature element) ---------- */
.pulse-divider{
  position:relative;
  height:1px;
  background:var(--border);
  margin:20px 0;
  overflow:hidden;
}
.pulse-divider .pulse{
  position:absolute;
  top:-1px; left:-20%;
  width:18%; height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  filter:blur(1px);
  opacity:0;
  animation:travel 4.5s ease-in-out infinite;
}
.pulse-divider.delay .pulse{ animation-delay:1.4s; }
@keyframes travel{
  0%{ left:-20%; opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}

/* ---------- form controls (used by /admin) ---------- */
label{ display:block; font-size:11px; color:var(--muted); margin-bottom:4px; }
input, textarea, button{ font-family:var(--mono); font-size:13px; }
input[type="text"], input[type="password"], input[type="url"], textarea{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  padding:8px 10px;
  outline:none;
}
input:focus, textarea:focus{ border-color:var(--accent); }
textarea{ resize:vertical; min-height:64px; }

button{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  padding:8px 14px;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
button:hover, button:focus-visible{ border-color:var(--accent); color:var(--accent); outline:none; }
button.primary{ border-color:var(--accent); color:var(--accent); }
button.danger:hover{ border-color:var(--red); color:var(--red); }

@media (prefers-reduced-motion: reduce){
  .pulse-divider .pulse{ animation:none !important; }
}