/* ETF估值表 H5 —— 复刻微信小程序视觉（配色取自小程序截图） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #f7f7f7;
  color: #333;
  font-size: 14px;
}
.page { max-width: 640px; margin: 0 auto; background: #fff; min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- 顶部导航锚点（行情/估值/业绩/费率） ---------- */
.navbar { display: flex; background: #fff; border-bottom: .5px solid #e5e5e5; position: sticky; top: 0; z-index: 30; }
.navbar .nav-item { flex: 1; text-align: center; padding: 13px 0 11px; font-size: 16px; color: #333; position: relative; cursor: pointer; user-select: none; }
.navbar .nav-item.active { color: #4d80f0; font-weight: 600; }
.navbar .nav-item.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; width: 28px; height: 3px; border-radius: 2px; background: #4d80f0; }

/* ---------- 标题区 ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 16px 14px; background: #fff; }
.section-head .title { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.section-head .date { font-size: 14px; color: #999; }

/* ---------- 分类页签 ---------- */
.cat-tabs { display: flex; background: #fff; border-bottom: .5px solid #eaeaea; position: sticky; top: 45px; z-index: 29; overflow-x: auto; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs .cat-item { flex: 0 0 auto; padding: 12px 14px 10px; font-size: 15px; color: #333; position: relative; cursor: pointer; white-space: nowrap; }
.cat-tabs .cat-item.active { color: #4d80f0; font-weight: 600; }
.cat-tabs .cat-item.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 3px; width: 24px; height: 3px; border-radius: 2px; background: #4d80f0; }

/* ---------- 主表格 ---------- */
.table-wrap { flex: 1; overflow: hidden; }
.table-scroll { overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 180px); background: #fff; }
table.etf { border-collapse: separate; border-spacing: 0; min-width: 100%; table-layout: fixed; }
table.etf th {
  position: sticky; top: 0; z-index: 10;
  background: #fff; color: #333; font-size: 12.5px; font-weight: 600;
  line-height: 1.35; white-space: pre-line;
  padding: 9px 8px; text-align: left; border-bottom: .5px solid #e5e5e5;
}
table.etf td { padding: 8px 8px; font-size: 14px; color: #1a1a1a; border-bottom: .5px solid rgba(0,0,0,.04); background: var(--rowbg, #fff); vertical-align: middle; }
table.etf td.num { white-space: nowrap; }
table.etf td.num, table.etf th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.etf td.center, table.etf th.center { text-align: center; }

/* 左侧固定列 */
table.etf th.fixed-l, table.etf td.fixed-l { position: sticky; z-index: 5; }
table.etf th.fixed-l { z-index: 11; }
td.fixed-l.box-shadow::after, th.fixed-l.box-shadow::after {
  content: ""; position: absolute; top: 0; right: -6px; bottom: 0; width: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), transparent); pointer-events: none;
}
.col-optional { width: 34px; text-align: center; cursor: pointer; }
.col-name { min-width: 100px; max-width: 104px; line-height: 1.3; font-size: 14px; word-break: break-all; cursor: pointer; }
.col-code { min-width: 62px; }

/* 估值状态徽标（色值取自小程序源码 getTdStyle 及徽标样式） */
.badge { display: inline-block; margin-top: 4px; padding: 2px 5px; font-size: 11px; line-height: 1.2; border-radius: 3px; color: #fff; }
.badge.st-1 { background: #03914a; }   /* 低估：深绿 */
.badge.st-2 { background: #F07000; }   /* 适中：深橙 */
.badge.st-3 { background: #cf1322; }   /* 高估：深红 */

/* 行背景（估值状态，整行染色同小程序） */
tr.st-1 td { --rowbg: #61B335; }       /* 低估：绿 */
tr.st-2 td { --rowbg: #FF9E43; }       /* 适中：橙 */
tr.st-3 td { --rowbg: #f5222d; }       /* 高估：红 */
tr.st-1 td.col-name, tr.st-2 td.col-name, tr.st-3 td.col-name { font-weight: 600; }

/* 自选图标 */
.watch-ic { display: inline-block; width: 19px; height: 19px; line-height: 19px; text-align: center; border-radius: 4px; font-size: 14px; color: #666; border: 1.4px solid #808080; position: relative; }
.watch-ic::before { content: "+"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font-weight: 500; }
.watch-ic.on { border-color: #f7b500; background: #f7b500; color: #fff; }
.watch-ic.on::before { content: "★"; font-size: 11px; }

/* loading / empty */
.page-tip { padding: 40px 0; text-align: center; color: #999; font-size: 14px; }
.spin { display: inline-block; width: 18px; height: 18px; border: 2px solid #e5e5e5; border-top-color: #4d80f0; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -4px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 详情页 ---------- */
.detail-head { display: flex; align-items: center; padding: 14px 16px; background: #fff; border-bottom: .5px solid #eee; position: sticky; top: 0; z-index: 30; }
.detail-head .back { font-size: 20px; color: #333; padding: 0 10px 0 0; cursor: pointer; text-decoration: none; }
.detail-head .dtitle { font-size: 17px; font-weight: 600; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 图表上方数据头（当前价格 / 后复权收盘价 / 当前PE/PB + 数据日期） */
.head-stats { display: grid; grid-template-columns: 1fr 1fr; row-gap: 20px; padding: 20px 16px 8px; background: #fff; }
.head-stats .hs { display: flex; justify-content: space-between; align-items: baseline; padding-right: 14px; font-size: 15px; color: #1a1a1a; }
.head-stats .hs .k { font-weight: 500; }
.head-stats .hs .v { font-variant-numeric: tabular-nums; }

.seg-wrap { padding: 12px 12px 4px; background: #fff; }
.seg { display: flex; background: #fff; border: 1px solid rgba(77,128,240,.45); border-radius: 8px; padding: 2px; }
.seg .seg-item { flex: 1; text-align: center; padding: 7px 0; font-size: 14px; color: #4d80f0; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.seg .seg-item.active { background: #4d80f0; color: #fff; font-weight: 600; }

/* 触碰图表时的数据读出条 */
.readout { background: #fff5e5; padding: 8px 14px; font-size: 13px; color: #333; font-variant-numeric: tabular-nums; }

.chart-box { background: #fff; padding: 4px 0 0; }
#chart { width: 100%; height: 300px; }

/* 指标区：标签行灰底 + 数值行白底（同小程序） */
.stat-labels { display: flex; background: #f5f6f8; padding: 12px 0; }
.stat-labels .cell { flex: 1; text-align: center; font-size: 14px; color: #1a1a1a; }
.stat-values { display: flex; background: #fff; padding: 14px 0 18px; border-bottom: .5px solid #f0f0f0; }
.stat-values .cell { flex: 1; text-align: center; font-size: 16px; color: #1a1a1a; font-variant-numeric: tabular-nums; }

.detail-tabs { display: flex; background: #fff; border-bottom: .5px solid #e5e5e5; }
.detail-tabs .dt { flex: 1; text-align: center; padding: 13px 0 11px; font-size: 16px; color: #333; position: relative; cursor: pointer; }
.detail-tabs .dt.active { color: #4d80f0; font-weight: 600; }
.detail-tabs .dt.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; width: 28px; height: 3px; border-radius: 2px; background: #4d80f0; }

.tip-bar { padding: 8px 16px 20px; font-size: 12px; color: #bbb; text-align: center; background: #fff; }

/* 更新提示条 */
.refresh-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: #f7f7f7; font-size: 12px; color: #999; }
.refresh-bar .btn { color: #4d80f0; cursor: pointer; }