/* ============ 分众传媒估值看板 - 公共样式 ============ */
:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --ink: #1c2733;
  --ink-2: #5b6b7b;
  --ink-3: #8a97a5;
  --line: #e6eaf0;
  --brand: #0f4c81;
  --brand-2: #eef4fa;
  --up: #d8433f;        /* A股: 红涨 */
  --down: #1e9e5a;      /* A股: 绿跌 */
  --buy: #e8890c;
  --sell: #d8433f;
  --mid: #0f4c81;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 34, 51, .05), 0 4px 16px rgba(16, 34, 51, .06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
}
a { color: var(--brand); text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 48px; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { max-width: 1080px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 6px; height: 54px; }
.nav-logo { font-weight: 700; font-size: 16px; color: var(--ink); margin-right: 18px; white-space: nowrap; }
.nav-logo .code { color: var(--ink-3); font-weight: 500; font-size: 13px; margin-left: 4px; }
.nav a.tab {
  padding: 6px 14px; border-radius: 999px; color: var(--ink-2); font-size: 14px; white-space: nowrap;
}
.nav a.tab:hover { background: var(--brand-2); color: var(--brand); }
.nav a.tab.on { background: var(--brand); color: #fff; font-weight: 600; }
.nav-quote { margin-left: auto; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.nav-quote b { font-size: 15px; }
.nav-quote .up { color: var(--up); } .nav-quote .down { color: var(--down); }

/* ---------- 布局 ---------- */
.page-head { margin: 26px 0 18px; }
.page-head h1 { font-size: 22px; margin: 0 0 4px; }
.page-head p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 760px) {
  .grid.c2, .grid.c3, .grid.c5 { grid-template-columns: 1fr 1fr; }
  .nav-quote .nav-sub { display: none; }
}
@media (max-width: 480px) { .grid.c2, .grid.c3, .grid.c5 { grid-template-columns: 1fr; } }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px;
}
.card h3 { margin: 0 0 12px; font-size: 15.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h3 .tag { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--brand-2); color: var(--brand); }
.card .sub { color: var(--ink-3); font-size: 12.5px; font-weight: normal; }

/* ---------- 指标块 ---------- */
.metric .k { color: var(--ink-3); font-size: 12.5px; margin-bottom: 2px; }
.metric .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric .v small { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.metric .d { font-size: 12.5px; margin-top: 3px; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--ink-3); }

/* ---------- 估值三档卡 ---------- */
.val-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.val-cell { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fafbfd; }
.val-cell .k { font-size: 12.5px; color: var(--ink-2); display: flex; justify-content: space-between; }
.val-cell .k em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.val-cell .p { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.val-cell .m { font-size: 11.5px; color: var(--ink-3); }
.val-cell.buy  { border-color: #f2d9ae; background: #fdf9f0; }
.val-cell.buy  .p { color: var(--buy); }
.val-cell.sell { border-color: #f0cfce; background: #fdf5f4; }
.val-cell.sell .p { color: var(--sell); }
.val-cell.mid  .p { color: var(--mid); }
.val-cell .gapline { font-size: 12px; margin-top: 4px; color: var(--ink-2); }

/* ---------- 价格标尺 ---------- */
.ruler { margin-top: 16px; }
.ruler .bar { position: relative; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #f3e2c2 0%, #d9e6f2 50%, #f2cfce 100%); }
.ruler .cur { position: absolute; top: -5px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 4px solid var(--ink); transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.ruler .lbls { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th { color: var(--ink-3); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover { background: #f8fafc; }
td.na { color: var(--ink-3); }

/* ---------- 图表 ---------- */
.chart { width: 100%; height: 320px; }
.chart.tall { height: 400px; }

/* ---------- 徽章/说明 ---------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.g { background: #e5f5ec; color: var(--down); }
.badge.r { background: #fbe9e8; color: var(--up); }
.badge.b { background: var(--brand-2); color: var(--brand); }
.badge.o { background: #fdf1de; color: #b26a00; }
.badge.gray { background: #eef1f4; color: var(--ink-2); }
button.badge { cursor: pointer; border: 1px solid transparent; font-family: inherit; }
button.badge:hover { opacity: .85; }

.note { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.7; }
.callout { border-left: 3px solid var(--brand); background: var(--brand-2); border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 13.5px; color: #274b6d; margin: 12px 0; }
.muted { color: var(--ink-3); }

details.box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; background: #fafbfd; margin-top: 14px; }
details.box summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); }
details.box ol, details.box ul { padding-left: 20px; }
details.box li { margin: 6px 0; font-size: 13.5px; color: var(--ink-2); }
details.box b { color: var(--ink); }

footer { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); line-height: 1.8; }

/* 骨架屏 */
.skeleton { position: relative; overflow: hidden; background: #edf0f3; border-radius: 6px; color: transparent !important; }
.skeleton::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: sweep 1.2s infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }