#app-header {
  position: sticky; top: 0; z-index: 999;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 32px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #e6e8ec;
  font-family: -apple-system, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
#app-header * { box-sizing: border-box; }
#app-header .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #1a1f36; text-decoration: none; font-size: 16px; }
#app-header .brand img { height: 28px; width: 28px; border-radius: 6px; }
#app-header nav { display: flex; gap: 4px; }
#app-header nav a { padding: 6px 14px; border-radius: 6px; color: #4d5466; text-decoration: none; transition: all 0.2s; }
#app-header nav a:hover { color: #2563eb; background: #f5f7fb; }
#app-header nav a.active { color: #2563eb; font-weight: 500; }
#app-header .auth-area { display: flex; align-items: center; gap: 8px; }
#app-header .btn {
  padding: 7px 16px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; font-size: 14px; font-family: inherit;
  text-decoration: none; display: inline-flex; align-items: center;
  transition: all 0.2s;
}
#app-header .btn-login { color: #2563eb; border-color: #2563eb; background: #fff; }
#app-header .btn-login:hover { background: #e0ecff; }
#app-header .btn-register { color: #fff; background: #2563eb; border-color: #2563eb; }
#app-header .btn-register:hover { background: #1d4ed8; }
#app-header .user-menu { position: relative; }
#app-header .user-menu > .trigger {
  cursor: pointer; padding: 6px 12px; border-radius: 6px;
  display: flex; align-items: center; gap: 6px; color: #1a1f36;
}
#app-header .user-menu > .trigger:hover { background: #f5f7fb; }
#app-header .user-menu .caret { font-size: 10px; color: #94a3b8; }
#app-header .user-menu .dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 240px; background: #fff;
  border: 1px solid #e6e8ec; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  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: #1a1f36; font-size: 13px; display: flex; justify-content: space-between; gap: 16px;
}
#app-header .user-menu .item:hover { background: #f5f7fb; }
#app-header .user-menu .item b { color: #2563eb; font-weight: 500; }
#app-header .user-menu .item.divider {
  border-top: 1px solid #eee; margin-top: 4px; padding-top: 10px; color: #dc2626;
}
#app-header .user-menu .item.info {
  cursor: default; color: #64748b; font-size: 12px;
}
#app-header .user-menu .item.info:hover { background: transparent; }
@media (max-width: 640px) {
  #app-header { padding: 10px 16px; }
  #app-header nav { display: none; }
}