.paymain{max-width:980px}
.hello{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}.hello h1{margin:0;color:var(--navy);font-size:24px}
.nextpay{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(135deg,#00285B 0%,#0a3a78 60%,#02848a 100%);color:#fff;border-radius:18px;padding:26px 28px;box-shadow:0 8px 24px rgba(0,40,91,.18);position:relative;overflow:hidden}
.nextpay:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:6px;background:var(--teal);border-radius:0 4px 4px 0}
.np-label{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;color:#bfeeee}
.np-amount{font-size:54px;font-weight:800;letter-spacing:-1px;line-height:1.1;margin:6px 0}.np-amount span{font-size:26px;opacity:.75}.np-amount.pending{opacity:.6}
.np-sub{color:#d8f3f3;margin-bottom:6px}.np-note{color:#d8f3f3;font-size:13px;max-width:420px}
.np-right{display:flex;flex-direction:column;gap:12px;min-width:220px;background:rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;align-self:center}
.np-right span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#bfeeee}.np-right b{font-size:15px}
.chip{display:inline-block;padding:3px 10px;border-radius:99px;background:#eef2f7;color:var(--muted);font-weight:700;font-size:12px}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn);width:max-content}
.ytd{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}.ytd span{color:var(--muted);font-weight:600}.ytd b{font-size:20px;color:var(--navy)}
.paytable td.amt{font-weight:800;color:var(--navy)}.r{text-align:right}
.tablecard{padding:0;overflow:hidden}.paytable{width:100%;border-collapse:collapse}.paytable th,.paytable td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.paytable th.r,.paytable td.r{text-align:right}.paytable th{background:#f7f9fc;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:14px}.doc{display:flex;gap:14px;align-items:center}.doc p{margin:4px 0 0}.doc .btn{margin-left:auto}
.docicon{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.langsw{margin-top:14px}
@media (max-width:700px){
 .np-amount{font-size:44px}.nextpay{padding:22px 20px}.np-right{width:100%}
 .docs{grid-template-columns:1fr}.doc{flex-wrap:wrap}.doc .btn{margin-left:0;width:100%}
 .paytable thead{display:none}.paytable tr{display:block;padding:10px 14px;border-bottom:1px solid var(--line)}
 .paytable td{display:flex;justify-content:space-between;border:0;padding:4px 0}.paytable td:before{content:attr(data-l);color:var(--muted);font-size:12px}
 .paytable td.r{text-align:right}.paytable td:last-child{padding-top:8px}.paytable td:last-child:before{content:none}.paytable td:last-child .btn{width:100%}
}
.viewas{background:#fff4d6;color:#7a5200;border-bottom:2px solid #f0c24b;padding:10px 16px;text-align:center;font-size:13.5px}.viewas a{color:#00285B;font-weight:700}