/* ===== 莫兰迪设计系统（与源码一致） ===== */
:root {
  --red:#C0504D; --blue:#7B8FA1; --green:#7A9E7E; --amber:#C8A96A;
  --orange:#C07A5A; --gray:#9A9A9A;
  --bg:#F7F5F0; --surface:#FFFFFF; --text:#3A3A3A; --muted:#8A8A8A; --line:#E5E0D5;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { font-size:15px; overflow-x:hidden; }
img, canvas, video, svg { max-width:100%; }
body {
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg); color:var(--text);
  padding-bottom:env(safe-area-inset-bottom);
}
#app { max-width:560px; margin:0 auto; min-height:100vh; }

/* header */
.hd { padding:14px 16px 8px; }
.hd-title { font-size:17px; font-weight:600; letter-spacing:.02em; }
.hd-sub { font-size:12px; color:var(--muted); margin-top:3px; }

/* scope bar */
.scope-bar { display:flex; gap:8px; padding:6px 16px 10px; position:sticky; top:0; background:var(--bg); z-index:20; }
.scope-btn {
  flex:1; padding:9px 0; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--muted); font-size:14px; font-weight:500;
}
.scope-btn.active { background:#44546A; color:#fff; border-color:#44546A; }

/* tab bar */
.tab-bar {
  display:flex; gap:4px; padding:0 12px 10px; overflow-x:auto;
  position:sticky; top:48px; background:var(--bg); z-index:20;
  scrollbar-width:none;
}
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn {
  flex:1 0 auto; padding:7px 10px; border:none; border-radius:8px;
  background:transparent; color:var(--muted); font-size:13px; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.tab-btn.active { color:var(--text); font-weight:600; border-bottom:2px solid var(--red); }

main { padding:0 12px; }

/* loading */
.loading { display:flex; flex-direction:column; align-items:center; padding:60px 0; color:var(--muted); font-size:13px; }
.spinner { width:28px; height:28px; border:3px solid var(--line); border-top-color:var(--red); border-radius:50%; animation:spin .8s linear infinite; margin-bottom:12px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* section */
.sec-title { font-size:15px; font-weight:600; margin:18px 0 10px; display:flex; align-items:center; gap:6px; }
.sec-title::before { content:''; width:3px; height:14px; background:var(--red); border-radius:2px; }
.caption { font-size:12px; color:var(--muted); line-height:1.6; margin:8px 0; }

/* KPI cards */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:8px; margin:10px 0; }
.kpi {
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; min-width:0;
}
.kpi .k-label { font-size:11px; color:var(--muted); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi .k-value { font-size:20px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi .k-note { font-size:11px; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi.big .k-value { font-size:26px; }

/* chart card */
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 8px 4px; margin:10px 0; }
.card-title { font-size:13px; font-weight:600; padding:0 6px 4px; color:var(--text); }
.chart { width:100%; height:280px; }
.chart.tall { height:340px; }

/* tables */
.tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); margin:8px 0; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; font-size:11.5px; }
thead th { background:#44546A; color:#fff; padding:7px 8px; text-align:left; font-weight:500; white-space:nowrap; }
tbody td { padding:6px 8px; border-top:1px solid #f0ede6; white-space:nowrap; }
/* 窄屏横向滚动时冻结首列，始终可见指数名 */
.tbl-wrap td:first-child, .tbl-wrap th:first-child {
  position:sticky; left:0; background:#fff; z-index:1;
  box-shadow:2px 0 4px -2px rgba(0,0,0,.08);
}
.tbl-wrap thead th:first-child { background:#44546A; z-index:2; }
.tbl-wrap tbody tr:nth-child(even) td:first-child { background:#faf8f4; }
.tbl-wrap tr[style*="f7f4ee"] td:first-child { background:#f7f4ee; }
tbody tr:nth-child(even) { background:#faf8f4; }
td.pos { color:var(--red); font-weight:600; }
td.neg { color:var(--green); }
.tag { display:inline-block; padding:1px 7px; border-radius:4px; font-size:11px; font-weight:600; color:#fff; }

/* pills & selects */
.pill-row { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.pill { padding:5px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); font-size:12px; color:var(--muted); }
.pill.active { background:#44546A; color:#fff; border-color:#44546A; }
.sel-wrap { position:relative; margin:10px 0; }
.sel {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); font-size:14px; color:var(--text); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}

/* evidence table */
.ev-table td:first-child { font-weight:600; }
.ev-cur { border-left:3px solid currentColor; }

.ft { text-align:center; font-size:11px; color:#b5b0a5; padding:20px 0 calc(12px + env(safe-area-inset-bottom)); }
.empty { padding:30px 0; text-align:center; color:var(--muted); font-size:13px; }

/* accordion */
details.acc { background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:10px 0; overflow:hidden; }
details.acc summary { padding:12px 14px; font-size:14px; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; }
details.acc summary::after { content:'▾'; color:var(--muted); font-size:12px; }
details.acc[open] summary::after { transform:rotate(180deg); }
details.acc .acc-body { padding:0 8px 10px; }