.payment-card-note { color:var(--text-sub); font-size:var(--type-note); line-height:1.7; margin:8px 0 16px; }
.payment-cards-page { min-width:0; }
.payment-cards-page>.personal-detail-head { margin-bottom:20px; }
.payment-cards-page>.payment-card-summary { padding-top:0; }
.payment-cards-page>.payment-card-add.primary { min-height:48px; margin:8px 0 16px; }
.payment-cards-page .payment-card-detail-section .cardtop h2 { font-weight:var(--weight-semibold); }
.payment-card-help { margin:16px 0 0; border-top:1px solid var(--border); }
.payment-card-help>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 0; list-style:none; cursor:pointer; color:var(--text-sub); font-size:var(--type-note); font-weight:var(--weight-medium); }
.payment-card-help>summary::-webkit-details-marker { display:none; }
.payment-card-help>summary>.icon { flex:none; width:var(--icon-small); height:var(--icon-small); }
.payment-card-help[open]>summary>.icon { transform:rotate(180deg); }
.payment-card-help>p { margin:0 0 12px; color:var(--text-sub); font-size:var(--type-caption); line-height:1.7; }
.payment-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.payment-card-list,.payment-card-records { margin:0; padding:0; list-style:none; }
.payment-card-summary { display:grid; gap:6px; padding:18px 0; border-bottom:1px solid var(--border); margin-bottom:8px; }
.payment-card-summary>span { font-size:var(--type-note); color:var(--text-sub); }
.payment-card-summary>strong { font-size:var(--type-total); font-weight:var(--weight-bold); line-height:1.3; letter-spacing:-.025em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.payment-card-summary>small { color:var(--text-sub); font-size:var(--type-caption); line-height:1.6; }
.payment-cards-home .payment-card-summary { padding-top:4px; }
.payment-card-company { border-bottom:1px solid var(--border); }
.payment-card-company>summary { display:flex; gap:12px; align-items:center; min-height:74px; padding:12px 0; cursor:pointer; list-style:none; }
.payment-card-company>summary::-webkit-details-marker,.payment-card-archive-list>summary::-webkit-details-marker { display:none; }
.payment-card-company>summary>span:not(.institution-badge) { flex:1; min-width:0; }
.payment-card-company>summary strong { display:block; font-size:var(--type-body); font-weight:var(--weight-semibold); overflow-wrap:anywhere; }
.payment-card-company>summary small { display:block; margin-top:4px; color:var(--text-sub); font-size:var(--type-caption); }
.payment-card-company>summary>.icon,.payment-card-archive-list>summary>.icon { width:var(--icon-small); height:var(--icon-small); color:var(--text-sub); flex-shrink:0; }
.payment-card-company[open]>summary>.icon,.payment-card-archive-list[open]>summary>.icon { transform:rotate(180deg); }
.payment-card-company .payment-card-list { padding-bottom:8px; }
.payment-card-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto) 16px; align-items:center; gap:10px; width:100%; min-height:76px; padding:12px 0 12px 12px; text-align:left; color:var(--text); background:transparent; border:0; border-radius:12px; font:inherit; }
.payment-card-row:active { background:var(--neutral-soft); }
.payment-card-row>span { min-width:0; }
.payment-card-row strong { display:block; font-size:var(--type-label); font-weight:var(--weight-semibold); line-height:1.5; overflow-wrap:anywhere; }
.payment-card-row small { display:block; font-size:var(--type-caption); color:var(--text-sub); line-height:1.5; }
.payment-card-row-name small { margin-top:4px; }
.payment-card-row-value { text-align:right; max-width:10rem; font-variant-numeric:tabular-nums; }
.payment-card-row-value small { margin-bottom:3px; }
.payment-card-row-value strong { font-size:var(--type-row-amount); }
.payment-card-row>.icon { width:var(--icon-small); height:var(--icon-small); color:var(--text-sub); }
.payment-card-detail-heading { display:flex; align-items:center; gap:12px; margin:8px 0 4px; }
.payment-card-detail-heading>div { min-width:0; }
.payment-card-detail-heading h3 { font-size:var(--type-section); margin:4px 0 0; overflow-wrap:anywhere; }
.payment-card-detail-heading p { color:var(--text-sub); font-size:var(--type-caption); margin:0; overflow-wrap:anywhere; }
.payment-card-settings { display:grid; gap:14px; margin:24px 0; }
.payment-card-settings>div { display:grid; grid-template-columns:minmax(5rem,.8fr) minmax(0,1.6fr); gap:16px; font-size:var(--type-note); line-height:1.6; }
.payment-card-settings dt { color:var(--text-sub); }
.payment-card-settings dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.payment-card-detail-section { border-top:1px solid var(--border); padding-top:18px; margin-top:22px; }
.payment-card-detail-section .cardtop { position:static; padding:0; margin-bottom:4px; }
.payment-card-detail-section .cardtop h2 { font-size:var(--type-body); }
.payment-card-balance { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin:14px 0; }
.payment-card-balance span { color:var(--text-sub); font-size:var(--type-note); }
.payment-card-balance strong { font-size:var(--type-body); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.payment-card-actions>button { flex:1 1 auto; min-height:48px; padding-inline:10px; }
.payment-card-actions .icon { width:var(--icon-base); height:var(--icon-base); }
.payment-card-empty { text-align:center; padding:24px 0; }
.payment-card-empty>.icon { width:var(--icon-display); height:var(--icon-display); color:var(--primary-text); }
.payment-card-empty h3 { margin:12px 0 8px; font-size:var(--type-body); }
.payment-card-empty p { color:var(--text-sub); font-size:var(--type-note); line-height:1.7; }
.payment-card-add { width:100%; min-height:44px; margin:12px 0; }
.payment-card-archive-list { margin:16px 0; }
.payment-card-archive-list>summary { min-height:44px; display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:var(--type-note); color:var(--text-sub); cursor:pointer; list-style:none; }
.payment-card-row.is-archived .payment-card-row-name>strong { color:var(--text-sub); }
.payment-card-credit { min-width:0; padding:16px 0 0; margin:4px 0 0; border:0; border-top:1px solid var(--border); }
.payment-card-credit legend { padding-right:8px; font-size:var(--type-label); font-weight:var(--weight-semibold); }
.payment-card-credit[hidden] { display:none; }
.payment-card-terms { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap:12px; }
.payment-card-default-summary { font-size:var(--type-note); color:var(--text); margin-top:12px; }
.payment-card-default-summary { padding:16px; border-radius:14px; background:var(--neutral-soft); line-height:1.6; }
.payment-card-default-summary>span { font-weight:var(--weight-semibold); }
.payment-card-default-summary dl { display:grid; gap:12px; margin:12px 0 0; }
.payment-card-default-summary dt,.payment-card-field-help { color:var(--text-sub); font-size:var(--type-caption); font-weight:var(--weight-regular); line-height:1.6; }
.payment-card-default-summary dd { margin:3px 0 0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.payment-card-field-help { display:block; }
.payment-card-terms { align-items:start; }
.payment-card-terms>label { min-width:0; margin:0; }
.payment-card-cycle-description { font-size:var(--type-note); line-height:1.7; color:var(--text-sub); }
.payment-card-editor>button { min-height:44px; }
.payment-card-usage-heading>p { color:var(--text-sub); font-size:var(--type-note); }
.payment-card-record { display:flex; width:100%; align-items:center; gap:10px; min-height:64px; padding:14px 0; background:transparent; border:0; border-bottom:1px solid var(--border); color:var(--text); text-align:left; font:inherit; }
.payment-card-record>span { flex:1; min-width:0; }
.payment-card-record b { display:block; font-size:var(--type-label); overflow-wrap:anywhere; }
.payment-card-record em { display:inline-block; font-size:var(--type-caption); font-style:normal; font-weight:var(--weight-medium); color:var(--text-sub); }
.payment-card-record em.needs-attention { color:var(--expense); }
.payment-card-record small { display:block; margin-top:6px; font-size:var(--type-caption); color:var(--text-sub); }
.payment-card-record strong { max-width:45%; text-align:right; overflow-wrap:anywhere; font-size:var(--type-label); font-variant-numeric:tabular-nums; }
.payment-card-record>.icon { flex-shrink:0; width:var(--icon-small);  height:var(--icon-small); }
.payment-card-records li:last-child .payment-card-record { border-bottom:0; }
@media(max-width:340px) {
 .payment-card-row { grid-template-columns:minmax(0,1fr) 16px; gap:6px 8px; }
 .payment-card-row-value { grid-column:1; text-align:left; max-width:none; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
 .payment-card-row-value small { margin:0; }
 .payment-card-row>.icon { grid-column:2; grid-row:1 / 3; }
}