/* Loriginary v4.0 UX22 overrides
   Core rule: all visual generation remains comic / RPG illustration / animation.
   Camera and realism vocabulary is simulation guidance only. */

body.v4ux22-ui{--ux22-help:#f5d65b;--ux22-help-bg:rgba(102,78,6,.18)}

/* MAIN NAV: uniform typography, CONTENT-DEPENDENT button widths, wrapping allowed. */
body.v4ux22-ui #appShell .primary-nav{
  display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:center!important;
  gap:2px!important;padding:0 4px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin;
}
body.v4ux22-ui #appShell .primary-nav .nav-btn,body.v4ux22-ui #appShell .primary-nav .nav-anchor{
  flex:0 0 auto!important;box-sizing:border-box!important;min-width:0!important;max-width:none!important;
  height:40px!important;min-height:40px!important;padding:4px 5px!important;margin:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:normal!important;overflow-wrap:normal!important;
  font-family:inherit!important;font-size:10.5px!important;font-weight:700!important;font-style:normal!important;line-height:1.02!important;
  letter-spacing:.012em!important;text-transform:none!important;text-decoration:none!important;
}
body.v4ux22-ui #appShell .primary-nav [data-route="dashboard"]{width:70px!important}
body.v4ux22-ui #appShell .primary-nav [data-route="create"]{width:48px!important}
body.v4ux22-ui #appShell .primary-nav .cards-nav{width:58px!important}
body.v4ux22-ui #appShell .primary-nav .prompt-nav{width:58px!important}
body.v4ux22-ui #appShell .primary-nav .converter-nav{width:60px!important}
body.v4ux22-ui #appShell .primary-nav [data-route="library"]{width:50px!important}
body.v4ux22-ui #appShell .primary-nav [data-route="collections"]{width:64px!important}
body.v4ux22-ui #appShell .primary-nav [data-route="projects"]{width:54px!important}
body.v4ux22-ui #appShell .primary-nav .story-nav{width:54px!important}
body.v4ux22-ui #appShell .primary-nav [data-route="gallery"]{width:50px!important}
body.v4ux22-ui #appShell .primary-nav [data-route="templates"]{width:58px!important}
body.v4ux22-ui #appShell .primary-nav .uhu-nav{width:34px!important}
body.v4ux22-ui #appShell .primary-nav [data-route="account"]{width:40px!important}
body.v4ux22-ui #appShell .primary-nav .qa-nav{width:37px!important}
body.v4ux22-ui #appShell .primary-nav [data-route="help"]{width:38px!important}
body.v4ux22-ui #appShell .primary-nav .faq-nav{width:36px!important}
body.v4ux22-ui #appShell .primary-nav .cards-nav,body.v4ux22-ui #appShell .primary-nav .prompt-nav,body.v4ux22-ui #appShell .primary-nav .converter-nav,body.v4ux22-ui #appShell .primary-nav .story-nav,
body.v4ux22-ui #appShell .primary-nav .uhu-nav,body.v4ux22-ui #appShell .primary-nav .qa-nav,body.v4ux22-ui #appShell .primary-nav .faq-nav,.primary-nav .nav-overflow-source{
  min-width:0!important;max-width:none!important;white-space:normal!important;
}
body.v4ux22-ui #appShell .primary-nav .nav-btn>span,body.v4ux22-ui #appShell .primary-nav .nav-anchor>span{display:inline!important;width:auto!important;white-space:normal!important;font:inherit!important;line-height:inherit!important}
@media(max-width:1120px){body.v4ux22-ui #appShell .primary-nav{justify-content:flex-start!important}}

/* Three-column workspace: left and right rails truly scroll on their own. */
@media(min-width:1121px){
  body.v4ux22-ui .workspace-grid{align-items:start!important;min-height:0!important}
  body.v4ux22-ui .workspace-sidebar,
  body.v4ux22-ui .inspector-panel{
    position:sticky!important;top:var(--sticky-panel-top,122px)!important;
    height:calc(100dvh - var(--sticky-panel-top,122px) - 10px)!important;
    max-height:none!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior:contain!important;scrollbar-gutter:stable!important;
  }
  body.v4ux22-ui .editor-panel{min-height:0!important}
}

/* Reference library cards: smaller previews, readable actions, direct open affordance. */
body.v4ux22-ui .media-card-preview{height:138px!important;min-height:138px!important;max-height:138px!important}
body.v4ux22-ui .media-card-preview img{width:100%!important;height:100%!important;object-fit:contain!important;cursor:zoom-in!important}
body.v4ux22-ui .media-card-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
body.v4ux22-ui .media-card-actions button{min-width:0!important;min-height:35px!important;height:auto!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.08!important;padding:6px!important}

/* Prompt Studio reference controls: restore the separate choices and stop text collisions. */
body.v4ux22-ui .prompt-reference-identity-mode{min-width:0!important;max-width:100%!important}
body.v4ux22-ui .prompt-reference-subsection.main-version .prompt-reference-choice-row,
body.v4ux22-ui .prompt-reference-subsection.variant-version .prompt-reference-choice-row{
  display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;gap:7px!important;
}
body.v4ux22-ui .prompt-reference-choice-row label{
  display:flex!important;align-items:center!important;gap:6px!important;min-width:88px!important;max-width:190px!important;
  width:auto!important;min-height:38px!important;height:auto!important;padding:6px 8px!important;margin:0!important;
  white-space:normal!important;overflow:visible!important;line-height:1.1!important;
}
body.v4ux22-ui .prompt-reference-choice-row label span{font-size:11.5px!important;line-height:1.12!important;white-space:normal!important;overflow-wrap:anywhere!important}
body.v4ux22-ui .prompt-reference-strip{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(126px,158px))!important;gap:8px!important;align-items:start!important}
body.v4ux22-ui .prompt-reference-slot{width:100%!important;min-width:0!important;max-width:158px!important}
body.v4ux22-ui .prompt-reference-image{height:96px!important;min-height:96px!important;max-height:96px!important;aspect-ratio:auto!important;margin:0!important}
body.v4ux22-ui .prompt-reference-image img{display:block!important;width:100%!important;height:100%!important;max-height:96px!important;object-fit:contain!important}
body.v4ux22-ui .prompt-reference-slot figcaption{font-size:11px!important;line-height:1.15!important;min-height:28px!important;overflow-wrap:anywhere!important}
body.v4ux22-ui .prompt-reference-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
body.v4ux22-ui .prompt-reference-actions button,
body.v4ux22-ui .prompt-reference-pack-tools button{
  min-width:0!important;height:auto!important;min-height:33px!important;padding:5px 6px!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.07!important;
}
body.v4ux22-ui .prompt-reference-pack-tools{display:flex!important;flex-wrap:wrap!important;gap:7px!important}

/* Yellow help / workflow dropdowns use one unmistakable treatment throughout the site. */
body.v4ux22-ui details.new-ai-guide,
body.v4ux22-ui .page-workflow-guide,
body.v4ux22-ui details.workflow-guide{
  border:1px solid rgba(245,214,91,.55)!important;background:var(--ux22-help-bg)!important;box-shadow:inset 0 0 0 1px rgba(245,214,91,.06)!important;
}
body.v4ux22-ui details.new-ai-guide>summary,
body.v4ux22-ui .page-workflow-guide>summary,
body.v4ux22-ui details.workflow-guide>summary{color:var(--ux22-help)!important;font-weight:800!important}
body.v4ux22-ui .new-ai-steps strong{color:#fff3a9!important;border-color:rgba(245,214,91,.55)!important}
body.v4ux22-ui .prompt-knowledge-export-help{padding:8px 10px!important;border-left:3px solid var(--ux22-help)!important;background:rgba(245,214,91,.07)!important}

/* Percentage controls gained four independent production dimensions in UX22. */
body.v4ux22-ui .prompt-influence-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}

/* Story Studio Creator Labs */
body.v4ux22-ui .ux22-creator-labs{margin:12px 0 14px;padding:12px;border:1px solid rgba(57,170,229,.3);border-radius:12px;background:linear-gradient(135deg,rgba(8,35,52,.82),rgba(7,17,26,.88))}
body.v4ux22-ui .ux22-labs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
body.v4ux22-ui .ux22-labs-head h3{margin:2px 0 4px}.ux22-labs-head p{margin:0;max-width:760px;opacity:.78}
body.v4ux22-ui .ux22-labs-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
body.v4ux22-ui .ux22-labs-actions button,body.v4ux22-ui .ux22-labs-actions a{white-space:normal!important;line-height:1.08!important}

/* UX22 self-contained modal system */
.ux22-modal-backdrop{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.78);display:grid;place-items:center;padding:18px}
.ux22-modal{width:min(1120px,96vw);max-height:92vh;overflow:auto;background:#08131d;border:1px solid #31536b;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.65);color:#eef7ff}
.ux22-modal.ux22-modal-wide{width:min(1380px,97vw)}
.ux22-modal-head{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;background:#0a1721;border-bottom:1px solid #243d4f}
.ux22-modal-head h2{margin:0;font-size:18px}.ux22-close{width:34px;height:34px;border-radius:8px;border:1px solid #456071;background:#122532;color:#fff;font-size:20px;cursor:pointer}
.ux22-modal-body{padding:14px}.ux22-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ux22-form-grid .wide{grid-column:1/-1}
.ux22-field{display:grid;gap:5px}.ux22-field span{font-size:12px;font-weight:700}.ux22-field input,.ux22-field select,.ux22-field textarea{width:100%;box-sizing:border-box;border:1px solid #385466;background:#061019;color:#fff;border-radius:8px;padding:8px;font:inherit}.ux22-field textarea{min-height:92px;resize:vertical}
.ux22-modal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.ux22-modal-actions button,.ux22-modal-actions a{border:1px solid #385b70;border-radius:8px;background:#0d2b3e;color:#fff;padding:8px 11px;font-weight:700;text-decoration:none;cursor:pointer}.ux22-modal-actions .primary{background:#0d8bd3;border-color:#25aaf1}.ux22-modal-actions .danger{border-color:#743f47;color:#ffb7c0}
.ux22-output{margin-top:12px;white-space:pre-wrap;background:#03090e;border:1px solid #2a4050;border-radius:9px;padding:11px;max-height:270px;overflow:auto;font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace}

/* Layout Template Lab */
.ux22-layout-shell{display:grid;grid-template-columns:250px minmax(360px,1fr) 260px;gap:12px;align-items:start}
.ux22-layout-panel{background:#07111a;border:1px solid #263d4c;border-radius:10px;padding:10px}.ux22-layout-panel h3{font-size:13px;margin:0 0 9px}.ux22-placeholder-palette{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ux22-placeholder-palette button{min-width:0;padding:7px 5px;border-radius:7px;border:1px solid #35566b;background:#0c2230;color:#fff;font-size:11px;cursor:pointer;white-space:normal;line-height:1.05}
.ux22-layout-stage-wrap{display:grid;place-items:center;min-height:610px;background:repeating-conic-gradient(#101b23 0 25%,#0c151c 0 50%) 0/20px 20px;border:1px solid #2b4657;border-radius:10px;padding:16px;overflow:auto}
.ux22-layout-stage{position:relative;width:min(100%,650px);aspect-ratio:2/3;background:#eef1f4;color:#0b1720;box-shadow:0 10px 32px rgba(0,0,0,.45);overflow:hidden;touch-action:none}
.ux22-layout-stage.border-thin{outline:2px solid #101820;outline-offset:-9px}.ux22-layout-stage.border-double{outline:6px double #101820;outline-offset:-12px}.ux22-layout-stage.border-frame{box-shadow:inset 0 0 0 16px #101820,0 10px 32px rgba(0,0,0,.45)}
.ux22-layout-stage.locked .ux22-layout-item{cursor:default}.ux22-layout-item{position:absolute;display:grid;place-items:center;text-align:center;padding:4px;box-sizing:border-box;border:2px dashed #165f88;background:rgba(37,153,213,.12);font:700 11px/1.05 system-ui;color:#07334c;cursor:move;user-select:none;overflow:hidden}
.ux22-layout-item.selected{border-style:solid;border-color:#e59e00;background:rgba(255,190,35,.18)}.ux22-layout-item[data-kind="image"]{background:repeating-linear-gradient(45deg,rgba(37,153,213,.08),rgba(37,153,213,.08) 8px,rgba(37,153,213,.17) 8px,rgba(37,153,213,.17) 16px);background-size:cover;background-position:center}.ux22-layout-item .resize{position:absolute;width:14px;height:14px;right:-1px;bottom:-1px;background:#e59e00;cursor:nwse-resize}
.ux22-layout-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.8}.ux22-layout-inspector{display:grid;gap:7px}.ux22-layout-inspector .coords{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ux22-layout-status{font-size:11px;opacity:.72;margin-top:8px}
@media(max-width:900px){.ux22-layout-shell{grid-template-columns:1fr}.ux22-layout-stage-wrap{min-height:440px}.ux22-form-grid{grid-template-columns:1fr}.ux22-form-grid .wide{grid-column:auto}}

/* Save-folder progress chip set by runtime while background sync is active. */
body.v4ux22-ui.ux22-disk-syncing .save-protection-chip::after{content:" • SYNCING";opacity:.8}


/* UX22 hard override: QA Lab and every nav label may wrap cleanly; older ID-scoped nowrap rules cannot win. */
body.v4ux22-ui #appShell .primary-nav>.nav-btn.qa-nav[data-route="qa"],
body.v4ux22-ui #appShell .primary-nav>.nav-btn.qa-nav[data-route="qa"]>span,
body.v4ux22-ui #appShell .primary-nav>.converter-nav>span,
body.v4ux22-ui #appShell .primary-nav>.cards-nav>span,
body.v4ux22-ui #appShell .primary-nav>.prompt-nav>span,
body.v4ux22-ui #appShell .primary-nav>.story-nav>span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:normal!important;overflow-wrap:normal!important;max-width:none!important}
body.v4ux22-ui #appShell .primary-nav>.nav-btn.qa-nav[data-route="qa"]{width:37px!important;min-width:37px!important;max-width:37px!important;height:40px!important;min-height:40px!important;font-size:10.5px!important;line-height:1.02!important;padding:4px 3px!important;flex-direction:row!important}

/* QA Lab itself: no labels/messages running together or clipping. */
body.v4ux22-ui .qa-summary-grid article{min-width:0!important;flex-wrap:wrap!important}
body.v4ux22-ui .qa-summary-grid span,body.v4ux22-ui .qa-group>h3,body.v4ux22-ui .qa-group>h3 span,body.v4ux22-ui .qa-row strong,body.v4ux22-ui .qa-row small{white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}
body.v4ux22-ui .qa-group>h3{gap:8px!important;flex-wrap:wrap!important}
body.v4ux22-ui .qa-row{min-width:0!important}
body.v4ux22-ui .qa-row div{min-width:0!important;max-width:100%!important}