:root { --rank-guardian:#ff737b; --rank-justice:#69b7ff; --rank-conqueror:#f0c54b; }
:root[data-theme="light"] { --rank-guardian:#b31f30; --rank-justice:#155fa8; --rank-conqueror:#895a00; }
.rank-stars { font-family:Arial,'Segoe UI Symbol',sans-serif; font-weight:700; letter-spacing:1px; white-space:nowrap; }
.rank-stars[data-rank-group="G"], .rank-field option[data-rank-group="G"] { color:var(--rank-guardian); }
.rank-stars[data-rank-group="J"], .rank-field option[data-rank-group="J"] { color:var(--rank-justice); }
.rank-stars[data-rank-group="C"], .rank-field option[data-rank-group="C"] { color:var(--rank-conqueror); }
.rank-code { color:var(--text); }
.rank-field { min-width:0; }
.rank-field>label { display:block; }
.rank-field>select { margin-top:8px; width:100%; }
.rank-picker { position:relative; margin-top:8px; min-width:0; }
.rank-trigger { display:flex; align-items:center; gap:10px; width:100%; padding:13px 16px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.rank-chevron { margin-left:auto; }
.rank-trigger[aria-expanded="true"] .rank-chevron { transform:rotate(180deg); }
.rank-trigger:disabled { opacity:.5; cursor:default; }
.rank-options { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:70; max-height:min(330px,50vh); overflow-y:auto; overscroll-behavior:contain; padding:5px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); box-shadow:0 12px 28px #0004; }
.rank-options.opens-up { top:auto; bottom:calc(100% + 5px); }
.rank-options>[role="option"] { display:block; width:100%; padding:11px 10px; border:0; border-radius:4px; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.rank-options>[role="option"]:hover, .rank-options>[data-active] { background:var(--surface2); }
.rank-options>[aria-selected="true"] { box-shadow:inset 3px 0 var(--green); }
.rank-trigger:focus-visible, .rank-options>[role="option"]:focus-visible { outline:2px solid var(--green); outline-offset:2px; }