/* menu.css · SG668 全局统一顶栏
 * 作用：把所有页面的顶栏统一为 .appbar 三段式（品牌+主导航 / 页面工具+用户区）
 * 设计基准：index.html 的 .appbar（专业极简浅色 + 品牌蓝 #2563eb）
 * 自包含变量，不依赖 stockpage.css；index.html 已是最佳形态，不加载本文件。
 * 注意：本文件只定义 .appbar 框架与 .user-area 容器；各页内部的
 *       .ding-* / .bull-* / .t-* / .wl-* 元素样式仍由各页自有 css 提供。
 */
:root{
  --m-surface:#ffffff;
  --m-soft:#f5f6f8;
  --m-line:#e5e7eb;
  --m-line-strong:#d1d5db;
  --m-t1:#111827;
  --m-t2:#4b5563;
  --m-t3:#9ca3af;
  --m-brand:#2563eb;
  --m-brand-soft:#eff6ff;
  --m-ease:.18s ease;
}

.appbar{
  flex:0 0 auto;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 20px;
  background:var(--m-surface);
  border-bottom:1px solid var(--m-line);
  position:sticky;
  top:0;
  z-index:40;
}

.appbar-left,
.appbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.appbar-left{ gap:22px; }

.appbar-brand{
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  flex:0 0 auto;
}
.appbar-logo{ width:26px; height:26px; flex:0 0 26px; display:block; }
.appbar-title{
  font-size:15px;
  font-weight:700;
  color:var(--m-t1);
  letter-spacing:.2px;
  white-space:nowrap;
  line-height:1.2;
}
.appbar-sub{
  font-size:12px;
  color:var(--m-t3);
  white-space:nowrap;
  line-height:1.2;
}

.appbar-nav{
  display:flex;
  align-items:center;
  gap:2px;
  flex-wrap:nowrap;
  min-width:0;
  overflow:visible;
}
.appbar-navitem{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 12px;
  border:none;
  border-radius:7px;
  background:transparent;
  font-family:inherit;
  font-size:13px;
  font-weight:400;
  color:var(--m-t2);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:color var(--m-ease), background var(--m-ease);
}
.appbar-navitem:hover{ color:var(--m-brand); background:var(--m-brand-soft); }
.appbar-navitem.active{
  color:var(--m-brand);
  background:var(--m-brand-soft);
  font-weight:500;
}

/* 用户区容器：右侧自动贴边 */
.user-area{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* 返回按钮（沿用 index 的 back-results-btn 外观；非 index 页也补一份） */
.back-results-btn{
  height:30px;
  padding:0 12px;
  border-radius:7px;
  border:1px solid var(--m-line-strong);
  background:var(--m-surface);
  color:var(--m-t2);
  font-family:inherit;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
  transition:all var(--m-ease);
}
.back-results-btn:hover{ border-color:var(--m-brand); color:var(--m-brand); }

/* 顶栏内的次级链接 / 小按钮（如退出、登录）统一基线，避免各页 emoji 链接风格漂移 */
.logout-link,
.login-link{
  font-size:13px;
  color:var(--m-t2);
  cursor:pointer;
  text-decoration:none;
  padding:0 8px;
  height:32px;
  display:inline-flex;
  align-items:center;
}
.logout-link:hover,
.login-link:hover{ color:var(--m-brand); }

/* 响应式：窄屏主导航横向滚动，不挤压品牌与用户区 */
@media (max-width:860px){
  .appbar{
    flex-wrap:wrap;
    height:auto;
    padding:8px 12px;
    gap:8px;
  }
  .appbar-left,
  .appbar-right{
    width:100%;
    flex-wrap:wrap;
  }
  .appbar-nav{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .appbar-right{ justify-content:space-between; }
  .appbar-sub{ display:none; }
}
@media (max-width:520px){
  .appbar-title{ font-size:14px; }
}