.image-item button {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 1;
}

.image-item button::before {
  content: "×";
  display: block;
  color: #fff;
  font: 900 16px/1 Arial, sans-serif;
  transform: translateY(-0.5px);
}

.image-item small {
  color: #fff;
  font-weight: 900;
  text-shadow: 0 1px 2px #000;
}

.generate-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.generate-options .fixed-spec { margin: 0; text-align: left; }

.skip-confirm {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: #5f523e;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.skip-confirm input {
  /* 隐藏的原生 checkbox 必须定位在标签内部。此前它相对页面根节点定位，
     Seedance 面板变高后 Chrome 在聚焦它时会错误滚动整个任务台。 */
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.skip-confirm i { width: 16px; height: 16px; border: 2px solid #171717; background: #fff; display: grid; place-items: center; }
.skip-confirm input:checked + i { background: #ffd72e; }
.skip-confirm input:checked + i::after { content: "✓"; color: #171717; font: 900 12px/1 Arial, sans-serif; }

.progress-task-foot { justify-content: flex-end; }

.topbar::after { z-index: 0; }
.topbar > * { position: relative; z-index: 1; }
.topbar .brand { z-index: 8; }

.panel-step {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid #171717;
  border-radius: 50%;
  background: #f6a623;
  color: #d5221d;
  display: inline-grid;
  place-items: center;
  box-shadow: 2px 2px 0 #171717;
  transform: none;
  filter: none;
  font: 900 14px/1 "Arial Black", sans-serif;
  text-shadow: none;
}

.bean-chip {
  height: 48px;
  min-width: 102px;
  padding: 4px 10px 4px 7px;
  color: #171717;
  border: 3px solid #171717;
  background: #fff8dd;
  box-shadow: 3px 3px 0 #171717;
  display: grid;
  grid-template-columns: 39px auto;
  grid-template-rows: 16px 22px;
  column-gap: 4px;
  align-items: center;
}
.bean-chip img { grid-row: 1 / 3; width: 39px; height: 34px; object-fit: contain; }
.bean-chip span { color: #77663f; font-size: 9px; line-height: 1; }
.bean-chip b { color: #e53922; font: 900 17px/1 "Arial Black",sans-serif; }
.model-select-wrap { position: relative; }
.model-select-wrap select { padding-right: 62px !important; }
.model-select-wrap img { position: absolute; right: 27px; top: 50%; width: 31px; height: 25px; object-fit: contain; transform: translateY(-50%); pointer-events: none; z-index: 2; }

@media (max-width: 760px) {
  .bean-chip { min-width: 65px; width: 65px; padding: 4px; grid-template-columns: 32px 1fr; }
  .bean-chip img { width: 32px; }
  .bean-chip span { display: none; }
  .bean-chip b { grid-row: 1 / 3; font-size: 13px; }
}

.progress-sidebar-head {
  padding: 2px 2px 14px;
}

.progress-date-tools {
  display: flex !important;
  align-items: flex-end !important;
  gap: 7px !important;
  margin-top: 15px;
}

.progress-date-tools label {
  display: grid;
  flex: 1;
  gap: 5px;
  min-width: 0;
  color: #5f431b;
  font-size: 10px;
  font-weight: 900;
}

.progress-date-tools input,
.progress-date-tools button {
  height: 36px;
  border: 2px solid #171717;
  border-radius: 0;
  background: #fff8dd;
  color: #171717;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 3px 3px 0 #171717;
}

.progress-date-tools input {
  width: 100%;
  min-width: 0;
  padding: 0 7px;
  color-scheme: light;
}

.progress-date-tools button {
  padding: 0 10px;
  cursor: pointer;
}

.progress-date-tools button:hover {
  background: #f47a20;
  color: #fff;
}

.progress-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px !important;
}

.summary-card {
  min-width: 0;
  padding: 8px 3px 7px;
  border: 2px solid #171717;
  background: #fff8dd;
  color: #171717;
  text-align: center;
  box-shadow: 3px 3px 0 #171717;
}

.summary-card span {
  display: block;
  min-height: 24px;
  color: #5e4f39;
  font-size: 9px;
  line-height: 1.2;
}

.summary-card b {
  display: block;
  margin-top: 2px;
  font: 900 22px/1 "Arial Black", sans-serif;
}

.summary-card.total { border-top: 6px solid #168ed0; }
.summary-card.running { border-top: 6px solid #f47a20; }
.summary-card.completed { border-top: 6px solid #21a75a; }
.summary-card.running b { color: #e65116; }
.summary-card.completed b { color: #168b45; }

.progress-date-summary {
  margin: 11px 0 0;
  color: #65450f;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.progress-task-ident {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.progress-task-number {
  display: inline-grid;
  place-items: center;
  min-width: 31px;
  height: 25px;
  padding: 0 5px;
  border: 2px solid #171717;
  background: #e53922;
  color: #fff;
  font: 900 11px/1 "Arial Black", sans-serif;
  box-shadow: 2px 2px 0 #171717;
  transform: skewX(-7deg);
}

.helper-download {
  min-width: 62px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid #171717;
  background: #fff7d8;
  color: #171717;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 3px 3px 0 #171717;
}

.helper-download:hover { background: #ffd72e; }

@media (max-width: 520px) {
  .generate-options { align-items: flex-start; flex-direction: column; }
  .helper-download { height: 42px; min-width: 54px; font-size: 9px; }
}

.progress-own-spent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 10px 0 2px;
  padding: 7px 6px;
  border: 2px solid #171717;
  background: #fff2b4;
  box-shadow: 2px 2px 0 #171717;
  color: #5f3c0d;
  font-size: 10px;
  font-weight: 900;
}
.progress-own-spent b { color: #e53922; font: 900 18px/1 "Arial Black", sans-serif; }
.progress-own-spent em { color: #171717; font-style: normal; }
.progress-task-meta { display:flex; justify-content:space-between; align-items:center; gap:6px; margin:-2px 0 8px; color:#6b5331; font-size:9px; font-weight:800; }
.progress-task-meta span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.progress-task-meta strong { flex:0 0 auto; color:#e53922; font-size:10px; }
.progress-task-error { margin:-1px 0 8px; padding:4px 5px; border-left:3px solid #d52419; background:#fff0e9; color:#b32618; font-size:9px; font-weight:800; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 首屏在会话、模型配置和任务数据完成恢复前只展示加载卡，防止登录页与默认布局闪烁。 */
body.app-booting { overflow: hidden !important; }
body.app-booting #authScreen,
body.app-booting #appShell { display: none !important; }
.app-boot-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 214, 43, .22), transparent 28%),
    radial-gradient(circle at 82% 85%, rgba(23, 144, 210, .32), transparent 36%),
    #075e9f;
}
body.app-booting .app-boot-screen { display: flex; }
.app-boot-card {
  min-width: 248px;
  padding: 25px 32px 22px;
  border: 3px solid #171717;
  box-shadow: 7px 7px 0 #f14d23;
  background: #fff7d8;
  text-align: center;
}
.app-boot-card b { display: block; color: #171717; font: 900 25px/1.1 "Arial Black", "Microsoft YaHei", sans-serif; }
.app-boot-card span { display: block; margin-top: 10px; color: #755526; font-size: 12px; font-weight: 800; }
.app-boot-card i { display: block; width: 132px; height: 7px; margin: 17px auto 0; overflow: hidden; background: #171717; }
.app-boot-card i::after { content: ""; display: block; width: 45%; height: 100%; background: #ffd72e; animation: kairui-boot-loading 1s ease-in-out infinite alternate; }
@keyframes kairui-boot-loading { from { transform: translateX(-15%); } to { transform: translateX(145%); } }

/* AICost：音频开关与画幅并列，避免占用整行。 */
#modelSettingsRow.aicost-selected { grid-template-columns: minmax(0,1.65fr) minmax(150px,.8fr) minmax(210px,.92fr); }
#modelSettingsRow.aicost-selected.aicost-variable-duration { grid-template-columns: minmax(0,1.65fr) minmax(150px,.8fr) minmax(130px,.58fr) minmax(210px,.92fr); }
#aicostDurationOption { min-width: 0; }
#aicostAudioOption { min-height: 0; margin-bottom: 19px; padding: 0; border: 0; border-radius: 0; background: transparent; }
#aicostAudioOption > label:first-child { margin-bottom: 8px; color: #171717; font-weight: 900; }
.aicost-audio-switch { height: 50px; display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 0 13px; border: 3px solid #171717; background: #fff; color: #171717 !important; font-size: 13px !important; font-weight: 900; letter-spacing: 0 !important; cursor: pointer; }
.aicost-audio-switch input { display: none; }
.aicost-audio-switch i { position: relative; width: 38px; height: 21px; border: 2px solid #171717; border-radius: 20px; background: #d9d9d9; transition: .2s; }
.aicost-audio-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: .2s; }
.aicost-audio-switch input:checked + i { background: #139c55; }
.aicost-audio-switch input:checked + i::after { left: 20px; background: #fff; }
#aicostAudioOption small { display: block; margin-top: 5px; color: #765d32; font-size: 10px; font-weight: 700; }
.generate-options .fixed-spec { color: #765d32; font-size: 13px; font-weight: 800; line-height: 1.45; }
.generate-options .fixed-spec b { color: #ef4c34; font-size: 15px; }
#modelSettingsRow.aicost-selected.wan3-selected.aicost-variable-duration { grid-template-columns: minmax(0,2.15fr) minmax(150px,.8fr) minmax(130px,.65fr); }
#modelSettingsRow.wan3-selected:not(.wan-direct-selected) #aicostAudioOption { display: none !important; }
#modelSettingsRow.wan-direct-selected #aicostAudioOption { grid-column: 2 / -1; grid-row: 2; }
#modelSettingsRow.wan-direct-selected .aicost-audio-switch input { display: block; width: 18px; height: 18px; accent-color: #f04423; }
#modelSettingsRow.wan-direct-selected .aicost-audio-switch i { display: none; }
@media(max-width:760px) { #modelSettingsRow.wan-direct-selected #aicostAudioOption { grid-column: auto; grid-row: auto; } }
#referenceUploads.wan3-media-mode { grid-template-columns: repeat(2,minmax(0,1fr)); }
#referenceUploads.wan3-media-mode #referenceAudioField { display: none !important; }
@media (max-width:760px) { #modelSettingsRow.aicost-selected { grid-template-columns: 1fr; } }

/* 前台左侧创作卡在桌面侧栏存在时会比视口窄得多，不能只按 viewport 判断。
   使用容器宽度切换为两行，避免 MiniMax H3 的模型选择框被时长/音效挤成极窄宽度。 */
.composer { container-type: inline-size; }
#modelSettingsRow > .field { min-width: 0; }
@container (max-width: 700px) {
  #modelSettingsRow.aicost-selected.wan3-selected.aicost-variable-duration { grid-template-columns: minmax(0,1fr) minmax(175px,.72fr); }
  #modelSettingsRow.aicost-selected.wan3-selected.aicost-variable-duration > .field:first-child { grid-column: 1; }
  #modelSettingsRow.aicost-selected.wan3-selected.aicost-variable-duration > .field:nth-child(2) { grid-column: 2; }
  #modelSettingsRow.aicost-selected.wan3-selected.aicost-variable-duration #aicostDurationOption { grid-column: 1; }
  #modelSettingsRow.aicost-selected.aicost-variable-duration {
    grid-template-columns: minmax(0, 1fr) minmax(175px, .72fr);
  }
  #modelSettingsRow.aicost-selected.aicost-variable-duration > .field:first-child { grid-column: 1; }
  #modelSettingsRow.aicost-selected.aicost-variable-duration > .field:nth-child(2) { grid-column: 2; }
  #modelSettingsRow.aicost-selected.aicost-variable-duration #aicostDurationOption { grid-column: 1; }
  #modelSettingsRow.aicost-selected.aicost-variable-duration #aicostAudioOption { grid-column: 2; }
}
@container (max-width: 470px) {
  #modelSettingsRow.aicost-selected.wan3-selected.aicost-variable-duration { grid-template-columns: 1fr; }
  #modelSettingsRow.aicost-selected.aicost-variable-duration { grid-template-columns: 1fr; }
  #modelSettingsRow.aicost-selected.aicost-variable-duration > .field:first-child,
  #modelSettingsRow.aicost-selected.aicost-variable-duration > .field:nth-child(2),
  #modelSettingsRow.aicost-selected.aicost-variable-duration #aicostDurationOption,
  #modelSettingsRow.aicost-selected.aicost-variable-duration #aicostAudioOption { grid-column: auto; }
}