main.studio-active { width: 100%; height: calc(100vh - 65px); padding: 18px 22px; display: grid; overflow: hidden; grid-template-columns: minmax(0,1fr) minmax(350px,430px); grid-template-rows: auto minmax(0,1fr); gap: 14px; }
/* The three workspace-level messages are exempt from the studio blackout: a
   customer who cannot see "we lost the connection" or "review access" reads
   stale data as current and an empty canvas as a broken product. */
main.studio-active > :not(#studioHeader):not(#create):not(#productions):not(#stagingNotice):not(#workspaceMessage):not(#readOnlyNotice) { display: none !important; }
.studio-header { display: flex; min-width: 0; padding: 16px 18px; grid-column: 1/-1; align-items: center; justify-content: space-between; gap: 22px; border-color: rgba(103,87,214,.2); }
.studio-heading { min-width: 250px; }
.studio-heading h1 { margin: 3px 0 4px; font-size: 21px; }
.studio-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.studio-context { display: grid; min-width: min(620px,60%); grid-template-columns: minmax(190px,1fr) auto auto; align-items: end; gap: 10px; }
.studio-context label > span { font-size: 10px; }
.studio-context select { min-height: 38px; }
.studio-readiness { display: flex; align-self: center; flex-wrap: wrap; gap: 5px; }
.studio-readiness span { padding: 5px 8px; border-radius: 999px; background: #f0eff5; color: var(--muted); font-size: 9px; font-weight: 750; }
.studio-readiness span.ready { background: #e2f2eb; color: #27614d; }
.studio-context button { min-height: 38px; white-space: nowrap; }
main.studio-active #productions { min-height: 0; padding: 0; overflow-y: auto; grid-column: 1; grid-row: 2; border: 1px solid var(--border); border-radius: var(--radius); background: #f5f5f9; }
main.studio-active #productions > .section-heading { position: sticky; z-index: 3; top: 0; margin: 0; padding: 17px 18px; align-items: center; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
main.studio-active #productions > .section-heading h2 { margin: 2px 0 0; font-size: 17px; }
main.studio-active #productions > .section-heading p.muted { display: none; }
main.studio-active #versionComparePanel,
main.studio-active #approvalMessage { margin: 14px 16px 0; }
main.studio-active #deliveryRecordCard { display: none !important; }
main.studio-active #jobGrid { padding: 16px; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 13px; }
main.studio-active .job-card { background: #fff; }
main.studio-active .job-preview { aspect-ratio: 4/5; }
main.studio-active #emptyJobs { min-height: calc(100% - 96px); margin: 16px; }
main.studio-active #create { min-height: 0; padding: 0; overflow: hidden; grid-column: 2; grid-row: 2; }
main.studio-active #create > .section-heading,
main.studio-active #talentSourceChooser,
main.studio-active #selectionImportCard,
main.studio-active #twinForm { display: none !important; }
main.studio-active #workspaceGrid { display: block; height: 100%; }
main.studio-active #generationForm { height: 100%; padding: 18px; overflow-y: auto; gap: 10px; }
main.studio-active #generationForm .step { display: none; }
main.studio-active #generationForm .card-heading { position: sticky; z-index: 2; top: -18px; margin: -18px -18px 0; padding: 17px 18px 13px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
main.studio-active .style-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
main.studio-active button.style-choice { min-height: 68px; grid-template-columns: 60px minmax(0,1fr); }
main.studio-active .style-choice-visual { min-height: 66px; padding: 7px; }
main.studio-active .style-choice-mark { width: 25px; height: 25px; font-size: 12px; }
main.studio-active .style-choice-copy { padding: 8px; }
main.studio-active .style-choice-copy strong { margin-bottom: 3px; overflow: hidden; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
main.studio-active .style-choice-copy small { display: none; }
main.studio-active .style-choice-use { margin-top: 2px; font-size: 7px; }
main.studio-active #styleInfo { display: none; }
main.studio-active textarea { min-height: 76px; resize: none; }
.studio-empty { display: flex; min-height: 360px; padding: 36px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.studio-empty > span { display: grid; width: 54px; height: 54px; margin-bottom: 14px; place-items: center; border-radius: 18px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 12px 30px rgba(103,87,214,.25); }
.studio-empty h3 { margin: 0 0 7px; }
.studio-empty p { max-width: 390px; margin: 0; color: var(--muted); line-height: 1.55; }
.generation-loader { position: fixed; z-index: 1000; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: rgba(248,247,243,.9); color: var(--pc-ink); text-align: center; backdrop-filter: blur(16px); }
.generation-loader[hidden] { display: none; }
.generation-loader-orbit { position: absolute; width: 150px; height: 150px; border: 1px solid rgba(103,87,214,.18); border-radius: 50%; animation: pc-loader-spin 8s linear infinite; }
.generation-loader-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 20px rgba(103,87,214,.6); }
.generation-loader-orbit i:nth-child(1) { top: -5px; left: 70px; }
.generation-loader-orbit i:nth-child(2) { right: 10px; bottom: 20px; animation: pc-loader-pulse 1.4s ease-in-out infinite alternate; }
.generation-loader-orbit i:nth-child(3) { bottom: 20px; left: 10px; animation: pc-loader-pulse 1.4s .5s ease-in-out infinite alternate; }
.generation-loader-mark { z-index: 1; padding: 9px 14px; font-size: 16px; background: rgba(255,255,255,.74); box-shadow: 0 12px 35px rgba(26,23,43,.08); animation: pc-loader-breathe 1.8s ease-in-out infinite; }
.generation-loader strong,.generation-loader small { z-index: 1; }
.generation-loader small { max-width: 390px; color: var(--muted); }
.job-generation-brand { display: grid; width: 72px; height: 72px; margin: 0 auto 14px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.82); box-shadow: 0 0 0 0 rgba(103,87,214,.3); animation: pc-loader-card 1.8s ease-out infinite; }
.job-generation-brand .pc-wordmark { white-space: pre-line; font-size: 9px; }
/* Backdrop and card, shared by every portal dialog. The Magic Brush owned
   these rules alone; the full-screen review needs exactly the same frame, so
   they live under one class instead of being copied a second time. */
.pc-modal-open { overflow: hidden; }
.pc-modal { position: fixed; z-index: 900; inset: 0; display: grid; padding: 24px; place-items: center; background: rgba(21,19,31,.72); backdrop-filter: blur(12px); }
.pc-modal[hidden] { display: none; }
.pc-modal-card { display: grid; width: min(920px,100%); max-height: calc(100vh - 48px); padding: 20px; overflow-y: auto; gap: 14px; background: #fff; }
.pc-modal-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pc-modal-card h2 { margin: 3px 0; }
.pc-modal-card header p { margin: 0; color: var(--muted); }
.magic-brush-open { overflow: hidden; }
.magic-brush-workspace { position: relative; min-height: 280px; overflow: hidden; border-radius: 14px; background: #24222b; touch-action: none; }
.magic-brush-workspace img { display: block; width: 100%; max-height: 58vh; object-fit: contain; }
.magic-brush-workspace canvas { position: absolute; top: 0; left: 50%; cursor: crosshair; opacity: .58; transform: translateX(-50%); }
.magic-brush-tools { display: flex; align-items: end; gap: 14px; }
.magic-brush-tools label { flex: 1; }
.magic-brush-tools input { width: 100%; }
@media (max-width: 680px) { .pc-modal { padding: 8px; } .pc-modal-card { max-height: calc(100vh - 16px); } .magic-brush-tools { align-items: stretch; flex-direction: column; } }
@keyframes pc-loader-spin { to { transform: rotate(360deg); } }
@keyframes pc-loader-pulse { to { transform: scale(1.8); opacity: .35; } }
@keyframes pc-loader-breathe { 50% { transform: scale(1.06); letter-spacing: .13em; } }
@keyframes pc-loader-card { 70%,100% { box-shadow: 0 0 0 24px rgba(103,87,214,0); } }
@media (prefers-reduced-motion: reduce) { .generation-loader-orbit,.generation-loader-orbit i,.generation-loader-mark,.job-generation-brand { animation: none; } }
.header-button.active { border-color: var(--primary); background: var(--primary); color: #fff; }
@media (max-width: 1080px) {
  main.studio-active { padding: 14px; grid-template-columns: minmax(0,1fr) 350px; }
  .studio-context { min-width: 0; grid-template-columns: minmax(170px,1fr) auto; }
  .studio-readiness { display: none; }
}
@media (max-width: 820px) {
  main.studio-active { height: auto; padding: 14px; overflow: visible; grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .studio-header { align-items: stretch; flex-direction: column; }
  .studio-context { grid-template-columns: 1fr auto; }
  main.studio-active #create,main.studio-active #productions { max-height: none; grid-column: 1; }
  main.studio-active #create { height: min(760px,calc(100vh - 120px)); grid-row: 2; }
  main.studio-active #productions { grid-row: 3; }
}

/* Full-screen review. The 56vh studio cap on a result tile deliberately does
   NOT reach in here — judging quality is the whole reason the dialog exists. */
.lightbox-card { width: min(1180px,100%); }
.lightbox-stage { display: grid; align-items: center; gap: 10px; grid-template-columns: auto minmax(0,1fr) auto; }
.lightbox-media { display: grid; min-height: 240px; place-items: center; border-radius: 14px; background: #24222b; }
.lightbox-media img,.lightbox-media video { display: block; width: 100%; max-height: 74vh; object-fit: contain; }
.lightbox-media p { padding: 24px; color: #fff; text-align: center; }
.lightbox-step { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; }
.lightbox-counter { margin: 0; color: var(--muted); font-size: 12px; }
.lightbox-caption { display: flex; margin: 0; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.lightbox-caption span { color: var(--text); }
@media (max-width: 680px) { .lightbox-stage { grid-template-columns: 1fr; } .lightbox-step { justify-self: center; } .lightbox-media img,.lightbox-media video { max-height: 56vh; } }