.extra-credit-group{grid-area:credit!important;min-width:0;display:flex;flex-direction:column;gap:18px}
.extra-credit-group>.credit-card,.extra-credit-cards>.credit-card{grid-area:auto!important}
.extra-credit-cards{display:grid;gap:18px;min-width:0}
.extra-credit-cards:empty{display:none}
.credit-card>.extra-credit-add{order:100!important;margin-top:32px!important;padding-top:16px;padding-bottom:16px;width:100%}
.extra-credit-card{min-width:0;overflow:hidden;border-color:rgba(167,139,250,.28)}
 .extra-credit-card .card-heading{display:flex!important;gap:16px;flex-wrap:nowrap;padding-inline-end:0}
.extra-credit-card .card-heading>div:first-child{min-width:0;flex:1}
.extra-credit-card .total-badge{max-width:50%;overflow-wrap:anywhere;flex-shrink:0}
.extra-credit-card .total-badge,.extra-credit-card [data-card-field="amount"]{color:#ff8b98}
.extra-credit-toolbar{display:flex;justify-content:flex-end}
.extra-credit-settings .extra-credit-input{min-width:0;width:100%;box-sizing:border-box;border:1px solid #35445e;border-radius:10px;background:#081322;color:#f1f5f9;font:inherit;padding:11px 12px}
.extra-credit-settings .extra-credit-input:focus{outline:2px solid #60a5fa;outline-offset:1px}
.extra-credit-settings .credit-setting-field .credit-auto-option{margin-top:8px;font-size:12px}
.extra-credit-settings .credit-balance-input-wrap>.extra-credit-input{border:0;background:transparent}
.extra-credit-card .credit-auto-option[hidden],.extra-credit-card [hidden]{display:none!important}
.extra-credit-card .credit-setting-field:has([data-card-field="billingDay"]){grid-column:1/-1}

.extra-credit-card h2{overflow-wrap:anywhere;line-height:1.4}
.extra-credit-actions{display:flex;gap:8px;flex-shrink:0}
.extra-credit-edit,.extra-credit-delete,.extra-credit-close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(167,139,250,.4);background:rgba(167,139,250,.12);color:#ddd6fe;font-size:22px;cursor:pointer}
.extra-credit-delete,.extra-credit-confirm-delete{border:1px solid rgba(248,113,113,.5);background:rgba(248,113,113,.15);color:#fca5a5}
.extra-credit-content{display:grid;gap:14px}
.extra-credit-amount{font-size:clamp(25px,4vw,34px);font-weight:800;text-align:center;overflow-wrap:anywhere}
.extra-credit-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px;color:#cbd5e1}
.extra-credit-stats p{margin:0;overflow-wrap:anywhere}
.extra-credit-mode{color:#c4b5fd;grid-column:1/-1}
.extra-credit-history{font-size:13px;color:#cbd5e1}
.credit-history-controls{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;direction:rtl}
.credit-history-toggle,.credit-history-clear{background:transparent;border:0;cursor:pointer;font:inherit;font-size:13px;padding:10px 0;text-align:start}
.credit-history-toggle{color:#c4b5fd}
.credit-history-toggle::before{content:'◂';display:inline-block;margin-inline-end:7px;transition:transform 160ms ease}
.credit-history-toggle[aria-expanded="true"]::before{transform:rotate(-90deg)}
.credit-history-clear{color:#ff9ba6;text-align:end}
.extra-credit-history-list,.credit-history-list{display:grid;gap:0}
.extra-credit-history-list[hidden],.credit-history-list[hidden]{display:none!important}
.extra-credit-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:8px;padding:10px 0;border-bottom:1px solid #263348}
.extra-credit-history-row>span{overflow-wrap:anywhere}
.extra-credit-history-row>div{display:grid;gap:4px;min-width:0}
.extra-credit-history-row strong{font-size:13px;font-weight:400;overflow-wrap:anywhere}
.extra-credit-history-row time,.extra-credit-history-row>div>span{font-size:11px;color:#94a3b8}
.extra-credit-history-row time,.credit-history-balance{grid-column:1/3}
.extra-credit-history-row .credit-history-balance{font-size:12px;color:#94a3b8}
.extra-credit-history-row.is-debit>b{color:#ff8b98}
.extra-credit-history-row.is-credit>b{color:#75e6b1}
.extra-credit-history-delete{grid-column:3;grid-row:1/4;align-self:center;background:transparent;border:0;color:#fca5a5;font-size:20px;cursor:pointer}
.amount-update-toast__message{white-space:pre-line}
.variable-transaction-row.is-editing .variable-transaction-delete{width:auto;max-width:100%;height:auto;min-height:36px;padding:8px 14px;font:inherit;font-size:13px}
.variable-transaction-row.is-editing>.variable-transaction-actions{justify-content:center}
.variable-transaction-input[type="date"]{width:100%;max-width:100%;min-width:0;box-sizing:border-box;display:block}
.extra-credit-dialog{width:min(460px,100%);max-height:min(90dvh,820px);overflow-y:auto;background:#0d192b;border:1px solid #394366;border-radius:20px;padding:24px;display:grid;gap:16px;color:#e2e8f0;box-shadow:0 20px 60px #0007;position:relative;box-sizing:border-box}
.extra-credit-overlay{padding:18px;z-index:13000;display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:#020617b8}
.extra-credit-dialog h2{font-size:20px;margin:0;padding-left:38px;overflow-wrap:anywhere}
.extra-credit-close{position:absolute;left:14px;top:14px}
.extra-credit-field{display:grid;gap:7px;font-size:14px}
.extra-credit-field input{box-sizing:border-box;min-width:0;width:100%;border:1px solid #35445e;border-radius:10px;padding:11px 12px;background:#081322;color:#f1f5f9;font:inherit}
.extra-credit-field input:focus{outline:2px solid #a78bfa;outline-offset:1px}
.extra-credit-field input[readonly]{opacity:.6}
.extra-credit-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.65;cursor:pointer}
.extra-credit-check input{flex-shrink:0;margin-top:6px;accent-color:#a78bfa;width:17px;height:17px}
.extra-credit-error{margin:0;color:#fca5a5;font-size:13px}
.extra-credit-error:empty{display:none}
.extra-credit-dialog-actions{display:flex;gap:12px}
.extra-credit-dialog-actions button{flex:1;border-radius:10px;padding:12px;font:inherit;cursor:pointer}
.extra-credit-dialog>button[type=submit]{padding:12px;border-radius:10px;font:inherit;cursor:pointer}
.extra-credit-dialog button:disabled{opacity:.6;cursor:wait}
@media(max-width:640px){
 .variable-transaction-input[type="date"]{width:100%;max-width:100%;min-width:0;box-sizing:border-box;display:block}
 .variable-transaction-input[type="date"]::-webkit-date-and-time-value{min-width:0;text-align:center}
 .variable-transaction-input[type="date"]::-webkit-datetime-edit{padding:0;min-width:0}
 .variable-transaction-input[type="date"]{font-size:12px;padding-inline:4px}
 .variable-transaction-row.is-editing .variable-transaction-delete{width:auto;max-width:100%;height:auto;min-height:36px;padding:8px 14px;font:inherit;font-size:13px}
 .mobile-details-modal .variable-transactions-breakdown{min-width:0;grid-template-columns:minmax(0,1fr)}
 .mobile-details-modal .variable-transaction-header{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr) 36px}
 .variable-transaction-row.is-editing:has([data-transaction-payment]){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:0}
 .variable-transaction-row.is-editing:has([data-transaction-payment])>[data-transaction-subcategory]{grid-column:1/-1;grid-row:1}
 .variable-transaction-row.is-editing:has([data-transaction-payment])>[data-transaction-amount]{grid-column:1;grid-row:2}
 .variable-transaction-row.is-editing:has([data-transaction-payment])>[data-transaction-date]{grid-column:2;grid-row:2}
 .variable-transaction-row.is-editing:has([data-transaction-payment])>:is(.payment-select-shell,[data-transaction-payment]){grid-column:1/-1;grid-row:3;min-width:0}
 .variable-transaction-row.is-editing:has([data-transaction-payment])>.variable-transaction-actions{grid-column:1/-1;grid-row:4;justify-content:center}
 .extra-credit-dialog{padding:20px;gap:14px}
 .extra-credit-card .card-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;column-gap:18px;padding-inline-end:56px}
 .extra-credit-card .total-badge{max-width:none}
 .extra-credit-card .card-heading::after{display:grid!important}
 .extra-credit-card:not(.is-mobile-open)>.extra-credit-content{display:none}
 .extra-credit-card.is-mobile-open>.extra-credit-content{display:grid}
 .extra-credit-card .credit-settings-grid{grid-template-columns:minmax(0,1fr)}
 .mobile-accordion-ready .credit-card:not(.is-mobile-open) .extra-credit-add{display:none!important}
}

.extra-credit-card .extra-credit-delete{width:100%;height:auto;font-size:14px;padding:12px 16px;margin-top:20px;border-radius:10px;cursor:pointer}


/* Mobile expense breakdown editor: each payment/date/amount field stays in its
   own grid track. Avoid transformed/filter-animated scroll layers on iOS Safari,
   which can paint overlapping, ghosted credit-select controls while scrolling. */
@media (max-width: 640px) {
  .mobile-details-modal .variable-transactions-breakdown,
  .mobile-details-modal .variable-transactions-breakdown.is-editing {
    min-width: 0;
    overflow: visible;
    animation: none;
    filter: none;
    transform: none;
    isolation: isolate;
  }

  .mobile-details-modal .variable-transaction-list.is-scrollable {
    display: block;
    max-height: min(42dvh, 340px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-details-modal .variable-transaction-row.is-editing:has([data-transaction-payment]) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "subcategory subcategory"
      "amount date"
      "payment payment"
      "actions actions";
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 12px 10px;
    box-sizing: border-box;
    background: #0b1929;
    isolation: isolate;
  }
  .mobile-details-modal .variable-transaction-row.is-editing:has([data-transaction-payment]) > [data-transaction-subcategory] {
    grid-area: subcategory;
  }
  .mobile-details-modal .variable-transaction-row.is-editing:has([data-transaction-payment]) > [data-transaction-amount] {
    grid-area: amount;
  }
  .mobile-details-modal .variable-transaction-row.is-editing:has([data-transaction-payment]) > [data-transaction-date] {
    grid-area: date;
  }
  .mobile-details-modal .variable-transaction-row.is-editing:has([data-transaction-payment]) > :is(.payment-select-shell, [data-transaction-payment]) {
    grid-area: payment;
  }
  .mobile-details-modal .variable-transaction-row.is-editing:has([data-transaction-payment]) > .variable-transaction-actions {
    grid-area: actions;
    justify-content: center;
  }
  .mobile-details-modal .variable-transaction-row.is-editing:has([data-transaction-payment]) > :is(input, .payment-select-shell, select, .variable-transaction-actions),
  .mobile-details-modal .variable-transaction-row.is-editing .payment-select-button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .mobile-details-modal .variable-transaction-row.is-editing .payment-select-menu {
    z-index: 80;
  }
}