/* =====================================================================
   Studio Apple material system — post-login only (#view-app)
   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-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-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;
  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}

/* 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,
#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 .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;
}

/* Sidebar + pill — frosted chrome */
#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;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 28px rgba(0,0,0,.05) !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:10px 12px;
  border-radius:14px;
  background:var(--apple-fill);
  border:none;
  box-shadow:none;
}

/* 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);
}

/* Buttons — capsule, flat, no glow */
#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}

/* Settings — iOS grouped */
#view-app .studio-page--settings .settings-nav{
  padding:3px !important;
  border-radius:12px !important;
  background:var(--apple-fill) !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-tab{
  border-radius:9px !important;
  min-height:30px !important;
  padding:0 12px !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:var(--apple-sec) !important;
  background:transparent !important;
  box-shadow:none !important;
}
#view-app .studio-page--settings .settings-tab.on{
  color:var(--apple-ink) !important;
  font-weight:600 !important;
  background:var(--color-bg-elevated,#fff) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.06) !important;
}
#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 .site-card:hover,
#view-app .studio-page--design .site-card.show-actions{
  transform:translateY(-2px) !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 ===== */
#view-app .console-page{
  max-width:1040px;
  padding-bottom:72px;
}
#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:var(--color-tint,#355cff);
  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}

/* Segmented filters */
#view-app .console-page .console-filters{
  display:inline-flex;
  gap:2px;
  padding:3px;
  border-radius:9px;
  background:var(--apple-fill);
}
#view-app .console-page .console-filter{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--apple-sec) !important;
  font-size:12px !important;
  font-weight:500 !important;
  padding:5px 10px !important;
  border-radius:7px !important;
}
#view-app .console-page .console-filter.on{
  background:var(--color-bg-elevated,#fff) !important;
  color:var(--apple-ink) !important;
  font-weight:600 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.05) !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}

/* Composition — list, not vibecoded table */
#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:8px 14px 14px;
  border-radius:12px;
  background:var(--apple-fill);
  border:none;
  box-shadow:none;
}
#view-app .console-page .console-uptime-chip{
  background:var(--apple-fill) !important;
  border:none !important;
  box-shadow:none !important;
}

/* Console cards — token glass (beats older console.css specificity) */
#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{
  background:rgba(44,44,46,.94) !important;
  border-color:rgba(255,255,255,.12) !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}
}

/* Health findings — segmented group + quiet rows */
#view-app .studio-page--health .health-find-filter,
#view-app .health-find-filter{
  display:inline-flex;gap:2px;padding:3px;border-radius:9px;
  background:var(--apple-fill,rgba(120,120,128,.12));
}
#view-app .health-find-filter button{
  appearance:none;border:none;cursor:pointer;font:inherit;
  min-height:28px;padding:0 11px;border-radius:7px;
  font-size:12px;font-weight:500;color:var(--apple-sec,rgba(60,60,67,.56));
  background:transparent;
}
#view-app .health-find-filter button.on{
  background:var(--color-bg-elevated,#fff);
  color:var(--apple-ink,#1d1d1f);
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
#view-app .health-row{
  border-radius:12px;margin:4px 0;
}
#view-app .health-fix-btn{
  box-shadow:none !important;
}