/* Internet Speed Test (Release O): start → live measurement → results, one stage at a time. */
.st-page { display: grid; gap: 1rem; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.st-app { padding: 1.25rem; min-height: 22rem; display: grid; }
.st-stage { display: grid; justify-items: center; align-content: center; gap: .9rem; text-align: center; }
.st-stage[hidden] { display: none; }

.st-go {
  width: min(14rem, 62vw); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 30% 25%, #ff9a7a, var(--ds-primary, #23803d) 60%, #8f2d18);
  color: #fff; font: inherit; font-size: 1.35rem; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 14px 40px rgba(35, 128, 61, .35), inset 0 -6px 18px rgba(0, 0, 0, .18);
  transition: transform .15s ease;
}
.st-go:hover { transform: scale(1.02); }
.st-go:active { transform: scale(.98); }
.st-go:focus-visible { outline: 3px solid var(--ds-link, #1d7536); outline-offset: 4px; }
.st-hint, .st-server { margin: 0; color: var(--ds-muted, #5b6474); font-size: .95rem; }
.st-server-k { font-weight: 700; color: var(--ds-text, #14181f); }
.st-saver, .st-keep { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 600; cursor: pointer; }
.st-saver input, .st-keep input { width: 1.2rem; height: 1.2rem; accent-color: var(--ds-primary, #23803d); }
.st-error { margin: 0; padding: .65rem .9rem; border-radius: 10px; background: rgba(180, 35, 24, .1); color: var(--ds-danger, #b42318); font-weight: 600; }

.st-phase { margin: 0; font-weight: 700; font-size: 1.05rem; }
.st-gauge { position: relative; width: min(20rem, 86vw); }
.st-gauge svg { width: 100%; height: auto; display: block; }
.st-arc-bg, .st-arc { fill: none; stroke-width: 14; stroke-linecap: round; }
.st-arc-bg { stroke: var(--ds-surface-2, #eef1f6); }
.st-arc { stroke: var(--ds-primary, #23803d); stroke-dasharray: 0 100; transition: stroke-dasharray .2s linear; }
.st-now { position: absolute; left: 0; right: 0; bottom: .2rem; margin: 0; font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-now small { font-size: .9rem; font-weight: 600; color: var(--ds-muted, #5b6474); }
.st-progress { width: min(20rem, 86vw); height: 6px; border-radius: 99px; background: var(--ds-surface-2, #eef1f6); overflow: hidden; }
.st-progress span { display: block; height: 100%; width: 0; background: var(--ds-primary, #23803d); transition: width .2s linear; }
.st-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: min(24rem, 92vw); margin: 0; }
.st-mini div { display: grid; gap: .1rem; }
.st-mini dt { font-size: .78rem; color: var(--ds-muted, #5b6474); }
.st-mini dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-cancel { min-height: 44px; }

.st-big { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; width: 100%; max-width: 32rem; }
.st-big-item { padding: 1rem; border-radius: 14px; background: var(--ds-surface-2, #f3f4f6); }
.st-k { margin: 0; font-weight: 700; color: var(--ds-muted, #5b6474); }
.st-v { margin: .2rem 0 0; font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-v small { font-size: .9rem; font-weight: 600; color: var(--ds-muted, #5b6474); }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; width: 100%; max-width: 32rem; margin: 0; text-align: left; }
.st-grid div { padding: .55rem .7rem; border: 1px solid var(--ds-border, #e3e6eb); border-radius: 10px; }
.st-grid .st-grid-wide { grid-column: 1 / -1; }
.st-grid dt { font-size: .8rem; color: var(--ds-muted, #5b6474); }
.st-grid dd { margin: .1rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-na { font-weight: 600; color: var(--ds-muted, #5b6474); }
.st-diag { width: 100%; max-width: 32rem; text-align: left; }
.st-diag h2, .st-history h2 { font-size: 1.05rem; margin: .2rem 0 .4rem; }
.st-diag ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.st-na-note { margin: .5rem 0 0; font-size: .85rem; color: var(--ds-muted, #5b6474); }
.st-actions { display: grid; justify-items: center; gap: .4rem; }
.st-history { width: 100%; max-width: 32rem; text-align: left; }
.st-history ol { margin: 0 0 .6rem; padding-left: 1.2rem; display: grid; gap: .25rem; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .st-big { grid-template-columns: 1fr; } .st-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .st-arc, .st-progress span, .st-go { transition: none; } }