/* =========================================================
       Tokens (mirrors fizook_style_guide.html / v3-mobile)
       ========================================================= */
    *,*::before,*::after{box-sizing:border-box}
    :root{
      --bg:#0b1220;
      --surface:#ffffff;
      --surface-2:#f8fafc;
      --surface-3:#eef2f7;
      --border:#e5e7eb;
      --text:#0f172a;
      --muted:#64748b;
      --primary:#2481bc;
      --primary-dark:#1a6494;
      --success:#16a34a;
      --success-light:#dcfce7;
      --danger:#dc2626;
      --warn:#f59e0b;
      --accent:#7c3aed;
      --shadow-sm:0 1px 3px rgba(15,23,42,.10);
      --shadow:0 6px 20px rgba(15,23,42,.14);
      --shadow-lg:0 20px 48px rgba(15,23,42,.24);
      --radius:14px;
      --radius-sm:10px;
      --radius-lg:20px;
      --radius-button:6px;
    }
    html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--surface-2)}
    /* Diner-side layered background — purple + blue + green blobs, same
       pattern used across the diner surface (index/redeem/history).
       padding-bottom:80px reserves space so the sticky action bar at the
       bottom of the form never sits flush against the viewport edge. */
    body{
      min-height:100vh;
      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 420px at 50% 60%, rgba(22,163,74,.05), transparent 70%),
        #eef2f7;
      padding-bottom:80px;
    }
    img{max-width:100%;display:block}
    button{font-family:inherit}
    a{color:inherit}

    /* =========================================================
       Top bar — sticky nav shared with the rest of the diner surface
       =========================================================
       Same brand + hamburger + primary nav + admin dropdown pattern
       used on index.html. On this page "Run an Auction" is .active. */
    .topbar{
      position:sticky;top:0;z-index:50;
      background:rgba(11,18,32,.92);backdrop-filter:saturate(1.4) blur(10px);
      color:#fff;border-bottom:1px solid rgba(255,255,255,.08);
    }
    .topbar-inner{
      max-width:1280px;margin:0 auto;
      display:flex;align-items:center;gap:16px;padding:12px 16px;
    }

    /* --- Admin dropdown (Documentation / Vendor tools / Portals) ---
       Shared discovery menu. Toggled by JS below with outside-click
       and Escape handlers. */
    .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}
    }
    .brand{
      font-weight:800;letter-spacing:.5px;font-size:1.25rem;
      display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;
    }
    .brand .dot{
      width:10px;height:10px;border-radius:50%;
      background:linear-gradient(135deg,#22d3ee,#7c3aed);
      box-shadow:0 0 16px rgba(34,211,238,.7);
    }
    .nav-toggle{
      margin-left:auto;background:rgba(255,255,255,.08);color:#fff;
      border:0;border-radius:6px;padding:11px 14px;cursor:pointer;
      min-width:44px;min-height:44px;
    }
    .topnav{display:none}
    .nav-link{
      background:transparent;border:0;font-family:inherit;color:#cbd5e1;
      text-decoration:none;font-size:.92rem;padding:6px 10px;border-radius:8px;
      display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    }
    .nav-link:hover{background:rgba(255,255,255,.14);color:#fff}
    .nav-link.active{background:rgba(36,129,188,.25);color:#fff}
    @media (min-width:900px){
      .nav-toggle{display:none}
      .topnav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
    }
    .topnav.open{
      display:flex;flex-direction:column;align-items:stretch;gap:2px;
      padding:8px 12px;background:rgba(11,18,32,.98);
      position:absolute;top:100%;left:0;right:0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    @media (min-width:900px){.topnav.open{position:static;flex-direction:row;background:transparent;padding:0;border:0}}

    /* =========================================================
       Hero — "Auction setup · ready to launch" banner
       =========================================================
       Cyan/purple blob decorations + two diagonal light beams + five
       falling coin emojis. Lower vertical padding than the landing
       heroes because this page is task-focused (setup form below).
       Includes a breadcrumb trail (Home > Auctions > Setup). */
    .hero{
      position:relative;overflow:hidden;
      background:linear-gradient(135deg,#0b1220,#1a6494 60%,#2481bc);
      color:#fff;
      padding:38px 20px 36px;
    }
    .hero::before,.hero::after{
      content:"";position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none;
    }
    .hero::before{width:240px;height:240px;background:#22d3ee;top:-60px;left:-40px;animation:floatA 9s ease-in-out infinite}
    .hero::after{width:260px;height:260px;background:#7c3aed;bottom:-80px;right:-40px;animation:floatB 11s ease-in-out infinite}
    @keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}}
    @keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,-18px)}}

    /* --- Drifting diagonal light beams ---
       Two tilted, blurred gradient rectangles that slowly translate up
       and down. Unique to this page — gives the "setup mode / lights
       are on" vibe. b1 is cyan tilted +22°, b2 is pink tilted -18°.
       Both clipped by .hero-lights{overflow:hidden}. */
    .hero-lights{position:absolute;inset:0;pointer-events:none;overflow:hidden}
    .hero-lights .beam{
      position:absolute;
      width:40vw;height:180%;top:-40%;
      transform:rotate(22deg);
      opacity:.25;filter:blur(8px);
      background:linear-gradient(180deg, rgba(34,211,238,.55), rgba(34,211,238,0));
      animation:beamDrift 14s ease-in-out infinite;
    }
    .hero-lights .beam.b1{left:8%}
    .hero-lights .beam.b2{
      right:2%;left:auto;
      transform:rotate(-18deg);
      background:linear-gradient(180deg, rgba(236,72,153,.45), rgba(236,72,153,0));
      animation-duration:18s;
    }
    @keyframes beamDrift{
      0%,100%{transform:translateY(-3%) rotate(22deg)}
      50%{transform:translateY(6%) rotate(26deg)}
    }

    /* --- Falling coin/dollar emojis ---
       Five columns of decorative confetti (💰💵🪙💸💰). Same coinFall
       loop used on other pages, staggered animation delays. */
    .coin{
      position:absolute;font-size:1.4rem;opacity:.9;pointer-events:none;
      animation:coinFall linear infinite;
    }
    .coin.c1{left:14%;top:-40px;animation-duration:9s;animation-delay:0s}
    .coin.c2{left:32%;top:-40px;animation-duration:11s;animation-delay:1.6s}
    .coin.c3{left:58%;top:-40px;animation-duration:8s;animation-delay:.8s}
    .coin.c4{left:78%;top:-40px;animation-duration:12s;animation-delay:3s}
    .coin.c5{left:90%;top:-40px;animation-duration:10s;animation-delay:2.2s}
    @keyframes coinFall{
      0%  {transform:translateY(-40px) rotate(0);opacity:0}
      10% {opacity:.9}
      90% {opacity:.9}
      100%{transform:translateY(110vh) rotate(720deg);opacity:0}
    }

    /* Gradient text on the accent phrase ("your meal") — cyan → purple
       → pink clipped to text, shimmers slowly via gradShift. */
    .hero h1 .gradient-text{
      background:linear-gradient(135deg,#22d3ee 0%,#a78bfa 50%,#fbcfe8 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      background-size:200% 200%;animation:gradShift 8s ease infinite;
    }
    @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
    /* Hero content column — flex-direction:column so tag → h1 → lead → crumbs stack. */
    .hero-inner{position:relative;z-index:1;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
    /* "Auction setup · ready to launch" pill above the headline. */
    .hero-tag{
      display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
      background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px;
      font-size:.74rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
    }
    /* Green pulse dot — success color, shared token with hero pills across the app. */
    .hero-tag .pulse-dot{
      width:8px;height:8px;border-radius:50%;background:var(--success);
      box-shadow:0 0 0 0 rgba(22,163,74,.7);animation:pulse 1.6s infinite;
    }
    @keyframes pulse{
      0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)}
      70%{box-shadow:0 0 0 12px rgba(22,163,74,0)}
      100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}
    }
    .hero h1{
      margin:0;font-size:clamp(1.6rem,3.2vw,2.4rem);
      font-weight:800;letter-spacing:-.5px;line-height:1.15;
    }
    .hero p.lead{
      margin:0;font-size:1rem;line-height:1.55;opacity:.88;
    }
    /* Breadcrumb trail (Home > Auctions > Setup). Chevron icons are
       Font Awesome fa-angle-right at 0.65rem for a subtle "step" feel. */
    .hero .crumbs{font-size:.78rem;opacity:.75;display:flex;gap:8px;align-items:center}
    .hero .crumbs i{font-size:.65rem}

    /* =========================================================
       Layout — main content + 300px right-column sidebar
       =========================================================
       Single-column stack below 960px, 2-column split above. The
       sidebar sticks at top:80px on ≥960px so tips + sponsor stay
       visible as the user scrolls through the 6 form sections.
       .auction-form is a nested grid so every child card gets the
       same 15px vertical gap. */
    .wrap{
      max-width:1240px;margin:24px auto 0;padding:0 16px 48px;position:relative;z-index:2;
      display:grid;gap:15px;grid-template-columns:1fr;
    }
    @media (min-width:960px){
      .wrap{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
    }
    .col-main{display:grid;gap:15px;min-width:0}
    .col-side{display:grid;gap:15px;min-width:0}
    @media (min-width:960px){.col-side{position:sticky;top:80px;align-self:start}}
    .auction-form{display:grid;gap:15px}

    /* =========================================================
       Section card — reusable shell for every form section + tips
       =========================================================
       White surface with a colored left accent stripe (::before) and
       a soft corner glow (::after), both keyed off the inner
       .card-icon color via CSS :has() — so the accent automatically
       matches the section's icon (blue/green/purple/amber/cyan/pink)
       without manual wiring. Cards fade + slide up on load with
       nth-child stagger so they cascade in. */
    .card{
      position:relative;
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius);box-shadow:var(--shadow);
      padding:18px 18px 20px 22px;
      animation:cardIn .6s ease both;
      opacity:0;
      overflow:hidden;
    }
    /* Default left accent stripe (overridden per card-icon color below). */
    .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);border-bottom-left-radius:var(--radius);
    }
    /* Soft corner glow tinted with the card color. */
    .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;
    }
    .card:has(.card-icon.green)::before {background:linear-gradient(180deg,#16a34a,#15803d)}
    .card:has(.card-icon.green)::after  {background:radial-gradient(ellipse at top left,rgba(22,163,74,.10),transparent 70%)}
    .card:has(.card-icon.purple)::before{background:linear-gradient(180deg,#7c3aed,#5b21b6)}
    .card:has(.card-icon.purple)::after {background:radial-gradient(ellipse at top left,rgba(124,58,237,.10),transparent 70%)}
    .card:has(.card-icon.amber)::before {background:linear-gradient(180deg,#f59e0b,#b45309)}
    .card:has(.card-icon.amber)::after  {background:radial-gradient(ellipse at top left,rgba(245,158,11,.10),transparent 70%)}
    .card:has(.card-icon.cyan)::before  {background:linear-gradient(180deg,#22d3ee,#0891b2)}
    .card:has(.card-icon.cyan)::after   {background:radial-gradient(ellipse at top left,rgba(34,211,238,.10),transparent 70%)}
    .card:has(.card-icon.pink)::before  {background:linear-gradient(180deg,#ec4899,#be185d)}
    .card:has(.card-icon.pink)::after   {background:radial-gradient(ellipse at top left,rgba(236,72,153,.10),transparent 70%)}
    .card > *{position:relative;z-index:1}
    .card:nth-child(1){animation-delay:.05s}
    .card:nth-child(2){animation-delay:.12s}
    .card:nth-child(3){animation-delay:.19s}
    .card:nth-child(4){animation-delay:.26s}
    .card:nth-child(5){animation-delay:.33s}
    .card:nth-child(6){animation-delay:.40s}
    .card:nth-child(7){animation-delay:.47s}
    @keyframes cardIn{
      0%{opacity:0;transform:translateY(14px)}
      100%{opacity:1;transform:translateY(0)}
    }
    .card-head{
      display:flex;align-items:center;gap:12px;margin-bottom:6px;
    }
    .card-icon{
      width:38px;height:38px;border-radius:10px;flex:0 0 auto;
      display:grid;place-items:center;color:#fff;font-size:1rem;
      background:linear-gradient(135deg,#2481bc,#1a6494);
      box-shadow:0 4px 12px rgba(36,129,188,.32);
      transition:transform .25s ease;
    }
    .card:hover .card-icon{transform:rotate(-6deg) scale(1.05)}
    /* Icon color variants — the accent color of each form section.
       Combined with .card:has() above, these drive both the icon
       background AND the card's left stripe + corner glow. */
    .card-icon.purple{background:linear-gradient(135deg,#7c3aed,#5b21b6);box-shadow:0 4px 12px rgba(124,58,237,.32)}
    .card-icon.green{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 4px 12px rgba(22,163,74,.32)}
    .card-icon.amber{background:linear-gradient(135deg,#f59e0b,#b45309);box-shadow:0 4px 12px rgba(245,158,11,.32)}
    .card-icon.cyan{background:linear-gradient(135deg,#22d3ee,#0891b2);box-shadow:0 4px 12px rgba(34,211,238,.32)}
    .card-icon.pink{background:linear-gradient(135deg,#ec4899,#be185d);box-shadow:0 4px 12px rgba(236,72,153,.32)}
    .card-title{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.2px}
    .card-sub{margin:0;font-size:.82rem;color:var(--muted)}
    .card-titles{min-width:0}

    /* =========================================================
       Form fields — auto-fit responsive grid with span helpers
       =========================================================
       .grid: default = auto-fit minmax(220px,1fr) so fields flow
       into 1/2/3 columns based on available width.
       .grid.two-up: forced 2-column, collapses to 1 on phones.
       .grid.cols-2: children span 2 grid tracks (full-width fields).
       .field.span-2 / .field.full: same idea for individual fields. */
    .grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:14px}
    .grid.two-up{grid-template-columns:1fr 1fr}
    @media (max-width:559.98px){.grid.two-up{grid-template-columns:1fr}}
    .grid.cols-2 > *{grid-column:span 2}
    @media (max-width:559.98px){.grid.cols-2 > *{grid-column:span 1}}
    .field{display:flex;flex-direction:column;gap:6px;min-width:0}
    .field.span-2{grid-column:span 2}
    .field.full{grid-column:1 / -1}
    @media (max-width:559.98px){.field.span-2{grid-column:span 1}}
    .field label{
      font-size:.72rem;color:var(--muted);text-transform:uppercase;
      letter-spacing:.6px;font-weight:700;
    }
    .field label .req{color:var(--danger);margin-left:3px}
    /* Shared input styles for <input>/<select>/<textarea>. All get the
       same rounded rectangle, focus ring, and appearance:none to hide
       browser-specific chrome (native select chevron etc.). */
    .input,
    .select,
    select.input,
    textarea.input{
      width:100%;font-family:inherit;color:var(--text);
      background:var(--surface);border:1px solid var(--border);
      border-radius:8px;padding:10px 12px;font-size:.94rem;
      transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
      appearance:none;-webkit-appearance:none;-moz-appearance:none;
    }
    textarea.input{min-height:84px;resize:vertical;line-height:1.4}
    .input:focus,.select:focus,select.input:focus,textarea.input:focus{
      outline:0;border-color:var(--primary);
      box-shadow:0 0 0 3px rgba(36,129,188,.18);
      background:#fff;
    }
    /* --- Custom select chevron (inline SVG) ---
       Since appearance:none hides the native chevron, we draw our own
       via a background-image URL on the ::after pseudo. .open modifier
       is toggled by JS on focus/mousedown/blur to flip the chevron
       180° while the select is being interacted with. */
    .select-wrap{position:relative}
    .select-wrap select{padding-right:36px}
    .select-wrap::after{
      content:"";position:absolute;right:12px;top:50%;
      width:12px;height:12px;transform:translateY(-50%);
      background-repeat:no-repeat;background-position:center;
      transition:transform .2s ease;pointer-events:none;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    }
    .select-wrap.open::after{transform:translateY(-50%) rotate(180deg)}
    /* Input wrapper for text fields that have a leading Font Awesome icon
       (map-pin, hashtag, search, etc.). pointer-events:none so clicks
       pass through to the input. */
    .input-wrap{position:relative}
    .input-wrap > i{
      position:absolute;left:12px;top:50%;transform:translateY(-50%);
      color:var(--muted);font-size:.95rem;pointer-events:none;
    }
    .input-wrap > .input{padding-left:34px}

    /* =========================================================
       Pill toggle system — replaces radios/checkboxes with
       tappable colored pills
       =========================================================
       Structure: <label.toggle> with a hidden native <input> inside
       (radio or checkbox). Two visual layers:
         .toggle-bg   = the pill's fill (behind the label)
         .toggle-label = the visible text + icon (above the fill)
       Sibling combinator (~) picks the fill/label to color when the
       hidden input is :checked. Base variant fills blue, colored
       variants (.green/.purple/.amber) override the fill background. */
    .toggle-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
    .toggle{
      position:relative;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
      padding:8px 14px;border-radius:999px;font-size:.84rem;font-weight:600;
      border:1px solid var(--border);background:var(--surface);color:var(--text);
      transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
      user-select:none;
    }
    /* Hidden radio/checkbox — spans the whole pill so the entire area is clickable. */
    .toggle input{position:absolute;inset:0;opacity:0;cursor:pointer}
    .toggle:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:#cbd5e1}
    .toggle.has-check input:checked ~ .toggle-label{color:#fff}
    /* Two selectors here to handle sibling order variations (~ = general
       sibling, + = adjacent sibling). Ensures label color flips whether
       toggle-bg is or isn't between the input and label. */
    .toggle input:checked ~ .toggle-label,
    .toggle input:checked + .toggle-label{color:#fff}
    /* Default (blue) checked fill. */
    .toggle input:checked ~ .toggle-bg{
      background:linear-gradient(135deg,#2481bc,#1a6494);border-color:transparent;
      box-shadow:0 4px 12px rgba(36,129,188,.32);
    }
    /* Fill layer — sits behind the label via z-index (toggle-label is position:relative). */
    .toggle .toggle-bg{
      position:absolute;inset:0;border-radius:999px;border:1px solid transparent;
      transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
      pointer-events:none;
    }
    .toggle .toggle-label{position:relative;display:inline-flex;align-items:center;gap:6px}
    /* Color variants override the checked fill background. */
    .toggle.green input:checked ~ .toggle-bg{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 4px 12px rgba(22,163,74,.32)}
    .toggle.purple input:checked ~ .toggle-bg{background:linear-gradient(135deg,#7c3aed,#5b21b6);box-shadow:0 4px 12px rgba(124,58,237,.32)}
    .toggle.amber input:checked ~ .toggle-bg{background:linear-gradient(135deg,#f59e0b,#b45309);box-shadow:0 4px 12px rgba(245,158,11,.32)}

    /* --- Slider field (range input + live value display) ---
       Used 4 times on this page (distance / spice / speed / auto-accept).
       accent-color styles the native thumb + track blue on modern browsers.
       .slider-val is a fixed-width badge showing the current value or a
       label word ("Mild", "Blazing", "Off"). Updated by JS on 'input'. */
    .slider-row{display:flex;align-items:center;gap:12px}
    .slider-row input[type=range]{flex:1;accent-color:var(--primary)}
    .slider-val{
      min-width:48px;text-align:center;font-weight:800;font-size:.95rem;
      color:var(--primary);background:var(--surface-2);
      border:1px solid var(--border);border-radius:8px;padding:6px 8px;
    }

    /* Sub-field helper text (e.g. "0 — none · 5 — bring tissues."). */
    .field .help{font-size:.74rem;color:var(--muted);line-height:1.3}

    /* =========================================================
       Welcome card — prominent personal greeting above the form
       =========================================================
       3-column grid: avatar | greeting text | stat pills. Dark navy
       gradient background with a slow horizontal shift so it feels
       alive. Decorative floating blobs + drifting sparkles behind
       the content. Collapses to a 2-column layout on ≤760px with
       the stats wrapping below on their own row. */
    .welcome{
      position:relative;overflow:hidden;
      border-radius:var(--radius-lg);
      background:linear-gradient(120deg,#0b1220 0%,#1a6494 45%,#7c3aed 100%);
      background-size:200% 200%;
      animation:welcomeShift 14s ease infinite, cardIn .6s ease both;
      color:#fff;
      padding:22px 24px;
      box-shadow:var(--shadow-lg);
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:22px;
    }
    @keyframes welcomeShift{
      0%,100%{background-position:0% 50%}
      50%   {background-position:100% 50%}
    }
    /* Cyan (top-center-ish) + pink (bottom-right) glow blobs. */
    .welcome::before,.welcome::after{
      content:"";position:absolute;border-radius:50%;filter:blur(34px);opacity:.55;pointer-events:none;
    }
    .welcome::before{width:180px;height:180px;background:#22d3ee;top:-60px;left:30%;animation:floatA 8s ease-in-out infinite}
    .welcome::after {width:200px;height:200px;background:#ec4899;bottom:-80px;right:-30px;animation:floatB 10s ease-in-out infinite}
    /* Four decorative ✨/⚡/💸 emoji sprinkles at fixed positions
       that drift up-and-down slowly on staggered delays. */
    .welcome .sparkle{
      position:absolute;font-size:.85rem;opacity:.85;pointer-events:none;
      animation:sparkleDrift 7s ease-in-out infinite;
    }
    .welcome .sparkle.s1{top:14%;left:36%;animation-delay:0s}
    .welcome .sparkle.s2{top:62%;left:42%;animation-delay:1.4s}
    .welcome .sparkle.s3{top:30%;left:62%;animation-delay:2.8s}
    .welcome .sparkle.s4{top:74%;left:64%;animation-delay:4.2s}
    @keyframes sparkleDrift{
      0%,100%{transform:translateY(0) rotate(0);opacity:.4}
      50%   {transform:translateY(-10px) rotate(15deg);opacity:.95}
    }

    /* --- Avatar (initials circle + waving hand + pulsing ring) ---
       The initials sit inside a gradient circle. ::after is a ring
       that expands outward on avatarPulse (2.4s loop) — same effect
       as the pulse-dot pattern used throughout the app.
       The 👋 emoji sits at the top-right and gently waves (wave keyframe). */
    .welcome-avatar{
      position:relative;z-index:1;
      width:64px;height:64px;border-radius:50%;
      background:linear-gradient(135deg,#22d3ee,#7c3aed);
      display:flex;align-items:center;justify-content:center;
      font-weight:800;font-size:1.45rem;color:#fff;
      box-shadow:0 0 0 3px rgba(255,255,255,.18),0 8px 22px rgba(124,58,237,.45);
    }
    .welcome-avatar .initials{
      display:block;line-height:1;text-align:center;
      letter-spacing:.5px;padding-left:.5px;
    }
    .welcome-avatar::after{
      content:"";position:absolute;inset:-6px;border-radius:50%;
      border:2px solid rgba(255,255,255,.35);
      animation:avatarPulse 2.4s ease-out infinite;
    }
    @keyframes avatarPulse{
      0%  {transform:scale(.85);opacity:.9}
      100%{transform:scale(1.4); opacity:0}
    }
    /* Waving 👋 emoji. transform-origin at 70% 70% places the pivot
       near the wrist so the wave looks natural. */
    .welcome-avatar .wave{
      position:absolute;right:-6px;top:-6px;font-size:1.1rem;
      filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
      animation:wave 2.6s ease-in-out infinite;transform-origin:70% 70%;
    }
    /* Wave: two quick +20°/-10° swings, then rest. Feels more organic
       than a symmetric sine-wave rotation. */
    @keyframes wave{
      0%,60%,100%{transform:rotate(0)}
      10%,30%   {transform:rotate(20deg)}
      20%       {transform:rotate(-10deg)}
    }

    /* --- Greeting text + rotating word ---
       .rotator holds the leading word ("Welcome back,", "Hey there,"…)
       which the JS cycles through every 6s. greetSwap keyframe fades
       it out mid-cycle so the JS text swap is invisible; the word
       gets a mint-tint gradient clipped to text. */
    .welcome-text{position:relative;z-index:1;min-width:0}
    .welcome-greet{
      font-size:clamp(1.25rem,2.4vw,1.7rem);
      font-weight:800;letter-spacing:-.3px;line-height:1.15;
      display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    }
    .welcome-greet .rotator{
      display:inline-block;min-width:1ch;
      background:linear-gradient(135deg,#22d3ee,#a5f3fc);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      animation:greetSwap 6s ease-in-out infinite;
    }
    @keyframes greetSwap{
      0%,28%   {opacity:1;transform:translateY(0)}
      33%,38%  {opacity:0;transform:translateY(-6px)}
      43%,100% {opacity:1;transform:translateY(0)}
    }
    .welcome-name{font-weight:800}
    .welcome-sub{
      margin-top:4px;font-size:.92rem;line-height:1.45;opacity:.92;
    }
    .welcome-sub strong{color:#a7f3d0;font-weight:800}

    /* --- Right column: 3 glassmorphic stat pills ---
       "Last saved" / "All-time" / "Auctions". Frosted glass background
       with subtle hover lift. Values use colored variants (.green/.cyan/.pink)
       for quick visual differentiation. */
    .welcome-stats{
      position:relative;z-index:1;
      display:flex;gap:10px;flex-wrap:wrap;
    }
    .welcome-stat{
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter:saturate(1.4) blur(8px);
      border-radius:12px;padding:10px 14px;min-width:110px;
      transition:transform .2s ease,background .2s ease;
    }
    .welcome-stat:hover{transform:translateY(-2px);background:rgba(255,255,255,.18)}
    .welcome-stat .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.7px;opacity:.75;font-weight:700}
    .welcome-stat .v{font-size:1.25rem;font-weight:800;letter-spacing:-.3px}
    .welcome-stat .v.green{color:#a7f3d0}
    .welcome-stat .v.cyan {color:#a5f3fc}
    .welcome-stat .v.pink {color:#fbcfe8}

    /* --- "Hundreds of bidders warming up" — animated colored dots ---
       14 tiny dots that bounce in sequence, with a fade-out mask on the
       right so more dots feel like they're rolling in from off-screen.
       Each dot's animation-delay is calculated from --i (0..13) via
       calc() so the bounce cascades left-to-right. Colors cycle through
       5 hues via nth-child(5n+N). */
    .bidders-row{
      display:inline-flex;align-items:center;gap:8px;
      margin-top:6px;font-size:.78rem;font-weight:600;opacity:.92;
    }
    .bidders-dots{
      display:inline-flex;gap:4px;align-items:center;
      padding-right:14px;
      -webkit-mask-image:linear-gradient(to right,#000 62%,transparent 100%);
              mask-image:linear-gradient(to right,#000 62%,transparent 100%);
    }
    /* Dot base — cyan default; --i * 80ms staggers each dot's bounce. */
    .bidders-row .dot{
      width:6px;height:6px;border-radius:50%;
      background:#22d3ee;box-shadow:0 0 6px rgba(34,211,238,.7);
      animation:bidderBounce 1.2s ease-in-out infinite;
      animation-delay:calc(var(--i, 0) * 80ms);
    }
    /* Repeating 5-color palette: cyan (default), purple, pink, green, amber. */
    .bidders-row .dot:nth-child(5n+2){background:#a78bfa;box-shadow:0 0 6px rgba(167,139,250,.7)}
    .bidders-row .dot:nth-child(5n+3){background:#f472b6;box-shadow:0 0 6px rgba(244,114,182,.7)}
    .bidders-row .dot:nth-child(5n+4){background:#34d399;box-shadow:0 0 6px rgba(52,211,153,.7)}
    .bidders-row .dot:nth-child(5n+5){background:#fbbf24;box-shadow:0 0 6px rgba(251,191,36,.7)}
    @keyframes bidderBounce{
      0%,100%{transform:translateY(0);opacity:.55}
      50%   {transform:translateY(-4px);opacity:1}
    }

    /* Welcome-card responsive breakpoints. Below 760px the layout
       collapses to 2 columns and the stats wrap onto their own row. */
    @media (max-width:759.98px){
      .welcome{
        grid-template-columns:auto 1fr;
        gap:14px;padding:18px;
      }
      .welcome-stats{grid-column:1 / -1;justify-content:flex-start}
      .welcome-avatar{width:54px;height:54px;font-size:1.2rem}
    }
    @media (max-width:419.98px){
      .welcome-stat{flex:1;min-width:0}
    }

    /* =========================================================
       Sponsor card — right-column ad slot
       =========================================================
       Simple white card with a header + image + disclaimer copy.
       Delayed cardIn animation (.6s) so it appears after the tips card. */
    .sponsor{
      background:linear-gradient(180deg,#fff,var(--surface-2));
      border:1px solid var(--border);border-radius:var(--radius);
      box-shadow:var(--shadow-sm);padding:18px;text-align:center;
      animation:cardIn .6s ease both;animation-delay:.6s;opacity:0;
    }
    .sponsor h4{
      margin:0 0 10px;font-size:.72rem;font-weight:800;letter-spacing:.8px;
      color:var(--muted);text-transform:uppercase;
    }
    .sponsor .ad{
      border:1px solid var(--border);border-radius:10px;overflow:hidden;
      background:#fff;
    }
    .sponsor .ad img{width:100%;height:auto;display:block}
    .sponsor p{margin:10px 0 0;font-size:.78rem;color:var(--muted);line-height:1.45}

    /* =========================================================
       Tips card — dark navy card in the right sidebar
       =========================================================
       Contains 4 tip bullets to help users get better auction results.
       Dark navy background + purple corner glow, cyan bullet-check icons. */
    .tips{
      background:linear-gradient(180deg,#0b1220,#1a6494);
      color:#fff;border-radius:var(--radius);padding:18px;
      box-shadow:var(--shadow);
      animation:cardIn .6s ease both;animation-delay:.7s;opacity:0;
      position:relative;overflow:hidden;
    }
    /* Purple radial glow in the top-right corner. */
    .tips::after{
      content:"";position:absolute;right:-30px;top:-30px;
      width:120px;height:120px;border-radius:50%;
      background:radial-gradient(circle,#7c3aed,transparent 70%);
      opacity:.5;pointer-events:none;
    }
    .tips h4{margin:0 0 8px;font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:8px}
    .tips ul{margin:0;padding-left:18px;font-size:.84rem;line-height:1.5;opacity:.92}
    .tips li{margin-bottom:6px}
    .tips i{color:#22d3ee}

    /* =========================================================
       Sticky action bar — Save & Run Auction / Cancel
       =========================================================
       Sits at the bottom of .auction-form. position:sticky with
       bottom:14px means it hovers just above the viewport bottom
       as the user scrolls the form. Frosted-glass background so
       fields underneath show through. Contains a live-updating
       summary line (bidders / rounds / radius) driven by the JS. */
    .actions{
      position:sticky;bottom:14px;z-index:30;
      background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(10px);
      border:1px solid var(--border);border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
    }
    .actions .summary{font-size:.86rem;color:var(--muted);flex:1;min-width:200px}
    .actions .summary strong{color:var(--text)}

    /* Button system — same variants used across the Fizook surface.
       .btn-success has an animated white diagonal sheen (::after)
       that sweeps across on hover. */
    .btn{
      appearance:none;border:0;cursor:pointer;font-weight:700;
      padding:11px 16px;border-radius:var(--radius-button);font-size:.92rem;
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      font-family:inherit;text-decoration:none;
      transition:transform .15s ease,box-shadow .15s ease,background .15s ease,opacity .15s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
    .btn-primary{background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;box-shadow:0 4px 12px rgba(36,129,188,.32)}
    .btn-success{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;box-shadow:0 4px 12px rgba(22,163,74,.32);position:relative;overflow:hidden}
    .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;
    }
    .btn-success:hover::after{transform:translateX(100%)}
    .btn-ghost{background:#f1f5f9;color:var(--text);border:1px solid var(--border)}
    .btn-ghost:hover{background:#e2e8f0}

    /* =========================================================
       Footer — same 4-column layout as the rest of the surface
       ========================================================= */
    footer.fz-footer{
      background:#0b1220;color:#cbd5e1;margin-top:40px;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .fz-footer-inner{
      max-width:1240px;margin:0 auto;padding:40px 24px 24px;
      display:grid;gap:32px;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    }
    .fz-footer h3{margin:0 0 12px;color:#fff;font-size:1.1rem;font-weight:800}
    .fz-footer h4{margin:0 0 12px;color:#fff;font-size:.92rem;font-weight:700;letter-spacing:.4px}
    .fz-footer p{margin:0 0 14px;font-size:.86rem;line-height:1.55;opacity:.8}
    .fz-footer ul{list-style:none;padding:0;margin:0}
    .fz-footer li{margin-bottom:8px}
    .fz-footer a{color:#cbd5e1;text-decoration:none;font-size:.86rem;transition:color .15s ease}
    .fz-footer a:hover{color:#fff}
    .fz-footer .socials{display:flex;gap:10px;margin-top:14px}
    .fz-footer .socials a{
      width:34px;height:34px;border-radius:50%;
      background:rgba(255,255,255,.08);
      display:inline-flex;align-items:center;justify-content:center;
      transition:background .2s ease,transform .2s ease;
    }
    .fz-footer .socials a:hover{background:rgba(34,211,238,.25);transform:translateY(-2px)}
    .fz-footer-bottom{
      border-top:1px solid rgba(255,255,255,.08);
      max-width:1240px;margin:0 auto;padding:14px 24px;
      display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
      font-size:.78rem;opacity:.75;
    }
    .fz-footer-bottom a{color:#cbd5e1;text-decoration:none;margin-left:14px}

    /* =========================================================
       Responsive breakpoints
       =========================================================
       Phone portrait tightens hero + card padding. Landscape phone
       further compresses everything so a short viewport can still
       show the form without giant whitespace. */
    @media (max-width:559.98px){
      .hero{padding:28px 16px 28px}
      .wrap{margin-top:18px;padding:0 12px 32px;gap:15px}
      .col-main,.col-side,.auction-form{gap:15px}
      .card{padding:16px}
      .card-icon{width:34px;height:34px;font-size:.92rem}
      .card-title{font-size:1rem}
      /* Reserve room on the right so the sticky action bar clears
         the Fizzy FAB (~72px + margin) in the bottom-right corner. */
      .actions{padding-right:80px}
    }
    /* Phone landscape (short viewport) — compress hero, hide coin
       confetti to save vertical space, tighten cards + action bar. */
    @media (orientation:landscape) and (max-height:500px){
      .topbar-inner{padding:8px 14px}
      .hero{padding:22px 18px 22px}
      .hero::before,.hero::after{width:200px;height:200px}
      .hero h1{font-size:1.4rem;line-height:1.1;letter-spacing:-.4px}
      .hero p.lead{font-size:.86rem}
      .hero .crumbs{font-size:.72rem;margin-top:2px}
      .coin{display:none}
      .wrap{margin-top:14px;padding:0 16px 22px;gap:14px}
      .col-main,.col-side,.auction-form{gap:14px}
      .card{padding:14px}
      .card-icon{width:32px;height:32px;font-size:.88rem}
      .card-title{font-size:1rem}
      .card-sub{font-size:.82rem}
      .actions{padding:10px 12px;bottom:8px;padding-right:80px}
      .actions .summary{font-size:.78rem;min-width:120px}
    }