:root {
  --selection-ink: var(--ink, #30272a);
  --selection-muted: var(--muted, #8a7d80);
  --selection-line: var(--line, #ebe6e7);
  --selection-soft: var(--surface-raised, #f7f5f5);
  --selection-accent: var(--accent, #c5485d);
  --selection-good: #2c8a61;
}

.image-selection-live[hidden] { display: none; }

.image-selection-live {
  min-height: 0;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--selection-line);
  border-radius: 12px;
  background: var(--surface, #fff);
}

.image-selection-live .studio-statusbar {
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--selection-line);
  background: color-mix(in srgb, var(--selection-soft) 72%, var(--surface, #fff));
  padding: 0 12px;
  font-size: 13px;
}

.image-selection-live .studio-status,
.image-selection-live .studio-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-selection-live .studio-status { font-weight: var(--font-weight-medium); }
.image-selection-live .studio-progress {
  color: var(--selection-muted);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-regular);
}

.image-selection-live .studio-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--selection-muted);
}

.image-selection-live.is-running .studio-status i {
  background: var(--selection-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--selection-accent) 10%, transparent);
}

.image-selection-live.is-complete .studio-status i {
  background: var(--selection-good);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--selection-good) 10%, transparent);
}

.image-selection-live .studio-workspace {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  height: 550px;
  min-height: 0;
  transition: grid-template-columns .5s cubic-bezier(.2, .78, .24, 1);
}

.image-selection-live.phase-browse .studio-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); }
.image-selection-live.phase-compare .studio-workspace,
.image-selection-live.phase-sequence .studio-workspace { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); }

.image-selection-live .asset-browser,
.image-selection-live .decision-desk,
.image-selection-live .final-sequence {
  min-width: 0;
  padding: 9px;
}

.image-selection-live .asset-browser {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.image-selection-live .decision-desk,
.image-selection-live .final-sequence { border-left: 1px solid var(--selection-line); }

.image-selection-live .studio-panel-heading {
  display: flex;
  height: 22px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.image-selection-live .studio-panel-heading span {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
}

.image-selection-live .studio-panel-heading small {
  color: var(--selection-muted);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
}

.image-selection-live .asset-viewport {
  position: relative;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 9px;
  background: var(--selection-soft);
}

.image-selection-live .asset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  transition: transform .48s cubic-bezier(.2, .75, .25, 1);
}

.image-selection-live.phase-browse .asset-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.image-selection-live.phase-compare .asset-grid,
.image-selection-live.phase-sequence .asset-grid {
  grid-template-columns: repeat(var(--library-compact-columns, 15), minmax(0, 1fr));
  grid-template-rows: repeat(var(--library-compact-rows, 15), minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  box-sizing: border-box;
}
.image-selection-live.phase-compare .asset-card,
.image-selection-live.phase-sequence .asset-card { aspect-ratio: auto; min-height: 0; border-radius: 2px; }

.image-selection-live .asset-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 5px;
  background: color-mix(in srgb, var(--selection-line) 78%, var(--surface, #fff));
  transform: translateZ(0);
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

.image-selection-live .asset-card img,
.image-selection-live .decision-card img,
.image-selection-live .candidate-card img,
.image-selection-live .sequence-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-selection-live .asset-card.is-viewing {
  z-index: 2;
  transform: scale(1.035);
  box-shadow: 0 0 0 3px var(--surface, #fff), 0 0 0 5px var(--selection-accent), 0 8px 20px rgba(41, 26, 30, .18);
}

.image-selection-live .asset-card.is-picked::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--selection-accent);
  color: #fff;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}

.image-selection-live .asset-card.is-picked::before,
.image-selection-live .candidate-pool-card.is-first-recall::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 9px;
  right: 13px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.image-selection-live.phase-compare .asset-card.is-picked::after,
.image-selection-live.phase-sequence .asset-card.is-picked::after { top: 1px; right: 1px; width: clamp(10px, 48%, 16px); height: auto; aspect-ratio: 1; }
.image-selection-live.phase-compare .asset-card.is-picked::before,
.image-selection-live.phase-sequence .asset-card.is-picked::before { top: 3px; right: 5px; width: 3px; height: 6px; border-width: 0 1.5px 1.5px 0; }

.image-selection-live .asset-card.is-passed { opacity: .46; }

.image-selection-live .inspection-preview {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  width: min(var(--inspection-width, 68%), calc(100% - 20px));
  max-width: calc(100% - 20px);
  display: grid;
  grid-template-rows: auto auto;
  gap: 7px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--selection-accent) 38%, var(--selection-line));
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 20px 48px rgba(48, 39, 42, .24);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 14px)) scale(.92);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2, .82, .3, 1.12);
}

.image-selection-live .inspection-preview.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.image-selection-live .inspection-preview img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: var(--inspection-ratio, 1 / 1); object-fit: contain; border-radius: 7px; background: var(--selection-soft); }
.image-selection-live .inspection-preview span { padding: 1px 4px 3px; color: var(--selection-muted); font-size: 12px; font-weight: var(--font-weight-regular); }

.image-selection-live .scan-line {
  position: absolute;
  top: 7px;
  right: 6px;
  width: 3px;
  height: 70px;
  border-radius: 99px;
  background: var(--selection-accent);
  opacity: 0;
  box-shadow: 0 0 14px color-mix(in srgb, var(--selection-accent) 65%, transparent);
}

.image-selection-live.is-browsing .scan-line { opacity: .75; animation: image-selection-scan 1.6s ease-in-out infinite alternate; }

.image-selection-live .decision-desk { display: flex; flex-direction: column; }
.image-selection-live .decision-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 10px;
  background: var(--selection-soft);
}

.image-selection-live .candidate-pool {
  display: grid;
  grid-template-columns: repeat(var(--candidate-columns, 2), minmax(0, 1fr));
  grid-template-rows: repeat(var(--candidate-rows, 1), minmax(0, 1fr));
  align-content: start;
  gap: var(--candidate-gap, 8px);
  min-height: 0;
  padding: 8px;
  box-sizing: border-box;
  transition: gap .28s ease;
}

.image-selection-live .candidate-pool-card {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--selection-line) 78%, var(--surface, #fff));
  opacity: .72;
  transform: translateY(14px) scale(.94);
  animation: image-selection-candidate-pool-in .32s cubic-bezier(.2, .82, .3, 1.14) forwards;
  transition: width .28s ease, opacity .24s ease, transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.image-selection-live .candidate-pool-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-selection-live .candidate-pool-card.is-first-recall::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--selection-accent);
  color: #fff;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
}
.image-selection-live .candidate-pool-card.is-first-recall::before { top: 8px; right: 12px; }

.image-selection-live .candidate-pool-card.is-considering {
  z-index: 2;
  opacity: 1;
  transform: scale(1.04);
  box-shadow: 0 0 0 3px var(--surface, #fff), 0 0 0 5px var(--selection-accent), 0 9px 18px rgba(41, 26, 30, .16);
}

.image-selection-live .candidate-pool-card.is-secondary {
  opacity: 1;
  transform: scale(.98);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--selection-accent) 50%, transparent);
}

.image-selection-live .decision-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--selection-muted) 74%, transparent);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
}

.image-selection-live .decision-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: var(--selection-soft);
}

.image-selection-live .decision-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 9px;
  background: color-mix(in srgb, var(--selection-line) 75%, var(--surface, #fff));
  animation: image-selection-enter .3s ease-out both;
}

.image-selection-live .decision-card img { object-fit: contain; }
.image-selection-live .decision-card:nth-child(2) { animation-delay: .08s; }
.image-selection-live .decision-card::after {
  content: "保留";
  position: absolute;
  left: 9px;
  bottom: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 90%, transparent);
  color: var(--selection-ink);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  opacity: 0;
  transform: translateY(5px);
  transition: .2s ease;
}

.image-selection-live .decision-card.is-kept { box-shadow: inset 0 0 0 3px var(--selection-accent); }
.image-selection-live .decision-card.is-kept::after { opacity: 1; transform: translateY(0); }
.image-selection-live .decision-card.is-rejected { opacity: .24; transform: scale(.94) rotate(-1.2deg); filter: grayscale(.65); transition: .35s ease; }

.image-selection-live .candidate-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 39px;
  min-height: 55px;
  align-items: end;
  gap: 4px;
  margin-top: 6px;
  overflow: hidden;
}

.image-selection-live .candidate-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: var(--selection-line);
  animation: image-selection-candidate .28s cubic-bezier(.2, .8, .3, 1.25) both;
}

.image-selection-live .candidate-card.is-out { animation: image-selection-candidate-out .3s ease-in both; }

.image-selection-live .sequence-list {
  display: grid;
  grid-template: repeat(var(--sequence-rows, 3), minmax(0, 1fr)) / repeat(var(--sequence-columns, 2), minmax(0, 1fr));
  align-content: start;
  gap: var(--sequence-gap, 4px);
  height: calc(100% - 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-selection-live .sequence-slot {
  min-height: 0;
  border: 1px dashed color-mix(in srgb, var(--selection-line) 88%, var(--selection-muted));
  border-radius: 9px;
  background: color-mix(in srgb, var(--selection-soft) 78%, var(--surface, #fff));
}

.image-selection-live .sequence-card {
  position: relative;
  display: block;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--selection-line);
  border-radius: 9px;
  background: var(--surface, #fff);
  padding: 4px;
  animation: image-selection-land .34s cubic-bezier(.2, .82, .3, 1.16) both;
}

.image-selection-live .sequence-thumb { width: 100%; height: 100%; overflow: hidden; border-radius: 6px; }
.image-selection-live .sequence-thumb img { object-fit: contain; }
.image-selection-live .sequence-copy {
  position: absolute;
  right: 9px;
  bottom: 9px;
  left: 9px;
  pointer-events: none;
}

.image-selection-live .sequence-copy strong {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 90%, transparent);
  color: var(--selection-ink);
  padding: 0 9px;
  box-shadow: 0 3px 10px rgba(48, 39, 42, .1);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}

.image-selection-live .sequence-list[data-sequence-density="compact"] .sequence-card,
.image-selection-live .sequence-list[data-sequence-density="dense"] .sequence-card { padding: 3px; border-radius: 7px; }
.image-selection-live .sequence-list[data-sequence-density="compact"] .sequence-thumb,
.image-selection-live .sequence-list[data-sequence-density="dense"] .sequence-thumb { border-radius: 5px; }
.image-selection-live .sequence-list[data-sequence-density="compact"] .sequence-copy,
.image-selection-live .sequence-list[data-sequence-density="dense"] .sequence-copy { right: 5px; bottom: 5px; left: 5px; }
.image-selection-live .sequence-list[data-sequence-density="compact"] .sequence-copy strong,
.image-selection-live .sequence-list[data-sequence-density="dense"] .sequence-copy strong {
  min-height: 18px;
  padding: 0 6px;
  font-size: 10px;
}
.image-selection-live .sequence-list[data-sequence-density="dense"] .sequence-copy strong { min-height: 16px; font-size: 9px; }

.image-selection-live .sequence-copy span { display: none; }
.image-selection-live .sequence-card.is-cover { border-color: color-mix(in srgb, var(--selection-accent) 45%, var(--selection-line)); }
.image-selection-live .sequence-card.is-moving { transform: translateY(-7px) scale(1.015); box-shadow: 0 10px 24px rgba(48, 39, 42, .16); }
.image-selection-live .sequence-card.is-provisional { opacity: .84; }
.image-selection-live .sequence-card.is-reviewing { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--selection-accent) 58%, transparent); }
.image-selection-live .sequence-card.is-leaving { opacity: 0; transform: translateX(-18px) scale(.94); transition: .32s ease; }
.image-selection-live .sequence-card.is-final { animation-duration: .46s; }

.image-selection-live.phase-browse .decision-desk {
  min-width: 0;
  overflow: hidden;
  border-left-color: transparent;
  padding-right: 0;
  padding-left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(26px);
  pointer-events: none;
}

.image-selection-live.phase-compare .decision-desk {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity .3s ease .16s, transform .42s cubic-bezier(.2, .78, .24, 1) .08s;
}

.image-selection-live.phase-browse .final-sequence,
.image-selection-live.phase-compare .final-sequence { display: none; }
.image-selection-live.phase-sequence .decision-desk { display: none; }
.image-selection-live.phase-sequence .final-sequence { display: block; }

body[data-current-view="imageCompose"].is-image-selection-active .image-compose-main {
  grid-template-rows: auto 154px auto;
}

body[data-current-view="imageCompose"].is-image-selection-active .image-edit-panel { min-height: 660px; }
body[data-current-view="imageCompose"].is-image-selection-active .image-ai-progress,
body[data-current-view="imageCompose"].is-image-selection-active .image-slot-list,
body[data-current-view="imageCompose"].is-image-selection-active .image-slots-toggle,
body[data-current-view="imageCompose"].is-image-selection-active .image-merge-bar { display: none; }

body[data-current-view="imageCompose"].is-image-selection-active .image-copy-panel {
  min-height: 154px;
  padding-top: 22px;
  padding-bottom: 18px;
  overflow: hidden;
}

body[data-current-view="imageCompose"].is-image-selection-active .image-copy-body-field textarea { height: 52px; min-height: 52px; }

@keyframes image-selection-scan { from { transform: translateY(0); } to { transform: translateY(450px); } }
@keyframes image-selection-enter { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes image-selection-candidate { from { opacity: 0; transform: translateY(18px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes image-selection-candidate-out { to { opacity: 0; transform: translateY(-16px) scale(.7); } }
@keyframes image-selection-candidate-pool-in { to { opacity: 1; transform: none; } }
@keyframes image-selection-land { from { opacity: 0; transform: translateX(34px) scale(.94); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .image-selection-live .studio-workspace { height: 500px; }
  .image-selection-live.phase-browse .asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .image-selection-live *,
  .image-selection-live *::before,
  .image-selection-live *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}