/* Personal mobile Header and consolidated navigation.
   Loaded last so route-specific Personal layers share one mobile contract. */

.mobile-personal-drawer-identity,
.mobile-personal-account-nav {
  display: none !important;
}

@media (max-width: 1050px) {
  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar {
    display: grid !important;
    grid-template-areas: "brand notification menu" !important;
    grid-template-columns: minmax(0, 1fr) 44px 44px !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 12px 0 16px !important;
    box-sizing: border-box !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .brand {
    grid-area: brand !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
    overflow: hidden;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .brand .brand-mark {
    flex: 0 0 auto;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .brand > span:last-child {
    min-width: 0;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .brand strong {
    display: block;
    overflow: hidden;
    color: var(--pw-dark-ink, #fffdf8) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions {
    grid-area: notification !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > :not(#notificationButton) {
    display: none !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #personalAccountTrigger.personal-account-trigger,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #profileShortcut,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #loginShortcut,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #signupShortcut,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #logoutButton {
    display: none !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #notificationButton.notification-button {
    display: inline-grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
    box-shadow: none !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #notificationButton.notification-button:hover,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #notificationButton.notification-button:active {
    background: rgba(255, 253, 248, 0.1) !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mobileMenuButton {
    grid-area: menu !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: end !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mobileMenuButton:hover,
  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mobileMenuButton:active {
    background: rgba(255, 253, 248, 0.1) !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mobileMenuButton .mobile-menu-button-icon-guest-open {
    display: block !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mobileMenuButton .mobile-menu-button-icon-auth-open {
    display: none !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .personal-account-surface,
  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .personal-account-scrim {
    display: none !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"].mobile-menu-open > .topbar > .main-nav.open {
    inset: 60px 0 0 !important;
    height: calc(100dvh - 60px) !important;
    padding-top: 12px !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-personal-drawer-identity {
    order: -2 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 4px 4px 12px;
    border-bottom: 1px solid var(--w2g-line);
  }

  .mobile-personal-drawer-avatar {
    display: inline-grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--w2g-line-strong);
    border-radius: 50%;
    background: var(--w2g-orange-soft);
    color: var(--w2g-orange-ink);
    font-size: 12px;
    font-weight: 800;
  }

  .mobile-personal-drawer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-personal-drawer-identity-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .mobile-personal-drawer-identity-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--w2g-ink);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .mobile-personal-drawer-identity-copy small {
    margin-top: 2px;
    color: var(--w2g-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .shell-nav-scroll {
    order: -1 !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-personal-account-nav {
    order: 0 !important;
    display: flex !important;
    width: 100% !important;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--w2g-line);
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-drawer-feedback-btn {
    order: 1 !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-nav-extras {
    order: 2 !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-language-switch,
  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-theme-icon-btn {
    min-height: 44px !important;
    height: 44px !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-language-switch button {
    min-height: 44px !important;
    height: 44px !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-nav-auth {
    order: 3 !important;
  }
}

/* Approved Light Color System rollout: existing Personal mobile shell. */
@media (max-width: 1050px) {
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar {
    border-bottom-color: #E5E7EB !important;
    background: #FFFFFF !important;
    color: #18181B !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .brand strong {
    color: #EA580C !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mobileMenuButton,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #notificationButton.notification-button {
    background: transparent !important;
    color: #3F3F46 !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"].mobile-menu-open > .topbar > .main-nav.open {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #18181B !important;
    scrollbar-color: #D1D5DB transparent;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-personal-drawer-identity,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-personal-account-nav,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-nav-extras,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-nav-auth {
    border-color: #E5E7EB !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-personal-drawer-identity-copy strong {
    color: #18181B !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-personal-drawer-identity-copy small,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-group-label {
    color: #71717A !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-personal-drawer-avatar {
    border-color: #FED7AA !important;
    background: #FFF4ED !important;
    color: #C2410C !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-drawer-feedback-btn,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-language-switch,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-language-switch button,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-theme-icon-btn {
    border-color: #E5E7EB !important;
    background: #F7F7F7 !important;
    color: #3F3F46 !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item:hover,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item:active,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-drawer-feedback-btn:hover,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-drawer-feedback-btn:active {
    border-color: #D1D5DB !important;
    background: #F2F3F4 !important;
    color: #18181B !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item.active {
    border-color: #FED7AA !important;
    background: #FFF4ED !important;
    color: #C2410C !important;
    box-shadow: inset 3px 0 0 #EA580C !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item .shell-nav-icon,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item.active .shell-nav-icon {
    color: currentColor !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-badge {
    border-color: #E5E7EB !important;
    background: #F2F3F4 !important;
    color: #3F3F46 !important;
  }
}

@media (max-width: 389px) {
  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar {
    padding-inline: 10px 8px !important;
  }

  body.app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .brand strong {
    font-size: 14px !important;
  }
}

/* Route layers predate this consolidation and use ID-bearing :has() selectors.
   This final mobile-only seal intentionally matches that specificity. */
@media (max-width: 1050px) {
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar {
    grid-template-areas: "brand notification menu" !important;
    grid-template-columns: minmax(0, 1fr) 44px 44px !important;
    gap: 4px !important;
    height: 60px !important;
    min-height: 60px !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar > .brand {
    grid-area: brand !important;
    grid-column: 1 !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar > .auth-actions {
    grid-area: notification !important;
    grid-column: 2 !important;
    width: 44px !important;
    min-width: 44px !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar > .auth-actions > #personalAccountTrigger#personalAccountTrigger {
    display: none !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar > .auth-actions > #notificationButton#notificationButton.notification-button {
    display: inline-grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
    box-shadow: none !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar > #mobileMenuButton#mobileMenuButton {
    grid-area: menu !important;
    grid-column: 3 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar > #mobileMenuButton#mobileMenuButton[aria-expanded="true"] .mobile-menu-button-icon-open {
    display: none !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar > #mobileMenuButton#mobileMenuButton[aria-expanded="true"] .mobile-menu-button-icon-close {
    display: block !important;
  }
}

/* Personal drawer colour continuity.
   Reuse the authenticated Top Bar's canonical --pw-dark family so the open
   navigation reads as one continuous surface in both saved theme modes. */
@media (max-width: 1050px) {
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"].mobile-menu-open > .topbar > .main-nav.open,
  html[data-theme="dark"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"].mobile-menu-open > .topbar > .main-nav.open {
    background: var(--pw-dark, #241d14) !important;
    background-color: var(--pw-dark, #241d14) !important;
    background-image: none !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
    scrollbar-color: rgba(255, 253, 248, 0.28) transparent;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-personal-drawer-identity,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-personal-account-nav,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-nav-extras,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-nav-auth {
    border-color: rgba(255, 253, 248, 0.12) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-personal-drawer-identity-copy strong {
    color: var(--pw-dark-ink, #fffdf8) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-personal-drawer-identity-copy small {
    color: var(--pw-dark-muted, #d9cdb6) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-personal-drawer-avatar {
    border-color: rgba(255, 253, 248, 0.2) !important;
    background: #6b3d25 !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-group-label {
    color: var(--pw-dark-soft, #b7a98c) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-drawer-feedback-btn {
    border-color: rgba(255, 253, 248, 0.1) !important;
    background: rgba(255, 253, 248, 0.045) !important;
    background-color: rgba(255, 253, 248, 0.045) !important;
    background-image: none !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
    box-shadow: none !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item .shell-nav-icon {
    color: var(--pw-dark-muted, #d9cdb6) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item:hover,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item:active,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-drawer-feedback-btn:hover,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open > .mobile-drawer-feedback-btn:active {
    border-color: rgba(255, 253, 248, 0.17) !important;
    background: rgba(255, 253, 248, 0.085) !important;
    background-color: rgba(255, 253, 248, 0.085) !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item.active {
    border-color: rgba(234, 88, 12, 0.58) !important;
    background: rgba(234, 88, 12, 0.14) !important;
    background-color: rgba(234, 88, 12, 0.14) !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
    box-shadow: inset 3px 0 0 var(--pw-orange, #ea580c) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-item.active .shell-nav-icon {
    color: #f0a868 !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .shell-nav-badge {
    border-color: rgba(255, 253, 248, 0.14) !important;
    background: rgba(255, 253, 248, 0.1) !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-language-switch,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-language-switch button,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-theme-icon-btn {
    border-color: rgba(255, 253, 248, 0.12) !important;
    background: rgba(255, 253, 248, 0.045) !important;
    background-color: rgba(255, 253, 248, 0.045) !important;
    background-image: none !important;
    color: var(--pw-dark-muted, #d9cdb6) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-language-switch button.active {
    border-color: rgba(234, 88, 12, 0.52) !important;
    background: rgba(234, 88, 12, 0.16) !important;
    background-color: rgba(234, 88, 12, 0.16) !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
    box-shadow: inset 0 -2px 0 var(--pw-orange, #ea580c) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-language-switch button:not(.active):hover,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-theme-icon-btn:hover {
    background: rgba(255, 253, 248, 0.09) !important;
    background-color: rgba(255, 253, 248, 0.09) !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open button.mobile-drawer-auth-btn {
    border-color: rgba(240, 168, 104, 0.24) !important;
    background: rgba(194, 65, 12, 0.11) !important;
    background-color: rgba(194, 65, 12, 0.11) !important;
    background-image: none !important;
    color: var(--pw-dark-muted, #d9cdb6) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open button.mobile-drawer-auth-btn:hover,
  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open button.mobile-drawer-auth-btn:focus-visible {
    border-color: rgba(240, 168, 104, 0.38) !important;
    background: rgba(194, 65, 12, 0.18) !important;
    background-color: rgba(194, 65, 12, 0.18) !important;
    color: var(--pw-dark-ink, #fffdf8) !important;
  }

  html body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open :is(button, a):focus-visible {
    outline: 2px solid #f0a868 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(240, 168, 104, 0.2) !important;
  }
}

@media (max-width: 1050px) {
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-language-switch button.active,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open .mobile-theme-icon-btn.is-active {
    border-color: #FED7AA !important;
    background: #FFF4ED !important;
    color: #C2410C !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open button.mobile-drawer-auth-btn {
    border-color: #FECACA !important;
    background: #FEF2F2 !important;
    color: #B91C1C !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open button.mobile-drawer-auth-btn:hover,
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open button.mobile-drawer-auth-btn:focus-visible {
    border-color: #FCA5A5 !important;
    background: #FEE2E2 !important;
    color: #991B1B !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] .main-nav.open :is(button, a):focus-visible {
    outline-color: #EA580C !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18) !important;
  }
}

/* Light-only final cascade seal for the authenticated Personal header family.
   Earlier theme-agnostic rules intentionally retain the legacy dark palette. */
html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mainNav#mainNav .shell-nav-item:not(.active):not([aria-current="page"]) {
  color: #18181B !important;
}

html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mainNav#mainNav .shell-nav-item:not(.active):hover,
html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mainNav#mainNav .shell-nav-item:not(.active):focus-visible {
  color: #18181B !important;
}

html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mainNav#mainNav .shell-nav-item.active,
html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > #mainNav#mainNav .shell-nav-item[aria-current="page"] {
  border-color: #FED7AA !important;
  background: #FFF4ED !important;
  color: #C2410C !important;
}

/* Light-only authenticated notification bell contrast seal. */
html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar > .auth-actions > #notificationButton#notificationButton.notification-button {
  color: #3F3F46 !important;
}

html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #notificationButton#notificationButton.notification-button:focus-visible {
  outline-color: #EA580C !important;
}

html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"] > .topbar > .auth-actions > #notificationButton#notificationButton.notification-button:is(:hover, :focus-visible) .notification-bell-icon {
  color: #C2410C !important;
}

/* Light-only Team + Member discovery header seal.
   The legacy Guest discovery selector also matches the shared Personal shell. */
html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context.personal-discovery-context[data-shell-role="personal"]:has(:is(#teams, #members).active-view) > .topbar {
  border-bottom-color: #E5E7EB !important;
  background: #FFFFFF !important;
  color: #18181B !important;
}

html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context.personal-discovery-context[data-shell-role="personal"]:has(:is(#teams, #members).active-view) > .topbar > .brand {
  color: #3F3F46 !important;
}

html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context.personal-discovery-context[data-shell-role="personal"]:has(:is(#teams, #members).active-view) > .topbar > .brand > span:last-child {
  color: #3F3F46 !important;
}

html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context.personal-discovery-context[data-shell-role="personal"]:has(:is(#teams, #members).active-view) > .topbar > .brand strong {
  color: #EA580C !important;
}

html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context.personal-discovery-context[data-shell-role="personal"]:has(:is(#teams, #members).active-view) > .topbar > .brand .brand-mark {
  border-color: #EA580C !important;
  background: #EA580C !important;
  color: #18181B !important;
}

@media (max-width: 1050px) {
  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context.personal-discovery-context[data-shell-role="personal"]:has(:is(#teams, #members).active-view).mobile-menu-open > .topbar > #mainNav#mainNav.open {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #18181B !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar > #mobileMenuButton#mobileMenuButton {
    background: transparent !important;
    color: #3F3F46 !important;
  }

  html[data-theme="light"] body[data-page="app"].app-shell-v2.app-shell-guest.personal-account-context[data-shell-role="personal"]:has(#personalAccountTrigger) > .topbar > #mobileMenuButton#mobileMenuButton:is(:hover, :active) {
    background: #F2F3F4 !important;
    color: #18181B !important;
  }
}