﻿/* ========================================== 通用导航样式 - Universal Navigation Styles ========================================== */ .top-bar{background:#f8f9fa;padding:6px 0;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:1001;box-shadow:0 1px 3px rgba(0,0,0,0.05)}.top-bar .container{display:flex;align-items:center;justify-content:center;gap:20px;font-size:11px;color:#64748b}.top-bar-item{display:flex;align-items:center;gap:6px;padding:2px 8px;transition:color 0.3s ease}.top-bar-item:hover{color:#0ABAB5}.top-bar-item i{color:#0ABAB5;font-size:11px}.header{background:#f8f9fa !important;box-shadow:0 2px 8px rgba(0,0,0,0.08);position:sticky;top:30px;z-index:1000;border-bottom:1px solid #e5e7eb;transition:all 0.3s ease;height:65px;display:flex;align-items:center}.header .container{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:100%}.logo{font-size:28px;font-weight:bold;color:#0ABAB5;text-decoration:none;letter-spacing:1px;position:relative;display:inline-block;transition:color 0.3s ease}.logo:hover{color:#098F6D}.logo img{height:45px;width:auto}.nav{display:flex;align-items:center;gap:20px}.nav a{color:#1e293b !important;text-decoration:none;font-size:14px;font-weight:500;transition:color 0.3s ease;position:relative;padding:6px 12px;white-space:nowrap}.nav a::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:#0ABAB5;transition:width 0.3s ease}.nav a:hover{color:#0ABAB5}.nav a:hover::after{width:80%}.nav .dropdown{position:relative}.nav .dropdown-btn{display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 12px;transition:color 0.3s ease;color:#1e293b !important;font-size:14px;white-space:nowrap;text-decoration:none}.nav .dropdown-btn i{transition:transform 0.3s ease}.nav .dropdown:hover .dropdown-btn{color:#0ABAB5}.nav .dropdown:hover .dropdown-btn i{transform:rotate(180deg)}.nav .dropdown-content{position:absolute;top:calc(100% + 10px);left:0;background:white;min-width:220px;box-shadow:0 8px 24px rgba(0,0,0,0.12);border-radius:12px;padding:12px 0;display:none;border:1px solid #e5e7eb;z-index:9999}.nav .dropdown:hover .dropdown-content{display:block}.nav .dropdown-content a{display:block;padding:10px 20px;color:#1e293b !important;font-size:14px;font-weight:500;margin:0;position:relative}.nav .dropdown-content a::after{display:none}.nav .dropdown-content a::before{content:'';position:absolute;left:0;top:0;width:3px;height:0;background:#0ABAB5;transition:height 0.3s ease}.nav .dropdown-content a:hover{background:rgba(10,186,181,0.08);color:#0ABAB5 !important}.nav .dropdown-content a:hover::before{height:100%}.mobile-menu-btn{display:none;background:none;border:none;font-size:24px;color:#1e293b;cursor:pointer;padding:8px;z-index:10000}/* ========================================== 响应式设计 - Responsive Design ========================================== */ @media (max-width:1024px){.header .container{padding:0 15px}.nav{gap:15px}.nav a{padding:6px 10px;font-size:13px}.nav .dropdown-btn{padding:6px 10px;font-size:13px}}@media (max-width:768px){.top-bar .container{flex-direction:column;gap:8px;font-size:10px;padding:4px 10px}.top-bar{padding:4px 0}.header{top:60px;height:60px}.header .container{padding:0 10px}.logo img{height:35px !important}.mobile-menu-btn{display:block}.nav{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.95);flex-direction:column;padding:80px 20px 20px;z-index:9999;overflow-y:auto;gap:0}.nav.active{display:flex}.nav a,.nav .dropdown-btn{color:white !important;padding:15px 20px;font-size:16px;width:100%;text-align:left;border-bottom:1px solid rgba(255,255,255,0.1)}.nav .dropdown{width:100%}.nav .dropdown-content{position:static;background:rgba(255,255,255,0.05);border:none;box-shadow:none;padding:10px 0;margin:0;display:none;min-width:auto}.nav .dropdown.active .dropdown-content{display:block}.nav .dropdown-content a{color:rgba(255,255,255,0.8) !important;padding:10px 20px 10px 30px;font-size:14px}.nav .dropdown-content a:hover{color:white !important;background:rgba(255,255,255,0.1)}}@media (max-width:480px){.top-bar-item{font-size:9px;padding:1px 4px;gap:4px}.top-bar-item i{font-size:9px}.logo img{height:30px !important}}