/* ===========================================================
   Fomowell BTC Rune 分析平台 —— 公共样式（深色仪表盘）
   适用: index.php(首页) / detail.html(详情页)
   =========================================================== */
:root {
  --bg: #0f1419;
  --bg-card: #1a2029;
  --bg-card-2: #222b36;
  --border: #2b3542;
  --text: #e6edf3;
  --text-mut: #8b98a5;
  --accent: #f7931a;        /* BTC 橙 */
  --accent-2: #4ea1ff;
  --up: #18c29c;            /* 涨=绿（币圈习惯） */
  --down: #ff4d4f;          /* 跌=红 */
  --lv4: #ff4d4f;          /* 强势关注 */
  --lv3: #faad14;          /* 重点观察 */
  --lv2: #4ea1ff;          /* 普通 */
  --lv1: #8b98a5;          /* 弱 */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

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

.wrap { max-width: 1180px; margin: 0 auto; padding: 18px 16px 60px; }

/* 顶部栏 */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}
.topbar h1 { font-size: 20px; margin: 0; font-weight: 700; }
.topbar h1 .btc { color: var(--accent); }
.topbar .links { font-size: 13px; color: var(--text-mut); }
.topbar .links a { margin-left: 14px; }

/* 卡片 */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.card h2 { font-size: 16px; margin: 0 0 14px; font-weight: 600; }
.card .sub { color: var(--text-mut); font-size: 12px; margin: -8px 0 14px; }

/* 概览卡片组（统计区与下方图表之间留出明显间距） */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
/* 市场大盘：8 卡自适应（桌面 4 列，窄屏自动收列） */
.cards-market { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cards .kpi {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-card) 0%, #161c24 100%);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px;
  transition: border-color .15s, transform .15s;
}
.cards .kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: 0; transition: opacity .15s;
}
.cards .kpi:first-child::before { opacity: .9; }
.cards .kpi:hover { border-color: #3a4654; transform: translateY(-1px); }
.cards .kpi .label { color: var(--text-mut); font-size: 12px; letter-spacing: .3px; }
.cards .kpi .val { font-size: 24px; font-weight: 800; margin-top: 6px; }
.cards .kpi .val small { font-size: 13px; font-weight: 500; color: var(--text-mut); }

/* 图表容器 */
.chart { width: 100%; height: 360px; }
.chart-sm { width: 100%; height: 300px; }
.chart-tall { height: 320px; }   /* Top10 柱状图：10 个标签全显示 */

/* 表格 */
table.rank { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.rank th, table.rank td {
  padding: 6px 9px; text-align: right; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.rank th.c, table.rank td.c { text-align: center; }
table.rank th { color: var(--text-mut); font-weight: 500; position: sticky; top: 0; background: var(--bg-card); }
/* 可排序表头：hover 高亮 + 排序箭头 */
table.rank th.sortable { cursor: pointer; user-select: none; transition: color .15s; }
table.rank th.sortable:hover { color: var(--text); }
table.rank th.sortable::after { content: ' ⇅'; font-size: 10px; opacity: .35; }
table.rank th.sortable.sorted { color: var(--accent); }
table.rank th.sortable.sorted::after { opacity: 1; }
table.rank th.sortable.asc::after { content: ' ↑'; }
table.rank th.sortable.desc::after { content: ' ↓'; }
table.rank td.l, table.rank th.l { text-align: left; }
/* 等级 / 综合分列：固定最小宽度，避免徽章字数不同导致列宽跳动 */
table.rank th.c, table.rank td.c { min-width: 78px; }
table.rank th.sc, table.rank td.sc { font-weight: 600; min-width: 60px; }
table.rank tbody tr { cursor: pointer; transition: background .15s; }
table.rank tbody tr:hover { background: var(--bg-card-2); }
table.rank td .tk { font-weight: 700; }
table.rank td .nm { color: var(--text-mut); font-size: 12px; }
/* 价格列：聪(sats) + 下方 USD 小字 */
table.rank td .unit { color: var(--text-mut); font-size: 11px; font-weight: 400; }
table.rank td .usd-sub { display: inline; color: var(--text-mut); font-size: 11px; }

/* 等级徽章：半透明底 + 描边 + 状态圆点 */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
}
.badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.badge.lv4 { color: #ff6b6d; background: rgba(255,77,79,.14); border: 1px solid rgba(255,77,79,.45); }
.badge.lv3 { color: #ffc53d; background: rgba(250,173,20,.13); border: 1px solid rgba(250,173,20,.45); }
.badge.lv2 { color: #6cb5ff; background: rgba(78,161,255,.13); border: 1px solid rgba(78,161,255,.45); }
.badge.lv1 { color: #a5b2c0; background: rgba(139,152,165,.14); border: 1px solid rgba(139,152,165,.45); }
.badge.lv0 { color: #8b98a5; background: rgba(58,68,82,.35); border: 1px solid #3a4452; }

.up { color: var(--up); }
.down { color: var(--down); }
.mut { color: var(--text-mut); }

/* 详情页头部 */
.token-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.token-head .logo {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-card-2); object-fit: cover; border: 1px solid var(--border);
}
.token-head .name { font-size: 22px; font-weight: 700; }
.token-head .ticker { color: var(--text-mut); font-size: 13px; }
.score-big {
  margin-left: auto; text-align: center;
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 16px 10px;
}
.score-big .num {
  font-size: 30px; font-weight: 800; line-height: 1.1;
  background: linear-gradient(135deg, #f7931a, #ffc46b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.score-big .badge { margin-top: 5px; }
/* 综合分下方的全市场排名 */
.rank-line {
  margin-top: 7px; padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--text-mut); white-space: nowrap;
}
.rank-line b { color: var(--text); font-size: 13px; font-weight: 700; }

/* 顶栏右侧：更新时间 + 源站查看按钮（深色描边 + 圆形箭头徽标） */
.top-right { display: inline-flex; align-items: center; gap: 14px; }
.btn-fw {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 14px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--text); font-size: 13px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: all .15s;
}
.btn-fw .ar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(247,147,26,.15); color: var(--accent);
  font-size: 11px; line-height: 1;
  transition: all .15s;
}
.topbar .btn-fw:hover {
  border-color: rgba(247,147,26,.6); background: rgba(247,147,26,.08);
  color: var(--accent); text-decoration: none;
}
.topbar .btn-fw:hover .ar { background: var(--accent); color: #0f1419; }
/* 头部卡片内：按钮跟在 token_id 行下方 */
.btn-fw-head { margin-top: 9px; }

/* 评分因子原始值说明行（A~F 六因子） */
/* 6 因子详细说明：每项一行 = 色点 + 名称/原始值 + 口径说明 + 百分位得分 */
.factor-brief {
  display: flex; flex-direction: column;
  margin: 12px 0 0; padding: 4px;   /* 位于因子图下方，改为上间距 */
  background: var(--bg-card-2); border-radius: 10px;
}
.factor-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 9px; border-radius: 8px;
  font-size: 13px; line-height: 1.55;
}
.factor-item + .factor-item { margin-top: 1px; }
.fi-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: 0 0 auto; }
.fi-main { flex: 1 1 auto; min-width: 0; }
.fi-title { font-weight: 600; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fi-title b { font-weight: 700; }
/* 维度标签：机会（暖） / 安全（冷） */
.fi-dim {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
}
.fi-dim.d-heat   { color: #ff8c42; background: rgba(255,140,66,.12);  border: 1px solid rgba(255,140,66,.3); }
.fi-dim.d-health { color: #18c29c; background: rgba(24,194,156,.12); border: 1px solid rgba(24,194,156,.3); }
.fi-desc { color: var(--text-mut); font-size: 12px; margin-top: 3px; }
.fi-desc b { color: #c3ccd6; font-weight: 600; }
.fi-score {
  flex: 0 0 auto; text-align: right;
  font-weight: 700; font-size: 14px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fi-score small { display: block; font-size: 11px; font-weight: 400; color: var(--text-mut); }
.factor-item.mut { color: var(--text-mut); justify-content: center; }

/* 时间范围切换 */
.ranges { display: inline-flex; gap: 6px; margin-bottom: 12px; }
.ranges button {
  background: var(--bg-card-2); color: var(--text-mut);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 14px; font-size: 13px; cursor: pointer;
}
.ranges button.active { background: var(--accent); color: #0f1419; border-color: var(--accent); font-weight: 600; }

/* 价格曲线 BTC/USD 切换 */
.h2row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.h2row h2 { margin: 0; }
.seg { display: inline-flex; gap: 6px; }
.seg button {
  background: var(--bg-card-2); color: var(--text-mut);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 16px; font-size: 13px; cursor: pointer; transition: all .15s;
}
.seg button.active { background: var(--accent); color: #0f1419; border-color: var(--accent); font-weight: 700; }

/* 榜单工具栏：搜索框 + 维度 Tab + 活跃/全部过滤 */
.rank-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rank-tools input[type="search"] {
  background: var(--bg-card-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; width: 180px; max-width: 100%;
  outline: none; transition: border-color .15s;
}
.rank-tools input[type="search"]::placeholder { color: var(--text-mut); }
.rank-tools input[type="search"]:focus { border-color: var(--accent); }

.loading { color: var(--text-mut); padding: 30px; text-align: center; }
.err { color: #ff4d4f; padding: 20px; }   /* 错误固定红，不随涨跌色翻转 */

@media (max-width: 760px) {
  .wrap { padding: 10px 10px 40px; }
  .topbar { margin-bottom: 10px; gap: 6px; }
  .topbar h1 { font-size: 17px; }
  .card { padding: 12px 12px; margin-bottom: 12px; border-radius: 10px; }
  .card h2 { font-size: 15px; margin: 0 0 10px; }
  .card .sub { margin: -4px 0 10px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
  .cards .kpi { padding: 10px 12px; border-radius: 10px; }
  .cards .kpi .val { font-size: 18px; margin-top: 3px; }
  .cards .kpi .val small { font-size: 11px; }
  .chart { height: 260px; }
  .chart-sm { height: 220px; }
  .chart-tall { height: 340px; }   /* 移动端 Top10：10 个标签全显示 */
  .token-head { gap: 10px; }
  .token-head .logo { width: 36px; height: 36px; }
  .token-head .name { font-size: 18px; }
  .score-big .num { font-size: 26px; }
  .top-right { gap: 8px; padding-right: 0; }   /* 小屏 updated 换行到按钮下方 */
  .topbar .links { font-size: 12px; }
  .btn-fw { padding: 5px 11px; font-size: 12px; }
  .h2row { margin: 0 0 8px; }
  .factor-brief { padding: 2px; margin: 10px 0 0; }
  .factor-item { padding: 6px 8px; font-size: 12px; }
  .fi-desc { font-size: 11px; }
  .fi-score { font-size: 13px; }
  .ranges { margin-bottom: 8px; }
  .ranges button, .seg button { padding: 4px 10px; font-size: 12px; }
  .rank-tools { gap: 6px; }
  .rank-tools input[type="search"] { width: 100%; padding: 5px 10px; }

  /* 榜单 9 列小屏紧凑：隐藏全名、收窄内边距，横向滚动查看 */
  table.rank { font-size: 12px; }
  table.rank th, table.rank td { padding: 6px 7px; }
  table.rank th.c, table.rank td.c { min-width: 66px; }
  table.rank th.sc, table.rank td.sc { min-width: 52px; }
  table.rank td .nm { display: none; }

  .chart-factors { height: 460px; }
  .health-tags .ht-item { font-size: 11px; }

  .footer { margin-top: 14px; padding-top: 10px; }
}

@media (max-width: 480px) {
  .cards { gap: 6px; }
  .cards .kpi .val { font-size: 16px; }
  .chart { height: 220px; }
  .chart-sm { height: 190px; }
  .chart-tall { height: 320px; }
  .chart-factors { height: 420px; }
  .card { padding: 10px; margin-bottom: 10px; }
}

/* 自定义滚动条（全量榜单：深色细滚动条，带悬停高亮） */
.rank-scroll {
  max-height: 80vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;   /* iOS 顺滑滚动 */
  border-radius: 10px;
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: #3a4654 transparent;
}
.rank-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.rank-scroll::-webkit-scrollbar-track {
  background: var(--bg-card);
  border-radius: 10px;
}
.rank-scroll::-webkit-scrollbar-thumb {
  background-color: #3a4654;
  border-radius: 10px;
  border: 2px solid var(--bg-card);
}
.rank-scroll::-webkit-scrollbar-thumb:hover { background-color: #4c5a6b; }
.rank-scroll::-webkit-scrollbar-corner { background: var(--bg-card); }

/* ============ 健康体检 · 购买参考 ============ */
/* 健康度徽章（绿=健康 / 蓝=良好 / 黄=一般 / 红=风险） */
.badge.hv4 { color: #3ddc9a; background: rgba(24,194,156,.14); border: 1px solid rgba(24,194,156,.45); }
.badge.hv3 { color: #6cb5ff; background: rgba(78,161,255,.13); border: 1px solid rgba(78,161,255,.45); }
.badge.hv2 { color: #ffc53d; background: rgba(250,173,20,.13); border: 1px solid rgba(250,173,20,.45); }
.badge.hv1 { color: #ff6b6d; background: rgba(255,77,79,.14); border: 1px solid rgba(255,77,79,.45); }
.badge.hv0 { color: #8b98a5; background: rgba(58,68,82,.35); border: 1px solid #3a4452; }

/* 评分构成标题行右侧：机会维 / 安全维 胶囊 + 购买建议 */
.dim-chips { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dim-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--text-mut);
  background: var(--bg-card-2); border: 1px solid var(--border);
}
.dim-chip b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dim-chip.heat   { border-color: rgba(255,140,66,.4); }
.dim-chip.heat b  { color: #ff8c42; }
.dim-chip.health { border-color: rgba(24,194,156,.4); }
.dim-chip.health b { color: #18c29c; }
.dim-chips .advice-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.dim-chips .advice-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* 11 因子条形图高度（A–K 共 11 项，每项约 48px） */
.chart-factors { height: 560px; }

/* 风险点 / 亮点标签列表 */
.health-tags { margin-top: 12px; }
.health-tags .ht-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.health-tags .ht-list { display: flex; flex-direction: column; gap: 5px; }
.health-tags .ht-item {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; color: #c3ccd6; line-height: 1.5;
}
.health-tags .ht-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }
.health-tags .ht-item.risk::before { background: #ff4d4f; }
.health-tags .ht-item.good::before { background: #18c29c; }
.health-tags .ht-empty { color: var(--text-mut); font-size: 12px; }

/* ============ 筹码与盘口 / 锁仓详情 ============ */
.chips-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.chip-panel { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.cp-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }

.metric { margin-bottom: 14px; }
.metric:last-child { margin-bottom: 0; }
.m-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--text-mut); margin-bottom: 6px; }
.m-label b { color: var(--text); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.m-bar { height: 8px; background: var(--bg-card); border-radius: 999px; overflow: hidden; }
.m-bar > i { display: block; height: 100%; border-radius: 999px; transition: width .3s; }

.ctrl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ctrl-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.ctrl-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ctrl-tag.ctrl-high { color: #ff6b6d; background: rgba(255,77,79,.14); border: 1px solid rgba(255,77,79,.45); }
.ctrl-tag.ctrl-mid  { color: #ffc53d; background: rgba(250,173,20,.13); border: 1px solid rgba(250,173,20,.45); }
.ctrl-tag.ctrl-low  { color: #3ddc9a; background: rgba(24,194,156,.14); border: 1px solid rgba(24,194,156,.45); }
.ctrl-tag.ctrl-none { color: #a5b2c0; background: rgba(139,152,165,.14); border: 1px solid rgba(139,152,165,.45); }
.ctrl-meta { font-size: 12px; color: var(--text-mut); }
.ctrl-note { margin-top: 12px; font-size: 12px; color: var(--text-mut); line-height: 1.6; }

.of-row { display: flex; gap: 16px; margin-top: 4px; flex-wrap: wrap; }
.of-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-mut); }
.of-item b { color: var(--text); font-weight: 700; }
.of-dot { width: 8px; height: 8px; border-radius: 2px; }
.of-dot.buy  { background: #18c29c; }
.of-dot.sell { background: #ff4d4f; }

.lock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.lock-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.lock-item span { display: block; font-size: 11px; color: var(--text-mut); margin-bottom: 3px; }
.lock-item b { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* 页脚版权 */
.footer {
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center; color: var(--text-mut);
  font-size: 12px; line-height: 1.9;
}
.footer .brand { color: var(--accent); font-weight: 600; }
.footer a { color: var(--text-mut); }
.footer a:hover { color: var(--accent-2); }

/* 移动端覆盖（放在文件末尾，确保覆盖上方主样式） */
@media (max-width: 760px) {
  .chips-grid { grid-template-columns: 1fr; gap: 10px; }
  .lock-grid { grid-template-columns: 1fr; }
}