.section-content{
    padding-top: 80px;
}
.servers__page-title{
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.servers__page-subtitle{
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    margin: 0 0 24px;
    line-height: 1.4;
}
@media (max-width: 768px){
    /* Выравниваем заголовок/подзаголовок с кнопками категорий — они тоже центрируются на этом брейкпоинте. */
    .servers__page-title{ font-size: 22px; text-align: center; }
    .servers__page-subtitle{ font-size: 13px; margin-bottom: 18px; text-align: center; }
}
.servers__categories{
    display: flex;
    column-gap: 12px;
    align-items: center;
    margin-bottom: 30px;
}
.servers__categories-button{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid #3a3a3d;
    border-radius: 20px;
    color: #FFFFFF;
    cursor: pointer;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.servers__categories-icon {
    flex-shrink: 0;
    transition: filter 0.2s ease;
}
.servers__categories-button.is-active .servers__categories-icon {
    filter: brightness(0);
}
.servers__categories-button:hover {
    border-color: rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
}
.servers__categories-button:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 3px;
}
.servers__categories-button.is-active {
    background: var(--color-yellow);
    color: #000;
    border-color: var(--color-yellow);
    box-shadow: 0 2px 12px rgba(255, 210, 0, 0.3);
}
.servers__categories-button.is-active:hover {
    background: var(--color-yellow);
    border-color: var(--color-yellow);
}

.servers__search {
    display: flex;
    align-items: center;
    column-gap: 42px;
    color: #fff;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 28px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}
.servers__search-bar {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 750px;
}
.servers__search-input {
    flex: 1;
    padding: 10px 40px 10px 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 14px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.servers__search-input:hover {
    border-color: rgba(255, 255, 255, 0.15);
}
.servers__search-input:focus {
    border-color: var(--color-yellow);
    background-color: rgba(255, 255, 255, 0.06);
    outline: none;
}
.servers__search-icon {
    position: absolute;
    left: 10px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}
fieldset.servers__filters {
    display: flex;
    align-items: center;
    gap: 28px;
    border: none;
    padding: 0 0 0 28px;
    margin: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.servers__version {
    display: flex;
    align-items: center;
    gap: 10px;
}
.version-picker__label {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    font-size: 14px;
}
.version-picker__toggle[aria-expanded="true"] .version-picker__label {
    color: rgba(255, 210, 0, 0.7);
}
/* Скрытие поиска/фильтров/соцсетей при вкладке «Новые сервера» */
.servers-header.filters-hidden search,
.servers-header.filters-hidden .servers-header__filters {
    display: none;
}
.servers-header.filters-hidden {
    padding-bottom: 0;
}

/* Фильтры */
.servers-header__filters {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 66px;
    padding-inline: 20px;
    padding-block: 0;
    /* Анимация открытия/закрытия */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition:
        max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding-block 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.servers-header__filters.visible {
    max-height: 800px;
    opacity: 1;
    visibility: visible;
    padding-block: 50px;
    transform: translateY(0);
    border-bottom: 1px solid var(--color-yellow);
}
.servers-header__filter-category{
    flex: 1;
    min-width: 250px;
    max-width: 300px;
}
.servers-header__filter--title {
    font-size: 16px;
    color: #fff;
    margin-bottom: 10px;
}
.servers-header__filter--options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.servers-header__filter--button {
    background-color: var(--color-gray);
    padding: 8px 12px;
    font-size: 14px;
}
.servers-header__filter--button:hover {
    background-color: var(--color-gray-light);
}
.servers-header__filter--button:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 3px;
}
.servers__inline-elements {
    display: flex;
    align-items: center;
    column-gap: 42px;
    width: 100%;
    position: relative;
}
.servers__search-bar {
    display: flex;
    width: 500px;
    max-width: 100%;
}
.servers__socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 35px;
    margin-left: auto;
    flex-shrink: 0;
}
.servers__socials .footer__social-link {
    display: flex;
    align-items: center;
}
search:has(+ .servers-header__filters.visible) .servers__search {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.servers__list{
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.server-card {
    display: flex;
    align-items: flex-start;
    padding: 35px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    color: #fff;
    position: relative;
    overflow: visible;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.server-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}
.server-card__stretched-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 16px;
}
.server-card__stretched-link:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 3px;
}
.server-card__rank,
.server-card__rank--mob {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 40px;
    height: 40px;
    background-color: var(--color-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #121212;
    z-index: 1;
}
.rank-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.server-card__rank--mob {
    display: none;
}
.server-card__content {
    flex: 1;
    min-width: 0;
}
.server-card__header {
    margin-bottom: 15px;
}
.server-card__headerwrapper{
    display: flex;
    align-items: center;
    column-gap: 20px;
}
.server-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}
.server-name a {
    color: #fff;
}
.server-description {
    font-size: 14px;
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.7);
    max-width: 468px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.server-card__info {
    display: flex;
    align-items: center;
    column-gap: 50px;
}
.server-placeholder {
    flex-shrink: 0;
    border-radius: 5px;
    width: 468px;
    height: 60px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.server-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 35px;
    flex: 1;
    min-width: 0;
}
.server-details .detail-item {
    justify-self: center;
    min-width: 0;
}
.detail-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.detail-icon-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
[data-tooltip]::before,
[data-tooltip]::after {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
}
.detail-icon {
    height: auto;
    flex-shrink: 0;
}
.detail-text {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.server-link-wrapper {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    z-index: 1;
}
.server-link {
    background-color: var(--color-yellow);
    color: black;
    padding: 5px 14px;
    height: 50px;
    width: 190px;
    gap: 8px;
}
.server-link:hover {
    background-color: #e0bf00;
}
.server-link-text {
    font-size: 14px;
    white-space: nowrap;
}
.copy-icon {
    flex-shrink: 0;
}
.server-info__card-right img.copy-icon {
    filter: invert(1);
}
.copy-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: #1a1a1a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
}
.copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
}
.copy-tooltip.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.add-server-btn-wrapper {
    position: relative;
    display: inline-block;
}
.server-limit-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: #1a1a1a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
}
.server-limit-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
}
.server-limit-tooltip.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.server-details__wrapper{
    display: flex;
    align-items: center;
    gap: 35px;
    flex: 1;
    min-width: 0;
}
.screenshot-clickable {
    cursor: pointer;
}
.screenshot-clickable:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 3px;
    border-radius: 4px;
}
/* Страницы серверов */
.servers__pages{
    margin-bottom: 225px;
}
.servers__pages--pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 20px 0;
}
.servers__load-more {
    padding: 0 20px;
    height: 40px;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 0 0;
    margin-bottom: 225px;
}
.pagination__page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.pagination__page:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}
.pagination__page--current {
    background: var(--color-yellow);
    color: #000;
    pointer-events: none;
}
.pagination__ellipsis {
    padding: 0 4px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Loading state for AJAX list replacement */
.servers__list.is-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.section-support{
    background-image: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    margin-bottom: 50px;
    padding-top: 50px;
}
.support{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
}
.support__content{
    max-width: 566px;
    text-align: center;
}
.support__content-title{
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 35px;
}
.support__content-text{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 50px;
}
.support__content-link{
    width: 157px;
    margin: 0 auto;
}
.servers-header__filter--button.active {
  background-color: var(--color-yellow);
  color: #000;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
@media (max-width: 1250px) {
    .server-card__info{
        column-gap: clamp(0.9375rem, -25.7643rem + 38.0435vw, 3.125rem);
    }
}
@media (max-width: 1180px) {
    .server-details{
        column-gap: clamp(1.25rem, -106.5625rem + 150vw, 2.1875rem);
    }
}
@media (max-width: 1157px) {
    .support__content-text {
        text-align: center;
        font-size: clamp(0.875rem, 0.815rem + 0.256vw, 1rem);
    }
    .servers__categories{
        column-gap: 12px;
    }
    .servers__categories-item{
        font-size: clamp(0.875rem, 0.6531rem + 0.6525vw, 1.125rem);
    }
    .servers__categories-button{
        width: auto;
        padding: 10px 20px;
    }
    .support__content-title{
        font-size: clamp(1.5rem, 1.14rem + 1.535vw, 2.25rem);
    }
    .support__content-link {
        width: clamp(8.125rem, 7.3931rem + 3.3457vw, 9.8125rem);
    }
    .servers__search{
        column-gap: clamp(0.9375rem, 0.2056rem + 3.3457vw, 2.625rem);
    }
    .server-info__stats{
        gap: clamp(1.125rem, 0.6715rem + 2.0732vw, 2.1875rem);
    }
}
@media (max-width: 1163px) {
    .servers__search {
        flex-direction: column;
        align-items: flex-start;
    }
    .servers__search-title {
        max-width: 100%;
        margin-bottom: 20px; 
    }
    .servers__search > *:not(.servers__search-title) {
        margin-top: 20px;
    }
}
@media (max-width: 1131px) {
    .server-card__info{
        flex-direction: column;
        align-items: start;
        row-gap: 25px;
    }
    .server-card {
        padding-inline: clamp(0.9375rem, 0.2373rem + 3.201vw, 1.875rem);
        padding-block:  clamp(1.25rem, 0.2847rem + 3.8412vw, 1.875rem);
    }
    .server-card__headerwrapper{
        display: flex;
        align-items: center;
        column-gap: 20px;
    }  
    .server-card__rank{
        display: flex;
        width: 32px;
        height: 32px;
        font-size: 12px;
        top: -8px;
        left: -8px;
    }
    .server-card__rank--mob {
        display: none;
    }
    .rank-number{
        font-size: inherit !important;
    }
    .server-name{
        font-size: clamp(1rem, 0.888rem + 0.5122vw, 1.25rem);
    }
    .server-description,
    .server-link-text {
        font-size: clamp(0.75rem, 0.694rem + 0.2561vw, 0.875rem);
    }
    .server-placeholder {
        width: 100%;
        max-width: 100%;
    }
    .server-description {
        max-width: 100%;
        margin-top: 10px;
    }
    .server-details__wrapper {
        width: 100%;
    }
    .server-link {
        height: clamp(2.1875rem, 3.0475rem + 0.6402vw, 2.5rem);
    }
    .detail-icon {
        width: 30px;
    }
}
@media (max-width: 945px) {
    .support__image{
        display: none;
    }
    .support__content {
        margin: 0 auto;
    }
    .section-support {
        padding-top: 80px;
    }
}
@media (max-width: 540px) {
    .servers__categories{
        flex-direction: column;
        flex-wrap: wrap;
        row-gap: 12px;
        justify-content: center;
        margin-bottom: 25px;
    }
    .servers__inline-elements{
        flex-direction: column-reverse;
        row-gap: 30px;
        align-items: center;
    }
    .servers__search-title{
        text-align: center;
    }
    .servers__search-bar {
        max-width: 100%;
    }
    .server-details__wrapper {
        flex-direction: column;
        align-items: start;
        width: 100%;
        row-gap: 25px;
    }
    .server-details{
        column-gap: 20px;
    }
    .server-placeholder {
        max-width: 100%;
    }
    /* IP-кнопка на всю ширину как баннер */
    .server-link-wrapper {
        width: 100%;
    }
    .server-link{
        width: 100%;
    }
    .server-description {
        max-width: 100%;
    }
    .server-card{
        align-items: start;
    }
    .server-card__rank{
        margin-top: 0;
    }
    .detail-text{
        font-size: clamp(0.75rem, 0.2895rem + 2.1053vw, 1rem);
    }
    .server-details {
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        gap: 20px;
        width: 100%;
    }
    .detail-icon {
        width: 28px;
    }
}
@media (max-width: 768px) {
    .servers__pages {
        margin-bottom: 100px;
    }
    .pagination {
        margin-bottom: 80px;
    }
}
@media (max-width: 480px) {
    .pagination {
        margin-bottom: 50px;
    }
}
@media (max-width: 364px) {
    .server-description {
        max-width: 100%;
    }
}


/* ── Кастомный дропдаун версий ──────────────────────────── */
.version-picker {
    position: relative;
}
.version-picker__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: var(--font-base);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}
.version-picker__toggle:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.08);
}
.version-picker__toggle:focus {
    outline: none;
}
.version-picker__toggle:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 3px;
}
.version-picker__toggle[aria-expanded="true"] {
    border-color: var(--color-yellow);
    background-color: rgba(255, 210, 0, 0.08);
}
.version-picker__arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: solid var(--color-yellow);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-top: -3px;
}
.version-picker__toggle[aria-expanded="true"] .version-picker__arrow {
    transform: rotate(-135deg);
    margin-top: 3px;
}
.version-picker__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    visibility: hidden;
    background-color: var(--color-gray);
    border: 1px solid var(--color-gray-light);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top center;
    transition:
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-yellow) transparent;
}
.version-picker__dropdown::-webkit-scrollbar {
    width: 6px;
}
.version-picker__dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.version-picker__dropdown::-webkit-scrollbar-thumb {
    background: var(--color-yellow);
    border-radius: 3px;
}
.version-picker__dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.version-picker__option {
    display: block;
    width: 100%;
    padding: 8px 14px;
    text-align: left;
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    font-family: var(--font-base);
    cursor: pointer;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}
.version-picker__option:hover {
    background-color: var(--color-gray-light);
}
.version-picker__option:focus {
    background-color: var(--color-gray-light);
    outline: none;
}
.version-picker__option:focus-visible {
    background-color: var(--color-gray-light);
    outline: 2px solid var(--color-yellow);
    outline-offset: -2px;
}
.version-picker__option.is-selected,
.version-picker__option.active {
    color: var(--color-yellow);
    font-weight: 600;
}

/* ── Tag picker ─────────────────────────────────────────── */
.tag-picker {
    position: static;
}
.tag-picker__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: 580px;
    max-width: calc(100vw - 50px);
    background-color: #1f1f21;
    border: 1px solid var(--color-gray-light);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top left;
    transition:
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.25s;
    pointer-events: none;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tag-picker__dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.tag-picker__category-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-yellow);
    margin-bottom: 10px;
}
.tag-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.tag-picker__chip {
    padding: 5px 13px;
    border-radius: 20px;
    border: 1px solid #3a3a3d;
    background: transparent;
    color: #aaa;
    font-size: 14px;
    font-family: var(--font-base);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
}
.tag-picker__chip:hover {
    border-color: #666;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.tag-picker__chip:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 3px;
}
.tag-picker__chip.active {
    border-color: var(--color-yellow);
    color: var(--color-yellow);
    background: rgba(245, 209, 5, 0.08);
    border-radius: 20px;
    font-weight: normal;
}
.tag-picker__divider {
    height: 1px;
    background: #2e2e30;
}

/* ── Анимация карточек серверов ─────────────────────────── */
@keyframes serverCardIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.servers__search {
    opacity: 0;
    animation: serverCardIn 0.4s ease-out forwards;
}
#servers-list .server-card {
    opacity: 0;
    animation: serverCardIn 0.4s ease-out forwards;
}
#servers-list .server-card:nth-child(1)  { animation-delay: 0ms; }
#servers-list .server-card:nth-child(2)  { animation-delay: 40ms; }
#servers-list .server-card:nth-child(3)  { animation-delay: 80ms; }
#servers-list .server-card:nth-child(4)  { animation-delay: 120ms; }
#servers-list .server-card:nth-child(5)  { animation-delay: 160ms; }
#servers-list .server-card:nth-child(6)  { animation-delay: 200ms; }
#servers-list .server-card:nth-child(7)  { animation-delay: 240ms; }
#servers-list .server-card:nth-child(8)  { animation-delay: 280ms; }
#servers-list .server-card:nth-child(9)  { animation-delay: 320ms; }
#servers-list .server-card:nth-child(10) { animation-delay: 360ms; }

/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .servers__search,
    #servers-list .server-card {
        animation: none;
        opacity: 1;
    }
    .servers-header__filters,
    .version-picker__dropdown {
        transition: none;
    }
}

/* Empty state */
.servers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.servers-empty__icon {
    color: var(--color-yellow);
    margin-bottom: 10px;
    opacity: 0.85;
}

.servers-empty__title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: 0.02em;
}

.servers-empty__hint {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Hide socials at very wide and very narrow screens */
@media (max-width: 1163px) {
    .servers__socials {
        display: none;
    }
}

/* Show socials only while filters still keep their desktop-like single-row layout */
@media (min-width: 769px) and (max-width: 1163px) {
    .servers__socials {
        display: flex;
    }
}

/* Tablet: wrap inline-elements so search bar takes full row,
   filters + socials share the second row with a gap */
@media (max-width: 900px) {
    .servers__inline-elements {
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 20px;
        align-items: center;
        column-gap: 30px;
    }
    .servers__search-bar {
        flex: 0 0 100%;
        max-width: 100%;
    }
    fieldset.servers__filters {
        border-left: none;
        padding-left: 0;
    }
    .servers__socials {
        margin-left: 0;
        gap: 20px;
    }
}

/* Tag picker: full-width dropdown on mobile */
@media (max-width: 540px) {
    .tag-picker__dropdown {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform: translateY(-10px) scale(0.97);
        transform-origin: top center;
    }
    .tag-picker__dropdown.open {
        transform: translateY(0) scale(1);
    }
}