:root{
  --bg:#05080d;--panel:#0b121a;--panel2:#0e1822;--line:#1d3041;--line2:#24445a;
  --text:#eef6ff;--muted:#8399ab;--blue:#28a8ff;--cyan:#24dccb;--green:#50df99;
  --red:#ff7582;--purple:#a68cff;--r:16px;--shadow:0 16px 42px rgba(0,0,0,.20)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 82% -8%,#123858 0,transparent 28%),linear-gradient(180deg,#081018,#05080d 64%);color:var(--text);font:14px/1.5 Arial,Helvetica,sans-serif}
button,input,textarea,select{font:inherit}button{cursor:pointer}
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:rgba(5,9,14,.96);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:16px}
.brand{display:flex;align-items:center;gap:11px;padding:3px 6px 10px}.logo{width:44px;height:44px;border:1px solid #1d7db5;border-radius:13px;background:#0b2232;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.25)}.logo img{width:100%;height:100%;object-fit:cover;display:block}
.brand-copy h1{font-size:18px;line-height:1;margin:0}.brand-copy span{display:block;margin-top:5px;font-size:11px;color:var(--muted)}
.section{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#708598;padding:0 6px}
.scene-list{display:flex;flex-direction:column;gap:7px;overflow:auto;padding-right:2px}
.scene{border:1px solid #192837;background:#0a1118;border-radius:12px;padding:9px;display:grid;grid-template-columns:32px 1fr auto;gap:9px;align-items:center;transition:.18s}
.scene:hover{border-color:#28516d}.scene.active{border-color:#238fd0;background:#0d1e2b;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.scene-num{width:32px;height:32px;border-radius:9px;background:#10202f;display:grid;place-items:center;color:#86d4ff;font-weight:800}.scene-title{font-weight:700;font-size:12.5px}.scene-sub{font-size:10.5px;color:var(--muted);margin-top:2px}.dot{width:7px;height:7px;border-radius:50%;background:#35495a}.dot.done{background:var(--green)}
.sidebar-hint{margin-top:auto;border-top:1px solid #162735;padding:11px 6px 0;display:flex;gap:8px;color:#83a0b4;font-size:11px;line-height:1.45}.hint-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-top:5px;flex:0 0 auto}
.main{min-width:0}.content{max-width:1120px;margin:auto;padding:20px 24px 30px}
.app-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:2px 0 14px;padding:2px 2px 0}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#6faacb;font-weight:800;margin-bottom:4px}.app-topbar h2{font-size:22px;line-height:1.15;margin:0}.app-topbar p{margin:6px 0 0;color:var(--muted);font-size:12px}
.lang-switch{display:flex;align-items:center;gap:7px;border:1px solid #274156;background:#08121a;border-radius:999px;padding:4px 7px;color:#506a7c;flex:0 0 auto}
.lang-btn{border:0;background:transparent;color:#738c9e;font-size:11px;font-weight:900;padding:4px 6px;border-radius:999px}.lang-btn.active{background:#123149;color:#9bddff}.lang-btn:hover{color:#d8f2ff}
.workflow-strip{display:flex;align-items:center;gap:9px;border:1px solid #18374b;background:#08141d;border-radius:13px;padding:8px 11px;margin-bottom:14px;color:#7892a5;overflow:auto}
.workflow-step{display:flex;align-items:center;gap:6px;white-space:nowrap}.workflow-step span{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#10283a;color:#8edaff;font-size:10px;font-weight:900}.workflow-step b{font-size:11px;color:#b9d1e1}.workflow-strip i{font-style:normal;color:#33546a;font-size:12px}
.card{border:1px solid var(--line);background:linear-gradient(180deg,#0b131b,#091118);border-radius:var(--r);overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow)}
.head{padding:13px 15px;border-bottom:1px solid #172636;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:60px}.head h2{font-size:14px;margin:0}.head-sub{margin:3px 0 0;color:#748b9e;font-size:11px}.body{padding:15px}
textarea,input,select{width:100%;background:#070d13;border:1px solid #273a4b;color:var(--text);border-radius:10px;padding:10px 11px;outline:none}textarea:focus,input:focus,select:focus{border-color:#258fc8;box-shadow:0 0 0 3px rgba(40,168,255,.08)}textarea{resize:vertical}
.full-story{min-height:280px}.scene-story{min-height:170px}.prompt{min-height:300px;font-family:Menlo,Consolas,monospace;line-height:1.55;font-size:12.5px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.grid4{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:9px}.settings-grid{margin-top:12px}
label,.field-label{display:block;color:#92a8b8;font-size:11.5px;margin-bottom:5px}.field-label{margin-top:12px}
.btn{border:1px solid #29445b;background:#101b26;color:var(--text);border-radius:9px;padding:8px 11px;font-weight:700;transition:.16s}.btn:hover{border-color:#3f6885;background:#142330}.btn.primary{border-color:#169ae7;background:#0d6fac}.btn.primary:hover{background:#0f7fc3}.btn.cyan{border-color:#11aaa9;background:#087073}.btn.ghost{background:transparent}.btn.danger{border-color:#5e3340;background:#1c1116;color:#ff9baa}.btn.danger:hover{border-color:#985064;background:#29141c}.btn.small{padding:6px 9px;font-size:11.5px}.btn.json{border-color:#604ca0;background:#251a43;color:#e6dcff}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}.compact-toolbar{margin-top:0}.main-actions{margin-top:12px}.badge{font-size:10.5px;padding:4px 8px;border-radius:999px;border:1px solid #24506b;color:#89d8ff;background:#0a1d2a;white-space:nowrap}.badge.green{border-color:#267252;color:#a7e6c6;background:#0b211a}.status-badge{margin-left:auto}
.helper-details{margin-top:9px;border:1px solid #1d3445;border-radius:9px;background:#081119;color:#7e9aac;font-size:11px}.helper-details summary{cursor:pointer;padding:8px 10px;font-weight:700;color:#91b4ca}.helper-content{padding:0 10px 9px;color:#7994a7;line-height:1.5}
.section-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}.mini-note{font-size:11px;color:#7f9aab;max-width:620px}
.character-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.character-card{border:1px solid #20394c;background:#08121a;border-radius:12px;overflow:hidden}.character-card .char-head{padding:10px 12px;border-bottom:1px solid #1a2b3a;display:flex;align-items:center;justify-content:space-between;gap:8px}.character-card .char-head strong{font-size:12.5px}.character-card .char-body{padding:12px}.character-card textarea{min-height:350px}.character-evidence{font-size:10.8px;color:#8098aa;margin-bottom:8px;padding:7px 9px;border-radius:8px;background:#0a1720;border:1px solid #1c3243}
.continuity-chip{display:inline-flex;max-width:100%;border:1px solid #22465c;background:#091922;color:#9ab8ca;border-radius:999px;padding:6px 10px;font-size:10.8px;margin-bottom:10px}.scene-nav{margin-top:11px}.spacer{flex:1}
.bottom{border-top:1px solid var(--line);background:#070a0f;padding:9px 22px;display:flex;justify-content:space-between;gap:12px;align-items:center;color:#71889a;font-size:10.8px}.version-chip{font-size:10px;border:1px solid #24384a;border-radius:999px;padding:3px 7px;color:#70899b}
.hidden{display:none!important}.toast{position:fixed;right:20px;bottom:24px;background:#142537;border:1px solid #2e5d7f;border-radius:10px;padding:9px 13px;opacity:0;transition:.2s;z-index:1100}.toast.show{opacity:1}
.json-modal{position:fixed;inset:0;background:rgba(0,0,0,.74);display:flex;align-items:center;justify-content:center;padding:18px;z-index:1000}.json-modal.hidden{display:none!important}.json-dialog{width:min(900px,96vw);max-height:90vh;display:flex;flex-direction:column;background:#09131c;border:1px solid #2d5874;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.45);overflow:hidden}.json-dialog-head{padding:12px 14px;border-bottom:1px solid #20384a;display:flex;align-items:center;justify-content:space-between;gap:10px}.json-dialog-head h3{margin:0;font-size:14px}.json-dialog-body{padding:14px;overflow:auto}.json-output{min-height:420px;max-height:58vh;font-family:Menlo,Consolas,monospace;font-size:12px;line-height:1.5}.json-hint{font-size:11px;color:#829bae;margin-bottom:9px}
.idtools-unified-footer{display:block!important;width:100%!important;margin:0!important;padding:15px 16px max(15px,env(safe-area-inset-bottom))!important;text-align:center!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;background:#0f172a!important;color:#e2e8f0!important}.idtools-unified-footer .credit{margin:0!important;font-size:11px!important;line-height:1.6!important;color:#dbeafe!important}.idtools-unified-footer .credit a{color:#7dd3fc!important;text-decoration:none!important;font-weight:800!important}.idtools-unified-footer .credit a:hover{text-decoration:underline!important}.idtools-unified-footer .updated{margin:4px 0 0!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:8.5px!important;text-transform:uppercase!important;letter-spacing:.12em!important;color:#8495aa!important}
@media(max-width:900px){.grid3,.grid4,.character-grid{grid-template-columns:1fr}.section-actions{align-items:flex-start;flex-direction:column}.status-badge{margin-left:0}}
@media(max-width:720px){.app{grid-template-columns:1fr}.sidebar{height:auto;position:relative;border-right:0;border-bottom:1px solid var(--line);padding-bottom:12px}.scene-list{display:grid;grid-template-columns:1fr 1fr}.sidebar-hint{margin-top:0}.content{padding:14px 12px 24px}.app-topbar{align-items:center}.app-topbar h2{font-size:18px}.app-topbar p{display:none}.workflow-strip{gap:7px}.workflow-strip i{display:none}.workflow-step{flex:1;justify-content:center}.workflow-step b{font-size:10px}.main-actions .btn{flex:1}.main-actions .status-badge{width:100%;text-align:center}.head{align-items:flex-start}.compact-toolbar{justify-content:flex-end}}
@media(max-width:480px){.scene-list{grid-template-columns:1fr}.workflow-step b{display:none}.lang-switch{padding:3px 5px}.character-grid{grid-template-columns:1fr}}

/* v6.2: compact header actions */
.top-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.how-btn{display:flex;align-items:center;gap:6px;border:1px solid #274156;background:#08121a;color:#a9c9dc;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}
.how-btn:hover{border-color:#37617f;background:#0d1a24;color:#d8f2ff}
.how-icon{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#153247;color:#92dcff;font-size:10px;font-weight:900}
.how-dialog{width:min(650px,94vw)}
.modal-subtitle{margin-top:3px;color:#7f98aa;font-size:10.5px}
.how-body{padding:14px 16px 16px}
.how-steps{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.how-step{display:grid;grid-template-columns:28px 1fr;gap:9px;border:1px solid #1b3446;background:#08131b;border-radius:11px;padding:10px}
.how-step>b{width:28px;height:28px;border-radius:9px;background:#102c40;color:#8fdcff;display:grid;place-items:center;font-size:11px}
.how-step strong{font-size:11.5px;color:#d8ebf7}.how-step p{margin:3px 0 0;color:#8099aa;font-size:10.8px;line-height:1.42}
.how-tip{margin-top:10px;border:1px solid #295c5a;background:#09201f;color:#9fd8d0;border-radius:10px;padding:8px 10px;font-size:10.8px}

/* v6.3: Arabic / mixed-direction text support */
textarea,
input[type="text"]{
  unicode-bidi:plaintext;
}

/* Arabic lines inside an English prompt retain proper RTL ordering.
   Pure / Arabic-dominant fields are switched to full RTL automatically by JS. */
.rtl-content{
  direction:rtl!important;
  text-align:right!important;
  unicode-bidi:plaintext!important;
  font-family:"Noto Naskh Arabic","Scheherazade New","Cairo",Arial,sans-serif!important;
  line-height:1.75!important;
}

.prompt:not(.rtl-content),
.scene-story:not(.rtl-content),
.full-story:not(.rtl-content),
.charPrompt:not(.rtl-content){
  direction:ltr;
  text-align:left;
  unicode-bidi:plaintext;
}

/* Keep JSON/code output intentionally LTR even when it contains Arabic strings. */
.json-output{
  direction:ltr!important;
  text-align:left!important;
  unicode-bidi:plaintext;
}


/* v6.4 Light Theme */
.theme-btn{display:flex;align-items:center;gap:6px;border:1px solid #274156;background:#08121a;color:#a9c9dc;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}
.theme-btn:hover{border-color:#37617f;background:#0d1a24;color:#d8f2ff}.theme-btn span:first-child{font-size:12px;line-height:1}
body.light-theme{--bg:#eef3f7;--panel:#ffffff;--panel2:#f7fafc;--line:#c8d5df;--line2:#b6c8d6;--text:#17212b;--muted:#5a6d7c;--blue:#0b76b7;--cyan:#087e82;--green:#247451;--red:#b93645;--purple:#6748b5;background:radial-gradient(circle at 82% -8%,#dcecf8 0,transparent 30%),linear-gradient(180deg,#f7fafc,#edf3f7 66%);color:var(--text)}
body.light-theme .sidebar{background:rgba(248,251,253,.97);border-right-color:#cfdbe4}
body.light-theme .brand-copy h1{color:#17212b}
body.light-theme .brand-copy span,body.light-theme .section,body.light-theme .scene-sub,body.light-theme .sidebar-hint,body.light-theme .app-topbar p,body.light-theme .head-sub,body.light-theme .mini-note,body.light-theme .character-evidence,body.light-theme .json-hint,body.light-theme .modal-subtitle{color:#5d7180!important}
body.light-theme .scene{border-color:#d3dee6;background:#fff;color:#17212b}body.light-theme .scene:hover{border-color:#91b4ca}body.light-theme .scene.active{border-color:#2f8fca;background:#edf7fd;box-shadow:0 8px 22px rgba(45,91,123,.10)}body.light-theme .scene-num{background:#e8f3fa;color:#0a6ca4}body.light-theme .dot{background:#aab9c4}body.light-theme .dot.done{background:#2f996d}
body.light-theme .app-topbar h2,body.light-theme .head h2,body.light-theme .character-card .char-head strong,body.light-theme .how-step strong{color:#17212b}
body.light-theme .workflow-strip{border-color:#cbd9e2;background:#f7fbfd;color:#5b7180}body.light-theme .workflow-step span{background:#e3f0f8;color:#0a6ca4}body.light-theme .workflow-step b{color:#2c4555}body.light-theme .workflow-strip i{color:#8fa4b3}
body.light-theme .card{border-color:#c9d6df;background:linear-gradient(180deg,#fff,#f9fbfc);box-shadow:0 14px 34px rgba(43,72,94,.09)}body.light-theme .head{border-bottom-color:#d7e1e8}
body.light-theme textarea,body.light-theme input,body.light-theme select{background:#fff;border-color:#b7c8d3;color:#17212b}body.light-theme textarea::placeholder,body.light-theme input::placeholder{color:#7f919e}body.light-theme textarea:focus,body.light-theme input:focus,body.light-theme select:focus{border-color:#2184bd;box-shadow:0 0 0 3px rgba(33,132,189,.10)}body.light-theme label,body.light-theme .field-label{color:#506575}
body.light-theme .btn{border-color:#b8c8d3;background:#f7fafc;color:#20303c}body.light-theme .btn:hover{border-color:#89a8bd;background:#edf4f8}body.light-theme .btn.primary{border-color:#0b75b3;background:#0f84c7;color:#fff}body.light-theme .btn.primary:hover{background:#0b74b1}body.light-theme .btn.cyan{border-color:#087b7f;background:#0a8b8f;color:#fff}body.light-theme .btn.ghost{background:#fff;color:#294252}body.light-theme .btn.danger{border-color:#d2a2a8;background:#fff4f5;color:#9c2f3d}body.light-theme .btn.json{border-color:#ad9fda;background:#f3efff;color:#4e3990}
body.light-theme .badge{border-color:#9fc3d8;color:#0b658f;background:#edf7fc}body.light-theme .badge.green{border-color:#9dcbb7;color:#226447;background:#edf8f3}
body.light-theme .helper-details{border-color:#cbd8e1;background:#f7fafc;color:#506878}body.light-theme .helper-details summary{color:#496b7f}body.light-theme .helper-content{color:#647a88}
body.light-theme .character-card{border-color:#cbd8e1;background:#fbfdfe}body.light-theme .character-card .char-head{border-bottom-color:#d9e2e8}body.light-theme .character-evidence{background:#f2f7fa;border-color:#d2dee6}body.light-theme .continuity-chip{border-color:#b4ccd9;background:#eef6fa;color:#315264}
body.light-theme .bottom{border-top-color:#ccd8e1;background:#eef3f7;color:#5d7180}body.light-theme .version-chip{border-color:#bdcbd5;color:#526978;background:#f7fafc}
body.light-theme .json-modal{background:rgba(44,57,67,.45)}body.light-theme .json-dialog{background:#fff;border-color:#b8cad6;box-shadow:0 24px 70px rgba(35,55,69,.20)}body.light-theme .json-dialog-head{border-bottom-color:#d6e0e7}body.light-theme .json-output{background:#f8fafc!important;color:#18242d!important;border-color:#bfcdd7!important}body.light-theme .how-step{border-color:#d0dde5;background:#f7fafc}body.light-theme .how-step>b{background:#e4f1f8;color:#0b6fa7}body.light-theme .how-step p{color:#607583}body.light-theme .how-tip{border-color:#a8cec9;background:#edf8f6;color:#2f635d}body.light-theme .toast{background:#fff;color:#17212b;border-color:#9db9cb;box-shadow:0 10px 28px rgba(42,67,84,.16)}
body.light-theme .lang-switch{border-color:#c2d1db;background:#f7fafc;color:#8a9ca9}body.light-theme .lang-btn{color:#627886}body.light-theme .lang-btn.active{background:#dceef9;color:#0a6ca4}body.light-theme .lang-btn:hover{color:#244858}body.light-theme .how-btn,body.light-theme .theme-btn{border-color:#c2d1db;background:#f7fafc;color:#49616f}body.light-theme .how-btn:hover,body.light-theme .theme-btn:hover{border-color:#8faabd;background:#edf4f8;color:#1f4052}body.light-theme .how-icon{background:#dceef9;color:#0b6fa7}
/* Footer intentionally stays dark in both themes. */
body.light-theme .idtools-unified-footer{background:#0f172a!important;color:#e2e8f0!important}body.light-theme .idtools-unified-footer .credit{color:#dbeafe!important}body.light-theme .idtools-unified-footer .credit a{color:#7dd3fc!important}body.light-theme .idtools-unified-footer .updated{color:#8495aa!important}
body.light-theme .rtl-content{color:#18242d!important;background:#fff!important}


/* v6.4.2: Flow continuity input emphasis */
.flow-input-chip{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:6px;padding:3px 7px;border-radius:999px;
  border:1px solid #32627f;background:#0b2230;color:#9bdcff;
  font-size:10px;font-weight:800;white-space:nowrap
}
body.light-theme .flow-input-chip{
  border-color:#9dbed2;background:#edf7fc;color:#17658e
}


/* v6.4.3: How-to storyboard request template */
.how-resource{
  margin-top:12px;
  border-top:1px solid #1f3545;
  padding-top:12px;
}
.how-resource-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.how-resource-head strong{font-size:12px;color:#dceefa}
.how-resource-head p{margin:3px 0 0;color:#7f98aa;font-size:10.6px;line-height:1.4}
.how-template-box,
.how-example-box{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  border:1px solid #244052;
  border-radius:10px;
  padding:11px 12px;
  background:#071018;
  color:#dce9f2;
  font:11px/1.55 Menlo,Consolas,monospace;
  max-height:250px;
  overflow:auto;
}
.how-template-box{border-color:#276d70;background:#071717}
.how-example-box{background:#091119;color:#aebfcb}
body.light-theme .how-resource{border-top-color:#d4dfe6}
body.light-theme .how-resource-head strong{color:#18242d}
body.light-theme .how-resource-head p{color:#607583}
body.light-theme .how-template-box{
  border-color:#91bdbb;
  background:#f0faf8;
  color:#193a38;
}
body.light-theme .how-example-box{
  border-color:#c8d5df;
  background:#f7fafc;
  color:#485d6a;
}
@media(max-width:560px){
  .how-resource-head{flex-direction:column}
  .how-resource-head .btn{width:100%}
}


/* v6.5.0 deep-audit quality notes */
.scene-quality-note{
  margin:0 0 10px;
  border:1px solid #7a5d2d;
  background:#21190b;
  color:#ffd99b;
  border-radius:10px;
  padding:7px 10px;
  font-size:10.8px;
  line-height:1.45;
}
body.light-theme .scene-quality-note{
  border-color:#d0b16e;
  background:#fff8e8;
  color:#765414;
}

.avatar-toggle{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #1e3547;background:#08131b;border-radius:12px;margin-top:10px}
.avatar-toggle input{width:auto;margin:2px 0 0;accent-color:#28a8ff;transform:scale(1.05)}
.avatar-toggle-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.avatar-toggle-copy label{margin:0;color:#d6ebf7;font-size:12px;font-weight:700;cursor:pointer}
.avatar-toggle-copy small{color:#7f9aab;font-size:10.8px;line-height:1.45}

.avatar-mode-badge{display:inline-flex;align-items:center;border:1px solid #2e7a61;background:#0d2b22;color:#a8efd0;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:900;letter-spacing:.04em;white-space:nowrap}
.avatar-camera-options{display:grid;grid-template-columns:auto minmax(180px,260px);align-items:center;gap:8px;margin-top:7px}
.avatar-camera-options label{margin:0;font-size:10.8px;color:#90a8b8}
.avatar-camera-options select{padding:7px 9px;font-size:11px}
@media(max-width:560px){.avatar-mode-badge{display:none!important}.avatar-camera-options{grid-template-columns:1fr}}


/* v6.6.7 Avatar Storyboard Builder + studio lock controls */
.story-maker-details{margin-bottom:10px;border:1px solid #255169;border-radius:12px;background:#081722;overflow:hidden}
.story-maker-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:10px 12px;color:#bfe7fa;font-weight:800;list-style:none}
.story-maker-details>summary::-webkit-details-marker{display:none}
.story-maker-details>summary small{font-size:10.5px;color:#7195aa;font-weight:500;text-align:right}
.story-maker-body{border-top:1px solid #1b3a4d;padding:12px}
.story-maker-script{min-height:120px}
.story-maker-grid{margin-top:10px}
.story-maker-reference{margin-top:10px;padding:10px;border:1px solid #1c3749;border-radius:10px;background:#07121a}
.story-maker-reference input[type="file"]{padding:7px 8px}
.story-maker-check{display:flex;align-items:center;gap:8px;margin:9px 0 4px;color:#b8cedb}
.story-maker-check input{width:auto;margin:0;accent-color:#24dccb}
.story-maker-reference small{display:block;color:#708b9d;font-size:10.5px;line-height:1.45}
.story-maker-result{margin-top:11px}
.story-maker-output{min-height:260px;font-family:Menlo,Consolas,monospace;font-size:12px;line-height:1.55}
.avatar-camera-options label:not(:first-child){margin-top:8px}
@media(max-width:700px){.story-maker-details>summary{align-items:flex-start;flex-direction:column}.story-maker-details>summary small{text-align:left}.story-maker-grid{grid-template-columns:1fr}}

.project-btn{display:flex;align-items:center;gap:6px;border:1px solid #274156;background:#08121a;color:#a9c9dc;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;white-space:nowrap}
.project-btn:hover{border-color:#37617f;background:#0d1a24;color:#d8f2ff}
.project-icon{font-size:13px;line-height:1;font-weight:900}
.story-attire-toggle>span{display:flex;flex-direction:column;gap:2px}.story-attire-toggle strong{font-size:11.5px;color:#d8ebf7}.story-attire-toggle small{display:block;color:#7f9aab;font-size:10.5px;font-weight:400}
body.light-theme .project-btn{border-color:#c2d1db;background:#f7fafc;color:#49616f}body.light-theme .project-btn:hover{border-color:#8faabd;background:#edf4f8;color:#1f4052}
@media(max-width:720px){.project-btn{width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%}.project-label{display:none}.project-icon{font-size:14px}}


/* v6.6.10 workspace tabs + responsive layout */
.mobile-workspace-bar{display:none}
html,body{overflow-x:hidden;overflow-y:auto}
.main,.content,.main-tab-panel{min-width:0}
.main-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px;padding:5px;border:1px solid var(--line);border-radius:13px;background:#08121a}
.main-tab{border:1px solid transparent;background:transparent;color:#849cac;border-radius:9px;padding:9px 12px;font-weight:800;font-size:12px;min-width:0}
.main-tab.active{background:#10304a;border-color:#2379aa;color:#d8f3ff}
.main-tab-panel{width:100%}
body.light-theme .main-tabs{background:#f3f7fa;border-color:#c8d7e0}
body.light-theme .main-tab{color:#5b7180}body.light-theme .main-tab.active{background:#e3f1fa;border-color:#83b9d8;color:#155678}

/* Never lock the document or hide controls to fit one viewport. */
body.initial-view{height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;display:block!important}
body.initial-view .app,body.initial-view .main,body.initial-view .content,body.initial-view .card,body.initial-view .card>.body{height:auto!important;max-height:none!important;overflow:visible!important;display:initial}
body.initial-view .app{display:grid!important}
body.initial-view .card{display:block!important}
body.initial-view .card>.body{display:block!important}

/* DESKTOP: >= 1200px */
@media(min-width:1200px){
  .app{grid-template-columns:248px minmax(0,1fr)}
  .sidebar{position:sticky;top:0;height:100vh;overflow:auto}
  .content{width:min(1120px,100%);padding:20px 24px 30px}
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid4{grid-template-columns:2fr repeat(3,minmax(0,1fr))}
  .story-maker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* TABLET: 700px–1199px */
@media(min-width:700px) and (max-width:1199px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;top:auto;height:auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;border-right:0;border-bottom:1px solid var(--line);padding:10px 14px}
  .brand{padding:0}.brand-copy span{display:none}.section,.sidebar-hint{display:none}
  .scene-list{display:flex;flex-direction:row;gap:7px;overflow-x:auto;overflow-y:hidden;padding:2px 0 4px;min-width:0}
  .scene{min-width:210px;flex:0 0 auto}
  .content{max-width:100%;padding:16px 18px 28px}
  .app-topbar{align-items:center;flex-wrap:wrap}.top-actions{flex-wrap:wrap;justify-content:flex-end}
  .grid3,.story-maker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prompt{min-height:260px}
}

/* MOBILE PORTRAIT: <= 699px */
@media(max-width:699px){
  .app{display:grid;grid-template-columns:1fr;grid-template-areas:"mobileworkspace" "sidebar" "main";min-height:0}
  .mobile-workspace-bar{grid-area:mobileworkspace;display:block;padding:10px 11px 8px;border-bottom:1px solid var(--line);background:rgba(5,9,14,.97);position:relative;z-index:3}
  .mobile-workspace-bar .eyebrow{margin-bottom:2px}.mobile-workspace-title{font-size:17px;line-height:1.2;font-weight:800;color:var(--text)}
  .sidebar{grid-area:sidebar;position:relative;top:auto;height:auto;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line);gap:7px}
  .main{grid-area:main}

  .brand{padding:0 2px 4px}.logo{width:36px;height:36px;border-radius:10px}.brand-copy h1{font-size:16px}.brand-copy span,.section,.sidebar-hint{display:none}
  .scene-list{display:flex;flex-direction:row;gap:6px;overflow-x:auto;overflow-y:hidden;padding:2px 0 4px;scroll-snap-type:x proximity}
  .scene{min-width:180px;flex:0 0 auto;padding:7px;scroll-snap-align:start}
  .scene-num{width:28px;height:28px}.scene-title{font-size:11.5px}.scene-sub{font-size:9.5px}
  .content{width:100%;padding:10px 9px 22px}
  .app-topbar{display:flex;align-items:flex-start;gap:8px;margin-bottom:9px;flex-wrap:wrap}.app-topbar>div:first-child{display:none}.app-topbar p{display:none}
  .top-actions{width:100%;margin-left:0;gap:5px;flex-wrap:wrap;justify-content:flex-end}.lang-switch{order:20}
  .workflow-strip{padding:6px 7px;margin-bottom:8px;gap:5px}.workflow-step{flex:0 0 auto}.workflow-step b{font-size:9px}.workflow-step span{width:18px;height:18px}.workflow-strip i{display:none}
  .main-tabs{margin-bottom:9px;padding:4px;gap:5px}.main-tab{padding:8px 5px;font-size:11px}
  .card{border-radius:12px;margin-bottom:10px}.head{padding:10px 11px;min-height:0;align-items:flex-start;flex-wrap:wrap}.head>div:first-child{min-width:0}.body{padding:10px}
  .full-story{min-height:220px}.scene-story{min-height:160px}.prompt{min-height:260px;font-size:11.5px}
  .grid3,.grid4,.story-maker-grid,.character-grid{grid-template-columns:1fr!important}
  .settings-grid{gap:8px}.avatar-camera-options{grid-template-columns:1fr!important}
  .toolbar{gap:6px}.main-actions{display:grid;grid-template-columns:1fr 1fr}.main-actions .btn{width:100%}.main-actions .status-badge{grid-column:1/-1;width:100%;margin-left:0;text-align:center;white-space:normal}
  .section-actions{align-items:stretch}.compact-toolbar{width:100%;justify-content:flex-start}.scene-global-actions{width:auto}
  .scene-nav{display:grid;grid-template-columns:1fr 1fr}.scene-nav .spacer{display:none}.scene-nav .btn{width:100%}
  .story-maker-reference{padding:9px}.story-maker-check{align-items:flex-start}
  .json-dialog{width:calc(100vw - 16px);max-height:92vh}.json-dialog-body{padding:10px}.json-output{min-height:300px;max-height:62vh}
  .bottom{padding:7px 10px}.idtools-unified-footer{padding-left:10px!important;padding-right:10px!important}
  .project-btn{width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%}.project-label{display:none}.project-icon{font-size:14px}
}


/* v6.6.10 responsive full-width safety patch: mobile + tablet */
@media(max-width:1199px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body{position:relative}
  .app,.sidebar,.main,.content,.main-tab-panel,.card,.head,.body,.section-actions,.toolbar,.app-topbar,.top-actions,.main-tabs,.workflow-strip,.story-maker-details,.story-maker-grid,.character-grid,.settings-grid,.avatar-toggle,.avatar-camera-options,.bottom,.idtools-unified-footer{max-width:100%;min-width:0}
  .app,.main,.content,.card,.main-tab-panel{width:100%}
  .content{margin-left:0;margin-right:0;box-sizing:border-box}
  .head>*,.body>*,.section-actions>*,.toolbar>*,.app-topbar>*,.top-actions>*,.story-maker-grid>*,.character-grid>*,.settings-grid>*,.avatar-toggle>*{min-width:0;max-width:100%}
  textarea,input,select,button{max-width:100%;min-width:0}
  textarea,input,select{width:100%;box-sizing:border-box}
  .head-sub,.mini-note,.helper-content,.sidebar-hint,.scene-title,.scene-sub,.btn,.badge,.project-label,.avatar-toggle-copy,.story-maker-details,.story-maker-reference{overflow-wrap:anywhere;word-break:break-word}
  .scene-list,.workflow-strip{max-width:100%;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .json-modal{max-width:100vw;overflow-x:hidden}
  .json-dialog{max-width:calc(100vw - 16px)}
  img,svg,video,canvas{max-width:100%;height:auto}
}

@media(min-width:700px) and (max-width:1199px){
  .sidebar,.main,.content{width:100%;max-width:100%}
  .scene-list{width:100%;max-width:100%;min-width:0}
  .app-topbar,.top-actions{max-width:100%}
}

@media(max-width:699px){
  .app,.mobile-workspace-bar,.sidebar,.main,.content{width:100%;max-width:100vw;min-width:0}
  .sidebar{overflow-x:hidden}
  .scene-list{width:100%;max-width:100%;min-width:0}
  .main-tabs{width:100%}
  .main-tab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .toolbar,.top-actions,.section-actions{width:100%}
  .toolbar .btn,.top-actions .btn{min-width:0}
  .prompt,.scene-story,.full-story,.charPrompt{width:100%;max-width:100%;min-width:0}
}


/* v6.6.10 UI comfort + natural viewport sizing patch */
html{min-height:100%;overflow-x:hidden}
body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  overflow-y:auto;
}
.app{
  flex:1 0 auto;
  min-height:0;
  width:100%;
}
.main{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.content{
  width:min(100%,1120px);
  flex:1 0 auto;
}
.bottom,.idtools-unified-footer{flex:0 0 auto}

/* Comfortable spacing: full use of the screen without a cramped UI. */
.card{margin-bottom:16px}
.head{padding:15px 17px;min-height:62px}
.body{padding:17px}
.toolbar{gap:9px;margin-top:12px}
.settings-grid{gap:11px;margin-top:14px}
.main-tabs{gap:9px;margin-bottom:16px;padding:6px}
.main-tab{padding:10px 14px}
.story-maker-details{margin-bottom:14px}
.story-maker-body{padding:15px}
.story-maker-grid{gap:11px;margin-top:12px}
.story-maker-reference{margin-top:12px;padding:12px}
.section-actions{margin-bottom:14px}

/* Short pages fill the available viewport; long pages grow and scroll naturally. */
@media(min-width:1200px){
  .sidebar{
    height:auto;
    min-height:100%;
    max-height:100dvh;
    align-self:stretch;
    overflow-y:auto;
  }
  .content{padding:22px 26px 32px}
}

/* TABLET: comfortable full-width layout, no forced document scroll. */
@media(min-width:700px) and (max-width:1199px){
  .app{min-height:0}
  .sidebar{height:auto;min-height:0}
  .content{padding:20px 22px 30px}
  .card{margin-bottom:16px}
  .head{padding:15px 16px;min-height:58px}
  .body{padding:16px}
  .grid3,.story-maker-grid{gap:11px}
  .grid4,.character-grid{gap:11px}
  .prompt{min-height:280px}
  .scene-story{min-height:180px}
}

/* MOBILE PORTRAIT: full width with breathing room. */
@media(max-width:699px){
  body{min-height:100dvh}
  .app{min-height:0}
  .mobile-workspace-bar{padding:12px 14px 10px}
  .sidebar{padding:10px 12px;gap:9px}
  .content{padding:14px 12px 26px}
  .app-topbar{gap:10px;margin-bottom:12px}
  .workflow-strip{padding:8px 9px;margin-bottom:11px;gap:7px}
  .main-tabs{margin-bottom:12px;padding:5px;gap:6px}
  .main-tab{padding:10px 7px;font-size:11.5px}
  .card{border-radius:13px;margin-bottom:14px}
  .head{padding:13px 14px;min-height:0;gap:10px}
  .head h2{font-size:14.5px}
  .head-sub{font-size:11px;line-height:1.45}
  .body{padding:14px}
  textarea,input,select{padding:11px 12px}
  .full-story{min-height:240px}
  .scene-story{min-height:180px}
  .prompt{min-height:280px;font-size:11.75px}
  .settings-grid{gap:10px;margin-top:12px}
  .toolbar{gap:8px;margin-top:11px}
  .main-actions{gap:8px}
  .story-maker-body{padding:13px}
  .story-maker-grid{gap:10px}
  .story-maker-reference{padding:11px}
  .scene-nav{gap:8px}
  .bottom{padding:9px 12px}
}


/* v6.6.10 unified responsive global header patch */
.global-app-header{
  width:100%;
  max-width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(5,9,14,.98);
  box-sizing:border-box;
  overflow:hidden;
}
.global-brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:0}
.global-brand .logo{width:40px;height:40px;border-radius:11px;flex:0 0 40px}
.global-brand-copy{min-width:0}
.global-brand-copy strong{display:block;font-size:17px;line-height:1;white-space:nowrap;color:var(--text)}
.global-workspace{display:flex;align-items:baseline;gap:7px;min-width:0;flex:1 1 auto;overflow:hidden;white-space:nowrap}
.global-workspace-label{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#6faacb;font-weight:900;flex:0 0 auto}
.global-workspace-title{font-size:16px;line-height:1.1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.global-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto;min-width:0;white-space:nowrap}
.global-app-header .project-btn,.global-app-header .theme-btn,.global-app-header .how-btn{height:30px;min-height:30px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.global-app-header .lang-switch{height:30px;min-height:30px;white-space:nowrap;flex:0 0 auto}
.global-app-header .avatar-mode-badge{max-width:110px;overflow:hidden;text-overflow:ellipsis}
.mobile-workspace-bar{display:none!important}
.sidebar .brand{display:none!important}
.app-topbar{display:none!important}

body.light-theme .global-app-header{background:rgba(248,251,253,.98);border-bottom-color:#cfdbe4}
body.light-theme .global-brand-copy strong,body.light-theme .global-workspace-title{color:#17212b}

/* Tablet: one container, preserve labels where space permits. */
@media(min-width:700px) and (max-width:1199px){
  .global-app-header{gap:10px;padding:8px 11px}
  .global-brand .logo{width:36px;height:36px;flex-basis:36px}
  .global-brand-copy strong{font-size:15px}
  .global-workspace{gap:5px}
  .global-workspace-title{font-size:14px}
  .global-app-header .project-btn,.global-app-header .theme-btn,.global-app-header .how-btn{height:28px;min-height:28px;padding:0 7px;font-size:10.5px}
  .global-app-header .lang-switch{height:28px;min-height:28px;padding:3px 5px}
  .global-app-header .avatar-mode-badge{display:none!important}
}

/* Mobile: all key controls stay inside one row; actions become icon-only. */
@media(max-width:699px){
  .global-app-header{gap:6px;padding:6px 7px;min-height:48px}
  .global-brand{gap:5px}
  .global-brand .logo{width:32px;height:32px;flex-basis:32px;border-radius:9px}
  .global-brand-copy strong{font-size:13px}
  .global-workspace{display:block;min-width:0;line-height:1.05}
  .global-workspace-label{display:block;font-size:7px;letter-spacing:.10em;margin-bottom:2px}
  .global-workspace-title{display:block;font-size:10px;max-width:none}
  .global-actions{gap:3px}
  .global-app-header .project-btn,
  .global-app-header .theme-btn,
  .global-app-header .how-btn{
    width:27px;height:27px;min-width:27px;min-height:27px;padding:0;border-radius:50%;gap:0;
  }
  .global-app-header .project-label,
  .global-app-header #themeLabel,
  .global-app-header .how-label{display:none!important}
  .global-app-header .project-icon{font-size:13px}
  .global-app-header .how-icon{width:auto;height:auto;background:transparent;font-size:11px}
  .global-app-header .lang-switch{height:27px;min-height:27px;padding:2px 3px;gap:1px}
  .global-app-header .lang-btn{font-size:8.5px;padding:2px 3px}
  .global-app-header .lang-switch>span{font-size:8px}
  .global-app-header .avatar-mode-badge{display:none!important}
  .app{grid-template-areas:"sidebar" "main"!important}
}

/* Very narrow phones: keep essential identity and actions, trim secondary wording. */
@media(max-width:430px){
  .global-app-header{gap:4px;padding-left:5px;padding-right:5px}
  .global-brand .logo{width:29px;height:29px;flex-basis:29px}
  .global-brand-copy strong{font-size:11.5px}
  .global-workspace-label{font-size:6.5px}
  .global-workspace-title{font-size:9px}
  .global-app-header .project-btn,
  .global-app-header .theme-btn,
  .global-app-header .how-btn{width:25px;height:25px;min-width:25px;min-height:25px}
  .global-app-header .lang-switch{height:25px;min-height:25px}
}

@media(max-width:370px){
  .global-workspace-label{display:none}
  .global-workspace-title{font-size:8.5px}
  .global-brand-copy strong{font-size:10.5px}
  .global-app-header .lang-switch>span{display:none}
  .global-app-header .lang-btn{font-size:8px;padding:1px 2px}
}


/* v6.6.13 three-line identity block inside the existing unified header container */
.global-app-header{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:14px;
  width:100%;
  max-width:100%;
  min-width:0;
}
.global-brand{
  display:flex;
  align-items:center;
  gap:11px;
  flex:0 1 auto;
  min-width:0;
}
.global-brand .logo{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:14px;
}
.global-brand-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.08;
}
.global-app-title{
  display:block;
  font-size:21px!important;
  line-height:1.05!important;
  font-weight:900;
  white-space:nowrap;
  color:var(--text);
  margin:0 0 4px;
}
.global-brand-copy .global-workspace-label{
  display:block;
  font-size:9px;
  line-height:1.05;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#6faacb;
  font-weight:900;
  white-space:nowrap;
  margin:0 0 3px;
}
.global-brand-copy .global-workspace-title{
  display:block;
  font-size:13px;
  line-height:1.1;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}
.global-actions{
  margin-left:auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap!important;
  gap:6px;
}
.global-app-header .header-action,
.global-app-header .lang-switch{
  flex:0 0 auto;
}
body.light-theme .global-app-title,
body.light-theme .global-brand-copy .global-workspace-title{color:#17212b}

/* Tablet: keep every action visible, reduce label footprint only. */
@media (min-width:700px) and (max-width:1199px){
  .global-app-header{gap:10px;padding:8px 10px}
  .global-brand{gap:9px}
  .global-brand .logo{width:52px;height:52px;flex-basis:52px}
  .global-app-title{font-size:19px!important;margin-bottom:3px}
  .global-brand-copy .global-workspace-label{font-size:8px;margin-bottom:2px}
  .global-brand-copy .global-workspace-title{font-size:11.5px}
  .global-actions{gap:5px}
  .global-app-header .project-btn,
  .global-app-header .theme-btn,
  .global-app-header .how-btn{height:28px;min-height:28px;padding:0 7px;font-size:10px}
  .global-app-header .lang-switch{height:28px;min-height:28px;padding:3px 5px}
}

/* Mobile: all buttons remain, but every action becomes icon-only. */
@media (max-width:699px){
  .global-app-header{
    gap:5px;
    padding:6px 6px;
    min-height:58px;
  }
  .global-brand{
    gap:6px;
    flex:1 1 auto;
    min-width:0;
  }
  .global-brand .logo{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:11px;
  }
  .global-brand-copy{min-width:0}
  .global-app-title{
    font-size:15px!important;
    margin-bottom:2px;
  }
  .global-brand-copy .global-workspace-label{
    display:block!important;
    font-size:6.8px!important;
    letter-spacing:.08em;
    margin-bottom:1px;
  }
  .global-brand-copy .global-workspace-title{
    display:block!important;
    font-size:8.5px!important;
    line-height:1.05;
    white-space:nowrap;
  }
  .global-actions{
    margin-left:auto;
    gap:3px;
    flex:0 0 auto;
  }
  .global-app-header .project-btn,
  .global-app-header .theme-btn,
  .global-app-header .how-btn{
    width:26px!important;
    min-width:26px!important;
    height:26px!important;
    min-height:26px!important;
    padding:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
  }
  .global-app-header .project-label,
  .global-app-header #themeLabel,
  .global-app-header .how-label{display:none!important}
  .global-app-header .project-icon{font-size:12px}
  .global-app-header .how-icon{width:auto;height:auto;background:transparent;font-size:10px}
  .global-app-header .lang-switch{
    height:26px!important;
    min-height:26px!important;
    padding:1px 2px!important;
    gap:0!important;
  }
  .global-app-header .lang-btn{font-size:7.5px!important;padding:1px 2px!important}
  .global-app-header .lang-switch>span{font-size:7px!important}
  .global-app-header .avatar-mode-badge{display:none!important}
}

/* Very narrow phones: preserve every button, compress only typography and spacing. */
@media (max-width:390px){
  .global-app-header{gap:3px;padding-left:4px;padding-right:4px}
  .global-brand{gap:4px}
  .global-brand .logo{width:42px;height:42px;flex-basis:42px}
  .global-app-title{font-size:13.5px!important}
  .global-brand-copy .global-workspace-label{font-size:6px!important}
  .global-brand-copy .global-workspace-title{font-size:7.6px!important}
  .global-actions{gap:2px}
  .global-app-header .project-btn,
  .global-app-header .theme-btn,
  .global-app-header .how-btn{width:24px!important;min-width:24px!important;height:24px!important;min-height:24px!important}
  .global-app-header .lang-switch{height:24px!important;min-height:24px!important}
  .global-app-header .lang-btn{font-size:7px!important;padding:1px!important}
}


/* v6.6.13 UI cleanup: spacing, button grids, no redundant workflow strip */
.workflow-strip{display:none!important}

/* More comfortable body spacing without wasting width. */
.content{padding-left:clamp(16px,2.2vw,28px);padding-right:clamp(16px,2.2vw,28px)}
.card{margin-bottom:16px}
.head{padding:15px 18px;gap:14px}
.body{padding:18px}
.main-tabs{margin-bottom:16px}
.settings-grid{margin-top:14px}
.story-maker-body{padding:16px}
.story-maker-reference{margin-top:13px;padding:12px 14px}
.story-maker-check{gap:10px}
.story-maker-check strong{display:block;margin-bottom:2px}
.story-maker-check small{display:block;line-height:1.4;color:#7f9aab}

/* Action groups with exactly three actions use a stable 3-column grid. */
.main-actions,
.story-maker-body>.toolbar{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  width:100%;
  align-items:stretch;
}
.main-actions>.btn,
.story-maker-body>.toolbar>.btn{
  width:100%;
  min-width:0;
  margin:0;
  text-align:center;
  white-space:normal;
  line-height:1.2;
}
.main-actions .status-badge{
  grid-column:1/-1;
  width:100%;
  margin:0;
  text-align:center;
  white-space:normal;
}

/* Two-action toolbars stay balanced. */
.character-card .toolbar,
.startCard .toolbar,
.animationCard .toolbar{max-width:100%}

/* Tablet */
@media (min-width:700px) and (max-width:1199px){
  .content{padding:18px 20px 30px}
  .head{padding:14px 16px}
  .body{padding:16px}
  .main-actions,.story-maker-body>.toolbar{gap:8px}
  .main-actions>.btn,.story-maker-body>.toolbar>.btn{padding:8px 7px;font-size:11.5px}
}

/* Mobile portrait: full width, comfortable side padding, three buttons remain in one row. */
@media (max-width:699px){
  .content{width:100%;padding:13px 11px 24px}
  .card{margin-bottom:12px;border-radius:12px}
  .head{padding:13px 13px;gap:9px}
  .body{padding:13px}
  .main-tabs{margin-bottom:11px}
  .main-actions,.story-maker-body>.toolbar{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .main-actions>.btn,.story-maker-body>.toolbar>.btn{
    padding:8px 4px;
    font-size:10px;
    border-radius:8px;
  }
  .story-maker-body{padding:12px}
  .story-maker-reference{padding:10px 11px;margin-top:11px}
  .story-maker-check strong{font-size:11px}
  .story-maker-check small{font-size:9.7px}
  .settings-grid{gap:9px}
}

@media (max-width:390px){
  .content{padding-left:9px;padding-right:9px}
  .head{padding-left:11px;padding-right:11px}
  .body{padding-left:11px;padding-right:11px}
  .main-actions>.btn,.story-maker-body>.toolbar>.btn{font-size:9px;padding-left:3px;padding-right:3px}
}


/* v6.6.13 stability patch: exact scene count, consistent desktop width, plain tutorial status, Clear in header */
.status-hint{
  display:block;
  grid-column:1/-1;
  margin:0;
  padding:2px 1px 0;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--muted);
  font-size:10.8px;
  line-height:1.35;
  text-align:left;
}
.main-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.global-app-header .clear-project-btn{border-color:#5e3340;color:#ff9baa;background:#1c1116}
.global-app-header .clear-project-btn:hover{border-color:#985064;background:#29141c}
body.light-theme .global-app-header .clear-project-btn{border-color:#d5aeb7;background:#fff5f6;color:#9d3d51}

/* Keep the desktop shell width identical before and after scene generation. */
@media(min-width:1200px){
  .app{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:260px minmax(0,1fr)!important;
    align-items:stretch;
  }
  .sidebar{
    width:260px!important;
    min-width:260px!important;
    max-width:260px!important;
    box-sizing:border-box;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .main{width:100%!important;min-width:0!important}
  .content{
    width:100%!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:28px!important;
    padding-right:28px!important;
    box-sizing:border-box;
  }
  body.initial-view .app{grid-template-columns:260px minmax(0,1fr)!important}
  body.initial-view .content{width:100%!important;max-width:1280px!important;margin-left:auto!important;margin-right:auto!important}
}

/* Top actions: compact enough for Save + Load + Clear + Theme + How To + language. */
@media(min-width:700px){
  .global-app-header .project-btn,
  .global-app-header .theme-btn,
  .global-app-header .how-btn{
    height:28px!important;
    min-height:28px!important;
    padding-left:7px!important;
    padding-right:7px!important;
    font-size:10px!important;
  }
  .global-actions{gap:4px!important}
}

/* Mobile/tablet remain full-width; Clear is icon-only on mobile like every other action. */
@media(max-width:699px){
  .global-app-header .clear-project-btn{
    width:26px!important;
    min-width:26px!important;
    height:26px!important;
    min-height:26px!important;
    padding:0!important;
    border-radius:50%!important;
  }
  .main-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .status-hint{font-size:9.8px;padding-top:1px}
}

/* v6.6.13 desktop shell consistency: identical width before and after generation */
@media (min-width:1200px){
  .app,
  body.initial-view .app{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:280px minmax(0,1fr)!important;
    align-items:stretch!important;
  }
  .sidebar,
  body.initial-view .sidebar{
    width:280px!important;
    min-width:280px!important;
    max-width:280px!important;
    box-sizing:border-box!important;
    padding-left:18px!important;
    padding-right:18px!important;
    overflow-x:hidden!important;
  }
  .scene-list,
  .scene{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .main,
  body.initial-view .main{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  .content,
  body.initial-view .content{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:24px 30px 34px!important;
    box-sizing:border-box!important;
  }
  .main-tabs,
  .card,
  .story-maker-details,
  .character-card{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .head{padding-left:22px;padding-right:22px}
  .body{padding-left:22px;padding-right:22px}
}

/* Tablet keeps the same page gutters regardless of generated state. */
@media (min-width:700px) and (max-width:1199px){
  .content,
  body.initial-view .content{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-left:20px!important;
    padding-right:20px!important;
    box-sizing:border-box!important;
  }
}

/* v6.7.1 Home Flow Selector + avatar scene controls */
.home-panel{width:min(1180px,calc(100% - 28px));margin:18px auto 24px;padding:18px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at top left,rgba(0,184,255,.16),transparent 35%),linear-gradient(180deg,#0b151f,#071018);box-shadow:var(--shadow)}
.home-hero{padding:8px 4px 18px}.home-kicker{display:inline-flex;margin-bottom:8px;padding:5px 9px;border:1px solid #26556f;border-radius:999px;color:#8fdfff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.home-hero h1{margin:0 0 8px;font-size:clamp(28px,4vw,48px);line-height:1.02}.home-hero p{margin:0;max-width:760px;color:var(--muted);font-size:14px;line-height:1.55}
.home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.home-card{text-align:left;border:1px solid #22445b;border-radius:18px;background:linear-gradient(180deg,#101e2a,#09131b);color:var(--text);padding:16px;min-height:205px;display:flex;flex-direction:column;gap:9px;box-shadow:0 14px 35px rgba(0,0,0,.22);transition:transform .18s ease,border-color .18s ease,background .18s ease}.home-card:hover,.home-card.info-active{transform:translateY(-2px);border-color:#24bdf2;background:linear-gradient(180deg,#132838,#0a1721)}.home-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}.home-card-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:#112b3b;border:1px solid #29576e;font-size:23px;flex:0 0 auto}.home-info-btn{width:28px;height:28px;border-radius:999px;border:1px solid #2d5a73;background:#0b2231;color:#aeeaff;font-weight:900;font-style:italic;cursor:pointer}.home-info-btn:hover,.home-info-btn:focus-visible{outline:none;border-color:#33c7ff;background:#10324a}.home-card strong{font-size:17px;line-height:1.15}.home-card small{color:var(--muted);font-size:12.5px;line-height:1.45;flex:1}.home-start-btn{width:100%;border:1px solid #245f79;background:#0d3147;color:#8fe7ff;border-radius:11px;padding:9px 10px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.home-start-btn:hover,.home-start-btn:focus-visible{outline:none;border-color:#31c5ff;background:#124461}.home-info-panel{margin-top:14px;border:1px solid #255169;border-radius:17px;background:linear-gradient(180deg,#0a1822,#071018);padding:14px;box-shadow:0 14px 34px rgba(0,0,0,.2)}.home-info-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}.home-info-head h2{margin:2px 0 0;font-size:17px}.home-info-panel p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.home-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.home-info-grid>div{border:1px solid #1d3b50;border-radius:13px;background:#07141d;padding:11px;min-width:0}.home-info-grid strong{display:block;margin-bottom:5px;font-size:11px;color:#d7f1ff}.home-info-grid p{font-size:11.5px;overflow-wrap:anywhere}
.flow-context-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding:10px 12px;border:1px solid #21465e;border-radius:14px;background:#081723}.flow-context-bar>div{min-width:0}.flow-context-bar strong{display:block;font-size:13px}.flow-context-bar span{display:block;margin-top:2px;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-action{border-color:#28566e;color:#9fe6ff;background:#0e2030}
body.workflow-home .app,body.workflow-home footer{display:none!important}body:not(.workflow-home) #homePanel{display:none!important}body.workflow-home #homeBtn{display:none!important}
body.workflow-standard #storyboardMaker,body.workflow-standard .avatar-toggle,body.workflow-dynamic #storyboardMaker{display:none!important}body.workflow-standard #flowContextBar{display:flex!important}
body.workflow-presenter #flowContextBar,body.workflow-podcast #flowContextBar,body.workflow-dynamic #flowContextBar{display:flex!important}body.workflow-presenter .avatar-toggle,body.workflow-podcast .avatar-toggle,body.workflow-dynamic .avatar-toggle{display:none!important}
body.workflow-presenter #storyboardMaker,body.workflow-podcast #storyboardMaker{display:block!important}body.workflow-presenter #storyboardMaker>summary,body.workflow-podcast #storyboardMaker>summary{cursor:default}body.workflow-presenter #fullStoryboard,body.workflow-podcast #fullStoryboard{min-height:130px}
body.workflow-presenter #storyMakerMotion,body.workflow-presenter #storyMakerPreset,body.workflow-presenter #storyMakerCamera{pointer-events:none;opacity:.75}body.workflow-podcast #storyMakerMotion,body.workflow-podcast #storyMakerPreset{pointer-events:none;opacity:.75}
body.light-theme .home-panel{background:radial-gradient(circle at top left,rgba(0,160,210,.18),transparent 35%),linear-gradient(180deg,#ffffff,#f4f8fb);border-color:#c6d8e2}body.light-theme .home-card{background:linear-gradient(180deg,#ffffff,#f5f9fb);border-color:#c8d9e3;color:#172530}body.light-theme .home-card-icon{background:#eef8fc;border-color:#c9dce6}body.light-theme .home-info-btn{background:#eef8fc;border-color:#bad3df;color:#176183}body.light-theme .home-start-btn{background:#e8f6fb;border-color:#a8cfdf;color:#176183}body.light-theme .home-info-panel{background:#f7fbfd;border-color:#c7dce8}body.light-theme .home-info-grid>div{background:#ffffff;border-color:#d3e0e8}body.light-theme .home-info-grid strong{color:#1b4054}body.light-theme .flow-context-bar{background:#f4f9fc;border-color:#c8dce7}
@media(max-width:1199px){.home-panel{width:calc(100% - 22px);margin-top:12px}.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-card{min-height:180px}.home-info-grid{grid-template-columns:1fr}.flow-context-bar span{white-space:normal}}
@media(max-width:699px){.home-panel{width:calc(100% - 16px);padding:12px;border-radius:18px;margin-top:10px}.home-hero{padding:4px 2px 13px}.home-grid{grid-template-columns:1fr;gap:9px}.home-card{min-height:0;padding:13px;border-radius:15px}.home-card-icon{width:38px;height:38px;font-size:20px}.home-info-head{flex-direction:column}.home-info-head .btn{width:100%}.home-info-panel{padding:12px;border-radius:15px}.flow-context-bar{align-items:flex-start;flex-direction:column}.flow-context-bar .btn{width:100%}}

/* v7.4.0 avatar reference + attire toggle */
.story-attire-row{display:flex;gap:10px;align-items:flex-start}.story-attire-row .story-maker-check{flex:1;min-width:0}.story-attire-untick{flex:0 0 auto;margin-top:2px}.story-attire-toggle strong{display:block}.story-attire-toggle small{display:block;margin-top:2px}@media(max-width:699px){.story-attire-row{flex-direction:column}.story-attire-untick{width:100%}}

/* v7.4.0 attire reference control state */
.story-attire-untick:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.55)}



/* v7.4.0 compact storyboard starter */
.storyboard-starter-line{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:12px;line-height:1.35;color:var(--muted)}
.storyboard-starter-line span{flex:1;min-width:0}
.storyboard-starter-line .btn{flex:0 0 auto}
@media(max-width:699px){.storyboard-starter-line{align-items:flex-start}.storyboard-starter-line .btn{padding:7px 10px}}
/* v7.4.0 guided workflow */
.guided-flow{margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(8,18,27,.72)}
.guided-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.guided-step{min-width:0;display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);cursor:pointer;text-align:left}
.guided-step span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;border:1px solid var(--line);font-weight:800}
.guided-step b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guided-step small{margin-left:auto;font-size:10px;opacity:.7}
.guided-step.active{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(35,194,255,.18)}.guided-step.complete span{border-color:#42c989}.guided-step.locked{opacity:.5;cursor:not-allowed}
.guided-checklist{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:12px}.guided-checklist>strong{margin-right:2px}.check-item{padding:5px 8px;border:1px solid var(--line);border-radius:999px}.check-item.optional{opacity:.75}.check-item.done{border-color:#42c989}
.step-warning{margin-top:10px;padding:9px 11px;border-radius:10px;border:1px solid #d99b35;background:rgba(217,155,53,.12);font-size:12px;line-height:1.4}
body.light-theme .guided-flow{background:#f7fbfd} body.light-theme .guided-step{background:#fff}
@media(max-width:699px){.guided-flow{padding:9px;overflow:hidden}.guided-steps{display:flex;overflow-x:auto;gap:7px;padding-bottom:2px;scrollbar-width:thin}.guided-step{flex:0 0 150px}.guided-checklist{align-items:flex-start}.check-item{max-width:100%}}
.main-tab.locked{opacity:.48;cursor:not-allowed}

/* v7.4.2 flow polish */
.character-next-wrap{margin-top:16px;padding-top:14px;border-top:1px solid var(--line,#d9e1ea)}
.character-attach-note{margin:10px 0 12px;padding:10px 12px;border:1px solid rgba(15,118,110,.24);border-radius:12px;background:rgba(15,118,110,.07);font-size:.92rem;line-height:1.45}
.character-attach-note .attach-note-help{margin-top:4px;opacity:.78;font-size:.86rem}
@media(max-width:640px){.character-next-wrap .btn{width:100%}.character-attach-note{font-size:.88rem}}

/* v7.5.5 MOBILE PORTRAIT ONLY — viewport-fit safety. No tablet/desktop/landscape changes. */
@media (max-width:699px) and (orientation:portrait){
  html,body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  .app,.main,.content,.main-tab-panel,.card,.head,.body,
  .global-app-header,.global-header-inner,.global-workspace,.global-actions,
  .home-panel,.home-grid,.home-card,.home-info-panel,.flow-context-bar,
  .guided-flow,.guided-checklist,.story-maker-details,.story-maker-body,
  .story-maker-grid,.story-maker-reference,.character-grid,.character-card,
  .settings-grid,.section-actions,.toolbar,.main-actions,.scene-nav{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .content{padding-left:9px!important;padding-right:9px!important}
  .home-panel{width:calc(100% - 12px)!important;margin-left:auto!important;margin-right:auto!important}
  .head>*,.body>*,.toolbar>*,.main-actions>*,.settings-grid>*,
  .story-maker-grid>*,.character-grid>*,.flow-context-bar>*{
    min-width:0!important;
    max-width:100%!important;
  }
  input:not([type="checkbox"]):not([type="radio"]),textarea,select{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }
  button,.btn,.project-btn{max-width:100%}
  pre,code,.prompt,.json-output{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
  img,svg,video,canvas{max-width:100%!important;height:auto}
}

/* v7.5.5 workflow scope: parser-safe storyboard starter applies only to Standard and Avatar Dynamic. */
body.workflow-presenter .storyboard-starter-line,body.workflow-podcast .storyboard-starter-line{display:none!important}

/* v7.5.5 Optional Groq AI assistant + adaptive film-look controls */
.ai-btn{display:inline-flex;align-items:center;gap:.42rem;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;padding:.55rem .72rem;cursor:pointer;font:inherit}
.ai-btn:hover{border-color:var(--cyan);box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 35%,transparent)}
.ai-icon{font-size:1rem;line-height:1}.ai-header-dot{width:.48rem;height:.48rem;border-radius:50%;background:#6f7782;display:inline-block;box-shadow:0 0 0 2px rgba(255,255,255,.05)}
.ai-header-dot.connected{background:#ffd84d;box-shadow:0 0 0 2px rgba(255,216,77,.16),0 0 12px rgba(255,216,77,.75)}.ai-header-dot.busy{background:#f3b83f;animation:aiPulse 1s ease-in-out infinite}.ai-header-dot.limited{background:#ef8b3a;box-shadow:0 0 0 2px rgba(239,139,58,.18)}
@keyframes aiPulse{50%{opacity:.35}}
.ai-action{border-color:color-mix(in srgb,var(--cyan) 55%,var(--border));}
.ai-inline-toolbar{justify-content:flex-end;margin-top:.55rem}
.ai-dialog{width:min(1120px,94vw);max-height:90vh}
.ai-body{display:grid;gap:1rem;overflow:auto}
.ai-connect-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);gap:.9rem}
.ai-connect-grid label,.ai-result-grid label{display:block;font-weight:700;margin-bottom:.35rem}
.ai-key-row{display:grid;grid-template-columns:1fr auto;gap:.45rem}.ai-key-row input,.ai-connect-grid select{width:100%;min-height:42px}
.ai-remember{display:flex;align-items:center;gap:.5rem;font-size:.92rem}.ai-remember input{width:auto}
.ai-connect-actions,.ai-tools{align-items:center;flex-wrap:wrap}.ai-security-note{margin:0}
.ai-tool-section{display:grid;gap:.8rem;border-top:1px solid var(--border);padding-top:.9rem}.ai-target-line{font-size:.95rem}.ai-busy{font-weight:700;color:var(--cyan)}
.ai-result-wrap{display:grid;gap:.75rem}.ai-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.ai-result-grid textarea{min-height:260px;width:100%;resize:vertical}
.ai-audit-note{padding:.6rem .75rem;border:1px solid var(--border);border-radius:10px;background:var(--panel-2,rgba(127,127,127,.08));font-size:.9rem}

@media (max-width:760px){
  .ai-label{display:none}.ai-btn{padding:.55rem}.ai-connect-grid,.ai-result-grid{grid-template-columns:1fr}.ai-dialog{width:96vw}.ai-result-grid textarea{min-height:210px}.ai-connect-actions .status-hint{width:100%}
}

/* v7.5.5 Free-tier optimized Groq mode */
.ai-free-mode{align-items:flex-start;padding:.72rem .8rem;border:1px solid color-mix(in srgb,var(--cyan) 30%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--cyan) 6%,transparent)}
.ai-free-mode span{display:grid;gap:.18rem}.ai-free-mode small{font-weight:400;line-height:1.35;color:var(--muted)}
.ai-rate-status,.ai-token-plan{font-size:.86rem;line-height:1.4;color:var(--muted);padding:.48rem .62rem;border-radius:9px;background:var(--panel-2,rgba(127,127,127,.08));border:1px solid var(--border)}
.ai-token-plan{border-style:dashed}

.ai-limit-warning{font-size:.9rem;line-height:1.45;padding:.7rem .8rem;border-radius:10px;border:1px solid color-mix(in srgb,#ef8b3a 55%,var(--border));background:color-mix(in srgb,#ef8b3a 10%,var(--panel));color:var(--text);font-weight:650}
.ai-tools button:disabled{opacity:.48;cursor:not-allowed;filter:saturate(.55)}

/* v7.5.5 Quick AI Assist: inline assist opens actions/results, not Groq settings */
.ai-quick-dialog{width:min(1080px,94vw);max-height:90vh}
.ai-quick-body{display:grid;gap:.85rem;overflow:auto}
.ai-quick-setup{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.8rem;border:1px solid var(--border);border-radius:10px;background:var(--panel-2,rgba(127,127,127,.08))}
.ai-quick-message{font-size:.92rem;line-height:1.45;color:var(--muted)}
.ai-quick-prompt{font-weight:750;margin-bottom:.05rem}
.ai-quick-tools{gap:.5rem}
@media(max-width:700px){.ai-quick-dialog{width:96vw}.ai-quick-tools .btn{flex:1 1 calc(50% - .5rem)}.ai-quick-setup .btn{width:100%}}


/* workflow mode simplification + refined navy/gold accent */
:root{--gold:#d5aa54;--gold-soft:#f0d79a}
.workflow-mode-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #304255;background:linear-gradient(135deg,#0a1621,#0b121a);border-radius:14px;padding:12px 14px;margin:0 0 14px;box-shadow:0 10px 28px rgba(0,0,0,.12)}
.workflow-mode-copy{display:flex;flex-direction:column;gap:3px;min-width:190px}.workflow-mode-copy strong{font-size:12px;color:var(--gold-soft)}.workflow-mode-copy span{font-size:10.8px;color:var(--muted)}
.mode-choice-row,.mode-choice-grid{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.mode-choice-grid{max-width:760px}
.mode-choice-btn{border:1px solid #33485b;background:#0c1822;color:#bad0df;border-radius:999px;padding:7px 11px;font-size:10.8px;font-weight:800;transition:.16s;white-space:normal;text-align:center}.mode-choice-btn:hover{border-color:#8c7445;color:#f2dfb3;background:#171a1b}.mode-choice-btn.active{border-color:#c49b4a;background:#3a2d16;color:#ffe9b5;box-shadow:0 0 0 2px rgba(213,170,84,.10)}
.home-card[data-flow-card="standard"] .home-card-icon,.home-card[data-flow-card="dynamic"] .home-card-icon{filter:saturate(.9)}
.home-card.info-active{border-color:#8f7440!important;box-shadow:0 12px 34px rgba(0,0,0,.18),0 0 0 1px rgba(213,170,84,.12)!important}
body.light-theme .workflow-mode-panel{border-color:#d3c49f;background:linear-gradient(135deg,#fffdf8,#f7fafc)}body.light-theme .workflow-mode-copy strong{color:#75591f}body.light-theme .mode-choice-btn{border-color:#c8d3dc;background:#fff;color:#3f5665}body.light-theme .mode-choice-btn:hover{border-color:#b69756;background:#fffaf0;color:#6e551f}body.light-theme .mode-choice-btn.active{border-color:#b18a3d;background:#fff2cf;color:#694f18;box-shadow:0 0 0 2px rgba(177,138,61,.10)}
@media(max-width:900px){.workflow-mode-panel{align-items:flex-start;flex-direction:column}.mode-choice-row,.mode-choice-grid{justify-content:flex-start;max-width:none}}
@media(max-width:575px){.mode-choice-row,.mode-choice-grid{display:grid;grid-template-columns:1fr;width:100%}.mode-choice-btn{width:100%;border-radius:10px;padding:9px 10px}.workflow-mode-panel{padding:11px}}

/* static workflows expose only essential controls */
body.workflow-presenter .story-maker-advanced-row,body.workflow-podcast .story-maker-advanced-row{display:none!important}

/* ShotBoard-style guided Standard flow + light Dynamic adaptation */
.shotboard-flow{margin:0 0 14px;border:1px solid #2f4d62;background:linear-gradient(145deg,rgba(13,27,39,.96),rgba(8,16,24,.98));border-radius:18px;padding:16px;box-shadow:0 18px 44px rgba(0,0,0,.18)}
.shotboard-flow-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:13px}.shotboard-flow-head.compact{margin-bottom:10px}.shotboard-flow-head h2{margin:2px 0 4px;font-size:18px;line-height:1.2}.shotboard-flow-head p{margin:0;color:#8ba1b2;font-size:11.5px;max-width:690px}.shotboard-kicker{display:block;color:#d8b765;font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:900}
.shotboard-mini-steps{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.shotboard-mini-steps span{border:1px solid #30485a;background:#0a151e;color:#7890a1;border-radius:999px;padding:5px 8px;font-size:9.5px;font-weight:800;white-space:nowrap}.shotboard-mini-steps span.active{border-color:#a98231;background:#251e0e;color:#f1d892}
.shotboard-input-card,.shotboard-stage{border:1px solid #20394d;background:#09131c;border-radius:14px;padding:13px}.shotboard-stage{margin-top:12px}.shotboard-input-card textarea,.shotboard-stage textarea{background:#060d13}.shotboard-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px;max-width:520px}.shotboard-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.shotboard-status{font-size:10.5px;color:#8198a9;line-height:1.4}.shotboard-stage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.shotboard-stage-head>div{display:grid;grid-template-columns:27px 1fr;column-gap:8px;align-items:center}.shotboard-stage-head small{grid-column:2;color:#8097a8;font-size:10.5px}.shotboard-step-no{grid-row:1 / span 2;width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:#1f3240;color:#f0cc76;font-weight:900}.shotboard-advice{border:1px solid #5b4c28;background:#17140b;color:#d7c28b;border-radius:10px;padding:9px 10px;font-size:10.8px;margin-bottom:10px}.shotboard-prompt-list{display:grid;gap:11px}.shotboard-prompt-card{border:1px solid #233d50;background:#071018;border-radius:12px;padding:11px}.shotboard-prompt-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.shotboard-prompt-head strong{font-size:12px}.shotboard-prompt-head small{display:block;color:#7f98aa;font-size:10px;margin-top:2px}.shotboard-image-prompt{font-family:Menlo,Consolas,monospace;font-size:11.7px;line-height:1.52}.shotboard-tutorial{margin-top:9px;border-top:1px solid #20384a;padding-top:9px;color:#8fa5b5;font-size:10.8px}.shotboard-tutorial strong{color:#d7bf82}.shotboard-tutorial p{margin:5px 0 0;white-space:pre-line}.dynamic-quick-flow{border-color:#284a5f}
.workflow-standard #storyboardMaker,.workflow-standard .storyboard-starter-line,.workflow-standard #fullStoryboard,.workflow-standard .ai-inline-toolbar{display:none!important}
.workflow-standard #workflowSetupSection{margin-top:0}
body.light-theme .shotboard-flow{border-color:#c6d5df;background:linear-gradient(145deg,#fff,#f5f9fb);box-shadow:0 14px 32px rgba(37,66,85,.09)}body.light-theme .shotboard-flow-head p,body.light-theme .shotboard-status,body.light-theme .shotboard-stage-head small{color:#607583}.light-theme .shotboard-kicker{color:#8a6619}.light-theme .shotboard-mini-steps span{border-color:#cbd7df;background:#f6f9fb;color:#607583}.light-theme .shotboard-mini-steps span.active{border-color:#c7a75d;background:#fff8e7;color:#715317}.light-theme .shotboard-input-card,.light-theme .shotboard-stage,.light-theme .shotboard-prompt-card{border-color:#cbd8e1;background:#fbfdfe}.light-theme .shotboard-input-card textarea,.light-theme .shotboard-stage textarea{background:#fff}.light-theme .shotboard-step-no{background:#eef3f6;color:#81601d}.light-theme .shotboard-advice{border-color:#dbc68f;background:#fff9e9;color:#665320}.light-theme .shotboard-tutorial{border-top-color:#d7e1e8;color:#5e7381}.light-theme .shotboard-tutorial strong{color:#76581c}
@media(max-width:760px){.shotboard-flow-head{flex-direction:column}.shotboard-mini-steps{justify-content:flex-start}.shotboard-controls{grid-template-columns:1fr}.shotboard-actions .btn{flex:1 1 auto}.shotboard-flow{padding:12px;border-radius:14px}}

.guided-character-stage{margin-top:1rem;padding-top:.9rem;border-top:1px solid rgba(148,163,184,.25)}
.guided-video-cta{margin-top:1rem;padding:1rem;border:1px solid rgba(166,120,30,.25);border-radius:16px;display:flex;gap:1rem;align-items:center;justify-content:space-between;background:rgba(166,120,30,.06)}
.guided-video-cta p{margin:.25rem 0 0;color:var(--muted)}
@media(max-width:720px){.guided-video-cta{align-items:stretch;flex-direction:column}.guided-video-cta .btn{width:100%}}

/* v7.5.22 Standard guided-flow separation */
.shotboard-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.shotboard-section-head>div{display:flex;flex-direction:column;gap:3px}.shotboard-section-head strong{font-size:12.5px}.shotboard-section-head small{color:#8097a8;font-size:10.5px;line-height:1.45}.guided-video-cta{margin-top:14px;border:1px solid #2c4658;background:#08131c;border-radius:12px;padding:12px;display:flex;justify-content:space-between;gap:12px;align-items:center}.guided-video-cta p{margin:4px 0 0;color:#829aaa;font-size:10.5px;max-width:650px}.btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.45);box-shadow:none}.btn:disabled:hover{transform:none}.light-theme .shotboard-section-head small,.light-theme .guided-video-cta p{color:#607583}.light-theme .guided-video-cta{border-color:#cbd8e1;background:#fbfdfe}@media(max-width:760px){.shotboard-section-head,.guided-video-cta{flex-direction:column;align-items:stretch}.shotboard-section-head .btn,.guided-video-cta .btn{width:100%}}

.shotboard-mini-steps span.locked{opacity:.38;filter:saturate(.35)}.shotboard-mini-steps span.complete{border-color:#416b54;background:#102218;color:#9dd8ae}.light-theme .shotboard-mini-steps span.complete{border-color:#9ac3a8;background:#eff9f2;color:#356846}.light-theme .shotboard-mini-steps span.locked{opacity:.42}
/* Standard guided flow owns generation; prevent bypass through the legacy Generate Scenes toolbar. */
body.workflow-standard #workflowGenerateSection{display:none!important}

/* v7.5.22 Standard optional avatar reference */
.standard-avatar-option{margin-top:10px;display:grid;grid-template-columns:minmax(190px,240px) minmax(180px,260px);gap:5px 10px;align-items:end;max-width:620px}.standard-avatar-option label{font-size:11px;font-weight:800}.standard-avatar-option select{grid-column:2;grid-row:1 / span 2}.standard-avatar-option small{grid-column:1;color:var(--muted);font-size:10px;line-height:1.4}.standard-avatar-target{grid-column:1 / -1;color:var(--gold-soft)!important;font-weight:750}.light-theme .standard-avatar-target{color:#75591f!important}@media(max-width:620px){.standard-avatar-option{grid-template-columns:1fr}.standard-avatar-option select,.standard-avatar-option small{grid-column:1;grid-row:auto}}

/* v7.5.22 home Groq optional setup - separate from workflow selector grid */
.home-groq-card{margin:0 0 16px;border:1px solid #2b5266;border-radius:16px;background:linear-gradient(180deg,rgba(14,35,48,.92),rgba(7,20,29,.92));padding:13px 14px;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.home-groq-main{display:grid;grid-template-columns:minmax(180px,.45fr) minmax(420px,1fr);gap:14px;align-items:center}.home-groq-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.home-groq-copy strong{font-size:14px}.home-groq-copy small{display:block;margin-top:5px;color:var(--muted);font-size:11.5px;line-height:1.45}.home-groq-badge{border:1px solid #806d2e;background:rgba(255,216,77,.08);color:#ffe483;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.home-groq-dot{width:10px;height:10px;border-radius:50%;background:#66717a;box-shadow:0 0 0 3px rgba(255,255,255,.04);flex:0 0 auto}.home-groq-dot.connected{background:#ffd84d;box-shadow:0 0 0 3px rgba(255,216,77,.12),0 0 13px rgba(255,216,77,.78)}.home-groq-dot.busy{background:#f3b83f;animation:aiPulse 1s ease-in-out infinite}.home-groq-dot.limited{background:#ef8b3a}.home-groq-connect{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}.home-groq-connect input{min-width:0;width:100%;border:1px solid var(--border);background:var(--input);color:var(--text);border-radius:10px;padding:9px 10px;font:inherit}.home-groq-status{margin-top:8px;color:var(--muted);font-size:10.5px}.home-groq-remember{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 4px;color:var(--muted);font-size:10.5px;font-weight:800;white-space:nowrap}.home-groq-remember input{width:auto;margin:0;accent-color:#ffd84d}.home-groq-connect .btn.connected{background:#ffd84d;border-color:#ffd84d;color:#17130a;opacity:1;box-shadow:0 0 14px rgba(255,216,77,.25)}.home-groq-tutorial{margin-top:9px;border-top:1px solid rgba(130,175,200,.18);padding-top:8px}.home-groq-tutorial summary{cursor:pointer;color:#bfeaff;font-size:10.5px;font-weight:800}.home-groq-tutorial ol{margin:8px 0 6px;padding-left:19px;color:var(--muted);font-size:10.5px;line-height:1.5}.home-groq-link{display:inline-flex;color:#8fe7ff;font-size:10.5px;font-weight:800;text-decoration:none}.home-groq-link:hover{text-decoration:underline}.ai-btn.ai-connected .ai-icon{color:#ffd84d;text-shadow:0 0 10px rgba(255,216,77,.8)}body.light-theme .home-groq-card{background:#f8fcfe;border-color:#c6dbe5}body.light-theme .home-groq-tutorial summary{color:#1c607e}body.light-theme .home-groq-link{color:#176183}@media(max-width:900px){.home-groq-main{grid-template-columns:1fr}.home-groq-connect{grid-template-columns:minmax(0,1fr) auto auto}}@media(max-width:620px){.home-groq-card{padding:11px}.home-groq-connect{grid-template-columns:1fr 1fr}.home-groq-connect input{grid-column:1 / -1}.home-groq-connect .btn{width:100%}}