/* Nexus — shared styles. Black surfaces, one saturated accent. */

:root{
  --bg:#08070a;
  --panel:#0d0b11;
  --card:#131018;
  --card-hi:#191521;
  --stroke:#221f2a;
  --stroke-hi:#332e40;
  --txt:#f2edf5;
  --sub:#8a8296;
  --faint:#544d61;
  --pink:#ff4fa3;
  --pink-deep:#e0348a;
  --pink-dark:#8c1f55;
  --green:#4ade80;
  --amber:#fbbf24;
  --red:#ff6b6b;
  --r:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt);
  font-family:Inter,-apple-system,system-ui,"Segoe UI",sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit}
img{display:block}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px; position:relative}
.narrow{max-width:760px}

/* ── bloom ─────────────────────────────────────────────────────────────── */
.bloom{position:fixed; inset:0; pointer-events:none; z-index:0}
.bloom::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(900px 500px at 50% -12%, rgba(255,79,163,.12) 0%, rgba(255,79,163,.04) 40%, transparent 65%);
}
.wrap,nav,footer{position:relative; z-index:1}

/* ── nav ───────────────────────────────────────────────────────────────── */
nav{display:flex; align-items:center; gap:13px; padding:20px 24px; max-width:1120px; margin:0 auto}
nav .brand{display:flex; align-items:center; gap:11px; text-decoration:none}
nav .brand img{width:30px; height:30px}
nav .brand span{font-weight:700; letter-spacing:.07em; font-size:15px}
nav .links{margin-left:auto; display:flex; gap:22px; align-items:center}
nav .links a{color:var(--sub); text-decoration:none; font-size:14px; transition:color .15s}
nav .links a:hover{color:var(--txt)}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:999px; text-decoration:none; cursor:pointer;
  font-weight:600; font-size:14.5px; border:1px solid transparent;
  font-family:inherit;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s;
}
.btn-primary{background:var(--pink); color:#12040b; box-shadow:0 8px 30px -10px rgba(255,79,163,.65)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 40px -10px rgba(255,79,163,.8)}
.btn-ghost{background:var(--card); color:var(--txt); border-color:var(--stroke)}
.btn-ghost:hover{border-color:var(--stroke-hi); transform:translateY(-2px)}
.btn-sm{padding:8px 15px; font-size:13px}
.btn-danger{background:rgba(255,107,107,.12); color:var(--red); border-color:rgba(255,107,107,.3)}
.btn-danger:hover{background:rgba(255,107,107,.2)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none!important}

/* ── cards ─────────────────────────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--stroke);
  border-radius:var(--r); padding:24px;
}
.card-hover{transition:transform .15s ease, border-color .15s ease}
.card-hover:hover{transform:translateY(-3px); border-color:var(--stroke-hi)}

/* ── role badges ───────────────────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 11px; border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.03em;
}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge-owner  {background:rgba(255,79,163,.14); color:var(--pink)}
.badge-staff  {background:rgba(96,165,250,.14); color:#60a5fa}
.badge-beta   {background:rgba(251,191,36,.14); color:var(--amber)}
.badge-premium{background:rgba(74,222,128,.14); color:var(--green)}
.badge-free   {background:rgba(138,130,150,.13); color:var(--sub)}
.badge-banned {background:rgba(255,107,107,.14); color:var(--red)}

/* ── forms ─────────────────────────────────────────────────────────────── */
label{display:block; font-size:11.5px; color:var(--faint);
      letter-spacing:.09em; text-transform:uppercase; margin-bottom:8px}
input,select,textarea{
  width:100%; padding:12px 14px; font-size:14.5px;
  background:#0c0a10; border:1px solid var(--stroke); border-radius:10px;
  color:var(--txt); font-family:inherit; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,79,163,.15);
}
input::placeholder{color:var(--faint)}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; letter-spacing:.06em}

/* ── tables ────────────────────────────────────────────────────────────── */
table{width:100%; border-collapse:collapse; font-size:14px}
th{
  text-align:left; padding:11px 14px; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--stroke);
  font-weight:600;
}
td{padding:13px 14px; border-bottom:1px solid var(--stroke); vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--card-hi)}

/* ── misc ──────────────────────────────────────────────────────────────── */
.muted{color:var(--sub)}
.faint{color:var(--faint)}
.small{font-size:13px}
.row{display:flex; align-items:center; gap:12px}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px}
.stack{display:flex; flex-direction:column; gap:14px}
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.hr{height:1px; background:var(--stroke); margin:26px 0}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--card); border:1px solid var(--stroke); border-radius:12px;
  padding:13px 20px; font-size:14px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:100;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(255,107,107,.4); color:#ffb3b3}
.toast.ok{border-color:rgba(74,222,128,.4); color:#a7f3c4}

footer{
  border-top:1px solid var(--stroke); margin-top:70px; padding:26px 24px 48px;
  color:var(--faint); font-size:13px;
}
footer .inner{max-width:1120px; margin:0 auto; display:flex; gap:20px; flex-wrap:wrap; align-items:center}
footer a{color:var(--faint); text-decoration:none}
footer a:hover{color:var(--sub)}
footer .sp{margin-left:auto}

.spinner{
  width:16px; height:16px; border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--pink); border-radius:50%;
  animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

.empty{text-align:center; padding:50px 20px; color:var(--faint)}