/* Styles for screens that are not part of the upstream public/member CSS:
   the local mock payment page, payment success icon, order tables and the
   invitation reward list. Everything else uses the original stylesheets. */
.checkout-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-sm)}
.checkout-panel h2{font-size:18px;margin:0 0 10px}
.pay-qr{display:flex;justify-content:center;padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px;margin:16px auto;max-width:300px}
.pay-order-no{font-family:var(--sans);letter-spacing:.03em;overflow-wrap:anywhere}
.pay-note{color:var(--muted);font-size:13px;text-align:center}
.success-icon{width:64px;height:64px;border-radius:50%;background:#e5f6ee;color:#1d6a43;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.orders-table{width:100%;border-collapse:collapse;font-size:13.5px}
.orders-table th,.orders-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.orders-table th{color:var(--muted);font-weight:500}
.invitation-records-list{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;margin:0}
.invitation-records-list li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--body)}
.invitation-records-list li strong{color:var(--accent);font-weight:600}
@media(max-width:850px){
  .orders-table{display:block;overflow-x:auto}
}