/* Viewport shell shared by production client pages. No fixed-size/scaled design canvas. */
html.lj-client-shell{--lj-sidebar-width:248px;--lj-window-height:34px;height:100%;background:#13141c}
html.lj-client-shell body{margin:0;min-width:0!important;min-height:0!important;height:100vh;height:100dvh;overflow:hidden;background:#13141c;font-size:15px;line-height:1.6}
html.lj-client-shell #root{height:100%;width:100%}
html.lj-client-shell .app{width:100%!important;max-width:none;min-width:0;min-height:0!important;height:100vh!important;height:100dvh!important;margin:0!important;zoom:1!important;overflow:hidden}
html.lj-client-shell .window{height:var(--lj-window-height);flex-shrink:0}
html.lj-client-shell .layout{display:grid;grid-template-columns:var(--lj-sidebar-width) minmax(0,1fr);height:calc(100% - var(--lj-window-height));min-height:0}
html.lj-client-shell .sidebar{width:auto;min-width:0;height:100%;min-height:0;padding:20px 12px 12px;display:flex;flex-direction:column;overflow:hidden}
html.lj-client-shell .sidebar .brand{margin:0 10px 18px;gap:10px;font-size:23px;letter-spacing:1px;flex-shrink:0}
html.lj-client-shell .sidebar .logo{width:36px;height:36px;flex-shrink:0}
html.lj-client-shell .sidebar .brand small{font-size:8px;letter-spacing:1.6px;white-space:nowrap}
html.lj-client-shell .lj-nav-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
html.lj-client-shell .sidebar .nav{height:42px;min-height:42px;margin:2px 0;padding:0 11px;gap:11px;font-size:14px;white-space:nowrap}
html.lj-client-shell .sidebar .nav svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html.lj-client-shell .sidebar .group{padding:20px 11px 8px;font-size:12px}
html.lj-client-shell .sidebar-bottom{margin-top:8px;flex-shrink:0}
html.lj-client-shell .sidebar .balance{padding:12px;margin:0 0 12px}
html.lj-client-shell .sidebar .user{padding:0 3px;font-size:13px;gap:9px}
html.lj-client-shell .sidebar .avatar{flex-shrink:0;width:30px;height:30px}
html.lj-client-shell .lj-user-copy{min-width:0;flex:1}
html.lj-client-shell .lj-user-copy>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.lj-client-shell .main{min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative}
html.lj-client-shell .topbar{min-height:62px;height:auto;flex-shrink:0;padding:14px 28px;gap:15px}
html.lj-client-shell .topbar>span{min-width:0}
html.lj-client-shell .topactions{gap:16px;flex-wrap:wrap;justify-content:flex-end}
html.lj-client-shell .main>.content{min-height:0;min-width:0;flex:1;height:auto;overflow:auto;padding:24px 28px 32px;overscroll-behavior:contain;scrollbar-gutter:stable}
html.lj-client-shell .main>.footer{position:static;flex-shrink:0;min-height:76px;height:auto;padding:16px 28px;gap:12px}
html.lj-client-shell .footer .row{flex-wrap:wrap;justify-content:flex-end}
html.lj-client-shell .content .grid>*{min-width:0}
html.lj-client-shell .heading{gap:16px;flex-wrap:wrap}
html.lj-client-shell .sidebar a:focus-visible{outline:2px solid #c3a4ff;outline-offset:-2px}
html.lj-client-shell .lj-shell-loading{padding:28px;min-height:160px}
html.lj-client-shell .lj-shell-loading .sub{margin-top:14px}
html.lj-client-shell .lj-studio-preview-notice{padding:11px 14px;margin-bottom:18px;border:1px solid #625071;background:#2b2435;color:#d3c2e8;font-size:12px;line-height:1.7;border-radius:8px}
html.lj-client-shell .detailveil,html.lj-client-shell .payveil,html.lj-client-shell .sheet-overlay,html.lj-client-shell .modal-overlay{position:fixed;left:var(--lj-sidebar-width);top:var(--lj-window-height)}
html.lj-client-shell .drawerbody{overflow:auto}
html.lj-client-shell .drawer,html.lj-client-shell .sheet{max-width:100%}
html.lj-client-shell .modal,html.lj-client-shell .paymodal{max-width:calc(100% - 32px);max-height:calc(100vh - 66px);overflow:auto}
html.lj-client-shell .comp-layout{grid-template-columns:minmax(190px,.75fr) minmax(260px,1.5fr) minmax(240px,1fr)}
html.lj-client-shell .analysis-layout,html.lj-client-shell .format-layout,html.lj-client-shell .script-layout{grid-template-columns:minmax(210px,1fr) minmax(270px,1.7fr) minmax(220px,1fr)}
html.lj-client-shell .content .bottomnote{position:static;margin-top:24px}
@media(max-width:1279px){html.lj-client-shell{--lj-sidebar-width:224px}html.lj-client-shell .main>.content{padding:20px}html.lj-client-shell .comp-layout,html.lj-client-shell .analysis-layout,html.lj-client-shell .format-layout,html.lj-client-shell .script-layout{grid-template-columns:minmax(190px,1fr) minmax(260px,1.5fr)}html.lj-client-shell .comp-layout>:last-child,html.lj-client-shell .analysis-layout>:last-child,html.lj-client-shell .format-layout>:last-child,html.lj-client-shell .script-layout>:last-child{grid-column:1/-1}}
@media(max-width:900px){html.lj-client-shell{--lj-sidebar-width:196px}html.lj-client-shell .sidebar .brand{font-size:19px;margin-left:3px}html.lj-client-shell .sidebar .brand small{font-size:7px}html.lj-client-shell .sidebar .nav{padding:0 7px;font-size:13px}html.lj-client-shell .topbar{padding:12px 20px}html.lj-client-shell .topactions{font-size:11px;gap:8px}html.lj-client-shell .tilegrid,html.lj-client-shell .assetgrid,html.lj-client-shell .kbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html.lj-client-shell *{scroll-behavior:auto!important}}

/* Shared reading scale: increase text, not the design canvas or browser zoom. */
html.lj-client-shell .topbar{font-size:13px;line-height:1.6}
html.lj-client-shell .main :is(.sub,.label,.field,.tabs){font-size:13px}
html.lj-client-shell :is(.tiny,.section-title){font-size:11px}
html.lj-client-shell .main :is(button.small,.chip,.badge,.step){font-size:12px}
html.lj-client-shell .main :is(.thead,.trow){font-size:13px}
html.lj-client-shell .main button{line-height:1.5}
html.lj-client-shell .main :is(input,textarea,select){font:inherit}
html.lj-client-shell .main :is(h2,h3){line-height:1.5}
html.lj-client-shell .content{overflow-wrap:anywhere}
html.lj-client-shell .sidebar .user .tiny{max-width:100%;font-size:11px}
@media(max-width:640px){
  html.lj-client-shell{--lj-sidebar-width:0px}
  html.lj-client-shell .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  html.lj-client-shell .sidebar{height:auto;padding:9px 12px 6px;border-right:0;border-bottom:1px solid #30313e;position:relative}
  html.lj-client-shell .sidebar .brand{margin:0 54px 8px 0;font-size:19px}
  html.lj-client-shell .sidebar .logo{width:32px;height:32px}
  html.lj-client-shell .lj-nav-scroll{display:flex;flex:none;gap:4px;overflow-x:auto;overflow-y:hidden;min-height:46px}
  html.lj-client-shell .sidebar .group{display:none}
  html.lj-client-shell .sidebar .nav{flex:0 0 auto;min-height:42px;height:42px;padding:0 12px;font-size:13px}
  html.lj-client-shell .sidebar-bottom{position:absolute;top:5px;right:12px;margin:0}
  html.lj-client-shell .sidebar .balance,html.lj-client-shell .sidebar .lj-user-copy,html.lj-client-shell .sidebar .user>.muted{display:none}
  html.lj-client-shell .sidebar .user{padding:7px}
  html.lj-client-shell .topbar{padding:10px 16px;min-height:56px;flex-wrap:wrap}
  html.lj-client-shell .topactions{font-size:12px;gap:12px}
  html.lj-client-shell .main>.content{padding:18px 16px 24px}
  html.lj-client-shell .main>.footer{padding:12px 16px;flex-wrap:wrap;min-height:68px}
  html.lj-client-shell .content :is(.grid,.comp-layout,.analysis-layout,.format-layout,.script-layout,.assetgrid,.tilegrid,.kbgrid){grid-template-columns:minmax(0,1fr)!important}
  html.lj-client-shell .main .hero{height:auto;min-height:214px;padding:22px}
  html.lj-client-shell .main .hero h1{font-size:27px}
  html.lj-client-shell .main .heroart{opacity:.25;max-width:100%}
  html.lj-client-shell .main .import{height:auto;min-height:175px}
  html.lj-client-shell .main :is(.heading,.panelhead,.between){flex-wrap:wrap;gap:12px}
  html.lj-client-shell .main .steps{overflow-x:auto;justify-content:flex-start}
  html.lj-client-shell .main .step{flex-shrink:0}
  html.lj-client-shell .main .table{overflow-x:auto}
  html.lj-client-shell .main :is(.thead,.trow){min-width:610px}
  html.lj-client-shell .lj-real-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:18px}
  html.lj-client-shell .lj-real-dialog :is(header,footer){flex-wrap:wrap;gap:12px}
  html.lj-client-shell .lj-real-grid{grid-template-columns:minmax(0,1fr)}
}
/* Asset-library controls wrap within the content pane, while dense records scroll locally. */
@media(max-width:1100px){
 html.lj-client-shell .metricstrip{height:auto;min-height:70px;flex-wrap:wrap;gap:14px 22px}
 html.lj-client-shell .metricstrip .metric{min-width:0;flex:1 1 115px}
 html.lj-client-shell .metricstrip :is(.hint,.tip){flex-basis:100%;margin-left:0;max-width:none}
 html.lj-client-shell .metricstrip .vline{display:none}
 html.lj-client-shell .toolbar,html.lj-client-shell .toolbar>.row{flex-wrap:wrap;min-width:0}
 html.lj-client-shell .toolbar .field{max-width:100%}
 html.lj-client-shell .toolbar input{width:100%;min-width:0}
 html.lj-client-shell .librarytabs{height:auto;min-height:36px;max-width:100%;overflow-x:auto;gap:20px}
 html.lj-client-shell .librarytabs button{flex-shrink:0;white-space:nowrap}
 html.lj-client-shell .libgrid,html.lj-client-shell .libgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
 html.lj-client-shell .libtable{overflow-x:auto}
 html.lj-client-shell :is(.libthead,.libtr){min-width:660px}
 html.lj-client-shell .summary-note{flex-wrap:wrap;gap:12px}
}
@media(max-width:640px){
 html.lj-client-shell .libgrid,html.lj-client-shell .libgrid.four{grid-template-columns:minmax(0,1fr)}
 html.lj-client-shell .toolbar>.row{width:100%;gap:8px}
 html.lj-client-shell .toolbar .field{flex:1;min-width:150px}
 html.lj-client-shell .main .metricstrip{padding:15px 18px}
 html.lj-client-shell .main .metric strong{font-size:23px}
 html.lj-client-shell .main .emptyresult{padding:32px 15px}
}
html.lj-client-shell .main .aw-home{margin-top:20px}
/* Bring dense studio/library captions up to the shared reading scale. */
html.lj-client-shell .main :is(.candidate-item p,.role-binding p,.slot strong,.choice,.checkrow,.dialogue-line,.hintbar,.flowline,.mini-proof,.tilefoot,.tilefoot .action){font-size:12px;line-height:1.7}
html.lj-client-shell .main :is(.candidate-item small,.role-binding small,.slot small,.slot a,.candidate-title,.statusbox p,.aside-note,.overlaylabel,.ratio-options button span,.tilemeta .tags span){font-size:11px;line-height:1.7}
html.lj-client-shell .main :is(.small,.micro){font-size:12px!important}
html.lj-client-shell .main :is(.flowline,.hintbar){flex-wrap:wrap}
html.lj-client-shell .main .panelhead h2{font-size:17px}

/* Shared portrait preview canvas. Source media keeps its original proportions. */
body .libgrid .tilepic,body .asset .thumb,body .asset-thumb,
body .cf-card>img,body .cf-card>video,body .real-assembly-card>img,
body .real-assembly-card>video,body .lj-portrait-preview{
 aspect-ratio:9/16!important;height:auto!important;max-height:none!important;
 width:100%;object-fit:contain!important;object-position:center;background:#11121b;overflow:hidden;
}
body .libgrid .tilepic{display:grid;place-items:center}
body .libgrid .tilepic>.asset-real-image,body .asset .thumb>img,body .asset .thumb>video,
body .asset-thumb>img,body .lj-portrait-preview>img,body .lj-portrait-preview>video{
 width:100%;height:100%;object-fit:contain!important;object-position:center;display:block;
}
body .drawerbody>img,body .drawerbody>video,body .asset-detail-preview,
body .cf-reference video,body .cf-reference img{
 display:block;aspect-ratio:9/16;width:min(100%,300px)!important;height:auto!important;
 max-height:none!important;object-fit:contain!important;margin:0 auto;background:#11121b;
}
body .lj-portrait-preview{display:grid;place-items:center;color:#a8a2b9;border-radius:7px}
body .home-recent-media{width:54px!important;height:96px!important;flex:0 0 54px;overflow:hidden;background:#11121b;border-radius:6px}
body .home-recent-media img{width:100%;height:100%;object-fit:contain!important}
.lj-creation-guide{padding:18px 20px;border:1px solid #484052;border-radius:11px;background:#211e2d;margin:0 0 20px}
.lj-creation-guide h2{font-size:17px;margin:0 0 7px}.lj-creation-guide>p{color:#b6afc3;line-height:1.6}
.lj-creation-guide ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:16px 0;padding:0;list-style:none;counter-reset:journey}
.lj-creation-guide li{counter-increment:journey;line-height:1.6;color:#c8bfd8;font-size:13px}
.lj-creation-guide li::before{content:counter(journey);display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;margin-right:6px;background:#43335c;color:#d5bdff}
.lj-creation-guide li span{display:block;margin-top:5px;color:#9990a9;font-size:12px}
.lj-creation-guide .guide-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.lj-creation-guide a{color:#c4a2ff}
.real-assembly-steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.real-assembly-steps button{padding:9px 12px;border:1px solid #4a4259;border-radius:7px;background:#211f2b;color:#c5bfd1;font:inherit;cursor:pointer}
.real-assembly-steps [aria-current=step]{background:#42305d;border-color:#a17af2;color:#fff}
.real-assembly-step-title{font-size:18px;margin:4px 0 8px}.real-assembly-step-hint{color:#b3a8c2;line-height:1.7;margin-bottom:14px}
.real-assembly-summary{position:sticky;top:16px}.real-assembly-summary h3{font-size:14px;margin-top:12px}
.real-assembly-summary button[data-edit-step]{background:transparent;color:#c4a2ff;border:0;padding:3px 6px;cursor:pointer}
.real-assembly-nav{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:18px}.real-assembly-script-copy{font-size:13px;line-height:1.7;white-space:pre-wrap;max-height:220px;overflow:auto;color:#c6bdce}
.real-assembly-empty-media{aspect-ratio:9/16;display:grid;place-items:center;background:#15141d;color:#9990ab;padding:12px;text-align:center}
@media(max-width:1100px){.lj-creation-guide ol{grid-template-columns:repeat(3,minmax(0,1fr))}.real-assembly-summary{position:static}}
@media(max-width:650px){.lj-creation-guide ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
body:has(.lj-creation-guide) .content>.hero{display:none}
body .rw-preview{aspect-ratio:9/16;width:min(100%,300px);height:auto;max-height:none;object-fit:contain;margin-inline:auto}
body .file-preview video{aspect-ratio:9/16;width:90px;height:160px;object-fit:contain;background:#11121b}
body .asset-detail-preview img{width:100%;height:100%;object-fit:contain}
/* Generated delivery actions remain usable with narrow content columns. */
.lj-job-items label{flex-wrap:wrap}.lj-job-items label>span:first-of-type{min-width:160px}
.lj-job-items .lj-save-result{flex:0 0 100%;font-size:13px;line-height:1.6;color:#b9abc9}
.lj-job-items .lj-save-result[role=alert]{color:#f0b3b3}
.lj-live-tasks .lj-delivery-note{line-height:1.7;color:#b8aec5;margin:10px 0 18px}

/* The review step has no search field; flex rules must respect its hidden state. */
.real-assembly-tools[hidden]{display:none!important}
.lj-creation-guide{border:1px solid #655280;background:#292039;border-radius:12px;padding:16px 20px;margin-bottom:20px;line-height:1.65}.lj-creation-guide strong{font-size:17px;color:#f5edff}.lj-creation-guide p{margin:7px 0 12px;color:#d6cce4}.lj-creation-guide a{display:inline-block;margin-left:12px;color:#cdb2ff}.lj-next-operation{outline:3px solid #bd98ff!important;outline-offset:5px}