.main { max-width: 1200px; margin: 0 auto; padding: 20px; }
.card { background: #0d1422; border: 1px solid #1a2840; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.sec-head { font-size: 10px; color: #c9a84c; letter-spacing: 1.2px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #c9a84c22; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.filter-group { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.filter-label { font-size: 10px; color: #445566; margin-right: 2px; white-space: nowrap; }
.stab { font-size: 10px; padding: 3px 10px; border-radius: 4px; border: 1px solid #1a2840; color: #556677; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.stab:hover { border-color: #c9a84c44; color: #c9a84c; }
.stab.a { background: #c9a84c18; border-color: #c9a84c44; color: #c9a84c; }
.filter-sep { width: 1px; height: 16px; background: #1a2840; margin: 0 6px; }
.search-input { width: 100%; background: #080f1a; border: 1px solid #1a2840; border-radius: 6px; padding: 7px 12px; font-size: 11px; color: #dde; font-family: 'Inter', sans-serif; outline: none; margin-bottom: 12px; }
.search-input:focus { border-color: #c9a84c44; }
.search-input::placeholder { color: #334455; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.tbl th { color: #556677; font-weight: 500; padding: 6px 10px; text-align: left; border-bottom: 1px solid #1a2840; font-size: 10px; letter-spacing: 0.5px; cursor: pointer; white-space: nowrap; }
.tbl th:hover { color: #c9a84c; }
.tbl th.r { text-align: right; }
.tbl th.active-sort { color: #c9a84c; }
.tbl td { padding: 6px 10px; color: #bbc; border-bottom: 1px solid #0d1422; white-space: nowrap; }
.tbl td.r { text-align: right; }
.tbl td.gold { color: #c9a84c; font-weight: 600; }
.tbl tr:hover td { background: #131f30; }
.tbl tr.top1 td { background: #1c2800; }
.tbl tr.top2 td { background: #141f00; }
.tbl tr.top3 td { background: #0f1800; }
.rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700; }
.rank-1 { background: #c9a84c; color: #000; }
.rank-2 { background: #9ab; color: #000; }
.rank-3 { background: #b87333; color: #fff; }
.rank-n { color: #445566; font-size: 11px; }
.steam-link { font-size: 9px; color: #445566; margin-left: 4px; }
.steam-link:hover { color: #c9a84c; }
.records-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rec-card { background: #080f1a; border: 1px solid #1a2840; border-radius: 6px; padding: 12px; }
.rec-title { font-size: 9px; color: #445566; letter-spacing: 1px; margin-bottom: 8px; }
.rec-row { display: flex; align-items: center; padding: 4px 0; border-bottom: 1px solid #0d1422; gap: 6px; }
.rec-row:last-child { border-bottom: none; }
.rec-pos { font-size: 9px; color: #445566; min-width: 14px; }
.rec-name { font-size: 11px; color: #ccd; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.rec-tour { font-size: 9px; color: #445566; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.rec-val { font-size: 12px; font-weight: 600; color: #c9a84c; min-width: 30px; text-align: right; }
.loading { font-size: 12px; color: #445566; padding: 20px 0; text-align: center; }
footer { background: #0d1422; border-top: 1px solid #1a2840; padding: 14px 32px; display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
footer span { font-size: 11px; color: #334455; }
.footer-links { display: flex; gap: 16px; }
.footer-links a { font-size: 11px; color: #445566; }