/* ==========================================================================
   Flinapp CMS V4.24.31 — Complete UI geometry / preview / responsive fix
   Loaded LAST on Admin, User Page, App Studio and public homepage.
   ========================================================================== */

:root{
  --u31-bg:#07111f;--u31-panel:#0d2136;--u31-panel2:#091827;
  --u31-line:rgba(117,158,199,.16);--u31-line2:rgba(117,158,199,.27);
  --u31-text:#f5f9ff;--u31-muted:#8ea5bb;--u31-blue:#168ff0;--u31-violet:#6d50ed;
  --u31-shadow:0 18px 45px rgba(0,0,0,.14);
}
*{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden!important}
img,svg,video,canvas,iframe{max-width:100%}
.main,.view,.admin-section,.card,.shell,.page-designer-shell,.portal-auth-shell{min-width:0!important;max-width:100%!important}

/* ---------- ADMIN GLOBAL ---------- */
.main{padding-left:clamp(18px,3.1vw,58px)!important;padding-right:clamp(18px,3.1vw,58px)!important}
.topbar{max-width:1680px!important;margin:0 auto!important;width:100%!important}
.admin-section{max-width:1680px!important;margin:0 auto!important;width:100%!important;padding-top:22px!important}
.card{
  border:1px solid var(--u31-line)!important;border-radius:18px!important;
  background:linear-gradient(180deg,#0d2136,#091827)!important;box-shadow:var(--u31-shadow)!important
}
.top-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:center!important}
button,.primary,.ghost,a.ghost{min-height:38px;border-radius:10px!important}

/* ---------- PAGE DESIGNER: FIX THE SCREENSHOT ---------- */
#page-designer .page-designer-shell{display:grid!important;gap:16px!important}
#page-designer .page-designer-hero{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:22px!important;
  padding:22px 24px!important;border:1px solid var(--u31-line2)!important;border-radius:20px!important;
  background:radial-gradient(circle at 90% 0%,rgba(73,91,225,.08),transparent 28%),linear-gradient(145deg,#0d2035,#091827)!important
}
#page-designer .page-designer-hero p{max-width:850px!important;color:#a0b3c6!important;line-height:1.55!important}
#page-designer .designer-tabs{
  width:max-content!important;max-width:100%!important;display:flex!important;gap:5px!important;flex-wrap:wrap!important;
  padding:5px!important;border:1px solid var(--u31-line)!important;border-radius:13px!important;background:#08192b!important
}
#page-designer .designer-tabs button{padding:9px 16px!important;color:#8ea5bb!important;background:transparent!important}
#page-designer .designer-tabs button.active{background:#f7f9fc!important;color:#111827!important;box-shadow:none!important}
#page-designer .designer-pane{padding:0!important}
#page-designer .fx20-model-panel{
  margin:0!important;padding:18px!important;border:1px solid rgba(60,135,200,.27)!important;border-radius:18px!important;
  background:linear-gradient(180deg,#0b3150,#091d34)!important
}
#page-designer .fx20-head{margin-bottom:14px!important}
#page-designer .fx20-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important
}
#page-designer .fx20-card{
  display:flex!important;flex-direction:column!important;min-width:0!important;overflow:hidden!important;
  border:1px solid rgba(105,157,209,.20)!important;border-radius:16px!important;background:#091e32!important
}
#page-designer .fx20-card.selected{border-color:#25a8e8!important;box-shadow:0 0 0 2px rgba(37,168,232,.10)!important}
#page-designer .fx20-preview{
  position:relative!important;
  height:clamp(190px,15vw,250px)!important;
  overflow:hidden!important;
  background:#071827!important;
  border-bottom:1px solid rgba(105,157,209,.12)!important
}
/* Critical preview scaling fix: fill the WHOLE card width/height instead of leaving a huge empty area. */
#page-designer .fx20-shot{
  position:absolute!important;inset:0 auto auto 0!important;
  width:250%!important;height:250%!important;
  max-width:none!important;
  transform:scale(.4)!important;transform-origin:0 0!important;
  border:0!important;background:#fff!important;pointer-events:none!important
}
#page-designer .fx20-shield{position:absolute!important;inset:0!important;cursor:pointer!important}
#page-designer .fx20-selected{top:10px!important;right:10px!important;z-index:3!important}
#page-designer .fx20-body{display:flex!important;flex:1!important;flex-direction:column!important;padding:15px!important}
#page-designer .fx20-title{align-items:center!important}
#page-designer .fx20-body p{min-height:0!important;margin:10px 0 14px!important;line-height:1.5!important}
#page-designer .fx20-actions{margin-top:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
#page-designer .fx20-demo{grid-column:1/-1!important}
#page-designer .fx20-actions button{width:100%!important}

/* Older built-in theme cards also use clean geometry. */
#page-designer .designer-theme-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
#page-designer .designer-theme-card{min-width:0!important;overflow:hidden!important;border-radius:15px!important}

/* ---------- ADMIN OTHER PAGES ---------- */
#overview .stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
#overview .admin-grid,#settings .admin-grid,#payments .admin-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
#settings .admin-wide{grid-column:1/-1!important}
#settings .card{padding:20px!important}
#settings .two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#settings .three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#users .users-table,#builds #buildTable,#payments .admin-table{max-width:100%!important;overflow:auto!important}
#packages .package-admin-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
#notifications .notification-layout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(330px,.85fr)!important;gap:14px!important}
#addons .fx-upgrade-shell,#cms-update .fx-upgrade-shell,#maintenance .system-module-card{max-width:1180px!important;margin-left:auto!important;margin-right:auto!important}
#addons .fx-upgrade-grid,#cms-update .fx-upgrade-grid{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(330px,.9fr)!important;gap:16px!important}
#maintenance .system-info-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}

/* ---------- USER PAGE ---------- */
.portal-auth-body{
  min-height:100vh!important;
  background:radial-gradient(circle at 12% 5%,rgba(22,143,240,.08),transparent 28%),linear-gradient(145deg,#07111f,#091522)!important
}
.page-theme-aurastudio.portal-auth-body{
  background:radial-gradient(circle at 14% 5%,rgba(129,92,233,.08),transparent 28%),linear-gradient(145deg,#0a1120,#0d1424)!important
}
.fx-user-auth{
  min-height:100vh!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(400px,.72fr)!important;gap:0!important
}
.fx-user-showcase{padding:58px clamp(32px,5vw,82px)!important;border-right:1px solid var(--u31-line)!important}
.fx-user-panel{width:min(500px,calc(100% - 44px))!important;margin:auto!important;padding:32px!important}
.fx-user-showcase .auth-feature-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}

/* ---------- APP STUDIO ---------- */
.studio-page-designed{
  min-height:100vh!important;
  background:radial-gradient(circle at 12% 0%,rgba(22,143,240,.035),transparent 28%),linear-gradient(180deg,#07111f,#07121f)!important
}
.page-theme-aurastudio.studio-page-designed{
  background:radial-gradient(circle at 12% 0%,rgba(129,92,233,.05),transparent 27%),linear-gradient(180deg,#0a1120,#0b1322)!important
}
/* Remove ALL old demo-only Home / Design / Content / Advanced chip containers. */
.demo-aura-studio-nav,.demo-studio-tags{display:none!important}
.studio-custom-html:has(.demo-aura-studio-nav),
.studio-custom-html:has(.demo-studio-tags){display:none!important}
.studio-page-designed .view.active{background:transparent!important;color:inherit!important}
.studio-designer-intro{padding:24px 26px!important;margin-bottom:12px!important;border-radius:18px!important}
.studio-designer-blocks{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin-bottom:15px!important}
.studio-designer-blocks article{min-width:0!important;border-radius:15px!important}

/* App Studio builder geometry */
#builder{max-width:100%!important;overflow:visible!important}
#builder .builder-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 310px!important;
  gap:16px!important;align-items:start!important;max-width:100%!important
}
#builder .controls{min-width:0!important;width:100%!important;padding:22px!important;overflow:hidden!important}
#builder .studio-tabs{max-width:100%!important;overflow-x:auto!important;display:flex!important;gap:4px!important}
#builder .studio-tab{flex:0 0 auto!important;min-width:max-content!important}
#builder .two,#builder .three,#builder .prime-setting-grid,#builder .feature-grid,#builder .upload-grid{min-width:0!important;gap:10px!important}
#builder .two>*,#builder .three>*,#builder .prime-setting-grid>*,#builder .feature-grid>*,#builder .upload-grid>*{min-width:0!important}
#builder input,#builder select,#builder textarea{width:100%!important;min-width:0!important}
#builder .preview-wrap{
  position:sticky!important;top:78px!important;
  width:310px!important;max-width:100%!important;min-width:0!important;
  margin:0!important;overflow:visible!important
}
#builder .device{width:286px!important;height:600px!important;max-width:100%!important;margin:0 auto!important;border-radius:35px!important}
#builder .device-screen{border-radius:23px!important}
#dashboard .stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
#templates .template-grid,#packages .pricing-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
#notifications .notification-layout,#payments .payment-layout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(320px,.85fr)!important;gap:14px!important}

/* ---------- PUBLIC HOMEPAGE ---------- */
body:not(.portal-auth-body):not(.studio-page-designed) main,
body:not(.portal-auth-body):not(.studio-page-designed) header,
body:not(.portal-auth-body):not(.studio-page-designed) footer{max-width:100%!important}
.hero,.home-hero,.theme-hero{overflow:hidden!important}
.hero h1,.home-hero h1,.theme-hero h1{max-width:900px!important}
.feature-grid,.features-grid,.pricing-grid,.package-grid{align-items:stretch!important}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1180px){
  #overview .stats,#dashboard .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #packages .package-admin-grid,#templates .template-grid,#packages .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #addons .fx-upgrade-grid,#cms-update .fx-upgrade-grid{grid-template-columns:1fr!important}
  #page-designer .designer-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #builder .builder-grid{grid-template-columns:minmax(0,1fr) 285px!important}
  #builder .preview-wrap{width:285px!important}
  #builder .device{width:265px!important;height:570px!important}
}
@media(max-width:980px){
  .main{padding-left:20px!important;padding-right:20px!important}
  #overview .admin-grid,#settings .admin-grid,#payments .admin-grid,#notifications .notification-layout{grid-template-columns:1fr!important}
  #page-designer .fx20-grid,#page-designer .designer-theme-grid{grid-template-columns:1fr!important}
  #page-designer .fx20-preview{height:235px!important}
  .fx-user-auth{grid-template-columns:1fr!important}
  .fx-user-showcase{min-height:auto!important;border-right:0!important;border-bottom:1px solid var(--u31-line)!important;padding:68px 26px 34px!important}
  .fx-user-panel{width:min(620px,calc(100% - 28px))!important;margin:18px auto 36px!important}
  .studio-designer-blocks{grid-template-columns:1fr!important}
  #builder .builder-grid{grid-template-columns:1fr!important}
  #builder .preview-wrap{position:relative!important;top:auto!important;width:min(350px,100%)!important;margin:18px auto 0!important}
  #builder .device{width:min(310px,100%)!important;height:625px!important}
}
@media(max-width:760px){
  .main{padding:14px 12px 70px!important}
  .topbar{align-items:flex-start!important}
  .top-actions{width:100%!important;justify-content:flex-start!important}
  #overview .stats,#dashboard .stats,#packages .package-admin-grid,#templates .template-grid,#packages .pricing-grid{grid-template-columns:1fr!important}
  #maintenance .system-info-grid,#settings .two,#settings .three,#builder .two,#builder .three,#builder .prime-setting-grid,#builder .feature-grid,#builder .upload-grid{grid-template-columns:1fr!important}
  #page-designer .page-designer-hero{display:block!important;padding:18px!important}
  #page-designer .page-designer-hero .primary{width:100%!important;margin-top:14px!important}
  #page-designer .designer-tabs{width:100%!important;display:grid!important;grid-template-columns:1fr!important}
  #page-designer .fx20-head{display:block!important}
  #page-designer .fx20-head button{width:100%!important;margin-top:10px!important}
  #page-designer .fx20-actions{grid-template-columns:1fr!important}
  #page-designer .fx20-demo{grid-column:auto!important}
  .fx-user-showcase .auth-feature-list{grid-template-columns:1fr!important}
  .fx-user-panel{padding:21px!important}
  #builder .controls{padding:14px!important}
}