/* ============================================================
   Results AI Visitor Globe - renderer styles
   All selectors namespaced under .ravg so embedding on any
   host page never collides. Theme colors come from CSS vars
   set on the .ravg container by globe.js.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

.ravg, .ravg *{ box-sizing:border-box; margin:0; padding:0 }
.ravg{
  position:relative; width:100%; height:720px; min-height:420px; overflow:hidden;
  font-family:'Outfit',system-ui,-apple-system,sans-serif; color:var(--rg-text,#fafaf9);
  border-radius:18px; isolation:isolate; user-select:none;
  /* default theme = night-earth */
  --rg-bg1:#0a0c12; --rg-bg2:#05060a; --rg-bg3:#020308;
  --rg-accent:#f59e0b; --rg-accent-soft:#fbbf24; --rg-accent-deep:#b45309;
  --rg-ping:#fcd34d; --rg-glow:rgba(245,158,11,.10); --rg-glow2:rgba(59,130,246,.06);
  --rg-text:#fafaf9; --rg-muted:#c7cddb; --rg-good:#34d399;
  --rg-panel:rgba(16,18,26,.62); --rg-panel-brd:rgba(245,158,11,.16);
}
.ravg-bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 60% at 72% 38%, var(--rg-glow), transparent 60%),
    radial-gradient(55% 55% at 18% 80%, var(--rg-glow2), transparent 60%),
    radial-gradient(circle at 50% 50%, var(--rg-bg1) 0%, var(--rg-bg2) 70%, var(--rg-bg3) 100%);
}
.ravg-stage{ position:absolute; inset:0; z-index:1 }
.ravg-globe-holder,.ravg-map-holder{ position:absolute; inset:0 }
.ravg-map-holder{ display:none; align-items:center; justify-content:center }
.ravg-map-holder canvas{ width:100%; height:100%; display:block }
.ravg.is-map .ravg-globe-holder{ display:none }
.ravg.is-map .ravg-map-holder{ display:flex }

/* ---------- top bar ---------- */
.ravg-topbar{ position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; padding:18px 22px; pointer-events:none }
.ravg-topbar > *{ pointer-events:auto }
.ravg-brand{ display:flex; align-items:center; gap:11px }
.ravg-mark{ width:38px; height:38px; border-radius:9px; overflow:hidden; flex:none; box-shadow:0 6px 22px rgba(0,0,0,.5) }
.ravg-bname{ font-weight:700; font-size:17px; letter-spacing:-.02em; line-height:1.05 }
.ravg-bname i{ color:var(--rg-accent); font-style:normal; font-weight:900 }
.ravg-bsub{ font-size:10.5px; color:var(--rg-muted); letter-spacing:.14em; text-transform:uppercase; margin-top:2px; font-weight:600 }

.ravg-controls{ display:flex; align-items:center; gap:11px }
.ravg-seg{ display:flex; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  border-radius:999px; padding:4px; backdrop-filter:blur(10px) }
.ravg-seg button{ font-family:inherit; font-weight:700; font-size:12.5px; color:var(--rg-muted);
  background:none; border:none; cursor:pointer; padding:6px 14px; border-radius:999px; transition:.2s;
  display:flex; align-items:center; gap:6px; white-space:nowrap }
.ravg-seg button.active{ color:#1a1206;
  background:linear-gradient(95deg,var(--rg-accent-soft),var(--rg-accent) 60%,var(--rg-accent-deep));
  box-shadow:0 4px 16px var(--rg-glow) }
.ravg-theme-wrap{ position:relative }
.ravg-theme-btn{ font-family:inherit; font-weight:600; font-size:12.5px; color:var(--rg-text);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); cursor:pointer;
  padding:8px 13px; border-radius:999px; backdrop-filter:blur(10px); display:flex; align-items:center; gap:8px }
.ravg-swatch{ width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.15) }
.ravg-theme-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:30;
  background:rgba(12,14,20,.94); border:1px solid var(--rg-panel-brd); border-radius:14px; padding:6px;
  backdrop-filter:blur(18px); box-shadow:0 18px 50px rgba(0,0,0,.6); min-width:184px; display:none }
.ravg-theme-menu.open{ display:block }
.ravg-theme-item{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; cursor:pointer; font-size:13px; font-weight:500 }
.ravg-theme-item:hover{ background:rgba(255,255,255,.06) }
.ravg-theme-item.sel{ background:var(--rg-glow) }
.ravg-theme-item .tlabel{ flex:1 }
.ravg-theme-item .tcheck{ color:var(--rg-accent); font-weight:900; opacity:0 }
.ravg-theme-item.sel .tcheck{ opacity:1 }

.ravg-live{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  padding:8px 13px; border-radius:999px; backdrop-filter:blur(10px) }
.ravg-dot{ width:9px; height:9px; border-radius:50%; background:var(--rg-good);
  box-shadow:0 0 0 0 rgba(52,211,153,.7); animation:ravgPulse 1.8s infinite }
@keyframes ravgPulse{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)} 70%{box-shadow:0 0 0 9px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
.ravg-live.replay .ravg-dot{ background:var(--rg-accent); animation:none }

/* ---------- side columns ---------- */
.ravg-left{ position:absolute; left:22px; top:84px; z-index:9; width:296px; display:flex; flex-direction:column; gap:14px }
.ravg-right{ position:absolute; right:22px; top:84px; z-index:9; width:282px; display:flex; flex-direction:column; gap:14px }
.ravg-card{ background:var(--rg-panel); border:1px solid var(--rg-panel-brd); border-radius:17px;
  backdrop-filter:blur(16px); box-shadow:0 18px 50px rgba(0,0,0,.5) }
.ravg-online{ padding:16px 19px }
.ravg-olabel{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rg-muted); font-weight:700; display:flex; align-items:center; gap:8px }
.ravg-onum{ font-size:50px; font-weight:800; letter-spacing:-.03em; line-height:1; margin-top:5px;
  background:linear-gradient(180deg,#fff,var(--rg-accent-soft)); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-variant-numeric:tabular-nums }
.ravg-ocap{ font-size:12.5px; color:var(--rg-muted); margin-top:3px; font-weight:500 }
.ravg-ocap b{ color:var(--rg-good); font-weight:700 }

.ravg-head{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rg-muted); font-weight:700; padding:14px 14px 9px; display:flex; align-items:center; justify-content:space-between }
.ravg-head .ravg-mini{ font-size:10px; letter-spacing:.04em; text-transform:none; color:var(--rg-accent-soft); cursor:pointer; font-weight:600 }
.ravg-feed{ display:flex; flex-direction:column; gap:1px; padding:0 6px 6px; max-height:300px; overflow:hidden }
.ravg-row{ display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:11px; animation:ravgRowIn .5s cubic-bezier(.2,.8,.2,1) }
.ravg-row.fresh{ background:linear-gradient(90deg,var(--rg-glow),transparent) }
@keyframes ravgRowIn{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }
.ravg-flag{ width:21px; height:15px; border-radius:3px; flex:none; object-fit:cover; box-shadow:0 1px 3px rgba(0,0,0,.5); background:rgba(255,255,255,.06) }
.ravg-rbody{ flex:1; min-width:0 }
.ravg-rcity{ font-size:13px; font-weight:600; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ravg-rpage{ font-size:11px; color:var(--rg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ravg-rpage b{ color:var(--rg-accent-soft); font-weight:600 }
.ravg-known{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.06em; color:#1a1206;
  background:var(--rg-accent-soft); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle }
.ravg-rtime{ font-size:10px; color:#6b7280; font-family:'JetBrains Mono',monospace; flex:none }

.ravg-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px }
.ravg-stat{ background:var(--rg-panel); border:1px solid var(--rg-panel-brd); border-radius:15px; padding:13px 15px; backdrop-filter:blur(16px) }
.ravg-stat .v{ font-size:23px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.ravg-stat .k{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--rg-muted); font-weight:700; margin-top:2px }
.ravg-top-list{ padding:0 17px 15px }
.ravg-trow{ display:flex; align-items:center; gap:9px; margin-bottom:10px }
.ravg-trow:last-child{ margin-bottom:0 }
.ravg-tname{ font-size:12.5px; font-weight:600; flex:none; width:70px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ravg-tbar{ flex:1; height:7px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden }
.ravg-tfill{ height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg,var(--rg-accent-deep),var(--rg-accent) 60%,var(--rg-accent-soft)) }
.ravg-tval{ font-size:11.5px; font-weight:700; color:var(--rg-accent-soft); flex:none; width:34px; text-align:right; font-variant-numeric:tabular-nums }

/* activity log card */
.ravg-activity{ max-height:230px; display:flex; flex-direction:column }
.ravg-alog{ overflow-y:auto; padding:0 8px 8px; flex:1 }
.ravg-alog::-webkit-scrollbar{ width:6px } .ravg-alog::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:3px }
.ravg-arow{ display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:9px; font-size:12px }
.ravg-arow:hover{ background:rgba(255,255,255,.04) }
.ravg-atime{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#6b7280; flex:none; width:60px }
.ravg-aflag{ width:18px; height:13px; border-radius:2px; flex:none; object-fit:cover }
.ravg-aloc{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500 }

/* ---------- playback timeline ---------- */
.ravg-timeline{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:11;
  display:flex; align-items:center; gap:14px; width:min(680px,calc(100% - 360px));
  background:rgba(10,12,18,.66); border:1px solid var(--rg-panel-brd); border-radius:999px;
  padding:9px 16px; backdrop-filter:blur(14px); box-shadow:0 14px 40px rgba(0,0,0,.5) }
.ravg-tl-play{ width:34px; height:34px; border-radius:50%; flex:none; border:none; cursor:pointer;
  background:linear-gradient(95deg,var(--rg-accent-soft),var(--rg-accent) 60%,var(--rg-accent-deep));
  color:#1a1206; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px var(--rg-glow) }
.ravg-tl-mode{ display:flex; gap:3px; background:rgba(255,255,255,.05); border-radius:999px; padding:3px; flex:none }
.ravg-tl-mode button{ font-family:inherit; font-size:11px; font-weight:700; color:var(--rg-muted); background:none; border:none; cursor:pointer; padding:5px 11px; border-radius:999px }
.ravg-tl-mode button.active{ background:var(--rg-accent); color:#1a1206 }
.ravg-tl-track{ flex:1; height:6px; background:rgba(255,255,255,.08); border-radius:99px; position:relative; cursor:pointer }
.ravg-tl-prog{ position:absolute; left:0; top:0; bottom:0; border-radius:99px; width:0;
  background:linear-gradient(90deg,var(--rg-accent-deep),var(--rg-accent-soft)) }
.ravg-tl-knob{ position:absolute; top:50%; width:13px; height:13px; border-radius:50%; background:#fff;
  transform:translate(-50%,-50%); box-shadow:0 1px 6px rgba(0,0,0,.6); left:0 }
.ravg-tl-time{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--rg-text); flex:none; min-width:128px; text-align:right }
.ravg-tl-speed{ font-family:inherit; font-size:11px; font-weight:700; color:var(--rg-accent-soft); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:5px 9px; cursor:pointer; flex:none }
.ravg.is-live .ravg-timeline .ravg-tl-track,
.ravg.is-live .ravg-timeline .ravg-tl-play,
.ravg.is-live .ravg-timeline .ravg-tl-speed{ opacity:.4; pointer-events:none }

.ravg-foot{ position:absolute; bottom:16px; left:22px; z-index:8; font-size:11px; color:#5b6070; letter-spacing:.03em; display:flex; align-items:center; gap:8px }
.ravg-foot b{ color:var(--rg-accent) }
.ravg-badge{ font-size:9px; font-weight:800; letter-spacing:.1em; color:var(--rg-accent); border:1px solid var(--rg-panel-brd); border-radius:5px; padding:2px 6px }

/* loader */
.ravg-loader{ position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; background:var(--rg-bg2); transition:opacity .6s }
.ravg-loader.hide{ opacity:0; pointer-events:none }
.ravg-spin{ width:42px; height:42px; border-radius:50%; border:3px solid var(--rg-glow); border-top-color:var(--rg-accent); animation:ravgSpin 1s linear infinite }
@keyframes ravgSpin{ to{ transform:rotate(360deg) } }
.ravg-loader p{ color:var(--rg-muted); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600 }

/* ---------- HERO layout (sales pages): globe + big number + ticker only ---------- */
.ravg--hero .ravg-left,.ravg--hero .ravg-right,.ravg--hero .ravg-timeline,.ravg--hero .ravg-foot{ display:none }
.ravg--hero .ravg-hero-online{ position:absolute; left:0; right:0; bottom:42px; z-index:9; text-align:center; pointer-events:none }
.ravg--hero .ravg-hero-online .n{ font-size:64px; font-weight:800; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(180deg,#fff,var(--rg-accent-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums }
.ravg--hero .ravg-hero-online .l{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--rg-muted); font-weight:700; margin-top:6px }
.ravg-hero-online{ display:none }
.ravg--hero .ravg-hero-online{ display:block }
.ravg-ticker{ display:none }
.ravg--hero .ravg-ticker{ display:flex; position:absolute; top:74px; left:50%; transform:translateX(-50%); z-index:9;
  align-items:center; gap:10px; background:var(--rg-panel); border:1px solid var(--rg-panel-brd); border-radius:999px;
  padding:8px 16px; backdrop-filter:blur(14px); max-width:90%; overflow:hidden; box-shadow:0 12px 36px rgba(0,0,0,.45) }
.ravg-ticker .ravg-flag{ width:20px; height:14px }
.ravg-ticker .t{ font-size:13px; font-weight:600; white-space:nowrap }
.ravg-ticker .t b{ color:var(--rg-accent-soft); font-weight:600 }

/* responsive: collapse the right column, then the left, on narrow embeds */
@media (max-width:1040px){ .ravg-right{ display:none } .ravg-timeline{ width:calc(100% - 200px) } }
@media (max-width:720px){ .ravg-left{ display:none } .ravg-timeline{ width:calc(100% - 40px) } .ravg-bsub{ display:none } }

/* ---------- v2: stats accent, buyer events, toast, labels, light themes ---------- */
.ravg-stat .v.amber{ color:var(--rg-accent-soft) }

/* buyer + known rows in the live feed */
.ravg-row.buyer{ background:linear-gradient(90deg,var(--rg-glow),transparent); box-shadow:inset 2px 0 0 var(--rg-accent) }
.ravg-rcity .bn{ color:var(--rg-text); font-weight:800 }
.ravg-row.buyer .ravg-rcity .bn{ color:var(--rg-accent-soft) }
.ravg-bg-badge{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.04em; color:#1a1206; background:var(--rg-accent-soft); border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:middle; white-space:nowrap }
.ravg-row.buyer .ravg-rpage{ color:var(--rg-accent-soft); font-weight:600 }
.ravg-alog-buy{ color:var(--rg-accent-soft); font-weight:700; margin-left:4px }

/* buyer toast (pops in top-center on a sale) */
.ravg-toast-wrap{ position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:20; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:90% }
.ravg--hero .ravg-toast-wrap{ top:128px }
.ravg-toast{ display:flex; align-items:center; gap:11px; background:linear-gradient(95deg,rgba(14,12,8,.94),rgba(10,12,18,.94)); border:1px solid var(--rg-accent); border-radius:14px; padding:9px 16px 9px 11px; box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 24px -4px var(--rg-glow); opacity:0; transform:translateY(-12px) scale(.96); transition:opacity .35s,transform .35s; backdrop-filter:blur(12px); min-width:228px }
.ravg-toast.in{ opacity:1; transform:none }
.ravg-toast .ravg-flag{ width:26px; height:19px }
.ravg-toast .tt{ display:flex; flex-direction:column; line-height:1.25 }
.ravg-toast .tt b{ font-size:13.5px; color:var(--rg-accent-soft); font-weight:800 }
.ravg-toast .tt span{ font-size:12px; color:var(--rg-muted) }

/* light themes (daylight, blossom): panels stay dark glass; lift topbar + hero number for readability over a bright globe */
.ravg-light .ravg-seg,.ravg-light .ravg-theme-btn,.ravg-light .ravg-live{ background:rgba(8,10,16,.6); border-color:rgba(255,255,255,.2) }
.ravg-light .ravg-bname,.ravg-light .ravg-bsub{ text-shadow:0 1px 10px rgba(0,0,0,.55) }
.ravg-light .ravg-mark{ box-shadow:0 6px 22px rgba(0,0,0,.4) }
.ravg-light.ravg--hero .ravg-hero-online .n{ filter:drop-shadow(0 2px 14px rgba(0,0,0,.5)) }
.ravg-light.ravg--hero .ravg-hero-online .l{ color:#1f2937; text-shadow:0 1px 8px rgba(255,255,255,.4) }

/* toolbar zoom + rotation controls */
.ravg-zoom button{ padding:6px 9px; font-size:14px; font-weight:700; color:var(--rg-text); min-width:30px }
.ravg-zoom button:hover{ color:var(--rg-accent-soft) }
.ravg-zoom button[data-zrot]{ font-size:11px }
.ravg-zoom button[data-zrot].on{ color:var(--rg-accent-soft) }
.ravg.is-map .ravg-zoom{ display:none }
@media (max-width:860px){ .ravg-zoom{ display:none } }