:root { --ranking-width: 254px; }
.sidebar-ranking { position: fixed; left: var(--sidebar-width); top: var(--topbar-height); bottom: 0; width: var(--ranking-width); overflow-y: auto; background: #fff; border-right: 1px solid var(--line); padding: 16px 10px 12px; }
main { margin-left: calc(var(--sidebar-width) + var(--ranking-width)); }
.rank-summary { display:flex; align-items:center; justify-content:space-between; gap:5px; cursor:pointer; list-style:none; padding:0 4px; color:#657180; font-size:10px; letter-spacing:1px; font-weight:600; }
.rank-summary::-webkit-details-marker {display:none}
.rank-summary small {font-size:9px;letter-spacing:0;font-weight:400}
.rank-summary:after {content:'⌄';font-size:13px;letter-spacing:0}
details[open] .rank-summary:after {content:'⌃'}
.ranking-list {margin-top:12px;font-size:11px;color:var(--muted)}
.rank-row {display:grid;grid-template-columns:14px 22px minmax(0,1fr) auto;align-items:center;gap:7px;padding:8px 3px;min-height:44px;border-bottom:1px solid #edf0f4;border-radius:3px;text-decoration:none;color:var(--ink)}
.rank-row:hover {background:#f3f6f9}
.rank-number {font-size:9px;color:#8a94a0;font-variant-numeric:tabular-nums}
.rank-row img {width:22px;height:22px;object-fit:contain;border-radius:50%}
.rank-fallback {width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#edf1f5;color:#526475;font-size:10px}
.rank-asset {min-width:0}
.rank-asset strong {display:block;font-size:11px;line-height:1.3;font-weight:600}
.rank-asset small {display:block;max-width:75px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:var(--muted);line-height:1.5}
.rank-values {text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-price {display:block;font-size:11px;font-weight:600;line-height:1.4}
.rank-change {display:block;font-size:9px;line-height:1.4;color:#238254}
.rank-change.negative {color:#c15353}
.ranking-status {margin:12px 4px 4px;font-size:10px;color:var(--muted);line-height:1.5}
.sidebar-ranking[data-state="live"] .ranking-status {color:#238254}
.sidebar-ranking[data-state="offline"] .ranking-status,.sidebar-ranking[data-state="stale"] .ranking-status {color:#a37435}
.rank-source {display:block;margin:3px 4px;font-size:9px;color:#7f8995;line-height:1.7}
.rank-source a {color:#647486;text-decoration:none}
.ranking-stamp {display:block}
.rank-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 2px 0;padding-bottom:8px;border-bottom:1px solid var(--line)}
.rank-pagination button{width:32px;min-height:30px;border:1px solid #e0e5e9;border-radius:4px;background:#fafbfc;color:var(--ink);font:20px/1 Arial,sans-serif;cursor:pointer}
.rank-pagination button:hover:not(:disabled){background:#eaf1f6}
.rank-pagination button:disabled{opacity:.35;cursor:default}
#ranking-range{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.rank-row{grid-template-columns:18px 22px minmax(0,1fr) auto;gap:5px}
.rank-asset strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(pointer:coarse),(max-width:800px){.rank-pagination button{width:44px;min-height:44px}}
@media(max-width:600px) { :root {--ranking-width:216px;} .sidebar-ranking {padding-inline:7px;} .rank-row {gap:5px;} }