#win-visitors{--vl-bg:#0c121a;--vl-panel:#111b26;--vl-border:#283441;--vl-muted:#a4b2c3;--vl-text:#eef5fa;--vl-mint:#65edbc;max-width:calc(100vw - 32px);max-height:90vh;border:1px solid #3b4a57;border-radius:14px;overflow:hidden;background:var(--vl-bg);box-shadow:0 30px 110px #0009,0 0 0 1px #0004;color-scheme:dark}
#win-visitors .titlebar,#win-visitors.inactive .titlebar{background:#141e29;color:#9cabbc;padding:10px 15px;font:12px/1.5 "Segoe UI",Arial,sans-serif;border-bottom:1px solid var(--vl-border);gap:10px;flex-shrink:0}
#win-visitors .titlebar .t-icon{color:var(--vl-mint)}
#win-visitors .tbtn{background:#23303e;border:0;border-radius:5px;color:#d4e1ef;width:26px;height:25px;box-shadow:none;font:14px/1 "Segoe UI",sans-serif}
#win-visitors .tbtn:hover{background:#3a4a5b}
#win-visitors .tbtn[data-act=close]:hover{background:#92334c;color:#fff}
#win-visitors .visitor-body{background:radial-gradient(ellipse at 0 0,#16343155,transparent 43%),var(--vl-bg);color:var(--vl-text);padding:26px;font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;border:0;margin:0;max-height:calc(90vh - 48px);overflow:auto;scrollbar-color:#3b4b5c #101922}
#win-visitors *{box-sizing:border-box}
.vl-header,.vl-brand,.vl-toolbar,.vl-toolbar-end,.vl-panel-heading,.vl-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.vl-brand{justify-content:flex-start;gap:14px}
.vl-brand-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border:1px solid #3a695b;background:#1a3b30;border-radius:13px;color:#83f4ca;font-size:30px;line-height:1}
.vl-eyebrow{font:12px/1.6 Consolas,monospace;letter-spacing:.13em;color:var(--vl-muted)}
#win-visitors h2{font:600 28px/1.3 "Segoe UI",Arial,sans-serif;letter-spacing:-.6px;color:#f0f8fa;margin:2px 0 0}
#win-visitors h2 span{color:#68d9b0}
.vl-connection{font:12px/1.4 "Segoe UI",sans-serif;color:#b5c6dc;padding:7px 10px;border-radius:20px;background:#1b2938;white-space:nowrap;border:1px solid #354455;display:flex;align-items:center;gap:7px}
.vl-connection:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.vl-connection[data-state=live]{color:#8aefc9;background:#153229;border-color:#2b5546}
.vl-connection[data-state=error]{color:#ffd28a;background:#322819;border-color:#6a4e24}
.vl-toolbar{margin:24px 0 20px;gap:12px;flex-wrap:wrap}
#win-visitors button:not(.tbtn),#win-visitors select{font:14px/1.4 "Segoe UI",Arial,sans-serif;cursor:pointer;color:#c2cedc;background:#16222f;border:1px solid #344353;border-radius:7px;padding:8px 12px;min-height:36px}
#win-visitors button:not(.tbtn):hover,#win-visitors select:hover{background:#29394a;color:white}
#win-visitors button:focus-visible,#win-visitors select:focus-visible,#win-visitors summary:focus-visible,#win-visitors .vl-heat-cell:focus-visible{outline:2px solid var(--vl-mint);outline-offset:3px}
#win-visitors button:disabled{opacity:.6;cursor:default}
.vl-tabs{display:flex;gap:4px;border:1px solid var(--vl-border);border-radius:9px;padding:3px;background:#0e1823}
#win-visitors .vl-tabs button{border:0;background:transparent;padding:6px 14px;color:#a7b8ca}
#win-visitors .vl-tabs button[aria-pressed=true]{background:#2a3b4a;color:#f3fbff;box-shadow:0 1px 4px #0004}
#win-visitors .vl-meta{font:12px/1.5 "Segoe UI",Arial,sans-serif;color:var(--vl-muted)}
.vl-message{font-size:14px;color:#bbccdf;background:#172638;border:1px solid #2d4561;border-radius:8px;padding:12px 14px;margin-bottom:16px}
#win-visitors [hidden]{display:none!important}
.vl-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.vl-people-metrics{margin-bottom:12px}
.vl-people-metrics .vl-stat{background:linear-gradient(135deg,#19312e,#141e2b);border-color:#36504c}
.vl-people-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--vl-border);border:1px solid var(--vl-border);border-radius:11px;overflow:hidden}
.vl-people-summary>div{background:#14212c;padding:20px}
.vl-people-summary strong{display:block;font:550 32px/1.4 "Segoe UI",sans-serif;color:#aeeed4;font-variant-numeric:tabular-nums}
.vl-people-summary span{display:block;font-size:14px;margin:5px 0}
.vl-people-summary small{display:block;font-size:12px;color:var(--vl-muted)}
.vl-stacked{display:flex;height:12px;border-radius:8px;background:#263645;overflow:hidden;gap:2px;margin:8px 0 22px}
.vl-stacked i{height:100%;display:block}
#win-visitors .vl-explainer{font-size:14px;line-height:1.7;color:#c0ceda;margin:12px 0 0}
.vl-http-status{margin-top:16px}
.vl-http-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:20px 0}
.vl-http-stats strong{font:550 28px/1.5 "Segoe UI",sans-serif;display:block;color:#ffd394;font-variant-numeric:tabular-nums}
.vl-http-stats span{font-size:14px;color:#b6c5d5}
.vl-spaced{margin-top:18px}
@media(max-width:760px){.vl-people-summary{grid-template-columns:1fr}.vl-people-summary>div{padding:16px}.vl-http-stats{grid-template-columns:1fr 1fr}#win-visitors .vl-nav{gap:16px;flex-wrap:wrap}.vl-nav button{white-space:nowrap}}
.vl-stat{--metric-color:#65edbc;position:relative;background:linear-gradient(135deg,#182734,#111a25);border:1px solid var(--vl-border);border-radius:11px;padding:17px 18px 16px;overflow:hidden}
.vl-blue{--metric-color:#67bdff}.vl-amber{--metric-color:#ffc77b}.vl-purple{--metric-color:#b3a1ff}
.vl-stat:before{content:"";position:absolute;top:17px;right:17px;width:6px;height:6px;border-radius:2px;background:var(--metric-color)}
.vl-stat>span{display:block;font-size:14px;color:#b9c7d5}
.vl-stat>strong{display:block;font:550 clamp(25px,2.7vw,36px)/1.4 "Segoe UI",Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-1px;margin:8px 0 22px;color:#f2f8ff;position:relative;z-index:1;white-space:nowrap}
.vl-stat>small{position:relative;z-index:1;font-size:12px;color:#a0b0c1;display:block;line-height:1.5}
.vl-spark{position:absolute;right:12px;top:57px;width:44%;height:45px;color:var(--metric-color);opacity:.45;pointer-events:none}
.vl-spark svg{width:100%;height:100%}
.vl-load-accent{position:absolute;right:18px;top:78px;width:28%;height:4px;border-radius:4px;background:linear-gradient(90deg,#b3a1ff22,#b3a1ff88)}
.vl-nav{display:flex;gap:20px;align-items:center;border-bottom:1px solid var(--vl-border);margin:0 0 22px}
#win-visitors .vl-nav button{border:0;border-bottom:2px solid transparent;background:transparent;border-radius:0;padding:10px 0 12px;color:#a4b3c4}
#win-visitors .vl-nav button[aria-pressed=true]{color:#8aefc9;border-bottom-color:var(--vl-mint)}
.vl-nav>span{margin-left:auto;text-align:right}
.vl-main-grid{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(230px,1fr);gap:16px}
.vl-two-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.vl-panel{background:var(--vl-panel);border:1px solid var(--vl-border);border-radius:11px;padding:19px;min-width:0}
#win-visitors h3{font:600 16px/1.5 "Segoe UI",Arial,sans-serif;color:#e4eef6;margin:0}
.vl-panel-heading{margin-bottom:16px;align-items:flex-start;gap:10px;flex-wrap:wrap}
.vl-panel-heading>div>.vl-meta{display:block;margin-top:3px}
#win-visitors select{font-size:12px;min-height:32px;padding:6px 8px;max-width:100%}
.vl-chart{min-height:160px;width:100%}
.vl-chart svg{width:100%;height:auto;display:block;overflow:visible}
.vl-crosshair{opacity:0}
.vl-point{cursor:crosshair;outline:none}
.vl-point:hover .vl-crosshair,.vl-point:focus .vl-crosshair{opacity:.7}
.vl-point:focus circle,.vl-point:hover circle{r:5;fill:currentColor;color:#f5fffd}
.vl-chart-axis{display:flex;justify-content:space-between;color:#97a9bf;font:12px/1.5 Consolas,monospace;gap:14px}
.vl-chart-readout{font:12px/1.5 "Segoe UI",sans-serif;color:#c4d7e5;margin-top:14px;border-top:1px solid var(--vl-border);padding-top:12px;min-height:31px}
.vl-ring-wrap{position:relative;width:174px;max-width:100%;margin:-9px auto 3px}
.vl-ring-wrap svg{display:block;width:100%;height:auto}
.vl-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center}
.vl-ring-center strong{font:550 32px/1.3 "Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
.vl-ring-center span{font-size:12px;color:var(--vl-muted)}
.vl-legend>div{display:grid;grid-template-columns:7px 1fr auto 26px;align-items:center;gap:10px;margin:7px 0;font-size:14px}
.vl-legend i{width:7px;height:7px;border-radius:2px}
.vl-legend b{font-weight:500;font-variant-numeric:tabular-nums}
.vl-legend small{color:var(--vl-muted);text-align:right;font-size:12px}
.vl-bars{max-height:250px;overflow:auto;scrollbar-width:thin}
.vl-bar-row{margin:0 0 16px}
.vl-bar-row:last-child{margin-bottom:0}
.vl-bar-label{display:flex;justify-content:space-between;gap:12px;font-size:14px;align-items:baseline;margin-bottom:7px}
.vl-bar-label>span:first-child{min-width:0;overflow-wrap:anywhere}
.vl-bar-values{display:flex;align-items:baseline;gap:10px;white-space:nowrap;flex-shrink:0}
.vl-bar-values b{font-weight:500;font-variant-numeric:tabular-nums}
.vl-bar-values small{font-size:12px;color:#9baec1;min-width:28px;text-align:right}
.vl-bar-track{background:#233140;height:5px;border-radius:4px;overflow:hidden}
.vl-bar-track i{display:block;height:100%;border-radius:4px}
.vl-empty{color:var(--vl-muted);font-size:14px;padding:26px 0}
.vl-heatmap{margin:4px 0 16px}
.vl-heatmap-row{display:grid;grid-template-columns:30px repeat(24,minmax(0,1fr));gap:4px;align-items:center;margin:5px 0}
.vl-heatmap-row>span:first-child{color:var(--vl-muted);font:12px/1.5 "Segoe UI",sans-serif}
.vl-hour{font:12px/1.5 "Segoe UI",sans-serif;color:var(--vl-muted);overflow:visible}
.vl-heat-cell{display:block;height:16px;border-radius:2px;cursor:crosshair}
.vl-heatmap-key{display:flex;justify-content:flex-end;align-items:center;gap:5px;font-size:12px;color:var(--vl-muted)}
.vl-heatmap-key i{display:block;width:11px;height:11px;border-radius:2px;background:#65edbc}
.vl-heatmap-key i:nth-of-type(1){background:#202e3b}.vl-heatmap-key i:nth-of-type(2){opacity:.3}.vl-heatmap-key i:nth-of-type(3){opacity:.6}
#win-visitors .vl-note{font-size:12px;color:var(--vl-muted);line-height:1.6;margin:14px 0 0}
.vl-feed{margin-top:16px}
.vl-feed ol{padding:0;margin:0;list-style:none;max-height:258px;overflow:auto;scrollbar-width:thin}
.vl-feed li:not(.vl-empty){padding:10px 4px;border-top:1px solid #263341;display:grid;grid-template-columns:minmax(58px,130px) 1fr auto;gap:16px;align-items:baseline;font-size:14px}
.vl-feed time{font:12px/1.5 Consolas,monospace;color:#9cacc1}
.vl-feed b{color:#85e9c1;font:12px/1.5 Consolas,monospace;background:#1e3a32;padding:2px 8px;border-radius:5px}
#win-visitors .vl-view-note{color:#b0c1d2;font-size:14px;line-height:1.6;margin:0 0 18px}
.vl-audience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vl-audience-grid .vl-panel{display:flex;flex-direction:column}
.vl-audience-bars{max-height:230px;overflow:auto;scrollbar-width:thin;flex:1}
.vl-section-heading{margin-bottom:16px;flex-wrap:wrap}
.vl-performance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.vl-speed-card{border-top:2px solid var(--metric-color)}
.vl-speed-card>strong{font:550 29px/1.6 "Segoe UI",sans-serif;color:var(--metric-color);display:block;margin:8px 0}
.vl-speed-card>span,.vl-speed-card>small{display:block}
.vl-speed-card>small{margin-top:12px}
.vl-load-chart{display:flex;gap:9px;min-height:190px}
.vl-hist-column{flex:1;min-width:0;display:flex;flex-direction:column;text-align:center}
.vl-hist-column>b{color:#c3d3e3;font:12px/1.5 Consolas,monospace}
.vl-hist-track{height:138px;display:flex;align-items:flex-end;margin:8px 0;border-bottom:1px solid #354352}
.vl-hist-track i{display:block;width:100%;min-height:1px;border-radius:4px 4px 0 0;opacity:.85}
.vl-hist-column>span{font-size:12px;color:var(--vl-muted);white-space:nowrap}
.vl-engagement{display:flex;gap:18px;align-items:center;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--vl-border)}
.vl-engagement>strong{font-size:34px;font-weight:500;color:#8fefcc;font-variant-numeric:tabular-nums}
.vl-engagement>span{font-size:14px;color:#b9c9d9;max-width:230px}
.vl-reliability{display:flex;justify-content:space-between;gap:32px;margin-top:16px;align-items:center}
.vl-reliability>div:first-child{max-width:60%}
#vl-errors{display:flex;gap:30px}
#vl-errors>div{text-align:center}
#vl-errors strong{display:block;font:500 27px/1.5 "Segoe UI",sans-serif;color:#decfff}
#vl-errors span{font-size:12px;color:var(--vl-muted)}
.vl-footer{margin-top:24px;border-top:1px solid var(--vl-border);padding-top:16px;color:#a7b8c9}
.vl-footer-top{display:flex;justify-content:space-between;gap:12px;font-size:12px;flex-wrap:wrap}
.vl-footer summary{cursor:pointer;font-size:12px;margin-top:12px;display:list-item}
#win-visitors .vl-footer p{font-size:12px;line-height:1.7;color:#a6b8c9;margin:12px 0}
.vl-footer small{font-size:12px;margin-left:12px}
@media(min-width:641px){#win-visitors .visitor-body{min-height:300px}}
@media(max-width:1000px){#win-visitors{left:2vw!important;width:96vw!important}.vl-audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vl-stat{padding:15px}.vl-stat>strong{font-size:28px}.vl-spark{width:35%}.vl-main-grid{grid-template-columns:minmax(0,1.8fr) minmax(210px,1fr)}}
@media(max-width:760px){.vl-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.vl-stat>strong{font-size:32px}.vl-spark{width:42%}.vl-main-grid,.vl-two-grid{grid-template-columns:1fr}.vl-device-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center}.vl-device-panel .vl-panel-heading{grid-column:1/-1}.vl-ring-wrap{margin:-15px auto}.vl-nav>span{display:none}.vl-performance{grid-template-columns:repeat(2,minmax(0,1fr))}.vl-reliability{align-items:flex-start;flex-direction:column;gap:16px}.vl-reliability>div:first-child{max-width:none}}
@media(max-width:640px){#win-visitors{max-height:none;max-width:96vw;border-radius:10px}#win-visitors .visitor-body{max-height:none;padding:18px 14px}#win-visitors h2{font-size:23px}.vl-header{gap:12px;align-items:flex-start;flex-wrap:wrap}.vl-brand-icon{width:42px;height:42px}.vl-eyebrow{font-size:12px;letter-spacing:.05em}.vl-connection{font-size:12px}.vl-toolbar{margin:18px 0}.vl-toolbar-end>.vl-meta{display:none}#win-visitors .vl-tabs button{padding:7px 10px}.vl-toolbar-end{gap:0}#vl-refresh span{display:none}.vl-stat{padding:14px 12px}.vl-stat>strong{font-size:28px}.vl-metrics{gap:9px}.vl-panel{padding:16px}.vl-audience-grid{grid-template-columns:1fr}.vl-nav{gap:24px}.vl-heatmap-row{gap:3px}.vl-heat-cell{height:14px}.vl-feed li:not(.vl-empty){grid-template-columns:62px 1fr auto;gap:8px}.vl-hist-column>span{font-size:12px;writing-mode:vertical-rl;transform:rotate(180deg);align-self:center}.vl-hist-column{gap:3px}.vl-footer small{display:block;margin:10px 0 0}.vl-traffic .vl-panel-heading{gap:12px}.vl-chart{min-height:100px}.vl-chart-readout{font-size:12px}}
@media(prefers-reduced-motion:no-preference){.vl-connection[data-state=live]:before{animation:vl-pulse 3s ease-in-out infinite}@keyframes vl-pulse{50%{box-shadow:0 0 0 4px #65edbc18}}}