:root {
      --bg: #07111f;
      --card: #0d1b2e;
      --soft: #142942;
      --text: #eaf2ff;
      --muted: #9fb1c9;
      --accent: #38bdf8;
      --good: #22c55e;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: radial-gradient(circle at top, #12345a 0, var(--bg) 45%);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .wrap { width: 100%; max-width: 980px; }
    .header { text-align: center; margin-bottom: 22px; }
    .header h1 { margin: 0 0 8px; font-size: 34px; letter-spacing: .5px; }
    .header p { margin: 0; color: var(--muted); }
    .card {
      background: rgba(13,27,46,.92);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 24px;
      padding: 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin: 18px 0;
    }
    .box {
      background: var(--soft);
      border-radius: 18px;
      padding: 18px;
      text-align: center;
      min-height: 112px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .label {
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .value {
      font-size: 30px;
      font-weight: 800;
      line-height: 1.1;
    }
    .unit {
      color: var(--muted);
      font-size: 13px;
      margin-top: 5px;
    }
    .actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 18px;
    }
    button {
      border: 0;
      border-radius: 999px;
      padding: 14px 24px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      color: #03111f;
      background: var(--accent);
    }
    button:disabled { opacity: .55; cursor: not-allowed; }
    .secondary { background: #243b55; color: var(--text); }
    .meta {
      margin-top: 16px;
      color: var(--muted);
      font-size: 14px;
      text-align: center;
      line-height: 1.6;
    }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 16px;
    }
    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .field label {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .8px;
    }
    .field input,
    .field select {
      width: 100%;
      border: 1px solid rgba(255,255,255,.12);
      outline: none;
      border-radius: 14px;
      background: #081827;
      color: var(--text);
      padding: 12px 13px;
      font-size: 14px;
    }
    .field input::placeholder { color: #61758f; }

    .progress {
      width: 100%;
      height: 10px;
      background: #10243c;
      border-radius: 999px;
      overflow: hidden;
      margin-top: 20px;
    }
    .bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--good));
      transition: width .2s ease;
    }
    @media (max-width: 780px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
      .form-grid { grid-template-columns: 1fr; }
      .header h1 { font-size: 26px; }
      .value { font-size: 24px; }
    }
  
      .speedtest-home-logo {
        width: 320px !important;
        max-width: 320px !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 320px !important;
        display: block !important;
        margin: 0 auto 14px auto !important;
        object-fit: contain !important;
      }

      .header {
        text-align: center !important;
        overflow: visible !important;
      }

      .header img.speedtest-home-logo {
        width: 320px !important;
        max-width: 320px !important;
        height: auto !important;
      }

    
    .topbar {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 14px;
      min-height: 46px;
    }

    .topbar-right {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .topbar-btn {
      min-width: 120px;
    }

    .public-login-wrap {
      margin-top: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .public-login-box {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px 16px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
    }

    .public-login-box button {
      min-width: 120px;
      margin: 0;
    }

    .admin-menu-empty {
      display: none !important;
    }

    
    /* Final bottom menu layout */
    .topbar {
      display: none !important;
    }

    .bottom-actions-wrap,
    .public-login-wrap {
      margin-top: 18px !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .bottom-actions-box,
    .public-login-box {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      padding: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .bottom-actions-box button,
    .public-login-box button {
      min-width: 120px;
      margin: 0 !important;
    }

/* Speedometer UI - CLEAN FINAL */
.speedometer-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 24px;
}

/* Card hasil atas */
.live-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  max-width: 760px;
  gap: 14px;
  margin: 0 auto 18px auto;
}

.live-result-box,
.mini-stat.compact {
  min-width: 0;
  min-height: 68px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.055);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.live-result-box {
  cursor: pointer;
  user-select: none;
}

.live-result-box.is-active,
#liveDownloadBox.theme-download {
  border-color: rgba(39,215,255,.58);
  background: rgba(39,215,255,.08);
  box-shadow: 0 0 0 1px rgba(39,215,255,.10) inset;
}

#liveUploadBox.is-active,
#liveUploadBox.theme-upload {
  border-color: rgba(192,132,252,.58);
  background: rgba(192,132,252,.08);
  box-shadow: 0 0 0 1px rgba(192,132,252,.10) inset;
}

.live-result-label,
.mini-stat-label {
  color: #a9c8ef;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.live-result-label span {
  color: #dbeafe;
  font-size: 11px;
  text-transform: none;
}

.live-result-value,
.mini-stat.compact .mini-stat-value {
  font-size: 30px;
  line-height: 1.05;
  font-weight: 900;
  color: #ffffff;
}

.mini-stat-unit {
  color: #9fb1c9;
  font-size: 12px;
  margin-top: 2px;
}

/* Gauge 3/4 circle */
.gauge-box {
  position: relative !important;
  width: 430px !important;
  max-width: 100% !important;
  height: 300px !important;
  margin: 8px auto 18px !important;
  overflow: visible !important;
}

.gauge-box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 78%;
  height: 74%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 58%, rgba(34,211,238,.14), transparent 34%),
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.03), transparent 42%),
    radial-gradient(circle at 74% 40%, rgba(79,98,170,.10), transparent 30%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.gauge-svg {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 285px !important;
  z-index: 1;
  overflow: visible !important;
}

.gauge-bg {
  fill: none !important;
  stroke: rgba(58, 86, 148, .95) !important;
  stroke-width: 24 !important;
  stroke-linecap: round !important;
}

.gauge-progress {
  fill: none !important;
  stroke: url(#gaugeGradient);
  stroke-width: 24 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 1000 !important;
  stroke-dashoffset: 1000 !important;
  transition: stroke-dashoffset .18s linear !important;
}

.gauge-box.gauge-theme-download .gauge-progress {
  filter:
    drop-shadow(0 0 8px rgba(39,215,255,.18))
    drop-shadow(0 0 16px rgba(39,215,255,.10));
}

.gauge-box.gauge-theme-upload .gauge-progress {
  filter:
    drop-shadow(0 0 8px rgba(192,132,252,.18))
    drop-shadow(0 0 16px rgba(244,114,182,.10));
}

/* Jarum */
.gauge-needle {
  position: absolute !important;
  left: 50% !important;
  top: 63% !important;
  width: 4px !important;
  height: 96px !important;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.92) 22%, rgba(169,179,205,.22) 100%);
  box-shadow: 0 0 12px rgba(255,255,255,.22);
  transform-origin: 50% 95% !important;
  z-index: 4 !important;
}

.gauge-needle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  width: 5px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.82) 100%);
}

.gauge-center-dot {
  position: absolute !important;
  left: 50% !important;
  top: 63% !important;
  width: 22px !important;
  height: 22px !important;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #07111f;
  border: 2px solid rgba(214,226,246,.88);
  box-shadow:
    0 0 0 4px rgba(8,16,30,.55),
    0 0 16px rgba(255,255,255,.08);
  z-index: 5 !important;
}

/* Angka speed */
.gauge-center {
  position: absolute !important;
  left: 50% !important;
  top: 83% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 180px !important;
  text-align: center !important;
  z-index: 6 !important;
}

.gauge-value {
  font-size: 42px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.gauge-unit {
  margin-top: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #9fc4ef !important;
}

/* Scale final: 0 dan 1000 di ujung bawah arc */
.gauge-scale {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  pointer-events: none !important;
}

.gauge-mark {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  z-index: 31 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: rgba(235,243,255,.96) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.30) !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}

/* Desktop positions - remap lebih jelas */
.gauge-mark.m0    { left:  90px !important; top: 224px !important; }
.gauge-mark.m5    { left:  78px !important; top: 194px !important; }
.gauge-mark.m10   { left:  78px !important; top: 164px !important; }
.gauge-mark.m50   { left:  96px !important; top: 118px !important; }
.gauge-mark.m100  { left: 144px !important; top:  82px !important; }
.gauge-mark.m250  { left: 206px !important; top:  72px !important; }
.gauge-mark.m500  { left: 274px !important; top: 104px !important; }
.gauge-mark.m750  { left: 314px !important; top: 158px !important; }
.gauge-mark.m1000 { left: 320px !important; top: 224px !important; }

.speed-hidden-values {
  display: none !important;
}

/* Progress bar bawah */
.bar {
  transition: width .18s linear !important;
}

.bar.bar-theme-download {
  background: linear-gradient(90deg, #27d7ff 0%, #58eadf 55%, #79f6cb 100%) !important;
  box-shadow: 0 0 12px rgba(39,215,255,.18);
}

.bar.bar-theme-upload {
  background: linear-gradient(90deg, #8b5cf6 0%, #c084fc 55%, #f472b6 100%) !important;
  box-shadow: 0 0 12px rgba(192,132,252,.18);
}

.form-grid {
  margin-top: 8px !important;
}

/* Responsive */
@media (max-width: 780px) {
  .live-result-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }

  .live-result-value,
  .mini-stat.compact .mini-stat-value {
    font-size: 28px;
  }

  .gauge-box {
    width: 320px !important;
    height: 235px !important;
    margin: 8px auto 16px !important;
  }

  .gauge-svg {
    height: 225px !important;
  }

  .gauge-bg,
  .gauge-progress {
    stroke-width: 22 !important;
  }

  .gauge-needle {
    top: 63% !important;
    height: 72px !important;
  }

  .gauge-center-dot {
    top: 63% !important;
  }

  .gauge-center {
    top: 82% !important;
  }

  .gauge-value {
    font-size: 34px !important;
  }

  .gauge-mark {
    font-size: 11px !important;
  }

.gauge-mark.m0    { left:  72px !important; top: 176px !important; }
.gauge-mark.m5    { left:  62px !important; top: 150px !important; }
.gauge-mark.m10   { left:  62px !important; top: 126px !important; }
.gauge-mark.m50   { left:  80px !important; top:  92px !important; }
.gauge-mark.m100  { left: 118px !important; top:  64px !important; }
.gauge-mark.m250  { left: 160px !important; top:  56px !important; }
.gauge-mark.m500  { left: 206px !important; top:  90px !important; }
.gauge-mark.m750  { left: 232px !important; top: 126px !important; }
.gauge-mark.m1000 { left: 236px !important; top: 176px !important; }
}

/* ===== FORCE FINAL SCALE POSITION - PAIR ALIGN ===== */
/* 0 sejajar 1000, 5 sejajar 750, 10 sejajar 500, 50 sejajar 250, 100 top */

.gauge-box .gauge-scale {
  position: absolute !important;
  inset: 0 !important;
  z-index: 200 !important;
  pointer-events: none !important;
}

.gauge-box .gauge-scale .gauge-mark {
  position: absolute !important;
  z-index: 201 !important;
  transform: translate(-50%, -50%) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: rgba(235, 243, 255, .98) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.35) !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}

/* DESKTOP - pair alignment */
.gauge-box .gauge-scale .gauge-mark.m0    { left: 104px !important; top: 222px !important; }
.gauge-box .gauge-scale .gauge-mark.m5    { left:  88px !important; top: 184px !important; }
.gauge-box .gauge-scale .gauge-mark.m10   { left:  92px !important; top: 146px !important; }
.gauge-box .gauge-scale .gauge-mark.m50   { left: 124px !important; top: 102px !important; }
.gauge-box .gauge-scale .gauge-mark.m100  { left: 215px !important; top:  70px !important; }
.gauge-box .gauge-scale .gauge-mark.m250  { left: 258px !important; top: 102px !important; }
.gauge-box .gauge-scale .gauge-mark.m500  { left: 308px !important; top: 146px !important; }
.gauge-box .gauge-scale .gauge-mark.m750  { left: 322px !important; top: 184px !important; }
.gauge-box .gauge-scale .gauge-mark.m1000 { left: 326px !important; top: 222px !important; }

/* MOBILE */
@media (max-width: 780px) {
  .gauge-box .gauge-scale .gauge-mark {
    font-size: 11px !important;
  }

  .gauge-box .gauge-scale .gauge-mark.m0    { left:  78px !important; top: 170px !important; }
  .gauge-box .gauge-scale .gauge-mark.m5    { left:  66px !important; top: 142px !important; }
  .gauge-box .gauge-scale .gauge-mark.m10   { left:  70px !important; top: 114px !important; }
  .gauge-box .gauge-scale .gauge-mark.m50   { left:  94px !important; top:  82px !important; }
  .gauge-box .gauge-scale .gauge-mark.m100  { left: 160px !important; top:  58px !important; }
  .gauge-box .gauge-scale .gauge-mark.m250  { left: 190px !important; top:  82px !important; }
  .gauge-box .gauge-scale .gauge-mark.m500  { left: 226px !important; top: 114px !important; }
  .gauge-box .gauge-scale .gauge-mark.m750  { left: 236px !important; top: 142px !important; }
  .gauge-box .gauge-scale .gauge-mark.m1000 { left: 240px !important; top: 170px !important; }
}



/* ===== GAUGE FINAL SWEEP RESTORE ===== */
.gauge-box {
  --gauge-progress: 0;
  --gauge-progress-deg: 0deg;
  --gauge-sweep-start: #38bdf8;
  --gauge-sweep-end: #6ee7b7;
  position: relative;
  overflow: visible;
}

.gauge-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 308px;
  height: 308px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background:
    conic-gradient(
      from 135deg,
      var(--gauge-sweep-start) 0deg,
      var(--gauge-sweep-end) var(--gauge-progress-deg),
      transparent var(--gauge-progress-deg),
      transparent 360deg
    );
  -webkit-mask:
    radial-gradient(farthest-side,
      transparent calc(50% - 29px),
      #000 calc(50% - 28px),
      #000 calc(50% - 16px),
      transparent calc(50% - 15px)
    );
  mask:
    radial-gradient(farthest-side,
      transparent calc(50% - 29px),
      #000 calc(50% - 28px),
      #000 calc(50% - 16px),
      transparent calc(50% - 15px)
    );
  clip-path: inset(0 0 22% 0);
  opacity: 0.98;
  filter: drop-shadow(0 0 8px rgba(80,200,255,.28));
}

.gauge-box.is-upload::after {
  filter: drop-shadow(0 0 8px rgba(184,120,255,.30));
}

.gauge-box .gauge-scale,
.gauge-box .gauge-needle,
.gauge-box .gauge-center-dot,
.gauge-box .gauge-speed,
.gauge-box .gauge-speed-unit {
  position: relative;
  z-index: 3;
}

@media (max-width: 780px) {
  .gauge-box::after {
    width: 248px;
    height: 248px;
  }
}


/* ===== FINAL FIX: SCALE POSITION + SVG ARC TRAIL ===== */
/* Matikan conic overlay lama yang bikin warna keluar sebagai kotak kecil */
.gauge-box::after {
  display: none !important;
  content: none !important;
}

/* SVG progress dipakai sebagai trail utama di jalur 3/4 arc */
.gauge-progress {
  stroke: url(#gaugeGradient) !important;
  stroke-width: 24 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 1000 !important;
  transition: stroke-dashoffset .16s linear !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 8px rgba(56,189,248,.28))
    drop-shadow(0 0 16px rgba(56,189,248,.12)) !important;
}

.gauge-box.gauge-theme-upload .gauge-progress {
  filter:
    drop-shadow(0 0 8px rgba(192,132,252,.30))
    drop-shadow(0 0 16px rgba(244,114,182,.14)) !important;
}

.gauge-box.gauge-theme-download .gauge-progress {
  filter:
    drop-shadow(0 0 8px rgba(56,189,248,.28))
    drop-shadow(0 0 16px rgba(110,231,183,.12)) !important;
}

/* Pastikan scale tetap di atas arc tapi tidak niban line */
.gauge-box .gauge-scale .gauge-mark {
  z-index: 999 !important;
}

/* ===== GAUGE OVERRIDE FINAL (match ref 2/3) ===== */
.gauge-box {
  position: relative !important;
  width: 430px !important;
  max-width: 100% !important;
  height: 300px !important;
  margin: 10px auto 18px !important;
  overflow: visible !important;
}

.gauge-box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 76%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 55%, rgba(45, 212, 255, 0.14), transparent 35%),
    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.04), transparent 45%),
    radial-gradient(circle at 68% 42%, rgba(124, 92, 255, 0.08), transparent 28%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.gauge-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 285px !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.gauge-bg {
  fill: none !important;
  stroke: #283a72 !important;
  stroke-width: 24 !important;
  stroke-linecap: round !important;
  opacity: 0.95 !important;
}

.gauge-progress {
  fill: none !important;
  stroke: url(#gaugeGradient) !important;
  stroke-width: 24 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 1000 !important;
  stroke-dashoffset: 1000 !important;
  transition: stroke-dashoffset .14s linear !important;
  opacity: 1 !important;
}

.gauge-box.gauge-theme-download .gauge-progress {
  filter:
    drop-shadow(0 0 8px rgba(39,215,255,.32))
    drop-shadow(0 0 18px rgba(121,246,203,.16)) !important;
}

.gauge-box.gauge-theme-upload .gauge-progress {
  filter:
    drop-shadow(0 0 8px rgba(192,132,252,.34))
    drop-shadow(0 0 18px rgba(244,114,182,.16)) !important;
}

.gauge-scale {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.gauge-mark {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: rgba(239,244,255,.92) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.35) !important;
  z-index: 11 !important;
}

.gauge-needle {
  position: absolute !important;
  left: 50% !important;
  top: 63% !important;
  width: 6px !important;
  height: 104px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.96) 32%, rgba(35,61,122,.12) 100%) !important;
  box-shadow: 0 0 14px rgba(255,255,255,.16) !important;
  transform-origin: 50% 92% !important;
  z-index: 20 !important;
}

.gauge-center-dot {
  position: absolute !important;
  left: 50% !important;
  top: 63% !important;
  width: 24px !important;
  height: 24px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: #091321 !important;
  border: 2px solid rgba(232,240,255,.88) !important;
  box-shadow:
    0 0 0 4px rgba(8,16,30,.58),
    0 0 14px rgba(255,255,255,.08) !important;
  z-index: 21 !important;
}

.gauge-center {
  position: absolute !important;
  left: 50% !important;
  top: 82% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 180px !important;
  text-align: center !important;
  z-index: 22 !important;
}

.gauge-value {
  font-size: 42px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.gauge-unit {
  margin-top: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #8fd8ff !important;
}

.gauge-box.gauge-theme-upload .gauge-unit {
  color: #cfa4ff !important;
}

.live-result-box {
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

@media (max-width: 780px) {
  .gauge-box {
    width: 320px !important;
    height: 235px !important;
  }

  .gauge-svg {
    height: 225px !important;
  }

  .gauge-bg,
  .gauge-progress {
    stroke-width: 22px !important;
  }

  .gauge-mark {
    font-size: 11px !important;
  }

  .gauge-needle {
    height: 78px !important;
  }

  .gauge-value {
    font-size: 34px !important;
  }
}

/* ===== GAUGE FINAL V2 CLEAN ===== */
.gauge-box {
  position: relative !important;
  width: 430px !important;
  max-width: 100% !important;
  height: 300px !important;
  margin: 10px auto 18px !important;
  overflow: visible !important;
}

.gauge-box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 74%;
  height: 68%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 56%, rgba(45, 212, 255, 0.13), transparent 36%),
    radial-gradient(circle at 50% 46%, rgba(255,255,255,0.04), transparent 46%),
    radial-gradient(circle at 68% 40%, rgba(124, 92, 255, 0.07), transparent 28%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.gauge-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 285px !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.gauge-bg {
  fill: none !important;
  stroke: #2a3f82 !important;
  stroke-width: 24 !important;
  stroke-linecap: round !important;
  opacity: 0.96 !important;
}

.gauge-progress {
  fill: none !important;
  stroke: url(#gaugeGradient) !important;
  stroke-width: 24 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 1000 !important;
  stroke-dashoffset: 1000 !important;
  transition: stroke-dashoffset .14s linear !important;
  opacity: 1 !important;
}

.gauge-box.gauge-theme-download .gauge-progress {
  filter:
    drop-shadow(0 0 10px rgba(39,215,255,.35))
    drop-shadow(0 0 18px rgba(121,246,203,.16)) !important;
}

.gauge-box.gauge-theme-upload .gauge-progress {
  filter:
    drop-shadow(0 0 10px rgba(192,132,252,.38))
    drop-shadow(0 0 18px rgba(244,114,182,.16)) !important;
}

.gauge-scale {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.gauge-mark {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: rgba(241,245,255,.92) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.30) !important;
  z-index: 11 !important;
}

.gauge-needle {
  position: absolute !important;
  left: 50% !important;
  top: 63% !important;
  width: 6px !important;
  height: 104px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.96) 30%, rgba(26,42,93,.14) 100%) !important;
  box-shadow: 0 0 14px rgba(255,255,255,.14) !important;
  transform-origin: 50% 92% !important;
  z-index: 20 !important;
}

.gauge-center-dot {
  position: absolute !important;
  left: 50% !important;
  top: 63% !important;
  width: 24px !important;
  height: 24px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: #091321 !important;
  border: 2px solid rgba(232,240,255,.88) !important;
  box-shadow:
    0 0 0 4px rgba(8,16,30,.58),
    0 0 14px rgba(255,255,255,.08) !important;
  z-index: 21 !important;
}

.gauge-center {
  position: absolute !important;
  left: 50% !important;
  top: 82% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 180px !important;
  text-align: center !important;
  z-index: 22 !important;
}

.gauge-value {
  font-size: 42px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.gauge-unit {
  margin-top: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #89dbff !important;
}

.gauge-box.gauge-theme-upload .gauge-unit {
  color: #d4a8ff !important;
}

@media (max-width: 780px) {
  .gauge-box {
    width: 320px !important;
    height: 235px !important;
  }

  .gauge-svg {
    height: 225px !important;
  }

  .gauge-bg,
  .gauge-progress {
    stroke-width: 22px !important;
  }

  .gauge-mark {
    font-size: 11px !important;
  }

  .gauge-needle {
    height: 78px !important;
  }

  .gauge-value {
    font-size: 34px !important;
  }
}

/* ===== GAUGE FINAL V3 ARC COLOR FIX ===== */
.gauge-progress {
  fill: none !important;
  stroke: url(#gaugeGradient) !important;
  stroke-width: 25px !important;
  stroke-linecap: round !important;
  opacity: 1 !important;
  transition: stroke-dashoffset .12s linear !important;
}

.gauge-box.gauge-theme-download .gauge-progress {
  filter:
    drop-shadow(0 0 10px rgba(34, 211, 238, .58))
    drop-shadow(0 0 22px rgba(45, 212, 191, .28))
    drop-shadow(0 0 34px rgba(125, 255, 215, .12)) !important;
}

.gauge-box.gauge-theme-upload .gauge-progress {
  filter:
    drop-shadow(0 0 10px rgba(192, 132, 252, .62))
    drop-shadow(0 0 22px rgba(216, 80, 255, .30))
    drop-shadow(0 0 34px rgba(244, 114, 182, .14)) !important;
}

.gauge-bg {
  stroke: #263a78 !important;
  opacity: .98 !important;
}

.gauge-box.gauge-theme-download::before {
  background:
    radial-gradient(circle at 34% 56%, rgba(34, 211, 238, 0.18), transparent 36%),
    radial-gradient(circle at 48% 46%, rgba(255,255,255,0.04), transparent 46%),
    radial-gradient(circle at 68% 40%, rgba(34, 211, 238, 0.08), transparent 28%) !important;
}

.gauge-box.gauge-theme-upload::before {
  background:
    radial-gradient(circle at 34% 56%, rgba(192, 132, 252, 0.18), transparent 36%),
    radial-gradient(circle at 48% 46%, rgba(255,255,255,0.04), transparent 46%),
    radial-gradient(circle at 68% 40%, rgba(244, 114, 182, 0.08), transparent 28%) !important;
}

/* ===== GAUGE FINAL V5 PROGRESS DIRECTION FIX ===== */
.gauge-progress {
  fill: none !important;
  stroke: url(#gaugeGradient) !important;
  stroke-width: 25px !important;
  stroke-linecap: round !important;
  stroke-dasharray: 0 1000 !important;
  stroke-dashoffset: 0 !important;
  opacity: 0 !important;
  transition:
    stroke-dasharray .12s linear,
    opacity .08s linear !important;
}

.gauge-box.gauge-theme-download .gauge-progress {
  filter:
    drop-shadow(0 0 10px rgba(34, 211, 238, .58))
    drop-shadow(0 0 22px rgba(45, 212, 191, .28))
    drop-shadow(0 0 34px rgba(125, 255, 215, .12)) !important;
}

.gauge-box.gauge-theme-upload .gauge-progress {
  filter:
    drop-shadow(0 0 10px rgba(192, 132, 252, .62))
    drop-shadow(0 0 22px rgba(216, 80, 255, .30))
    drop-shadow(0 0 34px rgba(244, 114, 182, .14)) !important;
}

/* ===== GAUGE FINAL V6 SYNC ARC NEEDLE ===== */
.gauge-progress {
  transition: none !important;
  stroke-dashoffset: 0 !important;
  will-change: stroke-dasharray, opacity !important;
}

.gauge-needle {
  transition: transform .04s linear !important;
  will-change: transform !important;
}

/* ===== GAUGE FINAL V7 NEEDLE REALTIME FIX ===== */
.gauge-needle {
  transition: none !important;
  will-change: transform !important;
}

.gauge-progress {
  transition: none !important;
  will-change: stroke-dasharray, opacity !important;
}

/* ===== MOBILE STABLE APP VIEW FINAL ===== */
@media (max-width: 640px) {
  html,
  body {
    width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
    padding: 14px 10px 28px !important;
    background:
      radial-gradient(circle at top, #123b64 0, #07111f 48%, #050c16 100%) !important;
  }

  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .header {
    margin: 10px auto 14px !important;
    padding: 0 8px !important;
  }

  .speedtest-home-logo,
  .header img.speedtest-home-logo {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    max-height: 150px !important;
    margin: 0 auto 6px auto !important;
  }

  .header h1 {
    font-size: 24px !important;
    line-height: 1.1 !important;
    margin: 0 0 5px !important;
  }

  .header p {
    font-size: 12px !important;
    line-height: 1.35 !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  .card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px !important;
    padding: 16px 12px 18px !important;
    margin: 0 auto !important;
  }

  .speedometer-wrap {
    margin: 0 0 16px !important;
  }

  .live-result-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 auto 18px !important;
  }

  .live-result-box,
  .mini-stat.compact {
    min-height: 74px !important;
    border-radius: 15px !important;
    padding: 9px 8px !important;
  }

  .live-result-label,
  .mini-stat-label {
    font-size: 10px !important;
    letter-spacing: .8px !important;
    margin-bottom: 5px !important;
  }

  .live-result-label span {
    font-size: 9px !important;
  }

  .live-result-value,
  .mini-stat.compact .mini-stat-value {
    font-size: 27px !important;
    line-height: 1 !important;
  }

  .mini-stat-unit {
    font-size: 10px !important;
  }

  .gauge-box {
    width: 300px !important;
    height: 220px !important;
    margin: 6px auto 12px !important;
  }

  .gauge-svg {
    height: 215px !important;
  }

  .gauge-bg,
  .gauge-progress {
    stroke-width: 22px !important;
  }

  .gauge-mark {
    font-size: 11px !important;
    min-width: 22px !important;
  }

  .gauge-needle {
    height: 76px !important;
    width: 5px !important;
  }

  .gauge-center-dot {
    width: 22px !important;
    height: 22px !important;
  }

  .gauge-center {
    top: 82% !important;
    min-width: 150px !important;
  }

  .gauge-value {
    font-size: 34px !important;
  }

  .gauge-unit {
    font-size: 12px !important;
    margin-top: 6px !important;
  }

  .form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }

  .field label {
    font-size: 11px !important;
    letter-spacing: .7px !important;
  }

  .field input,
  .field select {
    height: 42px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
  }

  .progress {
    height: 8px !important;
    margin-top: 16px !important;
  }

  .actions {
    gap: 10px !important;
    margin-top: 16px !important;
  }

  button {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  #startBtn {
    min-width: 150px !important;
  }

  .actions .secondary {
    min-width: 86px !important;
  }

  .meta {
    margin-top: 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 0 8px !important;
  }

  .public-login-wrap,
  .bottom-actions-wrap {
    margin-top: 14px !important;
  }

  .public-login-box button,
  .bottom-actions-box button {
    min-width: 120px !important;
  }
}

@media (max-width: 380px) {
  .gauge-box {
    width: 280px !important;
    height: 210px !important;
  }

  .gauge-svg {
    height: 205px !important;
  }

  .live-result-value,
  .mini-stat.compact .mini-stat-value {
    font-size: 24px !important;
  }

  .speedtest-home-logo,
  .header img.speedtest-home-logo {
    width: 130px !important;
    max-width: 130px !important;
  }
}

/* ===== MOBILE COMPACT TUNING V2 ===== */
@media (max-width: 640px) {
  .card {
    padding: 14px 10px 16px !important;
  }

  .live-result-grid {
    gap: 8px !important;
    margin: 0 auto 10px !important;
  }

  .live-result-box,
  .mini-stat.compact {
    min-height: 62px !important;
    border-radius: 14px !important;
    padding: 8px 6px !important;
  }

  .live-result-label,
  .mini-stat-label {
    font-size: 9px !important;
    letter-spacing: .7px !important;
    margin-bottom: 4px !important;
  }

  .live-result-label span {
    font-size: 8px !important;
  }

  .live-result-value,
  .mini-stat.compact .mini-stat-value {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .mini-stat-unit {
    font-size: 9px !important;
    margin-top: 2px !important;
  }

  .speedometer-wrap {
    margin: 0 0 8px !important;
  }

  .gauge-box {
    width: 270px !important;
    height: 195px !important;
    margin: 0 auto 6px !important;
  }

  .gauge-svg {
    height: 188px !important;
  }

  .gauge-bg,
  .gauge-progress {
    stroke-width: 20px !important;
  }

  .gauge-mark {
    font-size: 10px !important;
    min-width: 20px !important;
  }

  .gauge-needle {
    height: 68px !important;
    width: 5px !important;
  }

  .gauge-center-dot {
    width: 20px !important;
    height: 20px !important;
  }

  .gauge-center {
    top: 81% !important;
    min-width: 130px !important;
  }

  .gauge-value {
    font-size: 28px !important;
  }

  .gauge-unit {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  .form-grid {
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .field label {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }

  .field input,
  .field select {
    height: 38px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  .progress {
    height: 7px !important;
    margin-top: 12px !important;
  }

  .actions {
    gap: 8px !important;
    margin-top: 12px !important;
  }

  button {
    min-height: 40px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }

  #startBtn {
    min-width: 140px !important;
  }

  .actions .secondary {
    min-width: 78px !important;
  }

  .meta {
    margin-top: 10px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .public-login-wrap,
  .bottom-actions-wrap {
    margin-top: 10px !important;
  }
}

@media (max-width: 380px) {
  .live-result-box,
  .mini-stat.compact {
    min-height: 58px !important;
  }

  .live-result-value,
  .mini-stat.compact .mini-stat-value {
    font-size: 20px !important;
  }

  .gauge-box {
    width: 250px !important;
    height: 185px !important;
  }

  .gauge-svg {
    height: 178px !important;
  }

  .gauge-value {
    font-size: 26px !important;
  }
}

/* ===== MOBILE SMART STATS V3 ===== */
/* Mobile: Unduhan/Unggahan besar, Ping/Jitter kecil */
@media (max-width: 640px) {
  .live-result-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 auto 8px !important;
  }

  /* Unduhan & Unggahan: box utama */
  .live-result-grid > .live-result-box {
    min-height: 68px !important;
    padding: 9px 7px !important;
    border-radius: 15px !important;
  }

  .live-result-grid > .live-result-box .live-result-label {
    font-size: 9.5px !important;
    letter-spacing: .75px !important;
    margin-bottom: 5px !important;
  }

  .live-result-grid > .live-result-box .live-result-label span {
    font-size: 8px !important;
  }

  .live-result-grid > .live-result-box .live-result-value {
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  /* Ping & Jitter: box kecil */
  .live-result-grid > .mini-stat.compact {
    min-height: 46px !important;
    padding: 6px 7px !important;
    border-radius: 13px !important;
    opacity: .96;
  }

  .live-result-grid > .mini-stat.compact .mini-stat-label {
    font-size: 8.5px !important;
    letter-spacing: .7px !important;
    margin-bottom: 2px !important;
  }

  .live-result-grid > .mini-stat.compact .mini-stat-value {
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .live-result-grid > .mini-stat.compact .mini-stat-unit {
    font-size: 8px !important;
    margin-top: 1px !important;
  }

  /* Rapatkan area speedometer */
  .speedometer-wrap {
    margin: 0 0 6px !important;
  }

  .gauge-box {
    width: 268px !important;
    height: 192px !important;
    margin: 0 auto 4px !important;
  }

  .gauge-svg {
    height: 186px !important;
  }

  .gauge-bg,
  .gauge-progress {
    stroke-width: 20px !important;
  }

  .gauge-value {
    font-size: 28px !important;
  }

  .gauge-unit {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  /* Form dibuat lebih compact */
  .form-grid {
    gap: 7px !important;
    margin-top: 2px !important;
  }

  .field label {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }

  .field input,
  .field select {
    height: 37px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  .progress {
    height: 7px !important;
    margin-top: 10px !important;
  }

  .actions {
    margin-top: 11px !important;
  }

  button {
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
  }

  #startBtn {
    min-width: 142px !important;
  }

  .actions .secondary {
    min-width: 78px !important;
  }

  .meta {
    margin-top: 9px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 380px) {
  .live-result-grid {
    gap: 7px !important;
  }

  .live-result-grid > .live-result-box {
    min-height: 64px !important;
  }

  .live-result-grid > .live-result-box .live-result-value {
    font-size: 23px !important;
  }

  .live-result-grid > .mini-stat.compact {
    min-height: 43px !important;
  }

  .live-result-grid > .mini-stat.compact .mini-stat-value {
    font-size: 17px !important;
  }

  .gauge-box {
    width: 250px !important;
    height: 182px !important;
  }

  .gauge-svg {
    height: 176px !important;
  }
}

/* ===== MOBILE SINGLE ROW STATS V4 ===== */
@media (max-width: 640px) {
  .card {
    padding: 14px 10px 16px !important;
  }

  /* 4 box sejajar seperti desktop, tapi mini */
  .live-result-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 auto 10px !important;
    align-items: stretch !important;
  }

  .live-result-grid > .live-result-box,
  .live-result-grid > .mini-stat.compact {
    min-height: 56px !important;
    padding: 7px 5px !important;
    border-radius: 12px !important;
  }

  .live-result-grid > .live-result-box .live-result-label,
  .live-result-grid > .mini-stat.compact .mini-stat-label {
    font-size: 7.5px !important;
    line-height: 1.1 !important;
    letter-spacing: .45px !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
  }

  .live-result-grid > .live-result-box .live-result-label span {
    font-size: 7px !important;
  }

  .live-result-grid > .live-result-box .live-result-value,
  .live-result-grid > .mini-stat.compact .mini-stat-value {
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .live-result-grid > .mini-stat.compact .mini-stat-unit {
    font-size: 8px !important;
    margin-top: 2px !important;
  }

  /* Rapatkan ke speedometer */
  .speedometer-wrap {
    margin: 0 0 6px !important;
  }

  .gauge-box {
    width: 258px !important;
    height: 188px !important;
    margin: 0 auto 4px !important;
  }

  .gauge-svg {
    height: 182px !important;
  }

  .gauge-bg,
  .gauge-progress {
    stroke-width: 20px !important;
  }

  .gauge-mark {
    font-size: 10px !important;
  }

  .gauge-needle {
    height: 66px !important;
    width: 5px !important;
  }

  .gauge-center-dot {
    width: 20px !important;
    height: 20px !important;
  }

  .gauge-center {
    min-width: 130px !important;
    top: 81% !important;
  }

  .gauge-value {
    font-size: 28px !important;
  }

  .gauge-unit {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  /* Form lebih compact */
  .form-grid {
    gap: 7px !important;
    margin-top: 2px !important;
  }

  .field label {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }

  .field input,
  .field select {
    height: 37px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  .progress {
    height: 7px !important;
    margin-top: 10px !important;
  }

  .actions {
    gap: 8px !important;
    margin-top: 11px !important;
  }

  button {
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
  }

  #startBtn {
    min-width: 142px !important;
  }

  .actions .secondary {
    min-width: 78px !important;
  }

  .meta {
    margin-top: 9px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 380px) {
  .live-result-grid {
    gap: 5px !important;
  }

  .live-result-grid > .live-result-box,
  .live-result-grid > .mini-stat.compact {
    min-height: 52px !important;
    padding: 6px 4px !important;
  }

  .live-result-grid > .live-result-box .live-result-label,
  .live-result-grid > .mini-stat.compact .mini-stat-label {
    font-size: 7px !important;
  }

  .live-result-grid > .live-result-box .live-result-value,
  .live-result-grid > .mini-stat.compact .mini-stat-value {
    font-size: 14px !important;
  }

  .gauge-box {
    width: 246px !important;
    height: 182px !important;
  }

  .gauge-svg {
    height: 176px !important;
  }

  .gauge-value {
    font-size: 26px !important;
  }
}

/* ===== MOBILE HIDE HEADER V5 ===== */
/* Mobile fokus ke card speedtest saja. Desktop tetap normal. */
@media (max-width: 640px) {
  body {
    padding: 10px 8px 20px !important;
  }

  .header {
    display: none !important;
  }

  .wrap {
    padding-top: 0 !important;
  }

  .card {
    margin-top: 0 !important;
  }

  .public-login-wrap,
  .bottom-actions-wrap {
    margin-top: 10px !important;
  }

  .public-login-box button,
  .bottom-actions-box button {
    min-height: 40px !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
  }
}

/* Kalau dibuka sebagai PWA/APK fullscreen, tambah aman */
@media (max-width: 640px) and (display-mode: standalone) {
  body {
    padding-top: 12px !important;
  }
}

/* ===== MOBILE LOGO + OPTIONAL COLLAPSE V6 ===== */
.mobile-app-logo {
  display: none;
}

.optional-toggle {
  display: none;
}

.optional-data {
  display: block;
}

/* Mobile: logo icon kecil, tanpa text header, form jadi collapsible */
@media (max-width: 640px) {
  body {
    padding: 8px 8px 18px !important;
  }

  .header {
    display: none !important;
  }

  .mobile-app-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 8px !important;
  }

  .mobile-app-logo img {
    width: 54px !important;
    height: 54px !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 8px 22px rgba(56, 189, 248, .16));
  }

  .card {
    margin-top: 0 !important;
    padding-top: 12px !important;
  }

  .optional-toggle {
    width: 100% !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 4px 0 8px !important;
    padding: 9px 13px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background: rgba(8, 24, 39, .72) !important;
    color: #cfe7ff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }

  .optional-toggle.is-open {
    border-color: rgba(56, 189, 248, .34) !important;
    background: rgba(56, 189, 248, .075) !important;
  }

  .optional-toggle-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(56, 189, 248, .16) !important;
    color: #7dd3fc !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .optional-data {
    display: none !important;
  }

  .optional-data.is-open {
    display: block !important;
  }

  .optional-data .form-grid {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }

  /* Saat form disembunyikan, progress/tombol naik lebih dekat */
  .progress {
    margin-top: 8px !important;
  }

  .actions {
    margin-top: 10px !important;
  }

  .meta {
    margin-top: 8px !important;
  }
}

@media (max-width: 380px) {
  .mobile-app-logo img {
    width: 48px !important;
    height: 48px !important;
  }

  .optional-toggle {
    min-height: 36px !important;
    font-size: 11px !important;
  }
}

/* ===== MOBILE LOGO SIZE + COLLAPSE FIX V7 ===== */
@media (max-width: 640px) {
  .mobile-app-logo {
    margin: 4px auto 12px !important;
  }

  .mobile-app-logo img {
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    object-fit: contain !important;
    filter:
      drop-shadow(0 10px 24px rgba(56, 189, 248, .18))
      drop-shadow(0 3px 8px rgba(0, 0, 0, .20)) !important;
  }

  .optional-data.is-open {
    display: block !important;
    animation: optionalOpen .12s ease-out;
  }

  .optional-data .form-grid {
    margin-top: 8px !important;
  }

  .optional-toggle {
    margin-top: 6px !important;
  }
}

@media (max-width: 380px) {
  .mobile-app-logo img {
    width: 66px !important;
    height: 66px !important;
    max-width: 66px !important;
    max-height: 66px !important;
  }
}

@keyframes optionalOpen {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== MOBILE LOGO ICON FINAL V8 ===== */
@media (max-width: 640px) {
  .mobile-app-logo {
    margin: 8px auto 14px !important;
  }

  .mobile-app-logo img {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    object-fit: contain !important;
    display: block !important;
    filter:
      drop-shadow(0 12px 28px rgba(56, 189, 248, .22))
      drop-shadow(0 4px 10px rgba(0, 0, 0, .22)) !important;
  }
}

@media (max-width: 380px) {
  .mobile-app-logo img {
    width: 86px !important;
    height: 86px !important;
    max-width: 86px !important;
    max-height: 86px !important;
  }
}

/* ===== MOBILE WEB LOGO REVERT V9 ===== */
/* Mobile web pakai logo sebelumnya. logo-speedtest-mobile-icon.png disimpan untuk PWA/APK icon. */
@media (max-width: 640px) {
  .mobile-app-logo {
    margin: 4px auto 10px !important;
  }

  .mobile-app-logo img {
    width: 82px !important;
    height: auto !important;
    max-width: 82px !important;
    max-height: 82px !important;
    object-fit: contain !important;
    background: transparent !important;
    filter:
      drop-shadow(0 10px 24px rgba(56, 189, 248, .18))
      drop-shadow(0 4px 10px rgba(0, 0, 0, .18)) !important;
  }
}

@media (max-width: 380px) {
  .mobile-app-logo img {
    width: 74px !important;
    max-width: 74px !important;
    max-height: 74px !important;
  }
}

/* ===== MOBILE WEB LOGO BIGGER V10 ===== */
@media (max-width: 640px) {
  .mobile-app-logo {
    margin: 8px auto 14px !important;
  }

  .mobile-app-logo img {
    width: 108px !important;
    height: auto !important;
    max-width: 108px !important;
    max-height: 108px !important;
    object-fit: contain !important;
    background: transparent !important;
    filter:
      drop-shadow(0 12px 28px rgba(56, 189, 248, .22))
      drop-shadow(0 4px 10px rgba(0, 0, 0, .20)) !important;
  }
}

@media (max-width: 380px) {
  .mobile-app-logo img {
    width: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
  }
}

/* ===== MOBILE LOGO BIGGER + BLUE GAP FIX V11 ===== */
@media (max-width: 640px) {
  html,
  body {
    background-color: #050c16 !important;
    background-repeat: no-repeat !important;
    overflow-x: hidden !important;
  }

  body {
    min-height: 100svh !important;
  }

  .mobile-app-logo {
    margin: 10px auto 16px !important;
  }

  .mobile-app-logo img {
    width: 120px !important;
    height: auto !important;
    max-width: 120px !important;
    max-height: 120px !important;
    object-fit: contain !important;
    background: transparent !important;
    filter:
      drop-shadow(0 14px 30px rgba(56, 189, 248, .24))
      drop-shadow(0 5px 12px rgba(0, 0, 0, .22)) !important;
  }

  .wrap {
    min-height: auto !important;
  }

  .card {
    margin-bottom: 0 !important;
  }

  .public-login-wrap,
  .bottom-actions-wrap {
    margin-bottom: 0 !important;
  }

  .optional-data {
    overflow: hidden !important;
  }

  .optional-data:not(.is-open) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 380px) {
  .mobile-app-logo img {
    width: 108px !important;
    max-width: 108px !important;
    max-height: 108px !important;
  }
}

/* ===== MOBILE LOGO XL V12 ===== */
@media (max-width: 640px) {
  .mobile-app-logo {
    margin: 12px auto 18px !important;
  }

  .mobile-app-logo img {
    width: 150px !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 150px !important;
    object-fit: contain !important;
    background: transparent !important;
    filter:
      drop-shadow(0 14px 32px rgba(56, 189, 248, .24))
      drop-shadow(0 5px 12px rgba(0, 0, 0, .22)) !important;
  }
}

@media (max-width: 380px) {
  .mobile-app-logo img {
    width: 136px !important;
    max-width: 136px !important;
    max-height: 136px !important;
  }
}

/* ===== MOBILE LOGO 160PX V13 ===== */
@media (max-width: 640px) {
  .mobile-app-logo {
    margin: 12px auto 18px !important;
  }

  .mobile-app-logo img {
    width: 160px !important;
    height: auto !important;
    max-width: 160px !important;
    max-height: 160px !important;
    object-fit: contain !important;
    background: transparent !important;
    filter:
      drop-shadow(0 14px 32px rgba(56, 189, 248, .24))
      drop-shadow(0 5px 12px rgba(0, 0, 0, .22)) !important;
  }
}

@media (max-width: 380px) {
  .mobile-app-logo img {
    width: 145px !important;
    max-width: 145px !important;
    max-height: 145px !important;
  }
}

/* ===== MOBILE LOGO 170PX V14 ===== */
@media (max-width: 640px) {
  .mobile-app-logo {
    margin: 12px auto 18px !important;
  }

  .mobile-app-logo img {
    width: 170px !important;
    height: auto !important;
    max-width: 170px !important;
    max-height: 170px !important;
    object-fit: contain !important;
    background: transparent !important;
    filter:
      drop-shadow(0 14px 32px rgba(56, 189, 248, .24))
      drop-shadow(0 5px 12px rgba(0, 0, 0, .22)) !important;
  }
}

@media (max-width: 380px) {
  .mobile-app-logo img {
    width: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
  }
}

/* ===== GAUGE SMOOTH VISUAL V15 ===== */
.gauge-needle,
.gauge-progress {
  transition: none !important;
  will-change: transform, stroke-dasharray, opacity !important;
  backface-visibility: hidden !important;
}

.gauge-needle {
  transform-style: preserve-3d !important;
}

/* ===== UPLOAD GAUGE + PROGRESS SMOOTH V16 ===== */
.gauge-needle,
.gauge-progress {
  transition: none !important;
  will-change: transform, stroke-dasharray, opacity !important;
  backface-visibility: hidden !important;
}

.progress > *,
.progress-bar,
.progress-fill,
#progressBar,
#progressFill,
#bar {
  transition: width .14s linear, transform .14s linear !important;
  will-change: width, transform !important;
}

/* ===== HIDE SPEEDTEST PROGRESS BAR V17 ===== */
/* Progress bar bawah dihilangkan supaya fokus ke speedometer realtime. */
.progress {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.progress > *,
.progress-bar,
.progress-fill,
#progressBar,
#progressFill,
#bar {
  display: none !important;
}

.actions {
  margin-top: 14px !important;
}

@media (max-width: 640px) {
  .actions {
    margin-top: 12px !important;
  }

  .meta,
  #statusText,
  .status-text {
    margin-top: 9px !important;
  }
}

/* ===== MOBILE LOGO 200PX V18 ===== */
@media (max-width: 640px) {
  .mobile-app-logo {
    margin: 8px auto 10px !important;
  }

  .mobile-app-logo img {
    width: 200px !important;
    max-width: 200px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* Kalau dibuka dari PWA / standalone */
@media (display-mode: standalone) and (max-width: 640px) {
  .mobile-app-logo {
    margin: 6px auto 8px !important;
  }

  .mobile-app-logo img {
    width: 200px !important;
    max-width: 200px !important;
  }
}

/* ===== UPLOAD GAUGE REALISTIC V19 ===== */
.gauge-needle,
.gauge-progress {
  transition: none !important;
  will-change: transform, stroke-dasharray, opacity !important;
}

/* ===== UPLOAD GAUGE BOX SYNC V21 ===== */
.gauge-needle,
.gauge-progress {
  transition: none !important;
  will-change: transform, stroke-dasharray, opacity !important;
}

/* ===== UPLOAD SOFT LANDING V22 ===== */
.gauge-needle,
.gauge-progress {
  transition: none !important;
  will-change: transform, stroke-dasharray, opacity !important;
}

/* ===== UPLOAD SOFT LANDING V23 ===== */
.gauge-needle,
.gauge-progress {
  transition: none !important;
  will-change: transform, stroke-dasharray, opacity !important;
}

/* ===== DATA OPSIONAL LOGIN ONLY V24 ===== */
/* Default: sebelum status login kebaca, Data Opsional disembunyikan. */
body:not(.auth-ok) #optionalToggle,
body:not(.auth-ok) #optionalData,
body.public-guest #optionalToggle,
body.public-guest #optionalData {
  display: none !important;
}

/* Setelah login, Data Opsional tampil normal lagi. */
body.auth-ok #optionalToggle {
  display: flex !important;
}

body.auth-ok #optionalData {
  display: block;
}

/* Rapikan jarak tombol kalau Data Opsional disembunyikan di public dashboard. */
body:not(.auth-ok) .actions,
body.public-guest .actions {
  margin-top: 18px !important;
}

@media (max-width: 640px) {
  body:not(.auth-ok) .actions,
  body.public-guest .actions {
    margin-top: 16px !important;
  }
}

/* ===== MOBILE VERTICAL BALANCE V25 ===== */
/* Mobile only: seimbangkan jarak atas/bawah agar bawah tidak terlalu kosong. */
@media (max-width: 640px) {
  body {
    min-height: 100dvh !important;
    overflow-x: hidden !important;
  }

  /* Area logo sedikit diturunkan agar sisa bawah lebih seimbang */
  body.public-guest .mobile-app-logo,
  body:not(.auth-ok) .mobile-app-logo {
    margin-top: clamp(18px, 4.2vh, 36px) !important;
    margin-bottom: 10px !important;
  }

  body.auth-ok .mobile-app-logo {
    margin-top: clamp(14px, 3.4vh, 28px) !important;
    margin-bottom: 10px !important;
  }

  .mobile-app-logo img {
    width: 200px !important;
    max-width: 200px !important;
    height: auto !important;
  }

  /* Card speedtest jangan terlalu mepet atas, tapi tetap compact */
  .speedtest-card,
  .speed-card,
  .main-card,
  .tester-card,
  .panel.speedtest,
  .card.speedtest {
    margin-top: 10px !important;
    margin-bottom: 14px !important;
  }

  /* Rapikan jarak bawah di dalam card */
  .actions {
    margin-top: 12px !important;
    margin-bottom: 6px !important;
  }

  .meta,
  #statusText,
  .status-text {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  /* Tombol Login / Riwayat / Kelola User / Logout lebih presisi */
  .nav-actions,
  .admin-actions,
  .guest-actions,
  .auth-actions,
  .login-actions {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }

  a[href="/login"],
  a[href="/results"],
  a[href="/users"],
  a[href="/logout"],
  .login-btn {
    margin-top: 10px !important;
  }
}

/* Khusus PWA standalone: sedikit lebih turun karena address bar hilang */
@media (display-mode: standalone) and (max-width: 640px) {
  body.public-guest .mobile-app-logo,
  body:not(.auth-ok) .mobile-app-logo {
    margin-top: clamp(26px, 5.2vh, 46px) !important;
  }

  body.auth-ok .mobile-app-logo {
    margin-top: clamp(20px, 4.4vh, 38px) !important;
  }
}