.online-topup-scope{margin:0 0 16px;font-size:12px;color:#7d879c;line-height:1.8}
.online-topup-admin-sync{display:grid!important;grid-template-columns:minmax(0,1fr) auto}.online-topup-sync-policy{grid-column:1/-1;font-size:12px;color:#7a859c;line-height:1.8;margin:0}.online-topup-sync-schedule{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px 22px;color:#8993a7;font-size:11px;line-height:1.8}.online-topup-sync-counts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.online-topup-sync-counts>div{padding:12px 15px;border:1px solid #e7e9f5;border-radius:12px;background:#ffffffb8;display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}.online-topup-sync-counts span{font-size:11px;color:#8b94a7}.online-topup-sync-counts strong{font-size:17px;font-weight:600;color:#6b5a9c;overflow-wrap:anywhere}
.online-topup-sync{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #e7e9f6;border-radius:18px;padding:16px 20px;background:#f9faff;margin-bottom:16px}.online-topup-sync:empty{display:none}.online-topup-sync-main{display:flex;align-items:center;gap:12px;min-width:0}.online-topup-sync p{margin:0;color:#6e7891;font-size:12px;line-height:1.7}.online-topup-sync>small{white-space:nowrap;font-size:11px;color:#8f98ac}
.online-topup-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.online-topup-summary-card{min-width:0;border:1px solid #e6eaf5;background:#fbfcff;border-radius:20px;padding:19px 22px;display:flex;flex-direction:column;gap:10px}.online-topup-summary-card>span{font-size:12px;color:#7a859d}.online-topup-summary-card>strong{font-size:25px;font-weight:650;color:#51447c;overflow-wrap:anywhere;line-height:1.35}.online-topup-summary-card>small{font-size:11px;color:#9aa2b3;line-height:1.6}
.online-topup-filter{display:grid;grid-template-columns:minmax(180px,1.6fr) minmax(120px,1fr) repeat(2,minmax(170px,1.2fr));gap:14px;align-items:end;padding:20px 22px;border-bottom:1px solid #e7eaf4}.online-topup-filter .field{min-width:0}.online-topup-filter .input{min-width:0}.online-topup-filter .field[hidden]{display:none}.online-topup-actions{display:flex;gap:10px;grid-column:1/-1;justify-content:flex-end}.online-topup-actions .btn{min-height:40px;min-width:74px}
.online-topup-customer,.online-topup-referrer{display:flex;flex-direction:column;gap:6px;max-width:220px;white-space:normal;overflow-wrap:anywhere}.online-topup-customer strong,.online-topup-referrer strong{font-size:12px;color:#455370;font-weight:600}.online-topup-customer span,.online-topup-referrer span{font-size:11px;color:#8e99ad}.online-topup-trade{display:block;max-width:270px;white-space:normal;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:#6f7b93;line-height:1.7}.online-topup-amount{font-variant-numeric:tabular-nums;color:#4b5c7c;font-weight:600}.online-topup-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-top:16px}.online-topup-bottom p{font-size:11px;color:#8e98ac;line-height:1.8;margin:0}.online-topup-auto{display:flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap;color:#8894ab}.online-topup-auto input{accent-color:#7957e5}.online-topup-table .table-footer{gap:14px}.online-topup-table .page-error{padding:24px}
@media(max-width:1100px){.online-topup-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.online-topup-sync{align-items:flex-start;flex-direction:column;gap:9px}}
@media(max-width:760px){.online-topup-admin-sync{grid-template-columns:1fr}.online-topup-sync-counts{grid-template-columns:repeat(2,minmax(0,1fr))}.online-topup-sync-counts>div{padding:11px 12px}.online-topup-sync-schedule{flex-direction:column;gap:4px}}
@media(max-width:760px){.online-topup-summary{gap:10px;grid-template-columns:1fr 1fr}.online-topup-summary-card{border-radius:17px;padding:15px}.online-topup-summary-card:first-child{grid-column:1/-1}.online-topup-summary-card>strong{font-size:22px}.online-topup-sync{padding:14px 16px}.online-topup-sync-main{align-items:flex-start;flex-direction:column;gap:8px}.online-topup-sync>small{white-space:normal}.online-topup-filter{padding:16px;gap:12px}.online-topup-filter>.field:first-child{grid-column:1/-1}.online-topup-filter .input,.online-topup-filter .select{font-size:16px;min-height:46px}.online-topup-filter>.field:nth-child(3),.online-topup-filter>.field:nth-child(4){grid-column:1/-1}.online-topup-actions .btn{flex:1;min-height:46px}.online-topup-customer,.online-topup-referrer{text-align:right;align-items:flex-end;max-width:65vw}.online-topup-trade{max-width:62vw;text-align:right}.online-topup-bottom{flex-direction:column;gap:12px}.online-topup-auto{min-height:36px}.online-topup-table .pagination{justify-content:flex-end}.online-topup-table .page-btn{min-height:42px}}

.online-topup-referrer-empty{font-size:12px;color:#8e99ad}
.online-topup-settlement-summary{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 24px;color:#7b839b;font-size:12px}.online-topup-selection{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:15px 22px;border-bottom:1px solid #e8ebf4;background:#f9faff;color:#74668e;font-size:12px}.online-topup-selection>div{display:flex;flex-wrap:wrap;gap:8px}.online-topup-order-select{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:12px}.online-topup-order-select input{accent-color:#7957e5;width:18px;height:18px}.online-topup-selection .btn{min-height:44px}.settlement-filter{display:flex;align-items:end;gap:12px;padding:20px;flex-wrap:wrap;border-bottom:1px solid #e8ebf4}.settlement-filter .field{flex:1;min-width:130px}.settlement-filter .btn,.settlement-table .btn,.settlement-dialog .btn{min-height:44px}.settlement-long-text{display:block;max-width:250px;white-space:normal;overflow-wrap:anywhere;line-height:1.8}.settlement-dialog{width:min(850px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto}.settlement-dialog .input{width:100%;min-height:44px}.settlement-dialog textarea{resize:vertical;padding:12px;min-height:110px}.settlement-dialog .dialog-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.settlement-details{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 20px}.settlement-details>div{display:flex;flex-direction:column;gap:8px;padding:15px;border:1px solid #e8ebf4;border-radius:14px}.settlement-details span{font-size:12px;color:#8890a4}.settlement-detail-note p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.8}.settlement-dialog .table-wrap{margin:20px 0}.settlement-dialog .online-topup-trade{max-width:240px}.settlement-review-form>p{font-size:13px;color:#77809a;line-height:1.8}
@media(max-width:760px){.online-topup-selection{padding:14px 16px;align-items:stretch;flex-direction:column}.online-topup-selection>div{display:grid;grid-template-columns:1fr 1fr}.online-topup-selection>div>.primary{grid-column:1/-1}.online-topup-order-select{justify-content:flex-end}.settlement-filter{display:grid;grid-template-columns:1fr 1fr;padding:16px}.settlement-filter>.field:first-child{grid-column:1/-1}.settlement-filter .input{min-height:46px;font-size:16px}.settlement-dialog{margin:auto 0 0;width:100%;max-width:none;max-height:93dvh;border-radius:22px 22px 0 0}.settlement-dialog .dialog-body{padding:18px}.settlement-dialog .input{font-size:16px}.settlement-details{gap:8px}.settlement-details>div{padding:12px}.settlement-dialog .dialog-actions>.btn{flex:1}.settlement-long-text{max-width:65vw;text-align:right}}
.settlement-dialog .table-wrap{overflow:auto}@media(max-width:760px){.settlement-dialog .responsive-record-table{width:100%;min-width:0;display:block}.settlement-dialog .responsive-record-table thead{display:none}.settlement-dialog .responsive-record-table tbody{display:grid;gap:12px}.settlement-dialog .responsive-record-table tr{display:grid;gap:0;padding:8px 12px;border:1px solid #e6eaf5;border-radius:15px;background:#fbfcff}.settlement-dialog .responsive-record-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;border:0;padding:9px 0;white-space:normal;overflow-wrap:anywhere}.settlement-dialog .responsive-record-table td:before{content:attr(data-label);color:#8b95a8;font-size:11px;flex-shrink:0}.settlement-dialog .responsive-record-table td>span,.settlement-dialog .responsive-record-table td>div{max-width:65%;text-align:right}}