body{display:flex;flex-direction:column;font-family:Arial,sans-serif;margin:0;min-height:100vh;padding:0}.user-info{align-items:center;color:#fff;display:flex;font-weight:500;gap:10px;margin-left:20px}.user-dropdown{cursor:pointer}.username{border-radius:4px;padding:5px 10px;transition:all .3s}.user-dropdown:hover .username{background-color:#fff3}.dropdown-content{animation:fadeIn .15s ease-out;background-color:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 4px 12px #0000001f;display:none;left:0;min-width:180px;overflow:hidden;padding:8px 0;position:absolute;top:100%;z-index:1000}.user-dropdown,.username{display:inline-block;position:relative}.username{cursor:pointer;padding-right:20px}.username:after{color:#ffffffb3;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%);transition:all .2s}.user-dropdown:hover .username:after{transform:translateY(-50%) rotate(180deg)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-dropdown:hover .dropdown-content{display:block}.dropdown-item{align-items:center;background:none;border:none;color:#333;cursor:pointer;display:flex;font-size:14px;line-height:1.5;padding:10px 20px;text-align:left;text-decoration:none;transition:all .2s;width:100%}.dropdown-item:hover{background-color:#f5f5f5}.dropdown-item i{color:#666;font-size:14px;margin-right:12px;width:18px}.logout-item{border-top:1px solid #f0f0f0}.dropdown-item i{margin-right:8px;text-align:center;width:16px}.dropdown-item:hover{background-color:#f1f1f1}.logout-item{border-top:1px solid #eee;color:#ff4d4f}.logout-item:hover{background-color:#fff1f0}.user-info-mobile{align-items:center;color:#fff;display:flex;gap:10px}.my-courses-link{background-color:#1890ff;border-radius:4px;color:#fff;font-size:14px;padding:5px 10px;text-decoration:none;transition:all .3s}.my-courses-link:hover{background-color:#40a9ff;box-shadow:0 2px 8px #1890ff80}.username{font-weight:700}.logout-btn{background-color:#ff4d4f;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:5px 10px;transition:all .3s}.logout-btn:hover{background-color:#ff7875;box-shadow:0 2px 8px #ff4d4f80}.desktop-header{padding:15px 20px}.desktop-header,.mobile-header{background-color:#2c3e50;box-shadow:0 2px 5px #0000001a;color:#fff}.mobile-header{border-bottom:1px solid hsla(0,0%,100%,.1);display:none;left:0;padding:10px 15px;position:fixed;right:0;top:0;z-index:100}.header-content{align-items:center;display:flex;height:60px;justify-content:space-between;margin:0 auto;max-width:1200px}.desktop-nav{display:block}.nav-links{display:flex;list-style:none;margin:0;padding:0}.nav-links li{margin-left:25px}.nav-link{border-radius:4px;color:#fff;font-size:16px;font-weight:500;padding:8px 15px;text-decoration:none;transition:background-color .3s}.nav-link:hover,.router-link-active:not(.highlight-link){background-color:#fff3}.mobile-nav{background-color:#2c3e50;border-top:1px solid hsla(0,0%,100%,.1);bottom:0;box-shadow:0 -2px 5px #0000001a;display:none;left:0;padding:8px 0;position:fixed;right:0;z-index:100}.mobile-nav-links{display:flex;justify-content:space-around;list-style:none;margin:0;padding:0}.mobile-nav-link{align-items:center;color:#ffffffb3;display:flex;flex-direction:column;font-size:12px;padding:5px;text-align:center;text-decoration:none;transition:all .3s;width:100%}.mobile-nav-link i{font-size:22px;margin-bottom:4px}.mobile-nav-link.router-link-active{color:gold}.mobile-nav-link:active{transform:scale(.95)}.highlight-link.router-link-active{background-color:transparent;color:gold;text-shadow:0 0 3px rgba(255,215,0,.5)}.login-btn{margin-left:20px}.btn-primary{background-color:#1890ff;border-radius:4px;color:#fff;font-weight:500;padding:8px 16px;text-decoration:none;transition:all .3s}.btn-primary:hover{background-color:#40a9ff;box-shadow:0 2px 8px #1890ff80}.site-title{font-size:24px;font-weight:700;margin:0}.highlight-link{background-color:transparent;color:gold;font-weight:700;position:relative;text-shadow:0 0 2px rgba(0,0,0,.5)}.highlight-link:hover{background-color:#ffd70033;color:#ffdf40}.highlight-link:after{background-color:#ff4d4f;border-radius:10px;color:#fff;content:"热门";font-size:12px;font-weight:400;padding:2px 6px;position:absolute;right:-10px;top:-10px}main{flex:1;margin:0 auto;max-width:1200px;padding:20px}footer{background-color:#f8f9fa;border-top:1px solid #e9ecef;color:#6c757d;margin-top:30px;padding:15px;text-align:center}@media(max-width:768px){.desktop-header{display:none}.mobile-header{display:block;height:60px}.mobile-nav{display:flex}.site-title{font-size:20px}main{margin-bottom:80px;margin-top:80px;padding:15px}footer{font-size:12px;margin-bottom:70px;padding:10px}.highlight-link:after{font-size:10px;padding:1px 4px;right:-5px;top:-5px}.login-btn{margin-left:10px}.btn-primary{padding:6px 12px}.btn-primary,.user-info-mobile .username{font-size:14px}.logout-btn{font-size:12px;padding:4px 8px}.mobile-nav{height:60px;padding:5px 0}.mobile-nav-links{width:100%}.mobile-nav-link{padding:8px 0;position:relative}.mobile-nav-link.router-link-active:after{background-color:gold;border-radius:3px;bottom:0;content:"";height:3px;left:50%;position:absolute;transform:translate(-50%);width:30px}}@media(max-width:320px){.site-title{font-size:16px}.mobile-nav-link{font-size:10px}.mobile-nav-link i{font-size:16px}}