:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#263238;background:#f4f7fb}*{box-sizing:border-box}body{margin:0}.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #dde3eb;padding:12px 22px;display:flex;justify-content:space-between;align-items:center}.brand{font-weight:800}.version{font-size:12px;font-weight:600;color:#728197}nav{display:flex;gap:8px}button{border:1px solid #ccd5df;background:#fff;border-radius:10px;padding:9px 13px;cursor:pointer;font-weight:700}button:hover{filter:brightness(.98)}button.primary{background:#206fd5;color:#fff;border-color:#206fd5}button.accent{background:#7b3ff2;color:#fff;border-color:#7b3ff2}button.secondary{background:#eef4ff}.nav-btn.active{background:#263238;color:#fff}.danger{color:#a21a1a}.ghost{background:transparent}main{max-width:1450px;margin:0 auto;padding:18px 20px 60px}.view{display:none}.view.active{display:block}.api-banner{padding:10px 13px;border-radius:10px;background:#fff4d5;margin-bottom:14px}.api-banner.ok{background:#e6f7ec}.api-banner.bad{background:#ffe9e9}.hero-card,.panel{background:#fff;border:1px solid #dfe5ec;border-radius:16px;box-shadow:0 5px 18px rgba(25,42,70,.05)}.hero-card{padding:20px 22px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:18px}.hero-card h1{margin:0 0 6px}.hero-card p{margin:0;color:#657387}.panel{padding:18px;margin-bottom:16px}.panel h2{margin:0 0 14px}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:1fr 1fr}.compact{gap:10px}label{display:block;font-size:13px;font-weight:700;margin-bottom:11px}input,textarea,select{display:block;width:100%;margin-top:5px;border:1px solid #cfd8e3;border-radius:10px;padding:10px 11px;background:#fff;color:#1d2935;font:inherit}textarea{min-height:84px;resize:vertical}.actions{display:flex;gap:8px;margin-top:10px}.wrap{flex-wrap:wrap}.hint{font-size:12px;color:#748398}.warning{font-size:12px;background:#fff8df;padding:10px;border-radius:10px}.hidden{display:none!important}.job-status{margin-top:10px;padding:10px;border-radius:10px;background:#eef4ff}.story-strip{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.story-strip h2{margin:0}.story-summary{min-width:260px;flex:1}.story-summary.empty{color:#8290a2}.editor-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.page-tabs{display:flex;gap:5px;flex-wrap:wrap}.page-tab.active{background:#206fd5;color:#fff}.page-editor.empty-state{text-align:center;color:#8190a3;padding:50px 10px}.page-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:18px}.image-canvas{position:relative;background:#edf1f6;border-radius:14px;overflow:hidden;aspect-ratio:3/2}.image-canvas img{width:100%;height:100%;object-fit:cover}.caption-overlay,.editor-caption{position:absolute;left:4%;top:4%;max-width:70%;background:rgba(255,255,255,.88);padding:7px 11px;border-radius:8px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.15)}.bubble{position:absolute;transform:translate(-50%,-50%);max-width:34%;background:white;border:2px solid #263238;border-radius:20px;padding:8px 12px;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.14)}.bubble.thought{border-style:dashed;border-radius:40%}.bubble.shout{border-radius:6px}.narration-preview{font-size:18px;line-height:1.5;padding:12px 6px}.audio-box{background:#f6f8fb;padding:10px;border-radius:12px}.audio-box audio{width:100%;margin-top:7px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.subpanel{border:1px solid #dce4ee;border-radius:12px;padding:12px;margin:10px 0}.subpanel h3{margin:0 0 10px}.character-row{display:grid;grid-template-columns:140px 1fr 160px 42px;gap:8px;align-items:end;margin-bottom:8px}.character-row label{margin:0}.remove-char{height:42px}.cast-preview{height:220px;border:1px dashed #bfc9d5;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f7f9fc}.cast-preview img{width:100%;height:100%;object-fit:contain}.cast-preview.empty{color:#8b99aa}.reference-card{border-top:1px solid #e4e9ef;padding-top:12px}.speech-row{display:grid;grid-template-columns:120px 1fr 95px 70px 70px 42px;gap:6px;align-items:end;margin-bottom:7px}.speech-row label{margin:0}.library-card{display:flex;justify-content:space-between;align-items:center;border:1px solid #e0e6ed;border-radius:12px;padding:12px;margin:8px 0}.cost-widget{position:fixed;right:18px;bottom:18px;z-index:30;width:210px;background:#172331;color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 10px 28px rgba(0,0,0,.25);cursor:pointer}.cost-title{font-size:12px;opacity:.8}.cost-total{font-size:22px;font-weight:900;margin:3px 0}.cost-sub,.cost-budget{font-size:12px;opacity:.9}.modal{position:fixed;inset:0;background:rgba(16,23,33,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.modal-card{width:min(760px,96vw);max-height:90vh;overflow:auto;background:white;border-radius:16px;padding:20px;position:relative}.modal-card.small{width:min(440px,94vw)}.modal-close{position:absolute;right:12px;top:10px;border:0;font-size:24px}.player{position:fixed;inset:0;background:#111;z-index:200;color:#fff}.player-stage{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}.player-image-wrap{width:min(1200px,95vw);height:min(68vh,760px);position:relative;background:#222;border-radius:18px;overflow:hidden}.player-image-wrap img{width:100%;height:100%;object-fit:contain;background:#000}.player-narration{font-size:clamp(20px,2.2vw,34px);max-width:1200px;text-align:center;padding:14px 12px}.player-controls{display:flex;gap:8px}.player-controls button{background:#fff}.player-counter{margin-top:8px}.ai-disclosure{position:absolute;right:14px;bottom:10px;font-size:11px;opacity:.65}.player .caption-overlay{color:#111}.player .bubble{color:#111}.cost-breakdown{margin-top:12px}.status-pill{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;background:#eef3f8}.status-pill.ready{background:#ddf5e5;color:#1c6a38}@media(max-width:900px){.grid.two,.page-layout{grid-template-columns:1fr}.character-row{grid-template-columns:1fr}.speech-row{grid-template-columns:1fr 1fr}.cost-widget{width:185px;right:8px;bottom:8px}.topbar{align-items:flex-start;gap:10px;flex-direction:column}.story-strip{display:block}.player-image-wrap{height:60vh}}
.audio-track{display:grid;grid-template-columns:110px 130px 1fr auto;gap:8px;align-items:center;padding:8px;border:1px solid #e6e9ef;border-radius:10px;margin:7px 0;background:#fff}.audio-track input,.audio-track select{margin:0}.track-ready{font-size:12px;color:#16803a}.track-missing{font-size:12px;color:#9a5b00}.speaker-now{font-weight:700;margin:8px 0}.character-row{grid-template-columns:1fr 2fr 1.2fr 130px 42px!important}@media(max-width:900px){.audio-track{grid-template-columns:1fr}.character-row{grid-template-columns:1fr!important}}

/* Compact editing stage and shared picture overlays. */
.editor-grid{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:20px;align-items:start}
.editor-grid>div{min-width:0}.image-stage{position:relative;width:100%;max-width:420px;aspect-ratio:1;background:#edf1f6;border-radius:14px;overflow:hidden;isolation:isolate}
.image-stage>img{display:block;width:100%;height:100%;object-fit:contain}
.caption-overlay:empty{display:none}.caption-overlay{z-index:2;font-size:clamp(11px,1vw,16px);max-width:85%}
.bubble{z-index:3;color:#263238;min-width:60px;max-width:40%;font-size:clamp(11px,1.1vw,17px);line-height:1.3;overflow-wrap:anywhere;padding:7px 10px}
.bubble small{display:block;font-size:.7em;color:#64748b;margin-bottom:3px}.bubble small:empty{display:none}.bubble span{display:block}
.bubble.speech:after,.bubble.shout:after{content:'';position:absolute;bottom:-10px;left:25%;width:14px;height:14px;background:#fff;border-right:2px solid #263238;border-bottom:2px solid #263238;transform:skewY(25deg)}
.bubble.thought{border:2px solid #263238;border-radius:45%;box-shadow:0 3px 10px #0002}
.bubble.thought:before,.bubble.thought:after{content:'';position:absolute;border:2px solid #263238;border-radius:50%;background:white}
.bubble.thought:before{width:10px;height:10px;bottom:-15px;left:25%}.bubble.thought:after{width:5px;height:5px;bottom:-24px;left:19%}
.player-image-wrap{--image-ratio:1;width:min(1100px,92vw,calc(62vh * var(--image-ratio)));height:auto;aspect-ratio:1;flex-shrink:0}
.player-image-wrap img{display:block}.player .bubble{font-size:clamp(12px,1.8vw,25px)}.player .caption-overlay{font-size:clamp(12px,1.5vw,22px)}
.audio-track{grid-template-columns:90px 100px minmax(90px,1fr) auto auto}.audio-track button:disabled{opacity:.4;cursor:default}#trackPreviewAudio{width:100%}
@media(max-width:1000px){.editor-grid{grid-template-columns:1fr}.image-stage{margin:auto}.audio-track{grid-template-columns:1fr 1fr}.audio-track input{grid-column:1/-1}.player-image-wrap{height:auto}}

/* Bubble geometry is proportional to the picture, including text size. */
.image-stage,.player-image-wrap{container-type:inline-size}
.bubble,.player .bubble{width:var(--bubble-width,32%);min-height:var(--bubble-height,18%);max-width:none;min-width:0;font-size:calc(var(--bubble-font,3.4) * 1cqw);padding:1.6cqw 2.2cqw;line-height:1.25}
.bubble.shape-rounded{border-radius:4cqw}.bubble.shape-oval{border-radius:50%;padding:2.2cqw 3cqw}.bubble.shape-rectangle{border-radius:1cqw}.bubble.shape-cloud{border-radius:45% 55% 40% 60% / 55% 40% 60% 45%;padding:2.2cqw 3cqw}
.bubble:before,.bubble:after{pointer-events:none}.bubble.tail-none:before,.bubble.tail-none:after{display:none}
.bubble.speech:after,.bubble.shout:after{width:3cqw;height:3cqw;left:var(--tail-x,25%);top:var(--tail-y,auto);bottom:var(--tail-bottom,-1.8cqw);transform:rotate(var(--tail-angle,25deg));border-radius:0}
.bubble.tail-bottomRight{--tail-x:70%;--tail-angle:65deg}.bubble.tail-topLeft{--tail-x:25%;--tail-y:-1.8cqw;--tail-bottom:auto;--tail-angle:205deg}.bubble.tail-topRight{--tail-x:70%;--tail-y:-1.8cqw;--tail-bottom:auto;--tail-angle:245deg}.bubble.tail-left{--tail-x:-1.8cqw;--tail-y:55%;--tail-bottom:auto;--tail-angle:135deg}.bubble.tail-right{--tail-x:calc(100% - 1.2cqw);--tail-y:55%;--tail-bottom:auto;--tail-angle:-45deg}
.bubble.thought:before{width:2.5cqw;height:2.5cqw;left:var(--tail-x,25%);top:var(--tail-y,auto);bottom:var(--tail-bottom,-3cqw)}.bubble.thought:after{width:1.3cqw;height:1.3cqw;left:var(--tail-x,19%);top:var(--tail-y,auto);bottom:var(--tail-bottom,-5cqw);transform:translate(-1cqw,1cqw)}
.bubble.thought.tail-topLeft:after,.bubble.thought.tail-topRight:after{transform:translate(-1cqw,-3cqw)}.bubble.thought.tail-left:after{transform:translate(-3cqw,1cqw)}.bubble.thought.tail-right:after{transform:translate(3cqw,1cqw)}
.editable-bubble{cursor:move;touch-action:none;user-select:none}.editable-bubble.selected{outline:3px solid #206fd5;outline-offset:3px;z-index:5}
.bubble-resize{position:absolute;right:-8px;bottom:-8px;padding:0;width:24px;height:24px;background:#206fd5;color:white;border:2px solid white;border-radius:6px;cursor:nwse-resize;touch-action:none;font-size:17px;line-height:20px;display:none}.editable-bubble.selected .bubble-resize{display:block}
.speech-row.bubble-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;border:1px solid #dce4ee;border-radius:12px;padding:12px;margin:10px 0}.bubble-card.selected{border-color:#206fd5;background:#f6f9ff}.bubble-card-title{grid-column:1/-1;display:flex;gap:8px;align-items:center;font-weight:800}.bubble-card-title button:first-of-type{margin-left:auto}.bubble-text-field{grid-column:span 2}.bubble-card input,.bubble-card select{margin-top:5px}.bubble-card-title button{font-size:12px}.bubble-card label{font-size:12px}
@media(max-width:650px){.speech-row.bubble-card{grid-template-columns:repeat(2,minmax(0,1fr))}.bubble-text-field{grid-column:1/-1}}

.bubble.shape-cloud{background:transparent;border-color:transparent;box-shadow:none;isolation:isolate;padding:3cqw 3.5cqw}.bubble-cloud-outline{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;filter:drop-shadow(0 2px 3px #0002)}

.voice-trial-note{padding:10px 12px;border-radius:10px;background:#eef4ff;color:#36516f;font-size:13px;line-height:1.5;margin:10px 0}.audio-track{grid-template-columns:90px 100px minmax(100px,1fr) auto auto auto}.track-source{grid-column:1/-1;color:#64748b;font-size:12px;overflow-wrap:anywhere}.audio-track select,.audio-track input{min-width:0}@media(max-width:1200px){.audio-track{grid-template-columns:1fr 1fr 1fr}.audio-track>input:not(.hidden){grid-column:1/-1}.audio-track>span{grid-column:span 2}}

.library-card{gap:14px;flex-wrap:wrap}.library-card .actions{margin-top:0}.library-card>div:first-child{flex:1;min-width:200px}