[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#test-error { color: #fca5a5; font-size: 13px; text-align: center; margin-top: 16px; max-width: 36rem; }
button, a { -webkit-tap-highlight-color: transparent; }
button:not(:disabled) { cursor: pointer; }
:focus-visible { outline: 2px solid #22c55e; outline-offset: 4px; }
.dialog { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #000b; }
.dialog-panel { position: relative; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 16px; width: 100%; max-width: 512px; margin: 16px; box-shadow: 0 25px 50px -12px #0004; }
.dialog-content { max-height: 70vh; overflow-y: auto; padding: 24px 48px 24px 24px; font-size: 14px; }
.dialog-content h2 { font-size: 16px; font-weight: 600; color: #f5f5f5; margin-bottom: 16px; }
.dialog-content h3 { font-weight: 600; color: #e5e5e5; margin: 16px 0 4px; }
.dialog-content p { color: #a3a3a3; line-height: 1.625; font-weight: 300; margin-top: 4px; }
.dialog-content a { text-decoration: underline; }
.dialog-close { position: absolute; top: 16px; right: 16px; color: #737373; width: 20px; height: 20px; font-size: 24px; line-height: 16px; }
.cookie-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid #2a2a2a; font-size: 12px; }
.cookie-row > div { flex: 1; }
.cookie-row strong { color: #e5e5e5; font-weight: 500; }
.cookie-row p { color: #737373; }
.switch { width: 44px; height: 24px; flex-shrink: 0; border-radius: 999px; background: #404040; position: relative; opacity: .5; margin-top: 2px; }
.switch span { width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; }
.switch[aria-checked="true"] { background: #22c55e; }
.switch[aria-checked="true"] span { left: 22px; }
.save-cookies { width: 100%; margin-top: 20px; padding: 10px 20px; border: 1px solid #22c55e; border-radius: 999px; color: #22c55e; font-size: 12px; font-weight: 500; }
.save-cookies:hover { background: #22c55e; color: black; }
@media (prefers-reduced-motion: reduce) { .ring-progress { transition: none; } .spin-on-hover:hover svg { animation: none; } }

.speed-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 12px; margin-top: 22px; padding-bottom: 10px; text-align: center; }
.speed-results > div { padding: 12px 4px; border: 1px solid #22c55e30; border-radius: 14px; background: #0d1410; }
.result-label { display: block; color: #d4d4d4; font-size: 12px; margin-bottom: 6px; }
.speed-results strong { font-size: clamp(20px, 5vw, 28px); font-variant-numeric: tabular-nums; }
.result-unit { display: block; font-size: 11px; color: #22c55e; }

.ping-result { grid-column: 1 / -1; }
@media (min-width: 480px) { .speed-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ping-result { grid-column: auto; } }