/* 760×576 sidebar banner shell — scaled iframe content. */
:root { --cl-bg:#0E1729; --cl-surface:#162238; --cl-bg-alt:#1B2940;
        --cl-accent:#1C6EEB; --cl-accent-soft:#4C8DFB; --cl-accent-deep:#1454C7;
        --ut-yellow:#EAB308; --ut-yellow-dark:#CA8A04; --ut-yellow-light:#FDE047;
        --ut-ink:#18181B; --ut-ink-soft:#27272A;
        --w:#fff; --muted:rgba(255,255,255,0.55); --border:rgba(255,255,255,0.08); }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; height:100%; overflow:hidden; background:transparent; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
       -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:-0.01em; }
.banner-host { width:760px; height:576px; flex-shrink:0; transform-origin:top left;
               transform: scale(calc(100vw / 760)); }
.bb { width:760px; height:576px; position:relative; overflow:hidden; padding:32px 36px;
      display:flex; flex-direction:column; gap:16px; border-radius:16px; color:#fff; }
.bb-shimmer { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:4; }
.bb-shimmer::after { content:''; position:absolute; top:0; left:0; width:40%; height:100%;
                     background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
                     transform:translateX(-100%) skewX(-20deg);
                     animation: bb-scan 5s ease-in-out infinite; animation-delay:1.5s; }
.bb-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
           font-size:10.5px; font-weight:800; letter-spacing:.12em; }
.bb-dot { position:relative; width:6px; height:6px; display:inline-block; }
.bb-dot::before,.bb-dot::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--cl-accent); }
.bb-dot::before { animation: bb-pulseDot 1.6s ease-out infinite; }
.bb-dot.w::before,.bb-dot.w::after { background:#fff; }
.bb-dot.y::before,.bb-dot.y::after { background:var(--ut-yellow); }
.bb-dot.ink::before,.bb-dot.ink::after { background:var(--ut-ink); }
.bb-cta { display:inline-flex; align-items:center; justify-content:center; gap:8px;
          font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.01em;
          border-radius:14px; text-decoration:none; cursor:pointer; border:none;
          white-space:nowrap; width:100%; padding:16px; font-size:15px;
          animation: bb-glow 2s infinite; }
@keyframes bb-scan { 0% { transform:translateX(-100%) skewX(-20deg); } 100% { transform:translateX(300%) skewX(-20deg); } }
@keyframes bb-pulseDot { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(2.4); opacity:0; } }
@keyframes bb-glow { 0%,100% { box-shadow:0 8px 22px -6px var(--g-clr, rgba(234,179,8,0.5)), 0 0 0 0 var(--g-clr, rgba(234,179,8,0.45)); }
                   50% { box-shadow:0 8px 22px -6px var(--g-clr, rgba(234,179,8,0.5)), 0 0 0 14px transparent; } }
@keyframes bb-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes bb-floatRotate { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-10px) rotate(3deg); } }
@keyframes bb-gradientShift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes bb-statusFlash { 0% { transform:scale(0.85); opacity:0; } 60% { transform:scale(1.1); opacity:1; } 100% { transform:scale(1); opacity:1; } }
@keyframes bb-countUp { 0% { transform:translateY(14px); opacity:0; } 100% { transform:translateY(0); opacity:1; } }
@keyframes bb-starDraw { 0% { transform:scale(0) rotate(-180deg); opacity:0; } 60% { transform:scale(1.3) rotate(0); opacity:1; } 100% { transform:scale(1) rotate(0); opacity:1; } }
@keyframes bb-chevronDown { 0% { transform:translateY(-10px); opacity:0; } 40%,60% { opacity:1; } 100% { transform:translateY(10px); opacity:0; } }
@keyframes bb-rankSwap { 0%,30% { transform:translateY(0); } 45%,85% { transform:translateY(-100%); } 100% { transform:translateY(0); } }
@keyframes bb-tierRise { 0% { transform:translateY(16px); opacity:0; } 100% { transform:translateY(0); opacity:1; } }
@keyframes bb-crownFloat { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-6px) rotate(4deg); } }
@keyframes bb-logoStrip { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes bb-ringExpand { 0% { transform:scale(0.7); opacity:1; } 100% { transform:scale(2.4); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .bb-shimmer::after { animation:none; }
  .bb *, .bb *::before, .bb *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}