:root{color:#172033;background:#eef2f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}button,input,textarea{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}.sidebar{background:#18202f;color:#f8fafc;display:flex;flex-direction:column;gap:28px;padding:28px 22px}.brand{align-items:center;display:flex;gap:12px}.brand svg{color:#65d6ad;height:32px;width:32px}.brand strong,.brand span{display:block}.brand span{color:#b7c4d8;font-size:12px;line-height:1.45;margin-top:3px}.step-nav{display:grid;gap:8px}.step-link{align-items:center;border-radius:8px;color:#d8e1f0;display:flex;gap:10px;padding:11px 12px;text-decoration:none}.step-link.active,.step-link:hover{background:#263348;color:#fff}.step-link svg,.command-button svg,.icon-button svg{height:18px;width:18px}.workspace{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0}.workspace-inner{padding:28px}.work-grid,.editor-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr)}.panel{background:#fff;border:1px solid #d8e0ea;border-radius:8px;box-shadow:0 16px 42px #18202f14;min-width:0;padding:20px}.primary-panel,.side-panel{align-content:start;display:grid;gap:18px}.section-heading span{color:#336e62;font-size:13px;font-weight:700}.section-heading h1{font-size:32px;letter-spacing:0;line-height:1.15;margin:6px 0}.section-heading p{color:#536176;line-height:1.65;margin:0}.input-hint{background:#edf6ff;border:1px solid #bdd7ef;border-radius:8px;color:#31516d;font-size:13px;line-height:1.55;margin:0 0 12px;padding:10px 12px}.form-grid{display:grid;gap:14px}label{color:#3f4c5f;display:grid;font-size:13px;font-weight:700;gap:7px}textarea,input[type=number]{background:#f8fafc;border:1px solid #cfd8e5;border-radius:8px;color:#172033;padding:11px 12px}textarea{resize:vertical}.command-button{align-items:center;background:#236a5b;border:0;border-radius:8px;color:#fff;display:inline-flex;font-weight:800;gap:9px;justify-content:center;min-height:42px;padding:0 16px}.command-button.compact{min-height:38px}.command-button:disabled{background:#91a2b5;cursor:not-allowed}.button-row{align-items:center;display:flex;gap:10px}.icon-button{align-items:center;background:#f2f6fa;border:1px solid #cfd8e5;border-radius:8px;color:#172033;display:inline-flex;height:40px;justify-content:center;width:40px}.icon-button.active,.icon-button:hover{background:#dceee9;border-color:#236a5b;color:#236a5b}.preview-pair{display:grid;gap:14px}.upload-preview{aspect-ratio:16 / 9;background:#eef4f9;border:1px dashed #99a9bc;border-radius:8px;display:grid;overflow:hidden;place-items:center;position:relative}.upload-preview input{top:0;right:0;bottom:0;left:0;opacity:0;position:absolute}.upload-preview img{height:100%;object-fit:cover;width:100%}.upload-preview span{background:#18202fbd;border-radius:999px;bottom:10px;color:#fff;font-size:12px;padding:5px 9px;position:absolute}.status-panel{background:#f8fafc;border:1px solid #d8e0ea;border-radius:8px;display:grid;gap:10px;padding:12px}.status-panel.muted{color:#66758a}.status-panel div{align-items:center;display:flex;justify-content:space-between}.status-panel span{color:#66758a;font-size:12px}progress{accent-color:#236a5b;height:10px;width:100%}.timeline{background:#dfe7f1;border-top:1px solid #c9d4e2;display:flex;gap:10px;min-height:132px;overflow-x:auto;padding:14px 20px}.timeline-empty{align-self:center;color:#5b6879}.frame-thumb{background:#fff;border:2px solid transparent;border-radius:8px;color:#172033;flex:0 0 142px;height:96px;overflow:hidden;padding:0;position:relative}.frame-thumb.selected{border-color:#236a5b}.frame-thumb img{height:100%;object-fit:cover;width:100%}.frame-thumb span.frame-index{background:#ffffffe6;border-radius:999px;font-size:12px;font-weight:800;left:8px;padding:3px 7px;position:absolute;top:8px}.frame-thumb .drag-handle{background:#17203380;border-radius:4px;color:#fff;cursor:grab;left:50%;opacity:0;padding:3px;position:absolute;top:4px;transform:translate(-50%);transition:opacity .12s}.frame-thumb:hover .drag-handle{opacity:1}.frame-thumb:active .drag-handle{cursor:grabbing}.frame-kind-tag{align-items:center;border-radius:4px;bottom:4px;display:flex;font-size:10px;font-weight:600;gap:2px;padding:2px 6px;position:absolute;right:4px}.frame-kind-generated{background:#3b82f6e0;color:#fff}.frame-kind-inpainted{background:#8b5cf6e0;color:#fff}.frame-kind-edited{background:#eab308e0;color:#172033}.canvas-panel{aspect-ratio:16 / 9;display:grid;overflow:hidden;padding:0;place-items:center;position:relative}.canvas-backdrop{height:100%;top:0;right:0;bottom:0;left:0;object-fit:cover;position:absolute;width:100%}.canvas-container{position:relative;z-index:1}.canvas-panel.mask-hidden .canvas-container{opacity:0}.target-frame-picker{background:#f8fafc;border:1px solid #d8e0ea;border-radius:8px;display:grid;gap:10px;padding:12px}.target-frame-heading{align-items:center;color:#3f4c5f;display:flex;font-size:13px;font-weight:800;gap:6px}.target-frame-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.target-frame-option{background:#fff;border:2px solid transparent;border-radius:8px;color:#172033;flex:0 0 74px;height:58px;overflow:hidden;padding:0;position:relative}.target-frame-option.selected{border-color:#236a5b}.target-frame-option img{height:100%;object-fit:cover;width:100%}.target-frame-option span{background:#ffffffe6;border-radius:999px;font-size:11px;font-weight:800;left:6px;padding:2px 6px;position:absolute;top:5px}.target-frame-empty{color:#66758a;font-size:13px;margin:0}.icon-button.muted{color:#66758a}@media (max-width: 920px){.app-shell{grid-template-columns:1fr}.sidebar{padding:18px}.step-nav,.work-grid,.editor-grid{grid-template-columns:1fr}.step-nav{display:flex;overflow-x:auto}.step-link{white-space:nowrap}.workspace-inner{padding:18px}}.field-error{align-items:center;color:#c33;display:flex;font-size:13px;gap:4px;margin-top:4px}.recovery-panel{background:#fff7ed;border:1px solid #fdba74;border-radius:8px;color:#7c2d12;display:grid;gap:10px;padding:12px}.recovery-panel>div:first-child{align-items:center;display:flex;gap:6px}.recovery-panel p{font-size:13px;line-height:1.55;margin:0}
