.studio-view {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px 28px;
}

.studio-view[hidden] { display: none; }
.studio-view button, .studio-view select, .studio-view input, .studio-view textarea { font: inherit; }
.studio-view button { cursor: pointer; }
.studio-content { min-width: 0; }

.studio-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 16px;
  border: 1px solid #202b38;
  border-radius: 14px 14px 0 0;
  background:
    radial-gradient(circle at 76% 130%, rgba(255, 101, 31, .2), transparent 40%),
    linear-gradient(110deg, #0b1119, #0b1017 62%, #171014);
}

.studio-title-block { display: flex; align-items: center; gap: 14px; min-width: 0; }
.studio-title-icon { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 104, 31, .13); color: #ff7d32; box-shadow: inset 0 0 0 1px rgba(255,126,50,.2); }
.studio-title-icon svg { width: 25px; height: 25px; }
.studio-title-block h1 { margin: 0 0 4px; font-size: clamp(1.45rem, 2.4vw, 2rem); letter-spacing: -.035em; }
.studio-title-block p { margin: 0; color: #aeb8c5; font-size: .83rem; line-height: 1.4; }

.tier-switch { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); padding: 4px; border: 1px solid #263243; border-radius: 11px; background: #0c121a; }
.tier-button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: #cbd2dc; font-size: .78rem; font-weight: 700; }
.tier-button span { margin-left: 4px; color: #ffb13f; font-size: .58rem; letter-spacing: .06em; }
.tier-button.active { color: #fff; background: linear-gradient(110deg, #6d2716, #fb5f1e); box-shadow: 0 0 22px rgba(255, 98, 28, .22), inset 0 0 0 1px #ff893c; }

.workspace-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; min-height: 49px; margin-bottom: 12px; padding: 5px; border: 1px solid #202b38; border-top: 0; border-radius: 0 0 14px 14px; background: #090f16; }
.workspace-tabs-label { flex: 0 0 auto; display: grid; place-items: center; min-width: 78px; padding: 0 10px; color: #ff914e; font-size: .59rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.workspace-tab { flex: 1 1 105px; min-width: 96px; min-height: 39px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #abb5c2; font-size: .74rem; font-weight: 650; }
.workspace-tab:hover { color: #fff; background: #121a24; }
.workspace-tab.active { color: #fff; border-color: #a8441f; background: linear-gradient(100deg, rgba(141,48,20,.84), rgba(255,101,31,.7)); box-shadow: 0 0 17px rgba(255,96,24,.13); }

.studio-selector, .automation-mode-row button { min-height: 31px; padding: 0 10px; border: 1px solid #334154; border-radius: 6px; background: #101822; color: #aeb9c6; font-size: .64rem; }
.studio-selector.active, .automation-mode-row button.active { border-color: #ce5522; color: #fff; background: linear-gradient(100deg,#6d2919,#d95220); }

.panel-pro { border: 1px solid #202b38; border-radius: 12px; background: linear-gradient(145deg, #0a1118, #080e14); }
.panel-pro-title { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.panel-pro-title h2, .panel-pro-title h3 { margin: 0; }
.panel-pro-title h2 { font-size: 1.25rem; }.panel-pro-title h3 { font-size: .9rem; }
.panel-pro-title small { display: block; margin-top: 3px; color: #8491a0; font-size: .67rem; }
.panel-pro-title > div:not(:only-child) { display: flex; align-items: center; gap: 8px; }
.panel-pro-title > div:first-child:has(.tier-kicker) { display: block; }

.studio-primary, .studio-secondary, .text-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 750;
  transition: transform .17s ease, filter .17s ease, border-color .17s ease;
}
.studio-primary { border: 0; color: #180d07; background: linear-gradient(95deg, #ff9f22, #ff5a1e); box-shadow: 0 7px 19px rgba(255,90,30,.18); }
.studio-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.studio-primary svg { width: 18px; height: 18px; }
.studio-primary.is-working { filter: saturate(.6); }
.studio-secondary { border: 1px solid #334153; color: #e9edf3; background: #111923; }
.studio-secondary:hover { border-color: #58687c; background: #17212c; }
.text-button { min-height: 32px; padding: 0 7px; border: 0; color: #b5bfcb; background: transparent; font-size: .71rem; }
.full-button { width: 100%; }
.mini-badge, .success-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; padding: 0 8px; border: 1px solid #344256; border-radius: 999px; background: #111925; color: #bac5d2; font-size: .63rem; }
.success-badge { border-color: rgba(39,210,155,.3); color: #35dea9; background: rgba(39,210,155,.07); }
.tier-kicker { display: block; margin-bottom: 3px; color: #ff872f; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.field-label { display: block; color: #d8dee6; font-size: .7rem; font-weight: 650; }
.field-label input, .field-label select, .field-label textarea, .transform-grid input {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid #2b3848;
  border-radius: 7px;
  outline: 0;
  background: #0d151f;
  color: #f2f4f7;
  font-size: .75rem;
}
.field-label textarea { resize: vertical; line-height: 1.45; }
.field-label select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8793a2 50%),linear-gradient(135deg,#8793a2 50%,transparent 50%); background-position: calc(100% - 14px) 50%,calc(100% - 10px) 50%; background-size: 4px 4px,4px 4px; background-repeat: no-repeat; }
.field-label input:focus, .field-label select:focus, .field-label textarea:focus { border-color: #d85c27; box-shadow: 0 0 0 2px rgba(255,103,30,.1); }
.compact-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.range-field { display: block; padding: 10px 0; color: #cfd6de; font-size: .69rem; }
.range-field > span { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.range-field output { min-width: 36px; padding: 3px 5px; border-radius: 5px; background: #151e29; color: #fff; text-align: center; }
.range-field input { width: 100%; accent-color: #ff6b25; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; color: #dfe3e9; font-size: .7rem; }
.toggle-row strong, .toggle-row small { display: block; }.toggle-row small { margin-top: 3px; color: #7f8a99; font-size: .62rem; }
.lc-toggle { position: relative; flex: 0 0 auto; width: 35px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: #293443; }
.lc-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #cad1da; transition: left .17s ease, background .17s ease; }
.lc-toggle.on { background: #ff6121; box-shadow: 0 0 10px rgba(255,97,33,.24); }.lc-toggle.on::after { left: 18px; background: white; }

.tier-intro h2 { margin: 5px 0 8px; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.03; letter-spacing: -.05em; }.tier-intro p { max-width: 650px; margin: 0 0 18px; color: #c2c8d1; font-size: .91rem; line-height: 1.5; }
.chat-simple, .simple-generator, .director-simple { display: grid; gap: 12px; }
.chat-welcome, .simple-creator-hero, .director-banner { position: relative; min-height: 265px; overflow: hidden; border: 1px solid #2a303b; border-radius: 14px; background: #11131c; }
.chat-welcome > div, .simple-creator-hero > div, .director-banner > div { position: relative; z-index: 2; width: 60%; padding: 34px; }
.chat-welcome::after, .simple-creator-hero::after, .director-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,#10131b 0%,#10131b 37%,rgba(16,19,27,.2) 72%); pointer-events: none; }
.chat-welcome > img, .simple-creator-hero > img { position: absolute; inset: 0 0 0 auto; width: 58%; height: 100%; object-fit: cover; object-position: center; }
.director-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.simple-creator-hero.video > img { object-position: 60% center; }

.prompt-composer, .simple-prompt-card, .project-brief-card { padding: 16px; }
.prompt-composer { border: 1px solid #7f3fcc; border-left-color: #ef752a; border-radius: 13px; background: linear-gradient(115deg,#14171e,#141320); box-shadow: 0 0 25px rgba(140,63,204,.08); }
.prompt-composer textarea { width: 100%; min-height: 90px; padding: 5px; border: 0; outline: 0; resize: vertical; background: transparent; color: #fff; font-size: .9rem; }
.composer-footer { display: flex; align-items: center; gap: 9px; }.composer-footer .studio-primary { margin-left: auto; }
.content-type-pills, .simple-options, .goal-grid, .batch-toolbar, .simple-mode-row { display: flex; flex-wrap: wrap; gap: 7px; }
.content-type-pills button, .simple-options button, .goal, .batch-toolbar button, .simple-mode-row button { min-height: 34px; padding: 0 12px; border: 1px solid #344153; border-radius: 7px; background: #101822; color: #bec6d1; font-size: .69rem; }
.content-type-pills button.active, .simple-options button.active, .goal.active, .batch-toolbar button.active, .simple-mode-row button.active { border-color: #ce5522; color: #ff9c58; background: rgba(255,99,31,.1); }
.simple-prompt-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }.simple-prompt-card > .field-label { grid-column: 1 / -1; }.simple-prompt-card .simple-mode-row { grid-column: 1 / -1; }
.project-brief-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; }.project-brief-card h3, .project-brief-card textarea { grid-column: 1 / -1; }.project-brief-card textarea { min-height: 110px; padding: 13px; border: 1px solid #2b3848; border-radius: 8px; background: #0d151f; color: #fff; resize: vertical; }.project-brief-card .studio-primary { min-width: 190px; }

.recent-strip { min-width: 0; padding: 0 11px 11px; }.recent-card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }.recent-card { min-width: 0; overflow: hidden; padding: 0 0 8px; border: 1px solid #253143; border-radius: 9px; background: #101721; color: #fff; text-align: left; }.recent-card:hover { border-color: #815137; transform: translateY(-1px); }.recent-card img { width: 100%; height: 86px; object-fit: cover; }.recent-card strong, .recent-card small { display: block; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.recent-card strong { margin-top: 7px; font-size: .7rem; }.recent-card small { margin-top: 3px; color: #8792a1; font-size: .61rem; }

.chat-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 12px; }.conversation-panel { min-height: 675px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }.conversation-heading { min-height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border-bottom: 1px solid #202b38; }.conversation-heading > div { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; }.conversation-heading strong, .conversation-heading small { grid-column: 2; }.conversation-heading small { color: #7e8a98; font-size: .62rem; }.status-dot { grid-row: 1 / span 2; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: #29d09b; box-shadow: 0 0 12px #29d09b; }.message-list { min-height: 0; overflow-y: auto; padding: 16px; }.message { display: flex; gap: 10px; max-width: 88%; margin-bottom: 18px; }.message > img, .message-avatar { flex: 0 0 auto; width: 33px; height: 33px; border-radius: 9px; object-fit: cover; }.message-avatar { display: grid; place-items: center; background: linear-gradient(135deg,#8c58ff,#f66232); font-weight: 800; }.message > div { padding: 11px 13px; border: 1px solid #263244; border-radius: 4px 12px 12px 12px; background: #111923; }.user-message { margin-left: auto; flex-direction: row-reverse; }.user-message > div { background: #182232; border-radius: 12px 4px 12px 12px; }.message p { margin: 0; color: #dfe4ea; font-size: .76rem; line-height: 1.5; }.message small { color: #74808f; font-size: .58rem; }.generated-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 10px; }.generated-grid img { width: 100%; height: 95px; object-fit: cover; border-radius: 7px; }.message-actions { display: flex; gap: 6px; margin-top: 8px; }.message-actions button { min-height: 30px; padding: 0 9px; border: 1px solid #354254; border-radius: 6px; background: #101722; color: #c8d0da; font-size: .61rem; }.chat-composer { margin: 11px; padding: 10px; border: 1px solid #4a3852; border-radius: 10px; background: #111722; }.chat-composer textarea { width: 100%; padding: 6px; border: 0; outline: 0; resize: none; background: transparent; color: #fff; font-size: .76rem; }.chat-composer > div { display: flex; justify-content: space-between; }.chat-context { padding: 0 12px 12px; }.context-item { padding: 11px 0; border-bottom: 1px solid #1e2835; }.context-item strong, .context-item small { display: block; }.context-item strong { font-size: .74rem; }.context-item small { margin-top: 3px; color: #7f8a98; font-size: .61rem; }.chat-context .field-label { margin-top: 13px; }

.project-overview { display: grid; grid-template-columns: 170px 1fr 260px; gap: 14px; padding: 10px; }.project-overview > img { width: 100%; height: 110px; border-radius: 9px; object-fit: cover; }.project-overview h2 { margin: 2px 0 3px; font-size: 1.5rem; }.project-overview p { margin: 0; max-width: 670px; color: #a9b3c0; font-size: .72rem; line-height: 1.45; }.tag-row { display: flex; gap: 6px; margin-top: 9px; }.tag-row span { padding: 4px 8px; border: 1px solid #324053; border-radius: 999px; color: #aeb8c5; font-size: .57rem; }.project-overview dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 8px; border-left: 1px solid #24303f; }.project-overview dl div { padding: 5px 7px; border-radius: 6px; background: #101822; }.project-overview dt { color: #778493; font-size: .58rem; }.project-overview dd { margin: 2px 0 0; font-size: .7rem; }
.production-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; padding: 13px; }.production-step { display: flex; align-items: center; gap: 7px; color: #7e8a99; }.production-step b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #334052; border-radius: 50%; }.production-step span, .production-step small { display: block; }.production-step span { font-size: .69rem; }.production-step small { margin-top: 2px; color: #687485; font-size: .55rem; }.production-step.complete b { border-color: #218d6d; color: #52e2b3; }.production-step.active { color: #ff8b3b; }.production-step.active b { border-color: #ff6c27; box-shadow: 0 0 14px rgba(255,108,39,.25); }.production-steps > i { width: 55px; height: 1px; background: #303b49; }
.director-grid { display: grid; grid-template-columns: minmax(0,1fr) 295px; gap: 10px; margin-top: 10px; }.scene-board { padding: 0 9px 9px; }.scene-table { display: grid; gap: 5px; }.scene-row { width: 100%; display: grid; grid-template-columns: 24px 70px minmax(150px,1fr) 95px 100px 52px; align-items: center; gap: 8px; min-height: 58px; padding: 5px 7px; border: 1px solid #222e3d; border-radius: 7px; background: #0e151e; color: #dce2e9; text-align: left; }.scene-row:hover { border-color: #4b5b6f; }.scene-row > b { color: #ff7b32; font-size: .72rem; }.scene-row > img { width: 70px; height: 45px; border-radius: 5px; object-fit: cover; }.scene-row > span strong, .scene-row > span small { display: block; }.scene-row > span strong { font-size: .69rem; }.scene-row > span small { margin-top: 3px; color: #7a8796; font-size: .54rem; }.scene-status { display: inline-flex; justify-content: center; padding: 4px 6px; border: 1px solid #324154; border-radius: 999px; font-size: .54rem; }.scene-status.completed { border-color: #176b55; color: #42daa7; background: rgba(28,167,121,.09); }.scene-status.in-progress { border-color: #8a5a17; color: #ffb237; background: rgba(255,177,55,.08); }.scene-status.queued { border-color: #1d5f8d; color: #4fbbff; background: rgba(60,175,255,.08); }.scene-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #1f2a37; }.scene-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#18b681,#47e7b4); }.scene-row > small { color: #a1aab6; font-size: .57rem; }.director-controls { padding: 0 12px 12px; }.director-controls .field-label { margin-top: 10px; }.director-controls .studio-primary { width: 100%; margin-top: 8px; }

.generation-workspace { display: grid; grid-template-columns: minmax(265px,.9fr) minmax(420px,1.3fr) 280px; gap: 10px; }.prompt-panel, .generation-controls { padding: 0 11px 11px; }.prompt-panel .field-label, .generation-controls .field-label { margin-top: 10px; }.reference-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 11px; }.reference-grid img, .reference-card { width: 100%; height: 74px; object-fit: cover; border: 1px solid #334154; border-radius: 7px; background: #111924; }.reference-card { display: grid; place-items: center; align-content: center; color: #b5bfcb; font-size: 1.2rem; }.reference-card small { display: block; margin-top: 3px; font-size: .56rem; }.generation-preview { min-width: 0; padding: 0 9px 9px; }.preview-stage { position: relative; overflow: hidden; min-height: 385px; border-radius: 8px; background: #06090c; }.preview-stage img { width: 100%; height: 100%; min-height: 385px; object-fit: cover; }.preview-chip { position: absolute; right: 9px; bottom: 9px; padding: 4px 7px; border-radius: 5px; background: rgba(0,0,0,.67); color: #d8dde5; font-size: .58rem; }.preview-thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 7px; }.preview-thumbs button { height: 66px; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 7px; background: #111923; }.preview-thumbs button.active { border-color: #ff6d24; }.preview-thumbs img { width: 100%; height: 100%; object-fit: cover; }.preview-actions { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 7px; margin-top: 8px; }.preview-actions button { min-width: 0; padding-inline: 7px; font-size: .63rem; }.credit-estimate { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 9px; border-radius: 7px; background: #111923; color: #8995a4; font-size: .62rem; }.credit-estimate strong { color: #ffc15c; }.generation-controls .studio-primary { width: 100%; }.workspace-recent { grid-column: 1 / -1; }

.video-workspace { display: grid; grid-template-columns: minmax(280px,.9fr) minmax(430px,1.25fr) 290px; gap: 10px; }.video-preview { min-width: 0; padding: 0 9px 9px; }.video-stage { position: relative; min-height: 340px; overflow: hidden; border-radius: 8px; background: #05080b; }.video-stage > img { width: 100%; height: 340px; object-fit: cover; }.play-button { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 1.1rem; backdrop-filter: blur(5px); }.video-controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px; background: linear-gradient(transparent,rgba(0,0,0,.85)); font-size: .62rem; }.video-controls i { flex: 1; height: 4px; border-radius: 999px; background: linear-gradient(90deg,#ff6b24 28%,#6d7782 28%); }.timeline-thumbs button { height: 68px; }

.edit-workspace { display: grid; grid-template-columns: 260px minmax(480px,1fr) 285px; gap: 9px; }.layers-panel, .edit-controls { padding: 0 9px 9px; }.layer-list { display: grid; gap: 5px; margin: 7px 0; }.layer-row { display: grid; grid-template-columns: 20px 48px 1fr 25px; align-items: center; gap: 6px; min-height: 54px; padding: 5px; border: 1px solid #263244; border-radius: 7px; background: #0e151e; color: #d9e0e8; text-align: left; }.layer-row.active { border-color: #f26222; background: rgba(255,99,31,.08); }.layer-row img { width: 48px; height: 42px; object-fit: cover; border-radius: 4px; }.layer-row strong, .layer-row small { display: block; }.layer-row strong { font-size: .64rem; }.layer-row small { margin-top: 3px; color: #7d8998; font-size: .52rem; }.layer-row b { color: #75808e; font-size: .6rem; }.edit-canvas { min-width: 0; padding: 8px; }.canvas-toolbar { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }.canvas-toolbar button, .canvas-toolbar select { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid #2c3949; border-radius: 6px; background: #101822; color: #c7d0da; }.canvas-toolbar button.active { border-color: #ff6c25; color: #ff985d; }.canvas-toolbar span { flex: 1; }.canvas-stage { position: relative; min-height: 515px; overflow: hidden; display: grid; place-items: center; border-radius: 7px; background: #05090d; }.canvas-stage img { width: 100%; height: 515px; object-fit: cover; }.selection-box { position: absolute; inset: 18% 30% 18% 18%; border: 1px dashed #ff8b4a; }.selection-box i { position: absolute; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #ff6b24; }.selection-box i:nth-child(1){left:-5px;top:-5px}.selection-box i:nth-child(2){right:-5px;top:-5px}.selection-box i:nth-child(3){left:-5px;bottom:-5px}.selection-box i:nth-child(4){right:-5px;bottom:-5px}.canvas-filmstrip { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 7px; }.canvas-filmstrip img { width: 100%; height: 54px; object-fit: cover; border-radius: 5px; }.edit-controls .field-label { margin-top: 10px; }.transform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }.transform-grid label { color: #7f8a98; font-size: .57rem; }.transform-grid input { margin-top: 4px; }.edit-controls .studio-primary { width: 100%; margin-top: 10px; }

.auto-edit { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 10px; }.auto-compare { padding: 0 10px 10px; }.compare-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 510px; overflow: hidden; border-radius: 8px; }.compare-stage > div { position: relative; overflow: hidden; }.compare-stage img { width: 100%; height: 510px; object-fit: cover; }.compare-stage > div span { position: absolute; z-index: 2; left: 10px; top: 10px; padding: 5px 8px; border-radius: 5px; background: rgba(0,0,0,.62); font-size: .62rem; }.compare-stage > i { position: absolute; z-index: 3; left: 50%; top: 0; bottom: 0; width: 2px; background: white; box-shadow: 0 0 8px rgba(0,0,0,.5); }.auto-controls { padding: 14px; }.auto-controls h3 { margin-top: 0; }.auto-controls .studio-primary { width: 100%; margin-top: 10px; }.auto-edit .recent-strip { grid-column: 1 / -1; }

.settings-workspace { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 10px; }.settings-main { padding: 0 10px 10px; }.settings-card-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 10px; }.setting-card { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-content: start; min-height: 170px; padding: 13px; border: 1px solid #263243; border-radius: 9px; background: #0e151e; }.setting-card h3 { margin: 5px 0; font-size: .82rem; }.setting-card p { margin: 0; color: #8995a3; font-size: .65rem; line-height: 1.4; }.setting-card .field-label, .setting-card .range-field { grid-column: 1 / -1; }.setting-index { color: #ff7a30; font-size: .57rem; font-weight: 800; }.settings-summary { padding: 15px; text-align: center; }.settings-summary h3 { margin-top: 0; }.settings-summary > strong { display: block; color: #ffb35d; font-size: .8rem; }.settings-summary p { color: #8995a3; font-size: .68rem; line-height: 1.5; }.summary-ring { width: 115px; height: 115px; display: grid; place-items: center; margin: 22px auto; border-radius: 50%; background: conic-gradient(#ff6c24 82%,#202b37 82%); }.summary-ring::before { content: ""; width: 88px; height: 88px; border-radius: 50%; background: #0a1118; }.summary-ring span { position: absolute; font-weight: 800; }

.workflow-workspace { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 10px; }.workflow-canvas { min-width: 0; padding: 0 12px 16px; }.workflow-nodes { display: flex; align-items: center; gap: 8px; min-height: 430px; overflow-x: auto; padding: 18px 0; }.workflow-node { flex: 0 0 180px; min-height: 190px; padding: 11px; border: 1px solid #2d3a4c; border-radius: 10px; background: #0f1721; }.workflow-node.active { border-color: #ed6728; box-shadow: 0 0 22px rgba(255,103,35,.12); }.workflow-node header { display: flex; align-items: center; gap: 7px; }.workflow-node header b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; background: rgba(255,106,35,.13); color: #ff8a45; }.workflow-node header span { color: #8190a0; font-size: .58rem; text-transform: uppercase; }.workflow-node header button { margin-left: auto; border: 0; background: none; color: #788493; }.workflow-node h3 { margin: 16px 0 7px; font-size: .78rem; }.workflow-node p { min-height: 48px; margin: 0; color: #7e8a99; font-size: .62rem; line-height: 1.4; }.workflow-connector { flex: 0 0 24px; color: #fb6d2a; font-style: normal; text-align: center; }.add-workflow-step { width: 100%; min-height: 43px; border: 1px dashed #3a485a; border-radius: 8px; background: #0c131c; color: #aeb9c5; }.workflow-sidebar { padding: 14px; }.workflow-sidebar h3 { margin-top: 0; }.workflow-sidebar .field-label { margin-top: 12px; }.workflow-log { margin-top: 16px; padding: 11px; border-radius: 8px; background: #101822; }.workflow-log strong, .workflow-log span, .workflow-log small { display: block; }.workflow-log strong { font-size: .7rem; }.workflow-log span { margin-top: 8px; color: #39d6a4; font-size: .64rem; }.workflow-log span i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #39d6a4; }.workflow-log small { margin-top: 4px; color: #7f8a98; font-size: .59rem; }

.api-workspace { display: grid; grid-template-columns: .9fr 1.25fr .95fr; gap: 10px; }.api-builder, .api-playground, .api-response { min-width: 0; padding: 0 11px 11px; }.api-builder .field-label { margin-top: 10px; }.api-builder .content-type-pills { margin-top: 10px; }.endpoint-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; padding: 10px; border: 1px solid #293747; border-radius: 7px; background: #0c131c; }.endpoint-row code { color: #cbd4df; }.endpoint-row span { color: #ff8c4b; font-size: .62rem; }.api-playground pre, .api-response pre { overflow: auto; margin: 0 0 10px; padding: 12px; border: 1px solid #273445; border-radius: 7px; background: #081018; color: #72d9ff; font: .65rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; }.api-playground pre { min-height: 385px; }.api-playground .studio-primary { width: 100%; }.api-response img { width: 100%; height: 230px; margin: 10px 0; object-fit: cover; border-radius: 7px; }.api-response pre { color: #5de4b6; }

.batch-workspace { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 10px; }.batch-main { padding: 0 10px 10px; }.batch-toolbar { margin: 10px 0; }.batch-table { display: grid; gap: 6px; }.batch-row { display: grid; grid-template-columns: 24px 60px minmax(130px,1fr) 145px 80px 30px; align-items: center; gap: 8px; min-height: 65px; padding: 6px 8px; border: 1px solid #273344; border-radius: 8px; background: #0e151e; }.batch-row img { width: 60px; height: 48px; border-radius: 5px; object-fit: cover; }.batch-row strong, .batch-row small { display: block; }.batch-row strong { font-size: .68rem; }.batch-row small { margin-top: 3px; color: #7b8796; font-size: .56rem; }.batch-row select { min-width: 0; padding: 8px; border: 1px solid #2f3d4f; border-radius: 6px; background: #101822; color: #cdd4dc; font-size: .6rem; }.batch-row > button { border: 0; background: none; color: #7b8796; }.batch-controls { padding: 14px; }.batch-controls h3 { margin-top: 0; }.batch-controls .field-label { margin-top: 12px; }.batch-controls .studio-primary { width: 100%; margin-top: 12px; }

.preset-workspace { padding: 0 11px 12px; }.preset-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 11px; }.preset-card { display: grid; grid-template-columns: 115px 1fr; align-items: center; min-height: 105px; padding: 0; overflow: hidden; border: 1px solid #283547; border-radius: 9px; background: #101721; color: #fff; text-align: left; }.preset-card:hover { border-color: #b3542c; }.preset-card img { width: 115px; height: 105px; object-fit: cover; }.preset-card span { padding: 10px; }.preset-card strong, .preset-card small { display: block; }.preset-card small { margin-top: 5px; color: #7e8a98; font-size: .6rem; }

.video-special { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 10px; }.video-special-main { padding: 0 10px 12px; }.video-special-main .panel-pro-title p { max-width: 680px; margin: 5px 0 0; color: #8b97a5; font-size: .67rem; }.special-preview { position: relative; height: 505px; overflow: hidden; margin-top: 10px; border-radius: 8px; background: #05090d; }.special-preview img { width: 100%; height: 100%; object-fit: cover; }.audio-timeline { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin-top: 10px; color: #7f8a98; font-size: .59rem; }.audio-timeline > div { position: relative; height: 34px; border-radius: 6px; background: repeating-linear-gradient(90deg,#20364a 0 3px,#101a24 3px 7px); }.audio-timeline i { display: block; height: 100%; background: rgba(255,105,35,.17); }.audio-timeline b { position: absolute; left: 32%; top: -4px; bottom: -4px; width: 2px; background: #ff6a22; }.special-controls { padding: 14px; }.special-controls h3 { margin-top: 0; }.special-controls .field-label { margin-top: 12px; }.frame-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.frame-pair button { overflow: hidden; padding: 0; border: 1px solid #344255; border-radius: 8px; background: #101721; color: #fff; }.frame-pair img { width: 100%; height: 105px; object-fit: cover; }.frame-pair span { display: block; padding: 7px; font-size: .62rem; }

.utility-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 12px 0; }.utility-card { min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; padding: 16px; border: 1px solid #273446; border-radius: 11px; background: radial-gradient(circle at 90% 0,rgba(255,102,31,.1),transparent 45%),#0d141d; color: #fff; text-align: left; }.utility-card:hover { border-color: #91502e; transform: translateY(-2px); }.utility-card > span { color: #ff813c; }.utility-card strong { font-size: .88rem; }.utility-card small { color: #7f8b99; font-size: .65rem; }

.workspace-mode-controls { grid-column: 1 / -1; display: grid; gap: 10px; }
.mode-control-card { display: grid; grid-template-columns: minmax(220px,1fr) minmax(250px,1fr) auto; align-items: center; gap: 18px; padding: 12px 14px; border: 1px solid #2a3848; border-radius: 10px; background: linear-gradient(100deg,#0e161f,#11151e); }
.mode-control-card strong, .mode-control-card small { display: block; }.mode-control-card small { margin-top: 3px; color: #8290a0; font-size: .62rem; }
.advanced-controls { border: 1px solid #263345; border-radius: 10px; background: #0b121a; }
.advanced-controls summary { min-height: 43px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; color: #ff9455; cursor: pointer; font-size: .7rem; font-weight: 800; }
.advanced-controls summary span { color: #748191; font-size: .59rem; font-weight: 600; }
.advanced-control-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px 13px; padding: 0 13px 12px; border-top: 1px solid #202c39; }

.create-pro-workspace { display: grid; grid-template-columns: minmax(330px,1.05fr) minmax(380px,1.1fr) 300px; gap: 10px; }
.create-pro-main { padding: 11px; }.pro-content-types { margin-bottom: 10px; }.pro-content-types button { flex: 1; }.pro-prompt textarea { min-height: 105px; }
.prompt-tool-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 10px; }.prompt-tool-row button { flex: 1 1 105px; min-height: 35px; padding-inline: 8px; font-size: .62rem; }
.model-choice-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }.model-choice { min-width: 0; overflow: hidden; padding: 0; border: 1px solid #293647; border-radius: 8px; background: #101721; color: #fff; text-align: left; }.model-choice.active { border-color: #ff6b24; box-shadow: 0 0 0 1px rgba(255,107,36,.45); }.model-choice img { width: 100%; height: 72px; object-fit: cover; }.model-choice span { display: block; padding: 7px; }.model-choice strong, .model-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.model-choice strong { font-size: .64rem; }.model-choice small { margin-top: 2px; color: #7d8997; font-size: .53rem; }
.create-parameter-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 10px 0; }.create-submit-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }.create-pro-main .advanced-controls { margin-top: 10px; }.create-pro-preview { min-width: 0; padding: 0 9px 9px; }.create-pro-preview .preview-stage, .create-pro-preview .preview-stage img { min-height: 420px; }.create-pro-preview .panel-pro-title > div { display: flex; }
.create-automation { padding: 0 11px 11px; }.automation-mode-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; margin: 10px 0; }.automation-steps { display: grid; gap: 6px; margin: 10px 0; padding: 0; list-style: none; }.automation-steps li { display: grid; grid-template-columns: 24px 1fr 26px; align-items: center; gap: 8px; min-height: 54px; padding: 6px; border: 1px solid #273445; border-radius: 8px; background: #0f1721; }.automation-steps li > b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #49596c; border-radius: 50%; color: #ff8f4e; font-size: .6rem; }.automation-steps strong, .automation-steps small { display: block; }.automation-steps strong { font-size: .64rem; }.automation-steps small { margin-top: 3px; color: #7f8b99; font-size: .54rem; }.automation-steps li > button { border: 0; background: none; color: #98a5b5; }.automation-options { margin-top: 10px; }.create-pro-results { grid-column: 1 / -1; }

.canvas-toolbar { flex-wrap: wrap; }.canvas-toolset, .compare-toggle { display: flex; gap: 5px; }.canvas-tool.active { border-color: #ff6c25; color: #ff985d; background: #2a1710; }
.canvas-filmstrip button { height: 54px; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #0e151e; }.canvas-filmstrip button.active { border-color: #ff6c25; }.canvas-filmstrip button img { height: 100%; }
.scene-row.active, .recent-card.active, .preset-card.active, .utility-card.active { border-color: #f36525; box-shadow: 0 0 0 1px rgba(255,104,39,.3); }

@media (max-width: 1320px) {
  .generation-workspace, .video-workspace { grid-template-columns: minmax(250px,.85fr) minmax(400px,1.2fr); }
  .generation-controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px 12px; }.generation-controls .panel-pro-title { grid-column: 1 / -1; }.generation-controls .studio-primary { align-self: end; }
  .edit-workspace { grid-template-columns: 230px minmax(430px,1fr); }.edit-controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 0 12px; }.edit-controls .panel-pro-title, .edit-controls .studio-primary { grid-column: 1 / -1; }
  .api-workspace { grid-template-columns: .9fr 1.1fr; }.api-response { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.api-response .panel-pro-title, .api-response .full-button { grid-column: 1 / -1; }
  .create-pro-workspace { grid-template-columns: minmax(330px,1fr) minmax(420px,1.15fr); }.create-automation { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,1fr); gap: 0 14px; }.create-automation .panel-pro-title, .create-automation .automation-mode-row, .create-automation .automation-steps { grid-column: 1 / -1; }
}

@media (max-width: 1050px) {
  .chat-layout, .director-grid, .settings-workspace, .workflow-workspace, .batch-workspace, .video-special, .auto-edit { grid-template-columns: 1fr; }
  .chat-context, .director-controls, .settings-summary, .workflow-sidebar, .batch-controls, .special-controls, .auto-controls { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 14px; }.chat-context .panel-pro-title, .director-controls .panel-pro-title, .chat-context > .context-item, .director-controls .studio-primary, .settings-summary > *, .workflow-sidebar > *, .batch-controls > *, .special-controls > *, .auto-controls > * { grid-column: auto; }.chat-context .panel-pro-title, .director-controls .panel-pro-title { grid-column: 1 / -1; }
  .project-overview { grid-template-columns: 145px 1fr; }.project-overview dl { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #24303f; }
  .auto-edit .recent-strip { grid-column: 1; }
  .special-preview, .compare-stage, .compare-stage img { height: 420px; min-height: 420px; }
  .utility-grid { grid-template-columns: repeat(2,1fr); }
  .create-pro-workspace { grid-template-columns: 1fr; }.create-pro-main, .create-pro-preview, .create-automation, .create-pro-results { grid-column: 1; }.create-automation { display: block; }
}

@media (max-width: 800px) {
  .studio-view { padding: 0 10px 20px; }.studio-header { align-items: stretch; flex-direction: column; }.tier-switch { width: 100%; }.studio-title-block p { font-size: .77rem; }
  .chat-welcome > div, .simple-creator-hero > div, .director-banner > div { width: 100%; padding: 24px; }.chat-welcome, .simple-creator-hero, .director-banner { min-height: 390px; display: flex; align-items: flex-end; }.chat-welcome::after, .simple-creator-hero::after, .director-banner::after { background: linear-gradient(0deg,#10131b 10%,rgba(16,19,27,.92) 48%,rgba(16,19,27,.1) 85%); }.chat-welcome > img, .simple-creator-hero > img { width: 100%; height: 65%; inset: 0 0 auto; }
  .composer-footer { align-items: stretch; flex-direction: column; }.composer-footer .studio-primary { margin-left: 0; }.content-type-pills { order: -1; }
  .recent-card-row { grid-template-columns: repeat(2,1fr); }
  .project-overview { grid-template-columns: 1fr; }.project-overview > img { height: 160px; }.production-steps { justify-content: flex-start; overflow-x: auto; }.production-steps > i { flex: 0 0 30px; }.production-step { flex: 0 0 auto; }
  .scene-row { grid-template-columns: 23px 58px 1fr 80px; }.scene-row > img { width: 58px; }.scene-row .scene-progress, .scene-row > small { display: none; }
  .generation-workspace, .video-workspace, .edit-workspace, .api-workspace { grid-template-columns: 1fr; }.prompt-panel, .generation-preview, .generation-controls, .video-preview, .layers-panel, .edit-canvas, .edit-controls, .api-builder, .api-playground, .api-response { grid-column: 1; }
  .generation-controls, .edit-controls, .api-response { display: block; }.preview-stage, .preview-stage img, .video-stage, .video-stage > img { min-height: 340px; height: 340px; }.canvas-stage, .canvas-stage img { min-height: 390px; height: 390px; }
  .settings-card-grid, .preset-grid { grid-template-columns: 1fr; }.workflow-nodes { align-items: stretch; flex-direction: column; }.workflow-node { width: 100%; flex-basis: auto; min-height: 150px; }.workflow-connector { transform: rotate(90deg); }
  .batch-row { grid-template-columns: 24px 55px 1fr 72px; }.batch-row select, .batch-row > button { display: none; }
  .api-response { grid-template-columns: 1fr; }.api-response .panel-pro-title, .api-response .full-button { grid-column: 1; }
  .chat-context, .director-controls, .settings-summary, .workflow-sidebar, .batch-controls, .special-controls, .auto-controls { display: block; }
  .workspace-tabs-label { flex-basis: 100%; min-height: 27px; justify-content: start; }.workspace-tab { flex-basis: calc(33.333% - 4px); min-width: 112px; }.advanced-control-grid { grid-template-columns: 1fr; }.mode-control-card { grid-template-columns: 1fr; gap: 5px; }.model-choice-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 520px) {
  .studio-title-block { align-items: flex-start; }.studio-title-icon { width: 39px; height: 39px; }.tier-switch { grid-template-columns: repeat(3,1fr); }.tier-button { min-width: 0; padding: 0 5px; }
  .recent-card-row { grid-template-columns: 1fr 1fr; }.recent-card img { height: 72px; }.simple-prompt-card, .project-brief-card { grid-template-columns: 1fr; }.simple-prompt-card > *, .project-brief-card > * { grid-column: 1; }.compact-field-grid { grid-template-columns: 1fr; }
  .project-overview h2 { font-size: 1.25rem; }.scene-row { grid-template-columns: 20px 48px 1fr; }.scene-row > img { width: 48px; }.scene-row .scene-status { display: none; }
  .preview-actions { grid-template-columns: 1fr; }.preview-stage, .preview-stage img, .video-stage, .video-stage > img { min-height: 275px; height: 275px; }.preview-thumbs button { height: 50px; }
  .generated-grid { grid-template-columns: 1fr; }.generated-grid img { height: 130px; }.message { max-width: 96%; }.message-actions { flex-wrap: wrap; }
  .compare-stage { grid-template-columns: 1fr; height: auto; min-height: 0; }.compare-stage img { height: 260px; min-height: 260px; }.compare-stage > i { display: none; }
  .utility-grid { grid-template-columns: 1fr; }.preset-card { grid-template-columns: 90px 1fr; }.preset-card img { width: 90px; }
}

/* Full mockup re-audit: tier-specific workspaces. */
.director-automation-board { min-width: 0; display: grid; gap: 9px; }
.automation-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.automation-metrics article { min-height: 72px; display: flex; align-items: center; gap: 10px; padding: 11px; }
.automation-metrics article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(255,108,36,.12); color: #ff7e35; }
.automation-metrics small,.automation-metrics strong { display: block; }.automation-metrics small { color: #84909e; font-size: .54rem; }.automation-metrics strong { margin-top: 3px; font-size: 1rem; }
.automation-scene-table { padding: 0 9px 9px; }
.automation-scene-table > article { min-height: 62px; display: grid; grid-template-columns: 26px 64px minmax(0,1fr) 78px minmax(80px,.7fr) 28px; align-items: center; gap: 8px; padding: 6px; border-top: 1px solid #202b38; }
.automation-scene-table img { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; }.automation-scene-table strong,.automation-scene-table small { display: block; }.automation-scene-table strong { font-size: .64rem; }.automation-scene-table small { margin-top: 3px; color: #7f8b99; font-size: .52rem; }
.automation-scene-table article > i,.automation-queue article > i { height: 6px; overflow: hidden; border-radius: 99px; background: #202b38; }.automation-scene-table article > i u,.automation-queue article > i u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff9c25,#ff5c20); }
.automation-scene-table article > button { border: 0; background: none; color: #8995a3; }
.automation-queue { padding: 0 9px 9px; }.automation-queue article { min-height: 47px; display: grid; grid-template-columns: minmax(0,1fr) minmax(90px,.8fr) 38px; align-items: center; gap: 9px; padding: 6px; border-top: 1px solid #202b38; }.automation-queue strong,.automation-queue small { display: block; }.automation-queue strong { font-size: .6rem; }.automation-queue small { margin-top: 2px; color: #7e8a98; font-size: .49rem; }.automation-queue b { color: #ff8b49; font-size: .55rem; }

.create-mode-workspace { display: grid; grid-template-columns: minmax(0,1.25fr) 340px; gap: 9px; align-items: start; }
.create-mode-source { min-width: 0; padding: 0 10px 10px; }.create-mode-source .panel-pro-title p { max-width: 620px; margin: 3px 0 0; color: #8793a1; font-size: .55rem; }.create-mode-source .panel-pro-title > button { align-self: center; }
.mode-canvas { position: relative; height: 470px; overflow: hidden; border: 1px solid #293748; border-radius: 9px; background: #080d12; }.mode-canvas > img { width: 100%; height: 100%; object-fit: cover; }.mode-canvas.has-mask::after { content: "Editing mask"; position: absolute; top: 14px; right: 14px; padding: 5px 8px; border-radius: 999px; background: #e94747; color: #fff; font-size: .54rem; font-weight: 800; }.paint-mask { position: absolute; top: 18%; right: 14%; width: 28%; height: 34%; border: 2px dashed #fff; border-radius: 45% 55% 50% 40%; background: rgba(255,75,75,.42); box-shadow: 0 0 22px rgba(255,53,53,.32); transform: rotate(-8deg); }.mode-canvas.is-outpaint { padding: 55px 80px; background: repeating-linear-gradient(135deg,#151a22 0,#151a22 10px,#10151c 10px,#10151c 20px); }.mode-canvas.is-outpaint img { border: 2px dashed #f07a2c; }.outpaint-frame { position: absolute; inset: 24px 36px; border: 2px dashed #ff7a2d; pointer-events: none; }.mode-canvas.is-outpaint > b { position: absolute; top: 31px; left: 50%; padding: 5px 8px; border-radius: 5px; background: #0b1118; color: #fff; font-size: .55rem; transform: translateX(-50%); }
.create-mode-source > .canvas-toolset { margin-top: 8px; }.create-mode-source .canvas-tool { width: auto; min-width: 64px; padding: 0 10px; }
.create-mode-settings { position: sticky; top: 82px; display: grid; gap: 9px; padding: 12px; }.create-mode-settings > h3 { margin: 0; }.create-mode-settings .advanced-controls { margin: 0; }.create-mode-settings > .studio-primary { min-height: 45px; }
.create-mode-result { grid-column: 1; padding: 0 9px 9px; }.create-mode-result .preview-stage,.create-mode-result .preview-stage img { height: 330px; min-height: 330px; }.create-mode-recent { grid-column: 1 / -1; }

.simple-image-workspace { width: min(720px,100%); display: grid; gap: 10px; margin: 0 auto; padding: 13px; }.simple-image-workspace > h3 { margin: 5px 0 0; font-size: .7rem; }.simple-style-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; }.simple-style-grid button { position: relative; min-width: 0; height: 88px; overflow: hidden; padding: 0; border: 1px solid #2d3949; border-radius: 8px; background: #0d151e; color: #fff; }.simple-style-grid button.active { border-color: #ff6c25; box-shadow: 0 0 0 1px #ff6c25,0 0 17px rgba(255,96,27,.14); }.simple-style-grid img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }.simple-style-grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 3px; background: linear-gradient(0deg,rgba(0,0,0,.9),transparent); font-size: .52rem; }.simple-aspects { grid-template-columns: repeat(6,1fr); margin: 0; }.simple-aspects small { display: block; margin-top: 3px; color: #818d9b; font-size: .45rem; }.simple-image-results .recent-strip { border: 0; padding: 0; }

.video-source-image { position: relative; width: 100%; height: 180px; overflow: hidden; padding: 0; border: 1px dashed #4a596b; border-radius: 9px; background: #0c131b; color: #fff; }.video-source-image img { width: 100%; height: 100%; object-fit: cover; }.video-source-image span { position: absolute; right: 9px; bottom: 9px; padding: 6px 8px; border-radius: 6px; background: rgba(5,8,12,.82); font-size: .55rem; }.video-source-panel .video-source-image { margin: 2px 0 9px; }

.creator-edit-workspace { display: grid; grid-template-columns: 320px minmax(0,1fr) 300px; gap: 9px; align-items: start; }.creator-edit-instructions,.creator-edit-settings { min-height: 580px; padding: 0 11px 11px; }.creator-edit-instructions h3 { margin: 14px 0 8px; font-size: .7rem; }.creator-reference-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.creator-reference-grid button { min-width: 0; height: 95px; display: grid; place-items: center; overflow: hidden; padding: 0; border: 1px dashed #405064; border-radius: 8px; background: #0d151e; color: #aeb8c4; }.creator-reference-grid img { width: 100%; height: 100%; object-fit: cover; }.creator-reference-grid small { display: block; }.creator-edit-canvas { min-width: 0; overflow: hidden; }.creator-edit-canvas .canvas-stage,.creator-edit-canvas .canvas-stage img { height: 490px; min-height: 490px; }.creator-edit-mask { position: absolute; top: 13%; left: 15%; width: 24%; height: 25%; border: 2px dashed rgba(255,255,255,.95); border-radius: 52% 48% 45% 55%; box-shadow: inset 0 0 35px rgba(255,126,42,.22); }.creator-versions { padding: 0 9px 9px; }.creator-versions .panel-pro-title { min-height: 44px; }.creator-edit-settings { display: grid; align-content: start; gap: 10px; }.creator-edit-settings > .studio-primary { min-height: 46px; margin-top: 5px; }.creator-edit-recent { grid-column: 1 / -1; }

.edit-control-workspace { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 9px; }.control-compare { min-width: 0; padding: 0 10px 10px; }.control-compare .compare-stage { height: 520px; }.control-compare .compare-stage img { min-height: 520px; }.control-compare .preview-thumbs { margin-top: 8px; }.control-inspector { position: sticky; top: 82px; display: grid; gap: 10px; padding: 12px; }.control-inspector > h3 { margin: 0; }.control-type-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }.control-type-grid button { min-height: 52px; padding: 4px; border: 1px solid #2c3949; border-radius: 7px; background: #0e161f; color: #aeb8c5; font-size: .54rem; }.control-type-grid button.active { border-color: #ff6c24; color: #fff; background: linear-gradient(110deg,#4c2117,#8f3019); }.control-inspector > .studio-primary { min-height: 47px; }

@media (max-width: 1180px) {
  .create-mode-workspace,.edit-control-workspace { grid-template-columns: 1fr; }.create-mode-settings,.control-inspector { position: static; }.create-mode-result { grid-column: 1; }
  .creator-edit-workspace { grid-template-columns: 1fr 1fr; }.creator-edit-canvas { grid-column: 1 / -1; grid-row: 1; }.creator-edit-instructions,.creator-edit-settings { min-height: 0; }.automation-metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .creator-edit-workspace { grid-template-columns: 1fr; }.creator-edit-canvas,.creator-edit-instructions,.creator-edit-settings { grid-column: 1; }.creator-edit-canvas { grid-row: auto; }
  .simple-style-grid,.simple-aspects { grid-template-columns: repeat(3,1fr); }.automation-scene-table > article { grid-template-columns: 22px 54px 1fr 70px; }.automation-scene-table article > i,.automation-scene-table article > button { display: none; }.mode-canvas { height: 350px; }.control-compare .compare-stage { height: auto; }.control-compare .compare-stage img { min-height: 300px; }
}
@media (max-width: 520px) {
  .automation-metrics { grid-template-columns: 1fr; }.simple-style-grid,.simple-aspects { grid-template-columns: repeat(2,1fr); }.mode-canvas.is-outpaint { padding: 40px; }.creator-reference-grid { grid-template-columns: repeat(2,1fr); }.control-type-grid { grid-template-columns: repeat(2,1fr); }
}

/* Chat Pro · settings / workflow / context */
.chat-pro-settings-shell { display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: 10px; align-items: start; }
.chat-pro-settings-main { min-width: 0; display: grid; gap: 10px; }
.chat-pro-settings-main .agent-hero { min-height: 142px; }
.pro-chat-inspector { top: 70px; min-height: calc(100vh - 82px); max-height: calc(100vh - 82px); padding: 0; }
.pro-chat-inspector .chat-panel-tabs { margin: 0; }
.pro-inspector-body { display: grid; gap: 7px; padding: 0 9px 72px; }
.pro-chat-inspector.pro-workflow .pro-inspector-body,.pro-chat-inspector.pro-context .pro-inspector-body { padding-bottom: 12px; }
.pro-profile-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; align-items: center; gap: 7px; padding: 7px; border: 1px solid #263343; border-radius: 8px; background: #0d151e; }
.pro-profile-row img { width: 42px; height: 36px; border-radius: 6px; object-fit: cover; }
.pro-profile-row strong,.pro-profile-row small { display: block; }.pro-profile-row strong { font-size: .63rem; }.pro-profile-row small { margin-top: 2px; overflow: hidden; color: #8591a0; font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.pro-profile-row > button { min-height: 29px; padding: 0 8px; border: 1px solid #3a4657; border-radius: 6px; background: #111925; color: #dbe1e8; font-size: .52rem; }.pro-profile-row .icon-more { width: 29px; padding: 0; }
.pro-inspector-group { padding: 7px 0 0; border-top: 1px solid #202a37; }.pro-inspector-group:first-of-type { border-top: 0; }
.pro-inspector-group h4,.group-title-row h4 { margin: 0 0 6px; font-size: .61rem; }
.group-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.group-title-row > button { min-height: 26px; padding: 0 8px; border: 1px solid #344255; border-radius: 6px; background: #0f1721; color: #d1d8e1; font-size: .51rem; }
.pro-option-card { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 6px; border: 1px solid #2b394a; border-radius: 8px; background: #0e161f; color: #fff; text-align: left; }
.pro-option-card img { width: 40px; height: 38px; border-radius: 6px; object-fit: cover; }.pro-option-card strong,.pro-option-card small { display: block; }.pro-option-card strong { font-size: .61rem; }.pro-option-card strong b { margin-left: 4px; padding: 1px 4px; border-radius: 999px; background: #6e46e8; font-size: .42rem; }.pro-option-card small { margin-top: 2px; color: #84909e; font-size: .5rem; }.pro-option-card i { color: #bdc6d1; font-size: 1rem; font-style: normal; }
.pro-inspector-group .field-label { margin-top: 6px; }.pro-inspector-group .range-field { margin-top: 7px; }.pro-output-grid { display: grid; grid-template-columns: 1.15fr .85fr .7fr; gap: 6px; }
.pro-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 5px; }.pro-toggle-grid .toggle-row { min-height: 32px; padding: 4px 0; }
.pro-collapsible { border-top: 1px solid #202a37; }.pro-collapsible summary { padding: 8px 0; color: #d8dee6; cursor: pointer; font-size: .58rem; font-weight: 760; }.pro-collapsible p { margin: 0 0 8px; color: #8994a2; font-size: .53rem; line-height: 1.45; }
.pro-workflow-steps article { grid-template-columns: 24px minmax(0,1fr) auto auto; }.pro-workflow-steps article em { color: #98a4b1; font-size: .47rem; font-style: normal; }
.pro-expand-row { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border: 1px solid #293646; border-radius: 7px; background: #0d151e; color: #dce2e9; }.pro-expand-row strong { font-size: .58rem; }.pro-expand-row span { color: #8e9aa8; font-size: .51rem; }
.context-thumb-row { display: flex; gap: 5px; }.context-thumb,.context-add { position: relative; width: 57px; height: 45px; overflow: hidden; padding: 0; border: 1px solid #38475a; border-radius: 6px; background: #0c141d; color: #bec7d2; }.context-thumb img { width: 100%; height: 100%; object-fit: cover; }.context-thumb span { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(4,7,11,.8); font-size: .5rem; }.context-thumb-row.compact .context-thumb { width: 70px; height: 38px; }
.context-card-stack { display: grid; gap: 6px; }.pro-memory-card { padding: 6px; border: 1px solid #2b3848; border-radius: 7px; background: #0d151e; }.pro-memory-card h4 { margin-bottom: 5px; }.pro-memory-card > div { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 7px; }.pro-memory-card img { width: 42px; height: 35px; border-radius: 5px; object-fit: cover; }.pro-memory-card strong,.pro-memory-card small { display: block; }.pro-memory-card strong { font-size: .57rem; }.pro-memory-card small { margin-top: 2px; color: #83909e; font-size: .47rem; }.pro-memory-card button { border: 0; background: none; color: #ff8a31; }
.locked-context p { margin: 0; padding: 7px; border-left: 2px solid #ff8a31; border-radius: 0 6px 6px 0; background: #0d151e; color: #aeb8c4; font-size: .51rem; line-height: 1.45; }
.context-bottom-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }.context-bottom-grid section { padding: 7px; border: 1px solid #293646; border-radius: 7px; background: #0d151e; }.context-bottom-grid h4 { margin: 0 0 5px; font-size: .54rem; }.context-bottom-grid label { display: block; margin-top: 4px; color: #aeb7c2; font-size: .46rem; }.context-bottom-grid input { margin: 0 4px 0 0; accent-color: #ff6c24; }.context-bottom-grid button { min-height: 27px; padding: 0 7px; border: 1px solid #354357; border-radius: 6px; background: #111a25; color: #d6dde5; font-size: .48rem; }
.pro-inspector-footer { position: sticky; z-index: 5; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; padding: 8px 10px; border-top: 1px solid #293647; background: rgba(7,13,19,.97); box-shadow: 0 -10px 22px rgba(3,6,10,.6); }.pro-inspector-footer span { color: #8f9aa8; font-size: .49rem; }.pro-inspector-footer span strong { display: block; margin-top: 2px; color: #f0b35f; }.pro-inspector-footer button { min-width: 125px; }

@media (min-width: 1181px) {
  .chat-pro-settings-main .chat-production-panel { height: calc(100vh - 234px); min-height: 650px; max-height: 810px; }
}
@media (max-width: 1180px) {
  .chat-pro-settings-shell { grid-template-columns: 1fr; }
  .pro-chat-inspector { position: static; min-height: 0; max-height: none; }
}
@media (max-width: 800px) {
  .pro-toggle-grid,.context-bottom-grid { grid-template-columns: 1fr; }
  .pro-output-grid { grid-template-columns: 1fr 1fr; }
}

/* Agent Mode — rebuilt from the tiered Chat and Director references. */
.agent-mode-page { display: grid; gap: 10px; }
.agent-hero { position: relative; min-height: 172px; display: flex; align-items: flex-end; overflow: hidden; padding: 25px 28px; border: 1px solid #353042; border-radius: 14px; background-color: #15121d; background-image: linear-gradient(90deg,rgba(7,10,16,.96) 0%,rgba(8,10,16,.82) 37%,rgba(8,10,16,.04) 72%),url("./assets/hero-director-v3.png"); background-size: cover; background-position: center 10%; box-shadow: inset 0 0 60px rgba(0,0,0,.14); }
.agent-hero.overview { min-height: 285px; align-items: center; }
.agent-hero.director { min-height: 225px; }
.agent-hero-copy { position: relative; z-index: 2; width: min(58%,720px); }
.agent-eyebrow { display: block; margin-bottom: 7px; color: #ffe0c7; font-size: .65rem; font-weight: 850; letter-spacing: .25em; text-transform: uppercase; }
.agent-hero h1 { max-width: 720px; margin: 0; font-size: clamp(1.8rem,3.8vw,3.6rem); line-height: .98; letter-spacing: -.052em; text-wrap: balance; }
.agent-hero:not(.overview) h1 { font-size: clamp(1.7rem,3vw,2.7rem); }
.agent-hero h1::after { content: ""; display: block; width: 74px; height: 3px; margin-top: 12px; border-radius: 99px; background: linear-gradient(90deg,#ff9b22,#ff4e1d); }
.agent-hero p { max-width: 610px; margin: 10px 0 0; color: #d7dce5; font-size: .82rem; line-height: 1.5; }
.agent-tier-switch { position: absolute; z-index: 3; top: 15px; right: 15px; background: rgba(7,10,16,.78); backdrop-filter: blur(10px); }
.agent-overview-composer { margin: -72px 24px 0; z-index: 4; box-shadow: 0 16px 44px rgba(0,0,0,.42),0 0 30px rgba(145,64,203,.12); }
.agent-overview-composer textarea { min-height: 74px; }
.chat-overview-grid { display: grid; grid-template-columns: minmax(0,1fr) 315px; gap: 10px; }
.chat-overview-grid .recent-strip { height: 100%; }
.recent-conversations { padding-bottom: 8px; }
.recent-conversations > button { width: calc(100% - 16px); min-height: 58px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; margin: 7px 8px 0; padding: 7px; border: 1px solid #263343; border-radius: 8px; background: #0e161f; color: #fff; text-align: left; }
.recent-conversations > button:hover { border-color: #b95125; background: #151a23; }
.recent-conversations svg { width: 20px; height: 20px; color: #ff7834; }
.recent-conversations strong,.recent-conversations small { display: block; }.recent-conversations strong { font-size: .68rem; }.recent-conversations small { margin-top: 3px; color: #7f8b99; font-size: .56rem; }

.chat-production-layout,.chat-creator-layout { display: grid; grid-template-columns: minmax(0,1fr) 325px; gap: 10px; align-items: start; }
.chat-production-panel { min-height: 780px; }
.chat-production-panel.has-suggestions { grid-template-rows: auto 1fr auto auto; }
.chat-inline-suggestions { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 7px 11px 0; white-space: nowrap; }
.chat-inline-suggestions strong { flex: 0 0 auto; color: #f5f7fa; font-size: .59rem; }
.chat-inline-suggestions button { flex: 0 0 auto; min-height: 30px; padding: 0 9px; border: 1px solid #2f3b4c; border-radius: 7px; background: #101721; color: #bdc6d1; font-size: .54rem; }
.chat-inline-suggestions button:hover { border-color: #d45c29; color: #fff; }
.chat-production-panel .message-list { max-height: 605px; }
.chat-production-panel .message { max-width: 96%; }
.chat-production-panel .agent-message > div { min-width: 0; width: 100%; }
.chat-reference-row { display: flex; gap: 6px; margin: 9px 0 5px; }
.chat-reference-row img,.chat-reference-row button { width: 58px; height: 44px; border-radius: 6px; object-fit: cover; }
.chat-reference-row button { border: 1px dashed #4a586a; background: #0d151f; color: #aeb8c5; }
.generation-plan { display: grid; gap: 4px; margin-top: 10px; padding: 9px; border-left: 2px solid #ff7028; border-radius: 0 7px 7px 0; background: #0d151f; }
.generation-plan strong { margin-bottom: 2px; color: #ff9b5f; font-size: .68rem; }.generation-plan span { color: #aeb8c5; font-size: .59rem; }
.chat-output-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 10px; }
.chat-output-grid article { min-width: 0; overflow: hidden; border: 1px solid #2b3849; border-radius: 8px; background: #0b1219; }
.chat-output-grid img { width: 100%; height: 115px; object-fit: cover; }
.chat-output-grid article > div { display: grid; grid-template-columns: auto 1fr; gap: 4px; padding: 5px; }.chat-output-grid b { grid-row: 1 / 3; display: grid; place-items: center; width: 24px; color: #ff8a45; font-size: .57rem; }.chat-output-grid button { min-height: 22px; padding: 0; border: 0; background: none; color: #9da9b7; font-size: .52rem; text-align: left; }
.production-composer { border-color: #743d70; background: linear-gradient(120deg,#111923,#161421); }.production-composer .composer-tools { display: flex; align-items: center; gap: 8px; }.production-composer .content-type-pills { margin-left: auto; }.production-composer #chat-send { min-width: 105px; }

.chat-inspector,.creator-setup { position: sticky; top: 82px; max-height: calc(100vh - 94px); overflow-y: auto; padding: 0 12px 12px; scrollbar-width: thin; }
.chat-panel-tabs,.director-control-tabs { position: sticky; z-index: 4; top: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 0 -12px 10px; padding: 7px; border-bottom: 1px solid #273343; background: rgba(7,13,19,.96); backdrop-filter: blur(8px); }
.chat-panel-tabs button,.director-control-tabs button { min-height: 34px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #9da9b7; font-size: .63rem; font-weight: 760; }
.chat-panel-tabs button.active,.director-control-tabs button.active { border-color: #cf5423; color: #fff; background: linear-gradient(105deg,#712b18,#d85422); }
.chat-panel-tabs .pro-locked-tab { position: relative; cursor: not-allowed; opacity: .48; }
.chat-panel-tabs .pro-locked-tab span { margin-left: 3px; color: #ffad48; font-size: .45rem; letter-spacing: .07em; }
.chat-panel-content { display: none; }.chat-panel-content.active { display: block; }
.inspector-heading { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; }.inspector-heading h3,.inspector-heading p { margin: 0; }.inspector-heading p { margin-top: 3px; color: #7e8a99; font-size: .6rem; }.inspector-heading > button { border: 0; background: transparent; color: #ff8c4c; font-size: .59rem; }
.chat-panel-content .field-label,.creator-setup .field-label { margin-top: 10px; }.chat-panel-content h4 { margin: 13px 0 4px; font-size: .72rem; }
.inspector-details { margin-top: 10px; border: 1px solid #263344; border-radius: 8px; background: #0d151e; }.inspector-details summary { padding: 9px; color: #ff9353; cursor: pointer; font-size: .65rem; font-weight: 760; }.inspector-details > label { margin: 0 9px 9px; }
.tool-chip-row,.reusable-blocks { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }.tool-chip-row span,.reusable-blocks span { padding: 5px 7px; border: 1px solid #324054; border-radius: 999px; color: #aab4c1; font-size: .55rem; }.reusable-blocks strong { width: 100%; font-size: .66rem; }
.inspector-steps { display: grid; gap: 5px; margin: 10px 0; }.inspector-steps article { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; padding: 7px; border: 1px solid #263343; border-radius: 7px; background: #0e161f; }.inspector-steps article > b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; background: rgba(255,105,38,.13); color: #ff8a45; font-size: .57rem; }.inspector-steps strong,.inspector-steps small { display: block; }.inspector-steps strong { font-size: .63rem; }.inspector-steps small { margin-top: 2px; color: #758292; font-size: .53rem; }
.context-source { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 8px; min-height: 49px; padding: 6px 0; border-bottom: 1px solid #202b38; }.context-source > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(255,105,35,.1); color: #ff8a43; }.context-source svg { width: 15px; height: 15px; }.context-source strong,.context-source small { display: block; }.context-source strong { font-size: .63rem; }.context-source small { margin-top: 2px; color: #778494; font-size: .53rem; }
.creator-setup { padding-top: 8px; }.creator-setup .content-type-pills { margin-top: 8px; }.aspect-choice { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 12px 0; }.aspect-choice button { min-height: 38px; border: 1px solid #2e3b4c; border-radius: 7px; background: #0e161f; color: #b1bbc8; }.aspect-choice button.active { border-color: #ff702b; color: #fff; background: #2a1710; }
.creator-setup-content { display: none; }.creator-setup-content.active { display: block; }
.creator-setup-tabs button { min-width: 0; }
.creator-setup .panel-pro-title > button { border: 0; background: transparent; color: #79caff; font-size: .58rem; }
.creator-setup-content .aspect-choice { grid-template-columns: repeat(auto-fit,minmax(55px,1fr)); }
.image-tool-tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border: 1px solid #202b38; border-radius: 10px; background: #090f16; }
.image-tool-tabs button { flex: 1 1 115px; min-height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: #0e161f; color: #aeb8c5; font-size: .64rem; }
.image-tool-tabs button:hover { color: #fff; border-color: #4a596a; }.image-tool-tabs button.active { border-color: #e15e25; color: #fff; background: linear-gradient(105deg,#702919,#d75221); box-shadow: 0 0 14px rgba(255,96,28,.13); }
.video-mode-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; padding: 5px; border: 1px solid #202b38; border-radius: 10px; background: #090f16; }
.video-mode-tabs button { flex: 1 1 125px; min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; background: #0e161f; color: #aeb8c5; font-size: .65rem; font-weight: 750; }
.video-mode-tabs button:hover { color: #fff; border-color: #4a596a; }
.video-mode-tabs button.active { border-color: #e15e25; color: #fff; background: linear-gradient(105deg,#702919,#d75221); box-shadow: 0 0 14px rgba(255,96,28,.13); }

@media (min-width: 1181px) {
  .chat-production-layout .chat-production-panel,
  .chat-creator-layout .chat-production-panel { height: calc(100vh - 262px); min-height: 620px; max-height: 780px; }
  .chat-production-layout .chat-production-panel .message-list,
  .chat-creator-layout .chat-production-panel .message-list { max-height: none; }
  .chat-production-layout .chat-inspector,
  .chat-creator-layout .creator-setup { min-height: 620px; max-height: calc(100vh - 262px); }
}
.prompt-suggestion-strip,.starting-points { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding: 10px; border: 1px solid #202b38; border-radius: 10px; background: #0a1118; }.prompt-suggestion-strip strong,.starting-points strong { flex: 0 0 auto; color: #ff914e; font-size: .67rem; }.prompt-suggestion-strip button,.starting-points button { flex: 0 0 auto; min-height: 34px; padding: 0 11px; border: 1px solid #2d3a4b; border-radius: 7px; background: #101822; color: #cbd2da; font-size: .62rem; }

.director-simple-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(310px,.85fr); gap: 10px; }.director-simple-grid .project-brief-card { display: block; padding: 0 12px 13px; }.director-simple-grid .project-brief-card textarea { width: 100%; margin: 10px 0; }.director-simple-grid .project-brief-card > .studio-secondary { margin-right: 7px; }.director-simple-grid h3 { margin: 16px 0 8px; font-size: .76rem; }
.goal-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }.goal-grid button { min-height: 48px; padding: 5px; border: 1px solid #2e3b4c; border-radius: 8px; background: #0e161f; color: #bbc5d0; font-size: .61rem; }.goal-grid button.active { border-color: #ff6c24; color: #fff; background: linear-gradient(110deg,#4b2118,#972f14); box-shadow: inset 0 0 0 1px rgba(255,120,49,.22); }
.creative-flow { display: flex; align-items: center; justify-content: space-between; gap: 5px; }.creative-flow div { position: relative; flex: 1; display: grid; justify-items: center; gap: 4px; color: #7e8997; font-size: .55rem; }.creative-flow div:not(:last-child)::after { content: ""; position: absolute; top: 12px; left: 65%; width: 70%; height: 1px; background: #344153; }.creative-flow b { z-index: 1; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #354355; border-radius: 50%; background: #0c131b; }.creative-flow .active { color: #ff8b43; }.creative-flow .active b { border-color: #ff6a22; box-shadow: 0 0 13px rgba(255,106,34,.25); }
.plan-preview { padding-bottom: 10px; }.plan-preview > img { width: calc(100% - 20px); height: 190px; margin: 10px; border-radius: 8px; object-fit: cover; }.plan-scene-list { display: grid; gap: 6px; padding: 0 10px; }.plan-scene-list button { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; padding: 5px; border: 1px solid #263344; border-radius: 7px; background: #0d151e; color: #fff; text-align: left; }.plan-scene-list img { width: 72px; height: 47px; border-radius: 5px; object-fit: cover; }.plan-scene-list b,.plan-scene-list strong,.plan-scene-list small { display: block; }.plan-scene-list b { color: #ff8641; font-size: .51rem; text-transform: uppercase; }.plan-scene-list strong { margin-top: 2px; font-size: .65rem; }.plan-scene-list small { margin-top: 2px; color: #7d8997; font-size: .53rem; }
.creator-brief { display: grid; grid-template-columns: 1.4fr 1fr 220px auto; align-items: end; gap: 10px; padding: 12px; }.creator-brief textarea { width: 100%; min-height: 75px; margin-top: 5px; padding: 10px; border: 1px solid #2c394a; border-radius: 8px; background: #0c141d; color: #fff; resize: vertical; }.creator-brief strong { display: block; margin-bottom: 7px; font-size: .65rem; }.creator-brief .goal-grid { grid-template-columns: repeat(3,1fr); }
.creator-director-grid { display: grid; grid-template-columns: minmax(0,1fr) 295px; gap: 10px; }.creator-plan-stack { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }.creator-plan-stack > article { min-height: 120px; display: grid; grid-template-columns: auto 1fr; gap: 7px; padding: 10px; }.creator-plan-stack > article > b { color: #ff7934; font-size: .6rem; }.creator-plan-stack h3 { margin: 0 0 5px; font-size: .69rem; }.creator-plan-stack p { margin: 0; color: #84909e; font-size: .57rem; line-height: 1.45; }.creator-plan-stack > article > button { grid-column: 1 / -1; align-self: end; border: 0; background: transparent; color: #ff8b4b; text-align: left; font-size: .57rem; }.creator-scene-builder { grid-column: 1 / -1; padding: 0 9px 9px; }.creator-scene-builder #scene-table { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }.scene-builder-card { overflow: hidden; padding: 0; border: 1px solid #293647; border-radius: 8px; background: #0d151e; color: #fff; text-align: left; }.scene-builder-card img { width: 100%; height: 85px; object-fit: cover; }.scene-builder-card span { display: block; padding: 7px; }.scene-builder-card b,.scene-builder-card strong,.scene-builder-card small { display: block; }.scene-builder-card b { color: #ff8541; font-size: .51rem; }.scene-builder-card strong { margin-top: 2px; font-size: .63rem; }.scene-builder-card small { margin-top: 2px; color: #7c8896; font-size: .52rem; }
.creator-project-sidebar { padding: 12px; }.creator-project-sidebar h3 { margin: 5px 0 9px; font-size: .72rem; }.creator-project-sidebar .field-label { margin-top: 9px; }.check-row { display: flex; align-items: center; gap: 7px; padding: 6px 0; color: #bdc6d0; font-size: .61rem; }.check-row input { accent-color: #ff6a23; }.creator-project-sidebar .full-button { margin-top: 7px; }
.director-control-tabs { margin: 0 -12px 8px; }.director-controls .inspector-heading { margin-top: 2px; }.automation-inspector .toggle-row { padding-block: 8px; }
.scene-timeline { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #202b38; }.scene-timeline button { position: relative; height: 70px; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 7px; background: #0c131b; color: #fff; }.scene-timeline button.active { border-color: #ff6b25; }.scene-timeline img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }.scene-timeline span { position: absolute; left: 5px; bottom: 4px; padding: 3px 5px; border-radius: 4px; background: rgba(0,0,0,.64); font-size: .51rem; }
.render-queue-strip { display: grid; grid-template-columns: auto auto auto auto minmax(120px,1fr) auto; align-items: center; gap: 13px; padding: 10px 13px; color: #9ba7b5; font-size: .62rem; }.render-queue-strip > strong { color: #fff; }.render-queue-strip > i { height: 6px; overflow: hidden; border-radius: 99px; background: #222d3a; }.render-queue-strip > i b { display: block; height: 100%; background: linear-gradient(90deg,#ff9c25,#ff5b20); }.render-queue-strip button { border: 0; background: transparent; color: #ff914d; }

/* Chat Pro: dedicated creative canvas with a full-height conversation rail. */
.chat-pro-shell { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 10px; align-items: stretch; }
.chat-pro-main { min-width: 0; display: grid; gap: 10px; }
.chat-pro-hero { position: relative; min-height: 535px; overflow: hidden; border: 1px solid #303141; border-radius: 14px; background-color: #131018; background-image: linear-gradient(90deg,rgba(7,10,15,.96) 0%,rgba(7,10,15,.82) 38%,rgba(7,10,15,.05) 74%),url("./assets/hero-director-v3.png"); background-position: center 8%; background-size: cover; }
.chat-pro-copy { position: relative; z-index: 2; width: min(60%,680px); padding: 68px 45px 190px; }
.chat-pro-copy h1 { margin: 0; font-size: clamp(2.2rem,4vw,4.25rem); line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; }
.chat-pro-copy h1 span { color: #ff762f; }
.chat-pro-copy p { max-width: 560px; margin: 14px 0 0; color: #e3e5ea; font-size: .88rem; line-height: 1.5; }
.pro-tier-switch { position: absolute; z-index: 5; top: 16px; right: 16px; background: rgba(7,10,16,.78); backdrop-filter: blur(10px); }
.chat-pro-composer { position: absolute; z-index: 4; left: 26px; right: 26px; bottom: 24px; min-height: 148px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px 18px; border-color: #945088; background: linear-gradient(120deg,rgba(20,22,30,.97),rgba(22,18,29,.97)); box-shadow: 0 15px 35px rgba(0,0,0,.28); }
.chat-pro-composer textarea { min-height: 60px; font-size: .84rem; }
.chat-pro-composer .composer-footer { flex-wrap: nowrap; }
.chat-pro-composer .content-type-pills { margin-left: auto; }
.chat-pro-composer .studio-primary { min-width: 145px; }
.chat-prompt-gallery { min-width: 0; padding: 0 2px 2px; }
.chat-prompt-heading { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-prompt-heading > div { display: flex; align-items: center; gap: 9px; }.chat-prompt-heading > div > span { color: #ff7a2f; font-size: 1.4rem; }.chat-prompt-heading h2 { margin: 0; font-size: .88rem; }.chat-prompt-heading > button { border: 0; background: transparent; color: #aeb8c5; font-size: .63rem; }
.chat-prompt-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.chat-prompt-card { min-width: 0; overflow: hidden; padding: 0; border: 1px solid #283547; border-radius: 9px; background: #0d151e; color: #fff; text-align: left; }
.chat-prompt-card:hover { border-color: #c95728; transform: translateY(-1px); }
.chat-prompt-card.active,.pro-conversation-rail > button.active { border-color: #f36b2c; box-shadow: 0 0 0 1px rgba(255,105,38,.28),0 0 18px rgba(255,91,28,.1); }
.chat-prompt-card img { width: 100%; height: 110px; object-fit: cover; }
.chat-prompt-card > span { min-height: 58px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; padding: 8px 9px; }
.chat-prompt-card strong { font-size: .62rem; line-height: 1.35; }.chat-prompt-card b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #17202b; color: #cbd3dd; }
.pro-conversation-rail { min-height: 100%; align-self: stretch; padding-bottom: 8px; }
.pro-conversation-rail .panel-pro-title { min-height: 52px; }.pro-conversation-rail .panel-pro-title > button { border: 0; background: transparent; color: #b8c1cc; font-size: .59rem; }
.recent-conversations.pro-conversation-rail > button { width: calc(100% - 16px); min-height: 91px; grid-template-columns: 82px minmax(0,1fr) auto; gap: 10px; margin: 7px 8px 0; padding: 7px; }
.pro-conversation-rail > button > img { width: 82px; height: 72px; border-radius: 7px; object-fit: cover; }
.pro-conversation-rail > button > span { min-width: 0; }.pro-conversation-rail > button > span strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; }.pro-conversation-rail > button > span small { margin-top: 5px; }.pro-conversation-rail > button > span small:last-child { display: flex; align-items: center; gap: 4px; color: #b1bbc7; }.pro-conversation-rail > button > span svg { width: 13px; height: 13px; color: #b1bbc7; }.pro-conversation-rail > button > b { align-self: center; color: #778493; font-size: .8rem; }

@media (max-width: 1180px) {
  .chat-pro-shell { grid-template-columns: 1fr; }
  .pro-conversation-rail { min-height: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 0 2px; }
  .pro-conversation-rail .panel-pro-title { grid-column: 1 / -1; }
  .recent-conversations.pro-conversation-rail > button { width: calc(100% - 16px); }
  .chat-production-layout,.chat-creator-layout,.director-simple-grid,.creator-director-grid { grid-template-columns: 1fr; }
  .chat-inspector,.creator-setup { position: static; max-height: none; }
  .creator-project-sidebar { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 14px; }.creator-project-sidebar h3 { grid-column: 1 / -1; }
  .creator-brief { grid-template-columns: 1fr 1fr; }.creator-plan-stack { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 800px) {
  .chat-pro-hero { min-height: 650px; background-position: 62% 6%; }
  .chat-pro-copy { width: 100%; padding: 95px 22px 250px; }
  .chat-pro-copy h1 { max-width: 540px; font-size: clamp(2.05rem,8vw,3.2rem); }
  .chat-pro-copy p { max-width: 520px; }
  .pro-tier-switch { left: 14px; right: 14px; width: auto; }
  .chat-pro-composer { left: 14px; right: 14px; bottom: 14px; min-height: 218px; }
  .chat-pro-composer .composer-footer { align-items: stretch; flex-direction: column; }
  .chat-pro-composer .content-type-pills { width: 100%; margin-left: 0; }
  .chat-pro-composer .studio-primary { width: 100%; }
  .chat-prompt-grid { grid-template-columns: repeat(2,1fr); }
  .pro-conversation-rail { grid-template-columns: 1fr; }
  .pro-conversation-rail .panel-pro-title { grid-column: 1; }
  .agent-hero { min-height: 310px; align-items: flex-end; padding: 20px; background-position: 63% 10%; }.agent-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#090d13 4%,rgba(9,13,19,.9) 42%,transparent 78%); }.agent-hero-copy { z-index: 2; width: 100%; }.agent-hero h1,.agent-hero:not(.overview) h1 { font-size: 2rem; }.agent-hero p { font-size: .74rem; }.agent-tier-switch { left: 12px; right: 12px; width: auto; }
  .agent-overview-composer { margin: -30px 8px 0; }.chat-overview-grid { grid-template-columns: 1fr; }.chat-output-grid { grid-template-columns: repeat(2,1fr); }.production-composer .composer-tools { align-items: stretch; flex-direction: column; }.production-composer .content-type-pills { width: 100%; margin-left: 0; }.production-composer #chat-send { width: 100%; }
  .creator-plan-stack { grid-template-columns: 1fr 1fr; }.creator-scene-builder #scene-table { grid-template-columns: repeat(2,1fr); }.creator-brief { grid-template-columns: 1fr; }.goal-grid { grid-template-columns: repeat(2,1fr); }.render-queue-strip { grid-template-columns: repeat(2,1fr); }.render-queue-strip > i { grid-column: 1 / -1; }.scene-timeline { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 520px) {
  .chat-pro-hero { min-height: 690px; }
  .chat-pro-copy { padding-inline: 18px; }
  .chat-pro-copy h1 { font-size: 2rem; }
  .chat-prompt-grid { grid-template-columns: 1fr; }
  .chat-prompt-card { display: grid; grid-template-columns: 120px 1fr; }
  .chat-prompt-card img { height: 92px; }
  .chat-prompt-card > span { min-height: 92px; }
  .chat-output-grid,.creator-plan-stack,.creator-scene-builder #scene-table { grid-template-columns: 1fr; }.chat-output-grid img { height: 160px; }.creator-project-sidebar { display: block; }.plan-preview > img { height: 145px; }.chat-panel-tabs,.director-control-tabs { overflow-x: auto; grid-template-columns: repeat(3,minmax(90px,1fr)); }
}

/* Mascot safe area: scale the full artwork to the available height, never cover-crop a face. */
.agent-hero,
.chat-pro-settings-main .agent-hero,
.agent-hero.director { min-height: 300px; align-items: center; isolation: isolate; background: radial-gradient(ellipse at 85% 80%,#51251f 0%,#17131f 48%,#0a0e15 78%); }
.agent-hero-art { position: absolute; z-index: 0; right: 0; bottom: 0; width: auto; max-width: none; height: calc(100% - 52px); max-height: 280px; object-fit: contain; pointer-events: none; mask-image: linear-gradient(90deg,transparent 0%,#000 25%),linear-gradient(180deg,transparent 0%,#000 13%); mask-composite: intersect; }
.agent-hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,#0a0e15 0%,rgba(10,14,21,.96) 35%,rgba(10,14,21,.55) 53%,transparent 70%); pointer-events: none; }
.agent-hero-copy { width: 56%; }
.agent-hero:not(.overview) h1 { font-size: clamp(1.65rem,2.6vw,2.45rem); }
.agent-hero .agent-tier-switch { z-index: 3; }
.simple-creator-hero > img { width: auto; max-width: none; height: 100%; object-fit: contain; object-position: right center; }
.video-source-image img,
.video-stage > img,
.special-preview > img { object-fit: contain; object-position: center; background: #090d14; }
.video-source-image { background: #090d14; }
.inspiration-panel img { right: 0; bottom: 0; height: 96%; width: 55%; object-fit: contain; object-position: right bottom; }

@media (max-width: 800px) {
  .agent-hero,
  .chat-pro-settings-main .agent-hero,
  .agent-hero.director { min-height: 0; display: block; padding: 0 18px 22px; }
  .agent-hero-art { top: 60px; bottom: auto; right: -20px; height: 205px; max-height: none; }
  .agent-hero::before { background: linear-gradient(0deg,#0a0e15 0%,#0a0e15 30%,transparent 56%); }
  .agent-hero::after { display: none; }
  .agent-hero-copy { width: 100%; padding-top: 285px; }
  .agent-hero:not(.overview) h1 { font-size: 1.9rem; }
  .simple-creator-hero > img { width: auto; height: 215px; right: -20px; top: 0; }
  .simple-creator-hero > div { padding-top: 230px; }
  .chat-pro-hero { min-height: 850px; background-image: url("./assets/hero-director-v3.png"); background-size: auto 250px; background-position: right -20px top 60px; background-repeat: no-repeat; }
  .chat-pro-copy { width: 100%; padding: 330px 18px 260px; }
  .hero .hero-director { object-fit: contain; object-position: right top; width: auto; max-width: none; height: 230px; right: -20px; }
  .hero .hero-copy { padding-top: 250px; }
}

/* Chat tiers share the same outer geometry; only their workspace contents change. */
.chat-mode-page { --chat-workspace-height: max(620px,calc(100vh - 390px)); }
.chat-mode-page > .agent-hero { height: 300px; min-height: 300px; }
.chat-mode-page > .agent-hero h1 span { color: #ff762f; }
.chat-mode-page .chat-tier-workspace { display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: 10px; align-items: start; }
.chat-mode-page .chat-tier-workspace > main,
.chat-mode-page .chat-tier-workspace > .chat-production-panel,
.chat-mode-page .chat-tier-workspace > aside { min-width: 0; height: var(--chat-workspace-height); min-height: var(--chat-workspace-height); max-height: var(--chat-workspace-height); }
.chat-mode-page .chat-production-panel { height: var(--chat-workspace-height); min-height: var(--chat-workspace-height); max-height: var(--chat-workspace-height); }
.chat-mode-page .chat-production-panel .message-list { min-height: 0; max-height: none; }
.chat-mode-page .chat-tier-workspace > aside { position: static; overflow-y: auto; }
.chat-mode-page .chat-simple-main { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; overflow-y: auto; }
.chat-simple-create { min-width: 0; flex-shrink: 0; }
.chat-mode-page .chat-pro-composer { position: static; min-height: 190px; margin: 0; padding: 15px; }
.chat-mode-page .chat-pro-composer textarea { min-height: 85px; }
.chat-mode-page .chat-prompt-gallery { padding: 0; flex-shrink: 0; }
.chat-mode-page .pro-conversation-rail { display: block; }
.chat-mode-page .chat-pro-settings-main { display: block; }
.chat-mode-page .pro-chat-inspector .pro-inspector-footer { bottom: 0; }

@media (max-width: 1180px) {
  .chat-mode-page .chat-tier-workspace { grid-template-columns: 1fr; }
  .chat-mode-page .chat-tier-workspace > aside { height: auto; min-height: 0; max-height: none; }
}
@media (max-width: 800px) {
  .chat-mode-page > .agent-hero { height: 480px; min-height: 480px; }
  .chat-mode-page .chat-simple-main { height: auto; min-height: var(--chat-workspace-height); max-height: none; }
  .chat-mode-page .chat-pro-composer { min-height: 240px; }
  .chat-mode-page .chat-pro-composer .composer-footer { flex-direction: column; align-items: stretch; }
  .chat-mode-page .chat-pro-composer .content-type-pills { width: 100%; margin-left: 0; }
  .chat-mode-page .chat-pro-composer .studio-primary { width: 100%; }
}

/* Stable page anchors across every capability tier and specialist tab. */
html { scrollbar-gutter: stable; }
.studio-header { height: 92px; min-height: 92px; }
.workspace-tabs,
.video-mode-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; height: 50px; min-height: 50px; flex-shrink: 0; scrollbar-width: thin; }
.workspace-tabs-label { flex: 0 0 auto; min-height: 0; white-space: nowrap; }
.workspace-tab { flex: 1 0 105px; min-width: 96px; white-space: nowrap; }
.video-mode-tabs button { flex: 1 0 125px; white-space: nowrap; }
.studio-view[data-workspace="create"] > .agent-hero { height: 300px; min-height: 300px; margin-bottom: 0; border-radius: 14px 14px 0 0; }
.studio-view[data-workspace="create"] > .agent-hero h1 span { color: #ff762f; }
.studio-view[data-workspace="image"] .simple-image-workspace { width: 100%; }
.director-mode-page > .agent-hero,
.video-mode-page > .agent-hero { height: 300px; min-height: 300px; }

@media (max-width: 800px) {
  .studio-header { height: 190px; min-height: 190px; justify-content: space-between; }
  .studio-title-block { min-height: 76px; }
  .workspace-tabs-label { flex-basis: auto; min-height: 0; }
  .workspace-tab { flex: 1 0 112px; min-width: 112px; }
  .studio-view[data-workspace="create"] > .agent-hero,
  .director-mode-page > .agent-hero,
  .video-mode-page > .agent-hero { height: 480px; min-height: 480px; }
}

/* Director Simple: the reference's three numbered steps, not a generic form. */
.director-simple-page { gap: 12px; }
.director-simple-page .director-simple-grid { grid-template-columns: minmax(0,2.2fr) minmax(300px,1fr); align-items: start; gap: 12px; }
.director-planning-stack { min-width: 0; display: grid; gap: 12px; }
.director-step-heading { display: flex; align-items: flex-start; gap: 14px; }
.director-step-number { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ff9a3c; border-radius: 50%; background: linear-gradient(135deg,#ff9d24,#ff5c1c); box-shadow: 0 0 22px rgba(255,105,28,.16),inset 0 1px 0 rgba(255,255,255,.3); color: #1e1209; font-size: 1.05rem; font-weight: 800; }
.director-simple-page h2 { margin: 0; font-size: 1.12rem; line-height: 1.35; font-weight: 750; letter-spacing: -.015em; }
.director-step-heading > div { min-width: 0; padding-top: 2px; }
.director-step-heading p { margin: 5px 0 0; color: #9ca9ba; font-size: .8rem; line-height: 1.4; }
.director-brief { padding: 13px 16px 14px; }
.director-brief .director-step-heading > div { flex: 1; }
.director-brief .director-example { flex: 0 0 auto; align-self: center; min-height: 35px; padding: 0 11px; font-size: .65rem; }
.director-example svg { width: 16px; height: 16px; color: #ffac22; }
.director-brief-composer { overflow: hidden; margin-top: 12px; padding: 12px 15px 10px; border: 1px solid #3a4556; border-radius: 11px; background: linear-gradient(135deg,#121923,#13161d); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.director-brief-composer textarea { display: block; width: 100%; height: 67px; min-height: 67px; padding: 4px 2px; resize: vertical; border: 0; outline: none; background: transparent; color: #f2f5fa; font-size: .8rem; line-height: 1.5; }
.director-brief-composer textarea::placeholder { color: #7f8c9e; }
.director-brief-composer:focus-within { border-color: #bd602c; }
.director-brief-footer { display: flex; align-items: center; gap: 14px; }
.director-brief-footer > .studio-secondary { min-height: 32px; padding: 0 10px; font-size: .65rem; }
.director-brief-footer svg { width: 16px; height: 16px; }
.director-brief-footer output { margin-left: auto; color: #8592a4; font-size: .68rem; }
.director-brief-footer .studio-primary { min-height: 38px; padding: 0 18px; font-size: .76rem; }
.director-goals > .director-step-heading { align-items: center; margin: 0 0 10px; padding: 0 3px; }
.director-goals .director-step-heading > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 14px; }
.director-goals .director-step-heading p { margin: 0; font-size: .68rem; }
.director-goal-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.director-goal-card { --goal-color: #ff8e37; --goal-rgb: 255,130,46; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; min-height: 126px; padding: 15px 14px 12px; border: 1px solid rgba(var(--goal-rgb),.29); border-radius: 12px; background: radial-gradient(ellipse at 20% 0,rgba(var(--goal-rgb),.1),transparent 75%),#0a121b; color: #edf1f8; text-align: left; transition: border-color .15s,background .15s,box-shadow .15s; }
.director-goal-card.violet { --goal-color: #bc7cff; --goal-rgb: 174,101,255; }
.director-goal-card.pink { --goal-color: #f45da9; --goal-rgb: 241,74,158; }
.director-goal-card.cyan { --goal-color: #12cdeb; --goal-rgb: 9,194,234; }
.director-goal-card.teal { --goal-color: #1ee6b6; --goal-rgb: 24,218,171; }
.director-goal-icon { display: grid; place-items: center; width: 34px; height: 32px; margin-bottom: 10px; color: var(--goal-color); filter: drop-shadow(0 0 7px rgba(var(--goal-rgb),.2)); }
.director-goal-icon svg { width: 32px; height: 32px; }
.director-goal-card strong { display: block; font-size: .83rem; line-height: 1.35; }
.director-goal-card small { display: block; margin-top: 4px; color: #a6b1c0; font-size: .73rem; line-height: 1.4; }
.director-goal-check { position: absolute; top: 11px; right: 11px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ffaf3c; color: #3c230c; font-size: .7rem; font-weight: 850; }
.director-goal-card:hover { border-color: var(--goal-color); background-color: rgba(var(--goal-rgb),.08); }
.director-goal-card.active { border-color: #ff9b28; background: radial-gradient(ellipse at 20% 0,rgba(255,119,35,.24),transparent 80%),#27170f; box-shadow: 0 0 0 1px rgba(255,136,32,.32),0 0 19px rgba(255,111,28,.12); }
.director-goal-card.active .director-goal-check { display: grid; }
.director-plan-preview { min-width: 0; padding: 16px 16px 12px; }
.director-plan-preview > header { display: flex; align-items: center; gap: 13px; padding: 0 0 13px; }
.director-plan-preview > header > svg { flex: 0 0 23px; width: 23px; height: 23px; color: #ff8e2b; filter: drop-shadow(0 0 8px rgba(255,122,22,.22)); }
.director-plan-preview h2 { font-size: 1rem; }
.director-plan-preview header p { min-height: 36px; margin: 4px 0 0; color: #99a8ba; font-size: .68rem; line-height: 1.35; }
.director-scene-preview { position: relative; display: grid; gap: 10px; padding-left: 13px; }
.director-scene-preview::before { content: ""; position: absolute; top: 28px; bottom: 30px; left: 3px; width: 1px; background: linear-gradient(#ff7c24,#8d431c); }
.director-preview-scene { position: relative; display: grid; grid-template-columns: minmax(80px,.8fr) minmax(0,1.2fr); align-items: center; gap: 4px; min-width: 0; width: 100%; min-height: 72px; padding: 0 0 0 10px; border: 1px solid #202b38; border-radius: 8px; background: #0b121b; color: #fff; text-align: left; }
.director-preview-scene::before { content: ""; position: absolute; left: -15px; top: calc(50% - 4px); width: 8px; height: 8px; border: 2px solid #ffd0a3; border-radius: 50%; background: #ff7c24; box-shadow: 0 0 9px rgba(255,126,31,.12); }
.director-preview-scene strong,.director-preview-scene small { display: block; }
.director-preview-scene strong { font-size: .83rem; }
.director-preview-scene small { margin-top: 5px; color: #9daabd; font-size: .7rem; line-height: 1.35; }
.director-preview-scene img { width: 100%; height: 72px; object-fit: cover; border-radius: 0 7px 7px 0; mask-image: linear-gradient(90deg,transparent,#000 28%); }
.director-preview-scene.active { border-color: #72411f; }
.director-creative-flow { display: grid; grid-template-columns: minmax(310px,.95fr) minmax(0,2fr); align-items: center; gap: 24px; min-height: 80px; padding: 10px 18px; }
.director-creative-flow .director-step-heading { align-items: center; }
.director-creative-flow .director-step-heading p { font-size: .68rem; }
.director-creative-flow ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.director-creative-flow li { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 8px; }
.director-flow-icon { flex: 0 0 46px; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid #384655; border-radius: 50%; background: #0c141e; color: #a8b6c9; box-shadow: inset 0 0 0 4px #101925; }
.director-flow-icon svg { width: 23px; height: 23px; }
.director-creative-flow li.active .director-flow-icon { border-color: #ffa52b; color: #ffba3b; background: #2b160d; box-shadow: 0 0 20px rgba(255,119,24,.2),inset 0 0 14px rgba(255,119,24,.08); }
.director-creative-flow li strong,.director-creative-flow li small { display: block; }
.director-creative-flow li strong { color: #d9e2ef; font-size: .81rem; }
.director-creative-flow li.active strong { color: #ffaf35; }
.director-creative-flow li small { margin-top: 4px; color: #8998ab; font-size: .68rem; white-space: nowrap; }
.director-flow-chevron { position: absolute; right: -6px; color: #748396; font-size: 1.35rem; }
.director-starting-points { padding: 10px 16px 12px; }
.director-starting-points > header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 13px; margin-bottom: 9px; }
.director-starting-points h2 { font-size: .89rem; }
.director-starting-points header p { margin: 0; color: #96a6b9; font-size: .69rem; }
.director-starting-points header button { margin-left: auto; padding: 5px 8px; border: 1px solid #2c3948; border-radius: 6px; background: #0e161f; color: #c3cddb; font-size: .63rem; }
.director-idea-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; }
.director-idea-card { position: relative; min-width: 0; height: 104px; overflow: hidden; padding: 0; border: 1px solid #2f3a49; border-radius: 8px; background: #0c141e; color: #fff; text-align: left; }
.director-idea-card img { width: 100%; height: 100%; object-fit: cover; }
.director-idea-card > span { position: absolute; inset: auto 0 0; padding: 23px 10px 8px; background: linear-gradient(transparent,rgba(4,8,14,.85) 45%,#050a11); }
.director-idea-card strong,.director-idea-card small { display: block; }
.director-idea-card strong { font-size: .71rem; }
.director-idea-card small { margin-top: 3px; color: #b3bfce; font-size: .59rem; }
.director-idea-card:hover { border-color: #e58032; }
.director-simple-page button:focus-visible { outline: 2px solid #ffb345; outline-offset: 3px; }

@media (max-width: 1180px) {
  .director-simple-page .director-simple-grid { grid-template-columns: minmax(0,1.8fr) minmax(280px,1fr); }
  .director-brief .director-step-heading { flex-wrap: wrap; }
  .director-brief .director-example { margin-left: 48px; }
  .director-goal-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .director-creative-flow { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 800px) {
  .director-simple-page .director-simple-grid { grid-template-columns: 1fr; }
  .director-brief { padding: 14px; }
  .director-brief .director-step-heading > div { flex-basis: calc(100% - 48px); }
  .director-goal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .director-goals .director-step-heading > div { display: block; }
  .director-goals .director-step-heading p { margin-top: 5px; }
  .director-goal-card { min-height: 135px; }
  .director-creative-flow { padding: 14px; }
  .director-creative-flow ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; }
  .director-creative-flow li:nth-child(2) .director-flow-chevron { display: none; }
  .director-flow-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .director-creative-flow li { gap: 8px; }
  .director-idea-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .director-starting-points { padding: 12px; }
  .director-starting-points header button { margin-left: 0; }
  .director-brief-footer { flex-wrap: wrap; gap: 8px; }
  .director-brief-footer .studio-primary { flex: 1 0 100%; margin-top: 4px; }
  .director-brief-composer textarea { min-height: 105px; }
  .director-step-heading h2 { font-size: .95rem; }
}