.topup-page{min-height:100vh;background:#eef2f7;display:flex;align-items:center;justify-content:center;font-family:Segoe UI,sans-serif}.topup-card{width:420px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 20px 40px #00000014}.topup-header{background:linear-gradient(180deg,#163a63,#1c4c84);padding:20px 30px;text-align:center;color:#fff}.wallet-icon{width:220px;height:64px;margin:0 auto 16px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:28px}.topup-header h2{margin:0;font-weight:600}.topup-header p{margin-top:8px;opacity:.9;font-size:14px}.topup-body{padding:30px}.topup-body label{font-size:14px;font-weight:600;color:#2c3e50}.topup-body input{width:100%;margin-top:8px;height:48px;border-radius:10px;border:1px solid #d9e1ec;padding:0 14px;font-size:15px;outline:none;transition:.2s;box-sizing:border-box}.topup-body input:focus{border-color:#3b82f6}.continue-btn{width:100%;margin-top:20px;height:50px;border-radius:12px;border:none;background:linear-gradient(90deg,#3b82f6,#4f8df7);color:#fff;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 6px 14px #3b82f659;transition:.2s}.continue-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px #3b82f666}.error-text{color:#bf0b0b;font-size:13px;margin-top:6px;font-weight:700}.wallet-page{background:#f3f5f9;min-height:100vh;font-family:Segoe UI,sans-serif}.wallet-header{height:64px;background:#fff;border-bottom:1px solid #e6e9f0;display:flex;align-items:center;justify-content:space-between;padding:0 70px}.logo img{height:46px;object-fit:contain}.title{font-weight:600;color:#1f7a8c;font-size:x-large}.wallet-container{display:flex;gap:24px;padding:40px 100px}.left-panel{width:560px}.wallet-balance-card{background:#f7fbff;border:2px solid #2d8cff;border-radius:16px;padding:22px;margin-bottom:20px}.balance-top{display:flex;justify-content:space-between;color:#5c6b80;font-weight:500}.active-pill{background:#e6f7f5;color:#1fa79b;padding:4px 10px;border-radius:10px;font-size:12px}.balance-amount{font-size:36px;font-weight:700;margin-top:10px}.balance-amount span{font-size:18px;color:#6b7a90}.lco-card{background:#fff;border-radius:16px;padding:20px}.lco-card h3{margin-bottom:14px}.lco-item{display:flex;gap:12px;background:#f6f7fb;border-radius:12px;padding:14px;margin-bottom:12px}.icon{width:36px;height:36px;border-radius:10px;background:#e9f3ff;display:flex;align-items:center;justify-content:center}.label{font-size:12px;color:#6b7a90}.value{font-weight:600;margin-top:2px}.right-panel{flex:1}.tabs{display:flex;justify-content:space-between;align-items:center;width:100%;background:#f6f7fb;padding:8px 16px;border-radius:12px;margin-bottom:16px;font-size:x-large}.tab{flex:1;text-align:center;padding:10px 0;cursor:pointer}.tab.active{background:linear-gradient(180deg,#163a63,#1c4c84);border-radius:10px;box-shadow:0 2px 6px #00000014;color:#fff}.recharge-card{background:#fff;border-radius:16px;padding:5px 24px 24px}.amount-chips{display:flex;gap:12px;margin:16px 0}.amount-chips button{border:1px solid #d7dce5;background:#fff;padding:8px 16px;border-radius:10px;cursor:pointer}.amount-chips .selected{border-color:#2d8cff;color:#2d8cff;background:#eef5ff}.amount-input{display:flex;align-items:center;border:1px solid #d7dce5;border-radius:12px;padding:12px 14px;margin-top:8px;margin-bottom:20px}.amount-input span{margin-right:8px;font-weight:600}.amount-input input{border:none;outline:none;font-size:16px;width:100%}.pay-btn{width:50%;height:50px;border:none;border-radius:12px;background:linear-gradient(180deg,#163a63,#1c4c84);color:#fff;font-size:16px;font-weight:600;cursor:pointer}.btn-wrap{display:flex;justify-content:center}.recharge-row{display:flex;align-items:center;gap:48px;width:100%;margin-top:40px;margin-bottom:40px}.recharge-row label{min-width:160px;font-weight:500;color:#2c3e50}.amount-input{display:flex;align-items:center;border:1px solid #1c4c84;border-radius:12px;padding:12px 14px;background:#fff;min-width:220px;margin:0}.amount-input input{border:none;outline:none;font-size:16px;width:100px}.recharge-row .pay-btn{margin-left:auto;width:200px;height:48px}
