:root {
  --bg: #070b1f;
  --bg-2: #0d1537;
  --glass: rgba(255, 255, 255, 0.08);
  --text: #e9eeff;
  --muted: #abbbef;
  --accent: #7c9bff;
  --accent-2: #57f0ce;
  --border: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(circle at 10% 0%, #1a2461, var(--bg) 50%);
  color: var(--text);
  min-height: 100vh;
  padding: 2rem 1.25rem 4rem;
}

.aurora {
  position: fixed;
  z-index: -1;
  filter: blur(80px);
  opacity: 0.45;
  border-radius: 999px;
}
.aurora-a { width: 320px; height: 320px; background: #6d76ff; top: -80px; left: -120px; }
.aurora-b { width: 360px; height: 360px; background: #26e0cb; right: -100px; bottom: -80px; }

main, .hero {
  max-width: 1240px;
  margin: 0 auto;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  border-radius: 18px;
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  padding: 1.25rem;
  margin-bottom: 1.2rem;
}
.kicker { margin: 0; color: var(--accent-2); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
h1 { margin: .25rem 0 .6rem; font-size: clamp(1.4rem, 3vw, 2.25rem); }
.sub { margin: 0; color: var(--muted); max-width: 76ch; }
.pill { background: rgba(124,155,255,.18); border: 1px solid rgba(124,155,255,.45); padding: .4rem .8rem; border-radius: 999px; font-size: .85rem; white-space: nowrap; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .8rem;
  margin: 1rem auto;
  max-width: 1240px;
}
.kpi {
  padding: .9rem;
}
.kpi .label { color: var(--muted); font-size: .82rem; }
.kpi .value { font-size: 1.45rem; font-weight: 800; margin-top: .3rem; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .9rem;
  max-width: 1240px;
  margin: 0 auto;
}
.panel { padding: 1rem; margin-top: .9rem; }
.panel h2 { margin: 0 0 .7rem; font-size: 1.05rem; }

.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem;
}
.user-card {
  padding: .85rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(8, 11, 27, .5);
}
.user-head { display: flex; gap: .7rem; }
.avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.3);
}
.name { margin: 0; font-size: 1rem; }
.muted { color: var(--muted); margin: .1rem 0; font-size: .82rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.chip-row { margin-top: .65rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font-size: .73rem;
  background: rgba(124,155,255,.17);
  border: 1px solid rgba(124,155,255,.4);
  border-radius: 999px;
  padding: .2rem .56rem;
}

.sets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .75rem; }
.set-card { padding: .8rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(8, 11, 27, .5); }
.set-title-row { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.set-title { margin: 0; font-size: 1rem; }
.scope-badge { font-size: .72rem; padding: .15rem .4rem; border-radius: 999px; border: 1px solid rgba(87,240,206,.4); color: #bff8eb; }
.set-metadata { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.meta { font-size: .72rem; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: .2rem .4rem; }

canvas { max-height: 320px; }
code { color: #c4d2ff; }

@media (max-width: 640px) {
  .hero { flex-direction: column; }
}