/* MRGEEK OPS — Mission Control theme */
:root{
  --bg:#04070b; --bg2:#070c12;
  --grid:rgba(0,255,157,.045);
  --green:#00ff9d; --red:#ff3860; --amber:#ffb020;
  --txt:#c8d6e5; --dim:#5c6b7a; --card:#0a1118;
  --line:rgba(0,255,157,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(0,255,157,.06), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(0,120,255,.05), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 30%, black 30%, transparent 85%);
}
.mono{font-family:ui-monospace,"JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace}
.dim{color:var(--dim)}

/* scanlines overlay */
.scanlines{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);}
.scanlines::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%);}

/* ---------- topbar ---------- */
.topbar{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(4,7,11,.9),rgba(4,7,11,.65));
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:10px}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2.4s infinite}
.brand-name{font-weight:800;letter-spacing:.22em;font-size:15px;color:#e8f6ef}
.brand-name .dim{font-weight:300;margin:0 2px}
.brand-sub{font-size:10px;letter-spacing:.34em;color:var(--green);border:1px solid var(--line);padding:3px 8px;border-radius:3px;background:rgba(0,255,157,.05)}
.top-right{display:flex;align-items:center;gap:18px}
.sync{display:flex;align-items:center;gap:8px}
.sync-ring{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--green);animation:spin 1s linear infinite}
.sync-ring.ok{animation:none;background:var(--green);border-color:var(--green);box-shadow:0 0 8px var(--green)}
.sync-txt{font-size:10px;letter-spacing:.2em;color:var(--dim)}
.clock{font-size:15px;color:#d7efe4;letter-spacing:.08em}

/* ---------- banner ---------- */
.banner{
  position:relative;z-index:2;margin:22px 26px 6px;border:1px solid var(--line);border-radius:10px;
  padding:18px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(90deg,rgba(0,255,157,.10),rgba(0,255,157,.02) 55%),var(--card);
  box-shadow:0 0 30px rgba(0,255,157,.07), inset 0 0 60px rgba(0,255,157,.03);
}
.banner.down{background:linear-gradient(90deg,rgba(255,56,96,.14),rgba(255,56,96,.02) 55%),var(--card);border-color:rgba(255,56,96,.4);box-shadow:0 0 30px rgba(255,56,96,.12)}
.banner-txt{font-size:clamp(17px,2.6vw,26px);font-weight:800;letter-spacing:.16em;color:var(--green);text-shadow:0 0 18px rgba(0,255,157,.55)}
.banner.down .banner-txt{color:var(--red);text-shadow:0 0 18px rgba(255,56,96,.6);animation:blink 1.6s infinite}
.banner-meta{font-size:11px;color:var(--dim);text-align:right;line-height:1.7}

/* ---------- grid / cards ---------- */
main{position:relative;z-index:2;padding:14px 26px 30px;max-width:1500px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.card{
  background:linear-gradient(180deg,rgba(10,17,24,.92),rgba(7,12,18,.92));
  border:1px solid rgba(200,214,229,.08);border-radius:12px;padding:16px 18px 14px;
  position:relative;overflow:hidden;transition:border-color .25s, box-shadow .25s;
}
.card.up{border-color:rgba(0,255,157,.18)}
.card.up:hover{box-shadow:0 0 24px rgba(0,255,157,.08)}
.card.down{border-color:rgba(255,56,96,.45);box-shadow:0 0 26px rgba(255,56,96,.12)}
.card.warn{border-color:rgba(255,176,32,.35)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.card-title{font-weight:700;letter-spacing:.12em;font-size:13px;color:#e6f2ec}
.badge{font-size:9px;letter-spacing:.18em;padding:3px 7px;border-radius:3px;border:1px solid var(--line);color:var(--dim);background:rgba(0,255,157,.04)}
.badge.port{border-color:rgba(0,140,255,.25);color:#6fb7ff}
.badge.push{border-color:rgba(255,176,32,.3);color:var(--amber)}
.dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.dot.up{background:var(--green);box-shadow:0 0 10px var(--green)}
.dot.down{background:var(--red);box-shadow:0 0 12px var(--red);animation:pulse 1s infinite}
.dot.warn{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.dot.pend{background:#3a4a5a}
.card-body{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:6px 0 10px}
.ping{font-size:30px;font-weight:700;color:#eafaf2;text-shadow:0 0 14px rgba(0,255,157,.35)}
.ping small{font-size:12px;color:var(--dim);font-weight:400;margin-left:4px}
.card.down .ping{color:#ffd7de;text-shadow:0 0 14px rgba(255,56,96,.4)}
.upt{font-size:10px;color:var(--dim);text-align:right;line-height:1.8}
.upt b{color:#bfe9d8;font-weight:600}
.spark{width:100%;height:36px;display:block;margin-bottom:8px}
.spark polyline{fill:none;stroke:var(--green);stroke-width:1.6;filter:drop-shadow(0 0 4px rgba(0,255,157,.7))}
.spark .area{fill:rgba(0,255,157,.08)}
.sparkline-off{height:36px;display:flex;align-items:center;color:var(--dim);font-size:10px;letter-spacing:.15em;margin-bottom:8px}
.bars{display:flex;gap:2px;align-items:flex-end;height:26px}
.bars i{flex:1 1 0;min-width:2px;max-width:7px;height:100%;border-radius:1px;background:#141d28;position:relative}
.bars i.g{background:rgba(0,255,157,.85);box-shadow:0 0 4px rgba(0,255,157,.25)}
.bars i.g2{background:rgba(0,255,157,.38)}
.bars i.a{background:rgba(255,176,32,.85)}
.bars i.r{background:rgba(255,56,96,.9);box-shadow:0 0 4px rgba(255,56,96,.4)}
.card-foot{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--dim)}
.card .err{margin-top:8px;font-size:10.5px;color:#ff8ba1;background:rgba(255,56,96,.08);border:1px solid rgba(255,56,96,.25);border-radius:5px;padding:5px 8px}

/* ---------- probe strip ---------- */
.panel{margin-top:20px;border:1px solid rgba(200,214,229,.09);border-radius:12px;background:rgba(8,13,19,.75);padding:14px 18px}
.panel-head{margin-bottom:10px}
.panel-title{font-size:11px;letter-spacing:.24em;color:#9fb3c4}
.probe-strip{display:flex;flex-wrap:wrap;gap:10px}
.probe{display:flex;align-items:center;gap:8px;border:1px solid rgba(200,214,229,.1);border-radius:7px;padding:7px 12px;font-size:11px;background:rgba(10,17,24,.7)}
.probe .pd{width:8px;height:8px;border-radius:50%}
.probe .pd.up{background:var(--green);box-shadow:0 0 8px var(--green)}
.probe .pd.down{background:var(--red);box-shadow:0 0 8px var(--red)}
.probe .pm{color:var(--dim)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;display:flex;gap:10px;justify-content:center;padding:14px 20px 22px;font-size:10px;color:var(--dim);letter-spacing:.06em}

/* ---------- anims ---------- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:640px){.topbar{padding:12px 14px}.banner{margin:14px 14px 4px;flex-direction:column;align-items:flex-start}main{padding:12px 14px 24px}.clock{font-size:13px}}