/* 全站共用顶栏样式。
   所有颜色都写成 var(--页面变量, 兜底值)：
     - index.html 定义了主题变量 → 顶栏跟随浅色/深色；
     - docs.html / pay.html / register.html 没定义 → 自动落到兜底的浅色值，不会被切成半深半浅。 */
#app-header {
  /* 三个站各自的主色由页面用 --site-accent 传进来（外贸龙虾红 / 小婉蓝 / AutoCut 金）。
     故意不用 --accent：docs.html、pay.html、register.html 已经把 --accent 用作别的颜色
     （金 / 绿），复用会把顶栏染歪。 */
  --aph-accent: var(--site-accent, #E85D5D);
  /* 主按钮上的文字颜色。金色系站点（AutoCut）白字压金底只有 ~2.6:1，由页面覆盖成深色 */
  --aph-accent-fg: var(--site-accent-fg, #fff);
  --aph-bg:     var(--bg-card,   #ffffff);
  --aph-line:   var(--line,      #e6e8ec);
  --aph-soft:   var(--bg-inset,  #f1f3f7);
  --aph-text:   var(--text,      #1a1f36);
  --aph-mute:   var(--text-soft, #4d5466);
  --aph-faint:  var(--text-faint,#94a3b8);

  position: sticky; top: 0; z-index: 999;
  /* pay.html 的 body 是 flex + align-items:center，顶栏作为 flex item 会被压成内容宽的一座「孤岛」，
     所以这里显式占满整行（对非 flex 父容器的页面无副作用）。 */
  width: 100%; align-self: stretch;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 28px;
  background: color-mix(in srgb, var(--aph-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--aph-line);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}
/* 不支持 color-mix 的浏览器退回不透明底 */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  #app-header { background: var(--aph-bg); }
}
#app-header * { box-sizing: border-box; }

/* ── 品牌 ── */
#app-header .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--aph-text); text-decoration: none; flex: none;
}
#app-header .brand img { width: 30px; height: 30px; border-radius: 8px; }
#app-header .brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
#app-header .brand-txt b { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
#app-header .brand-txt em {
  font-style: normal; font-size: 11px; font-weight: 500; color: var(--aph-faint);
}
#app-header .brand:hover .brand-txt b { color: var(--aph-accent); }

/* ⚠ 这里曾有 .aph-switch 三产品切换器（"顶部汇总栏"），2026-08-04 按产品要求移除：
   三个站是独立产品站，顶栏只出现本站自己的 logo 与本站导航，跨产品互链放页面底部。 */

/* ── 本站导航 ── */
#app-header nav { display: flex; gap: 2px; margin-right: auto; margin-left: 10px; }
#app-header nav a {
  padding: 6px 13px; border-radius: 8px; color: var(--aph-mute);
  text-decoration: none; transition: all .2s;
}
#app-header nav a:hover { color: var(--aph-accent); background: var(--aph-soft); text-decoration: none; }
#app-header nav a.active { color: var(--aph-accent); font-weight: 650; }

/* ── 右侧 ── */
#app-header .auth-area { display: flex; align-items: center; gap: 8px; flex: none; }

#app-header .aph-icon {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--aph-line); border-radius: 8px;
  color: var(--aph-mute); font-family: inherit; font-size: 14px; line-height: 1;
  cursor: pointer; transition: all .2s;
}
#app-header .aph-icon--wide { width: auto; padding: 0 11px; font-size: 12.5px; font-weight: 650; }
#app-header .aph-icon:hover { border-color: var(--aph-accent); color: var(--aph-accent); }

#app-header .btn {
  padding: 7px 15px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; font-size: 13.5px; font-weight: 650; font-family: inherit;
  text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap;
  transition: all .2s;
}
#app-header .btn:hover { text-decoration: none; }
#app-header .btn-login {
  color: var(--aph-accent); border-color: var(--aph-line); background: transparent;
}
#app-header .btn-login:hover { border-color: var(--aph-accent); }
#app-header .btn-register {
  color: var(--aph-accent-fg); background: var(--aph-accent); border-color: var(--aph-accent);
}
#app-header .btn-register:hover { filter: brightness(1.06); }

/* ── 用户菜单 ── */
#app-header .user-menu { position: relative; }
#app-header .user-menu > .trigger {
  cursor: pointer; padding: 6px 12px; border-radius: 8px;
  display: flex; align-items: center; gap: 6px; color: var(--aph-text);
}
#app-header .user-menu > .trigger:hover { background: var(--aph-soft); }
#app-header .user-menu .caret { font-size: 10px; color: var(--aph-faint); }
#app-header .user-menu .dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 244px; background: var(--aph-bg);
  border: 1px solid var(--aph-line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  padding: 6px 0; overflow: hidden;
}
#app-header .user-menu.open .dropdown { display: block; }
#app-header .user-menu .item {
  padding: 10px 16px; cursor: pointer; white-space: nowrap;
  color: var(--aph-text); font-size: 13px; display: flex; justify-content: space-between; gap: 16px;
}
#app-header .user-menu .item:hover { background: var(--aph-soft); }
#app-header .user-menu .item b { color: var(--aph-accent); font-weight: 600; }
#app-header .user-menu .item.divider {
  border-top: 1px solid var(--aph-line); margin-top: 4px; padding-top: 10px; color: #dc2626;
}
#app-header .user-menu .item.info { cursor: default; color: var(--aph-faint); font-size: 12px; }
#app-header .user-menu .item.info:hover { background: transparent; }

@media (max-width: 860px) {
  /* 窄屏藏掉本站导航（页面本身有分区标题，锚点导航不是必需），保住品牌与登录按钮同一行 */
  #app-header nav { display: none; }
}
@media (max-width: 640px) {
  /* 手机上尽量让「品牌 + 右侧按钮」挤在同一行，省下一整行高度 */
  #app-header { padding: 9px 14px; gap: 8px; }
  #app-header nav { display: none; }
  #app-header .brand-txt em { display: none; }
  #app-header .brand img { width: 26px; height: 26px; }
  #app-header .auth-area { gap: 6px; }
  #app-header .aph-icon { width: 28px; height: 28px; }
  #app-header .aph-icon--wide { padding: 0 8px; }
  #app-header .btn { padding: 6px 11px; font-size: 13px; }
}