/**
 * 全局导航主题变量 — 与 service.html .nav-header / .nav-title 对齐
 * （顶部背景 #0a0a0a，标题/返回 #ffffff）
 */
:root {
  --nav-bg: #0a0a0a;
  --nav-text: #ffffff;
  /* Mine / 卡片页（与 mine.html :root 对齐，可由 site-theme-loader 覆盖） */
  --mine-bg: #12151c;
  --mine-bg2: #1a1d26;
  --mine-card: #2a2d36;
  --mine-text: #ffffff;
  --mine-muted: #8e929d;
  --mine-accent: #00ffa3;
  --mine-accent-dim: rgba(0, 255, 163, 0.12);
  /* 与 mineAccent 同步，供 rgba(var(--theme-green-rgb), α) 使用；site-theme-loader 会覆盖 */
  --theme-green-rgb: 0, 255, 163;
  /* 底栏顶部分割线（由 site-theme-loader 按主题色写入，缺省为绿色半透明） */
  --mine-accent-border: rgba(0, 255, 150, 0.2);
  /* 二级页 body 渐变背景 */
  --page-gradient-start: #1a1a2e;
  --page-gradient-end: #2d2d44;
  /* H5 底部 Tab：与 index 首页同一套高度与留白（含安全区） */
  --bottom-nav-height: 60px;
  --bottom-safe-padding: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  /* iOS 刘海 / 横屏安全区（需 viewport-fit=cover） */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 480px) {
  :root {
    --bottom-nav-height: 56px;
  }
}

@media (min-width: 768px) {
  :root {
    --bottom-nav-height: 64px;
  }
}

@supports not (padding-bottom: env(safe-area-inset-bottom)) {
  :root {
    --bottom-safe-padding: calc(var(--bottom-nav-height) + 10px);
  }
}

/**
 * 底部五栏导航：各 H5 页共用，避免切换页时高度/位置跳动。
 * 背景用 --mine-bg2，与后台「样式」里二级页/Mine 色系一致。
 */
.bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 8px 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  background: var(--mine-bg2);
  border-top: 1px solid var(--mine-accent-border);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  flex-shrink: 0;
}

.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  color: #888;
  font-size: 11px;
  border-radius: 6px;
  margin: 0 4px;
}

.bottom-nav .nav-item:active {
  background: var(--mine-accent-dim);
}

.bottom-nav .nav-item.active {
  color: var(--mine-accent);
}

.bottom-nav .nav-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex-shrink: 0;
}

.bottom-nav .nav-icon svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav .nav-label {
  font-size: 11px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .bottom-nav {
    padding: 6px 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  }

  .bottom-nav .nav-item {
    padding: 6px 2px;
    gap: 4px;
  }
}

/* 顶栏：黑底白字；返回与 i/svg 使用 var(--nav-text) */
.global-black-header,
.header.global-black-header {
  display: flex;
  align-items: center;
  padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) 12px max(12px, var(--safe-left));
  background: var(--nav-bg) !important;
  color: var(--nav-text);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  border-bottom: none;
}

.global-black-header .back-btn,
.header.global-black-header .back-btn {
  cursor: pointer;
  padding: 5px;
  color: var(--nav-text) !important;
  background: transparent !important;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto;
  height: auto;
  z-index: 1;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.global-black-header .back-btn svg,
.header.global-black-header .back-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}

.global-black-header i,
.header.global-black-header i {
  color: var(--nav-text);
}

.global-black-header > h1,
.header.global-black-header > h1 {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--nav-text) !important;
  margin: 0 30px 0 0;
  line-height: 1.2;
}