/* Filter and theme controls share the card's glass, glow and typography. */
:root { --hud-accent:#00e5ff; --hud-accent-rgb:0,229,255; --hud-secondary:#ff007b; --hud-ink:#effcff; --hud-muted:#a6bac4; --hud-panel:rgba(14,21,28,.92); --hud-line:rgba(207,234,245,.17); }
.garage-filter.hud-filter-surface {
    display:block; position:relative; z-index:35; flex-shrink:0; padding:0 10px 8px;
    background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(5,12,18,.32));
    border-bottom:1px solid var(--hud-line); color:var(--hud-ink);
}
.hud-filter-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; }
.garage-filter.hud-filter-surface button.hud-filter-toggle, .garage-filter.hud-filter-surface button.hud-clear-btn { border:0; border-radius:0; background:none; color:var(--hud-muted); cursor:pointer; font-family:inherit; }
.garage-filter.hud-filter-surface button.hud-filter-toggle { display:flex; align-items:center; gap:9px; flex:1; min-height:36px; padding:4px 5px; color:var(--hud-ink); font-size:12px; font-weight:750; letter-spacing:.05em; text-align:left; }
.hud-filter-mark { display:inline-block; width:3px; height:17px; border-radius:3px; background:var(--hud-accent); box-shadow:0 0 12px rgba(var(--hud-accent-rgb),.5); flex:none; }
.hud-filter-toggle .hud-chevron { margin-left:auto; transition:transform .25s ease; }
.hud-filter-surface.is-open .hud-filter-toggle .hud-chevron { transform:rotate(180deg); }
.garage-filter.hud-filter-surface button.hud-clear-btn { color:var(--hud-accent); padding:5px 8px; border:1px solid var(--hud-line); border-radius:7px; font-size:11px; }
.garage-filter.hud-filter-surface button.hud-clear-btn:hover { background:rgba(var(--hud-accent-rgb),.11); }
.hud-filter-fields { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .28s cubic-bezier(.2,.7,.2,1),opacity .2s ease; }
.hud-filter-fields > .hud-garage-grid { min-height:0; overflow:hidden; }
.hud-filter-surface.is-open .hud-filter-fields { grid-template-rows:1fr; opacity:1; overflow:visible; }
.hud-filter-surface.is-open .hud-garage-grid { overflow:visible; }
.hud-garage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:2px 0 8px; }
.hud-garage-grid > .hud-select:last-child { grid-column:1/-1; }
#garage-result-count { display:block; padding:1px 5px 2px; font-size:11px; letter-spacing:.03em; color:var(--hud-muted); }
.hud-select { position:relative; min-width:0; }
select.hud-select-source { display:none !important; }
.garage-filter.hud-filter-surface button.hud-select-trigger, .hud-rank-grid button.hud-select-trigger { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:100%; min-width:0; min-height:47px; position:relative; padding:7px 29px 7px 11px; border:1px solid var(--hud-line); border-radius:9px; background:linear-gradient(140deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); color:var(--hud-ink); cursor:pointer; text-align:left; font-family:inherit; transition:border-color .22s ease,background .22s ease,box-shadow .22s ease; }
.garage-filter.hud-filter-surface button.hud-select-trigger:hover, .garage-filter.hud-filter-surface button.hud-select-trigger[aria-expanded="true"], .hud-rank-grid button.hud-select-trigger:hover, .hud-rank-grid button.hud-select-trigger[aria-expanded="true"] { border-color:rgba(var(--hud-accent-rgb),.54); background:rgba(var(--hud-accent-rgb),.08); box-shadow:0 0 16px rgba(var(--hud-accent-rgb),.09),inset 0 1px 0 rgba(255,255,255,.09); }
.hud-select-trigger:focus-visible, .hud-filter-toggle:focus-visible, .hud-clear-btn:focus-visible, .hud-select-option:focus-visible, .hud-menu-search:focus-visible { outline:2px solid var(--hud-accent); outline-offset:2px; }
.hud-select-label { font-family:var(--font-family); font-size:10px; font-weight:650; letter-spacing:.12em; color:var(--hud-muted); line-height:1.2; }
.hud-select-value { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-family); font-size:12px; font-weight:650; margin-top:3px; }
.hud-select.has-value .hud-select-value { color:var(--hud-accent); }
.hud-chevron { display:inline-block; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.8; flex:none; }
.hud-select-trigger .hud-chevron { position:absolute; top:50%; right:12px; transform:translateY(-65%) rotate(45deg); }
.hud-select-trigger[aria-expanded="true"] .hud-chevron { transform:translateY(-25%) rotate(225deg); }
.hud-select-menu[hidden] { display:none !important; }
.hud-select-menu { position:absolute; z-index:500; top:calc(100% + 6px); left:0; width:max(100%,185px); max-width:min(320px,calc(100vw - 32px)); max-height:min(42vh,300px); overflow:auto; overscroll-behavior:contain; padding:6px; border:1px solid rgba(var(--hud-accent-rgb),.36); border-radius:11px; background:linear-gradient(145deg,rgba(31,40,49,.97),rgba(10,17,24,.98)); box-shadow:0 20px 48px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.1),0 0 20px rgba(var(--hud-accent-rgb),.08); backdrop-filter:blur(24px); animation:hud-menu-in .22s cubic-bezier(.16,1,.3,1) both; }
.hud-garage-grid > .hud-select:first-child .hud-select-menu, .hud-garage-grid > .hud-select:last-child .hud-select-menu { width:min(315px,calc(100vw - 35px)); }
.hud-rank-grid > .hud-select:last-child .hud-select-menu { left:auto; right:0; }
@keyframes hud-menu-in { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
.hud-menu-search { display:block; width:100%; position:sticky; top:-6px; z-index:1; margin:0 0 5px; padding:8px 9px; box-sizing:border-box; border:1px solid var(--hud-line); border-radius:7px; background:#14212b; color:var(--hud-ink); font:12px var(--font-family); }
.hud-menu-options { display:flex; flex-direction:column; gap:2px; }
.garage-filter.hud-filter-surface button.hud-select-option, .hud-rank-grid button.hud-select-option { display:flex; align-items:center; width:100%; min-height:34px; padding:7px 10px; border:0; border-radius:6px; background:none; color:#d8e7ed; font:12px var(--font-family); text-align:left; cursor:pointer; transition:background .16s ease,color .16s ease; }
.garage-filter.hud-filter-surface button.hud-select-option:hover, .garage-filter.hud-filter-surface button.hud-select-option:focus-visible, .hud-rank-grid button.hud-select-option:hover, .hud-rank-grid button.hud-select-option:focus-visible { color:#fff; background:rgba(var(--hud-accent-rgb),.12); }
.garage-filter.hud-filter-surface button.hud-select-option[aria-selected="true"], .hud-rank-grid button.hud-select-option[aria-selected="true"] { color:var(--hud-accent); background:rgba(var(--hud-accent-rgb),.12); box-shadow:inset 2px 0 var(--hud-accent); }
.hud-menu-empty { padding:10px; color:var(--hud-muted); font:12px var(--font-family); }
.hud-rank-settings.rank-config { display:block; padding:10px 13px 13px; border:1px solid var(--hud-line); border-radius:15px; background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(3,13,19,.35)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.hud-rank-heading { display:flex; align-items:center; gap:9px; width:100%; margin-bottom:10px; padding:0; border:0; background:none; color:var(--hud-ink); font:800 13px var(--font-family); letter-spacing:.06em; text-align:left; cursor:pointer; }
.hud-rank-chevron { display:block; width:7px; height:7px; margin-left:auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; }
.hud-rank-settings.is-open .hud-rank-chevron { transform:rotate(225deg); }
.hud-rank-settings:not(.is-open) .hud-rank-grid { display:none; }
.hud-rank-heading:focus-visible { outline:2px solid var(--hud-accent); outline-offset:2px; border-radius:4px; }
.hud-rank-subtitle { margin-left:auto; color:var(--hud-muted); font-size:10px; letter-spacing:.14em; font-weight:600; }
.hud-rank-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; width:100%; }
.hud-rank-grid .hud-select-trigger { min-height:49px; }
#rank-result-count { padding:7px 0 0; color:var(--hud-muted); font:12px var(--font-family); }
.rank-header-group { overflow:visible; position:relative; z-index:40; }
.rank-filter-row .rank-btn { border-color:var(--hud-line); color:var(--hud-muted); background:rgba(255,255,255,.05); }
.rank-filter-row .rank-btn:hover { border-color:rgba(var(--hud-accent-rgb),.4); }
.rank-filter-row .rank-btn.active, #rank-filter-cat .rank-btn.active { background:rgba(var(--hud-accent-rgb),.2); color:var(--hud-accent); border-color:rgba(var(--hud-accent-rgb),.66); box-shadow:0 0 18px rgba(var(--hud-accent-rgb),.18),inset 0 1px 0 rgba(255,255,255,.12); }
@media (max-width:900px) { .hud-rank-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:768px) {
 body[class*="mode-"] .garage-panel { box-sizing:border-box !important; height:100dvh !important; max-height:100dvh !important; padding:60px 0 96px !important; }
 .garage-filter.hud-filter-surface { background:rgba(15,24,32,.96); padding:0 15px 10px; }
 .garage-panel.mobile-active .garage-tools > * { opacity:1 !important; pointer-events:auto !important; }
 .garage-panel.mobile-active .garage-filter { visibility:visible; pointer-events:auto; }
 .hud-rank-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hud-rank-grid > .hud-select:last-child { grid-column:1/-1; }
 .hud-select-menu { max-height:260px; }
 .hud-rank-settings.rank-config { padding:10px; }
 .hud-rank-subtitle { display:none; }
}
@media (prefers-reduced-motion:reduce) {
 .hud-select-menu, .hud-filter-fields, .hud-filter-toggle .hud-chevron { animation:none !important; transition:none !important; }
}

/* v5.1 layout pass: keep filter surfaces anchored to the HUD panel. */
.garage-filter.hud-filter-surface {
    box-sizing:border-box;
    width:100%;
    padding:8px 12px 11px;
    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(var(--hud-accent-rgb),.2);
    background:rgba(11,15,21,.22);
}
.hud-filter-head { min-height:34px; }
.garage-filter.hud-filter-surface button.hud-filter-toggle { min-height:32px; padding:3px 2px; }
.garage-filter.hud-filter-surface button.hud-clear-btn { min-height:27px; padding:4px 10px; background:rgba(255,255,255,.035); }
.hud-filter-fields > .hud-garage-grid { overflow:visible; }
.hud-garage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:4px 0 5px; }
.hud-garage-grid > .hud-select:last-child { grid-column:auto; }
.hud-garage-grid > .hud-select .hud-select-menu { left:0; right:auto; width:100%; max-width:none; }
.hud-select-trigger { box-sizing:border-box; }
.garage-filter.hud-filter-surface button.hud-select-trigger { min-height:50px; background:linear-gradient(145deg,rgba(43,65,75,.52),rgba(12,22,29,.8)); }
.garage-filter.hud-filter-surface button.hud-select-trigger:hover,
.garage-filter.hud-filter-surface button.hud-select-trigger[aria-expanded="true"] { background:linear-gradient(145deg,rgba(var(--hud-accent-rgb),.15),rgba(12,22,29,.86)); }
.hud-select-menu { box-sizing:border-box; border-color:rgba(var(--hud-accent-rgb),.42); background:linear-gradient(150deg,rgba(24,39,48,.98),rgba(8,16,23,.99)); }
.hud-filter-surface .hud-select-menu { max-height:min(38vh,270px); }

/* Ranking filters use the same framed surface and rhythm as the garage filters. */
#rank-filter-tier, #rank-filter-cat {
    box-sizing:border-box;
    justify-content:flex-start;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border:1px solid var(--hud-line);
    border-radius:12px;
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(5,14,21,.48));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#rank-filter-tier::before, #rank-filter-cat::before {
    flex:0 0 auto;
    min-width:34px;
    color:var(--hud-muted);
    font:700 10px/1.2 var(--font-family);
    letter-spacing:.12em;
    text-align:center;
}
#rank-filter-tier::before { content:"等级"; }
#rank-filter-cat::before { content:"指标"; }
.rank-filter-row .rank-btn {
    min-height:30px;
    padding:5px 12px;
    border-radius:8px;
    background:rgba(255,255,255,.035);
    font-size:12px;
}
.rank-filter-row .rank-btn.active, #rank-filter-cat .rank-btn.active {
    background:rgba(var(--hud-accent-rgb),.18);
    color:var(--hud-accent);
    border-color:rgba(var(--hud-accent-rgb),.68);
    box-shadow:0 0 14px rgba(var(--hud-accent-rgb),.14),inset 0 1px 0 rgba(255,255,255,.12);
}
.hud-rank-settings.rank-config { margin-top:0; background:linear-gradient(145deg,rgba(22,35,43,.9),rgba(6,14,20,.72)); }

/* One neutral glass layer follows the selected vehicle and every display mode. */
#garage-panel { --garage-surface:rgba(11,15,21,.22); }
#garage-panel > .garage-tools,
#garage-panel > .garage-filter.hud-filter-surface,
#garage-panel > .garage-scroll-wrapper { background:var(--garage-surface); }
#garage-panel > .garage-filter.hud-filter-surface {
    border-top-color:rgba(255,255,255,.07);
    border-bottom-color:rgba(255,255,255,.09);
}
#garage-panel > .garage-tools { border-radius:12px 12px 0 0; }
#garage-panel.glass-effect::before { clip-path:inset(0 round 12px); }

/* The rank menu remains readable and its scrollbar matches the glass panel. */
.hud-rank-grid button.hud-select-option { min-height:41px; padding:9px 11px; font:600 16px/1.25 var(--font-family); }
.hud-rank-grid .hud-menu-search { min-height:38px; font:600 15px/1.3 var(--font-family); }
.hud-rank-grid .hud-menu-empty { font-size:15px; }
.hud-rank-grid .hud-select-value { font-size:14px; }
.garage-filter.hud-filter-surface button.hud-select-option { min-height:41px; padding:9px 11px; font:600 16px/1.25 var(--font-family); }
.garage-filter.hud-filter-surface .hud-menu-search { min-height:38px; font:600 15px/1.3 var(--font-family); }
.garage-filter.hud-filter-surface .hud-menu-empty { font-size:15px; }
.garage-filter.hud-filter-surface .hud-select-value { font-size:14px; }
.garage-filter.hud-filter-surface button.hud-filter-toggle { font-size:13px; }
#garage-result-count { font-size:12px; }
.hud-select-menu { scrollbar-width:thin; scrollbar-color:rgba(var(--hud-accent-rgb),.52) rgba(8,16,23,.9); }
.hud-select-menu::-webkit-scrollbar { width:8px; }
.hud-select-menu::-webkit-scrollbar-track { background:rgba(8,16,23,.9); border-radius:8px; }
.hud-select-menu::-webkit-scrollbar-thumb { background:rgba(var(--hud-accent-rgb),.48); border:2px solid rgba(8,16,23,.9); border-radius:8px; }
.hud-select-menu::-webkit-scrollbar-thumb:hover { background:rgba(var(--hud-accent-rgb),.72); }
.hud-select-menu::-webkit-scrollbar-button { display:none; }
@media (max-width:768px) {
 #garage-panel > .garage-tools { background:var(--garage-surface) !important; }
 #garage-panel > .garage-tools { border-radius:0; }
 #garage-panel.glass-effect::before { clip-path:none; }
}

@media (min-width:769px) {
    .garage-panel.filter-open { overflow:visible !important; }
    .garage-panel.filter-open .garage-scroll-wrapper { overflow-y:auto !important; }
    .rank-header-group { width:min(920px,calc(100% - 28px)) !important; }
}

@media (max-width:768px) {
    .garage-filter.hud-filter-surface { padding:8px 14px 12px; }
    .hud-garage-grid { gap:8px; }
    .hud-garage-grid > .hud-select .hud-select-menu { width:min(100%,calc(100vw - 42px)); max-width:calc(100vw - 42px); }
    #rank-filter-tier, #rank-filter-cat { padding:8px; gap:5px; flex-wrap:wrap; }
    #rank-filter-tier::before, #rank-filter-cat::before { width:100%; text-align:left; padding-left:2px; }
    .rank-filter-row .rank-btn { flex:1 1 auto; min-width:42px; padding-inline:8px; }
    .rank-header-group { width:100% !important; }
}