#rankingSearch { position:fixed; top:10px; left:10px; width:200px; max-width:calc(100vw - 130px); z-index:1000; }
.ranking-input { position:relative; }
#rankingQuery { box-sizing:border-box; width:100%; height:48px; padding:9px 11px; border:1px solid #ccc; border-radius:8px; background:rgba(255,255,255,.94); font:14px Arial,sans-serif; }
.ranking-hint { position:absolute; inset:0; padding:9px 11px; pointer-events:none; display:flex; flex-direction:column; justify-content:center; color:#333; }
.ranking-hint strong { font-size:13px; }
.ranking-hint small { font-size:11px; font-style:italic; color:#65717c; margin-top:2px; }
#rankingQuery:focus + .ranking-hint, #rankingQuery:not(:placeholder-shown) + .ranking-hint { display:none; }
#rankingQuery:focus { outline:2px solid #3498db66; border-color:#3498db; }
#rankingResults { max-height:min(310px, 50vh); overflow-y:auto; background:#fff; border-radius:8px; box-shadow:0 4px 18px #0003; padding:4px; margin-top:4px; }
#rankingResults[hidden] { display:none; }
#rankingResults button { display:block; width:100%; padding:9px 7px; border:0; border-radius:4px; background:transparent; color:#172438; text-align:left; cursor:pointer; }
#rankingResults button:hover, #rankingResults button:focus { background:#e6eff8; }
#countryInfoPopup { top:66px; width:258px; max-width:calc(100vw - 20px); max-height:min(300px, calc(100dvh - 150px)); }
#rankingLegend { position:fixed; left:50%; bottom:76px; transform:translateX(-50%); width:210px; padding:8px 10px; border-radius:8px; background:#ffffffeb; color:#334155; font-size:11px; box-shadow:0 2px 8px #0002; pointer-events:none; z-index:500; }
.ranking-legend-title, .ranking-legend-scale { display:flex; justify-content:space-between; gap:8px; }
#rankingGradient { height:9px; border-radius:3px; margin:5px 0; }
.ranking-unranked { margin-top:5px; color:#576474; }
.ranking-unranked::before { content:''; display:inline-block; width:9px; height:9px; background:#d7dce0; border:1px solid #999; margin-right:5px; vertical-align:middle; }
#countryInfoPopup .country-info-actions { display:flex; opacity:1; pointer-events:auto; }
@media(max-width:768px) { #rankingSearch { width:190px; } #rankingLegend { bottom:80px; width:190px; } }
@media(max-height:450px) { #rankingLegend { left:auto; right:10px; top:58px; bottom:auto; transform:none; width:175px; } }