/* util-misc.css — what is my IP, speed test, screen resolution (device-net.js) and VAT validator (vat.js) */
#studio.ps{display:block}
.um{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;text-align:left;color:var(--text,#1e2635)}
.um-main{min-width:0;display:flex;flex-direction:column;gap:14px}
.um-side{position:sticky;top:calc(var(--ps-top,0px) + 12px);display:flex;flex-direction:column;gap:12px;min-width:0}
.um-side .ps-box h3{margin-bottom:10px!important}
.um-card{background:var(--panel,#fff);border:1px solid var(--border,#e4e9f2);border-radius:16px;padding:16px 18px;min-width:0}
.um-card h3{margin:0 0 12px;font-size:15px}
.um-ref{margin-top:16px}
.um-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.um-row .grow{flex:1}
.um-c{justify-content:center}
.um-row .ps-go{width:auto;flex:none;padding-left:18px;padding-right:18px}
.um-hint{font-size:12.5px;color:var(--muted,#5a6377);margin:6px 0 0;line-height:1.5}
.um-ta{width:100%;box-sizing:border-box;margin:10px 0;border:1px solid var(--border,#e4e9f2);border-radius:12px;padding:12px 14px;font:16px/1.5 ui-monospace,Consolas,monospace;resize:vertical;background:var(--panel,#fff);color:inherit}
.um-ta:focus,.um-in:focus{outline:0;border-color:var(--accent,#4f6ef7);box-shadow:0 0 0 3px var(--accent-soft,#eef1fe)}
.um-in{height:40px;border:1px solid var(--border,#e4e9f2);border-radius:10px;padding:0 12px;background:var(--panel,#fff);color:inherit;font:14px ui-monospace,Consolas,monospace;box-sizing:border-box}
.um-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.um-kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:7px 14px;font-size:13.5px;align-items:baseline}
.um-kv>span{color:var(--muted,#5a6377)}
.um-kv>b{font-weight:600;overflow-wrap:anywhere}
.um-kv>b.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.um-cpi{border:0;background:none;padding:0 2px;min-width:0;cursor:pointer;color:var(--faint,#8a94a7);font-size:13px}
.um-st{font-size:13.5px;padding:8px 11px;border-radius:10px;background:var(--field,#f4f6fb);margin-bottom:6px;line-height:1.45}
.um-st.good{background:#f0fdf4;color:#166534}.um-st.warn{background:#fffbeb;color:#92400e}.um-st.bad{background:#fef2f2;color:#991b1b}
.um-table{border-collapse:collapse;width:100%;font-size:13px}
.um-table th,.um-table td{border-bottom:1px solid var(--border,#eef1f6);padding:7px 9px;text-align:left;white-space:nowrap}
.um-table th{font-size:12px;color:var(--muted,#5a6377);font-weight:700}
.um-table tr.mine td{background:var(--accent-soft,#eef1fe);font-weight:600}
.um-table code{font-size:12.5px}
.um-b{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--field,#f4f6fb);color:var(--muted,#5a6377);white-space:nowrap}
.um-b.good{background:#dcfce7;color:#166534}.um-b.bad{background:#fee2e2;color:#991b1b}.um-b.warn{background:#fef3c7;color:#92400e}
.um-link{border:0;background:none;padding:0;min-width:0;color:var(--accent,#4f6ef7);font:12.5px ui-monospace,Consolas,monospace;cursor:pointer;text-decoration:underline}
/* VAT */
.um-res{border-width:2px}
.um-res.good{border-color:#86efac}.um-res.bad{border-color:#fca5a5}
.um-rh{display:flex;align-items:center;gap:12px}
.um-flag{font-size:38px;line-height:1}
.um-num{display:block;font:700 22px ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.um-rh span{font-size:13px;color:var(--muted,#5a6377)}
.um-checks{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.um-msg{font-size:14px;margin:8px 0}
.um-vies{display:grid;gap:6px;background:var(--field,#f8fafc);border-radius:10px;padding:10px 12px;margin:8px 0;font-size:13.5px}
.um-vies>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px}
.um-vies span{color:var(--muted,#5a6377)}
.um-steps{margin:0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:6px;color:var(--muted,#5a6377)}
.um-steps b{color:var(--text,#1e2635)}
.um-hist{display:flex;flex-wrap:wrap;gap:5px}
/* IP */
.um-iphero,.um-scr{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 18px}
.um-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#64748b);font-weight:700}
.um-ip{font:800 clamp(28px,6vw,46px)/1.1 ui-monospace,Consolas,monospace;color:var(--accent-dark,#3a52c4);overflow-wrap:anywhere;max-width:100%}
.um-iphero code{font-size:14px;overflow-wrap:anywhere}
.um-map{position:relative;height:220px;border-radius:12px;overflow:hidden;background:#e5e7eb}
.um-tiles{position:absolute;width:768px;height:768px}
.um-tiles img{position:absolute;width:256px;height:256px}
.um-pin{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-18px 0 0 -9px;border-radius:50% 50% 50% 0;background:#ef4444;transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.um-attr{position:absolute;right:4px;bottom:2px;font-size:10px;background:rgba(255,255,255,.8);padding:0 4px;border-radius:3px;color:#333}
/* speed */
.um-speed{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 18px}
.um-gauge{position:relative;width:min(100%,340px)}
.um-gauge svg{width:100%;display:block}
.um-gbg,.um-gfg{fill:none;stroke-width:14;stroke-linecap:round}
.um-gbg{stroke:var(--field,#eef1f6)}
.um-gfg{stroke:url(#g) var(--accent,#4f6ef7);stroke:var(--accent,#4f6ef7);stroke-dasharray:0 252;transition:stroke-dasharray .25s}
.um-gv{position:absolute;left:0;right:0;bottom:6px;text-align:center}
.um-gv b{display:block;font:800 46px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
.um-gv span{font-size:14px;color:var(--muted,#5a6377);font-weight:600}
.um-gv i{display:block;font-style:normal;font-size:12.5px;color:var(--faint,#8a94a7);margin-top:2px}
.um-sres{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%}
.um-sres>div{background:var(--field,#f6f8fb);border-radius:12px;padding:10px;text-align:center}
.um-sres span{display:block;font-size:12px;color:var(--muted,#5a6377)}
.um-sres b{font-size:22px;font-variant-numeric:tabular-nums}
.um-sres i{display:block;font-style:normal;font-size:11.5px;color:var(--faint,#8a94a7)}
.um-go{min-width:200px;font-size:17px!important;padding:12px 28px!important;width:auto}
.um-qual{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.um-qual .um-st{margin:0}
/* screen */
.um-mon{display:flex;flex-direction:column;align-items:center;margin:8px 0}
.um-monin{position:relative;background:#0f172a;border:6px solid #1e293b;border-radius:8px;box-sizing:content-box}
.um-vp{position:absolute;background:rgba(79,110,247,.35);border:1.5px solid #93c5fd;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.um-vp span{font:700 11px system-ui;color:#fff;white-space:nowrap}
.um-stand{width:70px;height:16px;background:#1e293b;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}
.um-feat{display:flex;flex-wrap:wrap;gap:6px}
.um-feat span{font-size:13px;padding:6px 10px;border-radius:999px;background:var(--field,#f4f6fb);color:var(--faint,#8a94a7)}
.um-feat span.on{background:#dcfce7;color:#166534;font-weight:600}
.um-code{margin:0 0 8px;background:#0f172a;color:#e2e8f0;border-radius:10px;padding:10px 12px;font:12px/1.55 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.um-ctest{position:fixed;inset:0;z-index:99999;cursor:pointer;display:flex;align-items:flex-end;justify-content:center}
.um-ctest span{margin-bottom:24px;font:600 14px system-ui;color:#000;opacity:.6}
@media (max-width:900px){.um{grid-template-columns:minmax(0,1fr)}.um-side{position:static}.um-grid2{grid-template-columns:minmax(0,1fr)}.um-sres{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.um-card{padding:14px}.um-kv{grid-template-columns:minmax(0,1fr)}.um-kv>span{margin-top:4px}.um-sres{grid-template-columns:repeat(2,minmax(0,1fr))}.um-gv b{font-size:36px}.um-table th,.um-table td{padding:6px}}
.um .ts-chips{display:flex;flex-wrap:wrap;gap:6px}.um .ts-chips button{padding:7px 13px;border-radius:999px;border:1px solid var(--border-2,#dfe4ee);background:var(--panel,#fff);color:var(--text,#1e2635);font:600 13px inherit;font-family:inherit;cursor:pointer}.um .ts-chips button.on{border-color:var(--accent,#4f6ef7);background:var(--accent-soft,#eef1fe);color:var(--accent-dark,#3a52c4)}