* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1a1a2e; color: #eee; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
#top-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: #16213e; border-bottom: 1px solid #0f3460; flex-shrink: 0; }
#title-section h1 { font-size: 18px; font-weight: 600; }
#title-section .subtitle { font-size: 12px; color: #8899aa; margin-left: 8px; }
.sort-btn { padding: 4px 12px; border: 1px solid #0f3460; background: transparent; color: #8899aa; font-size: 12px; cursor: pointer; border-radius: 3px; }
.sort-btn:hover { color: #eee; border-color: #3498db; }
.sort-btn.active { background: #0f3460; color: #eee; border-color: #3498db; }
#main { flex: 1; overflow-y: auto; padding: 16px; }

.figure-row { display: flex; align-items: center; padding: 8px 12px; margin-bottom: 4px; background: #16213e; border-radius: 4px; border-left: 4px solid transparent; }
.figure-row.highlight { border-left-color: #e74c3c; background: #1a1a3e; }
.figure-rank { width: 30px; font-size: 13px; color: #556677; }
.figure-name { flex: 1; font-size: 14px; font-weight: 500; }
.figure-meta { font-size: 11px; color: #667788; margin-left: 4px; }

.metric-bars { display: flex; gap: 12px; align-items: center; }
.metric-col { display: flex; flex-direction: column; align-items: center; width: 100px; }
.metric-label { font-size: 10px; color: #556677; margin-bottom: 2px; }
.metric-bar-track { width: 100%; height: 12px; background: #0f1a2e; border-radius: 2px; overflow: hidden; }
.metric-bar-fill { height: 100%; border-radius: 2px; }
.metric-value { font-size: 11px; color: #8899aa; margin-top: 1px; }