:root{
  color-scheme:dark;
  --bg:#07090d;
  --surface:#10131a;
  --surface-2:#0c0f15;
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.15);
  --text:#f5f7fb;
  --muted:#78818f;
  --green:#57e39b;
  --red:#ff667d;
  --amber:#f2bb61;
  --violet:#9e86ff;
  --cyan:#61d8ff;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{
  min-height:100dvh;
  overflow:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%,rgba(112,77,255,.10),transparent 30%),
    radial-gradient(circle at 100% 20%,rgba(53,199,255,.07),transparent 25%),
    #07090d;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:44px 44px;
}
.ambient{
  position:fixed;width:360px;height:360px;border-radius:50%;
  filter:blur(120px);opacity:.08;pointer-events:none
}
.ambient-a{background:#7256ff;left:-200px;top:-130px}
.ambient-b{background:#32c7ff;right:-220px;bottom:-120px}

.shell{
  width:min(1440px,calc(100% - 40px));
  min-height:100dvh;
  margin:0 auto;
  padding:18px 0 14px;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:48px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:44px;height:44px;flex:0 0 44px;border-radius:13px;overflow:hidden;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))
}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.eyebrow{
  font-size:9px;font-weight:800;letter-spacing:.20em;color:#737b8c;margin-bottom:1px
}
h1{margin:0;font-size:17px;letter-spacing:-.025em}

.live-pill{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:999px;
  border:1px solid rgba(87,227,155,.18);
  background:rgba(87,227,155,.055);
  color:#bff5d6;font-size:11px;font-weight:700
}
.pulse-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 12px rgba(87,227,155,.75)
}
.live-pill.degraded{color:#f4ce8d;border-color:rgba(242,187,97,.2);background:rgba(242,187,97,.055)}
.live-pill.degraded .pulse-dot{background:var(--amber)}
.live-pill.down{color:#ffb0bc;border-color:rgba(255,102,125,.2);background:rgba(255,102,125,.055)}
.live-pill.down .pulse-dot{background:var(--red)}

.overview{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  padding:34px 2px 18px;
}
.kicker{
  margin:0 0 5px;font-size:9px;font-weight:800;letter-spacing:.17em;color:#5f6774
}
.overview h2{
  margin:0;font-size:clamp(27px,3vw,42px);line-height:1;letter-spacing:-.055em
}
.overview-meta{
  display:flex;align-items:flex-end;justify-content:flex-end;gap:34px
}
.meta-block span{
  display:block;font-size:9px;color:#626b79;margin-bottom:4px
}
.meta-block strong{
  display:block;font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#cdd1d8
}

.server-tabs{display:none}

.server-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.server-card{
  --accent:var(--violet);
  position:relative;
  overflow:hidden;
  min-width:0;
  background:linear-gradient(180deg,rgba(18,21,28,.96),rgba(10,12,17,.96));
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  box-shadow:0 26px 70px rgba(0,0,0,.25)
}
.server-card:after{
  content:"";position:absolute;width:170px;height:170px;right:-100px;top:-100px;
  border-radius:50%;background:var(--accent);filter:blur(48px);opacity:.055;pointer-events:none
}
.card-head{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px
}
.card-title{min-width:0;display:flex;align-items:center;gap:11px}
.server-icon{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  display:grid;place-items:center;color:#cfd4dc
}
.server-icon svg{width:17px;height:17px}
.card-head h3{margin:0;font-size:20px;letter-spacing:-.035em}
.subtitle{margin-top:2px;font-size:10px;color:#68717e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.status-badge{
  display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;
  font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#8ff0bb;border:1px solid rgba(87,227,155,.14);background:rgba(87,227,155,.045)
}
.status-badge i{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.server-card.degraded .status-badge{color:var(--amber);border-color:rgba(242,187,97,.14);background:rgba(242,187,97,.045)}
.server-card.down .status-badge{color:var(--red);border-color:rgba(255,102,125,.14);background:rgba(255,102,125,.045)}

.server-main{
  margin:18px 0 13px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line)
}
.server-ip{
  font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#69727f
}
.metric-row{
  display:grid;grid-template-columns:auto auto minmax(40px,1fr);gap:18px;align-items:end;
  margin-top:10px
}
.metric small{display:block;font-size:7.5px;color:#616a77;margin-bottom:3px}
.metric strong{display:block;font-size:20px;line-height:1;letter-spacing:-.045em}
.spark{
  height:28px;display:flex;align-items:flex-end;justify-content:flex-end;gap:2px;overflow:hidden
}
.spark span{width:3px;min-height:3px;border-radius:4px;background:#58606d;opacity:.38}
.spark span.ok{background:var(--green);opacity:.7}
.spark span.warn{background:var(--amber);opacity:.8}
.spark span.bad{background:var(--red);opacity:.8}

.checks{display:flex;flex-direction:column;gap:7px}
.check-row{
  min-height:47px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:9px 11px;border:1px solid rgba(255,255,255,.055);
  border-radius:12px;background:rgba(255,255,255,.018)
}
.check-left{min-width:0;display:flex;align-items:center;gap:8px}
.check-dot{
  width:6px;height:6px;flex:0 0 auto;border-radius:50%;
  background:var(--green);box-shadow:0 0 10px rgba(87,227,155,.4)
}
.check-row.down .check-dot{background:var(--red);box-shadow:0 0 10px rgba(255,102,125,.35)}
.check-row.configured .check-dot{background:var(--violet);box-shadow:0 0 10px rgba(158,134,255,.35)}
.check-name{font-size:11px;color:#d0d4da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.check-sub{display:block;margin-top:2px;font-size:8.5px;color:#5f6874;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.check-value{font:500 9.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:#818a97;white-space:nowrap}

.note{
  margin-top:8px;padding:8px 9px;border-radius:10px;
  border:1px solid rgba(158,134,255,.09);background:rgba(158,134,255,.04);
  color:#7e778b;font-size:8.5px;line-height:1.35
}

footer{
  margin-top:auto;
  padding-top:12px;
  display:flex;justify-content:center;align-items:center;gap:8px;
  font-size:8.5px;color:#4f5763
}

/* Phone/tablet: one large card at a time, no micro text. */
@media (max-width:760px){
  .shell{
    width:calc(100% - 18px);
    height:100dvh;
    min-height:100dvh;
    padding:max(10px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom));
  }

  .topbar{min-height:44px}
  .brand-mark{width:40px;height:40px;flex-basis:40px;border-radius:12px}
  h1{font-size:15px}
  .eyebrow{font-size:8px}
  .live-pill{padding:8px 10px;font-size:10px;max-width:48vw}
  #overallText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .overview{
    padding:18px 1px 12px;
    align-items:center
  }
  .kicker{display:none}
  .overview h2{font-size:24px}
  .overview-meta{gap:16px}
  .desktop-domain{display:none}
  .meta-block span{font-size:8px}
  .meta-block strong{font-size:10px}

  .server-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    margin-bottom:9px;
    padding:4px;
    border:1px solid var(--line);
    border-radius:13px;
    background:rgba(255,255,255,.025)
  }
  .server-tab{
    appearance:none;border:0;outline:0;
    padding:9px 8px;border-radius:9px;
    background:transparent;color:#747d8a;
    font:700 11px Inter,system-ui,sans-serif;
    cursor:pointer
  }
  .server-tab.active{
    color:#fff;background:rgba(255,255,255,.075);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.045)
  }

  .server-grid{
    flex:1;
    min-height:0;
    display:block;
  }

  .server-card{
    display:none;
    height:100%;
    min-height:0;
    padding:17px;
    border-radius:20px;
    overflow:hidden;
  }
  .server-card.mobile-active{
    display:flex;
    flex-direction:column;
  }

  .server-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px}
  .server-icon svg{width:18px;height:18px}
  .card-head h3{font-size:22px}
  .subtitle{font-size:11px}
  .status-badge{padding:7px 9px;font-size:8px}

  .server-main{
    margin:18px 0 13px;
    padding-bottom:14px
  }
  .server-ip{font-size:11px}
  .metric-row{
    grid-template-columns:auto auto minmax(60px,1fr);
    gap:20px;margin-top:11px
  }
  .metric small{font-size:8px}
  .metric strong{font-size:22px}
  .spark{height:30px}

  .checks{
    gap:8px;
    overflow:hidden
  }
  .check-row{
    min-height:54px;
    padding:10px 12px;
    border-radius:13px
  }
  .check-name{font-size:12px}
  .check-sub{font-size:9px}
  .check-value{font-size:10px}

  .note{
    font-size:9px;
    padding:8px 10px;
    max-height:47px;
    overflow:hidden
  }

  footer{display:none}
}

@media (max-width:440px){
  .shell{width:calc(100% - 14px)}
  .overview{padding-top:14px}
  .overview h2{font-size:21px}
  .overview-meta{gap:10px}
  .meta-block:first-child span{display:none}
  .meta-block:first-child strong:before{content:"● ";color:var(--green)}
  .server-card{padding:14px}
  .metric-row{gap:14px}
}

/* Landscape phone / very short screen: hide overview but keep readable card. */
@media (max-height:650px) and (max-width:760px){
  .overview{display:none}
  .server-tabs{margin-top:6px}
  .server-card{padding:12px 14px}
  .card-head h3{font-size:18px}
  .server-icon{width:34px;height:34px;flex-basis:34px}
  .server-main{margin:10px 0;padding-bottom:10px}
  .metric strong{font-size:18px}
  .check-row{min-height:43px;padding:7px 10px}
  .note{display:none}
}

/* Desktop cards should never stretch vertically. */
@media (min-width:761px){
  .server-grid{margin-top:2px}
  .server-card{height:auto}
}