:root.bb88-preview-mode {
  --bb88-preview-height: 46px;
}

/* The global screener preview already has its own skeleton state. Suppress the
   shared premium loader so an uncached loader stylesheet cannot expose the
   source logo at its natural bitmap size during first paint. */
body.global-market-page .bb88-premium-loader {
  display: none !important;
}

body.global-market-page .bb88-premium-loader img {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
}

.bb88-preview-banner {
  position: sticky;
  top: 0;
  z-index: 2147483000;
  min-height: var(--bb88-preview-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px max(16px, env(safe-area-inset-right)) 9px max(16px, env(safe-area-inset-left));
  color: #eafff8;
  background: rgba(5, 19, 28, .96);
  border-bottom: 1px solid rgba(87, 240, 202, .38);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  font: 700 13px/1.35 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  backdrop-filter: blur(14px);
}

.bb88-preview-banner__status {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #62f4c5;
  box-shadow: 0 0 0 5px rgba(98, 244, 197, .1), 0 0 18px rgba(98, 244, 197, .65);
}

.bb88-preview-banner strong { color: #79f4d0; }
.bb88-preview-banner span { color: #c1d1d8; font-weight: 600; }
.bb88-preview-banner a {
  margin-left: 4px;
  color: #081318;
  background: #79f4d0;
  padding: 7px 11px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.bb88-preview-waiting {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2147482999;
  width: min(560px, calc(100vw - 28px));
  transform: translateX(-50%);
  padding: 14px 16px;
  color: #dbe8ed;
  background: rgba(7, 18, 28, .97);
  border: 1px solid rgba(255, 207, 101, .42);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .42);
  font: 600 13px/1.5 Inter, system-ui, sans-serif;
}

.bb88-preview-waiting strong { display: block; color: #ffd776; margin-bottom: 3px; }
.bb88-preview-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 2147483640;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  padding: 10px 14px;
  color: #ecffff;
  background: #102735;
  border: 1px solid rgba(102, 231, 228, .35);
  border-radius: 6px;
  transition: opacity .18s ease, transform .18s ease;
  font: 700 13px/1.35 Inter, system-ui, sans-serif;
}
.bb88-preview-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.bb88-preview-mode .gm-chart,
.bb88-preview-mode #gmTvLink,
.bb88-preview-mode [data-live-only] { display: none !important; }

.bb88-preview-mode [data-page="radar"] #market-data-alpha,
.bb88-preview-mode [data-page="radar"] #cmc-market-radar,
.bb88-preview-mode [data-page="radar"] #marketFearIndex,
.bb88-preview-mode [data-page="radar"] #futuresOiPanel,
.bb88-preview-mode [data-page="radar"] #coin-screener,
.bb88-preview-mode [data-page="radar"] #chart-war-room {
  display: none !important;
}

.bb88-preview-radar-card {
  min-width: 0;
  padding: 16px;
  background: rgba(8, 24, 35, .94);
  border: 1px solid rgba(82, 220, 210, .22);
  border-radius: 8px;
}
.bb88-preview-radar-card header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.bb88-preview-radar-card h4 { margin: 0; color: #f0fbff; font-size: 18px; }
.bb88-preview-radar-card b { color: #75f0c3; font-size: 20px; }
.bb88-preview-radar-card p { margin: 10px 0 0; color: #c4d4da; font-size: 13px; line-height: 1.55; }
.bb88-preview-radar-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bb88-preview-radar-meta span { padding: 5px 8px; border-radius: 5px; color: #a9c4ce; background: rgba(255,255,255,.045); font-size: 11px; }

@media (max-width: 680px) {
  :root.bb88-preview-mode { --bb88-preview-height: 58px; }
  .bb88-preview-banner { justify-content: flex-start; gap: 9px; font-size: 11px; }
  .bb88-preview-banner span { display: none; }
  .bb88-preview-banner a { margin-left: auto; padding: 6px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .bb88-preview-toast { transition: none; }
}