/* ============ PERSONS.CSS — блок актёров/состава под дизайн Kinogo ============
   HTML блока (.episodes-modern-container.ep-persons-scope.theme-site) НЕ меняется.
   Подключать ПОСЛЕ common.css и после оригинальных стилей блока.
   ============ */

/* --- Палитра: переопределяем --ep-* под токены дизайна --- */
.episodes-modern-container.ep-persons-scope.theme-site {
    --ep-bg: var(--bg-secondary);
    --ep-text: var(--text-main);
    --ep-text-muted: var(--text-muted);
    --ep-card-bg: rgba(0, 0, 0, 0.15);          /* как .upd-item / .comm-item */
    --ep-card-text: var(--text-main);
    --ep-accent: var(--accent-hover);            /* яркий акцент для текста/ссылок/бордингов */
    --ep-on-accent: #fff;
    --ep-border: var(--border-color);
    --ep-radius: var(--border-radius);
    --ep-container-radius: var(--border-radius);
    --ep-container-padding: 20px;
    --ep-container-shadow: var(--shadow);
    --ep-player-shadow: none;
    --ep-card-shadow: none;
    --ep-card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    --ep-card-hover-transform: translateY(-2px);
    --ep-poster-bg: rgba(255, 255, 255, 0.06);
    --ep-dropdown-bg: var(--bg-secondary);
    --ep-dropdown-text: var(--text-main);
    --ep-control-bg: rgba(255, 255, 255, 0.05);
    --ep-arrow-bg: var(--bg-secondary);
    --ep-arrow-color: var(--text-main);
    --ep-title-weight: 700;
    --ep-badge-transform: none;
    --ep-badge-letter: 0.2px;
    --ep-info-bg: rgba(44, 60, 115, 0.3);       /* акцентная подложка, как в .important-note */

    /* сам блок — панель в стиле .sidebar-block */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
    color: var(--text-main);
}

/* --- Заголовки групп (как .nav-subtitle в сайдбаре) --- */
.episodes-modern-container.ep-persons-scope .ep-role-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 2px;
}

/* Счётчик ролей — бейдж в палитре */
.episodes-modern-container.ep-persons-scope .ep-role-count {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 10px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
}

/* --- Карточки людей (паттерн .upd-item / .comm-item) --- */
.episodes-modern-container.ep-persons-scope .ep-cast-item {
    background: rgba(0, 0, 0, 0.15);
    border-color: var(--border-color);
    border-radius: 6px;
    box-shadow: none;
    transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.episodes-modern-container.ep-persons-scope .ep-cast-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-hover);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* Фото / плейсхолдер */
.episodes-modern-container.ep-persons-scope .ep-cast-photo {
    background: linear-gradient(135deg, #232b45, #141a2e);
    border: 1px solid var(--border-color);
}
.episodes-modern-container.ep-persons-scope .ep-cast-photo img {
    transition: transform 0.3s;
}
.episodes-modern-container.ep-persons-scope .ep-cast-item:hover .ep-cast-photo img {
    transform: scale(1.08);
}

/* Инициалы — круг на --accent (как .comm-avatar) */
.episodes-modern-container.ep-persons-scope .ep-cast-initials {
    background: var(--accent);
    color: #fff;
    font-size: 16px;
}

/* Имена, оригинальные имена, роли, персонажи */
.episodes-modern-container.ep-persons-scope .ep-cast-name { color: #fff; }
.episodes-modern-container.ep-persons-scope .ep-cast-name:hover { color: var(--text-muted); }
.episodes-modern-container.ep-persons-scope .ep-cast-name-en { color: var(--text-muted); }
.episodes-modern-container.ep-persons-scope .ep-cast-role {
    color: var(--green);
    font-size: 11px;
    margin-top: 3px;
}
.episodes-modern-container.ep-persons-scope .ep-cast-character {
    color: var(--text-muted);
    font-size: 12px;
}

/* Ссылки на страницы персонажей (если встречаются в блоке) */
.episodes-modern-container.ep-persons-scope .ep-person-link {
    color: var(--accent-hover);
    border-bottom-color: transparent;
}
.episodes-modern-container.ep-persons-scope .ep-person-link:hover {
    color: #fff;
    opacity: 1;
    border-bottom-color: currentColor;
}
.episodes-modern-container.ep-persons-scope .ep-character-name {
    color: var(--text-muted);
    opacity: 1;
}

/* Заголовок секции «Актёры/Состав» (если есть .ep-persons-header) */
.episodes-modern-container.ep-persons-scope .ep-persons-header { margin-bottom: 16px; }
.episodes-modern-container.ep-persons-scope .ep-persons-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}
.episodes-modern-container.ep-persons-scope .ep-persons-header-icon { color: var(--accent-hover); }

/* Сетка: чуть шире карточки под контент */
.episodes-modern-container.ep-persons-scope .ep-cast-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}
.episodes-modern-container.ep-persons-scope .ep-persons-by-role { gap: 22px; }

/* --- Адаптив --- */
@media (max-width: 480px) {
    .episodes-modern-container.ep-persons-scope { padding: 15px; }
    .episodes-modern-container.ep-persons-scope .ep-cast-grid { grid-template-columns: 1fr; }
}

/* Если браузер без color-mix (fallback оригинала) — тоже в нашу палитру */
@supports not (color: color-mix(in srgb, currentColor 6%, transparent)) {
    .episodes-modern-container.ep-persons-scope.theme-site {
        --ep-text-muted: var(--text-muted);
        --ep-card-bg: rgba(0, 0, 0, 0.15);
        --ep-border: var(--border-color);
        --ep-poster-bg: rgba(255, 255, 255, 0.06);
        --ep-control-bg: rgba(255, 255, 255, 0.05);
        --ep-info-bg: rgba(44, 60, 115, 0.3);
    }
}

.episodes-modern-container {
    --ep-dropdown-text: var(--ep-text);
    --ep-bg: linear-gradient(180deg,#fbfbfd,#f5f5f7);
    --ep-text: #1d1d1f;
    --ep-text-muted: rgba(29,29,31,.55);
    --ep-card-bg: #fff;
    --ep-card-text: #1d1d1f;
    --ep-accent: #6366f1;
    --ep-on-accent: #fff;
    --ep-border: rgba(0,0,0,.06);
    --ep-radius: 18px;
    --ep-container-radius: 24px;
    --ep-container-padding: 40px;
    --ep-container-shadow: 0 1px 3px rgba(0,0,0,.04);
    --ep-player-shadow: 0 8px 30px rgba(0,0,0,.06);
    --ep-card-shadow: 0 1px 3px rgba(0,0,0,.04);
    --ep-card-hover-shadow: 0 16px 40px rgba(0,0,0,.1);
    --ep-card-hover-transform: translateY(-4px);
    --ep-poster-bg: linear-gradient(135deg,#e0e7ff,#c7d2fe);
    --ep-dropdown-bg: #fff;
    --ep-control-bg: rgba(0,0,0,.04);
    --ep-arrow-bg: #fff;
    --ep-arrow-color: #1d1d1f;
    --ep-arrow-size: 40px;
    --ep-arrow-radius: 50%;
    --ep-title-weight: 600;
    --ep-title-transform: none;
    --ep-badge-transform: none;
    --ep-badge-letter: -.2px;
    --ep-info-bg: rgba(99,102,241,.07);
    box-sizing: border-box
}

.episodes-modern-container *,.episodes-modern-container *::before,.episodes-modern-container *::after {
    box-sizing: border-box
}

.episodes-modern-container.theme-site {
    --ep-bg: transparent;
    --ep-text: inherit;
    --ep-text-muted: color-mix(in srgb, currentColor 62%, transparent);
    --ep-card-bg: var(--surface, var(--block-bg, var(--card-bg, color-mix(in srgb, currentColor 6%, transparent))));
    --ep-card-text: inherit;
    --ep-accent: var(--accent, var(--color-accent, var(--link-color, #3b82f6)));
    --ep-on-accent: var(--accent-ink, var(--accent-text, #fff));
    --ep-border: var(--line, var(--border-color, color-mix(in srgb, currentColor 16%, transparent)));
    --ep-radius: 14px;
    --ep-container-radius: 0px;
    --ep-container-padding: 0px;
    --ep-container-shadow: none;
    --ep-player-shadow: none;
    --ep-card-shadow: none;
    --ep-card-hover-shadow: 0 6px 20px rgba(0,0,0,.12);
    --ep-card-hover-transform: translateY(-2px);
    --ep-poster-bg: color-mix(in srgb, currentColor 10%, transparent);
    --ep-dropdown-bg: var(--surface, var(--block-bg, var(--card-bg, Canvas)));
    --ep-dropdown-text: color-mix(in srgb, var(--surface, var(--block-bg, var(--card-bg))) 0%, currentColor);
    --ep-control-bg: color-mix(in srgb, currentColor 7%, transparent);
    --ep-arrow-bg: var(--surface, var(--block-bg, var(--card-bg, Canvas)));
    --ep-arrow-color: color-mix(in srgb, var(--surface, var(--block-bg, var(--card-bg))) 0%, currentColor);
    --ep-arrow-size: 38px;
    --ep-arrow-radius: 50%;
    --ep-title-weight: 600;
    --ep-info-bg: color-mix(in srgb, currentColor 6%, transparent);
    color: inherit
}

@supports not (color: color-mix(in srgb, currentColor 6%, transparent)) {
    .episodes-modern-container.theme-site {
        --ep-text-muted:rgba(127,127,127,.95);
        --ep-card-bg: rgba(127,127,127,.08);
        --ep-border: rgba(127,127,127,.32);
        --ep-poster-bg: rgba(127,127,127,.12);
        --ep-control-bg: rgba(127,127,127,.09);
        --ep-info-bg: rgba(127,127,127,.08)
    }
}

.episodes-modern-container.theme-cinema {
    --ep-bg: linear-gradient(180deg,#0c0c0e,#050505);
    --ep-text: #fff;
    --ep-text-muted: rgba(255,255,255,.55);
    --ep-card-bg: #171717;
    --ep-card-text: #fff;
    --ep-accent: #e50914;
    --ep-on-accent: #fff;
    --ep-border: rgba(255,255,255,.06);
    --ep-radius: 4px;
    --ep-container-radius: 0px;
    --ep-container-padding: 30px;
    --ep-container-shadow: none;
    --ep-player-shadow: 0 20px 60px rgba(229,9,20,.18);
    --ep-card-shadow: 0 8px 24px rgba(0,0,0,.6);
    --ep-card-hover-shadow: 0 16px 40px rgba(0,0,0,.8);
    --ep-card-hover-transform: scale(1.04);
    --ep-poster-bg: linear-gradient(135deg,#1f1f1f,#0a0a0a);
    --ep-dropdown-bg: rgba(15,15,15,.97);
    --ep-control-bg: rgba(255,255,255,.06);
    --ep-arrow-bg: rgba(0,0,0,.75);
    --ep-arrow-color: #fff;
    --ep-arrow-size: 50px;
    --ep-arrow-radius: 4px;
    --ep-title-weight: 700;
    --ep-badge-transform: uppercase;
    --ep-badge-letter: 1.5px;
    --ep-info-bg: rgba(229,9,20,.06)
}

.episodes-modern-container.theme-neon {
    --ep-bg: #0a0a14;
    --ep-text: #0ff;
    --ep-text-muted: rgba(0,255,255,.55);
    --ep-card-bg: #0f0f1f;
    --ep-card-text: #0ff;
    --ep-accent: #0ff;
    --ep-on-accent: #0a0a14;
    --ep-border: rgba(0,255,255,.25);
    --ep-radius: 0px;
    --ep-container-radius: 0px;
    --ep-container-padding: 30px;
    --ep-container-shadow: 0 0 60px rgba(0,255,255,.12),inset 0 0 0 1px rgba(0,255,255,.15);
    --ep-player-shadow: 0 0 30px rgba(0,255,255,.35),inset 0 0 0 1px #0ff;
    --ep-card-shadow: inset 0 0 0 1px rgba(0,255,255,.15);
    --ep-card-hover-shadow: 0 0 25px rgba(0,255,255,.5),inset 0 0 0 1px #0ff;
    --ep-card-hover-transform: translateY(-2px);
    --ep-poster-bg: linear-gradient(135deg,#1a0a2e,#16213e);
    --ep-dropdown-bg: rgba(10,10,20,.97);
    --ep-control-bg: rgba(0,255,255,.06);
    --ep-arrow-bg: transparent;
    --ep-arrow-color: #0ff;
    --ep-arrow-size: 36px;
    --ep-arrow-radius: 0px;
    --ep-title-weight: 500;
    --ep-title-transform: uppercase;
    --ep-badge-transform: uppercase;
    --ep-badge-letter: 2px;
    --ep-info-bg: rgba(0,255,255,.05)
}

.episodes-modern-container.theme-minimal {
    --ep-bg: #fff;
    --ep-text: #1f2937;
    --ep-text-muted: rgba(31,41,55,.5);
    --ep-card-bg: #fff;
    --ep-card-text: #1f2937;
    --ep-accent: #e54c3c;
    --ep-on-accent: #fff;
    --ep-border: rgba(0,0,0,.08);
    --ep-radius: 6px;
    --ep-container-radius: 0px;
    --ep-container-padding: 20px;
    --ep-container-shadow: none;
    --ep-player-shadow: none;
    --ep-card-shadow: none;
    --ep-card-hover-shadow: 0 3px 10px rgba(0,0,0,.08);
    --ep-card-hover-transform: translateY(-2px);
    --ep-poster-bg: #f3f4f6;
    --ep-dropdown-bg: #fff;
    --ep-control-bg: #fff;
    --ep-arrow-bg: #fff;
    --ep-arrow-color: #374151;
    --ep-arrow-size: 32px;
    --ep-arrow-radius: 50%;
    --ep-title-weight: 500;
    --ep-badge-transform: uppercase;
    --ep-badge-letter: .4px;
    --ep-info-bg: #f9fafb
}

.episodes-modern-container.theme-glass {
    --ep-bg: linear-gradient(135deg,#667eea,#764ba2 50%,#f093fb);
    --ep-text: #fff;
    --ep-text-muted: rgba(255,255,255,.65);
    --ep-card-bg: rgba(255,255,255,.12);
    --ep-card-text: #fff;
    --ep-accent: #fff;
    --ep-on-accent: #7c3aed;
    --ep-border: rgba(255,255,255,.25);
    --ep-radius: 20px;
    --ep-container-radius: 28px;
    --ep-container-padding: 35px;
    --ep-container-shadow: 0 30px 80px rgba(0,0,0,.2);
    --ep-player-shadow: 0 20px 60px rgba(0,0,0,.3);
    --ep-card-shadow: 0 8px 32px rgba(0,0,0,.1);
    --ep-card-hover-shadow: 0 20px 60px rgba(0,0,0,.25);
    --ep-card-hover-transform: translateY(-6px) scale(1.02);
    --ep-poster-bg: rgba(255,255,255,.08);
    --ep-dropdown-bg: rgba(40,40,80,.95);
    --ep-control-bg: rgba(255,255,255,.12);
    --ep-arrow-bg: rgba(255,255,255,.18);
    --ep-arrow-color: #fff;
    --ep-arrow-size: 44px;
    --ep-badge-letter: 0;
    --ep-info-bg: rgba(255,255,255,.1)
}

.episodes-modern-container.theme-custom {
    --ep-bg: #fff;
    --ep-text: #1f2937;
    --ep-text-muted: rgba(31,41,55,.5);
    --ep-card-bg: #fff;
    --ep-card-text: #1f2937;
    --ep-accent: #6366f1;
    --ep-on-accent: #fff;
    --ep-border: rgba(0,0,0,.08);
    --ep-radius: 12px;
    --ep-container-radius: 12px;
    --ep-container-padding: 30px;
    --ep-container-shadow: 0 10px 40px rgba(0,0,0,.1);
    --ep-player-shadow: 0 8px 30px rgba(0,0,0,.15);
    --ep-card-shadow: 0 4px 15px rgba(0,0,0,.1);
    --ep-card-hover-shadow: 0 12px 30px rgba(0,0,0,.18);
    --ep-poster-bg: #fff;
    --ep-dropdown-bg: #fff;
    --ep-control-bg: rgba(127,127,127,.08);
    --ep-arrow-bg: #fff;
    --ep-arrow-color: #1f2937;
    --ep-badge-letter: 0;
    --ep-info-bg: rgba(127,127,127,.08)
}

.mi-ep {
    max-width: 1200px;
    margin: 30px auto;
    padding: var(--ep-container-padding);
    background: var(--ep-bg);
    color: var(--ep-text);
    border-radius: var(--ep-container-radius);
    box-shadow: var(--ep-container-shadow);
    position: relative
}

.mi-ep button {
    font: inherit
}

.mi-ep-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px
}

.mi-ep-source {
    appearance: none;
    height: auto;
    min-height: 0;
    margin: 0;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    border: 1px solid var(--ep-border);
    background: var(--ep-control-bg);
    color: inherit;
    padding: 8px 16px;
    border-radius: var(--ep-radius);
    cursor: pointer;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color .2s,background .2s,color .2s
}

.mi-ep-source:hover {
    background: var(--ep-control-bg);
    color: inherit;
    border-color: var(--ep-accent)
}

.mi-ep-source:focus-visible,.custom-select-trigger:focus-visible,.fake-player-play-btn:focus-visible,.episode-card:focus-visible,.slider-arrow:focus-visible,.ep-toast-btn:focus-visible {
    outline: 2px solid var(--ep-accent);
    outline-offset: 2px
}

.mi-ep-source.is-active {
    background: var(--ep-accent);
    border-color: var(--ep-accent);
    color: var(--ep-on-accent)
}

.episodes-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap
}

.episodes-controls:empty {
    display: none
}

.control-group {
    flex: 1;
    min-width: 200px
}

.control-group[hidden],.mi-ep [hidden] {
    display: none!important
}

.mi-ep-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .7
}

.custom-select {
    position: relative;
    width: 100%;
    user-select: none
}

.custom-select-trigger {
    height: auto;
    min-height: 0;
    margin: 0;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: inherit;
    width: 100%;
    padding: 12px 16px;
    background: var(--ep-control-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    transition: border-color .2s,background .2s
}

.custom-select-trigger:hover,.custom-select.is-open .custom-select-trigger {
    background: var(--ep-control-bg);
    color: inherit;
    border-color: var(--ep-accent)
}

.custom-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.custom-select-arrow {
    flex-shrink: 0;
    transition: transform .2s;
    opacity: .6
}

.custom-select.is-open .custom-select-arrow {
    transform: rotate(180deg)
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--ep-dropdown-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    color: var(--ep-dropdown-text, CanvasText)
}

.custom-select-option {
    padding: 10px 14px;
    border-radius: calc(var(--ep-radius) * .5);
    cursor: pointer;
    font-size: 14px;
    transition: background .15s,color .15s
}

.custom-select-option:hover,.custom-select-option.is-focus {
    background: rgba(127,127,127,.14)
}

.custom-select-option.selected {
    background: var(--ep-accent);
    color: var(--ep-on-accent);
    font-weight: 600
}

.mi-ep-msg {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: var(--ep-radius);
    background: var(--ep-info-bg);
    border: 1px solid var(--ep-border);
    font-size: 14px
}

.episodes-player {
    margin-bottom: 30px;
    border-radius: var(--ep-radius);
    overflow: hidden;
    box-shadow: var(--ep-player-shadow)
}

.player-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #000;
    border-radius: var(--ep-radius)
}

.player-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--ep-radius)
}

.fake-player-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .3s
}

.fake-player-overlay.hidden {
    opacity: 0;
    pointer-events: none
}

.fake-player-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.fake-player-play-btn {
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    line-height: 1;
    text-transform: none;
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--ep-accent);
    border: 0;
    cursor: pointer;
    transition: transform .25s;
    display: flex;
    align-items: center;
    justify-content: center
}

.fake-player-play-btn:hover {
    background: var(--ep-accent);
    transform: scale(1.1)
}

.fake-player-play-btn svg {
    width: 32px;
    height: 32px;
    transform: translateX(2px);
    fill: var(--ep-on-accent)
}

.episodes-slider-wrapper {
    position: relative;
    margin: 0 50px 30px;
    --slider-gap: 15px;
    --slider-cards: 4
}

.episodes-slider {
    display: flex;
    gap: var(--slider-gap);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5px;
    padding: 15px 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--ep-border) transparent;
    -webkit-overflow-scrolling: touch
}

.episodes-slider::-webkit-scrollbar {
    height: 6px
}

.episodes-slider::-webkit-scrollbar-thumb {
    background: var(--ep-border);
    border-radius: 6px
}

.episode-card {
    height: auto;
    min-height: 0;
    margin: 0;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: inherit;
    flex: 0 0 calc((100% - (var(--slider-cards) - 1) * var(--slider-gap)) / var(--slider-cards));
    display: block;
    padding: 0;
    text-align: left;
    scroll-snap-align: start;
    cursor: pointer;
    border-radius: var(--ep-radius);
    background: var(--ep-card-bg);
    color: var(--ep-card-text);
    border: 1px solid var(--ep-border);
    box-shadow: var(--ep-card-shadow);
    overflow: hidden;
    transition: transform .25s,box-shadow .25s,border-color .25s
}

.episode-card:hover {
    background: var(--ep-card-bg);
    color: var(--ep-card-text);
    transform: var(--ep-card-hover-transform);
    box-shadow: var(--ep-card-hover-shadow);
    border-color: var(--ep-accent)
}

.episode-card.active {
    border-color: var(--ep-accent);
    box-shadow: 0 0 0 2px var(--ep-accent)
}

.episode-poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--ep-poster-bg);
    overflow: hidden
}

.episode-poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s
}

.episode-card:hover .episode-poster img {
    transform: scale(1.07)
}

.episode-poster-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 36px;
    font-weight: 800;
    color: rgba(127,127,127,.4)
}

.episode-status {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px
}

.episode-status.aired {
    background: rgba(22,163,74,.92)
}

.episode-status.upcoming {
    background: rgba(180,83,9,.92)
}

.episode-status.announced {
    background: rgba(71,85,105,.92)
}

.episode-watched-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg,#22c55e,#16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0,0,0,.35)
}

.episode-watched-badge svg {
    width: 14px;
    height: 14px;
    display: block
}

.episode-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0,0,0,.45);
    z-index: 3;
    overflow: hidden;
    pointer-events: none
}

.episode-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--ep-accent);
    box-shadow: 0 0 6px var(--ep-accent);
    transition: width .35s;
    border-radius: 0 2px 2px 0
}

.episode-card.active.playing .episode-progress-fill {
    animation: ep-progress-pulse 1.6s ease-in-out infinite
}

@keyframes ep-progress-pulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .55
    }
}

.episode-details {
    display: block;
    padding: 14px 14px 16px
}

.episode-number {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ep-accent);
    margin-bottom: 4px;
    text-transform: var(--ep-badge-transform);
    letter-spacing: var(--ep-badge-letter)
}

.episode-title {
    font-size: 14px;
    font-weight: var(--ep-title-weight);
    color: var(--ep-card-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 38px;
    line-height: 1.4;
    text-transform: var(--ep-title-transform)
}

.episode-date {
    display: block;
    font-size: 11px;
    color: var(--ep-text-muted);
    margin-top: 6px
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--ep-arrow-size);
    height: var(--ep-arrow-size);
    border-radius: var(--ep-arrow-radius);
    background: var(--ep-arrow-bg);
    color: var(--ep-arrow-color, CanvasText);
    border: 1px solid var(--ep-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
    padding: 0;
    margin: 0;
    min-height: 0;
    min-width: 0;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1
}

.slider-arrow:hover {
    background: var(--ep-accent);
    color: var(--ep-on-accent);
    border-color: var(--ep-accent);
    transform: translateY(-50%) scale(1.08)
}

.slider-arrow-left {
    left: -45px
}

.slider-arrow-right {
    right: -45px
}

.episode-info {
    margin-top: 30px;
    padding: 28px 30px;
    background: var(--ep-info-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius)
}

.episode-info-title {
    font-size: 22px;
    font-weight: var(--ep-title-weight);
    margin: 0 0 14px;
    line-height: 1.3
}

.episode-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap
}

.episode-meta:empty {
    display: none
}

.meta-badge {
    display: inline-flex;
    align-items: center;
    background: var(--ep-control-bg);
    border: 1px solid var(--ep-border);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ep-accent)
}

.episode-info-desc {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    color: var(--ep-text-muted)
}

.mi-ep-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px
}

.ep-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--ep-dropdown-bg);
    color: var(--ep-dropdown-text, CanvasText);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 18px 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    z-index: 10000;
    max-width: 360px;
    min-width: 280px;
    animation: ep-toast-in .3s ease-out
}

.ep-toast.hide {
    animation: ep-toast-out .3s ease-out forwards
}

@keyframes ep-toast-in {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes ep-toast-out {
    from {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(20px)
    }
}

.ep-toast-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--ep-accent);
    margin-bottom: 6px
}

.ep-toast-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.35
}

.ep-toast-time {
    font-size: 13px;
    color: var(--ep-text-muted);
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums
}

.ep-toast-actions {
    display: flex;
    gap: 8px
}

.ep-toast-btn {
    height: auto;
    margin: 0;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.2;
    flex: 1;
    min-height: 38px;
    padding: 0 14px;
    border-radius: calc(var(--ep-radius) * .6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: filter .2s,background .2s
}

.ep-toast-btn-primary {
    background: var(--ep-accent);
    color: var(--ep-on-accent)
}

.ep-toast-btn-primary:hover {
    background: var(--ep-accent);
    color: var(--ep-on-accent);
    filter: brightness(1.1)
}

.ep-toast-btn-secondary {
    background: transparent;
    color: var(--ep-text);
    border-color: var(--ep-border)
}

.ep-toast-btn-secondary:hover {
    background: var(--ep-control-bg);
    color: var(--ep-dropdown-text, CanvasText)
}

.ep-toast-countdown-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,.55);
    transition: width 10s linear
}

.ep-toast-countdown-bar.is-running {
    width: 0
}

.theme-cinema .episode-progress {
    height: 4px
}

.theme-cinema .episode-watched-badge {
    background: linear-gradient(135deg,#e50914,#b8070f)
}

.theme-cinema .episode-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 50%,rgba(0,0,0,.85));
    pointer-events: none
}

.theme-cinema .episodes-controls {
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: 22px
}

.theme-aurora .episodes-slider {
    padding: 20px 5px
}

.theme-aurora .episode-card,.theme-aurora .slider-arrow,.theme-aurora .custom-select-trigger {
    border-color: transparent
}

.theme-aurora .episode-info {
    background: #fff;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,.04)
}

.theme-neon .episode-title,.theme-neon .episode-number,.theme-neon .custom-select-value,.theme-neon .episode-info-title {
    text-shadow: 0 0 8px currentColor
}

.theme-neon .custom-select-trigger {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px
}

.theme-neon .episode-card.active {
    animation: neon-pulse 1.8s ease-in-out infinite
}

@keyframes neon-pulse {
    0%,100% {
        box-shadow: 0 0 0 1px var(--ep-accent),0 0 12px rgba(0,255,255,.4)
    }

    50% {
        box-shadow: 0 0 0 1px var(--ep-accent),0 0 24px rgba(0,255,255,.8)
    }
}

.theme-neon .slider-arrow {
    border-color: var(--ep-accent);
    box-shadow: 0 0 12px rgba(0,255,255,.3)
}

.theme-neon .fake-player-play-btn {
    background: transparent;
    border: 2px solid var(--ep-accent);
    box-shadow: 0 0 20px rgba(0,255,255,.5),inset 0 0 20px rgba(0,255,255,.2)
}

.theme-neon .fake-player-play-btn svg {
    fill: var(--ep-accent)
}

.theme-neon .meta-badge {
    background: transparent;
    border-color: var(--ep-accent)
}

.theme-neon .episode-watched-badge {
    background: transparent;
    border: 1px solid var(--ep-accent);
    box-shadow: 0 0 12px var(--ep-accent)
}

.theme-neon .episode-watched-badge path {
    stroke: var(--ep-accent)
}

.theme-neon .episode-progress-fill {
    box-shadow: 0 0 10px var(--ep-accent),0 0 4px var(--ep-accent)
}

.theme-minimal .episode-progress {
    height: 2px;
    background: rgba(0,0,0,.1)
}

.theme-minimal .episode-progress-fill {
    box-shadow: none
}

.theme-minimal .episode-title {
    font-size: 13px;
    min-height: 32px
}

.theme-minimal .episode-details {
    padding: 10px 12px 12px
}

.theme-minimal .episodes-slider-wrapper {
    margin: 0 40px 30px;
    --slider-gap: 12px
}

.theme-minimal .slider-arrow-left {
    left: -16px
}

.theme-minimal .slider-arrow-right {
    right: -16px
}

.theme-minimal .episodes-player {
    border: 1px solid var(--ep-border);
    border-radius: 12px
}

.theme-minimal .player-frame,.theme-minimal .player-frame iframe {
    border-radius: 12px
}

.theme-glass .mi-ep,.theme-glass .episode-card,.theme-glass .custom-select-trigger,.theme-glass .custom-select-dropdown,.theme-glass .slider-arrow,.theme-glass .episode-info {
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%)
}

.theme-glass .episode-card:hover {
    background: rgba(255,255,255,.18)
}

.theme-glass .custom-select-option.selected {
    background: rgba(255,255,255,.25);
    color: #fff
}

.theme-glass .meta-badge {
    color: #fff;
    background: rgba(255,255,255,.18)
}

.theme-glass .fake-player-play-btn {
    background: rgba(255,255,255,.25);
    border: 2px solid rgba(255,255,255,.5)
}

.theme-glass .fake-player-play-btn svg {
    fill: #fff
}

@media (max-width: 1199px) {
    .episodes-slider-wrapper {
        --slider-cards:3
    }
}

@media (max-width: 768px) {
    .episodes-slider-wrapper {
        --slider-cards:2;
        --slider-gap: 12px
    }

    .mi-ep {
        padding: 18px;
        margin: 20px auto
    }

    .episodes-controls {
        flex-direction: column;
        gap: 12px
    }

    .control-group {
        min-width: 0;
        width: 100%
    }

    .episodes-slider-wrapper,.theme-minimal .episodes-slider-wrapper {
        margin: 0 10px 30px
    }

    .slider-arrow-left,.theme-minimal .slider-arrow-left {
        left: -10px;
        width: 32px;
        height: 32px
    }

    .slider-arrow-right,.theme-minimal .slider-arrow-right {
        right: -10px;
        width: 32px;
        height: 32px
    }

    .episode-info {
        padding: 20px
    }

    .episode-info-title {
        font-size: 18px
    }

    .fake-player-play-btn {
        width: 64px;
        height: 64px
    }
}

@media (max-width: 480px) {
    .episodes-slider-wrapper {
        --slider-cards:1;
        --slider-gap: 10px
    }

    .mi-ep {
        padding: 12px
    }
}

@media (max-width: 600px) {
    .ep-toast {
        left:12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        min-width: 0
    }
}

@media (prefers-reduced-motion:reduce) {
    .mi-ep *,.ep-toast {
        animation: none!important;
        transition: none!important
    }
}

.ep-persons-flat-scope,.ep-sub-scope {
    display: contents
}

.ep-persons-by-role {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.ep-role-group {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.ep-role-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: inherit;
    opacity: .8;
    padding-bottom: 8px;
    border-bottom: 1px solid currentColor
}

.ep-role-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--ep-info-bg);
    color: var(--ep-accent);
    font-size: 10px;
    font-weight: 800;
    border-radius: 20px
}

.ep-cast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    gap: 10px
}

.ep-cast-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ep-card-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 10px 14px 10px 10px;
    min-width: 0;
    box-shadow: var(--ep-card-shadow);
    transition: border-color .18s,box-shadow .18s
}

.ep-cast-item:hover {
    border-color: var(--ep-accent);
    box-shadow: var(--ep-card-hover-shadow)
}

.ep-cast-photo {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ep-poster-bg)
}

.ep-cast-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.ep-cast-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--ep-on-accent);
    background: var(--ep-accent)
}

.ep-cast-info {
    min-width: 0;
    flex: 1
}

.ep-cast-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ep-card-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s
}

.ep-cast-name:hover {
    color: var(--ep-accent)
}

.ep-cast-name-en,.ep-cast-character {
    font-size: 11px;
    color: var(--ep-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ep-cast-character {
    font-style: italic
}

.ep-cast-role {
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
    text-transform: var(--ep-badge-transform);
    letter-spacing: var(--ep-badge-letter);
    color: var(--ep-accent)
}

.ep-person-link {
    color: var(--ep-accent);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color .18s,opacity .18s
}

.ep-person-link:hover {
    border-bottom-color: currentColor;
    opacity: .75
}

.ep-character-name {
    color: inherit;
    opacity: .75;
    font-style: italic;
    font-size: .9em
}

.theme-glass .ep-cast-initials,.theme-glass .ep-person-initials,.theme-glass .ep-person-photo-placeholder-detail {
    color: #7c3aed;
    background: rgba(255,255,255,.85)
}

.theme-glass .ep-role-count,.theme-glass .role-badge {
    color: #7c3aed;
    background: rgba(255,255,255,.2)
}

.theme-glass .ep-cast-role,.theme-glass .ep-person-link {
    color: #7c3aed
}

.ep-persons-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px
}

.ep-persons-header-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--ep-accent)
}

.ep-persons-title {
    font-size: 22px;
    font-weight: 700;
    color: inherit;
    margin: 0;
    line-height: 1.25
}

.ep-persons-filters {
    background: var(--ep-card-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--ep-card-shadow)
}

.ep-filters-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3,1fr) auto;
    gap: 12px;
    align-items: end
}

.ep-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.ep-filter-group label,.ep-filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ep-text-muted)
}

.ep-persons-filters .ep-filter-input,.ep-persons-filters .ep-filter-select {
    padding: 9px 12px;
    background: var(--ep-control-bg);
    border: 1px solid var(--ep-border);
    border-radius: calc(var(--ep-radius) * .65);
    font: inherit;
    font-size: 13px;
    color: var(--ep-text);
    width: 100%;
    transition: border-color .18s,box-shadow .18s
}

.ep-persons-filters .ep-filter-input:focus,.ep-persons-filters .ep-filter-select:focus {
    outline: none;
    border-color: var(--ep-accent);
    box-shadow: 0 0 0 3px var(--ep-info-bg)
}

.ep-filter-btn {
    height: auto;
    min-height: 0;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
    padding: 9px 20px;
    background: var(--ep-accent);
    color: var(--ep-on-accent);
    border: 0;
    border-radius: calc(var(--ep-radius) * .65);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .18s
}

.ep-filter-btn:hover {
    background: var(--ep-accent);
    color: var(--ep-on-accent);
    opacity: .88
}

.ep-persons-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px
}

.ep-persons-count {
    font-size: 13px;
    color: inherit;
    opacity: .8;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.ep-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ep-accent);
    text-decoration: none;
    padding: 4px 10px;
    background: var(--ep-info-bg);
    border-radius: 20px
}

.ep-sort-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.ep-sort-btn {
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ep-card-text);
    background: var(--ep-card-bg);
    border: 1px solid var(--ep-border);
    text-decoration: none;
    transition: background .18s,color .18s
}

.ep-sort-btn:hover {
    border-color: var(--ep-accent);
    color: var(--ep-accent)
}

.ep-sort-btn.active {
    background: var(--ep-accent);
    color: var(--ep-on-accent)
}

.ep-persons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    gap: 14px
}

.ep-person-card {
    background: var(--ep-card-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ep-card-shadow);
    transition: border-color .2s,box-shadow .2s,transform .18s
}

.ep-person-card:hover {
    border-color: var(--ep-accent);
    box-shadow: var(--ep-card-hover-shadow);
    transform: var(--ep-card-hover-transform)
}

.ep-person-photo {
    width: 100%;
    aspect-ratio: 4/5;
    position: relative;
    overflow: hidden;
    background: var(--ep-poster-bg)
}

.ep-person-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s
}

.ep-person-card:hover .ep-person-photo img {
    transform: scale(1.06)
}

.ep-person-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 700;
    color: var(--ep-on-accent);
    background: var(--ep-accent);
    opacity: .85
}

.ep-person-info {
    padding: 11px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0
}

.ep-person-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ep-card-text);
    line-height: 1.3;
    margin: 0
}

.ep-person-profession,.ep-person-aliases {
    font-size: 11px;
    color: var(--ep-text-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ep-person-meta,.ep-person-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.ep-person-meta .meta-badge {
    padding: 2px 7px;
    font-size: 10px;
    border: 0;
    color: var(--ep-text-muted)
}

.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--ep-info-bg);
    color: var(--ep-accent);
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    letter-spacing: var(--ep-badge-letter);
    text-transform: var(--ep-badge-transform);
    white-space: nowrap
}

.ep-person-stats {
    font-size: 11px;
    color: var(--ep-text-muted);
    margin-top: auto;
    padding-top: 4px
}

.ep-persons-empty {
    text-align: center;
    padding: 72px 20px;
    color: inherit;
    opacity: .75
}

.ep-persons-empty svg {
    margin: 0 auto 14px;
    display: block;
    opacity: .25
}

.ep-persons-empty-text {
    font-size: 15px;
    font-weight: 500
}

.ep-persons-empty-sub {
    font-size: 13px;
    margin-top: 6px
}

.ep-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap
}

.ep-pagination .page-btn {
    padding: 7px 14px;
    border-radius: calc(var(--ep-radius) * .6);
    font-size: 13px;
    font-weight: 600;
    color: var(--ep-text);
    background: var(--ep-card-bg);
    border: 1px solid var(--ep-border);
    text-decoration: none;
    transition: border-color .18s,color .18s
}

.ep-pagination .page-btn:hover {
    border-color: var(--ep-accent);
    color: var(--ep-accent)
}

.ep-pagination .page-btn.active {
    background: var(--ep-accent);
    color: var(--ep-on-accent);
    border-color: transparent
}

.ep-pagination .page-dots {
    font-size: 13px;
    color: var(--ep-text-muted);
    padding: 0 4px
}

.ep-person-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ep-accent);
    text-decoration: none;
    margin-bottom: 28px;
    padding: 8px 18px;
    background: var(--ep-info-bg);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    transition: transform .18s
}

.ep-person-back:hover {
    transform: translateX(-4px)
}

.ep-person-header-card {
    background: var(--ep-card-bg);
    border: 1px solid var(--ep-border);
    border-left: 4px solid var(--ep-accent);
    border-radius: var(--ep-radius);
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--ep-card-shadow)
}

.ep-person-info-grid {
    display: grid;
    grid-template-columns: 200px minmax(0,1fr);
    gap: 36px;
    align-items: start
}

.ep-person-photo-detail,.ep-person-photo-placeholder-detail {
    width: 200px;
    height: 280px;
    border-radius: calc(var(--ep-radius) * 1.2);
    box-shadow: var(--ep-card-shadow)
}

.ep-person-photo-detail {
    object-fit: cover;
    display: block
}

.ep-person-photo-placeholder-detail {
    background: var(--ep-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ep-on-accent);
    font-size: 64px;
    font-weight: 700
}

.ep-person-name-heading {
    font-size: 32px;
    font-weight: 800;
    color: var(--ep-card-text);
    margin: 0 0 8px;
    line-height: 1.2;
    overflow-wrap: anywhere
}

.ep-person-name-en,.ep-person-age-text {
    font-size: 16px;
    color: var(--ep-text-muted);
    margin: 0 0 16px;
    font-weight: 500
}

.ep-person-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 12px;
    margin: 0 0 20px
}

.ep-meta-item {
    background: var(--ep-control-bg);
    border-left: 3px solid var(--ep-accent);
    padding: 12px 14px;
    border-radius: calc(var(--ep-radius) * .65);
    min-width: 0
}

.ep-meta-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--ep-accent);
    margin: 0 0 4px
}

.ep-meta-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ep-card-text);
    margin: 0;
    overflow-wrap: anywhere
}

.ep-person-aliases-block {
    margin-bottom: 18px
}

.ep-person-aliases-value {
    color: var(--ep-text-muted);
    line-height: 1.5;
    font-size: 14px
}

.ep-external-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ep-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 18px;
    padding: 6px 14px;
    background: var(--ep-info-bg);
    border-radius: 20px
}

.ep-person-bio-block {
    background: var(--ep-control-bg);
    border-radius: calc(var(--ep-radius) * .65);
    padding: 18px;
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--ep-card-text)
}

.ep-person-bio-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--ep-card-text);
    margin: 0 0 10px
}

.ep-person-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    gap: 14px;
    margin-bottom: 28px
}

.ep-stat-card {
    background: var(--ep-card-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 22px 16px;
    text-align: center;
    box-shadow: var(--ep-card-shadow)
}

.ep-stat-number {
    font-size: 26px;
    font-weight: 800;
    color: var(--ep-accent);
    margin-bottom: 6px
}

.ep-stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ep-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px
}

.ep-person-section {
    background: var(--ep-card-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--ep-card-shadow);
    color: var(--ep-card-text)
}

.ep-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ep-card-text);
    margin: 0 0 20px;
    padding-left: 12px;
    border-left: 3px solid var(--ep-accent)
}
/* --- grid news person --
.ep-person-movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    gap: 14px
}- */

.ep-person-movies-grid { 
	flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ep-facts-list,.ep-awards-list,.ep-family-list {
    display: grid;
    gap: 12px
}

.fact-item,.family-item,.award-item {
    background: var(--ep-control-bg);
    border-left: 3px solid var(--ep-accent);
    padding: 16px;
    border-radius: calc(var(--ep-radius) * .65);
    font-size: 14px;
    line-height: 1.65
}

.award-item {
    border-left-color: #d97706;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 14px;
    align-items: start
}

.award-icon {
    font-size: 22px;
    line-height: 1
}

.award-name,.family-type {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px
}

.family-type {
    font-size: 11px;
    color: var(--ep-accent);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px
}

.award-meta,.award-notes {
    font-size: 12px;
    color: var(--ep-text-muted)
}

.award-notes {
    margin-top: 6px;
    line-height: 1.5
}

.award-year {
    font-size: 13px;
    font-weight: 700;
    color: #d97706;
    white-space: nowrap
}

.family-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    gap: 6px;
    font-size: 13px
}

.family-meta strong {
    color: var(--ep-text-muted);
    font-weight: 600
}

.family-meta a {
    color: var(--ep-accent);
    text-decoration: none;
    font-weight: 600
}

@media (max-width: 768px) {
    .ep-filters-grid {
        grid-template-columns:1fr 1fr
    }

    .ep-persons-grid,.ep-person-movies-grid {
        grid-template-columns: repeat(auto-fill,minmax(140px,1fr))
    }

    .ep-persons-stats {
        flex-direction: column;
        align-items: flex-start
    }

    .ep-person-info-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center
    }

    .ep-person-photo-detail,.ep-person-photo-placeholder-detail {
        margin: 0 auto
    }

    .ep-person-name-heading {
        font-size: 26px
    }

    .ep-person-meta-grid {
        grid-template-columns: 1fr
    }

    .ep-person-stats-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .ep-meta-item {
        text-align: left
    }
}

@media (max-width: 600px) {
    .ep-cast-grid {
        grid-template-columns:1fr
    }
}

@media (max-width: 480px) {
    .ep-filters-grid {
        grid-template-columns:1fr
    }

    .ep-persons-grid {
        grid-template-columns: repeat(auto-fill,minmax(120px,1fr))
    }

    .ep-person-header-card {
        padding: 20px
    }

    .ep-person-stats-grid {
        grid-template-columns: 1fr
    }

    .ep-person-movies-grid {
        grid-template-columns: 1fr 1fr
    }

    .ep-person-section {
        padding: 16px
    }

    .award-item {
        grid-template-columns: auto minmax(0,1fr)
    }

    .award-year {
        grid-column: 2
    }
}

.ep-sub-wrap {
    display: inline-block;
    max-width: 100%
}

.ep-sub-btn {
    height: auto;
    min-height: 0;
    margin: 0;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    max-width: 100%;
    padding: 11px 20px 11px 14px;
    background: var(--ep-card-bg);
    color: var(--ep-card-text);
    border: 1.5px solid var(--ep-border);
    border-radius: calc(var(--ep-radius) + 6px);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--ep-card-shadow);
    transition: background .25s,border-color .25s,color .25s,box-shadow .28s,transform .2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none
}

.ep-sub-btn:focus-visible {
    outline: 2px solid var(--ep-accent);
    outline-offset: 3px
}

.ep-sub-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: calc(var(--ep-radius) * .55);
    background: var(--ep-info-bg);
    flex-shrink: 0;
    transition: background .25s,transform .3s
}

.ep-sub-icon svg {
    width: 17px;
    height: 17px
}

.ep-bell-off,.ep-bell-on {
    position: absolute;
    transition: opacity .22s,transform .28s
}

.ep-bell-on {
    opacity: 0;
    transform: scale(.5) rotate(-15deg)
}

.ep-sub-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 1.3em;
    overflow: hidden
}

.ep-sub-text-idle,.ep-sub-text-hover {
    display: block;
    line-height: 1.3;
    transition: transform .24s,opacity .2s
}

.ep-sub-text-hover {
    position: absolute;
    inset: 0;
    transform: translateY(110%);
    opacity: 0;
    white-space: nowrap
}

.ep-sub-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    flex-shrink: 0;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .25s,transform .3s
}

.ep-sub-check svg {
    width: 10px;
    height: 10px
}

.ep-sub-btn:not(.active):hover {
    background: var(--ep-card-bg);
    border-color: var(--ep-accent);
    color: var(--ep-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1)
}

.ep-sub-btn:not(.active):hover .ep-sub-icon {
    transform: rotate(-12deg) scale(1.12)
}

.ep-sub-btn.active,.ep-sub-btn.active:hover {
    background: var(--ep-accent);
    color: var(--ep-on-accent);
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(0,0,0,.18)
}

.ep-sub-btn.active .ep-bell-off {
    opacity: 0;
    transform: scale(.5) rotate(15deg)
}

.ep-sub-btn.active .ep-bell-on {
    opacity: 1;
    transform: none
}

.ep-sub-btn.active .ep-sub-icon {
    background: rgba(255,255,255,.18)
}

.ep-sub-btn.active .ep-sub-check {
    opacity: 1;
    transform: scale(1)
}

.ep-sub-btn.active:hover .ep-sub-text-idle {
    transform: translateY(-110%);
    opacity: 0
}

.ep-sub-btn.active:hover .ep-sub-text-hover {
    transform: none;
    opacity: 1
}

.ep-sub-btn.active:hover .ep-sub-check {
    opacity: 0
}

.ep-sub-btn:active {
    transform: scale(.96)
}

@keyframes ep-bell-ring {
    0% {
        transform: rotate(0)
    }

    15% {
        transform: rotate(-22deg) scale(1.15)
    }

    35% {
        transform: rotate(20deg) scale(1.15)
    }

    55% {
        transform: rotate(-14deg)
    }

    70% {
        transform: rotate(10deg)
    }

    85% {
        transform: rotate(-5deg)
    }

    100% {
        transform: rotate(0)
    }
}

.ep-sub-btn.ep-ringing .ep-sub-icon {
    animation: ep-bell-ring .6s forwards
}

.ep-sub-btn.ep-loading {
    pointer-events: none;
    opacity: .62
}

.ep-sub-guest {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--ep-info-bg);
    border-left: 3px solid var(--ep-accent);
    border-radius: var(--ep-radius);
    font-size: 13px;
    color: inherit
}

.ep-sub-guest-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: .55
}

.ep-sub-guest-icon svg {
    width: 16px;
    height: 16px
}

.ep-sub-guest a {
    color: var(--ep-accent);
    font-weight: 600;
    text-decoration: none
}

.ep-sub-guest a:hover {
    text-decoration: underline
}

.ep-sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(127,127,127,.25)
}

.ep-sub-title {
    font-size: 20px;
    font-weight: 700;
    color: inherit;
    margin: 0
}

.ep-sub-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.ep-sub-tab {
    padding: 7px 16px;
    border-radius: var(--ep-radius);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    opacity: .85;
    transition: background .18s,opacity .18s
}

.ep-sub-tab:hover {
    background: var(--ep-control-bg);
    opacity: 1
}

.ep-sub-tab.is-active {
    background: var(--ep-accent);
    color: var(--ep-on-accent)
}

.ep-subs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 16px
}

.ep-sub-card {
    display: flex;
    background: var(--ep-card-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    overflow: hidden;
    transition: border-color .2s,box-shadow .2s,transform .25s,opacity .25s
}

.ep-sub-card:hover {
    border-color: var(--ep-accent);
    box-shadow: var(--ep-card-hover-shadow)
}

.ep-sub-card.is-removing {
    opacity: 0;
    transform: scale(.95)
}

.ep-sub-card-poster {
    width: 80px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--ep-poster-bg)
}

.ep-sub-card-poster a {
    display: block;
    height: 100%
}

.ep-sub-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.ep-sub-card-info {
    flex: 1;
    min-width: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px
}

.ep-sub-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ep-card-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.ep-sub-card-title:hover {
    color: var(--ep-accent)
}

.ep-sub-card-meta {
    font-size: 12px;
    color: var(--ep-text-muted)
}

.ep-sub-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.ep-sub-card-ep {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--ep-info-bg);
    color: var(--ep-accent);
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap
}

.ep-sub-card-del {
    margin: 0;
    min-width: 0;
    min-height: 0;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ep-border);
    border-radius: calc(var(--ep-radius) * .5);
    cursor: pointer;
    color: var(--ep-text-muted);
    transition: border-color .18s,color .18s,background .18s
}

.ep-sub-card-del:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: rgba(220,38,38,.06)
}

.ep-upd-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.ep-upd-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--ep-card-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    padding: 13px 16px;
    text-decoration: none;
    color: var(--ep-card-text);
    transition: border-color .2s,box-shadow .2s,transform .18s
}

.ep-upd-card:hover {
    border-color: var(--ep-accent);
    box-shadow: var(--ep-card-hover-shadow);
    transform: translateX(4px)
}

.ep-upd-thumb {
    width: 54px;
    height: 76px;
    flex-shrink: 0;
    border-radius: calc(var(--ep-radius) * .55);
    overflow: hidden;
    background: var(--ep-poster-bg)
}

.ep-upd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.ep-upd-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.ep-upd-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ep-upd-ep {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap
}

.ep-upd-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    line-height: 1.5;
    background: var(--ep-accent);
    color: var(--ep-on-accent);
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    flex-shrink: 0
}

.ep-upd-ep-title {
    font-size: 12px;
    color: var(--ep-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ep-upd-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ep-text-muted)
}

.ep-upd-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--ep-text-muted);
    background: var(--ep-control-bg);
    transition: color .18s,background .18s
}

.ep-upd-card:hover .ep-upd-arrow {
    color: var(--ep-on-accent);
    background: var(--ep-accent)
}

.ep-sub-empty {
    text-align: center;
    padding: 72px 20px;
    color: inherit;
    opacity: .75
}

.ep-sub-empty svg {
    margin: 0 auto 14px;
    display: block;
    opacity: .28
}

.ep-sub-empty-text {
    font-size: 15px;
    font-weight: 500
}

@media (max-width: 540px) {
    .ep-subs-grid {
        grid-template-columns:1fr
    }

    .ep-sub-header {
        flex-direction: column;
        align-items: flex-start
    }

    .ep-upd-card {
        gap: 12px;
        padding: 10px 12px
    }

    .ep-upd-thumb {
        width: 42px;
        height: 60px
    }

    .ep-upd-arrow {
        display: none
    }
}

.mi-coll-page {
    margin: 0 0 24px;
    color: inherit
}

.mi-coll-page .mi-coll-head {
    margin: 0 0 20px
}

.mi-coll-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 8px;
    color: inherit
}

.mi-coll-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 14px
}

.mi-coll-meta-count {
    opacity: .7
}

.mi-coll-meta-all,.mi-coll-text a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px
}

.mi-coll-meta-all:hover,.mi-coll-text a:hover {
    opacity: .75
}

.mi-coll-text {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere
}

.mi-coll-text p {
    margin: 0 0 10px
}

.mi-coll-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 8px
}

.mi-coll-sort-label {
    font-size: 13px;
    font-weight: 600;
    opacity: .7
}

.mi-coll-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px
}

.mi-coll-sort .mi-coll-tabs {
    margin: 0
}

.mi-coll-tabs[hidden] {
    display: none
}

.mi-coll-tab,a.mi-coll-tab {
    appearance: none;
    height: auto;
    min-height: 0;
    margin: 0;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid rgba(127,127,127,.35);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s,background .18s
}

.mi-coll-tab:hover {
    background: transparent;
    color: inherit;
    border-color: currentColor
}

.mi-coll-tab.is-active {
    border-color: currentColor;
    background: rgba(127,127,127,.18);
    box-shadow: inset 0 0 0 1px currentColor
}

.mi-coll-tab:focus-visible,.mi-coll-card:focus-visible,.mi-coll-chip:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

.mi-coll-dle-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 14px;
    font-size: 14px
}

.mi-coll-dle-sort .sort {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none
}

.mi-coll-tab-n {
    font-size: 12px;
    font-weight: 700;
    opacity: .65
}

.mi-coll-section {
    margin: 0 0 28px
}

.mi-coll-section[hidden] {
    display: none
}

.mi-coll-section-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 14px;
    color: inherit
}

.mi-coll-tabbed .mi-coll-section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.mi-coll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
    gap: 16px
}

.mi-coll-card,a.mi-coll-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(127,127,127,.07);
    color: inherit;
    border: 1px solid rgba(127,127,127,.22);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s,transform .18s,background .2s
}

.mi-coll-card:hover {
    border-color: rgba(127,127,127,.55);
    background: rgba(127,127,127,.11);
    transform: translateY(-2px)
}

.mi-coll-collage {
    position: relative;
    display: grid;
    aspect-ratio: 4/3;
    background: rgba(127,127,127,.12);
    overflow: hidden
}

.mi-coll-collage img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-width: 0;
    min-height: 0
}

.mi-coll-collage-1 img {
    object-fit: contain;
    object-position: center;
    padding: 2px
}

.mi-coll-collage-2 {
    grid-template-columns: 1fr 1fr
}

.mi-coll-collage-3 {
    grid-template-columns: 1fr 1fr 1fr
}

.mi-coll-collage-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr
}

.mi-coll-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: .35
}

.mi-coll-ph svg {
    width: 44px;
    height: 44px
}

.mi-coll-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
    min-width: 0
}

.mi-coll-card-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
    overflow-wrap: anywhere
}

.mi-coll-card-count {
    font-size: 12px;
    opacity: .65
}

.mi-coll-empty {
    text-align: center;
    padding: 56px 20px;
    opacity: .8
}

.mi-coll-empty-text {
    font-size: 15px;
    font-weight: 500
}

.mi-coll-empty-sub {
    font-size: 13px;
    margin-top: 6px
}

.mi-coll-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    vertical-align: middle
}

.mi-coll-chip,a.mi-coll-chip.mi-coll-chip {
    text-decoration: none
}

.mi-coll-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(127,127,127,.35);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: inherit;
    overflow-wrap: anywhere;
    transition: border-color .18s
}

.mi-coll-chip:hover {
    border-color: currentColor
}

.mi-coll-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.mi-coll-chip-all {
    font-weight: 700;
    background: rgba(127,127,127,.14)
}

@media (max-width: 768px) {
    .mi-coll-title {
        font-size:22px
    }

    .mi-coll-grid {
        grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
        gap: 12px
    }
}

@media (max-width: 420px) {
    .mi-coll-grid {
        grid-template-columns:1fr 1fr;
        gap: 10px
    }

    .mi-coll-card-body {
        padding: 10px
    }

    .mi-coll-card-name {
        font-size: 14px
    }
}

@media (prefers-reduced-motion:reduce) {
    .mi-coll-card,.mi-coll-tab,.mi-coll-chip {
        transition: none
    }

    .mi-coll-card:hover {
        transform: none
    }
}