#sub .subscription-modal{background:linear-gradient(135deg,#ffffff,#f9fafb);border-radius:18px;width:100%;max-width:710px;padding:24px;box-shadow:0 15px 35px rgba(0,0,0,.15);animation:slideUp .35s ease;margin:0 30px}#sub .modal-topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5e7eb;padding-bottom:10px;margin-bottom:18px}#sub .modal-topbar h2{font-size:20px;font-weight:600;color:#111827}#sub .close-btn{background:transparent;border:none;font-size:20px;color:#6b7280;cursor:pointer;transition:.2s}#sub .close-btn:hover{color:#111}#sub .subscription-card{display:grid;grid-template-columns:48% 48%;justify-content:space-between;align-items:center;background:#fff;border-radius:14px;padding:14px;box-shadow:0 4px 14px rgba(0,0,0,.08);transition:.3s ease}#sub .subscription-card.active{border:1.5px solid #dbd0ff;box-shadow:0 3px 5px rgba(37,99,235,.15);background:linear-gradient(135deg,rgba(237,228,255,.35),rgba(219,208,255,.93))}#sub .subscription-card .subcription-content{position:relative;background:linear-gradient(135deg,rgba(69,30,147,.24),rgba(219,208,255,0));border-radius:14px;padding:18px;height:276px}#sub .subscription-header{display:flex;align-items:center;gap:6px}#sub .subscription-header h3{font-size:16px;font-weight:600;color:var(--secondary)}#sub .plan-desc{color:#6b7280;font-size:16px;margin:8px 0 14px}#sub .plan-details{display:grid;grid-gap:8px;gap:8px;font-size:14px;color:var(--secondary);margin-bottom:18px}#sub .plan-details span{color:#6b7280;margin-right:4px;font-size:16px}#sub .plan-details span.non-renewing{color:#cfa20d;background-color:var(--secondary);border-radius:12px;padding:2px 8px;font-size:12px}#sub .subscription-actions{display:flex;align-items:center}#sub .badge{background:linear-gradient(135deg,rgba(25,13,76,1),rgba(118,74,248,1));padding:4px 12px;border-radius:16px}#sub .badge,#sub .cancel-btn{cursor:pointer;color:white;font-size:14px;font-weight:400}#sub .cancel-btn{background:#d85252;padding:6px 12px;border:none;width:100%;height:30px}#sub .cancel-btn:hover{background:#e98585}#sub .subscribe-btn{height:30px;font-size:14px}#sub .change-card-btn{height:28px}#sub .payment-card{background:linear-gradient(135deg,rgba(69,30,147,.24),rgba(219,208,255,0));border-radius:14px;padding:18px;height:276px}#sub .payment-card h4{font-size:16px;font-weight:600;margin-bottom:12px;color:var(--secondary)}#sub .payment-grid{grid-template-columns:1fr;grid-gap:8px;gap:8px;font-size:14px;color:var(--secondary)}#sub .payment-grid .payment-detail{display:flex;flex-direction:column}#sub .payment-grid span{color:#6b7280}#sub .payment-method-btn-action{display:flex;align-items:center;gap:8px}#sub .empty-text,#sub .loading-text{text-align:center;color:#6b7280;font-size:15px}#sub .text-green{color:#059669}#sub .text-red{color:#dc2626}#sub .other-plans-section{border-top:1px solid #e5e7eb;padding-top:18px;margin-top:22px}#sub .other-plans-title{font-size:17px;font-weight:600;margin-bottom:14px;color:var(--secondary)}#sub .other-plans-list{display:grid;grid-template-columns:30% 30% 30%;justify-content:space-between}#sub .other-plans-list .subscription-card{display:flex;flex-direction:column;background:#f9fafb;border:1px solid #e5e7eb;box-shadow:none;transition:.25s ease}#sub .other-plans-list .subscription-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(118,74,248,.1)}#sub .plans-tab-container{margin-top:25px;animation:fadeIn .3s ease-in-out}#sub .plans-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:16px}#sub .tab-btn{padding:8px 18px;border-radius:20px;border:1.5px solid #dbd0ff;background:#f9f9ff;color:#6b5bd1;font-weight:500;cursor:pointer;transition:.25s ease}#sub .tab-btn.active{background:linear-gradient(135deg,#7b61ff,#624bff);color:white;border-color:#7b61ff;box-shadow:0 3px 8px rgba(123,97,255,.3)}#sub .tab-btn:hover{transform:translateY(-2px)}.fade-in{animation:fadeIn .3s ease-in-out}#Confirmation .confirmation-modal{max-width:460px;min-height:auto;text-align:center}#Confirmation .confirmation-actions{display:flex;justify-content:center;gap:12px}#Confirmation .btn-danger{background-color:#f22424;color:white}#Confirmation .btn-danger:hover{background-color:#cc5252}#Confirmation .warn-title{color:var(--secondary);font-size:26px;font-weight:500}#Confirmation .confirmation-warning{color:#6b7280;font-size:16px}#sub .card-type-badge{background:#f0f0f0;padding:2px 8px;border-radius:4px;font-size:.8em;text-transform:uppercase}#sub .card-preview{margin-top:15px;padding:20px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);position:relative;min-height:160px;max-width:400px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(135deg,#6c757d,#495057);color:#ffffff}#sub .card-preview .expire-chip{background:#ff101096;height:32px;font-size:14px;display:flex;justify-content:center;align-items:center;padding:0 6px;border-radius:4px}#sub .card-header{display:flex;align-items:center;justify-content:space-between}#sub .card-header .cardicon{width:45px;height:32px;border-radius:4px}#sub .card-chip-container{display:flex;justify-content:flex-start}#sub .card-chip{width:45px;height:32px;background:linear-gradient(135deg,#d4af37,#b8941f,#9a7b17);border-radius:5px;position:relative;border:1px solid rgba(0,0,0,.3);box-shadow:inset 0 0 8px rgba(255,215,0,.4),0 2px 4px rgba(0,0,0,.2);overflow:hidden}#sub .chip-line{position:absolute;background:rgba(0,0,0,.4);border-radius:1px}#sub .chip-line:first-child{top:8px;left:5px;right:5px;height:2px}#sub .chip-line:nth-child(2){top:15px;left:8px;right:8px;height:1px}#sub .chip-line:nth-child(3){top:20px;left:10px;width:2px;height:8px}#sub .chip-line:nth-child(4){top:22px;right:10px;width:1px;height:6px}#sub .card-number{font-family:Courier New,monospace;font-weight:600;font-size:14px;letter-spacing:2px;margin:10px 0;text-shadow:0 1px 2px rgba(0,0,0,.2)}#sub .card-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto}#sub .card-holder{font-size:14px;text-transform:uppercase;letter-spacing:1px;font-weight:500}#sub .card-type{font-size:.8em;font-weight:700;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.2)}#sub .payment-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;margin-bottom:15px}#sub .payment-detail{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0}#sub .payment-detail span{color:#666;font-size:.9em}#sub .payment-detail strong{font-size:.95em}#sub .loader-disc{font-weight:16px}@media (max-width:655px){#sub .subscription-modal{max-height:75vh;overflow-y:auto}#sub .subscription-actions{flex-direction:column;align-items:start}#sub .cancel-btn{margin-left:0!important;margin-top:8px}#sub .subscription-card{grid-template-columns:100%;gap:20px}#sub .card-preview{min-height:22px}#sub .other-plans-list{grid-template-columns:49% 49%;gap:12px}}@media (max-width:450px){#sub .other-plans-list .subscription-card .subscription-content{width:100%}#sub .other-plans-list{grid-template-columns:100%}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(25px);opacity:0}to{transform:translateY(0);opacity:1}}#sub .subscription-modal.topup-overview{max-width:1020px;border-radius:24px;padding:34px 42px 42px;background:#fff;min-height:688px}#sub .topup-overview .modal-topbar{border-bottom:0;margin-bottom:26px;padding-bottom:0}#sub .topup-overview .modal-topbar h2{color:#190d4c;font-size:24px;font-weight:500}#sub .topup-overview .close-btn{color:#190d4c;font-size:32px;line-height:1}.topup-overview-body{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.topup-summary-card{min-height:235px;border-radius:16px;background:#f0ebff;padding:28px}.topup-summary-card h3{color:#534ab7;font-size:18px;font-weight:500;margin-bottom:4px}.topup-summary-card p{margin-bottom:4px!important;color:#534ab7!important;font-size:18px}.topup-summary-card p strong{color:#190d4c}.topup-summary-card .text-green{color:#0d7f5f}.topup-summary-card>span{display:inline-flex;align-items:center;min-height:31px;margin-top:10px;border-radius:999px;background:#1e0f57;color:#fff;padding:0 18px;font-size:15px}.topup-summary-card .payment-method-btn-action{display:flex;gap:12px;margin-bottom:12px}#sub .topup-summary-card .change-card-btn{width:auto;min-width:106px;height:38px;border-radius:999px;background:#1e0f57;color:#fff;font-size:16px;box-shadow:0 8px 10px -11px black}#sub .topup-summary-card .card-preview{width:100%;min-height:160px;border-radius:14px;background:#3f3d50;padding:28px}#sub .topup-summary-card .card-preview.empty{display:flex;align-items:center;justify-content:center;background:#ffffff;border:1px dashed #cbbfff}#sub .topup-summary-card .card-chip-container{width:54px;height:34px;border-radius:5px;background:#eba900}#sub .topup-summary-card .card-chip{display:none}.card-brand{border-radius:4px;background:#2370bd;color:#fff;padding:1px 16px;font-size:20px;font-weight:700;text-transform:uppercase}#sub .topup-summary-card .card-holder,#sub .topup-summary-card .card-number{color:#6b57d5;letter-spacing:3px}#sub .topup-summary-card .card-number{margin-top:22px;font-size:20px}#sub .topup-summary-card .card-holder{font-size:18px}#sub .topup-summary-card .empty-payment-method{text-align:center;max-width:260px}#sub .topup-summary-card .empty-payment-method strong{display:block;color:#190d4c;font-size:20px;font-weight:600;margin-bottom:8px}#sub .topup-summary-card .empty-payment-method p{margin:0!important;color:#7c74a8!important;font-size:15px;line-height:1.5}.topup-plan-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:20px;gap:20px;margin-top:8px}.topup-plan-card{min-height:170px;border:1px solid #ded6ff;border-radius:16px;background:#fff;padding:18px 20px;text-align:center}.topup-plan-card div{display:flex;align-items:center;justify-content:center;gap:12px}.topup-plan-card h3{color:#190d4c;font-size:22px;font-weight:500;margin:0 0 4px}.topup-plan-card p{color:#5c46c4!important;font-size:22px!important}.topup-plan-card .credits-box{margin-bottom:8px}.topup-plan-card p strong{color:#190d4c}.topup-plan-card button{width:100%;height:48px;border:0;border-radius:9px;background:#764af8;color:#fff;font-size:18px;cursor:pointer}.topup-plan-card button:disabled{background:#b5adc9;cursor:not-allowed}.subscription-loading{color:#686993}@media (max-width:850px){#sub .subscription-modal.topup-overview{padding:26px 20px}.topup-overview-body,.topup-plan-list{grid-template-columns:1fr}}