/* 公开站顶栏：对齐会员端 MemberHeader 白底 pill 导航 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--console-nav);
  border-bottom: 1px solid var(--console-nav-border);
  overflow: visible;
}

.site-header.scrolled {
  box-shadow: var(--shadow-sm);
}

.header-inner {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 20px;
  height: var(--console-tab-h);
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  min-width: 0;
  height: 100%;
  overflow: visible;
  text-decoration: none;
  color: var(--console-nav-fg);
}

.site-header .brand-mark.is-header {
  width: auto;
  min-width: 0;
  max-width: calc(min(280px, 42vw) * 0.54);
  height: calc(var(--console-tab-h) * 0.48);
  max-height: calc(var(--console-tab-h) * 0.48);
  overflow: visible;
}

.site-header .brand-mark.is-header .brand-mark__img {
  width: auto;
  max-width: calc(min(280px, 42vw) * 0.54);
  height: calc(var(--console-tab-h) * 0.48);
  object-fit: contain;
  object-position: left center;
}

/* 顶栏明/暗 Logo 切换（与 pages.css 一致，避免 header 覆盖 display） */
.site-header .brand-mark__img--dark {
  display: none;
}

[data-theme='dark'] .site-header .brand-mark__img--light.has-dark {
  display: none;
}

[data-theme='dark'] .site-header .brand-mark__img--dark {
  display: block;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 0 auto;
  min-width: max-content;
  overflow: visible;
}

.nav-hot-icon {
  margin-right: 6px;
  color: #e4572e;
  font-size: 14px;
  line-height: 1;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--console-nav-muted);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition:
    color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.nav-link:hover {
  background: var(--console-nav-hover);
  color: var(--console-nav-fg);
}

.nav-link.on {
  background: var(--console-nav-active);
  color: var(--brand);
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-item--mega {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-item--mega .nav-link--trigger {
  gap: 6px;
  cursor: default;
}

.nav-item--mega.on > .nav-link--trigger,
.nav-item--mega.open > .nav-link--trigger {
  background: var(--console-nav-active);
  color: var(--brand);
}

.nav-chevron {
  font-size: 10px;
  opacity: 0.72;
  transition: transform 0.18s var(--ease);
}

.nav-item--mega.open .nav-chevron {
  transform: rotate(180deg);
}

.mega-panel {
  position: absolute;
  left: 0;
  right: auto;
  top: 100%;
  z-index: 120;
  padding: 8px 0 14px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(1180px, calc(100vw - 24px));
}

.mega-panel[hidden] {
  display: none !important;
}

.mega-inner {
  width: 992px;
  max-width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  min-height: 300px;
  max-height: min(70vh, 560px);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fff 40%, transparent) inset,
    0 12px 32px color-mix(in srgb, var(--ink) 8%, transparent),
    0 2px 8px color-mix(in srgb, var(--ink) 4%, transparent);
  overflow: hidden;
}

.mega-col {
  min-width: 0;
  min-height: 0;
  padding: 14px 12px;
}

.mega-col--primary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, var(--line));
}

.mega-col--secondary {
  padding: 16px 24px 18px;
  background: var(--surface);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mega-sec-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 4px 14px;
}

.mega-sec-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 8px;
}

.mega-sec-head-text {
  min-width: 0;
  flex: 1;
}

.mega-sec-heading {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.mega-sec-lead {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  opacity: 0.85;
}

.mega-nav-item,
.mega-side-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.mega-nav-item i,
.mega-side-item i {
  font-size: 11px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.mega-nav-item:hover,
.mega-side-item:hover {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--brand);
}

.mega-nav-item:hover i,
.mega-side-item:hover i {
  opacity: 0.7;
  color: var(--brand);
}

.mega-nav-item.on,
.mega-side-item.on {
  background: var(--surface);
  color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}

.mega-nav-item.on i,
.mega-side-item.on i {
  opacity: 1;
  color: var(--brand);
}

.mega-col--primary .mega-nav-item {
  transition:
    background 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-col--primary .mega-nav-item i {
  transition:
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-col--primary .mega-nav-item:hover {
  background: var(--surface-muted);
  color: var(--ink);
  transform: translateX(3px);
}

.mega-col--primary .mega-nav-item:hover i {
  opacity: 1;
  color: var(--brand);
}

.mega-col--primary .mega-nav-item.on:hover {
  background: var(--surface);
  color: var(--brand);
}

.mega-more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 4px 0;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  transition: opacity 0.15s ease;
}

.mega-more-link i {
  font-size: 11px;
  opacity: 0.9;
}

.mega-more-link:hover {
  opacity: 0.82;
  text-decoration: underline;
}

.mega-more-link--sec {
  margin-top: 10px;
}

.mega-nav-name,
.mega-side-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mega-sec-list,
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 12px;
}

.mega-sec-item,
.mega-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  min-width: 0;
  transition:
    background 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-sec-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mega-sec-item:hover,
.mega-card:hover {
  background: var(--surface-muted);
  transform: translateX(3px);
}

.mega-sec-item:hover .mega-sec-title,
.mega-card:hover .mega-card-title {
  color: var(--ink);
}

.mega-sec-title,
.mega-card-title {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mega-sec-desc,
.mega-card-desc {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
}

.mega-desc-tip {
  position: fixed;
  z-index: 400;
  max-width: min(360px, calc(100vw - 24px));
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
  pointer-events: none;
}

.mega-desc-tip[hidden] {
  display: none !important;
}

.mega-hint {
  margin: 10px 4px;
  color: var(--muted);
  font-size: 13px;
}

/* 解决方案：两组条目 + 右侧配图，对齐用例下拉 */
.sol-panel {
  padding-top: 8px;
}

.sol-inner {
  display: flex;
  align-items: stretch;
  width: max-content;
  max-width: min(980px, calc(100vw - 24px));
  max-height: min(72vh, 640px);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 12px;
  box-shadow:
    0 8px 40px color-mix(in srgb, var(--ink) 14%, transparent),
    0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
  overflow: hidden;
}

.sol-side {
  flex: 0 0 188px;
  width: 188px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, var(--line));
}

.sol-side .mega-nav-item {
  transition:
    background 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sol-side .mega-nav-item i {
  transition:
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sol-side .mega-nav-item:hover {
  background: var(--surface-muted);
  color: var(--ink);
  transform: translateX(3px);
}

.sol-side .mega-nav-item:hover i {
  opacity: 1;
  color: var(--brand);
}

.sol-side .mega-nav-item.on:hover {
  background: var(--surface);
  color: var(--brand);
}

.sol-main {
  flex: 1 1 360px;
  width: 380px;
  min-width: 320px;
  padding: 10px 12px 14px;
  overflow: auto;
  overscroll-behavior: contain;
}

.sol-list[hidden] {
  display: none !important;
}

.sol-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 8px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  transition:
    background 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sol-link:hover {
  background: var(--surface-muted);
  color: var(--ink);
  transform: translateX(3px);
}

.sol-ico {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--line) 55%, var(--surface));
  transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sol-link:hover .sol-ico {
  background: var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .sol-link,
  .sol-ico,
  .sol-side .mega-nav-item,
  .sol-side .mega-nav-item i,
  .mega-col--primary .mega-nav-item,
  .mega-col--primary .mega-nav-item i,
  .mega-sec-item,
  .mega-card {
    transition: none;
  }

  .sol-link:hover,
  .sol-side .mega-nav-item:hover,
  .mega-col--primary .mega-nav-item:hover,
  .mega-sec-item:hover,
  .mega-card:hover {
    transform: none;
  }
}

.sol-ico img,
.sol-ico-mark {
  width: 18px;
  height: 18px;
  display: block;
}

.sol-ico-mark {
  background-color: var(--brand);
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

.ico-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5l-8-3z'/%3E%3C/svg%3E"); }
.ico-shield-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5l-8-3z'/%3E%3Cpath d='m8.6 11.8 2.4 2.4 4.4-4.6'/%3E%3C/svg%3E"); }
.ico-globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.9 2.6 15.1 0 18M12 3c-2.6 2.9-2.6 15.1 0 18'/%3E%3C/svg%3E"); }
.ico-chart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M6.5 21V11M11.5 21V4.5M16.5 21v-6'/%3E%3C/svg%3E"); }
.ico-cart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='18' cy='20' r='1.6'/%3E%3Cpath d='M2 3h3l2.6 12h11.2L21 7H6'/%3E%3C/svg%3E"); }
.ico-game { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h10a5 5 0 0 1 4.6 7l-.8 2.2A2.6 2.6 0 0 1 16 18l-.8-1.4H8.8L8 18a2.6 2.6 0 0 1-4.8-1.2L2.4 15A5 5 0 0 1 7 8z'/%3E%3Cpath d='M8 11v3M6.5 12.5h3M15.5 12h.01M17.5 14h.01'/%3E%3C/svg%3E"); }
.ico-video { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='14' height='14' rx='2.5'/%3E%3Cpath d='M16.5 10.5 22 7.5v9l-5.5-3'/%3E%3C/svg%3E"); }
.ico-chip { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='2'/%3E%3Cpath d='M10 2v3M14 2v3M10 19v3M14 19v3M2 10h3M2 14h3M19 10h3M19 14h3'/%3E%3C/svg%3E"); }
.ico-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E"); }
.ico-layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 8 12 13l9.5-5L12 3z'/%3E%3Cpath d='M2.5 13 12 18l9.5-5'/%3E%3C/svg%3E"); }
.ico-gauge { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 12l4.6-3.6'/%3E%3C/svg%3E"); }
.ico-refresh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20.5 3.5V8H16'/%3E%3C/svg%3E"); }
.ico-wallet { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.6'/%3E%3Cpath d='M3 10.5h18M16.5 15h1.5'/%3E%3C/svg%3E"); }
.ico-plug { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5v5M15 2.5v5'/%3E%3Cpath d='M6.5 7.5h11V11a5.5 5.5 0 0 1-11 0V7.5z'/%3E%3Cpath d='M12 16.5V21'/%3E%3C/svg%3E"); }
.ico-building { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4.6A1.6 1.6 0 0 1 5.6 3h8.8A1.6 1.6 0 0 1 16 4.6V21'/%3E%3Cpath d='M16 9.5h2.4A1.6 1.6 0 0 1 20 11.1V21M3 21h18M7 7h2M7 11h2M7 15h2M11 7h2M11 11h2M11 15h2'/%3E%3C/svg%3E"); }

.sol-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}

.sol-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.sol-lead {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.sol-card {
  flex: 0 0 280px;
  width: 280px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, var(--line));
}

.sol-card-visual {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.sol-link.is-current {
  background: var(--surface-muted);
}

.sol-link.is-current .sol-ico {
  background: var(--accent-soft);
}

.sol-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.sol-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}

.sol-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.sol-card-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 1200px) {
  .sol-card {
    display: none;
  }
}

.drawer-group-label {
  margin: 10px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer-group-label--sub {
  margin-top: 6px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 12px;
}

.drawer-mega {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.drawer-link--sub {
  font-weight: 600;
}

.drawer-link--leaf {
  padding-left: 24px;
  min-height: 38px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

.drawer-link--all {
  margin-top: 4px;
  color: var(--brand);
}

@media (max-width: 1200px) {
  .mega-inner {
    width: 812px;
    grid-template-columns: 160px minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  .mega-inner {
    width: 680px;
    grid-template-columns: 148px minmax(0, 1fr);
  }

  .mega-sec-list,
  .mega-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .nav-item--mega .mega-panel {
    display: none !important;
  }
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: min-content;
}

.header-actions > .btn,
.header-actions > .menu-btn,
.header-actions > .lang-switch,
.header-actions > .theme-btn,
.header-actions > .notify-bell {
  flex-shrink: 0;
}

.btn-login,
.btn-register {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease),
    opacity var(--duration) var(--ease);
}

.btn-login {
  background: transparent;
  color: var(--console-nav-fg);
  border: 1px solid var(--console-nav-border);
}

.btn-login:hover {
  background: var(--console-nav-hover);
}

.btn-register {
  background: var(--brand);
  color: #fff;
}

.btn-register:hover {
  opacity: 0.88;
}

/* 图标按钮（主题切换，对齐会员端） */
.icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--console-nav-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.icon-btn:hover {
  background: var(--console-nav-hover);
  color: var(--brand);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.theme-btn {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--console-nav-muted);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.menu-btn:hover {
  background: var(--console-nav-hover);
  color: var(--brand);
}

.menu-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 90;
}

.drawer-panel {
  margin-left: auto;
  width: min(320px, 88vw);
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.drawer-label {
  margin: 0;
  padding: 14px 16px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 0 10px 12px;
  gap: 2px;
}

.drawer-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.drawer-link:hover {
  background: var(--accent-soft);
  color: var(--brand);
}

.drawer-link.on {
  background: var(--accent-soft);
  color: var(--brand);
}

.drawer-extra {
  margin-top: auto;
  padding: 12px 16px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.drawer-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.lang-switch {
  position: relative;
}

/* ============================================================
 * 会员区：快捷搜索 + 站内消息 + 控制台（对齐会员端 MemberHeader）
 * 登录态由 head 内联脚本写入 html[data-member]，避免闪烁
 * ============================================================ */

html:not([data-member='on']) .member-only {
  display: none !important;
}

[data-member='on'] .guest-only {
  display: none !important;
}

.btn-console {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  background: var(--brand);
  color: #fff;
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.btn-console:hover {
  background: var(--brand-hover);
  color: #fff;
}

/* ---------- 快捷搜索 ---------- */

.quick-search {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  flex: 0 1 200px;
  max-width: 220px;
  min-width: 128px;
}

.quick-search .search-icon {
  position: absolute;
  left: 12px;
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}

.quick-search .search-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  outline: none;
  transition:
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.quick-search .search-input::placeholder {
  color: var(--muted);
}

.quick-search .search-input:focus {
  border-color: color-mix(in srgb, var(--brand) 50%, var(--line));
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}

.quick-search .clear-btn {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.quick-search .clear-btn:hover {
  color: var(--ink);
  background: var(--surface-muted);
}

.quick-search .hint {
  position: absolute;
  right: 10px;
  min-width: 16px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
}

.quick-search .panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 120;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
}

.quick-search .empty {
  margin: 0;
  padding: 16px 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.quick-search .result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.quick-search .result:hover,
.quick-search .result.on {
  background: var(--accent-soft);
}

.quick-search .result-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.quick-search .result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.quick-search .result-text strong {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-search .result-text em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 站内消息铃铛 ---------- */

.notify-bell {
  position: relative;
  flex-shrink: 0;
}

.notify-bell .icon-btn {
  position: relative;
  font-size: 15px;
}

.notify-bell .icon-btn[aria-expanded='true'] {
  background: var(--console-nav-hover);
  color: var(--brand);
}

.notify-bell .fa-bell.is-ringing {
  transform-origin: top center;
  animation: notify-bell-ring 0.75s ease-in-out;
}

@keyframes notify-bell-ring {
  0%,
  100% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(12deg);
  }
  30% {
    transform: rotate(-10deg);
  }
  45% {
    transform: rotate(8deg);
  }
  60% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(3deg);
  }
}

/* 独立类名，避免与 tokens .badge（状态标签）样式互相污染 */
.notify-bell .notify-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid var(--console-nav);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* display:inline-flex 会盖掉 UA 对 [hidden] 的 display:none，无未读时变成空红点 */
.notify-bell .notify-badge[hidden] {
  display: none !important;
}

.notify-bell .panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: min(440px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.notify-bell .panel-head,
.notify-bell .panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.notify-bell .panel-foot {
  justify-content: center;
  border-bottom: 0;
  border-top: 1px solid var(--line);
}

.notify-bell .panel-head strong {
  font-size: 14px;
}

.notify-bell .link-btn {
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.notify-bell .link-btn:hover {
  text-decoration: underline;
}

.notify-bell .panel-body {
  max-height: 360px;
  overflow: auto;
}

.notify-bell .empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.notify-bell .item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.notify-bell .item:last-child {
  border-bottom: 0;
}

.notify-bell .item:hover {
  background: var(--surface-muted);
}

.notify-bell .item.unread {
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.notify-bell .dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

.notify-bell .item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.notify-bell .item-body strong {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.notify-bell .item-body em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notify-bell .item-body .time {
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .nav-link {
    padding: 0 8px;
    font-size: 14px;
  }

  .quick-search {
    flex-basis: 160px;
    max-width: 180px;
  }

  .console-label {
    display: none;
  }

  .btn-console {
    padding: 0 10px;
  }
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--console-nav-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.lang-trigger .fa-globe {
  font-size: 12px;
}

.lang-code {
  min-width: 1em;
  letter-spacing: 0.02em;
}

.lang-trigger:hover,
.lang-trigger[aria-expanded='true'] {
  color: var(--brand);
  background: var(--console-nav-hover);
}

.lang-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lang-trigger .chevron {
  font-size: 9px;
  opacity: 0.7;
}

.lang-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 110;
  min-width: 140px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.lang-option:hover,
.lang-option.on {
  background: var(--accent-soft);
  color: var(--brand);
  font-weight: 600;
}

.lang-option:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.lang-option i {
  font-size: 12px;
  color: var(--brand);
}

.lang-switch--drawer {
  width: fit-content;
}

.lang-switch--drawer .lang-panel {
  right: auto;
  left: 0;
}

@media (max-width: 960px) {
  .nav-desktop,
  .site-header .btn-login {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
  }
}

/* 英文菜单放不下时收进抽屉，避免最后一项压到语言切换上 */
.site-header.is-nav-collapsed .nav-desktop {
  display: none;
}

.site-header.is-nav-collapsed .menu-btn {
  display: inline-flex;
}

@media (max-width: 768px) {
  .header-inner {
    padding: 0 12px;
    gap: 8px;
  }

  .lang-desktop,
  .theme-desktop {
    display: none;
  }

  /* 登录态下手机端保留搜索（对齐会员端：搜索 flex 撑开） */
  .quick-search {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .quick-search .hint {
    display: none;
  }
}

.promo-panel {
  padding-top: 8px;
  width: min(1080px, calc(100vw - 32px));
  max-width: min(1080px, calc(100vw - 32px));
}

.nav-item--mega.open > .promo-panel {
  position: fixed;
  top: var(--console-tab-h, 64px);
  bottom: auto;
  left: 50%;
  z-index: 220;
  width: min(1080px, calc(100vw - 32px));
  max-width: min(1080px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100vh - var(--console-tab-h, 64px) - 16px);
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  overflow: auto;
}

.promo-menu-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
  max-height: none;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 14px;
  box-shadow:
    0 8px 40px color-mix(in srgb, var(--ink) 14%, transparent),
    0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
}

.nav-item--mega.open .promo-menu-inner {
  animation: promo-menu-drop 0.18s ease;
}

@keyframes promo-menu-drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item--mega.open .promo-menu-inner {
    animation: none;
  }
}

.promo-menu-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 280px;
}

.promo-menu-col + .promo-menu-col {
  border-left: 1px solid var(--line);
}

.promo-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 16px 6px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.promo-col-head:hover {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
  color: var(--brand);
}

.promo-side-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.drawer-promo .promo-side-mark i {
  opacity: 1;
  color: #e4572e;
  font-size: 16px;
}

.promo-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 12px 8px;
}

.promo-menu-more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 16px 16px;
  min-height: 40px;
  border-radius: 8px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.promo-menu-more:hover {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}

.promo-menu-empty {
  margin: 36px 8px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.promo-menu-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.promo-menu-card:hover {
  background: var(--surface-muted, color-mix(in srgb, var(--ink) 6%, var(--surface)));
}

.promo-menu-cover {
  display: block;
  width: 120px;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  border-radius: 8px;
  background: #050b16;
}

.promo-menu-cover img,
.promo-menu-cover-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.promo-menu-name,
.promo-menu-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo-menu-name {
  -webkit-line-clamp: 2;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.promo-menu-desc {
  -webkit-line-clamp: 2;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.drawer-promo .drawer-group-label {
  display: flex;
  align-items: center;
}

.drawer-promo .drawer-link {
  gap: 8px;
}

.drawer-promo-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  margin: 0 8px 8px;
  overflow: auto;
}

.drawer-promo-list .promo-menu-card {
  grid-template-columns: 92px 1fr;
  padding: 6px;
}

.drawer-promo-list .promo-menu-cover {
  width: 92px;
  height: auto;
  aspect-ratio: 16 / 9;
}