/* SeaPay® online banking — round 0180: To Pay, Cash onboard, QR pay, one login (8a–8g). The One SeaPay tokens of bank.css only:
   cards radius 20 with a hairline, IvyMode for titles and money (cents at 0.52×), capsule buttons, rose at night / wine by day. */

/* ── a QR code: dark on a white tile in Night and Day (what a camera reads best) ─────────────────────────────────── */
.qr { background: #fff; border-radius: 16px; padding: 10px; width: 100%; max-width: 248px; aspect-ratio: 1; box-shadow: 0 0 0 1px var(--sp-line), 0 10px 30px rgba(0, 0, 0, 0.18); }
.qr svg { display: block; width: 100%; height: 100%; }

/* ── one login: Continue as …, Scan with your phone ──────────────────────────────────────────────────────────────── */
.net-cont { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--sp-line); background: var(--sp-field); margin-bottom: 14px; }
.net-cont .serif { font-size: 21px; color: var(--sp-ink); line-height: 1.15; }
.net-qr { display: flex; justify-content: center; padding: 8px 0 4px; min-height: 120px; align-items: center; }
.net-qr .qr { max-width: 232px; transition: opacity 0.3s ease, filter 0.3s ease; }
.net-qr.used .qr { opacity: 0.35; filter: blur(1px); }
.net-qr-line { margin: 0; text-align: center; font-size: 13px; color: var(--sp-dim); min-height: 1.4em; }
.net-prov .btn svg { flex: none; }

/* ── To Pay: the dashboard card ──────────────────────────────────────────────────────────────────────────────────── */
.tp-card { margin-bottom: 22px; border-color: var(--sp-rose-line); background: linear-gradient(180deg, var(--sp-wine-soft), transparent 75%), var(--sp-card); }
.tp-card .card-h { align-items: center; }
.tp-card .card-h .lbl { flex: 0 0 auto; }
.tp-co { flex: 1 1 auto; min-width: 0; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-sum { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.tp-fig { display: flex; align-items: baseline; gap: 8px; }
.tp-fig .serif { font-size: 40px; line-height: 1; color: var(--sp-ink); }
.tp-fig-l { font-size: 13px; color: var(--sp-dim); }
.tp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-mini { display: flex; flex-direction: column; margin-top: 12px; border-top: 1px solid var(--sp-line2); }
.tp-mini-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--sp-line2); text-decoration: none; color: var(--sp-text); border-radius: 10px; }
.tp-mini-row:last-child { border-bottom: 0; }
.tp-mini-row:hover { background: var(--sp-hover); }
.tp-ic { width: 30px; height: 30px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: var(--sp-rose-soft); color: var(--sp-rose); }
.tp-mini-t { display: flex; flex-direction: column; min-width: 0; }
.tp-mini-t b { font-size: 13.5px; font-weight: 600; color: var(--sp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-mini-t .muted { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-amt { font-size: 14px; font-weight: 500; color: var(--sp-ink); white-space: nowrap; }

/* ── To Pay: the page ────────────────────────────────────────────────────────────────────────────────────────────── */
.tp-intake { margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.tp-drop { padding: 22px 18px; }
.tp-intake-status:empty { display: none; }
.tp-mail { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sp-dim); }
.tp-mail > svg { color: var(--sp-rose); flex: none; }
.tp-mail b.mono { font-family: var(--mono); font-weight: 500; color: var(--sp-ink); overflow-wrap: anywhere; }
.tp-mail .ibtn.copy { margin-left: 0; vertical-align: 0; }
.tp-unknown { margin-bottom: 16px; }
.tp-lanes a.pill { text-decoration: none; }
.tp-lanes a.pill .muted { margin-left: 2px; }
a.row.tp-row { text-decoration: none; color: inherit; }
.tp-row .t2 .chip { height: 18px; padding: 0 8px; font-size: 10px; }
.tp-row .col .vp { white-space: nowrap; }
.tp-sub { display: inline-flex; gap: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tp-sub > span + span::before { content: ' · '; white-space: pre; }

/* ── To Pay: one bill ────────────────────────────────────────────────────────────────────────────────────────────── */
.tp-bill { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tp-doc { position: sticky; top: 0; }
.tp-doc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-doc-tabs .pill { height: 28px; font-size: 12px; }
.tp-doc-view { border-radius: 14px; overflow: hidden; background: var(--sp-field); border: 1px solid var(--sp-line2); min-height: 160px; display: flex; align-items: center; justify-content: center; }
.tp-doc-view img { display: block; width: 100%; height: auto; }
.tp-doc-view object { display: block; width: 100%; height: min(78vh, 900px); border: 0; }
.tp-doc-view > p { padding: 24px; margin: 0; text-align: center; }
.tp-doc-foot { justify-content: space-between; align-items: center; margin-top: 12px; }
.tp-doc-foot .small { font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.tp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tp-side > .card + .card { margin-top: 0; }
.tp-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; border-radius: 20px; border: 1px solid var(--sp-line); background: var(--sp-panel); }
.tp-acts-none { border: 1px solid var(--sp-line2); }
.tp-more { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; padding-top: 8px; border-top: 1px solid var(--sp-line2); }
.tp-big { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--sp-ink); white-space: nowrap; letter-spacing: -0.01em; margin: 6px 0 2px; }
.tp-big small, .qp-big small { font-size: 0.52em; color: var(--sp-dim); }
.tp-due { font-size: 12.5px; color: var(--sp-muted); margin-bottom: 10px; min-height: 1em; }
.tp-pay .card-h { align-items: center; }
.tp-verdict { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; }
.tp-verdict.ok { background: var(--sp-ok-soft); color: var(--sp-ok); }
.tp-verdict.warn { background: var(--sp-warn-soft); color: var(--sp-warn); }
.tp-verdict.bad { background: var(--sp-bad-soft); color: var(--sp-bad); }
.tp-summary { margin: 12px 0 4px; font-family: var(--font-display); font-size: 18px; line-height: 1.35; color: var(--sp-ink); }
.tp-checks { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.tp-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--sp-line2); font-size: 12.5px; color: var(--sp-dim); align-items: start; }
.tp-checks li:first-child { border-top: 0; }
.tp-checks li b { color: var(--sp-ink); font-weight: 600; }
.tp-ck { width: 22px; height: 22px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; }
.tp-checks li.ok .tp-ck { background: var(--sp-ok-soft); color: var(--sp-ok); }
.tp-checks li.warn .tp-ck { background: var(--sp-warn-soft); color: var(--sp-warn); }
.tp-checks li.bad .tp-ck { background: var(--sp-bad-soft); color: var(--sp-bad); }
.tp-at { margin: 10px 0 0; font-size: 11.5px; }
.tp-hist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: var(--sp-dim); }
.tp-hist .mono { color: var(--sp-label); font-family: var(--mono); font-size: 11.5px; margin-right: 4px; }
.tp-people { max-height: 46vh; overflow: auto; }
.tp-paybill b { color: var(--sp-ink); }
.note.tp-paybill > svg { color: var(--sp-rose); }

/* ── Cash onboard on a bank line ─────────────────────────────────────────────────────────────────────────────────── */
.card.cash-line { border-color: var(--sp-rose-line); }
.cash-line .btn { align-self: flex-start; }

/* ── QR pay ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.qp-codes { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qp-code { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.qp-cap { margin: 0; font-size: 12px; color: var(--sp-muted); text-align: center; max-width: 320px; }
.qp-amt { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.qp-big { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1; color: var(--sp-ink); white-space: nowrap; }
.qp-to { font-size: 13px; color: var(--sp-dim); }
.qp-to b { color: var(--sp-ink); font-weight: 600; }
.qp-state { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 14px; border-radius: 999px; background: var(--sp-chip); font-size: 13px; color: var(--sp-ink); text-align: center; }
.qp-dot { width: 8px; height: 8px; border-radius: 4px; flex: none; background: var(--sp-label); }
.qp-dot.rose { background: var(--sp-rose); box-shadow: var(--sp-glow); animation: pulse 1.6s ease-in-out infinite; }
.qp-dot.line { background: var(--sp-warn); animation: pulse 1.6s ease-in-out infinite; }
.qp-dot.ok { background: var(--sp-ok); }
.qp-dot.bad { background: var(--sp-bad); }
.qp-done { display: flex; justify-content: center; }
.qp-done .result-ic { width: 60px; height: 60px; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--sp-ok-soft); color: var(--sp-ok); }
.qp-company { margin-top: 16px; }
.qp-company-in { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.qp-company-t .lead { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .qp-dot.rose, .qp-dot.line { animation: none; } }

/* ── phones ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tp-bill { grid-template-columns: 1fr; }
  .tp-doc { position: static; }
  .tp-doc-view object { height: 70vh; }
  .tp-big { font-size: 38px; }
  .tp-fig .serif { font-size: 34px; }
  .tp-lanes { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .tp-lanes::-webkit-scrollbar { display: none; }
  .tp-lanes a.pill { flex: none; }
  .qp-company-in { grid-template-columns: 1fr; justify-items: center; }
  .qp-company-t { width: 100%; }
  /* the actions: two to a row, on purpose */
  .tp-acts { display: grid; grid-template-columns: 1fr 1fr; }
  .tp-acts .tp-more { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .tp-row .tp-no, .tp-row .tp-by { display: none; }
}