/* === extracted from server.js L6569-7433 === */
    /* ── Text Query Understanding (Phase 7.0A) ───────────────── */
    .tq-card       { background: #1e293b; border: 1.5px solid #1e3a5f; border-radius: 14px;
                     padding: 20px; margin-bottom: 16px; }
    .tq-input      { flex: 1; background: #0f172a; border: 1.5px solid #334155; border-radius: 8px;
                     padding: 10px 14px; font-size: 14px; color: #e2e8f0;
                     outline: none; transition: border-color .15s; }
    .tq-input:focus      { border-color: #60a5fa; }
    .tq-input::placeholder { color: #475569; }
    .intent-result { margin-top: 16px; animation: fadeIn .3s ease; }
    @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
    .intent-query  { font-size: 11px; color: #64748b; margin-bottom: 12px;
                     display: flex; align-items: baseline; gap: 6px; }
    .intent-query strong { color: #e2e8f0; font-size: 14px; direction: rtl; unicode-bidi: embed; }
    .intent-grid   { display: flex; flex-wrap: wrap; gap: 8px; }
    .intent-item   { background: #0f172a; border: 1px solid #1e3a5f; border-radius: 8px;
                     padding: 10px 14px; min-width: 130px; flex: 1 1 130px; }
    .intent-lbl    { font-size: 9px; font-weight: 700; color: #64748b;
                     text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
    .intent-val    { font-size: 13px; color: #e2e8f0; font-weight: 600; word-break: break-word; }
    .intent-empty  { color: #475569; font-style: italic; font-weight: 400; }
    .conf-HIGH   { color: #86efac; }
    .conf-MEDIUM { color: #fbbf24; }
    .conf-LOW    { color: #fca5a5; }
    /* ── Image Search Upload (Phase 7.1A) ───────────────────── */
    .img-upload-zone {
      border: 2px dashed #334155; border-radius: 12px; background: #0f172a;
      display: flex; align-items: center; justify-content: center;
      min-height: 180px; position: relative; cursor: pointer;
      transition: border-color .2s, background .2s; overflow: hidden;
    }
    .img-upload-zone.drag-over {
      border-color: #60a5fa; background: #0f2040;
    }
    .img-upload-zone.has-image {
      border-color: #22d3ee; border-style: solid; cursor: default;
    }
    .img-placeholder { text-align: center; color: #475569; pointer-events: none; }
    .img-placeholder-icon { font-size: 40px; margin-bottom: 10px; }
    .img-placeholder-title { font-size: 16px; font-weight: 600; color: #94a3b8; margin-bottom: 6px; }
    .img-placeholder-sub   { font-size: 13px; color: #475569; }
    .img-preview {
      max-width: 100%; max-height: 340px; border-radius: 8px;
      object-fit: contain; display: block; margin: 0 auto;
    }
    .img-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
    .img-meta-row {
      background: #0f172a; border: 1px solid #1e3a5f; border-radius: 8px;
      padding: 8px 14px; display: flex; flex-direction: column; flex: 1 1 130px;
    }
    .img-meta-lbl { font-size: 9px; font-weight: 700; color: #64748b;
                    text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
    .img-meta-val { font-size: 13px; color: #e2e8f0; font-weight: 600; word-break: break-all; }
    .img-debug-hdr { font-size: 11px; font-weight: 700; color: #64748b;
                     text-transform: uppercase; letter-spacing: .08em;
                     cursor: pointer; user-select: none; margin-top: 14px;
                     padding: 6px 0; border-top: 1px solid #1e3a5f; }
    .img-debug-hdr:hover { color: #94a3b8; }

    /* ── Image Search Results (Phase 7.1B) ───────────────────── */
    .imgr-header  { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
    .imgr-count   { font-size: 13px; color: #94a3b8; }
    .imgr-count strong { color: #e2e8f0; }
    /* Mobile-first grid: 1 col → 2 → 3 → 4 */
    .imgr-grid    { display: grid; grid-template-columns: 1fr; gap: 12px; }
    @media (min-width: 480px) { .imgr-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 768px) { .imgr-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
    @media (min-width: 1024px){ .imgr-grid { grid-template-columns: repeat(4, 1fr); } }
    .imgr-card    { background: #1e293b; border: 1.5px solid #1e3a5f; border-radius: 12px;
                    overflow: hidden; display: flex; flex-direction: column;
                    transition: border-color .18s, box-shadow .18s; }
    .imgr-card:hover { border-color: #3b82f6; box-shadow: 0 0 0 2px #3b82f622; }
    .imgr-img-wrap{ aspect-ratio: 1; overflow: hidden; background: #0f172a; }
    .imgr-img     { width: 100%; height: 100%; object-fit: cover; display: block; }
    .imgr-img-ph  { width: 100%; height: 100%; display: flex; align-items: center;
                    justify-content: center; font-size: 36px; color: #334155; }
    .imgr-body    { padding: 10px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
    .imgr-title   { font-size: 12px; color: #cbd5e1; line-height: 1.4; flex: 1;
                    display: -webkit-box; -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical; overflow: hidden; }
    .imgr-price   { font-size: 15px; font-weight: 700; color: #ef4444; }
    .imgr-meta    { font-size: 11px; color: #64748b; display: flex; gap: 8px; flex-wrap: wrap; }
    .imgr-actions { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
    .imgr-sel-btn { background: #1e3a5f; border: 1.5px solid #2563eb; color: #93c5fd;
                    border-radius: 8px; padding: 6px 10px; font-size: 12px;
                    font-weight: 600; cursor: pointer; transition: background .15s; }
    .imgr-sel-btn:hover { background: #2563eb; color: #fff; }
    .imgr-view-link{ font-size: 11px; color: #64748b; text-decoration: none;
                     text-align: center; padding: 3px 0; }
    .imgr-view-link:hover { color: #94a3b8; }
    .imgr-diag    { background: #0f172a; border: 1px solid #1e3a5f; border-radius: 10px;
                    padding: 14px 16px; margin-top: 14px; }
    .imgr-diag-hdr{ font-size: 11px; font-weight: 700; color: #64748b;
                    text-transform: uppercase; letter-spacing: .08em;
                    cursor: pointer; user-select: none; margin-bottom: 8px; }
    .imgr-diag-hdr:hover { color: #94a3b8; }

    /* ── Image Reference Selection (Phase 7.1C) ──────────────── */
    .imgr-card.imgr-selected { border-color: #3b82f6; box-shadow: 0 0 0 2px #3b82f633; }
    .imgr-sel-btn.selected   { background: #1d4ed8; border-color: #3b82f6; color: #fff; }
    .imgref-panel  { background: #0f2040; border: 1.5px solid #2563eb; border-radius: 14px;
                     padding: 20px; margin-top: 16px; }
    .imgref-hdr    { font-size: 13px; font-weight: 700; color: #22d3ee; margin-bottom: 14px; }
    .imgref-body   { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
    .imgref-img    { width: 80px; height: 80px; object-fit: cover; border-radius: 8px;
                     border: 1px solid #1e3a5f; flex-shrink: 0; }
    .imgref-info   { flex: 1; min-width: 0; }
    .imgref-title  { font-size: 14px; font-weight: 600; color: #e2e8f0;
                     margin-bottom: 6px; line-height: 1.4; }
    .imgref-price  { font-size: 18px; font-weight: 700; color: #ef4444; margin-bottom: 6px; }
    .imgref-pid    { font-size: 11px; color: #64748b; margin-bottom: 6px;
                     font-family: monospace; }
    .imgref-meta   { font-size: 12px; color: #64748b; display: flex; gap: 10px; flex-wrap: wrap; }
    .imgref-hint   { font-size: 12px; color: #64748b; margin-bottom: 14px; }
    .imgref-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
    .imgref-url    { font-size: 11px; color: #475569; word-break: break-all; }
    .imgref-url a  { color: #60a5fa; text-decoration: none; }
    .imgref-url a:hover { text-decoration: underline; }
    .imgref-debug  { margin-top: 14px; border-top: 1px solid #1e3a5f; padding-top: 12px; }

    /* ── Discovery Cards (Phase 7.2) ─────────────────────────── */
    /* Legacy dc-grid — inherits same mobile-first rules as pc-grid */
    .dc-grid  { display:grid; grid-template-columns:1fr; gap:10px; }
    @media (min-width: 480px)  { .dc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
    @media (min-width: 768px)  { .dc-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
    @media (min-width: 1024px) { .dc-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 1280px) { .dc-grid { grid-template-columns: repeat(5, 1fr); } }
    .dc-card  { background:#1e293b; border:1.5px solid #1e3a5f; border-radius:12px;
                overflow:hidden; display:flex; flex-direction:column; transition:border-color .18s; }
    .dc-card:hover    { border-color:#3b82f6; }
    .dc-card.dc-selected { border-color:#3b82f6; box-shadow:0 0 0 2px #3b82f633; }
    .dc-img-wrap { aspect-ratio:1; overflow:hidden; background:#0f172a; flex-shrink:0; }
    .dc-img   { width:100%; height:100%; object-fit:cover; display:block; }
    .dc-img-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:36px; color:#334155; }
    .dc-body  { padding:10px 10px 0; flex:1; display:flex; flex-direction:column; gap:6px; }
    .dc-title { font-size:12px; color:#cbd5e1; line-height:1.4;
                display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .dc-total-wrap { background:#0f172a; border-radius:8px; padding:8px 10px; border:1px solid #1e3a5f; }
    .dc-total-row  { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
    .dc-total-lbl  { font-size:9px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.07em; }
    .dc-total-val  { font-size:16px; font-weight:800; color:#ef4444; }
    .dc-price-detail { font-size:11px; color:#64748b; display:flex; flex-direction:column; gap:2px; }
    .dc-pd-ship      { color:#64748b; }
    .dc-pd-ship.loading { color:#475569; font-style:italic; }
    .dc-pd-ship.unavail { color:#f97316; }
    .dc-pd-ship.free    { color:#16a34a; font-weight:600; }
    .dc-meta  { font-size:11px; color:#64748b; display:flex; flex-wrap:wrap; gap:6px; }
    .dc-rating{ color:#fbbf24; }
    .dc-ship-meta { font-size:11px; color:#475569; }
    .dc-actions { padding:8px 10px 10px; display:flex; flex-direction:column; gap:6px; }
    .dc-view-btn { font-size:11px; color:#64748b; text-decoration:none; text-align:center; padding:3px 0; }
    .dc-view-btn:hover { color:#94a3b8; }
    .dc-sel-btn  { background:#1e3a5f; border:1.5px solid #2563eb; color:#93c5fd;
                   border-radius:8px; padding:7px 10px; font-size:12px; font-weight:600;
                   cursor:pointer; transition:background .15s; }
    .dc-sel-btn:hover    { background:#2563eb; color:#fff; }
    .dc-sel-btn.selected { background:#1d4ed8; border-color:#3b82f6; color:#fff; }
    .dc-expand-btn { background:none; border:1px solid #334155; color:#64748b;
                     border-radius:8px; padding:5px 10px; font-size:11px;
                     cursor:pointer; transition:border-color .15s,color .15s; width:100%; }
    .dc-expand-btn:hover   { border-color:#60a5fa; color:#60a5fa; }
    .dc-expand-btn.loading { color:#475569; cursor:wait; }
    /* Expanded sections */
    .dc-expanded { padding:10px; border-top:1px solid #1e3a5f; display:flex; flex-direction:column; gap:10px; }
    .dc-section  { background:#0f172a; border-radius:8px; padding:10px 12px; }
    .dc-sec-hdr  { font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase;
                   letter-spacing:.08em; margin-bottom:8px; }
    .dc-gallery  { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
    .dc-gallery img { height:80px; width:80px; object-fit:cover; border-radius:6px;
                      border:1px solid #1e3a5f; flex-shrink:0; cursor:pointer; }
    .dc-desc     { font-size:12px; color:#94a3b8; line-height:1.6; max-height:100px; overflow:hidden; }
    .dc-desc.expanded { max-height:9999px; }
    .dc-show-more{ font-size:11px; color:#60a5fa; cursor:pointer; background:none;
                   border:none; padding:4px 0; margin-top:2px; }
    .dc-orig-toggle-wrap{ padding:6px 12px; background:#0a1628; border-bottom:1px solid #1e3a5f; }
    .dc-orig-toggle-btn{ font-size:11px; color:#94a3b8; cursor:pointer; background:none;
                         border:1px solid #1e3a5f; border-radius:4px; padding:3px 8px; }
    .dc-orig-toggle-btn:hover{ color:#e2e8f0; border-color:#60a5fa; }
    .dc-orig-fields{ margin-top:6px; }
    .dc-orig-row{ display:flex; gap:8px; font-size:11px; margin-bottom:4px; }
    .dc-orig-lbl{ color:#64748b; min-width:120px; font-weight:600; flex-shrink:0; }
    .dc-orig-val{ color:#94a3b8; direction:rtl; text-align:right; }
    .dc-var-table{ width:100%; border-collapse:collapse; font-size:11px; }
    .dc-var-table th { text-align:left; color:#64748b; padding:4px 6px;
                       border-bottom:1px solid #1e3a5f; font-weight:600; font-size:10px; }
    .dc-var-table td { padding:5px 6px; color:#e2e8f0; border-bottom:1px solid #0f2040; }
    .dc-var-table tr.cheapest td { color:#86efac; font-weight:600; }
    .dc-qty-wrap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .dc-qty-ctrl { display:flex; align-items:center; }
    .dc-qty-btn  { background:#1e3a5f; border:1px solid #334155; color:#e2e8f0;
                   padding:5px 12px; font-size:16px; cursor:pointer; border-radius:6px; }
    .dc-qty-btn:hover  { background:#2563eb; }
    .dc-qty-val  { background:#0f172a; border:1px solid #334155; color:#e2e8f0;
                   padding:5px 14px; font-size:14px; font-weight:700;
                   min-width:36px; text-align:center; }
    .dc-qty-total { font-size:13px; color:#e2e8f0; flex:1; font-weight:700; }
    .dc-qty-note  { font-size:10px; color:#475569; width:100%; margin-top:4px; }
    .dc-deliv-row { display:flex; gap:6px; flex-wrap:wrap; }
    .dc-deliv-item{ background:#0f172a; border:1px solid #1e3a5f; border-radius:6px;
                    padding:6px 10px; flex:1 1 120px; }
    .dc-deliv-lbl { font-size:9px; color:#64748b; text-transform:uppercase;
                    letter-spacing:.07em; margin-bottom:3px; }
    .dc-deliv-val { font-size:12px; color:#e2e8f0; font-weight:600; }
    .dc-rev-stars { display:flex; flex-direction:column; gap:4px; }
    .dc-rev-row   { display:flex; align-items:center; gap:6px; font-size:11px; color:#94a3b8; }
    .dc-rev-bar-track { flex:1; height:6px; background:#1e3a5f; border-radius:3px; overflow:hidden; }
    .dc-rev-bar-fill  { height:100%; background:#fbbf24; border-radius:3px; }

    /* ── Universal Product Card — Mobile First Grid ─────────────────────────── */
    /* 1 col mobile → 2 large-mobile → 3 tablet → 4 laptop → 5 desktop */
    .pc-grid  { display:grid; grid-template-columns:1fr; gap:10px; }
    @media (min-width: 480px)  { .pc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
    @media (min-width: 768px)  { .pc-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
    @media (min-width: 1024px) { .pc-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 1280px) { .pc-grid { grid-template-columns: repeat(5, 1fr); } }
    .pc-card  { background:#1e293b; border:1.5px solid #1e3a5f; border-radius:12px;
                overflow:hidden; display:flex; flex-direction:column; transition:border-color .18s; }
    .pc-card:hover       { border-color:#3b82f6; }
    .pc-card.pc-selected { border-color:#3b82f6; box-shadow:0 0 0 2px #3b82f633; }
    .pc-img-wrap { aspect-ratio:1; overflow:hidden; background:#0f172a; flex-shrink:0; position:relative; }
    .pc-img   { width:100%; height:100%; object-fit:cover; display:block; }
    .pc-img-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:36px; color:#334155; }
    .pc-rank  { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; color:#475569;
                background:#0f172acc; border-radius:4px; padding:1px 5px; }
    .pc-body  { padding:10px 10px 0; flex:1; display:flex; flex-direction:column; gap:6px; }
    .pc-title { font-size:12px; color:#cbd5e1; line-height:1.4;
                display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .pc-total-wrap { background:#0f172a; border-radius:8px; padding:8px 10px; border:1px solid #1e3a5f; }
    .pc-total-row  { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
    .pc-total-lbl  { font-size:9px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.07em; }
    .pc-total-val  { font-size:16px; font-weight:800; color:#ef4444; }
    .pc-price-detail { font-size:11px; color:#64748b; display:flex; flex-direction:column; gap:2px; }
    .pc-pd-ship        { color:#64748b; }
    .pc-pd-ship.loading{ color:#475569; font-style:italic; }
    .pc-pd-ship.unavail{ color:#f97316; }
    .pc-pd-ship.free   { color:#16a34a; font-weight:600; }
    .pc-meta  { font-size:11px; color:#64748b; display:flex; flex-wrap:wrap; gap:6px; }
    .pc-rating{ color:#fbbf24; }
    .pc-ship-meta { font-size:11px; color:#475569; }
    .pc-actions { padding:8px 10px 10px; display:flex; flex-direction:column; gap:6px; }
    .pc-view-btn  { font-size:11px; color:#64748b; text-decoration:none; text-align:center; padding:3px 0; }
    .pc-view-btn:hover { color:#94a3b8; }
    .pc-sel-btn   { background:#1e3a5f; border:1.5px solid #2563eb; color:#93c5fd;
                    border-radius:8px; padding:7px 10px; font-size:12px; font-weight:600;
                    cursor:pointer; transition:background .15s; }
    .pc-sel-btn:hover    { background:#2563eb; color:#fff; }
    .pc-sel-btn.selected { background:#1d4ed8; border-color:#3b82f6; color:#fff; }
    .pc-expand-btn { background:none; border:1px solid #334155; color:#64748b;
                     border-radius:8px; padding:5px 10px; font-size:11px;
                     cursor:pointer; transition:border-color .15s,color .15s; width:100%; }
    .pc-expand-btn:hover   { border-color:#60a5fa; color:#60a5fa; }
    .pc-expand-btn.loading { color:#475569; cursor:wait; }
    .pc-dbg-btn   { background:none; border:1px solid #334155; color:#64748b;
                    border-radius:8px; padding:5px 10px; font-size:11px; cursor:pointer; width:100%; }
    .pc-dbg-btn:hover { border-color:#475569; color:#94a3b8; }
    .pc-expanded  { padding:10px; border-top:1px solid #1e3a5f; display:flex; flex-direction:column; gap:10px; }
    .pc-madar-overlay { margin:0 10px 6px; padding:8px 10px; background:#0f172a;
                        border:1px solid #1e3a5f; border-radius:8px; }
    .pc-badge-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:5px; }
    .pc-reason    { font-size:11px; color:#94a3b8; line-height:1.5; }

    /* ── Keyword pills (Phase 7.0B) ──────────────────────────── */
    .kw-section   { margin-top: 16px; border-top: 1px solid #1e3a5f; padding-top: 16px; }
    .kw-canonical { font-size: 11px; color: #64748b; margin-bottom: 12px; }
    .kw-canonical strong { color: #e2e8f0; font-size: 13px; }
    .kw-groups    { display: flex; flex-wrap: wrap; gap: 14px; }
    .kw-group     { flex: 1 1 180px; }
    .kw-group-lbl { font-size: 9px; font-weight: 700; color: #64748b;
                    text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px; }
    .kw-pills     { display: flex; flex-wrap: wrap; gap: 5px; }
    .kw-pill      { font-size: 11px; padding: 3px 9px; border-radius: 20px;
                    border: 1px solid transparent; white-space: nowrap; }
    .kw-pill-primary   { background: #0f2d4a; border-color: #1e3a5f; color: #7dd3fc; }
    .kw-pill-secondary { background: #1e293b; border-color: #334155;  color: #94a3b8; }
    .kw-pill-negative  { background: #2d0a0a; border-color: #450a0a;  color: #fca5a5; }
    /* ── Marketplace Search (Phase 7.0C) ─────────────────────── */
    .ks-section   { margin-top: 16px; border-top: 1px solid #1e3a5f; padding-top: 16px; }
    .ks-status    { font-size: 12px; color: #7dd3fc; margin-bottom: 10px; display: flex;
                    align-items: center; gap: 8px; }
    .ks-status .spinner { width: 12px; height: 12px; border-width: 2px; }
    .ks-stats     { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
    .ks-stat      { background: #1e293b; border-radius: 6px; padding: 6px 12px;
                    font-size: 11px; color: #94a3b8; }
    .ks-stat strong { color: #e2e8f0; }
    .ks-neg-hdr   { font-size: 9px; font-weight: 700; color: #64748b; text-transform: uppercase;
                    letter-spacing: .07em; margin-bottom: 6px; }
    .ks-neg-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
    /* Marketplace search grid — mobile-first */
    .ks-grid      { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    @media (min-width: 480px)  { .ks-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
    @media (min-width: 768px)  { .ks-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1024px) { .ks-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 1280px) { .ks-grid { grid-template-columns: repeat(5, 1fr); } }
    .ks-card      { background: #1e293b; border: 1px solid #334155; border-radius: 10px;
                    overflow: hidden; display: flex; flex-direction: column;
                    transition: border-color .2s; }
    .ks-card:hover { border-color: #3b82f6; }
    .ks-card-img  { width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
                    background: #0f172a; }
    .ks-card-body { padding: 8px 10px 10px; flex: 1; display: flex;
                    flex-direction: column; gap: 4px; }
    .ks-card-title { font-size: 11px; color: #cbd5e1; line-height: 1.4;
                     display: -webkit-box; -webkit-line-clamp: 2;
                     -webkit-box-orient: vertical; overflow: hidden; }
    .ks-card-price { font-size: 14px; font-weight: 700; color: #ef4444; }
    .ks-card-meta  { display: flex; justify-content: space-between; align-items: center;
                     margin-top: auto; padding-top: 4px; }
    .ks-card-rate  { font-size: 10px; color: #fbbf24; }
    .ks-card-kw    { font-size: 9px; padding: 2px 6px; border-radius: 10px;
                     border: 1px solid; white-space: nowrap; }
    .ks-card-kw.primary   { background: #0f2d4a; border-color: #1e3a5f; color: #7dd3fc; }
    .ks-card-kw.secondary { background: #1e293b; border-color: #334155;  color: #64748b; }
    .ks-empty     { font-size: 12px; color: #64748b; text-align: center; padding: 20px; }
    /* ── Aggregation debug panel (Phase 7.0D-R) ──────────────── */
    .agg-panel    { background: #0f172a; border: 1px solid #1e3a5f; border-radius: 10px;
                    padding: 14px; margin-bottom: 14px; }
    .agg-hdr      { font-size: 9px; font-weight: 700; color: #64748b; text-transform: uppercase;
                    letter-spacing: .07em; margin-bottom: 10px; }
    .agg-row      { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
    .agg-metric   { background: #1e293b; border-radius: 6px; padding: 8px 14px;
                    text-align: center; flex: 1 1 120px; }
    .agg-metric-val  { font-size: 22px; font-weight: 700; color: #7dd3fc; }
    .agg-metric-lbl  { font-size: 9px; color: #64748b; margin-top: 2px;
                       text-transform: uppercase; letter-spacing: .05em; }
    .agg-kw-table    { width: 100%; border-collapse: collapse; font-size: 11px; }
    .agg-kw-table th { color: #64748b; font-weight: 600; text-align: left;
                       padding: 4px 8px; border-bottom: 1px solid #1e293b; }
    .agg-kw-table td { color: #94a3b8; padding: 4px 8px; border-bottom: 1px solid #0f172a; }
    .agg-kw-table td:last-child { color: #e2e8f0; font-weight: 600; text-align: right; }
    .agg-badge-kw  { font-size: 9px; padding: 1px 5px; border-radius: 8px;
                     background: #1e3a5f; color: #7dd3fc; margin-right: 3px; }
    .agg-badge-kw.secondary { background: #1e293b; color: #64748b; }
    /* card state overrides */
    .ks-card.ks-selected   { border-color: #3b82f6; box-shadow: 0 0 0 2px #3b82f633; }
    /* ks-deselected intentionally NOT disabled — free re-selection (Phase 7.0G) */
    .ref7-meta    { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .ref7-meta-tag{ font-size: 10px; padding: 2px 8px; border-radius: 8px;
                    background: #1e293b; color: #94a3b8; border: 1px solid #334155; }
    .ref7-meta-tag.kw { background: #0f2d4a; color: #7dd3fc; border-color: #1e3a5f; }
    .ref7-meta-tag.dup{ background: #1e1b4b; color: #a5b4fc; border-color: #312e81; }
    .ks-card-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
    .ks-view-link   { font-size: 10px; color: #64748b; text-decoration: none;
                      padding: 3px 6px; border: 1px solid #334155; border-radius: 4px; }
    .ks-view-link:hover { color: #94a3b8; }
    .ks-sel-btn     { flex: 1; font-size: 10px; padding: 4px 8px;
                      background: #1e3a5f; border: 1px solid #3b82f6;
                      color: #7dd3fc; border-radius: 6px; cursor: pointer;
                      transition: background .15s; }
    .ks-sel-btn:hover { background: #1d4ed8; color: #fff; }
    .ks-sel-btn.selected  { background: #3b82f6; color: #fff; }
    /* ── Reference Summary (Phase 7.0D) ────────────────────────── */
    .ref7-panel   { margin-top: 14px; background: #0f2d4a; border: 1px solid #3b82f6;
                    border-radius: 12px; padding: 16px; }
    .ref7-hdr     { font-size: 11px; font-weight: 700; color: #86efac; margin-bottom: 12px;
                    display: flex; align-items: center; gap: 6px; }
    .ref7-body    { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
    .ref7-img     { width: 80px; height: 80px; object-fit: cover; border-radius: 8px;
                    flex-shrink: 0; background: #0f172a; }
    .ref7-info    { flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .ref7-title   { font-size: 12px; color: #e2e8f0; line-height: 1.45; }
    .ref7-price   { font-size: 18px; font-weight: 700; color: #ef4444; }
    .ref7-pid     { font-size: 10px; color: #64748b; font-family: monospace; }
    .ref7-hint    { font-size: 10px; color: #475569; margin-bottom: 8px; }
    .ref7-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .ref7-url     { font-size: 10px; color: #475569; word-break: break-all;
                    margin-top: 6px; padding-top: 6px; border-top: 1px solid #1e3a5f; }
    /* ── Candidate Quality Validation (Phase 7.0F) ──────────── */
    .cq-panel     { background: #0f172a; border: 1px solid #134e4a; border-radius: 10px;
                    padding: 14px; margin-bottom: 14px; }
    .cq-hdr       { font-size: 9px; font-weight: 700; color: #2dd4bf; text-transform: uppercase;
                    letter-spacing: .07em; margin-bottom: 10px; }
    .cq-summary   { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
    .cq-metric    { background: #042f2e; border-radius: 6px; padding: 7px 12px;
                    text-align: center; flex: 1 1 100px; }
    .cq-metric-val{ font-size: 20px; font-weight: 700; color: #2dd4bf; }
    .cq-metric-lbl{ font-size: 9px; color: #0d9488; margin-top: 2px;
                    text-transform: uppercase; letter-spacing: .05em; }
    .cq-bars      { display: flex; flex-direction: column; gap: 5px; }
    .cq-bar-row   { display: flex; align-items: center; gap: 8px; font-size: 11px; }
    .cq-bar-lbl   { width: 60px; color: #94a3b8; }
    .cq-bar-track { flex: 1; background: #042f2e; border-radius: 4px; height: 8px; overflow: hidden; }
    .cq-bar-fill  { height: 100%; border-radius: 4px; }
    .cq-bar-fill.high   { background: #16a34a; }
    .cq-bar-fill.medium { background: #d97706; }
    .cq-bar-fill.low    { background: #dc2626; }
    .cq-bar-num   { width: 30px; text-align: right; color: #64748b; font-size: 10px; }
    /* confidence badges (card + panel) */
    .conf-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px;
                  border: 1px solid; letter-spacing: .03em; flex-shrink: 0; }
    .conf-badge.HIGH   { background: #14532d; color: #86efac; border-color: #166534; }
    .conf-badge.MEDIUM { background: #451a03; color: #fcd34d; border-color: #92400e; }
    .conf-badge.LOW    { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
    /* ── Near-Duplicate Detection (Phase 7.0E) ──────────────── */
    .dup-panel    { background: #0f172a; border: 1px solid #312e81; border-radius: 10px;
                    padding: 14px; margin-bottom: 14px; }
    .dup-hdr      { font-size: 9px; font-weight: 700; color: #818cf8; text-transform: uppercase;
                    letter-spacing: .07em; margin-bottom: 10px; }
    .dup-summary  { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .dup-metric   { background: #1e1b4b; border-radius: 6px; padding: 7px 12px;
                    text-align: center; flex: 1 1 100px; }
    .dup-metric-val { font-size: 20px; font-weight: 700; color: #a5b4fc; }
    .dup-metric-lbl { font-size: 9px; color: #4338ca; margin-top: 2px;
                      text-transform: uppercase; letter-spacing: .05em; }
    .dup-cluster-list { display: flex; flex-direction: column; gap: 6px; }
    .dup-cluster  { background: #1e1b4b; border: 1px solid #312e81; border-radius: 7px;
                    padding: 8px 10px; }
    .dup-cluster-hdr { font-size: 10px; color: #818cf8; font-weight: 600; margin-bottom: 5px;
                       display: flex; align-items: center; gap: 8px; }
    .dup-score-badge { background: #312e81; color: #a5b4fc; font-size: 9px;
                       padding: 1px 6px; border-radius: 8px; }
    .dup-pid-list { display: flex; flex-direction: column; gap: 3px; }
    .dup-pid-row  { font-size: 10px; color: #6366f1; display: flex; gap: 6px; align-items: flex-start; }
    .dup-pid-id   { font-family: monospace; color: #4338ca; flex-shrink: 0; }
    .dup-pid-title{ color: #818cf8; line-height: 1.3; }
    /* card cluster badge */
    .ks-dup-badge { font-size: 9px; padding: 1px 5px; border-radius: 8px;
                    background: #1e1b4b; color: #a5b4fc; border: 1px solid #312e81; }

    /* ── Input card — Mobile First ───────────────────────────── */
    .input-card { background: var(--c-surface); border: 1px solid var(--c-border);
                  border-radius: var(--r-xl); padding: var(--sp-4); margin-bottom: var(--sp-4); }
    @media (min-width: 768px) { .input-card { padding: 20px; } }

    /* Default: stack vertically on mobile */
    .input-row { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
    /* 480px+: side by side */
    @media (min-width: 480px) { .input-row { flex-direction: row; gap: 10px; } }

    .url-input { flex: 1; background: var(--c-bg); border: 1.5px solid var(--c-border);
                 border-radius: var(--r-md); padding: 10px 14px;
                 font-size: var(--text-base); font-family: monospace;
                 color: var(--c-text-2); outline: none; transition: border-color .15s; }
    .url-input:focus { border-color: var(--c-accent-light); }
    .url-input::placeholder { color: var(--c-text-dim); }

    /* Default: buttons stacked vertically on mobile, full width */
    .btn-row { display: flex; flex-direction: column; gap: var(--sp-2); }
    /* 480px+: buttons wrap in a row */
    @media (min-width: 480px) { .btn-row { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); } }

    .btn { background: var(--c-accent); color: #fff; border: none; border-radius: var(--r-md);
           padding: 10px 16px; font-size: var(--text-base); font-weight: 700; cursor: pointer;
           white-space: nowrap; transition: background .15s, opacity .15s;
           display: flex; align-items: center; justify-content: center; gap: 7px;
           min-height: 44px; /* touch target */ width: 100%; }
    /* 480px+: auto width */
    @media (min-width: 480px) { .btn { width: auto; padding: 9px 18px; } }
    .btn:hover:not(:disabled) { background: #1d4ed8; }
    .btn:disabled { opacity: .35; cursor: not-allowed; }
    .btn.secondary { background: var(--c-bg); border: 1.5px solid var(--c-border); color: var(--c-text-muted); }
    .btn.secondary:hover:not(:disabled) { border-color: var(--c-accent-light); color: var(--c-accent-light); }
    .btn.gpt-btn { background: var(--c-purple); }
    .btn.gpt-btn:hover:not(:disabled) { background: #6d28d9; }
    .spinner { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.3);
               border-top-color: #fff; border-radius: 50%;
               animation: spin .7s linear infinite; display: none; }
    .btn.loading .spinner { display: block; }
    .btn.loading .btn-text { display: none; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Alert ───────────────────────────────────────────────── */
    .alert { display: none; border-radius: 8px; padding: 11px 16px; font-size: 13px;
             margin-bottom: 14px; align-items: flex-start; gap: 10px; }
    .alert.visible { display: flex; }
    .alert.error   { background: #450a0a44; color: #fca5a5; border: 1px solid #7f1d1d; }
    .alert.loading { background: #1e3a5f44; color: #93c5fd; border: 1px solid #1e40af; }
    .alert-icon  { flex-shrink: 0; font-size: 15px; margin-top: 1px; }
    .alert-title { font-weight: 700; margin-bottom: 2px; }
    .alert-desc  { opacity: .75; font-size: 12px; }

    /* ── Progress bar ────────────────────────────────────────── */
    .progress-box { background: #1e293b; border: 1px solid #4c1d95; border-radius: 10px;
                    padding: 14px 18px; margin-bottom: 14px; display: none; }
    .progress-box.visible { display: block; }
    .progress-label { font-size: 12px; color: #a78bfa; margin-bottom: 8px; font-weight: 600; }
    .progress-bar-wrap { background: #0f172a; border-radius: 20px; height: 6px; overflow: hidden; }
    .progress-bar { background: #7c3aed; height: 100%; border-radius: 20px;
                    transition: width .4s ease; width: 0%; }
    .progress-detail { font-size: 11px; color: #6d28d9; margin-top: 6px; }

    /* ── Reference card ──────────────────────────────────────── */
    .ref-card { background: #1e293b; border: 1px solid #334155; border-radius: 14px;
                overflow: hidden; display: none; margin-bottom: 14px; }
    .ref-card.visible { display: block; }
    /* Default: image above info on mobile */
    .rp-top { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
    /* 480px+: image beside info */
    @media (min-width: 480px) { .rp-top { flex-direction: row; gap: 20px; padding: 18px; } }

    .rp-image-wrap { width: 100px; height: 100px; flex-shrink: 0; border-radius: var(--r-md);
                     border: 1px solid var(--c-border); background: var(--c-bg);
                     display: flex; align-items: center; justify-content: center; overflow: hidden;
                     align-self: flex-start; }
    .rp-image { width: 100%; height: 100%; object-fit: contain; }
    .rp-no-image { font-size: 28px; }
    .rp-info { flex: 1; min-width: 0; }
    .rp-id { display: inline-block; font-size: 10px; font-weight: 700; color: #60a5fa;
              background: #1e3a5f55; border: 1px solid #1e40af; border-radius: 20px;
              padding: 2px 9px; font-family: monospace; margin-bottom: 7px; }
    .rp-title { font-size: 13px; font-weight: 700; color: #f1f5f9; margin-bottom: 6px; line-height: 1.4; }
    .rp-meta  { font-size: 12px; color: #64748b; }
    .rp-meta strong { color: #94a3b8; }

    /* ── Section dividers ────────────────────────────────────── */
    .flow-arrow { text-align: center; padding: 8px 0; font-size: 18px; color: #334155;
                  display: none; }
    .flow-arrow.visible { display: block; }

    /* ── Candidate flat grid (pre-GPT) ───────────────────────── */
    .flat-section { display: none; }
    .flat-section.visible { display: block; }
    .flat-header { display: flex; align-items: center; justify-content: space-between;
                   margin-bottom: 10px; }
    .count-badge { font-size: 11px; color: #64748b; background: #1e293b;
                   border: 1px solid #334155; border-radius: 20px; padding: 2px 10px; }
    .candidates-grid { display: grid;
                       grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }

    /* ── GPT groups section ──────────────────────────────────── */
    .gpt-groups { display: none; }
    .gpt-groups.visible { display: block; }
    .group-section { margin-bottom: 28px; }
    .group-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
                    padding: 10px 14px; border-radius: 10px; }
    .group-SAME_PRODUCT        { background: #14532d22; border: 1px solid #14532d; }
    .group-ALTERNATIVE_PRODUCT { background: #1e3a5f22; border: 1px solid #1e3a5f; }
    .group-UNRELATED           { background: #27272a22; border: 1px solid #3f3f46; }
    .group-UNAVAILABLE         { background: #451a0322; border: 1px solid #92400e; }
    .group-badge { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
    .group-badge-SAME_PRODUCT        { color: #86efac; }
    .group-badge-ALTERNATIVE_PRODUCT { color: #7dd3fc; }
    .group-badge-UNRELATED           { color: #a1a1aa; }
    .group-badge-UNAVAILABLE         { color: #fdba74; }
    .group-desc { font-size: 11px; flex: 1; }
    .group-desc-SAME_PRODUCT        { color: #4ade80; }
    .group-desc-ALTERNATIVE_PRODUCT { color: #38bdf8; }
    .group-desc-UNRELATED           { color: #71717a; }
    .group-desc-UNAVAILABLE         { color: #d97706; }
    .group-count { font-size: 11px; background: #0f172a; border: 1px solid #334155;
                   border-radius: 20px; padding: 2px 10px; color: #64748b; }
    .group-grid { display: grid;
                  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
    .group-empty { font-size: 12px; color: #475569; padding: 12px 0;
                   font-style: italic; }

    /* ── Candidate / group cards ─────────────────────────────── */
    .cand-card { background: #1e293b; border: 1px solid #334155; border-radius: 10px;
                 overflow: hidden; transition: border-color .15s; }
    .cand-card:hover { border-color: #475569; }
    .cand-img-wrap { width: 100%; aspect-ratio: 1; background: #0f172a;
                     display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .cand-img { width: 100%; height: 100%; object-fit: contain; }
    .cand-no-img { font-size: 26px; }
    .cand-body { padding: 9px 10px; }
    .cand-rank { font-size: 10px; font-weight: 700; color: #475569; background: #0f172a;
                 border-radius: 4px; padding: 1px 5px; display: inline-block; margin-bottom: 3px; }
    .cand-title { font-size: 11px; color: #cbd5e1; line-height: 1.4; margin-bottom: 5px;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                  overflow: hidden; }
    .cand-price { font-size: 12px; font-weight: 700; color: #f87171; margin-bottom: 3px; }
    .cand-store { font-size: 10px; color: #64748b; margin-bottom: 5px; }
    .cand-price-lbl { font-size: 9px; color: #64748b; text-transform: uppercase;
                      letter-spacing: .05em; margin-bottom: 1px; }

    /* ── Landed cost block on cards ──────────────────────────── */
    .cand-landed      { padding: 5px 10px 8px; border-top: 1px solid #0f172a; min-height: 22px; }
    .lc-breakdown     { font-size: 10px; color: #475569; white-space: nowrap;
                        overflow: hidden; text-overflow: ellipsis; }
    .lc-breakdown b   { color: #94a3b8; }
    .lc-free          { color: #86efac; font-weight: 600; }
    .lc-unk-badge     { font-size: 9px; font-weight: 600; color: #f59e0b;
                        background: #78350f22; border: 1px solid #78350f44;
                        padding: 1px 6px; border-radius: 4px; }
    .lc-loading       { font-size: 10px; color: #475569; font-style: italic; }

    /* ── Shipping Coverage block (Phase 6.2D) ─────────────────── */
    .cv-block      { background: #1e293b; border: 1px solid #334155; border-radius: 10px;
                     padding: 14px 18px; margin-bottom: 12px; display: none; }
    .cv-block.visible { display: block; }
    .cv-title      { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase;
                     letter-spacing: .08em; margin-bottom: 10px; }
    .cv-grid       { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
    .cv-item       { display: flex; align-items: center; gap: 6px; }
    .cv-badge      { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
                     text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
    .cv-avail      { background: #14532d33; color: #86efac; }
    .cv-local      { background: #78350f33; color: #fbbf24; }
    .cv-noskus     { background: #1e293b;   color: #64748b; border: 1px solid #334155; }
    .cv-error      { background: #450a0a33; color: #fca5a5; }
    .cv-unknown    { background: #1e293b;   color: #64748b; border: 1px solid #334155; }
    .cv-count      { font-size: 13px; font-weight: 700; color: #f1f5f9; }
    .cv-rate-row   { font-size: 11px; color: #94a3b8; display: flex; align-items: center;
                     flex-wrap: wrap; gap: 6px; }
    .cv-rate       { font-weight: 700; color: #60a5fa; }
    .cv-prog       { font-size: 10px; color: #475569; font-style: italic; }
    /* ── Filter Foundation block (Phase 6.6) ────────────────── */
    .ff-block      { background: #1e293b; border: 1px solid #334155; border-radius: 10px;
                     padding: 14px 18px; margin-bottom: 12px; display: none; }
    .ff-block.visible { display: block; }
    .ff-hdr        { display: flex; align-items: center; justify-content: space-between;
                     margin-bottom: 10px; }
    .ff-title      { font-size: 11px; font-weight: 700; color: #64748b;
                     text-transform: uppercase; letter-spacing: .08em; }
    .ff-meta       { font-size: 10px; color: #475569; font-style: italic; }
    .ff-attrs      { display: flex; flex-wrap: wrap; gap: 12px 20px; }
    .ff-attr       { min-width: 120px; }
    .ff-attr-name  { font-size: 10px; font-weight: 700; color: #94a3b8;
                     text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
    .ff-vals       { display: flex; flex-direction: column; gap: 3px; }
    .ff-val        { font-size: 11px; color: #e2e8f0; display: flex;
                     align-items: center; gap: 5px; }
    .ff-val::before { content: '├─'; color: #334155; font-size: 9px; }
    .ff-val:last-child::before { content: '└─'; color: #334155; font-size: 9px; }
    .ff-val-txt    { flex: 1; }
    .ff-val-cnt    { font-size: 10px; font-weight: 700; color: #64748b;
                     background: #0f172a; border-radius: 3px; padding: 1px 5px; }
    .ff-empty      { font-size: 11px; color: #475569; font-style: italic; }

    /* ── Deliverability filter row (Phase 6.4B) ──────────────── */
    .deliv-row     { display: flex; align-items: center; justify-content: space-between;
                     margin-top: 8px; flex-wrap: wrap; gap: 8px;
                     padding-top: 8px; border-top: 1px solid #1e3a5f; }
    .deliv-counts  { display: flex; gap: 14px; flex-wrap: wrap; }
    .deliv-item    { font-size: 11px; font-weight: 600; }
    .deliv-ok      { color: #86efac; }
    .deliv-unk     { color: #94a3b8; }
    .deliv-fil     { color: #fca5a5; }
    .deliv-toggle-wrap { display: flex; align-items: center; gap: 6px; cursor: pointer; }
    .deliv-toggle-wrap input { cursor: pointer; accent-color: #2563eb; }
    .deliv-toggle-lbl  { font-size: 11px; color: #64748b; font-weight: 600;
                         text-transform: uppercase; letter-spacing: .04em; }
    /* ── Deliverability drawer badges ────────────────────────── */
    .dv-ok  { color: #86efac; font-weight: 700; }
    .dv-unk { color: #fbbf24; font-weight: 700; }
    .dv-no  { color: #fca5a5; font-weight: 700; }
    /* ── Variant pricing table (Phase 6.5) ──────────────────── */
    .vp-wrap   { overflow-x: auto; margin-top: 6px; border-radius: 6px;
                 border: 1px solid #1e3a5f; }
    .vp-table  { border-collapse: collapse; width: 100%; font-size: 11px; }
    .vp-th     { background: #0f172a; color: #64748b; font-weight: 700;
                 text-transform: uppercase; letter-spacing: .04em;
                 padding: 5px 8px; text-align: left; white-space: nowrap;
                 border-bottom: 1px solid #1e3a5f; }
    .vp-td     { padding: 5px 8px; border-bottom: 1px solid #0f172a; color: #cbd5e1; vertical-align: top; }
    .vp-td-total { color: #60a5fa; font-weight: 700; }
    .vp-td-sku   { color: #475569; font-size: 10px; font-family: monospace; }
    .vp-td-opt   { color: #e2e8f0; }
    .vp-row-cheap { background: #0d2137; }
    .vp-meta   { font-size: 10px; color: #475569; margin-top: 5px; font-style: italic; }

    /* ── GPT classification badges per card ──────────────────── */
    .gpt-card-section { border-top: 1px solid #0f172a; padding: 7px 10px; }
    .gpt-badge-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
                     flex-wrap: wrap; }
    .match-badge { font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 20px;
                   letter-spacing: .05em; text-transform: uppercase; }
    .match-SAME_PRODUCT        { background: #14532d; color: #86efac; }
    .match-ALTERNATIVE_PRODUCT { background: #1e3a5f; color: #7dd3fc; }
    .match-UNRELATED           { background: #27272a; color: #a1a1aa; }
    .match-null                { background: #1c1917; color: #57534e; }
    .conf-badge { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 20px;
                  letter-spacing: .03em; }
    .conf-HIGH   { background: #14532d55; color: #4ade80; border: 1px solid #14532d; }
    .conf-MEDIUM { background: #1e3a5f55; color: #93c5fd; border: 1px solid #1e3a5f; }
    .conf-LOW    { background: #27272a55; color: #a1a1aa; border: 1px solid #3f3f46; }
    .conf-null   { background: #1c1917; color: #57534e; border: 1px solid #292524; }
    .gpt-reason { font-size: 10px; color: #94a3b8; line-height: 1.5; }

    /* max-width:600px block removed — Phase 7.9A.
       All breakpoints now use min-width (mobile-first).
       .rp-top        → column default, row @480px+
       .input-row     → column default, row @480px+
       .btn-row       → column default, row @480px+
       .btn           → full-width default, auto @480px+
       .int-status-row→ hidden default, flex @768px+             */

    /* ════════════════════════════════════════════════════════════
       PHASE 7.9A — Foundation Components (mobile-first)
       Jobs Banner · Accordion · Bottom Sheet
       ════════════════════════════════════════════════════════════ */

    /* ── Jobs Banner ─────────────────────────────────────────── */
    /* Horizontal scrolling chip row for future Analysis Jobs.    */
    .jobs-banner {
      border-bottom: 1px solid var(--c-border);
      padding: var(--sp-2) 0;
      display: none;           /* hidden until job tracking is wired */
    }
    .jobs-banner.visible { display: block; }
    .jobs-scroll {
      display:                flex;
      gap:                    var(--sp-2);
      overflow-x:             auto;
      scroll-snap-type:       x mandatory;
      -webkit-overflow-scrolling: touch;
      padding:                0 var(--page-px);
      scrollbar-width:        none;       /* Firefox */
    }
    .jobs-scroll::-webkit-scrollbar { display: none; }
    .job-chip {
      flex-shrink:       0;
      scroll-snap-align: start;
      background:        var(--c-surface);
      border:            1.5px solid var(--c-border-accent);
      border-radius:     var(--r-pill);
      padding:           var(--sp-2) var(--sp-4);
      font-size:         var(--text-sm);
      font-weight:       600;
      color:             var(--c-text-muted);
      cursor:            pointer;
      white-space:       nowrap;
      transition:        border-color .15s, color .15s, background .15s;
      min-height:        36px;           /* touch target */
      display:           flex;
      align-items:       center;
      gap:               var(--sp-1);
    }
    .job-chip:hover, .job-chip.active {
      border-color: var(--c-accent);
      color:        var(--c-accent-light);
      background:   #1e3a5f44;
    }
    .job-chip-icon { font-size: 14px; }
    .job-chip-status {
      display:       inline-block;
      width:         6px; height: 6px;
      border-radius: 50%;
      background:    var(--c-text-dim);
    }
    .job-chip-status.running { background: var(--c-warning); animation: pulse 1.2s ease-in-out infinite; }
    .job-chip-status.done    { background: var(--c-success); }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

    /* ── Accordion ───────────────────────────────────────────── */
    /* Reusable, CSS-transitioned. Open via .accordion-item.open  */
    .accordion {
      border:        1px solid var(--c-border);
      border-radius: var(--r-lg);
      overflow:      hidden;
      margin-bottom: var(--sp-4);
    }
    .accordion-item { border-bottom: 1px solid var(--c-border); }
    .accordion-item:last-child { border-bottom: none; }
    .accordion-trigger {
      width:           100%;
      background:      var(--c-surface);
      border:          none;
      padding:         var(--sp-4);
      display:         flex;
      align-items:     center;
      justify-content: space-between;
      gap:             var(--sp-3);
      cursor:          pointer;
      text-align:      left;
      min-height:      48px;           /* touch target */
      color:           var(--c-text-2);
      font-size:       var(--text-md);
      font-weight:     600;
      transition:      background .15s;
    }
    .accordion-trigger:hover { background: #1e3a5f22; }
    .accordion-label { flex: 1; }
    .accordion-icon {
      font-size:  11px;
      color:      var(--c-text-subtle);
      transition: transform .25s ease;
      flex-shrink: 0;
    }
    .accordion-item.open .accordion-trigger { background: #1e3a5f22; }
    .accordion-item.open .accordion-icon { transform: rotate(180deg); }
    .accordion-body {
      overflow:   hidden;
      max-height: 0;
      transition: max-height .3s cubic-bezier(.4,0,.2,1);
      background: var(--c-bg);
    }
    .accordion-item.open .accordion-body { max-height: 3000px; }
    .accordion-content { padding: var(--sp-4); }

    /* ── Bottom Sheet ────────────────────────────────────────── */
    /* On mobile: slides up from bottom.
       On tablet+: renders as a centered modal instead.         */
    .bs-overlay {
      position:        fixed;
      inset:           0;
      background:      rgba(0,0,0,.65);
      z-index:         400;
      display:         none;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .bs-overlay.visible { display: block; }
    .bottom-sheet {
      position:   fixed;
      left:       0; right: 0; bottom: 0;
      background: var(--c-surface);
      border-top: 1px solid var(--c-border);
      border-radius: var(--r-2xl) var(--r-2xl) 0 0;
      z-index:    401;
      transform:  translateY(100%);
      transition: transform .32s cubic-bezier(.25,.46,.45,.94);
      max-height: 88vh;
      display:    flex;
      flex-direction: column;
    }
    .bottom-sheet.visible { transform: translateY(0); }

    /* Handle bar */
    .bs-handle {
      width:         40px; height: 4px;
      background:    var(--c-border);
      border-radius: 2px;
      margin:        var(--sp-3) auto var(--sp-1);
      flex-shrink:   0;
    }
    .bs-header {
      padding:         var(--sp-2) var(--sp-4) var(--sp-3);
      display:         flex;
      align-items:     center;
      justify-content: space-between;
      border-bottom:   1px solid var(--c-border);
      flex-shrink:     0;
    }
    .bs-title { font-size: var(--text-md); font-weight: 700; color: var(--c-text); }
    .bs-close {
      background:    none;
      border:        1px solid var(--c-border);
      border-radius: var(--r-sm);
      color:         var(--c-text-muted);
      cursor:        pointer;
      font-size:     15px;
      padding:       3px 10px;
      min-height:    36px;
      transition:    all .15s;
    }
    .bs-close:hover { border-color: #f43f5e; color: #f43f5e; }
    .bs-body {
      flex:       1;
      overflow-y: auto;
      padding:    var(--sp-4);
      -webkit-overflow-scrolling: touch;
    }

    /* Tablet+: center as modal */
    @media (min-width: 768px) {
      .bottom-sheet {
        left:           50%;
        right:          auto;
        bottom:         auto;
        top:            50%;
        transform:      translate(-50%, -50%) scale(.96);
        width:          min(600px, 90vw);
        border-radius:  var(--r-xl);
        border:         1px solid var(--c-border);
        max-height:     80vh;
        opacity:        0;
        pointer-events: none;
      }
      .bottom-sheet.visible {
        transform:      translate(-50%, -50%) scale(1);
        opacity:        1;
        pointer-events: auto;
      }
      .bs-handle { display: none; }
    }


/* === extracted from server.js L7443-7564 === */
    /* ── Debug Drawer ─────────────────────────────────────────── */
    .debug-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75);
                     z-index:200; display:none; backdrop-filter:blur(3px); }
    .debug-overlay.visible { display:block; }
    .debug-drawer  { position:fixed; right:0; top:0; bottom:0; width:680px; max-width:100vw;
                     background:#0f172a; border-left:1px solid #334155;
                     z-index:201; display:none; flex-direction:column;
                     transform:translateX(100%); transition:transform .25s ease; }
    .debug-drawer.visible { display:flex; transform:translateX(0); }
    .dbg-hd { display:flex; align-items:center; gap:10px;
              padding:14px 18px; border-bottom:1px solid #334155;
              background:#1e293b; flex-shrink:0; }
    .dbg-hd-title { font-size:13px; font-weight:700; color:#f1f5f9; flex:1; }
    .dbg-hd-pid   { font-size:10px; font-family:monospace; color:#60a5fa;
                    background:#1e3a5f55; border:1px solid #1e40af;
                    border-radius:20px; padding:2px 9px; }
    .dbg-close { background:none; border:1px solid #334155; border-radius:6px;
                 color:#94a3b8; cursor:pointer; font-size:15px; padding:3px 10px;
                 transition:all .15s; line-height:1; }
    .dbg-close:hover { border-color:#f43f5e; color:#f43f5e; }
    .dbg-loader { height:3px; flex-shrink:0; display:none;
                  background:linear-gradient(90deg,#7c3aed 0%,#60a5fa 50%,#7c3aed 100%);
                  background-size:200% 100%; animation:dbg-shimmer 1.4s linear infinite; }
    .dbg-loader.on { display:block; }
    @keyframes dbg-shimmer { to { background-position:-200% 0; } }
    .dbg-body  { flex:1; overflow-y:auto; padding:16px 18px 40px; }
    .dbg-sec   { margin-bottom:18px; }
    .dbg-sec-t { font-size:10px; font-weight:700; text-transform:uppercase;
                 letter-spacing:.1em; color:#475569; margin-bottom:8px;
                 padding-bottom:4px; border-bottom:1px solid #1e293b; }
    .dbg-tbl   { display:grid; grid-template-columns:140px 1fr; gap:4px 10px; }
    .dbg-lbl   { font-size:11px; color:#64748b; padding:2px 0; }
    .dbg-val   { font-size:11px; color:#e2e8f0; padding:2px 0;
                 font-family:monospace; word-break:break-all; }
    .dbg-val.na{ color:#334155; font-style:italic; }
    .dbg-val a { color:#60a5fa; text-decoration:none; }
    .dbg-val a:hover { text-decoration:underline; }
    /* shipping badges */
    .sh-badge  { font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px;
                 letter-spacing:.05em; display:inline-block; }
    .sh-AVAILABLE   { background:#14532d; color:#86efac; }
    .sh-UNKNOWN     { background:#713f12; color:#fcd34d; }
    .sh-UNAVAILABLE { background:#450a0a; color:#fca5a5; }
    .sh-reason { font-size:10px; font-family:monospace; color:#94a3b8;
                 background:#1e293b; border:1px solid #334155; border-radius:4px;
                 padding:2px 7px; display:inline-block; }
    /* gallery grid */
    .gal-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px; }
    .gal-wrap  { aspect-ratio:1; background:#1e293b; border:1px solid #334155;
                 border-radius:6px; overflow:hidden; cursor:pointer; position:relative;
                 transition:border-color .15s; }
    .gal-wrap:hover { border-color:#60a5fa; }
    .gal-img   { width:100%; height:100%; object-fit:contain; }
    .gal-idx   { position:absolute; bottom:3px; right:4px; font-size:9px;
                 background:rgba(0,0,0,.7); color:#94a3b8; border-radius:3px; padding:1px 4px; }
    /* variants */
    .vr-list   { display:flex; flex-direction:column; gap:5px; margin-top:6px; }
    .vr-row    { background:#1e293b; border:1px solid #334155; border-radius:6px;
                 padding:7px 10px; display:grid;
                 grid-template-columns:32px 1fr 70px 55px;
                 gap:6px; align-items:center; font-size:10px; }
    .vr-thumb  { width:28px; height:28px; border-radius:3px; object-fit:contain;
                 border:1px solid #334155; }
    .vr-sku    { font-family:monospace; color:#64748b; overflow:hidden;
                 text-overflow:ellipsis; white-space:nowrap; }
    .vr-name   { color:#cbd5e1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .vr-price  { color:#f87171; font-weight:700; }
    .vr-stock  { color:#64748b; text-align:right; }
    /* pills */
    .pill-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
    .pill      { font-size:10px; background:#1e293b; border:1px solid #334155;
                 border-radius:4px; padding:2px 7px; color:#94a3b8; }
    /* raw json */
    .raw-toggle { background:none; border:1px solid #334155; border-radius:5px;
                  color:#64748b; cursor:pointer; font-size:11px; padding:5px 12px;
                  transition:all .15s; margin-top:4px; }
    .raw-toggle:hover { border-color:#60a5fa; color:#60a5fa; }
    .raw-block  { display:none; margin-top:8px; background:#020617;
                  border:1px solid #1e3a5f; border-radius:6px; padding:12px;
                  font-family:monospace; font-size:10px; color:#7dd3fc;
                  white-space:pre; overflow-x:auto; line-height:1.6;
                  max-height:380px; overflow-y:auto; }
    .raw-block.on { display:block; }
    /* AliExpress link on candidate cards */
    .ae-link   { display:block; text-align:center; font-size:10px; color:#38bdf8;
                 text-decoration:none; padding:4px 0; margin-top:5px;
                 border-top:1px solid #0f172a; transition:color .15s; }
    .ae-link:hover { color:#7dd3fc; text-decoration:underline; }
    /* "View Details" button on candidate cards */
    .dbg-btn   { width:100%; margin-top:6px; padding:5px 0; background:none;
                 border:1px solid #334155; border-radius:5px; font-size:10px;
                 font-weight:600; color:#64748b; cursor:pointer; transition:all .15s; }
    .dbg-btn:hover { border-color:#60a5fa; color:#60a5fa; background:#1e3a5f22; }
    /* "View Details" button on reference card */
    .rp-dbg-btn { display:none; background:none; border:1px solid #334155;
                  border-radius:5px; color:#64748b; cursor:pointer; font-size:11px;
                  font-weight:600; padding:5px 12px; margin-top:8px; transition:all .15s; }
    .rp-dbg-btn:hover { border-color:#60a5fa; color:#60a5fa; background:#1e3a5f22; }
    /* Lightbox */
    .lbx       { position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:300;
                 display:none; align-items:center; justify-content:center; flex-direction:column; }
    .lbx.on    { display:flex; }
    .lbx-img   { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:8px; }
    .lbx-ctr   { margin-top:10px; font-size:12px; color:#64748b; }
    .lbx-close { position:absolute; top:18px; right:22px; background:none;
                 border:1px solid #334155; border-radius:6px; color:#94a3b8;
                 cursor:pointer; font-size:18px; padding:3px 11px; }
    .lbx-close:hover { border-color:#f43f5e; color:#f43f5e; }
    .lbx-nav   { position:absolute; top:50%; transform:translateY(-50%);
                 background:rgba(0,0,0,.5); border:1px solid #334155; border-radius:6px;
                 color:#94a3b8; cursor:pointer; font-size:22px; padding:8px 14px;
                 transition:all .15s; }
    .lbx-nav:hover { border-color:#60a5fa; color:#60a5fa; }
    .lbx-prev  { left:22px; }
    .lbx-next  { right:22px; }

    /* ═══════════════════════════════════════════════════════════════════════
       PHASE 10.2 — Figma Implementation (Concept A — Light Theme)
       Source of truth: Souq Madar Homepage Concepts Figma package
       Mobile-first · RTL-first · Cairo font · Orange-red accent #E54B00
       ═══════════════════════════════════════════════════════════════════════ */


/* === extracted from server.js L8270-8419 === */
    /* ── Benefits Section ─────────────────────────────────────────── */
    /* ATF-S3.2 Step 3: Benefits is well below the fold — defer render work */
    .hp2-benefits {
      background: #FFFFFF;
      padding: 48px 16px;
      content-visibility: auto;
      contain-intrinsic-size: auto 500px;
    }
    @media (min-width: 768px)  { .hp2-benefits { padding: 60px 24px; } }
    @media (min-width: 1280px) { .hp2-benefits { padding: 72px 40px; } }
    .hp2-benefits-inner { max-width: 1152px; margin: 0 auto; }
    .hp2-benefits-hdr   { text-align: center; margin-bottom: 40px; }
    .hp2-benefits-label {
      font-size: 12px; font-weight: 700; color: #E54B00;
      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
    }
    .hp2-benefits-title { font-size: 24px; font-weight: 800; color: #111; margin-bottom: 10px; }
    @media (min-width: 768px) { .hp2-benefits-title { font-size: 28px; } }
    .hp2-benefits-sub   { font-size: 15px; color: #666; max-width: 540px; margin: 0 auto; line-height: 1.7; }
    .hp2-benefits-grid  {
      display: grid; grid-template-columns: 1fr; gap: 14px;
    }
    @media (min-width: 480px)  { .hp2-benefits-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1024px) { .hp2-benefits-grid { grid-template-columns: repeat(3,1fr); } }
    .hp2-benefit-card {
      background: #FAFAFA; border: 1px solid rgba(0,0,0,0.07);
      border-radius: 16px; padding: 24px;
      display: flex; flex-direction: column; gap: 10px;
      transition: all 0.2s;
    }
    .hp2-benefit-card:hover {
      background: #FFFFFF;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-2px);
    }
    .hp2-benefit-icon {
      width: 48px; height: 48px; border-radius: 14px;
      background: linear-gradient(135deg, #FFF4F0, #FFE8E0);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; flex-shrink: 0;
    }
    .hp2-benefit-title { font-size: 15px; font-weight: 700; color: #111; }
    .hp2-benefit-desc  { font-size: 13px; color: #666; line-height: 1.65; }

    /* ── How Madar Works ──────────────────────────────────────────── */
    .hp2-steps { background: #F5F5F5; padding: 48px 16px; }
    @media (min-width: 768px)  { .hp2-steps { padding: 60px 24px; } }
    @media (min-width: 1280px) { .hp2-steps { padding: 72px 40px; } }
    .hp2-steps-inner { max-width: 1152px; margin: 0 auto; }
    .hp2-steps-hdr   { text-align: center; margin-bottom: 40px; }
    .hp2-steps-label { font-size: 12px; font-weight: 700; color: #E54B00;
                       text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
    .hp2-steps-title { font-size: 24px; font-weight: 800; color: #111; }
    @media (min-width: 768px) { .hp2-steps-title { font-size: 28px; } }
    .hp2-steps-grid  { display: grid; grid-template-columns: 1fr; gap: 14px; }
    @media (min-width: 768px)  { .hp2-steps-grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1280px) { .hp2-steps-grid { grid-template-columns: repeat(4,1fr); } }
    .hp2-step-card {
      background: #FFFFFF; border: 1px solid rgba(0,0,0,0.07);
      border-radius: 16px; padding: 24px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .hp2-step-num {
      width: 36px; height: 36px; background: #E54B00;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 800; color: #FFFFFF; flex-shrink: 0;
    }
    .hp2-step-icon  { font-size: 28px; line-height: 1; }
    .hp2-step-title { font-size: 15px; font-weight: 700; color: #111; }
    .hp2-step-desc  { font-size: 13px; color: #666; line-height: 1.65; }

    /* ── Analysis Preview Card ────────────────────────────────────── */
    .hp2-analysis-preview { background: #FFFFFF; padding: 48px 16px; }
    @media (min-width: 768px)  { .hp2-analysis-preview { padding: 60px 24px; } }
    @media (min-width: 1280px) { .hp2-analysis-preview { padding: 72px 40px; } }
    .hp2-analysis-preview-inner { max-width: 760px; margin: 0 auto; }
    .hp2-ap-hdr  { text-align: center; margin-bottom: 32px; }
    .hp2-ap-label { font-size: 12px; font-weight: 700; color: #E54B00;
                    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
    .hp2-ap-title { font-size: 22px; font-weight: 800; color: #111; margin-bottom: 8px; }
    .hp2-ap-sub   { font-size: 14px; color: #666; }
    .hp2-ap-card  {
      background: #FAFAFA; border: 1px solid rgba(0,0,0,0.08);
      border-radius: 20px; padding: 24px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    }
    .hp2-ap-example-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: #FEF3C7; border: 1px solid #FDE68A;
      border-radius: 999px; padding: 4px 12px;
      font-size: 11px; font-weight: 600; color: #92400E; margin-bottom: 18px;
    }
    .hp2-ap-product-row {
      display: flex; align-items: center; gap: 14px;
      padding-bottom: 16px; margin-bottom: 16px;
      border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .hp2-ap-product-img {
      width: 64px; height: 64px; border-radius: 12px;
      background: #F0F0F0; object-fit: contain; flex-shrink: 0;
    }
    .hp2-ap-product-name { font-size: 14px; font-weight: 700; color: #111; line-height: 1.35; }
    .hp2-ap-product-id   { font-size: 10px; color: #AAA; font-family: monospace; margin-top: 4px; }
    .hp2-ap-stats-row {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px;
    }
    @media (min-width: 480px) { .hp2-ap-stats-row { grid-template-columns: repeat(4,1fr); } }
    .hp2-ap-stat {
      text-align: center; padding: 12px 8px;
      background: #FFFFFF; border: 1px solid rgba(0,0,0,0.07); border-radius: 12px;
    }
    .hp2-ap-stat-val { font-size: 18px; font-weight: 800; color: #E54B00; line-height: 1; }
    .hp2-ap-stat-lbl { font-size: 10px; color: #888; margin-top: 4px; }
    .hp2-ap-verdict {
      display: flex; align-items: center; gap: 12px;
      background: #ECFDF5; border: 1px solid rgba(5,150,105,0.2);
      border-radius: 12px; padding: 14px 16px;
    }
    .hp2-ap-verdict-icon { font-size: 22px; flex-shrink: 0; }
    .hp2-ap-verdict-text { font-size: 13px; color: #065F46; font-weight: 600; line-height: 1.5; }

    /* ══════════════════════════════════════════════════════════
       FOOTER — Design C  (Senior Redesign)
       ══════════════════════════════════════════════════════════ */

    /* ── Base ──────────────────────────────────────────────── */
    .smf {
      background: #0D0D0D;
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 48px 20px 0;
      font-family: inherit;
    }
    @media (min-width: 768px)  { .smf { padding: 56px 28px 0; } }
    @media (min-width: 1280px) { .smf { padding: 64px 40px 0; } }
    .smf-inner { max-width: 1200px; margin: 0 auto; }

    /* ── Main grid ─────────────────────────────────────────── */
    .smf-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      padding-bottom: 36px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    @media (min-width: 768px) {
      .smf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 40px;
        padding-bottom: 44px;
      }
    }
    @media (min-width: 1024px) {
      .smf-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
        gap: 0 48px;
        align-items: start;
        padding-bottom: 52px;
      }
    }

    /* ── Brand column ──────────────────────────────────────── */
    .smf-brand {
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      margin-bottom: 4px;
    }
    @media (min-width: 768px) {
      .smf-brand {
        grid-column: span 2;
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
      }
    }
    @media (min-width: 1024px) {
      .smf-brand { grid-column: 1; padding-inline-end: 40px; border-inline-end: 1px solid rgba(255,255,255,0.07); }
    }
    .smf-logo {
      font-size: 22px; font-weight: 800; color: #fff;
      letter-spacing: -.01em; margin-bottom: 10px;
      display: flex; align-items: center; gap: 6px;
    }
    .smf-logo-icon { color: #E54B00; }
    .smf-logo span { color: #E54B00; }
    .smf-desc {
      font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.7;
      max-width: 280px; margin-bottom: 20px;
    }
    /* Social icons */
    .smf-socials { display: flex; gap: 8px; flex-wrap: wrap; }
    .smf-soc {
      display: flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.55); transition: background .18s, color .18s, border-color .18s;
      flex-shrink: 0; text-decoration: none;
    }
    .smf-soc svg { width: 14px; height: 14px; }
    .smf-soc:hover { background: rgba(229,75,0,0.2); color: #FF8A5B; border-color: rgba(229,75,0,0.35); }

    /* ── Link columns ──────────────────────────────────────── */
    .smf-col { padding: 0; }
    @media (min-width: 1024px) { .smf-col { padding-inline-start: 0; } }

    /* Column title — doubles as accordion toggle on mobile */
    .smf-col-title {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; background: none; border: none; outline: none;
      text-align: inherit; cursor: pointer;
      font-size: 11px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: #FFFFFF;
      padding: 14px 0; margin: 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      transition: color .15s;
    }
    @media (min-width: 768px) {
      .smf-col-title {
        padding: 0 0 14px; border-bottom: 1px solid rgba(255,255,255,0.1);
        cursor: default; pointer-events: none;
        font-size: 11px;
      }
    }
    .smf-col-title-caret {
      width: 14px; height: 14px; color: rgba(255,255,255,0.35);
      transition: transform .22s ease; flex-shrink: 0;
    }
    .smf-col-title.smf-open .smf-col-title-caret { transform: rotate(180deg); }
    @media (min-width: 768px) { .smf-col-title-caret { display: none; } }

    /* Links list */
    .smf-links {
      list-style: none; padding: 0; margin: 0;
      display: none; /* collapsed by default on mobile */
      padding-top: 8px;
    }
    @media (min-width: 768px) { .smf-links { display: block !important; padding-top: 14px; } }
    .smf-links.smf-open { display: block; }
    .smf-links li { padding: 5px 0; }
    .smf-link {
      font-size: 13px; color: rgba(255,255,255,0.5);
      text-decoration: none; transition: color .15s;
      display: inline-block;
    }
    .smf-link:hover { color: #FF8A5B; }

    /* ── Contact column ────────────────────────────────────── */
    .smf-contact-list { list-style: none; padding: 0; margin: 0; padding-top: 14px; }
    .smf-contact-list li {
      display: flex; align-items: flex-start; gap: 9px;
      padding: 5px 0; font-size: 13px; color: rgba(255,255,255,0.5);
    }
    .smf-contact-list a {
      color: rgba(255,255,255,0.5); text-decoration: none; transition: color .15s;
    }
    .smf-contact-list a:hover { color: #FF8A5B; }
    .smf-contact-icon {
      width: 16px; height: 16px; color: #E54B00;
      flex-shrink: 0; margin-top: 1px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .smf-contact-icon svg { width: 15px; height: 15px; }

    /* ── Locale selector row ───────────────────────────────── */
    .smf-locale-row {
      display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center;
      padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .smf-locale-label {
      font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.3);
      text-transform: uppercase; letter-spacing: .06em;
    }
    .smf-locale-sel {
      padding: 4px 10px; font-size: 12px; border-radius: 6px;
      background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65);
      border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
      font-family: inherit;
    }
    .smf-locale-sel:focus { outline: 1px solid rgba(229,75,0,0.5); }
    .smf-locale-sel option { background: #1a1a2e; color: #fff; }

    /* ── Bottom bar ────────────────────────────────────────── */
    .smf-bottom {
      display: flex; flex-direction: column; gap: 10px;
      padding: 18px 0 20px; align-items: flex-start;
    }
    @media (min-width: 768px) {
      .smf-bottom {
        flex-direction: row; align-items: center; justify-content: space-between;
      }
    }
    .smf-copy { font-size: 12px; color: rgba(255,255,255,0.28); }
    .smf-bottom-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
    .smf-bottom-link {
      font-size: 12px; color: rgba(255,255,255,0.28); text-decoration: none; transition: color .15s;
    }
    .smf-bottom-link:hover { color: #FF8A5B; }
    .smf-admin-link {
      font-size: 11px; color: rgba(255,255,255,0.18); text-decoration: none; transition: color .15s;
    }
    .smf-admin-link:hover { color: #E54B00; }

    /* ── RTL adjustments ───────────────────────────────────── */
    html[dir=rtl] .smf-logo     { flex-direction: row-reverse; justify-content: flex-end; }
    html[dir=rtl] .smf-socials  { flex-direction: row-reverse; }
    html[dir=rtl] .smf-bottom   { flex-direction: column; }
    @media (min-width: 768px) {
      html[dir=rtl] .smf-bottom { flex-direction: row-reverse; }
    }
    html[dir=rtl] .smf-contact-list li { flex-direction: row-reverse; }
    html[dir=rtl] .smf-locale-row { flex-direction: row-reverse; }

    /* ── Legacy classes (keep so inline server.js styles don't break) ── */
    .hp2-footer { display: none; }
    .hp2-footer-inner, .hp2-footer-top, .hp2-footer-brand,
    .hp2-footer-links, .hp2-footer-cx-row, .hp2-footer-bottom { display: none; }


/* === extracted from server.js L8483-8588 === */
    /* ══ PHASE 10.3 — Live Analysis Banner ═══════════════════════════ */
    #liveBanner {
      /* sticky — lives in normal flow so it naturally pushes the hero down
         (no padding-push hack needed) and sticks right under the header
         when the user scrolls. Avoids all z-index stacking-context conflicts
         with .hp2-hero (position:relative overflow:hidden). */
      position: sticky;
      top: var(--header-h);
      z-index: 95;          /* below header(100), above hero-inner(1) */
      width: 100%;
      background: linear-gradient(135deg, #1C0800 0%, #2E1400 60%, #1a0000 100%);
      border-bottom: 2px solid #E54B00;
      padding: 10px 16px;
      display: none; /* shown via .active */
      flex-direction: column; gap: 6px;
      box-shadow: 0 4px 20px rgba(229,75,0,0.25);
      transition: opacity 0.3s;
    }
    #liveBanner.active { display: flex; }
    .lb-top {
      display: flex; align-items: center; gap: 10px;
    }
    .lb-stage-icon { font-size: 18px; flex-shrink: 0; }
    .lb-stage-label {
      font-size: 13px; font-weight: 700; color: #FF9B6B; flex: 1;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .lb-pct {
      font-size: 13px; font-weight: 800; color: #FF6B2B;
      flex-shrink: 0; min-width: 40px; text-align: end;
    }
    .lb-close {
      background: none; border: none; color: rgba(255,255,255,0.4);
      font-size: 14px; cursor: pointer; padding: 2px 6px;
      flex-shrink: 0; transition: color 0.2s;
    }
    .lb-close:hover { color: #FF6B2B; }
    .lb-bar-track {
      height: 4px; background: rgba(255,255,255,0.12);
      border-radius: 4px; overflow: hidden;
    }
    .lb-bar-fill {
      height: 4px; border-radius: 4px;
      background: linear-gradient(90deg, #E54B00, #FF9B6B);
      transition: width 0.6s ease; width: 0%;
    }
    .lb-product {
      display: none; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.05); border-radius: 8px; padding: 6px 10px;
    }
    .lb-product.visible { display: flex; }
    .lb-product-img {
      width: 32px; height: 32px; object-fit: cover;
      border-radius: 6px; flex-shrink: 0;
    }
    .lb-product-name {
      font-size: 11px; color: rgba(255,255,255,0.75);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
    }
    .lb-ref-badge {
      font-size: 9px; font-weight: 700; color: #E54B00;
      background: rgba(229,75,0,0.2); border: 1px solid rgba(229,75,0,0.4);
      border-radius: 4px; padding: 1px 5px; flex-shrink: 0;
    }
    /* Phase 10.5B — "View Analysis" action row */
    .lb-action {
      display: none; align-items: center; justify-content: center;
      padding-top: 4px;
    }
    .lb-action.visible { display: flex; }
    .lb-action-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: linear-gradient(135deg, #E54B00, #FF7A3D);
      color: #fff; font-size: 13px; font-weight: 700;
      border-radius: 8px; padding: 7px 18px;
      text-decoration: none; letter-spacing: 0.3px;
      box-shadow: 0 3px 12px rgba(229,75,0,0.5);
      transition: transform 0.15s, box-shadow 0.15s;
      white-space: nowrap;
    }
    .lb-action-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 18px rgba(229,75,0,0.65);
    }
    @media (min-width: 768px) {
      #liveBanner { padding: 10px 32px; flex-direction: row; align-items: center; gap: 16px; }
      .lb-bar-track { flex: 1; }
      .lb-product { flex-shrink: 0; max-width: 260px; }
      .lb-action { padding-top: 0; flex-shrink: 0; }
    }

    /* ══ PHASE 10.4C — Text-Search Results Container ═════════════════
       Full-width panel that appears below the hero section.
       Removes the desktop distortion caused by cards being inside the
       narrow .hp2-search-wrap / hero left-column. */
    #hpSearchResults {
      display: none;
      width: 100%;
      max-width: var(--container-max, 1152px);
      margin: 0 auto;
      padding: 16px var(--page-px, 16px) 40px;
      /* push content below the fixed live-banner when it is active */
      scroll-margin-top: calc(var(--header-h, 60px) + 56px);
    }
    #hpSearchResults.visible { display: block; }


/* === extracted from server.js L8633-8701 === */
    /* ── Debug Drawer (light) ─────────────────────────────────────── */
    .debug-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 200; display: none; }
    .debug-overlay.visible { display: block; }
    .debug-overlay.on { display: block; }
    .debug-drawer {
      position: fixed; bottom: 0; inset-inline-end: 0;
      width: 100%; max-width: 460px; height: 80vh;
      background: #FFFFFF; border-start-start-radius: 20px;
      box-shadow: -4px 0 32px rgba(0,0,0,0.15);
      z-index: 201; flex-direction: column; overflow: hidden;
      /* Use display:none (not transform) to hide — avoids RTL overflow glitch */
      display: none;
    }
    .debug-drawer.visible,
    .debug-drawer.open { display: flex; }
    .dbg-hd {
      display: flex; align-items: center; gap: 10px;
      padding: 16px 16px 12px;
      border-bottom: 1px solid rgba(0,0,0,0.08); flex-shrink: 0;
    }
    .dbg-hd-title { font-size: 14px; font-weight: 700; color: #111; flex: 1; }
    .dbg-hd-pid   { font-size: 10px; color: #AAA; font-family: monospace; }
    .dbg-close { background: none; border: none; font-size: 18px; color: #888; cursor: pointer; padding: 2px 8px; }
    .dbg-close:hover { color: #111; }
    .dbg-loader { padding: 24px; text-align: center; color: #888; font-size: 13px; }
    .dbg-body   { flex: 1; overflow-y: auto; padding: 16px; }

    /* ── Bottom Sheet (light) ─────────────────────────────────────── */
    .bs-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100;
      display: none; opacity: 0; transition: opacity 0.25s;
    }
    .bs-overlay.visible { display: block; opacity: 1; }
    .bottom-sheet {
      position: fixed; bottom: 0; left: 0; right: 0;
      background: #FFFFFF; border-radius: 20px 20px 0 0;
      box-shadow: 0 -4px 32px rgba(0,0,0,0.12);
      z-index: 101; transform: translateY(100%); transition: transform 0.3s;
      max-height: 80vh; overflow-y: auto;
      opacity: 0; pointer-events: none;
    }
    @media (min-width: 768px) { .bottom-sheet { opacity: 0; pointer-events: none; } }
    .bottom-sheet.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .bs-handle { width: 40px; height: 4px; background: rgba(0,0,0,0.12);
                 border-radius: 2px; margin: 12px auto 0; }
    .bs-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .bs-title  { font-size: 15px; font-weight: 700; color: #111; }
    .bs-close  { background: none; border: none; font-size: 20px; color: #888; cursor: pointer; padding: 0 4px; }
    .bs-body   { padding: 16px; }

    /* ── Lightbox (keep dark) ─────────────────────────────────────── */
    .lbx { position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:300;
            display:none; align-items:center; justify-content:center; flex-direction:column; }
    .lbx.on { display:flex; }
    .lbx-img { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:8px; }
    .lbx-ctr { margin-top:10px; font-size:12px; color:#aaa; }
    .lbx-close { position:absolute; top:18px; right:22px; background:none;
                  border:1px solid #555; border-radius:6px; color:#aaa;
                  cursor:pointer; font-size:18px; padding:3px 11px; }
    .lbx-close:hover { border-color:#E54B00; color:#E54B00; }
    .lbx-nav { position:absolute; top:50%; transform:translateY(-50%);
                background:rgba(0,0,0,.5); border:1px solid #555; border-radius:6px;
                color:#aaa; cursor:pointer; font-size:22px; padding:8px 14px; }
    .lbx-nav:hover { border-color:#E54B00; color:#E54B00; }
    .lbx-prev { left:22px; } .lbx-next { right:22px; }


/* === extracted from server.js L8702-8777 === */
    /* ── Candidate/Discovery Cards (light) ────────────────────────── */
    .pc-card {
      background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08);
      border-radius: 14px; overflow: hidden; transition: all 0.2s; cursor: pointer;
    }
    .pc-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.10); transform: translateY(-2px); }
    .pc-card-img-wrap { aspect-ratio: 1; background: #F7F7F7; overflow: hidden; }
    .pc-card-img { width: 100%; height: 100%; object-fit: contain; }
    .pc-card-body { padding: 10px; }
    .pc-title {
      font-size: 11px; font-weight: 600; color: #222; line-height: 1.35;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; margin-bottom: 6px;
    }
    .pc-price { font-size: 13px; font-weight: 700; color: #E54B00; margin-bottom: 4px; }
    .pc-total { font-size: 10px; color: #888; margin-bottom: 4px; }
    .pc-meta  { font-size: 10px; color: #BBB; display: flex; gap: 4px; flex-wrap: wrap; }
    .pc-ship  { font-size: 10px; margin-top: 4px; }
    .sh-AVAILABLE   { color: #059669; }
    .sh-UNKNOWN     { color: #D97706; }
    .sh-UNAVAILABLE { color: #DC2626; }
    .sh-reason { font-size: 10px; font-family: monospace; color: #999;
                  background: #F5F5F5; border: 1px solid rgba(0,0,0,0.1);
                  border-radius: 4px; padding: 2px 7px; display: inline-block; }
    .ae-link {
      display: block; text-align: center; font-size: 10px; color: #E54B00;
      text-decoration: none; padding: 4px 0; margin-top: 4px;
      border-top: 1px solid rgba(0,0,0,0.06); transition: color .15s;
    }
    .ae-link:hover { color: #CC4200; text-decoration: underline; }
    .dbg-btn {
      width: 100%; margin-top: 6px; padding: 5px 0; background: none;
      border: 1px solid rgba(0,0,0,0.12); border-radius: 5px;
      font-size: 10px; font-weight: 600; color: #888; cursor: pointer;
      transition: all .15s; font-family: inherit;
    }
    .dbg-btn:hover { border-color: #E54B00; color: #E54B00; }

    /* Gallery grid */
    .gal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px; }
    .gal-wrap { aspect-ratio:1; background:#F5F5F5; border:1px solid rgba(0,0,0,.10);
                border-radius:6px; overflow:hidden; cursor:pointer; position:relative; }
    .gal-wrap:hover { border-color:#E54B00; }
    .gal-img  { width:100%; height:100%; object-fit:contain; }
    .gal-idx  { position:absolute; bottom:3px; right:4px; font-size:9px;
                background:rgba(0,0,0,.5); color:#FFF; border-radius:3px; padding:1px 4px; }
    /* Variants */
    .vr-list  { display:flex; flex-direction:column; gap:5px; margin-top:6px; }
    .vr-row   { background:#FAFAFA; border:1px solid rgba(0,0,0,.08); border-radius:6px;
                padding:7px 10px; display:grid; grid-template-columns:32px 1fr 70px 55px;
                gap:6px; align-items:center; font-size:10px; }
    .vr-thumb { width:28px; height:28px; border-radius:3px; object-fit:contain; border:1px solid rgba(0,0,0,.1); }
    .vr-sku   { font-family:monospace; color:#BBB; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .vr-name  { color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .vr-price { color:#E54B00; font-weight:700; }
    .vr-stock { color:#BBB; text-align:right; }
    /* Pills */
    .pill-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
    .pill      { font-size:10px; background:#F5F5F5; border:1px solid rgba(0,0,0,.10);
                 border-radius:4px; padding:2px 7px; color:#666; }
    /* Raw JSON */
    .raw-toggle { background:none; border:1px solid rgba(0,0,0,.15); border-radius:5px;
                   color:#888; cursor:pointer; font-size:11px; padding:5px 12px;
                   transition:all .15s; margin-top:4px; font-family:inherit; }
    .raw-toggle:hover { border-color:#E54B00; color:#E54B00; }
    .raw-block  { display:none; margin-top:8px; background:#F8F8F8;
                   border:1px solid rgba(0,0,0,.1); border-radius:6px; padding:12px;
                   font-family:monospace; font-size:10px; color:#333;
                   white-space:pre; overflow-x:auto; line-height:1.6;
                   max-height:380px; overflow-y:auto; }
    .raw-block.on { display:block; }

    /* ═══════════════════════════════════════════════════════
       SMQ — Analysis Queue System  (Phase 11.1)
    ═══════════════════════════════════════════════════════ */


/* === extracted from server.js L8871-9054 === */
    /* ── Queue Drawer ────────────────────────────────────── */
    .smq-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.45);
      z-index: 200; backdrop-filter: blur(2px);
    }
    .smq-drawer {
      position: fixed; top: 0; inset-inline-end: 0;
      width: min(400px, 100vw);
      height: 100dvh; background: #fff;
      z-index: 201; box-shadow: -4px 0 32px rgba(0,0,0,0.18);
      display: flex; flex-direction: column;
      transform: translateX(110%);
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    html[dir="rtl"] .smq-drawer { inset-inline-end: auto; inset-inline-start: 0; }
    .smq-drawer.open { transform: translateX(0); }
    .smq-drawer-hd {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px; border-bottom: 1px solid #E2E8F0;
      background: #F8FAFC; flex-shrink: 0;
    }
    .smq-drawer-title {
      display: flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 700; color: #0F172A;
    }
    .smq-drawer-close {
      background: none; border: none; font-size: 18px;
      color: #94A3B8; cursor: pointer; padding: 4px 8px;
      border-radius: 6px; transition: color 0.2s;
    }
    .smq-drawer-close:hover { color: #0F172A; }
    .smq-jobs-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
    .smq-empty-msg {
      text-align: center; padding: 40px 20px;
      font-size: 14px; color: #94A3B8;
    }
    .smq-drawer-footer { padding: 12px 16px; border-top: 1px solid #E2E8F0; flex-shrink: 0; }
    .smq-limit-msg { font-size: 12px; color: #F97316; font-weight: 600; text-align: center; }

    /* ── Job Card (inside drawer) ─────────────────────────── */
    .smq-job-card {
      border: 1px solid #E2E8F0; border-radius: 12px;
      padding: 12px; background: #fff;
      transition: box-shadow 0.2s;
    }
    .smq-job-card.running { border-left: 3px solid #F97316; }
    .smq-job-card.done    { border-left: 3px solid #22C55E; }
    .smq-job-card.failed  { border-left: 3px solid #EF4444; }
    .smq-job-top { display: flex; align-items: center; gap: 10px; border-radius: 8px; transition: background 0.15s; }
    .smq-job-top[role="link"]:hover { background: rgba(34,197,94,0.10); }
    .smq-job-card.done { cursor: pointer; }
    .smq-job-card.done:hover > .smq-job-top { background: rgba(34,197,94,0.10); }
    .smq-job-img {
      width: 44px; height: 44px; border-radius: 8px;
      object-fit: cover; background: #F1F5F9; flex-shrink: 0;
    }
    .smq-job-img-placeholder {
      width: 44px; height: 44px; border-radius: 8px;
      background: #F1F5F9; display: flex; align-items: center;
      justify-content: center; font-size: 20px; flex-shrink: 0;
    }
    .smq-job-info { flex: 1; min-width: 0; }
    .smq-job-title {
      font-size: 13px; font-weight: 600; color: #0F172A;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .smq-job-meta { font-size: 11px; color: #94A3B8; margin-top: 2px; }
    .smq-job-badge {
      font-size: 10px; font-weight: 700; padding: 2px 8px;
      border-radius: 20px; white-space: nowrap; flex-shrink: 0;
    }
    .smq-job-badge.running { background: #FFF7ED; color: #F97316; }
    .smq-job-badge.done    { background: #F0FDF4; color: #16A34A; }
    .smq-job-badge.failed  { background: #FEF2F2; color: #DC2626; }
    .smq-job-progress { margin-top: 10px; }
    .smq-job-prog-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
    .smq-job-phase-label { font-size: 11px; font-weight: 600; color: #475569; }
    .smq-job-pct { font-size: 11px; font-weight: 700; color: #F97316; }
    .smq-job-track {
      height: 6px; background: #F1F5F9; border-radius: 6px; overflow: hidden;
    }
    .smq-job-fill {
      height: 6px; border-radius: 6px;
      transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
    }
    .smq-job-fill.running  { background: linear-gradient(90deg, #F97316, #FB923C); }
    .smq-job-fill.done     { background: #22C55E; }
    .smq-job-fill.failed   { background: #EF4444; }
    .smq-job-open-btn {
      margin-top: 10px; width: 100%;
      background: #F97316; border: none; border-radius: 8px;
      color: #fff; font-size: 13px; font-weight: 700;
      padding: 8px 16px; cursor: pointer; transition: background 0.2s;
    }
    .smq-job-open-btn:hover { background: #EA6C00; }

    /* ── Toast Notifications ──────────────────────────────── */
    .smq-toast-cont {
      position: fixed; bottom: 20px; inset-inline-end: 20px;
      z-index: 300; display: flex; flex-direction: column; gap: 10px;
      pointer-events: none;
    }
    .smq-toast {
      background: #0F172A; border: 1px solid #1E293B;
      border-inline-start: 4px solid #22C55E;
      border-radius: 12px; padding: 12px 16px;
      min-width: 260px; max-width: 320px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25);
      pointer-events: all; cursor: pointer;
      animation: smqToastIn 0.3s ease;
    }
    @keyframes smqToastIn {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .smq-toast.out { animation: smqToastOut 0.3s ease forwards; }
    @keyframes smqToastOut {
      to { opacity: 0; transform: translateY(10px); }
    }
    .smq-toast-top { display: flex; align-items: center; gap: 8px; }
    .smq-toast-icon { font-size: 18px; flex-shrink: 0; }
    .smq-toast-body { flex: 1; min-width: 0; }
    .smq-toast-head { font-size: 12px; font-weight: 700; color: #22C55E; }
    .smq-toast-title { font-size: 13px; color: #F8FAFC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .smq-toast-cta {
      font-size: 11px; color: #F97316; font-weight: 700;
      margin-top: 4px; text-decoration: none;
      display: block; text-align: end;
    }

    /* ── Infinite Scroll sentinel + Load-More ─────────────── */
    #smqSentinel { height: 1px; margin: 0; }
    .smq-load-more-wrap { text-align: center; padding: 24px 0; }
    .smq-load-more-btn {
      background: #fff; border: 2px solid #E2E8F0;
      border-radius: 24px; padding: 10px 28px;
      font-size: 14px; font-weight: 600; color: #475569;
      cursor: pointer; transition: all 0.2s;
    }
    .smq-load-more-btn:hover { border-color: #F97316; color: #F97316; }
    .smq-results-count {
      text-align: center; padding: 6px 0 12px;
      font-size: 12px; color: #94A3B8;
    }

    /* ── pc-card selected highlight (customer mode) ───────── */
    .pc-card.smq-analyzing {
      border: 2px solid #F97316 !important;
      box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important;
    }

    /* UX-07A: Animated search button state */
    .pc-sel-btn.smq-searching-btn {
      background: #fff7ed !important; color: #c2410c !important;
      border: 1.5px solid #fdba74 !important;
      pointer-events: none;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .smq-btn-ring {
      width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid rgba(249,115,22,.25);
      border-top-color: #F97316;
      animation: smq-spin .7s linear infinite;
      flex-shrink: 0;
    }
    @keyframes smq-spin { to { transform: rotate(360deg); } }
    .pc-sel-btn.smq-analyzing-btn {
      background: #F97316 !important; color: #fff !important;
      pointer-events: none;
    }

    @media (max-width: 400px) {
      .smq-mini-job { min-width: 60px; max-width: 88px; }
    }
    /* Mobile — hamburger menu + taller sticky queue bar */
    @media (max-width: 767px) {
      .smq-bar {
        box-shadow: 0 4px 22px rgba(249,115,22,0.32);
        border-bottom-width: 3px;
      }
      .smq-bar-inner {
        padding: 12px 14px;
        min-height: 54px;
        gap: 10px;
        align-items: center;
      }
      .smq-open-btn {
        order: -1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(249,115,22,0.22);
        border: 1.5px solid rgba(249,115,22,0.5);
        flex-shrink: 0;
      }
      .smq-open-label,
      .smq-open-btn .smq-chevron { display: none !important; }
      .smq-menu-icon {
        display: block;
        width: 22px;
        height: 2px;
        background: #FDBA74;
        border-radius: 2px;
        position: relative;
      }
      .smq-menu-icon::before,
      .smq-menu-icon::after {
        content: '';
        position: absolute;
        left: 0;
        width: 22px;
        height: 2px;
        background: #FDBA74;
        border-radius: 2px;
      }
      .smq-menu-icon::before { top: -8px; }
      .smq-menu-icon::after  { top: 8px; }
      #smqRunLabel { font-size: 12px; }
      .smq-done-label { font-size: 11px; }
      .smq-bar-icon { font-size: 18px; }
      .smq-mini-job { padding: 6px 10px; min-width: 76px; }
    }
    @media (min-width: 768px) {
      .smq-menu-icon { display: none !important; }
    }
    @media (max-width: 600px) {
      .smq-bar-inner { padding: 12px 14px; gap: 10px; }
      .smq-drawer { width: 100vw; }
    }
    @media (min-width: 600px) {
      .smq-bar-inner { padding: 8px 24px; }
    }
    /* Hide old jobs-banner when SMQ is active */
    body.smq-active #jobsBanner { display: none !important; }


/* === extracted from server.js L9055-9389 === */
    /* ── Phase 12.8 Workspace UI ─────────────────────────────────── */
    .smq-ws-history-btn {
      font-size: 12px; padding: 4px 10px; border-radius: 8px;
      border: 1px solid #E2E8F0; background: #F8FAFC; color: #475569;
      cursor: pointer; transition: background 0.15s;
    }
    .smq-ws-history-btn:hover { background: #E2E8F0; }

    /* Workspace summary strip */
    .smq-ws-summary {
      display: flex; gap: 10px; padding: 8px 16px 0;
      font-size: 12px; color: #64748B; flex-shrink: 0;
    }
    .smq-ws-chip {
      background: #F1F5F9; border-radius: 20px;
      padding: 3px 10px; font-weight: 500; color: #475569;
    }
    .smq-ws-chip.run  { background: #EFF6FF; color: #2563EB; }
    .smq-ws-chip.done { background: #F0FDF4; color: #16A34A; }
    .smq-ws-chip.arch { background: #F8FAFC; color: #94A3B8; }

    /* Workspace tabs */
    .smq-workspace-tabs {
      display: flex; border-bottom: 1px solid #E2E8F0;
      padding: 0 12px; gap: 0; flex-shrink: 0;
      overflow-x: auto; scrollbar-width: none;
    }
    .smq-workspace-tabs::-webkit-scrollbar { display: none; }
    .smq-ws-tab {
      padding: 10px 14px; font-size: 12px; font-weight: 500;
      color: #64748B; background: none; border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer; transition: color 0.15s, border-color 0.15s;
      white-space: nowrap;
    }
    .smq-ws-tab.active { color: #F97316; border-bottom-color: #F97316; }
    .smq-ws-tab:hover:not(.active) { color: #1E293B; }

    /* Job card action buttons */
    .smq-job-actions {
      display: flex; gap: 6px; padding: 8px 0 4px; flex-wrap: wrap;
    }
    .smq-job-action-btn {
      font-size: 11px; padding: 4px 9px; border-radius: 6px;
      border: 1px solid #E2E8F0; background: #F8FAFC;
      color: #475569; cursor: pointer;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
      line-height: 1.4;
    }
    .smq-job-action-btn:hover  { background: #E2E8F0; }
    .smq-job-action-btn.danger { color: #DC2626; }
    .smq-job-action-btn.danger:hover { background: #FEE2E2; border-color: #FECACA; }
    .smq-job-action-btn.star   { color: #D97706; }
    .smq-job-action-btn.star.on { color: #F59E0B; background: #FFFBEB; border-color: #FDE68A; }
    .smq-job-action-btn.star.on:hover { background: #FEF3C7; }

    /* History modal */
    .smq-history-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.45); z-index: 2001;
    }
    .smq-history-overlay.open { display: block; }
    .smq-history-modal {
      position: fixed; inset: 50% auto auto 50%;
      transform: translate(-50%,-50%);
      width: min(780px, 96vw); max-height: min(82vh, 720px);
      background: #FFFFFF; border-radius: 16px;
      display: flex; flex-direction: column;
      z-index: 2002; overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    }
    .smq-history-hd {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px 12px; border-bottom: 1px solid #E2E8F0;
      flex-shrink: 0;
    }
    .smq-history-title { font-size: 16px; font-weight: 700; color: #0F172A; }
    .smq-history-search-row {
      padding: 12px 20px 8px; display: flex; flex-direction: column; gap: 8px;
      flex-shrink: 0;
    }
    .smq-history-search {
      width: 100%; box-sizing: border-box;
      padding: 9px 14px; border: 1px solid #CBD5E1; border-radius: 8px;
      font-size: 14px; color: #0F172A; outline: none;
      transition: border-color 0.15s;
    }
    .smq-history-search:focus { border-color: #F97316; }
    .smq-history-filters {
      display: flex; gap: 6px; flex-wrap: wrap;
    }
    .smq-hist-filter {
      font-size: 12px; padding: 4px 10px; border-radius: 20px;
      border: 1px solid #E2E8F0; background: #F8FAFC;
      color: #475569; cursor: pointer; transition: all 0.12s;
    }
    .smq-hist-filter.active {
      background: #FFF7ED; border-color: #FDBA74; color: #EA580C; font-weight: 600;
    }
    .smq-hist-list {
      flex: 1; overflow-y: auto; padding: 8px 20px;
    }
    .smq-hist-item {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 12px 0; border-bottom: 1px solid #F1F5F9;
    }
    .smq-hist-item:last-child { border-bottom: none; }
    .smq-hist-img {
      width: 52px; height: 52px; border-radius: 8px; object-fit: cover;
      flex-shrink: 0; background: #F1F5F9;
    }
    .smq-hist-info { flex: 1; min-width: 0; }
    .smq-hist-product-title {
      font-size: 13px; font-weight: 600; color: #1E293B;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .smq-hist-meta { font-size: 11px; color: #94A3B8; margin-top: 3px; }
    .smq-hist-badge {
      display: inline-block; font-size: 10px; font-weight: 600;
      padding: 2px 7px; border-radius: 10px; margin-top: 5px;
    }
    .smq-hist-badge.complete { background: #F0FDF4; color: #16A34A; }
    .smq-hist-badge.running  { background: #EFF6FF; color: #2563EB; }
    .smq-hist-badge.error    { background: #FEF2F2; color: #DC2626; }
    .smq-hist-badge.archived { background: #F8FAFC; color: #94A3B8; }
    .smq-hist-actions {
      display: flex; gap: 5px; align-items: center; flex-shrink: 0;
      flex-wrap: wrap; justify-content: flex-end; max-width: 140px;
    }
    .smq-hist-btn {
      font-size: 11px; padding: 4px 8px; border-radius: 6px;
      border: 1px solid #E2E8F0; background: #F8FAFC;
      color: #475569; cursor: pointer; transition: all 0.12s;
      white-space: nowrap;
    }
    .smq-hist-btn:hover { background: #E2E8F0; }
    .smq-hist-btn.primary { background: #F97316; border-color: #F97316; color: #FFF; }
    .smq-hist-btn.primary:hover { background: #EA580C; }
    .smq-hist-btn.danger  { color: #DC2626; }
    .smq-hist-btn.danger:hover { background: #FEE2E2; border-color: #FECACA; }
    .smq-hist-empty { text-align: center; padding: 40px 20px; color: #94A3B8; font-size: 14px; }
    .smq-history-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 20px; border-top: 1px solid #E2E8F0; flex-shrink: 0;
    }
    .smq-hist-count { font-size: 12px; color: #94A3B8; }
    .smq-hist-page-btns { display: flex; gap: 8px; }
    .smq-hist-page-btn {
      font-size: 12px; padding: 5px 12px; border-radius: 6px;
      border: 1px solid #E2E8F0; background: #FFF; color: #475569;
      cursor: pointer; transition: background 0.12s;
    }
    .smq-hist-page-btn:disabled { opacity: 0.4; cursor: default; }
    .smq-hist-page-btn:not(:disabled):hover { background: #F1F5F9; }
    @media (max-width: 600px) {
      .smq-history-modal { max-height: 90vh; border-radius: 16px 16px 0 0; inset: auto 0 0 0; transform: none; width: 100%; }
      .smq-hist-actions { max-width: 100px; }
    }

    /* ═══════════════════════════════════════════════════════════
       UX-02 — Instant Discovery Experience
       Live progress banner + progressive product card grid
       ═══════════════════════════════════════════════════════════ */

    /* ── UX-HOME-01: Analysis Progress Card ─────────────────────────── */
    #ux02Section {
      max-width: 640px;
      margin: 0 auto;
      padding: 0 var(--page-px) 28px;
      display: none;
    }
    #ux02Section.visible { display: block; }

    /* Hidden legacy elements — kept for JS backward compat */
    #ux02Grid, #ux02GridHdr, #ux02LoadMore, #ux02CtaWrap, #ux02Banner { display: none !important; }

    /* ── Progress Card Shell ── */
    .upc-pcard {
      background: #FFFFFF;
      border: 1.5px solid rgba(229,75,0,0.18);
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 4px 24px rgba(229,75,0,0.07);
      display: flex;
      flex-direction: column;
      gap: 18px;
      animation: upcPcardIn 0.3s ease both;
    }
    @keyframes upcPcardIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }

    /* ── Header: product thumbnail + title + close ── */
    .upc-pcard-header {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .upc-pcard-product {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }
    .upc-pcard-img {
      width: 52px; height: 52px;
      border-radius: 10px;
      object-fit: contain;
      background: #F7F7F7;
      flex-shrink: 0;
      border: 1px solid rgba(0,0,0,0.07);
    }
    .upc-pcard-img-ph {
      width: 52px; height: 52px;
      border-radius: 10px;
      background: #F1F5F9;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }
    .upc-pcard-meta { min-width: 0; }
    .upc-pcard-label {
      font-size: 10px; font-weight: 700;
      color: #E54B00;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 3px;
    }
    .upc-pcard-title {
      font-size: 13px; font-weight: 600;
      color: #1E293B;
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .upc-pcard-close {
      background: none; border: none;
      font-size: 16px; color: #94A3B8;
      cursor: pointer; padding: 6px 8px;
      border-radius: 8px; flex-shrink: 0;
      line-height: 1;
      transition: background 0.15s, color 0.15s;
    }
    .upc-pcard-close:hover { background: #F1F5F9; color: #475569; }

    /* ── Progress bar ── */
    .upc-pcard-progress {
      display: flex; align-items: center; gap: 10px;
    }
    .upc-pcard-bar {
      flex: 1; height: 8px; border-radius: 999px;
      background: #F1F5F9; overflow: hidden;
    }
    .upc-pcard-fill {
      height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, #E54B00 0%, #F97316 100%);
      width: 5%;
      transition: width 0.7s ease;
    }
    [dir="rtl"] .upc-pcard-fill {
      background: linear-gradient(270deg, #E54B00 0%, #F97316 100%);
    }
    .upc-pcard-pct {
      font-size: 13px; font-weight: 800;
      color: #E54B00; min-width: 38px;
      text-align: end;
    }
    [dir="rtl"] .upc-pcard-pct { text-align: start; }

    /* ── Stages checklist ── */
    .upc-pcard-stages {
      display: flex; flex-direction: column; gap: 10px;
    }
    .upc-pcard-stage {
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; color: #94A3B8;
      line-height: 1.3;
      transition: color 0.25s;
    }
    .upc-pcard-stage.pcs-done   { color: #1E293B; }
    .upc-pcard-stage.pcs-active { color: #C2410C; font-weight: 600; }

    .upc-pcard-icon {
      width: 20px; height: 20px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; flex-shrink: 0;
      border: 1.5px solid #E2E8F0;
      color: #CBD5E1; background: #F8FAFC;
      transition: all 0.25s;
    }
    .upc-pcard-stage.pcs-done .upc-pcard-icon {
      background: #ECFDF5; border-color: #059669; color: #059669;
    }
    .upc-pcard-stage.pcs-active .upc-pcard-icon {
      background: #FFF7ED; border-color: #E54B00; color: #E54B00;
      animation: upcPcardPulse 1.3s ease-in-out infinite;
    }
    @keyframes upcPcardPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.55; transform: scale(0.88); }
    }

    /* ── Completion section ── */
    .upc-pcard-done {
      display: none;
      flex-direction: column; gap: 14px;
      padding-top: 4px;
      border-top: 1px solid rgba(0,0,0,0.07);
      animation: upcPcardIn 0.4s ease both;
    }
    .upc-pcard-done.visible { display: flex; }
    .upc-pcard-done-badge {
      font-size: 15px; font-weight: 700;
      color: #059669;
      display: flex; align-items: center; gap: 6px;
    }
    .upc-pcard-cta {
      display: block;
      width: 100%;
      padding: 15px;
      background: linear-gradient(135deg, #E54B00 0%, #F97316 100%);
      color: #FFFFFF;
      border-radius: 14px;
      text-align: center;
      font-size: 15px; font-weight: 700;
      text-decoration: none;
      transition: opacity 0.2s, transform 0.15s;
      box-shadow: 0 4px 14px rgba(229,75,0,0.28);
    }
    .upc-pcard-cta:hover  { opacity: 0.92; transform: translateY(-1px); }
    .upc-pcard-cta:active { transform: none; }

    /* ── Legacy elements — keep hidden ── */
    .ux02-stage-pill, .ux02-banner-top, .ux02-progress-row,
    .ux02-rotate-msg, .ux02-grid-hdr, .ux02-load-more,
    .ux02-cta-wrap, .ux02-pulse { display: none !important; }

    /* ── Card fade-in (kept for _ux02AddCards compatibility) ── */
    .pc-card.ux02-new {
      animation: ux02FadeIn 0.35s ease both;
    }
    @keyframes ux02FadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: none; }
    }

    /* ── Match badge update ── */
    .pc-card .ux02-badge-incoming {
      animation: ux02BadgePop 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }
    @keyframes ux02BadgePop {
      0%   { transform: scale(0.6); opacity: 0; }
      60%  { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* ── UX-02 sim/match badges (still used on other grids) ── */
    .ux02-stage-badges {
      display: flex; flex-wrap: wrap; gap: 6px;
      align-items: center; flex-shrink: 0;
    }
    .ux02-stage-pill {
      font-size: 10px; font-weight: 700; letter-spacing: .05em;
      padding: 3px 9px; border-radius: var(--r-pill);
      border: 1.5px solid transparent;
      white-space: nowrap;
    }
    .ux02-stage-pill.pending  { background: var(--c-surface-2); color: var(--c-text-subtle); border-color: var(--c-border); }
    .ux02-stage-pill.running  { background: #FFF4E6; color: #D97706; border-color: #FDE68A; }
    .ux02-stage-pill.done     { background: #ECFDF5; color: var(--c-success); border-color: #A7F3D0; }

    /* ── UX-HOME-01B: Inline Card Progress (text/image search) ──────────── */

    /* Card in analyzing state: hide actions, clip overflow for smooth expand */
    .upc-anl-card { overflow: visible !important; }
    .upc-anl-card .upc-actions { display: none !important; }
    .upc-anl-card .upc-act-find-full { display: none !important; }

    /* Progress section injected at the bottom of the card */
    .upc-anl-section {
      padding: 12px 12px 14px;
      border-top: 1px solid rgba(0,0,0,0.07);
      display: flex;
      flex-direction: column;
      gap: 10px;
      animation: upcPcardIn 0.3s ease both;
    }

    /* Spinner header row */
    .upc-anl-header {
      display: flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700; color: #C2410C;
    }
    .upc-anl-spinner {
      width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid rgba(229,75,0,0.2);
      border-top-color: #E54B00;
      animation: ux02Spin 0.8s linear infinite;
      flex-shrink: 0;
    }

    /* Progress bar */
    .upc-anl-bar-row { display: flex; align-items: center; gap: 8px; }
    .upc-anl-bar {
      flex: 1; height: 6px; border-radius: 99px;
      background: #F1F5F9; overflow: hidden;
    }
    .upc-anl-fill {
      height: 100%; border-radius: 99px;
      background: linear-gradient(90deg, #E54B00, #F97316);
      width: 5%; transition: width 0.6s ease;
    }
    [dir="rtl"] .upc-anl-fill { background: linear-gradient(270deg, #E54B00, #F97316); }
    .upc-anl-pct {
      font-size: 11px; font-weight: 700; color: #E54B00;
      min-width: 28px; text-align: end;
    }
    [dir="rtl"] .upc-anl-pct { text-align: start; }

    /* Stages checklist */
    .upc-anl-stages { display: flex; flex-direction: column; gap: 6px; }
    .upc-anl-stage {
      display: flex; align-items: center; gap: 7px;
      font-size: 11px; color: #94A3B8; line-height: 1.3;
      transition: color 0.2s;
    }
    .upc-anl-stage.pcs-done   { color: #1E293B; }
    .upc-anl-stage.pcs-active { color: #C2410C; font-weight: 600; }
    .upc-anl-sicon {
      width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 700;
      border: 1.5px solid #E2E8F0; background: #F8FAFC; color: #CBD5E1;
      transition: all 0.2s;
    }
    .upc-anl-stage.pcs-done .upc-anl-sicon {
      background: #ECFDF5; border-color: #059669; color: #059669;
    }
    .upc-anl-stage.pcs-active .upc-anl-sicon {
      background: #FFF7ED; border-color: #E54B00; color: #E54B00;
      animation: upcPcardPulse 1.3s ease-in-out infinite;
    }

    /* Completion section */
    .upc-anl-done { display: flex; flex-direction: column; gap: 10px; }
    .upc-anl-done-badge {
      font-size: 12px; font-weight: 700; color: #059669;
      display: flex; align-items: center; gap: 5px;
    }
    .upc-anl-cta {
      display: block; width: 100%;
      padding: 12px 8px;
      background: linear-gradient(135deg, #E54B00 0%, #F97316 100%);
      color: #FFF; border-radius: 12px;
      text-align: center; font-size: 13px; font-weight: 700;
      text-decoration: none;
      box-shadow: 0 3px 10px rgba(229,75,0,0.25);
      transition: opacity 0.2s, transform 0.15s;
    }
    .upc-anl-cta:hover  { opacity: 0.92; transform: translateY(-1px); }
    .upc-anl-cta:active { transform: none; }