:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --border: #e7e5e4;
  --text: #1c1917;
  --text-muted: #78716c;
  --accent: #0c4a6e;
  --row-hover: #f5f5f4;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --ok: #166534;
  --tag-bg: #e0f2fe;
  --tag-fg: #075985;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.container {
  max-width: 1960px;
  margin: 0 auto;
  padding: 0 12px;
}

/* 顶部栏 */
header.app-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  max-width: 1960px;
  margin: 0 auto;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.brand a { color: var(--text); }

/* 顶栏导航: 字+底部 accent 短线 (hover slide-in / active 满宽) */
.app-nav {
  display: flex;
  gap: 22px;
  align-items: center;
}
.app-nav a {
  position: relative;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  padding: 6px 0;
  text-decoration: none;
  transition: color 0.18s ease;
}
.app-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: width 0.22s ease;
}
.app-nav a:hover {
  color: var(--text);
  text-decoration: none;
}
.app-nav a:hover::after { width: 60%; }
.app-nav a.active {
  color: var(--text);
  font-weight: 600;
  /* 加粗后字宽轻微变化, 用 letter-spacing 负值补偿避免布局跳动 */
  letter-spacing: -0.2px;
}
.app-nav a.active::after { width: 100%; }

/* 心跳横幅 */
.banner {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #f5f5f4;
  color: var(--text-muted);
}
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.bad { background: var(--bad-bg); color: var(--bad); }

/* 主区 */
main.app-main {
  padding: 24px 0 60px;
  min-height: calc(100vh - 60px - 100px);
}

/* 板块标题 */
.section {
  margin-bottom: 36px;
}
.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.section-title .count {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 13px;
}

/* 表格 */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  /* 隐藏横向滚动条本身但保留滚动行为 (Shift+滚轮 / 触控板横扫仍可用) */
  scrollbar-width: none;
}
.table-wrap::-webkit-scrollbar { display: none; }
table.stocks {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
  table-layout: fixed;
}
table.stocks thead {
  background: #fafaf9;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
table.stocks th,
table.stocks td {
  text-align: center;
}
table.stocks th {
  font-weight: 500;
  color: var(--text-muted);
  padding: 9px 3px;
}
table.stocks td {
  padding: 10px 3px;
  border-bottom: 1px solid var(--border);
}
table.stocks tbody tr:last-child td { border-bottom: none; }
table.stocks tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
table.stocks tbody tr:nth-child(even) { background: #fafaf9; }
table.stocks tbody tr:hover { background: var(--row-hover); }
table.stocks .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  font-size: 12px;
}
table.stocks .name { font-weight: 500; }
table.stocks .num {
  font-variant-numeric: tabular-nums;
}
/* 认购倍数: ≥1000x 红 (其他默认黑) */
.sub-hot { color: #dc2626; }

/* 涨跌幅: 绿涨红跌 */
.chg-up   { color: #16a34a; }
.chg-down { color: #dc2626; }

/* 日期后面的中文星期数：小一号 + 灰，视觉次要 */
.wk { color: var(--text-muted); font-size: 11px; }

/* 今天的日期高亮: 橙色字 + 圆点, 与灰黑字海色相对比大, 跳眼但无背景不丑 */
.date-today {
  color: #ea580c;
  font-weight: 600;
}
.date-today::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ea580c;
  margin-right: 6px;
  vertical-align: 1px;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}
.date-today .wk { color: inherit; opacity: 0.75; }

/* 认购倍数后面的「实时」标记 (招股中/待上市股) */
.realtime-tag { color: var(--text-muted); font-size: 10px; margin-left: 3px; }


/* 短标签：行业 / 分配机制等离散值 */
.cell-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  line-height: 1.5;
}

/* 首页「查看全部 N 条 →」链接 */
.more-link {
  margin-top: 8px;
  text-align: right;
  font-size: 13px;
}
.more-link a { color: var(--text-muted); }
.more-link a:hover { color: var(--accent); }

/* 翻页器 */
.section-title .section-back {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
}
.pager {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
}
.pager a, .pager span {
  display: inline-block;
  margin: 0 3px;
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--text);
  min-width: 24px;
}
.pager a:hover {
  background: var(--row-hover);
  text-decoration: none;
}
.pager .current {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.pager .dots {
  color: var(--text-muted);
  padding: 4px 2px;
}
table.stocks .empty {
  text-align: center;
  color: var(--text-muted);
  padding: 24px;
}

/* 详情页 header: 3 行紧凑 (返回 / 标题 / metadata 一行) */
.detail-header {
  margin-bottom: 20px;
}
.detail-header .back {
  display: inline-block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.detail-header .title-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.detail-header h1 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.detail-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.detail-sub .tag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 3px;
  min-width: 24px;
  text-align: center;
  line-height: 1.5;
}
.tag {
  background: var(--tag-bg);
  color: var(--tag-fg);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}
/* 详情页 header chip 语义色 (覆盖 .tag 默认 sky 蓝) */
.tag-industry           { background: #f1f5f9; color: #475569; }    /* 行业: 中性灰 */
.tag-status-apply       { background: #fef3c7; color: #92400e; }    /* 招股中: 黄 */
.tag-status-listing     { background: #fed7aa; color: #9a3412; }    /* 待上市: 橙 */
.tag-status-listed      { background: #d1fae5; color: #065f46; }    /* 已上市: 绿 */
.tag-mech               { background: #e0e7ff; color: #3730a3; }    /* 分配机制 B/18C: 紫 */
.tag-eipo               { background: #fce7f3; color: #9f1239; }    /* EIPO: 粉红 */

/* 回拨机制表格 */
.cb-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.cb-table th,
.cb-table td {
  padding: 7px 10px;
  text-align: center;
}
/* .cb-table--named 用于首列是机构名/姓名 (长短不一)的表 (基石投资者 / 管理团队);
   回拨机制表分档标签 ("< 10x" 等固定短文) 用默认 cb-table 全居中, 不加这个 modifier。 */
.cb-table--named th:first-child,
.cb-table--named td:first-child {
  text-align: left;
}
.cb-table thead th {
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.cb-table tbody tr + tr td {
  border-top: 1px solid var(--border);
}
.cb-table tbody tr.cb-current-row td {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}
.cb-table .cb-star {
  color: #d97706;
  margin-left: 4px;
}
.pdf-link {
  margin-left: auto;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
}

/* 详情页栏布局:
   - 无 JS / 单列 fallback: section 垂直堆叠
   - 大屏: detail-masonry.js 计算 + absolute 定位 (短 section 自动填空隙, 类似 Pinterest masonry)
     CSS columns 自动 balance 算法会让某列大空白, 所以放弃用 CSS columns. */
.detail-grid {
  margin: 0;
}
.detail-grid.masonry-active {
  position: relative;
}
.detail-grid.masonry-active > .section-block {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
}

.section-block {
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  /* CSS columns 内防止 section 被切成两栏 */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* 提示浏览器: 该 section 不要在前面分列 (跟上一个 section 保持同列);
   用于"基石投资者"等想紧跟"机构信息"的板块。浏览器对此是 hint 不保证生效。 */
.section-block--keep-with-prev {
  break-before: avoid-column;
  -webkit-column-break-before: avoid;
}
.section-block h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
/* 详情页 kv 列表: 左 label + 右 value 两列, 对照 JYB App 实物风格 (label 列固定窄, value 多行靠左) */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 6px;
  margin: 0;
}
.kv dt {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
  line-height: 1.5;
}
.kv dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.kv dd.long {
  white-space: pre-wrap;
}
.section-block .block-sub-title {
  font-size: 13px;
  margin-top: 10px;
  margin-bottom: 0;
  color: var(--text-muted);
  font-weight: 400;
  text-align: center;
}
/* 长文小节标题保留左对齐 (居中跟下面左对齐的长文显得错位) */
.section-block .block-sub-title--left {
  text-align: left;
}
/* h2 / h3 行尾的小型 meta 标注 (如"合计 54.84%") */
.section-block .block-sub-meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 8px;
}
/* stat-value 内联小灰字单位 (如"人民币") */
.stat .stat-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}
.section-block .long-text {
  white-space: pre-wrap;
  margin: 4px 0 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
/* 配售结果板块顶部 4 列横排指标卡 (其他短字段板块也共用) */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 2px 0 4px;
}
.stat {
  text-align: center;
  padding: 6px 4px;
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.stat-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;
}

/* 数据分析页 (/stats) — section 描述 + 图表容器 */
.section-desc {
  color: var(--text-muted);
  font-size: 13px;
  margin: -4px 0 12px;
}
.chart-wrap {
  position: relative;
  width: 100%;
  height: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}
/* 带底部 dataZoom slider 的图: 总高加 90px (主图 440 + slider 90) */
.chart-wrap-tall { height: 530px; }

/* 占位页 (待开发中) */
.placeholder {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}
.placeholder-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.7;
}
.placeholder-text {
  font-size: 15px;
}

/* 页脚 */
footer.app-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 18px 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* ============== 移动端 ============== */
@media (max-width: 768px) {
  .container { padding: 0 12px; }
  .header-inner { padding: 12px; }
  .header-left { gap: 14px; }
  .app-nav { gap: 12px; }
  .app-nav a { font-size: 13px; }
  .cb-table { font-size: 12px; }
  .cb-table th, .cb-table td { padding: 7px 8px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .chart-wrap { height: 320px; padding: 8px; }
  .chart-wrap-tall { height: 380px; }

  /* 表格 -> 卡片: 整张表去框, 每 tr 独立卡片 */
  .table-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  table.stocks {
    display: block;
    width: 100%;
    table-layout: auto;
  }
  table.stocks colgroup,
  table.stocks thead { display: none; }
  table.stocks tbody { display: block; }
  table.stocks tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 12px 14px;
  }
  /* 取消桌面的斑马纹 / hover (卡片本身已有独立背景) */
  table.stocks tbody tr:nth-child(even),
  table.stocks tbody tr:hover { background: var(--surface); }

  /* 每个 td 变成「左 label : 右 value」一行 */
  table.stocks td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    border-bottom: none;
    text-align: right;
  }
  table.stocks td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* 卡片头: 代码 + 名称 - 不显示 label, 左对齐, 名称大字 */
  table.stocks td.code,
  table.stocks td.name {
    display: block;
    padding: 0;
    text-align: left;
  }
  table.stocks td.code::before,
  table.stocks td.name::before { display: none; }
  table.stocks td.code {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 2px;
  }
  table.stocks td.name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  /* 空状态行 (「暂无」) 居中 */
  table.stocks tbody td.empty {
    display: block;
    text-align: center;
    color: var(--text-muted);
    padding: 24px 0;
  }
  table.stocks tbody td.empty::before { display: none; }
}