/* ═══════════════════════════════════════════════════════════════════════════
   ФОРМАТЫ КАРТОЧЕК В КОЛЛЕКЦИИ (card_formats.js → html[data-cfmt])
   Арт всегда целиком в пропорции 2:3 — меняется только оформление вокруг.
   Действует на сетки: «Все карты», альбом сета, образы персонажа и превью в окне выбора.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 0. Цвет редкости ─── */
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .anime-card {
    --cf-c: #94a3b8; --cf-soft: rgba(148, 163, 184, 0.28); --cf-glow: transparent;
}
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .anime-card[data-rarity="Rare"] {
    --cf-c: #60a5fa; --cf-soft: rgba(96, 165, 250, 0.30); --cf-glow: transparent;
}
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .anime-card[data-rarity="Epic"] {
    --cf-c: #c084fc; --cf-soft: rgba(192, 132, 252, 0.32); --cf-glow: rgba(171, 71, 188, 0.40);
}
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .anime-card[data-rarity="Legendary"] {
    --cf-c: #ffca28; --cf-soft: rgba(255, 202, 40, 0.30); --cf-glow: rgba(255, 202, 40, 0.40);
}
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .anime-card.is-mythic {
    --cf-c: #f08097; --cf-soft: rgba(201, 55, 79, 0.40); --cf-glow: rgba(201, 55, 79, 0.50);
}

/* ─── 1. Основа для всех форматов: арт ровно 2:3, без «плавающей» высоты ───
   Раньше карточка была 2:3.25, а арт занимал остаток после плашки (flex: 1). Чем выше плашка
   (имя, номер, характеристики в 2 строки), тем ниже арт — и object-fit: cover срезал голову.
   В части WebView height: 100% у <img> внутри flex-элемента не срабатывал вовсе: картинка
   принимала свою высоту и центрировалась — сдвигалась вниз, верх пропадал.
   Теперь высоту арта задаёт padding-top (работает везде), картинка лежит поверх абсолютно. */
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .anime-card {
    aspect-ratio: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .anime-card .card-image-wrapper {
    flex: 0 0 auto !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 150% 0 0 !important;
    overflow: hidden !important;
}
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .anime-card .card-image {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: 50% 30%;   /* фокус из админки (inline style) перекрывает */
}
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .card-info-overlay { flex: 1 0 auto !important; }
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .card-sub {
    display: none;
    font-size: 8.5px; font-weight: 800; line-height: 1.2;
    letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* характеристики — в одну строку, без переноса на вторую */
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .card-combat-badges {
    flex-wrap: nowrap !important;
    gap: 2px !important;
    overflow: hidden;
}
:is(#cards-grid, #set-binder-grid, #character-details-versions, .cf-preview) .card-combat-badges > span {
    padding: 2px 3px !important;
    white-space: nowrap;
    flex-shrink: 0;
}
/* 3 в ряд: плитка ~105px — четыре бейджа помещаются только впритык */
:is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3, .cf-preview.cols-3) .card-combat-badges {
    justify-content: space-between; gap: 1px !important;
}
:is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3, .cf-preview.cols-3) .card-combat-badges > span {
    font-size: 7.5px !important; padding: 2px 2px !important; letter-spacing: -0.2px;
    flex: 0 1 auto; min-width: 0; overflow: hidden;
}
#cards-grid.cols-4 .card-combat-badges,
#character-details-versions .cards-grid.cols-4 .card-combat-badges { display: none !important; }

/* Плитка-«стопка» персонажа в альбоме и пустые слоты — в любом формате как «Панель»:
   у них нет характеристик, а надпись про образы должна читаться */

/* ═══ 2. «ПРИЦЕЛ» — арт во всю карточку, уголки цвета редкости, данные поверх ═══ */
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile),
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card {
    background: #07080c !important;
}
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper::after,
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card .card-image-wrapper::after {
    content: '';
    position: absolute; inset: 4px; z-index: 2; pointer-events: none;
    --l: 12px; --t: 2px;
    background:
        linear-gradient(var(--cf-c), var(--cf-c)) left top / var(--l) var(--t) no-repeat,
        linear-gradient(var(--cf-c), var(--cf-c)) left top / var(--t) var(--l) no-repeat,
        linear-gradient(var(--cf-c), var(--cf-c)) right top / var(--l) var(--t) no-repeat,
        linear-gradient(var(--cf-c), var(--cf-c)) right top / var(--t) var(--l) no-repeat,
        linear-gradient(var(--cf-c), var(--cf-c)) left bottom / var(--l) var(--t) no-repeat,
        linear-gradient(var(--cf-c), var(--cf-c)) left bottom / var(--t) var(--l) no-repeat,
        linear-gradient(var(--cf-c), var(--cf-c)) right bottom / var(--l) var(--t) no-repeat,
        linear-gradient(var(--cf-c), var(--cf-c)) right bottom / var(--t) var(--l) no-repeat;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
}
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card .card-info-overlay {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(4, 6, 12, 0.94) 0%, rgba(4, 6, 12, 0.72) 55%, rgba(4, 6, 12, 0) 100%) !important;
    border: 0 !important;
    padding: 20px 9px 9px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 4px;
    align-items: end;
}
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) :is(.card-title-row, .card-sub, .card-meta-row),
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card :is(.card-title-row, .card-sub, .card-meta-row) { grid-column: 1; min-width: 0; }
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card .card-title {
    text-transform: uppercase; letter-spacing: 0.03em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-rarity,
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card .card-rarity { display: none !important; }
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-sub,
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card .card-sub { display: block; color: var(--cf-c); }
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges,
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card .card-combat-badges {
    grid-column: 2; grid-row: 1 / span 3;
    flex-direction: column; align-items: stretch;
    margin: 0 !important;
}
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp),
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp) {
    background: rgba(0, 0, 0, 0.62) !important;
    border-color: var(--cf-soft) !important;
    text-align: left;
}
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) :is(.card-lvl, .card-quality, .card-lock-badge),
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card :is(.card-lvl, .card-quality, .card-lock-badge) {
    background: rgba(0, 0, 0, 0.62) !important;
    border-color: var(--cf-soft) !important;
}
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lvl,
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card .card-lvl { top: 8px !important; left: 8px !important; }
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-quality,
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card .card-quality { top: 8px !important; right: 8px !important; }
html[data-cfmt="scope"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lock-badge,
:is(#_, .cf-preview)[data-cfmt="scope"] .anime-card .card-lock-badge { top: 26px !important; left: 8px !important; }
html[data-cfmt="scope"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-info-overlay { padding: 16px 7px 7px !important; }
html[data-cfmt="scope"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-sub { display: none; }
html[data-cfmt="scope"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card .card-info-overlay { padding: 14px 5px 5px !important; }
html[data-cfmt="scope"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card .card-sub { display: none; }

/* ═══ 3. «ВИТРИНА» — арт во всю карточку, матовое стекло снизу ═══ */
html[data-cfmt="vitrine"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="vitrine"] .anime-card .card-info-overlay {
    position: absolute !important;
    left: 5px; right: 5px; bottom: 5px;
    z-index: 3;
    border-radius: 9px;
    background: rgba(14, 16, 26, 0.56) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
            backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 5px 6px 6px !important;
}
html.ui-lite[data-cfmt="vitrine"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card .card-info-overlay,
html.ui-lite :is(#_, .cf-preview)[data-cfmt="vitrine"] .anime-card .card-info-overlay {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(14, 16, 26, 0.86) !important;
}
html[data-cfmt="vitrine"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp),
:is(#_, .cf-preview)[data-cfmt="vitrine"] .anime-card .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-cfmt="vitrine"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card .card-info-overlay { left: 3px; right: 3px; bottom: 3px; padding: 3px 4px !important; border-radius: 7px; }
html[data-cfmt="vitrine"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-meta-row { display: none !important; }
html[data-cfmt="vitrine"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-info-overlay { left: 4px; right: 4px; bottom: 4px; padding: 4px 5px 5px !important; }

/* ═══ 4. «ТОЛЬКО АРТ» — минимум поверх: имя, копии; всё остальное в карточке карты ═══ */
html[data-cfmt="art"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="art"] .anime-card .card-info-overlay {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0)) !important;
    border: 0 !important;
    padding: 14px 7px 6px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px;
}
html[data-cfmt="art"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title-row,
:is(#_, .cf-preview)[data-cfmt="art"] .anime-card .card-title-row { flex: 1; min-width: 0; }
html[data-cfmt="art"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="art"] .anime-card .card-title { font-size: 10.5px !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
html[data-cfmt="art"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) :is(.card-rarity, .card-circ-badge, .card-combat-badges, .binder-hunt-pill),
:is(#_, .cf-preview)[data-cfmt="art"] .anime-card :is(.card-rarity, .card-circ-badge, .card-combat-badges) { display: none !important; }
html[data-cfmt="art"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-meta-row,
:is(#_, .cf-preview)[data-cfmt="art"] .anime-card .card-meta-row { width: auto !important; margin: 0 !important; flex: 0 0 auto; }
html[data-cfmt="art"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-meta-row:not(:has(.card-dupes-pill)) { display: none !important; }
html[data-cfmt="art"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-quality,
:is(#_, .cf-preview)[data-cfmt="art"] .anime-card .card-quality { opacity: 0.85; }

/* ═══ 5. «ПАСПАРТУ» — арт в окне цветного паспарту, подпись по центру ═══ */
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot),
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card {
    background: linear-gradient(165deg, var(--cf-soft) 0%, rgba(16, 18, 26, 1) 58%) #10121a !important;
    padding: 5px 5px 0 !important;
}
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-image-wrapper {
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--cf-soft);
}
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-info-overlay {
    background: transparent !important;
    border: 0 !important;
    padding: 5px 2px 6px !important;
    align-items: center !important;
    text-align: center;
}
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title-row,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-title-row { justify-content: center; }
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-title { flex: 0 1 auto; text-align: center; }
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-rarity,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-rarity { display: none !important; }
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-sub,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-sub { display: block; max-width: 100%; color: var(--cf-c); letter-spacing: 0.1em; }
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-meta-row,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-meta-row { justify-content: center; gap: 6px; }
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-dupes-pill,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-dupes-pill { margin-left: 0; }
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-combat-badges { justify-content: center; }
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lvl,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-lvl { top: 9px !important; left: 9px !important; }
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-quality,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-quality { top: 9px !important; right: 9px !important; }
html[data-cfmt="mat"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lock-badge,
:is(#_, .cf-preview)[data-cfmt="mat"] .anime-card .card-lock-badge { top: 27px !important; left: 9px !important; }
html[data-cfmt="mat"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card .card-sub { display: none; }

/* ═══ 6. «ПОЛАРОИД» — светлая рамка-снимок, подпись снизу ═══ */
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot),
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card {
    background: #ece7dc !important;
    border: 0 !important;
    border-radius: 5px !important;
    padding: 6px 6px 0 !important;
}
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot):not(.is-limited):not(.is-mythic),
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card:not(.is-limited):not(.is-mythic) {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 1.5px var(--cf-soft), 0 0 14px var(--cf-glow) !important;
}
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-image-wrapper { border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-info-overlay {
    background: transparent !important;
    border: 0 !important;
    padding: 5px 2px 7px !important;
}
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-title {
    color: #24201c !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title::before,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-title::before {
    content: ''; display: inline-block; vertical-align: 1px;
    width: 6px; height: 6px; margin-right: 4px; border-radius: 50%;
    background: var(--cf-c); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-rarity,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-rarity { display: none !important; }
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-sub,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-sub { display: block; color: #8a7f72; }
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-circ-badge,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-circ-badge { color: #8a7f72 !important; }
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp),
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp) {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #2d2924 !important;
}
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges .ccb-role,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-combat-badges .ccb-role { border-color: var(--role-c, #b45309) !important; }
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lvl,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-lvl { top: 10px !important; left: 10px !important; }
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-quality,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-quality { top: 10px !important; right: 10px !important; }
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lock-badge,
:is(#_, .cf-preview)[data-cfmt="photo"] .anime-card .card-lock-badge { top: 28px !important; left: 10px !important; }
html[data-cfmt="photo"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card .card-sub { display: none; }
html[data-cfmt="photo"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card:not(.binder-character-tile) { padding: 4px 4px 0 !important; }

/* ═══ 7. «КОМИКС» — чёрный контур, бумага с растром, жёсткая тень ═══ */
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot),
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card {
    background: #fff6d8 !important;
    border: 2.5px solid #0a0a0a !important;
    border-radius: 6px !important;
}
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot):not(.is-limited):not(.is-mythic),
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card:not(.is-limited):not(.is-mythic) {
    box-shadow: 4px 4px 0 #0a0a0a, 4px 4px 0 2px var(--cf-c) !important;
}
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper,
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card .card-image-wrapper { border-bottom: 2.5px solid #0a0a0a; }
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card .card-info-overlay {
    background: radial-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1.3px) 0 0 / 5px 5px, #fff6d8 !important;
    border: 0 !important;
    padding: 5px 6px 6px !important;
}
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card .card-title {
    color: #0a0a0a !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.02em;
}
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.is-mythic) .card-rarity,
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card:not(.is-mythic) .card-rarity {
    background: #0a0a0a !important; border-color: #0a0a0a !important; color: var(--cf-c) !important;
    transform: rotate(-3deg);
}
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-circ-badge,
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card .card-circ-badge { color: #4b4436 !important; }
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp),
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp) {
    background: #fff !important; border: 1.5px solid #0a0a0a !important; color: #0a0a0a !important;
    border-radius: 3px !important; box-shadow: 1.5px 1.5px 0 #0a0a0a;
}
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges,
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card .card-combat-badges { padding: 0 2px 2px 0; gap: 3px !important; }
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) :is(.card-lvl, .card-quality, .card-lock-badge),
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card :is(.card-lvl, .card-quality, .card-lock-badge) {
    background: #ffe14d !important; color: #0a0a0a !important;
    border: 1.5px solid #0a0a0a !important; box-shadow: 1.5px 1.5px 0 #0a0a0a !important;
}
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-quality,
:is(#_, .cf-preview)[data-cfmt="comic"] .anime-card .card-quality { background: #0a0a0a !important; }

/* ═══ 8. «ГОЛОГРАММА» — фольга по краю: у каждой редкости свой металл ═══
   Common — серебро, Rare — холодная сине-бирюзовая, Epic — фиолетово-розовая,
   Legendary — золото, мифик — кровавая с розовым золотом. Чем выше редкость —
   тем толще кромка, сильнее блик по арту и свечение. */
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card,
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card {
    --hf: conic-gradient(from 210deg at 50% 50%, #f3f4f6, #9ca3af, #e5e7eb, #6b7280, #d1d5db, #f3f4f6);
    --hw: 2px; --hg: transparent; --hgr: 0px;
    --hsh: rgba(255, 255, 255, 0.07); --hsh2: rgba(255, 255, 255, 0.04);
    --ht: linear-gradient(90deg, #f8fafc, #cbd5e1 50%, #f1f5f9); --hs: #9ca3af;
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card[data-rarity="Rare"],
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card[data-rarity="Rare"] {
    --hf: conic-gradient(from 210deg at 50% 50%, #7dd3fc, #2563eb, #67e8f9, #1e40af, #a5f3fc, #7dd3fc);
    --hw: 2.5px; --hg: rgba(56, 189, 248, 0.30); --hgr: 10px;
    --hsh: rgba(186, 230, 253, 0.12); --hsh2: rgba(125, 211, 252, 0.08);
    --ht: linear-gradient(90deg, #e0f2fe, #7dd3fc 50%, #a5f3fc); --hs: #60a5fa;
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card[data-rarity="Epic"],
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card[data-rarity="Epic"] {
    --hf: conic-gradient(from 210deg at 50% 50%, #f0abfc, #7c3aed, #f472b6, #a5b4fc, #c084fc, #f0abfc);
    --hw: 3px; --hg: rgba(192, 132, 252, 0.40); --hgr: 13px;
    --hsh: rgba(245, 208, 254, 0.16); --hsh2: rgba(196, 181, 253, 0.10);
    --ht: linear-gradient(90deg, #fae8ff, #e9d5ff 50%, #fbcfe8); --hs: #c084fc;
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card[data-rarity="Legendary"],
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card[data-rarity="Legendary"] {
    --hf: conic-gradient(from 210deg at 50% 50%, #fff7d1, #f59e0b, #fde68a, #b45309, #ffe066, #fffbeb, #fff7d1);
    --hw: 3.5px; --hg: rgba(255, 196, 40, 0.50); --hgr: 16px;
    --hsh: rgba(255, 247, 214, 0.22); --hsh2: rgba(253, 230, 138, 0.14);
    --ht: linear-gradient(90deg, #fff7d1, #fcd34d 50%, #fff1b8); --hs: #fbbf24;
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card.is-mythic,
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card.is-mythic {
    --hf: conic-gradient(from 210deg at 50% 50%, #ffd1dc, #9f1239, #f6e3c4, #6e0f26, #ff8fa3, #ffd1dc);
    --hw: 3.5px; --hg: rgba(201, 55, 79, 0.55); --hgr: 16px;
    --hsh: rgba(255, 209, 220, 0.20); --hsh2: rgba(246, 227, 196, 0.12);
    --ht: linear-gradient(90deg, #ffe4e6, #f6e3c4 50%, #fda4af); --hs: #fb7185;
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot),
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card:not(.binder-empty-slot) {
    background: var(--hf) !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: var(--hw) !important
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot):not(.is-limited):not(.is-mythic),
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card:not(.binder-empty-slot):not(.is-limited):not(.is-mythic) {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 var(--hgr) var(--hg) !important
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper,
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card .card-image-wrapper {
    border-radius: 9px 9px 0 0
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper::after,
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card .card-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0) 35%, var(--hsh) 48%, var(--hsh2) 52%, rgba(255, 255, 255, 0) 65%);
    mix-blend-mode: screen
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card .card-info-overlay {
    background: #0b0c14 !important;
    border: 0 !important;
    border-radius: 0 0 9px 9px;
    padding: 5px 6px 6px !important
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card .card-title {
    background: var(--ht);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-sub,
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card .card-sub {
    display: block;
    color: var(--hs)
}
html[data-cfmt="holo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span,
:is(#_, .cf-preview)[data-cfmt="holo"] .anime-card .card-combat-badges > span {
    border-radius: 999px !important
}
html[data-cfmt="holo"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-sub {
    display: none
}

/* ═══ 9. «ГРЕЙДИНГ» — кейс оценённой карты: этикетка сверху, арт под пластиком ═══ */
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot),
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card:not(.binder-empty-slot) {
    background: linear-gradient(180deg, #e3e6eb 0%, #c3c8d0 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 8px !important;
    padding: 5px !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot):not(.is-limited):not(.is-mythic),
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card:not(.binder-empty-slot):not(.is-limited):not(.is-mythic) {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 14px var(--cf-glow) !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-info-overlay {
    order: -1;
    flex: 0 0 auto !important;
    margin-bottom: 5px;
    background: #fbfaf5 !important;
    border: 1px solid #9aa1ab !important;
    border-top: 3px solid var(--cf-c) !important;
    border-radius: 3px;
    padding: 3px 5px 4px !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-image-wrapper {
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(255, 255, 255, 0.45)
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper::after,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 30%)
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-title {
    color: #14171c !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 10.5px !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-rarity,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-rarity {
    background: #14171c !important;
    color: var(--cf-c) !important;
    border-color: #14171c !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-sub,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-sub {
    display: block;
    color: #6b7280
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-circ-badge,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-circ-badge {
    color: #4b5563 !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp),
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp) {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    color: #1f2937 !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > .ccb-atk,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-combat-badges > .ccb-atk {
    color: #c2410c !important;
    background: rgba(234, 88, 12, 0.10) !important;
    border-color: rgba(194, 65, 12, 0.35) !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > .ccb-hp,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-combat-badges > .ccb-hp {
    color: #d1294a !important;
    background: rgba(225, 29, 72, 0.10) !important;
    border-color: rgba(209, 41, 74, 0.35) !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lvl,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-lvl {
    top: auto !important;
    bottom: 10px !important;
    left: 10px !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-quality,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-quality {
    top: auto !important;
    bottom: 10px !important;
    right: 10px !important
}
html[data-cfmt="slab"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lock-badge,
:is(#_, .cf-preview)[data-cfmt="slab"] .anime-card .card-lock-badge {
    top: auto !important;
    bottom: 28px !important;
    left: 10px !important
}
html[data-cfmt="slab"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-sub {
    display: none
}
html[data-cfmt="slab"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-combat-badges {
    display: none !important
}
html[data-cfmt="slab"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-info-overlay {
    padding: 2px 4px 3px !important;
    margin-bottom: 4px
}
html[data-cfmt="slab"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-lvl {
    bottom: 8px !important;
    left: 8px !important
}
html[data-cfmt="slab"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-quality {
    bottom: 8px !important;
    right: 8px !important
}

/* ═══ 10. «КИБЕР» — срезанные углы, моноширинный шрифт, строки развёртки ═══ */
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot),
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card:not(.binder-empty-slot) {
    background: linear-gradient(135deg, var(--cf-c) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 72%, var(--cf-c) 100%), #05070d !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 2px !important;
    -webkit-clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    box-shadow: none !important
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-image-wrapper {
    -webkit-clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
    clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px)
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-info-overlay {
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px), #070a12 !important;
    border: 0 !important;
    border-top: 1px solid var(--cf-c) !important;
    padding: 5px 6px 7px !important;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%)
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-title {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cf-c) !important;
    text-shadow: 0 0 6px var(--cf-soft)
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-rarity,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-rarity {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-color: var(--cf-c) !important;
    color: var(--cf-c) !important
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-sub,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-sub {
    display: block;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
    color: #7c8aa5;
    letter-spacing: 0.02em
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-sub::before,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-sub::before {
    content: '// ';
    color: var(--cf-c)
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-circ-badge,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-circ-badge {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace !important;
    color: #7c8aa5 !important
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-dupes-pill,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-dupes-pill {
    border-radius: 0 !important
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-combat-badges > span {
    border-radius: 0 !important;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace !important
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp),
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp) {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--cf-soft) !important
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):is(.card-lvl, .card-quality, .card-lock-badge),
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card:is(.card-lvl, .card-quality, .card-lock-badge) {
    border-radius: 0 !important;
    background: rgba(5, 7, 13, 0.82) !important;
    border-color: var(--cf-c) !important
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lvl,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-lvl {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace !important;
    color: var(--cf-c) !important;
    top: 6px !important;
    left: 14px !important
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-quality,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-quality {
    top: 6px !important;
    right: 6px !important
}
html[data-cfmt="cyber"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lock-badge,
:is(#_, .cf-preview)[data-cfmt="cyber"] .anime-card .card-lock-badge {
    left: 14px !important
}
html[data-cfmt="cyber"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-sub {
    display: none
}

/* ═══ 11. «АФИША» — имя вертикально на ленте цвета редкости слева ═══ */
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot),
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card:not(.binder-empty-slot) {
    --ps: 30px;
    background: #0b0c12 !important;
    padding: 0 0 0 var(--ps) !important
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-info-overlay {
    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--ps);
    z-index: 3;
    background: linear-gradient(180deg, var(--cf-c) 0%, color-mix(in srgb, var(--cf-c) 55%, #000) 100%) !important;
    background-color: var(--cf-c) !important;
    border: 0 !important;
    padding: 7px 0 !important;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px;
    overflow: visible
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title-row,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-title-row {
    flex: 0 1 auto;
    min-height: 0;
    width: auto !important;
    max-height: 72%
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-title {
    color: #0b0b10 !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 13px !important;
    line-height: 1 !important;
    text-shadow: none !important
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-rarity,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-rarity {
    display: none !important
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-sub,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-sub {
    display: block;
    color: rgba(11, 11, 16, 0.72);
    min-height: 0;
    flex: 0 1 auto;
    max-height: 40%
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-meta-row,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-meta-row {
    width: auto !important;
    margin: auto 0 0 !important;
    flex: 0 0 auto;
    gap: 3px;
    justify-content: flex-end !important
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-circ-badge,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-circ-badge {
    color: rgba(11, 11, 16, 0.75) !important
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-dupes-pill,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-dupes-pill {
    margin: 0 !important;
    background: #0b0b10 !important;
    color: #fff !important;
    border-color: #0b0b10 !important;
    padding: 3px 0 !important
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-combat-badges {
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    position: absolute;
    left: calc(100% + 5px);
    bottom: 5px;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 !important;
    overflow: visible
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp),
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp) {
    background: rgba(0, 0, 0, 0.66) !important;
    border-color: rgba(255, 255, 255, 0.16) !important
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-image-wrapper {
    border-radius: 0 10px 10px 0
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lvl,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-lvl {
    left: calc(var(--ps) + 5px) !important
}
html[data-cfmt="poster"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lock-badge,
:is(#_, .cf-preview)[data-cfmt="poster"] .anime-card .card-lock-badge {
    left: calc(var(--ps) + 5px) !important
}
html[data-cfmt="poster"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) {
    --ps: 23px
}
html[data-cfmt="poster"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-title {
    font-size: 10.5px !important
}
html[data-cfmt="poster"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-sub {
    display: none
}
html[data-cfmt="poster"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-circ-badge {
    display: none
}
html[data-cfmt="poster"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-combat-badges {
    left: calc(100% + 4px);
    bottom: 4px
}
html[data-cfmt="poster"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card:not(.binder-character-tile) {
    --ps: 17px
}
html[data-cfmt="poster"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card:not(.binder-character-tile) .card-title {
    font-size: 9px !important;
    letter-spacing: 0.06em
}
html[data-cfmt="poster"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card:not(.binder-character-tile) .card-meta-row {
    display: none !important
}

/* ═══ 12. «СВИТОК» — тёмная кожа, золотая окантовка, лента-пергамент ═══ */
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot),
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card:not(.binder-empty-slot) {
    background: radial-gradient(120% 80% at 50% 0%, #3a2818 0%, #1d140c 70%) !important;
    border: 1px solid #c9a24f !important;
    border-radius: 6px !important;
    padding: 5px 5px 0 !important
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot):not(.is-limited):not(.is-mythic),
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card:not(.binder-empty-slot):not(.is-limited):not(.is-mythic) {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 0 0 3px #1d140c, inset 0 0 0 4px rgba(201, 162, 79, 0.45), 0 0 12px var(--cf-glow) !important
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-image-wrapper {
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(201, 162, 79, 0.7), 0 0 0 3px rgba(0, 0, 0, 0.45)
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-info-overlay {
    background: linear-gradient(180deg, #f1e3c2 0%, #dcc699 100%) !important;
    border: 0 !important;
    margin: 6px -2px 6px;
    padding: 4px 11px 5px !important;
    align-items: center !important;
    text-align: center;
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%)
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title-row,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-title-row {
    justify-content: center
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-title {
    flex: 0 1 auto;
    text-align: center;
    color: #3b2614 !important;
    font-family: Georgia, 'Times New Roman', 'Noto Serif', serif !important;
    font-weight: 700 !important;
    font-style: italic
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title::before,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-title::before {
    content: '◆';
    color: var(--cf-c);
    font-style: normal;
    margin-right: 3px;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6)
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-rarity,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-rarity {
    display: none !important
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-sub,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-sub {
    display: block;
    max-width: 100%;
    font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
    font-variant: small-caps;
    text-transform: none;
    letter-spacing: 0.04em;
    color: #7a5a32
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-meta-row,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-meta-row {
    justify-content: center;
    gap: 6px
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-circ-badge,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-circ-badge {
    font-family: Georgia, 'Times New Roman', 'Noto Serif', serif !important;
    color: #6b4e2a !important
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-dupes-pill,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-dupes-pill {
    margin-left: 0
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-combat-badges {
    justify-content: center
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp),
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp) {
    background: rgba(59, 38, 20, 0.08) !important;
    border-color: rgba(59, 38, 20, 0.28) !important;
    color: #3b2614 !important
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > .ccb-atk,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-combat-badges > .ccb-atk {
    color: #b4400c !important;
    background: rgba(234, 88, 12, 0.10) !important;
    border-color: rgba(180, 64, 12, 0.35) !important
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > .ccb-hp,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-combat-badges > .ccb-hp {
    color: #c0233f !important;
    background: rgba(225, 29, 72, 0.10) !important;
    border-color: rgba(192, 35, 63, 0.35) !important
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):is(.card-lvl, .card-quality, .card-lock-badge),
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card:is(.card-lvl, .card-quality, .card-lock-badge) {
    background: #1d140c !important;
    border-color: #c9a24f !important
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lvl,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-lvl {
    top: 9px !important;
    left: 9px !important;
    color: #e8c770 !important
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-quality,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-quality {
    top: 9px !important;
    right: 9px !important
}
html[data-cfmt="scroll"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lock-badge,
:is(#_, .cf-preview)[data-cfmt="scroll"] .anime-card .card-lock-badge {
    top: 27px !important;
    left: 9px !important
}
html[data-cfmt="scroll"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-sub {
    display: none
}
html[data-cfmt="scroll"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-info-overlay {
    padding: 3px 9px 4px !important;
    margin: 5px -2px 5px
}

/* ═══ 13. «ПИКСЕЛЬ» — 8-бит: ступенчатые углы, квадратные плашки ═══ */
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot),
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card:not(.binder-empty-slot) {
    background: #111321 !important;
    border: 3px solid var(--cf-c) !important;
    border-radius: 0 !important;
    margin: 3px
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):not(.binder-empty-slot):not(.is-limited):not(.is-mythic),
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card:not(.binder-empty-slot):not(.is-limited):not(.is-mythic) {
    box-shadow: 3px 0 0 0 #000, -3px 0 0 0 #000, 0 3px 0 0 #000, 0 -3px 0 0 #000, 6px 6px 0 0 rgba(0, 0, 0, 0.45) !important
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-image-wrapper,
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-image-wrapper {
    border-bottom: 3px solid var(--cf-c)
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-info-overlay,
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-info-overlay {
    background: #111321 !important;
    border: 0 !important;
    padding: 5px 5px 6px !important
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-title,
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-title {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    color: #ffec27 !important;
    text-shadow: 2px 2px 0 #000 !important;
    letter-spacing: 0.02em
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-rarity,
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-rarity {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace !important;
    border-radius: 0 !important;
    border-width: 2px !important;
    border-color: #000 !important;
    background: var(--cf-c) !important;
    color: #000 !important;
    box-shadow: 2px 2px 0 #000
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-circ-badge,
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-circ-badge {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace !important;
    color: #8b9bb4 !important
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-dupes-pill,
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-dupes-pill {
    border-radius: 0 !important;
    background: #ff004d !important;
    color: #fff !important;
    border: 2px solid #000 !important
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span,
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-combat-badges > span {
    border-radius: 0 !important;
    border-width: 2px !important;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace !important;
    box-shadow: 2px 2px 0 #000
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp),
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-combat-badges > span:not(.ccb-atk):not(.ccb-hp) {
    background: #29366f !important;
    border-color: #000 !important;
    color: #fff !important
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges > :is(.ccb-atk, .ccb-hp),
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-combat-badges > :is(.ccb-atk, .ccb-hp) {
    border-color: #000 !important
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-combat-badges,
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-combat-badges {
    padding: 0 2px 2px 0;
    gap: 3px !important
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile):is(.card-lvl, .card-quality, .card-lock-badge),
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card:is(.card-lvl, .card-quality, .card-lock-badge) {
    border-radius: 0 !important;
    background: #000 !important;
    border: 2px solid var(--cf-c) !important;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6) !important
}
html[data-cfmt="pixel"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .anime-card:not(.binder-character-tile) .card-lvl,
:is(#_, .cf-preview)[data-cfmt="pixel"] .anime-card .card-lvl {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace !important;
    color: #ffec27 !important
}
html[data-cfmt="pixel"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-combat-badges > span {
    border-width: 1px !important;
    box-shadow: none
}
html[data-cfmt="pixel"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-combat-badges {
    padding: 0;
    gap: 1px !important
}
html[data-cfmt="pixel"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card:not(.binder-character-tile):not(.binder-empty-slot) {
    border-width: 2px !important;
    margin: 2px
}

/* ─── поправки новых видов под плотные сетки ─── */
/* «Афиша»: арт уже на ширину ленты — звёзды уходят в нижний правый угол арта */
html[data-cfmt="poster"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-quality, html[data-cfmt="poster"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card:not(.binder-character-tile) .card-quality { top: auto !important; bottom: 4px !important; right: 4px !important; }
html[data-cfmt="poster"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-combat-badges { bottom: 22px !important; }
/* «Кибер», «Пиксель»: моноширинный уровень широкий — в плотной сетке обычный шрифт */
html[data-cfmt="cyber"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-lvl, html[data-cfmt="pixel"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-lvl, html[data-cfmt="cyber"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card:not(.binder-character-tile) .card-lvl, html[data-cfmt="pixel"] :is(#cards-grid.cols-4, #character-details-versions .cols-4) .anime-card:not(.binder-character-tile) .card-lvl { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; letter-spacing: 0; }
html[data-cfmt="cyber"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-lvl, html[data-cfmt="cyber"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-lock-badge { left: 9px !important; }
/* «Свиток»: лента во всю ширину, без значка роли — иначе характеристики не помещаются */
html[data-cfmt="scroll"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-info-overlay { margin: 5px -5px 5px !important; padding: 3px 9px 4px !important; }
html[data-cfmt="scroll"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-combat-badges > .ccb-role { display: none !important; }

/* ═══ Окно выбора формата ═══ */
.cf-ov {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(4, 5, 9, 0.6);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity var(--dur-fast, 160ms) linear;
}
.cf-ov.is-open { opacity: 1; }
.cf-sheet {
    width: 100%; max-width: 520px;
    max-height: calc(100vh - var(--content-top, 0px) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    background: #12141c;
    border: 1px solid var(--stroke-1, rgba(255, 255, 255, 0.08));
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    padding: 10px 16px calc(18px + var(--safe-bottom, 0px));
    transform: translateY(24px);
    transition: transform var(--dur-base, 240ms) var(--ease-out, ease-out);
    color: var(--text-1, #f5f5f5);
}
.cf-ov.is-open .cf-sheet { transform: none; }
.cf-grip { width: 38px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); margin: 0 auto 12px; }
.cf-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cf-head-ico {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06); color: var(--text-2, #a3a9b8);
}
.cf-head-txt { flex: 1; min-width: 0; }
.cf-head-txt h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.cf-head-txt p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--text-2, #a3a9b8); }
.cf-reset {
    flex: 0 0 auto; background: none; border: 0; padding: 6px 2px;
    color: var(--text-2, #a3a9b8); font-size: 13px; font-weight: 700; cursor: pointer;
}
.cf-reset:disabled { opacity: 0.35; }
.cf-body { display: grid; grid-template-columns: minmax(0, 168px) minmax(0, 1fr); gap: 14px; align-items: start; }
.cf-preview { display: block !important; padding: 0 6px 8px 0 !important; margin: 0 !important; }
.cf-preview .anime-card {
    width: 100%; pointer-events: none; animation: none !important; transform: none !important; opacity: 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}
.cf-preview .anime-card[data-rarity="Rare"]      { border-color: rgba(96, 165, 250, 0.45) !important; }
.cf-preview .anime-card[data-rarity="Epic"]      { border-color: rgba(192, 132, 252, 0.6) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(171, 71, 188, 0.35) !important; }
.cf-preview .anime-card[data-rarity="Legendary"] { border-color: rgba(255, 202, 40, 0.75) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 202, 40, 0.35) !important; }
.cf-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cf-opt {
    min-height: 46px; padding: 8px 3px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2, #a3a9b8);
    font-size: 12.5px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-press, 90ms) var(--ease-std, ease), background var(--dur-fast, 160ms) linear, color var(--dur-fast, 160ms) linear;
}
.cf-opt small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-opt:active { transform: scale(0.96); }
.cf-opt.is-on {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 14px rgba(0, 0, 0, 0.35);
}
@media (max-width: 360px) {
    .cf-body { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 10px; }
    .cf-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .cf-opt { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .cf-ov, .cf-sheet { transition: none; } }

/* кнопка рядом с переключателем плотности сетки */
.ui-density-btn.cf-btn { display: inline-flex; align-items: center; justify-content: center; }
.ui-density-btn.cf-btn svg { width: 15px; height: 15px; }

/* ─── поправки под плотные сетки ─── */
/* «Прицел», 3 в ряд: столбик характеристик закрывал полкарты — кладём их строкой под имя */
html[data-cfmt="scope"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-combat-badges,
:is(#_, .cf-preview).cols-3[data-cfmt="scope"] .anime-card .card-combat-badges {
    grid-column: 1 / -1; grid-row: auto;
    flex-direction: row; margin-top: 3px !important;
}
/* «Комикс», 3 в ряд: тоньше контур у бейджей, без тени — иначе не помещаются */
html[data-cfmt="comic"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-combat-badges > span,
:is(#_, .cf-preview).cols-3[data-cfmt="comic"] .anime-card .card-combat-badges > span {
    border-width: 1px !important; box-shadow: none; border-radius: 2px !important;
}
html[data-cfmt="comic"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .anime-card:not(.binder-character-tile) .card-combat-badges,
:is(#_, .cf-preview).cols-3[data-cfmt="comic"] .anime-card .card-combat-badges { padding: 0; gap: 1px !important; }

/* ─── Цвет урона и HP: читаются с одного взгляда ───
   Только прямые потомки: внутри бейджа эмодзи (роль, ⚡) — это <span class="emj"> с картинкой-фоном
   (ui_fx.js), его фон трогать нельзя — иначе вместо значка пустой кружок. */
.card-combat-badges > .ccb-atk {
    color: #ffb15c !important;
    background: rgba(255, 140, 50, 0.14) !important;
    border-color: rgba(255, 150, 70, 0.42) !important;
}
.card-combat-badges > .ccb-hp {
    color: #ff6f86 !important;
    background: rgba(255, 77, 109, 0.14) !important;
    border-color: rgba(255, 99, 125, 0.42) !important;
}
/* светлые форматы — те же цвета, темнее для контраста */
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .card-combat-badges > .ccb-atk,
:is(#_, .cf-preview)[data-cfmt="photo"] .card-combat-badges > .ccb-atk { color: #c2410c !important; background: rgba(234, 88, 12, 0.10) !important; border-color: rgba(194, 65, 12, 0.35) !important; }
html[data-cfmt="photo"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .card-combat-badges > .ccb-hp,
:is(#_, .cf-preview)[data-cfmt="photo"] .card-combat-badges > .ccb-hp { color: #d1294a !important; background: rgba(225, 29, 72, 0.10) !important; border-color: rgba(209, 41, 74, 0.35) !important; }
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .card-combat-badges > .ccb-atk,
:is(#_, .cf-preview)[data-cfmt="comic"] .card-combat-badges > .ccb-atk { background: #ffb15c !important; color: #0a0a0a !important; border: 1.5px solid #0a0a0a !important; border-radius: 3px !important; box-shadow: 1.5px 1.5px 0 #0a0a0a; }
html[data-cfmt="comic"] :is(#cards-grid, #set-binder-grid, #character-details-versions) .card-combat-badges > .ccb-hp,
:is(#_, .cf-preview)[data-cfmt="comic"] .card-combat-badges > .ccb-hp { background: #ff7d93 !important; color: #0a0a0a !important; border: 1.5px solid #0a0a0a !important; border-radius: 3px !important; box-shadow: 1.5px 1.5px 0 #0a0a0a; }
html[data-cfmt="comic"] :is(#cards-grid.cols-3, #set-binder-grid, #character-details-versions .cols-3) .card-combat-badges > :is(.ccb-atk, .ccb-hp),
:is(#_, .cf-preview).cols-3[data-cfmt="comic"] .card-combat-badges > :is(.ccb-atk, .ccb-hp) { border-width: 1px !important; box-shadow: none; }