*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#f5f7fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#app{min-height:100vh;padding-bottom:60px}.header{z-index:100;background:#fff;border-bottom:1px solid #eee;justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.header-left{width:60px}.menu-btn{cursor:pointer;color:#333;background:0 0;border:none;padding:4px 8px;font-size:24px}.header-title{color:#333;font-size:18px;font-weight:600}.header-right{justify-content:flex-end;width:80px;display:flex}.login-btn{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:16px;padding:6px 16px;font-size:14px}.user-avatar{color:#fff;cursor:pointer;background:#4a90e2;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex;overflow:hidden}.user-avatar img{object-fit:cover;width:100%;height:100%}.search-bar{background:#fff;border-bottom:1px solid #eee;align-items:center;padding:12px 16px;display:flex}.search-input{background:#f5f7fa;border-radius:20px;flex:1;align-items:center;padding:8px 16px;display:flex}.search-icon{margin-right:8px;font-size:16px}.search-input input{background:0 0;border:none;outline:none;flex:1;font-size:14px}.content{padding-bottom:20px}.banner{height:200px;position:relative;overflow:hidden}.banner img{object-fit:cover;width:100%;height:100%}.banner-overlay{color:#fff;background:linear-gradient(#0003,#00000080);flex-direction:column;justify-content:center;padding:0 30px;display:flex;position:absolute;inset:0}.banner-title{margin-bottom:8px;font-size:28px;font-weight:700}.banner-subtitle{opacity:.9;font-size:16px}.stats-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px;padding:20px 16px;display:grid;box-shadow:0 4px 12px #667eea4d}.stat-item{text-align:center}.stat-value{color:#fff;margin-bottom:6px;font-size:28px;font-weight:700}.stat-label{color:#ffffffe6;font-size:12px}.section{background:#fff;margin-top:12px;padding:16px}.section-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.section-title{color:#333;font-size:18px;font-weight:600}.course-count{color:#999;font-size:14px;font-weight:400}.clear-filter-btn{color:#666;cursor:pointer;background:#f0f2f5;border:none;border-radius:16px;padding:6px 12px;font-size:12px}.category-list{flex-wrap:wrap;gap:12px;display:flex}.category-item{cursor:pointer;background:#f5f7fa;border-radius:20px;align-items:center;gap:6px;padding:8px 16px;transition:all .2s;display:flex}.category-item:hover{background:#e9ecef}.category-item.active{color:#fff;background:#4a90e2}.category-icon{font-size:18px}.category-name{font-size:14px}.course-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;display:grid}.course-card{cursor:pointer;background:#fff;border-radius:8px;transition:all .3s;overflow:hidden;box-shadow:0 2px 8px #0000000d}.course-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px #0000001a}.course-cover{background:#f0f2f5;width:100%;height:150px;overflow:hidden}.course-cover img{object-fit:cover;width:100%;height:100%}.placeholder{color:#999;justify-content:center;align-items:center;width:100%;height:100%;font-size:12px;display:flex}.course-info{padding:12px}.course-title{color:#333;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:6px;font-size:15px;font-weight:600;display:-webkit-box;overflow:hidden}.course-summary{color:#666;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:8px;font-size:13px;display:-webkit-box;overflow:hidden}.course-meta{gap:12px;font-size:12px;display:flex}.meta-item{color:#999}.loading,.empty{text-align:center;color:#999;padding:60px 20px;font-size:16px}.my-learning-view,.profile-view{padding:16px}.page-title{color:#333;margin-bottom:20px;font-size:24px;font-weight:600}.not-logged-in{text-align:center;padding:60px 20px}.not-logged-in p{color:#999;margin-bottom:20px;font-size:16px}.primary-btn{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:24px;padding:12px 32px;font-size:16px}.progress-list{flex-direction:column;gap:16px;display:flex}.progress-item{cursor:pointer;background:#fff;border-radius:8px;gap:16px;padding:16px;display:flex;box-shadow:0 2px 8px #0000000d}.progress-cover{object-fit:cover;border-radius:8px;width:120px;height:80px}.progress-info{flex:1}.progress-title{color:#333;margin-bottom:12px;font-size:16px;font-weight:600}.progress-bar{background:#f0f2f5;border-radius:3px;width:100%;height:6px;margin-bottom:8px;overflow:hidden}.progress-fill{background:#4a90e2;height:100%;transition:width .3s}.progress-text{color:#999;font-size:12px}.profile-content{flex-direction:column;gap:20px;display:flex}.user-info-card{text-align:center;background:#fff;border-radius:12px;padding:32px;box-shadow:0 2px 8px #0000000d}.user-avatar-large{color:#fff;background:#4a90e2;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 16px;font-size:32px;display:flex;overflow:hidden}.user-avatar-large img{object-fit:cover;width:100%;height:100%}.user-nickname{color:#333;margin-bottom:8px;font-size:20px;font-weight:600}.user-phone{color:#999;font-size:14px}.edit-profile-btn{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:20px;margin-top:16px;padding:8px 24px;font-size:14px;transition:background .2s}.edit-profile-btn:hover{background:#357abd}.menu-list{background:#f0f2f5;border-radius:8px;flex-direction:column;gap:1px;display:flex;overflow:hidden}.menu-item{cursor:pointer;background:#fff;justify-content:space-between;align-items:center;padding:16px;display:flex}.menu-item:hover{background:#f8f9fa}.arrow{color:#ccc;font-size:20px}.bottom-nav{z-index:100;background:#fff;border-top:1px solid #eee;padding:8px 0;display:flex;position:fixed;bottom:0;left:0;right:0}.nav-item{cursor:pointer;color:#999;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:4px;display:flex}.nav-item.active{color:#4a90e2}.nav-icon{font-size:22px}.nav-label{font-size:11px}.modal{z-index:1000;background:#0009;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:12px;width:100%;max-width:600px;max-height:80vh;padding:24px;position:relative;overflow-y:auto}.close-btn{color:#999;cursor:pointer;background:0 0;border:none;font-size:28px;line-height:1;position:absolute;top:12px;right:12px}.close-btn:hover{color:#333}@media (width<=768px){.stats-card{grid-template-columns:repeat(2,1fr)}.course-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}.modal[data-v-ebd260ae]{z-index:1000;background:#0009;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content[data-v-ebd260ae]{background:#fff;border-radius:12px;width:100%;max-width:600px;max-height:80vh;padding:24px;position:relative;overflow-y:auto}.close-btn[data-v-ebd260ae]{color:#999;cursor:pointer;background:0 0;border:none;font-size:32px;line-height:1;position:absolute;top:12px;right:12px}.detail-hero[data-v-ebd260ae]{margin-bottom:24px}.detail-cover[data-v-ebd260ae]{object-fit:cover;border-radius:8px;width:100%;height:200px;margin-bottom:16px}.detail-title[data-v-ebd260ae]{color:#333;margin-bottom:8px;font-size:20px}.detail-summary[data-v-ebd260ae]{color:#666;font-size:14px;line-height:1.6}.detail-tabs[data-v-ebd260ae]{border-bottom:2px solid #f0f0f0;margin-bottom:20px;display:flex}.tab-btn[data-v-ebd260ae]{color:#666;cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;flex:1;padding:12px;font-size:15px}.tab-btn.active[data-v-ebd260ae]{color:#4a90e2;border-bottom-color:#4a90e2;font-weight:600}.tab-content[data-v-ebd260ae]{min-height:200px}.load-btn[data-v-ebd260ae]{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:8px;width:100%;padding:12px}.chapter-list[data-v-ebd260ae]{flex-direction:column;gap:8px;display:flex}.chapter-item[data-v-ebd260ae]{cursor:pointer;background:#f8f9fa;border-radius:8px;align-items:center;padding:12px;transition:background .2s;display:flex}.chapter-item[data-v-ebd260ae]:hover{background:#e9ecef}.chapter-number[data-v-ebd260ae]{color:#fff;background:#4a90e2;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;margin-right:12px;font-weight:700;display:flex}.chapter-info[data-v-ebd260ae]{flex:1}.chapter-title[data-v-ebd260ae]{color:#333;margin-bottom:4px;font-size:14px}.chapter-duration[data-v-ebd260ae]{color:#999;font-size:12px}.play-icon[data-v-ebd260ae]{color:#4a90e2;font-size:16px}.intro-content[data-v-ebd260ae]{color:#333;background:#f8f9fa;border-radius:8px;padding:16px;line-height:1.8}.video-player[data-v-8f88f3c2]{width:100%;position:relative}video[data-v-8f88f3c2]{background:#000;border-radius:8px;width:100%;height:auto}.progress-info[data-v-8f88f3c2]{color:#666;text-align:center;margin-top:8px;font-size:14px}.video-modal[data-v-e4d2ef48]{z-index:2000;background:#000000e6;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.video-modal-content[data-v-e4d2ef48]{background:#1a1a1a;border-radius:12px;width:100%;max-width:900px;padding:24px;position:relative}.close-btn[data-v-e4d2ef48]{color:#fff;cursor:pointer;z-index:10;background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:28px;display:flex;position:absolute;top:12px;right:12px}.close-btn[data-v-e4d2ef48]:hover{background:#fff3}.video-title[data-v-e4d2ef48]{color:#fff;margin-bottom:16px;font-size:18px}.video-info[data-v-e4d2ef48]{color:#ccc;margin-top:16px;font-size:14px}.course-name[data-v-e4d2ef48]{margin-bottom:8px}.chapter-duration[data-v-e4d2ef48]{color:#999}.login-modal[data-v-87a13a55]{max-width:400px}.login-title[data-v-87a13a55]{color:#333;text-align:center;margin-bottom:8px;font-size:24px}.login-subtitle[data-v-87a13a55]{color:#999;text-align:center;margin-bottom:32px;font-size:14px}.login-form[data-v-87a13a55]{flex-direction:column;gap:16px;display:flex}.form-group[data-v-87a13a55]{flex-direction:column;gap:8px;display:flex}.form-group label[data-v-87a13a55]{color:#666;font-size:14px}.required[data-v-87a13a55]{color:#f56c6c}.form-group input[data-v-87a13a55]{border:1px solid #ddd;border-radius:8px;outline:none;padding:12px;font-size:14px}.form-group input[data-v-87a13a55]:focus{border-color:#4a90e2}.submit-btn[data-v-87a13a55]{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:8px;margin-top:8px;padding:14px;font-size:16px;transition:background .2s}.submit-btn[data-v-87a13a55]:hover:not(:disabled){background:#357abd}.submit-btn[data-v-87a13a55]:disabled{opacity:.6;cursor:not-allowed}.switch-mode[data-v-87a13a55]{text-align:center;color:#666;font-size:14px}.switch-mode a[data-v-87a13a55]{color:#4a90e2;text-decoration:none}.switch-mode a[data-v-87a13a55]:hover{text-decoration:underline}.login-tips[data-v-87a13a55]{color:#999;text-align:center;margin-top:16px;font-size:12px;line-height:1.6}.edit-profile-modal[data-v-074f1a0f]{max-width:500px}.modal-title[data-v-074f1a0f]{color:#333;text-align:center;margin-bottom:24px;font-size:20px}.edit-form[data-v-074f1a0f]{flex-direction:column;gap:20px;display:flex}.form-group[data-v-074f1a0f]{flex-direction:column;gap:8px;display:flex}.form-group label[data-v-074f1a0f]{color:#666;font-size:14px;font-weight:500}.required[data-v-074f1a0f]{color:#f56c6c}.form-group input[data-v-074f1a0f]{border:1px solid #ddd;border-radius:8px;outline:none;padding:12px;font-size:14px}.form-group input[data-v-074f1a0f]:focus{border-color:#4a90e2}.avatar-group[data-v-074f1a0f]{align-items:center}.avatar-upload[data-v-074f1a0f]{flex-direction:column;align-items:center;gap:12px;display:flex}.avatar-preview[data-v-074f1a0f]{object-fit:cover;border:3px solid #f0f2f5;border-radius:50%;width:80px;height:80px}.avatar-placeholder[data-v-074f1a0f]{color:#fff;background:#4a90e2;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:32px;font-weight:700;display:flex}.upload-btn[data-v-074f1a0f]{color:#333;cursor:pointer;background:#f0f2f5;border:1px solid #ddd;border-radius:6px;padding:8px 20px;font-size:14px;transition:all .2s}.upload-btn[data-v-074f1a0f]:hover{background:#e8eaed;border-color:#4a90e2}.hint[data-v-074f1a0f]{color:#999;text-align:center;font-size:12px}.submit-btn[data-v-074f1a0f]{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:8px;margin-top:8px;padding:14px;font-size:16px;transition:background .2s}.submit-btn[data-v-074f1a0f]:hover:not(:disabled){background:#357abd}.submit-btn[data-v-074f1a0f]:disabled{opacity:.6;cursor:not-allowed}