.studio-hero{position:relative;display:grid;grid-template-columns:1.3fr 1fr;overflow:hidden;border-radius:20px;background:#172f30;color:#fff;min-height:345px}.studio-hero-copy{padding:42px;z-index:1}.studio-eyebrow{font-size:11px;letter-spacing:.18em;font-weight:700;opacity:.7}.studio-hero h2{font-size:clamp(30px,3.2vw,47px);line-height:1.09;letter-spacing:-.04em;font-weight:650;margin:17px 0}.studio-hero p{max-width:410px;color:#c5d5d2;line-height:1.65;font-size:14px}.studio-hero-button{margin-top:25px;display:inline-flex;gap:30px;background:#d9f089;color:#1b3430;padding:13px 18px;border-radius:9px;font-size:13px;font-weight:700}.studio-hero-art{position:relative;min-height:310px}.studio-orbit{width:390px;height:390px;border:1px solid #76968c44;border-radius:50%;position:absolute;top:-35px;left:0}.studio-art-card{position:absolute;width:155px;height:220px;border-radius:12px;box-shadow:0 14px 40px #0003}.studio-art-back{top:45px;left:35px;transform:rotate(-16deg);background:linear-gradient(135deg,#47756b,#85aa80);padding:18px;font-size:11px;letter-spacing:.18em;color:#dce6cf}.studio-art-front{top:74px;left:125px;transform:rotate(9deg);background:#e5b69b;color:#2d3933;padding:23px;display:flex;flex-direction:column;justify-content:space-between}.studio-art-front span{font-size:30px;line-height:.96;font-weight:800;letter-spacing:-.04em}.studio-art-front small{font-size:8px;letter-spacing:.17em}.studio-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.studio-stats>div{padding:22px 25px;border:1px solid #e4e7e7;border-radius:13px;background:white;display:flex;align-items:center;gap:16px}.studio-stats strong{font-size:28px;letter-spacing:-.04em}.studio-stats span{font-size:12px;color:#687879}.studio-section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.studio-section-heading h2{font-weight:650;font-size:18px;letter-spacing:-.025em}.studio-section-heading span,.studio-section-heading a{font-size:12px;color:#6d7d7e}.studio-flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.studio-flow-card{display:block;border:1px solid #e4e7e7;border-radius:14px;padding:23px;background:white;transition:transform .15s,border-color .15s}.studio-flow-card:hover{border-color:#6b9691;transform:translateY(-3px)}.studio-flow-card>div{display:flex;justify-content:space-between;align-items:center;color:#72908a;margin-bottom:23px;font-size:11px}.studio-flow-icon{width:23px;height:23px}.studio-flow-card h3{font-size:15px;font-weight:650;margin-bottom:8px}.studio-flow-card p,.studio-empty p{font-size:13px;line-height:1.65;color:#718080}.studio-recent{border:1px solid #e4e7e7;border-radius:14px;overflow:hidden;background:white}.studio-recent>a{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid #e4e7e7}.studio-recent>a:last-child{border:0}.studio-recent>a>div{flex:1}.studio-recent h3{font-size:14px;font-weight:600}.studio-recent p{font-size:12px;color:#718080;margin-top:4px}.studio-recent-icon{padding:12px;background:#edf3f1;color:#315b52;border-radius:10px}.studio-empty{padding:35px;text-align:center}.studio-empty h3{font-weight:600;margin-bottom:8px}.studio-detail{display:grid;gap:24px}.studio-summary{display:flex;align-items:center;justify-content:space-between}.studio-summary h2{font-size:24px;font-weight:600;margin-top:8px}.studio-player-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.studio-player-grid video{width:100%;max-height:440px;border-radius:9px;background:#101919}.studio-result-placeholder{min-height:245px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px;background:#f1f5f4;border-radius:10px}.studio-placeholder-icon{width:42px;height:42px;color:#6e9488;margin-bottom:20px}.studio-result-placeholder h3{font-weight:600}.studio-result-placeholder p{font-size:13px;color:#6f8180;max-width:270px;margin-top:8px}.studio-progress{display:flex;flex-wrap:wrap;gap:20px}.studio-progress>div{display:flex;align-items:center;gap:10px;font-size:13px}.studio-settings{display:grid;grid-template-columns:130px 1fr;gap:13px;font-size:14px}.studio-settings dt{color:#738581}.studio-settings dd{white-space:pre-wrap;overflow-wrap:anywhere}.dark .studio-stats>div,.dark .studio-flow-card,.dark .studio-recent{background:#182221;border-color:#33443f}.dark .studio-stats span,.dark .studio-flow-card p,.dark .studio-empty p,.dark .studio-recent p{color:#a0b2ab}.dark .studio-recent>a{border-color:#33443f}.dark .studio-result-placeholder{background:#1b2b27}.dark .studio-recent-icon{background:#294138;color:#c5dfcf}@media(max-width:850px){.studio-hero{grid-template-columns:1fr}.studio-hero-art{display:none}.studio-hero-copy{padding:30px}.studio-flow-grid{grid-template-columns:1fr}.studio-stats{gap:10px}.studio-stats>div{padding:18px;display:block}.studio-stats span{display:block;margin-top:3px}.studio-player-grid{grid-template-columns:1fr}.studio-section-heading span{display:none}}

/* Keep wide screens useful while leaving forms comfortably readable. */
.fi-main { margin-inline-start: 0; margin-inline-end: auto; }
.studio-workflow-plan { display: grid; gap: 12px; text-align: left; }
.studio-workflow-plan p { font-size: 13px; opacity: .8; max-width: 85ch; }
.studio-workflow-plan ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.studio-workflow-plan li { padding: 12px 16px; border: 1px solid #8b9a9838; border-radius: 10px; }
.studio-workflow-plan li span { display: block; font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
.studio-queue-indicator{padding:16px 20px;border-top:1px solid #8b9a9838;font-size:12px}.studio-queue-indicator a{display:grid;gap:5px}.studio-queue-indicator span{opacity:.7}.studio-jobs-layout{display:grid;gap:20px}.studio-job-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.studio-job-stats>div{border:1px solid #8b9a9838;border-radius:12px;padding:20px;display:grid;gap:5px}.studio-job-stats strong{font-size:26px}.studio-job-stats span{font-size:13px;opacity:.7}@media(max-width:700px){.studio-job-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* A left-aligned workspace with bounded reading and media sizes. */
.fi-main { min-width: 0; }
.studio-video-upload .filepond--media-preview video { object-fit: contain; background: #101919; }
.studio-detail, .studio-jobs-layout, .studio-player-grid > *, .studio-summary > div { min-width: 0; }
.studio-summary { gap: 16px; align-items: flex-start; }
.studio-summary h2 { overflow-wrap: anywhere; }
.studio-player-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-player-grid video { max-height: 320px; object-fit: contain; }
.studio-result-placeholder { min-height: 200px; }
.studio-workflow-plan ol { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.studio-job-stats > div { padding: 16px 20px; }
.studio-job-stats strong { font-size: 24px; }
.studio-settings { grid-template-columns: minmax(90px, 130px) minmax(0, 1fr); }
@media(max-width: 850px) { .studio-player-grid { grid-template-columns: minmax(0, 1fr); } }
@media(max-width: 640px) {
    .studio-summary { flex-wrap: wrap; }
    .studio-hero-copy { padding: 24px; }
    .studio-stats { grid-template-columns: 1fr; }
    .studio-stats > div { display: flex; }
    .studio-settings { grid-template-columns: 1fr; gap: 6px; }
    .studio-settings dd { margin-bottom: 12px; }
    .studio-recent > a { padding: 16px; gap: 10px; }
    .studio-recent h3 { overflow-wrap: anywhere; }
}

.studio-creation-review .studio-settings { margin: 0; }
.studio-review-prompt { white-space: pre-wrap; overflow-wrap: anywhere; }
.fi-sc-wizard .fi-sc-wizard-header { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(105px, 1fr); overflow-x: auto; }
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step { display: flex; min-width: 0; }
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-btn { width: 100%; padding: 14px 8px; gap: 8px; flex-direction: column; }
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-text { width: auto; min-width: 0; justify-items: center; text-align: center; }
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-description { font-size: 12px; text-align: center; }
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-icon-ctn { width: 32px; height: 32px; }
.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-separator { display: none; }
@media(max-width: 767px) {
    .fi-sc-wizard .fi-sc-wizard-header { grid-auto-columns: minmax(82px, 1fr); }
    .fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-btn { flex-direction: column; padding: 12px 3px; gap: 6px; }
    .fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-description { display: none; }
    .fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-label { font-size: 11px; }
    .fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-icon-ctn { width: 28px; height: 28px; }
}

.studio-workers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.studio-worker-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border:1px solid #8b9a9838;border-radius:12px;padding:16px;min-width:0}.studio-worker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex-wrap:wrap}.studio-worker-card a{overflow-wrap:anywhere}.studio-worker-card small{opacity:.7}.studio-worker-card button{margin-top:auto}@media(max-width:700px){.studio-workers{grid-template-columns:1fr}}

.studio-character-intro{display:flex;justify-content:space-between;gap:32px;padding:26px 30px;border:1px solid #8b9a9838;border-radius:14px;background:linear-gradient(110deg,#eaf5f1,#f7faf9)}.studio-character-intro h2{font-size:25px;font-weight:650;letter-spacing:-.03em;margin:8px 0}.studio-character-intro p{max-width:60ch;font-size:14px;color:#506a64;line-height:1.6}.studio-character-intro ol{display:grid;gap:12px;align-content:center;font-size:13px;min-width:240px}.studio-character-intro li{display:flex;gap:12px}.studio-character-intro li strong{color:#168272}.studio-character-tip{font-size:13px;color:#607670}.studio-character-tip a{text-decoration:underline}.studio-image-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.studio-image-preview-card{border:1px solid #8b9a9838;border-radius:12px;overflow:hidden}.studio-image-preview-card img{width:100%;height:240px;object-fit:contain;background:#eaf0ee}.studio-image-preview-copy{padding:16px;display:grid;gap:12px;font-size:12px}.studio-image-preview-copy>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.studio-image-preview-copy p{overflow-wrap:anywhere}.studio-image-preview-copy summary{cursor:pointer;font-weight:600}.studio-image-prompt{white-space:pre-wrap;margin:10px 0}.studio-image-preview-state{height:240px;background:#eaf0ee;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;font-size:13px}.studio-image-preview-state svg{width:30px;height:30px}.dark .studio-character-intro{background:#1b3029}.dark .studio-character-intro p,.dark .studio-character-tip{color:#afc8c0}.dark .studio-image-preview-card img,.dark .studio-image-preview-state{background:#1b2b27}@media(max-width:900px){.studio-character-intro{flex-direction:column;gap:20px}.studio-character-intro ol{min-width:0}.studio-image-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.studio-image-preview-grid{grid-template-columns:1fr}.studio-character-intro{padding:22px}}

/* Ongoing work stays visibly active between Livewire status refreshes. */
.studio-cast-preview{display:grid;gap:16px;font-size:13px;line-height:1.6;margin-top:16px}
.studio-cast-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.studio-cast-card{min-width:0;border:1px solid #8b9a9845;border-radius:12px;padding:18px}
.studio-cast-card h3{font-size:17px;font-weight:650;margin:6px 0;overflow-wrap:anywhere}
.studio-cast-target{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px}
.studio-cast-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.studio-cast-images img{width:100%;height:125px;object-fit:contain;border-radius:6px;background:#eaf0ee}
.studio-cast-images figcaption{font-size:11px;margin-top:4px;overflow-wrap:anywhere}
.studio-cast-references{margin-top:8px}
.studio-cast-references>summary{cursor:pointer;min-height:44px;padding-block:11px;overflow-wrap:anywhere}
.studio-cast-references>summary:focus-visible{outline:2px solid #009b8f;outline-offset:3px;border-radius:4px}
.dark .studio-cast-images img{background:#1b2b27}
@media(max-width:640px){.studio-cast-grid{grid-template-columns:1fr}}
.studio-status-content{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;white-space:nowrap}
.studio-summary-note{font-size:.8rem;line-height:1.6;color:#647873;margin-top:12px}
.studio-stats>div{flex-direction:column;align-items:flex-start;gap:8px}
.studio-stats strong{white-space:nowrap;line-height:1.2}
.studio-status-content .studio-status-icon,.studio-status-content .studio-status-spinner{width:14px;height:14px;flex:none}
.studio-status-spinner{animation:studio-status-spin 1s linear infinite}
.studio-progress-heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}
@keyframes studio-status-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.studio-status-spinner{animation:none!important}}

/* The chosen generation input follows the user through the wizard. */
.studio-input-clip{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:20px;align-items:center;border:1px solid #8b9a9845;border-radius:12px;background:#fff;padding:16px;min-width:0}
.studio-input-player{min-width:0;border-radius:8px;overflow:hidden;background:#101919}
.studio-input-screen{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:#101919}
.studio-input-screen video,.studio-detail .studio-input-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.studio-input-loading{position:absolute;color:#cbd5d1;font-size:12px}
.studio-input-controls{display:flex;gap:8px;align-items:center;padding:8px;color:#fff;font-size:11px;min-width:0}
.studio-input-controls input{min-width:20px;flex:1;accent-color:#2dd4bf;cursor:pointer}
.studio-input-controls button{padding:5px;border-radius:4px;cursor:pointer}
.studio-input-controls button:disabled{opacity:.5;cursor:default}
.studio-input-controls button:focus-visible,.studio-input-controls input:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
.studio-input-time{font-variant-numeric:tabular-nums;white-space:nowrap}
.studio-input-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5}
.studio-input-copy>strong{font-size:14px}.studio-input-copy small{font-size:12px;color:#607670}
.studio-input-badge{background:#e7f6f1;color:#176659;border-radius:6px;padding:5px 8px;font-weight:600;font-variant-numeric:tabular-nums}
.studio-detail .studio-input-clip{grid-template-columns:1fr;border:0;padding:0}
.dark .studio-input-clip{background:#182221}.dark .studio-input-copy small{color:#afc8c0}.dark .studio-input-badge{background:#21483d;color:#c3e9db}
@media(max-width:640px){.studio-input-clip{grid-template-columns:1fr;gap:12px}}

/* One bounded player with a touch- and keyboard-accessible trim timeline. */
.studio-trimmer{border:1px solid #8b9a9845;border-radius:14px;overflow:hidden;min-width:0;background:#fff}
.studio-trimmer-screen{background:#101919;display:flex;justify-content:center}
.studio-trimmer-screen video{width:100%;height:300px;object-fit:contain;display:block}
.studio-trimmer-editor{padding:20px 24px;display:grid;gap:14px}
.studio-trimmer-heading,.studio-trimmer-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.studio-trimmer-heading{justify-content:space-between}
.studio-trimmer-toggle{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;cursor:pointer}
.studio-trimmer-toggle input{accent-color:#0d9488;width:18px;height:18px}
.studio-trimmer-duration{background:#e7f6f1;color:#176659;border-radius:7px;padding:6px 10px;font-size:12px;font-variant-numeric:tabular-nums}
.studio-trimmer-duration strong{font-size:14px;margin-right:4px}
.studio-trimmer-hint,.studio-trimmer-empty{font-size:12px;color:#607670;line-height:1.6}
.studio-trimmer-empty{border:1px dashed #8b9a9866;border-radius:12px;padding:24px;text-align:center}
.studio-trimmer-timeline{padding:6px 12px 0;min-width:0}
.studio-trimmer-track{position:relative;height:80px;padding-top:20px;user-select:none;touch-action:none}
.studio-trimmer-scrub{position:absolute;inset:0 0 auto;height:20px;width:100%;cursor:crosshair;border-top:1px solid #8b9a9845;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(5% - 1px),#8b9a9845 calc(5% - 1px),#8b9a9845 5%)}
.studio-trimmer-frames{position:absolute;inset:20px 0 0;display:flex;overflow:hidden;background:repeating-linear-gradient(100deg,#2e5550 0,#49766d 10%,#253f3b 20%);border-radius:5px}
.studio-trimmer-frames img{width:10%;height:60px;object-fit:cover;pointer-events:none;flex:none}
.studio-trimmer-shade{position:absolute;top:20px;bottom:0;background:#07120fbb;pointer-events:none}
.studio-trimmer-selection{position:absolute;top:17px;bottom:-3px;border-block:3px solid #0d9488;min-width:2px}
.studio-trimmer-move{position:absolute;inset:0;width:100%;cursor:grab;touch-action:none;color:white;text-shadow:0 1px 4px black;display:flex;justify-content:center;align-items:center;font-size:18px}
.studio-trimmer-move span{background:#10272388;border-radius:4px;line-height:1;padding:1px 6px}
.studio-trimmer-track.is-dragging .studio-trimmer-move{cursor:grabbing}
.studio-trimmer-handle{position:absolute;top:17px;bottom:-3px;width:24px;transform:translateX(-50%);background:#0d9488;color:white;border-radius:5px;cursor:ew-resize;touch-action:none;z-index:3;font-weight:700;box-shadow:0 1px 5px #001a1433}
.studio-trimmer-playhead{position:absolute;top:3px;bottom:-5px;border-left:2px solid #fff;box-shadow:1px 0 2px #000a;pointer-events:none;z-index:4}
.studio-trimmer-playhead:before{content:'';position:absolute;left:-6px;top:-2px;width:10px;height:10px;background:#fff;border:1px solid #526560;transform:rotate(45deg)}
.studio-trimmer-scale{display:flex;justify-content:space-between;margin-top:12px;font-size:11px;color:#607670;font-variant-numeric:tabular-nums}
.studio-trimmer-controls{font-size:12px;margin-top:2px}
.studio-trimmer-play{background:#0f766e;color:#fff;border-radius:8px;font-weight:600;padding:9px 13px;min-width:140px}
.studio-trimmer-clock{font-variant-numeric:tabular-nums;min-width:58px}
.studio-trimmer-times{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-left:auto}
.studio-trimmer-times label{display:flex;align-items:center;gap:6px}
.studio-trimmer-times input{width:86px;border:1px solid #8b9a9866;border-radius:7px;padding:7px 8px;background:transparent;font-variant-numeric:tabular-nums}
.studio-trimmer-unit{color:#607670}
.studio-trimmer-reset{text-decoration:underline;text-underline-offset:3px;color:#42695e;padding:6px}
.studio-trimmer-warning{background:#fffaeb;color:#92400e;border:1px solid #e7b96a55;border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.6}
.studio-trimmer-warning button{text-decoration:underline;font-weight:600;margin-left:8px}
.studio-trimmer button:focus-visible,.studio-trimmer input:focus-visible{outline:3px solid #38bdf8;outline-offset:3px}
.dark .studio-trimmer{background:#182221}.dark .studio-trimmer-duration{background:#21483d;color:#c3e9db}.dark .studio-trimmer-hint,.dark .studio-trimmer-scale,.dark .studio-trimmer-empty,.dark .studio-trimmer-unit,.dark .studio-trimmer-reset{color:#afc8c0}.dark .studio-trimmer-warning{background:#372d17;color:#fce0a2}
@media(max-width:640px){.studio-trimmer-screen video{height:240px}.studio-trimmer-editor{padding:16px}.studio-trimmer-times{margin-left:0;width:100%}.studio-trimmer-scale span:nth-child(even){visibility:hidden}.studio-trimmer-hint{font-size:11px}.studio-trimmer-handle{width:26px}}

.studio-dialogue-review { margin-block: 1.25rem; }
.studio-dialogue-review h3 { font-weight: 600; margin-bottom: .5rem; }
.studio-dialogue-review ol { list-style: none; padding: 0; display: grid; gap: .75rem; margin-top: .75rem; }
.studio-dialogue-review li { border: 1px solid var(--gray-200, #e5e7eb); border-radius: .75rem; padding: 1rem; overflow-wrap: anywhere; }
.studio-dialogue-review li p { margin-top: .5rem; }
.dark .studio-dialogue-review li { border-color: var(--gray-700, #374151); }

.studio-speech-section { max-width: 36rem; }
.studio-speech-section .studio-input-screen { aspect-ratio: 16 / 9; }
.studio-speech-sliders { display: grid; gap: .65rem; margin: 1rem 0; }
.studio-speech-sliders label { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.studio-speech-sliders input { flex: 1; min-width: 0; accent-color: #0d9488; }
.studio-speech-sliders span { font-variant-numeric: tabular-nums; min-width: 4.5rem; }

.studio-caption-sample { max-width: 40rem; }
.studio-caption-canvas { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; aspect-ratio: 16 / 9; padding: 1.5rem; border-radius: .75rem; background: linear-gradient(135deg, #0f172a, #0f766e); overflow: hidden; }
.studio-caption-canvas[data-position="middle"] { justify-content: center; }
.studio-caption-canvas[data-position="top"] { justify-content: flex-start; }
.studio-caption-canvas { container-type: size; }
.studio-caption-canvas span { font-family: var(--caption-font), sans-serif; font-size: var(--caption-size); font-weight: var(--caption-weight); background: var(--caption-background); padding: .2em .35em; text-align: center; text-shadow: var(--caption-shadow); line-height: 1.15; }
.studio-caption-preview-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.studio-caption-preview-controls button { border: 1px solid #64748b66; border-radius: .5rem; padding: .4rem .7rem; font-size: .85rem; }
.studio-caption-preview-controls button[aria-pressed="true"] { background: #0d948822; border-color: #0d9488; }
.studio-caption-downloads { display: flex; gap: 1rem; margin-top: .75rem; color: #0d9488; }
.studio-caption-review-player { max-width: 48rem; }
.studio-caption-review-screen { width: fit-content; max-width: 100%; position: relative; background: #101820; border-radius: .75rem; overflow: hidden; }
.studio-caption-review-screen video { display: block; width: auto; max-width: 100%; max-height: 32rem; }
.studio-caption-overlay { position: absolute; inset: 0; container-type: size; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; padding: 6.25% 4%; }
.studio-caption-overlay[data-position="middle"] { justify-content: center; }
.studio-caption-overlay[data-position="top"] { justify-content: flex-start; }
.studio-caption-overlay span { text-align: center; padding: .2em .35em; line-height: 1.15; text-shadow: -1px -1px #000,1px 1px #000; }
.studio-caption-listen { color: #0d9488; padding: .5rem 0; }
.studio-log-list { display: grid; gap: .6rem; }
.studio-log-entry { border: 1px solid #64748b44; border-radius: .65rem; padding: .9rem; min-width: 0; }
.studio-log-entry summary { cursor: pointer; overflow-wrap: anywhere; }
.studio-log-entry summary>span, .studio-log-entry time { margin-right: .7rem; font-size: .8rem; }
.studio-log-entry summary p { margin-top: .45rem; }
.studio-log-entry pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; font-size: .8rem; margin: 1rem 0; }
.studio-log-level { color: #0d9488; font-weight: 700; }
.studio-log-level[data-level="error"], .studio-log-level[data-level="critical"] { color: #e11d48; }

/* Caption workspace: immediate controls, a monitor, and a compact transcript. */
.studio-caption-range { display:flex; align-items:center; gap:.8rem; min-height:2.5rem; }
.studio-caption-range > input { flex:1; min-width:3rem; accent-color:#0d9488; cursor:pointer; }
.studio-caption-range > div { display:flex; align-items:center; gap:.2rem; }
.studio-caption-range input[type=number] { width:4.5rem; border:1px solid #64748b55; border-radius:.45rem; padding:.4rem; background:transparent; font-variant-numeric:tabular-nums; }
.studio-caption-canvas { position:relative; padding:0; }
.studio-caption-canvas .studio-caption-draggable, .studio-caption-overlay .studio-caption-draggable { position:absolute; transform:translate(-50%,-50%); width:max-content; max-width:88%; margin:0; line-height:1.18; padding:.12em .25em; text-align:center; cursor:move; touch-action:none; pointer-events:auto; user-select:none; }
.studio-caption-draggable:focus-visible { outline:2px dashed #14b8a6; outline-offset:4px; }
.studio-caption-overlay { display:block; padding:0; }
.studio-caption-review-intro > div { display:flex; gap:1.5rem; flex-wrap:wrap; color:#64748b; }
.studio-caption-review-intro strong { font-size:.9rem; }
.studio-caption-review-intro .is-current, .studio-caption-review-intro span { color:#0d9488; }
.studio-caption-review-intro p { margin-top:.6rem; color:#64748b; font-size:.9rem; }
.studio-caption-monitor { min-width:0; }
.studio-caption-review-screen { margin:0 auto; }
.studio-caption-review-screen video { max-height:24rem; }
.studio-caption-time { display:flex; justify-content:space-between; font: .8rem ui-monospace,monospace; margin-top:.6rem; }
.studio-caption-scrubber { width:100%; accent-color:#0d9488; }
.studio-caption-timeline { height:1.7rem; position:relative; border-radius:.25rem; background:#64748b33; margin:.5rem 0; }
.studio-caption-timeline button { position:absolute; height:100%; border:1px solid #0f172a66; border-radius:3px; opacity:.5; cursor:pointer; }
.studio-caption-timeline button.is-active { opacity:1; }
.studio-caption-timeline i { position:absolute; top:-3px; bottom:-3px; width:2px; background:#f43f5e; pointer-events:none; }
.studio-caption-follow { display:flex; align-items:center; gap:.5rem; font-size:.85rem; margin-top:.75rem; }
.studio-caption-save-state { color:#0d9488; font-size:.85rem; padding:.5rem 0; }
.studio-caption-transcript { border:1px solid #64748b33; border-radius:.75rem; background:var(--gray-50,#fff); padding:1rem; min-width:0; }
.dark .studio-caption-transcript { background:#18181b; }
.studio-caption-list-header { display:flex; flex-direction:column; gap:.75rem; }
.studio-caption-list-header h2 { font-size:1.1rem; font-weight:650; }
.studio-caption-list-header small { color:#64748b; font-size:.8rem; font-weight:400; margin-left:.4rem; }
.studio-caption-list-header input { width:100%; border:1px solid #64748b55; border-radius:.5rem; padding:.5rem .75rem; background:transparent; }
.studio-caption-tools { display:flex; gap:.4rem; flex-wrap:wrap; margin:.75rem 0; }
.studio-caption-tools button,.studio-caption-pagination button { border:1px solid #64748b44; border-radius:.35rem; padding:.35rem .5rem; font-size:.75rem; }
.studio-caption-tools button:disabled,.studio-caption-pagination button:disabled { opacity:.4; cursor:not-allowed; }
.studio-caption-rows { max-height:38rem; overflow-y:auto; padding:.15rem; scrollbar-gutter:stable; }
.studio-caption-row { border:1px solid #64748b44; border-left:3px solid transparent; border-radius:.5rem; padding:.7rem; margin-bottom:.6rem; }
.studio-caption-row.is-selected { border-left-color:#0d9488; background:#0d948808; }
.studio-caption-row.is-playing { box-shadow:0 0 0 1px #0d9488; }
.studio-caption-row.has-error { border-color:#e11d48; }
.studio-caption-row-heading { display:flex; align-items:center; gap:.5rem; }
.studio-caption-row-heading label { display:flex; align-items:center; gap:.3rem; color:#64748b; font-size:.75rem; }
.studio-caption-row-heading input { font: .78rem ui-monospace,monospace; width:6.2rem; border:1px solid #64748b33; border-radius:.35rem; background:transparent; padding:.3rem; color:inherit; }
.studio-caption-row-heading button { color:#0d9488; font-size:.8rem; white-space:nowrap; }
.studio-caption-row-heading .studio-caption-remove { margin-left:auto; color:#64748b; font-size:1.3rem; }
.studio-caption-row textarea { width:100%; resize:vertical; margin:.5rem 0 0; border:0; background:transparent; font-size:.92rem; line-height:1.5; outline-offset:2px; }
.studio-caption-row-footer { display:flex; justify-content:space-between; gap:.5rem; align-items:center; }
.studio-caption-row-footer label { margin-left:auto; white-space:nowrap; font-size:.75rem; color:#64748b; }
.studio-caption-row-footer select { border:0; border-radius:.3rem; padding:.2rem; background:transparent; font-size:.75rem; }
.studio-caption-notice { font-size:.85rem; margin:.5rem 0; color:#0d9488; }
.studio-caption-errors { color:#e11d48; font-size:.78rem; }
.studio-caption-error-summary { padding:1rem; border:1px solid #e11d48; border-radius:.5rem; margin-bottom:1rem; color:#e11d48; }
.studio-caption-pagination { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; margin-top:.75rem; }
.studio-caption-editor-actions { position:sticky; bottom:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1rem; padding:1rem; border:1px solid #64748b33; border-radius:.6rem; background:var(--gray-50,#fff); }
.dark .studio-caption-editor-actions { background:#18181b; }
.studio-caption-editor-actions > div { display:flex; gap:.5rem; }
.studio-caption-editor-actions > a { font-size:.85rem; color:#0d9488; }
@media(min-width:1024px) { .studio-caption-left { position:sticky; top:5rem; align-self:start; } }
@media(max-width:600px) { .studio-caption-row-heading { flex-wrap:wrap; } .studio-caption-row-heading input { width:5.7rem; } .studio-caption-editor-actions { flex-direction:column; align-items:stretch; } .studio-caption-editor-actions > div { flex-wrap:wrap; } }
.fi-sc-tabs .studio-caption-transcript { border:0; padding:0; background:transparent; }

/* Source URL import: compact input, readable background-download status. */
.studio-video-import { padding: 1rem; border: 1px solid #99f6e4; border-radius: .75rem; background: color-mix(in srgb, #14b8a6 4%, transparent); }
.studio-video-import-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.studio-video-import-heading svg { width: 1.4rem; color: #0d9488; flex: none; }
.studio-video-import-heading p, .studio-import-help { color: #64748b; font-size: .85rem; }
.studio-import-label { display: block; font-size: .85rem; margin-bottom: .3rem; }
.studio-video-import-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }
.studio-import-help { margin-top: .6rem; }
.studio-import-help a, .studio-import-row a { color: #0d9488; text-decoration: underline; }
.studio-import-history { margin-top: .85rem; font-size: .875rem; }
.studio-import-history summary { cursor: pointer; font-weight: 600; }
.studio-import-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid #94a3b833; }
.studio-import-history .studio-import-row { margin-top: .5rem; }
.studio-import-description { min-width: 0; overflow-wrap: anywhere; }
.studio-import-status { display: flex; align-items: center; gap: .4rem; color: #64748b; font-size: .8rem; }
.studio-import-status svg { width: 1rem; height: 1rem; flex: none; }
.studio-import-error { color: #dc2626; font-size: .85rem; margin-top: .4rem; }
@media (max-width: 640px) { .studio-video-import-input { grid-template-columns: minmax(0, 1fr); } .studio-import-row { flex-wrap: wrap; } }

/* Grid tracks must shrink to the viewport, even with tables or long request IDs.
   Keep intentional scrolling inside tables/editors instead of clipping the page. */
.studio-detail, .studio-jobs-layout, .studio-log-list, .studio-trimmer-editor {
    grid-template-columns: minmax(0, 1fr);
}
.studio-detail > *, .studio-jobs-layout > *, .studio-log-list > *,
.studio-input-copy, .studio-recent > a > div, .studio-image-preview-copy > div > * {
    min-width: 0;
}
.studio-detail, .studio-jobs-layout, .studio-log-list, .studio-input-copy,
.studio-character-intro, .fi-header-heading { overflow-wrap: anywhere; }
.studio-status-badge { max-width: 100%; }
.studio-status-badge .fi-badge-label, .studio-status-content { white-space: normal; }
.studio-caption-downloads, .studio-image-preview-copy > div { flex-wrap: wrap; }
.studio-wizard-submit { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.studio-data-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; margin-top: 1rem; }
.studio-data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; }
.studio-data-table th, .studio-data-table td { padding: .75rem; vertical-align: top; }
.studio-data-table tbody tr { border-top: 1px solid #8b9a9845; }
.studio-data-table td:first-child { overflow-wrap: anywhere; }

@media (max-width: 639px) {
    .fi-main { padding-inline: 1rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
    .fi-main .fi-section-header, .fi-main .fi-section-content { padding: 1rem; }
    .fi-main .fi-header-heading { font-size: 1.5rem; line-height: 1.25; }
    .fi-main .fi-btn { min-height: 44px; max-width: 100%; white-space: normal; }
    .fi-main .fi-btn-label { white-space: normal; }
    .fi-icon-btn { min-width: 44px; min-height: 44px; }
    /* A 16px field font prevents iOS from zooming in when a field receives focus. */
    .fi-body input:not([type=checkbox]):not([type=radio]):not([type=range]),
    .fi-body textarea, .fi-body select { font-size: 16px; }
    .fi-main input[type=range] { min-height: 44px; }
    .fi-main .fi-input, .fi-main .fi-select-input { min-height: 44px; }

    /* Keep every step visible, including the current step after Next or Back. */
    .fi-sc-wizard .fi-sc-wizard-header {
        grid-auto-flow: row; grid-auto-columns: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible;
    }
    .fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-btn { padding: 12px 2px; }
    .fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-label { overflow-wrap: anywhere; }
    .studio-wizard-submit { flex-direction: column; width: 100%; }
    .studio-wizard-submit .fi-btn { width: 100%; }

    .studio-recent > a { display: grid; grid-template-columns: 40px minmax(0, 1fr); }
    .studio-recent-icon { padding: 8px; }
    .studio-recent > a > .studio-status-badge { grid-column: 2; justify-self: start; }
    .studio-section-heading { flex-wrap: wrap; }
    .studio-hero { min-height: 0; }
    .studio-hero-copy { padding: 22px; }
    .studio-detail { gap: 16px; }

    /* Native table controls remain available; library rows are arranged below as compact cards. */
    .fi-ta-table-stacked-on-mobile .fi-ta-text { overflow-wrap: anywhere; }
    .fi-ta-table-stacked-on-mobile .fi-ta-selection-cell { min-height: 44px; }
    .studio-data-table, .studio-data-table tbody, .studio-data-table tr, .studio-data-table td { display: block; }
    .studio-data-table thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .studio-data-table tbody { display: grid; gap: 1rem; }
    .studio-data-table tbody tr { border: 1px solid #8b9a9845; border-radius: .65rem; padding: .5rem .75rem; }
    .studio-data-table td { padding: .5rem 0; overflow-wrap: anywhere; }
    .studio-data-table td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; color: #64748b; margin-bottom: .25rem; }
    .dark .studio-data-table td::before { color: #a0b2ab; }

    .studio-input-controls { flex-wrap: wrap; font-size: 12px; }
    .studio-input-controls button { min-width: 44px; min-height: 44px; }
    .studio-input-controls input[type=range] { order: 1; flex-basis: 100%; width: 100%; }
    .studio-input-time { flex: 1; text-align: center; }
    .studio-input-controls label { display: flex; align-items: center; gap: 5px; min-height: 44px; }
    .studio-trimmer-times { gap: 8px; }
    .studio-trimmer-times label { flex: 1; }
    .studio-trimmer-times input { width: 100%; min-width: 0; min-height: 44px; }
    .studio-trimmer-play, .studio-trimmer-reset, .studio-trimmer-toggle { min-height: 44px; }
    .studio-trimmer-handle { width: 32px; }
    .studio-trimmer-timeline { padding-inline: 16px; }

    .studio-caption-transcript { padding: .75rem; }
    .studio-caption-review-screen video { max-height: 40svh; }
    .studio-caption-row { padding: .65rem; }
    .studio-caption-row-heading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .studio-caption-row-heading > button:first-child { grid-column: 1; grid-row: 1; justify-self: start; }
    .studio-caption-row-heading .studio-caption-remove { grid-column: 2; grid-row: 1; justify-self: end; }
    .studio-caption-row-heading label { display: grid; gap: .25rem; }
    .studio-caption-row-heading input { width: 100%; min-width: 0; min-height: 44px; }
    .studio-caption-row-heading button, .studio-caption-tools button,
    .studio-caption-pagination button, .studio-caption-preview-controls button { min-height: 44px; min-width: 44px; }
    .studio-caption-row-footer { flex-wrap: wrap; }
    .studio-caption-row-footer select { min-height: 44px; max-width: 100%; }
    .studio-caption-rows { max-height: 60svh; }
    .studio-caption-editor-actions { position: static; padding: .75rem; }
    .studio-caption-editor-actions > div { display: grid; grid-template-columns: minmax(0, 1fr); }
    .studio-caption-follow, .studio-caption-editor-actions > a { min-height: 44px; }
    .studio-caption-range input[type=number] { min-height: 44px; }
}
@media (max-width: 380px) {
    .studio-caption-row-heading label { grid-column: 1 / -1; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; }
}

/* Use the same record cells and actions on every screen, with a compact mobile hierarchy. */
@media (max-width: 639px) {
    .fi-page:has(.studio-characters-table) .fi-header { flex-direction: row; align-items: center; gap: 8px; }
    .fi-page:has(.studio-characters-table) .fi-header-actions-ctn { flex-shrink: 1; }
    .studio-character-intro { padding: 16px; gap: 0; }
    .studio-character-intro h2 { font-size: 20px; }
    .studio-character-intro p { font-size: 13px; }
    .studio-character-intro ol { display: none; }
    .studio-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .studio-stats > div { display: block; padding: 14px; min-width: 0; overflow-wrap: anywhere; }
    .studio-stats strong { font-size: 24px; }
    .studio-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; display: flex; }
    .studio-job-stats { gap: 8px; }
    .studio-job-stats > div { padding: 12px; }
    .studio-job-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
    .studio-library-table .fi-ta-header-toolbar { padding: 12px; gap: 8px; }
    .studio-library-table .fi-ta-header-toolbar > .fi-ta-actions:not(:has(> :not([style*="display: none"]))) { display: none; }
    .studio-library-table .fi-ta-header-toolbar > :not(.fi-ta-actions) { width: 100%; min-width: 0; gap: 4px; margin: 0; }
    .studio-library-table .fi-ta-search-field { flex: 1; min-width: 0; width: auto; }
    .studio-library-table .fi-ta-table-stacked-header-cell { padding: 8px 12px; gap: 8px; }
    .studio-library-table .fi-ta-table-stacked-sorting { min-width: 0; }
    .studio-library-table .fi-ta-table-stacked-sorting .fi-input-wrp { min-width: 0; }
    .studio-library-table .fi-ta-table-stacked-header-cell .fi-ta-page-checkbox { margin-inline: 12px; }
    .studio-library-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row {
        display: grid; grid-template-columns: 96px minmax(0, 1fr) 32px;
        gap: 4px 12px; padding: 16px; align-items: start;
    }
    .studio-library-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell {
        padding: 0; min-width: 0; width: auto;
    }
    .studio-library-table .fi-ta-row > .fi-ta-cell { grid-column: 1 / -1; }
    .studio-library-table .fi-ta-cell-content, .studio-library-table .fi-ta-col { min-width: 0; }
    .studio-library-table .fi-ta-cell .fi-ta-cell-label { padding-top: 0; font-size: 12px; line-height: 1.5; }
    .studio-library-table .fi-ta-text { padding: 0; overflow-wrap: anywhere; }
    .studio-library-table .fi-ta-text-item { line-height: 1.45; }
    .studio-library-table .fi-ta-text-description { font-size: 12px; line-height: 1.5; }
    .studio-library-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-selection-cell {
        position: absolute; inset: 8px 8px auto auto; display: flex; align-items: center;
        justify-content: center; width: 44px; height: 44px; padding: 0; grid-area: auto;
    }
    /* Extend each checkbox's hit area without enlarging its visual box. */
    .studio-library-table .fi-checkbox-input { position: relative; }
    .studio-library-table .fi-checkbox-input::after { content: ''; position: absolute; inset: -12px; }
    .studio-library-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:has(> .fi-ta-actions) {
        padding-top: 4px;
    }
    .studio-library-table .fi-ta-actions .fi-link { min-height: 44px; padding-inline: 4px; }
    .studio-library-table .fi-ta-actions .fi-link-label { align-self: auto; }
    .studio-library-table .fi-ta-cell:is(.fi-ta-cell-images, .fi-ta-cell-preview, .fi-ta-cell-name, .fi-ta-cell-title, .fi-ta-cell-status) > .fi-ta-cell-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }

    .studio-characters-table .fi-ta-row > .fi-ta-cell-images { grid-column: 1; grid-row: 1 / 5; }
    .studio-characters-table .fi-ta-cell-images .fi-ta-image { padding: 0; display: block; }
    .studio-characters-table .fi-ta-cell-images img { width: 96px !important; height: 136px !important; object-fit: cover; border-radius: 10px; margin: 0; box-shadow: none; }
    .studio-characters-table .fi-ta-cell-images img ~ img { display: none; }
    .studio-characters-table .fi-ta-row > .fi-ta-cell-name { grid-column: 2; grid-row: 1; padding-top: 5px !important; }
    .studio-characters-table .fi-ta-cell-name .fi-ta-text-item { font-size: 16px; font-weight: 650; }
    .studio-characters-table .fi-ta-row > .fi-ta-cell-reference-count { grid-column: 2 / -1; grid-row: 2; display: flex !important; align-items: baseline; gap: 4px; }
    .studio-characters-table .fi-ta-cell-reference-count .fi-ta-cell-label { order: 2; text-transform: lowercase; font-weight: 400; font-size: 13px; }
    .studio-characters-table .fi-ta-cell-reference-count .fi-ta-text-item { font-size: 13px; }
    .studio-characters-table .fi-ta-row > .fi-ta-cell-updated-at { grid-column: 2 / -1; grid-row: 3; }
    .studio-characters-table .fi-ta-cell-updated-at .fi-ta-cell-label { display: none; }
    .studio-characters-table .fi-ta-cell-updated-at .fi-ta-text-item { font-size: 12px; color: #64748b; }
    .studio-characters-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:has(> .fi-ta-actions) { grid-column: 2 / -1; grid-row: 4; }
    .studio-characters-table .fi-ta-cell-description { margin-top: 8px; }

    .studio-creations-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
    .studio-creations-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row:has(.fi-ta-cell-preview) > .fi-ta-selection-cell { inset-inline-start: 8px; inset-inline-end: auto; z-index: 1; }
    .studio-creations-table .fi-ta-row > .fi-ta-cell-preview { grid-column: 1; grid-row: 1 / 3; }
    .studio-creations-table .fi-ta-cell-preview .fi-ta-image { padding: 0; }
    .studio-creations-table .fi-ta-cell-preview img { width: 100% !important; height: 100px !important; border-radius: 9px !important; }
    .studio-creations-table .fi-ta-row > .fi-ta-cell-title { grid-column: 2; grid-row: 1; }
    .studio-creations-table .fi-ta-cell-title .fi-ta-text-item { font-size: 15px; font-weight: 650; }
    .studio-creations-table .fi-ta-row > .fi-ta-cell-status { grid-column: 2; grid-row: 2; min-width: 0 !important; }
    .studio-creations-table .fi-ta-row > .fi-ta-cell-cost { grid-column: 1; grid-row: 3; border-top: 1px solid #8b9a982b; padding-top: 10px !important; }
    .studio-creations-table .fi-ta-row > .fi-ta-cell-processing-time { grid-column: 2; grid-row: 3; border-top: 1px solid #8b9a982b; padding-top: 10px !important; }
    .studio-creations-table .fi-ta-cell:is(.fi-ta-cell-cost, .fi-ta-cell-processing-time) .fi-ta-text-item { font-weight: 600; }
    .studio-creations-table .fi-ta-row > .fi-ta-cell-credits.studio-credits-unavailable { display: none !important; }
    .studio-creations-table .fi-ta-cell-credits .fi-ta-text-item { font-size: 12px; }
    .studio-creations-table .fi-ta-cell-step-progress { padding-top: 8px !important; border-top: 1px solid #8b9a982b; }
    .studio-creations-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:has(> .fi-ta-actions) { order: 2; }
    .studio-creations-table .fi-ta-row:not(:has(.fi-ta-cell-preview)) > .fi-ta-cell-title { grid-column: 1 / -1; padding-right: 32px !important; }
    .studio-creations-table .fi-ta-row:not(:has(.fi-ta-cell-preview)) > .fi-ta-cell-status { grid-column: 1 / -1; }
    .dark .studio-characters-table .fi-ta-cell-updated-at .fi-ta-text-item { color: #94a3b8; }
}
@media (max-width: 359px) {
    .studio-library-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row { padding: 12px; gap: 4px 8px; }
    .studio-characters-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row { grid-template-columns: 76px minmax(0, 1fr) 28px; }
    .studio-characters-table .fi-ta-cell-images img { width: 76px !important; height: 118px !important; }
    .studio-creations-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row { gap: 10px; }
    .studio-creations-table .fi-ta-cell-preview img { height: 92px !important; }
}

/* Creation flow: reachable actions and compact, optional context. */
.studio-creation-wizard { min-height: calc(100dvh - 13rem); isolation: isolate; }
.studio-creation-wizard > .fi-sc-wizard-footer {
    position: sticky; bottom: 0; z-index: 20; margin-top: auto;
    padding: .8rem 1rem max(.8rem, env(safe-area-inset-bottom));
    background: #fff; border: 1px solid #dce5e2; border-radius: .85rem;
    box-shadow: 0 -6px 24px #1027230c; flex-shrink: 0;
}
.studio-creation-wizard > .fi-sc-wizard-step { padding-bottom: 1.25rem; }
.studio-creation-wizard .fi-sc-wizard-header-step { scroll-margin-top: 5rem; }
.studio-creation-wizard .fi-sc-wizard-header { scrollbar-width: thin; }
.studio-creation-wizard [data-field-wrapper], .studio-creation-wizard [data-validation-error], .studio-creation-wizard input, .studio-creation-wizard textarea { scroll-margin-block: 6rem; }
.studio-creation-wizard .fi-sc-wizard-footer .fi-btn { min-height: 44px; }
.studio-creation-wizard .fi-sc-wizard-footer > div:last-child { min-width: 0; }
.studio-creation-wizard .fi-sc-wizard-step .fi-sc { row-gap: 1.25rem; }
.studio-input-disclosure { display: block; padding: 0; background: #f4f8f7; }
.studio-input-summary { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; cursor: pointer; list-style: none; }
.studio-input-summary::-webkit-details-marker { display: none; }
.studio-input-summary > svg { width: 1.25rem; height: 1.25rem; color: #0f766e; flex: none; }
.studio-input-summary > span:first-of-type { min-width: 0; }
.studio-input-summary strong { display: block; font-size: .85rem; font-weight: 600; }
.studio-input-summary small { display: block; font-size: .75rem; color: #526c65; font-variant-numeric: tabular-nums; }
.studio-input-expand { display: flex; align-items: center; gap: .4rem; margin-left: auto; color: #0f766e; font-size: .8rem; font-weight: 600; }
.studio-input-disclosure .when-open, .studio-input-disclosure[open] .when-closed { display: none; }
.studio-input-disclosure[open] .when-open { display: inline; }
.studio-input-disclosure > .studio-input-player { max-width: 30rem; margin: 0 auto; border-radius: 0; }
.studio-input-disclosure > .studio-input-copy { padding: .75rem 1rem; }
.studio-input-summary:focus-visible, .studio-more-info > summary:focus-visible { outline: 2px solid #0d9488; outline-offset: 3px; }
.studio-more-info { font-size: .85rem; margin-top: .75rem; }
.studio-more-info > summary { cursor: pointer; color: #0f766e; padding: .4rem 0; font-weight: 600; }
.studio-more-info > :not(summary) { margin-top: .65rem; }
.studio-creation-wizard .studio-settings { grid-template-columns: minmax(100px, .4fr) minmax(0, 1fr); gap: .65rem 1rem; }
.studio-creation-wizard .studio-settings dd { margin-bottom: 0; }
.studio-creation-wizard .studio-workflow-plan { gap: .75rem; }
.studio-creation-wizard .studio-workflow-plan ol { gap: .5rem; }
.dark .studio-creation-wizard > .fi-sc-wizard-footer { background: #182221; border-color: #33443f; }
.dark .studio-input-disclosure { background: #1b2b27; }
.dark .studio-input-summary small { color: #afc8c0; }
.dark .studio-input-expand, .dark .studio-more-info > summary, .dark .studio-input-summary > svg { color: #5eead4; }
@media (max-width: 767px) {
    .studio-creation-wizard { min-height: calc(100dvh - 5rem); }
    .studio-creation-wizard .fi-sc-wizard-header {
        grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(76px, 1fr);
        overflow-x: auto; overscroll-behavior-x: contain;
    }
    .studio-creation-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-btn { padding: 10px 4px; }
    .studio-creation-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step-label { white-space: nowrap; font-size: 11px; }
    .studio-creation-wizard > .fi-sc-wizard-footer { padding-inline: .75rem; gap: .5rem; }
    .studio-creation-wizard .studio-wizard-submit { flex-direction: row; flex-wrap: nowrap; gap: .5rem; width: auto; }
    .studio-creation-wizard .studio-wizard-submit .fi-btn { width: auto; padding-inline: .5rem; }
    .studio-creation-wizard .studio-wizard-submit .fi-icon:not(.fi-loading-indicator) { display: none; }
    .studio-creation-wizard .fi-sc-wizard-footer .fi-btn { white-space: nowrap; font-size: .8rem; }
    .studio-creation-wizard .fi-sc-wizard-footer > div:first-child .fi-icon:not(.fi-loading-indicator) { display: none; }
    .studio-input-summary { gap: .5rem; padding: .75rem; }
    .studio-input-summary small { font-size: .7rem; }
}

.studio-video-import > summary { cursor: pointer; margin-bottom: 0; }
.studio-backup-summary { display: grid; gap: 1.25rem; min-width: 0; }
.studio-backup-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.studio-backup-stats span, .studio-backup-stats strong { display: block; }
.studio-backup-stats span, .studio-backup-note { font-size: .875rem; color: #526c65; }
.studio-backup-stats strong { margin-top: .35rem; }
.studio-backup-note { margin-top: .75rem; }
.studio-backup-message { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: .75rem; background: #ecfdf5; overflow-wrap: anywhere; }
.studio-backup-message[data-failed="true"] { background: #fff1f2; color: #9f1239; }
.studio-backup-spinner { width: 1.25rem; height: 1.25rem; flex: none; }
.dark .studio-backup-stats span, .dark .studio-backup-note { color: #b2c6c0; }
.dark .studio-backup-message { background: #133b32; }
.dark .studio-backup-message[data-failed="true"] { background: #4c1724; color: #fecdd3; }
@media (max-width: 767px) {
    .studio-backup-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .studio-backups-table .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
    .studio-backups-table .fi-ta-row > .fi-ta-cell-created-at { grid-column: 1 / -1; }
    .studio-backups-table .fi-ta-row > .fi-ta-cell-contents { grid-column: 1; }
    .studio-backups-table .fi-ta-row > .fi-ta-cell-bytes { grid-column: 2; }
    .studio-backups-table .fi-ta-row > .fi-ta-cell-valid { grid-column: 1 / -1; }
}
.studio-video-import[open] > summary { margin-bottom: 1rem; }
@media (max-width: 850px) {
    .studio-detail > .studio-player-grid > :last-child { order: -1; }
}

/* Shared studio theme. Scoped to the signed-in layout; auth has its own backdrop. */
.fi-body:has(.fi-layout) {
    --studio-ink: #173b32;
    --studio-muted: #5f766e;
    --studio-line: #dce6df;
    --studio-paper: #ffffff;
    background: #f1f5f1;
}
.fi-layout {
    background:
        radial-gradient(ellipse at 90% 0, #dbe9cf85, transparent 46%),
        linear-gradient(#2f655204 1px, transparent 1px),
        linear-gradient(90deg, #2f655204 1px, transparent 1px), #f1f5f1;
    background-size: auto, 72px 72px, 72px 72px, auto;
}
.fi-body:has(.fi-layout) .fi-topbar {
    background: #102b29;
    color: #eaf4eb;
    box-shadow: 0 1px 0 #b4d4bd25;
}
.fi-body:has(.fi-layout) .fi-topbar .fi-logo, .fi-layout .fi-sidebar-header .fi-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 650; letter-spacing: -.025em; color: #eff6ee;
}
.fi-body:has(.fi-layout) .fi-topbar .fi-logo::before, .fi-layout .fi-sidebar-header .fi-logo::before {
    content: ''; display: block; width: 30px; height: 30px; flex: none;
    background: url('/favicon.svg') center / contain no-repeat;
}
.fi-body:has(.fi-layout) .fi-topbar > .fi-icon-btn, .fi-layout .fi-sidebar-header .fi-icon-btn { color: #d4e7d9; }
.fi-body:has(.fi-layout) .fi-topbar > .fi-icon-btn > .fi-icon, .fi-layout .fi-sidebar-header .fi-icon-btn > .fi-icon { color: inherit; }
.fi-body:has(.fi-layout) .fi-topbar .fi-input-wrp { border-radius: 10px; box-shadow: none; }
.fi-layout .fi-sidebar {
    background:
        radial-gradient(ellipse at 0 0, #286c6033, transparent 65%),
        linear-gradient(170deg, #102b29, #0c201f);
    border-right: 1px solid #b4d4bd19;
}
.fi-layout .fi-sidebar-header { background: #102b29; }
.fi-layout .fi-sidebar-nav { padding: 26px 20px; }
.fi-layout .fi-sidebar-group-items { gap: 6px; }
.fi-layout .fi-sidebar-item > .fi-sidebar-item-btn { min-height: 44px; padding: 11px 14px; border-radius: 11px; }
.fi-layout .fi-sidebar-item > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: #c5d7cd; font-size: 13px; }
.fi-layout .fi-sidebar-item > .fi-sidebar-item-btn > .fi-icon { color: #91b4a5; width: 20px; height: 20px; }
.fi-layout .fi-sidebar-item > .fi-sidebar-item-btn:hover { background: #ffffff0d; }
.fi-layout .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: #d6e9b7; box-shadow: 0 3px 12px #0001; }
.fi-layout .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > :is(.fi-sidebar-item-label, .fi-icon) { color: #173b32; font-weight: 650; }
.fi-layout .fi-sidebar-group-label { color: #b6cabf; }
.fi-layout .studio-queue-indicator { border-color: #9dc0b12b; color: #d2e0d8; padding: 20px; }
.fi-layout .studio-queue-indicator span { color: #aec4b9; opacity: 1; }
.fi-layout .fi-main { padding-top: 28px; }
.fi-layout .fi-header-heading { color: var(--studio-ink); font-size: clamp(25px, 2.3vw, 32px); font-weight: 650; letter-spacing: -.035em; }
.fi-layout .fi-breadcrumbs { font-size: 12px; }
.fi-layout .fi-breadcrumbs-item-label { color: var(--studio-muted); }
.fi-layout .fi-main :is(.fi-section, .fi-ta-ctn) {
    border: 1px solid var(--studio-line); border-radius: 18px;
    background: var(--studio-paper); box-shadow: 0 3px 12px #173b3205;
}
.fi-layout .fi-section-header { border-color: var(--studio-line); }
.fi-layout .fi-section-header-heading { color: var(--studio-ink); font-weight: 650; letter-spacing: -.015em; }
.fi-layout .fi-section-header-description { color: var(--studio-muted); line-height: 1.6; }
.fi-layout .fi-main .fi-btn { border-radius: 10px; min-height: 40px; }
.fi-layout .fi-main .fi-btn.fi-color-primary { background: #116e61; color: #fff; box-shadow: 0 2px 5px #116e6114; }
.fi-layout .fi-main .fi-btn.fi-color-primary:hover { background: #0c594e; }
.fi-layout .fi-main .fi-btn.fi-color-primary > .fi-icon { color: inherit; }
.fi-layout .fi-main .fi-input-wrp { border-radius: 10px; }
.fi-layout .fi-main :is(.fi-input, .fi-select-input) { min-height: 40px; }
.fi-layout .fi-main textarea { line-height: 1.65; }
.fi-layout :is(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid #499f89; outline-offset: 3px; }
.fi-layout .fi-ta-header-toolbar { padding-block: 16px; }
.fi-layout .fi-ta-table > thead { background: #f5f8f3; }
.fi-layout .fi-ta-header-cell-label { color: #526a5f; font-size: 12px; font-weight: 600; }
.fi-layout .fi-ta-row:hover { background: #f8fbf6; }
.fi-layout .fi-ta-cell :is(.fi-ta-text-description, .fi-ta-cell-label) { color: var(--studio-muted); }
.fi-layout .fi-ta-cell img { border-radius: 9px; }
.fi-layout .fi-pagination { border-color: var(--studio-line); }
.fi-layout .fi-sc-wizard-header { border: 1px solid var(--studio-line); border-radius: 14px; background: var(--studio-paper); }
.fi-layout .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn { background: #f1f7e9; border-radius: 12px; }
.fi-layout .studio-creation-wizard > .fi-sc-wizard-footer { border-color: var(--studio-line); background: var(--studio-paper); border-radius: 14px; }
.fi-layout :is(.studio-stats > div, .studio-job-stats > div, .studio-worker-card, .studio-flow-card, .studio-recent) {
    border-color: var(--studio-line); border-radius: 16px; background: var(--studio-paper); box-shadow: 0 2px 8px #173b3204;
}
.fi-layout :is(.studio-stats strong, .studio-job-stats strong) { color: var(--studio-ink); font-weight: 600; letter-spacing: -.04em; }
.fi-layout :is(.studio-stats span, .studio-job-stats span, .studio-flow-card p, .studio-recent p) { color: var(--studio-muted); }
.fi-layout .studio-section-heading { margin-bottom: 12px; }
.fi-layout .studio-section-heading h2, .fi-layout .studio-flow-card h3 { color: var(--studio-ink); }
.fi-layout .studio-hero {
    border: 1px solid #aac7ac26; border-radius: 22px;
    background: radial-gradient(ellipse at 80% 20%, #3c69555c, transparent 60%), linear-gradient(125deg, #143b34, #0c201f);
}
.fi-layout .studio-hero h2 { color: #f1f5ec; font-weight: 600; }
.fi-layout .studio-hero-button { background: #d6e9b7; color: #173b32; border-radius: 10px; min-height: 44px; }
.fi-layout .studio-art-front { background: #d6e9b7; color: #173b32; }
.fi-layout .studio-art-back { background: linear-gradient(135deg, #356c5e, #7f9d70); }
.fi-layout .studio-flow-card:hover { border-color: #7fae96; box-shadow: 0 8px 22px #173b320b; }
.fi-layout .studio-recent > a:hover { background: #f6faf3; }
.fi-layout .studio-recent-icon { background: #edf4e4; color: #356650; }
.fi-layout .studio-input-disclosure { border-color: var(--studio-line); background: #f3f7ee; }
.fi-layout .studio-workflow-plan li { border-color: var(--studio-line); background: #f8faf6; }
.fi-layout .studio-summary-note { color: var(--studio-muted); line-height: 1.6; }
.dark .fi-body:has(.fi-layout) { --studio-ink: #dfecdf; --studio-muted: #adc2b5; --studio-line: #30483d; --studio-paper: #172c24; }
.dark .fi-layout { background: radial-gradient(ellipse at 90% 0, #253e2e, transparent 50%), #10221d; }
.dark .fi-layout :is(.fi-ta-table > thead, .fi-ta-row:hover, .studio-recent > a:hover, .studio-input-disclosure, .studio-workflow-plan li) { background: #20382c; }
.dark .fi-layout .fi-ta-header-cell-label { color: #b9cbbc; }
.dark .fi-layout .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn { background: #2a4130; }
@media (max-width: 1023px) {
    .fi-layout .fi-sidebar { max-width: calc(100vw - 48px); }
    .fi-body:has(.fi-layout) .fi-topbar { padding-inline: 16px; }
    .fi-layout .fi-main { padding-top: 20px; }
}
@media (max-width: 639px) {
    .fi-layout .fi-main { padding-inline: 14px; }
    .fi-layout .fi-header { gap: 16px; }
    .fi-layout .fi-header-heading { font-size: 26px; }
    .fi-layout .fi-main :is(.fi-section, .fi-ta-ctn) { border-radius: 14px; }
    .fi-layout .fi-main :is(.fi-btn, .fi-input, .fi-select-input) { min-height: 44px; }
    .fi-layout .fi-header-actions-ctn { max-width: 100%; }
    .fi-layout .fi-header-actions-ctn .fi-ac { flex-wrap: wrap; gap: 8px; }
    .fi-layout .fi-ta-header-toolbar { padding-block: 12px; }
    .fi-layout .studio-hero { border-radius: 16px; }
    .fi-layout .studio-hero h2 { font-size: 32px; }
    .fi-layout .studio-flow-grid { gap: 10px; }
    .fi-layout .studio-flow-card { padding: 20px; }
    .fi-layout .studio-flow-card > div { margin-bottom: 14px; }
    .fi-layout .studio-stats { gap: 10px; }
    .fi-layout .studio-creation-wizard > .fi-sc-wizard-footer { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .fi-layout .studio-flow-card { transition: none; }
    .fi-layout .studio-flow-card:hover { transform: none; }
}

/* Explicit person selection for PixVerse, shared by single and cast swaps. */
.studio-swap-targets { min-width: 0; display: grid; gap: .8rem; }
.studio-swap-scrubber { display: grid; gap: .5rem; }
.studio-swap-scrubber label { display: grid; gap: .35rem; }
.studio-swap-scrubber output { font-size: .875rem; color: #48766c; }
.studio-swap-scrubber input { width: 100%; min-width: 0; height: 44px; accent-color: #126b60; }
.studio-swap-frame-controls { display: flex; gap: .5rem; }
.studio-swap-frame-controls button { min-height: 44px; padding: .4rem .8rem; border: 1px solid #739c93; border-radius: .65rem; }
.studio-swap-frame-controls button:disabled { opacity: .4; }
.studio-swap-target-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.studio-swap-target-buttons button { min-height: 44px; text-align: left; overflow-wrap: anywhere; border: 1px solid #739c93; border-radius: .65rem; padding: .6rem .8rem; }
.studio-swap-target-buttons button[aria-pressed="true"] { background: #126b60; color: white; }
.studio-swap-frame { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; cursor: crosshair; border-radius: .65rem; overflow: hidden; background: #102824; line-height: 0; }
.studio-swap-frame:focus-visible { outline: 3px solid #0d9488; outline-offset: 3px; }
.studio-swap-frame video { display: block; width: auto; height: auto; max-height: min(48vh, 480px); max-width: 100%; pointer-events: none; }
.studio-swap-validation { color: #b91c1c; border-left: 3px solid currentColor; padding-left: .75rem; }
.dark .studio-swap-validation { color: #fca5a5; }
.studio-swap-marker { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid white; border-radius: 50%; background: #126b60; color: white; font-weight: 700; line-height: 1; pointer-events: none; box-shadow: 0 1px 5px #0008; }