:root{
  --ink:#0b120d;
  --muted:rgba(11,18,13,.7);
  --muted-strong:rgba(11,18,13,.55);
  --panel:#f4f8f3;
  --panel-soft:#edf6ef;
  --panel-glass:rgba(244,248,243,.92);
  --stroke:rgba(139,255,106,.45);
  --stroke-2:rgba(255,227,75,.55);
  --accent:#8bff6a;
  --accent-2:#ffe34b;
  --good:#8bff6a;
  --warn:#ffe34b;
  --bad:#ff6e6e;
  --shadow:none;
  --glow:none;
  --card-bg-1:rgba(10,17,12,.82);
  --card-bg-2:rgba(11,18,13,.82);
  --card-ink:#f4ffe9;
  --card-muted:rgba(220,255,205,.8);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:20px;
  --radius-pill:999px;
}

body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  overflow:auto;
  overflow-x:hidden;
  background:#f2f6f0;
}

.topbar{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding:.8rem 1.3rem;
  background:linear-gradient(135deg, var(--card-bg-1), var(--card-bg-2));
  backdrop-filter:none;
  border-bottom:2px solid rgba(139,255,106,.55);
  box-shadow:none;
}

.topbar .brand{color:var(--card-ink);text-decoration:none;font-weight:600;opacity:.9}
.topbar .brand:hover{opacity:1}
.topbar .title{margin:.1rem 0 0;font-size:clamp(1.4rem,3.2vw,2rem);font-weight:800;letter-spacing:.02em;font-family:'Fraunces',serif;color:var(--card-ink)}
.topbar .title::after{content:\"\";display:block;height:2px;width:48px;margin-top:.35rem;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.topbar .spacer{flex:1}
.brand-block{display:flex;flex-direction:column}
.eyebrow{margin:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.25em;color:rgba(220,255,205,.6)}

.wrap{
  position:relative;
  z-index:1;
  padding:0 1.2rem 3rem;
  max-width:1220px;
  margin:0 auto;
}

.hero{
  min-height:0;
  padding:0;
  text-align:left;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
  justify-content:space-between;
  margin:.2rem 0 .4rem;
}

.lead{max-width:620px;margin:0;color:var(--muted);font-size:1.02rem}

.stats{display:flex;gap:.6rem;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .9rem;border-radius:var(--radius-md);border:1px solid var(--stroke);background:linear-gradient(140deg, rgba(245,255,240,.9), rgba(235,248,232,.92));backdrop-filter:none;box-shadow:none}
.stat-value{font-size:1.4rem;font-weight:700;color:var(--ink)}
.stat-label{font-size:.75rem;color:var(--muted-strong);text-transform:uppercase;letter-spacing:.2em}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:flex-end;
  justify-content:space-between;
  margin:.4rem 0 .9rem;
}

.search{display:flex;flex-direction:column;gap:.4rem;color:var(--card-muted);font-size:.85rem}
.search input[type=search]{width:min(380px,100%);padding:.7rem .95rem;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.25);background:linear-gradient(135deg, var(--card-bg-1), var(--card-bg-2));backdrop-filter:none;color:var(--card-ink);outline:none}
.search input::placeholder{color:rgba(220,255,205,.65)}

.filters{display:flex;flex-wrap:wrap;gap:.6rem}
.filter{
  border:1px solid var(--stroke);
  background:#f7fbf5;
  backdrop-filter:none;
  color:var(--ink);
  padding:.4rem .8rem;
  border-radius:var(--radius-pill);
  font-size:.82rem;
  cursor:pointer;
  transition:all .2s ease;
}
.filter.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#0a120f;border-color:transparent}
.filter:hover{border-color:rgba(255,255,255,.3)}

.sections{display:flex;flex-direction:column;gap:2rem}
.section{display:flex;flex-direction:column;gap:1rem}
.section-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.section-title{display:flex;flex-direction:column;gap:.2rem}
.section-title h2{margin:0;font-size:1.4rem;font-weight:700;color:var(--ink)}
.section-title p{margin:0;color:var(--muted)}
.section-count{padding:.25rem .6rem;border-radius:var(--radius-pill);border:1px solid var(--stroke-2);background:#f7fbf5;backdrop-filter:none;font-size:.8rem;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}

.card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--stroke);
  background:linear-gradient(145deg, var(--card-bg-1), var(--card-bg-2));
  backdrop-filter:none;
  padding:1.1rem;
  min-height:170px;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  box-shadow:none;
  transition:transform .25s ease, box-shadow .25s ease;
  animation:rise .5s ease both;
}

.card:hover{transform:translateY(-6px);box-shadow:none}
.card--major{grid-column:span 2;min-height:200px}

.card-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.badge{font-size:.7rem;padding:.25rem .55rem;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:var(--card-ink);text-transform:uppercase;letter-spacing:.12em}

.status{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--muted-strong)}
.status .dot{width:.55rem;height:.55rem;border-radius:50%}
.status-online .dot{background:var(--good)}
.status-offline .dot{background:var(--bad)}
.status-unknown .dot{background:var(--warn)}
.status-online{color:var(--good)}
.status-unknown{color:var(--warn)}

.card h3{margin:0;font-size:1.12rem;color:var(--card-ink)}
.card p{margin:0;color:var(--card-muted)}

.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{padding:.2rem .45rem;border-radius:var(--radius-xs);font-size:.75rem;border:1px solid var(--stroke-2);color:var(--card-muted)}

.meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;color:var(--card-muted);font-size:.8rem}

.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.actions a{border:1px solid rgba(255,255,255,.25);padding:.45rem .75rem;border-radius:var(--radius-sm);color:var(--card-ink);background:rgba(255,255,255,.08);text-decoration:none;cursor:pointer}
.actions a:hover{background:rgba(255,255,255,.16);border-color:var(--accent)}

.empty{opacity:.8;text-align:center;margin-top:2rem}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:900px){
  .card--major{grid-column:span 1}
  .controls{align-items:stretch}
  .search input[type=search]{width:100%}
}

@media (max-width:600px){
  .topbar{flex-direction:column;align-items:flex-start}
  .hero{align-items:flex-start}
  .stats{width:100%}
  .stat{flex:1}
}

@media (hover:none){
  .card:hover{transform:none}
}