*{box-sizing:border-box}:root{--bg-deep:#050505;--bg-accent:#121212;--glass-bg:rgba(25, 25, 25, 0.4);--glass-border:rgba(251, 191, 36, 0.15);--gold-primary:#FBBF24;--gold-secondary:#D97706;--gold-light:#FDE68A;--gold-glow:rgba(251, 191, 36, 0.3);--silver-text:#E5E7EB;--muted-text:#9CA3AF;--danger:#EF4444;--success:#10B981;--dark-text:#111827;--blue-accent:#3B82F6}html,body{width:100%;max-width:100vw;overflow-x:hidden!important;margin:0;padding:0}body{font-family:'Poppins',sans-serif;background-color:var(--bg-deep);background-image:radial-gradient(at 0% 0%,rgb(251 191 36 / .08) 0,transparent 50%),radial-gradient(at 100% 100%,rgb(217 119 6 / .05) 0,transparent 50%);color:var(--silver-text);min-height:100vh;display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:20px 10px}input,select,textarea{-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;user-select:text!important}.app-container{width:100%;max-width:900px;margin:0 auto;text-align:center;overflow-x:hidden}.screen{display:none;animation:fadeIn 0.5s ease-out forwards;width:100%}.screen.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.brand-logo{font-size:26px;font-weight:800;background:linear-gradient(135deg,var(--gold-primary),var(--gold-secondary));-webkit-background-clip:text;-webkit-text-fill-color:#fff0;letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:25px;text-shadow:0 0 20px var(--gold-glow);word-break:break-word}.dashboard-logo{font-size:20px;text-align:left;margin-bottom:10px}.glass-card{width:100%;max-width:100%;background:var(--glass-bg);backdrop-filter:blur(20px);padding:40px 20px;border-radius:24px;border:1px solid var(--glass-border);box-shadow:0 20px 40px rgb(0 0 0 / .8),inset 0 0 20px rgb(251 191 36 / .02);text-align:center;position:relative;overflow:hidden;margin-bottom:30px;box-sizing:border-box}@media(min-width:600px){.glass-card{padding:50px 40px}}.primary-btn{width:100%;background:linear-gradient(135deg,var(--gold-primary) 0%,var(--gold-secondary) 100%);color:var(--dark-text);border:none;padding:16px 20px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 10px 20px var(--gold-glow);transition:all 0.3s ease;display:inline-block;text-transform:uppercase;letter-spacing:.5px;white-space:normal}@media(min-width:450px){.primary-btn{width:auto;padding:16px 40px}}.primary-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 25px rgb(251 191 36 / .4);filter:brightness(1.1)}.primary-btn:disabled{opacity:.7;cursor:wait;filter:grayscale(.5)}.input-group{margin-bottom:20px;text-align:left;width:100%}.input-group label{display:block;font-size:14px;color:var(--gold-light);margin-bottom:8px;font-weight:500}.glass-input{width:100%;background:rgb(0 0 0 / .5);border:1px solid rgb(251 191 36 / .2);padding:15px;border-radius:12px;color:#fff;font-family:'Poppins',sans-serif;font-size:15px;outline:none;transition:all 0.3s ease}.glass-input:focus{border-color:var(--gold-primary);background:rgb(0 0 0 / .7);box-shadow:0 0 15px var(--gold-glow)}select.glass-input option{background-color:var(--bg-deep);color:#fff}.error-msg{color:var(--danger);font-size:13px;margin-top:10px;text-align:center;display:none;font-weight:500}.success-msg{color:var(--success);font-size:13px;margin-top:10px;text-align:center;display:none;font-weight:500}.illustration-placeholder{width:120px;height:120px;background:linear-gradient(135deg,rgb(251 191 36 / .2),rgb(217 119 6 / .1));border-radius:50%;margin:0 auto 25px auto;display:flex;align-items:center;justify-content:center;font-size:40px;border:1px solid rgb(251 191 36 / .3);box-shadow:0 0 30px var(--gold-glow)}.onboarding-title{font-size:28px;font-weight:800;color:#fff;margin-bottom:15px;letter-spacing:.5px}@media(min-width:450px){.onboarding-title{font-size:32px}}.onboarding-title span{background:linear-gradient(135deg,var(--gold-primary),var(--gold-secondary));-webkit-background-clip:text;-webkit-text-fill-color:#fff0}.onboarding-desc{font-size:15px;color:var(--muted-text);line-height:1.6;margin-bottom:30px;max-width:600px;margin-left:auto;margin-right:auto;font-weight:300}.login-form{width:100%;max-width:350px;margin:0 auto;text-align:left}form{width:100%}.top-bar{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:15px;margin-bottom:20px;border-bottom:1px solid rgb(251 191 36 / .1);padding-bottom:15px;width:100%}.user-greeting{font-size:14px;color:var(--muted-text);text-align:left;max-width:100%}#display-username{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.logout-btn{background:#fff0;border:1px solid rgb(255 255 255 / .2);color:var(--silver-text);padding:6px 15px;border-radius:20px;cursor:pointer;font-family:'Poppins';font-size:12px;transition:0.3s;margin-top:5px;white-space:nowrap}.logout-btn:hover{background:var(--danger);border-color:var(--danger);color:#fff}.badge-premium{background:linear-gradient(135deg,var(--gold-primary) 0%,var(--gold-secondary) 100%);color:var(--dark-text);padding:3px 12px;border-radius:12px;font-size:11px;font-weight:800;margin-left:8px;display:inline-flex;align-items:center;gap:4px;box-shadow:0 0 15px var(--gold-glow);vertical-align:middle;margin-top:-5px}.badge-admin{background:rgb(239 68 68 / .15);border:1px solid var(--danger);color:var(--danger);padding:2px 10px;border-radius:12px;font-size:11px;font-weight:700;margin-left:8px;display:inline-block;vertical-align:middle;margin-top:-5px}.lifetime-text{font-size:11.5px;color:var(--gold-primary);margin-top:8px;display:none;font-weight:600;letter-spacing:.5px;text-shadow:0 0 10px var(--gold-glow)}.btn-view-card{background:rgb(251 191 36 / .1);border:1px solid var(--gold-primary);color:var(--gold-primary);padding:6px 15px;border-radius:20px;cursor:pointer;font-family:'Poppins';font-size:12px;font-weight:600;transition:0.3s;margin-top:10px;display:inline-flex;align-items:center;gap:5px}.btn-view-card:hover{background:var(--gold-primary);color:var(--dark-text);box-shadow:0 0 15px var(--gold-glow)}.pricing-container{display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;margin-bottom:25px;width:100%;max-width:100%;overflow:visible}@media(min-width:650px){.pricing-container{flex-direction:row;align-items:stretch}}.pricing-card{flex:1;width:100%;max-width:320px;background:rgb(0 0 0 / .5);border:1px solid rgb(255 255 255 / .1);border-radius:16px;padding:30px 20px;position:relative;transition:0.3s;display:flex;flex-direction:column}.pricing-card:hover{transform:translateY(-5px);border-color:rgb(251 191 36 / .4)}.pricing-card.premium{background:linear-gradient(145deg,rgb(251 191 36 / .08),rgb(217 119 6 / .03));border:1px solid var(--gold-primary);box-shadow:0 10px 30px rgb(251 191 36 / .15)}.pricing-card .p-title{color:#fff;margin-top:0;font-size:18px;text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:10px}.pricing-card.premium .p-title{color:var(--gold-primary)}.pricing-price{font-size:24px;font-weight:800;color:#fff;margin-bottom:20px;text-shadow:0 2px 10px rgb(0 0 0 / .5)}.pricing-price span{font-size:14px;color:var(--muted-text);font-weight:500;text-decoration:none!important}.pricing-features{display:flex;flex-direction:column;gap:12px;padding-left:0;margin-bottom:25px;text-align:left;color:var(--silver-text);font-size:13.5px;line-height:1.6;flex-grow:1}.pricing-item{position:relative;padding-left:25px}.pricing-item::before{content:'✔️';position:absolute;left:0;color:var(--success);font-size:13px;top:1px}.popular-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold-primary),var(--gold-secondary));color:var(--dark-text);font-size:11px;font-weight:800;padding:4px 15px;border-radius:20px;box-shadow:0 5px 15px var(--gold-glow);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;z-index:10}.login-link-btn{background:#fff0;border:none;color:var(--muted-text);font-family:'Poppins';font-size:13.5px;cursor:pointer;text-decoration:underline;transition:0.3s;margin-top:15px;display:inline-block}.login-link-btn:hover{color:var(--gold-primary)}.member-card-wrapper{background:linear-gradient(135deg,#1f1f1f 0%,#0a0a0a 100%);border:2px solid var(--gold-primary);border-radius:16px;padding:30px;position:relative;overflow:hidden;box-shadow:0 15px 35px rgb(0 0 0 / .5),inset 0 0 20px rgb(251 191 36 / .1);width:100%;text-align:left;color:#fff;margin-bottom:25px}.member-card-wrapper::after{content:'👑';position:absolute;font-size:160px;opacity:.04;right:-20px;bottom:-40px;transform:rotate(-15deg);pointer-events:none}.mc-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgb(251 191 36 / .2);padding-bottom:12px;margin-bottom:25px}.mc-brand{font-size:18px;font-weight:800;color:var(--gold-primary);letter-spacing:1px}.mc-badge{background:linear-gradient(135deg,var(--gold-primary),var(--gold-secondary));color:var(--dark-text);font-size:10px;font-weight:800;padding:4px 10px;border-radius:8px;letter-spacing:.5px}.mc-label{font-size:11px;color:var(--muted-text);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-weight:500}.mc-value{font-size:18px;font-weight:600;color:#fff;letter-spacing:.5px;margin-bottom:15px;word-break:break-all}.mc-license{font-family:monospace;font-size:16px;color:var(--gold-primary);font-weight:700;background:rgb(0 0 0 / .6);padding:12px;border-radius:8px;text-align:center;border:1px dashed var(--gold-secondary);letter-spacing:2px;position:relative;z-index:2;word-break:break-all}.tab-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:30px;align-items:center;width:100%}.tab-btn{background:rgb(0 0 0 / .4);border:1px solid rgb(251 191 36 / .2);padding:12px 20px;border-radius:30px;color:var(--muted-text);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.tab-btn:hover{background:rgb(251 191 36 / .1);color:#fff}.tab-btn.active{background:rgb(251 191 36 / .15);color:var(--gold-primary);border-color:var(--gold-primary);box-shadow:0 0 20px var(--gold-glow)}#btn-kelas{padding:14px 28px;font-size:16px;font-weight:800;border-width:2px;text-transform:uppercase;box-shadow:0 0 15px rgb(251 191 36 / .15)}#btn-kelas.active{box-shadow:0 0 25px var(--gold-glow);transform:translateY(-2px)}.tab-content{display:none;animation:fadeIn 0.4s ease-out;width:100%}.tab-content.active{display:block}.h3-title{color:var(--gold-primary);margin-top:0;font-size:1.25em;font-weight:700;margin-bottom:15px}.h4-title{margin:0 0 5px 0;color:#fff;font-size:16px;font-weight:700}.panel-title{margin-top:0;color:var(--gold-primary);font-size:18px;border-bottom:1px solid rgb(251 191 36 / .2);padding-bottom:10px;margin-bottom:20px;font-weight:700}.tips-list{display:flex;flex-direction:column;gap:12px;padding-left:20px;color:var(--silver-text);font-size:14.5px;line-height:1.8;font-weight:300}.tips-item{position:relative}.tips-item::before{content:'•';position:absolute;left:-15px;color:var(--gold-primary);font-weight:700;font-size:18px;line-height:1.2}.tips-item strong{color:#fff;font-weight:600}.guide-section{text-align:left;background:rgb(0 0 0 / .4);padding:30px 20px;border-radius:16px;margin-top:25px;border:1px solid rgb(251 191 36 / .1);width:100%;overflow:hidden}.guide-step{display:flex;align-items:flex-start;gap:15px;margin-bottom:20px}.step-num{background:linear-gradient(135deg,var(--gold-primary),var(--gold-secondary));color:var(--dark-text);width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;box-shadow:0 0 10px var(--gold-glow)}.step-text{flex:1}.step-text .step-desc{margin:0;font-size:14px;color:var(--muted-text);word-break:break-word}.wib-info{font-size:13px;color:var(--gold-light);margin-bottom:15px;font-weight:500;letter-spacing:.5px;word-break:break-word}.now-playing{color:#fff;font-weight:700;font-size:20px;margin-bottom:30px;text-shadow:0 2px 4px rgb(0 0 0 / .5);word-break:break-word}@media(min-width:450px){.now-playing{font-size:22px}}.audio-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:20px}.play-btn{background:linear-gradient(135deg,var(--gold-primary) 0%,var(--gold-secondary) 100%);color:var(--dark-text);border:none;width:80px;height:80px;border-radius:50%;font-size:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px var(--gold-glow);transition:all 0.3s;padding-left:5px;flex-shrink:0}.play-btn:disabled{background:var(--bg-accent);color:var(--muted-text);cursor:not-allowed;box-shadow:none}.play-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 15px 30px rgb(251 191 36 / .5);filter:brightness(1.1)}.progress-container{width:100%;max-width:550px;margin:0 auto}.progress-bar{width:100%;height:8px;accent-color:var(--gold-primary);cursor:pointer;background:rgb(255 255 255 / .1);border-radius:4px;outline:none}.time-info{display:flex;justify-content:space-between;font-size:14px;color:var(--gold-light);margin-top:10px;font-weight:500}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:16px;margin-top:20px;width:100%}.day-btn{width:100%;background:rgb(0 0 0 / .4);backdrop-filter:blur(5px);border:1px solid rgb(251 191 36 / .2);padding:18px;border-radius:14px;font-size:14px;font-weight:600;color:var(--silver-text);cursor:pointer;transition:all 0.2s ease}.day-btn:hover:not(.locked){background:rgb(251 191 36 / .1);border-color:var(--gold-primary);color:#fff;transform:translateY(-2px)}.day-btn.active{background:linear-gradient(135deg,var(--gold-primary) 0%,var(--gold-secondary) 100%);color:var(--dark-text);border-color:#fff0;box-shadow:0 5px 15px var(--gold-glow)}.day-btn.locked{background:rgb(10 10 10 / .6);color:#4B5563;border-color:rgb(255 255 255 / .05);cursor:not-allowed;pointer-events:none}.admin-panel-grid{display:flex;flex-direction:column;gap:25px;text-align:left;width:100%;max-width:100%}@media(min-width:768px){.admin-panel-grid{flex-direction:row;align-items:flex-start}.admin-panel-grid>.panel-box{flex:1;min-width:0}}.panel-box{min-width:0;background:rgb(0 0 0 / .4);padding:25px 20px;border-radius:16px;border:1px solid rgb(251 191 36 / .1);width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.toggle-btn{padding:15px 30px;font-size:16px;border-radius:12px;font-weight:700;cursor:pointer;border:none;width:100%;transition:0.3s;color:var(--dark-text);white-space:normal}.toggle-on{background:var(--success);color:#fff;box-shadow:0 0 20px rgb(16 185 129 / .4)}.toggle-off{background:var(--danger);color:#fff;box-shadow:0 0 20px rgb(239 68 68 / .4)}.user-table-container{width:100%;max-width:100%;overflow-x:auto;display:block;margin-top:20px;padding-bottom:10px;-webkit-overflow-scrolling:touch}.user-table{width:100%;border-collapse:collapse;min-width:100%}.user-table th,.user-table td{padding:15px;text-align:left;border-bottom:1px solid rgb(255 255 255 / .05);font-size:14px;color:var(--silver-text);word-break:break-word}.user-table th{background:rgb(251 191 36 / .1);color:var(--gold-primary);font-weight:600;white-space:nowrap}.user-table tbody tr{cursor:pointer;transition:0.2s}.user-table tbody tr:hover{background:rgb(255 255 255 / .05)}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .85);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(8px);overflow-y:auto;padding:20px 10px}.btn-reset-session{background:rgb(239 68 68 / .2);border:1px solid var(--danger);color:#fff;padding:10px 15px;border-radius:8px;font-family:'Poppins';font-weight:600;font-size:13px;cursor:pointer;width:100%;margin-top:15px;transition:0.3s}.btn-reset-session:hover{background:var(--danger);box-shadow:0 0 15px rgb(239 68 68 / .5)}.faq-section{margin-top:35px;text-align:left;border-top:1px solid rgb(251 191 36 / .2);padding-top:25px;width:100%}.faq-item{background:rgb(0 0 0 / .4);border:1px solid rgb(251 191 36 / .1);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:all 0.3s ease}.faq-question{width:100%;text-align:left;background:none;border:none;padding:18px 20px;font-size:15px;font-weight:600;color:var(--gold-light);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:'Poppins',sans-serif;transition:0.2s;gap:10px}.faq-question:hover{color:var(--gold-primary);background:rgb(251 191 36 / .05)}.faq-icon{transition:transform 0.3s ease;color:var(--gold-primary);font-weight:700;font-size:20px;line-height:1;flex-shrink:0}.faq-item.active{border-color:var(--gold-primary);background:rgb(0 0 0 / .6);box-shadow:0 0 15px rgb(251 191 36 / .1)}.faq-item.active .faq-icon{transform:rotate(45deg)}.faq-item.active .faq-question{color:var(--gold-primary)}.faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;color:var(--silver-text);font-size:14px;line-height:1.7;font-weight:300}.faq-item.active .faq-answer{padding:0 20px 20px 20px;max-height:300px}.toast-box{background:linear-gradient(135deg,var(--gold-primary),var(--gold-secondary));color:var(--dark-text);padding:15px 20px;border-radius:12px;box-shadow:0 10px 30px rgb(0 0 0 / .5);font-weight:600;font-size:14px;animation:slideInRight 0.5s ease-out forwards;display:flex;align-items:center;gap:10px;max-width:300px;word-break:break-word;cursor:pointer}