*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f4f6f8;color:#17191c}
.container{width:min(720px,calc(100% - 28px));margin:40px auto}
.card{background:#fff;border-radius:20px;padding:26px;box-shadow:0 12px 35px rgba(0,0,0,.08)}
h1{margin:0 0 8px;font-size:30px}
h2{margin:26px 0 14px;font-size:20px}
label{display:block;font-weight:700;margin:22px 0 8px}
input{width:100%;border:1px solid #d8dde3;border-radius:12px;padding:14px;font-size:16px;outline:none}
input:focus{border-color:#111}
.row{display:flex;gap:10px}
.row input{flex:1}
button{border:0;border-radius:12px;padding:13px 16px;font-size:15px;font-weight:800;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
#checkBtn{background:#111;color:#fff;white-space:nowrap}
.primary{width:100%;background:#111;color:#fff;padding:15px}
.hidden{display:none!important}
.muted{color:#69717c}
.user-box{margin-top:14px;padding:14px;border-radius:12px;background:#f1f3f5;display:flex;flex-direction:column;gap:3px}
.error{margin-top:14px;padding:12px;border-radius:12px;background:#fff0f0;color:#b00020}
.packages{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.package{background:#f5f6f7;border:2px solid transparent;text-align:left;display:flex;flex-direction:column;gap:5px}
.package span{font-size:16px}
.package b{font-size:13px;color:#5f6670}
.package.selected{border-color:#111;background:#fff}
.summary{margin:18px 0;padding:15px;border:1px solid #e2e5e8;border-radius:14px}
.summary div,.pay-info div{display:flex;justify-content:space-between;gap:20px;padding:7px 0}
.summary span,.pay-info span{color:#68717b}
.back{display:inline-block;margin-bottom:20px;color:#333;text-decoration:none}
.payment-card{text-align:center}
.pay-info{text-align:left;background:#f6f7f8;border-radius:14px;padding:10px 14px;margin:18px 0}
.qr-wrap{display:flex;justify-content:center;margin:20px 0}
.qr-wrap img{width:min(360px,100%);border-radius:12px;border:1px solid #eee}
.status{padding:14px;border-radius:12px;font-weight:900;margin:16px 0 8px}
.status.pending{background:#fff7df}
.status.processing{background:#eaf2ff}
.status.success{background:#eaf8ef}
.status.failed{background:#fff0f0}
.paid-btn{margin-top:12px}
.receipt{display:block;margin-top:14px;color:#333}
@media(max-width:520px){.row{flex-direction:column}.packages{grid-template-columns:1fr}.container{margin:16px auto}.card{padding:20px}}


.service-tabs { display:flex; gap:10px; margin:18px 0 22px; }
.service-tab, .profile-option { border:1px solid #d9dde5; background:#fff; border-radius:14px; padding:13px 15px; cursor:pointer; }
.service-tab { flex:1; font-weight:700; }
.service-tab.active, .profile-option.selected { border-color:#111827; background:#f3f4f6; }
.profile-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.profile-option { text-align:left; display:flex; flex-direction:column; gap:4px; }
.profile-option span { color:#667085; font-size:13px; }
@media (max-width:520px) { .profile-options { grid-template-columns:1fr; } }