.speed-hero { padding-bottom: 4.25rem; background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%); }
.speed-section { background: #f8fafc; }
.speed-console {
  --meter-color: #2fcbd0;
  margin-top: -2.75rem;
  color: #15213d;
  background: #fff;
  border: 1px solid #e5eaf2;
  border-radius: 20px;
  box-shadow: 0 18px 55px rgba(27, 42, 72, .1);
}
.console-header { align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #edf0f5; }
.console-header h2 { color: #15213d; font-size: clamp(1.35rem, 2.8vw, 2rem); }
.speed-console .speed-kicker { color: #2b3856; font-size: .78rem; letter-spacing: .03em; text-transform: none; }
.console-head-actions { display: flex; align-items: center; gap: .55rem; }
.live-badge { display: none; color: #168e83; background: #eafaf6; border-color: #c8eee6; }
.live-badge.testing::before { background: var(--meter-color); }
.header-test-button {
  min-height: 42px;
  padding: .55rem .9rem;
  color: #315bcb;
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(33, 58, 106, .06);
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}
.header-test-button::before { content: "\21bb"; margin-right: .35rem; color: #3985f5; font-size: 1rem; }
.header-test-button:hover { color: #234aa9; background: #f7f9ff; border-color: #bdcae3; }
.header-test-button:focus-visible { outline: 3px solid rgba(47, 143, 245, .24); outline-offset: 2px; }

.test-stages { gap: .65rem; margin: 1rem 0 1.15rem; padding: .65rem; border: 1px solid #e8ecf2; border-radius: 13px; box-shadow: 0 4px 15px rgba(25, 44, 78, .035); }
.test-stages li { padding: .45rem .55rem; color: #7b8498; background: transparent; border-color: transparent; }
.test-stages li > span { width: 25px; height: 25px; color: #68738a; background: #eef2f7; }
.test-stages strong { color: #26324b; }
.test-stages small { color: #8a94a8; }
.test-stages li[data-state="active"] { color: #16213c; background: #f6f9fc; border-color: #dce5ef; transform: none; }
.test-stages li[data-state="active"] > span { color: #fff; background: var(--meter-color); box-shadow: none; }
.test-stages li[data-state="complete"] { color: #24324b; border-color: transparent; }
.test-stages li[data-state="complete"] > span { background: #9cebd9; }

.result-grid { gap: .85rem; margin: 0 0 1rem; }
.result-card {
  min-height: 114px;
  padding: 1rem 1.05rem;
  background: #fff;
  border: 1px solid #e2e7ef;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(26, 43, 75, .045);
}
.result-card > span { color: #66728a; }
.result-card > span i { color: #fff; background: #29bcc6; }
.result-card:nth-child(2) > span i { background: #3989ef; }
.result-card:nth-child(3) > span i { background: #9a67f5; }
.result-card:nth-child(4) > span i { background: #ff8054; }
.result-card strong { color: #7b8598; }
.result-card strong b { color: #14203b; font-weight: 600; }
.metric-bar { background: #eef2f6; }
.result-card:nth-child(1) .metric-bar em { background: #2fc8ca; }
.result-card:nth-child(2) .metric-bar em { background: #3989ef; }

.meter-layout { grid-template-columns: minmax(330px, 1.15fr) minmax(300px, .85fr); gap: clamp(1.2rem, 4vw, 3.5rem); }
.gauge-wrap { min-height: 390px; }
.speed-gauge { width: min(365px, 82vw); border-radius: 50%; filter: drop-shadow(0 18px 20px rgba(35, 52, 86, .12)); }
.speed-gauge::before { content: ""; position: absolute; inset: 7%; background: #fff; border: 1px solid #eef1f5; border-radius: 50%; }
.meter-ring {
  background: conic-gradient(from 225deg, color-mix(in srgb, var(--meter-color) 62%, #46dad2) 0 var(--meter-angle), #e9edf4 var(--meter-angle) 270deg, transparent 270deg);
  filter: none;
}
.meter-labels span { color: #68738a; }
.meter-needle { background: linear-gradient(#25314b, #1c273f 48%, rgba(53, 66, 94, .2)); filter: drop-shadow(0 5px 6px rgba(24, 34, 56, .23)); }
.meter-hub { background: #fff; border-color: #37435b; }
.gauge-inner span { color: #101b37; font-weight: 500; }
.gauge-inner small { color: #748096; font-weight: 700; }

.connection-settings { padding: 1.05rem; background: #fff; border: 1px solid #e2e7ef; border-radius: 15px; box-shadow: 0 4px 14px rgba(26, 43, 75, .045); }
.speed-console .console-label { color: #26324b; font-size: .85rem; letter-spacing: 0; text-transform: none; }
.detection-status { color: #647089; background: #f7f9fc; border-color: #e1e7ef; }
.detection-status.detection-error { color: #935a16; border-color: #f0d5ae; }
.detected-provider-row { background: #fff; border-color: #e2e7ef; }
.network-avatar { color: #245bc2; background: #e1f7fb; }
.detected-provider-row small { color: #7d879b; }
.detected-provider-row strong { color: #17223d; }
.detected-provider-row div > span { color: #68748b; }
.network-facts div { background: #fff; border-color: #e2e7ef; }
.network-facts dt { color: #8992a4; }
.network-facts dd { color: #27334c; }
.connection-select { color: #667289; }
.connection-select select { color: #24304a; background: #fff; border-color: #dfe5ed; }
.provider-correction summary { color: #4168be; }
.provider-correction[open] summary { color: #254fa8; }
.provider-option { color: #43506a; background: #f7f9fc; border-color: #e0e6ee; }
.provider-option:hover { color: #1d2942; border-color: #b9c6d9; }
.provider-option.active { color: #fff; background: #347fe6; border-color: #347fe6; box-shadow: none; }
.connection-note { color: #5d6b89; background: #f3f5ff; }
.edge-label { border-color: #e5e9ef; }
.edge-icon { color: #fff; background: #ff914d; }
.edge-label strong { color: #25314a; }
.edge-label small { color: #7c879a; }

.speed-console .button { border-radius: 999px; }
.start-button { color: #2d58bd; background: #fff; border-color: #dce3ee; box-shadow: 0 3px 10px rgba(33, 58, 106, .06); }
.start-button:hover { color: #1f479f; background: #f7f9ff; border-color: #bdcae3; }
.cancel-button { color: #344158; background: #f4f6f9; border-color: #dce2ea; }
.progress-track { height: 3px; background: #e9edf3; }
.speed-status { color: #65728a; }
.speed-status.success { color: #317f72; }
.speed-status.error { color: #c74444; }
.rating-card { color: #245547; background: #effaf6; border-color: #cdece2; }
.rating-card p { color: #647a74; }
.measurement-disclosure { color: #7b8598; }

@media (max-width: 900px) {
  .meter-layout { grid-template-columns: 1fr; }
  .connection-settings { width: min(100%, 640px); }
}
@media (max-width: 680px) {
  .console-header { align-items: flex-start; }
  .console-head-actions { flex-direction: row; align-items: center; }
  .test-stages { padding: .45rem; }
  .result-card { min-height: 105px; }
}
@media (max-width: 430px) {
  .speed-console { margin-inline: -.65rem; padding: .9rem; border-radius: 16px; }
  .console-head-actions { gap: .35rem; }
  .live-badge { font-size: .68rem; }
  .header-test-button { min-height: 38px; padding: .45rem .7rem; font-size: .7rem; }
  .test-stages { gap: .2rem; }
  .test-stages li { gap: .42rem; padding: .38rem; }
  .test-stages li > span { width: 23px; height: 23px; }
  .test-stages small { font-size: .59rem; }
  .gauge-wrap { min-height: 300px; }
  .speed-gauge { width: min(292px, 88vw); }
}
@media (prefers-reduced-motion: reduce) {
  .header-test-button, .test-stages li { transition: none; }
}

.completed-actions { margin-top: 1rem; }
.completed-actions .button { min-width: 145px; }
#share-report { color: #fff; background: #347fe6; border-color: #347fe6; }
#share-report:hover { background: #256cc9; border-color: #256cc9; }
@media (max-width: 560px) {
  .completed-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .completed-actions .button { width: auto; min-width: 0; }
}
.report-action-layout { display: contents; }