@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--bg-base:#f5f6fa;--bg-surface:#fff;--bg-element:#f0f1f8;--bg-input:#f5f6fa;--bg-sidebar:#fff;--primary:#6c5ce7;--primary-dark:#5a4dd1;--primary-soft:#6c5ce71a;--primary-soft2:#6c5ce726;--accent:#6c5ce7;--accent-soft:#6c5ce714;--border:#e8e9f0;--border-hover:#d0d1e0;--text-main:#1a1a2e;--text-muted:#a0a3b1;--text-secondary:#6b6f80;--success:#00b894;--error:#e17055;--warning:#fdcb6e;--info:#0984e3;--radius:10px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--font-main:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 12px #0000000f, 0 2px 4px #0000000a;--shadow-lg:0 8px 24px #00000014, 0 4px 8px #0000000a;--shadow-card:0 2px 8px #6c5ce70f}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-base);color:var(--text-main);font-size:14px;line-height:1.5;overflow-x:hidden}.app-shell{background:var(--bg-base);min-height:100vh;display:flex}.sidebar{background:var(--bg-surface);border-right:1px solid var(--border);z-index:50;width:240px;height:100vh;box-shadow:var(--shadow-sm);flex-direction:column;padding:1.75rem 1.25rem;display:flex;position:fixed;overflow-y:auto}.sidebar-logo{align-items:center;gap:.625rem;margin-bottom:2.25rem;padding:0 .5rem;display:flex}.sidebar-logo-icon{background:var(--primary);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:1rem;display:flex}.sidebar-logo h2{color:var(--text-main);letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.sidebar-section-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-top:1.25rem;margin-bottom:.625rem;padding:0 .625rem;font-size:.65rem;font-weight:700}.main-content{flex-direction:column;flex:1;min-height:100vh;margin-left:240px;display:flex}.main-body{flex:1;display:flex;overflow:hidden}.main-center{flex:1;min-width:0;padding:1.75rem 2rem;overflow-y:auto}.right-panel{background:var(--bg-surface);border-left:1px solid var(--border);flex-shrink:0;width:300px;padding:1.75rem 1.25rem;overflow-y:auto}.top-header{background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:40;align-items:center;gap:1rem;padding:1rem 2rem;display:flex;position:sticky;top:0}.search-bar{background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-full);max-width:480px;color:var(--text-muted);flex:1;align-items:center;gap:.625rem;padding:.5rem 1rem;font-size:.875rem;display:flex}.search-bar input{font-family:var(--font-main);color:var(--text-main);background:0 0;border:none;outline:none;flex:1;font-size:.875rem}.search-bar input::placeholder{color:var(--text-muted)}.header-actions{align-items:center;gap:.75rem;margin-left:auto;display:flex}.icon-btn{border:1px solid var(--border);background:var(--bg-surface);cursor:pointer;width:40px;height:40px;color:var(--text-secondary);border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;transition:all .2s;display:flex}.icon-btn:hover{background:var(--bg-element);border-color:var(--border-hover)}.user-profile{cursor:pointer;border-radius:var(--radius-full);align-items:center;gap:.625rem;padding:.25rem .5rem;transition:background .2s;display:flex}.user-profile:hover{background:var(--bg-element)}.avatar{color:#fff;background:linear-gradient(135deg,#a29bfe,#6c5ce7);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.875rem;font-weight:700;display:flex}.avatar-sm{width:32px;height:32px;font-size:.75rem}.avatar-xs{width:28px;height:28px;font-size:.7rem}.nav-link{color:var(--text-secondary);border-radius:var(--radius);align-items:center;gap:.75rem;margin-bottom:.125rem;padding:.625rem .75rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .18s;display:flex;position:relative}.nav-link:hover{background:var(--bg-element);color:var(--text-main)}.nav-link.active{background:var(--primary-soft);color:var(--primary);font-weight:600}.nav-icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;font-size:1rem;display:flex}.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.25rem;transition:all .2s}.card:hover{box-shadow:var(--shadow-md)}.hero-banner{border-radius:var(--radius-xl);color:#fff;background:linear-gradient(135deg,#7c6ee6 0%,#6c5ce7 40%,#5a4dd1 100%);margin-bottom:1.5rem;padding:2rem 2.5rem;position:relative;overflow:hidden}.hero-banner:before{content:"";background:#ffffff14;border-radius:50%;width:200px;height:200px;position:absolute;top:-40px;right:-40px}.hero-banner:after{content:"";background:#ffffff0d;border-radius:50%;width:160px;height:160px;position:absolute;bottom:-60px;right:60px}.hero-banner .sparkle{opacity:.25;pointer-events:none;z-index:0;font-size:5rem;position:absolute;top:50%;right:80px;transform:translateY(-50%)}.hero-banner .online-course-tag{letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem;font-size:.7rem;font-weight:700}.hero-banner h2{z-index:1;margin-bottom:1.25rem;font-size:1.6rem;font-weight:800;line-height:1.25;position:relative}.btn-hero{color:#fff;border-radius:var(--radius-full);cursor:pointer;z-index:1;background:#1a1a2e;border:none;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;transition:transform .2s;display:inline-flex;position:relative}.btn-hero:hover{transform:scale(1.03)}.btn-hero .arrow-circle{color:#1a1a2e;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:.75rem;display:flex}.course-pills{gap:1rem;margin-bottom:1.75rem;display:flex}.course-pill{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;flex:1;align-items:center;gap:.875rem;padding:.875rem 1rem;transition:all .2s;display:flex;position:relative}.course-pill:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover)}.course-pill-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;display:flex}.course-pill-icon.purple{color:#7c3aed;background:#ede9fe}.course-pill-icon.pink{color:#be185d;background:#fce7f3}.course-pill-icon.blue{color:#1d4ed8;background:#dbeafe}.course-pill-info{flex:1;min-width:0}.course-pill-progress{color:var(--text-muted);margin-bottom:.15rem;font-size:.7rem}.course-pill-name{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:600;overflow:hidden}.course-pill-menu{color:var(--text-muted);padding:.25rem;font-size:1rem}.section-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.section-header h3{color:var(--text-main);font-size:1rem;font-weight:700}.section-nav-btns{gap:.5rem;display:flex}.nav-circle-btn{border:1px solid var(--border);background:var(--bg-surface);cursor:pointer;width:32px;height:32px;color:var(--text-secondary);border-radius:50%;justify-content:center;align-items:center;font-size:.75rem;transition:all .2s;display:flex}.nav-circle-btn:hover,.nav-circle-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.course-cards-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2rem;display:grid}.course-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;color:inherit;text-decoration:none;transition:all .2s;display:block;overflow:hidden}.course-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.course-card-thumb{aspect-ratio:16/9;object-fit:cover;background:#ddd;width:100%;position:relative;overflow:hidden}.course-card-thumb img{object-fit:cover;width:100%;height:100%}.course-card-fav{width:28px;height:28px;box-shadow:var(--shadow-sm);color:var(--text-muted);cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:.8rem;transition:all .2s;display:flex;position:absolute;top:.625rem;right:.625rem}.course-card-fav:hover{color:#e17055;transform:scale(1.1)}.course-card-body{padding:.875rem}.course-category-tag{letter-spacing:.06em;text-transform:uppercase;border-radius:4px;align-items:center;gap:.25rem;margin-bottom:.5rem;padding:.2rem .5rem;font-size:.65rem;font-weight:700;display:inline-flex}.course-category-tag.blue{color:#1d4ed8;background:#dbeafe}.course-category-tag.purple{color:#7c3aed;background:#ede9fe}.course-category-tag.pink{color:#be185d;background:#fce7f3}.course-card-title{color:var(--text-main);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:.75rem;font-size:.875rem;font-weight:600;line-height:1.4;display:-webkit-box;overflow:hidden}.course-card-divider{background:linear-gradient(to right, var(--primary), transparent);border-radius:2px;height:2px;margin-bottom:.75rem}.course-card-author{align-items:center;gap:.5rem;display:flex}.course-card-author .avatar{background:linear-gradient(135deg,#fdcb6e,#e17055);width:24px;height:24px;font-size:.65rem}.course-card-author span{color:var(--text-main);font-size:.75rem;font-weight:500}.course-card-author .role{color:var(--text-muted);font-size:.7rem}.lesson-table{border-collapse:collapse;width:100%}.lesson-table th{text-align:left;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);border-bottom:1px solid var(--border);padding:.625rem 1rem;font-size:.7rem;font-weight:700}.lesson-table td{border-bottom:1px solid var(--border);padding:.875rem 1rem;font-size:.875rem}.lesson-table tr:last-child td{border-bottom:none}.lesson-table tr:hover td{background:var(--bg-element)}.lesson-action-btn{border:1px solid var(--border);cursor:pointer;width:28px;height:28px;color:var(--text-secondary);background:0 0;border-radius:50%;justify-content:center;align-items:center;font-size:.75rem;transition:all .2s;display:flex}.lesson-action-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.stat-panel-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.stat-panel-header h3{font-size:1rem;font-weight:700}.more-btn{cursor:pointer;width:28px;height:28px;color:var(--text-muted);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;transition:background .2s;display:flex}.more-btn:hover{background:var(--bg-element)}.donut-wrapper{justify-content:center;margin-bottom:1rem;display:flex}.donut-container{width:100px;height:100px;position:relative}.donut-container svg{transform:rotate(-90deg)}.donut-label{color:var(--primary);justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:flex;position:absolute;inset:0}.user-profile-center{text-align:center;border-bottom:1px solid var(--border);margin-bottom:1.5rem;padding-bottom:1.5rem}.user-profile-center .avatar-lg{background:linear-gradient(135deg,#a29bfe,#6c5ce7);width:64px;height:64px;margin:0 auto .875rem;font-size:1.25rem}.user-profile-center h4{margin-bottom:.25rem;font-size:.9375rem;font-weight:700}.user-profile-center p{color:var(--text-muted);font-size:.75rem}.bar-chart{margin-bottom:1.5rem;padding:.5rem 0}.bar-chart-bars{align-items:flex-end;gap:.5rem;height:80px;margin-bottom:.5rem;display:flex}.bar-group{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:2px;height:100%;display:flex}.bar{background:#ddd;border-radius:4px 4px 0 0;width:100%;max-width:20px;transition:all .3s}.bar.active{background:var(--primary)}.bar.light{background:#c7c2f5}.bar-labels{gap:.5rem;display:flex}.bar-label{text-align:center;color:var(--text-muted);flex:1;font-size:.6rem}.bar-y-labels{flex-direction:column;justify-content:space-between;height:80px;margin-right:.25rem;display:flex}.bar-y-label{color:var(--text-muted);font-size:.6rem}.mentor-section{border-top:1px solid var(--border);padding-top:1.25rem}.mentor-section-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.mentor-section-header h4{font-size:.9375rem;font-weight:700}.add-btn{border:1px solid var(--border);cursor:pointer;width:26px;height:26px;color:var(--text-secondary);background:0 0;border-radius:50%;justify-content:center;align-items:center;font-size:.875rem;transition:all .2s;display:flex}.add-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.mentor-item{border-bottom:1px solid var(--border);align-items:center;gap:.75rem;padding:.5rem 0;display:flex}.mentor-item:last-child{border-bottom:none}.mentor-info{flex:1;min-width:0}.mentor-name{color:var(--text-main);font-size:.8125rem;font-weight:600}.mentor-role{color:var(--text-muted);font-size:.7rem}.follow-btn{border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-main);cursor:pointer;background:0 0;align-items:center;gap:.25rem;padding:.3rem .75rem;font-size:.7rem;font-weight:600;transition:all .2s;display:inline-flex}.follow-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.see-all-btn{background:var(--primary-soft);width:100%;color:var(--primary);border-radius:var(--radius);cursor:pointer;border:none;margin-top:1rem;padding:.625rem;font-size:.8125rem;font-weight:600;transition:all .2s}.see-all-btn:hover{background:var(--primary);color:#fff}.friend-item{border-radius:var(--radius);cursor:pointer;align-items:center;gap:.625rem;padding:.375rem .5rem;transition:background .18s;display:flex}.friend-item:hover{background:var(--bg-element)}.friend-info{flex:1;min-width:0}.friend-name{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;font-weight:600;overflow:hidden}.friend-status{color:var(--text-muted);font-size:.7rem}.btn{font-family:var(--font-main);border-radius:var(--radius-full);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1.125rem;font-size:.8125rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #6c5ce74d}.btn-secondary{color:var(--text-main);border-color:var(--border);background:0 0}.btn-secondary:hover{border-color:var(--border-hover);background:var(--bg-element)}h1{letter-spacing:-.03em;font-size:1.75rem;font-weight:700}h2{letter-spacing:-.02em;font-size:1.375rem;font-weight:700}h3{font-size:1rem;font-weight:600}.form-group{margin-bottom:1.25rem}.form-group label{color:var(--text-main);margin-bottom:.375rem;font-size:.8125rem;font-weight:600;display:block}.form-group input,.form-group select,.form-group textarea{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text-main);font-family:var(--font-main);outline:none;padding:.625rem .875rem;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.form-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.progress-track{background:var(--bg-element);border-radius:var(--radius-full);height:4px;overflow:hidden}.progress-fill{background:var(--primary);border-radius:var(--radius-full);height:100%;transition:width .5s}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}[data-theme=dark]{--bg-base:#0f0f13;--bg-surface:#18181f;--bg-element:#22222c;--bg-input:#1c1c24;--bg-sidebar:#18181f;--border:#2e2e3a;--border-hover:#44445a;--text-main:#f0f0f8;--text-secondary:#a0a3c0;--text-muted:#6b6e8a;--primary-soft:#6c5ce726;--primary-soft2:#6c5ce738;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0000004d;--shadow-lg:0 8px 24px #00000059}[data-theme=dark] .card:hover{background:var(--bg-element)}[data-theme=dark] .hero-banner{background:linear-gradient(135deg,#5a4dd1 0%,#4a3db8 100%)}[data-theme=dark] .course-card,[data-theme=dark] .top-header{background:var(--bg-surface)}[data-theme=dark] .sidebar{background:var(--bg-sidebar)}[data-theme=dark] .right-panel{background:var(--bg-surface)}@media (width<=1024px){.right-panel{display:none}.main-center{padding:1.5rem}.course-cards-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.sidebar{z-index:200;transition:transform .3s;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}.top-header{padding:.875rem 1rem}.course-cards-grid{grid-template-columns:1fr}.course-pills{flex-direction:column;gap:.75rem}.main-center{padding:1rem}.hero-banner{padding:1.5rem}.hero-banner h2{font-size:1.25rem}}@media (width<=480px){.header-actions .user-profile span{display:none}}.text-primary{color:var(--primary)}.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-error{color:var(--error)}.fw-700{font-weight:700}.flex-center{justify-content:center;align-items:center;display:flex}.animate-up{animation:.35s cubic-bezier(.16,1,.3,1) slideUp}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}button{font-family:var(--font-main)}