:root {
  --bg: #0b0f14;
  --bg-card: #131a22;
  --bg-card-2: #1a232e;
  --fg: #e6edf3;
  --fg-muted: #8b98a5;
  --accent: #4cc2ff;
  --danger: #ff6b6b;
  --ok: #3fb950;
  --warn: #d29922;
  --border: #263340;
  --alloc: #2f6feb;
  --avail: #3fb950;
  --reserved: #d29922;
  --special: #6e7681;
  --other: #3a4652;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

header {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  background: linear-gradient(180deg, #10161d, var(--bg));
}
header h1 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(63,185,80,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(63,185,80,.5); }
  70% { box-shadow: 0 0 0 9px rgba(63,185,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); }
}
.tagline { margin: 6px 0 0; color: var(--fg-muted); font-size: .9rem; }

main { padding: 28px 0 60px; }
section { margin-bottom: 28px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.muted { color: var(--fg-muted); font-size: .85rem; margin: 4px 0 14px; }

/* Hero */
.hero { text-align: center; padding: 34px 20px; }
.hero-label { color: var(--fg-muted); margin: 0 0 10px; font-size: .95rem; }
.hero-counter {
  font-size: clamp(2.1rem, 7vw, 4.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1.1;
}
.hero-sub { color: var(--fg-muted); margin: 8px 0 0; }
.hero-meta {
  display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
  margin-top: 16px; font-size: .85rem; color: var(--fg-muted);
}
.hero-meta span { background: var(--bg-card-2); padding: 6px 12px; border-radius: 8px; }

/* RIR grid */
.rir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.rir {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.rir h3 { margin: 0 0 4px; font-size: .95rem; }
.rir .avail {
  font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff;
}
.rir .row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--fg-muted); margin-top: 4px; }
.rir .proj { margin-top: 10px; font-size: .8rem; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .72rem; }
.badge.empty { background: rgba(255,107,107,.15); color: var(--danger); }
.badge.stable { background: rgba(63,185,80,.15); color: var(--ok); }
.badge.shrink { background: rgba(210,153,34,.15); color: var(--warn); }

/* Stacked bar */
.stackbar {
  display: flex; height: 34px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.stackbar > div { height: 100%; }
.legend { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .82rem; }
.legend li { display: flex; align-items: center; gap: 7px; color: var(--fg-muted); }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.chart-box { position: relative; height: 320px; }

/* IPv6 */
.ipv6 h3 { font-size: .92rem; margin: 22px 0 10px; }
.ipv6-head {
  display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.ipv6-big {
  font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 700;
  font-variant-numeric: tabular-nums; color: #7ee787; line-height: 1;
}
.ipv6-meta { display: flex; flex-direction: column; gap: 8px; font-size: .85rem; color: var(--fg-muted); }
.ipv6-meta span { background: var(--bg-card-2); padding: 6px 12px; border-radius: 8px; }

.barlist { list-style: none; margin: 0; padding: 0; }
.barlist li {
  display: grid; grid-template-columns: 150px 1fr 62px; align-items: center;
  gap: 10px; padding: 5px 0; font-size: .85rem;
}
.barlist .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barlist .track { background: var(--bg-card-2); border-radius: 5px; height: 14px; overflow: hidden; }
.barlist .fill { height: 100%; background: linear-gradient(90deg, #2ea043, #7ee787); }
.barlist .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-muted); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 108px 1fr; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.timeline li:last-child { border-bottom: 0; }
.timeline .date { color: var(--accent); font-variant-numeric: tabular-nums; font-size: .85rem; }

footer {
  border-top: 1px solid var(--border);
  padding: 22px 0 40px;
  color: var(--fg-muted);
  font-size: .82rem;
}
footer p { margin: 4px 0; }
a { color: var(--accent); }