/* card-rich-panel.css — shared "rich result panel" styling for BOTH the live scanner
 * (scan.html, via 'body.live-scan #result …') and manual search (index.html, via '.cp-rich-panel …').
 * AUTO-EXTRACTED from scan.html's inline <style>; edit there only via this shared file.
 * Shell chrome (camera/shutter/notch/ledge/session/toolbar) is NOT here — it stays scanner-only. */

body.live-scan #result .mcd-col-tcg, body.live-scan #result .mcd-col-ebay,
    body.live-scan #result .mock-wrap.graded-mode .mgr-co-box,
.cp-rich-panel .mcd-col-tcg,
.cp-rich-panel .mcd-col-ebay,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-box { cursor:pointer; }
body.live-scan #result .mcd-col:active, body.live-scan #result .mock-wrap.graded-mode .mgr-co-box:active,
.cp-rich-panel .mcd-col:active,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-box:active { filter:brightness(1.18); }
body.live-scan #result .mock-body--raw .mcd-sales-title::after,
.cp-rich-panel .mock-body--raw .mcd-sales-title::after { content:'View All ›'; opacity:0.65; font-weight:600; text-transform:none; letter-spacing:0; color:var(--cp-violet-bright); }
body.live-scan #result > .scan-filter-row,
.cp-rich-panel > .scan-filter-row {
      display:flex !important; align-items:center !important; justify-content:center !important;
      gap:6px !important;
      padding:6px 8px !important; margin:32px 0 0 0 !important;
      z-index:10001; position:relative;
    }
body.live-scan #result .scan-filter-row .cp-dd,
.cp-rich-panel .scan-filter-row .cp-dd {
      flex:1 1 0; min-width:0;
    }
body.live-scan #result .scan-filter-row .cp-dd-trigger,
.cp-rich-panel .scan-filter-row .cp-dd-trigger {
      width:100%; text-align:center;
      font-size:0.42rem !important; padding:3px 14px 3px 6px !important;
      letter-spacing:0.02em !important; border-radius:4px !important;
    }
body.live-scan #result .scan-filter-row .cp-dd-trigger::after,
.cp-rich-panel .scan-filter-row .cp-dd-trigger::after {
      right:4px !important; font-size:0.7em !important;
    }
body.live-scan #result .scan-filter-row .cp-dd-static,
.cp-rich-panel .scan-filter-row .cp-dd-static {
      font-size:0.42rem !important; padding:3px 6px !important;
      text-align:center; width:100%;
    }
body.live-scan #result .scan-filter-row .cp-dd-list,
.cp-rich-panel .scan-filter-row .cp-dd-list {
      z-index:10003 !important;
    }
body.live-scan #result .sticker-box,
.cp-rich-panel .sticker-box {
      display:grid !important;
      /* 2x3 grid:  [-1][input][+1]  /  [-5][Print][+5]  — steppers on the
         outer columns, input + Print stacked in the middle. */
      grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);
      grid-template-rows:auto auto;
      gap:3px !important; justify-items:stretch; align-items:stretch;
      width:100%;
    }
body.live-scan #result .stk-step[data-stk-delta="-10"],
    body.live-scan #result .stk-step[data-stk-delta="10"],
.cp-rich-panel .stk-step[data-stk-delta="-10"],
.cp-rich-panel .stk-step[data-stk-delta="10"] { display:none !important; }
/* Placement MUST be !important: the legacy 3×4 admin sticker in
   card-prices-redesign.css (.rxc-admin .sticker-box .stk-step) sets
   grid-column/grid-row:auto !important and print-btn grid-column:1/-1; without
   !important here that auto-placement wins and the 2×3 collapses (print button
   lands full-width at the bottom instead of the middle). id-specificity makes
   these win over the .rxc-admin !important rules. */
body.live-scan #result .stk-step[data-stk-delta="-1"],
.cp-rich-panel .stk-step[data-stk-delta="-1"]  { grid-column:1 !important; grid-row:1 !important; }
body.live-scan #result .stk-step[data-stk-delta="-5"],
.cp-rich-panel .stk-step[data-stk-delta="-5"]  { grid-column:1 !important; grid-row:2 !important; }
body.live-scan #result .stk-step[data-stk-delta="1"],
.cp-rich-panel .stk-step[data-stk-delta="1"]   { grid-column:3 !important; grid-row:1 !important; }
body.live-scan #result .stk-step[data-stk-delta="5"],
.cp-rich-panel .stk-step[data-stk-delta="5"]   { grid-column:3 !important; grid-row:2 !important; }
body.live-scan #result .sticker-input,
.cp-rich-panel .sticker-input {
      grid-column:2 !important; grid-row:1 !important; align-self:stretch !important;
    }
body.live-scan #result .print-btn,
.cp-rich-panel .print-btn {
      grid-column:2 !important; grid-row:2 !important; width:auto !important;
      margin-top:0 !important; align-self:stretch !important;
    }
body.live-scan #result .sticker-box .stk-step,
.cp-rich-panel .sticker-box .stk-step { min-width:clamp(22px,6vw,30px) !important; height:clamp(26px,7vw,34px) !important; min-height:clamp(26px,7vw,34px) !important; max-height:clamp(26px,7vw,34px) !important; padding:0 clamp(3px,1.4vw,6px) !important; font-size:clamp(0.5rem,2.6vw,0.68rem) !important; line-height:1 !important; align-self:stretch !important; box-sizing:border-box; }
body.live-scan #result .sticker-box .sticker-input,
.cp-rich-panel .sticker-box .sticker-input { width:100% !important; min-width:clamp(28px,8vw,40px) !important; font-size:clamp(0.62rem,3.2vw,0.9rem) !important; padding:0px !important; height:auto !important; min-height:clamp(28px,8vw,38px) !important; box-sizing:border-box; align-self:stretch !important; }
body.live-scan #result .sticker-box .print-btn,
.cp-rich-panel .sticker-box .print-btn { height:100% !important; max-height:none !important; min-width:clamp(40px,11vw,56px) !important; font-size:clamp(0.46rem,2.2vw,0.6rem) !important; padding:0px clamp(4px,1.6vw,8px) !important; line-height:1.1 !important; align-self:stretch !important; box-sizing:border-box; writing-mode:horizontal-tb; }
body.live-scan #result .sticker-box,
.cp-rich-panel .sticker-box { margin-bottom:0 !important; gap:clamp(1px,0.6vw,3px) !important; }
body.live-scan #result .mock-wrap,
.cp-rich-panel .mock-wrap {
      background:transparent !important; border:none !important;
      box-shadow:none !important; border-radius:0 !important;
      margin-bottom:0 !important; overflow:visible !important;
    }
/* Grid FOUNDATION at all widths. comp-styles.css only sets display:grid / display:contents
   under @media(max-width:920px), so on desktop the panel had no grid → giant image. The
   grid-template clamps cap sizes (30vw caps at 138px), so the mobile layout renders fine wide. */
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-layout,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-layout {
      display:grid !important;
      grid-template-columns:clamp(95px,30vw,138px) minmax(0,1fr) auto !important;
      grid-template-rows:min-content 1fr !important;
      column-gap:clamp(6px,2.2vw,11px) !important; row-gap:clamp(1px,0.6vw,3px) !important;
      align-items:start !important;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-content,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-content { display:contents !important; }
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-body--raw,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-body--raw { display:contents !important; }
/* Desktop (>920px): this panel is mobile-first — keep it phone-width and centered rather
   than stretching the 1fr column across the whole screen. */
@media (min-width: 921px) {
  body.live-scan #result .mock-wrap,
  .cp-rich-panel .mock-wrap { max-width:480px !important; margin-left:auto !important; margin-right:auto !important; }
  .cp-rich-panel { max-width:480px; margin-left:auto; margin-right:auto; }
}
body.live-scan #result .mock-top,
.cp-rich-panel .mock-top {
      grid-column:2 !important; grid-row:1 !important; min-width:0 !important;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-top,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-top {
      grid-column:2 !important; grid-row:1 !important; min-width:0 !important;
      align-self:start;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-numrow,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-numrow {
      display:flex; align-items:center; gap:clamp(4px,1.5vw,8px); min-width:0;
      margin-bottom:clamp(2px,1vw,5px);
    }
body.live-scan #result .mock-price-col .scan-qty-add-row:empty,
.cp-rich-panel .mock-price-col .scan-qty-add-row:empty { display:none !important; }
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-top .mock-top-right,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-top .mock-top-right { min-width:0; }
body.live-scan #result .mock-top .mock-name,
.cp-rich-panel .mock-top .mock-name {
      display:block; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis;
      line-height:1.2 !important;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-top .mock-name,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-top .mock-name {
      background:var(--holo);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:#fff; -webkit-text-stroke:0.7px transparent; paint-order:stroke fill;
    }
body.live-scan #result .mock-top .mock-set,
.cp-rich-panel .mock-top .mock-set {
      display:flex; align-items:center; white-space:nowrap !important;
      overflow:hidden; text-overflow:ellipsis; line-height:1.2 !important;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-top .mock-set,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-top .mock-set {
      font-family:'Cinzel',serif !important;
      -webkit-text-fill-color:#fff; -webkit-text-stroke:0.6px #c4a0ff; paint-order:stroke fill;
      text-shadow:0 0 3px rgba(168,120,255,0.4);
    }
body.live-scan #result .mock-top .mock-num,
.cp-rich-panel .mock-top .mock-num {
      display:flex; align-items:center; gap:clamp(4px,1.4vw,7px);
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-top .mock-num,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-top .mock-num {
      font-family:'Cinzel',serif;
      -webkit-text-fill-color:#fff; -webkit-text-stroke:0.6px #c4a0ff; paint-order:stroke fill;
      text-shadow:0 0 3px rgba(168,120,255,0.4);
    }
body.live-scan #result .mock-set .mock-set-icon-wrap,
.cp-rich-panel .mock-set .mock-set-icon-wrap {
      position:relative; display:inline-flex; align-items:center;
      margin-right:clamp(3px,1.2vw,5px); flex:0 0 auto;
    }
body.live-scan #result .mock-set .mock-set-icon,
.cp-rich-panel .mock-set .mock-set-icon {
      position:relative; z-index:1; height:1.5em; width:auto; display:block; margin:0;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-set .mock-set-icon-rb,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-set .mock-set-icon-rb {
      position:absolute; inset:-0.6px; z-index:0; pointer-events:none;
      background:var(--holo);
      -webkit-mask-size:contain; mask-size:contain;
      -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
      -webkit-mask-position:center; mask-position:center;
    }
body.live-scan #result .mock-wrap.graded-mode .mock-set .mock-set-icon-rb,
.cp-rich-panel .mock-wrap.graded-mode .mock-set .mock-set-icon-rb { display:none; }
body.live-scan #result .scan-attr-chips,
.cp-rich-panel .scan-attr-chips {
      display:flex; flex-wrap:nowrap; align-items:center; gap:clamp(3px,1.2vw,6px);
      margin-top:clamp(3px,1.2vw,6px); min-width:0; max-width:100%;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .attr-pill,
.cp-rich-panel .mock-wrap:not(.graded-mode) .attr-pill {
      position:relative; display:inline-flex; align-items:center;
      font-family:'Cinzel',serif; font-size:clamp(0.36rem,1.8vw,0.5rem); font-weight:700; line-height:1;
      letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap; flex:0 1 auto; min-width:0;
      overflow:visible;
      /* uppercase caps have empty descender space below them, so bias the top padding to
         optically centre the text in the pill */
      padding:clamp(3px,1.3vw,5px) clamp(6px,2vw,9px) clamp(1px,0.5vw,2px); border-radius:999px;
      background:transparent; border:none;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .attr-pill::before,
.cp-rich-panel .mock-wrap:not(.graded-mode) .attr-pill::before {
      content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
      background:var(--holo);
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .attr-pill .ap-txt,
.cp-rich-panel .mock-wrap:not(.graded-mode) .attr-pill .ap-txt {
      background:var(--holo);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:#fff; -webkit-text-stroke:0.45px transparent; paint-order:stroke fill;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .cond-pill,
.cp-rich-panel .mock-wrap:not(.graded-mode) .cond-pill { flex:0 0 auto; overflow:visible; max-width:none; }
body.live-scan #result .mock-wrap:not(.graded-mode) .foil-tag,
.cp-rich-panel .mock-wrap:not(.graded-mode) .foil-tag { display:none !important; }
/* Condition · print · foiling text readout — shown at the top of the price panel
   (the per-line .mps-cf stack styled under .mock-price-col .mps-cond). Restored per Eric. */
body.live-scan #result .mock-wrap:not(.graded-mode) .scan-price-panel .mps-cond,
.cp-rich-panel .mock-wrap:not(.graded-mode) .scan-price-panel .mps-cond { display:flex !important; }
body.live-scan #result .mock-wrap.graded-mode .scan-attr-chips,
.cp-rich-panel .mock-wrap.graded-mode .scan-attr-chips { display:none !important; }
body.live-scan #result .mock-body--raw .mock-sales-stack,
.cp-rich-panel .mock-body--raw .mock-sales-stack {
      grid-column:2 !important; grid-row:2 !important;
      align-self:stretch !important; display:flex !important; flex-direction:column;
      gap:clamp(3px,1.2vw,6px); margin-top:0; min-width:0; min-height:0;
    }
/* Non-admin (no Label-Price sticker): sales expands across the empty col-3 slot. */
body.live-scan #result .mock-wrap.cp-no-sticker .mock-body--raw .mock-sales-stack,
.cp-rich-panel .mock-wrap.cp-no-sticker .mock-body--raw .mock-sales-stack {
      grid-column:2 / -1 !important;
    }
body.live-scan #result .mock-body--raw .mcd-sales-box,
.cp-rich-panel .mock-body--raw .mcd-sales-box {
      flex:1 1 auto; box-sizing:border-box; width:100%; min-height:0;
      padding:0; display:flex; flex-direction:column;
      background:rgba(248,244,255,0.08) !important;
      border:1px solid rgba(168,85,247,0.25); border-radius:8px; overflow:hidden;
    }
body.live-scan #result .mock-body--raw .mcd-sales-title,
.cp-rich-panel .mock-body--raw .mcd-sales-title {
      position:relative; display:flex; align-items:center; justify-content:center; gap:6px; width:100%; line-height:1;
      font-family:'Cinzel',serif; font-size:clamp(0.34rem,1.5vw,0.44rem); font-weight:700; letter-spacing:0.05em;
      text-transform:uppercase; margin:0;
      padding:clamp(1px,0.5vw,2px) clamp(6px,2vw,10px);
      background:linear-gradient(180deg, rgba(94,37,150,0.62), rgba(46,16,66,0.5));
      border-bottom:1px solid rgba(167,139,250,0.3); cursor:pointer; flex:0 0 auto;
    }
body.live-scan #result .mock-body--raw .mcd-sales-h,
.cp-rich-panel .mock-body--raw .mcd-sales-h {
      background:var(--holo);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:#fff; -webkit-text-stroke:0.5px transparent; paint-order:stroke fill;
    }
body.live-scan #result .mock-body--raw .mcd-sales-title::after,
.cp-rich-panel .mock-body--raw .mcd-sales-title::after {
      font-size:0.9em; position:absolute; right:clamp(4px,1.6vw,8px); top:50%; transform:translateY(-50%);
    }
body.live-scan #result .mock-body--raw .mcd-combined,
.cp-rich-panel .mock-body--raw .mcd-combined {
      display:flex; gap:clamp(6px,2.4vw,12px); align-items:flex-start;
      border:none !important; background:transparent !important; border-radius:0 !important;
      padding:clamp(1px,0.5vw,3px) clamp(2px,1vw,4px); min-height:0;
    }
body.live-scan #result .mock-body--raw .mcd-col,
.cp-rich-panel .mock-body--raw .mcd-col {
      flex:1 1 0; min-width:0; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    }
body.live-scan #result .mock-body--raw .mcd-sales-label,
.cp-rich-panel .mock-body--raw .mcd-sales-label { font-size:clamp(0.3rem,1.4vw,0.42rem); opacity:0.55; text-align:center; margin-bottom:1px; line-height:1; }
body.live-scan #result .mock-body--raw .last-sold,
.cp-rich-panel .mock-body--raw .last-sold { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
body.live-scan #result .mock-wrap:not(.graded-mode) .mcd-affil-note,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mcd-affil-note {
      font-size:clamp(0.3rem,1.6vw,0.42rem); line-height:1.25; color:rgba(255,255,255,0.7);
      text-align:center; margin-top:clamp(2px,1vw,4px); padding:0 1px; letter-spacing:0.01em;
      width:100%; white-space:normal;
    }
body.live-scan #result .mock-body--raw .mcd-sales-label,
.cp-rich-panel .mock-body--raw .mcd-sales-label { color:rgba(244,239,250,0.85) !important; }
body.live-scan #result .mock-body--raw .ls-d,
.cp-rich-panel .mock-body--raw .ls-d { color:var(--cp-void) !important; }
body.live-scan #result .mock-body--raw .ls-amt,
.cp-rich-panel .mock-body--raw .ls-amt { -webkit-text-fill-color:#000; }
body.live-scan #result .mock-body--raw .ls-empty,
.cp-rich-panel .mock-body--raw .ls-empty {
      color:rgba(255,255,255,0.4) !important; font-style:normal !important;
      display:flex !important; align-items:center; gap:clamp(2px,1vw,4px); min-width:0;
    }
body.live-scan #result .mock-body--raw .ls-empty .ls-logo,
.cp-rich-panel .mock-body--raw .ls-empty .ls-logo { opacity:0.4; }
body.live-scan #result .mock-body--raw .ls-empty .ls-empty-txt,
.cp-rich-panel .mock-body--raw .ls-empty .ls-empty-txt {
      font-family:'Cinzel',serif; font-size:clamp(0.34rem,1.5vw,0.46rem); letter-spacing:0.02em;
      text-transform:uppercase; color:rgba(138,63,199,0.55); white-space:nowrap;
    }
body.live-scan #result .mock-body--raw .mcd-combined .mcd-col,
.cp-rich-panel .mock-body--raw .mcd-combined .mcd-col { padding:clamp(2px,1vw,4px) clamp(2px,1.2vw,5px); }
body.live-scan #result .mock-body--raw .last-sold,
.cp-rich-panel .mock-body--raw .last-sold { gap:clamp(1px,0.5vw,3px); align-items:flex-start; }
body.live-scan #result .mock-body--raw .ls-row,
.cp-rich-panel .mock-body--raw .ls-row {
      display:flex; flex-direction:column; align-items:flex-end; row-gap:0;
      min-height:clamp(13px,3.4vw,17px); padding:clamp(0px,0.4vw,2px) 0;
      border-bottom:1px solid rgba(120,70,160,0.18);
      text-decoration:none; color:inherit; line-height:1.1; cursor:pointer;
    }
body.live-scan #result .mock-body--raw .ls-row:last-child,
.cp-rich-panel .mock-body--raw .ls-row:last-child { border-bottom:none; }
body.live-scan #result .mock-body--raw .ls-row:active,
.cp-rich-panel .mock-body--raw .ls-row:active { background:rgba(138,63,199,0.12); }
body.live-scan #result .mock-body--raw .ls-main,
.cp-rich-panel .mock-body--raw .ls-main {
      display:flex; align-items:center; gap:clamp(2px,1vw,4px); flex:0 1 auto; min-width:0; white-space:nowrap;
    }
body.live-scan #result .mock-body--raw .ls-logo,
.cp-rich-panel .mock-body--raw .ls-logo {
      height:clamp(8px,2.7vw,12px); width:auto; max-width:clamp(16px,5.5vw,26px);
      object-fit:contain; flex:0 0 auto; opacity:0.95;
    }
body.live-scan #result .mock-body--raw .ls-amt,
.cp-rich-panel .mock-body--raw .ls-amt {
      font-family:var(--f-mono); font-weight:700; font-size:clamp(0.42rem,2.1vw,0.6rem); white-space:nowrap;
      background:var(--holo);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:#000;
      -webkit-text-stroke:0.6px transparent;
      paint-order:stroke fill;
    }
body.live-scan #result .mock-body--raw .ls-go,
.cp-rich-panel .mock-body--raw .ls-go {
      flex:0 0 auto; width:clamp(7px,2.2vw,10px); height:clamp(7px,2.2vw,10px); color:var(--cp-violet-bright); opacity:0.85;
    }
body.live-scan #result .mock-body--raw .ls-d,
.cp-rich-panel .mock-body--raw .ls-d {
      margin-left:auto; flex:0 0 auto; white-space:nowrap; text-align:right;
      font-family:'Exo 2',sans-serif; font-style:italic; font-weight:600;
      font-size:clamp(0.34rem,1.7vw,0.5rem); letter-spacing:0.01em; color:rgba(255,255,255,0.5);
    }
body.live-scan #result .mock-body--raw .mock-price-col,
.cp-rich-panel .mock-body--raw .mock-price-col {
      grid-column:3 !important; grid-row:1 !important;
      align-self:start !important; align-items:flex-end !important;
      display:flex !important; flex-direction:column; justify-content:flex-start; gap:0;
      background:transparent !important; border:none !important;
      border-radius:0 !important; padding:0 !important; overflow:visible;
    }
body.live-scan #result .scan-price-panel,
.cp-rich-panel .scan-price-panel {
      width:fit-content; min-width:clamp(52px,16vw,70px); max-width:clamp(108px,34vw,150px);
      align-self:flex-end; box-sizing:border-box;
      display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
      gap:clamp(2px,1vw,5px); padding:0;
      background:rgba(12,8,19,0.45); border:1px solid rgba(167,139,250,0.28);
      border-radius:9px; overflow:hidden;
    }
body.live-scan #result .mock-body--raw .mock-price-summary,
.cp-rich-panel .mock-body--raw .mock-price-summary {
      width:100% !important; border:none !important; border-radius:0 !important; margin:0 !important;
      padding:0 0 6px !important; gap:4px !important;
    }
body.live-scan #result .mock-price-col .mps-cond,
.cp-rich-panel .mock-price-col .mps-cond {
      display:flex; flex-direction:column; align-items:center; gap:0;
      text-align:center; letter-spacing:0.01em; font-weight:700; margin-bottom:2px;
    }
body.live-scan #result .mock-price-col .mps-cond .mps-cf,
.cp-rich-panel .mock-price-col .mps-cond .mps-cf {
      display:block; white-space:nowrap; font-size:clamp(0.42rem,2.3vw,0.6rem) !important; line-height:1.25 !important;
    }
body.live-scan #result .mock-body--raw .mps-prices,
.cp-rich-panel .mock-body--raw .mps-prices { width:100%; gap:5px !important; display:flex; flex-direction:column !important; }
body.live-scan #result .mock-body--raw .mps-row,
.cp-rich-panel .mock-body--raw .mps-row { display:flex !important; flex-direction:column !important; align-items:center; justify-content:center; gap:0; text-align:center; }
body.live-scan #result .mock-body--raw .mps-label,
.cp-rich-panel .mock-body--raw .mps-label {
      font-family:'Cinzel',serif; font-size:clamp(0.32rem,1.7vw,0.44rem) !important; font-weight:700;
      opacity:1; display:flex; align-items:center; justify-content:center; gap:3px;
      white-space:nowrap; line-height:1.1; text-transform:uppercase; letter-spacing:0.04em; color:#fff;
      width:100%; padding:2px 4px; margin:0 0 2px;
      background:linear-gradient(180deg, rgba(94,37,150,0.62), rgba(46,16,66,0.5));
      border-bottom:1px solid rgba(167,139,250,0.3);
    }
body.live-scan #result .mock-body--raw .mps-val,
.cp-rich-panel .mock-body--raw .mps-val { padding:0 6px; }
body.live-scan #result .mock-price-col .mps-cond,
.cp-rich-panel .mock-price-col .mps-cond { padding:5px 6px 0; }
body.live-scan #result .mock-body--raw .mps-label .mps-tcg-logo,
.cp-rich-panel .mock-body--raw .mps-label .mps-tcg-logo { height:clamp(12px,3.4vw,17px); width:auto; }
body.live-scan #result .mock-body--raw .mps-val,
.cp-rich-panel .mock-body--raw .mps-val {
      font-family:'IBM Plex Mono',monospace; font-size:clamp(0.82rem,4.4vw,1.12rem) !important; font-weight:700; line-height:1.2;
      background:linear-gradient(90deg,var(--loss),#ff7a18,var(--cp-light-mute),var(--gain),var(--comp-accent-bright),var(--cp-violet-bright),var(--cp-coral-bright));
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-stroke:1px transparent; paint-order:stroke fill;
    }
body.live-scan #result .mock-body--raw .mps-val.mps-low,
.cp-rich-panel .mock-body--raw .mps-val.mps-low { -webkit-text-fill-color:var(--cp-coral); }
body.live-scan #result .mock-body--raw .mps-val.mps-mkt,
.cp-rich-panel .mock-body--raw .mps-val.mps-mkt { -webkit-text-fill-color:var(--cp-void); }
body.live-scan #result .label-price-section,
.cp-rich-panel .label-price-section {
      width:auto; max-width:100%; margin-top:5px !important;
      display:flex; flex-direction:column; align-items:stretch; gap:2px;
      padding-top:0; border-top:none;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .label-price-section,
.cp-rich-panel .mock-wrap:not(.graded-mode) .label-price-section {
      grid-column:3 !important; grid-row:2 !important; align-self:stretch !important;
      justify-self:end; align-items:flex-end; justify-content:space-between;
      margin-top:clamp(4px,1.6vw,9px) !important;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .scan-thumb-col,
.cp-rich-panel .mock-wrap:not(.graded-mode) .scan-thumb-col {
      align-self:start !important; justify-content:flex-start !important;
    }
body.live-scan #result .mock-wrap.graded-mode .label-price-section,
.cp-rich-panel .mock-wrap.graded-mode .label-price-section {
      grid-column:1 !important; grid-row:2 !important; align-self:start !important;
      justify-self:start; align-items:flex-start; margin-top:clamp(4px,1.6vw,9px) !important;
    }
body.live-scan #result .label-price-head,
.cp-rich-panel .label-price-head {
      display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
      gap:clamp(1px,0.6vw,3px); width:100%; box-sizing:border-box;
    }
body.live-scan #result .lp-title,
.cp-rich-panel .lp-title {
      font-family:'Cinzel',serif; font-size:0.36rem; font-weight:600; text-align:center;
      letter-spacing:0.03em; text-transform:uppercase; color:rgba(255,255,255,0.45);
    }
body.live-scan #result .lp-toggle,
.cp-rich-panel .lp-toggle {
      display:flex; width:100%; min-width:0; box-sizing:border-box;
      border:1px solid rgba(167,139,250,0.3); border-radius:4px; overflow:hidden;
    }
body.live-scan #result .lp-opt,
.cp-rich-panel .lp-opt {
      flex:1 1 0; min-width:0; text-align:center; justify-content:center;
      font-family:'Exo 2',sans-serif; font-size:0.38rem; font-weight:600; text-transform:uppercase;
      padding:1px 2px; min-height:0 !important; background:transparent; border:none;
      color:rgba(255,255,255,0.4); cursor:pointer; letter-spacing:0.02em; line-height:1.3;
    }
body.live-scan #result .lp-opt.active,
.cp-rich-panel .lp-opt.active { background:rgba(138,63,199,0.25); color:#fff; }
body.live-scan #result .label-price-section .sticker-box,
.cp-rich-panel .label-price-section .sticker-box {
      margin-top:0 !important; width:100% !important; justify-content:center;
    }
body.live-scan #result .mock-price-col .scan-qty-stepper,
.cp-rich-panel .mock-price-col .scan-qty-stepper {
      width:100% !important; justify-content:center; margin:5px auto 0 !important;
      padding-top:5px; border-top:1px solid rgba(167,139,250,0.18);
    }
body.live-scan #result .scan-qty-add-row,
.cp-rich-panel .scan-qty-add-row {
      display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
      margin-top:5px; padding-top:5px; border-top:1px solid rgba(167,139,250,0.18);
    }
body.live-scan #result .scan-qty-add-row .scan-qty-stepper,
.cp-rich-panel .scan-qty-add-row .scan-qty-stepper {
      width:auto !important; margin:0 !important; padding:0 !important; border-top:none !important; flex:0 0 auto;
    }
body.live-scan #result .scan-qty-add-row .scan-add-dd,
.cp-rich-panel .scan-qty-add-row .scan-add-dd {
      flex:1 1 auto; width:auto; margin-top:0 !important; padding-top:0 !important; border-top:none !important;
    }
body.live-scan #result .scan-qty-add-row .scan-add-dd .cp-dd-trigger,
.cp-rich-panel .scan-qty-add-row .scan-add-dd .cp-dd-trigger {
      font-size:0.44rem !important; padding:3px 5px !important;
    }
body.live-scan #result .scan-cert-graded,
.cp-rich-panel .scan-cert-graded { display:none; }
body.live-scan #result .mock-wrap.graded-mode .scan-cert-graded,
.cp-rich-panel .mock-wrap.graded-mode .scan-cert-graded { display:flex; }
body.live-scan #result .mock-wrap.graded-mode .scan-action-row .scan-psa-pop,
    body.live-scan #result .mock-wrap.graded-mode .scan-action-row .scan-cert-graded,
.cp-rich-panel .mock-wrap.graded-mode .scan-action-row .scan-psa-pop,
.cp-rich-panel .mock-wrap.graded-mode .scan-action-row .scan-cert-graded {
      min-height:22px !important; box-sizing:border-box !important;
      display:flex !important; align-items:center !important; justify-content:center !important;
      font-family:'Cinzel',serif !important; font-size:0.36rem !important; font-weight:700 !important;
      letter-spacing:0.04em !important; text-transform:uppercase !important; color:#fff !important;
      background:rgba(12,8,19,0.85) !important; border:1px solid rgba(168,85,247,0.15) !important;
      border-radius:4px !important; padding:2px 7px !important; white-space:normal !important;
      line-height:1.1 !important; text-decoration:none !important;
      text-shadow:0 0 3px var(--cp-violet), 0 0 6px rgba(226,122,94,0.5), 0 0 1px #fff !important;
    }
body.live-scan #result .mock-wrap.graded-mode .mock-body--graded,
.cp-rich-panel .mock-wrap.graded-mode .mock-body--graded {
      display:block !important; grid-column:2 / -1 !important; grid-row:2 !important;
      align-self:start !important; min-width:0;
    }
body.live-scan #result .mock-wrap.graded-mode .mgr-section,
.cp-rich-panel .mock-wrap.graded-mode .mgr-section { display:block !important; margin-top:0 !important; }
body.live-scan #result .mock-wrap.graded-mode .mgr-header,
.cp-rich-panel .mock-wrap.graded-mode .mgr-header {
      display:flex !important; align-items:center; justify-content:space-between; gap:6px;
      font-family:'Cinzel',serif !important; font-size:0.5rem !important; letter-spacing:0.06em;
      text-transform:uppercase; color:rgba(255,255,255,0.55) !important; margin-bottom:4px !important;
      white-space:nowrap;
    }
body.live-scan #result .mock-wrap.graded-mode .mgr-grade-drop,
.cp-rich-panel .mock-wrap.graded-mode .mgr-grade-drop {
      color:#fff !important; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:0.5rem;
    }
body.live-scan #result .mock-wrap.graded-mode .mock-layout,
.cp-rich-panel .mock-wrap.graded-mode .mock-layout {
      grid-template-rows:min-content !important; align-content:start !important;
    }
body.live-scan #result .mock-wrap.graded-mode .scan-thumb-col,
.cp-rich-panel .mock-wrap.graded-mode .scan-thumb-col {
      grid-column:1 !important; grid-row:1 !important; align-self:end !important;
    }
body.live-scan #result .mock-wrap.graded-mode .mock-body--graded,
.cp-rich-panel .mock-wrap.graded-mode .mock-body--graded {
      grid-column:2 / -1 !important; grid-row:1 !important; align-self:stretch !important;
      display:flex !important; flex-direction:column;
    }
body.live-scan #result .mock-wrap.graded-mode .mock-body--graded .mgr-section,
.cp-rich-panel .mock-wrap.graded-mode .mock-body--graded .mgr-section { flex:1 1 auto; display:flex !important; flex-direction:column; }
body.live-scan #result .mock-wrap.graded-mode .mock-body--graded .mgr-co-row,
.cp-rich-panel .mock-wrap.graded-mode .mock-body--graded .mgr-co-row {
      flex:1 1 auto; grid-template-rows:1fr auto !important; align-content:stretch !important;
    }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-row > .mock-top,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-row > .mock-top {
      grid-column:1 / 9 !important; grid-row:1 !important; align-self:start !important;
      justify-self:stretch !important; min-width:0; height:clamp(66px,20vw,92px);
    }
body.live-scan #result .mock-wrap.graded-mode .mgr-header,
.cp-rich-panel .mock-wrap.graded-mode .mgr-header { display:none !important; }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-row,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-row {
      display:grid !important; grid-template-columns:repeat(12,1fr) !important;
      grid-auto-rows:auto !important;
      column-gap:clamp(3px,1.4vw,7px) !important; row-gap:clamp(8px,2.8vw,15px) !important;
    }
body.live-scan #result .mock-wrap.graded-mode .scan-thumb-col .mock-thumb,
.cp-rich-panel .mock-wrap.graded-mode .scan-thumb-col .mock-thumb {
      width:clamp(62px,19vw,88px) !important; min-width:0 !important; max-width:100% !important;
      aspect-ratio:5/7;
    }
body.live-scan #result .mock-wrap.graded-mode .scan-thumb-col .mock-thumb img,
.cp-rich-panel .mock-wrap.graded-mode .scan-thumb-col .mock-thumb img {
      width:100% !important; height:100% !important; min-width:0 !important; max-width:100% !important;
      object-fit:contain !important; display:block;
    }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-box,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-box {
      height:clamp(52px,16vw,72px) !important; box-sizing:border-box !important;
      display:flex !important; flex-direction:column; align-items:center; justify-content:flex-start; gap:1px;
      background:rgba(248,244,255,0.06) !important; border:1px solid rgba(168,85,247,0.25) !important;
      border-radius:clamp(5px,1.6vw,9px) !important; padding:clamp(3px,1.4vw,7px) clamp(4px,1.6vw,8px) !important; min-width:0; overflow:hidden;
    }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-name,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-name { font-size:clamp(0.4rem,2vw,0.56rem) !important; margin:0 !important; }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-avg,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-avg {
      margin:0 0 2px !important; display:flex !important; align-items:center; justify-content:center; gap:3px;
    }
body.live-scan #result .mgr-mkt-lbl,
.cp-rich-panel .mgr-mkt-lbl {
      font-family:'Cinzel',serif; font-size:clamp(0.3rem,1.5vw,0.42rem); font-weight:700; letter-spacing:0.08em;
      color:#fff; background:linear-gradient(135deg,var(--cp-violet-bright),var(--cp-violet));
      padding:1px 3px; border-radius:3px; line-height:1; text-transform:uppercase;
      box-shadow:0 0 4px rgba(138,63,199,0.5);
    }
body.live-scan #result .mgr-mkt-val,
.cp-rich-panel .mgr-mkt-val {
      font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--cp-ink); font-size:clamp(0.6rem,3vw,0.84rem); letter-spacing:-0.01em;
    }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-matched .mgr-mkt-val,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-matched .mgr-mkt-val { font-size:clamp(0.54rem,2.7vw,0.76rem); }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-matched .mgr-mkt-lbl,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-matched .mgr-mkt-lbl { font-size:clamp(0.28rem,1.4vw,0.38rem); }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-matched .mgr-sold-row,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-matched .mgr-sold-row { font-size:clamp(0.3rem,1.55vw,0.44rem) !important; gap:2px; }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-matched .mgr-co-avg,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-matched .mgr-co-avg { gap:2px !important; }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-solds,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-solds { display:flex !important; flex-direction:column; gap:0; width:100%; align-items:stretch; }
body.live-scan #result .mock-wrap.graded-mode .mgr-sold-row,
.cp-rich-panel .mock-wrap.graded-mode .mgr-sold-row {
      font-size:clamp(0.34rem,1.8vw,0.5rem) !important; color:var(--cp-ink) !important;
      display:flex !important; align-items:center; gap:3px; white-space:nowrap; padding:0 1px;
    }
body.live-scan #result .mgr-sold-logo,
.cp-rich-panel .mgr-sold-logo { height:clamp(9px,2.8vw,13px); width:auto; max-width:22px; flex:0 0 auto; object-fit:contain; opacity:0.9; }
body.live-scan #result .mgr-sold-price,
.cp-rich-panel .mgr-sold-price { font-weight:600; }
body.live-scan #result .mock-wrap.graded-mode .mgr-sold-row .mgr-sold-date,
.cp-rich-panel .mock-wrap.graded-mode .mgr-sold-row .mgr-sold-date { margin-left:auto; font-size:0.92em; color:rgba(30,20,48,0.55) !important; }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-none,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-none { font-size:0.36rem !important; opacity:0.4; }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-box:not(.mgr-co-matched),
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-box:not(.mgr-co-matched) {
      grid-column:span 3 !important; grid-row:2 !important;
    }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-box.mgr-co-matched,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-box.mgr-co-matched {
      grid-column:9 / -1 !important; grid-row:1 !important;
      align-self:stretch !important; height:auto !important; min-height:clamp(66px,20vw,92px) !important;
      justify-content:flex-start !important;   /* fills down to just above the bottom row → 5 sales */
      background:rgba(228,218,240,0.97) !important;
    }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-matched .mgr-co-name,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-matched .mgr-co-name { font-size:clamp(0.44rem,2.2vw,0.6rem) !important; }
body.live-scan #result .mock-wrap.graded-mode .mgr-co-matched .mgr-co-avg,
.cp-rich-panel .mock-wrap.graded-mode .mgr-co-matched .mgr-co-avg { font-size:clamp(0.64rem,3.2vw,0.86rem) !important; }
body.live-scan #result .scan-thumb-col,
.cp-rich-panel .scan-thumb-col {
      grid-column:1 !important; grid-row:1 / -1 !important; align-self:start !important;
      justify-self:stretch !important;
      display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
      gap:clamp(4px,1.5vw,8px); min-width:0; width:100%;
    }
body.live-scan #result .mock-thumb,
.cp-rich-panel .mock-thumb {
      background:transparent !important; border:none !important; padding:0 !important; box-shadow:none !important;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .scan-thumb-col .mock-thumb,
.cp-rich-panel .mock-wrap:not(.graded-mode) .scan-thumb-col .mock-thumb {
      width:100% !important; max-width:100% !important; min-width:0 !important;
      overflow:visible !important; flex:0 1 auto; aspect-ratio:5/7;
    }
body.live-scan #result .mock-wrap:not(.graded-mode) .scan-thumb-col .mock-thumb img,
.cp-rich-panel .mock-wrap:not(.graded-mode) .scan-thumb-col .mock-thumb img {
      width:100% !important; height:100% !important; max-width:100% !important; min-width:0 !important;
      object-fit:contain !important; display:block;
    }
body.live-scan #result .scan-thumb-col .delete-btn,
.cp-rich-panel .scan-thumb-col .delete-btn {
      font-family:'Cinzel',serif; font-size:0.62rem; font-weight:600;
      letter-spacing:0.04em; text-transform:uppercase;
      color:rgba(210,59,59,0.7); background:none; border:none; cursor:pointer;
      padding:3px 8px; min-height:0 !important;
    }
body.live-scan #result .scan-thumb-col .delete-btn:hover,
.cp-rich-panel .scan-thumb-col .delete-btn:hover { color:var(--loss); }
body.live-scan #result .scan-alt-row,
.cp-rich-panel .scan-alt-row {
      display:flex; align-items:center; justify-content:space-between; gap:8px;
      width:100%; padding:5px 2px 0; margin-top:2px;
    }
body.live-scan #result .scan-alt-dd,
.cp-rich-panel .scan-alt-dd { position:relative; overflow:visible; flex:0 1 auto; }
body.live-scan #result .scan-alt-dd .cp-dd-trigger,
.cp-rich-panel .scan-alt-dd .cp-dd-trigger {
      font-size:0.34rem !important; line-height:1.15 !important; padding:2px 11px 2px 5px !important;
      letter-spacing:0.02em !important; border-radius:4px !important;
      white-space:normal !important; text-align:center; min-width:0;
    }
body.live-scan #result .scan-alt-dd .alt-lbl,
.cp-rich-panel .scan-alt-dd .alt-lbl { display:inline-block; }
body.live-scan #result .scan-alt-dd .cp-dd-trigger::after,
.cp-rich-panel .scan-alt-dd .cp-dd-trigger::after { right:5px !important; font-size:0.7em !important; }
body.live-scan #result .scan-alt-dd .cp-dd-list,
.cp-rich-panel .scan-alt-dd .cp-dd-list {
      left:0 !important; right:auto !important; top:calc(100% + 4px) !important; bottom:auto !important;
      min-width:max-content !important; z-index:10003 !important;
    }
body.live-scan #result .scan-alt-dd .cp-dd-item,
.cp-rich-panel .scan-alt-dd .cp-dd-item { font-size:0.6rem !important; padding:5px 12px !important; white-space:nowrap; }
body.live-scan #result .scan-alt-dd .alt-meta,
.cp-rich-panel .scan-alt-dd .alt-meta { opacity:0.55; font-size:0.85em; margin-left:6px; }
body.live-scan #result .scan-alt-dd .cp-dd-empty,
.cp-rich-panel .scan-alt-dd .cp-dd-empty { opacity:0.5; font-style:italic; }
body.live-scan #result .scan-read-btn,
.cp-rich-panel .scan-read-btn {
      flex:0 0 auto; font-family:'Cinzel',serif; font-size:0.36rem; font-weight:700;
      letter-spacing:0.04em; text-transform:uppercase; color:#fff;
      background:rgba(12,8,19,0.85); border:1px solid rgba(168,85,247,0.15); border-radius:4px;
      cursor:pointer; padding:2px 7px; line-height:1.1; text-align:center; white-space:normal;
      text-shadow:0 0 3px var(--cp-violet), 0 0 6px rgba(226,122,94,0.5), 0 0 1px #fff;
    }
body.live-scan #result .scan-read-btn:hover,
.cp-rich-panel .scan-read-btn:hover { border-color:rgba(168,85,247,0.45); }
body.live-scan #result .scan-read-btn.active,
.cp-rich-panel .scan-read-btn.active { border-color:var(--neon-cyan,#00f5ff); color:var(--neon-cyan,#00f5ff); }
/* Only the manual-search panel hides the legacy blocks — its action-row
   "Suggested Alternatives" + "What it read" render fine (no camera cramping).
   The LIVE scanner KEEPS the full-width below-card blocks: in the camera frame the
   action row is a no-wrap flex strip whose far-left (Suggested Alternatives) and
   far-right (What it read) ends overflow off the sheet and get clipped, so those
   reliable below-card blocks are the real affordance on the scanner. */
.cp-rich-panel .candidate-list,
.cp-rich-panel .ocr-box { display:none !important; }
body.live-scan #result .scan-badge.foil,
.cp-rich-panel .scan-badge.foil { display:none !important; }
body.live-scan #result .foil-tag,
.cp-rich-panel .foil-tag {
      display:inline-block; font-size:0.5rem; letter-spacing:0.06em; text-transform:uppercase;
      padding:2px 7px; border-radius:4px; font-family:'IBM Plex Mono',monospace; font-weight:600; margin-top:3px;
    }
body.live-scan #result .foil-tag.ft-holo,
.cp-rich-panel .foil-tag.ft-holo    { border:1px solid rgba(255,215,0,0.45);  color:var(--cp-light-mute); background:rgba(255,215,0,0.09); }
body.live-scan #result .foil-tag.ft-reverse,
.cp-rich-panel .foil-tag.ft-reverse { border:1px solid rgba(0,245,255,0.40);  color:var(--comp-accent-bright); background:rgba(0,245,255,0.08); }
body.live-scan #result .foil-tag.ft-normal,
.cp-rich-panel .foil-tag.ft-normal  { border:1px solid rgba(205,205,215,0.30); color:rgba(222,222,232,0.7); background:rgba(205,205,215,0.06); }
body.live-scan #result .foil-tag.ft-foil,
.cp-rich-panel .foil-tag.ft-foil    { border:1px solid rgba(167,139,250,0.45); color:var(--cp-violet-bright); background:rgba(167,139,250,0.10); }
body.live-scan #result .foil-tag.ft-etched,
.cp-rich-panel .foil-tag.ft-etched  { border:1px solid rgba(251,146,60,0.45);  color:var(--cp-coral-bright); background:rgba(251,146,60,0.09); }
body.live-scan #result .foil-tag.ft-other,
.cp-rich-panel .foil-tag.ft-other   { border:1px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.05); }
body.live-scan #result .scan-read-panel,
.cp-rich-panel .scan-read-panel {
      width:100%; margin:5px 0 0; padding:6px 10px; border-radius:6px;
      background:rgba(0,0,0,0.25); border:1px solid rgba(167,139,250,0.20);
    }
body.live-scan #result .srp-title,
.cp-rich-panel .srp-title {
      font-family:'Cinzel',serif; font-size:0.42rem; letter-spacing:0.08em; text-transform:uppercase;
      color:rgba(255,255,255,0.4); margin-bottom:3px;
    }
body.live-scan #result .srp-row,
.cp-rich-panel .srp-row { display:flex; justify-content:space-between; gap:10px; padding:1px 0; }
body.live-scan #result .srp-k,
.cp-rich-panel .srp-k {
      color:rgba(255,255,255,0.45); font-family:'Cinzel',serif; text-transform:uppercase;
      letter-spacing:0.04em; font-size:0.48rem;
    }
body.live-scan #result .srp-v,
.cp-rich-panel .srp-v { color:#fff; font-family:'IBM Plex Mono',monospace; font-size:0.55rem; }
body.live-scan #result .srp-empty,
.cp-rich-panel .srp-empty { color:rgba(255,255,255,0.4); font-style:italic; font-size:0.5rem; }
body.live-scan #result .scan-read-btn.active,
.cp-rich-panel .scan-read-btn.active { color:var(--neon-cyan,#00f5ff); }
body.live-scan #result .scan-thumb-col .mock-thumb,
.cp-rich-panel .scan-thumb-col .mock-thumb {
      width:104px !important; min-width:104px !important; max-width:104px !important;
      border-radius:6px; overflow:hidden; flex-shrink:0;
    }
body.live-scan #result .scan-thumb-col .mock-thumb img,
.cp-rich-panel .scan-thumb-col .mock-thumb img {
      width:100% !important; height:auto !important; max-width:104px !important;
      object-fit:contain;
    }
body.live-scan #result .scan-qty-stepper,
.cp-rich-panel .scan-qty-stepper {
      display:flex; align-items:center; justify-content:center; gap:2px;
      margin-top:4px;
    }
body.live-scan #result .scan-qty-stepper button,
.cp-rich-panel .scan-qty-stepper button {
      width:15px; height:15px; border-radius:3px;
      border:1px solid rgba(167,139,250,0.3); background:rgba(167,139,250,0.08);
      color:var(--cp-violet-bright); font-size:0.55rem; font-weight:700; cursor:pointer;
      display:flex; align-items:center; justify-content:center; padding:0;
      min-height:0 !important;
    }
body.live-scan #result .scan-qty-stepper button:hover,
.cp-rich-panel .scan-qty-stepper button:hover {
      background:rgba(167,139,250,0.2);
    }
body.live-scan #result .scan-qty-stepper .scan-qty-val,
.cp-rich-panel .scan-qty-stepper .scan-qty-val {
      font-family:'IBM Plex Mono',monospace; font-size:0.68rem; font-weight:700;
      color:#fff; min-width:16px; text-align:center;
    }
body.live-scan #result .scan-qty-stepper .scan-qty-label,
.cp-rich-panel .scan-qty-stepper .scan-qty-label {
      font-family:'Cinzel',serif; font-size:0.4rem; font-weight:600;
      letter-spacing:0.04em; text-transform:uppercase; color:rgba(255,255,255,0.35);
      margin-right:2px;
    }
body.live-scan #result .scan-action-row .graded-toggle,
.cp-rich-panel .scan-action-row .graded-toggle {
      font-size:0.42rem !important; padding:3px 6px !important; gap:3px !important;
    }
body.live-scan #result .scan-action-row .graded-toggle .gt-label,
.cp-rich-panel .scan-action-row .graded-toggle .gt-label {
      font-size:0.38rem !important; letter-spacing:0.02em !important;
      text-align:center; line-height:1.1; display:inline-block;
    }
body.live-scan #result .scan-action-row .graded-toggle .gt-switch,
.cp-rich-panel .scan-action-row .graded-toggle .gt-switch {
      width:20px !important; height:11px !important;
    }
body.live-scan #result .scan-action-row .graded-toggle .gt-switch::after,
.cp-rich-panel .scan-action-row .graded-toggle .gt-switch::after {
      width:8px !important; height:8px !important;
    }
/* ════════════════════════════════════════════════════════════════════════════
   Rainbow makeover (BOTH pages) — graded toggle + qty stepper match the cond/foil
   pills: rainbow-gradient ring (transparent interior) + white-fill rainbow text.
   ════════════════════════════════════════════════════════════════════════════ */
/* — Graded toggle → rainbow-border pill — */
body.live-scan #result .scan-action-row .graded-toggle,
.cp-rich-panel .scan-action-row .graded-toggle {
      position:relative !important; background:transparent !important;
      border:none !important; border-radius:999px !important; overflow:visible !important;
    }
body.live-scan #result .scan-action-row .graded-toggle::before,
.cp-rich-panel .scan-action-row .graded-toggle::before {
      content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
      background:var(--holo);
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
    }
body.live-scan #result .scan-action-row .graded-toggle .gt-label,
.cp-rich-panel .scan-action-row .graded-toggle .gt-label {
      background:var(--holo) !important;
      -webkit-background-clip:text !important; background-clip:text !important;
      -webkit-text-fill-color:#fff !important; -webkit-text-stroke:0.45px transparent; paint-order:stroke fill;
    }
/* off-state switch was grey → violet track + knob (active stays orange for on/off contrast) */
body.live-scan #result .scan-action-row .graded-toggle:not(.active) .gt-switch,
.cp-rich-panel .scan-action-row .graded-toggle:not(.active) .gt-switch {
      background:rgba(138,63,199,0.25) !important;
    }
body.live-scan #result .scan-action-row .graded-toggle:not(.active) .gt-switch::after,
.cp-rich-panel .scan-action-row .graded-toggle:not(.active) .gt-switch::after {
      background:var(--cp-violet-bright) !important;
    }
/* — Qty stepper → rainbow-border pill + white-fill rainbow label/value/±  — */
body.live-scan #result .scan-qty-stepper,
.cp-rich-panel .scan-qty-stepper {
      position:relative; background:transparent;
      border-radius:999px; padding:2px 6px; overflow:visible;
    }
body.live-scan #result .scan-qty-stepper::before,
.cp-rich-panel .scan-qty-stepper::before {
      content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
      background:var(--holo);
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
    }
body.live-scan #result .scan-qty-stepper .scan-qty-label,
.cp-rich-panel .scan-qty-stepper .scan-qty-label,
body.live-scan #result .scan-qty-stepper .scan-qty-val,
.cp-rich-panel .scan-qty-stepper .scan-qty-val,
body.live-scan #result .scan-qty-stepper button,
.cp-rich-panel .scan-qty-stepper button {
      background:var(--holo) !important;
      -webkit-background-clip:text !important; background-clip:text !important;
      -webkit-text-fill-color:#fff !important; -webkit-text-stroke:0.4px transparent; paint-order:stroke fill;
    }
body.live-scan #result .scan-qty-stepper button,
.cp-rich-panel .scan-qty-stepper button {
      border:none !important;
    }
body.live-scan #result .scan-action-row,
.cp-rich-panel .scan-action-row {
      display:flex; align-items:center; justify-content:space-between; gap:3px;
      margin-top:6px; padding:6px 6px 0; flex-wrap:nowrap;
      border-top:1px solid rgba(167,139,250,0.18);
      position:relative; overflow:visible;
    }
body.live-scan #result .scan-action-row .cp-dd,
.cp-rich-panel .scan-action-row .cp-dd {
      flex:0 1 auto; min-width:0;
    }
body.live-scan #result .scan-action-row .cp-dd-trigger,
    body.live-scan #result .scan-action-row .cp-dd-static,
    body.live-scan #result .scan-action-row .scan-read-btn,
    body.live-scan #result .scan-action-row .graded-toggle,
.cp-rich-panel .scan-action-row .cp-dd-trigger,
.cp-rich-panel .scan-action-row .cp-dd-static,
.cp-rich-panel .scan-action-row .scan-read-btn,
.cp-rich-panel .scan-action-row .graded-toggle {
      min-height:22px !important; box-sizing:border-box !important;
      display:flex !important; align-items:center !important; justify-content:center !important;
    }
body.live-scan #result .scan-action-row .cp-dd-trigger,
.cp-rich-panel .scan-action-row .cp-dd-trigger {
      font-size:0.36rem !important; padding:2px 13px 2px 9px !important;
      letter-spacing:0.02em !important; border-radius:4px !important;
      text-align:center; white-space:normal; line-height:1.1;
    }
body.live-scan #result .scan-action-row .cp-dd-trigger,
    body.live-scan #result .scan-action-row .cp-dd-static,
    body.live-scan #result .scan-action-row .scan-read-btn,
.cp-rich-panel .scan-action-row .cp-dd-trigger,
.cp-rich-panel .scan-action-row .cp-dd-static,
.cp-rich-panel .scan-action-row .scan-read-btn { text-shadow:none !important; }
body.live-scan #result .scan-action-row .cp-dd-trigger::after,
.cp-rich-panel .scan-action-row .cp-dd-trigger::after {
      content:'⌄' !important; right:5px !important; top:44% !important; font-size:0.95em !important;
      color:rgba(198,185,217,0.8) !important; text-shadow:none !important;
    }
body.live-scan #result .scan-action-row .cp-dd-rainbow,
.cp-rich-panel .scan-action-row .cp-dd-rainbow {
      background:var(--holo);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:#fff; -webkit-text-stroke:0.5px transparent; paint-order:stroke fill;
    }
body.live-scan #result .scan-action-row .cp-dd-trigger,
    body.live-scan #result .scan-action-row .cp-dd-static,
    body.live-scan #result .scan-action-row .scan-read-btn,
.cp-rich-panel .scan-action-row .cp-dd-trigger,
.cp-rich-panel .scan-action-row .cp-dd-static,
.cp-rich-panel .scan-action-row .scan-read-btn { position:relative !important; }
body.live-scan #result .scan-action-row .cp-dd-trigger::before,
    body.live-scan #result .scan-action-row .cp-dd-static::before,
    body.live-scan #result .scan-action-row .scan-read-btn::before,
.cp-rich-panel .scan-action-row .cp-dd-trigger::before,
.cp-rich-panel .scan-action-row .cp-dd-static::before,
.cp-rich-panel .scan-action-row .scan-read-btn::before {
      content:''; position:absolute; inset:0; border-radius:inherit; padding:1.3px;
      background:var(--holo);
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
    }
body.live-scan #result .scan-action-row .cp-dd-static,
.cp-rich-panel .scan-action-row .cp-dd-static {
      font-size:0.36rem !important; padding:2px 5px !important; text-align:center;
      white-space:normal; line-height:1.1;
    }
body.live-scan #result .scan-action-row .cp-dd-list,
.cp-rich-panel .scan-action-row .cp-dd-list { z-index:10003 !important; }
body.live-scan #result .scan-add-dd,
.cp-rich-panel .scan-add-dd { position:relative; overflow:visible; margin-top:5px; width:100%; }
body.live-scan #result .scan-add-dd .cp-dd-trigger,
.cp-rich-panel .scan-add-dd .cp-dd-trigger {
      width:100%; text-align:center; font-size:0.5rem !important; padding:4px 6px !important;
    }
body.live-scan #result .scan-add-dd .cp-dd-list,
.cp-rich-panel .scan-add-dd .cp-dd-list {
      position:absolute !important;
      z-index:10003 !important;
      bottom:calc(100% + 4px) !important; top:auto !important;
      left:auto !important; right:0 !important;
      min-width:max-content !important; width:max-content !important;
    }
body.live-scan #result .scan-add-dd.open .cp-dd-list,
.cp-rich-panel .scan-add-dd.open .cp-dd-list { display:block !important; }
body.live-scan #result .scan-add-dd .cp-dd-item,
.cp-rich-panel .scan-add-dd .cp-dd-item {
      padding:5px 12px !important; font-size:0.64rem !important; white-space:nowrap !important;
    }
body.live-scan #result .scan-add-dd .cp-dd-trigger::after,
.cp-rich-panel .scan-add-dd .cp-dd-trigger::after {
      content:'▴' !important;
    }
body.live-scan #result .scan-action-row .scan-text-btn,
.cp-rich-panel .scan-action-row .scan-text-btn {
      font-family:'Cinzel',serif; font-size:0.56rem; font-weight:600;
      letter-spacing:0.04em; text-transform:uppercase;
      color:rgba(255,255,255,0.5); background:none; border:none;
      cursor:pointer; padding:4px 8px; transition:color 0.15s;
    }
body.live-scan #result .scan-action-row .scan-text-btn:hover,
.cp-rich-panel .scan-action-row .scan-text-btn:hover {
      color:var(--neon-cyan,#00f5ff);
    }
body.live-scan #result .scan-action-row .scan-text-btn.delete-btn,
.cp-rich-panel .scan-action-row .scan-text-btn.delete-btn {
      color:rgba(255,106,107,0.6);
    }
body.live-scan #result .scan-action-row .scan-text-btn.delete-btn:hover,
.cp-rich-panel .scan-action-row .scan-text-btn.delete-btn:hover {
      color:#ff6b6b;
    }
body.live-scan #result .scan-psa-pop,
.cp-rich-panel .scan-psa-pop { display:none; }
body.live-scan #result .mock-wrap.graded-mode .scan-psa-pop,
.cp-rich-panel .mock-wrap.graded-mode .scan-psa-pop { display:inline-block; }

/* ════════════════════════════════════════════════════════════════════════════
   SEARCH-ONLY pill-bar layout (.cp-rich-panel, no notch): Qty + Add-to ride inline
   at the end of the action row. These come AFTER all base rules so they win on order.
   Scoped to .cp-rich-panel → the scanner (notch layout) is untouched.
   ════════════════════════════════════════════════════════════════════════════ */
/* ONE pill row, never wraps to a second row. Left pills shrink (text may wrap to ≤2
   lines inside the pill); Qty + Add-to ride together at the right, side by side. */
.cp-rich-panel .scan-action-row {
  flex-wrap:nowrap !important; justify-content:flex-start !important;
  gap:3px !important; padding:6px 4px 0 !important; overflow:visible !important;
}
/* Every left-side pill is shrinkable so the whole set fits one row at 320px. */
.cp-rich-panel .scan-action-row .cp-dd,
.cp-rich-panel .scan-action-row .cp-dd-static,
.cp-rich-panel .scan-action-row .graded-toggle {
  flex:0 1 auto !important; min-width:0 !important;
}
.cp-rich-panel .scan-action-row .cp-dd-trigger,
.cp-rich-panel .scan-action-row .cp-dd-static {
  font-size:0.34rem !important; padding:2px 9px 2px 5px !important;
  white-space:normal !important; line-height:1.05 !important; overflow:hidden !important;
}
.cp-rich-panel .scan-action-row .cp-dd-trigger::after { right:3px !important; }
/* Qty + Add-to: compact, fixed-width unit pinned to the right; never shrinks away. */
.cp-rich-panel .scan-action-row .scan-qty-add-row {
  width:auto !important; margin:0 0 0 auto !important; padding:0 !important;
  border-top:none !important; gap:3px !important; flex:0 0 auto !important;
  align-items:center !important;
}
.cp-rich-panel .scan-action-row .scan-qty-add-row .scan-add-dd {
  flex:0 0 auto !important; width:auto !important; margin-top:0 !important;
}
.cp-rich-panel .scan-action-row .scan-qty-add-row .scan-add-dd .cp-dd-trigger {
  width:auto !important; font-size:0.42rem !important; padding:3px 7px !important;
}
.cp-rich-panel .scan-action-row .scan-qty-add-row .scan-qty-stepper {
  gap:2px !important; margin-top:0 !important;
}
.cp-rich-panel .scan-action-row .scan-qty-add-row .scan-qty-stepper button {
  width:13px !important; height:13px !important;
}
.cp-rich-panel .scan-action-row .scan-qty-add-row .scan-qty-stepper .scan-qty-val {
  font-size:0.58rem !important; min-width:12px !important;
}
.cp-rich-panel .scan-action-row .scan-qty-add-row .scan-qty-stepper .scan-qty-label {
  font-size:0.38rem !important; letter-spacing:0.02em !important; margin-right:1px !important;
}


/* ═══════════ RESULTS PANEL LAYOUT v2 (2026-06-10, founder-approved) ═══════════
   Narrow right rail (= print-button width), compact steppers, quiet pills.
   Self-contained — no dependency on cp-refresh.css. */
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-layout,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-layout{
  /* Right rail holds the 2x3 sticker. RESPONSIVE, not a fixed 150px: on a narrow
     phone (360px) image(≤138) + 150 sticker + gaps ≈ 310px left the price/sales
     column ~50px and overflowed the panel with no scroll. clamp() lets the rail
     shrink to ~104px on narrow screens (still fits the 26px×3 steppers + gaps) and
     only grows to 150px when there's room. Image col also caps a touch smaller. */
  grid-template-columns:clamp(88px,26vw,128px) minmax(0,1fr) clamp(104px,30vw,150px) !important;
  min-width:0 !important;
}
body.live-scan #result .label-price-section,
.cp-rich-panel .label-price-section{width:100% !important;max-width:150px !important;min-width:0 !important}
body.live-scan #result .sticker-box .stk-step,
.cp-rich-panel .sticker-box .stk-step{
  /* bigger tap targets so the +/- are not easy to fat-finger */
  min-width:26px !important;width:auto !important;
  height:30px !important;min-height:30px !important;max-height:34px !important;
  font-size:.62rem !important;line-height:1 !important;padding:0 4px !important;border-radius:5px !important;
}
body.live-scan #result .sticker-box .sticker-input,
.cp-rich-panel .sticker-box .sticker-input{font-size:.78rem !important;min-width:30px !important}
body.live-scan #result .sticker-box .print-btn,
.cp-rich-panel .sticker-box .print-btn{height:100% !important;max-height:none !important;min-width:44px !important;font-size:.52rem !important;letter-spacing:.08em !important;align-self:stretch !important}
body.live-scan #result .sticker-box,
.cp-rich-panel .sticker-box{gap:2px !important}
body.live-scan #result .lp-opt,
.cp-rich-panel .lp-opt{font-size:.52rem !important;padding:1px 6px !important}
.cp-rich-panel .row-pill, body.live-scan #result .row-pill{
  border-radius:7px !important;padding:2px 8px !important;font-size:.62rem !important;
  background:rgba(12,8,19,0.6) !important;border:1px solid rgba(168,85,247,.25) !important;
  color:var(--cp-light-mute) !important;box-shadow:none !important;text-shadow:none !important;
}
.cp-rich-panel .row-pill.on, body.live-scan #result .row-pill.on{
  border:1px solid transparent !important;
  background:linear-gradient(180deg,rgba(58,28,96,.95),rgba(32,17,54,.95)) padding-box,
             linear-gradient(100deg,#9333ea,#c44ad1 14%,#ff3cac 30%,#ff5a4e 46%,#ff6a00 58%,#ffa927 72%,#ffd700 84%,#b069f0 100%) border-box !important;
  background-size:100% 100%,300% 100% !important;color:#fff !important;
}


/* ─── RESULTS PANEL v2.1: bottom alignment (founder spec) ───
   Sales panel hugs the bottom edge of the row, matching the card image;
   the right rail's PRINT bottom never extends past the left column. */
body.live-scan #result .mock-content,
.cp-rich-panel .mock-content{display:flex !important;flex-direction:column !important}
body.live-scan #result .mock-sales-stack,
.cp-rich-panel .mock-sales-stack{margin-top:auto !important;display:flex !important;flex-direction:column !important;justify-content:flex-end !important}
body.live-scan #result .mock-wrap:not(.graded-mode) .label-price-section,
.cp-rich-panel .mock-wrap:not(.graded-mode) .label-price-section{align-self:end !important}


/* ═══════════ RESULTS PANEL v2.2 (2026-06-11, founder spec) ═══════════
   Sticker → ~25% of the sales+sticker span; sales (col 2) absorbs the freed width
   and gets a min-height so 3-4 sales show without scrolling. The sticker shares
   col 3 with the price panel (price = row 1, sticker = row 2), so narrowing col 3
   also tightens the price readout — the $value font is reduced to stay legible.
   NOTE: search is domain-locked in preview; verify proportions on localhost/live. */
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-layout,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-layout{
  /* col3 (price readout + 2x3 sticker) floor RAISED 88→92px: the sticker grid's own
     child min-widths (2×22px steppers + 40px Print col + gaps ≈ 90px on a 360px phone)
     exceeded the old 88px cap and overflowed the panel edge. Floor now covers that
     min; the 1fr sales column (col2) absorbs the ~4-18px — the price/sales panel
     shrinks a touch instead of the sticker spilling. Verify proportions on live. */
  grid-template-columns:clamp(95px,30vw,138px) minmax(0,1fr) clamp(92px,20%,100px) !important;
}
body.live-scan #result .label-price-section,
.cp-rich-panel .label-price-section{width:100% !important;max-width:100% !important}
/* keep the $price legible in the narrower col 3 */
body.live-scan #result .mock-body--raw .mps-val,
.cp-rich-panel .mock-body--raw .mps-val{font-size:clamp(.6rem,2.3vw,.76rem) !important;letter-spacing:0 !important}
/* sales box: tall enough for 3-4 sales rows without an inner scrollbar */
body.live-scan #result .mock-body--raw .mcd-sales-box,
.cp-rich-panel .mock-body--raw .mcd-sales-box{min-height:clamp(96px,24vh,150px) !important}

/* RESULTS PANEL v2.3 REVERTED 2026-06-12: the cqi font-size !important rules here
   overrode the JS fit-to-box loop in card-rich-panel.js (inline, no !important),
   neutralizing it. Title scaling is owned by that loop (founder spec: scale, never
   truncate/wrap). Keep this file free of !important font-size on .mock-name/.mock-set. */

/* ═══════════ RESULTS PANEL v2.4 (2026-06-12) — sales header logos + decorative columns ═══════════
   Header: TCGplayer logo (left, over its column) · "Sales" · eBay logo (right, over its column).
   Columns: each marketplace gets a bordered, rounded panel with a brand-keyed accent bar so the
   two sources read as distinct columns. Empty/unauth state (both columns "No recent sales")
   halves the box height — verified 150px→75px in headless chromium. */
body.live-scan #result .mock-body--raw .mcd-sales-title,
.cp-rich-panel .mock-body--raw .mcd-sales-title{justify-content:space-between !important;gap:4px !important}
body.live-scan #result .mcd-sh-logo,
.cp-rich-panel .mcd-sh-logo{height:clamp(9px,2.6vw,13px);width:auto;flex:0 0 auto;object-fit:contain}
body.live-scan #result .mock-body--raw .mcd-sales-title::after,
.cp-rich-panel .mock-body--raw .mcd-sales-title::after{content:none !important}
body.live-scan #result .mock-body--raw .mcd-combined,
.cp-rich-panel .mock-body--raw .mcd-combined{gap:clamp(4px,1.6vw,8px) !important}
body.live-scan #result .mock-body--raw .mcd-col,
.cp-rich-panel .mock-body--raw .mcd-col{background:linear-gradient(180deg,rgba(255,255,255,0.55),rgba(248,244,255,0.18)) !important;border:1px solid rgba(168,85,247,0.3) !important;border-radius:7px !important;position:relative;padding-top:clamp(4px,1.4vw,7px) !important}
body.live-scan #result .mcd-col-tcg::before,body.live-scan #result .mcd-col-ebay::before,
.cp-rich-panel .mcd-col-tcg::before,.cp-rich-panel .mcd-col-ebay::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:0 0 2px 2px}
body.live-scan #result .mcd-col-tcg::before,
.cp-rich-panel .mcd-col-tcg::before{background:linear-gradient(90deg,#3b1d6e,#7c3aed)}
body.live-scan #result .mcd-col-ebay::before,
.cp-rich-panel .mcd-col-ebay::before{background:linear-gradient(90deg,#e53238,#f5af02 38%,#86b817 68%,#0064d2)}
body.live-scan #result .mock-body--raw .mcd-sales-box:has(.mcd-col-tcg .ls-empty):has(.mcd-col-ebay .ls-empty),
.cp-rich-panel .mock-body--raw .mcd-sales-box:has(.mcd-col-tcg .ls-empty):has(.mcd-col-ebay .ls-empty){min-height:clamp(48px,12vh,75px) !important}

/* ═══════════ RESULTS PANEL v2.5 (2026-06-12) — price 2-col + cool borders + sized logos ═══════════
   Mockup-approved: price readout = two side-by-side columns (TCG logo / label / price)
   under a black-on-rainbow condition chip; both price & sales panels get a holographic
   gradient border; "Sales" enlarged with header logos centered over their columns
   (eBay ~50%, TCG sized to match its padded PNG). Price column widened so the two prices
   fit side by side; title fit is owned by the JS scaler in card-rich-panel.js. */
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-layout,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-layout{grid-template-columns:clamp(95px,24vw,124px) minmax(0,1fr) clamp(108px,25%,138px) !important}
body.live-scan #result .mock-price-summary,.cp-rich-panel .mock-price-summary,
body.live-scan #result .mock-body--raw .mcd-sales-box,.cp-rich-panel .mock-body--raw .mcd-sales-box{
  border:1.5px solid transparent !important;
  background:linear-gradient(180deg,rgba(236,228,248,0.96),rgba(224,214,240,0.92)) padding-box,linear-gradient(135deg,var(--cp-violet),var(--cp-coral-bright) 35%,var(--cp-light-mute) 65%,var(--comp-accent-bright)) border-box !important;
  border-radius:10px !important;box-shadow:0 0 0 1px rgba(0,0,0,0.12),0 4px 14px rgba(94,37,150,0.22) !important;
}
body.live-scan #result .mps-cond,.cp-rich-panel .mps-cond{
  display:inline-block !important;align-self:center !important;font-family:'Cinzel',serif !important;font-weight:700 !important;
  font-size:clamp(0.3rem,1.3vw,0.4rem) !important;letter-spacing:0.05em !important;text-transform:uppercase !important;text-align:center !important;
  color:var(--cp-ink) !important;-webkit-text-fill-color:var(--cp-ink) !important;
  background:linear-gradient(#f0e8fa,#f0e8fa) padding-box,linear-gradient(120deg,var(--cp-coral-bright),var(--cp-light-mute) 33%,var(--gain) 66%,var(--comp-accent-bright)) border-box !important;
  border:1.5px solid transparent !important;border-radius:999px !important;padding:2px 9px !important;margin:5px auto 5px !important;
}
body.live-scan #result .mock-body--raw .mps-prices,.cp-rich-panel .mock-body--raw .mps-prices{
  display:flex !important;flex-direction:row !important;gap:0 !important;padding:1px 4px 6px !important;align-items:stretch !important;flex-wrap:nowrap !important;
}
body.live-scan #result .mock-body--raw .mps-col,.cp-rich-panel .mock-body--raw .mps-col{
  flex:1 1 0 !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:1px !important;padding:2px 4px !important;min-width:0 !important;
}
body.live-scan #result .mock-body--raw .mps-col:first-child,.cp-rich-panel .mock-body--raw .mps-col:first-child{border-right:1px solid rgba(168,85,247,0.28) !important}
body.live-scan #result .mock-body--raw .mps-col .mps-tcg-logo,.cp-rich-panel .mock-body--raw .mps-col .mps-tcg-logo{height:clamp(9px,2.4vw,13px) !important;width:auto !important;object-fit:contain !important}
body.live-scan #result .mock-body--raw .mps-col .mps-label,.cp-rich-panel .mock-body--raw .mps-col .mps-label{font-family:'Cinzel',serif !important;font-size:clamp(0.32rem,1.5vw,0.44rem) !important;text-transform:uppercase !important;letter-spacing:0.03em !important;color:rgba(94,37,150,0.85) !important;text-align:center !important;line-height:1.05 !important}
body.live-scan #result .mock-body--raw .mps-col .mps-val,.cp-rich-panel .mock-body--raw .mps-col .mps-val{font-family:var(--f-mono,monospace) !important;font-weight:700 !important;font-size:clamp(0.66rem,2.7vw,0.92rem) !important}
body.live-scan #result .mock-body--raw .mcd-sales-title,.cp-rich-panel .mock-body--raw .mcd-sales-title{display:grid !important;grid-template-columns:1fr auto 1fr !important;align-items:center !important;justify-content:initial !important;gap:4px !important;padding:3px 8px !important}
body.live-scan #result .mcd-sales-h,.cp-rich-panel .mcd-sales-h{font-size:clamp(0.62rem,3vw,0.95rem) !important;letter-spacing:0.12em !important;-webkit-text-stroke:0.5px rgba(60,10,90,0.5) !important;paint-order:stroke fill !important;color:rgba(90,50,140,0.85) !important}
body.live-scan #result .mcd-sh-logo,.cp-rich-panel .mcd-sh-logo{width:auto !important;object-fit:contain !important}
body.live-scan #result .mcd-sh-ebay,.cp-rich-panel .mcd-sh-ebay{height:clamp(6px,1.6vw,8px) !important;justify-self:center !important}
body.live-scan #result .mcd-sh-tcg,.cp-rich-panel .mcd-sh-tcg{height:clamp(9px,2.4vw,12px) !important;justify-self:center !important}

/* ═══════════ 2026-07-06 fixes (Eric screenshot IMG_5280) ═══════════ */
/* (1) Sticker 2x3 grid was spilling its right stepper column (+1/+5) OFF-SCREEN: the
   print-btn / stepper min-widths exceeded their fr-columns inside col3. Drop the floors
   so every child shrinks to its grid track and the whole sticker fits its column. */
body.live-scan #result .sticker-box .stk-step,
body.live-scan #result .sticker-box .sticker-input,
body.live-scan #result .sticker-box .print-btn,
.cp-rich-panel .sticker-box .stk-step,
.cp-rich-panel .sticker-box .sticker-input,
.cp-rich-panel .sticker-box .print-btn { min-width:0 !important; }
body.live-scan #result .sticker-box,
.cp-rich-panel .sticker-box { max-width:100% !important; overflow:hidden !important; }

/* (2) Selector pill row (condition/foil/edition/language) WRAPPED to a 2nd line instead
   of shrinking. Force the row to a single line and let the pills shrink uniformly
   (ellipsis if truly out of room). :has() targets the pills' direct parent. */
body.live-scan #result :has(> .row-pill),
.cp-rich-panel :has(> .row-pill) { flex-wrap:nowrap !important; min-width:0 !important; }
body.live-scan #result .row-pill,
.cp-rich-panel .row-pill {
  flex:0 1 auto !important; min-width:0 !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}

/* ═══════════ 2026-07-07: residual right-edge / sticker off-screen ═══════════ */
/* The sticker grid already shrinks (minmax(0,1fr) + min-width:0), but a few px of
   residual horizontal spill (padding/gap rounding, or a flex/grid ancestor that won't
   shrink) still pushed the right stepper column off-screen. Belt: clip the panel's
   horizontal overflow so nothing can cross the viewport edge. Suspenders: force the
   label/mock ancestors to be shrinkable so content fits rather than being clipped. */
body.live-scan #result, .cp-rich-panel { overflow-x:hidden !important; }
body.live-scan #result .label-price-section, .cp-rich-panel .label-price-section,
body.live-scan #result .mock-body, .cp-rich-panel .mock-body,
body.live-scan #result .mock-wrap, .cp-rich-panel .mock-wrap { max-width:100% !important; }

/* ═══════════ 2026-07-07b: sticker BELOW picture/price, full width (Eric IMG_5303) ═══════════ */
/* The sticker (label-price-section) sat in grid col3 to the right of the price panel and
   got clipped off the right edge ("missing half"). Move it to its own full-width row below
   the picture + price so it fits and can shrink to width; the price panel keeps the top
   row and now has the horizontal space to itself. Keeps overflow-x:hidden (no h-scroll). */
body.live-scan #result .mock-wrap:not(.graded-mode) .label-price-section,
.cp-rich-panel .mock-wrap:not(.graded-mode) .label-price-section {
  grid-column:1 / -1 !important; grid-row:3 !important;
  justify-self:stretch !important; align-self:start !important;
  align-items:stretch !important;
  width:100% !important; max-width:100% !important; min-width:0 !important;
  margin-top:8px !important;
}
body.live-scan #result .mock-wrap:not(.graded-mode) .label-price-section .sticker-box,
.cp-rich-panel .mock-wrap:not(.graded-mode) .label-price-section .sticker-box {
  width:100% !important; max-width:100% !important;
}

/* ═══════════ 2026-07-08: TCGplayer/eBay sales columns scrollable (Eric) ═══════════ */
/* Cap each sales column height and scroll the overflow rows, so a long sold-history
   fills the space without pushing the panel — and the extra rows are reachable. */
body.live-scan #result .mock-body--raw .mcd-combined .mcd-col,
.cp-rich-panel .mock-body--raw .mcd-combined .mcd-col {
  max-height:clamp(120px,30vh,240px) !important;
  overflow-y:auto !important; -webkit-overflow-scrolling:touch;
}

/* ═══════════ 2026-07-08b: sticker under the picture, price to the right (Eric) ═══════════ */
/* .mock-sales-stack was a flex box holding [sticker, sales], so grid-column/row on the
   sticker were silent no-ops. Flatten it (display:contents) → sticker + sales become real
   grid items of .mock-layout. Target: [img c1/r1] [name+tags c2-/r1] / [STICKER c1/r2]
   [price c2-/r2] / [sales c1/-1/r3]. Sticker fills the empty gap under the tall image. */
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-sales-stack,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-sales-stack { display:contents !important; }

body.live-scan #result .mock-wrap:not(.graded-mode) .mock-thumb,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-thumb { grid-column:1 !important; grid-row:1 !important; align-self:start !important; }

body.live-scan #result .mock-wrap:not(.graded-mode) .mock-top,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-top { grid-column:2 / -1 !important; grid-row:1 !important; }

body.live-scan #result .mock-wrap:not(.graded-mode) .label-price-section,
.cp-rich-panel .mock-wrap:not(.graded-mode) .label-price-section {
  grid-column:1 !important; grid-row:2 !important;
  justify-self:stretch !important; align-self:start !important;
  width:100% !important; max-width:100% !important; min-width:0 !important; margin:5px 0 0 !important;
}
body.live-scan #result .mock-wrap:not(.graded-mode) .mock-price-col,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mock-price-col {
  grid-column:2 / -1 !important; grid-row:2 !important; align-self:start !important; min-width:0 !important;
}
body.live-scan #result .mock-wrap:not(.graded-mode) .mcd-sales-box,
.cp-rich-panel .mock-wrap:not(.graded-mode) .mcd-sales-box {
  grid-column:1 / -1 !important; grid-row:3 !important; margin-top:6px !important; min-width:0 !important;
}