.performance-heading { margin-bottom: 10px; }
.performance-heading > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.performance-room-name { font-size: 13px; font-weight: 600; color: var(--db-accent-deep); overflow-wrap: anywhere; }
.performance-room-name[hidden] { display: none; }
.performance-mode { font-size: 11px; color: var(--db-muted); }
.performance-heading-actions { flex-shrink: 0; margin-left: auto; justify-content: flex-end; }
.performance-unit { color: var(--db-muted); font-size: 11px; white-space: nowrap; }
.performance-unit[hidden] { display: none; }
#roomPerformance .performance-back, #roomPerformance .performance-retry { border: 0 !important; background: var(--db-accent-soft) !important; color: var(--db-accent-deep) !important; box-shadow: none !important; border-radius: 7px !important; font: inherit; font-size: 12px; padding: 7px 10px; cursor: pointer; }
#roomPerformance .performance-back[hidden] { display: none; }
.performance-tooltip { position: fixed; z-index: 1100; width: 236px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px; border: 1px solid #e8e0f6; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px #34215a24; color: var(--db-text); font-size: 12px; pointer-events: none; }
.performance-tooltip[hidden] { display: none; }
.performance-tooltip-date, .performance-tooltip-value { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.performance-tooltip-date { color: var(--db-muted); padding-bottom: 10px; border-bottom: 1px solid var(--db-line); }
.performance-tooltip-date span { font-size: 11px; }
.performance-tooltip-value { margin-top: 10px; }
.performance-tooltip-value strong { color: var(--db-accent-deep); font-size: 18px; }
.performance-tooltip-value small { margin-left: 5px; font-weight: 400; font-size: 10px; }
#roomPerformance { padding: 16px; border: 1px solid var(--db-line); border-radius: 14px; background: #fff; box-shadow: var(--db-shadow-sm); }
.performance-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.performance-value-control { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 2px; color: var(--db-muted); font-size: 12px; cursor: pointer; white-space: nowrap; }
.performance-value-control[hidden] { display: none; }
.performance-value-control input { margin: 0; accent-color: var(--db-accent); cursor: pointer; }
/* 全局按钮归一化使用强制样式；这里必须覆盖，保证指标选中状态和排行条可辨。 */
#roomPerformance .performance-controls > button { border: 0 !important; border-radius: 7px !important; padding: 8px 14px; background: var(--db-surface-dim) !important; color: var(--db-muted) !important; box-shadow: none !important; cursor: pointer; font-size: 12px; }
#roomPerformance .performance-controls > button[aria-pressed="true"] { color: var(--db-accent-deep) !important; background: var(--db-accent-soft) !important; font-weight: 700; }
.performance-controls > button:disabled { cursor: default; opacity: .5; }
.performance-rankings { display: grid; gap: 4px; }
#roomPerformance .performance-rank-row { display: grid; grid-template-columns: 24px minmax(100px, 230px) minmax(60px, 1fr) 80px 70px; gap: 16px; align-items: center; width: 100%; padding: 8px; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--db-text) !important; cursor: pointer; text-align: left; text-decoration: none; font: inherit; }
#roomPerformance .performance-rank-row:hover { background: #faf8ff !important; }
.performance-rank-index { font-size: 12px; color: var(--db-faint); text-align: center; }
.performance-rank-row:first-child .performance-rank-index { color: var(--db-accent); font-weight: 800; }
.performance-rank-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.performance-rank-avatar { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--db-accent-soft); color: var(--db-accent-deep); font-size: 13px; font-weight: 600; }
.performance-rank-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.performance-rank-avatar img[hidden] { display: none; }
.performance-rank-label { min-width: 0; }
.performance-rank-name small { display: block; margin-top: 4px; color: var(--db-muted); font-size: 11px; }
.performance-rank-track { height: 6px; background: #f5f3fa; border-radius: 3px; overflow: hidden; }
.performance-rank-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #bea6ed, #8961d1); }
.performance-rank-row strong { font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.performance-rank-action { font-size: 11px; color: var(--db-accent-deep); text-align: right; }
.performance-trend-scroll { overflow-x: auto; }
.performance-trend { display: block; width: 100%; min-width: 520px; height: auto; }
.performance-trend text { fill: var(--db-muted); font-size: 11px; }
.trend-grid { stroke: #ececf4; stroke-dasharray: 3 5; }
/* 描边保持屏幕像素宽度，宽屏拉伸或手机横滚时不随SVG比例变粗。 */
.trend-line { fill: none; stroke: #9672d9; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trend-point { fill: white; stroke: #9672d9; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.performance-trend a:hover .trend-point, .performance-trend a:focus .trend-point { fill: #9672d9; }
.performance-trend a:focus { outline: none; }
.performance-trend a:focus-visible .trend-point { stroke-width: 4; }
.performance-trend .trend-missing { fill: #aeb5c4; }
.performance-trend .trend-value { fill: var(--db-accent-deep); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
@media (max-width: 700px) {
  #roomPerformance { padding: 14px 16px; }
  .performance-heading > div:not(.performance-heading-actions) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; }
  .performance-heading .performance-heading-actions { gap: 6px; flex-wrap: wrap; }
  .performance-room-name { grid-column: 1 / -1; grid-row: 2; }
  .performance-mode { grid-column: 2; grid-row: 1; }
  .performance-trend text { font-size: 18px; }
  .performance-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .performance-value-control { grid-column: 1 / -1; justify-self: end; margin-top: 6px; }
  .performance-trend .trend-value { font-size: 18px; }
  #roomPerformance .performance-controls > button { padding: 8px 2px; }
  #roomPerformance .performance-rank-row { grid-template-columns: 16px minmax(0, 1fr) 64px; gap: 8px 10px; padding: 12px 0; }
  .performance-rank-track { grid-column: 2; grid-row: auto; height: 5px; }
  .performance-rank-row strong { grid-column: 3; grid-row: 1; font-size: 13px; }
  .performance-rank-action { grid-column: 3; grid-row: 2; }
  .performance-rank-index { grid-column: 1; grid-row: 1; }
  .performance-rank-name { grid-column: 2; grid-row: 1; font-size: 12px; }
}