/* =========================================================
   META-STUDIO PRO MAX PHP V15.1 — REFERENCE LIGHT UI (UPGRADED)
   UI-only override. Generator / website logic is untouched.
   Reference characteristics: neutral white/gray surfaces,
   17px system typography, blue focus/action, translucent nav,
   restrained borders, pill controls, large readable spacing.
   Upgrade notes: richer elevation scale, refined type rhythm,
   clearer interactive states, denser but airier component
   detailing. "studio" theme is monochrome black & white,
   never dark-mode (color-scheme stays light everywhere).
   ========================================================= */

:root{
  --ref-blue:#0071e3;
  --ref-blue-hover:#0076df;
  --ref-blue-active:#006edb;
  --ref-ink:#1d1d1f;
  --ref-ink-2:#333336;
  --ref-muted:#6e6e73;
  --ref-muted-2:#86868b;
  --ref-bg:#f5f5f7;
  --ref-surface:#ffffff;
  --ref-surface-soft:#fbfbfd;
  --ref-surface-alt:#f2f2f4;
  --ref-border:#d2d2d7;
  --ref-border-soft:#e5e5ea;
  --ref-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.055);
  --ref-shadow-soft:0 1px 2px rgba(0,0,0,.035),0 4px 14px rgba(0,0,0,.04);
  --ref-shadow-lg:0 2px 4px rgba(0,0,0,.05),0 20px 48px rgba(0,0,0,.08);
  --ref-shadow-inset:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(0,0,0,.02);
  --ref-focus:0 0 0 4px rgba(0,113,227,.14);
  --ref-radius:18px;
  --ref-radius-sm:12px;
  --ref-radius-lg:22px;
  --ref-pill:980px;
  --side-w:272px;

  --cream:var(--ref-bg);
  --cream-2:var(--ref-surface);
  --cream-3:var(--ref-surface-soft);
  --ink:var(--ref-ink);
  --ink-83:rgba(29,29,31,.86);
  --ink-64:rgba(29,29,31,.64);
  --ink-40:rgba(29,29,31,.40);
  --ink-16:rgba(29,29,31,.16);
  --ink-08:rgba(29,29,31,.08);
  --ink-04:rgba(29,29,31,.04);
  --muted:var(--ref-muted);
  --blue:var(--ref-blue);
  --success:#248a3d;
  --success-soft:#edf8f0;
  --success-border:#c8e8d0;
  --warning:#a35b00;
  --warning-soft:#fdf1e2;
  --warning-border:#f3d9ad;
  --danger:#d70015;
  --danger-soft:#fdecec;
  --danger-border:#f4c7c7;
  --navy:var(--ref-ink);
  --r-card:var(--ref-radius-sm);
  --r-panel:var(--ref-radius);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.86);
  --focus:var(--ref-focus);
}

/* ---------- Reference theme palette mapping (Black & White) ---------- */
html[data-theme="studio"]{
  --theme-bg:#ffffff!important;
  --theme-surface:#ffffff!important;
  --theme-surface-2:#f7f7f7!important;
  --theme-surface-3:#ececec!important;
  --theme-ink:#000000!important;
  --theme-ink-soft:#1f1f1f!important;
  --theme-muted:#4a4a4a!important;
  --theme-muted-2:#767676!important;
  --theme-border:#dcdcdc!important;
  --theme-border-strong:#b8b8b8!important;
  --theme-accent:#000000!important;
  --theme-accent-soft:#ececec!important;
  --theme-input:#ffffff!important;
  --theme-overlay:rgba(0,0,0,.48)!important;
  --theme-shadow:0 10px 32px rgba(0,0,0,.16)!important;
  --theme-shadow-soft:0 2px 12px rgba(0,0,0,.09)!important;
  --theme-radius:16px!important;
  color-scheme:light!important;
}
html[data-theme="porcelain"]{
  --theme-bg:#fafafa!important;--theme-surface:#fff!important;--theme-surface-2:#f7f7f8!important;--theme-surface-3:#efeff1!important;
  --theme-ink:#1c1c1e!important;--theme-ink-soft:#3a3a3c!important;--theme-muted:#6d6d72!important;--theme-muted-2:#8e8e93!important;
  --theme-border:#e7e7ea!important;--theme-border-strong:#d1d1d6!important;--theme-accent:#0071e3!important;--theme-accent-soft:#e6f1fc!important;
  --theme-input:#fff!important;--theme-overlay:rgba(245,245,247,.68)!important;--theme-shadow:0 10px 30px rgba(0,0,0,.045)!important;--theme-shadow-soft:0 2px 10px rgba(0,0,0,.035)!important;
}
html[data-theme="cloud"]{
  --theme-bg:#f1f2f4!important;--theme-surface:#fff!important;--theme-surface-2:#f8f9fa!important;--theme-surface-3:#e9ebee!important;
  --theme-ink:#202124!important;--theme-ink-soft:#3c4043!important;--theme-muted:#6f7378!important;--theme-muted-2:#91959a!important;
  --theme-border:#dde0e4!important;--theme-border-strong:#c9cdd2!important;--theme-accent:#0a74da!important;--theme-accent-soft:#e8f2fc!important;
  --theme-input:#fff!important;--theme-overlay:rgba(235,237,240,.72)!important;--theme-shadow:0 8px 26px rgba(30,35,40,.055)!important;--theme-shadow-soft:0 2px 8px rgba(30,35,40,.04)!important;
}
html[data-theme="blueprint"]{
  --theme-bg:#f1f6fb!important;--theme-surface:#fff!important;--theme-surface-2:#f7faff!important;--theme-surface-3:#e7f0f9!important;
  --theme-ink:#162638!important;--theme-ink-soft:#344b62!important;--theme-muted:#63798f!important;--theme-muted-2:#8aa0b5!important;
  --theme-border:#d9e4ee!important;--theme-border-strong:#c1d2e1!important;--theme-accent:#0066cc!important;--theme-accent-soft:#e2f0ff!important;
  --theme-input:#fff!important;--theme-overlay:rgba(225,237,249,.7)!important;--theme-shadow:0 10px 28px rgba(24,61,92,.065)!important;--theme-shadow-soft:0 2px 9px rgba(24,61,92,.045)!important;
}
html[data-theme="paper"]{
  --theme-bg:#f5f5f7!important;--theme-surface:#ffffff!important;--theme-surface-2:#fbfbfd!important;--theme-surface-3:#f2f2f4!important;
  --theme-ink:#1d1d1f!important;--theme-ink-soft:#333336!important;--theme-muted:#6e6e73!important;--theme-muted-2:#86868b!important;
  --theme-border:#e5e5ea!important;--theme-border-strong:#d2d2d7!important;--theme-accent:#0066cc!important;--theme-accent-soft:#e8f1fb!important;
  --theme-input:#ffffff!important;--theme-overlay:rgba(238,232,221,.68)!important;--theme-shadow:0 8px 26px rgba(66,53,34,.055)!important;--theme-shadow-soft:0 2px 8px rgba(66,53,34,.04)!important;
}
html[data-theme="sage"]{
  --theme-bg:#f5f5f7!important;--theme-surface:#fff!important;--theme-surface-2:#fbfbfd!important;--theme-surface-3:#f2f2f4!important;
  --theme-ink:#1d1d1f!important;--theme-ink-soft:#333336!important;--theme-muted:#6e6e73!important;--theme-muted-2:#86868b!important;
  --theme-border:#e5e5ea!important;--theme-border-strong:#d2d2d7!important;--theme-accent:#0071e3!important;--theme-accent-soft:#e6f3e9!important;
  --theme-input:#fff!important;--theme-overlay:rgba(230,237,230,.7)!important;--theme-shadow:0 9px 26px rgba(42,60,46,.055)!important;--theme-shadow-soft:0 2px 8px rgba(42,60,46,.04)!important;
}
html[data-theme="sandstone"]{
  --theme-bg:#f5f5f7!important;--theme-surface:#ffffff!important;--theme-surface-2:#fbfbfd!important;--theme-surface-3:#f2f2f4!important;
  --theme-ink:#1d1d1f!important;--theme-ink-soft:#333336!important;--theme-muted:#6e6e73!important;--theme-muted-2:#86868b!important;
  --theme-border:#e5e5ea!important;--theme-border-strong:#d2d2d7!important;--theme-accent:#0071e3!important;--theme-accent-soft:#f1e8de!important;
  --theme-input:#ffffff!important;--theme-overlay:rgba(239,232,222,.72)!important;--theme-shadow:0 9px 27px rgba(67,53,40,.055)!important;--theme-shadow-soft:0 2px 8px rgba(67,53,40,.04)!important;
}
html[data-theme="linen"]{
  --theme-bg:#f5f5f7!important;--theme-surface:#ffffff!important;--theme-surface-2:#fbfbfd!important;--theme-surface-3:#f2f2f4!important;
  --theme-ink:#1d1d1f!important;--theme-ink-soft:#333336!important;--theme-muted:#6e6e73!important;--theme-muted-2:#86868b!important;
  --theme-border:#e5e5ea!important;--theme-border-strong:#d2d2d7!important;--theme-accent:#0071e3!important;--theme-accent-soft:#f1e8dd!important;
  --theme-input:#ffffff!important;--theme-overlay:rgba(241,235,224,.72)!important;--theme-shadow:0 9px 27px rgba(60,45,25,.055)!important;--theme-shadow-soft:0 2px 8px rgba(60,45,25,.04)!important;
}
html[data-theme="arctic"]{
  --theme-bg:#f5f5f7!important;--theme-surface:#fff!important;--theme-surface-2:#fbfbfd!important;--theme-surface-3:#f2f2f4!important;
  --theme-ink:#1d1d1f!important;--theme-ink-soft:#333336!important;--theme-muted:#6e6e73!important;--theme-muted-2:#86868b!important;
  --theme-border:#e5e5ea!important;--theme-border-strong:#d2d2d7!important;--theme-accent:#0071e3!important;--theme-accent-soft:#e5f1ff!important;
  --theme-input:#fff!important;--theme-overlay:rgba(233,240,245,.72)!important;--theme-shadow:0 9px 27px rgba(31,48,65,.055)!important;--theme-shadow-soft:0 2px 8px rgba(31,48,65,.04)!important;
}
html[data-theme="clay"]{
  --theme-bg:#f5f5f7!important;--theme-surface:#ffffff!important;--theme-surface-2:#fbfbfd!important;--theme-surface-3:#f2f2f4!important;
  --theme-ink:#1d1d1f!important;--theme-ink-soft:#333336!important;--theme-muted:#6e6e73!important;--theme-muted-2:#86868b!important;
  --theme-border:#e5e5ea!important;--theme-border-strong:#d2d2d7!important;--theme-accent:#0071e3!important;--theme-accent-soft:#f5e7e2!important;
  --theme-input:#fff!important;--theme-overlay:rgba(240,228,223,.72)!important;--theme-shadow:0 9px 27px rgba(70,48,43,.055)!important;--theme-shadow-soft:0 2px 8px rgba(70,48,43,.04)!important;
}

/* ---------- Global reset / typography ---------- */
html{
  color-scheme:light;
  background:var(--theme-bg,var(--ref-bg))!important;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  font-family:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-size:106.25%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}
html[data-mode="dark"]{color-scheme:light}
body{
  margin:0!important;
  background:var(--theme-bg,var(--ref-bg))!important;
  color:var(--theme-ink,var(--ref-ink))!important;
  font-family:inherit!important;
  font-size:14px!important;
  line-height:1.4705882353!important;
  letter-spacing:-.012em!important;
}
body,input,textarea,select,button{font-family:inherit!important;font-synthesis:none}
button,input,textarea,select{font-size:inherit}
h1,h2,h3,h4,h5,h6{margin:0!important;font-weight:600!important;letter-spacing:-.02em!important;color:var(--theme-ink,var(--ref-ink))!important}
p{margin:0 0 8px!important;color:var(--theme-ink-soft,var(--ref-ink-2))!important}
a{color:var(--theme-accent,var(--ref-blue))!important;text-decoration:none!important}
a:hover{text-decoration:underline!important}
::selection{background:color-mix(in srgb,var(--theme-accent,var(--ref-blue)) 18%,transparent)}
:focus-visible{outline:2px solid var(--theme-accent,var(--ref-blue))!important;outline-offset:2px!important}
::-webkit-scrollbar{width:11px!important;height:11px!important}
::-webkit-scrollbar-track{background:transparent!important}
::-webkit-scrollbar-thumb{background:var(--theme-border-strong,var(--ref-border))!important;border:3px solid var(--theme-bg,var(--ref-bg))!important;border-radius:999px!important}
::-webkit-scrollbar-thumb:hover{background:var(--theme-muted-2,var(--ref-muted-2))!important}

.app-bg{display:none!important}
.shell,.main,.work{background:var(--theme-bg,var(--ref-bg))!important}
.shell{min-height:100vh}

/* ---------- Sidebar / local navigation ---------- */
.side{
  background:color-mix(in srgb,var(--theme-surface,var(--ref-surface)) 88%,transparent)!important;
  border-right:1px solid var(--theme-border,var(--ref-border-soft))!important;
  box-shadow:1px 0 0 rgba(0,0,0,.01)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
.side-head,.side-foot{
  background:transparent!important;
  border-color:var(--theme-border,var(--ref-border-soft))!important;
}
.side-head{padding:17px 18px!important}
.side-foot{padding:13px 14px!important}
.brand{color:var(--theme-ink,var(--ref-ink))!important;letter-spacing:-.01em!important}
.brand>div{font-weight:650!important}
.brand span:not(.brand-mark){color:var(--theme-muted,var(--ref-muted))!important;font-size:9px!important;font-weight:550!important;letter-spacing:.05em!important;margin-top:2px!important;text-transform:uppercase!important}
.brand-mark{
  width:31px!important;height:31px!important;border-radius:9.5px!important;
  display:grid!important;place-items:center!important;
  color:#fff!important;background:var(--theme-ink,var(--ref-ink))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 6px rgba(0,0,0,.18)!important;
  font-weight:700!important;
}
.side-collapse,.icon-btn{
  background:transparent!important;color:var(--theme-muted,var(--ref-muted))!important;
  border:0!important;box-shadow:none!important;border-radius:999px!important;
  transition:background .16s ease,color .16s ease!important;
}
.side-collapse:hover,.icon-btn:hover{background:var(--theme-surface-3,var(--ref-surface-alt))!important;color:var(--theme-ink,var(--ref-ink))!important}
.side-search{
  margin:5px 12px 13px!important;
  background:var(--theme-surface-2,var(--ref-surface-soft))!important;
  border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  border-radius:12px!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.025)!important;
  transition:border-color .16s ease,box-shadow .16s ease!important;
}
.side-search:focus-within{border-color:var(--theme-accent,var(--ref-blue))!important;box-shadow:var(--ref-focus)!important}
.side-search input{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--theme-ink,var(--ref-ink))!important}
.side-search input::placeholder{color:var(--theme-muted-2,var(--ref-muted-2))!important}
kbd{background:var(--theme-surface-3,var(--ref-surface-alt))!important;color:var(--theme-muted,var(--ref-muted))!important;border:1px solid var(--theme-border,var(--ref-border-soft))!important;box-shadow:0 1px 0 rgba(0,0,0,.04)!important;border-radius:5px!important;padding:1px 5px!important;font-size:10px!important}
.grp{
  color:var(--theme-muted-2,var(--ref-muted-2))!important;
  font-size:9.5px!important;line-height:1!important;font-weight:650!important;letter-spacing:.13em!important;
  padding:16px 18px 7px!important;text-transform:uppercase!important;
}
.side-nav{padding:0 8px 12px!important}
.side-nav button{
  min-height:44px!important;
  margin:1px 0!important;padding:7px 10px!important;
  color:var(--theme-ink-soft,var(--ref-ink-2))!important;
  background:transparent!important;border:0!important;
  border-radius:10px!important;box-shadow:none!important;
  transition:background .18s ease,color .18s ease,transform .18s ease!important;
}
.side-nav button:hover{background:var(--theme-surface-3,var(--ref-surface-alt))!important;color:var(--theme-ink,var(--ref-ink))!important}
.side-nav button.on{
  background:var(--theme-surface-3,var(--ref-surface-alt))!important;
  color:var(--theme-ink,var(--ref-ink))!important;
  box-shadow:inset 0 0 0 1px var(--theme-border,var(--ref-border-soft))!important;
}
.side-nav button.on::before{display:none!important}
.nav-icon{color:var(--theme-muted,var(--ref-muted))!important;transition:color .16s ease!important}
.side-nav button.on .nav-icon{color:var(--theme-accent,var(--ref-blue))!important}
.nav-copy b{font-size:12px!important;font-weight:600!important;letter-spacing:-.01em!important}
.nav-copy small{color:var(--theme-muted,var(--ref-muted))!important;font-size:10px!important;margin-top:1px!important}
.side-nav button kbd{opacity:.6!important}
.mini-health{
  background:var(--theme-surface-2,var(--ref-surface-soft))!important;border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  box-shadow:none!important;padding:9px 10px!important;border-radius:12px!important;
}
.mini-health b{color:var(--theme-ink-soft,var(--ref-ink-2))!important;font-weight:600!important}
.mini-health small{color:var(--theme-muted,var(--ref-muted))!important}
.live-dot{background:var(--success)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 18%,transparent)!important}

/* ---------- Top navigation ---------- */
.top{
  min-height:53px!important;
  padding:0 22px!important;
  background:color-mix(in srgb,var(--theme-surface,var(--ref-surface)) 82%,transparent)!important;
  border-bottom:1px solid var(--theme-border,var(--ref-border-soft))!important;
  box-shadow:0 1px 0 rgba(0,0,0,.015)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  position:sticky!important;top:0!important;z-index:80!important;
}
.top-left{gap:7px!important}
.crumb,.crumb-sep{color:var(--theme-muted,var(--ref-muted))!important;font-size:11px!important;font-weight:500!important}
.top .t{color:var(--theme-ink,var(--ref-ink))!important;font-size:13px!important;font-weight:650!important;letter-spacing:-.01em!important}
.top-actions{gap:8px!important}
.tool-pill,.stat{
  min-height:30px!important;padding:0 11px!important;
  border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  background:var(--theme-surface,var(--ref-surface))!important;
  color:var(--theme-ink-soft,var(--ref-ink-2))!important;
  border-radius:var(--ref-pill)!important;box-shadow:var(--ref-shadow-inset)!important;
  font-size:10.5px!important;font-weight:520!important;
}
.tool-pill:hover{background:var(--theme-surface-3,var(--ref-surface-alt))!important;border-color:var(--theme-border-strong,var(--ref-border))!important}
.stat.ok{background:var(--success-soft)!important;border-color:var(--success-border)!important;color:#237a39!important}
.stat.warn{background:var(--warning-soft)!important;border-color:var(--warning-border)!important;color:var(--warning)!important}
.stat.bad{background:var(--danger-soft)!important;border-color:var(--danger-border)!important;color:var(--danger)!important}

/* Dashboard theme menu */
.dash-theme-menu{
  display:flex!important;align-items:center!important;gap:7px!important;
  min-height:32px!important;padding:0 5px 0 11px!important;
  border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  background:var(--theme-surface,var(--ref-surface))!important;
  border-radius:var(--ref-pill)!important;
  color:var(--theme-muted,var(--ref-muted))!important;
  font-size:10px!important;font-weight:620!important;letter-spacing:0!important;
}
.dash-theme-menu select{
  width:auto!important;min-width:126px!important;height:25px!important;
  padding:0 26px 0 9px!important;margin:0!important;
  border:0!important;border-radius:var(--ref-pill)!important;
  background:var(--theme-surface-3,var(--ref-surface-alt))!important;
  color:var(--theme-ink,var(--ref-ink))!important;
  box-shadow:none!important;font-size:10px!important;font-weight:520!important;
  cursor:pointer!important;
}

/* ---------- Workspace header ---------- */
.workspace-head{
  max-width:var(--workspace-max,1380px)!important;
  margin:0 auto!important;
  padding:38px 28px 26px!important;
  border:0!important;background:transparent!important;
  box-shadow:none!important;
}
.workspace-head h2{
  margin:5px 0 0!important;color:var(--theme-ink,var(--ref-ink))!important;
  font-size:clamp(27px,3vw,40px)!important;line-height:1.08!important;
  font-weight:650!important;letter-spacing:-.04em!important;
}
.eyebrow{
  color:var(--theme-muted,var(--ref-muted))!important;
  font-size:10px!important;font-weight:650!important;letter-spacing:.1em!important;text-transform:uppercase!important;
}
.workspace-metrics{gap:9px!important}
.workspace-metrics span{
  min-width:114px!important;padding:12px 13px!important;
  background:var(--theme-surface,var(--ref-surface))!important;
  border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  border-radius:14px!important;box-shadow:var(--ref-shadow-soft)!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.workspace-metrics span:hover{transform:translateY(-1px)!important;box-shadow:var(--ref-shadow)!important}
.workspace-metrics b{color:var(--theme-ink,var(--ref-ink))!important;font-size:13px!important;font-weight:650!important}
.workspace-metrics small{color:var(--theme-muted,var(--ref-muted))!important;font-size:9px!important}

.work{padding-bottom:52px!important}
.wrap{
  width:min(100%,var(--workspace-max,1380px))!important;
  max-width:var(--workspace-max,1380px)!important;
  margin:0 auto!important;padding:0 28px 36px!important;
}
.hero-inline{
  margin:0 0 21px!important;padding:25px 0 23px!important;
  background:transparent!important;border:0!important;border-bottom:1px solid var(--theme-border,var(--ref-border-soft))!important;
}
.hero-inline h1{
  color:var(--theme-ink,var(--ref-ink))!important;
  font-size:clamp(28px,3vw,42px)!important;line-height:1.08!important;font-weight:650!important;letter-spacing:-.04em!important;
}
.hero-inline .lead,.lead{color:var(--theme-muted,var(--ref-muted))!important;line-height:1.58!important;font-size:14.5px!important}
.engine-chip,.chip{
  border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  background:var(--theme-surface,var(--ref-surface))!important;
  color:var(--theme-muted,var(--ref-muted))!important;
  border-radius:var(--ref-pill)!important;box-shadow:var(--ref-shadow-inset)!important;
  font-weight:520!important;
}

/* ---------- Cards / panels ---------- */
.panel,.card,.item,.kwbox,.box,.widget,.tool-card,.output-card,.editor-card,.preview-card,.bt-card,
.theme-section,.theme-control-card,.theme-system-item,.v12-visual-panel,.v12-live-preview{
  background:var(--theme-surface,var(--ref-surface))!important;
  color:var(--theme-ink,var(--ref-ink))!important;
  border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  border-radius:var(--theme-radius,var(--ref-radius))!important;
  box-shadow:var(--ref-shadow-soft)!important;
  transition:box-shadow .18s ease,border-color .18s ease!important;
}
.panel{overflow:hidden!important}
.panel:hover,.card:hover,.tool-card:hover{box-shadow:var(--ref-shadow)!important}
.panel-h{
  min-height:51px!important;padding:14px 16px!important;
  background:var(--theme-surface-2,var(--ref-surface-soft))!important;
  border-bottom:1px solid var(--theme-border,var(--ref-border-soft))!important;
  color:var(--theme-ink,var(--ref-ink))!important;
}
.panel-h h2,.panel-h h3,.panel-h b{font-weight:650!important;letter-spacing:-.015em!important}
.panel-b{padding:17px!important;background:var(--theme-surface,var(--ref-surface))!important}
.card,.item{box-shadow:none!important}
hr{border:0!important;border-top:1px solid var(--theme-border,var(--ref-border-soft))!important;margin:14px 0!important}

/* ---------- Form fields ---------- */
.field label,label{
  color:var(--theme-ink-soft,var(--ref-ink-2))!important;
  font-size:11px!important;font-weight:620!important;letter-spacing:-.005em!important;
  display:inline-block!important;margin-bottom:5px!important;
}
.field small,.help,.muted{color:var(--theme-muted,var(--ref-muted))!important;font-size:10.5px!important}
input,textarea,select,.inp,.area,.field input,.field textarea,.field select{
  width:100%;
  background:var(--theme-input,var(--ref-surface))!important;
  color:var(--theme-ink,var(--ref-ink))!important;
  border:1px solid var(--theme-border-strong,var(--ref-border))!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.02)!important;
  outline:0!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
input,select,.inp{min-height:38px!important;padding:8px 12px!important}
textarea,.area{padding:11px 12px!important;line-height:1.55!important}
input::placeholder,textarea::placeholder{color:var(--theme-muted-2,var(--ref-muted-2))!important}
input:hover,textarea:hover,select:hover{border-color:var(--theme-border-strong,var(--ref-border))!important}
input:focus,textarea:focus,select:focus,.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--theme-accent,var(--ref-blue))!important;
  box-shadow:var(--ref-focus)!important;
}
input:disabled,textarea:disabled,select:disabled{background:var(--theme-surface-2,var(--ref-surface-soft))!important;color:var(--theme-muted-2,var(--ref-muted-2))!important;cursor:not-allowed!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--theme-accent,var(--ref-blue))!important;min-height:auto!important}
input[type="range"]{accent-color:var(--theme-accent,var(--ref-blue))!important;border:0!important;box-shadow:none!important;background:transparent!important}

/* ---------- Buttons ---------- */
button,.btn,.tool-pill,.text-action{
  font-family:inherit!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .12s ease,box-shadow .16s ease!important;
}
.btn{
  min-height:34px!important;padding:8px 15px!important;
  background:var(--theme-surface,var(--ref-surface))!important;
  color:var(--theme-ink,var(--ref-ink))!important;
  border:1px solid var(--theme-border-strong,var(--ref-border))!important;
  border-radius:var(--ref-pill)!important;box-shadow:var(--ref-shadow-inset)!important;
  font-size:11.5px!important;font-weight:560!important;cursor:pointer!important;
}
.btn:hover{background:var(--theme-surface-3,var(--ref-surface-alt))!important;border-color:var(--theme-border-strong,var(--ref-border))!important;transform:translateY(-1px)!important}
.btn:active{transform:scale(.985)!important}
.btn:disabled{opacity:.45!important;cursor:not-allowed!important;transform:none!important}
.btn-p,.btn.primary,.main-action{
  background:var(--theme-accent,var(--ref-blue))!important;
  border-color:var(--theme-accent,var(--ref-blue))!important;
  color:#fff!important;box-shadow:0 4px 14px color-mix(in srgb,var(--theme-accent,var(--ref-blue)) 30%,transparent)!important;
}
.btn-p:hover,.btn.primary:hover,.main-action:hover{background:color-mix(in srgb,var(--theme-accent,var(--ref-blue)) 90%,#000)!important}
.text-action{color:var(--theme-accent,var(--ref-blue))!important;background:transparent!important;border:0!important;font-weight:560!important}
.text-action:hover{text-decoration:underline!important}

.kw{
  background:var(--theme-surface-2,var(--ref-surface-soft))!important;
  border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  color:var(--theme-ink-soft,var(--ref-ink-2))!important;
  border-radius:var(--ref-pill)!important;box-shadow:none!important;
  transition:border-color .15s ease,background .15s ease,color .15s ease!important;
}
.kw:hover{border-color:var(--theme-border-strong,var(--ref-border))!important}
.kw.on{
  background:color-mix(in srgb,var(--theme-accent,var(--ref-blue)) 10%,var(--theme-surface,var(--ref-surface)))!important;
  border-color:color-mix(in srgb,var(--theme-accent,var(--ref-blue)) 45%,var(--theme-border,var(--ref-border-soft)))!important;
  color:var(--theme-accent,var(--ref-blue))!important;font-weight:600!important;
}

/* ---------- PHP Meta Machine ---------- */
.php-v15-controls{
  margin:15px 0!important;padding:17px!important;
  background:var(--theme-surface-2,var(--ref-surface-soft))!important;
  border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  border-radius:16px!important;box-shadow:var(--ref-shadow-inset)!important;
}
.php-control-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:13px!important}
.php-control-head b{display:block!important;color:var(--theme-ink,var(--ref-ink))!important;font-size:13px!important;font-weight:650!important}
.php-control-head small{display:block!important;color:var(--theme-muted,var(--ref-muted))!important;font-size:10px!important;margin-top:2px!important}
.php-control-head>span{
  font-size:9px!important;letter-spacing:.06em!important;color:#237a39!important;
  background:var(--success-soft)!important;border:1px solid var(--success-border)!important;padding:5px 10px!important;border-radius:999px!important;font-weight:650!important;
}
.php-control-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:11px!important}
.php-control-grid.wide{grid-template-columns:1fr 1fr!important;margin-top:11px!important}
.php-control-grid label{font-size:10px!important;font-weight:650!important;color:var(--theme-muted,var(--ref-muted))!important;text-transform:uppercase!important;letter-spacing:.03em!important}
.php-control-grid input,.php-control-grid select{width:100%!important;margin-top:6px!important;padding:8px 10px!important;font-size:11px!important}
.php-advanced{margin-top:11px!important;color:var(--theme-muted,var(--ref-muted))!important;font-size:11px!important}
.php-advanced summary{cursor:pointer!important;color:var(--theme-ink-soft,var(--ref-ink-2))!important;font-weight:560!important}
.php-rule-actions{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-top:11px!important}
.php-rule-actions span{font-size:10px!important;color:var(--theme-muted,var(--ref-muted))!important}
.php-verify-strip{display:grid!important;grid-template-columns:2fr repeat(4,1fr)!important;gap:9px!important;margin:15px 0 11px!important}
.php-verify-strip>span{
  padding:12px!important;background:var(--theme-surface-2,var(--ref-surface-soft))!important;
  border:1px solid var(--theme-border,var(--ref-border-soft))!important;border-radius:12px!important;
  transition:box-shadow .16s ease!important;
}
.php-verify-strip>span:hover{box-shadow:var(--ref-shadow-soft)!important}
.php-verify-strip b,.php-verify-strip small{display:block!important}
.php-verify-strip b{font-size:11.5px!important;color:var(--theme-ink,var(--ref-ink))!important;font-weight:650!important}
.php-verify-strip small{font-size:9px!important;color:var(--theme-muted,var(--ref-muted))!important;margin-top:2px!important;text-transform:uppercase!important;letter-spacing:.03em!important}
.title-out{font-size:19px!important;line-height:1.44!important;color:var(--theme-ink,var(--ref-ink))!important;font-weight:560!important;letter-spacing:-.02em!important}
.desc-out{color:var(--theme-muted,var(--ref-muted))!important;line-height:1.6!important;font-size:13px!important}
.ownership-pill,.engine-trace>div,.review-modern-card{
  background:var(--theme-surface-2,var(--ref-surface-soft))!important;border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  box-shadow:none!important;border-radius:12px!important;
}

/* ---------- SERP preview: keep Google-like but light ---------- */
.google-serp-card{
  max-width:760px!important;margin:13px 0 15px!important;padding:21px!important;
  background:#fff!important;border:1px solid #e0e0e0!important;border-radius:16px!important;
  box-shadow:var(--ref-shadow-soft)!important;color:#202124!important;
}
.serp-site{display:flex!important;align-items:center!important;gap:10px!important;color:#4d5156!important}
.serp-site b{display:block!important;color:#202124!important;font-size:12px!important;font-weight:400!important}
.serp-site small{display:block!important;color:#4d5156!important;font-size:11px!important}
.serp-favicon{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;border-radius:50%!important;background:#f1f3f4!important;color:#5f6368!important;font-weight:700!important}
.google-title{font-size:20px!important;line-height:1.3!important;color:#1a0dab!important;margin:9px 0 4px!important;font-weight:400!important}
.google-desc{font-size:13px!important;line-height:1.6!important;color:#4d5156!important}
.php-output-actions{display:flex!important;gap:8px!important;margin:9px 0 15px!important}
.php-batch-panel{
  margin:15px 0!important;padding:13px!important;
  background:var(--theme-surface-2,var(--ref-surface-soft))!important;border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  border-radius:14px!important;
}
.php-batch-panel summary{cursor:pointer!important;font-weight:650!important;color:var(--theme-ink,var(--ref-ink))!important}
.php-batch-list{display:grid!important;gap:9px!important;margin-top:11px!important}
.php-batch-list article{padding:12px!important;border:1px solid var(--theme-border,var(--ref-border-soft))!important;border-radius:12px!important;background:var(--theme-surface,var(--ref-surface))!important;transition:box-shadow .16s ease!important}
.php-batch-list article:hover{box-shadow:var(--ref-shadow-soft)!important}
.php-batch-list p{margin:6px 0!important;color:var(--theme-ink-soft,var(--ref-ink-2))!important}
.php-batch-list small{color:var(--theme-muted,var(--ref-muted))!important;line-height:1.55!important}

/* ---------- Code / editor ---------- */
.pre,.code,pre,code,.code-editor textarea{
  background:#f6f7f9!important;color:#24292f!important;border-color:#d8dee4!important;
}
.pre,.code,pre{
  border:1px solid #d8dee4!important;border-radius:12px!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.02)!important;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace!important;
  line-height:1.6!important;
}
code{padding:2px 5px!important;border-radius:5px!important;font-size:.92em!important}

/* ---------- Theme & Settings dashboard ---------- */
.theme-settings-pro{display:grid!important;gap:19px!important}
.theme-settings-hero{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:20px!important;
  padding:27px 4px 9px!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
.theme-settings-hero h1{font-size:36px!important;line-height:1.08!important;letter-spacing:-.04em!important;color:var(--theme-ink,var(--ref-ink))!important;font-weight:650!important}
.theme-settings-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.theme-section{padding:19px!important;box-shadow:var(--ref-shadow-soft)!important}
.theme-section-head{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:16px!important;margin-bottom:15px!important}
.theme-section-head h2,.theme-section-head h3{margin:0!important;color:var(--theme-ink,var(--ref-ink))!important;letter-spacing:-.02em!important}
.theme-section-head p{margin:4px 0 0!important;color:var(--theme-muted,var(--ref-muted))!important}
.theme-count{padding:5px 10px!important;border-radius:999px!important;background:var(--theme-surface-3,var(--ref-surface-alt))!important;color:var(--theme-muted,var(--ref-muted))!important;font-size:9px!important;font-weight:600!important}
.theme-gallery{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:11px!important}
.theme-card{
  padding:11px!important;text-align:left!important;cursor:pointer!important;
  background:var(--theme-surface,var(--ref-surface))!important;border:1px solid var(--theme-border,var(--ref-border-soft))!important;
  border-radius:14px!important;box-shadow:var(--ref-shadow-soft)!important;
}
.theme-card:hover{border-color:var(--theme-border-strong,var(--ref-border))!important;transform:translateY(-2px)!important;box-shadow:var(--ref-shadow)!important}
.theme-card.active{border-color:var(--theme-accent,var(--ref-blue))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,var(--ref-blue)) 14%,transparent)!important}
.theme-preview{border:1px solid rgba(0,0,0,.08)!important;box-shadow:none!important;border-radius:9px!important}
.theme-card-copy b{color:var(--theme-ink,var(--ref-ink))!important;font-weight:620!important}
.theme-card-copy small{color:var(--theme-muted,var(--ref-muted))!important}
.theme-control-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:13px!important}
.theme-control-card,.theme-system-item{padding:15px!important;box-shadow:var(--ref-shadow-soft)!important}
.theme-system-row{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:11px!important}
.shape-choice{background:var(--theme-surface-2,var(--ref-surface-soft))!important;border:1px solid var(--theme-border,var(--ref-border-soft))!important;color:var(--theme-ink-soft,var(--ref-ink-2))!important;box-shadow:none!important;transition:border-color .15s ease,color .15s ease!important}
.shape-choice.active{border-color:var(--theme-accent,var(--ref-blue))!important;color:var(--theme-accent,var(--ref-blue))!important;font-weight:600!important}
.range-row output{color:var(--theme-muted,var(--ref-muted))!important;font-weight:600!important;font-size:11px!important}

/* ---------- V12 live visual panel ---------- */
.v12-settings-shell{display:grid!important;gap:19px!important}
.v12-visual-panel{padding:19px!important;box-shadow:var(--ref-shadow-soft)!important}
.v12-preview-top,.v12-preview-body{border-color:var(--theme-border,var(--ref-border-soft))!important}
.v12-preview-top{background:var(--theme-surface-2,var(--ref-surface-soft))!important}
.v12-preview-body aside{background:var(--theme-surface-3,var(--ref-surface-alt))!important}
.v12-preview-body main{background:var(--theme-surface,var(--ref-surface))!important}
.v12-preview-cards article{background:var(--theme-surface-2,var(--ref-surface-soft))!important;border:1px solid var(--theme-border,var(--ref-border-soft))!important;border-radius:10px!important}

/* ---------- Command palette / modals / toast ---------- */
.cmd-backdrop{background:rgba(0,0,0,.18)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.cmd-box{
  background:rgba(255,255,255,.95)!important;color:var(--ref-ink)!important;
  border:1px solid rgba(0,0,0,.10)!important;border-radius:20px!important;
  box-shadow:var(--ref-shadow-lg)!important;
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
}
.cmd-input{border-color:#e5e5ea!important}
.cmd-input input{border:0!important;background:transparent!important;box-shadow:none!important}
.cmd-list button{color:#1d1d1f!important;border-radius:10px!important}
.cmd-list button:hover,.cmd-list button.on{background:#f2f2f4!important}
.toast{background:rgba(29,29,31,.94)!important;color:#fff!important;border:0!important;border-radius:999px!important;box-shadow:0 10px 34px rgba(0,0,0,.16)!important}

/* ---------- Floating chatbot / visual tuner ---------- */
#ms-chat-launcher{box-shadow:0 10px 32px rgba(0,0,0,.14)!important;border:1px solid rgba(0,0,0,.08)!important}
#ms-design-tuner{color:var(--theme-ink,var(--ref-ink))!important}
#ms-design-tuner .vm-open{
  min-width:72px!important;padding:8px 14px!important;
  border:1px solid var(--theme-border-strong,var(--ref-border))!important;
  background:rgba(255,255,255,.92)!important;color:var(--theme-ink,var(--ref-ink))!important;
  border-radius:999px!important;box-shadow:0 7px 24px rgba(0,0,0,.1)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
#ms-design-tuner .vm-panel{
  background:rgba(255,255,255,.97)!important;color:var(--theme-ink,var(--ref-ink))!important;
  border:1px solid rgba(0,0,0,.10)!important;border-radius:18px!important;
  box-shadow:var(--ref-shadow-lg)!important;
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
}
#ms-design-tuner select,#ms-design-tuner input{background:#fff!important;color:#1d1d1f!important;border:1px solid #d2d2d7!important;border-radius:10px!important}
#ms-design-tuner .vm-row button{background:#f5f5f7!important;color:#1d1d1f!important;border:1px solid #d2d2d7!important;border-radius:999px!important}

/* ---------- Mobile ---------- */
.mob{
  background:rgba(255,255,255,.9)!important;border-bottom:1px solid #e5e5ea!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
.mobile-brand{color:#1d1d1f!important;font-weight:650!important}

@media(max-width:1180px){
  .theme-gallery{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .workspace-head{padding-inline:22px!important}.wrap{padding-inline:22px!important}
}
@media(max-width:980px){
  .php-control-grid{grid-template-columns:repeat(3,1fr)!important}
  .php-verify-strip{grid-template-columns:repeat(2,1fr)!important}.php-verify-strip>span:first-child{grid-column:1/-1!important}
  .workspace-metrics{display:none!important}
  .theme-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .theme-control-grid,.theme-system-row{grid-template-columns:1fr!important}
  .dash-theme-menu span{display:none!important}.dash-theme-menu{padding-left:5px!important}
}
@media(max-width:720px){
  .top{padding:0 12px!important}.top .stat{display:none!important}
  .dash-theme-menu select{min-width:105px!important;max-width:126px!important}
  .workspace-head{padding:23px 14px 17px!important}.wrap{padding:0 14px 24px!important}
  .workspace-head h2{font-size:28px!important}
  .php-control-grid,.php-control-grid.wide{grid-template-columns:1fr 1fr!important}
  .php-verify-strip{grid-template-columns:1fr 1fr!important}
  .php-rule-actions{align-items:flex-start!important;flex-direction:column!important}
  .google-title{font-size:18px!important}
  .theme-settings-hero{align-items:flex-start!important;flex-direction:column!important}
  .theme-gallery{grid-template-columns:1fr 1fr!important}
}
@media(max-width:480px){
  .dash-theme-menu{display:none!important}
  .theme-gallery{grid-template-columns:1fr!important}
  .php-control-grid,.php-control-grid.wide,.php-verify-strip{grid-template-columns:1fr!important}
  .php-verify-strip>span:first-child{grid-column:auto!important}
  .workspace-head h2{font-size:25px!important}
}

/* Theme gallery previews aligned with the V15.1 reference palettes. */
button[data-theme-card="studio"]{--pv-bg:#ffffff!important;--pv-surface:#ffffff!important;--pv-soft:#f7f7f7!important;--pv-border:#dcdcdc!important;--pv-accent:#000000!important}
button[data-theme-card="porcelain"]{--pv-bg:#fafafa!important;--pv-surface:#fff!important;--pv-soft:#f7f7f8!important;--pv-border:#e7e7ea!important;--pv-accent:#0071e3!important}
button[data-theme-card="cloud"]{--pv-bg:#f1f2f4!important;--pv-surface:#fff!important;--pv-soft:#f8f9fa!important;--pv-border:#dde0e4!important;--pv-accent:#0a74da!important}
button[data-theme-card="blueprint"]{--pv-bg:#f1f6fb!important;--pv-surface:#fff!important;--pv-soft:#f7faff!important;--pv-border:#d9e4ee!important;--pv-accent:#0066cc!important}
button[data-theme-card="paper"]{--pv-bg:#f5f5f7!important;--pv-surface:#ffffff!important;--pv-soft:#fbfbfd!important;--pv-border:#e5e5ea!important;--pv-accent:#0066cc!important}
button[data-theme-card="sage"]{--pv-bg:#f5f5f7!important;--pv-surface:#fff!important;--pv-soft:#fbfbfd!important;--pv-border:#e5e5ea!important;--pv-accent:#0071e3!important}
button[data-theme-card="sandstone"]{--pv-bg:#f5f5f7!important;--pv-surface:#ffffff!important;--pv-soft:#fbfbfd!important;--pv-border:#e5e5ea!important;--pv-accent:#0071e3!important}
button[data-theme-card="linen"]{--pv-bg:#f5f5f7!important;--pv-surface:#ffffff!important;--pv-soft:#fbfbfd!important;--pv-border:#e5e5ea!important;--pv-accent:#0071e3!important}
button[data-theme-card="arctic"]{--pv-bg:#f5f5f7!important;--pv-surface:#fff!important;--pv-soft:#fbfbfd!important;--pv-border:#e5e5ea!important;--pv-accent:#0071e3!important}
button[data-theme-card="clay"]{--pv-bg:#f5f5f7!important;--pv-surface:#ffffff!important;--pv-soft:#fbfbfd!important;--pv-border:#e5e5ea!important;--pv-accent:#0071e3!impo