:root {
  --xb-mobile-breakpoint: 767px;
  --xb-mobile-page-inline: var(--xb-space-8);
  --xb-mobile-page-block: var(--xb-space-10);
  --xb-mobile-section-gap: var(--xb-space-8);
  --xb-mobile-nav-height: 52px;
  --xb-mobile-nav-safe-bottom: env(safe-area-inset-bottom, 0px);
  --xb-mobile-nav-divider: var(--xb-color-outline-variant);
  --xb-mobile-nav-surface: var(--xb-color-surface-container);
  --xb-mobile-nav-active: var(--xb-color-primary-container);
  --xb-mobile-nav-active-content: var(--xb-color-on-primary-container);
  --xb-mobile-nav-content: var(--xb-color-on-surface-variant);
}

.xboox-mobile-app {
  display: none;
}

@media (max-width: 767px) {
  .xboox-mobile-app {
    --xb-color-secondary: #59645b;
    --xb-color-on-secondary: #ffffff;
    --xb-color-secondary-container: #e1e7e1;
    --xb-color-on-secondary-container: #1b211c;
    --xb-color-tertiary: #28666c;
    --xb-color-on-tertiary: #ffffff;
    --xb-color-tertiary-container: #d0e9ec;
    --xb-color-on-tertiary-container: #102124;
    --xb-color-error: #ba1a1a;
    --xb-color-on-error: #ffffff;
    --xb-color-error-container: #ffdad6;
    --xb-color-on-error-container: #410002;
    --xb-color-background: var(--xb-color-surface);
    --xb-color-on-background: var(--xb-color-on-surface);
    --xb-color-surface-dim: #d9dcd8;
    --xb-color-surface-bright: #fafbfa;
    --xb-color-surface-container-lowest: #ffffff;
    --xb-color-on-surface: #1a1c1a;
    --xb-color-on-surface-variant: #444844;
    --xb-color-outline: #747874;
    --xb-color-outline-variant: #c4c8c3;
    --xb-color-shadow: #000000;
    --xb-color-scrim: #000000;
    --xb-color-inverse-surface: #2f312f;
    --xb-color-inverse-on-surface: #f1f3f0;
    --xb-color-inverse-primary: #acd6b3;
    --xb-mobile-income: var(--xb-amount-received);
    --xb-mobile-expense: var(--xb-amount-spent);
    --xb-mobile-card-shadow: var(--xb-elevation-1);
    --xb-mobile-sheet-shadow: var(--xb-elevation-4);
    --xb-mobile-field-height: 64px;
    --xb-mobile-field-value-height: 42px;
    --xb-mobile-field-value-line-height: 24px;
    --xb-mobile-field-inline-padding: 16px;
  }

  body.xboox-mobile-shell-active {
    /* Mobile overlays are mounted beside .xboox-mobile-app on document.body.
       Keep that shared layer on the Professional palette too, so dialogs and
       field focus states cannot fall back to the desktop purple token set. */
    --xb-color-primary: #315f3b;
    --xb-color-on-primary: #ffffff;
    --xb-color-primary-container: #d5ead7;
    --xb-color-on-primary-container: #102116;
    --xb-color-secondary: #59645b;
    --xb-color-on-secondary: #ffffff;
    --xb-color-secondary-container: #e1e7e1;
    --xb-color-on-secondary-container: #1b211c;
    --xb-color-tertiary: #28666c;
    --xb-color-on-tertiary: #ffffff;
    --xb-color-tertiary-container: #d0e9ec;
    --xb-color-on-tertiary-container: #102124;
    --xb-color-error: #ba1a1a;
    --xb-color-on-error: #ffffff;
    --xb-color-error-container: #ffdad6;
    --xb-color-on-error-container: #410002;
    --xb-color-surface: #fafbfa;
    --xb-color-surface-bright: #fafbfa;
    --xb-color-surface-container-lowest: #ffffff;
    --xb-color-surface-container-low: #f5f6f4;
    --xb-color-surface-container: #eff1ee;
    --xb-color-surface-container-high: #e9ebe8;
    --xb-color-surface-container-highest: #e2e5e1;
    --xb-color-on-surface: #1a1c1a;
    --xb-color-on-surface-variant: #444844;
    --xb-color-outline: #747874;
    --xb-color-outline-variant: #c4c8c3;
    --xb-field-border: var(--xb-color-outline);
    --xb-field-container: var(--xb-color-surface-container-lowest);
    --xb-field-content: var(--xb-color-on-surface);
    --xb-field-label: var(--xb-color-on-surface-variant);
    --xb-menu-item-hover-container: var(--xb-color-primary-container);
    --surface: var(--xb-color-surface);
    --text: var(--xb-color-on-surface);
    --text-muted: var(--xb-color-on-surface-variant);
    --text-primary: var(--xb-color-on-surface);
    --border: var(--xb-color-outline-variant);
    --primary: var(--xb-color-primary);
    min-width: 0;
    overflow-x: clip;
    background: var(--xb-color-surface);
    color: var(--xb-color-on-surface);
  }

  body.xboox-mobile-shell-active > .shell,
  body.xboox-mobile-shell-active > .toast-viewport {
    display: none !important;
  }

  body.xboox-mobile-shell-active .xboox-mobile-app {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--xb-color-surface);
  }

  .xboox-mobile-app[data-mobile-theme="original"] {
    --xb-color-primary: #2f6b1e;
    --xb-color-on-primary: #ffffff;
    --xb-color-primary-container: #b6f397;
    --xb-color-on-primary-container: #092200;
    --xb-color-surface: #f9faef;
    --xb-color-surface-container-low: #f3f4e9;
    --xb-color-surface-container: #edeee3;
    --xb-color-surface-container-high: #e7e8dd;
    --xb-color-surface-container-highest: #e1e3d7;
  }

  .xboox-mobile-app[data-mobile-theme="soft"] {
    --xb-color-primary: #42682f;
    --xb-color-on-primary: #ffffff;
    --xb-color-primary-container: #d7efc8;
    --xb-color-on-primary-container: #10200a;
    --xb-color-surface: #f8faf5;
    --xb-color-surface-container-low: #f2f5ef;
    --xb-color-surface-container: #ecefe8;
    --xb-color-surface-container-high: #e6e9e2;
    --xb-color-surface-container-highest: #dfe3dc;
  }

  .xboox-mobile-app[data-mobile-theme="professional"] {
    --xb-color-primary: #315f3b;
    --xb-color-on-primary: #ffffff;
    --xb-color-primary-container: #d5ead7;
    --xb-color-on-primary-container: #102116;
    --xb-color-secondary: #59645b;
    --xb-color-on-secondary: #ffffff;
    --xb-color-secondary-container: #e1e7e1;
    --xb-color-on-secondary-container: #1b211c;
    --xb-color-tertiary: #28666c;
    --xb-color-on-tertiary: #ffffff;
    --xb-color-tertiary-container: #d0e9ec;
    --xb-color-on-tertiary-container: #102124;
    --xb-color-error: #ba1a1a;
    --xb-color-on-error: #ffffff;
    --xb-color-error-container: #ffdad6;
    --xb-color-on-error-container: #410002;
    --xb-color-surface: #fafbfa;
    --xb-color-surface-bright: #fafbfa;
    --xb-color-surface-container-lowest: #ffffff;
    --xb-color-surface-container-low: #f5f6f4;
    --xb-color-surface-container: #eff1ee;
    --xb-color-surface-container-high: #e9ebe8;
    --xb-color-surface-container-highest: #e2e5e1;
    --xb-color-on-surface: #1a1c1a;
    --xb-color-on-surface-variant: #444844;
    --xb-color-outline: #747874;
    --xb-color-outline-variant: #c4c8c3;
  }

  .xboox-mobile-app.is-dark-preview {
    color-scheme: dark;
    --xb-color-primary: #acd6b3;
    --xb-color-on-primary: #173821;
    --xb-color-primary-container: #294e32;
    --xb-color-on-primary-container: #d5ead7;
    --xb-color-secondary: #c0cbc1;
    --xb-color-on-secondary: #2b352d;
    --xb-color-secondary-container: #414b43;
    --xb-color-on-secondary-container: #dce7dd;
    --xb-color-tertiary: #a9cdd1;
    --xb-color-on-tertiary: #12363a;
    --xb-color-tertiary-container: #2d4d51;
    --xb-color-on-tertiary-container: #c5e9ed;
    --xb-color-error: #ffb4ab;
    --xb-color-on-error: #690005;
    --xb-color-error-container: #93000a;
    --xb-color-on-error-container: #ffdad6;
    --xb-color-background: #111312;
    --xb-color-on-background: #e3e5e2;
    --xb-color-surface: #111312;
    --xb-color-surface-dim: #111312;
    --xb-color-surface-bright: #333633;
    --xb-color-surface-container-lowest: #0c0e0d;
    --xb-color-surface-container-low: #191b1a;
    --xb-color-surface-container: #1d201e;
    --xb-color-surface-container-high: #282b29;
    --xb-color-surface-container-highest: #333633;
    --xb-color-on-surface: #e3e5e2;
    --xb-color-on-surface-variant: #c4c8c3;
    --xb-color-outline: #8e928e;
    --xb-color-outline-variant: #444844;
    --xb-color-shadow: #000000;
    --xb-color-scrim: #000000;
    --xb-color-inverse-surface: #e3e5e2;
    --xb-color-inverse-on-surface: #2f312f;
    --xb-color-inverse-primary: #315f3b;
    --xb-mobile-income: #9bd8b0;
    --xb-mobile-expense: #f2b8b5;
  }

  .xboox-mobile-app.is-dark-preview[data-mobile-theme="original"] {
    --xb-color-primary: #9cda80;
    --xb-color-on-primary: #123800;
    --xb-color-primary-container: #22500d;
    --xb-color-on-primary-container: #b6f397;
  }

  .xboox-mobile-app.is-dark-preview[data-mobile-theme="soft"] {
    --xb-color-primary: #b8dc9f;
    --xb-color-on-primary: #203712;
    --xb-color-primary-container: #354f26;
    --xb-color-on-primary-container: #d7efc8;
  }

  .xboox-mobile-main {
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - var(--xb-mobile-nav-height) - var(--xb-mobile-nav-safe-bottom));
    min-height: calc(100dvh - var(--xb-mobile-nav-height) - var(--xb-mobile-nav-safe-bottom));
    padding:
      max(var(--xb-mobile-page-block), env(safe-area-inset-top, 0px))
      var(--xb-mobile-page-inline)
      calc(var(--xb-mobile-nav-height) + var(--xb-mobile-nav-safe-bottom) + var(--xb-mobile-page-block));
    overflow-x: clip;
  }

  .xboox-mobile-route {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: var(--xb-mobile-section-gap);
  }

  .xboox-mobile-appearance-lab {
    display: grid;
    gap: var(--xb-space-5);
    margin-top: var(--xb-mobile-section-gap);
    padding: var(--xb-space-6);
    border: 1px solid var(--xb-color-outline-variant);
    border-radius: var(--xb-shape-card);
    background: var(--xb-color-surface-container-low);
    color: var(--xb-color-on-surface);
  }

  .xboox-mobile-appearance-lab header {
    display: grid;
    gap: var(--xb-space-1);
  }

  .xboox-mobile-appearance-lab header p,
  .xboox-mobile-appearance-lab header h2 {
    margin: 0;
  }

  .xboox-mobile-appearance-lab header p {
    color: var(--xb-color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .xboox-mobile-appearance-lab header h2 {
    font-size: 18px;
    line-height: 1.35;
  }

  .xboox-mobile-theme-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 3px;
    border-radius: 999px;
    background: var(--xb-color-surface-container-high);
  }

  .xboox-mobile-theme-options button {
    min-width: 0;
    min-height: 44px;
    padding: 0 var(--xb-space-3);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--xb-color-on-surface-variant);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
  }

  .xboox-mobile-theme-options button[aria-pressed="true"] {
    background: var(--xb-color-primary);
    color: var(--xb-color-on-primary);
  }

  .xboox-mobile-preview-switches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--xb-space-5);
  }

  .xboox-mobile-preview-switches label {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: var(--xb-space-3);
    color: var(--xb-color-on-surface);
    font-size: 14px;
    font-weight: 600;
  }

  .xboox-mobile-preview-switches input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
  }

  .xboox-mobile-preview-switches label > span {
    position: relative;
    width: 44px;
    height: 26px;
    border: 2px solid var(--xb-color-outline);
    border-radius: 13px;
    background: var(--xb-color-surface-container-highest);
  }

  .xboox-mobile-preview-switches label > span::after {
    position: absolute;
    top: 50%;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--xb-color-outline);
    content: "";
    transform: translateY(-50%);
    transition: transform var(--xb-motion-state), background-color var(--xb-motion-state);
  }

  .xboox-mobile-preview-switches input:checked + span {
    border-color: var(--xb-color-primary);
    background: var(--xb-color-primary);
  }

  .xboox-mobile-preview-switches input:checked + span::after {
    background: var(--xb-color-on-primary);
    transform: translate(18px, -50%);
  }

  .xboox-mobile-preview-switches input:focus-visible + span,
  .xboox-mobile-theme-options button:focus-visible,
  .xboox-mobile-demo-link:focus-visible {
    outline: 3px solid var(--xb-color-primary);
    outline-offset: 3px;
  }

  .xboox-mobile-demo-link {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: var(--xb-space-3);
    padding: 0 var(--xb-space-5);
    border: 1px solid var(--xb-color-outline);
    border-radius: 999px;
    background: var(--xb-color-surface-container-lowest);
    color: var(--xb-color-primary);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }

  .xboox-mobile-demo-link svg {
    width: 18px;
    height: 18px;
  }

  .xboox-mobile-app.is-posted-preview .mobile-status-chip.is-waiting,
  .xboox-mobile-app.is-posted-preview .chip.waiting {
    background: var(--xb-color-primary-container);
    color: var(--xb-color-on-primary-container);
  }

  .xboox-mobile-route-header {
    display: grid;
    gap: var(--xb-space-2);
  }

  .xboox-mobile-route-eyebrow {
    margin: 0;
    color: var(--xb-color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .xboox-mobile-route-title {
    margin: 0;
    color: var(--xb-color-on-surface);
    font-size: clamp(28px, 8vw, 36px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
  }

  .xboox-mobile-route-description {
    max-width: 34rem;
    margin: 0;
    color: var(--xb-color-on-surface-variant);
    font-size: 16px;
    line-height: 1.5;
  }

  .xboox-mobile-route-placeholder {
    display: grid;
    min-width: 0;
    gap: var(--xb-space-4);
    padding: var(--xb-space-8);
    border: 1px solid var(--xb-color-outline-variant);
    border-radius: var(--xb-shape-card);
    background: var(--xb-color-surface-container-low);
  }

  .xboox-mobile-route-placeholder strong,
  .xboox-mobile-route-placeholder p {
    margin: 0;
  }

  .xboox-mobile-route-placeholder p {
    color: var(--xb-color-on-surface-variant);
    line-height: 1.5;
  }

  .xboox-mobile-navigation {
    position: fixed;
    z-index: 70;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    min-height: calc(var(--xb-mobile-nav-height) + var(--xb-mobile-nav-safe-bottom));
    padding: 0;
    border-top: 1px solid var(--xb-mobile-nav-divider);
    background: var(--xb-mobile-nav-surface);
    box-shadow: var(--xb-elevation-2);
  }

  .xboox-mobile-navigation-capture {
    position: absolute;
    z-index: 2;
    top: -27px;
    left: 50%;
    display: grid;
    width: 56px;
    height: 56px;
    padding: 0;
    place-items: center;
    transform: translateX(-50%);
    border: 4px solid var(--xb-mobile-nav-surface);
    border-radius: 50%;
    background: var(--xb-color-primary);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--xb-color-shadow) 24%, transparent);
    color: var(--xb-color-on-primary);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background-color var(--xb-motion-state),
      box-shadow var(--xb-motion-state),
      transform var(--xb-motion-state);
  }

  .xboox-mobile-navigation-capture svg {
    width: 25px;
    height: 25px;
    stroke-width: 2;
  }

  .xboox-mobile-navigation-capture:hover,
  .xboox-mobile-navigation-capture[aria-current="page"] {
    background: color-mix(in srgb, var(--xb-color-primary) 90%, var(--xb-color-on-primary));
    box-shadow: 0 7px 18px color-mix(in srgb, var(--xb-color-shadow) 28%, transparent);
  }

  .xboox-mobile-navigation-capture:active {
    transform: translateX(-50%) scale(0.95);
  }

  .xboox-mobile-navigation-capture:focus-visible {
    outline: 3px solid var(--xb-color-primary);
    outline-offset: 3px;
  }

  .xboox-mobile-navigation-item {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: calc(var(--xb-mobile-nav-height) + var(--xb-mobile-nav-safe-bottom));
    place-items: center;
    align-content: center;
    gap: var(--xb-space-1);
    padding: var(--xb-space-1) var(--xb-space-2);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--xb-mobile-nav-content);
    font: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--xb-motion-state),
      color var(--xb-motion-state);
  }

  .xboox-mobile-navigation-item + .xboox-mobile-navigation-item::before {
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 1px;
    background: var(--xb-mobile-nav-divider);
    content: "";
    opacity: 0;
  }

  .xboox-mobile-navigation-item[aria-current="page"] {
    background: var(--xb-mobile-nav-active);
    color: var(--xb-mobile-nav-active-content);
  }

  .xboox-mobile-navigation-item:focus-visible {
    z-index: 1;
    outline: 3px solid var(--xb-color-primary);
    outline-offset: -3px;
  }

  .xboox-mobile-navigation-item-icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
  }

  .xboox-mobile-navigation-item-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
  }

  .xboox-mobile-navigation-item-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .xboox-mobile-navigation-item[data-mobile-route="#expenses"] > * {
    transform: translateX(-6px);
  }

  .xboox-mobile-navigation-item[data-mobile-route="#income"] > * {
    transform: translateX(6px);
  }
}

@media (max-width: 359px) {
  :root {
    --xb-mobile-page-inline: var(--xb-space-6);
  }

  .xboox-mobile-navigation-item-label {
    font-size: 11px;
  }
}