:root{--tblr-font-sans-serif:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{background:#f6f8fb}.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#206bc4;color:#fff;margin-right:9px;font-weight:800}.portal-nav{background:#fff;border-bottom:1px solid #e6e9ef;overflow-x:auto}.portal-nav .nav-link{white-space:nowrap;color:#526078;padding:16px 13px;border-bottom:2px solid transparent}.portal-nav .nav-link.active{color:#206bc4;border-bottom-color:#206bc4;font-weight:600}.portal-nav .nav-link:hover{background:#f5f8fc}.login-shell{max-width:430px;margin:5vh auto}.login-shell h1{font-size:2rem;line-height:1.2;letter-spacing:-.04em}.steps-list>a{display:flex;align-items:center;gap:18px;padding:20px 0;border-top:1px solid #edf0f5;color:inherit;text-decoration:none}.steps-list>a>span{font-size:12px;font-weight:700;color:#206bc4;background:#edf4fe;padding:9px;border-radius:50%}.steps-list p{color:#6c7a91;margin:4px 0 0;font-size:13px}.steps-list b{margin-left:auto}.secret-value{display:block;padding:12px;background:#fff;overflow-wrap:anywhere;color:#153e28}.brand-preview{display:block;max-width:160px;max-height:80px;object-fit:contain}.font-monospace{overflow-wrap:anywhere}.table td{vertical-align:middle}.page-title{letter-spacing:-.035em;font-size:1.8rem}.footer{background:transparent}.card{box-shadow:0 2px 5px #18243303}@media(max-width:600px){.container-xl{padding-left:18px;padding-right:18px}.portal-nav .nav-link{padding:13px 10px}.login-shell{margin:2vh auto}}
.alert{display:block}
/* Payment detail: a compact overview beside the full event journey. */
.payment-detail { --journey-blue:#276ada; --journey-green:#168466; --journey-line:#dbe4ef; }
.payment-reference { max-width:850px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:22px; letter-spacing:-.025em; }
.payment-workspace { display:grid; grid-template-columns:minmax(275px,340px) minmax(0,1fr); gap:24px; align-items:start; }
.payment-overview { min-width:0; display:grid; gap:16px; }
.payment-overview .card { border-radius:16px; margin:0!important; }
.payment-summary .card-body { padding:24px; }
.payment-summary .subheader { font-size:10px; letter-spacing:.09em; }
.payment-total { font-size:30px; letter-spacing:-1px; font-weight:650; margin:8px 0 10px; overflow-wrap:anywhere; }
.payment-metadata { margin:20px 0; border-block:1px solid #e7ecf3; }
.payment-metadata summary { padding:13px 0; cursor:pointer; font-size:12px; font-weight:600; }
.payment-metadata dl { margin:0; padding:10px 0; font-size:12px; }
.payment-metadata dt,.payment-metadata dd { width:100%; }
.payment-metadata dd { margin:3px 0 12px; }
.deposit-destination { padding:15px; border-radius:10px; border:1px solid #e2e9f3; background:#f7f9fd; margin-bottom:20px; font-size:12px; }
.deposit-destination .font-monospace { font-size:12px; line-height:1.7; color:#334a6c; }
.deposit-destination .small { color:#6b7890; }
.payment-summary .btn { width:100%; }
.payment-live-status .card { background:linear-gradient(135deg,#f0f6ff,#fbfcff); border-color:#d9e6f8; }
.payment-live-status .card-body { padding:22px; }
.payment-live-status .card-title { font-size:19px; letter-spacing:-.3px; }
.payment-live-status p { font-size:12px; line-height:1.7; }
.payment-finality-note { border-top:1px solid #dbe6f6; padding-top:14px; }
.journey-card { border-radius:18px; overflow:hidden; box-shadow:0 8px 32px -18px #24436725; }
.journey-card .card-header { padding:24px 28px; background:linear-gradient(110deg,#fff,#f6f9fd); border-bottom:1px solid #e8edf5; }
.journey-card .card-title { font-size:20px; letter-spacing:-.4px; font-weight:650; }
.journey-card .card-header p { font-size:12px; line-height:1.6; }
.journey { list-style:none; padding:28px; margin:0; }
.journey-step { position:relative; padding:0 0 28px 54px; min-width:0; }
.journey-step::before { content:''; position:absolute; top:36px; bottom:0; left:17px; width:2px; background:var(--journey-line,#dbe4ef); }
.journey-step:last-child { padding-bottom:0; }
.journey-step:last-child::before { display:none; }
.journey-node { position:absolute; top:0; left:0; width:36px; height:36px; display:grid; place-items:center; border:1px solid #d9e1ed; background:#f6f8fb; border-radius:50%; color:#8a97ac; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; z-index:1; }
.journey-node svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.is-done>.journey-node { color:var(--journey-green,#168466); background:#e9f6ef; border-color:#cce7d9; }
.is-done::before { background:linear-gradient(#acd7c6,#dbe4ef); }
.is-active>.journey-node { background:var(--journey-blue,#276ada); color:white; border-color:var(--journey-blue,#276ada); box-shadow:0 0 0 5px #edf3fd; }
.is-active>.journey-content>.journey-events { border-color:#ccddf7; background:#f7faff; }
.journey-heading { min-height:38px; margin-bottom:10px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.journey-heading h3 { margin:0; font-size:14px; font-weight:700; letter-spacing:-.15px; }
.journey-heading>span { font-size:11px; color:#748197; }
.journey-events { border:1px solid #e8edf4; border-radius:11px; background:#fff; overflow:hidden; }
.payment-stage { border-bottom:1px solid #e8edf4; }
.payment-stage:last-child { border-bottom:0; }
.payment-stage summary { display:grid; grid-template-columns:minmax(0,1fr) auto 14px; align-items:center; gap:12px; padding:13px 15px; cursor:pointer; list-style:none; transition:background .15s; }
.payment-stage summary::-webkit-details-marker { display:none; }
.payment-stage summary:hover { background:#edf3fa80; }
.payment-stage summary:focus-visible,.payment-metadata summary:focus-visible { outline:2px solid #276ada; outline-offset:-3px; border-radius:6px; }
.stage-heading { display:flex; flex-direction:column; gap:3px; min-width:0; }
.stage-heading strong { font-size:12px; font-weight:550; line-height:1.5; }
.stage-amount { font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.2px; }
.payment-stage .badge { font-size:10px; font-weight:550; letter-spacing:0; white-space:normal; text-align:right; line-height:1.4; max-width:150px; border-radius:5px; }
.entry-waiting .badge,.entry-not_applicable .badge { background:#eef1f5!important; color:#738095!important; }
.stage-expand { color:#8998ae; font-size:18px; text-align:center; transition:transform .15s; }
.payment-stage[open] .stage-expand { transform:rotate(45deg); }
.stage-details { padding:3px 15px 16px; }
.stage-details dl { display:grid; grid-template-columns:100px minmax(0,1fr); gap:8px 14px; font-size:11px; line-height:1.7; margin:0 0 10px; }
.stage-details dt { font-weight:500; color:#7b879a; }
.stage-details dd { margin:0; overflow-wrap:anywhere; }
.stage-details p { font-size:11px!important; line-height:1.7; }
@media(min-width:1200px) { .payment-overview { position:sticky; top:20px; } }
@media(max-width:991px) {
    .payment-workspace { grid-template-columns:1fr; gap:20px; }
    .payment-overview { grid-template-columns:1fr 1fr; align-items:start; }
    .payment-reference { max-width:calc(100vw - 150px); }
}
@media(max-width:575px) {
    .payment-overview { grid-template-columns:1fr; }
    .payment-reference { font-size:18px; }
    .journey-card .card-header { padding:20px; }
    .journey { padding:22px 14px; }
    .journey-step { padding-left:42px; padding-bottom:24px; }
    .journey-node { width:30px; height:30px; font-size:10px; }
    .journey-step::before { left:14px; top:30px; }
    .journey-heading { min-height:30px; }
    .journey-heading h3 { font-size:13px; }
    .journey-heading>span { font-size:10px; }
    .payment-stage summary { grid-template-columns:minmax(0,1fr) 14px; gap:6px; padding:12px; }
    .payment-stage .badge { grid-column:1; grid-row:2; justify-self:start; text-align:left; max-width:none; }
    .stage-expand { grid-column:2; grid-row:1 / span 2; }
    .stage-details { padding:3px 12px 14px; }
    .stage-details dl { grid-template-columns:1fr; gap:2px; }
    .stage-details dd { margin-bottom:8px; }
}
@media(prefers-reduced-motion:reduce) { .payment-stage summary,.stage-expand { transition:none; } }