.iq-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.iq-card {min-width:0;padding:20px;border:2px solid #dce5ee;border-radius:14px;background:#fff;color:#183449;display:flex;flex-direction:column;position:relative}
.iq-card[data-selected="true"] {border-color:#237fdf;box-shadow:0 0 0 3px #237fdf12}
.iq-card-heading {display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.iq-card h3 {font-size:1.3rem;margin:4px 0 0}
.iq-provider-kind {color:#60738a;font-size:.78rem}
.iq-card p,.iq-footnote,#internet-quality-note {color:#52677c;font-size:.86rem;line-height:1.55}
.iq-health {display:flex;align-items:center;gap:7px;font-weight:650;margin:0 0 15px!important}
.iq-health span,.iq-target-dot {width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#8796a8}
.iq-health[data-tone="good"] {color:#197554}
.iq-health[data-tone="good"] span,.iq-target[data-tone="good"] .iq-target-dot {background:#197554}
.iq-health[data-tone="bad"] {color:#a95f0d}
.iq-health[data-tone="bad"] span,.iq-target[data-tone="bad"] .iq-target-dot {background:#bd6a16}
.iq-health[data-tone="critical"] {color:#ae2436}
.iq-health[data-tone="critical"] span {background:#ae2436}
.iq-connection-notice {border-left:3px solid #8796a8;padding:0 0 0 12px;margin:0 0 18px;overflow-wrap:anywhere}
.iq-connection-notice[data-state="disconnected"] {border-left-color:#ae2436}
.iq-connection-notice[data-state="connected"] {border-left-color:#197554}
.iq-connection-notice p {margin:6px 0;font-size:.8rem}
.iq-connection-notice a {display:inline-block;padding:10px 0;font-size:.8rem;text-underline-offset:3px}
.iq-overview {display:flex;align-items:center;gap:22px}
.iq-reply-ring {width:118px;height:118px;flex:0 0 118px;border-radius:50%;background:conic-gradient(#197554 var(--replies),#e7edf3 0);padding:11px}
.iq-reply-ring[data-tone="bad"] {background:conic-gradient(#bd6a16 var(--replies),#f8e2ce 0)}
.iq-reply-ring[data-tone="unknown"] {background:#e7edf3}
.iq-reply-ring[data-tone="critical"] {background:#f4dce0}
.iq-reply-ring>div {background:#fff;width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}
.iq-reply-ring strong {font-size:1.5rem;letter-spacing:0}
.iq-reply-ring span {font-size:.63rem;color:#60738a}
.iq-metrics {display:grid;gap:16px;margin:0;min-width:0}
.iq-metrics dt {font-size:.76rem;color:#60738a;margin-bottom:4px}
.iq-metrics dd {font-size:1.35rem;font-weight:700;margin:0;white-space:nowrap}
.iq-sample-note {font-size:.73rem!important;margin:12px 0 8px}
.iq-targets {margin:14px 0;border-top:1px solid #e7edf3}
.iq-target {display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #e7edf3;font-size:.8rem}
.iq-target>span:nth-child(2) {flex:1}
.iq-target small {display:block;font-size:.7rem;font-weight:400;color:#60738a;margin-top:3px}
.iq-target strong {text-align:right;font-size:.83rem}
.iq-trend {margin:14px 0 0}
.iq-trend figcaption {display:flex;justify-content:space-between;gap:8px;font-size:.72rem;color:#60738a}
.iq-trend svg {display:block;width:100%;height:78px;overflow:visible}
.iq-grid {stroke:#e5ecf3;stroke-width:1;fill:none}
.iq-delay,.iq-loss {fill:none;stroke:#237fdf;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iq-loss {stroke:#bd6a16}
.iq-dot-delay {fill:#237fdf}.iq-dot-loss {fill:#bd6a16}
.iq-time-axis {display:flex;justify-content:space-between;font-size:.72rem;color:#60738a;margin:3px 0 12px}
.iq-trend-empty,.iq-empty {padding:22px 12px;background:#f4f7fa;color:#61758c;font-size:.82rem;border-radius:7px;margin:10px 0}
.iq-details {font-size:.77rem;color:#60738a;margin:12px 0 18px}
.iq-details summary {cursor:pointer;font-weight:600;padding:8px 0}
.iq-details p {font-size:.74rem}
.iq-body {flex:1}
.iq-history-toolbar {display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px;color:#60738a;font-size:.8rem}
.iq-range {display:flex;border:1px solid #d5e0eb;border-radius:8px;overflow:hidden}
.iq-range button {border:0;border-radius:0;padding:9px 12px;color:#536982;background:#fff;min-height:38px;font-size:.77rem}
.iq-range button[aria-pressed="true"] {background:#e4effd;color:#175da8;font-weight:700}
.iq-footnote {margin:14px 0 0}
@media(max-width:760px){.iq-cards{grid-template-columns:1fr}.iq-card{padding:17px}.iq-card-heading{gap:7px}.iq-overview{gap:20px}.iq-reply-ring{width:110px;height:110px;flex-basis:110px}.iq-history-toolbar{flex-wrap:wrap}.iq-range button{min-height:44px}.iq-trend svg{height:80px}}