/* ════════════════════════════════════════════════════════════════════════
   SKILLS —— 目录页 + 工作台

   ⚠️ 本文件【只在 propai-shell 的 index.html 里 link】。
      🔴 更正（R2 摸底实测）：两份壳是两棵完全独立的目录，inode 不同、
         硬链接数 1。改 propai-shell 里的任何文件（包括 base.css）都【到不了】
         lumiq.asia。真正的代价是两份会【漂】，不是会【污染】。
   ⚠️ 每一条选择器都以 .sk 开头，没有一条全局规则。

   🔴 R2：整页从金黑翻成【浅色】，跟另外九个工具页同一套皮。
      本页现在长在 PToolShell 的 .pai 里面，所以颜色一律取 .pai 自己那套
      （propai.css: --paper #fff / --ink #17181a / --ink-2 / --ink-3 / --line），
      跟 .pcard .ptabs 这些用的是同一批变量。
      ⚠️ 【金色一个值都没动】——--gold / --gold-live / --gold-wash 在浅色下
         本来就对（.pai 自己把 --gold 覆盖成了 #d9a441，--gold-wash 覆盖成
         不透明的 #fdf7ec），跟着走即可。
      ⚠️ 不再引用 --cream / --panel / --bg-landing / --muted 这些深色变量，
         也不再有 rgba(247,242,233,α) 那一串奶白透明度。
   ════════════════════════════════════════════════════════════════════════ */

.sk {
  --sk-r: 14px;
  /* 🔴 判断点：原来是 var(--gold-edge)（金色 18% 透明）。在近黑底上那是一条
     看得见的暖金细线；换到白底上它算出来是 rgb(245,238,228)，跟白底只有
     1.13:1，等于没有边框。改成 --line #ebeced —— 这正是隔壁九个工具页
     .pcard 用的那条线（白底 1.20:1），本页要跟它们看起来是一套。
     金色【强调】色（--gold / --gold-live / --gold-wash）一个都没动。 */
  --sk-line: var(--line);
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  /* ⚠️ 兜住一切横向溢出。手机上任何一个子元素超宽都会让整页能左右拖。 */
  overflow-x: hidden;
}
.sk *,
.sk *::before,
.sk *::after { box-sizing: border-box; }
/* ⚠️ `.sk a` 的特指度是 (0,1,1)，比 `.sk__btn` 这种单类名 (0,1,0) 高 ——
   所以任何 <a> 上写的 color 都会被这条压掉。实测改前 .sk__back 想要金色，
   算出来是奶白，就是被这条吃了。
   下面凡是【自己要定颜色】的类，一律写成 `.sk .sk__xxx` (0,2,0) 压回来。
   （落地页换金色那轮踩的 `.plv2 a { color: inherit }` 是同一个坑。） */
.sk a { color: inherit; text-decoration: none; }

/* R2: .sk__head / .sk__back / .sk__h1 / .sk__sub 全部删除 —— 标题、说明和
   回程都交给 PToolShell 的 .ptop__crumb + .phead 了，页面不再自己画一遍。 */
.sk__muted { font-size: 14px; color: var(--ink-3); }
/* #e08a7a 是给近黑底配的浅珊瑚色，白底上只有 2.2:1，读不了。
   改用 #c2413a —— 浅色壳里已经在用的那个红（白底 5.15:1），不发明新色值。 */
.sk__err { font-size: 14px; color: #c2413a; }
.sk__hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.sk__notice {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--sk-line); background: var(--gold-wash);
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}

/* ── 目录页 ─────────────────────────────────────────────────────────── */
.sk__filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 22px;
}
.sk__search {
  flex: 1 1 260px; min-width: 0;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--sk-line); background: var(--paper);
  color: var(--ink); font: inherit; font-size: 14px;
}
.sk__search::placeholder { color: var(--ink-3); }
.sk__search:focus { outline: none; border-color: var(--gold-live); }
.sk__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.sk__cat {
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--sk-line); background: transparent;
  color: var(--ink-2); font: inherit; font-size: 12.5px;
  transition: border-color var(--ease) 200ms, color var(--ease) 200ms;
}
.sk__cat:hover { border-color: var(--gold-live); color: var(--ink); }
.sk__cat.is-on { background: var(--gold); border-color: transparent; color: var(--ink); font-weight: 600; }

.sk__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; align-items: start;
}
.sk__card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--sk-line); border-radius: var(--sk-r);
  background: var(--paper);
  /* 白卡贴在白页上，只靠一条 --line 会显得比隔壁九个工具页的卡"浮"得少。
     用 .pcard 一模一样的那两层阴影补回来（propai.css:364）。
     ⚠️ box-shadow 不占布局，几何一个像素都不变。 */
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 16px -8px rgba(16, 24, 40, 0.05);
  transition: border-color var(--ease) 220ms, transform var(--ease) 220ms;
}
.sk__card:hover { border-color: var(--gold-live); transform: translateY(-2px); }
.sk__cardImg {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover; background: var(--paper-2);
}
/* 封面缺失：纯色块 + 标题，不放破图。 */
.sk__cardImg--empty {
  display: grid; place-items: center; padding: 16px;
  background: linear-gradient(150deg, var(--gold-wash), var(--paper-2) 72%);
  color: var(--gold); font-size: 15px; font-weight: 600; text-align: center;
}
.sk__cardBody { display: block; padding: 14px 15px 16px; }
.sk__cardTitle { display: block; font-size: 15.5px; font-weight: 600; }
.sk__cardDesc {
  display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-2); font-style: normal;
}
.sk__tag {
  display: inline-block; margin-top: 11px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--sk-line); font-size: 11px;
  color: var(--ink-3);
}

/* ── 工作台：三栏 ───────────────────────────────────────────────────── */
.sk__cols {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 320px);
  gap: 18px; align-items: start;
}
/* 对话栏不存在时（还没出摘要），前两栏摊开占满。 */
.sk__cols:not(:has(.sk__chat)) {
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
}
.sk__col {
  border: 1px solid var(--sk-line); border-radius: var(--sk-r);
  background: var(--paper); padding: 18px;
  /* 同 .sk__card：跟 .pcard 用同一组阴影，不改内边距。 */
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 16px -8px rgba(16, 24, 40, 0.05);
}

.sk__field { margin-bottom: 16px; }
.sk__label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-2);
}
.sk__input, .sk__ta {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--sk-line); background: var(--paper);
  color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.5;
}
.sk__input::placeholder, .sk__ta::placeholder { color: var(--ink-3); }
.sk__input:focus, .sk__ta:focus { outline: none; border-color: var(--gold-live); }
.sk__ta { resize: vertical; margin-bottom: 10px; }

.sk__imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sk__thumb { position: relative; display: block; width: 54px; height: 54px; }
.sk__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 9px; border: 1px solid var(--sk-line);
}
.sk__thumbX {
  position: absolute; top: -6px; right: -6px;
  width: 19px; height: 19px; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--gold); color: var(--ink);
  font: inherit; font-size: 13px; line-height: 1;
}
.sk__addImg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; height: 54px; border-radius: 9px; cursor: pointer;
  border: 1px dashed var(--gold-live); background: transparent;
  color: var(--gold); font: inherit; font-size: 12.5px;
}
.sk__addImg i { font-style: normal; color: var(--ink-3); }
/* 🔴 sr-only 而不是 display:none —— 某些 Chromium 会静默丢掉
   display:none 的 file input 上的 .click()。 */
.sk__srOnly {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.sk__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sk__choice {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--sk-line); background: var(--paper);
  color: var(--ink-2); font: inherit; text-align: left;
  transition: border-color var(--ease) 200ms;
}
.sk__choice:hover { border-color: var(--gold-live); }
.sk__choice.is-on { border-color: var(--gold); background: var(--gold-wash); color: var(--ink); }
.sk__choice b { display: block; font-size: 13px; font-weight: 600; }
.sk__choice i { display: block; margin-top: 2px; font-size: 11px; font-style: normal; color: var(--ink-3); }

/* ⚠️ 写成 .sk .sk__btn 而不是 .sk__btn —— 特指度 (0,2,0) 才压得过上面
   `.sk a` 的 (0,1,1)。结果页那个 Download 就是个 <a class="sk__btn">，
   不提特指度它的 color 会被 inherit 掉。 */
.sk .sk__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 18px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--gold-live); background: transparent;
  color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600;
  transition: filter var(--ease) 200ms, opacity var(--ease) 200ms;
}
/* 金底深字。--ink 在 .pai 里是 #17181a，压在 --gold #d9a441 上 —— 见报告的对比度实测。 */
.sk .sk__btn--primary { background: var(--gold); border-color: transparent; color: var(--ink); }
.sk .sk__btn:hover:not(:disabled) { filter: brightness(1.1); }
.sk .sk__btn:disabled { opacity: 0.45; cursor: not-allowed; }

.sk__stage { display: flex; flex-direction: column; gap: 14px; }
.sk__video {
  display: block;
  margin: 0 auto;
  /* 🔴 改前是 width:100% + max-width:340px + 写死 aspect-ratio:9/16。
     两个毛病：
       ① 340px 是收进 PToolShell 之前照左栏定的，中栏后来变宽到 798px，
          左右各留 229px 空白。
       ② 写死 9/16 意味着【横片成片会被塞进竖框再 cover 裁掉】。
          videoFixed 是逐个 template 定的，以后一定会有 16:9 的。
     现在改成 width/height 都 auto，由两条上限各自约束：
       竖片撞 max-height，横片撞 max-width。
     ⚠️ aspect-ratio: auto 9/16 —— 有内在比例就用内在的（成片是横是竖它自己
        说了算），metadata 还没到的时候用 9/16 占位，避免加载瞬间跳版。
     ⚠️ object-fit 从 cover 改成 contain：既然框会跟着素材走，就不该再裁。 */
  width: auto;
  height: auto;
  max-width: 460px;
  max-height: 640px;
  aspect-ratio: auto 9 / 16;
  object-fit: contain;
  border-radius: 12px; border: 1px solid var(--sk-line); background: #000;
}
/* 🔴 kind: image-direct 的中栏是图片。
   .sk__video 的 background 是 #000（视频黑边的延续），透明 PNG 成品在上面
   会露出黑底 —— seedream 的 output_format 就是 png。所以只把底色换掉，
   其余（width/height auto、max-w 460 / max-h 640、object-fit: contain、
   aspect-ratio: auto 9/16）一个值都不动 —— 那几条对 3:4 直接成立：
     3:4 的图内在比例胜出 → 480x640，撞的是 max-height。 */
.sk__video--img { background: var(--paper); }

/* dry-run 面板里的说明行。⚠️ 只在 image-direct 上渲染，fashion-runway
   那块面板逐字未变。 */
.sk__dryNote {
  margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-2);
}
.sk__dryNote--warn { color: var(--gold-deep, #8a6415); }

/* 三级回落的最后一级：封面也没有时的纯色块。⚠️ 不留空白、不放破图。 */
.sk__video--blank {
  display: grid; place-items: center; gap: 10px;
  width: 100%; max-width: 340px; aspect-ratio: 9 / 16;
  background: linear-gradient(160deg, var(--gold-wash), var(--paper-2) 70%);
  border-color: var(--sk-line);
}
.sk__video--blank .icon { width: 30px; color: var(--gold); }
.sk__video--blank b { font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; padding: 0 14px; }
.sk__summary {
  padding: 14px; border-radius: 12px;
  border: 1px solid var(--sk-line); background: var(--gold-wash);
}
.sk__summaryLabel {
  margin: 0 0 6px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.sk__summaryText { margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.sk__dry {
  border: 1px solid var(--sk-line); border-radius: 10px; padding: 10px 12px;
  font-size: 12px; color: var(--ink-2);
}
.sk__dry pre {
  margin: 10px 0 0; padding: 10px; border-radius: 8px;
  background: var(--paper-2); color: var(--ink-2);
  font-size: 11px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap;
  word-break: break-word;
}

.sk__chat { display: flex; flex-direction: column; }
.sk__chatHead {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.sk__log {
  flex: 1 1 auto; min-height: 120px; max-height: 320px; overflow-y: auto;
  margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px;
}
.sk__msg {
  margin: 0; padding: 9px 11px; border-radius: 10px;
  font-size: 13px; line-height: 1.55;
}
.sk__msg--user { background: var(--gold-wash); border: 1px solid var(--sk-line); }
.sk__msg--assistant { background: var(--paper-2); color: var(--ink-2); }

/* ── 断点 ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* 🔴 三栏在窄屏放不下 → 竖排：表单 → 样片/结果 → 对话。
     顺序跟桌面从左到右一致，用户的心智模型不变。 */
  .sk__cols,
  .sk__cols:not(:has(.sk__chat)) { grid-template-columns: minmax(0, 1fr); }
  .sk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sk { padding: 20px 16px 56px; }
  .sk__h1 { font-size: 24px; }
  .sk__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sk__col { padding: 15px; }
  .sk__video { max-width: 100%; }
}

/* ── R-i18n: 目录页卡片播放 ───────────────────────────────────────── */
/* 视频跟封面图占同一个盒子（.sk__cardImg 已经定了 3/4 和 object-fit）。
   ⚠️ pointer-events:none —— 卡片整体是一个 <a>，视频不能把点击吞掉。
      hover 事件挂在 <a> 上，所以这条不影响 hover。 */
.sk__cardVid { pointer-events: none; background: #000; }

/* reduced-motion 下的播放按钮。⚠️ 它必须能点，所以不能继承上面的 none。 */
.sk__card { position: relative; }
.sk__cardPlay {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  box-shadow: 0 2px 8px rgba(23, 24, 26, 0.18);
}
.sk__cardPlay .icon { width: 14px; }
.sk__cardPlay:hover { background: #fff; }
.sk__cardPlay:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* 视频叠在封面上。默认透明 —— 露出下面的封面；真的播起来（skPlay 里加
   .is-on）才淡入。这样 preload="none" 还没加载完的那一瞬不会闪一下黑。 */
.sk__cardVid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 220ms var(--ease);
  /* ⚠️ 卡片整体是一个 <a>，视频不能吞掉点击。hover 事件挂在 <a> 上，不受影响。 */
  pointer-events: none;
}
.sk__cardVid.is-on { opacity: 1; }