:root{--accent:#2f80ff;--accent2:#a932f4;--bg:#061326;--panel:#091a2e;--text:#f5f8ff;--muted:#91a3bb}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;background:transparent;color:var(--text)}body{padding:0}.ia-widget{min-height:100%;padding:22px;border:1px solid #29405e;border-radius:18px;background:radial-gradient(circle at 35% 48%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 36%),var(--bg);overflow:hidden}.ia-widget>header{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid #ffffff18}.ia-widget>header a{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:800}.ia-widget>header b{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#10294d}.ia-widget>header small{color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(270px,1.2fr) minmax(250px,.8fr);gap:28px;align-items:center;padding:25px 0}.gauge{text-align:center}.arc{position:relative;width:min(360px,90%);aspect-ratio:2/1;margin:0 auto 5px;overflow:hidden}.arc:before{content:"";position:absolute;inset:7% 0 -95%;border:18px solid transparent;border-top-color:var(--accent);border-left-color:#23c7ff;border-right-color:var(--accent2);border-radius:50%;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 55%,transparent))}.arc:after{content:"0    10    100    500    1G    5G";position:absolute;left:9%;right:9%;bottom:13%;color:#dbe8fa;font-size:11px;font-weight:800;word-spacing:23px}.arc i{position:absolute;z-index:2;left:50%;bottom:3%;width:34%;height:6px;transform:rotate(-160deg);transform-origin:0 50%;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:transform .35s}.gauge>strong{display:block;font-size:54px;line-height:1}.gauge>span{color:var(--muted);font-weight:700}.gauge>b{display:block;margin:9px;color:#36e79a;font-size:12px}.gauge button{min-width:185px;margin-top:9px;padding:13px 18px;border:0;border-radius:10px;background:linear-gradient(100deg,var(--accent),var(--accent2));color:white;font:inherit;font-weight:800;cursor:pointer}.gauge button:disabled{opacity:.65;cursor:wait}.metrics{display:grid;gap:10px}.metrics article,.minis{display:flex;align-items:center;gap:16px;min-height:92px;padding:16px;border:1px solid #29405e;border-radius:14px;background:color-mix(in srgb,var(--panel) 92%,transparent)}.metrics article>i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#123a73;color:#4ba0ff;font-size:29px;font-style:normal}.metrics .upload>i{background:#40165e;color:#ca55ff}.metrics .ping>i{background:#07503e;color:#35e4a8}.metrics article>span,.minis>span{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em}.metrics strong{display:inline-block;min-width:80px;margin:7px 8px 0 0;color:var(--text);font-size:25px;letter-spacing:0}.metrics small{letter-spacing:0}.minis{display:grid;grid-template-columns:1fr 1fr}.minis span+span{padding-left:18px;border-left:1px solid #29405e}.ia-widget>footer{display:flex;justify-content:space-between;gap:15px;padding-top:14px;border-top:1px solid #ffffff18;color:var(--muted);font-size:11px}.ia-widget>footer a{color:#45a9ff;text-decoration:none}@media(max-width:650px){.ia-widget{padding:16px}.layout{grid-template-columns:1fr}.arc{width:min(320px,94%)}.ia-widget>header small{display:none}.ia-widget>footer{flex-direction:column}.metrics article{min-height:78px}.arc:after{word-spacing:13px}}

html,body{min-width:0;min-height:0;background:var(--bg)!important;overflow:hidden}.ia-widget{position:relative;width:100%;min-height:0;border:0;border-radius:var(--radius,18px)!important;background:radial-gradient(circle at 35% 48%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 36%),var(--bg)}.ia-widget:after{content:"";position:absolute;z-index:20;inset:1px;pointer-events:none;border:var(--widget-border-width,1px) var(--widget-border-style,solid) var(--widget-border,#29405e);border-radius:max(0px,calc(var(--radius,18px) - 1px))}.ia-widget.hide-header>header,.ia-widget.hide-footer>footer{display:none}

.arc{width:min(430px,100%)!important;height:285px!important;aspect-ratio:auto!important;margin:0 auto -30px!important;overflow:visible!important}.arc:before,.arc:after{display:none!important}.arc svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 12px #267dff55)}.gauge-track{fill:none;stroke:url(#gauge-gradient);stroke-width:18}.gauge-ticks path{fill:none;stroke:#315579;stroke-width:3}.gauge-labels{fill:#f6f9ff;font-size:13px;font-weight:800;text-anchor:middle}.gauge-needle{transform-origin:210px 236px;transform:rotate(-115deg);transition:transform .7s cubic-bezier(.22,.61,.36,1);filter:drop-shadow(0 0 8px #2acaff99)}.gauge-needle path,.gauge-needle circle{fill:url(#needle-gradient)}

/* Exact visual proportions used by the main speed-test dashboard. */
.layout{grid-template-columns:minmax(420px,1.45fr) minmax(300px,.85fr);gap:44px;padding:20px 0}.gauge{position:relative;padding-top:2px}.arc{width:min(540px,100%)!important;height:385px!important;margin:0 auto -76px!important}.gauge-track{stroke-width:13}.gauge-ticks path{stroke:#315579;stroke-width:2.5}.gauge-labels{font-size:13px}.gauge-needle path{d:path("M203 236 L210 123 L217 236 Z")}.gauge-needle circle{display:none}.gauge>strong{font-size:48px}.gauge>span{display:block;margin-top:3px;font-size:14px}.gauge>b{margin:13px 0 0;font-size:11px}.gauge button{min-width:210px;margin-top:18px;padding:14px 20px}.metrics{gap:11px}.metrics article{min-height:105px;padding:18px}.metrics article>i{width:44px;height:44px;font-size:27px}.metrics strong{font-size:22px}.minis{min-height:105px;padding:18px}@media(max-width:900px){.layout{grid-template-columns:minmax(350px,1.2fr) minmax(250px,.8fr);gap:22px}.arc{width:min(460px,100%)!important}}@media(max-width:650px){.layout{grid-template-columns:1fr}.arc{width:min(420px,100%)!important;height:310px!important;margin-bottom:-55px!important}}

@media(max-width:760px){.ia-widget{padding:16px}.layout{grid-template-columns:1fr;gap:18px;padding:16px 0}.arc{width:min(460px,100%)!important;height:auto!important;aspect-ratio:420/300!important;margin:0 auto -18%!important}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metrics article,.minis{min-height:86px}.minis{grid-column:1/-1}.ia-widget>footer{flex-wrap:wrap}}
@media(max-width:480px){.ia-widget{padding:12px}.ia-widget>header span{font-size:14px}.layout{gap:12px}.metrics{grid-template-columns:1fr}.minis{grid-column:auto}.gauge button{width:100%;min-width:0}.ia-widget>footer{flex-direction:column}}

/* Match the result column from /speedtest exactly. */
.layout{grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:28px;align-items:stretch}.gauge{display:flex;min-height:100%;flex-direction:column;align-items:center}.gauge button{margin-top:auto}.metrics{gap:10px}.metrics article{min-height:91px;padding:18px;align-items:flex-start;gap:14px;border:1px solid #1e2e47;border-radius:13px;background:#081425}.metrics article>i{flex:0 0 40px;width:40px;height:40px;background:#102850;color:#3d9cff;font-size:0}.metrics article>i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.metrics .upload>i{background:#32164d;color:#bf54ff}.metrics .ping>i{background:#073d3a;color:#26df9a}.metrics article>span{display:block;color:#8292aa;font-size:10px;letter-spacing:0}.metrics strong{display:block;min-width:0;margin:4px 0 0;color:#f5f8ff;font-size:19px;line-height:1.15}.metrics small{display:block;margin-top:2px;color:#8292aa;font-size:10px}.minis{min-height:82px;padding:0;border:1px solid #1e2e47;border-radius:13px;background:#081425;overflow:hidden}.minis>span{display:flex;flex-direction:column;justify-content:center;padding:15px 17px;color:#8292aa;font-size:9px;letter-spacing:.08em}.minis span+span{padding-left:17px;border-left:1px solid #203650}.minis strong{display:block;margin:8px 0 3px;color:#f5f8ff;font-size:20px;line-height:1}.minis small{display:block;margin:0;color:#8292aa;font-size:9px}
@media(max-width:760px){.layout{grid-template-columns:1fr}.gauge{min-height:0}.gauge button{margin-top:18px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.minis{grid-column:1/-1}}
@media(max-width:480px){.metrics{grid-template-columns:1fr}.minis{grid-column:auto}}

/* Keep the interactive CTA above the ECharts canvas and separate both layers. */
.gauge .arc{position:relative;z-index:1;margin-bottom:-48px!important}.gauge button{position:relative;z-index:9999;top:-20px;isolation:isolate;pointer-events:auto}.gauge .arc canvas{top:-40px!important;pointer-events:none!important}
@media(max-width:760px){.gauge .arc{margin-bottom:-12%!important}.gauge .arc canvas{top:-28px!important}}

/* Responsive iframe layout. Keep the CTA outside the chart and let content define height. */
@media(max-width:760px){
  html,body{height:auto;overflow-x:hidden;overflow-y:auto}
  .ia-widget{padding:16px}
  .layout{grid-template-columns:minmax(0,1fr);gap:26px;padding:14px 0 22px}
  .gauge{display:block;min-height:0}
  .gauge .arc{width:min(500px,100%)!important;height:clamp(300px,72vw,370px)!important;aspect-ratio:auto!important;margin:0 auto!important}
  .gauge .arc canvas{top:-40px!important}
  .gauge button{display:block;width:min(320px,100%);min-width:0;margin:0 auto!important}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .metrics article{min-height:92px}
  .metrics article:nth-child(3){grid-column:1/-1}
  .minis{grid-column:1/-1}
  .ia-widget>footer{gap:12px;align-items:flex-start}
}
@media(max-width:520px){
  .ia-widget{padding:13px}
  .ia-widget>header{gap:10px;padding-bottom:13px}
  .ia-widget>header b{width:40px;height:40px}
  .ia-widget>header span{font-size:15px}
  .layout{gap:20px;padding-top:8px}
  .gauge .arc{height:clamp(270px,78vw,330px)!important}
  .gauge button{padding:14px 18px;font-size:16px}
  .metrics{grid-template-columns:minmax(0,1fr)}
  .metrics article:nth-child(3),.minis{grid-column:auto}
  .ia-widget>footer{flex-direction:column}
}

/* Theme palettes are controlled exclusively by data-theme. */
.ia-widget[data-theme="light"]{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --text:#17233a;
  --muted:#627189;
  color:var(--text);
  border-color:#c8d4e3;
  background:radial-gradient(circle at 35% 48%,#1677e814,transparent 36%),var(--bg);
}
.ia-widget[data-theme="light"]>header,
.ia-widget[data-theme="light"]>footer{border-color:#cbd6e4}
.ia-widget[data-theme="light"]>header b{background:#dceaff;color:#155bab}
.ia-widget[data-theme="light"] .metrics article,
.ia-widget[data-theme="light"] .minis{border-color:#cbd7e5;background:#fff;box-shadow:0 8px 24px #4567890b}
.ia-widget[data-theme="light"] .metrics article>span,
.ia-widget[data-theme="light"] .minis>span,
.ia-widget[data-theme="light"] .metrics small,
.ia-widget[data-theme="light"] .minis small{color:#66758c}
.ia-widget[data-theme="light"] .metrics strong,
.ia-widget[data-theme="light"] .minis strong{color:#17233a}
.ia-widget[data-theme="light"] .minis span+span{border-color:#d4deea}
.ia-widget[data-theme="light"]>footer a{color:#096fd2}
.metrics article,.minis{background:var(--card-bg)!important;border-color:var(--card-border)!important}.metrics article>span,.minis>span,.metrics small,.minis small{color:var(--card-muted)!important}.metrics strong,.minis strong{color:var(--card-text)!important}.minis span+span{border-color:var(--card-border)!important}
.ia-widget[data-theme="light"] .metrics article>i{background:#e7f1ff;color:#1677e8}.ia-widget[data-theme="light"] .metrics .upload>i{background:#f4e9ff;color:#9333ea}.ia-widget[data-theme="light"] .metrics .ping>i{background:#e3f8f1;color:#059669}
html,body{height:auto!important;min-height:0!important;background:transparent!important}
.ia-widget[data-theme="custom"]{color:var(--text);border-color:var(--widget-border);background:radial-gradient(circle at 35% 48%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 36%),var(--bg)}
.ia-widget[data-theme="custom"] .metrics strong,.ia-widget[data-theme="custom"] .minis strong{color:var(--text)}