/* ============================================================
   研报资料库 · 看板样式 v2（2026-11-04 视觉升级）
   设计目标：深海军蓝 + 研报金的金融终端气质；仅改表现层，
   全部类名/结构/接口保持与 v1 兼容。
   ============================================================ */
:root{
  /* 中性色板 */
  --bg:#f2f4f8;
  --panel:#ffffff;
  --line:#e3e8f0;
  --line-soft:#edf1f6;
  --text:#14202e;
  --text-2:#3d4b5c;
  --muted:#75829a;
  /* 品牌色 */
  --navy:#0e1c30;
  --navy-2:#16294a;
  --accent:#b07d10;
  --accent-strong:#8f660c;
  --accent-soft:#faf3df;
  /* 语义色（A股：红涨绿跌） */
  --up:#d43030;
  --down:#1a9e5c;
  --blue:#2f6fed;
  /* 阴影 */
  --shadow-sm:0 1px 2px rgba(16,32,54,.05);
  --shadow-md:0 1px 2px rgba(16,32,54,.04),0 6px 20px -4px rgba(16,32,54,.10);
  --shadow-lg:0 4px 12px rgba(16,32,54,.08),0 16px 40px -8px rgba(16,32,54,.16);
  --radius:14px;
}
*{box-sizing:border-box}
/* 不用 overflow:hidden/clip 兜底：会掩盖真实溢出，也会让 scrollWidth 失真，
   验收靠 tools/mobile_audit.py 量真实溢出，样式层只做真修复 */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.65 -apple-system,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
/* 锚点跳转（说明书页 #guide/#metrics）要避开吸顶栏，否则标题被压在栏下 */
:target{scroll-margin-top:76px}
a{color:inherit;text-decoration:none}
::selection{background:rgba(176,125,16,.22)}

/* ---------------- 顶栏 ---------------- */
.top{display:flex;align-items:center;gap:20px;padding:0 24px;height:58px;
  background:linear-gradient(100deg,var(--navy) 0%,var(--navy-2) 60%,#1d3560 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 12px rgba(10,20,38,.35);
  position:sticky;top:0;z-index:20}
.brand{font-weight:800;letter-spacing:1px;font-size:16px;color:#f4f7fb;
  display:flex;align-items:center;gap:8px}
.brand::before{content:"";width:9px;height:9px;transform:rotate(45deg);flex:none;
  background:linear-gradient(135deg,#e9c65a,var(--accent));
  border-radius:2px;box-shadow:0 0 8px rgba(233,198,90,.55)}
.brand span{color:#e9c65a}
.nav{display:flex;gap:2px}
.nav a{padding:6px 14px;border-radius:9px;color:#9fb0c9;font-size:13.5px;
  transition:color .15s,background .15s}
.nav a:hover{color:#e8eef7;background:rgba(255,255,255,.07)}
.nav a.on{background:rgba(233,198,90,.16);color:#f0cd6b;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(233,198,90,.28)}
.spacer{flex:1}
.search input{padding:7px 14px;width:210px;outline:none;font-size:13px;
  color:#e8eef7;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);border-radius:9px;
  transition:border-color .15s,background .15s,box-shadow .15s}
.search input::placeholder{color:#7488a5}
.search input:focus{background:rgba(255,255,255,.14);border-color:rgba(233,198,90,.55);
  box-shadow:0 0 0 3px rgba(233,198,90,.15)}
.top .muted{color:#8b9db8}
.top .muted:hover{color:#e8eef7}

/* ---------------- 布局 ---------------- */
.wrap{max-width:1320px;margin:0 auto;padding:22px}
.grid{display:grid;gap:16px}
/* 四档：≥1101 桌面原样；≤1100 四列降两列；≤900 三列降一列；
   ≤640 两列（统计卡）与一列（图表/列表）——不再一刀切压成一列 */
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
@media(max-width:640px){.g4{grid-template-columns:repeat(2,1fr)}.grid{gap:12px}}

/* ---------------- 卡片 ---------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-sm);
  animation:rise .35s ease both}
.card:nth-child(2){animation-delay:.04s}
.card:nth-child(3){animation-delay:.08s}
.card:nth-child(4){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card h3{margin:0 0 14px;font-size:13px;font-weight:700;color:var(--text-2);
  letter-spacing:.6px;display:flex;align-items:center;gap:8px}
.card h3::before{content:"";width:4px;height:14px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,#e9c65a,var(--accent))}
.kpi{font-size:30px;font-weight:800;line-height:1.15;letter-spacing:-.5px;
  color:var(--navy);font-variant-numeric:tabular-nums}
.kpi small{font-size:12.5px;color:var(--muted);font-weight:500;margin-left:4px}
.sub{color:var(--muted);font-size:12.5px;margin-top:4px}

/* ---------------- 表格 ---------------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-soft);
  white-space:nowrap}
th{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.4px;
  background:#f7f9fc}
/* 可滚动容器内的表头吸附（如个股评级明细、行业热力图） */
div[style*="overflow"] th{position:sticky;top:0;z-index:1;
  box-shadow:0 1px 0 var(--line-soft)}
thead tr:first-child th:first-child{border-top-left-radius:8px}
thead tr:first-child th:last-child{border-top-right-radius:8px}
tbody tr{transition:background .12s}
tbody tr:hover{background:#f5f8fd}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.up{color:var(--up);font-weight:600}
.down{color:var(--down);font-weight:600}
.muted{color:var(--muted)}
td a{color:var(--blue)}
td a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------------- 表头排序 ---------------- */
/* 不设 background：保留 th 的 #f7f9fc 底色，避免表头出现色块 */
.sortable{display:inline-flex;align-items:center;gap:2px;cursor:pointer;
  color:inherit;border-bottom:1px dashed transparent;
  transition:color .15s,border-color .15s}
.sortable:hover{color:var(--accent-strong);border-bottom-color:var(--accent)}
/* 不用 font-weight 加粗：加粗会让该列变宽 1px，切换排序时整张表列宽跳动 */
.sortable.on{color:var(--navy)}
.sortable:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* 固定宽度占位：▲ ▼ ⇅ 字宽不同，不加这个切一次就抖一次列宽 */
.sort-mark{display:inline-block;width:12px;text-align:center;font-size:10px;
  line-height:1;color:var(--muted);font-variant-numeric:normal}
.sortable.on .sort-mark{color:var(--accent)}
.sort-sep{color:var(--muted);margin:0 1px}

/* ---------------- 标签 ---------------- */
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;
  font-size:12px;font-weight:500;line-height:1.6;
  background:#f0f3f8;color:#546176;border:1px solid transparent}
.tag.buy{background:rgba(212,48,48,.10);color:#c22626;border-color:rgba(212,48,48,.18)}
.tag.overweight{background:rgba(224,138,0,.11);color:#b26a00;border-color:rgba(224,138,0,.2)}
.tag.neutral{background:#eef1f6;color:#546176;border-color:#e0e6ef}
.tag.underweight,.tag.sell{background:rgba(26,158,92,.11);color:#15803d;
  border-color:rgba(26,158,92,.2)}

/* ---------------- 图表 ---------------- */
/* touch-action:pan-y —— 竖向滑动照常翻页，横向拖动留给图表读数（charts.js 的 Pointer 逻辑） */
.chart{width:100%;height:260px;touch-action:pan-y}.chart svg{width:100%;height:100%;display:block}
.axis{font-size:10.5px;fill:#8d99ac}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:8px;
  flex-wrap:wrap;padding-top:8px;border-top:1px dashed var(--line)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
/* 折线图系列开关：图例项就是 checkbox 的 label，点色块/文字都能切换。
   取消勾选后该线变灰并加删除线，图例本身始终保留，方便勾回来。 */
.legend-item{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  user-select:none;white-space:nowrap;color:var(--text-2)}
.legend-item input[type=checkbox]{width:12px;height:12px;margin:0;flex:none;cursor:pointer}
.legend-item i{margin-right:0}
.legend-item.off{opacity:.45}
.legend-item.off span{text-decoration:line-through}
/* 原本 legend:false 的单线估值图，用更紧凑的一行开关，不挤占图表高度 */
.legend--compact{margin-top:4px;padding-top:4px;gap:12px;font-size:11px}
/* 景气时序图有 6 项图例，会换成两行并溢出 .chart 容器；给足底部空间，
   否则图例第二行会压到紧随其后的表格表头（手机端尤其明显）。
   模板有内联 margin-bottom，这里用 !important 覆盖。 */
#prosperityChart{margin-bottom:48px !important}

/* ---------------- 工具条 / 按钮 ---------------- */
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.btn{display:inline-flex;align-items:center;padding:7px 14px;font-size:13px;
  border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;
  color:var(--text-2);box-shadow:var(--shadow-sm);
  transition:all .15s}
.btn:hover{border-color:var(--accent);color:var(--accent-strong);
  background:var(--accent-soft);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(1px)}
.btn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.on:hover{background:var(--navy-2);color:#fff;border-color:var(--navy-2)}

/* ---------------- 空态 / 错误 ---------------- */
.empty{color:var(--muted);text-align:center;padding:44px 0;font-size:13px}
.err{color:var(--up);font-size:13px;margin-bottom:10px;font-weight:500}

/* ---------------- 登录页 ---------------- */
body:has(>.login){min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(1200px 600px at 15% -10%,rgba(233,198,90,.14),transparent 55%),
    radial-gradient(900px 500px at 90% 110%,rgba(47,111,237,.18),transparent 55%),
    linear-gradient(135deg,#0a1526 0%,var(--navy) 45%,#1a3054 100%)}
.login{width:360px;max-width:calc(100vw - 40px);margin:12vh auto;
  background:rgba(255,255,255,.98);padding:34px 32px 30px;border-radius:18px;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 24px 64px -12px rgba(4,12,26,.55),0 4px 16px rgba(4,12,26,.3);
  animation:rise .4s ease both}
.login h1{font-size:20px;margin:0 0 6px;color:var(--navy);letter-spacing:1px;
  display:flex;align-items:center;gap:10px}
.login h1::before{content:"";width:10px;height:10px;transform:rotate(45deg);
  background:linear-gradient(135deg,#e9c65a,var(--accent));border-radius:2px}
.login p{color:var(--muted);font-size:13px;margin:0 0 22px}
.login input{width:100%;padding:11px 14px;font-size:14px;color:var(--text);
  border:1px solid var(--line);border-radius:10px;margin-bottom:12px;outline:none;
  background:#f8fafc;transition:border-color .15s,box-shadow .15s,background .15s}
.login input:focus{border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(176,125,16,.14)}
.login button{width:100%;padding:11px;border:0;border-radius:10px;font-size:14.5px;
  background:linear-gradient(135deg,#c99212,var(--accent-strong));
  color:#fff;font-weight:700;letter-spacing:2px;cursor:pointer;
  box-shadow:0 6px 16px -4px rgba(176,125,16,.5);
  transition:filter .15s,transform .1s,box-shadow .15s}
.login button:hover{filter:brightness(1.07);box-shadow:0 8px 20px -4px rgba(176,125,16,.6)}
.login button:active{transform:translateY(1px)}

/* ---------------- 横向条形 ---------------- */
.bar-row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:13px}
.bar-row .lbl{width:110px;color:var(--text-2);flex:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bar-row .bar{height:9px;border-radius:5px;min-width:2px;
  background:linear-gradient(90deg,#e9c65a,var(--accent));opacity:.92;
  box-shadow:0 1px 3px rgba(176,125,16,.3);
  transition:filter .15s}
.bar-row:hover .bar{filter:brightness(1.1)}
/* 行业覆盖 Top 12：行业名可点，跳行业详情页。虚线弱提示 + hover 变蓝，
   不改动 .lbl 的定宽/省略号，长行业名仍然只占 110px。 */
.bar-row .lbl a.ind-link{color:var(--blue);border-bottom:1px dashed rgba(47,111,237,.45);cursor:pointer}
.bar-row .lbl a.ind-link:hover,.bar-row .lbl a.ind-link:focus-visible{color:#1b53c0;border-bottom-color:#1b53c0}

/* ---------------- 指标问号悬浮说明 ---------------- */
.qtip{position:relative;display:inline-block;margin-left:5px;vertical-align:1px;
  cursor:help;outline:none}
.qtip-mark{display:inline-flex;width:15px;height:15px;border-radius:50%;
  background:#eef1f6;color:var(--muted);font-size:10px;font-weight:700;line-height:1;
  align-items:center;justify-content:center;border:1px solid var(--line);
  user-select:none;transition:all .15s}
.qtip:hover .qtip-mark,.qtip:focus .qtip-mark{background:var(--accent);color:#fff;
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,125,16,.18)}
.qtip-pop{display:none;position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%);width:300px;
  background:linear-gradient(160deg,#1c2a42,#101c30);
  color:#e6edf7;font-size:12px;font-weight:400;line-height:1.7;
  padding:11px 13px;border-radius:10px;z-index:60;
  border:1px solid rgba(233,198,90,.22);
  box-shadow:0 10px 30px rgba(8,16,30,.4);
  white-space:normal;text-align:left;letter-spacing:0;text-transform:none}
.qtip:hover .qtip-pop,.qtip:focus .qtip-pop{display:block;animation:rise .18s ease both}
.qtip-pop b{display:block;margin-bottom:4px;color:#f0cd6b;font-size:12.5px}
.qtip-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#101c30}
/* 靠右边缘的提示防溢出：倒数第二个字符以内时向左弹 */
.qtip.flip .qtip-pop{left:auto;right:-8px;transform:none}
.qtip.flip .qtip-pop::after{left:auto;right:14px;transform:none}

/* ---------------- 滚动条 ---------------- */
*{scrollbar-width:thin;scrollbar-color:#c3cddd transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:#c3cddd;border-radius:4px}
*::-webkit-scrollbar-thumb:hover{background:#a9b8cd}
*::-webkit-scrollbar-track{background:transparent}

/* ---------------- 细节 ---------------- */
details.card summary{transition:color .15s}
details.card summary:hover{color:var(--accent-strong)}
code{background:#f0f3f8;border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:12.5px;color:var(--accent-strong)}
@media (prefers-reduced-motion:reduce){
  .card,.login{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   财务指标卡片（仿同花顺 F10「主要指标」）
   5 组 22 行 × 报告期列；首列冻结、表头吸附、同比可切换。
   ============================================================ */
.fin-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fin-head h3{margin:0}
.fin-head .sub{font-size:12px}
.seg{display:inline-flex;background:#f1f4f9;border:1px solid var(--line);
  border-radius:9px;padding:2px;gap:2px}
.seg-btn{border:0;background:transparent;color:var(--text-2);font-size:12.5px;
  padding:5px 13px;border-radius:7px;cursor:pointer;font-family:inherit;
  transition:background .15s,color .15s,box-shadow .15s}
.seg-btn:hover{color:var(--accent-strong)}
.seg-btn.on{background:#fff;color:var(--navy);font-weight:600;
  box-shadow:0 1px 2px rgba(16,32,54,.10),0 1px 1px rgba(16,32,54,.04)}
.fin-switch{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--muted);cursor:pointer;user-select:none;padding:5px 4px}
.fin-switch input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}

/* 顶部三块摘要 */
.fin-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.fin-kpi{background:linear-gradient(160deg,#f8fafd,#f1f5fb);border:1px solid var(--line);
  border-radius:11px;padding:11px 14px;display:flex;flex-direction:column;gap:2px}
.fin-kpi-lbl{font-size:12px;color:var(--muted);letter-spacing:.3px}
.fin-kpi-val{font-size:22px;font-weight:750;color:var(--navy);line-height:1.25;
  letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.fin-kpi .fin-yoy{display:inline;font-size:12px;margin-top:1px}

/* 表格 */
.fin-scroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:10px}
.fin-table{border-spacing:0;font-size:12.5px;min-width:100%}
.fin-table th,.fin-table td{padding:7px 12px;border-bottom:1px solid var(--line-soft)}
.fin-table thead th{background:#f7f9fc;position:sticky;top:0;z-index:3;
  font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap}
.fin-table thead th.num{text-align:right}
.fin-table th.fin-name{left:0;z-index:4;width:1px;min-width:180px}
.fin-table td.fin-name{position:sticky;left:0;background:var(--panel);z-index:2;
  color:var(--text-2);border-right:1px solid var(--line-soft)}
.fin-table tbody tr:hover td{background:#f5f8fd}
.fin-table tbody tr:hover td.fin-name{background:#f5f8fd}
.fin-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--navy);font-weight:550}
.fin-table tr.fin-group td{background:#eef2f8;color:var(--text-2);
  font-size:11.5px;font-weight:700;letter-spacing:.8px;padding:5px 0;border-bottom:1px solid #e6ecf4}
/* 分组行跨全部列，整格 sticky 会被表宽撑开、横向滚动时首字被裁；
   让格内标签自己 sticky，滚动时始终贴在左侧。 */
.fin-group-lbl{position:sticky;left:12px;display:inline-block;padding-left:12px}
.fin-table.fin-narrow{width:auto;min-width:0}
.fin-table.fin-narrow th.num,.fin-table.fin-narrow td.num{min-width:130px}
.fin-plink{color:var(--text-2);border-bottom:1px dotted #c3cddd}
.fin-plink:hover{color:var(--accent-strong);border-bottom-color:var(--accent)}
.fin-pub{display:block;font-size:10.5px;color:var(--muted);font-weight:400;margin-top:1px}
.fin-unit{color:var(--muted);font-size:11px;margin-left:4px;font-weight:400}
.fin-val{display:inline-block}
.fin-yoy{display:none;font-size:10.5px;font-weight:600;color:var(--muted);
  margin-left:5px;font-variant-numeric:tabular-nums}
.fin-card.show-yoy .fin-yoy{display:inline}
.fin-empty{padding:26px 4px;color:var(--muted);font-size:13px;line-height:1.9}
.fin-empty a{color:var(--blue);border-bottom:1px dotted var(--blue)}
.fin-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;padding-top:10px;
  border-top:1px dashed var(--line);color:var(--muted);font-size:11.5px}
@media(max-width:760px){
  /* 三块摘要卡在手机上保持两列（每列约 150px 刚好放得下 22px 数字），
     压成一列会让首屏被三张卡吃掉 */
  .fin-kpis{grid-template-columns:repeat(2,1fr)}
  .fin-kpis.k4{grid-template-columns:repeat(2,1fr)}
  .fin-table th.fin-name,.fin-table td.fin-name{min-width:140px}
}
.fin-hidden{margin-top:8px;color:var(--muted);font-size:11.5px}

/* ============================================================
   移动端适配层（2026-11-05）
   思路：① 栅格四档降级，不再一刀切；② 表格统一进 .tbl 横向滚动容器，
   带左右渐隐提示；高价值表在 ≤640 转卡片流；③ 触摸优先，hover 交互全部有替代。
   桌面（>900px）表现与改造前一致。
   ============================================================ */

/* 模板里替代内联栅格的工具类：内联样式会盖掉媒体查询，一律改用类。
   注意：这几个类必须写在上面 @media(max-width:760px) 之后、且自带窄屏覆盖，
   否则后面的定义会盖掉媒体查询（层叠顺序相同比先后，不看媒体块）。 */
.fin-kpis.k4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.fin-kpis.k4{grid-template-columns:repeat(2,1fr)}}
/* 5 卡（估值卡拆出独立 PS）：桌面一行五列，窄屏降两列 */
.fin-kpis.k5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.fin-kpis.k5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.fin-kpis.k5{grid-template-columns:repeat(2,1fr)}}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.seg2{grid-template-columns:1fr;gap:14px}}

/* ---------------- 表格滚动容器 ---------------- */
/* 四层背景：两侧「吸附」白色渐隐 + 两侧阴影，滚动时才露出阴影，
   用户一眼能看出「这张表还能往右滑」 */
.tbl{overflow:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;border-radius:10px;
  background:
    linear-gradient(90deg,var(--panel) 30%,rgba(255,255,255,0)) left center/28px 100% no-repeat local,
    linear-gradient(270deg,var(--panel) 30%,rgba(255,255,255,0)) right center/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(16,32,54,.18),transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(16,32,54,.18),transparent) right center/14px 100% no-repeat scroll,
    var(--panel)}
.tbl>table{min-width:max-content}
.tbl th{position:sticky;top:0;z-index:1}
/* 首列吸附：横向滑动时「行业 / 指数名」始终可见 */
.tbl--pin1 th:first-child,.tbl--pin1 td:first-child{position:sticky;left:0;z-index:2;
  background:var(--panel);box-shadow:1px 0 0 var(--line-soft)}
.tbl--pin1 thead th:first-child{z-index:3;background:#f7f9fc}

/* 说明性长文本表（说明书、缺口登记）：不横向滚动，改为换行排版。
   这类表在 375px 下原来靠 nowrap 撑到 2600px，是最严重的溢出源。 */
.tbl--wrap>table{min-width:100%}
.tbl--wrap th,.tbl--wrap td{white-space:normal}
@media(max-width:640px){
  .tbl--wrap th{width:auto !important}
  .tbl--wrap th,.tbl--wrap td{padding:8px 6px;vertical-align:top}
}

/* 排行类表格（首列是「#」序号，第二列才是行业/指数名）：
   窄屏隐藏序号列 —— 序号只占宽度不承载信息，滑走后最该留在眼前的是名字。
   隐藏后由名字列接管左侧吸附。 */
@media(max-width:640px){
  .tbl--list th:first-child,.tbl--list td:first-child{display:none}
  .tbl--list th:nth-child(2),.tbl--list td:nth-child(2){position:sticky;left:0;z-index:2;
    background:var(--panel);box-shadow:1px 0 0 var(--line-soft)}
  .tbl--list thead th:nth-child(2){z-index:3;background:#f7f9fc}
}

/* ---------------- 高价值表 → 卡片流（≤640） ---------------- */
/* 用法：<table class="list-cards">，正文单元格加 data-full（独占一行），
   元信息单元格加 data-label="日期" 之类，::before 打出字段名 */
@media(max-width:640px){
  .list-cards thead{display:none}
  .list-cards,.list-cards tbody,.list-cards tr,.list-cards td{display:block;width:auto}
  .list-cards tr{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;
    gap:3px 10px;padding:11px 2px;border-bottom:1px solid var(--line-soft)}
  .list-cards tr:last-child{border-bottom:0}
  .list-cards td{border:0;padding:0;white-space:normal;text-align:left;font-size:12.5px}
  .list-cards td[data-label]::before{content:attr(data-label);color:var(--muted);
    font-size:11.5px;margin-right:3px}
  .list-cards td[data-full]{flex:1 0 100%;font-size:14px;font-weight:600;line-height:1.55;
    order:-1}
  .list-cards td[data-full]::before{content:none}
  .list-cards td.num{text-align:left}
}

/* ---------------- 触摸目标（≤900） ---------------- */
@media(max-width:900px){
  .nav a{min-height:40px;display:inline-flex;align-items:center}
  .btn{min-height:40px}
  .seg-btn{min-height:40px}
  .top>.muted{min-height:40px;min-width:44px;display:inline-flex;
    align-items:center;justify-content:center}
  details.card summary{min-height:40px;display:flex;align-items:center}
  /* 平板（768/1024）也要避开 iOS 聚焦缩放：<16px 的输入框一聚焦就放大页面 */
  .search input,.login input{font-size:16px}
  /* 说明书页的页内锚点（#guide/#metrics…）当导航控件用，抬到可点尺寸 */
  .card a[href^="#"]{min-height:40px;display:inline-flex;align-items:center;padding:0 8px}
  /* 表格里的内联文字链接（行业名、指数名、代码）不强制 44px：
     撑高会毁掉表的行密度；HIG 对行内文本链接本就豁免。真正的控件
     （按钮、导航、分段切换、输入框）在上面全部抬到 40px+。 */
  td a,th a{display:inline-block;padding:3px 0}
  .sortable{padding:4px 0}
}

/* ---------------- 手机（≤640）主改造 ---------------- */
@media(max-width:640px){
  /* 顶栏：两行。第一行 品牌 + 搜索 + 退出；第二行 导航横向滑动条。
     原先是单行 6 项 + 210px 搜索，最小宽度 644px，直接把整页撑爆。 */
  .top{height:auto;flex-wrap:wrap;row-gap:6px;column-gap:8px;
    padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
  .brand{order:1;font-size:15px}
  .spacer{display:none}
  .search{order:2;flex:1 1 110px;min-width:0}
  .search input{width:100%;font-size:16px;padding:8px 12px}
  .top>.muted{order:3;font-size:12px}
  .nav{order:4;flex:1 0 100%;display:flex;gap:2px;overflow-x:auto;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -12px;padding:2px 12px;
    /* 右边缘渐隐：让「后面还有页面」看得出来，否则第 6 项被裁像 bug */
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;white-space:nowrap;padding:0 12px;scroll-snap-align:start;font-size:13.5px}

  .wrap{padding:12px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .card{padding:14px;border-radius:12px;animation:none}
  .card h3{font-size:12.5px;margin-bottom:10px}
  .kpi{font-size:26px}
  .kpi small{font-size:11.5px}
  .sub{font-size:12px}
  table{font-size:12.5px}
  th,td{padding:8px 9px}
  .bar-row .lbl{width:88px;font-size:12.5px}
  :target{scroll-margin-top:104px}

  /* 财务卡/估值卡标题里嵌着长说明（窗口口径、截至日期），h3 会被挤到
     min-content，「估值」两字被压成竖排。让 h3 独占一行、说明在行内换行。 */
  .fin-head{gap:4px 10px}
  .fin-head h3{flex:1 0 100%;display:block}
  .fin-head h3 .sub{display:block;white-space:normal;line-height:1.5;margin-top:2px}
  /* details 折叠标题改成 flex 布局后系统小三角消失了，补一个显式箭头 */
  details.card summary::after{content:"▾";margin-left:auto;color:var(--muted);font-size:12px}
  details.card[open] summary::after{content:"▴"}

  /* 图表：固定像素高在窄屏会压扁折线，统一压到 200px
     （模板里有内联 height，必须 !important 才盖得住） */
  .chart{height:200px !important}
  #prosperityChart{margin-bottom:84px !important}  /* 6 项图例在窄屏占两行，留足空间 */
  .axis{font-size:11px}
  /* 开关型图例在窄屏收紧，避免 6 项被挤成三行 */
  .legend{gap:8px;font-size:11px}
  .legend-item{gap:3px}
  .legend-item input[type=checkbox]{width:10px;height:10px}

  /* 财务表：手机上册数多，首列再收窄一点，横向滚动距离更短 */
  .fin-table th.fin-name,.fin-table td.fin-name{min-width:120px}
  .fin-table th,.fin-table td{padding:7px 9px}
}

/* ---------------- 问号提示：触摸屏换成点击弹层 ---------------- */
@media(hover:none){
  .qtip:hover .qtip-pop,.qtip:focus .qtip-pop{display:none}
  /* 同样避开 rise：它的 transform:none 终态会毁掉 translateX(-50%) 的居中 */
  .qtip.open .qtip-pop{display:block;animation:qtip-fade .18s ease both}
}
@media(max-width:640px){
  .qtip-mark{width:19px;height:19px;font-size:11px}
  .qtip-pop{position:fixed;left:50%;top:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);width:min(340px,calc(100vw - 28px));
    max-height:60vh;overflow:auto;z-index:200;font-size:13px;
    box-shadow:0 18px 48px rgba(8,16,30,.5)}
  /* 这里不能复用 rise 动画：rise 的终态是 transform:none，
     会把上面居中用的 translate(-50%,-50%) 覆盖掉，弹层就偏到右半边去了。 */
  .qtip.open .qtip-pop{display:block;animation:qtip-fade .16s ease both}
  .qtip-pop::after{display:none}
  .qtip.flip .qtip-pop{left:50%;right:auto;transform:translate(-50%,-50%)}
}
@keyframes qtip-fade{from{opacity:0}to{opacity:1}}

/* ---------------- 详情页 / 登录页 ---------------- */
.pdf-frame{display:block;width:100%;height:78vh;border:0;background:#525659}
/* 手机端不内嵌 PDF：iOS Safari 在 iframe 里只渲染首页、还要二次点击全屏，
   78vh 又含地址栏高度。索性换成「打开 / 下载」两个大按钮，正文走下方抽取文本 */
.pdf-tip{display:none}
.pdf-tip .btn{min-height:46px;justify-content:center;flex:1 1 140px}
.pdf-tip-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
@media(max-width:760px){
  .pdf-wrap{display:none}
  .pdf-tip{display:block}
  /* 顶部工具条里的 PDF 按钮在手机上隐藏：下方 .pdf-tip 已有同样两个更大的按钮，
     保留会出现「新窗口打开 PDF」和「打开 PDF 原文」两个同义按钮 */
  .toolbar .pdf-only{display:none}
}
@media(max-width:480px){
  .login{width:auto;margin:8vh 16px;padding:26px 20px}
  .login input{font-size:16px}
}