/*
 * Green X Arena mobile layout contract.
 *
 * Loaded after every historic frontend stylesheet. It deliberately owns
 * viewport sizing, scrolling, navigation placement and compact app screens.
 */

@media (max-width: 900px) {
  :root {
    --gxa-mobile-bg: #0e0e0e;
    --gxa-mobile-surface: #131313;
    --gxa-mobile-surface-low: #1c1b1b;
    --gxa-mobile-primary: #39ff14;
    --gxa-mobile-text: #f1f4ee;
    --gxa-mobile-muted: #aebba9;
    --gxa-mobile-line: rgba(174, 187, 169, .24);
    --gxa-mobile-danger: #e9587d;
    --gxa-mobile-gutter: 10px;
    --gxa-mobile-radius: 14px;
    --gxa-mobile-nav: 68px;
    --gxa-mobile-header: 64px;
    --gxa-header-height: var(--gxa-mobile-header);
    --gxa-visual-viewport-height: 100dvh;
    --gxa-app-available-height: calc(
      var(--gxa-visual-viewport-height, 100dvh) -
      var(--gxa-measured-header-height, var(--gxa-header-height))
    );
  }

  html.gxa-mobile-app-mode {
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--gxa-mobile-bg);
  }

  html.gxa-mobile-app-mode body.gxa-plugin-page {
    position: static !important;
    inset: auto !important;
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: var(--gxa-visual-viewport-height, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: var(--gxa-mobile-bg) !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page {
    height: var(--gxa-visual-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.gxa-plugin-page *,
  body.gxa-plugin-page *::before,
  body.gxa-plugin-page *::after {
    box-sizing: border-box;
  }

  body.gxa-plugin-page :where(h1, h2, h3, h4, strong, label, button),
  body.gxa-plugin-page :where(h1, h2, h3, h4, strong, label, button) * {
    max-width: 100%;
    min-width: 0;
    letter-spacing: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  body.gxa-plugin-page :where(p, small, a, span) {
    max-width: 100%;
    min-width: 0;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body.gxa-plugin-page :where(input, select, textarea, button) {
    max-width: 100%;
    font: inherit;
  }

  /* The website header remains one compact, measurable app row. */
  header[data-gxa-plugin-header].gxa-sitebar {
    position: relative !important;
    inset: auto !important;
    z-index: 1000;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--gxa-mobile-header) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__inner {
    display: grid !important;
    grid-template-columns: minmax(52px, 1fr) auto auto 42px !important;
    grid-template-areas: "logo language account toggle" !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--gxa-mobile-header) !important;
    height: auto !important;
    padding: 7px 8px !important;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__logo {
    grid-area: logo !important;
    min-width: 0 !important;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__tools {
    display: contents !important;
  }

  html.gxa-mobile-app-mode body.gxa-plugin-page header[data-gxa-plugin-header] .gxa-sitebar__tools {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__language {
    grid-area: language !important;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__account {
    grid-area: account !important;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__toggle {
    grid-area: toggle !important;
    position: static !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__logo-custom img,
  header[data-gxa-plugin-header] .gxa-sitebar__brand {
    width: auto !important;
    max-width: 60px !important;
    height: 40px !important;
    object-fit: contain !important;
  }

  header[data-gxa-plugin-header] .gxa-language-switcher {
    grid-template-columns: repeat(3, 30px) !important;
    width: auto !important;
    height: 38px !important;
    padding: 3px !important;
  }

  header[data-gxa-plugin-header] .gxa-language-switcher a,
  header[data-gxa-plugin-header] .gxa-language-switcher a:not(.is-active):not([aria-current]) {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 9px !important;
  }

  header[data-gxa-plugin-header] .gxa-account__trigger {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }

  header[data-gxa-plugin-header] .gxa-account__name {
    display: none !important;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__nav {
    inset-block-start: var(--gxa-header-height) !important;
    max-height: calc(var(--gxa-visual-viewport-height, 100dvh) - var(--gxa-header-height)) !important;
  }

  /* Dashboard owns the remaining visual viewport, not the document. */
  body.gxa-dashboard-page > :where(.gxa-site-footer, footer:not(.gxa-mobile-portal-bar), .gxa-mobile-public-nav) {
    display: none !important;
  }

  body.gxa-dashboard-page .gxa-app.gxa-dashboard {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--gxa-app-available-height) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(14, 14, 14, .76), rgba(14, 14, 14, .9)),
      var(--gxa-mobile-bg) !important;
  }

  .gxa-dashboard .gxa-portal-shell {
    display: grid !important;
    grid-template-areas:
      "main"
      "nav" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) var(--gxa-mobile-nav) !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .gxa-dashboard .gxa-portal-shell > .gxa-portal-nav {
    display: none !important;
  }

  .gxa-dashboard .gxa-portal-main {
    grid-area: main !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
  }

  .gxa-dashboard .gxa-dashboard-panel {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: var(--gxa-mobile-gutter) var(--gxa-mobile-gutter) calc(var(--gxa-mobile-gutter) + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scroll-behavior: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(57, 255, 20, .35) transparent;
    -webkit-overflow-scrolling: touch;
  }

  .gxa-dashboard .gxa-dashboard-panel.is-active:not([hidden]) {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /*
   * Historic reveal rules briefly hid complete screens on first paint. Mobile
   * keeps motion on controls, but structural content must be ready instantly.
   */
  .gxa-dashboard :where(
    .gxa-dashboard-panel,
    .gxa-admin-screen,
    .gxa-profile-section,
    .gxa-profile-welcome,
    .gxa-profile-hero,
    .gxa-profile-avatar-strip,
    .gxa-card,
    .gxa-panel,
    .gxa-next-step,
    .gxa-module-card,
    .gxa-motion
  ) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .gxa-dashboard .gxa-dashboard-panel[hidden],
  .gxa-dashboard .gxa-admin-screen[hidden],
  .gxa-dashboard .gxa-profile-section[hidden],
  .gxa-dashboard .gxa-mobile-profile-menu[hidden] {
    display: none !important;
  }

  /* Exactly one dashboard bottom navigation, in normal grid flow. */
  .gxa-dashboard .gxa-mobile-portal-bar {
    grid-area: nav !important;
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--gxa-mobile-nav) !important;
    height: var(--gxa-mobile-nav) !important;
    max-height: var(--gxa-mobile-nav) !important;
    margin: 0 !important;
    padding: 5px 6px max(5px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid var(--gxa-mobile-line) !important;
    border-radius: 0 !important;
    background: rgba(7, 12, 9, .99) !important;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, .38) !important;
    backdrop-filter: none !important;
  }

  .gxa-dashboard .gxa-mobile-portal-bar__item {
    display: grid !important;
    grid-template-rows: 25px 16px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #8e9b8a !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  .gxa-dashboard .gxa-mobile-portal-bar__item.is-active {
    background: rgba(57, 255, 20, .1) !important;
    color: var(--gxa-mobile-text) !important;
  }

  .gxa-dashboard .gxa-mobile-portal-bar__item :where(.gxa-nav-icon, .gxa-mobile-icon, .gxa-mobile-portal-bar__more) {
    width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
  }

  /*
   * Hard app-shell boundary. Historic mobile rules use body-qualified
   * selectors, so this contract intentionally outranks them.
   */
  html.gxa-mobile-app-mode body.gxa-dashboard-page .gxa-app.gxa-dashboard .gxa-portal-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) var(--gxa-mobile-nav) !important;
    grid-template-areas:
      "main"
      "nav" !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page .gxa-app.gxa-dashboard .gxa-portal-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page .gxa-app.gxa-dashboard .gxa-dashboard-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: var(--gxa-mobile-gutter) var(--gxa-mobile-gutter) calc(var(--gxa-mobile-gutter) + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page .gxa-app.gxa-dashboard .gxa-mobile-portal-bar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: var(--gxa-mobile-nav) !important;
    min-height: var(--gxa-mobile-nav) !important;
    max-height: var(--gxa-mobile-nav) !important;
  }

  /* Home: concise status, reachable actions, no fixed-height cards. */
  .gxa-dashboard [data-gxa-panel="dashboard"] > * {
    margin-block: 0 10px !important;
  }

  .gxa-dashboard [data-gxa-panel="dashboard"] .gxa-profile-welcome {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 13px !important;
  }

  .gxa-dashboard .gxa-profile-welcome__identity {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .gxa-dashboard .gxa-profile-avatar--dashboard {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    border-radius: 14px !important;
  }

  .gxa-dashboard .gxa-profile-welcome h2 {
    margin: 2px 0 4px !important;
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.08 !important;
  }

  .gxa-dashboard .gxa-profile-welcome__identity p:not(.gxa-eyebrow) {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .gxa-dashboard .gxa-completion-meter {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 5px !important;
    border-radius: 50% !important;
  }

  .gxa-dashboard .gxa-completion-meter span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .gxa-dashboard .gxa-completion-meter strong {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  .gxa-dashboard .gxa-completion-meter i {
    display: block !important;
    width: 36px !important;
    margin: 1px auto 0 !important;
  }

  .gxa-dashboard .gxa-profile-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .gxa-dashboard .gxa-profile-summary > * {
    min-height: 76px !important;
    padding: 10px !important;
  }

  .gxa-dashboard .gxa-profile-summary > :last-child {
    grid-column: 1 / -1 !important;
    min-height: 58px !important;
  }

  .gxa-dashboard .gxa-profile-summary span {
    font-size: 8px !important;
  }

  .gxa-dashboard .gxa-profile-summary strong {
    display: -webkit-box !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .gxa-dashboard .gxa-profile-summary p {
    display: none !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page .gxa-app.gxa-dashboard .gxa-profile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page .gxa-app.gxa-dashboard .gxa-profile-summary > * {
    min-height: 84px !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page .gxa-app.gxa-dashboard .gxa-profile-summary > :last-child {
    grid-column: 1 / -1 !important;
    min-height: 62px !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page .gxa-app.gxa-dashboard .gxa-profile-summary strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .gxa-dashboard .gxa-next-steps {
    min-height: 0 !important;
    padding: 12px !important;
  }

  .gxa-dashboard .gxa-next-steps__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .gxa-dashboard .gxa-next-step {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 1px 9px !important;
    min-height: 72px !important;
    padding: 11px !important;
  }

  .gxa-dashboard .gxa-next-step__status {
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 3px;
  }

  .gxa-dashboard .gxa-next-step strong {
    grid-column: 2 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .gxa-dashboard .gxa-next-step p {
    grid-column: 2 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .gxa-dashboard .gxa-active-modules__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Profile overview and detail screens. */
  .gxa-dashboard [data-gxa-profile-app]:not(.is-mobile-editing) > :not(.gxa-mobile-profile-overview) {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app].is-mobile-editing > .gxa-mobile-profile-overview {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app].is-mobile-editing .gxa-mobile-profile-editor-head {
    display: grid !important;
  }

  .gxa-dashboard [data-gxa-profile-app].is-mobile-editing > :where(.gxa-profile-hero, .gxa-profile-toc) {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app].is-mobile-editing [data-gxa-profile-section-key] {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app].is-mobile-editing [data-gxa-profile-section-key].is-mobile-active {
    display: grid !important;
  }

  .gxa-dashboard [data-gxa-profile-app].is-mobile-editing .gxa-profile-form {
    display: block !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-mobile-profile-editor-head {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 0 9px !important;
    padding: 11px !important;
    border: 1px solid var(--gxa-mobile-line) !important;
    border-radius: var(--gxa-mobile-radius) !important;
    background: rgba(19, 19, 19, .96) !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-mobile-profile-editor-head h2 {
    margin: 2px 0 0 !important;
    font-size: 23px !important;
    line-height: 1.08 !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-mobile-profile-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-mobile-profile-tabs button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 5px 3px !important;
    white-space: normal !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 0 0 9px !important;
    padding: 12px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-hero h2 {
    margin: 2px 0 0 !important;
    font-size: 23px !important;
    line-height: 1.08 !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-hero p:not(.gxa-eyebrow),
  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-toc {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-hero__status {
    width: 76px !important;
    min-width: 76px !important;
    min-height: 58px !important;
    padding: 6px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-hero__status span {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-hero__status strong {
    font-size: 20px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-form {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-avatar-strip {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 11px !important;
    min-height: 0 !important;
    margin: 0 0 9px !important;
    padding: 11px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-avatar-strip__media,
  .gxa-dashboard [data-gxa-profile-app] .gxa-avatar-dropzone {
    width: 76px !important;
    min-width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-avatar-strip__media,
  .gxa-dashboard [data-gxa-profile-app] .gxa-avatar-dropzone {
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-avatar-dropzone {
    gap: 0 !important;
    padding: 3px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-avatar--edit {
    width: 68px !important;
    min-width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-avatar-dropzone__hint,
  .gxa-dashboard [data-gxa-profile-app] .gxa-avatar-dropzone__file,
  .gxa-dashboard [data-gxa-profile-app] .gxa-avatar-note {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-avatar-upload {
    min-height: 36px !important;
    padding: 8px !important;
    font-size: 10px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-avatar-strip h3 {
    margin: 2px 0 3px !important;
    font-size: 17px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-avatar-strip p:not(.gxa-eyebrow) {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11px !important;
  }

  .gxa-mobile-profile-menu {
    width: 100% !important;
    min-width: 0 !important;
    padding: 11px !important;
  }

  .gxa-mobile-profile-menu__items {
    gap: 5px !important;
  }

  .gxa-mobile-profile-menu__item {
    min-height: 54px !important;
    padding: 6px 9px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-section {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 11px 13px !important;
    overflow: visible !important;
    border-radius: var(--gxa-mobile-radius) !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-section__meta {
    position: relative !important;
    inset: auto !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 68px !important;
    margin: 0 -11px 12px !important;
    padding: 8px 11px !important;
    backdrop-filter: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-section__meta h3 {
    font-size: 18px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-control-grid,
  .gxa-dashboard [data-gxa-profile-app] .gxa-address-fields,
  .gxa-dashboard [data-gxa-profile-app] .gxa-address-grid,
  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-security-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .gxa-dashboard [data-gxa-profile-app] :where(.gxa-control-grid, .gxa-address-fields, .gxa-address-grid) > *,
  .gxa-dashboard [data-gxa-profile-app] .gxa-phone-control {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-phone-control {
    display: grid !important;
    grid-template-columns: minmax(105px, .42fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    font-size: 16px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] textarea {
    height: auto !important;
    min-height: 96px !important;
    padding-block: 12px !important;
  }

  .gxa-dashboard [data-gxa-profile-app] input[type="date"] {
    line-height: 52px !important;
  }

  .gxa-dashboard [data-gxa-profile-app]:not(.is-mobile-editing) .gxa-profile-savebar {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app].is-mobile-editing .gxa-profile-savebar {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 10px 0 0 !important;
    padding: 7px !important;
    border-radius: 13px !important;
    background: var(--gxa-mobile-surface) !important;
    backdrop-filter: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-profile-savebar .gxa-button {
    width: 100% !important;
    min-height: 50px !important;
  }

  /* Admin: the panel is the scroller; tool screens are normal content. */
  .gxa-dashboard [data-gxa-admin-app] {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .gxa-dashboard [data-gxa-admin-app] > .gxa-admin-hero {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-screen {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    overflow: visible !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-screen.is-active:not([hidden]) {
    display: block !important;
  }

  .gxa-dashboard [data-gxa-admin-app] :where(.gxa-admin-kpi-grid, .gxa-admin-metrics) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 9px !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-kpi {
    min-height: 82px !important;
    padding: 10px !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-kpi strong {
    font-size: 25px !important;
    line-height: 1 !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-kpi p {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-admin-app] :where(
    .gxa-admin-layout,
    .gxa-admin-grid,
    .gxa-admin-form-grid,
    .gxa-admin-users-layout,
    .gxa-admin-settings-layout,
    .gxa-admin-settings-grid,
    .gxa-admin-workbench-grid,
    .gxa-admin-records,
    .gxa-admin-module-control-grid
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .gxa-dashboard [data-gxa-admin-app] :where(
    .gxa-admin-workbench,
    .gxa-admin-card,
    .gxa-admin-export-card,
    .gxa-admin-settings-form,
    .gxa-admin-users-list,
    .gxa-admin-user-editor,
    .gxa-admin-settings-section
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 9px !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-section-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 10px !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-section-title > * {
    max-width: 100% !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-filterbar {
    display: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-filterbar.is-mobile-open {
    display: grid !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-mobile-filter-toggle {
    display: block !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 0 0 8px !important;
  }

  .gxa-dashboard [data-gxa-admin-app] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    font-size: 16px !important;
  }

  .gxa-dashboard [data-gxa-admin-app] textarea {
    height: auto !important;
    min-height: 96px !important;
    padding-block: 12px !important;
  }

  .gxa-dashboard [data-gxa-admin-app] :where(.gxa-admin-form-actions, .gxa-admin-settings-actions, .gxa-admin-export-actions) {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  .gxa-dashboard [data-gxa-admin-app] :where(.gxa-admin-form-actions, .gxa-admin-settings-actions, .gxa-admin-export-actions) .gxa-button {
    width: 100% !important;
    min-height: 50px !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-settings-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-settings-nav :where(a, button) {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    white-space: normal !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-settings-nav :where(a, button).is-active {
    border-color: var(--gxa-mobile-primary) !important;
    background: rgba(57, 255, 20, .13) !important;
    color: var(--gxa-mobile-text) !important;
  }

  .gxa-dashboard [data-gxa-admin-app] [data-gxa-admin-settings-section] {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-admin-app] [data-gxa-admin-settings-section].is-mobile-active {
    display: block !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-action-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    text-align: start !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-action > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .gxa-dashboard [data-gxa-admin-app] :where(h2, h3) {
    font-size: clamp(20px, 6vw, 27px) !important;
    line-height: 1.12 !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-user-editor__hero {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 11px !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-user-editor__hero :where(.gxa-profile-avatar, .gxa-admin-user-avatar) {
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
  }

  /* Auth screens scroll as pages and place the form first. */
  html.gxa-mobile-app-mode body.gxa-auth-page {
    height: auto !important;
    min-height: var(--gxa-visual-viewport-height, 100dvh) !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }

  html.gxa-mobile-app-mode body.gxa-plugin-page.gxa-auth-page header[data-gxa-plugin-header].gxa-sitebar {
    height: var(--gxa-mobile-header) !important;
    min-height: var(--gxa-mobile-header) !important;
    padding: 0 !important;
  }

  html.gxa-mobile-app-mode body.gxa-plugin-page.gxa-auth-page header[data-gxa-plugin-header].gxa-sitebar .gxa-sitebar__inner {
    display: grid !important;
    grid-template-columns: minmax(52px, 1fr) auto 42px !important;
    grid-template-areas: "logo language toggle" !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    min-height: var(--gxa-mobile-header) !important;
    height: var(--gxa-mobile-header) !important;
    padding: 7px 8px !important;
  }

  html.gxa-mobile-app-mode body.gxa-plugin-page.gxa-auth-page header[data-gxa-plugin-header].gxa-sitebar .gxa-sitebar__tools {
    display: contents !important;
    grid-area: auto !important;
    grid-column: auto !important;
    justify-self: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html.gxa-mobile-app-mode body.gxa-plugin-page.gxa-auth-page header[data-gxa-plugin-header].gxa-sitebar .gxa-sitebar__language {
    grid-area: language !important;
  }

  html.gxa-mobile-app-mode body.gxa-plugin-page.gxa-auth-page header[data-gxa-plugin-header].gxa-sitebar .gxa-sitebar__account {
    display: none !important;
  }

  html.gxa-mobile-app-mode body.gxa-plugin-page.gxa-auth-page header[data-gxa-plugin-header].gxa-sitebar .gxa-sitebar__toggle {
    grid-area: toggle !important;
  }

  body.gxa-auth-page .gxa-mobile-public-nav,
  body.gxa-auth-page .gxa-mobile-portal-bar {
    display: none !important;
  }

  body.gxa-auth-page .gxa-app.gxa-auth {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 640px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.gxa-auth-page .gxa-auth__forms {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.gxa-auth-page .gxa-auth__visual {
    order: 2 !important;
    min-height: 0 !important;
    padding: 16px !important;
  }

  body.gxa-auth-page .gxa-auth__visual h1 {
    margin: 8px 0 !important;
    font-size: 30px !important;
    line-height: 1.05 !important;
  }

  body.gxa-auth-page .gxa-auth__visual p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  body.gxa-auth-page .gxa-auth__card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 16px !important;
  }

  body.gxa-auth-page .gxa-auth__card h2 {
    margin: 4px 0 8px !important;
    font-size: 29px !important;
    line-height: 1.06 !important;
  }

  body.gxa-auth-page .gxa-auth__card :where(input:not([type="checkbox"]):not([type="radio"]), select) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    font-size: 16px !important;
  }

  body.gxa-auth-page .gxa-auth__card .gxa-button {
    width: 100% !important;
    min-height: 52px !important;
  }

  body.gxa-auth-page .gxa-site-footer {
    margin-top: 10px !important;
  }

  /* Drawer is above the app grid but never creates another page scrollbar. */
  .gxa-mobile-portal-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1300 !important;
  }

  .gxa-mobile-portal-drawer__sheet {
    max-height: min(84dvh, 720px) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .gxa-mobile-portal-drawer__content {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body.gxa-mobile-portal-open {
    overflow: hidden !important;
  }

  .gxa-mobile-drawer-links {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .gxa-mobile-drawer-links a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 56px !important;
    padding: 10px 13px !important;
    border: 1px solid var(--gxa-mobile-line) !important;
    border-radius: 12px !important;
    background: var(--gxa-mobile-surface) !important;
    color: var(--gxa-mobile-text) !important;
    text-decoration: none !important;
  }

  .gxa-mobile-drawer-links i {
    color: var(--gxa-mobile-primary) !important;
    font-size: 22px !important;
    font-style: normal !important;
  }

  .gxa-mobile-drawer-logout {
    display: grid !important;
    place-items: center !important;
    min-height: 52px !important;
    margin-top: 4px !important;
    border: 1px solid rgba(233, 88, 125, .55) !important;
    border-radius: 12px !important;
    color: #ff9eb8 !important;
    text-decoration: none !important;
  }

  body.gxa-plugin-page .gxa-button:not(.gxa-button--ghost):not(.gxa-button--outline) {
    color: #061006 !important;
    text-shadow: none !important;
  }

  @keyframes gxa-mobile-screen-enter {
    from {
      opacity: .35;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 390px) {
  :root {
    --gxa-mobile-gutter: 8px;
    --gxa-mobile-nav: 64px;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__inner {
    grid-template-columns: minmax(44px, 1fr) auto auto 38px !important;
    gap: 3px !important;
    padding-inline: 6px !important;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__logo-custom img,
  header[data-gxa-plugin-header] .gxa-sitebar__brand {
    max-width: 52px !important;
    height: 36px !important;
  }

  header[data-gxa-plugin-header] .gxa-language-switcher {
    grid-template-columns: repeat(3, 27px) !important;
    height: 36px !important;
  }

  header[data-gxa-plugin-header] .gxa-language-switcher a,
  header[data-gxa-plugin-header] .gxa-language-switcher a:not(.is-active):not([aria-current]) {
    width: 27px !important;
    min-width: 27px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 8px !important;
  }

  header[data-gxa-plugin-header] .gxa-account__trigger,
  header[data-gxa-plugin-header] .gxa-sitebar__toggle {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .gxa-dashboard [data-gxa-panel="dashboard"] .gxa-profile-welcome {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gxa-dashboard [data-gxa-panel="dashboard"] .gxa-completion-meter {
    display: none !important;
  }

  .gxa-dashboard [data-gxa-profile-app] .gxa-phone-control {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gxa-dashboard [data-gxa-admin-app] .gxa-admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 340px) {
  header[data-gxa-plugin-header] .gxa-language-switcher {
    grid-template-columns: repeat(3, 25px) !important;
  }

  header[data-gxa-plugin-header] .gxa-language-switcher a,
  header[data-gxa-plugin-header] .gxa-language-switcher a:not(.is-active):not([aria-current]) {
    width: 25px !important;
    min-width: 25px !important;
  }

  .gxa-dashboard .gxa-profile-welcome__identity {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  .gxa-dashboard .gxa-profile-avatar--dashboard {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }
}

@media (max-width: 900px) and (max-height: 700px) {
  body.gxa-auth-page .gxa-auth__visual {
    display: none !important;
  }

  .gxa-dashboard .gxa-profile-summary > * {
    min-height: 66px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  :root {
    --gxa-mobile-header: 56px;
    --gxa-mobile-nav: 58px;
  }

  header[data-gxa-plugin-header] .gxa-sitebar__inner {
    min-height: 56px !important;
    padding-block: 4px !important;
  }

  .gxa-dashboard .gxa-mobile-portal-bar__item {
    min-height: 48px !important;
  }
}

/* Viewport-mounted portal chrome: the bottom bar must never consume content space. */
@media (max-width: 900px) {
  html.gxa-mobile-app-mode body.gxa-dashboard-page .gxa-app.gxa-dashboard .gxa-portal-shell {
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "main" !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-bar {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 2147483000 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: calc(var(--gxa-mobile-nav) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--gxa-mobile-nav) + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 5px 8px max(5px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(57, 255, 20, .22) !important;
    border-radius: 0 !important;
    background: rgba(4, 9, 6, .985) !important;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .48) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-drawer:not([hidden]) {
    z-index: 2147483100 !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-bar .gxa-mobile-portal-bar__item {
    display: grid !important;
    grid-template-rows: 26px 16px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 4px 3px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #8e9b8a !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-bar .gxa-mobile-portal-bar__item.is-active {
    color: #f5fff2 !important;
    background: rgba(57, 255, 20, .11) !important;
    box-shadow: inset 0 1px 0 rgba(57, 255, 20, .24) !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-bar .gxa-mobile-portal-bar__more {
    display: grid !important;
    width: 25px !important;
    height: 25px !important;
    padding: 5px 3px !important;
    border: 1px solid rgba(57, 255, 20, .32) !important;
    border-radius: 8px !important;
    background: rgba(57, 255, 20, .045) !important;
    box-shadow: none !important;
    place-content: center !important;
    gap: 3px !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-bar .gxa-mobile-portal-bar__more::before,
  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-bar .gxa-mobile-portal-bar__more::after {
    content: none !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-bar .gxa-mobile-portal-bar__more i {
    display: block !important;
    width: 13px !important;
    height: 1.5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: none !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page .gxa-app.gxa-dashboard .gxa-dashboard-panel {
    padding-bottom: calc(var(--gxa-mobile-nav) + var(--gxa-mobile-gutter) + env(safe-area-inset-bottom)) !important;
  }

  body.gxa-dashboard-page [data-gxa-admin-nav],
  body.gxa-dashboard-page [data-gxa-panel="admin"],
  body.gxa-dashboard-page [data-gxa-panel-trigger="admin"] {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.gxa-mobile-app-mode *,
  html.gxa-mobile-app-mode *::before,
  html.gxa-mobile-app-mode *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/*
 * Mobile shell consolidation. The dashboard is an app surface: its header
 * only carries brand, language and account; all internal navigation lives in
 * the fixed bottom bar. This prevents the legacy desktop menu from opening
 * over the app content on narrow viewports.
 */
@media (max-width: 900px) {
  html.gxa-mobile-app-mode body.gxa-dashboard-page header[data-gxa-plugin-header] .gxa-sitebar__inner {
    grid-template-columns: minmax(52px, 1fr) auto auto !important;
    grid-template-areas: "logo language account" !important;
    gap: 8px !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page header[data-gxa-plugin-header] :is(.gxa-sitebar__toggle, .gxa-sitebar__nav, .gxa-sitebar__mobile-auth) {
    display: none !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page header[data-gxa-plugin-header].is-menu-open :is(.gxa-sitebar__nav, .gxa-sitebar__mobile-auth) {
    display: none !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-drawer:not([hidden]) {
    z-index: 2147482990 !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-drawer .gxa-mobile-portal-drawer__sheet {
    inset: auto 0 calc(var(--gxa-mobile-nav) + env(safe-area-inset-bottom)) 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(72dvh, 560px) !important;
    margin: 0 !important;
    padding: 14px 14px 16px !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -18px 42px rgba(0, 0, 0, .62) !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-drawer .gxa-mobile-portal-drawer__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 52px !important;
    padding: 0 0 12px !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-drawer .gxa-mobile-portal-drawer__head strong {
    display: block !important;
    margin-top: 3px !important;
    font-size: 22px !important;
    line-height: 1.12 !important;
    overflow-wrap: normal !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-drawer .gxa-mobile-portal-drawer__head > button {
    display: grid !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 27px !important;
    line-height: 1 !important;
    place-items: center !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-drawer .gxa-mobile-portal-drawer__content {
    display: grid !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-drawer .gxa-mobile-drawer-links a,
  html.gxa-mobile-app-mode body.gxa-dashboard-page > .gxa-mobile-portal-drawer .gxa-mobile-drawer-logout {
    min-height: 56px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }
}

/*
 * Mandatory legal consent lives on the dashboard route, but it is a document
 * flow rather than a fixed app panel. Keep the complete form reachable on
 * touch devices while retaining the locked app shell everywhere else.
 */
@media (max-width: 900px) {
  html.gxa-mobile-app-mode:has(.gxa-legal-gate),
  html.gxa-mobile-app-mode:has(.gxa-legal-gate) body.gxa-dashboard-page,
  html.gxa-mobile-app-mode body.gxa-dashboard-page.gxa-legal-consent-page {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  html.gxa-mobile-app-mode:has(.gxa-legal-gate) body.gxa-dashboard-page,
  html.gxa-mobile-app-mode body.gxa-dashboard-page.gxa-legal-consent-page {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.gxa-mobile-app-mode:has(.gxa-legal-gate)
    :where(.gxa-legal-gate, .gxa-legal-gate__panel, .gxa-legal-gate__documents, .gxa-legal-gate__form),
  html.gxa-mobile-app-mode body.gxa-legal-consent-page
    :where(.gxa-legal-gate, .gxa-legal-gate__panel, .gxa-legal-gate__documents, .gxa-legal-gate__form) {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    contain: none !important;
    touch-action: pan-y !important;
  }

  html.gxa-mobile-app-mode:has(.gxa-legal-gate) .gxa-legal-gate,
  html.gxa-mobile-app-mode body.gxa-legal-consent-page .gxa-legal-gate {
    margin: 10px auto 0 !important;
    padding: 10px 8px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.gxa-mobile-app-mode:has(.gxa-legal-gate) .gxa-legal-gate__panel,
  html.gxa-mobile-app-mode body.gxa-legal-consent-page .gxa-legal-gate__panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }

  html.gxa-mobile-app-mode:has(.gxa-legal-gate) .gxa-legal-gate__documents,
  html.gxa-mobile-app-mode body.gxa-legal-consent-page .gxa-legal-gate__documents {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html.gxa-mobile-app-mode:has(.gxa-legal-gate) .gxa-legal-gate__form,
  html.gxa-mobile-app-mode body.gxa-legal-consent-page .gxa-legal-gate__form {
    display: grid !important;
    gap: 12px !important;
    padding: 0 0 calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.gxa-mobile-app-mode:has(.gxa-legal-gate) .gxa-legal-gate__form .gxa-button,
  html.gxa-mobile-app-mode body.gxa-legal-consent-page .gxa-legal-gate__form .gxa-button {
    position: static !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 2px 0 0 !important;
  }

  html.gxa-mobile-app-mode body.gxa-legal-consent-page > .gxa-mobile-portal-bar,
  html.gxa-mobile-app-mode body.gxa-legal-consent-page > .gxa-mobile-portal-drawer {
    display: none !important;
  }
}