/* ========================================
   m4-header.css - 顶部导航样式 (Mobile-first)
   ======================================== */

.topbar{background:rgba(11,13,23,.95);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);}
.topbar-inner{display:flex;align-items:center;max-width:1200px;margin:0 auto;padding:0 12px;height:52px;gap:12px;}
.logo{font-size:17px;font-weight:800;color:#fff;letter-spacing:1px;background:linear-gradient(135deg,#e94560,#f5c518);-webkit-background-clip:text;-webkit-text-fill-color:transparent;flex-shrink:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav{flex:1 1 auto;display:flex;gap:4px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;padding:4px 0;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.nav a{flex:0 0 auto;display:block;padding:5px 10px;font-size:12px;color:#8a8aa0;border-radius:20px;transition:all .2s;white-space:nowrap;}
.nav a:hover{background:rgba(233,69,96,.12);color:#e94560;}
.nav a.active{background:#e94560;color:#fff;}

/* ========== 平板 (≥768px) ========== */
@media(min-width:768px){
    .topbar-inner{padding:0 20px;height:60px;}
    .logo{font-size:20px;max-width:160px;}
    .nav{overflow-x:auto;white-space:nowrap;gap:4px;padding:0;}
    .nav a{font-size:13px;padding:7px 16px;}
}

/* ========== 桌面 (≥960px) ========== */
@media(min-width:960px){
    .topbar-inner{padding:0 20px;}
}