/*
 * Строка критериев, поиск, сортировка и сетка аккаунтов.
 * Единый стиль для главной страницы (/) и разделов каталога (/catalog?genre=...).
 *
 * Палитра сайта: тёмная основа, акцент #ffc607, разделители — прозрачный белый.
 * Поля и панели разграничены фоном, рамкой и тенью, чтобы не сливались,
 * но сохранена прозрачность и размытие как в остальных блоках сайта.
 *
 * Панель критериев приходит с сервера в двух вариантах:
 *   .swcf-options--plain — открытая панель, работает без JavaScript;
 *   .swcf-options--js    — компактная панель под переключателем (класс swcf-js).
 * Так фильтры работают даже если скрипт не загрузился или заблокирован.
 */

/* ---------- Контейнер и заголовок ---------- */
/* Палитра и прозрачность подобраны под карточки аккаунтов ниже.
   --cf-card-line — единая обводка: и у блока критериев, и у карточек. */
.swcf-catalog{--cf-accent:#ffc607;--cf-accent-dark:#17140b;--cf-line:rgba(255,255,255,.14);--cf-line-strong:rgba(255,255,255,.14);--cf-card-line:rgba(255,255,255,.2);--cf-field:rgba(20,20,26,.5);--cf-field-hover:rgba(32,32,40,.62);--cf-glass:linear-gradient(180deg,rgba(42,42,50,.82),rgba(25,25,31,.82));--cf-text:#f5f5f7;position:relative;color:var(--cf-text)}
.swcf-catalog *,.swcf-catalog *::before,.swcf-catalog *::after{box-sizing:border-box}
/* Шапка: крупный заголовок, под ним тонкая подпись — всё по центру */
.swcf-heading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:18px 0 16px;text-align:center}
.swcf-eyebrow{display:block;color:#8d8d99;font-size:11px;font-weight:300;letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.swcf-heading .page-title{margin:0;font-size:30px;line-height:1.2;text-align:center;width:auto;max-width:none;padding:0;animation:none}
.swcf-heading .page-title::before,.swcf-heading .page-title::after{display:none!important;content:none!important}
/* Строка итогов — пилюля в той же обводке, что и подпись */
.swcf-progress{display:flex;justify-content:center;margin:0 0 16px}
.swcf-results__shown{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 5px;padding:7px 15px;border:1px solid var(--cf-card-line);border-radius:30px;background:rgba(0,0,0,.28);color:#c3c3cd;font-size:13px;text-align:center;white-space:normal}
.swcf-results__part{display:inline-block;white-space:nowrap}
.swcf-results__shown strong{color:#eee;font-weight:700}
.swcf-results__dot{display:inline-block;margin:0 7px;color:#6e6e7b;font-style:normal}
.swcf-results__unit{color:#95959f}
.swcf-stock{font-size:12px;color:#c3c3cd;white-space:nowrap;padding:8px 13px;border:1px solid var(--cf-card-line);border-radius:30px;background:rgba(0,0,0,.28)}

/* Иконки у подписей критериев */
.swcf-ico{flex:0 0 auto;color:var(--cf-accent);opacity:.9}

/* ---------- Форма критериев: тот же стиль, что у карточек аккаунтов ---------- */
.swcf-form{display:flex;align-items:flex-end;gap:18px;width:100%;margin:0 0 14px;padding:18px 20px;border:1px solid var(--cf-card-line)!important;border-radius:16px!important;background:var(--cf-glass)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;box-shadow:0 8px 26px rgba(0,0,0,.22)!important;transition:border-color .25s ease,box-shadow .25s ease}
.swcf-topline{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;min-width:0}
.swcf-label{display:inline-flex;align-items:center;gap:6px;color:#b9b9c6;font-size:13px;line-height:17px;margin:0 0 8px;font-weight:400}
.swcf-options{display:flex;align-items:flex-end;gap:14px;flex:1 1 auto;min-width:0}
.swcf-options-fields{display:flex;align-items:flex-end;gap:14px;flex:1 1 auto;min-width:0}
/* Без JS — открытая панель; с JS — компактная под переключателем */
.swcf-js .swcf-options--js{display:flex;flex-direction:row;align-items:flex-end;gap:14px;flex:1 1 auto;min-width:0}
.swcf-js .swcf-options--plain{display:none}
.swcf-options--js{display:none}

/* Переключатель сервера: подпись сверху, под ней кнопки — как у остальных полей */
.swcf-servers{min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.swcf-servers>.swcf-label{margin:0 0 8px}
.swcf-server-options{display:inline-flex;gap:5px;padding:5px;border:1px solid var(--cf-line);border-radius:12px;background:rgba(20,20,26,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.swcf-server{position:relative;display:block;margin:0;cursor:pointer}
.swcf-server input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.swcf-server>span{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid transparent;border-radius:9px;font-size:14px;color:#c2c2cd;white-space:nowrap;transition:background .22s ease,color .22s ease,border-color .22s ease,transform .18s ease,box-shadow .22s ease}
.swcf-server b{font-size:12px;font-weight:400;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07);color:#dcdce4;transition:background .22s ease,color .22s ease}
.swcf-server:hover>span{color:#fff;background:rgba(255,255,255,.05)}
.swcf-server:active>span{transform:scale(.97)}
.swcf-server input:checked+span{background:var(--cf-accent);border-color:var(--cf-accent);color:var(--cf-accent-dark);font-weight:700;box-shadow:0 3px 12px rgba(255,198,7,.22),0 0 0 1px rgba(255,198,7,.18)}
.swcf-server input:checked+span b{background:rgba(0,0,0,.16);color:#2a2208}
.swcf-server input:focus-visible+span{outline:2px solid var(--cf-accent);outline-offset:2px}

/* Поля ввода и выпадающие списки */
.swcf-field{display:block;border:0;margin:0;padding:0;min-width:0;flex:1 1 0}
.swcf-field--sort{flex:1.15 1 0;min-width:172px}
.swcf-field--search{flex:1.05 1 0;min-width:158px}
.swcf-group{min-width:0}
.swcf-group>.swcf-label{margin-bottom:8px}
.swcf-group .swcf-range{min-width:0}
.swcf-catalog select,.swcf-catalog input[type=number],.swcf-catalog input[type=search]{width:100%;min-width:0;height:46px;margin:0;padding:0 12px;border:1px solid var(--cf-line-strong);border-radius:10px;background-color:var(--cf-field);color:var(--cf-text);font:inherit;font-size:14px;-webkit-appearance:none;appearance:none;color-scheme:dark;transition:border-color .15s,background-color .15s,box-shadow .15s}
.swcf-catalog input[type=number],.swcf-catalog input[type=search]{padding-top:0;padding-bottom:0}
.swcf-catalog input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.swcf-catalog select{cursor:pointer;padding-right:32px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffc607' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:12px 8px}
.swcf-catalog select option{background:#26262e;color:#f5f5f7}
.swcf-catalog input::placeholder{color:#82828f}
.swcf-catalog input[type=number]:hover,.swcf-catalog input[type=search]:hover{background-color:var(--cf-field-hover)}
.swcf-catalog select:focus,.swcf-catalog input:focus{outline:none;border-color:rgba(255,198,7,.55);box-shadow:0 0 0 3px rgba(255,198,7,.12)}
.swcf-catalog input[type=number]{-moz-appearance:textfield}
.swcf-catalog input[type=number]::-webkit-outer-spin-button,.swcf-catalog input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.swcf-range{display:flex;align-items:center;gap:8px}
.swcf-range>span{color:#6e6e7b;font-size:13px;flex:0 0 auto}
.swcf-search{position:relative;display:block}
.swcf-search svg{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:#82828f;pointer-events:none}
.swcf-search input{padding-right:34px}

/* Кнопки */
.swcf-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.swcf-catalog .swcf-apply{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:0;border-radius:10px;background:var(--cf-accent);color:var(--cf-accent-dark);font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;text-decoration:none;box-shadow:0 4px 14px rgba(255,198,7,.18);transition:background .15s,transform .15s}
.swcf-catalog .swcf-apply:hover{background:#ffd647;color:#191509}
.swcf-catalog .swcf-apply:active{transform:translateY(1px)}
.swcf-reset{font-size:13px;color:#adadba;text-decoration:none;padding:12px 2px;white-space:nowrap}
.swcf-reset:hover{color:#fff;text-decoration:underline}

/* ---------- Итоги ---------- */
.swcf-empty{margin:0 0 16px;padding:38px 16px;text-align:center;color:#a3a3af;font-size:14px;border:1px dashed var(--cf-line);border-radius:14px;background:rgba(0,0,0,.25)}
.swcf-empty[hidden]{display:none}

/* ---------- Сетка аккаунтов ---------- */
.cases__list-wrap{position:relative;width:100%}
.swcf-catalog #alllists{min-height:10px}


/* ---------- Монстры под скрином (разделы LD и Мульти LD) ----------
   Иконки подтягиваются по имени из справочника data/player-sale-monsters.json.
   Оформление как в разделе «Биржа акков»: портреты в ряд и подпись с именами. */
.swcf-catalog .swcf-monsters{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px auto 0;padding:0 10px;width:100%;max-width:340px}
.swcf-catalog .swcf-monsters__portraits{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
.swcf-catalog .swcf-monsters__portraits img{width:40px;height:40px;border-radius:9px;object-fit:cover;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.16);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.swcf-catalog .swcf-monsters__more{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 6px;border-radius:9px;background:rgba(255,198,7,.14);border:1px solid rgba(255,198,7,.4);color:var(--cf-accent);font-size:12px;font-weight:700}
.swcf-catalog .swcf-monsters__names{margin:0;color:#a9a9b6;font-size:11.5px;line-height:1.35;text-align:center;overflow-wrap:break-word}

/* ---------- Низ карточки: как в разделе «Биржа акков» ----------
   Строка «Гарантия SW Shops» + цена справа и кнопка во всю ширину.
   Даты, просмотров и старого дизайна цены здесь нет. */
.swcf-catalog .cases__item .cases__summary{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:14px 14px 12px!important;border-top:1px solid var(--cf-card-line)!important;border-bottom:1px solid var(--cf-card-line)!important;margin:10px 0 12px!important;width:100%!important}
/* Обе строки блока (гарантия и наличие/проверка) — один шрифт, цвет и размер,
   иконки одинакового размера */
.swcf-catalog .cases__item .cases__support{flex:0 1 auto;font-size:12px;line-height:1.6;color:#95959f}
.swcf-catalog .cases__item .cases__support i{color:var(--cf-accent);margin-right:5px}
.swcf-catalog .cases__item .cases__support b{font-size:12px!important;font-weight:400!important;color:#95959f!important;line-height:1.6!important;display:inline}
.swcf-catalog .cases__item .cases__support b i{font-size:inherit!important;color:var(--cf-accent)!important;margin-right:5px!important}
.swcf-catalog .cases__item .cases__summary .cases__price{margin:0 0 0 auto!important;text-align:right;white-space:nowrap;color:#33260a!important;font-weight:800!important;font-size:clamp(18px,1.7vw,23px)!important;line-height:1.3;min-width:0!important;max-width:100%!important;background:linear-gradient(180deg,#ffd95e,#ffc607 55%,#efa900)!important;border:1px solid rgba(255,236,150,.85)!important;border-radius:12px!important;padding:6px 14px!important;display:inline-flex!important;align-items:baseline;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 6px rgba(146,88,0,.4),0 4px 12px rgba(0,0,0,.3)!important;text-shadow:0 1px 0 rgba(255,255,255,.45),0 2px 3px rgba(255,255,255,.25),0 -1px 0 rgba(120,70,0,.35)!important}
.swcf-catalog .cases__item .cases__summary .cases__price span{font-size:inherit}
/* Кнопка: 3D, мягкий оранжевый, с внутренними тенями */
.swcf-catalog .cases__item .cases__buy{
  display:flex!important;align-items:center;justify-content:center;
  margin:0 auto 12px!important;min-height:34px;
  border:1px solid var(--cf-card-line)!important;border-radius:10px!important;
  background:linear-gradient(180deg,rgba(38,38,45,.85),rgba(28,28,34,.9))!important;
  color:#f0f0f4!important;font:600 12.5px/1.35 Arial,sans-serif!important;letter-spacing:.2px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.25)!important;
  transition:filter .2s ease,transform .16s ease!important
}
.swcf-catalog .cases__item .cases__buy:hover{filter:brightness(1.18)}
.swcf-catalog .cases__item .cases__buy:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)!important}

/* ---------- Карточка: скрин сверху во всю ширину, название под ним ---------- */
.swcf-catalog .cases__item .cases__link{display:block!important;padding:0!important}
.swcf-catalog .cases__item .cases__image-wrapper{
  position:relative!important;display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;justify-content:center!important;
  margin:0!important;padding:0!important;width:100%!important;
  min-height:0!important;max-height:none!important;height:auto!important;
  border-radius:12px 12px 0 0!important;overflow:hidden!important;
  background:rgba(0,0,0,.25)!important
}
/* Скрин всегда прижат к самому верху карточки и одинаков по пропорциям,
   поэтому ни одна картинка не «опускается» */
.swcf-catalog .cases__item .cases__image{
  display:block!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;
  max-width:100%!important;max-height:none!important;margin:0!important;padding:0!important;
  border-radius:0!important;object-fit:contain!important;object-position:center center!important
}
/* Название — под скрином, с ровными отступами */
.swcf-catalog .cases__item .cases__name{
  display:block!important;width:auto!important;
  background:none!important;background-image:none!important;height:auto!important;
  margin:12px 14px 0!important;padding:0!important;
  font-size:14px!important;line-height:1.4!important;font-weight:700!important;
  text-align:center;overflow-wrap:break-word
}
/* Убираем жёлтую полоску-разделитель с черепами под названием */
.swcf-catalog .cases__item .cases__name::before,
.swcf-catalog .cases__item .cases__name::after,
.swcf-catalog .cases__item .cases__name_2::before,
.swcf-catalog .cases__item .cases__name_2::after{
  content:none!important;display:none!important;background:none!important;
  width:0!important;height:0!important;margin:0!important;padding:0!important
}
/* Скидка — аккуратная плашка, прижата к левому верхнему углу скрина.
   Раньше она была в потоке (position:static) и растягивалась в жёлтую полосу
   во всю ширину карточки — это и была «жёлтая подложка» в разделе TOP. */
.swcf-catalog .cases__item .cases__percent{
  position:absolute!important;top:10px!important;left:10px!important;right:auto!important;bottom:auto!important;
  z-index:4!important;display:inline-block!important;width:max-content!important;max-width:calc(100% - 20px)!important;
  margin:0!important;padding:5px 11px!important;border-radius:10px!important;
  background:var(--cf-accent)!important;color:var(--cf-accent-dark)!important;
  font-size:11px!important;font-weight:700!important;line-height:1.3!important;white-space:nowrap!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px rgba(0,0,0,.35)!important
}
.swcf-catalog .cases__item .cases__percent .cases__curr{font-size:11px!important;color:var(--cf-accent-dark)!important}
.swcf-catalog .cases__item .swcf-monsters{margin-top:12px}
/* Разделитель между названием и монстрами — только на карточках с монстрами */
.swcf-catalog .cases__item .cases__name:has(+ .swcf-monsters),.swcf-catalog .cases__item .cases__name:has(+ .cases__percent + .swcf-monsters){border-bottom:1px solid var(--cf-card-line)!important;padding-bottom:12px!important;margin-bottom:0!important}


/* ---------- Убираем старую косую подложку цены (тема, .cases__price:before) ---------- */
.swcf-catalog .cases__item .cases__price::before,
.swcf-catalog .cases__item .cases__price::after{
  content:none!important;display:none!important;border:0!important;background:none!important;
  box-shadow:none!important;transform:none!important;width:0!important;height:0!important
}

/* ---------- Показать ещё ---------- */
.swcf-pagination{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px 0 8px;width:100%}
.swcf-pagination:empty{display:none}
.swcf-more{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 28px;border:1px solid var(--cf-line-strong);border-radius:11px;background:rgba(38,38,46,.85);color:#fff;font-size:14px;text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s}
.swcf-more:hover{border-color:var(--cf-accent);background:rgba(52,52,62,.9);color:#fff}
.swcf-more[aria-disabled=true]{opacity:.55;pointer-events:none}
.swcf-load-status{color:#c8c8d2;font-size:13px;text-align:center;min-height:0}
.swcf-load-status:empty{display:none}
.swcf-fallback{display:inline-block;padding:10px 16px;border:1px solid rgba(255,198,7,.45);border-radius:10px;background:rgba(255,198,7,.1);color:var(--cf-accent);font-size:14px;text-decoration:none}
.swcf-fallback:hover{background:rgba(255,198,7,.18);color:#ffd647}
.swcf-catalog :is(button,a,select,input):focus-visible{outline:2px solid var(--cf-accent);outline-offset:2px}

/* Раскрывающийся блок «Поиск и сортировка».
   Нативный <details>/<summary>: раскрывается самим браузером, без JS.
   На больших экранах блок всегда открыт (скрипт выставляет атрибут open),
   на мобильных — свёрнут по умолчанию и открывается нажатием. */
.swcf-more-panel{display:block;min-width:0}
.swcf-more-panel>summary{list-style:none;cursor:pointer}
.swcf-more-panel>summary::-webkit-details-marker{display:none}
.swcf-toggle{display:none;width:100%;align-items:center;gap:10px;padding:13px 0 11px;border:0;background:none;color:#fff;font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer}
.swcf-toggle__icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--cf-accent);opacity:.95}
.swcf-toggle__icon svg{display:block}
.swcf-toggle__label{display:block;flex:0 1 auto;min-width:0;text-align:left;overflow-wrap:break-word}
.swcf-toggle b,.swcf-badge{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--cf-accent);border:1px solid rgba(255,198,7,.35);border-radius:6px;padding:2px 6px}
.swcf-chevron{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;margin-left:auto;border:1px solid var(--cf-line);border-radius:9px;background:rgba(255,255,255,.06);color:var(--cf-accent);transition:transform .18s,background .18s}
.swcf-chevron svg{display:block}
.swcf-toggle:hover .swcf-chevron{background:rgba(255,198,7,.14)}
.swcf-more-panel[open]>.swcf-toggle .swcf-chevron{transform:rotate(180deg)}
/* Скрытая часть панели: поиск, сортировка, цена, LD, кнопки */
.swcf-more-options{display:block}

@media (min-width:1501px){
 /* Большие экраны: панель критериев в одну строку с переключателем сервера */
 .swcf-js .swcf-options--js{flex-direction:row;align-items:flex-end;gap:16px}
 .swcf-options-fields{flex:1 1 auto}
 .swcf-toggle{display:none!important}
 .swcf-more-options{display:flex;align-items:flex-end;gap:14px;flex:1 1 auto;min-width:0}
 /* На больших экранах блок всегда раскрыт, даже если атрибут open не выставлен */
 .swcf-js .swcf-more-panel:not([open])>.swcf-more-options{display:flex}
 .swcf-js .swcf-more-panel{flex:1 1 auto;min-width:0}
}

/* ---------- Планшет: панель критериев переходит на вторую строку ---------- */
@media (min-width:1101px) and (max-width:1500px){
 .swcf-form{display:block;padding:15px 17px}
 .swcf-toggle{display:none!important}
 .swcf-options,.swcf-js .swcf-options--js{display:block;margin-top:14px;padding-top:0;border-top:0;flex:none}
 .swcf-options--plain{margin-top:0;padding-top:14px;border-top:1px solid var(--cf-line)}
 .swcf-options-fields{display:block}
 .swcf-more-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 15px;align-items:end;margin-top:13px}
 /* На планшетах блок тоже всегда раскрыт */
 .swcf-js .swcf-more-panel:not([open])>.swcf-more-options{display:grid}
 .swcf-field,.swcf-field--sort,.swcf-field--search{min-width:0;width:100%;flex:none}
 .swcf-actions{flex-direction:row;justify-content:flex-start;gap:14px}
 .swcf-catalog .swcf-apply{min-width:150px}
 .swcf-server{flex:0 0 auto}
 .swcf-server>span{padding:0 12px}
}

@media (min-width:1101px) and (max-width:1300px){
 .swcf-server>span{padding:0 9px;font-size:13px;gap:5px}
 .swcf-server b{font-size:11px;padding:2px 5px}
}

/* ---------- Мобильные: сервер всегда виден, остальное под стрелкой ---------- */
@media (max-width:1100px){
 .swcf-heading{gap:8px;margin:14px 0 14px}
 .swcf-progress{margin:0 0 14px}
 .swcf-heading .page-title{font-size:23px}
 .swcf-eyebrow{font-size:10px;letter-spacing:1.4px}
 /* Строка итогов: две строки по центру, разделитель «·» скрыт.
    Только мобильная версия — на ПК вид не меняется. */
 .swcf-progress{width:100%}
 .swcf-progress .swcf-results__shown{display:block;width:100%;max-width:100%;padding:9px 14px;text-align:center}
 .swcf-progress .swcf-results__part{display:block!important;width:100%!important;max-width:100%;margin:0!important;padding:0!important;text-align:center;white-space:nowrap}
 .swcf-progress .swcf-results__part.swcf-results__line2{margin-top:2px!important}
 .swcf-results__dot{display:none!important}
 /* Верхний счётчик на мобильных не показываем — он есть в строке ниже */
 .swcf-stock{display:none}
 /* Итог в одну строку: «24 из 323 аккаунтов · В продаже: 403» */
 .swcf-form{display:block;padding:13px;border-radius:16px;background:var(--cf-glass)}
 .swcf-options{display:block;flex:none}
 .swcf-js .swcf-options--js{display:block;margin-top:0}
 .swcf-options-fields{display:block}
 /* Строка «Фильтры и сортировка»: иконка настроек + текст, справа стрелка */
 .swcf-js .swcf-toggle{display:flex;gap:9px;padding:15px 0 13px;font-size:16px;font-weight:700;line-height:1.25}
 .swcf-toggle__label{padding-right:0;text-align:left}
 .swcf-chevron{width:32px;height:32px}
 /* Переключатель сервера: три равные кнопки, текст не обрезается */
 .swcf-server-options{display:flex;width:100%;gap:4px;padding:4px}
 .swcf-server{flex:1 1 0;min-width:0}
 .swcf-server>span{flex-direction:column;gap:3px;min-height:56px;padding:7px 4px;font-size:15px;font-weight:600;letter-spacing:.2px;line-height:1.2;text-align:center;white-space:normal;justify-content:center}
 .swcf-server__name{display:block;text-shadow:0 1px 2px rgba(0,0,0,.35)}
 .swcf-server b{font-size:12px;font-weight:700;padding:1px 7px;line-height:1.5;letter-spacing:0}
 /* Раскрытые параметры: поля друг под другом */
 .swcf-more-options{display:grid;grid-template-columns:1fr;gap:13px;padding-top:2px}
 .swcf-field,.swcf-field--sort,.swcf-field--search{min-width:0;width:100%;flex:none}
 .swcf-catalog select,.swcf-catalog input[type=number],.swcf-catalog input[type=search]{height:48px;font-size:16px}
 /* Сбросить — слева, Показать — справа */
 .swcf-actions{display:grid;grid-template-columns:auto minmax(0,1.4fr);align-items:center;gap:12px;grid-column:1/-1;margin-top:2px}
 .swcf-catalog .swcf-apply{width:100%;min-height:50px;font-size:16px}
 .swcf-reset{padding:12px 8px;font-size:14px;text-align:left;white-space:nowrap}
 .swcf-more{width:100%;max-width:340px}
 .swcf-empty{padding:28px 14px}
}

@media (max-width:560px){
 .swcf-heading .page-title{font-size:21px}
 .swcf-server>span{font-size:14px;padding:6px 3px;min-height:54px}
 .swcf-server b{font-size:11px;padding:1px 6px}
 .swcf-toggle{font-size:15px}
}

/* ---------- Устойчивость к теме сайта ---------- */
.swcf-catalog .swcf-apply,.swcf-catalog .swcf-toggle,.swcf-catalog .swcf-more,.swcf-catalog .swcf-server>span{pointer-events:auto}
.swcf-catalog .container{padding-bottom:6px}

/* На широких экранах (без JS) поле поиска не растягивается на всю строку,
   а фон полей совпадает с фоном блока выбора сервера. */
@media (min-width:1101px){
 .swcf-options--plain .swcf-field--search{flex:0 1 260px}
 .swcf-catalog{--cf-field:rgba(20,20,26,.5);--cf-field-hover:rgba(32,32,40,.62)}
 .swcf-catalog select option{background:#20202a;color:#f5f5f7}
}

/* ---------- Плавные эффекты и анимации ---------- */
/* Поля: мягкая подсветка при наведении и фокусе */
.swcf-catalog select,.swcf-catalog input[type=number],.swcf-catalog input[type=search]{transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease,transform .18s ease}
.swcf-catalog select:hover,.swcf-catalog input[type=number]:hover,.swcf-catalog input[type=search]:hover{border-color:var(--cf-line-strong)}
.swcf-catalog select:focus,.swcf-catalog input:focus{transform:translateY(-1px)}

/* Появление содержимого при раскрытии дополнительных параметров */
@keyframes swcf-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes swcf-item-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.swcf-more-panel[open]>.swcf-more-options{animation:swcf-reveal .32s cubic-bezier(.22,.61,.36,1) both}
.swcf-more-panel[open]>.swcf-more-options>.swcf-field,
.swcf-more-panel[open]>.swcf-more-options>.swcf-group,
.swcf-more-panel[open]>.swcf-more-options>.swcf-actions{animation:swcf-item-in .34s cubic-bezier(.22,.61,.36,1) both}
.swcf-more-panel[open]>.swcf-more-options>*:nth-child(2){animation-delay:.04s}
.swcf-more-panel[open]>.swcf-more-options>*:nth-child(3){animation-delay:.08s}
.swcf-more-panel[open]>.swcf-more-options>*:nth-child(4){animation-delay:.12s}
.swcf-more-panel[open]>.swcf-more-options>*:nth-child(5){animation-delay:.16s}

/* Стрелка и счётчик */
.swcf-chevron{transition:transform .3s cubic-bezier(.22,.61,.36,1),background .22s ease,box-shadow .22s ease}
.swcf-toggle:active .swcf-chevron{transform:scale(.92)}
.swcf-more-panel[open]>.swcf-toggle .swcf-chevron{box-shadow:0 0 0 3px rgba(255,198,7,.1)}
.swcf-toggle__label{transition:color .22s ease}

/* Кнопка «Показать» и «Сбросить» */
.swcf-catalog .swcf-apply{transition:background .22s ease,transform .16s ease,box-shadow .22s ease}
.swcf-catalog .swcf-apply:hover{box-shadow:0 6px 18px rgba(255,198,7,.26)}
.swcf-catalog .swcf-apply:active{transform:translateY(1px) scale(.99)}
.swcf-reset{transition:color .22s ease,transform .18s ease;display:inline-block}
.swcf-reset:active{transform:scale(.97)}

/* «Показать ещё» и догруженные карточки */
.swcf-more{transition:border-color .22s ease,background .22s ease,transform .16s ease,box-shadow .22s ease}
.swcf-more:hover{box-shadow:0 6px 18px rgba(0,0,0,.28)}
.swcf-catalog #alllists>li{animation:swcf-item-in .26s cubic-bezier(.22,.61,.36,1) both}
.swcf-catalog #alllists>li:nth-child(6n+2){animation-delay:.02s}
.swcf-catalog #alllists>li:nth-child(6n+3){animation-delay:.04s}
.swcf-catalog #alllists>li:nth-child(6n+4){animation-delay:.06s}
.swcf-catalog #alllists>li:nth-child(6n+5){animation-delay:.08s}
.swcf-catalog #alllists>li:nth-child(6n){animation-delay:.1s}

/* ---------- Сетка аккаунтов: карточки фиксированного размера ----------
   В теме у .cases__item стоит flex-grow:1, поэтому в последнем ряду, где
   карточек меньше четырёх, они растягивались на всю ширину. Запрещаем рост:
   карточка всегда того же размера, ряд выравнивается по левому краю. */
.swcf-catalog #alllists{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:stretch!important;width:100%!important;gap:15px 10px!important;margin:0!important}
.swcf-catalog #alllists>li.cases__item,
.swcf-catalog #alllists>li.cases__item:hover{
  flex:0 0 auto!important;
  min-width:0!important;
  margin:0!important;
}

/* Строка результата и подпись количества — мягкое появление при обновлении */
.swcf-stock{transition:border-color .25s ease,background .25s ease}

/* Пользователям, отключившим анимации, показываем всё без движения */
@media (prefers-reduced-motion:reduce){
 .swcf-catalog *,.swcf-catalog *::before,.swcf-catalog *::after{animation:none!important;transition:none!important}
 .swcf-catalog select:focus,.swcf-catalog input:focus{transform:none!important}
}

/* ---------- Мобильная версия: та же палитра, что и на ПК ----------
   Тема сайта на мобильных подменяет вид карточек своим градиентом и обводкой
   (mobile-premium.css). Возвращаем цвета ПК: панель критериев и карточки
   получают один и тот же фон (как у .cases__item на ПК), обводку и радиус. */
@media (max-width:1100px){
 /* Панель и карточки — один фон и одна плотность, чтобы читалось на тёмном
    фоне страницы (#111116) */
 .swcf-catalog{--cf-glass:rgba(30,30,30,.5);--cf-field:rgba(22,22,27,.4);--cf-field-hover:rgba(34,34,42,.55);--cf-card-line:rgba(255,255,255,.2)}
 .swcf-form{background:var(--cf-glass)}
 /* Поля: цвета как на ПК */
 .swcf-catalog select,.swcf-catalog input[type=number],.swcf-catalog input[type=search]{background-color:var(--cf-field)}
 .swcf-catalog select option{background:#20202a;color:#f5f5f7}
 .swcf-catalog select:hover,.swcf-catalog input[type=number]:hover,.swcf-catalog input[type=search]:hover{background-color:var(--cf-field-hover)}
 .swcf-server-options{background:rgba(20,20,26,.5)}
 /* Карточки аккаунтов: ровно тот же фон, обводка, радиус и размытие,
    что у панели критериев. Селектор с body и ID перебивает сразу три
    источника темы: mobile-premium.css (градиент, радиус 17px),
    requested-fixes.css (body .cases__item → rgba(22,22,28,.70)) и app.css. */
 body .swcf-catalog .swcf-form,
 body .swcf-catalog #alllists>li.cases__item,
 body .swcf-catalog #alllists>li.cases__item:hover{
   background:var(--cf-glass)!important;
   border:1px solid var(--cf-card-line)!important;
   border-radius:16px!important;
   box-shadow:0 8px 26px rgba(0,0,0,.22)!important;
   backdrop-filter:blur(6px)!important;
   -webkit-backdrop-filter:blur(6px)!important;
 }
 body .swcf-catalog #alllists>li.cases__item:active{background:rgba(42,42,50,.62)!important}
 body .swcf-catalog #alllists>li>.cases__link,
 body .swcf-catalog #alllists>li>.cases__link:hover,
 body .swcf-catalog #alllists>li>.cases__link:active{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
 body .swcf-catalog .swcf-more{background:var(--cf-glass);border-color:var(--cf-card-line)}
 body .swcf-catalog .swcf-empty{background:var(--cf-glass);border-color:var(--cf-card-line)}
}
/* ---------- Размер карточек по колонкам ----------
   Правила намеренно в конце файла: порядок в CSS решает, какой размер
   применится, поэтому ПК (4 колонки) и мобильная (2 колонки) не конфликтуют. */
@media (min-width:1101px){
 .swcf-catalog #alllists>li.cases__item,
 .swcf-catalog #alllists>li.cases__item:hover{width:calc(25% - 7.5px)!important;max-width:calc(25% - 7.5px)!important}
}
@media (max-width:1100px){
 .swcf-catalog #alllists{gap:12px 9px!important}
 .swcf-catalog #alllists>li.cases__item,
 .swcf-catalog #alllists>li.cases__item:hover{width:calc(50% - 4.5px)!important;max-width:calc(50% - 4.5px)!important}
}
@media (max-width:560px){
 .swcf-catalog #alllists>li.cases__item,
 .swcf-catalog #alllists>li.cases__item:hover{width:100%!important;max-width:100%!important}
}
/* ---------- Кнопка «Посмотреть аккаунт»: компактнее на ПК ---------- */
@media (min-width:1101px){
 .swcf-catalog .cases__item .cases__buy{max-width:168px!important;min-height:34px!important;font-size:12px!important;border-radius:10px!important}
}
@media (max-width:1100px){
 .swcf-catalog .cases__item .cases__buy{max-width:210px!important;width:calc(100% - 28px)!important;min-height:34px!important;margin:0 auto 12px!important}
}
/* ---------- Мобильная: без «сжатия» карточки при касании ----------
   Тема уменьшала карточку на :active (app.css scale(.98), mobile-premium scale(.985)),
   из-за этого содержимое сжималось внутри фона. Отключаем. */
@media (max-width:1100px){
 /* Полностью запрещаем «сжатие» карточки при касании: тема уменьшала карточку
    и ссылку (app.css scale(.98), mobile-premium scale(.985), requested-fixes),
    поэтому содержимое отрывалось от краёв фона. */
 body .swcf-catalog #alllists>li.cases__item,
 body .swcf-catalog #alllists>li.cases__item:hover,
 body .swcf-catalog #alllists>li.cases__item:active,
 body .swcf-catalog #alllists>li.cases__item>a.cases__link,
 body .swcf-catalog #alllists>li>.cases__link:hover,
 body .swcf-catalog #alllists>li>.cases__link:active{
   transform:none!important;scale:none!important;
   transition:none!important;
   -webkit-tap-highlight-color:transparent!important
 }
 .swcf-catalog .cases__item .cases__buy:active{transform:none!important}
 /* Тема на :active меняла радиус 12px -> 18px, из-за этого углы «уезжали» */
 body .swcf-catalog #alllists>li.cases__item,
 body .swcf-catalog #alllists>li.cases__item:hover,
 body .swcf-catalog #alllists>li.cases__item:active{border-radius:16px!important}
 .swcf-catalog .cases__item .swcf-gal__dot:active{transform:none!important}
}
/* ---------- Мобильная: скрин без обрезки по бокам, бейдж внутри карточки ----------
   На телефоне карточка узкая, поэтому жёсткие пропорции 16/10 обрезали картинку
   по бокам (казалось, что она «уехала влево»). Показываем изображение целиком. */
@media (max-width:1100px){
 .swcf-catalog #alllists>li.cases__item{overflow:hidden!important}
 .swcf-catalog .cases__item .cases__image-wrapper{overflow:hidden!important;width:100%!important;max-width:100%!important}
 .swcf-catalog .cases__item .cases__image{
   width:100%!important;height:auto!important;aspect-ratio:auto!important;
   max-width:100%!important;max-height:260px!important;
   object-fit:contain!important;object-position:center center!important;margin:0 auto!important
 }
}
/* ---------- Бейджи в углах скрина: не выходят за границы карточки ---------- */
.swcf-catalog .cases__item .cases__percent{max-width:calc(100% - 20px)!important;min-width:0!important;white-space:normal!important;overflow-wrap:break-word}
@media (max-width:1100px){
  .swcf-catalog .cases__item .cases__percent{font-size:10px!important;padding:4px 8px!important;max-width:calc(50% - 8px)!important;line-height:1.25!important}
}
/* ---------- Карусель скриншотов на карточке ----------
   Карусель сейчас отключена (у карточки один скрин), но блок оставлен:
   если её включат снова, точки и оформление уже готовы. */
/* Раньше на скрине был курсор-«захват» (карусель отключена, а курсор остался):
   он сбивал с толку — казалось, картинку можно тащить, и непонятно, что по ней
   можно кликнуть. Возвращаем обычный указатель «рука»: карточка целиком —
   одна ссылка, клик по скрину открывает страницу аккаунта. */
.swcf-catalog .cases__item,
.swcf-catalog .cases__item .cases__link,
.swcf-catalog .cases__item .cases__image-wrapper[data-swcf-gallery],
.swcf-catalog .cases__item .cases__image-wrapper,
.swcf-catalog .cases__item .cases__image,
.swcf-catalog .cases__item .swcf-shot-back{
  cursor:pointer!important
}
.swcf-catalog .cases__item .cases__image-wrapper[data-swcf-gallery]:active{
  cursor:pointer!important
}
/* Картинка в браузере по умолчанию «перетаскиваемая»: если при нажатии мышь
   хоть чуть сдвинется, начинается перетаскивание картинки и click не
   срабатывает — переход открывался бы только со второго раза. */
.swcf-catalog .cases__item img{
  -webkit-user-drag:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-touch-callout:none
}
/* Карусель сейчас отключена (точки не показываем) — карточка показывает один скрин.
   Важно: правило накрывает и .swcf-gal__dots: у него своя строка display:flex
   и по точности она перебивала display:none у родителя. Из-за этого скрипт
   карусели считал точки видимыми и включался на всех 24 карточках, вешая
   перехватчик клика на ссылку карточки. */
.swcf-catalog .swcf-gal,
.swcf-catalog .swcf-gal__dots{display:none}
.swcf-catalog .swcf-gal__dot{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.42);box-shadow:0 1px 3px rgba(0,0,0,.45);cursor:pointer;transition:background .2s ease,transform .2s ease,width .2s ease}
.swcf-catalog .swcf-gal__dot:hover{background:rgba(255,255,255,.75)}
.swcf-catalog .swcf-gal__dot.is-active{width:18px;border-radius:5px;background:var(--cf-accent)}
/* Если карусель когда-нибудь включат снова — на телефоне и планшете её нет */
@media (max-width:1100px){
 .swcf-catalog .swcf-gal,
 .swcf-catalog .swcf-gal__dots{display:none!important}
}
/* ---------- ПК: ровные скрины и одинаковая высота карточек ----------
   У аккаунтов исходные картинки разной формы (примерно от 175% до 250% по
   ширине), поэтому в ряду карточки выглядели «рвано». Решение:
   1) Скрин живёт в рамке с одинаковой высотой: сам скрин вписывается целиком
      (ничего не обрезается), а поля по бокам мягко заполняет его же
      размытая копия — рамка не выглядит пустой и не «сливается» с фоном.
   2) Название занимает ровно две строки: длинное (например «S23 | Европа |
      33 перв | Элеонора и Китиан Дашенг | ...») аккуратно обрезается по
      ширине, короткое — не поджимает карточку. Строка ряда остаётся ровной.
   3) Цена/гарантия всегда прижаты к низу, поэтому кнопки во всех карточках
      стоят на одной линии. */
@media (min-width:1101px){
 .swcf-catalog #alllists>li.cases__item,
 .swcf-catalog #alllists>li.cases__item:hover{display:flex!important;flex-direction:column!important}
 .swcf-catalog #alllists>li.cases__item>.cases__link{
   display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important
 }
 .swcf-catalog .cases__item .cases__image-wrapper{
   display:flex!important;align-items:center!important;justify-content:center!important;
   height:190px!important;min-height:190px!important;max-height:190px!important;
   flex:0 0 auto!important;margin:0!important;overflow:hidden!important;
   background-color:rgba(0,0,0,.28)!important;
   background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important
 }
 .swcf-catalog .cases__item .cases__image{
   width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
   aspect-ratio:auto!important;object-fit:contain!important;object-position:center center!important;
   margin:0!important;padding:0!important;border-radius:0!important
 }
 /* Ровно две строки под название: и одна строка, и четыре занимают одно место */
 .swcf-catalog .cases__item .cases__name{
   display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;
   overflow:hidden!important;text-overflow:ellipsis;
   min-height:2.8em!important;max-height:2.8em!important;
   margin:12px 14px 0!important;padding:0!important
 }
 /* Карточки с монстрами: название остаётся двумя строками с разделителем,
    просто без лишнего зазора сверху */
 .swcf-catalog .cases__item .cases__name:has(+ .swcf-monsters),
 .swcf-catalog .cases__item .cases__name:has(+ .cases__percent + .swcf-monsters){
   margin-bottom:0!important;padding-bottom:12px!important
 }
 .swcf-catalog .cases__item .swcf-monsters{margin-top:12px}
 /* У карточек с монстрами суммарные отступы давали лишние 12px — вычитаем их,
    чтобы все карточки были ровно одной высоты */
 .swcf-catalog #alllists>li.cases__item>.swcf-monsters{margin-bottom:0!important}
 .swcf-catalog #alllists>li.cases__item>.swcf-monsters+.cases__summary{margin-top:0!important}
 /* Низ карточки всегда внизу — кнопки в ряду на одной линии */
 .swcf-catalog .cases__item .cases__summary{margin:auto 0 12px!important}
 .swcf-catalog .cases__item .cases__buy{margin-top:0!important}
}
/* ---------- ПК: чем заполнить поля вокруг скрина ----------
   Картинки у аккаунтов разной ширины, поэтому в рамке по бокам остаются поля.
   Их закрывает сильно размытая и притемнённая копия того же скрина: рамка
   выглядит цельной, карточка не «сливается» с фоном, а сам скрин виден целиком.
   На телефоне рамки нет — подложка скрыта. */
.swcf-catalog .cases__item .swcf-shot-back{display:none!important}
@media (min-width:1101px){
 .swcf-catalog .cases__item .cases__image-wrapper{position:relative!important;display:block!important;flex-wrap:nowrap!important}
 .swcf-catalog .cases__item .cases__image-wrapper::after{
   content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:2!important;
   pointer-events:none!important;background:rgba(12,12,16,.5)!important
 }
 .swcf-catalog .cases__item .swcf-shot-back{
   display:block!important;position:absolute!important;top:-6%!important;left:-6%!important;
   width:112%!important;height:112%!important;max-width:none!important;max-height:none!important;
   margin:0!important;padding:0!important;object-fit:cover!important;object-position:center center!important;
   border-radius:0!important;z-index:1!important;
   /* подложка декоративная — клики должны проходить сквозь неё по ссылке */
   pointer-events:none!important;
   filter:blur(18px) saturate(.85) brightness(.62)!important
 }
 .swcf-catalog .cases__item .cases__image{
   position:relative!important;z-index:3!important;display:block!important;
   margin:0 auto!important;padding:0!important;
   filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))
 }
}