/* AI 脚本与分镜 · 页面样式
 * 2026-10-03 新建
 * 约束：主色 #FF2442；动效只用 transform / opacity；尊重 prefers-reduced-motion；
 *       移动端（<=768px）三栏降级为单列；复用主站令牌（--ink/--sub/--line/--line2/--ease）
 */

.sb-wrap { display: flex; flex-direction: column; gap: 16px; }

/* ==================== Hero ==================== */
.sb-hero {
  position: relative; overflow: hidden; border-radius: 18px;
  background: linear-gradient(135deg, #E02039 0%, #FF5C74 55%, #FF8A9C 100%);
  padding: 22px 24px; color: #fff;
  box-shadow: 0 8px 26px rgba(255, 36, 66, .18);
}
.sb-hero::after {
  content: ''; position: absolute; right: -40px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255, 255, 255, .10);
}
.sb-hero h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: .3px; position: relative; }
.sb-hero p { margin: 0; font-size: 13px; line-height: 1.7; opacity: .92; position: relative; max-width: 720px; }
.sb-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; position: relative; }
.sb-hero-tags span {
  font-size: 12px; padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28);
}

/* ==================== 三栏骨架 ==================== */
.sb-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.sb-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.sb-card {
  background: #fff; border: 1px solid var(--line, #EDE3E6); border-radius: 14px;
  padding: 16px; box-shadow: 0 2px 10px rgba(31, 27, 29, .04);
}
.sb-card > h3 {
  margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #1A1A1A;
  display: flex; align-items: center; gap: 7px;
}
.sb-card > h3 small { font-weight: 400; font-size: 12px; color: #6E6869; margin-left: auto; }

.sb-label { display: block; font-size: 12.5px; font-weight: 600; color: #3A3F46; margin-bottom: 7px; }
.sb-input, .sb-select, .sb-textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--line2, #E8E8EC);
  border-radius: 11px; padding: 10px 12px; font-size: 13px; font-family: inherit;
  background: #fff; color: var(--ink, #1F1B1D); outline: none;
  transition: border-color .15s var(--ease, cubic-bezier(.4, 0, .2, 1)),
              box-shadow .15s var(--ease, cubic-bezier(.4, 0, .2, 1));
}
.sb-textarea { min-height: 92px; line-height: 1.7; resize: vertical; }
.sb-input::placeholder, .sb-textarea::placeholder { color: #6E6869; }
.sb-input:hover:not(:focus), .sb-textarea:hover:not(:focus), .sb-select:hover { border-color: #E3A8B8; }
.sb-input:focus, .sb-textarea:focus, .sb-select:focus {
  border-color: var(--xhs-red-text, #D81B37); box-shadow: 0 0 0 4px rgba(255, 36, 66, .10);
}
.sb-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238A9099' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.sb-row { display: flex; gap: 10px; }
.sb-row > * { flex: 1; min-width: 0; }
.sb-field { margin-bottom: 12px; }
.sb-field:last-child { margin-bottom: 0; }

/* 场景 chips */
.sb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sb-chip {
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2, #E8E8EC); background: #fff; color: #5A6068;
  transition: transform .16s var(--ease, cubic-bezier(.4, 0, .2, 1)),
              background .16s var(--ease, cubic-bezier(.16,1,.3,1)), color .16s var(--ease, cubic-bezier(.16,1,.3,1));
}
.sb-chip:hover { transform: translateY(-1px); border-color: #E3A8B8; }
.sb-chip.on { background: #FFF1F3; border-color: #FFC2CC; color: var(--xhs-red-text, #D81B37); font-weight: 600; }

/* 按钮 */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 11px;
  border: 1px solid var(--line2, #E8E8EC); background: #fff; color: #3A3F46; cursor: pointer;
  transition: transform .16s var(--ease, cubic-bezier(.4, 0, .2, 1)),
              box-shadow .16s var(--ease, cubic-bezier(.16,1,.3,1)), background .16s var(--ease, cubic-bezier(.16,1,.3,1));
}
.sb-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31, 27, 29, .08); }
.sb-btn:active:not(:disabled) { transform: scale(.97); }
.sb-btn:disabled { opacity: .55; cursor: not-allowed; }
.sb-btn.primary { background: #E02039; border-color: var(--xhs-red-text, #D81B37); color: #fff; }
.sb-btn.primary:hover:not(:disabled) { background: #F01B38; box-shadow: 0 6px 18px rgba(255, 36, 66, .28); }
.sb-btn.ghost { background: #FFF5F6; border-color: #FFD6DC; color: var(--xhs-red-text, #D81B37); }
.sb-btn.block { width: 100%; }
.sb-btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 9px; }

/* ==================== 脚本卡 ==================== */
.sb-hook {
  background: linear-gradient(135deg, #FFF5F6, #FFF9FA); border: 1px solid #FFDCE2;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.sb-hook b { display: block; font-size: 12px; color: var(--xhs-red-text, #D81B37); letter-spacing: .5px; margin-bottom: 5px; }
.sb-hook p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #1F1B1D; font-weight: 600; }

.sb-outline { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sb-ol-item { border-left: 3px solid #FFC2CC; padding: 2px 0 2px 10px; }
.sb-ol-item b { font-size: 12.5px; color: var(--xhs-red-text, #D81B37); }
.sb-ol-item p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.65; color: #5A6068; }
.sb-ol-item i { display: block; font-size: 12px; color: #6E6869; font-style: normal; margin-top: 3px; }

.sb-script-box {
  border: 1.5px solid var(--line2, #E8E8EC); border-radius: 12px; background: #fff;
  padding: 12px 14px; min-height: 190px; font-size: 13px; line-height: 1.85;
  color: var(--ink, #1F1B1D); white-space: pre-wrap; word-break: break-word; outline: none;
  transition: border-color .15s var(--ease, cubic-bezier(.16,1,.3,1)), box-shadow .15s var(--ease, cubic-bezier(.16,1,.3,1));
}
.sb-script-box:focus { border-color: var(--xhs-red-text, #D81B37); box-shadow: 0 0 0 4px rgba(255, 36, 66, .10); }
.sb-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: #6E6869; }
.sb-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #D0D4DA; }
.sb-taglist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sb-taglist span {
  font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #F5F6F8; color: #6B7078;
}
.sb-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }

/* ==================== 分镜 ==================== */
.sb-toolbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 12px; background: #FFF9FA; border: 1px solid #FFE3E8; border-radius: 12px;
}
.sb-toolbar .sb-spacer { flex: 1; }
.sb-progress { font-size: 12px; color: #6E6869; }
.sb-progress b { color: var(--xhs-red-text, #D81B37); }

.sb-shots { display: flex; flex-direction: column; gap: 12px; }
.sb-shot {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px;
  background: #fff; border: 1px solid var(--line, #EDE3E6); border-radius: 14px; padding: 12px;
  box-shadow: 0 2px 10px rgba(31, 27, 29, .04);
  transition: border-color .16s var(--ease, cubic-bezier(.16,1,.3,1)), box-shadow .16s var(--ease, cubic-bezier(.16,1,.3,1));
}
.sb-shot:hover { border-color: #FFD6DC; box-shadow: 0 6px 18px rgba(255, 36, 66, .08); }
.sb-shot.on { border-color: var(--xhs-red-text, #D81B37); box-shadow: 0 0 0 3px rgba(255, 36, 66, .09); }

.sb-shot-img {
  position: relative; width: 128px; height: 172px; border-radius: 11px; overflow: hidden;
  background: linear-gradient(160deg, #F7F3F4, #FDF7F8); border: 1px solid var(--line, #EDE3E6);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
}
.sb-shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-shot-img .ph { font-size: 12px; color: #6E6869; text-align: center; padding: 0 8px; line-height: 1.5; }
.sb-shot-img .spin {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #FFD6DC;
  border-top-color: var(--xhs-red-text, #D81B37); animation: sbspin .8s linear infinite;
}
@keyframes sbspin { to { transform: rotate(360deg); } }
.sb-shot-img .no {
  position: absolute; left: 6px; top: 6px; z-index: 2; font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(0, 0, 0, .45); border-radius: 999px; padding: 2px 8px;
}
.sb-shot-img .dur {
  position: absolute; right: 6px; bottom: 6px; z-index: 2; font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(0, 0, 0, .45); border-radius: 999px; padding: 2px 8px;
}
.sb-shot-img .fail { font-size: 12px; color: #C0392B; text-align: center; padding: 0 8px; }

.sb-shot-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-shot-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-shot-head .seq {
  font-size: 12px; font-weight: 700; color: #fff; background: #E02039;
  border-radius: 999px; padding: 2px 9px;
}
.sb-shot-head .ty { font-size: 12px; color: #5A6068; background: #F5F6F8; border-radius: 999px; padding: 2px 9px; }
.sb-shot-head .ops { margin-left: auto; display: flex; gap: 6px; }

.sb-shot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sb-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-f > label { font-size: 12px; color: #6E6869; }
.sb-f .sb-input, .sb-f .sb-select, .sb-f .sb-textarea { padding: 7px 10px; font-size: 12.5px; border-radius: 9px; }
.sb-f .sb-textarea { min-height: 56px; }
.sb-f.wide { grid-column: 1 / -1; }

/* ==================== 素材与导出 ==================== */
.sb-side-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #F0E6E9;
}
.sb-side-item:last-child { border-bottom: 0; }
.sb-side-item .t { font-size: 12.5px; color: #3A3F46; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-side-item .v { font-size: 12px; color: #6E6869; }

.sb-hist { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; }
.sb-hist-item {
  border: 1px solid var(--line, #EDE3E6); border-radius: 11px; padding: 9px 11px; cursor: pointer;
  transition: transform .16s var(--ease, cubic-bezier(.16,1,.3,1)), border-color .16s var(--ease, cubic-bezier(.16,1,.3,1)), background .16s var(--ease, cubic-bezier(.16,1,.3,1));
}
.sb-hist-item:hover { transform: translateY(-1px); border-color: #FFD6DC; background: #FFF9FA; }
.sb-hist-item b { display: block; font-size: 12.5px; color: #1A1A1A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-hist-item span { font-size: 12px; color: #6E6869; }

.sb-empty {
  text-align: center; padding: 34px 18px; border: 1.5px dashed #E3C9CE; border-radius: 14px;
  background: #FFF9FA; color: #6E6869; font-size: 13px; line-height: 1.7;
}
.sb-empty b { display: block; color: #1A1A1A; font-size: 14px; margin-bottom: 6px; }

.sb-note { font-size: 12px; line-height: 1.7; color: #6E6869; background: #FAFAFB; border-radius: 10px; padding: 10px 12px; }
.sb-note b { color: var(--xhs-red-text, #D81B37); }

/* 步骤指示 */
.sb-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-step {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6E6869;
  padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line, #EDE3E6);
}
.sb-step.on { color: var(--xhs-red-text, #D81B37); border-color: #FFD6DC; background: #FFF5F6; font-weight: 600; }
.sb-arrow { color: var(--graphic-strong, #6E6869); font-size: 12px; }

/* 加载条 */
.sb-loading { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6E6869; padding: 22px 0; justify-content: center; }
.sb-loading .spin {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #FFD6DC;
  border-top-color: var(--xhs-red-text, #D81B37); animation: sbspin .8s linear infinite;
}

/* ==================== 流水线轻量入口 ==================== */
.pl-sb-entry {
  margin-top: var(--s-14); border: 1px dashed #E3C9CE; border-radius: 12px;
  background: linear-gradient(180deg, #FFF9FA, #fff); padding: 12px 14px;
}
.pl-sb-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pl-sb-title { font-size: 13.5px; font-weight: 700; color: #1A1A1A; display: inline-flex; align-items: center; gap: 6px; }
.pl-sb-title i { width: 15px; height: 15px; color: var(--xhs-red-text, #D81B37); }
.pl-sb-head small { font-size: 12px; color: #6E6869; }
.pl-sb-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.pl-sb-result { margin-top: 12px; }
.pl-sb-loading { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #6E6869; }
.pl-sb-fail { font-size: 12.5px; color: #C0392B; background: #FFF3F3; border-radius: 9px; padding: 9px 11px; }
.pl-sb-ok {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: #1A1A1A; margin-bottom: 8px;
}
.pl-sb-ok b { color: var(--xhs-red-text, #D81B37); }
.pl-sb-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px; }
.pl-sb-shot {
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: #5A6068;
  background: #fff; border: 1px solid var(--line, #EDE3E6); border-radius: 9px; padding: 7px 9px;
}
.pl-sb-shot .n {
  flex: none; width: 19px; height: 19px; border-radius: 50%; background: #E02039; color: #fff;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.pl-sb-shot .t { flex: none; color: var(--xhs-red-text, #D81B37); font-weight: 600; }
.pl-sb-shot .d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 768px) {
  .pl-sb-shots { grid-template-columns: 1fr; }
}

/* ==================== 移动端降级 ==================== */
@media (max-width: 1180px) {
  .sb-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .sb-col.side { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .sb-grid { grid-template-columns: 1fr; }
  .sb-hero { padding: 18px 16px; border-radius: 14px; }
  .sb-hero h2 { font-size: 17px; }
  .sb-shot { grid-template-columns: 1fr; }
  .sb-shot-img { width: 100%; height: 200px; }
  .sb-shot-grid { grid-template-columns: 1fr; }
  .sb-toolbar { padding: 9px 10px; }
}

/* ==================== 降低动效 ==================== */
@media (prefers-reduced-motion: reduce) {
  .sb-chip, .sb-btn, .sb-hist-item, .sb-shot { transition: none !important; }
  .sb-chip:hover, .sb-btn:hover:not(:disabled), .sb-hist-item:hover { transform: none !important; }
  .sb-btn:active:not(:disabled) { transform: none !important; }
  .sb-shot-img .spin, .sb-loading .spin { animation-duration: 2s; }
}