/* =====================================================================
   Studio Apple material system
   Loaded last. Auth / onboard / PIN intentionally untouched.
   One source of truth for liquid glass, type, chrome, and density.
===================================================================== */

/* ----- Tokens ----- */
#view-app{
  --apple-ink:#1d1d1f;
  --apple-sec:rgba(60,60,67,.56);
  --apple-ter:rgba(60,60,67,.40);
  --apple-fill:rgba(120,120,128,.12);
  --apple-fill-2:rgba(120,120,128,.18);
  --apple-hairline:rgba(60,60,67,.10);
/* */
  --apple-seg-track:transparent;
  --apple-seg-pad:0px;
  --apple-seg-gap:2px;
  --apple-seg-r:980px;
  --apple-seg-r-thumb:980px;
  --apple-seg-h:32px;
  --apple-seg-thumb:#fff;
  --apple-seg-thumb-shadow:
    0 0 0 .5px rgba(0,0,0,.1),
    0 1px 2px rgba(0,0,0,.06),
    0 3px 10px rgba(0,0,0,.08);
  --apple-seg-hover:rgba(118,118,128,.1);
  --apple-r:22px;
  --apple-r-sm:12px;
  --apple-blur:blur(52px) saturate(200%);
  --apple-glass:rgba(255,255,255,.46);
  --apple-glass-hi:rgba(255,255,255,.58);
  --apple-glass-lo:rgba(255,255,255,.30);
  --apple-rim:rgba(255,255,255,.68);
  --apple-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 0 .5px rgba(255,255,255,.35),
    0 1px 2px rgba(0,0,0,.03),
    0 14px 40px rgba(0,0,0,.055);
  --apple-shadow-hi:
    inset 0 1px 0 #fff,
    inset 0 0 0 .5px rgba(255,255,255,.42),
    0 2px 10px rgba(0,0,0,.04),
    0 20px 52px rgba(0,0,0,.07);
  color:var(--apple-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:var(--font-ui),-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
}
html[data-theme="dark"] #view-app,
html[data-hig-theme*="dark"] #view-app{
  --apple-ink:#f5f5f7;
  --apple-sec:rgba(235,235,245,.55);
  --apple-ter:rgba(235,235,245,.35);
  --apple-fill:rgba(120,120,128,.24);
  --apple-fill-2:rgba(120,120,128,.32);
  --apple-hairline:rgba(255,255,255,.10);
  --apple-seg-track:transparent;
  --apple-seg-thumb:rgba(99,99,102,.72);
  --apple-seg-thumb-shadow:
    0 0 0 .5px rgba(255,255,255,.08),
    0 2px 8px rgba(0,0,0,.35);
  --apple-seg-hover:rgba(118,118,128,.22);
  --apple-glass:rgba(28,28,30,.58);
  --apple-glass-hi:rgba(44,44,46,.68);
  --apple-glass-lo:rgba(28,28,30,.42);
  --apple-rim:rgba(255,255,255,.14);
  --apple-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 .5px rgba(0,0,0,.45),
    0 14px 40px rgba(0,0,0,.45);
  --apple-shadow-hi:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 .5px rgba(0,0,0,.5),
    0 20px 52px rgba(0,0,0,.52);
}

/* Sync older studio tokens to Apple material */
#view-app .page{
  --studio-glass:var(--apple-glass);
  --studio-glass-hover:var(--apple-glass-hi);
  --studio-glass-muted:var(--apple-glass-lo);
  --studio-glass-blur:var(--apple-blur);
  --studio-glass-border:var(--apple-rim);
  --studio-glass-shadow:var(--apple-shadow);
  --studio-glass-shadow-hover:var(--apple-shadow-hi);
  max-width:1080px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(22px,3.5vw,40px);
  padding-right:clamp(22px,3.5vw,40px);
  padding-bottom:clamp(56px,10vh,96px);
}
#view-app .page.full{max-width:none;padding:0;margin:0}

/* */
#view-app .studio-page--settings{
  max-width:720px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* Soft wash so frost has something to sample */
#view-app .shell{
  background:
    radial-gradient(ellipse 85% 48% at 50% -12%,rgba(53,92,255,.08),transparent 58%),
    radial-gradient(ellipse 45% 35% at 100% 0%,rgba(180,190,255,.06),transparent 50%),
    var(--color-bg-grouped,#f5f5f7) !important;
  background-image:
    radial-gradient(ellipse 85% 48% at 50% -12%,rgba(53,92,255,.08),transparent 58%),
    radial-gradient(ellipse 45% 35% at 100% 0%,rgba(180,190,255,.06),transparent 50%) !important;
}
html[data-theme="dark"] #view-app .shell,
html[data-hig-theme*="dark"] #view-app .shell{
  background:
    radial-gradient(ellipse 85% 48% at 50% -12%,rgba(53,92,255,.16),transparent 58%),
    var(--color-bg-grouped,#000) !important;
}

/* ----- Liquid glass surfaces ----- */
#view-app .liquid-glass:not(.pill-notch):not(.topbar):not(.b-pill),
#view-app .card.liquid-glass,
#view-app .settings-card,
#view-app .settings-card.liquid-glass,
#view-app .console-panel.liquid-glass,
#view-app .dash-stat.liquid-glass,
#view-app .site-card.liquid-glass,
#view-app .design-toolbar.liquid-glass,
#view-app .empty-mesh.liquid-glass{
  background:var(--apple-glass) !important;
  background-image:none !important;
  -webkit-backdrop-filter:var(--apple-blur) !important;
  backdrop-filter:var(--apple-blur) !important;
  border:1px solid var(--apple-rim) !important;
  box-shadow:var(--apple-shadow) !important;
  border-radius:var(--apple-r) !important;
  overflow:hidden;
  isolation:auto;
  transform:none !important;
  -webkit-transform:none !important;
}
/* */
#view-app .studio-page--settings .settings-card,
#view-app .studio-page--settings .settings-card.liquid-glass{
  overflow:visible !important;
}
#view-app .liquid-glass:hover,
#view-app .card.liquid-glass:hover,
#view-app .console-panel.liquid-glass:hover,
#view-app .dash-stat.liquid-glass:hover{
  background:var(--apple-glass-hi) !important;
  box-shadow:var(--apple-shadow-hi) !important;
  transform:none !important;
}
#view-app .liquid-glass::before,
#view-app .liquid-glass::after{
  opacity:.08 !important;
  pointer-events:none;
}

/* */
#view-app .side.liquid-glass{
  background:rgba(255,255,255,.52) !important;
  -webkit-backdrop-filter:blur(40px) saturate(180%) !important;
  backdrop-filter:blur(40px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 36px rgba(0,0,0,.04) !important;
  border-radius:24px !important;
}
html[data-theme="dark"] #view-app .side.liquid-glass,
html[data-hig-theme*="dark"] #view-app .side.liquid-glass{
  background:rgba(28,28,30,.62) !important;
  border-color:rgba(255,255,255,.12) !important;
}
#view-app .pill-notch.liquid-glass,
#view-app .topbar.pill-notch.liquid-glass{
  background:rgba(255,255,255,.52) !important;
  -webkit-backdrop-filter:blur(36px) saturate(190%) !important;
  backdrop-filter:blur(36px) saturate(190%) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  border-radius:9999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 28px rgba(0,0,0,.05) !important;
}
html[data-theme="dark"] #view-app .pill-notch.liquid-glass,
html[data-hig-theme*="dark"] #view-app .pill-notch.liquid-glass,
html[data-theme="dark"] #view-app .topbar.pill-notch.liquid-glass,
html[data-hig-theme*="dark"] #view-app .topbar.pill-notch.liquid-glass{
  background:rgba(28,28,30,.72) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 .5px rgba(0,0,0,.4),
    0 8px 28px rgba(0,0,0,.35) !important;
  color:#f5f5f7 !important;
}
#view-app .page > .pill-notch.liquid-glass,
#view-app .page > .topbar.pill-notch.liquid-glass{
  position:sticky !important;
  top:calc(env(safe-area-inset-top,0px) + 12px) !important;
  z-index:40 !important;
  transform:none !important;
}

/* Nav */
#view-app .side-label{
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase;
  color:var(--apple-ter) !important;
  padding:18px 14px 6px !important;
}
#view-app .side-nav{gap:2px;padding:0 8px}
#view-app .side-nav button,
#view-app .side-ext{
  min-height:38px;
  padding:0 12px;
  border-radius:11px !important;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:-.016em;
  color:var(--apple-ink);
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
#view-app .side-nav button svg.lucide,
#view-app .side-ext svg.lucide{
  width:17px;height:17px;stroke-width:1.7;
  color:var(--apple-sec);
}
#view-app .side-nav button:hover,
#view-app .side-ext:hover{
  background:var(--apple-fill) !important;
}
#view-app .side-nav button.on{
  background:color-mix(in srgb,var(--color-tint,#355cff) 12%,transparent) !important;
  color:var(--color-tint,#355cff) !important;
  font-weight:600;
}
#view-app .side-nav button.on svg.lucide{
  color:var(--color-tint,#355cff);
  stroke:var(--color-tint,#355cff);
}
#view-app .site-pick{
  margin:0 8px 10px;
  padding:7px 10px;
  min-height:0;
  border-radius:12px;
  background:var(--apple-fill);
  border:none;
  box-shadow:none;
  gap:8px;
}
#view-app .site-pick .sp-name{
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}
#view-app .site-pick .sp-status{
  font-size:10px !important;
  font-weight:450 !important;
  line-height:1.2 !important;
}
#view-app .side-brand-word{
  font-size:21px !important;
  font-weight:650 !important;
  letter-spacing:-.028em !important;
}
#view-app .side-brand .logo-mark,
#view-app .side-brand .logo-mark img{
  width:38px !important;
  height:38px !important;
}

/* Type */
#view-app .studio-page .page-head h1,
#view-app .console-page .console-top h1{
  font-size:clamp(1.75rem,3.4vw,2.2rem) !important;
  font-weight:700 !important;
  letter-spacing:-.032em !important;
  line-height:1.05 !important;
  color:var(--apple-ink) !important;
}
#view-app .studio-page .page-head .ph-sub,
#view-app .studio-page .c-sub,
#view-app .console-page .c-sub,
#view-app .console-page .console-eyebrow{
  color:var(--apple-sec) !important;
  font-weight:500 !important;
}
#view-app .studio-page .page-head .ph-icon{
  width:42px;height:42px;border-radius:12px;
  background:var(--apple-glass-lo);
  border:1px solid var(--apple-rim);
  color:var(--color-tint,#355cff);
  box-shadow:none;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}

/* */
#view-app .btn,
#modal-box .btn,
.modal .btn{
  border-radius:980px !important;
  border:none !important;
  box-shadow:none !important;
  font-family:inherit !important;
  font-weight:600 !important;
  letter-spacing:-.012em !important;
  min-height:36px !important;
  padding:0 16px !important;
  font-size:14px !important;
  transition:background .15s ease,transform .12s ease,opacity .15s ease !important;
}
#view-app .btn-sm,
#modal-box .btn-sm,
.modal .btn-sm{
  min-height:32px !important;
  padding:0 14px !important;
  font-size:13px !important;
}
#view-app .btn-brand,
#view-app .btn-cta,
#modal-box .btn-brand,
.modal .btn-brand{
  background:var(--color-tint,#355cff) !important;
  background-image:none !important;
  color:#fff !important;
}
#view-app .btn-brand:hover,
#view-app .btn-cta:hover{
  background:var(--color-tint-hover,#4a6fff) !important;
  transform:none !important;
  filter:none !important;
}
#view-app .btn-ghost,
#modal-box .btn-ghost,
.modal .btn-ghost{
  background:var(--apple-fill) !important;
  color:var(--apple-ink) !important;
}
#view-app .btn-ghost:hover{
  background:var(--apple-fill-2) !important;
}
#view-app .btn:active{transform:scale(.97) !important}
html.bd-motion-on #view-app .btn:hover{transform:none !important}

/* */
#view-app .studio-page--settings .settings-nav.liquid-glass,
#view-app .studio-page--settings .settings-nav{
  display:inline-flex !important;
  width:fit-content !important;
  max-width:100% !important;
  margin:0 0 22px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
#view-app .studio-page--settings .settings-nav::before,
#view-app .studio-page--settings .settings-nav::after{display:none !important}
#view-app .studio-page--settings .settings-nav-track{
  display:inline-flex !important;
  align-items:center !important;
  grid-auto-flow:unset !important;
  grid-auto-columns:unset !important;
  gap:2px !important;
  width:auto;
  max-width:100%;
  padding:3px !important;
  border-radius:980px !important;
  background:rgba(120,120,128,.14) !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .settings-nav-track,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-nav-track{
  background:rgba(118,118,128,.28) !important;
}
#view-app .studio-page--settings .settings-tab{
  appearance:none !important;
  border:none !important;
  cursor:pointer;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-height:var(--apple-seg-h) !important;
  padding:0 15px !important;
  margin:0 !important;
  border-radius:var(--apple-seg-r-thumb) !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  line-height:1 !important;
  color:var(--apple-sec) !important;
  background:transparent !important;
  box-shadow:none !important;
  white-space:nowrap;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease !important;
}
#view-app .studio-page--settings .settings-tab:hover:not(.on){
  color:var(--apple-ink) !important;
  background:var(--apple-seg-hover) !important;
}
#view-app .studio-page--settings .settings-tab.on{
  color:var(--apple-ink) !important;
  font-weight:600 !important;
  background:var(--apple-seg-thumb) !important;
  box-shadow:var(--apple-seg-thumb-shadow) !important;
}
#view-app .studio-page--settings .settings-tab:focus-visible{
  outline:2px solid color-mix(in srgb,var(--color-tint,#355cff) 40%,transparent);
  outline-offset:2px;
}
#view-app .studio-page--settings .settings-input,
#view-app .studio-page--settings .field input,
#view-app .studio-page--settings .field textarea,
#view-app .studio-page--settings .field select{
  min-height:42px;
  border-radius:12px !important;
  background:var(--apple-fill) !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-size:15px;
  padding:10px 14px;
  color:var(--apple-ink);
}
#view-app .studio-page--settings .settings-input:focus{
  background:var(--apple-fill-2) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 18%,transparent) !important;
  outline:none;
}
#view-app .studio-page--settings .settings-block{
  border-top:.5px solid var(--apple-hairline);
}
#view-app .studio-page--settings .settings-block-label{
  font-size:13px;
  font-weight:600;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--apple-sec);
}

/* Sites hub */
#view-app .studio-page--design .design-toolbar{
  padding:14px 18px;
  margin-bottom:18px;
}
#view-app .studio-page--design .design-toolbar-copy{
  font-size:13.5px;
  color:var(--apple-sec);
  line-height:1.45;
  max-width:42ch;
}
#view-app .studio-page--design .design-toolbar.liquid-glass:hover{
  background:var(--apple-glass) !important;
  box-shadow:var(--apple-shadow) !important;
  border-color:var(--apple-rim) !important;
  outline:none !important;
  transform:none !important;
}
#view-app .studio-page--design .site-card:hover,
#view-app .studio-page--design .site-card.show-actions{
  transform:translateY(-2px) !important;
  border-color:var(--apple-rim) !important;
}
#view-app .studio-page--design .pc-name{
  font-size:15px;
  font-weight:600;
  letter-spacing:-.02em;
}
#view-app .studio-page--design .pc-meta{
  font-size:12.5px;
  color:var(--apple-sec);
}

/* ===== Console ===== */
/* Fill the main column next to the sidebar — no centered 1040/1080/1120 gutters */
#view-app .page.page--wide,
#view-app .page:has(> .console-page),
#view-app .page:has(.console-page){
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:clamp(20px,2.5vw,36px) !important;
  padding-right:clamp(20px,2.5vw,36px) !important;
  box-sizing:border-box !important;
}
#view-app .page.page--wide > .console-page,
#view-app .console-page{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-bottom:72px;
  box-sizing:border-box;
}
#view-app .console-page .console-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:12px;
  padding:10px 0 2px;
}
#view-app .console-page .console-top-mark svg{
  width:28px;height:28px;
  stroke:currentColor;
  color:currentColor;
  stroke-width:1.6;
}
#view-app .console-page .console-eyebrow{
  margin:0 0 4px;
  font-size:11px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  color:var(--apple-ter) !important;
}
#view-app .console-page .console-top-link{
  appearance:none;border:none;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 0;margin:0 0 6px;
  font:inherit;font-size:14px;font-weight:560;letter-spacing:-.015em;
  color:var(--color-tint,#355cff);
}
#view-app .console-page .console-top-link:hover{opacity:.75}
#view-app .console-page .dash-status-pill{
  background:var(--apple-fill) !important;
  color:var(--apple-sec) !important;
  border:none !important;
  box-shadow:none !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:5px 10px !important;
  border-radius:980px;
}
#view-app .console-page .console-next-line{
  display:flex;align-items:center;gap:10px;
  margin:0 0 20px;
  font-size:13.5px;
  color:var(--apple-sec);
}
#view-app .console-page .console-next-line > span{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--apple-ter);
}
#view-app .console-page .console-next-line button{
  appearance:none;border:none;background:transparent;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:560;letter-spacing:-.015em;
  color:var(--color-tint,#355cff);padding:0;
}
#view-app .console-page .console-next-line button:hover{text-decoration:underline}

#view-app .console-page .dash-stats-bar-label{
  font-size:11px !important;
  letter-spacing:.06em !important;
  text-transform:uppercase;
  color:var(--apple-ter) !important;
  font-weight:600 !important;
}
#view-app .console-page .dash-stat{
  padding:16px !important;
  border-radius:var(--apple-r) !important;
}
#view-app .console-page .dash-stat-n{
  font-size:26px !important;
  font-weight:650 !important;
  letter-spacing:-.035em !important;
  color:var(--apple-ink) !important;
}
#view-app .console-page .dash-stat-ico{
  width:28px;height:28px;border-radius:8px;
  background:var(--apple-fill) !important;
  border:none !important;
  box-shadow:none !important;
}

#view-app .console-page .console-mid{
  gap:16px;
  margin-bottom:16px;
}
#view-app .console-page .console-panel-head{
  padding:16px 18px 8px;
}
#view-app .console-page .console-panel-head h2{
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  color:var(--apple-ink) !important;
}
#view-app .console-page .console-panel-title svg{display:none}

/* */
#view-app .console-page .console-filters{
  display:inline-flex !important;
  align-items:stretch !important;
  gap:2px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
#view-app .console-page .console-filter{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--apple-sec) !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  min-height:var(--apple-seg-h) !important;
  padding:0 12px !important;
  border-radius:var(--apple-seg-r-thumb) !important;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease !important;
}
#view-app .console-page .console-filter:hover:not(.on){
  color:var(--apple-ink) !important;
  background:var(--apple-seg-hover) !important;
}
#view-app .console-page .console-filter.on{
  background:var(--apple-seg-thumb) !important;
  color:var(--apple-ink) !important;
  font-weight:600 !important;
  box-shadow:var(--apple-seg-thumb-shadow) !important;
}

#view-app .console-page .console-recent-row{
  border-radius:10px;
  margin:0 8px;
  padding:10px 10px;
}
#view-app .console-page .console-recent-row:hover{
  background:var(--apple-fill);
}

/* Status / publish glass */
#view-app .console-page .console-panel--aura{
  display:flex;
  flex-direction:column;
  min-height:280px;
}
#view-app .console-page .console-aura-glow{
  opacity:.35 !important;
  filter:blur(28px) !important;
}
#view-app .console-page .console-aura-rings i{
  border-color:rgba(255,255,255,.35) !important;
  opacity:.5;
}
#view-app .console-page .console-aura-foot{
  padding:14px 14px 16px;
  gap:10px;
}
#view-app .console-page .console-status-pill{
  background:var(--apple-fill) !important;
  border:none !important;
  box-shadow:none !important;
}
#view-app .console-page .console-aura-addrs{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
}
#view-app .console-page .console-addr{
  appearance:none;border:none;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:2px;
  padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.32);
  color:inherit;font:inherit;
  transition:background .15s ease;
}
#view-app .console-page .console-addr:hover:not(:disabled){
  background:rgba(255,255,255,.5);
}
#view-app .console-page .console-addr:disabled{opacity:.42;cursor:default}
#view-app .console-page .console-addr em{
  font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--apple-ter);
}
#view-app .console-page .console-addr strong{
  font-size:12.5px;font-weight:550;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--apple-ink);
}
#view-app .console-page .console-aura-actions{
  display:flex;gap:8px;width:100%;
}
#view-app .console-page .console-aura-actions .btn{flex:1}

/* */
#view-app .console-page .console-comp-table{display:none !important}
#view-app .console-page .console-comp-list{
  list-style:none;margin:0;padding:4px 14px 8px;
  display:flex;flex-direction:column;gap:2px;
}
#view-app .console-page .console-comp-item{
  display:grid;
  grid-template-columns:10px 1fr auto;
  align-items:center;gap:12px;
  padding:11px 8px;
  border-radius:10px;
  cursor:pointer;
  border:none;background:transparent;width:100%;
  font:inherit;text-align:left;color:inherit;
}
#view-app .console-page .console-comp-item:hover,
#view-app .console-page .console-comp-item.is-hot{
  background:var(--apple-fill);
}
#view-app .console-page .console-comp-item .console-swatch{
  width:10px;height:10px;border-radius:50%;
}
#view-app .console-page .console-comp-item strong{
  font-size:14px;font-weight:550;letter-spacing:-.015em;
}
#view-app .console-page .console-comp-item em{
  font-style:normal;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--apple-sec);
}
#view-app .console-page .console-gauge{
  margin:8px 18px 18px;
}

#view-app .console-page .console-insights{
  gap:16px;
}
#view-app .console-page .console-health-cta{
  margin:6px 12px 12px;
  padding:6px 10px;
  border-radius:10px;
  background:var(--apple-fill);
  border:none;
  box-shadow:none;
  gap:10px;
  min-width:0;
  overflow:hidden;
}
#view-app .console-page .console-health-counts{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
#view-app .console-page .console-health-counts em{
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  min-width:0;
}
#view-app .console-page .console-health-counts em.crit{
  flex:0 0 auto;
  max-width:none;
}
#view-app .console-page .console-health-go{
  flex:0 0 auto;
  position:relative;
  z-index:1;
}
#view-app .console-page .console-uptime-chip{
  background:var(--apple-fill) !important;
  border:none !important;
  box-shadow:none !important;
}

/* */
#view-app .console-page .dash-stat.liquid-glass,
#view-app .console-page .console-panel.liquid-glass,
#view-app .console-page .console-notes.liquid-glass,
#view-app .console-page .dash-checklist-card.liquid-glass{
  background:var(--apple-glass,var(--studio-glass)) !important;
  background-image:none !important;
  border:1px solid var(--apple-rim,var(--studio-glass-border)) !important;
  box-shadow:var(--apple-shadow,var(--studio-glass-shadow)) !important;
  -webkit-backdrop-filter:var(--apple-blur,var(--studio-glass-blur)) !important;
  backdrop-filter:var(--apple-blur,var(--studio-glass-blur)) !important;
  border-radius:var(--apple-r,22px) !important;
}
#view-app .console-page .dash-stat.liquid-glass:hover,
#view-app .console-page .console-panel.liquid-glass:hover{
  background:var(--apple-glass-hi,var(--studio-glass-hover)) !important;
  box-shadow:var(--apple-shadow-hi,var(--studio-glass-shadow-hover)) !important;
}

/* Kill leftover clutter from prior experiments */
#view-app .console-page .console-quick,
#view-app .console-page .console-domain,
#view-app .console-page .console-publish,
#view-app .console-page .console-next:not(.console-next-line),
#view-app .console-page .console-health-findings,
#view-app .console-page .console-insight--revs,
#view-app .console-page .console-top-actions{
  display:none !important;
}

/* Menus */
.popover-root .user-menu,
.popover-root .site-menu,
.popover-root .bell-menu{
  border-radius:14px !important;
  padding:6px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 14px 44px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.05) !important;
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
}
html[data-theme="dark"] .popover-root .user-menu,
html[data-theme="dark"] .popover-root .site-menu,
html[data-theme="dark"] .popover-root .bell-menu,
html[data-hig-theme*="dark"] .popover-root .user-menu,
html[data-hig-theme*="dark"] .popover-root .site-menu,
html[data-hig-theme*="dark"] .popover-root .bell-menu,
html[data-theme="dark"] #view-app .user-menu,
html[data-theme="dark"] #view-app .site-menu,
html[data-theme="dark"] #view-app .bell-menu,
html[data-hig-theme*="dark"] #view-app .user-menu,
html[data-hig-theme*="dark"] #view-app .site-menu,
html[data-hig-theme*="dark"] #view-app .bell-menu,
html[data-theme="dark"] #view-app .user-menu.user-menu--dock,
html[data-hig-theme*="dark"] #view-app .user-menu.user-menu--dock{
  background:rgba(38,38,40,.98) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.2) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-theme="dark"] #view-app .user-menu button,
html[data-theme="dark"] #view-app .user-menu a,
html[data-theme="dark"] #view-app .site-menu button,
html[data-theme="dark"] #view-app .bell-menu button,
html[data-hig-theme*="dark"] #view-app .user-menu button,
html[data-hig-theme*="dark"] #view-app .user-menu a,
html[data-hig-theme*="dark"] #view-app .site-menu button,
html[data-hig-theme*="dark"] #view-app .bell-menu button,
html[data-theme="dark"] .popover-root .user-menu button,
html[data-theme="dark"] .popover-root .user-menu a,
html[data-theme="dark"] .popover-root .site-menu button,
html[data-theme="dark"] .popover-root .bell-menu button,
html[data-hig-theme*="dark"] .popover-root .user-menu button,
html[data-hig-theme*="dark"] .popover-root .user-menu a,
html[data-hig-theme*="dark"] .popover-root .site-menu button,
html[data-hig-theme*="dark"] .popover-root .bell-menu button{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .user-menu button:hover,
html[data-theme="dark"] #view-app .user-menu a:hover,
html[data-theme="dark"] #view-app .site-menu button:hover,
html[data-hig-theme*="dark"] #view-app .user-menu button:hover,
html[data-hig-theme*="dark"] #view-app .user-menu a:hover,
html[data-hig-theme*="dark"] #view-app .site-menu button:hover,
html[data-theme="dark"] .popover-root .user-menu button:hover,
html[data-theme="dark"] .popover-root .user-menu a:hover,
html[data-hig-theme*="dark"] .popover-root .user-menu button:hover,
html[data-hig-theme*="dark"] .popover-root .user-menu a:hover{
  background:rgba(255,255,255,.1) !important;
}
html[data-theme="dark"] #view-app .user-menu .danger,
html[data-hig-theme*="dark"] #view-app .user-menu .danger,
html[data-theme="dark"] .popover-root .user-menu .danger,
html[data-hig-theme*="dark"] .popover-root .user-menu .danger{
  color:#ff6961 !important;
}
html[data-theme="dark"] #view-app .user-menu svg.lucide,
html[data-theme="dark"] #view-app .user-menu a svg.lucide,
html[data-hig-theme*="dark"] #view-app .user-menu svg.lucide,
html[data-hig-theme*="dark"] #view-app .user-menu a svg.lucide,
html[data-theme="dark"] .popover-root .user-menu svg.lucide,
html[data-hig-theme*="dark"] .popover-root .user-menu svg.lucide{
  color:rgba(235,235,245,.72) !important;
  stroke:rgba(235,235,245,.72) !important;
}


/* Site switcher + New site footer */
#ctx-menu .sm-new,
.popover-root .site-menu .sm-new,
#view-app .site-menu .sm-new{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  width:100% !important;
  border-top:none !important;
  border-radius:980px !important;
  margin-top:6px !important;
  min-height:36px !important;
  padding:0 14px !important;
  font-weight:600 !important;
  font-size:13px !important;
  letter-spacing:-.015em !important;
  color:var(--apple-ink,#1d1d1f) !important;
  box-shadow:none !important;
  background:rgba(118,118,128,.14) !important;
  text-align:center !important;
}
#ctx-menu .sm-new:hover,
#ctx-menu .sm-new:focus-visible,
.popover-root .site-menu .sm-new:hover,
.popover-root .site-menu .sm-new:focus-visible,
#view-app .site-menu .sm-new:hover,
#view-app .site-menu .sm-new:focus-visible{
  background:rgba(118,118,128,.22) !important;
  box-shadow:none !important;
  color:var(--apple-ink,#1d1d1f) !important;
}
html[data-theme="dark"] #ctx-menu .sm-new,
html[data-theme="dark"] .popover-root .site-menu .sm-new,
html[data-theme="dark"] #view-app .site-menu .sm-new,
html[data-hig-theme*="dark"] #ctx-menu .sm-new,
html[data-hig-theme*="dark"] .popover-root .site-menu .sm-new,
html[data-hig-theme*="dark"] #view-app .site-menu .sm-new{
  color:#f5f5f7 !important;
  background:rgba(118,118,128,.28) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] #ctx-menu .sm-new:hover,
html[data-theme="dark"] #ctx-menu .sm-new:focus-visible,
html[data-theme="dark"] .popover-root .site-menu .sm-new:hover,
html[data-theme="dark"] .popover-root .site-menu .sm-new:focus-visible,
html[data-theme="dark"] #view-app .site-menu .sm-new:hover,
html[data-theme="dark"] #view-app .site-menu .sm-new:focus-visible,
html[data-hig-theme*="dark"] #ctx-menu .sm-new:hover,
html[data-hig-theme*="dark"] #ctx-menu .sm-new:focus-visible,
html[data-hig-theme*="dark"] .popover-root .site-menu .sm-new:hover,
html[data-hig-theme*="dark"] .popover-root .site-menu .sm-new:focus-visible,
html[data-hig-theme*="dark"] #view-app .site-menu .sm-new:hover,
html[data-hig-theme*="dark"] #view-app .site-menu .sm-new:focus-visible{
  background:rgba(118,118,128,.4) !important;
  color:#f5f5f7 !important;
}
.popover-root .site-menu,
#view-app .site-menu{
  padding:8px !important;
  border-radius:16px !important;
  min-width:268px;
}
.popover-root .site-menu .sm-list,
#view-app .site-menu .sm-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:min(52vh,360px);
  overflow-y:auto;
  padding:0;
  margin:0;
}
.popover-root .site-menu .sm-site,
#view-app .site-menu .sm-site{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  min-height:48px !important;
  padding:8px 10px !important;
  border:none !important;
  border-radius:12px !important;
  background:transparent !important;
  text-align:left !important;
  cursor:pointer;
  color:var(--apple-ink,#1d1d1f) !important;
  box-shadow:none !important;
}
.popover-root .site-menu .sm-site:hover,
#view-app .site-menu .sm-site:hover{
  background:rgba(118,118,128,.12) !important;
}
.popover-root .site-menu .sm-site.on,
#view-app .site-menu .sm-site.on{
  background:rgba(118,118,128,.18) !important;
}
html[data-theme="dark"] .popover-root .site-menu .sm-site:hover,
html[data-theme="dark"] #view-app .site-menu .sm-site:hover,
html[data-hig-theme*="dark"] .popover-root .site-menu .sm-site:hover,
html[data-hig-theme*="dark"] #view-app .site-menu .sm-site:hover{
  background:rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .popover-root .site-menu .sm-site.on,
html[data-theme="dark"] #view-app .site-menu .sm-site.on,
html[data-hig-theme*="dark"] .popover-root .site-menu .sm-site.on,
html[data-hig-theme*="dark"] #view-app .site-menu .sm-site.on{
  background:rgba(255,255,255,.12) !important;
}
.popover-root .site-menu .sm-avatar,
#view-app .site-menu .sm-avatar{
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:650;
  letter-spacing:-.02em;
  color:#fff;
  background:#636366;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.popover-root .site-menu .sm-avatar.live,
#view-app .site-menu .sm-avatar.live{
  background:#30d158;
  color:#053012;
}
.popover-root .site-menu .sm-avatar.staging,
#view-app .site-menu .sm-avatar.staging{
  background:#ff9f0a;
  color:#3b2400;
}
.popover-root .site-menu .sm-avatar.draft,
#view-app .site-menu .sm-avatar.draft{
  background:color-mix(in srgb,var(--color-tint,#355cff) 78%,#1d1d1f);
  color:#fff;
}
.popover-root .site-menu .sm-text,
#view-app .site-menu .sm-text{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-start;
}
.popover-root .site-menu .sm-name,
#view-app .site-menu .sm-name{
  font-size:13.5px !important;
  font-weight:600 !important;
  letter-spacing:-.015em !important;
  line-height:1.2 !important;
  color:inherit !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.popover-root .site-menu .sm-sub,
#view-app .site-menu .sm-sub{
  font-size:11.5px !important;
  font-weight:450 !important;
  line-height:1.2 !important;
  color:var(--apple-sec,rgba(60,60,67,.56)) !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
html[data-theme="dark"] .popover-root .site-menu .sm-sub,
html[data-theme="dark"] #view-app .site-menu .sm-sub,
html[data-hig-theme*="dark"] .popover-root .site-menu .sm-sub,
html[data-hig-theme*="dark"] #view-app .site-menu .sm-sub{
  color:rgba(235,235,245,.58) !important;
}
.popover-root .site-menu .sm-pin-wrap,
.popover-root .site-menu .sm-check-wrap,
#view-app .site-menu .sm-pin-wrap,
#view-app .site-menu .sm-check-wrap{
  flex:0 0 auto;
  display:inline-flex;
  color:var(--apple-sec,rgba(60,60,67,.56));
}
.popover-root .site-menu .sm-check-wrap,
#view-app .site-menu .sm-check-wrap{
  color:var(--color-tint,#355cff);
}
.popover-root .site-menu .sm-pin-wrap svg.lucide,
.popover-root .site-menu .sm-check-wrap svg.lucide,
#view-app .site-menu .sm-pin-wrap svg.lucide,
#view-app .site-menu .sm-check-wrap svg.lucide{
  width:14px !important;
  height:14px !important;
  stroke:currentColor !important;
}
.popover-root .site-menu .sm-quota,
#view-app .site-menu .sm-quota{
  margin:8px 4px 2px !important;
  padding:0 6px !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  letter-spacing:-.01em !important;
  line-height:1.35 !important;
  color:var(--apple-sec,rgba(60,60,67,.56)) !important;
}
html[data-theme="dark"] .popover-root .site-menu .sm-quota,
html[data-theme="dark"] #view-app .site-menu .sm-quota,
html[data-hig-theme*="dark"] .popover-root .site-menu .sm-quota,
html[data-hig-theme*="dark"] #view-app .site-menu .sm-quota{
  color:rgba(235,235,245,.58) !important;
}
.popover-root .site-menu .sm-new svg.lucide,
#view-app .site-menu .sm-new svg.lucide,
#ctx-menu .sm-new svg.lucide{
  width:14px !important;
  height:14px !important;
  stroke:currentColor !important;
}
/* */
#view-app .builder #pg-add2.btn-ghost{
  border-radius:10px !important;
  justify-content:flex-start !important;
  text-align:left !important;
  color:var(--color-tint,#355cff) !important;
  font-weight:600 !important;
  background:transparent !important;
}
#view-app .builder #pg-add2.btn-ghost:hover,
#view-app .builder #pg-add2.btn-ghost:focus-visible{
  background:color-mix(in srgb,var(--color-tint,#355cff) 10%,transparent) !important;
}

@media (max-width:720px){
  #view-app .console-page .console-top{flex-direction:column;align-items:flex-start}
  #view-app .console-mid{grid-template-columns:1fr}
}

/* */
#view-app .studio-page--health .health-find-filter,
#view-app .health-find-filter,
#view-app .studio-page--settings .ds-group .ds-row .seg,
#view-app .studio-page--settings .settings-seg .seg,
#view-app .studio-page--settings .settings-card > .seg,
#view-app #inspector .ds-group .ds-row .seg{
  display:inline-flex !important;
  align-items:stretch !important;
  gap:2px !important;
  padding:3px !important;
  border-radius:9999px !important;
  background:rgba(120,120,128,.14) !important;
  border:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  overflow:hidden !important;
}
#view-app .health-find-filter button,
#view-app .studio-page--settings .ds-group .ds-row .seg button,
#view-app .studio-page--settings .settings-seg .seg button,
#view-app .studio-page--settings .settings-card > .seg button,
#view-app #inspector .ds-group .ds-row .seg button{
  appearance:none !important;
  border:none !important;
  cursor:pointer;
  font:inherit;
  position:relative;
  z-index:1;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:var(--apple-seg-h) !important;
  padding:0 13px !important;
  border-radius:var(--apple-seg-r-thumb) !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  line-height:1 !important;
  color:var(--apple-sec) !important;
  background:transparent !important;
  box-shadow:none !important;
  white-space:nowrap;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease !important;
}
#view-app .health-find-filter button:hover:not(.on),
#view-app .studio-page--settings .ds-group .ds-row .seg button:hover:not(.on),
#view-app .studio-page--settings .settings-seg .seg button:hover:not(.on),
#view-app .studio-page--settings .settings-card > .seg button:hover:not(.on),
#view-app #inspector .ds-group .ds-row .seg button:hover:not(.on){
  color:var(--apple-ink) !important;
  background:var(--apple-seg-hover) !important;
}
#view-app .health-find-filter button.on,
#view-app .studio-page--settings .ds-group .ds-row .seg button.on,
#view-app .studio-page--settings .settings-seg .seg button.on,
#view-app .studio-page--settings .settings-card > .seg button.on,
#view-app #inspector .ds-group .ds-row .seg button.on{
  color:var(--apple-ink) !important;
  font-weight:600 !important;
  background:var(--apple-seg-thumb) !important;
  box-shadow:var(--apple-seg-thumb-shadow) !important;
}
#view-app .health-find-filter button:focus-visible,
#view-app .studio-page--settings .ds-group .ds-row .seg button:focus-visible,
#view-app .studio-page--settings .settings-seg .seg button:focus-visible,
#view-app .studio-page--settings .settings-card > .seg button:focus-visible,
#view-app #inspector .ds-group .ds-row .seg button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--color-tint,#355cff) 40%,transparent);
  outline-offset:2px;
}

/* */
#view-app .studio-page--settings .ds-group .ds-row .bd-select,
#view-app #inspector .ds-group .ds-row .bd-select{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:min(220px,58%) !important;
}
#view-app .studio-page--settings .ds-group .ds-row .bd-select-trigger,
#view-app #inspector .ds-group .ds-row .bd-select-trigger{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:auto !important;
  min-width:0 !important;
  min-height:var(--apple-seg-h,32px) !important;
  padding:0 10px 0 14px !important;
  border:none !important;
  border-radius:980px !important;
  gap:6px !important;
  background:var(--apple-seg-thumb) !important;
  box-shadow:var(--apple-seg-thumb-shadow) !important;
  color:var(--apple-ink,#1d1d1f) !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  line-height:1 !important;
  transition:color .16s ease,background .16s ease,box-shadow .16s ease !important;
}
#view-app .studio-page--settings .ds-group .ds-row .bd-select-trigger:hover,
#view-app #inspector .ds-group .ds-row .bd-select-trigger:hover{
  background:#fff !important;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.05),
    0 2px 6px rgba(0,0,0,.06),
    0 6px 16px rgba(0,0,0,.06) !important;
}
#view-app .studio-page--settings .ds-group .ds-row .bd-select.open .bd-select-trigger,
#view-app .studio-page--settings .ds-group .ds-row .bd-select-trigger:focus-visible,
#view-app #inspector .ds-group .ds-row .bd-select.open .bd-select-trigger,
#view-app #inspector .ds-group .ds-row .bd-select-trigger:focus-visible{
  outline:none !important;
  background:#fff !important;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.05),
    0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 16%,transparent),
    0 4px 14px rgba(0,0,0,.08) !important;
}
#view-app .studio-page--settings .ds-group .ds-row .bd-select-val,
#view-app #inspector .ds-group .ds-row .bd-select-val{
  flex:0 1 auto !important;
  text-align:left !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#view-app .studio-page--settings .ds-group .ds-row .bd-select-chev,
#view-app #inspector .ds-group .ds-row .bd-select-chev{
  width:13px !important;
  height:13px !important;
  opacity:.42 !important;
  flex:0 0 auto !important;
  margin-left:2px !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row .bd-select-trigger,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row .bd-select-trigger,
html[data-theme="dark"] #view-app #inspector .ds-group .ds-row .bd-select-trigger,
html[data-hig-theme*="dark"] #view-app #inspector .ds-group .ds-row .bd-select-trigger{
  color:#f5f5f7 !important;
  background:rgba(99,99,102,.72) !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.08),
    0 2px 8px rgba(0,0,0,.3) !important;
}

/* */
#view-app .studio-page--settings .ds-group .ds-row--text > input,
#view-app #inspector .ds-group .ds-row--text > input{
  flex:1 1 100% !important;
  max-width:none !important;
  width:100% !important;
  min-height:36px !important;
  padding:8px 16px !important;
  border:none !important;
  border-radius:980px !important;
  background:var(--apple-fill,rgba(120,120,128,.12)) !important;
  box-shadow:none !important;
  font-size:14px !important;
  font-weight:400 !important;
  letter-spacing:-.01em !important;
  color:var(--apple-ink,#1d1d1f) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
#view-app .studio-page--settings .ds-group .ds-row--text > input:focus,
#view-app #inspector .ds-group .ds-row--text > input:focus{
  outline:none !important;
  background:rgba(118,118,128,.16) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 16%,transparent) !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row--text > input,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row--text > input,
html[data-theme="dark"] #view-app #inspector .ds-group .ds-row--text > input,
html[data-hig-theme*="dark"] #view-app #inspector .ds-group .ds-row--text > input{
  color:#f5f5f7 !important;
  background:rgba(120,120,128,.22) !important;
}

#view-app .health-row{
  border-radius:12px;margin:4px 0;
}
#view-app .health-fix-btn{
  box-shadow:none !important;
}

/* =====================================================================
   Builder
===================================================================== */

body.builder-immersive #view-app .shell,
body.builder-immersive #view-app .main,
body.builder-immersive #view-app .page.full{
  background:var(--color-bg-grouped,#f5f5f7) !important;
}

/* Right-anchor the capsule to the Design rail; Publish stays pinned outside scroll. */
body.builder-immersive #view-app .b-pill.liquid-glass,
#view-app .builder .b-pill.liquid-glass,
#view-app .page .builder .b-pill.liquid-glass{
  --bp-rail-l:302px; /* library 280 + margins + gap */
  --bp-rail-r:348px; /* inspector 320 + margins + gap */
  position:fixed !important;
  top:8px !important;
  left:auto !important;
  right:var(--bp-rail-r) !important;
  width:max-content !important;
  max-width:calc(100vw - var(--bp-rail-l) - var(--bp-rail-r)) !important;
  margin:0 !important;
  transform:none !important;
  -webkit-transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  height:44px !important;
  padding:4px 6px 4px 5px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter:blur(40px) saturate(180%) !important;
  backdrop-filter:blur(40px) saturate(180%) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(0,0,0,.04),
    0 10px 32px rgba(0,0,0,.08) !important;
  z-index:12000 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  font-family:var(--font-ui),-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif !important;
  -webkit-font-smoothing:antialiased;
  color:rgba(29,29,31,.88);
  pointer-events:auto !important;
}
body.builder-immersive #view-app .b-pill.liquid-glass:hover,
#view-app .builder .b-pill.liquid-glass:hover,
#view-app .page .builder .b-pill.liquid-glass:hover{
  transform:none !important;
  -webkit-transform:none !important;
}
/* Left tools may scroll; Publish stays fixed at the trailing edge */
#view-app .builder .b-pill .bp-scroll{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
}
#view-app .builder .b-pill .bp-scroll::-webkit-scrollbar{display:none !important}
#view-app .builder .b-pill .bp-div--pub{
  flex:0 0 auto !important;
}
#view-app .builder .b-pill .bp-publish{
  flex:0 0 auto !important;
  position:relative !important;
  z-index:2 !important;
}
/* */
#view-app .builder .b-pill.liquid-glass:not(.light){
  background:rgba(22,22,24,.78) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 36px rgba(0,0,0,.26) !important;
  color:rgba(255,255,255,.92);
}

#view-app .builder .b-pill .bp-group{
  display:inline-flex;
  align-items:center;
  gap:1px;
  flex:0 0 auto;
  min-width:0;
}
#view-app .builder .b-pill .bp-div{
  width:1px !important;
  height:18px !important;
  margin:0 7px !important;
  background:rgba(60,60,67,.16) !important;
  border-radius:1px;
  flex:0 0 auto !important;
  align-self:center;
}
#view-app .builder .b-pill:not(.light) .bp-div{
  background:rgba(255,255,255,.14) !important;
}

#view-app .builder .b-pill .bp-ic,
#view-app .builder .b-pill .bp-zoom,
#view-app .builder .b-pill .bp-label,
#view-app .builder .b-pill .bp-save,
#view-app .builder .b-pill .bp-crumb{
  appearance:none;
  border:none;
  background:transparent;
  cursor:pointer;
  color:rgba(29,29,31,.88) !important;
  border-radius:980px !important;
  transition:background .14s ease, color .14s ease, opacity .14s ease;
}
#view-app .builder .b-pill:not(.light) .bp-ic,
#view-app .builder .b-pill:not(.light) .bp-zoom,
#view-app .builder .b-pill:not(.light) .bp-label,
#view-app .builder .b-pill:not(.light) .bp-save,
#view-app .builder .b-pill:not(.light) .bp-crumb{
  color:rgba(255,255,255,.92) !important;
}
#view-app .builder .b-pill .bp-ic{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
}
#view-app .builder .b-pill .bp-ic svg.lucide{
  width:16px !important;
  height:16px !important;
  stroke-width:1.85 !important;
  stroke:currentColor !important;
  color:inherit !important;
  /* Default SVG overflow:hidden clips lucide strokes into flat tops */
  overflow:visible !important;
}
#view-app .builder .b-pill .bp-ic:hover,
#view-app .builder .b-pill .bp-zoom:hover,
#view-app .builder .b-pill .bp-label:hover,
#view-app .builder .b-pill .bp-save:hover,
#view-app .builder .b-pill .bp-crumb:hover{
  background:rgba(0,0,0,.06) !important;
}
#view-app .builder .b-pill:not(.light) .bp-ic:hover,
#view-app .builder .b-pill:not(.light) .bp-zoom:hover,
#view-app .builder .b-pill:not(.light) .bp-label:hover,
#view-app .builder .b-pill:not(.light) .bp-save:hover,
#view-app .builder .b-pill:not(.light) .bp-crumb:hover{
  background:rgba(255,255,255,.1) !important;
}
#view-app .builder .b-pill .bp-ic:active,
#view-app .builder .b-pill .bp-ic.on{
  background:rgba(0,0,0,.1) !important;
}
#view-app .builder .b-pill:not(.light) .bp-ic:active,
#view-app .builder .b-pill:not(.light) .bp-ic.on{
  background:rgba(255,255,255,.16) !important;
}
#view-app .builder .b-pill .bp-ic[disabled]{
  opacity:.32 !important;
  cursor:default !important;
  background:transparent !important;
}

#view-app .builder .b-pill .bp-crumb{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  max-width:220px;
  min-height:32px;
  padding:0 10px 0 6px !important;
  font-size:12.5px !important;
  font-weight:550 !important;
  letter-spacing:-.015em !important;
  white-space:nowrap;
}
#view-app .builder .b-pill .bp-crumb #pb-site{
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:118px;
}
#view-app .builder .b-pill .bp-crumb em{
  font-style:normal !important;
  color:rgba(60,60,67,.28) !important;
  margin:0 1px;
}
#view-app .builder .b-pill .bp-crumb #pb-page{
  color:rgba(60,60,67,.55) !important;
}
#view-app .builder .b-pill .bp-crumb svg.lucide{
  width:12px !important;
  height:12px !important;
  color:rgba(60,60,67,.4) !important;
  flex:0 0 auto;
}
#view-app .builder .b-pill:not(.light) .bp-crumb em{
  color:rgba(255,255,255,.28) !important;
}
#view-app .builder .b-pill:not(.light) .bp-crumb #pb-page{
  color:rgba(255,255,255,.55) !important;
}
#view-app .builder .b-pill:not(.light) .bp-crumb svg.lucide{
  color:rgba(255,255,255,.4) !important;
}

#view-app .builder .b-pill .bp-zoom{
  min-width:40px !important;
  height:32px !important;
  padding:0 8px !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

#view-app .builder .b-pill .bp-label,
#view-app .builder .b-pill .bp-save{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  height:32px !important;
  padding:0 10px !important;
  font-size:12.5px !important;
  font-weight:550 !important;
  letter-spacing:-.015em !important;
  white-space:nowrap;
  flex:0 0 auto !important;
}
#view-app .builder .b-pill .bp-label svg.lucide,
#view-app .builder .b-pill .bp-save svg.lucide{
  width:14px !important;
  height:14px !important;
  flex:0 0 auto;
  stroke:currentColor !important;
  overflow:visible !important;
}
#view-app .builder .b-pill .bp-crumb svg.lucide,
#view-app .builder .b-pill .bp-publish svg.lucide{
  overflow:visible !important;
}
/* Builder chrome icons — never clip stroke caps */
#view-app .builder svg.lucide,
#view-app #inspector svg.lucide,
#view-app #panel-left svg.lucide{
  overflow:visible !important;
}
#view-app .builder .b-pill .bp-save .save-state{
  min-width:0 !important;
  padding:0 !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:-.015em !important;
  color:rgba(60,60,67,.72) !important;
  text-align:left !important;
}
#view-app .builder .b-pill:not(.light) .bp-save .save-state{
  color:rgba(235,235,245,.82) !important;
}
#view-app .builder .b-pill .bp-save .save-state.dirty{
  color:#c93400 !important;
}
#view-app .builder .b-pill:not(.light) .bp-save .save-state.dirty{
  color:#ffd60a !important;
}
#view-app .builder .b-pill .bp-save .save-state.saving{
  color:var(--color-tint,#355cff) !important;
}
#view-app .builder .b-pill:not(.light) .bp-save .save-state.saving{
  color:#64d2ff !important;
}
/* Dark theme + dark chrome: keep Saved readable */
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-save,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-save,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-save,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-save{
  color:rgba(235,235,245,.88) !important;
}
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-save svg.lucide,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-save svg.lucide,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-save svg.lucide,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-save svg.lucide{
  stroke:rgba(235,235,245,.88) !important;
  color:rgba(235,235,245,.88) !important;
}
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-save .save-state,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-save .save-state,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-save .save-state,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-save .save-state{
  color:rgba(235,235,245,.88) !important;
}
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-save .save-state.dirty,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-save .save-state.dirty,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-save .save-state.dirty,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-save .save-state.dirty{
  color:#ffd60a !important;
}
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-save .save-state.saving,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-save .save-state.saving,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-save .save-state.saving,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-save .save-state.saving{
  color:#64d2ff !important;
}

#view-app .builder .b-pill .bp-seg{
  display:inline-flex;align-items:center;gap:2px;
  padding:2px;margin:0 2px;
  border-radius:980px;
  background:rgba(120,120,128,.12);
}
#view-app .builder .b-pill .bp-seg button{
  width:30px;height:28px;padding:0;border:none;border-radius:980px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--apple-sec,rgb(60,60,67,.56));cursor:pointer;
}
#view-app .builder .b-pill .bp-seg button.on{
  background:rgba(255,255,255,.95);
  color:var(--apple-ink,#1d1d1f);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
#view-app .builder .b-pill .bp-seg button svg.lucide{width:14px;height:14px}

/* */
body.builder-preview .panel-left,
body.builder-preview .panel-right,
body.builder-preview #inspector,
body.builder-preview .b-pill,
body.builder-preview .debug-panel,
body.builder-preview .mb-bar,
body.builder-preview .mb-veil,
body.builder-preview .live-sel-bar,
body.builder-preview .live-chrome,
body.builder-preview .blk-tools,
body.builder-preview .blk-label,
body.builder-preview .drop-line,
body.builder-preview .blk-hidden-stub{
  display:none !important;
}
body.builder-preview .canvas-wrap{
  padding:28px 16px 110px !important;
}
body.builder-preview .page-chrome{display:none !important}
body.builder-preview .blk{
  outline:none !important;
  pointer-events:none;
}
body.builder-preview [data-e]{cursor:default}
#view-app .builder .b-pill .bp-publish{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  height:32px !important;
  min-height:32px !important;
  margin:0 !important;
  padding:0 14px !important;
  border-radius:980px !important;
  background:var(--color-tint,#355cff) !important;
  border:none !important;
  color:#fff !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:-.015em !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 3px 10px color-mix(in srgb,var(--color-tint,#355cff) 32%,transparent) !important;
  flex:0 0 auto !important;
  white-space:nowrap;
  cursor:pointer;
  transition:background .14s ease, transform .12s ease;
}
#view-app .builder .b-pill .bp-publish:hover{
  background:var(--color-tint-hover,#4a6fff) !important;
}
#view-app .builder .b-pill .bp-publish:active{
  transform:scale(.98);
}
#view-app .builder .b-pill .bp-publish svg.lucide{
  width:12px !important;
  height:12px !important;
  opacity:.9;
  stroke:#fff !important;
  color:#fff !important;
}

@media (max-width:1100px){
  #view-app .builder .b-pill .bp-label span,
  #view-app .builder .b-pill .bp-crumb #pb-site{
    display:none;
  }
  #view-app .builder .b-pill .bp-crumb{
    max-width:120px;
    padding:0 8px !important;
  }
  #view-app .builder .b-pill .bp-label{
    padding:0 8px !important;
  }
}

/* Side panels — overflow must stay hidden so glass fill clips to radius */
#view-app .builder .panel-left.liquid-glass,
#view-app .builder .panel-right.liquid-glass,
#view-app .builder #inspector.liquid-glass{
  background:rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter:var(--apple-blur) !important;
  backdrop-filter:var(--apple-blur) !important;
  border:1px solid var(--apple-rim) !important;
  box-shadow:var(--apple-shadow) !important;
  border-radius:22px !important;
  overflow:hidden !important;
}
html[data-theme="dark"] #view-app .builder .panel-left.liquid-glass,
html[data-theme="dark"] #view-app .builder .panel-right.liquid-glass,
html[data-theme="dark"] #view-app .builder #inspector.liquid-glass,
html[data-hig-theme*="dark"] #view-app .builder .panel-left.liquid-glass,
html[data-hig-theme*="dark"] #view-app .builder .panel-right.liquid-glass,
html[data-hig-theme*="dark"] #view-app .builder #inspector.liquid-glass{
  background:rgba(28,28,30,.62) !important;
  border-color:rgba(255,255,255,.12) !important;
}
/* ID selectors beat CDN bd-app/bd-hig padding-top:58–76px */
#view-app #panel-left,
#view-app #inspector,
#view-app .builder.immersive .panel-left,
#view-app .builder.immersive .panel-right,
body.builder-immersive #view-app .builder .panel-left,
body.builder-immersive #view-app .builder .panel-right,
body.builder-immersive #panel-left,
body.builder-immersive #inspector{
  position:relative !important;
  z-index:40 !important;
  margin:4px 6px 6px !important;
  height:calc(100vh - 10px) !important;
  max-height:calc(100vh - 10px) !important;
  padding:10px 12px 20px !important;
  border-radius:16px !important;
  border-left:none !important;
  border-right:none !important;
  width:280px;
  flex-basis:280px;
  box-sizing:border-box !important;
}
#view-app #inspector,
#view-app .builder.immersive .panel-right,
#view-app .builder.immersive #inspector,
body.builder-immersive #view-app .builder #inspector,
body.builder-immersive #inspector{
  width:320px !important;
  flex-basis:320px !important;
  padding:10px 14px 24px !important;
  border-radius:16px !important;
  box-sizing:border-box !important;
}
body.builder-immersive #view-app .builder.immersive .b-body,
#view-app .builder.immersive .b-body{
  padding-top:0 !important;
}

/* Library tabs — same rounded segment as settings nav (no clipped shadow crescent) */
#view-app #panel-left .lp-tabs,
#view-app .builder .lp-tabs,
#view-app .builder.immersive .lp-tabs,
#view-app .builder .panel-left .lp-tabs,
body.builder-immersive #view-app .builder .lp-tabs{
  display:flex !important;
  align-items:center !important;
  gap:3px !important;
  width:100% !important;
  height:44px !important;
  min-height:44px !important;
  padding:5px !important;
  background:rgba(120,120,128,.14) !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:9999px !important;
  margin:0 0 12px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
html[data-theme="dark"] #view-app #panel-left .lp-tabs,
html[data-hig-theme*="dark"] #view-app #panel-left .lp-tabs,
html[data-theme="dark"] #view-app .builder .lp-tabs,
html[data-hig-theme*="dark"] #view-app .builder .lp-tabs,
html[data-theme="dark"] #view-app .builder.immersive .lp-tabs,
html[data-hig-theme*="dark"] #view-app .builder.immersive .lp-tabs{
  background:rgba(118,118,128,.28) !important;
}
#view-app #panel-left .lp-tab,
#view-app .builder .lp-tab{
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 18px !important;
  border:none !important;
  outline:none !important;
  border-radius:9999px !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:-.015em !important;
  text-align:center !important;
  color:rgba(60,60,67,.55) !important;
  font-weight:500 !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer !important;
}
/* Inactive Library/Pages must stay readable in dark chrome */
html[data-theme="dark"] #view-app #panel-left .lp-tab,
html[data-hig-theme*="dark"] #view-app #panel-left .lp-tab,
html[data-theme="dark"] #view-app .builder .lp-tab,
html[data-hig-theme*="dark"] #view-app .builder .lp-tab,
html[data-theme="dark"] body.builder-immersive #view-app .builder .lp-tab,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .builder .lp-tab{
  color:rgba(235,235,245,.78) !important;
}
html[data-theme="dark"] #view-app #panel-left .lp-tab:hover:not(.on),
html[data-hig-theme*="dark"] #view-app #panel-left .lp-tab:hover:not(.on),
html[data-theme="dark"] #view-app .builder .lp-tab:hover:not(.on),
html[data-hig-theme*="dark"] #view-app .builder .lp-tab:hover:not(.on){
  color:#f5f5f7 !important;
  background:rgba(118,118,128,.28) !important;
}
#view-app #panel-left .lp-tab:hover:not(.on),
#view-app .builder .lp-tab:hover:not(.on){
  color:var(--apple-ink) !important;
  background:var(--apple-seg-hover) !important;
  box-shadow:none !important;
}
#view-app #panel-left .lp-tab.on,
#view-app .builder .lp-tab.on{
  color:var(--apple-ink,#1d1d1f) !important;
  font-weight:700 !important;
  background:#fff !important;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.1),
    0 1px 2px rgba(0,0,0,.06),
    0 3px 10px rgba(0,0,0,.08) !important;
}
html[data-theme="dark"] #view-app #panel-left .lp-tab.on,
html[data-hig-theme*="dark"] #view-app #panel-left .lp-tab.on,
html[data-theme="dark"] #view-app .builder .lp-tab.on,
html[data-hig-theme*="dark"] #view-app .builder .lp-tab.on{
  background:rgba(99,99,102,.78) !important;
  color:#f5f5f7 !important;
  box-shadow:none !important;
}

/* */
#view-app .builder .lib-filter{
  margin-bottom:4px;
}
#view-app .builder .lib-search-wrap{
  position:relative;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  min-height:38px;
  padding:0 12px 0 34px;
  border-radius:10px;
  border:none;
  background:rgba(118,118,128,.14);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
  transition:background .16s ease, box-shadow .16s ease;
}
#view-app .builder .lib-search-wrap:hover{
  background:rgba(118,118,128,.18);
}
#view-app .builder .lib-search-wrap:focus-within{
  background:#fff;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.06),
    0 1px 2px rgba(0,0,0,.04),
    0 6px 18px rgba(0,0,0,.08);
}
#view-app .builder .lib-search-ico{
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;height:16px;
  pointer-events:none;
  color:rgba(60,60,67,.45);
  transition:color .16s ease;
}
#view-app .builder .lib-search-ico svg{
  width:15px;height:15px;
  stroke-width:2.25;
}
#view-app .builder .lib-search-wrap:focus-within .lib-search-ico{
  color:var(--apple-ink,#1d1d1f);
}
#view-app .builder #lib-search{
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:9px 0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  color:var(--apple-ink,#1d1d1f) !important;
  line-height:1.3 !important;
}
#view-app .builder #lib-search::placeholder{
  color:rgba(60,60,67,.42) !important;
  font-weight:450 !important;
  opacity:1 !important;
}
#view-app .builder #lib-search::-webkit-search-decoration,
#view-app .builder #lib-search::-webkit-search-cancel-button{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:none !important;
}
#view-app .builder #lib-search:hover,
#view-app .builder #lib-search:focus{
  outline:none !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
html[data-theme="dark"] #view-app .builder .lib-search-wrap,
html[data-hig-theme*="dark"] #view-app .builder .lib-search-wrap{
  background:rgba(120,120,128,.28);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
html[data-theme="dark"] #view-app .builder .lib-search-wrap:hover,
html[data-hig-theme*="dark"] #view-app .builder .lib-search-wrap:hover{
  background:rgba(120,120,128,.34);
}
html[data-theme="dark"] #view-app .builder .lib-search-wrap:focus-within,
html[data-hig-theme*="dark"] #view-app .builder .lib-search-wrap:focus-within{
  background:rgba(58,58,60,.96);
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.1),
    0 6px 20px rgba(0,0,0,.4);
}
html[data-theme="dark"] #view-app .builder .lib-search-ico,
html[data-hig-theme*="dark"] #view-app .builder .lib-search-ico{
  color:rgba(235,235,245,.45);
}
html[data-theme="dark"] #view-app .builder .lib-search-wrap:focus-within .lib-search-ico,
html[data-hig-theme*="dark"] #view-app .builder .lib-search-wrap:focus-within .lib-search-ico{
  color:#f5f5f7;
}
html[data-theme="dark"] #view-app .builder #lib-search,
html[data-hig-theme*="dark"] #view-app .builder #lib-search{
  color:#f5f5f7 !important;
  background:transparent !important;
}
html[data-theme="dark"] #view-app .builder #lib-search::placeholder,
html[data-hig-theme*="dark"] #view-app .builder #lib-search::placeholder{
  color:rgba(235,235,245,.36) !important;
}
#view-app .builder .lib-suggest{
  position:absolute;
  left:0;right:0;
  top:calc(100% + 6px);
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 28px rgba(0,0,0,.12);
  max-height:min(320px,50vh);
  overflow:auto;
}
#view-app .builder .lib-suggest[hidden]{display:none !important}
#view-app .builder .lib-sug-row{
  display:flex;align-items:center;gap:10px;
  width:100%;
  padding:8px 10px;
  border:none;border-radius:10px;
  background:transparent;
  color:var(--apple-ink,#1d1d1f);
  text-align:left;
  cursor:pointer;
}
#view-app .builder .lib-sug-row:hover{
  background:var(--apple-fill);
}
#view-app .builder .lib-sug-meta{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;gap:1px;
}
#view-app .builder .lib-sug-meta strong{
  font-size:13px;font-weight:600;letter-spacing:-.015em;
}
#view-app .builder .lib-sug-meta em{
  font-style:normal;font-size:11.5px;
  color:var(--apple-sec,rgb(60,60,67,.56));
}
#view-app .builder .lib-sug-add{
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
  color:var(--color-tint,#355cff);
  opacity:.7;
}
#view-app .builder .lib-sug-row:hover .lib-sug-add{opacity:1}
#view-app .builder .lib-empty{
  padding:16px 10px;
  text-align:center;
  color:var(--apple-sec);
  font-size:13px;
}
#view-app .builder .lib-empty p{margin:0 0 10px}

/* */
#view-app .builder .lib-sec{
  border:none !important;
  border-radius:12px !important;
  margin-bottom:6px !important;
  background:var(--apple-fill) !important;
  overflow:hidden;
  box-shadow:none !important;
}
html[data-theme="dark"] #view-app .builder .lib-sec,
html[data-hig-theme*="dark"] #view-app .builder .lib-sec{
  background:rgba(120,120,128,.16) !important;
}
#view-app .builder .lib-head{
  padding:11px 12px !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:-.015em !important;
}
#view-app .builder .lib-head em{
  font-size:12px !important;
  color:var(--apple-ter) !important;
}
#view-app .builder .lib-body{padding:0 8px 10px !important}
#view-app .builder .block-item{
  border:none !important;
  border-radius:12px !important;
  background:transparent !important;
  margin-bottom:2px !important;
  padding:8px 10px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  box-shadow:none !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
#view-app .builder .block-item:hover{
  background:var(--apple-fill) !important;
  transform:none !important;
  border-color:transparent !important;
}
#view-app .builder .block-item .bi-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#view-app .builder .block-item .bi-fav{
  width:28px;height:28px;padding:0;margin:0;
  border:none;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  color:var(--apple-ter,rgb(60,60,67,.4));
  opacity:0;
  cursor:pointer;
  flex:0 0 auto;
}
#view-app .builder .block-item:hover .bi-fav,
#view-app .builder .block-item .bi-fav.on,
#view-app .builder .block-item.is-fav .bi-fav{
  opacity:1;
}
#view-app .builder .block-item .bi-fav:hover{
  background:rgba(0,0,0,.05);
  color:var(--apple-ink,#1d1d1f);
}
#view-app .builder .block-item .bi-fav.on,
#view-app .builder .block-item .bi-fav.on svg.lucide{
  color:#f5a524;
}
#view-app .builder .block-item .bi-fav.on svg.lucide{
  fill:#f5a524;
}
#view-app .builder .block-item .bi-fav svg.lucide{width:14px;height:14px}
#view-app .builder .lib-fav-empty{
  margin:0;
  padding:6px 4px 2px;
  font-size:12px;
  line-height:1.45;
  color:var(--apple-sec,rgb(60,60,67,.56));
}
#view-app .builder .lib-new-custom{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;
  margin:0 0 6px;
  padding:8px 10px;
  border:1px dashed color-mix(in srgb,var(--color-tint,#355cff) 35%,transparent);
  border-radius:10px;
  background:color-mix(in srgb,var(--color-tint,#355cff) 6%,transparent);
  color:var(--color-tint,#355cff);
  font-size:12.5px;font-weight:600;
  letter-spacing:-.015em;
  cursor:pointer;
}
#view-app .builder .lib-new-custom:hover{
  background:color-mix(in srgb,var(--color-tint,#355cff) 12%,transparent);
}
#view-app .builder .lib-new-custom svg.lucide{width:14px;height:14px}
#view-app .builder .block-item .bi-meta{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:500;
  color:var(--apple-ter,rgb(60,60,67,.4));
  letter-spacing:-.01em;
  max-width:72px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* */
.cmp-modal .cmp-field label{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.cmp-modal .cmp-count{
  font-size:12px;font-weight:500;
  color:var(--apple-sec,rgb(60,60,67,.56));
}
.cmp-modal .cmp-parts{
  display:flex;flex-direction:column;gap:8px;
  margin:0 0 10px;
}
.cmp-modal .cmp-picked-empty{
  font-size:12.5px;
  color:var(--apple-sec,rgb(60,60,67,.56));
  padding:10px 8px;
  border-radius:12px;
  background:var(--apple-fill,#f5f5f7);
}
.cmp-modal .cmp-part{
  border-radius:14px;
  background:var(--apple-fill,#f5f5f7);
  overflow:hidden;
}
.cmp-modal .cmp-part.open{
  background:color-mix(in srgb,var(--color-tint,#355cff) 6%,var(--apple-fill,#f5f5f7));
}
.cmp-modal .cmp-part-bar{
  position:relative;
  display:flex;align-items:center;gap:4px;
  padding:4px;
  border-radius:12px;
}
.cmp-modal .cmp-part-toggle{
  position:relative;
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:none;border-radius:12px;
  background:rgba(255,255,255,.88);
  color:var(--apple-ink,#1d1d1f);
  text-align:left;
  cursor:pointer;
  box-shadow:0 0 0 .5px rgba(0,0,0,.04);
  z-index:1;
}
.cmp-modal .cmp-part.open .cmp-part-toggle{
  background:rgba(255,255,255,.72);
}
.cmp-modal .cmp-part-toggle:hover{background:rgba(255,255,255,.95)}
.cmp-modal .cmp-part-meta{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;gap:1px;
}
.cmp-modal .cmp-part-meta strong{
  font-size:13.5px;font-weight:600;letter-spacing:-.015em;
}
.cmp-modal .cmp-part-meta em{
  font-style:normal;font-size:11.5px;font-weight:500;
  color:var(--apple-sec,rgb(60,60,67,.56));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cmp-modal .cmp-part-meta em.muted{opacity:.72}
.cmp-modal .cmp-part-chev{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--apple-ter,rgb(60,60,67,.4));
}
.cmp-modal .cmp-part-chev svg.lucide{width:14px;height:14px}
.cmp-modal .cmp-part-acts{
  position:relative;
  z-index:1;
  display:flex;align-items:center;gap:2px;
  flex:0 0 auto;padding-right:2px;
}
.cmp-modal .cmp-part-hint{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(1px) saturate(120%);
  backdrop-filter:blur(1px) saturate(120%);
  font-size:13px;font-weight:650;
  letter-spacing:-.02em;
  color:var(--color-tint,#355cff);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  opacity:0;
  transition:opacity .14s ease;
  pointer-events:none;
}
.cmp-modal .cmp-part-bar:hover .cmp-part-hint,
.cmp-modal .cmp-part-bar:focus-within .cmp-part-toggle:focus-visible ~ .cmp-part-hint{
  opacity:1;
}
.cmp-modal .cmp-part.open .cmp-part-hint{
  color:var(--apple-ink,#1d1d1f);
  background:rgba(255,255,255,.08);
}
.cmp-modal .cmp-part-done{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  align-self:stretch;
  margin-top:4px;
  padding:9px 12px;
  border:none;
  border-radius:10px;
  background:rgba(118,118,128,.12);
  color:var(--apple-ink,#1d1d1f);
  font:inherit;
  font-size:12.5px;font-weight:600;
  letter-spacing:-.015em;
  cursor:pointer;
}
.cmp-modal .cmp-part-done:hover{
  background:rgba(118,118,128,.18);
}
.cmp-modal .cmp-part-done svg.lucide{width:14px;height:14px}
.cmp-modal .cmp-ico{
  width:28px;height:28px;padding:0;
  border:none;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  color:var(--apple-sec,rgb(60,60,67,.56));
  cursor:pointer;
}
.cmp-modal .cmp-ico:hover{background:rgba(0,0,0,.05);color:var(--apple-ink,#1d1d1f)}
.cmp-modal .cmp-ico:disabled{opacity:.28;pointer-events:none}
.cmp-modal .cmp-ico.danger:hover{background:rgba(255,59,48,.1);color:#ff3b30}
.cmp-modal .cmp-ico svg.lucide{width:14px;height:14px}
.cmp-modal .cmp-part-body{
  padding:4px 12px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.cmp-modal .cmp-part-body[hidden]{display:none !important}
.cmp-modal .cmp-part-empty{
  margin:0;font-size:12.5px;
  color:var(--apple-sec,rgb(60,60,67,.56));
}
.cmp-modal .cmp-part-body .field{margin:0}
.cmp-modal .cmp-add-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;
  margin:0 0 10px;
  padding:9px 10px;
  border:1px dashed color-mix(in srgb,var(--color-tint,#355cff) 35%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--color-tint,#355cff) 6%,transparent);
  color:var(--color-tint,#355cff);
  font-size:12.5px;font-weight:600;
  letter-spacing:-.015em;
  cursor:pointer;
}
.cmp-modal .cmp-add-btn:hover,
.cmp-modal .cmp-add-btn.on{
  background:color-mix(in srgb,var(--color-tint,#355cff) 12%,transparent);
}
.cmp-modal .cmp-add-btn svg.lucide{width:14px;height:14px}
.cmp-modal .cmp-picker{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  margin-bottom:4px;
}
.cmp-modal .cmp-search{
  width:100%;
  border:none !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
  border-radius:0 !important;
  padding:10px 12px !important;
  font-size:13px !important;
  background:transparent !important;
  box-shadow:none !important;
}
.cmp-modal .cmp-search:focus{
  outline:none !important;
  background:var(--apple-fill,#f5f5f7) !important;
}
.cmp-modal .cmp-list{
  max-height:min(260px,36vh);
  overflow:auto;
  padding:6px;
}
.cmp-modal .cmp-group{margin-bottom:6px}
.cmp-modal .cmp-g-head{
  padding:6px 8px 4px;
  font-size:11px;font-weight:650;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--apple-ter,rgb(60,60,67,.4));
}
.cmp-modal .cmp-g-body{
  display:flex;flex-direction:column;gap:2px;
}
.cmp-modal .cmp-opt{
  display:flex;align-items:center;gap:10px;
  width:100%;
  padding:8px 10px;
  border:none;border-radius:10px;
  background:transparent;
  color:var(--apple-ink,#1d1d1f);
  text-align:left;
  cursor:pointer;
}
.cmp-modal .cmp-opt:hover{background:var(--apple-fill,#f5f5f7)}
.cmp-modal .cmp-opt.on{
  background:color-mix(in srgb,var(--color-tint,#355cff) 10%,transparent);
}
.cmp-modal .cmp-opt-name{
  flex:1 1 auto;
  font-size:13.5px;font-weight:550;
  letter-spacing:-.015em;
}
.cmp-modal .cmp-opt-check{
  width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--color-tint,#355cff);
  font-size:11px;font-weight:700;
}
.cmp-modal .cmp-opt-check em{font-style:normal}
.cmp-modal .cmp-opt-check svg.lucide{width:14px;height:14px}
.cmp-modal .cmp-empty{
  margin:0;padding:16px 8px;
  text-align:center;font-size:13px;
  color:var(--apple-sec,rgb(60,60,67,.56));
}
.cmp-modal .bi-icon{
  --lib-cat:#8e8e93;
  width:28px;height:28px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  background:color-mix(in srgb,var(--lib-cat) 14%,transparent);
  color:var(--lib-cat);
  box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--lib-cat) 18%,transparent);
}
.cmp-modal .bi-icon svg.lucide{width:15px;height:15px;stroke:currentColor;color:inherit}
.cmp-modal .bi-icon[data-cat="structure"]{ --lib-cat:#0ea5e9; }
.cmp-modal .bi-icon[data-cat="content"]{ --lib-cat:#8b5cf6; }
.cmp-modal .bi-icon[data-cat="media"]{ --lib-cat:#ec4899; }
.cmp-modal .bi-icon[data-cat="social"]{ --lib-cat:#f59e0b; }
.cmp-modal .bi-icon[data-cat="conversion"]{ --lib-cat:#10b981; }
.cmp-modal .bi-icon[data-cat="brand"]{ --lib-cat:#355cff; }
.cmp-modal .bi-icon[data-cat="blog"]{ --lib-cat:#94a3b8; }
.cmp-modal .bi-icon[data-cat="custom"]{ --lib-cat:#f43f5e; }
html[data-theme="dark"] .cmp-modal .cmp-picker,
html[data-hig-theme*="dark"] .cmp-modal .cmp-picker{
  background:rgba(44,44,46,.96);
  border-color:rgba(255,255,255,.1);
}
html[data-theme="dark"] .cmp-modal .cmp-part-toggle,
html[data-hig-theme*="dark"] .cmp-modal .cmp-part-toggle{
  background:rgba(58,58,60,.9);
  box-shadow:0 0 0 .5px rgba(255,255,255,.08);
}
html[data-theme="dark"] .cmp-modal .cmp-part-toggle:hover,
html[data-hig-theme*="dark"] .cmp-modal .cmp-part-toggle:hover{
  background:rgba(72,72,74,.95);
}
html[data-theme="dark"] .cmp-modal .cmp-part-hint,
html[data-hig-theme*="dark"] .cmp-modal .cmp-part-hint{
  background:rgba(20,20,22,.28);
  color:#9ec1ff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
html[data-theme="dark"] .cmp-modal .cmp-part.open .cmp-part-hint,
html[data-hig-theme*="dark"] .cmp-modal .cmp-part.open .cmp-part-hint{
  color:#f5f5f7;
  background:rgba(20,20,22,.22);
}
#view-app .builder .bi-icon{
  --lib-cat:#8e8e93;
  width:28px !important;height:28px !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  border:none !important;
  background:color-mix(in srgb,var(--lib-cat) 14%,transparent) !important;
  color:var(--lib-cat) !important;
  box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--lib-cat) 18%,transparent);
}
#view-app .builder .bi-icon svg.lucide{
  width:15px !important;height:15px !important;
  stroke:currentColor !important;
  color:inherit !important;
}
#view-app .builder .bi-icon[data-cat="structure"],
#view-app .builder .block-item[data-cat="structure"] .bi-icon,
#view-app .builder .lib-sug-row[data-cat="structure"] .bi-icon{ --lib-cat:#0ea5e9; }
#view-app .builder .bi-icon[data-cat="content"],
#view-app .builder .block-item[data-cat="content"] .bi-icon,
#view-app .builder .lib-sug-row[data-cat="content"] .bi-icon{ --lib-cat:#8b5cf6; }
#view-app .builder .bi-icon[data-cat="media"],
#view-app .builder .block-item[data-cat="media"] .bi-icon,
#view-app .builder .lib-sug-row[data-cat="media"] .bi-icon{ --lib-cat:#ec4899; }
#view-app .builder .bi-icon[data-cat="social"],
#view-app .builder .block-item[data-cat="social"] .bi-icon,
#view-app .builder .lib-sug-row[data-cat="social"] .bi-icon{ --lib-cat:#f59e0b; }
#view-app .builder .bi-icon[data-cat="conversion"],
#view-app .builder .block-item[data-cat="conversion"] .bi-icon,
#view-app .builder .lib-sug-row[data-cat="conversion"] .bi-icon{ --lib-cat:#10b981; }
#view-app .builder .bi-icon[data-cat="brand"],
#view-app .builder .block-item[data-cat="brand"] .bi-icon,
#view-app .builder .lib-sug-row[data-cat="brand"] .bi-icon{ --lib-cat:#355cff; }
#view-app .builder .bi-icon[data-cat="blog"],
#view-app .builder .block-item[data-cat="blog"] .bi-icon,
#view-app .builder .lib-sug-row[data-cat="blog"] .bi-icon{ --lib-cat:#94a3b8; }
#view-app .builder .bi-icon[data-cat="custom"],
#view-app .builder .block-item[data-cat="custom"] .bi-icon{ --lib-cat:#f43f5e; }
#view-app .builder .bi-icon[data-cat="favorites"],
#view-app .builder .block-item[data-cat="favorites"] .bi-icon{ --lib-cat:#f5a524; }
#view-app .builder .bi-icon[data-cat="recent"],
#view-app .builder .block-item[data-cat="recent"] .bi-icon{ --lib-cat:#14b8a6; }
html[data-theme="dark"] #view-app .builder .bi-icon,
html[data-hig-theme*="dark"] #view-app .builder .bi-icon{
  background:color-mix(in srgb,var(--lib-cat) 22%,transparent) !important;
  box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--lib-cat) 28%,transparent);
  filter:saturate(1.08) brightness(1.08);
}
#view-app .builder .panel-tip{
  font-size:12px !important;
  color:var(--apple-sec) !important;
  padding:10px 6px 0 !important;
  line-height:1.45 !important;
}

/* Layers / pages rows */
#view-app .builder .layer,
#view-app .builder .pg-row{
  border-radius:10px !important;
  padding:9px 10px !important;
  font-size:13px !important;
  margin-bottom:2px !important;
}
#view-app .builder .layer.sel,
#view-app .builder .pg-row.on{
  background:color-mix(in srgb,var(--color-tint,#355cff) 10%,transparent) !important;
  border-color:transparent !important;
  color:var(--apple-ink) !important;
}

/* */
#view-app .builder .canvas-wrap,
#view-app .builder.immersive .canvas-wrap{
  background-color:var(--color-bg-grouped,#f5f5f7) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%,color-mix(in srgb,var(--color-tint,#355cff) 8%,transparent),transparent 55%) !important;
  background-size:auto !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  padding:56px 12px 72px !important;
}
#view-app .builder .page-frame{
  max-width:100%;
  border-radius:16px !important;
  overflow:hidden !important;
}
#view-app .builder .page-chrome{
  height:38px !important;
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(20px) saturate(160%) !important;
  backdrop-filter:blur(20px) saturate(160%) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  border-bottom:none !important;
  border-radius:16px 16px 0 0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
#view-app .builder .page-chrome span{
  font-size:11.5px !important;
  /* Pin to dark ink — chrome bar stays light; dark --apple-sec washes out */
  color:rgba(60,60,67,.72) !important;
  letter-spacing:-.01em;
}
html[data-theme="dark"] #view-app .builder .page-chrome,
html[data-hig-theme*="dark"] #view-app .builder .page-chrome{
  background:rgba(44,44,46,.92) !important;
  border-color:rgba(255,255,255,.1) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] #view-app .builder .page-chrome span,
html[data-hig-theme*="dark"] #view-app .builder .page-chrome span{
  color:rgba(235,235,245,.72) !important;
}
/* */
body:not(.builder-preview):not(.builder-live) #view-app .builder .page-sheet,
body:not(.builder-preview):not(.builder-live) #view-app .builder .page-frame .page-sheet{
  border:1px solid rgba(0,0,0,.06) !important;
  border-top:none !important;
  border-radius:0 0 16px 16px !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 24px 64px rgba(0,0,0,.1) !important;
  background:#fff !important;
  background-image:none !important;
}
html[data-theme="dark"] body:not(.builder-preview):not(.builder-live) #view-app .builder .page-sheet,
html[data-theme="dark"] body:not(.builder-preview):not(.builder-live) #view-app .builder .page-frame .page-sheet{
  background:rgba(28,28,30,.92) !important;
  border-color:rgba(255,255,255,.08) !important;
}

/* Wireframe cards */
#view-app .builder .bw-card{
  margin:14px 18px !important;
  min-height:92px !important;
  border:none !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.04),
    0 8px 28px rgba(0,0,0,.06) !important;
  overflow:hidden;
  transition:box-shadow .2s ease,transform .2s ease,opacity .15s ease;
  display:flex !important;
  align-items:stretch !important;
  position:relative;
}
#view-app .builder .bw-card.dragging{
  opacity:.55 !important;
  box-shadow:0 0 0 2px var(--color-tint,#355cff) !important;
}
#view-app .builder .bw-card .bw-grip{
  flex:0 0 40px;
  width:40px;
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  color:var(--apple-ter,rgb(60,60,67,.4));
  cursor:grab;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  position:relative;
  z-index:2;
}
#view-app .builder .bw-card .bw-grip:hover{
  color:var(--color-tint,#355cff);
  background:color-mix(in srgb,var(--color-tint,#355cff) 8%,transparent);
}
#view-app .builder .bw-card .bw-grip:active{cursor:grabbing}
#view-app .builder .bw-card .bw-grip svg.lucide{
  width:16px;height:16px;
}
#view-app .builder .bw-card:hover{
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.06),
    0 14px 36px rgba(0,0,0,.09) !important;
}
#view-app .builder .bw-card::before{
  top:16px !important;bottom:16px !important;
  left:40px !important;
  width:3px !important;
  border-radius:999px !important;
  background:var(--color-tint,#355cff) !important;
  opacity:.85;
}
#view-app .builder .bw-card.shared-blk::before{
  background:rgba(60,60,67,.35) !important;
}
#view-app .builder .bw-card .bw-inner{padding:20px 22px 20px 16px !important;flex:1;min-width:0}
#view-app .builder .bw-card .bw-icon{
  width:42px !important;height:42px !important;
  border-radius:12px !important;
  background:color-mix(in srgb,var(--color-tint,#355cff) 10%,transparent) !important;
  color:var(--color-tint,#355cff) !important;
}
#view-app .builder .bw-card .bw-meta strong{
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
}
#view-app .builder .bw-card .bw-meta em{
  font-size:12.5px !important;
  color:var(--apple-sec) !important;
  margin-top:3px !important;
}
html[data-theme="dark"] #view-app .builder .bw-card{
  background:rgba(44,44,46,.92) !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.08),
    0 8px 28px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] #view-app .builder .bw-card:hover{
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.12),
    0 14px 36px rgba(0,0,0,.36) !important;
}
html[data-theme="dark"] #view-app .builder .bw-card.shared-blk::before{
  background:rgba(235,235,245,.35) !important;
}
#view-app .builder .blk.selected{
  outline:2px solid color-mix(in srgb,var(--color-tint,#355cff) 55%,transparent) !important;
  outline-offset:3px !important;
  border-radius:2px;
}
#view-app .builder .bw-card.selected{
  outline-offset:4px !important;
  border-radius:18px !important;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.04),
    0 8px 28px rgba(0,0,0,.06),
    0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 18%,transparent) !important;
}
#view-app .builder .bw-card .blk-label,
#view-app .builder .bw-card .blk-tools{
  display:none !important;
}
#view-app .builder .blk:hover:not(.selected){
  outline:1.5px dashed color-mix(in srgb,var(--color-tint,#355cff) 35%,transparent) !important;
  outline-offset:2px !important;
}

/* */
#view-app .builder .blk-label{
  top:10px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%);
  display:none;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:-.015em !important;
  text-align:center !important;
  text-transform:none !important;
  background:rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
  backdrop-filter:blur(20px) saturate(180%) !important;
  color:var(--apple-ink,#1d1d1f) !important;
  border-radius:980px !important;
  padding:5px 12px !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 6px 18px rgba(0,0,0,.1) !important;
  z-index:6;
}
#view-app .builder .blk.selected .blk-label,
#view-app .builder.hover-labels .blk:hover .blk-label{
  display:block !important;
}
#view-app .builder .blk.shared-blk .blk-label{
  display:block !important;
  color:var(--apple-sec) !important;
}
#view-app .builder .blk-label code{
  font-size:10px !important;
  opacity:.7;
  text-transform:none !important;
}
#view-app .builder .blk-tools{
  top:10px !important;
  right:10px !important;
  display:none;
  gap:1px !important;
  align-items:center;
  padding:3px !important;
  border-radius:980px !important;
  z-index:120;
  background:rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
  backdrop-filter:blur(20px) saturate(180%) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 24px rgba(0,0,0,.12) !important;
}
#view-app .builder .blk:hover .blk-tools,
#view-app .builder .blk.selected .blk-tools{
  display:flex !important;
}
#view-app .builder .blk-tools button{
  width:28px !important;
  height:28px !important;
  border-radius:980px !important;
  color:var(--apple-ink,#1d1d1f) !important;
  background:transparent !important;
  border:none !important;
  cursor:pointer;
}
#view-app .builder .blk-tools button svg.lucide{
  width:14px !important;
  height:14px !important;
  stroke:currentColor !important;
  stroke-width:1.85 !important;
}
#view-app .builder .blk-tools button:hover{
  background:rgba(0,0,0,.06) !important;
}
#view-app .builder .blk-tools .grip{
  color:var(--apple-sec) !important;
  cursor:grab;
}
#view-app .builder .blk-tools .grip:active{cursor:grabbing}
#view-app .builder .blk.dragging{
  opacity:.55;
  outline:2px solid var(--color-tint,#355cff) !important;
}


/* Drop lines — drag targets only; no between-section + button */
#view-app .builder .drop-line,
body.builder-live .drop-line{
  display:block !important;
  height:8px !important;
  margin:0 !important;
  opacity:1;
  pointer-events:auto;
  position:relative;
}
#view-app .builder .drop-line:hover,
body.builder-live .drop-line:hover{
  height:8px !important;
  opacity:1;
}
#view-app .builder .drop-line.on,
body.builder-live .drop-line.on{
  height:16px !important;
}
#view-app .builder .drop-line::after,
body.builder-live .drop-line::after{
  left:16px !important;
  right:16px !important;
  height:2px !important;
  border-radius:999px !important;
  background:var(--color-tint,#355cff) !important;
  box-shadow:none !important;
  opacity:0 !important;
}
#view-app .builder .drop-line.on::after,
body.builder-live .drop-line.on::after{
  opacity:1 !important;
}
#view-app .builder .drop-line .ins,
body.builder-live .drop-line .ins{
  display:none !important;
}
/* */
#view-app .builder .lib-chips{
  display:flex;
  flex-wrap:nowrap;
  gap:6px !important;
  margin-bottom:12px !important;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}
#view-app .builder .lib-chips::-webkit-scrollbar{display:none}
#view-app .builder .chip-btn,
#view-app .builder .bp-chip{
  appearance:none;
  border:none !important;
  border-radius:980px !important;
  padding:5px 12px !important;
  font-size:12px !important;
  font-weight:550 !important;
  letter-spacing:-.01em !important;
  color:var(--apple-sec) !important;
  background:var(--apple-fill) !important;
  box-shadow:none !important;
  transition:background .14s ease, color .14s ease;
}
#view-app .builder .chip-btn:hover,
#view-app .builder .bp-chip:hover{
  color:var(--apple-ink) !important;
  background:var(--apple-fill-2) !important;
  border-color:transparent !important;
}
#view-app .builder .chip-btn.on,
#view-app .builder .bp-chip.on{
  color:var(--color-tint,#355cff) !important;
  background:color-mix(in srgb,var(--color-tint,#355cff) 12%,transparent) !important;
  border-color:transparent !important;
  font-weight:600 !important;
}

/* Inspector — panel clips rounded; pane scrolls */
#view-app .builder #inspector,
#view-app .builder #inspector.insp-tabbed,
#view-app #inspector.liquid-glass{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:22px !important;
}
#view-app .builder #inspector.insp-tabbed{
  padding-bottom:12px !important;
}
#view-app .builder #inspector .insp-chrome{
  flex:0 0 auto;
  position:sticky;
  top:0;
  z-index:6;
  margin:0 0 10px !important;
  padding:0 2px 12px !important;
  /* Never paint a square dark slab over the rounded panel corners */
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:none;
  box-shadow:inset 0 -1px 0 var(--apple-hairline);
  border-radius:0 !important;
}
#view-app .builder #inspector .insp-tabs,
body.builder-live #inspector .insp-tabs,
body.builder-live #inspector .insp-tabs--live{
  display:flex !important;
  align-items:center !important;
  gap:2px !important;
  padding:3px !important;
  min-height:34px !important;
  border-radius:9999px !important;
  background:rgba(120,120,128,.14) !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  /* visible so pill thumbs are not clipped into square surrounds */
  overflow:visible !important;
}
html[data-theme="dark"] #view-app .builder #inspector .insp-tabs,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-tabs,
html[data-theme="dark"] body.builder-live #inspector .insp-tabs,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-tabs,
html[data-theme="dark"] body.builder-live #inspector .insp-tabs--live,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-tabs--live{
  background:rgba(118,118,128,.28) !important;
}
#view-app .builder #inspector .insp-tab,
body.builder-live #inspector .insp-tab,
body.builder-live #inspector .insp-tabs--live .insp-tab{
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;
  border:0 !important;
  outline:none !important;
  border-radius:9999px !important;
  padding:0 14px !important;
  min-height:28px !important;
  height:28px !important;
  font:inherit !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:-.015em !important;
  text-align:center !important;
  color:var(--apple-sec) !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:color .16s ease, background .16s ease, box-shadow .16s ease;
}
#view-app .builder #inspector .insp-tab:focus,
body.builder-live #inspector .insp-tab:focus,
#view-app .builder #inspector .insp-tab:focus-visible,
body.builder-live #inspector .insp-tab:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
#view-app .builder #inspector .insp-tab:hover,
body.builder-live #inspector .insp-tab:hover{
  color:var(--apple-ink,#1d1d1f) !important;
  background:var(--apple-seg-hover) !important;
  box-shadow:none !important;
}
#view-app .builder #inspector .insp-tab.on,
body.builder-live #inspector .insp-tab.on,
body.builder-live #inspector .insp-tabs--live .insp-tab.on{
  color:var(--apple-ink,#1d1d1f) !important;
  font-weight:600 !important;
  background:var(--apple-seg-thumb) !important;
  border-radius:9999px !important;
  /* pill hairline — never a square outline/ring */
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.06),
    0 1px 2px rgba(0,0,0,.06) !important;
}
html[data-theme="dark"] #view-app .builder #inspector .insp-tab.on,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-tab.on,
html[data-theme="dark"] body.builder-live #inspector .insp-tab.on,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-tab.on,
html[data-theme="dark"] body.builder-live #inspector .insp-tabs--live .insp-tab.on,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-tabs--live .insp-tab.on{
  background:rgba(99,99,102,.92) !important;
  color:#f5f5f7 !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.14),
    0 1px 3px rgba(0,0,0,.35) !important;
}
#view-app .builder #inspector .insp-pane{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  padding:2px 2px 24px;
}
#view-app .builder #inspector .insp-pane-label{
  margin:0 0 12px;
  font-size:13px;
  font-weight:650;
  letter-spacing:-.01em;
  color:var(--apple-sec);
}
#view-app .builder #inspector .ds-panels,
body.builder-live #inspector .ds-panels{
  display:flex !important;
  align-items:center !important;
  gap:1px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 14px !important;
  padding:3px !important;
  border-radius:980px !important;
  background:rgba(120,120,128,.14) !important;
  box-shadow:none !important;
/* */
  overflow:visible !important;
  box-sizing:border-box !important;
}
html[data-theme="dark"] #view-app .builder #inspector .ds-panels,
html[data-hig-theme*="dark"] #view-app .builder #inspector .ds-panels,
html[data-theme="dark"] body.builder-live #inspector .ds-panels,
html[data-hig-theme*="dark"] body.builder-live #inspector .ds-panels{
  background:rgba(118,118,128,.28) !important;
  box-shadow:none !important;
}
#view-app .builder #inspector .ds-panel-btn,
body.builder-live #inspector .ds-panel-btn{
  flex:1 1 0% !important;
  min-width:0 !important;
  max-width:none !important;
  width:0 !important; /* equal columns; label can ellipsize */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-radius:980px !important;
  padding:0 4px !important;
  min-height:30px !important;
  font:inherit !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:-.025em !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:var(--apple-sec) !important;
  background:transparent !important;
  cursor:pointer;
  transition:color .16s ease, background .16s ease, box-shadow .16s ease;
}
#view-app .builder #inspector .ds-panel-btn:hover,
body.builder-live #inspector .ds-panel-btn:hover{
  color:var(--apple-ink,#1d1d1f) !important;
  background:var(--apple-seg-hover) !important;
}
#view-app .builder #inspector .ds-panel-btn.on,
body.builder-live #inspector .ds-panel-btn.on{
  color:var(--apple-ink,#1d1d1f) !important;
  font-weight:600 !important;
  background:var(--apple-seg-thumb) !important;
  box-shadow:var(--apple-seg-thumb-shadow) !important;
}
html[data-theme="dark"] #view-app .builder #inspector .ds-panel-btn.on,
html[data-hig-theme*="dark"] #view-app .builder #inspector .ds-panel-btn.on,
html[data-theme="dark"] body.builder-live #inspector .ds-panel-btn.on,
html[data-hig-theme*="dark"] body.builder-live #inspector .ds-panel-btn.on{
  background:rgba(99,99,102,.78) !important;
  color:#f5f5f7 !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.08),
    0 2px 8px rgba(0,0,0,.35) !important;
}
#view-app .builder #inspector .ds-panel-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}
#view-app .builder #inspector .ds-token-body--panels{
  gap:0 !important;
}
/* Soft elevated token card */
#view-app .builder #inspector .ds-token-body--panels .ds-group{
  margin:0 !important;
  padding:0 !important;
  border-radius:16px !important;
  overflow:visible !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.04),
    0 1px 2px rgba(0,0,0,.03),
    0 8px 24px rgba(0,0,0,.05) !important;
}
html[data-theme="dark"] #view-app .builder #inspector .ds-token-body--panels .ds-group,
html[data-hig-theme*="dark"] #view-app .builder #inspector .ds-token-body--panels .ds-group{
  background:rgba(44,44,46,.78) !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.08),
    0 8px 24px rgba(0,0,0,.28) !important;
}
#view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row{
  background:transparent !important;
  border-bottom:.5px solid rgba(60,60,67,.1) !important;
  padding:14px 16px !important;
  min-height:56px !important;
  gap:14px !important;
}
#view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row--color{
  flex-direction:column !important;
  align-items:stretch !important;
  min-height:0 !important;
  height:auto !important;
  padding:14px !important;
  gap:12px !important;
  overflow:visible !important;
}
#view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row--color > label{
  flex:none !important;
  width:100% !important;
  padding-right:0 !important;
}
#view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row--color .ds-color-stack{
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}
#view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row:last-of-type{
  border-bottom:none !important;
}
html[data-theme="dark"] #view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row,
html[data-hig-theme*="dark"] #view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row{
  border-bottom-color:rgba(84,84,88,.5) !important;
}
#view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row > label{
  font-size:15px !important;
  font-weight:400 !important;
  letter-spacing:-.01em !important;
  color:var(--apple-ink,#1d1d1f) !important;
  padding-right:8px !important;
}
#view-app .builder #inspector .insp-group{
  border:none !important;
  border-radius:14px !important;
  margin-bottom:8px !important;
  background:rgba(255,255,255,.55) !important;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.04),
    0 4px 14px rgba(0,0,0,.04) !important;
  overflow:visible !important;
}
html[data-theme="dark"] #view-app .builder #inspector .insp-group,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-group{
  background:rgba(120,120,128,.16) !important;
  box-shadow:0 0 0 .5px rgba(255,255,255,.06) !important;
}
#view-app .builder #inspector .insp-group .ig-head{
  padding:11px 13px !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  border-radius:14px;
}
#view-app .builder #inspector .insp-group .ig-head:hover{
  background:rgba(118,118,128,.08) !important;
}
#view-app .builder #inspector .insp-group .ig-body{
  padding:2px 12px 14px !important;
  overflow:visible !important;
}
#view-app .builder #inspector .inspector-empty{
  display:flex;flex-direction:column;gap:5px;
  padding:4px 2px 12px;
  text-align:left;
  font-size:13px !important;
  line-height:1.45 !important;
  color:var(--apple-sec) !important;
}
#view-app .builder #inspector .inspector-empty--compact{
  padding-bottom:10px;
}
#view-app .builder #inspector .inspector-empty strong{
  font-size:15px;font-weight:700;letter-spacing:-.025em;
  color:var(--apple-ink,#1d1d1f);
}
#view-app .builder #inspector .inspector-empty p{
  margin:0;font-size:12.5px;line-height:1.45;
  color:var(--apple-sec,rgb(60,60,67,.56));
  max-width:34ch;
}
#view-app .builder .canvas-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:48px 28px;gap:8px;
  color:var(--apple-sec);
}
#view-app .builder .canvas-empty h3{
  margin:0;font-size:18px;font-weight:650;letter-spacing:-.03em;
  color:var(--apple-ink,#1d1d1f);
}
#view-app .builder .canvas-empty p{
  margin:0 0 8px;max-width:36ch;font-size:13.5px;line-height:1.45;
}
#view-app .builder #inspector .insp-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:12px !important;
  padding:0 2px !important;
}
#view-app .builder #inspector .insp-head-main{
  min-width:0;flex:1 1 auto;
  display:flex;flex-direction:column;gap:2px;
}
#view-app .builder #inspector .insp-head .t{
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
  line-height:1.2 !important;
}
#view-app .builder #inspector .insp-head-sub{
  font-size:12px;
  font-weight:500;
  color:var(--apple-sec);
  letter-spacing:-.01em;
}
#view-app .builder #inspector .insp-head-acts{
  display:flex;align-items:center;gap:4px;flex:0 0 auto;
}
#view-app .builder #inspector .insp-ico,
body.builder-live #inspector .insp-ico{
  width:32px;height:32px;padding:0;
  border:none;border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(118,118,128,.12);
  color:var(--apple-ink,#1d1d1f);
  cursor:pointer;
}
#view-app .builder #inspector .insp-ico:hover,
body.builder-live #inspector .insp-ico:hover{background:rgba(118,118,128,.2)}
#view-app .builder #inspector .insp-ico.danger:hover,
body.builder-live #inspector .insp-ico.danger:hover{
  background:rgba(255,59,48,.12);color:#ff3b30;
}
#view-app .builder #inspector .insp-ico svg.lucide{width:15px;height:15px}
#view-app .builder #inspector .insp-head .badge{
  margin-left:6px;
  font-size:10.5px;font-weight:650;
  padding:2px 7px;border-radius:980px;
  background:color-mix(in srgb,var(--color-tint,#355cff) 14%,transparent);
  color:var(--color-tint,#355cff);
  vertical-align:middle;
}
#view-app .builder #inspector .insp-subtabs{
  display:flex;
  gap:4px;
  margin-top:10px;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#view-app .builder #inspector .insp-sub{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:980px;
  padding:0 12px;
  min-height:30px;
  font:inherit;
  font-size:12.5px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.015em;
  text-align:center;
  color:var(--apple-sec);
  background:transparent;
  cursor:pointer;
}
#view-app .builder #inspector .insp-sub:hover{
  color:var(--apple-ink,#1d1d1f);
  background:var(--apple-seg-hover);
}
#view-app .builder #inspector .insp-sub.on{
  color:var(--apple-ink,#1d1d1f);
  font-weight:600;
  background:var(--apple-seg-thumb);
  box-shadow:var(--apple-seg-thumb-shadow);
}
html[data-theme="dark"] #view-app .builder #inspector .insp-sub.on,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-sub.on{
  background:rgba(99,99,102,.78);
  color:#f5f5f7;
}
#view-app .builder #inspector .insp-stack,
#view-app .builder #inspector .insp-seo-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.78);
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.04),
    0 1px 2px rgba(0,0,0,.03),
    0 8px 24px rgba(0,0,0,.05);
}
html[data-theme="dark"] #view-app .builder #inspector .insp-stack,
html[data-theme="dark"] #view-app .builder #inspector .insp-seo-card,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-stack,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-seo-card{
  background:rgba(44,44,46,.78);
  box-shadow:0 0 0 .5px rgba(255,255,255,.08);
}
#view-app .builder #inspector .insp-stack-label{
  margin:0;
  font-size:12px;
  font-weight:650;
  letter-spacing:-.01em;
  color:var(--apple-sec);
}
#view-app .builder #inspector .insp-empty-fields,
#view-app .builder #inspector .insp-banner{
  margin:0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--apple-sec);
}
#view-app .builder #inspector .insp-banner{
  padding:10px 12px;
  border-radius:12px;
  background:color-mix(in srgb,var(--color-tint,#355cff) 8%,transparent);
  color:var(--color-tint,#355cff);
  font-weight:550;
}
#view-app .builder #inspector .insp-stack .field,
#view-app .builder #inspector .insp-seo-card .field{
  margin:0 !important;
}
#view-app .builder #inspector .insp-stack .field > label,
#view-app .builder #inspector .insp-seo-card .field > label{
  font-size:12.5px !important;
  font-weight:550 !important;
  color:var(--apple-sec) !important;
  margin-bottom:6px !important;
}
#view-app .builder #inspector .insp-stack .field input:not(.bd-color-hex):not(.bd-color-hue),
#view-app .builder #inspector .insp-stack .field textarea,
#view-app .builder #inspector .insp-stack .field select,
#view-app .builder #inspector .insp-seo-card .field input,
#view-app .builder #inspector .insp-seo-card .field textarea,
#view-app .builder #inspector .insp-seo-card .field select{
  border:none !important;
  border-radius:10px !important;
  background:rgba(118,118,128,.12) !important;
  box-shadow:none !important;
  min-height:36px !important;
  padding:8px 12px !important;
  font-size:13.5px !important;
}
#view-app .builder #inspector .insp-stack .field input:focus,
#view-app .builder #inspector .insp-stack .field textarea:focus,
#view-app .builder #inspector .insp-seo-card .field input:focus,
#view-app .builder #inspector .insp-seo-card .field textarea:focus{
  outline:none !important;
  background:rgba(118,118,128,.18) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 16%,transparent) !important;
}
#view-app .builder #inspector .impact{
  font-size:12px !important;
  font-weight:500 !important;
  letter-spacing:-.01em !important;
  color:var(--color-tint,#355cff) !important;
  background:color-mix(in srgb,var(--color-tint,#355cff) 10%,transparent) !important;
  border:none !important;
  border-radius:10px !important;
  padding:8px 11px !important;
  margin-top:-4px !important;
  margin-bottom:12px !important;
}
#view-app .builder #inspector .insp-divider{
  height:1px;margin:18px 0;
  background:var(--apple-hairline);
  border:none;
}
#view-app .builder #inspector .ds-token-body{
  gap:22px !important;
}
#view-app .builder #inspector .ds-group-label{
  font-size:13px !important;
  font-weight:650 !important;
  letter-spacing:-.01em !important;
  margin-bottom:8px !important;
  color:var(--apple-sec) !important;
}
#view-app .builder #inspector .field > label{
  font-size:12.5px !important;
  font-weight:550 !important;
  color:var(--apple-sec) !important;
  margin-bottom:6px !important;
}
#view-app .builder #inspector .field input:not(.bd-color-hex):not(.bd-color-hue),
#view-app .builder #inspector .field textarea,
#view-app .builder #inspector .field select{
  border-radius:10px !important;
  border:none !important;
  background:var(--apple-fill) !important;
  box-shadow:none !important;
}
#view-app .builder #inspector .hint,
#view-app .builder #inspector .panel-tip{
  color:var(--apple-sec) !important;
  font-size:12px !important;
}

/* Portaled colour pop above builder chrome */
body.builder-immersive .bd-color-pop{
  z-index:15000 !important;
}

/* Pill popovers must sit above the floating toolbar (z-index 9000) */
body.builder-immersive #ctx-menu,
#ctx-menu{
  z-index:10050 !important;
}
body.builder-live #ctx-menu{
  z-index:10070 !important;
}
body.builder-live #ctx-menu.ins-pal-menu,
#ctx-menu.ins-pal-menu{
  min-width:288px !important;
  width:min(308px,calc(100vw - 24px)) !important;
  max-width:min(308px,calc(100vw - 24px)) !important;
  border-radius:20px !important;
  padding:12px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(52px) saturate(200%) !important;
  backdrop-filter:blur(52px) saturate(200%) !important;
  border:1px solid rgba(255,255,255,.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 0 .5px rgba(255,255,255,.4),
    0 1px 2px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.08),
    0 28px 64px rgba(0,0,0,.14) !important;
}
html[data-theme="dark"] #ctx-menu.ins-pal-menu,
html[data-hig-theme*="dark"] #ctx-menu.ins-pal-menu{
  background:rgba(28,28,30,.72) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 0 .5px rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.35),
    0 16px 48px rgba(0,0,0,.5) !important;
}
#ctx-menu.ins-pal-menu .ins-pal{
  width:100% !important;
  max-height:min(440px,70vh) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  gap:10px;
}
#ctx-menu.ins-pal-menu .ip-search{
  flex:0 0 auto;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 12px !important;
  min-height:38px;
  border:none !important;
  border-radius:10px !important;
  background:rgba(118,118,128,.14) !important;
  color:rgba(60,60,67,.45) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06) !important;
  transition:background .16s ease, box-shadow .16s ease;
}
#ctx-menu.ins-pal-menu .ip-search:hover{
  background:rgba(118,118,128,.18) !important;
}
#ctx-menu.ins-pal-menu .ip-search:focus-within{
  border:none !important;
  background:#fff !important;
  color:var(--apple-ink,#1d1d1f) !important;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.06),
    0 1px 2px rgba(0,0,0,.04),
    0 6px 18px rgba(0,0,0,.08) !important;
}
#ctx-menu.ins-pal-menu .ip-search-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  opacity:.72;
}
#ctx-menu.ins-pal-menu .ip-search-ico svg.lucide{
  width:14px;height:14px;
  stroke-width:2.1;
}
#ctx-menu.ins-pal-menu .ip-search:focus-within .ip-search-ico{opacity:.95}
#ctx-menu.ins-pal-menu .ip-search input{
  flex:1 !important;
  min-width:0 !important;
  border:none !important;
  background:transparent !important;
  font:inherit !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  color:var(--apple-ink,#1d1d1f) !important;
  padding:8px 0 !important;
  outline:none !important;
  box-shadow:none !important;
}
#ctx-menu.ins-pal-menu .ip-search input::placeholder{
  color:var(--apple-sec,rgb(60,60,67,.42)) !important;
  font-weight:450 !important;
  opacity:1 !important;
}
#ctx-menu.ins-pal-menu .ip-search input::-webkit-search-decoration,
#ctx-menu.ins-pal-menu .ip-search input::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
}
html[data-theme="dark"] #ctx-menu.ins-pal-menu .ip-search,
html[data-hig-theme*="dark"] #ctx-menu.ins-pal-menu .ip-search{
  background:rgba(120,120,128,.28) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] #ctx-menu.ins-pal-menu .ip-search:focus-within,
html[data-hig-theme*="dark"] #ctx-menu.ins-pal-menu .ip-search:focus-within{
  background:rgba(58,58,60,.96) !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.1),
    0 6px 20px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] #ctx-menu.ins-pal-menu .ip-search input,
html[data-hig-theme*="dark"] #ctx-menu.ins-pal-menu .ip-search input{
  color:#f5f5f7 !important;
}
#ctx-menu.ins-pal-menu .ip-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  padding:2px 0;
  margin:0 -2px;
  padding-right:2px;
}
#ctx-menu.ins-pal-menu .ip-group{
  font-size:11px !important;
  font-weight:650 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  color:var(--apple-sec,rgb(60,60,67,.56)) !important;
  padding:10px 10px 4px !important;
}
#ctx-menu.ins-pal-menu .ip-group:first-child{padding-top:2px !important}
#ctx-menu.ins-pal-menu .ip-item{
  --lib-cat:#8e8e93;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  margin:1px 0 !important;
  padding:8px 10px !important;
  border:none !important;
  border-radius:12px !important;
  background:transparent !important;
  font:inherit !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  color:var(--apple-ink,#1d1d1f) !important;
  text-align:left !important;
  cursor:pointer;
  transition:background .12s ease;
}
#ctx-menu.ins-pal-menu .ip-item[data-cat="structure"]{ --lib-cat:#0ea5e9; }
#ctx-menu.ins-pal-menu .ip-item[data-cat="content"]{ --lib-cat:#8b5cf6; }
#ctx-menu.ins-pal-menu .ip-item[data-cat="media"]{ --lib-cat:#ec4899; }
#ctx-menu.ins-pal-menu .ip-item[data-cat="social"]{ --lib-cat:#f59e0b; }
#ctx-menu.ins-pal-menu .ip-item[data-cat="conversion"]{ --lib-cat:#10b981; }
#ctx-menu.ins-pal-menu .ip-item[data-cat="brand"]{ --lib-cat:#355cff; }
#ctx-menu.ins-pal-menu .ip-item[data-cat="blog"]{ --lib-cat:#94a3b8; }
#ctx-menu.ins-pal-menu .ip-item:hover,
#ctx-menu.ins-pal-menu .ip-item:focus-visible{
  outline:none !important;
  background:color-mix(in srgb,var(--lib-cat) 12%,transparent) !important;
}
#ctx-menu.ins-pal-menu .ip-item .bi-icon{
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  background:color-mix(in srgb,var(--lib-cat) 14%,transparent) !important;
  color:var(--lib-cat) !important;
  box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--lib-cat) 18%,transparent);
}
#ctx-menu.ins-pal-menu .ip-item .bi-icon svg.lucide{
  width:15px !important;
  height:15px !important;
  stroke:currentColor !important;
  color:inherit !important;
}
#ctx-menu.ins-pal-menu .ip-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#ctx-menu.ins-pal-menu .ip-none{
  margin:0 !important;
  padding:16px 12px !important;
  font-size:13px !important;
  text-align:center;
  color:var(--apple-sec,rgb(60,60,67,.56)) !important;
}
html[data-theme="dark"] #ctx-menu.ins-pal-menu .ip-item,
html[data-hig-theme*="dark"] #ctx-menu.ins-pal-menu .ip-item{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #ctx-menu.ins-pal-menu .ip-item .bi-icon,
html[data-hig-theme*="dark"] #ctx-menu.ins-pal-menu .ip-item .bi-icon{
  background:color-mix(in srgb,var(--lib-cat) 22%,transparent) !important;
  filter:saturate(1.08) brightness(1.08);
}
#ctx-menu[hidden]{
  display:none !important;
}

/* */
body.builder-live.builder-immersive #view-app .b-pill.liquid-glass,
body.builder-live #view-app .builder .b-pill.liquid-glass,
body.builder-live #view-app .page .builder .b-pill.liquid-glass,
body.builder-live #view-app .b-pill,
body.builder-live .b-pill{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}
body.builder-live .panel-left,
body.builder-live .debug-panel,
body.builder-live .mb-bar,
body.builder-live .mb-veil{
  display:none !important;
}
body.builder-live .b-body{
  display:block !important;
}
body.builder-live .canvas-wrap{
  padding:72px 0 64px !important;
  width:100% !important;
  max-width:none !important;
  background:var(--color-bg-grouped,#f2f2f7) !important;
  background-image:none !important;
  background-color:var(--color-bg-grouped,#f2f2f7) !important;
  overflow-x:hidden !important;
  overflow-anchor:none !important;
  overscroll-behavior:contain !important;
}
html[data-theme="dark"] body.builder-live .canvas-wrap,
html[data-hig-theme*="dark"] body.builder-live .canvas-wrap{
  background:#000 !important;
  background-color:#000 !important;
}
body.builder-live .page-frame{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  transform:none !important;
}
body.builder-live .page-chrome{
  display:none !important;
}
body.builder-live .page-sheet,
body.builder-live #view-app .builder .page-sheet,
body.builder-live #view-app .builder .page-frame .page-sheet{
  border:none !important;
  border-radius:0 !important;
  background-image:none !important;
  box-shadow:none !important;
  min-height:calc(100vh - 64px) !important;
  width:100% !important;
}
body.builder-preview .page-sheet,
body.builder-preview #view-app .builder .page-sheet,
body.builder-preview #view-app .builder .page-frame .page-sheet{
  background-image:none !important;
}
body.builder-live .blk-tools,
body.builder-live .blk-label,
body.builder-live .blk-hidden-stub{
  display:none !important;
}

body.builder-live .blk{
  outline:none !important;
  position:relative;
  transition:box-shadow .18s ease, outline-color .18s ease;
}
body.builder-live .blk:hover{
  outline:none !important;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--color-tint,#355cff) 38%,transparent) !important;
}
body.builder-live .blk.selected{
  outline:none !important;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb,var(--color-tint,#355cff) 85%,transparent),
    0 0 0 5px color-mix(in srgb,var(--color-tint,#355cff) 14%,transparent) !important;
  z-index:2;
  border-radius:2px;
}
body.builder-live [data-e]{
  cursor:text;
  transition:box-shadow .14s ease, background .14s ease;
  border-radius:6px;
}
body.builder-live [data-e]:hover{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 18%,transparent);
  background:color-mix(in srgb,var(--color-tint,#355cff) 6%,transparent);
}
body.builder-live [data-e].is-editing,
body.builder-live [data-e][contenteditable="true"]{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 55%,transparent) !important;
  background:color-mix(in srgb,var(--color-tint,#355cff) 8%,transparent);
  outline:none;
  caret-color:var(--color-tint,#355cff);
}

/* */
body.builder-live #view-app #inspector,
body.builder-live #inspector{
  display:flex !important;
  flex-direction:column;
  position:fixed !important;
  top:56px !important;
  right:12px !important;
  bottom:12px !important;
  left:auto !important;
  width:min(392px,calc(100vw - 28px)) !important;
  max-width:392px !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  flex:none !important;
  flex-basis:auto !important;
  z-index:10055 !important;
  border-radius:16px !important;
  border:1px solid rgba(0,0,0,.08) !important;
  background:rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter:blur(36px) saturate(190%) !important;
  backdrop-filter:blur(36px) saturate(190%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(0,0,0,.04),
    0 24px 64px rgba(0,0,0,.16) !important;
  transform:translate3d(calc(100% + 32px),0,0);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.85,.2,1),opacity .22s ease,visibility 0s linear .32s;
  overflow:hidden !important;
}
body.builder-live #view-app #inspector.insp-tabbed,
body.builder-live #inspector.insp-tabbed{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding-bottom:0 !important;
}
body.builder-live #view-app #inspector.live-open,
body.builder-live #inspector.live-open{
  transform:translate3d(0,0,0);
  opacity:1;
  pointer-events:auto;
  visibility:visible;
  transition:transform .32s cubic-bezier(.2,.85,.2,1),opacity .22s ease,visibility 0s linear 0s;
}
body.builder-live #inspector .insp-pane--live{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch;
}
html[data-theme="dark"] body.builder-live #inspector{
  background:rgba(36,36,38,.96) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 64px rgba(0,0,0,.5) !important;
}

body.builder-live #inspector .insp-chrome--live{
  margin:0 !important;
  padding:16px 16px 12px !important;
  box-shadow:inset 0 -1px 0 rgba(60,60,67,.1) !important;
  background:transparent !important;
}
body.builder-live #inspector .insp-head{
  align-items:center !important;
  gap:12px !important;
  margin-bottom:14px !important;
  padding:0 !important;
}
body.builder-live #inspector .insp-head-ico{
  flex:0 0 44px;
  width:44px;height:44px;
  border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--color-tint,#355cff) 12%,transparent);
  color:var(--color-tint,#355cff);
}
body.builder-live #inspector .insp-head-ico svg.lucide{
  width:20px;height:20px;
}
body.builder-live #inspector .insp-eyebrow{
  display:block;
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--apple-sec);
  margin-bottom:2px;
}
body.builder-live #inspector .insp-head .t{
  font-size:17px !important;
  font-weight:700 !important;
  letter-spacing:-.03em !important;
}
body.builder-live #inspector .insp-tabs--live{
  display:flex !important;
  align-items:center !important;
  gap:2px !important;
  padding:3px !important;
  min-height:34px !important;
  border-radius:9999px !important;
  background:rgba(118,118,128,.12) !important;
  box-shadow:none !important;
  overflow:visible !important;
}
body.builder-live #inspector .insp-tabs--live .insp-tab{
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:28px !important;
  height:28px !important;
  padding:0 12px !important;
  font-size:12.5px !important;
  border-radius:9999px !important;
  box-shadow:none !important;
}
body.builder-live #inspector .insp-tabs--live .insp-tab.on{
  background:var(--apple-seg-thumb,#fff) !important;
  border-radius:9999px !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body.builder-live #inspector .insp-tabs--live{
  background:rgba(118,118,128,.28) !important;
}
html[data-theme="dark"] body.builder-live #inspector .insp-tabs--live .insp-tab.on{
  background:rgba(99,99,102,.78) !important;
  color:#f5f5f7 !important;
  box-shadow:none !important;
}

body.builder-live #inspector .insp-pane--live{
  padding:14px 16px 12px !important;
}
body.builder-live #inspector .insp-live-tip{
  display:flex;align-items:flex-start;gap:8px;
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:12px;
  background:color-mix(in srgb,var(--color-tint,#355cff) 8%,transparent);
  color:var(--apple-sec);
  font-size:12.5px;
  line-height:1.4;
}
body.builder-live #inspector .insp-live-tip svg.lucide{
  flex:0 0 auto;width:14px;height:14px;margin-top:1px;
  color:var(--color-tint,#355cff);
}
body.builder-live #inspector .insp-stack--live{
  gap:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
body.builder-live #inspector .insp-stack--live .field--live,
body.builder-live #inspector .insp-seo-card .field--live{
  margin:0 0 10px !important;
  padding:12px 13px !important;
  border-radius:14px !important;
  background:rgba(118,118,128,.08) !important;
  border:1px solid transparent !important;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.builder-live #inspector .insp-stack--live .field--live:focus-within,
body.builder-live #inspector .insp-seo-card .field--live:focus-within{
  background:rgba(255,255,255,.92) !important;
  border-color:color-mix(in srgb,var(--color-tint,#355cff) 35%,transparent) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 14%,transparent) !important;
}
html[data-theme="dark"] body.builder-live #inspector .insp-stack--live .field--live,
html[data-theme="dark"] body.builder-live #inspector .insp-seo-card .field--live{
  background:rgba(118,118,128,.18) !important;
}
html[data-theme="dark"] body.builder-live #inspector .insp-stack--live .field--live:focus-within,
html[data-theme="dark"] body.builder-live #inspector .insp-seo-card .field--live:focus-within{
  background:rgba(44,44,46,.95) !important;
}
body.builder-live #inspector .insp-stack--live .field--live > label,
body.builder-live #inspector .insp-seo-card .field--live > label{
  margin:0 0 6px !important;
  font-size:11.5px !important;
  font-weight:650 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  color:var(--apple-sec) !important;
}
body.builder-live #inspector .insp-stack--live .field--live input,
body.builder-live #inspector .insp-stack--live .field--live textarea,
body.builder-live #inspector .insp-seo-card .field--live input,
body.builder-live #inspector .insp-seo-card .field--live textarea{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:24px !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  color:var(--apple-ink,#1d1d1f) !important;
}
body.builder-live #inspector .insp-stack--live .field--live input:focus,
body.builder-live #inspector .insp-stack--live .field--live textarea:focus,
body.builder-live #inspector .insp-seo-card .field--live input:focus,
body.builder-live #inspector .insp-seo-card .field--live textarea:focus{
  outline:none !important;
  box-shadow:none !important;
}

body.builder-live #inspector .insp-live-foot{
  flex:0 0 auto;
  display:flex;gap:8px;
  padding:12px 16px 16px;
  border-top:1px solid rgba(60,60,67,.1);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
html[data-theme="dark"] body.builder-live #inspector .insp-live-foot{
  background:rgba(28,28,30,.55);
  border-top-color:rgba(255,255,255,.1);
}
body.builder-live #inspector .insp-live-done,
body.builder-live #inspector .insp-live-save{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:0 14px;
  border:none;border-radius:12px;
  font-size:13.5px;font-weight:600;
  letter-spacing:-.015em;cursor:pointer;
}
body.builder-live #inspector .insp-live-done{
  background:var(--color-tint,#355cff);color:#fff;
}
body.builder-live #inspector .insp-live-done:hover{filter:brightness(1.05)}
body.builder-live #inspector .insp-live-save{
  background:rgba(118,118,128,.14);
  color:var(--apple-ink,#1d1d1f);
}
body.builder-live #inspector .insp-live-save:hover{background:rgba(118,118,128,.22)}
body.builder-live #inspector .insp-live-done svg.lucide,
body.builder-live #inspector .insp-live-save svg.lucide{
  width:14px;height:14px;
}
body.builder-live #inspector .insp-live-done svg.lucide{stroke:#fff}

/* */
body.builder-live button[data-e],
body.builder-live a[data-e],
body.builder-live [data-e].bd-btn,
body.builder-live form [data-e]{
  box-shadow:none !important;
  background-image:none !important;
}
body.builder-live button[data-e]:hover,
body.builder-live a[data-e]:hover,
body.builder-live form [data-e]:hover{
  box-shadow:0 0 0 2.5px color-mix(in srgb,var(--color-tint,#355cff) 55%,transparent) !important;
  background:inherit !important;
  background-color:inherit !important;
}
body.builder-live button[data-e].is-editing,
body.builder-live button[data-e][contenteditable="true"],
body.builder-live a[data-e].is-editing,
body.builder-live a[data-e][contenteditable="true"],
body.builder-live form [data-e].is-editing,
body.builder-live form [data-e][contenteditable="true"]{
  box-shadow:0 0 0 2.5px var(--color-tint,#355cff) !important;
  background:inherit !important;
}

.lsb-btn.on{
  background:var(--color-tint,#355cff) !important;
  color:#fff !important;
}
.lsb-btn.on svg.lucide{stroke:#fff}

/* Live top chrome */
.live-chrome{
  position:fixed !important;
  top:calc(12px + env(safe-area-inset-top,0px)) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:10060 !important;
  width:max-content;
  max-width:min(920px, calc(100vw - 24px));
  pointer-events:none;
}
.live-chrome[hidden]{display:none !important}
.live-chrome-inner{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  min-height:46px;
  max-width:100%;
  padding:5px 7px 5px 5px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(36px) saturate(190%);
  backdrop-filter:blur(36px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(0,0,0,.04),
    0 14px 40px rgba(0,0,0,.12);
  overflow:visible;
  box-sizing:border-box;
}
html[data-theme="dark"] .live-chrome-inner,
html[data-hig-theme*="dark"] .live-chrome-inner{
  background:rgba(28,28,30,.72);
  border-color:rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 14px 40px rgba(0,0,0,.4);
}
.lc-done{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:0 0 auto;
  height:36px;
  padding:0 16px;
  margin:0;
  border:none;
  border-radius:9999px;
  background:var(--color-tint,#355cff);
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.015em;
  cursor:pointer;
  white-space:nowrap;
  position:relative;
  z-index:1;
}
.lc-done:hover{filter:brightness(1.05)}
.lc-done svg.lucide{width:14px;height:14px;stroke:#fff;flex:0 0 auto}
.lc-crumb{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 1 auto;
  min-width:0;
  height:36px;
  padding:0 12px;
  margin:0;
  border:none;
  border-radius:9999px;
  background:transparent;
  color:var(--apple-ink,#1d1d1f);
  font-size:13px;
  font-weight:600;
  letter-spacing:-.015em;
  cursor:pointer;
  max-width:140px;
  position:relative;
  z-index:0;
}
.lc-crumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lc-crumb:hover{background:rgba(0,0,0,.05)}
.lc-crumb svg.lucide{width:14px;height:14px;flex:0 0 auto;opacity:.55}
.lc-div{
  width:1px;height:22px;margin:0 2px;
  background:rgba(60,60,67,.12);flex:0 0 auto;
}
.lc-ic{
  appearance:none;
  -webkit-appearance:none;
  width:36px;height:36px;padding:0;margin:0;border:none;border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  background:transparent;color:var(--apple-ink,#1d1d1f);cursor:pointer;
}
.lc-ic:hover{background:rgba(0,0,0,.05)}
.lc-ic:disabled{opacity:.35;cursor:default}
.lc-ic svg.lucide{width:15px;height:15px}
.lc-add{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;align-items:center;gap:5px;
  flex:0 0 auto;
  height:36px;padding:0 14px;margin:0;
  border:none;border-radius:9999px;
  background:rgba(0,0,0,.04);
  color:var(--apple-ink,#1d1d1f);
  font-size:13px;font-weight:600;
  letter-spacing:-.015em;cursor:pointer;
  white-space:nowrap;
}
.lc-add:hover{background:rgba(0,0,0,.07)}
.lc-add svg.lucide{width:14px;height:14px;flex:0 0 auto}
.lc-hint{
  display:none !important;
}
@media (max-width:720px){
  .live-chrome-inner .lc-ic,
  .live-chrome-inner .lc-div:first-of-type{
    display:none !important;
  }
}

/* Floating selection bar */
.live-sel-bar{
  position:fixed !important;
  z-index:10058 !important;
  display:inline-flex;align-items:center;justify-content:center;gap:2px;
  min-height:40px;padding:4px 8px 4px 6px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 28px rgba(0,0,0,.12);
  color:var(--apple-ink,#1d1d1f);
  pointer-events:auto;
}
.live-sel-bar[hidden],
.live-sel-bar:empty{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.lsb-name{
  max-width:140px;padding:0 10px;
  font-size:12.5px;font-weight:600;
  letter-spacing:-.015em;
  text-align:center;
  color:var(--apple-ink,#1d1d1f);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lsb-ic{
  width:32px;height:32px;padding:0;border:none;border-radius:980px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--apple-ink,#1d1d1f);cursor:pointer;
}
.lsb-ic:hover{background:rgba(0,0,0,.06)}
.lsb-ic.lsb-danger:hover{background:rgba(255,59,48,.12);color:#ff3b30}
.lsb-ic svg.lucide{width:14px;height:14px}
.lsb-div{width:1px;height:20px;margin:0 4px;background:rgba(60,60,67,.12);flex:0 0 auto}
.lsb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:32px;padding:0 12px;margin-left:2px;
  border:none;border-radius:980px;
  background:color-mix(in srgb,var(--color-tint,#355cff) 12%,transparent);
  color:var(--color-tint,#355cff);
  font-size:12.5px;font-weight:600;
  letter-spacing:-.015em;cursor:pointer;
  text-align:center;
}
.lsb-btn:hover{background:color-mix(in srgb,var(--color-tint,#355cff) 18%,transparent)}
.lsb-btn svg.lucide{width:13px;height:13px}
html[data-theme="dark"] .live-sel-bar{
  background:rgba(44,44,46,.94);
  border-color:rgba(255,255,255,.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 28px rgba(0,0,0,.4);
}
html[data-theme="dark"] .lsb-name{color:#f5f5f7}
html[data-theme="dark"] .lsb-ic{color:#f5f5f7}
html[data-theme="dark"] .lsb-ic:hover{background:rgba(255,255,255,.1)}
html[data-theme="dark"] .lsb-div{background:rgba(235,235,245,.16)}

/* Shared exit chip for preview */
.bp-exit-preview{
  position:fixed !important;
  left:50% !important;
  bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
  transform:translateX(-50%) !important;
  z-index:10060 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:980px !important;
  border:1px solid rgba(0,0,0,.08) !important;
  background:rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter:blur(28px) saturate(180%) !important;
  backdrop-filter:blur(28px) saturate(180%) !important;
  color:var(--apple-ink,#1d1d1f) !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  letter-spacing:-.015em !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 32px rgba(0,0,0,.12) !important;
  cursor:pointer;
}
.bp-exit-preview[hidden]{display:none !important}
.bp-exit-preview:hover{
  background:rgba(255,255,255,.96) !important;
}
.bp-exit-preview svg.lucide{
  width:15px !important;
  height:15px !important;
  stroke:currentColor !important;
  color:inherit !important;
}
.bp-exit-preview[data-mode="live"]{
/* live edit uses .live-chrome */
  border-color:color-mix(in srgb,var(--color-tint,#355cff) 22%,transparent) !important;
}

@media (max-width:1100px){
  #view-app .builder.immersive .panel-left,
  #view-app .builder.immersive .panel-right,
  #view-app .builder.immersive #inspector{
    width:260px;
    flex-basis:260px;
  }
}

/* Builder tour */
.tour-card .tc-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:16px !important;
}
.tour-card .tc-row .link-btn{margin-right:0 !important}
.tour-card .tc-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.tour-card .tour-skip-btn{
  appearance:none;
  margin:0;
  min-height:32px;
  padding:0 14px !important;
  border-radius:980px !important;
  font-size:13px !important;
  font-weight:550 !important;
  letter-spacing:-.015em !important;
  color:var(--apple-sec, rgba(60,60,67,.56)) !important;
  background:rgba(118,118,128,.12) !important;
  border:none !important;
  box-shadow:none !important;
  text-decoration:none !important;
  cursor:pointer;
  transition:color .15s ease, background .15s ease, transform .12s ease;
}
.tour-card .tour-skip-btn:hover{
  color:var(--apple-ink, #1d1d1f) !important;
  background:rgba(118,118,128,.2) !important;
  text-decoration:none !important;
}
.tour-card .tour-skip-btn:active{transform:scale(.98)}
.tour-card .tour-skip-btn:focus-visible{
  outline:2px solid color-mix(in srgb,var(--color-tint,#355cff) 40%,transparent);
  outline-offset:2px;
}
.tour-card #tour-back,
.tour-card #tour-next{
  min-height:32px;
  border-radius:980px !important;
  padding:0 16px !important;
  font-size:13px !important;
  font-weight:600 !important;
}
.tour-card #tour-next{
  background:var(--color-tint,#355cff) !important;
  color:#fff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 4px 14px color-mix(in srgb,var(--color-tint,#355cff) 32%,transparent) !important;
}
.tour-card #tour-next:hover{background:var(--color-tint-hover,#4a6fff) !important}

/* */
@media (max-width:760px){
  body.builder-immersive .mb-bar,
  #view-app .builder .mb-bar{
    left:12px !important;
    right:12px !important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;
    height:58px !important;
    padding:4px 6px !important;
    border-radius:22px !important;
    background:rgba(22,22,24,.78) !important;
    -webkit-backdrop-filter:blur(40px) saturate(180%) !important;
    backdrop-filter:blur(40px) saturate(180%) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.1),
      0 12px 36px rgba(0,0,0,.28) !important;
  }
  body.builder-immersive .mb-bar button,
  #view-app .builder .mb-bar button{
    gap:2px !important;
    font-size:10px !important;
    font-weight:550 !important;
    letter-spacing:-.01em !important;
    color:rgba(255,255,255,.5) !important;
    border-radius:14px !important;
  }
  body.builder-immersive .mb-bar button.on,
  #view-app .builder .mb-bar button.on{
    color:#fff !important;
    background:rgba(255,255,255,.1) !important;
  }
  body.builder-immersive .mb-bar button svg.lucide,
  #view-app .builder .mb-bar button svg.lucide{
    width:18px !important;
    height:18px !important;
    stroke-width:1.85 !important;
  }
  body.builder-immersive .mb-bar .mb-add,
  #view-app .builder .mb-bar .mb-add{
    flex:0 0 48px !important;
    width:48px !important;
    height:40px !important;
    border-radius:980px !important;
    background:var(--color-tint,#355cff) !important;
    color:#fff !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.2) inset,
      0 4px 14px color-mix(in srgb,var(--color-tint,#355cff) 36%,transparent) !important;
  }
  body.builder-immersive .mb-bar .mb-add svg.lucide,
  #view-app .builder .mb-bar .mb-add svg.lucide{
    width:20px !important;
    height:20px !important;
    color:#fff !important;
    stroke:#fff !important;
  }
}

/* History & revisions modal */
.modal.hist-modal-box{
  max-width:520px !important;
  padding:22px 22px 16px !important;
}
.hist-modal{display:flex;flex-direction:column;gap:0;min-width:0}
.hist-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:18px;
}
.hist-head h2{
  margin:0 0 6px !important;
  font-size:22px !important;
  font-weight:700 !important;
  letter-spacing:-.03em !important;
  color:var(--apple-ink,#1d1d1f) !important;
}
.hist-head .sub{
  margin:0 !important;
  font-size:13.5px !important;
  line-height:1.45 !important;
  color:var(--apple-sec,rgba(60,60,67,.56)) !important;
  max-width:38ch;
}
.hist-sec{margin-bottom:14px}
.hist-sec-label{
  display:flex;align-items:center;gap:8px;
  margin:0 0 8px 2px;
  font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--apple-ter,rgba(60,60,67,.4));
}
.hist-sec-label em{
  font-style:normal;
  font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;
  min-width:18px;height:18px;padding:0 6px;
  border-radius:980px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--apple-fill,rgba(120,120,128,.12));
  color:var(--apple-sec,rgba(60,60,67,.56));
}
.hist-panel{
  border-radius:14px;
  background:var(--apple-fill,rgba(120,120,128,.1));
  overflow:hidden;
  max-height:220px;
  overflow-y:auto;
}
.hist-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(60,60,67,.08);
}
.hist-row:last-child{border-bottom:none}
.hist-ic{
  width:32px;height:32px;flex:0 0 auto;
  border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);
  color:var(--apple-sec,rgba(60,60,67,.56));
  box-shadow:0 0 0 .5px rgba(0,0,0,.04);
}
.hist-ic--rev{color:var(--color-tint,#355cff)}
.hist-ic svg.lucide{width:15px;height:15px;stroke-width:1.85}
.hist-main{flex:1;min-width:0}
.hist-main strong{
  display:block;font-size:13.5px;font-weight:600;
  letter-spacing:-.015em;color:var(--apple-ink,#1d1d1f);
}
.hist-main em{
  display:block;margin-top:2px;
  font-style:normal;font-size:12px;
  color:var(--apple-sec,rgba(60,60,67,.56));
}
.hist-actions{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
.hist-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:28px 24px 26px;gap:6px;
}
.hist-empty-ic{
  width:40px;height:40px;margin-bottom:6px;
  border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.8);
  color:var(--apple-sec,rgba(60,60,67,.5));
  box-shadow:0 0 0 .5px rgba(0,0,0,.04);
}
.hist-empty-ic svg.lucide{width:18px;height:18px;stroke-width:1.75}
.hist-empty strong{
  font-size:14px;font-weight:650;letter-spacing:-.02em;
  color:var(--apple-ink,#1d1d1f);
}
.hist-empty p{
  margin:0 0 10px;max-width:32ch;
  font-size:13px;line-height:1.45;
  color:var(--apple-sec,rgba(60,60,67,.56));
}
.hist-empty kbd{
  display:inline-block;padding:1px 7px;margin:0 1px;
  border-radius:6px;font-size:11.5px;font-weight:600;
  font-family:inherit;letter-spacing:-.01em;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 .5px rgba(0,0,0,.08);
  color:var(--apple-ink,#1d1d1f);
}
.hist-foot{
  display:flex;justify-content:flex-end;
  margin-top:6px;padding-top:4px;
}
.hist-foot--split{
  justify-content:space-between;align-items:center;gap:12px;
}
.modal.hist-modal-box:has(.hist-review){
  max-width:560px !important;
}
.hist-review .hist-sec-label{margin-top:2px}
.hist-diff-panel{
  max-height:min(52vh,360px);
  margin-bottom:10px;
}
.hist-diff-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 12px;
  border-bottom:1px solid rgba(60,60,67,.08);
}
.hist-diff-row:last-child{border-bottom:none}
.hist-diff-ic{
  width:30px;height:30px;flex:0 0 auto;margin-top:1px;
  border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.78);
  color:var(--apple-sec,rgba(60,60,67,.56));
  box-shadow:0 0 0 .5px rgba(0,0,0,.04);
}
.hist-diff-ic svg.lucide{width:14px;height:14px;stroke-width:1.85}
.hist-diff-row--block .hist-diff-ic,
.hist-diff-row--page .hist-diff-ic{color:var(--color-tint,#355cff)}
.hist-diff-row--token .hist-diff-ic{color:#c93400}
.hist-diff-main{flex:1;min-width:0}
.hist-diff-main strong{
  display:block;font-size:13.5px;font-weight:600;
  letter-spacing:-.015em;color:var(--apple-ink,#1d1d1f);
  line-height:1.3;
}
.hist-diff-main em{
  display:block;margin-top:3px;
  font-style:normal;font-size:12px;line-height:1.4;
  color:var(--apple-sec,rgb(60,60,67,.56));
  word-break:break-word;
}
.hist-empty--compact{
  padding:22px 20px 20px;
}
.hist-empty--compact p{margin-bottom:0}

/* Builder settings modal */
.modal.bs-modal-box{
  max-width:520px !important;
  padding:22px 22px 16px !important;
}
.bs-modal{display:flex;flex-direction:column;gap:0;min-width:0}
.bs-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:16px;
}
.bs-head h2{
  margin:0 0 6px !important;
  font-size:22px !important;
  font-weight:700 !important;
  letter-spacing:-.03em !important;
  color:var(--apple-ink,#1d1d1f) !important;
}
.bs-head .sub{
  margin:0 !important;
  font-size:13.5px !important;
  line-height:1.45 !important;
  color:var(--apple-sec,rgba(60,60,67,.56)) !important;
  max-width:40ch;
}
.bs-tabs{
  display:flex !important;
  flex-wrap:wrap;
  gap:var(--apple-seg-gap,2px) !important;
  padding:0 !important;
  margin:0 0 18px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.bs-tabs button{
  appearance:none;border:none;cursor:pointer;
  min-height:var(--apple-seg-h,32px) !important;
  padding:0 14px !important;
  border-radius:var(--apple-seg-r-thumb,980px) !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  color:var(--apple-sec,rgba(60,60,67,.56)) !important;
  background:transparent !important;
  box-shadow:none !important;
  transition:background .14s ease, color .14s ease;
}
.bs-tabs button:hover:not(.on){
  color:var(--apple-ink,#1d1d1f) !important;
  background:var(--apple-seg-hover,rgba(118,118,128,.1)) !important;
}
.bs-tabs button.on{
  color:var(--apple-ink,#1d1d1f) !important;
  font-weight:600 !important;
  background:var(--apple-seg-thumb,rgba(255,255,255,.92)) !important;
  box-shadow:var(--apple-seg-thumb-shadow,
    0 0 0 .5px rgba(0,0,0,.04),
    0 1px 2px rgba(0,0,0,.04),
    0 4px 14px rgba(0,0,0,.06)) !important;
}
.bs-body{display:flex;flex-direction:column;gap:16px;min-width:0}
.bs-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.bs-field > label{
  margin:0 0 0 2px !important;
  font-size:12.5px !important;
  font-weight:550 !important;
  letter-spacing:-.01em !important;
  color:var(--apple-sec,rgba(60,60,67,.56)) !important;
}
.bs-field .bs-seg.seg,
.bs-modal .bs-seg{
  display:flex !important;
  flex-wrap:wrap;
  gap:2px !important;
  padding:3px !important;
  border-radius:12px !important;
  background:var(--apple-fill,rgba(120,120,128,.12)) !important;
  border:none !important;
  box-shadow:none !important;
}
.bs-modal .bs-seg button{
  flex:1 1 auto;
  min-height:30px !important;
  padding:0 12px !important;
  border:none !important;
  border-radius:10px !important;
  background:transparent !important;
  color:var(--apple-sec,rgba(60,60,67,.56)) !important;
  font-size:12.5px !important;
  font-weight:550 !important;
  letter-spacing:-.015em !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background .14s ease, color .14s ease, box-shadow .14s ease;
}
.bs-modal .bs-seg button:hover:not(.on){
  color:var(--apple-ink,#1d1d1f) !important;
  background:rgba(255,255,255,.45) !important;
}
.bs-modal .bs-seg button.on{
  color:var(--apple-ink,#1d1d1f) !important;
  font-weight:600 !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.04),
    0 1px 2px rgba(0,0,0,.04),
    0 3px 10px rgba(0,0,0,.05) !important;
}
.bs-actions{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:2px;
}
.bs-hint{
  margin:0 !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  color:var(--apple-sec,rgba(60,60,67,.56)) !important;
}
.bs-foot{
  display:flex;justify-content:flex-end;
  margin-top:18px;padding-top:4px;
}

/* */
.cust-preset-grid--duo{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:440px;
}

/* Theme swatches: keep hover ring stable (no border-width toggle / .sel wipe) */
.hig-theme-swatch,
.cust-preset.hig-theme-swatch{
  border:1px solid transparent !important;
  box-sizing:border-box !important;
}
.hig-theme-swatch:hover,
.hig-theme-swatch:focus-visible,
.cust-preset.hig-theme-swatch:hover,
.cust-preset.hig-theme-swatch:focus-visible{
  transform:translateY(-1px);
  background:var(--color-bg-elevated,var(--apple-glass,#fff)) !important;
  border-color:var(--color-separator,rgba(60,60,67,.18)) !important;
}
.hig-theme-swatch.sel,
.cust-preset.hig-theme-swatch.sel{
  border-color:color-mix(in srgb,var(--color-tint,#355cff) 40%,transparent) !important;
  background:transparent !important;
}
.hig-theme-swatch.sel:hover,
.hig-theme-swatch.sel:focus-visible,
.cust-preset.hig-theme-swatch.sel:hover,
.cust-preset.hig-theme-swatch.sel:focus-visible{
  background:var(--color-bg-elevated,var(--apple-glass,#fff)) !important;
  border-color:var(--color-separator,rgba(60,60,67,.18)) !important;
}
.hig-swatch-preview{
  border:1px solid transparent !important;
  box-sizing:border-box !important;
}
.hig-theme-swatch:hover .hig-swatch-preview,
.hig-theme-swatch:focus-visible .hig-swatch-preview{
  border-color:color-mix(in srgb,var(--color-separator,rgba(60,60,67,.18)) 80%,transparent) !important;
}

/* =====================================================================
   Dark mode parity
===================================================================== */
html[data-theme="dark"] #view-app .builder .b-pill.liquid-glass:not(.light),
html[data-hig-theme*="dark"] #view-app .builder .b-pill.liquid-glass:not(.light),
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.liquid-glass:not(.light),
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.liquid-glass:not(.light){
  background:rgba(28,28,30,.72) !important;
  color:var(--apple-ink,#f5f5f7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 .5px rgba(255,255,255,.08),
    0 10px 28px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row .bd-select-trigger:hover,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row .bd-select-trigger:hover,
html[data-theme="dark"] #view-app #inspector .ds-group .ds-row .bd-select-trigger:hover,
html[data-hig-theme*="dark"] #view-app #inspector .ds-group .ds-row .bd-select-trigger:hover,
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row .bd-select.open .bd-select-trigger,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row .bd-select.open .bd-select-trigger,
html[data-theme="dark"] #view-app #inspector .ds-group .ds-row .bd-select.open .bd-select-trigger,
html[data-hig-theme*="dark"] #view-app #inspector .ds-group .ds-row .bd-select.open .bd-select-trigger,
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row .bd-select-trigger:focus-visible,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row .bd-select-trigger:focus-visible,
html[data-theme="dark"] #view-app #inspector .ds-group .ds-row .bd-select-trigger:focus-visible,
html[data-hig-theme*="dark"] #view-app #inspector .ds-group .ds-row .bd-select-trigger:focus-visible{
  background:rgba(99,99,102,.88) !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.1),
    0 2px 8px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] #view-app .builder #inspector .insp-group,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-group,
html[data-theme="dark"] #view-app .builder #inspector .insp-stack,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-stack,
html[data-theme="dark"] #view-app .builder #inspector .insp-seo-card,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-seo-card{
  background:rgba(44,44,46,.72) !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.08),
    0 6px 18px rgba(0,0,0,.28) !important;
  color:var(--apple-ink,#f5f5f7) !important;
}
html[data-theme="dark"] .cmp-modal .cmp-part-toggle,
html[data-hig-theme*="dark"] .cmp-modal .cmp-part-toggle{
  background:rgba(44,44,46,.88) !important;
  color:var(--apple-ink,#f5f5f7) !important;
  box-shadow:0 0 0 .5px rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .cmp-modal .cmp-part.open .cmp-part-toggle,
html[data-hig-theme*="dark"] .cmp-modal .cmp-part.open .cmp-part-toggle,
html[data-theme="dark"] .cmp-modal .cmp-part-toggle:hover,
html[data-hig-theme*="dark"] .cmp-modal .cmp-part-toggle:hover{
  background:rgba(58,58,60,.95) !important;
}
html[data-theme="dark"] .cmp-modal .cmp-picker,
html[data-hig-theme*="dark"] .cmp-modal .cmp-picker{
  background:rgba(28,28,30,.92) !important;
  box-shadow:0 0 0 .5px rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] #view-app .builder .lib-suggest,
html[data-hig-theme*="dark"] #view-app .builder .lib-suggest,
html[data-theme="dark"] #view-app .builder #ctx-menu.ins-pal-menu,
html[data-hig-theme*="dark"] #view-app .builder #ctx-menu.ins-pal-menu{
  background:rgba(28,28,30,.94) !important;
  color:var(--apple-ink,#f5f5f7) !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.1),
    0 18px 48px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] #view-app .builder .canvas-frame,
html[data-hig-theme*="dark"] #view-app .builder .canvas-frame{
  background:rgba(22,22,24,.9) !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.08),
    0 16px 48px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] #view-app .builder .empty-canvas,
html[data-hig-theme*="dark"] #view-app .builder .empty-canvas{
  color:var(--apple-sec,rgba(235,235,245,.55)) !important;
}
html[data-theme="dark"] .tour-card,
html[data-hig-theme*="dark"] .tour-card{
  background:rgba(28,28,30,.96) !important;
  color:var(--apple-ink,#f5f5f7) !important;
  border-color:rgba(255,255,255,.1) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .tour-card p,
html[data-hig-theme*="dark"] .tour-card p,
html[data-theme="dark"] .tour-card .tc-skip,
html[data-hig-theme*="dark"] .tour-card .tc-skip{
  color:var(--apple-sec,rgba(235,235,245,.6)) !important;
}
html[data-theme="dark"] #view-app .modal,
html[data-hig-theme*="dark"] #view-app .modal,
html[data-theme="dark"] .modal.wide.customize,
html[data-hig-theme*="dark"] .modal.wide.customize{
  background:rgba(28,28,30,.96) !important;
  color:var(--apple-ink,#f5f5f7) !important;
}

/* Customize — Export / Import as secondary pills (not tint link text) */
.cust-modal .cust-io-row,
.customize .cust-io-row,
#view-app .cust-io-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:10px !important;
}
.cust-modal .cust-io-btn,
.customize .cust-io-btn,
#view-app .cust-io-btn{
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:34px !important;
  padding:0 14px !important;
  margin:0 !important;
  border:none !important;
  border-radius:980px !important;
  font:inherit !important;
  font-size:13px !important;
  font-weight:550 !important;
  letter-spacing:-.015em !important;
  line-height:1 !important;
  color:var(--apple-ink,#1d1d1f) !important;
  background:rgba(118,118,128,.14) !important;
  box-shadow:none !important;
  text-decoration:none !important;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .12s ease;
}
.cust-modal .cust-io-btn:hover,
.customize .cust-io-btn:hover,
#view-app .cust-io-btn:hover{
  background:rgba(118,118,128,.22) !important;
  color:var(--apple-ink,#1d1d1f) !important;
  text-decoration:none !important;
}
.cust-modal .cust-io-btn:active,
.customize .cust-io-btn:active,
#view-app .cust-io-btn:active{
  transform:scale(.98);
}
.cust-modal .cust-io-btn:focus-visible,
.customize .cust-io-btn:focus-visible,
#view-app .cust-io-btn:focus-visible{
  outline:2px solid color-mix(in srgb,var(--color-tint,#355cff) 45%,transparent);
  outline-offset:2px;
}
.cust-modal .cust-io-btn svg.lucide,
.customize .cust-io-btn svg.lucide,
#view-app .cust-io-btn svg.lucide{
  width:14px !important;
  height:14px !important;
  stroke:currentColor !important;
  flex:0 0 auto;
  opacity:.85;
}
html[data-theme="dark"] .cust-modal .cust-io-btn,
html[data-hig-theme*="dark"] .cust-modal .cust-io-btn,
html[data-theme="dark"] .customize .cust-io-btn,
html[data-hig-theme*="dark"] .customize .cust-io-btn,
html[data-theme="dark"] #view-app .cust-io-btn,
html[data-hig-theme*="dark"] #view-app .cust-io-btn{
  color:#f5f5f7 !important;
  background:rgba(118,118,128,.28) !important;
}
html[data-theme="dark"] .cust-modal .cust-io-btn:hover,
html[data-hig-theme*="dark"] .cust-modal .cust-io-btn:hover,
html[data-theme="dark"] .customize .cust-io-btn:hover,
html[data-hig-theme*="dark"] .customize .cust-io-btn:hover,
html[data-theme="dark"] #view-app .cust-io-btn:hover,
html[data-hig-theme*="dark"] #view-app .cust-io-btn:hover{
  background:rgba(118,118,128,.4) !important;
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .settings-card,
html[data-hig-theme*="dark"] #view-app .settings-card,
html[data-theme="dark"] #view-app .card.liquid-glass,
html[data-hig-theme*="dark"] #view-app .card.liquid-glass{
  background:rgba(28,28,30,.62) !important;
  color:var(--apple-ink,#f5f5f7) !important;
}
html[data-theme="dark"] #view-app .settings-input,
html[data-hig-theme*="dark"] #view-app .settings-input,
html[data-theme="dark"] #view-app .settings-textarea,
html[data-hig-theme*="dark"] #view-app .settings-textarea{
  background:rgba(44,44,46,.9) !important;
  color:var(--apple-ink,#f5f5f7) !important;
  border-color:rgba(255,255,255,.1) !important;
}
html[data-theme="dark"] #view-app .site-icon-trigger,
html[data-hig-theme*="dark"] #view-app .site-icon-trigger,
html[data-theme="dark"] #view-app .site-icon-pop,
html[data-hig-theme*="dark"] #view-app .site-icon-pop{
  background:rgba(44,44,46,.92) !important;
  color:var(--apple-ink,#f5f5f7) !important;
  box-shadow:0 0 0 .5px rgba(255,255,255,.08),0 12px 32px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] #view-app .hist-empty-ic,
html[data-hig-theme*="dark"] #view-app .hist-empty-ic,
html[data-theme="dark"] #view-app .hist-diff-ic,
html[data-hig-theme*="dark"] #view-app .hist-diff-ic{
  background:rgba(58,58,60,.9) !important;
  color:var(--apple-sec,rgba(235,235,245,.55)) !important;
}

/* */
#view-app .live-chip.pill-hit,
#view-app #top-live.pill-hit{
  width:auto !important;
  min-width:0 !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 12px !important;
  gap:6px !important;
  border-radius:980px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}
#view-app .live-chip .live-label{
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}

/* */
#view-app .side{
  --side-ease:cubic-bezier(.32,.72,.22,1);
  --side-dur:.48s;
  width:var(--sidebar-w,260px);
  flex:0 0 var(--sidebar-w,260px);
  max-width:var(--sidebar-w,260px);
  min-width:0;
  opacity:1;
  transform:translate3d(0,0,0);
  overflow-x:hidden;
  transition:
    width var(--side-dur) var(--side-ease),
    max-width var(--side-dur) var(--side-ease),
    flex-basis var(--side-dur) var(--side-ease),
    opacity .34s ease,
    transform var(--side-dur) var(--side-ease),
    margin var(--side-dur) var(--side-ease),
    padding var(--side-dur) var(--side-ease),
    border-color .28s ease,
    box-shadow .28s ease !important;
}
#view-app .side > *{
  transition:opacity .24s ease,transform .3s var(--side-ease);
}
#view-app .main{
  transition:min-width .48s var(--side-ease);
}
@media (min-width:901px){
  body.side-collapsed #view-app .side,
  body.side-collapsed #view-app .side.liquid-glass{
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    flex:0 0 0 !important;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    opacity:0 !important;
    transform:translate3d(-20px,0,0) !important;
    border-color:transparent !important;
    box-shadow:none !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }
  body.side-collapsed #view-app .side > *{
    opacity:0;
    transform:translate3d(-8px,0,0);
    pointer-events:none;
  }
  body.side-collapsed #view-app .main{
    flex:1 1 auto;
    width:100%;
    max-width:none;
    min-width:0;
  }
/* */
  body.side-collapsed #view-app .page{
    max-width:min(1120px,100%) !important;
    width:100%;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  body.side-collapsed #view-app .page.full,
  body.side-collapsed #view-app .page.page--wide,
  body.side-collapsed #view-app .page:has(> .console-page),
  body.side-collapsed #view-app .page:has(.console-page){
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  body.side-collapsed #view-app .page > .studio-page{
    margin-left:auto;
    margin-right:auto;
  }
  body.side-collapsed #view-app .page.page--wide > .console-page,
  body.side-collapsed #view-app .page > .console-page{
    max-width:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}
html.bd-motion-off #view-app .side,
html.bd-motion-off #view-app .side > *,
html.bd-motion-off #view-app .main{
  transition:none !important;
}
@media (prefers-reduced-motion:reduce){
  #view-app .side,
  #view-app .side > *,
  #view-app .main{
    transition:none !important;
  }
}

/* */
#modal-box .ns-btn-solid:disabled,
.modal .ns-btn-solid:disabled,
#modal-box .ns-btn-solid[disabled],
.modal .ns-btn-solid[disabled]{
  opacity:.42 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}
#modal-box .ns-field.is-invalid label,
.modal .ns-field.is-invalid label{color:#c5221f}
#modal-box .ns-field.is-invalid input,
.modal .ns-field.is-invalid input{
  border-color:#c5221f !important;
  box-shadow:0 0 0 3px rgba(197,34,31,.16) !important;
}
#modal-box .ns-field-hint,
.modal .ns-field-hint{
  margin-top:8px;
  font-size:12.5px;
  line-height:1.35;
  color:#c5221f;
}

/* */
.cmp-modal .cmp-pick-bar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  padding:10px 4px 2px;
  border-top:1px solid var(--apple-hairline,rgba(60,60,67,.12));
  margin-top:8px;
}
.cmp-modal .cmp-pick-bar[hidden]{display:none !important}
.cmp-modal .cmp-opt.draft{
  background:rgba(53,92,255,.1);
  box-shadow:inset 0 0 0 1px rgba(53,92,255,.35);
}
#view-app .blk.multi-selected,
.builder .blk.multi-selected{
  outline:2px solid rgba(53,92,255,.55);
  outline-offset:2px;
}

/* */
#view-app .builder .bw-card .bw-grip--static{
  flex:0 0 40px;
  width:40px;
  pointer-events:none;
  visibility:hidden;
}
#view-app .builder .bw-card::before{
  content:"" !important;
  position:absolute !important;
  z-index:1;
  pointer-events:none;
}
#view-app .builder .bw-card .bw-inner{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  position:relative;
  z-index:2;
}
/* */
#view-app .builder #inspector .insp-stack--style,
#view-app .builder #inspector .insp-stack--content,
body.builder-live #inspector .insp-stack--style,
body.builder-live #inspector .insp-stack--content{
  gap:12px !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}
#view-app .builder #inspector .insp-style-card{
  margin:0;
  padding:0;
  border-radius:16px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(60,60,67,.08);
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.03),
    0 1px 2px rgba(0,0,0,.03),
    0 8px 22px rgba(0,0,0,.04);
  overflow:hidden;
}
html[data-theme="dark"] #view-app .builder #inspector .insp-style-card,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-style-card,
html[data-theme="dark"] body.builder-live #inspector .insp-style-card,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-style-card{
  background:rgba(44,44,46,.92);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 0 0 .5px rgba(255,255,255,.06);
}
#view-app .builder #inspector .insp-style-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:12px 14px 10px;
  font-size:12px;
  font-weight:650;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--apple-sec);
  border-bottom:1px solid rgba(60,60,67,.08);
}
#view-app .builder #inspector .insp-style-card-head svg.lucide{
  width:14px;height:14px;
  color:var(--color-tint,#355cff);
  opacity:.9;
}
html[data-theme="dark"] #view-app .builder #inspector .insp-style-card-head,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-style-card-head{
  border-bottom-color:rgba(255,255,255,.08);
}
#view-app .builder #inspector .insp-style-card-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:12px 14px 14px;
}
#view-app .builder #inspector .insp-style-hint{
  margin:2px 4px 0 !important;
  font-size:12px !important;
  line-height:1.4;
  color:var(--apple-sec);
  opacity:.85;
}

/* Flat fields inside style/content cards (avoid nested grey pills) */
body.builder-live #inspector .insp-style-card .field--live{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
body.builder-live #inspector .insp-style-card .field--live > label,
#view-app .builder #inspector .insp-style-card .field > label{
  margin:0 0 8px !important;
  font-size:11.5px !important;
  font-weight:650 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  color:var(--apple-sec) !important;
}
body.builder-live #inspector .insp-style-card .field--live input,
body.builder-live #inspector .insp-style-card .field--live textarea,
#view-app .builder #inspector .insp-style-card .field input,
#view-app .builder #inspector .insp-style-card .field textarea{
  border:none !important;
  border-radius:12px !important;
  background:rgba(118,118,128,.1) !important;
  box-shadow:none !important;
  min-height:40px !important;
  padding:10px 12px !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:-.01em !important;
}
body.builder-live #inspector .insp-style-card .field--live input:focus,
body.builder-live #inspector .insp-style-card .field--live textarea:focus,
#view-app .builder #inspector .insp-style-card .field input:focus,
#view-app .builder #inspector .insp-style-card .field textarea:focus{
  outline:none !important;
  background:rgba(118,118,128,.16) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 16%,transparent) !important;
}

/* */
#view-app .builder #inspector .seg.seg--wrap,
body.builder-live #inspector .seg.seg--wrap{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  width:100% !important;
  padding:4px !important;
  border-radius:14px !important;
  background:rgba(118,118,128,.1) !important;
  border:none !important;
  box-shadow:none !important;
}
#view-app .builder #inspector .seg.seg--wrap button,
body.builder-live #inspector .seg.seg--wrap button{
  flex:1 1 auto !important;
  min-width:max-content !important;
  min-height:32px !important;
  padding:0 12px !important;
  border:none !important;
  border-radius:10px !important;
  font-size:12.5px !important;
  font-weight:550 !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
  color:rgba(60,60,67,.72) !important;
  background:transparent !important;
  box-shadow:none !important;
}
#view-app .builder #inspector .seg.seg--wrap button:hover:not(.on),
body.builder-live #inspector .seg.seg--wrap button:hover:not(.on){
  color:var(--apple-ink,#1d1d1f) !important;
  background:rgba(255,255,255,.55) !important;
}
#view-app .builder #inspector .seg.seg--wrap button.on,
body.builder-live #inspector .seg.seg--wrap button.on{
  color:var(--apple-ink,#1d1d1f) !important;
  font-weight:650 !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 0 0 .5px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.06) !important;
}
html[data-theme="dark"] #view-app .builder #inspector .seg.seg--wrap button,
html[data-theme="dark"] body.builder-live #inspector .seg.seg--wrap button,
html[data-hig-theme*="dark"] #view-app .builder #inspector .seg.seg--wrap button,
html[data-hig-theme*="dark"] body.builder-live #inspector .seg.seg--wrap button{
  color:rgba(235,235,245,.62) !important;
}
html[data-theme="dark"] #view-app .builder #inspector .seg.seg--wrap button.on,
html[data-theme="dark"] body.builder-live #inspector .seg.seg--wrap button.on,
html[data-hig-theme*="dark"] #view-app .builder #inspector .seg.seg--wrap button.on,
html[data-hig-theme*="dark"] body.builder-live #inspector .seg.seg--wrap button.on{
  color:#f5f5f7 !important;
  background:rgba(99,99,102,.78) !important;
}

/* Visual pick grid */
#view-app .builder #inspector .insp-pick,
body.builder-live #inspector .insp-pick{
  display:grid;
  grid-template-columns:repeat(var(--insp-pick-cols,4),minmax(0,1fr));
  gap:8px;
  width:100%;
}
#view-app .builder #inspector .insp-pick-item,
body.builder-live #inspector .insp-pick-item{
  appearance:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:64px;
  padding:10px 6px 8px;
  border:1px solid rgba(60,60,67,.1);
  border-radius:14px;
  background:rgba(118,118,128,.06);
  color:var(--apple-ink,#1d1d1f);
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
#view-app .builder #inspector .insp-pick-item:hover,
body.builder-live #inspector .insp-pick-item:hover{
  background:rgba(118,118,128,.12);
  border-color:rgba(60,60,67,.16);
}
#view-app .builder #inspector .insp-pick-item.on,
body.builder-live #inspector .insp-pick-item.on{
  background:color-mix(in srgb,var(--color-tint,#355cff) 10%,#fff);
  border-color:color-mix(in srgb,var(--color-tint,#355cff) 45%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 14%,transparent);
}
#view-app .builder #inspector .insp-pick-swatch,
body.builder-live #inspector .insp-pick-swatch{
  width:100%;
  height:22px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
#view-app .builder #inspector .insp-pick-ico,
body.builder-live #inspector .insp-pick-ico{
  display:inline-flex;
  color:var(--color-tint,#355cff);
  opacity:.85;
}
#view-app .builder #inspector .insp-pick-ico svg.lucide,
body.builder-live #inspector .insp-pick-ico svg.lucide{
  width:15px;height:15px;
}
#view-app .builder #inspector .insp-pick-label,
body.builder-live #inspector .insp-pick-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.15;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  color:var(--apple-sec);
}
#view-app .builder #inspector .insp-pick-item.on .insp-pick-label,
body.builder-live #inspector .insp-pick-item.on .insp-pick-label{
  color:var(--apple-ink,#1d1d1f);
}
html[data-theme="dark"] #view-app .builder #inspector .insp-pick-item,
html[data-theme="dark"] body.builder-live #inspector .insp-pick-item,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-pick-item,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-pick-item{
  background:rgba(118,118,128,.14);
  border-color:rgba(255,255,255,.1);
  color:#f5f5f7;
}
html[data-theme="dark"] #view-app .builder #inspector .insp-pick-item.on,
html[data-theme="dark"] body.builder-live #inspector .insp-pick-item.on,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-pick-item.on,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-pick-item.on{
  background:color-mix(in srgb,var(--color-tint,#355cff) 22%,rgba(44,44,46,.95));
  border-color:color-mix(in srgb,var(--color-tint,#355cff) 55%,transparent);
}
html[data-theme="dark"] #view-app .builder #inspector .insp-pick-item.on .insp-pick-label,
html[data-theme="dark"] body.builder-live #inspector .insp-pick-item.on .insp-pick-label,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-pick-item.on .insp-pick-label,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-pick-item.on .insp-pick-label{
  color:#f5f5f7;
}

#view-app .builder #inspector .insp-color-row,
body.builder-live #inspector .insp-color-row{
  display:flex;
  align-items:center;
  gap:8px;
}
#view-app .builder #inspector .insp-color-row .bd-color,
body.builder-live #inspector .insp-color-row .bd-color{
  flex:1;
  min-width:0;
}
#view-app .builder #inspector .insp-color-clear,
body.builder-live #inspector .insp-color-clear{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:36px;
  padding:0 10px;
  border:none;
  border-radius:10px;
  background:rgba(118,118,128,.12);
  color:var(--apple-sec);
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
#view-app .builder #inspector .insp-color-clear:hover,
body.builder-live #inspector .insp-color-clear:hover{
  background:rgba(118,118,128,.18);
  color:var(--apple-ink,#1d1d1f);
}

/* */
body.builder-live .canvas-wrap{
  padding-top:56px !important;
  padding-right:12px !important;
  padding-left:12px !important;
  padding-bottom:28px !important;
}
body.builder-live .page-sheet{
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 18px 48px rgba(0,0,0,.18) !important;
}
body.builder-live .blk.shared-blk.selected{
  outline:2px solid color-mix(in srgb,var(--color-tint,#355cff) 55%,transparent) !important;
  outline-offset:4px !important;
}
body.builder-live .blk.shared-blk.selected::after{
  content:"Shared";
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;
  padding:4px 10px;
  border-radius:980px;
  font:600 10px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  background:var(--color-tint,#355cff);
  pointer-events:none;
  box-shadow:0 4px 14px color-mix(in srgb,var(--color-tint,#355cff) 40%,transparent);
}
body.builder-live #inspector.live-open ~ .live-sel-bar,
body.builder-live #inspector.live-open + .live-sel-bar{
  display:none !important;
}
.live-sel-bar{
  gap:4px !important;
  padding:4px 8px 4px 8px !important;
}
.live-sel-bar .lsb-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:980px;
  background:color-mix(in srgb,var(--color-tint,#355cff) 12%,transparent);
  color:var(--color-tint,#355cff);
  flex:0 0 auto;
}
.live-sel-bar .lsb-ico svg.lucide{width:14px;height:14px}
.live-sel-bar .lsb-badge{
  display:inline-flex;align-items:center;
  height:22px;padding:0 8px;margin-right:2px;
  border-radius:980px;
  font-size:10px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-tint,#355cff);
  background:color-mix(in srgb,var(--color-tint,#355cff) 12%,transparent);
}
.live-sel-bar .lsb-name{
  max-width:160px;
  padding:0 6px 0 4px;
  text-align:left;
}
#view-app .builder #inspector .insp-banner--shared,
body.builder-live #inspector .insp-banner--shared{
  display:flex !important;
  align-items:flex-start;
  gap:8px;
  margin:0 0 12px !important;
}
#view-app .builder #inspector .insp-banner--shared svg.lucide,
body.builder-live #inspector .insp-banner--shared svg.lucide{
  flex:0 0 auto;margin-top:1px;
  width:14px;height:14px;
}
#view-app .builder #inspector .insp-struct-body,
body.builder-live #inspector .insp-struct-body{
  gap:10px !important;
}
#view-app .builder #inspector .insp-struct-lead,
body.builder-live #inspector .insp-struct-lead{
  margin:0;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.35;
  color:var(--apple-ink,#1d1d1f);
}
#view-app .builder #inspector .insp-struct-sub,
body.builder-live #inspector .insp-struct-sub{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--apple-sec);
}
#view-app .builder #inspector .insp-struct-acts,
body.builder-live #inspector .insp-struct-acts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
html[data-theme="dark"] body.builder-live #inspector .insp-struct-lead,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-struct-lead{
  color:#f5f5f7;
}

/* */
#view-app .builder #inspector .insp-pick-item,
body.builder-live #inspector .insp-pick-item,
#view-app .builder #inspector .seg.seg--wrap button,
body.builder-live #inspector .seg.seg--wrap button,
#view-app .builder #inspector .insp-color-clear,
body.builder-live #inspector .insp-color-clear{
  position:relative;
  z-index:1;
  pointer-events:auto !important;
  cursor:pointer !important;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
#view-app .builder #inspector .insp-pick-item > *,
body.builder-live #inspector .insp-pick-item > *,
#view-app .builder #inspector .insp-color-clear > *,
body.builder-live #inspector .insp-color-clear > *{
  pointer-events:none !important;
}
body.builder-live #inspector,
body.builder-live #inspector.live-open,
body.builder-live #inspector .insp-pane,
body.builder-live #inspector .insp-stack,
body.builder-live #inspector .insp-style-card,
body.builder-live #inspector .insp-style-card-body,
#view-app .builder #inspector .insp-pane,
#view-app .builder #inspector .insp-stack,
#view-app .builder #inspector .insp-style-card,
#view-app .builder #inspector .insp-style-card-body{
  pointer-events:auto !important;
}

/* */
#view-app .builder #inspector .ds-group .ds-row--stack,
#view-app .studio-page--settings .ds-group .ds-row--stack,
body.builder-live #inspector .ds-group .ds-row--stack{
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:8px !important;
}
#view-app .builder #inspector .ds-group .ds-row--stack > label,
#view-app .studio-page--settings .ds-group .ds-row--stack > label,
body.builder-live #inspector .ds-group .ds-row--stack > label{
  flex:0 0 auto !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  padding-right:0 !important;
  padding-bottom:0 !important;
}
#view-app .builder #inspector .ds-group .ds-row--stack .seg,
#view-app .studio-page--settings .ds-group .ds-row--stack .seg,
body.builder-live #inspector .ds-group .ds-row--stack .seg{
  flex:0 0 auto !important;
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  gap:2px !important;
  padding:3px !important;
  border-radius:9999px !important;
  background:rgba(118,118,128,.12) !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
#view-app .builder #inspector .ds-group .ds-row--stack .seg button,
#view-app .studio-page--settings .ds-group .ds-row--stack .seg button,
body.builder-live #inspector .ds-group .ds-row--stack .seg button{
  flex:1 1 0 !important;
  min-width:0 !important;
  padding:0 6px !important;
  font-size:12px !important;
  letter-spacing:-.02em !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:auto !important;
}
#view-app .builder #inspector .ds-group .ds-row:not(.ds-row--stack) > label,
body.builder-live #inspector .ds-group .ds-row:not(.ds-row--stack) > label{
  flex:0 1 auto !important;
  min-width:4.5rem !important;
  max-width:42% !important;
  position:relative;
  z-index:2;
}
#view-app .builder #inspector .ds-group .ds-row:not(.ds-row--stack) .seg,
body.builder-live #inspector .ds-group .ds-row:not(.ds-row--stack) .seg{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:min(100%,62%) !important;
  overflow:hidden !important;
}
#view-app .builder #inspector .ds-group .ds-row:not(.ds-row--stack) .seg button,
body.builder-live #inspector .ds-group .ds-row:not(.ds-row--stack) .seg button{
  flex:1 1 0 !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* =====================================================================
   Dark mode — final chrome contrast (loads last; beats bd-hig tertiary)
===================================================================== */
html[data-theme="dark"] #view-app .pill-notch.liquid-glass,
html[data-hig-theme*="dark"] #view-app .pill-notch.liquid-glass,
html[data-theme="dark"] #view-app .topbar.pill-notch.liquid-glass,
html[data-hig-theme*="dark"] #view-app .topbar.pill-notch.liquid-glass{
  background:rgba(28,28,30,.78) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 .5px rgba(0,0,0,.45),
    0 8px 28px rgba(0,0,0,.4) !important;
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .pill-notch .search-pill,
html[data-hig-theme*="dark"] #view-app .pill-notch .search-pill,
html[data-theme="dark"] #view-app .pill-notch .search-pill span,
html[data-hig-theme*="dark"] #view-app .pill-notch .search-pill span,
html[data-theme="dark"] #view-app .pill-notch .search-pill svg.lucide,
html[data-hig-theme*="dark"] #view-app .pill-notch .search-pill svg.lucide{
  color:rgba(235,235,245,.78) !important;
}
html[data-theme="dark"] #view-app .pill-notch .search-pill,
html[data-hig-theme*="dark"] #view-app .pill-notch .search-pill{
  background:rgba(120,120,128,.28) !important;
}
html[data-theme="dark"] #view-app .pill-notch .search-pill kbd,
html[data-hig-theme*="dark"] #view-app .pill-notch .search-pill kbd,
html[data-theme="dark"] #view-app .pill-notch .search-pill .kbd,
html[data-hig-theme*="dark"] #view-app .pill-notch .search-pill .kbd{
  color:rgba(235,235,245,.78) !important;
  background:rgba(120,120,128,.36) !important;
}
html[data-theme="dark"] #view-app .pill-crumb,
html[data-hig-theme*="dark"] #view-app .pill-crumb,
html[data-theme="dark"] #view-app .live-chip .live-label,
html[data-hig-theme*="dark"] #view-app .live-chip .live-label{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .site-pick .sp-status,
html[data-hig-theme*="dark"] #view-app .site-pick .sp-status,
html[data-theme="dark"] #view-app .su-meta em,
html[data-hig-theme*="dark"] #view-app .su-meta em,
html[data-theme="dark"] #view-app .su-meta #user-plan,
html[data-hig-theme*="dark"] #view-app .su-meta #user-plan,
html[data-theme="dark"] #view-app .side-user .su-meta em,
html[data-hig-theme*="dark"] #view-app .side-user .su-meta em,
html[data-theme="dark"] #view-app .side-label,
html[data-hig-theme*="dark"] #view-app .side-label{
  color:rgba(235,235,245,.78) !important;
}
html[data-theme="dark"] #view-app .side-user .su-meta strong,
html[data-hig-theme*="dark"] #view-app .side-user .su-meta strong,
html[data-theme="dark"] #view-app .side-user #user-name,
html[data-hig-theme*="dark"] #view-app .side-user #user-name{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .side-user svg.lucide,
html[data-hig-theme*="dark"] #view-app .side-user svg.lucide{
  color:rgba(235,235,245,.55) !important;
  stroke:rgba(235,235,245,.55) !important;
}
html[data-theme="dark"] #view-app .console-page .console-eyebrow,
html[data-hig-theme*="dark"] #view-app .console-page .console-eyebrow,
html[data-theme="dark"] #view-app .console-page .dash-stats-bar-label,
html[data-hig-theme*="dark"] #view-app .console-page .dash-stats-bar-label,
html[data-theme="dark"] #view-app .console-page .dash-stat-lbl,
html[data-hig-theme*="dark"] #view-app .console-page .dash-stat-lbl,
html[data-theme="dark"] #view-app .console-page .console-recent-when,
html[data-hig-theme*="dark"] #view-app .console-page .console-recent-when,
html[data-theme="dark"] #view-app .console-page .c-sub,
html[data-hig-theme*="dark"] #view-app .console-page .c-sub,
html[data-theme="dark"] #view-app .console-page .ph-sub,
html[data-hig-theme*="dark"] #view-app .console-page .ph-sub,
html[data-theme="dark"] #view-app .console-page .console-next-line,
html[data-hig-theme*="dark"] #view-app .console-page .console-next-line,
html[data-theme="dark"] #view-app .console-page .console-next-line > span,
html[data-hig-theme*="dark"] #view-app .console-page .console-next-line > span,
html[data-theme="dark"] #view-app .console-page .console-addr em,
html[data-hig-theme*="dark"] #view-app .console-page .console-addr em,
html[data-theme="dark"] #view-app .console-page .dash-status-pill,
html[data-hig-theme*="dark"] #view-app .console-page .dash-status-pill{
  color:rgba(235,235,245,.72) !important;
}
html[data-theme="dark"] #view-app .console-page .console-addr,
html[data-hig-theme*="dark"] #view-app .console-page .console-addr{
  background:rgba(120,120,128,.22) !important;
}
html[data-theme="dark"] #view-app .console-page .console-addr:hover:not(:disabled),
html[data-hig-theme*="dark"] #view-app .console-page .console-addr:hover:not(:disabled){
  background:rgba(120,120,128,.32) !important;
}
html[data-theme="dark"] #view-app .console-page .console-addr strong,
html[data-hig-theme*="dark"] #view-app .console-page .console-addr strong{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .studio-page--cowork .cw-roster,
html[data-hig-theme*="dark"] #view-app .studio-page--cowork .cw-roster{
  background:rgba(28,28,30,.78) !important;
  border-color:rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] #view-app .studio-page--cowork .cw-people-head,
html[data-hig-theme*="dark"] #view-app .studio-page--cowork .cw-people-head,
html[data-theme="dark"] #view-app .studio-page--cowork .cw-empty,
html[data-hig-theme*="dark"] #view-app .studio-page--cowork .cw-empty,
html[data-theme="dark"] #view-app .studio-page--cowork .cw-seats,
html[data-hig-theme*="dark"] #view-app .studio-page--cowork .cw-seats{
  color:rgba(235,235,245,.72) !important;
}
html[data-theme="dark"] #view-app .studio-page--cowork .team-member-row,
html[data-hig-theme*="dark"] #view-app .studio-page--cowork .team-member-row,
html[data-theme="dark"] #view-app .studio-page--cowork .team-member-row .lr-main strong,
html[data-hig-theme*="dark"] #view-app .studio-page--cowork .team-member-row .lr-main strong{
  color:#f5f5f7 !important;
  background:transparent !important;
}
html[data-theme="dark"] #view-app .studio-page--cowork .team-member-row.owner,
html[data-hig-theme*="dark"] #view-app .studio-page--cowork .team-member-row.owner{
  background:rgba(255,255,255,.04) !important;
}
html[data-theme="dark"] #view-app .studio-page--cowork .cw-empty,
html[data-hig-theme*="dark"] #view-app .studio-page--cowork .cw-empty{
  background:rgba(255,255,255,.04) !important;
  border-color:rgba(255,255,255,.1) !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row--text > label,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row--text > label,
html[data-theme="dark"] #view-app #inspector .ds-group .ds-row--text > label,
html[data-hig-theme*="dark"] #view-app #inspector .ds-group .ds-row--text > label,
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row > label,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row > label,
html[data-theme="dark"] #view-app #inspector .ds-group .ds-row > label,
html[data-hig-theme*="dark"] #view-app #inspector .ds-group .ds-row > label,
html[data-theme="dark"] #view-app .studio-page--settings .settings-label,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-label,
html[data-theme="dark"] #view-app .studio-page--settings .settings-block-label,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-block-label,
html[data-theme="dark"] #view-app .studio-page--settings .settings-card .field:not(.ds-row) > label,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-card .field:not(.ds-row) > label{
  color:rgba(235,235,245,.78) !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row--text > input::placeholder,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row--text > input::placeholder,
html[data-theme="dark"] #view-app #inspector .ds-group .ds-row--text > input::placeholder,
html[data-hig-theme*="dark"] #view-app #inspector .ds-group .ds-row--text > input::placeholder{
  color:rgba(235,235,245,.45) !important;
}
html[data-theme="dark"] #view-app .studio-page .settings-note,
html[data-hig-theme*="dark"] #view-app .studio-page .settings-note,
html[data-theme="dark"] #view-app .studio-page .settings-hint,
html[data-hig-theme*="dark"] #view-app .studio-page .settings-hint,
html[data-theme="dark"] #view-app .studio-page--settings .settings-hint,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-hint,
html[data-theme="dark"] #view-app .studio-page--settings .fhint,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .fhint,
html[data-theme="dark"] #view-app .studio-page--settings .hint,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .hint,
html[data-theme="dark"] #view-app .studio-page--settings .dom-panel-kicker,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .dom-panel-kicker,
html[data-theme="dark"] #view-app .studio-page--settings .c-sub,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .c-sub,
html[data-theme="dark"] #view-app .studio-page .page-head .ph-sub,
html[data-hig-theme*="dark"] #view-app .studio-page .page-head .ph-sub{
  color:rgba(235,235,245,.72) !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .settings-note strong,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-note strong{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .settings-sec-head .c-sub,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-sec-head .c-sub,
html[data-theme="dark"] #view-app .studio-page--settings .settings-danger-row .c-sub,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-danger-row .c-sub,
html[data-theme="dark"] #view-app .studio-page--settings .settings-toggle-row .c-sub,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-toggle-row .c-sub,
html[data-theme="dark"] #view-app .studio-page--settings .settings-card > .c-sub,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-card > .c-sub{
  color:rgba(235,235,245,.72) !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .settings-danger-row,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-danger-row{
  border-top-color:rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .settings-danger-row strong,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-danger-row strong{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .btn-danger,
html[data-hig-theme*="dark"] #view-app .btn-danger{
  background:color-mix(in srgb,var(--color-destructive,#ff453a) 24%,rgba(28,28,30,.9)) !important;
  color:#ff9a90 !important;
  border:1px solid color-mix(in srgb,var(--color-destructive,#ff453a) 50%,transparent) !important;
}
html[data-theme="dark"] #view-app .btn:disabled,
html[data-theme="dark"] #view-app .btn[disabled],
html[data-hig-theme*="dark"] #view-app .btn:disabled,
html[data-hig-theme*="dark"] #view-app .btn[disabled]{
  background:rgba(120,120,128,.24) !important;
  color:rgba(235,235,245,.55) !important;
}
html[data-theme="dark"] #view-app .studio-page .settings-label,
html[data-hig-theme*="dark"] #view-app .studio-page .settings-label,
html[data-theme="dark"] #view-app .studio-page .settings-block-label,
html[data-hig-theme*="dark"] #view-app .studio-page .settings-block-label,
html[data-theme="dark"] #view-app .studio-page--settings .settings-field .settings-label,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-field .settings-label,
html[data-theme="dark"] #view-app .studio-page--settings .settings-block .settings-block-label,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-block .settings-block-label{
  color:rgba(235,235,245,.82) !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .settings-tab,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-tab{
  color:rgba(235,235,245,.72) !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .settings-tab.on,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-tab.on{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .settings-seg .seg button,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-seg .seg button,
html[data-theme="dark"] #view-app .studio-page--settings .settings-card > .seg button,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-card > .seg button,
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row .seg button,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row .seg button{
  color:rgba(235,235,245,.68) !important;
}
html[data-theme="dark"] #view-app .studio-page--settings .settings-seg .seg button.on,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-seg .seg button.on,
html[data-theme="dark"] #view-app .studio-page--settings .settings-card > .seg button.on,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-card > .seg button.on,
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row .seg button.on,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row .seg button.on{
  color:#f5f5f7 !important;
  background:rgba(99,99,102,.72) !important;
}

/* */
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-ic,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-ic,
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-zoom,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-zoom,
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-label,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-label,
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-save,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-save,
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-crumb,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-crumb,
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-crumb #pb-site,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-crumb #pb-site,
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-crumb #pb-page,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-crumb #pb-page,
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-ic svg.lucide,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-ic svg.lucide,
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-crumb svg.lucide,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-crumb svg.lucide,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-ic,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-ic,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-zoom,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-zoom,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-label,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-label,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-crumb #pb-page,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-crumb #pb-page{
  color:rgba(235,235,245,.82) !important;
  stroke:rgba(235,235,245,.82) !important;
}
html[data-theme="dark"] #view-app .builder .b-pill:not(.light) .bp-crumb em,
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light) .bp-crumb em,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-crumb em,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light) .bp-crumb em{
  color:rgba(235,235,245,.42) !important;
}

/* Studio dark + Light chrome: keep dark ink on light glass */
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-ic,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-ic,
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-zoom,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-zoom,
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-label,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-label,
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-save,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-save,
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-crumb,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-crumb,
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-crumb #pb-site,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-crumb #pb-site,
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-crumb #pb-page,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-crumb #pb-page,
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-ic svg.lucide,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-ic svg.lucide,
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-label svg.lucide,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-label svg.lucide,
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-save svg.lucide,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-save svg.lucide,
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-crumb svg.lucide,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-crumb svg.lucide,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.light .bp-ic,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.light .bp-ic,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.light .bp-zoom,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.light .bp-zoom,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.light .bp-label,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.light .bp-label,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.light .bp-save,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.light .bp-save,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.light .bp-crumb #pb-page,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.light .bp-crumb #pb-page{
  color:rgba(29,29,31,.88) !important;
  stroke:rgba(29,29,31,.88) !important;
}
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-crumb em,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-crumb em,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.light .bp-crumb em,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.light .bp-crumb em{
  color:rgba(60,60,67,.35) !important;
}
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-crumb #pb-page,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-crumb #pb-page,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.light .bp-crumb #pb-page,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.light .bp-crumb #pb-page{
  color:rgba(60,60,67,.55) !important;
}
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-save .save-state,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-save .save-state,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.light .bp-save .save-state,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.light .bp-save .save-state{
  color:rgba(60,60,67,.72) !important;
}
html[data-theme="dark"] #view-app .builder .b-pill.light .bp-div,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light .bp-div,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.light .bp-div,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.light .bp-div{
  background:rgba(60,60,67,.16) !important;
}
html[data-theme="dark"] #view-app .builder #inspector .ds-panel-btn,
html[data-hig-theme*="dark"] #view-app .builder #inspector .ds-panel-btn,
html[data-theme="dark"] body.builder-live #inspector .ds-panel-btn,
html[data-hig-theme*="dark"] body.builder-live #inspector .ds-panel-btn,
html[data-theme="dark"] #view-app #panel-left .lp-tab,
html[data-hig-theme*="dark"] #view-app #panel-left .lp-tab,
html[data-theme="dark"] #view-app .builder .lp-tab,
html[data-hig-theme*="dark"] #view-app .builder .lp-tab,
html[data-theme="dark"] #view-app .builder #inspector .insp-tab,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-tab,
html[data-theme="dark"] body.builder-live #inspector .insp-tab,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-tab{
  color:rgba(235,235,245,.78) !important;
}
html[data-theme="dark"] #view-app .builder #inspector .ds-panel-btn.on,
html[data-hig-theme*="dark"] #view-app .builder #inspector .ds-panel-btn.on,
html[data-theme="dark"] body.builder-live #inspector .ds-panel-btn.on,
html[data-hig-theme*="dark"] body.builder-live #inspector .ds-panel-btn.on,
html[data-theme="dark"] #view-app .builder .lp-tab.on,
html[data-hig-theme*="dark"] #view-app .builder .lp-tab.on,
html[data-theme="dark"] #view-app .builder #inspector .insp-tab.on,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-tab.on,
html[data-theme="dark"] body.builder-live #inspector .insp-tab.on,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-tab.on{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .builder #inspector .insp-pane-label,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-pane-label,
html[data-theme="dark"] #view-app .builder #inspector .insp-style-card .field > label,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-style-card .field > label,
html[data-theme="dark"] body.builder-live #inspector .insp-style-card .field--live > label,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-style-card .field--live > label,
html[data-theme="dark"] #view-app .builder #inspector .insp-style-hint,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-style-hint,
html[data-theme="dark"] #view-app .builder #inspector .insp-group .ig-head,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-group .ig-head,
html[data-theme="dark"] #view-app .builder .block-item .bi-meta,
html[data-hig-theme*="dark"] #view-app .builder .block-item .bi-meta,
html[data-theme="dark"] #view-app .builder .block-item .bi-fav,
html[data-hig-theme*="dark"] #view-app .builder .block-item .bi-fav{
  color:rgba(235,235,245,.72) !important;
}
html[data-theme="dark"] #view-app .builder .block-item .bi-name,
html[data-hig-theme*="dark"] #view-app .builder .block-item .bi-name,
html[data-theme="dark"] #view-app .builder #inspector .insp-style-card-head,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-style-card-head,
html[data-theme="dark"] body.builder-live #inspector .insp-style-card-head,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-style-card-head{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .bd-color-hex-label,
html[data-hig-theme*="dark"] #view-app .bd-color-hex-label,
html[data-theme="dark"] body.builder-live .bd-color-hex-label,
html[data-hig-theme*="dark"] body.builder-live .bd-color-hex-label,
html[data-theme="dark"] body > .bd-color-pop .bd-color-hex-label,
html[data-hig-theme*="dark"] body > .bd-color-pop .bd-color-hex-label{
  color:rgba(235,235,245,.62) !important;
  opacity:1 !important;
}
html[data-theme="dark"] #view-app .bd-color-hex-hash,
html[data-hig-theme*="dark"] #view-app .bd-color-hex-hash,
html[data-theme="dark"] body.builder-live .bd-color-hex-hash,
html[data-hig-theme*="dark"] body.builder-live .bd-color-hex-hash,
html[data-theme="dark"] body > .bd-color-pop .bd-color-hex-hash,
html[data-hig-theme*="dark"] body > .bd-color-pop .bd-color-hex-hash{
  color:rgba(235,235,245,.55) !important;
  opacity:1 !important;
  border:none !important;
  border-right:1px solid rgba(255,255,255,.12) !important;
  background:rgba(118,118,128,.16) !important;
}
html[data-theme="dark"] #view-app .bd-color-hex,
html[data-hig-theme*="dark"] #view-app .bd-color-hex,
html[data-theme="dark"] body.builder-live .bd-color-hex,
html[data-hig-theme*="dark"] body.builder-live .bd-color-hex,
html[data-theme="dark"] body > .bd-color-pop .bd-color-hex,
html[data-hig-theme*="dark"] body > .bd-color-pop .bd-color-hex{
  color:#f5f5f7 !important;
  -webkit-text-fill-color:#f5f5f7 !important;
  caret-color:#f5f5f7 !important;
}
html[data-theme="dark"] #view-app .bd-color-hex-field,
html[data-hig-theme*="dark"] #view-app .bd-color-hex-field,
html[data-theme="dark"] body.builder-live .bd-color-hex-field,
html[data-hig-theme*="dark"] body.builder-live .bd-color-hex-field,
html[data-theme="dark"] body > .bd-color-pop .bd-color-hex-field,
html[data-hig-theme*="dark"] body > .bd-color-pop .bd-color-hex-field{
  background:rgba(118,118,128,.22) !important;
  border:none !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] #view-app .bd-color-hex-field:focus-within,
html[data-hig-theme*="dark"] #view-app .bd-color-hex-field:focus-within,
html[data-theme="dark"] body.builder-live .bd-color-hex-field:focus-within,
html[data-hig-theme*="dark"] body.builder-live .bd-color-hex-field:focus-within,
html[data-theme="dark"] body > .bd-color-pop .bd-color-hex-field:focus-within,
html[data-hig-theme*="dark"] body > .bd-color-pop .bd-color-hex-field:focus-within{
  background:rgba(118,118,128,.3) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.22),
    0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 28%,transparent) !important;
}
html[data-theme="dark"] #view-app .bd-color-hex-swatch,
html[data-hig-theme*="dark"] #view-app .bd-color-hex-swatch,
html[data-theme="dark"] body.builder-live .bd-color-hex-swatch,
html[data-hig-theme*="dark"] body.builder-live .bd-color-hex-swatch,
html[data-theme="dark"] body > .bd-color-pop .bd-color-hex-swatch,
html[data-hig-theme*="dark"] body > .bd-color-pop .bd-color-hex-swatch{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 1px 3px rgba(0,0,0,.35) !important;
}
/* Kill nested pill from generic #inspector .field input rules */
#view-app .builder #inspector .bd-color-hex-field .bd-color-hex,
#view-app #inspector .bd-color-hex-field .bd-color-hex,
#view-app .studio-page--settings .bd-color-hex-field .bd-color-hex,
body.builder-live #inspector .bd-color-hex-field .bd-color-hex,
body > .bd-color-pop .bd-color-hex-field .bd-color-hex{
  appearance:none !important;
  flex:1 1 auto !important;
  width:auto !important;
  max-width:none !important;
  min-height:0 !important;
  height:38px !important;
  margin:0 !important;
  padding:0 0 0 12px !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace) !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  line-height:38px !important;
  color:inherit !important;
}
#view-app .builder #inspector .bd-color-hex-field,
#view-app #inspector .bd-color-hex-field,
body.builder-live #inspector .bd-color-hex-field,
body > .bd-color-pop .bd-color-hex-field{
  align-items:center !important;
  max-width:none !important;
  border-radius:10px !important;
}
#view-app .builder #inspector .bd-color-hex-hash,
#view-app #inspector .bd-color-hex-hash,
body.builder-live #inspector .bd-color-hex-hash,
body > .bd-color-pop .bd-color-hex-hash{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:stretch !important;
  box-sizing:border-box !important;
  width:36px !important;
  min-width:36px !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  text-align:center !important;
  border-radius:0 !important;
}
html[data-theme="dark"] #ctx-menu.ins-pal-menu .ip-search,
html[data-hig-theme*="dark"] #ctx-menu.ins-pal-menu .ip-search{
  color:rgba(235,235,245,.55) !important;
  background:rgba(118,118,128,.22) !important;
}
html[data-theme="dark"] #ctx-menu.ins-pal-menu .ip-search input,
html[data-hig-theme*="dark"] #ctx-menu.ins-pal-menu .ip-search input,
html[data-theme="dark"] #ctx-menu.ins-pal-menu .ip-search input::placeholder,
html[data-hig-theme*="dark"] #ctx-menu.ins-pal-menu .ip-search input::placeholder{
  color:rgba(235,235,245,.72) !important;
}

/* =====================================================================
   Mobile UI pass � Studio shell, pages, builder (=900 / =720 / =640)
===================================================================== */
@media (max-width:900px){
  #view-app .page{
    max-width:100% !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:max(14px,env(safe-area-inset-left,0px)) !important;
    padding-right:max(14px,env(safe-area-inset-right,0px)) !important;
    padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)) !important;
  }
  #view-app .page.full{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  #view-app .page > .pill-notch,
  #view-app .page > .topbar.pill-notch{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #view-app .studio-page--settings,
  #view-app .studio-page--cowork,
  #view-app .console-page{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #view-app .studio-page .page-head{
    flex-wrap:wrap;
    gap:12px;
  }
  #view-app .studio-page .page-head .actions{
    width:100%;
    margin-left:0;
    justify-content:stretch;
  }
  #view-app .studio-page .page-head .actions .btn{
    flex:1 1 auto;
    justify-content:center;
    min-height:44px;
  }

/* */
  #view-app .studio-page--settings .settings-nav,
  #view-app .studio-page--settings .settings-nav.liquid-glass{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin-bottom:16px !important;
  }
  #view-app .studio-page--settings .settings-nav-track{
    display:flex !important;
    align-items:center !important;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:2px;
    padding:3px !important;
    border-radius:980px !important;
    background:rgba(120,120,128,.14) !important;
    box-sizing:border-box !important;
  }
  #view-app .studio-page--settings .settings-nav-track::-webkit-scrollbar{display:none}
  #view-app .studio-page--settings .settings-tab{
    flex:0 0 auto;
    min-height:36px;
    padding:0 14px;
  }
  #view-app .studio-page--settings .ds-panels{
    overflow:hidden;
  }
  #view-app .studio-page--settings .ds-panel-btn{
    min-height:34px;
    font-size:11px;
    padding:0 4px;
  }
  #view-app .studio-page--settings .ds-group .ds-row{
    flex-wrap:wrap;
    align-items:stretch;
    gap:10px;
    padding:14px;
    min-height:0;
  }
  #view-app .studio-page--settings .ds-group .ds-row > label{
    flex:1 1 100%;
    max-width:100%;
  }
  #view-app .studio-page--settings .ds-group .ds-row .seg,
  #view-app .studio-page--settings .ds-group .ds-row .bd-select,
  #view-app .studio-page--settings .ds-group .ds-row > input{
    flex:1 1 100% !important;
    max-width:100% !important;
    width:100% !important;
  }
  #view-app .studio-page--settings .ds-group .ds-row .seg{
    justify-content:stretch;
  }
  #view-app .studio-page--settings .ds-group .ds-row .seg button{
    flex:1 1 0;
    min-height:36px !important;
  }
  #view-app .studio-page--settings .settings-card,
  #view-app .studio-page--settings .settings-block{
    padding-left:14px;
    padding-right:14px;
  }

  /* Crew */
  #view-app .studio-page--cowork .cw-card{
    padding:16px 14px 14px !important;
  }
  #view-app .studio-page--cowork .cw-people-head{
    display:none;
  }
  #view-app .studio-page--cowork .team-member-row{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:14px !important;
  }
  #view-app .studio-page--cowork .team-member-actions{
    justify-content:flex-start !important;
  }
  #view-app .studio-page--cowork .cw-invite-row{
    flex-direction:column;
    align-items:stretch;
  }
  #view-app .studio-page--cowork .cw-invite-row .btn{
    width:100%;
    min-height:44px;
    justify-content:center;
  }

  /* Console */
  #view-app .console-page .console-health-cta{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px;
    width:calc(100% - 20px);
    margin-left:10px;
    margin-right:10px;
  }
  #view-app .console-page .console-health-counts{
    flex:1 1 100%;
  }
  #view-app .console-page .console-health-go{
    margin-left:auto;
  }
  #view-app .console-page .dash-stats{
    gap:8px;
  }

  /* Sites toolbar */
  #view-app .studio-page--design .sites-toolbar,
  #view-app .studio-page--sites .sites-toolbar{
    flex-wrap:wrap;
    gap:10px;
  }

  /* Touch-friendlier side nav hits */
  #view-app .side-nav button,
  #view-app .side-ext{
    min-height:44px;
  }
  #view-app .side-user{
    min-height:56px;
  }
}

@media (max-width:720px){
  #view-app .studio-page .page-head h1{
    font-size:26px !important;
  }
  #view-app .studio-page--settings .ds-panels{
    gap:0;
  }
  #view-app .studio-page--settings .ds-panel-btn{
    font-size:11.5px;
    letter-spacing:-.02em;
  }
  #view-app .console-page .console-insights,
  #view-app .console-page .console-mid,
  #view-app .console-page .console-lower{
    gap:12px;
  }
  #view-app .modal,
  #modal-box.modal{
    max-width:calc(100vw - 20px) !important;
    margin:10px !important;
  }
}

@media (max-width:640px){
  #view-app .page > .pill-notch,
  #view-app .page > .topbar.pill-notch{
    height:48px !important;
    padding:0 8px !important;
  }
  #view-app .pill-crumb{
    max-width:min(96px,26vw);
    font-size:13px;
  }
  #view-app .live-chip .live-label{
    max-width:4.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #view-app .console-page .dash-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #view-app .studio-page--settings .settings-danger-row,
  #view-app .studio-page--settings .settings-copy-row,
  #view-app .studio-page--settings .card-row{
    flex-direction:column;
    align-items:stretch;
  }
  #view-app .studio-page--settings .settings-danger-row .btn,
  #view-app .studio-page--settings .settings-copy-row .btn{
    width:100%;
    justify-content:center;
    min-height:44px;
  }
  #view-app .user-menu.user-menu--dock,
  #view-app .user-menu--dock{
    left:8px;
    right:8px;
    width:auto;
  }
  #view-app .user-menu--dock button,
  #view-app .user-menu--dock a{
    min-height:44px;
  }
}

/* */

/* Pill stays in canvas column; hide labels before it overflows */
@media (max-width:1280px){
  body.builder-immersive #view-app .b-pill.liquid-glass,
  #view-app .builder .b-pill.liquid-glass,
  #view-app .page .builder .b-pill.liquid-glass{
    --bp-rail-l:302px;
    --bp-rail-r:348px;
    max-width:calc(100vw - var(--bp-rail-l) - var(--bp-rail-r)) !important;
  }
  #view-app .builder .b-pill .bp-label span,
  #view-app .builder .b-pill .bp-crumb #pb-site{
    display:none !important;
  }
}
@media (max-width:1100px){
  body.builder-immersive #view-app .b-pill.liquid-glass,
  #view-app .builder .b-pill.liquid-glass,
  #view-app .page .builder .b-pill.liquid-glass{
    --bp-rail-l:272px;
    --bp-rail-r:300px;
    max-width:calc(100vw - var(--bp-rail-l) - var(--bp-rail-r)) !important;
  }
}
@media (max-width:760px){
  body.builder-immersive #view-app .b-pill.liquid-glass,
  #view-app .builder .b-pill.liquid-glass{
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    transform:none !important;
    -webkit-transform:none !important;
    padding:0 6px !important;
    height:46px !important;
  }
  #view-app .builder .b-pill .bp-zoom,
  #view-app .builder .b-pill .bp-label span,
  #view-app .builder .b-pill .bp-save .save-state{
    display:none !important;
  }
  #view-app .builder .b-pill .bp-crumb{
    max-width:min(140px,36vw) !important;
  }
  body.builder-immersive #inspector,
  #view-app .builder #inspector{
    width:100% !important;
    max-width:100% !important;
    /* Keep full rounding on mobile sheet — never square the bottom */
    border-radius:22px 22px 0 0 !important;
    clip-path:inset(0 round 22px 22px 0 0) !important;
  }
  /* Live drawer keeps its own fixed geometry — do not sheet-clip it here */
  body.builder-live #view-app #inspector,
  body.builder-live #inspector{
    width:min(392px,calc(100vw - 28px)) !important;
    max-width:392px !important;
    border-radius:22px !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
  }
  #view-app .builder #inspector .insp-tab,
  body.builder-live #inspector .insp-tab{
    min-height:40px;
    font-size:13px;
  }
  #view-app .builder #inspector .ds-panels,
  body.builder-live #inspector .ds-panels{
    overflow:visible !important;
  }
  #view-app .builder #inspector .ds-panel-btn,
  body.builder-live #inspector .ds-panel-btn{
    min-height:34px !important;
    font-size:10.5px !important;
    padding:0 3px !important;
  }
  body.builder-immersive .mb-bar,
  #view-app .builder .mb-bar{
    z-index:180 !important;
  }
  /* Keep canvas clear of bottom dock */
  body.builder-immersive #view-app .builder .canvas-wrap,
  #view-app .builder .canvas-wrap{
    padding-bottom:calc(78px + env(safe-area-inset-bottom,0px)) !important;
  }
}

@media (max-width:420px){
  #view-app .studio-page--settings .ds-panel-btn{
    padding:0 6px;
    font-size:11px;
  }
  #view-app .console-page .console-health-counts em{
    font-size:10px;
    padding:2px 6px;
  }
}
html[data-theme="dark"] #view-app .studio-page--settings .settings-nav-track,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-nav-track{
  background:rgba(118,118,128,.28) !important;
}

html[data-theme="dark"] .live-chrome-inner,
html[data-hig-theme*="dark"] .live-chrome-inner{
  background:rgba(44,44,46,.94) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 32px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] .lc-crumb,
html[data-hig-theme*="dark"] .lc-crumb,
html[data-theme="dark"] .lc-ic,
html[data-hig-theme*="dark"] .lc-ic,
html[data-theme="dark"] .lc-add,
html[data-hig-theme*="dark"] .lc-add{
  color:#f5f5f7 !important;
}
html[data-theme="dark"] .lc-crumb:hover,
html[data-hig-theme*="dark"] .lc-crumb:hover,
html[data-theme="dark"] .lc-ic:hover,
html[data-hig-theme*="dark"] .lc-ic:hover{
  background:rgba(255,255,255,.1) !important;
}
html[data-theme="dark"] .lc-add,
html[data-hig-theme*="dark"] .lc-add{
  background:rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .lc-div,
html[data-hig-theme*="dark"] .lc-div{
  background:rgba(235,235,245,.16) !important;
}


/* =====================================================================
   Site-wide pill surrounds — never square rings / clipped thumbs
   Platform .seg/.tabs use 10px/7px; force Apple capsules everywhere.
===================================================================== */
#view-app .seg,
#view-app .tabs,
#view-app .settings-nav-track,
#view-app .lp-tabs,
#view-app .bs-tabs,
#view-app .health-find-filter,
#view-app .builder #inspector .insp-tabs,
#view-app .builder #inspector .ds-panels,
body.builder-live #inspector .insp-tabs,
body.builder-live #inspector .insp-tabs--live,
body.builder-live #inspector .ds-panels,
.modal .seg,
.modal .tabs,
.popover-root .seg,
.popover-root .tabs{
  border-radius:9999px !important;
  overflow:hidden !important;
}

#view-app .seg button,
#view-app .tabs button,
#view-app .settings-tab,
#view-app .lp-tab,
#view-app .bs-tabs button,
#view-app .health-find-filter button,
#view-app .builder #inspector .insp-tab,
#view-app .builder #inspector .ds-panel-btn,
#view-app .builder #inspector .ds-group .ds-row .seg button,
#view-app .studio-page--settings .ds-group .ds-row .seg button,
#view-app .studio-page--settings .settings-seg .seg button,
#view-app .studio-page--settings .settings-card > .seg button,
body.builder-live #inspector .insp-tab,
body.builder-live #inspector .insp-tabs--live .insp-tab,
body.builder-live #inspector .ds-panel-btn,
.modal .seg button,
.modal .tabs button{
  border-radius:9999px !important;
  outline:none !important;
}

#view-app .seg button.on,
#view-app .tabs button.on,
#view-app .settings-tab.on,
#view-app .lp-tab.on,
#view-app .bs-tabs button.on,
#view-app .health-find-filter button.on,
#view-app .builder #inspector .insp-tab.on,
#view-app .builder #inspector .ds-panel-btn.on,
body.builder-live #inspector .insp-tab.on,
body.builder-live #inspector .insp-tabs--live .insp-tab.on,
body.builder-live #inspector .ds-panel-btn.on,
.modal .seg button.on,
.modal .tabs button.on{
  border-radius:9999px !important;
}

/* Square outline → pill focus ring */
#view-app .seg button:focus-visible,
#view-app .tabs button:focus-visible,
#view-app .settings-tab:focus-visible,
#view-app .lp-tab:focus-visible,
#view-app .bs-tabs button:focus-visible,
#view-app .health-find-filter button:focus-visible,
#view-app .builder #inspector .insp-tab:focus-visible,
#view-app .builder #inspector .ds-panel-btn:focus-visible,
#view-app .studio-page--settings .ds-group .ds-row .seg button:focus-visible,
#view-app .studio-page--settings .settings-seg .seg button:focus-visible,
#view-app .studio-page--settings .settings-card > .seg button:focus-visible,
#view-app #inspector .ds-group .ds-row .seg button:focus-visible,
body.builder-live #inspector .insp-tab:focus-visible,
body.builder-live #inspector .ds-panel-btn:focus-visible,
.modal .seg button:focus-visible,
.modal .tabs button:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint,#355cff) 28%,transparent) !important;
}

/* Don't let inspector chrome paint a square dark slab over rounded panel */
#view-app .builder #inspector .insp-chrome,
body.builder-live #inspector .insp-chrome--live{
  overflow:visible !important;
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Mobile must not reintroduce rectangular clip on Design panels */
@media (max-width:760px){
  #view-app .builder #inspector .ds-panels,
  body.builder-live #inspector .ds-panels,
  #view-app .builder #inspector .insp-tabs,
  body.builder-live #inspector .insp-tabs,
  body.builder-live #inspector .insp-tabs--live{
    overflow:visible !important;
    border-radius:9999px !important;
  }
}

/* =====================================================================
   Restore rounded Design system / Library surrounds
   Glass fill + border must share the same clip — never overflow:visible
   on these panels (that left dark fills looking square inside a rim).
===================================================================== */
#view-app #panel-left,
#view-app #inspector,
#view-app .builder .panel-left,
#view-app .builder .panel-right,
#view-app .builder #inspector,
#view-app .builder #inspector.liquid-glass,
#view-app .builder #inspector.insp-tabbed,
#view-app .builder .panel-left.liquid-glass,
#view-app .builder .panel-right.liquid-glass,
#view-app .builder.immersive .panel-left,
#view-app .builder.immersive .panel-right,
#view-app .builder.immersive #inspector,
body.builder-immersive #panel-left,
body.builder-immersive #inspector,
body.builder-immersive #view-app .builder .panel-left,
body.builder-immersive #view-app .builder .panel-right,
body.builder-immersive #view-app .builder #inspector{
  border-radius:28px !important;
  overflow:hidden !important;
  background-clip:padding-box !important;
  -webkit-background-clip:padding-box !important;
  clip-path:inset(0 round 28px) !important;
  -webkit-clip-path:inset(0 round 28px) !important;
}

#view-app .builder #inspector .ds-token-body--panels .ds-group,
#view-app .builder #inspector .insp-stack,
#view-app .builder #inspector .insp-seo-card,
#view-app .builder #inspector .insp-style-card,
#view-app .builder #inspector .insp-group,
body.builder-live #inspector .insp-stack,
body.builder-live #inspector .insp-seo-card,
body.builder-live #inspector .insp-style-card{
  border-radius:16px !important;
  overflow:hidden !important;
}

/* Beat earlier overflow:hidden on transparent radius-0 tracks */
#view-app .builder #inspector .ds-group .ds-row .seg,
#view-app #inspector .ds-group .ds-row .seg,
#view-app .studio-page--settings .ds-group .ds-row .seg,
body.builder-live #inspector .ds-group .ds-row .seg,
:is(.studio-page--settings, #inspector) .ds-group .ds-row .seg{
  border-radius:9999px !important;
  overflow:hidden !important;
  background:rgba(120,120,128,.14) !important;
  padding:3px !important;
  gap:2px !important;
  border:none !important;
  box-shadow:none !important;
}
html[data-theme="dark"] #view-app .builder #inspector .ds-group .ds-row .seg,
html[data-hig-theme*="dark"] #view-app .builder #inspector .ds-group .ds-row .seg,
html[data-theme="dark"] #view-app #inspector .ds-group .ds-row .seg,
html[data-hig-theme*="dark"] #view-app #inspector .ds-group .ds-row .seg,
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row .seg,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row .seg,
html[data-theme="dark"] body.builder-live #inspector .ds-group .ds-row .seg,
html[data-hig-theme*="dark"] body.builder-live #inspector .ds-group .ds-row .seg,
html[data-theme="dark"] :is(.studio-page--settings, #inspector) .ds-group .ds-row .seg,
html[data-hig-theme*="dark"] :is(.studio-page--settings, #inspector) .ds-group .ds-row .seg{
  background:rgba(118,118,128,.28) !important;
}

#view-app .builder #inspector .ds-group .ds-row .seg button,
#view-app #inspector .ds-group .ds-row .seg button,
#view-app .studio-page--settings .ds-group .ds-row .seg button,
body.builder-live #inspector .ds-group .ds-row .seg button,
:is(.studio-page--settings, #inspector) .ds-group .ds-row .seg button{
  border-radius:9999px !important;
  overflow:hidden !important;
}

/* Library accordion cards stay soft-rounded */
#view-app .builder .lib-sec{
  border-radius:14px !important;
  overflow:hidden !important;
}
#view-app .builder .block-item{
  border-radius:12px !important;
}
#view-app .builder .bi-icon{
  border-radius:10px !important;
}

/* Page chrome / sheet keep rounded frame in builder */
#view-app .builder .page-chrome{
  border-radius:16px 16px 0 0 !important;
}
#view-app .builder .page-sheet{
  border-radius:0 0 16px 16px !important;
}
#view-app .builder .page-frame{
  border-radius:16px !important;
  overflow:hidden !important;
}

/* Intensity / 3–4 option segs: label above, full-width track, no collisions */
#view-app .builder #inspector .ds-group .ds-row--stack,
#view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row--stack,
#view-app .studio-page--settings .ds-group .ds-row--stack,
body.builder-live #inspector .ds-group .ds-row--stack,
#view-app #inspector .ds-group .ds-row--stack{
  flex-direction:column !important;
  align-items:stretch !important;
  gap:8px !important;
}
#view-app .builder #inspector .ds-group .ds-row--stack > label,
#view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row--stack > label,
#view-app .studio-page--settings .ds-group .ds-row--stack > label,
body.builder-live #inspector .ds-group .ds-row--stack > label,
#view-app #inspector .ds-group .ds-row--stack > label{
  flex:0 0 auto !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
#view-app .builder #inspector .ds-group .ds-row--stack .seg,
#view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row--stack .seg,
#view-app .studio-page--settings .ds-group .ds-row--stack .seg,
body.builder-live #inspector .ds-group .ds-row--stack .seg,
#view-app #inspector .ds-group .ds-row--stack .seg{
  display:flex !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  max-width:none !important;
  overflow:hidden !important;
  border-radius:9999px !important;
  padding:3px !important;
  gap:2px !important;
  box-sizing:border-box !important;
}
#view-app .builder #inspector .ds-group .ds-row--stack .seg button,
#view-app .builder #inspector .ds-token-body--panels .ds-group .ds-row--stack .seg button,
#view-app .studio-page--settings .ds-group .ds-row--stack .seg button,
body.builder-live #inspector .ds-group .ds-row--stack .seg button,
#view-app #inspector .ds-group .ds-row--stack .seg button{
  flex:1 1 0 !important;
  min-width:0 !important;
  max-width:none !important;
  padding:0 6px !important;
  font-size:12px !important;
  font-weight:550 !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  position:relative !important;
  z-index:0 !important;
}
#view-app .builder #inspector .ds-group .ds-row--stack .seg button.on,
#view-app .studio-page--settings .ds-group .ds-row--stack .seg button.on,
body.builder-live #inspector .ds-group .ds-row--stack .seg button.on,
#view-app #inspector .ds-group .ds-row--stack .seg button.on{
  z-index:1 !important;
  font-weight:600 !important;
}

/* Top pill notch — always capsule, never card radius */
#view-app .pill-notch,
#view-app .pill-notch.liquid-glass,
#view-app .topbar.pill-notch,
#view-app .topbar.pill-notch.liquid-glass,
#view-app .page > .pill-notch,
#view-app .page > .topbar.pill-notch{
  border-radius:9999px !important;
}

/* Builder pill — dark glass when Studio is dark and chrome is not Light */
html[data-theme="dark"] #view-app .builder .b-pill:not(.light),
html[data-hig-theme*="dark"] #view-app .builder .b-pill:not(.light),
html[data-theme="dark"] #view-app .builder .b-pill.liquid-glass:not(.light),
html[data-hig-theme*="dark"] #view-app .builder .b-pill.liquid-glass:not(.light),
html[data-theme="dark"] body.builder-immersive #view-app .b-pill:not(.light),
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill:not(.light),
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.liquid-glass:not(.light),
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.liquid-glass:not(.light){
  background:rgba(28,28,30,.82) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:rgba(245,245,247,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 .5px rgba(0,0,0,.45),
    0 10px 32px rgba(0,0,0,.4) !important;
}
/* Light chrome preference wins over Studio dark for the bar surface */
html[data-theme="dark"] #view-app .builder .b-pill.light,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.light,
html[data-theme="dark"] #view-app .builder .b-pill.liquid-glass.light,
html[data-hig-theme*="dark"] #view-app .builder .b-pill.liquid-glass.light,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.light,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.light,
html[data-theme="dark"] body.builder-immersive #view-app .b-pill.liquid-glass.light,
html[data-hig-theme*="dark"] body.builder-immersive #view-app .b-pill.liquid-glass.light{
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  color:rgba(29,29,31,.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(0,0,0,.04),
    0 10px 28px rgba(0,0,0,.12) !important;
}
/* Always capsule — never card radius from .liquid-glass */
#view-app .builder .b-pill,
#view-app .builder .b-pill.liquid-glass,
body.builder-immersive #view-app .b-pill,
body.builder-immersive #view-app .b-pill.liquid-glass{
  border-radius:9999px !important;
}

/* Publish above Page SEO / Design panel — right-anchored, never under rail */
body.builder-immersive #view-app .b-pill,
body.builder-immersive #view-app .b-pill.liquid-glass,
#view-app .builder .b-pill,
#view-app .builder .b-pill.liquid-glass{
  z-index:12000 !important;
  left:auto !important;
  right:var(--bp-rail-r,348px) !important;
  margin:0 !important;
  transform:none !important;
  -webkit-transform:none !important;
  overflow:visible !important;
}
#view-app #inspector,
#view-app .builder #inspector,
#view-app .builder .panel-right,
#view-app #panel-left,
#view-app .builder .panel-left,
body.builder-immersive #inspector,
body.builder-immersive #panel-left,
body.builder-immersive #view-app .builder #inspector,
body.builder-immersive #view-app .builder .panel-left{
  z-index:40 !important;
}

/* Selected segment thumbs — always readable site-wide */
#view-app .lp-tab.on,
#view-app .seg button.on,
#view-app .tabs button.on,
#view-app .settings-tab.on,
#view-app .bs-tabs button.on,
#view-app .health-find-filter button.on,
#view-app .builder #inspector .insp-tab.on,
#view-app .builder #inspector .ds-panel-btn.on,
#view-app .studio-page--settings .settings-seg .seg button.on,
#view-app .studio-page--settings .settings-card > .seg button.on,
#view-app .studio-page--settings .ds-group .ds-row .seg button.on,
#view-app #inspector .ds-group .ds-row .seg button.on,
body.builder-live #inspector .insp-tab.on,
body.builder-live #inspector .insp-tabs--live .insp-tab.on,
body.builder-live #inspector .ds-panel-btn.on,
.modal .seg button.on,
.modal .tabs button.on{
  color:#1d1d1f !important;
  font-weight:600 !important;
  background:#fff !important;
  box-shadow:
    0 0 0 .5px rgba(0,0,0,.1),
    0 1px 2px rgba(0,0,0,.06),
    0 3px 10px rgba(0,0,0,.08) !important;
}
html[data-theme="dark"] #view-app .lp-tab.on,
html[data-hig-theme*="dark"] #view-app .lp-tab.on,
html[data-theme="dark"] #view-app .seg button.on,
html[data-hig-theme*="dark"] #view-app .seg button.on,
html[data-theme="dark"] #view-app .tabs button.on,
html[data-hig-theme*="dark"] #view-app .tabs button.on,
html[data-theme="dark"] #view-app .settings-tab.on,
html[data-hig-theme*="dark"] #view-app .settings-tab.on,
html[data-theme="dark"] #view-app .bs-tabs button.on,
html[data-hig-theme*="dark"] #view-app .bs-tabs button.on,
html[data-theme="dark"] #view-app .health-find-filter button.on,
html[data-hig-theme*="dark"] #view-app .health-find-filter button.on,
html[data-theme="dark"] #view-app .builder #inspector .insp-tab.on,
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-tab.on,
html[data-theme="dark"] #view-app .builder #inspector .ds-panel-btn.on,
html[data-hig-theme*="dark"] #view-app .builder #inspector .ds-panel-btn.on,
html[data-theme="dark"] #view-app .studio-page--settings .settings-seg .seg button.on,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-seg .seg button.on,
html[data-theme="dark"] #view-app .studio-page--settings .settings-card > .seg button.on,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .settings-card > .seg button.on,
html[data-theme="dark"] #view-app .studio-page--settings .ds-group .ds-row .seg button.on,
html[data-hig-theme*="dark"] #view-app .studio-page--settings .ds-group .ds-row .seg button.on,
html[data-theme="dark"] #view-app #inspector .ds-group .ds-row .seg button.on,
html[data-hig-theme*="dark"] #view-app #inspector .ds-group .ds-row .seg button.on,
html[data-theme="dark"] body.builder-live #inspector .insp-tab.on,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-tab.on,
html[data-theme="dark"] body.builder-live #inspector .insp-tabs--live .insp-tab.on,
html[data-hig-theme*="dark"] body.builder-live #inspector .insp-tabs--live .insp-tab.on,
html[data-theme="dark"] body.builder-live #inspector .ds-panel-btn.on,
html[data-hig-theme*="dark"] body.builder-live #inspector .ds-panel-btn.on,
html[data-theme="dark"] .modal .seg button.on,
html[data-hig-theme*="dark"] .modal .seg button.on,
html[data-theme="dark"] .modal .tabs button.on,
html[data-hig-theme*="dark"] .modal .tabs button.on{
  color:#f5f5f7 !important;
  background:rgba(120,120,128,.55) !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.16),
    0 1px 3px rgba(0,0,0,.35) !important;
}

/* Final: Design system / Library — force visible rounded clip (backdrop-filter safe)
   Live edit drawer is excluded — it uses its own fixed geometry below. */
html #view-app #panel-left,
html #view-app #inspector:not(.insp-live),
html #view-app #panel-left.liquid-glass,
html #view-app #inspector.liquid-glass:not(.insp-live),
html #view-app .builder .panel-left,
html #view-app .builder .panel-right,
html #view-app .builder .panel-left.liquid-glass,
html #view-app .builder .panel-right.liquid-glass,
html #view-app .builder #inspector:not(.insp-live),
html #view-app .builder #inspector.liquid-glass:not(.insp-live),
html #view-app .builder #inspector.insp-tabbed:not(.insp-live),
html body.builder-immersive:not(.builder-live) #panel-left,
html body.builder-immersive:not(.builder-live) #inspector,
html body.builder-immersive:not(.builder-live) #view-app .builder .panel-left,
html body.builder-immersive:not(.builder-live) #view-app .builder .panel-right,
html body.builder-immersive:not(.builder-live) #view-app .builder #inspector{
  border-radius:28px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  clip-path:inset(0 round 28px) !important;
  -webkit-clip-path:inset(0 round 28px) !important;
}
@media (max-width:760px){
  html body.builder-immersive:not(.builder-live) #inspector,
  html #view-app .builder #inspector:not(.insp-live),
  html body.builder-immersive:not(.builder-live) #view-app .builder #inspector{
    border-radius:28px 28px 0 0 !important;
    clip-path:inset(0 round 28px 28px 0 0) !important;
    -webkit-clip-path:inset(0 round 28px 28px 0 0) !important;
  }
}

/* Exclude live drawer from the side-panel rounded-clip hammer */
html body.builder-live #view-app #inspector,
html body.builder-live.builder-immersive #view-app #inspector,
html body.builder-live #view-app .builder #inspector,
html body.builder-live #view-app .builder #inspector.liquid-glass,
html body.builder-live #view-app .builder #inspector.insp-tabbed,
html body.builder-live #inspector,
html body.builder-live.builder-immersive #inspector{
  clip-path:none !important;
  -webkit-clip-path:none !important;
}

/* Kill square insp-chrome fill behind Design system header */
html #view-app .builder #inspector .insp-chrome,
html body.builder-live #inspector .insp-chrome--live{
  background:transparent !important;
  background-color:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border-radius:0 !important;
  box-shadow:inset 0 -1px 0 var(--apple-hairline,rgba(60,60,67,.1)) !important;
}

/* Live drawer must beat immersive side-panel geometry (height/margin/clip),
   otherwise the fixed sheet grows past the viewport and the page jumps down.
   Specificity needs 2 IDs (#view-app + #inspector) to beat the immersive
   `#view-app #inspector { position:relative; height:100vh }` hammer. */
html body.builder-live #view-app #inspector,
html body.builder-live.builder-immersive #view-app #inspector,
html body.builder-live #view-app .builder #inspector,
html body.builder-live #view-app .builder #inspector.liquid-glass,
html body.builder-live #view-app .builder #inspector.insp-tabbed,
html body.builder-live.builder-immersive #view-app .builder #inspector,
html body.builder-live #inspector,
html body.builder-live.builder-immersive #inspector{
  position:fixed !important;
  top:calc(56px + env(safe-area-inset-top,0px)) !important;
  right:12px !important;
  bottom:12px !important;
  left:auto !important;
  width:min(380px,calc(100vw - 28px)) !important;
  max-width:380px !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  flex:none !important;
  flex-basis:auto !important;
  z-index:10055 !important;
  border-radius:22px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  transform:translate3d(calc(100% + 36px),0,0) !important;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  box-sizing:border-box !important;
  background:rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter:blur(40px) saturate(190%) !important;
  backdrop-filter:blur(40px) saturate(190%) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(0,0,0,.04),
    0 28px 72px rgba(0,0,0,.18) !important;
  transition:transform .34s cubic-bezier(.2,.85,.2,1),opacity .22s ease,visibility 0s linear .34s !important;
}
html body.builder-live #view-app #inspector.live-open,
html body.builder-live.builder-immersive #view-app #inspector.live-open,
html body.builder-live #view-app .builder #inspector.live-open,
html body.builder-live #inspector.live-open,
html body.builder-live.builder-immersive #inspector.live-open{
  transform:translate3d(0,0,0) !important;
  opacity:1 !important;
  pointer-events:auto !important;
  visibility:visible !important;
  transition:transform .34s cubic-bezier(.2,.85,.2,1),opacity .22s ease,visibility 0s linear 0s !important;
}
html[data-theme="dark"] body.builder-live #view-app #inspector,
html[data-hig-theme*="dark"] body.builder-live #view-app #inspector,
html[data-theme="dark"] body.builder-live.builder-immersive #view-app #inspector,
html[data-hig-theme*="dark"] body.builder-live.builder-immersive #view-app #inspector,
html[data-theme="dark"] body.builder-live #inspector,
html[data-hig-theme*="dark"] body.builder-live #inspector,
html[data-theme="dark"] body.builder-live.builder-immersive #inspector,
html[data-hig-theme*="dark"] body.builder-live.builder-immersive #inspector{
  background:rgba(28,28,30,.88) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 28px 72px rgba(0,0,0,.55) !important;
}
@media (max-width:760px){
  html body.builder-live #view-app #inspector,
  html body.builder-live.builder-immersive #view-app #inspector,
  html body.builder-live #view-app .builder #inspector,
  html body.builder-live #inspector,
  html body.builder-live.builder-immersive #inspector{
    top:auto !important;
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:none !important;
    height:min(78vh,720px) !important;
    border-radius:22px 22px 0 0 !important;
    transform:translate3d(0,110%,0) !important;
  }
  html body.builder-live #view-app #inspector.live-open,
  html body.builder-live.builder-immersive #view-app #inspector.live-open,
  html body.builder-live #view-app .builder #inspector.live-open,
  html body.builder-live #inspector.live-open,
  html body.builder-live.builder-immersive #inspector.live-open{
    transform:translate3d(0,0,0) !important;
  }
}

/* Final: inactive segment labels readable in dark mode */
html[data-theme="dark"] #view-app #panel-left .lp-tab:not(.on),
html[data-hig-theme*="dark"] #view-app #panel-left .lp-tab:not(.on),
html[data-theme="dark"] #view-app .builder .lp-tab:not(.on),
html[data-hig-theme*="dark"] #view-app .builder .lp-tab:not(.on),
html[data-theme="dark"] #view-app .builder #inspector .insp-tab:not(.on),
html[data-hig-theme*="dark"] #view-app .builder #inspector .insp-tab:not(.on),
html[data-theme="dark"] #view-app .builder #inspector .ds-panel-btn:not(.on),
html[data-hig-theme*="dark"] #view-app .builder #inspector .ds-panel-btn:not(.on),
html[data-theme="dark"] #view-app .seg button:not(.on),
html[data-hig-theme*="dark"] #view-app .seg button:not(.on),
html[data-theme="dark"] #view-app .tabs button:not(.on),
html[data-hig-theme*="dark"] #view-app .tabs button:not(.on),
html[data-theme="dark"] #view-app .settings-tab:not(.on),
html[data-hig-theme*="dark"] #view-app .settings-tab:not(.on){
  color:rgba(235,235,245,.78) !important;
}

html body.builder-immersive #view-app .b-pill.liquid-glass,
html #view-app .builder .b-pill.liquid-glass{
  left:auto !important;
  right:var(--bp-rail-r,348px) !important;
  margin:0 !important;
  transform:none !important;
  -webkit-transform:none !important;
  z-index:12000 !important;
  overflow:visible !important;
}
html #view-app .builder .b-pill .bp-publish,
html body.builder-immersive #view-app .b-pill .bp-publish{
  flex:0 0 auto !important;
  position:relative !important;
  z-index:3 !important;
}

/* Final: Console fills the main column (beats studio-ui 1120 + side-collapsed 1120). */
html #view-app .page.page--wide,
html body.side-collapsed #view-app .page.page--wide,
html #view-app .page:has(> .console-page),
html #view-app .page:has(.console-page),
html body.side-collapsed #view-app .page:has(> .console-page),
html body.side-collapsed #view-app .page:has(.console-page){
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
html #view-app .page.page--wide > .console-page,
html #view-app .console-page,
html body.side-collapsed #view-app .page.page--wide > .console-page,
html body.side-collapsed #view-app .page > .console-page{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}