/* Approved Check Pay composition. Scoped: QR, Key Buy and business logic unchanged. */
.layout-transfer #panel-pay, #panel-opt, .biz-dialog {
  --pay-top:#2a3b4e; --pay-panel:#243243; --pay-field:#233244;
  --pay-line:#41566c; --pay-good:#86d3b3; --pay-good-bg:#253f3c;
  --pay-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23aebdce' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="light"] :is(.layout-transfer #panel-pay, #panel-opt, .biz-dialog) {
  --pay-top:#fff; --pay-panel:#f5f8fc; --pay-field:#eaf0f6;
  --pay-line:#cbd6e1; --pay-good:#236d50; --pay-good-bg:#e4f2eb;
  --pay-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23566a7e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.layout-transfer #panel-pay .pay-panel-body { padding:24px 28px 30px; }
.layout-transfer #panel-pay .payout-ledger {
  padding:22px 26px; margin:0 0 22px; border:1px solid var(--pay-line);
  border-radius:23px; background:linear-gradient(125deg,var(--pay-top),var(--pay-panel)); overflow:hidden;
}
.layout-transfer #panel-pay .payout-ledger-head {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 24px;
  align-items:center; margin:0;
}
.layout-transfer #panel-pay .payout-ledger-heading { grid-column:1/-1; min-width:0; }
.layout-transfer #panel-pay .checkpay-eyebrow { display:block; color:var(--accent); font-size:10px; line-height:1.5; letter-spacing:1.7px; margin-bottom:10px; }
.layout-transfer #panel-pay .payout-ledger .payout-ledger-heading h2 { font-size:19px; margin:0 0 3px; }
.layout-transfer #panel-pay .payout-ledger .payout-ledger-heading p { font-size:12px; line-height:1.5; white-space:normal; margin:0; }
.layout-transfer #panel-pay .payout-ledger-total {
  grid-column:1; grid-row:2; order:initial; width:auto; min-width:0; margin:0;
  padding:0; border:0; border-radius:0; background:none; color:var(--text);
  font-size:clamp(28px,2.4vw,38px); line-height:1.25; font-weight:650;
  letter-spacing:-1px; text-align:left; font-variant-numeric:tabular-nums;
}
.layout-transfer #panel-pay .payout-ledger-toggle {
  grid-column:2; grid-row:2; max-width:none; min-height:38px; padding:9px 13px;
  border-radius:12px; font-size:12px; gap:12px;
}
.layout-transfer #panel-pay .payout-ledger-toggle>span { max-width:none; }
.layout-transfer #panel-pay #payout-withdraw-all { grid-column:1/-1; justify-self:end; margin-top:5px; }
.layout-transfer #panel-pay .payout-cards { margin-top:18px; }
.layout-transfer #panel-pay .payout-ledger.is-collapsed .payout-cards { display:none; }
.layout-transfer #panel-pay .payout-ledger.is-collapsed #payout-withdraw-all { display:none; }
.layout-transfer #panel-pay .pay-summary-grid {
  display:grid; grid-template-columns:1.4fr repeat(4,minmax(0,1fr)); gap:0;
  padding:0; margin:0 0 22px; border:0; border-radius:0; background:none; overflow:visible;
}
.layout-transfer #panel-pay .pay-summary-item {
  display:grid; grid-template-rows:34px auto; gap:4px; padding:3px 14px;
  border:0; border-left:1px solid var(--pay-line); border-radius:0; background:none;
}
.layout-transfer #panel-pay .pay-summary-item:first-child { border-left:0; padding-left:0; background:none; }
.layout-transfer #panel-pay .pay-summary-label { font-size:11px; line-height:17px; }
.layout-transfer #panel-pay .pay-summary-value { font-size:25px; line-height:1.3; font-weight:600; font-variant-numeric:tabular-nums; }
.layout-transfer #panel-pay .pay-summary-item:first-child .pay-summary-value { color:var(--pay-good); }
.layout-transfer #panel-pay .pay-toolbar {
  display:flex; flex-wrap:wrap; gap:12px; padding:0; margin:0 0 22px;
  background:none; border:0; border-radius:0; overflow:visible;
}
.layout-transfer #panel-pay .pay-toolbar input { flex:1 1 200px; min-width:0; }
.layout-transfer #panel-pay .pay-toolbar select { flex:0 1 190px; min-width:0; }
.layout-transfer #panel-pay .pay-toolbar :is(input,select) { min-height:44px; font-size:13px; border:1px solid var(--pay-line); border-radius:12px; background-color:var(--surface); color:var(--text); }
.layout-transfer #panel-pay select {
  /* Legacy shared select rules use !important; contain this override to Check Pay. */
  appearance:none; background-image:var(--pay-arrow)!important; background-repeat:no-repeat!important;
  background-size:16px 16px!important; background-position:right 13px center!important; padding-right:38px!important;
}
.layout-transfer #panel-pay .pay-list-section { margin:0; border:0; border-radius:0; background:none; overflow:visible; box-shadow:none; }
.layout-transfer #panel-pay .pay-list-heading { display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:0 0 8px; margin:0; border:0; background:none; font-size:19px; font-weight:600; }
.layout-transfer #panel-pay .pay-list-count { padding:2px 7px; border-radius:8px; font-size:11px; }
.layout-transfer #panel-pay .payment-column-head { display:none; }
.layout-transfer #panel-pay .payment-day-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:20px 0 12px; border:0; background:none; }
.layout-transfer #panel-pay .payment-day-title { font-size:12px; font-weight:500; }
.layout-transfer #panel-pay .payment-day-total { display:inline-block; padding:5px 10px; border-radius:8px; background:var(--pay-good-bg); color:var(--pay-good); font-size:12px; font-weight:500; }
.layout-transfer #panel-pay .payment-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 16px;
  min-height:0; padding:16px 20px; margin:0 0 10px;
  border:1px solid var(--pay-line); border-radius:18px;
  background:linear-gradient(120deg,var(--pay-top),var(--pay-panel));
  transition:border-color .15s; overflow:visible;
}
.layout-transfer #panel-pay .payment-row:last-child { border-bottom:1px solid var(--pay-line); }
.layout-transfer #panel-pay .payment-row:hover { border-color:var(--accent); }
.layout-transfer #panel-pay .payment-row::before { display:none; }
.layout-transfer #panel-pay .payment-row-time { grid-column:1/-1; font-size:11px; line-height:1.5; margin-bottom:3px; }
.layout-transfer #panel-pay .payment-row-info { grid-column:1; min-width:0; }
.layout-transfer #panel-pay .payment-row-title { font-size:16px; font-weight:600; letter-spacing:-.25px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.layout-transfer #panel-pay .payment-row-meta { font-size:12px; line-height:1.5; margin-top:3px; white-space:normal; overflow-wrap:anywhere; }
.layout-transfer #panel-pay .payment-row-meta a { font-weight:500; }
.layout-transfer #panel-pay .payment-row-amount { grid-column:2; align-self:center; padding:0; min-width:0; font-size:22px; line-height:1.4; font-weight:500; letter-spacing:-.5px; color:var(--pay-good); font-variant-numeric:tabular-nums; }
.layout-transfer #panel-pay .payment-row-controls { display:grid; grid-column:1/-1; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px; align-items:end; gap:12px; margin-top:13px; padding-top:11px; border-top:1px solid var(--pay-line); }
.layout-transfer #panel-pay .pay-control label { position:static; display:block; width:auto; height:auto; clip:auto; overflow:visible; margin:0 0 4px; font-size:11px; line-height:1.5; color:var(--text2); font-weight:400; }
.layout-transfer #panel-pay .pay-control select {
  display:block; width:100%; height:34px; min-height:34px; padding:5px 38px 5px 10px;
  border:1px solid transparent; border-radius:9px; font-size:12px; line-height:1.5;
  background-color:var(--pay-field); color:var(--text); font-weight:500!important;
}
.layout-transfer #panel-pay .pay-control select:hover:not(:disabled) { border-color:var(--pay-line); }
.layout-transfer #panel-pay .pay-control select:disabled { opacity:1; background-image:none!important; background-color:var(--pay-field); border-color:var(--pay-line); color:var(--text2); padding-right:10px!important; cursor:default; }
.layout-transfer #panel-pay .pay-control select[data-payment-staff] { border-color:var(--pay-line); }
.layout-transfer #panel-pay .payment-status-select.status-done { background-color:var(--pay-good-bg); color:var(--pay-good); }
.layout-transfer #panel-pay .payment-status-select:is(.status-refund,.status-cancelled) { background-color:color-mix(in srgb,var(--red) 12%,var(--pay-panel)); color:var(--red); }
.layout-transfer #panel-pay .payment-status-select.status-wait { color:var(--accent); }
.layout-transfer #panel-pay .payment-history-btn:not(.payment-load-more) { width:36px; min-height:34px; height:34px; padding:0; border:0; border-radius:9px; color:var(--text2); background:transparent; font-size:22px; font-weight:500; }
.layout-transfer #panel-pay .payment-history-btn:is(:hover,[aria-expanded="true"]) { background:var(--surface2); color:var(--text); }
.layout-transfer #panel-pay .payment-history { grid-column:1/-1; margin-top:14px; padding:18px; border:0; border-radius:13px; background:var(--bg); min-width:0; }
.layout-transfer #panel-pay .payment-history-log { display:grid; gap:14px; }
.layout-transfer #panel-pay .payment-history-log>div { border-left:2px solid var(--pay-line); padding-left:14px; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.layout-transfer #panel-pay .payment-history-log>div:first-child { border-color:var(--accent); }
.layout-transfer #panel-pay .payment-history-log small { display:block; font-size:11px; color:var(--text2); margin-bottom:3px; }
.layout-transfer #panel-pay .payment-history-title { margin:16px 0 12px; font-size:12px; font-weight:600; }
.layout-transfer #panel-pay .payment-buyer-form { margin-top:10px; }
.layout-transfer #panel-pay .payment-buyer-edit { border:0; border-radius:5px; background:transparent; color:var(--accent); padding:3px 6px; margin-left:5px; font:inherit; cursor:pointer; }
.layout-transfer #panel-pay .payment-buyer-edit:hover { background:var(--surface2); }
.layout-transfer #panel-pay .payment-buyer-form button { min-height:40px; padding:8px 14px; border-radius:10px; }
:root[data-theme="light"] .layout-transfer #panel-pay :is(.pay-summary-grid,.pay-toolbar,.pay-list-section) { background:none; }
@media(max-width:900px) {
  .layout-transfer #panel-pay .pay-panel-body { padding:20px; }
  .layout-transfer #panel-pay .pay-summary-item { padding:3px 10px; }
  .layout-transfer #panel-pay .pay-summary-value { font-size:22px; }
}
@media(max-width:600px) {
  .layout-transfer #panel-pay .pay-panel-body { padding:16px; }
  .layout-transfer #panel-pay .payout-ledger { padding:20px; }
  .layout-transfer #panel-pay .payout-ledger-head { grid-template-columns:1fr; gap:14px; }
  .layout-transfer #panel-pay .payout-ledger-toggle { grid-column:1; grid-row:3; justify-self:start; }
  .layout-transfer #panel-pay #payout-withdraw-all { justify-self:start; }
  .layout-transfer #panel-pay .pay-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
  .layout-transfer #panel-pay .pay-summary-item { border:0; padding:0!important; grid-template-rows:auto auto!important; }
  .layout-transfer #panel-pay .pay-summary-item:first-child { grid-column:1/-1; grid-template-columns:1fr auto; grid-template-rows:auto!important; border-bottom:1px solid var(--pay-line); padding-bottom:14px!important; }
  .layout-transfer #panel-pay .pay-toolbar { gap:10px; }
  .layout-transfer #panel-pay .pay-toolbar input { flex-basis:100%; }
  .layout-transfer #panel-pay .pay-toolbar select { flex:1; }
  .layout-transfer #panel-pay .payment-row { padding:15px; gap:3px 10px; }
  .layout-transfer #panel-pay .payment-row-title { font-size:15px; }
  .layout-transfer #panel-pay .payment-row-amount { font-size:19px; }
  .layout-transfer #panel-pay .payment-row-controls { grid-template-columns:minmax(0,1fr) 36px; gap:8px; }
  .layout-transfer #panel-pay .pay-control:first-child { grid-column:1/-1; }
  .layout-transfer #panel-pay .pay-control select { height:44px; min-height:44px; font-size:16px; }
  .layout-transfer #panel-pay .payment-history-btn:not(.payment-load-more) { height:44px; min-height:44px; }
  .layout-transfer #panel-pay .payment-history { padding:14px; }
}
@media(pointer:coarse) {
  .layout-transfer #panel-pay .pay-control select,.layout-transfer #panel-pay .payment-history-btn:not(.payment-load-more) { min-height:44px; height:44px; }
}
@media(prefers-reduced-motion:reduce) { .layout-transfer #panel-pay .payment-row { transition:none; } }

/* Fit the controls beside the order using the panel width, not the viewport. */
.layout-transfer #panel-pay .pay-list-section { container-type:inline-size; container-name:pay-list; }
@container pay-list (min-width:620px) {
  .layout-transfer #panel-pay .payment-row {
    grid-template-columns:minmax(0,1fr) 210px 180px;
    grid-template-rows:auto auto; column-gap:20px; align-items:center;
  }
  .layout-transfer #panel-pay .payment-row-time { grid-column:1; grid-row:1; align-self:end; }
  .layout-transfer #panel-pay .payment-row-info { grid-column:1; grid-row:2; align-self:start; }
  .layout-transfer #panel-pay .payment-row-amount { grid-column:3; grid-row:1/3; white-space:normal; overflow-wrap:anywhere; text-align:right; }
  .layout-transfer #panel-pay .payment-row-controls {
    grid-column:2; grid-row:1/3; grid-template-columns:minmax(0,1fr) 30px;
    gap:8px; margin:0; padding:0; border:0;
  }
  .layout-transfer #panel-pay .pay-control { min-width:0; grid-column:1; }
  .layout-transfer #panel-pay .payment-history-btn:not(.payment-load-more) { grid-column:2; grid-row:2; width:30px; }
  .layout-transfer #panel-pay .payment-history { grid-column:1/-1; grid-row:3; }
}
@container pay-list (min-width:940px) {
  .layout-transfer #panel-pay .payment-row { grid-template-columns:minmax(0,1fr) 400px 180px; column-gap:24px; }
  .layout-transfer #panel-pay .payment-row-controls { grid-template-columns:180px minmax(0,1fr) 30px; gap:10px; }
  .layout-transfer #panel-pay .pay-control { grid-column:auto; }
  .layout-transfer #panel-pay .payment-history-btn:not(.payment-load-more) { grid-column:3; grid-row:1; }
}

/* Buyer and source form: give full store names space instead of stretching names. */
.layout-transfer #panel-pay .payment-buyer-form {
 display:grid;grid-template-columns:minmax(180px,420px) 280px max-content;
 gap:8px;align-items:center;justify-content:start;
}
.layout-transfer #panel-pay .payment-buyer-form input,
.layout-transfer #panel-pay .payment-buyer-form select {
 width:100%;min-width:0;box-sizing:border-box;
}
.layout-transfer #panel-pay .payment-buyer-actions { display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0; }
.layout-transfer #panel-pay .payment-buyer-actions button { flex:1 1 auto;width:auto; }
@media(max-width:1100px){
 .layout-transfer #panel-pay .payment-buyer-form {grid-template-columns:minmax(160px,1fr) 260px;}
 .layout-transfer #panel-pay .payment-buyer-actions {grid-column:1/-1;}
 .layout-transfer #panel-pay .payment-buyer-form button {grid-column:1/-1;justify-self:start;}
}
@media(max-width:650px){
 .layout-transfer #panel-pay .payment-buyer-form {grid-template-columns:minmax(0,1fr);}
 .layout-transfer #panel-pay .payment-buyer-form button {width:100%;justify-self:stretch;}
}

/* Administrator actions stay inside details; the payment card remains compact. */
.payment-record-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:12px}
.payment-record-actions .payment-delete-open{padding:8px 12px;min-height:36px;border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--red);font:inherit;font-size:12px;cursor:pointer}
.layout-transfer #panel-pay .pay-list-heading .payment-archive-open{margin-left:auto;padding:6px 10px;min-height:34px;border:1px solid var(--pay-line);border-radius:9px;background:transparent;color:var(--text2);font:inherit;font-size:12px;cursor:pointer}
.payment-action-dialog{position:fixed;inset:0;box-sizing:border-box;margin:auto;width:min(520px,calc(100vw - 24px));max-height:88dvh;overflow:auto;padding:24px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);font:inherit;box-shadow:0 18px 70px #0004}
.payment-action-dialog::backdrop{background:#07121c80;backdrop-filter:blur(3px)}
.payment-action-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.payment-action-dialog h2{margin:0;font-size:20px;line-height:1.4}
.payment-action-dialog button{font:inherit;font-size:13px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);min-height:40px;padding:9px 13px;cursor:pointer}.payment-action-dialog button:disabled{opacity:.6;cursor:default}
.payment-action-dialog .payment-action-close{display:grid;place-items:center;flex:none;width:34px;height:34px;min-height:34px;padding:0}.payment-action-close svg{display:block;width:16px;height:16px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;fill:none}
.payment-action-summary{display:grid;gap:5px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--bg);font-size:13px;line-height:1.5;overflow-wrap:anywhere}.payment-action-summary strong{font-size:21px;font-weight:600}
.payment-action-note,.payment-action-status{font-size:12px;line-height:1.6;color:var(--text2)}.payment-action-status:empty{display:none}.payment-action-status{overflow-wrap:anywhere}
.payment-action-reason{display:grid;gap:8px;margin:16px 0;font-size:12px;color:var(--text2)}.payment-action-reason textarea{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;resize:vertical;min-height:64px}
.payment-action-footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:18px}.payment-action-dialog .payment-action-danger{background:#b43e40;color:white;border-color:#b43e40}.payment-action-dialog .payment-action-primary{background:#2c70b8;color:white;border-color:#2c70b8}
.payment-deleted-dialog{width:min(640px,calc(100vw - 24px))}.payment-deleted-list{display:grid;gap:12px}.payment-deleted-row{padding:14px;border:1px solid var(--border);border-radius:14px}.payment-deleted-row .payment-action-summary{padding:0;border:0;background:transparent}.payment-deleted-row>small{display:block;margin-top:10px;color:var(--text2);font-size:11px}.payment-deleted-row>button{margin-top:10px}
.payment-action-warning{padding:10px 12px;border-left:3px solid #c59a45;border-radius:4px;background:rgba(197,154,69,.1);color:var(--text)}.payment-deleted-more{display:block;width:100%;margin-top:14px}.payment-deleted-more[hidden]{display:none}
@media(max-width:480px){.payment-action-dialog{padding:18px}.payment-action-footer>button{flex:1}.payment-deleted-row{padding:12px}}