:root{
  --bg:#08111f;
  --bg2:#0d1728;
  --panel:#111d31;
  --panel2:#17253d;
  --text:#eef4ff;
  --muted:#9eb0cd;
  --line:rgba(255,255,255,.08);
  --accent:#77e4ff;
  --accent2:#7f67ff;
  --shadow:0 24px 60px rgba(0,0,0,.35);
  --radius:22px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at top left,#162a49 0,#08111f 45%),var(--bg);color:var(--text)} a{text-decoration:none;color:inherit}
.studio-app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.studio-sidebar{background:rgba(7,14,26,.82);backdrop-filter:blur(20px);border-right:1px solid var(--line);padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;position:sticky;top:0;height:100vh}
.studio-brand{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}.studio-brand img{width:44px;height:44px;object-fit:contain}.studio-brand strong{display:block;font-size:18px}.studio-brand span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.studio-nav{display:grid;gap:8px;margin-top:20px}.studio-nav a{padding:14px 16px;border-radius:16px;color:#dce8ff;border:1px solid transparent;display:flex;justify-content:space-between;align-items:center}.studio-nav a:hover,.studio-nav a.active{background:rgba(255,255,255,.06);border-color:var(--line)}.studio-nav em{font-style:normal;background:#1f3153;padding:2px 8px;border-radius:999px;font-size:12px}
.sidebar-foot{display:grid;gap:12px}.sidebar-user{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}.sidebar-user span,.muted-note{color:var(--muted);font-size:13px}.sidebar-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sidebar-actions a{padding:12px 14px;text-align:center;border-radius:14px;background:#15233b;border:1px solid var(--line);font-size:14px}
.studio-main{padding:28px;display:grid;gap:20px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px}.topbar h1{margin:4px 0 0;font-size:32px}.kicker{color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.18em}.topbar-actions,.button-row{display:flex;gap:12px;flex-wrap:wrap}
.studio-btn{padding:13px 18px;border-radius:14px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;background:#15233b;color:var(--text)}.studio-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#08111f;border:none}.studio-btn.ghost{background:rgba(255,255,255,.04)}.studio-btn.small{padding:8px 12px;font-size:13px}.full-btn{width:100%}
.panel,.metric-card,.hero-panel,.login-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}.panel,.hero-panel{padding:22px}.metric-card{padding:20px}.metric-card span{display:block;color:var(--muted);font-size:13px}.metric-card strong{display:block;font-size:34px;margin:8px 0}.metric-card small{color:var(--muted)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.panel-head h3,.hero-panel h2{margin:0}.dashboard-grid,.two-col-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.panel-span-2{grid-column:span 2}.preview-panel iframe,.editor-preview-card iframe{width:100%;height:720px;border:0;border-radius:18px;background:#fff}
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.quick-card{padding:18px;border-radius:18px;background:#15233b;border:1px solid var(--line);display:grid;gap:8px}.quick-card span{color:var(--muted);font-size:14px}
.studio-alert{padding:14px 16px;border-radius:16px;border:1px solid var(--line)}.studio-alert.success{background:rgba(34,201,141,.14);color:#d3ffef}.studio-alert.error{background:rgba(255,106,136,.14);color:#ffdbe3}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(520px,100%);padding:30px}.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}.login-brand img{width:220px;height:72px;object-fit:contain;background:transparent}.login-brand span,.login-tip{color:var(--muted);font-size:14px}.login-card h1{margin:0 0 10px}
.stack-form,.inline-form{display:grid;gap:14px}.stack-form label,.field-grid label,.mini-panel label{display:grid;gap:8px;font-size:14px;color:#dfe8fa}.stack-form input,.stack-form select,.field-grid input,.field-grid select,.field-grid textarea,.inline-form input[type=file],.media-body input,.mini-panel input,.mini-panel textarea{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:#0c172a;color:var(--text);font:inherit}.field-grid textarea,.mini-panel textarea{min-height:100px;resize:vertical}
.editor-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 420px;gap:18px;align-items:start}.editor-side,.editor-preview-card{position:sticky;top:28px}.side-card{padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line);display:grid;gap:10px;margin-bottom:14px}.side-card strong{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.side-card a{padding:10px 12px;border-radius:12px;background:#13213a}
.editor-content{display:grid;gap:18px}.field-grid{display:grid;gap:14px}.field-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid .full{grid-column:1/-1}.mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.mini-grid.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-panel{padding:16px;border-radius:18px;background:#122038;border:1px solid var(--line);display:grid;gap:10px}.mini-panel strong{font-size:16px}.image-pill{margin-top:16px;padding:10px 14px;border-radius:16px;background:#122038;border:1px solid var(--line);display:flex;align-items:center;gap:12px}.image-pill img{width:72px;height:72px;object-fit:cover;border-radius:14px;background:#fff}
.media-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.media-item img{width:100%;aspect-ratio:1.4;object-fit:cover;border-radius:16px;background:#fff}.media-body{display:grid;gap:10px;margin-top:14px}.message-list,.user-list{display:grid;gap:14px}.message-card,.user-row{padding:16px;border-radius:18px;background:#122038;border:1px solid var(--line)}.message-header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}.message-meta,.user-row span{color:var(--muted);font-size:13px}.user-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.badge{padding:6px 10px;border-radius:999px;background:#203255;color:#cfe1ff;font-size:12px}
.narrow-panel{max-width:620px}.inline-form{grid-template-columns:1fr auto;align-items:center}.hero-panel{display:flex;justify-content:space-between;gap:16px;align-items:center}.hero-panel p{max-width:700px;color:var(--muted)}
@media (max-width:1320px){.editor-layout{grid-template-columns:1fr}.editor-side,.editor-preview-card,.studio-sidebar{position:static;height:auto}.preview-panel iframe,.editor-preview-card iframe{height:560px}.dashboard-grid,.two-col-grid,.media-layout,.mini-grid.two-cols{grid-template-columns:1fr 1fr}.panel-span-2{grid-column:span 1}}
@media (max-width:980px){.studio-app{grid-template-columns:1fr}.studio-sidebar{height:auto}.dashboard-grid,.two-col-grid,.quick-grid,.media-layout,.mini-grid,.field-grid.two,.mini-grid.two-cols{grid-template-columns:1fr}.topbar,.hero-panel,.user-row,.message-header,.inline-form{grid-template-columns:1fr;display:grid}.topbar-actions,.button-row,.sidebar-actions{grid-template-columns:1fr;display:grid}.topbar h1{font-size:26px}}
.text-brand .brand-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07111f;font-weight:900;letter-spacing:.04em}
.preview-sticky{position:sticky;top:20px}.preview-shell{display:grid;gap:14px}.preview-frame-wrap{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#06101d;padding:12px;display:flex;justify-content:center;align-items:flex-start;min-height:760px}
.preview-frame-wrap iframe{background:#fff;border-radius:20px;transition:width .2s ease,height .2s ease;box-shadow:0 20px 40px rgba(0,0,0,.3)}
.preview-desktop iframe{width:100%;height:760px}.preview-tablet iframe{width:820px;height:760px}.preview-mobile iframe{width:390px;height:760px}
.preview-help{font-size:13px;color:var(--muted)}
.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.field-grid.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.switch-line{display:flex!important;align-items:center;gap:10px;color:var(--text);font-size:14px}.switch-line input{width:auto!important;padding:0!important}.toggle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.toggle-card{display:flex!important;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;background:#122038;border:1px solid var(--line)}.toggle-card input{width:auto!important}.one-col{grid-template-columns:1fr}.compact-fields{gap:12px}.row-between{display:flex;justify-content:space-between;gap:10px;align-items:center}.page-editor-list .message-card{display:grid;gap:12px}.compact-nav a{font-size:14px}.advanced-editor .editor-content{padding-bottom:60px}
@media (max-width:1320px){.palette-grid,.field-grid.four,.toggle-grid{grid-template-columns:1fr 1fr}.preview-tablet iframe,.preview-mobile iframe{width:100%}}
@media (max-width:980px){.palette-grid,.field-grid.four,.toggle-grid{grid-template-columns:1fr}.preview-frame-wrap{min-height:520px}.preview-desktop iframe,.preview-tablet iframe,.preview-mobile iframe{width:100%;height:520px}}

.inline-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.user-card-premium{display:grid;grid-template-columns:1fr auto;gap:18px;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(180deg,rgba(13,25,51,.92),rgba(17,33,64,.82));box-shadow:0 12px 36px rgba(0,0,0,.18)}
.user-card-title-row{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.user-card-title-row strong{text-transform:lowercase;font-size:28px}
.user-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.muted-label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#90a7cd;margin-bottom:6px}
.user-card-actions{display:flex;flex-direction:column;gap:12px;justify-content:space-between;align-items:flex-end;min-width:220px}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.inline-form input{min-width:150px}
.reveal-password-box{margin-top:16px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.reveal-password-box code{display:block;margin-top:8px;font-size:16px;word-break:break-all}
.studio-btn.danger{border-color:rgba(255,90,90,.35);color:#ffd5d5}
@media (max-width: 900px){.user-card-premium{grid-template-columns:1fr}.user-card-actions{align-items:stretch;min-width:0}.inline-form{justify-content:stretch}.user-meta-grid{grid-template-columns:1fr}}
.login-actions-row{display:flex;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}.login-actions-row a{color:var(--muted)}
.color-meaning-grid label small{display:block;color:var(--muted);margin-bottom:8px;font-size:12px}
.clearer-user-card .user-card-title-row strong{text-transform:none;font-size:24px}
.user-meta-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.password-reveal-line{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}.hidden-pass{padding:10px 14px;border-radius:14px;background:#0c172a;border:1px solid var(--line);min-width:180px}
@media (max-width:980px){.user-meta-grid-3{grid-template-columns:1fr}}
.studio-brand img{width:220px;height:72px;object-fit:contain;background:transparent;border-radius:0}
.login-brand img,.image-pill img{object-fit:contain;background:transparent}
.image-pill img{width:240px;height:84px;border-radius:12px}
.color-meta{display:flex;align-items:center;gap:10px;margin-top:8px}.color-meta small{color:var(--muted);font-size:12px;letter-spacing:.06em}.color-swatch{width:22px;height:22px;border-radius:999px;border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.field-grid input[type=color]{-webkit-appearance:none;appearance:none;background:transparent;padding:0;height:54px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.field-grid input[type=color]::-webkit-color-swatch-wrapper{padding:0}.field-grid input[type=color]::-webkit-color-swatch{border:none;border-radius:16px}.field-grid input[type=color]::-moz-color-swatch{border:none;border-radius:16px}
.page-card-editor{display:grid;gap:14px}.mini-preview{padding:16px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line)}.mini-preview.narrow{max-width:560px}.mini-preview.cta{background:linear-gradient(135deg,rgba(94,231,255,.12),rgba(122,92,255,.12));border-color:rgba(122,92,255,.35)}.mini-eyebrow{display:block;color:var(--accent);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.mini-preview h4{margin:0 0 10px;font-size:24px}.mini-preview p{margin:0;color:var(--muted);line-height:1.6}.mini-btn{display:inline-flex;margin-top:14px;padding:9px 14px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#08111f;font-weight:800}.compact-actions{justify-content:flex-end}

/* V2.7 luxury navigation/header refresh */
.studio-app{
  grid-template-columns:320px minmax(0,1fr);
  background:
    radial-gradient(circle at 0% 0%, rgba(119,228,255,.08), transparent 22%),
    radial-gradient(circle at 100% 10%, rgba(127,103,255,.10), transparent 26%),
    linear-gradient(180deg,#06111f 0%, #07101d 100%);
}
.studio-sidebar{
  background:linear-gradient(180deg, rgba(8,16,30,.94), rgba(5,11,22,.96));
  border-right:1px solid rgba(255,255,255,.06);
  padding:24px 18px 18px;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03), 18px 0 50px rgba(0,0,0,.16);
}
.sidebar-scroll{display:grid;gap:18px}
.studio-brand{
  padding:16px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 20px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
.studio-brand img{width:176px;height:56px}
.studio-brand strong{font-size:20px;letter-spacing:-.02em}
.studio-brand span{font-size:13px}
.grouped-nav{gap:18px}
.nav-group{display:grid;gap:8px}
.nav-group-title{
  padding:0 12px;
  color:#88a3cc;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.studio-nav a{
  padding:14px 14px;
  border-radius:18px;
  background:transparent;
  border:1px solid transparent;
  gap:12px;
  justify-content:flex-start;
  position:relative;
  overflow:hidden;
}
.studio-nav a::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(119,228,255,.08), rgba(127,103,255,.08));
  opacity:0;
  transition:opacity .22s ease;
}
.studio-nav a:hover::before,.studio-nav a.active::before{opacity:1}
.studio-nav a:hover,.studio-nav a.active{
  border-color:rgba(255,255,255,.08);
  box-shadow:0 12px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.nav-icon{
  width:34px;height:34px;flex:none;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.05);
  color:#dff4ff;
  font-size:14px;
  position:relative;z-index:1;
}
.studio-nav a span:last-child{position:relative;z-index:1;font-weight:600}
.studio-nav em{position:relative;z-index:1;margin-left:auto;background:#1a3256}
.luxury-foot{gap:14px}
.luxury-user-card{
  display:grid;
  grid-template-columns:48px 1fr;
  align-items:center;
  gap:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:20px;
}
.user-avatar{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#08111f;font-weight:900;box-shadow:0 16px 30px rgba(119,228,255,.18)
}
.stacked-actions{grid-template-columns:1fr;gap:10px}
.stacked-actions a{
  background:linear-gradient(180deg, rgba(21,35,59,.96), rgba(17,29,47,.96));
  border-radius:16px;
  font-weight:600;
}
.luxury-main{padding:28px 30px 42px;gap:24px}
.luxury-topbar{
  position:sticky;top:16px;z-index:8;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  background:linear-gradient(135deg, rgba(11,20,38,.88), rgba(14,24,43,.76));
  backdrop-filter:blur(18px);
  box-shadow:0 18px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.topbar-copy{display:grid;gap:6px}
.topbar h1{font-size:40px;letter-spacing:-.04em}
.topbar-subtitle{margin:0;color:var(--muted);max-width:620px;line-height:1.6}
.topbar-pills .studio-btn{min-width:148px;border-radius:999px;padding:14px 20px}
.topbar-pills .studio-btn.primary{box-shadow:0 18px 40px rgba(119,228,255,.18)}
.panel,.metric-card,.hero-panel,.login-card,.message-card,.user-card-premium,.quick-card,.side-card,.editor-preview-card,.mini-panel,.message-row,.page-card-editor{
  box-shadow:0 24px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.quick-card{border-radius:22px;background:linear-gradient(180deg, rgba(17,31,54,.92), rgba(15,27,47,.92))}
.preview-shell,.preview-panel{gap:16px}
.preview-frame-wrap{border-radius:28px;background:linear-gradient(180deg, rgba(6,16,29,.96), rgba(8,17,31,.96));padding:18px}
.preview-frame-wrap iframe{border-radius:22px}
@media (max-width:1200px){
  .studio-app{grid-template-columns:1fr}
  .luxury-topbar{position:static}
}
@media (max-width:980px){
  .luxury-main{padding:18px}
  .studio-brand img{width:148px;height:48px}
  .topbar h1{font-size:30px}
  .topbar-subtitle{font-size:14px}
}


/* V2.7.1 clean premium refresh */
:root{
  --bg:#0b1830;
  --bg2:#112240;
  --panel:#132544;
  --panel2:#1a2f54;
  --text:#eef4ff;
  --muted:#a9b9d8;
  --line:rgba(255,255,255,.08);
  --accent:#89e8ff;
  --accent2:#8f80ff;
}
body{
  background:
    radial-gradient(circle at 0% 0%, rgba(137,232,255,.10), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(143,128,255,.14), transparent 30%),
    linear-gradient(180deg,#0c1a32 0%, #0f2140 54%, #0d1c36 100%);
}
.studio-app{
  grid-template-columns:300px minmax(0,1fr);
  background:transparent;
}
.studio-sidebar{
  background:linear-gradient(180deg, rgba(13,26,48,.94), rgba(10,20,38,.96));
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:16px 0 40px rgba(2,7,18,.18);
}
.studio-brand{
  display:grid;
  grid-template-columns:156px 1fr;
  align-items:center;
  gap:14px;
  padding:18px;
  border-radius:26px;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
}
.studio-brand img{width:156px;height:60px;object-fit:contain}
.studio-brand strong{font-size:18px;line-height:1.1;letter-spacing:-.02em}
.studio-brand span{font-size:12px;line-height:1.45}
.nav-group{gap:10px}
.nav-group-title{padding:0 8px 2px;color:#8ca4c7;font-size:11px;letter-spacing:.18em}
.studio-nav a{
  min-height:58px;
  padding:0 16px;
  border-radius:18px;
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:12px;
  background:transparent;
}
.studio-nav a span:last-child{justify-self:start}
.nav-icon{
  width:38px;height:38px;
  border-radius:13px;
  font-size:15px;
  background:rgba(255,255,255,.05);
}
.studio-nav a.active,
.studio-nav a:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.sidebar-foot{margin-top:8px}
.luxury-user-card{
  grid-template-columns:46px 1fr;
  padding:16px;
  border-radius:20px;
}
.user-avatar{width:46px;height:46px;border-radius:14px}
.stacked-actions a{
  min-height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
}
.luxury-main{padding:24px 26px 36px}
.luxury-topbar{
  top:14px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(16,31,57,.84), rgba(18,36,65,.76));
}
.topbar h1{font-size:36px}
.topbar-pills{align-items:center}
.theme-toggle{min-width:124px}
.panel,.metric-card,.hero-panel,.login-card,.message-card,.user-card-premium,.quick-card,.side-card,.editor-preview-card,.mini-panel,.page-card-editor{
  background:linear-gradient(180deg, rgba(21,38,67,.78), rgba(17,31,55,.72));
}
.preview-frame-wrap{background:linear-gradient(180deg, rgba(12,24,44,.92), rgba(10,19,36,.92));}

/* light mode */
body.light-mode{
  --text:#0d1830;
  --muted:#58708f;
  --line:rgba(9,26,53,.10);
  background:
    radial-gradient(circle at 0% 0%, rgba(137,232,255,.16), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(143,128,255,.18), transparent 30%),
    linear-gradient(180deg,#edf5ff 0%, #e6f0ff 56%, #edf4ff 100%);
}
body.light-mode .studio-sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,248,255,.94));
  border-right:1px solid rgba(9,26,53,.08);
  box-shadow:16px 0 34px rgba(29,53,87,.08);
}
body.light-mode .studio-brand,
body.light-mode .panel,
body.light-mode .metric-card,
body.light-mode .hero-panel,
body.light-mode .login-card,
body.light-mode .message-card,
body.light-mode .quick-card,
body.light-mode .side-card,
body.light-mode .editor-preview-card,
body.light-mode .mini-panel,
body.light-mode .page-card-editor,
body.light-mode .luxury-user-card,
body.light-mode .stacked-actions a,
body.light-mode .studio-nav a.active,
body.light-mode .studio-nav a:hover,
body.light-mode .preview-frame-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,255,.92));
  color:#0d1830;
  border-color:rgba(9,26,53,.08);
  box-shadow:0 16px 34px rgba(29,53,87,.08);
}
body.light-mode .nav-icon{background:rgba(13,24,48,.06); color:#112240; border-color:rgba(13,24,48,.08)}
body.light-mode .studio-nav em{background:#dbe7ff;color:#264067}
body.light-mode .studio-btn{background:#ffffff;color:#10203d;border-color:rgba(9,26,53,.10)}
body.light-mode .studio-btn.primary{color:#07101f;background:linear-gradient(135deg,var(--accent),var(--accent2))}
body.light-mode .kicker{color:#38638f}
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .hidden-pass{background:#fff;color:#0d1830;border-color:rgba(9,26,53,.10)}
body.light-mode .preview-frame-wrap iframe{box-shadow:0 16px 30px rgba(29,53,87,.10)}

@media (max-width: 980px){
  .studio-app{grid-template-columns:1fr}
  .studio-sidebar{position:static;height:auto;padding:18px 16px}
  .studio-brand{grid-template-columns:120px 1fr;gap:12px}
  .studio-brand img{width:120px;height:48px}
  .studio-brand strong{font-size:16px}
  .studio-brand span{display:none}
  .studio-nav a{grid-template-columns:34px 1fr auto;min-height:54px}
  .nav-icon{width:34px;height:34px;font-size:14px}
  .luxury-main{padding:18px 16px 30px}
  .topbar h1{font-size:30px}
  .topbar-pills{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%}
  .topbar-pills .studio-btn{min-width:0;width:100%;padding:12px 14px}
}


/* V2.8 polish */
.studio-sidebar,.luxury-topbar,.panel,.metric-card,.quick-card,.mini-panel,.page-card-editor,.editor-preview-card,.message-card,.user-card-premium,.login-card{
  transition:background .24s ease, border-color .24s ease, box-shadow .24s ease, color .24s ease;
}
.preset-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.color-meaning-grid label{padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.color-meaning-grid label small{display:block;color:var(--muted);margin:6px 0 10px;font-size:12px;line-height:1.5}
body.light-mode .topbar-subtitle,
body.light-mode .panel .muted-note,
body.light-mode .metric-card span,
body.light-mode .quick-card span,
body.light-mode .studio-brand span,
body.light-mode .sidebar-user span,
body.light-mode .message-meta,
body.light-mode .muted-label,
body.light-mode .login-tip,
body.light-mode .login-brand span,
body.light-mode .color-meaning-grid label small,
body.light-mode .field-grid label,
body.light-mode .stack-form label,
body.light-mode .mini-panel label,
body.light-mode .switch-line,
body.light-mode .muted-note,
body.light-mode .preview-help,
body.light-mode .user-row span,
body.light-mode .page-card-editor p,
body.light-mode .side-card strong,
body.light-mode .nav-group-title,
body.light-mode .panel-head p,
body.light-mode .kicker{color:#4f6482 !important}
body.light-mode .topbar h1,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode strong,
body.light-mode .studio-nav a,
body.light-mode .studio-brand strong,
body.light-mode .sidebar-user strong,
body.light-mode .user-card-title-row strong,
body.light-mode .message-card,
body.light-mode .page-card-editor,
body.light-mode .mini-panel strong,
body.light-mode .panel-head h3{color:#0f1d33}
body.light-mode .studio-main{color:#0f1d33}
body.light-mode .theme-toggle{background:#eef4ff;color:#10203b;border-color:rgba(9,26,53,.08)}
body.light-mode .preview-frame-wrap{background:linear-gradient(180deg, rgba(235,243,255,.92), rgba(246,249,255,.96))}
body.light-mode .color-meaning-grid label{background:#f8fbff;border-color:rgba(9,26,53,.08)}
body.light-mode .studio-nav a.active,body.light-mode .studio-nav a:hover{background:linear-gradient(135deg, rgba(112,217,255,.10), rgba(106,123,255,.08))}
body.light-mode .stacked-actions a{background:linear-gradient(180deg,#ffffff,#f6f9ff)}
body.light-mode input::placeholder,body.light-mode textarea::placeholder{color:#7f92ad}
body.light-mode .hidden-pass{background:#fff}
body.light-mode .studio-btn.ghost{background:#fff}
body.light-mode .panel,body.light-mode .metric-card{box-shadow:0 20px 40px rgba(30,53,87,.08)}
@media (max-width:980px){
  .studio-brand{grid-template-columns:1fr;justify-items:start}
  .studio-brand img{width:132px;height:46px}
  .studio-brand div{display:grid;gap:4px}
}

/* V2.9 premium cms redesign */
:root{
  --shell-bg:#0a1427;
  --shell-bg-2:#0f203d;
  --shell-panel:#12233f;
  --shell-panel-2:#172a49;
  --shell-text:#edf3ff;
  --shell-muted:#8ea3c4;
  --shell-line:rgba(255,255,255,.08);
  --shell-glow:0 20px 50px rgba(3,12,28,.28);
}
body.studio-app{
  background:
    radial-gradient(circle at top left, rgba(120,227,255,.16), transparent 24%),
    radial-gradient(circle at top right, rgba(139,122,255,.14), transparent 28%),
    linear-gradient(180deg, #0b1630 0%, #0d1b34 45%, #0b1730 100%);
  color:var(--shell-text);
}
body.studio-app.light-mode{
  background:
    radial-gradient(circle at top left, rgba(120,227,255,.10), transparent 24%),
    radial-gradient(circle at top right, rgba(139,122,255,.10), transparent 28%),
    linear-gradient(180deg, #f4f7fd 0%, #eef3fb 100%);
  color:#13233f;
}
.premium-sidebar{
  padding:20px 18px;
  background:linear-gradient(180deg, rgba(10,20,39,.92), rgba(12,24,46,.96));
  border-right:1px solid rgba(255,255,255,.05);
}
body.light-mode .premium-sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,255,.92));
  border-right:1px solid rgba(14,31,57,.08);
}
.premium-brand{
  grid-template-columns:1fr;
  gap:14px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.brand-logo-wrap{
  width:100%;
  min-height:86px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  background:linear-gradient(135deg, rgba(4,10,22,.96), rgba(10,22,45,.92));
  border:1px solid rgba(255,255,255,.05);
}
body.light-mode .brand-logo-wrap{
  background:linear-gradient(135deg, #0a1222, #112340);
}
.premium-brand img{width:auto;height:64px;max-width:100%;object-fit:contain}
.brand-copy strong{font-size:18px;line-height:1.15;display:block;letter-spacing:-.02em}
.brand-copy span{font-size:13px;color:var(--shell-muted)}
body.light-mode .brand-copy span{color:#617796}
.premium-nav{gap:18px;margin-top:18px}
.premium-nav .nav-group{display:grid;gap:8px}
.premium-nav .nav-group-title{padding:0 8px;color:#7f96b9;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
body.light-mode .premium-nav .nav-group-title{color:#6b7d98}
.premium-nav a{
  min-height:54px;
  display:grid;
  grid-template-columns:40px 1fr auto;
  align-items:center;
  gap:12px;
  padding:0 14px;
  border-radius:18px;
  border:1px solid transparent;
  background:transparent;
}
.premium-nav a:hover,
.premium-nav a.active{
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.06);
}
body.light-mode .premium-nav a:hover,
body.light-mode .premium-nav a.active{
  background:linear-gradient(135deg, rgba(117,222,255,.10), rgba(127,103,255,.08));
  border-color:rgba(14,31,57,.08);
}
.premium-nav .nav-icon{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  font-size:13px;font-weight:800;letter-spacing:.06em;
  color:#ddecff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);
}
body.light-mode .premium-nav .nav-icon{color:#183154;background:#eef4ff;border-color:rgba(14,31,57,.08)}
.premium-nav .nav-label{font-weight:600;letter-spacing:-.01em}
.premium-nav em{font-style:normal;font-size:11px;padding:4px 8px;border-radius:999px;background:#23395f;color:#d8e6ff}
body.light-mode .premium-nav em{background:#dfe8ff;color:#234067}
.premium-user-card{
  padding:14px 16px;
  border-radius:20px;
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
}
body.light-mode .premium-user-card{
  background:linear-gradient(180deg, #ffffff, #f7f9ff);
  border-color:rgba(14,31,57,.08);
}
.user-avatar{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#08111f;font-weight:800;
  display:grid;place-items:center;
}
.premium-actions a{
  min-height:48px;border-radius:16px;font-weight:600;
  background:linear-gradient(180deg, rgba(22,37,66,.96), rgba(16,28,50,.96));
}
body.light-mode .premium-actions a{background:linear-gradient(180deg, #ffffff, #f7f9ff)}
.premium-main{padding:22px 24px 36px;gap:22px}
.premium-topbar{
  position:sticky;top:14px;z-index:10;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 20px;border-radius:24px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(135deg, rgba(12,23,44,.88), rgba(15,27,51,.76));
  backdrop-filter:blur(16px);
  box-shadow:var(--shell-glow);
}
body.light-mode .premium-topbar{
  background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(248,250,255,.88));
  border-color:rgba(14,31,57,.08);
}
.topbar-copy{display:grid;gap:6px}
.topbar h1{margin:0;font-size:34px;letter-spacing:-.04em}
.topbar-subtitle{margin:0;max-width:640px;color:var(--shell-muted);line-height:1.55}
body.light-mode .topbar-subtitle{color:#617796}
.kicker{color:#86dff8;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
body.light-mode .kicker{color:#53759d}
.topbar-pills{display:flex;gap:10px;flex-wrap:wrap}
.topbar-pills .studio-btn{border-radius:999px;padding:12px 18px;font-weight:700}
.studio-btn{
  background:linear-gradient(180deg, rgba(21,36,63,.96), rgba(17,30,54,.96));
  border:1px solid rgba(255,255,255,.07);
}
.studio-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#08111f;border:none;box-shadow:0 14px 34px rgba(116,226,255,.22)}
body.light-mode .studio-btn{background:linear-gradient(180deg,#ffffff,#f7f9ff);color:#12233f;border-color:rgba(14,31,57,.08)}
.panel,.metric-card,.hero-panel,.quick-card,.mini-panel,.editor-preview-card,.message-card,.page-card-editor,.login-card,.preview-frame-wrap,.side-card,.message-row,.user-row-card{
  background:linear-gradient(180deg, rgba(19,35,63,.82), rgba(17,31,56,.70));
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  box-shadow:0 20px 44px rgba(2,10,24,.22);
}
body.light-mode .panel,
body.light-mode .metric-card,
body.light-mode .hero-panel,
body.light-mode .quick-card,
body.light-mode .mini-panel,
body.light-mode .editor-preview-card,
body.light-mode .message-card,
body.light-mode .page-card-editor,
body.light-mode .login-card,
body.light-mode .preview-frame-wrap,
body.light-mode .side-card,
body.light-mode .message-row,
body.light-mode .user-row-card{
  background:linear-gradient(180deg, #ffffff, #f7f9ff);
  border-color:rgba(14,31,57,.08);
  box-shadow:0 18px 34px rgba(26,48,86,.08);
}
.metric-card strong{font-size:30px;letter-spacing:-.03em}
.quick-card strong{font-size:16px}
.quick-card span{color:var(--shell-muted)}
body.light-mode .quick-card span{color:#6a7f9b}
.preview-panel iframe,.editor-preview-card iframe{border-radius:18px;background:#fff}
input,select,textarea,.media-body input,.hidden-pass{
  background:#0b1830;
  border:1px solid rgba(255,255,255,.08);
  color:var(--shell-text);
  border-radius:16px;
}
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body.light-mode .media-body input,
body.light-mode .hidden-pass{
  background:#ffffff;color:#12233f;border-color:rgba(14,31,57,.10);
}
input::placeholder,textarea::placeholder{color:#6f84a7}
body.light-mode input::placeholder,body.light-mode textarea::placeholder{color:#8fa1ba}
.user-list-modern{display:grid;gap:14px}
.user-row-card{padding:18px}
.user-row-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.user-row-head strong{font-size:24px;letter-spacing:-.03em}
.user-row-head p{margin:6px 0 0;color:var(--shell-muted)}
body.light-mode .user-row-head p{color:#7185a1}
.user-inline-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.user-inline-meta span{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);display:grid;gap:8px}
.user-inline-meta b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--shell-muted)}
.user-inline-meta em{font-style:normal;font-size:15px;font-weight:600}
body.light-mode .user-inline-meta span{background:#f5f8ff;border-color:rgba(14,31,57,.08)}
body.light-mode .user-inline-meta b{color:#7185a1}
.user-password-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.user-password-bar code{padding:12px 14px;min-width:160px;display:inline-flex;align-items:center;justify-content:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.inline-delete{margin:0}.mini-note{padding:8px 12px;border-radius:999px;background:#22365a;color:#d8e6ff;font-size:12px;font-weight:700}
body.light-mode .mini-note{background:#e4ecff;color:#234067}
.panel-head h3{font-size:20px;letter-spacing:-.02em}
.field-grid label,.stack-form label,.mini-panel label{color:#d8e4fa}
body.light-mode .field-grid label,body.light-mode .stack-form label,body.light-mode .mini-panel label{color:#4f6482}
.color-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
.color-swatch{width:26px;height:26px;border-radius:999px;border:2px solid rgba(255,255,255,.5);display:inline-block}
body.light-mode .color-meta{background:#f5f8ff;border-color:rgba(14,31,57,.08)}
body.light-mode .color-swatch{border-color:rgba(14,31,57,.14)}
.editor-layout{grid-template-columns:220px minmax(0,1fr) 460px;gap:20px}
.side-card{padding:18px}
.side-card a{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
body.light-mode .side-card a{background:#f7f9ff;border-color:rgba(14,31,57,.08)}
.preview-shell .button-row .studio-btn{flex:1}
.preview-frame-wrap{padding:16px}
.preview-help{color:var(--shell-muted)}
body.light-mode .preview-help{color:#667c99}
body.light-mode .studio-nav a,
body.light-mode .studio-main,
body.light-mode .sidebar-user strong,
body.light-mode .topbar h1,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode strong,
body.light-mode .panel,
body.light-mode .metric-card,
body.light-mode .message-card,
body.light-mode .page-card-editor,
body.light-mode .studio-brand strong{color:#12233f}
@media (max-width: 1200px){
  .editor-layout{grid-template-columns:1fr}
}
@media (max-width: 980px){
  .premium-main{padding:18px 16px 28px}
  .premium-topbar{position:static;padding:16px;border-radius:22px;display:grid;gap:14px}
  .topbar h1{font-size:28px}
  .topbar-pills{display:grid;grid-template-columns:1fr 1fr 1fr}
  .topbar-pills .studio-btn{width:100%;min-width:0;padding:12px}
  .premium-brand{padding:14px}
  .brand-logo-wrap{min-height:72px;padding:12px}
  .premium-brand img{height:52px}
  .premium-nav .nav-group{grid-template-columns:1fr 1fr;gap:10px}
  .premium-nav .nav-group-title{grid-column:1/-1;padding:6px 4px 0}
  .premium-nav a{grid-template-columns:34px 1fr;min-height:56px}
  .premium-nav a em{display:none}
  .premium-nav .nav-icon{width:34px;height:34px}
  .user-inline-meta{grid-template-columns:1fr}
  .studio-app{grid-template-columns:1fr}
  .premium-sidebar{position:static;height:auto;padding:16px}
}

/* V3.2 requested fixes */
body.light-mode{--bg:#eef3fb;--bg2:#e4ebf7;--panel:#ffffff;--panel2:#f8fbff;--text:#15233f;--muted:#61708f;--line:rgba(21,35,63,.10)}
body.light-mode .studio-app{background:linear-gradient(180deg,#eef3fb,#e8eef9)}
body.light-mode .studio-sidebar{background:#f7f9fd;border-right:1px solid rgba(21,35,63,.08);box-shadow:16px 0 40px rgba(12,20,38,.05)}
body.light-mode .studio-brand, body.light-mode .panel, body.light-mode .message-card, body.light-mode .luxury-user-card, body.light-mode .quick-card, body.light-mode .page-card-editor{background:#ffffff;border-color:rgba(21,35,63,.08);box-shadow:0 20px 40px rgba(20,31,56,.06)}
body.light-mode .studio-brand strong, body.light-mode .studio-brand span, body.light-mode .studio-nav a, body.light-mode .nav-group-title, body.light-mode .topbar h1, body.light-mode .topbar-subtitle, body.light-mode .panel h3, body.light-mode .muted-note, body.light-mode .row-between strong, body.light-mode label, body.light-mode .badge{color:#15233f !important}
body.light-mode .nav-icon{background:#eef3fb;color:#1f2f52;border-color:rgba(21,35,63,.08)}
body.light-mode .studio-nav a.active, body.light-mode .studio-nav a:hover{background:linear-gradient(135deg,#eef7ff,#f2efff)}
body.light-mode input,body.light-mode select,body.light-mode textarea{background:#f7faff;color:#15233f;border-color:rgba(21,35,63,.10)}
body.light-mode .sort-row{background:#fff;border-color:rgba(21,35,63,.08)}
.studio-brand{grid-template-columns:200px 1fr !important;align-items:center !important}
.studio-brand img{width:200px !important;height:78px !important;object-fit:contain !important}
@media (max-width:980px){.studio-brand{grid-template-columns:1fr !important}.studio-brand img{width:220px !important;height:86px !important;margin:0 auto}}
.sort-list{display:grid;gap:10px;margin:14px 0 18px}.sort-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line)}.sort-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sort-actions .studio-btn{padding:9px 12px}.compact-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.page-card-editor .muted-note{margin:0 0 6px}.badge.source-file{background:#23406f}.badge.source-cms{background:#284929}


/* V3.3 polish */
body.light-mode{--shell-text:#182742;--shell-muted:#627795}
body.light-mode .toggle-card{background:#f7faff;border:1px solid rgba(21,35,63,.10);color:#15233f !important}
body.light-mode .toggle-card span{color:#15233f !important}
.toggle-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.toggle-card input{accent-color:var(--accent)}
body.light-mode .inline-form input[type="file"]{background:#13284a;color:#eef4ff;border-color:#13284a}
body.light-mode .inline-form input[type="file"]::file-selector-button{background:#ffffff;color:#13284a;border:1px solid rgba(21,35,63,.10)}
body.light-mode .image-pill{background:#f8fbff;border-color:rgba(21,35,63,.08)}
body.light-mode .theme-toggle{background:linear-gradient(135deg,#f0f6ff,#ede8ff)}
.swipe-sort-list{display:grid;gap:12px;margin:12px 0 8px}
.swipe-sort-list.compact{margin-bottom:18px}
.swipe-sort-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.swipe-sort-item .swipe-main{display:grid;gap:4px}
.swipe-sort-item .swipe-main small{color:var(--shell-muted)}
.swipe-sort-item.swiping-right{box-shadow:-12px 0 0 rgba(94,231,255,.15) inset;border-color:rgba(94,231,255,.4)}
.swipe-sort-item.swiping-left{box-shadow:12px 0 0 rgba(122,92,255,.15) inset;border-color:rgba(122,92,255,.4)}
.switch-inline{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--shell-text)}
.switch-inline input{accent-color:var(--accent)}
body.light-mode .swipe-sort-item{background:linear-gradient(180deg,#ffffff,#f7faff);border-color:rgba(21,35,63,.08);box-shadow:0 10px 24px rgba(21,35,63,.05)}
body.light-mode .swipe-sort-item .swipe-main small{color:#6c80a0}
body.light-mode .switch-inline{color:#15233f}
body.light-mode .muted-note{color:#6c80a0}
body.light-mode .badge{background:#ebf3ff;color:#24406a}
body.light-mode .badge.source-file{background:#e9efff;color:#23406f}
body.light-mode .badge.source-cms{background:#e9f8ec;color:#22603c}
.preview-frame-wrap.preview-desktop{height:620px}
@media (max-width: 980px){
  .preview-frame-wrap.preview-desktop iframe{width:1440px;height:900px;transform:scale(.44);transform-origin:top left}
  .preview-frame-wrap.preview-tablet iframe{width:1024px;height:1366px;transform:scale(.42);transform-origin:top left}
  .preview-frame-wrap.preview-mobile iframe{width:430px;height:932px;transform:scale(.88);transform-origin:top left}
  .preview-frame-wrap{overflow:auto}
}
.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.stat-tile{padding:18px;border-radius:22px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.06)}
.stat-tile strong{display:block;font-size:26px;margin-top:8px}
.stat-tile span{color:var(--shell-muted);font-size:13px}
body.light-mode .stat-tile{background:#fff;border-color:rgba(21,35,63,.08)}
body.light-mode .stat-tile span{color:#6b7f9c}
@media (max-width:980px){.stats-row{grid-template-columns:1fr 1fr}}

.brand-logo-wrap{min-height:96px !important;padding:18px !important;display:flex;align-items:center;justify-content:flex-start}
.studio-brand img{width:260px !important;height:96px !important;object-fit:contain !important;object-position:left center !important}
body.light-mode .premium-sidebar .studio-brand{background:linear-gradient(180deg,#ffffff,#f7f9ff)}
body.light-mode .premium-sidebar .studio-brand strong,body.light-mode .premium-sidebar .studio-brand span{color:#15233f !important}
@media (max-width:980px){.studio-brand img{width:260px !important;height:92px !important}}


/* Better desktop preview on phones */
.preview-frame-wrap{position:relative;overflow:auto;-webkit-overflow-scrolling:touch}
.preview-frame-wrap.preview-desktop{height:620px}
@media (max-width:980px){
  .preview-frame-wrap{min-height:420px;height:420px;padding:12px;overflow:auto}
  .preview-frame-wrap.preview-desktop iframe{width:1440px !important;height:900px !important;transform:scale(.22) !important;transform-origin:top left !important}
  .preview-frame-wrap.preview-tablet iframe{width:1024px !important;height:1366px !important;transform:scale(.28) !important;transform-origin:top left !important}
  .preview-frame-wrap.preview-mobile iframe{width:430px !important;height:932px !important;transform:scale(.72) !important;transform-origin:top left !important}
}
@media (max-width:640px){
  .preview-frame-wrap{height:360px;min-height:360px}
  .preview-frame-wrap.preview-desktop iframe{transform:scale(.18) !important}
  .preview-frame-wrap.preview-tablet iframe{transform:scale(.22) !important}
  .preview-frame-wrap.preview-mobile iframe{transform:scale(.62) !important}
}

.studio-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#08111f;border-color:transparent}


/* Precise device preview fitting */
.preview-panel .device-switch,.preview-shell .device-switch{display:flex;flex-wrap:wrap;gap:10px}
.preview-frame-wrap{position:relative;display:flex;justify-content:center;align-items:flex-start;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px;min-height:420px;height:620px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);border-radius:24px}
.preview-stage{position:relative;flex:0 0 auto}
.preview-stage iframe{position:absolute;top:0;left:0;border:0;border-radius:22px;background:#fff;box-shadow:0 22px 42px rgba(0,0,0,.28)}
@media (max-width:980px){
  .preview-frame-wrap{height:430px;min-height:430px;padding:10px}
}
@media (max-width:640px){
  .panel-head{align-items:flex-start}
  .panel-head .device-switch{justify-content:flex-start}
  .preview-frame-wrap{height:360px;min-height:360px}
}
body.light-mode .preview-frame-wrap{background:linear-gradient(180deg,#ffffff,#f6f9ff);border-color:rgba(21,35,63,.08)}
body.light-mode .preview-stage iframe{box-shadow:0 16px 30px rgba(29,53,87,.12)}


/* Fullscreen preview controls */
.preview-toolbar-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.preview-open-fullscreen{white-space:nowrap}
.preview-fullscreen-panel{min-height:calc(100vh - 140px);display:grid;grid-template-rows:auto 1fr}
.preview-fullscreen-head{align-items:flex-start}
.fullscreen-preview-shell{margin-top:12px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(6,16,29,.98), rgba(8,17,31,.98));padding:18px;overflow:auto;min-height:72vh}
.fullscreen-preview-stage{margin:0 auto;display:flex;justify-content:center;align-items:flex-start}
.fullscreen-preview-stage iframe{border:0;background:#fff;border-radius:22px;box-shadow:0 22px 60px rgba(0,0,0,.34)}
.fullscreen-preview-shell.device-desktop .fullscreen-preview-stage{min-width:1440px}
.fullscreen-preview-shell.device-desktop iframe{width:1440px;height:900px}
.fullscreen-preview-shell.device-tablet .fullscreen-preview-stage{min-width:1024px}
.fullscreen-preview-shell.device-tablet iframe{width:1024px;height:1366px}
.fullscreen-preview-shell.device-mobile .fullscreen-preview-stage{min-width:430px}
.fullscreen-preview-shell.device-mobile iframe{width:430px;height:932px}
@media (max-width:980px){
  .preview-toolbar-actions{justify-content:flex-start}
  .fullscreen-preview-shell{padding:12px;min-height:78vh}
}

/* === v19 admin preview/panels cinematic neon glass alignment === */
@keyframes adminCinematicSheen{0%,72%,100%{transform:translateX(-130%) skewX(-15deg);opacity:0}82%{opacity:.7}94%{transform:translateX(130%) skewX(-15deg);opacity:0}}
.premium-shell{
  --panel:#030b1f;
  --panel2:#060f2a;
  --line:rgba(69,156,255,.36);
}
.panel,.metric-card,.hero-panel,.quick-card,.mini-panel,.editor-preview-card,.message-card,.page-card-editor,.login-card,.preview-frame-wrap,.side-card,.message-row,.user-row-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(78,220,255,.14), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(210,70,255,.14), transparent 42%),
    linear-gradient(180deg, rgba(4,12,32,.92), rgba(3,8,23,.82)) !important;
  border:1px solid rgba(70,154,255,.42) !important;
  box-shadow:
    0 30px 86px rgba(0,0,0,.46),
    0 0 38px rgba(60,143,255,.12),
    0 0 72px rgba(160,72,255,.06),
    inset 0 1px 0 rgba(190,233,255,.15) !important;
  backdrop-filter:blur(20px) saturate(155%);
  -webkit-backdrop-filter:blur(20px) saturate(155%);
}
.panel::before,.quick-card::before,.mini-panel::before,.preview-frame-wrap::before,.editor-preview-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(105deg, transparent 0 40%, rgba(255,255,255,.13) 50%, transparent 60%),
    radial-gradient(circle at 10% 0%, rgba(98,235,255,.12), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(221,76,255,.13), transparent 42%);
  animation:adminCinematicSheen 10s ease-in-out infinite;
}
.panel::after,.quick-card::after,.mini-panel::after,.preview-frame-wrap::after,.editor-preview-card::after{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(96,234,255,.82), rgba(102,116,255,.46), rgba(220,72,255,.38), transparent);
  pointer-events:none;
}
.quick-card:hover,.studio-btn:hover{
  border-color:rgba(104,225,255,.55) !important;
  box-shadow:0 32px 86px rgba(0,0,0,.48),0 0 42px rgba(65,154,255,.18),0 0 70px rgba(190,76,255,.08),inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.preview-frame-wrap{
  background:
    radial-gradient(circle at 20% 0%, rgba(77,222,255,.16), transparent 32%),
    radial-gradient(circle at 100% 80%, rgba(190,76,255,.15), transparent 38%),
    linear-gradient(180deg, rgba(3,11,30,.94), rgba(2,7,21,.86)) !important;
}
.preview-stage iframe{box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 42px rgba(74,154,255,.18),0 0 70px rgba(174,76,255,.08) !important}
.studio-btn.primary,.preview-toolbar-actions .studio-btn.primary,.preview-toolbar-actions .studio-btn.active{
  background:linear-gradient(135deg,#63eaff,#2b85ff 48%,#7759ff 72%,#d84cff) !important;
  color:#05101f !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:0 16px 48px rgba(64,151,255,.30),0 0 58px rgba(130,86,255,.20),inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.studio-btn.ghost,.preview-toolbar-actions .studio-btn.ghost{
  background:linear-gradient(180deg, rgba(8,18,44,.74), rgba(3,9,25,.66)) !important;
  border-color:rgba(83,169,255,.36) !important;
  color:#eaf3ff !important;
}