<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useAuthStore } from '@/stores/auth'
import { useBrokerEntry } from '@/composables/useBrokerEntry'
import { useRoute, useRouter } from 'vue-router'
import { useWindowScroll } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import { AUTH_ENABLED } from '@/utils/featureFlags'
import { maskEmailForDisplay } from '@/utils/maskEmail'
import LangSwitcher from '@/components/common/LangSwitcher.vue'

const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const { isLoggedIn, email, memberProfile } = storeToRefs(authStore)
const { logout } = authStore
const { y: scrollY } = useWindowScroll()
const {
  isBroker,
  showNotBrokerTip,
  applySubmitting,
  applyError,
  handleBrokerClick,
  goApplyList,
  handleApply,
} = useBrokerEntry()

const headerAvatarError = ref(false)
const displayEmailMasked = computed(() => maskEmailForDisplay(email.value ?? ''))
const displayHeaderLetter = computed(() => {
  const p = memberProfile.value
  if (p?.avatarLetter) {
    return p.avatarLetter
  }
  return email.value[0]?.toUpperCase() ?? '?'
})

watch(
  () => memberProfile.value?.avatar,
  () => {
    headerAvatarError.value = false
  },
)

function onBrokerClick() {
  userMenuOpen.value = false
  menuOpen.value = false
  void handleBrokerClick()
}

const menuOpen = ref(false)
const userMenuOpen = ref(false)
const mobileExpandedItem = ref<string | null>(null)

const isTradingPage = computed(() =>
  route.path.startsWith('/futures') ||
    route.path.startsWith('/spot') ||
    route.path.startsWith('/market') ||
    route.path.startsWith('/trade')
)

interface NavChild {
  key?: string
  label?: string
  to: string
  icon?: 'ido' | 'gift'
}

interface NavItem {
  key: string
  to?: string
  children?: NavChild[]
}

const navItems = computed<NavItem[]>(() => {
  const financeChildren: NavChild[] = [
    { key: 'nav.idoPresale', to: '/finance/ido', icon: 'ido' },
    { key: 'nav.claimAirdrop', to: '/finance/airdrop', icon: 'gift' },
  ]
  return [
    { key: 'nav.home', to: '/' },
    { key: 'nav.market', to: '/market' },
    { key: 'nav.spot', to: '/spot/BTC-USDT' },
    { key: 'nav.futures', to: '/futures/BTC-USDT' },
    { key: 'nav.copyTrade', to: '/copy-trade' },
    { key: 'nav.finance', children: financeChildren },
    { key: 'nav.announcements', to: '/announcements' },
    { key: 'nav.download', to: '/download' },
  ]
})

function childLabel(child: NavChild) {
  return child.label ?? (child.key ? t(child.key) : '')
}

function isActive(item: { to?: string; children?: { to: string }[] }) {
  if (item.to) {
    if (item.to === '/') return route.path === '/'
    const base = item.to.startsWith('/futures/')
      ? '/futures'
      : item.to.startsWith('/spot/')
        ? '/spot'
        : item.to
    return route.path.startsWith(base)
  }
  if (item.children) {
    return item.children.some(c => {
      if (c.to.startsWith('/finance/')) {
        return route.path.startsWith('/finance')
      }
      const base = c.to.startsWith('/futures/')
        ? '/futures'
        : c.to.startsWith('/spot/')
          ? '/spot'
          : c.to
      return route.path.startsWith(base)
    })
  }
  return false
}

function navigate(to: string) {
  menuOpen.value = false
  mobileExpandedItem.value = null
  router.push(to)
}

function toggleMobileExpand(key: string) {
  mobileExpandedItem.value = mobileExpandedItem.value === key ? null : key
}

async function handleLogout() {
  menuOpen.value = false
  await logout()
  router.push('/')
}
</script>

<template>
  <header class="header" :class="{ 'header--scrolled': scrollY > 64 || menuOpen || isTradingPage }">
    <div class="header-inner page-container">
      <!-- Logo -->
      <RouterLink to="/" class="logo" @click="menuOpen = false">
        <img src="@/assets/logo.png" alt="iBit" class="logo-img" />
        <span class="logo-text">iBit</span>
      </RouterLink>

      <!-- 主导航（桌面） -->
      <nav class="nav">
        <div
          v-for="item in navItems"
          :key="item.key"
          class="nav-item-wrap"
          :class="{ 'has-dropdown': item.children }"
        >
          <!-- 无子菜单 -->
          <RouterLink
            v-if="item.to"
            :to="item.to"
            class="nav-item"
            :class="{ 'is-active': isActive(item) }"
          >
            {{ t(item.key) }}
          </RouterLink>
          <!-- 有子菜单 -->
          <span
            v-else
            class="nav-item nav-item--dropdown"
            :class="{ 'is-active': isActive(item) }"
          >
            {{ t(item.key) }}
            <svg class="dropdown-arrow" width="10" height="10" viewBox="0 0 10 6" fill="currentColor">
              <path d="M0 0l5 6 5-6z"/>
            </svg>
          </span>
          <!-- 下拉面板 -->
          <div v-if="item.children" class="dropdown-panel">
            <template v-for="(child, idx) in item.children" :key="child.to + (child.key ?? child.label ?? '')">
              <div
                v-if="child.icon === 'gift' && idx > 0"
                class="dropdown-divider"
              />
              <RouterLink
                :to="child.to"
                class="dropdown-item"
              >
                <span v-if="child.icon === 'ido'" class="dropdown-icon" aria-hidden="true">🕐</span>
                <span v-else-if="child.icon === 'gift'" class="dropdown-icon" aria-hidden="true">🎁</span>
                {{ childLabel(child) }}
              </RouterLink>
            </template>
          </div>
        </div>
      </nav>

      <!-- 右侧操作区（桌面） -->
      <div class="actions">
        <!-- 语言切换 -->
        <LangSwitcher />

        <RouterLink to="/download" class="icon-btn" :title="t('header.downloadTitle')">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
            <polyline points="7 10 12 15 17 10"/>
            <line x1="12" y1="15" x2="12" y2="3"/>
          </svg>
        </RouterLink>

        <template v-if="AUTH_ENABLED && !isLoggedIn">
          <RouterLink to="/login" class="btn-text">{{ t('header.login') }}</RouterLink>
          <RouterLink to="/register" class="btn-primary">{{ t('header.register') }}</RouterLink>
        </template>
        <template v-else-if="AUTH_ENABLED && isLoggedIn">
          <div class="user-menu-wrap" @mouseenter="userMenuOpen = true" @mouseleave="userMenuOpen = false">
            <RouterLink to="/account" class="user-avatar" :title="displayEmailMasked">
              <img
                v-if="memberProfile?.avatar && !headerAvatarError"
                :src="memberProfile.avatar"
                alt=""
                class="user-avatar-img"
                width="32"
                height="32"
                referrerpolicy="no-referrer"
                @error="headerAvatarError = true"
              >
              <span v-else class="user-avatar-letter">{{ displayHeaderLetter }}</span>
            </RouterLink>
            <div class="user-dropdown" :class="{ visible: userMenuOpen }">
              <RouterLink to="/account" class="ud-item" @click="userMenuOpen = false">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
                {{ t('header.account') }}
              </RouterLink>
              <RouterLink to="/assets" class="ud-item" @click="userMenuOpen = false">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 00-4 0v2M8 11h.01M12 11h.01M16 11h.01"/></svg>
                {{ t('header.assets') }}
              </RouterLink>
              <RouterLink to="/account/security" class="ud-item" @click="userMenuOpen = false">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                {{ t('header.security') }}
              </RouterLink>
              <button class="ud-item" @click="onBrokerClick">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                {{ t('header.broker') }}
                <span v-if="isBroker" class="broker-badge">●</span>
              </button>
              <div class="ud-divider" />
              <button class="ud-item ud-logout" @click="handleLogout">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/></svg>
                {{ t('header.logout') }}
              </button>
            </div>
          </div>
        </template>
      </div>

      <!-- 移动端：下载 + 菜单 -->
      <div class="mobile-toolbar">
        <RouterLink to="/download" class="icon-btn mobile-download" :title="t('header.downloadTitle')" @click="menuOpen = false">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
            <polyline points="7 10 12 15 17 10"/>
            <line x1="12" y1="15" x2="12" y2="3"/>
          </svg>
        </RouterLink>
        <button class="hamburger" :class="{ 'is-open': menuOpen }" @click="menuOpen = !menuOpen" :aria-label="t('header.menu')">
          <span /><span /><span />
        </button>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div class="mobile-menu" :class="{ 'is-open': menuOpen }">
      <div class="mobile-menu-body">
        <nav class="mobile-nav">
          <template v-for="item in navItems" :key="item.key">
            <!-- 无子菜单 -->
            <button
              v-if="item.to"
              class="mobile-nav-item"
              :class="{ 'is-active': isActive(item) }"
              @click="navigate(item.to)"
            >
              {{ t(item.key) }}
            </button>
            <!-- 有子菜单 -->
            <div v-else class="mobile-nav-group">
              <button
                class="mobile-nav-item mobile-nav-item--parent"
                :class="{ 'is-active': isActive(item), 'is-expanded': mobileExpandedItem === item.key }"
                @click="toggleMobileExpand(item.key)"
              >
                {{ t(item.key) }}
                <svg class="mobile-arrow" width="10" height="10" viewBox="0 0 10 6" fill="currentColor">
                  <path d="M0 0l5 6 5-6z"/>
                </svg>
              </button>
              <div class="mobile-sub" :class="{ 'is-open': mobileExpandedItem === item.key }">
                <button
                  v-for="child in item.children"
                  :key="child.to + (child.key ?? child.label ?? '')"
                  class="mobile-sub-item"
                  @click="navigate(child.to)"
                >
                  {{ childLabel(child) }}
                </button>
              </div>
            </div>
          </template>
        </nav>

        <!-- 移动端语言切换 -->
        <div class="mobile-lang">
          <LangSwitcher />
        </div>

        <div v-if="AUTH_ENABLED" class="mobile-actions">
          <template v-if="!isLoggedIn">
            <button class="mobile-btn-text" @click="navigate('/login')">{{ t('header.login') }}</button>
            <button class="mobile-btn-primary" @click="navigate('/register')">{{ t('header.register') }}</button>
          </template>
          <template v-else>
            <button class="mobile-btn-account" @click="navigate('/account')">
              <span class="mobile-avatar">
                <img
                  v-if="memberProfile?.avatar && !headerAvatarError"
                  :src="memberProfile.avatar"
                  alt=""
                  class="mobile-avatar-img"
                  width="24"
                  height="24"
                  referrerpolicy="no-referrer"
                  @error="headerAvatarError = true"
                >
                <template v-else>{{ displayHeaderLetter }}</template>
              </span>
              {{ t('header.account') }}
            </button>
            <button class="mobile-btn-ghost" @click="handleLogout">{{ t('header.logoutShort') }}</button>
          </template>
        </div>
      </div>
    </div>
  </header>

  <!-- 非经纪商提示弹窗 -->
  <Teleport to="body">
    <div v-if="showNotBrokerTip" class="not-broker-overlay" @click.self="showNotBrokerTip = false">
      <div class="not-broker-modal">
        <div class="not-broker-icon">🏦</div>
        <h3 class="not-broker-title">{{ t('header.brokerApplyTitle') }}</h3>
        <p class="not-broker-desc">{{ t('header.brokerApplyDesc') }}</p>
        <p v-if="applyError" class="not-broker-error">{{ applyError }}</p>
        <button type="button" class="not-broker-list" @click="goApplyList">{{ t('header.viewApplyList') }}</button>
        <div class="not-broker-actions">
          <button class="not-broker-cancel" @click="showNotBrokerTip = false">{{ t('header.cancel') }}</button>
          <button class="not-broker-apply" :disabled="applySubmitting" @click="handleApply">
            {{ applySubmitting ? t('header.submitting') : t('header.applyNow') }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.header--scrolled {
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-height);
  gap: var(--space-6);
  max-width: none;
  margin: 0;
  padding: 0 24px;
}

/* Logo */
.logo { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.logo-img  { width: 28px; height: 28px; }
.logo-text { font-size: var(--text-body); font-weight: var(--fw-bold); color: #fff; }

/* ── Nav (desktop) ── */
.nav { display: flex; align-items: center; gap: 0; flex: 1; }

.nav-item-wrap {
  position: relative;
}
.nav-item-wrap.has-dropdown:hover .dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  border-radius: var(--radius-md);
  transition: color 0.2s;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.nav-item:hover,
.nav-item.is-active { color: var(--color-primary); }

.nav-item--dropdown { text-decoration: none; }

.dropdown-arrow {
  margin-top: 1px;
  transition: transform 0.2s;
  opacity: 0.7;
}
.nav-item-wrap.has-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

/* Dropdown panel：左对齐于当前菜单项正下方 */
.dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  transform: translateY(-6px);
  min-width: 140px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 6px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 200;
}
/* bridge to prevent hover gap */
.dropdown-panel::before {
  content: '';
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}

.dropdown-divider {
  height: 1px;
  margin: 4px 12px;
  background: rgba(255,255,255,0.08);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.dropdown-icon {
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
}
.dropdown-item:hover {
  background: rgba(240,185,11,0.08);
  color: var(--color-primary);
}

/* ── Actions (desktop) ── */
.actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: rgba(255,255,255,0.6);
  border-radius: var(--radius-md);
  transition: color 0.2s;
}
.icon-btn:hover { color: #fff; }

.btn-text {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  transition: color 0.2s;
  padding: 4px 8px;
}
.btn-text:hover { color: #fff; }

.btn-primary {
  padding: 6px 18px;
  background: var(--color-primary);
  color: #000;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.88; }

/* ── User menu ── */
.user-menu-wrap { position: relative; }

.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #000;
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  text-decoration: none;
  transition: box-shadow 0.2s, opacity 0.2s;
  overflow: hidden;
  padding: 0;
}
.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-avatar-letter { line-height: 1; }
.user-avatar:hover { box-shadow: 0 0 0 2px rgba(240,185,11,0.4); opacity: 0.9; }

.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 200px;
  background: #1a1a1a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-2) 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 200;
}
.user-dropdown.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.user-dropdown::before {
  content: ''; position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}

.ud-item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: var(--space-3) var(--space-4);
  font-size: var(--text-small); color: var(--color-text-secondary);
  background: transparent; border: none; cursor: pointer;
  text-decoration: none; text-align: left;
  transition: background 0.2s, color 0.2s;
}
.ud-item:hover { background: var(--color-bg-card-hover); color: var(--color-text-primary); }
.ud-divider { height: 1px; background: var(--color-border); margin: var(--space-2) 0; }
.ud-logout { color: var(--color-down); }
.ud-logout:hover { background: rgba(255,77,79,0.08); color: var(--color-down); }

/* ── 移动端顶栏工具区 ── */
.mobile-toolbar {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex-shrink: 0;
}
.mobile-download { color: var(--color-text-secondary); }

/* ── Hamburger ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: transparent; border: none; cursor: pointer;
  padding: 4px; flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
  transform-origin: center;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu ── */
.mobile-menu {
  display: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.mobile-menu.is-open { max-height: 700px; }

.mobile-menu-body {
  background: rgba(10,10,10,0.98);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.mobile-nav {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: var(--space-4);
}

.mobile-nav-item {
  width: 100%; text-align: left;
  padding: 12px var(--space-2);
  font-size: var(--text-body);
  color: rgba(255,255,255,0.75);
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--radius-md);
  transition: color 0.2s, background 0.2s;
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-nav-item:hover,
.mobile-nav-item.is-active { color: var(--color-primary); background: rgba(240,185,11,0.05); }

.mobile-arrow {
  opacity: 0.5;
  transition: transform 0.25s;
  flex-shrink: 0;
}
.mobile-nav-item--parent.is-expanded .mobile-arrow { transform: rotate(180deg); }

.mobile-sub {
  overflow: hidden; max-height: 0;
  transition: max-height 0.25s ease;
}
.mobile-sub.is-open { max-height: 300px; }

.mobile-sub-item {
  display: block; width: 100%; text-align: left;
  padding: 10px var(--space-2) 10px 24px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--radius-md);
  transition: color 0.2s, background 0.2s;
}
.mobile-sub-item:hover { color: var(--color-primary); background: rgba(240,185,11,0.05); }

/* 移动端语言切换 */
.mobile-lang {
  display: flex;
  justify-content: flex-start;
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}

.mobile-actions {
  display: flex; gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.mobile-btn-text {
  flex: 1; padding: var(--space-3);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: rgba(255,255,255,0.75);
  font-size: var(--text-body); cursor: pointer;
}
.mobile-btn-primary {
  flex: 1; padding: var(--space-3);
  background: var(--color-primary); border: none;
  border-radius: var(--radius-md); color: #000;
  font-size: var(--text-body); font-weight: var(--fw-semibold); cursor: pointer;
}
.mobile-btn-ghost {
  flex: 1; padding: var(--space-3);
  background: transparent; border: 1px solid var(--color-primary);
  border-radius: var(--radius-md); color: var(--color-primary);
  font-size: var(--text-body); cursor: pointer;
}
.mobile-btn-account {
  flex: 1; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: rgba(255,255,255,0.75);
  font-size: var(--text-body); cursor: pointer;
}
.mobile-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-primary); color: #000;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.mobile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 移动端断点 ── */
@media (max-width: 768px) {
  .nav, .actions { display: none; }
  .mobile-toolbar { display: flex; }
  .hamburger { display: flex; }
  .mobile-menu { display: block; }
  .header-inner { gap: var(--space-4); }
}

/* ── 经纪商标识点 ── */
.broker-badge { color: var(--color-primary); font-size: 8px; line-height: 1; margin-left: auto; }

/* ── 非经纪商提示弹窗 ── */
.not-broker-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.not-broker-modal {
  width: 340px; max-width: calc(100vw - 32px);
  background: #151515;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.not-broker-icon { font-size: 36px; margin-bottom: var(--space-4); }
.not-broker-title { font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: var(--space-3); }
.not-broker-desc { font-size: var(--text-small); color: var(--color-text-secondary); line-height: 1.6; margin-bottom: var(--space-4); }
.not-broker-error { font-size: var(--text-small); color: var(--color-down); margin-bottom: var(--space-4); }
.not-broker-list {
  width: 100%;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  cursor: pointer;
}
.not-broker-list:hover { border-color: var(--color-primary); color: var(--color-primary); }
.not-broker-actions { display: flex; gap: var(--space-3); }
.not-broker-cancel {
  flex: 1; padding: var(--space-3);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer;
}
.not-broker-apply {
  flex: 2; padding: var(--space-3);
  background: var(--color-primary); border: none;
  border-radius: var(--radius-md);
  color: #000; font-weight: var(--fw-semibold); cursor: pointer;
}
.not-broker-apply:disabled { opacity: .5; cursor: not-allowed; }
</style>
