/* Shared application design: quiet surfaces, clear amounts, comfortable controls. */
:root {
  --bg-page: #f5f5f9;
  --bg-subtle: #f0f0f6;
  --bg-elevated: #fefeff;
  --bg-accent-soft: #eeeefa;
  --border: rgba(46, 43, 77, .09);
  --text-main: #26243b;
  --text-secondary: #57576e;
  --text-muted: #6c6c80;
  --primary: #4c50b9;
  --primary-strong: #393d99;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --ledger-bg: var(--bg-page);
  --ledger-panel: var(--bg-elevated);
  --ledger-ink: var(--text-main);
  --ledger-muted: var(--text-muted);
  --shadow-sm: 0 4px 18px rgba(42, 39, 77, .035);
}
body, #app-view .content-shell { background: var(--bg-page); color: var(--text-main); }
#app-view .content-shell { padding: 30px 36px 50px; }
#app-view .content-shell > main { width: 100%; max-width: 1440px; margin: 0 auto; }
#app-view .card, #app-view .bills-page, #app-view .balances-page {
  border-color: var(--border); border-radius: 24px; box-shadow: var(--shadow-sm);
  background: var(--bg-elevated); padding: 26px;
}
#app-view .bills-page, #app-view .balances-page { gap: 26px; }
#app-view .card-header { margin-bottom: 24px; gap: 20px; }
#app-view h2, #app-view h3, .dialog h3 { letter-spacing: -.025em; color: var(--text-main); font-weight: 700; }
#app-view .topbar { padding: 0 0 28px; margin: 0; border: 0; background: transparent; box-shadow: none; }
#app-view .topbar h2 { font-size: 28px; }
#app-view .topbar p, #app-view .card-header p { color: var(--text-muted); line-height: 1.65; }
body :is(.primary-button,.ghost-button,.danger-button) { min-height: 44px; border-radius: 13px; padding: 10px 17px; box-shadow: none; font-weight: 600; }
body .primary-button { background: var(--primary); color: var(--ledger-on-accent); }
body .primary-button:hover { background: var(--primary-strong); }
body .ghost-button { color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); }
body :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
  border-color: var(--border); border-radius: 12px; min-height: 44px; color: var(--text-main); background: var(--bg-elevated);
}
body :is(input,select,textarea):focus { border-color: var(--primary); box-shadow: var(--ledger-focus); outline: none; }
body :is(input,textarea)::placeholder { color: var(--text-muted); opacity: .85; }
body .icon-button, body .icon-only-button { min-width: 44px; min-height: 44px; border-radius: 14px; }
#app-view .sidebar { background: #f0eff7; border-right: 1px solid var(--border); padding: 30px 20px; }
#app-view .sidebar-brand { color: var(--text-main); padding: 0 10px 26px; }
#app-view .sidebar-brand strong { color: var(--text-main); font-size: 24px; }
#app-view .sidebar-brand span, #app-view .sidebar-section-label { color: var(--text-muted); }
#app-view .brand-mark { background: var(--primary); color: var(--ledger-on-accent); border-radius: 15px; box-shadow: none; }
#app-view .sidebar-section { margin-bottom: 24px; }
#app-view .tree-nav { gap: 5px; }
#app-view .tree-item { background: transparent; color: var(--text-secondary); border: 0; border-radius: 14px; padding: 13px 14px; min-height: 48px; box-shadow: none; }
#app-view .tree-item span { color: inherit; font-weight: 600; }
#app-view .tree-item small { color: var(--text-muted); font-weight: 400; }
#app-view .tree-item::before { color: inherit; background: transparent; }
#app-view .tree-item.active { color: var(--primary); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
#app-view .tree-item:hover { background: var(--bg-elevated); }
#app-view .sidebar-current-group { border: 0; border-radius: 18px; background: var(--bg-elevated); color: var(--text-main); }
#app-view .sidebar-current-group :is(strong,span) { color: inherit; }
#app-view .table-shell { border: 1px solid var(--border); border-radius: 18px; box-shadow: none; }
#app-view th { color: var(--text-muted); background: #f7f7fb; font-size: 12px; font-weight: 500; height: 48px; border-color: var(--border); }
#app-view td { height: 66px; border-color: var(--border); font-size: 14px; }
#app-view tbody tr:last-child td { border-bottom: 0; }
#app-view .pagination-bar { margin-top: 20px; gap: 14px; color: var(--text-muted); }
#app-view :is(.balances-group-card,.bills-group-card) { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 24px; }
#app-view :is(.balances-group-meta,.bills-group-meta) { color: var(--text-muted); gap: 16px; font-size: 12px; }
#app-view :is(.balances-group-eyebrow,.bills-group-eyebrow) { color: var(--text-muted); font-size: 12px; background: transparent; }
#app-view :is(.balances-group-card,.bills-group-card) h3 { margin: 6px 0 10px; font-size: 24px; }
#app-view :is(.subview-tabs,.mobile-segment-tabs) { background: #ececf4; border: 0; padding: 5px; border-radius: 16px; box-shadow: none; gap: 4px; }
#app-view .subview-tab { border: 0; min-height: 43px; border-radius: 12px; color: var(--text-muted); background: transparent; font-weight: 600; }
#app-view .subview-tab.active { color: var(--text-main); background: var(--bg-elevated); box-shadow: 0 2px 5px rgba(42,39,77,.05); }
#balances-detail-view { display: flex; flex-direction: column; gap: 22px; }
#balances-detail-view.hidden { display: none; }
#balances-panel #balances-summary {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 24px; padding: 28px;
  margin: 0; border: 0; border-radius: 24px; background: #eeedf9; box-shadow: none; align-items: center;
}
#balances-panel #balances-summary.hidden { display: none; }
#balances-panel #balances-summary .summary-card {
  display: grid; gap: 8px; min-width: 0; min-height: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
#balances-panel #balances-summary .summary-card small { color: var(--text-secondary); font-size: 13px; font-weight: 500; }
#balances-panel #balances-summary .summary-card strong { font-size: 24px; font-weight: 600; letter-spacing: -.035em; overflow-wrap: anywhere; }
#balances-panel #balances-summary .summary-card-total strong { font-size: 38px; color: var(--text-main); }
#balances-panel #balances-summary .summary-card-total em { font-size: 11px; color: var(--text-muted); font-style: normal; }
#balances-panel #balances-summary .summary-card-income strong { color: var(--text-main); }
#balances-panel #balances-summary .summary-card-expense strong { color: var(--ledger-danger); }
#app-view :is(.balances-filter-card,.bills-filter-card) { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
#app-view :is(.balances-primary-filter,.bills-primary-filter) { gap: 12px; }
#app-view :is(.balances-search-field,.bills-search-field) { min-height: 48px; border: 1px solid var(--border); border-radius: 15px; background: var(--bg-elevated); box-shadow: none; padding: 0 15px; }
#app-view :is(.balances-search-field,.bills-search-field) input { min-width: 0; min-height: 46px; font-size: 14px; border: 0; background: transparent; box-shadow: none; }
#app-view :is(.balances-search-field,.bills-search-field) > span { color: var(--text-muted); }
#app-view :is(.balances-filter-drawer-panel,.bills-filter-drawer-panel) { border-radius: 24px; padding: 26px; background: var(--bg-elevated); border: 1px solid var(--border); }
#app-view :is(.balances-filter-grid,.bills-filter-grid) { gap: 22px; }
#app-view :is(.balances-filter-grid,.bills-filter-grid) label > span { color: var(--text-secondary); font-size: 13px; margin-bottom: 7px; }
body .dialog { border-radius: 26px; padding: 28px; border: 1px solid var(--border); background: var(--bg-elevated); box-shadow: 0 24px 90px rgba(38,34,72,.16); }
body .dialog-header { margin-bottom: 24px; gap: 20px; }
body .dialog-header h3 { font-size: 23px; }
body .dialog-header p { color: var(--text-muted); font-size: 13px; line-height: 1.7; margin-top: 8px; }
body .dialog-form, body .dialog-grid { gap: 20px; }
body .field { gap: 8px; }
body .field > span { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
body .dialog-actions { padding-top: 22px; margin-top: 6px; gap: 12px; }
#finance-home-panel .ledger-heading { margin-bottom: 30px; }
#finance-home-panel .ledger-hero, #finance-home-panel .ledger-assets { border-radius: 26px; }
#finance-home-panel .ledger-detail-grid { gap: 24px; }
#finance-home-panel .ledger-surface { padding: 26px; border-radius: 24px; }
#bills-panel #bills-summary { border-color: var(--border); box-shadow: none; border-radius: 22px; }
.account-symbol { display: none; }
@media (max-width: 920px) {
  #app-view .sidebar { border-radius: 0 26px 26px 0; }
}
@media (max-width: 720px) {
  #app-view .content-shell { padding: 24px 20px calc(110px + env(safe-area-inset-bottom)); }
  #app-view .card, #app-view .bills-page, #app-view .balances-page { padding: 0; background: transparent; border: 0; box-shadow: none; gap: 24px; }
  #app-view .card-header { padding: 0 2px; }
  #app-view :is(.balances-mobile-head,.bills-mobile-head) { display: grid; grid-template-columns: minmax(54px,1fr) auto auto; gap: 12px; align-items: center; padding: 0; margin: 0; }
  #app-view .finance-mobile-title { padding: 0; min-width: 0; }
  #app-view .finance-mobile-title h2 { font-size: 28px; line-height: 1.3; margin: 0; white-space: nowrap; }
  #app-view .finance-mobile-group-pill { display: flex; width: auto; max-width: 152px; min-height: 44px; padding: 8px 12px; background: transparent; border: 0; border-radius: 12px; gap: 5px; }
  #app-view .finance-mobile-group-pill::after { content: '⌄'; color: var(--text-muted); font-size: 15px; }
  #app-view .finance-mobile-group-icon, #app-view .finance-mobile-group-copy small { display: none; }
  #app-view .finance-mobile-group-copy strong { font-size: 13px; font-weight: 500; color: var(--text-secondary); max-width: 105px; }
  #app-view .mobile-head-actions { gap: 7px; }
  #app-view :is(.balances-mobile-add,.bills-mobile-add) { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 15px; font-size: 25px; }
  #app-view .bills-mobile-add { display: none; }
  #app-view :is(.balances-mobile-action-menu,.bills-mobile-action-menu) > summary { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 1px solid var(--border); border-radius: 15px; background: var(--bg-elevated); }
  #app-view .balances-subview-tabs { margin: 0; }
  #balances-detail-view { gap: 22px; }
  #balances-panel #balances-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 18px; padding: 24px; border-radius: 24px; }
  #balances-panel #balances-summary .summary-card-total { grid-column: 1/-1; padding-bottom: 22px; border-bottom: 1px solid rgba(76,80,185,.12); }
  #balances-panel #balances-summary .summary-card strong { font-size: 21px; }
  #balances-panel #balances-summary .summary-card-total strong { font-size: 36px; line-height: 1.2; }
  #balances-panel #balances-summary .summary-card small { font-size: 12px; }
  #app-view :is(.balances-primary-filter,.bills-primary-filter) { gap: 10px; }
  #balances-panel .balances-mobile-list { gap: 12px; }
  #balances-panel .balances-mobile-card { border: 1px solid var(--border); border-radius: 22px; background: var(--bg-elevated); box-shadow: none; overflow: hidden; }
  #balances-panel .balances-mobile-card-main { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 5px 12px; padding: 20px; text-align: left; }
  #balances-panel .account-symbol { display: grid; grid-row: 1/3; grid-column: 1; place-items: center; width: 44px; height: 44px; border-radius: 15px; background: var(--ledger-soft); color: var(--primary); }
  .account-symbol svg { width: 23px; height: 23px; }
  #balances-panel .balances-mobile-card-title { grid-row: 1; grid-column: 2; font-size: 15px; font-weight: 600; color: var(--text-main); line-height: 1.5; overflow-wrap: anywhere; }
  #balances-panel .balances-mobile-card-platform { grid-row: 2; grid-column: 2; padding: 0; min-height: 0; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 400; }
  #balances-panel .balances-mobile-card-amount { grid-column: 3; grid-row: 1/3; align-self: center; font-size: 19px; font-weight: 600; letter-spacing: -.025em; color: var(--text-main); }
  #balances-panel .balances-mobile-card-amount.amount-expense { color: var(--ledger-danger); }
  #balances-panel .balances-mobile-card-meta-grid { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
  #balances-panel .balances-mobile-card-meta-grid > span { display: flex; gap: 5px; align-items: baseline; }
  #balances-panel .balances-mobile-card-meta-grid em { font-size: 11px; color: var(--text-muted); font-weight: 400; }
  #balances-panel .balances-mobile-card-meta-grid strong { font-size: 11px; color: var(--text-secondary); font-weight: 400; }
  #balances-panel .balances-mobile-card-meta-grid > .account-credit-detail { width: 100%; }
  #balances-panel .balances-mobile-card-arrow { display: none; }
  #balances-panel .balances-mobile-card-tags { margin-top: 5px; }
  #bills-panel #bills-mobile-list { padding: 6px 18px 12px; border-radius: 24px; }
  #bills-panel .ledger-row { padding: 18px 0; gap: 13px; }
  #bills-panel .ledger-copy > strong { font-size: 15px; font-weight: 600; }
  #bills-panel .ledger-value { font-size: 17px; font-weight: 600; }
  #bills-panel .ledger-day-heading { padding-top: 20px; }
  #bills-panel #bills-summary { padding: 22px 14px; margin: 3px 0 8px; }
  #bills-panel #bills-summary .summary-card strong { font-size: 19px; font-weight: 600; }
  #app-view .app-bottom-nav { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 25px; padding: 8px; box-shadow: 0 8px 32px rgba(38,34,72,.10); }
  #app-view .app-bottom-nav button { min-height: 54px; border-radius: 18px; font-size: 11px; font-weight: 500; gap: 4px; }
  #app-view .quick-add-symbol { width: 42px; height: 36px; border-radius: 14px; }
  body .dialog { padding: 24px 20px; border-radius: 26px 26px 0 0; }
  body .dialog-grid { gap: 20px 16px; }
  body .dialog-header h3 { font-size: 22px; }
  body .dialog-actions { gap: 8px; }
  #app-view :is(.balances-filter-drawer-panel,.bills-filter-drawer-panel) { padding: 24px 20px; border-radius: 26px 26px 0 0; }
  #app-view .pagination-bar { margin: 0; padding: 0; }
  #app-view .pagination-bar .ghost-button { min-width: 44px; min-height: 44px; height: auto; }
  #app-view .table-shell tbody tr { border-radius: 20px; padding: 18px; border-color: var(--border); box-shadow: none; }
}
@media (max-width: 375px) {
  #app-view .content-shell { padding-right: 16px; padding-left: 16px; }
  #app-view :is(.balances-mobile-head,.bills-mobile-head) { gap: 4px; }
  #app-view .finance-mobile-title h2 { font-size: 25px; }
  #app-view .finance-mobile-group-pill { padding: 8px; max-width: 112px; }
  #app-view .finance-mobile-group-copy strong { max-width: 76px; }
  #balances-panel #balances-summary { padding: 22px; }
  #balances-panel #balances-summary .summary-card strong { font-size: 19px; }
  #balances-panel #balances-summary .summary-card-total strong { font-size: 32px; }
  #balances-panel .balances-mobile-card-main { padding: 17px; grid-template-columns: 38px minmax(0,1fr); }
  #balances-panel .account-symbol { width: 38px; height: 38px; border-radius: 13px; }
  #balances-panel .balances-mobile-card-amount { grid-column: 1/-1; grid-row: 3; margin-top: 7px; font-size: 24px; }
  #bills-panel #bills-summary { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  #bills-panel #bills-summary .summary-card:not(.summary-card-total) { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  #bills-panel #bills-summary .summary-card strong { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Shared summaries and date presets retain the same quiet surface. */
#bills-panel #bills-summary .summary-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
#bills-panel .bills-quick-times { background: #ececf4; border: 0; border-radius: 14px; padding: 4px; }
#bills-panel .bills-quick-time { min-height: 44px; border-radius: 11px; }
#bills-panel .bills-quick-time.active { background: var(--bg-elevated); color: var(--primary); box-shadow: 0 2px 5px rgba(42,39,77,.04); }
@media (min-width: 721px) {
  #bills-panel #bills-summary { background: #f6f6fb; padding: 10px 0; gap: 0; }
  #bills-panel #bills-summary .summary-card { padding: 18px 24px; min-height: 100px; }
  #bills-panel #bills-summary .summary-card + .summary-card { border-left: 1px solid var(--border); }
  #app-view .row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
  #bills-panel .bill-row-actions { flex-wrap: nowrap; }
  #app-view #bills-panel .bills-table-shell :is(th,td):last-child { width: 168px; }
  #app-view #bills-panel .bills-table-shell th:last-child { position: sticky; right: 0; z-index: 3; }
}
body .dialog-header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; }
body .dialog-header > .icon-button { width: 44px; height: 44px; padding: 0; align-self: start; font-size: 13px; }
@media (max-width: 720px) {
  #auth-view .auth-card { min-width: 0; width: 100%; max-width: 100%; }
  body .overlay { padding: 0; align-items: end; }
  body .dialog { width: 100%; max-height: 94dvh; margin: 0; border-bottom: 0; }
  body .dialog-actions { display: flex; flex-direction: row; position: sticky; bottom: -24px; z-index: 2; padding: 16px 0 calc(8px + env(safe-area-inset-bottom)); background: var(--bg-elevated); }
  body .dialog-actions > button { flex: 1; width: auto; }
  #balances-panel .balances-primary-filter { display: grid; grid-template-columns: minmax(0,1fr) 72px; }
  #balances-panel #balances-more-filter-button { min-width: 0; width: 72px; padding: 10px; border-radius: 13px; }
}
#finance-home-panel .ledger-heading > button { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 45%; }
#finance-home-panel .ledger-heading > button span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#bills-panel .bills-date-range-field { min-width: 0; border-radius: 14px; border-color: var(--border); }
#bills-panel .bills-date-input { min-width: 0; display: grid; gap: 2px; padding: 6px 0; }
#bills-panel .bills-date-input > span { color: var(--text-muted); font-size: 10px; }
#bills-panel .bills-date-range-field input { min-height: 26px; height: 26px; padding: 0; }
#app-view .drawer-group-item.active { background: var(--bg-accent-soft); border-color: var(--border); color: var(--primary); }

#bill-modal-overlay #bill-amount { border-radius: 14px; padding-left: 12px; }
#bills-panel .bills-date-range-field { height: auto; min-height: 58px; }
#bills-panel .bills-date-input { flex: 1; }
#bills-panel .bills-date-range-field .bills-date-input input { width: 100%; }