Lock display tokens and slot sizes to the cinematic pixel grid.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/css/display.css

@@ -1,343 +1,645 @@
-/* AIGen display tokens — Classic | Studio
+/* Pixel grid tokens — Classic | Studio. Match TARGET-classic-layout.png */
-   Apply on [data-display] wrapper. Do not fork components.
-   Copied from studio2-display-ux/tokens/display.css */
 
 :root,
 [data-display='studio'] {
-  --bg: #0e0e10;
+  --bg: #0b0b0d;
-  --bg-raise: #161618;
+  --panel: #141416;
-  --bg-slot: #1c1c1f;
+  --panel-raise: #1a1a1d;
   --line: #2a2a2e;
   --text: #f3f1ea;
   --muted: #9a9588;
   --amber: #f5a524;
-  --amber-dim: #c4841c;
+  --amber-on: #1a1204;
+  --chip-bg: #2a2418;
+  --chip-line: #5a4a28;
+  --chip-text: #e8c37a;
+  --success: #7dda6f;
   --radius: 8px;
-  --chrome-gap: 16px;
+  --page-gap: 12px;
-  --rail-h: 40px;
+  --field-gap: 12px;
-  --card-pad: 14px;
+  --header-h: 48px;
-  --header-h: 52px;
+  --rail-task-h: 40px;
+  --rail-model-h: 36px;
+  --left-w: 260px;
+  --right-w: 280px;
   --type: 14px;
   --type-sm: 12px;
+  --type-label: 11px;
 }
 
 [data-display='classic'] {
-  --chrome-gap: 8px;
+  --field-gap: 8px;
-  --rail-h: 32px;
-  --card-pad: 10px;
-  --header-h: 44px;
   --type: 13px;
 }
 
 [data-display] {
   background: var(--bg);
   color: var(--text);
+  font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: var(--type);
 }
 
-[data-display] .display-app {
+/* Skin toggles */
-  display: flex;
+[data-display='classic'] .rail-task,
-  min-height: 100%;
+[data-display='classic'] .rail-model,
-  flex-direction: column;
+[data-display='classic'] .identity-slots,
-  gap: var(--chrome-gap);
+[data-display='classic'] .eye-viewer,
-  padding: var(--chrome-gap);
+[data-display='classic'] .eye-tile {
+  display: none !important;
+}
+[data-display='studio'] .classic-task-model,
+[data-display='studio'] .viewer-lock-bar {
+  display: none !important;
 }
 
-[data-display] .display-top {
+.bench-root {
   display: flex;
+  height: 100dvh;
+  max-height: 100dvh;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.bench-header {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
   height: var(--header-h);
   min-height: var(--header-h);
-  flex-wrap: wrap;
+  flex-shrink: 0;
-  align-items: center;
+  border-bottom: 1px solid var(--line);
-  gap: 12px;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--bg-raise);
   padding: 0 12px;
+  background: var(--bg);
 }
 
-[data-display] .display-brand {
+.bench-brand {
   font-weight: 650;
   letter-spacing: 0.02em;
 }
 
-[data-display] .display-grow {
+.bench-crumb {
-  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--muted);
+  font-size: var(--type-sm);
 }
 
-[data-display] .display-nav {
+.bench-crumb select {
+  max-width: 14rem;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  outline: none;
+  cursor: pointer;
+}
+
+.bench-header-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 14px;
+}
+
+.bench-nav {
   display: flex;
   gap: 14px;
   font-size: var(--type-sm);
   color: var(--muted);
 }
 
-[data-display] .display-nav a {
+.bench-nav a {
   color: inherit;
-  outline: none;
+  text-decoration: none;
 }
 
-[data-display] .display-nav a:hover,
+.bench-nav a:hover,
-[data-display] .display-nav a.router-link-active {
+.bench-nav a.router-link-active {
-  color: var(--text);
+  color: var(--amber);
   font-weight: 600;
 }
 
-[data-display] .display-nav a:focus-visible {
+.gpu-chip {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
+  display: inline-flex;
-  border-radius: 4px;
-}
-
-[data-display] .identity-header,
-[data-display] .classic-hide,
-[data-display] .identity-slots {
-  display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--panel-raise);
+  padding: 8px 12px;
   font-size: var(--type-sm);
-  color: var(--muted);
+  color: var(--text);
 }
 
-[data-display] .identity-slots {
+.gpu-chip .dot {
-  flex-direction: column;
+  width: 8px;
-  align-items: flex-start;
+  height: 8px;
-  margin-top: 8px;
+  border-radius: 999px;
+  background: var(--muted);
 }
 
-[data-display] .identity-slots .hint {
+.gpu-chip[data-tone='ready'] .dot { background: var(--success); }
-  margin: 6px 0 0;
+.gpu-chip[data-tone='busy'] .dot { background: var(--amber); animation: pulse 1.2s infinite; }
-  font-size: 11px;
+
-  color: var(--muted);
+@keyframes pulse {
+  50% { opacity: 0.45; }
 }
 
-[data-display] .rail {
+.rail {
   display: flex;
+  flex-shrink: 0;
   flex-wrap: wrap;
   gap: 6px;
+  padding: 0 12px;
 }
 
-[data-display] .seg {
+.rail-task { min-height: var(--rail-task-h); align-items: center; padding-top: 8px; }
-  height: var(--rail-h);
+.rail-model { min-height: var(--rail-model-h); align-items: center; padding-bottom: 8px; }
-  cursor: pointer;
+
+.seg {
+  height: 36px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
-  background: var(--bg-slot);
+  background: var(--panel);
-  padding: 0 12px;
+  padding: 0 14px;
   color: var(--muted);
   font-size: var(--type);
+  font-weight: 600;
+  text-transform: capitalize;
   outline: none;
+  cursor: pointer;
 }
 
-[data-display] .seg:focus-visible {
+.rail-model .seg { height: 32px; font-weight: 500; }
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
-}
 
-[data-display] .seg[aria-pressed='true'] {
+.seg[aria-pressed='true'] {
   border-color: var(--amber);
-  background: #2a1f0c;
+  background: var(--amber);
-  color: var(--amber);
+  color: var(--amber-on);
 }
 
-[data-display] .seg:disabled,
+.seg:disabled {
-[data-display] .seg[aria-disabled='true'] {
-  cursor: not-allowed;
   opacity: 0.45;
+  cursor: not-allowed;
 }
 
-[data-display] .classic-selects {
+.seg:focus-visible {
-  display: flex;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 55%, transparent);
-  flex-wrap: wrap;
-  gap: 8px;
 }
 
-[data-display] .classic-selects select {
+.bench-grid {
-  height: var(--rail-h);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--bg-slot);
-  padding: 0 8px;
-  color: var(--text);
-  outline: none;
-}
-
-[data-display] .classic-selects select:focus-visible {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
-}
-
-[data-display] .display-grid {
   display: grid;
   flex: 1;
-  gap: var(--chrome-gap);
+  min-height: 0;
-  min-width: 0;
+  grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w);
+  gap: var(--page-gap);
+  padding: var(--page-gap);
 }
 
-@media (min-width: 1280px) {
+.bench-panel {
-  [data-display] .display-grid {
-    grid-template-columns: minmax(14rem, 15rem) minmax(0, 1fr) minmax(16rem, 18rem);
-  }
-  [data-display] .display-grid--music {
-    grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem);
-  }
-}
-
-[data-display] .display-col {
-  min-width: 0;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--bg-raise);
-  padding: var(--card-pad);
-}
-
-[data-display] .display-viewer {
-  position: relative;
-  display: grid;
-  min-height: 320px;
-  place-items: center;
-  overflow: hidden;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: #111;
-  color: var(--muted);
-}
-
-[data-display] .eye-viewer {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  background: #000a;
-  padding: 4px;
-  color: var(--text);
-  outline: none;
-}
-
-[data-display] .eye-viewer:focus-visible,
-[data-display] .eye-tile:focus-visible {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
-}
-
-[data-display] .display-strip {
   display: flex;
-  gap: 8px;
+  min-width: 0;
-  margin-top: 10px;
+  min-height: 0;
-  max-width: 100%;
+  flex-direction: column;
-  overflow-x: auto;
-}
-
-[data-display] .display-tile {
-  position: relative;
-  width: 72px;
-  height: 48px;
-  flex-shrink: 0;
   overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 6px;
-  background: #222;
-}
-
-[data-display] .display-tile[data-active='true'] {
-  border-color: var(--amber);
-}
-
-[data-display] .eye-tile {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  display: grid;
-  width: 16px;
-  height: 16px;
-  place-items: center;
-  border: 0;
-  border-radius: 3px;
-  background: #000a;
-  padding: 0;
-  color: var(--text);
-  outline: none;
-}
-
-[data-display] .display-cta {
-  width: 100%;
-  height: 44px;
-  margin-top: 10px;
-  cursor: pointer;
-  border: 0;
   border-radius: var(--radius);
-  background: var(--amber);
+  background: var(--panel);
-  color: #1a1204;
-  font-weight: 700;
-  outline: none;
 }
 
-[data-display] .display-cta:focus-visible {
+.bench-scroll {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
 }
 
-[data-display] .display-cta:disabled {
+.inspector {
-  cursor: not-allowed;
+  display: flex;
-  opacity: 0.5;
+  flex-direction: column;
+  gap: var(--field-gap);
 }
 
-[data-display] .display-field {
+.field-label {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--muted);
+  font-size: var(--type-label);
+  text-transform: none;
+}
+
+.field-control {
   width: 100%;
+  height: 36px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
-  background: var(--bg-slot);
+  background: var(--panel-raise);
-  padding: 8px;
+  padding: 0 10px;
   color: var(--text);
   font: inherit;
   outline: none;
 }
 
-[data-display] .display-field:focus-visible {
+.field-control:focus-visible,
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 50%, transparent);
+.field-area:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 55%, transparent);
 }
 
-[data-display] .display-gpu-pill {
+.field-area {
+  width: 100%;
+  min-height: 88px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel-raise);
+  padding: 8px 10px;
+  color: var(--text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.4;
+  resize: vertical;
+  outline: none;
+}
+
+.neg-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.neg-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--chip-line);
+  border-radius: 999px;
+  background: var(--chip-bg);
+  padding: 4px 10px;
+  color: var(--chip-text);
+  font-size: var(--type-sm);
+}
+
+.neg-chip button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.75;
+}
+
+.seed-row {
+  display: flex;
+  gap: 8px;
+}
+
+.seed-row .field-control { flex: 1; }
+
+.dice-btn {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  flex-shrink: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel-raise);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.viewer-lock-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-size: var(--type-sm);
+}
+
+.center-stack {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.viewer-frame {
+  position: relative;
+  display: grid;
+  flex: 1;
+  min-height: 360px;
+  place-items: center;
+  overflow: hidden;
+  background: #0a0a0c;
+}
+
+.viewer-frame img,
+.viewer-frame video {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.eye-viewer {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 5;
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #000a;
+  cursor: pointer;
+}
+
+.filmstrip {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  height: 80px;
+  align-items: center;
+  overflow-x: auto;
+  border-top: 1px solid var(--line);
+  padding: 8px 10px;
+  background: var(--panel);
+}
+
+.tile {
+  position: relative;
+  width: 96px;
+  height: 64px;
+  flex-shrink: 0;
+  overflow: hidden;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  background: #222;
+}
+
+@media (min-width: 1440px) {
+  .tile { width: 120px; height: 80px; }
+  .filmstrip { height: 96px; }
+}
+
+.tile[data-active='true'] {
+  border-color: var(--amber);
+}
+
+.tile button.pick {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+
+.tile img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tile .eye-tile,
+.tile .tile-trash {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  display: grid;
+  width: 18px;
+  height: 18px;
+  place-items: center;
+  border: 0;
+  border-radius: 4px;
+  background: #000a;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.tile .tile-trash { right: 22px; }
+
+.transport {
+  display: flex;
+  height: 28px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid var(--line);
+  padding: 0 10px;
+  color: var(--muted);
+  font-size: var(--type-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+.transport .ops {
+  display: flex;
+  gap: 8px;
+}
+
+.transport button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.queue-col {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.queue-head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 12px 8px;
+  font-weight: 650;
+}
+
+.queue-badge {
+  display: inline-grid;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--amber);
+  color: var(--amber-on);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.queue-list {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 12px 12px;
+}
+
+.job-card {
+  margin-bottom: 8px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel-raise);
+  padding: 10px;
+  cursor: pointer;
+}
+
+.job-card[data-active='true'] {
+  border-width: 2px;
+  border-color: var(--amber);
+}
+
+.job-id {
+  color: var(--muted);
+  font-size: var(--type-sm);
+}
+
+.job-title {
+  margin-top: 2px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.job-meta {
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: var(--type-sm);
+}
+
+.job-status {
+  display: flex;
+  margin-top: 8px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: var(--type-sm);
+}
+
+.job-status .left {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+}
+
+.job-status .dot {
+  width: 7px;
+  height: 7px;
   border-radius: 999px;
-  border: 1px solid #2d4a2a;
+  background: var(--success);
-  background: #142016;
-  padding: 4px 10px;
-  font-size: var(--type-sm);
-  color: #b8e0a8;
 }
 
-[data-display] .display-gpu-pill[data-tone='busy'] {
+.job-status[data-state='queued'] .dot,
-  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
+.job-status[data-state='waiting'] .dot {
-  background: #2a1f0c;
+  background: var(--muted);
-  color: var(--amber);
 }
 
-[data-display] .display-gpu-pill[data-tone='idle'],
+.kebab {
-[data-display] .display-gpu-pill[data-tone='off'] {
+  border: 0;
-  border-color: var(--line);
+  background: transparent;
-  background: var(--bg-slot);
   color: var(--muted);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
 }
 
-/* Skin toggles — keep after base rules so display:none wins */
+.queue-foot {
-[data-display='classic'] .rail-task,
+  flex-shrink: 0;
-[data-display='classic'] .rail-model {
+  border-top: 1px solid var(--line);
-  display: none !important;
+  padding: 12px;
 }
-[data-display='studio'] .classic-selects {
+
-  display: none !important;
+.generate-cta {
+  display: inline-flex;
+  width: 100%;
+  height: 44px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 0;
+  border-radius: var(--radius);
+  background: var(--amber);
+  color: var(--amber-on);
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
 }
-[data-display='classic'] .identity-slots {
+
-  display: none !important;
+.generate-cta:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
-[data-display='studio'] .identity-header {
+
-  display: none !important;
+.queue-foot .tiny {
+  margin-top: 8px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 11px;
 }
-[data-display='classic'] .eye-tile,
+
-[data-display='classic'] .eye-viewer {
+.queue-foot .tiny button {
-  display: none !important;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
 }
-[data-display='studio'] .classic-hide {
+
-  display: none !important;
+.slot-block { width: 100%; }
+
+.slot-thumb {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: #0a0a0c;
+  cursor: pointer;
+}
+
+.slot-thumb--hero { height: 148px; }
+.slot-thumb--slot { height: 96px; }
+.slot-thumb--empty {
+  height: 72px;
+  border-style: dashed;
+  color: var(--muted);
+  font-size: var(--type-sm);
+}
+
+.slot-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.slot-caption {
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+  font-size: var(--type-sm);
+}
+
+.slot-upload {
+  display: inline-block;
+  margin-top: 4px;
+  color: var(--amber);
+  font-size: var(--type-sm);
+  cursor: pointer;
+}
+
+.placeholder-still {
+  color: var(--muted);
+  font-size: var(--type-sm);
 }

components/studio2/AssetSlot.vue

@@ -1,8 +1,24 @@
 <template>
- <div class="w-36 shrink-0 space-y-2"><span class="text-xs text-zinc-400">{{ label }}</span><button class="flex h-24 w-full items-center justify-center overflow-hidden rounded-xl border border-white/15 bg-black" @click="$emit('pick')"><span v-if="asset && hidden" class="p-2 text-xs text-zinc-400">Still loaded · preview hidden</span><img v-else-if="asset" :src="asset.kind==='clip'?`/api/library/clips/${asset.id}/thumb`:`/api/library/stills/${asset.id}`" class="h-full w-full object-contain" :alt="label"><span v-else class="text-xs text-zinc-400">Choose {{ label.toLowerCase() }}</span></button><p v-if="asset" class="truncate text-xs" :title="assetLabel(asset)">{{ assetLabel(asset) }}</p><label v-if="upload" class="block cursor-pointer text-xs text-amber-200">Upload {{ label.toLowerCase() }}<input type="file" accept="image/*" class="sr-only" :disabled="disabled" @change="$emit('upload',$event)"></label></div>
+ <div class="slot-block">
+  <span class="field-label">{{ label }}</span>
+  <button
+   type="button"
+   class="slot-thumb"
+   :class="asset ? (size==='hero' ? 'slot-thumb--hero' : 'slot-thumb--slot') : 'slot-thumb--empty'"
+   @click="$emit('pick')"
+  >
+   <span v-if="asset && hidden" class="p-2 text-center text-[var(--type-sm)] text-[var(--muted)]">Still loaded · preview hidden</span>
+   <img v-else-if="asset" :src="asset.kind==='clip' ? `/api/library/clips/${asset.id}/thumb` : `/api/library/stills/${asset.id}`" :alt="label">
+   <span v-else class="inline-flex items-center gap-1">Select <span aria-hidden="true">▾</span></span>
+  </button>
+  <p v-if="asset" class="slot-caption" :title="assetLabel(asset)">{{ assetLabel(asset) }}</p>
+  <label v-if="upload" class="slot-upload">Upload {{ label.toLowerCase() }}
+   <input type="file" accept="image/*" class="sr-only" :disabled="disabled" @change="$emit('upload',$event)">
+  </label>
+ </div>
 </template>
 <script setup lang="ts">
 import {assetLabel} from '~/shared/studio2/viewer.mjs'
-defineProps<{label:string;asset?:any;hidden?:boolean;upload?:boolean;disabled?:boolean}>()
+withDefaults(defineProps<{label:string;asset?:any;hidden?:boolean;upload?:boolean;disabled?:boolean;size?:'hero'|'slot'}>(),{size:'slot'})
 defineEmits(['pick','upload'])
 </script>

public/icons/display/lock.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f3f1ea" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
   <rect x="4" y="11" width="16" height="10" rx="2"/>
   <path d="M8 11V8a4 4 0 0 1 8 0v3"/>
 </svg>

shared/studio2/styles.mjs

@@ -1,5 +1,7 @@
 export const styleGroups={Render:['Photorealistic','Pixar','3D Disney','Comic','Watercolor','Oil painting'],Quality:['Realistic skin','Skin pores','Fine detail','Natural texture'],Lighting:['Golden hour','Soft studio','Window light','Overcast','Cinematic lighting']}
-export function normalizeStyles(value={}) { const known=Object.values(styleGroups).flat();const positive=[...new Set((value.positive||[]).filter(s=>known.includes(s)))];return {positive,negative:[...new Set((value.negative||[]).filter(s=>known.includes(s)&&!positive.includes(s)))]} }
+export const defaultNegatives=['blurry','deformed','low quality','text','watermark']
+export function normalizeStyles(value={}) { const known=[...Object.values(styleGroups).flat(),...defaultNegatives];const positive=[...new Set((value.positive||[]).filter(s=>known.includes(s)))];return {positive,negative:[...new Set((value.negative||[]).filter(s=>known.includes(s)&&!positive.includes(s)))]} }
 export function toggleStyle(value,chip,negative=false) { const next=normalizeStyles(value),key=negative?'negative':'positive',other=negative?'positive':'negative';next[other]=next[other].filter(s=>s!==chip);next[key]=next[key].includes(chip)?next[key].filter(s=>s!==chip):[...next[key],chip];return next }
 export function stylePrompt(value,negative=false){return normalizeStyles(value)[negative?'negative':'positive'].join(', ')}
 export function parseBatch(value){return String(value||'').split(/\r?\n\s*\r?\n/).map(s=>s.trim()).filter(Boolean)}
+