:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#e8edf5;background:#0b0f14;--panel:#121821;--line:#263140;--muted:#93a4b8;--accent:#69a8ff;--good:#6dd7a7;--danger:#ff7b83}*{box-sizing:border-box}body{margin:0;background:#0b0f14}.wrap{max-width:1440px;margin:auto;padding:24px}h1{margin:0 0 4px;font-size:28px}.sub{color:var(--muted);margin:0 0 22px}.grid{display:grid;grid-template-columns:360px 1fr;gap:18px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;}.panel h2{font-size:16px;margin:0 0 14px}label{display:block;color:var(--muted);font-size:12px;margin:11px 0 5px}input,select,textarea{width:100%;background:#0c1219;color:#eef4fb;border:1px solid #344255;border-radius:8px;padding:9px 10px}textarea{min-height:130px;resize:vertical}.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}button{border:0;border-radius:8px;padding:10px 14px;font-weight:650;cursor:pointer;background:#273447;color:#eef4fb}button.primary{background:var(--accent);color:#07101d}button.danger{background:#5d2830;color:#ffdfe2}button:disabled{opacity:.45;cursor:not-allowed}.scene{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}.scenehead{display:flex;justify-content:space-between;align-items:center}.scenehead strong{font-size:14px}.files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.chip{padding:5px 8px;border-radius:99px;background:#1d2937;border:1px solid #344255;font-size:11px;color:#c9d7e7}.log{height:330px;overflow:auto;background:#070a0e;border:1px solid #222c39;border-radius:10px;padding:12px;font:12px/1.45 Consolas,monospace;white-space:pre-wrap;color:#cbd7e4}.status{font-size:13px;margin-bottom:8px;color:var(--muted)}.status.running{color:#ffd166}.status.ok{color:var(--good)}.status.bad{color:var(--danger)}.wide{grid-column:1/-1}.hint{color:var(--muted);margin-top:5px}@media(max-width:900px){.grid{grid-template-columns:1fr}}
.dropzone,.scene-dropzone{border:2px dashed #3d526c;border-radius:12px;background:#0c1219;transition:.15s ease;border-color:.15s ease,background:.15s ease;display:flex;align-items:center;justify-content:center;text-align:center}.dropzone{min-height:150px;flex-direction:column;gap:8px;padding:18px;margin-top:6px}.dropzone strong{font-size:14px}.dropzone span,.scene-dropzone span{font-size:11px;color:var(--muted)}.dropzone button{margin-top:4px}.scene-dropzone{min-height:72px;margin-top:6px;padding:12px}.dropzone.dragover,.scene-dropzone.dragover{border-color:var(--accent);background:#122033;box-shadow:0 0 0 2px rgba(105,168,255,.12) inset}.attached-chip{cursor:pointer}.attached-chip:hover{border-color:var(--danger)}

.reference-grid{display:grid;gap:12px;margin-top:12px}.ref-card{border:1px solid var(--border,#333);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.025)}.ref-preview{width:100%;height:135px;object-fit:contain;background:#090909;display:block}.audio-preview{height:135px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:36px;background:#090909}.audio-preview audio{width:90%;height:34px}.ref-meta{padding:9px}.filename{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.75;margin-bottom:7px}.alias-label{font-size:11px;margin:0 0 3px}.alias-row{display:flex;align-items:center;gap:4px}.alias-row span{font-weight:700;font-size:18px}.alias-row input{min-width:0;width:100%;font-family:ui-monospace,Consolas,monospace}.ref-actions{display:flex;gap:6px;margin-top:8px}.ref-actions button{flex:1;padding:7px 6px}.attached-chip{font-family:ui-monospace,Consolas,monospace}

.delete-ref{border-color:#65343a;color:#ffb8bd}.delete-ref:hover{border-color:var(--danger);background:rgba(255,90,102,.08)}
.prompt-wrap{position:relative}.mention-menu{position:absolute;left:0;right:0;top:100%;z-index:50;margin-top:4px;max-height:320px;overflow:auto;background:#101820;border:1px solid #40536a;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.45);padding:5px}
.mention-menu[hidden]{display:none}.mention-item{width:100%;display:flex;align-items:center;gap:9px;text-align:left;padding:7px;border:0;border-radius:7px;background:transparent;color:inherit;cursor:pointer}.mention-item:hover,.mention-item.selected{background:#1a293a}
.mention-thumb{width:42px;height:42px;object-fit:cover;border-radius:6px;background:#090d12;flex:0 0 42px}.mention-audio{display:flex;align-items:center;justify-content:center;font-size:22px}
.mention-text{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}.mention-text strong{font:600 13px ui-monospace,Consolas,monospace}.mention-text small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention-kind{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.mention-empty{padding:12px;color:var(--muted);font-size:12px;text-align:center}

.results-panel{overflow:visible}.results-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.results-head h2{margin-bottom:2px}
.results-grid{display:grid;gap:16px;}
.results-empty{grid-column:1/-1;border:1px dashed #34465a;border-radius:12px;text-align:center;color:var(--muted)}
.result-card{border:1px solid #2b3b4e;border-radius:13px;background:#0d151e;box-shadow:0 5px 18px rgba(0,0,0,.18)}
.result-hover-actions{position:absolute;inset:0;align-items:flex-end;justify-content:center;gap:8px;padding:13px;background:linear-gradient(to bottom,transparent 45%,rgba(2,5,9,.88));opacity:0;pointer-events:none;transition:opacity .16s ease}
.result-media:hover .result-hover-actions,.result-media:focus-within .result-hover-actions{opacity:1;pointer-events:auto}
.result-hover-actions button,.result-action-link{border:1px solid #4c6179;border-radius:7px;background:#101b27;color:#e9f1fa;padding:7px 10px;font-size:11px;text-decoration:none;cursor:pointer}
.result-hover-actions button:hover,.result-action-link:hover{background:#1a2b3d}.result-hover-actions .delete-result{border-color:#743c43;color:#ffc0c5}
.result-body{padding:12px}.result-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.result-title-row strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.result-title-row span{font-size:10px;color:var(--muted);white-space:nowrap}
.result-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.result-meta span{font-size:9px;padding:3px 6px;border-radius:999px;background:#172333;color:#b9c8da;border:1px solid #25384c}
.result-prompt-head{display:flex;justify-content:space-between;align-items:center;margin-top:11px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em}.result-prompt-head button{padding:4px 7px;font-size:9px}
.result-prompt{margin:6px 0 0;padding:9px;max-height:130px;overflow:auto;white-space:pre-wrap;word-break:break-word;border-radius:8px;background:#080d13;border:1px solid #1c2a39;color:#d8e1ec;font:11px/1.45 ui-monospace,Consolas,monospace}
@media (hover:none){.result-hover-actions{opacity:1;pointer-events:auto;background:linear-gradient(to bottom,transparent 45%,rgba(2,5,9,.78))}}

.pending-result{border:1px solid #2b3b4e;border-radius:13px;overflow:hidden;background:#0d151e}
.pending-result[hidden]{display:none}.pending-media{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(180deg,#0b1118,#070b10);color:#dce7f3}
.pending-spinner{width:42px;height:42px;border:4px solid rgba(255,255,255,.12);border-top-color:currentColor;border-radius:50%;animation:kinovi-spin 1s linear infinite}
.pending-copy{display:flex;flex-direction:column;align-items:center;gap:5px}.pending-copy span{font:600 24px/1 ui-monospace,Consolas,monospace;letter-spacing:.04em}
@keyframes kinovi-spin{to{transform:rotate(360deg)}}

/* Floating generated-results workspace */
.results-dock{position:fixed;z-index:100;background:#0c141d;border:1px solid #314359;border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.42);display:flex;flex-direction:column;overflow:hidden}
.results-dock-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:1px solid #243548;background:#101a25}
.results-dock-head h2{margin:0 0 2px;}.results-dock-head .hint{margin:0}
.dock-actions{display:flex;gap:6px}.dock-actions button{padding:6px 8px;font-size:10px}
.results-dock-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;}
.results-dock.collapsed{width:56px}.results-dock.collapsed .results-dock-head>div:first-child,.results-dock.collapsed .results-dock-scroll,.results-dock.collapsed .dock-actions button:first-child{display:none}.results-dock.collapsed .results-dock-head{justify-content:center;padding:10px 5px}
.results-dock.collapsed+.nothing{display:none}
.results-grid{grid-template-columns:1fr!important;margin-top:0!important}
.results-empty{padding:22px!important}
.pending-result{margin-top:0!important;margin-bottom:10px}
.result-card{overflow:hidden}
.result-media{position:relative!important;aspect-ratio:16/9;background:#05080c}
.result-media>video{width:100%;height:100%;display:block;object-fit:contain;background:#05080c}
.result-hover-actions{display:none!important}
.result-actions-bar{display:flex;gap:7px;padding:8px 10px;border-top:1px solid #1d2a38;border-bottom:1px solid #1d2a38;background:#101923}
.result-actions-bar button,.result-actions-bar .result-action-link{flex:1;text-align:center;border:1px solid #41556d;border-radius:7px;background:#142131;color:#e8f0f9;padding:7px 6px;font-size:10px;text-decoration:none;cursor:pointer}
.result-actions-bar button:hover,.result-actions-bar .result-action-link:hover{background:#1b2c40}
.result-actions-bar .delete-result{border-color:#743c43;color:#ffc0c5}
@media (max-width:1100px){
  body{padding-bottom:320px}
  .results-dock{left:12px;height:295px}
  .results-dock.collapsed{left:auto;width:56px;height:54px}
  
  .results-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important}
}

.clickable-preview{cursor:zoom-in}
.result-refs{margin-top:10px}.result-refs-label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px}
.result-ref-list{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px}
.result-ref-thumb{position:relative;flex:0 0 58px;width:58px;height:64px;border:1px solid #2e4359;border-radius:7px;background:#0a1017;padding:0;overflow:hidden;cursor:zoom-in;color:#dce7f3}
.result-ref-thumb img,.result-ref-thumb video{display:block;width:100%;height:44px;object-fit:cover;background:#05080c}
.result-ref-thumb small{display:block;height:18px;padding:2px 3px;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-ref-audio{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:default}.result-ref-audio span{font-size:23px;height:42px;display:flex;align-items:center}
.ref-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:30px}
.ref-lightbox[hidden]{display:none}.ref-lightbox-inner{max-width:94vw;max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.ref-lightbox img,.ref-lightbox video{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:8px;background:#000;box-shadow:0 15px 60px rgba(0,0,0,.65)}
.ref-lightbox-close{top:18px;right:22px;width:42px;height:42px;border-radius:50%;font-size:26px;line-height:1;background:#111c28;border:1px solid #53677f;color:#fff}
#refLightboxCaption{color:#dce7f3;font-size:12px;max-width:80vw;text-align:center;word-break:break-all}

.pending-results{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}
.pending-results:empty{display:none}
.pending-result{margin:0!important}
.pending-copy small{color:var(--muted)}
.video-ref-wrap{position:relative;background:#05080c}
.video-ref-wrap .ref-preview{display:block;width:100%;height:auto;max-height:220px;object-fit:contain;background:#05080c;cursor:default}

.pending-result{transition:border-color .15s ease,background .15s ease}
.pending-state-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:24px;border-radius:50%;background:#111b27;border:1px solid #2f4359}
.pending-status{font-weight:600}
.pending-result.state-queued{border-color:#3a4756}.pending-result.state-queued .pending-status{color:#aeb9c6}
.pending-result.state-generating{border-color:#3e668d}.pending-result.state-generating .pending-status{color:#9cc9f4}
.pending-result.state-completed{border-color:#315f48}.pending-result.state-completed .pending-status{color:#9ed5b5}
.pending-result.state-failed{border-color:#7a3d45;background:#171015}.pending-result.state-failed .pending-status{color:#ff9da5}
.pending-result.state-stopped{border-color:#65533a}.pending-result.state-stopped .pending-status{color:#e7c083}
.pending-error{margin-top:7px;padding:7px 8px;border-radius:6px;background:#220d11;border:1px solid #5e2c33;color:#ffb5bc;font:10px/1.35 ui-monospace,Consolas,monospace;max-width:100%;word-break:break-word}

.dismiss-placeholder{margin-top:8px;padding:5px 9px;font-size:10px;border-color:#6d4348;color:#ffc1c6;background:#1a1115}
.dismiss-placeholder:hover{background:#29161b}

.queue-summary{padding:9px 10px;border:1px solid #2a3b4f;border-radius:8px;background:#0b121a;color:#b9c7d7;font-size:11px}
.preset-bar{display:flex;gap:7px;margin-top:10px}.preset-bar select{flex:1}
.prompt-label-row{display:flex;align-items:center;justify-content:space-between}.history-btn{padding:4px 7px;font-size:9px}
.failed-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.failed-actions button{font-size:9px;padding:5px 7px}
.history-modal{position:fixed;inset:0;z-index:11000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:30px}
.history-modal[hidden]{display:none}.history-inner{width:min(760px,92vw);max-height:82vh;overflow:auto;background:#0d1620;border:1px solid #34495f;border-radius:12px;padding:12px}
.history-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.history-head button{font-size:20px}
.history-item{width:100%;display:flex;gap:10px;text-align:left;margin-bottom:7px;padding:9px;background:#101d2a;border:1px solid #263a50;border-radius:8px;color:#e6eef7}
.history-item span{font-size:10px;color:#9db1c8}.history-item pre{margin:0;white-space:pre-wrap;font:11px/1.4 ui-monospace,Consolas,monospace}
.dock-actions select{max-width:95px;font-size:10px;padding:5px}

.library-toolbar,.project-toolbar,.compare-toolbar{display:flex;gap:7px;align-items:center;margin:8px 0}.library-toolbar input,.project-toolbar input{flex:1}.library-toolbar select,.project-toolbar select{min-width:145px}
.ref-category{margin-top:6px;font-size:10px}.advanced{margin-top:8px}.advanced summary{cursor:pointer;color:#c7d5e6}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:9px}.dashboard-grid>div{padding:9px;background:#0b121a;border:1px solid #26384c;border-radius:8px;display:flex;flex-direction:column;gap:4px}.dashboard-grid strong{font-size:9px;text-transform:uppercase;color:var(--muted)}.dashboard-grid span{font-size:11px}
.compare-toolbar{padding:8px 10px;border-bottom:1px solid #243548;margin:0}.compare-check{font-size:9px;color:var(--muted);display:flex;gap:4px;align-items:center}.result-review{display:flex;gap:6px;margin-top:8px}.result-review select{width:95px}.result-review input{flex:1}

/* Layout cleanup: maximize scene canvas */
.project-strip{padding:8px 10px!important}
.project-strip-row{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(170px,240px) auto auto;gap:6px;align-items:center}
.project-strip-row input,.project-strip-row select{min-width:0;height:34px}
.compact-btn{height:34px;padding:5px 10px;font-size:10px;white-space:nowrap}
.diagnostics-panel{margin-top:7px}
.compact-dashboard{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px!important}
.compact-dashboard>div{padding:7px!important}
.compact-dashboard strong{font-size:8px!important}.compact-dashboard span{font-size:10px!important}

/* Keep main workspace wide while results are open */
.results-dock{top:10px!important;right:10px!important;bottom:10px!important}
.results-dock.collapsed{display:none!important}

.results-restore-btn{
  position:fixed;right:8px;top:50%;transform:translateY(-50%);
  z-index:120;width:38px;min-height:120px;padding:8px 4px;
  writing-mode:vertical-rl;text-orientation:mixed;
  border:1px solid #40546b;border-radius:10px 0 0 10px;
  background:#101a25;color:#e7eef7;box-shadow:0 8px 24px rgba(0,0,0,.3);
  cursor:pointer;font-size:10px
}
.results-restore-btn[hidden]{display:none!important}
.dock-toggle-btn{font-size:18px!important;line-height:1;padding:4px 8px!important;min-width:30px}
.results-dock-head{padding:9px 10px!important}
.results-dock-scroll{padding:8px!important}

/* Give scenes more room and reduce bulky chrome */
.panel{padding:12px}
#scenes .scene{padding:10px}
.scene .row{gap:8px}
.scene textarea.prompt{min-height:120px}
.reference-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

@media(max-width:1200px){
  
  
  .project-strip-row{grid-template-columns:minmax(150px,1fr) auto minmax(145px,200px) auto auto}
}
@media(max-width:900px){
  body,body.results-collapsed{padding-bottom:290px!important}
  
  
  .results-restore-btn{right:10px;top:auto;bottom:10px;transform:none;writing-mode:horizontal-tb;width:auto;min-height:36px;border-radius:9px;padding:7px 10px}
  
  .project-strip-row .compact-btn:last-child{grid-column:1/-1}
  
}

/* Desktop workspace balance */
body{padding-left:170px!important;padding-right:390px!important}
.left-project-panel{
  position:fixed;left:10px;top:10px;width:145px;z-index:90;
  padding:9px!important;max-height:calc(100vh - 20px);overflow:auto
}
.mini-project-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.mini-project-head strong{font-size:12px}
.mini-icon-btn{width:26px;height:26px;padding:0!important;font-size:16px;line-height:1}
.mini-project-name,.mini-project-select{width:100%;height:30px!important;font-size:10px!important;margin-bottom:6px}
.mini-label{display:block;margin:8px 0 4px;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.project-save-btn,.project-load-btn{width:100%;height:30px!important;padding:4px 7px!important;font-size:9px!important}
.left-project-panel .diagnostics-panel{margin-top:8px}
.left-project-panel .compact-dashboard{grid-template-columns:1fr!important}
.left-project-panel .compact-dashboard>div{padding:6px!important}

.scenes-workspace{
  max-width:980px;
  width:calc(100% - 24px);
  margin-left:auto!important;
  margin-right:auto!important
}
#scenes,.scene{width:100%}
.results-dock{width:360px!important}
body.results-collapsed{padding-right:60px!important}
body.results-collapsed .scenes-workspace{max-width:1080px}

@media(max-width:1200px){
  body{padding-left:145px!important;padding-right:330px!important}
  .left-project-panel{width:120px}
  .results-dock{width:305px!important}
  .scenes-workspace{max-width:860px}
}
@media(max-width:900px){
  
  
  .left-project-panel .compact-dashboard{grid-template-columns:1fr 1fr!important}
  
}

/* Scalable reference library */
.library-toolbar{position:sticky;top:0;z-index:8;background:var(--panel);padding:6px 0;margin:0!important;}
.library-tabs{display:flex;gap:4px;overflow-x:auto;padding:5px 0 8px;position:sticky;top:45px;z-index:7;background:var(--panel)}
.lib-tab{padding:5px 8px!important;font-size:9px!important;white-space:nowrap}.lib-tab.active{border-color:#6e9ed0;background:#17283a}
#fileBank{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:7px}
#fileBank[data-size="small"]{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}
#fileBank[data-size="large"]{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}
.compact-ref{position:relative;padding:0!important;overflow:visible;min-width:0;background:#0b121a;border:1px solid #26394d;border-radius:8px}
.compact-preview{height:88px;overflow:hidden;border-radius:7px 7px 0 0;cursor:pointer;background:#05080c;position:relative}
[data-size="small"] .compact-preview{height:64px}[data-size="large"] .compact-preview{height:125px}
.compact-preview .ref-preview,.compact-preview .video-ref-wrap,.compact-preview video{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important}
.compact-preview video{pointer-events:none}.compact-ref-bottom{height:28px;display:flex;align-items:center;gap:3px;padding:3px 5px}
.compact-ref-bottom strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ref-star,.ref-more{border:0!important;background:transparent!important;padding:2px!important;min-width:17px;color:#8fa2b7}.ref-star.active{color:#ffd36b}
.video-badge{position:absolute;left:5px;bottom:5px;background:rgba(0,0,0,.72);border-radius:50%;width:20px;height:20px;place-items:center;font-size:9px}
.ref-hover-menu{display:none;position:absolute;right:4px;top:calc(100% - 3px);z-index:30;width:128px;padding:5px;background:#101a25;border:1px solid #40546b;border-radius:7px;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.compact-ref.menu-open .ref-hover-menu{display:grid;gap:3px}.ref-hover-menu button{font-size:9px!important;padding:5px!important;text-align:left}
.recent-title{font-size:9px;text-transform:uppercase;color:var(--muted);margin:3px 0 5px}.recent-strip{display:flex;gap:6px;margin-bottom:6px}.recent-strip .compact-ref{min-width:92px;width:92px}.recent-strip .compact-preview{height:62px}
.library-modal{position:fixed;inset:0;background:rgba(0,0,0,.76);display:flex;align-items:center;justify-content:center;padding:24px}
.library-modal-inner{width:min(1180px,95vw);height:min(820px,92vh);background:#0d1620;border:1px solid #40546b;border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.library-modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #26394d}.library-modal-actions input{width:300px}
.library-modal-grid{padding:12px;display:grid;gap:9px;align-content:start}.library-modal-grid .compact-preview{height:110px}
@media(max-width:900px){.library-modal-actions input{width:180px}}

/* Reference library layout fixes */
.library-toolbar{
  box-sizing:border-box;
}
.library-toolbar>*{min-width:0}
.library-action-row{
  justify-content:flex-end;
  margin:4px 0 6px;
}
.browse-library-btn{
  width:auto!important;
}

/* Native video controls must stay interactive */
.compact-preview .video-ref-wrap{
  width:100%!important;height:100%!important;position:relative
}
.compact-preview .video-ref-wrap video{
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  pointer-events:auto!important;
}
.video-ref-label{
  position:absolute;top:4px;left:4px;
  z-index:2;
  padding:2px 4px;
  border-radius:4px;
  background:rgba(0,0,0,.65);
  font-size:7px;
  letter-spacing:.05em;
  color:#fff;
  pointer-events:none;
}
.video-badge{display:none!important}

/* Prevent recent-used menus from being clipped off the narrow strip */
.recent-strip{
  overflow-x:auto!important;
  overflow-y:visible!important;
  padding-bottom:10px!important;
}
.recent-strip .recent-card{
  position:relative;
  overflow:visible!important;
}
.recent-strip .recent-card .ref-hover-menu{
  right:0!important;
  left:auto!important;
  top:calc(100% - 2px)!important;
  transform:none!important;
}
.recent-strip .recent-card:nth-last-child(-n+2) .ref-hover-menu{
  right:0!important;
  left:auto!important;
}
.recent-refs{
  overflow:visible!important;
}

/* Keep the narrow left reference column from spilling into scene canvas */
.left-project-panel ~ .panel .library-toolbar,
.library-action-row,
.library-tabs,
.recent-refs,
.reference-grid{
  max-width:100%;
  box-sizing:border-box;
}

/* Reference multi-select + toolbar containment */
.library-toolbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(96px,120px)!important;
  gap:6px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden;
}
.library-toolbar input,.library-toolbar select{min-width:0!important;width:100%!important;max-width:100%!important}
.library-action-row{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:6px!important;
  align-items:center;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden;
}
.thumb-size-control{
  display:flex;align-items:center;gap:4px;
  font-size:9px;color:var(--muted);white-space:nowrap
}
.thumb-size-control select{
  width:44px!important;min-width:44px!important;max-width:44px!important;
  height:28px!important;padding:3px 5px!important;font-size:9px!important
}
.add-selected-btn,.browse-library-btn{
  min-width:0!important;
  max-width:100%!important;
  padding:6px 8px!important;
  font-size:9px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.ref-select-toggle{
  position:absolute;top:5px;right:5px;z-index:6;
  width:22px;height:22px;padding:0!important;
  border-radius:50%!important;
  border:1px solid #536b84!important;
  background:rgba(8,14,21,.88)!important;
  color:#d9e5f2!important;
  font-size:12px!important;
  line-height:20px!important
}
.ref-select-toggle.active{
  background:#28547c!important;
  border-color:#6fa5d8!important;
  color:#fff!important
}
.compact-ref.selected-ref{
  outline:2px solid #4f8bc4;
  outline-offset:1px
}
.library-modal-grid .ref-select-toggle{top:6px;right:6px}

.library-modal-grid .ref-hover-menu .delete-ref{
  color:#ffb5bc!important;
  border-color:#6f3a42!important;
}

.view-mode-switch{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:200;display:flex;gap:4px;padding:4px;background:#111821;border:1px solid #2a394b;border-radius:10px}
.view-mode-switch button{padding:6px 12px;font-size:10px}.view-mode-switch button.active{background:#3d78b8;color:#fff}
.simple-mode{padding:0!important;background:#0a0f15!important}.simple-mode .results-dock,.simple-mode .results-restore-btn{display:none!important}
.simple-view{padding:56px 24px 28px}.simple-view[hidden],.advanced-view[hidden]{display:none!important}.simple-shell{max-width:1440px;margin:0 auto}
.simple-header{display:flex;align-items:center;gap:16px;margin-bottom:18px}.simple-header h1{font-size:28px;margin:0}.simple-add-scene{background:#3e7dbe!important;color:#fff!important;padding:9px 16px!important}
.simple-layout{display:grid;grid-template-columns:minmax(480px,1fr) minmax(520px,1fr);gap:22px}
.simple-create-card,.simple-results-card{background:#121820;border:1px solid #344052;border-radius:14px;padding:18px}.simple-create-card h2,.simple-results-card h2{margin:0 0 16px;font-size:20px}
.simple-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.simple-create-card label{display:block;font-size:12px;margin:10px 0 6px}.simple-create-card select,.simple-create-card textarea{width:100%;box-sizing:border-box}.simple-create-card textarea{min-height:110px}
.aspect-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.aspect-btn{display:flex;flex-direction:column;align-items:center;gap:6px;height:78px;font-size:26px!important}.aspect-btn span{font-size:10px}.aspect-btn.active{outline:2px solid #4b8fd1;background:#1d2b3d!important}
.simple-reference-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;min-height:96px}.simple-ref-thumb{flex:0 0 132px;padding:0!important;overflow:hidden;border-radius:8px!important;background:#080c12!important}.simple-ref-thumb img,.simple-ref-thumb video{width:100%;height:76px;object-fit:cover;display:block}.simple-ref-thumb small{display:block;padding:5px 6px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.simple-ref-thumb.selected{outline:2px solid #4b8fd1}.simple-play-badge{position:absolute;left:7px;top:54px;background:rgba(0,0,0,.7);border-radius:50%;padding:3px}.simple-audio-thumb{height:76px;display:grid;place-items:center;font-size:30px}
.simple-dropzone{margin-top:10px;height:130px;border:2px dashed #53657c;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#0b1017}.simple-dropzone.dragover{border-color:#4e91d0}.simple-dropzone span{font-size:11px;color:#93a5bb}.simple-dropzone button{border:0!important;background:none!important;color:#5c9cdf!important}
.simple-settings-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.simple-duration-row{margin:12px 0}.simple-duration-row input{width:100%}.simple-duration-row>div{display:flex;justify-content:space-between;font-size:10px}.simple-generate-btn{width:100%;padding:13px!important;background:#4b8ed0!important;color:#fff!important;font-size:14px!important}
.simple-results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.simple-results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-height:calc(100vh - 150px);overflow-y:auto}.simple-result-card{background:#0b1118;border:1px solid #2d3c4f;border-radius:9px;overflow:hidden}.simple-result-card video{width:100%;aspect-ratio:16/9;object-fit:contain;background:#000;display:block}.simple-result-actions{display:flex;justify-content:space-between;padding:8px}.simple-result-actions a,.simple-result-actions button{text-decoration:none;background:none!important;border:0!important}.simple-result-actions button{color:#e59a9f!important}.simple-pending-results{display:grid;gap:7px;margin-bottom:10px}.simple-pending-card{display:flex;justify-content:space-between;border:1px solid #33475e;border-radius:8px;background:#0c131b;font-size:10px}.simple-empty{padding:20px;color:#8799ae;text-align:center}
@media(max-width:1050px){.simple-layout{grid-template-columns:1fr}.simple-results-grid{max-height:none}}@media(max-width:650px){.simple-view{padding:58px 10px 20px}.simple-top-grid,.simple-settings-row{grid-template-columns:1fr}.simple-results-grid{grid-template-columns:1fr}}

.simple-prompt-wrap{position:relative}
.simple-mention-menu{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:100%!important;
  z-index:500!important;
  max-height:300px;
  overflow:auto;
}

.library-confirm-btn{
  background:#2f6fae!important;
  border-color:#4c8fd0!important;
  color:#fff!important;
  white-space:nowrap
}
.simple-ref-thumb{
  position:relative;
  cursor:grab
}
.simple-ref-thumb:active{cursor:grabbing}
.simple-ref-media{width:100%;height:76px;overflow:hidden}
.simple-ref-media img,.simple-ref-media video{
  width:100%;height:100%;object-fit:cover;display:block
}
.simple-ref-remove{
  position:absolute;top:4px;right:4px;z-index:8;
  width:22px;height:22px;padding:0!important;
  border-radius:50%!important;
  background:rgba(0,0,0,.78)!important;
  border:1px solid #66788f!important;
  color:#fff!important;
  font-size:14px!important;line-height:18px!important
}
.simple-ref-remove:hover{background:#7b2f36!important}
#simplePrompt.drag-target{
  outline:2px solid #4b8fd1!important;
  outline-offset:2px;
  background:#101b29!important
}

.simple-ref-media.audio-media{height:auto!important;min-height:54px;padding:10px 6px;display:flex;align-items:center;background:#0a0f15}
.simple-ref-media.audio-media audio{width:100%;height:36px}
.simple-ref-media video{pointer-events:auto}

.simple-job-error{grid-column:1/-1;margin-top:5px;color:#ffb0b7;word-break:break-word}

.simple-from-wrap{
  margin-top:10px;
  max-width:180px;
}
.simple-from-wrap input{width:100%}
.inline-library-open{
  margin-left:8px;
  padding:3px 6px!important;
  font-size:8px!important;
}
.primary-library-btn{
  grid-column:1/-1;
  width:100%!important;
}

.library-modal-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.library-modal-actions input{min-width:220px;flex:1}
.library-modal-actions select{width:auto;min-width:105px}
.library-browser-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:0;flex:1}
.library-modal-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;overflow:auto}
.library-browser-card{position:relative;border:1px solid #2c4056;border-radius:8px;background:#0b121a;overflow:hidden;cursor:pointer}
.library-browser-card.active{outline:2px solid #4b8fd1}
.library-browser-thumb{height:100px;background:#05080c}
.library-browser-thumb img,.library-browser-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.library-audio-icon{height:100%;display:grid;place-items:center;font-size:34px}
.library-browser-name{padding:6px;display:flex;flex-direction:column;gap:2px}
.library-browser-name strong{font-size:10px}.library-browser-name small{font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.library-details{border-left:1px solid #2a3b4f;background:#0b121a;padding:12px;overflow:auto}
.library-details-empty{color:var(--muted);font-size:11px;padding:20px;text-align:center}
.library-detail-preview-wrap{background:#05080c;border-radius:8px;overflow:hidden;margin-bottom:10px}
.library-detail-preview{display:block;width:100%;max-height:220px;object-fit:contain;background:#000}
.library-detail-audio{width:100%;padding:14px 8px}
.library-details label{display:block;font-size:9px;color:var(--muted);margin:9px 0 4px}
.library-detail-alias{display:flex;align-items:center;gap:5px}.library-detail-alias input{flex:1}
.library-details select{width:100%}.library-detail-actions{display:grid;gap:7px;margin-top:12px}.library-detail-actions button{width:100%}
@media(max-width:900px){.library-browser-body{grid-template-columns:1fr}.library-details{border-left:0;border-top:1px solid #2a3b4f;max-height:300px}}

/* Full reference preview must render above the Browse Library modal */
.library-modal{
  z-index:13000!important;
}
.ref-lightbox{
  z-index:25000!important;
}
.ref-lightbox-inner,
.ref-lightbox-close{
  position:relative;
  z-index:25001!important;
}

.result-details-toggle{width:100%;margin-top:6px;text-align:left;background:#111b27!important;border-color:#30445c!important;}
.result-details-panel{margin-top:6px;padding-top:6px;border-top:1px solid #26384c}
.result-details-panel[hidden]{display:none!important}
.result-details-panel .result-ref-list{display:flex;gap:5px;overflow-x:auto;padding-bottom:4px}
.result-details-panel .result-ref-thumb{flex:0 0 54px;width:54px!important;height:62px!important;padding:2px!important}
.result-details-panel .result-ref-thumb img,.result-details-panel .result-ref-thumb video{width:48px!important;height:42px!important;object-fit:cover}
.result-details-panel .result-ref-thumb small{font-size:7px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-details-panel .result-prompt{max-height:160px;overflow:auto;white-space:pre-wrap}
.result-details-panel .result-prompt-head>div{display:flex;gap:5px}
.simple-result-card .result-details-panel{padding:6px}

.result-generation-settings{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 8px}
.result-generation-settings span{padding:4px 6px;border:1px solid #30445c;border-radius:5px;background:#0c141e;font-size:8px;color:#b9c8d8}
.result-generation-settings b{color:#e3ebf4;font-weight:600;margin-right:3px}
.result-no-meta{font-size:8px;color:#8799ae;padding:6px 0}

/* Advanced active-scene attached references */
.scene .attached{
  display:flex!important;
  gap:8px!important;
  overflow-x:auto;
  overflow-y:hidden;
  min-height:92px;
  padding:5px 0 8px;
}
.advanced-attached-ref{
  position:relative;
  flex:0 0 132px;
  border:1px solid #30445c;
  border-radius:8px;
  overflow:hidden;
  background:#080c12;
}
.advanced-attached-media{
  height:76px;
  overflow:hidden;
  background:#05080c;
}
.advanced-attached-media img,
.advanced-attached-media video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.advanced-attached-media.audio-media{
  height:auto;
  min-height:54px;
  padding:10px 6px;
  display:flex;
  align-items:center;
}
.advanced-attached-media audio{
  width:100%;
  height:36px;
}
.advanced-attached-ref small{
  display:block;
  padding:5px 6px;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.advanced-ref-remove{
  position:absolute;
  top:4px;
  right:4px;
  z-index:8;
  width:22px;
  height:22px;
  padding:0!important;
  border-radius:50%!important;
  background:rgba(0,0,0,.78)!important;
  border:1px solid #66788f!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:18px!important;
}
.advanced-ref-remove:hover{background:#7b2f36!important}
.attached-empty{
  width:100%;
  padding:18px 10px;
  text-align:center;
  color:var(--muted);
  border:1px dashed #33475e;
  border-radius:8px;
  font-size:10px;
}

.advanced-attached-ref[draggable="true"]{cursor:grab}
.advanced-attached-ref[draggable="true"]:active{cursor:grabbing}
.scene textarea.prompt.reference-drag-target{
  outline:2px solid #4b8fd1!important;
  outline-offset:2px;
  background:#101b29!important;
}

.scenehead-actions{display:flex;gap:6px;align-items:center}
.scenehead-actions button{padding:5px 8px!important;font-size:9px!important}

.transaction-estimate{
  display:flex;
  flex-wrap:wrap;
  gap:5px 10px;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  line-height:1.35;
}
.transaction-estimate span{
  display:inline-block;
  padding:3px 5px;
  border:1px solid #2b3c50;
  border-radius:5px;
  background:#0b121a;
}
.transaction-estimate b{color:#dbe5ef;font-weight:600}

.library-upload-btn{
  background:#162334!important;
  border-color:#3a5675!important;
  color:#dbe8f5!important;
  white-space:nowrap
}

.manual-save-note{font-size:8px;color:var(--muted);white-space:nowrap;margin-left:4px}

.start-over-btn{margin-left:auto!important;border-color:#6d5360!important}
.bulk-delete-btn{border-color:#7b4148!important;color:#ffc7cc!important;background:#251318!important}
.project-manager-inner{width:min(700px,92vw);max-height:82vh;background:#0b121a;border:1px solid #33475e;border-radius:10px;display:flex;flex-direction:column;overflow:hidden}
.project-manager-list{overflow:auto;padding:10px;display:grid;gap:6px}
.project-manager-row{padding:9px;border:1px solid #2d4055;border-radius:7px;background:#0d1620;cursor:pointer}
.project-manager-row input{width:auto!important}
.project-manager-row span{display:flex;flex-direction:column;gap:2px}
.project-manager-row small{color:var(--muted);font-size:8px}
.bulk-result-check,.simple-result-select{font-size:8px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.bulk-result-check input,.simple-result-select input{width:auto}
.simple-result-select{padding:5px 7px}

/* Stronger Advanced-mode reference-library call to action */
.advanced-mode .advanced-library-only{margin:7px 0 11px}
.advanced-mode .advanced-reference-cta{
  width:100%;
  min-height:42px;
  padding:10px 15px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.15px;
  border-width:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 5px 14px rgba(0,0,0,.22);
}
.advanced-mode .advanced-reference-cta:hover{transform:translateY(-1px)}

/* Project Load / Manage layout */
.project-load-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:6px;
  width:100%;
  min-width:0;
  margin-top:4px;
}
.project-load-actions .compact-btn{
  display:block;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  position:static!important;
  transform:none!important;
  white-space:nowrap;
}
.project-manager-inner{
  position:relative;
  z-index:1;
}

.project-manager-summary{display:flex;justify-content:space-between;padding:7px 9px;color:var(--muted);font-size:9px;border-bottom:1px solid #26384c}
.project-manager-table{display:grid;gap:6px;padding:8px}
.project-manager-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.project-delete-check{width:18px!important;height:18px!important}
.project-manager-main{display:flex;flex-direction:column;min-width:0}
.project-manager-date{white-space:nowrap;color:var(--muted)}
.project-delete-selected{font-weight:700!important}

.result-bulk-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.result-bulk-toolbar .toolbar-separator{
  width:1px;
  height:22px;
  background:#33475e;
  margin:0 2px;
}
.result-bulk-delete,
.header-delete-selected{
  background:#32171b!important;
  border-color:#8a424b!important;
  color:#ffd3d7!important;
  font-weight:700!important;
}
.selected-results-count{
  margin-left:auto;
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
}

.integrity-card{cursor:pointer}
.integrity-card:hover{outline:1px solid #496782}
#integrityStat.has-missing{color:#ffbd73;font-weight:700}
.integrity-modal-inner{
  width:min(780px,92vw);
  max-height:82vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#0b121a;
  border:1px solid #33475e;
  border-radius:10px;
}
.integrity-summary{font-size:9px;color:var(--muted);margin-top:2px}
.integrity-help{
  padding:8px 12px;
  font-size:9px;
  color:var(--muted);
  border-bottom:1px solid #26384c;
}
.integrity-list{
  display:grid;
  gap:7px;
  padding:10px;
  overflow:auto;
}
.integrity-row{
  display:grid;
  gap:5px;
  padding:9px;
  border:1px solid #30445c;
  border-radius:7px;
  background:#0d1620;
}
.integrity-row-main{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.integrity-row-main span,
.integrity-row small{
  color:var(--muted);
  font-size:8px;
}
.integrity-row code{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8px;
}
.integrity-ok{
  padding:22px;
  text-align:center;
  color:#b9d7c2;
}

.merge-setting{margin:8px 0 10px;padding:9px 10px;border:1px solid #30445c;border-radius:7px;background:#0c141d}
.merge-toggle{display:flex!important;align-items:center;gap:7px;font-weight:700}
.merge-toggle input{width:auto!important}
.merge-setting small{display:block;margin-top:4px;color:var(--muted);font-size:8px}

.merge-placeholder{
  border-color:#526b87!important;
  background:#0c1622!important;
}
.merge-placeholder.state-merging{
  border-color:#5e88b5!important;
}
.merge-placeholder.state-failed{
  border-color:#914b54!important;
}
.merge-placeholder .pending-copy strong{
  letter-spacing:.2px;
}

.account-bar{
  position:fixed;
  top:8px;
  right:10px;
  z-index:1200;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 7px;
  border:1px solid #30445c;
  border-radius:8px;
  background:rgba(8,14,21,.94);
  box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.account-user{font-size:10px;font-weight:700}
.account-role{
  font-size:8px;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid #33475e;
  border-radius:10px;
  padding:2px 6px;
}
.account-bar button{padding:4px 7px!important;font-size:8px!important}
.user-manager-inner{
  max-height:84vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#0b121a;
  border:1px solid #33475e;
  border-radius:10px;
}
.user-create-form{
  display:grid;
  gap:7px;
  border-bottom:1px solid #26384c;
}
.user-manager-message{
  min-height:14px;
  padding:5px 10px;
  color:#a9cfb3;
  font-size:9px;
}
.user-manager-message.bad{color:#ff9fa7}
.user-identity{flex-direction:column;min-width:0}
.user-identity small{font-size:8px;color:var(--muted)}
.user-enabled{display:flex!important;align-items:center;gap:5px;font-size:9px}
.user-enabled input{width:auto!important}
@media(max-width:760px){
  
  .account-bar{position:static;margin:6px 8px 0;justify-content:flex-end}
}

.force-change-create{
  display:flex!important;
  align-items:center;
  gap:6px;
  font-size:9px;
  color:var(--muted);
  white-space:nowrap;
}
.force-change-create input{width:auto!important}
.user-create-form{
  grid-template-columns:minmax(120px,1fr) minmax(180px,1.4fr) 100px auto auto!important;
}

.account-bar button{white-space:nowrap}

.impersonation-banner{
  position:fixed;
  top:0;
  z-index:1400;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 11px;
  background:#3a2410;
  border:1px solid #856029;
  border-top:0;
  border-radius:0 0 8px 8px;
  color:#ffd79a;
  box-shadow:0 5px 16px rgba(0,0,0,.3);
  font-size:9px;
}
.impersonation-banner button{
  padding:4px 7px;
  border:1px solid #9a7136;
  border-radius:6px;
  background:#1d1409;
  color:#ffe2b0;
  cursor:pointer;
  font-size:8px;
}


.user-search-bar{display:flex;align-items:center;}
.user-search-bar input{flex:1;min-width:180px;border:1px solid #33475e;border-radius:7px;background:#080e15;color:#e8eef5}
.user-search-bar span{font-size:9px;color:#8998a8;white-space:nowrap}

.user-table-wrap{border-top:1px solid #26384c}
.user-table-head button{
  border:0!important;background:transparent!important;color:#b9c5d1!important;
  padding:3px 2px!important;text-align:left;font-weight:700;
  cursor:pointer;white-space:nowrap;
}
.user-table-head [data-sort]{margin-left:3px;color:#72869a}
.user-manager-list{gap:0!important}
.user-identity small:empty{display:none}

.admin-model-controls{
  padding:10px;
  border-bottom:1px solid #26384c;
  background:#0a1119;
}
.admin-model-controls-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:10px;
  margin-bottom:8px;
}
.admin-model-controls-head strong{font-size:10px}
.admin-model-controls-head span{font-size:8px;color:var(--muted)}
.admin-model-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.admin-model-row{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 9px;
  border:1px solid #30445c;
  border-radius:7px;
  background:#0d1620;
}
.admin-model-row>span{display:flex;flex-direction:column;min-width:0}
.admin-model-row strong{font-size:9px}
.admin-model-row small{font-size:7px;color:var(--muted)}
.admin-model-row input{width:auto!important}
@media(max-width:800px){.admin-model-list{grid-template-columns:1fr}}

/* Manage Users readability redesign */
.user-manager-modal .modal-card{width:min(96vw,1680px)!important;max-width:1680px!important}
.user-search-bar{gap:12px!important}
.user-search-bar input{min-height:40px!important;font-size:12px!important;padding:0 12px!important}
#userSearchCount{font-size:11px!important;white-space:nowrap;color:var(--muted)}
.user-table-head,.user-row{
 gap:10px!important;
}
.user-table-head button,.user-table-head>span{letter-spacing:.02em!important}
.user-identity{display:flex!important;align-items:center!important;}
.status-cell{display:flex!important;}
.status-switch{flex:0 0 auto}
.status-switch input{width:0;height:0;}
.status-switch span{position:absolute;inset:0;border-radius:20px;background:#394858;cursor:pointer;transition:.15s}
.status-switch span:after{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:#dce5ee;transition:.15s}

/* Final Manage Users aligned table */
.user-manager-inner{
  width:min(1780px,97vw)!important;
  max-width:1780px!important;
}

.user-table-wrap{
  margin:0 12px 14px!important;
  border:1px solid #2c4055!important;
  border-radius:9px!important;
  overflow:auto!important;
  max-height:66vh!important;
  background:#0b131c;
}

/* EXACT same columns for header and body */
.user-table-head,
.user-row{
  display:grid!important;
  grid-template-columns:
    235px
    90px
    145px
    205px
    90px
    145px
    150px
    135px
    90px
    90px
    75px
    minmax(360px,1fr)!important;
  column-gap:0!important;
  min-width:1810px!important;
  align-items:stretch!important;
}

.user-table-head{
  position:sticky!important;
  top:0!important;
  z-index:10!important;
  padding:0!important;
  background:#101a25!important;
  border-bottom:1px solid #34495e!important;
}

.user-table-head > button,
.user-table-head > span{
  display:flex!important;
  align-items:center!important;
  min-height:46px!important;
  padding:0 12px!important;
  margin:0!important;
  border:0!important;
  border-right:1px solid #223547!important;
  border-radius:0!important;
  background:transparent!important;
  color:#d9e3ec!important;
  font-size:9px!important;
  font-weight:800!important;
  text-align:left!important;
  white-space:nowrap!important;
}

.user-table-head > button{
  cursor:pointer!important;
}

.user-table-head > button:hover{
  background:#162434!important;
}

.user-actions-head{
  border-right:0!important;
}

.user-manager-list{
  display:block!important;
  padding:0!important;
  margin:0!important;
}

.user-row{
  padding:0!important;
  margin:0!important;
  min-height:82px!important;
  border:0!important;
  border-bottom:1px solid #223547!important;
  border-radius:0!important;
  background:#0c151e!important;
}

.user-row:nth-child(even){
  background:#0f1923!important;
}

.user-row:hover{
  background:#142231!important;
}

.user-row:last-child{
  border-bottom:0!important;
}

.user-cell{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  padding:12px!important;
  border-right:1px solid #223547!important;
  overflow:hidden!important;
}

.user-row .user-cell:nth-child(11){
  border-right:0!important;
}

.user-identity{
  gap:10px!important;
}

.user-avatar{
  width:36px!important;
  height:36px!important;
  flex:0 0 36px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:#24384d!important;
  border:1px solid #3e5873!important;
  font-size:11px!important;
  font-weight:800!important;
}

.user-name-stack{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  gap:4px!important;
}

.user-name-stack strong{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.user-name-stack small{
  color:#8394a6!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.role-cell select{
  width:100%!important;
  min-width:0!important;
  padding:6px 5px!important;
  font-size:9px!important;
}

.status-cell{
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:8px!important;
}

.account-status{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:4px 7px!important;
  border:1px solid!important;
  border-radius:999px!important;
  font-size:8px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
}

.account-status.is-active{
  color:#85e0b0!important;
  border-color:#287b56!important;
  background:rgba(40,123,86,.14)!important;
}

.account-status.is-disabled{
  color:#ff9ba4!important;
  border-color:#7d434c!important;
  background:rgba(125,67,76,.15)!important;
}

.status-dot{
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:currentColor!important;
}

.status-switch{
  width:36px!important;
  height:19px!important;
  position:relative!important;
}

.status-switch input{
  position:absolute!important;
  opacity:0!important;
}

.status-switch > span{
  position:absolute!important;
  inset:0!important;
  border-radius:20px!important;
  background:#3b4958!important;
  cursor:pointer!important;
}

.status-switch > span:after{
  content:""!important;
  position:absolute!important;
  width:15px!important;
  height:15px!important;
  left:2px!important;
  top:2px!important;
  border-radius:50%!important;
  background:#dfe8ef!important;
  transition:.15s!important;
}

.status-switch input:checked + span{
  background:#27805a!important;
}

.status-switch input:checked + span:after{
  transform:translateX(17px)!important;
}

.google-cell{
  align-items:flex-start!important;
  justify-content:center!important;
  flex-direction:column!important;
}

.google-linked,
.google-unlinked{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  gap:4px!important;
}

.google-linked strong{
  color:#78d6a4!important;
  font-size:9px!important;
}

.google-unlinked strong{
  color:#aab6c3!important;
  font-size:9px!important;
}

.google-linked small,
.google-unlinked small{
  color:#8394a6!important;
  font-size:8px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:175px!important;
}

.user-number{
  justify-content:flex-end!important;
  text-align:right!important;
  font-variant-numeric:tabular-nums!important;
  font-size:11px!important;
  font-weight:700!important;
}

.credits-cell{
  color:#dfe8f0!important;
}

.success-count{
  color:#7ad7a5!important;
}

.failed-count{
  color:#f28f98!important;
}

.user-date{
  font-size:8px!important;
  line-height:1.45!important;
  color:#b0becb!important;
  white-space:normal!important;
}

.user-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-content:center!important;
  gap:5px!important;
  overflow:visible!important;
}

.user-actions button{
  padding:5px 7px!important;
  margin:0!important;
  line-height:1!important;
  border-radius:5px!important;
  white-space:nowrap!important;
}

/* search/create sections should line up with the table */
.user-search-bar{
  margin:12px!important;
  padding:0!important;
}
.user-create-form{
  padding:12px!important;
}

/* Prevent nested scrollbar caused by previous row width rules */
.user-manager-list{
  overflow:visible!important;
}

/* Impersonation banner: keep clear of Simple / Advanced switch */
.impersonation-banner{
  left:10px!important;
  right:auto!important;
  transform:none!important;
  max-width:min(520px,52vw)!important;
}

.hover-video-preview{
  display:grid;
  place-items:center;
}
.hover-video-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#9fb0c0;
}
.hover-play-icon{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid #405a73;
  background:#132235;
  color:#eef5fb;
  font-size:14px;
  padding-left:2px;
}
.hover-video-placeholder small{font-size:9px;color:#8395a7}
.hover-preview-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.result-scroll-sentinel{
  grid-column:1/-1;
  min-height:48px;
  display:grid;
  place-items:center;
  color:#7f91a4;
  font-size:9px;
  border:1px dashed #2e4154;
  border-radius:7px;
  margin:8px;
}
.simple-hover-preview{border-radius:6px 6px 0 0}

.result-first-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hover-video-placeholder{background:linear-gradient(to top,rgba(4,9,14,.72),rgba(4,9,14,.04) 60%)!important;}
.hover-video-placeholder small{position:absolute;bottom:8px}
.hover-preview-video{z-index:3}
.result-video-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:20px}
.result-video-lightbox[hidden]{display:none!important}
.result-video-lightbox-inner{width:min(1280px,96vw);max-height:94vh;background:#070c12;border:1px solid #344a60;border-radius:10px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.result-video-lightbox-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #26394c;background:#0d1721}
.result-video-lightbox-head strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-video-lightbox-head button{width:30px;height:30px;padding:0!important;font-size:17px!important}
#resultVideoLightboxPlayer{display:block;width:100%;max-height:calc(94vh - 50px);background:#000}
body.video-preview-open{overflow:hidden}

.hover-preview-video,
.result-first-frame,
.hover-video-placeholder{
  pointer-events:none!important;
}

/* Seamless result hover preview: first-frame still remains visible until
   the MP4 has decoded a real frame. */
.hover-preview-video.hover-preview-loading{
  opacity:0!important;
}
.hover-preview-video.hover-preview-ready{
  opacity:1!important;
  transition:opacity .08s linear;
}
.hover-video-placeholder{
  transition:opacity .08s linear;
}
.hover-video-placeholder.hover-preview-active{
  opacity:0!important;
}

.admin-errors-button{display:inline-flex!important;align-items:center!important;gap:5px!important}
.admin-error-badge{min-width:17px;height:17px;padding:0 4px;border-radius:999px;display:inline-grid;place-items:center;background:#8f2f3a;color:#fff;font-size:8px;font-weight:800}
.admin-error-badge[hidden]{display:none!important}

.generation-queue-panel{margin:10px 0 14px;border:1px solid #2d4055;border-radius:9px;background:#0b131c;overflow:hidden}
.generation-queue-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #26394c;background:#0f1923}
.generation-queue-head>div{display:flex;flex-direction:column;gap:3px}.generation-queue-head span{color:var(--muted)}
.generation-queue-list{max-height:320px;overflow:auto}
.queue-transaction{border-bottom:1px solid #223547}.queue-transaction:last-child{border-bottom:0}
.queue-transaction-head{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#0c151e}
.queue-transaction-head>div:first-child{display:flex;align-items:center;gap:8px}
.queue-status,.queue-job-status{display:inline-block;border-radius:999px;border:1px solid #41566c;text-transform:uppercase}
.status-generating{color:#8bd8ff;border-color:#376c86!important}.status-queued{color:#ffd28b;border-color:#80683b!important}.status-completed{color:#8ed7aa;border-color:#36734e!important}
.status-failed,.status-interrupted{color:#ff9ca5;border-color:#7d424a!important}.status-cancelled,.status-stopped{color:#aab6c3;border-color:#566474!important}
.queue-transaction-meta{display:flex;align-items:center;gap:8px;color:var(--muted)}
.queue-job{display:grid;grid-template-columns:65px minmax(120px,1.3fr) minmax(90px,.8fr) 95px minmax(120px,1fr);gap:8px;align-items:center;border-top:1px solid #1d2d3d;}
.queue-job-name{overflow:hidden;text-overflow:ellipsis}.queue-job-error{color:#ff9ca5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.generation-queue-empty{padding:18px;text-align:center;color:var(--muted);}
@media(max-width:850px){.queue-job{grid-template-columns:55px 1fr 80px}.queue-job>span:nth-child(3),.queue-job>span:nth-child(5){display:none}}

.queue-live-timer{font-variant-numeric:tabular-nums;color:#8bd8ff;font-weight:700}.queue-waiting-label{color:#ffd28b}

/* Readability pass: avoid 7-9px operational text */
body{font-size:14px}

.hint,
.sub,
.results-dock-head .hint{
  font-size:11px!important;
  line-height:1.45!important;
}

.simple-results-head h2,
.results-dock-head h2{
  font-size:15px!important;
}

.simple-pending-card{
  min-height:58px!important;
  padding:10px 12px!important;
}
.simple-pending-card strong{
  font-size:12px!important;
}
.simple-pending-card span,
.simple-pending-card small,
.simple-job-error,
.simple-queue-wait{
  font-size:10px!important;
  line-height:1.4!important;
}

.generation-queue-head{
  padding:12px 14px!important;
}
.generation-queue-head strong{
  font-size:13px!important;
}
.generation-queue-head span{
  font-size:11px!important;
}
.generation-queue-head button{
  font-size:10px!important;
  padding:7px 10px!important;
}

.queue-transaction-head{
  padding:10px 12px!important;
}
.queue-transaction-head strong{
  font-size:11px!important;
}
.queue-status,
.queue-job-status{
  font-size:9px!important;
  padding:4px 7px!important;
}
.queue-transaction-meta{
  font-size:10px!important;
}
.queue-transaction-meta button{
  font-size:9px!important;
  padding:6px 8px!important;
}

.queue-job{
  font-size:10px!important;
  line-height:1.4!important;
  padding:9px 12px!important;
  min-height:42px!important;
}
.generation-queue-empty{
  font-size:11px!important;
}

.pending-copy strong{
  font-size:12px!important;
}
.pending-status,
.generation-timer,
.pending-copy small,
.pending-error{
  font-size:10px!important;
}

.result-actions-bar button,
.simple-result-actions button,
.simple-result-actions a,
.result-details-toggle,
.result-prompt,
.result-generation-settings{
  font-size:10px!important;
}

.user-cell,
.user-actions button,
.user-table-head button,
.user-table-head>span{
  font-size:10px!important;
}
.user-name-stack strong{
  font-size:12px!important;
}
.user-name-stack small{
  font-size:10px!important;
}

.media-trim-controls{
  width:100%;
  margin-top:7px;
  padding:7px;
  border:1px solid #2f4358;
  border-radius:7px;
  background:#0a121b;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.media-trim-controls label{
  display:grid;
  grid-template-columns:auto minmax(48px,1fr) auto;
  align-items:center;
  gap:4px;
  font-size:10px!important;
  color:#cbd6e0;
}
.media-trim-controls input{
  min-width:0;
  width:100%;
  padding:5px 6px!important;
  font-size:10px!important;
  border:1px solid #40566e;
  border-radius:5px;
  background:#081018;
  color:#edf4fa;
}
.media-trim-controls>small{
  grid-column:1/-1;
  font-size:9px!important;
  color:#8fa0b1;
  line-height:1.35;
}
.simple-ref-thumb:has(.media-trim-controls),
.advanced-attached-ref:has(.media-trim-controls){
  width:min(260px,100%)!important;
}

.media-limit-warning{
  width:100%;
  margin-top:6px;
  padding:6px 7px;
  border-radius:6px;
  border:1px solid #745a2f;
  background:#20190d;
  color:#ffd28b;
  font-size:10px!important;
  line-height:1.35;
}

body.media-trimmer-open{overflow:hidden}

.media-trimmer-modal{
  position:fixed;
  inset:0;
  z-index:15000;
  background:rgba(0,0,0,.78);
  display:grid;
  place-items:center;
  padding:20px;
}
.media-trimmer-modal[hidden]{display:none!important}

.media-trimmer-inner{
  width:min(820px,96vw);
  max-height:92vh;
  overflow:auto;
  border:1px solid #40566e;
  border-radius:12px;
  background:#0b131c;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}

.media-trimmer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:14px 16px;
  border-bottom:1px solid #2c3e52;
  background:#101b27;
}
.media-trimmer-head>div{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.media-trimmer-head strong{
  font-size:16px!important;
}
.media-trimmer-head span{
  font-size:11px!important;
  color:#ffd28b;
}
.media-trimmer-close{
  width:34px!important;
  height:34px!important;
  font-size:20px!important;
}

.media-trimmer-preview{
  padding:16px;
  display:grid;
  place-items:center;
  background:#05090e;
}
.media-trimmer-preview video{
  width:min(100%,720px);
  max-height:390px;
  background:#000;
}
.media-trimmer-preview audio{
  width:min(100%,720px);
}

.media-trimmer-time-readout{
  display:flex;
  justify-content:space-between;
  padding:8px 18px 0;
  font-size:11px;
  color:#aab8c6;
  font-variant-numeric:tabular-nums;
}

.media-trimmer-range{
  display:grid;
  gap:12px;
  padding:14px 18px;
}
.media-trimmer-range label{
  display:grid;
  grid-template-columns:65px 1fr;
  gap:10px;
  align-items:center;
  font-size:12px!important;
}
.media-trimmer-range input[type=range]{
  width:100%;
}

.media-trimmer-fields{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:0 18px 16px;
}
.media-trimmer-fields>label{
  display:grid;
  gap:5px;
  font-size:11px!important;
  color:#aebbc8;
}
.media-trimmer-fields>label>div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px;
  align-items:center;
}
.media-trimmer-fields input{
  width:100%;
  padding:8px!important;
  border:1px solid #41566d;
  border-radius:6px;
  background:#081018;
  color:#eef4fa;
  font-size:12px!important;
}
.media-trimmer-fields span{
  font-size:10px;
  color:#8998a8;
}

.media-trimmer-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 18px;
  border-top:1px solid #2c3e52;
  background:#0e1822;
}
.media-trimmer-actions button{
  font-size:11px!important;
  padding:8px 12px!important;
}
.media-trimmer-actions button.primary{
  background:#18334a;
  border-color:#4d7598;
}
#mediaTrimmerStatus{
  flex:1;
  text-align:center;
  font-size:11px!important;
  color:#aebbc8;
  font-variant-numeric:tabular-nums;
}
.open-media-trimmer-btn{
  width:100%;
  margin-top:6px;
  padding:7px 9px!important;
  font-size:10px!important;
}

@media(max-width:650px){
  .media-trimmer-fields{grid-template-columns:1fr}
  .media-trimmer-actions{flex-wrap:wrap}
  #mediaTrimmerStatus{order:-1;flex-basis:100%}
}

.media-trimmer-pro{
  width:min(980px,96vw)!important;
}

.media-trimmer-preview-stage{
  position:relative;
  min-height:260px;
  padding:18px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 30%,rgba(59,147,210,.16),transparent 42%),
    #05090e;
}
.media-trimmer-preview-stage video{
  width:min(760px,100%);
  max-height:390px;
  border-radius:9px;
  background:#000;
}
.media-trimmer-preview-stage audio{
  width:min(760px,100%);
}
.media-trimmer-duration-card{
  position:absolute;
  top:28px;
  right:28px;
  min-width:190px;
  padding:12px 16px;
  border:1px solid #45647e;
  border-radius:12px;
  background:rgba(15,31,45,.9);
  backdrop-filter:blur(12px);
  text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.media-trimmer-duration-card>span{
  display:block;
  font-size:11px;
  color:#9eb0c0;
}
.media-trimmer-duration-card strong{
  display:block;
  margin:4px 0;
  font-size:28px!important;
  font-variant-numeric:tabular-nums;
}
.media-trimmer-duration-card small{
  display:flex;
  justify-content:center;
  gap:8px;
  font-size:10px!important;
  color:#b7c5d1;
}

.media-timeline-shell{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:10px;
  padding:16px 18px 8px;
  background:#0e1822;
}
.timeline-play{
  align-self:start;
  width:56px!important;
  height:76px!important;
  border-radius:10px!important;
  font-size:22px!important;
}
.media-timeline-track{
  position:relative;
  height:128px;
  overflow:hidden;
  border:1px solid #395069;
  border-radius:10px;
  background:#111d29;
  user-select:none;
}
.media-timeline-frames{
  height:72px;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  overflow:hidden;
  border-bottom:1px solid #2d4257;
}
.media-timeline-frames video{
  width:100%;
  height:72px;
  opacity:.82;
}
.audio-timeline-bg{
  grid-column:1/-1;
  height:72px;
  display:grid;
  place-items:center;
  color:#9bb0c2;
  background:linear-gradient(90deg,#172637,#21364c,#172637);
  font-size:11px;
}
.media-waveform{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:55px;
  padding:8px 7px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:3px;
  background:#102031;
}
.media-waveform span{
  width:3px;
  border-radius:2px;
  background:#8299ad;
  opacity:.85;
}
.media-trim-selection{
  position:absolute;
  top:0;
  bottom:0;
  border-top:3px solid #22bde7;
  border-bottom:3px solid #22bde7;
  background:rgba(28,184,224,.10);
}
.media-trim-shade{
  position:absolute;
  top:0;
  bottom:0;
  z-index:4;
  background:rgba(2,6,10,.58);
}
.media-trim-handle{
  position:absolute!important;
  top:-1px;
  bottom:-1px;
  width:18px!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin-left:-9px;
  border:0!important;
  border-radius:7px!important;
  background:#ffb900!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.7),0 4px 12px rgba(0,0,0,.35);
}
.media-trim-handle span{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-left:-5px;
  border-radius:50%;
  background:#fff;
  color:#d58a00;
  font-weight:900;
  font-size:13px;
}
.media-trim-playhead{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  z-index:6;
  background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.85);
}
.media-timeline-ticks{
  justify-content:space-between;
  color:#8496a7;
  font-size:9px;
  font-variant-numeric:tabular-nums;
}

.media-waveform canvas{
  width:100%;
  height:100%;
  display:block;
}
.media-trim-selection{
  z-index:5!important;
}
#mediaTrimCreateBtn{
  opacity:1!important;
  cursor:pointer!important;
  background:#1d6f9f!important;
  border-color:#4ca5d5!important;
  color:#fff!important;
  font-weight:800!important;
}
#mediaTrimCreateBtn:disabled{
  opacity:.55!important;
  cursor:wait!important;
}


/* ==========================================================
   Mobile / tablet responsiveness
   Advanced Mode becomes a single-column touch-first workspace.
   ========================================================== */

html,body{max-width:100%;overflow-x:hidden}

@media(max-width:900px){
  /* Base page */
  body{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
    padding-bottom:0!important;
    overflow-x:hidden!important;
  }

  *{box-sizing:border-box}
  img,video,canvas,svg{max-width:100%}

  /* Top mode switch */
  .view-mode-switch{
    position:sticky!important;
    top:6px!important;
    left:auto!important;
    transform:none!important;
    width:max-content!important;
    max-width:calc(100vw - 16px)!important;
    margin:6px auto 10px!important;
    z-index:300!important;
  }
  .view-mode-switch button{
    min-height:40px!important;
    padding:8px 14px!important;
    font-size:12px!important;
    touch-action:manipulation;
  }

  /* Advanced main shell */
  .advanced-view{
    width:100%!important;
    max-width:100%!important;
    padding:0 8px 18px!important;
    margin:0!important;
    overflow:visible!important;
  }
  .scenes-workspace,
  .left-project-panel,
  .panel,
  .project-strip{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:8px 0!important;
  }

  /* Fixed desktop sidebars become normal document flow */
  .left-project-panel{
    position:static!important;
    left:auto!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:10px!important;
  }
  .scenes-workspace{
    margin:0!important;
  }

  /* Project toolbar */
  .project-strip-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .project-strip-row>*{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  .project-strip-row button,
  .project-strip-row input,
  .project-strip-row select{
    min-height:42px!important;
    font-size:12px!important;
  }

  /* Summary/dashboard cards */
  .dashboard-grid,
  .compact-dashboard{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .dashboard-grid>div,
  .compact-dashboard>div{
    min-width:0!important;
  }
  .dashboard-grid strong,
  .compact-dashboard strong{
    font-size:10px!important;
  }
  .dashboard-grid span,
  .compact-dashboard span{
    font-size:12px!important;
  }

  /* Scene cards */
  #scenes,
  #scenes .scene{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  #scenes .scene{
    padding:12px!important;
    margin:10px 0!important;
  }
  .scene .row,
  .scene .scene-row,
  .scene-controls,
  .scene-settings{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .scene .row>*,
  .scene .scene-row>*,
  .scene-controls>*,
  .scene-settings>*{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  .scene input,
  .scene select,
  .scene textarea,
  .scene button{
    font-size:13px!important;
  }
  .scene input,
  .scene select,
  .scene button{
    min-height:42px!important;
  }
  .scene textarea.prompt{
    min-height:150px!important;
    resize:vertical!important;
    line-height:1.45!important;
  }

  /* Scene header/actions wrap rather than overflow */
  .scene-head,
  .scene-header,
  .scene-title-row,
  .scene-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    align-items:center!important;
  }
  .scene-head>*,
  .scene-header>*,
  .scene-title-row>*{
    min-width:0!important;
  }
  .scene-actions button{
    flex:1 1 120px!important;
  }

  /* Reference library */
  
  
  .library-action-row{
    overflow:visible!important;
  }
  .library-action-row>*{
    min-width:0!important;
    max-width:none!important;
  }
  .library-action-row .browse-library-btn,
  .library-action-row .add-selected-btn{
    min-height:40px!important;
    font-size:11px!important;
  }
  .library-tabs{
    padding-bottom:8px!important;
  }
  

  #fileBank,
  .reference-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .compact-preview{
    height:120px!important;
  }
  .compact-ref-bottom,
  .ref-meta,
  .filename,
  .alias-label{
    font-size:10px!important;
  }
  .ref-hover-menu{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:12px!important;
    width:auto!important;
    max-width:none!important;
    z-index:1200!important;
  }

  /* Attached references */
  .attached,
  .simple-reference-strip{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  .advanced-attached-ref,
  .simple-ref-thumb{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  .advanced-attached-media,
  .simple-ref-media{
    width:100%!important;
  }

  /* Drop zones */
  .dropzone,
  .scene-dropzone{
    min-height:90px!important;
    padding:12px!important;
  }

  /* Advanced buttons and toolbars */
  .project-toolbar,
  .compare-toolbar,
  .library-toolbar,
  .dock-actions,
  .result-bulk-toolbar,
  .toolbar{
    flex-wrap:wrap!important;
  }
  .project-toolbar>*,
  .compare-toolbar>*,
  .dock-actions>*,
  .result-bulk-toolbar>*{
    min-width:0!important;
  }

  /* Results dock becomes inline instead of a fixed bottom panel */
  .results-dock{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:12px 8px 20px!important;
    border-radius:10px!important;
    overflow:visible!important;
  }
  .results-dock.collapsed{
    display:block!important;
  }
  .results-restore-btn,
  .dock-toggle-btn{
    display:none!important;
  }
  .results-dock-scroll{
    max-height:none!important;
    overflow:visible!important;
    padding:8px!important;
  }
  .results-dock-head{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:8px!important;
  }
  .results-dock-head>div:first-child{
    flex:1 1 180px!important;
  }
  .dock-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
    gap:7px!important;
  }
  .dock-actions select,
  .dock-actions button{
    max-width:none!important;
    width:100%!important;
    min-height:38px!important;
    font-size:11px!important;
  }

  /* Pending jobs / generation queue */
  .generation-queue-panel{
    width:100%!important;
    margin:10px 0!important;
  }
  .generation-queue-head,
  .queue-transaction-head{
    flex-wrap:wrap!important;
    align-items:flex-start!important;
  }
  .queue-transaction-meta{
    width:100%!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }
  .queue-job{
    grid-template-columns:55px minmax(0,1fr) 90px!important;
    gap:6px!important;
  }
  .queue-job>span:nth-child(3),
  .queue-job>span:nth-child(5){
    display:none!important;
  }

  /* Result cards */
  .results-grid{
    grid-template-columns:1fr!important;
  }
  .result-card{
    width:100%!important;
    max-width:100%!important;
  }
  .result-actions-bar,
  .result-review{
    flex-wrap:wrap!important;
  }
  .result-actions-bar button,
  .result-review>*{
    flex:1 1 120px!important;
  }

  /* Modals */
  .library-modal,
  .ref-lightbox,
  .media-trimmer-modal{
    padding:8px!important;
  }
  .library-modal-inner,
  .ref-lightbox-inner,
  .media-trimmer-inner{
    width:100%!important;
    max-width:100%!important;
    max-height:94dvh!important;
  }
  

  /* Media trimmer */
  
  .media-trimmer-duration-card{
    margin-top:8px!important;
  }
  
  .timeline-play{
    width:42px!important;
    height:72px!important;
  }
  
  .media-trimmer-actions{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  

  /* Impersonation notice must not cover controls */
  .impersonation-bar,
  .impersonation-overlay{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    margin:6px 0!important;
  }
}

@media(max-width:560px){
  body{font-size:14px!important}

  .advanced-view{padding:0 6px 16px!important}

  .dashboard-grid,
  .compact-dashboard{
    grid-template-columns:1fr!important;
  }

  #fileBank,
  .reference-grid,
  .attached,
  .simple-reference-strip,
  .library-modal-grid{
    grid-template-columns:1fr!important;
  }

  .library-action-row,
  .dock-actions{
    grid-template-columns:1fr!important;
  }

  .queue-job{
    grid-template-columns:48px minmax(0,1fr)!important;
  }
  .queue-job>span:nth-child(3),
  .queue-job>span:nth-child(4),
  .queue-job>span:nth-child(5){
    display:none!important;
  }

  .view-mode-switch{
    width:calc(100% - 12px)!important;
  }
  .view-mode-switch button{
    flex:1 1 50%!important;
  }

  .results-dock{
    margin:10px 6px 18px!important;
  }

  
  

  /* Easier touch targets */
  button,
  input[type=button],
  input[type=submit],
  select{
    min-height:40px;
  }
}


/* ==========================================================
   Mobile Browser Library + Trimmer refinements
   ========================================================== */
@media(max-width:900px){

  /* Browser Library modal becomes a full-screen mobile sheet */
  .library-modal{
    position:fixed!important;
    inset:0!important;
    padding:0!important;
    background:rgba(0,0,0,.88)!important;
    z-index:14000!important;
  }

  .library-modal-inner{
    width:100%!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .library-modal-head{
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    padding:12px!important;
    background:#101923!important;
    border-bottom:1px solid #304256!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    align-items:center!important;
  }

  .library-modal-head h2,
  .library-modal-head strong{
    font-size:16px!important;
  }

  .library-modal-head button{
    min-width:42px!important;
    min-height:42px!important;
    font-size:14px!important;
  }

  .library-modal-toolbar,
  .library-modal-controls,
  .library-toolbar{
    position:static!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    padding:10px 12px!important;
    margin:0!important;
    overflow:visible!important;
    background:#0d151e!important;
  }

  .library-modal-toolbar input,
  .library-modal-toolbar select,
  .library-modal-toolbar button,
  .library-modal-controls input,
  .library-modal-controls select,
  .library-modal-controls button,
  .library-toolbar input,
  .library-toolbar select,
  .library-toolbar button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:44px!important;
    font-size:13px!important;
  }

  .library-modal-tabs,
  .library-tabs{
    position:static!important;
    display:flex!important;
    gap:6px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    padding:8px 12px!important;
    background:#0d151e!important;
    scrollbar-width:thin;
  }

  .library-modal-tabs button,
  .library-tabs button,
  .lib-tab{
    flex:0 0 auto!important;
    min-height:40px!important;
    font-size:12px!important;
    padding:8px 12px!important;
  }

  .library-modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    padding:10px!important;
  }

  .library-modal-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
  }

  .library-modal-grid .compact-ref,
  .library-modal-grid .ref-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
  }

  .library-modal-grid .compact-preview,
  .library-modal-grid .ref-preview{
    height:140px!important;
    width:100%!important;
    object-fit:cover!important;
  }

  .library-modal-grid .compact-ref-bottom,
  .library-modal-grid .ref-meta{
    min-height:40px!important;
    padding:8px!important;
  }

  .library-modal-grid .filename,
  .library-modal-grid small,
  .library-modal-grid .alias-label{
    font-size:11px!important;
  }

  /* Replace hover-only menus with tap-friendly visible actions */
  .library-modal-grid .ref-hover-menu{
    position:static!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    width:100%!important;
    max-width:none!important;
    margin-top:6px!important;
    padding:0!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  .library-modal-grid .ref-hover-menu button{
    width:100%!important;
    min-height:38px!important;
    font-size:11px!important;
    padding:7px!important;
  }

  .library-modal-grid .ref-select-toggle{
    width:30px!important;
    height:30px!important;
    top:7px!important;
    right:7px!important;
    font-size:14px!important;
  }

  .library-action-row{
    position:sticky!important;
    bottom:0!important;
    z-index:18!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    padding:10px 12px!important;
    background:#101923!important;
    border-top:1px solid #304256!important;
  }

  .library-action-row button,
  .library-action-row select{
    min-height:44px!important;
    font-size:12px!important;
  }

  /* Trimmer: confirm mobile-friendly layout and eliminate width overflow */
  .media-trimmer-modal{
    padding:0!important;
    align-items:stretch!important;
  }

  .media-trimmer-inner,
  .media-trimmer-pro{
    width:100%!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    border-radius:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  .media-trimmer-head{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    padding:12px!important;
  }

  .media-trimmer-preview-stage{
    min-height:180px!important;
    padding:10px!important;
  }

  .media-trimmer-preview-stage video{
    width:100%!important;
    max-height:280px!important;
    object-fit:contain!important;
  }

  .media-trimmer-preview-stage audio{
    width:100%!important;
  }

  .media-trimmer-duration-card{
    position:static!important;
    width:100%!important;
    min-width:0!important;
    margin:10px 0 0!important;
  }

  .media-trimmer-duration-card strong{
    font-size:24px!important;
  }

  .media-timeline-shell{
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:8px!important;
    padding:10px!important;
  }

  .media-timeline-main,
  .media-timeline-track{
    width:100%!important;
  }

  .media-timeline-track{
    height:118px!important;
  }

  .media-trim-handle{
    width:24px!important;
    margin-left:-12px!important;
  }

  .media-trimmer-fields{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:10px!important;
  }

  .media-trimmer-fields input{
    min-height:42px!important;
    font-size:13px!important;
  }

  .media-trimmer-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:25!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:10px!important;
    background:#0e1822!important;
  }

  .media-trimmer-actions button{
    width:100%!important;
    min-height:44px!important;
    font-size:12px!important;
  }

  #mediaTrimmerStatus{
    order:-1!important;
    width:100%!important;
    text-align:left!important;
  }
}

@media(max-width:560px){
  .library-modal-grid{
    grid-template-columns:1fr!important;
  }

  .library-modal-grid .compact-preview,
  .library-modal-grid .ref-preview{
    height:190px!important;
  }

  .library-action-row{
    grid-template-columns:1fr!important;
  }

  .media-timeline-shell{
    grid-template-columns:1fr!important;
  }

  .timeline-play{
    width:100%!important;
    min-height:42px!important;
    height:42px!important;
  }

  .media-timeline-track{
    height:110px!important;
  }

  .media-trimmer-duration-card strong{
    font-size:22px!important;
  }
}


/* ==========================================================
   Browser Library mobile fix — actual markup selectors
   ========================================================== */
@media(max-width:900px){

  #libraryModal{
    padding:0!important;
  }

  #libraryModal .library-modal-inner{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    overflow:hidden!important;
    border-radius:0!important;
  }

  #libraryModal .library-modal-head{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    display:block!important;
    padding:12px!important;
    background:#101923!important;
    border-bottom:1px solid #304256!important;
  }

  #libraryModal .library-modal-head>strong{
    display:block!important;
    margin:0 0 10px!important;
    font-size:16px!important;
  }

  /* This is the real desktop action row from the template. */
  #libraryModal .library-modal-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    align-items:stretch!important;
  }

  #libraryModal .library-modal-actions input,
  #libraryModal .library-modal-actions select,
  #libraryModal .library-modal-actions button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:44px!important;
    height:44px!important;
    padding:8px 10px!important;
    font-size:12px!important;
  }

  /* Search occupies full width. */
  #libraryModal #modalLibrarySearch{
    grid-column:1/-1!important;
  }

  /* Category + sort side by side. */
  #libraryModal #modalLibraryCategory,
  #libraryModal #modalLibrarySort{
    grid-column:auto!important;
  }

  /* Main actions are full-width touch buttons. */
  #libraryModal .library-upload-btn,
  #libraryModal .bulk-delete-btn,
  #libraryModal .library-confirm-btn{
    grid-column:1/-1!important;
  }

  /* Close button becomes a compact top-right control. */
  #libraryModal .library-modal-actions>button:last-child{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    font-size:18px!important;
  }

  /* Real desktop body is a 2-pane grid. Mobile must become one scrolling pane. */
  #libraryModal .library-browser-body{
    display:block!important;
    flex:1 1 auto!important;
    width:100%!important;
    max-width:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    padding:10px!important;
  }

  /* Hide the desktop inspector pane. Card information/actions are enough on phone. */
  #libraryModal .library-details{
    display:none!important;
  }

  #libraryModal #libraryModalGrid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    padding:0 0 18px!important;
  }

  /* The existing cards were being collapsed by desktop compact-card rules. */
  #libraryModal #libraryModalGrid .compact-ref{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:190px!important;
    overflow:hidden!important;
    border-radius:10px!important;
    background:#0b131c!important;
  }

  #libraryModal #libraryModalGrid .compact-preview{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:145px!important;
    min-height:145px!important;
    overflow:hidden!important;
    border-radius:9px 9px 0 0!important;
    background:#05090d!important;
  }

  #libraryModal #libraryModalGrid .compact-preview img,
  #libraryModal #libraryModalGrid .compact-preview video,
  #libraryModal #libraryModalGrid .compact-preview .ref-preview,
  #libraryModal #libraryModalGrid .compact-preview .video-ref-wrap{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
    background:#05090d!important;
  }

  #libraryModal #libraryModalGrid .compact-ref-bottom{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:3px!important;
    width:100%!important;
    height:auto!important;
    min-height:46px!important;
    padding:7px 8px!important;
    overflow:hidden!important;
  }

  #libraryModal #libraryModalGrid .compact-ref-bottom strong,
  #libraryModal #libraryModalGrid .compact-ref-bottom small,
  #libraryModal #libraryModalGrid .compact-ref-bottom span{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:10px!important;
  }

  /* Selection control remains large enough for touch. */
  #libraryModal #libraryModalGrid .ref-select-toggle{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    padding:0!important;
    border-radius:50%!important;
    font-size:16px!important;
    z-index:12!important;
  }

  /* Do not show desktop hover popovers as overlays on phones. */
  #libraryModal #libraryModalGrid .ref-hover-menu{
    display:none!important;
  }

  /* Selected state needs to be obvious without hovering. */
  #libraryModal #libraryModalGrid .compact-ref.selected-ref{
    outline:2px solid #5da0dc!important;
    outline-offset:0!important;
  }
}

@media(max-width:560px){
  #libraryModal .library-modal-actions{
    grid-template-columns:1fr!important;
  }

  #libraryModal #modalLibrarySearch,
  #libraryModal #modalLibraryCategory,
  #libraryModal #modalLibrarySort,
  #libraryModal .library-upload-btn,
  #libraryModal .bulk-delete-btn,
  #libraryModal .library-confirm-btn{
    grid-column:1!important;
  }

  #libraryModal #libraryModalGrid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  #libraryModal #libraryModalGrid .compact-ref{
    min-height:250px!important;
  }

  #libraryModal #libraryModalGrid .compact-preview{
    height:200px!important;
    min-height:200px!important;
  }

  #libraryModal #libraryModalGrid .compact-ref-bottom{
    min-height:50px!important;
  }
}


/* Browser Library: show the full reference image on mobile, never crop it. */
@media(max-width:900px){
  #libraryModal #libraryModalGrid .library-browser-card{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    width:100%!important;
    height:auto!important;
    min-height:210px!important;
    overflow:hidden!important;
    border-radius:10px!important;
    background:#0b131c!important;
  }

  #libraryModal #libraryModalGrid .library-browser-thumb{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4 / 3!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    background:#05090d!important;
  }

  #libraryModal #libraryModalGrid .library-browser-thumb img,
  #libraryModal #libraryModalGrid .library-browser-thumb video{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:#05090d!important;
  }

  #libraryModal #libraryModalGrid .library-audio-icon{
    width:100%!important;
    height:100%!important;
    min-height:120px!important;
    display:grid!important;
    place-items:center!important;
    font-size:42px!important;
  }

  #libraryModal #libraryModalGrid .library-browser-name{
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
    width:100%!important;
    min-width:0!important;
    padding:8px!important;
    background:#0b131c!important;
  }

  #libraryModal #libraryModalGrid .library-browser-name strong,
  #libraryModal #libraryModalGrid .library-browser-name small{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  #libraryModal #libraryModalGrid .library-browser-name strong{
    font-size:11px!important;
  }

  #libraryModal #libraryModalGrid .library-browser-name small{
    font-size:10px!important;
    color:#8fa0b1!important;
  }
}

@media(max-width:560px){
  #libraryModal #libraryModalGrid .library-browser-card{
    min-height:280px!important;
  }

  #libraryModal #libraryModalGrid .library-browser-thumb{
    aspect-ratio:16 / 10!important;
  }
}

.media-trim-move-handle{
  position:absolute!important;
  top:8px!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  margin-left:-17px!important;
  z-index:14!important;
  border:2px solid #d9f5ff!important;
  border-radius:50%!important;
  background:#168bb8!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:30px!important;
  box-shadow:0 3px 10px rgba(0,0,0,.45)!important;
}
.media-trim-move-handle:active{
  background:#1ca6d7!important;
}
.media-trim-handle{
  z-index:13!important;
}

/* Make the selected range itself draggable when there is enough visual width. */

@media(max-width:900px){
  .media-trim-move-handle{
    top:7px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    margin-left:-19px!important;
    font-size:20px!important;
  }
}


/* Advanced scene reference drop zone: direct local file picker access. */
.scene-drop-browse-link{
  display:inline-block!important;
  margin-top:7px!important;
  padding:0!important;
  min-height:0!important;
  height:auto!important;
  width:auto!important;
  border:0!important;
  background:transparent!important;
  color:#66b5f3!important;
  font:inherit!important;
  font-weight:800!important;
  text-decoration:underline!important;
  text-underline-offset:2px!important;
  cursor:pointer!important;
}
.scene-drop-browse-link:hover,
.scene-drop-browse-link:focus{
  color:#9bd1ff!important;
  background:transparent!important;
}


/* Trimmer timeline: 60-second zoom window with horizontal scrub/scroll. */
.media-timeline-main{
  min-width:0!important;
  overflow:hidden!important;
}
.media-timeline-scroller{
  width:100%!important;
  max-width:100%!important;
  scrollbar-width:auto;
  padding-bottom:2px;
}
.media-timeline-scroller::-webkit-scrollbar{
  height:10px;
}
.media-timeline-track{
  min-width:100%!important;
}
.media-timeline-ticks{
  position:relative!important;
  height:24px!important;
  min-width:100%!important;
  max-width:none!important;
  padding-top:5px!important;
  display:block!important;
}
.media-timeline-tick{
  position:absolute!important;
  top:5px!important;
  transform:translateX(-50%);
  white-space:nowrap;
  color:#8496a7;
  font-size:9px;
  font-variant-numeric:tabular-nums;
}
.media-timeline-tick:first-child{
  transform:none;
}
.media-timeline-scroller:active{
  cursor:grabbing;
}

/* Touch devices: horizontal swipe scrolls the long timeline while handles
   remain independently draggable because they already use touch-action:none. */
@media(max-width:900px){
  .media-timeline-main{
    width:100%!important;
    overflow:hidden!important;
  }
  .media-timeline-scroller{
    width:100%!important;
    padding-bottom:6px!important;
  }
  .media-timeline-track{
    width:auto;
    min-width:100%!important;
  }
  
}


/* Fix horizontal swipe interaction in the zoomed trimmer timeline. */
.media-timeline-scroller{
  touch-action:pan-x!important;
  overflow-x:scroll!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  scroll-behavior:auto!important;
}
.media-timeline-track{
  touch-action:pan-x!important;
}
.media-timeline-frames,
.media-waveform,
.media-trim-shade,
.media-trim-playhead{
  pointer-events:none!important;
}
.media-timeline-frames video{
  pointer-events:none!important;
  -webkit-user-drag:none!important;
  user-select:none!important;
}
.media-trim-selection,
.media-trim-handle,
.media-trim-move-handle{
  touch-action:none!important;
  pointer-events:auto!important;
}


/* Mouse grab-to-scroll + preserve JS-computed long timeline width. */
.media-timeline-scroller{
  cursor:grab!important;
  user-select:none!important;
}
.media-timeline-scroller.drag-panning{
  cursor:grabbing!important;
}
.media-timeline-track{
  max-width:none!important;
  flex:none!important;
}
.media-timeline-scroller .media-timeline-track{
  width:var(--timeline-runtime-width, auto);
}

/* Inline JS width must win over earlier mobile width:100 rules. */
#mediaTimelineTrack[style]{
  max-width:none!important;
}
@media(max-width:900px){
  #mediaTimelineTrack[style]{
    width:var(--timeline-runtime-width, auto);
    max-width:none!important;
  }
}


/* Explicit physical timeline scroller. */
.media-physical-scroll-wrap{
  width:100%;
  padding:8px 2px 2px;
}
.media-physical-scroller{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:18px;
  margin:0;
  padding:0;
  background:transparent;
  cursor:ew-resize;
}
.media-physical-scroller::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:#24384c;
  border:1px solid #426079;
}
.media-physical-scroller::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:44px;
  height:18px;
  margin-top:-6px;
  border-radius:8px;
  border:1px solid #8fc7ea;
  background:#2f8fc5;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.media-physical-scroller::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:#24384c;
  border:1px solid #426079;
}
.media-physical-scroller::-moz-range-thumb{
  width:44px;
  height:18px;
  border-radius:8px;
  border:1px solid #8fc7ea;
  background:#2f8fc5;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.media-physical-scroller:disabled{
  opacity:.35;
  cursor:not-allowed;
}

/* Empty timeline is now a click target for moving the selection. */
.media-timeline-track{
  cursor:crosshair!important;
}
.media-trim-selection,
.media-trim-handle,
.media-trim-move-handle{
  cursor:grab!important;
}
.media-trim-selection:active,
.media-trim-handle:active,
.media-trim-move-handle:active{
  cursor:grabbing!important;
}


/* Trimmer timeline thumbnails: show the full video frame instead of cropping it. */
.media-timeline-frames{
  background:#05080c!important;
}


/* Restore cinematic cropped thumbnails in the trimmer timeline. */
.media-timeline-frames video{
  object-fit:cover!important;
  object-position:center center!important;
  background:#05080c!important;
}

/* Start/End are clock fields; don't force number-input styling assumptions. */
#mediaTrimStartInput,
#mediaTrimEndInput{
  font-variant-numeric:tabular-nums;
}

.unlimited-test-badge{color:#9ee6ae!important;font-weight:700;letter-spacing:.04em}
.user-actions .unlimited-mode-on{border-color:#4f9b62;background:#173a22;color:#c9f5d2}


.credit-summary-bar{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:10px 0 12px;
  padding:10px;
  border:1px solid #2d4055;
  border-radius:9px;
  background:#0b131d;
}
.credit-summary-bar>div{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.credit-summary-bar span{
  font-size:11px;
  color:#92a2b2;
}
.credit-summary-bar strong{
  font-size:16px;
  color:#edf4fb;
  font-variant-numeric:tabular-nums;
}
.unlimited-credit-text{
  color:#ff4d4d!important;
  font-weight:800!important;
  letter-spacing:.04em;
}
@media(max-width:700px){
  .credit-summary-bar{
    grid-template-columns:1fr;
  }
  .credit-summary-bar>div{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

.simple-duration-select-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.simple-duration-select-row label{margin:0}
.simple-duration-select-row select{width:100%}


/* === Mockup-inspired Advanced redesign === */
body.advanced-mode .account-bar{display:none!important;}

/* Generated Results stays on the right */

/* Center is prompts + attached references, not previews */
body.advanced-mode .scene .attached{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}

/* Bottom bar replaces top bar */
body.advanced-mode .panel.wide #status{
  margin:0!important;
  justify-self:center;
}
body.advanced-mode .panel.wide #runBtn{
  padding:12px 18px;
}
body.advanced-mode .advanced-footer-user span{
  font-size:10px;
  color:#8798aa;
  text-transform:uppercase;
}
body.advanced-mode .advanced-footer-user button{
  padding:7px 9px;
}



/* === Mobile-friendly Advanced layout === */
.mobile-advanced-nav{
  display:none;
}

@media(max-width:760px){
  

  body.advanced-mode .mobile-advanced-nav{
    position:sticky;
    top:0;
    z-index:85;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    padding:8px;
    background:#08111b;
    border-bottom:1px solid #24374b;
  }
  body.advanced-mode .mobile-advanced-nav button{
    min-height:44px;
    border:1px solid #2d4258;
    border-radius:9px;
    background:#101b28;
    color:#b8c6d5;
    font-weight:700;
    font-size:13px;
  }
  body.advanced-mode .mobile-advanced-nav button.active{
    background:#1d4f85;
    border-color:#4c8fd1;
    color:#fff;
  }

  

  

  body.advanced-mode .grid > .panel:first-child,
  body.advanced-mode .scenes-workspace{
    width:auto!important;
    min-height:0!important;
    margin:0 0 10px!important;
  }

  /* Mobile sections: show only one major workspace at a time. */
  body.advanced-mode[data-mobile-advanced-section="settings"] .scenes-workspace,
  body.advanced-mode[data-mobile-advanced-section="settings"] #resultsPanel,
  body.advanced-mode[data-mobile-advanced-section="settings"] .results-panel,
  body.advanced-mode[data-mobile-advanced-section="settings"] .generated-results-panel{
    display:none!important;
  }

  body.advanced-mode[data-mobile-advanced-section="scenes"] .grid > .panel:first-child,
  body.advanced-mode[data-mobile-advanced-section="scenes"] #resultsPanel,
  body.advanced-mode[data-mobile-advanced-section="scenes"] .results-panel,
  body.advanced-mode[data-mobile-advanced-section="scenes"] .generated-results-panel{
    display:none!important;
  }

  body.advanced-mode[data-mobile-advanced-section="results"] .grid > .panel:first-child,
  body.advanced-mode[data-mobile-advanced-section="results"] .scenes-workspace{
    display:none!important;
  }

  /* Results become normal page content on mobile. */
  body.advanced-mode #resultsPanel,
  body.advanced-mode .results-panel,
  body.advanced-mode .generated-results-panel{
    inset:auto!important;
  }

  /* Scene editor becomes one clear vertical column. */
  body.advanced-mode .scene{
    margin-bottom:10px!important;
  }
  body.advanced-mode .scene .scenehead{
    margin-bottom:10px!important;
  }
  body.advanced-mode .scene .row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-bottom:8px!important;
  }
  
  body.advanced-mode .scene input,
  body.advanced-mode .scene select,
  body.advanced-mode .scene button{
    min-height:44px;
    font-size:16px;
  }
  
  body.advanced-mode .scene .scenehead-actions button{
    flex:1;
  }
  
  body.advanced-mode .scene .attached{
    gap:8px!important;
  }

  /* Project settings inputs are finger-friendly. */
  body.advanced-mode .grid > .panel:first-child input,
  body.advanced-mode .grid > .panel:first-child select,
  body.advanced-mode .grid > .panel:first-child button{
    min-height:44px;
    font-size:16px;
  }

  /* Bottom credit/generate bar becomes a two-row mobile action tray. */
  body.advanced-mode .panel.wide{
    max-height:124px;
  }
  
  
  
  body.advanced-mode .panel.wide #status,
  body.advanced-mode .panel.wide .advanced-footer-user{
    display:none!important;
  }
  body.advanced-mode .panel.wide .btns{
    width:100%!important;
  }
  body.advanced-mode .panel.wide #runBtn{
    padding:10px 14px!important;
  }

  /* Results cards should not squeeze horizontally. */
  body.advanced-mode .result-card,
  body.advanced-mode .generated-result,
  body.advanced-mode .result-item{
    width:100%!important;
    max-width:none!important;
  }

  /* General touch targets in Advanced mode. */
  body.advanced-mode button,
  body.advanced-mode select{
    touch-action:manipulation;
  }
}

@media(max-width:420px){
  
  body.advanced-mode .credit-summary-bar{
    padding:6px!important;
  }
  body.advanced-mode .mobile-advanced-nav{
    padding:6px;
  }
}


/* ==========================================================
   KINOVI reference-design desktop layout
   ========================================================== */
body.advanced-mode{
  --sidebar-w:210px;
  --settings-w:255px;
  --results-w:385px;
  color:#eaf2fb;
}
body.advanced-mode .advanced-view{
  min-height:100vh;
}
body.advanced-mode .kinovi-sidebar{
  flex-direction:column;
  gap:16px;
  border-right:1px solid #17283a;
  overflow:auto;
}
body.advanced-mode .kinovi-brand,
body.advanced-mode .bottom-kinovi-brand{
  display:flex;align-items:center;gap:8px;
  font-size:21px;letter-spacing:.04em;
}
body.advanced-mode .kinovi-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;border-radius:6px;
  background:linear-gradient(135deg,#00c8ff,#6b37ff 55%,#ff3c83);
  color:#fff;font-size:13px;
}
body.advanced-mode .kinovi-nav{display:grid;gap:6px}
body.advanced-mode .kinovi-nav button{
  display:flex;align-items:center;gap:12px;
  min-height:42px;padding:0 13px;border:0;border-radius:8px;
  background:transparent;color:#e5edf6;text-align:left;font-weight:650;
}
body.advanced-mode .kinovi-nav button.active{
  background:linear-gradient(90deg,#42249b,#28205d);
  color:#c7b6ff;
}
body.advanced-mode .sidebar-project-card,
body.advanced-mode .sidebar-quick-card{
  display:grid;gap:10px;padding:14px;border:1px solid #213447;border-radius:10px;background:#0b1621;
}
body.advanced-mode .sidebar-project-card small,
body.advanced-mode .sidebar-quick-card small{color:#8ea4b9;font-size:10px}
body.advanced-mode .sidebar-project-card>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}
body.advanced-mode .sidebar-project-card button:first-child{
  background:linear-gradient(90deg,#6631e8,#8b37ff);color:white
}
body.advanced-mode .sidebar-quick-card button{
  min-height:34px;border:0;background:transparent;text-align:left;color:#e2ebf4;padding:4px
}

body.advanced-mode .mobile-advanced-nav{display:none!important}
body.advanced-mode .grid{
  grid-template-columns:var(--settings-w) minmax(500px,1fr)!important;
  gap:10px!important;
  align-items:start!important;
}
body.advanced-mode .grid>.panel:first-child{
  position:sticky!important;top:10px!important;
  height:calc(100vh - var(--footer-h) - 20px);
  overflow:auto;
  padding:14px!important;
  background:#0a1520!important;
  border:1px solid #203347!important;
  border-radius:10px!important;
}
body.advanced-mode .grid>.panel:first-child h2:before{content:"⚙  ";color:#8c55ff}
body.advanced-mode .grid>.panel:first-child .row{grid-template-columns:1fr!important;gap:9px!important}
body.advanced-mode .grid>.panel:first-child label{font-size:11px;color:#9db0c2}
body.advanced-mode .grid>.panel:first-child input,
body.advanced-mode .grid>.panel:first-child select{
  min-height:36px;border-radius:7px!important;background:#0a1723!important
}

body.advanced-mode .scenes-workspace>div:first-child{
  min-height:42px;}
body.advanced-mode .scenes-workspace h2{font-size:15px!important}
body.advanced-mode .scene-count-pill{
  margin-left:8px;padding:2px 7px;border:1px solid #6435b8;border-radius:5px;
  color:#b992ff;font-size:10px;font-weight:600
}
body.advanced-mode .scene .scenehead h3{font-size:12px!important}
body.advanced-mode .scene textarea.prompt{padding:8px!important;font-size:12px!important;
  background:#07131e!important;border-radius:6px!important
}
body.advanced-mode .scene input,
body.advanced-mode .scene select{min-height:32px!important;font-size:12px!important}
body.advanced-mode .scene label{font-size:10px!important;color:#8fa5b9!important}
body.advanced-mode .scene .scene-dropzone{min-height:40px!important}
body.advanced-mode .scene .preview,
body.advanced-mode .scene .scene-preview,
body.advanced-mode .scene video{display:none!important}

/* Generated Results column */
body.advanced-mode .result-card,
body.advanced-mode .generated-result,
body.advanced-mode .result-item{
  background:#0a1621!important;border:1px solid #193043!important;border-radius:8px!important;
}

/* Exact-style fixed bottom transaction bar */
body.advanced-mode .panel.wide h2,
body.advanced-mode .panel.wide #log,
body.advanced-mode .panel.wide #status,
body.advanced-mode .panel.wide #dryBtn,
body.advanced-mode .panel.wide #stopBtn{display:none!important}
body.advanced-mode .bottom-kinovi-brand{display:flex!important}
body.advanced-mode .panel.wide #advancedCreditSummary{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:7px!important;
  margin:0!important;padding:0!important;border:0!important;background:transparent!important;
}
body.advanced-mode .panel.wide #advancedCreditSummary>div{
  min-height:52px;padding:7px 12px;border:1px solid #1c3042;border-radius:7px;background:#0b1722
}
body.advanced-mode .panel.wide #advancedCreditSummary span{font-size:10px!important}
body.advanced-mode .panel.wide #advancedCreditSummary strong{font-size:18px!important}
body.advanced-mode .panel.wide .btns{display:block!important;margin:0!important}
body.advanced-mode .panel.wide #runBtn{min-height:52px!important;border:0!important;border-radius:7px!important;
  background:linear-gradient(90deg,#6930e6,#7337ef)!important;color:#fff!important;
  font-size:15px!important;font-weight:800!important
}
body.advanced-mode .advanced-footer-user{
  display:flex!important;align-items:center!important;gap:7px!important;
  min-width:155px;padding-left:8px
}

/* Keep Simple mode untouched. */
.kinovi-sidebar,.bottom-kinovi-brand{display:none}

/* Tablet */
@media(max-width:1250px) and (min-width:761px){
  body.advanced-mode{--sidebar-w:175px;--settings-w:225px;--results-w:315px}
  body.advanced-mode .kinovi-nav button{font-size:12px}
  
  body.advanced-mode .bottom-kinovi-brand{display:none!important}
  
}

/* Phone retains the previously added mobile section navigation. */
@media(max-width:760px){
  
  
  body.advanced-mode .mobile-advanced-nav{display:grid!important}
  
  
  body.advanced-mode .grid>.panel:first-child{position:static!important;height:auto!important}
  
  
  
  body.advanced-mode .bottom-kinovi-brand,
  body.advanced-mode .advanced-footer-user{display:none!important}
  body.advanced-mode .panel.wide #runBtn{width:100%!important;}
}


/* === Scene layout refinement: metadata left of prompt === */

/* First row contains Scene Name + Sequence. Keep both together as a left metadata column. */
body.advanced-mode .scene > .row:nth-of-type(1){
  grid-template-columns:1fr!important;
  align-content:start!important;
}

/* Prompt occupies the large center column. */

/* Mode / From Scene remain to the right of Prompt. */
body.advanced-mode .scene > .row:nth-of-type(2){
  grid-template-columns:1fr!important;
}

/* History is intentionally removed from the redesigned scene UI. */
body.advanced-mode .scene .history,
body.advanced-mode .scene .history-btn,
body.advanced-mode .scene button[title*="History" i]{
  display:none!important;
}


@media(max-width:760px){
  
  body.advanced-mode .scene > .row:nth-of-type(1),
  body.advanced-mode .scene > .row:nth-of-type(2){
    grid-template-columns:1fr!important;
  }
}


/* ==========================================================
   Exact scene field arrangement requested:
   | Scene Name | Prompt | Mode |
   | Sequence   |        | From |
   ========================================================== */
body.advanced-mode .scene{
  column-gap:10px!important;
  row-gap:7px!important;
}

/* LEFT: Scene Name above Sequence */
body.advanced-mode .scene > .row:nth-of-type(1){
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  margin:0!important;
}
body.advanced-mode .scene > .row:nth-of-type(1) > div{
  width:100%!important;
}

/* CENTER: Prompt spans the height of the two side fields */
body.advanced-mode .scene .prompt-wrap{
  grid-area:prompt!important;
  height:100%!important;
  margin:0!important;
}
body.advanced-mode .scene textarea.prompt{
  grid-area:prompt!important;
  margin:0!important;
}

/* RIGHT: Mode above From Scene */
body.advanced-mode .scene > .row:nth-of-type(2){
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  margin:0!important;
}
body.advanced-mode .scene > .row:nth-of-type(2) > div{
  width:100%!important;
}

/* Keep action icons at far right and references underneath the entire row. */
body.advanced-mode .scene .attached,
body.advanced-mode .scene .scene-dropzone{
  grid-area:refs!important;
}

/* Tablet keeps the same three-column concept, just narrower. */

/* Phone stacks fields for usability. */
@media(max-width:760px){
  
  body.advanced-mode .scene > .row:nth-of-type(1),
  body.advanced-mode .scene > .row:nth-of-type(2){
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    margin-bottom:9px!important;
  }
  body.advanced-mode .scene textarea.prompt{
    margin-bottom:9px!important;
  }
}


/* ==========================================================
   FIXED SCENE GRID — semantic wrappers, exact requested layout
   | Scene Name | Prompt | Mode |
   | Sequence   | Prompt | From |
   ========================================================== */
body.advanced-mode .scene{
  grid-template-columns:170px minmax(360px,1fr) 170px 92px!important;
  grid-template-areas:
    "head head head actions"
    "left prompt right actions"
    "refs refs refs refs"!important;
  gap:10px 12px!important;
  align-items:start!important;
}

body.advanced-mode .scene .scenehead{
  grid-area:head!important;
}

body.advanced-mode .scene .scenehead-actions{
  grid-area:actions!important;
  align-self:start!important;
}

body.advanced-mode .scene .scene-field-left{
  grid-template-columns:1fr!important;
  gap:10px!important;
}
body.advanced-mode .scene .scene-field-right{
  grid-template-columns:1fr!important;
  gap:10px!important;
}

body.advanced-mode .scene .scene-prompt-column{
  flex-direction:column!important;
  min-width:0!important;
}
body.advanced-mode .scene .scene-prompt-column .prompt-wrap{
  min-width:0!important;
}
body.advanced-mode .scene .scene-prompt-column textarea.prompt{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  height:108px!important;
  min-height:108px!important;
  max-height:180px!important;
  resize:vertical!important;
}



/* Neutralize older positional rules that targeted row numbers. */
body.advanced-mode .scene > .row:nth-of-type(1),
body.advanced-mode .scene > .row:nth-of-type(2),
body.advanced-mode .scene > .row:nth-of-type(3),
body.advanced-mode .scene > .row:nth-of-type(4){
  grid-area:auto!important;
}

/* Tablet */
@media(max-width:1250px) and (min-width:761px){
  body.advanced-mode .scene{
    grid-template-columns:145px minmax(260px,1fr) 145px 78px!important;
  }
}

/* Mobile */
@media(max-width:760px){
  
  body.advanced-mode .scene .scene-field-left,
  body.advanced-mode .scene .scene-prompt-column,
  body.advanced-mode .scene .scene-field-right,
  body.advanced-mode .scene .scene-reference-area{
    margin-bottom:12px!important;
  }
  body.advanced-mode .scene .scene-prompt-column textarea.prompt{
    min-height:130px!important;
    height:auto!important;
  }
  body.advanced-mode .scene .scenehead-actions{
    margin-top:8px!important;
  }
}

/* Optional safety-limit controls removed from user-facing UI */
body.advanced-mode .optional-safety-limits,
body.advanced-mode [data-section="safety-limits"]{display:none!important;}

/* Removed from user-facing Project Settings */
body.advanced-mode label:has(+ #retries),
body.advanced-mode label:has(+ #maxParallel),
body.advanced-mode #retries,
body.advanced-mode #maxParallel,
body.advanced-mode .retries-field,
body.advanced-mode .max-parallel-field {
  display:none!important;
}

/* Removed advanced controls */
body.advanced-mode #onFailure,
body.advanced-mode #maxJobs,
body.advanced-mode #maxCredits,
body.advanced-mode #maxDollars,
body.advanced-mode .on-failure-field,
body.advanced-mode .max-jobs-field,
body.advanced-mode .max-credits-field,
body.advanced-mode .max-dollars-field{
  display:none!important;
}

/* Removed from Project Settings UI */
body.advanced-mode #seedMode,
body.advanced-mode #seedValue,
body.advanced-mode #maxDollars,
body.advanced-mode .seed-mode-field,
body.advanced-mode .seed-value-field,
body.advanced-mode .max-dollars-field{
  display:none!important;
}


/* Footer user profile dropdown */
body.advanced-mode .footer-user-trigger{
  width:100%;
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:8px;
  min-height:52px;
  padding:6px 8px;
  border:0;
  background:transparent;
  color:#edf4fb;
  text-align:left;
}
body.advanced-mode .footer-user-avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#27384a;
}
body.advanced-mode .footer-user-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
body.advanced-mode .footer-user-copy strong{
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.advanced-mode .footer-user-copy small{
  color:#8fa1b3;
  font-size:10px;
  text-transform:capitalize;
}
body.advanced-mode .footer-user-caret{
  color:#9aabba;
}
body.advanced-mode .footer-user-menu{
  position:absolute;
  right:0;
  width:180px;
  padding:6px;
  border:1px solid #294057;
  border-radius:9px;
  background:#0a1520;
  box-shadow:0 16px 36px rgba(0,0,0,.45);
}
body.advanced-mode .footer-user-menu button{
  width:100%;
  display:block;
  min-height:38px;
  padding:8px 10px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#eaf2fb;
  text-align:left;
}
body.advanced-mode .footer-user-menu button:hover{
  background:#132235;
}


/* Keep Generated Results clear of the user account / transaction footer */

/* Leave room for the account dropdown when it opens upward. */
body.advanced-mode .footer-user-menu{
  bottom:64px!important;
}



/* === FIX: reserve footer space across the entire desktop workspace === */
body.advanced-mode{
  --kinovi-footer-height:78px;
  padding-bottom:var(--kinovi-footer-height)!important;
  box-sizing:border-box!important;
}

/* Main app/workspace cannot extend behind footer. */
body.advanced-mode .advanced-shell,
body.advanced-mode .advanced-layout,
body.advanced-mode .app-shell,
body.advanced-mode main{
  height:calc(100vh - var(--kinovi-footer-height))!important;
  max-height:calc(100vh - var(--kinovi-footer-height))!important;
  box-sizing:border-box!important;
}

/* The entire Generated Results/right column ends ABOVE the footer. */
body.advanced-mode .advanced-results,
body.advanced-mode .results-column,
body.advanced-mode .right-panel,
body.advanced-mode #resultsPanel,
body.advanced-mode .results-panel,
body.advanced-mode .generated-results-panel{
  top:0!important;
  bottom:var(--kinovi-footer-height)!important;
  height:calc(100vh - var(--kinovi-footer-height))!important;
  max-height:calc(100vh - var(--kinovi-footer-height))!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

/* Only the content inside Generated Results scrolls. */
body.advanced-mode .advanced-results .results-scroll,
body.advanced-mode .results-column .results-scroll,
body.advanced-mode #results,
body.advanced-mode .results-list{
  max-height:calc(100vh - var(--kinovi-footer-height) - 75px)!important;
  overflow-y:auto!important;
}

/* Footer/account always remains above workspace content. */
body.advanced-mode .advanced-footer{
  height:var(--kinovi-footer-height)!important;
}

@media(max-width:760px){
  
  body.advanced-mode .advanced-shell,
  body.advanced-mode .advanced-layout,
  body.advanced-mode .app-shell,
  body.advanced-mode main,
  body.advanced-mode .advanced-results,
  body.advanced-mode .results-column,
  body.advanced-mode .right-panel,
  body.advanced-mode #resultsPanel,
  body.advanced-mode .results-panel,
  body.advanced-mode .generated-results-panel{
    height:auto!important;
    max-height:none!important;
    bottom:auto!important;
  }
}


/* === Force bottom bar/account above every panel === */
body.advanced-mode .panel.wide,
body.advanced-mode .advanced-footer,
body.advanced-mode .bottom-bar,
body.advanced-mode .footer-bar{
  position:fixed!important;
  left:10px!important;
  right:10px!important;
  bottom:8px!important;
  z-index:10000!important;
  isolation:isolate!important;
  transform:translateZ(0);
}

/* Ensure account/menu sits above the footer itself */
body.advanced-mode .footer-user-menu-wrap,
body.advanced-mode .advanced-footer-user{
  position:relative!important;
  z-index:10010!important;
}
body.advanced-mode .footer-user-menu{
  z-index:10020!important;
}

/* Explicitly force results and all workspace panels under the footer */
body.advanced-mode #resultsPanel,
body.advanced-mode .results-panel,
body.advanced-mode .generated-results-panel,
body.advanced-mode .right-panel,
body.advanced-mode .results-column,
body.advanced-mode .advanced-results,
body.advanced-mode .wrap,
body.advanced-mode .grid,
body.advanced-mode .scenes-workspace{
  z-index:100!important;
}

/* Prevent any child of results from escaping above the footer */
body.advanced-mode #resultsPanel *,
body.advanced-mode .results-panel *,
body.advanced-mode .generated-results-panel *{
  z-index:auto!important;
}

/* Bottom bar gets an opaque background so content cannot visually bleed through */
body.advanced-mode .panel.wide,
body.advanced-mode .advanced-footer,
body.advanced-mode .bottom-bar,
body.advanced-mode .footer-bar{
  background:#08121d!important;
  box-shadow:0 -6px 24px rgba(0,0,0,.55)!important;
  border-top:1px solid #2c4560!important;
}

/* Max Dollars permanently removed from user-facing UI */

/* Hard removal fallback for any legacy Max Dollars control */
input[placeholder="Max dollars"],
input[placeholder="Max dollar"],
input[aria-label="Max dollars"],
input[aria-label="Max dollar"],
#maxDollars,
#max_dollars,
[name="maxDollars"],
[name="max_dollars"],
.max-dollars-field,
.max-dollar-field {
    display:none!important;
}

/* Public preview: show the real Kinovi editor before signup. */
body.public-preview .advanced-footer-user small { opacity:.8; }
body.public-preview .guest-login-entry { font-weight:700; }

body.guest-preview-mode .footer-user-copy small{color:#f0b85e}
body.guest-preview-mode .guest-preview-login{font-weight:800!important;background:#35256d!important;color:#fff!important}


/* Restore Simple / Advanced mode switch in Advanced mode */
body.advanced-mode .view-mode-switch{
  position:fixed!important;
  top:12px!important;
  right:398px!important;
  z-index:9500!important;
  gap:4px!important;
  padding:4px!important;
  border:1px solid #2a4057!important;
  border-radius:9px!important;
  background:#0a1520!important;
  box-shadow:0 6px 18px rgba(0,0,0,.28)!important;
}
body.advanced-mode .view-mode-switch button{
  min-height:32px!important;
  padding:6px 11px!important;
  border-radius:6px!important;
  font-size:11px!important;
  font-weight:700!important;
}
body.advanced-mode .view-mode-switch button.active{
  background:#5430bb!important;
  color:#fff!important;
}

@media(max-width:1250px) and (min-width:761px){
  body.advanced-mode .view-mode-switch{
    right:325px!important;
  }
}

@media(max-width:760px){
  body.advanced-mode .view-mode-switch{
    position:static!important;
    margin:6px 8px!important;
    width:max-content!important;
  }
}


/* === Mobile Advanced Mode: keep user account visible === */
@media(max-width:760px){
  body.advanced-mode .footer-user-menu-wrap,
  body.advanced-mode .advanced-footer-user{
    position:fixed!important;
    right:10px!important;
    bottom:10px!important;
    min-width:0!important;
    width:44px!important;
    height:44px!important;
    z-index:11000!important;
  }

  body.advanced-mode .footer-user-trigger{
    display:flex!important;
    width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:5px!important;
    border:1px solid #2c4560!important;
    border-radius:50%!important;
    background:#0a1520!important;
    box-shadow:0 5px 18px rgba(0,0,0,.45)!important;
    align-items:center!important;
    justify-content:center!important;
  }

  body.advanced-mode .footer-user-avatar{
    display:flex!important;
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
  }

  /* On phone show just the account icon; details remain in the dropdown. */
  body.advanced-mode .footer-user-copy,
  body.advanced-mode .footer-user-caret{
    display:none!important;
  }

  body.advanced-mode .footer-user-menu{
    display:block;
    position:absolute!important;
    right:0!important;
    bottom:52px!important;
    width:190px!important;
    z-index:11020!important;
  }

  body.advanced-mode .footer-user-menu[hidden]{
    display:none!important;
  }

  /* Keep mobile content from sitting underneath the floating account button. */
  body.advanced-mode{
    padding-bottom:62px!important;
  }
}


/* =========================================================
   User account: always available in phone view, both modes
   ========================================================= */
.mobile-global-account{
  display:none;
}

@media(max-width:760px){
  .mobile-global-account{
    display:block!important;
    position:fixed!important;
    top:8px!important;
    right:8px!important;
    z-index:20000!important;
  }

  .mobile-account-trigger{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    border:1px solid #36516b!important;
    border-radius:50%!important;
    background:#0a1520!important;
    color:#fff!important;
    box-shadow:0 5px 18px rgba(0,0,0,.45)!important;
  }

  .mobile-account-avatar{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    background:#26394c!important;
    font-size:17px!important;
  }

  .mobile-account-menu{
    position:absolute!important;
    top:50px!important;
    right:0!important;
    width:210px!important;
    padding:7px!important;
    border:1px solid #294057!important;
    border-radius:10px!important;
    background:#091520!important;
    box-shadow:0 16px 38px rgba(0,0,0,.55)!important;
    z-index:20010!important;
  }

  .mobile-account-menu[hidden]{
    display:none!important;
  }

  .mobile-account-identity{
    display:flex!important;
    flex-direction:column!important;
    padding:9px 10px 10px!important;
    border-bottom:1px solid #203448!important;
    margin-bottom:5px!important;
  }

  .mobile-account-identity strong{
    font-size:13px!important;
    color:#f2f6fb!important;
  }

  .mobile-account-identity small{
    margin-top:2px!important;
    font-size:10px!important;
    color:#93a7ba!important;
  }

  .mobile-account-menu button{
    display:block!important;
    width:100%!important;
    min-height:40px!important;
    padding:8px 10px!important;
    border:0!important;
    border-radius:6px!important;
    background:transparent!important;
    color:#edf3f9!important;
    text-align:left!important;
  }

  .mobile-account-menu button:hover,
  .mobile-account-menu button:active{
    background:#142438!important;
  }

  .mobile-account-menu .account-menu-section{
    padding-bottom:5px!important;
    margin-bottom:5px!important;
    border-bottom:1px solid #203448!important;
  }

  /* The global phone account replaces the Advanced footer account on phone. */
  body.advanced-mode .footer-user-menu-wrap,
  body.advanced-mode .advanced-footer-user{
    display:none!important;
  }

  /* Top account-bar is too large for phone; global account icon replaces it. */
  .account-bar{
    display:none!important;
  }
}

/* In Advanced mode, mode navigation lives in the user's account dropdown. */
body.advanced-mode .view-mode-switch{
  display:none!important;
}

body.advanced-mode .footer-user-menu .account-menu-section{
  padding-bottom:5px;
  margin-bottom:5px;
  border-bottom:1px solid #203448;
}

body.advanced-mode .footer-user-menu .account-mode-links button{
  font-weight:700;
}

/* Simple mode can retain its normal Simple/Advanced switch on desktop/tablet. */
body:not(.advanced-mode) .view-mode-switch{
  display:flex;
}


/* ==========================================================
   Stable stacked Scene & Prompt workspace
   Matches the approved reference layout:
   Scene header
   Scene Name
   Sequence
   Prompt
   Mode
   From Scene
   Attached references
   ========================================================== */

body.advanced-mode .scene{
  padding:14px!important;
  margin:0 0 12px!important;
  border:1px solid #4d8ed1!important;
  border-radius:9px!important;
  background:#07131e!important;
}

/* Scene heading + Duplicate / Remove buttons */
body.advanced-mode .scene .scenehead{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  margin:0 0 14px!important;
  gap:10px!important;
}

body.advanced-mode .scene .scenehead-actions{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  position:static!important;
  width:auto!important;
}

body.advanced-mode .scene .scenehead-actions button{
  width:auto!important;
  min-height:32px!important;
  padding:5px 8px!important;
}

/* Left metadata becomes full-width stacked fields */
body.advanced-mode .scene .scene-field-left{
  display:block!important;
  width:100%!important;
  margin:0!important;
}

body.advanced-mode .scene .scene-field-left > div{
  display:block!important;
  width:100%!important;
  margin:0 0 12px!important;
}

/* Prompt sits directly under Sequence and spans full width */
body.advanced-mode .scene .scene-prompt-column{
  display:block!important;
  width:100%!important;
  margin:0 0 14px!important;
}

body.advanced-mode .scene .scene-prompt-column .prompt-wrap{
  display:block!important;
  width:100%!important;
}

body.advanced-mode .scene textarea.prompt{
  display:block!important;
  width:100%!important;
  min-height:130px!important;
  height:130px!important;
  max-height:320px!important;
  box-sizing:border-box!important;
  resize:vertical!important;
}

/* Mode and From Scene become full-width stacked fields below Prompt */
body.advanced-mode .scene .scene-field-right{
  display:block!important;
  width:100%!important;
  margin:0!important;
}

body.advanced-mode .scene .scene-field-right > div{
  display:block!important;
  width:100%!important;
  margin:0 0 12px!important;
}

/* All form fields span the scene card */
body.advanced-mode .scene .scene-field-left input,
body.advanced-mode .scene .scene-field-right input,
body.advanced-mode .scene .scene-field-right select{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
}

/* References remain at the bottom, full width */
body.advanced-mode .scene .scene-reference-area{
  display:block!important;
  width:100%!important;
  margin-top:4px!important;
}

body.advanced-mode .scene .scene-reference-area > label{
  display:block!important;
  margin-bottom:6px!important;
}

body.advanced-mode .scene .scene-reference-area .scene-dropzone{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:100%!important;
  min-height:68px!important;
  box-sizing:border-box!important;
  margin:0!important;
}

body.advanced-mode .scene .scene-reference-area .attached{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  width:100%!important;
  min-height:72px!important;
  box-sizing:border-box!important;
  margin-top:10px!important;
}

/* Hide all legacy positional layout remnants so they cannot misalign fields. */
body.advanced-mode .scene > .row,
body.advanced-mode .scene .scene-field-left,
body.advanced-mode .scene .scene-prompt-column,
body.advanced-mode .scene .scene-field-right,
body.advanced-mode .scene .scene-reference-area{
  grid-area:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
  position:static!important;
}

/* The stacked layout remains the same on tablet and phone for reliability. */

@media(max-width:760px){
  body.advanced-mode .scene{
    padding:12px!important;
  }

  body.advanced-mode .scene textarea.prompt{
    min-height:130px!important;
    height:130px!important;
  }

  body.advanced-mode .scene .scenehead-actions{
    flex-shrink:0!important;
  }
}


/* ==========================================================
   FIX: Generated Results must never overlap Scenes & Prompts
   ========================================================== */
body.advanced-mode{
  --kinovi-results-width:305px;
  --kinovi-results-gap:12px;
}

/* Reserve a real right-side lane for Generated Results. */
body.advanced-mode .wrap{
  padding-right:calc(var(--kinovi-results-width) + var(--kinovi-results-gap) + 12px)!important;
}

/* Main grid can only use the space left of the results lane. */
body.advanced-mode .grid{
  box-sizing:border-box!important;
}

/* Scenes workspace must shrink instead of extending beneath results. */

body.advanced-mode .scenes-workspace .scene{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

body.advanced-mode .scenes-workspace input,
body.advanced-mode .scenes-workspace select,
body.advanced-mode .scenes-workspace textarea,
body.advanced-mode .scenes-workspace .scene-dropzone,
body.advanced-mode .scenes-workspace .attached{
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Results owns the reserved lane and cannot intrude leftward. */

/* Slightly wider screens get the original larger results pane. */
@media(min-width:1500px){
  body.advanced-mode{
    --kinovi-results-width:360px;
  }
}

/* Tablet: stop using a fixed side lane before the center becomes too narrow. */
@media(max-width:1180px) and (min-width:761px){
  body.advanced-mode .wrap{
    padding-right:12px!important;
  }

  body.advanced-mode #resultsPanel,
  body.advanced-mode .results-panel,
  body.advanced-mode .generated-results-panel{
    margin-top:12px!important;
  }
}

/* Phone keeps the existing stacked mobile layout. */
@media(max-width:760px){
  body.advanced-mode .wrap{
    padding-right:8px!important;
  }

  
}


/* ==========================================================
   APPROVED CLEAN 3-LANE ADVANCED LAYOUT
   Left: Projects / Current Project / Quick Actions
   Center: Scenes & Prompts
   Right: Generated Results
   Bottom: Generate / credits / account
   ========================================================== */

body.advanced-mode{
  --left-rail:230px;
  --right-rail:340px;
  --rail-gap:12px;
  --footer-h:86px;
  padding:0!important;
  overflow-x:hidden!important;
  background:#06101a!important;
}

/* ---------- LEFT PROJECT RAIL ---------- */
body.advanced-mode .kinovi-sidebar{
  display:flex!important;
  position:fixed!important;
  left:8px!important;
  top:8px!important;
  bottom:calc(var(--footer-h) + 8px)!important;
  width:calc(var(--left-rail) - 16px)!important;
  box-sizing:border-box!important;
  padding:10px!important;
  margin:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  z-index:300!important;
  background:#07111b!important;
  border:1px solid #1e3449!important;
  border-radius:10px!important;
}

/* The old Project Settings panel is preserved but collapsed into the left rail
   space rather than creating another overlapping desktop column. */
body.advanced-mode .grid > .panel:first-child{
  display:none!important;
}

body.advanced-mode .kinovi-sidebar *,
body.advanced-mode .sidebar-project-card *,
body.advanced-mode .sidebar-quick-card *{
  box-sizing:border-box!important;
  max-width:100%!important;
}

body.advanced-mode .sidebar-project-card,
body.advanced-mode .sidebar-quick-card{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}

body.advanced-mode .sidebar-project-card input,
body.advanced-mode .sidebar-project-card select,
body.advanced-mode .sidebar-project-card button,
body.advanced-mode .sidebar-quick-card button{
  width:100%!important;
  min-width:0!important;
}

/* ---------- CENTER SCENES WORKSPACE ---------- */
body.advanced-mode .wrap{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:
    8px
    calc(var(--right-rail) + var(--rail-gap))
    calc(var(--footer-h) + 8px)
    calc(var(--left-rail) + var(--rail-gap))!important;
  box-sizing:border-box!important;
}

body.advanced-mode .grid{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
}

body.advanced-mode .scenes-workspace{
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:calc(100vh - var(--footer-h) - 16px)!important;
  margin:0!important;
  padding:12px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  background:#08131e!important;
  border:1px solid #1f3549!important;
  border-radius:10px!important;
  z-index:100!important;
}

body.advanced-mode .scenes-workspace > div:first-child{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
  margin:0 0 10px!important;
  padding:0 4px 10px!important;
  box-sizing:border-box!important;
  border-bottom:1px solid #183047!important;
}

/* Keep the newly-approved stable vertical scene cards. */
body.advanced-mode .scene{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

/* ---------- RIGHT GENERATED RESULTS RAIL ---------- */
body.advanced-mode #resultsPanel,
body.advanced-mode .results-panel,
body.advanced-mode .generated-results-panel{
  display:block!important;
  position:fixed!important;
  top:8px!important;
  right:8px!important;
  bottom:calc(var(--footer-h) + 8px)!important;
  left:auto!important;
  width:calc(var(--right-rail) - 16px)!important;
  max-width:calc(var(--right-rail) - 16px)!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  z-index:250!important;
  background:#08131e!important;
  border:1px solid #1f3549!important;
  border-radius:10px!important;
}

/* Results controls/cards cannot escape their lane. */
body.advanced-mode #resultsPanel *,
body.advanced-mode .results-panel *,
body.advanced-mode .generated-results-panel *{
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* ---------- BOTTOM ACTION BAR ---------- */
body.advanced-mode .panel.wide{
  display:grid!important;
  position:fixed!important;
  left:8px!important;
  right:8px!important;
  bottom:8px!important;
  height:calc(var(--footer-h) - 16px)!important;
  min-height:calc(var(--footer-h) - 16px)!important;
  grid-template-columns:180px minmax(300px,1fr) auto auto!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
  padding:8px 12px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  z-index:10000!important;
  background:#08121d!important;
  border:1px solid #29435d!important;
  border-radius:10px!important;
  box-shadow:0 -6px 24px rgba(0,0,0,.45)!important;
}

body.advanced-mode .panel.wide .bottom-kinovi-brand{
  display:flex!important;
}

body.advanced-mode .panel.wide #advancedCreditSummary{
  min-width:0!important;
}

body.advanced-mode .panel.wide #runBtn{
  min-width:230px!important;
}

body.advanced-mode .footer-user-menu-wrap{
  display:block!important;
  position:relative!important;
  min-width:150px!important;
  z-index:10020!important;
}

/* ---------- DESKTOP RESPONSIVE ---------- */
@media(max-width:1320px) and (min-width:901px){
  body.advanced-mode{
    --left-rail:205px;
  }

  body.advanced-mode .panel.wide{
    grid-template-columns:140px minmax(250px,1fr) auto auto!important;
  }

  body.advanced-mode .panel.wide #runBtn{
    min-width:190px!important;
  }
}

/* ---------- TABLET / PHONE ----------
   Switch from fixed rails to stacked flow before overlap becomes possible.
*/
@media(max-width:900px){
  body.advanced-mode{
    --footer-h:0px;
    padding:0 0 72px!important;
  }

  body.advanced-mode .kinovi-sidebar{
    display:none!important;
  }

  body.advanced-mode .wrap{
    padding:8px!important;
  }

  body.advanced-mode .scenes-workspace{
    min-height:0!important;
  }

  body.advanced-mode #resultsPanel,
  body.advanced-mode .results-panel,
  body.advanced-mode .generated-results-panel{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:12px 0 0!important;
  }

  body.advanced-mode .panel.wide{
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:auto!important;
    min-height:62px!important;
    grid-template-columns:1fr auto!important;
    border-radius:0!important;
    padding:7px 10px!important;
  }

  body.advanced-mode .panel.wide .bottom-kinovi-brand,
  body.advanced-mode .panel.wide #advancedCreditSummary,
  body.advanced-mode .panel.wide #status{
    display:none!important;
  }

  body.advanced-mode .panel.wide #runBtn{
    width:100%!important;
    min-width:0!important;
  }
}

@media(max-width:760px){
  body.advanced-mode .panel.wide{
    grid-template-columns:1fr!important;
  }

  /* Global phone account control is used here. */
  body.advanced-mode .panel.wide .footer-user-menu-wrap{
    display:none!important;
  }
}


/* ==========================================================
   RESTORE DESKTOP LOAD PROJECTS / PROJECT SETTINGS
   Keep it aligned; do not overlap Scenes & Prompts.
   ========================================================== */
@media(min-width:901px){
  body.advanced-mode{
    --project-settings-width:220px;
  }

  /* Restore the original first grid panel that contains Load Projects/settings. */
  

  /* Every field/button stays inside the restored column. */
  

  

  /* Move Scenes & Prompts right by exactly the restored panel width + gap. */
  

  /* Center scene panel uses only its assigned space. */
  
}

@media(max-width:1320px) and (min-width:901px){
  body.advanced-mode{
    --project-settings-width:195px;
  }
}

/* On tablet/phone the desktop Load Projects column returns to normal flow rules
   rather than becoming another fixed overlay. */


/* ==========================================================
   RESTORE FULL PROJECT SETTINGS IN LEFT DESKTOP COLUMN
   Includes Model, Resolution, Duration, Aspect Ratio,
   Variations, Merge, References, Save/Load project controls.
   ========================================================== */

@media(min-width:901px){
  body.advanced-mode{
    --right-rail:340px;
    --footer-h:86px;
  }

  /* Remove the redundant navigation-style left rail. */
  body.advanced-mode .kinovi-sidebar{
    display:none!important;
  }

  /* Main content starts after the full Project Settings column. */
  body.advanced-mode .wrap{
    padding-right:calc(var(--right-rail) + 12px)!important;
  }

  /* Restore the actual Project Settings panel with all original controls. */
  body.advanced-mode .grid > .panel:first-child{
    height:auto!important;
    margin:0!important;
    z-index:300!important;
  }

  /* Keep every settings control aligned inside the left column. */
  body.advanced-mode .grid > .panel:first-child *,
  body.advanced-mode .grid > .panel:first-child input,
  body.advanced-mode .grid > .panel:first-child select,
  body.advanced-mode .grid > .panel:first-child button{
    box-sizing:border-box!important;
    max-width:100%!important;
  }

  body.advanced-mode .grid > .panel:first-child input,
  body.advanced-mode .grid > .panel:first-child select{
    width:100%!important;
  }

  body.advanced-mode .grid > .panel:first-child .row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
  }

  body.advanced-mode .grid > .panel:first-child .row > div{
    min-width:0!important;
  }

  /* Restore Save / Load project block layout cleanly. */
  

  /* Center Scenes & Prompts now starts after the settings column. */
  body.advanced-mode .scenes-workspace{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  /* Right results remains isolated. */
  body.advanced-mode #resultsPanel,
  body.advanced-mode .results-panel,
  body.advanced-mode .generated-results-panel{
    right:8px!important;
    width:calc(var(--right-rail) - 16px)!important;
    max-width:calc(var(--right-rail) - 16px)!important;
  }
}

/* Slightly narrower desktop */
@media(max-width:1320px) and (min-width:901px){
  body.advanced-mode{
    --left-settings-width:270px;
    --right-rail:310px;
  }

  body.advanced-mode .grid > .panel:first-child .row{
    grid-template-columns:1fr!important;
  }
}

/* Tablet/phone: settings panel returns to normal flow above scenes */
@media(max-width:900px){
  body.advanced-mode .grid > .panel:first-child{
    display:block!important;
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    margin:0 0 12px!important;
    overflow:visible!important;
  }
}


/* ==========================================================
   FULLSCREEN DESKTOP: keep Projects save/load visible
   ========================================================== */
@media(min-width:901px){
  /* Project Settings column is a scroll container. */
  body.advanced-mode .grid > .panel:first-child{
    flex-direction:column!important;
  }

  /* Any existing Projects / Save-Load section stays pinned at the top. */
  body.advanced-mode .grid > .panel:first-child .projects-panel,
  body.advanced-mode .grid > .panel:first-child .project-save-load,
  body.advanced-mode .grid > .panel:first-child .project-management,
  body.advanced-mode .grid > .panel:first-child [data-section="projects"]{
    position:sticky!important;
    top:0!important;
    z-index:40!important;
    flex:0 0 auto!important;
    width:100%!important;
    padding-bottom:10px!important;
    margin-bottom:10px!important;
    background:#08131e!important;
    border-bottom:1px solid #20384f!important;
  }

  /* Fallback for the legacy Projects block when it has no semantic class.
     It is the block containing Project name / Save / Load project / Manage. */
  body.advanced-mode .grid > .panel:first-child .projects{
    position:sticky!important;
    top:0!important;
    z-index:40!important;
    background:#08131e!important;
  }

  /* Ensure project controls are never clipped. */
  body.advanced-mode .grid > .panel:first-child input,
  body.advanced-mode .grid > .panel:first-child select,
  body.advanced-mode .grid > .panel:first-child button{
    min-height:34px!important;
  }
}


/* ==========================================================
   FULLSCREEN LEFT COLUMN:
   Projects save/load section + Project Settings together
   ========================================================== */
@media(min-width:901px){
  body.advanced-mode{
    --left-settings-width:300px;
  }

  

  /* Projects section is visible at the TOP of the same column. */
  

  body.advanced-mode .desktop-projects-title{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    margin-bottom:10px!important;
    font-size:13px!important;
  }

  body.advanced-mode .desktop-projects-block label{
    display:block!important;
    margin:8px 0 5px!important;
    font-size:10px!important;
    color:#9fb2c5!important;
  }

  body.advanced-mode .desktop-projects-block input,
  body.advanced-mode .desktop-projects-block select{
    display:block!important;
    box-sizing:border-box!important;
  }

  body.advanced-mode .desktop-save-project{
    display:block!important;
  }

  body.advanced-mode .desktop-project-note{
    padding:5px 0 3px!important;
    font-size:9px!important;
    color:#8296aa!important;
  }

  body.advanced-mode .desktop-project-actions{
    margin-top:8px!important;
  }

  body.advanced-mode .desktop-project-actions button{
    width:100%!important;
    min-width:0!important;
  }

  /* Do not allow old sticky-project rules to cover Project Settings. */
  body.advanced-mode .grid > .panel:first-child .desktop-projects-block{
    position:relative!important;
    top:auto!important;
    z-index:auto!important;
  }
}

/* Tablet/phone keep the projects block visible in normal flow. */
@media(max-width:900px){
  body.advanced-mode .desktop-projects-block{
    display:block!important;
    width:100%!important;
    margin:0 0 12px!important;
    padding:10px!important;
    box-sizing:border-box!important;
    border:1px solid #284059!important;
    border-radius:9px!important;
  }

  body.advanced-mode .desktop-project-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
}


/* ==========================================================
   APPROVED LEFT COLUMN
   Projects INSIDE the Project Settings column
   ========================================================== */
@media(min-width:901px){
  body.advanced-mode .grid > .panel:first-child{
    display:block!important;
    position:fixed!important;
    left:8px!important;
    top:8px!important;
    bottom:94px!important;
    width:280px!important;
    min-width:280px!important;
    max-width:280px!important;
    padding:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
    background:#08131e!important;
    border:1px solid #284059!important;
    border-radius:10px!important;
  }

  /* Projects is the first section of the SAME left panel. */
  body.advanced-mode .desktop-projects-block{
    display:block!important;
    position:static!important;
    width:auto!important;
    margin:0!important;
    padding:14px 12px!important;
    border:0!important;
    border-bottom:1px solid #284059!important;
    border-radius:0!important;
    background:transparent!important;
    box-sizing:border-box!important;
  }

  /* The original Project Settings content follows Projects. */
  body.advanced-mode .grid > .panel:first-child > h2,
  body.advanced-mode .grid > .panel:first-child > h3,
  body.advanced-mode .grid > .panel:first-child > .row,
  body.advanced-mode .grid > .panel:first-child > label,
  body.advanced-mode .grid > .panel:first-child > input,
  body.advanced-mode .grid > .panel:first-child > select,
  body.advanced-mode .grid > .panel:first-child > button,
  body.advanced-mode .grid > .panel:first-child > .field,
  body.advanced-mode .grid > .panel:first-child > .settings-section{
    margin-left:12px!important;
    margin-right:12px!important;
    max-width:calc(100% - 24px)!important;
    box-sizing:border-box!important;
  }

  body.advanced-mode .desktop-projects-title{
    margin:0 0 10px!important;
    padding:0!important;
    color:#caaeff!important;
    text-transform:uppercase!important;
    letter-spacing:.02em!important;
  }

  body.advanced-mode .desktop-projects-block input,
  body.advanced-mode .desktop-projects-block select{
    width:100%!important;
    min-height:34px!important;
  }

  body.advanced-mode .desktop-save-project{
    width:100%!important;
    min-height:38px!important;
    background:#6f2cf5!important;
    color:#fff!important;
  }

  body.advanced-mode .desktop-project-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  /* Center starts immediately after the unified left column. */
  body.advanced-mode .wrap{
    padding-left:300px!important;
  }
}

@media(max-width:1320px) and (min-width:901px){
  body.advanced-mode .grid > .panel:first-child{
    width:260px!important;
    min-width:260px!important;
    max-width:260px!important;
  }

  body.advanced-mode .wrap{
    padding-left:280px!important;
  }
}


/* Manage Users: three Kinovi API keys + per-user assignment */
.admin-api-keys-panel{
  margin:12px 0;
  padding:12px;
  border:1px solid #294158;
  border-radius:10px;
  background:#091621;
}
.admin-api-keys-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.admin-api-keys-head > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.admin-api-keys-head small{
  color:#8ea2b5;
  font-size:10px;
}
.admin-api-key-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.admin-api-key-row{
  min-width:0;
  padding:9px;
  border:1px solid #20374c;
  border-radius:8px;
}
.admin-api-key-row label{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:6px;
  font-size:11px;
}
.admin-api-key-row label span{
  color:#92a6b8;
  font-size:9px;
}
.admin-api-key-row label span.configured{
  color:#61c98b;
}
.admin-api-key-row input{
  width:100%;
  box-sizing:border-box;
}
.admin-api-key-row > div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:6px;
}
.user-api-key-cell select{
  width:100%;
  min-width:82px;
}
.user-table-head{
  /* Add one column for API key assignment without changing existing behavior. */
}
@media(max-width:900px){
  .admin-api-key-grid{
    grid-template-columns:1fr;
  }
}


/* Browser Library cached tiny previews */
.cached-ref-thumb{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

.cached-video-thumb,
.library-cached-video-thumb{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  cursor:pointer!important;
}

.cached-video-play,
.library-cached-video-thumb > span{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:32px!important;
  height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  background:rgba(4,10,17,.78)!important;
  color:#fff!important;
  pointer-events:none!important;
}

.library-detail-video-poster{
  position:relative!important;
  display:block!important;
  width:100%!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  background:transparent!important;
}

.library-detail-video-poster > span{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  padding:7px 10px!important;
  border-radius:7px!important;
  background:rgba(4,10,17,.8)!important;
  color:#fff!important;
  pointer-events:none!important;
}

.library-detail-audio-launch{
  width:100%!important;
  min-height:70px!important;
}

/* Library grids never instantiate <video> or full-size image elements now. */
.library-browser-thumb video,
.compact-preview video{
  display:none!important;
}


/* Browser Library instant-open support */
.library-modal[hidden],
#libraryModal[hidden],
#referenceLibraryModal[hidden]{
  display:none!important;
}

/* Keep pre-rendered library DOM laid out cheaply while hidden. */
.library-modal[hidden] .library-grid,
#libraryModal[hidden] .library-grid,
#referenceLibraryModal[hidden] .library-grid{
  content-visibility:auto;
  contain:layout style paint;
}

/* Reduce layout cost for large libraries. Individual cards outside viewport
   are skipped until scrolled into view. */
.library-grid > *,
.library-items > *,
.library-card,
.compact-ref-card{
  content-visibility:auto;
  contain-intrinsic-size:180px 150px;
}


/* Attached scene references: cached first-frame preview + click-to-preview */
body.advanced-mode .advanced-attached-media{
  width:100%!important;
  min-height:78px!important;
  overflow:hidden!important;
  border-radius:7px!important;
}

body.advanced-mode .attached-preview-button{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:96px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:7px!important;
  overflow:hidden!important;
  background:#0b1722!important;
}

body.advanced-mode .attached-ref-thumb{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

body.advanced-mode .attached-video-play{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  background:rgba(3,10,17,.78)!important;
  color:#fff!important;
  font-size:14px!important;
  pointer-events:none!important;
  box-shadow:0 3px 12px rgba(0,0,0,.4)!important;
}

body.advanced-mode .attached-preview-button:hover .attached-video-play{
  transform:translate(-50%,-50%) scale(1.07)!important;
}

body.advanced-mode .attached-preview-button.thumb-error{
  min-height:76px!important;
}

body.advanced-mode .attached-preview-button.thumb-error::after{
  content:'Preview unavailable · click to open';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  color:#9fb2c5;
  font-size:10px;
  background:#0b1722;
  text-align:center;
}

body.advanced-mode .attached-audio-preview{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.mention-thumb-wrap{
  position:relative;
  display:inline-block;
}
.mention-video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:9px;
  pointer-events:none;
}


/* Reference preview lightbox supports image, video, and audio */
#refLightboxVideo{
  display:none;
  width:min(92vw,1100px);
  max-height:76vh;
  background:#000;
  border-radius:8px;
}

#refLightboxAudio{
  display:none;
  width:min(86vw,620px);
  margin:24px auto;
}


body.advanced-mode .advanced-attached-ref:hover .attached-ref-thumb{
  filter:brightness(.9);
}

body.advanced-mode .attached-audio-preview{
  min-height:88px!important;
  flex-direction:column!important;
  gap:7px!important;
  border:1px solid #29445d!important;
  border-radius:7px!important;
  background:#0b1722!important;
  color:#dbe7f2!important;
}

body.advanced-mode .attached-audio-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  background:#26394c!important;
  font-size:18px!important;
}

body.advanced-mode .attached-audio-preview:hover,
body.advanced-mode .attached-preview-button:hover{
  outline:1px solid #5a7ea2!important;
}


/* Attached references: separate preview clicks from drag-and-drop */
body.advanced-mode .advanced-attached-ref{
  position:relative!important;
}

body.advanced-mode .advanced-ref-drag-handle{
  position:absolute!important;
  left:5px!important;
  top:5px!important;
  z-index:8!important;
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:6px!important;
  background:rgba(5,14,23,.82)!important;
  color:#a8bbcc!important;
  cursor:grab!important;
  touch-action:none!important;
  user-select:none!important;
}

body.advanced-mode .advanced-ref-drag-handle:active{
  cursor:grabbing!important;
}

body.advanced-mode .attached-preview-button,
body.advanced-mode .attached-audio-preview,
body.advanced-mode .attached-ref-thumb{
  -webkit-user-drag:none!important;
  user-select:none!important;
}

body.advanced-mode .advanced-attached-media{
  cursor:pointer!important;
}


/* Attached references: preview is a direct action, drag only uses ⋮⋮ handle */
body.advanced-mode .advanced-attached-media{
  pointer-events:auto!important;
}

body.advanced-mode .attached-preview-button,
body.advanced-mode .attached-audio-preview,
body.advanced-mode .attached-ref-alias{
  pointer-events:auto!important;
  cursor:pointer!important;
}

body.advanced-mode .attached-ref-alias{
  display:block!important;
  padding:5px 3px!important;
}

#refLightboxVideo[hidden],
#refLightboxAudio[hidden],
#refLightboxImg[hidden]{
  display:none!important;
}

#refLightboxVideo:not([hidden]){
  display:block!important;
  width:min(92vw,1100px)!important;
  max-height:78vh!important;
}

#refLightboxAudio:not([hidden]){
  display:block!important;
  width:min(86vw,650px)!important;
  margin:24px auto!important;
}


.workspace-persistence-note{
  display:block;
  margin-top:2px;
  color:#7890a5;
  font-size:9px;
  font-weight:500;
}


/* Upload / attach pending placeholders */
.kinovi-upload-placeholder{
  position:relative;
  color:#c7d5e2;
}

.kinovi-upload-placeholder-name{
  font-size:10px;
}

.kinovi-upload-placeholder small{
  color:#8298aa;
  font-size:9px;
}


@keyframes kinoviUploadSpin{
  to{transform:rotate(360deg)}
}

/* Match attached-reference card footprint while upload is pending. */
body.advanced-mode .attached .kinovi-upload-placeholder{
  width:150px;
  min-height:118px;
  flex:0 0 150px;
}

/* Browser Library placeholder behaves like a normal library card. */
.library-grid .kinovi-upload-placeholder,
.library-items .kinovi-upload-placeholder{
  min-height:150px;
}

#simpleDrop.uploading{
  position:relative;
  pointer-events:none;
}
#simpleDrop.uploading::after{
  content:'Uploading…';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(7,18,28,.88);
  color:#c7d5e2;
  border-radius:8px;
  font-size:11px;
  z-index:20;
}


/* ==========================================================
   Admin API Control Center
   ========================================================== */
.api-control-center-inner{
  width:min(1180px,96vw);
  max-height:92vh;
  overflow:auto;
  padding:14px;
  border-radius:12px;
  background:#08131e;
  border:1px solid #294158;
}
.api-control-subtitle{
  margin-top:3px;
  font-size:10px;
  color:#879db0;
}
.api-control-explainer{
  margin:10px 0 14px;
  padding:10px;
  border:1px solid #20384d;
  border-radius:8px;
  background:#0a1722;
  color:#9fb3c4;
  font-size:11px;
  line-height:1.45;
}
.api-provider-add-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0;
  padding:12px;
  border:1px solid #31516d;
  border-radius:9px;
  background:#0a1722;
}
.api-provider-add-form input,
.api-provider-add-form select{
  width:100%;
  box-sizing:border-box;
}
.api-providers-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.api-provider-card{
  padding:12px;
  border:1px solid #29445d;
  border-radius:10px;
  background:#091621;
}
.api-provider-card.disabled{
  opacity:.65;
}
.api-provider-head,
.api-provider-key-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.api-provider-head > div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.api-provider-head small,
.api-provider-key-row small{
  color:#8198aa;
  font-size:9px;
}
.api-provider-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.api-provider-endpoints{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:12px 0;
}
.api-provider-endpoints label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:10px;
  color:#9fb3c4;
}
.api-provider-endpoints input{
  width:100%;
  box-sizing:border-box;
}
.api-provider-key-head{
  padding-top:10px;
  border-top:1px solid #20384d;
}
.api-provider-keys{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:8px;
}
.api-provider-key-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto auto auto;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid #20384d;
  border-radius:8px;
}
.api-provider-key-row > div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.api-empty-keys{
  padding:12px;
  color:#8398aa;
  text-align:center;
}
.user-api-route-select{
  min-width:180px!important;
}
@media(max-width:760px){
  .api-provider-add-form,
  .api-provider-endpoints{
    grid-template-columns:1fr;
  }
  .api-provider-key-row{
    grid-template-columns:1fr;
  }
  .api-provider-actions{
    flex-wrap:wrap;
  }
}


.api-provider-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding:8px;
  border:1px solid #20384d;
  border-radius:7px;
  background:#08131e;
  font-size:10px;
  color:#91a7ba;
}
.api-mapping-inner{
  width:min(1050px,96vw);
  max-height:94vh;
  overflow:auto;
  padding:14px;
  border:1px solid #294158;
  border-radius:12px;
  background:#08131e;
}
.api-mapping-section{
  margin:12px 0;
  padding:12px;
  border:1px solid #243e55;
  border-radius:9px;
  background:#091621;
}
.api-mapping-section h3{
  margin:0 0 10px;
  font-size:12px;
}
.api-mapping-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.api-mapping-grid.three{
  grid-template-columns:repeat(3,1fr);
}
.api-mapping-section label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#9eb2c3;
  font-size:10px;
}
.api-mapping-section input,
.api-mapping-section select,
.api-mapping-section textarea{
  width:100%;
  box-sizing:border-box;
}
.api-json-editor{
  min-height:180px;
  margin-top:5px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
  line-height:1.45;
}
.api-template-vars{
  margin-top:7px;
  color:#859bad;
  font-size:10px;
  line-height:1.8;
}
.api-template-vars code{
  padding:2px 4px;
  border-radius:4px;
  background:#142434;
}
.api-mapping-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
@media(max-width:760px){
  .api-mapping-grid,
  .api-mapping-grid.three{
    grid-template-columns:1fr;
  }
  .api-provider-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* Browser Library tabs + media filters */
.library-modal-head-stacked{
  align-items:stretch!important;
  flex-direction:column!important;
  gap:9px!important;
}

.library-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.library-main-tabs{
  display:flex;
  gap:5px;
  padding:3px;
  border:1px solid #294158;
  border-radius:8px;
  background:#08131e;
}

.library-main-tab{
  min-height:30px;
  padding:5px 11px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#91a7ba;
}

.library-main-tab.active{
  background:#253b50;
  color:#fff;
}

.library-result-card{
  cursor:pointer;
}

.library-result-detail-name{
  margin:8px 0;
  font-weight:700;
  word-break:break-word;
}

.library-result-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0;
}

.library-result-meta span{
  padding:4px 6px;
  border:1px solid #294158;
  border-radius:5px;
  font-size:9px;
  color:#9eb2c3;
}

.library-result-prompt{
  max-height:160px;
  overflow:auto;
  margin:8px 0;
  padding:8px;
  border:1px solid #263f55;
  border-radius:7px;
  background:#08131e;
  white-space:pre-wrap;
  font-size:10px;
  line-height:1.4;
}

@media(max-width:760px){
  .library-title-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .library-main-tabs{
    width:100%;
  }

  .library-main-tab{
    flex:1;
  }
}


.library-generated-alias,
.library-generated-type{
  padding:8px 9px;
  border:1px solid #294158;
  border-radius:7px;
  background:#08131e;
  color:#b9cad8;
  font-size:10px;
}

.library-main-tab + .library-main-tab{
  margin-left:2px;
}

/* Generated-result references use the exact same selected-card visual treatment. */
.library-browser-card.selected-ref{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

/* Browser Library Generated Results card sizing fix */
#libraryModal #libraryModalGrid .library-result-card{
 position:relative!important;display:flex!important;flex-direction:column!important;
 width:100%!important;min-width:0!important;overflow:hidden!important
}
#libraryModal #libraryModalGrid .library-result-card .library-browser-thumb{display:block!important;}
#libraryModal #libraryModalGrid .library-result-card .library-cached-video-thumb,
#libraryModal #libraryModalGrid .library-result-card .library-cached-image-thumb{
 display:block!important;width:100%!important;height:100%!important;min-height:104px!important;overflow:hidden!important
}
#libraryModal #libraryModalGrid .library-result-card .cached-ref-thumb{
 display:block!important;width:100%!important;height:100%!important;min-height:104px!important;object-fit:cover!important
}
#libraryModal #libraryModalGrid .library-result-card .library-browser-name{
 flex:0 0 32px!important;width:100%!important;min-height:32px!important;padding:4px 6px!important;overflow:hidden!important
}
@media(max-width:900px){
 
 
 #libraryModal #libraryModalGrid .library-result-card .cached-ref-thumb{min-height:0!important}
}


/* Generated Results media fix:
   cache JPEGs are posters only; actual video files are the playable media. */
.generated-library-video,
.generated-library-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#05080c!important;
}
.generated-library-video{position:absolute!important;inset:0!important}
.generated-library-image{position:absolute!important;inset:0!important;object-fit:cover!important;cursor:pointer}
.generated-detail-video,
.generated-detail-image{
  display:block!important;
  width:100%!important;
  max-height:340px!important;
  object-fit:contain!important;
  background:#000!important;
}
.native-result-video-wrap,
.generated-image-preview{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#05080c;
}
.native-result-video,
.generated-image-preview>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#05080c;
}


/* ==========================================================
   Optimized Generated Result media
   - cached thumbnail/poster is rendered immediately
   - MP4 is created only while hovering
   - selected/full-screen result uses the actual media file
   ========================================================== */
.hover-video-preview{
  position:relative!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
  background:#05080c!important;
  cursor:pointer!important;
}
.hover-video-preview .result-first-frame{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  background:#05080c!important;
}
.hover-video-preview .hover-preview-video{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#05080c!important;
  opacity:0!important;
  transition:opacity .12s ease!important;
}
.hover-video-preview .hover-preview-video.hover-preview-ready{
  opacity:1!important;
}
.hover-video-preview .hover-video-placeholder{
  z-index:4!important;
  pointer-events:none!important;
}
.hover-video-preview .hover-video-placeholder.hover-preview-active{
  background:transparent!important;
}
.hover-video-preview .hover-video-placeholder.hover-preview-active .hover-play-icon,
.hover-video-preview .hover-video-placeholder.hover-preview-active small{
  opacity:0!important;
}

#libraryModal #libraryModalGrid .library-result-card{
  height:auto!important;
  min-height:0!important;
}
#libraryModal #libraryModalGrid .library-result-card .library-browser-thumb{
  position:relative!important;
  flex:none!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
  background:#05080c!important;
}
#libraryModal #libraryModalGrid .library-generated-hover{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
}
#libraryModal #libraryModalGrid .generated-library-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.optimized-result-image{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#05080c;
  cursor:pointer;
}
.optimized-result-image>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* old eager/native result media wrappers are no longer used */
.native-result-video-wrap{display:none!important}


/* Full generated-result preview must always render above Browser Library. */
.result-video-lightbox{
  z-index:12000!important;
}
body.video-preview-open #libraryModal{
  z-index:9000!important;
}


/* Advanced Projects: keep Start Over in normal flow below Load/Manage. */
body.advanced-mode .desktop-projects-block .advanced-start-over-btn{
  display:block!important;
  position:static!important;
  float:none!important;
  clear:both!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  margin:12px 0 0 0!important;
  box-sizing:border-box!important;
  transform:none!important;
}

body.advanced-mode .desktop-projects-block .desktop-project-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  width:100%!important;
  margin:8px 0 0 0!important;
  position:static!important;
  float:none!important;
  box-sizing:border-box!important;
}

body.advanced-mode .desktop-projects-block .desktop-project-actions + .advanced-start-over-btn{
  margin-top:12px!important;
}

body.advanced-mode .desktop-save-actions,
body.advanced-mode .project-save-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  width:100%!important;
  box-sizing:border-box!important;
}
body.advanced-mode .desktop-save-actions{margin-top:8px!important;}
body.advanced-mode .desktop-save-actions button,
body.advanced-mode .project-save-actions button{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body.advanced-mode .desktop-save-project{margin-top:0!important;}

/* Audio waveforms in References and Generated Results */
.audio-waveform{
  display:block;
  width:100%;
  height:78px;
  min-height:42px;
  color:#9fb1c4;
  --waveform-color:#9fb1c4;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  border-radius:7px;
}
.audio-waveform-button,
.generated-audio-waveform,
.library-detail-audio-launch.audio-detail-waveform,
.attached-audio-preview{
  width:100%;
}
.audio-preview.audio-waveform-button{
  height:135px;
  padding:12px;
  background:#090909;
  border:0;
  border-radius:0;
}
.audio-preview.audio-waveform-button .audio-waveform{height:100%}
.library-waveform{height:92px}
.library-generated-audio{
  width:100%;
  height:100%;
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:9px;
  box-sizing:border-box;
  cursor:pointer;
}
.library-generated-audio span,
.generated-audio-play{
  font-size:11px;
  opacity:.82;
}
.library-detail-waveform{height:110px}
.library-detail-audio-launch.audio-detail-waveform{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
}
.attached-audio-preview{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:7px;
}
.attached-audio-waveform{height:54px}
.generated-audio-waveform{
  min-height:170px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:14px;
  box-sizing:border-box;
  background:#070b10;
}
.generated-result-waveform{height:120px}
.result-ref-audio .result-reference-waveform{
  width:100%;
  height:42px;
  min-height:42px;
}
.result-ref-audio{padding:2px!important}
.waveform-failed{opacity:.65}

/* Interactive waveform audio player */
.waveform-audio-player{
  width:min(900px,88vw);
  min-width:min(620px,88vw);
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  box-sizing:border-box;
  border:1px solid #284059;
  border-radius:12px;
  background:#07101a;
}
.waveform-audio-player[hidden]{display:none!important}
.waveform-player-play{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.waveform-player-main{
  min-width:0;
  flex:1;
}
.waveform-player-canvas-wrap{
  position:relative;
  height:118px;
  overflow:hidden;
  cursor:pointer;
  border-radius:8px;
  background:#05090e;
  user-select:none;
}
.player-waveform{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.waveform-player-progress{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  pointer-events:none;
  background:rgba(130,160,195,.14);
  border-right:1px solid rgba(210,230,255,.55);
}
.waveform-player-playhead{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:1px;
  pointer-events:none;
  background:rgba(235,245,255,.88);
}
.waveform-player-footer{
  display:flex;
  justify-content:space-between;
  padding-top:6px;
  font-variant-numeric:tabular-nums;
  font-size:11px;
  color:#9fb1c4;
}
.waveform-player-volume{
  flex:0 0 120px;
  display:flex;
  align-items:center;
  gap:6px;
}
.waveform-player-volume input{
  width:88px;
}
@media(max-width:700px){
  .waveform-audio-player{
    min-width:0;
    width:92vw;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:10px;
    padding:12px;
  }
  .waveform-player-volume{
    grid-column:1 / -1;
    width:100%;
  }
  .waveform-player-volume input{width:100%}
  .waveform-player-canvas-wrap{height:92px}
}

/* Browse Library incremental/infinite scrolling */
.library-scroll-sentinel{
  grid-column:1 / -1;
  width:100%;
  box-sizing:border-box;
  padding:16px 10px 20px;
  text-align:center;
  font-size:12px;
  color:#91a3b7;
  opacity:.9;
}

.queue-final-timer{font-variant-numeric:tabular-nums;color:#9fb1c4;font-size:11px;font-weight:600}

/* Main Generated Results audio preview */
.result-media .generated-audio-waveform{
  position:relative;
  z-index:2;
  pointer-events:auto;
  cursor:pointer;
}
.result-media .generated-audio-waveform .audio-waveform{
  pointer-events:none;
}
.result-media .generated-audio-play{
  pointer-events:none;
}


/* ==========================================================
   Browser Library Generated Results: fixed cards + true scroll
   Keep result cards at a stable size and scroll the results pane.
   ========================================================== */
#libraryModal .library-browser-body{
  min-height:0!important;
  overflow:hidden!important;
}
#libraryModal.generated-results-view .library-browser-body{
  min-height:0!important;
  overflow:hidden!important;
}
#libraryModal.generated-results-view #libraryModalGrid{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-content:start!important;
  align-items:start!important;
  grid-auto-flow:row!important;
  grid-auto-rows:150px!important;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#libraryModal.generated-results-view #libraryModalGrid .library-result-card{
  align-self:start!important;
  width:100%!important;
  height:150px!important;
  min-height:150px!important;
  max-height:150px!important;
  overflow:hidden!important;
  flex-shrink:0!important;
}
#libraryModal.generated-results-view #libraryModalGrid .library-result-card .library-browser-thumb{
  position:relative!important;
  display:block!important;
  flex:0 0 114px!important;
  width:100%!important;
  height:114px!important;
  min-height:114px!important;
  max-height:114px!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
}
#libraryModal.generated-results-view #libraryModalGrid .library-result-card .library-cached-video-thumb,
#libraryModal.generated-results-view #libraryModalGrid .library-result-card .library-cached-image-thumb,
#libraryModal.generated-results-view #libraryModalGrid .library-result-card .generated-library-video,
#libraryModal.generated-results-view #libraryModalGrid .library-result-card .generated-library-image,
#libraryModal.generated-results-view #libraryModalGrid .library-result-card .cached-ref-thumb{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
}
#libraryModal.generated-results-view #libraryModalGrid .library-result-card .library-browser-name{
  flex:0 0 36px!important;
  width:100%!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:4px 6px!important;
  overflow:hidden!important;
}
#libraryModal.generated-results-view #libraryModalGrid .library-scroll-sentinel{
  grid-column:1/-1!important;
  min-height:44px!important;
  height:44px!important;
  display:grid!important;
  place-items:center!important;
}
@media(max-width:900px){
  #libraryModal.generated-results-view #libraryModalGrid{
    grid-auto-rows:auto!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #libraryModal.generated-results-view #libraryModalGrid .library-result-card{
    height:auto!important;
    min-height:210px!important;
    max-height:none!important;
  }
  #libraryModal.generated-results-view #libraryModalGrid .library-result-card .library-browser-thumb{
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4/3!important;
  }
  #libraryModal.generated-results-view #libraryModalGrid .library-result-card .library-browser-name{
    flex:0 0 auto!important;
    height:auto!important;
    min-height:46px!important;
    max-height:none!important;
  }
}

/* Public Home + Pricing pages */
body.marketing-page{padding:0!important;margin:0!important;min-height:100vh;background:#07101a;color:#eef5fc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
.marketing-page *{box-sizing:border-box}.marketing-page a{text-decoration:none;color:inherit}
.marketing-nav{height:72px;display:flex;align-items:center;gap:34px;padding:0 clamp(22px,5vw,72px);border-bottom:1px solid #1b2b3c;background:rgba(7,16,26,.92);position:sticky;top:0;z-index:100;backdrop-filter:blur(14px)}
.marketing-brand{display:flex;align-items:center;gap:9px;font-size:18px;letter-spacing:.11em}.marketing-brand .kinovi-mark{color:#65aef7;font-size:16px}.marketing-nav nav{display:flex;gap:8px;margin-right:auto}.marketing-nav nav a{padding:9px 13px;border-radius:8px;color:#94a7ba;font-size:13px;font-weight:600}.marketing-nav nav a:hover,.marketing-nav nav a.active{color:#f5f9fd;background:#111f2e}.marketing-actions{display:flex;gap:9px;align-items:center}.marketing-link-btn,.marketing-primary-btn{padding:10px 15px;border-radius:9px;font-size:12px;font-weight:700}.marketing-link-btn{border:1px solid #263c51;color:#b9c9d9}.marketing-primary-btn{background:#2376c8;border:1px solid #398dde;color:white!important;box-shadow:0 8px 25px rgba(35,118,200,.2)}
.marketing-main{width:min(1180px,calc(100% - 36px));margin:0 auto}.kinovi-hero{min-height:610px;display:grid;grid-template-columns:1.03fr .97fr;gap:54px;align-items:center;position:relative;padding:72px 0 76px}.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.18}.hero-glow-a{width:390px;height:390px;background:#1878da;left:-180px;top:40px}.hero-glow-b{width:300px;height:300px;background:#5a46d6;right:-80px;bottom:30px}.hero-copy,.hero-product-card{position:relative;z-index:1}.hero-kicker,.section-heading>span,.pricing-hero>span,.rate-head span,.marketing-cta span{color:#6fb9ff;font-weight:800;font-size:11px;letter-spacing:.16em}.hero-copy h1{font-size:clamp(42px,5vw,67px);line-height:1.02;letter-spacing:-.047em;margin:16px 0 20px;max-width:670px}.hero-copy>p{font-size:17px;line-height:1.7;color:#9fb1c4;max-width:620px}.hero-actions{display:flex;gap:11px;margin:30px 0 25px}.hero-primary,.hero-secondary{display:inline-flex;align-items:center;gap:11px;border-radius:10px;padding:13px 18px;font-size:13px;font-weight:800}.hero-primary{background:linear-gradient(135deg,#247fd7,#1d64b3);border:1px solid #4a9cea;box-shadow:0 12px 35px rgba(31,119,203,.25)}.hero-secondary{background:#0d1925;border:1px solid #263a4e;color:#c5d3df!important}.hero-proof{display:flex;flex-wrap:wrap;gap:18px;color:#8195a9;font-size:11px}.hero-proof span::first-letter{color:#5fb9ff}
.hero-product-card{border:1px solid #2b445c;background:#09131e;border-radius:16px;box-shadow:0 32px 75px rgba(0,0,0,.42);overflow:hidden;transform:perspective(1200px) rotateY(-3deg) rotateX(1deg)}.product-card-top{height:42px;border-bottom:1px solid #213447;background:#0d1925;display:flex;align-items:center;gap:6px;padding:0 13px}.product-card-top>span{width:7px;height:7px;border-radius:50%;background:#405367}.product-card-top b{margin-left:8px;font-size:9px;color:#9db1c4;font-weight:600}.product-card-body{display:grid;grid-template-columns:42px 1fr;min-height:340px}.product-mini-sidebar{border-right:1px solid #192a3b;background:#08111a;display:flex;align-items:center;flex-direction:column;gap:12px;padding-top:17px}.product-mini-sidebar i{display:block;width:18px;height:18px;border:1px solid #29435c;border-radius:4px}.product-mini-sidebar i:first-child{background:#1e629d;border-color:#4d91cc}.product-canvas{padding:18px}.product-frame{height:190px;position:relative;overflow:hidden;border:1px solid #28425a;border-radius:10px;background:#102234}.frame-sky{position:absolute;inset:0 0 44% 0;background:linear-gradient(#294b6b,#52718a)}.frame-land{position:absolute;inset:56% 0 0;background:linear-gradient(165deg,#806a49 0 46%,#1c4f63 47% 62%,#a78458 63%)}.product-frame span{position:absolute;left:11px;bottom:9px;padding:5px 8px;border-radius:6px;background:rgba(4,12,20,.75);font-size:9px}.product-prompt{margin-top:13px;padding:11px;border-radius:8px;background:#0c1925;border:1px solid #22384d;display:grid;gap:5px}.product-prompt b{font-size:9px;color:#88a0b8}.product-prompt em{font-size:10px;color:#c5d4e2;font-style:normal}.product-chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.product-chips span{font-size:8px;padding:5px 7px;border:1px solid #2e4c68;border-radius:6px;color:#89bbed;background:#0c1d2d}
.feature-section{padding:90px 0}.section-heading{text-align:center;max-width:720px;margin:0 auto 42px}.section-heading h2,.pricing-hero h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.035em;margin:12px 0}.section-heading p,.pricing-hero p{color:#8fa2b6;line-height:1.7;font-size:15px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature-grid article{padding:27px 24px;border-radius:14px;border:1px solid #1d3144;background:linear-gradient(145deg,#0c1824,#09131d);min-height:205px;transition:.18s ease}.feature-grid article:hover{transform:translateY(-3px);border-color:#315a7e}.feature-icon{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:#102a40;border:1px solid #285274;color:#70baff;font-size:18px}.feature-grid h3{font-size:16px;margin:18px 0 9px}.feature-grid p{margin:0;color:#8296aa;font-size:12px;line-height:1.65}.workflow-strip{margin:28px 0 100px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:18px;align-items:center;padding:27px;border:1px solid #1e3347;border-radius:15px;background:#0a151f}.workflow-strip>div{display:grid;gap:5px}.workflow-strip>div span{color:#509fe9;font-size:10px;font-weight:800}.workflow-strip>div strong{font-size:14px}.workflow-strip>div p{font-size:10px;color:#7f93a8;margin:0}.workflow-strip>b{color:#36516a}.marketing-cta{margin:0 0 85px;padding:40px 42px;border:1px solid #2b4f70;border-radius:17px;background:radial-gradient(circle at 85% 15%,rgba(43,116,183,.25),transparent 32%),linear-gradient(135deg,#0e1d2b,#0a1621);display:flex;justify-content:space-between;align-items:center;gap:30px}.marketing-cta h2{font-size:30px;letter-spacing:-.03em;margin:8px 0}.marketing-cta p{color:#8ea2b5;margin:0}.marketing-cta>a{white-space:nowrap;padding:13px 18px;border-radius:9px;background:#2376c8;border:1px solid #4a95d9;font-size:12px;font-weight:800}.marketing-footer{min-height:90px;border-top:1px solid #192b3c;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1180px)/2));color:#70869a;font-size:11px}.marketing-footer>span{font-weight:800;letter-spacing:.1em}.marketing-footer div{display:flex;gap:22px}.marketing-footer a:hover{color:#b8c8d7}
.pricing-main{padding-top:0}.pricing-hero{text-align:center;max-width:820px;margin:0 auto;padding:78px 0 54px}.pricing-hero h1{font-size:clamp(38px,5vw,58px)}.pricing-hero .hero-primary{margin-top:18px}.pricing-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:72px}.pricing-summary-card{padding:27px;border:1px solid #20364b;border-radius:14px;background:#0a1621}.pricing-summary-card.featured{border-color:#326795;background:linear-gradient(145deg,#0f2233,#0a1621)}.pricing-label{font-size:9px;font-weight:800;color:#62adf1;letter-spacing:.14em}.pricing-summary-card h2{font-size:19px;margin:12px 0 9px}.pricing-summary-card p{color:#8da0b3;font-size:12px;line-height:1.6;min-height:58px}.pricing-note{margin-top:18px;padding-top:14px;border-top:1px solid #1e3143;color:#6f859a;font-size:10px}.rate-section{margin-bottom:65px}.rate-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:15px}.rate-head h2{font-size:27px;margin:7px 0 0}.rate-head>small{color:#6f8599;font-size:10px}.rate-table-wrap{border:1px solid #20364a;border-radius:13px;overflow:hidden;background:#09141e}.rate-table{width:100%;border-collapse:collapse}.rate-table th,.rate-table td{padding:16px 18px;text-align:right;border-bottom:1px solid #192d40;font-size:12px}.rate-table th:first-child,.rate-table td:first-child{text-align:left}.rate-table th{background:#0d1b28;color:#71889e;text-transform:uppercase;letter-spacing:.08em;font-size:9px}.rate-table td{color:#b8cadb}.rate-table tbody tr:last-child td{border-bottom:0}.fixed-rate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.fixed-rate-grid article{padding:22px;border:1px solid #20364a;border-radius:13px;background:#0a1621}.fixed-rate-grid article>span{font-size:8px;letter-spacing:.12em;color:#5faef4;font-weight:800}.fixed-rate-grid h3{margin:10px 0 5px;font-size:15px}.fixed-rate-grid p{font-size:10px;color:#7e93a7;min-height:24px}.fixed-rate-grid strong{font-size:24px;display:block;margin-top:17px}.fixed-rate-grid strong small{font-size:9px;color:#71879b;font-weight:600}.pricing-info{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:15px 0 75px}.pricing-info>div{padding:23px 0;border-top:1px solid #243a4e}.pricing-info h3{font-size:14px}.pricing-info p{font-size:11px;line-height:1.65;color:#8195a9}
@media(max-width:850px){.marketing-nav{gap:15px;padding:0 18px}.marketing-nav nav{display:none}.marketing-actions .marketing-link-btn{display:none}.kinovi-hero{grid-template-columns:1fr;padding:58px 0}.hero-copy h1{font-size:44px}.hero-product-card{transform:none}.feature-grid,.pricing-summary-grid,.pricing-info{grid-template-columns:1fr 1fr}.fixed-rate-grid{grid-template-columns:1fr 1fr}.workflow-strip{grid-template-columns:1fr 1fr}.workflow-strip>b{display:none}.marketing-cta{align-items:flex-start;flex-direction:column}.marketing-footer{padding:0 20px}}
@media(max-width:560px){.marketing-main{width:min(100% - 24px,1180px)}.marketing-brand strong{font-size:14px}.marketing-primary-btn{padding:9px 11px}.hero-copy h1{font-size:37px}.hero-copy>p{font-size:14px}.hero-proof{display:grid;gap:8px}.feature-grid,.pricing-summary-grid,.pricing-info,.fixed-rate-grid,.workflow-strip{grid-template-columns:1fr}.kinovi-hero{gap:35px}.product-card-body{min-height:290px}.product-frame{height:150px}.marketing-cta{padding:28px 23px}.rate-table th,.rate-table td{padding:13px 9px;font-size:10px}.marketing-footer{flex-direction:column;justify-content:center;gap:12px}}

/* ==========================================================
   Browser Library Generated Results virtualization
   Render only cards near the visible viewport.
   ========================================================== */
#libraryModal.generated-results-view #libraryModalGrid{
  display:block!important;
  position:relative!important;
  padding:0!important;
}
#libraryModal.generated-results-view #libraryModalGrid .generated-virtual-canvas{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
}
#libraryModal.generated-results-view #libraryModalGrid .generated-virtual-slot{
  position:absolute!important;
  overflow:hidden!important;
}
#libraryModal.generated-results-view #libraryModalGrid .generated-virtual-slot > .library-result-card{
  width:100%!important;
  height:150px!important;
  min-height:150px!important;
  max-height:150px!important;
  box-sizing:border-box!important;
}
@media(max-width:900px){
  #libraryModal.generated-results-view #libraryModalGrid{
    display:block!important;
  }
  #libraryModal.generated-results-view #libraryModalGrid .generated-virtual-slot > .library-result-card{
    height:150px!important;
    min-height:150px!important;
    max-height:150px!important;
  }
}

/* Generation queue controls */
.generation-queue-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.generation-queue-actions button:disabled{opacity:.55;cursor:wait}
.queue-refresh-stamp{font-size:7px!important;color:var(--muted);opacity:.85}


/* Kinovi Browser Library upload placeholder */
.kinovi-upload-placeholder{
  min-height:145px;
  border:1px dashed rgba(127,127,127,.55);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px;
  text-align:center;
  box-sizing:border-box;
  background:rgba(127,127,127,.06);
}
.kinovi-upload-spinner{
  width:34px;
  height:34px;
  border:4px solid rgba(127,127,127,.28);
  border-top-color:currentColor;
  border-radius:50%;
  animation:kinovi-upload-spin .75s linear infinite;
}
.kinovi-upload-placeholder-name{
  width:100%;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.kinovi-upload-placeholder small{opacity:.72}
@keyframes kinovi-upload-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kinovi-upload-spinner{animation-duration:1.5s}}


/* Scene batch-skip control */
.scene-skip-toggle{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#18212d;color:var(--muted)!important;font-size:10px!important;cursor:pointer;white-space:nowrap}
.scene-skip-toggle input{width:auto!important;margin:0!important;accent-color:var(--accent)}
.scene.scene-skipped{opacity:.58;border-style:dashed!important}
.scene.scene-skipped .scenehead strong::after{content:" · skipped";color:var(--muted);font-weight:500;font-size:11px}
.scene.scene-skipped .scene-prompt-column,.scene.scene-skipped .scene-field-left,.scene.scene-skipped .scene-field-right,.scene.scene-skipped .scene-reference-area{filter:saturate(.55)}
body.advanced-mode .scenehead-actions .scene-skip-toggle{min-height:31px!important;padding:4px 7px!important}

.duration-limit-hint {
  margin-left: 6px;
  font-size: 0.78em;
  font-weight: 500;
  opacity: 0.65;
  white-space: nowrap;
}

/* Advanced scene ordering controls */
body.advanced-mode .scenehead-actions .move-scene-up,
body.advanced-mode .scenehead-actions .move-scene-down{
  min-width:32px!important;
  padding-left:8px!important;
  padding-right:8px!important;
  font-size:14px!important;
  line-height:1!important;
}
@media(max-width:1100px){
  body.advanced-mode .scene .scenehead{
    align-items:flex-start!important;
  }
  body.advanced-mode .scene .scenehead-actions{
    flex-wrap:wrap!important;
  }
}

/* Upscale source-vs-result comparison */
.upscale-compare-modal[hidden]{display:none!important}
.upscale-compare-modal{position:fixed;inset:0;z-index:260;background:rgba(3,7,12,.86);display:flex;align-items:center;justify-content:center;padding:24px}
.upscale-compare-inner{width:min(1180px,96vw);max-height:94vh;overflow:auto;background:#0c141d;border:1px solid #33485f;border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.5);padding:14px}
.upscale-compare-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.upscale-compare-head>div{display:flex;flex-direction:column;gap:3px}.upscale-compare-head strong{font-size:16px}.upscale-compare-head span{font-size:10px;color:var(--muted)}
.upscale-compare-close{font-size:24px!important;line-height:1;width:34px;height:34px;padding:0!important;border-radius:50%!important}
.upscale-compare-names{display:flex;justify-content:space-between;gap:14px;font-size:10px;color:#aebed0;margin:0 2px 8px}.upscale-compare-names span{min-width:0;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upscale-compare-names em{font-style:normal;color:#dce7f3}
.upscale-compare-stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;user-select:none;touch-action:none}
.upscale-compare-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;pointer-events:none}
.upscale-compare-before-layer{position:absolute;inset:0;clip-path:inset(0 50% 0 0);pointer-events:none}
.upscale-compare-label{position:absolute;top:14px;z-index:5;padding:6px 10px;border-radius:999px;background:rgba(10,17,25,.78);font-size:11px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none}.upscale-compare-label.before{left:14px}.upscale-compare-label.after{right:14px}
.upscale-compare-divider{position:absolute;z-index:6;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 6px rgba(0,0,0,.65)}
.upscale-compare-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;color:#14202d;display:grid;place-items:center;font-size:18px;font-weight:700;box-shadow:0 3px 12px rgba(0,0,0,.4)}
.upscale-compare-split{position:absolute;z-index:7;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.upscale-compare-controls{display:grid;grid-template-columns:auto minmax(160px,1fr) auto auto auto;gap:9px;align-items:center;margin-top:10px}.upscale-compare-controls input[type=range]{width:100%}.upscale-compare-controls span{font-size:10px;color:#a9bacb;white-space:nowrap}.upscale-compare-controls a{white-space:nowrap}.before-after-result-btn{white-space:nowrap}
body.upscale-compare-open{overflow:hidden}
@media(max-width:760px){.upscale-compare-modal{padding:8px}.upscale-compare-inner{width:100%;padding:10px}.upscale-compare-controls{grid-template-columns:auto 1fr auto}.upscale-compare-controls a{grid-row:2}.upscale-compare-names{display:none}}
.upscaled-result-badge{font-weight:700;color:#dcecff!important;border-color:#4b6f93!important;background:rgba(76,123,168,.14)!important}

/* Dedicated upscale preview workspace */
.upscale-workspace-modal[hidden]{display:none!important}
.upscale-workspace-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:100000!important;background:rgba(3,7,12,.92);display:flex;align-items:flex-start;justify-content:center;padding:12px;overflow:auto;box-sizing:border-box}
.upscale-workspace-inner{width:min(1400px,calc(100vw - 24px));max-width:calc(100vw - 24px);min-width:0;max-height:none;overflow:visible;background:#0c141d;border:1px solid #33485f;border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.55);padding:16px;margin:auto;box-sizing:border-box}
.upscale-workspace-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.upscale-workspace-head>div{display:flex;flex-direction:column;gap:3px}.upscale-workspace-head strong{font-size:18px}.upscale-workspace-head span{font-size:11px;color:var(--muted);max-width:900px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upscale-workspace-close{font-size:24px!important;width:36px;height:36px;padding:0!important;border-radius:50%!important}
.upscale-workspace-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.upscale-workspace-panel{background:#091019;border:1px solid #26394c;border-radius:13px;padding:12px;min-width:0}.upscale-workspace-panel-head{display:flex;flex-direction:column;gap:2px;margin-bottom:9px}.upscale-workspace-panel-head strong{font-size:13px}.upscale-workspace-panel-head span{font-size:10px;color:var(--muted)}
.upscale-workspace-panel>video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:10px;margin-bottom:10px}.upscale-workspace-empty{display:grid;place-items:center;width:100%;aspect-ratio:16/9;background:#05090e;border:1px dashed #31465c;border-radius:10px;color:#8093a7;font-size:11px;text-align:center;padding:24px}.upscale-workspace-empty[hidden],.upscale-workspace-preview-wrap[hidden]{display:none!important}.upscale-workspace-preview-wrap{width:100%}.upscale-workspace-preview-wrap .upscale-compare-stage{width:100%;aspect-ratio:16/9;margin-bottom:9px}.upscale-workspace-preview-wrap>button{width:100%}.upscale-single-frame-note{text-align:center;padding:8px 10px;border-radius:8px;background:#101d29;border:1px solid #26394c;color:#8fa4ba;font-size:10px}
.upscale-workspace-settings{display:grid;grid-template-columns:220px 150px auto 1fr auto;gap:12px;align-items:end;margin-top:14px;padding:12px;background:#091019;border:1px solid #26394c;border-radius:13px}.upscale-workspace-settings label{display:flex;flex-direction:column;gap:5px}.upscale-workspace-settings label>span{font-size:10px;color:#aebed0;font-weight:700}.upscale-workspace-settings select{width:100%}.upscale-workspace-check{flex-direction:row!important;align-items:center!important;padding-bottom:7px;white-space:nowrap}.upscale-workspace-check input{margin:0 5px 0 0}.upscale-workspace-note{font-size:10px;color:#8093a7;line-height:1.35;padding-bottom:4px}.upscale-primary{font-weight:700}.upscale-full{min-width:170px}.upscale-workspace-status{margin-top:10px;min-height:34px;padding:9px 11px;border-radius:9px;background:#101d29;color:#aebed0;font-size:11px;border:1px solid #26394c}body.upscale-workspace-open{overflow:hidden}
@media(max-width:900px){.upscale-workspace-modal{padding:6px}.upscale-workspace-inner{width:calc(100vw - 12px);max-width:calc(100vw - 12px);padding:10px}.upscale-workspace-grid{grid-template-columns:1fr}.upscale-workspace-settings{grid-template-columns:1fr 1fr}.upscale-workspace-note,.upscale-full{grid-column:1/-1}.upscale-full{width:100%}}


/* Browser Library: make References use the same real scrolling viewport.
   Required for reliable incremental/infinite loading inside the modal. */
#libraryModal #libraryModalGrid{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-content:start!important;
  overscroll-behavior:contain;
}


/* Cinevora v23: customer-readable generation queue errors */
.generation-queue-list{overflow-y:auto!important;overflow-x:hidden!important}
.queue-job{
  grid-template-columns:65px minmax(110px,1.15fr) minmax(110px,1fr) 95px auto!important;
  min-width:0!important;
}
.queue-job>span{min-width:0}
.queue-job-model,.queue-job-name{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}
.queue-job-action{justify-self:end}
.queue-job-error-box{
  grid-column:1/-1;
  width:100%;
  box-sizing:border-box;
  margin-top:2px;
  padding:9px 11px;
  border:1px solid #7d424a;
  border-radius:8px;
  background:rgba(125,66,74,.12);
  color:#ffd7da;
  display:flex;
  align-items:flex-start;
  gap:8px;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.45;
  font-size:10px;
}
.queue-job-error-box strong{color:#ff9ca5;flex:0 0 auto;font-size:10px}
.queue-job-error-box span{min-width:0}
@media(max-width:850px){
  .queue-job{grid-template-columns:52px minmax(0,1fr) auto!important}
  .queue-job-model{grid-column:1/3!important;color:var(--muted)}
  .queue-job-status{grid-column:3!important;grid-row:1!important}
  .queue-job-action{grid-column:3!important}
  .queue-job-error-box{grid-column:1/-1!important}
}
@media(max-width:560px){
  .queue-job{grid-template-columns:1fr auto!important}
  .queue-job-scene{grid-column:1!important}
  .queue-job-name{grid-column:1!important}
  .queue-job-model{grid-column:1!important}
  .queue-job-status{grid-column:2!important;grid-row:1!important}
  .queue-job-action{grid-column:2!important;grid-row:2/4!important;align-self:center}
  .queue-job-error-box{grid-column:1/-1!important;display:block!important}
  .queue-job-error-box strong{display:block;margin-bottom:3px}
}

/* v33: Browse Library References owns the left-pane scroll viewport.
   The parent body intentionally hides overflow; without an explicit bounded
   height the reference grid grows with its cards and never emits scroll. */
#libraryModal:not(.generated-results-view) .library-browser-body{
  min-height:0!important;
  overflow:hidden!important;
}
#libraryModal:not(.generated-results-view) #libraryModalGrid{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-content:start!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#libraryModal:not(.generated-results-view) #libraryModalGrid .library-scroll-sentinel{
  grid-column:1/-1!important;
}

/* v34: References infinite-scroll repair.
   library-browser-body is itself a CSS grid. Its implicit row was `auto`, so
   the reference grid could size the row from all card content instead of being
   constrained by the modal's remaining height. That meant libraryModalGrid
   visually overflowed/clipped but never became a real scroll viewport.
   Force the body to a single minmax(0,1fr) row and let the left grid own scroll. */
@media(min-width:901px){
  #libraryModal .library-browser-body{
    grid-template-rows:minmax(0,1fr)!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #libraryModal:not(.generated-results-view) #libraryModalGrid{
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow-y:scroll!important;
    overflow-x:hidden!important;
    align-self:stretch!important;
  }
  #libraryModal:not(.generated-results-view) #libraryDetails{
    min-height:0!important;
    overflow-y:auto!important;
  }
}

/* v35: References fixed-size incremental grid.
   Do not let CSS Grid compress reference rows to satisfy the bounded modal.
   A fixed row height makes the first 24 cards exceed the viewport naturally,
   which gives the existing References pager a real scroll threshold. */
@media(min-width:901px){
  #libraryModal:not(.generated-results-view) #libraryModalGrid{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:136px!important;
    align-content:start!important;
    align-items:start!important;
    gap:9px!important;
    padding:12px!important;
  }
  #libraryModal:not(.generated-results-view) #libraryModalGrid .library-browser-card{
    width:100%!important;
    height:136px!important;
    min-height:136px!important;
    max-height:136px!important;
    align-self:start!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  #libraryModal:not(.generated-results-view) #libraryModalGrid .library-browser-thumb{
    width:100%!important;
    height:100px!important;
    min-height:100px!important;
    max-height:100px!important;
    overflow:hidden!important;
    flex:none!important;
  }
  #libraryModal:not(.generated-results-view) #libraryModalGrid .library-browser-name{
    width:100%!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  #libraryModal:not(.generated-results-view) #libraryModalGrid .library-scroll-sentinel{
    grid-column:1/-1!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:0 10px!important;
    display:grid!important;
    place-items:center!important;
  }
}

/* Browser Library: Characters */
#libraryModal.characters-view .library-browser-body{display:none!important}
#libraryModal.characters-view .library-modal-actions>*{display:none!important}
#libraryModal.characters-view .library-modal-actions>button:last-of-type{display:inline-flex!important}
.library-characters-panel{padding:14px 16px 18px;overflow:auto;min-height:0;flex:1}
.library-characters-panel[hidden]{display:none!important}
.characters-help{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.5;max-width:820px}
.character-form{display:grid;grid-template-columns:minmax(150px,1fr) minmax(170px,1.2fr) minmax(170px,1.2fr) minmax(120px,.7fr) auto auto;gap:8px;align-items:center}
.character-form button{white-space:nowrap}
.character-error{min-height:18px;margin:6px 0 4px;color:var(--danger);font-size:12px}
.characters-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:6px}
.characters-empty{color:var(--muted);font-size:13px;padding:18px;border:1px dashed var(--line);border-radius:10px}
.character-card{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}
.character-card.has-problem{border-color:#7d424a}
.character-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px;background:#090d12;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:24px}
.character-meta{min-width:0;display:flex;flex-direction:column;gap:3px}
.character-meta strong{font:600 14px ui-monospace,Consolas,monospace}
.character-meta small{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-meta audio{width:100%;height:30px;margin-top:4px}
.character-novoice{display:none}
.character-problem{color:var(--danger);font-size:11px}
.character-actions{grid-column:1/-1;display:flex;gap:6px}
.character-actions button{flex:1;padding:7px 8px}
@media(max-width:760px){.character-form{grid-template-columns:1fr 1fr}.character-form input{grid-column:1/-1}.characters-list{grid-template-columns:1fr}}

/* Project settings: Upscale completed scenes */
.upscale-setting-row{display:flex;gap:6px;margin-top:6px;align-items:center}
.upscale-setting-row select{width:auto;min-width:88px;padding:6px 8px}
.upscale-setting-row button{padding:6px 10px;font-size:12px}
input#mergeCompleted,input#upscaleCompleted{width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;flex:0 0 16px!important;margin:0!important;padding:0!important}
.upscale-setting-row{flex-wrap:wrap}
.upscale-setting-row button{flex:1 1 auto}

/* Project upscale progress */
.upscale-progress{margin-top:8px;padding:8px 10px;border:1px solid #30445c;border-radius:8px;background:#0b1520;font-size:12px}
.upscale-progress[hidden]{display:none!important}
.upscale-progress-dock{margin:8px 12px 4px}
.up-head{display:flex;align-items:center;gap:8px}
.up-head strong{font-size:12px;flex:1;min-width:0}
.up-count{color:var(--muted);font-size:11px;white-space:nowrap}
.up-dismiss{padding:0 6px!important;line-height:18px;background:transparent!important;color:var(--muted)!important}
.up-bar{height:5px;margin:7px 0 6px;border-radius:99px;background:#1b2836;overflow:hidden}
.up-bar span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s ease}
.up-bar.done span{background:var(--good)}
.up-meta{color:var(--muted);font-size:11px;margin-bottom:5px}
.up-jobs{display:flex;flex-wrap:wrap;gap:4px}
.up-job{padding:2px 7px;border-radius:99px;border:1px solid #344255;background:#121c27;font-size:10.5px;color:#c9d7e7;white-space:nowrap}
.up-job.up-completed{border-color:#2f6b52;color:var(--good)}
.up-job.up-failed{border-color:#7d424a;color:#ffb8bd}
.up-job.up-running{border-color:#3b5f8f;color:#bcd6ff}


/* ---------- v64: balance and estimate always visible on phones ---------- */
.credit-short-text{color:#ff8a8a!important}
@media(max-width:900px){
  /* Advanced: the bottom bar shows Credits / Estimate / After above Generate. */
  body.advanced-mode{padding-bottom:128px!important}
  body.advanced-mode .panel.wide{
    grid-template-columns:1fr auto!important;
    row-gap:6px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:7px 10px calc(8px + env(safe-area-inset-bottom))!important;
  }
  body.advanced-mode .panel.wide .btns{margin:0!important}
  body.advanced-mode .panel.wide #advancedCreditSummary{
    display:grid!important;
    grid-column:1/-1!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin:0!important;
    padding:6px 8px!important;
    min-width:0!important;
    border-radius:8px!important;
  }
  body.advanced-mode .panel.wide #advancedCreditSummary>div{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:1px!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    background:none!important;
  }
  body.advanced-mode .panel.wide #advancedCreditSummary span{font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body.advanced-mode .panel.wide #advancedCreditSummary strong{font-size:15px!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* Simple: Credits / Estimate / After and Generate stay docked at the bottom
     of the screen while the Create Scene form is in view. "clip" still hides
     sideways overflow but, unlike "hidden", lets position:sticky follow the screen. */
  body.simple-mode{overflow-x:clip!important;overflow-y:visible!important}
  body.simple-mode .simple-action-dock{
    position:sticky;
    bottom:0;
    z-index:50;
    margin:12px -12px -12px;
    padding:8px 12px calc(10px + env(safe-area-inset-bottom));
    background:#0b131d;
    border-top:1px solid #2d4055;
    box-shadow:0 -8px 20px rgba(0,0,0,.45);
    border-radius:0 0 12px 12px;
  }
  body.simple-mode .simple-action-dock .credit-summary-bar{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px;
    margin:0 0 8px;
    padding:6px 8px;
  }
  body.simple-mode .simple-action-dock .credit-summary-bar>div{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:1px;
  }
  body.simple-mode .simple-action-dock .credit-summary-bar span{font-size:10px;white-space:nowrap}
  body.simple-mode .simple-action-dock .credit-summary-bar strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body.simple-mode .simple-action-dock .simple-generate-btn{margin:0;width:100%}
  /* Give "After" (which can read "Need N more") the most room. */
  body.simple-mode .simple-action-dock .credit-summary-bar,
  body.advanced-mode .panel.wide #advancedCreditSummary{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.3fr)!important;
  }
  body.simple-mode .simple-action-dock .credit-short-text,
  body.advanced-mode .panel.wide #advancedCreditSummary .credit-short-text{font-size:13px!important}
}
@media(max-width:760px){
  body.advanced-mode .panel.wide{grid-template-columns:1fr!important}
}

/* ---------- v69/v70: scene checkboxes (Use establishing frame, End on a wide shot) ---------- */
.anchor-est-label,.anchor-loc-label,.end-wide-label,label:has(> #simpleAnchorEstablishing),label:has(> #simpleAnchorLocationFrames){display:flex!important;justify-content:flex-start!important;align-items:center!important;gap:8px!important;width:auto!important;margin:8px 0 0!important;font-size:13px!important;color:#c7d3df!important;cursor:pointer}
.anchor-est-label input[type=checkbox],.anchor-loc-label input[type=checkbox],.end-wide-label input[type=checkbox],#simpleAnchorEstablishing,#simpleAnchorLocationFrames{width:16px!important;height:16px!important;min-width:16px!important;flex:0 0 16px!important;margin:0!important;padding:0!important;appearance:auto!important;-webkit-appearance:checkbox!important}

/* ---------- v73: version label ---------- */
.app-version-chip{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid #2d4055;border-radius:999px;font-size:10px;color:#8ea0b3;background:transparent;white-space:nowrap}
.app-version-label{font-size:11px;color:#7f8fa1;text-align:center;padding:8px 10px 2px;border-top:1px solid rgba(127,143,161,.18);margin-top:4px}

/* v76: scene-card option groups follow their hidden attribute (a generic scene-card
   rule set display:block, so Shot/Location options showed in every mode). */
.anchor-shot-wrap[hidden],.source-from-wrap[hidden],#simpleSourceFromWrap[hidden],#simpleFromNumberWrap[hidden],
body.advanced-mode .scene .scene-field-right > div[hidden]{display:none!important}

/* v78: upscale share of the batch estimate */
.credit-upscale-note{display:block;font-size:11px;line-height:1.2;color:#9fb0c2;margin-top:0;font-weight:400}

/* v81: result action buttons wrap instead of running off the card edge */
.result-actions-bar{flex-wrap:wrap}
.result-actions-bar button,.result-actions-bar .result-action-link{flex:1 1 auto;min-width:0;white-space:nowrap}
.result-actions-bar{gap:5px}
.result-actions-bar button,.result-actions-bar .result-action-link{padding:7px 5px}
.result-actions-bar .report-result{flex:0 0 auto}