:root {
  --canvas: #f6f4ed;
  --paper: #fffefa;
  --ink: #193c35;
  --muted: #7e8982;
  --line: #e7e8df;
  --teal: #1f5147;
  --teal-2: #327568;
  --mint: #e7f0eb;
  --orange: #dc8054;
  --orange-pale: #fbede4;
  --shadow: 0 10px 36px rgba(31, 58, 48, 0.07);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  color: var(--ink);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--canvas);
  min-width: 320px;
  font-size: 14px;
  line-height: 1.5;
}
.app-shell {
  min-height: 100vh;
}
.sidebar {
  width: 248px;
  position: fixed;
  inset: 0 auto 0 0;
  background: #fbfaf5;
  border-right: 1px solid var(--line);
  padding: 25px 16px 18px;
  display: flex;
  flex-direction: column;
  z-index: 5;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  padding: 0 10px 39px;
}
.brand-mark {
  width: 39px;
  height: 39px;
  border-radius: 13px;
  background: var(--teal);
  color: #fbf3dd;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 700;
  box-shadow: 0 6px 14px #1f514733;
}
.brand-copy {
  display: grid;
  gap: 1px;
}
.brand-copy strong {
  font-size: 18px;
  letter-spacing: 0.06em;
}
.brand-copy small {
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #82918a;
}
.workspace-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #a1a79e;
  padding: 0 12px 12px;
}
.main-nav {
  display: grid;
  gap: 5px;
}
.nav-item {
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  color: #64736b;
  font:
    500 13px "DM Sans",
    "Noto Sans SC",
    sans-serif;
  cursor: pointer;
  transition: 0.2s;
}
.help-nav-link { text-decoration: none; }
.nav-item:hover {
  background: #f2f1e9;
  color: var(--ink);
}
.nav-item.active {
  background: var(--mint);
  color: var(--teal);
  font-weight: 700;
}
.nav-icon {
  width: 20px;
  text-align: center;
  font-size: 18px;
  color: #74887e;
}
.nav-item.active .nav-icon {
  color: var(--teal-2);
}
.nav-shortcut,
.nav-count {
  margin-left: auto;
  color: #a0aaa1;
  font-size: 10px;
}
.sidebar-bottom {
  margin-top: auto;
}
.provider-card {
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fffefa;
  margin-bottom: 14px;
}
.status-dot {
  width: 8px;
  height: 8px;
  background: #6da989;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #e4f1e9;
}
.provider-card div,
.sidebar-user > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.provider-card strong,
.sidebar-user strong {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-card small,
.sidebar-user small {
  font-size: 9px;
  color: var(--muted);
}
.provider-arrow {
  margin-left: auto;
  color: #a4ada4;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  border-top: 1px solid var(--line);
}
.avatar-small,
.top-avatar {
  display: grid;
  place-items: center;
  background: #e3ede5;
  color: var(--teal);
  font-weight: 700;
  border-radius: 50%;
}
.avatar-small {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.more {
  margin-left: auto;
  color: #82918a;
}
.main-area {
  margin-left: 248px;
  min-height: 100vh;
}
.topbar {
  height: 66px;
  padding: 0 42px;
  border-bottom: 1px solid #e6e7df;
  background: #f8f7f1cc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 4;
  backdrop-filter: blur(14px);
}
.breadcrumbs {
  font-size: 12px;
  color: #9aa39b;
  display: flex;
  gap: 10px;
  align-items: center;
}
.breadcrumbs strong {
  font-weight: 600;
  color: #40594f;
}
.crumb-divider {
  color: #c3c7bf;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 17px;
}
.service-pill {
  font-size: 10px;
  color: #587166;
  display: flex;
  gap: 7px;
  align-items: center;
}
.service-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #77ac8c;
}
.icon-button {
  width: 25px;
  height: 25px;
  border: 1px solid #d9dfd8;
  border-radius: 50%;
  background: transparent;
  color: #687c71;
  font-size: 12px;
  cursor: pointer;
}
.top-avatar {
  width: 29px;
  height: 29px;
  font-size: 11px;
}
.mobile-menu {
  display: none;
}
.page-content {
  max-width: 1440px;
  margin: auto;
  padding: 33px 42px 64px;
}
.eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--orange);
  font-weight: 700;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 25px;
  gap: 20px;
}
.page-heading h1 {
  font-size: 28px;
  letter-spacing: -0.04em;
  margin: 7px 0 5px;
  color: #173d35;
}
.page-heading p {
  font-size: 12px;
  color: #829087;
  margin: 0;
  line-height: 1.7;
}
.heading-actions {
  display: flex;
  gap: 9px;
}
.button {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 15px;
  font:
    600 11px "DM Sans",
    "Noto Sans SC",
    sans-serif;
  cursor: pointer;
  transition:
    transform 0.18s,
    background 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.button:hover {
  transform: translateY(-1px);
}
.button-primary {
  background: var(--teal);
  color: white;
  box-shadow: 0 5px 12px #1f514722;
}
.button-primary:hover {
  background: #286558;
}
.button-secondary {
  background: #fffefa;
  color: #4c6459;
  border-color: #dfe4db;
}
.button-soft {
  background: #edf3ed;
  color: #37685a;
}
.button-danger {
  background: #fff0ea;
  color: #b65237;
}
.button-small {
  padding: 7px 10px;
  font-size: 10px;
}
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
  gap: 19px;
  align-items: start;
}
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 4px 18px #29433408;
}
.form-panel {
  padding: 21px 22px;
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
}
.step-number {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  background: #e8f0ea;
  border-radius: 7px;
  color: #397366;
  font-weight: 700;
  font-size: 10px;
}
.panel-title h2 {
  font-size: 13px;
  margin: 0;
  font-weight: 700;
}
.panel-title p {
  font-size: 10px;
  color: #98a199;
  margin: 3px 0 0;
}
.field-label {
  font-size: 10px;
  color: #64766c;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.family-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.family-option {
  background: #fffefa;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 9px;
  text-align: left;
  cursor: pointer;
  min-height: 80px;
  transition: 0.18s;
  position: relative;
  color: var(--ink);
}
.family-option:hover {
  border-color: #9cbaaa;
}
.family-option.selected {
  border: 1.5px solid #3e8271;
  background: #f1f7f2;
  box-shadow: 0 0 0 2px #dcece3;
}
.family-option strong {
  font-size: 11px;
  display: block;
  margin: 7px 0 3px;
}
.family-option small {
  font-size: 9px;
  color: #87948b;
}
.family-glyph {
  font-size: 17px;
  letter-spacing: 2px;
  color: #578577;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.field {
  margin: 14px 0;
}
.select,
input[type="text"],
input[type="number"],
textarea {
  font:
    11px "DM Sans",
    "Noto Sans SC",
    sans-serif;
  color: #355146;
  background: #fffefa;
  border: 1px solid #dfe5dc;
  border-radius: 7px;
  padding: 10px 11px;
  outline: none;
  width: 100%;
  transition: 0.2s;
}
.select:focus,
input:focus,
textarea:focus {
  border-color: #75a394;
  box-shadow: 0 0 0 3px #e6f0e9;
}
.visual-select {
  position: relative;
  width: 100%;
  z-index: 4;
}
.visual-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 5px 9px;
  color: #355146;
  background: #fffefa;
  border: 1px solid #dfe5dc;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
}
.visual-select-trigger:focus {
  outline: none;
  border-color: #75a394;
  box-shadow: 0 0 0 3px #e6f0e9;
}
.bag-option-image {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 6px;
  object-fit: contain;
  background: #f5f2eb;
}
.bag-option-image.unavailable { visibility: hidden; }
.bag-option-placeholder {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 6px;
  color: #73877c;
  background: #edf2ed;
  font-size: 10px;
}
.visual-select-current {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font: 600 11px "DM Sans", "Noto Sans SC", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visual-select-chevron {
  color: #789287;
  font-size: 15px;
  line-height: 1;
}
.visual-select-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: min(100%, 320px);
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  background: #fffefa;
  border: 1px solid #dfe5dc;
  border-radius: 9px;
  box-shadow: 0 14px 30px #193c3520;
  z-index: 20;
}
.visual-select-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 7px;
  color: #355146;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.visual-select-option:hover,
.visual-select-option.selected {
  background: #edf4ef;
}
.visual-select-option-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.visual-select-option-copy strong {
  overflow: hidden;
  font: 600 11px "DM Sans", "Noto Sans SC", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visual-select-option-copy small {
  overflow: hidden;
  color: #87948b;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 10px;
}
.mode-segment {
  display: flex;
  background: #f0f1eb;
  padding: 3px;
  border-radius: 7px;
  gap: 2px;
}
.mode-segment button {
  border: 0;
  background: transparent;
  color: #849087;
  padding: 6px 10px;
  border-radius: 5px;
  font:
    600 9px "DM Sans",
    "Noto Sans SC",
    sans-serif;
  cursor: pointer;
}
.mode-segment button.active {
  background: white;
  color: #39685c;
  box-shadow: 0 1px 4px #193c3512;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.detail-cell {
  border: 1px solid #e6e9e1;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fffefa;
}
.detail-cell .field-label {
  margin-bottom: 5px;
}
.detail-cell .select {
  padding: 7px 8px;
  border: 0;
  background: #f8f8f3;
  font-size: 10px;
}
.role-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.05fr;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}
.role-row .field {
  margin: 0;
}
.role-row label {
  display: block;
  font-size: 9px;
  color: #87938b;
  margin-bottom: 5px;
}
.role-row .select {
  font-size: 10px;
  padding: 8px;
}
.character-bind {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 11px 0 2px;
}
.character-bind span {
  font-size: 10px;
  color: #708278;
}
.character-bind select {
  max-width: 210px;
  padding: 8px;
}
.advanced-toggle {
  border: 0;
  background: transparent;
  color: #4f7c6e;
  font-size: 10px;
  padding: 10px 0;
  cursor: pointer;
}
.advanced-fields {
  border-top: 1px solid var(--line);
  padding-top: 7px;
}
.generate-panel {
  padding: 20px;
  position: sticky;
  top: 86px;
}
.preview-placeholder {
  height: 208px;
  border-radius: 9px;
  background: linear-gradient(140deg, #e5ece4, #f4e9da);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #6d877a;
}
.preview-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 11px;
  padding: 15px 20px;
}
.person-shape {
  position: relative;
  width: 39px;
  height: 110px;
  border-radius: 22px 22px 10px 10px;
  background: #8ba99b;
  opacity: 0.72;
}
.person-shape:before {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  background: #d5ad8b;
  border-radius: 50%;
  top: -25px;
  left: 2px;
}
.person-shape:nth-child(2) {
  height: 124px;
  width: 44px;
  background: #d1a48b;
}
.person-shape:nth-child(2):before {
  background: #d8b696;
}
.person-shape:nth-child(3) {
  height: 83px;
  width: 31px;
  background: #dfb57e;
}
.person-shape:nth-child(3):before {
  width: 29px;
  height: 29px;
  top: -22px;
  left: 1px;
}
.preview-tag {
  position: absolute;
  top: 11px;
  left: 12px;
  padding: 5px 7px;
  background: #ffffffa8;
  border: 1px solid #ffffff9e;
  border-radius: 5px;
  font-size: 8px;
  color: #60756a;
  backdrop-filter: blur(5px);
}
.preview-label {
  position: absolute;
  bottom: 10px;
  right: 11px;
  background: #ffffffb7;
  color: #6c7d72;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 8px;
}
.output-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}
.output-row strong {
  font-size: 11px;
}
.output-row small {
  display: block;
  color: #96a097;
  font-size: 9px;
  margin-top: 3px;
}
.count-options {
  display: flex;
  gap: 5px;
}
.count-options button {
  background: white;
  border: 1px solid #e1e6df;
  color: #78867d;
  width: 31px;
  height: 28px;
  border-radius: 6px;
  font:
    600 10px "DM Sans",
    "Noto Sans SC",
    sans-serif;
  cursor: pointer;
}
.count-options button.active {
  color: white;
  background: var(--teal);
  border-color: var(--teal);
}
.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.quality-choice {
  border: 1px solid #e5e7df;
  border-radius: 7px;
  padding: 8px;
  background: #fffefa;
  cursor: pointer;
  text-align: left;
}
.quality-choice strong {
  font-size: 9px;
  color: #576f64;
  display: block;
}
.quality-choice small {
  font-size: 8px;
  color: #a0a79f;
  display: block;
  margin-top: 3px;
}
.quality-choice.selected {
  border-color: #70a08f;
  background: #f0f7f2;
}
.generate-button {
  width: 100%;
  height: 41px;
  margin-top: 16px;
  font-size: 11px;
}
.fineprint {
  text-align: center;
  font-size: 8px;
  color: #a0a79d;
  margin: 9px 0 0;
}
.result-section {
  margin-top: 22px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 11px;
}
.section-heading h2 {
  font-size: 13px;
  margin: 0;
}
.section-heading small {
  color: #9aa39a;
  font-size: 9px;
}
.results-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.result-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fffefa;
  min-width: 0;
}
.result-image {
  aspect-ratio: 4/3;
  background: linear-gradient(140deg, #e6eee5, #f0e3d5);
  position: relative;
  overflow: hidden;
}
.result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.result-image .placeholder-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #799184;
  font-size: 25px;
}
.result-meta {
  padding: 9px;
}
.result-meta strong {
  font-size: 9px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-meta small {
  font-size: 8px;
  color: #98a199;
}
.card-actions {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}
.text-action {
  font-size: 8px;
  padding: 4px 6px;
  background: #f3f5ef;
  border: 0;
  border-radius: 4px;
  color: #5c7368;
  cursor: pointer;
}
.task-card {
  margin-top: 14px;
  border: 1px solid #dce9df;
  background: #f4f8f3;
  border-radius: 9px;
  padding: 11px;
  display: flex;
  gap: 9px;
  align-items: center;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #d3e4d9;
  border-top-color: #44816c;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.task-card strong {
  font-size: 10px;
}
.task-card small {
  display: block;
  color: #829187;
  font-size: 9px;
  margin-top: 3px;
}
.empty-state {
  border: 1px dashed #d9e1d8;
  background: #fafbf7;
  border-radius: 10px;
  padding: 26px;
  text-align: center;
  color: #87958c;
  font-size: 10px;
}
.empty-icon {
  font-size: 24px;
  color: #9ab3a4;
  margin-bottom: 7px;
}
.character-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}
.search-box {
  max-width: 300px;
  position: relative;
  flex: 1;
}
.search-box input {
  padding-left: 32px;
}
.search-box span {
  position: absolute;
  left: 11px;
  top: 10px;
  color: #99a39a;
}
.character-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
.character-card {
  overflow: hidden;
}
.character-cover {
  height: 145px;
  background: linear-gradient(145deg, #e4ece4, #f4e6d6);
  position: relative;
  display: grid;
  place-items: center;
  color: #688477;
}
.character-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.character-monogram {
  font-size: 36px;
  font-weight: 700;
  opacity: 0.55;
}
.character-cover .active-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fffefaee;
  border-radius: 20px;
  padding: 5px 8px;
  color: #397363;
  font-size: 8px;
  font-weight: 700;
}
.character-info {
  padding: 13px;
}
.character-info h3 {
  font-size: 12px;
  margin: 0 0 4px;
}
.character-info p {
  font-size: 9px;
  color: #8a978e;
  line-height: 1.6;
  margin: 0;
  min-height: 28px;
}
.character-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 9px 0;
}
.tag {
  background: #eef3ed;
  color: #648074;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 8px;
}
.character-card-actions {
  display: flex;
  gap: 5px;
  border-top: 1px solid #eef0e9;
  padding-top: 9px;
}
.history-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
}
.filter-chip {
  background: #fffefa;
  border: 1px solid #e0e5dd;
  border-radius: 20px;
  padding: 7px 11px;
  font-size: 9px;
  color: #6f8075;
  cursor: pointer;
}
.filter-chip.active {
  background: #e9f1eb;
  color: #37695a;
  border-color: #d6e5d9;
}
.history-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  color: #88968d;
  font-size: 10px;
}
.pagination button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffefa;
  padding: 6px 10px;
  cursor: pointer;
  color: #536d60;
}
.toast-region {
  position: fixed;
  bottom: 20px;
  right: 22px;
  z-index: 20;
  display: grid;
  gap: 8px;
}
.toast {
  padding: 11px 15px;
  background: #204e43;
  color: white;
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 11px;
  animation: toast-in 0.2s ease;
}
.toast.error {
  background: #9f4d38;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: #172c25a6;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.dialog {
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 20px 80px #10231c4a;
  width: min(600px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 21px;
}
.dialog.wide {
  width: min(850px, 100%);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dialog-head h2 {
  margin: 0;
  font-size: 16px;
}
.dialog-close {
  border: 0;
  background: #f0f2eb;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: #667a6e;
  cursor: pointer;
}
.dialog-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.dialog-form .field {
  margin: 0;
}
.dialog-form .span-2 {
  grid-column: span 2;
}
.dialog-form textarea {
  resize: vertical;
  min-height: 70px;
}
.upload-box {
  border: 1px dashed #cbd9ce;
  border-radius: 9px;
  padding: 15px;
  text-align: center;
  color: #789086;
  font-size: 10px;
  background: #f8faf6;
}
.upload-box input {
  margin-top: 8px;
  font-size: 9px;
  max-width: 100%;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 17px;
}
.recipe-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 17px;
}
.recipe-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 9px;
  background: #e8eee7;
}
.recipe-block {
  margin-bottom: 13px;
}
.recipe-block h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #8b9a90;
  margin: 0 0 6px;
}
.recipe-block pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: #f4f5ef;
  border-radius: 7px;
  padding: 10px;
  font: 9px/1.6 monospace;
  color: #526b60;
  margin: 0;
}
.skeleton {
  background: linear-gradient(90deg, #edf0e9 25%, #f6f7f2 50%, #edf0e9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.loading-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.loading-card {
  height: 218px;
}
.inline-error {
  padding: 18px;
  border: 1px solid #f0d7cc;
  background: #fff6f0;
  color: #a5543e;
  border-radius: 9px;
  font-size: 11px;
}
.helper-text {
  font-size: 9px;
  color: #98a49b;
  line-height: 1.6;
}
.subsection-title {
  font-size: 11px;
  font-weight: 700;
  margin: 17px 0 9px;
  color: #4f695e;
}
.divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}
@media (max-width: 1100px) {
  .sidebar {
    width: 218px;
  }
  .main-area {
    margin-left: 218px;
  }
  .page-content {
    padding-left: 27px;
    padding-right: 27px;
  }
  .topbar {
    padding: 0 27px;
  }
  .studio-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .character-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .sidebar {
    transform: translateX(-100%);
    transition: 0.25s;
    width: 250px;
    box-shadow: var(--shadow);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-area {
    margin-left: 0;
  }
  .mobile-menu {
    display: block;
    border: 0;
    background: transparent;
    color: #496458;
    font-size: 17px;
    cursor: pointer;
  }
  .topbar {
    justify-content: flex-start;
    gap: 14px;
    padding: 0 18px;
  }
  .top-actions {
    margin-left: auto;
    gap: 10px;
  }
  .page-content {
    padding: 24px 18px 50px;
  }
  .studio-grid {
    grid-template-columns: 1fr;
  }
  .generate-panel {
    position: static;
  }
  .preview-placeholder {
    height: 180px;
  }
  .history-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .page-content {
    padding: 20px 13px 40px;
  }
  .topbar {
    height: 56px;
    padding: 0 13px;
  }
  .service-pill {
    display: none;
  }
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 18px;
  }
  .page-heading h1 {
    font-size: 24px;
  }
  .heading-actions {
    width: 100%;
  }
  .family-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .family-option {
    min-height: 73px;
  }
  .field-row {
    gap: 8px;
  }
  .form-panel,
  .generate-panel {
    padding: 15px;
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .role-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
  }
  .role-row .select {
    padding: 7px 4px;
    font-size: 9px;
  }
  .character-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .character-cover {
    height: 110px;
  }
  .character-info {
    padding: 10px;
  }
  .history-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .results-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .dialog-form {
    grid-template-columns: 1fr;
  }
  .dialog-form .span-2 {
    grid-column: auto;
  }
  .recipe-layout {
    grid-template-columns: 1fr;
  }
  .dialog {
    padding: 16px;
  }
  .character-toolbar {
    flex-wrap: wrap;
  }
  .search-box {
    max-width: none;
    flex-basis: 100%;
  }
  .breadcrumbs {
    font-size: 10px;
  }
  .brand {
    padding-bottom: 28px;
  }
}
/* The quick generation preview follows the portrait image output. */
.generate-panel .preview-placeholder {
  height: auto;
  aspect-ratio: 3/4;
  max-height: 300px;
  max-width: 225px;
  margin: 0 auto;
}
@media (min-width: 901px) {
  .generate-panel .preview-placeholder {
    width: clamp(144px, 22vh, 180px);
    max-width: 100%;
    max-height: none;
  }
}
.character-cover {
  height: auto;
  aspect-ratio: 16/9;
}
@media (max-width: 820px) {
  .preview-placeholder {
    height: auto;
    max-width: 220px;
  }
  .character-cover {
    height: auto;
  }
}
@media (max-width: 560px) {
  .character-cover {
    height: auto;
  }
}
.result-image {
  background: #e9ede6;
}
.result-image img {
  object-fit: contain !important;
  background: #e9ede6;
}
.task-error {
  border-color: #efd2c6;
  background: #fff4ef;
  color: #a5543e;
}
.mini-field-label {
  font-size: 8px;
  color: #8a978e;
  margin: 1px 0 -2px;
}
.upload-file-label {
  display: inline-block;
  color: #37685a;
  text-decoration: underline;
  cursor: pointer;
  margin-right: 7px;
}
.character-cover .active-template-badge {
  top: 38px;
}
.task-history {
  margin-top: 22px;
  padding: 17px 19px;
}
.task-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.task-history-header h2 {
  font-size: 13px;
  margin: 0 0 4px;
}
.task-history-header small {
  display: block;
  color: #96a198;
  font-size: 9px;
}
.task-history-actions,
.task-history-controls {
  display: flex;
  gap: 7px;
  align-items: center;
}
.task-history-content {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}
.task-history-item {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fffefa;
  padding: 12px;
}
.task-history-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.task-history-summary {
  display: grid;
  gap: 4px;
}
.task-history-summary strong {
  font-size: 10px;
}
.task-history-summary small,
.task-history-progress {
  color: #929e95;
  font-size: 9px;
}
.task-history-progress {
  margin-top: 8px;
}
.task-history-error {
  margin-top: 7px;
  color: #a5543e;
  font-size: 9px;
  line-height: 1.6;
}
.task-status {
  padding: 4px 7px;
  border-radius: 20px;
  background: #f0f1eb;
  color: #728078;
  font-size: 8px;
  white-space: nowrap;
}
.task-status.status-success,
.task-status.status-completed {
  background: #e8f3eb;
  color: #39745d;
}
.task-status.status-failed,
.task-status.status-error {
  background: #fbede7;
  color: #ae5b42;
}
.task-status.status-generating,
.task-status.status-uploading,
.task-status.status-compiling,
.task-status.status-validating,
.task-status.status-pending,
.task-status.status-queued {
  background: #fdf1e6;
  color: #ad7646;
}
.task-history-controls {
  margin-top: 9px;
}
.task-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  color: #88968d;
  font-size: 9px;
}
.task-results-loading {
  height: 100px;
  margin-top: 9px;
}

/* Prompt editor and immutable prompt history */
.prompt-preview-shortcut { width: 100%; margin-bottom: 8px; }
.prompt-backdrop { z-index: 20; }
.prompt-dialog { width: min(960px, calc(100vw - 28px)); max-height: min(92vh, 980px); overflow: auto; }
.prompt-dialog-title h2 { margin: 5px 0 0; font-size: 21px; }
.prompt-editor-body { padding: 0 24px 24px; }
.prompt-editor-content { display: grid; gap: 15px; }
.prompt-editor-status { border-radius: 9px; padding: 10px 12px; background: #f1f3ed; color: #627168; font-size: 13px; }
.prompt-editor-status.saved { background: #e8f2eb; color: #235d4d; }
.prompt-editor-status.saving,.prompt-editor-status.pending { background: #fff4e8; color: #956139; }
.prompt-editor-status.error { background: #fff0ed; color: #a74635; }
.prompt-item-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.prompt-tab { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 20px; padding: 8px 13px; cursor: pointer; }
.prompt-tab.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.prompt-parameters { display: flex; gap: 8px; flex-wrap: wrap; }
.prompt-parameter { display: grid; gap: 3px; min-width: 100px; padding: 9px 11px; background: #f7f6ef; border-radius: 9px; }
.prompt-parameter small { color: var(--muted); }
.prompt-label { font-size: 13px; font-weight: 700; }
.prompt-textarea { width: 100%; min-height: 310px; resize: vertical; padding: 14px; border: 1px solid #dfe4dc; border-radius: 11px; background: #fffefa; color: var(--ink); font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.prompt-char-count { display: block; text-align: right; color: var(--muted); margin-top: 5px; }
.prompt-editor-actions,.prompt-editor-footer,.prompt-history-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prompt-editor-footer { justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--line); }
.prompt-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prompt-diff-column { min-width: 0; }
.prompt-diff-column pre,.prompt-history-text pre,.prompt-history-meta { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; padding: 12px; background: #f7f6f0; border-radius: 8px; font: 12px/1.65 ui-monospace, monospace; }
.prompt-history-section { margin-top: 20px; padding: 20px; }
.prompt-history-list { display: grid; gap: 9px; margin-top: 14px; }
.prompt-history-row { display: grid; grid-template-columns: minmax(180px,1fr) auto auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fffefa; }
.prompt-history-summary { display: grid; gap: 4px; min-width: 0; }
.prompt-history-summary strong { overflow-wrap: anywhere; }
.prompt-history-summary small { color: var(--muted); }
.prompt-history-status { color: var(--muted); font-size: 12px; }
.prompt-history-detail { display: grid; gap: 12px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.prompt-history-detail-header,.prompt-history-text-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prompt-history-text { min-width: 0; }
.prompt-history-text pre { max-height: 260px; }
.prompt-error-region:empty { display: none; }
@media (max-width: 700px) {
  .prompt-dialog { width: calc(100vw - 16px); max-height: 94vh; }
  .prompt-editor-body { padding: 0 14px 16px; }
  .prompt-history-row { grid-template-columns: 1fr; }
  .prompt-history-actions { justify-content: flex-start; }
  .prompt-diff { grid-template-columns: 1fr; }
  .prompt-textarea { min-height: 260px; }
}
.prompt-draft-recovery { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px solid #eadfce; border-radius: 10px; background: #fff8ec; }
.prompt-draft-recovery p { flex: 1 1 100%; margin: 0; font-size: 13px; }
.prompt-reference-list { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; margin-top: 6px; }
.prompt-reference-card { display: grid; gap: 4px; width: 112px; font-size: 11px; overflow-wrap: anywhere; }
.prompt-reference-card small { color: var(--muted); }
.prompt-reference-image,.prompt-reference-placeholder { width: 112px; height: 76px; border-radius: 8px; object-fit: contain; background: #f1f0e9; }
.prompt-scene-snapshot { display: grid; gap: 5px; width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid #e4ddcf; background: #fff9ef; color: #665940; font-size: 12px; }
.prompt-scene-snapshot small,.prompt-scene-snapshot p { margin: 0; color: var(--muted); line-height: 1.55; }
.prompt-scene-thumb { width: min(180px,100%); max-height: 210px; object-fit: contain; border-radius: 7px; background: #efeee8; }
.prompt-fixed-bag-snapshot { display: grid; gap: 5px; width: 100%; padding: 10px 12px; border: 1px solid #e4ddcf; border-radius: 9px; background: #f7f8f2; color: #52664f; font-size: 12px; }
.prompt-fixed-bag-snapshot small { color: var(--muted); line-height: 1.55; }
.prompt-fixed-bag-thumb { width: 82px; height: 82px; object-fit: contain; border-radius: 7px; background: #f4f1e9; }
.prompt-fixed-bag-thumb.unavailable { visibility: hidden; }
.result-bag-tag { display: block; margin-top: 5px; color: #657052; line-height: 1.5; }
.result-bag-thumb { display: block; width: 58px; height: 58px; margin-top: 5px; object-fit: contain; border-radius: 6px; background: #f4f1e9; }
.result-bag-image-unavailable { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.recipe-bag-thumb { display: block; width: min(180px,100%); height: 150px; object-fit: contain; border-radius: 7px; background: #f4f1e9; }
.prompt-fixed-bag-unavailable { color: var(--muted); font-size: 10px; }
.prompt-reference-placeholder { display: grid; place-items: center; color: var(--muted); }
.prompt-textarea:disabled { opacity: .75; background: #f5f4ee; }
.prompt-history-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.prompt-history-search,.prompt-history-title-input { min-width: 220px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: #fffefa; color: var(--ink); font: inherit; }
.prompt-history-toolbar .filter-chip { padding: 7px 11px; }
.prompt-history-rename { display: flex; gap: 8px; flex-wrap: wrap; }
.prompt-history-rename .prompt-history-title-input { flex: 1 1 240px; }
.prompt-history-thumb { width: 72px; height: 72px; object-fit: contain; background: #f2f1ea; border-radius: 8px; }
.prompt-history-result-preview { width: min(100%, 320px); max-height: 300px; object-fit: contain; border-radius: 10px; background: #f4f2eb; }
.prompt-history-result-state,.prompt-history-source,.prompt-history-source-note { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.prompt-attempt-list { display: grid; gap: 8px; }
.prompt-attempt { display: grid; gap: 4px; padding: 11px 13px; background: #f8f7f1; border: 1px solid var(--line); border-radius: 9px; }
.prompt-attempt small { color: var(--muted); overflow-wrap: anywhere; }
.prompt-attempt p { margin: 0; color: #a74635; overflow-wrap: anywhere; }
.prompt-history-skeleton { height: 66px; border-radius: 10px; }

/* Freeform prompt-first creation */
.freeform-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .75fr); gap: 18px; align-items: start; }
.freeform-form,.freeform-settings { min-width: 0; padding: 21px; }
.freeform-form { display: grid; gap: 12px; }
.freeform-prompt { width: 100%; min-height: 300px; resize: vertical; border: 1px solid #dfe4dc; border-radius: 11px; padding: 14px; background: #fffefa; color: var(--ink); font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; }
.freeform-char-count { color: var(--muted); text-align: right; font-size: 11px; }
.freeform-char-count.over-limit { color: #a74635; font-weight: 700; }
.freeform-reference-header { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.freeform-reference-header .field-label { margin-right: auto; }
.freeform-upload-hint { color: var(--muted); font-size: 11px; }
.freeform-reference-list { display: grid; gap: 8px; }
.freeform-reference-empty { border: 1px dashed #dce2d8; border-radius: 9px; padding: 16px; color: var(--muted); font-size: 12px; }
.freeform-reference-card { min-width: 0; display: grid; grid-template-columns: 74px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fffefa; }
.freeform-reference-image { width: 74px; height: 60px; object-fit: contain; background: #f1f0e9; border-radius: 7px; }
.freeform-reference-details { min-width: 0; display: grid; gap: 4px; }
.freeform-reference-details strong,.freeform-reference-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freeform-reference-details strong { font-size: 12px; }
.freeform-reference-details small { color: var(--muted); font-size: 10px; }
.freeform-reference-controls { display: flex; gap: 4px; }
.freeform-preview { width: 100%; min-height: 43px; }
.freeform-settings { display: grid; gap: 10px; }
.freeform-settings h2 { margin: 0; color: #173d35; font-size: 19px; }
.freeform-setting-label { margin-top: 4px; }
.freeform-ratio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.freeform-ratio-grid .filter-chip { padding-inline: 5px; }
.freeform-settings .task-card { margin-top: 8px; }
.freeform-settings .inline-error { overflow-wrap: anywhere; }
.scene-preset-active-note { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 5px 12px; margin-top: 10px; padding: 12px; border: 1px solid #e5d8bf; border-radius: 10px; background: #fff8eb; }
.scene-active-thumb { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 56px; object-fit: contain; border-radius: 5px; background: #eeede5; }
.scene-preset-active-note strong { grid-column: 2; grid-row: 1; color: #4e5e50; font-size: 13px; }
.scene-preset-active-note span { grid-column: 2; grid-row: 2; color: #7d7567; font-size: 11px; }
.scene-preset-active-note .button { grid-column: 3; grid-row: 1 / 3; }
.bag-preset-field { min-width: 0; }
.bag-preset-help { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.scene-preset-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.scene-preset-card { padding: 20px; min-width: 0; }
.scene-preset-card h2 { margin: 5px 0; font-size: 20px; color: #173d35; }
.scene-preset-card > p { color: var(--muted); font-size: 12px; }
.scene-version-card { display: grid; grid-template-columns: minmax(230px,.75fr) minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fffefa; }
.scene-version-card.unavailable { background: #f7f6f1; opacity: .78; }
.scene-version-preview { display: grid; place-items: center; min-height: 170px; overflow: hidden; border-radius: 8px; background: #eeede5; color: var(--muted); font-size: 12px; }
.scene-version-preview img { display: block; width: 100%; max-height: 370px; object-fit: contain; }
.scene-version-meta { min-width: 0; display: grid; gap: 6px; }
.scene-version-meta h3 { margin: 0; color: var(--ink); font-size: 15px; }
.scene-version-meta small,.scene-repair-note,.scene-unavailable-note { color: var(--muted); font-size: 11px; line-height: 1.65; }
.scene-repair-note { margin: 0; padding: 8px 10px; border-radius: 8px; background: #fff4e8; color: #815f3d; }
.scene-unavailable-note { margin: 0; color: #a74635; }
.scene-anchors summary { cursor: pointer; color: var(--teal); font-size: 11px; }
.scene-anchors ul { margin: 6px 0 0; padding-left: 19px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.scene-version-actions { display: grid; gap: 8px; min-width: 155px; }
.scene-loading { padding: 22px; color: var(--muted); }
.result-scene-tag { display: block; margin-top: 5px; color: #82643e; line-height: 1.5; }
.result-transform-tag { display: block; margin-top: 5px; color: #8a6044; line-height: 1.5; }
.scene-snapshot-block { padding: 11px; border: 1px solid #e4ddcf; border-radius: 9px; background: #fff9ef; }
.mirror-derived-note { color: #8c5b3d; font-size: 12px; }
.mirror-backdrop { z-index: 30; }
.mirror-dialog { width: min(940px,calc(100vw - 28px)); max-height: 92vh; overflow: auto; padding-bottom: 18px; }
.mirror-dialog > .dialog-head,.mirror-dialog > p,.mirror-dialog > .mirror-comparison,.mirror-dialog > .mirror-status,.mirror-dialog > .mirror-actions { margin-left: 22px; margin-right: 22px; }
.mirror-warning { color: #8a6044; padding: 10px 12px; border-radius: 8px; background: #fff4e8; font-size: 12px; line-height: 1.6; }
.mirror-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mirror-pane { min-width: 0; display: grid; gap: 7px; }
.mirror-pane > strong { font-size: 12px; }
.mirror-image-frame { width: 100%; min-height: 180px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #efeee8; }
.mirror-image-frame img { display: block; width: 100%; max-height: 55vh; object-fit: contain; }
.mirror-status { margin-top: 13px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.mirror-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
@media (max-width: 900px) { .freeform-grid { grid-template-columns: minmax(0,1fr); } .freeform-settings { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) { .freeform-form,.freeform-settings { padding: 15px; } .freeform-prompt { min-height: 230px; } .freeform-reference-card { grid-template-columns: 58px minmax(0,1fr); } .freeform-reference-image { width: 58px; height: 52px; } .freeform-reference-controls { grid-column: 1 / -1; justify-content: flex-end; } .freeform-reference-details small { white-space: normal; overflow-wrap: anywhere; } .freeform-upload-hint { flex-basis: 100%; } }
@media (max-width: 700px) { .scene-version-card { grid-template-columns: minmax(0,1fr); } .scene-version-preview { max-height: 44vh; } .scene-version-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } .scene-preset-active-note { grid-template-columns: 48px minmax(0,1fr); } .scene-preset-active-note .scene-active-thumb { grid-column: 1; grid-row: 1 / 3; } .scene-preset-active-note strong,.scene-preset-active-note span { grid-column: 2; grid-row: auto; } .scene-preset-active-note .button { grid-column: 2; grid-row: auto; justify-self: start; } .mirror-dialog { width: calc(100vw - 14px); } .mirror-dialog > .dialog-head,.mirror-dialog > p,.mirror-dialog > .mirror-comparison,.mirror-dialog > .mirror-status,.mirror-dialog > .mirror-actions { margin-left: 12px; margin-right: 12px; } .mirror-comparison { grid-template-columns: 1fr; } .mirror-image-frame { min-height: 130px; max-height: 40vh; } .mirror-image-frame img { max-height: 40vh; } }

/* Studio hierarchy: group the choices by decision, with the warm paper and pine palette retained. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #327568;
  outline-offset: 3px;
}
small { font-size: 12px; }
:is(input[type="text"],input[type="number"],select,textarea):focus-visible {
  outline: 3px solid #327568;
  outline-offset: 2px;
}
button, a, summary { touch-action: manipulation; }
.nav-item,.mobile-menu,.icon-button { min-height: 44px; }
.page-content,
.panel,
.studio-grid,
.studio-form-sections,
.studio-form-section,
.generate-panel,
.result-card,
.history-grid,
.character-grid,
.task-history-item { min-width: 0; }
.studio-form-sections { display: grid; gap: 18px; }
.studio-form-section {
  padding: 15px 0 0;
  border-top: 1px solid #e5e9e1;
}
.studio-form-section:first-child { padding-top: 0; border-top: 0; }
.studio-form-section > .panel-title { margin-bottom: 12px; }
.studio-form-section .panel-title h2 { font-size: 16px; line-height: 1.35; }
.studio-form-section .step-number { width: 30px; height: 30px; font-size: 13px; flex: 0 0 30px; }
.studio-form-section .panel-title p,
.studio-form-section .helper-text,
.studio-form-section .bag-preset-help { color: #65766c; font-size: 12px; line-height: 1.55; }
.studio-form-section .field-label,
.studio-form-section .character-bind > span,
.studio-form-section .role-row label { color: #435c50; font-size: 14px; line-height: 1.4; }
.studio-form-section .field { margin: 10px 0; }
.studio-form-section .select,
.studio-form-section input[type="text"],
.studio-form-section input[type="number"],
.studio-form-section .visual-select-trigger,
.studio-form-section .role-row .select,
.studio-form-section .detail-cell .select { min-height: 44px; padding: 9px 11px; font-size: 14px; }
.studio-form-section .family-option { min-height: 78px; padding: 12px; }
.studio-form-section .family-option strong { font-size: 14px; }
.studio-form-section .family-option small { font-size: 12px; color: #617268; }
.studio-form-section .mode-segment button { min-height: 44px; padding: 9px 14px; font-size: 14px; }
.studio-form-section .mode-line { gap: 12px; flex-wrap: wrap; }
.studio-form-section .detail-cell { min-width: 0; }
.studio-form-section .mini-field-label { font-size: 14px; line-height: 1.4; color: #435c50; }
.studio-form-section .character-bind { display: grid; grid-template-columns: minmax(105px,.45fr) minmax(0,1fr); gap: 8px 12px; align-items: center; }
.studio-form-section .character-bind > span { grid-column: 1 / -1; font-weight: 700; }
.studio-form-section .character-bind > label { min-width: 0; color: #435c50; font-size: 14px; line-height: 1.4; }
.studio-form-section .character-bind select { width: 100%; max-width: none; min-height: 44px; font-size: 14px; }
.studio-form-section .advanced-toggle { min-height: 44px; font-size: 14px; text-align: left; }
.studio-form-section .visual-select-current { font-size: 14px; }
.studio-form-section .visual-select-option { min-height: 54px; }
.studio-form-section .visual-select-option-copy strong { font-size: 14px; }
.studio-form-section .visual-select-option-copy small { font-size: 12px; white-space: normal; }
.generate-panel { border-color: #cfded2; background: #fffefa; }
.generate-panel .generate-button { min-height: 48px; font-size: 16px; font-weight: 700; }
.generate-panel .output-row strong,
.generate-panel .quality-choice strong { font-size: 14px; }
.generate-panel .output-row > div:first-child { font-size: 14px; font-weight: 600; }
.generate-panel .output-row small,
.generate-panel .quality-choice small,
.generate-panel .fineprint { font-size: 12px; color: #617268; }
.generate-panel .count-options button { min-width: 44px; min-height: 44px; font-size: 14px; }
.generate-panel .quality-choice { min-height: 64px; }
.result-meta { padding: 12px; }
.result-meta strong,.character-info h3,.task-history-summary strong { font-size: 14px; line-height: 1.45; }
.result-meta small,.character-info p,.character-tags .tag,.task-history-summary small,.task-history-progress,.task-history-error,.task-status { font-size: 12px; line-height: 1.55; }
.history-toolbar .filter-chip,.filter-chip { min-height: 44px; font-size: 14px; }
.task-history-header small,.task-pagination { font-size: 13px; }
.pagination { font-size: 13px; }
.pagination button { min-width: 44px; min-height: 44px; font-size: 14px; }
.toast { font-size: 14px; line-height: 1.5; }
.task-card strong { font-size: 14px; }
.task-card small { font-size: 12px; line-height: 1.55; }
.character-cover .active-badge { font-size: 12px; }
.scene-version-meta small,.scene-repair-note,.scene-unavailable-note,.scene-anchors summary,.scene-anchors ul { font-size: 12px; line-height: 1.55; }
.workspace-label,.nav-shortcut,.nav-count,.provider-card small,.sidebar-user small,.service-pill { font-size: 12px; }
.brand-copy small { font-size: 12px; }
.eyebrow { font-size: 12px; }
.nav-item { font-size: 14px; }
.top-avatar,.avatar-small { font-size: 14px; }
.page-heading h1 { text-wrap: balance; }
.section-heading h2,.task-history-header h2 { font-size: 16px; }
.section-heading small { font-size: 12px; }
.preview-tag,.preview-label { font-size: 12px; }
.recipe-block h3,.recipe-block pre,.subsection-title { font-size: 12px; line-height: 1.55; }
.prompt-label { font-size: 14px; }
.prompt-char-count,.prompt-parameter small,.prompt-reference-card { font-size: 12px; }
.result-bag-image-unavailable,.prompt-fixed-bag-unavailable,.freeform-char-count,.freeform-upload-hint,.freeform-reference-details small { font-size: 12px; }
.scene-preset-active-note span,.bag-preset-help { font-size: 12px; }
.bag-option-placeholder { font-size: 12px; }
.upload-box,.upload-box input { font-size: 12px; }
.freeform-reference-details strong { font-size: 14px; }
.freeform-reference-controls .button-small { font-size: 14px; }
.prompt-history-toolbar .filter-chip { font-size: 13px; }
.prompt-history-row,.task-history-item,.character-card,.result-card { overflow-wrap: anywhere; }
.prompt-history-summary small,.prompt-history-status,.prompt-history-source,.prompt-history-result-state { font-size: 12px; line-height: 1.55; }
.character-info p { min-height: 0; }
.character-card-actions .button { flex: 1 1 auto; }
.card-actions,.character-card-actions,.task-history-controls { gap: 8px; flex-wrap: wrap; }
.card-actions .text-action,.character-card-actions .button,.task-history-controls .button { min-height: 44px; padding: 8px 10px; font-size: 14px; }
.button { min-height: 44px; font-size: 14px; transition: transform .18s, background-color .18s, border-color .18s; }
.button-small { min-height: 44px; padding: 8px 11px; font-size: 14px; }
.mode-segment button { min-height: 44px; }
.icon-button { width: 44px; height: 44px; font-size: 16px; }
.visual-select-trigger:focus-visible { outline: 3px solid #327568; outline-offset: 3px; }
.field-label { font-size: 14px; line-height: 1.4; }
.select,input[type="text"],input[type="number"],textarea { min-height: 44px; font-size: 14px; }
.inline-error,.helper-text,.empty-state { font-size: 13px; line-height: 1.6; }
.dialog-backdrop { overscroll-behavior: contain; }
.dialog[role="dialog"] { overscroll-behavior: contain; scroll-margin-block: 16px; }
.dialog-close { width: 44px; height: 44px; font-size: 22px; }
.spinner,.skeleton { animation-duration: 1.4s; }
.skip-link { z-index: 100; }
@media (max-width: 1100px) {
  .studio-grid { grid-template-columns: minmax(0,1fr) minmax(280px,.8fr); gap: 14px; }
}
@media (max-width: 900px) {
  .studio-grid { grid-template-columns: minmax(0,1fr); }
  .generate-panel { position: static; }
}
@media (max-width: 820px) {
  .studio-form-sections { gap: 14px; }
  .studio-form-section { padding-top: 12px; }
  .result-meta strong,.character-info h3 { font-size: 14px; }
  .card-actions .text-action { min-height: 44px; font-size: 14px; }
}
@media (max-width: 560px) {
  .page-heading h1 { font-size: 22px; line-height: 1.3; }
  .studio-form-section .field-row,.studio-form-section .advanced-fields .field-row { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .studio-form-section .family-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .studio-form-section .role-row { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .studio-form-section .role-row .select { font-size: 14px; }
  .studio-form-section .detail-grid { grid-template-columns: minmax(0,1fr); }
  .studio-form-section .character-bind { grid-template-columns: minmax(0,1fr); }
  .results-strip,.history-grid,.character-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .result-meta { padding: 9px; }
  .card-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card-actions .text-action { min-width: 0; overflow-wrap: anywhere; }
  .task-history-item-head { align-items: flex-start; flex-direction: column; }
  .task-history-controls .button { flex: 1 1 42%; }
  .generate-panel { padding: 16px; }
}
@media (max-width: 380px) {
  .page-heading h1 { font-size: 21px; }
  .page-content { padding-inline: 10px; }
  .form-panel,.generate-panel { padding: 13px; }
  .studio-form-section .family-option { padding: 9px; }
  .studio-form-section .panel-title h2 { font-size: 15px; }
  .results-strip,.history-grid,.character-grid { gap: 7px; }
  .card-actions { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 360px) {
  .topbar { gap: 8px; }
  .top-actions { gap: 7px; }
  .breadcrumbs { min-width: 0; gap: 6px; }
  .breadcrumbs strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .studio-form-section .panel-title { align-items: flex-start; }
  .studio-form-section .family-option { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}