/* ── 全局顶栏组件 ────────────────────────────────────── */
/* 模块化设计：如需修改顶栏只需改这一个文件 */
.topbar{position:fixed;top:0;left:0;right:0;height:36px;
  background:var(--bg-body);border-bottom:1px solid var(--border,#313244);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;z-index:200;font-size:.98rem;user-select:none}
.topbar-left{display:flex;align-items:center;gap:2px;overflow-x:auto;white-space:nowrap}
.topbar-left::-webkit-scrollbar{display:none}
.topbar-brand{color:var(--text3,#a6adc8);text-decoration:none;font-weight:400;
  padding:0 6px;flex-shrink:0;font-size:.98rem;position:relative;height:36px;
  display:inline-flex;align-items:center}
.topbar-brand:hover,.topbar-brand.active{color:var(--text,#cdd6f4)}
.topbar-brand.active::after{content:'';position:absolute;bottom:0;left:6px;right:6px;
  height:2px;background:var(--accent,#89b4fa);border-radius:1px}
.topbar-sep{color:var(--text4,#6c7086);margin:0 2px;flex-shrink:0}
/* 导航菜单项：支持 hover 下拉 */
.topbar-menu{position:relative;padding:0 6px;cursor:pointer;
  color:var(--text3,#a6adc8);font-weight:400;flex-shrink:0;height:36px;display:inline-flex;align-items:center}
.topbar-menu:hover,.topbar-menu.active{color:var(--text,#cdd6f4)}
.topbar-menu.active::after{content:'';position:absolute;bottom:0;left:6px;right:6px;
  height:2px;background:var(--accent,#89b4fa);border-radius:1px}
/* 下拉面板（当前为简单 hover 显示，后续可扩展锁定逻辑） */
.topbar-dropdown{display:none;position:absolute;top:100%;left:0;margin-top:2px;
  background:var(--bg-card,#313244);border:1px solid var(--border2,#45475a);
  border-radius:6px;min-width:160px;padding:4px 0;box-shadow:0 4px 12px rgba(0,0,0,.3);
  z-index:300}
.topbar-menu:hover .topbar-dropdown{display:block}
.topbar-dropdown a{display:block;padding:5px 12px;color:var(--text3,#a6adc8);
  text-decoration:none;font-weight:400;font-size:.96rem;white-space:nowrap}
.topbar-dropdown a:hover{background:var(--bg-hover,#3b3e53);color:var(--text,#cdd6f4)}
/* 右侧工具区 */
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* ── 深色模式开关 ── */
.theme-switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.theme-switch input{opacity:0;width:0;height:0}
.theme-slider{position:absolute;cursor:pointer;inset:0;background:#b0b0b0;border-radius:22px;transition:background .25s}
.theme-slider::before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .25s}
.theme-switch input:checked+.theme-slider{background:#3b82f6}
.theme-switch input:checked+.theme-slider::before{transform:translateX(18px)}
.theme-switch input:focus-visible+.theme-slider{outline:2px solid var(--accent,#89b4fa);outline-offset:2px}
/* ── 日/夜 标签 ── */
.theme-label{font-size:inherit;font-weight:700;color:var(--text3,#a6adc8);margin-left:6px;line-height:36px}
.theme-label::after{content:'夜'}
[data-theme="light"] .theme-label::after{content:'日'}
/* 页面内容偏移 */
.topbar-spacer{height:36px}
@media(max-width:640px){
  .topbar{font-size:.82rem}
  .topbar-menu{padding:0 3px}
  .topbar-brand{font-size:.82rem;padding:0 4px}
}