@media (max-width: 767px) {
  .mobile-app {
    /* ---- Shared mobile design tokens (consumed by all mobile modules) ---- */
    /* Typography scale */
    --mobile-font-2xs: 10px;
    --mobile-font-xs: 11px;
    --mobile-font-sm: 12px;
    --mobile-font-md: 13px;
    --mobile-font-base: 14px;
    --mobile-font-lg: 15px;
    --mobile-font-xl: 17px;
    --mobile-line-tight: 1.25;
    --mobile-line: 1.35;
    --mobile-space-1: 4px;
    --mobile-space-2: 8px;
    --mobile-space-3: 12px;
    --mobile-space-4: 16px;
    --mobile-space-5: 24px;
    --mobile-control-height: 40px;
    --mobile-button-height: 34px;
    --mobile-button-height-primary: 36px;
    --mobile-icon-button-size: 34px;
    --mobile-button-font: 12px;
    --mobile-button-radius: 8px;
    --mobile-touch-target: 44px;
    --mobile-radius-sm: 8px;
    --mobile-radius: 10px;
    --mobile-radius-lg: 12px;
    --mobile-shell-header-height: 52px;
    --mobile-shell-nav-height: 56px;
    --mobile-shell-nav-safe-height: calc(var(--mobile-shell-nav-height) + env(safe-area-inset-bottom));
    --mobile-shell-content-end-gap: 28px;
    --mobile-shell-gutter: 14px;
    color: #072c3b;
    font-family: Arial, sans-serif;
    font-size: var(--mobile-font-base);
    line-height: var(--mobile-line);
  }

  body.mobile-shell-active {
    padding-top: var(--mobile-shell-header-height, 56px);
    padding-bottom: calc(var(--mobile-shell-nav-height, 64px) + env(safe-area-inset-bottom) + 28px);
  }
  body.mobile-shell-active:not(.mobile-adapter-active) > main {
    box-sizing: border-box;
    padding-bottom: calc(var(--mobile-shell-nav-height, 64px) + env(safe-area-inset-bottom) + 28px) !important;
    scroll-padding-bottom: calc(var(--mobile-shell-nav-height, 64px) + env(safe-area-inset-bottom) + 28px);
  }
  body.mobile-shell-active > .topbar { display: none !important; }
  body.mobile-adapter-active > main { display: none !important; }

  /* Shared account modal normally sits at z-index 999, below the mobile shell.
     Lift only My Account above the shell so its existing desktop form remains usable. */
  body.mobile-shell-active #accountModal { z-index: 1300; }
  body.mobile-shell-active #accountModal .scanner-panel {
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }

  .mobile-app__header {
    position: fixed; z-index: 1100; inset: 0 0 auto; height: var(--mobile-shell-header-height);
    display: grid; grid-template-columns: var(--mobile-icon-button-size) minmax(0, 1fr) var(--mobile-icon-button-size);
    align-items: center; gap: var(--mobile-space-2); padding: 6px var(--mobile-space-3); box-sizing: border-box;
    background: #fff; border-bottom: 1px solid #c8dce2; box-shadow: 0 2px 10px rgba(7, 44, 59, .08);
  }

  .mobile-app__brand {
    min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: var(--mobile-font-xl); font-weight: 700; line-height: var(--mobile-line-tight); letter-spacing: .04em;
  }

  .mobile-app .mobile-app__icon-button:not([hidden]), .mobile-app .mobile-app__drawer-head button:not([hidden]) {
    position: relative; width: var(--mobile-icon-button-size); min-width: var(--mobile-icon-button-size);
    height: var(--mobile-icon-button-size) !important; min-height: var(--mobile-icon-button-size) !important;
    padding: 0; border: 1px solid #bdd5dd; border-radius: var(--mobile-button-radius); background: #eaf5f7;
    color: #073d52; font-size: 16px;
  }
  .mobile-app__icon-button::before, .mobile-app__drawer-head button::before { content: ""; position: absolute; inset: -5px; }
  .mobile-app__notification { display: grid; place-items: center; }
  .mobile-app__notification svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

  .mobile-app__bottom-nav {
    position: fixed;
    z-index: 1090;
    inset: auto 0 0;
    height: var(--mobile-shell-nav-safe-height);
    min-height: var(--mobile-shell-nav-safe-height);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    padding: 4px max(10px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    box-sizing: border-box;
    background: #fff;
    border-top: 1px solid #c8dce2;
  }
  .mobile-app__bottom-nav :where(a, button) { min-width: 0; min-height: 48px; display: grid; place-items: center; border: 0; background: transparent; color: #07425a; font-family: inherit; font-size: var(--mobile-font-2xs); font-weight: 700; letter-spacing: .03em; line-height: var(--mobile-line-tight); text-decoration: none; }

  .mobile-app__drawer {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, min(88vw, 360px)) 1fr;
  }
  .mobile-app__drawer[hidden] { display: none !important; }
  .mobile-app__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(0, 24, 35, .52);
    backdrop-filter: blur(2px);
  }
  .mobile-app__drawer-panel {
    position: relative;
    z-index: 1;
    grid-column: 1;
    min-width: 0;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: #f7fbfc;
    border-radius: 0 18px 18px 0;
    box-shadow: 12px 0 34px rgba(0, 20, 30, .28);
  }
  .mobile-app__drawer-head {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(14px, env(safe-area-inset-top)) 14px 12px;
    border-bottom: 1px solid #d5e5e9;
    background: #fff;
  }
  .mobile-app__drawer-head > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .mobile-app__drawer-head strong {
    color: #06394d;
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: .04em;
  }
  .mobile-app__drawer-head span {
    color: #6b858f;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
  }
  .mobile-app__drawer-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 10px 18px;
  }
  .mobile-app__drawer-home,
  .mobile-app__drawer-link {
    min-height: 48px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #123e4c;
    background: transparent;
    text-decoration: none;
    font-size: var(--mobile-font-md);
    font-weight: 700;
    line-height: var(--mobile-line-tight);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-app__drawer-home {
    margin-bottom: 10px;
    border-color: #c8e0e5;
    background: #eaf5f7;
    color: #063f55;
  }
  .mobile-app__drawer-link:active,
  .mobile-app__drawer-home:active { transform: scale(.99); background: #eaf5f7; }
  .mobile-app__drawer-link.is-active {
    border-color: #9ccbd5;
    background: #dff0f3;
    color: #004860;
  }
  .mobile-app__drawer-link-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e7f2f4;
    color: #0b607b;
  }
  .mobile-app__drawer-home .mobile-app__drawer-link-icon,
  .mobile-app__drawer-link.is-active .mobile-app__drawer-link-icon {
    background: #cfe7ec;
    color: #00566f;
  }
  .mobile-app__drawer-link-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-app__drawer-link-label {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .mobile-app__drawer-link-arrow,
  .mobile-app__drawer-home > span:last-child {
    justify-self: end;
    color: #8097a0;
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
  }
  .mobile-app__drawer-section {
    display: grid;
    gap: 3px;
    margin-top: 12px;
  }
  .mobile-app__drawer-section:first-child { margin-top: 0; }
  .mobile-app__drawer-section-title {
    margin: 0;
    padding: 0 9px 4px;
    color: #78909a;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mobile-app__drawer-section-links {
    display: grid;
    gap: 2px;
  }
  .mobile-app__drawer-account {
    display: grid;
    gap: 8px;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid #d5e5e9;
    background: #fff;
  }
  .mobile-app__drawer-account-title {
    color: #80939b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mobile-app__drawer-account-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mobile-app .mobile-app__drawer-account button:not([hidden]) {
    position: relative;
    min-height: 42px !important;
    padding: 7px 10px;
    border: 1px solid #bdd5dd;
    border-radius: 11px;
    background: #eaf5f7;
    color: #073d52;
    font-family: inherit;
    font-size: var(--mobile-font-md);
    font-weight: 700;
    line-height: var(--mobile-line-tight);
  }
  .mobile-app .mobile-app__drawer-account .mobile-app__drawer-logout {
    border-color: #efc5c5;
    background: #fff3f3;
    color: #a32626;
  }
  .mobile-app__drawer-account button::before { content: ""; position: absolute; inset: -3px 0; }
  .mobile-app__drawer-list { display: grid; gap: 2px; }

  .mobile-app__view {
    position: fixed;
    z-index: 1000;
    top: var(--mobile-shell-header-height);
    right: 0;
    bottom: var(--mobile-shell-nav-safe-height);
    left: 0;
    height: auto;
    max-height: calc(100dvh - var(--mobile-shell-header-height) - var(--mobile-shell-nav-safe-height));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: var(--mobile-shell-gutter);
    padding-bottom: calc(var(--mobile-shell-gutter) + var(--mobile-shell-content-end-gap));
    scroll-padding-bottom: calc(var(--mobile-shell-content-end-gap) + var(--mobile-shell-gutter));
    box-sizing: border-box;
    background: #eef6f7;
  }
}

@media (min-width: 768px) { .mobile-app { display: none !important; } }