/* Beiyi / restrained green, generous hierarchy, compact operational detail. */
:root {
  --blue:#176b55;
  --blue-dark:#10523f;
  --blue-weak:#eaf4ef;
  --green:#176b55;
  --green-weak:#eaf4ef;
  --red:#b64c40;
  --red-weak:#fcf0ed;
  --orange:#976125;
  --orange-weak:#faf2e4;
  --ink:#222c28;
  --ink-2:#59635e;
  --ink-3:#717b75;
  --line:#e5e9e5;
  --gray-weak:#f6f7f4;
  --radius:14px;
  --sidebar:216px;
  --surface:#fff
}
* {
  box-sizing:border-box
}
body {
  background:var(--gray-weak);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit
}
button {
  touch-action:manipulation
}
button:disabled {
  cursor:not-allowed;
  opacity:.5
}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible {
  outline:3px solid #78b29c;
  outline-offset:3px
}
button,select,input {
  min-width:0
}
a {
  color:var(--blue)
}
[hidden] {
  display:none!important
}
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:200;
  transform:translateY(-150%);
  background:white;
  padding:10px
}
.skip-link:focus {
  transform:none
}
.app {
  min-height:100dvh
}
.sidebar {
  width:var(--sidebar);
  border-right:1px solid var(--line);
  background:#fbfcfa;
  padding:0 14px
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  padding:29px 10px 27px;
  border:0
}
.brand-mark {
  display:grid;
  place-items:center;
  background:var(--blue);
  color:#fff;
  font-weight:600;
  width:38px;
  height:40px;
  border-radius:11px 11px 11px 3px;
  font-size:21px
}
.brand h1 {
  font-size:17px;
  letter-spacing:.4px;
  line-height:1.3
}
.brand h1 span {
  display:none
}
.brand p {
  font-size:11px;
  letter-spacing:1.4px;
  margin-top:4px;
  color:var(--ink-3)
}
.workspace-label {
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 10px;
  background:#f0f3ef;
  border:1px solid #e7ebe5;
  border-radius:9px;
  font-size:12px;
  font-weight:600
}
.workspace-avatar,.user-avatar {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  background:#e3eae1;
  border:1px solid #d9e2d8;
  color:#5a7059;
  border-radius:8px;
  font-size:12px
}
.workspace-label small {
  display:block;
  color:var(--ink-3);
  font-size:10px;
  font-weight:400;
  margin-top:1px
}
.workspace-dot,.status-dot {
  width:6px;
  height:6px;
  flex:none;
  background:#6c9980;
  border-radius:50%;
  display:inline-block
}
.workspace-dot {
  margin-left:auto
}
.nav-caption {
  padding:25px 11px 7px;
  color:#828a84;
  font-size:10px;
  letter-spacing:1.8px
}
.nav {
  padding:0;
  gap:5px;
  flex:0 0 auto;
  overflow:visible
}
.nav-item {
  padding:12px 13px;
  border-radius:8px;
  gap:12px;
  font-size:13px;
  min-height:45px;
  color:#606a64
}
.nav-item svg {
  width:17px;
  height:17px;
  stroke-width:1.65
}
.nav-item.active {
  background:#e8f0e9;
  color:#235e48;
  font-weight:600
}
.nav-item:hover {
  background:#edf1eb
}
.nav-badge {
  margin-left:auto;
  background:#dce8dc;
  color:#4c6e50;
  font-size:10px;
  min-width:20px;
  text-align:center;
  border-radius:5px;
  font-weight:600
}
.sidebar-help {
  margin-top:auto;
  padding:21px 13px 22px;
  font-size:12px
}
.sidebar-help .help-icon {
  font-size:22px;
  display:block;
  color:#728675;
  margin-bottom:8px
}
.sidebar-help strong {
  display:block;
  font-size:12px;
  font-weight:600
}
.sidebar-help p {
  font-size:11px;
  color:var(--ink-3);
  margin:5px 0 14px
}
.sidebar-help .btn {
  width:100%;
  background:#f7f9f5;
  min-height:34px;
  font-size:11px
}
.side-foot {
  padding:16px 4px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:var(--ink-3);
  white-space:nowrap
}
.main {
  margin-left:var(--sidebar);
  padding:0 34px 44px;
  max-width:calc(1512px + var(--sidebar));
  width:calc(100% - var(--sidebar));
  min-width:0
}
.topbar {
  height:75px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
  font-size:12px
}
.breadcrumb-root {
  color:var(--ink-3)
}
.breadcrumb-slash {
  color:#a2aaa4;
  margin:0 12px
}
.topbar-right {
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--ink-3);
  font-size:11px
}
.topbar-right .text-link {
  font-size:11px
}
.user-avatar {
  width:31px;
  height:31px;
  border-radius:50%
}
.demo-notice {
  font-size:11px;
  background:#edf3ed;
  color:#536950;
  border:1px solid #e0e9df;
  padding:9px 14px;
  border-radius:8px;
  margin:-7px 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.demo-notice .text-link {
  font-size:11px
}
.migration-notice,.storage-alert {
  padding:12px 16px;
  background:var(--orange-weak);
  border:1px solid #eaddc6;
  color:#875920;
  margin-bottom:20px;
  border-radius:9px;
  font-size:12px
}
.storage-alert {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.storage-alert span {
  flex:1;
  min-width:200px
}
.page-head {
  margin:0 0 24px;
  align-items:center;
  gap:18px
}
.page-head h2 {
  font-size:28px;
  letter-spacing:-.7px;
  font-weight:650;
  line-height:1.4
}
.page-head .sub {
  font-size:12px;
  color:var(--ink-3);
  margin-top:6px
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.8px;
  color:#7d887e;
  margin-bottom:5px
}
.month-tag {
  padding:2px 9px;
  border:0;
  background:#e9ede7;
  color:#65735f;
  font-size:10px;
  font-weight:400;
  letter-spacing:0;
  border-radius:5px;
  vertical-align:middle;
  margin-left:12px
}
.head-actions {
  gap:8px
}
.btn {
  border:1px solid #dfe5de;
  border-radius:7px;
  min-height:39px;
  padding:0 15px;
  font-size:12px;
  font-weight:550;
  color:#48584c;
  box-shadow:0 1px 2px #25352a04;
  transition:background .18s,border-color .18s,transform .18s
}
.btn:hover {
  background:#f3f6f1;
  border-color:#93b3a4;
  color:var(--blue)
}
.btn.primary {
  background:var(--blue);
  color:white;
  border-color:var(--blue);
  box-shadow:0 2px 3px #1c503518
}
.btn.primary:hover {
  background:var(--blue-dark);
  border-color:var(--blue-dark);
  color:white
}
.btn.soft {
  background:#edf4ef;
  border-color:#e5ede6;
  color:#276b50
}
.btn.danger {
  background:var(--red);
  color:white;
  border-color:var(--red)
}
.btn.sm {
  font-size:11px;
  min-height:32px;
  padding:0 11px;
  white-space:nowrap
}
.btn:active {
  transform:translateY(1px)
}
.text-link {
  border:0;
  background:transparent;
  color:var(--blue);
  font-size:12px;
  padding:5px 0;
  cursor:pointer;
  text-align:left
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.icon-btn {
  border:0;
  width:30px;
  height:30px;
  background:#ffffff70;
  border-radius:6px;
  color:#6b8976;
  font-size:18px
}
.overview-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:18px;
  margin-bottom:18px
}
.balance-panel {
  background:#eaf1e8;
  border:1px solid #e0e8dc;
  border-radius:14px;
  padding:22px 26px 0;
  overflow:hidden;
  min-width:0
}
.panel-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:#607261
}
.panel-top h3 {
  font-size:13px;
  color:var(--ink);
  font-weight:600
}
.currency-tag {
  display:inline-block;
  vertical-align:middle;
  font-size:9px;
  letter-spacing:.5px;
  color:#71806b;
  background:#dce7d9;
  border-radius:4px;
  padding:2px 5px;
  margin-left:7px
}
.balance-value {
  font-size:clamp(30px,3.3vw,49px);
  font-weight:600;
  letter-spacing:-1.6px;
  font-variant-numeric:tabular-nums;
  color:#204932;
  margin:12px 0 20px;
  line-height:1.25
}
.balance-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  padding-bottom:20px
}
.balance-bottom>div>span {
  display:block;
  font-size:10px;
  color:#6f7e6d
}
.balance-bottom strong {
  font-size:17px;
  font-weight:550;
  color:#345c3e;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.3px
}
.balance-bottom .text-link {
  font-size:10px;
  white-space:nowrap
}
.balance-foot {
  margin:0 -26px;
  padding:12px 26px;
  background:#e4ece1;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#687b62;
  border-top:1px solid #dce6d7
}
.balance-foot-note {
  margin-left:auto
}
.cashflow-panel {
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 24px 15px;
  background:white;
  min-width:0
}
.chart-legend {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:#7a847c
}
.chart-legend i {
  width:6px;
  height:6px;
  border-radius:2px;
  background:#679378
}
.chart-legend i:nth-of-type(2) {
  background:#d0dccc;
  margin-left:9px
}
.cashflow-totals {
  display:flex;
  gap:24px;
  margin-top:15px
}
.cashflow-totals button {
  width:50%;
  border:0;
  padding:0;
  background:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.cashflow-totals button+button {
  border-left:1px solid var(--line);
  padding-left:22px
}
.cashflow-totals button>span {
  font-size:10px;
  color:var(--ink-3)
}
.cashflow-totals button>span b {
  font-size:13px;
  font-weight:400;
  margin-left:4px
}
.cashflow-totals strong {
  font-size:25px;
  line-height:1.5;
  color:#33483a;
  letter-spacing:-.6px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}
.cashflow-totals small {
  font-size:9px;
  color:var(--ink-3)
}
.cashflow-chart {
  display:flex;
  gap:16px;
  justify-content:space-between;
  padding-top:15px;
  height:83px
}
.chart-group {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:5px;
  align-items:center;
  min-width:0
}
.chart-group>span {
  font-size:9px;
  color:#859086;
  white-space:nowrap
}
.chart-bars {
  height:44px;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  border-bottom:1px solid #e9ede7;
  background:repeating-linear-gradient(to top,transparent,transparent 20px,#f5f6f3 20px,#f5f6f3 21px)
}
.bar {
  width:17px;
  border-radius:3px 3px 0 0;
  display:block;
  min-height:0
}
.bar-in {
  background:#81a68b
}
.bar-out {
  background:#d0ddcc
}
.overview-metrics {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:24px
}
.metric {
  padding:17px 22px;
  border:1px solid var(--line)!important;
  border-radius:11px;
  box-shadow:none!important;
  min-width:0
}
.metric .label {
  color:var(--ink-3);
  font-size:11px
}
.metric .label:after {
  content:'↗';
  margin-left:auto;
  color:#9ba99e;
  font-size:14px
}
.metric .value {
  font-size:27px;
  font-weight:550;
  letter-spacing:-.7px;
  color:#34493c!important;
  margin:7px 0 3px;
  line-height:1.3
}
.metric.m-orange {
  background:#fffcf7
}
.metric.m-orange .value {
  color:#9f7140!important
}
.metric .extra {
  font-size:10px
}
.metric.clickable:hover {
  background:#fbfdf9;
  transform:translateY(-1px)
}
.account-detail {
  margin-bottom:0;
  max-height:0;
  visibility:hidden
}
.account-detail.open {
  margin-bottom:24px;
  max-height:none;
  visibility:visible
}
.account-detail .inner {
  padding:22px
}
.card {
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:22px;
  box-shadow:none
}
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:9px
}
.card h3 {
  font-size:14px;
  margin-bottom:0;
  letter-spacing:-.1px
}
.count-tag {
  font-weight:400;
  font-size:10px;
  background:#f0f3ed;
  border:1px solid #e9ede6;
  color:#798372;
  border-radius:5px;
  padding:1px 6px;
  margin-left:3px
}
.segmented {
  display:flex;
  gap:2px;
  padding:3px;
  background:#f2f4ef;
  border:1px solid #e9ede5;
  border-radius:7px
}
.segmented button {
  font-size:10px;
  border:0;
  padding:5px 11px;
  background:transparent;
  color:#74816f;
  border-radius:4px;
  min-height:27px
}
.segmented button.active {
  color:#3d6547;
  background:white;
  box-shadow:0 1px 3px #25352412;
  font-weight:550
}
.todo-item {
  display:grid;
  grid-template-columns:33px minmax(0,1fr) auto auto;
  align-items:center;
  gap:13px;
  padding:16px 0;
  border-bottom:1px solid #edf0e9;
  flex-wrap:nowrap
}
.todo-icon {
  display:grid;
  place-items:center;
  width:32px;
  height:34px;
  border-radius:8px;
  font-size:20px;
  font-weight:400;
  background:#f1f3ed;
  color:#8b957d
}
.todo-icon.incoming {
  background:#edf4ef;
  color:#497b56
}
.todo-body {
  min-width:0
}
.todo-title {
  font-size:12px;
  font-weight:550;
  overflow-wrap:anywhere;
  display:block
}
.todo-meta {
  font-size:10px;
  color:#7e897f;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.todo-amount {
  min-width:90px;
  text-align:right;
  padding-right:12px;
  font-variant-numeric:tabular-nums
}
.todo-amount>b {
  font-size:13px;
  font-weight:550;
  color:#3b463d;
  display:block
}
.todo-amount>span {
  font-size:9px;
  color:var(--ink-3)
}
.todo-amount>span.overdue-text {
  color:#b36b46
}
.todo-actions {
  gap:6px;
  flex-wrap:nowrap
}
.todo-actions .btn {
  font-size:10px;
  min-height:31px
}
.todo-actions .btn:not(.soft) {
  border-color:transparent;
  background:transparent;
  color:#7e897f
}
.card-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top:15px;
  color:#8b948a;
  font-size:10px
}
.card-footer .text-link {
  font-size:10px
}
.tbl-responsive {
  overflow-x:auto;
  max-width:100%
}
.tbl {
  min-width:620px
}
.tbl th {
  background:#f8f9f6;
  font-size:10px!important;
  color:#778373!important;
  line-height:1.5;
  padding:12px 10px!important;
  font-weight:500
}
.tbl td {
  font-size:11px;
  padding:13px 10px!important;
  border-bottom-color:#eef0ea!important;
  line-height:1.6
}
.tbl td b {
  font-weight:550
}
.tag {
  font-size:9px;
  border-radius:4px;
  padding:2px 6px;
  font-weight:500
}
.tag.gray {
  background:#f1f3ee;
  color:#76806e
}
.tag.red {
  background:#faf0e8;
  color:#aa643f
}
.tag.orange {
  background:#f7f0e5;
  color:#9d722f
}
.tag.green {
  background:#edf4ed;
  color:#4e7c52
}
.tag.blue {
  background:#edf4ef;
  color:#4e775d
}
.record-link {
  font-size:11px;
  font-weight:550;
  max-width:230px;
  color:#3c5546
}
.ledger-tools {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:20px
}
.search-field {
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 13px;
  min-width:150px
}
.search-field svg {
  width:16px;
  height:16px;
  color:#8b988b
}
.search-field input {
  border:0;
  background:transparent;
  outline:0;
  min-width:0;
  padding:11px 0;
  width:100%;
  font-size:12px
}
.filter-field {
  display:flex;
  align-items:center;
  gap:8px;
  color:#76806e;
  font-size:11px
}
.filter-field input,.ledger-tools select {
  border:1px solid var(--line);
  background:white;
  border-radius:7px;
  padding:9px 10px;
  max-width:175px;
  height:40px;
  font-size:11px;
  color:#65745f
}
.filter-tabs {
  gap:17px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
  padding-bottom:0
}
.filter-tabs button {
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:none;
  padding:5px 1px 10px;
  font-size:12px;
  min-height:38px;
  color:#7c8879
}
.filter-tabs button.active {
  background:none;
  color:var(--blue);
  border-color:var(--blue);
  font-weight:600
}
.ledger-card {
  padding:0 18px 12px!important
}
.ledger-summary {
  border-top:1px solid var(--line);
  font-size:11px;
  color:#4e6653;
  padding:15px 5px 5px;
  font-variant-numeric:tabular-nums
}
.filter-explanation {
  font-size:10px;
  color:var(--ink-3);
  padding:0 5px
}
.partner-grid {
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px
}
.partner-card {
  padding:22px;
  background:white;
  border-radius:12px;
  box-shadow:none
}
.partner-card:hover,.set-card:hover {
  box-shadow:0 4px 14px #2a4b2a08;
  transform:translateY(-1px)
}
.partner-card .p-head {
  margin-bottom:18px;
  justify-content:space-between
}
.partner-card .p-head h4 {
  font-size:16px;
  font-weight:550
}
.p-rows {
  font-size:12px!important;
  row-gap:9px!important
}
.settings-grid {
  gap:16px
}
.set-card {
  padding:22px;
  border-radius:12px;
  min-height:118px
}
.set-card h4 {
  font-size:13px
}
.set-card p {
  font-size:11px;
  line-height:1.8
}
.set-card svg {
  stroke:var(--blue);
  stroke-width:1.6
}
.empty {
  padding:32px 15px;
  color:var(--ink-3);
  font-size:12px
}
.empty strong {
  display:block;
  color:#455d48;
  font-size:15px;
  font-weight:550
}
.empty p {
  margin:6px 0 16px
}
.empty-symbol {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  background:var(--blue-weak);
  color:var(--blue);
  border-radius:50%;
  margin-bottom:12px
}
.modal-open {
  overflow:hidden
}
.modal-mask {
  padding:0;
  justify-content:flex-end;
  align-items:stretch;
  background:#1b30294a;
  backdrop-filter:blur(3px);
  overflow:hidden;
  z-index:100
}
.modal {
  width:min(560px,100%);
  max-width:560px;
  height:100dvh;
  max-height:100dvh;
  border-radius:18px 0 0 18px;
  box-shadow:-10px 0 50px #1d342d1a;
  display:flex;
  flex-direction:column;
  position:relative;
  animation:drawerIn .23s ease
}
.modal-head {
  padding:23px 26px;
  border-bottom:1px solid var(--line);
  flex:none
}
.modal-head h4 {
  font-size:19px;
  font-weight:600;
  letter-spacing:-.3px
}
.modal-close {
  font-size:27px;
  font-weight:300;
  width:34px;
  height:34px;
  color:#899486;
  background:#f4f6f0
}
.modal-body {
  padding:23px 26px;
  overflow:auto;
  max-height:none;
  flex:1;
  overscroll-behavior:contain
}
.modal-foot {
  padding:17px 26px;
  border-top:1px solid var(--line);
  background:#fafbf8;
  flex:none;
  border-radius:0 0 0 18px;
  gap:8px
}
.modal-foot .btn.primary {
  margin-left:auto
}
.form-grid {
  grid-template-columns:1fr 1fr;
  gap:19px 16px
}
.field {
  gap:7px;
  min-width:0
}
.field label {
  font-size:12px;
  color:#5e705f;
  font-weight:500
}
.field input,.field select,.field textarea {
  padding:10px 12px;
  border:1px solid #dce3d9;
  border-radius:7px;
  font-size:14px;
  min-height:43px;
  width:100%
}
.field input:focus,.field select:focus,.field textarea:focus {
  border-color:#83ac92;
  box-shadow:0 0 0 3px #176b5510
}
.field input:disabled {
  background:#f2f4ef;
  color:#8b9687
}
.field input[type=number][name=amount] {
  font-size:22px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.5px;
  font-weight:550
}
.field label .req {
  color:#8da08a
}
.radio-row {
  gap:7px
}
.radio-pill span {
  border:1px solid var(--line);
  border-radius:6px;
  font-size:11px;
  min-height:38px;
  padding:8px 11px
}
.radio-pill input:checked+span {
  background:#edf4ed;
  border-color:#8fb39a;
  color:#356742
}
.radio-pill input:focus-visible+span,.switch input:focus-visible+.track {
  outline:3px solid #78b29c;
  outline-offset:3px
}
.sub-form {
  background:#f5f8f2;
  border:1px solid #e4eade;
  padding:16px;
  border-radius:9px;
  gap:15px
}
.more summary {
  font-size:12px;
  color:#6b8868
}
.form-error {
  border-radius:7px;
  padding:11px 13px;
  border:1px solid #e6c0b4;
  background:#fcf2ec;
  color:#a04b35;
  font-size:12px;
  margin-bottom:17px
}
.discard-guard {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:#fff4df;
  padding:20px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  box-shadow:0 -6px 20px #40381415;
  z-index:1
}
.discard-guard span {
  flex:1
}
.record-hero {
  border-bottom:1px solid var(--line);
  padding:0 0 23px;
  margin-bottom:22px
}
.record-hero h3 {
  font-size:19px;
  line-height:1.4;
  margin:14px 0 8px;
  font-weight:600
}
.record-hero p {
  font-size:12px;
  color:var(--ink-3);
  margin-top:8px
}
.record-amount {
  font-size:35px;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
  font-weight:550;
  color:#335940
}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:0;
  margin-bottom:22px
}
.detail-grid dt {
  font-size:11px;
  color:var(--ink-3);
  margin-bottom:4px
}
.detail-grid dd {
  font-size:14px;
  margin:0;
  font-variant-numeric:tabular-nums
}
.modal-body h5 {
  font-size:13px;
  font-weight:550;
  margin:23px 0 10px
}
.notice,.note-box {
  background:#f2f6ef;
  border:1px solid #e4eade;
  border-radius:8px;
  padding:13px 15px;
  font-size:12px;
  color:#64765d;
  margin-bottom:16px;
  line-height:1.8
}
.muted {
  color:var(--ink-3);
  font-size:12px
}
.payment-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.payment-row small {
  display:block;
  font-size:10px;
  color:var(--ink-3);
  margin-top:3px
}
.payment-row b {
  font-size:14px;
  font-variant-numeric:tabular-nums;
  font-weight:550
}
.timeline-entry {
  border-left:2px solid #dce6d8;
  padding:0 0 18px 15px;
  font-size:12px
}
.timeline-entry p {
  color:#76806e
}
.timeline-entry small {
  font-size:10px;
  color:var(--ink-3)
}
.danger-text {
  color:var(--red)
}
.toast {
  background:#253e2f;
  border-radius:9px;
  padding:12px 19px;
  bottom:28px;
  z-index:150;
  font-size:12px;
  max-width:calc(100vw - 36px);
  text-align:center;
  box-shadow:0 7px 28px #203d2820;
  white-space:normal;
  pointer-events:none
}
.concealed #mNet {
  filter:blur(6px);
  user-select:none
}
.add-chip {
  flex-wrap:wrap
}
.add-chip input {
  flex:1;
  min-width:110px
}
.mini-stat .v {
  overflow-wrap:anywhere
}
.switch {
  margin-right:6px
}
#view-reminders .todo-item {
  display:flex;
  flex-wrap:wrap
}
#view-reminders .todo-body {
  min-width:160px
}
#view-reminders .todo-rank {
  width:75px
}
#view-reminders .todo-actions {
  margin-left:auto
}
@keyframes drawerIn {
  from {
  transform:translateX(35px);
  opacity:.7
}
to {
  transform:none;
  opacity:1
}
}
@media(min-width:1700px) {
  .main {
  padding-left:52px;
  padding-right:52px
}
.overview-grid {
  grid-template-columns:1fr 1.15fr
}
.balance-value {
  font-size:52px
}
}
@media(max-width:1150px) {
  :root {
  --sidebar:188px
}
.sidebar {
  padding:0 10px
}
.main {
  padding:0 24px 36px
}
.head-actions .btn {
  padding:0 11px
}
.head-actions .btn svg {
  display:none
}
.page-head h2 {
  font-size:25px
}
.balance-panel {
  padding:20px 20px 0
}
.balance-foot {
  margin:0 -20px;
  padding:11px 20px
}
.cashflow-panel {
  padding:20px 20px 15px
}
.cashflow-totals strong {
  font-size:22px
}
.balance-foot-note {
  display:none
}
.todo-amount {
  padding-right:0;
  min-width:78px
}
.todo-actions .btn {
  padding:0 7px
}
.todo-item {
  gap:10px
}
.metric .value {
  font-size:24px
}
.topbar-right {
  gap:12px
}
.sidebar-help {
  padding:20px 8px
}
.side-foot {
  font-size:9px
}
}
@media(max-width:900px) and (min-width:769px) {
  .page-head {
  align-items:flex-start
}
.head-actions {
  width:100%
}
.overview-grid {
  grid-template-columns:1fr
}
.balance-value {
  font-size:42px
}
.balance-panel {
  padding-top:20px
}
.balance-bottom {
  padding-bottom:15px
}
.cashflow-panel {
  padding-bottom:10px
}
.cashflow-chart {
  height:75px
}
.overview-metrics {
  gap:10px
}
.metric {
  padding:14px
}
.metric .value {
  font-size:21px
}
.todo-item {
  grid-template-columns:30px minmax(0,1fr) auto
}
.todo-actions {
  grid-column:2/4;
  justify-content:flex-end
}
.topbar-right #todayLabel {
  display:none
}
}
@media(max-width:768px) {
  .sidebar {
  display:none
}
.main {
  margin:0;
  width:100%;
  padding:0 18px 100px;
  max-width:100%
}
.topbar {
  height:58px;
  margin-bottom:21px;
  font-size:11px
}
.topbar-right #todayLabel {
  display:none
}
.topbar-right .user-avatar {
  width:27px;
  height:27px
}
.demo-notice {
  font-size:10px;
  padding:9px 11px;
  margin-bottom:20px;
  align-items:flex-start
}
.demo-notice .text-link {
  white-space:nowrap;
  font-size:10px
}
.page-head {
  gap:16px;
  margin-bottom:20px
}
.page-head h2 {
  font-size:27px
}
.page-head .sub {
  font-size:11px
}
.eyebrow {
  font-size:9px
}
.head-actions {
  gap:8px
}
.head-actions .btn {
  min-height:42px;
  font-size:12px;
  padding:0 12px
}
.head-actions .btn svg {
  display:block;
  width:13px
}
.overview-grid {
  grid-template-columns:1fr;
  gap:12px;
  margin-bottom:12px
}
.balance-panel {
  padding:20px 22px 0
}
.balance-value {
  font-size:40px;
  margin:10px 0 18px
}
.balance-bottom {
  padding-bottom:16px
}
.balance-bottom strong {
  font-size:18px
}
.balance-foot {
  margin:0 -22px;
  padding:10px 22px
}
.balance-foot-note {
  display:inline;
  margin-left:auto;
  font-size:9px
}
.cashflow-panel {
  padding:18px 20px 13px
}
.cashflow-totals {
  margin-top:13px
}
.cashflow-totals strong {
  font-size:25px
}
.cashflow-chart {
  height:75px
}
.overview-metrics {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:20px
}
.overview-metrics .metric {
  padding:15px
}
.metric .value {
  font-size:23px;
  margin-top:8px
}
.overview-metrics .metric:last-child {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:0 12px;
  background:#fffcf7
}
.overview-metrics .metric:last-child .label {
  grid-row:1
}
.overview-metrics .metric:last-child .label:after {
  display:none
}
.overview-metrics .metric:last-child .value {
  grid-column:2;
  grid-row:1/3;
  margin:0
}
.overview-metrics .metric:last-child .extra {
  grid-row:2
}
.card {
  padding:18px 16px;
  margin-bottom:16px
}
.section-head {
  gap:8px;
  margin-bottom:7px
}
.card h3 {
  font-size:13px;
  white-space:nowrap
}
.count-tag {
  font-size:9px;
  margin-left:0
}
.segmented button {
  font-size:10px;
  padding:5px 8px;
  min-height:30px
}
.todo-item {
  grid-template-columns:29px minmax(0,1fr) auto;
  gap:9px;
  padding:15px 0
}
.todo-icon {
  width:28px;
  height:32px;
  font-size:18px
}
.todo-title {
  font-size:12px
}
.todo-meta {
  font-size:9px;
  max-width:100%
}
.todo-amount {
  min-width:77px;
  padding-right:0
}
.todo-amount>b {
  font-size:12px
}
.todo-amount>span {
  font-size:9px
}
.todo-actions {
  grid-column:2/-1;
  justify-content:flex-end;
  width:auto;
  margin-top:3px
}
.todo-actions .btn {
  flex:none;
  font-size:10px;
  padding:0 12px;
  min-height:34px
}
.card-footer {
  font-size:9px
}
.tbl-responsive {
  overflow:visible
}
.tbl-responsive table.tbl {
  min-width:0;
  display:block;
  width:100%;
  border:0!important;
  background:transparent!important
}
.tbl-responsive table.tbl tbody,.tbl-responsive table.tbl tfoot {
  display:block;
  width:100%
}
.tbl-responsive table.tbl tbody tr,.tbl-responsive table.tbl tfoot tr {
  background:#fafbf8;
  padding:13px!important;
  border:1px solid #e5eadd;
  border-radius:9px;
  margin-bottom:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px 12px;
  width:100%
}
.tbl-responsive table.tbl td {
  padding:0!important;
  font-size:11px;
  gap:6px;
  min-width:0;
  overflow-wrap:anywhere;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap
}
.tbl-responsive table.tbl td::before {
  font-size:10px;
  white-space:nowrap
}
.tbl-responsive table.tbl td:first-child {
  grid-column:1/-1;
  font-weight:550;
  padding-bottom:3px!important
}
.tbl-responsive table.tbl td:has(.empty) {
  grid-column:1/-1;
  width:100%;
  display:block
}
.tbl-responsive table.tbl td[data-th=内容],.tbl-responsive table.tbl td[data-th=所属项目] {
  grid-column:1/-1
}
.record-link {
  max-width:100%;
  font-size:12px
}
.ledger-tools {
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:12px
}
.search-field {
  flex-basis:100%
}
.search-field input {
  font-size:14px;
  padding:12px 0
}
.filter-field {
  flex:1
}
.filter-field input {
  max-width:155px;
  font-size:12px
}
.ledger-tools select {
  max-width:160px;
  font-size:12px
}
.ledger-tools>.text-link {
  margin-left:auto
}
.filter-tabs {
  gap:15px;
  overflow-x:auto;
  flex-wrap:nowrap
}
.filter-tabs button {
  font-size:11px;
  white-space:nowrap
}
.ledger-card {
  padding:14px!important
}
.ledger-summary {
  font-size:10px
}
.filter-explanation {
  font-size:9px
}
.partner-grid {
  grid-template-columns:1fr;
  gap:12px
}
.settings-grid {
  grid-template-columns:1fr 1fr;
  gap:10px
}
.set-card {
  padding:16px 13px;
  display:block;
  min-height:150px
}
.set-card svg {
  margin-bottom:10px;
  width:19px
}
.set-card h4 {
  font-size:12px
}
.set-card p {
  font-size:10px
}
.tabbar {
  display:flex;
  box-shadow:0 -4px 20px #34503705;
  background:#fcfdfb;
  padding:4px 7px max(4px,env(safe-area-inset-bottom));
  border-top:1px solid #e4eadd
}
.tabbar button {
  min-height:57px;
  font-size:9px;
  gap:4px;
  color:#85917e
}
.tabbar button svg {
  width:19px;
  height:19px;
  stroke-width:1.6
}
.tabbar button.active {
  color:#366c47;
  background:#edf3e9;
  border-radius:9px
}
.modal-mask {
  align-items:flex-end;
  justify-content:center;
  padding:0;
  background:#263b304d
}
.modal {
  align-self:flex-end;
  width:100%;
  height:auto;
  max-height:94dvh;
  border-radius:18px 18px 0 0;
  animation:sheetUp .2s ease
}
.modal-head {
  padding:18px 20px
}
.modal-head h4 {
  font-size:18px
}
.modal-body {
  padding:20px;
  max-height:calc(94dvh - 143px)
}
.modal-foot {
  padding:14px 20px max(15px,env(safe-area-inset-bottom));
  border-radius:0
}
.modal-foot .btn {
  min-height:43px;
  font-size:12px;
  padding:0 13px
}
.form-grid {
  grid-template-columns:1fr 1fr;
  gap:17px 13px
}
.field input,.field select,.field textarea {
  font-size:16px;
  min-height:44px
}
.field label {
  font-size:11px
}
.field input[type=number][name=amount] {
  font-size:22px
}
.sub-form {
  grid-template-columns:1fr;
  padding:13px
}
.radio-row {
  gap:7px
}
.radio-pill span {
  font-size:11px;
  min-height:43px;
  padding:9px 10px
}
.toast {
  bottom:85px;
  font-size:12px
}
.discard-guard {
  padding:16px;
  gap:7px;
  flex-wrap:wrap
}
.discard-guard span {
  width:100%;
  flex-basis:100%
}
.account-detail.open {
  margin-bottom:16px
}
.account-detail .inner {
  padding:16px
}
.add-chip input {
  width:100%!important;
  min-height:44px
}
.mini-stat {
  min-width:0!important
}
.mini-stat .v {
  font-size:17px
}
.mini-stat .l {
  font-size:10px
}
}
@media(max-width:380px) {
  .main {
  padding-left:12px;
  padding-right:12px
}
.head-actions .btn {
  font-size:11px;
  padding:0 8px
}
.head-actions .btn svg {
  display:none
}
.month-tag {
  margin-left:8px;
  font-size:9px
}
.balance-value {
  font-size:36px
}
.metric .value {
  font-size:21px
}
.card {
  padding:17px 12px
}
.section-head {
  align-items:flex-start;
  flex-wrap:wrap
}
.section-head .segmented {
  margin-left:auto
}
.todo-amount>b {
  font-size:11px
}
.todo-title {
  font-size:11px
}
.form-grid {
  grid-template-columns:1fr
}
.form-grid>.field {
  grid-column:1
}
.cashflow-totals strong {
  font-size:23px
}
.filter-field input {
  max-width:133px
}
.ledger-tools select {
  max-width:140px
}
.demo-notice .text-link {
  display:none
}
.settings-grid {
  grid-template-columns:1fr
}
.set-card {
  min-height:0;
  display:flex;
  gap:12px
}
.record-amount {
  font-size:31px
}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}
}
.switch input { inset:0; width:100%; height:100%; z-index:1; cursor:pointer; }
.switch .track { pointer-events:none; }
.radio-pill input { inset:0; width:100%; height:100%; min-height:0; margin:0; z-index:1; cursor:pointer; pointer-events:auto; }
/* Operational controls remain readable and reachable on touch screens. */
@media(max-width:768px) {
  .page-head { align-items:flex-start; }
  .head-actions .btn,.todo-actions .btn,.btn.sm { min-height:44px; }
  .segmented button { min-height:36px; }
  .metric .label { font-size:12px; }
  .metric .extra,.todo-meta { font-size:11px; }
  .todo-amount>span { font-size:10px; }
  .chart-group>span { font-size:10px; }
  .radio-pill span { min-height:44px; }
  .modal .metrics { grid-template-columns:1fr!important; }
  .modal .metric .label:after { display:none; }
}