/* 站点顶栏 —— 营销首页与 Studio 共用的唯一一份实现。
 *
 * 为什么不做成 Vue 组件：Studio 是 go:embed 的独立静态页，拿不到 SPA 的组件树。
 * 所以契约放在 CSS 层：两边写同一套 class，样式只在这里维护一份。
 *
 * 加载方式：
 *   SPA      → frontend/index.html 里 <link>
 *   Studio   → frontend/public/studio.html 里 <link>（放在 studio-themes.css 之前）
 *
 * 配色不直接引用各页自己的变量（两边命名不同：营销用 --primary，Studio 用 --gold），
 * 而是在 .site-header 上自带一组 --sh-* 变量。宿主页要换色（例如分销商白标）
 * 只需覆盖 --sh-*，不用改这里的规则。
 */

.site-header {
  --sh-h: 58px;
  --sh-container: 1120px;
  --sh-pad-x: 20px;
  --sh-ctrl-h: 32px;
  --sh-radius: 10px;

  --sh-bg: rgba(245, 246, 250, 0.86);
  --sh-border: rgba(232, 236, 243, 0.9);
  --sh-surface: rgba(255, 255, 255, 0.9);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --sh-fg: #0f1729;
  --sh-fg-2: #1c2433;
  --sh-muted: #656d80;
  --sh-nav: #3a4456;
  --sh-line: rgba(30, 41, 59, 0.1);
  --sh-line-strong: rgba(43, 92, 217, 0.22);

  --sh-primary: #2b5cd9;
  --sh-primary-2: #1e3f9e;
  --sh-primary-fg: #f8fafc;

  position: relative;
  z-index: 30;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--sh-border);
  background: var(--sh-bg);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* 营销页是长滚动页，顶栏吸顶；Studio 是定高应用外壳，不需要 */
.site-header.sh-sticky {
  position: sticky;
  top: 0;
  isolation: isolate;
  padding-top: env(safe-area-inset-top);
}

html.dark .site-header {
  --sh-bg: rgba(16, 20, 28, 0.78);
  --sh-border: rgba(255, 255, 255, 0.08);
  --sh-surface: #141a26;
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --sh-fg: #f2f5fa;
  --sh-fg-2: #e7ebf3;
  --sh-muted: #8b95a8;
  --sh-nav: #e7ebf3;
  --sh-line: rgba(255, 255, 255, 0.08);
  --sh-line-strong: rgba(77, 126, 240, 0.28);

  --sh-primary: #4d7ef0;
  --sh-primary-2: #7aa0f5;
  --sh-primary-fg: #0f1729;
}

/* ——— 骨架 ——— */
.sh-in {
  max-width: var(--sh-container);
  margin: 0 auto;
  height: var(--sh-h);
  padding: 0 var(--sh-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sh-left {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}
.sh-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
  justify-content: flex-end;
}

/* ——— 品牌 ——— */
.sh-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}
.sh-logo {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--sh-radius);
  border: 1px solid rgba(43, 92, 217, 0.28);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(233, 238, 251, 0.75));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 12px rgba(64, 96, 150, 0.08);
  color: var(--sh-primary);
  font-size: 14px;
  font-weight: 700;
}
html.dark .sh-logo {
  border-color: rgba(77, 126, 240, 0.35);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(77, 126, 240, 0.12));
  box-shadow: none;
}
.sh-logo img,
.sh-logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sh-logo svg {
  width: 16px;
  height: 16px;
}
/* 后台上传了 logo 时去掉装饰外框：蓝边+渐变底是给兜底首字用的，
   套在真实 logo 外面会像把图片装进盒子，而且大多数 logo 自带留白。 */
.sh-logo:has(img) {
  border-color: transparent;
  background: none;
  box-shadow: none;
}
html.dark .sh-logo:has(img) {
  border-color: transparent;
  background: none;
}
.sh-name {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--sh-fg);
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ——— 主导航 ——— */
.sh-nav {
  display: none;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 500;
}
.sh-nav a {
  color: var(--sh-nav);
  text-decoration: none;
  transition: color 0.15s;
}
.sh-nav a:hover {
  color: var(--sh-primary);
}
@media (min-width: 1024px) {
  .sh-nav {
    display: flex;
  }
}

/* ——— 余额胶囊 ——— */
.sh-acct {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--sh-ctrl-h);
  padding: 0 4px 0 10px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  background: var(--sh-surface);
  box-shadow: var(--sh-inset);
}
.sh-bal {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.sh-bal span {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
.sh-bal b {
  font-size: 13px;
  font-weight: 650;
  color: var(--sh-primary);
  font-variant-numeric: tabular-nums;
}
.sh-rc {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: none;
  border-radius: var(--sh-radius);
  background: var(--sh-primary);
  color: var(--sh-primary-fg);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(43, 92, 217, 0.22);
}
.sh-rc:hover {
  background: var(--sh-primary-2);
}

/* ——— 邮箱 ——— */
.sh-who {
  font-size: 12px;
  color: var(--sh-muted);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ——— 按钮 ——— */
.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--sh-ctrl-h);
  padding: 0 12px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  background: var(--sh-surface);
  color: var(--sh-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sh-inset);
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}
.sh-btn:hover {
  border-color: var(--sh-line-strong);
  color: var(--sh-primary);
}
.sh-btn-primary {
  border-color: transparent;
  background: var(--sh-primary);
  color: var(--sh-primary-fg);
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(43, 92, 217, 0.22);
}
.sh-btn-primary:hover {
  border-color: transparent;
  background: var(--sh-primary-2);
  color: var(--sh-primary-fg);
}
/* 方形图标按钮（历史 / 主题） */
.sh-icon {
  width: var(--sh-ctrl-h);
  padding: 0;
  flex: 0 0 auto;
}
.sh-icon svg {
  width: 15px;
  height: 15px;
}

/* ——— 纯文字链（退出）——— */
.sh-link {
  color: var(--sh-muted);
  font-size: 12.5px;
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.sh-link:hover {
  color: var(--sh-primary);
}

.site-header :focus-visible {
  outline: 2px solid var(--sh-primary);
  outline-offset: 2px;
}

/* ——— 响应式：逐级让位，顺序与两个页面保持一致 ——— */
@media (max-width: 900px) {
  .sh-who {
    display: none;
  }
}
@media (max-width: 720px) {
  .sh-bal span {
    display: none;
  }
}
@media (max-width: 560px) {
  .site-header {
    --sh-h: 50px;
    --sh-pad-x: 14px;
  }
  .sh-in {
    gap: 8px;
  }
  .sh-left {
    gap: 0;
  }
  .sh-name {
    display: none;
  }
  .sh-right {
    gap: 6px;
  }
  .sh-acct {
    gap: 5px;
    padding: 0 4px 0 8px;
  }
  .sh-btn {
    padding: 0 10px;
    font-size: 12px;
  }
  /* 历史按钮在窄屏收成纯图标 */
  .sh-btn .sh-btn-tx {
    display: none;
  }
  .sh-btn.sh-collapse {
    width: var(--sh-ctrl-h);
    padding: 0;
  }
}