/* AvoAgent v2 · 统一工具工作台
 *
 * 设计系统来自改版原型。v1.53.0 起与换装那 13 页同一套：
 *   ink #17231d / lime #c7f45b / blue #536dfe / paper #f5f7f2
 *   / Space Grotesk + DM Sans
 * 与线上 v1 的 Avocado Forest（#4A7C59 + DM Sans/DM Mono）是两套，刻意不混。
 *
 * ⚠ 一切都收在 .avo-v2 作用域下。
 *   v1 和 v2 要长期共存（逐页灰度），裸写 .card / .field / .run 这类通用名
 *   会污染老页面。加了 v2 的页面挂 .avo-v2，没加的页面一点都碰不到。
 */

/**
 * v1.53.0 · 色板与换装页合一。
 *
 * 原型自己发了**两套**色值：avoagent-site.css（老的共享表，工具页在用）是
 * ink #14231b / blue #4759b8；index.html 与 product-audit.html（最新的两页）
 * 是 ink #17231d / blue #536dfe。我们照抄时把这份不一致也一起抄了进来 ——
 * 工作台拿了老的，换装那 13 页拿了新的，于是点进工具像换了个站。
 *
 * 取新的那套。判据：首页和旗舰工具页（质检）都用它，是原型里最新的产物；
 * 而且换装 CSS 已经有 10 份文件、上百处在用，改它们才是真的高风险。
 * 这里只动 12 个变量，工作台里 186 处 var() 一次性跟上。
 *
 * ⚠ 值要跟 assets/css/v2/site.css 那套保持一致。改任何一边都要两边一起改，
 *   否则又会回到「两套色板」。
 */
.avo-v2 {
  --v2-ink:        #17231d;
  --v2-lime:       #c7f45b;
  --v2-lime-deep:  #556f0e;
  --v2-paper:      #f5f7f2;
  --v2-white:      #fff;
  --v2-soft:       #edf1e9;
  --v2-line:       #dfe4dc;
  --v2-muted:      #5e6861;
  /* v1.71.10 · 原型给的是 #536dfe，压深到 #4355d6。
     这个 token 在工作台里是**当文字色**用的（.v2-note--info、.v2-help--boxed a），
     #536dfe 当文字在浅底上只有 4.21/3.90，达不到 AA；#4355d6 是 5.98/5.55。
     首页那张定价卡同步改了，保持全站一个蓝。 */
  --v2-blue:       #4355d6;
  --v2-danger:     #c63f21;
  --v2-warn:       #b8791f;
  --v2-ok:         #556f0e;
  --v2-shadow:     0 22px 60px rgba(26, 44, 33, .1);
  --v2-sans:       "DM Sans", "PingFang SC", system-ui, sans-serif;
  --v2-display:    "Space Grotesk", "DM Sans", system-ui, sans-serif;

  background: var(--v2-paper);
  color: var(--v2-ink);
  font-family: var(--v2-sans);
}

.avo-v2 *,
.avo-v2 *::before,
.avo-v2 *::after { box-sizing: border-box; }

.avo-v2 .v2-wrap { width: min(100% - 48px, 1180px); margin-inline: auto; }

/* v1.68.0 · 多窗格工具用更宽的容器，对齐原型：
     product-audit 1320 · detail-lock / localization-pack / asset-center 1480
   单窗格工具（去背、放大、裁切、擦除、文案…）和结果页仍是 1180，原型就是这么分的。

   ⚠ chrome 的 .v2h-wrap 必须跟着一起加宽。只加宽正文的话，页眉页脚会比内容
     窄 140–300px，边缘明显对不齐。原型里 nav 本身就在 .wrap 内，天然同宽。
   选择器带 body 是为了压过 site.css 的 `.avo-v2-page .v2h-wrap`（同为 0,2,0）。 */
/* 面包屑也要跟着加宽，否则它停在 1180 而正文是 1320/1480，左边缘对不齐 */
body.avo-v2-tool-product-audit .v2h-wrap,
body.avo-v2-tool-product-audit .v2h-appmain > .avo-crumbs,
body.avo-v2-tool-product-audit .v2-wrap { width: min(100% - 48px, 1320px); }

body.avo-v2-tool-detail-lock .v2h-wrap,
body.avo-v2-tool-detail-lock .v2h-appmain > .avo-crumbs,
body.avo-v2-tool-detail-lock .v2-wrap,
body.avo-v2-tool-localization-pack .v2h-wrap,
body.avo-v2-tool-localization-pack .v2h-appmain > .avo-crumbs,
body.avo-v2-tool-localization-pack .v2-wrap,
/* catalog-studio 原型里没有这一页。它和 localization-pack 是同类工作流
   （同在 /workflows/、同为批量多步骤），两个兄弟页宽度不一样会像 bug —— 按推断跟随。 */
body.avo-v2-tool-catalog-studio .v2h-wrap,
body.avo-v2-tool-catalog-studio .v2h-appmain > .avo-crumbs,
body.avo-v2-tool-catalog-studio .v2-wrap,
body.avo-v2-tool-asset-center .v2h-wrap,
body.avo-v2-tool-asset-center .v2h-appmain > .avo-crumbs,
body.avo-v2-tool-asset-center .v2-wrap { width: min(100% - 48px, 1480px); }

/* 细线条 SVG 图标 —— 1.8px 线宽，显式 fill:none。
   显式写 fill:none 是因为直接打开本地 HTML 时不写会渲染成黑色实心块。 */
.avo-v2 .v2-icon {
  display: block; width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.avo-v2 .v2-icon--lg { width: 44px; height: 44px; }

/* ── 按钮 ───────────────────────────────────────────── */
.avo-v2 .v2-btn {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--v2-line); border-radius: 12px;
  background: var(--v2-white); color: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 700 15px/1 var(--v2-sans); cursor: pointer;
  transition: .15s;
}
.avo-v2 .v2-btn:hover:not(:disabled) { border-color: var(--v2-ink); }
.avo-v2 .v2-btn--dark { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; }
.avo-v2 .v2-btn--lime { background: var(--v2-lime); border-color: var(--v2-lime); color: var(--v2-ink); }
.avo-v2 .v2-btn--ghost { background: transparent; }
.avo-v2 .v2-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 异步期间保持按钮宽度，避免文案变化把布局顶跳（交接文档明确要求） */
.avo-v2 .v2-btn[data-busy] { pointer-events: none; }
.avo-v2 .v2-btn[data-busy] .v2-btn__label { visibility: hidden; }
.avo-v2 .v2-btn[data-busy]::after {
  content: ""; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: v2spin .7s linear infinite;
}
.avo-v2 .v2-btn { position: relative; }
@keyframes v2spin { to { transform: rotate(360deg); } }

.avo-v2 :is(button, a, input, textarea, select):focus-visible {
  outline: 3px solid rgba(111, 153, 23, .35); outline-offset: 2px;
}

/* ── 页头 ───────────────────────────────────────────── */
.avo-v2 .v2-shell { padding: 42px 0 80px; }
.avo-v2 .v2-heading { max-width: 760px; margin-bottom: 28px; }
.avo-v2 .v2-eyebrow {
  display: flex; align-items: center; gap: 9px;
  font: 600 13px/1 var(--v2-display);
  letter-spacing: .06em; text-transform: uppercase; color: var(--v2-muted);
}
.avo-v2 .v2-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--v2-lime); }
/* v1.69.0 · 对齐原型 avoagent-quick-tool.css 的 .tool-heading h1（单窗格工具的默认值）。
   原型只覆盖 font-size，行高沿用全局 h1 的 .95（数值行高，按自身字号算）。 */
.avo-v2 .v2-heading h1 {
  font: 600 clamp(42px, 6vw, 72px)/.95 var(--v2-display);
  letter-spacing: -.05em; margin: 14px 0;
}

/* v1.69.0 · 三个多窗格工具在原型里各有各的标题尺寸，不是统一值 —— 照搬上面的 72
   会把质检页从 62 顶到 72，而原型那页是 61，等于越改越远。用 v1.68.0 加的逐工具类分开。
   ⚠ 这里写了 font 简写会连行高一起设 (0,2,2)，和 site.css 的 CJK 护栏同级；
     护栏那边已提到 (0,2,3) 确保中文仍然压得住，改这里的选择器时要一并复核。 */
body.avo-v2-tool-product-audit .v2-heading h1 {
  font: 600 clamp(38px, 4.2vw, 61px)/1.02 var(--v2-display); letter-spacing: -.055em;
}
body.avo-v2-tool-detail-lock .v2-heading h1 {
  font: 600 clamp(42px, 5vw, 76px)/.98 var(--v2-display); letter-spacing: -.055em;
}
body.avo-v2-tool-asset-center .v2-heading h1 {
  font: 600 clamp(42px, 5.1vw, 78px)/.98 var(--v2-display); letter-spacing: -.055em;
}
.avo-v2 .v2-heading p { font-size: 17px; color: var(--v2-muted); line-height: 1.7; margin: 0; }

.avo-v2 .v2-beta {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border-radius: 99px; background: #eef7d8; color: var(--v2-ok);
  font: 700 11px/1 var(--v2-sans); letter-spacing: .04em; text-transform: uppercase;
}

/* ── 工作区 ─────────────────────────────────────────── */
.avo-v2 .v2-workspace {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 16px;
  align-items: start;
}
/* 文本类工具没有上传区，设置面板不该还挤在右边那一窄条里 */
.avo-v2 .v2-workspace--no-upload { grid-template-columns: minmax(0, 760px); }
.avo-v2 .v2-card {
  background: var(--v2-white); border: 1px solid var(--v2-line); border-radius: 18px;
}
.avo-v2 .v2-dropzone, .avo-v2 .v2-panel { padding: 26px; }

.avo-v2 .v2-dropzone {
  min-height: 430px; border: 1.5px dashed #aeb9ac; border-radius: 18px;
  display: grid; place-items: center; text-align: center;
  position: relative; overflow: hidden; cursor: pointer; background: var(--v2-white);
  transition: min-height .2s ease;
}
/* 传了文件之后不该还留一大片空白 —— 空区域比缩略图本身大得多，
   看起来像没加载完。有内容时收起来，按缩略图数量自然撑高。 */
.avo-v2 .v2-dropzone:has(.v2-thumbs:not([hidden]))    { min-height: 0; place-items: start stretch; }
.avo-v2 .v2-dropzone:has(.v2-thumbs:not([hidden])) .v2-thumbs { padding-bottom: 44px; }
/* 收起后底部留一条「继续添加」的提示条，别让人以为不能再传了 */
.avo-v2 .v2-dropzone:has(.v2-thumbs:not([hidden]))::after {
  content: attr(data-more-label);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px; font: 600 12.5px/1 var(--v2-sans); color: var(--v2-muted);
  background: linear-gradient(transparent, #fff 40%);
  pointer-events: none;
}
.avo-v2 .v2-dropzone.is-drag { border-color: var(--v2-lime-deep); background: #f7ffe8; }
.avo-v2 .v2-dropzone__copy { max-width: 380px; }
.avo-v2 .v2-dropzone__copy .v2-icon { margin: 0 auto 18px; }
.avo-v2 .v2-dropzone__copy h2 { font: 600 24px/1.2 var(--v2-display); margin: 0 0 8px; }
.avo-v2 .v2-dropzone__copy p { color: var(--v2-muted); font-size: 14px; line-height: 1.6; margin: 0; }
.avo-v2 .v2-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* 已选文件缩略图网格 */
.avo-v2 .v2-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px; width: 100%; padding: 0; margin: 0; list-style: none;
}
.avo-v2 .v2-thumb {
  position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--v2-line); background: var(--v2-soft);
}
.avo-v2 .v2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avo-v2 .v2-thumb__state {
  position: absolute; inset: auto 0 0 0; padding: 4px 6px;
  font: 700 10px/1.3 var(--v2-sans); text-align: left;
  background: rgba(23, 35, 29, .82); color: #fff;
  display: flex; align-items: center; gap: 4px;
}
.avo-v2 .v2-thumb__state .v2-icon { width: 12px; height: 12px; stroke-width: 2.2; }
.avo-v2 .v2-thumb__del {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
  border-radius: 50%; border: 0; background: rgba(23, 35, 29, .72); color: #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.avo-v2 .v2-thumb__del .v2-icon { width: 13px; height: 13px; }

/* ── 设置面板 ───────────────────────────────────────── */
.avo-v2 .v2-panel h2 { font: 600 22px/1.2 var(--v2-display); margin: 0 0 22px; }
.avo-v2 .v2-field { margin: 0 0 18px; }
.avo-v2 .v2-field > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
/* ⚠ v1.70.0 · 必须排除 checkbox/radio。
   这是**后代**选择器，而 <ul class="v2-checks"> 就嵌在 .v2-field 里，
   于是每个复选框都被当成文本输入框刷了一遍：width:100% + min-height:48px
   + border + padding:12px → 实测被撑成 315×48 的大绿块，逐行错位。
   下面 .v2-check input 那条权重相同(0,2,1)且更靠后，但它只声明了
   margin-top/accent-color，压不掉这里的 width/min-height —— 所以要在源头排除。 */
.avo-v2 .v2-field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  width: 100%; min-height: 48px;
  border: 1px solid var(--v2-line); border-radius: 12px; background: #fff;
  padding: 12px; font: 400 16px/1.4 var(--v2-sans); color: inherit;
}
.avo-v2 .v2-field textarea { min-height: 110px; resize: vertical; }
.avo-v2 .v2-help { color: var(--v2-muted); font-size: 12.5px; line-height: 1.6; margin: 6px 0 0; }

.avo-v2 .v2-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.avo-v2 .v2-choice {
  min-height: 48px; border: 1px solid var(--v2-line); border-radius: 11px;
  background: #fff; cursor: pointer; font: 600 14px/1 var(--v2-sans); color: inherit;
}
.avo-v2 .v2-choice.is-active { border-color: var(--v2-lime-deep); background: #eef7d8; color: var(--v2-ok); }

/* ── 报价 ───────────────────────────────────────────── */
.avo-v2 .v2-estimate {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--v2-line); padding: 18px 0;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.avo-v2 .v2-estimate__val { font: 700 20px/1 var(--v2-display); }
.avo-v2 .v2-estimate__sub { color: var(--v2-muted); font-size: 12px; }
.avo-v2 .v2-run { width: 100%; min-height: 52px; }

.avo-v2 .v2-trust {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px;
  color: var(--v2-muted); font-size: 12px;
}
.avo-v2 .v2-trust span { display: inline-flex; align-items: center; gap: 5px; }
.avo-v2 .v2-trust .v2-icon { width: 14px; height: 14px; }

/* ── 提示条 ─────────────────────────────────────────── */
.avo-v2 .v2-note {
  margin-top: 14px; padding: 13px 15px; border-radius: 12px;
  font-size: 13px; line-height: 1.6;
  display: flex; align-items: flex-start; gap: 9px;
}
.avo-v2 .v2-note .v2-icon { width: 16px; height: 16px; margin-top: 1px; }
.avo-v2 .v2-note--info   { background: #eef2ff; color: var(--v2-blue); }
.avo-v2 .v2-note--ok     { background: #eef7d8; color: var(--v2-ok); }
.avo-v2 .v2-note--warn   { background: #fdf3e2; color: var(--v2-warn); }
.avo-v2 .v2-note--danger { background: #fdeceb; color: var(--v2-danger); }
.avo-v2 .v2-note[hidden] { display: none; }

/* ── 进度 ───────────────────────────────────────────── */
.avo-v2 .v2-progress { margin-top: 18px; }
.avo-v2 .v2-progress__bar {
  height: 8px; border-radius: 99px; background: var(--v2-soft); overflow: hidden;
}
.avo-v2 .v2-progress__fill {
  height: 100%; background: var(--v2-lime-deep); border-radius: 99px;
  width: 0; transition: width .4s ease;
}
/* 终态按结果上色 —— 全失败时一条满格绿条看着像成功 */
.avo-v2 .v2-progress__fill.is-failed  { background: var(--v2-danger); }
.avo-v2 .v2-progress__fill.is-partial { background: var(--v2-warn); }
.avo-v2 .v2-progress__text {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: 12.5px; color: var(--v2-muted);
  font-variant-numeric: tabular-nums;
}

/* ── 结果 ───────────────────────────────────────────── */
.avo-v2 .v2-results { margin-top: 28px; }
.avo-v2 .v2-results__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.avo-v2 .v2-results__head h2 { font: 600 26px/1.1 var(--v2-display); margin: 0; }
.avo-v2 .v2-tally { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.avo-v2 .v2-tally span { display: inline-flex; align-items: center; gap: 5px; }

.avo-v2 .v2-result-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.avo-v2 .v2-result {
  border: 1px solid var(--v2-line); border-radius: 16px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
}
/* ⚠ 结果图必须铺棋盘格底，不能用纯色。
 *   抠图工具的产出是透明 PNG —— 放在不透明灰底上，用户**根本看不出哪里透明了**，
 *   也就无法判断抠得对不对。棋盘格是图像工具的通用约定（PS / Figma 都是）。 */
.avo-v2 .v2-result__img {
  aspect-ratio: 1; display: grid; place-items: center;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e6ebe4 25%, transparent 25%, transparent 75%, #e6ebe4 75%),
    linear-gradient(45deg, #e6ebe4 25%, transparent 25%, transparent 75%, #e6ebe4 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.avo-v2 .v2-result__img img { width: 100%; height: 100%; object-fit: contain; }
/* 占位图标状态下不要棋盘格（没图就没有透明度可言） */
.avo-v2 .v2-result__img:not(:has(img)) {
  background-image: none; background-color: var(--v2-soft); color: var(--v2-muted);
}
.avo-v2 .v2-result__body { padding: 12px 14px 14px; display: grid; gap: 8px; }

/* 状态不能只靠颜色区分 —— 图标 + 文字 + 颜色三者同时表达 */
.avo-v2 .v2-state {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 12px/1 var(--v2-sans);
}
.avo-v2 .v2-state--passed     { color: var(--v2-ok); }
.avo-v2 .v2-state--review     { color: var(--v2-warn); }
.avo-v2 .v2-state--repairable { color: var(--v2-warn); }
.avo-v2 .v2-state--failed,
.avo-v2 .v2-state--rejected   { color: var(--v2-danger); }
.avo-v2 .v2-state--pending    { color: var(--v2-muted); }

.avo-v2 .v2-result__err { font-size: 12.5px; color: var(--v2-muted); line-height: 1.5; }
.avo-v2 .v2-result__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.avo-v2 .v2-result__actions .v2-btn { min-height: 36px; padding: 0 12px; font-size: 13px; }

/* ── 商品图上线质检 ─────────────────────────────────── */

.avo-v2 .v2-help--boxed {
  border-left: 2px solid var(--v2-line); padding-left: 10px; margin-top: 10px;
}
.avo-v2 .v2-help--boxed a { color: var(--v2-blue); }

/* 参考图槽位 */
.avo-v2 .v2-ref { position: relative; }
.avo-v2 .v2-ref input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2;
}
.avo-v2 .v2-ref__empty {
  display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 0 14px;
  border: 1px dashed var(--v2-line); border-radius: 12px; background: var(--v2-soft);
  font: 500 14px/1.3 var(--v2-sans); color: var(--v2-muted);
}
.avo-v2 .v2-ref:hover .v2-ref__empty { border-color: var(--v2-lime-deep); color: var(--v2-ink); }
.avo-v2 .v2-ref__has {
  display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px 8px 8px;
  border: 1px solid var(--v2-line); border-radius: 12px; background: #fff;
}
.avo-v2 .v2-ref__has img {
  width: 42px; height: 42px; border-radius: 8px; object-fit: cover;
  background: var(--v2-soft); flex: none;
}
.avo-v2 .v2-ref__has span { font: 500 13px/1.3 var(--v2-sans); color: var(--v2-muted); }
.avo-v2 .v2-ref__del {
  margin-left: auto; z-index: 3; position: relative;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--v2-line); border-radius: 8px; background: #fff; cursor: pointer;
}

/* 检查项 */
.avo-v2 .v2-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.avo-v2 .v2-check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.avo-v2 .v2-check input { margin-top: 2px; accent-color: var(--v2-lime-deep); }
.avo-v2 .v2-check span { font: 400 14px/1.35 var(--v2-sans); }
.avo-v2 .v2-check__req {
  display: inline-block; margin-left: 6px; font: 500 11px/1 var(--v2-sans);
  color: var(--v2-muted); border: 1px solid var(--v2-line); border-radius: 5px;
  padding: 3px 5px; font-style: normal; vertical-align: 1px;
}
.avo-v2 .v2-checks li.is-disabled { opacity: .5; }
.avo-v2 .v2-checks li.is-disabled .v2-check { cursor: not-allowed; }
.avo-v2 .v2-checks__hint {
  font: 400 12.5px/1.4 var(--v2-sans); color: var(--v2-muted); padding-left: 25px;
}

/* 结果卡：底图 + 风险定位 */
.avo-v2 .v2-audit {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px;
  border: 1px solid var(--v2-line); border-radius: 18px; background: #fff;
  padding: 16px; box-shadow: var(--v2-shadow);
}
.avo-v2 .v2-audit__stage {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--v2-soft); align-self: start;
}
.avo-v2 .v2-audit__stage img { display: block; width: 100%; height: auto; }
.avo-v2 .v2-audit__overlay { position: absolute; inset: 0; pointer-events: none; }
/* 整图级的问题（背景）用四周内描边表达，不画一个覆盖全图的框 */
.avo-v2 .v2-audit__overlay.has-border { box-shadow: inset 0 0 0 4px rgba(217, 75, 41, .55); }

.avo-v2 .v2-box {
  position: absolute; border: 2px solid var(--v2-warn); border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(23, 35, 29, 0); transition: box-shadow .18s ease;
}
.avo-v2 .v2-box--error,
.avo-v2 .v2-box--blocking { border-color: var(--v2-danger); }
.avo-v2 .v2-box--info { border-color: var(--v2-blue); }
.avo-v2 .v2-box.is-active { box-shadow: 0 0 0 9999px rgba(23, 35, 29, .48); }

.avo-v2 .v2-audit__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.avo-v2 .v2-verdict {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  font: 600 14px/1 var(--v2-display); border: 1px solid transparent;
}
.avo-v2 .v2-verdict--passed     { background: #eaf3d6; color: var(--v2-ok);     border-color: #cfe4a4; }
.avo-v2 .v2-verdict--review     { background: #fdf2dd; color: var(--v2-warn);   border-color: #f0dcae; }
.avo-v2 .v2-verdict--repairable { background: #fdf2dd; color: var(--v2-warn);   border-color: #f0dcae; }
.avo-v2 .v2-verdict--rejected   { background: #fbe6e1; color: var(--v2-danger); border-color: #f2c4b8; }

.avo-v2 .v2-audit__scope,
.avo-v2 .v2-audit__meta { font: 400 12.5px/1.45 var(--v2-sans); color: var(--v2-muted); margin: 0; }
.avo-v2 .v2-audit__meta { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--v2-line); }
.avo-v2 .v2-audit__clean {
  display: flex; gap: 8px; align-items: center; margin: 0;
  font: 500 14px/1.4 var(--v2-sans); color: var(--v2-ok);
}

.avo-v2 .v2-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.avo-v2 .v2-finding {
  border: 1px solid var(--v2-line); border-left-width: 3px; border-radius: 10px;
  padding: 11px 13px; background: var(--v2-paper);
}
.avo-v2 .v2-finding[data-focus] { cursor: pointer; }
.avo-v2 .v2-finding[data-focus]:hover,
.avo-v2 .v2-finding.is-active { background: #fff; border-color: var(--v2-lime-deep); }
.avo-v2 .v2-finding--blocking,
.avo-v2 .v2-finding--error   { border-left-color: var(--v2-danger); }
.avo-v2 .v2-finding--warning { border-left-color: var(--v2-warn); }
.avo-v2 .v2-finding--info    { border-left-color: var(--v2-blue); }
.avo-v2 .v2-finding__sev {
  display: inline-block; font: 600 11px/1 var(--v2-sans); text-transform: uppercase;
  letter-spacing: .06em; color: var(--v2-muted); margin-bottom: 5px;
}
.avo-v2 .v2-finding--blocking .v2-finding__sev,
.avo-v2 .v2-finding--error .v2-finding__sev   { color: var(--v2-danger); }
.avo-v2 .v2-finding--warning .v2-finding__sev { color: var(--v2-warn); }
.avo-v2 .v2-finding__what { margin: 0; font: 400 14px/1.45 var(--v2-sans); }
.avo-v2 .v2-finding__fix {
  display: flex; gap: 7px; align-items: flex-start; margin: 7px 0 0;
  font: 500 13px/1.4 var(--v2-sans); color: var(--v2-lime-deep);
}
.avo-v2 .v2-finding__fix svg { flex: none; margin-top: 1px; }

@media (max-width: 820px) {
  .avo-v2 .v2-audit { grid-template-columns: 1fr; }
}

/* ── 商品细节锁定 ───────────────────────────────────── */

.avo-v2 .v2-mask__stage {
  position: relative; border: 1px solid var(--v2-line); border-radius: 12px;
  overflow: hidden; background: var(--v2-soft); min-height: 160px;
  touch-action: none;            /* 移动端拖框时别把页面一起滚走 */
  cursor: crosshair;
}
.avo-v2 .v2-mask__stage img { display: block; width: 100%; height: auto; }
.avo-v2 .v2-mask__placeholder {
  display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;
  min-height: 160px; padding: 20px; text-align: center;
  font: 500 13px/1.4 var(--v2-sans); color: var(--v2-muted);
}
.avo-v2 .v2-mask__boxes { position: absolute; inset: 0; }

/* v1.55.0 · 已圈的框是真 <button> 了，先把浏览器默认按钮样式清掉 */
.avo-v2 .v2-maskbox {
  position: absolute; border: 2px solid var(--v2-lime-deep);
  background: rgba(199, 244, 91, .22); border-radius: 3px; cursor: pointer;
  padding: 0; margin: 0; font: inherit; color: inherit;
  -webkit-appearance: none; appearance: none;
}
.avo-v2 .v2-maskbox.is-drawing { pointer-events: none; border-style: dashed; }

/* ⚠ stage 是 overflow:hidden，贴边的框用 outline 会被裁掉一半 ——
   焦点态改用 inset 的 box-shadow，怎么贴边都看得见。 */
.avo-v2 .v2-maskbox:focus-visible {
  outline: none;
  border-color: var(--v2-danger);
  box-shadow: inset 0 0 0 2px var(--v2-white), inset 0 0 0 4px var(--v2-danger);
}
.avo-v2 .v2-maskbox:focus-visible > i { background: var(--v2-danger); }

/* stage 本身可聚焦（键盘圈选的入口），同理走 inset */
.avo-v2 .v2-mask__stage:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--v2-ink);
}

/* 键盘光标：没定角时是个十字，定了角之后变成正在拉的框 */
.avo-v2 .v2-mask__cursor {
  position: absolute; pointer-events: none; z-index: 2;
  width: 0; height: 0;
  outline: 1px dashed var(--v2-ink);
  outline-offset: 5px;
}
.avo-v2 .v2-mask__cursor.is-drawing {
  outline: none;
  border: 2px dashed var(--v2-ink);
  background: rgba(23, 35, 29, .08);
  border-radius: 3px;
}

.avo-v2 .v2-mask__help {
  margin: 8px 0 0; font: 400 12px/1.6 var(--v2-sans); color: var(--v2-muted);
}
.avo-v2 .v2-maskbox > i {
  position: absolute; top: -1px; left: -1px; min-width: 18px; height: 18px;
  display: grid; place-items: center; padding: 0 4px;
  background: var(--v2-lime-deep); color: #fff; border-radius: 3px 0 3px 0;
  font: 600 11px/1 var(--v2-sans); font-style: normal;
}
.avo-v2 .v2-maskbox:hover { border-color: var(--v2-danger); background: rgba(217, 75, 41, .2); }
.avo-v2 .v2-maskbox:hover > i { background: var(--v2-danger); }

.avo-v2 .v2-mask__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; font: 500 12.5px/1.3 var(--v2-sans); color: var(--v2-muted);
}
.avo-v2 .v2-mask__clear {
  border: 1px solid var(--v2-line); border-radius: 8px; background: #fff; cursor: pointer;
  font: 500 12.5px/1 var(--v2-sans); padding: 7px 10px; color: inherit;
}
.avo-v2 .v2-mask__clear:hover { border-color: var(--v2-danger); color: var(--v2-danger); }

/* 改前 / 改后对照 —— 这个工具的价值全在对照上 */
.avo-v2 .v2-lock { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.avo-v2 .v2-lock__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-self: start; }
.avo-v2 .v2-lock__pair figure { margin: 0; }
.avo-v2 .v2-lock__pair figcaption {
  font: 600 11px/1 var(--v2-sans); text-transform: uppercase; letter-spacing: .06em;
  color: var(--v2-muted); margin-bottom: 6px;
}
.avo-v2 .v2-lock__pair img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--v2-line); background: var(--v2-soft);
}

@media (max-width: 820px) {
  .avo-v2 .v2-lock { grid-template-columns: 1fr; }
}

/* ── 工作流 ─────────────────────────────────────────── */

.avo-v2 .v2-steps {
  list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px;
  counter-reset: v2step;
}
.avo-v2 .v2-steps li { display: flex; gap: 10px; align-items: flex-start; }
.avo-v2 .v2-steps__n {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--v2-soft); border: 1px solid var(--v2-line);
  font: 600 11px/1 var(--v2-sans); color: var(--v2-muted);
}
.avo-v2 .v2-steps__t { font: 500 14px/1.35 var(--v2-sans); }
.avo-v2 .v2-steps__t em {
  display: block; font: 400 12px/1.3 var(--v2-sans); font-style: normal; color: var(--v2-muted);
}
.avo-v2 .v2-steps--result li.is-done .v2-steps__n {
  background: #eaf3d6; border-color: #cfe4a4; color: var(--v2-ok);
}
.avo-v2 .v2-steps--result li.is-failed .v2-steps__n {
  background: #fbe6e1; border-color: #f2c4b8; color: var(--v2-danger);
}
.avo-v2 .v2-steps--result li.is-skipped { opacity: .45; }
.avo-v2 .v2-steps--result { margin: 14px 0 0; }

.avo-v2 .v2-wf__left { display: flex; flex-direction: column; gap: 4px; align-self: start; }
.avo-v2 .v2-wf__h {
  margin: 14px 0 6px; font: 600 13px/1.2 var(--v2-display);
  padding-top: 12px; border-top: 1px solid var(--v2-line);
}
.avo-v2 .v2-wf__text {
  border: 1px solid var(--v2-line); border-radius: 10px; background: var(--v2-paper);
  padding: 12px 13px;
}
.avo-v2 .v2-wf__text p {
  margin: 0 0 10px; font: 400 14px/1.5 var(--v2-sans); white-space: pre-wrap;
  max-height: 260px; overflow-y: auto;
}

/* ── 可编辑文字图层 ─────────────────────────────────── */

.avo-v2 .v2-tl {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: rgba(23, 35, 29, .55); padding: 20px;
}
.avo-v2 .v2-tl__panel {
  background: var(--v2-paper); border-radius: 18px; box-shadow: var(--v2-shadow);
  width: min(1060px, 100%); max-height: 92vh; overflow-y: auto; padding: 18px 20px 16px;
}
.avo-v2 .v2-tl__head { display: flex; justify-content: space-between; align-items: center; }
.avo-v2 .v2-tl__head h3 { margin: 0; font: 600 20px/1.2 var(--v2-display); }
.avo-v2 .v2-tl__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px; margin-top: 12px;
}
.avo-v2 .v2-tl__stage { background: #fff; }
.avo-v2 .v2-tl__side { display: grid; gap: 10px; align-content: start; }
.avo-v2 .v2-tl__side textarea,
.avo-v2 .v2-tl__side input[type="number"],
.avo-v2 .v2-tl__side select {
  width: 100%; border: 1px solid var(--v2-line); border-radius: 8px;
  font: 400 14px/1.4 var(--v2-sans); padding: 8px 10px; background: #fff;
}
.avo-v2 .v2-tl__side label { font: 600 12.5px/1.3 var(--v2-sans); display: block; margin-bottom: 4px; }
.avo-v2 .v2-tl__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.avo-v2 .v2-tl__foot { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

.avo-v2 .v2-tlbox { cursor: pointer; }
.avo-v2 .v2-tlbox.is-sel { border-color: var(--v2-ink); }
.avo-v2 .v2-tlbox.is-sel > i { background: var(--v2-ink); }
/* 溢出的层必须一眼可见 —— 它挡着导出 */
.avo-v2 .v2-tlbox.is-overflow { border-color: var(--v2-danger); background: rgba(217, 75, 41, .18); }
.avo-v2 .v2-tlbox.is-overflow > i { background: var(--v2-danger); }

@media (max-width: 820px) {
  .avo-v2 .v2-tl__body { grid-template-columns: 1fr; }
}

/* ── 批量验收台 ─────────────────────────────────────── */

.avo-v2 .v2-review {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px;
}
.avo-v2 .v2-review__list { display: grid; gap: 8px; align-content: start; }
.avo-v2 .v2-review__empty {
  font: 400 14px/1.5 var(--v2-sans); color: var(--v2-muted); padding: 22px; margin: 0;
  border: 1px dashed var(--v2-line); border-radius: 14px; text-align: center;
}

.avo-v2 .v2-run {
  position: relative; display: grid; gap: 3px; text-align: left; cursor: pointer;
  border: 1px solid var(--v2-line); border-radius: 12px; background: #fff;
  padding: 12px 30px 12px 13px; color: inherit; font: inherit; width: 100%;
}
.avo-v2 .v2-run:hover { border-color: var(--v2-lime-deep); }
.avo-v2 .v2-run.is-active { border-color: var(--v2-ink); box-shadow: 0 0 0 1px var(--v2-ink); }
.avo-v2 .v2-run__name { font: 600 14px/1.25 var(--v2-display); }
.avo-v2 .v2-run__meta { font: 500 12.5px/1.3 var(--v2-sans); color: var(--v2-ink); }
.avo-v2 .v2-run__foot { font: 400 11.5px/1.3 var(--v2-sans); color: var(--v2-muted); }
/* 「还有没看过的」用一个点标出来 —— 列表要能一眼看出哪批还欠处理 */
.avo-v2 .v2-run__dot {
  position: absolute; top: 13px; right: 12px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--v2-warn);
}

.avo-v2 .v2-review__head {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; margin-bottom: 10px;
}
.avo-v2 .v2-review__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;
  margin-top: 14px;
}

.avo-v2 .v2-rev {
  border: 1px solid var(--v2-line); border-radius: 14px; background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
}
.avo-v2 .v2-rev.is-kept    { border-color: #cfe4a4; }
.avo-v2 .v2-rev.is-dropped { opacity: .62; }
.avo-v2 .v2-rev__img {
  aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--v2-soft);
}
.avo-v2 .v2-rev__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.avo-v2 .v2-rev__body { padding: 11px 12px 12px; display: grid; gap: 7px; }
.avo-v2 .v2-rev__unseen {
  margin: 0; font: 500 12px/1.3 var(--v2-sans); color: var(--v2-warn);
}
.avo-v2 .v2-rev__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.avo-v2 .v2-rev__actions .v2-btn { min-height: 34px; padding: 0 10px; font-size: 13px; }
.avo-v2 .v2-rev__verdict {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 13px/1 var(--v2-sans); color: var(--v2-ok); padding: 0 4px;
}
.avo-v2 .v2-rev.is-dropped .v2-rev__verdict { color: var(--v2-danger); }

@media (max-width: 820px) {
  .avo-v2 .v2-review { grid-template-columns: 1fr; }
}

/* ── 素材中心 ───────────────────────────────────────── */
.avo-v2 .v2-assets__bar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; padding: 16px 18px; margin-bottom: 14px;
}
.avo-v2 .v2-assets__filters { display: flex; gap: 10px; flex-wrap: wrap; }
.avo-v2 .v2-assets__bar .v2-choices { display: flex; grid-template-columns: none; gap: 6px; }
.avo-v2 .v2-assets__bar .v2-choice { min-height: 38px; padding: 0 13px; }
.avo-v2 .v2-assets__right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.avo-v2 .v2-input {
  min-height: 40px; min-width: 190px; padding: 0 13px;
  border: 1px solid var(--v2-line); border-radius: 11px; background: #fff;
  font: 400 14px/1 var(--v2-sans); color: inherit;
}

.avo-v2 .v2-assets__usage { margin-bottom: 16px; }
.avo-v2 .v2-assets__grid { margin-top: 4px; }
.avo-v2 .v2-assets__more { margin-top: 18px; text-align: center; }
.avo-v2 .v2-assets__more .v2-help { margin-top: 8px; }

.avo-v2 .v2-asset__meta { font: 500 12px/1.4 var(--v2-sans); color: var(--v2-muted); margin: 0; }
.avo-v2 .v2-asset__gen > summary {
  cursor: pointer; font: 600 12px/1.4 var(--v2-sans); color: var(--v2-muted);
  list-style: none;
}
.avo-v2 .v2-asset__gen > summary::-webkit-details-marker { display: none; }
.avo-v2 .v2-asset__gen > summary::before { content: "› "; }
.avo-v2 .v2-asset__gen[open] > summary::before { content: "⌄ "; }
.avo-v2 .v2-asset__continue {
  width: 100%; min-height: 36px; margin-top: 2px;
  border: 1px solid var(--v2-line); border-radius: 10px; background: #fff;
  font: 500 13px/1 var(--v2-sans); padding: 0 10px; color: inherit;
}

.avo-v2 .v2-assets__groups { margin-top: 34px; }
.avo-v2 .v2-assets__groups-title { font: 600 24px/1.1 var(--v2-display); margin: 0 0 14px; }
.avo-v2 .v2-assets__group {
  border: 1px solid var(--v2-line); border-radius: 16px; background: #fff;
  padding: 14px 16px; margin-bottom: 12px;
}
.avo-v2 .v2-assets__group-row {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-top: 8px;
}
.avo-v2 .v2-assets__group-thumb {
  flex: none; width: 92px; height: 92px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--v2-line); background: var(--v2-soft);
}
.avo-v2 .v2-assets__group-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 响应式：移动端不允许页面级横向滚动 ─────────────── */
@media (max-width: 820px) {
  .avo-v2 .v2-workspace { grid-template-columns: 1fr; }
  .avo-v2 .v2-dropzone { min-height: 300px; }
  .avo-v2 .v2-shell { padding-top: 24px; }
}
@media (max-width: 480px) {
  .avo-v2 .v2-wrap { width: min(100% - 24px, 1180px); }
  .avo-v2 .v2-dropzone, .avo-v2 .v2-panel { padding: 20px; }
  .avo-v2 .v2-choices { grid-template-columns: 1fr; }
  .avo-v2 .v2-trust { gap: 10px; }
  .avo-v2 .v2-result-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* v1.68.0 · 窄屏边距收回 24px。
   上面加宽用的 `body.avo-v2-tool-x` 是 0,2,1，比原来的 `.avo-v2 .v2-wrap`(0,2,0)
   和 site.css 的 `.avo-v2-page .v2h-wrap`(0,2,0) 都高，不在这里补一遍的话，
   手机上边距会被顶回 48px —— 1480 那个上限在窄屏本来就不起作用，真正生效的是边距。 */
@media (max-width: 600px) {
  body[class*="avo-v2-tool-"] .v2h-wrap,
  body[class*="avo-v2-tool-"] .v2h-appmain > .avo-crumbs { width: calc(100% - 24px); }
}
@media (max-width: 480px) {
  body[class*="avo-v2-tool-"] .v2-wrap { width: calc(100% - 24px); }
}

/* v1.71.10 · v1 工具 SEO 段那个眉标（// FAQ、// Perfect for、// Related）的对比度。
 *
 * 它的颜色是 public.css 里的 var(--avo-brand) = #4A7C59，在 #f4f4ee 上只有 4.40，
 * 11px 小字要 4.5。public.css 是 v1.70.2 起在 v2 工具页上 enqueue 的，所以这个
 * v1 组件现在出现在新版页面上。
 *
 * ⚠ 不去改 tokens.css 的 --avo-brand：那是 v1 整套设计系统的品牌绿，
 *   连 wp-admin 都在用它，为了一个眉标动它波及面太大。
 *   这里只在 .avo-v2 作用域内覆盖，老页面一点不受影响。
 *   #457453 在 #f4f4ee 上 4.91 / 白底 5.42。
 */
.avo-v2 .avo-tool-seo__eyebrow { color: #457453; }

@media (prefers-reduced-motion: reduce) {
  .avo-v2 *, .avo-v2 *::after { transition: none !important; animation: none !important; }
}