.pay-controls,.pay-panel-head,.pay-confirm-head,.pay-confirm-actions {display:flex;align-items:center;justify-content:space-between;gap:14px;}
.pay-demo {display:inline-block;padding:4px 8px;border-radius:6px;background:rgba(139,92,246,.09);color:#7952be;font-size:10px;font-weight:500;}
html[data-theme="dark"] .pay-demo {background:rgba(167,139,250,.12);color:#c4a8f5;}
.pay-footnote {color:var(--muted);font-size:11px;}
.pay-summary {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px;}
.pay-summary article,.pay-panel {background:var(--glass);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);}
.pay-summary article {padding:22px;}.pay-summary article>span {font-size:12px;color:var(--muted);}.pay-summary strong {display:block;margin:17px 0 9px;font-size:28px;font-weight:600;letter-spacing:-.04em;}.pay-summary small {font-size:10px;color:var(--muted);}
.pay-panel {overflow:hidden;}.pay-panel-head {padding:23px 24px 18px;}.pay-panel h2 {font-size:15px;font-weight:600;margin:0;}.pay-panel-head p {font-size:11px;color:var(--muted);margin:6px 0 0;}
.pay-controls {padding:0 24px 21px;flex-wrap:wrap;}.pay-filters {display:flex;gap:3px;padding:3px;border-radius:8px;background:var(--surface-raised);}.pay-filters button {border:0;background:transparent;padding:7px 12px;border-radius:6px;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;transition:background .15s,color .15s;}.pay-filters button[aria-pressed="true"] {background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.07);}
.pay-controls input {width:210px;padding:8px 11px;background:var(--surface-soft);font-size:11px;border:1px solid var(--line);}
.pay-table-wrap {overflow-x:auto;}.pay-list table {width:100%;border-collapse:collapse;}.pay-list th {padding:12px 24px;font-size:10px;font-weight:500;text-transform:none;letter-spacing:0;background:var(--surface-soft);color:var(--muted);text-align:left;border-block:1px solid var(--line);white-space:nowrap;}.pay-list td {padding:19px 24px;font-size:12px;color:var(--ink);border-bottom:1px solid var(--line);vertical-align:middle;}.pay-list tr:last-child td {border-bottom:0;}.pay-list tbody tr:hover {background:var(--surface-soft);}.pay-person {display:flex;align-items:center;gap:11px;white-space:nowrap;}.pay-avatar {width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:500;}.pay-person strong {font-weight:500;font-size:12px;}.pay-list td small {display:block;margin-top:5px;font-size:10px;color:var(--muted);white-space:nowrap;}.pay-amount {font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}.pay-status {display:inline-flex;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:500;background:var(--accent-soft);color:var(--accent);}.pay-status.paid {background:rgba(48,154,111,.10);color:var(--positive);}.pay-action {text-align:right;white-space:nowrap;}.pay-action .button {font-weight:500;gap:7px;}.pay-complete {color:var(--positive);font-size:15px;}.pay-empty {padding:55px 24px;text-align:center;color:var(--muted);font-size:12px;}.pay-footnote {margin:16px 3px;}
.pay-confirm {width:min(440px,calc(100% - 32px));background:var(--white);color:var(--ink);}.pay-confirm-content {padding:26px;}.pay-confirm-head {margin-bottom:18px;}.pay-confirm h2 {margin:0;font-size:21px;line-height:1.3;letter-spacing:-.025em;font-weight:600;}.pay-confirm p {font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0 20px;}.pay-confirm-amount {padding:19px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);}.pay-confirm-amount>span,.pay-confirm-amount small {font-size:11px;color:var(--muted);}.pay-confirm-amount strong {display:block;font-size:32px;font-weight:600;letter-spacing:-.04em;margin:7px 0;}.pay-confirm .pay-confirm-note {font-size:11px;margin:14px 0;}.pay-confirm .pay-confirm-error {color:var(--danger);margin:0;}.pay-confirm-actions {justify-content:flex-end;margin-top:23px;}.pay-confirm-actions .button {font-weight:500;}.pay-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(max-width:1100px) {.pay-list th,.pay-list td {padding-inline:16px;}.pay-summary strong {font-size:24px;}}
@media(max-width:700px) {.pay-summary {grid-template-columns:1fr;gap:10px;}.pay-summary article {padding:18px;}.pay-summary strong {margin:10px 0 6px;}.pay-panel-head,.pay-controls {padding-inline:18px;}.pay-controls input {width:100%;}.pay-list table {min-width:680px;}.pay-confirm-content {padding:22px;}}