.studio-shell { width: min(calc(100% - var(--edge) * 2), 1280px); padding-bottom: 56px; }
.studio-heading { padding: 30px 0 24px; }
.studio-heading h1 { margin: 8px 0; font-size: clamp(34px, 4.5vw, 58px); line-height: 1.03; letter-spacing: -.065em; }
.studio-heading p { margin: 0; color: var(--muted); font-size: 15px; }
.studio-crumb { font-size: 12px; color: var(--muted); }
a.studio-crumb:hover { text-decoration: underline; }
.studio-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
.editor-column { min-width: 0; }
.studio-composer, .studio-result { overflow: hidden; background: #171b28; border: 1px solid var(--border); border-radius: 12px; }
#compose { scroll-margin-top: 85px; }
.composer-top, .composer-bottom, .result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.composer-top { padding: 0 18px; border-bottom: 1px solid var(--border); }
.mode-row { display: flex; min-width: 0; gap: 14px; overflow-x: auto; }
.mode { padding: 13px 2px 10px; color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; font-size: 13px; font-weight: 750; white-space: nowrap; }
.mode[aria-pressed=true] { color: var(--text); border-bottom-color: var(--coral); }
.editor-status { color: var(--teal); font: 650 11px ui-monospace, monospace; white-space: nowrap; }
.prompt-area { padding: 16px 18px 8px; }
.prompt-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.prompt-label { font-size: 14px; font-weight: 750; }
.prompt-count { color: var(--muted); font: 500 12px ui-monospace, monospace; }
#studio-prompt, #voice-script, .details-body input, .details-body select { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: #101420; color: var(--text); font: inherit; }
#studio-prompt { display: block; min-height: 178px; resize: vertical; line-height: 1.55; padding: 12px; }
.prompt-examples { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.prompt-examples > span { align-self: center; font-size: 11px; color: var(--muted); margin-right: 3px; }
.prompt-examples button { border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; background: transparent; color: var(--teal); font-size: 11px; }
.prompt-examples button:hover { border-color: var(--teal); }
.studio-details { border-top: 1px solid var(--border); padding: 9px 0; }
.studio-details summary { cursor: pointer; font-weight: 720; font-size: 13px; line-height: 1.4; }
.studio-details summary span { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.details-body { padding: 8px 0 2px; }
.details-body label { display: block; font-size: 12px; margin: 4px 0 5px; }
.details-body input, .details-body select { font-size: 13px; }
.details-body a { display: inline-block; margin: 5px 0; }
.helper { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 6px 0; }
.form-error { font-size: 12px; color: #ff9f8e; margin: 6px 0; }
.clip-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 0 18px 12px; }
.clip-settings:has(#aspect-setting[hidden]) { grid-template-columns: minmax(0, 165px); }
.composer-bottom { padding: 12px 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.composer-actions, .preview-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.composer-actions { justify-content: flex-end; }
#render-access-message { margin: 3px 0 0; }
#compose-action:disabled { opacity: .55; cursor: wait; }
.category-options { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 9px 0; padding: 0; border: 0; }
.category-options label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.category-options input { accent-color: var(--coral); }
.category-reset { padding: 0; border: 0; background: none; color: var(--teal); font-size: 12px; text-decoration: underline; cursor: pointer; }
#brief-result { padding: 15px 18px; margin-top: 14px; }
#brief-result h2 { margin: 0; font-size: 20px; }
.studio-result pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; line-height: 1.55; }
.studio-preview { position: sticky; top: 80px; }
.preview-heading { padding: 15px 16px 12px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.preview-heading h2 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.preview-status { color: var(--teal); font-size: 11px; font-weight: 700; }
.studio-preview-stage { min-height: 270px; display: grid; place-items: center; padding: 12px; background: #0d111c; border-block: 1px solid var(--border); }
.preview-empty { text-align: center; padding: 20px; color: var(--muted); }
.preview-empty svg { width: 33px; height: 33px; stroke: var(--coral); fill: none; stroke-width: 1.5; }
.preview-empty p { margin: 9px 0 3px; color: var(--text); font-weight: 700; }
.preview-empty small { font-size: 12px; }
#render-progress:not([hidden]) { display: block; width: min(200px, 100%); height: 8px; margin: 12px auto 0; accent-color: var(--coral); }
#render-video:not([hidden]) { display: block; width: 100%; max-height: 57vh; background: #090d11; border-radius: 6px; }
.preview-details { padding: 0 16px 13px; }
.preview-details:has(.preview-actions > :not([hidden])) { padding-top: 9px; }
.preview-details p:empty { display: none; }
.preview-actions .btn { min-height: 35px; padding-inline: 12px; font-size: 12px; }
.studio-composer [hidden], .studio-result[hidden], .studio-result [hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
@media (max-width: 800px) {
  .studio-layout { grid-template-columns: minmax(0, 1fr); }
  .studio-preview { position: static; }
}
@media (max-width: 450px) {
  .studio-heading { padding-top: 21px; }
  .mode-row { gap: 8px; }
  .mode, .editor-status { font-size: 11px; }
  .composer-top, .composer-bottom, .prompt-area, .clip-settings { padding-inline: 12px; }
  .clip-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .composer-bottom .btn { min-height: 38px; padding-inline: 10px; }
}

.studio-confirmation { width: min(420px, calc(100% - 32px)); padding: 22px; color: var(--text); background: #171b28; border: 1px solid var(--border); border-radius: 12px; }
.studio-confirmation::backdrop { background: #090c14bf; }
.studio-confirmation h2 { margin: 0 0 8px; font-size: 21px; }
.studio-confirmation p { margin: 0; color: var(--muted); }
.confirmation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }

.prompt-builder-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0; }
.prompt-builder-entry .btn { min-height: 34px; padding: 5px 11px; font-size: 12px; }
.prompt-builder-entry .helper { margin: 0; }
.prompt-builder-dialog { width: min(620px, calc(100% - 32px)); }
.prompt-builder-dialog label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 700; }
#prompt-draft { display: block; width: 100%; max-height: 50vh; resize: vertical; padding: 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: #101420; line-height: 1.5; }

.story-type { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.story-type > div { flex: 1 1 170px; }
.story-type .btn, .story-prompt-help .btn { min-height: 35px; padding: 5px 10px; font-size: 12px; }
.story-prompt-help { padding: 10px; margin: 10px 0; border: 1px solid var(--border); border-radius: 6px; }
.story-prompt-help p { margin: 0 0 8px; }
.story-prompt-help button { margin: 2px 4px 2px 0; }

.audio-setting { margin: 10px 0; padding: 0; }
.audio-setting select { max-width: 240px; }
#voice-direction-setting { margin-top: 8px; }
#voice-direction { display: block; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: #101420; color: var(--text); resize: vertical; }
.audio-suggestion { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.audio-suggestion .btn { min-height: 32px; padding: 4px 8px; font-size: 12px; }

#render-audio:not([hidden]) { display: block; width: 100%; max-width: 480px; }

#voice-script { display: block; box-sizing: border-box; min-height: 130px; resize: vertical; line-height: 1.55; padding: 12px; }

.credit-panel { grid-column: 1 / -1; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-top: 16px; }
.credit-heading { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.preview-column { min-width: 0; position: sticky; top: 80px; }
.preview-column .studio-preview { position: static; }
.preview-column #credit-grant { grid-template-columns: minmax(0, 1fr) 100px; }
.preview-column #credit-grant button { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
@media (max-width: 800px) { .preview-column { position: static; } }
#credit-balance { color: var(--teal); font-weight: 700; }
.credit-panel p, .credit-panel li { color: var(--muted); font-size: 12px; line-height: 1.7; }
.credit-panel summary { cursor: pointer; font-size: 12px; }
#credit-admin { padding-top: 12px; margin-top: 16px; border-top: 1px solid var(--border); }
#credit-grant { display: grid; grid-template-columns: 1fr 140px auto; align-items: end; gap: 10px; }
#credit-grant label { grid-row: 1; font-size: 12px; }
#credit-grant input { grid-row: 2; width: 100%; min-width: 0; padding: 10px; background: #101322; color: #fff; border: 1px solid var(--border); border-radius: 6px; }
#credit-grant button { grid-column: 3; grid-row: 2; }
@media(max-width:600px) { #credit-grant { display: flex; flex-direction: column; align-items: stretch; } }

.credit-panel #credit-balance { margin-block: 12px 4px; font-size: 20px; }
.credit-panel .wallet-open { min-height: 34px; font-size: 12px; }
.credit-wallet-dialog { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(16px, 4vw, 28px); color: #f4f5fb; background: #171a29; border: 1px solid #41465b; border-radius: 16px; }
.credit-wallet-dialog::backdrop { background: #080a14be; backdrop-filter: blur(5px); }
.credit-wallet-dialog h2 { margin: 0; font-size: 22px; }
.wallet-total { display: grid; gap: 4px; padding: 18px; margin-top: 18px; border-radius: 10px; background: #20293b; }
.wallet-total strong { color: var(--teal); font-size: 32px; line-height: 1.1; }
.wallet-total span, #wallet-capacity, .wallet-activity time { color: var(--muted); font-size: 13px; }
.wallet-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.wallet-filters button { min-height: 34px; }
.wallet-filters button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); }
.wallet-activity { list-style: none; padding: 0; margin: 0; }
.wallet-activity li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.wallet-activity time { display: block; margin-top: 4px; }
.wallet-positive { color: var(--teal); }
.wallet-negative { color: var(--coral); }
.wallet-empty { color: var(--muted); }

.studio-projects{margin-top:20px;padding-bottom:14px}
.studio-projects>p,.studio-projects>ul,.studio-projects>section{margin:12px 16px}
.studio-projects ul{padding:0;list-style:none}
.studio-projects li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-block:8px;overflow-wrap:anywhere}
.studio-projects small{color:var(--muted)}
.voice-consent{margin-bottom:8px}

#start-image { display: block; max-width: 100%; margin-block: 6px; }
#start-image-preview { display: block; width: auto; max-width: 100%; max-height: 210px; margin-block: 10px; border-radius: 8px; }
#start-image-preview[hidden] { display: none; }
#start-image-status { overflow-wrap: anywhere; }