body .connection-action{position:relative;display:inline-flex!important;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:10px!important;border-radius:14px!important;background:rgba(23,43,61,.78)!important;border:1px solid rgba(175,220,239,.28)!important;color:#d6e9f2!important;flex-shrink:0}
.connection-action svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.connection-dot{position:absolute;right:5px;bottom:5px;width:7px;height:7px;border-radius:50%;background:#91a6b4}
.connection-action[data-quality=connected] .connection-dot{background:#70e0bd}
.connection-action[data-quality=unstable] .connection-dot,.connection-action[data-quality=service] .connection-dot{background:#ffd18c}
.connection-action[data-quality=offline] .connection-dot,.connection-action[data-quality=unreachable] .connection-dot{background:#ffa4ab}
body dialog#connection-diagnostics{box-sizing:border-box;position:fixed;top:50%;left:50%;right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%);width:700px;max-width:calc(100vw - 32px);max-height:calc(100vh - 40px);padding:28px;border:1px solid #527285;border-radius:26px;background:linear-gradient(130deg,#21394a,#101d30);color:#edf7fc;box-shadow:0 22px 70px #0009;overflow:auto;font-size:16px;line-height:1.5}
#connection-diagnostics::backdrop{background:#020913b8}
.connection-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}#connection-diagnostics .connection-heading h2{margin:0;font-size:28px}
body #connection-diagnostics button,body .connection-notice button{min-height:44px;padding:11px 16px;border-radius:14px;border:1px solid #668292;background:#ffffff0d;color:#edf7fc;font:inherit;cursor:pointer}
body #connection-diagnostics button:focus,body .connection-action:focus,body .connection-notice button:focus{outline:3px solid #68e8fa;outline-offset:3px;border-radius:14px}
#connection-diagnostics button:disabled{opacity:.5;cursor:default}#connection-diagnostics .connection-state{font-size:21px;font-weight:700;color:#77e3c6;margin-top:24px}#connection-diagnostics .connection-state[data-quality=offline],#connection-diagnostics .connection-state[data-quality=unreachable]{color:#ffb5bb}#connection-diagnostics .connection-state[data-quality=unstable],#connection-diagnostics .connection-state[data-quality=service]{color:#ffd18c}
#connection-diagnostics .connection-muted{color:#b4c9d6;font-size:14px}#connection-diagnostics .connection-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
body #connection-diagnostics .connection-primary{background:#c7f2fc;color:#102b3c;font-weight:700}#connection-diagnostics .connection-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}#connection-diagnostics .connection-stats>div{padding:18px 12px;border:1px solid #486476;border-radius:18px;background:#07172866}#connection-diagnostics .connection-stats strong{display:block;font-size:24px;white-space:nowrap}#connection-diagnostics .connection-stats span{display:block;color:#b4c9d6;font-size:13px;margin-top:6px}#connection-diagnostics .connection-result{color:#cce9f4}
body .connection-notice{position:fixed;z-index:10000;bottom:22px;left:50%;transform:translateX(-50%);box-sizing:border-box;max-width:calc(100vw - 32px);width:max-content;display:flex;gap:18px;align-items:center;padding:12px 16px;border:1px solid #b48e59;border-radius:18px;background:#142538f5;color:#ffe0b1;box-shadow:0 8px 30px #0007;font-size:16px}
.connection-notice[data-quality=connected]{color:#a1edd7;border-color:#4d917f}.connection-notice span{min-width:0}.connection-notice button{white-space:nowrap}
body #connection-diagnostics [hidden],body .connection-notice[hidden]{display:none!important}
body[data-tv=true] .connection-action{width:58px;min-width:58px;height:58px}body[data-tv=true] .connection-action svg{width:32px;height:32px}
body[data-tv=true] dialog#connection-diagnostics{width:960px;padding:32px;font-size:23px}body[data-tv=true] #connection-diagnostics .connection-heading h2{font-size:34px}body[data-tv=true] #connection-diagnostics .connection-state{font-size:28px}body[data-tv=true] #connection-diagnostics .connection-muted{font-size:20px}body[data-tv=true] #connection-diagnostics .connection-stats strong{font-size:32px}body[data-tv=true] #connection-diagnostics .connection-stats span{font-size:19px}body[data-tv=true] #connection-diagnostics button,body[data-tv=true] .connection-notice button{min-height:58px}body[data-tv=true] .connection-notice{font-size:23px;bottom:32px}
@media(max-width:600px){body dialog#connection-diagnostics{padding:20px;max-height:calc(100vh - 24px);max-width:calc(100vw - 20px)}.connection-heading{align-items:flex-start}#connection-diagnostics .connection-heading h2{font-size:24px}#connection-diagnostics .connection-stats{grid-template-columns:1fr}#connection-diagnostics .connection-stats>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px}#connection-diagnostics .connection-stats strong{font-size:24px}#connection-diagnostics .connection-stats span{margin:0;text-align:right}#connection-diagnostics .connection-actions{flex-direction:column}body .connection-notice{bottom:100px;flex-wrap:wrap;gap:8px;width:calc(100vw - 24px);font-size:14px}body .glassy-top-tools .connection-action{width:38px;min-width:38px;height:40px;padding:6px!important}}

#connection-diagnostics p{line-height:1.5}#connection-diagnostics>p{font-size:inherit}#connection-diagnostics .connection-state[data-quality=checking]{color:#b4c9d6}#connection-diagnostics .connection-actions>button{margin:4px} .connection-notice>span{margin-right:12px}

@media(max-width:360px){
 #connection-diagnostics .connection-heading{flex-wrap:wrap;gap:12px}
 #connection-diagnostics .connection-heading button{margin-left:auto}
}

body[data-tv=true] #connection-diagnostics{width:1000px!important;max-width:calc(100vw - 80px)!important;max-height:calc(100vh - 80px)!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;margin:0!important;transform:translate(-50%,-50%)!important;font-size:24px!important}body[data-tv=true] #connection-diagnostics>p:not(.connection-muted):not(.connection-state){font-size:24px!important}

/* Reserve room for search, profile and network status. At narrow widths the
   logo gets its own row rather than widening the visual viewport. */
@media(max-width:960px){
 /* Header columns belong to glassy-mobile.css, including this action. */
 body .glassy-top-tools .connection-action{width:44px;min-width:44px;height:44px}
}