.logo-swap{animation:logoSwap .45s ease}
    @keyframes logoSwap{
      0%  {opacity:0;transform:scale(.8)}
      60% {opacity:1;transform:scale(1.06)}
      100%{opacity:1;transform:scale(1)}
    }

    /* =========================================================
       v3-mobile design polish — matches the gradient/animation
       style from index, fizook-demo, fizook-register, fizook-profile,
       and auction-details. ALL additions are additive: no existing
       class/ID is removed or renamed, so the page's JS continues to
       bind to the same DOM hooks.
       ========================================================= */

    /* Scroll progress bar at the top of the viewport. */
    .fz-scroll-progress{
      position:fixed;top:0;left:0;height:3px;width:0%;z-index:90;
      background:linear-gradient(90deg,#22d3ee,#7c3aed,#16a34a);
      box-shadow:0 0 12px rgba(124,58,237,.5);
      transition:width .1s linear;pointer-events:none;
    }

    /* Gradient marketing banner that sits between the sticky topbar
       and the existing .hero status-card. Inherits the same blob +
       coin language as the other Fizook surfaces. */
    .fz-hero-banner{
      position:relative;overflow:hidden;
      background:linear-gradient(135deg,#0b1220,#1a6494 50%,#7c3aed 110%);
      color:#fff;padding:36px 20px 60px;
      text-align:center;
      /* Negative bottom margin lifts the .hero status-card up over the
         banner's lower edge so it reads as a single composition. */
      margin-bottom:-40px;
    }
    .fz-hero-banner::before,
    .fz-hero-banner::after{
      content:"";position:absolute;border-radius:50%;
      filter:blur(48px);opacity:.55;pointer-events:none;
    }
    .fz-hero-banner::before{width:240px;height:240px;background:#22d3ee;top:-80px;left:-60px;animation:fzFloatA 9s ease-in-out infinite}
    .fz-hero-banner::after {width:260px;height:260px;background:#ec4899;bottom:-100px;right:-60px;animation:fzFloatB 11s ease-in-out infinite}
    @keyframes fzFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}}
    @keyframes fzFloatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,-18px)}}

    /* Falling coin confetti */
    .fz-coin{position:absolute;font-size:1.2rem;opacity:.85;pointer-events:none;animation:fzCoinFall linear infinite}
    .fz-coin.c1{left:10%;top:-30px;animation-duration:9s; animation-delay:0s}
    .fz-coin.c2{left:30%;top:-30px;animation-duration:11s;animation-delay:1.6s}
    .fz-coin.c3{left:55%;top:-30px;animation-duration:8s; animation-delay:.8s}
    .fz-coin.c4{left:78%;top:-30px;animation-duration:12s;animation-delay:3s}
    .fz-coin.c5{left:92%;top:-30px;animation-duration:10s;animation-delay:2.2s}
    @keyframes fzCoinFall{
      0%  {transform:translateY(-30px) rotate(0);opacity:0}
      10% {opacity:.9}
      90% {opacity:.9}
      100%{transform:translateY(110vh) rotate(720deg);opacity:0}
    }

    .fz-hero-banner-inner{
      position:relative;z-index:1;max-width:980px;margin:0 auto;
      display:flex;flex-direction:column;align-items:center;gap:10px;
    }
    .fz-hero-tag{
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px;
      font-size:.74rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    }
    .fz-hero-tag .pulse-dot{
      width:7px;height:7px;border-radius:50%;background:#22c55e;
      box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:fzPulse 1.6s infinite;
    }
    @keyframes fzPulse{
      0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
      70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}
      100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
    }
    .fz-hero-banner h1{
      margin:0;font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:800;
      letter-spacing:-.6px;line-height:1.1;
    }
    .fz-hero-banner h1 .grad{
      background:linear-gradient(135deg,#22d3ee 0%,#a78bfa 50%,#fbcfe8 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      background-size:200% 200%;animation:fzGradShift 8s ease infinite;
    }
    @keyframes fzGradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
    .fz-hero-banner p{margin:0;font-size:1rem;opacity:.92;max-width:640px;line-height:1.55}

    /* Lift the existing .hero (status card) up so its rounded corners
       float over the gradient banner — matches the depth used on the
       marketing pages. */
    .hero{position:relative;z-index:2}
    .status-card{
      border:1px solid rgba(15,23,42,.06);
      box-shadow:0 16px 40px rgba(15,23,42,.18) !important;
    }

    /* Stats: subtle gradient tint + lift on hover. The existing
       .v.green/.blue/.purple text colors still apply because they
       target the inner span. */
    .stat{
      background:linear-gradient(180deg,rgba(36,129,188,.05),rgba(124,58,237,.05)) !important;
      border-color:rgba(36,129,188,.14) !important;
      transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    }
    .stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:#cbd5e1 !important}

    /* Toolbar chips lift on hover, pop on active state. */
    .chip{transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
    .chip:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(36,129,188,.15)}
    .chip.active{box-shadow:0 4px 14px rgba(36,129,188,.3)}

    /* Held tray + feed section heads — beef up the weight a hair. */
    .held-title,.feed-head h3{font-weight:800}

    /* Subtle gradient sweep on the live feed rows when the user
       hovers — turns the feed into a more interactive list. */
    .feed-list li.feed-clickable{
      transition:background-color .15s ease, transform .15s ease;
      border-radius:8px;
    }
    .feed-list li.feed-clickable:hover{
      background:linear-gradient(90deg,rgba(36,129,188,.06),rgba(124,58,237,.06));
      transform:translateX(2px);
    }

    /* Dock: cleaner top shadow, gradient shine on the Start button. */
    .dock{box-shadow:0 -10px 30px rgba(15,23,42,.10) !important}
    .dock-actions .btn.btn-success{position:relative;overflow:hidden}
    .dock-actions .btn.btn-success::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
      transform:translateX(-100%);transition:transform .6s ease;pointer-events:none;
    }
    .dock-actions .btn.btn-success:hover::after{transform:translateX(100%)}

    /* Reveal-on-scroll helper applied via IntersectionObserver in
       the small script at the foot of the page. */
    .fz-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
    .fz-reveal.in{opacity:1;transform:translateY(0)}

    /* =========================================================
       FULL-PAGE BACKGROUND — radial-gradient ecosystem shared
       with index/demo/register/profile/auction-details, plus a
       slow animated mesh on body::before for ambient motion.
       ========================================================= */
    body{
      background-image:none !important;
      background-color:#f8fafc !important;
      background:
        radial-gradient(900px 500px at 10% -10%, rgba(124,58,237,.10), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(36,129,188,.12), transparent 60%),
        radial-gradient(700px 400px at 50% 110%, rgba(22,163,74,.06), transparent 70%),
        #f8fafc !important;
      background-attachment:fixed !important;
    }
    body::before{
      content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
      background:
        radial-gradient(640px 360px at 18% 24%, rgba(34,211,238,.10), transparent 65%),
        radial-gradient(540px 320px at 82% 76%, rgba(236,72,153,.08), transparent 65%),
        radial-gradient(480px 320px at 52% 100%, rgba(124,58,237,.06), transparent 70%);
      background-size:200% 200%;
      animation:fzMeshShift 22s ease-in-out infinite;
    }
    @keyframes fzMeshShift{
      0%,100%{background-position:  0% 0%, 100% 100%, 50% 100%}
      33%   {background-position: 30% 20%,  70% 70%, 62% 88%}
      66%   {background-position: 10% 60%,  92% 30%, 40% 78%}
    }

    /* =========================================================
       FONTS — defensive Inter rule. The external CSS sets it on
       html/body, but a few inline-styled elements pick up system
       fallbacks; this enforces Inter everywhere.
       ========================================================= */
    body,button,input,select,textarea,h1,h2,h3,h4,h5,h6,p,div,span,a,li,td,th,label{
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }
    /* Tabular numerals for any place a price/stat is shown so the
       digits don't shimmy as values change tick-to-tick. */
    .stat .v,.price-now,.price-was,.h-price,.held-counter,.sheet-prices .now,.sheet-prices .was{
      font-feature-settings:"tnum" 1, "lnum" 1;
      font-variant-numeric:tabular-nums lining-nums;
    }

    /* =========================================================
       MORE WOW
       ========================================================= */

    /* Active sort chip — quiet outward glow ring, inherits the
       primary blue. Reads as "this filter is on." */
    .chip.active{
      animation:fzChipGlow 2.6s ease-in-out infinite;
    }
    @keyframes fzChipGlow{
      0%,100%{box-shadow:0 4px 14px rgba(36,129,188,.32), 0 0 0 0 rgba(36,129,188,.45)}
      50%   {box-shadow:0 4px 14px rgba(36,129,188,.32), 0 0 0 9px rgba(36,129,188,0)}
    }

    /* Status card — subtle gradient sheen across the surface so it
       doesn't read as a flat white tile against the gradient page.
       Also gets the vendor-style colored left stripe + corner glow so
       it matches the visual treatment of the rest of the Fizook pages. */
    .status-card{
      position:relative;
      background:
        radial-gradient(160% 80% at 0% 0%, rgba(36,129,188,.04), transparent 60%),
        radial-gradient(160% 80% at 100% 100%, rgba(124,58,237,.04), transparent 60%),
        var(--surface) !important;
      padding-left:22px;
      overflow:hidden;
    }
    .status-card::before{
      content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
      background:linear-gradient(180deg,#2481bc,#1a6494);
      border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg);
      z-index:2;
    }
    .status-card::after{
      content:"";position:absolute;left:0;top:0;width:60%;height:140px;
      background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%);
      pointer-events:none;z-index:0;
    }
    .status-card > *{position:relative;z-index:1}

    /* Bidder cards — stronger lift + cyan/purple gradient outline on
       hover so the cards feel more interactive without changing the
       BEST-deal treatment in v2-mobile.css. */
    .bidder{
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .bidder:not(.best):not(.bidder-empty):hover{
      transform:translateY(-4px);
      border-color:transparent;
      box-shadow:
        0 0 0 2px rgba(124,58,237,.18),
        0 16px 30px rgba(15,23,42,.12);
    }

    /* Empty state painted into the bidder grid when the user hasn't
       saved any offers (or none are available right now). */
    .bidder-grid-empty{
      grid-column:1 / -1;
      background:linear-gradient(180deg,#fff,#f8fafc);
      border:1px dashed rgba(15,23,42,.18);
      border-radius:16px;
      padding:38px 24px;
      text-align:center;
      display:flex;flex-direction:column;align-items:center;gap:14px;
    }
    .bidder-grid-empty .icon{
      width:64px;height:64px;border-radius:50%;
      background:linear-gradient(135deg,rgba(36,129,188,.12),rgba(124,58,237,.12));
      display:grid;place-items:center;color:#7c3aed;font-size:1.5rem;
    }
    .bidder-grid-empty h3{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.2px}
    .bidder-grid-empty p{margin:0;color:rgba(15,23,42,.7);font-size:.92rem;max-width:42ch;line-height:1.5}
    .bidder-grid-empty .empty-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
    .bidder-grid-empty .empty-actions .btn{padding:10px 16px}

    /* Top-of-page banner for the availability override (?all=1) and
       the "none available right now" state. Sits above the toolbar. */
    .offers-banner{
      max-width:1240px;margin:0 auto 6px;padding:10px 16px;
      background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.04));
      border:1px solid rgba(245,158,11,.45);
      border-radius:12px;
      display:flex;align-items:center;gap:12px;flex-wrap:wrap;
      font-size:.88rem;color:#7c2d12;
    }
    .offers-banner.info{
      background:linear-gradient(135deg,rgba(36,129,188,.1),rgba(36,129,188,.03));
      border-color:rgba(36,129,188,.4);
      color:#0f172a;
    }
    .offers-banner i.lead{font-size:1.1rem;flex:0 0 auto}
    .offers-banner .msg{flex:1;min-width:220px;line-height:1.4}
    .offers-banner .msg strong{font-weight:800}
    .offers-banner .actions{display:flex;gap:6px;flex-wrap:wrap}
    .offers-banner .actions a, .offers-banner .actions button{
      appearance:none;border:1px solid rgba(15,23,42,.16);background:#fff;
      color:#0f172a;text-decoration:none;font-family:inherit;cursor:pointer;
      padding:6px 10px;border-radius:8px;font-size:.82rem;font-weight:700;
      display:inline-flex;align-items:center;gap:6px;
    }
    .offers-banner .actions a:hover, .offers-banner .actions button:hover{background:#f1f5f9}

    /* Held tray — when at least one slot is filled, ring the whole
       grid with an animated cyan→purple→pink gradient border to make
       the savings tally feel collected and "alive". */
    .held{
      position:relative;
      padding-top:6px;
    }
    .held .held-grid{
      position:relative;
      border-radius:14px;
      padding:6px;
      background:
        linear-gradient(var(--surface-2),var(--surface-2)) padding-box,
        linear-gradient(135deg,#22d3ee,#7c3aed,#ec4899) border-box;
      border:1px solid transparent;
      background-size:300% 100%, 200% 200%;
      animation:fzHeldShift 12s ease infinite;
    }
    @keyframes fzHeldShift{
      0%,100%{background-position:0% 0%, 0% 50%}
      50%   {background-position:0% 0%, 100% 50%}
    }
    .held .held-counter{
      box-shadow:0 0 0 0 rgba(36,129,188,.45);
      animation:fzCounterPulse 2.4s ease-in-out infinite;
    }
    @keyframes fzCounterPulse{
      0%,100%{box-shadow:0 0 0 0 rgba(36,129,188,.4)}
      50%   {box-shadow:0 0 0 6px rgba(36,129,188,0)}
    }

    /* Activity feed card — soft inner gradient + pulse-glow on the
       Live badge in the header. */
    .feed-card{
      background:
        radial-gradient(140% 80% at 100% 0%, rgba(124,58,237,.04), transparent 60%),
        var(--surface) !important;
    }
    .feed-head h3 i{
      filter:drop-shadow(0 0 6px rgba(124,58,237,.55));
      animation:fzBoltShimmer 2.4s ease-in-out infinite;
    }
    @keyframes fzBoltShimmer{
      0%,100%{filter:drop-shadow(0 0 4px rgba(124,58,237,.4))}
      50%   {filter:drop-shadow(0 0 12px rgba(124,58,237,.85))}
    }

    /* Stats — soft gradient text on the values so the headline numbers
       read like a marketing dashboard. The v2 colour modifiers
       (.green/.blue/.purple) override these via specificity, so live
       state during the auction still wins. */
    .stat .v{
      background:linear-gradient(135deg,#0f172a,#334155);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      letter-spacing:-.5px;
    }
    /* Re-apply solid colours when the JS toggles state classes — these
       beat the gradient because they're more specific. */
    .stat .v.green {background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--success)}
    .stat .v.blue  {background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--primary)}
    .stat .v.purple{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--accent)}

    /* Stats collapse — default (tablet/desktop): summary is hidden and
       the six tiles render as before. On phone, the <summary> becomes a
       minimal "Your Auction Statistics" filter-style bar and the tiles
       stay hidden until the user taps to expand. */
    .stats-collapsible{display:block;margin:0;padding:0;border:0;background:none}
    .stats-collapsible > summary{display:none}
    .stats-summary::-webkit-details-marker{display:none}
    .stats-summary::marker{content:""}
    @media (max-width:559.98px){
      .stats-collapsible > summary{
        display:flex;align-items:center;gap:10px;
        padding:10px 12px;
        background:
          linear-gradient(135deg,rgba(36,129,188,.05),rgba(124,58,237,.05)),
          var(--surface-2);
        border:1px solid var(--border);
        border-radius:var(--radius-sm);
        cursor:pointer;user-select:none;list-style:none;
        font-weight:700;font-size:.85rem;color:var(--text);
        transition:border-color .15s ease, background .15s ease;
      }
      .stats-collapsible > summary:hover,
      .stats-collapsible[open] > summary{
        border-color:rgba(36,129,188,.35);
      }
      .stats-collapsible[open] > summary{
        margin-bottom:10px;
      }
      .stats-summary-icon{
        display:inline-flex;align-items:center;justify-content:center;
        width:24px;height:24px;border-radius:6px;
        background:linear-gradient(135deg,rgba(36,129,188,.14),rgba(124,58,237,.14));
        color:var(--primary);font-size:.78rem;flex:0 0 auto;
      }
      .stats-summary-label{
        flex:1;text-transform:uppercase;font-size:.72rem;letter-spacing:.6px;color:var(--muted);
      }
      .stats-summary-chevron{
        font-size:.7rem;color:var(--muted);
        transition:transform .2s ease;flex:0 0 auto;
      }
      .stats-collapsible[open] > summary .stats-summary-chevron{
        transform:rotate(180deg);
      }
      .stats-collapsible > .stats{display:none}
      .stats-collapsible[open] > .stats{display:grid}
    }

    /* =========================================================
       Phone-only "collapse the header" behavior
       When body.fz-auction-active is set (see startAuction), the
       marketing hero-banner is hidden on phone so the ticker
       floats up under the top nav and becomes the topmost visible
       element. The ticker itself stays visible on phone (see the
       .fz-tl-phone rules further down for its label variant).
       Tablet/desktop are untouched — the banner stays.
       ========================================================= */
    @media (max-width:559.98px){
      body.fz-auction-active .fz-hero-banner{display:none !important}
    }

    /* Landscape phones — same collapse rule as portrait phones */
    @media (orientation:landscape) and (max-width:959.98px) and (max-height:500px){
      body.fz-auction-active .fz-hero-banner{display:none !important}
    }

    /* Sheet (offer detail) — heavier blurred backdrop and a soft
       cyan/purple glow halo behind the sheet panel itself. */
    .sheet-backdrop{backdrop-filter:saturate(1.2) blur(4px)}
    .sheet{box-shadow:0 24px 60px rgba(15,23,42,.32), 0 0 60px rgba(124,58,237,.15) !important}

    /* Toast — drop the success/info/warn versions over a softer panel. */
    .toast{
      box-shadow:0 16px 40px rgba(15,23,42,.28), 0 0 0 1px rgba(255,255,255,.08) inset;
    }

    /* Brand mark — subtle gradient text so "FIZOOK AUCTIONS" pops a
       little harder against the dark topbar. */
    .brand{
      background:linear-gradient(135deg,#ffffff,#a5f3fc 60%,#fbcfe8);
      -webkit-background-clip:text;background-clip:text;color:transparent !important;
    }
    /* Keep the solid white dot beside the brand from getting clipped. */
    .brand .dot{background:linear-gradient(135deg,#22d3ee,#7c3aed) !important;color:transparent}

    /* Admin menu — far-left dropdown linking to docs/admin pages. */
    .admin-menu{position:relative;display:inline-block;flex:0 0 auto}
    .admin-btn{
      background:rgba(255,255,255,.08);color:#fff;border:0;
      border-radius:6px;padding:7px 12px;cursor:pointer;
      font-family:inherit;font-size:.92rem;font-weight:700;
      display:inline-flex;align-items:center;gap:8px;
      transition:background .15s ease;
    }
    .admin-btn:hover{background:rgba(255,255,255,.18)}
    .admin-btn[aria-expanded="true"]{background:rgba(255,255,255,.18)}
    .admin-btn > i.fa-cogs{color:#22d3ee;font-size:.95rem}
    .admin-btn .admin-caret{color:#cbd5e1;font-size:.78rem;margin-left:2px;transition:transform .2s ease}
    .admin-btn[aria-expanded="true"] .admin-caret{transform:rotate(180deg)}
    .admin-dropdown{
      position:absolute;top:100%;right:0;left:auto;
      margin-top:6px;min-width:210px;
      background:rgba(11,18,32,.98);
      border:1px solid rgba(255,255,255,.12);
      border-radius:10px;padding:6px;
      box-shadow:0 16px 40px rgba(0,0,0,.5);
      z-index:60;
    }
    .admin-dropdown[hidden]{display:none}
    .admin-link{
      display:flex;align-items:center;gap:10px;
      padding:9px 12px;border-radius:6px;
      color:#cbd5e1;text-decoration:none;
      font-size:.92rem;font-weight:600;
      transition:background .15s ease,color .15s ease;
    }
    .admin-link:hover{background:rgba(255,255,255,.10);color:#fff}
    .admin-link.active{background:rgba(34,211,238,.15);color:#fff}
    .admin-link i{color:#22d3ee;width:14px;text-align:center;font-size:.92rem}
    .admin-section-label{
      font-size:.66rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
      color:#94a3b8;padding:8px 12px 4px;
    }
    .admin-divider{
      height:1px;background:rgba(255,255,255,.10);margin:6px 4px;
    }
    @media (max-width:559.98px){
      .admin-btn{padding:6px 10px;font-size:.86rem;gap:6px}
      .admin-btn-label{display:none}
    }

    /* =========================================================
       Hero banner — extra ambient flair (drifting sparkles) above
       the falling-coin animation so the banner has a touch more
       motion without becoming busy.
       ========================================================= */
    .fz-spark{
      position:absolute;font-size:.85rem;opacity:.85;pointer-events:none;
      animation:fzSparkleDrift 7s ease-in-out infinite;
    }
    .fz-spark.s1{top:14%;left:38%;animation-delay:0s}
    .fz-spark.s2{top:62%;left:46%;animation-delay:1.6s}
    .fz-spark.s3{top:30%;left:64%;animation-delay:3.2s}
    @keyframes fzSparkleDrift{
      0%,100%{transform:translateY(0) rotate(0);opacity:.4}
      50%   {transform:translateY(-10px) rotate(15deg);opacity:.95}
    }

    /* Phone-portrait: tighten banner so it doesn't crowd the status card. */
    @media (max-width:559.98px){
      .fz-hero-banner{padding:24px 18px 48px;margin-bottom:-32px}
      .fz-hero-banner h1{font-size:1.6rem}
      .fz-hero-banner p{font-size:.9rem}
      .fz-spark{display:none}
    }
    /* Phone-landscape: hide coin animation (CPU + clutter) and slim hero. */
    @media (orientation:landscape) and (max-height:500px){
      .fz-hero-banner{padding:16px 18px 40px;margin-bottom:-26px}
      .fz-hero-banner h1{font-size:1.3rem}
      .fz-hero-banner p{font-size:.82rem}
      .fz-coin,.fz-spark{display:none}
    }

    /* Sheet hold-flash — centered "Deal N of 8 Held" badge that fades
       in over the offer sheet for 3s after the user clicks Hold offer.
       The sheet itself stays open so the user can immediately hold
       another offer (or pick from the offer-strip) without reopening. */
    .sheet-hold-flash{
      position:absolute;
      top:50%;left:50%;
      transform:translate(-50%,-50%) scale(.92);
      background:linear-gradient(135deg,#22c55e,#16a34a);
      color:#fff;
      font-weight:500;
      font-size:1.15rem;
      letter-spacing:.2px;
      padding:16px 26px;
      border-radius:14px;
      box-shadow:0 18px 44px rgba(15,23,42,.35), 0 0 0 1px rgba(255,255,255,.18) inset;
      pointer-events:none;
      opacity:0;
      transition:opacity .22s ease, transform .22s ease;
      z-index:10;
      white-space:nowrap;
    }
    .sheet-hold-flash.show{
      opacity:1;
      transform:translate(-50%,-50%) scale(1);
    }
    /* Phone-portrait: shrink so the flash stays inside the bottom-sheet width */
    @media (max-width:559.98px){
      .sheet-hold-flash{
        font-size:1rem;
        padding:14px 20px;
      }
    }

    /* Reduce-motion: respect users who opt out of vivid animations.
       Keeps the colour but stops the looping movement. */
    @media (prefers-reduced-motion: reduce){
      body::before,
      .fz-hero-banner::before,
      .fz-hero-banner::after,
      .fz-coin,.fz-spark,
      .chip.active,.feed-head h3 i,
      .held .held-grid,.held-counter,
      .fz-hero-banner h1 .grad{
        animation:none !important;
      }
    }

    /* =========================================================
       v5-mobile column rules (override the shared v2 stylesheet):
         - Bidders: always 4 cols. Auctions 1 & 2 fill 2 rows of 4
           (8 active bidders each); auction 3 fills a partial single
           row of 3.
         - Held tray: 8 cols on tablet/laptop/desktop (single row),
           but stays at 4 cols × 2 rows on phone portrait + short
           landscape — see the @media blocks below.
       ========================================================= */
    .bidders{
      grid-template-columns:repeat(4,1fr) !important;
    }
    .bidders > .bidder{min-width:0}
    .held-grid{
      grid-template-columns:repeat(8,1fr) !important;
    }
    /* Small-tablet + large-phone-landscape fallback: 8 cols becomes too
       tight below 760px width. The narrower media blocks below (portrait
       ≤559 and landscape ≤500h) reset to 4 cols; this fills the gap. */
    @media (max-width:759.98px){
      .held-grid{grid-template-columns:repeat(4,1fr) !important}
    }
    /* Grid items default to min-width:auto, which prevents 1fr columns
       from shrinking below their intrinsic content. Force min-width:0
       on held-cards (and inner flex children) so columns honor 1fr
       cleanly at every viewport. */
    .held-grid > .held-card{min-width:0}
    .held-card .h-thumb,
    .held-card .h-thumb img{max-width:100%}
    .held-card .h-actions{min-width:0}
    .held-card .h-actions .btn{min-width:0}
    @media (max-width:559.98px){
      .bidders{
        gap:6px !important;
        padding:0 6px !important;
      }
      .bidders > .bidder{min-width:0}
      .bidder .vendor-logo{
        width:78px !important;
        height:78px !important;
      }
      .bidder .bidder-head > div,
      .bidder .bidder-meta{
        min-width:0 !important;
        max-width:100% !important;
      }
      .bidder .bidder-name{font-size:.68rem !important}
      .bidder .bidder-meta{
        display:block !important;
        font-size:.58rem !important;
        line-height:1.15 !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
        text-align:center !important;
      }
      .bidder .bidder-sub{font-size:.58rem !important}
      .bidder.best::after{
        font-size:.45rem !important;
        padding:2px 4px !important;
      }
      /* Held tray — 4 cols × 2 rows on phone portrait */
      .held-grid{
        grid-template-columns:repeat(4,1fr) !important;
        gap:6px !important;
      }
      .held{padding:0 6px !important}
      .held-card{padding:6px !important;gap:3px !important}
      .held-card .h-name{font-size:.62rem !important}
      .held-card .h-price{font-size:.78rem !important}
      .held-card .h-actions .btn{
        padding:4px 3px !important;
        font-size:.55rem !important;
      }
      .held-card.empty{
        font-size:.62rem !important;
        min-height:100px !important;
      }
    }
    @media (orientation:landscape) and (max-width:959.98px) and (max-height:500px){
      .bidders{
        gap:8px !important;
        padding:0 10px !important;
      }
      .bidder .meal-thumb{width:60px !important;height:60px !important}
      .bidder .meal-name{font-size:.78rem !important}
      .bidder .price-now{font-size:1rem !important}
      .bidder .price-was{font-size:.7rem !important}
      .bidder-actions .btn{padding:7px 5px !important;font-size:.7rem !important}
      /* Held tray — 4 cols × 2 rows on phone landscape */
      .held-grid{
        grid-template-columns:repeat(4,1fr) !important;
        gap:8px !important;
      }
    }

    /* ============================================================
       v6 LARGE-CARD MAKEOVER
       Scoped to ≥560px (the "large bidder card" treatment). Phone
       portrait already collapses bidder cards to logo-only via the
       v2 stylesheet, so these rules don't reach that breakpoint.

       Goals (drawn from typical eBay / StockX / Best Buy deal-card
       patterns): one piece of supporting copy in the head instead
       of two; a single consolidated savings indicator instead of
       three; a single primary CTA instead of two equal-weight
       buttons; calmer chrome (softer head separator, harmonized
       padding) so each card breathes.
       ============================================================ */
    @media (min-width:560px){
      /* Lift the whole card a hair so it feels more clickable, with a
         slightly softer default shadow that emphasizes hover. */
      .bidder{
        border-radius:16px !important;
        box-shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.06) !important;
      }

      /* Head: drop the inner border and the gradient wash. The brand
         identity reads cleaner against the body without a hard divider. */
      .bidder .bidder-head{
        border-bottom:0 !important;
        background:transparent !important;
        padding:14px 16px 6px !important;
        gap:12px !important;
      }
      /* Slightly larger logo tile for legibility; rounded-square with a
         subtle ring instead of the solid grey block. */
      .bidder .vendor-logo{
        width:44px !important;height:44px !important;
        border-radius:12px !important;
        background:#fff !important;
        box-shadow:inset 0 0 0 1px var(--border) !important;
      }
      .bidder .vendor-logo img{
        object-fit:contain !important;
        padding:4px !important;
      }
      .bidder .bidder-name{
        font-size:1.02rem !important;
        letter-spacing:-.2px;
      }
      /* New "N deals" caption replaces the old .bidder-sub line. */
      .bidder .bidder-meta{
        font-size:.74rem;
        color:var(--muted);
        margin-top:2px;
        font-weight:600;
        letter-spacing:.2px;
      }

      /* Body: tighten the padding, hold the meal+info row at top so the
         card has consistent breathing room when info shrinks/grows. */
      .bidder .bidder-body{
        padding:10px 16px 14px !important;
        gap:14px !important;
        align-items:flex-start !important;
      }
      .bidder .meal-thumb{
        width:104px !important;height:104px !important;
        border-radius:14px !important;
      }
      .bidder .meal-name{
        font-size:.98rem !important;
        margin:2px 0 8px !important;
      }

      /* Price row — three pieces (now / was / pct) line up on one
         baseline. Was-price keeps its strikethrough as quiet support;
         the new .pct-off chip carries the savings story compactly. */
      .bidder .price-row{
        align-items:center !important;
        gap:10px !important;
        flex-wrap:wrap !important;
      }
      .bidder .price-now{
        font-size:1.55rem !important;
        line-height:1 !important;
        letter-spacing:-.5px;
      }
      .bidder .price-was{
        font-size:.86rem !important;
        font-weight:600;
      }
      .bidder .pct-off{
        display:inline-flex;align-items:center;
        font-size:.74rem;font-weight:800;letter-spacing:.3px;
        color:#15803d;
        background:var(--success-light, #dcfce7);
        padding:3px 8px;border-radius:999px;
        line-height:1;
      }
      .bidder .awaiting-drop{
        display:inline-flex;align-items:center;gap:5px;
        font-size:.78rem;font-weight:600;color:var(--muted);
        background:#f1f5f9;padding:3px 9px;border-radius:999px;
      }

      /* Actions: compact pair of buttons at the foot of the card. Hold is
         the secondary ghost option; Accept is the dominant primary CTA. */
      .bidder .bidder-actions{
        padding:0 14px 12px !important;
        grid-template-columns:1fr 1.4fr !important;
        gap:8px !important;
      }
      .bidder .bidder-actions .btn-hold{
        padding:7px 10px !important;
        background:transparent !important;
        border:1px solid var(--border) !important;
        color:var(--muted) !important;
        font-size:.8rem !important;
        font-weight:700 !important;
      }
      .bidder .bidder-actions .btn-hold:hover{
        color:var(--primary) !important;
        border-color:var(--primary) !important;
        background:rgba(36,129,188,.06) !important;
      }
      .bidder .bidder-actions .btn-accept{
        padding:8px 12px !important;
        font-size:.84rem !important;
        letter-spacing:.2px;
      }

      /* The old .offer-meta row was removed from the JS template, but
         keep this rule defensive in case any code path still emits one
         (e.g. a stale renderer somewhere) — it stays hidden. */
      .bidder .offer-meta{display:none !important}
    }

    /* Best-deal badge — keep the existing green pulse, but reposition
       slightly so it sits cleanly in the rounder v6 corner. */
    .bidder.best::after{
      top:12px !important;right:12px !important;
      border-radius:8px !important;
    }

    /* ====================================================================
       v8 SHOWTIME — live-bidding animation overrides. Layered ON TOP of
       v6 so any rule that wants to win specificity here uses !important.
       Rules are grouped by feature: battle ticker, top-3 podium, rank
       chips, intensity meters, price tumble, beat overlay, bidding-war
       cyan ring.
       ==================================================================== */
    /* ============================================================
       BATTLE TICKER — dark sportscaster strip that streams price-drop
       commentary. Sits between the hero banner and the status card.
       Hidden until the auction starts (.live class added by JS).
       ============================================================ */
    .fz-ticker{
      position:relative;overflow:hidden;
      background:linear-gradient(90deg,#0b1220 0%,#1e293b 50%,#0b1220 100%);
      color:#fff;
      border-top:1.5px solid rgba(124,58,237,.85);
      border-bottom:1.5px solid rgba(124,58,237,.85);
      box-shadow:0 8px 22px rgba(15,23,42,.18);
      z-index:3;
      margin-top:0;
    }
    .fz-ticker::before,.fz-ticker::after{
      content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;
    }
    .fz-ticker::before{left:0;background:linear-gradient(90deg,#0b1220,transparent)}
    .fz-ticker::after{right:0;background:linear-gradient(270deg,#0b1220,transparent)}
    .fz-ticker-label{
      display:flex;align-items:center;gap:8px;
      background:linear-gradient(135deg,#dc2626,#ef4444);
      color:#fff;font-weight:800;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;
      padding:8px 14px;flex-shrink:0;z-index:3;position:relative;
      box-shadow:2px 0 8px rgba(220,38,38,.35);
    }
    .fz-ticker-label .live-pulse{
      width:8px;height:8px;border-radius:50%;background:#fff;
      animation:fzLivePulse 1.1s ease-in-out infinite;
    }
    @keyframes fzLivePulse{
      0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.95);opacity:1}
      70%   {box-shadow:0 0 0 8px rgba(255,255,255,0);opacity:.8}
    }
    .fz-ticker-row{display:flex;align-items:stretch;min-height:38px}
    .fz-ticker-track{
      flex:1;overflow:hidden;position:relative;
      display:flex;align-items:center;
    }
    .fz-ticker-belt{
      display:flex;align-items:center;gap:34px;
      white-space:nowrap;
      animation:fzTickerScroll 38s linear infinite;
      padding-left:20px;
      /* Standard mobile marquee pattern — translate3d keeps the belt on
         a hardware-composited layer without needing will-change (which
         can cause memory pressure with very wide belts on iOS). */
      -webkit-backface-visibility:hidden;
              backface-visibility:hidden;
    }
    .fz-ticker-belt.paused{animation-play-state:paused}
    /* Belt content is duplicated 3× (single + single + single); animate
       -33.333% so the visible "seam" jumps from copy 2 back to copy 1
       (visually identical to copy 2 → seamless loop). Was -50% when the
       belt was doubled; tripling required the smaller offset. */
    @keyframes fzTickerScroll{
      0%  {transform:translate3d(0,0,0)}
      100%{transform:translate3d(-33.3333%,0,0)}
    }
    .fz-ticker-item{
      display:inline-flex;align-items:center;gap:8px;
      font-size:.92rem;font-weight:600;letter-spacing:.2px;
    }
    .fz-ticker-item .ti-icon{font-size:1.1rem}
    .fz-ticker-item.drop  .ti-icon{color:#22c55e}
    .fz-ticker-item.lead  .ti-icon{color:#fbbf24}
    .fz-ticker-item.war   .ti-icon{color:#22d3ee}
    .fz-ticker-item.event .ti-icon{color:#a78bfa}
    .fz-ticker-item .ti-vendor{color:#a5f3fc;font-weight:700}
    .fz-ticker-item .ti-price{color:#86efac;font-weight:800;font-feature-settings:"tnum" 1}
    .fz-ticker-item .ti-pct{
      background:rgba(34,197,94,.18);color:#86efac;
      padding:2px 7px;border-radius:999px;
      font-size:.72rem;font-weight:800;
    }
    .fz-ticker-item .ti-sep{
      color:rgba(255,255,255,.18);font-size:1.1rem;
      transform:translateY(-1px);
    }
    /* Phone/desktop split for the ticker label. Desktop keeps the
       familiar "On the wire" wording; phone swaps to a tighter
       "LIVE" badge with a flashing gold bolt icon so the strip
       reads as the primary live-status indicator on small screens. */
    .fz-tl-phone{display:none}
    .fz-tl-desktop{display:inline}
    @media (max-width:559.98px){
      .fz-ticker-label{font-size:.66rem;padding:6px 10px;gap:6px}
      .fz-ticker-label span:not(.live-pulse){letter-spacing:.6px}
      .fz-ticker-item{font-size:.78rem}
      .fz-ticker-item .ti-icon{font-size:1rem}
      .fz-ticker-item .ti-pct{font-size:.62rem;padding:1px 6px}
      .fz-ticker-belt{gap:24px;animation-duration:32s}
      .fz-ticker-row{min-height:34px}
      .fz-tl-desktop{display:none}
      .fz-tl-phone{
        display:inline-flex;align-items:center;
        font-weight:900;letter-spacing:.6px;
      }
    }
    /* Phone-landscape: compact strip, faster scroll, smaller separators —
       the available height is tight so the ticker shouldn't dominate. */
    @media (orientation:landscape) and (max-width:959.98px) and (max-height:500px){
      .fz-ticker-label{font-size:.58rem;padding:5px 9px;letter-spacing:.5px}
      .fz-ticker-item{font-size:.74rem}
      .fz-ticker-item .ti-icon{font-size:.95rem}
      .fz-ticker-item .ti-pct{font-size:.6rem;padding:1px 6px}
      .fz-ticker-belt{gap:22px;animation-duration:28s}
      .fz-ticker-row{min-height:30px}
    }

    /* ============================================================
       TOP-3 PODIUM — gold/silver/bronze tiles below the status card.
       Width matches the rest of the page chrome (max 1280px, 16px
       horizontal gutter) so the podium aligns flush with the toolbar,
       bidder grid, held tray, and feed underneath it.

       Layout note: the .fz-podium <section> is the outer wrapper that
       handles the page-wide gutter; the gold-rim card lives inside on
       .fz-podium-card so the wrapper stays transparent (no edge-to-edge
       coloured background) and the card matches the inner-content
       width of the other sections.
       ============================================================ */
    .fz-podium{
      max-width:1280px;
      margin:14px auto 0;
      padding:0 16px;
    }
    .fz-podium-card{
      background:
        radial-gradient(140% 80% at 0% 0%,rgba(251,191,36,.07),transparent 60%),
        radial-gradient(140% 80% at 100% 100%,rgba(124,58,237,.05),transparent 60%),
        var(--surface,#fff);
      border:1px solid rgba(251,191,36,.22);
      border-radius:16px;
      padding:14px 16px 16px;
      box-shadow:0 12px 30px rgba(15,23,42,.10);
      position:relative;
      overflow:hidden;
    }
    .fz-podium-card::before{
      content:"";position:absolute;inset:-2px;
      border-radius:18px;
      background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(34,211,238,.10),rgba(124,58,237,.14));
      z-index:-1;
      filter:blur(14px);
      opacity:.6;
    }
    .fz-podium-head{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      margin:0 0 10px;
    }
    .fz-podium-title{
      margin:0;font-size:1rem;font-weight:800;letter-spacing:.2px;
      color:#0f172a;display:flex;align-items:center;gap:8px;
    }
    .fz-podium-title i{color:#f59e0b;filter:drop-shadow(0 0 6px rgba(245,158,11,.45))}
    .fz-podium-sub{
      font-size:.68rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
      color:#0f172a;background:linear-gradient(135deg,#fde68a,#fbbf24);
      padding:4px 10px;border-radius:999px;
      box-shadow:0 0 0 1px rgba(245,158,11,.35);
    }
    .fz-podium-grid{
      display:grid;
      grid-template-columns:1fr 1.15fr 1fr;
      gap:10px;
      align-items:end;
    }
    .fz-pod{
      position:relative;
      border-radius:12px;
      padding:10px 12px 12px;
      background:#fff;
      border:1px solid var(--border,#e2e8f0);
      display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;
      transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
      cursor:pointer;
      min-height:120px;
      /* Grid items default to min-width:auto, which sizes them to their
         intrinsic min-content. Without this, a long vendor or meal name
         (e.g. "Royal Crispy Chicken Meal") forces the cell wider than
         its 1fr share and pushes the rightmost podium tile past the
         viewport on a phone in portrait. */
      min-width:0;
    }
    /* Right column — vertical stack of vendor / meal / price, centered as
       a group beside the logo. */
    .pod-info{
      display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
    }
    .fz-pod.empty{opacity:.55;cursor:default;border-style:dashed}
    .fz-pod.empty .pod-medal,.fz-pod.empty .pod-vendor,.fz-pod.empty .pod-price{visibility:hidden}
    .fz-pod.empty .pod-meal{visibility:hidden}
    .fz-pod-1{
      background:linear-gradient(180deg,#fffbeb,#fef3c7);
      border-color:#f59e0b;
      box-shadow:0 10px 28px rgba(245,158,11,.28),inset 0 0 0 1px rgba(255,255,255,.6);
      transform:translateY(-6px);
      min-height:148px;
    }
    .fz-pod-1::before{
      content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
      box-shadow:0 0 0 0 rgba(245,158,11,.4);
      animation:fzPodGoldPulse 2s ease-in-out infinite;
    }
    @keyframes fzPodGoldPulse{
      0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.45)}
      50%   {box-shadow:0 0 0 10px rgba(245,158,11,0)}
    }
    .fz-pod-2{
      background:linear-gradient(180deg,#f8fafc,#e2e8f0);
      border-color:#94a3b8;
    }
    .fz-pod-3{
      background:linear-gradient(180deg,#fff7ed,#fed7aa);
      border-color:#c2410c;
    }
    .fz-pod.flip{
      animation:fzPodFlip .55s ease;
    }
    @keyframes fzPodFlip{
      0%  {transform:rotateY(0) translateY(-6px)}
      50% {transform:rotateY(90deg) translateY(-12px) scale(1.06)}
      100%{transform:rotateY(0) translateY(-6px)}
    }
    .fz-pod-2.flip,.fz-pod-3.flip{
      animation-name:fzPodFlipSm;
    }
    @keyframes fzPodFlipSm{
      0%  {transform:rotateY(0)}
      50% {transform:rotateY(90deg) scale(1.04)}
      100%{transform:rotateY(0)}
    }
    .pod-medal{
      position:absolute;top:-14px;left:50%;transform:translateX(-50%);
      font-size:.88rem;font-weight:800;letter-spacing:.6px;
      padding:5px 14px;border-radius:999px;
      box-shadow:0 5px 12px rgba(15,23,42,.22);
      white-space:nowrap;
    }
    .fz-pod-1 .pod-medal{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#7c2d12;font-size:.95rem;padding:6px 16px}
    .fz-pod-2 .pod-medal{background:linear-gradient(135deg,#cbd5e1,#94a3b8);color:#1e293b}
    .fz-pod-3 .pod-medal{background:linear-gradient(135deg,#fb923c,#c2410c);color:#fff}
    .pod-logo{
      width:68px;height:68px;border-radius:12px;
      background:#fff;
      box-shadow:0 3px 8px rgba(15,23,42,.12),inset 0 0 0 1px rgba(15,23,42,.06);
      display:flex;align-items:center;justify-content:center;
      position:relative;
      overflow:hidden;
    }
    .pod-logo img{width:100%;height:100%;object-fit:contain;padding:4px}
    .fz-pod-1 .pod-logo{width:88px;height:88px;border-radius:14px}

    /* Pre-start placeholder image treatment for empty podium slots.
       Matches the bidder waiting-card vibe: soft diagonal stripes + hourglass. */
    .fz-pod.empty .pod-logo{
      background:repeating-linear-gradient(135deg,#f8fafc 0 8px,#eef2f7 8px 16px);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(148,163,184,.25);
    }
    .fz-pod.empty .pod-logo img{display:none}
    .fz-pod.empty .pod-logo::before{
      content:"\f253";
      font-family:FontAwesome;
      font-size:1.5rem;
      color:#94a3b8;
      line-height:1;
      filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
    }
    .fz-pod-1.empty .pod-logo::before{color:#d6a644}
    .fz-pod-2.empty .pod-logo::before{color:#94a3b8}
    .fz-pod-3.empty .pod-logo::before{color:#d97706}
    .pod-vendor{
      font-size:.98rem;font-weight:700;color:#0f172a;
      max-width:100%;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      text-align:center;
      letter-spacing:-.2px;
    }
    .fz-pod-1 .pod-vendor{font-size:1.12rem;font-weight:800}
    .pod-meal{
      font-size:.78rem;color:var(--muted,#64748b);font-weight:600;
      max-width:100%;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      text-align:center;
    }
    .pod-price{
      font-size:1.4rem;font-weight:800;color:#0f172a;
      letter-spacing:-.5px;line-height:1.1;
      font-feature-settings:"tnum" 1;
    }
    .fz-pod-1 .pod-price{font-size:1.7rem;color:#92400e}
    .fz-pod-2 .pod-price{color:#1e293b}
    .fz-pod-3 .pod-price{color:#7c2d12}

    @media (max-width:559.98px){
      .fz-podium{padding:0 8px}
      .fz-podium-card{padding:12px 10px 14px;border-radius:14px}
      .fz-podium-title{font-size:.88rem}
      .fz-podium-sub{font-size:.58rem;padding:3px 8px}
      /* Tighter gap + slightly bigger gold share so the 3 tiles fit
         the portrait viewport edge-to-edge. Silver and bronze stay
         equal at 1fr each; gold is the headliner at 1.2fr. */
      .fz-podium-grid{grid-template-columns:1fr 1.2fr 1fr;gap:5px}
      /* Phones are too narrow for a 3-tile horizontal-content grid — fall
         back to the vertical stack so logo sits above the text on each tile. */
      .fz-pod{padding:12px 4px 10px;min-height:128px;flex-direction:column;gap:6px}
      .fz-pod-1{min-height:148px;padding:14px 6px 12px}
      .fz-pod .pod-info{width:100%;min-width:0;align-items:center}
      .pod-logo{width:48px;height:48px}
      .fz-pod-1 .pod-logo{width:60px;height:60px}
      /* Let long vendor / meal names wrap to multiple lines instead of
         forcing the cell wider with nowrap. Drop the ellipsis path. */
      .pod-vendor,
      .pod-meal{
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        word-break:break-word;
        overflow-wrap:break-word;
        line-height:1.18;
        max-width:100%;
      }
      .pod-vendor{font-size:.76rem}
      .fz-pod-1 .pod-vendor{font-size:.86rem}
      .pod-meal{font-size:.64rem}
      .pod-price{font-size:1.05rem}
      .fz-pod-1 .pod-price{font-size:1.25rem}
      .pod-medal{font-size:.7rem;padding:3px 9px;top:-11px}
      .fz-pod-1 .pod-medal{font-size:.76rem;padding:4px 11px}
    }
    /* Phone landscape: keep all three tiles + the podium chrome but slim
       down the card padding and tile height so the leaderboard reads as a
       compact horizontal strip without crowding the bidder grid below. */
    @media (orientation:landscape) and (max-width:959.98px) and (max-height:500px){
      .fz-podium{padding:0 12px}
      .fz-podium-card{padding:14px 12px 12px;border-radius:14px}
      .fz-podium-head{margin-bottom:6px}
      .fz-podium-title{font-size:.86rem}
      .fz-podium-sub{font-size:.58rem;padding:2px 8px}
      .fz-podium-grid{gap:8px}
      .fz-pod{padding:10px 8px 8px;min-height:96px}
      .fz-pod-1{min-height:108px;transform:translateY(-3px)}
      .pod-logo{width:44px;height:44px}
      .fz-pod-1 .pod-logo{width:54px;height:54px}
      .pod-vendor{font-size:.78rem}
      .fz-pod-1 .pod-vendor{font-size:.88rem}
      .pod-meal{font-size:.66rem}
      .pod-price{font-size:1rem}
      .fz-pod-1 .pod-price{font-size:1.18rem}
      .pod-medal{font-size:.68rem;padding:3px 9px;top:-10px}
      .fz-pod-1 .pod-medal{font-size:.74rem;padding:4px 10px}
    }

    /* ============================================================
       BIDDER CARD — rank chips, intensity meter, on-fire badge,
       new-leader flag, beat-by overlay, bidding-war ring.
       ============================================================ */
    .bidder{
      position:relative;
      overflow:visible !important;
    }

    /* Rank chip in the upper-left corner. v6 puts the BEST DEAL badge in
       the upper-right; this chip sits opposite. */
    .bidder .rank-chip{
      position:absolute;top:10px;left:10px;
      z-index:4;
      display:inline-flex;align-items:center;gap:3px;
      font-size:.66rem;font-weight:800;letter-spacing:.5px;
      padding:3px 8px;border-radius:999px;
      background:#fff;color:#475569;
      box-shadow:0 2px 6px rgba(15,23,42,.12),inset 0 0 0 1px var(--border,#e2e8f0);
      pointer-events:none;
      transition:transform .25s ease;
    }
    .bidder .rank-chip.r1{
      background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#7c2d12;
      box-shadow:0 4px 12px rgba(245,158,11,.45);
    }
    .bidder .rank-chip.r2{
      background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#1e293b;
    }
    .bidder .rank-chip.r3{
      background:linear-gradient(135deg,#fb923c,#c2410c);color:#fff;
    }
    .bidder .rank-chip.changed{animation:fzRankPop .55s cubic-bezier(.34,1.56,.64,1)}
    @keyframes fzRankPop{
      0%  {transform:scale(.6) rotate(-12deg);opacity:0}
      50% {transform:scale(1.25) rotate(8deg)}
      100%{transform:scale(1) rotate(0);opacity:1}
    }

    /* Phone-portrait & short landscape: shrink rank chip to keep the small
       cards uncluttered. */
    @media (max-width:559.98px){
      .bidder .rank-chip{font-size:.55rem;padding:2px 5px;top:6px;left:6px}
    }
    @media (orientation:landscape) and (max-width:959.98px) and (max-height:500px){
      .bidder .rank-chip{font-size:.58rem;padding:2px 6px;top:6px;left:6px}
    }

    /* "ON FIRE" badge — appears on bidders who've dropped 3+ times in the
       current auction. Rendered INLINE inside .bidder-meta so it doesn't
       overlap the "X deals · drops" text. */
    .bidder .fire-badge{
      display:inline-flex;align-items:center;gap:3px;
      font-size:.6rem;font-weight:800;letter-spacing:.5px;
      padding:2px 7px;border-radius:999px;margin-left:6px;
      background:linear-gradient(135deg,#f97316,#dc2626);
      color:#fff;
      box-shadow:0 3px 8px rgba(220,38,38,.35);
      vertical-align:middle;
      pointer-events:none;
      animation:fzFireWobble 1.2s ease-in-out infinite;
    }
    .bidder .fire-badge i{
      animation:fzFireFlicker .8s ease-in-out infinite alternate;
    }
    @keyframes fzFireWobble{
      0%,100%{transform:rotate(-3deg)}
      50%   {transform:rotate(3deg)}
    }
    @keyframes fzFireFlicker{
      0%  {filter:drop-shadow(0 0 2px #fbbf24)}
      100%{filter:drop-shadow(0 0 6px #fde047)}
    }
    @media (max-width:559.98px){
      .bidder .fire-badge{font-size:.5rem;padding:2px 5px;gap:2px;margin-left:4px}
      .bidder .fire-badge .label{display:none}
    }
    @media (orientation:landscape) and (max-width:959.98px) and (max-height:500px){
      .bidder .fire-badge{font-size:.52rem}
    }

    /* Intensity meter — 5 vertical bars in the upper-right that fill as
       the bidder drops more aggressively. Sits next to (left of) the
       BEST DEAL badge so they don't collide. */
    .bidder .intensity{
      position:absolute;top:14px;right:14px;
      z-index:3;
      display:flex;align-items:flex-end;gap:2px;
      height:14px;
      pointer-events:none;
      transition:opacity .25s ease;
    }
    .bidder.best .intensity{
      top:auto;bottom:62px;right:14px;
    }
    .bidder .intensity .bar{
      width:3px;background:rgba(15,23,42,.12);border-radius:2px;
      transition:height .35s ease, background .35s ease, box-shadow .35s ease;
    }
    .bidder .intensity .bar:nth-child(1){height:30%}
    .bidder .intensity .bar:nth-child(2){height:48%}
    .bidder .intensity .bar:nth-child(3){height:64%}
    .bidder .intensity .bar:nth-child(4){height:82%}
    .bidder .intensity .bar:nth-child(5){height:100%}
    .bidder .intensity .bar.lit{
      background:linear-gradient(180deg,#22c55e,#16a34a);
      box-shadow:0 0 6px rgba(34,197,94,.55);
    }
    .bidder .intensity .bar.lit.hot{
      background:linear-gradient(180deg,#fbbf24,#f97316);
      box-shadow:0 0 8px rgba(249,115,22,.65);
    }
    .bidder .intensity .bar.lit.fire{
      background:linear-gradient(180deg,#ef4444,#dc2626);
      box-shadow:0 0 10px rgba(220,38,38,.7);
      animation:fzBarPulse .9s ease-in-out infinite;
    }
    @keyframes fzBarPulse{
      0%,100%{opacity:1}
      50%   {opacity:.55}
    }
    /* Phone-portrait: shrink the meter to a 2px-wide / 10px-tall strip and
       tuck it into the upper-right of the logo-only card. Phone-landscape:
       slightly bigger so it reads from a glance. The bars themselves keep
       their lit/hot/fire colour states from the desktop rules. */
    @media (max-width:559.98px){
      .bidder .intensity{
        top:6px;right:6px;height:10px;gap:1.5px;
      }
      .bidder .intensity .bar{width:2px}
      .bidder.best .intensity{
        top:auto;bottom:32px;right:6px;
      }
    }
    @media (orientation:landscape) and (max-width:959.98px) and (max-height:500px){
      .bidder .intensity{
        top:8px;right:8px;height:12px;gap:2px;
      }
      .bidder .intensity .bar{width:2.5px}
      .bidder.best .intensity{
        top:auto;bottom:42px;right:8px;
      }
    }

    /* "NEW LEADER!" flag — pinned overlay that flies in from the left when
       a bidder claims the #1 slot. Auto-removed by JS after ~2.4s. */
    .bidder .leader-flag{
      position:absolute;top:50%;left:50%;
      transform:translate(-50%,-50%) scale(.5) rotate(-8deg);
      z-index:6;
      background:linear-gradient(135deg,#fbbf24,#f59e0b);
      color:#7c2d12;
      font-weight:900;font-size:1.05rem;letter-spacing:1.2px;
      padding:10px 18px;border-radius:12px;
      box-shadow:0 14px 30px rgba(15,23,42,.32),0 0 18px rgba(245,158,11,.5),0 0 0 2px rgba(255,255,255,.85) inset;
      pointer-events:none;
      text-transform:uppercase;
      animation:fzLeaderFly 2.4s ease forwards;
      white-space:nowrap;
    }
    @keyframes fzLeaderFly{
      0%   {opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-12deg)}
      14%  {opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(6deg)}
      26%  {transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
      78%  {opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
      100% {opacity:0;transform:translate(-50%,-50%) scale(.95) rotate(0)}
    }
    @media (max-width:559.98px){
      .bidder .leader-flag{font-size:.7rem;padding:6px 12px;letter-spacing:.6px}
    }
    @media (orientation:landscape) and (max-width:959.98px) and (max-height:500px){
      .bidder .leader-flag{font-size:.78rem;padding:7px 14px;letter-spacing:.8px}
    }

    /* "BEAT BY $X" overlay — fades over the previous-leader card when it
       gets overtaken. Quieter than the leader flag, but visible. */
    .bidder .beat-overlay{
      position:absolute;inset:0;
      z-index:5;
      display:flex;align-items:center;justify-content:center;flex-direction:column;
      gap:4px;
      background:linear-gradient(180deg,rgba(15,23,42,.65),rgba(15,23,42,.78));
      color:#fff;border-radius:inherit;
      pointer-events:none;
      animation:fzBeatFade 1.8s ease forwards;
      backdrop-filter:blur(2px);
    }
    .bidder .beat-overlay .beat-label{
      font-size:.7rem;font-weight:800;letter-spacing:1.5px;
      color:#fca5a5;text-transform:uppercase;
    }
    .bidder .beat-overlay .beat-amount{
      font-size:1.45rem;font-weight:900;
      background:linear-gradient(135deg,#fee2e2,#fca5a5);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      letter-spacing:-.5px;
      font-feature-settings:"tnum" 1;
    }
    @keyframes fzBeatFade{
      0%   {opacity:0}
      18%  {opacity:1}
      78%  {opacity:1}
      100% {opacity:0}
    }
    @media (max-width:559.98px){
      .bidder .beat-overlay{gap:2px}
      .bidder .beat-overlay .beat-label{font-size:.55rem;letter-spacing:1px}
      .bidder .beat-overlay .beat-amount{font-size:1.05rem}
    }
    @media (orientation:landscape) and (max-width:959.98px) and (max-height:500px){
      .bidder .beat-overlay{gap:3px}
      .bidder .beat-overlay .beat-label{font-size:.6rem;letter-spacing:1.1px}
      .bidder .beat-overlay .beat-amount{font-size:1.2rem}
    }

    /* Bidding-war pulse — applied to 2+ cards that drop in the same tick.
       Calmer than the leader-flag burst; the cyan ring just signals
       "these two are dueling right now." */
    .bidder.battling{
      animation:fzBattlePulse 1.5s ease-in-out 1;
    }
    @keyframes fzBattlePulse{
      0%,100%{box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.06)}
      30%   {box-shadow:0 0 0 3px rgba(34,211,238,.55),0 14px 34px rgba(34,211,238,.18)}
      70%   {box-shadow:0 0 0 2px rgba(124,58,237,.45),0 12px 28px rgba(124,58,237,.18)}
    }

    /* Price-now flash ring — a soft green flash behind the price tile
       while the tumble animation is running. The .flash class added
       briefly by JS fires this. v2 stylesheet already defines a colour
       transition for .flash; this overlays a richer ring. */
    .bidder .price-now.flash{
      animation:fzPriceFlash .6s ease;
    }
    @keyframes fzPriceFlash{
      0%  {color:#16a34a;text-shadow:0 0 0 rgba(34,197,94,0)}
      40% {color:#16a34a;text-shadow:0 0 18px rgba(34,197,94,.85)}
      100%{color:inherit;text-shadow:0 0 0 rgba(34,197,94,0)}
    }

    /* DROP arrow chip — appears next to the price for ~700ms after a
       drop tick to make the change extra obvious. Inserted by JS. */
    .bidder .drop-pop{
      position:absolute;top:-10px;right:-6px;
      background:linear-gradient(135deg,#dc2626,#ef4444);
      color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.4px;
      padding:2px 7px;border-radius:999px;
      box-shadow:0 6px 14px rgba(220,38,38,.45);
      animation:fzDropPop .8s ease forwards;
      pointer-events:none;
      white-space:nowrap;
    }
    @keyframes fzDropPop{
      0%  {transform:translateY(8px) scale(.6);opacity:0}
      30% {transform:translateY(-2px) scale(1.15);opacity:1}
      70% {transform:translateY(-6px) scale(1);opacity:1}
      100%{transform:translateY(-12px) scale(.9);opacity:0}
    }
    .bidder .price-row{position:relative}

    /* The .price-now element gets a relative-positioned wrapper so the
       drop-pop can hang off its corner without disturbing layout. */
    .bidder .price-now{position:relative}

    /* Deal availability line — shown on every bidder card below the price.
       Stacks the days line above the hours line so each row stays compact
       in the narrow meal-info column, then expands inline on wider cards. */
    .deal-avail{
      display:flex;align-items:flex-start;flex-direction:column;gap:2px;
      margin-top:6px;font-size:.72rem;font-weight:600;color:#475569;
      line-height:1.25;
    }
    .deal-avail .row{display:inline-flex;align-items:center;gap:5px}
    .deal-avail .sep{display:none}
    .deal-avail i{color:#16a34a;font-size:.72rem;width:.9rem;text-align:center}
    @media (min-width:760px){
      .deal-avail{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
    }

    /* Bigger pill-style availability inside the offer detail sheet — sits
       between the price block and the action buttons. */
    .sheet-avail{
      display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
      margin:8px 0 12px;padding:6px 12px;border-radius:999px;
      background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.2);
      color:#15803d;font-size:.82rem;font-weight:700;
    }
    .sheet-avail i{color:#16a34a}
    .sheet-avail .sep{opacity:.5;color:#15803d}

    /* Ranking-aware top border accent — #1 gets a thicker gold strip on
       top so the leader is identifiable at a glance even when scrolled. */
    .bidder.rank-1::before{
      content:"";position:absolute;top:0;left:14px;right:14px;height:3px;
      background:linear-gradient(90deg,#fbbf24,#f59e0b,#fbbf24);
      border-radius:0 0 3px 3px;
      box-shadow:0 2px 8px rgba(245,158,11,.6);
      z-index:3;
    }

    /* When the auction ends, dampen the live-only animations so the
       final state reads as "settled" not "still raging." */
    .ended-auction .bidder .intensity .bar.lit.fire,
    .ended-auction .bidder .fire-badge i,
    .ended-auction .fz-ticker-belt{
      animation-play-state:paused !important;
    }

    /* Reduce-motion respect: kill the high-energy loops, keep the static
       positioning so the page still tells the story. */
    @media (prefers-reduced-motion: reduce){
      .fz-ticker-belt,
      .bidder .fire-badge,
      .bidder .fire-badge i,
      .bidder .intensity .bar.lit.fire,
      .fz-pod-1::before{
        animation:none !important;
      }
    }

    /* =========================================================
       PHONE-ONLY COMPACTIFICATION (v9)
       Shrink the "Your Fizook Auction" status card so the Live
       Leaderboard and 8 bidder cards are the visual focus on phone
       screens. Widths, gutters, and card boundaries stay identical
       to the previous version — only vertical padding, gaps, font
       sizes, and inner element sizes shrink. Laptop/tablet layout
       is not affected.
       ========================================================= */
    @media (max-width:559.98px){

      /* --- "Your Fizook Auction" status card (ultra-compact) ---
         On phone, drop the red pulse dot, the "Your Fizook Auction"
         label, and the progress bar entirely. The dynamic status
         text (Live/Ended!) and the Round X of Y label remain — they
         carry all the information the user needs.
         While the auction is running the whole .status-title is
         hidden (the ticker at the top of the page now owns the
         "live" indicator), leaving only the round counter in the
         status row so the "Your Auction Statistics" dropdown sits
         immediately under the ticker with almost no gap. */
      body.fz-auction-active:not(.ended-auction) .status-title{
        display:none !important;
      }
      body.fz-auction-active:not(.ended-auction) .status-row{
        justify-content:flex-end !important;
      }
      .hero{margin-top:6px !important}
      .status-card{
        padding:6px 12px 6px 16px !important;
        gap:4px !important;
        border-radius:12px !important;
      }
      .status-card::before{width:3px !important}
      /* Hide the pulse dot + the plain "Your Fizook Auction" span.
         .status-title has three children:
           1. .pulse (red dot)
           2. plain <span> ("Your Fizook Auction")
           3. .status-text (dynamic Live/Ended message)
         The :not(.pulse):not(.status-text) selector matches only #2. */
      .status-title > .pulse{display:none !important}
      .status-title > span:not(.pulse):not(.status-text){display:none !important}
      .status-row{gap:6px !important;flex-wrap:wrap}
      .status-title{
        font-size:.85rem !important;
        gap:0 !important;
        margin:0 !important;
        flex:1 1 auto;min-width:0;
      }
      .status-text{font-size:.82rem !important;line-height:1.2}
      .status-label{font-size:.7rem !important;flex:0 0 auto}
      .progress{display:none !important}

      /* Stats summary bar — smaller & tighter */
      .stats-collapsible > summary{
        padding:5px 10px !important;
        font-size:.72rem !important;
        gap:8px !important;
      }
      .stats-summary-icon{
        width:20px !important;height:20px !important;
        font-size:.68rem !important;
      }
      .stats-summary-label{
        font-size:.62rem !important;
        letter-spacing:.5px !important;
      }
      .stats-summary-chevron{font-size:.62rem !important}
      .stats-collapsible[open] > summary{margin-bottom:6px !important}

      /* --- Live Leaderboard + bidder grid: hug the status card so
             they become the focal point on phone --- */
      .fz-podium{margin-top:6px !important}
      .bidders{margin-top:8px !important}
    }

    /* =========================================================
       Accepted-offer receipt modal
       Sits on top of the .series-modal base styles; adds a receipt
       layout (hero image, price rows, savings pill, redemption code).
       Works on both phone and desktop from a single ruleset.
       ========================================================= */
    .accepted-modal-panel{max-width:460px}
    .accepted-badge{
      display:inline-flex;align-items:center;gap:6px;
      background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;
      font-size:.7rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
      padding:4px 10px;border-radius:999px;margin-bottom:6px;
    }
    .accepted-badge i{font-size:.8rem}
    .accepted-hero{
      display:flex;gap:12px;align-items:center;
      background:linear-gradient(135deg,rgba(36,129,188,.05),rgba(124,58,237,.05));
      border:1px solid var(--border);border-radius:12px;
      padding:10px;margin:10px 0 14px;
    }
    .accepted-meal-img{
      width:72px;height:72px;border-radius:10px;object-fit:cover;
      background:#f1f5f9;flex:0 0 auto;
      box-shadow:0 4px 10px rgba(15,23,42,.08);
    }
    .accepted-hero-info{flex:1 1 auto;min-width:0}
    .accepted-vendor{
      display:flex;align-items:center;gap:6px;
      font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:2px;
    }
    .accepted-vendor-logo{
      width:20px;height:20px;border-radius:50%;background:#fff;
      object-fit:contain;padding:1px;box-shadow:0 0 0 1px var(--border);
    }
    .accepted-vendor-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .accepted-meal-name{
      font-size:1rem;font-weight:800;color:var(--text);line-height:1.2;
      overflow:hidden;text-overflow:ellipsis;
      display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
    }
    .accepted-price-block{
      background:var(--surface-2);border:1px solid var(--border);
      border-radius:12px;padding:12px 14px;
    }
    .accepted-price-row{
      display:flex;align-items:baseline;justify-content:space-between;gap:10px;
      font-size:.95rem;font-weight:700;color:var(--text);
    }
    .accepted-price-row.muted{color:var(--muted);font-weight:500;font-size:.82rem;margin-top:2px}
    .accepted-price-row.muted .accepted-price-retail{text-decoration:line-through}
    .accepted-price-now{
      font-size:1.6rem;font-weight:800;color:var(--success);
      font-feature-settings:"tnum" 1, "lnum" 1;
      font-variant-numeric:tabular-nums lining-nums;
    }
    .accepted-savings-pill{
      display:inline-block;margin-top:8px;
      background:linear-gradient(135deg,rgba(22,163,74,.14),rgba(22,163,74,.06));
      color:#15803d;font-size:.78rem;font-weight:800;
      padding:4px 10px;border-radius:999px;
    }
    .accepted-code-block{
      margin-top:12px;text-align:center;
      background:#fff;border:1px dashed rgba(36,129,188,.5);
      border-radius:12px;padding:12px;
    }
    .accepted-code-label{
      font-size:.68rem;font-weight:700;text-transform:uppercase;
      letter-spacing:.8px;color:var(--muted);margin-bottom:4px;
    }
    .accepted-code{
      font-size:1.4rem;font-weight:800;letter-spacing:2px;color:var(--primary);
      font-feature-settings:"tnum" 1, "lnum" 1;
      font-variant-numeric:tabular-nums lining-nums;
    }
    .accepted-code-note{
      font-size:.72rem;color:var(--muted);margin-top:4px;line-height:1.35;
    }
    @media (max-width:559.98px){
      .accepted-meal-img{width:60px;height:60px}
      .accepted-price-now{font-size:1.35rem}
      .accepted-code{font-size:1.2rem;letter-spacing:1.5px}
      .accepted-modal-panel{padding:18px 16px 14px}
    }

    /* Compact toolbar (moved below the bidder grid) — small icon-only
       chips centered under the cards. Overrides the default .toolbar
       flex/grid sizing at every breakpoint. */
    .toolbar.toolbar-compact{
      max-width:1280px;
      margin:10px auto 4px;
      padding:0 16px;
      display:flex;
      gap:6px;
      justify-content:center;
      align-items:center;
      flex-wrap:nowrap;
    }
    .toolbar.toolbar-compact .chip{
      display:inline-flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      width:auto;
      min-width:44px;
      min-height:38px;
      padding:4px 8px;
      font-size:.72rem;
      gap:2px;
      border-radius:6px;
    }
    .toolbar.toolbar-compact .chip i{font-size:.82rem;opacity:1;line-height:1}
    /* Small centered label under each icon. Visible on every breakpoint. */
    .toolbar.toolbar-compact .chip .chip-lbl{
      position:static;width:auto;height:auto;padding:0;margin:0;
      overflow:visible;clip:auto;
      font-size:.55rem;font-weight:700;
      letter-spacing:.2px;line-height:1;
      white-space:nowrap;
      opacity:.9;
    }
    @media (max-width:559.98px){
      .toolbar.toolbar-compact{
        display:flex;
        grid-template-columns:none;
        gap:6px;
        padding:0 16px;
      }
      .toolbar.toolbar-compact .chip{
        min-height:38px;
        min-width:44px;
        font-size:.72rem;
        padding:4px 8px;
      }
      .toolbar.toolbar-compact .chip i{font-size:.82rem}
      .toolbar.toolbar-compact .chip .chip-lbl{font-size:.5rem}
    }

    /* =========================================================
       "Bidding for your money in progress!" — live-auction blast
       Punchy replacement for the plain "Live · Bidders are
       dropping prices" status text. Renders as a distinct pill
       with a flashing dollar-sign badge on the left and rainbow
       shimmer text on the right, so it reads as its own widget
       inside the status card. Injected into #status-text by
       startAuction() in jscript/fzk-new.js; overwritten on
       pause/end/reset which strips the DOM and all animations.
       ========================================================= */
    .fz-bid-blast{
      display:inline-flex;align-items:center;gap:8px;
      font-weight:900;line-height:1.1;
      vertical-align:middle;
      padding:4px 12px 4px 6px;
      border-radius:999px;
      background:
        linear-gradient(90deg, rgba(251,191,36,.14), rgba(34,211,238,.14) 55%, rgba(124,58,237,.16));
      box-shadow:
        inset 0 0 0 1px rgba(251,191,36,.35),
        0 0 12px rgba(251,191,36,.25);
      animation:fzBidWobble 1.6s ease-in-out infinite;
      transform-origin:center;
    }
    /* Whole-pill breathing wobble so the widget catches the eye
       even if a user glances at the card mid-blink. Tiny scale +
       tilt is enough — bigger movements would fight the badge's
       own pulse animation. */
    @keyframes fzBidWobble{
      0%,100%{transform:scale(1) rotate(0deg)}
      35%    {transform:scale(1.02) rotate(-.6deg)}
      70%    {transform:scale(1.015) rotate(.5deg)}
    }
    /* The flashing badge — pulses in size, glow, and color every
       ~1.1s. Two-tone gradient background swaps warm→cool so the
       badge visibly "flips" energy at each beat. */
    .fz-bid-icon{
      display:inline-grid;place-items:center;
      width:22px;height:22px;border-radius:50%;
      background:linear-gradient(135deg,#fbbf24,#dc2626);
      color:#fff;font-size:.72rem;
      box-shadow:0 0 0 0 rgba(251,191,36,.75), 0 0 10px rgba(251,191,36,.35);
      animation:fzBidIcon 1.1s cubic-bezier(.4,0,.2,1) infinite;
      flex:0 0 auto;
      position:relative;
    }
    @keyframes fzBidIcon{
      0%,100%{
        transform:scale(1) rotate(0deg);
        background:linear-gradient(135deg,#fbbf24,#dc2626);
        box-shadow:0 0 0 0 rgba(251,191,36,.75), 0 0 10px rgba(251,191,36,.5);
      }
      50%{
        transform:scale(1.22) rotate(-10deg);
        background:linear-gradient(135deg,#22d3ee,#7c3aed);
        box-shadow:0 0 0 8px rgba(124,58,237,0), 0 0 20px rgba(34,211,238,.7);
      }
    }
    /* Rainbow shimmer text — background-clip:text lets the moving
       gradient show through the letters. 200% background-size +
       animated background-position makes the color band slide. */
    .fz-bid-text{
      background:linear-gradient(90deg,#dc2626 0%,#fbbf24 22%,#22c55e 45%,#22d3ee 68%,#7c3aed 90%,#dc2626 100%);
      background-size:200% 100%;
      -webkit-background-clip:text;
              background-clip:text;
      -webkit-text-fill-color:transparent;
              color:transparent;
      animation:fzBidShimmer 2.6s linear infinite;
      font-weight:900;letter-spacing:.2px;
    }
    @keyframes fzBidShimmer{
      0%  {background-position:0% 50%}
      100%{background-position:200% 50%}
    }
    /* Respect users who opt out of motion — freeze every animation
       (pill wobble, icon pulse, text shimmer) and fall back to a
       solid red text with a static warm badge inside the pill. */
    @media (prefers-reduced-motion:reduce){
      .fz-bid-blast,.fz-bid-icon,.fz-bid-text{animation:none !important}
      .fz-bid-blast{transform:none}
      .fz-bid-icon{
        transform:none;
        background:linear-gradient(135deg,#fbbf24,#dc2626);
        box-shadow:0 0 8px rgba(251,191,36,.5);
      }
      .fz-bid-text{
        background:none;
        -webkit-text-fill-color:currentColor;
        color:var(--danger);
      }
    }