:root{
  --bg:#0a0d13;
  --panel:#10151f;
  --panel-2:#151b27;
  --border:rgba(255,255,255,.08);
  --text:#f4f7fb;
  --muted:#8f9bad;
  --accent:#7aa2ff;
  --good:#49d17d;
  --bad:#ff6376;
  --warn:#f4c15d;
  --shadow:0 18px 45px rgba(0,0,0,.24);
}

[data-theme="light"]{
  --bg:#eef2f7;
  --panel:#ffffff;
  --panel-2:#f7f9fc;
  --border:rgba(15,23,42,.09);
  --text:#101827;
  --muted:#667085;
  --shadow:0 14px 38px rgba(32,45,70,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% -10%, rgba(91,128,255,.14), transparent 32%),
    radial-gradient(circle at 90% 5%, rgba(90,220,170,.08), transparent 26%),
    var(--bg);
  transition:background .2s ease,color .2s ease;
}

a{color:inherit}
button,input{font:inherit}

.bg-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg,var(--border) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}

.topbar{
  max-width:1500px;
  margin:0 auto;
  padding:44px 34px 20px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  position:relative;
}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.18em;
  font-weight:800;
  color:var(--accent);
  margin-bottom:9px;
}
.topbar h1{
  margin:0;
  font-size:clamp(2rem,4vw,3.7rem);
  line-height:1;
  letter-spacing:-.045em;
}
.topbar p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:1rem;
}
.top-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.clock-wrap{text-align:right}
#clock{
  font-size:1.25rem;
  font-weight:760;
  letter-spacing:-.03em;
}
#date{
  margin-top:3px;
  font-size:.82rem;
  color:var(--muted);
}

.icon-btn,.small-btn,.collapse-btn{
  border:1px solid var(--border);
  color:var(--text);
  background:var(--panel);
  cursor:pointer;
  box-shadow:var(--shadow);
}
.icon-btn{
  width:36px;height:36px;
  border-radius:13px;
  font-size:1.2rem;
}
.small-btn{
  border-radius:10px;
  padding:9px 13px;
  font-size:.82rem;
  font-weight:700;
}
.icon-btn:hover,.small-btn:hover,.collapse-btn:hover{
  background:var(--panel-2);
}

.shell{
  max-width:1500px;
  margin:0 auto;
  padding:0 34px 48px;
  position:relative;
}
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px;
  margin:12px 0 34px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.search-box{
  min-width:280px;
  flex:1;
  max-width:680px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:12px;
}
.search-box span{color:var(--muted);font-size:1.15rem}
.search-box input{
  width:100%;
  padding:11px 0;
  color:var(--text);
  background:transparent;
  border:0;
  outline:0;
}
.search-box input::placeholder{color:var(--muted)}
kbd{
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:6px;
  padding:2px 7px;
  font-size:.72rem;
}
.toolbar-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.stat{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  color:var(--muted);
  font-size:.82rem;
}
.stat strong{color:var(--text)}
.status-dot,.health-dot{
  width:8px;height:8px;
  border-radius:99px;
  display:inline-block;
}
.status-dot.online,.health-dot.online{background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 13%,transparent)}
.status-dot.offline,.health-dot.offline{background:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 13%,transparent)}
.health-dot.checking{background:var(--warn);animation:pulse 1s infinite alternate}
@keyframes pulse{from{opacity:.45}to{opacity:1}}

.group{margin:0 0 36px}
.group-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 2px 14px;
}
.group-heading>div{display:flex;align-items:baseline;gap:10px}
.group-heading h2{
  font-size:1rem;
  margin:0;
  letter-spacing:.01em;
}
.group-heading span{
  color:var(--muted);
  font-size:.78rem;
}
.collapse-btn{
  width:32px;height:32px;
  border-radius:9px;
  box-shadow:none;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(var(--columns),minmax(0,1fr));
  gap:14px;
}
.service-card{
  min-height:132px;
  padding:14px;
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:18px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,white 4%),var(--panel));
  box-shadow:0 1px 0 rgba(255,255,255,.03),0 10px 26px rgba(0,0,0,.10);
  display:flex;
  flex-direction:column;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
  overflow:hidden;
  position:relative;
}
.service-card::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 60%,transparent),transparent);
  opacity:.45;
}
.service-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 32%,var(--border));
  box-shadow:0 16px 38px rgba(0,0,0,.20);
}
.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.service-icon{
  --accent:#7aa2ff;
  width:36px;height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb,var(--accent) 13%,var(--panel-2));
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
  overflow:hidden;
}
.service-icon img{
  width:21px;height:21px;
  object-fit:contain;
}
.fallback-icon{
  width:100%;height:100%;
  display:grid;
  place-items:center;
  color:var(--accent);
  font-weight:900;
}
.health{
  display:flex;
  gap:7px;
  align-items:center;
  color:var(--muted);
  font-size:.72rem;
}
.card-body{margin-top:10px}
.card-body h3{
  font-size:1rem;
  margin:0 0 6px;
}
.card-body p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
  font-size:.82rem;
  min-height:36px;
}
.card-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:auto;
  padding-top:10px;
  color:var(--muted);
  font-size:.72rem;
}
.host{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.arrow{font-size:1rem}
.hidden{display:none!important}
.empty{
  text-align:center;
  padding:70px 20px;
  color:var(--muted);
}
.empty h2{color:var(--text)}

footer{
  max-width:1500px;
  margin:0 auto;
  padding:0 34px 28px;
  color:var(--muted);
  font-size:.72rem;
  display:flex;
  gap:8px;
  justify-content:center;
}

.group.collapsed .card-grid{display:none}
.group.collapsed{margin-bottom:18px}

@media(max-width:1150px){
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:850px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar{align-items:stretch;flex-direction:column}
  .toolbar-right{justify-content:flex-end}
}
@media(max-width:580px){
  .topbar{padding:28px 18px 18px}
  .top-actions{align-items:flex-end}
  .clock-wrap{display:none}
  .shell{padding:0 18px 40px}
  .card-grid{grid-template-columns:1fr}
  .search-box{min-width:0;max-width:none}
  .toolbar-right{justify-content:space-between}
  footer{padding-left:18px;padding-right:18px}
}