/* Keep the desktop composition, but let phone layouts fit the actual viewport. */
@media (max-width:760px){
  html,body,#mainContent.app{max-width:100%;overflow-x:clip}
  #mainContent.app .page.active{min-width:0}
  #mainContent.app :where(img,video,svg,canvas){max-width:100%}
  #mainContent.app :where(.tool-hub,.hub-grid,.hub-category,.home-showcase,.feature-window,.creative-picks,.workspace-dashboard,.shop-shell){min-width:0;max-width:100%}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .hub-intro{
    min-height:clamp(510px,78svh,650px)!important;
    height:auto!important;
    aspect-ratio:auto!important;
    margin-bottom:28px!important;
    padding:28px 18px 25px!important;
    overflow:hidden!important;
  }
  html[data-acbs-style="cinema"] #mainContent.app #homePage .hub-intro-content{
    min-height:clamp(450px,68svh,580px)!important;
    justify-content:flex-end!important;
  }
  html[data-acbs-style="cinema"] #mainContent.app #homePage .hub-intro::before{font-size:clamp(62px,20vw,96px)!important;top:66px!important;left:14px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .hub-intro::after{width:70px!important;top:72px!important;right:28px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .hub-intro .hub-head h1{
    font-size:clamp(31px,9.3vw,44px)!important;
    line-height:1.02!important;
    letter-spacing:-.045em!important;
    overflow-wrap:break-word!important;
  }
  html[data-acbs-style="cinema"] #mainContent.app #homePage .hub-intro .hub-head p{font-size:15px!important;line-height:1.45!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .hub-intro .hub-hero-actions{margin-top:16px!important;gap:8px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .hub-intro .hub-hero-actions .btn{min-height:44px!important;padding:9px 14px!important;font-size:14px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .cinema-tool-preview{width:100%!important;min-width:0!important;margin-top:16px!important;gap:6px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .cinema-tool-preview button{min-height:64px!important;padding:10px!important;font-size:13px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .hub-section{font-size:clamp(28px,8vw,36px)!important;margin:36px 0 16px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage :where(.showcase-heading h2,.creative-picks-head h2){font-size:clamp(26px,8vw,36px)!important;line-height:1.08!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-card-art{height:128px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-card h2{font-size:20px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .creative-picks-track button{width:min(210px,68vw)!important;min-height:138px!important;padding:14px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage :where(.home-showcase .feature-window,.creative-picks-track button,.cinema-tool-preview,.cinema-tool-preview button){
    background:rgba(0,0,0,.72)!important;
    border:1px solid rgba(255,255,255,.78)!important;
    border-radius:18px!important;
    -webkit-backdrop-filter:blur(20px) saturate(0)!important;
    backdrop-filter:blur(20px) saturate(0)!important;
  }
  html[data-acbs-style="cinema"] body .cookie-banner{width:calc(100vw - 24px)!important;max-height:calc(100dvh - 36px)!important;padding:20px!important;gap:12px!important;background:rgba(5,5,5,.83)!important;-webkit-backdrop-filter:blur(24px) saturate(0)!important;backdrop-filter:blur(24px) saturate(0)!important}
  html[data-acbs-style="cinema"] body .cookie-card{background:rgba(5,5,5,.8)!important;border-color:rgba(255,255,255,.75)!important}
  .account-workspace-dialog .auth-dialog-inner{display:flex;flex-direction:column;min-height:0}
  .account-workspace-dialog .auth-content{order:0;padding:24px 17px 22px!important}
  .account-workspace-dialog .auth-identity-workspace{order:1;min-height:0;padding:22px 17px 100px!important}
  html[data-acbs-style="cinema"] .account-workspace-dialog .workspace-welcome h1{font-size:clamp(29px,8vw,39px)!important;line-height:1!important;letter-spacing:-.045em!important}
  .account-workspace-dialog :where(.account-head h2,.workspace-section-head h2){font-size:clamp(16px,5vw,24px)!important}
  .account-workspace-dialog .labby-credit-card{min-height:132px;grid-template-columns:98px minmax(0,1fr)}
  .account-workspace-dialog .labby-credit-card img{width:100px;height:130px}
  .account-workspace-dialog .workspace-utilities{grid-template-columns:1fr}
  .account-workspace-dialog .account-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .account-workspace-dialog .account-stats>div{min-width:0;padding:9px;min-height:68px}
  .account-workspace-dialog .account-stats span{font-size:14px;margin-bottom:6px}
  .account-workspace-dialog .account-stats small{font-size:12px}
  .account-workspace-dialog .workspace-actions{margin:16px 0}
  .account-workspace-dialog .workspace-actions .btn{min-width:0;font-size:13px}
  .account-workspace-dialog .workspace-watermark{display:none}
  #mainContent.app .page.active :where(.creative h1,.converter h1,.upscaler h1,.matchcut h1,.ai-gen-head h1,.phrase-head h1,.glyph-head h1,.industrial-header h1){font-size:clamp(26px,8vw,36px)!important;line-height:1.05!important}
}
@media (max-width:390px){
  html[data-acbs-style="cinema"] #mainContent.app #homePage .hub-intro{padding-inline:14px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .cinema-tool-preview button{font-size:12px!important}
  .account-workspace-dialog .account-stats{grid-template-columns:1fr}
  .account-workspace-dialog .account-stats>div{min-height:0}
}
/* Folder cards: Cinema's generic section heading margin was pushing the title
   away from the icon, while its summary rule removed all horizontal padding. */
@media (max-width:760px){
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-hub .tool-folder>summary{
    padding:17px 18px 20px!important;
    gap:12px!important;
    grid-template-columns:minmax(0,1fr) 24px!important;
    align-items:start!important;
  }
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-hub .tool-folder .tool-folder-top{
    min-width:0!important;gap:11px!important;align-items:center!important;
  }
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-hub .tool-folder .tool-folder-top>span:last-child{min-width:0!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-hub .tool-folder .tool-folder-icon{
    flex:0 0 35px!important;width:35px!important;height:35px!important;
    border-radius:10px!important;font-size:17px!important;
  }
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-hub .tool-folder .hub-section{
    margin:0!important;font-size:clamp(22px,6.3vw,28px)!important;
    line-height:1.08!important;letter-spacing:-.035em!important;
    overflow-wrap:break-word!important;
  }
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-hub .tool-folder .tool-folder-top small{
    margin-top:7px!important;font-size:13px!important;line-height:1.38!important;
    overflow-wrap:anywhere!important;
  }
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-hub .tool-folder .tool-folder-action{
    grid-column:2!important;grid-row:1!important;justify-self:end!important;
    padding-top:4px!important;font-size:0!important;
  }
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-hub .tool-folder .tool-folder-action::after{font-size:18px!important}
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-hub .tool-folder .tool-folder-names{
    grid-column:1/-1!important;min-width:0!important;max-width:100%!important;
    padding-left:0!important;margin-top:3px!important;
    font-size:13px!important;line-height:1.5!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
  }
}
@media (max-width:390px){
  html[data-acbs-style="cinema"] #mainContent.app #homePage .tool-hub .tool-folder>summary{padding-inline:15px!important}
}