/* Flinapp CMS V4.24.33 — Professional constrained shell, desktop + mobile */

:root{
  --fx33-shell:1440px;
  --fx33-content:1320px;
  --fx33-narrow:1160px;
  --fx33-border:rgba(117,158,199,.16);
  --fx33-panel:#0d2136;
  --fx33-panel2:#091827;
  --fx33-shadow:0 18px 45px rgba(0,0,0,.14);
}

/* Global shell: no more edge-to-edge content on large monitors */
.main{
  padding-left:clamp(14px,2.4vw,38px)!important;
  padding-right:clamp(14px,2.4vw,38px)!important;
}
.topbar,
.admin-section,
.studio-page-designed .main>.topbar,
.studio-page-designed .view{
  width:min(100%,var(--fx33-shell))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.admin-section{
  padding-top:20px!important;
}

/* Professional page wrappers */
#overview,
#settings,
#page-designer,
#users,
#packages,
#payments,
#notifications,
#builds,
#addons,
#cms-update,
#maintenance{
  max-width:var(--fx33-shell)!important;
}

/* Keep core page blocks comfortably centered */
#overview>.stats,
#overview>.admin-grid,
#settings>.admin-grid,
#users>.users-card,
#packages>.packages-page,
#payments>.admin-grid,
#notifications>.notification-layout,
#builds>.card,
#addons>.fx-upgrade-shell,
#cms-update>.fx-upgrade-shell,
#maintenance>.system-module-card,
#page-designer>.page-designer-shell{
  width:min(100%,var(--fx33-content))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Cards: less massive, more refined */
.card{
  border-radius:16px!important;
  box-shadow:var(--fx33-shadow)!important;
}
#overview .stats .stat,
#overview .stats .card{
  min-height:108px!important;
  padding:16px!important;
}
#overview .stats{
  gap:12px!important;
}
#overview .admin-grid,
#settings .admin-grid,
#payments .admin-grid,
#notifications .notification-layout{
  gap:14px!important;
}

/* Settings */
#settings .card{
  padding:18px!important;
}
#settings .two,
#settings .three{
  gap:9px!important;
}

/* Page Designer compact professional proportions */
#page-designer .page-designer-hero{
  width:min(100%,var(--fx33-content))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:18px 20px!important;
}
#page-designer .designer-tabs{
  width:max-content!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#page-designer .fx20-model-panel{
  width:min(100%,var(--fx33-content))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:16px!important;
}
#page-designer .fx20-grid{
  gap:14px!important;
}
#page-designer .fx20-preview{
  height:205px!important;
}
#page-designer .fx20-shot{
  width:210%!important;
  height:210%!important;
  transform:scale(.4762)!important;
  transform-origin:0 0!important;
}
#page-designer .fx20-body{
  padding:14px!important;
}

/* Add-ons and System Update slightly narrower for focus */
#addons>.fx-upgrade-shell,
#cms-update>.fx-upgrade-shell,
#maintenance>.system-module-card{
  max-width:var(--fx33-narrow)!important;
}

/* User authentication / user panel */
.fx-user-auth{
  width:min(calc(100% - 40px),1240px)!important;
  min-height:auto!important;
  margin:28px auto!important;
  border:1px solid var(--fx33-border)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  box-shadow:0 28px 80px rgba(0,0,0,.24)!important;
}
.fx-user-showcase{
  min-height:680px!important;
  padding:50px clamp(30px,4vw,64px)!important;
}
.fx-user-panel{
  width:min(470px,calc(100% - 36px))!important;
  padding:30px!important;
}

/* App Studio: centered product workspace */
.studio-page-designed .studio-designer-intro,
.studio-page-designed .studio-designer-blocks,
.studio-page-designed .studio-custom-html{
  width:min(100%,var(--fx33-content))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#builder{
  width:100%!important;
}
#builder .builder-grid{
  grid-template-columns:minmax(0,1fr) 300px!important;
  gap:16px!important;
}
#builder .controls{
  max-width:1000px!important;
  padding:20px!important;
}
#builder .preview-wrap{
  width:300px!important;
}
#builder .device{
  width:276px!important;
  height:585px!important;
}

/* Edit & Update APK: clear, clickable primary secondary action */
.edit-build-app{
  pointer-events:auto!important;
  cursor:pointer!important;
  min-height:40px!important;
  padding:9px 14px!important;
  border:1px solid rgba(79,143,222,.36)!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,rgba(32,118,220,.18),rgba(104,75,235,.18))!important;
  color:#edf5ff!important;
  font-weight:850!important;
}
.edit-build-app:disabled{
  opacity:.65!important;
  cursor:wait!important;
}

/* Public homepage content stays centered */
body:not(.portal-auth-body):not(.studio-page-designed) main>section>div,
body:not(.portal-auth-body):not(.studio-page-designed) header>div,
body:not(.portal-auth-body):not(.studio-page-designed) footer>div{
  width:min(100%,var(--fx33-content))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Tablet */
@media(max-width:1180px){
  :root{
    --fx33-shell:1120px;
    --fx33-content:1060px;
    --fx33-narrow:980px;
  }
  #builder .builder-grid{
    grid-template-columns:minmax(0,1fr) 275px!important;
  }
  #builder .preview-wrap{width:275px!important}
  #builder .device{width:255px!important;height:560px!important}
}

/* Small tablet / mobile */
@media(max-width:980px){
  .main{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  #page-designer .fx20-grid{
    grid-template-columns:1fr!important;
  }
  .fx-user-auth{
    width:min(calc(100% - 24px),760px)!important;
    margin:14px auto!important;
    grid-template-columns:1fr!important;
  }
  .fx-user-showcase{
    min-height:auto!important;
  }
  #builder .builder-grid{
    grid-template-columns:1fr!important;
  }
  #builder .preview-wrap{
    position:relative!important;
    top:auto!important;
    width:min(330px,100%)!important;
    margin:16px auto 0!important;
  }
  #builder .device{
    width:min(300px,100%)!important;
    height:610px!important;
  }
}

/* Phones */
@media(max-width:700px){
  .main{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .topbar,.admin-section{
    width:100%!important;
  }
  #page-designer .page-designer-hero{
    padding:15px!important;
  }
  #page-designer .fx20-preview{
    height:175px!important;
  }
  #settings .card,
  #users .users-card,
  #payments .card,
  #notifications .card,
  #builds .card{
    padding:14px!important;
  }
  .fx-user-auth{
    width:calc(100% - 12px)!important;
    margin:6px auto!important;
    border-radius:16px!important;
  }
  .fx-user-panel{
    width:calc(100% - 18px)!important;
    padding:19px!important;
  }
  #builder .controls{
    padding:13px!important;
  }
}