/* ============================================================
   hf-studio — Linear-grade design system.
   SSOT: ~/.claude/reference/design-systems/linear.md
   - Dark-mode-native, Inter Variable cv01/ss03, weight 510 signature
   - 단일 indigo-violet accent, near-zero opacity borders
   ============================================================ */

/* Inter font 외부 import 제거 (2026-05-08): rsms.me CORS 헤더 미발행 → CORS 차단.
 * system-ui / -apple-system / Segoe UI / Apple SD Gothic Neo / Pretendard fallback 으로 충분.
 * 정확한 Inter 가 필요하면 self-host (app/static/fonts/Inter-*.woff2) 후 @font-face. */

:root {
  /* Surfaces */
  --hf-bg-marketing:  #08090a;
  --hf-bg-panel:      #0f1011;
  --hf-bg-l3:         #191a1b;
  --hf-bg-l4:         #28282c;
  /* Text */
  --hf-text-1: #f7f8f8;
  --hf-text-2: #d0d6e0;
  --hf-text-3: #8a8f98;
  --hf-text-4: #62666d;
  /* Brand */
  --hf-accent:        #7170ff;
  --hf-accent-bg:     #5e6ad2;
  --hf-accent-hover:  #828fff;
  /* Borders */
  --hf-border-1: rgba(255,255,255,0.05);
  --hf-border-2: rgba(255,255,255,0.08);
  --hf-border-3: #23252a;
  /* Status */
  --hf-success: #27a644;
  --hf-success-2: #10b981;
  --hf-warning: #f5a524;
  --hf-danger: #e5484d;
  /* Shadow */
  --hf-shadow-sm: inset 0 0 0 1px rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.4);
  --hf-shadow-md: inset 0 0 0 1px rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.45);
  --hf-shadow-lg: inset 0 0 0 1px rgba(255,255,255,0.04), 0 16px 48px rgba(0,0,0,0.6);
  /* Radii */
  --hf-r-sm: 4px;
  --hf-r-md: 6px;
  --hf-r-lg: 10px;
  --hf-r-xl: 14px;
}

/* light fallback */
.light {
  --hf-bg-marketing:  #ffffff;
  --hf-bg-panel:      #f7f8f8;
  --hf-bg-l3:         #f3f4f5;
  --hf-bg-l4:         #e6e6e6;
  --hf-text-1: #08090a;
  --hf-text-2: #2d2f33;
  --hf-text-3: #62666d;
  --hf-text-4: #8a8f98;
  --hf-border-1: rgba(0,0,0,0.06);
  --hf-border-2: rgba(0,0,0,0.10);
  --hf-border-3: #e6e6e6;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body {
  background: var(--hf-bg-marketing);
  color: var(--hf-text-1);
  font-family: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Apple SD Gothic Neo", "Pretendard", system-ui, sans-serif;
  font-feature-settings: "cv01", "ss03";
  font-synthesis: none;
}
@supports (font-variation-settings: normal) {
  html, body { font-family: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Apple SD Gothic Neo", "Pretendard", system-ui, sans-serif; }
}

::selection { background: var(--hf-accent-bg); color: var(--hf-text-1); }

/* ============================================================
   typography — Linear scale
   ============================================================ */

.t-display-xl { font-size: 4.5rem; line-height: 1; letter-spacing: -1.584px; font-weight: 510; }
.t-display    { font-size: 3rem;   line-height: 1; letter-spacing: -1.056px; font-weight: 510; }
.t-h1         { font-size: 2rem;   line-height: 1.13; letter-spacing: -0.704px; font-weight: 400; }
.t-h2         { font-size: 1.5rem; line-height: 1.33; letter-spacing: -0.288px; font-weight: 400; }
.t-h3         { font-size: 1.25rem;line-height: 1.33; letter-spacing: -0.24px;  font-weight: 590; }
.t-body-l     { font-size: 1.125rem; line-height: 1.6; letter-spacing: -0.165px; font-weight: 400; }
.t-body       { font-size: 1rem;   line-height: 1.5;  font-weight: 400; }
.t-body-em    { font-size: 1rem;   line-height: 1.5;  font-weight: 510; }
.t-small      { font-size: 0.9375rem; line-height: 1.6; letter-spacing: -0.165px; }
.t-caption    { font-size: 0.8125rem; line-height: 1.5; letter-spacing: -0.13px; color: var(--hf-text-3); }
.t-label      { font-size: 0.75rem; line-height: 1.4; font-weight: 510; }
.t-mono       { font-family: "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.t-tabular    { font-variant-numeric: tabular-nums; }
.t-overline   { font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.4px; text-transform: uppercase; color: var(--hf-text-3); font-weight: 510; }

/* ============================================================
   layout primitives
   ============================================================ */

.surface-marketing { background: var(--hf-bg-marketing); }
.surface-panel { background: var(--hf-bg-panel); }
.surface-l3 { background: var(--hf-bg-l3); }
.surface-l4 { background: var(--hf-bg-l4); }

.divider { height: 1px; background: var(--hf-border-1); }

.starlight-bg {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(113,112,255,0.08), transparent 60%),
    radial-gradient(800px 500px at 0% 0%, rgba(113,112,255,0.05), transparent 60%),
    var(--hf-bg-marketing);
}
.grain {
  position: relative;
}
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .35; mix-blend-mode: overlay; pointer-events: none;
  border-radius: inherit;
}

/* ============================================================
   buttons
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem;
  font-size: .8125rem; font-weight: 510; line-height: 1;
  border-radius: var(--hf-r-md);
  border: 1px solid var(--hf-border-3);
  background: rgba(255,255,255,0.02);
  color: var(--hf-text-1);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  cursor: pointer; user-select: none;
  font-feature-settings: "cv01", "ss03";
}
.btn:hover { background: rgba(255,255,255,0.05); }
.btn:focus-visible { outline: 2px solid var(--hf-accent); outline-offset: 1px; }
.btn-primary {
  background: var(--hf-accent-bg); border-color: var(--hf-accent-bg); color: #fff;
}
.btn-primary:hover { background: var(--hf-accent-hover); border-color: var(--hf-accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--hf-text-3); }
.btn-ghost:hover { color: var(--hf-text-1); background: rgba(255,255,255,0.05); }
.btn-danger { background: var(--hf-danger); border-color: var(--hf-danger); color: #fff; }
.btn-sm { padding: .35rem .65rem; font-size: .75rem; }
.btn-icon { padding: .4rem; }

/* ============================================================
   inputs
   ============================================================ */

.input, .textarea, select.input {
  width: 100%;
  padding: .55rem .75rem;
  font-size: .875rem; line-height: 1.4;
  font-weight: 400;
  color: var(--hf-text-1);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hf-border-2);
  border-radius: var(--hf-r-md);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  font-feature-settings: "cv01", "ss03";
}
.input:focus, .textarea:focus, select.input:focus {
  outline: none;
  border-color: var(--hf-accent);
  box-shadow: 0 0 0 3px rgba(113,112,255,0.18);
}
.textarea { resize: vertical; font-family: "Berkeley Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }
::placeholder { color: var(--hf-text-4); }

/* ============================================================
   chips
   ============================================================ */

.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .55rem;
  font-size: .6875rem; font-weight: 510; line-height: 1.4;
  border-radius: 9999px;
  background: rgba(255,255,255,0.05);
  color: var(--hf-text-2);
  letter-spacing: 0.2px;
}
.chip-success { background: rgba(39,166,68,.16);   color: #4ade80; }
.chip-danger  { background: rgba(229,72,77,.16);   color: #fca5a5; }
.chip-warning { background: rgba(245,165,36,.16);  color: #fbbf24; }
.chip-accent  { background: rgba(113,112,255,.16); color: #a5b4ff; }

/* ============================================================
   card
   ============================================================ */

.card {
  background: var(--hf-bg-panel);
  border: 1px solid var(--hf-border-2);
  border-radius: var(--hf-r-lg);
  box-shadow: var(--hf-shadow-sm);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card-hover:hover { border-color: var(--hf-border-3); transform: translateY(-1px); box-shadow: var(--hf-shadow-md); }
.card-elevated { background: var(--hf-bg-l3); }

/* ============================================================
   navigation pill
   ============================================================ */

.nav-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .65rem;
  font-size: .8125rem; font-weight: 510;
  color: var(--hf-text-3);
  border-radius: var(--hf-r-md);
  transition: color .12s ease, background .12s ease;
  white-space: nowrap;
}
.nav-pill:hover { color: var(--hf-text-1); background: rgba(255,255,255,0.04); }
.nav-pill.active {
  color: var(--hf-text-1); background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--hf-border-2);
}

/* ============================================================
   segmented control + tab-bar + chip-button — dense data 지향
   - binance design.md 흡수: 트레이딩-플로어 urgency · numeric tabular · high contrast
   - hf-studio 톤 유지 (yellow accent 회피, indigo-violet 동일)
   ============================================================ */

.segmented {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hf-border-2);
  border-radius: var(--hf-r-md);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem .75rem;
  font-size: .8125rem; font-weight: 510;
  color: var(--hf-text-3);
  border-radius: 5px;
  cursor: pointer; user-select: none;
  transition: color .12s, background .12s, transform .08s;
  font-feature-settings: "cv01", "ss03", "tnum";
  white-space: nowrap;
}
.segmented label:hover { color: var(--hf-text-1); background: rgba(255,255,255,0.04); }
.segmented input[type="radio"]:checked + label,
.segmented input[type="checkbox"]:checked + label {
  color: var(--hf-text-1);
  background: var(--hf-bg-l4);
  box-shadow: inset 0 0 0 1px var(--hf-border-3), 0 1px 2px rgba(0,0,0,.4);
}
.segmented input[type="radio"]:focus-visible + label,
.segmented input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--hf-accent); outline-offset: 1px;
}
.segmented label:active { transform: scale(.97); }

.segmented-accent input[type="radio"]:checked + label,
.segmented-accent input[type="checkbox"]:checked + label {
  background: linear-gradient(180deg, var(--hf-accent-bg), color-mix(in oklab, var(--hf-accent-bg) 80%, black));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(94,106,210,.45);
}

/* tab-bar — 큰 카테고리 (image / video) */
.tab-bar {
  display: inline-flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--hf-border-2);
  width: 100%;
}
.tab-bar .tab-item {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1rem;
  font-size: .9375rem; font-weight: 510;
  color: var(--hf-text-3);
  cursor: pointer;
  transition: color .12s;
  font-feature-settings: "cv01", "ss03";
}
.tab-bar .tab-item:hover { color: var(--hf-text-1); }
.tab-bar .tab-item.active { color: var(--hf-text-1); }
.tab-bar .tab-item.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--hf-accent);
  border-radius: 2px 2px 0 0;
}
.tab-bar .tab-item .tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: .65rem; font-weight: 590;
  border-radius: 9px;
  background: rgba(255,255,255,0.06);
  color: var(--hf-text-3);
  font-variant-numeric: tabular-nums;
}
.tab-bar .tab-item.active .tab-count {
  background: rgba(113,112,255,.18);
  color: #a5b4ff;
}

/* field-group — 라벨이 작고 값이 큰 dense 폼 행 */
.field-group { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field-group > .field-label {
  font-size: .6875rem; line-height: 1; letter-spacing: .4px;
  text-transform: uppercase; font-weight: 590;
  color: var(--hf-text-4);
}
.field-row { display: flex; flex-wrap: wrap; gap: .85rem 1.1rem; align-items: flex-end; }

/* chip-button — segmented 의 형제. 단일 옵션이 가변일 때 (예: 비율 N개) */
.chip-button {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .65rem;
  font-size: .8125rem; font-weight: 510;
  color: var(--hf-text-2);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hf-border-2);
  border-radius: var(--hf-r-md);
  cursor: pointer; user-select: none;
  transition: border-color .12s, background .12s, color .12s;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.chip-button:hover { border-color: var(--hf-border-3); color: var(--hf-text-1); }
.chip-button.is-active {
  border-color: var(--hf-accent);
  color: var(--hf-text-1);
  background: rgba(113,112,255,.10);
  box-shadow: 0 0 0 1px var(--hf-accent) inset;
}
.chip-button .chip-meta { color: var(--hf-text-4); font-size: .6875rem; font-weight: 510; }

/* output carousel + thumbs — 한 잡 다중 결과 (Higgsfield Select item N 패턴) */
.output-carousel {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  margin-bottom: .55rem;
  padding-bottom: .25rem;
}
.output-carousel::-webkit-scrollbar { height: 4px; }
.output-carousel::-webkit-scrollbar-thumb { background: var(--hf-bg-l4); border-radius: 2px; }
.output-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}
.output-slide img, .output-slide video { width: 100%; max-height: 60vh; object-fit: contain; background: var(--hf-bg-l3); border-radius: var(--hf-r-md); }
.output-thumbs {
  display: flex; gap: .35rem;
  overflow-x: auto; scrollbar-width: none;
  margin-bottom: .55rem;
}
.output-thumbs::-webkit-scrollbar { display: none; }
.output-thumb {
  flex: 0 0 56px; width: 56px; height: 56px;
  padding: 0; border: 1px solid var(--hf-border-2); border-radius: var(--hf-r-sm);
  overflow: hidden; cursor: pointer; background: var(--hf-bg-l3);
  transition: border-color .12s, transform .08s;
}
.output-thumb img { width: 100%; height: 100%; object-fit: cover; }
.output-thumb.is-active { border-color: var(--hf-accent); box-shadow: 0 0 0 1px var(--hf-accent) inset; }
.output-thumb:hover { transform: scale(1.04); }

/* 후속 액션 그룹 — designer P2-15 (2026-05-08): primary 다운로드 + ⋯ kebab.
   Higgsfield 본 사이트 톤 — chrome 줄임. 기존 chip 5개 = chip 박물관. */
.job-actions {
  display: flex; align-items: center; gap: .35rem;
  margin: .25rem 0 .55rem;
  padding-top: .5rem;
  border-top: 1px solid var(--hf-border-1);
}
.job-action {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .4rem .6rem;
  font-size: .75rem; font-weight: 510;
  color: var(--hf-text-2);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hf-border-2);
  border-radius: var(--hf-r-sm);
  cursor: pointer; user-select: none; text-decoration: none;
  transition: border-color .12s, background .12s, color .12s;
}
.job-action:hover { border-color: var(--hf-border-3); color: var(--hf-text-1); background: rgba(255,255,255,0.05); }
.job-action.job-action-primary {
  flex: 1;
  justify-content: center;
  background: rgba(113,112,255,.10);
  border-color: var(--hf-accent);
  color: var(--hf-text-1);
}
.job-action.job-action-primary:hover { background: rgba(113,112,255,.18); }
.job-action-kebab {
  padding: .4rem .55rem;
  font-size: 1rem; line-height: 1;
  color: var(--hf-text-3);
}
/* 2026-05-10: pin 토글 — 영구 보관 시각 강조. 노란 별 + 약한 glow */
.job-action.is-pinned {
  color: #f5c542;
  border-color: rgba(245,197,66,.45);
  background: rgba(245,197,66,.08);
}
.job-action.is-pinned:hover {
  background: rgba(245,197,66,.16);
  border-color: rgba(245,197,66,.7);
}
/* kebab popover */
.job-kebab-menu {
  position: absolute; right: .5rem; min-width: 160px;
  background: var(--hf-bg-l3);
  border: 1px solid var(--hf-border-3);
  border-radius: var(--hf-r-md);
  box-shadow: var(--hf-shadow-md);
  padding: .25rem;
  z-index: 30;
}
.job-kebab-menu button, .job-kebab-menu a {
  display: block; width: 100%;
  padding: .45rem .65rem;
  font-size: .75rem; text-align: left;
  background: transparent; border: 0;
  color: var(--hf-text-2);
  border-radius: var(--hf-r-sm);
  cursor: pointer; text-decoration: none;
}
.job-kebab-menu button:hover, .job-kebab-menu a:hover {
  background: rgba(255,255,255,0.05);
  color: var(--hf-text-1);
}

/* ref slots grid (Higgsfield first/last/motion 분리 슬롯) */
.ref-slots { margin-bottom: 0; }
.ref-slots .dropzone { font-size: .8rem; }

/* Inspiration gallery grid (홈 hero 아래 / 데스크탑 사이드바 추가) */
.inspiration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .5rem;
}
.inspiration-grid .insp-tile {
  aspect-ratio: 1/1;
  position: relative;
  border-radius: var(--hf-r-md);
  overflow: hidden;
  background: var(--hf-bg-l3);
  border: 1px solid var(--hf-border-2);
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.inspiration-grid .insp-tile:hover { transform: translateY(-1px); border-color: var(--hf-accent); }
.inspiration-grid .insp-tile img { width: 100%; height: 100%; object-fit: cover; }
.inspiration-grid .insp-tile video { width: 100%; height: 100%; object-fit: cover; }
.inspiration-grid .insp-tile .insp-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .35rem .5rem;
  font-size: .65rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
  color: #fff;
  font-weight: 510;
}

/* textarea flash (designer P1-12, 2026-05-08): 외부에서 prompt 본문 채워질 때 시각 trail.
   variation / inspiration / 캔버스 핸드오프 등에서 toast 대신 textarea 자체 강조. */
@keyframes hf-textarea-flash {
  0%   { background: rgba(113,112,255,.18); border-color: var(--hf-accent); box-shadow: 0 0 0 4px rgba(113,112,255,.25); }
  100% { background: rgba(255,255,255,.02); border-color: var(--hf-border-2); box-shadow: 0 0 0 0 transparent; }
}
.textarea.is-just-loaded {
  animation: hf-textarea-flash .6s ease-out;
}

/* model grid 모달 (designer P1-8, 2026-05-08): 36모델 가로 segmented → 카드 grid. */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .5rem;
  max-height: 60vh;
  overflow-y: auto;
}
.model-card {
  text-align: left;
  padding: .65rem .75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hf-border-2);
  border-radius: var(--hf-r-md);
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
}
.model-card:hover:not(:disabled) { border-color: var(--hf-accent); background: rgba(113,112,255,.08); transform: translateY(-1px); }
.model-card:disabled { cursor: not-allowed; }
.model-card .mc-name {
  font-size: .8125rem; font-weight: 510;
  color: var(--hf-text-1);
  margin-bottom: .2rem;
}
.model-card .mc-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .65rem; color: var(--hf-text-4);
  font-variant-numeric: tabular-nums;
}
.model-card .mc-cost { color: var(--hf-text-3); }
.model-card .mc-key { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* preset cards (designer P1-7, 2026-05-08): gradient + emoji + 라벨 시각 카드.
   chip 라벨보다 1초 빠른 파싱 (Higgsfield 본 사이트 인스피레이션 흡수). */
.preset-card {
  flex: 0 0 88px;
  width: 88px; height: 96px;
  border: 1px solid var(--hf-border-2);
  border-radius: var(--hf-r-md);
  padding: 0;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-end;
  cursor: pointer; user-select: none;
  position: relative; overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, box-shadow .15s ease;
}
.preset-card .preset-emoji {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  font-size: 1.8rem; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.preset-card .preset-label {
  position: relative;
  padding: .35rem .4rem;
  font-size: .65rem; font-weight: 590;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  text-align: center;
  letter-spacing: .2px;
}
.preset-card:hover { transform: translateY(-2px); border-color: var(--hf-border-3); box-shadow: var(--hf-shadow-md); }
.preset-card.is-active { border-color: var(--hf-accent); box-shadow: 0 0 0 2px var(--hf-accent), var(--hf-shadow-md); transform: translateY(-1px); }

/* preset chips cloud — Higgsfield 인스피레이션 흡수 */
.preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-height: 220px;
  overflow: hidden;
  position: relative;
  transition: max-height .25s ease;
}
.preset-chips.expanded { max-height: 800px; }
.preset-chips:not(.expanded)::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 28px;
  background: linear-gradient(180deg, transparent, var(--hf-bg-panel) 80%);
  pointer-events: none;
}
@media (max-width: 768px) {
  .preset-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    scrollbar-width: none;
    padding-bottom: .25rem;
  }
  .preset-chips::-webkit-scrollbar { display: none; }
  .preset-chips:not(.expanded)::after { display: none; }
  .preset-chips.expanded { flex-wrap: wrap; }
}

/* ============================================================
   misc — kbd / scrollbar / spinner / dropzone / toast / skeleton
   ============================================================ */

.kbd {
  font-family: "Berkeley Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .6875rem;
  padding: .1rem .35rem;
  border: 1px solid var(--hf-border-3);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--hf-bg-l3);
  color: var(--hf-text-3);
}

.scrollbar-slim::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-slim::-webkit-scrollbar-thumb { background: var(--hf-bg-l4); border-radius: 3px; }
.scrollbar-slim::-webkit-scrollbar-thumb:hover { background: var(--hf-text-4); }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: var(--hf-accent);
  border-radius: 50%;
  display: inline-block;
  animation: hf-spin .8s linear infinite;
}
@keyframes hf-spin { to { transform: rotate(360deg); } }

.skeleton {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.04);
  border-radius: var(--hf-r-md);
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: hf-shimmer 1.6s infinite;
}
@keyframes hf-shimmer { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

.dropzone {
  border: 1px dashed var(--hf-border-3);
  border-radius: var(--hf-r-md);
  padding: 1.25rem;
  text-align: center; color: var(--hf-text-3);
  transition: border-color .12s, background .12s, color .12s;
  background: rgba(255,255,255,0.02);
}
.dropzone.drag-over {
  border-color: var(--hf-accent);
  background: rgba(113,112,255,0.08);
  color: var(--hf-text-1);
}
.dropzone-large {
  padding: 1.6rem 1.25rem;
  font-size: .85rem;
}
.dropzone .dz-tiny { font-size: .6875rem; color: var(--hf-text-4); margin-top: .25rem; }
.dropzone .dz-files { display: flex; flex-direction: column; gap: 4px; margin-top: .55rem; }
.dropzone .dz-file {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .55rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hf-border-2);
  border-radius: var(--hf-r-sm);
  font-size: .75rem; text-align: left;
}
.dropzone .dz-file .dz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hf-text-1); }
.dropzone .dz-file .dz-size { font-variant-numeric: tabular-nums; color: var(--hf-text-3); }
.dropzone .dz-file.is-error { border-color: rgba(229,72,77,.45); background: rgba(229,72,77,.08); color: #fca5a5; }
.dropzone .dz-file .dz-x { background: none; border: 0; color: var(--hf-text-4); cursor: pointer; padding: 0 4px; }
.dropzone .dz-file .dz-x:hover { color: var(--hf-text-1); }
.dropzone .dz-file-preview {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .45rem;
}
.dropzone .dz-thumb {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 11px;
  background: rgba(0,0,0,0.26);
  color: var(--hf-text-3);
  font-size: .66rem;
  font-weight: 760;
}
.dropzone .dz-thumb img,
.dropzone .dz-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(0,0,0,0.38);
}
.dropzone .dz-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.dropzone .dz-file-preview .dz-name {
  display: block;
  flex: none;
}
.dropzone .dz-sub {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--hf-text-4);
  font-size: .66rem;
}
.dropzone .dz-kind {
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 6px;
  border: 1px solid rgba(125,211,252,0.16);
  border-radius: 999px;
  background: rgba(125,211,252,0.06);
  color: var(--hf-text-3);
  font-weight: 650;
}

/* 전역 drag overlay — 외부 폴더에서 viewport 위로 드래그 시 표출 */
#global-drop-overlay {
  position: fixed; inset: 0; z-index: 55;
  display: none;
  align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--hf-bg-marketing) 78%, transparent);
  backdrop-filter: blur(8px) saturate(140%);
  pointer-events: none;
}
#global-drop-overlay.is-active { display: flex; pointer-events: auto; }
#global-drop-overlay .gdo-card {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  padding: 2rem 2.4rem;
  background: var(--hf-bg-l3);
  border: 2px dashed var(--hf-accent);
  border-radius: var(--hf-r-xl);
  color: var(--hf-text-1);
  box-shadow: var(--hf-shadow-lg), 0 0 0 6px rgba(113,112,255,.18);
}
#global-drop-overlay .gdo-card.is-reject { border-color: var(--hf-danger); box-shadow: var(--hf-shadow-lg), 0 0 0 6px rgba(229,72,77,.18); }
#global-drop-overlay .gdo-tiny { color: var(--hf-text-3); font-size: .75rem; }

/* 업로드 진행률 + 잡 progress bar */
.progress {
  position: relative;
  width: 100%; height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
}
.progress > .bar {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--hf-accent-bg), var(--hf-accent));
  width: 0%;
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.progress.is-indeterminate > .bar {
  width: 35%;
  animation: hf-progress-indet 1.4s ease-in-out infinite;
}
@keyframes hf-progress-indet {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(220%); }
  100% { transform: translateX(220%); }
}
.progress.is-error > .bar { background: var(--hf-danger); animation: none; width: 100%; }
.progress.is-success > .bar { background: var(--hf-success-2); width: 100%; }

/* job step labels */
.job-steps {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .6875rem; color: var(--hf-text-4);
  font-variant-numeric: tabular-nums;
}
.job-steps .step { padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.04); }
.job-steps .step.is-now { color: #a5b4ff; background: rgba(113,112,255,.15); }
.job-steps .step.is-done { color: #4ade80; }

/* header — scroll 시 살아있는 elevation */
header.sticky.hf-scrolled {
  background: color-mix(in oklab, var(--hf-bg-marketing) 96%, transparent) !important;
  border-bottom-color: var(--hf-border-3) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.03);
}

/* balance widget — 헤더 잔량. 클릭 시 dashboard 잔량 섹션. 모바일도 노출. */
.balance-widget {
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none;
  padding: 0;
}
.bal-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .5rem .2rem .35rem;
  border: 1px solid var(--hf-border-2);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  font-size: .6875rem; font-weight: 510;
  color: var(--hf-text-2);
  font-variant-numeric: tabular-nums;
  transition: border-color .12s, background .12s;
  white-space: nowrap;
}
.balance-widget:hover .bal-pill {
  border-color: var(--hf-border-3);
  background: rgba(255,255,255,0.06);
}
.bal-pill .bal-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hf-text-4);
  flex-shrink: 0;
}
.bal-pill.bal-ok .bal-dot       { background: var(--hf-success-2); box-shadow: 0 0 6px rgba(16,185,129,.4); }
.bal-pill.bal-low .bal-dot      { background: var(--hf-warning); box-shadow: 0 0 6px rgba(245,165,36,.5); }
.bal-pill.bal-critical .bal-dot { background: var(--hf-danger); box-shadow: 0 0 6px rgba(229,72,77,.6); animation: hf-pulse 1.4s ease-in-out infinite; }
.bal-pill .bal-alias { color: var(--hf-text-3); font-weight: 510; }
.bal-pill .bal-num { color: var(--hf-text-1); font-weight: 590; }
.bal-pill.bal-low .bal-num { color: var(--hf-warning); }
.bal-pill.bal-critical .bal-num { color: var(--hf-danger); }

@media (max-width: 640px) {
  /* 모바일에서 alias 줄임 (HOME-A → A) */
  .bal-pill .bal-alias { display: none; }
  .bal-pill { padding: .2rem .45rem; }
}

/* active jobs 글로벌 인디케이터 (헤더) */
.jobs-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .55rem;
  border: 1px solid var(--hf-border-2);
  border-radius: 999px;
  font-size: .6875rem; font-weight: 510;
  color: var(--hf-text-2);
  background: rgba(113,112,255,.08);
  font-variant-numeric: tabular-nums;
}
.jobs-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hf-accent);
  box-shadow: 0 0 0 0 rgba(113,112,255,.65);
  animation: hf-pulse 1.6s ease-in-out infinite;
}
.jobs-pill[data-failed="1"] .dot { background: var(--hf-danger); box-shadow: 0 0 0 0 rgba(229,72,77,.6); }
@keyframes hf-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(113,112,255,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(113,112,255,0); }
}

#toast-host {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 60;
  display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--hf-bg-l3);
  color: var(--hf-text-1);
  border: 1px solid var(--hf-border-2);
  box-shadow: var(--hf-shadow-md);
  padding: .7rem .9rem;
  border-radius: var(--hf-r-md);
  font-size: .8125rem; min-width: 240px; max-width: 360px;
  animation: hf-toast-in .2s ease-out;
}
.toast.success { border-left: 2px solid var(--hf-success-2); }
.toast.error   { border-left: 2px solid var(--hf-danger); }
.toast.info    { border-left: 2px solid var(--hf-accent); }
@keyframes hf-toast-in { from { transform: translateY(8px); opacity: 0;} to { transform: none; opacity: 1;} }

[hx-indicator] { display: none; }
.htmx-request [hx-indicator] { display: inline-flex; }

/* atmosphere accents */
.beam {
  position: absolute; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(113,112,255,0.16), transparent);
  filter: blur(40px); width: 1px; height: 60vh;
  transform: rotate(8deg);
}
.glow {
  position: absolute; pointer-events: none;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(113,112,255,0.18), transparent 60%);
  filter: blur(60px);
}

/* page transitions */
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fade-up .25s ease-out; }
@keyframes stagger-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.stagger > * { opacity: 0; animation: stagger-in .35s ease-out forwards; }
.stagger > *:nth-child(1) { animation-delay: .03s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .09s; }
.stagger > *:nth-child(4) { animation-delay: .12s; }
.stagger > *:nth-child(5) { animation-delay: .15s; }
.stagger > *:nth-child(6) { animation-delay: .18s; }

/* ============================================================
   모바일 / safe-area / 터치 — production-grade
   ============================================================ */

@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  header.sticky { padding-top: env(safe-area-inset-top); }
  #toast-host {
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    right: calc(1.25rem + env(safe-area-inset-right));
  }
}

/* iOS Safari 자동 줌 방지 — 입력 폰트 16px 보장 */
@media (max-width: 768px) {
  .input, .textarea, select.input, input, textarea, select {
    font-size: 16px !important;
  }
  /* 터치 타겟 ≥ 44x44 (Apple HIG) */
  .btn, .nav-pill {
    min-height: 40px;
  }
  .btn-icon { min-height: 40px; min-width: 40px; }
  /* 모달 풀-너비에 가까운 보더 */
  #modal-root .card {
    max-width: 100% !important;
    border-radius: var(--hf-r-lg);
  }
  /* 메인 컨테이너 패딩 줄임 */
  main { padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
  /* 사이드바 sticky 풀고 자연스러운 stack — 단 drawer 패턴(.gen-sidebar-mobile) 은 예외 */
  aside:not(.gen-sidebar-mobile) { position: static !important; }
  /* 헤더 컴팩트 */
  header.sticky { height: 52px; }
  header .kbd { display: none; }
  /* 카드 그리드 모바일 1-2 columns */
  .grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3 { grid-template-columns: 1fr; }

  /* === 모바일 톤다운 (사용자 피드백 2026-05-08) === */
  /* hero 타이포그래피 */
  .t-display    { font-size: 2rem !important; letter-spacing: -0.6px !important; line-height: 1.05 !important; }
  .t-display-xl { font-size: 2.4rem !important; letter-spacing: -0.8px !important; }
  .t-h1         { font-size: 1.5rem !important; letter-spacing: -0.4px !important; }
  .t-h2         { font-size: 1.25rem !important; letter-spacing: -0.2px !important; }
  /* hero card decoration off — 모바일은 정보 밀도 우선 */
  .blur-orb, .blur-orb-2 { display: none !important; }
  /* card padding 압축 */
  .card.p-6 { padding: 1rem !important; }
  .card.p-5 { padding: .9rem !important; }
  .card.p-4 { padding: .8rem !important; }
  /* tab-bar 모바일 톤 */
  .tab-bar .tab-item { padding: .55rem .7rem; font-size: .85rem; }
  /* segmented 모바일 — 폰트/패딩 줄임 + 라벨 한 줄 강제 */
  .segmented { padding: 2px; }
  .segmented label {
    padding: .42rem .55rem;
    font-size: .75rem;
    white-space: nowrap;
  }
  /* field-row gap 압축 + 라벨 작게 */
  .field-row { gap: .65rem .85rem !important; }
  .field-group .field-label { font-size: .625rem; }
  /* dropzone 텍스트 줄임 */
  .dropzone-large { padding: 1.1rem .8rem; font-size: .8rem; }
  .dropzone .dz-tiny { font-size: .65rem; }
  /* job card 압축 */
  #jobs-list .card.p-4 { padding: .75rem !important; }
  /* 사이드바 drawer trigger 버튼 시각 강조 */
  .lg\:hidden > [onclick="openGenSidebar()"] {
    width: 100%;
    justify-content: space-between;
    background: rgba(113, 112, 255, 0.08);
    border-color: var(--hf-accent);
    color: var(--hf-text-1);
  }
  /* page_header subtitle 모바일 — 너무 길면 1줄로 truncate, 클릭 시 펼치기 */
  .hf-page-header .hf-page-subtitle {
    font-size: .8rem;
    line-height: 1.4;
    color: var(--hf-text-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hf-page-header .hf-page-subtitle.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
  }
  /* sub-form details (5축 메타 collapsible) */
  details.hf-collapse {
    border: 1px solid var(--hf-border-2);
    border-radius: var(--hf-r-md);
    background: rgba(255,255,255,0.02);
  }
  details.hf-collapse > summary {
    padding: .5rem .65rem;
    font-size: .75rem;
    font-weight: 510;
    color: var(--hf-text-2);
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
  }
  details.hf-collapse > summary::-webkit-details-marker { display: none; }
  details.hf-collapse > summary::after {
    content: '＋';
    color: var(--hf-text-4);
    font-size: .9rem;
    transition: transform .15s ease;
  }
  details.hf-collapse[open] > summary::after { content: '−'; }
  details.hf-collapse > .hf-collapse-body {
    padding: .35rem .65rem .65rem;
    display: flex; flex-direction: column; gap: .35rem;
  }
}
@media (min-width: 769px) {
  details.hf-collapse > summary { cursor: default; pointer-events: none; }
  details.hf-collapse > summary::after { display: none; }
  details.hf-collapse[data-mobile-only="1"] > summary { display: none; }
  details.hf-collapse[data-mobile-only="1"] { border: 0; background: transparent; }
  details.hf-collapse[data-mobile-only="1"] > .hf-collapse-body { padding: 0; }

  /* card 외피의 collapse 도 데스크탑에선 always-open + summary 토글 marker 숨김 */
  details.hf-collapse-card[open] > summary { pointer-events: none; }
  details.hf-collapse-card > summary > span:last-child { display: none; }
}
@media (max-width: 1023px) {
  /* card 외피의 collapse — summary 회전 marker */
  details.hf-collapse-card > summary > span:last-child {
    transition: transform .15s ease;
    display: inline-block;
  }
  details.hf-collapse-card[open] > summary > span:last-child {
    transform: rotate(180deg);
  }
  /* Library: 모바일에선 자산 그리드 우선, aside 카드(업로드/검색) 그 아래 */
  .lib-aside { order: 2; }
  .lib-aside + section { order: 1; }

  /* Settings: select 가 있는 라벨은 모바일에서 stack (라벨 위, select 아래) */
  label.flex.items-center.justify-between:has(select.input) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .35rem !important;
  }
  label.flex.items-center.justify-between:has(select.input) > select.input {
    max-width: 100% !important;
  }

  /* sticky bottom action bar — 모바일에서 Generate + cost 가 mobile-tabbar 위 fixed */
  #gen-form .gen-actions {
    position: fixed;
    inset: auto 0 calc(64px + env(safe-area-inset-bottom, 0)) 0;
    z-index: 38;
    padding: .65rem .8rem;
    background: color-mix(in oklab, var(--hf-bg-panel) 95%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid var(--hf-border-2);
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    box-shadow: 0 -8px 24px rgba(0,0,0,.4);
  }
  #gen-form .gen-actions .btn-primary {
    flex: 1 0 auto;
    justify-content: center;
    min-height: 44px;
    font-size: .9rem;
  }
  /* sticky bottom 가 본문 가리지 않게 폼 끝에 padding */
  #gen-form { padding-bottom: 80px; }
  /* AI assist / Library 참조 / iterate 는 sticky 안에서 보조 — 작게 */
  #gen-form .gen-actions .btn:not(.btn-primary) { font-size: .75rem; padding: .4rem .55rem; min-height: 36px; }
  #gen-form .gen-actions label.t-caption { font-size: .65rem; }
  #gen-form .gen-actions .gen-keys { display: none; }
}
/* 2026-05-10 사용자 요청: 모델/비율/화질/길이 control panel = 스크롤 시 viewport top sticky.
   form 부모 컨테이너 안에서 sticky → form 끝 도달 시 자연 unstick. */
.gen-controls-sticky {
  position: sticky;
  top: 56px;  /* header height */
  z-index: 30;
  background: color-mix(in oklab, var(--hf-bg-marketing) 96%, transparent);
  backdrop-filter: blur(8px) saturate(120%);
  padding: .55rem .75rem;
  margin: 0 -.75rem .75rem;
  border-radius: var(--hf-r-md);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  max-height: calc(100vh - 56px - 100px);  /* header + bottom bar 마진 */
  overflow-y: auto;
}
@media (max-width: 768px) {
  /* 모바일은 sticky 풀고 일반 inline (header 와 충돌 회피) */
  .gen-controls-sticky {
    position: static; box-shadow: none; padding: 0; margin: 0; backdrop-filter: none;
    background: transparent; max-height: none; overflow-y: visible;
  }
}

@media (min-width: 1024px) {
  /* 2026-05-10 사용자 요청: 데스크탑도 generate bar = bottom sticky (mobile-tabbar 없음 → bottom: 0) */
  #gen-form .gen-actions {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 38;
    padding: .65rem max(1rem, calc((100vw - 1280px) / 2 + 1rem));
    background: color-mix(in oklab, var(--hf-bg-panel) 95%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid var(--hf-border-2);
    box-shadow: 0 -8px 24px rgba(0,0,0,.4);
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  }
  #gen-form .gen-actions .btn-primary { min-height: 40px; }
  #gen-form { padding-bottom: 88px; }
}

/* 가로 스크롤 방지 — `clip` 은 hidden 과 동일 효과 + scroll container 생성 X
 * (sticky 헤더 깨지는 문제 회피, 2026-05-11). modern 브라우저 (Chrome 90+/Safari 16+) 지원.
 * Fallback: 미지원 브라우저는 hidden 으로 폴백 — sticky 약간 영향 가능. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* 캔버스 페이지 모바일 — 도구 패널이 너무 좁아지면 스택 */
@media (max-width: 900px) {
  .canvas-tools-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   모바일 하단 sticky tabbar (lg 미만)
   - Linear 톤: panel bg + 미세 border + active 시 accent text
   - safe-area-inset-bottom 보존, 44px touch target, 5탭 균등
   ============================================================ */

#mobile-tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  /* solid fallback — backdrop-filter 미지원 / 콘텐츠 비침 방지 */
  background: var(--hf-bg-panel);
  border-top: 1px solid var(--hf-border-2);
  /* 위쪽 elevation — 본문과 시각 분리 */
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45), 0 -1px 0 rgba(255, 255, 255, 0.04);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
/* backdrop-filter 지원 브라우저만 살짝 투명 (블러 미감 + 여전히 불투명도 95% 이상) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #mobile-tabbar {
    background: color-mix(in oklab, var(--hf-bg-panel) 96%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
}

/* 헤더 햄버거 drawer — 본문과 겹쳐 보이지 않도록 solid 배경 + 아래쪽 elevation */
#mobile-nav {
  background: var(--hf-bg-marketing);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #mobile-nav {
    background: color-mix(in oklab, var(--hf-bg-marketing) 96%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
}
@media (max-width: 1023px) {
  #mobile-tabbar { display: grid; }
  /* 본문 하단에 tabbar 만큼 여백 — main 의 has-mobile-tabbar 클래스로 잠금
     footer 가 추가됐으므로 main 의 padding-bottom 은 0 으로 두고 footer 에서 처리 */
  main.has-mobile-tabbar { padding-bottom: 1rem; }
  #hf-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)); }
  /* toast-host 도 tabbar 위로 */
  #toast-host {
    bottom: calc(64px + env(safe-area-inset-bottom, 0) + 0.5rem);
  }
}
.mobile-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px 4px;
  font-size: 10px;
  font-weight: 510;
  letter-spacing: 0.15px;
  color: var(--hf-text-3);
  text-decoration: none;
  transition: color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-tab:hover { color: var(--hf-text-1); background: rgba(255,255,255,0.04); }
.mobile-tab.active { color: var(--hf-accent); }
.mobile-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  width: 28px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--hf-accent);
}
.mobile-tab { position: relative; }
.mobile-tab span {
  display: block;
  line-height: 1;
}

/* 터치 호버 회피 */
@media (hover: none) {
  .card-hover:hover { transform: none; }
}

/* ============================================================
   모바일 generate sidebar drawer (lg 미만)
   - 데스크탑은 col-span-3 정적 컬럼 그대로
   - 모바일은 right drawer 로 분리, 트리거 버튼 + backdrop + esc dismiss
   ============================================================ */
@media (max-width: 1023px) {
  .gen-sidebar-mobile {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(360px, 88vw);
    z-index: 50;
    background: var(--hf-bg-panel);
    border-left: 1px solid var(--hf-border-2);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    padding: 0.85rem 0.85rem calc(72px + env(safe-area-inset-bottom, 0));
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.2,.7,.2,1);
    -webkit-overflow-scrolling: touch;
  }
  .gen-sidebar-mobile.is-open { transform: translateX(0); }
  .gen-sidebar-mobile-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: .25rem .25rem .5rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--hf-border-1);
  }
}
@media (min-width: 1024px) {
  .gen-sidebar-mobile-head { display: none !important; }
}
#gen-sidebar-backdrop {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  right: min(360px, 88vw); /* drawer 폭 만큼 비워둠 — 외부 영역 어디든 탭하면 close */
  z-index: 49;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
#gen-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) {
  #gen-sidebar-backdrop { display: none; }
}

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

/* 캔버스 자체 터치 액션 */
.hf-canvas-stack { touch-action: none; -webkit-user-select: none; user-select: none; }

/* focus-visible — designer P2-16 (2026-05-08): 2px solid → 1px + box-shadow.
   input focus 와 통일 (hairline border 톤 일관). */
button:focus-visible, a:focus-visible, .nav-pill:focus-visible {
  outline: 1px solid var(--hf-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(113,112,255,0.18);
}

/* a11y — screen-reader 전용 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* prefers-color-scheme: light fallback (사용자 토글 우선) */
@media (prefers-color-scheme: light) {
  html:not(.light):not(.dark) { /* 사용자 토글 없으면 dark 유지 — 의도된 톤 */ }
}

/* ============================================================
   motion primitives (slim, 2026-05-08 designer audit P2-6 정리)
   - 사용처 0인 dead CSS 제거 (~80줄): blur-orb / word-stagger / marquee /
     liquid-glass / serif-italic / parallax / scrim-bottom / diagram-grid
   - 유지: glow-cta (Generate 버튼만)
   ============================================================ */

.glow-cta {
  position: relative; isolation: isolate;
}
.glow-cta::before {
  content: ''; position: absolute; inset: -2px; z-index: -1;
  background: linear-gradient(135deg, var(--hf-accent), #ec4899, var(--hf-accent));
  background-size: 200% 200%;
  border-radius: inherit;
  filter: blur(8px); opacity: 0;
  transition: opacity .25s ease;
  animation: hf-grad-shift 4s ease-in-out infinite;
}
.glow-cta:hover::before { opacity: .55; }
@keyframes hf-grad-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ============================================================
   Higgsfield generate UI parity (2026-05-11)
   - Source: /tmp/hf-vendor-bundle-2/chunks/ (23096/20690/26147/18338/19274)
   - Aspect 시각 사각형 / Model cost-pill / Duration tabular / Cost-badge inline pill
   ============================================================ */

/* --- Aspect ratio segmented — 시각 사각형 미니 preview ---
   23096-74ac808fbbadb968.js enum 흡수: AUTO/16:9/9:16/4:3/3:4/3:2/2:3/1:1.
   .ar-preview = inline 비율 box (--ar-w / --ar-h CSS var), 사용자가 한눈에 가로/세로 파악. */
.segmented-ar label { gap: .42rem; padding: .4rem .6rem; }
.segmented-ar .ar-preview {
  display: inline-block;
  width: var(--ar-w, 16px);
  height: var(--ar-h, 16px);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 2px;
  flex-shrink: 0;
  transition: background .12s ease, border-color .12s ease;
}
.segmented-ar input[type="radio"]:checked + label .ar-preview {
  background: linear-gradient(135deg, var(--hf-accent), color-mix(in oklab, var(--hf-accent) 70%, #ec4899));
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset;
}
.segmented-ar .ar-preview-auto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 14px; font-size: .65rem; font-weight: 600;
  color: var(--hf-text-3); background: transparent;
}
.segmented-ar input[type="radio"]:checked + label .ar-preview-auto {
  color: var(--hf-text-1); background: rgba(255,255,255,0.08);
}
.segmented-ar .ar-text { font-feature-settings: "tnum"; }

/* --- Duration segmented — tabular-nums + 단위 ---
   number `dur-num` = tnum / 단위 `dur-unit` = font-secondary subtle. */
.segmented-dur label { gap: .12rem; padding: .42rem .65rem; }
.segmented-dur .dur-num { font-feature-settings: "tnum"; font-weight: 540; }
.segmented-dur .dur-unit {
  font-size: .68rem; opacity: .6; font-weight: 460;
  margin-left: 1px;
}
.input.dur-free { font-feature-settings: "tnum"; }

/* --- Model picker — cost hint pill in label ---
   model-catalog.js renderCatalog: label 내부에 `mc-name` + `mc-pill` 2 span. */
.segmented label .mc-name { display: inline-block; }
.segmented label .mc-pill {
  display: inline-flex; align-items: center;
  margin-left: .35rem;
  padding: 1px 6px;
  font-size: .62rem; font-weight: 540; line-height: 1.5;
  border-radius: 9999px;
  background: rgba(255,255,255,0.06);
  color: var(--hf-text-3);
  font-feature-settings: "tnum";
  letter-spacing: 0.1px;
  transition: background .12s ease, color .12s ease;
}
.segmented input[type="radio"]:checked + label .mc-pill {
  background: rgba(255,255,255,0.14);
  color: var(--hf-text-1);
}
.segmented label .mc-pill-unlim {
  background: rgba(165,180,255,0.18);
  color: #c7d2fe;
}
.segmented label .mc-pill-err {
  background: rgba(229,72,77,0.18);
  color: #fca5a5;
}

/* --- Cost badge — inline pill inside CTA ---
   18338-eb1769680cef5abb.js " ⋅ " separator + credits label 흡수.
   Generate 버튼 안에 박힌 chip → 다이아몬드 글리프 + tnum + unit. */
.cost-pill {
  display: inline-flex; align-items: center; gap: .22rem;
  margin-left: .45rem;
  padding: 2px 8px 2px 6px;
  font-size: .68rem; font-weight: 540; line-height: 1.5;
  border-radius: 9999px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-feature-settings: "tnum";
  border: 1px solid rgba(255,255,255,0.10);
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.cost-pill .cp-glyph {
  font-size: .62rem;
  opacity: .85;
  transform: translateY(-.5px);
}
.cost-pill .cp-num { font-weight: 600; }
.cost-pill .cp-unit { font-size: .58rem; opacity: .72; margin-left: 1px; }

/* --- Model picker — 인라인 toggle (모달 X, 같은 자리에서 grid 확장) ---
   사용자 요청 (2026-05-11): "별도 레이어 없이 토글식". */
.mc-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .55rem;
  font-size: .72rem; font-weight: 510;
  color: var(--hf-accent);
  border: 0; background: transparent;
  cursor: pointer; white-space: nowrap;
  border-radius: 5px;
  transition: background .12s ease, color .12s ease;
}
.mc-toggle:hover { background: rgba(113,112,255,.08); color: var(--hf-text-1); }
.mc-toggle .mc-toggle-icon {
  display: inline-block; font-size: .62rem;
  transform: translateY(-.5px);
  transition: transform .15s ease;
}
.mc-toggle[aria-expanded="true"] .mc-toggle-icon { color: var(--hf-text-1); }

.model-grid-inline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .4rem;
  margin-top: .25rem;
  padding: .55rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hf-border-2);
  border-radius: var(--hf-r-md);
  animation: mc-grid-fade-in .15s ease-out;
  /* 2026-05-11: .field-row (flex-wrap) 안에서 full-width 새 행 강제. order:99 = 다른 flex children 뒤. */
  flex-basis: 100%;
  width: 100%;
  order: 99;
}
@keyframes mc-grid-fade-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mc-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .45rem .6rem;
  font-size: .76rem; font-weight: 500; line-height: 1.3;
  color: var(--hf-text-2);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hf-border-2);
  border-radius: var(--hf-r-sm);
  cursor: pointer; user-select: none; text-align: left;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
  font-feature-settings: "cv01", "ss03", "tnum";
}
.mc-card:hover:not(.is-disabled) {
  border-color: var(--hf-accent);
  background: rgba(113,112,255,.08);
  color: var(--hf-text-1);
}
.mc-card:active:not(.is-disabled) { transform: scale(.98); }
.mc-card.is-selected {
  border-color: var(--hf-accent);
  background: linear-gradient(180deg, rgba(113,112,255,.18), rgba(113,112,255,.10));
  color: var(--hf-text-1);
  box-shadow: inset 0 0 0 1px rgba(113,112,255,.30), 0 1px 2px rgba(0,0,0,.4);
}
.mc-card.is-disabled { opacity: .4; cursor: not-allowed; }
.mc-card .mc-card-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.mc-card .mc-card-cost {
  flex-shrink: 0;
  padding: 1px 6px;
  font-size: .62rem; font-weight: 540;
  border-radius: 9999px;
  background: rgba(255,255,255,0.06);
  color: var(--hf-text-3);
}
.mc-card.is-selected .mc-card-cost {
  background: rgba(255,255,255,0.18);
  color: var(--hf-text-1);
}

/* --- Schema segmented (resolution / mode / quality / genre / sound / boolean) ---
   사용자 직격 (2026-05-11): native <select> dropdown = OS-rendered popup 으로 font/위치 우리 CSS 무시.
   enum ≤ 6 = segmented control 로 inline 표시 → 일관된 톤. */
.segmented-schema {
  flex-wrap: wrap;
  max-width: 100%;
}
.segmented-schema label {
  padding: .32rem .55rem;
  font-size: .72rem;
}





/* CREATE WORKSTATION V7 — functional authoring tool composition.
   Source contract: DESIGN.md G043. This is the single Create-specific layout layer. */
main:has(.gen-workstation) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.gen-workstation {
  --cw-gap: 10px;
  --cw-left: clamp(310px, 20vw, 380px);
  --cw-right: clamp(286px, 17vw, 340px);
  --cw-panel: rgba(10,14,20,.82);
  --cw-line: rgba(255,255,255,.09);
}
.gen-workstation .hf-cinematic-hero,
.gen-workstation .hf-cinematic-row,
.gen-workstation #gen-sidebar,
.gen-workstation > .lg\:hidden,
.gen-workstation #jobs-list,
.gen-workstation > .grid > section > section:not(.gen-history-dock) {
  display: none !important;
}
body:has(.gen-workstation) > header > div {
  max-width: none !important;
  width: 100% !important;
}
@media (min-width: 1024px) {
  body:has(.gen-workstation) #main-nav {
    display: flex !important;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body:has(.gen-workstation) #main-nav::-webkit-scrollbar { display: none; }
}
.composer-flow,
.composer-mode-card,
.composer-prompt-tools,
.provider-checklist {
  min-width: 0;
}
.composer-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.composer-step {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.028);
  color: var(--hf-text-4);
}
.composer-step b {
  display: block;
  color: var(--hf-text-2);
  font-size: .75rem;
  font-weight: 650;
}
.composer-step span {
  display: block;
  margin-top: 1px;
  font-size: .68rem;
  line-height: 1.25;
}
.composer-step.is-active {
  border-color: rgba(113,112,255,.36);
  background: rgba(113,112,255,.12);
}
.composer-mode-card {
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(59,216,255,.16);
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, rgba(59,216,255,.12), transparent 42%), rgba(3,12,18,.66);
}
.composer-mode-card h2 {
  margin: 5px 0 5px;
  color: var(--hf-text-1);
  font-size: 1rem;
  font-weight: 680;
}
.composer-mode-card p {
  margin: 0;
  color: var(--hf-text-3);
  font-size: .78rem;
  line-height: 1.45;
}
.composer-mode-lanes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.composer-mode-lanes span {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--hf-text-4);
  font-size: .68rem;
}
.composer-mode-lanes span.is-active {
  color: var(--hf-text-1);
  border-color: rgba(113,112,255,.4);
  background: rgba(113,112,255,.14);
}
.gen-workstation .gen-stage-chrome {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding: .78rem .9rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: radial-gradient(circle at 18% 0%, rgba(59,216,255,.12), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
}
.gen-workstation .gen-stage-chrome p {
  margin: .16rem 0 0;
  color: var(--hf-text-4);
  font-size: .78rem;
}
.gen-workstation .gen-stage-shortcuts {
  white-space: nowrap;
  color: var(--hf-text-4);
  font-size: .72rem;
}
.composer-prompt-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.provider-checklist {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}
.provider-checklist li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(255,255,255,.028);
}
.provider-checklist span {
  color: var(--hf-text-4);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.provider-checklist b {
  color: var(--hf-text-2);
  font-size: .74rem;
  text-align: right;
}
.gen-rail-handle { display: none; }

@media (min-width: 1180px) {
  html:has(.gen-workstation), body:has(.gen-workstation) { overflow: hidden; }
  main:has(.gen-workstation) {
    max-width: none !important;
    width: 100vw !important;
    padding: 10px 14px 0 !important;
  }
  .gen-workstation {
    width: min(1920px, calc(100vw - 28px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  .gen-workstation > .grid,
  .gen-workstation > .grid > section {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .gen-workstation > .grid > section > .card {
    height: calc(100dvh - 68px) !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    padding: 14px !important;
    background: linear-gradient(180deg, rgba(12,16,24,.94), rgba(6,9,14,.92)) !important;
    border-color: rgba(255,255,255,.1) !important;
  }
  .gen-workstation > .grid > section > .card > div {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .gen-workstation h1.t-h2 {
    margin: 0 !important;
    padding: 0 4px 2px !important;
    font-size: clamp(1rem, .9vw, 1.18rem) !important;
    line-height: 1.12 !important;
    color: var(--hf-text-2) !important;
  }
  .gen-workstation #gen-form {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: var(--cw-left) minmax(520px, 1fr) var(--cw-right) !important;
    grid-template-rows: 38px 54px 50px minmax(0, 1fr) 68px !important;
    gap: var(--cw-gap) !important;
    position: relative !important;
    padding: 0 !important;
  }
  .gen-workstation .gen-workbench-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.035);
  }
  .gen-workstation .gen-workbench-tabs button {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 30px;
    padding: 0 14px !important;
    border-radius: 12px;
    color: var(--hf-text-3);
  }
  .gen-workstation .gen-workbench-tabs button.is-active {
    color: var(--hf-text-1);
    background: rgba(113,112,255,.16);
    box-shadow: inset 0 0 0 1px rgba(165,180,255,.22);
  }
  .gen-workstation .composer-flow {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  .gen-workstation .tab-bar {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin: 0 !important;
    padding: 6px !important;
    min-height: 0 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 17px !important;
    background: rgba(0,0,0,.18);
  }
  .gen-workstation #field-kind { grid-column: 1 / -1 !important; grid-row: 3 !important; }
  .gen-workstation .gen-controls-sticky,
  .gen-workstation .gen-stage-panel,
  .gen-workstation .gen-provider-rail {
    grid-row: 4 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }
  .gen-workstation .gen-controls-sticky {
    grid-column: 1 !important;
    padding: 12px !important;
    border: 1px solid rgba(59,216,255,.13) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(14,26,34,.78), rgba(4,8,12,.62)), rgba(0,0,0,.22) !important;
  }
  .gen-workstation .gen-controls-sticky .field-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .gen-workstation .gen-controls-sticky .segmented { width: 100% !important; }
  .gen-workstation .gen-controls-sticky .segmented label { min-width: max-content; }
  .gen-workstation .gen-stage-panel {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-rows: auto minmax(220px, 1fr) auto auto auto !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 24px !important;
    background: radial-gradient(circle at 50% 10%, rgba(88,166,255,.12), transparent 35%), linear-gradient(180deg, rgba(15,20,28,.92), rgba(7,10,15,.9)) !important;
  }
  .gen-workstation textarea[name="body"] {
    min-height: 0 !important;
    height: 100% !important;
    resize: none !important;
    border-radius: 22px !important;
    font-size: clamp(.98rem, 1vw, 1.1rem) !important;
    line-height: 1.6 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)), rgba(0,0,0,.24) !important;
  }
  .gen-workstation #preset-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    max-height: 54px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .gen-workstation #preset-chips .chip-button,
  .gen-workstation #preset-chips button {
    flex: 0 0 auto !important;
    min-width: 110px !important;
  }
  .gen-workstation #gen-dropzone {
    min-height: 62px !important;
    max-height: 82px !important;
    overflow: hidden !important;
  }
  .gen-workstation .gen-provider-rail {
    grid-column: 3 !important;
    padding: 12px !important;
    border: 1px solid rgba(245,158,11,.14) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(34,25,11,.72), rgba(6,8,12,.68)), rgba(0,0,0,.2) !important;
  }
  .gen-workstation .gen-run-tray {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto auto auto minmax(80px, auto) !important;
    align-items: center !important;
    gap: 10px !important;
    height: 68px !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(59,216,255,.18) !important;
    border-radius: 20px !important;
    background: linear-gradient(90deg, rgba(6,29,38,.88), rgba(18,18,30,.78)) !important;
  }
  .gen-workstation .gen-run-tray .btn-primary {
    width: 100% !important;
    justify-content: center !important;
    min-height: 46px !important;
  }
  .gen-workstation .gen-history-dock {
    position: fixed !important;
    left: 30px;
    right: 30px;
    bottom: 12px;
    z-index: 18;
    height: 42px !important;
    max-height: 42px !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
    opacity: .82;
    border-radius: 18px !important;
  }
  .gen-workstation .gen-history-dock:hover,
  .gen-workstation #gen-form[data-active-pane="output"] + .gen-history-dock {
    height: 150px !important;
    max-height: 150px !important;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  html:has(.gen-workstation), body:has(.gen-workstation) {
    max-width: 100vw;
    overflow-x: clip !important;
  }
  main:has(.gen-workstation) { padding: 0 !important; }
  .gen-workstation { width: 100% !important; max-width: none !important; }
  .gen-workstation > .grid { display: block !important; }
  .gen-workstation > .grid > section > .card {
    min-height: calc(100dvh - 48px) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
  }
  .gen-workstation > .grid > section > .card > div {
    height: calc(100dvh - 70px) !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }
  .gen-workstation h1.t-h2,
  .gen-workstation .composer-flow { display: none !important; }
  .gen-workstation #gen-form {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding-bottom: 0 !important;
  }
  .gen-workstation .gen-workbench-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.035);
  }
  .gen-workstation .gen-workbench-tabs button {
    min-width: 0;
    min-height: 38px;
    padding: 4px 2px;
    font-size: 10px;
  }
  .gen-workstation .tab-bar {
    margin: 0 !important;
    padding: 4px !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,.18);
  }
  .gen-workstation .gen-stage-panel,
  .gen-workstation .gen-controls-sticky,
  .gen-workstation .gen-provider-rail {
    min-height: 0 !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(0,0,0,.18) !important;
  }
  .gen-workstation #gen-form:not([data-active-pane]) .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="stage"] .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="refs"] .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="provider"] .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="output"] .gen-controls-sticky,
  .gen-workstation #gen-form:not([data-active-pane]) .gen-provider-rail,
  .gen-workstation #gen-form[data-active-pane="stage"] .gen-provider-rail,
  .gen-workstation #gen-form[data-active-pane="refs"] .gen-provider-rail,
  .gen-workstation #gen-form[data-active-pane="models"] .gen-provider-rail,
  .gen-workstation #gen-form[data-active-pane="output"] .gen-provider-rail,
  .gen-workstation #gen-form[data-active-pane="models"] .gen-stage-panel,
  .gen-workstation #gen-form[data-active-pane="provider"] .gen-stage-panel,
  .gen-workstation #gen-form[data-active-pane="output"] .gen-stage-panel {
    display: none !important;
  }
  .gen-workstation #gen-form:not([data-active-pane]) > .gen-stage-panel,
  .gen-workstation #gen-form[data-active-pane="stage"] > .gen-stage-panel,
  .gen-workstation #gen-form[data-active-pane="refs"] > .gen-stage-panel {
    display: grid !important;
  }
  .gen-workstation #gen-form[data-active-pane="models"] > .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="provider"] > .gen-provider-rail {
    display: block !important;
  }
  .gen-workstation .gen-stage-panel {
    grid-template-rows: auto minmax(220px, 1fr) auto auto !important;
    gap: 8px !important;
  }
  .gen-workstation textarea[name="body"] {
    min-height: 220px !important;
    height: 100% !important;
    resize: none !important;
    font-size: 1rem !important;
  }
  .gen-workstation .gen-stage-panel > details.hf-collapse {
    max-height: 46px !important;
    overflow: hidden !important;
  }
  .gen-workstation .gen-stage-panel > details.hf-collapse[open] {
    max-height: 220px !important;
    overflow: auto !important;
  }
  .gen-workstation #preset-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: 0 !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] textarea[name="body"],
  .gen-workstation #gen-form[data-active-pane="refs"] .composer-prompt-tools,
  .gen-workstation #gen-form[data-active-pane="refs"] .gen-stage-panel > .field-group,
  .gen-workstation #gen-form[data-active-pane="stage"] #ref-slots,
  .gen-workstation #gen-form:not([data-active-pane]) #ref-slots {
    display: none !important;
  }
  .gen-workstation #gen-dropzone {
    min-height: 86px !important;
    max-height: 96px !important;
  }
  .gen-workstation .gen-run-tray {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(59,216,255,.16) !important;
    background: rgba(4,18,24,.9) !important;
  }
  .gen-workstation .gen-run-tray .btn-primary {
    grid-column: 1 / -1;
    min-height: 46px !important;
  }
  .gen-workstation .gen-run-tray .gen-keys,
  .gen-workstation .gen-stage-shortcuts { display: none !important; }
  .gen-workstation .gen-history-dock { display: none !important; }
}

/* CREATE WORKSTATION V7.1 — authoring regions and run gate semantics. */
.mode-briefs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.mode-briefs article {
  display: none;
  padding: 9px 11px;
  border: 1px solid rgba(113,112,255,.18);
  border-radius: 14px;
  background: rgba(113,112,255,.07);
}
.mode-briefs article.is-active { display: block; }
.mode-briefs b {
  display: block;
  color: var(--hf-text-1);
  font-size: .82rem;
}
.mode-briefs span {
  display: block;
  margin-top: 2px;
  color: var(--hf-text-3);
  font-size: .74rem;
}
.authoring-region {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 18px;
  background: rgba(0,0,0,.14);
  padding: 10px;
}
.authoring-region-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.authoring-region-head h3 {
  margin: 2px 0 0;
  color: var(--hf-text-1);
  font-size: .9rem;
  font-weight: 650;
}
.region-hint {
  color: var(--hf-text-4);
  font-size: .72rem;
  text-align: right;
  max-width: 280px;
}
.intent-brief {
  display: grid;
  grid-template-rows: auto minmax(190px, 1fr) auto;
  gap: 8px;
}
.intent-brief textarea[name="body"] {
  min-height: 190px !important;
}
.generation-inputs {
  display: grid;
  gap: 9px;
  overflow: hidden;
}
.run-gate-summary {
  min-width: 180px;
  display: grid;
  gap: 2px;
  color: var(--hf-text-3);
  font-size: .72rem;
}
.run-gate-summary b {
  color: var(--hf-text-1);
  font-size: .82rem;
}
.gen-run-tray .btn-primary[data-run-gate="ok"] {
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.24), 0 0 0 1px rgba(34,197,94,.12);
}
.gen-run-tray .btn-primary[data-run-gate="risky"] {
  box-shadow: inset 0 0 0 1px rgba(245,158,11,.32), 0 0 0 1px rgba(245,158,11,.12);
}
.gen-run-tray .btn-primary[data-run-gate="blocked"] {
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.32), 0 0 0 1px rgba(239,68,68,.12);
}

@media (min-width: 1180px) {
  .gen-workstation .gen-stage-panel {
    grid-template-rows: auto auto minmax(220px, 1fr) minmax(96px, auto) auto !important;
  }
  .gen-workstation .intent-brief {
    min-height: 260px;
  }
  .gen-workstation .generation-inputs {
    max-height: 190px;
    overflow: auto;
  }
  .gen-workstation .gen-run-tray {
    grid-template-columns: minmax(210px, .75fr) minmax(260px, 1.6fr) auto auto auto minmax(70px, auto) !important;
  }
}

@media (max-width: 767px) {
  .mode-briefs {
    display: none;
  }
  .gen-workstation .gen-stage-panel {
    grid-template-rows: auto minmax(250px, 1fr) minmax(90px, auto) !important;
  }
  .gen-workstation .intent-brief {
    grid-template-rows: auto minmax(220px, 1fr) auto;
    padding: 8px;
  }
  .gen-workstation .generation-inputs {
    max-height: 120px;
    overflow: auto;
    padding: 8px;
  }
  .gen-workstation .generation-inputs .authoring-region-head,
  .gen-workstation .generation-inputs .field-group,
  .gen-workstation .generation-inputs #preset-chips,
  .gen-workstation .generation-inputs #ref-slots {
    display: none !important;
  }
  .region-hint { display: none; }
  .run-gate-summary {
    grid-column: 1 / -1;
  }
}

/* CREATE WORKSTATION V7.2 — desktop-first output tab and overlap kill.
   Output/History is a real workbench tab surface, not a bottom popup. */
@media (min-width: 1180px) {
  .gen-workstation > .grid > section > .card > div {
    position: relative !important;
  }
  .gen-workstation .gen-history-dock {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 102px !important;
    bottom: 82px !important;
    z-index: 40 !important;
    height: auto !important;
    max-height: none !important;
    padding: 18px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    border-radius: 24px !important;
    border: 1px solid rgba(113,112,255,.24) !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(113,112,255,.18), transparent 38%),
      linear-gradient(180deg, rgba(11,15,24,.98), rgba(5,8,13,.96)) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.42);
  }
  .gen-workstation .gen-history-dock:hover {
    height: auto !important;
    max-height: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="output"] + .gen-history-dock {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
  }
  .gen-workstation #gen-form[data-active-pane="output"] .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="output"] .gen-stage-panel,
  .gen-workstation #gen-form[data-active-pane="output"] .gen-provider-rail {
    visibility: hidden !important;
  }
  .gen-workstation .gen-history-dock-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .gen-workstation .gen-history-dock-head p {
    margin: 4px 0 0;
    color: var(--hf-text-3);
    font-size: .82rem;
  }
  .gen-workstation .gen-history-strip {
    min-height: 0;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    align-content: start;
    gap: 10px;
    overflow: auto;
    padding-right: 4px;
  }
  .gen-workstation .gen-history-chip {
    min-height: 86px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px !important;
    text-align: left;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background: rgba(255,255,255,.04);
  }
  .gen-workstation .gen-history-chip b {
    color: var(--hf-text-1);
    font-size: .78rem;
  }
  .gen-workstation .gen-history-chip em {
    color: var(--hf-text-3);
    font-size: .76rem;
    line-height: 1.4;
    font-style: normal;
  }
}

/* CREATE WORKSTATION V7.3 — mobile viewport + command tray repair.
   Evidence: 2026-05-28 live-mobile.png showed the secondary tray controls
   slipping under the fixed bottom tabbar and the empty HF account label
   wrapping in the header. Mobile keeps Create as the only persistent action;
   secondary actions already exist in the stage as Prompt Coach / Library. */
@media (max-width: 767px) {
  body:has(.gen-workstation) header > div {
    gap: .45rem !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  body:has(.gen-workstation) .hf-balance-slot:has(a[href="/settings"]) {
    display: none !important;
  }
  body:has(.gen-workstation) .hf-suno-slot {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  body:has(.gen-workstation) [data-user-pill] button {
    min-width: 36px;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }
  .gen-workstation > .grid > section > .card {
    height: calc(100dvh - 48px - 58px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(100dvh - 48px - 58px - env(safe-area-inset-bottom, 0px)) !important;
  }
  .gen-workstation > .grid > section > .card > div {
    height: 100% !important;
  }
  .gen-workstation .gen-run-tray {
    grid-template-columns: 1fr !important;
    align-content: stretch !important;
    gap: 7px !important;
  }
  .gen-workstation .gen-run-tray .btn:not(.btn-primary),
  .gen-workstation .gen-run-tray label,
  .gen-workstation .gen-run-tray .gen-keys {
    display: none !important;
  }
  .gen-workstation .gen-run-tray .btn-primary {
    grid-column: auto !important;
  }
}

/* CREATE WORKSTATION V8 — 실무 저작툴 layer: brief → prompt → run manifest. */
.production-brief-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: .7rem;
}
.production-brief-grid .input { min-height: 38px; }
.create-draft-restore {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .72rem .85rem;
  border: 1px solid rgba(59,216,255,.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(59,216,255,.13), rgba(113,112,255,.08));
  color: var(--hf-text-2);
}
.create-draft-restore[hidden] { display: none !important; }
.create-draft-restore b {
  display: block;
  color: var(--hf-text-1);
  font-size: .86rem;
}
.create-draft-restore span {
  display: block;
  margin-top: .12rem;
  color: var(--hf-text-4);
  font-size: .72rem;
}
.create-draft-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.production-prompt-ops {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .45rem;
  margin-top: .65rem;
  padding: .65rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.026);
}
.prompt-quality-meter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.prompt-quality-meter span {
  display: block;
  width: var(--prompt-ready, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb86b, #3bd8ff 48%, #7cffb2);
  transition: width .18s ease;
}
.prompt-ops-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  color: var(--hf-text-4);
  font-size: .7rem;
}
.prompt-ops-stats span {
  padding: .18rem .48rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(0,0,0,.16);
}
.production-prompt-preview {
  max-height: 132px;
  overflow: auto;
  margin: 0;
  padding: .62rem .7rem;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(0,0,0,.2);
  color: var(--hf-text-3);
  font-size: .72rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.run-manifest {
  margin-top: .75rem;
  padding: .72rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
}
.run-manifest dl {
  display: grid;
  gap: .42rem;
  margin: .55rem 0 0;
}
.run-manifest dl div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: .5rem;
  align-items: baseline;
}
.run-manifest dt {
  color: var(--hf-text-4);
  font-size: .68rem;
}
.run-manifest dd {
  margin: 0;
  min-width: 0;
  color: var(--hf-text-2);
  font-size: .73rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .production-brief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .production-brief-grid { grid-template-columns: 1fr; }
  .create-draft-restore { align-items: stretch; flex-direction: column; }
  .create-draft-actions { justify-content: flex-end; }
  .production-prompt-preview { max-height: 96px; }
  .prompt-ops-stats { gap: .28rem; }
}

/* CREATE WORKSTATION V8.1 — prompt-first mobile repair. */
.production-brief-grid { margin-top: .7rem; }
@media (max-width: 767px) {
  .gen-workstation .intent-brief textarea[name="body"] {
    min-height: 116px !important;
  }
  .production-prompt-ops {
    padding: .5rem;
  }
  .production-prompt-preview {
    display: none !important;
  }
}

/* CREATE WORKSTATION V8.2 — desktop authoring panel fit.
   The prompt textarea is the main work surface; structured brief fields are compact helpers,
   not a 4-column cramped form that steals the stage. */
@media (min-width: 1180px) {
  .gen-workstation .gen-stage-panel {
    grid-template-rows: auto auto minmax(340px, 1fr) minmax(130px, auto) auto !important;
  }
  .gen-workstation .intent-brief {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(150px, 1fr) auto auto !important;
    gap: .65rem !important;
    overflow: auto !important;
  }
  .gen-workstation .intent-brief textarea[name="body"] {
    height: auto !important;
    min-height: 170px !important;
  }
  .gen-workstation .intent-brief .production-brief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
@media (min-width: 1680px) {
  .gen-workstation .intent-brief .production-brief-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* CREATE WORKSTATION V9 — desktop authoring tool reset.
   Default desktop is not a 3-rail dashboard. It is a prompt canvas with an inspector.
   Models/Refs become explicit workbench panes instead of permanently stealing canvas width. */
@media (min-width: 1180px) {
  .gen-workstation {
    --cw-right: clamp(320px, 24vw, 390px);
  }
  .gen-workstation > .grid > section > .card {
    height: calc(100dvh - 92px) !important;
    min-height: 720px !important;
  }
  .gen-workstation > .grid > section > .card > div {
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .gen-workstation h1.t-h2 {
    padding: 0 2px !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    color: var(--hf-text-2) !important;
  }
  .gen-workstation #gen-form {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(720px, 1fr) var(--cw-right) !important;
    grid-template-rows: 42px 48px minmax(0, 1fr) 72px !important;
    gap: 12px !important;
    overflow: hidden !important;
  }
  .gen-workstation .gen-workbench-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    height: 42px !important;
  }
  .gen-workstation .composer-flow {
    display: none !important;
  }
  .gen-workstation .tab-bar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    height: 48px !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
  .gen-workstation .gen-provider-rail {
    grid-column: 2 !important;
    grid-row: 2 / 4 !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }
  .gen-workstation .gen-stage-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) minmax(112px, auto) !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }
  .gen-workstation .gen-stage-chrome {
    min-height: 58px !important;
    padding: .7rem .9rem !important;
  }
  .gen-workstation .mode-briefs {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .gen-workstation .mode-briefs article:not(.is-active) {
    display: none !important;
  }
  .gen-workstation .intent-brief {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(260px, 1fr) auto auto !important;
    gap: 10px !important;
    padding: 14px !important;
    border: 1px solid rgba(113,112,255,.2) !important;
    border-radius: 22px !important;
    background: rgba(0,0,0,.2) !important;
    overflow: hidden !important;
  }
  .gen-workstation .intent-brief .authoring-region-head {
    margin: 0 !important;
  }
  .gen-workstation .intent-brief textarea[name="body"] {
    height: auto !important;
    min-height: 260px !important;
    resize: none !important;
    border-radius: 20px !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
  }
  .gen-workstation .production-brief-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .gen-workstation .production-prompt-ops {
    grid-template-columns: 120px minmax(0, 1fr) !important;
    align-items: center !important;
    padding: 8px 10px !important;
  }
  .gen-workstation .production-prompt-preview {
    display: none !important;
  }
  .gen-workstation .generation-inputs {
    min-height: 0 !important;
    overflow: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.025) !important;
  }
  /* Stage is the default. Models/Refs are real panes, not permanent rails. */
  .gen-workstation .gen-controls-sticky {
    display: none !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 18px !important;
    border-radius: 24px !important;
  }
  .gen-workstation #gen-form[data-active-pane="models"] .gen-controls-sticky {
    display: block !important;
  }
  .gen-workstation #gen-form[data-active-pane="models"] .gen-stage-panel,
  .gen-workstation #gen-form[data-active-pane="refs"] .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="provider"] .gen-controls-sticky {
    display: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .gen-stage-panel {
    display: grid !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .intent-brief,
  .gen-workstation #gen-form[data-active-pane="refs"] .mode-briefs,
  .gen-workstation #gen-form[data-active-pane="refs"] .gen-stage-chrome {
    display: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .generation-inputs {
    grid-row: 1 / -1 !important;
  }
  .gen-workstation #gen-form[data-active-pane="provider"] .gen-stage-panel {
    opacity: .3 !important;
    pointer-events: none !important;
  }
  .gen-workstation .gen-run-tray {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    height: 72px !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) minmax(240px, 420px) auto auto auto auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 22px !important;
  }
  .gen-workstation .gen-run-tray .btn-primary {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }
  .gen-workstation .gen-history-dock {
    display: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="output"] + .gen-history-dock {
    display: grid !important;
  }
  .gen-workstation #gen-form[data-active-pane="output"] .gen-stage-panel,
  .gen-workstation #gen-form[data-active-pane="output"] .gen-provider-rail,
  .gen-workstation #gen-form[data-active-pane="output"] .tab-bar {
    visibility: hidden !important;
  }
}

/* CREATE WORKSTATION V9.1 — remove explanatory chrome. Tool, not brochure. */
.gen-workstation .region-hint,
.gen-workstation #composer-mode-copy,
.gen-workstation #composer-stage-copy,
.gen-workstation .mode-briefs article span,
.gen-workstation .gen-stage-shortcuts,
.gen-workstation .composer-step span,
.gen-workstation .gen-history-dock-head p {
  display: none !important;
}
.gen-workstation .composer-mode-card {
  padding: 10px !important;
  margin-bottom: 10px !important;
}
.gen-workstation .composer-mode-card h2 {
  margin: 2px 0 8px !important;
}
.gen-workstation .gen-stage-chrome {
  min-height: 0 !important;
  padding: 8px 10px !important;
}
.gen-workstation .gen-stage-chrome p {
  display: none !important;
}
.gen-workstation .mode-briefs article {
  padding: 8px 10px !important;
}
.gen-workstation .authoring-region-head {
  margin-bottom: 4px !important;
}
.gen-workstation .authoring-region-head h3 {
  margin: 0 !important;
  font-size: .9rem !important;
}
.gen-workstation .tab-item {
  gap: .42rem !important;
}
.gen-workstation .tab-count {
  display: none !important;
}

/* CREATE WORKSTATION V9.2 — Stage means prompt canvas only. */
@media (min-width: 1180px) {
  .gen-workstation .gen-stage-panel {
    grid-template-rows: minmax(0, 1fr) !important;
  }
  .gen-workstation .gen-stage-chrome,
  .gen-workstation .mode-briefs,
  .gen-workstation .generation-inputs {
    display: none !important;
  }
  .gen-workstation .intent-brief {
    grid-row: 1 !important;
    height: 100% !important;
    grid-template-rows: auto minmax(360px, 1fr) auto auto !important;
    padding: 18px !important;
  }
  .gen-workstation .intent-brief textarea[name="body"] {
    min-height: 390px !important;
    font-size: 1.08rem !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .gen-stage-panel {
    grid-template-rows: minmax(0, 1fr) !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .generation-inputs {
    display: block !important;
    height: 100% !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .intent-brief {
    display: none !important;
  }
  .gen-workstation .gen-provider-summary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .gen-workstation .gen-provider-summary > div,
  .gen-workstation .provider-checklist li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .gen-workstation .gen-provider-summary b,
  .gen-workstation .provider-checklist b {
    text-align: right !important;
    line-height: 1.25 !important;
  }
}

/* CREATE WORKSTATION V9.3 — compact inspector labels. */
@media (min-width: 1180px) {
  .gen-workstation .gen-provider-summary > div {
    padding: 8px 10px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.16) !important;
  }
  .gen-workstation .gen-provider-summary span,
  .gen-workstation .provider-checklist span,
  .gen-workstation .run-manifest dt {
    font-size: .67rem !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: var(--hf-text-4) !important;
  }
  .gen-workstation .gen-provider-summary b {
    max-width: 190px !important;
    overflow-wrap: anywhere !important;
  }
  .gen-workstation #provider-preflight-warning {
    padding: 10px !important;
  }
  .gen-workstation #provider-preflight-warning b {
    display: inline !important;
    margin-right: 6px !important;
  }
}

/* CREATE WORKSTATION V10 — generation setup must be visible by default.
   The user should never wonder what provider/model/settings will be used. */
@media (min-width: 1180px) {
  .gen-workstation {
    --cw-right: clamp(320px, 23vw, 380px);
  }
  .gen-workstation #gen-form {
    grid-template-columns: minmax(760px, 1fr) var(--cw-right) !important;
    grid-template-rows: 38px 46px minmax(118px, auto) minmax(0, 1fr) 72px !important;
    gap: 10px !important;
  }
  .gen-workstation .gen-workbench-tabs {
    height: 38px !important;
  }
  .gen-workstation .tab-bar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: 46px !important;
  }
  .gen-workstation .gen-provider-rail {
    grid-column: 2 !important;
    grid-row: 2 / 5 !important;
  }
  .gen-workstation .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="stage"] .gen-controls-sticky,
  .gen-workstation #gen-form:not([data-active-pane]) .gen-controls-sticky {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: 0 !important;
    max-height: 170px !important;
    overflow: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  }
  .gen-workstation .run-setup-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
  }
  .gen-workstation .run-setup-head b {
    display: block !important;
    color: var(--hf-text-1) !important;
    font-size: .95rem !important;
  }
  .gen-workstation .run-setup-head > span {
    color: var(--hf-text-4) !important;
    font-size: .72rem !important;
  }
  .gen-workstation #current-model-summary {
    max-width: 58%;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: var(--hf-text-2) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gen-workstation .composer-mode-card,
  .gen-workstation .composer-mode-lanes,
  .gen-workstation .gen-controls-sticky .t-caption code,
  .gen-workstation .gen-controls-sticky .flex.items-center.justify-between.mb-1\.5 > .t-caption {
    display: none !important;
  }
  .gen-workstation .gen-controls-sticky .field-row {
    display: grid !important;
    grid-template-columns: minmax(250px, 1.3fr) minmax(250px, 1.3fr) minmax(250px, 1fr) minmax(170px, .7fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }
  .gen-workstation .gen-controls-sticky .field-group {
    min-width: 0 !important;
    margin: 0 !important;
  }
  .gen-workstation .gen-controls-sticky .field-label {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: .7rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--hf-text-3) !important;
  }
  .gen-workstation .gen-controls-sticky .segmented {
    max-height: 42px !important;
    overflow: auto hidden !important;
    flex-wrap: nowrap !important;
  }
  .gen-workstation .gen-controls-sticky .segmented label {
    white-space: nowrap !important;
  }
  .gen-workstation #adapter-indicator,
  .gen-workstation #model-schema-fields {
    margin-top: 8px !important;
  }
  .gen-workstation .gen-stage-panel,
  .gen-workstation #gen-form[data-active-pane="stage"] .gen-stage-panel,
  .gen-workstation #gen-form:not([data-active-pane]) .gen-stage-panel {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 4 !important;
    grid-template-rows: minmax(0, 1fr) minmax(86px, auto) !important;
    gap: 10px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }
  .gen-workstation .intent-brief {
    grid-row: 1 !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(270px, 1fr) auto auto !important;
    padding: 14px !important;
  }
  .gen-workstation .intent-brief textarea[name="body"] {
    min-height: 270px !important;
  }
  .gen-workstation .generation-inputs,
  .gen-workstation #gen-form[data-active-pane="stage"] .generation-inputs,
  .gen-workstation #gen-form:not([data-active-pane]) .generation-inputs {
    display: block !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    max-height: 150px !important;
    overflow: auto !important;
    padding: 10px !important;
    border: 1px dashed rgba(255,255,255,.13) !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.16) !important;
  }
  .gen-workstation .generation-inputs .authoring-region-head,
  .gen-workstation .generation-inputs details,
  .gen-workstation .generation-inputs > .field-group,
  .gen-workstation .generation-inputs #gen-cinema {
    display: none !important;
  }
  .gen-workstation #ref-slots {
    margin: 0 0 8px !important;
  }
  .gen-workstation #gen-dropzone {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }
  .gen-workstation #gen-drop-label {
    font-size: .84rem !important;
  }
  .gen-workstation #gen-drop-tiny {
    font-size: .68rem !important;
  }
  .gen-workstation #gen-form[data-active-pane="models"] .gen-controls-sticky {
    grid-row: 3 / 5 !important;
    max-height: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="models"] .gen-stage-panel {
    display: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .gen-controls-sticky {
    display: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .gen-stage-panel {
    grid-row: 3 / 5 !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .generation-inputs {
    display: block !important;
    grid-row: 1 / -1 !important;
    max-height: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="provider"] .gen-controls-sticky {
    display: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="provider"] .gen-stage-panel {
    grid-row: 3 / 5 !important;
  }
  .gen-workstation #gen-form[data-active-pane="output"] .gen-controls-sticky {
    display: none !important;
  }
  .gen-workstation .gen-run-tray {
    grid-row: 5 !important;
  }
  .gen-workstation .gen-prompt-head [data-workbench-pane-jump] {
    padding: 4px 8px !important;
    min-height: 28px !important;
  }
}

/* CREATE WORKSTATION V11 — desktop must read as an actual authoring console.
   Prompt / Setup+References / Run Check are simultaneously visible, no hidden setup scroll. */
@media (min-width: 1180px) {
  .gen-workstation {
    --cw-setup: clamp(360px, 24vw, 460px);
    --cw-inspector: clamp(330px, 21vw, 390px);
  }
  .gen-workstation > .grid > section > .card {
    min-height: 760px !important;
  }
  .gen-workstation #gen-form {
    grid-template-columns: minmax(660px, 1fr) var(--cw-setup) var(--cw-inspector) !important;
    grid-template-rows: 38px 46px minmax(0, 1fr) 72px !important;
    gap: 12px !important;
  }
  .gen-workstation .gen-workbench-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  .gen-workstation .tab-bar {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
  }
  .gen-workstation .gen-provider-rail {
    grid-column: 3 !important;
    grid-row: 2 / 4 !important;
    padding: 16px !important;
    overflow: auto !important;
  }
  .gen-workstation .gen-stage-panel,
  .gen-workstation #gen-form[data-active-pane="stage"] .gen-stage-panel,
  .gen-workstation #gen-form:not([data-active-pane]) .gen-stage-panel {
    display: contents !important;
  }
  .gen-workstation .intent-brief,
  .gen-workstation #gen-form[data-active-pane="stage"] .intent-brief,
  .gen-workstation #gen-form:not([data-active-pane]) .intent-brief {
    grid-column: 1 !important;
    grid-row: 3 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(360px, 1fr) auto auto !important;
    gap: 10px !important;
    padding: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(113,112,255,.22) !important;
    border-radius: 22px !important;
    background: radial-gradient(circle at 50% 0%, rgba(59,216,255,.08), transparent 44%), rgba(3,7,13,.55) !important;
  }
  .gen-workstation .intent-brief textarea[name="body"] {
    min-height: 360px !important;
    height: auto !important;
    resize: none !important;
    font-size: 1.04rem !important;
    line-height: 1.58 !important;
  }
  .gen-workstation .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="stage"] .gen-controls-sticky,
  .gen-workstation #gen-form:not([data-active-pane]) .gen-controls-sticky {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }
  .gen-workstation .gen-controls-sticky .field-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .gen-workstation .gen-controls-sticky .segmented {
    max-height: none !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
  .gen-workstation .gen-controls-sticky .segmented label {
    white-space: normal !important;
  }
  .gen-workstation .gen-controls-sticky #adapter-indicator {
    display: block;
  }
  .gen-workstation .generation-inputs,
  .gen-workstation #gen-form[data-active-pane="stage"] .generation-inputs,
  .gen-workstation #gen-form:not([data-active-pane]) .generation-inputs {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
    min-height: 132px !important;
    max-height: 210px !important;
    overflow: auto !important;
    margin-top: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.22) !important;
    transform: translateY(0) !important;
  }
  .gen-workstation .generation-inputs .authoring-region-head {
    display: block !important;
    margin: 0 0 8px !important;
  }
  .gen-workstation .generation-inputs .authoring-region-head h3 {
    font-size: .82rem !important;
  }
  .gen-workstation #ref-slots {
    margin: 0 0 8px !important;
  }
  .gen-workstation .gen-run-tray {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    grid-template-columns: minmax(240px, 1fr) minmax(260px, 420px) auto auto auto auto !important;
  }
  .gen-workstation #gen-form[data-active-pane="models"] .gen-controls-sticky {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    max-height: none !important;
    overflow: auto !important;
  }
  .gen-workstation #gen-form[data-active-pane="models"] .gen-controls-sticky .field-row {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
  .gen-workstation #gen-form[data-active-pane="models"] .intent-brief,
  .gen-workstation #gen-form[data-active-pane="models"] .generation-inputs {
    display: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .gen-controls-sticky {
    display: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .generation-inputs {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    align-self: stretch !important;
    max-height: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .intent-brief {
    display: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="provider"] .intent-brief,
  .gen-workstation #gen-form[data-active-pane="provider"] .generation-inputs,
  .gen-workstation #gen-form[data-active-pane="provider"] .gen-controls-sticky {
    opacity: .26 !important;
    pointer-events: none !important;
  }
  .gen-workstation #gen-form[data-active-pane="output"] .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="output"] .intent-brief,
  .gen-workstation #gen-form[data-active-pane="output"] .generation-inputs,
  .gen-workstation #gen-form[data-active-pane="output"] .gen-provider-rail,
  .gen-workstation #gen-form[data-active-pane="output"] .tab-bar {
    visibility: hidden !important;
  }
}

/* CREATE WORKSTATION V11.1 — remove desktop reference gutter noise. */
@media (min-width: 1180px) {
  .gen-workstation .generation-inputs,
  .gen-workstation #gen-form[data-active-pane="stage"] .generation-inputs,
  .gen-workstation #gen-form:not([data-active-pane]) .generation-inputs {
    min-height: 158px !important;
    max-height: 238px !important;
    overflow: hidden !important;
  }
  .gen-workstation .generation-inputs #gen-dropzone {
    min-height: 62px !important;
    margin-top: 8px !important;
  }
  .gen-workstation .generation-inputs #ref-slots .dropzone,
  .gen-workstation .generation-inputs #ref-slots label {
    min-height: 58px !important;
    padding: 9px 10px !important;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .generation-inputs {
    overflow: auto !important;
  }
}

/* CREATE WORKSTATION V12 — Run Check is a decision panel, not a receipt. */
.run-decision-panel {
  background: linear-gradient(180deg, rgba(14,16,20,.96), rgba(5,7,11,.96)) !important;
}
.run-decision-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.run-decision-head h3 {
  margin: 2px 0 0;
  color: var(--hf-text-1);
  font-size: 1rem;
  font-weight: 720;
}
.run-engine-card,
.run-status-card,
.run-block-list,
.run-plan-card {
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
}
.run-engine-card {
  padding: 12px !important;
  margin-bottom: 10px !important;
}
.run-engine-main {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.run-engine-main span,
.run-engine-grid span,
.run-block-list span,
.run-plan-card dt {
  color: var(--hf-text-4) !important;
  font-size: .68rem !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}
.run-engine-main b {
  color: var(--hf-text-1) !important;
  font-size: 1rem !important;
  line-height: 1.22 !important;
  overflow-wrap: anywhere;
}
.run-engine-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.run-engine-grid > div {
  padding: 8px 9px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.18) !important;
}
.run-engine-grid b {
  display: block;
  margin-top: 4px;
  color: var(--hf-text-1) !important;
  font-size: .94rem !important;
  text-align: left !important;
}
.run-status-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
}
.run-status-card b {
  color: var(--hf-text-1) !important;
}
.run-status-card span {
  color: var(--hf-text-2) !important;
  overflow-wrap: anywhere;
}
.run-block-list {
  display: grid !important;
  gap: 7px !important;
  margin: 0 0 10px !important;
  padding: 10px !important;
  list-style: none !important;
}
.run-block-list li {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.run-block-list b {
  color: var(--hf-text-2) !important;
  font-size: .78rem !important;
  text-align: left !important;
  overflow-wrap: anywhere;
}
.run-plan-card {
  margin: 0 !important;
  padding: 12px !important;
}
.run-plan-card dl {
  gap: 6px !important;
}
.run-plan-card dl div {
  grid-template-columns: 62px minmax(0, 1fr) !important;
}
.run-plan-card dd {
  color: var(--hf-text-2) !important;
  font-size: .78rem !important;
}
@media (min-width: 1180px) {
  .gen-workstation .run-decision-panel {
    padding: 14px !important;
    border-color: rgba(255,255,255,.1) !important;
  }
  .gen-workstation .gen-provider-summary > div {
    display: block !important;
  }
  .gen-workstation .run-plan-card {
    max-height: none !important;
  }
}

/* CREATE WORKSTATION V12.1 — keep legacy contract class, apply decision-panel skin by data attr. */
.gen-provider-rail[data-run-decision-panel="true"] {
  background: linear-gradient(180deg, rgba(14,16,20,.96), rgba(5,7,11,.96)) !important;
}
@media (min-width: 1180px) {
  .gen-workstation .gen-provider-rail[data-run-decision-panel="true"] {
    padding: 14px !important;
    border-color: rgba(255,255,255,.1) !important;
  }
}

/* CREATE WORKSTATION V13 — no fake mode tabs on desktop.
   Desktop Create is one authoring console, not an internal pane switcher. */
@media (min-width: 1180px) {
  .gen-workstation .gen-workbench-tabs {
    display: none !important;
  }
  .gen-workstation #gen-form {
    grid-template-rows: 46px minmax(0, 1fr) 72px !important;
  }
  .gen-workstation .tab-bar {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
  }
  .gen-workstation .gen-provider-rail {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
  }
  .gen-workstation .intent-brief,
  .gen-workstation #gen-form[data-active-pane="stage"] .intent-brief,
  .gen-workstation #gen-form:not([data-active-pane]) .intent-brief {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .gen-workstation .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="stage"] .gen-controls-sticky,
  .gen-workstation #gen-form:not([data-active-pane]) .gen-controls-sticky {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .gen-workstation .generation-inputs,
  .gen-workstation #gen-form[data-active-pane="stage"] .generation-inputs,
  .gen-workstation #gen-form:not([data-active-pane]) .generation-inputs {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .gen-workstation .gen-run-tray {
    grid-row: 3 !important;
  }
}

/* CREATE WORKSTATION V14 — real desktop responsiveness.
   Desktop validation targets: 1280, 1440, 1872. No horizontal clipping. */
@media (min-width: 1180px) and (max-width: 1539px) {
  .gen-workstation > .grid > section > .card {
    min-height: 760px !important;
  }
  .gen-workstation #gen-form {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px) !important;
    grid-template-rows: 44px minmax(0, 1fr) minmax(196px, auto) 70px !important;
    gap: 10px !important;
  }
  .gen-workstation .tab-bar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  .gen-workstation .intent-brief,
  .gen-workstation #gen-form[data-active-pane="stage"] .intent-brief,
  .gen-workstation #gen-form:not([data-active-pane]) .intent-brief {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }
  .gen-workstation .intent-brief textarea[name="body"] {
    min-height: 300px !important;
    font-size: .98rem !important;
  }
  .gen-workstation .production-brief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .gen-workstation .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="stage"] .gen-controls-sticky,
  .gen-workstation #gen-form:not([data-active-pane]) .gen-controls-sticky {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    max-height: min(48vh, 390px) !important;
    overflow: auto !important;
  }
  .gen-workstation .generation-inputs,
  .gen-workstation #gen-form[data-active-pane="stage"] .generation-inputs,
  .gen-workstation #gen-form:not([data-active-pane]) .generation-inputs {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    max-height: 210px !important;
    overflow: hidden !important;
  }
  .gen-workstation .gen-provider-rail {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, .9fr) minmax(260px, 1fr) minmax(260px, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    padding: 12px !important;
  }
  .gen-workstation .run-decision-head {
    grid-column: 1 !important;
    margin: 0 !important;
    align-self: start !important;
  }
  .gen-workstation .run-engine-card {
    grid-column: 1 !important;
    margin: 42px 0 0 !important;
  }
  .gen-workstation .run-status-card,
  .gen-workstation .run-block-list {
    grid-column: 2 !important;
  }
  .gen-workstation .run-status-card { margin: 0 !important; }
  .gen-workstation .run-block-list { margin: 0 !important; }
  .gen-workstation .run-plan-card {
    grid-column: 3 !important;
    margin: 0 !important;
  }
  .gen-workstation .gen-run-tray {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 360px) auto auto auto auto !important;
  }
}

@media (min-width: 1540px) {
  .gen-workstation #gen-form {
    grid-template-columns: minmax(660px, 1fr) var(--cw-setup) var(--cw-inspector) !important;
  }
}

/* CREATE WORKSTATION V15 — desktop breakpoint repair after visual QA.
   1280/1440 must keep a real writing canvas; the preflight strip must not steal row height. */
@media (min-width: 1180px) and (max-width: 1539px) {
  .gen-workstation > .grid > section > .card {
    height: calc(100dvh - 92px) !important;
    min-height: 760px !important;
  }
  .gen-workstation #gen-form {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px) !important;
    grid-template-rows: 44px minmax(360px, 1fr) 230px 70px !important;
    gap: 10px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .gen-workstation .intent-brief,
  .gen-workstation #gen-form[data-active-pane="stage"] .intent-brief,
  .gen-workstation #gen-form:not([data-active-pane]) .intent-brief {
    grid-row: 2 !important;
    min-height: 0 !important;
    height: 100% !important;
    grid-template-rows: auto minmax(190px, 1fr) auto auto !important;
    padding: 14px !important;
  }
  .gen-workstation .intent-brief textarea[name="body"] {
    min-height: 190px !important;
    line-height: 1.5 !important;
  }
  .gen-workstation .intent-brief .production-brief-grid,
  .gen-workstation .production-brief-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .gen-workstation .composer-prompt-tools {
    gap: 7px !important;
  }
  .gen-workstation .composer-prompt-tools .btn-sm {
    min-height: 30px !important;
    padding: 5px 10px !important;
  }
  .gen-workstation .production-prompt-ops {
    min-height: 42px !important;
    padding: 7px 10px !important;
  }
  .gen-workstation .gen-controls-sticky,
  .gen-workstation #gen-form[data-active-pane="stage"] .gen-controls-sticky,
  .gen-workstation #gen-form:not([data-active-pane]) .gen-controls-sticky {
    grid-row: 2 !important;
    max-height: calc(100% - 150px) !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 12px !important;
  }
  .gen-workstation .generation-inputs,
  .gen-workstation #gen-form[data-active-pane="stage"] .generation-inputs,
  .gen-workstation #gen-form:not([data-active-pane]) .generation-inputs {
    grid-row: 2 !important;
    min-height: 128px !important;
    max-height: 140px !important;
    overflow: hidden !important;
    padding: 10px !important;
  }
  .gen-workstation .gen-provider-rail {
    grid-row: 3 !important;
    min-height: 0 !important;
    height: 230px !important;
    align-self: stretch !important;
    grid-template-columns: minmax(230px, .85fr) minmax(280px, 1fr) minmax(260px, 1fr) !important;
    grid-template-rows: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
  }
  .gen-workstation .run-decision-head {
    min-height: 34px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }
  .gen-workstation .run-decision-head h3 {
    font-size: .92rem !important;
  }
  .gen-workstation .run-decision-head .btn-sm {
    min-height: 28px !important;
    padding: 4px 8px !important;
  }
  .gen-workstation .run-engine-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 9px !important;
    min-height: 120px !important;
    overflow: hidden !important;
  }
  .gen-workstation .run-engine-main {
    padding-bottom: 8px !important;
  }
  .gen-workstation .run-engine-main b {
    font-size: .9rem !important;
  }
  .gen-workstation .run-engine-grid {
    gap: 6px !important;
    margin-top: 8px !important;
  }
  .gen-workstation .run-engine-grid > div {
    padding: 7px 8px !important;
  }
  .gen-workstation .run-status-card,
  .gen-workstation .run-block-list,
  .gen-workstation .run-plan-card {
    min-height: 0 !important;
    max-height: 210px !important;
    overflow: hidden !important;
  }
  .gen-workstation .run-status-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    min-height: 38px !important;
  }
  .gen-workstation .run-status-card span {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    font-size: .82rem !important;
    line-height: 1.25 !important;
  }
  .gen-workstation .run-block-list {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    gap: 5px !important;
    overflow: auto !important;
  }
  .gen-workstation .run-plan-card {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: auto !important;
  }
  .gen-workstation .run-plan-card dl {
    gap: 4px !important;
  }
  .gen-workstation .gen-run-tray {
    grid-row: 4 !important;
    height: 70px !important;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 360px) auto auto auto auto !important;
    padding: 9px 12px !important;
  }
  .gen-workstation .gen-run-tray .btn-primary {
    min-height: 46px !important;
  }
}

@media (min-width: 1180px) and (max-width: 1320px) {
  .gen-workstation #gen-form {
    grid-template-columns: minmax(0, 1fr) 356px !important;
  }
  .gen-workstation .gen-provider-rail {
    grid-template-columns: minmax(210px, .8fr) minmax(250px, 1fr) minmax(230px, .9fr) !important;
  }
  .gen-workstation .gen-run-tray {
    grid-template-columns: minmax(160px, 1fr) minmax(210px, 360px) auto auto auto !important;
  }
  .gen-workstation .gen-run-tray .gen-keys {
    display: none !important;
  }
}

/* CREATE WORKSTATION V16 — remove duplicate provider-model noise.
   Selected model lives in the model picker; schema cannot open a second giant model list. */
@media (min-width: 1180px) {
  .gen-workstation #model-schema-fields {
    max-height: 132px !important;
    overflow: auto !important;
    padding: 8px 10px !important;
    margin-top: 8px !important;
  }
  .gen-workstation #model-schema-fields-body {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .gen-workstation #model-schema-fields-body > .t-caption {
    display: none !important;
  }
  .gen-workstation #model-schema-fields .field-label {
    font-size: .66rem !important;
    margin-bottom: 4px !important;
  }
  .gen-workstation #model-schema-fields .segmented-schema {
    max-height: 44px !important;
    overflow: auto hidden !important;
    flex-wrap: nowrap !important;
  }
  .gen-workstation #model-schema-fields .segmented-schema label {
    min-height: 30px !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
  }
  .gen-workstation .gen-controls-sticky .field-row {
    align-content: stretch !important;
  }
  .gen-workstation .gen-controls-sticky .segmented:not(.segmented-schema) {
    max-height: 84px !important;
    overflow: auto !important;
  }
  .gen-workstation .mc-toggle {
    width: 100% !important;
    margin-top: 4px !important;
    justify-content: flex-start !important;
  }
}

/* CREATE WORKSTATION V17 — video/music are real authoring lanes, not link/decor panes. */
.gen-workstation .gen-music-shell {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--hf-r-lg);
  border: 1px solid var(--hf-border-2);
  background: linear-gradient(145deg, rgba(14,18,30,.96), rgba(7,10,18,.98));
}
.gen-workstation .gen-music-shell[hidden] { display: none !important; }
.gen-workstation .music-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.gen-workstation .music-mode-switch label {
  min-width: 0;
  cursor: pointer;
}
.gen-workstation .music-mode-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gen-workstation .music-mode-switch span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--hf-border-1);
  background: rgba(255,255,255,.035);
  color: var(--hf-text-3);
  font-size: .82rem;
  font-weight: 650;
}
.gen-workstation .music-mode-switch input:checked + span {
  color: var(--hf-text-1);
  border-color: rgba(129,140,248,.65);
  background: rgba(129,140,248,.14);
}
.gen-workstation .music-author-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.gen-workstation .music-author-grid [hidden] { display: none !important; }
.gen-workstation .music-author-grid textarea {
  min-height: 140px;
}
.gen-workstation .music-run-contract {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.gen-workstation .music-run-contract > div {
  min-width: 0;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid var(--hf-border-1);
  background: rgba(255,255,255,.03);
}
.gen-workstation .music-run-contract b,
.gen-workstation .music-run-contract span {
  display: block;
}
.gen-workstation .music-run-contract b {
  color: var(--hf-text-1);
  font-size: .72rem;
  margin-bottom: 4px;
}
.gen-workstation .music-run-contract span {
  color: var(--hf-text-3);
  font-size: .76rem;
  line-height: 1.35;
}
.gen-workstation .music-jobs-list {
  display: grid;
  gap: 10px;
}
.gen-workstation .music-output-pane {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}
.gen-workstation .music-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gen-workstation .music-output-head b,
.gen-workstation .music-output-head span {
  display: block;
}
.gen-workstation .music-output-head b {
  color: var(--hf-text-1);
  font-size: .82rem;
}
.gen-workstation .music-output-head span {
  color: var(--hf-text-4);
  font-size: .72rem;
  margin-top: 2px;
}
.gen-workstation .music-empty-job {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(129,140,248,.28);
  color: var(--hf-text-3);
  background: rgba(129,140,248,.045);
}
.gen-workstation .music-empty-job b {
  color: var(--hf-text-1);
  font-size: .8rem;
}
.gen-workstation .music-empty-job span {
  color: var(--hf-text-4);
  font-size: .74rem;
}
.gen-workstation .music-jobs-list:has([id^="audio-job-"]) [data-music-empty-job] {
  display: none !important;
}
@media (max-width: 1440px) {
  .gen-workstation .music-run-contract { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gen-workstation .music-mode-switch,
  .gen-workstation .music-author-grid,
  .gen-workstation .music-run-contract { grid-template-columns: 1fr; }
}

/* CREATE WORKSTATION V18 — Suno-native music settings parity. */
.gen-workstation .music-suno-native {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr);
  gap: 8px;
  align-items: stretch;
}
.gen-workstation .music-suno-native [hidden] { display: none !important; }
.gen-workstation .music-check,
.gen-workstation .music-custom-sub label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--hf-border-1);
  background: rgba(255,255,255,.03);
  color: var(--hf-text-2);
  font-size: .82rem;
  font-weight: 620;
  cursor: pointer;
}
.gen-workstation .music-custom-sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.gen-workstation .music-custom-sub input {
  accent-color: var(--hf-accent);
}
@media (max-width: 900px) {
  .gen-workstation .music-suno-native,
  .gen-workstation .music-custom-sub { grid-template-columns: 1fr; }
}

/* CREATE WORKSTATION V19 — music mode must show Suno controls first-screen; hide image/video rails. */
@media (min-width: 1180px) {
  html[data-create-kind="music"] .gen-workstation #gen-form {
    grid-template-columns: minmax(520px, .95fr) minmax(560px, 1.25fr) !important;
  }
  html[data-create-kind="music"] .gen-workstation .tab-bar {
    grid-column: 1 / -1 !important;
  }
  html[data-create-kind="music"] .gen-workstation .gen-controls-sticky,
  html[data-create-kind="music"] .gen-workstation .generation-inputs,
  html[data-create-kind="music"] .gen-workstation .gen-provider-rail {
    display: none !important;
  }
  html[data-create-kind="music"] .gen-workstation .intent-brief,
  html[data-create-kind="music"] .gen-workstation #gen-form[data-active-pane="stage"] .intent-brief,
  html[data-create-kind="music"] .gen-workstation #gen-form:not([data-active-pane]) .intent-brief {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-rows: auto minmax(170px, 220px) auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html[data-create-kind="music"] .gen-workstation .intent-brief textarea[name="body"] {
    min-height: 170px !important;
    height: 100% !important;
  }
  html[data-create-kind="music"] .gen-workstation .intent-brief .production-brief-grid,
  html[data-create-kind="music"] .gen-workstation .intent-brief .production-prompt-ops {
    display: none !important;
  }
  html[data-create-kind="music"] .gen-workstation #create-music {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: stretch !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
  }
  html[data-create-kind="music"] .gen-workstation .gen-run-tray {
    grid-column: 1 / -1 !important;
  }
}

/* CREATE WORKSTATION V19.1 — bind music layout to form state too; query-param init can race html attr. */
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"] .gen-controls-sticky,
  .gen-workstation #gen-form[data-kind="music"] .generation-inputs,
  .gen-workstation #gen-form[data-kind="music"] .gen-provider-rail {
    display: none !important;
  }
  .gen-workstation #gen-form[data-kind="music"] {
    grid-template-columns: minmax(520px, .95fr) minmax(560px, 1.25fr) !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .intent-brief {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-rows: auto minmax(170px, 220px) auto !important;
    height: auto !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .intent-brief textarea[name="body"] {
    min-height: 170px !important;
    height: 100% !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .intent-brief .production-brief-grid,
  .gen-workstation #gen-form[data-kind="music"] .intent-brief .production-prompt-ops {
    display: none !important;
  }
  .gen-workstation #gen-form[data-kind="music"] #create-music {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: stretch !important;
    overflow: auto !important;
  }
}

/* CREATE WORKSTATION V20 — music is a desktop authoring surface, not a floating tray overlay. */
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"] {
    grid-template-rows: 38px minmax(520px, 1fr) 72px !important;
    align-content: start !important;
    align-items: stretch !important;
    padding-bottom: 0 !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .gen-stage-panel,
  .gen-workstation #gen-form[data-kind="music"] #gen-form[data-active-pane="stage"] .gen-stage-panel,
  .gen-workstation #gen-form[data-kind="music"] #gen-form:not([data-active-pane]) .gen-stage-panel {
    display: contents !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .intent-brief,
  .gen-workstation #gen-form[data-kind="music"] #create-music {
    align-self: stretch !important;
    margin-top: 0 !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .intent-brief {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    align-content: start !important;
    align-items: start !important;
    gap: 10px !important;
    overflow: hidden !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .intent-brief .authoring-region-head {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .intent-brief textarea[name="body"] {
    flex: 1 1 auto !important;
    width: 100% !important;
    align-self: stretch !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .composer-prompt-tools {
    flex: 0 0 auto !important;
    width: 100% !important;
    align-self: start !important;
    align-items: center !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .composer-prompt-tools .btn,
  .gen-workstation #gen-form[data-kind="music"] .composer-prompt-tools .btn-sm {
    height: auto !important;
    min-height: 32px !important;
    max-height: 36px !important;
    align-items: center !important;
  }
  .gen-workstation #gen-form[data-kind="music"] #create-music {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-content: start !important;
    gap: 12px !important;
    max-height: none !important;
  }
  .gen-workstation #gen-form[data-kind="music"] > .composer-flow,
  .gen-workstation #gen-form[data-kind="music"] > .gen-workbench-tabs {
    display: none !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .tab-bar {
    grid-row: 1 !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .intent-brief,
  html[data-create-kind="music"] .gen-workstation #gen-form[data-kind="music"][data-active-pane="stage"] .intent-brief,
  html[data-create-kind="music"] .gen-workstation #gen-form[data-kind="music"]:not([data-active-pane]) .intent-brief,
  .gen-workstation #gen-form[data-kind="music"] #create-music {
    grid-row: 2 !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .gen-run-tray,
  .gen-workstation #gen-form[data-kind="music"] .gen-actions {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    z-index: auto !important;
    width: auto !important;
    max-width: none !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .gen-run-tray {
    grid-template-columns: minmax(240px, 1fr) minmax(320px, 520px) auto auto auto auto !important;
  }
}

/* CREATE WORKSTATION V21 — music tab must read as a Suno composer, not generic prompt+settings. */
.gen-workstation .music-quick-brief {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gen-workstation .music-quick-brief[hidden] { display: none !important; }
.gen-workstation .music-quick-brief .btn {
  min-height: 32px;
  border-color: rgba(129,140,248,.22);
  background: rgba(129,140,248,.08);
}
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"] .intent-brief {
    padding: 16px !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(59,216,255,.10), transparent 38%),
      linear-gradient(180deg, rgba(4,13,18,.82), rgba(3,7,12,.78)) !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .intent-brief textarea[name="body"] {
    font-size: 1rem !important;
    line-height: 1.58 !important;
    border-radius: 18px !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-quick-brief,
  .gen-workstation #gen-form[data-kind="music"] .composer-prompt-tools {
    flex: 0 0 auto !important;
  }
  .gen-workstation #gen-form[data-kind="music"] #create-music .gen-prompt-head {
    min-height: 0 !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-mode-switch span {
    min-height: 38px !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-suno-native {
    grid-template-columns: 1fr !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-author-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-author-grid .field-group {
    margin: 0 !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-author-grid textarea {
    min-height: 132px !important;
    resize: vertical !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-run-contract {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-top: 2px !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-run-contract > div {
    min-height: 72px !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-output-pane {
    flex: 1 1 auto !important;
    overflow: auto !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-jobs-list {
    align-content: start !important;
  }
}

/* CREATE WORKSTATION V24 — Suno composer controls: no explainer cards, direct authoring controls. */
.gen-workstation .music-submit-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(129,140,248,.24);
  background:
    linear-gradient(90deg, rgba(59,216,255,.08), rgba(129,140,248,.10)),
    rgba(255,255,255,.025);
}
.gen-workstation .music-submit-status {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.gen-workstation .music-submit-status span {
  color: var(--hf-text-3);
  font-size: .72rem;
  letter-spacing: .01em;
}
.gen-workstation .music-submit-status b {
  color: var(--hf-text-1);
  font-size: .82rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gen-workstation .music-inline-submit {
  flex: 0 0 auto;
  min-width: 160px;
  min-height: 40px;
  justify-content: center;
}
.gen-workstation .music-style-chipbank,
.gen-workstation .music-lyric-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.gen-workstation .music-style-chipbank button,
.gen-workstation .music-lyric-toolbar button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--hf-text-3);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1;
  padding: 7px 9px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease;
}
.gen-workstation .music-style-chipbank button:hover,
.gen-workstation .music-lyric-toolbar button:hover {
  border-color: rgba(129,140,248,.55);
  background: rgba(129,140,248,.12);
  color: var(--hf-text-1);
  transform: translateY(-1px);
}
.gen-workstation .music-lyrics-field textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"] .music-submit-strip {
    flex: 0 0 auto !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-output-pane {
    min-height: 128px !important;
  }
}
@media (max-width: 720px) {
  .gen-workstation .music-submit-strip {
    display: grid;
  }
  .gen-workstation .music-inline-submit {
    width: 100%;
  }
}

/* CREATE WORKSTATION V25 — SFX prompt is a first-class input, not hidden in song description. */
.gen-workstation .music-sfx-field {
  grid-column: 1 / -1;
}
.gen-workstation .music-sfx-field textarea {
  min-height: 138px;
  font-size: .94rem;
  line-height: 1.5;
}
.gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .music-author-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr) !important;
}
.gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .music-style-chipbank,
.gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .music-lyric-toolbar {
  display: none !important;
}

/* CREATE WORKSTATION V26 — SFX is a controllable sound brief, not a single vague text box. */
.gen-workstation .music-sfx-builder {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(110px, .45fr) minmax(180px, 1fr) minmax(240px, 1.2fr) minmax(220px, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(59,216,255,.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(59,216,255,.055), rgba(129,140,248,.045)),
    rgba(255,255,255,.018);
}
.gen-workstation .music-sfx-builder .field-group {
  margin: 0;
}
.gen-workstation .music-sfx-texture-field,
.gen-workstation .music-sfx-avoid-field {
  min-width: 0;
}
.gen-workstation .music-sfx-chipbank {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.gen-workstation .music-sfx-chipbank button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--hf-text-3);
  font-size: .72rem;
  font-weight: 680;
  line-height: 1;
  padding: 7px 9px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease;
}
.gen-workstation .music-sfx-chipbank button:hover {
  border-color: rgba(59,216,255,.55);
  background: rgba(59,216,255,.11);
  color: var(--hf-text-1);
  transform: translateY(-1px);
}
.gen-workstation .music-sfx-preview {
  grid-column: 1 / -1;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--hf-text-2);
  font-size: .78rem;
  line-height: 1.45;
  white-space: normal;
}
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .music-author-grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  }
}
@media (max-width: 980px) {
  .gen-workstation .music-sfx-builder {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .gen-workstation .music-sfx-builder {
    grid-template-columns: 1fr;
  }
}

/* CREATE WORKSTATION V27 — sound mode gives width to the SFX workbench and demotes optional notes. */
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] {
    grid-template-columns: minmax(340px, .42fr) minmax(780px, 1.58fr) !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .intent-brief {
    padding: 14px !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .intent-brief textarea[name="body"] {
    flex: 0 0 164px !important;
    min-height: 128px !important;
    max-height: 180px !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .composer-prompt-tools {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .composer-prompt-tools [data-create-assemble-prompt],
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .composer-prompt-tools .btn[onclick^="aiAssist"] {
    display: none !important;
  }
}

/* CREATE WORKSTATION V28 — music modes have one authoring surface and one submit button. */
.gen-workstation .music-template-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gen-workstation .music-template-row .btn {
  min-height: 32px;
  border-color: rgba(129,140,248,.22);
  background: rgba(129,140,248,.08);
}
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] {
    grid-template-columns: minmax(960px, 1fr) !important;
    grid-template-rows: 38px minmax(560px, 1fr) !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .intent-brief,
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .gen-run-tray,
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .gen-actions {
    display: none !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] #create-music {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .music-output-pane {
    min-height: 150px !important;
  }
}

/* CREATE WORKSTATION V29 — BGM and custom lyrics are also real Suno workbenches. */
.gen-workstation .music-main-prompt-field,
.gen-workstation .music-brief-builder {
  grid-column: 1 / -1;
}
.gen-workstation .music-main-prompt-field textarea {
  min-height: 130px;
  font-size: .94rem;
  line-height: 1.5;
}
.gen-workstation .music-brief-builder {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(129,140,248,.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(129,140,248,.055), rgba(59,216,255,.035)),
    rgba(255,255,255,.018);
}
.gen-workstation .music-brief-builder .field-group {
  margin: 0;
}
.gen-workstation .music-final-preview {
  grid-column: 1 / -1;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--hf-text-2);
  font-size: .78rem;
  line-height: 1.45;
}
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"]:not([data-music-mode="sound"]) {
    grid-template-columns: minmax(960px, 1fr) !important;
    grid-template-rows: 38px minmax(560px, 1fr) !important;
  }
  .gen-workstation #gen-form[data-kind="music"]:not([data-music-mode="sound"]) .intent-brief,
  .gen-workstation #gen-form[data-kind="music"]:not([data-music-mode="sound"]) .gen-run-tray,
  .gen-workstation #gen-form[data-kind="music"]:not([data-music-mode="sound"]) .gen-actions {
    display: none !important;
  }
  .gen-workstation #gen-form[data-kind="music"]:not([data-music-mode="sound"]) #create-music {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="simple"] .music-author-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-author-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-lyrics-field textarea {
    min-height: 210px !important;
  }
}
@media (max-width: 980px) {
  .gen-workstation .music-brief-builder {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .gen-workstation .music-brief-builder {
    grid-template-columns: 1fr;
  }
}

/* CREATE WORKSTATION V30 — custom lyrics must keep submit visible on desktop. */
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"] #create-music {
    max-height: calc(100dvh - 176px) !important;
    overflow: auto !important;
    padding-right: 6px !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .music-submit-strip {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 12 !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 -18px 30px rgba(0,0,0,.26) !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-main-prompt-field textarea {
    min-height: 108px !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-lyrics-field textarea {
    min-height: 160px !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-brief-builder {
    grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
    padding: 8px !important;
  }
}

/* CREATE WORKSTATION V31 — video shot composer + real output reuse + music custom overlap fix. */
.gen-workstation .video-shot-composer {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(59,216,255,.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(59,216,255,.08), transparent 36%),
    linear-gradient(135deg, rgba(129,140,248,.045), rgba(255,255,255,.014));
}
.gen-workstation .video-shot-composer[hidden] { display: none !important; }
.gen-workstation .video-shot-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) repeat(2, minmax(170px, .75fr));
  gap: 10px;
  align-items: start;
}
.gen-workstation .video-shot-scene {
  grid-row: span 2;
}
.gen-workstation .video-shot-scene textarea {
  min-height: 146px;
  resize: vertical;
}
.gen-workstation .video-final-preview {
  grid-column: 2 / -1;
  min-height: 54px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--hf-text-2);
  font-size: .78rem;
  line-height: 1.45;
}
.gen-workstation .result-reuse-card {
  width: min(360px, 72vw);
  min-width: 260px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: rgba(255,255,255,.026);
  text-align: left;
}
.gen-workstation .result-reuse-card.is-empty {
  display: block;
}
.gen-workstation .result-reuse-preview {
  width: 82px;
  height: 82px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
  display: grid;
  place-items: center;
  color: var(--hf-text-3);
  font-size: .72rem;
}
.gen-workstation .result-reuse-preview img,
.gen-workstation .result-reuse-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gen-workstation .result-reuse-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gen-workstation .result-reuse-meta b {
  font-size: .76rem;
  color: var(--hf-text-1);
}
.gen-workstation .result-reuse-meta em {
  min-height: 28px;
  font-style: normal;
  color: var(--hf-text-3);
  font-size: .72rem;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.gen-workstation .result-reuse-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gen-workstation .result-reuse-actions button,
.gen-workstation .result-reuse-actions a {
  padding: 4px 7px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: var(--hf-text-2);
  font-size: .68rem;
  line-height: 1;
}
.gen-workstation .result-reuse-actions button:hover,
.gen-workstation .result-reuse-actions a:hover {
  border-color: rgba(129,140,248,.42);
  color: var(--hf-text-1);
}
.gen-workstation .result-audio-glyph {
  font-size: 1.65rem;
  color: rgba(199,210,254,.9);
}
.gen-workstation .result-reuse-audio {
  display: grid;
  gap: 5px;
}
.gen-workstation .result-reuse-audio span {
  color: var(--hf-text-2);
  font-size: .72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gen-workstation .result-reuse-audio small {
  color: var(--hf-text-4);
  font-size: .68rem;
}
.gen-workstation .result-reuse-audio audio {
  width: 100%;
  height: 30px;
}
.job-audio-result {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--hf-border-1);
  border-radius: 12px;
  background: rgba(255,255,255,.026);
}
.job-audio-cover {
  width: 74px;
  height: 74px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hf-border-1);
  background: rgba(0,0,0,.22);
  display: grid;
  place-items: center;
  color: rgba(199,210,254,.9);
  font-size: 1.45rem;
}
.job-audio-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.job-audio-meta {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.job-audio-meta b {
  color: var(--hf-text-1);
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-audio-meta span {
  color: var(--hf-text-4);
  font-size: .68rem;
}
.job-audio-meta audio {
  width: 100%;
  height: 32px;
}
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"] #create-music {
    padding-bottom: 92px !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-author-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    align-items: start !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-main-prompt-field {
    grid-column: 1 / 7 !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-brief-builder {
    grid-column: 7 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-style-field {
    grid-column: 1 / 6 !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-title-field {
    grid-column: 6 / 9 !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-negative-field {
    grid-column: 9 / 11 !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-model-field {
    grid-column: 11 / -1 !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-lyrics-field,
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-bgm-prompt-field {
    grid-column: 1 / -1 !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-main-prompt-field textarea {
    min-height: 96px !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-lyrics-field textarea,
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-bgm-prompt-field textarea {
    min-height: 132px !important;
  }
  .gen-workstation #gen-form[data-kind="video"] .intent-brief {
    min-height: 0 !important;
  }
  .gen-workstation #gen-form[data-kind="video"] .intent-brief textarea[name="body"] {
    min-height: 170px !important;
  }
}
@media (max-width: 980px) {
  .gen-workstation .video-shot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .gen-workstation .video-shot-scene,
  .gen-workstation .video-final-preview {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .gen-workstation .video-shot-grid,
  .gen-workstation .result-reuse-card {
    grid-template-columns: 1fr;
  }
  .gen-workstation .result-reuse-preview {
    width: 100%;
    height: 140px;
  }
}

/* CREATE WORKSTATION V33 — Output is a full review/reuse pane; audio cards must not be clipped. */
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-active-pane="output"] + .gen-history-dock.results-reuse-panel {
    display: grid !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 102px !important;
    bottom: 82px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 540px !important;
    padding: 18px !important;
    overflow: hidden !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  .gen-workstation #gen-form[data-active-pane="output"] + .gen-history-dock .gen-history-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 12px !important;
    align-content: start !important;
    overflow: auto !important;
    min-height: 0 !important;
  }
  .gen-workstation #gen-form[data-active-pane="output"] + .gen-history-dock .result-reuse-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 138px !important;
    align-items: start !important;
  }
  .gen-workstation #gen-form[data-active-pane="output"] + .gen-history-dock .result-reuse-preview {
    width: 96px !important;
    height: 96px !important;
  }
}

/* CREATE WORKSTATION V31.1 — custom music metadata must sit before lyrics; sticky run bar must not hide controls. */
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-main-prompt-field { order: 1; }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-brief-builder { order: 2; }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-style-field,
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-title-field,
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-negative-field,
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-model-field { order: 3; }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-lyrics-field,
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-bgm-prompt-field { order: 4; }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-lyrics-field textarea,
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-bgm-prompt-field textarea {
    min-height: 116px !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-author-grid {
    padding-bottom: 18px !important;
  }
}

/* CREATE WORKSTATION V32 — music run control belongs in the authoring flow, not over the fields. */
.gen-workstation .music-submit-strip {
  grid-column: 1 / -1;
}
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"] .music-submit-strip {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-submit-strip { order: 4; }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-lyrics-field,
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="custom"] .music-bgm-prompt-field { order: 5; }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .music-sfx-field { order: 1; }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .music-sfx-builder { order: 2; }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .music-title-field { order: 3; }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="sound"] .music-submit-strip { order: 4; }
  .gen-workstation #gen-form[data-kind="music"][data-music-mode="simple"] .music-submit-strip { order: 6; }
}

/* CREATE WORKSTATION V32.1 — video shot composer must fit first desktop viewport. */
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="video"] .intent-brief textarea[name="body"] {
    min-height: 300px !important;
    height: 300px !important;
  }
  .gen-workstation #gen-form[data-kind="video"] .video-shot-composer {
    padding: 10px !important;
  }
  .gen-workstation #gen-form[data-kind="video"] .video-shot-grid {
    gap: 8px !important;
  }
  .gen-workstation #gen-form[data-kind="video"] .video-shot-scene textarea {
    min-height: 92px !important;
    height: 92px !important;
  }
  .gen-workstation #gen-form[data-kind="video"] .video-final-preview {
    min-height: 40px !important;
  }
}

/* CREATE WORKSTATION V32.2 — video lane uses the shot composer, not duplicate generic brief rows. */
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="video"] .production-brief-grid {
    display: none !important;
  }
  .gen-workstation #gen-form[data-kind="video"] .intent-brief textarea[name="body"] {
    min-height: 255px !important;
    height: 255px !important;
  }
}

/* CREATE WORKSTATION V32.3 — video primary canvas compact enough for full shot controls. */
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="video"] .intent-brief textarea[name="body"] {
    min-height: 205px !important;
    height: 205px !important;
  }
}

/* CREATE WORKSTATION V32.4 — video lane removes generic prompt utilities below the shot tool. */
@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="video"] .composer-prompt-tools,
  .gen-workstation #gen-form[data-kind="video"] .production-prompt-ops {
    display: none !important;
  }
  .gen-workstation #gen-form[data-kind="video"] .intent-brief {
    grid-template-rows: auto 205px auto !important;
  }
}

/* CREATE WORKSTATION V33 — right rail is the latest run feed, not a preflight card. */
.gen-workstation .gen-provider-rail[data-create-feed-rail="true"] {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
  border-color: rgba(113,112,255,0.18) !important;
  background:
    radial-gradient(360px 220px at 100% -8%, rgba(113,112,255,0.2), transparent 62%),
    linear-gradient(180deg, rgba(12,15,22,.96), rgba(5,7,11,.96)) !important;
}

.gen-workstation .create-feed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.gen-workstation .create-feed-head h3 {
  margin: 2px 0 3px;
  color: var(--hf-text-1);
  font-size: .98rem;
  line-height: 1.2;
  letter-spacing: -0.18px;
  font-weight: 640;
}

.gen-workstation .create-feed-head p {
  margin: 0;
  color: var(--hf-text-4);
  font-size: .74rem;
  line-height: 1.35;
}

.gen-workstation .create-feed-head .btn {
  flex: 0 0 auto;
}

.gen-workstation .create-feed-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.gen-workstation .create-feed-stats > div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
}

.gen-workstation .create-feed-stats span {
  display: block;
  color: var(--hf-text-4);
  font-size: .66rem;
  line-height: 1.1;
}

.gen-workstation .create-feed-stats b {
  display: block;
  margin-top: 5px;
  color: var(--hf-text-1);
  font-size: 1.04rem;
  line-height: 1;
  font-weight: 640;
}

.gen-workstation .gen-provider-rail[data-create-feed-rail="true"] #jobs-list,
.gen-workstation .create-feed-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
  scrollbar-width: thin;
}

.gen-workstation .create-feed-list > .card,
.gen-workstation .create-feed-list > [id^="job-card-"] {
  width: 100% !important;
  min-width: 0 !important;
  padding: 11px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(0,0,0,0.18) !important;
  box-shadow: none !important;
}

.gen-workstation .create-feed-list .card:hover,
.gen-workstation .create-feed-list [id^="job-card-"]:hover {
  transform: none !important;
  border-color: rgba(113,112,255,0.32) !important;
}

.gen-workstation .create-feed-list .line-clamp-3 {
  -webkit-line-clamp: 2 !important;
}

.gen-workstation .create-feed-list .job-steps {
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.gen-workstation .create-feed-list .output-carousel {
  max-height: none !important;
}

.gen-workstation .create-feed-list video,
.gen-workstation .create-feed-list img.w-full {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 280px !important;
  object-fit: contain !important;
  margin-inline: auto !important;
  background: rgba(0,0,0,0.32) !important;
}

.gen-workstation .create-feed-list .job-actions {
  flex-wrap: wrap !important;
}

.gen-workstation .create-feed-empty {
  padding: 14px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
}

.gen-workstation .create-feed-empty b {
  display: block;
  color: var(--hf-text-2);
  font-size: .84rem;
}

.gen-workstation .create-feed-empty span {
  display: block;
  margin-top: 5px;
  color: var(--hf-text-4);
  font-size: .74rem;
  line-height: 1.45;
}

.gen-workstation .create-preflight-buffer[hidden] {
  display: none !important;
}

@media (min-width: 1180px) {
  .gen-workstation .gen-provider-rail[data-create-feed-rail="true"] {
    position: sticky !important;
    top: 0 !important;
    max-height: 100% !important;
  }
  .gen-workstation #gen-form[data-active-pane="output"] .gen-provider-rail[data-create-feed-rail="true"],
  .gen-workstation #gen-form[data-active-pane="provider"] .gen-provider-rail[data-create-feed-rail="true"] {
    display: grid !important;
  }
  .gen-workstation #gen-form[data-kind="music"] .gen-provider-rail[data-create-feed-rail="true"] {
    display: none !important;
  }
}

@media (max-width: 1179px) {
  .gen-workstation .gen-provider-rail[data-create-feed-rail="true"] {
    max-height: min(70dvh, 720px);
  }
}

/* CREATE WORKSTATION V34 — Seedance references get a real attachment board; result media keeps source aspect ratio. */
.gen-workstation .seedance-ref-board[hidden],
.gen-workstation .seedance-dropzone[hidden] {
  display: none !important;
}

.gen-workstation .seedance-ref-board {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(125,211,252,0.12);
  border-radius: 20px;
  background:
    radial-gradient(240px 120px at 8% 0%, rgba(125,211,252,0.11), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
}

.gen-workstation .seedance-ref-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.gen-workstation .seedance-ref-kicker {
  display: block;
  margin-bottom: 3px;
  color: rgba(125,211,252,0.86);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gen-workstation .seedance-ref-head h3 {
  margin: 0;
  color: var(--hf-text-1);
  font-size: .92rem;
  line-height: 1.2;
  letter-spacing: -0.14px;
}

.gen-workstation .seedance-ref-head p {
  margin: 5px 0 0;
  color: var(--hf-text-4);
  font-size: .72rem;
  line-height: 1.38;
}

.gen-workstation .seedance-ref-badge {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid rgba(125,211,252,0.18);
  border-radius: 999px;
  background: rgba(125,211,252,0.07);
  color: var(--hf-text-3);
  font-size: .64rem;
  white-space: nowrap;
}

.gen-workstation .seedance-ref-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.gen-workstation .seedance-ref-lanes > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 13px;
  background: rgba(0,0,0,0.18);
}

.gen-workstation .seedance-ref-lanes b,
.gen-workstation .seedance-ref-lanes span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gen-workstation .seedance-ref-lanes b {
  color: var(--hf-text-2);
  font-size: .68rem;
  font-weight: 680;
}

.gen-workstation .seedance-ref-lanes span {
  margin-top: 3px;
  color: var(--hf-text-4);
  font-size: .62rem;
}

.gen-workstation .seedance-ref-summary[hidden] {
  display: none !important;
}

.gen-workstation .seedance-ref-summary {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(125,211,252,0.15);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(125,211,252,0.07), rgba(255,255,255,0.026)),
    rgba(0,0,0,0.18);
}

.gen-workstation .seedance-ref-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gen-workstation .seedance-ref-summary-head b {
  color: var(--hf-text-1);
  font-size: .76rem;
}

.gen-workstation .seedance-ref-summary-head span {
  color: var(--hf-text-4);
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
}

.gen-workstation .seedance-ref-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}

.gen-workstation .seedance-ref-summary-list .dz-file-preview {
  background: rgba(0,0,0,0.2);
}

.dropzone .dz-source {
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(186,230,253,0.92);
}

.gen-workstation .seedance-dropzone {
  min-height: 108px !important;
  max-height: none !important;
  display: grid !important;
  place-items: center !important;
  gap: 4px !important;
  padding: 15px !important;
  border-radius: 18px !important;
  border-color: rgba(125,211,252,0.28) !important;
  background:
    linear-gradient(135deg, rgba(125,211,252,0.08), rgba(113,112,255,0.05)),
    rgba(0,0,0,0.16) !important;
  overflow: visible !important;
}

.gen-workstation .seedance-dropzone .seedance-drop-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid rgba(125,211,252,0.22);
  background: rgba(125,211,252,0.08);
  color: rgba(186,230,253,0.98);
  font-size: 1.1rem;
  line-height: 1;
}

.gen-workstation .seedance-dropzone #gen-drop-label {
  color: var(--hf-text-1);
  font-weight: 650;
}

.gen-workstation .seedance-dropzone .dz-tiny {
  max-width: 42rem;
  margin: 0 auto;
  color: var(--hf-text-4);
  line-height: 1.4;
}

.gen-workstation .seedance-dropzone .dz-files {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.gen-workstation .seedance-dropzone .dz-file {
  border-radius: 12px;
  background: rgba(255,255,255,0.045);
}

.gen-workstation .result-reuse-preview img,
.gen-workstation .result-reuse-preview video {
  object-fit: contain !important;
  background: rgba(0,0,0,0.32);
}

@media (min-width: 1180px) {
  .gen-workstation .generation-inputs .seedance-ref-board {
    max-height: 238px;
    overflow-y: auto;
  }
  .gen-workstation #gen-form[data-active-pane="refs"] .generation-inputs .seedance-ref-board {
    max-height: none;
  }
  .gen-workstation #gen-form[data-kind="video"] .generation-inputs .seedance-ref-board {
    max-height: 320px;
  }
}

@media (max-width: 760px) {
  .gen-workstation .seedance-ref-head {
    display: grid;
  }
  .gen-workstation .seedance-ref-badge {
    width: fit-content;
  }
  .gen-workstation .seedance-ref-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* CREATE WORKSTATION V35 — do not clip the Seedance reference board inside the compact stage well. */
@media (min-width: 1180px) {
  .gen-workstation .generation-inputs,
  .gen-workstation #gen-form[data-active-pane="stage"] .generation-inputs,
  .gen-workstation #gen-form:not([data-active-pane]) .generation-inputs {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .gen-workstation #gen-form[data-kind="image"] .generation-inputs,
  .gen-workstation #gen-form[data-kind="video"] .generation-inputs {
    max-height: min(38vh, 360px) !important;
  }

  .gen-workstation .generation-inputs .seedance-ref-board {
    box-sizing: border-box;
    max-height: none !important;
    overflow: visible !important;
  }

  .gen-workstation .generation-inputs .seedance-dropzone {
    min-height: 88px !important;
    padding: 12px !important;
  }
}

/* CREATE WORKSTATION V36 — prompt-integrated setup/reference grid. */
.gen-workstation .prompt-under-grid {
  display: grid;
  min-width: 0;
  gap: 12px;
}

@media (min-width: 1180px) {
  html:has(.gen-workstation),
  body:has(.gen-workstation) {
    overflow: auto !important;
  }

  .gen-workstation > .grid > section > .card {
    height: auto !important;
    min-height: calc(100dvh - 92px) !important;
  }

  .gen-workstation > .grid > section > .card > div {
    height: auto !important;
    min-height: calc(100dvh - 124px) !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] {
    grid-template-columns: minmax(780px, 1fr) var(--cw-right) !important;
    grid-template-rows: auto 72px !important;
    gap: 12px !important;
    height: auto !important;
    min-height: calc(100dvh - 150px) !important;
    align-content: start !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .gen-workbench-tabs,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .composer-flow,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .gen-rail-handle {
    display: none !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .gen-stage-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 14px !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .gen-stage-chrome,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .mode-briefs {
    display: none !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .gen-provider-rail[data-create-feed-rail="true"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    align-self: start !important;
    height: calc(100dvh - 164px) !important;
    max-height: calc(100dvh - 164px) !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .gen-run-tray {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .intent-brief {
    grid-row: 1 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(180px, 1fr) auto auto !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .intent-brief textarea[name="body"] {
    min-height: 180px !important;
    height: auto !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"][data-kind="video"] .intent-brief {
    grid-template-rows: auto minmax(145px, 1fr) auto !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"][data-kind="video"] .intent-brief textarea[name="body"] {
    min-height: 145px !important;
    height: auto !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid {
    grid-row: 2 !important;
    grid-template-columns: minmax(300px, .92fr) minmax(380px, 1.08fr);
    align-items: stretch;
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid > .gen-controls-sticky,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid > .generation-inputs {
    position: static !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid > .gen-controls-sticky {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, auto) auto auto;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(220px 120px at 0% 0%, rgba(113,112,255,0.12), transparent 62%),
      rgba(255,255,255,0.026) !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid > .generation-inputs {
    display: grid !important;
    gap: 9px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overscroll-behavior: auto !important;
    scrollbar-width: auto !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .tab-bar {
    grid-column: auto !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: auto !important;
    padding: 4px !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .tab-bar .tab-item {
    justify-content: center !important;
    min-height: 36px !important;
    padding: 7px 8px !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .composer-mode-card {
    display: none !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .run-setup-head {
    margin: 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .gen-controls-sticky .field-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .gen-controls-sticky .field-group {
    min-width: 0 !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .gen-controls-sticky .segmented {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid #model-schema-fields {
    margin-top: 0 !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .generation-inputs .authoring-region-head,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .generation-inputs > details,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .generation-inputs > .field-group,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .generation-inputs #gen-cinema {
    display: none !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid #ref-slots {
    display: block !important;
    margin: 0 !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid #ref-slots > div {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 7px !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid #ref-slots .dropzone,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid #ref-slots label {
    min-height: 72px !important;
    padding: 8px !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-ref-board {
    display: grid !important;
    gap: 8px !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-ref-head {
    align-items: center;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-ref-head p,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-ref-badge {
    display: none !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-ref-lanes,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-ref-summary-list,
  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-dropzone .dz-files {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-ref-lanes > div {
    padding: 7px !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-ref-summary {
    padding: 8px !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-dropzone {
    min-height: 72px !important;
    max-height: none !important;
    padding: 10px !important;
    place-items: center !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .seedance-dropzone .seedance-drop-icon {
    width: 24px;
    height: 24px;
    border-radius: 9px;
    font-size: .9rem;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .dropzone .dz-file-preview {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: 6px !important;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .dropzone .dz-thumb {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .gen-workstation #gen-form[data-prompt-integrated="true"] .prompt-under-grid .dropzone .dz-sub {
    flex-wrap: wrap;
    gap: 4px;
  }
}

@media (max-width: 1179px) {
  .gen-workstation .prompt-under-grid {
    grid-template-columns: 1fr;
  }
}

/* CREATE WORKSTATION V37 — setup left of prompt; references only under the prompt row. */
.gen-workstation .prompt-main-grid {
  display: grid;
  min-width: 0;
  gap: 12px;
}

@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid {
    grid-row: 1 !important;
    grid-template-columns: minmax(310px, .56fr) minmax(460px, 1fr);
    align-items: stretch;
    min-width: 0;
    overflow: visible;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .gen-controls-sticky,
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .intent-brief {
    position: static !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .gen-controls-sticky {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, auto) auto auto;
    align-content: start;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(220px 120px at 0% 0%, rgba(113,112,255,0.12), transparent 62%),
      rgba(255,255,255,0.026) !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .tab-bar {
    grid-column: auto !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: auto !important;
    padding: 4px !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .tab-bar .tab-item {
    justify-content: center !important;
    min-height: 36px !important;
    padding: 7px 8px !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .composer-mode-card {
    display: none !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .run-setup-head {
    margin: 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .gen-controls-sticky .field-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .gen-controls-sticky .field-group {
    min-width: 0 !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .gen-controls-sticky .segmented {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid #model-schema-fields {
    margin-top: 0 !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .intent-brief {
    display: grid !important;
    grid-template-rows: auto minmax(310px, 1fr) auto auto !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .intent-brief textarea[name="body"] {
    min-height: 310px !important;
    height: auto !important;
    resize: vertical !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"][data-kind="video"] .prompt-main-grid > .intent-brief {
    grid-template-rows: auto minmax(210px, 1fr) auto !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"][data-kind="video"] .prompt-main-grid .intent-brief textarea[name="body"] {
    min-height: 210px !important;
    height: auto !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs {
    grid-row: 2 !important;
    display: grid !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .authoring-region-head,
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs > details,
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs > .field-group,
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs #gen-cinema {
    display: none !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs #ref-slots {
    display: block !important;
    margin: 0 !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs #ref-slots > div {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 7px !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs #ref-slots .dropzone,
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs #ref-slots label {
    min-height: 72px !important;
    padding: 8px !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .seedance-ref-board {
    display: grid !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .seedance-ref-head {
    align-items: center;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .seedance-ref-head p {
    margin-top: 3px;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .seedance-ref-lanes,
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .seedance-ref-summary-list,
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .seedance-dropzone .dz-files {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .seedance-dropzone {
    min-height: 74px !important;
    max-height: none !important;
    padding: 10px !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .dropzone .dz-file-preview {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 6px !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .dropzone .dz-thumb {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
}

@media (max-width: 1179px) {
  .gen-workstation .prompt-main-grid {
    grid-template-columns: 1fr;
  }
}

/* CREATE WORKSTATION V38 — hard reset prompt-integrated canvas geometry.
   V37 moved the DOM correctly, but legacy stage rules kept a hidden 2-column
   grid, so references landed in a clipped right sub-column. Force one canvas:
   [setup | prompt] on row 1, references full-width on row 2. */
.gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid,
.gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .gen-controls-sticky {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] {
    grid-template-columns: minmax(0, 1fr) var(--cw-right) !important;
    grid-template-rows: auto 72px !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    align-items: start !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .gen-controls-sticky {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .intent-brief {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: grid !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs .seedance-ref-board {
    width: 100% !important;
    max-width: none !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-provider-rail[data-create-feed-rail="true"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 1179px) {
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .gen-controls-sticky,
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .intent-brief,
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .tab-bar,
  .gen-workstation #gen-form[data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .gen-controls-sticky .field-row {
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* CREATE WORKSTATION V39 — music is not an image/video prompt+reference canvas.
   V37/V38 intentionally re-docked setup/prompt/reference for image/video, but the
   same prompt-integrated selectors also caught music. That left the hidden
   reference row occupying space and pushed the Suno composer below the viewport.
   Keep only the kind tabs above a full-width Suno composer in music mode. */
.gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .gen-provider-rail[data-create-feed-rail="true"],
.gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .gen-run-tray,
.gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .gen-actions,
.gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .intent-brief,
.gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel > .generation-inputs {
  display: none !important;
}

.gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .gen-controls-sticky {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid > .gen-controls-sticky > :not(.tab-bar) {
  display: none !important;
}

.gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid .tab-bar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(360px, 100%) !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] #create-music {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (min-width: 1180px) {
  .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-content: start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100dvh - 150px) !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    align-content: start !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] #create-music {
    grid-row: 2 !important;
    align-self: start !important;
    padding-right: 0 !important;
  }

  .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .music-author-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1179px) {
  .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .prompt-main-grid {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] #create-music {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 767px) {
  html[data-create-kind="music"] .gen-workstation > .grid > section > .card,
  html[data-create-kind="music"] .gen-workstation > .grid > section > .card > div,
  html[data-create-kind="music"] .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"],
  html[data-create-kind="music"] .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-create-kind="music"] .gen-workstation > .grid > section > .card > div {
    display: block !important;
  }

  html[data-create-kind="music"] .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] {
    min-height: 0 !important;
    grid-template-rows: auto !important;
    padding-bottom: 0 !important;
  }

  html[data-create-kind="music"] .gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .gen-stage-panel {
    align-self: start !important;
  }
}

/* CREATE WORKSTATION V40.1 - compact command dock stays visible without taking over the viewport. */
body:has(.gen-workstation) #gen-form {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

.gen-workstation #gen-form .gen-actions.gen-run-tray {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 14px !important;
  z-index: 72 !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 32px), 1120px) !important;
  min-height: 58px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto minmax(172px, auto) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid color-mix(in oklab, var(--hf-border-2) 86%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in oklab, var(--hf-bg-panel) 91%, transparent) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(12px) saturate(135%) !important;
}

.gen-workstation #gen-form[data-kind="music"][data-prompt-layout="setupLeftRefsBottom"] .gen-actions.gen-run-tray {
  display: grid !important;
  position: fixed !important;
}

.gen-workstation #gen-form .gen-actions.gen-run-tray .run-gate-summary {
  min-width: 0 !important;
  padding: 0 6px !important;
}

.gen-workstation #gen-form .gen-actions.gen-run-tray .run-gate-summary b,
.gen-workstation #gen-form .gen-actions.gen-run-tray .run-gate-summary span,
.gen-workstation #gen-form .gen-actions.gen-run-tray #assist-status {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gen-workstation #gen-form .gen-actions.gen-run-tray .btn-primary {
  min-width: 148px !important;
  min-height: 42px !important;
  justify-content: center !important;
  border-radius: 7px !important;
}

.gen-workstation #gen-form .gen-tool-cluster {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px !important;
  border: 1px solid color-mix(in oklab, var(--hf-border-1) 80%, transparent) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.035) !important;
}

.gen-workstation #gen-form .gen-tool-btn {
  min-height: 34px !important;
  padding: 0 9px !important;
  gap: 6px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

.gen-workstation #gen-form .gen-iterate-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  border-radius: 6px !important;
  color: var(--hf-text-3) !important;
  font-size: .75rem !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.gen-workstation #gen-form .gen-actions.gen-run-tray .gen-keys {
  white-space: nowrap !important;
}

@media (max-width: 1023px) {
  body:has(.gen-workstation) #gen-form {
    padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .gen-workstation #gen-form .gen-actions.gen-run-tray {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 18px) !important;
    min-height: 70px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "summary run"
      "tools tools" !important;
    gap: 6px !important;
    padding: 7px !important;
  }

  .gen-workstation #gen-form .gen-actions.gen-run-tray .run-gate-summary {
    grid-area: summary !important;
  }

  .gen-workstation #gen-form .gen-actions.gen-run-tray .btn-primary {
    grid-area: run !important;
    min-width: 116px !important;
    min-height: 40px !important;
  }

  .gen-workstation #gen-form .gen-tool-cluster {
    grid-area: tools !important;
    width: 100% !important;
    justify-content: space-between !important;
  }

  .gen-workstation #gen-form .gen-tool-btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 0 6px !important;
  }

  .gen-workstation #gen-form .gen-tool-btn span,
  .gen-workstation #gen-form .gen-iterate-toggle span {
    max-width: 72px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .gen-workstation #gen-form .gen-iterate-toggle {
    flex: 0 0 auto !important;
    padding: 0 6px !important;
  }

  .gen-workstation #gen-form .gen-actions.gen-run-tray #assist-status,
  .gen-workstation #gen-form .gen-actions.gen-run-tray .gen-keys {
    display: none !important;
  }
}

/* CREATE WORKSTATION V40.2 - reference intake and preview viewer are docked above the command bar. */
body:has(.gen-workstation) #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) {
  padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
}

.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-dropzone {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 82px !important;
  z-index: 71 !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: auto minmax(190px, 0.72fr) minmax(260px, 1.28fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(calc(100vw - 32px), 1120px) !important;
  min-height: 66px !important;
  max-height: 92px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in oklab, var(--hf-border-2) 82%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in oklab, var(--hf-bg-panel) 88%, transparent) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(12px) saturate(135%) !important;
}

.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-dropzone .seedance-drop-icon {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.06) !important;
  font-size: 1.1rem !important;
}

.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-drop-label,
.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-drop-tiny {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-drop-label {
  font-size: .86rem !important;
  font-weight: 650 !important;
}

.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-drop-tiny {
  color: var(--hf-text-4) !important;
  font-size: .68rem !important;
}

.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-refs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-height: 60px !important;
  margin-top: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
}

.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-refs:empty::before {
  content: 'Drop refs here';
  color: var(--hf-text-4);
  font-size: .72rem;
  white-space: nowrap;
}

.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-refs .dz-file {
  flex: 0 0 172px !important;
  width: 172px !important;
  min-height: 50px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 5px 28px 5px 5px !important;
  border-radius: 7px !important;
}

.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-refs .dz-thumb {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 6px !important;
}

.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-refs .dz-name,
.gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-refs .dz-sub {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1023px) {
  body:has(.gen-workstation) #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) {
    padding-bottom: calc(236px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-dropzone {
    bottom: calc(146px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 18px) !important;
    min-height: 74px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "icon copy"
      "viewer viewer" !important;
    gap: 6px 8px !important;
    padding: 7px !important;
  }

  .gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-dropzone .seedance-drop-icon {
    grid-area: icon !important;
  }

  .gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-drop-label,
  .gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-drop-tiny {
    grid-area: copy !important;
  }

  .gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-drop-tiny {
    display: none !important;
  }

  .gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-refs {
    grid-area: viewer !important;
    width: 100% !important;
    max-height: 48px !important;
  }

  .gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-refs .dz-file {
    flex-basis: 144px !important;
    width: 144px !important;
    min-height: 42px !important;
    max-height: 44px !important;
  }

  .gen-workstation #gen-form:not([data-kind="music"]):not([data-refs-disabled="true"]) #gen-refs .dz-thumb {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
}