/* ==========================================================================
   白栈 · 精修层 v246
   ─────────────────────────────────────────────────────────────────────────
   铁律（上一版打破过，这一版严格守）：
   1. 不改任何布局：不碰 grid / flex / width / height / position / padding 结构
   2. 不改侧栏宽窄、不改 .view / .work-grid 的分栏
   3. 只做四件事：颜色令牌、描边、圆角、字号/字重
   4. 8 个模式必须同时正常 —— 任何规则都不能依赖单一模式的 DOM

   配色：近黑主导（#1D1D1F）。蓝色只用于链接与聚焦环，不参与主视觉，
        避免和模特照片抢颜色。
   ========================================================================== */

/* ---------- 1. 颜色令牌：覆盖原变量，全站跟随 ---------- */
:root{
  /* 文字三级灰阶（Apple 体系） */
  --ink:#1D1D1F;
  --ink-2:#6E6E73;
  --ink-3:#86868B;

  /* 线条：细、浅、统一 */
  --line:#ededed;   /* v369 M6：原 #E6E6EB 与 style.css --line 冲突，统一到 #ededed */
  --line-2:#F0F0F3;

  /* 底色 */
  --bg:#FFFFFF;
  --bg-soft:#F5F5F7;
  --bg-hover:#F2F2F4;

  /* 强调色：近黑 */
  --accent:#1D1D1F;
  --accent-hover:#000000;
  --accent-soft:#F2F2F4;
  --on-accent:#FFFFFF;

  /* 圆角统一一档 */
  --radius:14px;

  /* 阴影：极轻，靠描边分层 */
  --shadow:0 1px 2px rgba(0,0,0,.035);
  --hover-shadow:0 3px 10px rgba(0,0,0,.055);
  --modal-shadow:0 18px 46px rgba(0,0,0,.15);

  /* 语义色收敛饱和 */
  --amber:#9A5B00;
  --amber-bg:#FFF8ED;
  --green:#1D7A47;
  --green-bg:#F0FAF4;
  --danger:#C8102E;
  --danger-bg:#FFF1F2;
  --ring:rgba(0,0,0,.05);
  --backdrop:rgba(29,29,31,.4);
  --toast-bg:rgba(29,29,31,.94);
  --toast-ink:#FFFFFF;
}

html[data-theme="dark"]{
  --ink:#F5F5F7;
  --ink-2:#A1A1A6;
  --ink-3:#86868B;
  --line:#2E2E32;
  --line-2:#252529;
  --bg:#1C1C1E;
  --bg-soft:#161618;
  --bg-hover:#2C2C2E;
  --accent:#F5F5F7;
  --accent-hover:#FFFFFF;
  --accent-soft:#2C2C2E;
  --on-accent:#1D1D1F;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --hover-shadow:0 3px 10px rgba(0,0,0,.6);
}

/* ---------- 2. 字体：SF 字阶 + 字距 ---------- */
body,
button,
input,
textarea,
select{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
              "Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.003em;
}

/* ---------- 3. 卡片描边：一处定义，全站一致 ---------- */
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:border-color .18s ease;
}
.card:hover{border-color:#DCDCE2}
.card-title{
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--ink);
}

/* ---------- 4. 按钮：主按钮改近黑 ---------- */
.btn{
  font-family:inherit;
  font-weight:500;
  letter-spacing:-.008em;
  border:1px solid var(--line);
  box-shadow:none;
  transition:background .14s ease, border-color .14s ease, color .14s ease,
             transform .18s cubic-bezier(.34,1.4,.64,1);
}
.btn:hover{border-color:#D5D5DA}
.btn:active{transform:scale(.975)}

/* 主按钮：黑，不是蓝 */
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
  box-shadow:none;
}
.btn.primary:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  box-shadow:none;
}
.btn.primary:disabled,
.btn.blocked{
  background:var(--bg-soft);
  border-color:var(--line);
  color:var(--ink-3);
}

/* 次级按钮 */
.btn.ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}

/* ---------- 5. 选项胶囊：选中改近黑 ----------
   ⚠ v252：.vopt 是「视频面板 #videoPanel」的私有类（清晰度/时长/比例/首尾帧那四行），
   一旦在这里给它加 border / font / transition，就会把它的行高与间距带歪、四行互相重叠。
   所以 .vopt 一律不碰，只改 .segmented 与 .opt（主站参数区）。
   ---------------------------------------------------------- */
.segmented > button,
.opt{
  font-family:inherit;
  font-weight:500;
  letter-spacing:-.005em;
  border:1px solid var(--line);
  box-shadow:none;
  transition:background .14s ease, border-color .14s ease, color .14s ease,
             transform .18s cubic-bezier(.34,1.4,.64,1);
}
.segmented > button:hover,
.opt:hover{border-color:#D5D5DA}
.segmented > button:active,
.opt:active{transform:scale(.975)}

/* 选中态：近黑底白字（原来用的是蓝色，和照片冲突） */
.segmented > button.on,
.segmented > button.sel,
.opt.on{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
  font-weight:600;
  box-shadow:none;
}

/* 顶部模式条同样处理（只在颜色上，不碰尺寸与排列） */
.gen-mode-bar .segmented button.on,
.gen-mode-bar .segmented button.active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
  font-weight:600;
  box-shadow:none;
}

/* ---------- 6. 输入框：细描边 + 蓝色聚焦环（蓝只出现在这里） ---------- */
input[type=text],
input[type=password],
input[type=tel],
input[type=number],
textarea,
select{
  font-family:inherit;
  border:1px solid var(--line);
  box-shadow:none;
  transition:border-color .14s ease, box-shadow .14s ease;
}
input:focus,
textarea:focus,
select:focus{
  outline:0;
  border-color:#B9B9C0;
  box-shadow:0 0 0 3px rgba(0,113,227,.22);
}

/* ---------- 7. 上传区虚线：浅、细、不抢戏 ---------- */
.drop-zone{
  border-color:#DCDCDF;
  transition:border-color .18s ease, background .18s ease;
}
.drop-zone:hover,
.drop-zone.drag{border-color:#B4B4BB}
.dz-icon{
  background:var(--bg-soft);
  color:var(--ink);
  box-shadow:none;
}

/* ---------- 8. 模板卡 ---------- */
.eg-item{
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.eg-item:hover{
  border-color:#D5D5DA;
  box-shadow:0 2px 8px rgba(0,0,0,.045);
}
.eg-item.on,
.eg-item.sel{
  border-color:var(--ink);
  box-shadow:0 0 0 1px var(--ink);
}
.eg-tag{
  background:var(--bg-soft);
  color:var(--ink-2);
  font-weight:500;
}

/* ---------- 9. 侧栏选中：近黑文字，不要蓝色块 ---------- */
.nav-item.active,
.nav-item.on{
  background:var(--accent-soft);
  color:var(--ink);
  font-weight:600;
  box-shadow:none;
}
.nav-item.active .ic,
.nav-item.on .ic{color:var(--ink)}

/* ---------- 10. 动效：轻微上浮，不弹跳 ---------- */
@keyframes dz-fade-in{
  from{opacity:0; transform:translateY(3px)}
  to{opacity:1; transform:translateY(0)}
}
.card{animation:dz-fade-in .22s ease both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}