/* Triplem VIP Expenses overlay refinement — compact entry actions and transaction detail presentation. */
/* Expenses overlay refinement: compact pill actions, slimmer optional banner and centered transaction details. */
#expenseTopupForm .modal-footer,
#expenseEntryForm .modal-footer{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  margin-top:4px!important;
  padding:4px 0 1px!important;
}
#expenseTopupForm .modal-footer .btn,
#expenseEntryForm .modal-footer .btn{
  flex:0 0 auto!important;
  min-width:96px!important;
  min-height:34px!important;
  height:34px!important;
  padding:0 15px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:.72rem!important;
  line-height:1!important;
}
#expenseTopupForm .expense-optional-details,
#expenseEntryForm .expense-optional-details{
  border-radius:13px!important;
}
#expenseTopupForm .expense-optional-details>summary,
#expenseEntryForm .expense-optional-details>summary{
  min-height:36px!important;
  padding:6px 10px!important;
  gap:7px!important;
  font-size:.76rem!important;
  line-height:1.15!important;
}
#expenseTopupForm .expense-optional-details>summary>small,
#expenseEntryForm .expense-optional-details>summary>small{
  font-size:.62rem!important;
  line-height:1.12!important;
}
#expenseTopupForm .expense-optional-chevron,
#expenseEntryForm .expense-optional-chevron{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  font-size:.72rem!important;
}

#expenseTransactionDetailModal.modal{
  place-items:center!important;
  padding:24px!important;
}
#expenseTransactionDetailModal .expense-tx-detail-dialog{
  width:min(620px,calc(100vw - 48px))!important;
  max-width:620px!important;
  max-height:calc(100dvh - 48px)!important;
  margin:auto!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:20px!important;
}
#expenseTransactionDetailModal .modal-head{
  flex:0 0 auto!important;
  padding:12px 14px 8px!important;
  align-items:center!important;
}
#expenseTransactionDetailModal .modal-head h3{
  font-size:.98rem!important;
}
#expenseTransactionDetailModal .modal-head p{
  margin-top:2px!important;
  font-size:.70rem!important;
  line-height:1.25!important;
}
#expenseTransactionDetailModal .expense-tx-kicker{
  margin-bottom:2px!important;
  font-size:.66rem!important;
}
#expenseTransactionDetailModal .modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:8px 14px 14px!important;
  scrollbar-width:none!important;
}
#expenseTransactionDetailModal .modal-body::-webkit-scrollbar{display:none!important}
#expenseTransactionDetailModal .expense-tx-hero{
  gap:10px!important;
  padding:11px 12px!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
#expenseTransactionDetailModal .expense-tx-icon{
  width:42px!important;
  height:42px!important;
  border-radius:13px!important;
  font-size:1.05rem!important;
}
#expenseTransactionDetailModal .expense-tx-hero strong{
  font-size:1.15rem!important;
  line-height:1.15!important;
}
#expenseTransactionDetailModal .expense-tx-hero :is(small,span){
  font-size:.70rem!important;
  line-height:1.2!important;
}
#expenseTransactionDetailModal .expense-tx-detail-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  margin-top:8px!important;
}
#expenseTransactionDetailModal .expense-tx-detail-grid>div,
#expenseTransactionDetailModal .expense-tx-note{
  padding:9px 10px!important;
  border-radius:11px!important;
}
#expenseTransactionDetailModal .expense-tx-detail-grid small,
#expenseTransactionDetailModal .expense-tx-note small{
  margin-bottom:3px!important;
  font-size:.66rem!important;
  line-height:1.15!important;
}
#expenseTransactionDetailModal .expense-tx-detail-grid strong{
  font-size:.81rem!important;
  line-height:1.25!important;
}
#expenseTransactionDetailModal .expense-tx-detail-empty{
  margin-top:8px!important;
  padding:9px 10px!important;
  border-radius:11px!important;
  font-size:.70rem!important;
}
#expenseTransactionDetailModal .expense-tx-note{
  margin-top:8px!important;
}
#expenseTransactionDetailModal .expense-tx-note p{
  font-size:.79rem!important;
  line-height:1.35!important;
}
#expenseTransactionDetailModal .expense-tx-actions{
  justify-content:flex-end!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
  margin-top:10px!important;
}
#expenseTransactionDetailModal .expense-tx-actions .expense-tx-action-icon{
  flex:0 0 36px!important;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  border-radius:50%!important;
  display:inline-grid!important;
  place-items:center!important;
  font-size:.82rem!important;
  line-height:1!important;
}
#expenseTransactionDetailModal .expense-tx-transfer-hero{
  gap:8px!important;
  padding:10px!important;
  border-radius:15px!important;
  box-shadow:none!important;
}
#expenseTransactionDetailModal .expense-tx-transfer-wallet{
  gap:3px!important;
  padding:9px 8px!important;
  border-radius:12px!important;
}
#expenseTransactionDetailModal .expense-tx-transfer-wallet>span{
  width:40px!important;
  height:40px!important;
  border-radius:12px!important;
}
#expenseTransactionDetailModal .expense-tx-transfer-wallet strong{font-size:.78rem!important}
#expenseTransactionDetailModal .expense-tx-transfer-wallet b{font-size:.90rem!important}
#expenseTransactionDetailModal .expense-tx-transfer-arrow i{
  width:30px!important;
  height:30px!important;
}

@media (max-width:720px){
  #expenseModal.modal{
    place-items:center!important;
    padding:
      max(18px,env(safe-area-inset-top,0px))
      max(14px,env(safe-area-inset-right,0px))
      max(18px,env(safe-area-inset-bottom,0px))
      max(14px,env(safe-area-inset-left,0px))!important;
  }
  #expenseModal .modal-dialog.compact-entry-dialog{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 36px)!important;
    margin:auto!important;
    align-self:center!important;
    border-radius:18px!important;
  }
  #expenseTopupForm .modal-footer .btn,
  #expenseEntryForm .modal-footer .btn{
    min-width:90px!important;
    min-height:32px!important;
    height:32px!important;
    padding:0 12px!important;
    font-size:.67rem!important;
  }
  #expenseTopupForm .expense-optional-details>summary,
  #expenseEntryForm .expense-optional-details>summary{
    min-height:32px!important;
    padding:5px 8px!important;
    gap:5px!important;
    font-size:.64rem!important;
  }
  #expenseTopupForm .expense-optional-details>summary>small,
  #expenseEntryForm .expense-optional-details>summary>small{
    font-size:.51rem!important;
    max-width:44%!important;
  }
  #expenseTopupForm .expense-optional-chevron,
  #expenseEntryForm .expense-optional-chevron{
    width:16px!important;
    height:16px!important;
    flex-basis:16px!important;
    font-size:.64rem!important;
  }

  #expenseTransactionDetailModal.modal{
    place-items:center!important;
    padding:
      max(18px,env(safe-area-inset-top,0px))
      max(14px,env(safe-area-inset-right,0px))
      max(18px,env(safe-area-inset-bottom,0px))
      max(14px,env(safe-area-inset-left,0px))!important;
  }
  #expenseTransactionDetailModal .expense-tx-detail-dialog{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 36px)!important;
    margin:auto!important;
    align-self:center!important;
    border-radius:18px!important;
  }
  #expenseTransactionDetailModal .modal-head{
    padding:9px 11px 6px!important;
  }
  #expenseTransactionDetailModal .modal-body{
    padding:7px 10px 10px!important;
  }
  #expenseTransactionDetailModal .expense-tx-hero{
    gap:8px!important;
    padding:9px 10px!important;
    border-radius:12px!important;
  }
  #expenseTransactionDetailModal .expense-tx-icon{
    width:38px!important;
    height:38px!important;
    border-radius:11px!important;
  }
  #expenseTransactionDetailModal .expense-tx-hero strong{font-size:1.02rem!important}
  #expenseTransactionDetailModal .expense-tx-detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:6px!important;
  }
  #expenseTransactionDetailModal .expense-tx-detail-grid>div,
  #expenseTransactionDetailModal .expense-tx-note{
    padding:7px 8px!important;
    border-radius:10px!important;
  }
  #expenseTransactionDetailModal .expense-tx-detail-grid small,
  #expenseTransactionDetailModal .expense-tx-note small{
    margin-bottom:2px!important;
    font-size:.60rem!important;
  }
  #expenseTransactionDetailModal .expense-tx-detail-grid strong{
    font-size:.73rem!important;
  }
  #expenseTransactionDetailModal .expense-tx-note{
    margin-top:6px!important;
  }
  #expenseTransactionDetailModal .expense-tx-note p{
    font-size:.72rem!important;
    line-height:1.3!important;
  }
  #expenseTransactionDetailModal .expense-tx-actions{
    gap:6px!important;
    margin-top:8px!important;
  }
  #expenseTransactionDetailModal .expense-tx-actions .expense-tx-action-icon{
    flex-basis:34px!important;
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    font-size:.76rem!important;
  }
  #expenseTransactionDetailModal .expense-tx-transfer-hero{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    gap:6px!important;
    padding:8px!important;
  }
  #expenseTransactionDetailModal .expense-tx-transfer-arrow{
    flex-direction:column!important;
  }
  #expenseTransactionDetailModal .expense-tx-transfer-arrow i{
    transform:none!important;
  }
  #expenseTransactionDetailModal .expense-tx-transfer-wallet{
    padding:7px 5px!important;
  }
}

@media (max-width:360px){
  #expenseTransactionDetailModal .expense-tx-detail-grid{
    grid-template-columns:1fr!important;
  }
  #expenseTopupForm .modal-footer,
  #expenseEntryForm .modal-footer{gap:6px!important}
  #expenseTopupForm .modal-footer .btn,
  #expenseEntryForm .modal-footer .btn{
    min-width:84px!important;
    padding-inline:10px!important;
  }
}

/* 2026-09-08 Expenses final touch polish: invisible entry scrollbars + stable wallet filter. */
#expenseModal:has(#expenseTopupForm:not(.hide)) .modal-body,
#expenseModal:has(#expenseEntryForm:not(.hide)) .modal-body{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
#expenseModal:has(#expenseTopupForm:not(.hide)) .modal-body::-webkit-scrollbar,
#expenseModal:has(#expenseEntryForm:not(.hide)) .modal-body::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}

#expensesPanel .expense-wallet-select-control,
#expensesPanel .expense-wallet-select-control:is(:hover,:focus-within,:active){
  transform:none!important;
  filter:none!important;
  box-shadow:none!important;
}
#expensesPanel .expense-wallet-select-control::before,
#expensesPanel .expense-wallet-select-control::after{
  content:none!important;
  display:none!important;
}
#expensesPanel .expense-wallet-select-filter{
  transform:none!important;
  filter:none!important;
  transition:border-color .14s ease,background-color .14s ease,color .14s ease!important;
  -webkit-tap-highlight-color:transparent!important;
  touch-action:manipulation;
}
#expensesPanel .expense-wallet-select-filter:is(:hover,:focus,:focus-visible,:active){
  transform:none!important;
  filter:none!important;
  outline:none!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-highlight,#fff) 38%,transparent)!important;
  border-color:color-mix(in srgb,var(--primary) 48%,var(--line))!important;
}
@media (max-width:768px){
  #expensesPanel .expense-wallet-select-filter,
  #expensesPanel .expense-wallet-select-filter:is(:hover,:focus,:focus-visible,:active){
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:border-color .12s ease,background-color .12s ease,color .12s ease!important;
  }
}

/* 2026-09-08 Transfer entry parity with Add Money / Add Expense. */
#transferModal.modal{
  place-items:center!important;
}
#transferModal .transfer-entry-dialog{
  width:min(560px,calc(100vw - 24px))!important;
  max-width:560px!important;
  max-height:min(720px,calc(100dvh - 36px))!important;
  margin:auto!important;
  align-self:center!important;
}
#transferModal .modal-body{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
#transferModal .modal-body::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
#transferForm .modal-footer{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  margin-top:4px!important;
  padding:4px 0 1px!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
}
#transferForm .modal-footer .btn{
  flex:0 0 auto!important;
  min-width:96px!important;
  min-height:34px!important;
  height:34px!important;
  padding:0 15px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:.72rem!important;
  line-height:1!important;
}
#transferForm .expense-optional-details{
  border-radius:13px!important;
}
#transferForm .expense-optional-details>summary{
  min-height:36px!important;
  padding:6px 10px!important;
  gap:7px!important;
  font-size:.76rem!important;
  line-height:1.15!important;
}
#transferForm .expense-optional-details>summary::after{
  display:none!important;
  content:none!important;
}
#transferForm .expense-optional-details>summary>small{
  font-size:.62rem!important;
  line-height:1.12!important;
}
#transferForm .expense-optional-chevron{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  display:inline-grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--primary)!important;
  font-size:.72rem!important;
}
#transferForm .expense-chevron-down{display:none}
#transferForm .expense-optional-details[open] .expense-chevron-right{display:none}
#transferForm .expense-optional-details[open] .expense-chevron-down{display:inline-block}
#transferForm .expense-optional-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px 10px!important;
  align-items:stretch!important;
}
#transferForm .expense-optional-grid>.field,
#transferForm .expense-optional-grid>.field.w12,
#transferForm .expense-optional-grid>.expense-optional-wide{
  grid-column:span 1!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
}
#transferForm .expense-optional-grid>.field>label{
  min-height:1.45em!important;
  display:flex!important;
  align-items:flex-end!important;
  column-gap:3px!important;
}
#transferForm .expense-optional-grid .optional-label{
  flex:0 0 auto!important;
  margin:0!important;
  white-space:nowrap!important;
  color:var(--muted)!important;
  font-style:normal!important;
  font-weight:650!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
#transferForm .expense-optional-grid>.field :is(.input,.select){width:100%!important}
#transferForm .transfer-money-input{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:5px;
  align-items:center;
  min-width:0;
}
#transferForm .transfer-money-input .input{min-width:0;width:100%}
#transferForm .transfer-currency-indicator{
  min-width:30px;
  color:var(--muted);
  font-size:.70rem;
  font-weight:750;
  text-align:center;
}
#transferForm .transfer-readonly-amount{
  background:var(--panel-bg,var(--surface-soft))!important;
}
#transferForm .transfer-conversion-help{
  margin-left:3px;
  color:var(--muted);
  font-size:.62rem;
  font-weight:650;
}

@media (max-width:720px){
  #transferModal.modal{
    place-items:center!important;
    padding:
      max(18px,env(safe-area-inset-top,0px))
      max(14px,env(safe-area-inset-right,0px))
      max(18px,env(safe-area-inset-bottom,0px))
      max(14px,env(safe-area-inset-left,0px))!important;
  }
  #transferModal .transfer-entry-dialog{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 36px)!important;
    margin:auto!important;
    align-self:center!important;
    border-radius:18px!important;
  }
  #transferForm .field>label{
    font-size:.64rem!important;
    line-height:1.18!important;
  }
  #transferForm :is(.input,.select){
    min-height:34px!important;
    height:34px!important;
    padding:5px 7px!important;
    font-size:.70rem!important;
    line-height:1.15!important;
  }
  #transferForm .optional-label{font-size:.54rem!important}
  #transferForm .modal-footer .btn{
    min-width:90px!important;
    min-height:32px!important;
    height:32px!important;
    padding:0 12px!important;
    font-size:.67rem!important;
  }
  #transferForm .expense-optional-details>summary{
    min-height:32px!important;
    padding:5px 8px!important;
    gap:5px!important;
    font-size:.64rem!important;
  }
  #transferForm .expense-optional-details>summary>small{
    max-width:44%!important;
    font-size:.51rem!important;
  }
  #transferForm .expense-optional-chevron{
    width:16px!important;
    height:16px!important;
    flex-basis:16px!important;
    font-size:.64rem!important;
  }
  #transferForm .expense-optional-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px 7px!important;
    padding:5px 8px 9px!important;
  }
  #transferForm .expense-optional-grid>.field>label{
    min-height:2.35em!important;
    margin-bottom:3px!important;
    font-size:.60rem!important;
    line-height:1.16!important;
  }
  #transferForm .transfer-currency-indicator{
    min-width:27px!important;
    font-size:.60rem!important;
  }
  #transferForm .transfer-conversion-help{font-size:.52rem!important}
}

@media (max-width:360px){
  #transferForm .modal-footer{gap:6px!important}
  #transferForm .modal-footer .btn{
    min-width:84px!important;
    padding-inline:10px!important;
  }
}

/* 2026-09-08 Wallet account particulars: entry/edit parity, protected detail view and transfer verification. */
#expenseModal:has(#expenseAccountForm:not(.hide)) .modal-body{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
#expenseModal:has(#expenseAccountForm:not(.hide)) .modal-body::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
#expenseAccountForm .modal-footer{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  margin-top:4px!important;
  padding:4px 0 1px!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
}
#expenseAccountForm .modal-footer .btn{
  flex:0 0 auto!important;
  min-width:96px!important;
  min-height:34px!important;
  height:34px!important;
  padding:0 15px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:.72rem!important;
  line-height:1!important;
}
#expenseAccountForm .expense-optional-details,
#editExpenseAccountDetailsGroup .expense-optional-details{
  border-radius:13px!important;
}
#expenseAccountForm .expense-optional-details>summary,
#editExpenseAccountDetailsGroup .expense-optional-details>summary{
  min-height:36px!important;
  padding:6px 10px!important;
  gap:7px!important;
  font-size:.76rem!important;
  line-height:1.15!important;
}
#expenseAccountForm .expense-optional-details>summary::after,
#editExpenseAccountDetailsGroup .expense-optional-details>summary::after{
  display:none!important;
  content:none!important;
}
#expenseAccountForm .expense-optional-details>summary>small,
#editExpenseAccountDetailsGroup .expense-optional-details>summary>small{
  font-size:.62rem!important;
  line-height:1.12!important;
}
#expenseAccountForm .expense-optional-chevron,
#editExpenseAccountDetailsGroup .expense-optional-chevron{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  display:inline-grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--primary)!important;
  font-size:.72rem!important;
}
#expenseAccountForm .expense-chevron-down,
#editExpenseAccountDetailsGroup .expense-chevron-down{display:none}
#expenseAccountForm .expense-optional-details[open] .expense-chevron-right,
#editExpenseAccountDetailsGroup .expense-optional-details[open] .expense-chevron-right{display:none}
#expenseAccountForm .expense-optional-details[open] .expense-chevron-down,
#editExpenseAccountDetailsGroup .expense-optional-details[open] .expense-chevron-down{display:inline-block}
#expenseAccountForm .expense-optional-grid,
#editExpenseAccountDetailsGroup .expense-optional-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px 10px!important;
  align-items:stretch!important;
}
#expenseAccountForm .expense-optional-grid>.field,
#editExpenseAccountDetailsGroup .expense-optional-grid>.field{
  grid-column:span 1!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
}
#expenseAccountForm .expense-optional-grid>.field>label,
#editExpenseAccountDetailsGroup .expense-optional-grid>.field>label{
  min-height:1.45em!important;
  display:flex!important;
  align-items:flex-end!important;
  column-gap:3px!important;
}
#expenseAccountForm .expense-optional-grid .optional-label,
#editExpenseAccountDetailsGroup .expense-optional-grid .optional-label{
  flex:0 0 auto!important;
  margin:0!important;
  white-space:nowrap!important;
  color:var(--muted)!important;
  font-style:normal!important;
  font-weight:650!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
#expenseAccountForm .expense-optional-grid :is(.input,.select),
#editExpenseAccountDetailsGroup .expense-optional-grid :is(.input,.select){width:100%!important}

.transfer-account-mini{
  margin-top:5px;
  padding:6px 7px;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  border-radius:10px;
  background:color-mix(in srgb,var(--surface-soft) 84%,transparent);
}
.transfer-account-mini-inner{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px 8px;
}
.transfer-account-mini-inner>span{min-width:0;display:flex;flex-direction:column;gap:1px}
.transfer-account-mini-inner small{color:var(--muted);font-size:.54rem;font-weight:700;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
.transfer-account-mini-inner strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-strong);font-size:.64rem;line-height:1.15;font-weight:750}

#expenseAccountDetailsModal.modal{
  place-items:center!important;
  z-index:1185!important;
  padding:24px!important;
}
#expenseAccountDetailsModal .expense-account-details-dialog{
  width:min(590px,calc(100vw - 48px))!important;
  max-width:590px!important;
  max-height:calc(100dvh - 48px)!important;
  margin:auto!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:20px!important;
}
#expenseAccountDetailsModal .modal-head{padding:12px 14px 9px!important}
#expenseAccountDetailsModal .modal-head h3{font-size:1rem!important}
#expenseAccountDetailsModal .modal-head p{margin-top:2px!important;font-size:.70rem!important}
#expenseAccountDetailsModal .modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:10px 14px 14px!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
#expenseAccountDetailsModal .modal-body::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.expense-account-details-hero{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-soft);
}
.expense-account-details-logo{
  width:46px;height:46px;flex:0 0 46px;
  display:grid;place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-elevated);
}
.expense-account-details-logo img{max-width:38px;max-height:38px;object-fit:contain}
.expense-account-details-hero>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.expense-account-details-hero small{color:var(--primary);font-size:.59rem;font-weight:850;letter-spacing:.06em}
.expense-account-details-hero strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-strong);font-size:.94rem}
.expense-account-details-hero span{color:var(--muted);font-size:.69rem}
.expense-account-details-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:9px;
}
.expense-account-detail-card{
  min-width:0;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-elevated);
}
.expense-account-detail-card>small{display:block;margin-bottom:3px;color:var(--muted);font-size:.61rem;font-weight:700}
.expense-account-detail-card>div{min-width:0;display:flex;align-items:center;gap:6px}
.expense-account-detail-card strong{min-width:0;overflow-wrap:anywhere;color:var(--text-strong);font-size:.78rem;line-height:1.22}
.expense-account-detail-card.is-sensitive strong{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
.expense-account-reveal{width:28px!important;min-width:28px!important;height:28px!important;flex:0 0 28px!important;border-radius:50%!important;font-size:.68rem!important}
.expense-account-details-empty{display:flex;align-items:flex-start;gap:8px;margin-top:9px;padding:10px 11px;border:1px dashed var(--line-strong);border-radius:11px;background:var(--surface-soft);color:var(--muted);font-size:.72rem;line-height:1.35}
.expense-account-details-empty i{margin-top:1px;color:var(--primary)}
.wallet-account-details-btn{white-space:nowrap}

@media(max-width:720px){
  #expenseAccountForm .field>label{font-size:.64rem!important;line-height:1.18!important}
  #expenseAccountForm :is(.input,.select){min-height:34px!important;height:34px!important;padding:5px 7px!important;font-size:.70rem!important;line-height:1.15!important}
  #expenseAccountForm .modal-footer .btn{min-width:90px!important;min-height:32px!important;height:32px!important;padding:0 12px!important;font-size:.67rem!important}
  #expenseAccountForm .expense-optional-details>summary,
  #editExpenseAccountDetailsGroup .expense-optional-details>summary{min-height:32px!important;padding:5px 8px!important;gap:5px!important;font-size:.64rem!important}
  #expenseAccountForm .expense-optional-details>summary>small,
  #editExpenseAccountDetailsGroup .expense-optional-details>summary>small{max-width:44%!important;font-size:.51rem!important}
  #expenseAccountForm .expense-optional-chevron,
  #editExpenseAccountDetailsGroup .expense-optional-chevron{width:16px!important;height:16px!important;flex-basis:16px!important;font-size:.64rem!important}
  #expenseAccountForm .expense-optional-grid,
  #editExpenseAccountDetailsGroup .expense-optional-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px 7px!important;padding:5px 8px 9px!important}
  #expenseAccountForm .expense-optional-grid>.field>label,
  #editExpenseAccountDetailsGroup .expense-optional-grid>.field>label{min-height:2.35em!important;margin-bottom:3px!important;font-size:.60rem!important;line-height:1.16!important}
  .transfer-account-mini{padding:5px 6px;border-radius:9px}
  .transfer-account-mini-inner{gap:3px 6px}
  .transfer-account-mini-inner small{font-size:.48rem}
  .transfer-account-mini-inner strong{font-size:.57rem}
  #expenseAccountDetailsModal.modal{
    padding:max(18px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))!important;
  }
  #expenseAccountDetailsModal .expense-account-details-dialog{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 36px)!important;margin:auto!important;border-radius:18px!important}
  #expenseAccountDetailsModal .modal-head{padding:10px 11px 7px!important}
  #expenseAccountDetailsModal .modal-body{padding:8px 10px 10px!important}
  .expense-account-details-hero{padding:9px 10px;gap:9px;border-radius:12px}
  .expense-account-details-logo{width:40px;height:40px;flex-basis:40px;border-radius:11px}
  .expense-account-details-logo img{max-width:34px;max-height:34px}
  .expense-account-details-grid{gap:6px;margin-top:7px}
  .expense-account-detail-card{padding:7px 8px;border-radius:10px}
  .expense-account-detail-card>small{font-size:.55rem}
  .expense-account-detail-card strong{font-size:.69rem}
}
@media(max-width:720px){
  #expenseAccountForm .modal-grid{gap:6px!important}
  #expenseAccountForm .field{gap:3px!important;min-width:0!important}
  #expenseAccountForm .optional-label{font-size:.54rem!important}
}
@media(max-width:560px){
  #expenseAccountForm .modal-grid>.field.w6{grid-column:span 6!important}
  #expenseAccountForm .modal-grid>.field.w12,
  #expenseAccountForm .modal-grid>.expense-optional-details{grid-column:span 12!important}
}
@media(max-width:360px){
  #expenseAccountForm .modal-footer{gap:6px!important}
  #expenseAccountForm .modal-footer .btn{min-width:84px!important;padding-inline:10px!important}
}

/* Payment-card safety: the app never accepts a full PAN; only the final four digits are editable. */
#expenseAccountForm .expense-card-last4-input,
#editExpenseAccountDetailsGroup .expense-card-last4-input{
  width:100%;
  min-width:0;
  min-height:38px;
  display:grid;
  grid-template-columns:auto minmax(56px,1fr);
  align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease;
}
#expenseAccountForm .expense-card-last4-input:focus-within,
#editExpenseAccountDetailsGroup .expense-card-last4-input:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);
}
#expenseAccountForm .expense-card-last4-input>span,
#editExpenseAccountDetailsGroup .expense-card-last4-input>span{
  padding-left:10px;
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.015em;
  white-space:nowrap;
  pointer-events:none;
}
#expenseAccountForm .expense-card-last4-input>.input,
#editExpenseAccountDetailsGroup .expense-card-last4-input>.input{
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 9px 0 2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  color:var(--text-strong)!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem!important;
  font-weight:800!important;
  letter-spacing:.08em;
}
@media (max-width:720px){
  #expenseAccountForm .expense-card-last4-input,
  #editExpenseAccountDetailsGroup .expense-card-last4-input{min-height:34px;border-radius:9px}
  #expenseAccountForm .expense-card-last4-input>span,
  #editExpenseAccountDetailsGroup .expense-card-last4-input>span{padding-left:8px;font-size:.62rem}
  #expenseAccountForm .expense-card-last4-input>.input,
  #editExpenseAccountDetailsGroup .expense-card-last4-input>.input{height:32px!important;min-height:32px!important;padding-right:7px!important;font-size:.68rem!important}
}

/* Expenses audit lifecycle + compact transaction pagination */
.expense-record-disabled{
  filter:saturate(.2);
  background:color-mix(in srgb,var(--panel, #fff) 84%,var(--muted,#8b93a6) 16%);
}
.expense-record-disabled td{color:var(--muted,#7b8495)!important}
.expense-record-disabled td strong,.expense-record-disabled td b{color:inherit!important}
.expense-record-disabled.is-archived{opacity:.7;filter:grayscale(.72)}
.expense-record-disabled .expense-tx-menu-btn,.expense-record-disabled .expense-record-menu-btn{opacity:.9}
.expense-audit-badge-host{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.42rem}
.expense-audit-badge{
  display:inline-flex;align-items:center;gap:.34rem;min-height:23px;padding:.18rem .52rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--border,#d8dce5) 78%,transparent);font-size:.69rem;font-weight:800;line-height:1.05;
  letter-spacing:.01em;vertical-align:middle;margin-left:.42rem;background:var(--panel,#fff);color:var(--muted,#6d7585);
}
button.expense-audit-badge{font:inherit;cursor:pointer}
.expense-audit-badge.is-deleted{background:color-mix(in srgb,var(--danger,#d84a4a) 9%,var(--panel,#fff));color:var(--danger,#b73a3a)}
.expense-audit-badge.is-archived{background:color-mix(in srgb,var(--text,#202633) 9%,var(--panel,#fff));color:var(--text,#303642)}
.expense-audit-badge.is-edited{background:color-mix(in srgb,var(--primary,#4668df) 9%,var(--panel,#fff));color:var(--primary,#3e5dcc)}
.expense-audit-badge.is-clickable:hover{transform:none;box-shadow:none}
.expense-tx-detail-dialog .expense-audit-badge-host .expense-audit-badge{margin-left:0}
.expense-audit-history-toolbar{display:flex;justify-content:flex-start;margin-bottom:.75rem}
.expense-audit-history-toolbar .btn{min-height:34px;padding:.42rem .72rem;border-radius:999px}
.expense-audit-history{display:grid;gap:.72rem}
.expense-audit-event{border:1px solid var(--border,#e1e4ea);border-radius:14px;padding:.75rem;background:var(--panel,#fff)}
.expense-audit-event header{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;margin-bottom:.6rem}
.expense-audit-event-title{font-size:.8rem;font-weight:900}
.expense-audit-event header small{font-size:.69rem;color:var(--muted,#758091);text-align:right}
.expense-audit-diff{display:grid;gap:.38rem}
.expense-audit-diff>div{display:grid;grid-template-columns:minmax(92px,.65fr) minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.5rem;padding:.4rem .48rem;border-radius:9px;background:color-mix(in srgb,var(--panel,#fff) 92%,var(--text,#222) 8%)}
.expense-audit-diff small{font-weight:800;color:var(--muted,#70798a)}
.expense-audit-diff span,.expense-audit-diff strong{font-size:.73rem;overflow-wrap:anywhere}
.expense-audit-diff i{font-size:.62rem;color:var(--muted,#70798a)}
.expense-audit-event-note{font-size:.75rem;color:var(--muted,#70798a);margin:.2rem 0}
.expense-audit-raw{margin-top:.58rem;border-top:1px dashed var(--border,#dde1e8);padding-top:.48rem}
.expense-audit-raw summary{cursor:pointer;font-size:.7rem;font-weight:800;color:var(--muted,#70798a)}
.expense-audit-raw>div{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.45rem}
.expense-audit-raw label{display:block;font-size:.65rem;font-weight:900;margin-bottom:.2rem}
.expense-audit-raw pre{margin:0;max-height:190px;overflow:auto;border-radius:9px;padding:.55rem;font-size:.63rem;line-height:1.4;background:color-mix(in srgb,var(--panel,#fff) 87%,var(--text,#222) 13%);white-space:pre-wrap;overflow-wrap:anywhere}
.expense-audit-empty{text-align:center;padding:1rem;color:var(--muted,#70798a)}
.expense-pagination{display:flex;align-items:center;justify-content:center;gap:.42rem;padding:.72rem .3rem .12rem}
.expense-pagination-pages{display:flex;align-items:center;gap:.28rem}
.expense-page-number,.expense-page-nav{appearance:none;border:1px solid var(--border,#dce0e7);background:var(--panel,#fff);color:var(--text,#242936);height:31px;min-width:31px;border-radius:999px;display:inline-grid;place-items:center;font-size:.72rem;font-weight:800;padding:0 .48rem;box-shadow:none;transform:none}
.expense-page-number.is-active{background:var(--text,#242936);color:var(--panel,#fff);border-color:var(--text,#242936)}
.expense-page-number:hover,.expense-page-nav:hover{transform:none;box-shadow:none}
.expense-page-nav:disabled{opacity:.35;cursor:not-allowed}
.expense-page-ellipsis{font-size:.75rem;color:var(--muted,#778090);padding:0 .08rem}
.expense-pagination-mobile{display:none;font-size:.72rem;font-weight:800;color:var(--muted,#778090);min-width:46px;text-align:center}
@media(max-width:680px){
  .expense-audit-badge{font-size:.64rem;padding:.16rem .42rem}
  .expense-audit-event{padding:.62rem;border-radius:12px}
  .expense-audit-event header{display:grid;gap:.18rem}
  .expense-audit-event header small{text-align:left}
  .expense-audit-diff>div{grid-template-columns:1fr;gap:.16rem}
  .expense-audit-diff i{transform:rotate(90deg);justify-self:start;margin:.08rem 0}
  .expense-audit-raw>div{grid-template-columns:1fr}
  .expense-pagination-pages{display:none}
  .expense-pagination-mobile{display:inline-block}
  .expense-pagination{padding-top:.58rem}
  .expense-page-nav{height:30px;min-width:38px}
}

/* Build 155 — unmistakable, motion-safe Expenses paging and clickable history affordance. */
.expense-page-number,.expense-page-nav{
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,opacity .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.expense-page-number:not(.is-active):not(:disabled):hover,
.expense-page-nav:not(:disabled):hover{
  background:color-mix(in srgb,var(--panel,#fff) 88%,var(--text,#242936) 12%);
  border-color:color-mix(in srgb,var(--border,#dce0e7) 55%,var(--text,#242936) 45%);
  box-shadow:0 3px 10px color-mix(in srgb,var(--text,#242936) 12%,transparent);
}
.expense-page-number:not(:disabled):active,.expense-page-nav:not(:disabled):active{
  background:color-mix(in srgb,var(--panel,#fff) 82%,var(--text,#242936) 18%);
  box-shadow:none;
}
.expense-page-number:focus-visible,.expense-page-nav:focus-visible{
  outline:2px solid color-mix(in srgb,var(--text,#242936) 70%,transparent);
  outline-offset:2px;
}
.expense-page-number.is-active{cursor:default;box-shadow:0 2px 7px color-mix(in srgb,var(--text,#242936) 14%,transparent)}
.expense-pagination.is-loading .expense-page-number,
.expense-pagination.is-loading .expense-page-nav{pointer-events:none;opacity:.55;cursor:progress}
.expense-tx-row[role="button"]{cursor:pointer;transition:background-color .14s ease,box-shadow .14s ease}
.expense-tx-row[role="button"]:hover td{background:color-mix(in srgb,var(--panel,#fff) 91%,var(--text,#242936) 9%)}
.expense-tx-row[role="button"]:focus-visible{outline:2px solid color-mix(in srgb,var(--text,#242936) 68%,transparent);outline-offset:-2px}
.expense-item-row>summary{cursor:pointer}
.expense-item-row>summary:hover{background:color-mix(in srgb,var(--panel,#fff) 94%,var(--text,#242936) 6%)}
@media(max-width:680px){
  .expense-page-number,.expense-page-nav{box-shadow:none}
  .expense-tx-row[role="button"]:hover td,.expense-item-row>summary:hover{background:inherit}
}