:root {--bg: #0b0d10;--panel: #12161b;--panel-elev: #171c22;--text: #e7edf5;--muted: #9fb2c8;--primary: #4cc9f0;--accent: #a1ff0a;--line: rgba(255,255,255,.06);--glow: rgba(76,201,240,.45);--radius: 16px;--radius-sm: 12px;--shadow: 0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.02);}
.page {padding: 40px 20px;max-width: 1200px;margin: 0 auto;}
.catalog__intro {margin-bottom: 20px;}
.catalog__title {margin: 0 0 6px;font-size: clamp(28px,4vw,40px);letter-spacing: .3px;}
.catalog__subtitle {margin: 0;color: var(--muted);}
.catalog__controls {display: flex;gap: 16px;align-items: flex-start;flex-wrap: wrap;justify-content: space-between;background: linear-gradient(180deg,var(--panel),var(--panel-elev));border: 1px solid var(--line);border-radius: var(--radius);padding: 16px;margin: 20px 0 24px;box-shadow: var(--shadow);}
.controls__left {display: flex;gap: 12px;flex-wrap: wrap;align-items: center;}
.controls__right {display: flex;align-items: center;}
.search {position: relative;display: flex;align-items: center;width: min(380px,90vw);background: rgba(255,255,255,.02);border: 1px solid var(--line);border-radius: 999px;padding: 10px 14px 10px 40px;}
.search:focus-within {box-shadow: 0 0 0 3px rgba(76,201,240,.15),0 10px 30px var(--glow);}
.search__icon {position: absolute;left: 12px;color: var(--muted);}
.search__input {width: 100%;border: none;outline: none;background: transparent;color: var(--text);font-size: 14px;}
.chips {display: flex;gap: 8px;flex-wrap: wrap;}
.chips .chip {cursor: pointer;user-select: none;border-radius: 999px;padding: 8px 12px;font-size: 13px;color: var(--muted);border: 1px solid var(--line);background: rgba(255,255,255,.02);transition: .2s;}
.chips .chip[aria-selected="true"], .chips .chip:hover {color: var(--text);border-color: rgba(76,201,240,.35);background: rgba(76,201,240,.08);}
.sort {display: flex;align-items: center;gap: 8px;color: var(--muted);}
.sort__select {appearance: none;background: rgba(255,255,255,.02);color: var(--text);border: 1px solid var(--line);padding: 10px 14px;border-radius: 12px;outline: none;}
.sort__select:focus {box-shadow: 0 0 0 3px rgba(76,201,240,.15);}
.sort__select option {color: #000;}
.grid {display: grid;gap: 16px;grid-template-columns: repeat(auto-fill,minmax(260px,1fr));}
.card {position: relative;text-decoration: none;background: linear-gradient(180deg,var(--panel),var(--panel-elev));border: 1px solid var(--line);border-radius: var(--radius);overflow: hidden;display: flex;flex-direction: column;min-height: 320px;box-shadow: var(--shadow);outline: none;transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.card:hover:after {transform: translateX(0%);opacity: 1;}
.card:after {content: "";width: 25%;height: 100%;background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 30%,rgba(255,255,255,.7) 70%,#fff 100%);display: block;z-index: 3;position: absolute;right: 0;top: 0;transition: .4s;transform: translateX(100%);opacity: 0;}
.card:hover, .card:focus {transform: translateY(-2px);border-color: rgba(76,201,240,.35);box-shadow: 0 20px 50px rgba(0,0,0,.45),0 0 0 1px rgba(76,201,240,.08) inset;}
.card__media {height: 160px;background: radial-gradient(300px 200px at 20% 10%,rgba(76,201,240,.22),transparent),radial-gradient(300px 200px at 120% 60%,rgba(161,255,10,.15),transparent),#0f1318;display: flex;align-items: center;justify-content: center;}
.card__media img {width: 100%;height: 100%;object-fit: cover;position: absolute;inset: 0;z-index: 1;}
@media (max-width: 520px) {.page {padding: 28px 16px;}
	.search {width: 100%;}}
.fly-btn {position: absolute;right: 17px;top: 18px;display: flex;flex-direction: column;gap: 10px;z-index: 4;}
.fly-btn button {background: transparent;border: none;padding: 0;width: 25px;height: 25px;cursor: pointer;transition: .4s;transform: translateX(200%);}
button.fly-btn__info {transition-delay: .2s;}
button.fly-btn__send {transition-delay: .4s;}
.card:hover .fly-btn button {transform: translateX(0);}