/* ============================================================
   ResultsAiX Pulse - 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:#8b8f9c; --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 }
/* the real map (MapLibre) and Google 3D, each in its own layer of the stage */
.ravg-ml-holder,.ravg-g3d-holder{ position:absolute; inset:0; display:none }
/* MapLibre gives its container position:relative, which made it 0 px tall inside the stage */
.ravg .ravg-ml-holder.maplibregl-map{ position:absolute; inset:0; width:100%; height:100% }
.ravg.is-map.is-real .ravg-map-holder{ display:none }
.ravg.is-map.is-real .ravg-ml-holder{ display:block }
.ravg.is-g3d .ravg-globe-holder{ display:none }
.ravg.is-g3d .ravg-g3d-holder{ display:block; background:#05060a }
.ravg-g3d-holder gmp-map-3d{ display:block; width:100%; height:100% }
.ravg .maplibregl-ctrl-bottom-right{ bottom:44px }
.ravg .maplibregl-ctrl-attrib{ background:rgba(10,12,18,.66); color:#9ca3af; font-size:10px }
.ravg .maplibregl-ctrl-attrib a{ color:#d1d5db }
.ravg .maplibregl-popup-content{ background:rgba(10,12,18,.92); color:#f5f5f4; border:1px solid rgba(245,158,11,.35); border-radius:12px; padding:10px 12px; font:500 12.5px/1.45 'Outfit',system-ui,sans-serif; box-shadow:0 12px 30px rgba(0,0,0,.45) }
.ravg .maplibregl-popup-content b{ color:var(--rg-accent-soft); font-weight:800 }
.ravg .maplibregl-popup-tip{ border-top-color:rgba(10,12,18,.92) !important; border-bottom-color:rgba(10,12,18,.92) !important }
.ravg .ravg-ml-holder canvas{ outline:none }
.ravg-toast-g3d{ max-width:420px }

/* ---------- 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 }
/* house rule: text on the brand gold (and any accent band) is white */
.ravg-seg button.active{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
  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 }
/* the admin screens have their own .ravg-mini (a stat box): never on the globe's small "clear" link */
.ravg .ravg-head .ravg-mini{ border:0 !important; border-radius:0 !important; padding:0 !important; background:none !important; min-width:0 }
.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:#fff; text-shadow:0 1px 1px rgba(0,0,0,.3);
  background:var(--rg-accent); 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 }
/* live mode: money tiles only once a real sale has been reported */
.ravg.is-live .ravg-stat-sales{ display:none }
.ravg.is-live.has-sales .ravg-stat-sales{ display:block }
.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 }
/* the name gets the room, the bar a fixed length: "United Sta..." and "ResultsAix..." read in full */
.ravg-tname{ font-size:12.5px; font-weight:600; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ravg-trow-site .ravg-tname{ white-space:normal; line-height:1.25; overflow-wrap:anywhere }
.ravg-tbar{ flex:0 0 38px; 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:28px; text-align:right; font-variant-numeric:tabular-nums }

/* activity log card */
.ravg-activity{ max-height:230px; display:flex; flex-direction:column }
.ravg-left .ravg-activity{ max-height:min(380px, calc(100vh - 420px)); min-height:180px }
.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:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); 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:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35) }
.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 }
/* the window button works in Live too: picking a window starts the replay (it looked dead before) */
.ravg.is-live .ravg-timeline .ravg-tl-speed[data-win]{ opacity:1; pointer-events:auto }
.ravg-win-menu{ position:absolute; right:12px; bottom:calc(100% + 8px); display:none; flex-direction:column; min-width:190px; padding:6px;
  background:rgba(10,12,18,.94); border:1px solid var(--rg-panel-brd); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.5); backdrop-filter:blur(14px); z-index:20 }
.ravg-win-menu.open{ display:flex }
.ravg-win-menu button{ font:600 12.5px/1.2 inherit; font-family:inherit; color:var(--rg-text); background:none; border:0; text-align:left; padding:8px 10px; border-radius:9px; cursor:pointer }
.ravg-win-menu button:hover{ background:rgba(255,255,255,.07) }
.ravg-win-menu button.on{ color:var(--rg-accent-soft); background:rgba(245,158,11,.12) }

.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 } .ravg-topbar{ flex-wrap:wrap; row-gap:6px } }
/* A phone: the side panels have no room, so the online number sits over the timeline (it showed no number at all),
   the theme button keeps only its colour and the top bar fits the screen (the LIVE badge was cut off). */
@media (max-width:720px){
  .ravg--command .ravg-hero-online{ display:block; position:absolute; left:0; right:0; bottom:116px; z-index:9; text-align:center; pointer-events:none }
  .ravg--command .ravg-hero-online .n{ font-size:46px; 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--command .ravg-hero-online .l{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rg-muted); font-weight:700; margin-top:4px }
  .ravg-theme-btn [data-tname], .ravg-site-btn [data-sname]{ display:none }
  .ravg-controls{ flex-wrap:wrap; gap:6px; max-width:100% }
  .ravg-topbar{ max-width:100%; box-sizing:border-box }
  .ravg-foot{ display:none }   /* it sat under the playback bar */
  /* the playback bar fits: the clock text (128px wide) pushed 1 h and 10x off the screen */
  .ravg-timeline{ gap:8px; padding-left:10px; padding-right:10px; box-sizing:border-box }
  .ravg-tl-time{ display:none }   /* the window and speed buttons need the room on a phone; the bar shows where the replay is */
  .ravg-tl-track{ min-width:24px }
  .ravg .maplibregl-ctrl-bottom-right{ bottom:118px }   /* the map credit sits above the playback bar, not on it */
}
/* compact mount (sidebar card / widget): just the globe and the online number */
.ravg--compact .ravg-left, .ravg--compact .ravg-timeline, .ravg--compact .ravg-foot, .ravg--compact .ravg-bsub, .ravg--compact .ravg-topbar .ravg-view, .ravg--compact .ravg-topbar .ravg-scope{ display:none !important }
.ravg--compact .ravg-topbar{ padding:8px 12px }
.ravg--compact .ravg-brand{ transform:scale(.85); transform-origin:left center }
.ravg--compact .ravg-hero-online .n{ font-size:40px }

/* ---------- 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:#fff; text-shadow:0 1px 1px rgba(0,0,0,.3); background:var(--rg-accent); 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-noflag{ display:inline-flex; align-items:center; justify-content:center; background:none; box-shadow:none; font-size:13px; line-height:1 }
.ravg-toast .ravg-noflag{ font-size:17px }
.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) }

/* hub: site colours, leads, identity, Talk */
.ravg-sdot{ width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; box-shadow:0 0 0 2px rgba(0,0,0,.35) }
.ravg-row .ravg-sdot{ margin-right:-4px }
.ravg-thead{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--rg-muted); font-weight:700; margin:10px 0 8px }
.ravg-row.lead{ background:linear-gradient(90deg,rgba(52,211,153,.14),transparent); box-shadow:inset 2px 0 0 var(--rg-good) }
.ravg-lead-badge{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.04em; color:#052e1c; background:var(--rg-good); border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:middle; white-space:nowrap }
.ravg-ltv{ display:inline-block; font-size:10px; font-weight:800; color:var(--rg-accent-soft); border:1px solid var(--rg-panel-brd); border-radius:4px; padding:0 5px; margin-left:6px; vertical-align:middle; font-variant-numeric:tabular-nums }
.ravg-tags{ color:var(--rg-muted); font-size:10.5px }
.ravg-alog-lead{ color:var(--rg-good); font-weight:700; margin-left:4px; font-size:11px }
.ravg-talk{ font-family:inherit; font-size:10.5px; font-weight:800; color:#fff; background:var(--rg-accent); border:0; border-radius:999px; padding:5px 9px; cursor:pointer; flex:none; text-shadow:0 1px 1px rgba(0,0,0,.25); opacity:.92; margin-left:4px }
.ravg-talk:hover{ opacity:1 }
.ravg-toast-lead{ border-color:var(--rg-good) }
.ravg-toast-lead .tt b{ color:var(--rg-good) }
/* the owner's Live View: somebody you know just arrived (with their lifetime value and Talk) */
.ravg-toast-known{ border-color:#22c55e; pointer-events:auto; min-width:260px }
.ravg-toast-known .tt b{ color:#fff }
.ravg-toast-known .ravg-talk{ margin-left:10px; flex:none }
.ravg-site-menu{ min-width:200px }

/* 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) }
/* the map zooms too (- + reset); only the spin button is the globe's own */
.ravg.is-map .ravg-zoom button[data-zrot]{ display:none }
/* Google 3D: turn and tilt sit in the bar, nowhere else (Google's own were hidden under the corners) */
.ravg-zoom .g3d-only{ display:none }
.ravg.is-g3d .ravg-zoom .g3d-only{ display:inline-block }
.ravg.is-g3d .ravg-foot{ display:none }   /* it covered Google's logo */
/* zoom on every screen, both views (pinch works on the globe too); only the spin button goes on a phone */
@media (max-width:860px){ .ravg-zoom button[data-zrot]{ display:none } }

/* ---- What the public may see: a panel that is switched off is not there at all ---- */
.ravg-hide-online .ravg-online,.ravg-hide-online .ravg-hero-online{display:none!important}
.ravg-hide-counts .ravg-stat-grid .ravg-stat:not(.ravg-stat-sales){display:none!important}
.ravg-hide-sales .ravg-stat-sales{display:none!important}
.ravg-hide-amounts .ravg-stat-sales:last-child{display:none!important}
.ravg-hide-countries .ravg-toploc{display:none!important}
.ravg-hide-feed .ravg-feedcard,.ravg-hide-feed .ravg-activity,.ravg-hide-feed .ravg-ticker{display:none!important}
.ravg-hide-counts.ravg-hide-sales .ravg-stat-grid{display:none!important}

/* The "latest visitor" strip stays hidden until the first visitor arrives (no empty box). */
.ravg--hero .ravg-ticker:not(.on){ visibility:hidden }