/* Shared responsive contract, loaded after each page's component styles. */
.member-app-shell .profile-app-brand strong,
.member-app-shell .member-section-context { display: none !important; }
.room-mobile-controls { display: none; }
@media (max-width: 900px) {
  body[data-page="profile"] .church-profile-tabs-wrapper::before { left: 0; right: 0; }
  .custom-select-container:not(.open) .custom-options-panel { display: none; }
  .module-directory-toolbar .custom-options-panel { width: 100%; min-width: 0; max-width: 100%; }
  .member-hero-content { flex-direction: column; align-items: stretch; gap: 20px; }
  .member-hero-greeting, .member-verse-pill { width: 100%; min-width: 0; max-width: none; }
  .member-quick-launchpad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-quick-launchpad > *, .member-hero-content > * { min-width: 0; }
  .member-meditation-showcase { grid-template-columns: minmax(0, 1fr); }
  .master-giving-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-workspace .aw-sidebar { height: 100dvh; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .admin-workspace .aw-sidebar { width: min(86vw, 320px); transition: transform .24s ease; }
  .admin-workspace.aw-nav-open { overflow: hidden; }
  .aw-nav-backdrop { position: fixed; inset: 0; z-index: 29; border: 0; padding: 0; background: rgba(3, 7, 18, .58); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
  .admin-workspace.aw-nav-open .aw-nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  .member-app-shell .member-shell-rail { top: 0; bottom: 0; z-index: 1200; width: min(86vw, 320px); padding-top: max(78px, calc(env(safe-area-inset-top) + 64px)); padding-bottom: max(20px, env(safe-area-inset-bottom)); transition: transform .24s ease; }
  .member-app-shell.member-nav-open { overflow: hidden; }
  .member-nav-backdrop { position: fixed; inset: 0; z-index: 1190; border: 0; padding: 0; background: rgba(3, 7, 18, .58); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
  .member-app-shell.member-nav-open .member-nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  .member-app-shell.member-nav-open #member-mobile-menu { position: fixed; top: max(13px, env(safe-area-inset-top)); left: min(calc(86vw - 58px), 262px); z-index: 1210; color: var(--text-primary); background: var(--surface) !important; border: 1px solid var(--border) !important; }
  #member-mobile-menu.is-open svg { display: none; }
  #member-mobile-menu.is-open::before { content: "\00d7"; font-size: 28px; line-height: 1; font-weight: 400; }
  .admin-workspace .aw-topbar { gap: 8px; }
  .admin-workspace .aw-breadcrumb { min-width: 0; flex-wrap: wrap; }
}

/* Keep the hero controls compact on touch screens. The shared mobile rule
   gives every button a 44px minimum height, which unintentionally stretches
   the five-pixel carousel indicators into oversized pills. */
@media (max-width: 768px) {
  body.hero-only-page .hero-indicator-dot {
    min-height: 5px !important;
    height: 5px !important;
    width: 24px !important;
    padding: 0 !important;
  }

  body.hero-only-page .hero-indicator-dot.active {
    width: 44px !important;
  }

  /* The language control should read as a lightweight header action, not a
     floating card competing with the menu button. */
  body.hero-only-page .topbar-inner .lang-selector-btn,
  body.hero-only-page .topbar-inner .mobile-menu-toggle {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: hsl(var(--primary-h), 50%, 15%) !important;
  }

  html[data-theme="light"] body.hero-only-page .topbar-inner .lang-selector-btn,
  html:not([data-theme="dark"]) body.hero-only-page .topbar-inner .lang-selector-btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body.hero-only-page .topbar-inner .lang-selector-btn,
  html[data-theme="dark"] body.hero-only-page .topbar-inner .mobile-menu-toggle {
    color: #fff !important;
  }
}

@media (max-width: 700px) {
  .member-app-shell .member-shell-header { height: 64px !important; min-height: 64px !important; padding: 0 12px !important; gap: 8px !important; justify-content: flex-start !important; overflow: visible; }
  .member-app-shell .profile-app-brand { min-width: 0; gap: 8px !important; font-size: 1rem !important; }
  .member-app-shell .profile-app-brand-mark { width: 36px; height: 36px; flex: 0 0 36px; }
  .member-app-shell .member-section-context { min-width: 0; max-width: 112px; height: 40px !important; padding: 0 10px !important; gap: 6px !important; }
  .member-app-shell .member-section-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .member-app-shell #member-shell-search { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; min-height: 42px !important; padding: 0 !important; justify-content: center; }
  .member-app-shell #member-shell-search input { display: none; }
  .member-app-shell .member-shell-actions { display: none !important; }
  .member-app-shell #member-mobile-menu { flex: 0 0 42px; width: 42px !important; height: 42px !important; margin-left: auto; }
  .member-app-shell .member-shell-main { top: 64px; }
  .member-mobile-actions { display: grid; gap: 10px; margin-bottom: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); }
  .member-mobile-actions > *, .member-mobile-actions .theme-palette-btn, .member-mobile-actions .lang-selector-btn, .member-mobile-actions .member-header-giving { width: 100% !important; justify-content: center !important; }
  .member-mobile-actions .theme-palette-container, .member-mobile-actions .lang-selector-container, .member-mobile-actions .member-shell-account-wrap { display: flex; }
  .member-mobile-actions .theme-palette-popover { left: 12px; right: 12px; width: auto; }
  body.mobile-menu-active { position: static !important; width: auto !important; overflow: hidden !important; }
  .topbar-menu-group { right: 0 !important; width: min(86vw, 320px) !important; height: 100dvh !important; padding: max(76px, calc(env(safe-area-inset-top) + 64px)) 20px max(24px, env(safe-area-inset-bottom)) !important; transform: translateX(105%) !important; background: var(--surface) !important; color: var(--text-primary) !important; opacity: 1 !important; }
  body.mobile-menu-active .topbar-menu-group { transform: translateX(0) !important; }
  body.mobile-menu-active .brand, body.mobile-menu-active main,
  body.mobile-menu-active .topbar-inner .lang-selector-container { transform: none !important; }
  body.mobile-menu-active .mobile-menu-toggle { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 1001; transform: none !important; color: var(--text-primary) !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px; }
  .mobile-menu-backdrop { z-index: 29; background: rgba(3, 7, 18, .58); }
  body.mobile-menu-active .topbar-menu-group .nav-links a { color: var(--text-primary) !important; background: var(--surface-soft) !important; text-shadow: none !important; }
  body.mobile-menu-active .topbar-menu-group .nav-links a:hover,
  body.mobile-menu-active .topbar-menu-group .nav-links a:focus-visible { color: var(--primary) !important; background: var(--primary-surface) !important; }
  body.in-meditation-room .meditation-room-view:not([hidden]) { flex-direction: column !important; height: 100dvh !important; max-height: 100dvh !important; }
  .sanctuary-top-bar { padding: 6px 12px !important; height: auto !important; min-height: 52px !important; gap: 6px !important; }
  .sanctuary-room-meta strong { font-size: 0.9rem !important; }
  .session-presence-badge { padding: 3px 10px !important; font-size: 0.75rem !important; }
  .sanctuary-action-btn { padding: 5px 10px !important; font-size: 0.78rem !important; }
  .meditation-chat-drawer { bottom: 74px !important; right: 12px !important; left: 12px !important; width: auto !important; max-width: none !important; height: 50dvh !important; }
  .meditation-room-view .meditation-room-sidebar { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; max-height: 45dvh !important; flex: 0 0 auto; padding: 10px 14px !important; }
  .meditation-room-sidebar .sidebar-top-section { flex-direction: row !important; align-items: center; gap: 10px !important; padding-bottom: 8px !important; }
  .meditation-room-sidebar .sidebar-exit-btn { width: auto !important; flex-shrink: 0; }
  .meditation-room-sidebar .sidebar-room-badge { flex: 1; min-width: 0; padding: 8px !important; }
  .room-mobile-controls { display: block; width: 100%; padding: 10px; margin-top: 8px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text-primary); font: inherit; }
  .meditation-room-sidebar:not(.mobile-controls-open) .sidebar-accordion-nav,
  .meditation-room-sidebar:not(.mobile-controls-open) .sidebar-footer-section { display: none !important; }
  .meditation-room-view .meditation-room-main { min-height: 0 !important; width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; overflow-y: hidden !important; padding: clamp(50px, 7vh, 62px) 12px max(10px, env(safe-area-inset-bottom)) !important; gap: clamp(4px, 1vh, 10px); }
  body.is-fullscreen-sanctuary .meditation-room-view,
  body.is-fullscreen-sanctuary .meditation-room-main { overflow: hidden !important; overflow-y: hidden !important; height: 100dvh !important; max-height: 100dvh !important; }
  .meditation-room-main .room-scripture-display { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; padding: 10px 12px !important; }
  .meditation-room-main .room-scripture-display blockquote { font-size: clamp(0.9rem, 3.8vw, 1.15rem) !important; line-height: 1.45 !important; margin: 4px 0 !important; }
  .meditation-room-view .room-bottom-player { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 52px; border-radius: 99px !important; padding: 6px 14px !important; flex-wrap: nowrap; justify-content: space-between !important; gap: 8px; }
  .room-bottom-player .bottom-player-info { min-width: 0; }
  .room-bottom-player .bottom-player-volume { display: none !important; }
  html, body { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; overflow-x: hidden; max-width: 100%; }
  *, *::before, *::after { box-sizing: border-box; }
  main, section, article, aside, form, fieldset { min-width: 0; }
  fieldset { max-width: 100%; }
  p, h1, h2, h3, h4, label, a, button { overflow-wrap: anywhere; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-width: 0; max-width: 100%; font-size: 16px !important; }
  textarea { resize: vertical; }
  button, .button, [role="button"], .aw-button, .aw-icon-button { min-height: 44px; }
  .button, .aw-button { white-space: normal; text-align: center; }
  video, audio { max-width: 100%; }
  iframe:not(#hero-video-iframe):not(#member-shell-frame) { max-width: 100%; }
  .container, .module-shell, .creator-public { max-width: 100%; }
  body[data-page="profile"] .church-profile-tabs-wrapper::before { left: 0; right: 0; }
  .hero-fullscreen { flex-basis: auto; min-width: 0; }
  body.hero-only-page main > section { width: 100%; min-width: 0; flex-shrink: 0; }
  .hero-container { min-width: 0; }
  .hero-left, .hero-right, .hero-search-card { min-width: 0; max-width: 100%; }
  .readable-grid.three, .dashboard-grid, .form-group-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .section-head, .member-section-head, .module-section-heading { gap: 16px; flex-wrap: wrap; }
  .section-head h2, .member-section-head h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
  .member-hero-banner { padding: 24px 18px; }
  .member-hero-content { display: flex; }
  .member-verse-pill { padding: 16px; }
  .member-hero-greeting h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .member-quick-launchpad { gap: 12px; }
  .launch-card { padding: 16px; }
  .member-streams-grid, .member-channels-grid, .member-resources-grid, .member-store-grid { grid-template-columns: minmax(0, 1fr); }
  .med-showcase-copy { padding: 24px 18px; }
  .med-showcase-features { flex-wrap: wrap; }
  .master-giving-card, .master-impact-card { padding: 24px 18px; min-width: 0; }
  .master-amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-freq-switcher, .master-payment-methods { flex-wrap: wrap; }
  .master-giving-card .button { height: auto !important; padding: 14px; }
  .donate-slide-content { padding: 24px 20px; max-width: 100%; }
  .donate-slide-title { font-size: clamp(1.7rem, 7vw, 2.5rem); }
  .creator-store-cards { grid-template-columns: minmax(0, 1fr); }
  #active-streams-list { grid-template-columns: minmax(0, 1fr) !important; }
  .creator-store-actions { flex-wrap: wrap; }
  .checkout-layout, .cart-page-layout, .product-detail-shell { grid-template-columns: minmax(0, 1fr); }
  .checkout-fields { grid-template-columns: minmax(0, 1fr); }
  .checkout-order-item { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
  .checkout-order-item img { width: 52px; height: 52px; }
  .dedicated-reader-toolbar { flex-wrap: wrap; padding: 16px; }
  .dedicated-reader-toolbar > div { min-width: 0; }
  .dedicated-reader-book { grid-template-columns: minmax(0, 1fr); }
  .dedicated-reader-book aside, .dedicated-reader-book article { padding: 20px 16px; }
  .dedicated-reader-book article footer { flex-wrap: wrap; gap: 12px; }
  .admin-workspace .aw-topbar { padding-inline: 12px; height: auto; min-height: 65px; }
  .admin-workspace .aw-top-actions { flex-shrink: 0; gap: 6px; }
  .admin-workspace .aw-avatar { display: none; }
  .admin-workspace .aw-heading-actions, #aw-heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .admin-workspace .aw-panel-heading, .admin-workspace .aw-pagination { flex-wrap: wrap; gap: 12px; }
  .aw-table-scroll, .table-wrap, .table-responsive { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .admin-workspace .aw-table-scroll { -webkit-overflow-scrolling: touch; }

  /* Constrain overlay content rather than hiding overflowing controls. */
  .modal-overlay, .module-modal, .member-auth-modal, .alert-modal-backdrop,
  .global-video-modal, .global-audio-modal, .church-video-modal-backdrop,
  .checkout-success { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important; overflow-y: auto; overscroll-behavior: contain; }
  .modal-card, .module-modal-card, .member-auth-card, .alert-modal, .modal-dialog,
  .modal-content, .alert-modal-backdrop > .dash-panel, .global-audio-modal-content, .church-video-modal-card,
  .checkout-success > div, .admin-workspace #aw-editor {
    width: min(100%, 560px) !important; min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto; overscroll-behavior: contain; border-radius: 16px;
  }
  .modal-card, .module-modal-card, .member-auth-card, .alert-modal, .checkout-success > div { padding: 24px 18px !important; }
  .alert-modal-backdrop > .dash-panel { margin: 0 auto !important; padding: 20px 16px; }
  .alert-modal-backdrop .compact-grid, .module-modal-card .module-form { grid-template-columns: minmax(0, 1fr); }
  .alert-modal-backdrop .category-head { align-items: start; gap: 8px; }
  .alert-modal-backdrop .category-head > button { flex-shrink: 0; }
  .modal-card form, .module-modal-card form, .member-auth-card form { min-width: 0; }
  .modal-card .form-grid, .module-modal-card .form-grid, .member-auth-card .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .admin-workspace #aw-editor-form { max-height: calc(100dvh - 26px); }
  .admin-workspace .aw-editor-header, .admin-workspace .aw-editor-footer { padding: 16px; gap: 10px; }
  .admin-workspace .aw-editor-body { padding: 16px; min-height: 0; }
  .admin-workspace .aw-editor-footer { flex-wrap: wrap; }
  .modal-close, .module-modal-close, .member-auth-close, .global-video-modal-close, .global-audio-modal-close { min-width: 44px; min-height: 44px; }
  .global-video-modal-content { width: 100%; max-width: 100%; }
  .theme-palette-popover { position: fixed; top: 74px; right: 12px; left: auto; width: min(320px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 90px); overflow-y: auto; z-index: 100000 !important; }
  .toast { max-width: calc(100vw - 24px); white-space: normal; bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .member-app-shell .member-section-context { flex: 0 0 42px; width: 42px; padding: 0 !important; justify-content: center; }
  .member-app-shell .member-section-context strong { display: none; }
  .member-quick-launchpad { grid-template-columns: minmax(0, 1fr); }
  .admin-workspace .aw-module-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-workspace .aw-module-card { border-right: 0 !important; border-bottom: 1px solid var(--border) !important; }
  .member-shell-search { display: none; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .modal-overlay, .module-modal, .member-auth-modal { align-items: start; }
  .modal-card, .module-modal-card, .member-auth-card { margin-block: 12px; max-height: calc(100dvh - 24px); overflow-y: auto; }
}

/* Unified mobile navigation drawers: every drawer enters from the left and
   uses the same account/control/navigation hierarchy in either color mode. */
@media (max-width: 700px) {
  .member-app-shell .member-shell-rail {
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 320px) !important;
    padding: max(72px, calc(env(safe-area-inset-top) + 62px)) 16px max(22px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    transform: translateX(-105%) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: 24px 0 52px rgba(15, 23, 42, 0.22) !important;
  }

  .member-app-shell.member-nav-open .member-shell-rail {
    transform: translateX(0) !important;
  }

  .member-app-shell .member-shell-rail .profile-rail-bottom {
    margin-top: auto;
  }

  .member-mobile-actions {
    order: -1;
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px !important;
    width: 100%;
    margin: 0 0 2px !important;
    padding: 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    background: var(--surface-soft) !important;
    box-shadow: var(--shadow-card) !important;
  }

  .member-mobile-actions .member-shell-account-wrap {
    order: 1;
    grid-column: 1 / -1;
    width: 100% !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
  }

  .member-mobile-actions .profile-app-account {
    width: 100% !important;
    height: auto !important;
    min-height: 62px !important;
    padding: 8px !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
  }

  .member-mobile-actions .member-account-avatar {
    order: 0;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    font-size: .9rem !important;
  }

  .member-mobile-actions .profile-app-account img {
    width: 44px !important;
    height: 44px !important;
  }

  .member-mobile-actions .member-account-identity {
    order: 1;
    display: block !important;
    flex: 1 1 auto;
  }

  .member-mobile-actions .member-notification-icon {
    display: none !important;
  }

  .member-mobile-actions .member-account-chevron {
    order: 2;
    display: block !important;
    flex: 0 0 16px;
  }

  .member-mobile-actions .lang-selector-container {
    order: 2;
    grid-column: 1;
    width: max-content !important;
    margin: 0 !important;
    display: flex !important;
  }

  .member-mobile-actions .lang-selector-btn {
    width: auto !important;
    min-width: 86px;
    padding: 0 10px !important;
    justify-content: flex-start !important;
    gap: 7px !important;
  }

  .member-mobile-actions .member-header-giving {
    order: 3;
    grid-column: 2;
    width: 100% !important;
    min-width: 0;
    justify-content: center !important;
  }

  .member-mobile-actions .theme-palette-container {
    order: 4;
    grid-column: 1 / -1;
    width: 100% !important;
    display: flex !important;
  }

  .member-mobile-actions .theme-palette-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .member-mobile-actions .theme-palette-popover {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: auto !important;
    left: 0 !important;
    width: min(276px, calc(86vw - 44px)) !important;
    max-width: none !important;
    max-height: min(520px, calc(100dvh - 96px)) !important;
  }

  .member-mobile-actions .member-account-menu {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 8px;
  }

  body.mobile-menu-active {
    position: static !important;
    width: auto !important;
    overflow: hidden !important;
  }

  .topbar-menu-group {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 320px) !important;
    height: 100dvh !important;
    padding: max(72px, calc(env(safe-area-inset-top) + 62px)) 16px max(22px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    transform: translateX(-105%) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    z-index: 1200 !important;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: 24px 0 52px rgba(15, 23, 42, 0.22) !important;
    transition: transform .24s cubic-bezier(.16, 1, .3, 1) !important;
  }

  body.mobile-menu-active .topbar-menu-group {
    transform: translateX(0) !important;
  }

  body.mobile-menu-active .brand,
  body.mobile-menu-active main,
  body.mobile-menu-active .topbar-inner .lang-selector-container {
    transform: none !important;
  }

  body.mobile-menu-active .mobile-menu-toggle {
    position: fixed !important;
    top: max(13px, env(safe-area-inset-top)) !important;
    right: auto !important;
    left: min(calc(86vw - 58px), 262px) !important;
    z-index: 1210 !important;
    transform: none !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
  }

  .mobile-menu-backdrop {
    z-index: 999 !important;
    background: rgba(3, 7, 18, .58) !important;
  }

  .topbar-menu-group .nav-actions {
    order: 1;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center !important;
    gap: 10px !important;
    width: 100%;
    padding: 14px;
    margin: 0 !important;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-soft);
    box-shadow: var(--shadow-card);
  }

  .topbar-menu-group .nav-actions .theme-palette-container {
    order: 1;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
  }

  .topbar-menu-group .nav-actions .theme-palette-btn {
    width: 100%;
    justify-content: center;
  }

  .topbar-menu-group .nav-actions .lang-selector-container {
    order: 2;
    grid-column: 2;
    width: max-content !important;
    margin: 0 !important;
  }

  .topbar-menu-group .nav-actions .lang-selector-btn {
    width: auto !important;
    min-width: 82px;
    padding: 0 10px !important;
    justify-content: flex-start !important;
    gap: 7px !important;
  }

  .topbar-menu-group .nav-actions #nav-auth-slot,
  .topbar-menu-group .nav-actions [id$="nav-auth-slot"] {
    order: 3;
    grid-column: 1 / -1;
    width: 100%;
  }

  .topbar-menu-group .nav-actions #nav-auth-slot > *,
  .topbar-menu-group .nav-actions [id$="nav-auth-slot"] > * {
    width: 100%;
    justify-content: center;
  }

  .topbar-menu-group .nav-actions #nav-auth-slot .button,
  .topbar-menu-group .nav-actions [id$="nav-auth-slot"] .button {
    min-height: 44px;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  .topbar-menu-group .nav-actions .theme-palette-popover {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: auto !important;
    left: 0 !important;
    width: min(276px, calc(86vw - 44px)) !important;
    max-width: none !important;
    max-height: min(520px, calc(100dvh - 96px)) !important;
  }

  .topbar-menu-group .nav-links {
    order: 2;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100%;
    margin: 0 !important;
  }

  .topbar-menu-group .nav-links a,
  body.mobile-menu-active .topbar-menu-group .nav-links a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 48px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-size: 0.92rem !important;
    font-weight: 760 !important;
    text-decoration: none;
    text-shadow: none !important;
  }

  .topbar-menu-group .nav-links a svg,
  .topbar-menu-group .nav-links a i {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: var(--text-secondary);
  }

  .topbar-menu-group .nav-links .drawer-nav-icon {
    display: block !important;
  }

  .topbar-menu-group .nav-links a:hover,
  .topbar-menu-group .nav-links a:focus-visible,
  .topbar-menu-group .nav-links a[aria-current="page"] {
    color: var(--primary) !important;
    background: var(--primary-surface) !important;
  }

  .topbar-menu-group .nav-links .mobile-only-link {
    display: flex !important;
  }
}