/**
 * DECTO Glass stage — the canvas IS glass. Nothing is laid on top of UI.
 *
 * Stage  = atmospheric background on html (no overlay, no z-index)
 * Chrome = translucent frost (header, dock, nav, sheets)
 * Rafts  = posts, owner actions, buttons sit ON the glass and read louder
 */

:root {
  --bn-glass-filter: blur(var(--bn-glass-blur-1, 22px)) saturate(var(--bn-glass-sat, 1.35));
  --bn-glass-filter-2: blur(var(--bn-glass-blur-2, 18px)) saturate(var(--bn-glass-sat, 1.35));
  --bn-glass-filter-3: blur(var(--bn-glass-blur-3, 28px)) saturate(1.4);
  --bn-raft: rgba(255, 255, 255, 0.52);
  --bn-raft-plain: rgba(255, 255, 255, 0.46);
  --bn-raft-border: rgba(255, 255, 255, 0.68);
  --bn-raft-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 12px 32px rgba(15, 36, 29, 0.07);
}

html[data-theme='dark'] {
  --bn-raft:
    linear-gradient(155deg, rgba(30, 45, 40, 0.72), rgba(21, 33, 29, 0.62) 56%, rgba(197, 164, 109, 0.14));
  --bn-raft-plain: rgba(24, 38, 33, 0.68);
  --bn-raft-border: rgba(244, 242, 236, 0.12);
  --bn-raft-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 22px 52px rgba(0, 0, 0, 0.26);
}

/* --------------------------------------------------------------------------
   1) Kill covering overlays + matte white canvases. Atmosphere is on html.
   -------------------------------------------------------------------------- */
html {
  background-color: #f7f6f3 !important;
  background-image: var(--bn-ambient-bg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: scroll !important;
  min-height: 100% !important;
}

html[data-theme='dark'] {
  background-color: #101a17 !important;
}

body::before {
  content: none !important;
  display: none !important;
}

html,
body,
body.app-shell,
body.index-page,
body.auth-page,
body.auth-page.auth-page--provider,
body.auth-page.auth-page--staff,
main,
.main-content,
.bn-main,
footer,
.footer,
.site-footer,
body.app-shell .main-content,
body.app-shell .bn-app-page,
body.app-shell .bn-feed-page,
body.app-shell .bn-explore-page,
body.app-shell .bn-search-page,
body.app-shell .bn-settings-page,
body.app-shell .bn-settings-app-page,
body.app-shell .bn-doctors-page,
body.app-shell .doctors-page,
body.app-shell .bn-profile-page,
body.app-shell .bn-chat-page,
body.app-shell .bn-chat-layout,
body.app-shell .bn-chat-sidebar,
body.app-shell .bn-chat-main,
body.app-shell .bn-chat-messages,
body.app-shell .bn-appointments-page,
body.app-shell .bn-notifications-page,
body.app-shell .bn-tools-page,
body.index-page .main-content,
body.index-page main,
body.index-page .dl-section,
body.index-page .dl-journey,
body.index-page .dl-final,
body.index-page .dl-hero,
body.index-page .container,
body.auth-page .main-content,
body.auth-page .auth-container,
body.auth-page .auth-container--clean,
body.auth-page .auth-container--notebook {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.app-shell .main-content,
body.app-shell:not(.bn-explore-route) .main-content {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  isolation: isolate;
}

/* Only immersive reels / map / story — never the explore grid header/page */
html:has(body.bn-explore-reels-open),
html:has(body.decto-map-open),
html:has(body.dp-story-studio-open) {
  background-image: none !important;
  background-color: #000 !important;
}

html:has(body.bn-explore-reels-open) body,
body.bn-explore-reels-open,
body.bn-explore-reels-open .main-content {
  background: #000 !important;
}

/* Explore grid keeps site glass stage + normal glass header */
body.app-shell.bn-explore-route,
body.app-shell.bn-explore-route .main-content,
body.app-shell.bn-explore-route .bn-explore-page,
body.app-shell:has(.bn-explore-page):not(.bn-explore-reels-open) .main-content {
  background: transparent !important;
  background-image: none !important;
}

body.app-shell.bn-explore-route .app-header,
body.app-shell.bn-explore-route .app-header--luxury,
body.app-shell:has(.bn-explore-page):not(.bn-explore-reels-open) .app-header {
  background: var(--bn-glass-1) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--bn-glass-border-ink) !important;
  box-shadow: var(--bn-glass-shadow-1) !important;
  backdrop-filter: var(--bn-glass-filter) !important;
  -webkit-backdrop-filter: var(--bn-glass-filter) !important;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root {
    --bn-glass-1: rgba(255, 255, 255, 0.94);
    --bn-glass-2: rgba(255, 255, 255, 0.96);
    --bn-glass-3: #ffffff;
    --bn-raft: #ffffff;
  }
  html[data-theme='dark'] {
    --bn-glass-1: rgba(16, 26, 23, 0.94);
    --bn-glass-2: rgba(18, 30, 26, 0.96);
    --bn-glass-3: #16241f;
    --bn-raft: #16241f;
  }
}

/* --------------------------------------------------------------------------
   2) Chrome — glass, never a full-page frost
   -------------------------------------------------------------------------- */
body.app-shell .app-header,
body.app-shell .app-header--luxury {
  background: var(--bn-glass-1) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--bn-glass-border-ink) !important;
  box-shadow: var(--bn-glass-shadow-1) !important;
  backdrop-filter: var(--bn-glass-filter) !important;
  -webkit-backdrop-filter: var(--bn-glass-filter) !important;
}

body.app-shell .app-header-inner,
body.app-shell .app-header-inner--app {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:not(.app-shell) .navbar,
body:not(.app-shell) .navbar--premium,
body.index-page .navbar,
body.index-page #navbar,
body.auth-page .navbar,
body.auth-page .navbar--premium {
  background: var(--bn-glass-1) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bn-glass-border-ink) !important;
  box-shadow: var(--bn-glass-shadow-1) !important;
  backdrop-filter: var(--bn-glass-filter) !important;
  -webkit-backdrop-filter: var(--bn-glass-filter) !important;
}

body.index-page .navbar.is-scrolled,
body.index-page #navbar.is-scrolled {
  background: var(--bn-glass-3) !important;
}

body.app-shell .app-header-icon:hover {
  background: rgba(23, 56, 47, 0.08) !important;
}

body.app-shell .app-header-icon:active {
  transform: scale(0.96);
}

body.app-shell .bottom-nav--glass .bottom-nav-item:hover {
  background: rgba(23, 56, 47, 0.07);
}

body.app-shell .bottom-nav--glass .bottom-nav-item:focus-visible,
body.app-shell .app-header-icon:focus-visible {
  outline: none;
  box-shadow: var(--bn-focus-ring);
}

/* --------------------------------------------------------------------------
   3) Rafts — posts / options / buttons ride ON the glass
   -------------------------------------------------------------------------- */
body.app-shell .bn-feed-list {
  padding-inline: 10px !important;
  padding-bottom: 8px !important;
}

body.app-shell .bn-feed-card,
body.app-shell .bn-feed-card.feed-post--cinema,
body.app-shell .bn-feed-card.feed-post--iconic {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate;
  margin: 10px 0 0 !important;
  border: 1px solid var(--bn-raft-border) !important;
  border-radius: 22px !important;
  background: var(--bn-raft) !important;
  box-shadow: var(--bn-raft-shadow) !important;
  backdrop-filter: blur(16px) saturate(1.24) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.24) !important;
  overflow: hidden !important;
}

body.app-shell .bn-feed-card + .bn-feed-card {
  border-top: 1px solid var(--bn-raft-border) !important;
}

body.app-shell .bn-feed-card__author,
body.app-shell .bn-feed-card__author--app,
body.app-shell .bn-feed-card__body,
body.app-shell .bn-feed-card__body.feed-post-body,
body.app-shell .feed-post-compact-actions--app {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.bn-provider-card,
.doctor-card--lux,
.bn-search-hub__panel,
.smart-search-panel,
.smart-search-panel--compact,
.search-bar,
.doctors-search-bar,
.bn-search-bar,
.bn-ai-search-studio,
.bn-ai-search-studio--page,
.settings-card,
.bn-settings-card,
.bn-settings-panel,
.appointment-card,
.bn-appt-card,
.notification-item,
.bn-notif-card,
body.app-shell .bn-chat-list-item,
body.app-shell #chatConversationList .bn-chat-list-item {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: var(--bn-raft) !important;
  background-image: none !important;
  border: 1px solid var(--bn-raft-border) !important;
  box-shadow: var(--bn-raft-shadow) !important;
}

.bn-provider-card,
.doctor-card--lux,
.bn-search-hub__panel,
.smart-search-panel {
  border-radius: var(--bn-radius, 20px) !important;
}

.bn-search-hub__btn,
.bn-search-hub__btn--ai {
  background: var(--bn-raft) !important;
  border: 1px solid var(--bn-raft-border) !important;
  box-shadow: var(--bn-raft-shadow) !important;
}

.bn-search-hub__btn--ai {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(231, 239, 234, 0.88)) !important;
}

body.app-shell .settings-row,
body.app-shell .bn-settings-row,
body.app-shell .bn-settings-item,
body.app-shell .tools-card,
body.app-shell .bn-tool-card,
body.app-shell .bn-tools-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: var(--bn-raft) !important;
  border: 1px solid var(--bn-raft-border) !important;
  box-shadow: var(--bn-raft-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.22) !important;
}

body.app-shell .btn,
body.app-shell button,
body.app-shell .bn-btn,
body.app-shell .chip,
body.app-shell .pill,
body.app-shell .action-chip,
body.app-shell .icon-btn,
body.app-shell .feed-save-pill,
body.app-shell .feed-icon-btn,
body.auth-page .btn,
body.auth-page button,
body.index-page .btn {
  border-color: rgba(23, 56, 47, 0.12) !important;
}

body.app-shell .btn:not(.btn-primary):not(.bn-btn--primary):not(.dp-owner-hero-btn--post):not(.dp-owner-hero-btn--primary),
body.app-shell .bn-btn:not(.bn-btn--primary),
body.app-shell .chip,
body.app-shell .pill,
body.app-shell .action-chip,
body.app-shell .icon-btn,
body.app-shell .feed-save-pill,
body.app-shell .feed-icon-btn,
body.auth-page .btn:not(.btn-primary),
body.auth-page button:not([type='submit']),
body.index-page .btn:not(.dl-btn--primary) {
  background: var(--bn-raft) !important;
  box-shadow: var(--bn-raft-shadow) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
}

.explore-card,
.bn-explore-card,
.explore-app-card,
.decto-explore-card {
  box-shadow: var(--bn-glass-shadow-1);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

@media (hover: hover) and (pointer: fine) {
  .bn-provider-card,
  .doctor-card--lux,
  .bn-search-hub__btn,
  body.app-shell .bn-feed-card,
  .dp-owner-hero-btn,
  .cp-owner-hero-btn,
  .pp-owner-nav-btn {
    transition:
      transform var(--bn-duration-fast, 160ms) var(--bn-ease-out, ease),
      box-shadow var(--bn-duration-fast, 160ms) var(--bn-ease-out, ease),
      border-color var(--bn-duration-fast, 160ms) ease;
  }
  .bn-provider-card:hover,
  .doctor-card--lux:hover,
  body.app-shell .bn-feed-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.95) inset,
      0 16px 36px rgba(15, 36, 29, 0.14);
  }
  .bn-search-hub__btn:hover,
  .dp-owner-hero-btn:hover,
  .cp-owner-hero-btn:hover,
  .pp-owner-nav-btn:hover {
    transform: translateY(-1px);
  }
}

/* --------------------------------------------------------------------------
   4) Owner profile actions — always above the stage, never frosted over
   -------------------------------------------------------------------------- */
.dp-owner-action-deck,
.cp-owner-action-deck,
.pp-owner-nav-stack,
.dp-owner-nav-stack,
#doctorOwnerHero,
#clinicOwnerHero,
#patientOwnerHero {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.dp-owner-hero-btn,
.cp-owner-hero-btn,
.pp-owner-nav-btn,
.pp-owner-edit-chip {
  position: relative !important;
  z-index: 3 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--bn-raft) !important;
  border: 1px solid var(--bn-raft-border) !important;
  box-shadow: var(--bn-raft-shadow) !important;
  color: #17382f !important;
  font-weight: 800 !important;
}

.dp-owner-hero-btn--post,
.dp-owner-hero-btn--primary,
.cp-owner-hero-btn--post,
.cp-owner-hero-btn--primary {
  background: #17382f !important;
  color: #fffcf8 !important;
  border-color: transparent !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 12px 24px rgba(15, 36, 29, 0.22) !important;
}

.dp-owner-hero-btn__icon,
.dp-owner-hero-btn__label,
.cp-owner-hero-btn__icon,
.cp-owner-hero-btn__label,
.pp-owner-nav-btn .bn-ui-icon,
.pp-owner-nav-btn i {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* --------------------------------------------------------------------------
   5) Dialogs / overlays — glass sheets, content still on top
   -------------------------------------------------------------------------- */
#postComposerModal .composer-sheet,
#postComposerModal .composer-pro-sheet,
body.composer-modal-open .composer-pro-sheet,
.modal-content,
.bn-modal__sheet,
.explore-modal-sheet,
.booking-sheet,
.dp-services-studio,
.doctor-publisher-hub,
.lux-menu-panel.lux-menu-panel--ig,
aside#luxMenuPanel.lux-menu-panel--ig,
body.app-shell aside#luxMenuPanel.lux-menu-panel--ig {
  background: var(--bn-glass-3) !important;
  background-image: none !important;
  backdrop-filter: var(--bn-glass-filter-3) !important;
  -webkit-backdrop-filter: var(--bn-glass-filter-3) !important;
  border-color: var(--bn-glass-border-ink) !important;
  box-shadow: var(--bn-glass-shadow-3) !important;
}

body.app-shell .lux-menu-sheet,
.lux-menu-sheet,
.lux-menu-scroll {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.app-shell .bn-locale-panel {
  background: var(--bn-glass-3) !important;
  backdrop-filter: var(--bn-glass-filter-2);
  -webkit-backdrop-filter: var(--bn-glass-filter-2);
  border: 1px solid var(--bn-glass-border-ink);
}

/* --------------------------------------------------------------------------
   6) Auth
   -------------------------------------------------------------------------- */
body.auth-page .auth-card,
body.auth-page .auth-notebook-sheet,
body.auth-page .auth-notebook-sheet--login {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: var(--bn-glass-3) !important;
  border: 1px solid var(--bn-glass-border-ink) !important;
  box-shadow: var(--bn-glass-shadow-3) !important;
  backdrop-filter: var(--bn-glass-filter-3) !important;
  -webkit-backdrop-filter: var(--bn-glass-filter-3) !important;
}

body.auth-page .form-control,
body.auth-page input[type='tel'],
body.auth-page input[type='text'],
body.auth-page input[type='password'] {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.auth-page .form-control:focus {
  border-color: rgba(23, 56, 47, 0.28) !important;
  box-shadow: var(--bn-focus-ring) !important;
}

body.auth-page .btn-primary,
body.auth-page button[type='submit'] {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   7) Profile visitor — photo stays crisp; actions ride the glass
   -------------------------------------------------------------------------- */
body.bn-profile--visitor .dp-visitor-action-tile,
body.bn-profile--visitor .bn-visitor-action,
body.bn-profile--visitor .dp-visitor-action-tile--lg,
body.bn-profile--visitor .bn-profile-tabs,
body.bn-profile--visitor .dp-tabs,
body.bn-profile--visitor .dp-visitor-service-chip,
.dp-visitor-services-lux {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: var(--bn-raft) !important;
  border: 1px solid var(--bn-raft-border) !important;
  box-shadow: var(--bn-raft-shadow) !important;
}

body.bn-profile--visitor .bn-profile-hero,
body.bn-profile--visitor .dp-hero,
body.bn-profile--visitor .bn-profile-card,
body.bn-profile--visitor .dp-hero-inner,
body.bn-profile--visitor .dp-visitor-stack,
body.app-shell.bn-profile--visitor .bn-profile-card,
body.app-shell.bn-profile--visitor .bn-profile-hero,
body.app-shell.bn-profile--visitor .bn-profile-social-shell {
  background: transparent !important;
  box-shadow: none !important;
}

body.bn-profile--visitor .dp-avatar,
body.bn-profile--visitor .bn-profile-avatar,
.doctor-editorial-photo {
  box-shadow: 0 10px 28px rgba(15, 36, 29, 0.14);
}

/* --------------------------------------------------------------------------
   8) Landing — paper sections gone; cards ride glass
   -------------------------------------------------------------------------- */
body.index-page {
  --dl-paper: transparent;
}

body.index-page .dl-method-card,
body.index-page .dl-audience-card,
body.index-page .dl-final__box,
body.index-page .dl-btn--ghost,
body.index-page .dl-journey__step {
  background: var(--bn-glass-2) !important;
  border: 1px solid var(--bn-glass-border-ink) !important;
  box-shadow: var(--bn-glass-shadow-1);
  backdrop-filter: var(--bn-glass-filter-2) !important;
  -webkit-backdrop-filter: var(--bn-glass-filter-2) !important;
}

body.index-page .dl-app-dock a,
body.index-page .dl-app-dock span {
  background: var(--bn-glass-2) !important;
  backdrop-filter: var(--bn-glass-filter) !important;
  -webkit-backdrop-filter: var(--bn-glass-filter) !important;
}

body.index-page .dl-final__box {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(197, 164, 109, 0.14), transparent 55%),
    var(--bn-glass-2) !important;
}

/* --------------------------------------------------------------------------
   9) Chat — stage is glass; bubbles stay bold and readable
   -------------------------------------------------------------------------- */
body.app-shell.bn-chat-active,
body.app-shell.bn-chat-active .main-content,
body.app-shell.bn-chat-active .bn-chat-page,
body.app-shell.bn-chat-active .bn-chat-layout,
body.app-shell.bn-chat-active .bn-chat-sidebar,
body.app-shell.bn-chat-active .bn-chat-main,
body.app-shell.bn-chat-active .bn-chat-messages,
body.app-shell.bn-chat-active #chatApp,
body.app-shell.bn-chat-active #chatLayout,
body.app-shell.bn-chat-active #chatConversationList {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.app-shell.bn-chat-active #chatCompose.bn-chat-compose:not([hidden]) {
  background: var(--bn-glass-3) !important;
  backdrop-filter: var(--bn-glass-filter-2) !important;
  -webkit-backdrop-filter: var(--bn-glass-filter-2) !important;
  border-top: 1px solid var(--bn-glass-border-ink) !important;
}

body.app-shell .bn-chat-bubble--theirs,
body.app-shell #chatMessages .bn-chat-bubble--theirs {
  background: var(--bn-raft) !important;
  box-shadow: var(--bn-raft-shadow) !important;
  border: 1px solid var(--bn-raft-border) !important;
  backdrop-filter: blur(12px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
}

body.app-shell .bn-chat-bubble--mine,
body.app-shell #chatMessages .bn-chat-bubble--mine {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 16px 32px rgba(15, 36, 29, 0.22) !important;
}

body.app-shell .bn-chat-list-item,
body.app-shell .bn-chat-thread,
body.app-shell .chat-thread-item,
body.app-shell .notification-card,
body.app-shell .notif-item {
  background: var(--bn-raft) !important;
  border: 1px solid var(--bn-raft-border) !important;
  box-shadow: var(--bn-raft-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.22) !important;
}

body.app-shell .bn-chat-list-item {
  border-radius: 16px !important;
  margin: 6px 10px !important;
  border-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   10) Type + motion
   -------------------------------------------------------------------------- */
body.app-shell .bn-title-display,
body.app-shell h1,
body.auth-page .auth-header h1 {
  letter-spacing: -0.03em;
  line-height: 1.22;
}

body.app-shell .bn-body,
body.app-shell p,
body.auth-page #loginSubtitle {
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  .bn-provider-card,
  .bn-search-hub__btn,
  body.index-page .dl-btn,
  body.app-shell .app-header-icon,
  body.app-shell .bottom-nav--glass .bottom-nav-item,
  body.app-shell .bn-feed-card,
  .dp-owner-hero-btn,
  .cp-owner-hero-btn {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --bn-glass-1: rgba(255, 255, 255, 0.96);
    --bn-glass-2: #ffffff;
    --bn-glass-3: #ffffff;
    --bn-raft: #ffffff;
  }
}

/* --------------------------------------------------------------------------
   11) Final glass stage lock (no overlay layer — replace page fills only)
   -------------------------------------------------------------------------- */
html {
  background-color: #d8e4de !important;
  background-image: var(--bn-ambient-bg) !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  min-height: 100% !important;
}

body,
body.index-page,
body.auth-page,
body.app-shell,
body.app-shell .main-content,
body.index-page .main-content,
body.auth-page .main-content,
body.index-page .dl-section,
body.index-page .dl-journey,
body.index-page .dl-final,
body.index-page .dl-hero,
body.index-page .container,
body.index-page .bl-hero,
body.index-page .lux-section,
body.auth-page .auth-container,
body.auth-page .auth-container--clean,
body.auth-page .auth-container--notebook,
body.app-shell .bn-feed-page,
body.app-shell .bn-profile-page,
body.app-shell .bn-settings-page,
body.app-shell .bn-settings-app-page,
body.app-shell .bn-tools-page,
body.app-shell .bn-appointments-page,
body.app-shell .bn-notifications-page,
body.app-shell .bn-search-page,
body.app-shell .bn-doctors-page,
body.app-shell .doctor-profile-page,
body.app-shell .clinic-profile,
body.app-shell .patient-profile-page,
body.app-shell .bn-profile-card,
body.app-shell .bn-profile-hero,
body.app-shell .bn-profile-social-shell,
body.app-shell .iconic-profile-hero,
body.app-shell .dp-hero {
  background-color: transparent !important;
  background-image: none !important;
}

body.auth-page .auth-card,
body.auth-page .auth-notebook-sheet,
body.auth-page .auth-container--clean .auth-card,
body.index-page .dl-method-card,
body.index-page .dl-audience-card,
body.index-page .dl-journey__step,
body.index-page .dl-final__box,
body.index-page .dl-btn--ghost,
body.index-page .bl-hero__trust-card,
body.index-page .lux-feature-card,
body.index-page .bl-experience__pill,
body.index-page .bl-app-dl,
body.app-shell .bn-profile-tabs,
body.app-shell .dp-tabs,
body.app-shell .settings-card,
body.app-shell .bn-settings-card,
body.app-shell .bn-settings-panel {
  background: var(--bn-raft) !important;
  border: 1px solid var(--bn-raft-border) !important;
  box-shadow: var(--bn-raft-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.28) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.28) !important;
}

/* Never freeze explore grid into black (reels modal handles its own black) */
body.app-shell.bn-explore-route:not(.bn-explore-reels-open) .app-header,
body.app-shell.bn-explore-route:not(.bn-explore-reels-open) .app-header--luxury {
  background: var(--bn-glass-1) !important;
  color: inherit !important;
}