/* One shared UI for Android, iOS and narrow browser previews. */
.mobile-mode .mobile-app-bar .mobile-back:disabled{opacity:.35;cursor:default}
.mobile-mode .modal-backdrop form>*{flex-shrink:0}
.mobile-mode .modal-backdrop .modal-actions,.mobile-mode .modal-backdrop .transaction-modal-actions,.mobile-mode .modal-backdrop .budget-modal-actions{background:transparent!important;border-top:0!important;box-shadow:none!important}
.mobile-mode .mobile-connect,.mobile-mode .mobile-logout{width:100%;margin:12px 0}
.mobile-mode .mobile-connect[hidden]{display:none}
.mobile-mode #moneyPointDetails:not([hidden]):has(.approved-account-detail){display:block!important;margin-top:16px}
.mobile-mode .approved-account-detail{background:#ffffffe0;border-radius:14px;padding:16px;min-width:0}
.mobile-mode .approved-account-actions{display:flex;flex-wrap:wrap;gap:8px}
.mobile-mode .approved-account-detail .approved-history{overflow-x:auto}
.mobile-app-bar,.mobile-bottom-nav,.mobile-scope-button,.mobile-map-toggle,.mobile-account-balance{display:none}
.mobile-ledger-dialog{max-width:420px;width:calc(100% - 32px);border:1px solid #fff;border-radius:20px;padding:22px;background:#eaf7fd;color:#12344a}
.mobile-ledger-dialog::backdrop{background:#12344a66}
.mobile-ledger-dialog header{display:flex;justify-content:space-between;align-items:center}.mobile-ledger-dialog h2{font-size:22px;margin:0}
.mobile-ledger-dialog button{min-height:48px;border:0;border-radius:10px;background:white;color:#12344a;padding:12px;font:inherit}.mobile-ledger-dialog header button{width:48px}
.mobile-ledger-options{display:grid;gap:12px;margin-top:20px}.mobile-ledger-options button[aria-pressed=true]{background:#1683c3;color:white}.mobile-ledger-status{font-size:13px;color:#a24246}
.mobile-mode{--mobile-ink:#12344a;--mobile-blue:#1683c3;--mobile-surface:#ffffffe0;--mobile-bottom:calc(72px + env(safe-area-inset-bottom,0px));background:#72bfe0}
.mobile-mode body{margin:0;min-width:0;color:var(--mobile-ink);background:#72bfe0 url('/assets/login-intro-background.png') center/cover fixed no-repeat;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif}
.mobile-mode body:has(#appShell:not([hidden])){padding:0!important}
.mobile-mode #appShell{display:block!important;min-height:100dvh;background:transparent!important;padding:0!important}
.mobile-mode #appShell[hidden]{display:none!important}
.mobile-mode #appShell>.sidebar{display:none!important}
.mobile-mode #appShell>main.content{display:block!important;width:100%!important;max-width:620px!important;min-width:0!important;margin:0 auto!important;padding:0 20px calc(var(--mobile-bottom) + 22px)!important;overflow:visible!important;background:transparent!important}
.mobile-mode .mobile-app-bar{display:flex;position:sticky;z-index:80;top:0;align-items:center;gap:10px;min-height:calc(72px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 20px 0;background:#76c1e1ee;border-bottom:1px solid #ffffff55;backdrop-filter:blur(12px)}
.mobile-mode .mobile-app-bar h1{font-size:21px;font-weight:750;letter-spacing:-.6px;line-height:1.3;flex:1;margin:0;color:#12344a}
.mobile-mode .mobile-app-bar button{display:grid;place-items:center;min-width:48px;width:48px;height:48px;background:transparent;border:0;border-radius:10px;color:#12344a;padding:0}
.mobile-mode .mobile-app-bar button[hidden]{display:none}.mobile-mode .mobile-app-bar svg{width:23px;height:23px}
.mobile-mode .mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:85;display:flex;padding:5px 8px max(8px,env(safe-area-inset-bottom,0px));min-height:var(--mobile-bottom);background:#edf9fff2;border-top:1px solid #fff;backdrop-filter:blur(14px)}
.mobile-mode .mobile-bottom-nav button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;min-width:0;background:none;border:0;color:#53788e;font:inherit;font-size:11px;padding:3px}
.mobile-mode .mobile-bottom-nav button>span{display:grid;place-items:center;width:55px;height:30px;border-radius:22px}.mobile-mode .mobile-bottom-nav svg{width:21px;height:21px}
.mobile-mode .mobile-bottom-nav .active{color:#0a567d;font-weight:700}.mobile-mode .mobile-bottom-nav .active>span{background:#a8d9ed}
.mobile-mode #appShell .topbar{position:static!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:12px!important;padding:20px 0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important}
.mobile-mode #appShell .topbar-copy{flex:1 1 100%;min-width:0}.mobile-mode #appShell .topbar #mainTitle,.mobile-mode #appShell .topbar .page-subtitle,.mobile-mode #appShell .topbar .page-eyebrow{display:none!important}
.mobile-mode #ledgerScopeSummary>i,.mobile-mode #ledgerScopeSummary>svg,.mobile-mode #ledgerScopeSummary>strong,.mobile-mode #ledgerScopeSummary>span{display:none!important}
.mobile-mode .mobile-scope-button{display:block;padding:0 0 0 2px;min-height:32px;background:transparent;border:0;color:#174b65;font:inherit;font-size:13px;font-weight:650;text-align:left}
.mobile-mode #appShell .topbar-actions{display:contents!important}.mobile-mode #appShell .topbar-actions>button{display:none!important}
.mobile-mode #appShell .month-control{display:flex;justify-content:space-between;width:100%;height:42px;border:0;background:transparent;box-shadow:none;margin:0}.mobile-mode #appShell .month-control[hidden]{display:none}
.mobile-mode #appShell .month-control button{width:42px;height:42px;min-width:42px;background:transparent;border:0;color:#245976;padding:8px}.mobile-mode #appShell .month-control strong{font-size:15px;color:#12344a}
.mobile-mode #appShell .view{padding:0!important;min-width:0;max-width:100%;background:transparent!important}.mobile-mode #appShell .view:not(.active-view){display:none!important}
.mobile-mode #appShell .panel,.mobile-mode #appShell .metric-card,.mobile-mode #appShell .settings-b-body,.mobile-mode #appShell .settings-members-card{background:var(--mobile-surface)!important;border:1px solid #ffffffd6!important;border-radius:14px!important;box-shadow:none!important;min-width:0!important}
.mobile-mode #appShell .panel{padding:17px!important;margin-bottom:16px}
.mobile-mode #appShell h2{font-size:17px;line-height:1.45;letter-spacing:-.4px}.mobile-mode #appShell h3{font-size:15px}.mobile-mode #appShell p{overflow-wrap:anywhere}
.mobile-mode #appShell .panel-heading{gap:9px!important;flex-wrap:wrap;min-width:0}.mobile-mode #appShell .panel-heading>div{min-width:0}
.mobile-mode #appShell .primary-button,.mobile-mode .modal-backdrop .primary-button{background:linear-gradient(110deg,#2398c5,#0878af)!important;color:white!important;border:0;min-height:48px;border-radius:12px;box-shadow:none}
.mobile-mode #appShell .secondary-button,.mobile-mode .modal-backdrop .secondary-button{background:#ffffffc9;border-color:#fff;color:#155775;min-height:44px;border-radius:10px}
.mobile-mode button:focus-visible,.mobile-mode input:focus-visible,.mobile-mode select:focus-visible,.mobile-mode textarea:focus-visible{outline:3px solid #075c86!important;outline-offset:2px}
.mobile-mode input,.mobile-mode select,.mobile-mode textarea{font-size:16px!important;min-height:48px;border-radius:10px!important;max-width:100%;min-width:0;color:#12344a}
.mobile-mode #appShell .dashboard-hero-card{padding:22px 20px!important;background:#ffffffb8!important;border:1px solid white!important;border-radius:17px!important}
.mobile-mode #dashboardView .dashboard-hero-copy>span{font-size:13px;color:#315e75}.mobile-mode #dashboardHeroAvailable{font-size:32px!important;letter-spacing:-1px;line-height:1.3}.mobile-mode #dashboardHeroNote{display:block!important;margin-top:6px;color:#5f7b8d;font-size:12px;line-height:1.5}
.mobile-mode #dashboardView .dashboard-hero-flow{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px;padding:15px 10px!important;margin-top:22px;border-radius:12px!important;background:#ffffffd9!important}
.mobile-mode #dashboardView .dashboard-hero-flow>div{padding:0!important;min-width:0;display:block!important}.mobile-mode #dashboardView .dashboard-hero-flow>div:after{display:none!important}.mobile-mode #dashboardView .dashboard-hero-flow-icon{display:none!important}.mobile-mode #dashboardView .dashboard-hero-flow em{font-size:11px!important}.mobile-mode #dashboardView .dashboard-hero-flow strong{font-size:clamp(10px,3.35vw,13px)!important;white-space:nowrap;letter-spacing:-.3px}
.mobile-mode #dashboardView .dashboard-main-grid,.mobile-mode #dashboardView .dashboard-grid,.mobile-mode #dashboardView .dashboard-details-grid{display:flex!important;flex-direction:column;gap:0!important}
.mobile-mode #dashboardView .dashboard-budget-panel{order:0}.mobile-mode #dashboardView .dashboard-recent-panel{order:1}.mobile-mode #dashboardView .dashboard-balance-panel{order:2}.mobile-mode #dashboardView .dashboard-category-panel{order:3}.mobile-mode #dashboardView .dashboard-analysis-preview{order:4}
.mobile-mode #dashboardView .dashboard-heading-link{font-size:11px}.mobile-mode #dashboardView .dashboard-budget-row,.mobile-mode #dashboardView .dashboard-recent-row{min-width:0;max-width:100%}
.mobile-mode #transactionsView .transaction-overview{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px;margin-bottom:16px}.mobile-mode #transactionsView .transaction-overview-card{min-width:0!important;background:#ffffffdb!important;border:1px solid #fff!important;border-radius:12px!important;padding:14px!important;box-shadow:none!important}.mobile-mode #transactionsView .transaction-overview-icon{display:none!important}.mobile-mode #transactionsView .transaction-overview-card strong{font-size:17px!important;overflow-wrap:anywhere}.mobile-mode #transactionsView .transaction-overview-card small{font-size:11px}
.mobile-mode #transactionsView .transaction-command-bar{display:flex!important;flex-wrap:wrap!important;gap:12px!important;padding:12px!important}.mobile-mode .transaction-view-controls{width:100%;order:1;display:flex!important}.mobile-mode .transaction-view-controls button{flex:1;min-height:44px}.mobile-mode .transaction-search{width:100%!important;order:0;min-width:0!important}.mobile-mode .transaction-command-actions{order:2;display:flex;width:100%;gap:8px}.mobile-mode .transaction-command-actions>button,.mobile-mode .transaction-command-actions>.transaction-more-wrap{flex:1}.mobile-mode .transaction-more-wrap>button{width:100%}.mobile-mode .transaction-more-menu{width:min(320px,calc(100vw - 64px));right:0;z-index:90}
.mobile-mode #transactionDetailFilters{display:block}.mobile-mode #transactionDetailFilters[hidden]{display:none}.mobile-mode #transactionDetailFilters fieldset{min-width:0;flex-wrap:wrap}.mobile-mode #transactionDetailFilters select{width:100%}
.mobile-mode .transaction-layout,.mobile-mode .transaction-history-layout,.mobile-mode .budget-layout,.mobile-mode .money-map-layout,.mobile-mode .investment-grid,.mobile-mode .insights-grid{display:block!important;grid-template-columns:minmax(0,1fr)!important;min-width:0!important}
.mobile-mode #transactionCalendar{min-width:0!important;max-width:100%;gap:3px!important}.mobile-mode .calendar-day{min-height:67px!important;padding:4px!important;min-width:0!important}.mobile-mode .calendar-day strong,.mobile-mode .calendar-day span{font-size:9px!important;overflow-wrap:anywhere}.mobile-mode .calendar-day button{min-width:22px!important;width:22px!important;height:22px!important;padding:0!important}
.mobile-mode #budgetsView .budget-approved-layout,.mobile-mode #budgetsView .budget-main-layout,.mobile-mode #budgetDetailView .budget-detail-layout{display:block!important}.mobile-mode #budgetsView .budget-sidebar{width:100%!important;position:static!important}.mobile-mode #budgetList{display:block!important}.mobile-mode #budgetList>article{width:100%!important;margin-bottom:12px;border-radius:14px;background:#ffffffdf!important;padding:16px!important}.mobile-mode #budgetSummaryStrip{background:#ffffffd9!important;border-radius:14px;padding:16px!important}.mobile-mode #budgetChart{overflow-x:auto;background:#ffffffdf!important;border-radius:14px}.mobile-mode #budgetChart svg{max-width:100%;min-width:0}
.mobile-mode #moneyMapView .money-map-layout,.mobile-mode #moneyMapView .money-map-main{display:block!important}.mobile-mode #moneyMapView .money-map-board-toolbar{display:flex!important;flex-wrap:wrap;gap:12px}.mobile-mode #moneyMapView .money-map-section-tabs{display:flex!important;width:100%;min-width:0;background:#ffffffb8;border-radius:10px;padding:3px}.mobile-mode #moneyMapView .money-map-section-tabs button{flex:1;min-width:0;font-size:12px;min-height:44px;padding:5px;white-space:normal}.mobile-mode #moneyMapShowAll,.mobile-mode #moneyMapFocusTip{display:none!important}
.mobile-mode #moneyMapTabMap{display:none!important}.mobile-mode #moneyMapView.mobile-show-map #moneyMapTabMap{display:block!important;overflow:auto;max-height:58dvh}.mobile-mode #moneyMapView.mobile-show-map #moneyPointList{min-width:700px!important;min-height:500px!important}.mobile-mode .mobile-map-toggle{display:block;width:100%;margin-top:12px}.mobile-mode .mobile-map-toggle[hidden]{display:none}.mobile-mode #moneyPointDetails{display:none!important}
.mobile-mode #moneyPointRegistry{display:flex!important;flex-direction:column;gap:12px!important}.mobile-mode #moneyPointRegistry>*{min-width:0!important;width:100%!important;border-radius:14px!important;border:1px solid #fff!important;background:#ffffffe0!important;box-shadow:none!important;padding:16px 18px!important}.mobile-mode .mobile-account-balance{display:block;padding:8px 0 18px}.mobile-mode .mobile-account-balance span{display:block;font-size:12px;color:#426e86}.mobile-mode .mobile-account-balance strong{font-size:28px}
.mobile-mode .approved-pay-grid,.mobile-mode .approved-payment-grid,.mobile-mode .approved-flow-grid,.mobile-mode .approved-detail-grid,.mobile-mode .approved-flow-stats{grid-template-columns:minmax(0,1fr)!important}.mobile-mode .approved-flow-row{flex-wrap:wrap;gap:10px}.mobile-mode .approved-flow-path{flex:1 1 100%;min-width:0}.mobile-mode .approved-flow-amount{margin-left:auto}.mobile-mode .approved-pay-group{min-width:0}
.mobile-mode #settingsView .settings-b-layout{display:block!important;max-width:none!important}.mobile-mode #settingsView .settings-b-heading{display:none}.mobile-mode #settingsView .settings-b-section{display:block!important;margin:0 0 22px!important;padding:0!important;border:0!important;background:transparent!important}.mobile-mode #settingsView .settings-b-section>header{padding:0 0 12px!important;width:auto!important}.mobile-mode #settingsView .settings-b-section>header h2{margin:0}.mobile-mode #settingsView .settings-b-section>header p{display:none}.mobile-mode #settingsView .settings-b-body{padding:16px!important}.mobile-mode #settingsView .settings-summary{gap:12px;flex-wrap:wrap}.mobile-mode #settingsView .settings-editor-inner{padding:18px 0 0!important}.mobile-mode #settingsView .settings-summary p{font-size:12px;line-height:1.7}.mobile-mode #settingsView .settings-text-button{min-height:44px}.mobile-mode #settingsView .settings-form-actions{display:flex;gap:10px}.mobile-mode #settingsView .settings-form-actions button{flex:1}
.mobile-mode #supportView .support-layout,.mobile-mode #supportView .support-user-layout,.mobile-mode #supportView .support-main-layout{display:block!important}.mobile-mode #supportView .support-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}.mobile-mode #supportView .support-faq-panel{margin-top:20px}
.mobile-mode #investmentsView table,.mobile-mode #adminView table{font-size:12px}.mobile-mode #investmentsView .table-wrap,.mobile-mode #adminView .table-wrap{overflow:auto;max-width:100%}.mobile-mode #investmentsView .investment-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}.mobile-mode #investmentsView .investment-header{flex-wrap:wrap}.mobile-mode #investmentsView .investment-header h1{font-size:20px}.mobile-mode #investmentsView #openSecurityModal{display:none}
.mobile-mode #insightsView .ma-layout,.mobile-mode #insightsView .ma-grid{display:block!important}.mobile-mode #insightsView{overflow-wrap:anywhere}.mobile-mode #insightsView svg{max-width:100%}
.mobile-mode .mobile-more .mobile-brand-panel{display:flex;gap:14px;align-items:center;padding:22px 16px;margin-bottom:22px;background:#ffffffb8;border:1px solid #fff;border-radius:16px}.mobile-mode .mobile-brand-panel img{width:48px;height:48px;border-radius:12px}.mobile-mode .mobile-brand-panel strong{font-size:23px}.mobile-mode .mobile-brand-panel p{font-size:12px;color:#315e75;line-height:1.7;margin:7px 0 0}
.mobile-mode .mobile-menu-list{background:#ffffffdc;border:1px solid #fff;border-radius:14px;padding:0 14px}.mobile-mode .mobile-menu-list button{display:flex;align-items:center;gap:14px;width:100%;min-height:80px;border:0;border-bottom:1px solid #cee3ed;background:transparent;text-align:left;color:#12344a;padding:14px 0;font:inherit}.mobile-mode .mobile-menu-list button:last-child{border-bottom:0}.mobile-mode .mobile-menu-list button[hidden]{display:none}.mobile-mode .mobile-menu-list button span{flex:1}.mobile-mode .mobile-menu-list strong{font-size:15px;display:block}.mobile-mode .mobile-menu-list small{font-size:12px;color:#52778a;display:block;margin-top:7px}.mobile-mode .mobile-menu-list svg{width:21px;height:21px;flex-shrink:0;color:#1683c3}.mobile-mode .mobile-menu-list button>svg:last-child{width:16px}
.mobile-mode .modal-backdrop:not([hidden]){padding:0!important;align-items:stretch!important;z-index:150!important;background:#72bfe0!important}.mobile-mode .modal-backdrop>.goal-modal,.mobile-mode .modal-backdrop>.panel,.mobile-mode .modal-backdrop>form,.mobile-mode .modal-backdrop>.transaction-modal{width:100%!important;max-width:620px!important;height:100dvh!important;max-height:100dvh!important;margin:0 auto!important;border:0!important;border-radius:0!important;background:#72bfe0 url('/assets/login-intro-background.png') center/cover no-repeat!important;padding:calc(22px + env(safe-area-inset-top,0px)) 20px calc(22px + env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;box-shadow:none!important;transform:none!important;animation:none!important}
.mobile-mode .modal-backdrop label{color:#204e65!important;font-size:13px!important}.mobile-mode .modal-backdrop input,.mobile-mode .modal-backdrop select,.mobile-mode .modal-backdrop textarea{background:#ffffffe8!important;border:1px solid #fff!important}.mobile-mode .modal-backdrop .modal-actions,.mobile-mode .modal-backdrop .transaction-modal-actions,.mobile-mode .modal-backdrop .budget-modal-actions{position:sticky;bottom:calc(-22px - env(safe-area-inset-bottom,0px));background:#d8f0faf5!important;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px))!important;display:flex;gap:10px;z-index:3}.mobile-mode .modal-backdrop .modal-actions>button,.mobile-mode .modal-backdrop .transaction-modal-actions>button{flex:1;min-width:0}
.mobile-mode .transaction-form-row,.mobile-mode .money-flow-point-selects,.mobile-mode .budget-form-grid{grid-template-columns:minmax(0,1fr)!important}.mobile-mode .transaction-type-choices{display:flex!important;gap:4px}.mobile-mode .transaction-type-choices button{flex:1;min-width:0;font-size:12px;padding:8px 3px;min-height:44px}.mobile-mode .modal-backdrop h2{font-size:21px!important}.mobile-mode .modal-backdrop .modal-heading p,.mobile-mode .modal-backdrop .transaction-modal-heading p{font-size:12px;color:#315e75}
.mobile-mode body:has(.modal-backdrop:not([hidden])) .mobile-bottom-nav{visibility:hidden}.mobile-mode body:has(dialog[open]) .mobile-bottom-nav{visibility:hidden}
.mobile-mode #loginScene{min-height:100dvh;padding:0!important;background:transparent!important}.mobile-mode .login-shell{display:block!important;width:100%!important;max-width:480px!important;margin:auto!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}.mobile-mode .login-intro{display:block!important;min-height:260px!important;padding:calc(30px + env(safe-area-inset-top,0px)) 25px 28px!important;background:transparent!important;border-radius:0!important}.mobile-mode .login-intro-orbs{display:none!important}.mobile-mode .login-brand-lockup img{width:52px;height:52px}.mobile-mode .login-brand-lockup strong{font-size:23px}.mobile-mode .login-intro-copy{margin:25px 0 0!important}.mobile-mode .login-intro-copy h2{font-size:28px!important;line-height:1.3;margin:0!important}.mobile-mode .login-intro-copy .login-kicker,.mobile-mode .login-intro-copy p,.mobile-mode .login-intro-feature{display:none!important}.mobile-mode .login-card{padding:28px 25px calc(28px + env(safe-area-inset-bottom,0px))!important;border-radius:25px 25px 0 0!important;background:#fffffff2!important;box-shadow:none!important}.mobile-mode .login-card h1{font-size:23px!important}.mobile-mode .login-card-heading .login-kicker{display:none}.mobile-mode .login-card-description{font-size:13px}.mobile-mode .login-submit-button{min-height:50px!important}
.mobile-mode #bottomAdBanner{position:static!important;margin:0 20px calc(var(--mobile-bottom) + 12px)!important;max-width:calc(100% - 40px)}.mobile-mode #openHelpGuide{bottom:calc(var(--mobile-bottom) + 12px)!important;right:12px!important}
.mobile-scope-loading #appShell{visibility:hidden!important}.mobile-scope-loading body::after{content:'가계부를 불러오는 중입니다…';position:fixed;inset:0;display:grid;place-items:center;color:#12344a;font-size:16px}
/* Action buttons sit directly on the shared page background. */
.mobile-mode .modal-backdrop .modal-actions,.mobile-mode .modal-backdrop .transaction-modal-actions,.mobile-mode .modal-backdrop .budget-modal-actions,.mobile-mode .modal-backdrop .account-form-actions{background:transparent!important;border:0!important;box-shadow:none!important}
.signup-app-icon{background:transparent!important;box-shadow:none!important;padding:0!important}
.signup-app-icon img{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}
/* Reset desktop tracks and container-query placement together on mobile. */
.mobile-mode #dashboardView .dashboard-budget-row{width:100%;min-width:0;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'label ratio' 'meter meter' 'amount amount';gap:10px 12px}
.mobile-mode #dashboardView .dashboard-budget-copy{grid-area:label;min-width:0}
.mobile-mode #dashboardView .dashboard-budget-ratio{grid-area:ratio;min-width:0;text-align:right}
.mobile-mode #dashboardView .dashboard-budget-meter{grid-area:meter;min-width:0;width:100%;max-width:100%;overflow:hidden}
.mobile-mode #dashboardView .dashboard-budget-amounts{grid-area:amount;min-width:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;text-align:left}
.mobile-mode #dashboardView .dashboard-budget-footer{flex-wrap:wrap;gap:8px}
.mobile-mode #transactionsView .transaction-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;margin:0 0 16px;border:0;border-radius:0;background:transparent;overflow:visible;min-width:0;width:100%}
.mobile-mode #transactionsView .transaction-overview-card,
.mobile-mode #transactionsView .transaction-overview-card.net.login-gradient-card{display:flex;align-items:center;width:100%;min-width:0;min-height:96px;margin:0;padding:14px!important;background:#ffffffe0!important;border:1px solid #fff!important;border-radius:12px!important;box-shadow:none!important;transform:none!important}
.mobile-mode #transactionsView .transaction-overview-card[aria-pressed=true]{border-color:#1683c3!important}
.mobile-mode #transactionsView .transaction-overview-card::before,.mobile-mode #transactionsView .transaction-overview-card::after{display:none!important}
.mobile-mode #transactionsView .transaction-overview-card>div{width:100%;min-width:0;gap:7px}
.mobile-mode #transactionsView .transaction-overview-card>div>strong{font-size:16px!important;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.mobile-mode #transactionForm{display:flex!important;flex-direction:column;gap:16px;align-items:stretch}
.mobile-mode #transactionForm>*{flex-shrink:0}
.mobile-mode #transactionTypeChoices{flex:0 0 auto;min-height:48px;overflow:visible;gap:0;border-radius:10px}
.mobile-mode #transactionTypeChoices button{min-height:48px;line-height:1.3}
.mobile-mode #transactionTypeChoices button:first-child{border-radius:10px 0 0 10px}
.mobile-mode #transactionTypeChoices button:last-child{border-radius:0 10px 10px 0}
/* Keep creation actions explicit on their own screens instead of reusing the header plus. */
.mobile-mode #appShell:has(#budgetsView.active-view) .topbar-actions>#headerPrimaryAction:not([hidden]),
.mobile-mode #appShell .topbar-actions>#moneyMapAddButton:not([hidden]),
.mobile-mode #appShell .topbar-actions>#supportCreateButton:not([hidden]){display:flex!important;justify-content:center;width:100%;min-height:48px}
.mobile-mode #investmentsView #openSecurityModal{display:inline-flex!important;min-height:48px}
.mobile-mode #monthlyAnalysis .ma-categories{margin-top:16px;padding:18px 16px;background:#ffffffe0;border:1px solid #fff;border-radius:14px;min-width:0}
.mobile-mode #monthlyAnalysis .ma-categories h3{font-size:17px;margin-bottom:8px}
.mobile-mode #monthlyAnalysis .ma-category{background:transparent;border-radius:0;padding:16px 0;min-width:0;grid-template-columns:minmax(0,1fr) auto 16px;gap:8px}
.mobile-mode #monthlyAnalysis .ma-category small{grid-column:1/3;grid-row:2;text-align:left;line-height:1.5}
.mobile-mode #monthlyAnalysis .ma-category small:empty{display:none}
.mobile-mode #monthlyAnalysis .ma-category svg{grid-column:3;grid-row:1}
.mobile-mode #monthlyAnalysis .ma-category:hover{background:#e7f4fb}
.mobile-mode #monthlyAnalysis .ma-budget-alert{padding:16px 0;line-height:1.5;gap:8px}
.mobile-mode #monthlyAnalysis .ma-budget-alert svg{flex-shrink:0}
.mobile-mode #monthlyAnalysis .ma-all-link{display:flex;justify-content:center;width:100%;min-height:44px;margin-top:8px;border-radius:9px;background:#e6f3fb}
.mobile-mode #insightsView>.ma-legacy{margin-top:16px;border:1px solid #fff;border-radius:14px;background:#ffffffe0;padding:0 16px}
.mobile-mode #insightsView>.ma-legacy>summary{min-height:56px;color:#315e75}
.mobile-mode .approved-payment-detail{padding:16px 12px;background:#f7fcff}
.mobile-mode .approved-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-bottom:24px}
.mobile-mode .approved-detail-stats>div{min-width:0;display:flex;flex-direction:column;gap:8px;padding:0;border:0;border-radius:0;background:transparent}
.mobile-mode .approved-detail-stats>div:first-child{grid-column:1/-1;padding-bottom:16px;border-bottom:1px solid #d8e9f2}
.mobile-mode .approved-detail-stats small{color:#52738a;font-size:12px;line-height:1.5;word-break:keep-all}
.mobile-mode .approved-detail-stats strong{font-size:16px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.mobile-mode .approved-payment-detail .approved-history>div{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:16px 0}
.mobile-mode .approved-payment-detail .approved-history>div>span:nth-child(2){text-align:right}
.mobile-mode .approved-payment-detail .approved-history>div>span:nth-child(3){grid-column:1/-1;font-size:13px;line-height:1.6}
.mobile-mode .approved-payment-detail .approved-history>div>strong{grid-column:1;text-align:left;font-size:15px}
.mobile-mode .approved-payment-detail .approved-history .history-actions{grid-column:2;display:flex;gap:6px;justify-content:flex-end}
.mobile-mode .approved-payment-detail .history-actions button{min-height:40px}

/* Mobile audit: one page gutter, compact summaries and unobstructed controls. */
.mobile-mode body{overflow-x:clip}
.mobile-mode #appShell{overflow:visible!important}
.mobile-mode #appShell>main.content{padding-left:16px!important;padding-right:16px!important}
.mobile-mode .mobile-app-bar{min-height:calc(60px + env(safe-area-inset-top,0px));padding-left:12px;padding-right:12px}
.mobile-mode #appShell .topbar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(165px,1.3fr);gap:8px!important;padding:12px 0!important}
.mobile-mode #appShell .topbar-copy{min-width:0;grid-column:1;grid-row:1}
.mobile-mode .mobile-scope-button{font-size:12px;min-height:44px;white-space:nowrap}
.mobile-mode #appShell .month-control{min-width:0;height:44px;gap:0;grid-column:2!important;grid-row:1!important}
.mobile-mode #appShell .month-control strong{font-size:13px;white-space:nowrap}
.mobile-mode #appShell .month-control button{width:36px;min-width:36px;padding:6px}
.mobile-mode #appShell .topbar-actions>button{grid-column:1/-1}
.mobile-mode #appShell .panel{padding:16px!important}
.mobile-mode #appShell .dashboard-hero-card{padding:18px 16px!important;gap:14px}
.mobile-mode #dashboardView .dashboard-hero-flow{margin-top:0;padding:12px 0 0!important;border-top:1px solid #c9e5ef;border-radius:0!important;background:transparent!important}
.mobile-mode .mobile-dashboard-quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 14px}
.mobile-mode .mobile-dashboard-quick-actions button{display:grid;justify-items:center;align-content:center;gap:8px;min-width:0;min-height:78px;padding:10px 5px;border:1px solid #fff;border-radius:14px;background:#ffffffe6;color:#143b55;font-size:12px;font-weight:850;box-shadow:0 5px 16px #29678312}
.mobile-mode .mobile-dashboard-quick-actions button:active{transform:translateY(1px)}
.mobile-mode .mobile-dashboard-quick-actions svg{width:21px;height:21px;color:#1683c3}
.mobile-mode .mobile-save-result{position:fixed;z-index:190;left:16px;right:16px;bottom:calc(var(--mobile-bottom) + 14px);display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;max-width:520px;margin:0 auto;padding:13px 44px 13px 13px;border:1px solid #fff;border-radius:16px;background:#f7fcfff5;color:#12344a;box-shadow:0 16px 40px #174c6938;opacity:0;translate:0 16px;transition:opacity .22s ease,translate .22s cubic-bezier(.22,1,.36,1);backdrop-filter:blur(16px)}
.mobile-mode .mobile-save-result.is-visible{opacity:1;translate:0 0}
.mobile-mode .mobile-save-result[hidden]{display:none!important}
.mobile-mode .mobile-save-result-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#37b6d5,#1683c3);color:#fff}
.mobile-mode .mobile-save-result-icon svg{width:21px;height:21px;stroke-width:3}
.mobile-mode .mobile-save-result-copy{display:grid;gap:3px;min-width:0}
.mobile-mode .mobile-save-result-copy strong{font-size:14px;line-height:1.35}
.mobile-mode .mobile-save-result-copy small{color:#52738a;font-size:11px;line-height:1.45;white-space:normal}
.mobile-mode .mobile-save-result-actions{display:flex;align-items:center;gap:6px}
.mobile-mode .mobile-save-result-actions button{min-height:38px;padding:7px 10px;border:0;border-radius:10px;background:#e2f3fa;color:#12628e;font-size:11px;font-weight:850;white-space:nowrap}
.mobile-mode .mobile-save-result-actions [data-save-result-view]{background:linear-gradient(135deg,#37b6d5,#1683c3);color:#fff}
.mobile-mode .mobile-save-result-close{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:transparent;color:#6c8798}
.mobile-mode .mobile-save-result-close svg{width:17px;height:17px}
@media(max-width:390px){.mobile-mode .mobile-save-result{grid-template-columns:36px minmax(0,1fr);padding:12px 40px 12px 12px}.mobile-mode .mobile-save-result-icon{width:36px;height:36px}.mobile-mode .mobile-save-result-actions{grid-column:1/-1}.mobile-mode .mobile-save-result-actions button{flex:1}}
@media(prefers-reduced-motion:reduce){.mobile-mode .mobile-save-result{transition:none}}
.mobile-mode #openHelpGuide{display:none!important}
.mobile-mode #helpGuidePanel{position:fixed;inset:calc(12px + env(safe-area-inset-top,0px)) 12px calc(var(--mobile-bottom) + 12px);width:auto;max-width:none;max-height:none;overflow:auto;z-index:160}
.mobile-mode #transactionsView .transaction-overview-card{min-height:80px}
.mobile-mode #transactionsView .transaction-command-bar{gap:8px!important;padding:10px!important}
.mobile-mode #transactionsView .transaction-view-controls button{width:auto;flex:1}
.mobile-mode #transactionsView .calendar-panel{padding:10px!important}
.mobile-mode #transactionsView .calendar-day-header{gap:0;justify-content:center;min-height:24px}
.mobile-mode #transactionsView .calendar-day-number{white-space:nowrap;font-size:12px!important;flex-shrink:0;display:block}
.mobile-mode #transactionsView .calendar-day-status{display:none}
.mobile-mode #transactionsView .calendar-day-add{display:none}
.mobile-mode #transactionsView .calendar-day{min-height:76px!important}
.mobile-mode #transactionsView .calendar-totals>span{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-mode #appShell #moneyMapView .money-map-workspace,
.mobile-mode #appShell #moneyMapView .money-point-registry-panel{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.mobile-mode #moneyMapView .money-map-board-toolbar{padding:0!important;gap:8px;margin-bottom:12px}
.mobile-mode #moneyMapView .money-map-section-tabs{padding:3px;gap:0}
.mobile-mode #moneyMapView .money-map-section-tabs button{font-size:12px;white-space:nowrap;padding:4px}
.mobile-mode .mobile-map-toggle{margin:0 0 12px;min-height:44px}
.mobile-mode .mobile-account-balance{padding:8px 0 12px}
.mobile-mode .mobile-connect{margin:0 0 16px}
.mobile-mode #moneyMapView .money-point-registry-panel .panel-heading{margin:0 0 12px;padding:0;justify-content:flex-start}
.mobile-mode #moneyMapView .money-point-registry-guide{display:none}
.mobile-mode #moneyMapView .approved-flow-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
.mobile-mode #moneyMapView .approved-flow-stats>div{padding:14px;background:#ffffffe0;border-color:#fff}
.mobile-mode #moneyMapView .approved-flow-stats>div:last-child{grid-column:1/-1}
.mobile-mode #moneyMapView .approved-flow-stats strong{overflow-wrap:anywhere;line-height:1.5}
.mobile-mode #appShell #budgetsView .budget-overview-panel{padding:0!important;background:transparent!important;border:0!important;display:block}
.mobile-mode #budgetsView .budget-board-toolbar{padding:0;margin-bottom:12px;background:transparent;border:0}
.mobile-mode #budgetsView .budget-board-tabs{width:100%;display:flex;align-items:stretch;min-height:48px;padding:0;border:0;border-radius:12px;overflow:hidden;gap:0}
.mobile-mode #budgetsView .budget-board-tab{flex:1;min-width:0;min-height:48px;margin:0;border:0;border-radius:0;box-shadow:none;transform:none}
.mobile-mode #budgetsView .budget-board-tab:hover{transform:none}
.mobile-mode #budgetsView .budget-board-tab.active{border:0;box-shadow:none}
.mobile-mode #budgetsView #budgetSummaryStrip{margin:0 0 16px;padding:16px!important}
.mobile-mode #budgetsView .budget-summary-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mobile-mode #budgetsView .budget-summary-metrics article{padding:8px 0;min-height:64px;border:0;justify-items:start;gap:8px}
.mobile-mode #budgetsView .budget-summary-metrics article strong{font-size:20px;overflow-wrap:anywhere}
.mobile-mode #budgetsView .budget-summary-metrics article span{font-size:12px}
.mobile-mode #budgetsView .budget-summary-ring{width:72px;height:72px;grid-column:auto}
.mobile-mode #budgetsView .budget-summary-ring strong{font-size:18px}
.mobile-mode #budgetsView .budget-summary-ring::after{inset:8px}
.mobile-mode #budgetsView #budgetChart{margin:0 0 16px;padding:14px!important}
.mobile-mode #budgetsView .budget-chart-title{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:0;padding:0 0 12px;margin:0}
.mobile-mode #budgetsView .budget-chart-title>div:first-child{grid-column:1;order:0;width:auto;text-align:left}
.mobile-mode #budgetsView .budget-chart-title strong{font-size:15px}
.mobile-mode #budgetsView .budget-chart-title .budget-graph-action{grid-column:2;grid-row:1;order:0;width:auto;min-width:0;min-height:44px;height:auto;margin:0;padding:8px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px}
.mobile-mode #budgetsView .budget-chart-legend{grid-column:1/-1;order:0;justify-content:flex-start}
.mobile-mode #budgetDetailView .budget-analysis-summary{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:12px}
.mobile-mode #budgetDetailView .budget-analysis-metric{padding:8px 0;border:0;min-width:0;justify-items:start}
.mobile-mode #budgetDetailView .budget-analysis-metric strong{font-size:18px;overflow-wrap:anywhere}
.mobile-mode #investmentsView .investment-page-header>div:first-child,
.mobile-mode #investmentsView #investmentMonthLabel{display:none}
.mobile-mode #investmentsView .investment-page-header{margin:0 0 16px;display:block}
.mobile-mode #investmentsView .investment-header-actions{width:100%}
.mobile-mode #investmentsView #openSecurityModal{width:100%;justify-content:center}
.mobile-mode #investmentsView .investment-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mobile-mode #investmentsView .investment-summary-card{min-width:0;padding:16px 12px;border-radius:14px;background:#ffffffe0;border:1px solid #fff;box-shadow:none;color:#12344a}
.mobile-mode #investmentsView .investment-summary-card strong{font-size:24px;color:#12344a;overflow-wrap:anywhere}
.mobile-mode #investmentsView .investment-summary-card span,.mobile-mode #investmentsView .investment-summary-card small{color:#52738a;font-size:11px;line-height:1.5}
.mobile-mode #investmentsView .investment-analytics-grid{grid-template-columns:minmax(0,1fr)}
.mobile-mode #investmentsView .investment-table-tools{width:100%;display:flex;flex-wrap:wrap;gap:8px}
.mobile-mode #investmentsView .investment-table-tools>*{width:100%;min-width:0}
.mobile-mode #settingsView .settings-summary>div{min-width:0;overflow-wrap:anywhere}
.mobile-mode #settingsView .settings-text-button{flex-shrink:0}
.mobile-mode .modal-backdrop .modal-close-button,.mobile-mode .modal-backdrop .icon-button{min-width:44px;min-height:44px;flex-shrink:0}
.mobile-mode #budgetForm.budget-modal-open{inset:0!important;width:100%!important;height:100dvh!important;max-height:100dvh!important;transform:none!important;border:0!important;border-radius:0!important;padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px))!important;background:#72bfe0 url('/assets/login-intro-background.png') center/cover!important;box-shadow:none!important}
.mobile-mode #budgetForm.budget-modal-open>*{flex-shrink:0}
.mobile-mode #budgetForm.budget-modal-open .budget-modal-actions{display:flex;gap:10px;position:sticky;bottom:-20px;margin-top:auto;padding:12px 0;background:transparent;border:0}
.mobile-mode #budgetForm.budget-modal-open .budget-modal-actions button{flex:1;min-height:48px}
.mobile-mode #budgetForm.budget-modal-open #closeBudgetModal{min-width:44px;min-height:44px}
.mobile-mode body:has(#budgetForm.budget-modal-open) .mobile-bottom-nav{visibility:hidden}
html.mobile-mode:has(#budgetForm.budget-modal-open),.mobile-mode body:has(#budgetForm.budget-modal-open){overflow:hidden!important}
.mobile-mode #budgetDetailView .budget-analysis-header-actions button{padding:8px 6px;font-size:12px;gap:4px}
.mobile-mode #budgetDetailView .budget-analysis-header-actions button svg{width:16px;height:16px;flex-shrink:0}
.mobile-mode #appShell p,.mobile-mode #appShell small{word-break:keep-all;overflow-wrap:anywhere}
.mobile-mode #monthlyAnalysis .ma-heading>span{color:#315e75}
.mobile-mode #insightsView>.ma-legacy{padding:0;border:0;background:transparent}
.mobile-mode #insightsView>.ma-legacy>summary{padding:16px;background:#ffffffe0;border:1px solid #fff;border-radius:14px}
.mobile-mode #appShell #insightsView .insight-more-panel{padding:0!important;background:transparent!important;border:0!important}
.mobile-mode #insightsView .insight-more-panel>summary{padding:14px 0}
.mobile-mode #insightsView .insight-more-content,.mobile-mode #insightsView .insight-evidence-content{padding:0}
.mobile-mode #insightsView .insight-detail-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.mobile-mode #insightsView .insight-detail-section{padding:16px;min-width:0;background:#ffffffe0;border-radius:14px}
.mobile-mode #insightsView .insight-badge-panel>summary,.mobile-mode #insightsView .insight-evidence-panel>summary{padding:8px 0}
.mobile-mode #appShell [role=button],.mobile-mode #appShell input,.mobile-mode #appShell select{scroll-margin-top:76px}
.mobile-mode #helpGuide{z-index:200}
.mobile-mode button{word-break:keep-all}
.mobile-mode #settingsView .settings-form-actions button{padding:10px 8px;font-size:13px;white-space:normal}
.mobile-mode #closeHelpGuide{min-width:44px;min-height:44px;flex-shrink:0}
html.mobile-mode:has(#helpGuidePanel:not([hidden])),.mobile-mode body:has(#helpGuidePanel:not([hidden])){overflow:hidden!important}
.mobile-mode .modal-backdrop .modal-actions{margin-left:0!important;margin-right:0!important;width:100%;max-width:100%}
.mobile-mode .modal-backdrop p,.mobile-mode .modal-backdrop small{word-break:keep-all;overflow-wrap:anywhere}
.mobile-mode .modal-backdrop .modal-actions,
.mobile-mode .modal-backdrop .transaction-modal-actions,
.mobile-mode .modal-backdrop .budget-modal-actions,
.mobile-mode .modal-backdrop .account-form-actions,
.mobile-mode #budgetForm.budget-modal-open .budget-modal-actions{position:static!important;margin-top:16px;flex-shrink:0}
.mobile-mode #supportView .support-summary-card{padding:14px 12px;gap:8px;min-width:0}
.mobile-mode #supportView .support-summary-icon{display:none}
.mobile-mode #supportView .support-summary-card>div>span{white-space:normal;overflow:visible;text-overflow:clip;font-size:12px}
.mobile-mode #supportView .support-section-heading>div{min-width:0;flex:1}
.mobile-mode #supportTicketCount{white-space:nowrap;flex-shrink:0}
.mobile-mode #supportView .support-filter-tabs{display:flex;gap:0;padding:3px;overflow:visible;min-width:0}
.mobile-mode #supportView .support-filter-tabs button{flex:1;min-width:0;padding:8px 4px;min-height:44px;font-size:12px;white-space:nowrap}
/* Full-screen detail dialogs use one heading row and a single content gutter. */
.mobile-mode .info-tooltip::after{display:none!important}
.mobile-info-popover{position:fixed;inset:auto;margin:0;width:max-content;max-width:min(290px,calc(100vw - 24px));padding:12px 14px;border:0;border-radius:12px;background:#12344a;color:#fff;font-size:13px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere;box-shadow:0 8px 24px #12344a26;z-index:300;pointer-events:none}
.mobile-info-popover[hidden]{display:none}
.mobile-mode #transactionsView .transaction-type-filter-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mobile-mode #transactionsView .transaction-type-filter-pills button{width:100%;min-width:0;min-height:44px;margin:0;padding:8px 4px;font-size:12px;white-space:nowrap}
.mobile-mode #transactionsView .transaction-type-filter-pills button.active::before{display:none}
.mobile-mode #transactionsView .transaction-detail-filters{width:100%;max-width:none;box-sizing:border-box}
.mobile-mode #appShell .modal-backdrop>.transaction-excel-modal,
.mobile-mode #appShell .modal-backdrop>.transaction-export-modal{display:flex;flex-direction:column;gap:16px;justify-content:flex-start;padding:calc(22px + env(safe-area-inset-top,0px)) 20px calc(22px + env(safe-area-inset-bottom,0px))!important;border:0!important;border-radius:0!important;background:#72bfe0 url('/assets/login-intro-background.png') center/cover!important}
.mobile-mode .transaction-excel-modal>*,.mobile-mode .transaction-export-modal>*{flex-shrink:0}
.mobile-mode #appShell .transaction-excel-modal>.panel-heading,
.mobile-mode #appShell .transaction-export-modal>.panel-heading{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;gap:12px!important;margin:0;padding:0;text-align:left}
.mobile-mode .transaction-excel-modal .panel-heading h2,.mobile-mode .transaction-export-modal .panel-heading h2{margin:0 0 6px}
.mobile-mode .transaction-excel-modal .panel-heading span,.mobile-mode .transaction-export-modal .panel-heading span{font-size:12px;line-height:1.6;display:block;word-break:keep-all}
.mobile-mode .transaction-excel-modal .modal-close-button,.mobile-mode .transaction-export-modal .modal-close-button{position:static}
.mobile-mode .transaction-excel-step{align-content:start;gap:12px;padding:8px 0 16px}
.mobile-mode .transaction-excel-step>.secondary-button{width:100%;justify-content:center}
.mobile-mode .transaction-excel-dropzone{padding:18px 12px;min-height:108px}
.mobile-mode .transaction-excel-dropzone>svg{flex-shrink:0}
.mobile-mode .transaction-excel-dropzone>span{min-width:0;word-break:keep-all;line-height:1.7}
.mobile-mode .transaction-excel-actions,.mobile-mode .transaction-export-actions{display:flex;gap:10px;margin-top:8px;padding:0}
.mobile-mode .transaction-excel-actions button,.mobile-mode .transaction-export-actions button{flex:1;min-width:0;min-height:48px;max-height:64px;padding:12px 8px;font-size:14px;line-height:1.4}
.mobile-mode .transaction-export-summary{display:flex;flex-wrap:wrap;gap:10px;padding:16px;background:#ffffffe0;border-radius:12px}
.mobile-mode .transaction-export-file{margin:0;padding:16px;background:#ffffffe0;min-width:0}
.mobile-mode .transaction-export-file strong{overflow-wrap:anywhere;min-width:0;font-size:13px}
.mobile-mode .transaction-export-file svg{flex-shrink:0;width:24px}
.mobile-mode #appShell .modal-backdrop>.transaction-excel-modal{display:flex!important}
.mobile-mode .excel-import-status:empty{display:none}
.mobile-mode #budgetDeleteModal:not([hidden]){align-items:center!important;justify-content:center;padding:20px!important;background:#12344a66!important}
.mobile-mode #appShell #budgetDeleteModal>.budget-confirm-modal{width:100%!important;max-width:380px!important;height:auto!important;max-height:calc(100dvh - 40px)!important;padding:24px 20px!important;border:1px solid #fff!important;border-radius:18px!important;background:#eff9ff!important;margin:0!important}
.mobile-mode #budgetDeleteModal h2{font-size:19px!important;line-height:1.5}
.mobile-mode #budgetDeleteModal .budget-confirm-actions{gap:10px}
.mobile-mode #budgetDeleteModal .budget-confirm-actions button{min-width:0;min-height:48px;font-size:14px;padding:10px 6px}
.mobile-mode #budgetForm.budget-modal-open .budget-edit-preview{display:grid!important;grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}
.mobile-mode #budgetForm.budget-modal-open .budget-edit-preview[hidden]{display:none!important}
.mobile-mode #budgetForm .budget-edit-preview-copy{display:grid;gap:4px;min-width:0}
.mobile-mode #budgetForm .budget-edit-preview-copy span{font-size:12px;line-height:1.5;word-break:keep-all}
.mobile-mode #budgetForm .budget-edit-preview-metric{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;text-align:left;min-width:0}
.mobile-mode #budgetForm .budget-edit-preview-metric span{font-size:13px}
.mobile-mode #budgetForm.budget-modal-open .budget-modal-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mobile-mode #budgetForm .budget-modal-actions .budget-delete-button{grid-column:1/-1;width:100%;margin:0}
.mobile-mode #budgetDetailView .budget-analysis-transactions-panel{padding:0;border:0;background:transparent}
.mobile-mode #budgetDetailView .budget-analysis-transactions-heading{display:flex;flex-direction:row;justify-content:space-between;padding:0 0 12px;gap:8px}
.mobile-mode #budgetDetailView .budget-analysis-transactions-heading h3{font-size:15px}
.mobile-mode #budgetDetailView .budget-analysis-transactions-heading>div:first-child{flex:1;min-width:0}
.mobile-mode #budgetDetailView .budget-analysis-transactions-heading h3{display:block;white-space:normal;word-break:keep-all}
.mobile-mode #budgetDetailView .budget-analysis-transactions-tools{width:auto;flex:0 0 auto;white-space:nowrap}
.mobile-mode #budgetDetailView .budget-analysis-table{overflow:visible}
.mobile-mode #budgetDetailView .budget-analysis-table-columns{display:none}
.mobile-mode #budgetDetailView .budget-analysis-date-group h4{padding:12px 0;background:transparent}
.mobile-mode #budgetDetailView .budget-analysis-table-row{min-width:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:14px 0}
.mobile-mode #budgetDetailView .budget-analysis-table-row>*{min-width:0;white-space:normal;overflow-wrap:anywhere}
.mobile-mode #budgetDetailView .budget-analysis-row-date{display:none}
.mobile-mode #budgetDetailView .budget-analysis-row-category{grid-column:1;grid-row:1;gap:6px}
.mobile-mode #budgetDetailView .budget-analysis-row-icon{display:none}
.mobile-mode #budgetDetailView .budget-analysis-table-row>strong{grid-column:2;grid-row:1;white-space:nowrap}
.mobile-mode #budgetDetailView .budget-analysis-table-row>span:nth-child(3){grid-column:1/-1;grid-row:2;font-size:13px}
.mobile-mode #budgetDetailView .budget-analysis-table-row>span:nth-child(4){grid-column:1/-1;grid-row:3;color:#52738a}
.mobile-mode #budgetDetailView .budget-analysis-table-row>span:nth-child(5){grid-column:1/-1;grid-row:4;color:#52738a}
.mobile-mode #budgetDetailView .budget-analysis-row-actions{grid-column:1/-1;grid-row:5;justify-content:flex-end}
.mobile-mode #budgetDetailView .budget-analysis-row-actions button{min-width:54px;min-height:40px;padding:8px;border:1px solid #d7e8f2;border-radius:8px;background:#fff}
/* A desktop grid must not distribute the full phone height between dialog rows. */
.mobile-mode .modal-backdrop:not([hidden])>.goal-modal,
.mobile-mode .modal-backdrop:not([hidden])>.panel,
.mobile-mode .modal-backdrop:not([hidden])>form,
.mobile-mode .modal-backdrop:not([hidden])>.transaction-modal{display:flex!important;flex-direction:column;justify-content:flex-start;gap:16px}
.mobile-mode .modal-backdrop>.goal-modal>*,
.mobile-mode .modal-backdrop>.panel>*,
.mobile-mode .modal-backdrop>form>*{flex-shrink:0}
.mobile-mode #transactionModal>.transaction-modal{
  padding:0 20px calc(22px + env(safe-area-inset-bottom,0px))!important;
  scroll-padding-top:calc(92px + env(safe-area-inset-top,0px));
}
.mobile-mode #transactionModal .transaction-modal-heading{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:calc(100% + 40px)!important;
  max-width:none!important;
  box-sizing:border-box!important;
  flex-shrink:0!important;
  margin:0 -20px!important;
  padding:calc(18px + env(safe-area-inset-top,0px)) 20px 14px!important;
  border-bottom:1px solid #ffffff70!important;
  background:#76c1e1f2!important;
  backdrop-filter:blur(12px)!important;
}
.mobile-mode #transactionModal .transaction-modal-heading>div{min-width:0}
.mobile-mode #transactionModal .transaction-modal-heading h2{margin-top:0!important}
.mobile-mode #appShell .modal-backdrop>.panel{padding:calc(22px + env(safe-area-inset-top,0px)) 20px calc(22px + env(safe-area-inset-bottom,0px))!important;border:0!important;border-radius:0!important;background:#72bfe0 url('/assets/login-intro-background.png') center/cover!important}
.mobile-mode #moneyPointConnectionModal .modal-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.mobile-mode #moneyPointConnectionModal .modal-actions button{min-height:48px;padding:12px}
.mobile-mode .approved-segments{gap:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:#fff}
.mobile-mode .approved-segments button{min-width:0;min-height:48px;margin:0;padding:8px 4px;border:0;border-radius:0;box-shadow:none;transform:none;font-size:12px}
.mobile-mode .approved-segments button.active,.mobile-mode .approved-segments button[aria-pressed=true]{background:#0878af;color:#fff;border:0;box-shadow:none}
.mobile-mode #monthlyAnalysisDialog .ma-all-total{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:18px}
.mobile-mode #monthlyAnalysisDialog .ma-all-total strong{font-size:26px;white-space:nowrap}
.mobile-mode #monthlyAnalysisDialog .ma-ranked-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.mobile-mode #monthlyAnalysisDialog .ma-ranked-line>span:first-child{min-width:0;word-break:keep-all}
.mobile-mode #monthlyAnalysisDialog .ma-ranked-line>span:last-child{display:grid;grid-template-columns:auto auto;gap:4px 8px}
.mobile-mode #monthlyAnalysisDialog .ma-ranked-line strong{grid-column:1;grid-row:1;white-space:nowrap}
.mobile-mode #monthlyAnalysisDialog .ma-ranked-line small{grid-column:1;grid-row:2;text-align:right}
.mobile-mode #monthlyAnalysisDialog .ma-ranked-line b{grid-column:2;grid-row:1/3;align-self:center}
.mobile-mode #supportView .support-faq-list summary{grid-template-columns:24px minmax(0,1fr) 16px;gap:8px;padding:14px 12px}
.mobile-mode #supportView .support-faq-list summary strong{word-break:keep-all;overflow-wrap:anywhere;line-height:1.6}
.mobile-mode #supportView .support-faq-list details p{margin:0;padding:0 12px 16px 44px;font-size:13px;line-height:1.7}
.mobile-mode #transactionsView .calendar-weekdays,.mobile-mode #transactionsView .transaction-calendar{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;min-width:0;width:100%}
.mobile-mode #transactionsView .calendar-day{min-width:0;padding:4px 2px;overflow:hidden}
.mobile-mode #transactionsView .transaction-command-bar,.mobile-mode #budgetsView .budget-board-toolbar{position:static}
.dashboard-categories-legend{color:#315e75;font-size:12px;line-height:1.5;margin:0 0 16px}
.mobile-mode #dashboardCategoriesList .dashboard-stat-row{border-radius:0}
.mobile-mode #dashboardCategoriesModal .panel-heading{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px;margin:0 0 20px;text-align:left}
.mobile-mode #dashboardCategoriesModal h2{margin:0;min-width:0;font-size:19px!important;line-height:1.4}
.mobile-mode #dashboardCategoriesList{display:grid;gap:0;padding:4px 16px;background:#ffffffe0;border-radius:14px}
.mobile-mode #dashboardCategoriesList .dashboard-stat-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;min-height:88px;padding:16px 0;border:0;border-bottom:1px solid #d9e8f0;background:transparent}
.mobile-mode #dashboardCategoriesList .dashboard-stat-row:last-child{border-bottom:0}
.mobile-mode #dashboardCategoriesList .dashboard-stat-label{grid-column:1;grid-row:1;min-width:0}
.mobile-mode #dashboardCategoriesList .dashboard-stat-amount{grid-column:2;grid-row:1;text-align:right}
.mobile-mode #dashboardCategoriesList .dashboard-stat-track{grid-column:1/-1;grid-row:2;margin:0 6px 0 0;width:auto;min-width:0}
.mobile-mode #recurringTransactionModal .recurring-transaction-modal>.transaction-modal-heading{position:static;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px;padding:0}

/* Touch screens cannot depend on a desktop hover state for row actions. */
.mobile-mode #transactionsView.list-mode .history-item.transaction-history-card.transaction-table-row,
.mobile-mode #transactionsView.list-mode .history-item.transaction-history-card.transaction-table-row:not(.has-selection){
  grid-template-columns:minmax(0,1fr) auto 104px!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  gap:6px 12px!important;
  min-height:72px!important;
  padding:12px 14px!important;
}
.mobile-mode #transactionsView .transaction-table-type{
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  padding-top:1px!important;
  text-align:right!important;
}
.mobile-mode #transactionsView .transaction-table-amount{
  grid-column:3!important;
  grid-row:1!important;
  position:relative!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  min-height:36px!important;
  min-width:104px!important;
  overflow:visible!important;
}
.mobile-mode #transactionsView .transaction-table-amount>strong{
  margin:0!important;
  opacity:1!important;
  font-size:13px!important;
  line-height:1.35!important;
}
.mobile-mode #transactionsView .transaction-row-actions{
  position:absolute!important;
  top:0!important;
  right:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,48px)!important;
  gap:6px!important;
  width:102px!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity 120ms ease!important;
}
.mobile-mode #transactionsView .transaction-table-amount .transaction-row-actions .transaction-row-edit,
.mobile-mode #transactionsView .transaction-table-amount .transaction-row-delete{
  width:48px!important;
  min-width:48px!important;
  min-height:36px!important;
  padding:0!important;
  border-radius:9px!important;
  background:#fffffff2!important;
  font-size:12px!important;
}
.mobile-mode #transactionsView .transaction-table-amount:focus-within .transaction-row-actions,
.mobile-mode #transactionsView .transaction-table-amount.actions-open .transaction-row-actions{
  opacity:1!important;
  pointer-events:auto!important;
}
.mobile-mode #transactionsView .transaction-table-amount:focus-within>strong,
.mobile-mode #transactionsView .transaction-table-amount.actions-open>strong{opacity:0!important}
@media (hover:hover) and (pointer:fine){
  .mobile-mode #transactionsView .transaction-table-amount:hover .transaction-row-actions{
    opacity:1!important;
    pointer-events:auto!important;
  }
  .mobile-mode #transactionsView .transaction-table-amount:hover>strong{opacity:0!important}
}

/* Replace the platform picker with a themed, touch-friendly choice sheet. */
.mobile-select-sheet{
  position:fixed!important;
  inset:auto 0 0!important;
  width:min(100%,520px)!important;
  max-width:none!important;
  max-height:min(78dvh,680px)!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:24px 24px 0 0!important;
  background:#edf8fd!important;
  color:#12344a!important;
  box-shadow:0 -18px 48px #12344a2e!important;
}
.mobile-select-sheet::backdrop{background:#0c304c80;backdrop-filter:blur(2px)}
.mobile-select-sheet>section{display:flex;max-height:min(78dvh,680px);flex-direction:column;padding:8px 14px max(18px,env(safe-area-inset-bottom,0px))}
.mobile-select-handle{width:40px;height:4px;margin:2px auto 12px;border-radius:99px;background:#9fc6d8}
.mobile-select-sheet header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 4px 14px}
.mobile-select-sheet header>div{min-width:0}
.mobile-select-sheet header small{display:block;margin-bottom:3px;color:#50809a;font-size:11px;font-weight:700}
.mobile-select-sheet h2{margin:0;font-size:20px;line-height:1.35;color:#12344a}
.mobile-select-sheet header button{display:grid;place-items:center;width:42px;min-width:42px;height:42px;padding:0;border:1px solid #cfe4ee;border-radius:13px;background:#fff;color:#315e75;box-shadow:none}
.mobile-select-sheet header button svg{width:20px;height:20px}
.mobile-select-options{display:grid;gap:8px;min-height:0;padding:2px 2px 4px;overflow:auto;overscroll-behavior:contain}
.mobile-select-group{display:grid;gap:7px}
.mobile-select-group>p{margin:8px 6px 1px;color:#52738a;font-size:12px;font-weight:800}
.mobile-select-option{display:grid!important;grid-template-columns:minmax(0,1fr) 22px!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:54px!important;margin:0!important;padding:12px 14px!important;border:1px solid #d5e8f1!important;border-radius:14px!important;background:#fffffff2!important;color:#173b52!important;text-align:left!important;box-shadow:0 3px 12px #27566f0a!important;transform:none!important}
.mobile-select-option>span{min-width:0;font-size:14px;font-weight:700;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.mobile-select-option>i{display:block;width:22px;height:22px;box-sizing:border-box;border:2px solid #9ab7c7;border-radius:50%;background:#fff}
.mobile-select-option[aria-selected="true"]{border-color:#49acd4!important;background:#dff3fc!important;color:#075e89!important}
.mobile-select-option[aria-selected="true"]>i{border-color:#138ebf;background:#138ebf;box-shadow:inset 0 0 0 5px #effaff}
.mobile-select-option:disabled{opacity:.48}

.mobile-mode #transactionModal .transaction-modal-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
}
.mobile-mode #transactionModal #transactionEditActions:not([hidden]){
  display:block!important;
  grid-column:1 / -1!important;
  margin:0!important;
}
.mobile-mode #transactionModal #deleteEditingTransaction{
  width:100%!important;
  min-height:44px!important;
  border:1px solid #f0a2a2!important;
  background:#fff5f3!important;
  color:#c93f38!important;
  box-shadow:none!important;
}
.mobile-mode #transactionModal .transaction-modal-actions>button{
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
}
.mobile-mode #transactionModal #transactionSubmitButton{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
}

@media (max-width:340px){
  .mobile-mode #transactionsView.list-mode .history-item.transaction-history-card.transaction-table-row,
  .mobile-mode #transactionsView.list-mode .history-item.transaction-history-card.transaction-table-row:not(.has-selection){
    grid-template-columns:minmax(0,1fr) auto 94px!important;
    column-gap:6px!important;
    padding-right:10px!important;
    padding-left:10px!important;
  }
  .mobile-mode #transactionsView .transaction-table-category .dashboard-row-icon{display:none!important}
  .mobile-mode #transactionsView .transaction-table-amount{min-width:94px!important}
  .mobile-mode #transactionsView .transaction-row-actions{
    grid-template-columns:repeat(2,44px)!important;
    width:94px!important;
  }
  .mobile-mode #transactionsView .transaction-table-amount .transaction-row-actions .transaction-row-edit,
  .mobile-mode #transactionsView .transaction-table-amount .transaction-row-delete{
    width:44px!important;
    min-width:44px!important;
  }
}
.mobile-mode #recurringTransactionModal .transaction-modal-heading>div{display:block;min-width:0}
.mobile-mode #recurringTransactionModal .transaction-modal-heading h2{margin:0}
.mobile-mode #recurringTransactionModal .transaction-modal-heading .modal-eyebrow,
.mobile-mode #recurringTransactionModal .transaction-modal-heading p{display:none}
.mobile-mode #recurringTransactionModal .recurring-rule-list-section,
.mobile-mode #recurringTransactionModal .recurring-rule-form{padding:0;min-height:0;max-height:none;overflow:visible;background:transparent;border:0}
.mobile-mode #recurringTransactionModal .recurring-rule-heading{display:grid;grid-template-columns:minmax(0,1fr);padding:0;gap:16px}
.mobile-mode #recurringTransactionModal .recurring-rule-heading>div>strong{display:none}
.mobile-mode #recurringTransactionModal #newRecurringTransaction{width:100%;justify-content:center}
.mobile-mode #recurringTransactionModal .recurring-rule-form-heading{padding:0;gap:12px}
.mobile-mode #recurringTransactionModal .recurring-rule-form-heading>strong{font-size:18px}
.mobile-mode #recurringTransactionModal .recurring-rule-card{background:#ffffffe0}
.mobile-mode #recurringTransactionModal .recurring-type-tabs{display:flex;align-items:stretch;padding:0;gap:0;border:0;border-radius:12px;overflow:hidden;background:#fff}
.mobile-mode #recurringTransactionModal .recurring-type-tabs button{flex:1;min-width:0;min-height:44px;margin:0;padding:8px 4px;border:0;border-radius:0;box-shadow:none;transform:none;font-size:13px}
.mobile-mode #recurringTransactionModal .recurring-type-tabs button.active{border:0;background:#0878af;color:white}
.mobile-mode #recurringTransactionModal .recurring-form-type-choices{gap:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:#fff}
.mobile-mode #recurringTransactionModal .recurring-form-type-choices button{min-width:0;min-height:44px;margin:0;border:0;border-radius:0;box-shadow:none;transform:none}
.mobile-mode #recurringTransactionModal .recurring-form-type-choices button.active{border:0;background:#0878af;color:white}
.mobile-mode #recurringTransactionModal .recurring-rule-controls{grid-template-columns:minmax(0,1fr);gap:12px}
.mobile-mode #appShell #recurringTransactionModal>.panel{border:0!important}
.mobile-mode #appShell #recurringTransactionModal>.panel{border-radius:0!important;background:#72bfe0 url('/assets/login-intro-background.png') center/cover!important;padding:calc(22px + env(safe-area-inset-top,0px)) 20px calc(22px + env(safe-area-inset-bottom,0px))!important}

/* Mobile account map: readable vertical relationships instead of the desktop canvas. */
.money-mobile-flow-list{display:none}
.mobile-mode #moneyMapView.mobile-show-map #moneyMapTabMap{
  display:block!important;
  max-height:none!important;
  overflow:visible!important;
}
.mobile-mode #moneyMapView.mobile-show-map #moneyPointList{
  min-width:0!important;
  min-height:0!important;
}
.mobile-mode #moneyMapView .money-map-viewport{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overscroll-behavior:auto!important;
  touch-action:pan-y!important;
}
.mobile-mode #moneyMapView .money-map-stage-sizer{
  position:static!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
}
.mobile-mode #moneyMapView .money-map-canvas{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  gap:12px!important;
  overflow:visible!important;
  border-radius:0!important;
  background:transparent!important;
  cursor:default!important;
  touch-action:pan-y!important;
}
.mobile-mode #moneyMapView .money-map-lines,
.mobile-mode #moneyMapView .money-map-line-labels,
.mobile-mode #moneyMapView .money-map-guide,
.mobile-mode #moneyMapView .money-map-mini-map,
.mobile-mode #moneyMapView .money-point-drag-handle,
.mobile-mode #moneyMapView .money-point-resize-handle{
  display:none!important;
}
.mobile-mode #moneyMapView .money-map-canvas .money-map-node,
.mobile-mode #moneyMapView .money-map-canvas .money-map-node:hover,
.mobile-mode #moneyMapView .money-map-canvas .money-map-node:focus-visible,
.mobile-mode #moneyMapView .money-map-canvas .money-map-node.selected-for-detail{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:16px!important;
  overflow:visible!important;
  border:1px solid #fff!important;
  border-left:5px solid var(--node-color)!important;
  border-radius:16px!important;
  background:#ffffffe8!important;
  box-shadow:0 7px 20px #28586f12!important;
  transform:none!important;
  transform-origin:center!important;
}
.mobile-mode #moneyMapView .money-map-canvas .money-map-node::before{display:none!important}
.mobile-mode #moneyMapView .money-map-canvas .money-map-node.selected-for-detail{
  border-color:color-mix(in srgb,var(--node-color) 66%,#fff)!important;
  border-left-color:var(--node-color)!important;
  outline:3px solid color-mix(in srgb,var(--node-color) 18%,transparent)!important;
}
.mobile-mode #moneyMapView .money-map-canvas.has-money-point-selection .money-map-node.is-unrelated-to-selection{
  opacity:.62!important;
  filter:none!important;
}
.mobile-mode #moneyMapView .money-map-node .money-point-card-content{
  gap:12px!important;
  max-height:none!important;
  overflow:visible!important;
}
.mobile-mode #moneyMapView .money-map-node .money-point-heading{
  grid-template-columns:42px minmax(0,1fr)!important;
  gap:11px!important;
}
.mobile-mode #moneyMapView .money-point-heading .financial-institution-logo{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
}
.mobile-mode #moneyMapView .money-map-node .money-point-heading strong{
  font-size:16px!important;
}
.mobile-mode #moneyMapView .money-map-node .money-point-balance{
  padding-top:11px!important;
  font-size:11px!important;
}
.mobile-mode #moneyMapView .money-map-node .money-point-balance strong{
  font-size:18px!important;
}
.mobile-mode #moneyMapView .money-mobile-flow-list{
  display:grid!important;
  gap:7px;
  padding-top:2px;
}
.mobile-mode #moneyMapView .money-mobile-flow-list>p{
  margin:0;
  padding:10px 12px;
  border-radius:10px;
  color:#6c8798;
  background:#f3f9fc;
  font-size:11px;
}
.mobile-mode #moneyMapView .money-mobile-flow-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:5px 8px;
  padding:10px 11px;
  border:1px solid #dbeaf1;
  border-radius:11px;
  background:#f8fcfe;
}
.mobile-mode #moneyMapView .money-mobile-flow-direction{
  grid-row:1 / 3;
  display:inline-grid;
  min-width:38px;
  min-height:24px;
  place-items:center;
  padding:0 7px;
  border-radius:999px;
  color:#08749e;
  background:#dff4fb;
  font-size:10px;
  font-weight:900;
}
.mobile-mode #moneyMapView .money-mobile-flow-direction.is-outgoing{
  color:#bd5644;
  background:#fff0eb;
}
.mobile-mode #moneyMapView .money-mobile-flow-name{
  min-width:0;
  overflow:hidden;
  color:#173b52;
  font-size:12px;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-mode #moneyMapView .money-mobile-flow-row small{
  grid-column:2;
  color:#698699;
  font-size:10px;
}
.mobile-mode #moneyMapView .money-mobile-flow-row strong{
  grid-column:3;
  grid-row:1 / 3;
  color:#173b52;
  font-size:12px;
  white-space:nowrap;
}
.mobile-mode #moneyMapView .money-map-selected-context,
.mobile-mode #moneyMapView .money-map-selected-context.align-up{
  position:static!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  margin-top:14px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--node-color) 24%,#d8e8ef)!important;
  border-radius:12px!important;
  background:#fff!important;
  transform:none!important;
}
.mobile-mode #moneyMapView .money-map-selected-context .money-map-connected-summary{
  grid-column:1 / -1!important;
}
.mobile-mode #moneyMapView .money-map-selected-context>div{
  min-height:54px!important;
  padding:10px!important;
}
.mobile-mode #moneyMapView .money-map-context-action{
  width:auto!important;
  min-height:42px!important;
  margin:0 8px 8px!important;
  padding:0 8px!important;
}

/* Budget values shown on tap, outside the chart's horizontal clipping area. */
.mobile-budget-bar-tooltip{position:fixed;inset:auto;margin:0;z-index:12000;width:max-content;max-width:calc(100vw - 24px);padding:9px 11px;border:1px solid #cbdff5;border-radius:9px;background:#fff;color:#173b61;box-shadow:0 3px 10px #28485e18;font-size:12px;font-weight:500;line-height:1.65;pointer-events:none}
.mobile-budget-bar-tooltip[hidden]{display:none}
.mobile-mode #budgetChart.budget-chart-expense .budget-bar-value{display:none!important}