/* ═══════════════════════════════════════════════════════════════════
   hyaffiliate — v1.1 Design System
   Extracted from inline <style> + color tokens applied
   All hardcoded colors replaced with CSS custom properties
   ═══════════════════════════════════════════════════════════════════ */


/* ─── Compat aliases for legacy var references ─────────────── */
:root{
  --cm-cyan:    var(--info);
  --cm-green:   var(--accent);
  --cm-mag:     var(--purple);
  --cm-gold:    var(--warning);
  --cm-red:     var(--danger);
  --sp-green:   var(--accent);
  --glass-bg:   var(--bg-card);
  --glass-bg-light: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  --glass-bg-heavy: color-mix(in srgb, var(--bg-deep) 82%, transparent);
  --glass-border: var(--border);
  --glass-border-light: var(--border);
  --glass-border-subtle: color-mix(in srgb, var(--accent) 16%, transparent);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.25);
  --glass-shadow-lg: 0 16px 48px rgba(0,0,0,.4);
  --glass-inset-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  --glass-radius: var(--radius-xl, 20px);
  --glass-radius-sm: var(--radius-ios, 14px);
  --success: var(--accent);
  --bg-input: color-mix(in srgb, var(--bg-surface) 80%, transparent);
  --bg-card-hover: color-mix(in srgb, var(--bg-card) 85%, var(--accent) 15%);
  --bg-modal: rgba(0,0,0,.7);
  --text: var(--accent-text);
  --border-hover: var(--border-focus);
  --accent-hover: var(--accent);
  --z-sticky: 200;
  --z-dropdown: 400;
  --z-modal: 500;
  --font-mono: var(--font-ios, monospace);
  --orange: #f97316;
}


/* ─── App Styles ──────────────────────────────────────────────── */

    :root{
      --af-ink: var(--accent-text);
      --af-ink-dim: var(--muted);
      --af-glass: color-mix(in srgb, var(--bg-deep) 55%, transparent);
      --af-glass-border: color-mix(in srgb, var(--accent) 16%, transparent);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      background:var(--bg-deep);
      color:var(--af-ink);
      font-family:var(--font-ios,-apple-system,BlinkMacSystemFont,system-ui,sans-serif);
      min-height:100vh;min-height:100dvh;
      -webkit-font-smoothing:antialiased;
    }
    .wrap{
      max-width:880px;margin:0 auto;
      padding:calc(env(safe-area-inset-top,0px) + 10px) 12px calc(env(safe-area-inset-bottom,0px) + 96px);
    }
    .topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
    .topbar .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;color:var(--accent)}
    .topbar .brand iconify-icon{color:var(--accent)}
    .spacer{flex:1}
    .icon-btn{
      display:inline-flex;align-items:center;justify-content:center;
      min-width:44px;min-height:44px;border-radius:14px;cursor:pointer;
      background:var(--af-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
      border:.5px solid var(--af-glass-border);color:var(--accent);
      transition:transform .2s cubic-bezier(.2,.9,.3,1);
    }
    .icon-btn:active{transform:scale(.94)}
    select,input{
      font-size:16px;font-family:inherit;color:var(--af-ink);
      background:rgba(255,255,255,.05);border:.5px solid var(--af-glass-border);
      border-radius:12px;padding:11px 13px;outline:none;width:100%;min-height:44px;
    }
    select:focus,input:focus{border-color:var(--accent)}
    select{background:color-mix(in srgb, var(--bg-deep) 92%, transparent)}

    .card{
      background:var(--af-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
      border:.5px solid var(--af-glass-border);border-radius:18px;padding:16px;margin-bottom:12px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.4);
    }
    .card h2{font-size:14px;margin:0 0 12px;display:flex;align-items:center;gap:8px;color:var(--accent);letter-spacing:.02em}
    .card h2 .sub{margin-left:auto;font-size:11px;color:var(--af-ink-dim);font-weight:500}
    .muted{color:var(--af-ink-dim);font-size:13px}

    /* KPI grid */
    .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
    .kpi{background:rgba(255,255,255,.04);border:.5px solid var(--af-glass-border);border-radius:14px;padding:12px}
    .kpi .v{font-size:22px;font-weight:900;color:var(--accent);line-height:1}
    .kpi .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--af-ink-dim);margin-top:6px}
    .kpi.warn .v{color:var(--danger)}

    /* Segmented tab bar (fixed bottom) */
    .tabbar{
      position:fixed;left:0;right:0;bottom:0;z-index:200;
      display:flex;gap:2px;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 8px);
      background:color-mix(in srgb, var(--bg-deep) 78%, transparent);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
      border-top:.5px solid var(--af-glass-border);
    }
    .tabbar .tab{
      flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
      min-height:48px;justify-content:center;border:none;background:none;cursor:pointer;
      color:var(--af-ink-dim);font-size:10px;font-weight:600;border-radius:12px;padding:4px;font-family:inherit;
    }
    .tabbar .tab iconify-icon{width:22px;height:22px}
    .tabbar .tab.active{color:var(--accent);background:var(--accent-dim)}
    .tabbar .tab[hidden]{display:none}
    .screen{display:none}
    .screen.active{display:block}

    /* Tables */
    .tbl{width:100%;border-collapse:collapse;font-size:13px}
    .tbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--af-ink-dim);padding:6px 8px;border-bottom:.5px solid var(--af-glass-border);position:sticky;top:0;background:color-mix(in srgb, var(--bg-deep) 60%, transparent)}
    .tbl td{padding:9px 8px;border-bottom:.5px solid rgba(255,255,255,.05);vertical-align:middle}
    .tbl tr.clickable{cursor:pointer}
    .tbl tr.clickable:active{background:var(--accent-dim)}
    .tbl .num{text-align:right;font-variant-numeric:tabular-nums}
    .tbl .name{font-weight:700;color:var(--af-ink)}
    .tbl .em{font-size:11px;color:var(--af-ink-dim)}
    .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .scroll-y{max-height:460px;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .pager{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:10px}
    .pager button{min-width:34px;min-height:34px;padding:4px 9px;border:.5px solid var(--af-glass-border);background:rgba(255,255,255,.05);color:var(--af-ink);border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
    .pager button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
    .pager button:disabled{opacity:.35;cursor:default}
    .pager .pg-cur{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
    .pager .pg-ellipsis{padding:0 4px;color:var(--af-ink-dim)}
    .pg-meta{font-size:11px;margin:8px 2px 0;text-align:center;color:var(--af-ink-dim)}

    .pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700}
    .pill.ok{background:var(--accent-dim);color:var(--accent)}
    .pill.warn{background:color-mix(in srgb, var(--danger) 16%, transparent);color:var(--danger)}
    .pill.dim{background:rgba(255,255,255,.06);color:var(--af-ink-dim)}
    .pill.proc{background:color-mix(in srgb, var(--info) 18%, transparent);color:var(--info)}
    .store-chip{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10px;background:rgba(255,255,255,.06);border:.5px solid var(--af-glass-border);color:var(--af-ink-dim);margin:1px}

    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:7px;
      min-height:42px;padding:10px 15px;border-radius:13px;cursor:pointer;
      font-size:14px;font-weight:600;font-family:inherit;
      border:.5px solid var(--accent-glow);background:var(--accent-dim);color:var(--accent);
      transition:transform .2s cubic-bezier(.2,.9,.3,1);
    }
    .btn:active{transform:scale(.97)}
    .btn.ghost{background:transparent;border-color:var(--af-glass-border);color:var(--af-ink-dim)}
    .btn.full{width:100%}
    .filter-row{display:flex;gap:8px;margin-bottom:10px;align-items:center}
    .filter-row input{flex:1}
    .filter-row select{width:auto;min-width:130px}

    .empty{text-align:center;color:var(--af-ink-dim);padding:34px 16px}
    .empty iconify-icon{font-size:42px;color:var(--af-glass-border);display:block;margin:0 auto 10px}
    .empty .lead{font-size:15px;color:var(--af-ink);font-weight:600;margin-bottom:4px}

    /* Modal */
    .modal-bg{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);align-items:flex-end;justify-content:center}
    .modal-bg.open{display:flex}
    .modal{
      width:100%;max-width:620px;max-height:92vh;overflow-y:auto;
      background:color-mix(in srgb, var(--bg-deep) 97%, transparent);border:.5px solid var(--accent-glow);
      border-radius:22px 22px 0 0;padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 18px);
    }
    .modal h3{font-size:16px;margin:0 0 4px;display:flex;align-items:center;gap:8px;color:var(--accent)}
    .note{font-size:12px;color:var(--af-ink-dim);background:rgba(255,255,255,.04);border:.5px solid var(--af-glass-border);border-radius:12px;padding:10px 12px;margin:8px 0}

    .toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
      background:color-mix(in srgb, var(--bg-deep) 96%, transparent);border:.5px solid var(--accent);color:var(--af-ink);padding:11px 16px;border-radius:13px;font-size:13px;z-index:700;transition:.25s;max-width:90vw}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
    .toast.err{border-color:var(--danger);color:var(--danger)}

    /* ── Store selector (topbar) ── */
    .store-select{width:auto;min-width:180px;max-width:260px;background:var(--bg-card,color-mix(in srgb, var(--bg-deep) 92%, transparent));border-radius:14px;min-height:44px}
    .store-select[hidden]{display:none}
    @media(max-width:480px){
      .topbar .brand .brand-label{display:none}
      .store-select{order:3;flex-basis:100%;min-width:0;max-width:none;width:100%}
    }

    /* ── Per-store parity: referral code box ── */
    .code-box-ha{background:var(--bg-card,color-mix(in srgb, var(--bg-deep) 85%, transparent));border:.5px solid var(--af-glass-border);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    .code-box-ha .code-text{font-family:ui-monospace,monospace;font-size:20px;font-weight:700;color:var(--accent);flex:1;min-width:120px;word-break:break-all}
    .share-row{font-size:12px;margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--af-ink-dim)}
    .share-row code{font-family:ui-monospace,monospace;color:var(--af-ink);word-break:break-all}
    .store-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .store-head .nm{font-size:17px;font-weight:800;color:var(--af-ink)}
    .cert-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700}
    .cert-badge.on{color:var(--accent)}
    .cert-badge.off{color:var(--af-ink-dim)}

    /* ── Incentive ladder (token-safe) ── */
    .ladder{display:flex;flex-direction:column;gap:6px}
    .ladder .tier{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;border:.5px solid var(--af-glass-border);background:rgba(255,255,255,.03)}
    .ladder .tier.reached{border-color:var(--accent);background:var(--accent-dim)}
    .ladder .tier .dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.05);border:.5px solid var(--af-glass-border)}
    .ladder .tier.reached .dot{color:var(--accent);border-color:var(--accent)}
    .ladder .tier .nm{flex:1;font-weight:700;font-size:13px;color:var(--af-ink)}
    .ladder .tier .rw{font-size:10px;color:var(--af-ink-dim)}
    .ladder .tier .th{font-size:12px;font-weight:800;color:var(--af-ink-dim);font-variant-numeric:tabular-nums}
    .ladder .tier.reached .th{color:var(--accent)}
    .ladder-prog{height:8px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.08);margin:6px 0}
    .ladder-prog>i{display:block;height:100%;border-radius:4px;background:var(--accent);transition:width 1s ease}
    .ladder-card{border:.5px solid var(--af-glass-border);border-radius:16px;background:rgba(255,255,255,.035);margin-bottom:9px;overflow:hidden}
    .ladder-card[open]{border-color:color-mix(in srgb, var(--accent) 32%, transparent);box-shadow:0 0 20px color-mix(in srgb, var(--accent) 8%, transparent)}
    .ladder-card summary{list-style:none;cursor:pointer;padding:13px 14px;display:flex;align-items:center;gap:10px}
    .ladder-card summary::-webkit-details-marker{display:none}
    .ladder-card .sum-main{flex:1;min-width:0}
    .ladder-card .sum-title{font-size:13px;font-weight:900;color:var(--af-ink);display:flex;align-items:center;gap:7px}
    .ladder-card .sum-sub{font-size:11px;color:var(--af-ink-dim);margin-top:3px}
    .ladder-card .sum-score{font-size:18px;font-weight:950;color:var(--accent);font-variant-numeric:tabular-nums}
    .ladder-card .detail{padding:0 14px 14px}
    .notify-row{display:flex;flex-direction:column;gap:8px}
    .notify-card{border:.5px solid color-mix(in srgb, var(--accent) 20%, transparent);background:color-mix(in srgb, var(--accent) 6%, transparent);border-radius:14px;padding:11px 13px;display:flex;gap:10px;align-items:flex-start}
    .notify-card .spark{font-size:20px;filter:drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 35%, transparent))}
    .dash-section{margin-bottom:12px}

    /* ── Tickets ── */
    .actions-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
    .actions-bar .ttl{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--accent)}
    .tk-thread{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
    .tk-msg{border:.5px solid var(--af-glass-border);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.03);font-size:13px;line-height:1.5}
    .tk-msg.admin{border-left:3px solid var(--accent)}
    .tk-msg .who{font-size:11px;font-weight:700;color:var(--accent);margin-bottom:3px;display:flex;gap:8px;align-items:center}
    .tk-msg .who .when{margin-left:auto;color:var(--af-ink-dim);font-weight:500}
    .tk-msg .body{color:var(--af-ink);white-space:pre-wrap}
    .fld{margin-bottom:12px}
    .fld label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--af-ink-dim);margin-bottom:5px}
    textarea{font-size:16px;font-family:inherit;color:var(--af-ink);background:rgba(255,255,255,.05);border:.5px solid var(--af-glass-border);border-radius:12px;padding:11px 13px;outline:none;width:100%;min-height:110px;resize:vertical}
    textarea:focus{border-color:var(--accent)}

    /* ── Tab labels + admin overflow ── */
    .tabbar .tab .lbl{display:block}
    .tabbar .tab[data-overflow]{display:none}
    @media(max-width:480px){
      .tabbar .tab .lbl{display:none}
      body.is-admin .tabbar .tab[data-admin]{display:none}
      body.is-admin .tabbar .tab[data-overflow]:not([hidden]){display:flex}
    }
    .sheet-menu{display:flex;flex-direction:column;gap:8px;margin-top:8px}
    .sheet-menu .btn{justify-content:flex-start}

    /* ── AI / Copilot Tab ─────────────────────────────────────────────── */
    .ai-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
    .ai-brand{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:900;color:var(--accent);flex:1}

    /* Score KPIs */
    .score-bar{height:5px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.08);margin:4px 0 2px}
    .score-bar>i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width 1.1s ease}
    .score-bar.mid>i{background:var(--warning)}
    .score-bar.lo>i{background:var(--danger)}

    /* Leaderboard */
    .lb-wrap{display:flex;flex-direction:column;gap:6px}
    .lb-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:.5px solid var(--af-glass-border);background:rgba(255,255,255,.03);transition:.18s;cursor:pointer}
    .lb-card:hover{background:rgba(255,255,255,.07);border-color:color-mix(in srgb, var(--accent) 35%, transparent)}
    .lb-card.rank1{border-color:color-mix(in srgb, var(--warning) 45%, transparent);background:color-mix(in srgb, var(--warning) 5%, transparent);box-shadow:0 0 16px color-mix(in srgb, var(--warning) 9%, transparent)}
    .lb-card.rank2{border-color:color-mix(in srgb, var(--muted) 35%, transparent);background:color-mix(in srgb, var(--muted) 4%, transparent)}
    .lb-card.rank3{border-color:rgba(205,127,50,.35);background:rgba(205,127,50,.04)}
    .lb-rank{font-size:16px;font-weight:900;min-width:30px;text-align:center}
    .lb-rank.r1{color:var(--warning);text-shadow:0 0 10px color-mix(in srgb, var(--warning) 50%, transparent)}
    .lb-rank.r2{color:#c0c0c0}
    .lb-rank.r3{color:#cd7f32}
    .lb-rank.rn{color:var(--af-ink-dim)}
    .lb-avatar{width:38px;height:38px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--accent);flex-shrink:0;border:.5px solid var(--af-glass-border)}
    .lb-avatar.r1{background:color-mix(in srgb, var(--warning) 14%, transparent);border-color:color-mix(in srgb, var(--warning) 40%, transparent);color:var(--warning)}
    .lb-info{flex:1;min-width:0}
    .lb-info .nm{font-size:13px;font-weight:700;color:var(--af-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .lb-info .sub{font-size:10px;color:var(--af-ink-dim);margin-top:1px}
    .lb-stats{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}
    .lb-stats .v{font-size:14px;font-weight:900;color:var(--accent)}
    .lb-stats .l{font-size:9px;color:var(--af-ink-dim);text-transform:uppercase;letter-spacing:.06em}

    /* Badges */
    .badge-grid{display:flex;flex-wrap:wrap;gap:7px}
    .badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;border:.5px solid}
    .badge.earned{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
    .badge.locked{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);color:var(--af-ink-dim)}
    .badge.gold{background:color-mix(in srgb, var(--warning) 11%, transparent);border-color:color-mix(in srgb, var(--warning) 40%, transparent);color:var(--warning)}
    .badge.silver{background:color-mix(in srgb, var(--muted) 8%, transparent);border-color:color-mix(in srgb, var(--muted) 28%, transparent);color:#c0c0c0}

    /* Action / finding cards */
    .action-list{display:flex;flex-direction:column;gap:7px}
    .action-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;border:.5px solid var(--af-glass-border);background:rgba(255,255,255,.03)}
    .action-item .ai-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;background:rgba(255,255,255,.06)}
    .action-item .ai-body{flex:1;min-width:0}
    .action-item .ai-body .ttl{font-size:13px;font-weight:700;color:var(--af-ink)}
    .action-item .ai-body .sub{font-size:11px;color:var(--af-ink-dim);margin-top:2px;line-height:1.5}
    .action-item .ai-body .tags{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
    .action-urgent{border-color:color-mix(in srgb, var(--danger) 38%, transparent);background:color-mix(in srgb, var(--danger) 5%, transparent)}
    .action-opportunity{border-color:color-mix(in srgb, var(--accent) 22%, transparent)}

    /* Campaign kit blocks */
    .kit-block{background:rgba(255,255,255,.04);border:.5px solid var(--af-glass-border);border-radius:12px;padding:11px 13px;margin-bottom:9px}
    .kit-block .ktitle{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--af-ink-dim);margin-bottom:5px;display:flex;align-items:center;gap:5px}
    .kit-block .kbody{font-size:13px;color:var(--af-ink);line-height:1.65;white-space:pre-wrap;word-break:break-word}
    .kit-block .kactions{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}

    /* Creatives */
    .creative-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb, var(--accent) 12%, transparent),color-mix(in srgb, var(--bg-deep) 72%, transparent));border-color:color-mix(in srgb, var(--accent) 26%, transparent)}
    .creative-hero:after{content:"";position:absolute;right:-34px;top:-34px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb, var(--accent) 18%, transparent),transparent 68%);pointer-events:none}
    .creative-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
    .creative-card{position:relative;border:.5px solid var(--af-glass-border);border-radius:16px;padding:14px;background:rgba(255,255,255,.035);overflow:hidden}
    .creative-card .ct{font-size:13px;font-weight:800;color:var(--accent);display:flex;align-items:center;gap:7px;margin-bottom:7px}
    .creative-card .cb{font-size:12px;line-height:1.55;color:var(--af-ink);white-space:pre-wrap}
    .flyer-preview{min-height:220px;border-radius:18px;padding:18px;background:linear-gradient(160deg,color-mix(in srgb, var(--accent) 20%, transparent),color-mix(in srgb, var(--bg-deep) 92%, transparent));border:.5px solid color-mix(in srgb, var(--accent) 32%, transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 32px rgba(0,0,0,.35);display:flex;flex-direction:column;justify-content:space-between}
    .flyer-preview .brand-line{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
    .flyer-preview .headline{font-size:25px;line-height:1.05;font-weight:950;color:#fff;text-shadow:0 0 18px color-mix(in srgb, var(--accent) 25%, transparent);margin:10px 0}
    .flyer-preview .code{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.42);border:.5px solid rgba(255,255,255,.18);font-family:ui-monospace,monospace;color:var(--accent);font-weight:900}
    .video-timeline{display:flex;flex-direction:column;gap:7px}
    .video-step{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.04);border:.5px solid var(--af-glass-border)}
    .video-step .n{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-dim);color:var(--accent);font-size:11px;font-weight:900;flex-shrink:0}

    /* QR / UTM builder */
    .qr-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0}
    .qr-img{width:180px;height:180px;border-radius:14px;border:.5px solid var(--af-glass-border);background:rgba(255,255,255,.97);padding:8px}

    /* Cyberpunk glow animation */
    @keyframes cyberpulse{0%,100%{opacity:.5}50%{opacity:1}}
    .glow-pulse{animation:cyberpulse 2.6s ease-in-out infinite}
    @keyframes slidein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
    .ai-fadein{animation:slidein .35s ease both}

    /* AI loading indicator */
    .ai-loading{display:flex;align-items:center;gap:10px;padding:20px 16px;color:var(--af-ink-dim);font-size:14px}
    .ai-loading iconify-icon{animation:cyberpulse 1.2s ease-in-out infinite;font-size:26px;color:var(--accent)}

    /* Confidence / meta badges */
    .conf-badge{font-size:10px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--af-ink-dim);border:.5px solid var(--af-glass-border)}

    /* Sandbox */
    .sandbox-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
    @media(max-width:480px){.sandbox-row{grid-template-columns:1fr}}
  
/* ── Order commission filter chips ──────────────────────────────────── */
.ord-cs-btn{padding:4px 11px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);transition:.15s;white-space:nowrap}
.ord-cs-btn:hover{border-color:var(--accent);color:var(--accent)}
.ord-cs-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}