/* 2026-10-18「石墨玻璃」主题；2026-10-27 按用户要求全站改为照飞象深色（页面 #000、面板 #18181B、边框 #2F2F33、
   卡片线 #1D1D20、强调色 #7B76FF 纯色，不用渐变、发光和玻璃模糊）。最后加载，覆盖各页面旧样式；变量在 tokens.css。 */

/* ---------- 页面与外框 ---------- */
body { background: var(--color-page); color: var(--color-text); color-scheme: dark; }
main { background: var(--color-page); }
.app-header {
  background: var(--color-page);
  border-bottom: 1px solid var(--color-surface-muted);
}
main { padding: 16px; }
.workspace, .creative-workspace { gap: 16px; }
#workbenchHistory { display: none !important; }

/* ---------- 侧栏 ---------- */
.wb-brand-mark { padding: 0; border: 0; background: transparent; border-radius: 0; color: inherit; font: inherit; }
.wb-brand-mark img { display: block; width: 40px; height: 40px; object-fit: contain; }
#primaryNavigation .nav:not([data-workspace]).active { background: rgb(var(--ink) / 10%); color: var(--color-text); }
#primaryNavigation .nav:not([data-workspace]).active::before { background: var(--color-text); }
.top-navigation .nav.active { background: rgb(var(--ink) / 14%); color: var(--color-text); }

/* ---------- 玻璃面板 ---------- */
.settings, .cm-settings, .suite-example-board, .cm-example, .analysis-settings, .gif-settings, .vs-form,
.vs-preview, .gif-canvas, .ar-report, .cm-save-view {
  background: var(--color-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.settings-footer, .cm-foot { background: transparent; border-top-color: rgb(var(--ink) / 7%); }
.settings-scroll, .cm-scroll, .canvas, .cm-canvas { scrollbar-color: rgb(var(--ink) / 15%) transparent; }
.suite-intro, .cm-example h2 { border-bottom-color: rgb(var(--ink) / 7%); }
.ar-card { background: var(--color-surface); border-color: rgb(var(--ink) / 6%); }

/* 标题前的小竖条改为黑色 */
.product-heading::before, .cm-headrow::before,
.vs-form-scroll > h1:first-child::before, .analysis-scroll > h2:first-child::before,
.gif-scroll > fieldset:first-child > h2:first-child::before { background: var(--color-text); }

/* ---------- 按钮 ---------- */
.primary, button.primary, a.primary {
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.primary:disabled { background: var(--color-border); color: rgb(255 255 255 / 35%); box-shadow: none; opacity: 1; }
.secondary, button.secondary, a.secondary {
  background: var(--color-border);
  color: var(--color-text);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.secondary:hover:not(:disabled) { background: var(--color-border-strong); border: 0; }
/* 2026-11-02 文字按钮不再用下划线（用户：特别丑）：一律小胶囊。「换一批」「重试」这类重新生成的用紫色胶囊加半圆箭头，和「AI 帮写」一套。 */
.textbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-muted); color: var(--color-text); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.textbtn:hover:not(:disabled) { background: var(--color-hover); }
.textbtn:disabled { opacity: .5; cursor: default; }
.textbtn.regen-btn { border-color: rgb(123 118 255 / 55%); background: rgb(123 118 255 / 16%); color: #fff; font-weight: 600; }
.textbtn.regen-btn:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.regen-icon { width: 14px; height: 14px; flex-shrink: 0; background: #C9C6FF; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4.5v4.5H15'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4.5v4.5H15'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .5s ease; }
.regen-btn:hover:not(:disabled) .regen-icon { background: #fff; transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) { .regen-icon { transition: none; } }

/* 底部主次按钮并排：主操作占大头，次操作同高 */
.footer-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.footer-actions:has(> :only-child), .footer-actions:has(> .hidden) { grid-template-columns: 1fr; }
.footer-actions > button { min-height: 46px; margin: 0; width: 100%; }
.footer-actions > .secondary { padding: 0 18px; white-space: nowrap; }
.footer-actions > .hidden { display: none; }
.counttotal b, .cm-count b { color: var(--color-text); }

/* ---------- 输入控件：照飞象 #1D1D20 底、#2F2F33 细边，聚焦强调色描边 ---------- */
input[type=text], input[type=search], input[type=url], input:not([type]), textarea, select, .select-control,
.analysis-settings input, .analysis-settings textarea, .vs-field input:not([type=file]), .vs-field textarea,
.vt-gallery-heading input, .vt-field input, .vt-field textarea {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text);
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: rgb(var(--ink) / 50%); }
input[type=text]:focus, input[type=search]:focus, input:not([type]):focus, textarea:focus, select:focus,
.select-control[aria-expanded=true], .select-control:focus-visible,
.analysis-settings :is(input, textarea):focus, .vs-field :is(input, textarea):focus, .vt-field :is(input, textarea):focus {
  background: var(--color-surface-muted);
  border-color: var(--color-primary);
  box-shadow: none;
  outline: none;
}
.select-control:hover { background: var(--color-surface-muted); border-color: var(--color-border-strong); }
/* 2026-10-27：被浮层接管的原生下拉一律不显示（有的页面给 select 写了 display，会盖过 hidden） */
select[data-select-mounted][hidden] { display: none !important; }
.select-popup { border: 1px solid rgb(var(--ink) / 8%); border-radius: 14px; background: var(--color-surface);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); box-shadow: var(--shadow-floating); }
.select-option[aria-selected=true] { color: var(--color-text); background: var(--color-primary-soft); }
.counter { background: var(--color-surface); border-color: var(--color-border); }

/* ---------- 上传区：紧凑一行，整块可点 ---------- */
.upload-zone, .cm-upload, .vs-upload, .vt-upload, .gif-upload {
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border-strong);
  border-radius: 14px;
  transition: border-color .15s, background .15s;
}
.upload-zone:hover, .cm-upload:hover, .vs-upload:hover, .vt-upload:hover, .gif-upload:hover,
.upload-zone.is-dragging { background: var(--color-surface-muted); border-color: var(--color-primary); }
.upload-zone { cursor: pointer; padding: 14px 16px; }
#drop .upload-actions, .upload-zone:not(:has(.photo)) .upload-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 14px; min-height: 0; text-align: left; }
.upload-zone .upload-button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0; border: 0; background: none;
  box-shadow: none; color: var(--color-text); font-size: 16px; font-weight: 600; white-space: nowrap;
}
.upload-zone .upload-button::before {
  content: '+'; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--color-primary); color: #fff; font-size: 22px; font-weight: 400; line-height: 1;
}
.upload-zone .upload-button:disabled { opacity: .5; }
.upload-zone .drop-hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.upload-zone .photos:not(:empty) { margin-bottom: 12px; }
.upload-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.upload-button, .cm-upload > .primary, .vs-upload > button.primary { border-color: var(--color-border-strong); }

/* ---------- 折叠标题：右侧箭头，替换默认三角 ---------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.suite-options > summary, .vt-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.suite-options > summary::after, .vt-more > summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s; opacity: .7;
}
.suite-options[open] > summary::after, .vt-more[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

/* ---------- 选中态：照飞象强调色描边 + 深灰底 ---------- */
.cm-module:has(input:checked), .vs-options button[aria-pressed=true],
.vt-filters button[aria-pressed=true], .layout-tab.active, .vt-modes button[aria-pressed=true], .scriptcard.active,
.cm-chip[aria-pressed=true] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.cm-module input, input[type=checkbox], input[type=radio] { accent-color: var(--color-primary); }
.cm-model[aria-pressed=true] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.cm-tabs button.active { background: var(--color-hover); color: var(--color-text); font-weight: 500; box-shadow: none; }
.vs-options button:hover, .vt-preview:hover, .vt-use:hover { border-color: var(--color-border-strong); background: var(--color-hover); color: var(--color-text); }
.vt-filters button, .layout-tab, .selected-layout-row { background: var(--color-surface-muted); }
.layout-gallery { background: var(--color-surface); }
.switch-control input:checked + span { background: var(--color-primary); }

/* ---------- 提示卡：中性深灰，不用橙色 ---------- */
.understand-spinner { border-color: var(--color-border); border-top-color: var(--color-text); }
.cm-plan-notice, .ar-summary { background: rgb(var(--ink) / 4%); border: 1px solid rgb(var(--ink) / 8%); }
.gif-progress { background: var(--color-primary-soft); }

/* ---------- 示例图：去掉图片两侧的浅灰衬底，图片本身圆角 ---------- */
.suite-example-board .suite-example-image, .suite-example-board .suite-example-main .suite-example-image,
.cm-example-image, .cm-detail-demo .cm-example-image, .cm-detail-demo figure:first-child .cm-example-image {
  background: transparent !important;
  display: flex; align-items: center; justify-content: center; overflow: visible;
}
.suite-example-card, .cm-example figure { background: transparent; }
.suite-example-card img, .cm-example img {
  width: auto !important; height: auto !important; max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 12px; box-shadow: none;
}
.suite-example-board .suite-example-main img { position: static; }

/* ---------- 弹窗 ---------- */
.cm-plan-dialog, .suite-plan-dialog, .cm-dialog, .production-wait, .image-results-dialog, .layout-dialog {
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-floating);
}
.cm-plan-dialog-body, .suite-plan-body { background: var(--color-page); }
.image-results-dialog, .ar-reader { background: var(--color-surface); }
.creation-progress { width: min(520px, calc(100vw - 32px)); margin: auto; max-height: calc(100dvh - 32px); padding: 28px; }
.creation-progress .production-steps { margin-bottom: 24px; }
.creation-progress .production-steps .is-complete { border-color: rgb(var(--ink) / 60%); color: var(--color-text); }
.creation-progress .production-wait-actions[hidden] { display: none; }
.creation-activity { height: 5px; overflow: hidden; border-radius: 99px; background: var(--color-surface-muted); }
.creation-activity span { display: block; width: 32%; height: 100%; border-radius: inherit; background: var(--color-primary); animation: creation-activity 1.8s ease-in-out infinite; }
.creation-progress [role="status"] { margin: 20px 0 8px; font-weight: 500; }
.creation-progress .production-elapsed { margin: 8px 0; }
.creation-progress .production-note { margin-bottom: 0; }
@keyframes creation-activity { from { transform: translateX(-110%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .creation-activity span { animation: none; width: 100%; opacity: .45; } }
.image-result-picture, .vt-poster, .vt-reference-pane video, .vs-stage video, .vs-neighbor, .gif-player,
.zoom-image-wrap, .vt-player-pane, .vt-player-pane .vt-video { background: var(--color-surface-muted); }

/* ---------- 窄屏 ---------- */
@media (max-width: 800px) {
  main { padding: 12px; }
  .footer-actions { grid-template-columns: 1fr; }
}

/* ---------- 其他页面的上传区：同样紧凑一行 ---------- */
.cm-upload, .vs-upload, .vt-upload, .gif-upload:not(:has(img)) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 14px;
  padding: 14px 16px; min-height: 0; text-align: left; cursor: pointer;
}
.cm-thumbs:empty, .vs-assets:empty, .vt-assets:empty { display: none; }
.cm-thumbs, .vs-assets, .vt-assets { flex-basis: 100%; }
.cm-upload > button[data-upload], .vs-upload > button[data-vs-upload], .vt-upload > button[data-upload], .gif-upload > .upload-button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; width: auto; padding: 0; margin: 0;
  border: 0; background: none; box-shadow: none; color: var(--color-text); font-size: 16px; font-weight: 600; white-space: nowrap;
}
.cm-upload > button[data-upload]::before, .vs-upload > button[data-vs-upload]::before, .vt-upload > button[data-upload]::before, .gif-upload > .upload-button::before {
  content: '+'; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--color-primary); color: #fff; font-size: 22px; font-weight: 400; line-height: 1;
}
.cm-upload > button[data-upload]:hover, .vs-upload > button[data-vs-upload]:hover, .vt-upload > button[data-upload]:hover { background: none; text-decoration: none; }
.cm-upload > button:disabled, .vs-upload > button:disabled, .vt-upload > button:disabled { opacity: .5; }
.cm-upload > p, .vs-upload-hint, .vt-upload-hint, .gif-upload > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); text-align: left; }

/* ---------- 示例区细节（2026-10-18 主动检查） ---------- */
/* 套图示例：1100px 左右高度时图片按高度缩放，原预留量少 1.5px，右栏出现滚动条 */
@media (min-width: 901px) {
  .suite-example-board .suite-example-image, .suite-example-board .suite-example-main .suite-example-image {
    max-height: calc((100dvh - 348px) / 2);
  }
}
/* A+示例 5 张图：最后一行不满时居中，不在右下角空一格 */
@media (min-width: 761px) {
  @container examples (min-width: 561px) {
    .cm-detail-demo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .cm-detail-demo > figure:nth-child(n) { grid-column: span 2; }
    .cm-detail-demo > figure:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
    .cm-detail-demo > figure:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
  }
}
@container examples (max-width: 560px) {
  .cm-detail-demo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cm-detail-demo > figure:nth-child(n) { grid-column: span 2; }
  .cm-detail-demo > figure:nth-child(odd):last-child { grid-column: 2 / span 2; }
}
@media (max-width: 760px) {
  .cm-detail-demo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cm-detail-demo > figure:nth-child(n) { grid-column: span 2; }
  .cm-detail-demo > figure:nth-child(odd):last-child { grid-column: 2 / span 2; }
}

/* ---------- 口播带货示例：与其他示例区同样的满高玻璃面板 ---------- */
.canvas:has(.spoken-examples) { background: transparent; }
.spoken-examples {
  background: var(--color-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid var(--color-glass-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel);
}
.spoken-examples-heading { padding-bottom: 17px; border-bottom: 1px solid rgb(var(--ink) / 7%); }
.spoken-examples h2 { font-size: 17px; font-weight: 650; line-height: 1.5; }
@media (min-width: 901px) {
  #configure:has(> #visual > .spoken-examples) { display: flex; flex-direction: column; min-height: 100%; }
  #visual:has(> .spoken-examples) { display: flex; flex-direction: column; flex: 1; }
  #visual > .spoken-examples { flex: 1; display: flex; flex-direction: column; padding: 26px; }
  .spoken-examples > .spoken-player-wrap { margin-top: auto; }
  .spoken-examples > .spoken-thumbnails { margin-bottom: auto; }
  .spoken-player { height: clamp(360px, calc(100dvh - 420px), 680px); }
}

/* ---------- 我的作品 ---------- */
.workspace.library > .canvas {
  padding: 24px 26px;
  background: var(--color-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid var(--color-glass-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel);
}
/* 竖图不再把封面撑高，所有卡片封面统一为正方形 */
.image-work-cover { overflow: hidden; }
.image-work-cover img { object-position: center 25%; }
.image-work-card { background: var(--color-surface); border-color: rgb(var(--ink) / 8%); }
/* 状态标签：中性灰，不用橙绿；失败仍用红色提示 */
.image-status { min-height: 24px; padding: 3px 8px; line-height: 1.45; border-radius: 6px; font-size: 13px; }
.image-status.is-ok { background: rgb(255 255 255 / 6%); color: #fff; }
.image-status.is-warn { background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
/* 图片作品与保存的方案分区 */
#library { display: flex; flex-direction: column; }
#library > .image-generated-library { order: 1; }
#library > #workList { order: 2; margin-top: 28px; }

/* ---------- 视频同款弹窗 ---------- */
.vt-upload-heading .required-mark { color: var(--color-required); }
.vt-close { border-color: transparent; }
.vt-close:hover { background: rgb(var(--ink) / 6%); }

/* ---------- 剩余输入框统一深灰底 ---------- */
.gif-workspace .field input:not([type]), .gif-workspace .field textarea, .gif-workspace textarea,
.vt-field input, .vt-field textarea, .vt-gallery-heading input, .select-control { background: var(--color-surface-muted); }

/* ---------- 竞品分析表单：字段标签与其他页面同为 14px ---------- */
.analysis-settings label { font-size: 14px; }

/* ---------- 窄屏：A+ 等页面底部操作栏吸底时需要实底，避免压住表单文字 ---------- */
@media (max-width: 800px) {
  .cm-foot { background: var(--color-surface); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
@media (min-width: 601px) { .image-work-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

/* ---------- 下拉框：选中值单行显示，过长省略 ---------- */
.select-control .select-value { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }

/* 2026-10-19: single plan action and unobtrusive background work. */
.settings-footer .footer-actions > button, .cm-foot .footer-actions > button { min-height:46px; height:46px; margin:0; padding:0 18px; align-self:center; }
.footer-actions { grid-template-columns:1fr; }
.suite-plan-foot, .cm-plan-dialog-foot { justify-content:flex-end; }
.upload-zone .upload-button:hover:not(:disabled), .upload-zone .upload-button:focus-visible { background:transparent; color:var(--color-text); box-shadow:none; }
.upload-zone .upload-button::before { flex:0 0 40px; }
.upload-zone .upload-button:hover:not(:disabled)::before { background:var(--color-primary-hover); }
.cm-selling-editor { border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface-muted); overflow:hidden; }
.cm-selling-editor:focus-within { border-color:var(--color-primary); box-shadow:none; }
.cm-selling-editor textarea { border:0; box-shadow:none; border-radius:0; margin:0; min-height:110px; }
.cm-selling-editor textarea:focus { box-shadow:none; }
.creation-progress-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:22px; }
.creation-progress-actions .production-wait-actions { margin:0; }
.image-results-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; flex-shrink:0; }
@media(max-width:600px) { .image-results-header { flex-wrap:wrap; } .image-results-actions { width:100%; } }
.creation-task-tray { position:fixed; bottom:76px; left:12px; width:calc(var(--wb-rail,216px) - 24px); display:grid; gap:8px; z-index:80; }
.creation-task { display:grid; gap:5px; width:100%; padding:12px; text-align:left; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface); color:var(--color-text); box-shadow:0 4px 16px rgb(0 0 0 / 40%); }
.creation-task strong { font-size:14px; font-weight:600; }
.creation-task span { font-size:14px; line-height:1.4; color:rgb(var(--ink) / 60%); }
.creation-task:hover { background:var(--color-surface-muted); }
.creation-task-item { position:relative; }
.creation-task-item:has(.creation-task-close) .creation-task { padding-right:36px; }
.creation-task-close { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:24px; height:24px; padding:0; border:0; border-radius:6px; background:transparent; color:rgb(var(--ink) / 60%); font-size:16px; line-height:1; }
.creation-task-close:hover { background:var(--color-border); color:var(--color-text); }
@media(max-width:760px) { .creation-task-tray { width:220px; max-width:calc(100vw - 24px); bottom:16px; } }

/* Uploaded files stay untouched; only thumbnails fill a rounded preview frame. */
.upload-zone .photo { overflow:hidden; border-radius:12px; background:var(--color-surface); }
.upload-zone .photo img { object-fit:cover; border:0; border-radius:12px; }
/* 2026-10-27：删除按钮原来用文字色（深色主题下是白色）做底，白底白字看不见 × */
.upload-zone .photo button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / 60%); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.upload-zone .photo button:hover { background: rgb(0 0 0 / 80%); }
.cm-thumb { border:0; border-radius:12px; background:transparent; }
.cm-thumb img { height:auto; aspect-ratio:1; object-fit:cover; border-radius:12px; }


/* 2026-10-20: actual product understanding and job events inside progress. */
.creation-progress { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
.creation-feed { padding:14px 16px; margin:18px 0; border:1px solid var(--color-border); border-radius:12px; background:var(--color-surface-muted); }
.creation-feed[hidden] { display:none; }
.creation-feed h3, .creation-feed summary { margin:0 0 9px; font-size:14px; line-height:1.5; font-weight:600; color:var(--color-text); }
.creation-feed-list { list-style:none; margin:0; padding:0; max-height:200px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.creation-feed-item { display:grid; grid-template-columns:8px minmax(0,1fr); gap:10px; padding:7px 4px 7px 0; color:var(--color-text-secondary); font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.creation-feed-item::before { content:''; width:5px; height:5px; margin-top:9px; background:var(--color-border-strong); border-radius:50%; }
.creation-feed-item strong { color:var(--color-text); font-weight:500; }
.creation-feed-item.is-new { animation:creation-feed-enter .25s ease-out both; }
.creation-history summary { margin:0; cursor:pointer; }
.creation-history[open] summary { margin-bottom:9px; }
.image-results-body > .creation-feed { margin:0 0 20px; }
@keyframes creation-feed-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:600px) { .creation-progress { padding:20px; } .creation-feed { padding:12px; } .creation-feed-list { max-height:min(190px,29dvh); } }
@media(prefers-reduced-motion:reduce) { .creation-feed-item.is-new { animation:none; } }

/* 2026-10-26：链接按钮（下载）也用统一焦点框，不显示浏览器默认的橙色。 */
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* 2026-10-28 平台下拉：平台名前加该平台的小图标（照飞象） */
.select-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.select-icon { width: 20px; height: 20px; flex-shrink: 0; border-radius: 5px; object-fit: contain; }
span.select-icon { display: inline-block; }
/* 在半宽的框里也放得下「抖音电商」 */
.select-value .select-icon { display: inline-block; width: 16px; height: 16px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }
.select-control:has(.select-icon) { gap: 6px; }

/* 2026-10-28 「AI 帮写」：用户要求更灵动——紫色胶囊、星芒闪烁、定时扫过一道微光；生成中星芒旋转。
   强调色仍是飞象 #7B76FF 纯色，不发光；系统设了减少动态时全部静止。 */
.field-heading .ai-write, .ai-write {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(123 118 255 / 55%); background: rgb(123 118 255 / 16%);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.ai-write::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 28%) 50%, transparent 65%);
  transform: translateX(-130%); animation: ai-sheen 3.6s ease-in-out 1s infinite;
}
.ai-write:hover:not(:disabled) { background: var(--color-primary, #7B76FF); border-color: var(--color-primary, #7B76FF); transform: translateY(-1px); }
.ai-write:hover:not(:disabled) .ai-spark { animation: ai-spin .9s ease-in-out; }
.ai-write:active:not(:disabled) { transform: translateY(0) scale(.97); }
.ai-write:focus-visible { outline: 2px solid var(--color-focus, #7B76FF); outline-offset: 2px; }
.ai-write:disabled { cursor: default; }
.ai-spark {
  width: 12px; height: 12px; flex-shrink: 0; background: #C9C6FF;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: ai-twinkle 2.4s ease-in-out infinite;
}
.ai-write[data-busy] .ai-spark { animation: ai-spin 1s linear infinite; }
.ai-write[data-busy]::after { animation-duration: 1.4s; animation-delay: 0s; }
@keyframes ai-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.6) rotate(45deg); opacity: .7; } }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-sheen { 0% { transform: translateX(-130%); } 45%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .ai-write::after, .ai-spark { animation: none !important; } }
.field-heading:has(.ai-write) { align-items: center; margin-bottom: 8px; }
.field-heading:has(.ai-write) label { margin-bottom: 0; }

/* 2026-10-28 A+ 示例换成自己的横版模块图（3:2），不再借用套图方图 */
.cm-detail-demo .cm-example-image, .cm-detail-demo figure:first-child .cm-example-image { aspect-ratio: 3 / 2 !important; }

/* 2026-10-28：风格区默认两行，第三行露一截并渐淡；标题右侧的按钮展开全部。保存的参考图带删除按钮。 */
.style-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:8px; }
.style-heading .field-label { margin-bottom:0; }
.style-expand { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--color-text-muted); cursor:pointer; }
.style-expand::before { content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
.style-expand[aria-expanded="true"]::before { transform:translateY(2px) rotate(-135deg); }
.style-expand:hover { background:var(--color-hover); color:var(--color-text); }
.style-expand:focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; }
.style-expand[hidden] { display:none; }
.style-picker.is-collapsed, .cm-module-list.is-collapsed { overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent); }
.style-option-wrap { position:relative; display:grid; }
.style-option-wrap .style-thumb { background:var(--color-surface-muted); }
.style-ref-remove { position:absolute; top:7px; right:7px; display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:50%;
  background:rgb(0 0 0 / 60%); color:#fff; font-size:15px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s; }
.style-option-wrap:hover .style-ref-remove, .style-ref-remove:focus-visible { opacity:1; }
.style-ref-remove:hover { background:rgb(0 0 0 / 80%); }
@media (hover:none) { .style-ref-remove { opacity:1; } }
/* 2026-10-29: 规格图下的参数框、配件图下的配件照片和清单（数量 ≥1 时出现）。 */
.type-extra { display:grid; gap:8px; margin-top:12px; }
.type-extra label, .type-extra-head span { font-size:var(--font-size-caption); color:var(--color-text-muted); }
.type-extra textarea { width:100%; min-height:72px; resize:vertical; }
.type-extra-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.type-extra-upload { padding:5px 12px; border:1px solid var(--color-border); border-radius:var(--radius-control); background:var(--color-surface); color:var(--color-text); font-size:var(--font-size-caption); cursor:pointer; }
.type-extra-upload:disabled { opacity:.5; cursor:default; }
.type-extra-photos { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; }
.type-extra-photos .photo { border-radius:8px; overflow:hidden; }
.type-extra-photos .photo img { object-fit:cover; border:0; border-radius:8px; }
.type-extra-photos .photo button { display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:rgb(0 0 0 / 60%); color:#fff; font-size:14px; line-height:1; }

/* 2026-11-02 规格、参数框里粘贴截图：读取中 / 读出几条 / 没读到 */
.spec-paste-state { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-secondary); }
.spec-paste-state.is-error { color: #ff7a72; }

/* 2026-11-02 图片右上角的叉照飞象（用户：很难看）：小圆点，深色半透明底，细白圈，里面一个细叉。 */
.upload-zone .photo button, .type-extra-photos .photo button, .cm-thumb > button, .cm-model-remove, .style-ref-remove, .vs-remove, .vt-asset button {
  position: absolute; top: 6px; right: 6px; display: block; width: 20px; height: 20px; min-height: 0; padding: 0 !important;
  border: 1.5px solid #fff; border-radius: 50%; background: rgb(24 24 27 / 60%); color: transparent; font-size: 0; line-height: 0; cursor: pointer;
}
:is(.upload-zone .photo button, .type-extra-photos .photo button, .cm-thumb > button, .cm-model-remove, .style-ref-remove, .vs-remove, .vt-asset button)::before,
:is(.upload-zone .photo button, .type-extra-photos .photo button, .cm-thumb > button, .cm-model-remove, .style-ref-remove, .vs-remove, .vt-asset button)::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px; border-radius: 1px; background: #fff; transform: translate(-50%, -50%) rotate(45deg);
}
:is(.upload-zone .photo button, .type-extra-photos .photo button, .cm-thumb > button, .cm-model-remove, .style-ref-remove, .vs-remove, .vt-asset button)::after { transform: translate(-50%, -50%) rotate(-45deg); }
:is(.upload-zone .photo button, .type-extra-photos .photo button, .cm-thumb > button, .cm-model-remove, .style-ref-remove, .vs-remove, .vt-asset button):hover { background: rgb(0 0 0 / 85%); }

/* 2026-11-02 A+ 内容模块：标题一行放已选数、全选和下拉箭头；勾选后资料框跟在选项下面（dense 让同一行右边的选项不被挤走）。 */
.cm-module-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cm-module-head h3 { margin: 0 auto 0 0; }
.cm-module-head .sub { margin: 0; }
.cm-module-list { grid-auto-flow: row dense; }
.cm-module-fact { grid-column: 1 / -1; min-width: 0; }
.cm-module-fact .field { margin: 0; }