:root {
      color-scheme: light;
      --page: #f5fbf7;
      --paper: #fff;
      --ink: #152421;
      --muted: #778480;
      --line: #dceee3;
      --green: #16A34A;
      --green-dark: #12803C;
      --mint: #eaf8ef;
      --amber: #a76a11;
      --amber-bg: #fff5e4;
      --red: #bd4d4d;
      --red-bg: #fff0ef;
      --shadow: 0 12px 36px #18372c0b;
      --radius: 22px
    }

    * {
      box-sizing: border-box
    }

    html {
      background: var(--page);
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--page);
      color: var(--ink);
      font: 500 14px/1.5 "DM Sans", system-ui, sans-serif;
      padding: env(safe-area-inset-top) 0 calc(86px + env(safe-area-inset-bottom))
    }

    button,
    input,
    select {
      font: inherit;
      color: inherit
    }

    button {
      cursor: pointer
    }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 3px solid #188c6b55;
      outline-offset: 2px
    }

    svg {
      display: block;
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .app {
      width: min(1180px, 100%);
      margin: 0 auto;
      padding: 0 28px
    }

    .topbar {
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line)
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      font: 800 16px/1 "Manrope", sans-serif;
      letter-spacing: -.4px
    }

    .brand-icon {
      width: 37px;
      height: 37px;
      border-radius: 13px;
      background: var(--green);
      color: white;
      display: grid;
      place-items: center;
      box-shadow: 0 5px 14px #107c6233
    }

    .brand-icon svg {
      width: 21px;
      height: 21px
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .today-label {
      font-size: 12px;
      color: var(--muted)
    }

    .icon-button,
    .button,
    .nav-button {
      border: 0
    }

    .icon-button {
      width: 40px;
      height: 40px;
      border-radius: 13px;
      background: white;
      color: var(--muted);
      display: grid;
      place-items: center;
      transition: background .2s, transform .2s
    }

    .icon-button:hover {
      background: var(--mint);
      transform: translateY(-1px)
    }

    main {
      padding: 32px 0 54px
    }

    .page-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin: 0 0 22px
    }

    .eyebrow {
      font-size: 11px;
      font-weight: 700;
      color: var(--green);
      letter-spacing: 1.35px;
      text-transform: uppercase
    }

    h1,
    h2,
    h3,
    p {
      margin: 0
    }

    h1 {
      margin-top: 5px;
      font: 800 clamp(25px, 4vw, 34px)/1.15 "Manrope", sans-serif;
      letter-spacing: -1.15px
    }

    .page-subtitle {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px
    }

    .button {
      min-height: 43px;
      padding: 0 16px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-weight: 700;
      transition: transform .18s, background .18s, box-shadow .18s
    }

    .button:active {
      transform: scale(.97)
    }

    .button-primary {
      background: var(--green);
      color: white;
      box-shadow: 0 5px 13px #107c6226
    }

    .button-primary:hover {
      background: var(--green-dark)
    }

    .button-soft {
      background: var(--mint);
      color: var(--green-dark)
    }

    .button-cancel {
      flex: 1;
      background: #f0f1f2;
      color: #17212a;
      border: 1px solid #d8dde0
    }

    .button-plain {
      background: transparent;
      color: var(--muted)
    }

    .button-danger {
      background: var(--red-bg);
      color: var(--red)
    }

    .button svg {
      width: 17px;
      height: 17px
    }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 210px;
      padding: 25px 28px;
      border-radius: 27px;
      background: linear-gradient(115deg, #123b31, #0d5947 60%, #11755c);
      color: white;
      box-shadow: 0 18px 45px #123b3129;
      animation: rise .48s ease both
    }

    .hero:after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      border: 1px solid #ffffff14;
      border-radius: 50%;
      right: -44px;
      top: -150px;
      box-shadow: 0 0 0 28px #ffffff08, 0 0 0 58px #ffffff05
    }

    .hero-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #d0e3dc;
      font-size: 12px
    }

    .hero-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 20px;
      background: #ffffff15;
      color: #e7f6ef;
      font-size: 11px
    }

    .live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #83e0b6;
      box-shadow: 0 0 0 4px #83e0b622
    }

    .hero-amount {
      position: relative;
      z-index: 1;
      margin-top: 22px;
      font: 800 clamp(32px, 7vw, 48px)/1 "Manrope", sans-serif;
      letter-spacing: -2px;
      font-variant-numeric: tabular-nums
    }

    .hero-caption {
      position: relative;
      z-index: 1;
      margin-top: 8px;
      color: #d0e3dc;
      font-size: 12px
    }

    .hero-bottom {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 24px;
      margin-top: 24px
    }

    .hero-bottom span {
      display: block;
      color: #c5ded4;
      font-size: 11px
    }

    .hero-bottom b {
      display: block;
      margin-top: 2px;
      color: white;
      font: 700 14px "Manrope", sans-serif
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px
    }

    .summary-card {
      min-height: 108px;
      padding: 18px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 19px;
      box-shadow: var(--shadow);
      animation: rise .5s ease both
    }

    .summary-card:nth-child(2) {
      animation-delay: .05s
    }

    .summary-card:nth-child(3) {
      animation-delay: .1s
    }

    .summary-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--muted);
      font-size: 12px
    }

    .summary-icon {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      background: var(--mint);
      color: var(--green);
      display: grid;
      place-items: center
    }

    .summary-icon svg {
      width: 16px;
      height: 16px
    }

    .summary-value {
      margin-top: 10px;
      font: 800 23px/1.1 "Manrope", sans-serif;
      letter-spacing: -.7px;
      font-variant-numeric: tabular-nums
    }

    .home-transfer-list {
      display: grid;
      gap: 9px
    }

    .home-transfer {
      width: 100%;
      min-height: 74px;
      padding: 8px 9px;
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 36px;
      align-items: center;
      gap: 8px;
      border: 1px solid #dfe1e0;
      border-radius: 22px;
      background: #e4e5e4;
      box-shadow: none;
      text-align: left;
      cursor: pointer;
      transition: transform .18s, border-color .18s, background .18s
    }

    .home-transfer:hover {
      transform: translateY(-1px);
      border-color: #b9dfc6;
      background: #eef0ef
    }

    .home-transfer .bank-logo {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 0;
      background: #fff
    }

    .home-transfer-party {
      display: block;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font: 600 15px/1.2 "Manrope", sans-serif;
      color: #202526
    }

    .home-transfer-amount {
      display: block;
      margin-top: 5px;
      color: #050606;
      font: 800 17px/1.1 "Manrope", sans-serif;
      letter-spacing: -.25px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap
    }

    .home-transfer.pending .home-transfer-amount {
      color: #ff4545
    }

    .home-transfer-action {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: var(--kms-accent, #16A34A);
      color: #fff;
      box-shadow: 0 4px 12px rgba(22, 163, 74, .24)
    }

    .home-transfer-action svg {
      width: 23px;
      height: 23px;
      stroke-width: 2.6
    }

    .home-transfer-action.dismiss {
      background: #ff4545;
      color: #fff;
      box-shadow: none
    }

    .home-transfer-action.awaiting-confirmation {
      background: #20a852
    }

    .home-transfer-controls {
      display: flex;
      justify-content: center
    }

    .home-transfer .bank-logo img {
      border-radius: 50%
    }

    .section {
      margin-top: 29px
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 1px 13px
    }

    .section-head h2 {
      font: 800 17px "Manrope", sans-serif;
      letter-spacing: -.35px
    }

    .section-hint {
      font-size: 11px;
      color: var(--muted)
    }

    .bank-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px
    }

    .bank-card {
      min-width: 0;
      padding: 16px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 19px;
      text-align: left;
      box-shadow: var(--shadow);
      transition: transform .2s, border-color .2s, box-shadow .2s;
      animation: rise .45s ease both
    }

    .bank-card:hover {
      transform: translateY(-3px);
      border-color: #c9dfd5;
      box-shadow: 0 16px 36px #18372c12
    }

    .bank-head {
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .bank-logo {
      position: relative;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 14px;
      background: #f0f6f3;
      color: var(--green);
      flex: none
    }

    .bank-logo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: white
    }

    .bank-logo svg {
      width: 23px;
      height: 23px
    }

    .bank-link {
      color: #9ba7a2
    }

    .bank-name {
      margin-top: 13px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .bank-balance {
      margin-top: 3px;
      font: 800 19px "Manrope", sans-serif;
      letter-spacing: -.45px
    }

    .bank-meta {
      margin-top: 5px;
      color: var(--muted);
      font-size: 11px
    }

    .panel {
      background: white;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow);
      overflow: hidden
    }

    .transaction {
      width: 100%;
      padding: 13px 16px;
      display: grid;
      grid-template-columns: 43px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      text-align: left;
      background: white;
      border: 0;
      border-bottom: 1px solid #eff2f0;
      transition: background .18s
    }

    .transaction:last-child {
      border-bottom: 0
    }

    .transaction:hover {
      background: #f9fbfa
    }

    .person-avatar {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: #eef5f1;
      color: var(--green);
      font: 800 15px "Manrope", sans-serif
    }

    .transaction-main {
      min-width: 0
    }

    .transaction-name {
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .transaction-detail {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .transaction-detail .bank-logo {
      width: 18px;
      height: 18px;
      border-radius: 6px
    }

    .transaction-detail .bank-logo svg {
      width: 12px;
      height: 12px
    }

    .transaction-money {
      text-align: right;
      font: 800 14px "Manrope", sans-serif;
      white-space: nowrap;
      font-variant-numeric: tabular-nums
    }

    .transaction-money.out {
      color: var(--ink)
    }

    .transaction-money.in {
      color: var(--green)
    }

    .status {
      display: inline-flex;
      margin-top: 4px;
      padding: 2px 7px;
      border-radius: 8px;
      background: var(--mint);
      color: var(--green);
      font: 700 10px "DM Sans", sans-serif
    }

    .status.pending {
      background: var(--amber-bg);
      color: var(--amber)
    }

    .empty {
      padding: 32px 16px;
      text-align: center;
      color: var(--muted);
      font-size: 13px
    }

    .empty-symbol {
      width: 45px;
      height: 45px;
      display: grid;
      place-items: center;
      margin: 0 auto 10px;
      border-radius: 15px;
      background: #f0f6f3;
      color: var(--green)
    }

    .empty-symbol svg {
      width: 21px;
      height: 21px
    }

    .filter-panel {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
      gap: 9px;
      padding: 13px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 18px;
      min-width: 0;
      overflow: visible
    }

    .control {
      width: 100%;
      min-width: 0;
      height: 42px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fbfcfb;
      font-size: 12px
    }

    .date-picker-trigger {
      width: 100%;
      height: 42px;
      padding: 0 11px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fbfcfb;
      color: var(--ink);
      font-size: 12px;
      text-align: left
    }

    .date-picker-trigger svg {
      width: 16px;
      height: 16px;
      color: var(--green);
      flex: none
    }

    .date-picker-trigger.empty {
      color: var(--muted)
    }

    .calendar-popover {
      position: fixed;
      z-index: 1000;
      width: min(486px, calc(100vw - 24px));
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 20px 55px #18372c22
    }

    .calendar-popover[hidden] {
      display: none
    }

    .calendar-top,
    .calendar-heading,
    .calendar-actions,
    .calendar-range {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px
    }

    .calendar-top {
      margin-bottom: 12px
    }

    .calendar-title {
      font: 800 16px "Manrope", sans-serif
    }

    .calendar-caption {
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px
    }

    .calendar-switch {
      display: flex;
      gap: 3px;
      padding: 3px;
      border-radius: 10px;
      background: var(--mint)
    }

    .calendar-switch button,
    .calendar-shortcut,
    .calendar-nav {
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700
    }

    .calendar-switch button {
      padding: 6px 9px
    }

    .calendar-switch button.selected {
      background: #fff;
      color: var(--green-dark);
      box-shadow: 0 2px 6px #18372c12
    }

    .calendar-heading {
      margin: 8px 0 10px
    }

    .calendar-heading strong {
      font: 800 14px "Manrope", sans-serif
    }

    .calendar-nav {
      width: 32px;
      height: 30px;
      background: #f4faf6;
      color: var(--ink);
      font-size: 18px
    }

    .calendar-week,
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 3px
    }

    .calendar-week {
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 10px;
      text-align: center
    }

    .calendar-day {
      min-height: 34px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink);
      font-size: 12px
    }

    .calendar-day.muted {
      color: #b8c2bd
    }

    .calendar-day.today {
      box-shadow: inset 0 0 0 1px #8bd1a8
    }

    .calendar-day.selected {
      background: var(--green);
      color: #fff;
      font-weight: 800
    }

    .calendar-day.in-range {
      background: #e2f8eb;
      border-radius: 0
    }

    .calendar-day.range-start {
      border-radius: 14px 0 0 14px
    }

    .calendar-day.range-end {
      border-radius: 0 14px 14px 0
    }

    .calendar-shortcuts {
      display: flex;
      gap: 5px;
      margin: 12px 0;
      overflow: auto
    }

    .calendar-shortcut {
      padding: 7px 9px;
      background: #f4faf6;
      white-space: nowrap
    }

    .calendar-range {
      justify-content: flex-start;
      margin: 8px 0;
      color: var(--muted);
      font-size: 11px
    }

    .calendar-actions {
      justify-content: flex-end;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid var(--line)
    }

    .calendar-actions button {
      min-height: 34px;
      padding: 0 12px;
      border: 0;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 700
    }

    .calendar-clear {
      background: transparent;
      color: var(--muted)
    }

    .calendar-apply {
      background: var(--green);
      color: #fff
    }

    .sheet-date-picker {
      display: grid;
      gap: 4px
    }

    .sheet-date-picker .date-picker-trigger {
      height: 46px;
      background: #fbfcfb
    }

    .control:focus {
      border-color: #a7cdbd;
      outline: 3px solid #107c6215
    }

    .collection-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 44px;
      gap: 10px;
      align-items: center;
      margin: 0 0 18px
    }

    .collection-search {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      height: 52px;
      margin: 0;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      box-shadow: var(--shadow);
      color: var(--muted)
    }

    .party-filter-button {
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #fff;
      color: var(--muted);
      box-shadow: var(--shadow)
    }

    .party-filter-button svg {
      width: 19px;
      height: 19px
    }

    .party-sort {
      width: 100%;
      height: 42px;
      margin: -8px 0 16px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff
    }

    .statement-document {
      max-width: 1120px;
      margin: 0 auto;
      padding: 34px;
      background: #fff;
      color: #133b31;
      border-radius: 22px;
      box-shadow: 0 14px 42px #18372c13
    }

    .statement-doc-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px
    }

    .statement-doc-brand {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .statement-doc-brand>.bank-logo,
    .statement-doc-brand>.person-avatar {
      width: 62px;
      height: 62px;
      border-radius: 50%
    }

    .statement-doc-brand h1 {
      margin: 0;
      font-size: 31px;
      letter-spacing: -1px
    }

    .statement-doc-brand p {
      margin-top: 2px;
      font-size: 16px
    }

    .statement-rule {
      height: 2px;
      margin: 22px 0;
      background: #129a5c
    }

    .statement-details,
    .statement-accounts {
      padding: 16px 18px;
      border: 1px solid #bcebd6;
      border-radius: 14px;
      background: linear-gradient(120deg, #fbfffd, #f1fbf6)
    }

    .statement-details h2,
    .statement-accounts h2,
    .statement-table-wrap h2 {
      margin: 0 0 13px;
      font-size: 20px
    }

    .statement-details-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 13px 36px
    }

    .statement-details-grid div {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 9px
    }

    .statement-details-grid span {
      color: #62736d
    }

    .statement-accounts {
      margin-top: 12px
    }

    .statement-accounts p {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      margin: 0;
      padding: 9px 0;
      border-bottom: 1px solid #dceee5
    }

    .statement-accounts p:last-child {
      border-bottom: 0
    }

    .statement-doc-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 16px 0
    }

    .statement-doc-kpis article {
      padding: 15px;
      border: 1px solid #ccefe0;
      border-radius: 13px
    }

    .statement-doc-kpis span {
      display: block;
      font-size: 12px;
      color: #62736d
    }

    .statement-doc-kpis b {
      display: block;
      margin-top: 6px;
      font-size: 22px;
      color: #078347
    }

    .statement-table-wrap {
      margin-top: 23px
    }

    .statement-table-wrap table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      border: 1px solid #cdeee0;
      border-radius: 12px;
      font-size: 12px
    }

    .statement-table-wrap th {
      padding: 11px;
      text-align: left;
      background: #c9f2df
    }

    .statement-table-wrap td {
      padding: 10px 11px;
      border-top: 1px solid #e1f2e9
    }

    .statement-table-wrap tr:nth-child(even) td {
      background: #f7fcf9
    }

    .statement-table-wrap .credit {
      color: #078347;
      font-weight: 800
    }

    .statement-table-wrap .debit {
      color: #dc4d4d;
      font-weight: 800
    }

    .statement-doc-foot {
      margin-top: 30px;
      padding-top: 16px;
      border-top: 2px solid #129a5c;
      color: #64736e;
      font-size: 12px
    }

    .collection-search>svg {
      flex: none;
      width: 20px;
      height: 20px
    }

    .collection-search input {
      width: 100%;
      min-width: 0;
      height: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font: 500 14px/1.5 "DM Sans", system-ui, sans-serif
    }

    .collection-search input::placeholder {
      color: #87938e
    }

    .collection-search .icon-button {
      width: 38px;
      height: 38px;
      flex: none;
      border: 1px solid var(--line);
      border-radius: 12px
    }

    .calendar-button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--mint);
      color: var(--green);
      box-shadow: 0 4px 12px #18372c12
    }

    .calendar-button svg {
      width: 20px;
      height: 20px
    }

    .statement-totals {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin: 13px 0
    }

    .statement-total {
      padding: 14px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 15px
    }

    .statement-total span {
      display: block;
      color: var(--muted);
      font-size: 11px
    }

    .statement-total b {
      display: block;
      margin-top: 5px;
      font: 800 18px "Manrope", sans-serif;
      font-variant-numeric: tabular-nums
    }

    .statement-title {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .statement-title h1 {
      font-size: 25px
    }

    .seller-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 11px
    }

    .seller-card {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      padding: 15px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 17px;
      box-shadow: var(--shadow);
      text-align: left;
      transition: transform .18s, border-color .18s
    }

    .seller-card:hover {
      transform: translateY(-2px);
      border-color: #c9dfd5
    }

    .seller-open {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: left
    }

    .seller-info {
      min-width: 0;
      flex: 1
    }

    .seller-info b {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .seller-info span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px
    }

    .seller-paid {
      text-align: right;
      font: 800 13px "Manrope", sans-serif;
      white-space: nowrap
    }

    .seller-paid span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font: 500 10px "DM Sans", sans-serif
    }

    .manage-actions {
      display: flex;
      gap: 6px
    }

    .manage-actions .icon-button {
      width: 32px;
      height: 32px;
      background: #f5f8f6
    }

    .manage-actions svg {
      width: 15px;
      height: 15px
    }

    .ledger-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 17px 0 8px
    }

    .ledger-head h2 {
      font: 800 15px "Manrope", sans-serif
    }

    .ledger-day {
      display: flex;
      justify-content: space-between;
      padding: 17px 4px 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700
    }

    .ledger-day span:last-child {
      font-variant-numeric: tabular-nums
    }

    .load-more {
      display: flex;
      justify-content: center;
      margin: 15px auto 0
    }

    .record-pager {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 8px auto 0;
      color: var(--muted);
      font-size: 11px
    }

    .record-pager .button {
      min-height: 32px;
      padding: 0 10px;
      font-size: 11px
    }

    .record-pager .button:disabled {
      opacity: .42;
      cursor: default
    }

    .report-actions {
      display: flex;
      gap: 8px
    }

    .bottom-nav {
      position: fixed;
      z-index: 5;
      left: 50%;
      bottom: calc(9px + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      width: min(500px, calc(100% - 22px));
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 6px;
      border: 1px solid #e6ece9;
      border-radius: 20px;
      background: #ffffffed;
      box-shadow: 0 12px 35px #18372c16;
      backdrop-filter: blur(18px)
    }

    .nav-button {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 14px;
      background: transparent;
      color: #82908a;
      font-size: 11px;
      font-weight: 700;
      transition: background .2s, color .2s
    }

    .nav-button svg {
      width: 18px;
      height: 18px
    }

    .nav-button.active {
      background: var(--mint);
      color: var(--green-dark)
    }

    #backdrop {
      position: fixed;
      inset: 0;
      z-index: 8;
      background: #0f201c77;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s
    }

    #sheet {
      position: fixed;
      z-index: 100100;
      left: 0;
      right: 0;
      bottom: 0;
      width: min(620px, 100%);
      height: auto;
      min-height: 0;
      max-height: min(92dvh, 820px);
      overflow: auto;
      margin: auto;
      padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
      border-radius: 25px 25px 0 0;
      background: var(--page);
      transform: translateY(105%);
      transition: transform .34s cubic-bezier(.2, .75, .25, 1);
      overscroll-behavior: contain
    }

    .sheet-open #backdrop {
      opacity: 1;
      pointer-events: auto
    }

    .sheet-open #sheet {
      transform: none
    }

    .sheet-grab {
      width: 38px;
      height: 4px;
      margin: 0 auto 17px;
      border-radius: 4px;
      background: #cbd4cf
    }

    .sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 14px
    }

    .sheet-head h2 {
      font: 800 19px "Manrope", sans-serif
    }

    .sheet-form {
      display: grid;
      gap: 13px
    }

    .field {
      display: grid;
      gap: 6px
    }

    .field label {
      color: #53615c;
      font-size: 11px;
      font-weight: 700
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      min-height: 46px;
      padding: 0 13px;
      border: 1px solid #e0e8e4;
      border-radius: 12px;
      background: white
    }

    .field textarea {
      padding-top: 11px;
      resize: vertical;
      border: 1px solid #389968;
    }

    .amount-field input {
      height: 60px;
      font: 800 29px "Manrope", sans-serif;
      letter-spacing: -.6px;
      border: 1px solid #389968;
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .bank-picker {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
      gap: 8px
    }

    .bank-choice {
      min-height: 76px;
      padding: 8px 5px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 5px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: white;
      transition: border-color .18s, background .18s
    }

    .bank-choice.selected {
      border-color: var(--green);
      background: var(--mint);
      box-shadow: inset 0 0 0 1px var(--green)
    }

    .bank-choice .bank-logo {
      width: 31px;
      height: 31px;
      border-radius: 10px
    }

    .bank-choice .bank-logo svg {
      width: 18px;
      height: 18px
    }

    .bank-choice span:last-child {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 10px;
      font-weight: 700
    }

    .segmented {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      padding: 4px;
      border-radius: 12px;
      background: #e9efeb
    }

    .segmented button {
      min-height: 37px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700
    }

    .segmented button.selected {
      background: white;
      color: var(--ink);
      box-shadow: 0 2px 6px #15242112
    }

    .sheet-footer {
      display: flex;
      gap: 8px;
      margin-top: 4px
    }

    .sheet-footer .button-primary {
      flex: 1
    }

    .toast {
      position: fixed;
      z-index: 20;
      left: 50%;
      top: calc(13px + env(safe-area-inset-top));
      max-width: calc(100% - 30px);
      padding: 11px 15px;
      border-radius: 12px;
      background: var(--ink);
      color: white;
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -12px);
      transition: opacity .2s, transform .2s;
      font-size: 12px
    }

    .toast.visible {
      opacity: 1;
      transform: translate(-50%, 0)
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(13px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @media(min-width:900px) {
      body {
        padding-bottom: 0
      }

      .bottom-nav {
        position: static;
        transform: none;
        width: min(1180px, 100%);
        margin: 0 auto 24px;
        padding: 0 28px;
        background: transparent;
        border: 0;
        box-shadow: none;
        display: flex;
        justify-content: flex-start;
        gap: 8px
      }

      .nav-button {
        height: 40px;
        padding: 0 15px
      }

      .nav-button.active {
        background: var(--ink);
        color: white
      }

      .app {
        padding: 0 28px
      }

      #sheet {
        bottom: 20px;
        border-radius: 25px;
        box-shadow: 0 25px 80px #0f201c30
      }

      main {
        padding-top: 35px
      }
    }

    @media(max-width:680px) {
      .app {
        padding: 0 16px
      }

      .topbar {
        height: 64px
      }

      .today-label {
        display: none
      }

      main {
        padding: 23px 0 37px
      }

      .page-head {
        align-items: center;
        margin-bottom: 17px
      }

      .page-subtitle {
        font-size: 12px
      }

      .page-head>.button {
        min-width: 40px;
        width: 40px;
        padding: 0;
        font-size: 0
      }

      .page-head>.button svg {
        width: 20px;
        height: 20px
      }

      .hero {
        min-height: 192px;
        padding: 21px 20px;
        border-radius: 23px
      }

      .hero-amount {
        margin-top: 20px
      }

      .summary-grid {
        gap: 8px;
        margin-top: 9px
      }

      .summary-card {
        min-height: 91px;
        padding: 12px 11px;
        border-radius: 15px
      }

      .summary-top {
        font-size: 10px
      }

      .summary-icon {
        width: 25px;
        height: 25px;
        border-radius: 8px
      }

      .summary-value {
        font-size: 17px;
        margin-top: 8px
      }

      .bank-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px
      }

      .bank-card {
        padding: 13px;
        border-radius: 16px
      }

      .bank-balance {
        font-size: 17px
      }

      .section {
        margin-top: 24px
      }

      .filter-panel {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px;
        border-radius: 15px
      }

      .filter-panel .search-control {
        grid-column: 1/-1
      }

      .filter-panel .date-control {
        grid-column: span 1
      }

      .statement-totals {
        gap: 7px
      }

      .statement-total {
        padding: 11px 9px
      }

      .statement-total b {
        font-size: 15px
      }

      .seller-grid {
        grid-template-columns: 1fr;
        gap: 8px
      }

      .seller-card {
        padding: 12px
      }

      .transaction {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 9px;
        padding: 12px
      }

      .transaction .person-avatar {
        width: 38px;
        height: 38px;
        border-radius: 13px
      }

      .transaction-money {
        font-size: 12px
      }

      .transaction-detail {
        font-size: 10px
      }

      .report-actions .button {
        width: 40px;
        padding: 0;
        font-size: 0
      }

      .report-actions .button svg {
        width: 18px;
        height: 18px
      }

      .statement-title h1 {
        font-size: 22px
      }
    }

    @media(max-width:375px) {
      .app {
        padding: 0 12px
      }

      .hero-bottom {
        gap: 16px
      }

      .summary-card {
        padding: 11px 8px
      }

      .summary-top {
        font-size: 9px
      }

      .summary-value {
        font-size: 15px
      }

      .nav-button {
        gap: 4px;
        font-size: 10px
      }

      .bank-card {
        padding: 11px
      }
    }

    @media(max-width:680px) {
      body {
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        padding: env(safe-area-inset-top) 0 calc(76px + env(safe-area-inset-bottom))
      }

      .app {
        padding: 0 14px
      }

      .topbar {
        height: 52px;
        min-height: 52px
      }

      .brand {
        font-size: 13px;
        gap: 8px
      }

      .brand-icon {
        width: 31px;
        height: 31px
      }

      .today-label {
        display: none
      }

      main {
        min-height: 0;
        overflow: visible;
        padding: 9px 0 16px
      }

      .page-head {
        min-height: 40px;
        align-items: center;
        margin-bottom: 8px;
        gap: 7px
      }

      h1 {
        font-size: 23px;
        letter-spacing: -.7px
      }

      .eyebrow {
        font-size: 9px;
        letter-spacing: 1px
      }

      .page-subtitle {
        display: none
      }

      .page-head>.button {
        width: 40px;
        min-width: 40px;
        min-height: 39px;
        padding: 0;
        font-size: 0
      }

      .page-head>.button svg {
        width: 18px;
        height: 18px
      }

      .hero {
        height: 122px;
        min-height: 0;
        padding: 12px 15px;
        border-radius: 18px
      }

      .hero-top {
        font-size: 9px
      }

      .hero-pill {
        padding: 4px 7px;
        font-size: 9px
      }

      .hero-amount {
        margin-top: 10px;
        font-size: 30px;
        letter-spacing: -1px
      }

      .hero-caption {
        margin-top: 2px;
        font-size: 9px
      }

      .hero-bottom {
        gap: 16px;
        margin-top: 9px
      }

      .hero-bottom span {
        font-size: 9px
      }

      .hero-bottom b {
        font-size: 12px
      }

      .summary-grid {
        gap: 6px;
        margin-top: 7px
      }

      .summary-card {
        min-height: 59px;
        padding: 7px 8px;
        border-radius: 12px
      }

      .summary-top {
        font-size: 8px
      }

      .summary-icon {
        width: 21px;
        height: 21px;
        border-radius: 7px
      }

      .summary-icon svg {
        width: 13px;
        height: 13px
      }

      .summary-value {
        margin-top: 4px;
        font-size: 15px
      }

      .section {
        margin-top: 10px
      }

      .section-head {
        min-height: 24px;
        margin-bottom: 6px
      }

      .section-head h2 {
        font-size: 13px
      }

      .section-hint {
        font-size: 9px
      }

      .section-head .button {
        min-height: 29px;
        padding: 0 8px;
        font-size: 9px
      }

      .section-head .button svg {
        width: 13px;
        height: 13px
      }

      .bank-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px
      }

      .bank-card {
        padding: 8px 9px;
        border-radius: 13px
      }

      .bank-card:nth-child(n+5) {
        display: none
      }

      .bank-logo {
        width: 30px;
        height: 30px;
        border-radius: 10px
      }

      .bank-logo svg {
        width: 17px;
        height: 17px
      }

      .bank-head .bank-logo {
        width: 29px;
        height: 29px
      }

      .bank-link svg {
        width: 14px;
        height: 14px
      }

      .bank-name {
        margin-top: 6px;
        font-size: 10px
      }

      .bank-balance {
        font-size: 14px
      }

      .bank-meta {
        margin-top: 1px;
        font-size: 8px
      }

      .transaction {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        gap: 6px;
        padding: 6px 8px
      }

      .transaction .person-avatar {
        width: 29px;
        height: 29px;
        border-radius: 10px;
        font-size: 11px
      }

      .transaction-name {
        font-size: 10px
      }

      .transaction-detail {
        gap: 4px;
        margin-top: 1px;
        font-size: 8px
      }

      .transaction-detail .bank-logo {
        width: 14px;
        height: 14px;
        border-radius: 4px
      }

      .transaction-detail .bank-logo svg {
        width: 9px;
        height: 9px
      }

      .transaction-money {
        font-size: 10px
      }

      .status {
        margin-top: 1px;
        padding: 1px 4px;
        font-size: 8px
      }

      .recent-section .panel .transaction:nth-child(n+3) {
        display: none
      }

      .empty {
        padding: 13px 8px;
        font-size: 10px
      }

      .empty-symbol {
        width: 29px;
        height: 29px;
        margin-bottom: 4px
      }

      .empty-symbol svg {
        width: 15px;
        height: 15px
      }

      .filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        padding: 7px;
        border-radius: 12px
      }

      .filter-panel .search-control {
        grid-column: 1/-1
      }

      .filter-panel .control {
        height: 36px;
        font-size: 10px
      }

      .filter-panel .date-control {
        grid-column: auto
      }

      .statement-totals {
        gap: 5px;
        margin: 7px 0
      }

      .statement-total {
        padding: 7px 6px;
        border-radius: 10px
      }

      .statement-total span {
        font-size: 8px
      }

      .statement-total b {
        margin-top: 3px;
        font-size: 13px
      }

      .ledger-head {
        margin: 5px 0 4px
      }

      .ledger-head h2 {
        font-size: 11px
      }

      .ledger-day {
        padding: 5px 3px 3px;
        font-size: 8px
      }

      .record-pager {
        gap: 7px;
        margin-top: 5px;
        font-size: 15px
      }

      .record-pager .button {
        min-height: 27px;
        padding: 0 8px;
        font-size: 9px
      }

      .seller-grid {
        grid-template-columns: 1fr;
        gap: 5px
      }

      .seller-card {
        padding: 7px;
        border-radius: 12px
      }

      .seller-open {
        gap: 7px
      }

      .seller-info b {
        font-size: 10px
      }

      .seller-info span {
        font-size: 8px
      }

      .seller-paid {
        font-size: 10px
      }

      .seller-paid span {
        font-size: 8px
      }

      .manage-actions .icon-button {
        width: 26px;
        height: 26px
      }

      .statement-title {
        gap: 7px
      }

      .statement-title h1 {
        font-size: 19px
      }

      .report-actions {
        gap: 4px
      }

      .report-actions .button {
        width: 34px;
        min-height: 34px;
        padding: 0;
        font-size: 0
      }

      .report-actions .button svg {
        width: 16px;
        height: 16px
      }

      .bottom-nav {
        left: 9px;
        right: 9px;
        bottom: calc(6px + env(safe-area-inset-bottom));
        transform: none;
        width: auto;
        margin: 0;
        padding: 4px;
        border-radius: 15px
      }

      .nav-button {
        height: 40px;
        gap: 3px;
        border-radius: 11px;
        font-size: 9px
      }

      .nav-button svg {
        width: 15px;
        height: 15px
      }

      .load-more {
        display: none
      }

      .panel {
        border-radius: 12px
      }

      #sheet {
        bottom: var(--keyboard-inset, 0px);
        height: auto;
        min-height: min(440px, 78dvh);
        max-height: calc(var(--visible-viewport-height, 100dvh) - env(safe-area-inset-top));
        overflow-y: auto;
        scroll-padding-bottom: 24px;
        scrollbar-width: none
      }

      #sheet::-webkit-scrollbar {
        display: none
      }

      .sheet-grab {
        margin-bottom: 9px
      }

      .sheet-head {
        margin-bottom: 8px
      }

      .sheet-head h2 {
        font-size: 16px
      }

      .sheet-form {
        gap: 8px
      }

      .field {
        gap: 3px
      }

      .field label {
        font-size: 8px
      }

      .field input,
      .field select,
      .field textarea {
        min-height: 37px;
        height: 37px;
        font-size: 11px
      }

      .amount-field input {
        height: 45px;
        font-size: 24px
      }

      .bank-picker {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px
      }

      .bank-choice {
        min-height: 49px;
        gap: 2px;
        padding: 3px
      }

      .bank-choice .bank-logo {
        width: 22px;
        height: 22px;
        border-radius: 7px
      }

      .bank-choice .bank-logo svg {
        width: 14px;
        height: 14px
      }

      .bank-choice span:last-child {
        font-size: 7px
      }

      .sheet-footer {
        margin-top: 0
      }
    }

    @media(max-width:680px) and (max-height:720px) {
      .topbar {
        height: 46px;
        min-height: 46px
      }

      .hero {
        height: 106px;
        padding: 9px 13px
      }

      .hero-amount {
        margin-top: 7px;
        font-size: 27px
      }

      .hero-bottom {
        margin-top: 5px
      }

      .summary-card {
        min-height: 53px;
        padding: 5px 7px
      }

      .section {
        margin-top: 7px
      }

      .bank-card:nth-child(n+3) {
        display: none
      }

      .recent-section .panel .transaction:nth-child(n+2) {
        display: none
      }

      .statement-totals {
        margin: 5px 0
      }

      .statement-total {
        padding: 5px
      }

      .statement-total b {
        font-size: 11px
      }

      .transaction {
        padding: 5px 7px
      }

      .record-pager {
        margin-top: 3px
      }

      .nav-button {
        height: 36px
      }
    }

    @media(max-width:375px) {
      .app {
        padding: 0 10px
      }

      .brand {
        font-size: 12px
      }

      .hero-bottom {
        gap: 11px
      }

      .summary-card {
        padding-left: 5px;
        padding-right: 5px
      }

      .summary-top {
        font-size: 7px
      }

      .summary-value {
        font-size: 13px
      }

      .filter-panel {
        gap: 4px
      }

      .statement-total {
        padding-left: 4px;
        padding-right: 4px
      }
    }

    #sheet:has(#accountForm) {
      top: 50%;
      bottom: auto;
      left: 50%;
      right: auto;
      width: min(680px, calc(100% - 32px));
      max-height: min(90dvh, 760px);
      padding: 11px 26px calc(22px + env(safe-area-inset-bottom));
      border-radius: 28px;
      box-shadow: 0 26px 90px #0f201c45;
      transform: translate(-50%, calc(-50% + 24px)) scale(.98);
      opacity: 0
    }

    .sheet-open #sheet:has(#accountForm) {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1
    }

    #sheet:has(#accountForm) .sheet-grab {
      margin-bottom: 13px
    }

    #sheet:has(#accountForm) .sheet-head {
      margin-bottom: 21px
    }

    #sheet:has(#accountForm) .sheet-title-icon {
      width: 36px;
      height: 36px;
      border-radius: 15px;
      background: #16a34a;
      color: #fff;
      display: grid;
      place-items: center
    }

    #sheet:has(#accountForm) .sheet-head h2 {
      flex: 1;
      font-size: 23px;
      letter-spacing: -.7px
    }

    #sheet:has(#accountForm) .sheet-form {
      gap: 17px
    }

    #sheet:has(#accountForm) .field label {
      font-size: 12px;
      letter-spacing: .01em
    }

    #sheet:has(#accountForm) .field input,
    #sheet:has(#accountForm) .field select {
      min-height: 54px;
      height: 54px;
      border-color: #4cb37f;
      border-radius: 16px;
      font-size: 15px
    }

    #sheet:has(#accountForm) .account-toggle {
      min-height: 49px;
      padding: 8px 2px;
      background: transparent;
      font-size: 15px
    }

    #sheet:has(#accountForm) .sheet-footer {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 15px;
      margin-top: 3px
    }

    #sheet:has(#accountForm) .sheet-footer .button {
      min-height: 56px;
      border-radius: 16px;
      font-size: 15px
    }

    #sheet:has(#accountForm) .sheet-footer .button-danger {
      background: #eef0f1;
      color: #17212a
    }

    #sheet:has(#accountForm) .sheet-footer .button-primary {
      background: #16a34a;
      box-shadow: 0 8px 18px #16a34a35
    }

    @media(max-width:680px) {
      #sheet:has(#accountForm) {
        width: calc(100% - 22px);
        max-height: calc(100dvh - 28px);
        padding: 9px 18px calc(18px + env(safe-area-inset-bottom));
        border-radius: 27px
      }

      #sheet:has(#accountForm) .sheet-head {
        margin-bottom: 17px
      }

      #sheet:has(#accountForm) .sheet-head h2 {
        font-size: 20px
      }

      #sheet:has(#accountForm) .sheet-form {
        gap: 14px
      }

      #sheet:has(#accountForm) .field input,
      #sheet:has(#accountForm) .field select {
        min-height: 51px;
        height: 51px;
        font-size: 14px
      }

      #sheet:has(#accountForm) .sheet-footer {
        bottom: auto;
        margin: 2px -18px -18px;
        padding: 12px 18px 18px
      }
    }

    @media(max-width:680px) {
      body[data-kms=bank] {
        padding-top: calc(52px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important
      }

      .kms-topbar {
        height: calc(52px + env(safe-area-inset-top)) !important;
        padding-left: 9px !important;
        padding-right: 9px !important
      }

      .kms-logo {
        width: 32px;
        height: 32px
      }

      .kms-title b {
        font-size: 14px
      }

      .kms-dock {
        gap: 7px;
        padding: 4px 8px calc(4px + env(safe-area-inset-bottom))
      }

      .kms-nav {
        height: 50px;
        border-radius: 18px;
        padding: 3px
      }

      .kms-pill {
        top: 3px;
        bottom: 3px;
        border-radius: 15px
      }

      .kms-nav button {
        gap: 1px;
        font-size: 9px
      }

      .kms-nav svg {
        width: 16px;
        height: 16px
      }

      .kms-fab {
        width: 50px;
        height: 50px;
        border-radius: 16px
      }

      .kms-fab svg {
        width: 24px;
        height: 24px
      }

      .app {
        padding: 0 11px
      }

      main {
        padding: 11px 0 20px
      }

      .home-page-head {
        min-height: 29px;
        margin: 0 4px 10px
      }

      .home-page-head h1 {
        margin: 0;
        font-size: 17px;
        letter-spacing: -.3px
      }

      .home-summary-grid {
        gap: 5px;
        margin: 0
      }

      .home-summary-card {
        min-height: 54px;
        padding: 6px 4px;
        border-radius: 12px;
        text-align: center
      }

      .home-summary-card .summary-top {
        justify-content: center;
        color: #7a8782;
        font-size: 9px;
        white-space: nowrap
      }

      .home-summary-card .summary-value {
        margin-top: 3px;
        color: var(--green);
        font-size: 15px;
        letter-spacing: 0
      }

      .home-transfers-section {
        margin: 23px 0 0
      }

      .home-transfers-section .section-head {
        min-height: 20px;
        margin: 0 4px 10px
      }

      .home-transfers-section .section-head h2 {
        font-size: 13px;
        letter-spacing: 0
      }

      .home-transfers-section .section-hint {
        display: none
      }

      .home-transfer-list {
        gap: 9px
      }

      .home-transfer {
        min-height: 76px;
        padding: 7px 9px;
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 7px;
        border-radius: 17px
      }

      .home-transfer .bank-logo {
        width: 32px;
        height: 32px
      }

      .home-transfer-party {
        font-size: 14px
      }

      .home-transfer-amount {
        margin-top: 8px;
        font-size: 18px
      }

      .home-transfer-action {
        width: 31px;
        height: 31px
      }

      .home-transfer-action svg {
        width: 20px;
        height: 20px
      }
    }

    @media(max-width:680px) {
      body[data-kms=bank] {
        padding-top: calc(68px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
        background: linear-gradient(180deg, #f3faf6 0%, #f7fbf8 100%)
      }

      .kms-topbar {
        height: calc(68px + env(safe-area-inset-top)) !important;
        padding: env(safe-area-inset-top) 16px 0 !important;
        background: #fff;
        border-bottom: 1px solid #e8f0eb
      }

      .kms-logo {
        width: 48px;
        height: 48px;
        border-radius: 13px
      }

      .kms-title b {
        font-size: 23px;
        letter-spacing: -.7px
      }

      .kms-title span:empty {
        display: none
      }

      .kms-menu {
        width: 44px;
        height: 44px
      }

      .kms-menu svg {
        width: 29px;
        height: 29px
      }

      .kms-dock {
        gap: 9px;
        padding: 7px 12px calc(7px + env(safe-area-inset-bottom))
      }

      .kms-nav {
        height: 64px;
        border-radius: 22px;
        padding: 4px
      }

      .kms-pill {
        top: 4px;
        bottom: 4px;
        border-radius: 18px
      }

      .kms-nav button {
        gap: 3px;
        font-size: 11px
      }

      .kms-nav svg {
        width: 21px;
        height: 21px
      }

      .kms-fab {
        width: 62px;
        height: 62px;
        border-radius: 19px
      }

      .kms-fab svg {
        width: 28px;
        height: 28px
      }

      .app {
        width: 100%;
        padding: 0 16px
      }

      .app>.topbar,
      #navigation,
      .bottom-nav {
        display: none !important
      }

      main {
        padding: 22px 0 32px
      }

      .page-head {
        min-height: 44px;
        margin: 0 4px 16px;
        align-items: center
      }

      h1 {
        margin: 0;
        font-size: 27px;
        letter-spacing: -.8px
      }

      .home-page-head h1 {
        font-size: 30px;
        letter-spacing: -.9px
      }

      .page-head>.button {
        width: 52px;
        min-width: 52px;
        height: 52px;
        min-height: 52px;
        border-radius: 17px;
        font-size: 0
      }

      .page-head>.button svg {
        width: 26px;
        height: 26px
      }

      .summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin: 0
      }

      .summary-card {
        min-height: 126px;
        padding: 14px 10px;
        border: 1px solid #e4f0e9;
        border-radius: 20px;
        box-shadow: 0 10px 24px #1c6b3b0a
      }

      .home-summary-card {
        display: grid;
        grid-template-columns: 45px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-items: center;
        column-gap: 9px;
        text-align: left
      }

      .home-summary-card .summary-icon {
        grid-row: 1/3;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #e5f8ee;
        color: #13864c
      }

      .home-summary-card .summary-icon svg {
        width: 23px;
        height: 23px
      }

      .home-metric-label {
        align-self: end;
        color: #7988a0;
        font-size: 12px;
        line-height: 1.15
      }

      .home-summary-card .summary-value {
        align-self: start;
        margin: 5px 0 0;
        color: #168547;
        font: 800 25px/1 "Manrope", sans-serif;
        letter-spacing: -.7px;
        white-space: nowrap
      }

      .home-summary-card:nth-child(2) .summary-icon {
        background: #e7f6ed
      }

      .home-summary-card:nth-child(2) .summary-value {
        color: #155d39
      }

      .home-latest {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 30px 4px 0
      }

      .home-latest h2 {
        font: 800 17px "Manrope", sans-serif
      }

      .home-latest .button {
        min-height: 38px;
        padding: 0 14px
      }

      .statement-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 8px 0 22px
      }

      .statement-total {
        min-height: 86px;
        padding: 15px 16px;
        border: 1px solid #e5f1ea;
        border-radius: 18px;
        background: linear-gradient(145deg, #fff, #f8fcf9);
        box-shadow: 0 8px 22px #193c2910
      }

      .statement-total span {
        font-size: 13px;
        color: #7a8798
      }

      .statement-total b {
        margin-top: 5px;
        color: #128348;
        font: 800 25px/1.1 "Manrope", sans-serif;
        letter-spacing: -.5px
      }

      .collection-section {
        margin-top: 17px
      }

      .collection-section>.section-head {
        min-height: 38px;
        margin: 0 2px 12px
      }

      .collection-section .section-head h2 {
        font: 800 18px "Manrope", sans-serif;
        color: #131623;
        
      }

      .count-pill {
        padding: 8px 14px;
        border-radius: 20px;
        background: #e4f7ed;
        color: #167346;
        font-size: 12px;
        white-space: nowrap
      }

      .collection-search {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 58px;
        margin: 0 0 20px;
        padding: 0 14px;
        border: 1px solid #e4ede8;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 7px 22px #172f2410;
        color: #718096
      }

      .collection-search>svg {
        flex: none;
        width: 22px;
        height: 22px
      }

      .collection-search input {
        width: 100%;
        min-width: 0;
        height: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--ink);
        font-size: 15px
      }

      .collection-search input::placeholder {
        color: #78879c
      }

      .collection-search .icon-button {
        width: 44px;
        height: 44px;
        flex: none;
        border: 1px solid #e6eeea;
        border-radius: 15px;
        box-shadow: 0 4px 12px #172f2410
      }

      .seller-grid {
        grid-template-columns: 1fr;
        gap: 12px
      }

      .party-card {
        display: block;
        padding: 15px 16px;
        border-radius: 20px;
        background: linear-gradient(145deg, #fff, #fbfefc);
        box-shadow: 0 8px 24px #193c290b
      }

      .party-card .seller-open {
        width: 100%;
        gap: 12px
      }

      .party-card .person-avatar {
        width: 49px;
        height: 49px;
        border-radius: 16px;
        background: #e4f8ec;
        color: #128348;
        font-size: 18px
      }

      .party-card .seller-info b {
        font: 800 17px "Manrope", sans-serif;
        color: #121723
      }

      .party-card .seller-info span {
        font-size: 11px
      }

      .party-card .seller-paid {
        font-size: 15px;
        color: #086b3b
      }

      .party-card .seller-paid span {
        font-size: 10px
      }

      .party-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 8px
      }

      .party-actions .button {
        min-height: 34px;
        padding: 0 11px;
        font-size: 11px
      }

      .party-actions .icon-button {
        width: 34px;
        height: 34px
      }

      .party-totals .statement-total {
        display: grid;
        grid-template-columns: 45px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-items: center;
        column-gap: 11px
      }

      .party-kpi-icon {
        grid-row: 1/3;
        width: 45px;
        height: 45px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #e1f8eb;
        color: #13904f
      }

      .party-kpi-icon svg {
        width: 24px;
        height: 24px
      }

      .party-totals .statement-total:nth-child(2) .party-kpi-icon {
        background: #e6f5ff;
        color: #168dd8
      }

      .party-totals .statement-total span {
        align-self: end
      }

      .party-totals .statement-total b {
        align-self: start;
        margin-top: 4px
      }

      .party-card .seller-open {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px
      }

      .party-card .seller-info {
        display: block;
        text-align: center
      }

      .party-card .seller-info b {
        font-size: 20px
      }

      .party-card .seller-info span {
        display: none
      }

      .party-card .party-money {
        display: grid;
        grid-template-columns: 1fr 1px 1fr;
        align-items: center;
        gap: 12px;
        margin-top: 8px
      }

      .party-card .party-money:before {
        content: "";
        grid-column: 2;
        grid-row: 1/3;
        width: 1px;
        height: 42px;
        background: #dfe8e4
      }

      .party-card .party-money-item {
        display: grid;
        grid-template-columns: 39px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        text-align: left
      }

      .party-card .party-money-item:first-child {
        grid-column: 1
      }

      .party-card .party-money-item:last-child {
        grid-column: 3
      }

      .party-card .party-money-icon {
        width: 39px;
        height: 39px;
        display: grid;
        place-items: center;
        border-radius: 13px;
        background: #e4faeb;
        color: #128348
      }

      .party-card .party-money-item:last-child .party-money-icon {
        background: #fff0f0;
        color: #ff3d3d
      }

      .party-card .party-money-icon svg {
        width: 21px;
        height: 21px
      }

      .party-card .party-money-label {
        display: block;
        color: #7a8798;
        font-size: 11px
      }

      .party-card .party-money-value {
        display: block;
        margin-top: 2px;
        color: #087b41;
        font: 800 15px "Manrope", sans-serif;
        white-space: nowrap
      }

      .party-card .party-money-item:last-child .party-money-value {
        color: #f33b3b
      }

      .party-card .party-actions {
        margin-top: 12px
      }

      .account-list {
        display: grid;
        gap: 12px
      }

      .account-bank-filter {
        width: 100%;
        margin: -8px 0 15px
      }

      .account-bank-filter.custom-select {
        height: auto;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent
      }

      .account-card {
        position: relative;
        padding: 18px 64px 14px 17px;
        border: 1.5px solid #b9ef9a;
        border-radius: 22px;
        background: linear-gradient(145deg, #fff 10%, #fbfefc 100%);
        box-shadow: 0 10px 26px #1739220b;
        overflow: hidden
      }

      .account-card:after {
        content: "";
        position: absolute;
        right: -10px;
        bottom: -28px;
        width: 120px;
        height: 100px;
        background: url('/kms-logos/bank.png') center/contain no-repeat;
        opacity: .035;
        pointer-events: none
      }

      .account-card-top {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px
      }

      .account-card-top .bank-logo {
        width: 56px;
        height: 56px;
        border: 1px solid #e9c6dc;
        border-radius: 15px;
        background: #fff !important
      }

      .account-card-top .bank-logo svg {
        width: 27px;
        height: 27px
      }

      .account-bank-name {
        display: grid;
        flex: 1;
        min-width: 0
      }

      .account-bank-name b {
        font: 800 13px/1.25 "Manrope", sans-serif;
        color: #20242b
      }

      .account-bank-name span {
        color: #7b8795;
        font-size: 11px
      }

      .account-card-top>.button {
        min-height: 37px;
        padding: 0 12px;
        border-radius: 22px;
        font-size: 11px
      }

      .account-statement-arrow {
        position: absolute;
        top: 50%;
        right: 17px;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #effaf3;
        color: #078347
      }

      .account-statement-arrow svg {
        width: 19px;
        height: 19px
      }

      .account-detail-label {
        margin: 13px 0 3px;
        color: #78818d;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.3px
      }

      .account-holder,
      .account-number {
        color: #078347;
        font: 700 19px/1.3 "Manrope", sans-serif;
        letter-spacing: .1px
      }

      .account-number {
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%
      }

      .copy-account {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        background: transparent;
        color: #16a34a
      }

      .copy-account svg {
        width: 19px;
        height: 19px
      }

      .account-card-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 15px;
        border-top: 1px solid #edf3ee;
        padding-top: 9px
      }

      .account-card-actions .button {
        min-height: 34px;
        padding: 0 5px;
        font-size: 11px
      }

      .account-card-actions svg {
        width: 15px;
        height: 15px
      }

      .bank-directory-link {
        justify-self: center;
        margin: 15px 0;
        border: 0;
        background: transparent;
        color: #17844b;
        font-size: 12px;
        font-weight: 700
      }

      .directory-card {
        display: flex;
        flex-direction: column;
        gap: 8px
      }

      .directory-card .bank-name {
        font-size: 15px
      }

      .directory-actions {
        display: flex;
        gap: 7px;
        margin-top: 4px
      }

      .directory-actions .button {
        min-height: 34px;
        padding: 0 9px;
        font-size: 10px
      }

      .history-page-head {
        align-items: center
      }

      .history-page-head>div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 15px
      }

      .history-date-wrap {
        display: flex;
        align-items: center;
        gap: 9px
      }

      .history-date {
        color: #8a8e93;
        font-size: 13px;
        white-space: nowrap
      }

      .calendar-button {
        width: 50px;
        height: 50px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 17px;
        background: #0eaf60;
        color: white;
        box-shadow: 0 5px 13px #129a5930
      }

      .calendar-button svg {
        width: 25px;
        height: 25px
      }

      .filter-panel {
        position: relative;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        padding: 0;
        border: 0;
        background: transparent
      }

      .filter-panel .history-search {
        grid-column: 1/-1;
        display: flex;
        align-items: center;
        gap: 12px;
        height: 58px;
        padding: 0 16px;
        border: 1px solid #e4ede8;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 7px 22px #172f2410;
        color: #6b7b90
      }

      .history-search>svg {
        width: 23px;
        height: 23px;
        flex: none
      }

      .filter-panel .search-control {
        width: 100%;
        height: 100%;
        padding: 0 45px 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 15px
      }

      .filter-panel .control {
        height: 48px;
        padding: 0 15px;
        border: 2px solid #28a560;
        border-radius: 18px;
        background: #f7fcf9;
        font-size: 14px
      }

      .history-totals {
        margin: 22px 0
      }

      .ledger-head {
        margin: 22px 4px 11px
      }

      .ledger-head h2 {
        font: 800 18px "Manrope", sans-serif
      }

      .ledger-head .statement-action {
        min-height: 39px;
        padding: 0 14px;
        border-radius: 20px;
        font-size: 12px
      }

      .ledger-head .statement-action svg {
        width: 15px;
        height: 15px
      }

      .history-list {
        display: grid;
        gap: 12px
      }

      .transaction {
        grid-template-columns: 60px minmax(0, 1fr) auto;
        gap: 11px;
        min-height: 106px;
        padding: 13px 12px;
        border: 1px solid #e7efea;
        border-radius: 20px;
        background: #fff;
        text-align: left
      }

      .transaction>.bank-logo {
        width: 56px;
        height: 56px;
        border-radius: 16px
      }

      .transaction-name {
        font: 800 15px "Manrope", sans-serif;
        white-space: normal
      }

      .transaction-detail {
        display: flex;
        gap: 5px;
        max-width: 100%;
        margin-top: 5px;
        color: #172421;
        font-size: 10px;
        white-space: nowrap
      }

      .transaction-detail>span:last-child {
        overflow: hidden;
        text-overflow: ellipsis
      }

      .transaction-detail .bank-logo {
        display: none
      }

      .transaction-amount {
        display: grid;
        justify-items: end;
        gap: 15px
      }

      .transaction-date {
        color: #788096;
        font-size: 11px;
        white-space: nowrap
      }

      .transaction-money {
        font: 800 15px "Manrope", sans-serif
      }

      .status {
        font-size: 10px
      }

      .section {
        margin-top: 23px
      }

      #sheet {
        width: 100%;
        max-height: min(92dvh, 900px);
        padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
        border-radius: 26px 26px 0 0;
        background: #fff
      }

      .sheet-grab {
        width: 56px;
        height: 5px;
        margin: 0 auto 15px;
        background: #d3d8da
      }

      .sheet-head {
        gap: 10px;
        margin-bottom: 17px
      }

      .sheet-head h2 {
        flex: 1;
        font-size: 21px
      }

      .sheet-head>.icon-button {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #f1f3f4;
        color: #34404c
      }

      .sheet-title-icon {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 15px;
        background: #0da956;
        color: #fff
      }

      .sheet-title-icon svg {
        width: 26px;
        height: 26px;
        stroke-width: 2.5
      }

      .sheet-form {
        gap: 13px
      }

      .field {
        gap: 6px
      }

      .field label {
        color: #1e2931;
        font-size: 12px;
        font-weight: 700
      }

      .field input,
      .field select,
      .field textarea {
        min-height: 51px;
        height: 51px;
        padding: 0 14px;
        border: 1px solid #49b958;
        border-radius: 14px;
        background: #fff;
        font-size: 14px
      }

      .field textarea {
        height: auto;
        min-height: 83px;
        padding-top: 12px
      }

      .amount-field input {
        height: 62px;
        font-size: 27px
      }

      .field-row {
        gap: 9px
      }

      .field-hint {
        color: #7a8791;
        font-size: 11px
      }

      .inline-action {
        align-self: flex-start;
        border: 0;
        background: transparent;
        color: #078347;
        font-size: 12px;
        font-weight: 700;
        text-decoration: underline
      }

      .account-toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 55px;
        padding: 10px 14px;
        border-radius: 15px;
        background: #eff9f3;
        color: #172b23;
        font-size: 14px;
        font-weight: 700
      }

      .account-toggle input {
        width: 22px;
        height: 22px;
        accent-color: #12a055
      }

      .sheet-footer {
        position: sticky;
        bottom: calc(-20px - env(safe-area-inset-bottom));
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
        margin: 6px -18px calc(-20px - env(safe-area-inset-bottom));
        padding-left: 18px;
        padding-right: 18px;
        background: #fff;
        border-top: 1px solid #e8efeb
      }

      .sheet-footer .button {
        min-height: 49px;
        border-radius: 14px
      }

      .empty {
        padding: 25px 14px;
        font-size: 13px
      }

      .count-pill {
        font-size: 11px
      }

      .account-card[tabindex="0"] {
        cursor: pointer
      }

      .transaction-money.out {
        color: #078347
      }

      .transaction-money.in {
        color: #078347
      }
    }

    @media(max-width:420px) {
      .app {
        padding: 0 12px
      }

      .kms-logo {
        width: 43px;
        height: 43px
      }

      .kms-title b {
        font-size: 21px
      }

      .home-summary-card {
        grid-template-columns: 38px minmax(0, 1fr);
        column-gap: 6px;
        padding: 11px 7px
      }

      .home-summary-card .summary-icon {
        width: 38px;
        height: 38px
      }

      .home-metric-label {
        font-size: 10px
      }

      .home-summary-card .summary-value {
        font-size: 20px
      }

      .history-date {
        font-size: 11px
      }

      .history-page-head>div {
        gap: 7px
      }

      .calendar-button {
        width: 43px;
        height: 43px
      }

      .account-bank-name b {
        font-size: 14px
      }

      .account-holder,
      .account-number {
        font-size: 17px
      }

      .transaction {
        grid-template-columns: 49px minmax(0, 1fr) auto;
        gap: 8px
      }

      .transaction>.bank-logo {
        width: 46px;
        height: 46px
      }

      .transaction-name {
        font-size: 13px
      }

      .transaction-date {
        font-size: 9px
      }

      .transaction-money {
        font-size: 13px
      }
    }

    /* Reference-sized party screen: the desktop shell can report a wider CSS viewport
       than the physical phone display, so this breakpoint intentionally extends past
       the standard handset width. */
    @media(max-width:900px) {
      .app {
        width: min(100%, 576px);
        padding: 0 20px
      }

      main {
        padding: 20px 0 28px
      }

      .page-head {
        min-height: 44px;
        margin: 0 4px 15px
      }

      .page-head:not(.home-page-head) h1 {
        font-size: 23px;
        letter-spacing: -.55px
      }

      .page-head>.button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        border-radius: 16px;
        font-size: 0
      }

      .page-head>.button svg {
        width: 25px;
        height: 25px
      }

      .home-page-head {
        min-height: auto;
        margin: 0 4px 12px
      }

      .home-page-head h1 {
        font-size: 20px;
        letter-spacing: -.45px
      }

      .home-summary-grid {
        gap: 7px;
        margin: 0
      }

      .home-summary-card {
        display: block;
        min-height: 64px;
        padding: 8px 7px;
        border-radius: 15px;
        text-align: center
      }

      .home-summary-card .summary-icon {
        width: 29px;
        height: 29px;
        margin: 0 auto 4px;
        border-radius: 50%
      }

      .home-summary-card .summary-icon svg {
        width: 16px;
        height: 16px
      }

      .home-summary-card .home-metric-label {
        display: block;
        min-height: auto;
        overflow: hidden;
        font-size: 8px;
        line-height: 1.1;
        white-space: nowrap
      }

      .home-summary-card .summary-value {
        margin-top: 3px;
        font-size: 13px !important;
        letter-spacing: 0 !important
      }

      .home-transfers-section {
        margin-top: 25px
      }

      .home-transfers-section .section-head {
        margin: 0 3px 10px
      }

      .home-transfers-section .section-head h2 {
        font-size: 15px
      }

      .home-transfer-list {
        gap: 9px
      }

      .home-transfer {
        min-height: 70px;
        padding: 8px 10px;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        border-radius: 18px;
        background: #fff;
        border-color: #e5ece8;
        box-shadow: 0 7px 20px #193c2908
      }

      .home-transfer .bank-logo {
        width: 34px;
        height: 34px
      }

      .home-transfer-party {
        font-size: 13px
      }

      .home-transfer-amount {
        margin-top: 5px;
        font-size: 15px
      }

      .home-transfer-action {
        width: 31px;
        height: 31px
      }

      .party-totals {
        gap: 12px;
        margin: 0 0 25px
      }

      .party-totals .statement-total {
        min-height: 84px;
        padding: 12px 14px;
        border-radius: 17px
      }

      .party-totals .statement-total {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-items: center;
        column-gap: 10px
      }

      .party-totals .party-kpi-icon {
        grid-row: 1/3;
        width: 36px;
        height: 36px;
        border-radius: 50%
      }

      .party-totals .party-kpi-icon svg {
        width: 19px;
        height: 19px
      }

      .party-totals .statement-total span {
        align-self: end;
        font-size: 11px;
        line-height: 1.2
      }

      .party-totals .statement-total b {
        align-self: start;
        margin-top: 3px;
        font-size: 20px;
        line-height: 1.05
      }

      .account-totals {
        gap: 12px;
        margin: 0 0 25px
      }

      .account-totals .statement-total,
      .history-totals .statement-total {
        min-height: 84px;
        padding: 12px 14px;
        border-radius: 17px
      }

      .account-totals .statement-total,
      .history-totals .statement-total {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-items: center;
        column-gap: 10px
      }

      .account-kpi-icon,
      .history-kpi-icon {
        grid-row: 1/3;
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #e1f8eb;
        color: #13904f
      }

      .account-kpi-icon svg,
      .history-kpi-icon svg {
        width: 19px;
        height: 19px
      }

      .account-totals .statement-total:nth-child(2) .account-kpi-icon,
      .history-totals .statement-total:nth-child(2) .history-kpi-icon {
        background: #e6f5ff;
        color: #168dd8
      }

      .account-totals .statement-total>span:not(.account-kpi-icon),
      .history-totals .statement-total>span:not(.history-kpi-icon) {
        align-self: end;
        font-size: 11px;
        line-height: 1.2
      }

      .account-totals .statement-total b,
      .history-totals .statement-total b {
        align-self: start;
        margin-top: 3px;
        font-size: 20px;
        line-height: 1.05
      }

      .collection-section {
        margin-top: 0
      }

      .collection-section>.section-head {
        min-height: 32px;
        margin: 0 2px 10px
      }

      .collection-section .section-head h2 {
        font-size: 15px
      }

      .count-pill {
        padding: 7px 13px;
        font-size: 11px
      }

      .collection-search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 52px;
        gap: 10px;
        margin-bottom: 20px
      }

      .collection-search {
        height: 42px;
        margin: 0;
        padding: 0 13px;
        border-radius: 15px;
        box-shadow: 0 5px 16px #172f240d
      }

      .collection-search>svg {
        width: 20px;
        height: 20px
      }

      .collection-search input {
        font-size: 13px
      }

      .party-filter-button {
        display: grid;
        place-items: center;
        width: 52px;
        height: 42px;
        border: 1px solid #e4ede8;
        border-radius: 15px;
        background: #fff;
        color: #728095;
        box-shadow: 0 5px 16px #172f2410
      }

      .party-filter-button svg {
        width: 21px;
        height: 21px
      }

      .party-sort {
        height: 42px;
        margin: -0px 0 14px;
        border: 1px solid #dfe9e300;
        border-radius: 13px;
        background: #ffffff00;
        font-size: 13px
      }

      .seller-grid {
        gap: 12px
      }

      .party-card {
        padding: 12px 14px;
        border-radius: 17px;
        box-shadow: 0 6px 18px #193c290a
      }

      .party-card .seller-open {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px
      }

      .party-card .seller-info {
        text-align: center
      }

      .party-card .seller-info b {
        font-size: 16px;
        line-height: 1.4
      }

      .party-card .party-money {
        gap: 10px;
        margin-top: 6px
      }

      .party-card .party-money:before {
        height: 37px
      }

      .party-card .party-money-item {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px
      }

      .party-card .party-money-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px
      }

      .party-card .party-money-icon svg {
        width: 18px;
        height: 18px
      }

      .party-card .party-money-label {
        font-size: 10px
      }

      .party-card .party-money-value {
        font-size: 13px
      }

      .account-list {
        gap: 12px
      }

      .account-card {
        padding: 17px 64px 14px 16px;
        border: 1.5px solid #b9ef9a;
        border-radius: 20px;
        background: linear-gradient(145deg, #fff 10%, #fbfefc 100%);
        box-shadow: 0 8px 22px #1739223b
      }

      .account-card-top {
        gap: 11px;
        margin-bottom: 18px
      }

      .account-card-top .bank-logo {
        width: 52px;
        height: 52px;
        border-radius: 14px
      }

      .account-bank-name b {
        font-size: 15px
      }

      .account-bank-name span {
        font-size: 10px
      }

      .account-card-top>.button {
        min-height: 35px;
        padding: 0 11px;
        font-size: 11px
      }

      .account-detail-label {
        margin: 12px 0 3px;
        font-size: 9px
      }

      .account-holder,
      .account-number {
        font-size: 18px
      }

      .filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        padding: 0;
        border: 0;
        background: transparent
      }

      .filter-panel .history-search {
        grid-column: 1/-1;
        display: flex;
        align-items: center;
        gap: 11px;
        height: 43px;
        padding: 0 14px;
        border: 1px solid #e4ede8;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 5px 16px #172f2410;
        color: #6b7b90
      }

      .history-search>svg {
        width: 20px;
        height: 20px;
        flex: none
      }

      .filter-panel .search-control {
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 13px
      }

      .filter-panel .control,
      .filter-panel .date-picker-trigger {
        height: 40px;
        padding: 0 12px;
        border: 2px solid #00000000;
        border-radius: 15px;
        background: #f7fcf9;
        font-size: 12px
      }

      .history-totals {
        margin: 19px 0
      }

      .ledger-head {
        margin: 18px 3px 10px
      }

      .ledger-head h2 {
        font-size: 16px
      }

      .history-list {
        gap: 10px
      }

      .transaction {
        grid-template-columns: 50px minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 90px;
        padding: 11px;
        border: 1px solid #e7efea;
        border-radius: 17px;
        background: #fff
      }

      .transaction>.bank-logo {
        width: 48px;
        height: 48px;
        border-radius: 14px
      }

      .transaction-name {
        font-size: 13px
      }

      .transaction-date {
        font-size: 10px
      }

      .transaction-money {
        font-size: 13px
      }

      #sheet {
        width: 100%;
        max-height: min(92dvh, 900px);
        padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
        border-radius: 26px 26px 0 0;
        background: #fff
      }

      .sheet-grab {
        width: 54px;
        height: 5px;
        margin: 0 auto 15px;
        background: #d3d8da
      }

      .sheet-head {
        gap: 10px;
        margin-bottom: 17px
      }

      .sheet-head h2 {
        flex: 1;
        font-size: 20px
      }

      .sheet-head>.icon-button {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #f1f3f4;
        color: #34404c
      }

      .sheet-title-icon {
        width: 45px;
        height: 45px;
        border-radius: 15px;
        background: #0da956;
        color: #fff
      }

      .sheet-title-icon svg {
        width: 25px;
        height: 25px
      }

      .sheet-form {
        gap: 13px
      }

      .field {
        gap: 6px
      }

      .field label {
        font-size: 12px;
        color: #1e2931
      }

      .field input,
      .field select,
      .field textarea {
        min-height: 50px;
        height: 50px;
        padding: 0 14px;
        border-color: #43bd57;
        border-radius: 14px;
        font-size: 14px
      }

      .field textarea {
        height: auto;
        min-height: 50px;
        padding-top: 8px
      }

      .amount-field input {
        height: 61px;
        font-size: 26px
      }

      .field-row {
        gap: 9px
      }

      .account-toggle {
        min-height: 54px;
        padding: 10px 14px;
        border-radius: 15px;
        background: #eff9f3;
        font-size: 14px
      }

      .sheet-footer {
        bottom: calc(-20px - env(safe-area-inset-bottom));
        margin: 6px -18px calc(-20px - env(safe-area-inset-bottom));
        padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #e8efeb
      }

      .sheet-footer .button {
        min-height: 49px;
        border-radius: 14px
      }

      #sheet:has(#accountForm) {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100dvh - 12px);
        padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
        border-radius: 27px 27px 0 0;
        box-shadow: 0 26px 90px #0f201c45;
        transform: translateY(105%);
        opacity: 0
      }

      .sheet-open #sheet:has(#accountForm) {
        transform: translateY(0);
        opacity: 1
      }

      #sheet:has(#accountForm) .sheet-footer {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        gap: 12px;
        position: static;
        margin: 2px 0 0;
        padding: 8px 0 0;
        border: 0
      }

      #sheet:has(#accountForm) .sheet-footer .button {
        min-height: 52px
      }

      .statement-document {
        padding: 20px 16px;
        border-radius: 0;
        box-shadow: none
      }

      .statement-doc-head {
        align-items: center
      }

      .statement-doc-brand>.bank-logo,
      .statement-doc-brand>.person-avatar {
        width: 46px;
        height: 46px
      }

      .statement-doc-brand h1 {
        font-size: 22px
      }

      .statement-doc-brand p {
        font-size: 11px
      }

      .statement-doc-head .button {
        min-height: 38px;
        padding: 0 10px;
        font-size: 11px
      }

      .statement-details {
        padding: 13px
      }

      .statement-details h2,
      .statement-accounts h2,
      .statement-table-wrap h2 {
        font-size: 16px
      }

      .statement-details-grid {
        grid-template-columns: 1fr;
        gap: 8px
      }

      .statement-details-grid div {
        grid-template-columns: 120px 1fr;
        font-size: 11px
      }

      .statement-doc-kpis {
        gap: 7px
      }

      .statement-doc-kpis article {
        padding: 10px
      }

      .statement-doc-kpis span {
        font-size: 9px
      }

      .statement-doc-kpis b {
        font-size: 13px
      }

      .statement-table-wrap {
        overflow: auto
      }

      .statement-table-wrap table {
        min-width: 680px
      }

      .statement-doc-foot {
        margin-top: 20px;
        font-size: 10px
      }
    }

    @media(prefers-reduced-motion:reduce) {

      *,
      *:before,
      *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
      }
    }

    .custom-select {
      position: relative;
      min-width: 0
    }

    .custom-select-native {
      display: none !important
    }

    .custom-select-trigger {
      width: 100%;
      min-width: 0;
      min-height: 46px;
      padding: 0 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid #52bd64;
      border-radius: 14px;
      background: #ffffff00;
      color: var(--ink);
      text-align: left;
      font: 500 14px "DM Sans", sans-serif
    }

    .custom-select-trigger>span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .custom-select-trigger>svg {
      width: 18px;
      height: 18px;
      flex: none;
      color: #728078;
      transition: transform .18s
    }

    .custom-select.open .custom-select-trigger {
      border-color: #16a34a;
      box-shadow: 0 0 0 3px #16a34a1c
    }

    .custom-select.open .custom-select-trigger>svg {
      transform: rotate(180deg)
    }

    .custom-select-trigger:disabled {
      background: #f1f5f2;
      color: #8b9690;
      cursor: not-allowed
    }

    .filter-panel .custom-select.control {
      height: 48px;
      min-height: 48px;
      padding: 0;
      border: 2px solid #28a560;
      border-radius: 18px;
      background: #f7fcf9
    }

    .filter-panel .custom-select.control .custom-select-trigger {
      height: 100%;
      min-height: 44px;
      padding: 0 13px;
      border: 0;
      border-radius: 16px;
      background: transparent;
      font-size: 14px
    }

    .custom-select-menu {
      position: fixed;
      z-index: 100200;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 6px;
      overflow: hidden;
      padding: 7px;
      border: 1px solid #e3ebe5;
      border-radius: 16px;
      background: #fff;
      color: #152421;
      box-shadow: 0 16px 42px #15242126
    }

    .custom-select-menu.open {
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .custom-select-search input {
      touch-action: manipulation;
    }

    .custom-select-menu[hidden] {
      display: none
    }

    .custom-select-search {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 40px;
      padding: 0 10px;
      border: 1px solid #e7eee9;
      border-radius: 11px;
      color: #778480
    }

    .custom-select-search svg {
      width: 17px;
      height: 17px;
      flex: none
    }

    .custom-select-search input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: inherit;
      font: 500 13px "DM Sans", sans-serif
    }

    .custom-select-options {
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain
    }

    .custom-select-option {
      width: 100%;
      min-height: 42px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: inherit;
      text-align: left;
      font: 500 13px/1.35 "DM Sans", sans-serif
    }

    .custom-select-option .bank-logo {
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      border-radius: 8px
    }

    .custom-select-option .bank-logo svg {
      width: 17px;
      height: 17px
    }

    .custom-select-option>span:nth-child(2) {
      min-width: 0;
      flex: 1
    }

    .custom-select-option:hover,
    .custom-select-option:focus-visible {
      outline: 0;
      background: #eff8f2
    }

    .custom-select-option[aria-selected=true] {
      background: #e8f7ed;
      color: #08783c;
      font-weight: 700
    }

    .custom-select-option[aria-selected=true]>span {
      flex: none;
      color: #16a34a
    }

    .custom-select-option:disabled {
      color: #a1aba5;
      cursor: not-allowed
    }

    :root[data-kms-theme=dark] .custom-select-trigger,
    :root[data-kms-theme=dark] .custom-select-menu {
      border-color: #374151;
      background: #1f2937;
      color: #f8fafc
    }

    :root[data-kms-theme=dark] .custom-select-search {
      border-color: #374151
    }

    :root[data-kms-theme=dark] .custom-select-option:hover,
    :root[data-kms-theme=dark] .custom-select-option:focus-visible {
      background: #374151
    }

    :root[data-kms-theme=dark] .custom-select-option[aria-selected=true] {
      background: #14532d;
      color: #dcfce7
    }

    .hero-amount {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: clamp(22px, 6.8vw, 40px);
      letter-spacing: -.7px
    }

    .home-summary-card {
      min-width: 0
    }

    .home-summary-card .summary-value {
      display: block;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: clamp(12px, 3.8vw, 16px) !important;
      letter-spacing: -.3px !important
    }

    .statement-total {
      min-width: 0
    }

    .statement-total b {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: clamp(13px, 3.8vw, 17px)
    }

    .bank-card {
      min-width: 0
    }

    .bank-name,
    .bank-balance {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .bank-balance {
      font-size: clamp(13px, 3.8vw, 18px)
    }

    .bank-meta {
      overflow-wrap: anywhere
    }

    .seller-paid {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: clamp(11px, 3vw, 14px)
    }

    .home-transfer {
      text-align: left
    }

    .home-transfer-party,
    .home-transfer-amount {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis
    }

    #transactionList .transaction {
      grid-template-columns: 48px minmax(0, 1fr) minmax(0, 40%);
      gap: 9px
    }

    #transactionList .transaction-main,
    #transactionList .transaction-amount {
      min-width: 0
    }

    #transactionList .transaction-detail,
    .history-list .transaction-detail {
      display: grid;
      align-items: start;
      gap: 1px;
      max-width: 100%;
      white-space: normal;
      overflow: hidden
    }

    #transactionList .transaction-detail>span,
    .history-list .transaction-detail>span {
      display: block;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    #transactionList .transaction-name,
    .history-list .transaction-name {
      font-size: 110%;
      color: var(--green)
    }

    #transactionList .transaction-money,
    .history-list .transaction-money {
      font-size: 100%
    }

    #transactionList .transaction-detail {
      display: grid;
      align-items: start;
      gap: 1px;
      white-space: normal
    }

    #transactionList .transaction-bank-code,
    #transactionList .transaction-account-number,
    .history-list .transaction-bank-code,
    .history-list .transaction-account-number {
      display: inline-block;
      white-space: nowrap !important
    }

    #transactionList .transaction-account-number,
    .history-list .transaction-account-number {
      display: block;
      width: max-content;
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap !important;
      word-break: keep-all;
      overflow-wrap: normal
    }

    #transactionList .transaction-seller-account,
    .history-list .transaction-seller-account {
      color: var(--green)
    }

    #transactionList .transaction-my-account,
    .history-list .transaction-my-account {
      color: #dc2626
    }

    .custom-select-option-label,
    .custom-select-trigger-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0
    }

    .custom-select-account-number {
      color: var(--green);
      font-weight: 800;
      white-space: nowrap
    }

    #transactionList .transaction-money,
    .history-list .transaction-money {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: clamp(10px, 2.9vw, 13px)
    }

    #transactionList .transaction-date {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis
    }

    @media(max-width:680px) {
      .hero {
        height: auto;
        min-height: 192px
      }

      .home-summary-card {
        grid-template-columns: 38px minmax(0, 1fr);
        column-gap: 7px;
        padding: 11px 8px
      }

      .home-summary-card .summary-icon {
        width: 38px;
        height: 38px
      }

      .home-metric-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px
      }

      .home-banks-section .bank-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .home-banks-section .bank-card:nth-child(n) {
        display: block
      }

      #transactionList .transaction {
        grid-template-columns: 38px minmax(0, 1fr) minmax(0, 40%);
        gap: 7px;
        padding: 10px 9px
      }

      #transactionList .transaction>.bank-logo {
        width: 36px;
        height: 36px
      }

      #transactionList .transaction-name {
        font-size: 110%
      }

      #transactionList .transaction-money {
        font-size: 100%
      }
    }

    @media(max-width:375px) {
      .home-summary-card {
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 5px;
        padding: 9px 5px
      }

      .home-summary-card .summary-icon {
        width: 32px;
        height: 32px
      }

      .home-summary-card .summary-value {
        font-size: 12px !important
      }

      #transactionList .transaction {
        grid-template-columns: 40px minmax(0, 1fr) minmax(0, 39%);
        gap: 5px;
        padding: 8px 7px
      }

      #transactionList .transaction>.bank-logo {
        width: 30px;
        height: 30px
      }
    }

    .home-summary-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .home-summary-card {
      min-width: 0;
      text-align: left
    }

    .home-summary-card .home-metric-label {
      display: block;
      min-height: 2.3em;
      overflow: hidden;
      font-size: 11px;
      line-height: 1.15
    }

    .home-summary-card .summary-value {
      display: block;
      margin-top: 8px
    }

    .home-transfers-section {
      margin-top: 24px
    }

    .home-transfers-section .section-head {
      margin-bottom: 12px
    }

    .home-transfers-section .section-head h2 {
      font-size: 18px
    }

    .home-transfer .home-transfer-controls {
      justify-content: center
    }

    @media(max-width:680px) {
      .home-page-head {
        margin-bottom: 14px
      }

      .home-summary-grid {
        gap: 7px
      }

      .home-summary-card {
        display: block;
        min-height: 112px;
        padding: 12px 10px
      }

      .home-summary-card .summary-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 8px
      }

      .home-summary-card .summary-icon svg {
        width: 17px;
        height: 17px
      }

      .home-summary-card .home-metric-label {
        font-size: 10px
      }

      .home-summary-card .summary-value {
        font-size: 14px !important;
        margin-top: 5px
      }

      .home-transfers-section {
        margin-top: 24px
      }

      .home-transfers-section .section-head h2 {
        font-size: 15px
      }

      .home-transfer {
        min-height: 70px;
        grid-template-columns: 38px minmax(0, 1fr) 36px;
        padding: 8px 10px;
        border-radius: 20px
      }

      .home-transfer .bank-logo {
        width: 36px;
        height: 36px
      }

      .home-transfer-party {
        font-size: 13px
      }

      .home-transfer-amount {
        font-size: 15px
      }
    }