.cvd {
  --cvd-h: clamp(420px, 44vw, 600px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr); gap: var(--s-4, 16px);
  min-height: var(--cvd-h); color: var(--ink, #f1f3ff); font-family: var(--body, system-ui, sans-serif);
}
.cvd-stage {
  position: relative; min-height: var(--cvd-h); border-radius: var(--r-lg, 20px); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 42%, #0a1630 0%, #03050d 58%, #000 100%);
  border: 1px solid var(--line, rgba(200, 210, 255, 0.16));
}
.cvd-globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.8s var(--e-out, ease); }
.cvd.ready .cvd-globe, .cvd-globe[data-ready] { opacity: 1; }
.cvd-hud {
  position: absolute; top: var(--s-4, 16px); right: var(--s-4, 16px); display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font: 500 12px/1.3 var(--mono, ui-monospace, monospace); color: var(--ink, #f1f3ff); pointer-events: none;
  padding: 8px 12px; border-radius: var(--r-md, 14px); background: rgba(8, 10, 24, 0.66); border: 1px solid var(--line, rgba(200, 210, 255, 0.16));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cvd-tplus { color: var(--ice, #7dd3fc); font-weight: 600; }
.cvd-tag {
  position: absolute; left: var(--s-4, 16px); bottom: var(--s-4, 16px); right: var(--s-4, 16px); pointer-events: none;
  font: 500 11.5px/1.4 var(--mono, ui-monospace, monospace); color: var(--mute, rgba(226, 231, 255, 0.78));
}
.cvd-fallback { position: absolute; inset: auto var(--s-4, 16px) 44px; margin: 0; font-size: 14px; color: var(--mute, rgba(226, 231, 255, 0.78)); }
.cvd-side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-4, 16px); min-width: 0; }
.cvd-card {
  margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 14px 14px 12px;
  border-radius: var(--r-lg, 20px); background: var(--panel, rgba(8, 10, 24, 0.86)); border: 1px solid var(--line, rgba(200, 210, 255, 0.16));
}
.cvd-card figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.cvd-card figcaption b { font-family: var(--disp, system-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.01em; }
.cvd-sub, .cvd-leg { font: 500 11px var(--mono, ui-monospace, monospace); color: var(--faint, rgba(226, 231, 255, 0.64)); display: inline-flex; align-items: center; gap: 6px; }
.cvd-leg i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-left: 6px; }
.cvd-leg i.m { background: #f97316; margin-left: 0; }
.cvd-leg i.r { height: 9px; width: 10px; background: rgba(34, 211, 238, 0.45); }
.cvd-map, .cvd-lat { flex: 1; width: 100%; min-height: 120px; display: block; border-radius: 10px; touch-action: pan-y; }
.cvd-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font: 500 10.5px var(--mono, ui-monospace, monospace); color: var(--faint, rgba(226, 231, 255, 0.64)); }
.cvd-bar i { height: 7px; border-radius: 4px; }
@media (max-width: 860px) {
  .cvd { grid-template-columns: minmax(0, 1fr); }
  .cvd-stage { min-height: clamp(300px, 88vw, 460px); }
  .cvd-side { grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
  .cvd-map, .cvd-lat { min-height: 150px; aspect-ratio: 2 / 1; flex: none; }
}
@media (prefers-reduced-motion: reduce) { .cvd-globe { transition: none; } }
html.paused .cvd-globe { transition: none; }