:root{
  --bg:          #0B1622;
  --bg-deep:     #081018;
  --panel:       #101F30;
  --hairline:    rgba(234,242,250,.09);
  --text:        #EAF2FA;
  --muted:       #7C93AD;
  --muted-dim:   #4E617A;

  --down-a:      #33C2FF;
  --down-b:      #7C5CFC;
  --up:          #FF9A5A;
  --ok:          #34D399;

  --track:       rgba(234,242,250,.07);

  --font-ar:     'Tajawal', 'Segoe UI', sans-serif;
  --font-num:    'Space Grotesk', 'Tajawal', sans-serif;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ar);
  min-height:100vh;
  overflow-x:hidden;
}

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- background fiber lines ---------- */
.scene{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 50% -8%, rgba(124,92,252,.16), transparent 60%),
    radial-gradient(ellipse 55% 40% at 100% 100%, rgba(51,194,255,.10), transparent 60%),
    var(--bg);
}
.fiber{ width:100%; height:100%; }
.fiber-path{
  fill:none;
  stroke-width:1.4;
  opacity:.35;
}
.fiber-path--a{
  stroke:url(#gradA);
  stroke:var(--down-a);
  opacity:.18;
  animation:drift 22s ease-in-out infinite;
}
.fiber-path--b{
  stroke:var(--up);
  opacity:.10;
  animation:drift 26s ease-in-out infinite reverse;
}
@keyframes drift{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(18px); }
}

/* ---------- topbar ---------- */
.topbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.2px;
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--down-a),var(--down-b));
  color:#081018;
  font-size:14px;
  font-weight:900;
}
.server-tag{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:var(--muted);
  background:var(--panel);
  border:1px solid var(--hairline);
  padding:6px 12px;
  border-radius:100px;
}
.server-tag .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px rgba(52,211,153,.18);
  flex-shrink:0;
}
.server-tag.offline .dot{ background:#E4574C; box-shadow:0 0 0 3px rgba(228,87,76,.18); }

/* ---------- stage ---------- */
.stage{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 20px 8px;
  gap:30px;
}

/* ---------- gauge ---------- */
.gauge-wrap{
  position:relative;
  width:min(74vw, 300px);
  aspect-ratio:1;
}
.gauge{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.gauge-track{
  fill:none;
  stroke:var(--track);
  stroke-width:10;
}
.gauge-arc{
  fill:none;
  stroke:url(#downGrad);
  stroke-width:10;
  stroke-linecap:round;
  stroke-dasharray:930;
  stroke-dashoffset:930;
  transition:stroke-dashoffset .45s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 0 6px rgba(51,194,255,.35));
}
.gauge-arc--upload{
  stroke:var(--up);
  stroke-width:6;
  stroke-dasharray:792;
  stroke-dashoffset:792;
  opacity:.85;
  filter:drop-shadow(0 0 5px rgba(255,154,90,.3));
}

.gauge-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
}
.gauge-phase{
  font-size:12.5px;
  color:var(--muted);
  min-height:16px;
}
.gauge-value{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-family:var(--font-num);
}
.gauge-number{
  font-size:52px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1;
  background:linear-gradient(135deg,var(--down-a),var(--down-b));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.gauge-unit{
  font-size:14px;
  color:var(--muted);
  font-family:var(--font-ar);
}

.start-btn{
  margin-top:10px;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg,var(--down-a),var(--down-b));
  color:#081018;
  font-family:var(--font-ar);
  font-weight:700;
  font-size:14.5px;
  padding:11px 30px;
  border-radius:100px;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow:0 8px 22px -8px rgba(51,194,255,.5);
}
.start-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -8px rgba(51,194,255,.6); }
.start-btn:active{ transform:translateY(0); }
.start-btn:disabled{
  opacity:.55;
  cursor:default;
  transform:none;
  box-shadow:none;
}
.start-btn:focus-visible{ outline:2px solid var(--down-a); outline-offset:3px; }

/* ---------- stats strip ---------- */
.stats{
  width:100%;
  max-width:520px;
  display:flex;
  align-items:stretch;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:18px;
  padding:16px 6px;
}
.stat{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0 6px;
}
.stat-icon{
  font-size:15px;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--bg-deep);
  font-weight:700;
}
.stat-icon--ping{ background:var(--muted); }
.stat-icon--jitter{ background:var(--muted-dim); color:var(--text); }
.stat-icon--down{ background:linear-gradient(135deg,var(--down-a),var(--down-b)); }
.stat-icon--up{ background:var(--up); }

.stat-label{
  font-size:11.5px;
  color:var(--muted);
}
.stat-value{
  font-family:var(--font-num);
  font-size:19px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  display:flex;
  align-items:baseline;
  gap:3px;
}
.stat-value small{
  font-family:var(--font-ar);
  font-size:11px;
  color:var(--muted);
  font-weight:400;
}

.stat-divider{
  width:1px;
  background:var(--hairline);
  margin:2px 0;
}

.hint{
  max-width:380px;
  text-align:center;
  font-size:12.5px;
  line-height:1.7;
  color:var(--muted-dim);
  margin:0;
}

/* ---------- history ---------- */
.history{
  width:100%;
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.history-title{
  font-size:11.5px;
  color:var(--muted);
  margin:0 2px;
}
.history-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.history-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:9px 13px;
  font-size:11.5px;
  color:var(--muted-dim);
}
.history-row .history-time{
  font-family:var(--font-num);
  color:var(--muted);
  white-space:nowrap;
}
.history-row .history-metrics{
  display:flex;
  gap:12px;
  font-family:var(--font-num);
}
.history-row .history-metrics b{
  color:var(--text);
  font-weight:600;
}

/* ---------- footer ---------- */
.footer{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 20px 20px;
  font-size:11.5px;
  color:var(--muted-dim);
  font-family:var(--font-num);
}
.footer-sep{ opacity:.5; }

/* ---------- responsive ---------- */
@media (max-width:380px){
  .gauge-number{ font-size:44px; }
  .stat-value{ font-size:16px; }
}