/* Flinapp CMS V4.24.27 — Professional Desktop + Mobile redesign for every CMS page */

/* ---------- GLOBAL DESIGN TOKENS ---------- */
:root{
  --fx-bg:#07111f;
  --fx-sidebar:#081521;
  --fx-panel:#0d2136;
  --fx-panel-2:#0a1a2b;
  --fx-line:rgba(119,158,198,.16);
  --fx-line-strong:rgba(119,158,198,.26);
  --fx-text:#f5f9ff;
  --fx-muted:#8da5bb;
  --fx-soft:#6e8ca8;
  --fx-blue:#168ff0;
  --fx-violet:#6d50ed;
  --fx-green:#19c58b;
  --fx-danger:#ef657a;
  --fx-radius:18px;
  --fx-shadow:0 18px 45px rgba(0,0,0,.13);
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--fx-bg);color:var(--fx-text)}
.shell,.main,.admin-section,.view,.card,.portal-auth-shell,.page-designer-shell{min-width:0!important;max-width:100%!important}
img,svg,video,canvas,iframe{max-width:100%}

/* ---------- ADMIN: SHARED LAYOUT ---------- */
body:not(.portal-auth-body) .sidebar{
  background:linear-gradient(180deg,#081521,#06101b)!important;
  border-right:1px solid var(--fx-line)!important;
}
body:not(.portal-auth-body) .main{background:
  radial-gradient(circle at 10% 0%,rgba(22,143,240,.055),transparent 30%),
  linear-gradient(180deg,#07111f,#07121f)!important;
}
.topbar{
  min-height:72px!important;
  padding:10px 0 18px!important;
  border-bottom:1px solid rgba(116,155,194,.10)!important;
  gap:14px!important;
}
.topbar h1{font-size:clamp(24px,2.4vw,34px)!important;letter-spacing:-.04em!important}
.topbar .eyebrow{color:#6daee5!important}
.top-actions{gap:8px!important;flex-wrap:wrap!important}

.admin-section{padding-top:20px!important}
.admin-section>.card,
.admin-section .card,
.page-designer-shell,
.packages-page,
.fx-upgrade-shell,
.system-module-card{
  border-color:var(--fx-line)!important;
}
.card{
  border:1px solid var(--fx-line)!important;
  border-radius:var(--fx-radius)!important;
  background:linear-gradient(180deg,rgba(13,33,54,.97),rgba(8,23,39,.98))!important;
  box-shadow:var(--fx-shadow)!important;
}
.card h2,.card h3,.card h4{letter-spacing:-.025em!important}
.card .hint,.section-copy{color:var(--fx-muted)!important}

input,select,textarea{
  min-height:44px;
  border:1px solid rgba(118,158,198,.20)!important;
  border-radius:11px!important;
  outline:none!important;
  transition:border-color .16s ease,box-shadow .16s ease!important;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(52,143,232,.72)!important;
  box-shadow:0 0 0 3px rgba(35,126,223,.10)!important;
}
button,.primary,.ghost{
  border-radius:10px!important;
  transition:transform .16s ease,filter .16s ease,border-color .16s ease!important;
}
button:hover,.primary:hover,.ghost:hover{transform:translateY(-1px)}
.primary{
  border:0!important;
  background:linear-gradient(135deg,var(--fx-blue),var(--fx-violet))!important;
  box-shadow:0 9px 22px rgba(48,91,221,.18)!important;
}

/* ---------- OVERVIEW ---------- */
#overview .stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
#overview .stats .card,#overview .stat{
  min-height:122px!important;
  padding:18px!important;
  border-radius:16px!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 .card{padding:20px!important}
#settings .admin-wide{grid-column:1/-1!important}
#settings label{display:block!important;margin-top:12px!important;color:#a3b6c9!important;font-size:11px!important;font-weight:750!important}
#settings label:first-of-type{margin-top:0!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 .page-designer-shell{display:block!important}
#page-designer .designer-tabs{
  display:flex!important;gap:7px!important;flex-wrap:wrap!important;
  padding:6px!important;border:1px solid var(--fx-line)!important;border-radius:13px!important;background:#08192b!important;
}
#page-designer .designer-tabs button{min-height:38px!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 .designer-theme-grid>*{min-width:0!important}
#page-designer .fx20-card,#page-designer .theme-card{
  border:1px solid var(--fx-line)!important;border-radius:16px!important;overflow:hidden!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-section-head{align-items:center!important}
#users .users-table{overflow:auto!important;border-radius:14px!important}
#users .user-row{
  border-color:rgba(111,151,191,.12)!important;
  background:rgba(7,24,41,.42)!important;
}
#users .user-row:not(.user-header):hover{background:rgba(11,34,56,.75)!important}
#users .create-user-panel{
  border:1px solid var(--fx-line)!important;border-radius:16px!important;
  background:#091b2e!important;padding:18px!important;
}
#users .create-user-grid{gap:12px!important}

/* ---------- PACKAGES ---------- */
#packages .packages-page{max-width:100%!important}
#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(--fx-line)!important;border-radius:20px!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(104,80,237,.12),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(--fx-line)!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;
}
#packages .package-card,#packages .package-admin-card{
  border:1px solid var(--fx-line)!important;border-radius:16px!important;
  background:linear-gradient(180deg,#0d2136,#091827)!important;
}

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

/* ---------- NOTIFICATIONS ---------- */
#notifications .notification-layout{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(340px,.8fr)!important;gap:14px!important;align-items:start!important;
}
#notifications .notification-history{max-height:650px!important;overflow:auto!important}

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

/* ---------- ADD-ONS ---------- */
#addons .fx-upgrade-shell{max-width:1180px!important;margin:0 auto!important}
#addons .fx-upgrade-grid{gap:16px!important}
#addons .fx-upload-card,#addons .fx-version-card,#addons .fx-history-card{
  border-color:rgba(55,127,193,.30)!important;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;
}

/* ---------- SYSTEM UPDATE ---------- */
#cms-update .fx-upgrade-shell{max-width:1180px!important;margin:0 auto!important}
#cms-update .fx-upgrade-grid{
  display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(330px,.9fr)!important;gap:16px!important;
}
#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;
}
#cms-update .fx-dropzone{min-height:290px!important}
#cms-update #installCmsUpdateBtn{min-height:58px!important}

/* ---------- MAINTENANCE ---------- */
#maintenance .system-module-card,#maintenance .card{
  max-width:1100px!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;
}

/* ---------- PUBLIC HOME ---------- */
body:not(.portal-auth-body):not(.studio-page-designed) .site-header,
body:not(.portal-auth-body):not(.studio-page-designed) .home-shell{
  max-width:100%!important;
}

/* ---------- USER LOGIN / REGISTER: DEMO-AWARE, NO PINK BACKGROUND ---------- */
.portal-auth-body{
  --demo-accent:#168ff0;
  --demo-accent-2:#6d50ed;
  min-height:100vh!important;
  background:
    radial-gradient(circle at 12% 5%,rgba(22,143,240,.12),transparent 28%),
    linear-gradient(145deg,#07111f,#091522)!important;
}
.page-theme-aurastudio.portal-auth-body{
  --demo-accent:#8357ed;
  --demo-accent-2:#b44bd3;
  background:
    radial-gradient(circle at 15% 5%,rgba(132,87,237,.12),transparent 28%),
    radial-gradient(circle at 92% 8%,rgba(179,75,211,.07),transparent 26%),
    linear-gradient(145deg,#0a1120,#0d1424 72%)!important;
}
.page-theme-novatech.portal-auth-body{
  --demo-accent:#168ff0;
  --demo-accent-2:#3c67f1;
  background:
    radial-gradient(circle at 12% 5%,rgba(22,143,240,.12),transparent 28%),
    linear-gradient(145deg,#071522,#0b1b2b 72%)!important;
}
.fx-user-auth{
  min-height:100vh!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.72fr)!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(--fx-line)!important;border-radius:0!important;
  background:
    radial-gradient(circle at 16% 8%,color-mix(in srgb,var(--demo-accent) 16%,transparent),transparent 29%),
    linear-gradient(145deg,#0a1a2b,#081522 72%)!important;
}
.page-theme-aurastudio .fx-user-showcase{
  background:
    radial-gradient(circle at 14% 8%,rgba(132,87,237,.15),transparent 28%),
    radial-gradient(circle at 90% 12%,rgba(180,75,211,.07),transparent 28%),
    linear-gradient(145deg,#11182a,#0b1423 72%)!important;
}
.fx-user-showcase .portal-auth-copy h1{
  max-width:720px!important;
  font-size:clamp(40px,5vw,68px)!important;
  line-height:1.00!important;letter-spacing:-.05em!important;
}
.fx-user-showcase .portal-auth-copy p{max-width:700px!important;font-size:15px!important;line-height:1.75!important;color:#93a9be!important}
.fx-user-showcase .pill{
  border-color:color-mix(in srgb,var(--demo-accent) 35%,transparent)!important;
  background:color-mix(in srgb,var(--demo-accent) 12%,transparent)!important;
  color:#cfe5ff!important;
}
.fx-user-panel{
  width:min(510px,calc(100% - 46px))!important;margin:auto!important;padding:34px!important;
  border:1px solid var(--fx-line)!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 button.active{
  background:linear-gradient(135deg,var(--demo-accent),var(--demo-accent-2))!important;
}

/* ---------- APP STUDIO: DEMO-AWARE, NO PINK BACKGROUND ---------- */
.studio-page-designed{
  --studio-accent:#168ff0;
  --studio-accent-2:#6d50ed;
  min-height:100vh!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(22,143,240,.05),transparent 30%),
    linear-gradient(180deg,#07111f,#07121f)!important;
}
.page-theme-aurastudio.studio-page-designed{
  --studio-accent:#8357ed;
  --studio-accent-2:#a94ccf;
  background:
    radial-gradient(circle at 12% 0%,rgba(132,87,237,.07),transparent 28%),
    linear-gradient(180deg,#0a1120,#0b1322)!important;
}
.page-theme-novatech.studio-page-designed{
  --studio-accent:#168ff0;
  --studio-accent-2:#4268f2;
}
.studio-page-designed .main{background:transparent!important}
.studio-page-designed .studio-designer-intro{
  margin-bottom:14px!important;padding:28px 30px!important;
  border:1px solid var(--fx-line)!important;border-radius:20px!important;
  background:
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--studio-accent) 12%,transparent),transparent 30%),
    linear-gradient(145deg,#0d1d30,#091522)!important;
  box-shadow:var(--fx-shadow)!important;
}
.page-theme-aurastudio.studio-page-designed .studio-designer-intro{
  background:
    radial-gradient(circle at 88% 8%,rgba(132,87,237,.12),transparent 30%),
    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;
}
.studio-page-designed .studio-designer-blocks article{
  min-height:104px!important;border:1px solid var(--fx-line)!important;border-radius:16px!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;
}
.studio-page-designed .view.active{background:transparent!important}
.page-theme-aurastudio.studio-page-designed .view.active{background:transparent!important;color:inherit!important}

/* Dashboard */
#dashboard .dash-hero,#dashboard .dashboard-hero{
  border-radius:20px!important;border:1px solid var(--fx-line)!important;
}
#dashboard .stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}

/* Builder */
#builder .builder-grid{
  display:grid!important;grid-template-columns:minmax(0,1fr) 330px!important;gap:18px!important;align-items:start!important;
}
#builder .controls{
  min-width:0!important;width:100%!important;padding:24px!important;
  border:1px solid var(--fx-line)!important;border-radius:20px!important;
  background:linear-gradient(180deg,#0d2944,#0a2037)!important;box-shadow:var(--fx-shadow)!important;
}
.page-theme-aurastudio.studio-page-designed #builder .controls{
  background:linear-gradient(180deg,#111d30,#0b1728)!important;
}
#builder .studio-tabs{
  max-width:100%!important;overflow-x:auto!important;padding:6px!important;
  border:1px solid var(--fx-line)!important;border-radius:13px!important;background:#08192b!important;
}
#builder .studio-tab{flex:0 0 auto!important;min-width:max-content!important}
#builder .studio-tab.active{
  background:linear-gradient(135deg,var(--studio-accent),var(--studio-accent-2))!important;color:#fff!important;
}
#builder .preview-wrap{
  position:sticky!important;top:78px!important;width:330px!important;max-width:100%!important;
}
#builder .device{width:300px!important;height:620px!important;margin:0 auto!important;border-radius:38px!important}
#builder .device-screen{border-radius:25px!important}

/* Templates / Downloads / Notifications / Packages / Payments */
#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(--fx-line)!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}

/* ---------- DESKTOP / TABLET / MOBILE ---------- */
@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}
  #cms-update .fx-upgrade-grid{grid-template-columns:1fr!important}
  #builder .builder-grid{grid-template-columns:minmax(0,1fr) 300px!important}
  #builder .preview-wrap{width:300px!important}
  #builder .device{width:278px!important;height:590px!important}
}
@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(--fx-line)!important}
  .fx-user-panel{width:min(620px,calc(100% - 28px))!important;margin:18px auto 38px!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:630px!important}
  .studio-page-designed .studio-designer-blocks{grid-template-columns:1fr!important}
}
@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{grid-template-columns:1fr!important}
  .packages-hero,#packages .packages-hero{display:block!important}
  #packages .package-create-cta{width:100%!important;margin-top:14px!important}
  .fx-user-showcase{padding:66px 18px 26px!important}
  .fx-user-showcase .portal-auth-copy h1{font-size:38px!important}
  .fx-user-panel{padding:22px!important;border-radius:18px!important}
}
@media(max-width:520px){
  .card{padding:15px!important;border-radius:15px!important}
  #builder .controls{padding:14px!important}
  #builder .device{height:600px!important}
  .studio-page-designed .studio-designer-intro{padding:20px 16px!important}
  .fx-user-showcase .auth-feature-list{grid-template-columns:1fr!important}
}