.latency-widget{padding:20px;container-type:inline-size;background:#111622}
.latency-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.latency-heading .eyebrow{font-size:9px;margin-bottom:4px}
.latency-heading h2{margin:0;font-size:18px;letter-spacing:-.02em}
.latency-live{display:flex;align-items:center;gap:6px;font:10px ui-monospace,monospace;white-space:nowrap;color:#22d3a6}
.latency-live .status-dot{animation:latencyPulse 2.5s ease-in-out infinite}
.latency-notice{font-size:11px;color:#8b93a1;margin:10px 0 16px;line-height:1.5}
.latency-tabs{display:flex;padding:4px;background:#0b0f17;border:1px solid #1c232b;border-radius:8px;gap:4px;margin-bottom:16px}
.latency-tabs button{flex:1;border:1px solid transparent;border-radius:5px;background:transparent;color:#8b93a1;font-size:11px;padding:9px 6px;cursor:pointer}
.latency-tabs button[aria-selected=true]{background:#22d3a614;border-color:#22d3a644;color:#22d3a6}
.latency-tabs button span{font:9px ui-monospace,monospace;margin-left:4px}
.latency-layout{display:grid;grid-template-columns:minmax(175px,.9fr) minmax(0,1.3fr);gap:16px}
.provider-column{min-width:0;border:1px solid #1c232b;border-radius:8px;background:#0b0f17;overflow:hidden}
.provider-columns,.provider-button{display:grid;grid-template-columns:minmax(0,1fr) 58px 35px;gap:4px;align-items:center}
.provider-columns{padding:10px;font-size:9px;color:#8b93a1;border-bottom:1px solid #1c232b}
.provider-columns span:not(:first-child){text-align:right}
.provider-list{max-height:380px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2a323c #0b0f17}
.provider-button{width:100%;min-height:43px;padding:9px 10px;border:0;border-left:2px solid transparent;border-bottom:1px solid #1c232b;background:transparent;color:#c0c6cf;text-align:left;font-size:11px}
.provider-button:last-child{border-bottom:0}.provider-button:hover{background:#ffffff06}
.provider-button[aria-pressed=true]{border-left-color:#22d3a6;background:#22d3a60d;color:#f5f7fa}
.provider-name{overflow-wrap:anywhere}.provider-rtt,.provider-loss{font:10px ui-monospace,monospace;text-align:right;white-space:nowrap}
.provider-rtt{color:#22d3a6}.provider-loss{color:#8b93a1}
.provider-name{font-size:12px;line-height:1.5}
.provider-name>strong,.provider-name>span{display:block}
.provider-name>strong{color:#f5f7fa;font:600 11px/1.6 ui-monospace,monospace}
.provider-name>span{font-size:11px}
.provider-default{display:inline-block;margin-top:4px;padding:2px 5px;border-radius:4px;background:#10b98118;color:#10b981;font-size:9px}
.provider-list::-webkit-scrollbar{width:6px}
.provider-list::-webkit-scrollbar-track{background:#0b0f17}
.provider-list::-webkit-scrollbar-thumb{background:#2a323c;border-radius:6px}
.latency-live,.provider-rtt{color:#10b981}
.latency-live .status-dot{background:#10b981}
.latency-widget:not([data-feed-state=live]) .latency-live{color:#8b93a1}
.latency-widget:not([data-feed-state=live]) .status-dot{background:#8b93a1;animation:none;box-shadow:none}
.provider-button[data-probe-state=stale] .provider-rtt,.provider-button[data-probe-state=error] .provider-rtt{color:#8b93a1}
.target-heading .target-alias-note{margin-top:8px;font:11px/1.5 Arial,sans-serif;color:#8b93a1}
.latency-detail{min-width:0;display:flex;flex-direction:column}
.target-heading h3{margin:0 0 4px;font-size:15px}.target-heading p{margin:0;color:#8b93a1;font:10px/1.5 ui-monospace,monospace;overflow-wrap:anywhere}
.latency-chart{position:relative;min-width:0;margin-top:15px;height:222px;border:1px solid #1c232b;border-radius:7px;background:#0b0f17;overflow:hidden}
#latency-canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.latency-range{display:flex;justify-content:space-between;font-size:9px;color:#8b93a1;margin:8px 0 14px;gap:8px}
.latency-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0}
.latency-metrics>div{padding:10px 5px;border:1px solid #1c232b;border-radius:6px;background:#0b0f17;text-align:center}
.latency-metrics dt{font-size:9px;color:#8b93a1;margin-bottom:5px}
.latency-metrics dd{margin:0;font:11px ui-monospace,monospace;color:#f5f7fa;white-space:nowrap}
.latency-metrics dd small{font-size:8px;color:#8b93a1}
.latency-footer{margin-top:15px;padding-top:12px;border-top:1px solid #1c232b;display:flex;align-items:center;gap:8px;font:9px/1.6 ui-monospace,monospace;color:#8b93a1}
.latency-footer .status-dot{width:5px;height:5px;box-shadow:none}
.latency-tooltip{position:absolute;top:8px;left:45px;background:#12161cf2;border:1px solid #2a323c;border-radius:5px;padding:6px 8px;color:#f5f7fa;font:10px ui-monospace,monospace;pointer-events:none}
@keyframes latencyPulse{50%{opacity:.4;box-shadow:0 0 3px #22d3a6}}
@container(max-width:510px){.latency-layout{grid-template-columns:1fr}.provider-list{max-height:200px}.latency-chart{height:220px}.latency-metrics{gap:8px}.latency-detail{padding-top:3px}}
@media(prefers-reduced-motion:reduce){.latency-live .status-dot{animation:none}}