:root{
  --accent:#4e6fea;
  --heading-color:#1b2436;
  --body-color:#49566b;
  --nav-color:#4d596f;
  --button-text:#ffffff;
  --button-bg-1:#4e6fea;
  --button-bg-2:#8877ee;
  --accent2:#8877ee;
  --text:#1b2436;
  --muted:#677287;
  --glass-alpha:.55;
  --glass:rgba(255,255,255,var(--glass-alpha));
  --glass-strong:rgba(255,255,255,.72);
  --border:rgba(255,255,255,.78);
  --radius:24px;
  --blur:24px;
  --sidebar:270px;
  --content-max:1450px;
  --wallpaper-brightness:1;
  --wallpaper-saturation:1.05;
  --wallpaper-blur:0px;
  --font-family:var(--font-family);
  --font-size:16px;
  --heading-weight:700;
  --body-weight:400;
  --nav-weight:650;
  --line-height:1.7;
  --card-alpha:.55;
  --card-border-alpha:.78;
  --shadow-strength:.12;
  --hero-text:#ffffff;
  --hero-text-muted:#e9edff;
  --hero-1:#223a9c;
  --hero-2:#4e6fea;
  --hero-3:#8877ee;
  --topbar-alpha:.55;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:1180px;
  min-height:100vh;
  font-family:var(--font-family);
  color:var(--heading-color);
  background:#dfe8f3;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.wallpaper{
  position:fixed;
  inset:0;
  z-index:-3;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.025);
  filter:brightness(var(--wallpaper-brightness)) saturate(var(--wallpaper-saturation)) blur(var(--wallpaper-blur));
}
.wallpaper-overlay{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(246,249,255,.10),rgba(246,249,255,.24)),
    radial-gradient(circle at 55% 18%,rgba(255,255,255,.16),transparent 38%);
}
.glass{
  background:var(--glass);
  border:1px solid var(--border);
  box-shadow:
    0 18px 50px rgba(31,42,70,.12),
    inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(var(--blur)) saturate(155%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(155%);
}
.primary,.secondary,.danger,.ghost{
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  transition:.16s ease;
}
.primary{
  border:0;color:var(--button-text);
  background:linear-gradient(135deg,var(--button-bg-1),var(--button-bg-2));
  box-shadow:0 9px 22px rgba(73,101,225,.2)
}
.secondary{
  border:1px solid rgba(91,103,132,.15);
  background:rgba(255,255,255,.70);
  color:#465066
}
.danger{
  border:1px solid rgba(190,62,80,.18);
  background:rgba(255,247,248,.85);
  color:#b33d4e
}
.ghost{border:0;background:transparent;color:#596378}
.primary:hover,.secondary:hover,.ghost:hover{transform:translateY(-1px)}
.muted{color:var(--muted)}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--accent)}
.label{display:grid;gap:7px;margin-top:17px;font-size:13px;font-weight:650}
.input{
  width:100%;padding:12px 13px;
  border:1px solid rgba(100,112,140,.18);
  border-radius:13px;
  background:rgba(255,255,255,.78);
  outline:0
}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(78,111,234,.09)}

.login-wrap{min-height:100vh;display:grid;place-items:center;padding:40px}
.login{
  width:min(1000px,90vw);
  display:grid;
  grid-template-columns:1.08fr .92fr;
  border-radius:34px;
  overflow:hidden
}
.login-visual{
  min-height:610px;padding:44px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;
  background:
    radial-gradient(circle at 80% 18%,rgba(255,255,255,.22),transparent 24%),
    linear-gradient(145deg,rgba(19,31,65,.86),rgba(53,78,174,.78) 58%,rgba(111,92,211,.70))
}
.login-copy h1{font-size:52px;line-height:1.04;letter-spacing:-.04em;margin:16px 0}
.login-copy p{max-width:580px;line-height:1.7;color:#e8edff}
.login-panel{padding:46px;background:rgba(255,255,255,.74)}
.brand{display:flex;align-items:center;gap:14px}
.logo,.company-logo{
  display:grid;place-items:center;overflow:hidden;
  color:#fff;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2))
}
.logo{width:70px;height:70px;border-radius:22px;font-size:24px}
.company-logo{width:78px;height:78px;border-radius:23px;font-size:25px}
.logo img,.company-logo img{width:100%;height:100%;object-fit:cover}
.alert{padding:11px 13px;border-radius:12px;background:#fff0f2;color:#ad3e4c;margin-top:14px}
.hint{padding:12px 13px;border-radius:12px;background:rgba(241,244,250,.82);color:var(--muted);font-size:12px;margin-top:18px}

.top-shell{
  width:min(calc(100% - 56px),var(--content-max));
  margin:0 auto;
  padding-top:20px;
}
.topbar{
  min-height:100px;
  border-radius:28px;
  padding:13px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:22px
}
.company{display:flex;align-items:center;gap:15px}
.company-copy strong,.company-copy span{display:block}
.company-copy strong{font-size:17px}
.company-copy span{font-size:12px;color:var(--muted);margin-top:3px}
.quicknav{display:flex;gap:8px;align-items:center}
.quicknav button{
  display:flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:13px;padding:10px 12px;
  background:rgba(255,255,255,.48);
  color:#414c62;
  backdrop-filter:blur(14px)
}

.workspace{
  width:min(calc(100% - 56px),var(--content-max));
  margin:0 auto;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  gap:26px;
  padding:20px 0 50px
}
.sidebar{
  position:sticky;
  top:16px;
  align-self:start;
  padding:8px 6px;
  border-radius:20px
}
.nav-caption{
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  font-weight:800;color:#69758b;
  padding:10px 12px 7px
}
.nav-item,.child-item{
  width:100%;border:0;background:transparent;
  text-align:left;color:var(--nav-color);
  border-radius:13px;transition:.16s ease
}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;font-weight:650
}
.nav-item:hover,.nav-item.active,.child-item:hover,.child-item.active{
  background:rgba(255,255,255,.70);
  color:#263047;
  box-shadow:0 8px 20px rgba(39,49,78,.055),inset 0 1px 0 rgba(255,255,255,.9)
}
.nav-icon{display:grid;place-items:center;color:#65718a}
.nav-chevron{margin-left:auto;transition:.16s}
.nav-chevron.open{transform:rotate(90deg)}
.child-list{padding-left:27px;display:grid;gap:2px}
.child-item{padding:8px 10px;font-size:13px}
.content{min-width:0}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}
.page-title{font-size:34px;letter-spacing:-.035em;margin:0 0 4px}
.breadcrumbs{font-size:12px;color:#58657b}
.stack{display:grid;gap:16px}
.hero{
  min-height:215px;
  padding:34px 36px;
  border-radius:var(--radius);
  color:#fff;
  background:
    radial-gradient(circle at 86% 16%,rgba(255,255,255,.20),transparent 23%),
    linear-gradient(135deg,rgba(34,58,156,.94),var(--accent) 58%,var(--accent2));
  box-shadow:0 18px 46px rgba(39,57,130,.18)
}
.hero h2{font-size:36px;letter-spacing:-.035em;margin:12px 0 8px}
.hero p{max-width:680px;line-height:1.6;color:#e9edff}
.card{padding:21px;border-radius:var(--radius)}
.card h2{margin:2px 0 9px}
.text-content{line-height:1.7;color:var(--body-color)}
.internal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.internal-card{
  text-align:left;padding:16px;border-radius:16px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.55);
  color:#2d374d;
  box-shadow:0 9px 22px rgba(37,47,75,.05)
}
.internal-card strong{display:block;margin-bottom:5px}
.internal-card span{font-size:12px;color:var(--muted)}
.image-frame,.button-frame{display:flex}
.left{justify-content:flex-start}.center{justify-content:center}.right{justify-content:flex-end}
.content-image{display:block;max-width:100%;object-fit:cover}

.editor-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:20px}
.panel{padding:18px;border-radius:21px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.toolbar-actions{display:flex;gap:7px;flex-wrap:wrap}
.tree{display:grid;gap:6px}
.tree-row{
  display:flex;align-items:center;gap:6px;
  padding:7px;border-radius:11px;
  background:rgba(255,255,255,.44)
}
.tree-row.active{background:rgba(255,255,255,.78)}
.tree-main{flex:1;border:0;background:transparent;text-align:left;color:#384359;font-weight:650}
.tree-add{border:1px solid rgba(98,110,140,.14);background:rgba(255,255,255,.76);border-radius:8px;padding:5px 8px;color:#536078}
.block{
  margin-top:11px;padding:13px;
  border-radius:15px;
  border:1px dashed rgba(99,111,141,.25);
  background:rgba(255,255,255,.36)
}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.modal-wrap{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;padding:30px;
  background:rgba(23,30,51,.26);
  backdrop-filter:blur(12px)
}
.modal{width:760px;max-height:88vh;overflow:auto;padding:23px;border-radius:27px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:17px}
.preview{width:100%;max-height:290px;object-fit:cover;border-radius:16px;margin-top:11px}
.design-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
.wallpapers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.wallpaper-option{
  overflow:hidden;padding:0;text-align:left;
  border:1px solid rgba(255,255,255,.72);
  border-radius:15px;background:rgba(255,255,255,.55)
}
.wallpaper-option img{width:100%;height:130px;object-fit:cover;display:block}
.wallpaper-option span{display:block;padding:9px 10px;font-size:12px;font-weight:650}
.wallpaper-option.active{outline:3px solid rgba(73,105,228,.24)}

@media(min-width:1500px){
  :root{--content-max:1540px;--sidebar:285px}
  .top-shell,.workspace{width:min(calc(100% - 70px),var(--content-max))}
  .workspace{gap:30px}
  .hero{min-height:225px;padding:38px}
  .hero h2{font-size:39px}
  .card{padding:23px}
  .editor-layout{grid-template-columns:350px minmax(0,1fr)}
}
@media(max-width:1300px){
  :root{--content-max:1180px;--sidebar:230px}
  .top-shell,.workspace{width:min(calc(100% - 36px),var(--content-max))}
  .workspace{gap:18px}
  .quicknav button span{display:none}
}

/* V6 Typography controls */
.page-title,.card h1,.card h2,.card h3,.panel h1,.panel h2,.panel h3{color:var(--heading-color)}
.text-content,.muted,.company-copy span,.breadcrumbs{color:var(--body-color)}
.custom-text-color{color:var(--body-color)}

/* V7: lighter sidebar like the earlier version */
.sidebar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.nav-item,.child-item{
  text-shadow:0 1px 12px rgba(255,255,255,.18);
}
.nav-item.active{
  background:rgba(255,255,255,.68);
  box-shadow:0 10px 28px rgba(34,45,73,.07), inset 0 1px 0 rgba(255,255,255,.9);
}

/* V8 customization/performance */
.glass{
  border-color:rgba(255,255,255,var(--card-border-alpha));
  box-shadow:0 18px 50px rgba(31,42,70,var(--shadow-strength)),inset 0 1px 0 rgba(255,255,255,.88)
}
.card{background:rgba(255,255,255,var(--card-alpha))}
.topbar{background:rgba(255,255,255,var(--topbar-alpha))}
.page-title,.card h1,.card h2,.card h3,.panel h1,.panel h2,.panel h3{font-weight:var(--heading-weight)}
.text-content,.muted,.company-copy span,.breadcrumbs{line-height:var(--line-height);font-weight:var(--body-weight)}
.nav-item,.child-item{font-weight:var(--nav-weight)}
.hero{
  color:var(--hero-text);
  background:radial-gradient(circle at 86% 16%,rgba(255,255,255,.20),transparent 23%),linear-gradient(135deg,var(--hero-1),var(--hero-2) 58%,var(--hero-3))
}
.hero p{color:var(--hero-text-muted)}
.design-section{margin-top:18px;padding-top:16px;border-top:1px solid rgba(100,112,140,.12)}
.design-section h3{margin:0 0 4px}
.design-note{font-size:12px;color:var(--muted);margin:0 0 10px}
.range-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.performance-badge{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(235,247,239,.78);color:#34724a;font-size:11px;font-weight:750}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;transition:none!important}}