/* Settings reference implementation — September 2026 */
body:has(.phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active),
.demo-stage:has(.phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active),
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-scroll-region > .app-nav-spacer {
  background: #090a09 !important;
  background-color: #090a09 !important;
  background-image: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-scroll-region {
  color: #f4f4f2 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-screen-header {
  min-height: 96px !important;
  height: 96px !important;
  flex: 0 0 96px !important;
  padding: 18px 14px 0 !important;
  border: 0 !important;
  background: #090a09 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-screen-header h1 {
  margin: 0 !important;
  color: #f4f4f2 !important;
  font-size: 20px !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-screen-header .app-screen-header-side {
  width: 44px !important;
  min-width: 44px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-screen-header .app-screen-header-action.action-bell {
  width: 44px !important;
  height: 44px !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f0f0ed !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-screen-header .app-screen-header-action.action-bell svg {
  width: 27px !important;
  height: 27px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-screen-header .app-screen-header-badge {
  top: 5px !important;
  right: 4px !important;
  width: 8px !important;
  height: 8px !important;
  border: 0 !important;
  background: #b9f33d !important;
  box-shadow: 0 0 8px rgba(185,243,61,.18) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign {
  width: 100% !important;
  padding: 10px 14px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-section {
  width: 100% !important;
  margin: 0 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-card,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-logout-card {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.025), transparent 42%),
    linear-gradient(145deg, #1b1c1a 0%, #171816 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-section-header {
  width: 100% !important;
  min-height: 45px !important;
  height: 45px !important;
  padding: 0 17px !important;
  border: 0 !important;
  background: transparent !important;
  color: #aaa9a7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-section-header > span {
  color: #aaa9a7 !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  letter-spacing: .24em !important;
  line-height: 1 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-section-chevron {
  width: 18px !important;
  height: 18px !important;
  color: #a2a2a0 !important;
  transform: rotate(-90deg) !important;
  transition: transform .2s ease !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-section-header[aria-expanded="true"] .settings-section-chevron {
  transform: rotate(0deg) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-section-body {
  border-top: 1px solid rgba(255,255,255,.075) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-row {
  width: 100% !important;
  min-height: 73px !important;
  height: 73px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-columns: 35px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  background: transparent !important;
  color: #f2f2ef !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-row + .settings-detail-row {
  border-top: 1px solid rgba(255,255,255,.075) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-row-icon,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-section:nth-of-type(2) .settings-row-icon {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  border: 1px solid rgba(255,255,255,.095) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.008)) !important;
  color: #a7a8a6 !important;
  display: grid !important;
  place-items: center !important;
  filter: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-row-icon svg {
  width: 21px !important;
  height: 21px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-row-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-row-copy strong {
  overflow: hidden !important;
  color: #f2f2ef !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: -.012em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-row-copy small {
  overflow: hidden !important;
  color: #a2a19f !important;
  font-size: 11.5px !important;
  font-weight: 420 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-row-chevron {
  width: 18px !important;
  color: #aaa9a7 !important;
  font-size: 27px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-toggle {
  width: 37px !important;
  height: 21px !important;
  padding: 2px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  background: #262725 !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-toggle em {
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: #8d8e8a !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-toggle.on {
  border-color: rgba(255,255,255,.13) !important;
  background: #262725 !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-toggle.on em {
  transform: translateX(16px) !important;
  background: #1687ff !important;
  box-shadow: 0 0 10px rgba(22,135,255,.18) !important;
}

/* Keep every Settings item icon neutral, including expanded Device and System groups. */
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-section .settings-section-body .settings-row-icon,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-section .settings-section-body button .settings-row-icon,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-section:first-of-type button .settings-row-icon,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-detail-section:nth-of-type(3) button .settings-row-icon {
  color: #a7a8a6 !important;
  border-color: rgba(255,255,255,.095) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.008)) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-logout-card {
  min-height: 51px !important;
  height: 51px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  color: #f06c6c !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-logout-card > svg {
  display: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign .settings-logout-card strong {
  color: #f06c6c !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav {
  left: 14px !important;
  right: 14px !important;
  bottom: 10px !important;
  width: calc(100% - 28px) !important;
  min-height: 74px !important;
  height: 74px !important;
  padding: 7px 8px 6px !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.025), transparent 42%),
    linear-gradient(145deg, #1b1c1a 0%, #171816 100%) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.02) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav button {
  min-height: 59px !important;
  gap: 4px !important;
  color: #aaa9a7 !important;
  font-size: 12px !important;
  font-weight: 430 !important;
  background: transparent !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav .bottom-nav-icon {
  width: 27px !important;
  height: 27px !important;
  flex-basis: 27px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav button.active,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav button.active span,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav button.active .bottom-nav-icon {
  color: #b9f33d !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav button.active::after,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav button::before {
  display: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-scroll-region > .app-nav-spacer {
  flex-basis: 92px !important;
  min-height: 92px !important;
}

@media (max-width: 420px) {
  body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-screen-header {
    min-height: 96px !important;
    height: 96px !important;
    flex-basis: 96px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav {
    min-height: 74px !important;
    height: 74px !important;
    padding: 7px 8px 6px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav button {
    min-height: 59px !important;
    gap: 4px !important;
    font-size: 12px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-primary-bottom-nav .bottom-nav-icon {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }
}