/* SoraKai | Catalog v2. All selectors are scoped; homepage design is untouched. */
.catalog-v2 {
  --cat-surface: #101624;
  --cat-surface2: #141b2d;
  --cat-stroke: #27324b;
  --cat-muted: #8b9abb;
  --cat-accent: #9b63ff;
  --cat-text: #f6f5ff;
  padding-top: 26px;
  padding-bottom: 74px;
  min-height: 80vh;
}
.catalog-v2 [hidden] { display: none !important; }
.catalog-v2-breadcrumbs { display: flex; gap: 10px; align-items: center; font-size: 12px; color: #8492b2; margin-bottom: 19px; }
.catalog-v2-breadcrumbs a:hover { color: #bf9cff; }
.catalog-v2-breadcrumbs span:last-child { color: #cfcef1; }

.catalog-v2-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 39px;
  min-height: 190px;
  border-radius: 18px;
  border: 1px solid #3c2865;
  background:
    radial-gradient(ellipse at 78% 42%, rgba(104, 42, 212, .38), transparent 40%),
    radial-gradient(ellipse at 12% 96%, rgba(53, 33, 110, .42), transparent 50%),
    linear-gradient(108deg, #131526 0%, #1b1531 52%, #11182e 100%);
  box-shadow: 0 12px 45px #04050a54, inset 0 1px 0 #ffffff0c;
}
.catalog-v2-banner:after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, #5020a0, #a36aff, #733ddb, transparent); opacity: .8; }
.catalog-v2-intro { position: relative; z-index: 1; max-width: 810px; }
.catalog-v2-eyebrow { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .13em; color: #bba2ec; font-weight: 800; font-size: 10px; margin-bottom: 12px; }
.catalog-v2-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #ae75ff; box-shadow: 0 0 12px #995aff; }
.catalog-v2-banner h1 { margin: 0 0 10px; font-size: clamp(27px, 2.7vw, 39px); letter-spacing: -.065em; line-height: 1.2; font-weight: 800; }
.catalog-v2-banner h1 span { color: #b784ff; }
.catalog-v2-banner p { font-size: 13px; color: #c1bcd7; margin: 0; line-height: 1.7; max-width: 600px; }
.catalog-v2-banner-ornament { width: 222px; height: 150px; opacity: .5; flex: none; transform: rotate(-8deg); color: #8a57d9; }
.catalog-v2-banner-ornament svg { height: 100%; width: 100%; stroke: currentColor; stroke-width: 1; filter: drop-shadow(0 0 9px #8b52ff9a); }

.catalog-v2-layout { display: grid; grid-template-columns: minmax(224px, 250px) minmax(0,1fr); align-items: start; gap: 25px; margin-top: 26px; }
.catalog-v2-filters-panel { background: linear-gradient(155deg, #151b2d, #0e1522); border: 1px solid var(--cat-stroke); border-radius: 15px; overflow: hidden; box-shadow: 0 8px 30px #03060930; }
.catalog-v2-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 0 18px; border-bottom: 1px solid #26304a; }
.catalog-v2-filter-title { display: flex; align-items: center; gap: 9px; color: #f0effc; }
.catalog-v2-filter-title svg { width: 18px; height: 18px; color: #b27bff; }
.catalog-v2-filter-title strong { font-size: 14px; }
.catalog-v2-filter-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; color: #fff; background: #6c38d7; border-radius: 50px; font-size: 11px; font-weight: 800; }
.catalog-v2-filter-heading>a { color: #a88edc; font-size: 11px; }
.catalog-v2-filter-heading>a:hover { color: #dec6ff; }
.catalog-v2-filter-form { padding: 19px 18px 18px; }
.catalog-v2-fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.catalog-v2-fieldset legend { display: block; width: 100%; margin-bottom: 9px; color: #cdd0e5; font-size: 11px; font-weight: 800; }
.catalog-v2-fieldset select,
.catalog-v2-search-field { width: 100%; height: 42px; border-radius: 9px; border: 1px solid #313b55; background: #0c1220; color: #f4f5ff; transition: border-color .2s ease, box-shadow .2s ease; }
.catalog-v2-fieldset select { padding: 0 10px; font-size: 12px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398a3c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.catalog-v2-fieldset select:focus,
.catalog-v2-search-field:focus-within { border-color: #9458f6; box-shadow: 0 0 0 3px #834bff24; outline: 0; }
.catalog-v2-fieldset select:disabled { opacity: .55; cursor: not-allowed; }
.catalog-v2-search-field { display: flex; align-items: center; padding: 0 10px; gap: 9px; }
.catalog-v2-search-field>svg { width: 17px; height: 17px; color: #8999bb; flex: none; }
.catalog-v2-search-field input { background: transparent; border: 0; color: #f4f4ff; outline: none; min-width: 0; width: 100%; height: 100%; font-size: 12px; }
.catalog-v2-search-field input::placeholder { color: #7684a6; }
.catalog-v2-field-note { margin: 7px 0 0; color: #8995b2; font-size: 10px; line-height: 1.4; }
.catalog-v2-apply { width: 100%; min-height: 43px; display: flex; justify-content: center; align-items: center; gap: 9px; background: linear-gradient(110deg,#7939ed,#612de0); border: 1px solid #9557ff; border-radius: 10px; box-shadow: 0 6px 20px #6a34e244; color: #fff; font-size: 12px; font-weight: 800; transition: filter .2s, transform .2s; }
.catalog-v2-apply:hover { filter: brightness(1.15); transform: translateY(-1px); }

.catalog-v2-results { min-width: 0; }
.catalog-v2-results-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 13px; min-height: 58px; margin-bottom: 16px; }
.catalog-v2-results-total { display: flex; flex-direction: column; gap: 3px; }
.catalog-v2-results-label { color: #8490ad; font-size: 11px; }
.catalog-v2-results-total strong { color: #f7f6ff; font-size: 18px; line-height: 1.25; }
.catalog-v2-results-total strong span { font-size: 13px; color: #a0aeca; font-weight: 600; }
.catalog-v2-bar-actions { display: flex; align-items: center; gap: 10px; }
.catalog-v2-sort-label { color: #99a3bd; font-size: 11px; white-space: nowrap; }
.catalog-v2-sort { background: #131b2d; border: 1px solid #2b3550; border-radius: 9px; padding: 9px 11px; color: #f7f4ff; font-size: 11px; max-width: 185px; min-height: 38px; cursor: pointer; }
.catalog-v2-mobile-filter-toggle { display: none; }
.catalog-v2-active-filters { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.catalog-v2-active-filters>span:first-child { color: #8390aa; font-size: 10px; margin-right: 3px; }
.catalog-v2-active-chip { border: 1px solid #443267; color: #d8c3f9; background: #201932; border-radius: 8px; padding: 6px 10px; font-size: 10px; }
.catalog-v2-active-filters>a { color: #a9b3ce; font-size: 10px; margin-left: 4px; }
.catalog-v2-active-filters>a:hover { color: #fff; }
.catalog-v2-range { font-size: 11px; color: #7888a7; margin: 0 0 13px; }

.catalog-v2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 24px 17px; }
.catalog-v2-card { min-width: 0; }
.catalog-v2-cover { position: relative; overflow: hidden; aspect-ratio: 2 / 3; width: 100%; border: 1px solid #313b56; border-radius: 13px; background: #19142c; isolation: isolate; transition: border-color .23s, box-shadow .23s, transform .23s; }
.catalog-v2-card:hover .catalog-v2-cover { border-color: #8255cb; box-shadow: 0 8px 23px #05051799, 0 0 0 1px #8857ee33; transform: translateY(-2px); }
.catalog-v2-cover-link { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.catalog-v2-cover-link img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transition: transform .35s ease; }
.catalog-v2-card:hover .catalog-v2-cover-link img { transform: scale(1.04); }
.catalog-v2-cover-shade { position: absolute; inset: auto 0 0; height: 27%; pointer-events: none; background: linear-gradient(transparent, #070a18a8); }
.catalog-v2-tags { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; pointer-events: none; }
.catalog-v2-type,.catalog-v2-year { padding: 5px 8px; border-radius: 6px; color: #fff; font-size: 10px; font-weight: 800; line-height: 1.15; border: 1px solid #ffffff22; }
.catalog-v2-type--manhwa { background: linear-gradient(120deg,#8545fb,#4d61e8); }
.catalog-v2-type--manga { background: linear-gradient(120deg,#e34f80,#ee7b53); }
.catalog-v2-type--manhua { background: linear-gradient(120deg,#069fba,#1486d6); }
.catalog-v2-type--other { background: #33354f; }
.catalog-v2-year { background: #080c19c9; border-color: #ffffff26; font-weight: 700; }
.catalog-v2 .bookmark-toggle.catalog-v2-save { top: 8px; right: 8px; width: 28px; height: 31px; border: 1px solid #ffffff33; background: #0b0e1bd9; z-index: 3; border-radius: 7px; }
.catalog-v2 .bookmark-toggle.catalog-v2-save svg { width: 17px; height: 18px; }
.catalog-v2 .bookmark-toggle.catalog-v2-save:hover { background: #482b83; border-color: #bd8aff; }
.catalog-v2-rating { position: absolute; bottom: 8px; left: 8px; padding: 4px 8px; background: #090f1cdd; border-radius: 7px; border: 1px solid #ffffff14; color: #fff; font-weight: 800; font-size: 12px; line-height: 1; pointer-events: none; }
.catalog-v2-rating span { font-size: 15px; color: #ffbd31; margin-right: 2px; }
.catalog-v2-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; margin-top: 9px; height: 38px; font-size: 12px; font-weight: 800; line-height: 1.55; color: #f4f3ff; }
.catalog-v2-card-title:hover { color: #c198ff; }
.catalog-v2-card-genres { color: #879cc6; margin-top: 3px; font-size: 10px; }
.catalog-v2-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; color: #7282a5; font-size: 10px; }
.catalog-v2-card-bottom span:last-child { color: #a3afcf; white-space: nowrap; }
.catalog-v2-card-bottom span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.catalog-v2-empty { display: flex; align-items: center; flex-direction: column; text-align: center; gap: 10px; padding: 62px 20px; border: 1px dashed #343453; border-radius: 14px; color: #aab1cf; background: linear-gradient(135deg,#131729,#101523); }
.catalog-v2-empty-icon { display: grid; place-items: center; border-radius: 50%; width: 55px; height: 55px; background: #281b44; color: #b284ff; font-size: 29px; }
.catalog-v2-empty h2 { font-size: 19px; margin: 5px 0 0; color: #f5f2ff; }
.catalog-v2-empty p { font-size: 12px; line-height: 1.7; margin: 0; }
.catalog-v2-empty a { display: inline-flex; padding: 9px 15px; margin-top: 10px; border: 1px solid #7749c4; border-radius: 9px; color: #d4b5ff; font-size: 12px; font-weight: 800; }
.catalog-v2-empty a:hover { background: #35234f; }

.catalog-v2-pages { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 39px; }
.catalog-v2-pages>a,.catalog-v2-ellipsis { display: grid; place-items: center; min-width: 35px; height: 35px; padding: 0 10px; font-size: 12px; border-radius: 9px; color: #c7cee5; }
.catalog-v2-pages>a { border: 1px solid #313953; background: #131b2b; transition: border-color .2s, background .2s; }
.catalog-v2-pages>a:hover { border-color: #9e6eff; background: #241b3b; }
.catalog-v2-pages>a.is-current { color: #fff; font-weight: 800; background: #713cda; border-color: #8853e8; }
.catalog-v2-pages>a.catalog-v2-page-arrow { font-size: 21px; line-height: 1; }
.catalog-v2-ellipsis { color: #7380a2; }

@media (max-width: 1050px) {
  .catalog-v2-layout { grid-template-columns: 218px minmax(0,1fr); gap: 17px; }
  .catalog-v2-grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 20px 13px; }
  .catalog-v2-banner-ornament { width: 160px; }
}
@media (max-width: 790px) {
  .catalog-v2-banner { min-height: 160px; padding: 25px; }
  .catalog-v2-layout { display: flex; flex-direction: column; gap: 12px; }
  .catalog-v2-results { width: 100%; }
  .catalog-v2-filters-panel { display: none; width: 100%; order: 0; }
  .catalog-v2-filters-panel.is-open { display: block; }
  .catalog-v2-results { order: 1; }
  .catalog-v2-mobile-filter-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 11px; font-size: 11px; color: #e7dcff; background: #201a34; border-radius: 9px; border: 1px solid #4d367a; }
  .catalog-v2-mobile-filter-toggle svg { width: 15px; height: 15px; }
  .catalog-v2-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 13px; }
  .catalog-v2-sort-label { display: none; }
}
@media (max-width: 540px) {
  .catalog-v2 { padding-top: 17px; padding-bottom: 48px; }
  .catalog-v2-banner { padding: 21px 18px; min-height: 140px; border-radius: 13px; }
  .catalog-v2-banner h1 { font-size: 25px; }
  .catalog-v2-banner p { font-size: 11px; }
  .catalog-v2-eyebrow { font-size: 8px; }
  .catalog-v2-banner-ornament { display: none; }
  .catalog-v2-layout { margin-top: 18px; }
  .catalog-v2-results-bar { margin-bottom: 15px; }
  .catalog-v2-results-total strong { font-size: 16px; }
  .catalog-v2-sort { max-width: 133px; font-size: 10px; padding: 8px 5px; }
  .catalog-v2-mobile-filter-toggle { font-size: 10px; padding: 7px 9px; }
  .catalog-v2-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 21px 12px; }
  .catalog-v2-card-title { font-size: 11px; height: 35px; }
  .catalog-v2-card-genres { font-size: 10px; }
  .catalog-v2-type,.catalog-v2-year { padding: 4px 6px; font-size: 9px; }
  .catalog-v2-rating { font-size: 10px; }
  .catalog-v2-rating span { font-size: 12px; }
  .catalog-v2-card-bottom { font-size: 9px; }
}

/* SoraKai — скрываем закладки на постерах каталога */

.catalog-v2 .catalog-v2-save.bookmark-toggle {
    display: none;
}

/* SoraKai — названия в одну строку */

.catalog-v2 .catalog-v2-card-title {
    display: block;
    width: 100%;
    min-width: 0;

    /* Строго одна строка */
    white-space: nowrap;

    /* Обрезка с многоточием */
    overflow: hidden;
    text-overflow: ellipsis;

    /* Убираем ограничение двух строк */
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;

    /* Убираем фиксированную высоту */
    height: auto;

    margin-top: 9px;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .catalog-v2 *, .catalog-v2 *::before, .catalog-v2 *::after { transition: none !important; }
}