/* Shared by desktop, Android and iOS: never maintain a second studio UI. */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.topbar{padding-top:calc(10px + env(safe-area-inset-top,0px))}
.mobile-tools{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:8px;padding:8px 112px 8px 16px;background:var(--bg)}
.mobile-tools:has(button:not([hidden])){padding-top:8px;padding-bottom:8px}
.mobile-tools button,.mobile-tools a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--accent-1);cursor:pointer;text-decoration:none}
.mobile-status{padding:10px 16px;background:#332805;color:#ffe19b;text-align:center}
@media(max-width:640px){
  .account{max-width:100%;flex-wrap:wrap;gap:6px}
  .project-menu .menu{position:fixed;top:auto;left:16px;right:16px;width:auto;margin-top:6px}
  input,select,textarea{font-size:16px}
  .btn,.tab,.seg>button,.project-menu>summary{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .tabs{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .tab{display:flex;align-items:center;flex-shrink:0}
  dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto}
  video{max-width:100%}
  .gen-panel{max-height:none;position:static}
  .promo-link-row{flex-direction:column;align-items:stretch}
  .ugc-url-box{flex-direction:column;align-items:stretch}
  .ugc-bottom-bar{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));flex-direction:row}
  .ugc-format-grid{grid-template-columns:1fr 1fr;gap:8px}
  .ugc-format-card{padding:10px}
  .ugc-res-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ugc-res-card{padding:10px 6px;font-size:12px}
  .ugc-layout-toggle,.ugc-product-preview .ugc-file-label{flex:1 1 100%}
}