/* ============================================================================
   数字人形象设计 · 样式（2026-10-21）
   ----------------------------------------------------------------------------
   主色：靛蓝 → 青（#4f46e5 → #06b6d4）。
   为什么不用图生万物那套紫：这里是"人像/专业形象"，靛蓝+青更冷静专业，
   也和数字人板块的紫蓝 hero 有区分（同色系不撞色）。
   🔴 所有规则带 #sub-avdesign 作用域（项目铁律）
   ========================================================================== */

#sub-avdesign { padding-bottom: 24px; }

/* ---------- Tab ---------- */
#sub-avdesign .avd-tabs {
  display: flex; gap: 6px; margin: 4px 0 14px; padding: 4px;
  background: #eef3ff; border-radius: 14px;
}
#sub-avdesign .avd-tab {
  flex: 1 1 0; height: 38px; border: 0; border-radius: 11px;
  background: transparent; color: #6b7280; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
#sub-avdesign .avd-tab.on {
  background: #fff; color: #4f46e5;
  box-shadow: 0 3px 10px rgba(79, 70, 229, .14);
}

/* ---------- 卡片 ---------- */
#sub-avdesign .avd-card {
  background: #fff; border: 1px solid #e8eeff; border-radius: 20px;
  padding: 16px; margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(79, 70, 229, .05);
}
#sub-avdesign .avd-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 800; color: #1e2340; margin-bottom: 12px;
}
#sub-avdesign .avd-label::before {
  content: ''; width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, #06b6d4, #4f46e5);
}
#sub-avdesign .avd-req {
  font-size: 10.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #fb7185, #f43f5e);
  padding: 1px 6px; border-radius: 6px;
}
#sub-avdesign .avd-hint {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: #a8b0c8;
}

/* ---------- 上传 ---------- */
#sub-avdesign .avd-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 148px;
  border: 1.5px dashed #c7d6ff; border-radius: 18px;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f7ff 100%);
  cursor: pointer; transition: border-color .16s ease, background .16s ease;
}
#sub-avdesign .avd-drop:active { border-color: #4f46e5; background: #eef4ff; }
#sub-avdesign .avd-plus {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 300; color: #fff; line-height: 1;
  background: linear-gradient(135deg, #06b6d4, #4f46e5);
  box-shadow: 0 6px 18px rgba(79, 70, 229, .3);
}
#sub-avdesign .avd-drop-t { font-size: 14px; font-weight: 700; color: #3b4468; margin-top: 4px; }
#sub-avdesign .avd-drop-s { font-size: 11.5px; color: #a8b0c8; text-align: center; line-height: 1.5; padding: 0 12px; }

#sub-avdesign .avd-thumbs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-top: 12px;
}
#sub-avdesign .avd-thumb {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: #eef3ff; border: 1px solid #e3ecff;
}
#sub-avdesign .avd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#sub-avdesign .avd-thumb-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: rgba(16, 20, 40, .62);
  color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- 描述 ---------- */
#sub-avdesign .avd-ta {
  width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical;
  border: 1.5px solid #e3ecff; border-radius: 14px; padding: 12px;
  font-family: inherit; font-size: 13.5px; line-height: 1.6; color: #1e2340;
  background: #fbfdff; outline: none; transition: border-color .16s ease, box-shadow .16s ease;
}
#sub-avdesign .avd-ta:focus {
  border-color: #4f46e5; background: #fff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
}
#sub-avdesign .avd-ta::placeholder { color: #b4bccb; }
#sub-avdesign .avd-chips {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px;
}
#sub-avdesign .avd-chip {
  height: 30px; padding: 0 12px; border: 1px solid #e3ecff; border-radius: 999px;
  background: #f7faff; color: #4a5578; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: all .15s ease;
}
#sub-avdesign .avd-chip:active { transform: scale(.96); }
#sub-avdesign .avd-chip.on {
  background: linear-gradient(135deg, #06b6d4, #4f46e5); color: #fff; border-color: transparent;
}

/* ---------- 尺寸 ---------- */
#sub-avdesign .avd-ratios {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#sub-avdesign .avd-ratios::-webkit-scrollbar { display: none; }
#sub-avdesign .avd-ratio {
  flex: 0 0 auto; min-width: 66px; height: 44px;
  border: 1.5px solid #e3ecff; border-radius: 13px; background: #fff;
  color: #4a5578; font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .15s ease;
}
#sub-avdesign .avd-ratio.on {
  border-color: #4f46e5; background: #eef4ff; color: #3730a3;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

/* ---------- 生成按钮 ---------- */
#sub-avdesign .avd-go {
  width: 100%; height: 52px; margin-top: 4px; border: 0; border-radius: 16px;
  background: linear-gradient(135deg, #06b6d4 0%, #4f46e5 100%);
  color: #fff; font-size: 16px; font-weight: 800; font-family: inherit;
  letter-spacing: .5px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(79, 70, 229, .3);
  transition: transform .12s ease, box-shadow .12s ease;
}
#sub-avdesign .avd-go:active { transform: scale(.985); box-shadow: 0 4px 14px rgba(79, 70, 229, .28); }
#sub-avdesign .avd-go:disabled {
  background: linear-gradient(135deg, #b9d4f5, #b7bcf0);
  box-shadow: none; cursor: default;
}
#sub-avdesign .avd-tip {
  margin-top: 10px; font-size: 11.5px; line-height: 1.7;
  color: #a8b0c8; text-align: center;
}

/* ---------- 进度（与 t2w 同构，配色换青蓝） ---------- */
#sub-avdesign .avd-progress {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 12px;
}
#sub-avdesign .avd-spin {
  width: 40px; height: 40px; border: 3px solid #e6eeff; border-top-color: #4f46e5;
  border-radius: 50%; animation: avdSpin .9s linear infinite;
}
@keyframes avdSpin { to { transform: rotate(360deg); } }
#sub-avdesign .avd-prog-t { font-size: 13.5px; font-weight: 700; color: #3b4468; }
#sub-avdesign .avd-prog-s { font-size: 11.5px; color: #a8b0c8; }
#sub-avdesign .avd-bar {
  width: 100%; max-width: 260px; height: 6px; margin-top: 4px;
  border-radius: 3px; background: #e6eeff; overflow: hidden;
}
#sub-avdesign .avd-bar i {
  display: block; height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, #06b6d4, #4f46e5, #7dd3fc, #06b6d4);
  background-size: 220% 100%; animation: avdFlow 1.5s linear infinite;
  transition: width .6s ease;
}
@keyframes avdFlow { from { background-position: 0 0; } to { background-position: -220% 0; } }
#sub-avdesign .avd-meta {
  width: 100%; max-width: 260px; display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: #8b93ad; font-variant-numeric: tabular-nums;
}
#sub-avdesign .avd-meta #avdPct { color: #4f46e5; }

/* ---------- 结果 ---------- */
#sub-avdesign .avd-result {
  background: #fff; border: 1px solid #e8eeff; border-radius: 20px;
  padding: 14px; margin-top: 14px; box-shadow: 0 2px 10px rgba(79, 70, 229, .05);
}
#sub-avdesign .avd-res-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #f4f8ff; }
#sub-avdesign .avd-res-wrap img { width: 100%; display: block; }
#sub-avdesign .avd-res-acts {
  display: flex; gap: 8px; margin-top: 12px;
}
#sub-avdesign .avd-res-btn {
  flex: 1 1 0; height: 42px; border: 1px solid #e3ecff; border-radius: 12px;
  background: #fff; color: #3b4468; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
#sub-avdesign .avd-res-btn.primary {
  border-color: transparent; background: linear-gradient(135deg, #06b6d4, #4f46e5); color: #fff;
}

/* ---------- 历史 ---------- */
#sub-avdesign .avd-his {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
#sub-avdesign .avd-his-item {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #eef3ff; aspect-ratio: 3 / 4;
}
#sub-avdesign .avd-his-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
#sub-avdesign .avd-his-meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62));
  color: #fff; font-size: 10px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sub-avdesign .avd-empty {
  padding: 44px 12px; text-align: center; color: #a8b0c8; font-size: 13px; line-height: 1.8;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 359px) {
  #sub-avdesign .avd-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sub-avdesign .avd-ratio { min-width: 60px; }
}

/* ============================================================================
   入口大卡配色（分布在数字人板块，排在「图片数字人」之前）
   靛蓝→青，与子页主色一致
   ========================================================================== */
.boss-entry.boss-entry-avd {
  background: linear-gradient(135deg, #f6fbff 0%, #eaf1ff 100%);
  border-color: #dbe7ff;
}
@media (hover: hover) {
  .boss-entry.boss-entry-avd:hover { box-shadow: 0 10px 26px rgba(79, 70, 229, 0.16); }
}
.boss-entry.boss-entry-avd .boss-entry-glow {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.20) 0%, rgba(6, 182, 212, 0) 70%);
}
.boss-entry.boss-entry-avd .boss-entry-ico {
  background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
  border: 1px solid #dbe7ff;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.14);
  /* 2026-10-28 修「图标歪了」：卡片是 flex 且 align-items 默认 stretch，
     副标题在窄屏折两行后卡片变高 => 图标框被纵向拉长（变竖长方形）。
     钉死尺寸 + 居中，任何宽度都不被拉伸。 */
  align-self: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  box-sizing: border-box;
}
.boss-entry.boss-entry-avd .boss-entry-ico img { width: 40px; height: 40px; display: block; }
.boss-entry.boss-entry-avd .boss-entry-tag { color: #0e7490; background: #e0f7fb; }
.boss-entry.boss-entry-avd .boss-entry-flow { color: #0e7490; }

/* ============================================================================
   2026-10-28 修「图标歪了」的真正原因（第二次修，第一次只修了尺寸没修水平位置）：
   「新」角标写的是裸 .boss-entry-hot，本卡没有定位规则 ⇒ position 默认 static ⇒
   在 flex 里**占位**（15px 宽 + 11px gap = 26px），把后面的图标整体右推 26px
   ⇒ 三张卡的图标不在一条竖线上（实测 105 / 79 / 79）。
   数值照抄 .boss-entry-fa 的计算样式，保证与其他卡视觉一致。
   ========================================================================== */
.boss-entry.boss-entry-avd .boss-entry-hot {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
  z-index: 2;
}