:root{--bg-primary:#090a0f;--bg-secondary:#14161f;--bg-tertiary:#1f212d;--accent-gold-start:#ffe066;--accent-gold-end:#f5b041;--accent-glow:#f5b04166;--text-primary:#fff;--text-secondary:#9aa0a6;--text-muted:#606469;--glass-bg:#14161fb3;--glass-border:#ffffff14;--danger-color:#ff4d4f;--border-radius-lg:20px;--border-radius-md:12px;--border-radius-sm:8px;--transition-smooth:all .3s cubic-bezier(.25, .8, .25, 1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Outfit,Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;padding-bottom:84px;display:flex}.app-container{flex-direction:column;width:100%;max-width:600px;min-height:100vh;margin:0 auto;display:flex;position:relative}.header-bar{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);background:#090a0fcc;justify-content:space-between;align-items:center;padding:18px 20px;display:flex;position:sticky;top:0}.logo-text{letter-spacing:.5px;background:linear-gradient(135deg, var(--accent-gold-start) 0%, var(--accent-gold-end) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:20px;font-weight:700}.tab-content{flex:1;padding:16px;animation:.4s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tab-nav{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--glass-border);z-index:200;border-top-left-radius:16px;border-top-right-radius:16px;justify-content:space-around;align-items:center;width:100%;max-width:600px;height:72px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.nav-item{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);flex-direction:column;justify-content:center;align-items:center;width:25%;height:100%;font-size:11px;font-weight:500;text-decoration:none;display:flex;position:relative}.nav-item svg{transition:var(--transition-smooth);margin-bottom:4px;font-size:22px}.nav-item.active{color:var(--accent-gold-end)}.nav-item.active svg{filter:drop-shadow(0 0 6px var(--accent-glow));transform:scale(1.15)}.nav-item.active:after{content:"";background:var(--accent-gold-end);width:12px;height:3px;box-shadow:0 0 8px var(--accent-gold-end);border-radius:2px;position:absolute;bottom:6px}.video-promo-card{background:var(--bg-secondary);border-radius:var(--border-radius-lg);border:1px solid var(--glass-border);margin-bottom:20px;position:relative;overflow:hidden;box-shadow:0 8px 32px #0006}.promo-title-group{padding:16px}.promo-tag{color:#090a0f;background:linear-gradient(135deg, var(--accent-gold-start) 0%, var(--accent-gold-end) 100%);text-transform:uppercase;letter-spacing:.5px;border-radius:4px;margin-bottom:8px;padding:3px 8px;font-size:10px;font-weight:700;display:inline-block}.promo-title{color:var(--text-primary);margin-bottom:6px;font-size:18px;font-weight:700}.promo-desc{color:var(--text-secondary);font-size:13px}.player-container{aspect-ratio:16/9;background:#000;width:100%;position:relative;overflow:hidden}.player-video{object-fit:contain;width:100%;height:100%;display:block}.lock-overlay{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);text-align:center;z-index:10;background:#090a0fd9;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex;position:absolute;top:0;left:0}.lock-icon{color:var(--accent-gold-end);filter:drop-shadow(0 0 10px var(--accent-glow));margin-bottom:12px;font-size:40px;animation:2s infinite pulse}@keyframes pulse{0%{transform:scale(1)}50%{filter:drop-shadow(0 0 16px var(--accent-glow));transform:scale(1.08)}to{transform:scale(1)}}.lock-title{margin-bottom:6px;font-size:16px;font-weight:700}.lock-desc{color:var(--text-secondary);max-width:80%;margin-bottom:16px;font-size:12px}.unlock-btn{background:linear-gradient(135deg, var(--accent-gold-start) 0%, var(--accent-gold-end) 100%);color:#090a0f;cursor:pointer;box-shadow:0 4px 15px var(--accent-glow);transition:var(--transition-smooth);border:none;border-radius:30px;padding:10px 24px;font-size:13px;font-weight:700}.unlock-btn:hover{box-shadow:0 6px 20px var(--accent-glow);transform:translateY(-2px)}.section-header{justify-content:space-between;align-items:center;margin-top:10px;margin-bottom:16px;display:flex}.section-header h2{align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.section-header h2:before{content:"";background:var(--accent-gold-end);width:4px;height:18px;box-shadow:0 0 8px var(--accent-gold-end);border-radius:2px;display:inline-block}.course-card{background:var(--bg-secondary);border-radius:var(--border-radius-md);border:1px solid var(--glass-border);transition:var(--transition-smooth);margin-bottom:16px;overflow:hidden}.course-card:hover{border-color:#f5b0414d;transform:translateY(-3px);box-shadow:0 8px 24px #0000004d}.course-cover-wrap{aspect-ratio:16/9;background:#20222a;width:100%;position:relative}.course-cover{object-fit:cover;width:100%;height:100%}.course-badge{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000000a6;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:600;display:flex;position:absolute;top:12px;right:12px}.badge-free{color:#2ecc71}.badge-premium{color:var(--accent-gold-end)}.course-body{padding:16px}.course-card-title{color:var(--text-primary);-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-bottom:6px;font-size:15px;font-weight:700;display:-webkit-box;overflow:hidden}.course-card-desc{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:12px;font-size:12px;display:-webkit-box;overflow:hidden}.course-footer{border-top:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding-top:12px;display:flex}.course-info-meta{color:var(--text-muted);font-size:11px}.course-price-tag{color:var(--accent-gold-end);font-size:16px;font-weight:700}.course-price-free{color:#2ecc71;font-size:15px;font-weight:700}.profile-card{border-radius:var(--border-radius-lg);border:1px solid var(--glass-border);text-align:center;background:linear-gradient(135deg,#161720 0%,#0d0e14 100%);margin-bottom:24px;padding:24px;position:relative;overflow:hidden;box-shadow:0 8px 32px #0000004d}.profile-card:before{content:"";pointer-events:none;background:radial-gradient(circle,#f5b0410f 0%,#0000 60%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.avatar-container{background:linear-gradient(135deg, var(--accent-gold-start) 0%, var(--accent-gold-end) 100%);width:80px;height:80px;box-shadow:0 4px 20px var(--accent-glow);border:2px solid #fff3;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 16px;font-size:36px;display:flex}.avatar-placeholder{background:var(--bg-tertiary);border:1px solid var(--glass-border);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 16px;font-size:32px;display:flex}.profile-name{margin-bottom:4px;font-size:18px;font-weight:700}.profile-uid{color:var(--text-muted);font-family:monospace;font-size:11px}.profile-action-btn{color:var(--text-primary);border:1px solid var(--glass-border);cursor:pointer;transition:var(--transition-smooth);background:0 0;border-radius:20px;margin-top:16px;padding:8px 20px;font-size:12px}.profile-action-btn:hover{border-color:var(--text-secondary);background:#ffffff0d}.stats-container{justify-content:center;gap:16px;margin-top:20px;display:flex}.stat-box{border:1px solid var(--glass-border);border-radius:var(--border-radius-md);background:#ffffff05;flex:1;padding:12px 24px}.stat-value{color:var(--accent-gold-end);margin-bottom:2px;font-size:18px;font-weight:700}.stat-label{color:var(--text-secondary);font-size:11px}.help-section{background:var(--bg-secondary);border-radius:var(--border-radius-md);border:1px solid var(--glass-border);margin-bottom:16px;padding:16px}.help-title{align-items:center;gap:6px;margin-bottom:8px;font-size:13px;font-weight:700;display:flex}.help-list{color:var(--text-secondary);font-size:11px;list-style:none}.help-list li{margin-bottom:6px;padding-left:14px;position:relative}.help-list li:before{content:"✦";color:var(--accent-gold-end);position:absolute;left:0}.modal-backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.modal-content{background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--border-radius-lg);width:100%;max-width:400px;padding:24px;animation:.3s cubic-bezier(.175,.885,.32,1.275) modalScale;position:relative;box-shadow:0 20px 50px #00000080}@keyframes modalScale{0%{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-close{color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;font-size:20px;position:absolute;top:16px;right:16px}.modal-close:hover{color:var(--text-primary)}.modal-body{text-align:center;padding:10px 0}.modal-icon{color:var(--accent-gold-end);margin-bottom:12px;font-size:48px}.modal-title{margin-bottom:10px;font-size:18px;font-weight:700}.modal-desc{color:var(--text-secondary);margin-bottom:20px;font-size:13px}.modal-actions{flex-direction:column;gap:10px;display:flex}.modal-primary-btn{background:linear-gradient(135deg, var(--accent-gold-start) 0%, var(--accent-gold-end) 100%);color:#090a0f;cursor:pointer;box-shadow:0 4px 15px var(--accent-glow);transition:var(--transition-smooth);border:none;border-radius:30px;padding:12px 20px;font-size:14px;font-weight:700}.modal-primary-btn:hover{box-shadow:0 6px 20px var(--accent-glow);transform:translateY(-1px)}.modal-secondary-btn{color:var(--text-secondary);border:1px solid var(--glass-border);cursor:pointer;transition:var(--transition-smooth);background:0 0;border-radius:30px;padding:12px 20px;font-size:13px}.modal-secondary-btn:hover{color:var(--text-primary);background:#ffffff0d}.qr-container{border-radius:var(--border-radius-md);background:#fff;margin:10px 0 16px;padding:12px;display:inline-block;box-shadow:0 8px 24px #00000026}.qr-image{width:180px;height:180px;display:block}.skeleton{background:linear-gradient(90deg,#14161f 25%,#1e212d 50%,#14161f 75%) 0 0/200% 100%;border-radius:4px;animation:1.5s infinite loading}.skeleton-text{height:12px;margin-bottom:8px}.skeleton-title{width:70%;height:20px;margin-bottom:12px}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}@media screen and (orientation:landscape){.app-container{max-width:100%}}