* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #0e1117;
  color: #d6dde6;
  font-size: 14px;
}
header {
  background: #161b22;
  border-bottom: 1px solid #2a313c;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #e6edf3;
}
#meta {
  font-size: 12px;
  color: #8b949e;
}
#meta .sep { margin: 0 8px; color: #444; }
#refresh-btn, .filter-btn {
  background: #21262d;
  border: 1px solid #30363d;
  color: #d6dde6;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
#refresh-btn:hover, .filter-btn:hover { background: #2a3038; }
.filter-btn.active { background: #1f6feb; border-color: #1f6feb; color: white; }

/* 多空视角切换 */
#side-toggle { display: inline-flex; gap: 0; border: 1px solid #30363d; border-radius: 4px; overflow: hidden; }
.side-btn {
  background: #21262d;
  border: none;
  color: #8b949e;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.side-btn + .side-btn { border-left: 1px solid #30363d; }
.side-btn:hover { background: #2a3038; color: #d6dde6; }
.side-btn.active[data-side="long"] { background: #238636; color: white; }
.side-btn.active[data-side="short"] { background: #d73a49; color: white; }
body.side-short header { box-shadow: inset 0 -2px 0 #d73a49; }

/* 资金费率颜色:按当前视角解读 — 绿=有利,红=被收费 */
.fund-bad { color: #ef4444; font-variant-numeric: tabular-nums; }
.fund-good { color: #22c55e; font-variant-numeric: tabular-nums; }

section {
  padding: 16px 24px;
  border-bottom: 1px solid #161b22;
}
section h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #e6edf3;
  letter-spacing: 0.5px;
}
section h2 .hint {
  font-weight: normal;
  color: #6e7681;
  font-size: 11px;
  margin-left: 8px;
}

/* 分布柱状图 */
#dist-bar {
  display: flex;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  background: #161b22;
}
.dist-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  min-width: 40px;
  transition: filter 0.2s;
}
.dist-seg:hover { filter: brightness(1.2); }
.dist-极强 { background: #d73a49; }
.dist-强 { background: #f97316; }
.dist-中 { background: #eab308; color: #1a1a1a; }
.dist-弱 { background: #6e7681; }
.dist-无 { background: #2a313c; color: #8b949e; }
.dist-filtered { background: #1e293b; color: #64748b; }
.dist-error { background: #450a0a; }

/* 双列布局 */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 16px 24px; }
.col h2 { margin-top: 0; }

/* 收藏区块 */
#favorites-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.fav-card {
  background: #161b22;
  border: 1px solid #2a313c;
  border-radius: 4px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
}
.fav-card:hover { background: #1c2128; }
.fav-card .sym { flex: 1; font-weight: 600; color: #f0f6fc; font-size: 13px; }
.fav-card .level-tag { margin: 0 6px; }
.fav-card .stat { color: #8b949e; font-variant-numeric: tabular-nums; margin-left: 6px; }
.fav-card .stat b { color: #d6dde6; }
.fav-card .unfav-btn {
  background: none;
  border: none;
  color: #eab308;
  cursor: pointer;
  font-size: 14px;
  padding: 0 0 0 6px;
  line-height: 1;
}
.fav-card .unfav-btn:hover { color: #ec7063; }
.fav-empty { padding: 12px; color: #6e7681; font-size: 12px; }

/* 星标按钮（表格 / 极强榜内嵌） */
.star-btn {
  background: none;
  border: none;
  color: #444;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
  font-family: inherit;
}
.star-btn:hover { color: #eab308; }
.star-btn.active { color: #eab308; }
.star-btn.active:hover { color: #d97706; }

/* 极强榜 */
.extreme-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #161b22;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 13px;
  cursor: pointer;
}
.extreme-row:hover { background: #1c2128; }
.extreme-row .sym {
  flex: 1;
  font-weight: 600;
  color: #f0f6fc;
}
.extreme-row .override-flag {
  background: #d73a49;
  color: white;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  margin-right: 8px;
}
.extreme-row .stat {
  margin-left: 12px;
  color: #8b949e;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.extreme-row .stat b { color: #d6dde6; }

/* 变化时间线 */
#changes-filter { display: flex; gap: 4px; margin-bottom: 8px; }
.cf-btn {
  background: #161b22;
  border: 1px solid #2a313c;
  color: #8b949e;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.cf-btn:hover { background: #21262d; color: #d6dde6; }
.cf-btn.active { background: #1f6feb; border-color: #1f6feb; color: white; }
#changes { max-height: 500px; overflow-y: auto; }
.change-row {
  display: grid;
  grid-template-columns: 110px 22px 1fr;
  gap: 6px;
  align-items: baseline;
  padding: 6px 10px;
  background: #161b22;
  border-radius: 4px;
  margin-bottom: 3px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.change-row:hover { background: #1c2128; cursor: pointer; }
.change-row .ts { color: #6e7681; font-size: 11px; }
.change-arrow { font-weight: 600; text-align: center; }
.change-up { color: #58d68d; }
.change-down { color: #ec7063; }
.change-override { color: #f97316; }
.change-row .sym { font-weight: 600; color: #f0f6fc; margin-right: 6px; }
.change-row .body { color: #8b949e; }
.change-row .body b { color: #d6dde6; }
.change-empty { padding: 12px; color: #6e7681; text-align: center; font-size: 12px; }

/* 事件捕获 */
#events-filter { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.ev-btn {
  background: #161b22;
  border: 1px solid #2a313c;
  color: #8b949e;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.ev-btn:hover { background: #21262d; color: #d6dde6; }
.ev-btn.active { background: #1f6feb; border-color: #1f6feb; color: white; }
#events-list { max-height: 380px; overflow-y: auto; }
.event-row {
  display: grid;
  grid-template-columns: 110px 110px 100px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 6px 10px;
  background: #161b22;
  border-radius: 4px;
  margin-bottom: 3px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.event-row:hover { background: #1c2128; }
.event-row .ts { color: #6e7681; font-size: 11px; }
.event-row .sym { font-weight: 600; color: #f0f6fc; }
.event-row .event-body { color: #8b949e; }
.event-row .event-body b { color: #d6dde6; }
.event-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.event-tag.ev-bull { background: #1f6f3a; color: #d4f7df; }
.event-tag.ev-bear { background: #8e2a32; color: #fdd; }
.event-tag.ev-funding { background: #b06a1a; color: #ffe9c8; }
.event-tag.ev-override { background: #d73a49; color: white; }

/* 完整表格 */
#filter-bar { margin-bottom: 12px; display: flex; gap: 6px; align-items: center; font-size: 12px; color: #6e7681; }
#full-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#full-table th {
  text-align: left;
  background: #161b22;
  padding: 8px 12px;
  color: #8b949e;
  font-weight: 500;
  font-size: 12px;
  border-bottom: 1px solid #2a313c;
}
#full-table td { padding: 6px 12px; border-bottom: 1px solid #161b22; }
#full-table tr:hover td { background: #161b22; cursor: pointer; }
#full-table .sym { font-weight: 600; color: #f0f6fc; }
.level-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}
.level-tag.极强 { background: #d73a49; color: white; }
.level-tag.强 { background: #f97316; color: white; }
.level-tag.中 { background: #eab308; color: #1a1a1a; }
.level-tag.弱 { background: #6e7681; color: white; }
.level-tag.无 { background: #2a313c; color: #6e7681; }
.level-tag.filtered { background: #1e293b; color: #64748b; }
.override-yes { color: #f97316; font-weight: 600; }
.override-no { color: #444; }
.override-warn { color: #ef4444; font-weight: 600; }
.row-warn { background: rgba(239, 68, 68, 0.06); }
.row-warn td:first-of-type, .row-warn .sym { border-left: 2px solid #ef4444; padding-left: 8px; }
.extreme-row.warn { border-left: 3px solid #ef4444; padding-left: 9px; }
.extreme-row.warn .override-flag { background: #ef4444; }
.muted { color: #6e7681; }

/* 历史面板 */
#history-section { background: #161b22; }
#history-section h2 { display: flex; align-items: center; }
#history-symbol { color: #f97316; margin-left: 6px; }
#close-history {
  margin-left: auto;
  background: #21262d;
  border: 1px solid #30363d;
  color: #d6dde6;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 0;
}
#history-timeline {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  background: #0e1117;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.tl-row { display: flex; align-items: center; margin-bottom: 2px; }
.tl-row .tl-date { width: 80px; color: #6e7681; font-size: 11px; flex-shrink: 0; }
.tl-row .tl-cells { display: flex; gap: 1px; }
.tl-cell {
  display: inline-block;
  width: 10px;
  height: 16px;
  text-align: center;
  font-size: 9px;
  line-height: 16px;
  border-radius: 2px;
}
.tl-cell.极强 { background: #d73a49; color: white; }
.tl-cell.强 { background: #f97316; color: white; }
.tl-cell.中 { background: #eab308; color: #1a1a1a; }
.tl-cell.弱 { background: #6e7681; color: white; }
.tl-cell.无 { background: #2a313c; color: #6e7681; }
.tl-cell.filtered { background: #1e293b; color: #444; }
.tl-cell.error { background: #450a0a; color: white; }
#history-extremes {
  font-size: 12px;
  color: #8b949e;
}

footer {
  padding: 12px 24px;
  font-size: 11px;
  color: #6e7681;
  text-align: center;
  border-top: 1px solid #2a313c;
}