:root{--primary: #6C5CE7;--primary-light: #9B8FEF;--accent: #FF6B9D;--surface: #1A1A2E;--surface-light: #16213E;--card: #0F3460;--card-light: #1A4A7A;--success: #00D2A0;--warning: #FFBE0B;--error: #FF5252;--text-primary: #FFFFFF;--text-secondary: #B8C1EC;--text-muted: #8892B0;--gradient-primary: linear-gradient(135deg, #6C5CE7, #FF6B9D);--gradient-dark: linear-gradient(180deg, #0F0C29, #302B63, #24243E);--radius: 16px;--radius-sm: 12px;--radius-lg: 24px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;background:#0f0c29}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--gradient-dark);color:var(--text-primary);line-height:1.6;min-height:100vh}a{text-decoration:none;color:inherit}.page-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.3;animation:float 8s ease-in-out infinite}.glow-1{width:500px;height:500px;background:var(--primary);top:-100px;left:-100px}.glow-2{width:400px;height:400px;background:var(--accent);bottom:-50px;right:-50px;animation-delay:-4s}.glow-3{width:300px;height:300px;background:var(--success);top:50%;left:50%;transform:translate(-50%,-50%);opacity:.12;animation-delay:-2s}@keyframes float{0%,to{transform:translate(0)}25%{transform:translate(30px,-30px)}50%{transform:translate(-20px,20px)}75%{transform:translate(20px,10px)}}.app-container{position:relative;z-index:1;min-height:100vh}.navbar{position:sticky;top:0;z-index:100;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,60px);background:#0f0c29d9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(108,92,231,.15)}.nav-brand{display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:800}.nav-brand-icon{font-size:1.5rem}.nav-right{display:flex;align-items:center;gap:16px}.nav-user{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 8px;background:#6c5ce71a;border:1px solid rgba(108,92,231,.2);border-radius:50px}.nav-avatar{width:32px;height:32px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}.nav-user-name{font-weight:600;font-size:.9rem}.btn-logout{padding:8px 16px;border:none;border-radius:50px;background:#ff52521f;color:var(--error);font-family:Outfit,sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .3s}.btn-logout:hover{background:#ff525240}.page{max-width:900px;margin:0 auto;padding:40px clamp(16px,4vw,40px)}.card{background:#0f346059;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(108,92,231,.12);border-radius:var(--radius-lg);padding:32px 28px;margin-bottom:24px}.card-title{font-size:1.15rem;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;border:none;border-radius:var(--radius-sm);background:var(--gradient-primary);color:#fff;font-family:Outfit,sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .3s,box-shadow .3s,opacity .3s;width:100%}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #6c5ce766}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{padding:10px 20px;font-size:.9rem;width:auto}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px}.input{width:100%;padding:14px 18px;border:1px solid rgba(108,92,231,.2);border-radius:var(--radius-sm);background:#0f0c2999;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:.95rem;outline:none;transition:border-color .3s,box-shadow .3s}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6c5ce726}.input::placeholder{color:var(--text-muted)}.tabs{display:flex;gap:4px;padding:4px;background:#6c5ce71a;border-radius:50px;margin-bottom:24px;max-width:280px}.tab{flex:1;padding:10px 20px;border:none;border-radius:50px;font-family:Outfit,sans-serif;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .3s;background:transparent;color:var(--text-muted)}.tab.active{background:var(--gradient-primary);color:#fff}.msg{padding:14px 18px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;margin-top:16px;line-height:1.5}.msg-success{background:#00d2a01f;border:1px solid rgba(0,210,160,.3);color:var(--success)}.msg-error{background:#ff52521f;border:1px solid rgba(255,82,82,.3);color:var(--error)}.msg-warning{background:#ffbe0b1f;border:1px solid rgba(255,190,11,.3);color:var(--warning)}.msg-info{background:#6c5ce71f;border:1px solid rgba(108,92,231,.3);color:var(--primary-light)}.credit-hero{text-align:center;padding:40px 20px}.credit-amount{font-size:4rem;font-weight:900;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px}.credit-label{color:var(--text-muted);font-size:1rem;font-weight:500}.package-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.package-card{position:relative;padding:20px 16px;border:2px solid rgba(108,92,231,.15);border-radius:var(--radius);cursor:pointer;transition:all .3s;text-align:center;background:#0f0c2966}.package-card:hover{border-color:#6c5ce766;background:#6c5ce714}.package-card.selected{border-color:var(--primary);background:#6c5ce71f;box-shadow:0 0 0 3px #6c5ce726,0 8px 30px #6c5ce71a}.package-card.popular:before{content:"⭐ Populer";position:absolute;top:-10px;left:50%;transform:translate(-50%);padding:2px 14px;background:var(--gradient-primary);border-radius:50px;font-size:.7rem;font-weight:700;white-space:nowrap}.pkg-name{font-weight:700;font-size:1rem;margin-bottom:4px}.pkg-credits{font-size:1.5rem;font-weight:900;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}.pkg-credits small{font-size:.75rem;font-weight:600;-webkit-text-fill-color:var(--text-muted)}.pkg-price{font-size:.9rem;color:var(--text-secondary);font-weight:600}.tx-list{list-style:none}.tx-item{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(108,92,231,.08)}.tx-item:last-child{border-bottom:none}.tx-info{display:flex;flex-direction:column;gap:2px}.tx-desc{font-weight:600;font-size:.9rem}.tx-date{color:var(--text-muted);font-size:.8rem}.tx-amount{font-weight:700;font-size:.95rem}.tx-amount.positive{color:var(--success)}.tx-amount.negative{color:var(--error)}.tx-status{padding:3px 10px;border-radius:50px;font-size:.75rem;font-weight:700}.tx-status.success{background:#00d2a026;color:var(--success)}.tx-status.pending{background:#ffbe0b26;color:var(--warning)}.tx-status.failed{background:#ff525226;color:var(--error)}.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}.login-card{width:100%;max-width:440px}.login-header{text-align:center;margin-bottom:32px}.login-icon{font-size:3rem;margin-bottom:12px}.login-header h1{font-size:1.8rem;font-weight:900;margin-bottom:8px}.login-header p{color:var(--text-muted);font-size:.95rem}.nav-links{display:flex;gap:8px}.nav-link{padding:8px 16px;border-radius:50px;font-weight:600;font-size:.9rem;color:var(--text-muted);transition:all .3s;cursor:pointer;border:none;background:none;font-family:Outfit,sans-serif}.nav-link:hover,.nav-link.active{color:var(--text-primary);background:#6c5ce726}@media(max-width:600px){.package-grid{grid-template-columns:1fr}.credit-amount{font-size:3rem}.nav-user-name{display:none}.tx-item{flex-direction:column;align-items:flex-start;gap:8px}}