/* Current phone workbench: the same clean blue-white language as desktop. */
@media (max-width:520px){
  html,html body.workspace-readable{
    background:linear-gradient(180deg,#edf5ff 0,#f8fbff 52%,#fff 100%)!important;
    color:#12264a!important;
  }
  html body.workspace-readable::before,
  html body.workspace-readable::after,
  html body.workspace-readable>.ambient-ui-layer,
  html body.workspace-readable>.app-shell::before,
  html body.workspace-readable>.app-shell::after,
  html body.workspace-readable .lime-workbench::before,
  html body.workspace-readable .lime-workbench::after,
  html body.workspace-readable .lime-inner::before,
  html body.workspace-readable .lime-inner::after{display:none!important;content:none!important}

  html body.workspace-readable>.app-shell{
    display:block!important;width:100%!important;min-width:0!important;min-height:100dvh!important;
    margin:0!important;padding:0!important;background:transparent!important
  }
  html body.workspace-readable .app-shell>.lime-workbench{
    width:100%!important;min-width:0!important;height:auto!important;min-height:100dvh!important;
    margin:0!important;padding:0 0 calc(82px + env(safe-area-inset-bottom))!important;border:0!important;
    border-radius:0!important;background:transparent!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible!important
  }
  html body.workspace-readable .app-shell>.lime-workbench>.lime-inner{
    width:100%!important;max-width:480px!important;height:auto!important;min-height:100dvh!important;
    margin:0 auto!important;padding:12px 14px 24px!important;background:transparent!important;overflow:visible!important
  }

  html body.workspace-readable .app-shell>.lime-workbench .hero-copy{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;
    height:76px!important;min-height:76px!important;margin:0 0 8px!important;padding:0 4px!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important
  }
  html body.workspace-readable .app-shell>.lime-workbench .hero-copy>h1,
  html body.workspace-readable .app-shell>.lime-workbench .hero-copy>p{display:none!important}
  html body.workspace-readable .app-shell>.lime-workbench .hero-copy>.sidebar-brand,
  html body.workspace-readable .app-shell>.lime-workbench .hero-copy>.sidebar-brand .crealink-wordmark{
    display:block!important;width:148px!important;height:70px!important;min-width:148px!important;
    margin:0!important;padding:0!important;border:0!important;background:transparent!important;
    box-shadow:none!important;overflow:visible!important
  }
  html body.workspace-readable .app-shell>.lime-workbench .hero-copy>.sidebar-brand #brandMark.crealink-wordmark>img{
    position:static!important;display:block!important;width:148px!important;height:70px!important;max-width:148px!important;
    object-fit:contain!important;object-position:left center!important;transform:none!important;filter:none!important
  }

  html body.workspace-readable .app-shell>.lime-workbench .module-browser,
  html body.workspace-readable .app-shell>.lime-workbench .work-step,
  html body.workspace-readable .app-shell>.lime-workbench .unified-composer-shell{
    width:100%!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;overflow:visible!important
  }
  html body.workspace-readable #mobileModuleSwitch{
    display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;
    min-height:54px!important;margin:0!important;padding:0 16px!important;border:1px solid #d8e5f5!important;
    border-radius:16px!important;background:#fff!important;color:#12264a!important;
    box-shadow:0 9px 24px rgba(47,88,151,.08)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
  html body.workspace-readable #mobileModuleSwitch strong{color:#12264a!important;font-size:15px!important;font-weight:850!important}
  html body.workspace-readable #mobileModuleSwitch span{color:#1769d6!important;font-size:12px!important;font-weight:800!important}
  html body.workspace-readable #moduleTabs.mobile-modules-expanded{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;margin:10px 0 0!important;padding:0!important}
  html body.workspace-readable #moduleTabs .module-group,
  html body.workspace-readable #moduleTabs .module-group-tools{
    grid-column:1/-1!important;width:100%!important;min-width:0!important;
    padding:12px!important;border:1px solid #d8e5f5!important;border-radius:17px!important;
    background:#fff!important;box-shadow:0 10px 25px rgba(47,88,151,.07)!important
  }
  html body.workspace-readable #moduleTabs .module-group>h3{margin:0 0 9px!important;color:#12264a!important;font-size:13px!important;text-shadow:none!important}
  html body.workspace-readable #moduleTabs .module-group-grid,
  html body.workspace-readable #moduleTabs .module-group-tools .module-group-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  html body.workspace-readable #moduleTabs button[data-module]{
    min-width:0!important;min-height:64px!important;height:64px!important;padding:7px 4px!important;
    border:1px solid #e0e9f6!important;border-radius:12px!important;background:#f8fbff!important;
    color:#18345f!important;box-shadow:none!important;text-shadow:none!important
  }
  html body.workspace-readable #moduleTabs button[data-module].active{
    border-color:#075ec8!important;background:#075ec8!important;
    background-image:linear-gradient(135deg,#075ec8 0%,#117ce7 58%,#20a7ce 100%)!important;
    color:#fff!important;box-shadow:0 10px 22px rgba(18,105,211,.24)!important
  }
  html body.workspace-readable #moduleTabs button[data-module] :is(.module-icon,.module-tab-copy,.module-tab-copy b){
    color:inherit!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important
  }
  html body.workspace-readable #moduleTabs button[data-module] .module-tab-copy>b{font-size:10px!important;line-height:1.25!important}
  html body.workspace-readable #moduleTabs button[data-module] .module-tab-copy>i,
  html body.workspace-readable #moduleTabs button[data-module] .module-tab-copy>small{display:none!important}
  html body.workspace-readable .app-shell>.lime-workbench .unified-composer-shell{margin-top:12px!important}

  /* Public phone visits keep the mobile landing page behind the login sheet. */
  html body.workspace-readable #authModal.auth-form-open:not(.hidden)>.auth-landing-shell{display:block!important}
  html body.workspace-readable #authModal.auth-form-open:not(.hidden)>#authForm{
    position:absolute!important;inset:0 0 calc(66px + env(safe-area-inset-bottom)) 0!important;
    width:100%!important;height:auto!important;min-height:0!important;overflow:auto!important
  }

  html body.workspace-readable .flat-design-upload-intake #referenceSection{width:100%!important;margin:0!important;padding:0!important}
  html body.workspace-readable .flat-design-upload-intake #referenceUploadZone{
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
    gap:14px!important;width:100%!important;min-height:94px!important;margin:0!important;padding:16px!important;
    border:1px solid #d8e5f5!important;border-radius:18px!important;background:#fff!important;background-image:none!important;
    color:#12264a!important;box-shadow:0 12px 30px rgba(47,88,151,.09)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
  html body.workspace-readable .flat-design-upload-intake #referenceUploadZone .upload-icon{
    display:grid!important;place-items:center!important;flex:0 0 48px!important;width:48px!important;height:48px!important;
    margin:0!important;border:1px solid #d9e6f6!important;border-radius:14px!important;background:#f2f7ff!important;
    color:#1769d6!important;font-size:25px!important;font-weight:400!important;box-shadow:none!important
  }
  html body.workspace-readable .flat-design-upload-intake #referenceUploadZone>#referenceUploadAction{
    margin:0!important;color:#12264a!important;font-size:16px!important;font-weight:900!important;line-height:1.4!important;text-shadow:none!important
  }
  html body.workspace-readable .flat-design-upload-intake #referenceUploadZone>#referenceUploadHelp{display:none!important}
  html body.workspace-readable .flat-design-upload-intake #referenceList{width:100%!important;margin:8px 0 0!important}

  html body.workspace-readable #smartCreateBar,
  html body.workspace-readable .unified-composer-shell #smartCreateBar{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;
    width:100%!important;margin:11px 0!important
  }
  html body.workspace-readable #smartCustomRatioInline,
  html body.workspace-readable #sizePanel{display:none!important}
  html body.workspace-readable #smartCreateBar .smart-tool-wrap,
  html body.workspace-readable #smartCreateBar .smart-count-select{min-width:0!important;width:100%!important}
  html body.workspace-readable #smartCreateBar .smart-tool-button,
  html body.workspace-readable #smartCreateBar .smart-count-select{
    display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;
    min-height:52px!important;height:52px!important;padding:0 14px!important;border:1px solid #d8e5f5!important;
    border-radius:15px!important;background:#fff!important;color:#18345f!important;
    box-shadow:0 8px 20px rgba(47,88,151,.065)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
  html body.workspace-readable #smartCreateBar .smart-tool-button :is(span,b),
  html body.workspace-readable #smartCreateBar .smart-count-select :is(span,b,select){
    color:#18345f!important;-webkit-text-fill-color:#18345f!important;text-shadow:none!important
  }
  html body.workspace-readable #smartCreateBar .smart-tool-button span,
  html body.workspace-readable #smartCreateBar .smart-count-select>span{color:#687b98!important;font-size:12px!important}
  html body.workspace-readable #smartCreateBar .smart-tool-button b,
  html body.workspace-readable #smartCreateBar .smart-count-select select{font-size:14px!important;font-weight:850!important}
  html body.workspace-readable #smartRatioMenu:not(.hidden){width:min(360px,calc(100vw - 24px))!important}
  html body.workspace-readable #smartRatioMenu #ratioChoices{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  html body.workspace-readable #smartCustomRatioInline{width:100%!important;margin:0 0 13px!important}
  html body.workspace-readable #smartCustomRatioInline #sizePanel:not(.hidden){
    width:100%!important;margin:0!important;padding:15px!important;border:1px solid #d8e5f5!important;
    border-radius:18px!important;background:#fff!important;box-shadow:0 10px 24px rgba(47,88,151,.07)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
  html body.workspace-readable #smartCustomRatioInline #sizePanel>label{
    display:block!important;margin:0 0 12px!important;color:#12264a!important;font-size:13px!important;font-weight:900!important;text-shadow:none!important
  }
  html body.workspace-readable #smartCustomRatioInline #sizePanel .dimension-fields{
    display:grid!important;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr)!important;align-items:end!important;gap:7px!important
  }
  html body.workspace-readable #smartCustomRatioInline #sizePanel .dimension-fields>label{
    display:grid!important;gap:6px!important;min-width:0!important;color:#6f819d!important;font-size:11px!important;text-shadow:none!important
  }
  html body.workspace-readable #smartCustomRatioInline #sizePanel .dimension-fields>b{
    align-self:center!important;margin:18px 0 0!important;color:#94a3b8!important;font-size:16px!important;text-shadow:none!important
  }
  html body.workspace-readable #smartCustomRatioInline #sizePanel .dimension-input{
    display:flex!important;align-items:center!important;width:100%!important;min-width:0!important;height:48px!important;
    padding:0 10px!important;border:1.5px solid #b7c9e3!important;border-radius:13px!important;background:#f8fbff!important;
    box-shadow:inset 0 1px 2px rgba(42,67,113,.06),0 3px 10px rgba(54,82,136,.05)!important
  }
  html body.workspace-readable #smartCustomRatioInline #sizePanel .dimension-input:focus-within{
    border-color:#2f7fe4!important;box-shadow:0 0 0 3px rgba(47,127,228,.15)!important
  }
  html body.workspace-readable #smartCustomRatioInline #sizePanel .dimension-input input{
    width:100%!important;min-width:0!important;height:46px!important;padding:0!important;border:0!important;
    background:transparent!important;color:#18345f!important;-webkit-text-fill-color:#18345f!important;font-size:14px!important;font-weight:750!important
  }
  html body.workspace-readable #smartCustomRatioInline #sizePanel .dimension-input input::placeholder{color:#93a1b6!important;-webkit-text-fill-color:#93a1b6!important}
  html body.workspace-readable #smartCustomRatioInline #sizePanel .dimension-input i{color:#7788a1!important;font-size:10px!important}

  html body.workspace-readable .app-shell>.lime-workbench #promptLabel{
    display:flex!important;align-items:center!important;width:100%!important;min-height:38px!important;margin:2px 0 7px!important;
    padding:0 2px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#12264a!important;
    box-shadow:none!important;text-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
  html body.workspace-readable .app-shell>.lime-workbench #promptLabel>span{color:#12264a!important;font-size:17px!important;font-weight:900!important;text-shadow:none!important}
  html body.workspace-readable .app-shell>.lime-workbench #promptLabel>small{display:none!important}
  html body.workspace-readable .app-shell>.lime-workbench #promptBox{
    display:block!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;
    border:1px solid #d8e5f5!important;border-radius:18px!important;background:#fff!important;
    box-shadow:0 12px 30px rgba(47,88,151,.08)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:hidden!important
  }
  html body.workspace-readable .app-shell>.lime-workbench #promptBox>#briefInput{
    display:block!important;width:100%!important;height:150px!important;min-height:150px!important;max-height:260px!important;
    padding:15px!important;border:0!important;background:#fff!important;color:#18345f!important;
    -webkit-text-fill-color:#18345f!important;font-size:16px!important;line-height:1.65!important;text-shadow:none!important;resize:vertical!important
  }
  html body.workspace-readable .app-shell>.lime-workbench #promptBox>#briefInput::placeholder{
    color:#8292a9!important;-webkit-text-fill-color:#8292a9!important;opacity:1!important
  }
  html body.workspace-readable #promptAssistant.prompt-assistant{border-top:1px solid #e2eaf5!important;background:#f7faff!important;color:#18345f!important}
  html body.workspace-readable #promptAssistant :is(b,span){color:#18345f!important;-webkit-text-fill-color:#18345f!important;text-shadow:none!important}
  html body.workspace-readable #promptAssistant :is(small,p){color:#71819a!important;-webkit-text-fill-color:#71819a!important;text-shadow:none!important}

  html body.workspace-readable .lime-inner>.design-action-row{
    display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(130px,.92fr)!important;gap:9px!important;
    width:100%!important;margin:13px 0 0!important
  }
  html body.workspace-readable .lime-inner>.design-action-row.single-action{grid-template-columns:1fr!important}
  html body.workspace-readable .lime-inner>.design-action-row #generateBtn{
    min-height:52px!important;border:0!important;border-radius:15px!important;background:linear-gradient(135deg,#0d64d8,#1688ef)!important;
    color:#fff!important;box-shadow:0 11px 24px rgba(26,100,213,.22)!important
  }
  html body.workspace-readable .lime-inner>.design-action-row .image-model-picker{
    min-height:52px!important;border:1px solid #d8e5f5!important;border-radius:15px!important;background:#fff!important;color:#18345f!important;box-shadow:none!important
  }
  html body.workspace-readable .lime-inner>.design-action-row .image-model-picker :is(span,b,select,i){color:#18345f!important;-webkit-text-fill-color:#18345f!important}

  html body.workspace-readable #smartCountMenu{
    left:0!important;right:0!important;width:100%!important;padding:12px!important;
    border:1px solid #d2e1f3!important;border-radius:16px!important;background:#fff!important;
    box-shadow:0 18px 42px rgba(47,88,151,.16)!important
  }
  html body.workspace-readable #smartCountMenu #countPanel{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
  html body.workspace-readable #smartCountMenu #countPanel>label{margin:0 0 9px!important;color:#18345f!important}
  html body.workspace-readable #smartCountMenu .number-choices button{
    border:1px solid #d8e5f5!important;background:#f5f9ff!important;color:#18345f!important;box-shadow:none!important
  }
  html body.workspace-readable #smartCountMenu .number-choices button:is(:hover,:focus-visible){border-color:#87b9f2!important;background:#eaf4ff!important;color:#0b63d4!important}
  html body.workspace-readable #smartCountMenu .number-choices button.active{
    border-color:#0b67d7!important;background:linear-gradient(135deg,#0d66d7,#1791e9)!important;color:#fff!important;
    box-shadow:0 7px 16px rgba(18,105,211,.2)!important
  }

  html body.workspace-readable #mobileDock.mobile-dock{
    position:fixed!important;z-index:100!important;inset:auto 0 0!important;display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;width:100%!important;
    height:calc(66px + env(safe-area-inset-bottom))!important;padding:7px 10px env(safe-area-inset-bottom)!important;
    border:0!important;border-top:1px solid #d9e5f4!important;border-radius:0!important;background:rgba(255,255,255,.97)!important;
    box-shadow:0 -10px 30px rgba(40,76,132,.09)!important;-webkit-backdrop-filter:blur(18px) saturate(120%)!important;
    backdrop-filter:blur(18px) saturate(120%)!important
  }
  html body.workspace-readable #mobileDock.mobile-dock button{
    min-width:0!important;min-height:50px!important;padding:0 8px!important;border:0!important;border-radius:13px!important;
    background:transparent!important;color:#71819a!important;font-size:13px!important;font-weight:850!important;box-shadow:none!important
  }
  html body.workspace-readable #mobileDock.mobile-dock button.active{
    background:#edf5ff!important;color:#0b63d4!important;box-shadow:inset 0 0 0 1px #cfe2fb!important
  }
  html body.workspace-readable #mobileDock.mobile-dock button>*{color:inherit!important;-webkit-text-fill-color:currentColor!important}

  /* The creation screen ends after its form while it has no result. Templates
     live in their own bottom-tab page instead of appearing below a blank gap. */
  html body.workspace-readable:not([data-mobile-page]) .studio-stage:has(#outputEmpty:not(.hidden):not(.message-state)),
  html body.workspace-readable[data-mobile-page="create"] .studio-stage:has(#outputEmpty:not(.hidden):not(.message-state)){display:none!important}
  html body.workspace-readable[data-mobile-page="templates"]{overflow-y:auto!important}
  html body.workspace-readable[data-mobile-page="templates"] .app-shell>.lime-workbench{display:none!important}
  html body.workspace-readable[data-mobile-page="templates"] .app-shell>.studio-stage{
    display:block!important;width:100%!important;min-width:0!important;min-height:100dvh!important;padding:0 0 calc(78px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(180deg,#edf5ff,#f8fbff 48%,#fff)!important
  }
  html body.workspace-readable[data-mobile-page="templates"] .studio-stage>.topbar{display:none!important}
  html body.workspace-readable[data-mobile-page="templates"] .studio-stage>.output-zone{display:block!important;width:100%!important;min-height:100dvh!important;margin:0!important;padding:12px!important;background:transparent!important}
  html body.workspace-readable[data-mobile-page="templates"] #outputPanel{display:block!important;width:100%!important;min-height:0!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
  html body.workspace-readable[data-mobile-page="templates"] #outputEmpty{
    display:block!important;width:100%!important;min-height:0!important;margin:0!important;padding:14px!important;
    border:1px solid #d8e5f5!important;border-radius:18px!important;background:#fff!important;box-shadow:0 12px 30px rgba(47,88,151,.09)!important
  }
  html body.workspace-readable[data-mobile-page="templates"] #outputEmpty>:not(#templateGallery),
  html body.workspace-readable[data-mobile-page="templates"] :is(#inlineTemplateEditor,#progressView,#resultsView,.design-records){display:none!important}
  html body.workspace-readable[data-mobile-page="templates"] #templateGallery{display:block!important;margin:0!important}

  /* Repeat the module-state contract in the last-loaded phone stylesheet so
     touch hover and selected state cannot split the surface and label colours. */
  html body.workspace-readable .app-shell>.lime-workbench .lime-inner>.module-browser #moduleTabs.module-tabs .module-group.module-group-tools .module-group-grid>button[data-module]:nth-child(n):not([data-module="vectorize"]) .module-icon{
    display:grid!important;place-items:center!important;width:26px!important;height:26px!important;margin:0!important;
    border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;
    box-shadow:none!important;transform:none!important
  }
  html body.workspace-readable .app-shell>.lime-workbench .lime-inner>.module-browser #moduleTabs.module-tabs .module-group.module-group-tools .module-group-grid>button[data-module]:nth-child(n):not([data-module="vectorize"]) .module-line-icon{width:24px!important;height:24px!important}
  html body.workspace-readable .app-shell>.lime-workbench .lime-inner>.module-browser #moduleTabs.module-tabs .module-group .module-group-grid>button[data-module]:nth-child(n):not([data-module="image_to_video"]):not([data-module="vectorize"]) .module-tab-copy,
  html body.workspace-readable .app-shell>.lime-workbench .lime-inner>.module-browser #moduleTabs.module-tabs .module-group .module-group-grid>button[data-module]:nth-child(n):not([data-module="image_to_video"]):not([data-module="vectorize"]) .module-tab-copy>b{
    display:flex!important;align-items:center!important;justify-content:center!important;position:static!important;
    width:100%!important;height:15px!important;min-height:15px!important;margin:0!important;padding:0!important;
    line-height:15px!important;transform:none!important
  }
  html body.workspace-readable .app-shell>.lime-workbench .lime-inner>.module-browser #moduleTabs.module-tabs .module-group .module-group-grid>button[data-module]:nth-child(n):is(.active,:hover,:focus-visible){
    isolation:isolate!important;overflow:hidden!important;border-color:#075ec8!important;
    background:#075ec8!important;background-image:linear-gradient(135deg,#075ec8 0%,#117ce7 58%,#20a7ce 100%)!important;
    color:#fff!important;box-shadow:0 10px 22px rgba(18,105,211,.24)!important;filter:none!important
  }
  html body.workspace-readable .app-shell>.lime-workbench .lime-inner>.module-browser #moduleTabs.module-tabs .module-group .module-group-grid>button[data-module]:nth-child(n):is(.active,:hover,:focus-visible) :is(.module-icon,.module-tab-copy,.module-tab-copy>b,.module-tab-copy>strong,.module-tab-copy>small,.module-tab-copy>i){
    color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important;visibility:visible!important;text-shadow:none!important;filter:none!important;transform:none!important
  }
  html body.workspace-readable .app-shell>.lime-workbench .lime-inner>.module-browser #moduleTabs.module-tabs .module-group .module-group-grid>button[data-module]:nth-child(n):is(.active,:hover,:focus-visible) .module-icon{
    border-color:transparent!important;background:transparent!important;background-image:none!important;box-shadow:none!important
  }
  html body.workspace-readable .app-shell>.lime-workbench .lime-inner>.module-browser #moduleTabs.module-tabs .module-group .module-group-grid>button[data-module]:nth-child(n):is(.active,:hover,:focus-visible) .module-line-icon{
    color:#fff!important;stroke:#fff!important;opacity:1!important;visibility:visible!important;filter:none!important
  }
  html body.workspace-readable .app-shell>.lime-workbench .lime-inner>.module-browser #moduleTabs.module-tabs .module-group .module-group-grid>button[data-module]:nth-child(n)::before,
  html body.workspace-readable .app-shell>.lime-workbench .lime-inner>.module-browser #moduleTabs.module-tabs .module-group .module-group-grid>button[data-module]:nth-child(n)::after{
    display:none!important;content:none!important;width:0!important;height:0!important;border:0!important;
    background:none!important;background-image:none!important;box-shadow:none!important;animation:none!important
  }
}

/* Keep the same navigation contract in phone landscape and installed-app
   viewports up to the JavaScript mobile breakpoint. */
@media (min-width:521px) and (max-width:760px){
  html body.workspace-readable #moduleTabs.mobile-modules-expanded{grid-template-columns:minmax(0,1fr)!important}
  html body.workspace-readable #moduleTabs.mobile-modules-expanded>.module-group{grid-column:1/-1!important;width:100%!important;min-width:0!important}
  html body.workspace-readable #smartCustomRatioInline,
  html body.workspace-readable #sizePanel{display:none!important}
  html body.workspace-readable #smartCreateBar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.workspace-readable #smartCountMenu{border-color:#d2e1f3!important;background:#fff!important;box-shadow:0 18px 42px rgba(47,88,151,.16)!important}
  html body.workspace-readable #smartCountMenu #countPanel>label{color:#18345f!important}
  html body.workspace-readable #smartCountMenu .number-choices button{border-color:#d8e5f5!important;background:#f5f9ff!important;color:#18345f!important}
  html body.workspace-readable #smartCountMenu .number-choices button.active{border-color:#0b67d7!important;background:linear-gradient(135deg,#0d66d7,#1791e9)!important;color:#fff!important}
  html body.workspace-readable #mobileDock.mobile-dock{grid-template-columns:repeat(4,minmax(0,1fr))!important;background:rgba(255,255,255,.97)!important;border-top-color:#d9e5f4!important}
  html body.workspace-readable #mobileDock.mobile-dock button{color:#71819a!important}
  html body.workspace-readable #mobileDock.mobile-dock button.active{background:#edf5ff!important;color:#0b63d4!important}
  html body.workspace-readable:not([data-mobile-page]) .studio-stage:has(#outputEmpty:not(.hidden):not(.message-state)),
  html body.workspace-readable[data-mobile-page="create"] .studio-stage:has(#outputEmpty:not(.hidden):not(.message-state)){display:none!important}
  html body.workspace-readable[data-mobile-page="templates"]{overflow-y:auto!important}
  html body.workspace-readable[data-mobile-page="templates"] .app-shell>.lime-workbench{display:none!important}
  html body.workspace-readable[data-mobile-page="templates"] .app-shell>.studio-stage{display:block!important;width:100%!important;min-width:0!important;min-height:100dvh!important;padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;background:linear-gradient(180deg,#edf5ff,#f8fbff 48%,#fff)!important}
  html body.workspace-readable[data-mobile-page="templates"] .studio-stage>.topbar{display:none!important}
  html body.workspace-readable[data-mobile-page="templates"] .studio-stage>.output-zone{display:block!important;width:100%!important;min-height:100dvh!important;margin:0!important;padding:14px!important;background:transparent!important}
  html body.workspace-readable[data-mobile-page="templates"] #outputPanel{display:block!important;width:100%!important;min-height:0!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
  html body.workspace-readable[data-mobile-page="templates"] #outputEmpty{display:block!important;width:100%!important;min-height:0!important;margin:0!important;padding:16px!important;border:1px solid #d8e5f5!important;border-radius:18px!important;background:#fff!important;box-shadow:0 12px 30px rgba(47,88,151,.09)!important}
  html body.workspace-readable[data-mobile-page="templates"] #outputEmpty>:not(#templateGallery),
  html body.workspace-readable[data-mobile-page="templates"] :is(#inlineTemplateEditor,#progressView,#resultsView,.design-records){display:none!important}
  html body.workspace-readable[data-mobile-page="templates"] #templateGallery{display:block!important;margin:0!important}
}

/* Phone output pages are content-sized. The desktop account bar must not turn
   into a second, broken navigation row, and generated artwork keeps its real
   aspect ratio instead of sitting inside a fixed 340px grey preview. */
@media (max-width:520px){
  html body.workspace-readable .app-shell>.studio-stage>.topbar{display:none!important}
  html body.workspace-readable .app-shell>.studio-stage{
    width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;
    padding:0 0 calc(72px + env(safe-area-inset-bottom))!important
  }
  html body.workspace-readable .app-shell>.studio-stage>.output-zone{
    width:100%!important;min-height:0!important;margin:0!important;
    padding:10px 10px 14px!important;scroll-margin-top:0!important
  }
  html body.workspace-readable .app-shell>.studio-stage>.output-zone>#outputPanel{
    width:100%!important;min-height:0!important;margin:0!important;padding:0!important
  }
  html body.workspace-readable .app-shell>.studio-stage>.output-zone>#outputPanel:has(#progressView:not(.hidden)),
  html body.workspace-readable .app-shell>.studio-stage>.output-zone>#outputPanel:has(#resultsView:not(.hidden)){
    display:block!important;overflow:visible!important;background:transparent!important
  }

  html body.workspace-readable #progressView.progress-view:not(.hidden){
    display:flex!important;min-height:300px!important;margin:0!important;padding:18px 14px 16px!important;
    align-items:center!important;justify-content:flex-start!important;border-radius:18px!important
  }
  html body.workspace-readable #progressView .progress-eta{
    margin:0 auto 6px!important;font-size:18px!important;line-height:1.25!important
  }
  html body.workspace-readable #progressView .progress-batch-status{
    min-height:0!important;margin:0 auto 2px!important;font-size:11px!important;line-height:1.45!important
  }
  html body.workspace-readable #progressView .design-loader{
    width:200px!important;height:150px!important;margin:0 auto!important
  }
  html body.workspace-readable #progressView .loader-stack{top:73px!important}
  html body.workspace-readable #progressView .progress-meter-head{top:124px!important}

  html body.workspace-readable #resultsView:not(.hidden){
    min-height:0!important;margin:0!important;padding:8px 0 14px!important;
    border:0!important;background:transparent!important;box-shadow:none!important
  }
  html body.workspace-readable #resultGrid:not(.single-result){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important;gap:10px!important
  }
  html body.workspace-readable #resultGrid:not(.single-result)>.result-card{
    min-width:0!important;min-height:0!important;height:auto!important;align-self:start!important
  }
  html body.workspace-readable #resultGrid:not(.single-result) .result-image-open{
    height:auto!important;min-height:0!important;max-height:none!important;
    aspect-ratio:var(--result-image-aspect,4/3)!important;flex:0 0 auto!important
  }
  html body.workspace-readable #resultGrid:not(.single-result) .result-image-open>img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    min-height:0!important;max-height:none!important;object-fit:contain!important;object-position:center!important
  }
  html body.workspace-readable #resultGrid:not(.single-result) .result-info{
    min-height:0!important;padding:10px!important
  }
  html body.workspace-readable #resultGrid:not(.single-result) .result-actions{
    margin-top:0!important;padding:0 10px 10px!important
  }
}