/* ============================================================
   Amu Music 全站统一顶栏样式 nav-common.css
   由官网 index.html 内联 nav 样式抽出（2026-10-01）。
   依赖 /tokens.css 的 CSS 变量。子页面（lab、tools…）一律：
     <link rel="stylesheet" href="/tokens.css">
     <link rel="stylesheet" href="/nav-common.css?v=YYYYMMDD">
   且放在页面自己的 css 之后。改顶栏只改这里。
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--tx);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,sans-serif;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* 导航 */
nav{
  position:sticky;top:0;z-index:50;background:rgba(14,17,22,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:700;letter-spacing:3px;white-space:nowrap;color:var(--tx)}
.logo-img{width:34px;height:34px;border-radius:50%;display:block;flex:none}
.logo-slogan{font-size:13px;font-weight:400;letter-spacing:1px;color:var(--tx2);margin-left:2px}
@media(max-width:900px){.logo-slogan{display:none}}
.logo-mark{
  width:32px;height:32px;border-radius:9px;background:var(--c);
  display:flex;align-items:center;justify-content:center;color:var(--on-brand);
  font-size:17px;font-weight:800;letter-spacing:0;
}
.nav-links{display:flex;gap:34px;font-size:15px;color:var(--tx2)}.nav-links a{white-space:nowrap}
.nav-links a:hover{color:var(--c)}
.nav-links a.active{color:var(--c);font-weight:600}
@media(max-width:1280px){.nav-links{display:none}}

/* 在线工具下拉 */
.nav-drop{position:relative}
.nav-drop>a{display:inline-flex;align-items:center;gap:5px}
.nav-drop .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-top:2px;transition:transform .2s}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:184px;margin-top:10px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 14px 34px rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.18s;z-index:60}
.nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{display:block;padding:10px 13px;border-radius:8px;color:var(--tx2);font-size:14px;white-space:nowrap}
.nav-drop-menu a:hover{background:var(--c-dim);color:var(--c)}

/* 移动端菜单 */
.mnav-btn{display:none;width:38px;height:38px;border:1px solid var(--line);background:var(--bg2);border-radius:10px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;flex:none;z-index:95}
.mnav-btn i{display:block;width:16px;height:2px;background:var(--tx);border-radius:2px;transition:.2s}
.mnav-btn.open i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mnav-btn.open i:nth-child(2){opacity:0}
.mnav-btn.open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav-panel{display:none;position:fixed;top:62px;left:10px;right:auto;width:min(250px,calc(100vw - 20px));background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:94}
.mnav-panel.open{display:block}
.mnav-panel a{display:block;padding:12px 14px;border-radius:9px;color:var(--tx2);font-size:15px;text-decoration:none}
.mnav-panel a:hover{background:var(--c-dim);color:var(--c)}
.mnav-panel a.active{color:var(--c);font-weight:700}
@media(max-width:1280px){.mnav-btn{display:inline-flex;margin-left:auto}.nav-in{padding-right:330px}.amu-avbtn .amu-name{max-width:100px}}
@media(max-width:640px){.mnav-btn{position:fixed;top:8px;left:10px}.nav-in{padding-left:58px}}

/* 与 widget 账号区共处的宽度修复（与官网 index.html 同源） */
.nav-in{justify-content:flex-start;gap:56px}
@media(min-width:1281px) and (max-width:1440px){.nav-in{gap:24px;padding-right:290px}.nav-links{gap:16px;font-size:14px}.logo-slogan{display:none}}
@media(max-width:860px){.nav-in{gap:18px}}
@media(max-width:640px){.nav-in{height:54px;padding-right:196px}.logo{font-size:18px;letter-spacing:1px;white-space:nowrap}.amu-fixed{top:10px!important;right:10px!important;gap:7px!important}.amu-btn,.amu-navlink{padding:7px 10px!important;font-size:13px!important}.amu-avbtn{padding:4px 10px 4px 4px!important;font-size:14px!important}.amu-pts{font-size:13px!important}.amu-navlink{display:none!important}.amu-theme .theme-pill{padding:5px 9px!important;font-size:12px!important}}
[data-theme="light"] nav{background:rgba(244,246,250,.92);border-bottom-color:var(--line)}