:root{--u-ink:#101828;--u-blue:#0667ff;--u-line:#e7ebf1;--u-bg:#f5f7fa}
.sp4-page{width:100%;background:var(--u-bg);color:var(--u-ink);padding-bottom:0!important}
.sp4-wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.sp4-hero{background:#fff;border-bottom:1px solid var(--u-line);padding:38px 0 30px}
.sp4-hero>.sp4-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.sp4-eyebrow,.sp4-maphead>div:first-child>span,.sp4-info article>span{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--u-blue)}
.sp4-hero h1{font-size:40px;letter-spacing:-.04em;margin:7px 0 6px}.sp4-hero p{margin:0;color:#667085;font-size:14px}
.sp4-live{display:flex;align-items:center;gap:7px;color:#667085;font-size:12px}.sp4-live i{width:8px;height:8px;border-radius:50%;background:#22b573;box-shadow:0 0 0 5px rgba(34,181,115,.1)}
.sp4-controls{display:flex;justify-content:space-between;gap:12px;padding:20px 0 12px;flex-wrap:wrap}.sp4-tabs,.sp4-days{display:flex;gap:7px;flex-wrap:wrap}
.sp4-controls button{border:1px solid var(--u-line);background:#fff;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:800;color:#526071;cursor:pointer}.sp4-controls button.on{background:#111827;color:#fff;border-color:#111827}
.sp4-mapbox{background:#fff;border:1px solid var(--u-line);border-radius:22px;overflow:hidden;box-shadow:0 14px 38px rgba(16,24,40,.05)}
.sp4-maphead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:20px 22px 16px}.sp4-maphead h2{font-size:22px;margin:4px 0}.sp4-maphead p{font-size:11px;color:#98a2b3;margin:0}
.sp4-legend{display:flex;gap:11px;flex-wrap:wrap;justify-content:flex-end;font-size:10px;color:#7d8999}.sp4-legend b{display:flex;align-items:center;gap:5px;font-weight:700}.sp4-legend i{width:7px;height:7px;border-radius:50%}

/* Universe canvas */
.sp4-canvas{position:relative;height:590px!important;overflow:hidden;border-top:1px solid #edf1f5;border-bottom:1px solid #edf1f5;
 background:
 radial-gradient(circle at 50% 48%,rgba(255,255,255,1) 0%,rgba(250,252,255,.98) 48%,rgba(243,247,252,1) 100%)}
.u-glow{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;filter:blur(2px);opacity:.9}
.u-cluster-title{position:absolute;transform:translate(-50%,-50%);font-size:10px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:.68}
.u-star{position:absolute;transform:translate(-50%,-50%);display:block;text-decoration:none!important;color:#111827!important;z-index:4}
.u-orb{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(17,24,39,.035),0 4px 13px rgba(16,24,40,.14);transition:.18s transform,.18s box-shadow}
.u-label{display:block;margin-left:8px;white-space:nowrap;font-size:10px;font-weight:750;line-height:1.15;text-shadow:0 1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff;transition:.18s transform}
.u-star.minor .u-label{opacity:1;pointer-events:auto}
.u-star:hover{z-index:30}.u-star:hover .u-orb{transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 0 5px rgba(255,255,255,.9),0 8px 24px rgba(16,24,40,.2)}
.u-star:hover .u-label,.u-star.minor:hover .u-label{opacity:1;transform:translateX(2px)}
.u-star.major .u-label{font-size:12px;font-weight:900}.u-star.medium .u-label{font-size:10.5px;font-weight:850}
.u-star.minor{width:auto;height:auto}.u-star.minor .u-orb{left:0}
.u-tooltip{position:absolute;z-index:80;min-width:190px;max-width:250px;padding:12px 13px;border-radius:12px;background:rgba(17,24,39,.94);color:#fff;box-shadow:0 12px 30px rgba(16,24,40,.22);pointer-events:none;opacity:0;transform:translateY(5px);transition:.12s opacity,.12s transform}
.u-tooltip.show{opacity:1;transform:translateY(0)}.u-tooltip strong{display:block;font-size:13px;margin-bottom:4px}.u-tooltip span{display:block;color:#cbd5e1;font-size:10px;line-height:1.55}.u-tooltip b{display:block;color:#fff;font-size:10px;margin-top:7px}
.sp4-footnote{text-align:center;padding:11px 15px;font-size:10px;color:#98a2b3}

.sp4-info{display:grid;grid-template-columns:1.05fr .95fr;gap:15px;margin-top:18px}.sp4-info article{background:#fff;border:1px solid var(--u-line);border-radius:17px;padding:20px;min-height:150px}.sp4-info h2{font-size:19px;margin:5px 0 12px}.sp4-info p{font-size:13px;line-height:1.7;color:#667085;margin:0 0 10px}.sp4-info small{font-size:10px;color:#98a2b3}.sp4-empty{font-size:12px;color:#98a2b3}
.sp4-rank{display:grid;grid-template-columns:28px 1fr auto;gap:8px;padding:9px 0;border-top:1px solid #f0f2f5;align-items:center}.sp4-rank:first-child{border-top:0}.sp4-rank em{font-style:normal;color:#a0a9b6;font-size:10px;font-weight:900}.sp4-rank strong{font-size:12px}.sp4-rank small{font-size:9px}.sp4-rank b{font-size:11px;color:var(--u-blue)}
.sitepick-map-footer-gap{display:block;width:100%;height:80px;background:var(--u-bg)}
@media(max-width:760px){
 .sp4-wrap{width:min(100% - 24px,1180px)}.sp4-hero>.sp4-wrap{align-items:flex-start}.sp4-hero h1{font-size:31px}
 .sp4-maphead{align-items:flex-start;flex-direction:column}.sp4-legend{justify-content:flex-start}.sp4-canvas{height:660px!important}
 .sp4-info{grid-template-columns:1fr}.sitepick-map-footer-gap{height:48px}
 .u-star.major .u-label{font-size:10px}.u-star.medium .u-label{font-size:9px}.u-label{font-size:9px}
}

/* Hide redundant SITEPICK UNIVERSE label on all devices */

/* FINAL merged spacing/mobile fixes - 2026-09-29 */
#primary.sp4-page{margin:0!important}
@media(max-width:760px){
 .sp4-hero>.sp4-wrap{display:block!important}
 .sp4-hero .sp4-live{position:static!important;margin-top:14px!important;width:max-content!important;display:flex!important;align-items:center!important;gap:7px!important}
 }


/* Mobile hero side breathing room */
@media(max-width:760px){
  .sp4-hero .sp4-wrap{
    padding-left:18px!important;
    padding-right:18px!important;
    box-sizing:border-box!important;
  }
}

/* 2026-09-30 FINAL: every rendered ranking node must show its site name */
.sp4-canvas .u-star{overflow:visible!important;visibility:visible!important}
.sp4-canvas .u-star .u-label{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  color:#111827!important;
  white-space:nowrap!important;
  position:relative!important;
  z-index:2!important;
}
.sp4-canvas .u-star .u-orb{z-index:1!important}

/* 2026-09-30 ranking polish */
.sp4-canvas .u-star.no-pick .u-orb{
  transform:scale(.82);
  opacity:.88;
}
.sp4-canvas .u-star.no-pick .u-label{
  font-size:11px!important;
  font-weight:500!important;
  opacity:.68!important;
}
.sp4-canvas .u-star.has-pick .u-label{
  font-weight:650!important;
  opacity:1!important;
}
.sp4-canvas .u-star.has-pick .u-orb{
  opacity:1!important;
}

/* 2026-09-30 subtle ranking background */
.sp4-canvas{
  background:
    radial-gradient(circle at 50% 47%, rgba(255,255,255,.98) 0%, rgba(248,250,253,.92) 38%, rgba(241,245,249,.82) 100%),
    radial-gradient(circle, rgba(100,116,139,.075) 1px, transparent 1.2px);
  background-size:auto, 24px 24px;
  background-position:center, center;
}
.sp4-canvas::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%, rgba(148,163,184,.07), transparent 56%);
}

/* 2026-09-30 ranking background v2 — visible depth */
.sp4-canvas{
  background-color:#eef3f8!important;
  background-image:
    radial-gradient(ellipse at 50% 46%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.88) 24%,
      rgba(241,246,251,.82) 50%,
      rgba(226,234,243,.92) 100%
    ),
    radial-gradient(circle, rgba(71,85,105,.13) 1px, transparent 1.35px)!important;
  background-size:auto, 22px 22px!important;
  background-position:center, center!important;
}
.sp4-canvas::before{
  content:"";
  position:absolute;
  inset:8% 13%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.46) 0%,
    rgba(148,163,184,.09) 47%,
    rgba(148,163,184,0) 72%
  );
  box-shadow:0 0 90px rgba(148,163,184,.16);
}
.sp4-canvas::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.65) 45%, transparent 82%);
  mask-image:radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.65) 45%, transparent 82%);
}
.sp4-canvas .u-star,
.sp4-canvas .u-glow,
.sp4-canvas .u-cluster-title,
.sp4-canvas .u-tooltip{
  z-index:3;
}

/* 2026-10-01 v13 — WHITE DATA CANVAS
   The data points are the visual. No background decoration. */
.sp4-canvas{
  background:#fff!important;
  background-image:none!important;
  min-height:500px!important;
  height:500px!important;
  overflow:hidden!important;
}

/* No experimental overlays. */
.sp4-canvas::before,
.sp4-canvas::after{
  content:none!important;
  display:none!important;
}

/* Cleaner, lighter depth for colored data points. */
.sp4-canvas .u-star{
  filter:drop-shadow(0 4px 6px rgba(15,23,42,.11))!important;
}

/* Reduce empty vertical space while keeping labels and points readable. */
.sp4-map-stage,
.sp4-universe{
  min-height:500px!important;
}

/* Footer/key remains attached to the same white data card. */
.sp4-key,
.sp4-legend-bottom{
  background:#fff!important;
}

/* Mobile: preserve room for labels, but avoid the oversized empty canvas. */
@media(max-width:760px){
  .sp4-canvas,
  .sp4-map-stage,
  .sp4-universe{
    min-height:470px!important;
    height:470px!important;
  }
}