/* ==========================================================================
   Flinapp CMS V4.24.28
   Professional layout v2 — desktop / tablet / mobile
   ========================================================================== */

:root{
  --p-bg:#07111f;
  --p-bg2:#091624;
  --p-panel:#0d2136;
  --p-panel2:#0a1a2b;
  --p-panel3:#10263d;
  --p-border:rgba(117,158,199,.16);
  --p-border2:rgba(117,158,199,.25);
  --p-text:#f5f9ff;
  --p-muted:#8da4ba;
  --p-soft:#6f8ca7;
  --p-blue:#188ff0;
  --p-violet:#6d50ed;
  --p-green:#18c58b;
  --p-red:#ef647a;
  --p-shadow:0 18px 45px rgba(0,0,0,.14);
  --p-radius:18px;
}

/* GLOBAL */
html,body{max-width:100%;overflow-x:hidden!important}
body{background:var(--p-bg)!important;color:var(--p-text)}
.shell,.main,.admin-section,.view,.card,.portal-auth-shell,.page-designer-shell,
.fx-upgrade-shell,.packages-page{min-width:0!important;max-width:100%!important}
img,svg,video,canvas,iframe{max-width:100%!important}
.main{overflow-x:hidden!important}
.hidden{display:none!important}

.card{
  border:1px solid var(--p-border)!important;
  border-radius:var(--p-radius)!important;
  background:linear-gradient(180deg,rgba(13,33,54,.98),rgba(8,22,37,.99))!important;
  box-shadow:var(--p-shadow)!important;
}
.card h1,.card h2,.card h3,.card h4{letter-spacing:-.025em!important}
.hint,.section-copy{color:var(--p-muted)!important}

input,select,textarea{
  max-width:100%!important;
  border:1px solid rgba(115,156,197,.21)!important;
  border-radius:11px!important;
  outline:none!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#3b92e5!important;
  box-shadow:0 0 0 3px rgba(48,135,225,.10)!important;
}
button,.primary,.ghost,a.ghost{
  border-radius:10px!important;
}
.primary{
  border:0!important;
  background:linear-gradient(135deg,var(--p-blue),var(--p-violet))!important;
  box-shadow:0 9px 22px rgba(46,88,219,.18)!important;
}

/* ADMIN SHELL */
.sidebar{
  background:linear-gradient(180deg,#081521,#06101b)!important;
  border-right:1px solid var(--p-border)!important;
}
.main{
  background:
    radial-gradient(circle at 8% 0%,rgba(24,143,240,.045),transparent 28%),
    linear-gradient(180deg,#07111f,#07121f)!important;
}
.topbar{
  min-height:74px!important;
  gap:14px!important;
  padding:10px 0 18px!important;
  border-bottom:1px solid rgba(116,155,194,.10)!important;
}
.topbar h1{font-size:clamp(25px,2.6vw,35px)!important;letter-spacing:-.04em!important}
.top-actions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.admin-section{padding-top:20px!important;overflow-x:hidden!important}

/* OVERVIEW */
#overview .stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
#overview .stats .stat,#overview .stats .card{
  min-height:118px!important;
  padding:18px!important;
}
#overview .admin-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

/* SETTINGS */
#settings .admin-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:start!important;
}
#settings .admin-wide{grid-column:1/-1!important}
#settings .card{padding:21px!important}
#settings label{
  display:block!important;
  margin-top:12px!important;
  color:#a2b6c9!important;
  font-size:11px!important;
  font-weight:750!important;
}
#settings input,#settings select,#settings textarea{width:100%!important;margin-top:6px!important}
#settings .two,#settings .three{gap:10px!important}

/* PAGE DESIGNER */
#page-designer .designer-tabs{
  display:flex!important;gap:7px!important;flex-wrap:wrap!important;
  padding:6px!important;border:1px solid var(--p-border)!important;
  border-radius:13px!important;background:#08192b!important;
}
#page-designer .designer-pane{padding-top:16px!important}
#page-designer .designer-grid,
#page-designer .designer-theme-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
#page-designer .fx20-card,#page-designer .theme-card{
  overflow:hidden!important;
  border:1px solid var(--p-border)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#0d2136,#091827)!important;
}
#page-designer .fx20-shot{height:250px!important;background:#fff!important}

/* USERS */
#users .users-card{padding:20px!important}
#users .users-table{overflow:auto!important;border-radius:14px!important}
#users .user-row{border-color:rgba(110,150,190,.12)!important}
#users .user-row:not(.user-header){background:rgba(8,25,42,.48)!important}
#users .create-user-panel{
  padding:18px!important;
  border:1px solid var(--p-border)!important;
  border-radius:16px!important;
  background:#091b2e!important;
}

/* PACKAGES */
#packages .packages-hero{
  display:flex!important;justify-content:space-between!important;align-items:flex-end!important;
  gap:18px!important;padding:24px!important;
  border:1px solid var(--p-border)!important;border-radius:20px!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(105,80,237,.11),transparent 28%),
    linear-gradient(145deg,#0d2136,#091827)!important;
}
#packages .package-stats{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;margin:14px 0!important;
}
#packages .package-stats article{
  padding:14px!important;border:1px solid var(--p-border)!important;
  border-radius:14px!important;background:#0a1c30!important;
}
#packages .package-admin-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;
}

/* PAYMENTS / NOTIFICATIONS */
#payments .payment-layout,#payments .admin-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;
}
#notifications .notification-layout{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(330px,.85fr)!important;gap:14px!important;
}
#payments .admin-table,#notifications .notification-history{overflow:auto!important}

/* BUILDS */
#builds #buildTable,#builds .build-list{overflow:auto!important}
#builds .build-card{
  border:1px solid var(--p-border)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#0d2136,#091827)!important;
}
#builds .build-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important}

/* ADD-ONS / SYSTEM UPDATE */
#addons .fx-upgrade-shell,#cms-update .fx-upgrade-shell{max-width:1180px!important;margin:0 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;
}
#addons .fx-upload-card,#addons .fx-version-card,#addons .fx-history-card,
#cms-update .fx-upload-card,#cms-update .fx-version-card,#cms-update .fx-history-card{
  border-radius:17px!important;
  background:linear-gradient(180deg,#0b2946,#071b31)!important;
}
#addons .fx-installed-addon-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
}
#cms-update .fx-dropzone{min-height:290px!important}

/* MAINTENANCE */
#maintenance .system-module-card,#maintenance .card{
  max-width:1180px!important;margin:0 auto!important;padding:22px!important;
}
#maintenance .system-info-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;
}

/* ==========================================================================
   USER PAGE — use imported demo content, but remove pink/magenta page background
   ========================================================================== */

.portal-auth-body{
  --theme-a:#188ff0;
  --theme-b:#6d50ed;
  min-height:100vh!important;
  background:
    radial-gradient(circle at 12% 4%,rgba(24,143,240,.10),transparent 28%),
    linear-gradient(145deg,#07111f,#091522)!important;
}
.page-theme-aurastudio.portal-auth-body{
  --theme-a:#815ce9;
  --theme-b:#a85bc6;
  background:
    radial-gradient(circle at 14% 4%,rgba(129,92,233,.10),transparent 28%),
    radial-gradient(circle at 90% 7%,rgba(168,91,198,.045),transparent 24%),
    linear-gradient(145deg,#0a1120,#0d1424)!important;
}
.page-theme-novatech.portal-auth-body{
  --theme-a:#168ff0;
  --theme-b:#436cf2;
  background:
    radial-gradient(circle at 12% 4%,rgba(22,143,240,.11),transparent 28%),
    linear-gradient(145deg,#071522,#0b1b2b)!important;
}
.fx-user-auth{
  min-height:100vh!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.72fr)!important;
  gap:0!important;
  background:transparent!important;
}
.fx-user-showcase{
  min-height:100vh!important;
  padding:58px clamp(36px,6vw,88px)!important;
  border:0!important;border-right:1px solid var(--p-border)!important;border-radius:0!important;
  background:
    radial-gradient(circle at 15% 7%,rgba(24,143,240,.10),transparent 28%),
    linear-gradient(145deg,#0a1a2b,#081522)!important;
}
.page-theme-aurastudio .fx-user-showcase{
  background:
    radial-gradient(circle at 15% 7%,rgba(129,92,233,.12),transparent 28%),
    radial-gradient(circle at 90% 9%,rgba(168,91,198,.045),transparent 25%),
    linear-gradient(145deg,#11182a,#0b1423)!important;
}
.fx-user-showcase .portal-auth-copy h1{
  max-width:720px!important;
  font-size:clamp(40px,5vw,68px)!important;
  line-height:1!important;letter-spacing:-.05em!important;
}
.fx-user-showcase .portal-auth-copy>p{
  max-width:700px!important;color:#93a9be!important;font-size:15px!important;line-height:1.75!important;
}
.fx-user-showcase .auth-feature-list{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;
}
.fx-user-showcase .auth-feature-list span{
  padding:12px!important;border:1px solid var(--p-border)!important;border-radius:12px!important;
  background:rgba(6,20,34,.60)!important;color:#afc0d1!important;
}
.fx-user-panel{
  width:min(510px,calc(100% - 46px))!important;
  margin:auto!important;padding:34px!important;
  border:1px solid var(--p-border)!important;border-radius:22px!important;
  background:linear-gradient(180deg,#0d2136,#091827)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.30)!important;
}
.page-theme-aurastudio .fx-user-panel{
  background:linear-gradient(180deg,#151c2f,#0c1423)!important;
}
.fx-user-panel .auth-tabs{
  background:#071827!important;border:1px solid var(--p-border)!important;
}
.fx-user-panel .auth-tabs button.active{
  background:linear-gradient(135deg,var(--theme-a),var(--theme-b))!important;color:#fff!important;
}

/* ==========================================================================
   APP STUDIO — imported demo text/blocks remain; pink page fill is removed
   ========================================================================== */

.studio-page-designed{
  --studio-a:#188ff0;
  --studio-b:#6d50ed;
  min-height:100vh!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(24,143,240,.04),transparent 28%),
    linear-gradient(180deg,#07111f,#07121f)!important;
}
.page-theme-aurastudio.studio-page-designed{
  --studio-a:#815ce9;
  --studio-b:#9c62d0;
  background:
    radial-gradient(circle at 12% 0%,rgba(129,92,233,.055),transparent 27%),
    linear-gradient(180deg,#0a1120,#0b1322)!important;
}
.page-theme-novatech.studio-page-designed{
  --studio-a:#168ff0;
  --studio-b:#436cf2;
}
.studio-page-designed .main{background:transparent!important}

/* Imported demo heading/blocks */
.studio-page-designed .studio-designer-intro{
  position:relative!important;
  margin:0 0 13px!important;
  padding:25px 28px!important;
  border:1px solid var(--p-border)!important;border-radius:18px!important;
  background:
    radial-gradient(circle at 88% 8%,rgba(24,143,240,.08),transparent 28%),
    linear-gradient(145deg,#0d1d30,#091522)!important;
  box-shadow:var(--p-shadow)!important;
}
.page-theme-aurastudio.studio-page-designed .studio-designer-intro{
  background:
    radial-gradient(circle at 88% 8%,rgba(129,92,233,.09),transparent 28%),
    linear-gradient(145deg,#12192a,#0b1423)!important;
}
.studio-page-designed .studio-designer-blocks{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin-bottom:14px!important;
}
.studio-page-designed .studio-designer-blocks article{
  min-height:100px!important;padding:17px!important;
  border:1px solid var(--p-border)!important;border-radius:15px!important;
  background:linear-gradient(180deg,#0d2136,#091827)!important;
}
.page-theme-aurastudio.studio-page-designed .studio-designer-blocks article{
  background:linear-gradient(180deg,#141c2e,#0d1524)!important;
}

/* Imported theme custom HTML may contain old pink navigation.
   Keep its content, but restyle its shell and controls professionally. */
.studio-page-designed .studio-custom-html{
  max-width:100%!important;
  margin:0 0 14px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  color:inherit!important;
}
.page-theme-aurastudio.studio-page-designed .studio-custom-html{
  background:transparent!important;
}
.studio-page-designed .studio-custom-html > div,
.studio-page-designed .studio-custom-html > section,
.studio-page-designed .studio-custom-html > nav{
  background:transparent!important;
}
.studio-page-designed .studio-custom-html nav,
.studio-page-designed .studio-custom-html .tabs,
.studio-page-designed .studio-custom-html .studio-tabs{
  display:flex!important;flex-wrap:wrap!important;gap:7px!important;
  padding:6px!important;border:1px solid var(--p-border)!important;border-radius:13px!important;
  background:#081827!important;
}
.studio-page-designed .studio-custom-html nav a,
.studio-page-designed .studio-custom-html nav button,
.studio-page-designed .studio-custom-html .tabs a,
.studio-page-designed .studio-custom-html .tabs button{
  padding:8px 13px!important;border:1px solid transparent!important;border-radius:9px!important;
  background:#0a1d30!important;color:#a8bbcd!important;text-decoration:none!important;font-size:12px!important;font-weight:800!important;
}
.studio-page-designed .studio-custom-html nav a:hover,
.studio-page-designed .studio-custom-html nav a.active,
.studio-page-designed .studio-custom-html nav button:hover,
.studio-page-designed .studio-custom-html nav button.active{
  background:linear-gradient(135deg,var(--studio-a),var(--studio-b))!important;color:#fff!important;
}
.page-theme-aurastudio.studio-page-designed .studio-custom-html [style*="background"]{
  background-color:transparent!important;
}

/* Never let theme generic .active color whole views */
.studio-page-designed .view.active,
.page-theme-aurastudio.studio-page-designed .view.active,
.page-theme-novatech.studio-page-designed .view.active{
  background:transparent!important;color:inherit!important;
}

/* APP STUDIO DASHBOARD */
#dashboard .stats{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;
}
#dashboard .dash-hero,#dashboard .dashboard-hero{
  border:1px solid var(--p-border)!important;border-radius:19px!important;
  background:linear-gradient(145deg,#0d2136,#091827)!important;
}

/* APP STUDIO BUILDER */
#builder{max-width:100%!important;overflow:visible!important;background:transparent!important}
#builder .builder-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,320px)!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;
  border:1px solid var(--p-border)!important;border-radius:19px!important;
  background:linear-gradient(180deg,#0d2944,#0a2037)!important;
  box-shadow:var(--p-shadow)!important;
}
.page-theme-aurastudio.studio-page-designed #builder .controls{
  background:linear-gradient(180deg,#111d30,#0b1728)!important;
}
#builder .studio-tabs{
  max-width:100%!important;display:flex!important;overflow-x:auto!important;gap:4px!important;
  padding:6px!important;border:1px solid var(--p-border)!important;border-radius:13px!important;background:#08192b!important;
}
#builder .studio-tab{
  flex:0 0 auto!important;min-width:max-content!important;padding:10px 15px!important;border-radius:9px!important;
}
#builder .studio-tab.active{
  background:linear-gradient(135deg,var(--studio-a),var(--studio-b))!important;color:#fff!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;
  background:#f4f8fc!important;color:#142236!important;
  border:1px solid #dbe6f0!important;
}
#builder .release-build-card,#builder .prime-studio-card{
  max-width:100%!important;overflow:hidden!important;
  border:1px solid rgba(104,149,191,.18)!important;border-radius:15px!important;
  background:rgba(5,24,41,.28)!important;
}
#builder .preview-wrap{
  position:sticky!important;top:82px!important;
  width:320px!important;max-width:100%!important;min-width:0!important;
  margin:0!important;overflow:visible!important;
}
#builder .preview-toolbar{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:8px!important;padding:0 3px 8px!important;color:#91a7bc!important;
}
#builder .device{
  width:292px!important;height:610px!important;
  max-width:100%!important;margin:0 auto!important;
  border-radius:36px!important;border-width:8px!important;
}
#builder .device-screen{border-radius:24px!important}

/* APP STUDIO other sections */
#templates .template-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;
}
#downloads .build-card,#downloads .build-row{
  border:1px solid var(--p-border)!important;border-radius:15px!important;background:#0a1c30!important;
}
#notifications .notification-layout,#payments .payment-layout{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(330px,.85fr)!important;gap:14px!important;
}
#packages .pricing-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;
}

/* Modal/preview containment */
#fxUnifiedConfirm:not(.is-open),#fx20Preview.hidden,.fx20-modal.hidden,#appModalRoot:empty{display:none!important}
#fx20Preview:not(.hidden),.fx20-modal:not(.hidden){
  position:fixed!important;inset:0!important;z-index:109000!important;width:100vw!important;height:100vh!important;
}

/* TABLET */
@media(max-width:1180px){
  #overview .stats,#packages .package-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}
  #builder .builder-grid{grid-template-columns:minmax(0,1fr) 290px!important}
  #builder .preview-wrap{width:290px!important}
  #builder .device{width:270px!important;height:575px!important}
}

/* MOBILE / SMALL TABLET */
@media(max-width:980px){
  #settings .admin-grid,#overview .admin-grid,#payments .payment-layout,#payments .admin-grid,
  #notifications .notification-layout{grid-template-columns:1fr!important}
  #page-designer .designer-grid,#page-designer .designer-theme-grid{grid-template-columns:1fr!important}

  .fx-user-auth{grid-template-columns:1fr!important}
  .fx-user-showcase{
    min-height:auto!important;padding:72px 28px 36px!important;
    border-right:0!important;border-bottom:1px solid var(--p-border)!important;
  }
  .fx-user-panel{width:min(620px,calc(100% - 28px))!important;margin:18px auto 38px!important}

  .studio-page-designed .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}
}

/* PHONE */
@media(max-width:760px){
  .main{padding:18px 14px 72px!important}
  .topbar{align-items:flex-start!important}
  .top-actions{width:100%!important;justify-content:flex-start!important}
  #overview .stats,#packages .package-stats,#dashboard .stats{grid-template-columns:1fr!important}
  #packages .package-admin-grid,#templates .template-grid,#packages .pricing-grid{grid-template-columns:1fr!important}
  #addons .fx-installed-addon-grid{grid-template-columns:1fr!important}
  #maintenance .system-info-grid{grid-template-columns:1fr!important}
  #settings .two,#settings .three,#users .create-user-grid,
  #builder .two,#builder .three,#builder .prime-setting-grid,#builder .feature-grid,#builder .upload-grid{
    grid-template-columns:1fr!important;
  }
  #packages .packages-hero{display:block!important}
  .fx-user-showcase{padding:66px 18px 26px!important}
  .fx-user-showcase .portal-auth-copy h1{font-size:38px!important}
  .fx-user-showcase .auth-feature-list{grid-template-columns:1fr!important}
  .fx-user-panel{padding:22px!important;border-radius:18px!important}
  .studio-page-designed .studio-designer-intro{padding:20px 16px!important}
  #builder .controls{padding:15px!important}
}
@media(max-width:520px){
  .card{padding:15px!important;border-radius:15px!important}
  #builder .device{height:590px!important}
  #builder .studio-tab{padding:9px 12px!important}
}