/* Qiantang 设计系统 tokens(V3.1 §A: 由 Boss 定稿设计稿提取锁定)
   色板 5+1: 工作区底 #FAFAF9 / 左栏面 #F5F5F3 / 主字 #2A2320 / 中灰副字 #6B6058 / 标题棕 #3D2A20
   + 强调赤陶橙 #D95A35(全站唯一强调色; 实心按钮用同色相加深档 #B84526 保证白字对比度≥4.5)
   —— 0810 批次12(v2 灰白体系)——
   底/面/副字三色由暖米调改中性灰白: #FAF7F2→#FAFAF9 · #F3EDE3→#F5F5F3 · #4A3F38→#6B6058。
   ⚠️ landing.html 内有 18 处写死的 rgba(250,247,242,*)(= 旧 --g-bg 的 rgba 形态)不随 token 走,
      首页锁色由 landing.html 侧作用域覆盖处理, ⛔ 本文件不为首页开特例。
   状态语义色(成功绿/错误红)仅用于结果反馈, 见 UI自检报告说明。
   字体: Baloo 2(大标题/英文) + Noto Sans SC(正文) + Ma Shan Zheng(书法点缀, 每屏≤1处)——OFL 自托管
   4px 栅格 / 阴影 2 层 / 桌面主区留白 ≥64px 沿用 V3
   —— 0731 修订(§A 硬约束, 主页专用) ——
   圆角归一3值/字号阶梯8级已废止(移植期杀设计凶手): 主页(landing.html)改用逐值照抄 + 反向提取,
   圆角新增 5 值(见下 --r-99/28/20/16/12, 与旧 999/18/14 共 8 值全部保留不归并);
   字号/间距/行高/阴影在 landing.html 内按 dc.html 源码字面量直写, 不额外抽 token(源交接包本身即逐节点内联值,
   非工作台式的语义化 token 体系); 工作台(index.html 等)沿用旧 token 不受影响。
   ⚠️ 0810 更正: 上面这句"移植期自检暂停 3 条"与代码不符 —— ui_selfcheck.py 里判据 1/2/3 一直在跑,
      从未有过开关。批次12 起以代码为准: 12 条判据全部生效, 阶梯扩为 12/13/14/15/16/20/24/28/40/52/86。*/
@import url('/ui-fonts/fonts.css');
@import url('/ui-fonts/brand_fonts.css');

:root{
  /* 强调色相(赤陶橙家族, 交互与 CTA)
     🔴 --accent-ink 保留不动: 白/浅字压 --accent #D95A35 实测仅 3.84 不过 4.5 线,
        加深档 #B84526 是唯一过线值(判据7 实测 4.91)。设计侧补进规范前 ⛔ 不得删。 */
  --accent:#D95A35; --accent-ink:#B84526; --brand:var(--accent-ink); --brand-strong:#9A3A20; --brand-soft:#F6E3DA;
  /* 中性 5 级(0810 批次12: bg/surface/text2 由暖米调改 v2 灰白体系; border/text/title 不动) */
  --g-bg:#FAFAF9; --g-surface:#F5F5F3; --g-border:#E3D9C9; --g-text2:#6B6058; --g-text:#2A2320;
  --title:#3D2A20;
  /* 中性 · 批次12 新增面色(⛔ 增量, 不替换上面任何一级) */
  --g-seg:#EAEAE6;           /* 分段器底 / 禁用底 */
  --g-count:#F2F2EF;         /* 计数器常态底 / 缩略图占位底 */
  --g-card-hover:#F4F4F1;    /* 卡片 hover 底 */
  --g-text3:#8C8178;         /* 浅灰 ⚠️ 对 --g-bg 仅 3.64, ⛔ 不得用于正文, 限图标/分隔/装饰 */
  --g-text-disabled:#A9A29B; /* 禁用字 对 --g-seg 仅 2.09, 按 WCAG 禁用态豁免 */
  --overlay:rgba(42,35,32,.34); /* 弹窗遮罩 */
  --img-placeholder:#EFE8DC; /* 图/视频未加载占位底(= landing 演员卡与功能图原字面量) */
  /* 纯白面(卡内输入底/按钮白字) */
  --white:#FFFFFF;
  /* 深色容器(暖深棕) */
  --dark:#241C17;
  /* 状态语义色 */
  --ok:#2E6B45; --ok-bg:#E6F0E7; --bad:#B03A2E; --bad-bg:#F9E9E6;
  /* 智能层绿点(v2.2): 6px 圆点 + 2px 描边环, 环色随所在底色(⛔ 环色不另立 token, 取容器底) */
  --dot-smart:#558420;       /* v2.2 定稿(原 #4C9A6A); 对白卡 4.46 / 对工作区底 4.27 ⛔ 不得用作文字色 */
  /* 五站点彩点六色(v2.2 定稿): 案例卡右下角站点名前的 6px 圆点
     对白卡对比度 my 4.92 · tw 4.57 · ph 3.24 · th 4.14 · mx 4.53 · vn 7.93 —— 全部 ≥3.0
     产品实际显示的组合(五站点 + 智能绿, ⛔ 不含越南)两两最小 RGB 距离 84.4(马来↔智能绿), 达标 */
  --dot-my:#2F7D6B;          /* 马来西亚 */
  --dot-tw:#7A6BB5;          /* 台湾 */
  --dot-ph:#B8862A;          /* 菲律宾(v2.2 定稿; 原 #C99A2E 对白卡仅 2.58 不达标) */
  --dot-th:#C05C7E;          /* 泰国 */
  --dot-mx:#1F7AC4;          /* 墨西哥(v2.2 定稿, 原 #4E7FC1) */
  /* 越南 · 深靛蓝紫(v2.2 定稿; 原 #5A8F5A 为绿系, 与智能绿仅差 23.9 —— 该描述已作废)
     ⚠️ 越南不在产品的五站点内, 界面不显示; 涉及它的两组近距(马来↔越南 66.5 / 台湾↔越南 71.2)
     ⛔ 不需要优化, 因为二者不会同屏出现。 */
  --dot-vn:#4A4A8C;
  /* 八工具图标底(v2.4 定稿, 28×28 圆角8): 对面板#F5F5F3 / 对白卡#FFFFFF / 对描边#6B6058
     三者互相牵制, 目标区间对面板≥1.6·对白卡≥1.5·对描边≥3.0, Design 逐色手算 + 本窗口复算一致 */
  --tool-bg-titles:#CCBE70;     /* 标题六件套(暖金)   对面板1.72 · 对白卡1.89 · 对描边3.25 */
  --tool-bg-translate:#E8B298;  /* 原图翻译(暖橙)     对面板1.71 · 对白卡1.87 · 对描边3.27 */
  --tool-bg-spec:#F2A2BE;       /* 图片规格兜底(玫红) 对面板1.80 · 对白卡1.97 · 对描边3.11 */
  --tool-bg-watermark:#96C476;  /* 一键去水印(草绿)   对面板1.84 · 对白卡2.01 · 对描边3.04 */
  --tool-bg-video:#8CBEDC;      /* 视频翻译(天蓝)     对面板1.83 · 对白卡2.00 · 对描边3.06 */
  --tool-bg-tryon:#D4B2EE;      /* 模特试衣(薰衣紫)   对面板1.69 · 对白卡1.84 · 对描边3.31 */
  --tool-bg-voice:#B2B2E8;      /* 多语言口播(藏青)   对面板1.84 · 对白卡2.01 · 对描边3.03 */
  --tool-bg-live:#80C6AC;       /* 直播同传(青绿)     对面板1.82 · 对白卡1.98 · 对描边3.08 */
  --tool-bg-img2video:#A8C8D8;  /* 批20: 一键产品图生视频(灰蓝) 0826 Design 定稿改色, 原 #5CD6CC 作废 */
  /* 批22 第二轮(Design 四屏套皮 TB1-TB4 定稿): 暂定占位色 --tool-bg-ops(#EEA0E1)作废,
     Design 给了两个分色, 图标描边也随之改判据——这两色对默认描边 --g-text2(#6B6058)
     不过 3.0(市场分析仅 2.somewhat), Design 改用 --g-text(#2A2320)描边达标(市场分析
     stroke 对比 8.76 · 选品 stroke 对比 10.97, 本窗口复算一致, "已实算裁定"), 三处调用点
     (TB1 面板迷你导航行 28×28 / TB2 参数态头图 36×36 / TB4 移动分组卡 28×28)见 index.html
     内 .ops-icn 相关规则, ⛔ 不再套用 .toolico .ticon 的全站默认描边。 */
  --tool-bg-market:#B6C9A8;   /* 市场分析(鼠尾草绿) 对面板1.62 · 对白卡1.76 · 对描边(#2A2320)8.76 */
  --tool-bg-xuanpin:#E8D9A8;  /* AI智能选品(暖卡其)  对面板1.29 · 对白卡1.41 · 对描边(#2A2320)10.97
     ⚠️ 对面板/对白卡两项低于本站历史验收线(≥1.6/≥1.5)——Design 给定值, 本窗口未改, 记差异清单待 Design 复核。 */
  /* 批14 R2-3: 额度耗尽时顶掉上面八色 tint 的中性底。取值来自稿 0814_设计定稿 的
     buildTools(`background: out ? '#EFEFEC' : t.tint`), ⛔ 不是我方新调的颜色。
     此前生产用的是 --g-seg(#EAEAE6, 分段器/禁用底通用档), 与稿差一档;
     因 R2-3 要求"同屏两处入口对同一状态同表现", 左侧工具列表与画布图标行统一收敛到
     本 token —— 即把左列表从 #EAEAE6 移到 #EFEFEC(与稿对齐), ⛔ 不是两处各用一个值。
     配套字色仍是 --g-text-disabled(#A9A29B), 与稿 buildTools 的 out 分支一致。 */
  --tool-bg-out:#EFEFEC;        /* 额度耗尽图标底(稿 buildTools out 分支原值) */
  /* 渐变 */
  --grad-hero:linear-gradient(155deg,#FAF7F2 0%,#F3EDE3 60%,#F6E3DA 100%); /* landing 首屏专用, 不动 */
  --grad-brand:linear-gradient(140deg,#BE5730,#D99A63);                    /* 头像渐变(v2.2, 全站唯一渐变) */
  /* 圆角: 旧三值(工作台沿用, 不改) */
  --r-pill:999px; --r-card:18px; --r-btn:14px; --r-input:14px;
  /* 圆角: 主页设计稿字面量补充(0731 §A 移植, 与旧三值并存不归并; 999/18/14 复用上面三值) */
  --r-99:99px; --r-28:28px; --r-20:20px; --r-16:16px; --r-12:12px;
  /* 圆角: 补齐 landing.html 早已引用、却从未定义的两值(0810 批次12 修真实缺陷) ——
     此前 var(--r-14)/var(--r-18) 解析失败回落 initial=0, 三个主 CTA 与演员卡实际渲染成直角。 */
  --r-14:14px; --r-18:18px;
  /* 圆角: 批次12 新增两档 */
  --r-8:8px;                 /* 工具图标底 */
  --r-6:6px;                 /* 勾选框 */
  /* 阴影 2 层(旧, 不动) */
  --sh-sm:0 1px 2px rgba(42,35,32,.06),0 4px 16px rgba(42,35,32,.07);
  --sh-md:0 4px 12px rgba(42,35,32,.09),0 20px 48px rgba(42,35,32,.14);
  /* 阴影: 批次12 新增四档(⛔ 与 --sh-sm/--sh-md 并存, 不归并 ——
     --sh-sm 双层有 4 处在用, 改值等于动 4 处现有视觉; --sh-card 是新屏专用的单层档) */
  --sh-card:0 1px 2px rgba(42,35,32,.06);    /* 卡片常态(新屏; = --sh-sm 的第一层) */
  --sh-hover:0 1px 3px rgba(42,35,32,.09);   /* 卡片 hover */
  --sh-pop:0 4px 14px rgba(42,35,32,.10);    /* 气泡 */
  --sh-modal:0 18px 60px rgba(42,35,32,.24); /* 弹窗 */
  /* 字号阶梯(旧 6 级 + 首屏特大两级; 批次12 增 13/15/24)
     🔴 --fs-14 保留不动: body 全站默认字号即 var(--fs-14), 另有 19 处组件直接引用。 */
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px;
  --fs-20:20px; --fs-24:24px; --fs-28:28px; --fs-40:40px;
  --fs-hero-min:52px; --fs-hero-max:86px;
  /* 字重(批次12 起有 token; 其余档位仍为各页字面量) */
  --fw-500:500;
  /* 间距 4px 栅格 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  /* 别名: 补齐 index.html 早已引用、却从未定义的两个名字(0810 批次12) */
  --line:var(--g-border);    /* index.html:205 <hr> 分隔线, 此前不可见 */
  --ink-400:var(--g-text2);  /* index.html:977 箭头字色, 此前取继承色 */
  --font:'Noto Sans SC',-apple-system,'PingFang SC',sans-serif;
  --font-display:'Baloo 2','Noto Sans SC',sans-serif;
  --font-callig:'Ma Shan Zheng','Noto Sans SC',cursive;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);font-size:var(--fs-14);color:var(--g-text);
  background:var(--g-bg);line-height:1.6;-webkit-font-smoothing:antialiased}

/* —— 按钮三态 + loading —— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);border:none;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:var(--fs-14);border-radius:var(--r-pill);
  padding:var(--sp-3) var(--sp-5);background:var(--brand);color:var(--white);transition:all .18s ease}
.btn:hover{background:var(--brand-strong);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--g-text);border:1px solid var(--g-border);font-weight:500}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);box-shadow:none}
.btn.sm{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-12)}
.btn.big{padding:var(--sp-4) var(--sp-6);font-size:var(--fs-16)}
.btn.danger{background:var(--bad)}
.btn.danger:hover{background:var(--bad);opacity:.9}
.btn .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:var(--white);
  border-radius:var(--r-pill);animation:sp .7s linear infinite}
.btn.ghost .spin{border-color:var(--g-border);border-top-color:var(--brand)}
@keyframes sp{to{transform:rotate(360deg)}}

/* —— 卡片 —— */
.card{background:var(--white);border:1px solid var(--g-border);border-radius:var(--r-card);box-shadow:var(--sh-sm)}
.card h3{margin:0;padding:var(--sp-4) var(--sp-4);border-bottom:1px solid var(--g-border);font-size:var(--fs-16);font-weight:600;color:var(--title)}
.pad{padding:var(--sp-4)}

/* —— 表单 —— */
label{display:block;font-size:var(--fs-12);color:var(--g-text2);margin:var(--sp-3) 0 var(--sp-1);font-weight:500}
input,textarea,select{width:100%;padding:var(--sp-2) var(--sp-3);border:1px solid var(--g-border);border-radius:var(--r-input);
  font-family:inherit;font-size:var(--fs-14);background:var(--white);color:var(--g-text);transition:border .15s}
input:focus,textarea:focus{outline:none;border-color:var(--brand)}
textarea{resize:vertical;min-height:56px}
input:disabled{background:var(--g-surface);color:var(--g-text2)}

/* —— 徽章 / 提示条 —— */
.b{font-size:var(--fs-12);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-btn);background:var(--g-surface);color:var(--g-text2);font-weight:500}
.b.ok{background:var(--ok-bg);color:var(--ok)} .b.bad{background:var(--bad-bg);color:var(--bad)}
.b.pos{background:var(--brand-soft);color:var(--brand)}
.banner{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-btn);font-size:var(--fs-14);margin-bottom:var(--sp-4);display:flex;gap:var(--sp-2);align-items:center}
.banner.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--g-border)}
.banner.bad{background:var(--bad-bg);color:var(--bad);border:1px solid var(--g-border)}

/* —— 深色视觉容器 —— */
.vidbox{background:var(--dark);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-md);position:relative}
.vidbox img{width:100%;display:block}

.muted{color:var(--g-text2);font-size:var(--fs-12)}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--g-border);border-top-color:var(--brand);border-radius:var(--r-pill);animation:sp .7s linear infinite;vertical-align:-2px}

/* —— 预览图统一防跳动 —— */
img.thumb{aspect-ratio:1/1;object-fit:contain;background:var(--g-surface)}
img.shot43{aspect-ratio:3/4;object-fit:contain;background:var(--g-surface)}

/* —— 无障碍: 减少动态(全站共享; 加载指示 spinner 属功能反馈予以保留) —— */
@media (prefers-reduced-motion:reduce){
  .btn:hover,.btn:active{transform:none;box-shadow:none}
}