/* ═══════════════════════════════════════════════════════════════
   Shared Apple Spatial studio shell + liquid glass panels
   Used by Sites · Builds · Create · Community · Quests · Chat
   ═══════════════════════════════════════════════════════════════ */

.studio-shell,
.sites-studio,
.sites-detail,
.sites-dash,
.builds-studio,
.builds-detail,
.create-studio,
.community-studio,
.quest-studio,
.chat-studio {
  --c-blue: #0a84ff;
  --c-mint: #30d158;
  --c-amber: #ff9f0a;
  --c-fill: oklch(1 0 0 / 0.08);
  --c-fill-hi: oklch(1 0 0 / 0.12);
  --c-stroke: oklch(1 0 0 / 0.12);
  --c-stroke-hi: oklch(1 0 0 / 0.22);
  --c-label: oklch(0.93 0.01 260);
  --c-secondary: oklch(0.72 0.015 260);
  --c-tertiary: oklch(0.55 0.012 260);
  --c-radius: var(--glass-radius-lg, 22px);
  --c-radius-sm: var(--glass-radius-sm, 14px);
  --c-ease: var(--glass-spring-hover, cubic-bezier(0.32, 0.72, 0, 1));
  --c-spring: var(--glass-spring-press, cubic-bezier(0.22, 1, 0.36, 1));

  /* Bridge create.css apple-* aliases */
  --apple-blue: var(--c-blue);
  --apple-fill: var(--c-fill);
  --apple-fill-hi: var(--c-fill-hi);
  --apple-stroke: var(--c-stroke);
  --apple-stroke-hi: var(--c-stroke-hi);
  --apple-label: var(--c-label);
  --apple-secondary: var(--c-secondary);
  --apple-tertiary: var(--c-tertiary);
  --apple-radius: var(--c-radius);
  --apple-radius-sm: var(--c-radius-sm);
  --apple-ease: var(--c-ease);
  --apple-spring: var(--c-spring);
}

/* Liquid glass panel — clean multi-layer material */
.lg-panel {
  position: relative;
  isolation: isolate;
  border-radius: var(--c-radius, var(--glass-radius-lg));
  overflow: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
}
.lg-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      oklch(1 0 0 / 0.16) 0%,
      oklch(1 0 0 / 0.04) 32%,
      oklch(0.14 0.016 270 / 0.55) 100%);
  backdrop-filter:
    blur(20px)
    saturate(165%)
    brightness(1.05);
  -webkit-backdrop-filter:
    blur(20px)
    saturate(165%)
    brightness(1.05);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.28),
    inset 0 -0.5px 0 oklch(0 0 0 / 0.08),
    inset 0 0 0 0.5px oklch(1 0 0 / 0.14),
    0 8px 28px oklch(0 0 0 / 0.18);
}
.lg-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% -8%, oklch(1 0 0 / 0.08), transparent 55%),
    linear-gradient(135deg, oklch(1 0 0 / 0.1) 0%, transparent 45%);
  mix-blend-mode: soft-light;
  opacity: 0.7;
}
.lg-panel > * {
  position: relative;
  z-index: 2;
}

.lg-panel--sm { border-radius: var(--c-radius-sm, var(--glass-radius-sm)); }
.lg-panel--elev3::before {
  backdrop-filter:
    blur(var(--glass-e3-blur, 40px))
    saturate(var(--glass-saturate, 180%))
    brightness(var(--glass-brightness, 1.08));
  -webkit-backdrop-filter:
    blur(var(--glass-e3-blur, 40px))
    saturate(var(--glass-saturate, 180%))
    brightness(var(--glass-brightness, 1.08));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-top),
    inset 0 0 0 0.5px var(--glass-rim),
    var(--glass-e3-shadow);
}

/* Shared studio chrome */
.studio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--glass-radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-ui), -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.2s var(--c-spring, var(--glass-spring-press)), background 0.2s ease, border-color 0.2s ease;
}
.studio-btn:active { transform: scale(0.97); }
.studio-btn--primary {
  background: var(--c-blue, #0a84ff);
  color: #fff;
  box-shadow: 0 8px 24px oklch(0.55 0.18 250 / 0.35);
}
.studio-btn--ghost {
  background: var(--c-fill, oklch(1 0 0 / 0.08));
  border-color: var(--c-stroke, oklch(1 0 0 / 0.12));
  color: var(--c-label, oklch(0.93 0.01 260));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.studio-btn--ghost:hover {
  background: var(--c-fill-hi, oklch(1 0 0 / 0.12));
  border-color: var(--c-stroke-hi, oklch(1 0 0 / 0.22));
}
.studio-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Legacy surfaces → liquid glass (app-wide consistency) */
.user-screen {
  position: relative;
  isolation: isolate;
  font-family: var(--font-ui), -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  background:
    radial-gradient(90% 55% at 50% -8%, oklch(0.42 0.08 250 / 0.28), transparent 58%),
    oklch(0.09 0.015 260);
  color: var(--c-label, var(--text));
}
.user-screen .pg-title,
.user-screen .pg-hero h1,
.bc-hero h1,
.bc-balance {
  font-family: var(--font-ui), -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif !important;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.user-screen .pg-eyebrow,
.user-screen .pg-sub,
.bc-hero p {
  font-family: inherit !important;
  letter-spacing: -0.01em;
}

.user-screen .opp-section,
.user-screen .fund-sidebar,
.user-screen .proj-card,
.user-screen .stat-chip,
.user-screen .funding-pg-card,
.user-screen .pg-search,
.user-screen .tab-bar,
.bc-card,
.bc-wallet-card,
.bc-stat,
.inv-card,
.inv-item,
.wallet-card,
.mp-card {
  position: relative;
  isolation: isolate;
  border-color: transparent !important;
  background: transparent !important;
  overflow: hidden;
}
.user-screen .opp-section::before,
.user-screen .fund-sidebar::before,
.user-screen .proj-card::before,
.user-screen .stat-chip::before,
.user-screen .funding-pg-card::before,
.user-screen .pg-search::before,
.user-screen .tab-bar::before,
.bc-card::before,
.bc-wallet-card::before,
.bc-stat::before,
.inv-card::before,
.inv-item::before,
.wallet-card::before,
.mp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      oklch(1 0 0 / 0.14) 0%,
      oklch(1 0 0 / 0.04) 30%,
      oklch(0.14 0.016 270 / 0.55) 100%);
  backdrop-filter: blur(18px) saturate(165%) brightness(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(165%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.26),
    inset 0 0 0 0.5px oklch(1 0 0 / 0.12),
    0 6px 20px oklch(0 0 0 / 0.14);
}
.user-screen .opp-section > *,
.user-screen .fund-sidebar > *,
.user-screen .proj-card > *,
.user-screen .stat-chip > *,
.user-screen .funding-pg-card > *,
.user-screen .pg-search > *,
.user-screen .tab-bar > *,
.bc-card > *,
.bc-wallet-card > *,
.bc-stat > *,
.inv-card > *,
.inv-item > *,
.wallet-card > *,
.mp-card > * {
  position: relative;
  z-index: 1;
}

/* Sites panels also use shared liquid glass */
.sites-panel,
.sites-card,
.sites-seg,
.sites-sheet,
.sites-map,
.owner-side,
.opp-stat,
.wizard-panel {
  /* keep existing studio styles; elevate rim via shared rim token */
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-top),
    inset 0 0 0 0.5px var(--glass-rim),
    var(--glass-e1-shadow);
}