:root {
  color-scheme: light dark;
  --bg: #0b0d12; --panel: #141821; --line: #232936;
  --text: #e8ecf4; --muted: #94a0b5; --accent: #6d8cff;
  --ok: #4ade80; --down: #ff6b6b; --radius: 14px;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f5f7fb; --panel:#fff; --line:#e2e7f0; --text:#131722; --muted:#5d6880; --accent:#3457e8; }
}
* { box-sizing: border-box; }
body {
  margin:0; padding:2rem 1.25rem; background:var(--bg); color:var(--text);
  font:15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.shell { max-width: 74rem; margin: 0 auto; }
a { color: var(--accent); text-decoration: none; }

.brand { display:inline-flex; align-items:center; gap:.55rem; color:var(--text); font-weight:600; }
.brand-mark {
  display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:9px;
  background:var(--accent); color:#fff; font-weight:700;
}
.brand-mark.big { width:3.2rem; height:3.2rem; font-size:1.5rem; margin:0 auto 1rem; }

.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.4rem; margin-bottom:1.25rem;
}
.who { display:flex; align-items:center; gap:.75rem; }
.who-text { display:flex; flex-direction:column; line-height:1.25; }
.avatar {
  display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700; overflow:hidden;
}
.avatar img { width:100%; height:100%; object-fit:cover; }

.stats { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); margin-bottom:1.5rem; }
.stat {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.2rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.stat-label { color:var(--muted); font-size:.82rem; }
.stat-value { font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; }
.of { font-size:.9rem; color:var(--muted); font-weight:500; }

.group { margin-bottom:1.75rem; }
.group h2 { margin:0 0 .8rem; font-size:1rem; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.tiles { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); }
.tile {
  display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.1rem 1.2rem; color:var(--text);
  transition:border-color .15s, transform .15s;
}
.tile:hover { border-color:var(--accent); transform:translateY(-2px); }
.tile-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.tile h3 { margin:0 0 .35rem; font-size:1rem; }
.tile p { margin:0 0 .6rem; color:var(--muted); font-size:.88rem; }
.dot { width:.6rem; height:.6rem; border-radius:50%; flex:0 0 auto; }
.dot.up { background:var(--ok); }
.dot.down { background:var(--down); }
.badge {
  display:inline-block; padding:.12rem .5rem; border-radius:999px; font-size:.75rem;
  background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent);
}

.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem; max-width:28rem; margin:3rem auto;
}
.card.center { text-align:center; }
h1 { margin:0 0 .4rem; font-size:1.5rem; }
.sub { margin:0 0 1.5rem; color:var(--muted); }
.muted { color:var(--muted); font-size:.9rem; }

button, .primary, .ghost {
  padding:.65rem 1.1rem; border:1px solid transparent; border-radius:10px;
  font:inherit; font-weight:600; cursor:pointer; display:inline-block;
}
.primary { background:var(--accent); color:#fff; }
.primary.block { display:block; width:100%; }
.ghost { background:transparent; border-color:var(--line); color:var(--text); }
.small { padding:.4rem .8rem; font-size:.85rem; }
.alert {
  padding:.6rem .8rem; border-radius:9px; font-size:.9rem;
  background:color-mix(in srgb, var(--down) 15%, transparent); color:var(--down);
}
.preview { margin-top:1.75rem; border-top:1px solid var(--line); padding-top:1.25rem; }
.preview-list { list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.preview-list li { padding:.2rem .6rem; border:1px solid var(--line); border-radius:999px; font-size:.82rem; color:var(--muted); }

.foot { margin-top:2rem; color:var(--muted); font-size:.82rem; text-align:center; }

@media (max-width:34rem) {
  .topbar { flex-wrap:wrap; }
  .who { width:100%; }
}