:root {
  color-scheme: light;
  --canvas: #f4f6f6;
  --surface: #ffffff;
  --surface-muted: #f7f9f9;
  --surface-strong: #edf1f1;
  --ink: #182124;
  --ink-soft: #5b686d;
  --line: #d9dfe1;
  --line-strong: #c5ced1;
  --accent: #0f766e;
  --accent-hover: #0b625c;
  --accent-soft: #e4f2ef;
  --coral: #9b4e42;
  --coral-soft: #f8ece9;
  --blue: #34649a;
  --blue-soft: #eaf0f7;
  --amber: #8d5b17;
  --amber-soft: #f8f0df;
  --red: #ad3838;
  --red-soft: #faeaea;
  --sidebar-width: 196px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
}
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 14px 11px;
  border-right: 1px solid var(--line);
  background: #f8fafa;
}
.brand {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 14px;
  color: inherit;
  text-decoration: none;
}
.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #9dbab6;
  border-radius: 6px;
  background: var(--accent-soft);
  color: #0c5f58;
  font-size: 12px;
  font-weight: 800;
}
.brand > span:last-child,
.account-summary > span:last-child { min-width: 0; display: grid; gap: 2px; }
.brand strong { font-size: 16px; line-height: 1.2; }
.brand small, .account-summary small { color: var(--ink-soft); font-size: 11px; }

.main-nav { display: grid; gap: 4px; margin-top: 16px; }
.main-nav button, .sidebar-footer > button {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #4e5e62;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.main-nav button:hover, .sidebar-footer > button:hover { border-color: var(--line); background: #fff; color: var(--ink); }
.main-nav button.active { border-color: #bcd6d2; background: var(--accent-soft); color: #0b5d57; font-weight: 700; }
.main-nav svg, .sidebar-footer svg { width: 18px; height: 18px; }
.sidebar-footer { margin-top: auto; display: grid; gap: 10px; }
.account-summary { display: flex; align-items: center; gap: 9px; padding: 12px 9px 4px; border-top: 1px solid var(--line); }
.account-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--surface-strong); color: #405156; padding: 7px; }
.account-summary strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.main-shell { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
}
.page-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-heading p, .page-heading h1 { margin: 0; letter-spacing: 0; }
.page-heading p { color: var(--ink-soft); font-size: 10px; }
.page-heading h1 { margin-top: 2px; font-size: 19px; line-height: 1.25; }
.topbar-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

.primary-button, .secondary-button, .ghost-button, .danger-button, .icon-button, .text-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 6px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.primary-button, .secondary-button, .ghost-button, .danger-button { padding: 0 13px; }
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.primary-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.secondary-button { border: 1px solid var(--line-strong); background: #fff; color: #263236; }
.secondary-button:hover, .ghost-button:hover { border-color: #93a2a6; background: var(--surface-muted); }
.ghost-button { border: 1px solid transparent; background: transparent; color: var(--ink-soft); }
.danger-button { border: 1px solid #e4b6b6; background: #fff; color: var(--red); }
.icon-button { width: 38px; padding: 0; border: 1px solid var(--line); background: #fff; color: #425055; }
.icon-button:hover { background: var(--surface-muted); color: var(--ink); }
.text-button { min-height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--accent); }
button:disabled { opacity: 0.48; cursor: not-allowed; }
button svg, a svg { width: 16px; height: 16px; flex: 0 0 auto; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.22); outline-offset: 2px; }
.mobile-menu, .mobile-nav { display: none; }

.status-bar { margin: 14px 22px 0; padding: 10px 13px; border: 1px solid #bcd7d3; border-radius: 6px; background: var(--accent-soft); color: #174d49; }
.status-bar.error { border-color: #e4b7b7; background: var(--red-soft); color: #7a2525; }
.content { max-width: 1540px; margin: 0 auto; padding: 22px; }
.content.processing-content { padding-left: 0; }
.loading-state, .empty-state { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--ink-soft); text-align: center; }
.empty-state > svg { width: 28px; height: 28px; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

input, textarea, select { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--ink); outline: none; }
input, select { min-height: 38px; padding: 0 10px; }
textarea { padding: 10px 11px; line-height: 1.55; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: #5d9d96; }

.view-stack { display: grid; gap: 18px; }
.section-heading, .toolbar, .project-row, .asset-row, .task-row, .summary-head, .filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.section-heading h2, .section-heading p, .summary-head h2, .summary-head p { margin: 0; letter-spacing: 0; }
.section-heading h2, .summary-head h2 { font-size: 17px; }
.section-heading p, .summary-head p { margin-top: 3px; color: var(--ink-soft); font-size: 12px; }
.section-heading-actions, .row-actions, .filter-row, .toolbar-actions { display: flex; align-items: center; gap: 8px; }

.creator-surface {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  overflow: hidden;
}
.creator-main { min-width: 0; border-right: 1px solid var(--line); }
.creator-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; background: linear-gradient(180deg, #fff, #fbfdfd); }
.creator-header h2, .creator-header p { margin: 0; letter-spacing: 0; }
.creator-header h2 { font-size: 18px; }
.creator-header p { margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
.creator-kicker { display: block; margin-bottom: 4px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.creation-engine-switch { min-width: min(100%, 390px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.creation-engine-option { min-width: 0; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 50px; padding: 5px 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink-soft); text-align: left; cursor: pointer; }
.creation-engine-option:hover { color: var(--ink); }
.creation-engine-option.active { border-color: var(--line); background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(24, 33, 36, .04); }
.creation-engine-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 5px; background: var(--surface-strong); }
.creation-engine-option.active .creation-engine-icon { background: var(--accent-soft); }
.creation-engine-option strong, .creation-engine-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creation-engine-option strong { font-size: 11px; }
.creation-engine-option small { margin-top: 2px; color: var(--ink-soft); font-size: 9px; }
.output-switch { display: grid; grid-template-columns: repeat(3, minmax(86px, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.output-switch button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.output-switch button:hover { color: var(--ink); }
.output-switch button.active { border-color: var(--line); background: #fff; color: var(--accent); font-weight: 700; }

.creator-section { padding: 18px 20px; border-top: 1px solid var(--line); }
.creator-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.creator-section-heading h3, .creator-section-heading p { margin: 0; letter-spacing: 0; }
.creator-section-heading h3 { font-size: 14px; }
.creator-section-heading p { margin-top: 3px; color: var(--ink-soft); font-size: 11px; }
.creator-section-heading .text-button { margin-top: -6px; }
.asset-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.asset-option {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.asset-option:hover { border-color: #95b7b2; background: #fbfdfd; }
.asset-option:has(input:checked) { border-color: #74a9a2; background: var(--accent-soft); }
.asset-option-preview { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: var(--surface-strong); color: #59676b; }
.asset-option-preview img, .asset-option-preview video { width: 100%; height: 100%; object-fit: cover; }
.asset-option-copy { min-width: 0; display: grid; gap: 3px; }
.asset-option-copy strong, .asset-option-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-option-copy strong { font-size: 11px; }
.asset-option-copy small { color: var(--ink-soft); font-size: 10px; }
.asset-option input { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--accent); }
.asset-empty-inline { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--ink-soft); }

.creation-assist { display: grid; gap: 10px; margin-bottom: 10px; }
.creation-assist-panels:empty { display: none; }
.creation-composer-toolbar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.composer-output-switch { flex: 0 0 auto; grid-template-columns: repeat(3, minmax(72px, 1fr)); }
.composer-output-switch button { gap: 4px; padding-inline: 4px; }
.creation-assist-actions { min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.creation-assist-button {
  max-width: min(100%, 270px);
  min-height: 34px;
  display: inline-grid;
  grid-template-columns: 16px minmax(0, auto) auto;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
}
.creation-assist-button > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creation-assist-button:hover, .creation-assist-button.active { border-color: #79a9a3; background: var(--accent-soft); color: var(--accent-hover); }
.creation-assist-button.selected { border-color: #9bc1bc; color: var(--accent-hover); }
.creation-assist-button small, .creation-assist-button em { color: var(--accent); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.creation-assist-button em { color: var(--coral); }
.creation-clear-button { width: 32px; min-height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.creation-clear-button:hover { background: var(--surface-muted); color: var(--ink); }
.creation-assist-note { margin: -2px 0 0; color: var(--coral); font-size: 10px; }
.creation-smart-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 3px; color: var(--ink-soft); font-size: 10px; }
.creation-smart-actions span { margin-right: 3px; font-weight: 700; }
.creation-smart-actions button { min-height: 28px; padding: 0 8px; border: 1px solid #c7d8d5; border-radius: 5px; background: #fff; color: var(--accent); font-size: 10px; cursor: pointer; }
.creation-smart-actions button:hover { border-color: #79a9a3; background: var(--accent-soft); }
.workflow-output-note { min-width: 210px; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 11px; border: 1px solid #c8ddd9; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.workflow-output-note svg { width: 17px; height: 17px; }
.workflow-output-note span:last-child { display: grid; gap: 2px; }
.workflow-output-note strong { font-size: 11px; }
.workflow-output-note small { color: var(--ink-soft); font-size: 9px; }
.workflow-context { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px 12px; border: 1px solid #c8ddd9; border-radius: 6px; background: #f5faf9; color: var(--accent); }
.workflow-context svg { width: 17px; height: 17px; margin-top: 1px; }
.workflow-context div { display: grid; gap: 3px; }
.workflow-context strong { font-size: 11px; }
.workflow-context small { color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.creation-inline-panel { min-width: 0; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.creation-inline-tabs { display: flex; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.creation-inline-tabs button { min-height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.creation-inline-tabs button.active { border-color: var(--line); background: #fff; color: var(--accent); font-weight: 700; }
.creation-local-upload { min-height: 82px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; }
.creation-local-upload:hover { border-color: #79a9a3; background: #fbfdfd; }
.creation-local-upload input { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.creation-local-upload > svg { width: 24px; height: 24px; color: var(--accent); }
.creation-local-upload > span { display: grid; gap: 3px; }
.creation-local-upload strong { font-size: 12px; }
.creation-local-upload small { color: var(--ink-soft); font-size: 10px; }
.creation-local-upload.uploading { opacity: 0.64; cursor: wait; }

.template-category-bar { display: flex; gap: 5px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: thin; }
.template-category-bar button { min-height: 32px; flex: 0 0 auto; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.template-category-bar button:hover { border-color: var(--line); background: var(--surface-muted); color: var(--ink); }
.template-category-bar button.active { border-color: #b7d3cf; background: var(--accent-soft); color: #0b5d57; font-weight: 700; }
.template-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.template-choice { min-width: 0; min-height: 0; aspect-ratio: 16 / 9; position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.template-choice:hover { border-color: #95b7b2; background: #fbfdfd; }
.template-choice.active { border-color: #74a9a2; background: var(--accent-soft); }
.template-choice.redraw { border-color: #dfc8c2; }
.template-choice.redraw.active { border-color: #c68a7c; background: var(--coral-soft); }
.template-choice-media { min-height: 0; display: grid; place-items: center; overflow: hidden; background: var(--surface-strong); color: var(--accent); }
.template-choice-media img { width: 100%; height: 100%; object-fit: cover; }
.template-choice-media svg { width: 28px; height: 28px; }
.template-choice.redraw .template-choice-media { background: var(--coral-soft); color: var(--coral); }
.template-choice-copy { min-width: 0; display: grid; gap: 3px; padding: 8px 9px; border-top: 1px solid var(--line); background: #fff; }
.template-choice-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.template-choice-copy small { display: -webkit-box; overflow: hidden; color: var(--ink-soft); font-size: 10px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.template-more { min-height: 34px; display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 0 8px; border: 0; background: transparent; color: var(--accent); font-size: 11px; font-weight: 700; cursor: pointer; }
.template-more:hover { color: var(--accent-hover); }
.template-more svg { width: 14px; height: 14px; }
.template-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.template-field-grid label, .creator-fields label { display: grid; gap: 6px; color: #45545a; font-size: 11px; font-weight: 700; }
.template-field-grid .wide, .creator-fields .wide { grid-column: 1 / -1; }
.template-config { padding-top: 13px; border-top: 1px solid var(--line); }
.template-config-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.template-config-head > div { min-width: 0; display: grid; gap: 3px; }
.template-config-head strong { font-size: 13px; }
.template-config-head small, .template-picker-empty, .template-no-fields { color: var(--ink-soft); font-size: 10px; }
.template-picker-empty, .template-no-fields { margin: 0; }
.template-field-options { min-width: 0; margin: 0; padding: 0; border: 0; }
.template-field-options legend { width: 100%; display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #45545a; font-size: 11px; font-weight: 700; }
.template-field-options legend small { color: var(--ink-soft); font-size: 9px; font-weight: 500; }
.template-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.template-option { min-width: 0; min-height: 34px; display: flex !important; align-items: center; gap: 7px !important; padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft) !important; cursor: pointer; }
.template-option:hover, .template-option:has(input:checked) { border-color: #79a9a3; background: var(--accent-soft); color: var(--accent-hover) !important; }
.template-option input { width: 14px; height: 14px; min-height: 0; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--accent); }
.template-option span { min-width: 0; overflow-wrap: anywhere; }
.template-confirm-row { display: flex; justify-content: flex-end; margin-top: 13px; }
.template-confirm-row .primary-button { min-width: 116px; }

.creator-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(150px, 0.5fr); gap: 11px; }
.creator-fields textarea { min-height: 122px; }
.creator-output-fields { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.creator-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.creation-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); background: var(--surface-muted); }
.creation-cost { min-width: 0; display: grid; gap: 3px; }
.creation-cost span { color: var(--ink-soft); font-size: 11px; }
.creation-cost strong { font-size: 15px; }
.creation-actions { display: flex; align-items: center; gap: 8px; }

.creator-rail { min-width: 0; padding: 18px; background: #fbfcfc; }
.creator-rail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.creator-rail-head h3, .creator-rail-head p { margin: 0; letter-spacing: 0; }
.creator-rail-head h3 { font-size: 14px; }
.creator-rail-head p { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.result-list { display: grid; }
.result-row { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line); }
button.result-row { width: 100%; border-top: 0; border-right: 0; border-left: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.result-row:last-child { border-bottom: 0; }
.result-thumb { position: relative; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: var(--surface-strong); color: #516166; }
.result-thumb img, .result-thumb video { width: 100%; height: 100%; object-fit: cover; }
.result-thumb-button { padding: 0; border: 0; cursor: pointer; }
.result-thumb-carousel { position: relative; width: 48px; height: 48px; display: grid; place-items: center; }
.result-thumb-carousel .result-thumb { width: 100%; height: 100%; }
.result-thumb-nav { position: absolute; bottom: 2px; z-index: 2; width: 17px; height: 17px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .8); border-radius: 4px; background: rgba(20, 29, 31, .84); color: #fff; cursor: pointer; }
.result-thumb-nav.previous { left: 2px; }
.result-thumb-nav.next { right: 2px; }
.result-thumb-nav svg { width: 10px; height: 10px; }
.result-thumb-count { position: absolute; top: 2px; left: 50%; z-index: 2; min-width: 24px; height: 15px; display: grid; place-items: center; padding: 0 4px; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, .85); border-radius: 4px; background: rgba(20, 29, 31, .82); color: #fff; font-size: 8px; font-style: normal; font-weight: 800; line-height: 1; }
.result-copy { min-width: 0; display: grid; align-content: center; gap: 4px; }
.result-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.result-copy small { color: var(--ink-soft); font-size: 10px; }
.result-status { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.result-action { min-height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border: 1px solid #b7d3cf; border-radius: 4px; background: #fff; color: var(--accent); font-size: 9px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.result-action:hover { border-color: #7ca8a2; background: var(--accent-soft); }
.result-action svg { width: 13px; height: 13px; }
.status-badge, .scope-badge { display: inline-flex; width: fit-content; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 4px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.status-active, .status-completed { background: var(--accent-soft); color: #0c635c; }
.status-queued { background: var(--amber-soft); color: var(--amber); }
.status-running { background: var(--blue-soft); color: var(--blue); }
.status-failed, .status-cancelled { background: var(--red-soft); color: var(--red); }
.status-archived { background: var(--surface-strong); color: var(--ink-soft); }

.tool-workspace, .collect-workspace { border: 1px solid var(--line); border-radius: 7px; background: #fff; overflow: hidden; }
.tool-workspace-head, .collect-workspace-head { padding: 20px; border-bottom: 1px solid var(--line); }
.tool-workspace-head h2, .tool-workspace-head p, .collect-workspace-head h2, .collect-workspace-head p { margin: 0; letter-spacing: 0; }
.tool-workspace-head h2, .collect-workspace-head h2 { font-size: 18px; }
.tool-workspace-head p, .collect-workspace-head p { margin-top: 5px; color: var(--ink-soft); font-size: 12px; }
.tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-command { min-height: 112px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 18px 20px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.tool-command:nth-child(2n) { border-right: 0; }
.tool-command:nth-last-child(-n + 2) { border-bottom: 0; }
.tool-command:hover { background: var(--surface-muted); }
.tool-command-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-strong); color: var(--accent); }
.tool-command-copy { min-width: 0; display: grid; gap: 5px; }
.tool-command-copy strong { font-size: 14px; }
.tool-command-copy small { color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.tool-command > svg { color: #738084; }

.collect-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.collect-main { min-width: 0; }
.collect-workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-right: 1px solid var(--line); }
.collect-entry { min-height: 330px; display: grid; align-content: center; gap: 16px; padding: 26px; border-right: 1px solid var(--line); }
.collect-entry-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 6px; background: var(--blue-soft); color: var(--blue); }
.collect-entry h3, .collect-entry p { margin: 0; letter-spacing: 0; }
.collect-entry h3 { font-size: 17px; }
.collect-entry p { max-width: 620px; color: var(--ink-soft); line-height: 1.65; }
.collect-platforms { display: flex; flex-wrap: wrap; gap: 7px; }
.collect-platforms span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-muted); color: var(--ink-soft); font-size: 11px; }
.collect-platforms span.active { border-color: #9bc8c1; background: var(--accent-soft); color: var(--accent); }
.collect-side { padding: 20px; background: #fbfcfc; }
.collect-side h3 { margin: 0 0 12px; font-size: 13px; }
.collect-fields { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 12px; max-width: 720px; }
.collect-fields label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 11px; }
.collect-fields label.wide { grid-column: 1 / -1; }
.collect-fields input { width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; color: var(--ink); font: inherit; }
.collect-fields input:focus { outline: 2px solid rgba(45, 133, 124, .18); border-color: var(--accent); }
.collect-link-feedback { min-height: 16px; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.collect-link-feedback.ready { color: var(--accent); }
.collect-link-feedback.error { color: var(--red); }
.collect-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 720px; padding-top: 5px; }
.collect-submit-row > div { display: grid; gap: 3px; color: var(--ink-soft); font-size: 11px; }
.collect-submit-row strong { color: var(--ink); font-size: 14px; }
.collect-submit-row svg.lucide-loader-circle { animation: spin 900ms linear infinite; }
.collect-task-list { display: grid; gap: 10px; }
.collect-result-rail { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0; }
.collect-result-rail > header { padding: 18px 16px 13px; border-bottom: 1px solid var(--line); }
.collect-result-rail > header > span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.collect-result-rail > header h3 { margin: 3px 0 0; }
.collect-result-rail > header p { margin: 3px 0 0; color: var(--ink-soft); font-size: 10px; }
.collect-result-list { min-height: 0; max-height: 420px; align-content: start; gap: 0; overflow-x: hidden; overflow-y: auto; padding: 4px 12px 10px; scrollbar-gutter: stable; }
.collect-result-row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 10px 0; }
.collect-result-row:hover:not(:disabled) { background: var(--accent-soft); }
.collect-result-row:disabled { cursor: default; opacity: .72; }
.collect-result-thumb { position: relative; width: 44px; height: 44px; overflow: hidden; border-radius: 6px; background: #1b272b; color: #d8e2e0; }
.collect-result-thumb video { width: 100%; height: 100%; object-fit: cover; }
.collect-result-thumb > svg { width: 17px; height: 17px; margin: 13px; }
.collect-result-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.collect-result-play svg { width: 17px; height: 17px; }
.collect-task-card { display: grid; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.collect-task-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.collect-task-card header strong, .collect-task-card header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collect-task-card header strong { font-size: 12px; }
.collect-task-card header small { max-width: 220px; margin-top: 4px; color: var(--ink-soft); font-size: 10px; }
.collect-artifact-list { display: grid; gap: 7px; }
.collect-artifact-row { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; gap: 9px; min-width: 0; padding-top: 8px; border-top: 1px solid var(--line); }
.collect-artifact-preview { position: relative; width: 96px; aspect-ratio: 9 / 16; display: grid; place-items: center; overflow: hidden; padding: 0; border: 1px solid #27353a; border-radius: 5px; background: #192226; color: #d8e2e0; }
.collect-artifact-preview-open { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.collect-artifact-preview-open:hover { background: #223035; }
.collect-artifact-preview-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.collect-artifact-preview-open video { width: 100%; height: 100%; display: block; object-fit: contain; }
.collect-artifact-preview-open svg { width: 17px; height: 17px; }
.collect-artifact-preview-play { position: absolute; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .48); border-radius: 50%; background: rgba(16, 28, 32, .74); color: #fff; transition: background 180ms ease, border-color 180ms ease; }
.collect-artifact-preview-play svg { width: 14px; height: 14px; margin-left: 1px; }
button.collect-artifact-preview-open:hover .collect-artifact-preview-play { border-color: #fff; background: rgba(24, 82, 76, .9); }
.collect-artifact-retry { position: absolute; top: 0; right: 0; z-index: 1; width: 26px; min-width: 26px; height: 26px; min-height: 26px; padding: 0; border-color: var(--line-strong); background: #fff; color: var(--ink-soft); }
.collect-artifact-retry:hover:not(:disabled) { border-color: #74ada4; background: var(--accent-soft); color: var(--accent); }
.collect-artifact-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.collect-artifact-retry svg { width: 13px; height: 13px; }
.collect-artifact-details { min-width: 0; display: flex; flex-direction: column; align-self: stretch; gap: 7px; }
.collect-artifact-copy { min-width: 0; }
.collect-artifact-copy strong, .collect-artifact-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collect-artifact-copy strong { font-size: 11px; }
.collect-artifact-copy small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.collect-artifact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 7px; }
.collect-artifact-download { min-height: 28px; padding: 0 8px; font-size: 10px; }
.collect-artifact-download svg { width: 14px; height: 14px; }
.collect-artifact-actions .result-action { min-height: 28px; }
.collect-saved-label { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 10px; font-weight: 700; white-space: nowrap; }
.collect-saved-label svg { width: 14px; height: 14px; }
.collect-task-note { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.collect-task-note.error { color: var(--red); }
.collect-task-note.warning { color: var(--amber); }
.collect-task-note.success { color: var(--accent); }
.collect-task-recovery { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.collect-task-recovery .collect-task-note { flex: 1 1 130px; }
.collect-retry-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.collect-retry-button, .collect-edit-button { width: fit-content; min-height: 30px; padding: 0 9px; font-size: 10px; }

.watermark-view { gap: 16px; }
.watermark-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.watermark-hero h2, .watermark-hero p { margin: 0; letter-spacing: 0; }
.watermark-hero h2 { margin-top: 3px; font-size: 20px; }
.watermark-hero p { max-width: 720px; margin-top: 7px; color: var(--ink-soft); line-height: 1.65; }
.watermark-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.watermark-project-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border: 1px solid #bcd6d2; border-radius: 5px; background: var(--accent-soft); color: #0b5d57; font-size: 11px; font-weight: 700; white-space: nowrap; }
.watermark-project-pill svg { width: 15px; height: 15px; }
.watermark-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .84fr); min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; overflow: hidden; }
.watermark-source-panel, .watermark-result-panel { min-width: 0; }
.watermark-source-panel { display: grid; gap: 16px; padding: 20px; border-right: 1px solid var(--line); }
.watermark-result-panel { display: grid; grid-template-rows: auto minmax(250px, 1fr) auto; min-height: 520px; background: #fbfcfc; }
.watermark-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.watermark-section-head > div { min-width: 0; display: grid; gap: 4px; }
.watermark-section-head > div > span { color: var(--ink); font-size: 13px; font-weight: 800; }
.watermark-section-head small { color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.watermark-section-head > .watermark-head-actions { display: flex; align-items: center; gap: 8px; }
.watermark-head-actions .icon-button { width: 30px; height: 30px; min-height: 30px; }
.watermark-status, .watermark-result-label { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }
.watermark-status i, .watermark-result-label i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--line-strong); }
.watermark-status.active i, .watermark-result-label i.active { background: var(--blue); }
.watermark-status.ready i, .watermark-result-label i.ready { background: var(--accent); }
.watermark-status.error i { background: var(--red); }
.watermark-source-actions { width: min(360px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.watermark-source-command { min-width: 0; height: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 750; }
.watermark-source-command:hover, .watermark-source-command.active { border-color: #8bc8bd; background: var(--accent-soft); color: var(--accent-hover); }
.watermark-source-command.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.watermark-source-command.primary:hover { background: var(--accent-hover); }
.watermark-source-command.disabled, .watermark-source-command.disabled:hover { opacity: .48; border-color: var(--accent); background: var(--accent); color: #fff; cursor: not-allowed; }
.watermark-source-command input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.watermark-source-command svg { width: 16px; height: 16px; flex: 0 0 auto; }
.watermark-asset-picker { min-width: 0; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }
.watermark-asset-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.watermark-asset-heading small { font-weight: 500; }
.watermark-asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.watermark-asset-option { position: relative; min-width: 0; display: grid; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.watermark-asset-option:hover, .watermark-asset-option.active { border-color: #74a9a2; background: var(--accent-soft); }
.watermark-asset-thumb { width: 100%; aspect-ratio: 1.35; display: grid; place-items: center; overflow: hidden; border-radius: 3px; background: var(--surface-strong); color: var(--ink-soft); }
.watermark-asset-thumb img, .watermark-asset-thumb video { width: 100%; height: 100%; object-fit: cover; }
.watermark-asset-copy { min-width: 0; display: grid; gap: 2px; padding: 0 2px 2px; }
.watermark-asset-copy strong, .watermark-asset-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watermark-asset-copy strong { font-size: 10px; }
.watermark-asset-copy small { color: var(--ink-soft); font-size: 9px; }
.watermark-asset-check { position: absolute; top: 8px; right: 8px; display: grid; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.watermark-asset-check svg { width: 16px; height: 16px; }
.watermark-assets-empty { min-height: 76px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed var(--line-strong); color: var(--ink-soft); text-align: center; }
.watermark-assets-empty svg { width: 20px; height: 20px; color: var(--accent); }
.watermark-assets-empty span:last-child { font-size: 10px; }
.watermark-source-preview { min-height: 126px; display: grid; place-items: center; overflow: hidden; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #f5f8f8; }
.watermark-source-preview.has-source { padding: 0; background: #152024; }
.watermark-source-preview img, .watermark-source-preview video { width: 100%; height: 100%; max-height: 220px; object-fit: contain; }
.watermark-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.watermark-submit-row > div { min-width: 0; display: grid; gap: 3px; color: var(--ink-soft); font-size: 10px; }
.watermark-submit-row strong { color: var(--ink); font-size: 14px; }
.watermark-submit-row small { font-size: 9px; }
.watermark-result-panel > .watermark-section-head { padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.watermark-result-stage { min-height: 250px; display: grid; place-items: center; overflow: hidden; padding: 18px; background: #eef2f2; }
.watermark-result-stage.has-result { padding: 0; background: #152024; }
.watermark-result-stage img, .watermark-result-stage video { width: 100%; height: 100%; max-height: 420px; object-fit: contain; }
.watermark-stage-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--ink-soft); text-align: center; }
.watermark-stage-empty svg { width: 30px; height: 30px; color: var(--accent); }
.watermark-stage-empty strong { color: var(--ink); font-size: 12px; }
.watermark-stage-empty small { max-width: 260px; font-size: 10px; line-height: 1.5; }
.watermark-progress svg { color: var(--blue); }
.watermark-failed svg { color: var(--red); }
.watermark-result-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fff; }
.watermark-result-foot > div:first-child { min-width: 0; display: grid; gap: 3px; }
.watermark-result-foot strong, .watermark-result-foot small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watermark-result-foot strong { font-size: 11px; }
.watermark-result-foot small { color: var(--ink-soft); font-size: 9px; }
.watermark-result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.watermark-result-actions .secondary-button, .watermark-result-actions .primary-button { min-height: 32px; padding: 0 9px; font-size: 10px; }
.watermark-saved { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 10px; font-weight: 700; white-space: nowrap; }
.watermark-saved svg { width: 14px; height: 14px; }
.watermark-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--red); font-size: 10px; line-height: 1.5; }
.watermark-error svg { width: 14px; height: 14px; flex: 0 0 auto; }
.toolbar { flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.toolbar h2 { margin: 0; font-size: 16px; letter-spacing: 0; }
.toolbar p { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; }
.filter-row { flex-wrap: wrap; justify-content: flex-start; }
.filter-row label { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; }
.filter-row select { width: auto; min-width: 132px; }
.search-control { position: relative; min-width: min(280px, 100%); }
.search-control svg { position: absolute; top: 11px; left: 10px; width: 16px; height: 16px; color: #7b878b; }
.search-control input { padding-left: 34px; }
.logs-filter-row { width: min(100%, 500px); display: grid; grid-template-columns: minmax(120px, .85fr) minmax(150px, 1.15fr); align-items: center; gap: 8px; }
.logs-toolbar .logs-filter-row label { min-width: 0; align-items: center; flex-direction: row; }
.logs-filter-row > label:first-child select { min-width: 0; width: 100%; flex: 1 1 auto; }
.logs-filter-row .search-control { min-width: 0; width: 100%; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.project-card, .asset-card { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.project-card { width: 100%; display: grid; gap: 13px; padding: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.project-card:hover { border-color: #91b3ae; }
.project-card.current { border-color: #72a79f; background: #fbfdfd; }
.project-card header { display: flex; justify-content: space-between; gap: 12px; }
.project-card h3, .project-card p { margin: 0; letter-spacing: 0; }
.project-card h3 { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.project-card p { min-height: 36px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.project-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line); }
.project-card footer .project-choice { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 10px; font-weight: 700; }
.project-card footer .project-choice svg { width: 14px; height: 14px; }
.project-card footer small { color: var(--ink-soft); font-size: 10px; }
.row-copy { min-width: 0; }
.row-copy strong, .row-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-copy span { margin-top: 3px; color: var(--ink-soft); font-size: 11px; }

.asset-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.asset-preview { position: relative; width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; background: var(--surface-strong); color: #56666a; cursor: pointer; }
.asset-preview img, .asset-preview video { width: 100%; height: 100%; object-fit: cover; }
.asset-card { min-width: 0; }
.deliverable-mark { position: absolute; top: 7px; right: 7px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 4px; background: var(--accent); color: #fff; }
.deliverable-mark svg { width: 14px; height: 14px; }
.asset-center-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 6px 2px 2px; }
.asset-center-intro h2, .asset-center-intro p { margin: 0; letter-spacing: 0; }
.asset-center-intro h2 { margin-top: 3px; font-size: 20px; }
.asset-center-intro p { max-width: 680px; margin-top: 5px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.asset-center-view { gap: 14px; }
.asset-center-sync-error { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #e4c6a8; border-radius: 7px; background: #fffaf3; color: #8a5b24; }
.asset-center-sync-error > svg { width: 18px; height: 18px; flex: 0 0 auto; }
.asset-center-sync-error > div { min-width: 0; display: grid; gap: 3px; flex: 1 1 auto; }
.asset-center-sync-error strong { font-size: 11px; }
.asset-center-sync-error small { color: #9a7750; font-size: 10px; line-height: 1.45; }
.asset-center-sync-error .secondary-button { flex: 0 0 auto; min-height: 30px; padding-inline: 9px; font-size: 10px; }
.asset-center-tabs { min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; scrollbar-width: thin; }
.asset-center-tabs button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; padding: 0 15px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink-soft); font-size: 11px; font-weight: 750; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
.asset-center-tabs button:hover { border-color: var(--line); background: var(--surface-muted); color: var(--ink); }
.asset-center-tabs button.active { border-color: #c5dfda; background: var(--accent-soft); color: var(--accent-hover); }
.asset-center-tabs button svg { width: 15px; height: 15px; }
.asset-tab-panel { min-width: 0; display: grid; gap: 12px; }
.asset-tab-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 3px 2px 0; }
.asset-tab-heading h3, .asset-tab-heading p { margin: 0; letter-spacing: 0; }
.asset-tab-heading h3 { margin-top: 3px; font-size: 17px; }
.asset-tab-heading p { margin-top: 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.asset-tab-count { flex: 0 0 auto; color: var(--ink-soft); font-size: 10px; }
.asset-center-toolbar { align-items: flex-end; }
.asset-center-toolbar > .primary-button { flex: 0 0 auto; margin-left: auto; }
.asset-favorite-filter { min-height: 34px; display: inline-flex !important; align-items: center !important; flex-direction: row !important; gap: 7px !important; white-space: nowrap; }
.asset-favorite-filter input { width: 16px; height: 16px; accent-color: var(--accent); }
.favorite-mark { position: absolute; top: 8px; left: 8px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 4px; background: rgba(18, 30, 32, .78); color: #f3b6c4; }
.favorite-mark svg { width: 14px; height: 14px; }
.asset-subjects-panel > .subject-library, .asset-subjects-panel > .recovery-asset-library { margin-top: 2px; }
.prompt-library-toolbar { align-items: center; }
.prompt-editor { display: grid; gap: 12px; padding: 14px; border: 1px solid #c5dfda; border-radius: 8px; background: #fbfdfd; }
.prompt-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .46fr); gap: 10px; }
.prompt-editor-grid label { min-width: 0; display: grid; gap: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.prompt-editor-grid label.wide { grid-column: 1 / -1; }
.prompt-editor-grid textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.prompt-editor > footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.prompt-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.prompt-card { min-width: 0; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.prompt-card header, .prompt-card footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.prompt-card header > div { min-width: 0; display: grid; gap: 4px; }
.prompt-card-feature { color: var(--accent); font-size: 9px; font-weight: 800; }
.prompt-card header strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.prompt-card p { min-height: 76px; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.prompt-favorite-button { flex: 0 0 auto; color: var(--ink-soft); }
.prompt-favorite-button:hover, .prompt-favorite-button.active { border-color: #e7b8c3; background: #fff5f7; color: #b34f6b; }
.prompt-tag-row { min-height: 20px; display: flex; flex-wrap: wrap; gap: 5px; }
.prompt-tag-row span { padding: 3px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 9px; }
.prompt-card footer { align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.prompt-card footer small { color: var(--ink-soft); font-size: 9px; }
.prompt-card footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.prompt-card footer .text-button { min-height: 25px; padding-inline: 3px; font-size: 9px; }
.prompt-card footer .text-button.danger { color: var(--red); }
.asset-card-body { min-width: 0; display: grid; gap: 9px; padding: 10px; }
.asset-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; min-width: 0; }
.asset-card-heading > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-heading .status-badge { flex: 0 0 auto; }
.asset-card-body > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.asset-card-meta small { color: var(--ink-soft); font-size: 9px; }
.asset-lineage-note { overflow: hidden; color: var(--accent-dark); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-source { overflow: hidden; color: var(--ink-soft); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.partner-task-id { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 24px; align-items: center; gap: 5px; padding: 5px 6px; border: 1px solid #d7e3e1; border-radius: 4px; background: #f7fbfa; color: var(--ink-soft); }
.partner-task-id > span { font-size: 8px; font-weight: 800; white-space: nowrap; }
.partner-task-id code { min-width: 0; overflow: hidden; color: var(--accent-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.partner-task-id button, .log-partner-task-id button { width: 24px; min-height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--accent); cursor: pointer; }
.partner-task-id button:hover, .log-partner-task-id button:hover { background: var(--accent-soft); color: var(--accent-hover); }
.partner-task-id button svg, .log-partner-task-id button svg { width: 13px; height: 13px; }
.scope-temporary { background: var(--surface-strong); color: var(--ink-soft); }
.scope-project { background: var(--blue-soft); color: var(--blue); }
.scope-shared { background: var(--accent-soft); color: var(--accent); }
.asset-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.asset-card-actions button { min-height: 30px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 9px; cursor: pointer; }
.asset-card-actions button:hover { border-color: #94a5a9; color: var(--ink); }
.asset-card-library-action { min-width: 0; display: grid; gap: 4px; color: var(--ink-soft); font-size: 8px; font-weight: 700; }
.asset-card-library-action select { width: 100%; min-width: 0; min-height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font-size: 9px; }
.asset-card-library-action select:focus-visible { outline: 2px solid rgba(49, 129, 117, .28); outline-offset: 1px; }

/* Task history remains in the asset center, with one card per output or active run. */
.creation-results-view { gap: 14px; }
.results-overview {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 2px 2px;
}
.results-overview > div:first-child { min-width: 0; }
.results-overview h2, .results-overview p { margin: 0; letter-spacing: 0; }
.results-overview h2 { margin-top: 3px; font-size: 20px; }
.results-overview p { max-width: 680px; margin-top: 5px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.results-kicker { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.results-overview-actions { flex: 0 0 auto; }
.results-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.results-summary article { min-width: 0; display: grid; gap: 4px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.results-summary span { color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.results-summary strong { color: var(--ink); font-size: 19px; line-height: 1.15; }
.results-toolbar { padding-block: 10px; }
.creation-result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.creation-result-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.creation-result-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink-soft);
  cursor: pointer;
}
.creation-result-preview:hover { background: #e7eeee; }
.creation-result-preview img,
.creation-result-preview video { width: 100%; height: 100%; object-fit: contain; }
.creation-result-preview.is-pending { align-content: center; gap: 7px; color: var(--ink-soft); cursor: default; }
.creation-result-preview.is-pending svg { width: 25px; height: 25px; color: var(--accent); }
.creation-result-preview.is-pending small { font-size: 10px; font-weight: 700; }
.creation-result-live-label { position: absolute; right: 8px; bottom: 8px; min-height: 25px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 4px; background: rgba(18, 30, 32, .82); color: #fff; font-size: 9px; font-weight: 800; }
.creation-result-live-label svg { width: 12px; height: 12px; }
.creation-result-card-body { min-width: 0; display: grid; gap: 7px; padding: 10px; }
.creation-result-card-body > header,
.creation-result-card-body > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.creation-result-card-body > strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.creation-result-meta { overflow: hidden; color: var(--ink-soft); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.creation-result-card .partner-task-id { margin-top: -1px; }
.result-source-label { min-width: 0; overflow: hidden; color: var(--accent-hover); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.result-source-fantasy { color: #76569b; }
.result-source-reverse { color: #236f82; }
.result-source-workflow { color: var(--blue); }
.result-source-processing { color: var(--amber); }
.result-source-watermark { color: #177067; }
.result-source-live { color: #76569b; }
.result-source-video { color: var(--blue); }
.result-source-image-edit { color: var(--amber); }
.result-source-voice-create, .result-source-voice-change { color: var(--coral); }
.creation-result-card footer { min-height: 30px; padding-top: 7px; border-top: 1px solid var(--line); }
.creation-result-card .text-button { min-height: 28px; padding-inline: 3px; font-size: 10px; }
.result-save-button { min-height: 28px; padding-inline: 8px; font-size: 9px; }
.result-save-button svg { width: 13px; height: 13px; }
.creation-result-recovery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.result-saved-label { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 9px; font-weight: 800; white-space: nowrap; }
.result-saved-label svg { width: 13px; height: 13px; }
.creation-result-pending-note { color: var(--ink-soft); font-size: 9px; }

.subject-library { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.subject-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.subject-library-head h2, .subject-library-head p { margin: 0; letter-spacing: 0; }
.subject-library-head h2 { margin-top: 3px; font-size: 17px; }
.subject-library-head p { margin-top: 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.subject-library-kicker { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.subject-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.subject-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.subject-card.active { border-color: #79ada6; box-shadow: 0 0 0 1px #c5dfda; }
.subject-card-cover { position: relative; width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-strong); color: var(--accent); cursor: pointer; }
.subject-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.subject-card-cover.is-processed img { object-fit: contain; background: #eef2f2; }
.subject-card-cover > svg { width: 30px; height: 30px; }
.subject-lock-badge { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; min-height: 23px; padding: 0 7px; border: 1px solid #a5d0c8; border-radius: 4px; background: rgba(236, 249, 246, .92); color: #0b675e; font-size: 9px; font-weight: 800; }
.subject-lock-badge svg { width: 12px; height: 12px; }
.subject-card-body { display: grid; gap: 9px; padding: 10px; }
.subject-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.subject-card-title strong { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.subject-card-title small { color: var(--ink-soft); font-size: 9px; white-space: nowrap; }
.subject-tag-row { min-height: 18px; display: flex; flex-wrap: wrap; gap: 4px; }
.subject-tag-row span { padding: 3px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 9px; }
.subject-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.subject-card-actions button { min-height: 30px; padding-inline: 6px; font-size: 10px; }
.subject-empty, .recovery-asset-library-empty-all { min-height: 214px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 6px; text-align: center; }
.subject-empty-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.subject-empty-icon svg { width: 24px; height: 24px; }
.subject-empty strong, .recovery-asset-library-empty-all strong { font-size: 13px; }
.subject-empty p, .recovery-asset-library-empty-all p { max-width: 400px; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }

.recovery-asset-library { min-width: 0; display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.recovery-asset-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.recovery-asset-library-head h2, .recovery-asset-library-head p { margin: 0; letter-spacing: 0; }
.recovery-asset-library-head h2 { margin-top: 3px; font-size: 17px; }
.recovery-asset-library-head p { max-width: 680px; margin-top: 4px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.recovery-asset-library-panels { min-width: 0; display: grid; gap: 16px; }
.recovery-asset-library-panel { min-width: 0; display: grid; gap: 10px; }
.recovery-asset-library-panel-head { display: grid; gap: 10px; }
.recovery-asset-library-panel-head > div { min-width: 0; display: grid; gap: 4px; }
.recovery-asset-library-panel-head p, .recovery-asset-library-panel-head small { margin: 0; letter-spacing: 0; color: var(--ink-soft); line-height: 1.5; }
.recovery-asset-library-panel-head p { font-size: 10px; }
.recovery-asset-library-panel-head small { font-size: 9px; }
.recovery-asset-library-panel-title { min-width: 0; display: flex; align-items: center; gap: 8px; }
.recovery-asset-library-panel-title svg { width: 15px; height: 15px; color: var(--accent); }
.recovery-asset-library-panel-title strong { font-size: 12px; }
.recovery-asset-library-panel-title small { white-space: nowrap; }
.recovery-asset-library-grid { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.recovery-asset-library-card.processed { border-color: #a9cec7; background: #f7fbfa; }
.recovery-asset-library-card-cover.is-processed img { object-fit: contain; background: #eef2f2; }
.recovery-asset-library-empty { min-height: 112px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed #b8cbc7; border-radius: 6px; color: var(--ink-soft); text-align: center; }
.recovery-asset-library-empty svg { width: 20px; height: 20px; color: var(--accent); }
.recovery-asset-library-empty strong { color: var(--ink); font-size: 10px; }
.recovery-asset-library-empty small { font-size: 9px; }

.subject-dialog, .material-dialog { width: min(1180px, calc(100vw - 16px)); max-height: calc(100vh - 16px); }
.subject-dialog-header { align-items: flex-start; }
.subject-dialog-header > div { min-width: 0; display: grid; gap: 3px; }
.subject-dialog-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.subject-step { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: var(--ink-soft); font-size: 10px; cursor: pointer; }
.subject-step b { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-muted); color: var(--ink-soft); font-size: 10px; }
.subject-step.active { color: var(--ink); font-weight: 700; }
.subject-step.active b { border-color: var(--accent); background: var(--accent); color: #fff; }
.subject-step.complete b { border-color: #a6d1c9; background: var(--accent-soft); color: var(--accent); }
.subject-dialog-body { min-height: 560px; max-height: min(78vh, 720px); overflow-y: auto; }
.subject-form-step { display: grid; gap: 16px; }
.subject-cover-hero { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 7px; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 7px; background: var(--surface-muted); color: var(--ink-soft); text-align: center; }
.subject-cover-hero img { width: 180px; height: 180px; object-fit: contain; background: #eef2f2; }
.subject-cover-hero svg { width: 34px; height: 34px; color: var(--accent); }
.subject-cover-hero strong { color: var(--ink); font-size: 13px; }
.subject-cover-hero small { font-size: 10px; }
.subject-source-tabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: 11px; }
.subject-source-tab { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-soft); font-size: 10px; font-weight: 700; cursor: pointer; }
.subject-source-tab:hover, .subject-source-tab.active { border-color: #7eafa8; background: var(--accent-soft); color: var(--accent-hover); }
.subject-source-tab svg { width: 13px; height: 13px; }
.subject-source-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }
.subject-source-switch button { min-height: 29px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.subject-source-switch button:hover, .subject-source-switch button.active { background: #fff; color: var(--accent-hover); box-shadow: 0 1px 3px rgba(29, 45, 48, .08); }
.subject-source-switch button svg { width: 13px; height: 13px; }
.subject-local-upload { width: 100%; min-height: 54px; justify-content: center; align-self: center; position: relative; font-size: 10px; cursor: pointer; }
.subject-local-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.subject-source-empty { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--surface-muted); color: var(--ink-soft); font-size: 10px; }
.subject-source-empty svg { width: 15px; height: 15px; color: var(--accent); }
.subject-asset-picker-launch { width: 100%; min-height: 54px; justify-content: center; font-size: 10px; }
.dialog.existing-image-asset-picker-dialog { width: min(940px, calc(100vw - 28px)); }
.existing-image-asset-picker-body { max-height: min(68vh, 660px); overflow-y: auto; }
.existing-image-asset-picker-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.existing-image-asset-picker-intro > span { color: var(--ink); font-size: 12px; font-weight: 800; }
.existing-image-asset-picker-intro > small { color: var(--ink-soft); font-size: 10px; }
.existing-image-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.existing-image-asset-card { min-width: 0; position: relative; display: grid; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.existing-image-asset-card:hover, .existing-image-asset-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px #b6d8d2; }
.existing-image-asset-image { height: 210px; display: grid; place-items: center; overflow: hidden; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.existing-image-asset-image img { width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; object-fit: contain; object-position: center; }
.existing-image-asset-copy { min-width: 0; display: grid; gap: 3px; padding: 8px 9px; }
.existing-image-asset-copy strong, .existing-image-asset-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.existing-image-asset-copy strong { font-size: 10px; }
.existing-image-asset-copy small { color: var(--ink-soft); font-size: 9px; }
.existing-image-asset-selected { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 0 6px; border: 1px solid #9bc8c0; border-radius: 4px; background: rgba(244, 252, 250, .94); color: var(--accent-hover); font-size: 9px; font-weight: 800; }
.existing-image-asset-selected svg { width: 12px; height: 12px; }
.existing-image-asset-empty { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--surface-muted); text-align: center; }
.existing-image-asset-empty svg { width: 26px; height: 26px; color: var(--accent); }
.existing-image-asset-empty strong { font-size: 12px; }
.existing-image-asset-empty small { color: var(--ink-soft); font-size: 10px; }
.subject-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr); gap: 12px; }
.subject-form-label, .subject-form-grid label { display: grid; gap: 6px; color: #45545a; font-size: 11px; font-weight: 700; }
.subject-form-label > span, .subject-form-grid label > span { display: flex; align-items: center; gap: 5px; }
.subject-form-label em, .subject-form-grid em { color: var(--coral); font-size: 9px; font-style: normal; font-weight: 500; }
.subject-form-label small { color: var(--ink-soft); font-weight: 500; }
.subject-tag-picker, .subject-tag-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.subject-tag-picker button, .subject-tag-grid .subject-tag { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 10px; cursor: pointer; }
.subject-tag-picker button:hover, .subject-tag-picker button.active, .subject-tag-grid .subject-tag:hover, .subject-tag-grid .subject-tag.active { border-color: #7eafa8; background: var(--accent-soft); color: var(--accent-hover); }
.subject-tag-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.subject-tag-entry .secondary-button { min-height: 34px; padding-inline: 9px; font-size: 10px; }
.subject-tag-entry .secondary-button svg { width: 13px; height: 13px; }
.subject-custom-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.subject-custom-tag-list .subject-tag { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #b7d6d0; border-radius: 5px; background: var(--accent-soft); color: var(--accent-hover); font-size: 10px; cursor: pointer; }
.subject-custom-tag-list .subject-tag:hover { border-color: #d6a7a7; background: var(--red-soft); color: var(--red); }
.subject-custom-tag-list .subject-tag svg { width: 12px; height: 12px; }
.subject-source-empty-inline { color: var(--ink-soft); font-size: 10px; }
.subject-notes-wrap { position: relative; }
.subject-notes-wrap textarea { min-height: 78px; padding-right: 112px; }
.subject-notes-wrap button { position: absolute; right: 8px; bottom: 8px; min-height: 29px; padding-inline: 8px; font-size: 10px; }
.subject-form-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 9px 10px; border: 1px solid #e6baba; border-radius: 5px; background: var(--red-soft); color: var(--red); font-size: 10px; line-height: 1.45; }
.subject-form-error svg { width: 14px; height: 14px; flex: 0 0 auto; }
.subject-view-step { grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
.subject-view-summary { display: grid; gap: 8px; }
.subject-view-primary { aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); color: var(--accent); }
.subject-view-primary img { width: 100%; height: 100%; object-fit: cover; }
.subject-view-summary strong { font-size: 12px; }
.subject-view-summary small { color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.subject-view-editor { display: grid; gap: 12px; }
.subject-generated-triptych { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.subject-generated-triptych > small { color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.subject-generated-triptych img { width: 100%; aspect-ratio: 21 / 9; display: block; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.subject-view-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.subject-view-editor-head div { display: grid; gap: 3px; }
.subject-view-editor-head strong { font-size: 13px; }
.subject-view-editor-head small, .subject-view-editor-head > span { color: var(--ink-soft); font-size: 10px; }
.subject-view-method { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.subject-view-method > header { display: flex; align-items: center; gap: 9px; }
.subject-view-method > header > span, .subject-ai-method-copy > span { flex: 0 0 auto; color: var(--accent); font-size: 9px; font-weight: 800; }
.subject-view-method > header > div { display: grid; gap: 2px; }
.subject-view-method > header strong { font-size: 11px; }
.subject-view-method > header small { color: var(--ink-soft); font-size: 9px; }
.subject-view-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.subject-view-slot { min-width: 0; display: grid; grid-template-rows: minmax(172px, 1fr) auto; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.subject-view-slot:hover { border-color: #7eafa8; }
.subject-view-slot.is-locked { background: var(--surface-muted); }
.subject-view-slot-media { position: relative; min-height: 172px; display: grid; place-items: center; align-content: center; gap: 6px; overflow: hidden; background: var(--surface-muted); color: var(--ink-soft); text-align: center; }
.subject-view-slot-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #eef2f2; }
.subject-view-slot-media > span:not(.subject-view-clear), .subject-view-slot-media > svg { position: relative; z-index: 1; }
.subject-view-slot-media > span:not(.subject-view-clear) { display: grid; gap: 3px; padding: 7px 8px; border-radius: 4px; background: rgba(255,255,255,.9); }
.subject-view-slot-media strong { color: var(--ink); font-size: 11px; }
.subject-view-slot-media small { font-size: 9px; }
.subject-view-slot-media > svg { width: 25px; height: 25px; color: var(--accent); }
.subject-view-clear { position: absolute; z-index: 2; top: 6px; right: 6px; width: 27px; min-height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink-soft); cursor: pointer; }
.subject-view-clear:hover { color: var(--red); }
.subject-view-clear svg { width: 13px; height: 13px; }
.subject-view-slot-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 5px; border-top: 1px solid var(--line); }
.subject-view-slot-actions .secondary-button { min-width: 0; min-height: 32px; justify-content: center; padding-inline: 5px; font-size: 9px; white-space: nowrap; cursor: pointer; }
.subject-view-slot-actions > small { grid-column: 1 / -1; color: var(--accent-dark); font-size: 9px; font-weight: 700; text-align: center; }
.subject-view-slot-actions svg { width: 12px; height: 12px; }
.subject-view-upload { position: relative; }
.subject-view-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.subject-view-upload:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.subject-view-locked { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 5px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.subject-view-locked svg { width: 12px; height: 12px; }
.subject-view-asset-picker { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }
.subject-view-asset-picker > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.subject-view-asset-picker > header > div { display: grid; gap: 2px; }
.subject-view-asset-picker > header strong { font-size: 10px; }
.subject-view-asset-picker > header small { color: var(--ink-soft); font-size: 9px; }
.subject-view-asset-picker .icon-button { width: 28px; min-height: 28px; }
.subject-view-asset-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.subject-view-asset { width: 58px; height: 58px; flex: 0 0 auto; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; }
.subject-view-asset:hover, .subject-view-asset.active { border-color: var(--accent); box-shadow: 0 0 0 1px #b6d8d2; }
.subject-view-asset img { width: 100%; height: 100%; object-fit: cover; }
.review-input-method { gap: 12px; }
.review-format-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.review-format-switch button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 10px; font-weight: 700; cursor: pointer; }
.review-format-switch button:hover, .review-format-switch button.active { border-color: #7eafa8; background: var(--accent-soft); color: var(--accent-hover); }
.review-source-tabs { padding-top: 2px; }
.subject-view-slot-actions select { width: 100%; min-height: 32px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font: inherit; font-size: 9px; }
.review-input-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
.review-input-actions > small { color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.review-input-actions .primary-button { min-height: 34px; flex: 0 0 auto; padding-inline: 10px; font-size: 10px; }
.review-input-actions svg { width: 13px; height: 13px; }
.review-view-preview { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; }
.review-view-preview > span { min-width: 0; overflow: hidden; background: #eef2f2; }
.review-view-preview img { width: 100%; height: 100%; object-fit: contain; }
.subject-ai-method { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid #c8ddd9; border-radius: 6px; background: #f5faf9; }
.subject-ai-method.is-busy { border-color: #93bfb8; background: #f0f8f6; }
.subject-ai-method-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: #fff; color: var(--accent); }
.subject-ai-method-icon svg { width: 18px; height: 18px; }
.subject-ai-method-copy { min-width: 0; display: grid; gap: 3px; }
.subject-ai-method-copy strong { font-size: 11px; }
.subject-ai-method-copy small { color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.subject-ai-status { margin: 2px 0 0; color: var(--accent-dark); font-size: 9px; font-weight: 700; }
.subject-ai-method-action { display: grid; justify-items: end; gap: 5px; }
.subject-ai-method-action > small { color: var(--ink-soft); font-size: 9px; }
.subject-ai-method-action .primary-button { min-width: 102px; min-height: 34px; padding-inline: 10px; font-size: 10px; }
.subject-ai-method-action svg { width: 13px; height: 13px; }
.subject-ai-action-group { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.subject-ai-action-group .secondary-button, .subject-ai-action-group .primary-button { min-width: 0; }
.subject-confirm-step { grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
.subject-confirm-preview { aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }
.subject-confirm-preview img { width: 100%; height: 100%; object-fit: contain; background: #eef2f2; }
.subject-confirm-preview.is-triptych { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.subject-confirm-preview.is-triptych + .subject-confirm-copy { grid-column: 1 / -1; }
.subject-confirm-copy { display: grid; align-content: start; gap: 8px; padding-top: 4px; }
.subject-confirm-copy h3, .subject-confirm-copy p { margin: 0; }
.subject-confirm-copy h3 { font-size: 18px; }
.subject-confirm-copy p { color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.subject-confirm-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.subject-confirm-meta span { padding: 4px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 9px; }
.subject-confirm-views { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.subject-confirm-views > div { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }
.subject-confirm-views small { position: absolute; z-index: 1; top: 6px; left: 6px; padding: 3px 5px; border-radius: 3px; background: rgba(255,255,255,.88); color: var(--ink); font-size: 9px; }
.subject-confirm-views img { width: 100%; height: 100%; object-fit: contain; background: #eef2f2; }
.subject-confirm-view-button { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.subject-confirm-view-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.subject-confirm-view-zoom { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ink); opacity: 0; transition: opacity .15s ease; }
.subject-confirm-view-button:hover .subject-confirm-view-zoom, .subject-confirm-view-button:focus-visible .subject-confirm-view-zoom { opacity: 1; }
.subject-confirm-view-zoom svg { width: 13px; height: 13px; }

.material-type-switch { flex-wrap: wrap; justify-content: flex-end; }
.material-cover-hero { position: relative; }
.material-process-step { gap: 14px; }
.material-process-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.material-preview-card { min-width: 0; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.material-preview-card.is-ready { border-color: #a9cec7; background: #f7fbfa; }
.material-preview-card > small { color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.material-preview-card > strong { font-size: 11px; }
.material-preview-frame { position: relative; min-height: 220px; display: grid; place-items: center; align-content: center; gap: 5px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); color: var(--ink-soft); text-align: center; }
.material-preview-frame img { width: 100%; height: 100%; object-fit: contain; background: #eef2f2; }
.material-preview-frame svg { width: 24px; height: 24px; color: var(--accent); }
.material-preview-frame > span:not(.lucide) { display: grid; gap: 3px; padding: 8px 10px; border-radius: 5px; background: rgba(255,255,255,.92); }
.material-preview-frame strong { font-size: 11px; color: var(--ink); }
.material-preview-frame small { font-size: 9px; }
.material-preview-clear { justify-self: end; min-height: 30px; padding-inline: 8px; font-size: 9px; }
.material-confirm-step { grid-template-columns: minmax(0, 1fr); }
.material-confirm-views { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.material-confirm-views > div { position: relative; display: grid; gap: 6px; }
.material-confirm-views small { color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.material-confirm-frame { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); color: var(--ink-soft); }
.material-confirm-frame img { width: 100%; height: 100%; object-fit: contain; background: #eef2f2; }
.material-confirm-frame svg { width: 22px; height: 22px; color: var(--accent); }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.settings-overview article { min-width: 0; display: grid; gap: 5px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.settings-overview span, .settings-overview small { color: var(--ink-soft); font-size: 10px; }
.settings-overview span { font-weight: 700; }
.settings-overview strong { color: var(--ink); font-size: 19px; line-height: 1.2; }
.settings-panel { min-height: 194px; padding: 17px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.settings-panel h3, .settings-panel p { margin: 0; letter-spacing: 0; }
.settings-panel h3 { font-size: 14px; }
.settings-panel p { margin-top: 8px; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.settings-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.settings-hero h2, .settings-hero p { margin: 0; }
.settings-hero h2 { margin-top: 5px; font-size: 22px; }
.settings-hero p { max-width: 620px; margin-top: 8px; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.settings-kicker, .settings-panel-kicker { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.settings-mode-badge { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 9px; border: 1px solid #c7ded9; border-radius: 5px; background: var(--accent-soft); color: var(--accent-dark); font-size: 10px; font-weight: 700; }
.settings-mode-badge.is-attention { border-color: #e6c98f; background: #fff8e9; color: #9a6a12; }
.settings-mode-badge svg { width: 14px; height: 14px; }
.settings-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.settings-panel header > svg { width: 18px; height: 18px; color: var(--accent); }
.settings-panel label { display: grid; gap: 5px; margin-top: 14px; color: #48565a; font-size: 10px; font-weight: 700; }
.settings-panel input, .settings-panel select { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font: inherit; }
.settings-check-row { grid-template-columns: 18px 1fr; align-items: start; }
.settings-check-row input { width: 17px; min-height: 17px; padding: 0; accent-color: var(--accent); }
.settings-check-row span { display: grid; gap: 3px; }
.settings-check-row small { color: var(--ink-soft); font-size: 10px; font-weight: 400; }
.settings-panel label > small { color: var(--ink-soft); font-size: 9px; font-weight: 400; }
.settings-detail-list { display: grid; gap: 0; margin: 14px 0 0; border-top: 1px solid var(--line); }
.settings-detail-list div { min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.settings-detail-list dt { color: var(--ink-soft); font-size: 10px; }
.settings-detail-list dd { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.settings-detail-list dd.is-ready { color: var(--accent-dark); }
.settings-detail-list dd.is-attention { color: #9a6a12; }
.settings-bullet-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.settings-bullet-list li { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 8px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.settings-bullet-list li::before { width: 5px; height: 5px; margin-top: 5px; border-radius: 50%; background: var(--accent); content: ""; }
.settings-panel-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.settings-panel-actions .secondary-button { min-height: 32px; margin: 0; padding-inline: 9px; font-size: 10px; }
.settings-panel-actions svg { width: 13px; height: 13px; }
.settings-error { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid #e7c4c6; border-radius: 6px; background: #fff6f6; color: #a34148; font-size: 11px; }
.settings-error svg { width: 16px; height: 16px; flex: 0 0 auto; }
.workspace-settings-loading { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-soft); text-align: center; }
.workspace-settings-loading svg { width: 23px; height: 23px; color: var(--accent); }
.workspace-settings-loading strong { color: var(--ink); font-size: 13px; }
.workspace-settings-loading small { font-size: 10px; }
.activity-log-list { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.activity-log-row { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.activity-log-row:last-child { border-bottom: 0; }
.activity-log-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.activity-log-icon svg { width: 16px; height: 16px; }
.activity-log-copy { min-width: 0; display: grid; gap: 4px; }
.activity-log-copy strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.activity-log-copy small { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.activity-log-row .text-button { min-height: 28px; color: var(--accent); font-size: 10px; }
.log-dialog { width: min(560px, calc(100vw - 28px)); }
.log-detail-grid { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 9px 14px; padding: 2px 0; }
.log-detail-grid span { color: var(--ink-soft); font-size: 10px; }
.log-detail-grid strong { min-width: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 650; }
.log-partner-task-id { display: inline-flex; align-items: center; gap: 4px; }
.preview-task-id { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.preview-task-id code { max-width: 220px; overflow: hidden; color: var(--accent-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.preview-task-id button { width: 22px; min-height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--accent); cursor: pointer; }
.preview-task-id button:hover { background: var(--accent-soft); color: var(--accent-hover); }
.preview-task-id button svg { width: 12px; height: 12px; }
.log-detail-note { margin: 17px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; }

.dialog { width: min(680px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--ink); }
.dialog::backdrop { background: rgba(20, 30, 32, 0.48); }
.preview-dialog { width: min(820px, calc(100vw - 28px)); }
.dialog-header, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; }
.dialog-header { border-bottom: 1px solid var(--line); }
.dialog-header h2, .dialog-header small { margin: 0; letter-spacing: 0; }
.dialog-header h2 { margin-top: 2px; font-size: 17px; }
.dialog-header small { color: var(--ink-soft); font-size: 9px; text-transform: uppercase; }
.dialog-body { padding: 17px; }
.dialog-actions { border-top: 1px solid var(--line); background: var(--surface-muted); }
.form-stack { display: grid; gap: 13px; }
.form-stack > label { display: grid; gap: 6px; color: #48565a; font-size: 11px; font-weight: 700; }
.file-drop { min-height: 112px; place-items: center; align-content: center; padding: 16px; border: 1px dashed #9fb0b4; border-radius: 6px; background: var(--surface-muted); color: var(--ink-soft); text-align: center; cursor: pointer; }
.file-drop input { display: none; }
.file-drop svg { width: 24px; height: 24px; color: var(--accent); }
.file-drop strong { color: var(--ink); }
.file-drop small { font-weight: 400; }
.check-row { grid-template-columns: 18px 1fr; align-items: center; }
.check-row input { width: 17px; height: 17px; min-height: 0; padding: 0; accent-color: var(--accent); }
.check-row > span { display: grid; gap: 2px; }
.check-row small { color: var(--ink-soft); font-weight: 400; }
.privacy-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px; border: 1px solid #c9d9d7; border-radius: 6px; background: #f5faf9; color: #49605d; font-size: 10px; line-height: 1.55; }
.privacy-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); }
.preview-body { min-height: 420px; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 15px; background: #eef1f1; }
.preview-body img, .preview-body video { max-width: 100%; max-height: 62vh; border-radius: 5px; }
.preview-body audio { width: min(560px, 100%); }
.live-preview-dialog-media { width: 100%; min-height: min(62vh, 620px); display: grid; place-items: center; }
.live-preview-dialog-media img, .live-preview-dialog-media video { width: auto; height: auto; max-width: 100%; max-height: 62vh; object-fit: contain; }
.preview-meta { display: flex; gap: 15px; color: var(--ink-soft); font-size: 10px; }
.asset-lineage-panel { width: min(680px, 100%); display: grid; gap: 5px; padding: 12px; border: 1px solid #bfd8d3; border-radius: 6px; background: #fff; color: var(--ink); }
.asset-lineage-panel > small { color: var(--accent-dark); font-size: 10px; font-weight: 800; }
.asset-lineage-panel > strong { font-size: 12px; }
.asset-lineage-panel > span { color: var(--ink-soft); font-size: 11px; }
.asset-lineage-children { display: grid; gap: 6px; margin-top: 3px; }
.asset-lineage-children button { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-soft); color: var(--ink); cursor: pointer; text-align: left; }
.asset-lineage-children button:hover { border-color: #90bbb4; background: #f7fbfa; }
.asset-lineage-children button > span { color: var(--accent-dark); font-size: 10px; }
.asset-lineage-children button > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.asset-lineage-children button > small { grid-column: 1 / -1; overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 7px; }
.toast { max-width: 340px; padding: 10px 12px; border: 1px solid #8fb8b2; border-radius: 6px; background: #173d39; color: #fff; font-size: 11px; }
.toast.error { border-color: #c46767; background: #722f2f; }

/* Fantasy studio follows the reference product's control rail + result canvas layout. */
.fantasy-surface {
  min-width: 0;
  height: min(780px, calc(100vh - 112px));
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(300px, 350px) minmax(0, 1fr) 196px;
  overflow: hidden;
  border: 1px solid #2a3030;
  border-radius: 8px;
  background: #0b0d0d;
  color: #f2f4f1;
  box-shadow: 0 18px 46px rgba(15, 25, 25, 0.12);
}
.fantasy-controls { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-right: 1px solid #2a3030; }
.fantasy-controls-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 21px 18px; border-bottom: 1px solid #2a3030; }
.fantasy-controls-head h2, .fantasy-controls-head p { margin: 0; letter-spacing: 0; }
.fantasy-controls-head h2 { margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.fantasy-controls-head p { margin-top: 6px; color: #8f9a98; font-size: 11px; line-height: 1.5; }
.fantasy-kicker { color: #8fc7be; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.fantasy-project-pill { min-width: 0; display: inline-flex; align-items: center; gap: 6px; max-width: 138px; padding: 6px 8px; border: 1px solid #394544; border-radius: 4px; color: #b5c2bf; font-size: 10px; }
.fantasy-project-pill svg { width: 13px; height: 13px; color: #8fc7be; }
.fantasy-project-pill { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-control-scroll { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #3b4a48 transparent; }
.fantasy-control-section { display: grid; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #242b2b; }
.fantasy-control-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fantasy-control-section h3, .fantasy-control-section p { margin: 0; letter-spacing: 0; }
.fantasy-control-section h3 { font-size: 13px; font-weight: 700; color: #f1f4f1; }
.fantasy-control-section p { margin-top: 4px; color: #899592; font-size: 10px; line-height: 1.5; }
.fantasy-choice-grid { min-width: 0; display: grid; gap: 6px; }
.fantasy-choice-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fantasy-choice-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fantasy-choice { min-width: 0; min-height: 34px; padding: 7px 8px; overflow: hidden; border: 1px solid #36403f; border-radius: 4px; background: transparent; color: #aab5b2; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.fantasy-choice:hover { border-color: #6f9d96; color: #ecf3ef; }
.fantasy-choice.active { border-color: #cfe8e1; background: #e1eee9; color: #101817; font-weight: 700; }
.fantasy-label { margin-top: 3px; color: #8f9a98; font-size: 10px; font-weight: 700; }
.fantasy-hierarchy-step { display: grid; gap: 7px; min-width: 0; }
.fantasy-hierarchy-step-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fantasy-hierarchy-step-head > span { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #6f9d96; border-radius: 50%; color: #8fc7be; font-size: 9px; font-weight: 800; }
.fantasy-hierarchy-step-head > div { min-width: 0; display: grid; gap: 2px; }
.fantasy-hierarchy-step-head strong { color: #c0cbc7; font-size: 10px; }
.fantasy-hierarchy-step-head small { color: #84918e; font-size: 9px; line-height: 1.4; }
.fantasy-inline-field { min-width: 0; display: grid; gap: 5px; color: #8f9a98; font-size: 10px; }
.fantasy-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 0 24px 14px; color: #a4493f; font-size: 10px; line-height: 1.45; }
.fantasy-error svg { width: 14px; height: 14px; flex: 0 0 auto; }
.fantasy-field-pair { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fantasy-field-single { grid-template-columns: minmax(0, 1fr); }
.fantasy-field-pair label { min-width: 0; display: grid; gap: 5px; color: #8f9a98; font-size: 10px; }
.fantasy-select { min-width: 0; min-height: 35px; padding: 0 8px; border: 1px solid #36403f; border-radius: 4px; background: #151a19; color: #ecf3ef; font-size: 10px; }
.fantasy-select optgroup { color: #78918a; font-weight: 700; }
.fantasy-select option { color: #ecf3ef; }
.fantasy-select:focus { border-color: #8fc7be; outline: 2px solid rgba(143, 199, 190, .18); }
.fantasy-reference-block { display: grid; gap: 8px; padding-top: 4px; }
.fantasy-reference-head { display: flex; justify-content: space-between; gap: 8px; color: #b9c4c0; font-size: 10px; }
.fantasy-reference-head span { color: #8fc7be; }
.fantasy-reference-detail-hint { display: block; color: #84918e; font-size: 10px; line-height: 1.5; }
.fantasy-reference-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.fantasy-reference-source { min-width: 0; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; border: 1px solid #465652; border-radius: 5px; background: #151c1a; color: #c0cbc7; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.fantasy-reference-source:hover, .fantasy-reference-source.active { border-color: #8fc7be; color: #edf6f2; }
.fantasy-reference-source.primary { border-color: #8fc7be; background: #18322e; color: #dff2eb; }
.fantasy-reference-source input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fantasy-reference-source svg { width: 14px; height: 14px; flex: 0 0 auto; }
.fantasy-reference-source.disabled { opacity: .55; cursor: wait; }
.fantasy-asset-picker { display: grid; gap: 8px; padding: 10px; border: 1px solid #465652; border-radius: 5px; background: #111615; }
.fantasy-asset-picker > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fantasy-asset-picker > header > div { min-width: 0; display: grid; gap: 3px; }
.fantasy-asset-picker strong { color: #e9f0ec; font-size: 10px; }
.fantasy-asset-picker small { color: #84918e; font-size: 9px; }
.fantasy-asset-picker .icon-button { width: 28px; min-height: 28px; flex: 0 0 auto; border-color: #394544; background: transparent; color: #a8b4b1; }
.fantasy-reference-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid #394544; border-radius: 5px; background: #151c1a; }
.fantasy-reference-tabs button { min-width: 0; min-height: 29px; border: 0; border-radius: 3px; background: transparent; color: #93a09c; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.fantasy-reference-tabs button:hover, .fantasy-reference-tabs button.active { background: #243531; color: #e5f1ed; }
.fantasy-reference-grid { display: grid; gap: 6px; max-height: 222px; overflow: auto; padding-right: 2px; }
.fantasy-reference-option { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px; border: 1px solid #36403f; border-radius: 5px; background: #151a19; color: #c0cbc7; text-align: left; cursor: pointer; }
.fantasy-reference-option:hover, .fantasy-reference-option.active { border-color: #8fc7be; background: #18211f; }
.fantasy-reference-option > img { width: 42px; height: 42px; object-fit: cover; border-radius: 3px; background: #27302e; }
.fantasy-reference-option > span:nth-of-type(1) { min-width: 0; display: grid; gap: 3px; }
.fantasy-reference-option strong, .fantasy-reference-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-reference-option strong { color: #e9f0ec; font-size: 10px; }
.fantasy-reference-option small { color: #84918e; font-size: 9px; }
.fantasy-reference-check { color: #8fc7be; }
.fantasy-reference-check svg { width: 15px; height: 15px; }
.fantasy-reference-empty { min-height: 70px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 10px; border: 1px dashed #465652; border-radius: 5px; color: #84918e; font-size: 10px; text-align: center; }
.fantasy-reference-empty svg { width: 17px; height: 17px; color: #8fc7be; }
.fantasy-selected-reference { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 30px; align-items: center; gap: 8px; padding: 6px; border: 1px solid #50615d; border-radius: 5px; background: #151c1a; }
.fantasy-selected-reference > img { width: 42px; height: 42px; object-fit: cover; border-radius: 3px; background: #27302e; }
.fantasy-selected-reference > div { min-width: 0; display: grid; gap: 3px; }
.fantasy-selected-reference strong, .fantasy-selected-reference small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-selected-reference strong { color: #e9f0ec; font-size: 10px; }
.fantasy-selected-reference small { color: #8c9995; font-size: 9px; }
.fantasy-remove-reference { width: 30px; min-height: 30px; border-color: #394544; background: transparent; color: #a8b4b1; }
.fantasy-remove-reference:hover { border-color: #c57f73; background: #281b1a; color: #f1c5be; }
.fantasy-prompt { min-width: 0; min-height: 70px; padding: 9px 10px; border: 1px solid #36403f; border-radius: 4px; background: #151a19; color: #ecf3ef; font-size: 10px; line-height: 1.55; resize: vertical; }
.fantasy-prompt::placeholder { color: #65726f; }
.fantasy-prompt:focus { border-color: #8fc7be; outline: 2px solid rgba(143, 199, 190, .18); }
.fantasy-controls-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-top: 1px solid #2a3030; background: #101313; }
.fantasy-credit { min-width: 0; display: grid; gap: 3px; color: #87938f; font-size: 10px; }
.fantasy-credit strong { color: #e3ece8; font-size: 13px; }
.fantasy-generate-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 1px solid #d7ebe5; border-radius: 4px; background: #d7ebe5; color: #10201d; font-weight: 800; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; }
.fantasy-generate-button:hover { border-color: #fff; background: #fff; }
.fantasy-generate-button:disabled { opacity: .55; cursor: wait; }
.fantasy-preview-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #090b0b; }
.fantasy-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 15px; }
.fantasy-preview-head > div { display: grid; gap: 4px; }
.fantasy-preview-head span:first-child { color: #74827e; font-size: 9px; letter-spacing: .15em; }
.fantasy-preview-head h3 { margin: 0; color: #f1f4f1; font-size: 16px; font-weight: 600; }
.fantasy-status { display: inline-flex; align-items: center; gap: 6px; color: #87938f; font-size: 10px; }
.fantasy-status i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #5e6b68; }
.fantasy-status i.busy { background: #e2b271; animation: fantasy-pulse 1.2s ease-in-out infinite; }
.fantasy-status i.ready { background: #8fc7be; }
.fantasy-status i.error { background: #d27d72; }
@keyframes fantasy-pulse { 50% { opacity: .35; } }
.fantasy-canvas { position: relative; min-width: 0; min-height: 0; max-width: calc(100% - 48px); margin: 0; align-self: center; justify-self: center; display: grid; place-items: center; overflow: hidden; border: 1px solid #272e2d; border-radius: 5px; background: #111414; }
.fantasy-canvas[data-aspect-ratio="16:9"] { width: calc(100% - 48px); height: auto; aspect-ratio: 16 / 9; }
.fantasy-canvas[data-aspect-ratio="4:3"] { width: calc(100% - 48px); height: auto; aspect-ratio: 4 / 3; }
.fantasy-canvas[data-aspect-ratio="9:16"] { width: auto; height: 100%; aspect-ratio: 9 / 16; }
.fantasy-canvas[data-aspect-ratio="3:4"] { width: auto; height: 100%; aspect-ratio: 3 / 4; }
.fantasy-canvas[data-aspect-ratio="1:1"] { width: auto; height: 100%; aspect-ratio: 1 / 1; }
.fantasy-canvas > img { width: 100%; height: 100%; object-fit: contain; }
.fantasy-canvas.has-result { background: #f7f9f8; }
.fantasy-canvas.has-result > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; cursor: zoom-in; }
.fantasy-canvas .fantasy-standby { opacity: .52; filter: saturate(.78) brightness(.78); }
.fantasy-canvas-overlay { position: absolute; inset: 0; background: rgba(5, 8, 8, .3); pointer-events: none; }
.fantasy-standby-copy { position: absolute; inset: auto 24px 26px; display: grid; gap: 5px; color: #edf4f0; text-align: center; text-shadow: 0 1px 15px rgba(0, 0, 0, .7); }
.fantasy-standby-copy svg { width: 20px; height: 20px; margin: 0 auto 2px; color: #b9ded5; }
.fantasy-standby-copy strong { font-size: 15px; font-weight: 600; }
.fantasy-standby-copy small { color: #b5c1bd; font-size: 10px; }
.fantasy-loading { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 9px; background: rgba(4, 7, 7, .78); color: #ecf3ef; text-align: center; }
.fantasy-loading svg { width: 25px; height: 25px; color: #b9ded5; }
.fantasy-loading strong { font-size: 13px; }
.fantasy-loading small { color: #9ba8a4; font-size: 10px; }
.fantasy-preview-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px 20px; }
.fantasy-preview-foot > div:first-child { min-width: 0; display: grid; gap: 4px; }
.fantasy-preview-foot strong, .fantasy-preview-foot small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-preview-foot strong { color: #e8efeb; font-size: 11px; }
.fantasy-preview-foot small { color: #788581; font-size: 10px; }
.fantasy-result-actions { display: flex; align-items: center; gap: 6px; }
.fantasy-result-actions button { min-height: 34px; border-color: #35413f; background: #151a19; color: #bac5c1; font-size: 10px; }
.fantasy-result-actions button:hover:not(:disabled) { border-color: #8fc7be; color: #eef5f1; }
.fantasy-result-actions .primary-button { border-color: #d7ebe5; background: #d7ebe5; color: #10201d; }
.fantasy-result-actions .primary-button:hover:not(:disabled) { border-color: #fff; background: #fff; }
.fantasy-result-rail { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-left: 1px solid #2a3030; background: #101313; }
.fantasy-result-rail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 20px 14px 15px; border-bottom: 1px solid #2a3030; }
.fantasy-result-rail > header > div { min-width: 0; display: grid; gap: 4px; }
.fantasy-result-rail > header span { color: #8fc7be; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.fantasy-result-rail h3 { margin: 0; color: #f1f4f1; font-size: 13px; font-weight: 700; }
.fantasy-result-rail p { margin: 0; color: #87938f; font-size: 9px; line-height: 1.4; }
.fantasy-result-list { min-height: 0; max-height: 420px; display: grid; align-content: start; overflow-x: hidden; overflow-y: auto; padding: 4px 12px 10px; scrollbar-gutter: stable; }
.fantasy-result-row { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.fantasy-result-row:last-child { border-bottom: 0; }
.fantasy-result-row:hover:not(:disabled), .fantasy-result-row.active { background: rgba(143, 199, 190, .08); }
.fantasy-result-row:focus-visible { outline: 2px solid #8fc7be; outline-offset: -2px; }
.fantasy-result-row:disabled { cursor: wait; opacity: .62; }
.fantasy-result-thumb { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: rgba(255, 255, 255, .07); color: rgba(245, 245, 242, .54); }
.fantasy-result-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.fantasy-result-thumb svg { width: 16px; height: 16px; }
.fantasy-result-copy { min-width: 0; display: grid; align-content: center; gap: 3px; }
.fantasy-result-copy strong, .fantasy-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-result-copy strong { color: rgba(245, 245, 242, .82); font-size: 10px; }
.fantasy-result-copy small { color: rgba(245, 245, 242, .36); font-size: 9px; }
.fantasy-result-copy .status-badge { justify-self: start; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: rgba(245, 245, 242, .5); font-size: 9px; }
.fantasy-result-rail-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 7px; color: rgba(245, 245, 242, .35); text-align: center; }
.fantasy-result-rail-empty svg { width: 22px; height: 22px; color: #b7eddf; }
.fantasy-result-rail-empty strong { color: rgba(245, 245, 242, .66); font-size: 11px; }
.fantasy-result-rail-empty small { font-size: 9px; }

/* Fantasy studio uses the same light workspace canvas as the rest of the product. */
.fantasy-surface {
  border-color: #d5e0dd;
  background: #fff;
  color: #17211f;
  box-shadow: 0 18px 46px rgba(32, 61, 56, .08);
}
.fantasy-controls,
.fantasy-preview-panel { background: #fff; }
.fantasy-controls { border-right-color: #dbe5e2; }
.fantasy-controls-head,
.fantasy-control-section { border-color: #e3ebe9; }
.fantasy-controls-head h2,
.fantasy-control-section h3 { color: #17211f; }
.fantasy-controls-head p,
.fantasy-control-section p,
.fantasy-label,
.fantasy-field-pair label,
.fantasy-inline-field { color: #62736f; }
.fantasy-hierarchy-step-head > span { border-color: #80b8ae; color: #0f766e; }
.fantasy-hierarchy-step-head strong { color: #40534f; }
.fantasy-hierarchy-step-head small { color: #70817c; }
.fantasy-error { color: #a4493f; }
.fantasy-kicker,
.fantasy-reference-head span { color: #0f766e; }
.fantasy-reference-detail-hint { color: #70817c; }
.fantasy-project-pill,
.fantasy-reference-head { border-color: #d5e0dd; color: #536560; }
.fantasy-project-pill svg { color: #0f766e; }
.fantasy-control-scroll { scrollbar-color: #b7ccc7 transparent; }
.fantasy-choice {
  border-color: #d5e0dd;
  background: #fff;
  color: #536560;
}
.fantasy-choice:hover { border-color: #8fc7be; color: #17211f; }
.fantasy-choice.active { border-color: #80b8ae; background: #e4f2ef; color: #0c5f58; }
.fantasy-select,
.fantasy-prompt {
  border-color: #d5e0dd;
  background: #fff;
  color: #17211f;
}
.fantasy-select optgroup { color: #52736b; }
.fantasy-select option { color: #17211f; }
.fantasy-select:focus,
.fantasy-prompt:focus { border-color: #55a59a; outline-color: rgba(15, 118, 110, .16); }
.fantasy-prompt::placeholder { color: #81918d; }
.fantasy-reference-source { border-color: #b9d1cc; background: #fbfdfc; color: #40534f; }
.fantasy-reference-source:hover, .fantasy-reference-source.active { border-color: #72afa5; color: #0c5f58; }
.fantasy-reference-source.primary { border-color: #0f766e; background: #0f766e; color: #fff; }
.fantasy-asset-picker { border-color: #c5d9d5; background: #f7fbfa; }
.fantasy-asset-picker strong { color: #233330; }
.fantasy-asset-picker small { color: #70817c; }
.fantasy-asset-picker .icon-button { border-color: #d5e0dd; color: #60706c; }
.fantasy-reference-tabs { border-color: #d5e0dd; background: #fff; }
.fantasy-reference-tabs button { color: #70817c; }
.fantasy-reference-tabs button:hover, .fantasy-reference-tabs button.active { background: #e4f2ef; color: #0c5f58; }
.fantasy-reference-option { border-color: #d5e0dd; background: #fff; color: #40534f; }
.fantasy-reference-option:hover, .fantasy-reference-option.active { border-color: #80b8ae; background: #f2faf8; }
.fantasy-reference-option > img { background: #e8f0ee; }
.fantasy-reference-option strong { color: #233330; }
.fantasy-reference-option small { color: #70817c; }
.fantasy-reference-check, .fantasy-reference-empty svg { color: #0f766e; }
.fantasy-reference-empty { border-color: #b9d1cc; color: #70817c; }
.fantasy-selected-reference {
  border-color: #c5d9d5;
  background: #f7fbfa;
}
.fantasy-selected-reference > img { background: #e8f0ee; }
.fantasy-selected-reference strong { color: #233330; }
.fantasy-selected-reference small { color: #70817c; }
.fantasy-remove-reference { border-color: #d5e0dd; background: #fff; color: #60706c; }
.fantasy-remove-reference:hover { border-color: #c98f85; background: #fff7f5; color: #9b4e42; }
.fantasy-controls-foot { border-color: #dbe5e2; background: #f7faf9; }
.fantasy-credit { color: #687a75; }
.fantasy-credit strong { color: #17211f; }
.fantasy-generate-button { border-color: #0f766e; background: #0f766e; color: #fff; }
.fantasy-generate-button:hover { border-color: #0b625c; background: #0b625c; }
.fantasy-preview-panel { border-left: 1px solid #edf2f1; }
.fantasy-preview-head { border-bottom: 1px solid #e3ebe9; }
.fantasy-preview-head span:first-child { color: #6f817b; }
.fantasy-preview-head h3 { color: #17211f; }
.fantasy-status { color: #62736f; }
.fantasy-status i { background: #a7b7b3; }
.fantasy-canvas { border-color: #dbe5e2; background: #fff; }
.fantasy-canvas .fantasy-standby { opacity: .16; filter: saturate(.75) brightness(1.04); }
.fantasy-canvas-overlay { background: rgba(255, 255, 255, .1); }
.fantasy-standby-copy { color: #17211f; text-shadow: none; }
.fantasy-standby-copy svg { color: #0f766e; }
.fantasy-standby-copy small { color: #62736f; }
.fantasy-loading { background: rgba(255, 255, 255, .86); color: #17211f; }
.fantasy-loading svg { color: #0f766e; }
.fantasy-loading small { color: #62736f; }
.fantasy-preview-foot { border-top: 1px solid #e3ebe9; }
.fantasy-preview-foot strong { color: #233330; }
.fantasy-preview-foot small { color: #70817c; }
.fantasy-result-actions button { border-color: #d5e0dd; background: #fff; color: #536560; }
.fantasy-result-actions button:hover:not(:disabled) { border-color: #72afa5; color: #0c5f58; }
.fantasy-result-actions .primary-button { border-color: #0f766e; background: #0f766e; color: #fff; }
.fantasy-result-actions .primary-button:hover:not(:disabled) { border-color: #0b625c; background: #0b625c; }
.fantasy-result-rail { border-left-color: #dbe5e2; background: #fff; }
.fantasy-result-rail > header { border-bottom-color: #e3ebe9; }
.fantasy-result-rail > header span { color: #0f766e; }
.fantasy-result-rail h3 { color: #17211f; }
.fantasy-result-rail p { color: #70817c; }
.fantasy-result-row { border-bottom-color: #e3ebe9; }
.fantasy-result-row:hover:not(:disabled), .fantasy-result-row.active { background: #eff8f6; }
.fantasy-result-thumb { background: #edf3f1; color: #70817c; }
.fantasy-result-copy strong { color: #233330; }
.fantasy-result-copy small { color: #70817c; }
.fantasy-result-copy .status-badge { border-color: #d5e0dd; background: #f7faf9; color: #62736f; }
.fantasy-result-rail-empty { color: #70817c; }
.fantasy-result-rail-empty svg { color: #0f766e; }
.fantasy-result-rail-empty strong { color: #233330; }

@media (max-width: 1180px) {
  :root { --sidebar-width: 176px; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 18px; }
  .creator-surface { grid-template-columns: minmax(0, 1fr) 280px; }
  .asset-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .creation-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .subject-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recovery-asset-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prompt-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-surface { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) 172px; }
}

@media (max-width: 920px) {
  :root { --sidebar-width: 68px; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand > span:last-child, .main-nav button > span:last-child, .sidebar-footer > button > span:last-child, .account-summary > span:last-child { display: none; }
  .main-nav button, .sidebar-footer > button { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .account-summary { justify-content: center; padding-inline: 0; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .topbar-actions .secondary-button span:last-child { display: none; }
  .creator-surface, .collect-workspace { grid-template-columns: 1fr; }
  .fantasy-surface { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .fantasy-controls { border-right: 0; border-bottom: 1px solid #dbe5e2; }
  .fantasy-control-scroll { overflow: visible; }
  .fantasy-preview-panel { min-height: 620px; }
  .fantasy-result-rail { order: 3; border-left: 0; border-top: 1px solid #dbe5e2; }
  .fantasy-result-list { grid-template-columns: 1fr; gap: 0; }
  .fantasy-result-row { border-bottom: 1px solid #e3ebe9; }
  .creator-main, .collect-workspace-head, .collect-entry { border-right: 0; }
  .collect-workspace-head { flex-direction: column; }
  .creator-rail { border-top: 1px solid var(--line); }
  .result-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .result-row { border-bottom: 0; }
  .asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creation-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subject-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recovery-asset-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prompt-card-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  body { padding-bottom: 64px; }
  .sidebar { display: none; width: min(280px, calc(100vw - 44px)); box-shadow: none; }
  .sidebar.mobile-open { display: flex; }
  .sidebar.mobile-open .brand { justify-content: flex-start; padding-inline: 8px; }
  .sidebar.mobile-open .brand > span:last-child, .sidebar.mobile-open .main-nav button > span:last-child, .sidebar.mobile-open .sidebar-footer > button > span:last-child, .sidebar.mobile-open .account-summary > span:last-child { display: grid; }
  .sidebar.mobile-open .main-nav button, .sidebar.mobile-open .sidebar-footer > button { grid-template-columns: 20px 1fr; justify-items: stretch; padding: 0 11px; }
  .sidebar.mobile-open .account-summary { justify-content: flex-start; padding-inline: 9px; }
  .main-shell { margin-left: 0; }
  .topbar { position: static; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .mobile-menu { display: inline-flex; }
  .topbar-actions { grid-column: 2; grid-row: 1; }
  .topbar-actions .secondary-button { width: 38px; padding: 0; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 40; height: 64px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-top: 1px solid var(--line); background: #fff; padding-bottom: env(safe-area-inset-bottom); }
  .mobile-nav button { display: grid; place-items: center; align-content: center; gap: 3px; border: 0; background: transparent; color: var(--ink-soft); font-size: 9px; }
  .results-overview { align-items: flex-start; flex-direction: column; gap: 12px; }
  .results-overview-actions, .results-overview-actions .secondary-button { width: 100%; }
  .asset-center-intro { align-items: flex-start; flex-direction: column; gap: 12px; }
  .results-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creation-result-grid { grid-template-columns: 1fr; }
  .mobile-nav button svg { width: 18px; height: 18px; }
  .mobile-nav button.active { color: var(--accent); font-weight: 700; }
  .status-bar { margin: 10px 12px 0; }
  .content { padding: 12px; }
  .creator-header { align-items: flex-start; flex-direction: column; padding: 15px; }
  .fantasy-controls-head, .fantasy-preview-head, .fantasy-preview-foot, .fantasy-controls-foot { padding-inline: 15px; }
  .fantasy-controls-head { flex-direction: column; }
  .fantasy-project-pill { max-width: 100%; }
  .fantasy-control-section { padding-inline: 15px; }
  .fantasy-field-pair { grid-template-columns: 1fr; }
  .fantasy-choice-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-canvas { min-height: 390px; max-width: calc(100% - 30px); }
  .fantasy-canvas[data-aspect-ratio="16:9"],
  .fantasy-canvas[data-aspect-ratio="4:3"] { width: calc(100% - 30px); }
  .fantasy-preview-panel { min-height: 0; }
  .fantasy-preview-foot { align-items: stretch; flex-direction: column; }
  .fantasy-result-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fantasy-result-actions button { min-width: 0; padding-inline: 6px; }
  .fantasy-result-list { grid-template-columns: 1fr; }
  .fantasy-controls-foot { align-items: stretch; flex-direction: column; }
  .fantasy-generate-button { width: 100%; }
  .creation-engine-switch { width: 100%; }
  .output-switch { width: 100%; grid-template-columns: repeat(3, 1fr); }
  .creator-section { padding: 15px; }
  .creation-composer-toolbar { align-items: stretch; grid-template-columns: 1fr; }
  .composer-output-switch { grid-row: 1; }
  .creation-assist-actions { grid-row: 2; }
  .asset-choice-grid, .template-choice-grid, .template-field-grid, .creator-fields, .creator-field-row, .template-option-grid { grid-template-columns: 1fr; }
  .creator-fields .wide, .template-field-grid .wide { grid-column: auto; }
  .creation-assist-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
  .creation-assist-button { width: 100%; max-width: none; }
  .creation-assist-button:only-child { grid-column: 1 / 3; }
  .creation-inline-panel { padding: 11px; }
  .creation-local-upload { justify-content: flex-start; }
  .asset-option { grid-template-columns: 44px minmax(0, 1fr) 18px; }
  .asset-option-preview { width: 44px; height: 44px; }
  .creation-footer { align-items: stretch; flex-direction: column; padding: 14px 15px; }
  .creation-actions { display: grid; grid-template-columns: 1fr; }
  .result-list { grid-template-columns: 1fr; }
  .tool-list { grid-template-columns: 1fr; }
  .tool-command, .tool-command:nth-child(2n), .tool-command:nth-last-child(-n + 2) { min-height: 116px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tool-command:last-child { border-bottom: 0; }
  .collect-entry { min-height: 280px; padding: 20px; }
  .collect-fields { grid-template-columns: 1fr; }
  .collect-fields label.wide { grid-column: auto; }
  .collect-submit-row { align-items: stretch; flex-direction: column; }
  .collect-submit-row .primary-button { width: 100%; }
  .project-grid, .asset-grid, .settings-grid { grid-template-columns: 1fr; }
  .subject-card-grid { grid-template-columns: 1fr; }
  .subject-library { padding: 14px; }
  .subject-library-head { align-items: stretch; flex-direction: column; }
  .subject-library-head .primary-button { width: 100%; }
  .recovery-asset-library { padding: 14px; }
  .recovery-asset-library-head { align-items: stretch; flex-direction: column; }
  .recovery-asset-library-head .primary-button { width: 100%; }
  .recovery-asset-library-grid { grid-template-columns: 1fr; }
  .asset-center-tabs { margin-inline: -2px; }
  .asset-center-tabs button { flex: 1 0 auto; padding-inline: 12px; }
  .asset-center-sync-error { align-items: stretch; flex-direction: column; }
  .asset-center-sync-error .secondary-button { width: 100%; }
  .asset-tab-heading { align-items: stretch; flex-direction: column; }
  .prompt-editor-grid { grid-template-columns: 1fr; }
  .prompt-editor-grid label.wide { grid-column: auto; }
  .prompt-card footer { align-items: stretch; flex-direction: column; }
  .prompt-card footer > div { justify-content: flex-start; }
  .subject-form-grid, .subject-view-step, .subject-confirm-step { grid-template-columns: 1fr; }
  .material-source-board, .material-process-grid, .material-confirm-views { grid-template-columns: 1fr; }
  .subject-view-summary { grid-template-columns: 92px minmax(0, 1fr); align-items: center; }
  .subject-view-primary { grid-row: span 2; }
  .subject-view-summary strong, .subject-view-summary small { grid-column: 2; }
  .subject-view-grid, .subject-confirm-views { grid-template-columns: 1fr; }
  .subject-view-slot { min-height: 0; grid-template-columns: 118px minmax(0, 1fr); grid-template-rows: minmax(118px, auto); }
  .subject-view-slot-media { min-height: 118px; }
  .subject-view-slot-actions { grid-template-columns: 1fr; align-content: center; border-top: 0; border-left: 1px solid var(--line); }
  .review-input-actions { align-items: stretch; flex-direction: column; }
  .review-input-actions .primary-button { width: 100%; }
  .subject-view-locked { border-top: 0; border-left: 1px solid var(--line); }
  .subject-ai-method { grid-template-columns: 34px minmax(0, 1fr); }
  .subject-ai-method-action { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; width: 100%; }
  .subject-ai-method-action .primary-button { justify-self: end; }
  .subject-ai-action-group { justify-content: flex-start; }
  .subject-dialog-body { min-height: 0; max-height: calc(100vh - 190px); }
  .toolbar { align-items: stretch; flex-direction: column; }
  .asset-center-toolbar > .primary-button { width: 100%; margin-left: 0; }
  .filter-row, .toolbar-actions { align-items: stretch; flex-direction: column; }
  .filter-row label { align-items: stretch; flex-direction: column; }
  .filter-row select, .search-control { width: 100%; }
  .preview-meta { flex-direction: column; gap: 4px; }
  .toast-region { right: 10px; bottom: 74px; left: 10px; }
  .toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Replacement keeps both material roles visible and gives the generated image a stable stage. */
.replacement-studio { min-width: 0; display: grid; gap: 14px; }
.replacement-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.replacement-header h2, .replacement-header p { margin: 0; }
.replacement-header h2 { margin-top: 3px; font-size: 20px; }
.replacement-header p { margin-top: 4px; color: var(--ink-soft); font-size: 11px; }
.replacement-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.replacement-project-pill { min-width: 0; max-width: 45%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.replacement-project-pill svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }
.replacement-mode-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.replacement-mode-switch button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink-soft); font-size: 11px; font-weight: 750; cursor: pointer; }
.replacement-mode-switch button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.replacement-mode-switch button.active { border-color: var(--line); background: #fff; color: var(--accent-hover); box-shadow: 0 1px 2px rgba(29, 45, 48, .06); }
.replacement-workspace { min-width: 0; display: grid; grid-template-columns: minmax(188px, .82fr) 30px minmax(188px, .82fr) minmax(280px, 1.2fr); align-items: stretch; gap: 10px; }
.replacement-material-panel, .replacement-result-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 7px 20px rgba(29, 45, 48, .04); }
.replacement-material-panel { position: relative; display: grid; grid-template-rows: repeat(4, auto); align-content: start; padding: 13px; gap: 9px; }
.replacement-material-panel > header, .replacement-result-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.replacement-material-panel header > div, .replacement-result-panel header > div { min-width: 0; display: grid; gap: 3px; }
.replacement-material-panel header span, .replacement-result-panel header span:first-child { color: var(--ink); font-size: 12px; font-weight: 800; }
.replacement-material-panel header small, .replacement-result-panel header small { color: var(--ink-soft); font-size: 9px; line-height: 1.4; }
.replacement-clear-button { width: 28px; min-height: 28px; flex: 0 0 auto; }
.replacement-clear-button svg { width: 13px; height: 13px; }
.replacement-material-preview { min-height: 300px; max-height: 520px; aspect-ratio: 3 / 4; justify-self: center; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--surface-muted); color: var(--accent); }
.replacement-material-panel.has-asset .replacement-material-preview { border-style: solid; background: #192226; }
.replacement-material-preview img { width: 100%; height: 100%; object-fit: contain; }
.replacement-material-preview svg { width: 28px; height: 28px; }
.replacement-material-panel > strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.replacement-material-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.replacement-material-actions .secondary-button { min-width: 0; min-height: 32px; gap: 4px; padding-inline: 6px; font-size: 10px; }
.replacement-material-actions .secondary-button.active { border-color: #79a9a3; background: var(--accent-soft); color: var(--accent-hover); }
.replacement-material-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.replacement-material-dialog { width: min(980px, calc(100vw - 28px)); }
.replacement-material-dialog-body { max-height: min(78vh, 760px); display: grid; gap: 14px; overflow-y: auto; }
.replacement-material-dialog-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.replacement-material-dialog-intro > div { min-width: 0; display: grid; gap: 4px; }
.replacement-material-dialog-intro strong { color: var(--ink); font-size: 14px; }
.replacement-material-dialog-intro small, .replacement-material-dialog-intro > span, .replacement-material-dialog-note { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.replacement-material-dialog-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.replacement-material-dialog-tabs button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink-soft); font-size: 10px; font-weight: 750; cursor: pointer; }
.replacement-material-dialog-tabs button:hover, .replacement-material-dialog-tabs button.active { border-color: var(--line); background: #fff; color: var(--accent-hover); box-shadow: 0 1px 2px rgba(29, 45, 48, .06); }
.replacement-material-dialog-tabs button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.replacement-material-dialog-content { min-width: 0; }
.replacement-material-dialog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.replacement-material-dialog-card { position: relative; min-width: 0; display: grid; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.replacement-material-dialog-card:hover, .replacement-material-dialog-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px #b6d8d2; }
.replacement-material-dialog-card-image { height: 250px; display: grid; place-items: center; overflow: hidden; padding: 7px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.replacement-material-dialog-card-image img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.replacement-material-dialog-card-copy { min-width: 0; display: grid; gap: 3px; padding: 8px 9px; }
.replacement-material-dialog-card-copy strong, .replacement-material-dialog-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replacement-material-dialog-card-copy strong { font-size: 10px; }
.replacement-material-dialog-card-copy small { color: var(--ink-soft); font-size: 9px; }
.replacement-material-dialog-card > i { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 4px 5px; border-radius: 4px; background: rgba(24, 82, 76, .9); color: #fff; font-size: 9px; font-style: normal; font-weight: 700; }
.replacement-material-dialog-card > i svg { width: 13px; height: 13px; }
.replacement-material-dialog-local-area { width: 100%; display: grid; justify-items: center; gap: 6px; padding: 22px 0 6px; text-align: center; }
.replacement-material-dialog-local { width: min(100%, 560px); min-height: 220px; justify-content: center; margin: 0; border: 1px dashed var(--line-strong); background: var(--surface-muted); color: var(--accent-hover); cursor: pointer; }
.replacement-material-dialog-local:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.replacement-material-dialog-local svg { width: 20px; height: 20px; }
.replacement-material-dialog-local input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.replacement-material-dialog-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--surface-muted); color: var(--ink-soft); text-align: center; }
.replacement-material-dialog-empty svg { width: 30px; height: 30px; color: var(--accent); }
.replacement-material-dialog-empty strong { color: var(--ink); font-size: 12px; }
.replacement-material-dialog-empty small { max-width: 340px; font-size: 10px; line-height: 1.5; }
.replacement-flow { display: grid; place-items: center; color: var(--accent); }
.replacement-flow svg { width: 19px; height: 19px; }
.replacement-result-panel { min-height: 286px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.replacement-result-panel > header { padding: 13px 14px 10px; border-bottom: 1px solid var(--line); }
.replacement-status { min-height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 9px; font-weight: 750; }
.replacement-status i { width: 6px; height: 6px; border-radius: 50%; background: #a7b2b4; }
.replacement-status.running i, .replacement-status.queued i { background: var(--blue); }
.replacement-status.completed i { background: #2f8b6f; }
.replacement-status.failed i, .replacement-status.cancelled i { background: var(--red); }
.replacement-result-stage { min-height: 232px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 12px; background: var(--surface-muted); color: var(--ink-soft); text-align: center; }
.replacement-result-stage.has-result { padding: 0; overflow: hidden; background: var(--surface-strong); }
.replacement-result-stage > img { width: 100%; height: 100%; min-height: 232px; max-height: 430px; object-fit: contain; }
.replacement-result-stage svg { width: 28px; height: 28px; color: var(--accent); }
.replacement-result-stage strong { color: var(--ink); font-size: 12px; }
.replacement-result-stage small { font-size: 10px; }
.replacement-result-failed svg { color: var(--red); }
.replacement-result-panel > footer { min-height: 56px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding: 9px 12px; border-top: 1px solid var(--line); }
.replacement-result-panel > footer .secondary-button, .replacement-result-panel > footer .primary-button { min-height: 31px; padding-inline: 8px; font-size: 10px; }
.replacement-saved { display: inline-flex; align-items: center; gap: 5px; color: #2f8b6f; font-size: 10px; font-weight: 750; }
.replacement-saved svg { width: 13px; height: 13px; }
.replacement-submit-row { display: flex; align-items: flex-end; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.replacement-submit-controls { min-width: 0; display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.replacement-aspect-control, .replacement-model-control, .replacement-cost { min-width: 150px; display: grid; gap: 3px; }
.replacement-aspect-control > span, .replacement-model-control > span, .replacement-cost > span { color: var(--ink-soft); font-size: 9px; }
.replacement-aspect-control select, .replacement-model-control select { min-height: 32px; padding: 0 26px 0 8px; font-size: 10px; font-weight: 700; }
.replacement-cost { min-height: 32px; align-content: center; }
.replacement-cost strong { color: var(--ink); font-size: 12px; }
.replacement-run-button { min-width: 124px; }
.replacement-error { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--red); font-size: 10px; }
.replacement-error svg { width: 14px; height: 14px; flex: 0 0 auto; }

@media (max-width: 1120px) {
  .replacement-workspace { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
  .replacement-result-panel { grid-column: 1 / -1; min-height: 360px; }
}

@media (max-width: 680px) {
  .replacement-header { align-items: stretch; flex-direction: column; }
  .replacement-project-pill { max-width: 100%; width: fit-content; }
  .replacement-mode-switch button { padding-inline: 4px; font-size: 10px; }
  .replacement-mode-switch button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .replacement-workspace { grid-template-columns: 1fr; }
  .replacement-flow { transform: rotate(90deg); }
  .replacement-material-panel { grid-template-rows: repeat(4, auto); }
  .replacement-material-preview { min-height: 360px; }
  .replacement-material-dialog { width: calc(100vw - 20px); }
  .replacement-material-dialog-body { max-height: 78vh; padding: 14px; }
  .replacement-material-dialog-tabs { grid-template-columns: 1fr; }
  .replacement-material-dialog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .replacement-material-dialog-card-image { height: 220px; }
  .replacement-result-panel { grid-column: auto; min-height: 340px; }
  .replacement-result-stage, .replacement-result-stage > img { min-height: 260px; }
  .replacement-submit-row { align-items: stretch; display: block; }
  .replacement-submit-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-left: 0; }
  .replacement-aspect-control, .replacement-model-control, .replacement-cost, .replacement-run-button { min-width: 0; width: 100%; }
  .replacement-aspect-control, .replacement-model-control { grid-column: 1 / -1; }
  .replacement-submit-controls .ghost-button { min-width: 0; }
}

@media (max-width: 680px) {
  .settings-hero { flex-direction: column; padding: 15px; }
  .settings-mode-badge { align-self: flex-start; }
  .settings-overview { grid-template-columns: 1fr; }
  .activity-log-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; padding: 11px 12px; }
  .activity-log-row .status-badge { display: none; }
  .activity-log-row .text-button { grid-column: 2 / -1; justify-self: start; }
  .log-detail-grid { grid-template-columns: 92px minmax(0, 1fr); }
}

/* Creation studio follows the reference project's dark, canvas-first geometry. */
.creation-studio {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 188px;
  gap: 14px;
  color: #f5f5f2;
}
.creation-studio-main { min-width: 0; }
.creation-studio-form {
  min-width: 0;
  display: grid;
  gap: 12px;
}
.creation-studio-header,
.creation-studio-editor,
.creation-studio-settings,
.creation-studio-preview-panel,
.creation-studio-footer,
.creation-studio-rail {
  border: 1px solid rgba(255, 255, 255, .09);
  background: #080c0d;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .14);
}
.creation-studio-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 78px;
  padding: 12px 14px;
  border-radius: 24px;
}
.creation-studio-mode-switch {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(126px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
}
.creation-studio-mode {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(245, 245, 242, .48);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.creation-studio-mode svg { width: 17px; height: 17px; }
.creation-studio-mode:hover { color: rgba(245, 245, 242, .86); background: rgba(255, 255, 255, .05); }
.creation-studio-mode.active {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .11);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 16px 36px rgba(0, 0, 0, .16);
}
.creation-studio-header-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.creation-studio-video-workflows { min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 3px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 13px; background: rgba(255, 255, 255, .035); scrollbar-width: thin; }
.creation-studio-video-workflows button { min-height: 32px; flex: 0 0 auto; padding: 0 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: rgba(245, 245, 242, .48); font-size: 10px; font-weight: 700; cursor: pointer; }
.creation-studio-video-workflows button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.creation-studio-video-workflows button.active { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .12); color: #fff; }
.creation-studio .creation-engine-switch {
  min-width: 0;
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
}
.creation-studio .creation-engine-option {
  min-height: 38px;
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(245, 245, 242, .52);
}
.creation-studio .creation-engine-option:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.creation-studio .creation-engine-option.active {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: none;
}
.creation-studio .creation-engine-icon { width: 20px; height: 20px; background: transparent; color: inherit; }
.creation-studio .creation-engine-option.active .creation-engine-icon { background: transparent; }
.creation-studio .creation-engine-option strong { font-size: 11px; }
.creation-studio .creation-engine-option small { display: none; }
.creation-studio-reset {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(245, 245, 242, .48);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.creation-studio-reset:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.creation-studio-reset svg { width: 15px; height: 15px; }
.creation-studio-editor {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 18px;
  overflow: visible;
  padding: 22px;
  border-radius: 24px;
  background: #090d0e;
}
.creation-studio-project-line {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.creation-studio-project-line h2,
.creation-studio-project-line p { margin: 0; letter-spacing: 0; }
.creation-studio-project-line h2 { margin-top: 4px; font-size: 20px; font-weight: 650; }
.creation-studio-project-line p { max-width: 620px; margin-top: 5px; color: rgba(245, 245, 242, .42); font-size: 11px; line-height: 1.55; }
.creation-studio-kicker,
.creation-studio-setting-head > div > span,
.creation-studio-preview-panel header > div > span,
.creation-studio-rail header > div > span {
  color: rgba(207, 235, 227, .5);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.creation-studio-project-pill {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  min-height: 30px;
  overflow: hidden;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: rgba(245, 245, 242, .64);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creation-studio-project-pill svg { width: 13px; height: 13px; color: #bfe8dd; }
.creation-studio .creation-assist { gap: 11px; margin: 0; }
.creation-studio .creation-composer-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.creation-studio .creation-assist-actions { gap: 6px; }
.creation-studio .creation-assist-button {
  min-height: 38px;
  max-width: 240px;
  border-color: rgba(255, 255, 255, .1);
  border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  color: rgba(245, 245, 242, .7);
}
.creation-studio .creation-assist-button:hover,
.creation-studio .creation-assist-button.active,
.creation-studio .creation-assist-button.selected {
  border-color: rgba(146, 226, 211, .48);
  background: rgba(149, 231, 214, .11);
  color: #f4fffb;
}
.creation-studio .creation-assist-button small { color: #b7eddf; }
.creation-studio .creation-clear-button { color: rgba(245, 245, 242, .45); }
.creation-studio .creation-clear-button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.creation-studio .output-switch {
  min-width: 264px;
  border-color: rgba(255, 255, 255, .08);
  border-radius: 13px;
  background: rgba(255, 255, 255, .04);
}
.creation-studio .output-switch button { min-height: 34px; border-radius: 10px; color: rgba(245, 245, 242, .48); }
.creation-studio .output-switch button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.creation-studio .output-switch button.active { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .12); color: #fff; }
.creation-studio .creation-inline-panel {
  border-color: rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(0, 0, 0, .22);
}
.creation-studio .creation-inline-tabs { border-bottom-color: rgba(255, 255, 255, .09); }
.creation-studio .creation-inline-tabs button { color: rgba(245, 245, 242, .48); }
.creation-studio .creation-inline-tabs button.active { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .11); color: #fff; }
.creation-studio .creation-local-upload { border-color: rgba(180, 227, 218, .36); border-radius: 14px; background: rgba(255, 255, 255, .04); color: #f5f5f2; }
.creation-studio .creation-local-upload:hover { border-color: rgba(178, 239, 225, .7); background: rgba(255, 255, 255, .08); }
.creation-studio .creation-local-upload > svg { color: #b7eddf; }
.creation-studio .creation-local-upload small { color: rgba(245, 245, 242, .42); }
.creation-studio .asset-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.creation-studio .asset-option { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #f5f5f2; }
.creation-studio .asset-option:hover,
.creation-studio .asset-option:has(input:checked) { border-color: rgba(167, 232, 219, .6); background: rgba(151, 228, 211, .1); }
.creation-studio .asset-option-preview { background: rgba(255, 255, 255, .06); color: rgba(245, 245, 242, .45); }
.creation-studio .asset-option-copy small { color: rgba(245, 245, 242, .42); }
.creation-studio .creation-studio-prompt { min-width: 0; display: grid; gap: 8px; }
.creation-studio-prompt > span { color: rgba(245, 245, 242, .72); font-size: 12px; font-weight: 700; }
.creation-studio-prompt textarea {
  min-height: 130px;
  border-color: rgba(255, 255, 255, .1);
  border-radius: 17px;
  background: rgba(255, 255, 255, .045);
  color: #f5f5f2;
  font-size: 13px;
  line-height: 1.65;
  resize: vertical;
}
.creation-studio-prompt textarea::placeholder { color: rgba(245, 245, 242, .3); }
.creation-studio-prompt textarea:focus { border-color: rgba(186, 235, 224, .65); outline: 2px solid rgba(157, 232, 216, .13); }
.creation-studio-prompt small { color: rgba(245, 245, 242, .36); font-size: 10px; }
.creation-studio-smart-actions,
.creation-studio .creation-smart-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: rgba(245, 245, 242, .46); font-size: 10px; }
.creation-studio-smart-actions > span,
.creation-studio .creation-smart-actions > span { margin-right: 3px; font-weight: 700; }
.creation-studio-smart-actions button,
.creation-studio .creation-smart-actions button { min-height: 28px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 9px; background: rgba(255, 255, 255, .045); color: rgba(245, 245, 242, .62); font-size: 10px; cursor: pointer; }
.creation-studio-smart-actions button:hover,
.creation-studio .creation-smart-actions button:hover { border-color: rgba(166, 230, 216, .5); background: rgba(151, 228, 211, .1); color: #f5fffb; }
.creation-studio-workflow-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid rgba(164, 230, 216, .25); border-radius: 12px; background: rgba(151, 228, 211, .08); color: #b7eddf; }
.creation-studio-workflow-note svg { width: 17px; height: 17px; margin-top: 1px; }
.creation-studio-workflow-note div { display: grid; gap: 3px; }
.creation-studio-workflow-note strong { font-size: 11px; }
.creation-studio-workflow-note small { color: rgba(245, 245, 242, .48); font-size: 10px; line-height: 1.5; }
.creation-studio .template-category-bar button { color: rgba(245, 245, 242, .48); }
.creation-studio .template-category-bar button:hover { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); color: #fff; }
.creation-studio .template-category-bar button.active { border-color: rgba(173, 233, 220, .5); background: rgba(151, 228, 211, .1); color: #d9fff4; }
.creation-studio .template-choice { border-color: rgba(255, 255, 255, .1); border-radius: 13px; background: rgba(255, 255, 255, .045); color: #f5f5f2; }
.creation-studio .template-choice:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); }
.creation-studio .template-choice.active { border-color: rgba(113, 207, 188, .68); background: rgba(151, 228, 211, .12); }
.creation-studio .template-choice-icon { background: rgba(255, 255, 255, .08); color: #b7eddf; }
.creation-studio .template-choice-copy small { color: rgba(245, 245, 242, .46); }
.creation-studio .template-config,
.creation-studio .template-field-grid { border-color: rgba(255, 255, 255, .1); }
.creation-studio .template-field-grid label,
.creation-studio .template-field-options legend { color: rgba(245, 245, 242, .7); }
.creation-studio .template-field-options legend small,
.creation-studio .template-config-head small,
.creation-studio .template-picker-empty,
.creation-studio .template-no-fields { color: rgba(245, 245, 242, .4); }
.creation-studio .template-option { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: rgba(245, 245, 242, .62) !important; }
.creation-studio .template-option:hover,
.creation-studio .template-option:has(input:checked) { border-color: rgba(166, 230, 216, .54); background: rgba(151, 228, 211, .1); color: #f4fffb !important; }
.creation-studio .template-more { color: #b7eddf; }
.creation-studio .template-confirm-row .primary-button { border-color: #d7ebe5; background: #d7ebe5; color: #10201d; }
.creation-studio .template-confirm-row .primary-button:hover { border-color: #fff; background: #fff; }
.creation-studio-settings { padding: 16px 20px; border-radius: 20px; background: #0c1112; }
.creation-studio-setting-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.creation-studio-setting-head > div:first-child { display: grid; gap: 4px; }
.creation-studio-setting-head > div:first-child > span { color: rgba(245, 245, 242, .7); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.creation-studio-setting-head small { color: rgba(245, 245, 242, .38); font-size: 10px; }
.creation-studio-setting-fields { display: flex; align-items: end; gap: 10px; min-width: min(100%, 460px); }
.creation-studio-setting-fields label { min-width: 0; display: grid; gap: 5px; color: rgba(245, 245, 242, .5); font-size: 10px; font-weight: 700; }
.creation-studio-setting-fields label:first-child { flex: 1 1 auto; }
.creation-studio-setting-fields label:last-child { width: 112px; flex: 0 0 112px; }
.creation-studio-setting-fields input,
.creation-studio-setting-fields select { min-height: 36px; border-color: rgba(255, 255, 255, .11); border-radius: 10px; background: rgba(255, 255, 255, .055); color: #f5f5f2; }
.creation-studio-setting-fields option { background: #111718; color: #fff; }
.creation-studio-preview-panel { overflow: hidden; border-radius: 24px; background: #080c0d; }
.creation-studio-preview-panel header,
.creation-studio-preview-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.creation-studio-preview-panel header { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.creation-studio-preview-panel header > div { display: grid; gap: 4px; }
.creation-studio-preview-panel h3,
.creation-studio-preview-panel footer strong,
.creation-studio-preview-panel footer small { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creation-studio-preview-panel h3 { color: #f5f5f2; font-size: 15px; font-weight: 650; }
.creation-preview-status { display: inline-flex; align-items: center; gap: 6px; color: rgba(245, 245, 242, .42); font-size: 10px; }
.creation-preview-status i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #687570; }
.creation-preview-status:has(i) i { background: #9bd6c8; }
.creation-preview-canvas { position: relative; min-height: 250px; display: grid; place-items: center; overflow: hidden; margin: 14px 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: #050708; }
.creation-preview-canvas > img,
.creation-preview-canvas > video { width: 100%; height: 100%; max-height: 460px; object-fit: contain; }
.creation-preview-canvas.has-multiple { display: grid; padding: 0; }
.creation-preview-carousel { width: 100%; min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 8px; padding: 10px; }
.creation-preview-carousel-media { position: relative; min-width: 0; min-height: 320px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: #050708; }
.creation-preview-carousel-media img,
.creation-preview-carousel-media video { display: block; width: 100%; height: 100%; max-height: 440px; object-fit: contain; }
.creation-preview-nav,
.creation-preview-open { display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; background: rgba(255, 255, 255, .07); color: rgba(245, 245, 242, .72); cursor: pointer; }
.creation-preview-nav { width: 38px; height: 38px; }
.creation-preview-nav:hover,
.creation-preview-open:hover { border-color: rgba(183, 237, 223, .65); background: rgba(151, 228, 211, .12); color: #fff; }
.creation-preview-nav svg { width: 18px; height: 18px; }
.creation-preview-open { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; background: rgba(7, 12, 13, .72); }
.creation-preview-open svg { width: 15px; height: 15px; }
.creation-preview-position { position: absolute; bottom: 8px; left: 50%; min-width: 42px; min-height: 22px; display: grid; place-items: center; padding: 0 8px; transform: translateX(-50%); border-radius: 5px; background: rgba(7, 12, 13, .72); color: #fff; font-size: 10px; font-weight: 800; }
.creation-preview-empty { display: grid; place-items: center; align-content: center; gap: 7px; min-height: 230px; color: rgba(245, 245, 242, .46); text-align: center; }
.creation-preview-empty svg { width: 25px; height: 25px; color: #b7eddf; }
.creation-preview-empty strong { color: rgba(245, 245, 242, .8); font-size: 13px; }
.creation-preview-empty small { color: rgba(245, 245, 242, .38); font-size: 10px; }
.creation-studio-preview-panel footer { border-top: 1px solid rgba(255, 255, 255, .08); }
.creation-studio-preview-panel footer > div:first-child { min-width: 0; display: grid; gap: 4px; }
.creation-preview-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.creation-preview-actions .primary-button { min-height: 32px; border-color: #d7ebe5; border-radius: 10px; background: #d7ebe5; color: #10201d; font-size: 10px; }
.creation-preview-actions .primary-button:hover { border-color: #fff; background: #fff; }
.creation-studio-preview-panel footer strong { color: rgba(245, 245, 242, .82); font-size: 11px; }
.creation-studio-preview-panel footer small { color: rgba(245, 245, 242, .38); font-size: 10px; }
.creation-studio-preview-panel footer .secondary-button { min-height: 32px; border-color: rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .06); color: rgba(245, 245, 242, .64); }
.creation-studio-preview-panel footer .secondary-button:hover { border-color: rgba(171, 232, 218, .5); background: rgba(151, 228, 211, .1); color: #fff; }
.creation-studio-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-radius: 20px; background: #0c1112; }
.creation-studio-cost { min-width: 0; display: grid; gap: 4px; }
.creation-studio-cost span { color: rgba(245, 245, 242, .4); font-size: 10px; }
.creation-studio-cost strong { color: #effcf7; font-size: 15px; }
.creation-studio-generate { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid #d7ebe5; border-radius: 12px; background: #d7ebe5; color: #10201d; font-weight: 800; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; }
.creation-studio-generate:hover { border-color: #fff; background: #fff; }
.creation-studio-generate svg { width: 16px; height: 16px; }
.creation-studio-rail { min-width: 0; align-self: stretch; overflow: hidden; border-radius: 22px; background: #090d0e; }
.creation-studio-rail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.creation-studio-rail > header > div { display: grid; gap: 4px; min-width: 0; }
.creation-studio-rail h3 { margin: 0; color: #f5f5f2; font-size: 13px; font-weight: 650; }
.creation-studio-rail p { margin: 0; color: rgba(245, 245, 242, .36); font-size: 9px; line-height: 1.4; }
.creation-studio-rail .text-button { min-height: 28px; padding: 0 5px; color: #b7eddf; font-size: 10px; }
.creation-studio-result-list { min-height: 0; max-height: 420px; display: grid; gap: 0; overflow-x: hidden; overflow-y: auto; padding: 4px 12px 10px; scrollbar-gutter: stable; }
.creation-studio-result-list .result-row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom-color: rgba(255, 255, 255, .08); }
.creation-studio-result-list .result-row:last-child { border-bottom: 0; }
.creation-studio-result-list .result-thumb,
.creation-studio-result-list .result-thumb-carousel { width: 44px; height: 44px; border-radius: 7px; }
.creation-studio-result-list .result-thumb { background: rgba(255, 255, 255, .07); color: rgba(245, 245, 242, .54); }
.creation-studio-result-list .result-copy strong { color: rgba(245, 245, 242, .82); font-size: 10px; }
.creation-studio-result-list .result-copy small { color: rgba(245, 245, 242, .36); font-size: 9px; }
.creation-studio-result-list .result-status { color: rgba(245, 245, 242, .44); }
.creation-studio-result-list .result-status { flex-wrap: wrap; justify-content: flex-end; }
.creation-studio-result-list .status-badge { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: rgba(245, 245, 242, .5); }
.creation-studio-rail-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 7px; color: rgba(245, 245, 242, .35); text-align: center; }
.creation-studio-rail-empty svg { width: 22px; height: 22px; color: #b7eddf; }
.creation-studio-rail-empty strong { color: rgba(245, 245, 242, .66); font-size: 11px; }
.creation-studio-rail-empty small { font-size: 9px; }

@media (max-width: 1080px) {
  .creation-studio { grid-template-columns: minmax(0, 1fr) 168px; }
  .creation-studio-header { align-items: stretch; flex-direction: column; }
  .creation-studio-header-actions { justify-content: space-between; }
  .creation-studio .creation-engine-switch { flex: 1 1 auto; }
  .creation-studio-video-workflows { width: 100%; }
}

@media (max-width: 920px) {
  .creation-studio { grid-template-columns: 1fr; }
  .creation-studio-rail { order: 3; }
  .creation-studio-result-list { grid-template-columns: 1fr; gap: 0; }
  .creation-studio-result-list .result-row { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .creation-studio-setting-head { align-items: stretch; flex-direction: column; }
  .creation-studio-setting-fields { min-width: 0; }
}

@media (max-width: 680px) {
  .creation-studio { gap: 10px; }
  .creation-studio-header,
  .creation-studio-editor,
  .creation-studio-settings,
  .creation-studio-preview-panel,
  .creation-studio-footer { border-radius: 18px; }
  .creation-studio-header,
  .creation-studio-editor { padding: 14px; }
  .creation-studio-mode-switch { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creation-studio-header-actions { align-items: stretch; flex-wrap: wrap; }
  .creation-studio .creation-engine-switch { width: 100%; }
  .creation-studio-video-workflows { width: 100%; }
  .creation-studio-reset { margin-left: auto; }
  .creation-studio-project-line { flex-direction: column; }
  .creation-studio-project-pill { max-width: 100%; }
  .creation-studio .creation-composer-toolbar { grid-template-columns: 1fr; }
  .creation-studio .output-switch { min-width: 0; width: 100%; }
  .creation-studio .creation-assist-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
  .creation-studio .creation-assist-button { width: 100%; max-width: none; }
  .creation-studio .asset-choice-grid,
  .creation-studio .template-choice-grid { grid-template-columns: 1fr; }
  .creation-studio-setting-fields { align-items: stretch; flex-direction: column; }
  .creation-studio-setting-fields label:last-child { width: auto; flex-basis: auto; }
  .creation-studio-footer { align-items: stretch; flex-direction: column; padding: 14px; }
  .creation-studio-generate { width: 100%; }
  .creation-studio-preview-panel header,
  .creation-studio-preview-panel footer { padding-inline: 14px; }
  .creation-preview-canvas { min-height: 220px; margin-inline: 14px; }
  .creation-preview-carousel { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 5px; padding: 8px; }
  .creation-preview-carousel-media { min-height: 200px; }
  .creation-preview-nav { width: 32px; height: 32px; }
  .creation-studio-preview-panel footer { align-items: stretch; flex-direction: column; }
  .creation-preview-actions { align-items: stretch; flex-direction: column; }
  .creation-studio-preview-panel footer .secondary-button,
  .creation-preview-actions .primary-button { width: 100%; }
  .creation-studio-result-list { grid-template-columns: 1fr; }
  .creation-studio-result-list .result-row { border-bottom: 1px solid rgba(255, 255, 255, .08); }
}

/* Keep the surrounding workspace chrome in the same reference-canvas language. */
.creation-view {
  --canvas: #050607;
  --surface: #0a0e0f;
  --surface-muted: #0d1314;
  --surface-strong: #151b1c;
  --ink: #f5f5f2;
  --ink-soft: rgba(245, 245, 242, .52);
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .15);
  background: #050607;
  color: #f5f5f2;
}
.creation-view .sidebar { border-right-color: rgba(255, 255, 255, .08); background: #080c0d; }
.creation-view .brand { color: #f5f5f2; }
.creation-view .brand-mark { border-color: rgba(183, 237, 223, .5); background: rgba(151, 228, 211, .12); color: #b7eddf; }
.creation-view .brand small,
.creation-view .account-summary small { color: rgba(245, 245, 242, .42); }
.creation-view .main-nav button,
.creation-view .sidebar-footer > button { color: rgba(245, 245, 242, .5); }
.creation-view .main-nav button:hover,
.creation-view .sidebar-footer > button:hover { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); color: #fff; }
.creation-view .main-nav button.active { border-color: rgba(164, 230, 216, .32); background: rgba(151, 228, 211, .1); color: #d9fff4; }
.creation-view .sidebar-footer .account-summary { border-top-color: rgba(255, 255, 255, .08); }
.creation-view .account-avatar { background: rgba(255, 255, 255, .08); color: rgba(245, 245, 242, .64); }
.creation-view .topbar { border-bottom-color: rgba(255, 255, 255, .08); background: rgba(5, 6, 7, .94); }
.creation-view .page-heading p { color: rgba(245, 245, 242, .42); }
.creation-view .page-heading h1 { color: #f5f5f2; }
.creation-view .topbar .icon-button { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: #f5f5f2; }
.creation-view .topbar .icon-button:hover { background: rgba(255, 255, 255, .11); color: #fff; }
.creation-view .topbar .primary-button { border-color: #d7ebe5; background: #d7ebe5; color: #10201d; }
.creation-view .topbar .primary-button:hover { border-color: #fff; background: #fff; }
.creation-view .mobile-nav { border-top-color: rgba(255, 255, 255, .08); background: #080c0d; }
.creation-view .mobile-nav button { color: rgba(245, 245, 242, .48); }
.creation-view .mobile-nav button.active { color: #d9fff4; }

.reverse-studio { min-width: 0; display: grid; gap: 12px; }
.reverse-studio-main { min-width: 0; display: grid; grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr); gap: 12px; align-items: stretch; container-type: inline-size; }
.reverse-studio-main.has-image-history,
.reverse-studio-main.has-video-history { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr) minmax(166px, .36fr); }
.reverse-console,
.reverse-output-panel { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(29, 45, 48, .05); }
.reverse-console { overflow: hidden; }
.reverse-console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.reverse-console-head h2,
.reverse-console-head p,
.reverse-output-head h3,
.reverse-output-head p { margin: 0; letter-spacing: 0; }
.reverse-console-head h2 { margin-top: 4px; font-size: 20px; }
.reverse-console-head p { margin-top: 5px; color: var(--ink-soft); font-size: 11px; }
.reverse-reset-button { flex: 0 0 auto; min-height: 32px; padding-inline: 9px; color: var(--ink-soft); font-size: 10px; }
.reverse-reset-button:hover { color: var(--accent-hover); }
.reverse-kicker { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.reverse-project-pill { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 220px; padding: 0 9px; border: 1px solid #cfe0dd; border-radius: 5px; background: var(--accent-soft); color: var(--accent-hover); font-size: 10px; font-weight: 700; }
.reverse-project-pill span { display: inline-flex; }
.reverse-project-pill svg { width: 13px; height: 13px; }
.reverse-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 14px 20px 0; }
.reverse-mode-switch button { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 54px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); color: var(--ink-soft); text-align: left; cursor: pointer; }
.reverse-mode-switch button:hover { border-color: #91bbb5; color: var(--ink); }
.reverse-mode-switch button.active { border-color: #8dbbb4; background: var(--accent-soft); color: var(--accent-hover); box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .08); }
.reverse-mode-switch button:disabled,
.reverse-asset-option:disabled,
.reverse-clear-button:disabled { opacity: .62; cursor: progress; }
.reverse-mode-switch button > svg { width: 18px; height: 18px; }
.reverse-mode-switch button > span:not(svg) { min-width: 0; display: grid; gap: 3px; }
.reverse-mode-switch strong { font-size: 12px; }
.reverse-mode-switch small { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.reverse-source-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 20px 16px; }
.reverse-source-panel,
.reverse-source-preview { min-width: 0; display: grid; align-content: start; gap: 10px; }
.reverse-section-head { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.reverse-section-head > div { min-width: 0; display: grid; gap: 3px; }
.reverse-section-head > div > span { font-size: 12px; font-weight: 750; }
.reverse-section-head small { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.reverse-source-count { flex: 0 0 auto; color: var(--ink-soft); font-size: 10px; }
.reverse-source-actions { width: min(360px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.reverse-source-command { min-width: 0; height: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 750; }
.reverse-source-command:hover, .reverse-source-command.active { border-color: #8bc8bd; background: var(--accent-soft); color: var(--accent-hover); }
.reverse-source-command.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.reverse-source-command.primary:hover { background: var(--accent-hover); }
.reverse-source-command.disabled, .reverse-source-command.disabled:hover { opacity: .48; border-color: var(--accent); background: var(--accent); color: #fff; cursor: not-allowed; }
.reverse-source-command input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.reverse-source-command svg { width: 16px; height: 16px; flex: 0 0 auto; }
.reverse-asset-picker { min-width: 0; display: grid; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }
.reverse-asset-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-soft); }
.reverse-asset-picker-head strong { color: var(--ink); font-size: 10px; }
.reverse-asset-picker-head small { font-size: 9px; }
.reverse-asset-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 238px; overflow: auto; padding-right: 2px; }
.reverse-asset-option { min-width: 0; position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 7px; padding: 5px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.reverse-asset-option:hover { border-color: #91bbb5; background: #fbfdfd; }
.reverse-asset-option.active { border-color: #79a9a3; background: var(--accent-soft); }
.reverse-asset-thumb { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: var(--surface-strong); color: var(--ink-soft); }
.reverse-asset-thumb img, .reverse-asset-thumb video { width: 100%; height: 100%; object-fit: cover; }
.reverse-asset-copy { min-width: 0; display: grid; gap: 3px; }
.reverse-asset-copy strong, .reverse-asset-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reverse-asset-copy strong { font-size: 10px; }
.reverse-asset-copy small { color: var(--ink-soft); font-size: 9px; }
.reverse-asset-check { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; color: var(--accent); }
.reverse-asset-check svg { width: 13px; height: 13px; }
.reverse-assets-empty { min-height: 94px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed var(--line); border-radius: 6px; color: var(--ink-soft); font-size: 10px; }
.reverse-assets-empty svg { width: 20px; height: 20px; }
.reverse-preview-stage { min-height: 180px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #f5f7f7; }
.reverse-preview-stage.has-source { background: #11191a; }
.reverse-preview-stage img, .reverse-preview-stage video { width: 100%; height: 100%; max-height: 340px; aspect-ratio: 4 / 3; object-fit: contain; }
.reverse-preview-empty { display: grid; place-items: center; align-content: center; gap: 7px; min-height: 220px; padding: 20px; color: var(--ink-soft); text-align: center; }
.reverse-preview-empty svg { width: 25px; height: 25px; color: var(--accent); }
.reverse-preview-empty strong { color: var(--ink); font-size: 12px; }
.reverse-preview-empty small { max-width: 210px; font-size: 10px; line-height: 1.5; }
.reverse-clear-button { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); cursor: pointer; }
.reverse-clear-button:hover { color: var(--red); border-color: #e4bdb8; }
.reverse-clear-button svg { width: 13px; height: 13px; }
.reverse-console-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--line); background: var(--surface-muted); }
.reverse-console-foot-info { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 124px; align-items: flex-end; gap: 16px; flex: 1 1 auto; }
.reverse-model-control,
.reverse-credit-estimate { min-width: 0; display: grid; gap: 3px; }
.reverse-model-control > span,
.reverse-credit-estimate > span { color: var(--ink-soft); font-size: 10px; }
.reverse-model-control select { width: 100%; min-height: 30px; padding: 0 26px 0 8px; border: 1px solid #cbd8d7; border-radius: 5px; background: #fff; color: var(--ink); font-size: 10px; font-weight: 700; }
.reverse-model-control select:focus { border-color: #79a9a3; outline: 2px solid rgba(15, 118, 110, .12); }
.reverse-model-control select:disabled { opacity: .62; cursor: progress; }
.reverse-credit-estimate strong { font-size: 12px; }
.reverse-credit-estimate small { color: var(--ink-soft); font-size: 9px; }
.reverse-run-button { min-width: 154px; }
.reverse-run-button svg { width: 15px; height: 15px; }
.reverse-error { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 20px 13px; color: var(--red); font-size: 10px; }
.reverse-error svg { width: 14px; height: 14px; }
.reverse-output-panel { min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.reverse-output-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.reverse-output-head h3 { margin-top: 4px; font-size: 16px; }
.reverse-output-head p { margin-top: 5px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.reverse-output-status { min-height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 9px; font-weight: 750; }
.reverse-output-status i { width: 7px; height: 7px; border-radius: 50%; background: #a7b2b4; }
.reverse-output-status i.status-queued,
.reverse-output-status i.status-running { background: var(--blue); box-shadow: 0 0 0 3px rgba(64, 124, 170, .12); }
.reverse-output-status i.status-completed { background: #2f8b6f; box-shadow: 0 0 0 3px rgba(48, 145, 112, .12); }
.reverse-output-status i.status-failed { background: var(--red); box-shadow: 0 0 0 3px rgba(182, 74, 77, .12); }
.reverse-output-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.reverse-output-actions button,
.reverse-output-actions a { white-space: nowrap; }
.reverse-output-body { min-height: 0; display: grid; padding: 14px; }
.reverse-generated-result { min-height: 440px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #eef2f2; }
.reverse-generated-result img, .reverse-generated-result video { width: 100%; height: 100%; max-height: 540px; object-fit: contain; }
.reverse-output-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 9px; color: var(--ink-soft); font-size: 9px; }
.reverse-output-meta span:first-child { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-hover); }
.reverse-output-meta svg { width: 12px; height: 12px; }
.reverse-output-empty { min-height: 440px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--ink-soft); text-align: center; }
.reverse-output-empty svg { width: 31px; height: 31px; color: var(--accent); }
.reverse-output-empty strong { color: var(--ink); font-size: 13px; }
.reverse-output-empty small { font-size: 10px; }
.reverse-output-progress svg { color: var(--blue); }
.reverse-output-failed svg { color: var(--red); }
.reverse-result-saved { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; color: #2f8b6f; font-size: 9px; font-weight: 750; }
.reverse-result-saved svg { width: 13px; height: 13px; }
.reverse-result-rail { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; align-self: stretch; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(29, 45, 48, .05); }
.reverse-result-rail > header { padding: 18px 14px 14px; border-bottom: 1px solid var(--line); }
.reverse-result-rail > header > div { min-width: 0; display: grid; gap: 4px; }
.reverse-result-rail > header span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.reverse-result-rail h3 { margin: 0; color: var(--ink); font-size: 13px; }
.reverse-result-rail p { margin: 0; color: var(--ink-soft); font-size: 9px; line-height: 1.4; }
.reverse-result-list { min-height: 0; max-height: 420px; display: grid; align-content: start; overflow-x: hidden; overflow-y: auto; padding: 4px 10px 10px; scrollbar-gutter: stable; }
.reverse-result-row { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.reverse-result-row:last-child { border-bottom: 0; }
.reverse-result-row:hover:not(:disabled), .reverse-result-row.active { background: var(--accent-soft); }
.reverse-result-row:focus-visible { outline: 2px solid #79a9a3; outline-offset: -2px; }
.reverse-result-row:disabled { cursor: wait; opacity: .62; }
.reverse-result-thumb { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: var(--surface-strong); color: var(--ink-soft); }
.reverse-result-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.reverse-result-thumb > video { width: 100%; height: 100%; object-fit: cover; }
.reverse-result-thumb svg { width: 16px; height: 16px; }
.reverse-result-copy { min-width: 0; display: grid; align-content: center; gap: 3px; }
.reverse-result-copy strong, .reverse-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reverse-result-copy strong { font-size: 10px; }
.reverse-result-copy small { color: var(--ink-soft); font-size: 9px; }
.reverse-result-copy .status-badge { justify-self: start; font-size: 9px; }
.reverse-result-rail-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--ink-soft); text-align: center; }
.reverse-result-rail-empty svg { width: 22px; height: 22px; color: var(--accent); }
.reverse-result-rail-empty strong { color: var(--ink); font-size: 11px; }
.reverse-result-rail-empty small { font-size: 9px; }

@container (max-width: 1600px) {
  .reverse-console-foot { align-items: stretch; flex-direction: column; }
  .reverse-console-foot-info { width: 100%; }
  .reverse-run-button { width: 100%; }
}

@media (min-width: 1081px) {
  .reverse-studio-main { min-height: max(560px, calc(100vh - 112px)); }
  .reverse-result-list { max-height: none; }
}

@media (max-width: 1080px) {
  .reverse-studio-main,
  .reverse-studio-main.has-image-history,
  .reverse-studio-main.has-video-history { grid-template-columns: 1fr; }
  .reverse-output-panel { min-height: 420px; }
  .reverse-result-rail { max-height: none; }
  .reverse-result-list { grid-template-columns: 1fr; gap: 0; }
  .reverse-result-row { border-bottom: 1px solid var(--line); }
}

@media (max-width: 680px) {
  .reverse-console-head { align-items: stretch; flex-direction: column; padding: 15px; }
  .reverse-reset-button { align-self: flex-start; }
  .reverse-project-pill { max-width: none; }
  .reverse-mode-switch { padding-inline: 15px; }
  .reverse-source-layout { grid-template-columns: 1fr; padding-inline: 15px; }
  .reverse-source-preview { padding-top: 4px; }
  .reverse-console-foot { align-items: stretch; flex-direction: column; padding-inline: 15px; }
  .reverse-console-foot-info { grid-template-columns: 1fr; align-items: stretch; gap: 10px; }
  .reverse-model-control select { width: 100%; }
  .reverse-run-button { width: 100%; }
  .reverse-output-head { align-items: stretch; flex-direction: column; }
  .reverse-output-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .reverse-output-actions button { width: 100%; min-width: 0; padding-inline: 7px; }
  .reverse-generated-result, .reverse-output-empty { min-height: 340px; }
  .reverse-result-list { grid-template-columns: 1fr; }
}

/* Match the reference generation page: one composer console, then preview. */
.creation-studio-main { display: grid; gap: 14px; }
.creation-studio-form { display: block; border: 0; background: transparent; box-shadow: none; }
.creation-studio-composer {
  position: relative;
  min-width: 0;
  overflow: visible;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  background: #080c0d;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .36);
}
.creation-studio-composer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .12), transparent 20%), linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%);
}
.creation-studio-composer > * { position: relative; }
.creation-studio-header {
  min-height: 0;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.creation-studio-mode-switch { width: min(360px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.creation-studio-header-actions { margin-left: auto; }
.creation-studio-editor {
  padding: 16px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.creation-studio-project-line { align-items: center; }
.creation-studio-project-line h2 { margin-top: 3px; font-size: 13px; font-weight: 650; }
.creation-studio-project-line p { display: none; }
.creation-studio-project-pill { min-height: 28px; }
.creation-studio-settings {
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.creation-studio-footer {
  margin-top: 14px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.creation-studio-bottom-controls { min-width: 0; display: flex; align-items: center; gap: 20px; }
.creation-studio-bottom-summary { min-width: 0; display: grid; gap: 4px; }
.creation-studio-bottom-summary span { color: rgba(245, 245, 242, .4); font-size: 10px; }
.creation-studio-bottom-summary strong { max-width: 240px; overflow: hidden; color: rgba(245, 245, 242, .78); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.creation-studio-actions { flex: 0 0 auto; }
.creation-studio-generate { min-width: 220px; height: 52px; border-radius: 16px; background: linear-gradient(90deg, #a4ead5, #d8f0b5); box-shadow: 0 10px 30px rgba(164, 234, 213, .12); }
.creation-studio-generate:hover { background: linear-gradient(90deg, #c7f4e6, #efffd8); }
.creation-studio-preview-panel { border-radius: 20px; background: #071113; box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.creation-studio-preview-panel header,
.creation-studio-preview-panel footer { padding-inline: 16px; }
.creation-preview-canvas { min-height: 360px; margin: 12px 16px; }

@media (max-width: 1080px) {
  .creation-studio-header { align-items: stretch; flex-direction: column; gap: 12px; }
  .creation-studio-header-actions { width: 100%; margin-left: 0; justify-content: space-between; }
}

@media (max-width: 680px) {
  .creation-studio-composer { padding: 12px; border-radius: 22px; }
  .creation-studio-header { padding-bottom: 12px; }
  .creation-studio-header-actions { align-items: stretch; flex-direction: column; }
  .creation-studio-header-actions .creation-engine-switch,
  .creation-studio-video-workflows { width: 100%; }
  .creation-studio-editor { padding-top: 14px; }
  .creation-studio-project-line { align-items: flex-start; }
  .creation-studio-project-pill { display: none; }
  .creation-studio-bottom-controls { align-items: stretch; flex-direction: column; gap: 10px; }
  .creation-studio-bottom-summary strong { max-width: none; }
  .creation-studio-footer { align-items: stretch; flex-direction: column; }
  .creation-studio-actions,
  .creation-studio-generate { width: 100%; }
  .creation-preview-canvas { min-height: 250px; margin-inline: 12px; }
}

/* Creation shares the same light workspace surface as assets, projects, and logs. */
.creation-studio {
  color: var(--ink);
}
.creation-studio-composer,
.creation-studio-header,
.creation-studio-editor,
.creation-studio-settings,
.creation-studio-footer,
.creation-studio-preview-panel,
.creation-studio-rail {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(29, 45, 48, .05);
}
.creation-studio-composer::before { display: none; }
.creation-studio-header {
  border-bottom-color: var(--line);
}
.creation-studio-mode-switch {
  width: min(510px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-color: var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
}
.creation-studio-mode {
  min-height: 42px;
  border-radius: 5px;
  color: var(--ink-soft);
  font-size: 12px;
}
.creation-studio-mode:hover { color: var(--ink); background: #fff; }
.creation-studio-mode.active {
  border-color: var(--line);
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(24, 33, 36, .06);
}
.creation-studio-header-actions { color: var(--ink); }
.creation-studio-video-workflows,
.creation-studio .creation-engine-switch {
  border-color: var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
}
.creation-studio-video-workflows button,
.creation-studio .creation-engine-option,
.creation-studio-reset {
  color: var(--ink-soft);
}
.creation-studio-video-workflows button:hover,
.creation-studio .creation-engine-option:hover,
.creation-studio-reset:hover { color: var(--ink); background: #fff; }
.creation-studio-video-workflows button.active,
.creation-studio .creation-engine-option.active {
  border-color: var(--line);
  background: #fff;
  color: var(--accent);
}
.creation-studio .creation-engine-icon { color: inherit; }
.creation-studio-project-line { color: var(--ink); }
.creation-studio-kicker,
.creation-studio-setting-head > div > span,
.creation-studio-preview-panel header > div > span,
.creation-studio-rail header > div > span {
  color: var(--accent);
}
.creation-studio-project-pill {
  border-color: #cfe0dd;
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.creation-studio-project-pill svg { color: var(--accent); }
.creation-studio .creation-assist-button {
  border-color: var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
}
.creation-studio .creation-assist-button:hover,
.creation-studio .creation-assist-button.active,
.creation-studio .creation-assist-button.selected {
  border-color: #79a9a3;
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.creation-studio .creation-assist-button small { color: var(--accent); }
.creation-studio .creation-clear-button { color: var(--ink-soft); }
.creation-studio .creation-clear-button:hover { background: var(--surface-muted); color: var(--ink); }
.creation-studio .creation-inline-panel {
  border-color: var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
}
.creation-studio .creation-inline-tabs { border-bottom-color: var(--line); }
.creation-studio .creation-inline-tabs button { color: var(--ink-soft); }
.creation-studio .creation-inline-tabs button.active { border-color: var(--line); background: #fff; color: var(--accent); }
.creation-studio .creation-local-upload {
  border-color: var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.creation-studio .creation-local-upload:hover { border-color: #79a9a3; background: #fbfdfd; }
.creation-studio .creation-local-upload > svg { color: var(--accent); }
.creation-studio .creation-local-upload small,
.creation-studio .asset-option-copy small { color: var(--ink-soft); }
.creation-studio .asset-option {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}
.creation-studio .asset-option:hover,
.creation-studio .asset-option:has(input:checked) { border-color: #79a9a3; background: var(--accent-soft); }
.creation-studio .asset-option-preview { background: var(--surface-strong); color: var(--ink-soft); }
.creation-studio-prompt > span { color: var(--ink); }
.creation-studio-prompt textarea {
  border-color: var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.creation-studio-prompt textarea::placeholder,
.creation-studio-prompt small { color: var(--ink-soft); }
.creation-studio-prompt textarea:focus { border-color: #5d9d96; outline: 2px solid rgba(15, 118, 110, .12); }
.creation-studio .creation-assist-note { color: var(--coral); }
.creation-studio .creation-smart-actions { display: none; }
.creation-studio-workflow-note {
  border-color: #c8ddd9;
  border-radius: 6px;
  background: #f5faf9;
  color: var(--accent);
}
.creation-studio-workflow-note small { color: var(--ink-soft); }
.creation-studio .template-category-bar button { color: var(--ink-soft); }
.creation-studio .template-category-bar button:hover { border-color: var(--line); background: #fff; color: var(--ink); }
.creation-studio .template-category-bar button.active { border-color: #b7d3cf; background: var(--accent-soft); color: var(--accent-hover); }
.creation-studio .template-choice {
  border-color: var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.creation-studio .template-choice:hover { border-color: #95b7b2; background: #fbfdfd; }
.creation-studio .template-choice.active { border-color: #74a9a2; background: var(--accent-soft); }
.creation-studio .template-choice-icon { background: var(--surface-strong); color: var(--accent); }
.creation-studio .template-choice-copy small,
.creation-studio .template-field-options legend small,
.creation-studio .template-config-head small,
.creation-studio .template-picker-empty,
.creation-studio .template-no-fields { color: var(--ink-soft); }
.creation-studio .template-config,
.creation-studio .template-field-grid { border-color: var(--line); }
.creation-studio .template-field-grid label,
.creation-studio .template-field-options legend { color: var(--ink); }
.creation-studio .template-option {
  border-color: var(--line);
  background: #fff;
  color: var(--ink-soft) !important;
}
.creation-studio .template-option:hover,
.creation-studio .template-option:has(input:checked) { border-color: #79a9a3; background: var(--accent-soft); color: var(--accent-hover) !important; }
.creation-studio .template-more { color: var(--accent); }
.creation-studio .template-confirm-row .primary-button { border-color: var(--accent); background: var(--accent); color: #fff; }
.creation-studio .template-confirm-row .primary-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.creation-studio-settings {
  border-top-color: var(--line);
  background: transparent;
}
.creation-studio-setting-head > div:first-child > span { color: var(--ink); }
.creation-studio-setting-head small,
.creation-studio-setting-fields label { color: var(--ink-soft); }
.creation-studio-setting-fields input,
.creation-studio-setting-fields select {
  border-color: var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.creation-studio-setting-fields option { background: #fff; color: var(--ink); }
.creation-studio-footer {
  border-top-color: var(--line);
  background: transparent;
}
.creation-studio-bottom-summary span,
.creation-studio-cost span { color: var(--ink-soft); }
.creation-studio-bottom-summary strong { color: var(--ink); }
.creation-studio-cost strong { color: var(--ink); }
.creation-studio-generate {
  border-color: var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}
.creation-studio-generate:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.creation-studio-preview-panel {
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(29, 45, 48, .05);
}
.creation-studio-preview-panel header { border-bottom-color: var(--line); }
.creation-studio-preview-panel h3 { color: var(--ink); }
.creation-preview-status { color: var(--ink-soft); }
.creation-preview-status i { background: #96a4a5; }
.creation-preview-status:has(i) i { background: #4eaa88; }
.creation-preview-canvas {
  border-color: var(--line);
  border-radius: 6px;
  background: #f5f7f7;
}
.creation-preview-carousel-media { background: #f5f7f7; }
.creation-preview-nav,
.creation-preview-open { border-color: var(--line); background: #fff; color: var(--ink-soft); }
.creation-preview-open { background: rgba(255, 255, 255, .92); }
.creation-preview-nav:hover,
.creation-preview-open:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.creation-preview-empty { color: var(--ink-soft); }
.creation-preview-empty svg { color: var(--accent); }
.creation-preview-empty strong { color: var(--ink); }
.creation-preview-empty small { color: var(--ink-soft); }
.creation-studio-preview-panel footer { border-top-color: var(--line); }
.creation-studio-preview-panel footer strong { color: var(--ink); }
.creation-studio-preview-panel footer small { color: var(--ink-soft); }
.creation-preview-actions .primary-button {
  border-color: var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
}
.creation-preview-actions .primary-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.creation-studio-preview-panel footer .secondary-button { border-color: var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.creation-studio-preview-panel footer .secondary-button:hover { border-color: var(--line-strong); background: var(--surface-muted); color: var(--ink); }
.creation-studio-rail { border-radius: 7px; background: var(--surface); }
.creation-studio-rail > header { border-bottom-color: var(--line); }
.creation-studio-rail h3 { color: var(--ink); }
.creation-studio-rail p,
.creation-studio-result-list .result-copy small { color: var(--ink-soft); }
.creation-studio-rail .text-button { color: var(--accent); }
.creation-studio-result-list .result-row { border-bottom-color: var(--line); }
.creation-studio-result-list .result-thumb { background: var(--surface-strong); color: var(--ink-soft); }
.creation-studio-result-list .result-copy strong { color: var(--ink); }
.creation-studio-result-list .result-status { color: var(--ink-soft); }
.creation-studio-result-list .status-badge { border-color: var(--line); background: var(--surface-muted); color: var(--ink-soft); }
.creation-studio-rail-empty { color: var(--ink-soft); }
.creation-studio-rail-empty svg { color: var(--accent); }
.creation-studio-rail-empty strong { color: var(--ink); }

.embedded-processing-view {
  min-width: 0;
  min-height: calc(100vh - 118px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.embedded-processing-frame {
  display: block;
  width: 100%;
  min-height: calc(100vh - 120px);
  border: 0;
  background: var(--canvas);
}

@media (max-width: 680px) {
  .creation-studio-mode-switch { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creation-studio-mode { min-width: 0; padding-inline: 4px; font-size: 11px; }
  .embedded-processing-view,
  .embedded-processing-frame { min-height: calc(100vh - 104px); }
}

/* Reference-style creation console: controls at the top, material tile beside the prompt. */
.creation-studio-composer {
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(29, 45, 48, .06);
}
.creation-studio-header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.creation-studio-mode-switch {
  flex: 0 1 410px;
  width: min(410px, 100%);
}
.creation-studio-header-actions {
  min-width: 0;
  flex: 1 1 430px;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.creation-reference-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 5px;
}
.creation-reference-action {
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.creation-reference-action:hover,
.creation-reference-action.active {
  border-color: #79a9a3;
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.creation-reference-action svg { width: 14px; height: 14px; }
.creation-reference-action svg:last-child { width: 12px; height: 12px; margin-left: -2px; }
.creation-reference-action small { color: var(--accent); font-size: 9px; }
.creation-studio .creation-engine-switch {
  flex: 0 1 auto;
  min-width: 170px;
  padding: 3px;
  border-radius: 6px;
}
.creation-studio .creation-engine-option {
  min-height: 34px;
  padding: 0 8px;
  border-radius: 4px;
}
.creation-studio .creation-engine-option strong { font-size: 10px; }
.creation-studio .creation-engine-option small { display: none; }
.creation-studio-reset { min-height: 34px; padding-inline: 8px; border-radius: 6px; }
.creation-studio-editor {
  display: block;
  padding-top: 16px;
}
.creation-studio-input-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}
.creation-studio-prompt-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}
.creation-studio-prompt { min-height: 0; gap: 7px; }
.creation-studio-prompt textarea {
  min-height: 168px;
  resize: vertical;
}
.creation-material-column {
  min-width: 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.creation-material-tile {
  width: 118px;
  min-height: 136px;
  display: grid;
  grid-template-rows: 68px minmax(0, auto) auto;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 10px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.creation-material-tile:hover,
.creation-material-tile.active {
  border-color: #79a9a3;
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.creation-material-tile.has-material { border-style: solid; }
.creation-material-tile-preview {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--accent);
}
.creation-material-tile-preview img,
.creation-material-tile-preview video { width: 100%; height: 100%; object-fit: cover; }
.creation-material-tile-preview > svg { width: 27px; height: 27px; }
.creation-material-tile-copy { min-width: 0; display: grid; gap: 2px; }
.creation-material-tile-copy strong,
.creation-material-tile-copy small { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creation-material-tile-copy strong { font-size: 11px; }
.creation-material-tile-copy small { color: var(--ink-soft); font-size: 9px; }
.creation-material-tile em { color: var(--coral); font-size: 9px; font-style: normal; font-weight: 800; }
.creation-material-column .creation-clear-button {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 24px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
}
.creation-material-column .creation-clear-button svg { width: 13px; height: 13px; }
.creation-assist { display: grid; gap: 8px; margin: 0; }
.creation-assist-panels:empty { display: none; }
.creation-assist-note { margin: 0; }
.creation-studio .creation-inline-panel { padding: 12px; }
.creation-studio-settings {
  margin-top: 14px;
  padding-top: 14px;
}
.creation-studio-footer { margin-top: 14px; }
.creation-studio-bottom-controls {
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}
.creation-studio-parameter-card {
  min-width: 160px;
  min-height: 52px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--ink);
}
.creation-studio-parameter-card > span {
  color: var(--amber);
  font-size: 9px;
  font-weight: 800;
}
.creation-studio-parameter-card select,
.creation-studio-parameter-card input {
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
}
.creation-studio-parameter-card select:focus,
.creation-studio-parameter-card input:focus { outline: 0; }
.creation-product-card { width: min(255px, 100%); }
.creation-quantity-card { width: 86px; min-width: 86px; }
.creation-studio-cost {
  min-width: 104px;
  justify-content: center;
  padding-left: 2px;
}

@media (max-width: 1080px) {
  .creation-studio-mode-switch { flex: 0 0 auto; }
  .creation-studio-header-actions { flex-basis: 100%; justify-content: flex-start; }
  .creation-reference-actions { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .creation-studio-header-actions { align-items: stretch; flex-direction: column; }
  .creation-reference-actions { width: 100%; justify-content: stretch; }
  .creation-reference-action { flex: 1 1 0; min-width: 0; padding-inline: 6px; }
  .creation-studio .creation-engine-switch { width: 100%; }
  .creation-studio-reset { align-self: flex-end; }
  .creation-studio-input-layout { grid-template-columns: 1fr; gap: 12px; }
  .creation-material-column { justify-content: flex-start; }
  .creation-material-tile { width: 100%; min-height: 86px; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: 1fr; justify-items: start; text-align: left; }
  .creation-material-tile-preview { width: 58px; height: 58px; }
  .creation-material-tile-copy strong,
  .creation-material-tile-copy small { max-width: none; }
  .creation-material-tile em { grid-column: 2; }
  .creation-material-column .creation-clear-button { top: -6px; right: -6px; }
  .creation-studio-prompt textarea { min-height: 148px; }
  .creation-studio-bottom-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creation-studio-parameter-card,
  .creation-product-card,
  .creation-quantity-card,
  .creation-studio-cost { width: 100%; min-width: 0; }
}

/* Official-style freeform console: one continuous editor, with context panels in place. */
.creation-studio-composer {
  padding: 18px;
  border-radius: 8px;
  overflow: visible;
}
.creation-studio-header {
  display: grid;
  gap: 10px;
  padding: 0 0 14px;
  position: relative;
}
.creation-studio-topbar,
.creation-studio-path-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.creation-studio-topbar {
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(180px, 1.15fr) auto auto;
  align-items: center;
}
.creation-studio-mode-switch {
  width: auto;
  min-width: 286px;
  flex: none;
}
.creation-studio-mode { min-height: 38px; padding-inline: 10px; font-size: 11px; }
.creation-reference-actions {
  flex: none;
  margin-left: auto;
  justify-content: flex-end;
  gap: 6px;
}
.creation-reference-action {
  min-height: 34px;
  padding-inline: 9px;
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
}
.creation-reference-action:hover,
.creation-reference-action.active {
  border-color: var(--line);
  background: var(--surface-muted);
  color: var(--accent-hover);
}
.creation-studio-reset {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
}
.creation-studio-reset svg { width: 15px; height: 15px; }
.creation-studio-path-row {
  justify-content: flex-start;
  padding-left: 2px;
}
.creation-studio .creation-engine-switch,
.creation-studio-video-workflows {
  border-radius: 6px;
}
.creation-studio .creation-engine-option { min-height: 30px; padding-inline: 8px; }
.creation-studio .creation-engine-option strong { font-size: 10px; }
.creation-studio-video-workflows button { min-height: 30px; }
.creation-expanded-panel-wrap {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 8px;
  max-height: min(58vh, 480px);
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(29, 45, 48, .14);
}
.creation-studio .creation-inline-panel {
  padding: 12px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.creation-inline-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.creation-inline-panel-head > div { min-width: 0; display: grid; gap: 2px; }
.creation-inline-panel-head strong { font-size: 12px; }
.creation-inline-panel-head small { color: var(--ink-soft); font-size: 10px; }
.creation-inline-panel-head > .creation-subject-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.creation-subject-panel-actions .primary-button,
.creation-subject-panel-actions .secondary-button { min-height: 32px; padding-inline: 9px; font-size: 10px; }
.creation-expanded-note { margin: 0; color: var(--coral); font-size: 11px; }
.creation-studio-editor { padding: 16px 0 0; }
.creation-studio-input-layout { display: block; }
.creation-studio-prompt-column { width: min(100%, 760px); margin: 0 auto; }
.creation-studio-prompt-surface { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgba(29, 45, 48, .04); }
.creation-studio-prompt-surface .creation-material-column { align-items: stretch; }
.creation-studio-prompt-surface .creation-material-tile { width: 136px; min-height: 92px; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 1fr; justify-items: start; gap: 8px; padding: 9px; text-align: left; }
.creation-studio-prompt-surface .creation-material-tile-preview { width: 48px; height: 48px; }
.creation-studio-prompt-surface .creation-material-tile-copy strong,
.creation-studio-prompt-surface .creation-material-tile-copy small { max-width: 74px; }
.creation-studio-prompt-surface .creation-material-tile em { grid-column: 2; }
.creation-studio-prompt-surface .creation-material-column .creation-clear-button { top: -7px; right: -7px; }
.creation-studio-editor-notes { min-width: 0; display: grid; align-content: start; gap: 10px; }
.creation-studio-workflow-note { margin-top: 10px; }
.creation-studio-footer {
  position: relative;
  align-items: center;
  margin-top: 16px;
  padding: 14px 0 0;
}
.creation-studio-bottom-controls { flex: 1 1 auto; min-width: 0; }
.creation-control-summaries {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.creation-summary-control {
  min-width: 162px;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.creation-summary-control > svg:first-child { width: 15px; height: 15px; color: var(--accent); }
.creation-summary-control > svg:last-child { width: 13px; height: 13px; color: var(--ink-soft); }
.creation-summary-control > span:not([data-icon]) { min-width: 0; display: grid; gap: 2px; }
.creation-summary-control small { color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.creation-summary-control strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.creation-summary-control:hover,
.creation-summary-control.active { border-color: #82aaa4; background: var(--accent-soft); }
.creation-control-popover {
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 12px);
  left: 0;
  width: min(500px, calc(100vw - 100px));
  max-height: min(440px, 56vh);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(24, 37, 40, .14);
}
.creation-control-popover header { display: grid; gap: 2px; margin-bottom: 10px; }
.creation-control-popover header strong { font-size: 12px; }
.creation-control-popover header small { color: var(--ink-soft); font-size: 10px; }
.creation-model-options { display: grid; gap: 6px; }
.creation-model-vendor { display: grid; gap: 6px; }
.creation-model-vendor + .creation-model-vendor { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--line); }
.creation-model-vendor h4 { margin: 0; color: var(--ink-soft); font-size: 9px; font-weight: 800; letter-spacing: 0; }
.creation-model-options button {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.creation-model-options button:hover,
.creation-model-options button.active { border-color: #7fa9a2; background: var(--accent-soft); }
.creation-model-options button > span { min-width: 0; display: grid; gap: 3px; }
.creation-model-options strong { font-size: 11px; }
.creation-model-options small { overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.creation-model-options em { flex: 0 0 auto; color: var(--accent-hover); font-size: 9px; font-style: normal; font-weight: 800; }
.creation-model-empty { margin: 0; padding: 20px 12px; color: var(--ink-soft); font-size: 11px; text-align: center; }
.creation-parameter-popover { width: min(440px, calc(100vw - 100px)); }
.creation-parameter-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.creation-parameter-row > span { padding-top: 7px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.creation-parameter-row > div { display: flex; flex-wrap: wrap; gap: 5px; }
.creation-parameter-row button {
  min-width: 38px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.creation-parameter-row button:hover,
.creation-parameter-row button.active { border-color: #7fa9a2; background: var(--accent-soft); color: var(--accent-hover); }
.creation-parameter-fixed { align-self: center; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.creation-studio-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.creation-studio-cost { min-width: 100px; }
.creation-studio-cost strong { font-size: 13px; }
.creation-studio-generate { min-width: 142px; min-height: 44px; }
.creation-subject-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.creation-subject-choice {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.creation-subject-choice > img,
.creation-subject-choice > svg { width: 42px; height: 42px; display: grid; place-items: center; object-fit: cover; border-radius: 5px; background: var(--surface-strong); color: var(--ink-soft); }
.creation-subject-choice > span:nth-of-type(1) { min-width: 0; display: grid; gap: 3px; }
.creation-subject-choice strong,
.creation-subject-choice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creation-subject-choice strong { font-size: 11px; }
.creation-subject-choice small { color: var(--ink-soft); font-size: 9px; }
.creation-subject-choice:hover,
.creation-subject-choice.active { border-color: #7fa9a2; background: var(--accent-soft); }
.creation-subject-choice-check { position: absolute; top: 5px; right: 5px; color: var(--accent); }
.creation-subject-choice-check svg { width: 14px; height: 14px; }
.creation-subject-import-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.creation-subject-import-head strong { color: var(--ink); font-size: 11px; }
.creation-subject-import-head small { color: var(--ink-soft); font-size: 10px; }
.creation-subject-empty { min-height: 84px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--ink-soft); }
.creation-subject-empty > svg { width: 22px; height: 22px; color: var(--accent); }
.creation-subject-empty > div { flex: 1 1 auto; display: grid; gap: 3px; }
.creation-subject-empty strong { color: var(--ink); font-size: 11px; }
.creation-subject-empty small { font-size: 10px; }
.creation-reverse-layout { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 14px; }
.creation-reverse-source { min-width: 0; display: grid; gap: 10px; }
.creation-reverse-source .creation-inline-tabs { padding-bottom: 0; border-bottom: 0; }
.creation-reverse-asset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.creation-reverse-asset { position: relative; min-width: 0; display: grid; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); text-align: left; cursor: pointer; }
.creation-reverse-asset img { width: 100%; aspect-ratio: 1.35; object-fit: cover; border-radius: 3px; background: var(--surface-strong); }
.creation-reverse-asset > span { overflow: hidden; padding: 0 2px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.creation-reverse-asset.active { border-color: #7fa9a2; background: var(--accent-soft); color: var(--accent-hover); }
.creation-reverse-asset i { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; color: #fff; font-style: normal; }
.creation-reverse-asset i svg { width: 15px; height: 15px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .26)); }
.creation-reverse-assets-empty { min-height: 74px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed var(--line-strong); color: var(--ink-soft); }
.creation-reverse-assets-empty svg { width: 19px; height: 19px; color: var(--accent); }
.creation-reverse-output { min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-content: center; padding: 10px; border-left: 1px solid var(--line); }
.creation-reverse-selected { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-strong); color: var(--ink-soft); }
.creation-reverse-selected img { width: 100%; height: 100%; object-fit: cover; }
.creation-reverse-selected svg { width: 20px; height: 20px; }
.creation-reverse-output > div:nth-child(2) { min-width: 0; display: grid; align-content: center; gap: 3px; }
.creation-reverse-output strong,
.creation-reverse-output small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creation-reverse-output strong { color: var(--ink); font-size: 11px; }
.creation-reverse-output small { color: var(--ink-soft); font-size: 10px; }
.creation-reverse-output .primary-button { grid-column: 1 / -1; justify-content: center; min-height: 32px; font-size: 10px; }

@media (max-width: 1160px) {
  .creation-studio-topbar { display: flex; flex-wrap: wrap; }
}

@media (max-width: 920px) {
  .watermark-workspace { grid-template-columns: 1fr; }
  .watermark-source-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .watermark-result-panel { min-height: 440px; }
  .creation-studio-topbar { align-items: flex-start; flex-wrap: wrap; }
  .creation-reference-actions { order: 3; width: 100%; justify-content: flex-start; }
  .creation-studio-reset { margin-left: auto; }
  .creation-subject-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .watermark-hero { display: grid; gap: 12px; padding: 18px; }
  .watermark-hero h2 { font-size: 18px; }
  .watermark-source-panel { padding: 16px; }
  .watermark-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .watermark-submit-row, .watermark-result-foot { align-items: stretch; flex-direction: column; }
  .watermark-submit-row .primary-button, .watermark-result-actions { width: 100%; }
  .watermark-result-actions { justify-content: stretch; flex-wrap: wrap; }
  .watermark-result-actions > * { flex: 1 1 auto; }
  .creation-studio-composer { padding: 13px; }
  .creation-studio-topbar { gap: 7px; }
  .creation-studio-mode-switch { width: 100%; min-width: 0; }
  .creation-reference-actions { flex-wrap: wrap; }
  .creation-reference-action { flex: 1 0 auto; }
  .creation-studio-path-row { align-items: stretch; flex-direction: column; }
  .creation-studio .creation-engine-switch,
  .creation-studio-video-workflows { width: 100%; }
  .creation-studio .creation-engine-option,
  .creation-studio-video-workflows button { flex: 1 1 0; }
  .creation-studio-input-layout { grid-template-columns: 1fr; }
  .creation-studio-prompt-surface { grid-template-columns: 1fr; gap: 10px; padding: 11px; }
  .creation-studio-prompt-surface .creation-material-tile { width: 100%; min-height: 74px; grid-template-columns: 48px minmax(0, 1fr); }
  .creation-expanded-panel-wrap { right: -1px; left: -1px; max-height: min(46vh, 360px); }
  .creation-studio .template-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .creation-studio .template-choice { aspect-ratio: 4 / 3; }
  .creation-studio-footer { align-items: stretch; flex-direction: column; }
  .creation-studio-bottom-controls { display: block; width: 100%; }
  .creation-control-summaries { width: 100%; }
  .creation-summary-control { min-width: 0; flex: 1 1 0; }
  .creation-control-popover,
  .creation-parameter-popover { width: calc(100vw - 58px); max-width: none; }
  .creation-studio-actions { justify-content: space-between; }
  .creation-studio-actions { width: 100%; }
  .creation-studio-generate { min-width: 126px; }
  .creation-subject-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creation-subject-panel .creation-inline-panel-head { align-items: stretch; flex-direction: column; }
  .creation-inline-panel-head > .creation-subject-panel-actions { width: 100%; justify-content: stretch; flex-wrap: wrap; }
  .creation-subject-panel-actions > button { min-width: 0; flex: 1 1 140px; }
  .creation-reverse-layout { grid-template-columns: 1fr; }
  .creation-reverse-output { grid-template-columns: 52px minmax(0, 1fr); border-top: 1px solid var(--line); border-left: 0; }
  .creation-reverse-asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creation-parameter-row { grid-template-columns: 1fr; gap: 6px; }
  .creation-parameter-row > span { padding-top: 0; }
}

/* Keep the creation composer aligned with the reference console: a compact
   source card sits beside the primary prompt area, while context controls stay
   in the top row. */
.creation-studio-mode-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.creation-studio-input-layout {
  width: min(100%, 900px);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  margin: 0 auto;
}
.creation-studio-input-layout > .creation-material-column {
  align-items: flex-start;
  justify-content: flex-start;
}
.creation-studio-prompt-column {
  width: auto;
  margin: 0;
}
.creation-studio-prompt {
  display: grid;
  gap: 7px;
}
.creation-studio-prompt > span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}
.creation-studio-prompt textarea {
  width: 100%;
  height: 96px;
  min-height: 96px;
  max-height: 180px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  line-height: 1.65;
  resize: vertical;
}
.creation-studio-prompt textarea:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(15, 118, 110, .12);
}
.creation-studio-prompt > small {
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}
.creation-studio-input-layout .creation-material-tile {
  width: 96px;
  min-height: 96px;
  grid-template-rows: 48px minmax(0, auto) auto;
  gap: 5px;
  padding: 7px;
}
.creation-studio-input-layout .creation-material-tile-preview {
  width: 48px;
  height: 48px;
}
.creation-studio-input-layout .creation-material-tile-preview > svg { width: 21px; height: 21px; }
.creation-studio-input-layout .creation-material-tile-copy strong,
.creation-studio-input-layout .creation-material-tile-copy small {
  max-width: 78px;
}
.creation-studio-input-layout .creation-material-tile-copy strong { font-size: 10px; }
.creation-studio-input-layout .creation-material-tile-copy small { font-size: 8px; }
.creation-studio-input-layout .creation-material-column .creation-clear-button { top: -7px; right: -7px; }

@media (max-width: 680px) {
  .creation-studio-input-layout {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .creation-studio-input-layout > .creation-material-column { justify-content: flex-start; }
  .creation-studio-input-layout .creation-material-tile {
    width: 96px;
    min-height: 96px;
    grid-template-columns: 48px;
    grid-template-rows: 48px minmax(0, auto) auto;
    justify-items: center;
    text-align: center;
  }
  .creation-studio-prompt textarea { min-height: 112px; height: 112px; }
}

/* Keep the reference console's left controls and right tool group distinct. */
.creation-studio-header {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}
.creation-studio-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.creation-studio-header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.creation-studio-header-actions .creation-reference-actions {
  flex: 0 0 auto;
  width: auto;
  margin-left: 0;
  order: 0;
}
.creation-studio-header-actions .creation-studio-video-workflows,
.creation-studio-header-actions .creation-studio-reset {
  flex: 0 0 auto;
}
.creation-studio-path-row {
  min-height: 0;
  justify-content: flex-start;
}
.creation-studio-path-row:empty { display: none; }
.creation-studio-path-row { display: none; }
.creation-studio-input-layout {
  width: 100%;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin: 0;
}
.creation-studio-input-layout > .creation-material-column {
  justify-content: flex-start;
}
.creation-studio-prompt-column {
  width: 100%;
  margin: 0;
}
.creation-studio-prompt textarea {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
}
.creation-studio-prompt textarea:focus {
  border: 0;
  outline: 2px solid var(--accent-soft);
  outline-offset: 4px;
}

@media (max-width: 920px) {
  .creation-studio-topbar {
    grid-template-columns: 1fr;
  }
  .creation-studio-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .creation-studio-topbar {
    grid-template-columns: 1fr;
  }
  .creation-studio-mode-switch {
    width: 100%;
    min-width: 0;
  }
  .creation-studio-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .creation-studio-header-actions .creation-studio-video-workflows {
    grid-column: 1 / -1;
    width: 100%;
  }
  .creation-studio-header-actions .creation-reference-actions {
    width: auto;
    order: 0;
    justify-content: flex-start;
  }
  .creation-studio-header-actions .creation-studio-reset { margin-left: 0; }
  .creation-studio-input-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Live is a focused source-processing workspace, separate from the creation canvas. */
.live-view { min-width: 0; display: grid; gap: 16px; }
.live-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.live-hero h2, .live-hero p { margin: 0; letter-spacing: 0; }
.live-hero h2 { margin-top: 4px; font-size: 20px; }
.live-hero p { margin-top: 6px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.live-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.live-project-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; max-width: min(260px, 100%); padding: 0 10px; border: 1px solid #bcd6d2; border-radius: 5px; background: var(--accent-soft); color: #0b5d57; font-size: 11px; font-weight: 700; }
.live-project-pill span { display: inline-flex; }
.live-project-pill svg { width: 15px; height: 15px; }
.live-form { min-width: 0; display: grid; gap: 12px; }
.live-source-card, .live-processing-card { min-width: 0; display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 6px 20px rgba(29, 45, 48, .04); }
.live-source-card > header, .live-processing-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.live-source-card > header > div, .live-processing-card > header > div { min-width: 0; display: grid; gap: 4px; }
.live-source-card strong, .live-processing-card strong { color: var(--ink); font-size: 13px; }
.live-source-card small, .live-processing-card small { color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.live-source-card .icon-button { width: 30px; min-height: 30px; }
.live-source-actions { width: min(400px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.live-source-command { min-width: 0; height: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 750; }
.live-source-command:hover, .live-source-command.active { border-color: #8bc8bd; background: var(--accent-soft); color: var(--accent-hover); }
.live-source-command.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.live-source-command.primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.live-source-command.disabled { opacity: .48; cursor: wait; }
.live-source-command input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.live-source-command svg { width: 16px; height: 16px; flex: 0 0 auto; }
.live-asset-picker { min-width: 0; display: grid; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }
.live-asset-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.live-asset-picker-head strong { font-size: 11px; }
.live-asset-picker-head small { color: var(--ink-soft); font-size: 9px; }
.live-asset-grid { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; max-height: 240px; overflow: auto; }
.live-asset-grid .asset-option { min-width: 0; }
.live-assets-empty { min-height: 76px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed var(--line-strong); color: var(--ink-soft); text-align: center; font-size: 10px; }
.live-assets-empty svg { width: 20px; height: 20px; color: var(--accent); }
.live-assets-empty .secondary-button { min-height: 30px; font-size: 10px; }
.live-section-label { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.live-processing-card > header .text-button { min-height: 28px; padding: 0 5px; font-size: 10px; }
.live-source-meta { color: var(--ink-soft); font-size: 9px; line-height: 1.4; }
.live-processing-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: start; gap: 22px; }
.live-source-column, .live-control-column { min-width: 0; display: grid; align-content: start; gap: 9px; }
.live-source-column .live-source-stage.has-source { height: min(52vh, 460px); min-height: 320px; }
.live-source-caption { min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; }
.live-source-caption svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }
.live-control-column { gap: 15px; padding: 4px 0; }
.live-control-intro { display: grid; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.live-control-intro h3, .live-control-intro p { margin: 0; letter-spacing: 0; }
.live-control-intro h3 { color: var(--ink); font-size: 16px; }
.live-control-intro p { color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.live-control-column .live-video-controls, .live-control-column .live-prompt-controls { padding-top: 0; border-top: 0; }
.live-processing-placeholder { background: #fbfdfd; }
.live-processing-placeholder .live-processing-layout { min-height: 250px; }
.live-empty-source-stage { height: 100%; min-height: 250px; border-style: dashed; background: var(--surface-muted); }
.live-placeholder-hints { display: grid; gap: 8px; }
.live-placeholder-hints > div { min-width: 0; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: start; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.live-placeholder-hints > div:last-child { border-bottom: 0; }
.live-placeholder-hints > div > svg { width: 17px; height: 17px; margin-top: 2px; color: var(--accent); }
.live-placeholder-hints > div > span:last-child { min-width: 0; display: grid; gap: 3px; }
.live-placeholder-hints strong { color: var(--ink); font-size: 11px; }
.live-placeholder-hints small { color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.live-source-stage { min-height: 170px; display: grid; place-items: center; overflow: hidden; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }
.live-source-stage.has-source { min-height: 220px; padding: 0; background: #152024; }
.live-source-media { position: relative; width: 100%; height: 100%; min-height: 220px; display: grid; place-items: center; overflow: hidden; }
.live-source-media-image { padding: 0; border: 0; border-radius: 0; background: #152024; cursor: zoom-in; }
.live-source-media-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: 360px; object-fit: contain; }
.live-source-media-video video { display: block; width: 100%; height: 100%; max-height: 360px; object-fit: contain; }
.live-preview-trigger, .live-image-preview-hint { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 5px; background: rgba(20, 33, 36, .78); color: #fff; font-size: 10px; font-weight: 750; line-height: 1; }
.live-preview-trigger { position: absolute; top: 10px; right: 10px; min-height: 29px; padding: 0 9px; cursor: pointer; }
.live-clip-preview-range { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 5px; background: rgba(20, 33, 36, .78); color: #fff; font-size: 10px; font-weight: 750; line-height: 1; pointer-events: none; }
.live-clip-preview-range svg { width: 13px; height: 13px; }
.live-preview-trigger:hover, .live-image-preview-hint:hover { border-color: rgba(255, 255, 255, .6); background: rgba(20, 33, 36, .92); }
.live-preview-trigger svg, .live-image-preview-hint svg { width: 13px; height: 13px; }
.live-image-preview-hint { position: absolute; right: 10px; bottom: 10px; padding: 8px 9px; pointer-events: none; }
.live-stage-empty { display: grid; place-items: center; align-content: center; gap: 7px; color: var(--ink-soft); text-align: center; }
.live-stage-empty svg { width: 28px; height: 28px; color: var(--accent); }
.live-stage-empty strong { color: var(--ink); font-size: 12px; }
.live-stage-empty small { font-size: 10px; }
.live-video-controls, .live-prompt-controls { display: grid; gap: 10px; padding-top: 3px; border-top: 1px solid var(--line); }
.live-video-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.live-video-controls > div:first-child, .live-control-heading > div { min-width: 0; display: grid; gap: 3px; }
.live-video-controls strong, .live-control-heading strong { font-size: 11px; }
.live-video-controls small, .live-control-heading small { color: var(--ink-soft); font-size: 10px; }
.live-clip-reselect { min-height: 34px; padding: 0 10px; flex: 0 0 auto; font-size: 10px; }
.live-duration-options { display: flex; gap: 5px; }
.live-duration-options button { min-height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 10px; font-weight: 700; cursor: pointer; }
.live-duration-options button:hover, .live-duration-options button.active { border-color: #7fa9a2; background: var(--accent-soft); color: var(--accent-hover); }
.live-control-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-prompt-heading-actions { display: flex; align-items: center; gap: 7px; }
.live-prompt-preview { color: var(--accent); font-size: 10px; font-weight: 750; white-space: nowrap; }
.live-prompt-toggle { width: 28px; height: 28px; min-height: 28px; flex: 0 0 auto; }
.live-prompt-toggle svg { width: 14px; height: 14px; }
.live-prompt-template-body { position: absolute; top: calc(100% + 8px); right: -1px; left: -1px; z-index: 30; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: min(58vh, 480px); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 16px 40px rgba(29, 45, 48, .14); }
.live-prompt-template-body[hidden] { display: none; }
.live-prompt-template-scroll { min-height: 0; display: grid; align-content: start; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; scrollbar-gutter: stable; }
.live-prompt-category-list { display: grid; gap: 13px; }
.live-prompt-category { min-width: 0; display: grid; gap: 7px; }
.live-prompt-category > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.live-prompt-category > header strong { color: var(--ink); font-size: 10px; }
.live-prompt-category > header small { color: var(--ink-soft); font-size: 9px; }
.live-prompt-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.live-prompt-choice { min-width: 0; min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.live-prompt-choice:hover, .live-prompt-choice.active { border-color: #7fa9a2; background: var(--accent-soft); }
.live-prompt-choice:focus-visible, .live-prompt-confirm:focus-visible, .live-prompt-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.live-prompt-choice-copy { min-width: 0; display: grid; gap: 5px; }
.live-prompt-choice-copy strong, .live-prompt-choice-copy small { overflow: hidden; text-overflow: ellipsis; }
.live-prompt-choice-copy strong { font-size: 11px; }
.live-prompt-choice-copy small { color: var(--ink-soft); font-size: 9px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.live-prompt-choice-check { width: 15px; height: 15px; color: var(--accent); opacity: 0; }
.live-prompt-choice.active .live-prompt-choice-check { opacity: 1; }
.live-prompt-choice.custom { border-style: dashed; }
.live-prompt-category.is-custom .live-prompt-choice { min-height: 66px; }
.live-custom-prompt { display: grid; gap: 6px; }
.live-custom-prompt > span { color: var(--ink); font-size: 10px; font-weight: 750; }
.live-custom-prompt textarea { min-height: 82px; font-size: 11px; line-height: 1.55; }
.live-custom-prompt-actions { display: flex; justify-content: flex-end; }
.live-custom-prompt-actions .secondary-button { min-height: 31px; padding: 0 9px; font-size: 10px; }
.live-custom-prompt-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.live-custom-prompt-item { position: relative; min-width: 0; }
.live-custom-prompt-item .live-prompt-choice { width: 100%; height: 66px; min-height: 66px; grid-template-columns: minmax(0, 1fr); padding-right: 39px; }
.live-custom-prompt-item .live-prompt-choice-check { display: none; }
.live-custom-prompt-remove { position: absolute; z-index: 1; top: 7px; right: 7px; width: 24px; height: 24px; min-height: 24px; color: var(--ink-soft); }
.live-custom-prompt-remove:hover { border-color: #d8aaa3; background: #fff8f7; color: var(--red); }
.live-custom-prompt-remove svg { width: 14px; height: 14px; }
.live-prompt-template-body.opens-upward { box-shadow: 0 -16px 40px rgba(29, 45, 48, .14); }
.live-selected-prompt { min-width: 0; display: grid; gap: 3px; padding: 9px 10px; border: 1px solid #cce3de; border-radius: 5px; background: #f5fbfa; color: #37625d; }
.live-selected-prompt > span { color: var(--accent); font-size: 9px; font-weight: 750; }
.live-selected-prompt > strong { overflow-wrap: anywhere; color: var(--ink); font-size: 10px; }
.live-selected-prompt > small { color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.live-prompt-template-actions { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 7px; padding: 8px 14px 12px; border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -8px 12px -12px rgba(29, 45, 48, .45); }
.live-prompt-confirm, .live-prompt-collapse { width: 100%; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; font-weight: 750; }
.live-prompt-confirm { padding: 0 9px; }
.live-prompt-collapse { position: static; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.live-prompt-collapse:hover { border-color: #7fa9a2; background: var(--accent-soft); color: var(--accent-hover); }
.live-prompt-collapse svg { width: 13px; height: 13px; }
.live-prompt-collapsed-summary { margin: 0; overflow: hidden; color: var(--ink-soft); font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.live-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.live-submit-row > div { min-width: 0; display: grid; gap: 3px; color: var(--ink-soft); font-size: 10px; }
.live-submit-row > div span { font-size: 10px; }
.live-submit-row strong { color: var(--ink); font-size: 14px; }
.live-submit-row small { font-size: 9px; }
.live-submit-row .primary-button { min-height: 42px; }

.live-clip-dialog { width: min(880px, calc(100vw - 28px)); }
.live-clip-dialog-body { max-height: calc(100vh - 150px); overflow: auto; }
.live-clip-editor { min-width: 0; display: grid; gap: 16px; }
.live-clip-dialog-preview { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 260px; display: grid; place-items: center; overflow: hidden; border: 1px solid #263639; border-radius: 6px; background: #111a1d; }
.live-clip-dialog-preview video { width: 100%; height: 100%; object-fit: contain; }
.live-clip-preview-button { position: absolute; left: 14px; bottom: 14px; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 5px; background: rgba(18, 29, 32, .84); color: #fff; font-size: 10px; font-weight: 750; cursor: pointer; }
.live-clip-preview-button:hover { border-color: rgba(255, 255, 255, .68); background: rgba(18, 29, 32, .96); }
.live-clip-preview-button svg { width: 14px; height: 14px; }
.live-clip-playback-label { position: absolute; right: 14px; bottom: 14px; min-height: 30px; display: inline-flex; align-items: center; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 5px; background: rgba(18, 29, 32, .78); color: #fff; font-size: 10px; font-variant-numeric: tabular-nums; }
.live-clip-timeline-panel { min-width: 0; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfc; }
.live-clip-timeline-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.live-clip-timeline-panel > header > div { min-width: 0; display: grid; gap: 3px; }
.live-clip-timeline-panel > header strong { font-size: 12px; }
.live-clip-timeline-panel > header small { color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
#liveClipRangeLabel { flex: 0 0 auto; color: var(--accent-hover); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-clip-timeline { position: relative; width: 100%; height: 86px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 5px; background: #e9eeee; touch-action: none; }
.live-clip-filmstrip { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.live-clip-filmstrip > span { min-width: 0; display: grid; place-items: center; align-content: center; gap: 5px; border-right: 1px solid #c9d2d3; background: #eef2f2; color: #7a888b; }
.live-clip-filmstrip > span:nth-child(even) { background: #e5ebeb; }
.live-clip-filmstrip > span:last-child { border-right: 0; }
.live-clip-filmstrip svg { width: 16px; height: 16px; opacity: .42; }
.live-clip-filmstrip small { font-size: 8px; font-variant-numeric: tabular-nums; }
.live-clip-selection { position: absolute; top: 0; bottom: 0; min-width: 48px; display: flex; align-items: center; justify-content: space-between; border: 2px solid var(--accent); border-radius: 4px; background: rgba(19, 132, 118, .14); box-shadow: 0 0 0 999px rgba(22, 31, 33, .28); color: #fff; cursor: grab; touch-action: none; }
.live-clip-selection:focus-visible { outline: 2px solid #fff; outline-offset: -5px; box-shadow: 0 0 0 999px rgba(22, 31, 33, .28), 0 0 0 3px var(--accent); }
.live-clip-selection.dragging { cursor: grabbing; }
.live-clip-selection > i { width: 7px; height: 34px; margin: 0 3px; border-radius: 2px; background: var(--accent); }
.live-clip-selection > span { overflow: hidden; padding: 4px 6px; border-radius: 4px; background: rgba(10, 74, 67, .78); font-size: 9px; font-weight: 800; white-space: nowrap; pointer-events: none; }
.live-clip-range-control { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.live-clip-range-control input { width: 100%; accent-color: var(--accent); cursor: pointer; }
.live-clip-duration-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 11px; border-top: 1px solid var(--line); }
.live-clip-duration-row > div:first-child { display: grid; gap: 3px; }
.live-clip-duration-row strong { font-size: 11px; }
.live-clip-duration-row small { color: var(--ink-soft); font-size: 9px; }
.live-clip-dialog-note { min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; }
.live-clip-dialog-note svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }

@media (max-width: 900px) {
  .live-processing-layout { grid-template-columns: minmax(0, 1.1fr) minmax(230px, .9fr); gap: 16px; }
}

@media (max-width: 680px) {
  .live-hero { display: grid; gap: 12px; padding: 17px; }
  .live-hero h2 { font-size: 18px; }
  .live-project-pill { width: fit-content; max-width: 100%; }
  .live-source-card, .live-processing-card { padding: 15px; }
  .live-processing-layout { grid-template-columns: 1fr; gap: 18px; }
  .live-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-source-stage.has-source { min-height: 180px; }
  .live-source-column .live-source-stage.has-source { height: 260px; min-height: 260px; }
  .live-processing-placeholder .live-empty-source-stage { height: 220px; min-height: 220px; }
  .live-source-media { min-height: 180px; }
  .live-source-media-image img { max-height: 280px; }
  .live-prompt-template-body { max-height: min(46vh, 360px); }
  .live-prompt-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-video-controls, .live-submit-row { align-items: stretch; flex-direction: column; }
  .live-duration-options { width: 100%; }
  .live-duration-options button { flex: 1 1 0; }
  .live-submit-row .primary-button { width: 100%; }
}

/* Live follows the compact source/result split used by the watermark workspace. */
.live-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .84fr); align-items: start; min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; overflow: visible; }
.live-source-panel, .live-result-panel { min-width: 0; }
.live-source-panel { display: grid; align-content: start; gap: 14px; padding: 20px; border-right: 1px solid var(--line); }
.live-result-panel { align-self: start; display: grid; grid-template-rows: auto minmax(320px, 1fr) auto; min-height: 560px; background: #fbfcfc; }
.live-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.live-section-head > div:first-child { min-width: 0; display: grid; gap: 4px; }
.live-section-head > div:first-child > span { color: var(--ink); font-size: 13px; font-weight: 800; }
.live-section-head small { color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.live-head-actions { display: flex; align-items: center; gap: 8px; }
.live-head-actions .icon-button { width: 30px; height: 30px; min-height: 30px; }
.live-status, .live-result-label { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }
.live-status i, .live-result-label i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--line-strong); }
.live-status.active i, .live-result-label i.active { background: var(--blue); }
.live-status.ready i, .live-result-label i.ready { background: var(--accent); }
.live-status.error i, .live-result-label i.error { background: var(--red); }
.live-source-actions { width: min(360px, 100%); }
.live-source-preview { min-height: 144px; display: grid; place-items: center; overflow: hidden; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #f5f8f8; }
.live-source-preview.has-source { height: clamp(170px, 24vw, 240px); min-height: 170px; padding: 0; background: #152024; }
.live-source-preview .live-source-media { min-height: 170px; height: 100%; }
.live-source-preview .live-source-media-image img { max-height: 230px; }
.live-source-preview .live-source-media-video video { max-height: 230px; }
.live-source-caption { min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; }
.live-source-caption > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-source-caption > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }
.live-source-caption .text-button { margin-left: auto; min-height: 26px; padding: 0 4px; font-size: 10px; }
.live-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-top: 2px; border-top: 1px solid var(--line); }
.live-mode-switch button { min-width: 0; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 11px; font-weight: 750; cursor: pointer; }
.live-mode-switch button:hover, .live-mode-switch button.active { border-color: #7fa9a2; background: var(--accent-soft); color: var(--accent-hover); }
.live-mode-switch button svg { width: 15px; height: 15px; }
.live-prompt-before-upload { position: relative; z-index: 20; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfc; }
.live-prompt-before-upload.is-template-expanded { z-index: 50; }
.live-prompt-before-upload .live-prompt-controls { padding-top: 0; border-top: 0; }
.live-prompt-before-upload .live-prompt-choice { min-height: 66px; }
.live-free-hint { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid #bcded7; border-radius: 6px; background: #f4fbf9; color: var(--accent-hover); }
.live-free-hint > svg { width: 18px; height: 18px; justify-self: center; }
.live-free-hint > span:last-child { min-width: 0; display: grid; gap: 2px; }
.live-free-hint strong { color: var(--ink); font-size: 11px; }
.live-free-hint small { color: var(--ink-soft); font-size: 10px; }
.live-processing-controls { display: grid; gap: 12px; }
.live-processing-controls .live-control-intro { padding-bottom: 11px; }
.live-control-placeholder { min-height: 76px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px dashed var(--line-strong); border-radius: 5px; color: var(--ink-soft); text-align: center; }
.live-control-placeholder svg { width: 19px; height: 19px; color: var(--accent); }
.live-control-placeholder strong { color: var(--ink); font-size: 11px; }
.live-control-placeholder small { font-size: 10px; }
.live-processing-controls .live-prompt-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.live-prompt-summary { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 9px; padding: 10px 11px; border: 1px solid #cce3de; border-radius: 5px; background: #f5fbfa; }
.live-prompt-summary > svg { width: 17px; height: 17px; margin-top: 1px; color: var(--accent); }
.live-prompt-summary > span:last-child { min-width: 0; display: grid; gap: 3px; }
.live-prompt-summary strong { color: var(--ink); font-size: 11px; }
.live-prompt-summary small { overflow: hidden; color: var(--ink-soft); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.live-result-panel > .live-section-head { padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.live-result-stage { min-height: 320px; display: grid; place-items: center; overflow: hidden; padding: 18px; background: #eef2f2; }
.live-result-stage.has-result { padding: 0; background: #152024; }
.live-result-stage img, .live-result-stage video { width: 100%; height: 100%; max-height: 470px; object-fit: contain; }
.live-photo-output { width: 100%; height: 100%; min-height: 320px; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.live-photo-motion-preview { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 0; border: 0; background: #152024; color: #fff; cursor: pointer; }
.live-photo-motion-preview video { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: contain; }
.live-photo-motion-preview > span { position: absolute; left: 12px; bottom: 12px; min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 5px; background: rgba(18, 30, 32, .82); font-size: 10px; font-weight: 750; }
.live-photo-motion-preview > span svg { width: 13px; height: 13px; }
.live-photo-range { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-top: 1px solid #344346; background: #202d30; color: #fff; }
.live-photo-range > span { min-width: 0; display: grid; gap: 3px; }
.live-photo-range strong { font-size: 10px; }
.live-photo-range small { color: #bcc8ca; font-size: 9px; font-variant-numeric: tabular-nums; }
.live-photo-range .secondary-button { min-height: 31px; flex: 0 0 auto; border-color: #526164; background: #2b393c; color: #fff; font-size: 9px; }
.live-result-stage .live-stage-empty { min-height: 260px; }
.live-progress svg { color: var(--blue); }
.live-failed svg { color: var(--red); }
.live-result-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fff; }
.live-result-foot > div:first-child { min-width: 0; display: grid; gap: 3px; }
.live-result-foot strong, .live-result-foot small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-result-foot strong { font-size: 11px; }
.live-result-foot small { color: var(--ink-soft); font-size: 9px; }
.live-result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.live-result-actions .secondary-button, .live-result-actions .primary-button { min-height: 32px; padding: 0 9px; font-size: 10px; }
.live-saved { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 10px; font-weight: 700; white-space: nowrap; }
.live-saved svg { width: 14px; height: 14px; }

@media (max-width: 920px) {
  .live-workspace { grid-template-columns: 1fr; }
  .live-source-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .live-result-panel { min-height: 440px; }
}

@media (max-width: 680px) {
  .live-source-panel { padding: 16px; }
  .live-result-panel > .live-section-head { padding: 16px 16px 13px; }
  .live-result-foot { align-items: stretch; flex-direction: column; padding: 13px 16px; }
  .live-result-actions { width: 100%; justify-content: stretch; flex-wrap: wrap; }
  .live-result-actions > * { flex: 1 1 auto; }
  .live-source-preview.has-source { height: 220px; }
  .live-source-media { min-height: 170px; }
  .live-clip-dialog-body { padding: 13px; }
  .live-clip-dialog-preview { min-height: 190px; }
  .live-clip-timeline-panel { padding: 12px; }
  .live-clip-timeline-panel > header, .live-clip-duration-row { align-items: stretch; flex-direction: column; }
  #liveClipRangeLabel { align-self: flex-start; }
  .live-clip-range-control { grid-template-columns: 1fr; gap: 5px; }
  .live-clip-duration-row .live-duration-options { width: 100%; }
  .live-clip-duration-row .live-duration-options button { flex: 1 1 0; }
  .live-clip-dialog .dialog-actions { align-items: stretch; flex-direction: column; }
  .live-clip-dialog .row-actions { width: 100%; }
  .live-clip-dialog .row-actions > button { flex: 1 1 0; }
}

/* Fantasy recovery is an independent workflow beside the original Fantasy studio. */
.fantasy-workspace-shell { min-width: 0; display: grid; gap: 12px; }
.fantasy-workspace-mode {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.fantasy-workspace-mode > div:first-child { min-width: 0; display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; }
.fantasy-workspace-mode > div:first-child span { color: var(--ink-soft); font-size: 10px; }
.fantasy-workspace-mode > div:first-child strong { font-size: 12px; }
.fantasy-workspace-mode [role="tablist"] { display: grid; grid-template-columns: repeat(2, minmax(112px, 1fr)); gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }
.fantasy-workspace-mode [role="tab"] { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink-soft); font-size: 10px; font-weight: 750; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.fantasy-workspace-mode [role="tab"]:hover { color: var(--ink); }
.fantasy-workspace-mode [role="tab"].active { border-color: #c8d7d4; background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(24, 33, 36, .05); }
.fantasy-workspace-mode [role="tab"] svg { width: 14px; height: 14px; }
.fantasy-workspace-shell > .fantasy-surface { height: min(780px, calc(100vh - 178px)); min-height: 560px; }

.fantasy-recovery-workspace { min-width: 0; display: grid; border: 1px solid var(--line); border-radius: 7px; background: #fff; overflow: hidden; }
.fantasy-recovery-hero { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid var(--line); background: #fbfcfc; }
.fantasy-recovery-hero > div { min-width: 0; }
.fantasy-recovery-hero span:first-child { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.fantasy-recovery-hero h2, .fantasy-recovery-hero p { margin: 0; letter-spacing: 0; }
.fantasy-recovery-hero h2 { margin-top: 5px; font-size: 20px; }
.fantasy-recovery-hero p { margin-top: 5px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.fantasy-recovery-project { max-width: 240px; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-project svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }
.fantasy-recovery-section { position: relative; min-width: 0; display: grid; gap: 16px; padding: 24px; border-bottom: 1px solid var(--line); background: #fff; }
.fantasy-recovery-section:last-child { border-bottom: 0; }
.fantasy-recovery-section:nth-of-type(even) { background: #fbfcfc; }
.fantasy-recovery-section:nth-of-type(2) { background: #f5faf8; box-shadow: inset 3px 0 0 #73a99f; }
.fantasy-recovery-section > header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid #dce8e5; }
.fantasy-recovery-section > header > div:first-child { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: start; gap: 9px; }
.fantasy-recovery-section > header > div:first-child > span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #a9c9c3; border-radius: 50%; color: var(--accent); font-size: 9px; font-weight: 800; }
.fantasy-recovery-section h3, .fantasy-recovery-section p { margin: 0; letter-spacing: 0; }
.fantasy-recovery-section h3 { font-size: 14px; }
.fantasy-recovery-section header p { margin-top: 3px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.fantasy-recovery-material-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fantasy-recovery-reference-material-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fantasy-recovery-material { min-width: 0; display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-rows: minmax(42px, auto) auto; gap: 8px 11px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfc; }
.fantasy-recovery-material.has-asset { border-color: #a9cec7; background: #f7fbfa; }
.fantasy-recovery-material-preview { width: 74px; height: 74px; grid-row: 1 / 3; display: grid; place-items: center; align-content: center; gap: 4px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #edf2f1; color: var(--ink-soft); }
.fantasy-recovery-material-preview img { width: 100%; height: 100%; object-fit: cover; }
.fantasy-recovery-material-preview.multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: stretch; gap: 2px; padding: 2px; }
.fantasy-recovery-material-preview.multiple img { min-width: 0; min-height: 0; }
.fantasy-recovery-material-preview svg { width: 20px; height: 20px; color: var(--accent); }
.fantasy-recovery-material-preview small { font-size: 9px; }
.fantasy-recovery-material-copy { min-width: 0; display: grid; align-content: center; gap: 4px; }
.fantasy-recovery-material-copy strong, .fantasy-recovery-material-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-material-copy strong { font-size: 11px; }
.fantasy-recovery-material-copy small { color: var(--ink-soft); font-size: 9px; }
.fantasy-recovery-material-actions { min-width: 0; display: flex; align-items: center; gap: 6px; }
.fantasy-recovery-material-actions .secondary-button { min-height: 31px; padding: 0 8px; font-size: 9px; }
.fantasy-recovery-material-actions label { cursor: pointer; }
.fantasy-recovery-material-actions label.disabled { opacity: .48; cursor: wait; }
.fantasy-recovery-material-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fantasy-recovery-material-actions .icon-button { width: 31px; min-height: 31px; margin-left: auto; }
.fantasy-recovery-reference-board { min-width: 0; display: grid; gap: 10px; }
.fantasy-recovery-reference-entry { min-width: 0; display: grid; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfc; }
.fantasy-recovery-reference-entry > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fantasy-recovery-reference-entry > header > div { min-width: 0; display: grid; gap: 3px; }
.fantasy-recovery-reference-entry > header strong { font-size: 12px; }
.fantasy-recovery-reference-entry > header small, .fantasy-recovery-reference-entry-actions small { color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.fantasy-recovery-reference-count { flex: 0 0 auto; color: var(--accent); font-size: 9px; }
.fantasy-recovery-reference-summary { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fantasy-recovery-reference-summary-item { min-width: 0; min-height: 64px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.fantasy-recovery-reference-summary-item.has-asset { border-color: #a9cec7; background: #f7fbfa; }
.fantasy-recovery-reference-summary-preview { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #edf2f1; color: var(--ink-soft); }
.fantasy-recovery-reference-summary-preview img { width: 100%; height: 100%; object-fit: cover; }
.fantasy-recovery-reference-summary-preview svg { width: 18px; height: 18px; color: var(--accent); }
.fantasy-recovery-reference-summary-item > div:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.fantasy-recovery-reference-summary-item strong, .fantasy-recovery-reference-summary-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-reference-summary-item strong { font-size: 10px; }
.fantasy-recovery-reference-summary-item small { color: var(--ink-soft); font-size: 8px; }
.fantasy-recovery-reference-summary-item .icon-button { width: 25px; min-height: 25px; }
.fantasy-recovery-reference-summary-state, .fantasy-recovery-reference-summary-current { color: var(--ink-soft); font-size: 8px; white-space: nowrap; }
.fantasy-recovery-reference-summary-current { color: var(--accent); }
.fantasy-recovery-reference-entry-actions { display: flex; align-items: center; gap: 10px; }
.fantasy-recovery-reference-entry-actions .primary-button { min-height: 32px; padding: 0 11px; font-size: 10px; }
.fantasy-recovery-unified-picker { gap: 10px; }
.fantasy-recovery-asset-category-tabs { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fantasy-recovery-asset-category-tabs button { min-width: 0; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 9px; cursor: pointer; }
.fantasy-recovery-asset-category-tabs button:hover, .fantasy-recovery-asset-category-tabs button.active { border-color: #72afa5; background: #eef8f6; color: var(--accent); }
.fantasy-recovery-asset-category-tabs button svg { width: 13px; height: 13px; }
.fantasy-recovery-asset-category-tabs button small { min-width: 15px; padding: 1px 4px; border-radius: 8px; background: #e1efec; color: var(--accent); font-size: 8px; }
.fantasy-recovery-unified-picker-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px dashed #bcd7d2; border-radius: 5px; background: #fff; }
.fantasy-recovery-unified-picker-toolbar .secondary-button { flex: 0 0 auto; min-height: 31px; padding: 0 9px; font-size: 9px; cursor: pointer; }
.fantasy-recovery-unified-picker-toolbar label { cursor: pointer; }
.fantasy-recovery-unified-picker-toolbar label.disabled { opacity: .48; cursor: wait; }
.fantasy-recovery-unified-picker-toolbar input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fantasy-recovery-unified-picker-toolbar small { color: var(--ink-soft); font-size: 9px; line-height: 1.4; }
.dialog.fantasy-recovery-reference-dialog, .dialog.fantasy-recovery-video-asset-dialog { width: min(980px, calc(100vw - 28px)); }
.fantasy-recovery-reference-dialog-body, .fantasy-recovery-video-asset-dialog-body { max-height: min(68vh, 650px); display: grid; gap: 14px; overflow-y: auto; }
.fantasy-recovery-reference-dialog-intro { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.fantasy-recovery-reference-dialog-intro > div { min-width: 0; display: grid; gap: 4px; }
.fantasy-recovery-reference-dialog-intro strong { color: var(--ink); font-size: 12px; }
.fantasy-recovery-reference-dialog-intro small { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.fantasy-recovery-reference-dialog-intro > span { flex: 0 0 auto; color: var(--accent); font-size: 10px; font-weight: 750; white-space: nowrap; }
.fantasy-recovery-reference-dialog-categories { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.fantasy-recovery-reference-dialog-categories button, .fantasy-recovery-reference-dialog-source-tabs button { min-width: 0; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.fantasy-recovery-reference-dialog-categories button:hover, .fantasy-recovery-reference-dialog-categories button.active, .fantasy-recovery-reference-dialog-source-tabs button:hover, .fantasy-recovery-reference-dialog-source-tabs button.active { border-color: #72afa5; background: #eef8f6; color: var(--accent); }
.fantasy-recovery-reference-dialog-categories button svg, .fantasy-recovery-reference-dialog-source-tabs button svg { width: 14px; height: 14px; flex: 0 0 auto; }
.fantasy-recovery-reference-dialog-categories button small { min-width: 16px; padding: 1px 4px; border-radius: 8px; background: #dfeeea; color: var(--accent); font-size: 8px; }
.fantasy-recovery-reference-dialog-summary { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.fantasy-recovery-reference-dialog-summary-item { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-muted); }
.fantasy-recovery-reference-dialog-summary-item.has-selection { border-color: #a9cec7; background: #f5faf8; }
.fantasy-recovery-reference-dialog-summary-item > svg { width: 16px; height: 16px; color: var(--accent); }
.fantasy-recovery-reference-dialog-summary-item > div { min-width: 0; display: grid; gap: 3px; }
.fantasy-recovery-reference-dialog-summary-item strong, .fantasy-recovery-reference-dialog-summary-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-reference-dialog-summary-item strong { color: var(--ink); font-size: 9px; }
.fantasy-recovery-reference-dialog-summary-item small { color: var(--ink-soft); font-size: 8px; }
.fantasy-recovery-reference-dialog-summary-item > .icon-button { width: 26px; min-height: 26px; }
.fantasy-recovery-reference-dialog-source { min-width: 0; display: grid; gap: 10px; padding-top: 13px; border-top: 1px solid var(--line); }
.fantasy-recovery-reference-dialog-source > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fantasy-recovery-reference-dialog-source > header > div { min-width: 0; display: grid; gap: 3px; }
.fantasy-recovery-reference-dialog-source > header strong { color: var(--ink); font-size: 11px; }
.fantasy-recovery-reference-dialog-source > header small { color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.fantasy-recovery-reference-dialog-source > header label { flex: 0 0 auto; min-height: 33px; padding: 0 10px; font-size: 10px; cursor: pointer; }
.fantasy-recovery-reference-dialog-source > header label.disabled { opacity: .48; cursor: wait; }
.fantasy-recovery-reference-dialog-source > header input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fantasy-recovery-reference-dialog-source-tabs { width: min(100%, 360px); min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fantasy-recovery-reference-dialog-grid { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 8px; max-height: 304px; overflow-y: auto; }
.fantasy-recovery-reference-dialog-asset { min-width: 0; position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; padding: 6px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.fantasy-recovery-reference-dialog-asset:hover, .fantasy-recovery-reference-dialog-asset.active { border-color: #72afa5; box-shadow: 0 0 0 1px #b6d8d2; }
.fantasy-recovery-reference-dialog-asset img { width: 100%; height: auto; display: block; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: #edf2f1; }
.fantasy-recovery-reference-dialog-asset > span { min-width: 0; display: grid; gap: 2px; }
.fantasy-recovery-reference-dialog-asset strong, .fantasy-recovery-reference-dialog-asset small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-reference-dialog-asset strong { font-size: 9px; }
.fantasy-recovery-reference-dialog-asset small { color: var(--ink-soft); font-size: 8px; }
.fantasy-recovery-reference-dialog-asset > i { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 5px; border-radius: 3px; background: var(--accent); color: #fff; font-size: 8px; font-style: normal; font-weight: 750; }
.fantasy-recovery-reference-dialog-asset > i svg { width: 11px; height: 11px; }
.fantasy-recovery-reference-dialog-empty { min-height: 124px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed #bcd7d2; color: var(--ink-soft); text-align: center; }
.fantasy-recovery-reference-dialog-empty svg { width: 20px; height: 20px; color: var(--accent); }
.fantasy-recovery-reference-dialog-empty strong { color: var(--ink); font-size: 10px; }
.fantasy-recovery-reference-dialog-empty small { font-size: 9px; }
.fantasy-recovery-reference-dialog-actions .primary-button { min-width: 132px; }
.fantasy-recovery-reference-mode { min-width: 0; display: grid; grid-template-columns: minmax(190px, .72fr) minmax(320px, 1.28fr); align-items: center; gap: 14px; padding: 12px; border: 1px solid #c8d9d6; border-radius: 6px; background: #f7fbfa; }
.fantasy-recovery-reference-mode > div:first-child { min-width: 0; display: grid; gap: 4px; }
.fantasy-recovery-reference-mode strong { color: var(--ink); font-size: 11px; }
.fantasy-recovery-reference-mode small { color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.fantasy-recovery-reference-mode .fantasy-recovery-choice-grid { width: 100%; }
.fantasy-recovery-full-person-lock-note { min-width: 0; display: grid; gap: 4px; padding: 12px; border: 1px solid #c8d9d6; border-radius: 6px; background: #f7fbfa; }
.fantasy-recovery-full-person-lock-note strong { color: var(--ink); font-size: 11px; }
.fantasy-recovery-full-person-lock-note small { color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.fantasy-recovery-asset-picker { min-width: 0; display: grid; gap: 10px; padding: 12px; border: 1px solid #bcd7d2; border-radius: 6px; background: #f7fbfa; }
.fantasy-recovery-asset-picker > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fantasy-recovery-asset-picker > header > div { min-width: 0; display: grid; gap: 3px; }
.fantasy-recovery-asset-picker > header strong { font-size: 11px; }
.fantasy-recovery-asset-picker > header small { color: var(--ink-soft); font-size: 9px; }
.fantasy-recovery-asset-picker > header .icon-button { width: 30px; min-height: 30px; }
.fantasy-recovery-asset-picker > div { min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; max-height: 190px; overflow: auto; }
.fantasy-recovery-asset-picker > div button { min-width: 0; display: grid; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 9px; cursor: pointer; }
.fantasy-recovery-asset-picker > div button:hover, .fantasy-recovery-asset-picker > div button.active { border-color: #72afa5; color: var(--accent); }
.fantasy-recovery-asset-picker img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: #edf2f1; }
.fantasy-recovery-asset-picker button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-asset-picker button span small { display: block; margin-top: 2px; color: var(--accent); font-size: 8px; }
.fantasy-recovery-asset-picker > p { min-height: 60px; display: grid; place-items: center; color: var(--ink-soft); font-size: 10px; }
.fantasy-recovery-selected-projects { min-width: 0; display: grid; gap: 9px; padding-top: 3px; }
.fantasy-recovery-selected-projects > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 1px; }
.fantasy-recovery-selected-projects > header > div { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.fantasy-recovery-selected-projects > header strong { font-size: 11px; }
.fantasy-recovery-selected-projects > header small { color: var(--ink-soft); font-size: 9px; }
.fantasy-recovery-selected-projects > header .secondary-button { min-height: 34px; }
.fantasy-recovery-project-list { min-width: 0; display: grid; gap: 7px; }
.fantasy-recovery-project-row { min-width: 0; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; transition: border-color 180ms ease, background-color 180ms ease; }
.fantasy-recovery-project-row.active { border-color: #a9cec7; background: #f7fbfa; }
.fantasy-recovery-project-row-pending { border: 1px dashed #78aa9f; background: #f4faf8; }
.fantasy-recovery-project-row-pending .fantasy-recovery-project-row-main { grid-template-columns: 1fr; }
.fantasy-recovery-project-row-pending .fantasy-recovery-project-select { cursor: default; }
.fantasy-recovery-project-row-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 8px; padding: 7px; }
.fantasy-recovery-project-select { min-width: 0; min-height: 38px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.fantasy-recovery-project-select:hover { background: #edf6f4; }
.fantasy-recovery-project-select:focus-visible, .fantasy-recovery-project-effect-toggle:focus-visible { outline: 2px solid #4f9489; outline-offset: 2px; }
.fantasy-recovery-project-select > span { color: var(--accent); font-size: 9px; font-weight: 800; }
.fantasy-recovery-project-select strong, .fantasy-recovery-project-select small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-project-select strong { font-size: 10px; }
.fantasy-recovery-project-select small { color: var(--ink-soft); font-size: 8px; }
.fantasy-recovery-project-row-main > .icon-button { width: 32px; min-height: 32px; }
.fantasy-recovery-project-effect-toggle { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 8px 9px 43px; padding: 8px 9px; border: 1px dashed #9fc6bf; border-radius: 5px; background: #f8fcfb; color: var(--ink-soft); cursor: pointer; text-align: left; transition: border-color 180ms ease, background-color 180ms ease; }
.fantasy-recovery-project-effect-toggle:hover, .fantasy-recovery-project-effect-toggle[aria-expanded="true"] { border-style: solid; border-color: #75a99f; background: #f0f8f6; }
.fantasy-recovery-project-effect-toggle > span:first-child { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.fantasy-recovery-project-effect-toggle strong { color: var(--ink); font-size: 10px; }
.fantasy-recovery-project-effect-toggle small { display: inline-flex; align-items: center; min-height: 19px; padding: 0 6px; border: 1px solid #c6ded9; border-radius: 3px; background: #fff; color: var(--accent-hover); font-size: 8px; font-weight: 750; white-space: nowrap; }
.fantasy-recovery-project-effect-toggle svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform 180ms ease; }
.fantasy-recovery-project-effect-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.fantasy-recovery-project-effect-body { min-width: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 8px 9px 43px; padding: 9px; border: 1px solid #c8d9d6; border-radius: 5px; background: #fff; }
.fantasy-recovery-project-effect-preview { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #edf2f1; color: var(--accent); }
.fantasy-recovery-project-effect-preview img { width: 100%; height: 100%; object-fit: cover; }
.fantasy-recovery-project-effect-preview svg { width: 19px; height: 19px; }
.fantasy-recovery-project-effect-copy { min-width: 0; display: grid; gap: 4px; }
.fantasy-recovery-project-effect-copy strong, .fantasy-recovery-project-effect-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-project-effect-copy strong { font-size: 10px; }
.fantasy-recovery-project-effect-copy small { color: var(--ink-soft); font-size: 8px; }
.fantasy-recovery-project-effect-actions { display: flex; align-items: center; gap: 6px; }
.fantasy-recovery-project-effect-actions .secondary-button { min-height: 31px; padding: 0 8px; font-size: 9px; cursor: pointer; }
.fantasy-recovery-project-effect-actions label.disabled { opacity: .48; cursor: wait; }
.fantasy-recovery-project-effect-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fantasy-recovery-project-effect-actions .icon-button { width: 31px; min-height: 31px; }
.fantasy-recovery-project-error { display: flex; align-items: center; gap: 6px; padding: 8px 9px; border: 1px solid #e6b8b2; border-radius: 5px; background: #fff7f5; color: var(--red); font-size: 9px; line-height: 1.45; }
.fantasy-recovery-project-error svg { width: 14px; height: 14px; flex: 0 0 auto; }
.fantasy-recovery-project-editor { min-width: 0; display: grid; gap: 12px; padding: 15px; border: 1px solid #abd0c8; border-radius: 6px; background: #fff; box-shadow: 0 5px 16px rgba(35, 82, 74, .05); }
.fantasy-recovery-project-editor > strong { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 12px; }
.fantasy-recovery-project-editor > strong::before { content: "编辑中"; min-height: 20px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 3px; background: var(--accent-soft); color: var(--accent-hover); font-size: 8px; font-weight: 800; }
.fantasy-recovery-project-editor-actions { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 2px; border-top: 1px solid var(--line); }
.fantasy-recovery-project-editor-actions > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-project-editor-actions > span i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); }
.fantasy-recovery-project-editor-actions > span.pending { color: #8a5f13; }
.fantasy-recovery-project-editor-actions > span.pending i { background: #d79c31; }
.fantasy-recovery-project-editor-actions > div { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.fantasy-recovery-project-editor-actions button { min-height: 35px; }
/* Keep the project settings controls before the confirmed project list. */
.fantasy-recovery-section:nth-of-type(2) > .fantasy-recovery-project-editor { order: 1; }
.fantasy-recovery-section:nth-of-type(2) > .fantasy-recovery-selected-projects { order: 2; padding-top: 5px; border-top: 1px solid #c9ded9; }
.fantasy-recovery-form-grid { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.fantasy-recovery-form-grid label { min-width: 0; display: grid; gap: 5px; color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-form-grid select { min-width: 0; min-height: 36px; font-size: 10px; }
.fantasy-recovery-custom-select { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.fantasy-recovery-custom-select small { display: inline-flex; align-items: center; min-height: 20px; padding: 0 5px; border: 1px solid #e4c68a; border-radius: 3px; background: #fff8e9; color: #88631d; font-size: 8px; font-weight: 750; white-space: nowrap; }
.fantasy-recovery-form-grid textarea { width: 100%; min-height: 74px; resize: vertical; font-size: 10px; line-height: 1.55; }
.fantasy-recovery-form-grid label > small { color: var(--ink-muted); font-size: 9px; font-weight: 500; line-height: 1.45; }
.fantasy-recovery-custom-project-fields { position: relative; min-width: 0; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); align-items: start; gap: 9px; padding: 32px 12px 12px; border: 1px solid #e3c98e; border-radius: 6px; background: #fffaf0; }
.fantasy-recovery-custom-project-fields::before { content: "自定义项目补充"; position: absolute; top: 9px; left: 12px; color: #765518; font-size: 10px; font-weight: 800; }
.fantasy-recovery-custom-project-fields label { min-width: 0; display: grid; gap: 5px; }
.fantasy-recovery-custom-field-title { min-height: 32px; display: flex; align-items: flex-start; flex-wrap: wrap; align-content: flex-start; gap: 2px 4px; color: var(--ink-soft); font-size: 9px; font-weight: 700; line-height: 1.45; }
.fantasy-recovery-custom-field-title small { color: var(--ink-muted); font-size: 8px; font-weight: 500; }
.fantasy-recovery-custom-project-fields input, .fantasy-recovery-custom-project-fields textarea { width: 100%; font-size: 10px; }
.fantasy-recovery-custom-project-fields input { min-height: 42px; }
.fantasy-recovery-custom-project-fields textarea { min-height: 74px; resize: vertical; line-height: 1.55; }
.fantasy-recovery-custom-project-actions { min-width: 0; grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 0 12px 12px; border: 1px solid #e3c98e; border-top: 0; border-radius: 0 0 6px 6px; background: #fffaf0; }
.fantasy-recovery-custom-project-fields:has(+ .fantasy-recovery-custom-project-actions) { padding-bottom: 12px; border-bottom: 0; border-radius: 6px 6px 0 0; }
.fantasy-recovery-custom-project-fields + .fantasy-recovery-custom-project-actions { margin-top: -9px; }
.fantasy-recovery-custom-project-actions > small { margin-right: auto; color: var(--ink-muted); font-size: 8px; line-height: 1.45; }
.fantasy-recovery-custom-project-actions .secondary-button { min-height: 33px; }
.fantasy-recovery-custom-project-actions .secondary-button.danger { color: var(--red); }
.fantasy-recovery-project-detail-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; margin: 0; padding: 8px 9px; border-left: 2px solid #a9c9c3; background: #f5faf8; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.fantasy-recovery-project-detail-note strong { color: var(--ink); white-space: nowrap; }
.fantasy-recovery-person-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fantasy-recovery-setting-block { min-width: 0; display: grid; gap: 6px; }
.fantasy-recovery-setting-block > span { color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-choice-grid { min-width: 0; display: grid; gap: 6px; }
.fantasy-recovery-choice-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fantasy-recovery-choice-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fantasy-recovery-choice-grid button, .fantasy-recovery-stage-options button, .fantasy-recovery-actions button { min-width: 0; min-height: 34px; padding: 6px 8px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 10px; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.fantasy-recovery-choice-grid button:hover, .fantasy-recovery-stage-options button:hover, .fantasy-recovery-actions button:hover { border-color: #8ab7af; color: var(--ink); }
.fantasy-recovery-choice-grid button.active, .fantasy-recovery-stage-options button.active, .fantasy-recovery-actions button.active { border-color: #70a99f; background: var(--accent-soft); color: var(--accent-hover); font-weight: 750; }
.fantasy-recovery-full-course { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 10px; font-weight: 700; cursor: pointer; }
.fantasy-recovery-full-course.active { border-color: #70a99f; background: var(--accent-soft); color: var(--accent-hover); }
.fantasy-recovery-full-course svg { width: 14px; height: 14px; }
.fantasy-recovery-stage-options { min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.fantasy-recovery-custom-stage { min-width: 0; display: flex; align-items: end; gap: 7px; }
.fantasy-recovery-custom-stage label { width: min(220px, 100%); display: grid; gap: 5px; color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-custom-stage input { min-height: 35px; }
.fantasy-recovery-custom-stage .secondary-button { min-height: 35px; }
.fantasy-recovery-selection-summary { display: grid; gap: 4px; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.fantasy-recovery-selection-summary > span { display: flex; flex-wrap: wrap; gap: 5px; }
.fantasy-recovery-selection-summary strong { color: var(--ink); }
.fantasy-recovery-selection-title { font-weight: 750; color: var(--ink); }
.fantasy-recovery-actions { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fantasy-recovery-actions.is-disabled { opacity: .58; }
.fantasy-recovery-actions.is-disabled button { cursor: not-allowed; }
.fantasy-recovery-video-estimate { min-width: 0; display: grid; gap: 3px; margin-top: 12px; padding: 11px 12px; border: 1px solid #c8d9d6; border-radius: 6px; background: #f7fbfa; color: var(--ink-soft); font-size: 9px; }
.fantasy-recovery-video-estimate strong { color: var(--ink); font-size: 13px; }
.fantasy-recovery-video-input { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 12px; }
.fantasy-recovery-video-input.is-empty { grid-template-columns: 24px minmax(0, 1fr); align-items: center; color: var(--ink-soft); }
.fantasy-recovery-video-input.is-empty > svg { width: 20px; height: 20px; color: var(--accent); }
.fantasy-recovery-video-input.is-empty > div { display: grid; gap: 3px; }
.fantasy-recovery-video-input.is-empty strong { color: var(--ink); font-size: 11px; }
.fantasy-recovery-video-input.is-empty small { font-size: 9px; }
.fantasy-recovery-video-input-head { min-width: 0; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); align-items: end; gap: 12px; }
.fantasy-recovery-video-input-head label { min-width: 0; display: grid; gap: 5px; color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-video-input-head select { min-height: 36px; }
.fantasy-recovery-video-input-head > div { min-width: 0; display: grid; align-content: center; gap: 3px; padding-bottom: 3px; }
.fantasy-recovery-video-input-head strong, .fantasy-recovery-video-input-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-video-input-head strong { font-size: 11px; }
.fantasy-recovery-video-input-head small { color: var(--ink-soft); font-size: 9px; }
.fantasy-recovery-video-input-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.fantasy-recovery-video-input-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fantasy-recovery-video-input-actions .secondary-button { min-height: 33px; padding-inline: 9px; font-size: 10px; }
.fantasy-recovery-video-input-actions label.secondary-button { cursor: pointer; }
.fantasy-recovery-independent-material { width: 100%; background: #fbfcfc; }
.fantasy-recovery-independent-submit { align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; }
.fantasy-recovery-independent-submit .primary-button { min-height: 42px; }
.fantasy-recovery-independent-submit-body { min-width: 0; display: grid; grid-template-columns: minmax(112px, 150px) minmax(180px, 240px) auto; align-items: end; justify-content: end; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.fantasy-recovery-independent-aspect { min-width: 0; display: grid; gap: 5px; color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-independent-aspect select { min-width: 0; min-height: 42px; font-size: 10px; }
.fantasy-recovery-independent-model { min-width: 0; display: grid; gap: 5px; color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-independent-model select { min-width: 0; min-height: 42px; font-size: 10px; }
.fantasy-recovery-video-input > .fantasy-recovery-video-asset-picker { grid-column: 1 / -1; }
.fantasy-recovery-video-source-status { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; border: 1px solid #c8d9d6; border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 9px; white-space: nowrap; }
.fantasy-recovery-independent-source { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.fantasy-recovery-independent-source img { width: 48px; height: 48px; flex: 0 0 auto; object-fit: cover; border-radius: 4px; background: #edf2f1; }
.fantasy-recovery-independent-source div { min-width: 0; display: grid; gap: 3px; }
.fantasy-recovery-independent-source strong, .fantasy-recovery-independent-source small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-independent-source strong { color: var(--ink); font-size: 10px; }
.fantasy-recovery-independent-source small { color: var(--ink-soft); font-size: 8px; }
.fantasy-recovery-independent-video-block { min-width: 0; display: grid; gap: 9px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.fantasy-recovery-independent-video-block > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fantasy-recovery-independent-video-block > header > div { min-width: 0; display: grid; gap: 3px; }
.fantasy-recovery-independent-video-block > header strong { color: var(--ink); font-size: 11px; }
.fantasy-recovery-independent-video-block > header small { color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.fantasy-recovery-independent-video { border-color: #d4c7b5; background: #fcfaf7; }
.fantasy-recovery-video-stage-empty { min-width: 0; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 15px; border: 1px dashed #bcd7d2; border-radius: 6px; background: #fbfdfc; color: var(--ink-soft); }
.fantasy-recovery-video-stage-empty > svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--accent); }
.fantasy-recovery-video-stage-empty > div { min-width: 0; display: grid; gap: 3px; }
.fantasy-recovery-video-stage-empty strong { color: var(--ink); font-size: 11px; }
.fantasy-recovery-video-stage-empty small { font-size: 9px; line-height: 1.45; }
.fantasy-recovery-actions > section { min-width: 0; display: grid; align-content: start; gap: 7px; }
.fantasy-recovery-actions > section > header { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fantasy-recovery-actions > section > header strong { color: var(--ink); font-size: 10px; }
.fantasy-recovery-actions > section > header small { color: var(--ink-soft); font-size: 8px; font-weight: 500; }
.fantasy-recovery-actions > section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fantasy-recovery-actions > section > div > button { box-sizing: border-box; min-height: 36px; height: 36px; max-height: 36px; position: relative; }
.fantasy-recovery-action-order { position: absolute; top: 3px; right: 3px; min-width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: #36786f; color: #fff; font-size: 8px; line-height: 1; }
.fantasy-recovery-image-workspace { border-bottom: 0; }
.fantasy-recovery-video-actions { padding-top: 0; }
.fantasy-recovery-video-actions > .fantasy-recovery-video-input { margin-top: 0; }
.fantasy-recovery-custom-action { min-width: 0; display: grid; gap: 7px; color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-custom-action-fields { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px; }
.fantasy-recovery-custom-action-fields label { min-width: 0; display: grid; gap: 5px; }
.fantasy-recovery-custom-action-fields select, .fantasy-recovery-custom-action-fields input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px; height: 36px; max-height: 36px; font-size: 10px; }
.fantasy-recovery-custom-action-footer { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fantasy-recovery-custom-action-footer small { min-width: 0; color: var(--ink-soft); font-weight: 500; }
.fantasy-recovery-custom-action-footer .secondary-button { min-height: 32px; flex: 0 0 auto; }
.fantasy-recovery-saved-action-list { min-width: 0; display: grid; gap: 7px; }
.fantasy-recovery-saved-action-list > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fantasy-recovery-saved-action-list > header strong { color: var(--ink); font-size: 10px; }
.fantasy-recovery-saved-action-list > header small { color: var(--ink-soft); font-size: 9px; font-weight: 500; }
.fantasy-recovery-saved-actions { min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.fantasy-recovery-saved-action { position: relative; min-width: 0; }
.fantasy-recovery-saved-action-select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px; height: 36px; max-height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 36px 0 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.fantasy-recovery-saved-action-select:hover { border-color: #8ab7af; color: var(--ink); }
.fantasy-recovery-saved-action-select.active { border-color: #70a99f; background: var(--accent-soft); color: var(--accent-hover); font-weight: 750; }
.fantasy-recovery-saved-action-select span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-saved-action-delete { position: absolute; top: 1px; right: 1px; width: 32px; height: 32px; min-height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0 4px 4px 0; background: #fff; color: var(--ink-soft); cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.fantasy-recovery-saved-action-select.active + .fantasy-recovery-saved-action-delete { background: var(--accent-soft); }
.fantasy-recovery-saved-action-delete:hover { background: #fff3f1; color: var(--red); }
.fantasy-recovery-saved-action-delete svg { width: 14px; height: 14px; }
.fantasy-recovery-fixed-workflow { min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #c8d9d6; border-radius: 6px; background: #f7fbfa; color: #365d57; font-size: 10px; }
.fantasy-recovery-fixed-workflow svg { width: 15px; height: 15px; color: var(--accent); }
.fantasy-recovery-image-workspace { gap: 20px; }
.fantasy-recovery-media-top { min-width: 0; display: grid; grid-template-columns: 1fr; align-items: start; gap: 18px; }
.fantasy-recovery-media-top > div, .fantasy-recovery-stage-video-panel { min-width: 0; display: grid; gap: 14px; }
.fantasy-recovery-media-top > div > header, .fantasy-recovery-stage-video-panel > header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.fantasy-recovery-media-top > div > header > div:first-child, .fantasy-recovery-stage-video-panel > header > div:first-child { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: start; gap: 9px; }
.fantasy-recovery-media-top > div > header > div:first-child > span, .fantasy-recovery-stage-video-panel > header > div:first-child > span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #a9c9c3; border-radius: 50%; color: var(--accent); font-size: 9px; font-weight: 800; }
.fantasy-recovery-media-top .fantasy-recovery-form-grid { grid-template-columns: 1fr; }
.fantasy-recovery-stage-images-panel .fantasy-recovery-image-grid { grid-template-columns: repeat(4, minmax(0, 150px)); align-items: start; }
.fantasy-recovery-stage-images-panel .fantasy-recovery-stage { padding: 7px; }
.fantasy-recovery-stage-images-panel .fantasy-recovery-stage.has-multiple-candidates { grid-column: span 2; }
.fantasy-recovery-stage-images-panel .fantasy-recovery-stage-preview { aspect-ratio: 3 / 4; }
.fantasy-recovery-presentation-controls { min-width: 0; display: grid; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.fantasy-recovery-presentation-controls > header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fantasy-recovery-presentation-controls > header > div:first-child { min-width: 0; display: grid; gap: 3px; }
.fantasy-recovery-presentation-controls > header strong { color: var(--ink); font-size: 12px; }
.fantasy-recovery-presentation-controls > header small { color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.fantasy-recovery-presentation-mode { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(106px, 1fr)); gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-muted); }
.fantasy-recovery-presentation-mode button { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink-soft); font-size: 9px; font-weight: 750; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.fantasy-recovery-presentation-mode button:hover { color: var(--ink); }
.fantasy-recovery-presentation-mode button.active { border-color: #c8d9d6; background: #fff; color: var(--accent-dark); }
.fantasy-recovery-presentation-mode .fantasy-recovery-presentation-mode-custom { border-color: #ead6a5; background: #fffaf0; color: #8a610d; }
.fantasy-recovery-presentation-mode .fantasy-recovery-presentation-mode-custom:hover { border-color: #d2ae5d; background: #fff3d7; color: #765008; }
.fantasy-recovery-presentation-mode .fantasy-recovery-presentation-mode-custom.active { border-color: #c8973f; background: #ffedc5; color: #765008; }
.fantasy-recovery-presentation-mode svg { width: 13px; height: 13px; }
.fantasy-recovery-presentation-presets { min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.fantasy-recovery-presentation-presets button { min-width: 0; min-height: 58px; display: grid; align-content: center; gap: 4px; padding: 8px 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-soft); text-align: left; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.fantasy-recovery-presentation-presets button:hover { border-color: #8ab7af; color: var(--ink); }
.fantasy-recovery-presentation-presets button.active { border-color: #70a99f; background: var(--accent-soft); color: var(--accent-dark); }
.fantasy-recovery-presentation-presets strong, .fantasy-recovery-presentation-presets small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-presentation-presets strong { font-size: 10px; }
.fantasy-recovery-presentation-presets small { color: inherit; font-size: 8px; font-weight: 500; opacity: .82; }
.fantasy-recovery-presentation-custom { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.fantasy-recovery-presentation-custom label { min-width: 0; display: grid; gap: 5px; color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-presentation-custom .full-width { grid-column: 1 / -1; }
.fantasy-recovery-presentation-custom select, .fantasy-recovery-presentation-custom textarea { min-width: 0; font-size: 10px; }
.fantasy-recovery-presentation-custom select { min-height: 36px; }
.fantasy-recovery-presentation-custom textarea { min-height: 62px; resize: vertical; }
.fantasy-recovery-styling { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfc; }
.fantasy-recovery-styling-toggle { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.fantasy-recovery-styling-toggle:hover { background: var(--surface-muted); }
.fantasy-recovery-styling-toggle > span:first-child { min-width: 0; display: grid; gap: 2px; }
.fantasy-recovery-styling-toggle strong { font-size: 10px; }
.fantasy-recovery-styling-toggle small { color: var(--ink-soft); font-size: 9px; font-weight: 500; }
.fantasy-recovery-styling-toggle > span:last-child { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); transition: transform 180ms ease; }
.fantasy-recovery-styling.expanded .fantasy-recovery-styling-toggle > span:last-child { transform: rotate(180deg); }
.fantasy-recovery-styling-toggle svg { width: 15px; height: 15px; }
.fantasy-recovery-styling-grid { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; padding: 11px; border-top: 1px solid var(--line); background: #fff; }
.fantasy-recovery-styling-grid label { min-width: 0; display: grid; gap: 5px; color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-styling-grid select { min-width: 0; min-height: 36px; font-size: 10px; }
.fantasy-recovery-image-toolbar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 150px) minmax(155px, 190px) auto; align-items: end; justify-content: end; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.fantasy-recovery-image-toolbar > label { min-width: 0; display: grid; gap: 5px; color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.fantasy-recovery-image-toolbar select { min-width: 0; min-height: 36px; font-size: 10px; }
.fantasy-recovery-image-estimate { min-width: 0; display: grid; gap: 2px; color: var(--ink-soft); font-size: 9px; }
.fantasy-recovery-image-estimate strong { color: var(--ink); font-size: 13px; }
.fantasy-recovery-image-estimate small { font-size: 9px; }
.fantasy-recovery-image-toolbar > .primary-button { min-height: 42px; white-space: nowrap; }
.fantasy-recovery-stage-video-panel { padding-top: 20px; border-top: 1px solid var(--line); }
.fantasy-recovery-stage-video-actions { display: flex; justify-content: flex-end; padding-top: 2px; }
.fantasy-recovery-stage-video-actions .secondary-button { min-height: 42px; }
.fantasy-recovery-output-settings > footer { min-width: 0; display: grid; grid-template-columns: minmax(150px, 1fr) auto; align-items: end; gap: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.fantasy-recovery-output-settings > footer > div { min-width: 0; display: grid; gap: 2px; color: var(--ink-soft); font-size: 9px; }
.fantasy-recovery-output-settings > footer strong { color: var(--ink); font-size: 13px; }
.fantasy-recovery-output-settings > footer small { font-size: 9px; }
.fantasy-recovery-output-settings > footer .primary-button { min-height: 42px; }
.fantasy-recovery-stage-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fantasy-recovery-image-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fantasy-recovery-image-grid .fantasy-recovery-stage-preview { aspect-ratio: 3 / 4; }
.fantasy-recovery-video-grid { margin-top: 12px; }
.fantasy-recovery-stage { min-width: 0; display: grid; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfc; }
.fantasy-recovery-video-stage { border-color: #bcd7d2; background: #f7fbfa; }
.fantasy-recovery-stage-image { min-width: 0; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.fantasy-recovery-stage-candidates { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
.fantasy-recovery-stage.has-multiple-candidates .fantasy-recovery-stage-candidates { display: flex; flex-wrap: nowrap; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; gap: 6px; padding-bottom: 4px; scroll-snap-type: x proximity; }
.fantasy-recovery-stage.has-multiple-candidates .fantasy-recovery-image-candidate { flex: 0 0 clamp(104px, 18vw, 144px); scroll-snap-align: start; }
.fantasy-recovery-stage-empty { min-height: 130px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 5px; color: var(--ink-soft); text-align: center; }
.fantasy-recovery-stage-empty svg { width: 20px; height: 20px; color: var(--accent); }
.fantasy-recovery-stage-empty small { font-size: 8px; line-height: 1.45; }
.fantasy-recovery-image-candidate.confirmed { border-color: #70a99f; box-shadow: 0 0 0 1px #70a99f inset; }
.fantasy-recovery-image-candidate > footer { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 6px 7px; border-top: 1px solid var(--line); }
.fantasy-recovery-image-candidate > footer strong, .fantasy-recovery-image-candidate > footer span { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-image-candidate > footer span { color: var(--ink-soft); }
.fantasy-recovery-image-candidate > footer i { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; background: var(--accent); }
.fantasy-recovery-candidate-task { display: block; overflow: hidden; padding: 0 7px 6px; color: var(--ink-soft); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-confirm-candidate { min-height: 30px; margin: 0 6px 6px; padding: 0 7px; font-size: 8px; }
.fantasy-recovery-stage > header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fantasy-recovery-stage > header > div { min-width: 0; display: grid; gap: 3px; }
.fantasy-recovery-stage > header > div > span { color: var(--ink); font-size: 11px; font-weight: 800; }
.fantasy-recovery-stage > header small { overflow: hidden; color: var(--ink-soft); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-stage-media { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.fantasy-recovery-stage-media > section { min-width: 0; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.fantasy-recovery-stage-preview { position: relative; min-width: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; align-content: center; gap: 5px; overflow: hidden; background: #edf2f1; color: var(--ink-soft); }
.fantasy-recovery-stage-preview > svg { width: 20px; height: 20px; color: var(--accent); }
.fantasy-recovery-stage-preview > small { font-size: 8px; text-align: center; }
.fantasy-recovery-stage-preview.has-media { background: #182124; }
.fantasy-recovery-stage-preview > button { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
.fantasy-recovery-stage-preview img, .fantasy-recovery-stage-preview video { width: 100%; height: 100%; object-fit: contain; }
.fantasy-recovery-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(16, 26, 29, .18); }
.fantasy-recovery-play > span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .62); border-radius: 50%; background: rgba(16, 26, 29, .65); }
.fantasy-recovery-play svg { width: 14px; height: 14px; }
.fantasy-recovery-stage-media section > footer { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; border-top: 1px solid var(--line); }
.fantasy-recovery-stage-media footer strong, .fantasy-recovery-stage-media footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-recovery-stage-media footer strong { font-size: 9px; }
.fantasy-recovery-stage-media footer span { color: var(--ink-soft); font-size: 8px; }
.fantasy-recovery-stage-media footer i { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; background: var(--accent); }
.fantasy-recovery-stage-error { padding: 7px 8px; border: 1px solid #e6b8b2; border-radius: 5px; background: #fff7f5; color: var(--red); font-size: 9px; line-height: 1.45; }
.fantasy-recovery-stage-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.fantasy-recovery-stage-actions .primary-button, .fantasy-recovery-stage-actions .secondary-button { min-height: 32px; padding: 0 8px; font-size: 9px; }
.fantasy-recovery-partner-id { overflow: hidden; color: var(--ink-soft); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1100px) {
  .fantasy-workspace-shell > .fantasy-surface { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); }
  .fantasy-workspace-shell > .fantasy-surface .fantasy-result-rail { display: none; }
  .fantasy-recovery-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-reference-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-asset-picker > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fantasy-recovery-reference-dialog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-reference-dialog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fantasy-recovery-stage-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fantasy-recovery-image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fantasy-recovery-stage-images-panel .fantasy-recovery-image-grid { grid-template-columns: repeat(3, minmax(0, 140px)); }
  .fantasy-recovery-reference-mode { grid-template-columns: 1fr; }
  .fantasy-recovery-presentation-controls > header { align-items: stretch; flex-direction: column; }
  .fantasy-recovery-presentation-mode { width: 100%; }
  .fantasy-recovery-presentation-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fantasy-recovery-styling-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .fantasy-workspace-mode { align-items: stretch; flex-direction: column; }
  .fantasy-workspace-mode > div:first-child { justify-content: start; }
  .fantasy-workspace-mode [role="tablist"] { width: 100%; }
  .fantasy-workspace-shell > .fantasy-surface { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .fantasy-workspace-shell > .fantasy-surface .fantasy-result-rail { display: grid; }
  .fantasy-recovery-hero { flex-direction: column; padding: 18px; }
  .fantasy-recovery-project { max-width: 100%; }
  .fantasy-recovery-section { padding: 18px; }
  .fantasy-recovery-material-grid, .fantasy-recovery-actions, .fantasy-recovery-stage-grid { grid-template-columns: 1fr; }
  .fantasy-recovery-reference-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-reference-entry-actions { align-items: stretch; flex-direction: column; }
  .fantasy-recovery-reference-entry-actions .primary-button { width: 100%; }
  .fantasy-recovery-reference-dialog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-saved-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-stage-images-panel .fantasy-recovery-image-grid { grid-template-columns: repeat(2, minmax(0, 150px)); }
  .fantasy-recovery-presentation-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-presentation-custom { grid-template-columns: 1fr; }
  .fantasy-recovery-presentation-custom .full-width { grid-column: auto; }
  .fantasy-recovery-styling-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-image-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-image-estimate { grid-column: 1; }
  .fantasy-recovery-image-toolbar > .primary-button { grid-column: 2; justify-self: end; }
  .fantasy-recovery-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-asset-picker > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fantasy-recovery-project-effect-body { grid-template-columns: 54px minmax(0, 1fr); }
  .fantasy-recovery-project-effect-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .fantasy-recovery-stage-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fantasy-recovery-video-input-head { grid-template-columns: 1fr; align-items: stretch; }
  .fantasy-recovery-video-input { grid-template-columns: 1fr; }
  .fantasy-recovery-independent-submit { grid-column: 2; }
  .fantasy-recovery-custom-action-fields { grid-template-columns: 1fr; }
  .fantasy-recovery-output-settings > footer { grid-template-columns: minmax(0, 1fr) auto; }
  .fantasy-recovery-independent-submit { justify-content: flex-end; }
}

@media (max-width: 480px) {
  .fantasy-workspace-mode [role="tablist"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-workspace-mode [role="tab"] { min-width: 0; padding: 0 7px; }
  .fantasy-recovery-section > header { align-items: stretch; flex-direction: column; }
  .fantasy-recovery-material { grid-template-columns: 64px minmax(0, 1fr); }
  .fantasy-recovery-material-preview { width: 64px; height: 64px; }
  .fantasy-recovery-material-actions { flex-wrap: wrap; }
  .fantasy-recovery-material-actions .secondary-button { flex: 1 1 auto; }
  .fantasy-recovery-form-grid { grid-template-columns: 1fr; }
  .fantasy-recovery-custom-project-fields { grid-template-columns: 1fr; }
  .fantasy-recovery-custom-field-title { min-height: 0; }
  .fantasy-recovery-custom-project-fields input { min-height: 42px; }
  .fantasy-recovery-custom-project-actions { align-items: stretch; flex-direction: column; }
  .fantasy-recovery-custom-project-actions > small { margin-right: 0; }
  .fantasy-recovery-project-editor-actions { align-items: stretch; flex-direction: column; }
  .fantasy-recovery-project-editor-actions > div { width: 100%; }
  .fantasy-recovery-project-editor-actions > div button { flex: 1 1 auto; }
  .fantasy-recovery-project-select { grid-template-columns: 24px minmax(0, 1fr); }
  .fantasy-recovery-project-select small { display: none; }
  .fantasy-recovery-project-effect-toggle { margin-left: 39px; padding: 8px; }
  .fantasy-recovery-project-effect-body { margin-left: 39px; }
  .fantasy-recovery-person-grid { grid-template-columns: 1fr; }
  .fantasy-recovery-reference-mode .fantasy-recovery-choice-grid { grid-template-columns: 1fr; }
  .fantasy-recovery-reference-summary { grid-template-columns: 1fr; }
  .fantasy-recovery-asset-category-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-unified-picker-toolbar { align-items: stretch; flex-direction: column; }
  .fantasy-recovery-reference-dialog-body { padding: 13px; gap: 12px; }
  .fantasy-recovery-reference-dialog-intro, .fantasy-recovery-reference-dialog-source > header { align-items: stretch; flex-direction: column; }
  .fantasy-recovery-reference-dialog-intro > span { white-space: normal; }
  .fantasy-recovery-reference-dialog-categories, .fantasy-recovery-reference-dialog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-reference-dialog-source > header label { width: 100%; justify-content: center; }
  .fantasy-recovery-reference-dialog-source-tabs { width: 100%; }
  .fantasy-recovery-reference-dialog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .fantasy-recovery-reference-dialog-actions { align-items: stretch; }
  .fantasy-recovery-reference-dialog-actions button { flex: 1 1 0; }
  .fantasy-recovery-presentation-mode { grid-template-columns: 1fr; }
  .fantasy-recovery-presentation-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-styling-grid { grid-template-columns: 1fr; }
  .fantasy-recovery-stage-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-video-input-actions { display: grid; grid-template-columns: 1fr; }
  .fantasy-recovery-actions > section > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-custom-stage { align-items: stretch; flex-direction: column; }
  .fantasy-recovery-custom-stage label { width: 100%; }
  .fantasy-recovery-stage-media { grid-template-columns: 1fr; }
  .fantasy-recovery-stage-actions { display: grid; grid-template-columns: 1fr; }
  .fantasy-recovery-stage-images-panel .fantasy-recovery-stage.has-multiple-candidates { grid-column: 1 / -1; }
  .fantasy-recovery-output-settings > footer { grid-template-columns: 1fr; }
  .fantasy-recovery-output-settings > footer .primary-button { justify-self: end; }
  .fantasy-recovery-independent-submit-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fantasy-recovery-image-toolbar { grid-template-columns: 1fr; }
  .fantasy-recovery-image-estimate, .fantasy-recovery-image-toolbar > .primary-button { grid-column: auto; }
  .fantasy-recovery-image-toolbar > .primary-button { justify-self: end; }
  .fantasy-recovery-asset-picker > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .fantasy-workspace-mode [role="tab"],
  .fantasy-recovery-choice-grid button,
  .fantasy-recovery-stage-options button,
  .fantasy-recovery-actions button { transition: none; }
  .fantasy-recovery-presentation-mode button,
  .fantasy-recovery-presentation-presets button,
  .fantasy-recovery-styling-toggle > span:last-child { transition: none; }
}