/* =====================================================================
   Browns Digital Studio — HIG component layer (presentation only)
===================================================================== */

body{
  font-family:var(--font-text);
  font-size:var(--type-footnote);
  line-height:1.47;
  color:var(--color-label-primary);
  background:var(--color-bg-primary);
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#view-app{
  font-size:var(--type-footnote);
  color:var(--color-label-primary);
}
/* status banners (demo / QA) sit above the shell — reserve their height so
   the app stays exactly one viewport tall and the window never scrolls */
body:has(#demo-banner.show) #view-app .shell,
body:has(#demo-banner.show) #view-app .side,
body:has(#demo-banner.show) #view-app .main,
body:has(#qa-banner:not([hidden])) #view-app .shell,
body:has(#qa-banner:not([hidden])) #view-app .side,
body:has(#qa-banner:not([hidden])) #view-app .main{
  height:calc(100vh - 34px);
  max-height:calc(100vh - 34px);
}
body:has(#demo-banner.show):has(#qa-banner:not([hidden])) #view-app .shell,
body:has(#demo-banner.show):has(#qa-banner:not([hidden])) #view-app .side,
body:has(#demo-banner.show):has(#qa-banner:not([hidden])) #view-app .main{
  height:calc(100vh - 68px);
  max-height:calc(100vh - 68px);
}

/* App shell — fixed viewport height, sidebar and main scroll independently.
   The window itself never scrolls: .main is the sole content scroller and
   the sidebar is a stationary full-height rail. */
#view-app .shell{
  background:var(--color-bg-grouped);
  background-image:none;
  height:100dvh;
  min-height:0;
  max-height:100dvh;
  align-items:stretch;
  flex-wrap:nowrap;
  overflow:hidden;
}
#view-app .main{
  flex:1;
  min-width:0;
  height:100dvh;
  display:block;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
}
#view-app .page{
  flex:none;
  display:block;
  overflow:visible;
}
body.side-collapsed #view-app .side{
  width:0;min-width:0;flex:0 0 0;margin:0;padding:0;opacity:0;
  border-width:0;overflow:hidden;pointer-events:none;
}
body.side-collapsed #view-app .main{flex:1;width:100%;max-width:none}
body.side-collapsed #view-app .page{max-width:none}
h1{font-size:var(--type-title-1);line-height:1.15;font-family:var(--font-display)}
h2{font-size:var(--type-title-3);line-height:1.2;font-family:var(--font-display)}
h3{font-size:var(--type-headline);line-height:1.25;font-family:var(--font-display)}
.page-head h1{font-size:var(--type-title-2);font-weight:600;letter-spacing:-0.02em}

svg.lucide{width:16px;height:16px;stroke-width:2;flex:0 0 auto;color:var(--color-label-secondary)}
.lu14{width:16px!important;height:16px!important;stroke-width:2}
.lu16{width:17px!important;height:17px!important;stroke-width:2}
.lu20{width:20px!important;height:20px!important}

.pill-notch,
.topbar.pill-notch{
  position:relative;
  top:auto;left:auto;right:auto;transform:none;
  z-index:20;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--space-2);
  min-width:min(100%,260px);
  max-width:min(720px,calc(100% - 32px));
  width:100%;
  height:var(--pill-notch-h);
  margin:calc(env(safe-area-inset-top,0px) + 12px) auto var(--space-3);
  padding:0 var(--space-3);
  border-radius:9999px;
  background:var(--glass-fill);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow),var(--glass-specular);
  transition:box-shadow var(--motion-page-dur) var(--motion-page),background var(--motion-page-dur) var(--motion-page);
  overflow:hidden;
  isolation:isolate;
  flex-shrink:0;
}
.pill-notch.is-scrolled{
  background:color-mix(in srgb,var(--glass-fill) 96%,transparent);
}
.pill-notch-leading,.pill-notch-center,.pill-notch-trailing{display:flex;align-items:center;gap:var(--space-1)}
.pill-notch-center{justify-content:center;min-width:0;flex:1}
.pill-notch-trailing{justify-content:flex-end}
.pill-crumb{
  font-size:15px;font-weight:600;color:var(--color-label-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:min(200px,34vw);letter-spacing:-0.015em;
}
.pill-notch .icon-btn,.pill-hit{
  width:34px;height:34px;min-width:34px;min-height:34px;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--color-label-primary);transition:transform 100ms var(--motion-spring),background var(--motion-hover);
}
.pill-notch .icon-btn:hover{background:var(--color-fill-secondary)}
.pill-notch .icon-btn:active{transform:scale(0.94)}
.live-chip{
  width:auto;min-width:auto;height:34px;padding:0 10px;gap:6px;
  border-radius:999px;border:none;background:transparent;
}
.live-chip .dot{display:none}
.live-chip .live-label{font-size:12px;font-weight:500;color:var(--color-label-secondary);white-space:nowrap}
.live-chip:hover{background:var(--color-fill-secondary)}
.pill-notch .search-pill{
  min-height:34px;padding:0 14px;border-radius:999px;border:none;
  background:transparent;color:var(--color-label-tertiary);
  font-size:13px;max-width:220px;min-width:140px;flex:1;box-shadow:none;margin:0;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;
}
.pill-notch .search-pill span{color:var(--color-label-tertiary)}
.pill-notch .search-pill:hover,.pill-notch .search-pill:focus-visible{
  background:var(--color-fill-secondary);color:var(--color-label-secondary);outline:none;
}
.pill-notch .search-pill svg.lucide{color:var(--color-label-tertiary);flex:0 0 auto;display:block}
.pill-notch .search-pill kbd{
  font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;
  background:color-mix(in srgb,var(--color-fill-tertiary) 70%,transparent);
  color:var(--color-label-tertiary);
  border:1px solid color-mix(in srgb,var(--color-separator) 55%,transparent);
  box-shadow:none;margin-left:auto;
}
#top-bell{position:relative;overflow:visible}
.bell-n{
  position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--color-tint);pointer-events:none;
  box-shadow:0 0 0 1.5px var(--glass-fill);
}
.bell-n.bell-pop{animation:bell-pop 300ms var(--motion-spring) both}
@keyframes bell-pop{
  from{transform:scale(0.6);opacity:0}
  50%{transform:scale(1.15)}
  to{transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .bell-n.bell-pop{animation:none;opacity:1;transform:none}
}

#view-app .shell{padding-top:0}
body.builder-immersive #view-app .main{padding-top:0}
body.builder-immersive .pill-notch{display:none!important;opacity:1;pointer-events:none;transform:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:36px;padding:0 16px;border-radius:8px;border:none;
  font-size:var(--type-footnote);font-weight:500;font-family:var(--font-text);line-height:1;
  transition:transform 100ms var(--motion-spring),filter var(--motion-hover),background var(--motion-hover);
}
.btn .lucide{width:14px;height:14px;flex:0 0 auto;display:block}
.btn-cta svg.lucide,.btn-brand svg.lucide,.btn-dark svg.lucide{color:#fff;stroke:#fff}
.btn:active{transform:scale(0.97)}
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint) 40%,transparent);
}
.btn-sm{min-height:28px;padding:0 10px;font-size:var(--type-caption-1);border-radius:7px;font-weight:500}
.btn-cta,.btn-brand{background:var(--color-tint);color:#fff;border:none}
.btn-cta:hover,.btn-brand:hover{filter:brightness(1.06);text-decoration:none}
.btn-dark{background:var(--color-label-primary);color:var(--color-bg-primary)}
.btn-ghost{background:var(--color-fill-primary);color:var(--color-label-primary);border:none;box-shadow:none}
.btn-ghost:hover{background:var(--color-fill-secondary);text-decoration:none}
.btn-outline,.btn-ghost.btn-outline{border:none;background:var(--color-fill-primary)}
.dash-action-btn.secondary{
  background:var(--color-fill-primary);color:var(--color-label-primary);
  border:none;box-shadow:none;
}
.dash-action-btn.secondary:hover{background:var(--color-fill-secondary)}
.dash-customize-btn{border:none;background:var(--color-fill-primary);box-shadow:none}
.dash-customize-btn:hover{background:var(--color-fill-secondary)}
.dash-status-pill{border:none;background:var(--color-fill-secondary)}
.btn-danger{background:color-mix(in srgb,var(--color-destructive) 12%,transparent);color:var(--color-destructive);border:1px solid color-mix(in srgb,var(--color-destructive) 35%,transparent)}
.btn[disabled]{opacity:0.3;cursor:not-allowed;transform:none;filter:none}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;border-radius:50%;
  color:var(--color-label-secondary);transition:background var(--motion-hover),color var(--motion-hover),transform 100ms var(--motion-spring);
}
.icon-btn svg.lucide{display:block}
.icon-btn:hover{background:var(--color-fill-secondary);color:var(--color-label-primary)}
.icon-btn:active{transform:scale(0.94)}

.field{margin-bottom:var(--space-3)}
.field label{font-size:var(--type-caption-1);font-weight:500;color:var(--color-label-secondary);margin-bottom:4px;display:block}
.field input,.field textarea,.field select{
  width:100%;min-height:var(--hit-comfort);border:none;border-radius:10px;padding:0 12px;
  background:var(--color-fill-primary);color:var(--color-label-primary);
  font-size:var(--type-footnote);line-height:1.35;
  box-shadow:inset 0 0 0 1px var(--color-separator),inset 0 1px 2px color-mix(in srgb,var(--color-label-primary) 4%,transparent);
  transition:box-shadow var(--motion-micro),background var(--motion-micro);
}
.field input:hover,.field textarea:hover,.field select:hover{background:var(--color-fill-secondary)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;background:var(--color-bg-elevated);
  box-shadow:inset 0 0 0 2px var(--color-tint),0 0 0 3px color-mix(in srgb,var(--color-tint) 14%,transparent);
}
.field textarea{min-height:88px;resize:vertical;padding:10px 12px;line-height:1.45}
.field input::placeholder,.field textarea::placeholder{color:var(--color-label-tertiary)}

.side,.modal,.cmdk,.site-menu,.user-menu,.bell-menu,.ctx-menu,.toast.show{
  background:var(--glass-fill);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow),var(--glass-specular);
  border:1px solid var(--glass-border);
}
#view-app .side{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  margin:0;
  height:100dvh;
  align-self:stretch;
  position:relative;
  top:auto;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 10px) var(--space-2) var(--space-3);
  border-radius:0;
  border:none;
  border-right:1px solid var(--color-separator);
  background:color-mix(in srgb,var(--color-bg-secondary) 88%,transparent);
  box-shadow:none;
  transition:width .35s cubic-bezier(.32,.72,.22,1),flex-basis .35s cubic-bezier(.32,.72,.22,1),opacity .28s ease,padding .28s ease;
}
.side-brand{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;letter-spacing:-0.02em;
  padding:20px 16px 12px;color:var(--color-label-primary);
}
.side-brand em{font-style:normal;color:var(--color-label-secondary);font-weight:400}
.side-label{
  font-size:11px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--color-label-tertiary);padding:12px 12px 4px;margin:0;
}
.side-nav{display:flex;flex-direction:column;gap:2px;padding:0 8px}
.side-nav button,.side-ext{
  display:flex;align-items:center;gap:10px;
  min-height:40px;padding:0 12px;border-radius:10px;
  font-size:14px;font-weight:400;color:var(--color-label-primary);
  transition:background var(--motion-hover),color var(--motion-hover);
  width:100%;line-height:1.2;
}
.side-nav button svg.lucide,.side-ext svg.lucide{
  width:18px;height:18px;flex:0 0 auto;display:block;
  color:var(--color-label-secondary);
}
.side-nav button:hover,.side-ext:hover{background:var(--color-fill-primary);color:var(--color-label-primary);text-decoration:none}
.side-nav button.on{background:rgba(var(--color-tint-rgb),0.10);color:var(--color-tint);font-weight:500;box-shadow:none}
.side-nav button.on svg.lucide{color:var(--color-tint)}
.side-ext-group{
  background:transparent;border-radius:0;padding:0;margin:0;
}
.side-ext-group .side-ext{margin:0}
.side-ext .ext{width:14px!important;height:14px!important;color:var(--color-label-tertiary)!important;margin-left:auto;flex:0 0 auto}
.side-user-wrap{
  position:relative;margin-top:auto;flex-shrink:0;
  border-top:1px solid var(--color-separator);padding:8px 8px 0;
}
.user-menu--dock{
  position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);top:auto;
  width:auto;min-width:0;z-index:120;
  box-shadow:var(--glass-shadow),var(--glass-specular);
}
.user-menu--dock[hidden]{display:none!important}
.user-menu--dock button,.user-menu--dock a{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:40px;padding:0 12px;border-radius:10px;
}
.user-menu--dock svg.lucide{flex:0 0 auto;display:block}
.side-user{
  min-height:52px;padding:8px 12px;gap:10px;border-radius:12px;
  transition:background var(--motion-hover);cursor:pointer;
  display:flex;align-items:center;
}
.side-user:hover{background:var(--color-fill-primary)}
.side-user[aria-expanded="true"]{background:var(--color-fill-secondary)}
.avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--color-tint);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;flex:0 0 auto;
}
.su-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.su-meta strong{font-size:13px;font-weight:600;line-height:1.2}
.su-meta em{font-size:11px;font-weight:400;color:var(--color-label-secondary);font-style:normal;line-height:1.2}
.site-pick{
  display:flex;align-items:center;gap:10px;width:calc(100% - 16px);
  min-height:44px;margin:0 8px 8px;padding:8px 12px;
  border-radius:999px;border:1px solid transparent;
  background:var(--color-fill-primary);box-shadow:none;
  font-size:14px;font-weight:600;gap:10px;text-align:left;
}
.site-pick .sp-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.site-pick .sp-name{font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-pick .sp-status{font-size:11px;font-weight:400;color:var(--color-label-tertiary);line-height:1.2}
.site-pick .sp-chev{margin-left:auto;color:var(--color-label-tertiary);flex-shrink:0}
.site-pick:hover{background:var(--color-fill-secondary)}
.site-pick[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--color-tint);background:var(--color-fill-secondary)}
.sp-dot{
  width:8px;height:8px;border-radius:50%;background:var(--color-label-tertiary);flex:0 0 auto;
  box-shadow:none;
}
.sp-dot:empty,.sp-dot.is-empty{display:none}
.sp-dot.live{background:var(--color-success);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-success) 16%,transparent)}
.sp-dot.staging{background:var(--color-warning);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-warning) 16%,transparent)}
[data-theme="light"] .site-pick{
  background:var(--color-fill-site-pick);
  border-color:var(--color-border-subtle);
}

.card{background:var(--color-bg-elevated);border-radius:12px;padding:var(--space-4);border:1px solid var(--color-separator);box-shadow:none}
.card + .card,.card + .stat-cards{margin-top:var(--space-3)}
.card h2{font-size:var(--type-subhead);font-weight:600;margin-bottom:2px}
.card .c-sub{font-size:var(--type-caption-1);color:var(--color-label-secondary);margin-bottom:var(--space-3);line-height:1.45}
.card-row{align-items:center;gap:var(--space-3)}
.card-row .btn{flex-shrink:0}
.badge{display:inline-flex;align-items:center;gap:6px}
.badge.pro{background:var(--color-label-primary);color:var(--color-bg-primary);border-color:transparent}
.badge.studio{background:var(--color-tint);color:#fff;border-color:transparent}
.badge.draft{color:var(--color-label-secondary)}

.modal-veil{background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal,.cmdk{border-radius:20px;max-width:540px;animation:sheet-in var(--motion-page-dur) var(--motion-page) both}
@keyframes sheet-in{from{opacity:0;transform:translateY(24px) scale(0.98)}to{opacity:1;transform:none}}

.site-menu,.user-menu,.bell-menu,.ctx-menu{border-radius:14px;padding:var(--space-2);animation:popover-in 200ms var(--motion-spring) both}
@keyframes popover-in{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}
.site-menu button,.user-menu button,.user-menu a,.ctx-menu button{min-height:28px;border-radius:8px;font-size:var(--type-footnote);padding:0 10px;color:var(--color-label-primary);transition:background var(--motion-hover)}
.site-menu button:hover,.user-menu button:hover,.user-menu a:hover,.ctx-menu button:hover{background:var(--color-fill-primary);text-decoration:none}
.site-menu button.on{background:rgba(var(--color-tint-rgb),0.14);color:var(--color-tint);font-weight:600}
.site-menu .sm-new{color:var(--color-tint)}

.toast{
  top:calc(env(safe-area-inset-top,0px) + 10px);
  right:16px;left:auto;bottom:auto;
  transform:translateY(-8px);
  border-radius:10px;min-width:min(260px,92vw);max-width:300px;
  padding:10px 12px;font-size:var(--type-footnote);font-weight:500;line-height:1.35;
  color:var(--color-label-primary);
  animation:toast-in var(--motion-micro) both;z-index:9100;
}
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.toast[hidden]{display:none!important}

@keyframes toast-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

.tabs{
  display:inline-flex;align-items:stretch;gap:3px;
  background:var(--color-fill-secondary);
  border:1px solid color-mix(in srgb,var(--color-separator) 70%,transparent);
  border-radius:11px;padding:3px;margin-bottom:var(--space-4);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--color-label-primary) 4%,transparent);
  max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  min-height:34px;padding:7px 16px;border-radius:8px;
  font-size:13px;font-weight:500;letter-spacing:-0.01em;
  color:var(--color-label-secondary);white-space:nowrap;
  border:none;background:transparent;line-height:1.2;
  transition:color var(--motion-hover),background var(--motion-hover),box-shadow var(--motion-hover);
}
.tabs button:hover{color:var(--color-label-primary);background:color-mix(in srgb,var(--color-bg-elevated) 45%,transparent)}
.tabs button.on{
  background:var(--color-bg-elevated);color:var(--color-label-primary);font-weight:600;
  box-shadow:0 1px 2px color-mix(in srgb,var(--color-label-primary) 10%,transparent),
             0 2px 6px color-mix(in srgb,var(--color-label-primary) 6%,transparent),
             inset 0 1px 0 color-mix(in srgb,var(--color-bg-elevated) 80%,transparent);
}
.health-find-filter .tabs{display:flex;width:100%}
.health-find-filter .tabs button{flex:1;min-width:0;text-align:center}
.danger-card{border-color:color-mix(in srgb,var(--color-destructive) 28%,transparent);background:color-mix(in srgb,var(--color-destructive) 4%,var(--color-bg-elevated))}
.danger-card h2{color:var(--color-destructive);font-size:var(--type-subhead)}

.badge{font-size:var(--type-caption-1);font-weight:600;letter-spacing:0.04em;padding:4px 10px;border-radius:9999px;border:1px solid var(--color-separator);background:var(--color-fill-quaternary);color:var(--color-label-secondary)}
.badge.live{color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 45%,transparent);background:color-mix(in srgb,var(--color-success) 10%,transparent)}
.badge.staging{color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 45%,transparent);background:color-mix(in srgb,var(--color-warning) 10%,transparent)}

#view-auth.view.active{background:var(--color-bg-grouped)}
.auth-shell{border-radius:16px;padding:var(--space-5);background:var(--color-bg-elevated);border:1px solid var(--color-separator);box-shadow:var(--shadow-card)}
.auth-eyebrow{color:var(--color-label-tertiary)}
.auth-title{font-size:var(--type-title-2);font-family:var(--font-display);color:var(--color-label-primary)}
.auth-lead{color:var(--color-label-secondary)}
.auth-panel-inner .field{margin-bottom:var(--space-3);gap:var(--space-1)}
.auth-panel-inner .field label{
  font-size:var(--type-subhead);font-weight:400;color:var(--color-label-secondary);
  letter-spacing:-0.01em;margin-bottom:0;
}
.auth-panel-inner .field input,
.auth-panel-inner .pass-wrap input{
  width:100%;min-height:var(--hit-comfort);font-size:var(--type-body);padding:0 var(--space-3);
  border-radius:10px;border:none;background:var(--color-fill-primary);color:var(--color-label-primary);
  box-shadow:inset 0 0 0 1px var(--color-separator),var(--shadow-input-inset);
  transition:box-shadow var(--motion-micro),background var(--motion-micro);
}
.auth-panel-inner .field input:hover,
.auth-panel-inner .pass-wrap input:hover{background:var(--color-fill-secondary)}
.auth-panel-inner .field input:focus,
.auth-panel-inner .pass-wrap input:focus{
  outline:none;background:var(--color-bg-elevated);
  box-shadow:inset 0 0 0 2px var(--color-tint),var(--shadow-focus-ring);
}
.auth-panel-inner .auth-field-filled input,
.auth-panel-inner .auth-field-filled .pass-wrap input{
  background:var(--color-fill-primary);
  border-color:transparent;
}
.auth-panel-inner .auth-field-filled input:focus,
.auth-panel-inner .auth-field-filled .pass-wrap input:focus{background:var(--color-bg-elevated)}
.auth-links-foot button{color:var(--color-label-secondary);font-weight:400}
.auth-links-foot button:hover{color:var(--color-tint)}
.auth-page-foot{color:var(--color-label-secondary)}
.auth-page-foot a{color:var(--color-label-secondary)}
.auth-page-foot a:hover{color:var(--color-tint);text-decoration:none}
.auth-copy{color:var(--color-label-tertiary)}
.auth-submit.btn-dark{min-height:var(--hit-comfort);font-size:var(--type-subhead);box-shadow:var(--shadow-btn-dark)}
.auth-alt-btn{min-height:var(--hit-min)}
.auth-divider{color:var(--color-label-tertiary);font-size:var(--type-caption-1)}
.auth-divider::before,.auth-divider::after{background:var(--color-separator)}
.auth-oauth-btn{min-height:var(--hit-min);font-size:var(--type-subhead);font-weight:var(--weight-medium)}
/* Auth OAuth / passkey — no outline at rest; border only on hover (all presets) */
#view-auth .btn-github,
#view-auth .auth-alt-btn.btn-ghost{
  border:none;box-shadow:none;outline:none;
}
#view-auth .btn-github:hover,
#view-auth .auth-alt-btn.btn-ghost:hover{
  border:1px solid var(--color-separator);
  box-shadow:0 1px 2px color-mix(in srgb,var(--color-label-primary) 8%,transparent);
}
:root:is(
  [data-theme-preset="blueprint"],[data-theme-preset="northgate"],[data-theme-preset="afterglow"],
  [data-theme-preset="tidemark"],[data-theme-preset="understory"],[data-theme-preset="emberline"],
  [data-theme-preset="pearl"],[data-theme-preset="sunset"]
) #view-auth .btn-github,
:root:not([data-theme-preset]) #view-auth .btn-github{
  background:#fff;color:#1d1d1f;border:none;box-shadow:none;
}
:root:is(
  [data-theme-preset="blueprint"],[data-theme-preset="northgate"],[data-theme-preset="afterglow"],
  [data-theme-preset="tidemark"],[data-theme-preset="understory"],[data-theme-preset="emberline"],
  [data-theme-preset="pearl"],[data-theme-preset="sunset"]
) #view-auth .btn-github:hover,
:root:not([data-theme-preset]) #view-auth .btn-github:hover{
  background:var(--bg-alt);border:1px solid var(--line);color:#1d1d1f;
  box-shadow:0 4px 14px rgba(29,29,31,.08);
}
.signin-create-prompt{color:var(--color-label-secondary);font-size:var(--type-footnote)}
.signin-create-prompt button{color:var(--color-tint);font-weight:var(--weight-semibold)}
.signin-create-prompt button:hover{color:var(--color-tint-hover,var(--color-tint))}
.pass-toggle{color:var(--color-label-tertiary)}
.pass-toggle:hover{color:var(--color-label-primary);background:var(--color-fill-secondary)}

.dom-head{margin-bottom:var(--space-2)}
.dom-plan{color:var(--color-label-secondary);font-weight:500}
.dom-status-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.dom-domain{font-family:var(--font-mono);font-size:var(--type-footnote);word-break:break-word}

@media (max-width:900px){
  /* sidebar becomes a floating off-canvas drawer; main goes full width */
  #view-app .side{
    position:fixed;align-self:auto;
    left:0;top:0;right:auto;bottom:auto;
    margin:10px;height:calc(100dvh - 20px);
    width:min(290px,86vw);flex:0 0 auto;min-width:0;
    border-right:none;border-radius:20px;
    background:var(--glass-fill);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-shadow),var(--glass-specular);
    transform:translateX(calc(-100% - 18px));
    transition:transform .42s cubic-bezier(.32,.72,.22,1);
    z-index:80;
  }
  body.side-open #view-app .side{transform:translateX(0)}
  #view-app .main{width:100%;height:100dvh}
  #view-app .shell{height:100dvh}
}
@media (max-width:834px){
  .pill-notch,.topbar.pill-notch{height:var(--pill-notch-h-compact);min-width:min(280px,calc(100vw - 24px));max-width:calc(100vw - 24px);padding:0 var(--space-2)}
  .pill-crumb{max-width:min(140px,32vw);font-size:var(--type-footnote)}
  .pill-notch .search-pill{min-width:120px}
  #view-app .main{padding-top:0}
}
@media (max-width:390px){
  .pill-notch .search-pill span:not(kbd){display:none}
  .pill-notch .search-pill{min-width:var(--hit-min);max-width:var(--hit-min);padding:0;justify-content:center}
  .pill-notch .search-pill kbd{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pill-notch:hover{transform:none}
  .modal,.cmdk,.site-menu,.user-menu,.bell-menu,.toast{animation:none}
}

/* ---------- custom select (replaces native <select>) ---------- */
.bd-select{position:relative;width:100%;z-index:1}
.bd-select.open{z-index:120}
.bd-select-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  min-height:var(--hit-min);padding:8px 12px;
  border:none;border-radius:10px;
  background:var(--color-fill-tertiary);
  font-size:var(--type-body);font-weight:400;color:var(--color-label-primary);
  box-shadow:inset 0 0 0 1px var(--color-separator);
  transition:background var(--motion-hover),box-shadow var(--motion-hover);
  cursor:pointer;text-align:left;
}
.bd-select-trigger:hover{background:var(--color-fill-secondary)}
.bd-select.open .bd-select-trigger,.bd-select-trigger:focus-visible{
  outline:none;background:var(--color-bg-elevated);
  box-shadow:inset 0 0 0 2px var(--color-tint),0 0 0 3px rgba(var(--color-tint-rgb),.12);
}
.bd-select-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-select-chev{color:var(--color-label-tertiary);flex:0 0 auto;transition:transform var(--motion-hover)}
.bd-select.open .bd-select-chev{transform:rotate(180deg)}
.bd-select-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);
  background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--color-separator);border-radius:14px;
  box-shadow:var(--glass-shadow),var(--glass-specular),0 8px 28px rgba(var(--color-label-primary-rgb,29,29,31),.12);
  padding:6px;z-index:200;max-height:280px;overflow:auto;
}
.bd-select-menu[hidden],
.bd-select-menu:not(.is-open){display:none!important}
.bd-select-menu.bd-select-menu--portaled{position:fixed;right:auto;z-index:10050}
.bd-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:9px 11px;border-radius:10px;font-size:var(--type-body);color:var(--color-label-primary);
  border:none;background:transparent;text-align:left;cursor:pointer;
  transition:background var(--motion-hover),color var(--motion-hover);
}
.bd-opt:hover{background:var(--color-fill-secondary)}
.bd-opt.on{background:color-mix(in srgb,var(--color-tint) 10%,transparent);color:var(--color-tint);font-weight:600}
.bd-opt.on svg.lucide{color:var(--color-tint)}
.bd-opt-main{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.bd-opt-main strong{font-size:var(--type-body);font-weight:600;line-height:1.25}
.bd-opt-main em{font-style:normal;font-size:var(--type-caption-1);color:var(--color-label-secondary);line-height:1.35}
.bd-opt.has-desc{align-items:flex-start;padding:10px 11px}
.bd-select--roles .bd-select-menu{min-width:220px}
.bd-select-menu.bd-select-menu--portaled{z-index:10050}
.bd-select--filter{flex:0 1 168px;min-width:140px;width:auto}
.bd-select--compact{flex:0 1 148px;min-width:128px;width:auto}
.adm-filters .bd-select-trigger,.team-invite-row .bd-select-trigger{min-height:44px;border-radius:10px}
.team-member-row .bd-select{flex:0 1 148px;min-width:128px;width:auto}
.modal .bd-select.open{z-index:9100}
.modal .bd-select-menu{z-index:9101}

/* ---------- segmented control ---------- */
.seg{
  display:flex;align-items:stretch;gap:2px;
  border:1px solid color-mix(in srgb,var(--color-separator) 70%,transparent);
  border-radius:10px;padding:3px;
  background:var(--color-fill-secondary);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--color-label-primary) 4%,transparent);
}
.seg button{
  flex:1;min-height:30px;padding:5px 10px;
  font-size:12.5px;font-weight:500;letter-spacing:-0.01em;line-height:1;
  color:var(--color-label-secondary);border-radius:7px;text-align:center;
  border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:color var(--motion-hover),background var(--motion-hover),box-shadow var(--motion-hover);
}
.seg button:hover{color:var(--color-label-primary);background:color-mix(in srgb,var(--color-bg-elevated) 45%,transparent)}
.seg button.on{
  background:var(--color-bg-elevated);color:var(--color-label-primary);font-weight:600;
  box-shadow:0 1px 2px color-mix(in srgb,var(--color-label-primary) 10%,transparent),
             0 2px 5px color-mix(in srgb,var(--color-label-primary) 5%,transparent);
}
.seg-multi{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:3px;
}
.seg-multi button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:0;padding:8px 6px;font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.modal .seg{
  border-radius:10px;padding:2px;
  background:var(--color-fill-tertiary);
  border-color:var(--color-separator);
  box-shadow:none;
}
.modal .seg button{
  min-height:32px;padding:6px 10px;font-size:12.5px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
}
.modal .tabs{
  border-radius:10px;padding:2px;background:var(--color-fill-tertiary);
}
.modal .tabs button{
  min-height:32px;padding:6px 12px;font-size:12.5px;border-radius:7px;
}

/* ---------- builder immersive pill (Liquid Glass) ---------- */
.b-pill{
  top:calc(env(safe-area-inset-top,0px) + 10px);
  height:38px;padding:0 6px;border-radius:9999px;
  background:color-mix(in srgb,rgba(28,28,30,0.9) 94%,transparent);
  backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 24px rgba(0,0,0,0.24),inset 0 1px 0 rgba(255,255,255,0.1);
  z-index:9000;
}
.b-pill .bp-ic{width:28px;height:28px;min-width:28px;min-height:28px;border-radius:8px}
.b-pill .bp-ic:active{transform:scale(0.94)}
.b-pill .bp-crumb{font-size:var(--type-caption-1);font-weight:600;padding:0 8px}
.b-pill .bp-publish{font-size:var(--type-caption-1);padding:5px 12px}

/* ---------- command palette ---------- */
#cmdk-veil.modal-veil{align-items:flex-start;padding-top:12vh}
.cmdk{
  max-width:560px;border-radius:20px;padding:0;
  background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow),var(--glass-specular);border:1px solid var(--glass-border);
}
#cmdk-input{
  min-height:36px;padding:12px 16px;font-size:var(--type-footnote);
  border-bottom:1px solid var(--color-separator);color:var(--color-label-primary);
}
#cmdk-input::placeholder{color:var(--color-label-tertiary)}
.cmdk-item{min-height:var(--hit-min);padding:0 var(--space-3);border-radius:10px;font-size:var(--type-body)}
.cmdk-item.on{background:rgba(var(--color-tint-rgb),0.12);color:var(--color-tint)}
.cmdk-h{font-size:var(--type-caption-1);letter-spacing:0.06em;color:var(--color-label-secondary);padding:var(--space-2) var(--space-3)}

/* ---------- modals & alerts ---------- */
.modal{
  padding:var(--space-6);background:var(--glass-fill);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow),var(--glass-specular);
}
.modal h2{font-size:var(--type-title-3);font-family:var(--font-display)}
.modal .sub{font-size:var(--type-footnote);color:var(--color-label-secondary)}

/* ---------- customize modal / theme swatches ---------- */
.modal.wide.customize{border-radius:20px;overflow:hidden}
.modal.wide.customize > .cust-modal{min-height:0}
.cust-head,.cust-foot{padding:var(--space-4) var(--space-6);border-color:var(--color-separator)}
.cust-foot{background:var(--color-bg-elevated);flex-shrink:0}
.cust-foot-note{color:var(--color-label-secondary);font-weight:500}
.modal.wide.customize .link-btn{color:var(--color-tint)}
.modal.wide.customize .cust-io-row .link-btn{font-size:13px}
.cust-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:var(--space-3)}
.hig-theme-swatch{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);
  padding:var(--space-2);border-radius:14px;
  border:none;
  background:transparent;min-height:var(--hit-min);
  transition:transform var(--motion-micro),border-color var(--motion-hover),background var(--motion-hover),box-shadow var(--motion-hover);
  text-align:left;overflow:hidden;box-sizing:border-box;
}
.hig-theme-swatch:hover,
.hig-theme-swatch:focus-visible{
  transform:translateY(-1px);
  background:var(--color-bg-elevated);
  border:1px solid var(--color-separator);
}
.hig-theme-swatch.sel{
  border:none;
  background:transparent;
  box-shadow:none;
}
.hig-swatch-preview{
  position:relative;display:block;height:96px;border-radius:10px;overflow:hidden;
  background:var(--swatch-bg,#000);border:none;
  transition:border-color var(--motion-hover),box-shadow var(--motion-hover);
}
.hig-swatch-preview .hig-mini{box-shadow:none!important}
.hig-theme-swatch:hover .hig-swatch-preview,
.hig-theme-swatch:focus-visible .hig-swatch-preview{
  border:1px solid color-mix(in srgb,var(--color-separator) 80%,transparent);
}
.hig-theme-swatch:hover .hig-swatch-preview .hig-mini,
.hig-theme-swatch:focus-visible .hig-swatch-preview .hig-mini{
  box-shadow:inset 0 0 0 1px var(--color-separator)!important;
}
.hig-swatch-preview img{
  width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
}
.hig-swatch-preview::after{ content:none; }
.hig-swatch-check{
  position:absolute;top:8px;right:8px;color:var(--color-tint);display:flex;
  background:var(--color-bg-elevated);border-radius:50%;
}
.cust-mode.seg{max-width:240px;margin-bottom:14px}
.cust-saved{color:var(--color-success);font-size:var(--type-footnote);font-weight:600}

/* ---------- form controls (HIG) ---------- */
.auth-check,.field-check{display:flex;align-items:center;gap:var(--space-2);min-height:var(--hit-min);font-size:var(--type-body);color:var(--color-label-primary)}
input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:6px;flex:0 0 auto;
  border:1.5px solid var(--color-separator);background:transparent;cursor:pointer;
  transition:background var(--motion-micro),border-color var(--motion-micro),transform var(--motion-micro);
}
input[type="checkbox"]:checked{
  background:var(--color-tint);border-color:var(--color-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}
input[type="checkbox"]:active{transform:scale(0.92)}
input[type="radio"]{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--color-separator);background:transparent;cursor:pointer;
}
input[type="radio"]:checked{
  border:2px solid var(--color-tint);background:radial-gradient(circle,var(--color-tint) 0 5px,transparent 5px);
}
input[type="range"]{
  appearance:none;-webkit-appearance:none;height:4px;border-radius:9999px;background:var(--color-fill-secondary);width:100%;
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);border:none;
}
.pass-wrap input,.email-wrap input{padding-right:var(--space-7)}

/* ---------- lists & tables (inset grouped) ---------- */
.stat-cards,.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3)}
.stat-card,.dash-stat{
  background:var(--color-bg-elevated);border-radius:12px;padding:var(--space-4);
  border:1px solid var(--color-separator);box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
.sc-n,.dash-stat-n{font-size:var(--type-title-3);font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;margin-top:var(--space-1)}
.dash-stat{min-height:72px;padding:var(--space-3)}
.sc-l,.dash-stat-l{font-size:var(--type-caption-2);color:var(--color-label-secondary);letter-spacing:0.04em;text-transform:uppercase}
.sc-d{font-size:var(--type-caption-2);color:var(--color-label-tertiary)}
.dash-head{gap:var(--space-3);padding:0 0 var(--space-3)}

.dns-table,.sc-table,.adm-table{font-size:var(--type-footnote)}
.dns-table th,.sc-table th,.adm-table th{
  font-size:var(--type-caption-1);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--color-label-secondary);background:var(--color-fill-quaternary);
}
.dns-table td,.sc-table td,.adm-table td{padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-separator)}
.dns-table tr:nth-child(even) td,.sc-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--color-fill-primary) 40%,transparent)}

/* ---------- page chrome ---------- */
.page-head{margin-bottom:var(--space-4);gap:var(--space-3);align-items:flex-start}
.page-head .ph-icon{
  width:34px;height:34px;border-radius:9px;background:var(--color-bg-elevated);
  border:1px solid var(--color-separator);box-shadow:none;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;padding:0;line-height:0;overflow:visible;
}
.page-head .ph-icon svg.lucide{
  width:13px;height:13px;color:var(--color-tint);flex:0 0 auto;display:block;
  stroke-width:1.85;
}
.page-head .ph-sub{font-size:var(--type-caption-1);color:var(--color-label-secondary);margin-top:2px;line-height:1.4}
.page{padding:var(--space-4) var(--space-5) var(--space-8);max-width:1040px}

/* ---------- project cards & dashboard ---------- */
.project-card{border-radius:12px;border:1px solid var(--color-separator);box-shadow:none;background:var(--color-bg-elevated)}
.project-card:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.06);transition:transform 200ms var(--motion-spring),box-shadow 200ms var(--motion-spring)}
.lr{display:flex;align-items:center;gap:12px;min-width:0;padding:6px 8px;border-radius:8px;border-bottom:none;font-size:var(--type-footnote)}
.lr + .lr{margin-top:1px}
.lr:hover{background:var(--color-fill-primary)}
.lr .ic{
  width:28px;height:28px;border-radius:7px;border:none;background:var(--color-fill-primary);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;
  line-height:0;overflow:visible;color:var(--color-label-secondary);
}
.lr .ic svg.lucide{width:13px;height:13px;display:block;flex-shrink:0}
.lr .ic.g{color:var(--color-success)}
.lr .ic.b{color:var(--color-tint)}
.lr .ic.w{color:var(--color-warning)}
.lr .ic.r{color:var(--color-destructive)}
.lr .lr-main{flex:1;min-width:0}
.lr .lr-main strong{display:block;font-weight:500;line-height:1.35}
.lr time{flex:0 0 auto;font-size:11px;color:var(--color-label-tertiary);white-space:nowrap;margin-left:4px}
.view-all{font-size:var(--type-caption-1);color:var(--color-tint);font-weight:500}
.kv .kvr{background:var(--color-fill-primary);border:none;border-radius:10px;font-size:var(--type-footnote);padding:8px 12px}

/* ---------- onboarding ---------- */
.ob-card{border-radius:20px;padding:var(--space-6);background:var(--color-bg-elevated);border:1px solid var(--color-separator)}
.tpl-card{border-radius:16px;border:1px solid var(--color-separator)}

/* ---------- suppress legacy sticky topbar when pill active ---------- */
#view-app .topbar:not(.pill-notch){display:none!important}
.page > .pill-notch,
.page > .topbar.pill-notch{
  position:sticky;
  top:calc(env(safe-area-inset-top,0px) + 12px);
  left:auto;right:auto;transform:none;
  margin:calc(env(safe-area-inset-top,0px) + 12px) auto var(--space-4);
  max-width:min(720px,100%);
  z-index:30;
}
.page:has(> .pill-notch){
  padding-top:0;
}

/* ---------- link & focus ---------- */
a{color:var(--color-tint)}
:focus-visible{outline:2px solid var(--color-tint);outline-offset:2px}

/* ---------- builder (HIG compact) ---------- */
.builder.immersive .panel-left,
.builder.immersive .panel-right,
.builder .panel-left,
.builder .panel-right{
  background:color-mix(in srgb,var(--color-bg-secondary) 92%,transparent);
  border-color:var(--color-separator);
}
.builder .panel-left{width:248px;flex:0 0 248px;padding:10px 10px 24px}
.builder .panel-right{width:272px;flex:0 0 272px;padding:12px 12px 32px}
.builder .panel h3{font-size:var(--type-caption-2);font-weight:600;letter-spacing:0.06em;color:var(--color-label-secondary);margin:10px 4px 6px}
.builder #lib-search,
.builder .b-sel,
.builder .pp-search,
.builder .insp-group .field input,
.builder .insp-group .field textarea,
.builder .insp-group .field select,
.builder .color-row input[type="text"]{
  min-height:28px;border-radius:8px;border:none;padding:0 10px;
  background:var(--color-fill-primary);color:var(--color-label-primary);
  font-size:var(--type-footnote);box-shadow:inset 0 0 0 1px var(--color-separator);
}
.builder #lib-search{border-radius:8px;padding:6px 10px;margin-bottom:6px}
.builder #lib-search:focus,.builder .b-sel:focus,.builder .pp-search:focus{outline:none;box-shadow:inset 0 0 0 2px var(--color-tint)}
.builder .block-item{
  padding:6px 8px;border-radius:10px;border:1px solid var(--color-separator);
  background:var(--color-bg-elevated);font-size:var(--type-footnote);font-weight:500;margin-bottom:4px;
}
.builder .block-item:hover{border-color:color-mix(in srgb,var(--color-tint) 40%,var(--color-separator));transform:none}
.builder .bi-icon{
  width:26px;height:26px;border-radius:8px;border:none;background:var(--color-fill-primary);
  display:inline-flex;align-items:center;justify-content:center;line-height:0;overflow:visible;
}
.builder .bi-icon svg.lucide{width:13px;height:13px;display:block;flex-shrink:0}
.builder .layer,.builder .pg-row{padding:5px 8px;border-radius:8px;font-size:var(--type-caption-1);margin-bottom:2px}
.builder .layer.sel,.builder .pg-row.on{background:rgba(var(--color-tint-rgb),0.12);border-color:transparent;color:var(--color-tint)}
.builder .insp-group{border:1px solid var(--color-separator);border-radius:10px;background:var(--color-bg-elevated);margin-bottom:8px}
.builder .insp-group .ig-head{padding:8px 10px;font-size:var(--type-footnote)}
.builder .insp-group .field{margin-bottom:8px}
.builder .insp-group .field label{font-size:var(--type-caption-2)}
.builder .canvas-wrap{background:var(--color-bg-grouped)}
.builder .b-pill{
  top:calc(env(safe-area-inset-top,0px) + 10px);
  height:38px;padding:0 6px;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 24px rgba(0,0,0,0.24),inset 0 1px 0 rgba(255,255,255,0.1);
}
.builder .b-pill:not(.light){
  background:color-mix(in srgb,rgba(28,28,30,0.94) 96%,transparent);
}
.builder .b-pill:not(.light) .bp-ic,
.builder .b-pill:not(.light) .bp-crumb,
.builder .b-pill:not(.light) .bp-zoom,
.builder .b-pill:not(.light) .bp-label,
.builder .b-pill:not(.light) .save-state{color:rgba(255,255,255,.88)}
.builder .b-pill:not(.light) .bp-crumb em,
.builder .b-pill:not(.light) .bp-crumb #pb-page{color:rgba(255,255,255,.5)}
.builder .b-pill:not(.light) .bp-ic svg.lucide,
.builder .b-pill:not(.light) .bp-label svg.lucide{color:rgba(255,255,255,.85);stroke:rgba(255,255,255,.85)}
.builder .b-pill:not(.light) .save-state{color:rgba(255,255,255,.55)}
.builder .b-pill.light{
  background:color-mix(in srgb,rgba(255,255,255,.94) 96%,transparent);
  border-color:var(--color-separator);
  box-shadow:0 8px 24px rgba(29,29,31,.14),inset 0 1px 0 rgba(255,255,255,.8);
}
.builder .b-pill.light .bp-ic,
.builder .b-pill.light .bp-crumb,
.builder .b-pill.light .bp-zoom,
.builder .b-pill.light .bp-label{color:var(--color-label-primary)}
.builder .b-pill.light .save-state{color:var(--color-label-secondary)}
.builder .b-pill .save-state{min-width:0;padding:0 4px;font-size:11px;flex-shrink:1}
.builder .b-pill .bp-publish{flex-shrink:0;gap:5px}
.builder .b-pill .bp-publish svg.lucide{width:14px;height:14px;stroke:currentColor}
.builder .b-pill .bp-ic{width:28px;height:28px;min-width:28px;min-height:28px;border-radius:8px}
.builder .b-pill .bp-crumb{font-size:var(--type-caption-1);padding:4px 8px}
.builder .b-pill .bp-publish{font-size:var(--type-caption-1);padding:5px 12px;border-radius:999px}
.builder .b-pill .bp-zoom{font-size:var(--type-caption-2);padding:5px 8px;min-width:36px}
.builder.immersive .panel-left,.builder.immersive .panel-right{padding-top:58px}
.builder.immersive .canvas-wrap{padding-top:52px}
.builder .lp-tabs{display:flex;gap:2px;padding:2px;margin-bottom:8px;background:var(--color-fill-primary);border-radius:8px}
.builder .lp-tabs button{flex:1;min-height:26px;font-size:var(--type-caption-2);font-weight:600;border-radius:6px;color:var(--color-label-secondary)}
.builder .lp-tabs button.on{background:var(--color-bg-elevated);color:var(--color-label-primary);box-shadow:0 1px 2px rgba(0,0,0,0.08)}
.builder .chip-btn,.builder .bp-chip{font-size:var(--type-caption-2);padding:3px 8px;border-radius:6px}
.builder .debug-panel{border-radius:14px;border-color:var(--color-separator);background:var(--glass-fill);backdrop-filter:var(--glass-blur)}
.builder .dbg-tabs button{font-size:var(--type-caption-2);padding:4px 8px}

/* ---------- Light mode premium surfaces ---------- */
[data-theme="light"] #view-app .shell{
  background:var(--color-page-glow);
}
[data-theme="light"] #view-app .side{
  background:var(--color-glass-sidebar);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--color-border-subtle);
  box-shadow:inset -1px 0 0 color-mix(in srgb,var(--color-bg-elevated) 60%,transparent);
}
[data-theme="light"] .pill-notch,
[data-theme="light"] .topbar.pill-notch{
  background:var(--color-glass-pill);
  border:1px solid var(--color-glass-border-warm);
  box-shadow:var(--shadow-pill),var(--pill-specular-top),var(--pill-specular-bottom);
}
[data-theme="light"] .pill-notch.is-scrolled{
  background:var(--color-glass-pill-scrolled);
  box-shadow:var(--shadow-pill-scrolled),var(--pill-specular-top),var(--pill-specular-bottom);
}
[data-theme="light"] .card{
  background:var(--color-bg-elevated);
  border:1px solid var(--color-border-subtle);
  box-shadow:var(--shadow-card);
  transition:transform var(--motion-page-dur) var(--motion-spring),box-shadow var(--motion-page-dur) var(--motion-spring);
}
[data-theme="light"] .card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-card-hover),inset 0 1px 0 color-mix(in srgb,var(--color-bg-elevated) 90%,transparent);
}
[data-theme="light"] .field input,
[data-theme="light"] .field textarea,
[data-theme="light"] .field select{
  background:var(--color-bg-elevated);
  border:1px solid var(--color-border-field);
  box-shadow:var(--shadow-input-inset),var(--shadow-input-highlight);
}
[data-theme="light"] .field input:focus,
[data-theme="light"] .field textarea:focus,
[data-theme="light"] .field select:focus{
  border-color:var(--color-tint);
  box-shadow:var(--shadow-focus-ring),var(--shadow-input-inset);
}
[data-theme="light"] .btn-dark{
  background:var(--color-label-primary);
  box-shadow:var(--shadow-btn-dark);
}
[data-theme="light"] .btn-cta,
[data-theme="light"] .btn-brand{
  box-shadow:var(--shadow-btn-tint);
}
[data-theme="light"] .btn-ghost{
  background:var(--color-fill-ghost);
  border:none;
}
[data-theme="light"] .btn-ghost:hover{
  border:1px solid color-mix(in srgb,var(--color-label-primary) 9%,transparent);
}
[data-theme="light"] .modal,
[data-theme="light"] .cmdk,
[data-theme="light"] .site-menu,
[data-theme="light"] .user-menu,
[data-theme="light"] .bell-menu,
[data-theme="light"] .ctx-menu{
  background:var(--color-glass-modal);
  border:1px solid var(--color-glass-border-warm);
  box-shadow:var(--shadow-modal),var(--pill-specular-top);
}
[data-theme="light"] .pill-notch .search-pill{
  background:transparent;
  box-shadow:none;
  font-size:13px;
  color:var(--color-label-tertiary);
}
[data-theme="light"] .pill-notch .search-pill:hover,
[data-theme="light"] .pill-notch .search-pill:focus-visible{
  background:var(--color-fill-secondary);
}
[data-theme="light"] .pill-notch .search-pill kbd{
  font-size:10px;font-weight:700;border-radius:5px;
  border:1px solid var(--color-border-subtle);
}
[data-theme="light"] .side-nav button.on,
[data-theme="light"] .side-nav button:hover{
  background:color-mix(in srgb,var(--color-tint) 8%,var(--color-bg-elevated));
}
[data-theme="light"] .tabs,
[data-theme="light"] .seg{
  background:var(--color-fill-tertiary);
  border-color:var(--color-border-subtle);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--color-label-primary) 3%,transparent);
}
[data-theme="light"] .tabs button.on,
[data-theme="light"] .seg button.on{
  background:var(--color-bg-elevated);
  box-shadow:0 1px 2px color-mix(in srgb,var(--color-label-primary) 8%,transparent),
             inset 0 1px 0 color-mix(in srgb,var(--color-bg-elevated) 92%,transparent);
}
[data-theme="light"] .dash-stat,
[data-theme="light"] .dash-page .card{
  background:var(--color-bg-elevated);
  border-color:var(--color-border-subtle);
  box-shadow:var(--shadow-card);
}
[data-theme="light"] .dash-action-btn.secondary{
  background:var(--color-fill-primary);
  border:none;
}
[data-theme="light"] .side-label{color:var(--color-label-secondary)}
[data-theme="light"] .side-nav button svg.lucide,[data-theme="light"] .side-ext svg.lucide{color:var(--color-label-secondary)}
[data-theme="light"] .dash-stat-lbl{color:var(--color-label-secondary)}
[data-theme="light"] .dash-stat-d{color:var(--color-label-secondary)}
[data-theme="light"] .dash-stat-ico{color:var(--color-label-secondary)}
[data-theme="light"] .dash-stat-ico svg.lucide{color:var(--color-label-secondary)}
[data-theme="light"] .panel-tip{color:var(--color-label-secondary)}
[data-theme="light"] .builder .lp-tabs button:not(.on){color:var(--color-label-primary)}
[data-theme="light"] .tour-card .tc-skip{color:var(--color-label-primary);background:var(--color-fill-secondary);border-color:var(--color-separator)}
[data-theme="light"] .card{border-color:var(--color-border-subtle)}
[data-theme="light"] .modal.wide.customize{overflow:hidden}
[data-theme="light"] .dash-action-btn.primary{
  box-shadow:var(--shadow-btn-tint);
}
[data-theme="light"] .mesh,
[data-theme="light"] .empty-mesh.mesh,
[data-theme="light"] .sb-hero.mesh{
  background:linear-gradient(145deg,color-mix(in srgb,var(--color-tint) 5%,var(--color-bg-elevated)) 0%,var(--color-bg-elevated) 58%,color-mix(in srgb,var(--color-tint) 3%,var(--color-bg-secondary)) 100%);
  border-color:var(--color-border-subtle);
}
[data-theme="light"] .project-card{
  background:var(--color-bg-elevated);
  border-color:var(--color-border-subtle);
  box-shadow:var(--shadow-card);
}
[data-theme="light"] .project-card:hover{
  box-shadow:var(--shadow-card-hover);
}

@media (prefers-reduced-motion:reduce){
  [data-theme="light"] .card,
  [data-theme="light"] .card:hover{
    transform:none;
    transition:opacity var(--motion-micro);
  }
}


/* ===== Fixes batch (builder + team + site cards + cmdk) ===== */

/* page-head icon centered inside padded box */
.page-head{ padding-top: 2px; }

/* email under name with clear separation */
.tm-email{ font-size:11.5px; color:var(--color-label-tertiary); letter-spacing:.01em; }
.team-member-row .lr-main{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
}
.team-member-row .lr-main strong{display:block;font-weight:600;line-height:1.3}
.team-member-row .lr-main em.tm-email{display:block;font-style:normal;margin-top:0}

/* Image 11: improved site card hover actions */
.pc-hover-actions{
  position:absolute;inset:0;display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;
  gap:8px;padding:14px;overflow:hidden;
  background:linear-gradient(to bottom,rgba(0,0,0,.50),rgba(0,0,0,.66));
  opacity:0;transition:opacity .18s;border-radius:inherit;
}
.project-card:hover .pc-hover-actions{ opacity:1; }
.pca-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 12px;height:32px;border-radius:8px;cursor:pointer;flex:0 0 auto;
  font-size:12.5px;font-weight:600;font-family:inherit;white-space:nowrap;
  background:var(--color-bg-elevated);color:var(--color-label-primary);
  border:1px solid var(--color-separator);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:transform .12s,background .12s,border-color .12s;
}
.pca-btn:hover{ background:var(--color-fill-quaternary);border-color:var(--color-tint);color:var(--color-tint);transform:translateY(-1px); }
.pca-btn:active{ transform:scale(.97); }
.pca-btn.pca-del{ background:rgba(255,59,48,.88);color:#fff; }
.pca-btn.pca-del:hover{ background:rgba(255,59,48,1); }

/* builder section list action button clarity */
.layer{
  padding:0 10px;min-height:36px;border-radius:8px;
  display:flex;align-items:center;gap:8px;cursor:pointer;
  transition:background .12s;
}
.layer:hover{ background:var(--color-fill-secondary); }
.layer.sel{ background:color-mix(in srgb,var(--color-tint) 12%,transparent); }
.layer-eye{
  margin-left:auto;width:28px;height:28px;border-radius:6px;border:none;
  background:transparent;color:var(--color-label-tertiary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background .12s,color .12s;
}
.layer-eye:hover{ background:var(--color-fill-tertiary);color:var(--color-label-primary); }

/* textarea auto-resize: no resize handle */
.field textarea{ resize:none!important;overflow:hidden; }

/* cmdk list scrollable for keyboard nav */
#cmdk-list{ max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain; }

/* ============================ SKELETON LOADING ============================
   Shimmer placeholders replace "Loading…" text and spinners. Token-driven,
   theme-aware, and stilled under prefers-reduced-motion. */
.skel{ position:relative;overflow:hidden;border-radius:8px;background:var(--color-fill-secondary); }
.skel::after{ content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-bg-elevated) 60%,transparent),transparent);
  animation:skel-sweep 1.4s ease-in-out infinite; }
.skel-line{ height:12px;margin:8px 0; }
.skel-line.w30{width:30%} .skel-line.w45{width:45%} .skel-line.w60{width:60%} .skel-line.w80{width:80%}
.skel-row{ display:flex;align-items:center;gap:12px;padding:10px 0; }
.skel-avatar{ width:34px;height:34px;border-radius:50%;flex:none; }
.skel-stack{ flex:1;min-width:0; }
.skel-block{ height:64px;border-radius:12px;margin:10px 0; }
@keyframes skel-sweep{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .skel::after{ animation:none; } }

/* pinned sites */
.pc-pin{ display:inline-flex;align-items:center;color:var(--color-label-tertiary);margin-right:2px; }
.sm-pin{ margin-left:auto;color:var(--color-label-tertiary); }
#site-menu .sm-pin + svg{ margin-left:6px; }

/* ============================ FOCUS RINGS ============================
   One ring system, everywhere: 2px tint, 2px offset, following each
   control's own border-radius. Mouse clicks never leave a stray ring —
   only keyboard focus draws one. */
:focus:not(:focus-visible){ outline:none; }
.pill-hit:focus-visible,.bp-ic:focus-visible{ outline:2px solid var(--color-tint);outline-offset:2px;border-radius:inherit; }
.link-btn:focus-visible,.pc-actions button:focus-visible{ outline:2px solid var(--color-tint);outline-offset:3px;border-radius:6px; }
#site-menu button:focus-visible,.bd-opt:focus-visible{ outline:none;box-shadow:inset 0 0 0 2px var(--color-tint); }

/* ===================== TEMPLATE MARKETPLACE (Framer-style) =====================
   Real rendered previews in browser-frame cards, a blank-canvas card up front,
   hover "Use template", and a pinned footer so Create never needs scrolling. */
.tpl-scroll{ max-height:min(48vh,460px);overflow-y:auto;overscroll-behavior:contain;margin:6px -6px 0;padding:0 6px 6px; }
.tpl-scroll::-webkit-scrollbar{ width:6px }
.tpl-scroll::-webkit-scrollbar-thumb{ background:var(--color-fill-primary);border-radius:3px }
.tpl-grid-lg{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px; }
.tpl-grid-lg .tpl-card{ display:flex;flex-direction:column;background:var(--color-bg-elevated); }
.tpl-prev-live{ position:relative;display:block;height:150px;overflow:hidden;background:#fff;border-bottom:1px solid var(--color-separator); }
.tpl-prev-live .tpl-mini{ position:absolute;left:50%;top:0;width:1150px;transform:translateX(-50%) scale(.20);transform-origin:top center;pointer-events:none;background:#fff;display:block; }
.tpl-prev-live .tpl-use{
  position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);
  padding:7px 14px;border-radius:9999px;font-size:12px;font-weight:600;
  background:rgba(29,29,31,.86);color:#fff;backdrop-filter:blur(8px);
  opacity:0;transition:opacity .16s,transform .16s;pointer-events:auto;white-space:nowrap;
}
.tpl-card:hover .tpl-use{ opacity:1;transform:translate(-50%,0); }
.tpl-prev-live::after{ content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 62%,rgba(0,0,0,.10));opacity:0;transition:opacity .16s; }
.tpl-card:hover .tpl-prev-live::after{ opacity:1; }
.tpl-meta{ display:block;padding:10px 12px 12px; }
.tpl-grid-lg .tpl-name{ display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-weight:600;font-size:13.5px; }
.tpl-grid-lg .tpl-name em{ font-style:normal;font-weight:500;font-size:11px;color:var(--color-label-tertiary);white-space:nowrap; }
.tpl-grid-lg .tpl-desc{ display:block;margin-top:3px;font-size:12px;color:var(--color-label-secondary);line-height:1.4; }
.tpl-blank .tpl-prev-blank{
  display:flex;align-items:center;justify-content:center;height:150px;
  border-bottom:1px solid var(--color-separator);
  background:repeating-linear-gradient(45deg,var(--color-fill-quaternary) 0 10px,transparent 10px 20px);
  color:var(--color-label-tertiary);
}
.tpl-blank{ border-style:dashed; }
.tpl-blank.sel,.tpl-blank:hover{ border-style:solid; }
.tpl-footer{
  display:flex;align-items:center;gap:10px;justify-content:flex-end;
  margin:0 -6px -2px;padding:12px 6px 0;border-top:1px solid var(--color-separator);
}
.tpl-picked{ display:inline-flex;align-items:center;gap:6px;margin-right:auto;font-size:12.5px;color:var(--color-label-secondary); }
/* the picker allows clicks only on the Use pill; everything else stays inert */
.tpl-card .tpl-use{ pointer-events:auto!important; }
.lu24{width:24px!important;height:24px!important;stroke-width:1.75}

/* ============================ LIVE EDIT MODE ============================
   Canvas shows the published render inside the full workspace. Builder
   scaffolding that only makes sense on wireframes gets out of the way. */
body.builder-live .page-sheet{ background:none!important; }
body.builder-live .blk{ outline-color:transparent; }
body.builder-live .blk:hover{ outline:1.5px dashed color-mix(in srgb,var(--color-tint) 55%,transparent);outline-offset:-1.5px; }
body.builder-live .blk.selected{ outline:1.5px solid var(--color-tint);outline-offset:-1.5px; }
body.builder-live [data-e]{ cursor:text; }
body.builder-live [data-e]:hover{ box-shadow:0 0 0 1.5px color-mix(in srgb,var(--color-tint) 40%,transparent);border-radius:3px; }
#pb-live.on{ color:var(--color-tint); }


/* ============================ V7.1 POLISH ============================ */
/* Use-template pill is a real button now — reset chrome, keep the look */
.tpl-use{ border:none;font-family:inherit;cursor:pointer; }
/* rendered minis can never scroll, capture clicks, or draw scrollbars */
.tpl-mini{ overflow:hidden; }
.tpl-mini *{ scrollbar-width:none!important; }
.tpl-mini *::-webkit-scrollbar{ display:none!important; }
.tpl-mini [data-inert]{ pointer-events:none!important; }
/* onboarding grid uses the same marketplace card proportions */
.ob-card .tpl-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
/* keyboard focus on template cards */
.tpl-card:focus-visible{ outline:2px solid var(--color-tint);outline-offset:2px; }
/* Image 4: .btn-dark inverted to near-white on dark presets — use the theme
   accent instead so primary buttons stay accurate in every dark theme */
:root[data-theme="dark"] .btn-dark{ background:var(--color-tint);color:#fff; }
:root[data-theme="dark"] .btn-dark:hover{ filter:brightness(1.08); }


/* sticky/fixed blocks (announcement bar etc.) behave as normal sections
   inside the editor canvas — published output is untouched */
.page-sheet .blk [style*="position:sticky"],
.page-sheet .blk [style*="position:fixed"]{ position:relative!important; }

/* ============================ LIST EDITOR ============================ */
.list-ed{ display:flex;flex-direction:column;gap:8px; }
.list-ed-item{
  border:1px solid var(--color-separator);border-radius:10px;
  background:var(--color-bg-elevated);padding:8px 10px 10px;
}
.list-ed-head{ display:flex;align-items:center;gap:2px;margin-bottom:4px; }
.list-ed-n{
  font-size:10.5px;font-weight:600;color:var(--color-label-tertiary);
  background:var(--color-fill-tertiary);border-radius:6px;padding:2px 7px;
}
.list-ed-sp{ flex:1; }
.list-ed-ic{
  width:24px;height:24px;border-radius:6px;border:none;background:transparent;
  color:var(--color-label-tertiary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .12s,color .12s;
}
.list-ed-ic:hover{ background:var(--color-fill-tertiary);color:var(--color-label-primary); }
.list-ed-ic:disabled{ opacity:.3;cursor:default;background:transparent; }
.list-ed-del:hover{ color:var(--color-destructive);background:color-mix(in srgb,var(--color-destructive) 10%,transparent); }
.list-ed-cell{ margin-top:6px; }
.list-ed-cell label{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-label-tertiary);margin-bottom:3px;
}
.list-ed-cell input,.list-ed-cell textarea{
  width:100%;font:inherit;font-size:12.5px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--color-separator);background:var(--color-bg-primary);color:var(--color-label-primary);
}
.list-ed-cell input:focus,.list-ed-cell textarea:focus{ outline:none;border-color:var(--color-tint);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint) 14%,transparent); }
.list-ed-foot{ display:flex;gap:8px;align-items:center;margin-top:2px; }
.list-ed-add,.list-ed-raw{
  display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--color-separator);
  background:transparent;color:var(--color-label-secondary);font:inherit;font-size:12px;font-weight:500;
  padding:7px 12px;border-radius:8px;cursor:pointer;transition:border-color .12s,color .12s,background .12s;
}
.list-ed-add{ flex:1;justify-content:center; }
.list-ed-add:hover{ border-color:var(--color-tint);color:var(--color-tint);border-style:solid; }
.list-ed-raw{ border-style:solid; }
.list-ed-raw:hover{ color:var(--color-label-primary);background:var(--color-fill-quaternary); }
.list-ed-back{ align-self:flex-start;margin-top:6px; }

/* empty page canvas state */
.canvas-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:88px 24px;text-align:center;color:var(--color-label-tertiary);
}
.canvas-empty h3{ margin:6px 0 0;font-size:16px;font-weight:600;color:var(--color-label-primary); }
.canvas-empty p{ margin:0 0 14px;font-size:13px;color:var(--color-label-secondary);max-width:34ch; }

/* =====================================================================
   v7.4 — MOBILE. Bottom tab bar, builder bottom sheets, sheet modals,
   touch targets, safe areas, iOS input-zoom fix, tap-reveal actions.
===================================================================== */

/* global touch behaviour */
*{ -webkit-tap-highlight-color:transparent; }
button,a,[role="button"]{ touch-action:manipulation; }

/* ---------- mobile tab bar ---------- */
.m-tabbar{
  display:none;position:fixed;left:10px;right:10px;
  bottom:calc(8px + env(safe-area-inset-bottom,0px));
  z-index:150;height:60px;padding:0 6px;
  border-radius:20px;align-items:stretch;justify-content:space-around;
  background:var(--glass-fill);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--color-separator);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.m-tabbar button{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:none;background:transparent;font:inherit;font-size:10px;font-weight:600;
  color:var(--color-label-tertiary);cursor:pointer;border-radius:14px;min-width:0;
}
.m-tabbar button svg.lucide{ width:20px;height:20px;stroke-width:1.9; }
.m-tabbar button.on{ color:var(--color-tint); }
.m-tabbar button:active{ transform:scale(.94); }
@media (max-width:760px){
  .m-tabbar{ display:flex; }
  body.in-builder-edit .m-tabbar,
  body.builder-preview .m-tabbar{ display:none; }
  /* room for the bar at page bottom */
  #view-app .page{ padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
}
@media (min-width:761px){ .m-tabbar{ display:none!important; } }

/* ---------- builder on phones: bottom sheets + tool bar ---------- */
@media (max-width:760px){
  body.in-builder-edit .panel-left{
    display:flex!important;position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;max-width:none;height:auto;max-height:72dvh;
    border-radius:20px 20px 0 0;border:1px solid var(--color-separator);border-bottom:none;
    background:var(--color-bg-elevated);z-index:220;
    transform:translateY(105%);transition:transform .32s cubic-bezier(.32,.72,.22,1);
    box-shadow:0 -18px 50px rgba(0,0,0,.30);
    padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;overscroll-behavior:contain;
  }
  body.mb-left-open .panel-left{ transform:translateY(0); }
  body.in-builder-edit .panel-right{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;max-width:none;height:auto;max-height:72dvh;
    border-radius:20px 20px 0 0;border:1px solid var(--color-separator);border-bottom:none;
    background:var(--color-bg-elevated);z-index:220;
    transform:translateY(105%);transition:transform .32s cubic-bezier(.32,.72,.22,1);
    box-shadow:0 -18px 50px rgba(0,0,0,.30);
    padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;overscroll-behavior:contain;
  }
  body.mb-right-open .panel-right{ transform:translateY(0); }
  /* grab handle */
  body.in-builder-edit .panel-left::before,
  body.in-builder-edit .panel-right::before{
    content:"";display:block;width:38px;height:4px;border-radius:2px;
    background:var(--color-fill-primary);margin:8px auto 4px;flex:0 0 auto;
  }
  .mb-veil{ position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.32);backdrop-filter:blur(2px); }
  .mb-bar{
    display:flex;position:fixed;left:10px;right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    z-index:230;height:60px;padding:0 6px;border-radius:20px;
    align-items:center;justify-content:space-around;
    background:var(--glass-fill);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--color-separator);
    box-shadow:0 12px 40px rgba(0,0,0,.28);
  }
  .mb-bar button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:none;background:transparent;font:inherit;font-size:10px;font-weight:600;
    color:var(--color-label-tertiary);cursor:pointer;min-width:0;
  }
  .mb-bar button svg.lucide{ width:19px;height:19px;stroke-width:1.9; }
  .mb-bar button.on{ color:var(--color-tint); }
  .mb-bar .mb-add{
    flex:0 0 52px;height:44px;border-radius:16px;background:var(--color-tint);color:#fff;
    box-shadow:0 6px 18px color-mix(in srgb,var(--color-tint) 45%,transparent);
  }
  .mb-bar .mb-add svg.lucide{ width:22px;height:22px;color:#fff;stroke:#fff; }
  body.builder-preview .mb-bar,body.builder-preview .mb-veil{ display:none; }
  /* builder pill compacts above the canvas */
  .b-pill{ top:calc(8px + env(safe-area-inset-top,0px));height:42px; }
  .b-pill .bp-label span{ display:none; }
  .canvas-wrap{ padding-bottom:calc(90px + env(safe-area-inset-bottom,0px)); }
}
@media (min-width:761px){ .mb-bar,.mb-veil{ display:none!important; } }

/* ---------- modals become bottom sheets on phones ---------- */
@media (max-width:640px){
  .modal-veil{ align-items:flex-end;padding:0; }
  .modal-veil .modal{
    width:100%;max-width:none;border-radius:22px 22px 0 0;
    max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
    animation:sheet-up .34s cubic-bezier(.32,.72,.22,1);
  }
  @keyframes sheet-up{ from{ transform:translateY(40px);opacity:.4; } to{ transform:none;opacity:1; } }
  .tpl-scroll{ max-height:52dvh; }
  .tpl-grid-lg{ grid-template-columns:1fr 1fr;gap:10px; }
  .tpl-footer{ flex-wrap:wrap; }
  .tpl-picked{ width:100%;margin:0 0 4px; }
}
@media (max-width:440px){ .tpl-grid-lg{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .modal-veil .modal{ animation:none; } }

/* ---------- touch targets & iOS ---------- */
@media (pointer:coarse){
  .blk-tools button{ width:38px;height:38px; }
  .list-ed-ic{ width:32px;height:32px; }
  .pill-hit,.icon-btn{ min-width:40px;min-height:40px; }
  .seg button{ min-height:36px; }
  .drop-line{ height:26px;margin:-13px 0; }
  .drop-line .ins{ opacity:.65;transform:translateX(-50%) scale(1);top:0; }
  /* hover-only affordances get a persistent hint */
  .pc-hover-actions{ transition:opacity .18s; }
  .project-card.show-actions .pc-hover-actions{ opacity:1; }
}
@media (max-width:760px){
  /* prevent iOS focus zoom: form controls at 16px */
  input,textarea,select,.list-ed-cell input,.list-ed-cell textarea{ font-size:16px!important; }
  /* full-width panels inside pages */
  .pc-hover-actions{ gap:6px;padding:10px; }
  .pca-btn{ height:34px; }
}

/* side drawer respects safe areas */
@media (max-width:900px){
  #view-app .side{ padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
}