/* V0.38.0 亚马逊链接预览：商品画布样式（零售页面色彩只在 .listing-preview-canvas 内生效，不污染其它页面）。
   工作台控制区、抽屉、按钮沿用 design-system.css 的变量与组件。CSP 禁止行内样式，动态值全部用 class / <progress>。 */

/* ---------- 页面与控制区 ---------- */
#app .lp-page{display:flex;flex-direction:column;gap:var(--s-4)}
#app .lp-controls{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4)}
#app .lp-ctl-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:flex-end}
#app .lp-ctl-actions{align-items:center}
#app .lp-f-product{flex:1 1 280px;min-width:200px}#app .lp-f-search{flex:0 1 200px}#app .lp-f-ver{flex:0 1 280px}
#app .lp-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
#app .lp-chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--text-2);font-size:var(--fs-xs)}
#app .lp-chip.lp-warn,#app .lp-warn{color:var(--warning,#9a5b00)}
#app .lp-seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-sm);overflow:hidden}
#app .lp-seg button{border:0;border-radius:0;min-height:var(--control-h);padding:0 14px;background:var(--surface);color:var(--text-2)}
#app .lp-seg button.is-on{background:var(--accent);color:#fff}
#app .lp-health{display:flex;flex-wrap:wrap;gap:var(--s-3);font-size:var(--fs-sm);color:var(--text-2)}
#app .lp-missing-list{font-size:var(--fs-sm);color:var(--text-2)}
#app .lp-missing-list ul{margin:6px 0 0;padding-left:20px}
#app .lp-fixed-note{margin:0;font-size:var(--fs-xs);color:var(--text-3)}
#app .lp-note-err{background:var(--danger-soft,#fdecea);color:var(--danger,#b3261e)}
#app .lp-note-new{background:var(--surface-selected)}
#app .lp-note-dirty{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
#app .lp-empty-state{padding:var(--s-6);text-align:center}
#app .lp-ask{margin-top:var(--s-3)}

/* ---------- 全屏 ---------- */
#app .lp-page.lp-fs{position:fixed;inset:0;z-index:60;overflow:auto;background:var(--bg);padding:0 var(--s-4) var(--s-5);gap:var(--s-3)}
#app .lp-fs-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:var(--s-3);padding:10px 0;background:var(--glass-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
#app .lp-fs-bar b{padding:2px 10px;border-radius:var(--r-pill);background:var(--surface-3);font-size:var(--fs-xs)}
#app .lp-fs-bar span{flex:1;color:var(--text-2)}

/* ---------- 画布舞台 ---------- */
#app .lp-stage{container-type:inline-size;transition:opacity var(--dur-1,160ms) var(--ease-out,ease)}
#app .lp-stage.is-loading{opacity:.55}
#app .lp-phone{margin:0 auto;border:10px solid #1d1d1f;border-radius:36px;overflow:hidden;max-width:100%;background:#fff}
#app .lp-phone.lp-w375{width:calc(375px + 20px)}#app .lp-phone.lp-w390{width:calc(390px + 20px)}#app .lp-phone.lp-w430{width:calc(430px + 20px)}
#app .lp-print-only{display:none}

.listing-preview-canvas{--lp-bg:#fff;--lp-text:#0f1111;--lp-text-2:#565959;--lp-link:#007185;--lp-border:#d5d9d9;--lp-border-soft:#e7e7e7;--lp-star:#de7921;--lp-star-off:#d5d9d9;--lp-price:#b12704;--lp-btn:#ffd814;--lp-btn-2:#ffa41c;--lp-soft:#f7f8f8;--lp-nav:#131921;--lp-warn:#b12704;
  background:var(--lp-bg);color:var(--lp-text);font-family:"Amazon Ember",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.5;border:1px solid var(--lp-border);border-radius:var(--r-md,12px);overflow:hidden;color-scheme:light}
.listing-preview-canvas *{box-sizing:border-box}
.listing-preview-canvas h1,.listing-preview-canvas h2,.listing-preview-canvas h3{color:var(--lp-text);margin:0}
.listing-preview-canvas a{color:var(--lp-link)}
.listing-preview-canvas img,.listing-preview-canvas video{max-width:100%}
.listing-preview-canvas .lp-topnav{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--lp-nav);color:#fff}
.listing-preview-canvas .lp-topnav b{font-size:16px}.listing-preview-canvas .lp-topnav span:last-child{margin-left:auto;font-size:12px;opacity:.8}
.listing-preview-canvas .lp-fake-search{flex:1;max-width:520px;padding:6px 12px;border-radius:6px;background:#fff;color:#767676;font-size:13px}
.listing-preview-canvas .lp-crumb{padding:10px 18px 0;color:var(--lp-text-2);font-size:12px}
.listing-preview-canvas .lp-main-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.05fr) 260px;gap:28px;padding:16px 18px 8px;align-items:start}
.listing-preview-canvas .lp-sec{padding:18px;border-top:1px solid var(--lp-border-soft)}
.listing-preview-canvas .lp-h2{font-size:20px;font-weight:700;margin-bottom:10px}
.listing-preview-canvas .lp-h3{font-size:15px;font-weight:700;margin:14px 0 6px}
.listing-preview-canvas .lp-title{font-size:24px;line-height:1.3;font-weight:500;margin:0 0 6px;overflow-wrap:anywhere}
.listing-preview-canvas .lp-placeholder{color:var(--lp-text-2);font-style:italic}
.listing-preview-canvas .lp-brand{margin:0 0 6px;color:var(--lp-text-2)}
.listing-preview-canvas .lp-empty{color:var(--lp-text-2);font-size:13px;margin:6px 0}
.listing-preview-canvas .lp-source{color:var(--lp-text-2);font-size:12px;margin:6px 0}
.listing-preview-canvas .lp-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 8px}

/* 评分 */
.listing-preview-canvas .lp-rating-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 8px}
.listing-preview-canvas .lp-avg{font-size:15px}.listing-preview-canvas .lp-out{color:var(--lp-text-2);font-size:12px}
.listing-preview-canvas .lp-rating-count{font-size:14px;text-decoration:none}.listing-preview-canvas .lp-rating-count:hover{text-decoration:underline}
.listing-preview-canvas .lp-mock-badge{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--lp-warn);color:var(--lp-warn);font-size:11px;font-weight:700;white-space:nowrap;background:#fff7f5}
.listing-preview-canvas .lp-real-badge{border-color:#067d62;color:#067d62;background:#f0faf7}
.listing-preview-canvas .lp-stars{display:inline-flex;gap:1px;vertical-align:middle}
.listing-preview-canvas .lp-star{position:relative;display:inline-block;width:1.05em;height:1.05em;font-style:normal;font-size:16px;color:var(--lp-star-off);line-height:1}
.listing-preview-canvas .lp-star::before,.listing-preview-canvas .lp-star::after{content:"★";position:absolute;left:0;top:0;line-height:1}
.listing-preview-canvas .lp-star::after{overflow:hidden;color:var(--lp-star);width:0}
.listing-preview-canvas .lp-f1::after{width:10%}.listing-preview-canvas .lp-f2::after{width:20%}.listing-preview-canvas .lp-f3::after{width:30%}.listing-preview-canvas .lp-f4::after{width:40%}.listing-preview-canvas .lp-f5::after{width:50%}.listing-preview-canvas .lp-f6::after{width:60%}.listing-preview-canvas .lp-f7::after{width:70%}.listing-preview-canvas .lp-f8::after{width:80%}.listing-preview-canvas .lp-f9::after{width:90%}.listing-preview-canvas .lp-f10::after{width:100%}

/* 图库 */
.listing-preview-canvas .lp-gallery{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;outline-offset:4px}
.listing-preview-canvas .lp-thumbs{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow:auto}
.listing-preview-canvas .lp-thumb{width:56px;height:56px;padding:2px;border:1px solid var(--lp-border);border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;min-height:0;flex:none}
.listing-preview-canvas .lp-thumb.is-on{border-color:#e77600;box-shadow:0 0 0 2px rgba(231,119,0,.35)}
.listing-preview-canvas .lp-thumb-img{width:100%;height:100%;object-fit:contain}
.listing-preview-canvas .lp-thumb-video{font-size:11px;color:var(--lp-link)}
.listing-preview-canvas .lp-stage-media{position:relative;display:grid;place-items:center;min-height:320px;background:#fff}
.listing-preview-canvas .lp-main-btn{border:0;padding:0;background:none;cursor:zoom-in;display:block;width:100%;min-height:0}
.listing-preview-canvas .lp-main-img{display:block;width:100%;max-height:560px;object-fit:contain;aspect-ratio:1/1}
.listing-preview-canvas .lp-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:56px;border:1px solid var(--lp-border);border-radius:6px;background:rgba(255,255,255,.92);font-size:26px;line-height:1;cursor:pointer;padding:0;min-height:0;color:var(--lp-text)}
.listing-preview-canvas .lp-nav:disabled{opacity:.35;cursor:default}
.listing-preview-canvas .lp-prev{left:4px}.listing-preview-canvas .lp-next{right:4px}
.listing-preview-canvas .lp-counter{position:absolute;right:8px;bottom:6px;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12px}
.listing-preview-canvas .lp-video-wrap{width:100%}.listing-preview-canvas .lp-video{display:block;width:100%;max-height:560px;background:#000}
.listing-preview-canvas .lp-video-print{display:none}
.listing-preview-canvas .lp-gallery-m{grid-template-columns:1fr}.listing-preview-canvas .lp-gallery-m .lp-thumbs{flex-direction:row;order:2;max-height:none;overflow:auto;padding-bottom:4px}
.listing-preview-canvas .lp-gallery-empty{display:block}
.listing-preview-canvas .lp-missing{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:90px;padding:12px;border:1px dashed var(--lp-border);border-radius:6px;color:var(--lp-text-2);font-size:12px;text-align:center;background:var(--lp-soft)}

/* 购买区（示意） */
.listing-preview-canvas .lp-buybox{border:1px solid var(--lp-border);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px;background:#fff}
.listing-preview-canvas .lp-price-num{font-size:28px;color:var(--lp-text)}.listing-preview-canvas .lp-price-none{font-size:16px;color:var(--lp-text-2)}
.listing-preview-canvas .lp-price-note{margin:0;font-size:12px;color:var(--lp-link)}.listing-preview-canvas .lp-buy-note{margin:0;font-size:11px;color:var(--lp-text-2)}
#app .listing-preview-canvas .lp-fake-btn{width:100%;min-height:34px;border:0;border-radius:999px;background:var(--lp-btn);color:var(--lp-text);font-size:13px;cursor:not-allowed;opacity:.75}
#app .listing-preview-canvas .lp-fake-btn2{background:var(--lp-btn-2)}

/* 卖点、详情 */
.listing-preview-canvas .lp-bullets{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.listing-preview-canvas .lp-bullets.is-clamped li:nth-child(n+6){display:none}
.listing-preview-canvas .lp-desc.is-clamped,.listing-preview-canvas .lp-expand.is-clamped{max-height:7.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
#app .listing-preview-canvas .lp-more{padding:2px 0;min-height:0;color:var(--lp-link);background:none;border:0;cursor:pointer}
.listing-preview-canvas .lp-kv{width:100%;border-collapse:collapse;font-size:13px}
.listing-preview-canvas .lp-kv th{width:34%;text-align:left;background:var(--lp-soft);font-weight:700;padding:6px 10px;border-bottom:1px solid var(--lp-border-soft);color:var(--lp-text)}
.listing-preview-canvas .lp-kv td{padding:6px 10px;border-bottom:1px solid var(--lp-border-soft);overflow-wrap:anywhere}
.listing-preview-canvas .lp-kv-summary{margin:8px 0 10px}

/* A+ */
.listing-preview-canvas .lp-mod{margin:0}
.listing-preview-canvas .lp-aplus-img{display:block;width:100%;height:auto;object-fit:contain}
.listing-preview-canvas .lp-mod-image{margin:0}.listing-preview-canvas .lp-mod-title{font-size:17px;margin:8px 0 4px}
.listing-preview-canvas .lp-mod-ti{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:center}.listing-preview-canvas .lp-ti-text{padding:16px 20px}
.listing-preview-canvas .lp-mod-ti.is-right .lp-ti-img{order:2}
.listing-preview-canvas .lp-table-wrap{overflow:auto}
.listing-preview-canvas .lp-compare{border-collapse:collapse;width:100%;font-size:13px}.listing-preview-canvas .lp-compare th,.listing-preview-canvas .lp-compare td{border:1px solid var(--lp-border);padding:8px 10px;text-align:left;vertical-align:top}.listing-preview-canvas .lp-compare thead th{background:var(--lp-soft)}
.listing-preview-canvas .lp-premium-note{margin:4px 0 0;font-size:11px;color:var(--lp-text-2)}
.listing-preview-canvas .lp-aplus-text{margin:0;padding:0 0 8px}
/* A+ 要连成一整幅：模块之间不留间隔，打印时也不为“避免截断”而留出整页空白 */
.listing-preview-canvas #lp-aplus .lp-mod{margin:0;padding:0}.listing-preview-canvas #lp-aplus .lp-mod>*{margin-top:0;margin-bottom:0}.listing-preview-canvas #lp-aplus .lp-aplus-img{display:block;width:100%;margin:0;vertical-align:top}

/* QA 与评论 */
.listing-preview-canvas .lp-searchrow{margin:6px 0}
#app .listing-preview-canvas .lp-search{width:100%;max-width:420px;min-height:34px;padding:0 10px;border:1px solid #888c8c;border-radius:6px;background:#fff;color:var(--lp-text)}
.listing-preview-canvas .lp-qa-list,.listing-preview-canvas .lp-rv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.listing-preview-canvas .lp-qa-item,.listing-preview-canvas .lp-rv-item{padding-bottom:12px;border-bottom:1px solid var(--lp-border-soft)}
.listing-preview-canvas [hidden]{display:none!important}
.listing-preview-canvas .lp-qa-q{font-weight:700;margin-bottom:4px}
.listing-preview-canvas .lp-rv-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:2px}.listing-preview-canvas .lp-rv-author{font-weight:700}.listing-preview-canvas .lp-rv-date{color:var(--lp-text-2);font-size:12px}
.listing-preview-canvas .lp-rv-title{font-size:15px;margin:2px 0 4px}
.listing-preview-canvas .lp-rv-summary{max-width:420px;margin-bottom:10px}.listing-preview-canvas .lp-rv-big{display:flex;align-items:center;gap:8px;font-size:18px}
.listing-preview-canvas .lp-hist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.listing-preview-canvas .lp-hist-row{display:grid;grid-template-columns:52px 1fr 40px;align-items:center;gap:8px;font-size:13px}
.listing-preview-canvas .lp-hist progress{width:100%;height:16px;appearance:none;-webkit-appearance:none;border:1px solid #bbbfbf;border-radius:4px;background:#f0f2f2;overflow:hidden}
.listing-preview-canvas .lp-hist progress::-webkit-progress-bar{background:#f0f2f2}.listing-preview-canvas .lp-hist progress::-webkit-progress-value{background:var(--lp-star)}.listing-preview-canvas .lp-hist progress::-moz-progress-bar{background:var(--lp-star)}
.listing-preview-canvas .lp-count-line{font-weight:600}

/* 窄容器（工作台窄窗口或手机框）自动改成单栏 */
@container (max-width: 900px){
  .listing-preview-canvas.lp-desktop .lp-main-grid{grid-template-columns:minmax(0,1fr)}
  .listing-preview-canvas.lp-desktop .lp-mod-ti{grid-template-columns:1fr}
}
.listing-preview-canvas.lp-mobile .lp-titleblock,.listing-preview-canvas.lp-mobile .lp-gallery,.listing-preview-canvas.lp-mobile .lp-buybox{margin:12px 14px}
.listing-preview-canvas.lp-mobile .lp-title{font-size:17px}
.listing-preview-canvas.lp-mobile .lp-sec{padding:14px}
.listing-preview-canvas.lp-mobile .lp-mod-ti{grid-template-columns:1fr}.listing-preview-canvas.lp-mobile .lp-mod-ti.is-right .lp-ti-img{order:0}
.listing-preview-canvas.lp-mobile .lp-topnav{padding:8px 14px}
.listing-preview-canvas.lp-mobile .lp-stage-media{min-height:240px}

/* ---------- 抽屉内部 ---------- */
#app .lp-drawer{z-index:70}
#app .lp-drawer .field{margin-bottom:var(--s-3)}
#app .lp-mods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
#app .lp-mod-card{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
#app .lp-mod-card.is-dragging{opacity:.5}
#app .lp-mod-head{display:flex;align-items:center;gap:var(--s-2);padding:8px 12px;background:var(--surface-3);cursor:grab}
#app .lp-mod-ops{margin-left:auto;display:flex;gap:var(--s-2)}
#app .lp-mod-body{padding:12px}
#app .lp-grip{color:var(--text-3)}
#app .lp-plain{list-style:none;margin:0 0 var(--s-3);padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm)}
#app .lp-plain li{display:flex;justify-content:space-between;gap:var(--s-2);align-items:center;padding:6px 8px;border-radius:var(--r-xs);background:var(--surface-2)}
#app .lp-un-ops{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
#app .lp-check{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm)}
#app .lp-checks{display:flex;flex-direction:column;gap:4px;max-height:140px;overflow:auto}
#app .lp-cmp-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}#app .lp-cmp-row input{flex:1 1 90px;min-width:80px}
#app .lp-addrow{display:flex;gap:var(--s-2);margin:var(--s-3) 0}
#app .lp-radios{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:var(--s-3) 0}
#app .lp-rating-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
#app .lp-dist{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-2)}#app .lp-dist label{display:flex;flex-direction:column;font-size:var(--fs-xs);gap:2px}
#app .lp-drawer-actions{margin-top:var(--s-4)}
#app .lp-mat{border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 10px;margin-bottom:var(--s-2);background:var(--surface)}
#app .lp-mat summary{cursor:pointer;font-weight:var(--fw-semibold)}
#app .lp-kv-int{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-bottom:var(--s-3)}
#app .lp-kv-int th{width:52%;text-align:left;padding:6px 8px;background:var(--surface-3);border-bottom:1px solid var(--divider)}#app .lp-kv-int td{padding:6px 8px;border-bottom:1px solid var(--divider)}
#app .lp-offer-box{margin-bottom:var(--s-3)}

/* 减少动态效果 */
@media (prefers-reduced-motion:reduce){#app .lp-stage{transition:none}}

/* ---------- 窄屏：工作台控件换行，整页不横向溢出 ---------- */
@media (max-width:760px){
  #app .lp-ctl-row>*{flex:1 1 100%}
  #app .lp-controls{padding:var(--s-3)}
  #app .lp-phone{border-width:6px;border-radius:24px}
  #app .lp-drawer{width:100vw}
}

/* ---------- 打印 / 存为 PDF：只留商品画布，展开全部正文 ---------- */
@media print{
  html,body{background:#fff!important}
  .sidebar,.topbar,.pagehead,.footer-note,#toast,.lp-noprint,.lp-drawer,dialog,.lp-fs-bar{display:none!important}
  .layout,.main,.content{display:block!important;margin:0!important;padding:0!important;width:auto!important;max-width:none!important}
  #app .lp-page,#app .lp-page.lp-fs{position:static!important;display:block;padding:0}
  #app .lp-print-only,.lp-print-header{display:block!important}
  .lp-print-header{margin:0 0 8px;padding:6px 8px;border:1px solid #999;font-size:11px;color:#000}
  #app .lp-phone{border:1px solid #999;border-radius:0}
  .listing-preview-canvas{border:0;border-radius:0;overflow:visible}
  .listing-preview-canvas .lp-stage-media .lp-nav,.listing-preview-canvas .lp-counter,.listing-preview-canvas .lp-more,.listing-preview-canvas .lp-thumbs{display:none!important}
  .listing-preview-canvas .lp-video{display:none!important}.listing-preview-canvas .lp-video-print{display:block!important;padding:12px;border:1px dashed #666;font-size:12px}
  .listing-preview-canvas .lp-bullets.is-clamped li:nth-child(n+6){display:list-item!important}
  .listing-preview-canvas .lp-desc.is-clamped,.listing-preview-canvas .lp-expand.is-clamped{max-height:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  .listing-preview-canvas .lp-gallery{grid-template-columns:1fr}
  .listing-preview-canvas .lp-aplus-img,.listing-preview-canvas .lp-main-img{max-width:100%!important;height:auto!important;break-inside:avoid}
  .listing-preview-canvas .lp-sec,.listing-preview-canvas .lp-qa-item,.listing-preview-canvas .lp-rv-item{break-inside:avoid}
  .listing-preview-canvas #lp-aplus,.listing-preview-canvas #lp-aplus .lp-mod,.listing-preview-canvas #lp-aplus .lp-aplus-img{break-inside:auto}
  .listing-preview-canvas [hidden]{display:block!important}
  .listing-preview-canvas .lp-searchrow{display:none!important}
  .listing-preview-canvas .lp-fake-btn{display:none}
}

/* 问答：答案和“A:”同一行 */
.listing-preview-canvas .lp-qa-a{display:flex;gap:6px;align-items:flex-start}.listing-preview-canvas .lp-qa-a>b{flex:none}.listing-preview-canvas .lp-qa-a>div{flex:1;min-width:0}.listing-preview-canvas .lp-qa-a .lp-text{margin:0}