/* ============================================================
   haiguitouzi 布局风格复刻
   顶部固定导航 + 左侧可折叠侧边栏目录 + 右侧内容区
   参考: https://www.baostock.com/mainContent?file=pythonAPI.md
   ============================================================ */

/* ----- CSS 变量（全局设计令牌）-----
   所有颜色、尺寸、字体通过变量统一管理，方便换肤和维护 */
:root {
  /* 布局尺寸 */
  --topbar-height: 60px;               /* 顶部导航栏高度 */
  --sidebar-width: 280px;              /* 侧边栏展开宽度 */
  --sidebar-collapsed-width: 0px;      /* 侧边栏折叠后宽度 */
  --content-gap: 20px;                 /* 内容区间距 */

  /* 主题色系 */
  --color-primary: #2c7be5;            /* 主色调（蓝色） */
  --color-primary-light: #e8f0fe;      /* 主色浅色背景 */
  --color-primary-dark: #1a5db0;       /* 主色深色（悬停态） */

  /* 背景色 */
  --color-bg: #ffffff;                 /* 主背景白色 */
  --color-bg-secondary: #f8f9fa;       /* 次背景浅灰 */
  --color-bg-sidebar: #f7f8fa;         /* 侧边栏背景 */

  /* 文字色 */
  --color-text: #212529;               /* 主文字色 */
  --color-text-secondary: #5f6368;     /* 次要文字色 */
  --color-text-muted: #9aa0a6;         /* 弱化文字色 */
  --color-text-sidebar: #3c4043;       /* 侧边栏文字色 */

  /* 边框色 */
  --color-border: #e0e0e0;             /* 常规边框 */
  --color-border-light: #f0f0f0;       /* 浅色边框 */

  /* 代码块样式 */
  --color-code-bg: #f5f5f5;            /* 行内代码背景 */
  --color-code-text: #d63384;          /* 行内代码文字色 */

  /* 链接色 */
  --color-link: #2c7be5;               /* 链接颜色 */
  --color-link-hover: #1a5db0;         /* 链接悬停色 */

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);   /* 小阴影 */
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);   /* 中阴影 */

  /* 圆角 */
  --radius: 4px;                       /* 通用圆角 */

  /* 字体栈 */
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ----- 全局重置 -----
   统一清除浏览器默认样式，建立一致的盒模型基准 */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;              /* 宽高包含 padding 和 border */
}

html {
  scroll-behavior: smooth;             /* 锚点跳转平滑滚动 */
}

body {
  font-family: var(--font-sans);       /* 优先使用系统原生中文字体 */
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  background: #f5f6f8;                 /* 整体页面浅灰色背景 */
  -webkit-font-smoothing: antialiased; /* macOS 字体平滑 */
}

/* 全局链接样式 */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ============================================================
   顶部导航栏（固定定位，始终显示在页面顶部）
   - 左侧：Logo 品牌标识
   - 中间：主导航菜单（首页/估值分析/财务分析/投资工具/增值服务/关于我们）
   - 右侧：注册/登录按钮 + 侧边栏切换按钮
   ============================================================ */
.topbar {
  position: fixed;                     /* 固定定位，不随滚动消失 */
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);        /* 60px */
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 40px;
  z-index: 1000;                       /* 确保在最上层 */
  box-shadow: var(--shadow-sm);
}

/* Logo 区域：📈 图标 + "haiguitouzi" 文字 */
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-right: 24px;
  white-space: nowrap;                 /* 不换行 */
}

.topbar .brand img {
  height: 28px;
  width: auto;
}

/* Logo + 导航菜单 整体居中 */
.topbar .topbar-center {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: center;
  align-self: stretch;                 /* 撑满顶栏高度，让导航底线贴底 */
}

/* 顶部菜单导航：横向排列，底部高亮条指示当前页 */
.topbar .top-menu {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 100%;
}

.topbar .top-menu a {
  display: flex;
  align-items: center;
  padding: 0 32px;
  border-radius: 0;
  border-bottom: 3px solid transparent; /* 默认透明底部边框 */
  color: var(--color-text-secondary);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}

.topbar .top-menu a:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);  /* 悬停显示蓝色下划线 */
}

.topbar .top-menu a.active {
  color: var(--color-primary);
  background: #fff;
  border-bottom-color: var(--color-primary);  /* 当前页蓝色下划线 */
}

/* 右侧操作区：注册按钮 + 登录按钮 */
.topbar .top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.topbar .top-actions .btn-register,
.topbar .top-actions .btn-login {
  padding: 4px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}

/* 注册按钮：空心蓝边样式 */
.topbar .top-actions .btn-register {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  background: #fff;
}

.topbar .top-actions .btn-register:hover {
  background: var(--color-primary-light);
}

/* 登录按钮：实心蓝色样式 */
.topbar .top-actions .btn-login {
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.topbar .top-actions .btn-login:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* 侧边栏切换按钮（☰ 汉堡图标）：点击展开/收起左侧导航 */
.topbar .brand .sidebar-toggle,
.sidebar-toggle {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

/* ============================================================
   主体布局（Flex 横向排列：侧边栏 + 主内容区）
   整体布局结构：layout-wrapper > sidebar + main-content
   ============================================================ */
.layout-wrapper {
  display: flex;
  padding-top: calc(var(--topbar-height) + 24px);  /* 顶部留出导航栏高度 + 间距 */
  min-height: 100vh;
}

/* ============================================================
   左侧侧边栏（文档目录树）
   - 固定定位，独立滚动
   - 包含多个分组（sidebar-group），每组可折叠
   - 底部固定微信二维码
   ============================================================ */
.sidebar {
  position: fixed;
  top: calc(var(--topbar-height) + 24px);  /* 顶部导航下方 */
  left: var(--content-gap);                /* 左边距 */
  bottom: 24px;
  width: var(--sidebar-width);             /* 280px */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow-y: auto;                        /* 内容过多时滚动 */
  overflow-x: hidden;
  transition: width 0.25s ease;            /* 折叠动画 */
  z-index: 900;
  padding: 0;
  display: flex;
  flex-direction: column;                  /* 纵向排列：分组列表 + 底部二维码 */
}

/* 侧边栏滚动条美化（WebKit 浏览器） */
.sidebar::-webkit-scrollbar {
  width: 5px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

/* 折叠状态：宽度变为 0，隐藏 */
.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  border-right: none;
}

/* 侧边栏分组标题（如"快速导航"、"财务报表"等） */
.sidebar-title {
  padding: 16px 20px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* 侧边栏分组容器 */
.sidebar-group {
  border-bottom: 1px solid var(--color-border-light);
  padding: 4px 0;
  flex-shrink: 0;                          /* 不被底部二维码挤压 */
}

.sidebar-group:last-child {
  border-bottom: none;
}

/* 分组标题栏（可点击折叠/展开） */
.sidebar-group .group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;                         /* 可点击 */
  user-select: none;
  white-space: nowrap;
  transition: background 0.12s;
}

.sidebar-group .group-header:hover {
  background: var(--color-primary-light);
}

/* 分组箭头图标：折叠时旋转 -90° */
.sidebar-group .group-header .arrow {
  font-size: 10px;
  transition: transform 0.2s;
  color: var(--color-text-muted);
}

.sidebar-group .group-header.collapsed .arrow {
  transform: rotate(-90deg);
}

/* 分组子项容器：通过 max-height 动画实现折叠效果 */
.sidebar-group .group-items {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.sidebar-group .group-items.collapsed {
  max-height: 0 !important;
}

/* 侧边栏菜单项（每个可点击的导航链接） */
.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px 7px 28px;
  font-size: 14px;
  color: var(--color-text-sidebar);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.12s;
  white-space: nowrap;
  border-left: 3px solid transparent;       /* 左侧高亮条（默认透明） */
}

.sidebar .nav-item:hover {
  background: var(--color-primary-light);
  color: var(--color-text);
  text-decoration: none;
}

/* 当前激活的菜单项：蓝色左侧高亮条 */
.sidebar .nav-item.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

/* 子级菜单项缩进层级 */
.sidebar .nav-item.level-2 {
  padding-left: 40px;                      /* 二级菜单 */
}
.sidebar .nav-item.level-3 {
  padding-left: 52px;                      /* 三级菜单，字号更小 */
  font-size: 13px;
}

/* 徽章（如 NEW/HOT 等标记） */
.sidebar .nav-badge {
  margin-left: auto;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}

/* 侧边栏底部微信二维码 */
.sidebar-qrcode {
  text-align: center;
  padding: 20px 16px 24px;
  margin-top: auto;                        /* 始终贴在底部 */
}

.sidebar-qrcode .qrcode-img {
  width: 120px;
  height: 120px;
  border-radius: 6px;
  display: block;
  margin: 0 auto 10px;
}

.sidebar-qrcode .qrcode-text {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ============================================================
   主内容区域
   - 位于侧边栏右侧，自适应剩余宽度
   - 白色卡片式容器（content-wrapper）包裹实际内容
   - 侧边栏折叠时自动扩展占满全宽
   ============================================================ */
.main-content {
  flex: 1;
  margin-left: calc(var(--sidebar-width) + var(--content-gap));  /* 侧边栏宽度 + 间距 */
  padding: 0 var(--content-gap) 32px var(--content-gap);
  transition: margin-left 0.25s ease;      /* 与侧边栏折叠动画同步 */
  min-width: 0;                            /* 防止 flex 子元素溢出 */
}

/* 白色内容卡片 */
.main-content .content-wrapper {
  background: #fff;
  border-radius: 8px;
  padding: 40px 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* 侧边栏折叠后，主内容区扩展占满 */
.main-content.expanded {
  margin-left: 0;
  max-width: 100%;
}

/* ============================================================
   Markdown 内容样式（API 文档风格）
   适用于 content-wrapper 内的富文本内容排版：
   标题 h1-h4、段落、列表、代码、表格、引用块、图片等
   ============================================================ */

.content-wrapper h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}

.content-wrapper h2 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 36px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
  scroll-margin-top: 80px;               /* 锚点跳转后不被固定顶栏遮挡 */
}

.content-wrapper h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 12px;
  color: var(--color-text);
}

.content-wrapper h4 {
  font-size: 16px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
}

.content-wrapper p {
  margin-bottom: 14px;
}

.content-wrapper ul,
.content-wrapper ol {
  margin-bottom: 14px;
  padding-left: 24px;
}

.content-wrapper li {
  margin-bottom: 6px;
}

.content-wrapper strong {
  font-weight: 600;
  color: var(--color-text);
}

/* 内联代码 */
.content-wrapper code {
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-word;
}

/* 代码块 */
.content-wrapper pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 16px 20px;
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

.content-wrapper pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* 表格 */
.content-wrapper table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 14px;
}

/* 紧凑表格：宽度自适应内容 */
.content-wrapper table.compact-table {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
.content-wrapper table.compact-table th,
.content-wrapper table.compact-table td {
  padding: 6px 16px;
  white-space: nowrap;
}

.content-wrapper table th {
  background: var(--color-bg-secondary);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.content-wrapper table td {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
}

.content-wrapper table tr:nth-child(even) td {
  background: #ffffff;
}

/* 引用块 */
.content-wrapper blockquote {
  border-left: 4px solid var(--color-primary);
  padding: 12px 16px;
  margin-bottom: 18px;
  background: var(--color-primary-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-text-secondary);
}

.content-wrapper blockquote p:last-child {
  margin-bottom: 0;
}

/* 水平线 */
.content-wrapper hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 32px 0;
}

/* 图片 */
.content-wrapper img {
  max-width: 100%;
  border-radius: var(--radius);
}

/* 方法签名/API函数样式卡片
   用于展示 API 函数的名称、描述和签名 */
.api-function {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.api-function .func-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-family: var(--font-mono);           /* 等宽字体显示函数名 */
  margin-bottom: 8px;
}

.api-function .func-desc {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-bottom: 12px;
}

/* 函数签名（调用示例代码块） */
.api-function .func-sig {
  background: var(--color-bg-secondary);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-x: auto;                        /* 长签名可横向滚动 */
  white-space: pre-wrap;
  word-break: break-all;
}

/* 参数表格：三列布局（参数名 20% / 类型 20% / 说明 60%） */
.params-table {
  margin-top: 12px;
}

.params-table th:first-child {
  width: 20%;
}
.params-table th:nth-child(2) {
  width: 20%;
}
.params-table th:nth-child(3) {
  width: 60%;
}

/* 返回值样式：绿色背景块 */
.return-block {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 18px;
}

.return-block .return-label {
  font-weight: 600;
  color: #166534;
  font-size: 13px;
  margin-bottom: 4px;
}

.return-block code {
  background: #dcfce7;
  color: #166534;
}

/* 警告/提示框（三种样式：info 蓝 / warning 黄 / tip 绿） */
.callout {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 14px;
}

.callout.info {                            /* 信息提示（蓝色） */
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.callout.warning {                         /* 警告提示（黄色） */
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.callout.tip {                             /* 成功/提示（绿色） */
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

/* 页面开发中占位样式 */
.under-construction {
  text-align: center;
  padding: 80px 20px;
  color: #6b7280;
}
.under-construction .uc-icon {
  font-size: 64px;
  margin-bottom: 20px;
}
.under-construction h2 {
  font-size: 22px;
  color: #374151;
  margin-bottom: 12px;
  border: none;
}
.under-construction p {
  font-size: 15px;
  color: #9ca3af;
}

/* ============================================================
   响应式布局（屏幕宽度 ≤ 900px 时适配移动端）
   - 侧边栏默认隐藏，点击切换按钮后弹出覆盖
   - 主内容区占满全宽
   - 顶部菜单隐藏（仅保留汉堡按钮）
   ============================================================ */
@media (max-width: 900px) {
  .sidebar {
    width: 0;                              /* 默认隐藏 */
  }
  .sidebar.open {                          /* 点击按钮后弹出 */
    width: var(--sidebar-width);
    box-shadow: 4px 0 20px rgba(0,0,0,0.1);
  }
  .main-content {
    margin-left: 0;
    padding: 20px 16px;
  }
  .topbar .top-menu {
    display: none;                         /* 移动端隐藏顶部菜单 */
  }
  .topbar .search-wrap input {
    width: 140px;
  }
  .topbar .search-wrap input:focus {
    width: 180px;
  }
}

/* ============================================================
   回到顶部按钮（右下角浮动圆形按钮）
   - 滚动超过 400px 后显示
   - 带淡入动画
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 50%;                      /* 圆形按钮 */
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 2px 12px rgba(44,123,229,0.3);
  opacity: 0;                              /* 默认隐藏 */
  transform: translateY(10px);             /* 初始向下偏移 */
  transition: all 0.3s;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-to-top.visible {                     /* 滚动后显示 */
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 4px 16px rgba(44,123,229,0.4);
}

/* ============================================================
   首页布局
   - 介绍区域：标题 + 简介 + 二维码
   - 三栏卡片：知识库 / 交易技术商城 / 统计与数据
   - Banner 广告条
   ============================================================ */

/* 介绍区域：左侧文字介绍 + 右侧二维码 */
.home-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border-light);  /* 底部分割线 */
}

.home-intro .intro-text h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: none;
}

.home-intro .intro-text p {
  color: var(--color-text-secondary);
  font-size: 15px;
  margin-bottom: 0;
}

/* 首页二维码区域 */
.home-intro .intro-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.home-intro .intro-qr .qr-placeholder {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.home-intro .intro-qr span {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* 三栏卡片网格布局 */
.home-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 三等分 */
  gap: 20px;
}

.home-card {
  background: #fafbfc;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;             /* 悬停时阴影变化 */
}

.home-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.home-card .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 12px;
}

.home-card .card-header .card-icon {
  font-size: 22px;
}

.home-card .card-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.home-card .card-body {
  padding: 0 20px 18px;
}

/* 卡片内链接列表 */
.home-card .card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-card .card-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.home-card .card-list li:last-child {
  border-bottom: none;
}

.home-card .card-list li a {
  color: var(--color-text-secondary);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.15s;
}

.home-card .card-list li a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* ============================================================
   Banner 广告条（首页中部促销横幅）
   - 蓝紫渐变背景
   - 图标 + 文案 + CTA 按钮
   ============================================================ */
.home-banner {
  margin: 24px 0;
  background: linear-gradient(135deg, #1a3a5c 0%, #2c7be5 100%);  /* 深蓝到主色渐变 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(44, 123, 229, 0.25);
}

.home-banner .banner-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 36px;
}

.home-banner .banner-icon {
  font-size: 40px;
  flex-shrink: 0;
}

.home-banner .banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
}

.home-banner .banner-text strong {
  font-size: 18px;
  font-weight: 700;
}

.home-banner .banner-text span {
  font-size: 14px;
  opacity: 0.85;                           /* 副标题略微透明 */
}

.home-banner .banner-btn {
  flex-shrink: 0;
  padding: 10px 28px;
  background: #fff;
  color: #2c7be5;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.home-banner .banner-btn:hover {
  background: #e8f0fe;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);  /* 悬停发光 */
}

/* ============================================================
   估值分析 - 页面标题行（标题 + 股票搜索框）
   左侧：股票名称 + 代码
   右侧：搜索输入框 + 查询按钮
   ============================================================ */
.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;                         /* 窄屏时换行 */
}

.page-header-row h1 {
  margin: 0;
  flex-shrink: 0;
}

/* 标题中股票代码的小字显示 */
.stock-code-inline {
  font-size: 0.55em;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 4px;
}

/* 标题与下方内容之间的分割线 */
.page-header-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 16px 0;
  width: 100%;
}

/* ============================================================
   估值分析 - 股票基本面数据信息栏（蓝色背景）
   显示：交易日、价格、市盈率PE_ttm、市净率PB、换手率、股息率、总市值、市盈率PE、市销率
   每个指标可点击切换图表显示（metric-cell）
   ============================================================ */
.stock-data-callout {
  font-size: 13px;
  line-height: 2;
  color: #1e40af;
}

/* 数据行：flex 横向排列，每行5个指标 */
.stock-data-row {
  display: flex;
}

.stock-data-cell {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

/* 可点击的指标单元格（点击切换图表显示的指标） */
.stock-data-cell.metric-cell {
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  transition: background 0.15s, box-shadow 0.15s;
}

.stock-data-cell.metric-cell:hover {
  background: rgba(44, 123, 229, 0.08);
  box-shadow: 0 0 0 1px rgba(44, 123, 229, 0.25);
}

/* 当前激活的指标（蓝色高亮） */
.stock-data-cell.metric-cell.active {
  background: rgba(44, 123, 229, 0.14);
  box-shadow: 0 0 0 1.5px rgba(44, 123, 229, 0.5);
}

.stock-label {
}

/* ============================================================
   估值分析 - 股票搜索框与自动补全
   输入股票代码/拼音首字母，实时查询并展示下拉建议
   ============================================================ */
.stock-header {
  margin-bottom: 16px;
}

.stock-search {
  display: flex;
  gap: 8px;
}

/* 输入框容器（relative 定位用于下拉框） */
.stock-search-input-wrap {
  flex: 1;
  position: relative;
}

.stock-search-input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* 聚焦时蓝色边框 + 外发光 */
.stock-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.15);
}

/* 查询按钮 */
.stock-search-btn {
  padding: 10px 24px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.stock-search-btn:hover {
  background: var(--color-primary-dark);
}

/* 股票信息展示 */
.stock-info {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.stock-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

.stock-code {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ============================================================
   估值分析 - 股票搜索下拉提示（自动补全）
   输入时实时匹配，显示股票名称 + 代码
   支持键盘上下选择、回车确认、点击选择
   ============================================================ */
.stock-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 280px;                       /* 最多显示约10条 */
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: none;                        /* 与输入框无缝衔接 */
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1000;
  display: none;                           /* 默认隐藏 */
  margin-top: -1px;
}

.stock-search-dropdown.show {              /* JS 动态添加 show 类显示 */
  display: block;
}

/* 每个下拉选项：左侧股票名称 + 右侧代码 */
.stock-search-dropdown .dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.15s;
}

.stock-search-dropdown .dropdown-item:last-child {
  border-bottom: none;
}

.stock-search-dropdown .dropdown-item:hover,
.stock-search-dropdown .dropdown-item.active {
  background: var(--color-primary-light);   /* 悬停/键盘选中高亮 */
}

.stock-search-dropdown .dropdown-item .item-name {
  font-weight: 500;
}

.stock-search-dropdown .dropdown-item .item-code {
  color: var(--color-text-secondary);
  font-size: 13px;
}

/* 无匹配结果提示 */
.stock-search-dropdown .dropdown-empty {
  padding: 12px 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ============================================================
   估值分析 - 时间周期选择器
   切换图表数据范围：近3月/6月/1年/3年/5年/10年/全部
   + "全部百分位"切换按钮（显示/隐藏10%/30%/70%/90%分位线）
   ============================================================ */
.period-selector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 0;
}

.period-label {
  font-size: 14px;
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-right: 0;
}

/* 周期按钮：连成一组，相邻按钮边框合并 */
.period-btn {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 0;                        /* 默认无圆角 */
  background: #fff;
  color: var(--color-text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-sans);
  margin-left: -1px;                       /* 边框合并，避免双线 */
}

/* 首尾按钮加圆角 */
.period-btn:first-of-type {
  margin-left: 0;
  border-radius: 4px 0 0 4px;
}

.period-btn:last-of-type {
  border-radius: 0 4px 4px 0;
}

.period-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 当前激活的周期（蓝色实心） */
.period-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 500;
}

/* 百分位分位线多选按钮组（3/7、2/8、1/9）—— 样式与 period-btn 一致 */
.pct-group {
  display: inline-flex;
  margin-left: 24px;
}

.pct-btn {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: #fff;
  font-size: 12px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-sans);
  margin-left: -1px;
}

.pct-btn:first-child {
  margin-left: 0;
  border-radius: 4px 0 0 4px;
}

.pct-btn:last-child {
  border-radius: 0 4px 4px 0;
}

.pct-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pct-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 500;
}

/* 全部百分位切换按钮（index_dailybasic.html 等页面使用，独立按钮） */
.percentile-toggle-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  padding: 4px 10px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
}

.percentile-toggle-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.percentile-toggle-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* 曲线图/柱状图切换按钮（位于图表容器右上角，下载按钮下方） */
.chart-type-toggle-btn {
  position: absolute;
  top: 64px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fafbfc;
  color: #555;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.chart-type-toggle-btn:hover {
  color: #1a1a1a;
  border-color: #9ca3af;
  background: #f3f4f6;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* ============================================================
   估值分析 - 走势图区域（ECharts 图表容器）
   - 浅灰背景卡片包裹
   - 顶部标题 + 周期选择器 + 图表区
   - ECharts 实例渲染到 #pe-ttm-chart
   ============================================================ */
.chart-container {
  position: relative;
  margin-bottom: 24px;
  padding: 20px 0;
  background: #fff;
  border: none;
  border-radius: 8px;
}

/* 图表区块标题（如"贵州茅台（600519）历史市盈率PE_ttm走势图"） */
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 20px 0 12px;
  text-align: center;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 20px;
  text-align: center;
}

.chart-download-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfc;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  color: #555;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: all 0.2s;
  z-index: 10;
}
.chart-download-btn:hover {
  color: #1a1a1a;
  border-color: #9ca3af;
  background: #f3f4f6;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* 下载按钮在 period-selector 内：与 ECharts 图表右边缘对齐 */
.period-selector .chart-download-btn {
  top: 50%;
  transform: translateY(-50%);
  right: 64px;
}

/* 切换按钮在 period-selector 内：下载按钮左侧紧挨 */
.period-selector .chart-type-toggle-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 98px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

/* 图表区域容器（可横向滚动） */
.chart-area {
  width: 100%;
  overflow-x: auto;
}

/* 空状态占位 */
.chart-placeholder {
  width: 100%;
  min-height: 320px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ECharts 图表实例 DOM */
.chart-echarts {
  width: 100%;
  height: 350px;
  min-height: 360px;
}

/* ============================================================
   估值分析 - 当前百分位进度条（4列均匀分布）
   显示近3年/近5年/近10年/所有时间 四个时间段的百分位
   颜色根据百分位值分档：绿(<25%) → 浅绿(25-50%) → 黄(50-75%) → 红(≥75%)
   ============================================================ */
.percentile-current {
  margin-bottom: 24px;
  padding: 24px;
  background: #fafbfc;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
}

/* 百分位标题（如"贵州茅台 当前 市盈率PE_ttm 百分位"） */
.percentile-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 20px;
}

/* 四个进度条横向排列 */
.percentile-bars {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* 每个进度条项（标签 + 进度条） */
.progress-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 18%;                              /* 4列约等分 */
}

/* 移动端两列布局 */
@media (max-width: 640px) {
  .percentile-bars {
    flex-wrap: wrap;
  }
  .progress-item {
    width: 45%;
  }
}

/* 进度条标签（如"近3年：65%"） */
.progress-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  text-align: left;
}

/* 进度条底色轨道 */
.progress-track {
  width: 100%;
  height: 14px;
  background: #e8f0fe;                     /* 浅蓝底色 */
  border-radius: 20px;
  overflow: hidden;
}

/* 进度条填充（JS 动态设置 width 和 background） */
.progress-fill {
  height: 100%;
  border-radius: 20px;
  transition: width 0.6s ease;             /* 宽度变化动画 */
}

@media (max-width: 640px) {
  .percentile-bars {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   估值分析 - 十年百分位数值表
   显示 10%/20%/30%/.../90% 各分位对应的具体数值
   中位数（50%）用蓝色高亮
   ============================================================ */
.percentile-table-wrap {
  margin-bottom: 24px;
}

.percentile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* 表头：百分位标签 */
.percentile-table thead th {
  background: #f0f4f8;
  padding: 10px 12px;
  text-align: center;
  font-weight: 600;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-size: 13px;
}

/* 数值单元格：等宽字体对齐 */
.percentile-table td {
  padding: 10px 12px;
  text-align: center;
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);            /* 数字等宽对齐 */
  font-size: 13px;
}

/* 首列（指标名称）用普通字体 */
.percentile-table td:first-child {
  font-weight: 600;
  color: var(--color-text);
  background: #f8f9fa;
  font-family: var(--font-sans);
}

/* 中位数（50%）蓝色高亮 */
.percentile-table .highlight-median {
  background: #eff6ff;
  color: var(--color-primary);
  font-weight: 700;
}

/* ============================================================
   打印样式
   隐藏导航栏、侧边栏、回到顶部按钮，内容占满纸张
   ============================================================ */
/* ============================================================
   工具类 - 文字标红
   ============================================================ */
.text-red {
  color: #e53e3e;
  font-weight: 700;
}

/* ============================================================
   统一页脚
   由 components/footer.html 动态加载，所有页面共用
   ============================================================ */
.site-footer {
  margin-top: 32px;
  padding: 16px 0;
  text-align: center;
}
.site-footer .footer-inner a {
  font-size: 13px;
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer .footer-inner a:hover {
  color: #6b7280;
}

@media print {
  .topbar,
  .sidebar,
  .back-to-top,
  .sidebar-toggle,
  .site-footer {
    display: none !important;
  }
  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
}