.gauge { position: relative; width: min(540px, 96vw); height: 430px; margin: .1rem auto 0; }
.gauge-svg { width: 100%; height: 100%; overflow: visible; }
.gauge-track, .gauge-active { fill: none; stroke-linecap: butt; }
.gauge-track { stroke: var(--gauge-track); stroke-width: 24; }
.gauge-active { stroke: url(#orange-gradient); stroke-width: 25; stroke-dasharray: 690; stroke-dashoffset: 690; filter: url(#arc-glow); transition: stroke-dashoffset .2s ease-out, opacity .25s ease; }
.gauge-ticks text { fill: var(--gauge-tick); font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; text-anchor: middle; }
.gauge-needle { transition: opacity .25s ease; }
.gauge-needle path { fill: rgba(90, 99, 111, .22); }
.gauge-needle circle:first-of-type { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.gauge-needle circle:last-of-type { fill: var(--orange); }
.gauge-reading { position: absolute; top: 278px; left: 50%; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); transition: opacity .25s ease, transform .25s ease; }
.phase-label { min-height: 1rem; color: var(--muted); font-size: .61rem; font-weight: 600; letter-spacing: .08em; }
.gauge-reading strong { color: var(--text-strong); font-size: clamp(2.65rem, 10vw, 4.15rem); font-weight: 300; line-height: .98; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.speed-unit { margin-top: .28rem; color: var(--muted-2); font-size: .74rem; }
.speed-unit i { color: var(--orange); font-style: normal; }
.go-button { position: absolute; top: 180px; left: 50%; width: 178px; height: 178px; transform: translateX(-50%); border: 2px solid transparent; border-radius: 50%; color: var(--text-strong); background: var(--surface); background-clip: padding-box; box-shadow: 0 10px 30px rgba(25, 31, 43, .06); cursor: pointer; font-size: 2.25rem; font-weight: 400; letter-spacing: -.03em; transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease; }
.go-button::before { content: ""; position: absolute; inset: -3px; z-index: -2; border-radius: inherit; background: conic-gradient(from 220deg, var(--orange-deep), var(--orange-accent), #ffb071, var(--orange-deep)); }
.go-button::after { content: ""; position: absolute; inset: 7px; z-index: -1; border-radius: inherit; background: var(--surface); }
.go-ring { position: absolute; inset: -18px; border: 2px solid rgba(232,93,4,.12); border-radius: 50%; opacity: .9; }
.go-button:hover:not(:disabled) { transform: translateX(-50%) scale(1.045); box-shadow: 0 14px 40px rgba(232,93,4,.14); }
.go-button:disabled { cursor: wait; opacity: .72; }
.gauge[data-state="IDLE"] .gauge-active,
.gauge[data-state="SELECTING"] .gauge-active,
.gauge[data-state="VERIFYING"] .gauge-active,
.gauge[data-state="ERROR"] .gauge-active,
.gauge[data-state="COMPLETE"] .gauge-active { opacity: 0; }
.gauge[data-state="IDLE"] .gauge-needle,
.gauge[data-state="SELECTING"] .gauge-needle,
.gauge[data-state="VERIFYING"] .gauge-needle,
.gauge[data-state="ERROR"] .gauge-needle,
.gauge[data-state="COMPLETE"] .gauge-needle { opacity: 0; }
.gauge[data-state="IDLE"] .gauge-reading,
.gauge[data-state="SELECTING"] .gauge-reading,
.gauge[data-state="VERIFYING"] .gauge-reading,
.gauge[data-state="ERROR"] .gauge-reading,
.gauge[data-state="COMPLETE"] .gauge-reading { opacity: 0; transform: translate(-50%, 12px); }
.gauge[data-state="PINGING"] .go-button,
.gauge[data-state="DOWNLOADING"] .go-button,
.gauge[data-state="UPLOADING"] .go-button { opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.82); }
.gauge[data-state="PINGING"] .gauge-active,
.gauge[data-state="DOWNLOADING"] .gauge-active,
.gauge[data-state="UPLOADING"] .gauge-active { animation: arc-breathe 1.2s ease-in-out infinite; }
.gauge[data-state="ERROR"] .gauge-active { stroke: var(--danger); }
body[data-test-state="VERIFYING"] .go-ring,
body[data-test-state="SELECTING"] .go-ring { animation: ring-pulse 1.1s ease-in-out infinite; }
@keyframes ring-pulse { 0%,100% { transform: scale(.98); opacity: .35; } 50% { transform: scale(1.08); opacity: .9; } }
@keyframes arc-breathe { 0%,100% { opacity: .82; } 50% { opacity: 1; } }

@media (max-width: 700px) {
  .gauge { width: min(470px, 100vw); height: 390px; }
  .go-button { top: 112px; width: 150px; height: 150px; font-size: 2rem; }
  .gauge-reading { top: 255px; }
}

@media (max-width: 420px) {
  .gauge { width: 390px; max-width: 100vw; height: 345px; margin-left: 50%; transform: translateX(-50%); }
  .gauge-track { stroke-width: 21; }
  .gauge-active { stroke-width: 22; }
  .go-button { top: 101px; width: 130px; height: 130px; font-size: 1.8rem; }
  .gauge-reading { top: 225px; }
  .gauge-ticks text { font-size: 11px; }
}

/* v1.4 animated startup control and stable numeric stage */
.gauge-reading {
  width: 250px;
  min-height: 94px;
  justify-content: flex-start;
  pointer-events: none;
}
.gauge-reading strong {
  width: 100%;
  min-height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
}
.go-button { isolation: isolate; }
.go-button::before { transform-origin: center; }
body[data-test-state="SELECTING"] .go-button,
body[data-test-state="VERIFYING"] .go-button {
  opacity: 1;
  box-shadow: 0 12px 42px rgba(232,93,4,.18);
  animation: startup-button-breathe 1.35s ease-in-out infinite;
}
body[data-test-state="SELECTING"] .go-button::before,
body[data-test-state="VERIFYING"] .go-button::before { animation: startup-ring-spin 2.4s linear infinite; }
body[data-test-state="SELECTING"] #go-button-label,
body[data-test-state="VERIFYING"] #go-button-label { animation: startup-label-blink 1.05s ease-in-out infinite; }
body[data-test-state="SELECTING"] .go-ring,
body[data-test-state="VERIFYING"] .go-ring { animation: startup-outer-ring 1.35s ease-out infinite; }

@keyframes startup-button-breathe {
  0%,100% { transform: translateX(-50%) scale(.985); }
  50% { transform: translateX(-50%) scale(1.035); }
}
@keyframes startup-ring-spin { to { transform: rotate(360deg); } }
@keyframes startup-label-blink { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes startup-outer-ring {
  0% { transform: scale(.92); opacity: .65; }
  75%,100% { transform: scale(1.16); opacity: 0; }
}

@media (max-width: 420px) {
  .gauge-reading { width: 205px; min-height: 82px; }
  .gauge-reading strong { min-height: 52px; font-size: clamp(2.35rem, 15vw, 3.45rem); }
}
/* Keep the live phase and number below the needle hub so they never visually collide. */
.gauge-reading { top: 300px; }
@media (max-width: 700px) { .gauge-reading { top: 275px; } }
@media (max-width: 420px) { .gauge-reading { top: 248px; } }
.gauge-reading { top: 312px; }
@media (max-width: 700px) { .gauge-reading { top: 287px; } }
@media (max-width: 420px) { .gauge-reading { top: 258px; } }