.image-studio-page {
  --studio-ink: #153b40;
  --studio-muted: #688085;
  --studio-line: #d9e7e6;
  --studio-soft: #f2f8f7;
  --studio-mint: #dff5f1;
  --studio-accent: #078f95;
  --studio-accent-dark: #056d73;
  --studio-warm: #fff7e8;
  color: var(--studio-ink);
}

.image-studio-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.image-studio-heading h2 {
  margin: 0;
  max-width: 790px;
  color: #12383d;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.18;
  letter-spacing: -.035em;
}

.image-studio-heading p {
  margin: 9px 0 0;
  max-width: 720px;
  color: var(--studio-muted);
  font-size: 13px;
  line-height: 1.55;
}

.image-studio-header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.image-studio-new-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  padding: 0 14px;
  background: var(--studio-ink);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.image-studio-new-button svg,
.image-studio-form-actions button svg {
  width: 15px;
  height: 15px;
}

.image-studio-modebar {
  display: grid;
  grid-template-columns: minmax(220px, .86fr) minmax(270px, 1.08fr) auto;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px;
  border: 1px solid var(--studio-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(18, 71, 76, .055);
}

.image-studio-mode {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--studio-muted);
}

.image-studio-mode.active {
  background: #eaf7f5;
  color: var(--studio-ink);
}

.image-studio-mode.is-coming {
  border: 1px dashed #cadeda;
  background: #fbfdfd;
}

.image-studio-mode-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  color: var(--studio-accent);
  box-shadow: inset 0 0 0 1px #d4e9e7;
}

.image-studio-mode-icon svg { width: 17px; height: 17px; }
.image-studio-mode b,
.image-studio-mode small { display: block; min-width: 0; }
.image-studio-mode b { font-size: 13px; line-height: 1.3; }
.image-studio-mode small { margin-top: 3px; color: #7d9093; font-size: 10px; line-height: 1.3; }

.image-studio-mode em {
  border-radius: 999px;
  padding: 4px 7px;
  background: #fff;
  color: var(--studio-accent-dark);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.image-studio-mode.is-coming em { background: #eef3f2; color: #7a8c8f; }

.image-studio-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(68px, 1fr));
  align-items: center;
  min-width: 234px;
}

.image-studio-summary div {
  padding: 4px 12px;
  border-left: 1px solid #e1eceb;
}

.image-studio-summary span,
.image-studio-summary b { display: block; }
.image-studio-summary span { color: #7a8d90; font-size: 9px; white-space: nowrap; }
.image-studio-summary b { margin-top: 4px; color: var(--studio-ink); font-size: 19px; line-height: 1; }

.image-studio-create {
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid #cadfdd;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 71, 76, .075);
}

.image-studio-workflow-head {
  min-height: 66px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border-bottom: 1px solid #e3edec;
}

.image-studio-workflow-head > div:first-child,
.image-studio-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-studio-workflow-head h3,
.image-studio-stage-head h3 {
  margin: 0;
  color: var(--studio-ink);
  font-size: 14px;
  line-height: 1.3;
}

.image-studio-workflow-head p,
.image-studio-stage-head p {
  margin: 3px 0 0;
  color: #7a8d90;
  font-size: 10px;
  line-height: 1.35;
}

.image-studio-step {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--studio-mint);
  color: var(--studio-accent-dark);
  font-size: 10px;
  font-weight: 900;
}

.image-studio-model-health {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.image-studio-health-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #d9e8e6;
  border-radius: 999px;
  background: #f9fcfb;
}

.image-studio-health-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22a56d;
}

.image-studio-health-item.is-offline::before { background: #d89b2c; }
.image-studio-health-item b { font-size: 10px; }
.image-studio-health-item span { color: #6d8386; font-size: 9px; }
.image-studio-health-item.is-offline span { color: #a36f11; }

.image-studio-type-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .65fr);
  gap: 10px;
  padding: 12px;
  background: #fbfdfc;
}

.image-studio-task-family {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce9e7;
  border-radius: 12px;
  background: #fff;
}

.image-studio-task-family.content {
  border-color: #d9dfed;
  background: linear-gradient(145deg, #fff, #f8f7fc);
}

.image-studio-task-family > header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px 8px;
  border-bottom: 1px solid #edf2f1;
}

.image-studio-task-family > header > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #e8f6f3;
  color: var(--studio-accent-dark);
}

.image-studio-task-family.content > header > span { background: #eeeafb; color: #6d55a3; }
.image-studio-task-family > header svg { width: 14px; height: 14px; }
.image-studio-task-family > header b,
.image-studio-task-family > header small { display: block; }
.image-studio-task-family > header b { font-size: 11px; }
.image-studio-task-family > header small { margin-top: 2px; color: #7f9092; font-size: 8px; line-height: 1.3; }

.image-studio-task-family-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
}

.image-studio-task-family.content .image-studio-task-family-grid { grid-template-columns: 1fr; }

.image-studio-type {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 62px;
  border: 1px solid #dce8e7;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  color: var(--studio-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.image-studio-type:hover { border-color: #91c9c6; transform: translateY(-1px); }
.image-studio-type.active { border-color: var(--studio-accent); background: #eaf7f5; box-shadow: inset 0 0 0 1px var(--studio-accent); }
.image-studio-type-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #f0f7f6; color: var(--studio-accent-dark); }
.image-studio-type.active .image-studio-type-icon { background: #fff; }
.image-studio-type-icon svg { width: 15px; height: 15px; }
.image-studio-type b,
.image-studio-type small { display: block; min-width: 0; }
.image-studio-type b { font-size: 12px; line-height: 1.25; }
.image-studio-type small { margin-top: 3px; overflow: hidden; color: #819194; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.image-studio-type em { align-self: start; border-radius: 999px; padding: 3px 5px; background: #f3f7f6; color: #75888b; font-size: 7px; font-style: normal; font-weight: 800; white-space: nowrap; }
.image-studio-type.active em { background: #fff; color: var(--studio-accent-dark); }

.image-studio-xhs-deliverables {
  display: grid;
  grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px 12px;
  border-top: 1px solid #e3edec;
  background: #f4f9f8;
}

.image-studio-xhs-deliverables[hidden] { display: none; }
.image-studio-xhs-deliverables-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.image-studio-xhs-deliverables-head > span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #dff5f1; color: var(--studio-accent-dark); }
.image-studio-xhs-deliverables-head svg { width: 15px; height: 15px; }
.image-studio-xhs-deliverables-head b,
.image-studio-xhs-deliverables-head small { display: block; }
.image-studio-xhs-deliverables-head b { font-size: 11px; }
.image-studio-xhs-deliverables-head small { margin-top: 3px; color: #7b8e91; font-size: 9px; }

.image-studio-xhs-deliverable-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.image-studio-xhs-deliverable {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 52px;
  border: 1px solid #d7e6e4;
  border-radius: 9px;
  padding: 7px 9px;
  background: #fff;
  color: var(--studio-ink);
  text-align: left;
  cursor: pointer;
}
.image-studio-xhs-deliverable:hover { border-color: #91c9c6; }
.image-studio-xhs-deliverable.active { border-color: var(--studio-accent); background: #e7f6f3; box-shadow: inset 0 0 0 1px var(--studio-accent); }
.image-studio-xhs-deliverable > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #eff7f5; color: var(--studio-accent-dark); }
.image-studio-xhs-deliverable.active > span:first-child { background: #fff; }
.image-studio-xhs-deliverable svg { width: 14px; height: 14px; }
.image-studio-xhs-deliverable b,
.image-studio-xhs-deliverable small { display: block; min-width: 0; }
.image-studio-xhs-deliverable b { font-size: 10px; line-height: 1.25; }
.image-studio-xhs-deliverable small { margin-top: 3px; overflow: hidden; color: #7e9093; font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

.image-studio-business-brief {
  display: grid;
  gap: 11px;
  padding: 14px 16px;
  border-top: 1px solid #e3edec;
  background: linear-gradient(180deg, #fff, #f8fbfa);
}

.image-studio-business-fields {
  display: grid;
  grid-template-columns: 150px 210px minmax(240px, 1fr) 140px;
  gap: 9px;
  align-items: end;
}

.image-studio-wisdom-rail {
  min-height: 38px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border: 1px solid #d8e9e5;
  border-radius: 10px;
  padding: 6px 8px;
  background: #edf8f5;
}

.image-studio-wisdom-rail span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 7px;
  padding: 0 7px;
  background: #fff;
  color: #567075;
  font-size: 8px;
  font-weight: 700;
}

.image-studio-wisdom-rail span svg { width: 11px; height: 11px; color: var(--studio-accent); }
.image-studio-wisdom-rail .image-studio-wisdom-title { background: var(--studio-ink); color: #fff; }
.image-studio-wisdom-rail .image-studio-wisdom-title svg { color: #a6eee2; }
.image-studio-wisdom-rail em { margin-left: auto; color: #839497; font-size: 8px; font-style: normal; }

.image-studio-workbench {
  display: grid;
  grid-template-columns: minmax(230px, .54fr) minmax(480px, 1.46fr);
  gap: 0;
  border-top: 1px solid #e3edec;
}

.image-studio-stage {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border-right: 1px solid #e1eceb;
  background: #fff;
}

.image-studio-stage:last-child { border-right: 0; }
.image-studio-brief { border-right: 0; background: #fcfdfd; }

.image-studio-page label {
  display: grid;
  gap: 6px;
  color: #4f696d;
  font-size: 10px;
  font-weight: 800;
}

.image-studio-page input,
.image-studio-page select,
.image-studio-page textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cfe0df;
  border-radius: 9px;
  padding: 10px 11px;
  background: #fff;
  color: #153b40;
  font: inherit;
  font-size: 11px;
}

.image-studio-page input,
.image-studio-page select { min-height: 38px; }
.image-studio-page textarea { resize: vertical; line-height: 1.5; }
.image-studio-page input:focus,
.image-studio-page select:focus,
.image-studio-page textarea:focus { outline: 3px solid rgba(7, 143, 149, .12); border-color: var(--studio-accent); }

.image-studio-upload {
  min-height: 174px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 12px;
  border: 1px dashed #7bbfba;
  border-radius: 12px;
  background: linear-gradient(145deg, #eff9f7, #fbfdfd);
  text-align: center;
  cursor: pointer;
}

.image-studio-upload:hover { border-color: var(--studio-accent); background: #edf8f6; }
.image-studio-upload.is-required { border-style: solid; box-shadow: inset 0 0 0 1px rgba(7, 143, 149, .08); }
.image-studio-upload.is-required .image-studio-upload-copy b::after { content: ' 必填'; color: #b46b15; font-size: 8px; }
.image-studio-upload input { display: none; }
.image-studio-upload-preview { width: 70px; height: 70px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #fff; color: var(--studio-accent); box-shadow: 0 7px 18px rgba(8, 89, 94, .11); }
.image-studio-upload-preview svg { width: 24px; height: 24px; }
.image-studio-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-studio-upload-copy b,
.image-studio-upload-copy small,
.image-studio-upload-copy em { display: block; }
.image-studio-upload-copy b { color: var(--studio-ink); font-size: 12px; }
.image-studio-upload-copy small { max-width: 230px; margin-top: 4px; color: #75898c; font-size: 9px; font-weight: 500; line-height: 1.4; }
.image-studio-upload-copy em { margin-top: 5px; color: #9aa8aa; font-size: 8px; font-style: normal; font-weight: 600; }

.image-studio-reference-picker {
  overflow: hidden;
  border: 1px solid #d9e6e4;
  border-radius: 12px;
  background: #fff;
}

.image-studio-reference-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid #e7efee;
  background: #f8fbfa;
}

.image-studio-reference-head > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: #e7f6f2; color: var(--studio-accent-dark); }
.image-studio-reference-head svg { width: 14px; height: 14px; }
.image-studio-reference-head b,
.image-studio-reference-head small { display: block; }
.image-studio-reference-head b { font-size: 10px; }
.image-studio-reference-head small { margin-top: 2px; color: #7c8e91; font-size: 8px; line-height: 1.35; }

.image-studio-reference-grid {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 8px;
  scrollbar-width: thin;
}

.image-studio-reference-card {
  min-width: 128px;
  max-width: 150px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border: 1px solid #dce7e6;
  border-radius: 9px;
  padding: 6px;
  background: #fff;
  color: var(--studio-ink);
  text-align: left;
  cursor: pointer;
}

.image-studio-reference-card:hover { border-color: #8dc7c2; }
.image-studio-reference-card.active { border-color: var(--studio-accent); background: #e9f7f5; box-shadow: inset 0 0 0 1px var(--studio-accent); }
.image-studio-reference-card img { width: 42px; height: 42px; display: block; border-radius: 7px; object-fit: cover; background: #eef5f4; }
.image-studio-reference-card b,
.image-studio-reference-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-studio-reference-card b { font-size: 9px; }
.image-studio-reference-card small { margin-top: 3px; color: #7b8d90; font-size: 7px; }
.image-studio-reference-card.none > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 7px; background: #f2f7f6; color: #789093; }
.image-studio-reference-card.none svg { width: 15px; height: 15px; }
.image-studio-reference-empty { min-width: 270px; display: flex; align-items: center; border: 1px dashed #d8e5e3; border-radius: 9px; padding: 8px 11px; color: #7d9092; font-size: 8px; line-height: 1.45; }

.image-studio-composer {
  overflow: hidden;
  border: 1px solid #bfd8d6;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(18, 77, 81, .065);
}

.image-studio-prompt-label,
.image-studio-truth-label {
  gap: 0 !important;
  padding: 13px 14px 0;
}

.image-studio-prompt-label > span,
.image-studio-truth-label > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #577074;
  font-size: 9px;
  font-weight: 850;
}

.image-studio-truth-label > span svg { width: 13px; height: 13px; color: var(--studio-accent); }
.image-studio-prompt-label textarea,
.image-studio-truth-label textarea { border: 0; border-radius: 0; padding: 10px 0; background: transparent; box-shadow: none; }
.image-studio-prompt-label textarea:focus,
.image-studio-truth-label textarea:focus { border-color: transparent; outline: 0; }
.image-studio-prompt-label textarea { min-height: 80px; font-size: 12px; }
.image-studio-truth-label { border-top: 1px solid #e8efee; background: #fbfdfc; }
.image-studio-truth-label textarea { min-height: 42px; }

.image-studio-composer-toolbar {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 112px auto auto;
  gap: 7px;
  align-items: end;
  padding: 9px;
  border-top: 1px solid #dce9e7;
  background: #f4f8f7;
}

.image-studio-inline-select {
  min-width: 0;
  display: grid !important;
  gap: 4px !important;
}

.image-studio-inline-select > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 2px;
  color: #698084;
  font-size: 8px;
}

.image-studio-inline-select > span svg { width: 11px; height: 11px; }
.image-studio-inline-select select { min-height: 36px; padding: 7px 28px 7px 9px; border-color: #cfdfdd; background: #fff; font-size: 10px; font-weight: 750; }

.image-studio-cost-note {
  min-width: 112px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  border: 1px solid #d4e2e0;
  border-radius: 9px;
  padding: 0 9px;
  background: #fff;
  color: #6d8184;
  font-size: 8px;
  white-space: nowrap;
}

.image-studio-cost-note.is-high-cost { border-color: #ecd5a8; background: #fff8e9; color: #9a6814; }
.image-studio-composer-toolbar .primary-btn { min-width: 104px; min-height: 36px; align-self: end; border-radius: 9px; font-size: 11px; font-weight: 850; }

.image-studio-model-choice {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  border: 0;
}

.image-studio-model-choice legend { margin-bottom: 7px; color: #4f696d; font-size: 10px; font-weight: 850; }
.image-studio-model-choice label {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 9px 10px;
  border: 1px solid #d6e5e3;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.image-studio-model-choice label.selected { border-color: var(--studio-accent); background: #e9f7f5; box-shadow: inset 0 0 0 1px var(--studio-accent); }
.image-studio-model-choice input { position: absolute; opacity: 0; pointer-events: none; }
.image-studio-model-choice b,
.image-studio-model-choice small { display: block; }
.image-studio-model-choice b { color: var(--studio-ink); font-size: 11px; }
.image-studio-model-choice small { margin-top: 3px; color: #75888b; font-size: 8px; font-weight: 500; line-height: 1.35; }
.image-studio-model-choice em { align-self: start; border-radius: 999px; padding: 3px 6px; background: #fff; color: var(--studio-accent-dark); font-size: 8px; font-style: normal; white-space: nowrap; }
.image-studio-model-choice label:last-child em { background: var(--studio-warm); color: #a56608; }

.image-studio-form-actions { display: grid; gap: 8px; margin-top: auto; padding-top: 2px; }
.image-studio-form-actions span { min-height: 28px; color: #73878a; font-size: 9px; line-height: 1.4; }
.image-studio-form-actions button { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; font-weight: 850; }

.image-studio-activity-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 14px; align-items: start; }
.image-studio-activity-grid:not(.has-review) > .image-studio-jobs-panel { grid-column: 1 / -1; }
.image-studio-activity-grid.has-review { grid-template-columns: 1fr; }
.image-studio-activity-grid.has-review > * { grid-column: 1 / -1; }
.image-studio-job-list,
.image-studio-review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.image-studio-review-list { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.image-studio-review-list .image-studio-job { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
.image-studio-review-list .image-studio-job-head,
.image-studio-review-list .studio-job-meta { grid-column: 1 / -1; }
.image-studio-review-list .image-studio-result-grid { grid-template-columns: minmax(180px, 240px); }
.image-studio-review-list .studio-award-evidence,
.image-studio-review-list .studio-award-decision,
.image-studio-review-list .image-studio-job-actions { grid-column: 2; }

.image-studio-job { min-width: 0; overflow: hidden; border: 1px solid #dce8e7; border-radius: 11px; background: #fff; }
.image-studio-job-head { display: flex; justify-content: space-between; gap: 10px; padding: 11px; border-bottom: 1px solid #e7f0ef; }
.image-studio-job-head b,
.image-studio-job-head small { display: block; }
.image-studio-job-head b { overflow: hidden; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.image-studio-job-head small { margin-top: 4px; color: #7a8e90; font-size: 9px; line-height: 1.3; }
.image-studio-job-purpose { display: flex; align-items: center; gap: 5px; margin: 8px 9px 0; border-radius: 7px; padding: 6px 8px; background: #f1f7f6; color: #567075; font-size: 8px; line-height: 1.35; }
.image-studio-job-purpose svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--studio-accent); }
.image-studio-job-reference { display: flex; align-items: center; gap: 5px; margin: 5px 9px 0; color: #705d8e; font-size: 8px; }
.image-studio-job-reference svg { width: 11px; height: 11px; flex: 0 0 auto; }
.studio-concept-warning { display: flex; align-items: flex-start; gap: 7px; margin: 7px 9px 0; border: 1px solid #f0c9a5; border-radius: 8px; padding: 7px 8px; background: #fff7e9; color: #8a5a20; font-size: 8px; line-height: 1.4; }
.studio-concept-warning svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.studio-concept-warning b { display: block; margin-bottom: 2px; color: #764716; font-size: 8px; }
.image-studio-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 9px; }
.image-studio-result { position: relative; min-height: 104px; overflow: hidden; border: 2px solid transparent; border-radius: 8px; padding: 0; background: #eef6f5; cursor: pointer; }
.image-studio-result.selected { border-color: var(--studio-accent); }
.image-studio-result img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: cover; }
.image-studio-result.is-portrait img { aspect-ratio: 3 / 4; object-fit: contain; background: #eef4f2; }
.image-studio-result span { position: absolute; left: 5px; right: 5px; bottom: 5px; overflow: hidden; border-radius: 5px; padding: 4px 5px; background: rgba(9, 50, 54, .82); color: #fff; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.image-studio-result.failed { display: grid; place-items: center; padding: 12px; color: #9d453c; font-size: 9px; text-align: center; }
.image-studio-job-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 9px 9px; }
.image-studio-job-actions button { flex: 1; min-width: 92px; }
.image-studio-review-note { padding: 0 9px 9px; color: #7d5954; font-size: 9px; }
.image-studio-review-note input { font-size: 10px; }

.image-studio-library { margin-top: 14px; }
.image-studio-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; padding: 12px; }
.image-studio-library-card { min-width: 0; overflow: hidden; border: 1px solid #dce8e7; border-radius: 10px; background: #fff; }
.image-studio-library-card img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: cover; background: #edf7f7; }
.image-studio-library-card div { padding: 10px; }
.image-studio-library-card b,
.image-studio-library-card span,
.image-studio-library-card small { display: block; }
.image-studio-library-card b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.image-studio-library-card span { margin-top: 4px; color: #557277; font-size: 9px; }
.image-studio-library-card small { margin-top: 5px; color: #829295; font-size: 8px; }

.image-studio-empty {
  grid-column: 1 / -1;
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 20px;
  color: #7b8f91;
  font-size: 11px;
  text-align: center;
}

.image-studio-empty::before {
  content: '';
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #edf7f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23078f95' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E") center / 22px no-repeat;
}

.image-studio-toast { position: fixed; right: 24px; bottom: 24px; z-index: 1000; max-width: 360px; border-radius: 10px; padding: 12px 15px; background: #073f48; color: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); font-size: 12px; line-height: 1.5; }
.image-studio-toast.error { background: #963f36; }

@media (max-width: 1120px) {
  .image-studio-modebar { grid-template-columns: 1fr 1fr; }
  .image-studio-summary { grid-column: 1 / -1; min-height: 54px; border-top: 1px solid #e1eceb; }
  .image-studio-summary div:first-child { border-left: 0; }
  .image-studio-business-fields { grid-template-columns: 140px 190px minmax(220px, 1fr) 130px; }
  .image-studio-wisdom-rail em { flex-basis: 100%; margin-left: 2px; }
  .image-studio-job-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .image-studio-header { align-items: flex-start; }
  .image-studio-header-actions { display: grid; justify-items: end; }
  .image-studio-type-grid { grid-template-columns: 1fr; }
  .image-studio-business-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .image-studio-intent-field { grid-column: 1 / -1; }
  .image-studio-xhs-deliverables { grid-template-columns: 1fr; }
  .image-studio-workbench { grid-template-columns: minmax(210px, .72fr) minmax(410px, 1.28fr); }
  .image-studio-composer-toolbar { grid-template-columns: minmax(190px, 1fr) 100px auto; }
  .image-studio-cost-note { grid-column: 1 / 3; justify-content: flex-start; min-height: 26px; }
  .image-studio-composer-toolbar .primary-btn { grid-column: 3; grid-row: 1 / 3; height: 100%; }
  .image-studio-activity-grid { grid-template-columns: 1fr; }
  .image-studio-activity-grid > .panel { grid-column: 1; }
  .image-studio-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .image-studio-header { display: block; }
  .image-studio-header-actions { display: flex; justify-content: space-between; margin-top: 14px; }
  .image-studio-modebar { grid-template-columns: 1fr; }
  .image-studio-summary { grid-column: auto; }
  .image-studio-model-health { display: none; }
  .image-studio-type-grid { grid-template-columns: 1fr; }
  .image-studio-task-family-grid { grid-template-columns: 1fr; }
  .image-studio-business-fields { grid-template-columns: 1fr; }
  .image-studio-intent-field { grid-column: auto; }
  .image-studio-wisdom-rail { align-items: stretch; }
  .image-studio-wisdom-rail span { flex: 1 1 45%; }
  .image-studio-wisdom-rail .image-studio-wisdom-title { flex-basis: 100%; }
  .image-studio-xhs-deliverable-grid { grid-template-columns: 1fr; }
  .image-studio-workbench { grid-template-columns: 1fr; }
  .image-studio-stage { border-right: 0; border-bottom: 1px solid #e1eceb; }
  .image-studio-composer-toolbar { grid-template-columns: 1fr 90px; }
  .image-studio-cost-note { grid-column: 1; }
  .image-studio-composer-toolbar .primary-btn { grid-column: 2; grid-row: 1 / 3; }
  .image-studio-job-list,
  .image-studio-library-grid { grid-template-columns: 1fr; }
}

/* 2026-07-17 AI-native workspace redesign */
.image-studio-page {
  --studio-neon: #9dff62;
  --studio-cyan: #77e8ff;
  --studio-violet: #a886ff;
  --studio-black: #0b0d0e;
  --studio-panel: #141719;
  --studio-paper: #f4f5f2;
  padding: 0 !important;
  background: #eef1ef;
  color: #171a1b;
}

.studio-app-shell {
  min-height: calc(100vh - 42px);
  overflow: hidden;
  border: 1px solid #d9dfdc;
  border-radius: 22px;
  background: var(--studio-paper);
  box-shadow: 0 20px 60px rgba(18, 28, 25, .1);
}

.studio-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 68px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  border-bottom: 1px solid #e7ebe8;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
}

.studio-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #121515;
  text-decoration: none;
}

.studio-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #111414;
  color: var(--studio-neon);
  box-shadow: 0 7px 18px rgba(9, 13, 12, .18);
}
.studio-brand-mark svg { width: 17px; height: 17px; }
.studio-brand b, .studio-brand small { display: block; }
.studio-brand b { font-size: 13px; letter-spacing: .08em; }
.studio-brand small { margin-top: 1px; color: #7a8380; font-size: 9px; letter-spacing: .16em; }

.studio-product-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f3f1;
}

.studio-product-nav button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  padding: 0 13px;
  background: transparent;
  color: #68716e;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.studio-product-nav button:hover { color: #111; }
.studio-product-nav button.active { background: #fff; color: #111; box-shadow: 0 3px 12px rgba(18, 26, 23, .08); }
.studio-product-nav button svg { width: 14px; height: 14px; }
.studio-product-nav button span { border-radius: 999px; padding: 2px 5px; background: var(--studio-neon); color: #17300d; font-size: 7px; font-weight: 900; }

.studio-topbar-actions { display: flex; align-items: center; gap: 9px; }
.studio-runtime, .studio-account {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #e1e6e3;
  border-radius: 999px;
  padding: 0 10px;
  background: #fff;
  color: #6d7572;
  font-size: 9px;
  white-space: nowrap;
}
.studio-runtime > span, .studio-account .dot { width: 6px; height: 6px; border-radius: 50%; background: #e8aa3b; }
.studio-runtime > span.online, .studio-account .dot { background: #39c978; box-shadow: 0 0 0 4px rgba(57, 201, 120, .1); }

.studio-main { display: grid; gap: 18px; padding: 18px; }

.studio-hero {
  position: relative;
  min-height: 650px;
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  border-radius: 20px;
  padding: 58px 34px 44px;
  background:
    radial-gradient(circle at 50% 55%, rgba(93, 151, 130, .13), transparent 34%),
    linear-gradient(150deg, #0a0c0d 0%, #101416 60%, #0b0d0e 100%);
  color: #fff;
}

.studio-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(circle, rgba(255,255,255,.34) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
  pointer-events: none;
}

.studio-hero-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(100px); opacity: .16; pointer-events: none; }
.studio-hero-glow.one { top: -190px; left: 14%; background: var(--studio-violet); }
.studio-hero-glow.two { right: 9%; bottom: -230px; background: var(--studio-cyan); }

.studio-hero-copy { position: relative; z-index: 1; text-align: center; }
.studio-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--studio-neon); font-size: 9px; font-weight: 850; letter-spacing: .2em; }
.studio-kicker svg { width: 14px; height: 14px; }
.studio-hero-copy h2 { margin: 13px 0 0; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; letter-spacing: -.045em; }
.studio-hero-copy p { margin: 14px 0 0; color: #9ca6a2; font-size: 13px; }

.studio-task-switcher {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 29px;
}
.studio-task-switcher button {
  min-width: 134px;
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  padding: 8px 12px;
  background: rgba(255,255,255,.055);
  color: #fff;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.studio-task-switcher button:hover { border-color: rgba(157,255,98,.46); background: rgba(255,255,255,.085); }
.studio-task-switcher button.active { border-color: var(--studio-neon); background: rgba(157,255,98,.12); box-shadow: 0 0 0 1px rgba(157,255,98,.16), 0 10px 30px rgba(0,0,0,.2); }
.studio-task-switcher button > span { width: 28px; height: 28px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.09); color: var(--studio-neon); }
.studio-task-switcher button svg { width: 14px; height: 14px; }
.studio-task-switcher b { font-size: 10px; }
.studio-task-switcher small { color: #87908d; font-size: 8px; }
.studio-task-switcher button.active small { color: #b8c5bf; }

.studio-xhs-switcher { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin-top: 9px; color: #8f9995; font-size: 9px; }
.studio-xhs-switcher[hidden] { display: none; }
.studio-xhs-switcher > div { display: flex; gap: 4px; }
.studio-xhs-switcher button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 5px 9px; background: rgba(255,255,255,.04); color: #9aa4a0; font: inherit; font-size: 8px; cursor: pointer; }
.studio-xhs-switcher button.active { border-color: rgba(157,255,98,.48); background: rgba(157,255,98,.1); color: #eaffdf; }
.studio-xhs-switcher button svg { width: 11px; height: 11px; }

.studio-hero.is-xhs-mode {
  min-height: 820px;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 93, 133, .12), transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(97, 77, 255, .13), transparent 32%),
    linear-gradient(150deg, #0b0c0f 0%, #111318 58%, #0b0d10 100%);
}
.studio-hero.is-xhs-mode .studio-kicker { color: #ff8aa8; }
.studio-hero.is-xhs-mode .studio-task-switcher button.active { border-color: #ff789f; background: rgba(255, 83, 127, .12); box-shadow: 0 0 0 1px rgba(255, 83, 127, .14), 0 10px 30px rgba(0,0,0,.2); }
.studio-hero.is-xhs-mode .studio-task-switcher button.active > span { color: #ff91ad; }

.studio-xhs-planner {
  position: relative;
  z-index: 3;
  width: min(1040px, 100%);
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(20, 22, 27, .88);
  box-shadow: 0 22px 55px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
}
.studio-xhs-planner[hidden] { display: none; }
.studio-xhs-planner-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; min-height: 40px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); background: linear-gradient(90deg, rgba(255,92,136,.08), transparent 46%); }
.studio-xhs-planner-head span { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 9px; font-weight: 800; }
.studio-xhs-planner-head span svg { width: 13px; height: 13px; color: #ff86a7; }
.studio-xhs-planner-head small { color: #747e80; font-size: 7px; }
.studio-xhs-planner-grid { display: grid; grid-template-columns: 190px minmax(250px, .9fr) minmax(310px, 1.15fr); }
.studio-xhs-planner.is-inner-page .studio-xhs-planner-grid { grid-template-columns: 190px minmax(0, 1fr); }
.studio-xhs-planner-grid > section { min-width: 0; padding: 12px; border-right: 1px solid rgba(255,255,255,.07); }
.studio-xhs-planner-grid > section:last-child { border-right: 0; }
.studio-xhs-planner-grid section[hidden] { display: none; }
.studio-xhs-planner-grid header { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.studio-xhs-planner-grid header > b { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: rgba(255, 106, 145, .1); color: #ff88a8; font-size: 7px; }
.studio-xhs-planner-grid header > span { color: #eef1f0; font-size: 9px; font-weight: 760; }
.studio-xhs-planner-grid header small { display: block; margin-top: 2px; color: #6f7a7c; font-size: 7px; font-weight: 500; }
.studio-xhs-planner .studio-xhs-switcher { margin: 0; }
.studio-xhs-planner .studio-xhs-switcher > div { width: 100%; display: grid; grid-template-columns: 1fr; gap: 5px; }
.studio-xhs-planner .studio-xhs-switcher button { min-height: 27px; justify-content: flex-start; border-radius: 8px; padding: 0 9px; font-size: 8px; }
.studio-xhs-planner .studio-xhs-switcher button.active { border-color: rgba(255, 111, 149, .46); background: rgba(255, 83, 127, .1); color: #ffdce5; }
.studio-xhs-note-types { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
.studio-xhs-note-types button { min-height: 27px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.035); color: #929c9a; font: inherit; font-size: 8px; cursor: pointer; }
.studio-xhs-note-types button:hover { color: #fff; border-color: rgba(255, 119, 155, .35); }
.studio-xhs-note-types button.active { border-color: rgba(255, 111, 149, .55); background: linear-gradient(135deg, rgba(255,85,130,.15), rgba(121,91,255,.1)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.studio-xhs-cover-structures { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.studio-xhs-visual-card { position: relative; min-width: 0; min-height: 116px; display: grid; grid-template-columns: 66px minmax(0,1fr); align-items: stretch; gap: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; padding: 6px; background: rgba(255,255,255,.035); color: #dce2df; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.studio-xhs-visual-card:hover { border-color: rgba(255, 128, 161, .42); transform: translateY(-1px); }
.studio-xhs-visual-card.active { border-color: rgba(255, 111, 149, .72); background: linear-gradient(135deg, rgba(255,83,127,.13), rgba(104,80,225,.09)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.studio-xhs-real-preview { position: relative; width: 66px; min-height: 102px; overflow: hidden; border-radius: 8px; background: #272b2d; }
.studio-xhs-real-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-xhs-real-preview .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,13,.04), rgba(8,12,13,.04) 34%, rgba(8,12,13,.82)); }
.studio-xhs-real-preview i,
.studio-xhs-set-preview i { position: absolute; left: 5px; top: 5px; z-index: 2; border-radius: 999px; padding: 2px 4px; background: rgba(255,255,255,.9); color: #111; font-size: 5px; font-style: normal; font-weight: 900; }
.studio-xhs-real-preview strong { position: absolute; left: 5px; right: 4px; bottom: 7px; z-index: 2; color: #fff; font-size: 7px; line-height: 1.22; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.studio-xhs-real-preview[data-accent="cyan"] { box-shadow: inset 0 -4px #28c6d8; }
.studio-xhs-real-preview[data-accent="coral"] { box-shadow: inset 0 -4px #ff6881; }
.studio-xhs-real-preview[data-accent="green"] { box-shadow: inset 0 -4px #61d59b; }
.studio-xhs-real-preview[data-accent="violet"] { box-shadow: inset 0 -4px #a77aff; }
.studio-xhs-real-preview[data-accent="blue"] { box-shadow: inset 0 -4px #68a7ff; }
.studio-xhs-real-preview[data-accent="amber"] { box-shadow: inset 0 -4px #ffd45b; }
.studio-xhs-visual-meta { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.studio-xhs-visual-meta b,
.studio-xhs-visual-meta small,
.studio-xhs-visual-meta em { display: block; }
.studio-xhs-visual-meta b { color: #f4f7f5; font-size: 8px; line-height: 1.3; }
.studio-xhs-visual-meta small { margin-top: 5px; color: #899492; font-size: 6.5px; font-weight: 500; line-height: 1.45; }
.studio-xhs-visual-meta em { margin-top: 7px; color: #ff99b3; font-size: 6px; font-style: normal; font-weight: 760; }
.studio-xhs-set-preview { position: relative; width: 66px; min-height: 102px; }
.studio-xhs-set-preview > span { position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 6px; box-shadow: 0 5px 12px rgba(0,0,0,.32); }
.studio-xhs-set-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-xhs-set-preview .cover { left: 0; top: 4px; z-index: 3; width: 44px; height: 78px; }
.studio-xhs-set-preview .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(6,10,11,.78)); }
.studio-xhs-set-preview .cover strong { position: absolute; left: 4px; right: 3px; bottom: 5px; z-index: 2; color: #fff; font-size: 6px; line-height: 1.2; }
.studio-xhs-set-preview .inner { right: 0; width: 38px; height: 54px; background: #f5f5f2; }
.studio-xhs-set-preview .inner.first { top: 12px; z-index: 2; transform: rotate(3deg); }
.studio-xhs-set-preview .inner.second { top: 39px; z-index: 4; transform: rotate(6deg); }
.studio-xhs-set-preview .inner::after { content: ''; position: absolute; inset: 0; background: rgba(13,22,22,.5); }
.studio-xhs-set-preview .inner i { top: 4px; left: 4px; }
.studio-xhs-set-preview .inner strong { position: absolute; left: 4px; right: 3px; bottom: 5px; z-index: 2; color: #fff; font-size: 4.5px; line-height: 1.15; }
.studio-xhs-set-preview > em { position: absolute; left: 5px; bottom: 1px; z-index: 6; border-radius: 999px; padding: 2px 4px; background: #ff6f95; color: #fff; font-size: 5px; font-style: normal; font-weight: 900; }
.studio-xhs-expression { min-height: 38px; display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.07); padding: 0 13px; color: #818b88 !important; font-size: 7px !important; }
.studio-detail-templates { margin: 10px auto 0; width: min(980px, calc(100% - 36px)); overflow: hidden; border: 1px solid #d8e5e1; border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 18px 48px rgba(26,84,77,.1); }
.studio-detail-templates[hidden] { display: none; }
.studio-detail-template-head { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid #e3ebe8; background: linear-gradient(105deg,#f7fcfa 0%,#f7fbff 54%,#fff8f9 100%); }
.studio-detail-template-head b { color: #223a35; font-size: 11px; }
.studio-detail-template-head span { color: #73847f; font-size: 9px; }
.studio-detail-template-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding: 9px; }
.studio-detail-template-card { min-width: 0; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 9px; align-items: center; min-height: 96px; overflow: hidden; border: 1px solid #e0e8e5; border-radius: 11px; padding: 6px; background: #fff; color: #344a45; text-align: left; cursor: pointer; box-shadow: 0 4px 14px rgba(36,72,66,.035); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.studio-detail-template-card:hover { border-color: #8fd7d1; box-shadow: 0 8px 20px rgba(31,134,126,.09); transform: translateY(-1px); }
.studio-detail-template-card.active { border-color: #29b8c4; background: #effbfc; box-shadow: inset 0 0 0 1px rgba(41,184,196,.1), 0 8px 20px rgba(41,184,196,.09); }
.studio-detail-template-preview { position: relative; width: 58px; height: 82px; overflow: hidden; border-radius: 7px; background: #edf3f1; }
.studio-detail-template-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) brightness(.92); }
.studio-detail-template-preview i { position: absolute; left: 5px; right: 5px; z-index: 2; height: 14px; border-radius: 3px; background: rgba(255,255,255,.86); box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.studio-detail-template-preview i:nth-of-type(1) { top: 7px; }
.studio-detail-template-preview i:nth-of-type(2) { top: 28px; height: 20px; background: rgba(255,255,255,.72); }
.studio-detail-template-preview i:nth-of-type(3) { top: 55px; height: 19px; background: rgba(255,255,255,.82); }
.studio-detail-template-preview[data-accent="cyan"] { box-shadow: inset 0 -4px #2ec7d5; }
.studio-detail-template-preview[data-accent="coral"] { box-shadow: inset 0 -4px #ff6c82; }
.studio-detail-template-preview[data-accent="green"] { box-shadow: inset 0 -4px #68d49d; }
.studio-detail-template-preview[data-accent="violet"] { box-shadow: inset 0 -4px #a578ff; }
.studio-detail-template-card > span:last-child { min-width: 0; }
.studio-detail-template-card b,
.studio-detail-template-card small,
.studio-detail-template-card em { display: block; }
.studio-detail-template-card b { color: #263c37; font-size: 9px; line-height: 1.35; }
.studio-detail-template-card small { margin-top: 5px; color: #7b8b87; font-size: 7px; line-height: 1.4; }
.studio-detail-template-card em { margin-top: 7px; color: #168f9a; font-size: 6.5px; font-style: normal; font-weight: 750; }
.studio-xhs-expression span { color: #aeb7b4; font-weight: 700; }
.studio-xhs-expression select { min-height: 26px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 8px !important; padding: 0 28px 0 9px !important; background: rgba(255,255,255,.04) !important; color: #e8eeeb !important; font-size: 8px !important; }
.studio-xhs-expression select option { color: #111; }
.studio-xhs-expression small { margin-left: auto; color: #65706d; }

.studio-command-deck {
  position: relative;
  z-index: 3;
  width: min(980px, 100%);
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 22px;
  background: rgba(25, 28, 30, .92);
  box-shadow: 0 26px 60px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(22px);
}

.studio-context-row { display: grid; grid-template-columns: 180px 220px minmax(260px, 1fr) auto; gap: 8px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.studio-context-row label { gap: 3px !important; border-radius: 10px; padding: 7px 10px; background: rgba(255,255,255,.045); }
.studio-context-row label > span { color: #7f8a86; font-size: 7px; letter-spacing: .06em; }
.studio-context-row input, .studio-context-row select { min-height: 25px !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; color: #f6f8f7 !important; font-size: 10px !important; box-shadow: none !important; }
.studio-context-row select option, .studio-command-toolbar select option { color: #111; }
.studio-context-row input::placeholder { color: #66716d; }
.studio-context-action { min-width: 88px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); color: #aab3af; font: inherit; font-size: 8px; cursor: pointer; }
.studio-context-action:hover { border-color: rgba(157,255,98,.4); color: #fff; }
.studio-context-action svg { width: 12px; height: 12px; }

.studio-command-input { min-height: 146px; display: grid; grid-template-columns: 126px minmax(0,1fr); padding: 14px 14px 6px; }
.studio-product-drop { min-height: 116px; place-items: center; align-content: center; border: 1px dashed #49514e; border-radius: 13px; padding: 9px; background: rgba(255,255,255,.025); color: #d6ddda !important; text-align: center; cursor: pointer; }
.studio-product-drop:hover, .studio-product-drop.has-image { border-color: var(--studio-neon); background: rgba(157,255,98,.055); }
.studio-product-drop input { display: none; }
.studio-product-drop .image-studio-upload-preview { width: 48px; height: 48px; border-radius: 11px; background: rgba(255,255,255,.07); box-shadow: none; color: var(--studio-neon); }
.studio-product-drop .image-studio-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.studio-product-drop > span:last-child b, .studio-product-drop > span:last-child small { display: block; }
.studio-product-drop > span:last-child b { margin-top: 6px; font-size: 9px; }
.studio-product-drop > span:last-child small { max-width: 105px; margin-top: 3px; color: #737d79; font-size: 7px; line-height: 1.35; }

.studio-prompt { min-width: 0; }
.studio-prompt textarea { min-height: 116px; border: 0 !important; padding: 10px 13px !important; background: transparent !important; color: #f4f7f5 !important; font-size: 14px !important; line-height: 1.7 !important; box-shadow: none !important; resize: none !important; }
.studio-prompt textarea::placeholder { color: #737d79; }

.studio-command-assets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 0 14px 9px 154px; }
.studio-command-assets > label, .studio-asset-trigger, .studio-intelligence { min-height: 29px; display: inline-flex !important; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 0 9px; background: rgba(255,255,255,.035); color: #99a39f; }
.studio-command-assets svg { width: 12px; height: 12px; }
.studio-command-assets select { max-width: 210px; min-height: 27px !important; border: 0 !important; padding: 0 22px 0 0 !important; background: transparent !important; color: #cbd2cf !important; font-size: 8px !important; box-shadow: none !important; }
.studio-asset-trigger { font: inherit; font-size: 8px; cursor: pointer; }
.studio-asset-trigger span { color: var(--studio-neon); }
.studio-intelligence { margin-left: auto; border-color: rgba(157,255,98,.15); background: rgba(157,255,98,.055); color: #aab6b1; font-size: 8px; }
.studio-intelligence svg, .studio-intelligence b { color: var(--studio-neon); }

.studio-command-deck .image-studio-reference-picker { margin: 0 12px 10px; border-color: #303735; background: #15191a; }
.studio-command-deck .image-studio-reference-head { border-color: #2b3230; background: #181d1e; color: #d7ddda; }
.studio-command-deck .image-studio-reference-head small { color: #737d79; }
.studio-command-deck .image-studio-reference-card { border-color: #303735; background: #1d2223; color: #dce2df; }
.studio-command-deck .image-studio-reference-card.active { border-color: var(--studio-neon); background: rgba(157,255,98,.08); box-shadow: none; }
.studio-command-deck .image-studio-reference-empty { border-color: #343b39; color: #7d8884; }

.studio-command-toolbar { min-height: 56px; display: grid; grid-template-columns: minmax(190px, auto) 92px 1fr 42px; gap: 7px; align-items: center; padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(7,9,10,.4); }
.studio-command-toolbar label { min-height: 36px; display: flex !important; grid-template-columns: none; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; padding: 0 9px; background: rgba(255,255,255,.035); }
.studio-command-toolbar label svg { width: 12px; height: 12px; color: var(--studio-neon); }
.studio-command-toolbar select { min-height: 32px !important; border: 0 !important; padding: 0 22px 0 0 !important; background: transparent !important; color: #dce2df !important; font-size: 9px !important; box-shadow: none !important; }
.studio-command-toolbar .image-studio-cost-note { justify-self: end; border-color: transparent; background: transparent; color: #76807c; }
.studio-generate-button { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--studio-neon); color: #14210f; cursor: pointer; box-shadow: 0 8px 24px rgba(157,255,98,.18); }
.studio-generate-button:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(157,255,98,.28); }
.studio-generate-button:disabled { opacity: .6; cursor: wait; }
.studio-generate-button svg { width: 17px; height: 17px; }

.studio-business-drawer { border-top: 1px solid rgba(255,255,255,.08); padding: 12px; background: #161a1b; }
.studio-business-drawer[hidden] { display: none; }
.studio-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.studio-drawer-head b, .studio-drawer-head small { display: block; }
.studio-drawer-head b { color: #f3f5f4; font-size: 10px; }
.studio-drawer-head small { margin-top: 3px; color: #737d79; font-size: 8px; }
.studio-drawer-head button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #313836; border-radius: 8px; background: transparent; color: #8f9995; cursor: pointer; }
.studio-drawer-head button svg { width: 13px; height: 13px; }
.studio-business-drawer .image-studio-business-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }
.studio-business-drawer .image-studio-business-fields label { color: #89938f; }
.studio-business-drawer .image-studio-business-fields .wide { grid-column: span 3; }
.studio-business-drawer input, .studio-business-drawer select, .studio-business-drawer textarea { border-color: #343b39; background: #1d2223; color: #eef2ef; }

.studio-readiness-strip { min-height: 31px; display: grid; grid-template-columns: auto minmax(110px, 180px) auto auto 1fr; gap: 8px; align-items: center; padding: 0 13px; border-top: 1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.018); color: #7d8783; font-size: 8px; }
.studio-readiness-strip > span { display: inline-flex; align-items: center; gap: 5px; }
.studio-readiness-strip > span svg { width: 11px; height: 11px; }
.studio-readiness-strip .image-studio-readiness-bar { height: 3px; border-radius: 999px; background: #333a38; }
.studio-readiness-strip .image-studio-readiness-bar i { height: 100%; display: block; border-radius: inherit; background: #d9a83d; transition: width .25s ease; }
.studio-readiness-strip[data-level="ready"] .image-studio-readiness-bar i { background: var(--studio-neon); }
.studio-readiness-strip b { color: #c7cfcb; font-size: 8px; }
.studio-readiness-strip b strong { font-size: 10px; }
.studio-readiness-strip em { border-radius: 999px; padding: 3px 6px; background: rgba(217,168,61,.1); color: #d7ad54; font-style: normal; }
.studio-readiness-strip[data-level="ready"] em { background: rgba(157,255,98,.1); color: var(--studio-neon); }
.studio-readiness-strip > small { justify-self: end; color: #66706c; }

.studio-section, .studio-feature-grid, .image-studio-library, .image-studio-activity-grid { scroll-margin-top: 84px; }
.studio-section { border: 1px solid #dde3df; border-radius: 18px; padding: 20px; background: #fff; }
.studio-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.studio-section-head span, .studio-panel-kicker { color: #7c8783; font-size: 8px; font-weight: 850; letter-spacing: .18em; }
.studio-section-head h3 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.04em; }
.studio-section-head p { margin: 5px 0 0; color: #818a87; font-size: 10px; }
.studio-section-head > button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #525b58; font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; }
.studio-section-head > button svg { width: 13px; height: 13px; }

.studio-edit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 16px; }
.studio-edit-grid > button { min-width: 0; display: grid; grid-template-columns: 52px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 11px; align-items: center; border: 1px solid #e4e9e6; border-radius: 14px; padding: 9px; background: #fafbf9; color: #171a19; text-align: left; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.studio-edit-grid > button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(20,31,27,.08); }
.tool-visual { width: 52px; height: 52px; grid-row: 1/3; display: grid; place-items: center; border-radius: 12px; color: #171a19; overflow: hidden; position: relative; }
.tool-visual::before { content: ''; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.68); filter: blur(1px); }
.tool-visual svg { position: relative; width: 20px; height: 20px; }
.tool-visual.violet { background: linear-gradient(145deg,#d9ccff,#9f83ff); }
.tool-visual.coral { background: linear-gradient(145deg,#ffd5c9,#ff896e); }
.tool-visual.mint { background: linear-gradient(145deg,#c6f7e4,#58d2a1); }
.tool-visual.blue { background: linear-gradient(145deg,#c5edff,#62bce8); }
.tool-visual.amber { background: linear-gradient(145deg,#ffeab9,#ffc04f); }
.tool-visual.pink { background: linear-gradient(145deg,#ffd5e9,#f085b7); }
.tool-visual.lime { background: linear-gradient(145deg,#e7ffc4,#a6e75b); }
.tool-visual.graphite { background: linear-gradient(145deg,#d8dedd,#7e8b87); }
.studio-edit-grid b { align-self: end; font-size: 11px; }
.studio-edit-grid small { align-self: start; margin-top: 3px; overflow: hidden; color: #87908d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.studio-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.studio-feature { min-height: 280px; position: relative; display: grid; grid-template-columns: minmax(0,1fr) 42%; align-items: center; overflow: hidden; border-radius: 18px; padding: 24px; }
.studio-feature.batch { background: linear-gradient(140deg,#e8ffd8,#d7f5ea 65%,#cbebff); }
.studio-feature.canvas { grid-template-columns: 48% minmax(0,1fr); background: #0d0f10; color: #fff; }
.studio-feature-copy { position: relative; z-index: 2; }
.studio-feature-copy > span { color: #66716d; font-size: 8px; font-weight: 850; letter-spacing: .18em; }
.studio-feature.canvas .studio-feature-copy > span { color: var(--studio-neon); }
.studio-feature-copy h3 { max-width: 340px; margin: 9px 0 0; font-size: 24px; line-height: 1.12; letter-spacing: -.04em; }
.studio-feature-copy p { max-width: 330px; margin: 10px 0 0; color: #68726e; font-size: 10px; line-height: 1.6; }
.studio-feature.canvas .studio-feature-copy p { color: #8a9490; }
.studio-feature-copy button { margin-top: 20px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 9px; padding: 9px 12px; background: #111514; color: #fff; font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.studio-feature.canvas .studio-feature-copy button { background: var(--studio-neon); color: #172210; }
.studio-feature-copy button svg { width: 13px; height: 13px; }
.studio-batch-visual { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; }
.studio-batch-visual div { width: 92px; aspect-ratio: 3/4; display: grid; place-items: center; border: 5px solid rgba(255,255,255,.82); border-radius: 13px; background: linear-gradient(145deg,#fff,#cbe8e2); color: #285d50; font-size: 30px; font-weight: 900; box-shadow: 0 18px 35px rgba(39,89,76,.18); }
.studio-batch-visual div:nth-child(1) { transform: rotate(-11deg) translateX(28px); }
.studio-batch-visual div:nth-child(2) { z-index: 2; transform: translateY(-8px); }
.studio-batch-visual div:nth-child(3) { transform: rotate(11deg) translateX(-28px); }
.studio-batch-visual > span { position: absolute; right: 0; bottom: 15px; border-radius: 999px; padding: 6px 9px; background: #111514; color: var(--studio-neon); font-size: 9px; font-weight: 900; }
.studio-canvas-preview { position: relative; height: 200px; margin-right: 20px; border: 1px solid #282d2b; border-radius: 14px; background-color: #111415; background-image: radial-gradient(#3b423f 1px,transparent 1px); background-size: 16px 16px; }
.studio-canvas-preview .node { position: absolute; z-index: 2; width: 52px; height: 66px; border: 3px solid #edf2ef; border-radius: 8px; background: linear-gradient(145deg,#d0f4ff,#6d87ff); box-shadow: 0 9px 20px #000; }
.studio-canvas-preview .n1 { left: 12%; top: 20%; }
.studio-canvas-preview .n2 { left: 45%; top: 51%; background: linear-gradient(145deg,#efffd5,#79da6b); }
.studio-canvas-preview .n3 { right: 8%; top: 18%; background: linear-gradient(145deg,#ffe1e8,#dd6ba3); }
.studio-canvas-preview svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio-canvas-preview path { fill: none; stroke: #78827e; stroke-width: 1.5; }

.image-studio-library, .image-studio-activity-grid > .panel { border: 1px solid #dde3df; border-radius: 18px; background: #fff; box-shadow: none; }
.image-studio-library { margin-top: 0; }
.image-studio-library .panel-head, .image-studio-activity-grid .panel-head { padding: 17px 18px; }
.image-studio-library .panel-head h3, .image-studio-activity-grid .panel-head h3 { margin-top: 4px; font-size: 19px; letter-spacing: -.035em; }
.image-studio-library-tools { display: flex; align-items: center; gap: 6px; }
.image-studio-library-tools select, .image-studio-library-tools input { min-height: 31px; border-color: #e0e6e2; border-radius: 8px; padding: 6px 9px; background: #fafbf9; font-size: 8px; }
.image-studio-library-tools input { width: 118px; }
.image-studio-library-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 0 14px 14px; }
.image-studio-library-card { border-color: #e1e6e3; border-radius: 13px; background: #fafbf9; }
.studio-library-image { position: relative; padding: 0 !important; }
.studio-library-image > span { position: absolute; right: 8px; top: 8px; border-radius: 999px; padding: 4px 6px; background: rgba(10,14,12,.82); color: var(--studio-neon) !important; font-size: 8px !important; font-weight: 850; }
.image-studio-library-card button { width: 100%; margin-top: 9px; border: 0; border-radius: 7px; padding: 7px; background: #eef2ef; color: #38423e; font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.image-studio-library-card button:hover { background: #e3f9d5; }

.image-studio-activity-grid { gap: 12px; }
.image-studio-job-list, .image-studio-review-list { padding: 0 14px 14px; }
.image-studio-job { border-radius: 13px; }
.studio-job-meta { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 9px 0; }
.studio-job-meta span { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 5px 6px; background: #f1f5f2; color: #64716c; font-size: 7px; }
.studio-job-meta svg { width: 10px; height: 10px; color: #1b8b70; }
.studio-review-gate { display: grid; gap: 8px; margin: 8px; border: 1px solid #e2e7e4; border-radius: 10px; padding: 9px; background: #f8faf8; }
.studio-review-gate-head { display: flex; justify-content: space-between; align-items: center; }
.studio-review-gate-head b { font-size: 9px; }
.studio-review-gate-head strong { color: #9b6d17; font-size: 10px; }
.studio-review-gate-head strong.ready { color: #16835f; }
.studio-review-score-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.studio-review-score-grid label { color: #69756f; font-size: 7px; }
.studio-review-score-grid label > span { display: flex; align-items: center; }
.studio-review-score-grid input { min-height: 29px; border-radius: 7px 0 0 7px; padding: 5px 7px; }
.studio-review-score-grid em { min-height: 29px; display: grid; place-items: center; border: 1px solid #cfe0df; border-left: 0; border-radius: 0 7px 7px 0; padding: 0 5px; background: #fff; color: #8a9490; font-size: 7px; font-style: normal; }
.studio-review-veto { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 6px !important; color: #8e4e45 !important; font-size: 7px !important; line-height: 1.35; }
.studio-review-veto input { width: 13px; min-height: 13px; margin: 0; }

.studio-canvas-modal { position: fixed; inset: 18px; z-index: 5000; overflow: hidden; border: 1px solid #303633; border-radius: 18px; background: #0b0d0e; color: #fff; box-shadow: 0 30px 100px rgba(0,0,0,.6); }
.studio-canvas-modal-bar { height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid #242927; background: #111415; }
.studio-canvas-modal-bar b { font-size: 12px; }
.studio-canvas-modal-bar span { color: #737d79; font-size: 8px; }
.studio-canvas-modal-bar button { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #303633; border-radius: 8px; background: #171b1c; color: #d3dad6; cursor: pointer; }
.studio-canvas-modal-bar svg { width: 14px; height: 14px; }
.studio-canvas-modal-stage { position: absolute; inset: 58px 0 0; overflow: hidden; background-color: #0c0f10; background-image: radial-gradient(#303633 1px,transparent 1px); background-size: 22px 22px; }
.studio-canvas-modal-stage > article { position: absolute; z-index: 2; width: 150px; min-height: 105px; display: grid; align-content: end; border: 1px solid #303735; border-radius: 12px; padding: 12px; background: linear-gradient(145deg,#171b1c,#111415); box-shadow: 0 14px 35px rgba(0,0,0,.34); }
.studio-canvas-modal-stage > article span, .studio-canvas-modal-stage > article b { display: block; }
.studio-canvas-modal-stage > article span { color: var(--studio-neon); font-size: 7px; letter-spacing: .12em; }
.studio-canvas-modal-stage > article b { margin-top: 5px; font-size: 10px; }
.studio-canvas-modal-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio-canvas-modal-stage > svg path { fill: none; stroke: #46504c; stroke-width: 1.5; }
.studio-canvas-composer { position: absolute; left: 50%; bottom: 24px; width: min(660px,80%); min-height: 58px; display: grid; grid-template-columns: 35px 1fr auto 38px; gap: 9px; align-items: center; transform: translateX(-50%); border: 1px solid #3a423f; border-radius: 16px; padding: 8px; background: rgba(25,29,30,.94); box-shadow: 0 20px 45px rgba(0,0,0,.4); }
.studio-canvas-composer > i { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; background: #242a28; }
.studio-canvas-composer > span { color: #7d8783; font-size: 9px; }
.studio-canvas-composer > b { color: #9ca7a2; font-size: 8px; }
.studio-canvas-composer button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--studio-neon); color: #152210; }

/* SPENE light creative system: daily work stays calm; only infinite canvas remains immersive dark. */
.image-studio-page {
  /* SPENE VI: 洁净蓝 + 温馨橙 are the only primary interface accents. */
  --studio-brand: #00aec2;
  --studio-brand-deep: #007f8d;
  --studio-brand-soft: #d9f3f6;
  --studio-brand-wash: #eef9fa;
  --studio-sun: #fabe00;
  --studio-health: #3e9e72;
  --studio-health-soft: #e3f3eb;
  --studio-research: #33398e;
  --studio-research-soft: #e8e9f6;
  --studio-service: #8a5f9f;
  --studio-service-soft: #f0e8f3;
  --studio-passion: #d85e6d;
  --studio-passion-soft: #fae6e9;
  --studio-gold: #cdb07b;
  --studio-silver: #b5b5b5;
  --studio-ink: #142426;
  --studio-muted: #6f7d79;
  --studio-line: #dce5e1;
  --studio-surface: #ffffff;
  --studio-canvas: #f4f6f2;
}

.studio-hero,
.studio-hero.is-xhs-mode {
  background:
    radial-gradient(circle at 16% 12%, rgba(0,174,194,.12), transparent 26%),
    radial-gradient(circle at 88% 78%, rgba(250,190,0,.09), transparent 24%),
    linear-gradient(145deg, #f8faf7 0%, #f0f6f3 55%, #f7f8f4 100%);
  color: var(--studio-ink);
  box-shadow: inset 0 0 0 1px rgba(12,92,96,.04);
}
.studio-hero { min-height: 570px; padding-top: 46px; padding-bottom: 38px; }
.studio-hero.is-xhs-mode { min-height: 750px; }
.studio-hero::before {
  opacity: .22;
  background-image: radial-gradient(circle, rgba(0,174,194,.22) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.studio-hero-glow.one { background: #87e4df; opacity: .22; }
.studio-hero-glow.two { background: #ffe58c; opacity: .16; }
.studio-kicker,
.studio-hero.is-xhs-mode .studio-kicker { color: var(--studio-brand-deep); }
.studio-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--studio-sun); box-shadow: 0 0 0 4px rgba(250,190,0,.14); }
.studio-hero-copy p { color: #72817d; }

.studio-task-switcher button {
  border-color: #dbe5e1;
  background: rgba(255,255,255,.78);
  color: #263634;
  box-shadow: 0 8px 24px rgba(21,57,53,.04);
}
.studio-task-switcher button:hover { border-color: rgba(0,174,194,.46); background: #fff; }
.studio-task-switcher button.active,
.studio-hero.is-xhs-mode .studio-task-switcher button.active {
  border-color: var(--studio-brand);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,174,194,.08), 0 12px 28px rgba(0,127,141,.09);
}
.studio-task-switcher button > span { background: var(--studio-brand-soft); color: var(--studio-brand-deep); }
.studio-hero.is-xhs-mode .studio-task-switcher button.active > span { color: var(--studio-brand-deep); }
.studio-task-switcher small,
.studio-task-switcher button.active small { color: #7d8b87; }

.studio-command-deck {
  border-color: #d8e3df;
  background: rgba(255,255,255,.94);
  box-shadow: 0 25px 60px rgba(24,70,64,.12), inset 0 1px #fff;
}
.studio-context-row { border-color: #e4ebe8; background: #f8faf8; }
.studio-context-row label { background: #fff; box-shadow: inset 0 0 0 1px #e5ebe8; }
.studio-context-row label > span { color: #7d8a86; }
.studio-context-row input,
.studio-context-row select { color: #21312f !important; }
.studio-context-row select option,
.studio-command-toolbar select option { color: #111; }
.studio-context-row input::placeholder { color: #a0aaa7; }
.studio-context-action { border-color: #dbe4e1; background: #fff; color: #667672; }
.studio-context-action:hover { border-color: var(--studio-brand); color: var(--studio-brand-deep); }
.studio-product-drop { border-color: #cbd9d4; background: #f8faf8; color: #31413e !important; }
.studio-product-drop:hover,
.studio-product-drop.has-image { border-color: var(--studio-brand); background: var(--studio-brand-wash); }
.studio-product-drop .image-studio-upload-preview { background: var(--studio-brand-soft); color: var(--studio-brand-deep); }
.studio-product-drop > span:last-child small { color: #87938f; }
.studio-prompt textarea { color: #1e2d2b !important; }
.studio-prompt textarea::placeholder { color: #98a39f; }
.studio-command-assets > label,
.studio-asset-trigger,
.studio-intelligence { border-color: #dfe7e3; background: #f8faf8; color: #697874; }
.studio-command-assets select { color: #4d5b58 !important; }
.studio-asset-trigger span { color: var(--studio-brand-deep); }
.studio-intelligence { border-color: #cae8e3; background: var(--studio-brand-wash); color: #667672; }
.studio-intelligence svg,
.studio-intelligence b { color: var(--studio-brand-deep); }
.studio-command-deck .image-studio-reference-picker { border-color: #dce5e1; background: #f8faf8; }
.studio-command-deck .image-studio-reference-head { border-color: #e0e7e4; background: #fff; color: #263532; }
.studio-command-deck .image-studio-reference-head small { color: #7d8a86; }
.studio-command-deck .image-studio-reference-card { border-color: #dce5e1; background: #fff; color: #283633; }
.studio-command-deck .image-studio-reference-card.active { border-color: var(--studio-brand); background: var(--studio-brand-wash); }
.studio-command-deck .image-studio-reference-empty { border-color: #dce5e1; color: #82908c; }
.studio-command-toolbar { border-color: #e1e8e5; background: #f7f9f7; }
.studio-command-toolbar label { border-color: #dce4e1; background: #fff; }
.studio-command-toolbar label svg { color: var(--studio-brand-deep); }
.studio-command-toolbar select { color: #354440 !important; }
.studio-command-toolbar .image-studio-cost-note { color: #7e8a86; }
.studio-generate-button { background: var(--studio-brand); color: #fff; box-shadow: 0 8px 24px rgba(0,174,194,.24); }
.studio-generate-button:hover { box-shadow: 0 11px 30px rgba(0,174,194,.32); }
.studio-readiness-strip { border-color: #e5ebe8; background: #fbfcfb; color: #778580; }
.studio-readiness-strip .image-studio-readiness-bar { background: #e2e8e5; }
.studio-readiness-strip[data-level="ready"] .image-studio-readiness-bar i { background: var(--studio-brand); }
.studio-readiness-strip b { color: #53615d; }
.studio-readiness-strip[data-level="ready"] em { background: var(--studio-brand-wash); color: var(--studio-brand-deep); }
.studio-business-drawer { border-color: #dfe7e3; background: #f7f9f7; }
.studio-drawer-head b { color: #20302d; }
.studio-drawer-head small { color: #7f8c88; }
.studio-drawer-head button { border-color: #d8e1dd; color: #6c7a76; }
.studio-business-drawer .image-studio-business-fields label { color: #6f7d79; }
.studio-business-drawer input,
.studio-business-drawer select,
.studio-business-drawer textarea { border-color: #d8e2de; background: #fff; color: #20302d; }

.studio-xhs-planner {
  border-color: #d9e4e0;
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 50px rgba(24,70,64,.09), inset 0 1px #fff;
}
.studio-xhs-planner-head { border-color: #e2e9e6; background: linear-gradient(90deg, rgba(0,174,194,.08), transparent 52%); }
.studio-xhs-planner-head span { color: #21312e; }
.studio-xhs-planner-head span svg { color: var(--studio-brand-deep); }
.studio-xhs-planner-head small { color: #7d8985; }
.studio-xhs-planner-grid > section { border-color: #e5ebe8; }
.studio-xhs-planner-grid header > b { background: var(--studio-brand-soft); color: var(--studio-brand-deep); }
.studio-xhs-planner-grid header > span { color: #2b3936; }
.studio-xhs-planner-grid header small { color: #82908b; }
.studio-xhs-planner .studio-xhs-switcher button,
.studio-xhs-note-types button,
.studio-xhs-cover-structures button { border-color: #e0e7e4; background: #f9faf9; color: #667571; }
.studio-xhs-planner .studio-xhs-switcher button:hover,
.studio-xhs-note-types button:hover { border-color: rgba(0,174,194,.38); color: #20302d; }
.studio-xhs-planner .studio-xhs-switcher button.active,
.studio-xhs-note-types button.active,
.studio-xhs-cover-structures button.active { border-color: var(--studio-brand); background: var(--studio-brand-wash); color: #18302f; }
.studio-xhs-cover-structures button.recommended::after { color: var(--studio-brand-deep); }
.studio-xhs-expression { border-color: #e3e9e6; color: #76837f !important; }
.studio-xhs-expression span { color: #4a5955; }
.studio-xhs-expression select { border-color: #dce4e1 !important; background: #f8faf8 !important; color: #2c3c38 !important; }
.studio-xhs-expression small { color: #87938f; }

.studio-edit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.studio-edit-grid > button { min-height: 74px; grid-template-columns: 52px minmax(0,1fr); border-color: #e0e7e3; padding: 10px; background: #fbfcfa; }
.studio-edit-grid > button:hover { border-color: #cddbd5; background: #fff; }
.studio-brand-mark { background: var(--studio-brand); color: var(--studio-sun); box-shadow: 0 7px 18px rgba(0,174,194,.22); }
.studio-topbar {
  min-height: 76px;
  grid-template-columns: 190px minmax(560px,1fr) 190px;
  padding: 0 24px;
}
.studio-product-nav {
  width: min(680px,100%);
  justify-self: center;
  gap: 7px;
  border: 1px solid #e2e9e6;
  border-radius: 16px;
  padding: 6px;
  background: #f3f6f4;
}
.studio-product-nav button {
  min-height: 42px;
  flex: 1 1 0;
  justify-content: center;
  border-radius: 11px;
  padding: 0 16px;
  font-size: 10px;
  white-space: nowrap;
}
.studio-product-nav button.active {
  background: var(--studio-brand);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,174,194,.2);
}
.studio-product-nav button.active svg { color: #fff; }
.studio-product-nav button span { background: var(--studio-sun); color: #4b3b00; }
.studio-task-switcher {
  width: min(820px,100%);
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 28px;
}
.studio-task-switcher button {
  min-width: 0;
  min-height: 62px;
  grid-template-columns: 36px minmax(0,1fr);
  column-gap: 11px;
  border-radius: 16px;
  padding: 10px 14px;
}
.studio-task-switcher button > span { width: 36px; height: 36px; border-radius: 11px; }
.studio-task-switcher button svg { width: 17px; height: 17px; }
.studio-task-switcher b { font-size: 11px; }
.studio-task-switcher small { margin-top: 2px; font-size: 8px; }
.studio-task-switcher button.active,
.studio-hero.is-xhs-mode .studio-task-switcher button.active {
  border-color: var(--studio-brand);
  background: var(--studio-brand);
  color: #fff;
  box-shadow: 0 14px 32px rgba(0,174,194,.2);
}
.studio-task-switcher button.active > span,
.studio-hero.is-xhs-mode .studio-task-switcher button.active > span {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.studio-task-switcher button.active small { color: rgba(255,255,255,.72); }
.studio-command-toolbar { grid-template-columns: minmax(190px,auto) 92px 1fr auto; }
.studio-generate-button {
  width: auto;
  min-width: 112px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}
.studio-results-section > .panel { border-radius: 20px; box-shadow: 0 16px 42px rgba(24,70,64,.07); }
.studio-topbar { background: rgba(255,255,255,.96); }
.studio-product-nav button { font-size: 11px; }
.studio-hero,
.studio-hero.is-xhs-mode {
  background:
    radial-gradient(circle at 12% 12%, rgba(0,174,194,.1), transparent 28%),
    radial-gradient(circle at 92% 86%, rgba(250,190,0,.045), transparent 20%),
    linear-gradient(135deg,#f7fbfc 0%,#edf7f8 56%,#f8fbfa 100%);
}
.studio-hero::before { opacity: .15; }
.studio-hero-copy h2 { color: #132729; font-weight: 780; }
.studio-hero-copy p { color: #647774; font-size: 13px; }
.studio-kicker { font-size: 9px; }
.studio-task-switcher b { font-size: 12px; }
.studio-task-switcher small { font-size: 9px; }
.studio-xhs-planner,
.studio-command-deck { width: min(1080px,100%); }
.studio-xhs-planner { border-color: #d5e3e3; background: rgba(255,255,255,.97); }
.studio-xhs-planner-head { min-height: 46px; padding: 0 16px; }
.studio-xhs-planner-head span { font-size: 11px; }
.studio-xhs-planner-head small { color: #70817e; font-size: 8px; }
.studio-xhs-planner-grid > section { padding: 14px; }
.studio-xhs-planner-grid header { margin-bottom: 11px; }
.studio-xhs-planner-grid header > b { width: 26px; height: 26px; font-size: 8px; }
.studio-xhs-planner-grid header > span { color: #213532; font-size: 10px; }
.studio-xhs-planner-grid header small { color: #738480; font-size: 8px; }
.studio-xhs-planner .studio-xhs-switcher button,
.studio-xhs-note-types button { min-height: 32px; font-size: 9px; }
.studio-xhs-cover-structures button { min-height: 68px; grid-template-columns: 38px minmax(0,1fr); gap: 8px; padding: 7px; }
.studio-xhs-cover-structures [data-structure-preview] { width: 38px; height: 50px; }
.studio-xhs-cover-structures button b { font-size: 8px; }
.studio-xhs-cover-structures button.recommended::after { top: 5px; right: 6px; font-size: 7px; }
.studio-xhs-expression { min-height: 44px; padding: 0 16px; font-size: 9px !important; }
.studio-xhs-expression select { min-height: 30px !important; font-size: 9px !important; }
.studio-xhs-expression small { color: #748581; font-size: 8px; }
.studio-command-deck { border-color: #d3e1e1; background: rgba(255,255,255,.98); box-shadow: 0 26px 64px rgba(17,69,67,.11), inset 0 1px #fff; }
.studio-context-row { background: #f7faf9; }
.studio-context-row label > span { color: #657672; font-size: 9px; }
.studio-context-row input,
.studio-context-row select { color: #1b302d !important; font-size: 11px !important; }
.studio-context-row input::placeholder { color: #8b9996; }
.studio-context-action { font-size: 9px; }
.studio-product-drop > span:last-child b { font-size: 10px; }
.studio-product-drop > span:last-child small { font-size: 8px; }
.studio-command-assets > label,
.studio-asset-trigger,
.studio-intelligence { min-height: 32px; font-size: 9px; }
.studio-command-assets select { font-size: 9px !important; }
.studio-command-toolbar { min-height: 62px; }
.studio-command-toolbar label { min-height: 40px; }
.studio-command-toolbar select { font-size: 10px !important; }
.studio-command-toolbar .image-studio-cost-note { font-size: 9px; }
.studio-generate-button { min-height: 44px; font-size: 11px; }
.studio-readiness-strip { min-height: 36px; font-size: 9px; }
.studio-readiness-strip b { font-size: 9px; }
.studio-readiness-strip b strong { font-size: 11px; }
.studio-section-head span,
.studio-panel-kicker { font-size: 9px; }
.studio-section-head p { font-size: 11px; }
.studio-section-head > button { font-size: 10px; }
.studio-edit-grid b { font-size: 12px; }
.studio-edit-grid small { font-size: 9px; }
.image-studio-library .panel-head h3,
.image-studio-activity-grid .panel-head h3 { font-size: 17px; }
.image-studio-library .panel-head span,
.image-studio-activity-grid .panel-head span { font-size: 10px; }
.studio-product-nav button:nth-child(1) { --studio-nav-color: var(--studio-brand); --studio-nav-soft: var(--studio-brand-soft); }
.studio-product-nav button:nth-child(2) { --studio-nav-color: var(--studio-service); --studio-nav-soft: var(--studio-service-soft); }
.studio-product-nav button:nth-child(3) { --studio-nav-color: var(--studio-health); --studio-nav-soft: var(--studio-health-soft); }
.studio-product-nav button:nth-child(4) { --studio-nav-color: var(--studio-research); --studio-nav-soft: var(--studio-research-soft); }
.studio-product-nav button svg { color: var(--studio-nav-color); }
.studio-product-nav button:hover { background: var(--studio-nav-soft); color: var(--studio-nav-color); }
.studio-product-nav button.active {
  background: var(--studio-nav-color);
  color: #fff;
  box-shadow: 0 9px 22px color-mix(in srgb,var(--studio-nav-color) 25%,transparent);
}
.studio-product-nav button.active svg { color: #fff; }
.studio-task-switcher button:nth-child(1) { --studio-task-color: var(--studio-brand); --studio-task-soft: var(--studio-brand-soft); }
.studio-task-switcher button:nth-child(2) { --studio-task-color: var(--studio-research); --studio-task-soft: var(--studio-research-soft); }
.studio-task-switcher button:nth-child(3) { --studio-task-color: var(--studio-health); --studio-task-soft: var(--studio-health-soft); }
.studio-task-switcher button:nth-child(4) { --studio-task-color: var(--studio-passion); --studio-task-soft: var(--studio-passion-soft); }
.studio-task-switcher button > span { background: var(--studio-task-soft); color: var(--studio-task-color); }
.studio-task-switcher button:hover { border-color: var(--studio-task-color); background: var(--studio-task-soft); }
.studio-task-switcher button.active,
.studio-hero.is-xhs-mode .studio-task-switcher button.active {
  border-color: var(--studio-task-color);
  background: var(--studio-task-color);
  box-shadow: 0 14px 32px color-mix(in srgb,var(--studio-task-color) 24%,transparent);
}
.studio-xhs-planner-grid > section:nth-child(1) header > b { background: var(--studio-brand-soft); color: var(--studio-brand-deep); }
.studio-xhs-planner-grid > section:nth-child(2) header > b { background: var(--studio-service-soft); color: var(--studio-service); }
.studio-xhs-planner-grid > section:nth-child(3) header > b { background: var(--studio-passion-soft); color: var(--studio-passion); }
.studio-xhs-planner .studio-xhs-switcher button.active,
.studio-xhs-note-types button.active,
.studio-xhs-cover-structures button.active {
  border-color: var(--studio-passion);
  background: var(--studio-passion-soft);
  color: #6f2933;
}
.studio-xhs-cover-structures button:nth-child(1) [data-structure-preview] { background: linear-gradient(145deg,#d9f3f6,var(--studio-brand)); }
.studio-xhs-cover-structures button:nth-child(2) [data-structure-preview] { background: linear-gradient(145deg,#f0e8f3,var(--studio-service)); }
.studio-xhs-cover-structures button:nth-child(3) [data-structure-preview] { background: linear-gradient(145deg,#fae6e9,var(--studio-passion)); }
.studio-xhs-cover-structures button:nth-child(4) [data-structure-preview] { background: linear-gradient(145deg,#e8e9f6,var(--studio-research)); }
.studio-xhs-cover-structures button:nth-child(5) [data-structure-preview] { background: linear-gradient(145deg,#e3f3eb,var(--studio-health)); }
.studio-xhs-cover-structures button:nth-child(6) [data-structure-preview] { background: linear-gradient(145deg,#fff2bf,var(--studio-sun)); }
.tool-visual.violet { background: linear-gradient(145deg,#eadff0,var(--studio-service)); }
.tool-visual.coral { background: linear-gradient(145deg,#f8dfe2,var(--studio-passion)); }
.tool-visual.mint { background: linear-gradient(145deg,#d9eee5,var(--studio-health)); }
.tool-visual.blue { background: linear-gradient(145deg,#d9f3f6,var(--studio-brand)); }
.tool-visual.amber { background: linear-gradient(145deg,#fff1bd,var(--studio-sun)); }
.tool-visual.pink { background: linear-gradient(145deg,#f7e3e7,var(--studio-passion)); }
.tool-visual.lime { background: linear-gradient(145deg,#e1f0e8,var(--studio-health)); }
.tool-visual.graphite { background: linear-gradient(145deg,#eeeeee,var(--studio-silver)); }

@media (max-width: 1180px) {
  .studio-topbar { min-height: 126px; grid-template-columns: auto 1fr; padding: 8px 18px 0; }
  .studio-product-nav { width: auto; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; margin: 0 -18px; border-width: 1px 0 0; border-radius: 0; padding: 8px 18px 10px; background: #fff; }
  .studio-topbar-actions { justify-self: end; }
  .studio-context-row { grid-template-columns: 150px 190px minmax(220px,1fr) auto; }
  .studio-xhs-planner-grid { grid-template-columns: 170px minmax(230px, .9fr) minmax(280px,1.1fr); }
  .studio-edit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 880px) {
  .studio-main { padding: 10px; }
  .studio-hero { min-height: 620px; padding: 42px 16px 30px; }
  .studio-hero.is-xhs-mode { min-height: 860px; }
  .studio-xhs-planner-grid { grid-template-columns: 1fr 1fr; }
  .studio-xhs-planner-grid > section:first-child { grid-column: 1 / -1; }
  .studio-xhs-planner .studio-xhs-switcher > div { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .studio-xhs-planner-grid > section { border-bottom: 1px solid rgba(255,255,255,.07); }
  .studio-xhs-planner-grid > section:nth-child(2) { border-right: 1px solid rgba(255,255,255,.07); }
  .studio-xhs-planner-grid > section:nth-child(3) { border-right: 0; }
  .studio-context-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-context-action { min-height: 45px; }
  .studio-command-input { grid-template-columns: 100px 1fr; }
  .studio-command-assets { padding-left: 14px; }
  .studio-feature-grid { grid-template-columns: 1fr; }
  .image-studio-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .studio-product-library-modal { padding: 0; }
  .studio-product-library-modal > section { width: 100%; height: 100vh; border: 0; border-radius: 0; }
  .studio-product-library-toolbar { grid-template-columns: 1fr; }
  .studio-product-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-product-upload-panel { grid-template-columns: 1fr; overflow: auto; }
  .studio-topbar { padding: 0 12px; }
  .studio-runtime { display: none; }
  .studio-product-nav { justify-content: flex-start; overflow-x: auto; padding-left: 10px; padding-right: 10px; }
  .studio-product-nav button { white-space: nowrap; }
  .studio-hero-copy h2 { font-size: 32px; }
  .studio-xhs-planner-head { align-items: flex-start; flex-direction: column; padding: 10px 12px; }
  .studio-xhs-planner-grid { grid-template-columns: 1fr; }
  .studio-xhs-planner-grid > section:first-child { grid-column: auto; }
  .studio-xhs-planner-grid > section { border-right: 0 !important; }
  .studio-xhs-cover-structures { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-xhs-expression { align-items: flex-start; flex-wrap: wrap; padding: 9px 12px; }
  .studio-xhs-expression small { width: 100%; margin-left: 0; }
  .studio-task-switcher { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-task-switcher button { min-width: 0; }
  .studio-context-row { grid-template-columns: 1fr; }
  .studio-command-input { grid-template-columns: 1fr; }
  .studio-product-drop { min-height: 88px; grid-template-columns: 48px 1fr; text-align: left; }
  .studio-command-assets { padding-left: 12px; }
  .studio-intelligence { width: 100%; margin-left: 0; }
  .studio-command-toolbar { grid-template-columns: minmax(150px,1fr) 88px auto; }
  .studio-command-toolbar .image-studio-cost-note { display: none; }
  .studio-readiness-strip { grid-template-columns: auto 1fr auto; }
  .studio-readiness-strip em, .studio-readiness-strip > small { display: none; }
  .studio-edit-grid { grid-template-columns: 1fr; }
  .studio-feature { grid-template-columns: 1fr; }
  .studio-feature.canvas { grid-template-columns: 1fr; }
  .studio-batch-visual, .studio-canvas-preview { display: none; }
  .image-studio-library-grid { grid-template-columns: 1fr; }
  .image-studio-library .panel-head { display: block; }
  .image-studio-library-tools { margin-top: 10px; }
}

/* Ecommerce edit is a shortcut rail: keep six production tasks on one row. */
.studio-edit-grid {
  grid-template-columns: repeat(6,minmax(132px,1fr));
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #bfdcda transparent;
}
.studio-edit-grid > button {
  min-height: 112px;
  grid-template-columns: 1fr;
  grid-template-rows: 52px auto auto;
  gap: 6px;
  align-content: start;
  justify-items: start;
  padding: 12px;
  scroll-snap-align: start;
}
.studio-edit-grid .tool-visual { grid-row: auto; }
.studio-edit-grid b { align-self: auto; }
.studio-edit-grid small {
  align-self: auto;
  margin-top: 0;
  overflow: visible;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

/* Dual visual references: product truth + company-verified creative example. */
.studio-command-input {
  grid-template-columns: 126px 126px minmax(0,1fr);
  gap: 10px;
}
.studio-reference-drop {
  min-height: 116px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px dashed #cbbbd2;
  border-radius: 13px;
  padding: 9px;
  background: #fbf8fc;
  color: #4e4054;
  text-align: center;
  cursor: pointer;
  font: inherit;
}
.studio-reference-drop:hover,
.studio-reference-drop.has-case {
  border-color: var(--studio-service);
  background: var(--studio-service-soft);
}
.studio-reference-preview {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: var(--studio-service-soft);
  color: var(--studio-service);
}
.studio-reference-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.studio-reference-preview svg { width: 18px; height: 18px; }
.studio-reference-drop > span:last-child { min-width: 0; }
.studio-reference-drop > span:last-child b,
.studio-reference-drop > span:last-child small { display: block; }
.studio-reference-drop > span:last-child b {
  max-width: 104px;
  margin-top: 6px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-reference-drop > span:last-child small { max-width: 108px; margin-top: 3px; color: #85778b; font-size: 8px; line-height: 1.35; }
.studio-command-assets { padding-left: 286px; }

@media (max-width: 880px) {
  .studio-command-input { grid-template-columns: 100px 100px minmax(0,1fr); }
  .studio-command-assets { padding-left: 228px; }
}

@media (max-width: 620px) {
  .studio-command-input { grid-template-columns: 1fr; }
  .studio-reference-drop { min-height: 88px; grid-template-columns: 48px 1fr; text-align: left; }
  .studio-reference-drop > span:last-child b { max-width: none; }
  .studio-reference-drop > span:last-child small { max-width: none; }
  .studio-command-assets { padding-left: 12px; }
}

/* Readability baseline: Chinese operational copy must remain legible after browser and screenshot scaling. */
.image-studio-page .studio-hero-copy p { color: #506662; font-size: 14px; line-height: 1.55; }
.image-studio-page .studio-kicker { color: #087f8d; font-size: 11px; font-weight: 900; }
.image-studio-page .studio-task-switcher b { font-size: 14px; line-height: 1.25; }
.image-studio-page .studio-task-switcher small {
  margin-top: 3px;
  color: #5d716d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.image-studio-page .studio-task-switcher button.active small { color: rgba(255,255,255,.96); }

.image-studio-page .studio-context-row label > span { color: #536762; font-size: 12px; font-weight: 750; }
.image-studio-page .studio-context-row input,
.image-studio-page .studio-context-row select { font-size: 13px !important; font-weight: 650; }
.image-studio-page .studio-context-row input::placeholder { color: #6f807c; }
.image-studio-page .studio-context-action { color: #526560; font-size: 12px; font-weight: 700; }
.image-studio-page .studio-product-drop > span:last-child b,
.image-studio-page .studio-reference-drop > span:last-child b { font-size: 11px; font-weight: 650; line-height: 1.3; }
.image-studio-page .studio-product-drop > span:last-child small,
.image-studio-page .studio-reference-drop > span:last-child small {
  max-width: 108px;
  color: #7a8985;
  font-size: 9px;
  font-weight: 450;
  line-height: 1.35;
}
.image-studio-page .studio-command-assets > label,
.image-studio-page .studio-asset-trigger,
.image-studio-page .studio-intelligence { color: #526560; font-size: 12px; font-weight: 650; }
.image-studio-page .studio-command-assets select { color: #314844 !important; font-size: 12px !important; }
.image-studio-page .studio-command-toolbar select { color: #263d39 !important; font-size: 13px !important; font-weight: 700; }
.image-studio-page .studio-command-toolbar .image-studio-cost-note { color: #566964; font-size: 12px; font-weight: 650; }
.image-studio-page .studio-generate-button { font-size: 13px; }
@media (min-width: 621px) {
  .image-studio-page .studio-command-toolbar { grid-template-columns: minmax(220px,250px) minmax(220px,240px) 1fr auto; }
  .image-studio-page .studio-command-toolbar .studio-generate-button { grid-column: 4; }
  .image-studio-page .studio-command-toolbar label:nth-of-type(2) select { font-size: 12px !important; font-weight: 650; }
}
.image-studio-page .studio-readiness-strip { min-height: 42px; color: #566863; font-size: 12px; line-height: 1.4; }
.image-studio-page .studio-readiness-strip b { color: #41534f; font-size: 12px; }
.image-studio-page .studio-readiness-strip b strong { font-size: 14px; }
.image-studio-page .studio-readiness-strip > small { color: #5d6e69; font-size: 12px; }
.image-studio-page .studio-command-deck.is-sku-flow .studio-context-row { grid-template-columns: minmax(180px,260px) 1fr; }
.image-studio-page .studio-command-deck.is-sku-flow .studio-context-action { justify-self: end; }
.image-studio-page .studio-command-deck.is-sku-flow .studio-command-toolbar { grid-template-columns: minmax(220px,250px) minmax(220px,240px) 1fr auto; }

.image-studio-page .studio-xhs-planner-head { min-height: 52px; }
.image-studio-page .studio-xhs-planner-head span { color: #193c38; font-size: 13px; }
.image-studio-page .studio-xhs-planner-head small { color: #536863; font-size: 12px; line-height: 1.4; }
.image-studio-page .studio-xhs-planner-grid > section { padding: 16px; }
.image-studio-page .studio-xhs-planner-grid header > b { width: 30px; height: 30px; font-size: 10px; }
.image-studio-page .studio-xhs-planner-grid header > span { color: #1b3834; font-size: 13px; }
.image-studio-page .studio-xhs-planner-grid header small { color: #5c706b; font-size: 12px; line-height: 1.35; }
.image-studio-page .studio-xhs-planner .studio-xhs-switcher button,
.image-studio-page .studio-xhs-note-types button { min-height: 38px; color: #445b56; font-size: 12px; font-weight: 650; }
.image-studio-page .studio-xhs-cover-structures button { min-height: 76px; }
.image-studio-page .studio-xhs-cover-structures button b { color: #405752; font-size: 12px; line-height: 1.35; }
.image-studio-page .studio-xhs-cover-structures button.active b { color: #263e39; }
.image-studio-page .studio-xhs-cover-structures button.recommended::after { font-size: 9px; }
.image-studio-page .studio-xhs-expression { min-height: 52px; color: #4d625d !important; font-size: 12px !important; line-height: 1.4; }
.image-studio-page .studio-xhs-expression select { color: #263d39 !important; font-size: 12px !important; font-weight: 650; }
.image-studio-page .studio-xhs-expression small { color: #596d68; font-size: 12px; }

.image-studio-page .studio-section-head span,
.image-studio-page .studio-panel-kicker { color: #596b66; font-size: 10px; }
.image-studio-page .studio-section-head p { color: #526560; font-size: 13px; line-height: 1.5; }
.image-studio-page .studio-edit-grid b { font-size: 14px; }
.image-studio-page .studio-edit-grid small { color: #566964; font-size: 12px; font-weight: 550; line-height: 1.45; }
.image-studio-page .studio-feature-copy p { color: #52645f; font-size: 13px; }
.image-studio-page .studio-feature-copy button { font-size: 12px; }
.image-studio-page .image-studio-library-tools select,
.image-studio-page .image-studio-library-tools input { font-size: 12px; }
.image-studio-page .image-studio-library-card b { font-size: 13px; }
.image-studio-page .image-studio-library-card span,
.image-studio-page .image-studio-library-card small { color: #566b66; font-size: 11px; }
.image-studio-page .studio-job-meta span,
.image-studio-page .image-studio-job-head small,
.image-studio-page .image-studio-review-note { font-size: 12px; line-height: 1.45; }

/* These are single-choice decisions, so keep them visually lighter than structure cards. */
.image-studio-page .studio-xhs-planner .studio-xhs-switcher > div,
.image-studio-page .studio-xhs-note-types { gap: 4px 16px; }
.image-studio-page .studio-xhs-planner .studio-xhs-switcher button,
.image-studio-page .studio-xhs-note-types button {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0 !important;
  border-radius: 7px;
  padding: 4px 6px;
  background: transparent !important;
  box-shadow: none !important;
  color: #536762;
  font-size: 12px;
  font-weight: 550;
  text-align: left;
}
.image-studio-page .studio-xhs-planner .studio-xhs-switcher button:hover,
.image-studio-page .studio-xhs-note-types button:hover {
  background: rgba(0,174,194,.055) !important;
  color: #213c37;
}
.image-studio-page .studio-choice-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1.5px solid #aab9b4;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #fff;
}
.image-studio-page .studio-xhs-planner .studio-xhs-switcher button.active,
.image-studio-page .studio-xhs-note-types button.active {
  background: transparent !important;
  color: #132f2a;
  font-weight: 750;
}
.image-studio-page .studio-xhs-planner .studio-xhs-switcher button.active .studio-choice-dot,
.image-studio-page .studio-xhs-note-types button.active .studio-choice-dot {
  border-color: var(--studio-brand);
  background: var(--studio-brand);
}
.image-studio-page .studio-xhs-planner .studio-xhs-switcher button b,
.image-studio-page .studio-xhs-note-types button b { font: inherit; }

/* Business settings float above the command deck instead of changing its height. */
.image-studio-page .studio-command-deck { overflow: hidden; }
.image-studio-page .studio-context-row { border-radius: 21px 21px 0 0; }
.image-studio-page .studio-readiness-strip { border-radius: 0 0 21px 21px; }
.image-studio-page .studio-context-action.is-active {
  border-color: rgba(0,174,194,.52);
  background: var(--studio-brand-wash);
  color: var(--studio-brand-deep);
}
.image-studio-page .studio-business-drawer {
  position: absolute;
  z-index: 30;
  top: 72px;
  right: 10px;
  width: min(660px, calc(100% - 20px));
  max-height: min(520px, calc(100vh - 150px));
  overflow: auto;
  border: 1px solid #d8e4df;
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,.985);
  box-shadow: 0 24px 64px rgba(30,61,55,.2), 0 2px 8px rgba(30,61,55,.08);
  animation: studio-drawer-in .16s ease-out;
}
@keyframes studio-drawer-in {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.image-studio-page .studio-business-drawer .image-studio-business-fields { gap: 12px; }
.image-studio-page .studio-drawer-head { margin-bottom: 14px; }
.image-studio-page .studio-drawer-head b { color: #18332e; font-size: 14px; }
.image-studio-page .studio-drawer-head small { color: #71827d; font-size: 11px; }
.image-studio-page .studio-drawer-head button {
  border-color: #d9e4e0;
  background: #f7faf8;
  color: #50645f;
}
.image-studio-page .studio-drawer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e4ebe8;
}
.image-studio-page .studio-drawer-actions small { color: #71827d; font-size: 11px; }
.image-studio-page .studio-drawer-actions button {
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  padding: 0 16px;
  background: var(--studio-brand);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
@media (max-width: 760px) {
  .image-studio-page .studio-business-drawer {
    top: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100vh - 100px);
  }
  .image-studio-page .studio-business-drawer .image-studio-business-fields { grid-template-columns: 1fr; }
  .image-studio-page .studio-business-drawer .image-studio-business-fields .wide { grid-column: auto; }
}

/* The drawer is portalled to body so it stays visible regardless of page scroll. */
body > .studio-business-drawer.is-floating {
  position: fixed;
  z-index: 1600;
  top: 82px;
  right: 24px;
  width: min(660px, calc(100vw - 48px));
  max-height: calc(100vh - 106px);
  overflow: auto;
  border: 1px solid #d8e4df;
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,.99);
  box-shadow: 0 28px 80px rgba(23,54,48,.24), 0 2px 10px rgba(23,54,48,.1);
  animation: studio-drawer-in .16s ease-out;
}
body > .studio-business-drawer.is-floating[hidden] { display: none; }
body > .studio-business-drawer.is-floating .image-studio-business-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
body > .studio-business-drawer.is-floating .image-studio-business-fields .wide { grid-column: span 3; }
body > .studio-business-drawer.is-floating .image-studio-business-fields label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #5d716c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
body > .studio-business-drawer.is-floating .image-studio-business-fields input,
body > .studio-business-drawer.is-floating .image-studio-business-fields select,
body > .studio-business-drawer.is-floating .image-studio-business-fields textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d3e0dc;
  border-radius: 9px;
  padding: 9px 10px;
  background: #fff;
  color: #213b36;
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body > .studio-business-drawer.is-floating .image-studio-business-fields input,
body > .studio-business-drawer.is-floating .image-studio-business-fields select { min-height: 38px; }
body > .studio-business-drawer.is-floating .image-studio-business-fields textarea {
  min-height: 68px;
  resize: vertical;
}
body > .studio-business-drawer.is-floating .image-studio-business-fields input:focus,
body > .studio-business-drawer.is-floating .image-studio-business-fields select:focus,
body > .studio-business-drawer.is-floating .image-studio-business-fields textarea:focus {
  outline: 0;
  border-color: #35aec1;
  box-shadow: 0 0 0 3px rgba(53,174,193,.12);
}
body > .studio-business-drawer.is-floating .studio-drawer-head { margin-bottom: 14px; }
body > .studio-business-drawer.is-floating .studio-drawer-head b { color: #18332e; font-size: 14px; }
body > .studio-business-drawer.is-floating .studio-drawer-head small { color: #71827d; font-size: 11px; }
body > .studio-business-drawer.is-floating .studio-drawer-head button {
  border-color: #d9e4e0;
  background: #f7faf8;
  color: #50645f;
}
body > .studio-business-drawer.is-floating .studio-drawer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e4ebe8;
}
body > .studio-business-drawer.is-floating .studio-drawer-actions small { color: #71827d; font-size: 11px; }
body > .studio-business-drawer.is-floating .studio-drawer-actions button {
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  padding: 0 16px;
  background: var(--studio-brand, #35aec1);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
@media (max-width: 760px) {
  body > .studio-business-drawer.is-floating {
    top: 68px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 84px);
  }
  body > .studio-business-drawer.is-floating .image-studio-business-fields { grid-template-columns: 1fr; }
  body > .studio-business-drawer.is-floating .image-studio-business-fields .wide { grid-column: auto; }
}

/* Prompt coach: employees describe the business need; the system supplies professional constraints. */
.image-studio-page .studio-prompt-shell {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(96px, 1fr) auto;
  overflow: hidden;
  border: 1px solid #dce7e3;
  border-radius: 14px;
  background: #fff;
}
.image-studio-page .studio-prompt-shell .studio-prompt textarea {
  min-height: 96px;
  width: 100%;
  box-sizing: border-box;
  color: #203c37 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}
.image-studio-page .studio-prompt-coach {
  display: grid;
  gap: 7px;
  border-top: 1px solid #e5ece9;
  padding: 9px 11px 10px;
  background: linear-gradient(90deg, rgba(229,248,247,.72), rgba(248,245,252,.72));
}
.image-studio-page .studio-prompt-coach > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.image-studio-page .studio-prompt-coach > div:first-child span,
.image-studio-page .studio-prompt-coach > small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #526a65;
  font-size: 11px;
  font-weight: 650;
}
.image-studio-page .studio-prompt-coach svg { width: 13px; height: 13px; color: #00aec2; }
.image-studio-page .studio-prompt-coach > div:first-child button {
  border: 1px solid rgba(0,174,194,.28);
  border-radius: 999px;
  padding: 5px 10px;
  background: #fff;
  color: #087f8d;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.image-studio-page .studio-prompt-coach > div:first-child button:hover { background: #e9fbfc; }
.image-studio-page .studio-prompt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.image-studio-page .studio-prompt-chips button {
  border: 1px solid #dce5e2;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255,255,255,.82);
  color: #4f615d;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.image-studio-page .studio-prompt-chips button:hover { border-color: #9ccfd2; color: #087f8d; }
.image-studio-page .studio-prompt-coach > small { color: #71817d; font-size: 10px; font-weight: 550; }

/* Creation sessions prioritize revision over one-shot generation. */
.image-studio-page .image-studio-job-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-studio-page .image-studio-activity-grid.has-review .image-studio-job-list { grid-template-columns: 1fr; }
.image-studio-page .image-studio-empty b,
.image-studio-page .image-studio-empty span { display: block; }
.image-studio-page .image-studio-empty b { color: #29423d; font-size: 14px; }
.image-studio-page .image-studio-empty span { color: #71837e; font-size: 12px; }
.image-studio-page .studio-revise-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(0,174,194,.3);
  border-radius: 9px;
  background: #e9f9fa;
  color: #087f8d;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.image-studio-page .studio-revise-button:hover { background: #d9f5f7; }
.image-studio-page .studio-revise-button svg { width: 14px; height: 14px; }

/* Full-screen continuous creation workspace. */
.studio-revision-modal {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(18,34,31,.42);
  backdrop-filter: blur(10px);
  color: #20332f;
  font-family: inherit;
}
.studio-revision-shell {
  width: min(1480px, 100%);
  height: min(900px, calc(100vh - 36px));
  min-height: 620px;
  display: grid;
  grid-template-rows: 68px minmax(0,1fr);
  overflow: hidden;
  border: 1px solid rgba(213,228,223,.92);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 36px 100px rgba(16,46,40,.3);
}
.studio-revision-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e1eae6;
  padding: 0 18px;
  background: rgba(255,255,255,.98);
}
.studio-revision-topbar > div:first-child { min-width: 0; display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 10px; }
.studio-revision-topbar > div:first-child span { color: #008da0; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.studio-revision-topbar > div:first-child b { overflow: hidden; color: #172c28; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.studio-revision-topbar > div:first-child small { overflow: hidden; color: #74847f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.studio-revision-topbar > div:last-child { display: flex; align-items: center; gap: 8px; }
.studio-revision-topbar button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #dce6e2;
  border-radius: 10px;
  padding: 0 11px;
  background: #f8faf9;
  color: #52645f;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.studio-revision-topbar button:last-child { width: 36px; padding: 0; }
.studio-revision-topbar svg { width: 14px; height: 14px; }
.studio-revision-body { min-height: 0; display: grid; grid-template-columns: 172px minmax(420px,1fr) 380px; }
.studio-version-rail { min-width: 0; overflow: auto; border-right: 1px solid #e1e9e6; padding: 16px 12px; background: #f8faf9; }
.studio-version-rail > header { display: grid; gap: 3px; padding: 0 3px 12px; }
.studio-version-rail > header b { font-size: 13px; }
.studio-version-rail > header small { color: #81908c; font-size: 10px; }
.studio-version-rail > div { display: grid; gap: 8px; }
.studio-version-rail button {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 6px;
  background: transparent;
  color: #475b56;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.studio-version-rail button:hover { background: #eef5f2; }
.studio-version-rail button.active { border-color: rgba(0,174,194,.36); background: #e9f8f8; color: #116f78; }
.studio-version-rail img { width: 48px; height: 52px; display: block; border-radius: 7px; object-fit: cover; background: #e5ece9; }
.studio-version-rail button span { min-width: 0; display: grid; gap: 2px; }
.studio-version-rail button b { font-size: 12px; }
.studio-version-rail button small { overflow: hidden; color: #7a8985; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.studio-revision-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 12px; overflow: hidden; padding: 18px; background: radial-gradient(circle at 50% 30%,#fff 0,#f2f7f5 58%,#e9f1ee 100%); }
.studio-revision-current { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; margin: 0; }
.studio-revision-current img { width: 100%; height: 100%; min-height: 0; display: block; object-fit: contain; filter: drop-shadow(0 16px 30px rgba(30,55,48,.14)); }
.studio-revision-current figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; color: #6e817b; font-size: 10px; }
.studio-revision-current figcaption b { color: #263f39; font-size: 12px; }
.studio-revision-compare { min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.studio-revision-compare figure { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; margin: 0; }
.studio-revision-compare img { width: 100%; height: 100%; min-height: 0; display: block; border: 1px solid #dbe5e1; border-radius: 14px; object-fit: contain; background: #fff; }
.studio-revision-compare figcaption { padding-top: 8px; color: #546963; font-size: 11px; font-weight: 750; text-align: center; }
.studio-revision-guard { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.studio-revision-guard span { min-height: 34px; display: flex; align-items: center; gap: 7px; border: 1px solid #dce5e1; border-radius: 9px; padding: 0 9px; background: rgba(255,255,255,.78); color: #6b7975; font-size: 10px; }
.studio-revision-guard span.ok { border-color: #cae8dd; color: #26745e; }
.studio-revision-guard svg { width: 13px; height: 13px; }
.studio-revision-assistant { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(80px,1fr) auto auto auto auto; gap: 12px; overflow: hidden; border-left: 1px solid #e1e9e6; padding: 16px; background: #fff; }
.studio-revision-assistant > header { display: flex; align-items: center; gap: 10px; }
.studio-revision-assistant > header > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg,#c9f4f0,#d9ddff); color: #087f8d; }
.studio-revision-assistant > header svg { width: 17px; height: 17px; }
.studio-revision-assistant > header div { display: grid; gap: 3px; }
.studio-revision-assistant > header b { font-size: 14px; }
.studio-revision-assistant > header small { color: #7b8b86; font-size: 10px; }
.studio-revision-conversation { min-height: 0; display: flex; flex-direction: column; gap: 9px; overflow: auto; border-radius: 12px; padding: 10px; background: #f6f9f7; }
.studio-revision-message { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: start; gap: 7px; }
.studio-revision-message > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: #d8eeee; color: #087f8d; font-size: 9px; font-weight: 850; }
.studio-revision-message.user > span { background: #e9e2f1; color: #7a4d96; }
.studio-revision-message p { margin: 0; border-radius: 4px 10px 10px 10px; padding: 8px 9px; background: #fff; color: #4b5d58; font-size: 11px; line-height: 1.55; }
.studio-revision-message.user p { background: #f0ebf5; }
.studio-revision-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.studio-revision-quick button { border: 1px solid #dce5e1; border-radius: 999px; padding: 6px 8px; background: #fff; color: #526560; font: inherit; font-size: 10px; cursor: pointer; }
.studio-revision-quick button:hover { border-color: #94ccd0; color: #087f8d; }
.studio-revision-input { display: grid; gap: 5px; border: 1px solid #cfdeda; border-radius: 12px; padding: 9px 10px 7px; background: #fff; box-shadow: 0 8px 24px rgba(28,69,61,.06); }
.studio-revision-input:focus-within { border-color: #35aec1; box-shadow: 0 0 0 3px rgba(53,174,193,.1); }
.studio-revision-input textarea { width: 100%; min-height: 72px; box-sizing: border-box; border: 0; padding: 0; background: transparent; color: #263d38; font: inherit; font-size: 12px; line-height: 1.55; resize: none; outline: 0; }
.studio-revision-input small { color: #81908c; font-size: 9px; }
.studio-revision-send { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.studio-revision-send label { min-width: 0; min-height: 38px; display: flex; align-items: center; gap: 6px; border: 1px solid #dce5e1; border-radius: 10px; padding: 0 9px; }
.studio-revision-send label svg { width: 13px; height: 13px; color: #087f8d; }
.studio-revision-send select { width: 100%; min-width: 0; border: 0; background: #fff; color: #3e524d; font: inherit; font-size: 10px; outline: 0; }
.studio-revision-send > button { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 0 13px; background: #35aec1; color: #fff; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.studio-revision-send > button:disabled { cursor: not-allowed; opacity: .48; }
.studio-revision-send > button svg { width: 13px; height: 13px; }
.studio-revision-final { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; border-top: 1px solid #e4ebe8; padding-top: 10px; }
.studio-revision-final > div { display: grid; gap: 5px; }
.studio-revision-final > div > small { color: #4d625c; font-size: 9px; font-weight: 750; }
.studio-revision-final label { display: flex; align-items: flex-start; gap: 6px; color: #657670; font-size: 9px; line-height: 1.35; }
.studio-revision-final input { width: 13px; height: 13px; margin: 0; accent-color: #35aec1; }
.studio-revision-final > button { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #c8ddd7; border-radius: 10px; padding: 0 12px; background: #f5faf8; color: #246853; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.studio-revision-final > button svg { width: 13px; height: 13px; }
.studio-revision-topbar button.is-active { border-color: #35aec1; background: #e9f9fb; color: #087f91; }
.studio-revision-compare.product-truth figure:first-child { background: #f7fbfa; }
.studio-revision-compare.product-truth figure:first-child img { object-fit: contain; padding: 18px; background: #fff; }
.studio-revision-guard .warn { border-color: #efc28d; background: #fff7e9; color: #925c1d; }

.studio-submit-award { border-color: #ead7a9 !important; background: #fff8e8 !important; color: #936511 !important; }
.studio-award-state { display: flex; align-items: center; gap: 6px; margin: 8px 9px 0; border-radius: 8px; padding: 7px 9px; font-size: 9px; font-weight: 750; }
.studio-award-state svg { width: 13px; height: 13px; }
.studio-award-state.pending { background: #fff8e9; color: #916313; }
.studio-award-state.awarded { background: #edf8f2; color: #237054; }
.studio-award-evidence { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 8px; }
.studio-award-evidence > div { display: grid; gap: 3px; border: 1px solid #e1e9e5; border-radius: 9px; padding: 8px; background: #f8faf9; }
.studio-award-evidence span { color: #778782; font-size: 8px; }
.studio-award-evidence b { color: #263d37; font-size: 11px; }
.studio-award-evidence > small { grid-column: 1 / -1; border-radius: 8px; padding: 7px 8px; background: #f5f0fa; color: #705a82; font-size: 8px; line-height: 1.45; }
.studio-award-decision { display: grid; grid-template-columns: minmax(0,1fr) 108px; gap: 6px; margin: 0 8px 8px; }
.studio-award-decision select,.studio-award-decision label,.studio-award-decision > input { min-height: 34px; box-sizing: border-box; border: 1px solid #dce6e2; border-radius: 8px; padding: 0 8px; background: #fff; color: #435750; font: inherit; font-size: 9px; }
.studio-award-decision label { display: flex; align-items: center; gap: 4px; }
.studio-award-decision label input { width: 100%; min-width: 0; border: 0; outline: 0; }
.studio-award-decision > input { grid-column: 1 / -1; }

.studio-award-modal { position: fixed; inset: 0; z-index: 996; display: grid; place-items: center; padding: 22px; background: rgba(17,37,33,.55); backdrop-filter: blur(14px); }
.studio-award-shell { width: min(920px,100%); max-height: calc(100vh - 44px); overflow: auto; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; background: #fff; box-shadow: 0 30px 90px rgba(12,37,31,.28); }
.studio-award-shell > header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e3ebe7; padding: 0 22px; }
.studio-award-shell > header > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px 10px; }
.studio-award-shell > header span { color: #9a6b16; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.studio-award-shell > header b { color: #1d342e; font-size: 17px; }
.studio-award-shell > header small { grid-column: 1 / -1; color: #7c8c87; font-size: 10px; }
.studio-award-shell > header button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #dbe5e1; border-radius: 10px; background: #fff; cursor: pointer; }
.studio-award-shell > header svg { width: 15px; height: 15px; }
.studio-award-body { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 22px; padding: 22px; }
.studio-award-body figure { margin: 0; overflow: hidden; border: 1px solid #dfe8e4; border-radius: 15px; background: #f4f8f6; }
.studio-award-body figure img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: contain; background: #fff; }
.studio-award-body figcaption { display: grid; gap: 4px; padding: 12px; }
.studio-award-body figcaption b { font-size: 12px; }
.studio-award-body figcaption span { color: #788985; font-size: 9px; }
.studio-award-form { min-width: 0; display: grid; align-content: start; gap: 14px; }
.studio-award-principle { display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; padding: 12px; background: linear-gradient(135deg,#fff8e5,#f6f1ff); }
.studio-award-principle > svg { width: 18px; height: 18px; flex: 0 0 auto; color: #a87313; }
.studio-award-principle div { display: grid; gap: 4px; }
.studio-award-principle b { color: #4b3d25; font-size: 11px; }
.studio-award-principle span { color: #7d715e; font-size: 9px; line-height: 1.5; }
.studio-award-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.studio-award-fields label { display: grid; gap: 5px; color: #60736d; font-size: 9px; font-weight: 750; }
.studio-award-fields label.wide { grid-column: 1 / -1; }
.studio-award-fields input { min-height: 38px; box-sizing: border-box; border: 1px solid #d8e4df; border-radius: 9px; padding: 0 10px; color: #263d37; font: inherit; font-size: 10px; outline: 0; }
.studio-award-fields input:focus { border-color: #35aec1; box-shadow: 0 0 0 3px rgba(53,174,193,.09); }
.studio-award-preview { border-radius: 9px; padding: 9px 10px; background: #eef8f6; color: #29715d; font-size: 9px; font-weight: 750; }
.studio-award-shell > footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #e3ebe7; padding: 0 22px; background: #f7faf8; }
.studio-award-shell > footer small { color: #758781; font-size: 9px; }
.studio-award-shell > footer button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 10px; padding: 0 15px; background: #b9801e; color: #fff; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.studio-award-shell > footer button svg { width: 14px; height: 14px; }
.studio-award-shell > footer button:disabled { opacity: .5; cursor: wait; }

/* The workbench should explain less and let controls carry the meaning. */
.image-studio-page .studio-hero,
.image-studio-page .studio-hero.is-xhs-mode { min-height: 0; padding-top: 34px; padding-bottom: 28px; }
.image-studio-page .studio-hero-copy p[hidden] { display: none !important; }
.image-studio-page .studio-task-switcher button { grid-template-rows: 1fr; }
.image-studio-page .studio-task-switcher button > span { grid-row: auto; }
.image-studio-page .studio-xhs-planner-grid > section { padding: 12px 14px; }
.image-studio-page .studio-xhs-planner-grid header { min-height: 20px; margin-bottom: 7px; }
.image-studio-page .studio-xhs-planner-grid header > span { font-size: 12px; }
.image-studio-page .studio-xhs-expression { min-height: 42px; }
.image-studio-page .studio-xhs-expression select { min-height: 28px !important; }
.image-studio-page .studio-prompt-shell .studio-prompt textarea { min-height: 78px; }
.image-studio-page .studio-prompt-coach { display: flex; align-items: center; gap: 6px; padding: 7px 9px; }
.image-studio-page .studio-prompt-coach > div:first-child { order: 2; margin-left: auto; }
.image-studio-page .studio-prompt-coach > div:first-child span { display: none; }
.image-studio-page .studio-prompt-chips { order: 1; flex-wrap: nowrap; overflow-x: auto; }
.image-studio-page .studio-prompt-coach > div:first-child button,
.image-studio-page .studio-prompt-chips button { white-space: nowrap; }
.image-studio-page .studio-edit-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.image-studio-page .studio-edit-grid > button { min-height: 72px; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: 1fr; align-items: center; gap: 9px; padding: 9px 11px; }
.image-studio-page .studio-edit-grid .tool-visual { width: 42px; height: 42px; }
.image-studio-page .studio-section-head { margin-bottom: 8px; }
.image-studio-page .studio-feature-copy { gap: 10px; }
.studio-library-entry { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; border: 1px solid #d8e4df; border-radius: 999px; margin-top: 16px; padding: 6px 10px 6px 8px; background: rgba(255,255,255,.9); color: #1d3532; font: inherit; text-align: left; box-shadow: 0 10px 28px rgba(22,79,72,.08); cursor: pointer; transition: .18s ease; }
.studio-library-entry > i:first-child { width: 30px; height: 30px; border-radius: 50%; padding: 7px; background: linear-gradient(145deg,#d7f6f1,#9de4d6); color: #147b70; }
.studio-library-entry > i:last-child { width: 14px; color: #70827e; }
.studio-library-entry span,.studio-library-entry b,.studio-library-entry small { display: block; }
.studio-library-entry b { font-size: 11px; }
.studio-library-entry small { margin-top: 2px; color: #70817d; font-size: 8px; font-weight: 600; }
.studio-library-entry strong { color: #147b70; }
.studio-library-entry:hover { border-color: #78cbbd; transform: translateY(-1px); box-shadow: 0 14px 32px rgba(22,79,72,.12); }
.image-studio-library-card.official { border-color: #bde1da; box-shadow: inset 0 0 0 1px rgba(0,174,194,.06); }
.image-studio-library-card.official small { min-height: 34px; line-height: 1.55; }
.image-studio-library-card.official button { background: #dff5f1; color: #126b62; }
.image-studio-library-card.official button:hover { background: #c8eee6; }

body.studio-modal-open { overflow: hidden; }
.studio-batch-modal[hidden] { display: none !important; }
.studio-batch-modal { position: fixed; inset: 0; z-index: 5150; display: grid; place-items: center; padding: 22px; background: rgba(18,34,32,.5); backdrop-filter: blur(16px); }
.studio-batch-modal > section { width: min(1120px,95vw); max-height: min(860px,92vh); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 24px; background: #f7faf9; color: #172824; box-shadow: 0 34px 110px rgba(14,45,40,.3); }
.studio-batch-modal > section > header { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 22px; border-bottom: 1px solid #e0e9e5; background: linear-gradient(120deg,#fff 0%,#effcf9 56%,#f1f4ff 100%); }
.studio-batch-modal > section > header > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
.studio-batch-modal > section > header span { color: #15968d; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.studio-batch-modal > section > header h3 { margin: 0; font-size: 22px; line-height: 1.15; }
.studio-batch-modal > section > header small { grid-column: 1 / -1; margin-top: 5px; color: #71817d; font-size: 10px; }
.studio-batch-modal > section > header > button { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #dae5e1; border-radius: 12px; background: #fff; color: #52645f; cursor: pointer; }
.studio-batch-modal > section > header > button svg { width: 16px; }
.studio-batch-body { min-height: 0; display: grid; align-content: start; gap: 12px; overflow: auto; padding: 16px 20px 20px; }
.studio-batch-step { overflow: hidden; border: 1px solid #dfe8e4; border-radius: 16px; background: #fff; }
.studio-batch-step > header { min-height: 55px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #edf1ef; }
.studio-batch-step > header > i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #dff6f1; color: #16887c; font-size: 9px; font-style: normal; font-weight: 900; }
.studio-batch-step > header > div { display: grid; gap: 2px; }
.studio-batch-step > header b { font-size: 11px; }
.studio-batch-step > header small { color: #81908c; font-size: 8px; }
.studio-batch-step > header > button { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border: 1px solid #d3e6e0; border-radius: 9px; padding: 0 10px; background: #f2faf8; color: #247267; font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.studio-batch-step > header > button svg { width: 12px; }
.studio-batch-assets { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; max-height: 205px; overflow: auto; padding: 11px; }
.studio-batch-asset { position: relative; min-width: 0; display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid #e0e7e4; border-radius: 12px; padding: 6px; background: #fbfcfc; color: #20332e; text-align: left; cursor: pointer; }
.studio-batch-asset img { width: 46px; height: 46px; display: block; object-fit: contain; border-radius: 8px; background: #f0f4f2; }
.studio-batch-asset span { min-width: 0; display: grid; gap: 3px; }
.studio-batch-asset b,.studio-batch-asset small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-batch-asset b { font-size: 9px; }
.studio-batch-asset small { color: #81908c; font-size: 8px; }
.studio-batch-asset > svg { position: absolute; top: 5px; right: 5px; width: 17px; height: 17px; display: none; border-radius: 50%; padding: 3px; background: #1ca99b; color: #fff; }
.studio-batch-asset.is-selected { border-color: #1fa99c; background: #f0fbf8; box-shadow: 0 0 0 2px rgba(31,169,156,.1); }
.studio-batch-asset.is-selected > svg { display: block; }
.studio-batch-empty { grid-column: 1 / -1; min-height: 80px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #84938f; font-size: 10px; }
.studio-batch-empty svg { width: 18px; color: #5ab7ad; }
.studio-batch-presets { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 11px; }
.studio-batch-preset { min-height: 48px; display: grid; grid-template-columns: 16px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; border: 1px solid #dee7e3; border-radius: 11px; padding: 6px 10px; background: #fbfcfc; color: #243731; text-align: left; cursor: pointer; }
.studio-batch-preset > span { grid-row: 1 / 3; width: 14px; height: 14px; align-self: center; border: 1.5px solid #aebdb8; border-radius: 50%; }
.studio-batch-preset b { font-size: 9px; }
.studio-batch-preset small { color: #82918d; font-size: 8px; }
.studio-batch-preset.is-selected { border-color: #7376d8; background: #f5f5ff; }
.studio-batch-preset.is-selected > span { border: 4px solid #7376d8; }
.studio-batch-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; padding: 11px; }
.studio-batch-fields label { display: grid; gap: 5px; color: #61736e; font-size: 8px; font-weight: 750; }
.studio-batch-fields label.wide { grid-column: 1 / -1; }
.studio-batch-fields select,.studio-batch-fields textarea { width: 100%; box-sizing: border-box; border: 1px solid #d8e4df; border-radius: 9px; padding: 0 10px; background: #fff; color: #253a34; font: inherit; font-size: 10px; outline: 0; }
.studio-batch-fields select { min-height: 36px; }
.studio-batch-fields textarea { min-height: 66px; resize: vertical; padding-top: 9px; line-height: 1.5; }
.studio-batch-fields select:focus,.studio-batch-fields textarea:focus { border-color: #25a99e; box-shadow: 0 0 0 3px rgba(37,169,158,.09); }
.studio-batch-results { overflow: hidden; border: 1px solid #dce8e4; border-radius: 16px; background: #fff; }
.studio-batch-results > header { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #edf2f0; }
.studio-batch-results > header b { font-size: 10px; }
.studio-batch-results > header span { color: #268c82; font-size: 9px; font-weight: 800; }
.studio-batch-results > div { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; padding: 11px; }
.studio-batch-result { min-width: 0; display: grid; gap: 5px; border: 1px solid #e0e7e4; border-radius: 11px; padding: 6px; background: #fafcfc; }
.studio-batch-result > div,.studio-batch-result > a { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #eef3f1; color: #4aa99f; }
.studio-batch-result img { width: 100%; height: 100%; display: block; object-fit: contain; }
.studio-batch-result svg { width: 20px; }
.studio-batch-result.is-running svg { animation: studio-spin 1s linear infinite; }
.studio-batch-result.is-failed > div { background: #fff0f0; color: #cf5f64; }
.studio-batch-result b,.studio-batch-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-batch-result b { font-size: 9px; }
.studio-batch-result small { color: #7f8e8a; font-size: 8px; }
.studio-batch-modal > section > footer { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 20px; border-top: 1px solid #dfe8e4; background: #fff; }
.studio-batch-modal > section > footer > div { display: grid; gap: 4px; }
.studio-batch-modal > section > footer b { color: #334943; font-size: 10px; }
.studio-batch-modal > section > footer label { display: flex; align-items: center; gap: 6px; color: #9a6916; font-size: 8px; }
.studio-batch-modal > section > footer input { width: 13px; height: 13px; accent-color: #21a89a; }
.studio-batch-modal > section > footer button { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 12px; padding: 0 17px; background: linear-gradient(135deg,#18aa9b,#28a4c1); color: #fff; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; box-shadow: 0 12px 28px rgba(25,161,156,.2); }
.studio-batch-modal > section > footer button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.studio-batch-modal > section > footer button svg { width: 14px; }
@keyframes studio-spin { to { transform: rotate(360deg); } }

.studio-product-library-modal[hidden] { display: none !important; }
.studio-product-library-modal { position: fixed; inset: 0; z-index: 5200; display: grid; place-items: center; padding: 24px; background: rgba(22,38,37,.46); backdrop-filter: blur(16px); }
.studio-product-library-modal > section { width: min(1120px,94vw); height: min(780px,90vh); display: grid; grid-template-rows: auto auto auto minmax(0,1fr); overflow: hidden; border: 1px solid #d9e4e0; border-radius: 24px; background: #f7faf8; color: #162623; box-shadow: 0 34px 100px rgba(21,54,50,.24); }
.studio-product-library-modal > section > header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 24px; border-bottom: 1px solid #e1e9e6; background: linear-gradient(120deg,#fff 0%,#f3fffb 58%,#eef7ff 100%); }
.studio-product-library-modal header > div:first-child span { display: block; color: #1e9e91; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.studio-product-library-modal header h3 { margin: 5px 0 0; font-size: 24px; line-height: 1.1; }
.studio-product-library-modal header > div:last-child { display: flex; align-items: center; gap: 12px; }
.studio-product-library-modal header strong { min-width: 52px; color: #6a7975; font-size: 12px; text-align: right; }
.studio-product-library-modal header button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #dce6e2; border-radius: 12px; background: #fff; color: #53635f; cursor: pointer; }
.studio-product-library-modal header button svg { width: 17px; height: 17px; }
.studio-product-library-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) auto; gap: 12px; padding: 16px 24px; }
.studio-product-library-toolbar label { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #dbe5e1; border-radius: 13px; background: #fff; }
.studio-product-library-toolbar label svg { width: 17px; height: 17px; color: #82918d; }
.studio-product-library-toolbar input { width: 100%; border: 0; outline: 0; background: transparent; color: #162623; font-size: 13px; }
.studio-product-library-toolbar > button { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 13px; padding: 0 18px; background: #21aabd; color: #fff; font-size: 12px; font-weight: 750; cursor: pointer; box-shadow: 0 10px 24px rgba(33,170,189,.22); }
.studio-product-library-toolbar > button.active { background: #8d62b1; }
.studio-product-library-toolbar > button svg { width: 16px; height: 16px; }
.studio-product-upload-panel[hidden] { display: none !important; }
.studio-product-upload-panel { display: grid; grid-template-columns: 1.2fr .9fr .8fr 1.25fr auto; align-items: end; gap: 10px; margin: 0 24px 14px; padding: 14px; border: 1px solid #dddcf0; border-radius: 16px; background: #faf8ff; }
.studio-product-upload-panel > label { display: grid; gap: 6px; color: #66736f; font-size: 9px; font-weight: 700; }
.studio-product-upload-panel input { min-width: 0; height: 39px; border: 1px solid #d9e2de; border-radius: 10px; padding: 0 11px; background: #fff; color: #172724; font-size: 12px; outline: 0; }
.studio-product-upload-panel input:focus { border-color: #30aebe; box-shadow: 0 0 0 3px rgba(48,174,190,.1); }
.studio-product-upload-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.studio-product-upload-file > span { height: 39px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center; border: 1px dashed #b8cbc5; border-radius: 10px; padding: 4px 10px; background: #fff; cursor: pointer; }
.studio-product-upload-file svg { grid-row: 1 / 3; width: 17px; height: 17px; color: #269eae; }
.studio-product-upload-file b { align-self: end; color: #2b3d39; font-size: 10px; }
.studio-product-upload-file small { align-self: start; color: #8a9692; font-size: 8px; }
.studio-product-upload-panel > button { height: 39px; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 10px; padding: 0 15px; background: #8d62b1; color: #fff; font-size: 11px; font-weight: 750; cursor: pointer; }
.studio-product-upload-panel > button:disabled { opacity: .55; cursor: wait; }
.studio-product-upload-panel > button svg { width: 15px; height: 15px; }
.studio-product-library-grid { min-height: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-content: start; gap: 14px; overflow: auto; padding: 4px 24px 28px; }
.studio-product-asset-card { position: relative; display: grid; gap: 9px; border: 1px solid #dbe5e1; border-radius: 16px; padding: 8px; background: #fff; color: #1a2b27; text-align: left; cursor: pointer; transition: .18s ease; }
.studio-product-asset-card:hover { transform: translateY(-2px); border-color: #84cbd0; box-shadow: 0 12px 30px rgba(25,72,68,.1); }
.studio-product-asset-card.is-selected { border-color: #20a7b7; box-shadow: 0 0 0 3px rgba(32,167,183,.11); }
.studio-product-asset-card > svg { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; display: none; border-radius: 50%; padding: 4px; background: #1aa7b7; color: #fff; }
.studio-product-asset-card.is-selected > svg { display: block; }
.studio-product-asset-image { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 11px; background: #f1f5f3; }
.studio-product-asset-image img { width: 100%; height: 100%; object-fit: contain; }
.studio-product-asset-image em { position: absolute; left: 7px; bottom: 7px; border-radius: 999px; padding: 4px 7px; font-size: 8px; font-style: normal; font-weight: 800; backdrop-filter: blur(8px); }
.studio-product-asset-image em.passed { background: rgba(223,252,239,.94); color: #177753; }
.studio-product-asset-image em.review { background: rgba(255,244,208,.94); color: #8b6216; }
.studio-product-asset-meta { min-width: 0; display: grid; gap: 3px; padding: 0 3px 4px; }
.studio-product-asset-meta b,.studio-product-asset-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-product-asset-meta b { font-size: 12px; }
.studio-product-asset-meta small { color: #85918e; font-size: 9px; }
.studio-product-assets-empty { grid-column: 1 / -1; min-height: 320px; display: grid; place-items: center; align-content: center; gap: 7px; color: #8a9793; }
.studio-product-assets-empty svg { width: 38px; height: 38px; color: #79bdc4; }
.studio-product-assets-empty b { color: #3b4c48; font-size: 14px; }
.studio-product-assets-empty span { font-size: 10px; }

@media (max-width: 1120px) {
  .studio-product-library-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .studio-product-upload-panel { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-product-upload-panel > button { grid-column: 1 / -1; justify-content: center; }
  .main:has(#image-studio.active) > .topbar,
  .main:has(#image-studio.active) > .content { min-width: 0 !important; }
  .main:has(#image-studio.active) > .content { width: 100%; }
  .image-studio-page .studio-context-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .image-studio-page .studio-xhs-planner:not(.is-inner-page) .studio-xhs-planner-grid { grid-template-columns: 170px minmax(0, 1fr); }
  .image-studio-page .studio-xhs-planner:not(.is-inner-page) .studio-xhs-planner-grid > section:last-child { grid-column: 1 / -1; }
  .studio-revision-body { grid-template-columns: 132px minmax(360px,1fr) 340px; }
  .studio-version-rail button { grid-template-columns: 40px minmax(0,1fr); }
  .studio-version-rail img { width: 40px; height: 46px; }
}
@media (max-width: 860px) {
  .studio-batch-assets,.studio-batch-results > div { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .studio-revision-modal { padding: 0; }
  .studio-revision-shell { width: 100%; height: 100vh; min-height: 0; border: 0; border-radius: 0; }
  .studio-revision-topbar > div:first-child { grid-template-columns: 1fr; gap: 2px; }
  .studio-revision-topbar > div:first-child span,
  .studio-revision-topbar > div:first-child small { display: none; }
  .studio-revision-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px,1fr) auto; overflow: auto; }
  .studio-version-rail { overflow-x: auto; border-right: 0; border-bottom: 1px solid #e1e9e6; padding: 10px 12px; }
  .studio-version-rail > header { display: none; }
  .studio-version-rail > div { display: flex; }
  .studio-version-rail button { min-width: 130px; }
  .studio-revision-stage { min-height: 440px; }
  .studio-revision-assistant { min-height: 620px; border-left: 0; border-top: 1px solid #e1e9e6; }
  .studio-award-body { grid-template-columns: 190px minmax(0,1fr); }
  .image-studio-review-list { grid-template-columns: 1fr; }
  .image-studio-review-list .image-studio-job { display: block; }
  .image-studio-page .studio-edit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .studio-batch-modal { padding: 0; }
  .studio-batch-modal > section { width: 100%; max-height: 100vh; border: 0; border-radius: 0; }
  .studio-batch-assets,.studio-batch-results > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-batch-fields,.studio-batch-presets { grid-template-columns: 1fr; }
  .studio-batch-fields label.wide { grid-column: auto; }
  .image-studio-page .image-studio-job-list { grid-template-columns: 1fr; }
  .image-studio-page .studio-prompt-coach > div:first-child { align-items: flex-start; }
  .studio-revision-guard { grid-template-columns: 1fr; }
  .studio-revision-compare { grid-template-columns: 1fr; }
  .studio-award-modal { padding: 0; }
  .studio-award-shell { max-height: 100vh; border-radius: 0; }
  .studio-award-body { grid-template-columns: 1fr; }
  .studio-award-body figure { display: none; }
  .studio-award-fields { grid-template-columns: 1fr; }
  .studio-award-fields label.wide { grid-column: auto; }
  .image-studio-page .studio-prompt-coach { display: grid; }
  .image-studio-page .studio-prompt-coach > div:first-child { margin-left: 0; }
  .image-studio-page .studio-prompt-chips { flex-wrap: wrap; }
  .image-studio-page .studio-edit-grid { grid-template-columns: 1fr; }
}

/* 小红书封面/内页双交付：内页信息必须在生成前明确，不让模型自由生成中文。 */
.studio-xhs-footer { display: grid; grid-template-columns: auto minmax(360px, 1fr); align-items: stretch; border-top: 1px solid #e3e9e6; }
.studio-xhs-footer .studio-xhs-expression { border-top: 0; }
.studio-xhs-inner-copy { min-width: 0; display: grid !important; grid-template-columns: auto minmax(220px, 1fr) auto !important; align-items: center; gap: 9px; border-left: 1px solid #e3e9e6; padding: 7px 13px; color: #4a5955 !important; font-size: 10px !important; font-weight: 700; }
.studio-xhs-inner-copy[hidden] { display: none !important; }
.studio-xhs-inner-copy textarea { min-height: 38px !important; resize: vertical; border: 1px solid #dce4e1 !important; border-radius: 8px !important; padding: 8px 9px !important; background: #f8faf8 !important; color: #2c3c38 !important; font-size: 10px !important; line-height: 1.45; }
.studio-xhs-inner-copy small { color: #87938f; font-size: 9px; font-weight: 500; white-space: nowrap; }
@media (max-width: 860px) {
  .studio-xhs-footer { grid-template-columns: 1fr; }
  .studio-xhs-inner-copy { grid-template-columns: 1fr !important; border-left: 0; border-top: 1px solid #e3e9e6; }
  .studio-xhs-inner-copy small { white-space: normal; }
}

.studio-detail-template-head { justify-content: space-between; }
.studio-detail-template-head > div:first-child { min-width: 0; display: flex; align-items: center; gap: 10px; }
.studio-detail-deliverables { display: flex; align-items: center; gap: 6px; }
.studio-detail-deliverables button { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dce5e2; border-radius: 999px; padding: 0 11px; background: #f8faf9; color: #53635f; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.studio-detail-deliverables button.active { border-color: #24adbc; background: #e9f8fa; color: #126a75; }
.studio-detail-deliverables .studio-choice-dot { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; }
.studio-detail-deliverables button.active .studio-choice-dot { border: 2px solid #fff; background: #24adbc; box-shadow: 0 0 0 1px #24adbc; }
.studio-command-toolbar .image-studio-cost-note.is-high-cost { border: 1px solid #f0d79e; border-radius: 999px; padding: 5px 9px; background: #fff8e7; color: #8a6418; }
.studio-detail-module-copy { display: grid !important; grid-template-columns: auto minmax(320px,1fr) auto !important; align-items: center; gap: 10px; border-top: 1px solid #e3e9e6; padding: 9px 13px; color: #435753 !important; font-size: 10px !important; font-weight: 700; }
.studio-detail-module-copy[hidden] { display: none !important; }
.studio-detail-module-copy textarea { min-height: 42px !important; resize: vertical; border: 1px solid #dce4e1 !important; border-radius: 8px !important; padding: 8px 10px !important; background: #f8faf8 !important; color: #2c3c38 !important; font-size: 10px !important; line-height: 1.45; }
.studio-detail-module-copy small { color: #7c8b87; font-size: 9px; font-weight: 500; white-space: nowrap; }
@media (max-width: 860px) {
  .studio-detail-template-head { align-items: flex-start; flex-direction: column; padding: 9px 13px; }
  .studio-detail-module-copy { grid-template-columns: 1fr !important; }
  .studio-detail-module-copy small { white-space: normal; }
}