.webnalytics-v3 .wv3-topbar{
  background:#4263EB;
  color:#fff;
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 10px 0 12px;
}
.webnalytics-v3 .wv3-brand{display:flex;align-items:center;gap:12px}
.webnalytics-v3 .wv3-logo-wrap{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border-radius:12px;background:rgba(255,255,255,.16)} .webnalytics-v3 .wv3-logo{display:block;max-width:48px;max-height:48px;width:auto;height:auto;object-fit:contain}
.webnalytics-v3 .wv3-ver{display:inline-block;margin-left:8px;font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:12px;opacity:.95;background:rgba(255,255,255,.16);padding:3px 8px;border-radius:999px;vertical-align:middle}
.webnalytics-v3 .wv3-title{ font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-weight:700; font-size:16px; }
.webnalytics-v3 .wv3-title span{ font-weight:800; opacity:.92; }
.webnalytics-v3 .wv3-sub{ opacity:.92; margin-top:2px; }

.webnalytics-v3 .wv3-filters{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.webnalytics-v3 .wv3-chip{
  border-radius:999px !important;
  padding:6px 10px !important;
}
.webnalytics-v3 .wv3-compare{
  display:flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:999px;
}
.webnalytics-v3 .wv3-presets .button{ margin-left:6px; }
.webnalytics-v3 .wv3-presets .button-primary,
.webnalytics-v3 .wv3-presets .button-primary:focus{
  background:#fff !important;
  color:#4263EB !important;
  border-color:#f6f7f7 !important;
  box-shadow:none;
}
.webnalytics-v3 .wv3-presets .button-primary:hover{
  background:#f6f7f7 !important;
  border-color:#f6f7f7 !important;
}

.webnalytics-v3 .wv3-rangebar{
  background:#fff;
  border:1px solid #e7e7f1;
  border-radius:12px;
  padding:12px;
  margin-bottom:14px;
}
.webnalytics-v3 .wv3-range-inner{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.webnalytics-v3 .wv3-range-inner input{ width:130px; }
.webnalytics-v3 .wv3-quick{ margin-left:auto; display:flex; gap:10px; }
.webnalytics-v3 .wv3-quick a{ text-decoration:none; }

.webnalytics-v3 .wv3-cards{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap:12px !important;
  margin: 12px 0 14px !important;
}
@media (max-width: 1200px){
  .webnalytics-v3 .wv3-cards{ grid-template-columns: repeat(2, minmax(220px, 1fr)) !important; }
}
@media (max-width: 800px){
  .webnalytics-v3 .wv3-cards{ grid-template-columns: 1fr !important; }
}
.webnalytics-v3 .wv3-card{
  background:#fff !important;
  border:1px solid #e6e6ef !important;
  border-radius:12px !important;
  padding:14px !important;
  box-shadow:0 1px 0 rgba(0,0,0,.03) !important;
}
.webnalytics-v3 .wv3-label{ font-size:12px; color:#6a6a86; margin-bottom:6px; }
.webnalytics-v3 .wv3-value{ font-size:24px; font-weight:900; color:#222; line-height:1.1; }
.webnalytics-v3 .wv3-delta{ margin-top:8px; font-weight:800; font-size:12px; }
.webnalytics-v3 .wv3-delta span{ font-weight:700; color:#6a6a86; margin-left:6px; }

/* Table cell stacked metric + compare */
.webnalytics-v3 .wv3-cell-stack{ display:flex; flex-direction:column; gap:2px; }
.webnalytics-v3 .wv3-cell-stack .wv3-sub{ font-size:12px; line-height:1.1; }
.webnalytics-v3 .wv3-cell-stack .wv3-sub .wv3-delta{ margin-top:0; font-size:12px; }
.webnalytics-v3 .wv3-up{ color:#1f8f4c; }
.webnalytics-v3 .wv3-down{ color:#c22b2b; }

.webnalytics-v3 .wv3-panel{
  background:#fff;
  border:1px solid #e6e6ef;
  border-radius:12px;
  padding:12px;
  margin-bottom:14px;
}
.webnalytics-v3 .wv3-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.webnalytics-v3 .wv3-panel-title{ font-weight:900; }
.webnalytics-v3 .wv3-panel-note{ color:#6a6a86; font-size:12px; }

.webnalytics-v3 .wv3-chart{ height:300px; }

.webnalytics-v3 .wv3-pill{
  background:#f2ecff;
  color:#3a1f77;
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  font-weight:800;
}
.webnalytics-v3 .wv3-muted{ color:#6a6a86; }

/* ---------- Columns toggle modal ---------- */
.wv3-modal{position:fixed;inset:0;z-index:99999}
.wv3-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.wv3-modal-card{position:relative;width:560px;max-width:calc(100% - 24px);margin:90px auto;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden}
.wv3-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eee}
.wv3-modal-head h3{margin:0;font-size:16px}
.wv3-x{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;padding:4px 8px}
.wv3-modal-body{padding:14px 16px;max-height:55vh;overflow:auto}
.wv3-cols-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.wv3-col-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #eee;border-radius:10px;background:#fafafa}
.wv3-col-item input{margin:0}
.wv3-help{color:#666;font-size:12px;margin:10px 0 0}
.wv3-modal-actions{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #eee;background:#fbfbfb}

/* ---------- World map (Geographic) ---------- */
.wv3-map-wrap{border:1px solid #eee;border-radius:14px;background:#fff;margin:12px 0 16px;overflow:hidden}
.wv3-world-map{height:500px}
.wv3-world-map{background:linear-gradient(180deg,#ffffff,#f7f9ff);border:1px solid #e6eaf5;border-radius:14px}
.wv3-world-map.wv3-map-fallback{display:flex;align-items:center;justify-content:center;color:#64748b;font-weight:600}
.wv3-world-map.wv3-map-fallback .wv3-map-fallback-inner{max-width:560px;text-align:center;padding:18px}
.wv3-world-map.wv3-map-fallback .wv3-map-fallback-inner small{display:block;margin-top:6px;color:#94a3b8;font-weight:500}
@media (max-width: 960px){
  .wv3-world-map{height:450px}
}
.wv3-map-wrap .wv3-world-map{height:500px !important;min-height:500px !important}
@media (max-width: 960px){
  .wv3-map-wrap .wv3-world-map{height:450px !important;min-height:450px !important}
}

.wv3-geo-graph{margin:14px 0 18px 0;padding:14px 14px 12px 14px;border:1px solid #e6eaf5;border-radius:14px;background:#fff}
.wv3-geo-graph-title{font-weight:700;margin-bottom:10px;color:#0f172a}
.wv3-geo-row{display:flex;gap:10px;align-items:center;margin:8px 0}
.wv3-geo-cc{width:54px;font-weight:700;color:#334155}
.wv3-geo-val{width:56px;text-align:right;color:#0f172a;font-weight:700}
.wv3-geo-bar{flex:1;height:10px;border-radius:999px;background:#eef2ff;overflow:hidden}
.wv3-geo-bar span{display:block;height:10px;border-radius:999px;background:#1d4ed8;width:0%}
.wv3-empty-note{margin-top:10px;color:#64748b}
.wv3-flag{display:inline-block;min-width:1.2em;margin-right:8px;font-size:14px;vertical-align:baseline}

/* ---------- Device / OS / Browser icons ---------- */
.webnalytics-v3 .wv3-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:8px;vertical-align:-3px}
.webnalytics-v3 .wv3-ico-svg{width:18px;height:18px;fill:#1f2937}


/* Upgrade / AI page */
.wv3-upgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;max-width:1100px}
.wv3-upcard{background:#fff;border:1px solid #eee;border-radius:14px;padding:16px}
.wv3-ul{margin:10px 0 0 18px}
.wv3-upcta{margin-top:14px}
.wv3-status{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;margin:8px 0 12px}
.wv3-ok{background:#e7f7ee;color:#0a7a2f}
.wv3-bad{background:#fdecec;color:#b42318}
.wv3-muted{background:#f2f2f2;color:#555}
.wv3-kv th{width:160px}
.wv3-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width: 980px){.wv3-upgrid{grid-template-columns:1fr}}


/* Heatmap (v3.4.8) */
.webnalytics-v3 .wv3-heatmap-form{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.webnalytics-v3 .wv3-heatmap-form label{ font-weight:600; }
.webnalytics-v3 .wv3-muted{ color:#6b7280; font-size:12px; }


/* Show them when Elements mode selected (form submits + server sets data-mode) */
.webnalytics-v3 .wv3-heatmap-wrap[data-mode="elements"] { }
.webnalytics-v3 .wv3-heatmap-wrap[data-mode="elements"] .wv3-hm-minpct-label, .webnalytics-v3 .wv3-heatmap-wrap[data-mode="elements"] .wv3-hm-minpct{display:inline-block}

.webnalytics-v3 .wv3-heatmap-wrap{
  position:relative;
  margin-top:12px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  min-height:720px;
}
.webnalytics-v3 .wv3-heatmap-iframe{
  width:100%;
  height:720px;
  border:0;
  display:block;
}
.webnalytics-v3 .wv3-heatmap-canvas{
  position:absolute;
  left:0; top:0;
  pointer-events:none;
}
.webnalytics-v3 .wv3-heatmap-legend{
  position:absolute;
  right:12px;
  bottom:12px;
  background:rgba(0,0,0,.55);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

/* Legend internals (v3.4.8) */
.webnalytics-v3 .wv3-hm-legend-row{display:flex;align-items:center;gap:10px}
.webnalytics-v3 .wv3-hm-legend-bar{display:inline-block;width:86px;height:10px;border-radius:999px;background:linear-gradient(90deg, rgba(0,255,0,.85), rgba(255,255,0,.85), rgba(255,0,0,.85))}
.webnalytics-v3 .wv3-hm-legend-chips{display:inline-flex;gap:6px}
.webnalytics-v3 .wv3-hm-chip{display:inline-block;width:14px;height:14px;border-radius:4px}
.webnalytics-v3 .wv3-hm-chip.wv3-hm-g{background:rgba(46, 204, 113, 0.9)}
.webnalytics-v3 .wv3-hm-chip.wv3-hm-y{background:rgba(241, 196, 15, 0.9)}
.webnalytics-v3 .wv3-hm-chip.wv3-hm-r{background:rgba(231, 76, 60, 0.9)}
.webnalytics-v3 .wv3-hm-legend-note{opacity:.9}

/* Sidebar (Top elements) - v3.4.8 */
.webnalytics-v3 .wv3-heatmap-side{
  position:absolute;
  top:12px;
  right:12px;
  width:280px;
  max-height: calc(100% - 24px);
  overflow:auto;
  background: rgba(255,255,255,0.96);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  z-index: 20;
  padding:10px;
}
.webnalytics-v3 .wv3-hm-side-title{font-weight:800;font-size:13px;color:#111;margin-bottom:2px}
.webnalytics-v3 .wv3-hm-side-sub{font-size:12px;color:#6b7280;margin-bottom:8px}
.webnalytics-v3 .wv3-hm-top-item{display:flex;gap:10px;padding:8px 8px;border-radius:10px}
.webnalytics-v3 .wv3-hm-top-item + .wv3-hm-top-item{margin-top:6px;border-top:1px solid rgba(0,0,0,0.06)}
.webnalytics-v3 .wv3-hm-top-pct{min-width:52px;font-weight:900;font-size:12px;color:#111;align-self:flex-start}
.webnalytics-v3 .wv3-hm-top-meta{flex:1;min-width:0}
.webnalytics-v3 .wv3-hm-top-clicks{font-size:12px;color:#111;font-weight:700}
.webnalytics-v3 .wv3-hm-top-path{font-size:12px;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* Heatmap Elements (% overlay) - v3.4.7 */
.webnalytics-v3 .wv3-heatmap-elements{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 9;
}
.webnalytics-v3 .wv3-hm-el{
  position:absolute;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.webnalytics-v3 .wv3-hm-el-badge{
  position:absolute;
  top:6px;
  right:6px;
  font-size:12px;
  line-height:1;
  padding:6px 8px;
  border-radius:999px;
  background: rgba(255,255,255,0.9);
  color:#111;
  font-weight:700;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}