.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; }
