/* Layout isolado: modelo 3D, pontos e popover em pixels reais. */
#raio-x {
  --rx-progress: 0; --rx-points: 0;
  zoom: var(--rx-unzoom, 1); width: var(--rx-width, 100%); align-self: center;
  padding: 40px max(24px, calc((100% - 1120px) / 2)) 28px;
  color: #edf8f2; background: #0a1e19; isolation: isolate;
}
#raio-x button { font: inherit; cursor: pointer; }
#raio-x button:focus-visible { outline: 2px solid #b0ffdc; outline-offset: 3px; }
#raio-x [hidden] { display: none !important; }
.rx-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rx-heading h2 { margin: 0; color: #81dbb6; font-size: 13px; font-weight: 600; letter-spacing: .6px; }
.rx-total { display: flex; align-items: center; gap: 14px; margin: 0; color: #abc5ba; font-size: 11px; }
.rx-total strong { color: #e5f5ed; font: 500 18px 'IBM Plex Mono', monospace; }
.rx-total small { margin-left: 5px; color: #abc5ba; font-size: 10px; }
.rx-scene { position: relative; width: 100%; height: clamp(330px, 39vw, 480px); overflow: hidden; background: radial-gradient(ellipse at 50% 55%, #24584033, transparent 65%); }
.rx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.rx-fallback { position: absolute; width: min(90%, 900px); height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#raio-x .rx-point {
  position: absolute; left: var(--x); top: var(--y);
  width: 44px; height: 44px;
  transform: translate(-50%, -50%); border: 0; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: transparent;
  opacity: var(--rx-points); pointer-events: auto;
}
#raio-x .rx-point::before { content: ''; width: 10px; height: 10px; background: #70efbb; border: 2px solid #102c22; border-radius: 50%; box-shadow: 0 0 0 5px #70efbb28; transition: background .2s, box-shadow .2s; }
#raio-x .rx-point:hover::before, #raio-x .rx-point[aria-expanded="true"]::before { background: #fff; box-shadow: 0 0 0 7px #70efbb44; }
.rx-popover { position: absolute; z-index: 10; width: 264px; max-width: calc(100% - 20px); padding: 18px; border: 1px solid #54836a; border-radius: 12px; background: #123429fa; box-shadow: 0 16px 40px #0006; }
.rx-detail-kicker { color: #99bdaa; font: 400 9px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .8px; }
.rx-popover h3 { margin: 8px 20px 10px 0; font-size: 14px; font-weight: 700; line-height: 1.4; }
.rx-amount { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.rx-amount strong { color: #83efbd; font: 500 20px 'IBM Plex Mono', monospace; letter-spacing: -.7px; }
.rx-amount small { color: #abc5ba; font-size: 10px; }
#rx-share-value { margin-left: auto; color: #c8dfd2; font: 400 11px 'IBM Plex Mono', monospace; }
.rx-popover p { margin: 10px 0 0; color: #c0d5c9; font-size: 11px; line-height: 1.65; }
#raio-x .rx-close { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: #c0d5c9; font-size: 20px; }
#raio-x .rx-close:hover { color: #fff; background: #ffffff0a; }
.rx-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rx-hint { display: flex; align-items: center; gap: 9px; color: #adc7ba; margin: 0; font-size: 11px; line-height: 1.6; }
.rx-hint-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #70efbb; }
.rx-actions { display: flex; gap: 10px; align-items: center; }
#raio-x .rx-toggle, #raio-x .rx-replay { min-height: 44px; padding: 8px 14px; border: 1px solid #406b54; border-radius: 9px; background: #153728; color: #bcf1d4; white-space: nowrap; font-size: 11px; }
#raio-x .rx-replay { background: transparent; border-color: transparent; color: #adc7ba; }
#raio-x .rx-toggle:hover, #raio-x .rx-replay:hover { color: #fff; background: #22513b; }
.rx-footnote { margin: 14px 0 0; color: #92b09f; font-size: 10px; line-height: 1.6; }
.rx-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; font-size: 12px; }
.rx-data dd { margin: 4px 0 0; color: #83efbd; }
@media (max-width: 760px) {
  #raio-x { padding: 28px 16px 22px; }
  .rx-heading { align-items: flex-start; }
  .rx-total { align-items: flex-end; flex-direction: column; gap: 5px; font-size: 9px; }
  .rx-total strong { font-size: 16px; }
  .rx-scene { height: clamp(255px, 64vw, 390px); }
  .rx-controls { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rx-hint { font-size: 10px; }
  .rx-actions { width: 100%; justify-content: flex-end; }
  .rx-popover { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #raio-x *, #raio-x *::before { animation: none !important; transition: none !important; }
}