@media (max-width: 767px) {
  body.xboox-mobile-shell-active {
    background: var(--xb-color-surface);
    color: var(--xb-color-on-surface);
  }
  body.xboox-mobile-shell-active .xboox-mobile-app {
    --xbm-primary: var(--xb-color-primary);
    --xbm-on-primary: var(--xb-color-on-primary);
    --xbm-primary-container: var(--xb-color-primary-container);
    --xbm-on-primary-container: var(--xb-color-on-primary-container);
    --xbm-tertiary: var(--xb-color-tertiary);
    --xbm-surface: var(--xb-color-surface);
    --xbm-surface-low: var(--xb-color-surface-container-low);
    --xbm-surface-high: var(--xb-color-surface-container-high);
    --xbm-outline: var(--xb-color-outline);
    --xbm-outline-variant: var(--xb-color-outline-variant);
    --xbm-on-surface: var(--xb-color-on-surface);
    --xbm-on-surface-variant: var(--xb-color-on-surface-variant);
    --xbm-expense: var(--xb-mobile-expense);
    --xbm-income: var(--xb-mobile-income);
    color:var(--xbm-on-surface);
  }
  body.xboox-mobile-shell-active .xboox-mobile-main { padding: 24px 20px 104px; }
  body.xboox-mobile-shell-active .xboox-mobile-navigation {
    --xb-mobile-nav-surface: var(--xbm-surface-high);
    --xb-mobile-nav-active: var(--xbm-primary-container);
    --xb-mobile-nav-active-content: var(--xbm-on-primary-container);
    --xb-mobile-nav-content: var(--xbm-on-surface-variant);
    border-radius: 0;
  }
  .xbm-page-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--xbm-on-surface); }
  .xbm-page-heading p,.xbm-page-heading h1 { margin:0; }
  .xbm-page-heading p { color:var(--xbm-primary);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; }
  .xbm-page-heading h1 { margin-top:3px;font-size:32px;line-height:1.1; }
  .xbm-period-button { display:flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;border:1px solid var(--xbm-outline-variant);border-radius:16px;background:var(--xbm-surface);color:var(--xbm-on-surface);font:600 14px/1.2 inherit; }
  .xbm-period-button svg { width:18px; }
  .xbm-hero { display:grid;gap:8px;padding:24px;border-radius:28px;background:var(--xbm-primary-container);color:var(--xbm-on-primary-container);box-shadow:var(--xb-mobile-card-shadow); }
  .xbm-hero p,.xbm-hero h2 { margin:0; }
  .xbm-hero p { color:var(--xbm-on-surface-variant);font-size:13px; }
  .xbm-hero h2 { font-size:19px; }
  .xbm-hero>strong { font-size:36px;letter-spacing:-.03em; }
  .xbm-metric-grid { display:grid;gap:16px; }
  .xbm-metric-card { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:142px;padding:22px;border:1px solid var(--xbm-outline-variant);border-radius:24px;background:var(--xbm-surface);color:var(--xbm-on-surface);box-shadow:var(--xb-mobile-card-shadow);overflow:hidden; }
  .xbm-metric-card h2 { margin:0 0 8px;font-size:16px; }
  .xbm-metric-value { display:block;font-size:28px;line-height:1.1; }
  .xbm-metric-value.income{color:var(--xbm-income)} .xbm-metric-value.expense{color:var(--xbm-expense)}
  .xbm-trend { display:flex;align-items:center;gap:6px;margin-top:12px;color:var(--xbm-on-surface-variant);font-size:13px; }
  .xbm-trend svg { width:18px;height:18px; } .xbm-trend.revenue{color:var(--xbm-income)} .xbm-trend.expense{color:var(--xbm-expense)}
  .xbm-spark { width:112px;flex:0 0 112px;overflow:visible; }
  .xbm-spark polyline{fill:none;stroke:var(--xbm-primary);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.xbm-spark .xbm-spark-gradient stop{stop-color:var(--xbm-primary)}
  .xbm-spark-income polyline{stroke:var(--xbm-income)}.xbm-spark-income .xbm-spark-gradient stop{stop-color:var(--xbm-income)}
  .xbm-spark-expense polyline{stroke:var(--xbm-expense)}.xbm-spark-expense .xbm-spark-gradient stop{stop-color:var(--xbm-expense)}
  .xbm-panel { display:grid;gap:18px;padding:22px;border:1px solid var(--xbm-outline-variant);border-radius:24px;background:var(--xbm-surface);color:var(--xbm-on-surface);box-shadow:var(--xb-mobile-card-shadow); }
  .xbm-panel header h2,.xbm-panel header p { margin:0; } .xbm-panel header h2{font-size:21px}.xbm-panel header p{margin-top:4px;color:var(--xbm-on-surface-variant)}
  .xbm-chart-legend{display:flex;gap:20px;font-size:13px}.xbm-chart-legend span::before{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;content:""}.xbm-chart-legend .income::before{background:var(--xbm-income)}.xbm-chart-legend .expense::before{background:var(--xbm-expense)}
  .xbm-line-chart{width:100%;overflow:hidden}.xbm-line-chart svg{display:block;width:100%;height:auto;min-height:210px}.xbm-line-chart .grid line{stroke:var(--xbm-outline-variant);stroke-width:1}.xbm-line-chart text{fill:var(--xbm-on-surface-variant);font-size:9px}.xbm-line-chart .area.income{fill:url(#xbm-income-area)}.xbm-line-chart .area.expense{fill:url(#xbm-expense-area)}.xbm-line-chart .income-gradient stop{stop-color:var(--xbm-income)}.xbm-line-chart .expense-gradient stop{stop-color:var(--xbm-expense)}.xbm-line-chart .line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.xbm-line-chart .line.income{stroke:var(--xbm-income)}.xbm-line-chart .line.expense{stroke:var(--xbm-expense)}.xbm-line-chart .dots .income{fill:var(--xbm-income)}.xbm-line-chart .dots .expense{fill:var(--xbm-expense)}.xbm-line-chart .dots circle{stroke:var(--xbm-surface);stroke-width:1.5}
  .xbm-category-list{display:grid;gap:16px;color:var(--xbm-on-surface)}.xbm-category-row{display:grid;gap:8px}.xbm-category-row>div{display:flex;justify-content:space-between;gap:16px}.xbm-category-row strong{text-align:right}.xbm-category-track{display:block;height:10px;overflow:hidden;border-radius:999px;background:var(--xbm-surface-container)}.xbm-category-track i{display:block;height:100%;border-radius:inherit;background:var(--xbm-primary)}
  .xbm-transfer-form{display:grid;gap:24px;min-width:0;margin:0;padding:0}
  .xbm-outlined-field{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--xb-mobile-field-height);min-block-size:var(--xb-mobile-field-height);max-block-size:var(--xb-mobile-field-height);margin:0;padding:0 var(--xb-mobile-field-inline-padding) 4px;border:1px solid var(--xbm-outline);border-radius:16px;background:transparent;color:var(--xbm-on-surface);overflow:hidden}
  .xbm-outlined-field:focus-within{border-color:var(--xbm-outline);border-width:2px;box-shadow:none}
  .xbm-outlined-field legend{width:auto;max-width:calc(100% - 16px);height:16px;margin-left:-4px;padding:0 4px;color:var(--xbm-on-surface-variant);font-size:13px;font-weight:600;line-height:16px}
  .xbm-outlined-field>button{position:relative;display:flex;align-items:center;width:100%;min-width:0;height:var(--xb-mobile-field-value-height);min-height:0;padding:0 32px 0 0;border:0;background:transparent;color:inherit;font:400 16px/var(--xb-mobile-field-value-line-height) inherit;text-align:left}
  .xbm-outlined-field>button>strong{overflow:hidden;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.xbm-outlined-field>button>svg{position:absolute;right:0;width:20px}
  .xbm-outlined-field>.xbm-date-trigger{justify-content:flex-start;text-align:left}
  .xbm-outlined-field input{box-sizing:border-box;width:100%;min-width:0;height:var(--xb-mobile-field-value-height);min-height:0;padding:0;border:0;outline:0;background:transparent;color:inherit;font-family:inherit;font-size:16px!important;font-weight:400;line-height:var(--xb-mobile-field-value-line-height);-webkit-text-size-adjust:100%}.xbm-money-input{display:flex;align-items:center;gap:6px;width:100%;height:var(--xb-mobile-field-value-height)}.xbm-money-input b{font-weight:400}
  .xbm-outlined-field input:focus,.xbm-outlined-field textarea:focus,.xbm-outlined-field select:focus{border:0!important;box-shadow:none!important;outline:0!important;-webkit-appearance:none}
  .xbm-outlined-field:has(:disabled){background:var(--xbm-surface-high);color:var(--xbm-on-surface-variant);opacity:.72}
  .xbm-swap-button{justify-self:center;display:grid;width:48px;height:48px;margin:-12px 0;place-items:center;border:0;border-radius:50%;background:var(--xbm-primary-container);color:var(--xbm-on-primary-container)}
  .xbm-primary-button{min-height:54px;border:0;border-radius:28px;background:var(--xbm-primary);color:var(--xbm-on-primary);font:700 16px/1 inherit}.xbm-primary-button:disabled{opacity:.5}
  .xbm-form-status{min-height:20px;margin:0;color:var(--xbm-on-surface-variant);font-size:14px}.xbm-form-status[data-tone="error"]{color:var(--xbm-expense)}.xbm-form-status[data-tone="success"]{color:var(--xbm-income)}
  .xbm-readonly-note{margin:0;color:var(--xbm-on-surface-variant);font-size:14px}
  .xbm-sheet-backdrop{
    --xbm-primary:var(--xb-color-primary);
    --xbm-on-primary:var(--xb-color-on-primary);
    --xbm-primary-container:var(--xb-color-primary-container);
    --xbm-on-primary-container:var(--xb-color-on-primary-container);
    --xbm-surface:var(--xb-color-surface);
    --xbm-surface-high:var(--xb-color-surface-container-high);
    --xbm-outline:var(--xb-color-outline);
    --xbm-outline-variant:var(--xb-color-outline-variant);
    --xbm-on-surface:var(--xb-color-on-surface);
    --xbm-on-surface-variant:var(--xb-color-on-surface-variant);
    position:fixed;z-index:200;inset:0;display:flex;align-items:end;
    background:color-mix(in srgb,var(--xb-color-scrim) 42%,transparent);
    color:var(--xbm-on-surface)
  }
  .xbm-sheet{width:100%;max-height:78dvh;padding:10px 20px calc(24px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:var(--xbm-surface);overflow:auto;box-shadow:var(--xb-mobile-sheet-shadow);animation:xbm-sheet-in 180ms ease-out}
  .xbm-sheet-handle{width:36px;height:4px;margin:0 auto 12px;border-radius:2px;background:var(--xbm-outline)}
  .xbm-sheet header{display:flex;align-items:center;justify-content:space-between}.xbm-sheet header h2{font-size:24px}.xbm-sheet header button{display:grid;width:44px;height:44px;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--xbm-primary)}
  .xbm-sheet-options{display:grid}.xbm-sheet-options button{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 14px;border:0;border-top:1px solid var(--xbm-outline-variant);background:transparent;color:inherit;font:400 16px/1.3 inherit;text-align:left}.xbm-sheet-options button.selected{background:var(--xbm-primary-container);color:var(--xbm-on-primary-container)}
  .xbm-date-sheet{color:var(--xbm-on-surface)}
  .xbm-date-jump{padding:8px 0 2px}
  .xbm-date-nav{display:grid;grid-template-columns:44px minmax(0,1.2fr) minmax(0,.88fr) 44px;align-items:center;gap:8px;padding-bottom:2px}
  .xbm-date-nav>button:not(.xbm-date-control){display:grid;width:44px;height:44px;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--xbm-on-surface)}
  .xbm-date-nav>button:not(.xbm-date-control) svg{width:22px;height:22px}
  .xbm-date-control{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;height:39px;padding:0 13px;border:1px solid var(--xbm-outline-variant);border-radius:15px;background:var(--xbm-surface);color:var(--xbm-on-surface);font:600 16px/1.2 inherit;text-align:left}
  .xbm-date-control select{box-sizing:border-box;width:100%;height:100%;padding:0;border:0;outline:0;background:transparent;color:inherit;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;appearance:none}
  .xbm-date-month-control select,.xbm-date-year-control{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Arial,sans-serif!important;font-size:16px;font-weight:700;line-height:1.2}
  .xboox-mobile-app:has(.xbm-transfer-form) .xboox-mobile-appearance-lab{display:none}
  .xbm-date-control select:focus{border:0!important;box-shadow:none!important;outline:0!important}
  .xbm-date-control svg{width:18px;height:18px;flex:0 0 auto}
  .xbm-date-control:focus-visible,.xbm-date-control:focus-within{border-color:var(--xbm-outline-variant);outline:0}
  .xbm-date-calendar-view,.xbm-date-year-view{display:block}
  .xbm-date-calendar-days{margin-top:16px}
  .xbm-date-calendar-view[hidden],.xbm-date-year-view[hidden]{display:none}
  .xbm-date-calendar{display:grid;justify-content:center;padding:4px 0 8px}
  .xbm-date-sheet .flatpickr-calendar{width:min(100%,360px);background:var(--xbm-surface);color:var(--xbm-on-surface);box-shadow:none}
  .xbm-date-sheet .flatpickr-rContainer,.xbm-date-sheet .flatpickr-days,.xbm-date-sheet .dayContainer{width:100%;max-width:none}
  .xbm-date-sheet .flatpickr-months .flatpickr-month,.xbm-date-sheet .flatpickr-current-month,.xbm-date-sheet .flatpickr-weekdays,.xbm-date-sheet span.flatpickr-weekday{background:transparent;color:var(--xbm-on-surface)}
  .xbm-date-sheet .flatpickr-day{max-width:none;color:var(--xbm-on-surface);border-color:transparent}
  .xbm-date-sheet .flatpickr-day.prevMonthDay,.xbm-date-sheet .flatpickr-day.nextMonthDay{color:var(--xbm-on-surface-variant)}
  .xbm-date-sheet .flatpickr-day:hover,.xbm-date-sheet .flatpickr-day:focus{background:var(--xbm-surface-high);border-color:var(--xbm-outline-variant)}
  .xbm-date-sheet .flatpickr-day.today{border-color:var(--xbm-primary)}
  .xbm-date-sheet .flatpickr-day.selected{background:var(--xbm-primary);border-color:var(--xbm-primary);color:var(--xbm-on-primary)}
  .xbm-date-sheet .flatpickr-months{display:none}
  .xbm-date-sheet .flatpickr-current-month{visibility:hidden}
  .xbm-date-year-range{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;padding:4px 0 12px}
  .xbm-date-year-range>button{display:grid;width:44px;height:44px;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--xbm-on-surface)}
  .xbm-date-year-range>button svg{width:22px;height:22px}
  .xbm-date-year-range strong{text-align:center;font-size:18px}
  .xbm-date-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 0 8px}
  .xbm-date-year-grid button{min-height:48px;border:0;border-radius:14px;background:transparent;color:var(--xbm-on-surface);font:500 15px/1 inherit}
  .xbm-date-year-grid button:hover{background:var(--xbm-surface-high)}
  .xbm-date-year-grid button[aria-pressed="true"]{background:var(--xbm-primary-container);color:var(--xbm-on-primary-container)}
  .xbm-date-actions{display:flex;justify-content:flex-end;border-top:1px solid var(--xbm-outline-variant);padding-top:8px}
  .xbm-date-actions button{min-width:72px;height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--xbm-primary);font:650 15px/1 inherit}
  .xbm-date-actions button:hover,.xbm-date-actions button:focus-visible{background:var(--xbm-primary-container);color:var(--xbm-on-primary-container)}
  .xbm-loading{display:grid;min-height:50dvh;place-items:center;align-content:center;gap:14px}.xbm-loading span{width:36px;height:36px;border:3px solid var(--xbm-outline-variant);border-top-color:var(--xbm-primary);border-radius:50%;animation:xbm-spin .8s linear infinite}
  @keyframes xbm-spin{to{transform:rotate(1turn)}} @keyframes xbm-sheet-in{from{transform:translateY(24px);opacity:.6}}
}
