.chrome .chrome-right{margin-left:auto}
.topup-dialog{width:min(940px,calc(100vw - 32px));max-width:940px;max-height:90dvh;padding:28px;border:1px solid #f0d5df;border-radius:26px;background:#fff9f8;color:#3c2931;box-shadow:0 24px 100px #231c3e55;overflow:auto}
.topup-dialog::backdrop{background:#1f1c3455;backdrop-filter:blur(7px)}
.topup-dialog *{box-sizing:border-box}.topup-dialog [hidden]{display:none!important}
.topup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.topup-head h2{margin:4px 0 8px;font-size:30px}.topup-eyebrow{font-size:10px;letter-spacing:.18em;color:#a63d67;font-weight:800}.topup-close{border:0;border-radius:50%;width:36px;height:36px;background:#f4e6ec;font-size:25px;cursor:pointer}
.topup-tabs,.topup-presets,.topup-actions{display:flex;gap:8px;flex-wrap:wrap}.topup-tabs{margin:18px 0;border-bottom:1px solid #eedee4;padding-bottom:14px}.topup-dialog button,.topup-dialog input,.topup-dialog select{font:inherit}.topup-dialog button{cursor:pointer}.topup-dialog button:disabled{cursor:wait;opacity:.55}.topup-pill,.topup-secondary{padding:10px 15px;border:1px solid #e8ccd8;border-radius:13px;background:#fff;color:#72354f;font-weight:650}.topup-pill.active{background:#9f3863;color:#fff;border-color:#9f3863}
.topup-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}.topup-card{border:1px solid #efdbe3;border-radius:20px;padding:22px;background:#fffdfc}.topup-card h3{font-size:18px;margin:0 0 16px}.topup-dialog label{display:block;margin:16px 0 6px;font-size:13px;font-weight:700}.topup-dialog input,.topup-dialog select{width:100%;padding:12px;border:1px solid #ddcbd2;border-radius:11px;background:#fff;color:#3c2931;min-width:0}.topup-dialog input:focus,.topup-dialog select:focus{outline:2px solid #b35b80;outline-offset:2px}.topup-dialog small,.topup-muted{color:#826d77;font-size:12px;line-height:1.65}.topup-summary{background:linear-gradient(140deg,#fff1f4,#f5eefb);border-color:#e8d5e4}.topup-total{font-size:40px;font-weight:850;color:#96365e;margin:20px 0 4px;letter-spacing:-1.5px}.topup-total small{font-size:17px;letter-spacing:0}.topup-line{display:flex;justify-content:space-between;gap:16px;margin:14px 0;font-size:13px}.topup-primary{background:#99375e;color:#fff;border:0;border-radius:13px;padding:13px 20px;font-weight:750}.topup-submit{width:100%;margin-top:20px}.topup-message{font-size:13px;line-height:1.6;color:#803650;padding:10px 0;white-space:pre-line}.topup-order{margin-top:20px}.topup-order header{display:flex;justify-content:space-between;gap:12px;align-items:center}.topup-state{display:inline-block;border-radius:9px;padding:6px 9px;background:#f5e8ef;font-size:12px;font-weight:700}.topup-state.done{background:#e5f5e9;color:#286039}.topup-state.warn{background:#fff0da;color:#875b13}.topup-qr{width:230px;height:230px;max-width:100%;display:block;margin:12px auto}.topup-payment{display:grid;grid-template-columns:250px 1fr;gap:20px;align-items:center}.topup-copy{word-break:break-all}.topup-ledger{display:grid;gap:12px}.topup-ledger .topup-card{padding:16px}.topup-ledger h3{margin:0 0 6px;font-size:15px}.topup-id{font:11px monospace;overflow-wrap:anywhere;color:#8b7380}.topup-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.topup-filters label{margin-top:0}.topup-metrics{display:flex;gap:20px;flex-wrap:wrap;background:#f6eaf0;padding:16px;border-radius:15px;margin-bottom:14px}.topup-check{display:flex!important;align-items:center;gap:8px}.topup-check input{width:18px;height:18px}.topup-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.topup-settings{margin-top:20px}.topup-settings summary{cursor:pointer;font-weight:700}.topup-event{border-bottom:1px solid #eee0e7;padding:8px 0;font-size:12px;overflow-wrap:anywhere}.topup-entry{color:#96365e;font-weight:750}
@media(max-width:650px){.topup-dialog{padding:18px;width:calc(100vw - 16px);max-height:94dvh;border-radius:20px}.topup-grid,.topup-payment{grid-template-columns:1fr}.topup-card{padding:17px}.topup-head h2{font-size:25px}.topup-total{font-size:34px}.topup-tabs{gap:6px}.topup-pill{padding:9px 11px;font-size:12px}.topup-filters,.topup-settings-grid{grid-template-columns:1fr 1fr}.topup-line{font-size:12px}.topup-payment{gap:0}.topup-order header{align-items:flex-start;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.topup-dialog,.topup-dialog *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.topup-account-back{display:inline-flex;align-items:center;min-height:36px;margin:0 0 10px;padding:0 4px;border:0;background:transparent;color:#963659;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}.topup-account-back:focus-visible{outline:2px solid #963659;outline-offset:3px;border-radius:6px}
.topup-dialog{font-family:inherit}
.topup-dialog button{transition:background .16s,box-shadow .16s,scale .12s}
.topup-dialog button:focus-visible{outline:2px solid #963659;outline-offset:3px}
.topup-dialog :is(.topup-secondary,.topup-pill):hover{background:#f9edf2;border-color:#bf7b96}
.topup-dialog .topup-pill.active:hover,.topup-dialog .topup-primary:hover{background:#842c50;color:#fff}
.topup-dialog button:not(:disabled):active{scale:.96}
.topup-dialog button[aria-busy=true]{cursor:progress}
.topup-history-row{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center}
.topup-row-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;color:#826d77;font-size:11px;line-height:1.6}
.topup-row-meta time{font-variant-numeric:tabular-nums}
.topup-ledger .topup-history-row h3{margin:0;font-size:17px;letter-spacing:-.3px}
.topup-history-row>.topup-actions:last-child{grid-column:1/-1;margin-top:2px}
.topup-state.done::before{content:'✓';margin-right:6px}
.topup-order header h3{margin:0;letter-spacing:-.3px}
.topup-order header{margin-bottom:14px}
.topup-message:empty{display:none}
/* One accent for amounts/actions, semantic colour only for important statuses. */
.topup-dialog{font-size:14px;line-height:1.6;color:#263e42;background:#fffbf9}
.topup-dialog :is(h2,h3){color:#223c40;font-weight:800}.topup-dialog .topup-card h3{font-size:19px}
.topup-dialog :is(small,.topup-muted){color:#59666c}.topup-dialog .topup-muted{font-size:13px;line-height:1.7}
.topup-dialog label,.topup-dialog .topup-line>span{color:#4f5e64;font-weight:600}
.topup-dialog .topup-line>strong{color:#223c40;font-weight:800;font-size:14px;overflow-wrap:anywhere}
.topup-dialog .topup-summary{background:#fff5f7;border-color:#e3c6d1}.topup-dialog .topup-total{color:#8a2d50}
.topup-dialog .topup-total small{font-size:18px;font-weight:750;color:#634b56}
.topup-dialog .topup-copy>strong{font-size:15px;font-variant-numeric:tabular-nums}
.topup-dialog .topup-primary{font-weight:750}.topup-dialog .topup-state{padding:7px 11px;font-size:13px;line-height:1.5}
.topup-state.error{color:#8b2934;background:#fbecee;border:1px solid #efcbd0}.topup-state.error::before{content:'!';font-weight:900;margin-right:7px}
.topup-state.pending{color:#405963;background:#edf2f4}.topup-state.warn{color:#755015;background:#fff1d8;border:1px solid #eed6aa}
.topup-dialog #topup-message.ui-notice{font-size:14px!important;font-weight:650;margin:0 0 16px}
.topup-dialog .topup-guidance{padding:12px 14px;border:1px solid #ead7b4;border-left:3px solid #ae7e31;border-radius:10px;background:#fff8e9;color:#654c24;font-size:13px;line-height:1.7}
.topup-guidance strong{display:block;margin-bottom:3px;color:#634614}
@media(max-width:650px){.topup-history-row{grid-template-columns:1fr}.topup-row-meta{flex-wrap:wrap}.topup-ledger .topup-history-row h3{font-size:16px}.topup-history-row>.topup-actions{grid-column:1}.topup-dialog .topup-tabs{display:grid;grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.topup-dialog button{transition:none!important}.topup-dialog button:not(:disabled):active{scale:1;outline:2px solid #963659;outline-offset:1px}}

.topup-progress{list-style:none;padding:16px;margin:16px 0 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;background:#f5f5f2;border-radius:14px;border:1px solid #e4e7e3}
.topup-progress li{display:flex;gap:9px;align-items:flex-start;color:#687477;font-size:12px;font-weight:700;line-height:1.5}
.topup-progress li>span{flex:none;display:grid;place-items:center;width:25px;height:25px;border:1px solid #cbd2cf;border-radius:50%;background:#fff;font-variant-numeric:tabular-nums}
.topup-progress small{display:block;font-size:11px!important;font-weight:400;margin-top:3px}
.topup-progress .complete>span{background:#246b55;border-color:#246b55;color:#fff}.topup-progress .current>span{border:2px solid #a13e64;color:#913354;box-shadow:0 0 0 3px #a13e6410}
.topup-progress :is(.current,.complete){color:#28453e}.topup-payment{padding:18px;border:1px solid #e3e7e2;border-radius:17px;background:#fff;margin-bottom:18px}.topup-qr{background:#fff;border:1px solid #eee;padding:10px;border-radius:12px}
.topup-cancel{padding:10px 15px;border:1px solid #d8bec6;border-radius:13px;color:#8b3447;background:#fff;font-weight:650}.topup-cancel:hover{background:#faedf0;border-color:#aa586b}
@media(max-width:650px){.topup-progress{grid-template-columns:1fr;gap:14px}.topup-progress li{font-size:13px}.topup-progress small{font-size:12px!important}.topup-payment{padding:14px}.topup-payment .topup-line{flex-wrap:wrap;gap:4px}.topup-tabs{position:sticky;top:-18px;background:#fffbf9;z-index:2;padding-top:10px}}