:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #18253d;
  background: #f4f7fb
}

* {
  box-sizing: border-box
}

body {
  margin: 0
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 42px 24px 90px
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px
}

h1 {
  margin: 4px 0 6px;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -.04em
}

h2 {
  font-size: 20px;
  margin: 0 0 20px;
  letter-spacing: -.02em
}

.eyebrow {
  font-size: 12px;
  letter-spacing: .19em;
  color: #2966be;
  font-weight: 800;
  margin: 0
}

.muted,
.hint {
  color: #68768d
}

.muted {
  margin: 0
}

.hint {
  font-size: 13px;
  margin: 12px 0 25px
}

.cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px
}

.stat,
.card {
  background: #fff;
  border: 1px solid #e4eaf3;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(30, 62, 105, .035)
}

.stat {
  padding: 22px 18px;
  min-height: 125px;
  display: flex;
  flex-direction: column;
  gap: 11px
}

.stat span {
  font-size: 13px;
  color: #67758d;
  font-weight: 600
}

.stat strong {
  font-size: clamp(19px, 1.8vw, 26px);
  letter-spacing: -.035em;
  white-space: nowrap
}

.stat small {
  color: #8994a7;
  margin-top: -6px
}

.stat.emphasis {
  background: #153c76;
  color: #fff;
  border-color: #153c76
}

.stat.emphasis span {
  color: #cedff9
}

.green {
  color: #10845f
}

.red {
  color: #d45460
}

.amber {
  color: #bc7618
}

.grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 18px;
  align-items: start
}

.card {
  padding: 26px
}

.grid>div {
  display: grid;
  gap: 18px
}

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

label {
  display: block;
  font-weight: 650;
  font-size: 13px;
  margin-bottom: 15px;
  color: #3d4d64
}

input,
select,
textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 15px;
  margin-top: 7px;
  padding: 12px 13px;
  border: 1px solid #d9e1ec;
  border-radius: 9px;
  background: #fff;
  color: #18253d;
  outline: none
}

input:focus,
select:focus,
textarea:focus {
  border-color: #3071cc;
  box-shadow: 0 0 0 3px #3071cc22
}

textarea {
  resize: vertical
}

button {
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  border-radius: 9px;
  padding: 11px 16px
}

.primary {
  border: 1px solid #245eb2;
  background: #245eb2;
  color: white
}

.primary:hover {
  background: #194c94
}

.outline {
  background: #fff;
  border: 1px solid #cdd9e9;
  color: #245eb2
}

.full {
  width: 100%
}

.security summary {
  font-weight: 700;
  cursor: pointer
}

.security form {
  padding-top: 18px
}

.ledger {
  margin-top: 18px
}

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

.ledger-head small {
  color: #8b97a8
}

.table-scroll {
  overflow-x: auto
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px
}

th {
  text-align: left;
  color: #78869b;
  font-weight: 700;
  background: #f8faff;
  white-space: nowrap
}

th,
td {
  padding: 14px 11px;
  border-bottom: 1px solid #edf0f5;
  vertical-align: middle
}

td {
  color: #40506a
}

td.amount {
  color: #18253d;
  font-weight: 700;
  white-space: nowrap
}

.right {
  text-align: right
}

.badge {
  border-radius: 30px;
  padding: 5px 9px;
  font-weight: 700;
  font-size: 11px
}

.badge.completed {
  background: #e5f8ef;
  color: #168361
}

.badge.pending {
  background: #fff2dd;
  color: #a96a10
}

.text-button {
  color: #245eb2;
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap
}

.empty {
  text-align: center;
  padding: 36px;
  color: #8b97a8
}

.alert {
  padding: 11px 15px;
  border-radius: 9px;
  margin: 12px 0;
  background: #e8f6ec;
  color: #14754e
}

.alert.error {
  background: #fff0ee;
  color: #b43d3d
}

.login {
  width: min(430px, 100%);
  margin: 10vh auto;
  padding: 35px
}

.login .brand {
  width: 55px;
  height: 55px;
  background: #153c76;
  color: #fff;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 22px
}

.brand span {
  color: #9dccff
}

.login h1 {
  font-size: 29px;
  margin: 9px 0
}

.login .muted {
  margin-bottom: 28px
}

.login button {
  margin-top: 5px
}

@media(max-width:1000px) {
  .cards {
    grid-template-columns: repeat(2, 1fr)
  }

  .cards .emphasis {
    grid-column: span 2
  }
}

@media(max-width:700px) {
  .wrap {
    padding: 25px 15px 60px
  }

  .grid,
  .row {
    grid-template-columns: 1fr
  }

  .cards {
    gap: 9px
  }

  .stat {
    padding: 16px 12px;
    min-height: 110px
  }

  .stat strong {
    font-size: 18px
  }

  .card {
    padding: 18px
  }

  header {
    align-items: flex-start
  }

  header .outline {
    white-space: nowrap
  }
}

:root .badge.partial {
  background: #e8efff;
  color: #375aab
}

.pay-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-width: 170px
}

.pay-form input {
  width: 100px;
  min-width: 80px;
  margin: 0;
  padding: 7px 8px;
  font-size: 12px
}

.pay-form button {
  font-size: 12px;
  white-space: nowrap
}

:root .actions {
  white-space: nowrap
}

.actions a {
  color: #245eb2;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none
}

.actions form {
  display: inline;
  margin-left: 12px
}

.text-button.danger {
  color: #bc4545
}

.edit-card {
  max-width: 680px
}

.nav-link {
  display: inline-block;
  text-decoration: none
}

.filters {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px
}

.filters label {
  flex: 1 1 135px;
  margin: 0
}

.filters button,
.filters .nav-link {
  margin-bottom: 1px;
  white-space: nowrap
}

.export-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #f4f7fb;
  border-radius: 10px;
  color: #61718b;
  font-size: 13px
}

.entry-checkbox,
#select-all {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #245eb2
}

.export-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.export-buttons form {
  margin: 0
}