.ranking-section { padding: 2rem 0; }
.ranking-section h2 { font-family: 'Outfit', sans-serif; font-size: 2rem; }
.ranking-section p { color: #abb8cd; line-height: 1.6; max-width: 80ch; }
.ranking-search-panel, #ranking-history { padding: 1.5rem; margin: 1.5rem 0; border: 1px solid #303b4c; border-radius: 16px; background: #10151f; }
.ranking-search-row, .ranking-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0; }
.ranking-search-row input { flex: 1; min-width: 180px; max-width: 520px; padding: .8rem; border: 1px solid #566881; border-radius: 8px; color: #f5f7fa; background: #090e15; }
.ranking-section button { background: #202c40; border: 1px solid #50647e; border-radius: 8px; padding: .65rem .9rem; color: #f5f7fa; cursor: pointer; }
.ranking-section button:hover:not(:disabled) { border-color: #f5b700; }
.ranking-section button:disabled { opacity: .45; cursor: default; }
.ranking-section :focus-visible { outline: 2px solid #f5b700; outline-offset: 3px; }
#ranking-search-button { background: #e4a700; color: #080d14; font-weight: 700; }
.ranking-table-scroll { overflow-x: auto; }
.ranking-table { width: 100%; border-collapse: collapse; text-align: left; }
.ranking-table caption { text-align: left; font-weight: 700; padding: .8rem 0; }
.ranking-table th, .ranking-table td { padding: .7rem; border-bottom: 1px solid #303b4c; }
.ranking-table th { color: #f5cf68; }
.ranking-table td { color: #d1daea; }
.ranking-table tbody tr:nth-child(even) { background: #111925; }
.ranking-table button { text-align: left; overflow-wrap: anywhere; }
#ranking-search-status { color: #f5cf68; }
#ranking-identity-note, #ranking-bonus-note { font-size: .875rem; }
@media (max-width: 600px) { .ranking-search-panel, #ranking-history { padding: 1rem; } .ranking-table { font-size: .85rem; } }