/* ══════════ jzrealm 技能（.sk-*）═════════════════════════════════════════
   首页「无限边界」右边那颗「jzrealm 技能」进来就是这一屏（用户 2026-10）：
   ① 技能清单（`#/skills`）：三张卡，第一张「PPT 制作」能用；
   ② PPT 制作（`#/skills/ppt`）：三栏流水线 —— 想法与素材 → 大纲与风格 → 成品。

   两条约束跟别的视图一致：
   · 颜色全部取 tokens.css 的变量（--text / --text-2 / --text-3 / --glass-* / --accent…），
     深浅色两套外观自动跟着换，不写死一个色；
   · 玻璃板那套质地（--glass-bg / --glass-line / --glass-edge / --glass-shadow）跟首页入口卡、
     无限边界的卡、诊断那几块是同一个 —— 这一屏进来不会像"另一个站"。
   ══════════════════════════════════════════════════════════════════════ */

.view-inner.sk-host { max-width: 1180px; padding-top: 14px; }

.sk { display: flex; flex-direction: column; gap: 18px; }

/* ── 抬头 ───────────────────────────────────── */
.sk-head { min-width: 0; }
.sk-head-flow { display: flex; align-items: flex-start; gap: 14px; }
.sk-head-text { min-width: 0; }
.sk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 11px; letter-spacing: .14em;
  color: var(--text-3); text-transform: uppercase;
}
.sk-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.sk-title { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -0.025em; }
.sk-desc { margin: 10px 0 0; max-width: 70ch; font-size: 13px; line-height: 1.8; color: var(--text-2); }

/* 三栏那一屏左边那颗「‹ 全部技能」 */
.sk-back {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  margin-top: 2px; padding: 7px 12px 7px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-sunken);
  color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sk-back:hover { border-color: var(--accent); color: var(--text); }
.sk-back .icon { width: 14px; height: 14px; }

/* ── 那条玻璃板（清单那一屏）─────────────────── */
.sk-board {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px; padding: 22px;
  border-radius: 22px;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-line), var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.sk-board-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.sk-spacer { flex: 1 1 12px; }
.sk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-sunken);
  font-size: 11.5px; color: var(--text-3); white-space: nowrap;
}
.sk-chip.is-ready { color: var(--text-2); }
.sk-chip-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── 技能卡（清单）───────────────────────────── */
.sk-cards { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 16px 16px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.sk-card:hover {
  transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}
.sk-card-key {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--text-3); text-transform: uppercase;
}
.sk-card-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.sk-card-note { font-size: 12px; line-height: 1.7; color: var(--text-3); }
.sk-card-go {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 4px;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.sk-card-go .icon { width: 13px; height: 13px; }
.sk-card.is-soon {
  cursor: default; border-style: dashed; background: transparent;
  color: var(--text-3);
}
.sk-card.is-soon:hover { transform: none; border-color: var(--line); box-shadow: none; }
.sk-card.is-soon .sk-card-name { color: var(--text-2); font-weight: 600; }
.sk-card.is-soon .sk-card-go { color: var(--text-3); }

/* ── 工具条（历史项目 / 保存 / 新增 PPT 制作）─────────────────
   用户 2026-10：「**在PPT制作上方新增一个历史项目，保存按钮，新增一个PPT制作按钮**」 */
.sk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 12px;
}
.sk-bar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--glass-edge); background: var(--glass-bg);
  color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sk-bar-btn:hover { border-color: var(--accent); color: var(--text); }
.sk-bar-btn .icon { width: 14px; height: 14px; }
.sk-bar-btn.is-primary {
  border-color: transparent; background: var(--accent); color: var(--accent-text);
}
.sk-bar-btn.is-primary:hover { color: var(--accent-text); filter: brightness(1.06); }
.sk-bar-badge {
  min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--text); font-size: 10.5px; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.sk-bar-badge.is-empty { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text-3); }
.sk-bar-status { font-size: 11.5px; color: var(--text-3); }
.sk-bar-status.is-saved { color: var(--text-2); }
/* 「批量视频分镜」那条工具条在**右上角**：状态在左、四颗钮被 `sk-spacer` 顶到最右
   （用户 2026-10：「批量视频分镜右上方新建一个历史记录，保存，新建按钮，删除按钮」） */
.sk-bar-end .sk-bar-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52%; }
@media (max-width: 760px) {
  .sk-bar-end .sk-bar-status { max-width: 100%; order: 2; flex-basis: 100%; }
}

/* 栏1 里那一排小工具（目前只有"从画布项目选图"） */
.sk-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 2px; }

/* ── 历史项目浮层 ── */
.sk-hist { display: flex; flex-direction: column; gap: 8px; }
.sk-hist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-sunken);
}
.sk-hist-row.is-on { border-color: var(--accent); }
.sk-hist-thumb {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 36px; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg); color: var(--text-3);
}
.sk-hist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-hist-thumb .icon { width: 15px; height: 15px; }
.sk-hist-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.sk-hist-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-hist-meta { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ── 从画布项目选图 ── */
.sk-cv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; min-height: 300px; }
.sk-cv-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.sk-cv-proj {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 7px 9px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-sunken);
  color: var(--text-2); font: inherit;
}
.sk-cv-proj:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.sk-cv-proj.is-on { border-color: var(--accent); color: var(--text); }
.sk-cv-name {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-cv-count { font-size: 10.5px; color: var(--text-3); }
.sk-cv-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px; align-content: start; max-height: 420px; overflow-y: auto;
}
.sk-cv-pick {
  padding: 0; border-radius: 9px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--bg-sunken); line-height: 0;
}
.sk-cv-pick img { width: 100%; height: 72px; object-fit: cover; display: block; }
.sk-cv-pick:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.sk-cv-pick.is-on { border-color: var(--accent); }

/* ── PPT 三栏 ───────────────────────────────── */
/* 用户 2026-10：「**ppt制作这三个栏要大小要统一**」——
   三栏同一个高度（stretch + 同一个 --sk-col-h），谁的内容长就在自己那一栏里滚，
   不许一栏高两栏矮。高度按一屏算：一屏放得下就撑满，屏幕特别高/特别矮都有上下限。 */
.sk-flow {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  --sk-col-h: clamp(560px, calc(100vh - 232px), 920px);
}
.sk-col { height: var(--sk-col-h); max-height: var(--sk-col-h); overflow: hidden; }
/* 每栏里"会长的那块"自己滚，头（步骤条）和脚（按钮）钉住不动 */
.sk-c1 > .sk-up { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.sk-c2 > .sk-outline { flex: 1 1 auto; min-height: 0; resize: none; }
.sk-c3 > .sk-preview { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.sk-preview {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 24%, transparent) transparent;
}
.sk-preview::-webkit-scrollbar { width: 6px; }
.sk-preview::-webkit-scrollbar-thumb {
  border-radius: 99px; background: color-mix(in srgb, var(--text) 24%, transparent);
}
/* 下面还有页没露出来：底部淡淡化开，一眼看出"能往下滚" */
.sk-preview.is-more {
  mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
}
.sk-col {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 14px 14px 12px; border-radius: 18px;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-line), var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
/* 后两栏比第一栏略淡：一眼看出"是接着往下走的" */
.sk-c2 { background: color-mix(in srgb, var(--glass-bg) 82%, transparent); }
.sk-c3 { background: color-mix(in srgb, var(--glass-bg) 70%, transparent); }
.sk-col-head { display: flex; align-items: center; gap: 8px; }
.sk-step {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sk-col-title { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.sk-col-tip { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.sk-col-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.sk-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-go { flex: 1 1 auto; justify-content: center; }
.sk-cancel { flex: none; }

.sk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sk-label { font-size: 11.5px; color: var(--text-3); letter-spacing: 0.02em; }
.sk-hint { font-size: 11px; line-height: 1.65; color: var(--text-3); }
.sk-input {
  width: 100%; box-sizing: border-box; min-width: 0;
  padding: 10px 11px; border-radius: 12px; resize: vertical;
  border: 1px solid var(--line); background: var(--bg-sunken);
  color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.7;
  outline: none; transition: border-color var(--dur-fast) var(--ease);
}
.sk-input:focus { border-color: var(--accent); }
.sk-input::placeholder { color: var(--text-3); }
.sk-idea { min-height: 84px; }
.sk-outline { min-height: 300px; font-family: var(--mono); font-size: 12px; line-height: 1.75; }
.sk-model { width: 100%; }
/* 用户 2026-10：「**ppt制作用户上传的图片可以缩小……应该是横向排序5张，竖向排序在接着往下排**」
   —— 只在这一屏的上传区收口：一排正好 5 张，第 6 张换行接着往下排（不撑大这一栏） */
.sk-c1 .wb-thumbs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px; margin-top: 10px;
}
.sk-c1 .wb-thumb { width: auto; min-width: 0; padding: 3px; border-radius: 9px; }
.sk-c1 .wb-thumb img { height: 42px; border-radius: 7px; }
.sk-c1 .wb-thumb-no {
  font-size: 9px; line-height: 1.3; padding: 0 3px; border-radius: 4px;
}
.sk-c1 .wb-thumb-bar { gap: 0; }
.sk-c1 .wb-thumb-bar .icon-btn { width: 16px; height: 16px; }

/* 状态行（跑起来 / 好了 / 出错了） */
.sk-line {
  padding: 7px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-sunken);
  font-size: 11.5px; line-height: 1.65; color: var(--text-3);
  word-break: break-word;
}
.sk-line.is-busy { color: var(--text-2); border-color: var(--accent); }
.sk-line.is-error { color: var(--text); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.sk-line.is-error::before { content: "⚠ "; }

/* 风格那一排：小色块 + 名字，点一下换 */
.sk-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-style {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-sunken);
  color: var(--text-3); font: inherit; font-size: 11.5px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sk-style:hover { color: var(--text-2); }
.sk-style.is-on { border-color: var(--accent); color: var(--text); }
.sk-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; border: 1px solid rgba(0, 0, 0, .25); }
/* 六款风格各一块色：跟 src/pptx.js 里 PPT_STYLES 的 accent / bg 对得上 */
.sk-swatch.is-apple { background: linear-gradient(135deg, #ffffff 0 55%, #0071e3 55% 100%); }
.sk-swatch.is-dark { background: linear-gradient(135deg, #0f1115 0 55%, #4aa3ff 55% 100%); }
.sk-swatch.is-swiss { background: linear-gradient(135deg, #ffffff 0 55%, #e23a2e 55% 100%); }
.sk-swatch.is-magazine { background: linear-gradient(135deg, #f7f4ee 0 55%, #c8a15a 55% 100%); }
.sk-swatch.is-warm { background: linear-gradient(135deg, #faf7f2 0 55%, #b07a4a 55% 100%); }
.sk-swatch.is-tech { background: linear-gradient(135deg, #081426 0 55%, #35d0ff 55% 100%); }

/* ── 栏3：成品（上：整本摊开的浏览 / 下：下载）────────── */
.sk-c3 { gap: 10px; }
/* 上下两端之间那条细线（不是边框，是一道渐隐的分隔） */
.sk-c3-split {
  height: 1px; flex: none; margin: 2px 0 4px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}

/* 上半：预览 */
.sk-preview { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6.4% 7%;
  font-size: 4.2cqw;                 /* 里面全用 em —— 卡片变宽变窄，一页的字跟着等比走 */
  line-height: 1.5; overflow: hidden;
}
@supports not (font-size: 1cqw) {
  .sk-slide { font-size: 13px; }
}
.sk-slide.is-cover, .sk-slide.is-end { justify-content: center; }
.sk-slide-fill { position: absolute; inset: 0; }
.sk-slide-fill img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-slide-cover { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .5em; }
.sk-slide-cover.is-center { align-items: center; text-align: center; }
.sk-slide-cover.is-on-img { position: absolute; inset: auto 0 0 0; padding: 7% }
.sk-slide-bar { width: 2.2em; height: .22em; border-radius: 99px; display: block; margin-bottom: .3em; }
.sk-slide-title { margin: 0; font-size: 1.9em; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.sk-slide-sub { margin: 0; font-size: .82em; line-height: 1.5; }
.sk-slide-band { position: absolute; left: 0; top: 0; bottom: 0; width: .22em; }
.sk-slide-num { position: absolute; top: 8%; left: 7%; font-size: 2.1em; font-weight: 800; line-height: 1; }
.sk-slide.is-section { justify-content: flex-end; padding-bottom: 9%; }
.sk-slide-scrim {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 6% 7%; display: flex; flex-direction: column; gap: .35em;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .62) 55%);
}
.sk-slide.is-full .sk-slide-title { color: #fff; }
.sk-slide-body { display: flex; flex-direction: column; gap: .45em; position: relative; z-index: 2; min-width: 0; }
.sk-slide-h { margin: 0; font-size: 1.25em; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; }
.sk-slide-bullets { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: .28em; font-size: .84em; }
.sk-slide-bullets li { line-height: 1.45; }
.sk-slide-bullets.is-on-img { color: #eee; }
.sk-slide.is-split { flex-direction: row; align-items: stretch; gap: 0; padding: 0; }
.sk-slide-half { position: relative; flex: 1 1 50%; min-width: 0; overflow: hidden; }
.sk-slide-half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-slide.is-split .sk-slide-body { flex: 1 1 50%; padding: 7% 8%; justify-content: center; }

/* 预览的头一行（共 N 页 / N 页带图） */
.sk-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.sk-nav-count { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sk-nav-layout { font-size: 10.5px; color: var(--text-3); letter-spacing: .04em; }

/* 用户 2026-10：「**PPT 制作浏览也要完整呈现**」——
   每一页都摊在这里（竖着一列 16:9 缩略），点谁谁亮；不藏任何一页。 */
.sk-pages { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 4px; }
.sk-page {
  display: block; width: 100%; padding: 0; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: transparent;
  color: inherit; font: inherit; overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.sk-page:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.sk-page.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 26px rgba(0, 0, 0, .26);
}
.sk-page-no {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 10px; letter-spacing: .04em;
  color: var(--text-3); font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line); background: var(--bg-sunken);
}
.sk-page.is-on .sk-page-no { color: var(--text-2); }
.sk-page-layout { margin-left: auto; }

/* 一页缩略就是 16:9 的一块 —— 里面还是那套 .sk-slide，字按容器宽度等比缩 */
.sk-page-stage {
  container-type: inline-size;
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden;
}
/* 缩略小卡片上字号略微放大一点，行距撑得住（cqw 跟着这片容器宽度走） */
.sk-page-stage .sk-slide { font-size: 4.6cqw; padding: 5.5% 6%; }

/* 下半：下载 */
.sk-dlbox { display: flex; flex-direction: column; gap: 8px; }
.sk-file { display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.sk-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px 16px; border-radius: 14px;
  border: 1px dashed var(--line); background: transparent; text-align: center;
}
.sk-empty-glyph {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--glass-edge); background: var(--glass-bg); color: var(--text-3);
}
.sk-empty-glyph .icon { width: 18px; height: 18px; }
.sk-empty-text { margin: 0; font-size: 11.5px; line-height: 1.75; color: var(--text-3); max-width: 30ch; }
.sk-empty-preview { min-height: 150px; }
.sk-empty-dl { padding: 16px 14px; }

.sk-file-name {
  font-size: 13px; font-weight: 700; line-height: 1.5; word-break: break-all;
  color: var(--text);
}
.sk-file-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.sk-file-meta span { white-space: nowrap; }
.sk-dl { width: 100%; justify-content: center; margin-top: 2px; }

/* ── 交互网页制作：从上到下四段 ─────────────────────
   用户 2026-10：「**交互网页制作栏是从上往下做不是从左往右做**」——
   跟 PPT 那条并排的三栏方向相反：一段一件事，竖着叠下来，每段占满宽度。 */
.sw-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.sw-row {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 16px 16px 14px; border-radius: 18px;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-line), var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
/* 越往后越淡：一眼看出"是接着往下走的" */
.sw-row.sk-sw-c2 { background: color-mix(in srgb, var(--glass-bg) 88%, transparent); }
.sw-row.sk-sw-c3 { background: color-mix(in srgb, var(--glass-bg) 80%, transparent); }
.sw-row.sk-sw-c4 { background: color-mix(in srgb, var(--glass-bg) 72%, transparent); }
.sw-row .sk-col-foot { margin-top: 0; }

/* 段头上已经写着「① 上传图片」了，上传区自己那行小标题就不再重复一遍 */
.sk-sw-c1 .section-title { display: none; }

/* 第一段的上传区：整行那么宽，缩略图按 112px 一列自动铺（不再挤成 5 列） */
.sk-sw-c1 .wb-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px; margin-top: 10px;
}
.sk-sw-c1 .wb-thumb { width: auto; min-width: 0; }
.sk-sw-c1 .wb-thumb img { height: 74px; }
.sk-sw-c1 .wb-drop { min-height: 132px; }

/* 第二段的输入框：整行宽，写长想法也够 */
.sk-sw-c2 .sk-webidea { min-height: 120px; }
.sk-sw-c2 .sk-prompt-note { max-height: 120px; }

/* 第三段：预览给足高度（这一格是要真点的），窄屏也跟着缩 */
.sk-sw-c3 .sw-preview { min-height: min(68vh, 640px); }
.sk-sw-c3 .sw-frame { min-height: min(66vh, 620px); }

/* 第四段：下载横着排（整行宽，没必要竖着堆） */
.sk-sw-c4 .sw-dlbox { max-width: 720px; }

/* ── 交互网页制作：那一格的预览与下载 ──────────────
   预览用 iframe 装（srcdoc + sandbox），页面里的交互真能点；它自己滚，不跟着整页滚。 */
.sw-preview { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; min-height: 0; }
.sw-frame {
  flex: 1 1 auto; width: 100%; min-height: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff;                      /* 生成的网页多是浅色底，白底才不会在加载时闪黑 */
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.sw-dlbox { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* 默认提示词那一块：界面上只做"说明"，真正的提示词在代码里（用户点名"不显示"） */
.sk-prompt-note {
  margin: 0; padding: 8px 10px; border-radius: 10px;
  border: 1px dashed var(--line); background: var(--bg-sunken);
  font-size: 11px; line-height: 1.7; color: var(--text-3);
  max-height: 96px; overflow-y: auto; word-break: break-word;
}
.sk-webidea { min-height: 96px; }

/* ── 自动建模：图纸卡 / 方案表 / 结果卡 ────────────────
   用户 2026-10 第三项技能：「当用户上传的dwg文件，或者上传图的图片，通过gpt6，
   打开本地的草图大师建模软件，进行自动建模」——四段沿用上面的 `.sw-row`，
   这里只补四段里各自特有的小块（DWG 卡、方案表、草图大师里画成什么样）。 */

/* 栏1 里那张图纸卡（DWG/DXF 走这条，图片走上上传区） */
.mb-dwg {
  padding: 10px 12px; border-radius: 12px;
  border: 1px dashed var(--line); background: var(--bg-sunken);
}
.mb-dwg-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mb-dwg-icon {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.mb-dwg-text { min-width: 0; }
.mb-dwg-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-dwg-note { font-size: 11.5px; line-height: 1.6; color: var(--text-3); }

/* 栏4 顶上那两枚"本机状态"（草图大师找到没有 / SU 桥通不通） */
.mb-machine { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mb-chip {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 7px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-sunken);
  font-size: 12px; color: var(--text-2);
}
.mb-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-4); }
.mb-chip.is-ok { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.mb-chip.is-ok .mb-chip-dot { background: var(--green); }
.mb-chip.is-bad { border-color: color-mix(in srgb, var(--red) 38%, var(--line)); }
.mb-chip.is-bad .mb-chip-dot { background: var(--red); }
.mb-exe { font-size: 11.5px; }
.mb-exe-field { margin: 0; gap: 4px; }

/* 栏3：方案汇总 + 房间表 */
.mb-plan { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mb-sum {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-sunken);
}
.mb-sum-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.mb-sum-item { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.mb-sum-item.is-strong { color: var(--accent); font-weight: 600; }
.mb-table {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  max-height: 260px; overflow-y: auto;
}
.mb-tr {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 90px;
  gap: 8px; padding: 7px 12px; font-size: 12px; color: var(--text-2);
}
.mb-tr + .mb-tr { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.mb-tr.is-head {
  position: sticky; top: 0; z-index: 1;
  font-size: 11px; color: var(--text-3);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(8px);
}
.mb-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; min-height: 180px; }
.mb-json-acts { margin: 0; }

/* 栏4：按钮排 + "草图大师里现在是这样" */
.mb-build-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mb-result { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mb-result-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-badge {
  padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--line); color: var(--text-2);
}
.mb-badge.is-ok {
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.mb-badge.is-bad {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}
.mb-result-note { font-size: 12px; color: var(--text-3); }
.mb-shot {
  width: 100%; max-width: 760px; max-height: 520px;
  object-fit: contain;                 /* 截图比例怪的时候别把它拉变形 */
  border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-sunken);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26);
}
.mb-result-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--text-3); }
.mb-result-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--text-3); word-break: break-all;
}
.mb-result-log {
  margin: 0; padding: 8px 10px; border-radius: 10px; max-height: 140px; overflow: auto;
  background: var(--bg-sunken); border: 1px solid var(--line);
  font-size: 11px; line-height: 1.6; color: var(--text-3); white-space: pre-wrap;
}
.mb-wait { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.mb-wait-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent);
  animation: mb-pulse 1.1s ease-in-out infinite;
}
@keyframes mb-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

/* ── 批量视频分镜：四栏里各自的那些小块 ────────────────
   用户 2026-10 末：「我要的功能就是这些，分栏你从上往下分，且逻辑你要理清楚，
   还有页面设计你要自己做，**设计的跟我主页的哪个差不多样式**」——
   所以四段沿用 `.sw-row`（本来就是主页那套拟态玻璃：圆角 18 + 玻璃底 + 内高光 + 投影），
   这里只补"选择胶囊 / 宫格大图 / 裁好的分镜 / 每张分镜那一行 / 视频结果"这些小块。 */

/* 栏1 那三排选择（人物版本 / 比例 / 宫格）：一行一个标签 + 一串胶囊 */
.sk-sb-choices { display: flex; flex-direction: column; gap: 8px; }
.sk-sb-choice-row { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.sk-sb-choice-row > .sk-label { flex: none; width: 62px; }
.sk-sb-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sk-sb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 99px; cursor: pointer;
  font-size: 12px; line-height: 1.2; color: var(--text-2);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
  transition: border-color .16s, color .16s, background .16s, transform .16s;
}
.sk-sb-chip:hover { border-color: var(--accent); color: var(--text); }
.sk-sb-chip.is-on {
  color: var(--accent-text); border-color: transparent; background: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 34%, transparent);
}
.sk-sb-ask { color: var(--text-3); }
.sk-sb-idea { min-height: 112px; }
.sk-sb-shots { min-height: 132px; font-size: 12px; line-height: 1.8; }
.sk-sb-up .wb-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 10px; }
.sk-sb-up .wb-thumb { width: auto; min-width: 0; }
.sk-sb-up .wb-thumb img { height: 68px; }
.sk-sb-up .wb-drop { min-height: 124px; }

/* 栏2 / 栏4 那排参数：模型占宽，其它几个窄格子并排 */
.sk-sb-params { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.sk-sb-params > .sk-field { flex: 1 1 220px; min-width: 0; }
.sk-sb-params > .sk-sb-narrow { flex: 0 0 132px; }
/* 「自动（按中转站模型）」那一项比 132px 宽，别把它截成「自动（按中转站模…」 */
.sk-sb-params > .sk-sb-narrow.is-wide { flex: 0 0 196px; }
.sk-sb-gridask { color: var(--text-3); }

/* 那张宫格大图：按比例摆中，别铺满整行（4K 的图铺满会看不清格子） */
.sk-sb-grid { display: none; flex-direction: column; gap: 6px; align-items: center; }
.sk-sb-grid:not(:empty) { display: flex; }
.sk-sb-grid-img {
  width: auto; max-width: 100%; max-height: min(62vh, 620px);
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--bg-sunken); object-fit: contain; cursor: zoom-in;
}

/* 宫格裁剪：三颗钮一排，下面是裁出来的 N 张 */
.sk-sb-crop { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-sb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.sk-sb-tiles:empty { display: none; }
.sk-sb-tile {
  position: relative; display: block; padding: 0; cursor: zoom-in; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg-sunken);
  transition: border-color .16s, transform .16s;
}
.sk-sb-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.sk-sb-tile img { display: block; width: 100%; height: 96px; object-fit: cover; }
.sk-sb-tile-cap {
  position: absolute; left: 6px; bottom: 6px;
  padding: 1px 7px; border-radius: 99px;
  font-size: 10.5px; color: #fff; background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ── 双击看大图那扇窗（宫格整张 / 每一格 / 栏3 的分镜都用它）────────────────
   一屏铺满：顶上一行说"这是第几张、原图多大"，中间那张图，左右两颗翻页，
   底下"第 3 / 9 张"。单击图 1:1、滚轮缩放、Esc / 点空白 / ✕ 关掉。 */
.sk-sb-viewer {
  /* 480：压过那颗 toast（400）与顶栏，又低于弹窗 / lightbox（500 那一档） */
  position: fixed; inset: 0; z-index: 480; display: flex; flex-direction: column;
  gap: 10px; padding: 18px 18px 12px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  animation: sk-sb-vin .16s ease-out;
}
@keyframes sk-sb-vin { from { opacity: 0 } to { opacity: 1 } }
.sk-sb-vtop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sk-sb-vcap {
  font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-sb-vhint { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.sk-sb-vx {
  flex: none; width: 28px; height: 28px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; font-size: 13px; color: var(--text-2);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
  transition: border-color .16s, color .16s;
}
.sk-sb-vx:hover { border-color: var(--accent); color: var(--text); }
.sk-sb-vstage {
  flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center;
  border-radius: 16px; border: 1px solid var(--line); background: var(--bg-sunken);
  padding: 10px;
}
.sk-sb-vimg {
  display: block; max-width: 100%; max-height: 100%;
  border-radius: 8px; cursor: zoom-in;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  transform-origin: top center; transition: transform .14s ease-out;
}
.sk-sb-vimg.is-actual { cursor: zoom-out; }
.sk-sb-vnav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 40px; height: 64px; display: grid; place-items: center; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--text-2);
  border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .16s, color .16s, background .16s;
}
.sk-sb-vnav:hover { color: var(--text); border-color: var(--accent); }
.sk-sb-vnav.is-prev { left: 22px; }
.sk-sb-vnav.is-next { right: 22px; }
.sk-sb-vfoot { display: flex; justify-content: center; }
.sk-sb-vcount { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .sk-sb-vhint { display: none; }
  .sk-sb-vnav { width: 32px; height: 52px; font-size: 20px; }
  .sk-sb-vnav.is-prev { left: 8px; }
  .sk-sb-vnav.is-next { right: 8px; }
}

/* 栏3：一张分镜一行（左图 + 右提示词） */
.sk-sb-rows { display: flex; flex-direction: column; gap: 10px; }
.sk-sb-wait {
  padding: 10px 12px; border-radius: 12px;
  border: 1px dashed var(--line); background: var(--bg-sunken);
}
.sk-sb-row {
  display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  gap: 12px; align-items: start;
  padding: 10px; border-radius: 14px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--glass-bg) 60%, transparent);
}
.sk-sb-shot { min-width: 0; }
.sk-sb-pic { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sk-sb-pic img {
  display: block; width: 100%; max-height: 240px; object-fit: contain;
  border-radius: 10px; background: var(--bg-sunken); cursor: zoom-in;
}
.sk-sb-pic-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sk-sb-pic-cap { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 单张那两颗 2K / 4K（点了就走图像模型放大） */
.sk-sb-up {
  flex: none; padding: 3px 9px; border-radius: 8px; cursor: pointer;
  font-size: 11px; color: var(--text-2);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
  transition: border-color .16s, color .16s, background .16s;
}
.sk-sb-up:hover { border-color: var(--accent); color: var(--text); }
.sk-sb-up.is-on { color: var(--accent-text); border-color: transparent; background: var(--accent); }
.sk-sb-vbox { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sk-sb-vtext { min-height: 96px; font-size: 12px; line-height: 1.8; }
.sk-sb-videa { min-height: 84px; }
.sk-sb-vask { color: var(--text-3); }

/* 栏4：出好的视频一格一个 */
.sk-sb-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sk-sb-videos:empty { display: none; }
.sk-sb-video {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 8px; border-radius: 14px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--glass-bg) 60%, transparent);
}
.sk-sb-vclip { width: 100%; max-height: 300px; border-radius: 10px; background: #000; }
.sk-sb-vfail { padding: 10px; font-size: 11.5px; line-height: 1.7; color: var(--text-2); }
.sk-sb-vmeta { display: flex; align-items: center; gap: 6px; }
.sk-sb-vcap { font-size: 11px; color: var(--text-3); }
.sk-sb-vprompt {
  margin: 0; font-size: 11px; line-height: 1.7; color: var(--text-3);
  max-height: 72px; overflow-y: auto; word-break: break-word;
}

/* 窄屏：栏3 那一行改成竖着排（图在上、提示词在下） */
@media (max-width: 760px) {
  .sk-sb-row { grid-template-columns: minmax(0, 1fr); }
  .sk-sb-params > .sk-sb-narrow { flex: 1 1 120px; }
}

/* ── 窄屏：几栏竖着排（这一屏不横向滚）──────── */
@media (max-width: 1080px) {
  .sk-flow { grid-template-columns: 1fr; --sk-col-h: auto; }
  .sk-cards { grid-template-columns: 1fr; }
  /* 竖着排的时候不再"三栏等高"，也不再有栏内滚动区 —— 整页往下滚就行 */
  .sk-col { height: auto; max-height: none; }
  .sk-c1 > .sk-up,
  .sk-c3 > .sk-preview { overflow: visible; flex: 0 0 auto; }
  .sk-c2 > .sk-outline { flex: 0 0 auto; min-height: 220px; resize: vertical; }
  .sk-preview.is-more { mask-image: none; -webkit-mask-image: none; }
  .sk-c1 .wb-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sk-board { padding: 18px 16px; border-radius: 20px; }
  .sk-title { font-size: 24px; }
  .sk-head-flow { flex-direction: column; gap: 10px; }
  .sk-outline { min-height: 200px; }
}