:root {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#102a43;
  background:#f3f6f8;
  font-size:16px
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)
}
main {
  max-width:680px;
  margin:auto;
  padding:16px 16px 40px
}
.top {
  padding:10px 2px 8px
}
h1 {
  font-size:23px;
  margin:0 0 4px
}
h2 {
  font-size:18px;
  margin:0 0 14px
}
h3 {
  font-size:16px;
  margin:20px 0 12px
}
.sub {
  color:#526777;
  font-size:14px
}
.tabs {
  position:sticky;
  top:env(safe-area-inset-top);
  z-index:5;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  padding:5px;
  margin:0 0 12px;
  background:#e7edf1;
  border-radius:15px
}
.tab {
  min-width:0;
  min-height:44px;
  padding:8px 5px;
  background:transparent;
  color:#526777;
  font-size:14px;
  line-height:1.15;
  overflow-wrap:anywhere
}
.tab.active {
  background:#fff;
  color:#102a43;
  box-shadow:0 1px 5px #17324d20
}
.tab:disabled {
  opacity:.5;
  cursor:wait
}
.tab-panel[hidden] {
  display:none!important
}
.card,.category {
  background:#fff;
  border-radius:18px;
  padding:16px;
  margin:12px 0;
  box-shadow:0 2px 12px #17324d0d
}
.hero {
  background:#102a43;
  color:#fff;
  border-radius:22px;
  padding:20px;
  margin:12px 0
}
.hero .label {
  opacity:.8;
  font-size:14px
}
.hero .balance {
  font-size:36px;
  font-weight:750;
  margin:3px 0 14px
}
.metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.metric {
  background:#ffffff20;
  border-radius:14px;
  padding:11px
}
.metric b {
  display:block;
  font-size:18px;
  margin-top:4px
}
.metric small {
  opacity:.8
}
.category-list {
  display:grid;
  gap:10px
}
.cat {
  border:1px solid #e1e8ee;
  border-radius:15px;
  padding:14px
}
.cat.over {
  border-color:#c43d4b;
  background:#fff7f7
}
.cat-toggle {
  display:block;
  width:100%;
  padding:0;
  background:transparent;
  color:inherit;
  text-align:left;
  font-weight:400
}
.cat-toggle:focus-visible {
  outline:3px solid #b8d9ee;
  outline-offset:4px
}
.cat-head,.cat-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px
}
.cat-head {
  font-weight:700
}
.cat-bal {
  font-size:20px;
  font-weight:750;
  margin:6px 0
}
.cat-meta {
  color:#526777;
  font-size:13px
}
.bar {
  height:8px;
  background:#e9eef2;
  border-radius:9px;
  margin:10px 0 8px;
  overflow:hidden
}
.bar i {
  display:block;
  height:100%;
  background:#22866c;
  border-radius:9px
}
.over .bar i {
  background:#c43d4b
}
.daily {
  border-top:1px solid #e1e8ee;
  margin-top:12px;
  padding-top:8px
}
.daily-row {
  display:flex;
  justify-content:space-between;
  padding:8px 2px;
  border-bottom:1px solid #eef2f4;
  font-size:14px
}
.daily-row:last-child {
  border:0
}
.daily-total {
  font-weight:700
}
.daily-message {
  font-size:14px;
  color:#526777;
  padding:10px 2px
}
label {
  display:block;
  font-size:14px;
  font-weight:650;
  margin:12px 0 6px
}
input,select {
  width:100%;
  font:inherit;
  border:1px solid #bdcbd6;
  border-radius:12px;
  min-height:48px;
  padding:10px 12px;
  background:#fff;
  color:#102a43
}
input:focus,select:focus {
  outline:3px solid #b8d9ee;
  border-color:#2776a8
}
input[type=date] {
  display:block;
  min-width:0;
  max-width:100%;
  -webkit-appearance:none;
  appearance:none
}
.check {
  display:flex;
  align-items:center;
  gap:9px
}
.check input {
  width:20px;
  height:20px;
  min-height:20px;
  margin:0;
  accent-color:#16745d
}
button {
  font:inherit;
  border:0;
  min-height:48px;
  padding:11px 12px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer
}
.primary {
  width:100%;
  background:#16745d;
  color:#fff;
  margin-top:14px
}
.secondary {
  background:#eaf0f4;
  color:#173a52
}
.danger {
  color:#a32835;
  background:#fff0f1
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.filters {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:1px 1px 6px;
  margin:-3px 0 10px
}
.filter {
  flex:0 0 auto;
  min-height:40px;
  padding:8px 13px;
  background:#edf2f5;
  color:#29485e;
  font-size:14px
}
.filter.active {
  background:#16745d;
  color:#fff
}
.category-choices {
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  padding:1px 1px 6px;
  margin:0 0 10px;
  scrollbar-width:thin
}
.category-choice {
  flex:0 0 auto;
  min-height:40px;
  padding:8px 13px;
  background:#edf2f5;
  color:#29485e;
  font-size:14px
}
.category-choice.active {
  background:#16745d;
  color:#fff
}
.switch {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:5px;
  margin-bottom:12px;
  background:#e7edf1;
  border-radius:13px
}
.switch button {
  background:transparent;
  color:#526777;
  min-height:42px
}
.switch button.active {
  background:#fff;
  color:#102a43;
  box-shadow:0 1px 5px #17324d20
}
.entry {
  padding:13px 0;
  border-bottom:1px solid #e7edf1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px
}
.entry:last-child {
  border:0
}
.entry-title {
  font-weight:700;
  overflow-wrap:anywhere
}
.entry-meta {
  font-size:13px;
  color:#5b6e7d;
  margin-top:4px
}
.entry-value {
  font-weight:750;
  text-align:right
}
.actions {
  display:flex;
  gap:6px;
  justify-content:flex-end;
  margin-top:7px
}
.actions button {
  min-height:37px;
  padding:7px 10px;
  font-size:13px
}
.settings-categories {
  display:grid;
  gap:5px
}
.setting-category {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(82px,27%) auto;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid #e7edf1
}
.setting-category:last-child {
  border:0
}
.setting-name {
  font-weight:650;
  overflow-wrap:anywhere
}
.setting-limit {
  min-width:0
}
.setting-actions {
  display:flex;
  gap:4px
}
.move,.remove {
  min-height:38px;
  padding:5px 9px
}
.move {
  background:#eaf0f4;
  color:#173a52
}
.remove {
  min-width:40px;
  background:#fff0f1;
  color:#a32835
}
.add-category {
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #e1e8ee
}
.add-category .secondary {
  width:100%;
  margin-top:10px
}
.hint {
  font-size:13px;
  line-height:1.45;
  color:#526777;
  margin:10px 0 0
}
.notice {
  position:fixed;
  bottom:calc(14px + env(safe-area-inset-bottom));
  left:16px;
  right:16px;
  max-width:648px;
  margin:auto;
  background:#173b50;
  color:#fff;
  padding:14px 16px;
  border-radius:14px;
  box-shadow:0 5px 24px #0003;
  z-index:10
}
.notice.error {
  background:#a32835
}
.muted {
  text-align:center;
  color:#647786;
  padding:16px
}
.hidden {
  display:none!important
}
.dialog {
  width:min(calc(100% - 32px),520px);
  border:0;
  border-radius:20px;
  padding:18px;
  max-height:90vh;
  box-shadow:0 8px 40px #0004
}
.dialog::backdrop {
  background:#0007
}
.dialog-actions {
  display:flex;
  gap:8px;
  margin-top:15px
}
.dialog-actions button {
  flex:1
}
.dialog-actions .primary {
  width:auto;
  margin-top:0
}
@media(max-width:420px) {
  .tabs {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .setting-category {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name name" "limit actions";
    gap:6px
  }
  .setting-name {
    grid-area:name
  }
  .setting-limit {
    grid-area:limit
  }
  .setting-actions {
    grid-area:actions
  }
}
@media(max-width:360px) {
  main {
    padding-left:12px;
    padding-right:12px
  }
  .hero .balance {
    font-size:31px
  }
  .tab {
    font-size:12px;
    padding-left:4px;
    padding-right:4px
  }
}