.catalog .filters{display:grid;grid-template-columns:minmax(180px,1.6fr) minmax(110px,.65fr) minmax(180px,1fr) auto;align-items:end;gap:12px;padding:20px;background:linear-gradient(125deg,#171a1e,#101214);border:1px solid #2b2f34;border-radius:22px;box-shadow:0 14px 44px #0003;isolation:isolate}
.catalog .filter-field{display:flex;min-width:0;flex-direction:column;gap:9px;margin:0;color:#a4abb5;font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}
.catalog .filters input,.catalog .filters select,.genre-menu summary{box-sizing:border-box;width:100%;min-width:0;height:52px;min-height:52px;margin:0;padding:0 16px;border:1px solid #30363e;border-radius:12px;background:#0d1013;color:#f2f4f7;font:inherit;font-size:14px;font-weight:400;letter-spacing:normal;text-transform:none;outline:none;transition:border-color .18s,box-shadow .18s}
.catalog .filters select.year-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:40px;background-repeat:no-repeat;background-position:right 14px center;background-size:13px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dfff35' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")}
.catalog .filters input::placeholder{color:#737d89}.catalog .filters input:focus,.catalog .filters select:focus,.genre-menu summary:focus-visible{border-color:var(--lime);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 12%,transparent)}
.catalog .filters .btn{height:52px;padding:0 26px;border-radius:12px;font-size:14px;white-space:nowrap;background:var(--lime);box-shadow:0 5px 18px #0003}.catalog .filters .btn:hover{filter:brightness(1.08)}
.filter-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:26px 0 18px}.filter-footer .result-line{margin:0;font-size:14px}.filter-footer .result-line strong{display:inline-grid;place-items:center;min-width:34px;height:30px;margin-right:7px;padding:0 8px;border-radius:8px;background:#20252a;font-size:16px}.filter-clear{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.filter-clear:hover{color:var(--lime)}
.genre-menu{position:relative;text-transform:none;letter-spacing:normal}.genre-menu summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}.genre-menu summary::-webkit-details-marker{display:none}.genre-menu summary:after{content:'';width:7px;height:7px;border-right:1.5px solid #a4abb5;border-bottom:1.5px solid #a4abb5;transform:rotate(45deg);margin-top:-4px;flex-shrink:0}.genre-menu[open] summary{border-color:var(--lime)}.genre-menu[open] summary:after{transform:rotate(225deg);margin-top:4px}
.genre-panel{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:30;padding:10px;background:#171b20;border:1px solid #353c45;border-radius:15px;box-shadow:0 20px 55px #0009}.catalog .genre-panel input{height:42px;min-height:42px;margin-bottom:8px;background:#101317}.genre-options{max-height:260px;overflow:auto;scrollbar-width:thin;scrollbar-color:#48515b transparent}.genre-options button{display:block;width:100%;border:0;border-radius:8px;background:transparent;padding:11px 12px;text-align:left;color:#cbd1d9;font:inherit;font-size:14px;font-weight:400;cursor:pointer}.genre-options button:hover,.genre-options button:focus-visible{background:#272e36;color:white;outline:1px solid #586473;outline-offset:-1px}.genre-options button[aria-pressed="true"]{background:color-mix(in srgb,var(--lime) 12%,#171b20);color:var(--lime)}.genre-options button[aria-pressed="true"]:after{content:'✓';float:right}.genre-options button[hidden],.catalog .filters select[hidden]{display:none}.genre-panel p{font-size:12px;color:#a4abb5;padding:4px}
@media(max-width:850px){.catalog .filters{grid-template-columns:1fr 1fr;position:relative;top:auto}.catalog .filter-field:first-child{grid-column:1/-1}.catalog .filters .btn{grid-column:1/-1}.genre-panel{min-width:220px;left:auto}.filter-footer{align-items:baseline}}
@media(max-width:440px){.catalog .filters{padding:14px;gap:14px 10px;border-radius:16px;grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}.catalog .filters input,.genre-menu summary{padding:0 12px}.filter-footer{gap:8px}.filter-clear{font-size:12px}}
@media(prefers-reduced-motion:reduce){.catalog .filters input,.catalog .filters select,.genre-menu summary{transition:none}}