.meter-panel {
    background: radial-gradient(ellipse at 50% 38%, #192e41 0%, #121d29 68%);
    overflow: hidden;
}
.gauge {
    position: relative;
    width: 300px;
    height: 300px;
    padding: 0;
    margin: 2px auto 0;
    background: none;
    transition: none;
    isolation: isolate;
}
.speed-readout {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 96px;
    margin: 0 0 18px;
    padding: 0 12px;
    text-align: center;
}
.speed-readout strong {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -2px;
    min-width: 190px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.speed-readout > span {
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--accent);
}
.speed-readout small {
    font-size: 10px;
    margin-top: 5px;
    color: var(--muted);
}
.dial {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.dial-track,
.dial-value {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    transform: rotate(135deg);
    transform-origin: 150px 150px;
}
.dial-track {
    stroke: #2a3e50;
    stroke-dasharray: 75 100;
}
.dial-value {
    stroke: url(#dial-gradient);
    stroke-dasharray: 0 100;
    filter: drop-shadow(0 0 6px #54e2c260);
}
.dial-ticks line {
    stroke: #3a5268;
    stroke-width: 1;
}
.dial-ticks .major {
    stroke: #7290a8;
    stroke-width: 1.5;
}
.dial-scale text {
    fill: #b6cadb;
    font:
        10px "Segoe UI",
        sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.dial-needle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-135deg);
    transform-origin: 50% 50%;
    will-change: transform;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
.needle-body {
    fill: #ffcc80;
    stroke: #fff0cb;
    stroke-width: 1;
    filter: drop-shadow(0 0 5px #ffbb5c90);
}
.needle-hub {
    fill: #192d40;
    stroke: #ffe2ab;
    stroke-width: 2.5;
}
.needle-pin {
    fill: #fff0cb;
}
.gauge[data-state="ready"] .dial-needle {
    animation: rev-needle 3.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.gauge[data-state="ready"] .dial-value {
    animation: rev-arc 3.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.gauge[data-state="ready"] + .speed-readout small {
    color: #a9c3d5;
}
@keyframes rev-needle {
    0%,
    12%,
    100% {
        transform: rotate(-135deg);
    }
    35% {
        transform: rotate(24deg);
    }
    48% {
        transform: rotate(-46deg);
    }
    65% {
        transform: rotate(85deg);
    }
    83% {
        transform: rotate(-125deg);
    }
}
@keyframes rev-arc {
    0%,
    12%,
    100% {
        stroke-dasharray: 0 100;
    }
    35% {
        stroke-dasharray: 44.17 100;
    }
    48% {
        stroke-dasharray: 24.72 100;
    }
    65% {
        stroke-dasharray: 61.11 100;
    }
    83% {
        stroke-dasharray: 2.78 100;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gauge[data-state="ready"] .dial-needle,
    .gauge[data-state="ready"] .dial-value {
        animation: none;
    }
}
.gauge .dial-min,
.gauge .dial-max {
    position: absolute;
    bottom: 43px;
    color: #8ba4ba;
    font-size: 10px;
    letter-spacing: 0;
}
.dial-min {
    left: 48px;
}
.dial-max {
    right: 40px;
}
.gauge[data-phase="upload"] .dial-value {
    stroke: #7eafff;
    filter: drop-shadow(0 0 6px #7eafff60);
}
.gauge[data-phase="upload"] + .speed-readout > span {
    color: #7eafff;
}
.meter-panel canvas {
    height: 150px;
    margin-top: 0;
    margin-bottom: 12px;
}
.metrics strong {
    font-variant-numeric: tabular-nums;
}
.test-period-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 16px;
    color: #a9bdd0;
    font-size: 11px;
}
.test-period-legend > span {
    display: flex;
    align-items: center;
    gap: 7px;
}
.period-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.period-dot.morning {
    background: #6ab5ff;
}
.period-dot.afternoon {
    background: #f4cd60;
}
#wifi-overview tr.test-period-morning td {
    background: #17558f;
    color: #f4f9ff;
    border-bottom-color: #3b7cba;
}
#wifi-overview tr.test-period-afternoon td {
    background: #f2c64b;
    color: #24200e;
    border-bottom-color: #bd921e;
}
#wifi-overview tr.test-period-morning td:first-child {
    border-left: 5px solid #64baff;
}
#wifi-overview tr.test-period-afternoon td:first-child {
    border-left: 5px solid #ffed94;
}
#wifi-overview tr.test-period-morning td:first-child > strong {
    color: #ffffff;
}
#wifi-overview tr.test-period-afternoon td:first-child > strong {
    color: #181709;
}
#wifi-overview tr.test-period-morning td small {
    color: #d3e9ff;
}
#wifi-overview tr.test-period-afternoon td small {
    color: #51400d;
}
#wifi-overview tr.test-period-morning .quiet {
    color: #ffffff;
    border-color: #72acdf;
}
#wifi-overview tr.test-period-afternoon .quiet {
    color: #33280b;
    border-color: #8b6d14;
}
#wifi-overview tr.test-period-morning:hover td {
    background: #1c65a8;
}
#wifi-overview tr.test-period-afternoon:hover td {
    background: #ffda67;
}
.test-complete {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    padding: 16px 18px;
    margin: 0 0 18px;
    border: 1px solid #3b9f84;
    border-radius: 13px;
    background: linear-gradient(110deg, #163b32, #122c2a);
    animation:
        complete-enter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both,
        complete-glow 1.2s ease-out 0.4s 2;
}
.complete-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    position: relative;
}
.complete-icon:after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1px solid #54e2c2;
    border-radius: 50%;
    animation: complete-ripple 1s ease-out 0.4s 2 both;
    pointer-events: none;
}
.complete-icon svg {
    width: 100%;
    height: 100%;
    stroke: #72f1ce;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.complete-circle {
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    animation: complete-draw 0.6s ease-out 0.1s forwards;
}
.complete-check {
    stroke-dasharray: 35;
    stroke-dashoffset: 35;
    animation: complete-draw 0.35s ease-out 0.55s forwards;
}
.complete-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.complete-copy strong {
    font-size: 17px;
    color: #8af4d5;
}
.complete-copy span {
    font-size: 12px;
    color: #c3e5db;
}
.complete-copy small {
    font-size: 10px;
    color: #99bcaf;
    overflow-wrap: anywhere;
}
.meter-panel:has(.gauge[data-state="complete"]) {
    border-color: #3b806e;
}
.meter-panel:has(.gauge[data-state="complete"]) #phase {
    color: #8af4d5;
}
@keyframes complete-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes complete-draw {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes complete-ripple {
    from {
        opacity: 0.65;
        transform: scale(0.95);
    }
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}
@keyframes complete-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 #54e2c200;
    }
    45% {
        box-shadow: 0 0 22px 1px #54e2c21c;
    }
}
@media (prefers-reduced-motion: reduce) {
    .test-complete,
    .complete-icon:after,
    .complete-circle,
    .complete-check {
        animation: none !important;
    }
    .complete-circle,
    .complete-check {
        stroke-dashoffset: 0;
    }
    .complete-icon:after {
        display: none;
    }
}
.test-server {
    margin: 24px 0 16px;
    padding: 18px;
    border: 1px solid #2b4054;
    border-radius: 12px;
    background: #0c172380;
    text-align: left;
}
.server-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}
.server-symbol {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #173e37;
    color: #54e2c2;
    flex-shrink: 0;
}
.server-symbol svg {
    width: 25px;
    height: 25px;
}
.server-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.server-title > span {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #94a7ba;
}
.server-title strong {
    font-size: 19px;
    line-height: 1.5;
}
.server-title small {
    font-size: 11px;
    color: #94a7ba;
    overflow-wrap: anywhere;
}
.server-status {
    margin-left: auto;
    font-size: 10px;
    color: #a6bbce;
    white-space: nowrap;
    background: #233344;
    padding: 5px 9px;
    border-radius: 20px;
}
.server-status[data-state="connected"],
.server-status[data-state="done"] {
    color: #54e2c2;
    background: #19382f;
}
.server-status[data-state="error"] {
    color: #ffb1bc;
    background: #49232c;
}
.connection-path {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 0.8fr) auto minmax(
            0,
            1fr
        );
    gap: 12px;
    align-items: center;
    border-top: 1px solid #263a4c;
    margin-top: 17px;
    padding-top: 16px;
}
.connection-path > div {
    min-width: 0;
}
.connection-path div > span {
    display: block;
    font-size: 8px;
    letter-spacing: 1px;
    color: #8ea4b9;
}
.connection-path strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    overflow-wrap: anywhere;
    margin-top: 5px;
}
.connection-arrow {
    color: #54e2c2;
    font-size: 19px;
}
.test-server .server-location {
    font-size: 11px;
    color: #94a7ba;
    margin: 16px 0 5px;
}
.server-location strong {
    font-weight: 500;
    color: #bccddd;
}
.test-server .server-description {
    font-size: 11px;
    color: #94a7ba;
    margin: 0;
    line-height: 1.6;
}
@media (max-width: 420px) {
    .test-server {
        padding: 14px;
    }
    .server-heading {
        gap: 9px;
    }
    .server-status {
        font-size: 9px;
        padding: 4px 7px;
    }
    .connection-path {
        gap: 7px;
    }
    .connection-path strong {
        font-size: 11px;
    }
}
.meter-panel #phase {
    display: flex;
    align-items: center;
    gap: 7px;
}
.meter-panel:has(.gauge[data-state="running"]) #phase:before {
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
    0%,
    100% {
        opacity: 0.4;
        box-shadow: 0 0 0 0 #54e2c200;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 0 4px #54e2c218;
    }
}
@media (max-width: 420px) {
    .gauge {
        width: 270px;
        height: 270px;
    }
    .speed-readout strong {
        font-size: 37px;
    }
    .speed-readout {
        min-height: 90px;
        margin-bottom: 16px;
    }
    .gauge .dial-min,
    .gauge .dial-max {
        bottom: 39px;
    }
    .dial-min {
        left: 43px;
    }
    .dial-max {
        right: 36px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .meter-panel #phase:before {
        animation: none !important;
    }
}