/* CASH / CK layout approved by the owner on 2026-09-22. Scoped to this dialog.
   Palette copied from the approved CASH/CK review. Older browsers keep the
   approved light palette; light-dark() browsers also support its dark branch. */
dialog.payment-workflow{box-sizing:border-box;width:min(390px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:18px 20px 12px;border:1px solid var(--payment-border);border-radius:22px;background:var(--payment-surface);color:var(--payment-ink);box-shadow:0 9px 22px var(--payment-shadow);font:400 16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
dialog.payment-workflow{color-scheme:light;--payment-surface:#ffffff;--payment-ink:#163e2e;--payment-soft:#f0f4eb;--payment-border:#dbe5d6;--payment-muted:#5d7060;--payment-field:#ffffff;--payment-find:#173f30;--payment-find-ink:#ffffff;--payment-shadow:#193d3012}
dialog.payment-workflow::backdrop{background:#193e3066}
.payment-workflow *{box-sizing:border-box}
.payment-workflow .payment-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:36px}
.payment-workflow .payment-heading h2{margin:0;font-size:14px;line-height:20px;font-weight:600;letter-spacing:0;color:var(--payment-ink);overflow-wrap:anywhere}
.payment-workflow .payment-order-code{display:inline-block;white-space:nowrap;font-size:12px;font-weight:500}
.payment-workflow button.payment-close{flex:0 0 44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:12px;background:transparent;color:var(--payment-muted);font:400 25px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.payment-workflow .payment-total{margin:8px 0 18px;color:var(--payment-ink);font-size:40px;line-height:44px;font-weight:750;letter-spacing:-.035em}
.payment-workflow .payment-state{margin:0 0 14px;font-size:14px;font-weight:650}
.payment-workflow .payment-qr{display:flex;align-items:center;flex-direction:column;gap:8px;margin:0 0 18px;text-align:center}
.payment-workflow .payment-qr-code{width:195px;height:195px;max-width:100%;background:#fff;color:#000}
.payment-workflow .payment-qr img,.payment-workflow .payment-qr canvas,.payment-workflow .payment-qr svg{width:195px;height:195px;max-width:100%}
.payment-workflow .payment-bank-account{margin:0;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.01em;overflow-wrap:anywhere;text-align:center}
.payment-workflow .payment-member{min-width:0;margin:0;padding:12px;border:0;border-radius:14px;background:var(--payment-soft);color:var(--payment-ink)}
.payment-workflow .payment-member-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 8px}
.payment-workflow .payment-member-label .payment-member-title{display:block;margin:0;font-size:12px;line-height:16px;letter-spacing:.04em;font-weight:750;color:var(--payment-ink)}
.payment-workflow .payment-member-label>span:last-child{font-size:12px;line-height:16px;color:var(--payment-muted)}
.payment-workflow .payment-member-search{display:flex;align-items:stretch;gap:8px}
.payment-workflow .payment-member-search input{box-shadow:none;-webkit-text-fill-color:currentColor;flex:1 1 0;min-width:0;width:100%;min-height:44px;margin:0;padding:10px 11px;border:1px solid var(--payment-border);border-radius:9px;background:var(--payment-field);color:var(--payment-ink);font:400 16px/22px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.payment-workflow .payment-member-search input::placeholder{color:var(--payment-muted);opacity:1}
.payment-workflow button.payment-member-find{flex:0 0 56px;min-height:44px;margin:0;padding:10px;border:0;border-radius:9px;background:var(--payment-find);color:var(--payment-find-ink);font:650 14px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.payment-workflow .payment-member-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.payment-workflow .payment-member-actions button{min-height:44px;margin:0;padding:10px 12px;border:0;border-radius:9px;background:var(--payment-field);color:var(--payment-ink);font:650 14px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.payment-workflow .payment-member-actions button.primary{background:var(--payment-find);color:var(--payment-find-ink)}
.payment-workflow .payment-member-name{margin:0 0 6px;font-size:14px;line-height:20px;font-weight:750;overflow-wrap:anywhere}
.payment-workflow .payment-member-help{margin:8px 0 0;font-size:12px;line-height:18px;color:var(--payment-muted)}
.payment-workflow .payment-reminder{margin:14px 0 10px;font-size:12px;line-height:18px;color:var(--payment-muted)}
.payment-workflow button.payment-confirm{display:block;width:100%;min-height:52px;margin:0;padding:13px 10px;border:0;border-radius:12px;background:#ffb52e;color:#000;font:750 15px/22px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;text-align:center}
.payment-workflow button.payment-switch{display:block;width:100%;min-height:44px;margin:8px 0 0;padding:10px 6px;border:0;border-radius:10px;background:transparent;color:var(--payment-muted);font:500 13px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:center}
.payment-workflow .payment-history{margin-top:12px;font-size:12px;line-height:18px;color:var(--payment-muted)}
.payment-workflow [data-message]{padding:0;background:transparent;border-radius:0;margin:8px 0 0;font-size:12px;line-height:18px;color:var(--payment-muted)}
.payment-workflow [data-message]:empty{display:none}
.payment-workflow button:disabled,.payment-workflow input:disabled{opacity:.55;cursor:not-allowed}
.payment-workflow .payment-member input:focus-visible,.payment-workflow button:focus-visible{outline:3px solid var(--payment-find);outline-offset:2px}
/* Follow the device theme with the review's original light-dark() pairs. */
@supports(color:light-dark(#ffffff,#000000)){
 dialog.payment-workflow{color-scheme:light dark;--payment-surface:light-dark(#ffffff,#142c23);--payment-ink:light-dark(#163e2e,#e2eee5);--payment-soft:light-dark(#f0f4eb,#233e30);--payment-border:light-dark(#dbe5d6,#405b49);--payment-muted:light-dark(#5d7060,#b1c2b2);--payment-field:light-dark(#ffffff,#10241c);--payment-find:light-dark(#173f30,#dcebdc);--payment-find-ink:light-dark(#ffffff,#163e2e);--payment-shadow:light-dark(#193d3012,#00000024)}
}
@media(max-width:380px){dialog.payment-workflow{padding-left:16px;padding-right:16px}.payment-workflow .payment-heading h2{font-size:13px}.payment-workflow .payment-total{font-size:36px}.payment-workflow button.payment-confirm{font-size:14px}}