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

/* 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: relative;
  z-index: 5;
  width: min(1180px, calc(100% - 32px));
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px auto 0;
  padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  color: #eafff8;
  background: rgba(5, 19, 28, .96);
  border: 1px solid rgba(87, 240, 202, .32);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  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) {
  .bb88-preview-banner { width: calc(100% - 20px); min-height: 38px; margin-top: 8px; justify-content: flex-start; gap: 8px; font-size: 11px; }
  .bb88-preview-banner span { display: none; }
  .bb88-preview-banner a { margin-left: auto; padding: 6px 9px; }
}


/* 88BB public preview anchored delay watermark v1.1
   Compact 20% overlay: always visible, never blocks clicks, and no longer
   dominates charts or Alpha candidate cards. */
.bb88-preview-delay-watermark {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2147482500;
  width: min(360px, 58vw);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: .20;
  text-align: center;
  color: #f4ffff;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .38));
  isolation: isolate;
}

.bb88-preview-delay-watermark img {
  display: block;
  width: min(112px, 18vw);
  height: auto;
  max-height: 68px;
  object-fit: contain;
}

.bb88-preview-delay-watermark__title {
  display: block;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 7px;
  font: 900 clamp(15px, 2vw, 23px)/1.08 Inter, system-ui, sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bb88-preview-delay-watermark__note {
  display: block;
  font: 800 clamp(9px, 1.05vw, 12px)/1.25 Inter, system-ui, sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .bb88-preview-delay-watermark {
    width: min(290px, 72vw);
    gap: 4px;
    opacity: .20;
  }
  .bb88-preview-delay-watermark img {
    width: min(82px, 22vw);
    max-height: 50px;
  }
  .bb88-preview-delay-watermark__title {
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: .035em;
  }
}

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