.ys-main {
    max-width: var(--ys2-max) !important;
    padding: 0 !important;
    width: 100% !important
}

.ys2-type-page .ys2-shell .ys-main {
    background: var(--ys2-bg) !important;
    color: var(--ys2-text)
}

.ys-breadcrumb {
    color: var(--ys2-muted);
    font-size: 13px;
    margin: 0 0 20px
}

.ys-panel,
.ys-section {
    background: transparent !important
}

.ys2-filter {
    background: var(--ys2-surface) !important;
    border: 1px solid var(--ys2-line);
    border-radius: var(--ys2-radius);
    box-shadow: var(--ys2-shadow);
    margin-bottom: 28px;
    padding: 8px 22px !important
}

.ys2-filter .ys-filter-row {
    align-items: flex-start;
    border-bottom: 1px solid var(--ys2-line);
    display: flex;
    gap: 22px;
    padding: 15px 0
}

.ys2-filter .ys-filter-row:last-child {
    border-bottom: 0
}

.ys2-filter .ys-filter-row>strong {
    color: var(--ys2-muted);
    flex: 0 0 48px;
    font-size: 13px;
    line-height: 30px
}

.ys2-filter .ys-filter-row>div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.ys2-filter .ys-filter-row a {
    border-radius: 7px;
    font-size: 13px;
    padding: 6px 11px
}

.ys2-filter .ys-filter-row a.active,
.ys2-filter .ys-filter-row a:hover {
    background: var(--ys2-accent-soft);
    color: var(--ys2-accent)
}

.ys2-results-grid {
    margin-top: 18px
}

body.ys2-search-page {
    line-height: 1.6
}

html.ys-dark body.ys2-search-page .ys2-content {
    background: var(--ys2-bg) !important;
    color: var(--ys2-text) !important
}

body.ys2-search-page .ys-main {
    background: var(--ys2-bg) !important;
    color: var(--ys2-text);
    background-image: none !important
}

.ys2-search-results-heading { margin: 0 0 26px }
.ys2-search-results-heading h1 { font-size: 36px; font-weight: 400; letter-spacing: -1.3px; line-height: 1.3; margin: 0 }
.ys2-search-results-heading p { color: var(--ys2-muted); font-size: 16px; margin: 9px 0 0 }
.ys2-search-ad-grid { margin: 22px 0 10px }
.ys2-search-tabs { align-items: end; border-bottom: 1px solid var(--ys2-line); display: flex; gap: 24px; margin: 0 0 23px; overflow-x: auto }
.ys2-search-tabs a { border-bottom: 2px solid transparent; color: var(--ys2-muted); flex: 0 0 auto; font-size: 14px; padding: 12px 0; text-decoration: none }
.ys2-search-tabs a.active { border-color: var(--ys2-accent); color: var(--ys2-text); font-weight: 700 }
.ys2-search-tabs span { font-size: 12px; margin-left: 6px }
.ys2-search-filter-bar { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin: 16px 0 22px }
.ys2-search-filter-links { display: flex; flex-wrap: wrap; gap: 9px }
.ys2-search-filter-links a { align-items: center; background: var(--ys2-surface); border: 1px solid var(--ys2-line); border-radius: 7px; color: var(--ys2-text); display: flex; font-size: 14px; gap: 6px; padding: 8px 13px; text-decoration: none }
.ys2-search-filter-links a.active,.ys2-search-filter-links a:hover { background: var(--ys2-accent-soft); border-color: var(--ys2-accent); color: var(--ys2-accent) }
.ys2-search-empty { align-items: center; background: transparent; border-radius: 12px; display: flex; flex-direction: column; gap: 0; justify-content: center; margin-top: 0; min-height: 0; padding: 65px 24px }
.ys2-search-empty-icon { color: var(--ys2-accent); margin-bottom: 15px }
.ys2-search-empty-icon svg { display: block; height: 42px; width: 42px }
.ys2-search-empty h2 { color: var(--ys2-text); font-size: 23px; font-weight: 400; margin: 0 0 10px }
.ys2-search-empty p { color: var(--ys2-muted); font-size: 14px; margin: 0 0 24px }
.ys2-search-empty a { align-items: center; background: var(--ys2-accent); border-radius: 8px; color: #fff; display: inline-flex; font-size: 14px; font-weight: 700; justify-content: center; min-height: 44px; padding: 0 18px; text-decoration: none }
.ys2-search-topic-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.ys2-search-topic-card { background: var(--ys2-surface); border: 1px solid var(--ys2-line); border-radius: 10px; overflow: hidden }
.ys2-search-topic-card a { color: inherit; display: block; text-decoration: none }
.ys2-search-topic-card img { aspect-ratio: 16/9; display: block; object-fit: cover; width: 100% }
.ys2-search-topic-card div { padding: 12px }
.ys2-search-topic-card h2 { font-size: 16px; margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ys2-search-topic-card p { color: var(--ys2-muted); font-size: 13px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.ys2-type-breadcrumb {
    align-items: center;
    color: var(--ys2-muted);
    display: flex;
    font-size: 14px;
    gap: 9px;
    line-height: 1.6;
    margin: 0 0 22px
}

.ys2-type-breadcrumb a {
    color: var(--ys2-muted)
}

.ys2-type-breadcrumb a:hover {
    color: var(--ys2-accent)
}

.ys2-type-heading {
    align-items: flex-end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 0 0 26px
}

.ys2-type-heading h1 {
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -1.3px;
    line-height: 1.3;
    margin: 0
}

.ys2-type-heading p {
    color: var(--ys2-muted);
    font-size: 16px;
    line-height: 1.6;
    margin: 7px 0 0
}

.ys2-type-ad-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 22px 0 10px
}

.ys2-type-ad-grid a {
    aspect-ratio: 16/3;
    background: var(--ys2-surface);
    display: block;
    overflow: hidden
}

.ys2-type-ad-grid img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.ys2-type-primary-filter {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 16px 0 22px;
    
}

.ys2-type-primary-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.ys2-type-primary-links a,
.ys2-type-child-filter a {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 7px;
    display: inline-flex;
    font-size: 14px;
    gap: 6px;
    min-height: 40px;
    padding: 8px 13px
}

.ys2-type-primary-links a:hover,
.ys2-type-child-filter a:hover {
    border-color: var(--ys2-accent);
}

.ys2-type-primary-links a.active,
.ys2-type-child-filter a.active{
    background: var(--ys2-accent-soft);
    border-color: var(--ys2-accent);
    color: var(--ys2-accent);
}

.ys2-type-sort {
    align-items: center;
    color: var(--ys2-muted);
    display: flex;
    flex: 0 0 auto;
    font-size: 13px;
    gap: 9px
}

.ys2-type-sort select {
    appearance: auto;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 7px;
    color: var(--ys2-text);
    font: inherit;
    height: 40px;
    min-width: 108px;
    padding: 0 10px;
}

.ys2-type-child-filter {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 16px 0 22px
}

.ys2-type-child-label {
    color: var(--ys2-muted);
    font-size: 14px;
    margin-right: 3px
}

.ys2-type-child-filter a i {
    color: var(--ys2-muted);
    font-size: 13px;
    font-style: normal
}

.ys2-type-child-filter a.active i {
    color: inherit
}

.ys2-type-status {
    align-items: center;
    color: var(--ys2-muted);
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    line-height: 1.6;
    margin: 0 0 17px
}

.ys2-type-status p {
    margin: 0
}

.ys2-type-status strong {
    font-weight: 400
}

.ys2-type-grid {
    gap: 24px 18px !important;
    margin-top: 0
}

.ys2-type-grid .ys2-card-media {
    aspect-ratio: 16/10
}

.ys2-type-grid .ys2-card-body h3 {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.45;
}

.ys2-search-again {
    display: flex;
    margin: 18px 0;
    max-width: 620px
}

.ys2-search-again input {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 10px 0 0 10px;
    color: var(--ys2-text);
    flex: 1;
    min-width: 0;
    padding: 12px 15px
}

.ys2-search-again button {
    background: var(--ys2-accent);
    border: 0;
    border-radius: 0 10px 10px 0;
    color: #fff;
    cursor: pointer;
    padding: 0 24px
}

.ys2-result-count {
    color: var(--ys2-muted);
    font-size: 13px
}

.ys2-search-hero {
    margin: 4px 0 26px
}

.ys2-search-hero h1 {
    font-size: 38px;
    font-weight: 400;
    letter-spacing: -1.35px;
    line-height: 1.3;
    margin: 0
}

.ys2-search-hero p {
    color: var(--ys2-muted);
    font-size: 16px;
    margin: 9px 0 0
}

.ys2-search-main-form {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 10px;
    display: flex;
    margin: 22px 0 24px;
    max-width: 760px;
    min-height: 47px;
    overflow: hidden
}

.ys2-search-main-form svg {
    flex: 0 0 22px;
    margin-left: 15px;
    width: 22px
}

.ys2-search-main-form input {
    background: transparent;
    border: 0;
    color: var(--ys2-text);
    flex: 1;
    font: inherit;
    min-width: 0;
    outline: 0;
    padding: 0 14px
}

.ys2-search-main-form button {
    align-self: stretch;
    background: var(--ys2-accent);
    border: 0;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    padding: 0 24px
}

.ys2-search-results-form {
    background: var(--ys2-bg);
    border-radius: 9px;
    gap: 10px;
    margin: 0 0 24px;
    max-width: none;
    min-height: auto;
    padding: 0 8px 0 14px;
    width: 100%
}

.ys2-search-results-form > svg {
    flex: 0 0 21px;
    height: 21px;
    margin: 0;
    width: 21px
}

.ys2-search-results-form input {
    padding: 10px 0
}

.ys2-search-results-form button {
    align-items: center;
    align-self: center;
    background: transparent;
    color: var(--ys2-text);
    display: flex;
    height: 42px;
    justify-content: center;
    padding: 5px;
    width: 42px
}

.ys2-search-results-form button svg {
    height: 21px;
    margin: 0;
    width: 21px
}

.ys2-search-popular,
.ys2-search-categories,
.ys2-search-weekly {
    margin: 30px 0 42px
}

.ys2-search-word-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.ys2-search-word-grid a {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 7px;
    color: var(--ys2-text);
    display: inline-flex;
    gap: 9px;
    min-height: 42px;
    padding: 8px 13px;
    text-decoration: none
}

.ys2-search-word-grid a:hover {
    border-color: var(--ys2-accent);
    color: var(--ys2-accent)
}

.ys2-search-word-grid i {
    color: var(--ys2-accent);
    font-size: 12px;
    font-style: normal;
    letter-spacing: .08em
}

.ys2-search-word-grid span {
    font-size: 14px
}

.ys2-page-section-head>a {
    color: var(--ys2-muted);
    font-size: 14px
}

.ys2-page-section-head>a:hover {
    color: var(--ys2-accent)
}

.ys2-pagination {
    margin: 38px 0 10px
}

.ys2-pagination .page {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    list-style: none;
    padding: 0
}

.ys2-pagination .page a,
.ys2-pagination .page span {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 8px;
    display: flex;
    height: 38px;
    justify-content: center;
    min-width: 38px;
    padding: 0 12px
}

.ys2-pagination .page .active a {
    background: var(--ys2-accent);
    border-color: var(--ys2-accent);
    color: #fff
}

/* Keep MacCMS pagination reset rules from leaking into the template layout. */
.ys2-pagination { box-sizing: border-box; clear: both; min-width: 0; overflow: hidden; }
.ys2-pagination .page.text_center.cleafix { align-items: center; box-sizing: border-box; float: none; height: auto; margin: 0 auto; min-height: 38px; width: 100%; }
.ys2-pagination .page.text_center.cleafix::before,
.ys2-pagination .page.text_center.cleafix::after { content: none; display: none; }
.ys2-pagination .page > li { display: block; float: none; list-style: none; margin: 0; padding: 0; }
.ys2-pagination .page > li > a,
.ys2-pagination .page > li > span { box-sizing: border-box; color: var(--ys2-text); line-height: 1.2; text-decoration: none; white-space: nowrap; }
.ys2-pagination .page > li > a:hover { border-color: var(--ys2-accent); color: var(--ys2-accent); }
.ys2-pagination .page > li > a.btns_disad,
.ys2-pagination .page > li > span.btns_disad { color: var(--ys2-muted); cursor: default; opacity: .65; }
.ys2-pagination .page_jump_inner { display: inline-flex; }
.ys2-pagination .page_tips { clear: both; color: var(--ys2-muted); font-size: 13px; line-height: 1.5; margin-top: 12px; text-align: center; }

/* Final override for legacy MacCMS .page / clearfix rules. */
.mac-paging.ys2-pagination { clear: both !important; float: none !important; height: auto !important; margin: 38px auto 10px !important; max-width: 100% !important; overflow: visible !important; }
.mac-paging.ys2-pagination ul.page.text_center.cleafix { align-items: center !important; background: transparent !important; box-sizing: border-box !important; display: flex !important; float: none !important; flex-wrap: wrap !important; gap: 7px !important; height: auto !important; justify-content: center !important; line-height: normal !important; list-style: none !important; margin: 0 auto !important; min-height: 38px !important; padding: 0 !important; text-align: center !important; width: 100% !important; }
.mac-paging.ys2-pagination ul.page.text_center.cleafix::before,
.mac-paging.ys2-pagination ul.page.text_center.cleafix::after { content: none !important; display: none !important; }
.mac-paging.ys2-pagination ul.page.text_center.cleafix > li { background: transparent !important; display: block !important; float: none !important; height: auto !important; line-height: normal !important; list-style: none !important; margin: 0 !important; padding: 0 !important; position: static !important; width: auto !important; }
.mac-paging.ys2-pagination ul.page.text_center.cleafix > li > a,
.mac-paging.ys2-pagination ul.page.text_center.cleafix > li > span { align-items: center !important; box-sizing: border-box !important; display: flex !important; float: none !important; height: 38px !important; justify-content: center !important; line-height: 1.2 !important; margin: 0 !important; min-width: 38px !important; padding: 0 12px !important; position: static !important; }
.mac-paging.ys2-pagination .page_jump_inner { align-items: center !important; display: inline-flex !important; gap: 4px !important; }
.mac-paging.ys2-pagination .page_jump_row { display: none !important; }
@media (max-width: 820px) {
    .mac-paging.ys2-pagination ul.page.text_center.cleafix > li.hidden_mb { display: none !important; }
    .mac-paging.ys2-pagination ul.page.text_center.cleafix > li.page_jump { display: none !important; }
    .mac-paging.ys2-pagination .page_jump_row { display: block !important; margin: 10px 0 0 !important; text-align: center !important; }
    .mac-paging.ys2-pagination ul.page.text_center.cleafix { gap: 5px !important; }
    .mac-paging.ys2-pagination ul.page.text_center.cleafix > li > a,
    .mac-paging.ys2-pagination ul.page.text_center.cleafix > li > span { min-width: 34px !important; padding: 0 9px !important; }
}

.ys2-detail-hero {
    background: var(--ys2-surface) !important;
    border: 1px solid var(--ys2-line);
    border-radius: 16px;
    box-shadow: var(--ys2-shadow);
    overflow-wrap: anywhere;
    padding: 24px !important
}

.ys2-detail-hero .ys-detail-poster img {
    border-radius: 12px
}

.ys2-detail-ad {
    margin: 0 auto 14px;
    max-width: 760px
}

.ys2-detail-ad a {
    display: block
}

.ys2-detail-ad img {
    aspect-ratio: 16/3;
    display: block;
    object-fit: cover;
    width: 100%
}

.ys2-detail-promos {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 16px
}

.ys2-detail-promos a {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 6px;
    color: #35a568;
    display: flex;
    font-size: 12px;
    justify-content: center;
    min-height: 33px
}

.ys2-detail-player-layout {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 300px
}

.ys2-player-main-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0
}

.ys2-detail-player {
    background: #111;
    border-radius: 12px;
    min-height: 480px;
    overflow: hidden
}

.ys2-player-info-card {
    background: var(--ys2-surface);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--ys2-line);
    overflow: hidden
}

.ys2-player-episode-nav {
    align-items: center;
    border-bottom: 1px solid var(--ys2-line);
    display: flex;
    justify-content: space-between;
    min-height: 74px;
    padding: 12px 16px
}

.ys2-player-episode-nav a {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 9px;
    color: var(--ys2-text);
    display: inline-flex;
    font-size: 14px;
    gap: 7px;
    min-height: 42px;
    padding: 0 18px
}

.ys2-player-episode-nav a:hover {
    border-color: var(--ys2-accent);
    color: var(--ys2-accent)
}

.ys2-detail-player>a {
    align-items: center;
    display: flex;
    min-height: 480px;
    position: relative
}

.ys2-detail-player img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.ys2-detail-player>a:after {
    background: linear-gradient(90deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .15));
    content: "";
    inset: 0;
    position: absolute
}

.ys2-detail-player>a>span {
    align-items: center;
    background: rgba(0, 0, 0, .62);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 22px;
    height: 62px;
    justify-content: center;
    left: 50%;
    padding-left: 4px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    z-index: 1
}

.ys2-detail-related h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 4px 0 15px
}

.ys2-detail-related>div {
    display: flex;
    flex-direction: column;
    gap: 13px
}

.ys2-player-stage--no-ad {
    margin-top: -10px
}

.ys2-player-episode-panel {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 12px;
    margin: 0 0 24px;
    padding: 18px
}

.ys2-player-episode-panel-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 13px
}

.ys2-player-episode-panel h2 {
    font-size: 18px;
    font-weight: 500;
    margin: 0
}

.ys2-player-episode-panel p {
    color: var(--ys2-muted);
    font-size: 13px;
    margin: 5px 0 0
}

.ys2-player-episode-panel .ys-episode-sort {
    background: var(--ys2-bg);
    border: 1px solid var(--ys2-line);
    border-radius: 7px;
    color: var(--ys2-text);
    cursor: pointer;
    font-size: 12px;
    padding: 7px 10px
}

.ys2-player-episodes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 350px;
    overflow-y: auto
}

.ys2-player-episodes a {
    align-items: center;
    border-radius: 8px;
    color: var(--ys2-text);
    display: flex;
    min-height: 38px;
    padding: 7px 10px
}

.ys2-player-episodes a.active,
.ys2-player-episodes a:hover {
    background: var(--ys2-accent-soft);
    color: var(--ys2-accent)
}

.ys2-related-video-box {
    border-top: 1px solid #dce0e6;
}

.ys2-related-section h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 4px 0 15px
}

.ys2-related-card {
    display: grid;
    padding: 14px 0;
    gap: 2px 10px;
    grid-template-columns: 110px minmax(0, 1fr);
    grid-template-rows: auto auto;
    border-bottom: 1px solid #dce0e6;
}

.ys2-related-card:hover b{
    color: #c83f2d;
}


.ys2-related-card>span {
    grid-row: 1/3;
    position: relative
}

.ys2-related-card img {
    aspect-ratio: 16/9;
    border-radius: 4px;
    display: block;
    object-fit: cover;
    width: 100%
}

.ys2-related-card i {
    background: rgba(0, 0, 0, .76);
    bottom: 3px;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    padding: 2px 4px;
    position: absolute;
    right: 3px
}

.ys2-related-card b {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    padding-bottom: 13px;
    height: 45px;
}

.ys2-related-card small {
    color: var(--ys2-muted);
    font-size: 11px
}

.ys2-detail-copy {
    border-bottom: 1px solid var(--ys2-line);
    padding: 27px 0
}

.ys2-player-info-card .ys2-detail-copy {
    border-bottom: 0;
    padding: 24px
}

.ys2-detail-copy h1 {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.35;
    margin: 0 0 8px
}

.ys2-detail-meta {
    color: var(--ys2-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 8px;
    margin: 0
}

.ys2-detail-actions {
    display: flex;
    gap: 9px;
    margin: 18px 0
}

.ys2-detail-actions button {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 8px;
    color: var(--ys2-text);
    cursor: pointer;
    padding: 9px 16px
}

.ys2-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 25px
}

.ys2-detail-tags a {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 999px;
    color: var(--ys2-muted);
    font-size: 12px;
    padding: 7px 11px
}

.ys2-detail-copy h2 {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 8px
}

.ys2-detail-description {
    color: var(--ys2-muted);
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
    overflow-wrap: anywhere
}

.ys2-detail-recommend {
    margin: 34px 0 46px
}

.ys2-video-detail-page .ys2-series-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.ys2-playlist {
    background: var(--ys2-surface) !important;
    border: 1px solid var(--ys2-line);
    border-radius: 12px;
    overflow-wrap: anywhere;
    padding: 18px !important
}

.ys2-playlist .ys-episodes {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.ys2-playlist .ys-episodes a {
    background: var(--ys2-bg);
    border: 1px solid var(--ys2-line);
    border-radius: 8px;
    color: var(--ys2-text);
    font-weight: 500;
    padding: 9px 13px
}

.ys2-playlist .ys-episodes a.active,
.ys2-playlist .ys-episodes a:hover {
    background: var(--ys2-accent-soft);
    border-color: var(--ys2-accent);
    color: var(--ys2-accent)
}

.ys2-player-stage {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) 300px
}

.ys2-player-stage .ys-player-box {
    background: #111;
    border-radius: 12px;
    overflow: hidden
}

.ys2-series-page {
    max-width: var(--ys2-max);
    padding: 0 !important
}

.ys2-series-grid {
    display: grid !important;
    gap: 22px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    padding: 0
}

.ys2-series-library-page .ys2-series-grid {
    gap: 24px 18px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.ys2-series-controls {
    align-items: center;
    display: flex;
    gap: 14px
}

.ys2-series-library-page .ys2-type-primary-links a {
    align-items: center;
    display: inline-flex;
    gap: 8px
}

.ys2-series-filter-count {
    color: var(--ys2-muted);
    font-variant-numeric: tabular-nums
}

.ys2-series-library-page .ys2-type-primary-links a.active .ys2-series-filter-count {
    color: inherit
}

.ys2-series-pagination {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 38px 0 18px
}

.ys2-series-pagination a,
.ys2-series-pagination span {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 9px;
    color: var(--ys2-text);
    display: inline-flex;
    font-size: 14px;
    height: 44px;
    justify-content: center;
    min-width: 44px;
    padding: 9px 18px;
    font-weight: 600;
}

.ys2-series-pagination a.active {
    background: #fbe8e4;
    border-color: var(--ys2-accent);
    color: var(--ys2-accent)
}

.ys2-series-pagination span.is-disabled {
    color: var(--ys2-muted)
}

.ys2-series-pagination i {
    color: var(--ys2-muted);
    font-style: normal;
    padding: 0 4px
}

.ys2-series-hero {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 16px;
    box-shadow: var(--ys2-shadow);
    overflow: hidden;
    overflow-wrap: anywhere
}

.ys2-series-detail-page .ys2-series-hero {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    min-height: 420px
}

.ys2-series-detail-page .ys2-series-hero>img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.ys2-series-detail-copy {
    align-self: center;
    padding: 42px
}

.ys2-series-detail-copy>span {
    color: var(--ys2-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em
}

.ys2-series-detail-copy h1 {
    font-size: 38px;
    font-weight: 400;
    letter-spacing: -1.2px;
    line-height: 1.28;
    margin: 12px 0
}

.ys2-series-detail-copy>p {
    color: var(--ys2-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.7;
    margin: 0
}

.ys2-series-detail-copy>p b {
    color: var(--ys2-text);
    font-weight: 500
}

.ys2-series-detail-copy>p i {
    font-style: normal
}

.ys2-series-detail-copy>div {
    display: flex;
    gap: 10px;
    margin: 24px 0 18px
}

.ys2-series-start,
.ys2-series-follow {
    background: var(--ys2-accent);
    border: 1px solid var(--ys2-accent);
    border-radius: 9px;
    color: #fff;
    cursor: pointer;
    font: 700 14px/1 sans-serif;
    padding: 14px 19px
}

.ys2-series-follow {
    background: var(--ys2-surface);
    color: var(--ys2-text)
}

.ys2-series-tag {
    color: var(--ys2-accent);
    font-size: 13px
}

.ys2-series-summary {
    margin-top: 18px !important
}

.ys2-series-episodes {
    margin: 38px 0
}

.ys2-series-episode-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr))
}

.ys2-series-episode-list a {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    min-height: 58px;
    padding: 14px;
    text-align: center
}

.ys2-series-episode-list strong {
    font-size: 14px;
    font-weight: 500
}

.ys2-series-episode-list span {
    color: var(--ys2-muted);
    font-size: 12px
}

.topic-detail-hero.ys2-series-hero {
    min-height: 320px
}

.ys2-vod-series-detail {
    padding-bottom: 48px
}

.ys2-series-detail-ads {
    margin-bottom: 24px
}

.ys2-vod-series-hero {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
    min-height: 430px !important
}

.ys2-vod-series-hero.ys2-series-detail--no-ad {
    margin-top: 0
}

.ys2-vod-series-poster {
    background: #111;
    min-height: 100%;
    overflow: hidden
}

.ys2-vod-series-poster img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.ys2-vod-series-tags {
    margin-bottom: 18px
}

.ys2-series-episode-section {
    margin: 38px 0;
    position: static
}

.ys2-vod-series-detail .ys2-page-section-head button {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 9px;
    color: var(--ys2-text);
    cursor: pointer;
    padding: 11px 16px
}

@media(max-width:760px) {
    .ys2-vod-series-detail {
        padding-bottom: 30px
    }

    .ys2-vod-series-detail .ys2-vod-series-hero {
        grid-template-columns: 1fr !important;
        min-height: 0 !important
    }

    .ys2-vod-series-detail .ys2-vod-series-poster {
        aspect-ratio: 16/9;
        min-height: 0
    }

    .ys2-vod-series-detail .ys2-series-detail-copy {
        padding: 22px 18px
    }

    .ys2-vod-series-detail .ys2-series-detail-copy h1 {
        font-size: 29px
    }

    .ys2-vod-series-detail .ys2-series-detail-copy>div {
        align-items: stretch;
        flex-direction: column
    }

    .ys2-vod-series-detail .ys2-series-start,
    .ys2-vod-series-detail .ys2-series-follow {
        text-align: center;
        width: 100%
    }

    .ys2-vod-series-detail .ys2-series-episode-list {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:1100px) {
    .ys2-series-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:1000px) {
    .ys2-player-stage {
        grid-template-columns: 1fr
    }
}

@media(max-width:1100px) {
    .ys2-detail-player-layout {
        grid-template-columns: minmax(0, 1fr) 260px
    }

    .ys2-detail-player,
    .ys2-detail-player>a {
        min-height: 410px
    }

    .ys2-video-detail-page .ys2-series-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media(max-width:820px) {
    .ys2-filter {
        padding: 4px 14px !important
    }

    .ys2-filter .ys-filter-row {
        gap: 8px
    }

    .ys2-filter .ys-filter-row>div {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px
    }

    .ys2-filter .ys-filter-row a {
        white-space: nowrap
    }

    .ys2-detail-hero {
        padding: 16px !important
    }

    .ys2-series-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ys2-type-heading h1 {
        font-size: 28px
    }

    .ys2-type-ad-grid {
        grid-template-columns: 1fr;
        margin-top: 20px
    }

    .ys2-type-primary-filter {
        align-items: flex-start;
        flex-direction: column
    }

    .ys2-type-primary-links {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 4px
    }

    .ys2-type-child-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px
    }

    .ys2-type-primary-links a,
    .ys2-type-child-filter a {
        white-space: nowrap
    }

    .ys2-detail-player-layout {
        grid-template-columns: 1fr
    }

    .ys2-player-main-column,
    .ys2-player-info-card {
        display: contents
    }

    .ys2-detail-player {
        order: 1
    }

    .ys2-detail-related {
        order: 2
    }

    .ys2-player-info-card .ys2-detail-copy {
        background: transparent;
        border-bottom: 1px solid var(--ys2-line);
        order: 3;
        padding: 27px 0
    }

    .ys2-player-episode-nav {
        display: none
    }

    .ys2-detail-related {
        display: none
    }

    .ys2-detail-related--with-playlist {
        display: block
    }

    .ys2-detail-related--with-playlist .ys2-related-section {
        display: none
    }

    .ys2-player-episode-panel {
        margin: 0
    }

    .ys2-detail-player,
    .ys2-detail-player>a {
        min-height: 54vw
    }

    .ys2-video-detail-page .ys2-series-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* Single-row category and child filters with explicit expand controls */
.ys2-type-page .ys2-type-filter-card,
.ys2-type-page .ys2-type-child-filter {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 12px;
    margin: 16px 0 10px;
    padding: 14px 16px;
}
.ys2-type-page .ys2-type-child-filter { border-left: 1px solid var(--ys2-line); display: block; margin-top: 10px; overflow: visible; }
.ys2-type-page .ys2-type-section-title,
.ys2-type-page .ys2-type-child-label { color: var(--ys2-text); display: block; font-size: 14px; font-weight: 700; margin: 0 0 9px; }
.ys2-type-page .ys2-type-options-row { align-items: flex-start; display: flex; flex: 1 1 100%; gap: 10px; min-width: 0; width: 100%; }
.ys2-type-page .ys2-type-options { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 8px; max-height: 42px; min-width: 0; overflow: hidden; padding: 3px 0; }
.ys2-type-page .ys2-type-options.is-expanded { flex-wrap: wrap; max-height: none; overflow: visible; }
.ys2-type-page .ys2-type-options a { border-radius: 999px; flex: 0 0 auto; min-height: 36px; padding: 7px 14px; white-space: nowrap; }
.ys2-type-page .ys2-type-expand { background: transparent; border: 0; color: var(--ys2-accent); cursor: pointer; flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 600; min-height: 36px; padding: 0 4px; white-space: nowrap; }
.ys2-type-page .ys2-type-expand[hidden] { display: none; }
.ys2-type-page .ys2-type-expand:focus-visible { border-radius: 4px; outline: 2px solid var(--ys2-accent); outline-offset: 2px; }
.ys2-type-page .ys2-type-sort-row { display: flex; justify-content: flex-end; margin: 10px 0; }
.ys2-type-page .ys2-type-sort { background: transparent; border: 0; padding: 0; }
.ys2-type-page .ys2-type-child-heading { flex: 0 0 100%; }
.ys2-type-page .ys2-type-child-heading small { color: var(--ys2-muted); display: block; font-size: 12px; margin-top: -5px; }
.ys2-type-page .ys2-type-child-filter .ys2-type-options-row { margin-top: 10px; }
@media(max-width:820px) {
    .ys2-type-page .ys2-type-filter-card, .ys2-type-page .ys2-type-child-filter { padding: 12px; }
    .ys2-type-page .ys2-type-sort-row .ys2-type-sort { justify-content: flex-start; width: auto; }
}

/* Compact primary category, secondary category and sort filters */
.ys2-type-page .ys2-type-filter-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 16px 0 12px;
    padding: 0;
}

.ys2-type-page .ys2-type-filter-row {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 5px 0;
}

.ys2-type-page .ys2-type-filter-label {
    color: var(--ys2-text);
    flex: 0 0 50px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    padding: 5px 12px;
    line-height: 1;
}

.ys2-type-page .ys2-type-filter-label::after {
    content: "：";
}

.ys2-type-page .ys2-type-filter-options {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.ys2-type-page .ys2-type-filter-options a {
    align-items: center;
    background: #d5d5d5;
    border: 0;
    border-radius: 3px;
    color: #333;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
    min-height: 28px;
    padding: 7px 12px;
    white-space: nowrap;
}

.ys2-type-page .ys2-type-filter-options a:hover,
.ys2-type-page .ys2-type-filter-options a.active {
    background: #ff7fac;
    color: #000;
    font-weight: 600;
}

@media(max-width:820px) {
    .ys2-type-page .ys2-type-filter-panel {
        padding: 0;
    }

    .ys2-type-page .ys2-type-filter-row {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .ys2-type-page .ys2-type-filter-label {
        flex-basis: 62px;
    }

    .ys2-type-page .ys2-type-filter-options {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ys2-type-page .ys2-type-filter-options::-webkit-scrollbar {
        display: none;
    }
}

.ys2-category-page .ys-main {
    background: var(--ys2-bg) !important;
    color: var(--ys2-text) !important
}

.ys2-benefit-page .ys-main {
    background: var(--ys2-bg) !important;
    color: var(--ys2-text) !important
}

.ys2-page-heading {
    margin: 4px 0 26px
}

.ys2-page-heading h1 {
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -1.3px;
    line-height: 1.3;
    margin: 0
}

.ys2-page-heading p {
    color: var(--ys2-muted);
    font-size: 16px;
    line-height: 1.6;
    margin: 7px 0 0
}

.ys2-page-section,
.ys2-benefit-section {
    margin: 30px 0
}

.ys2-page-section-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 17px
}

.ys2-page-section-head h2 {
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -.6px;
    line-height: 1.6;
    margin: 0
}

.ys2-page-section-head p,
.ys2-page-section-head span {
    color: var(--ys2-muted);
    font-size: 13px;
    margin: 4px 0 0
}

.ys2-category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ys2-category-card {
    background: #18333d;
    border: 1px solid transparent;
    border-radius: 12px;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex: 1 1 300px;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
    overflow: hidden;
    padding: 24px;
    position: relative;
    transition: border-color .2s, transform .2s
}

.ys2-category-card:hover {
    border-color: var(--ys2-accent);
}

.ys2-category-card:hover img{
    transform: scale(1.04);
}

.ys2-category-card-media {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    transition: transform .3s ease;
    width: 100%
}

.ys2-category-card:hover .ys2-category-card-media {
    transform: scale(1.2)
}

.ys2-category-card-shade {
    background: linear-gradient(90deg, rgba(7, 19, 25, .88), rgba(7, 19, 25, .3)), linear-gradient(0deg, rgba(7, 19, 25, .8), transparent 70%);
    inset: 0;
    position: absolute
}

.ys2-category-card>span {
    color: #ffc3a5;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.6;
    position: relative;
    z-index: 1
}

.ys2-category-card-copy {
    margin-top: auto;
    position: relative;
    z-index: 1
}

.ys2-category-card h2 {
    color: #fff;
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -.6px;
    line-height: 1.6;
    margin: 14px 0 0
}

.ys2-category-card p {
    color: #d7e1e4;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    padding-right: 26px
}

.ys2-category-card>i {
    bottom: 22px;
    color: #d7e1e4;
    font-size: 24px;
    font-style: normal;
    line-height: 1;
    position: absolute;
    right: 24px;
    z-index: 1
}

.ys2-category-featured {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.ys2-category-featured a,
.ys2-category-tags a,
.ys2-category-group-links a {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 7px;
    display: inline-flex;
    font-size: 14px;
    gap: 6px;
    line-height: 22.4px;
    padding: 8px 13px
}

.ys2-category-featured a:hover,
.ys2-category-tags a:hover,
.ys2-category-group-links a:hover {
    border-color: var(--ys2-accent)
}

.ys2-category-featured i {
    font-style: normal
}

.ys2-category-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.ys2-category-tags i,
.ys2-category-pill-count {
    color: var(--ys2-muted);
    font-size: 14px;
    font-style: normal
}

.ys2-category-browser {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 14px;
    padding: 24px
}

.ys2-category-search {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    gap: 7px;
    margin-bottom: 20px
}

.ys2-category-search>span {
    font-weight: 650
}

.ys2-category-search input {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 8px;
    color: var(--ys2-text);
    font: inherit;
    outline: 0;
    padding: 10px 13px;
    width: 100%
}

.ys2-category-search input:focus {
    border-color: var(--ys2-accent)
}

.ys2-category-details {
    border-bottom: 1px solid var(--ys2-line);
    padding: 14px 0
}

.ys2-category-details:last-child {
    border-bottom: 0
}

.ys2-category-details>summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    font-weight: 650;
    gap: 12px;
    justify-content: space-between;
    list-style: none
}

.ys2-category-details>summary::-webkit-details-marker {
    display: none
}

.ys2-category-details>summary span:last-child {
    color: var(--ys2-muted);
    font-size: 14px;
    font-weight: 400
}

.ys2-category-group-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 16px 0 5px
}

.ys2-category-details[hidden],
.ys2-category-group-links a[hidden] {
    display: none
}

.ys2-library-filter {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 12px;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin: 24px 0 18px;
    padding: 14px 16px
}

.ys2-library-categories,
.ys2-library-sort {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.ys2-library-filter a {
    border-radius: 8px;
    color: var(--ys2-muted);
    font-size: 13px;
    padding: 8px 11px
}

.ys2-library-filter a.active,
.ys2-library-filter a:hover {
    background: var(--ys2-accent-soft);
    color: var(--ys2-accent)
}

.ys2-library-sort>span {
    color: var(--ys2-muted);
    font-size: 12px;
    margin-right: 4px
}

.ys2-library-flow {
    display: flex;
    flex-direction: column
}

.ys2-library-flow>.ys2-home-video-grid {
    order: 2
}

.ys2-library-status {
    align-items: center;
    color: var(--ys2-muted);
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    margin: 0 0 14px;
    order: 1
}

.ys2-library-status strong {
    color: var(--ys2-text);
    font-size: 15px;
    font-weight: 550
}

.ys2-benefit-grid {
    display: grid;
    gap: 20px
}

.ys2-benefit-grid--app {
    grid-template-columns: repeat(6, minmax(0, 1fr))
}

.ys2-benefit-grid--game {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.ys2-benefit-card {
    display: block;
    min-width: 0;
    transition: transform .2s
}

.ys2-benefit-card:hover {
    transform: translateY(-3px)
}

.ys2-benefit-card img {
    aspect-ratio: 1/1;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    width: 100%
}

.ys2-benefit-grid--game .ys2-benefit-card img {
    aspect-ratio: 6/5
}

.ys2-benefit-card h3 {
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ys2-benefit-card:hover h3 {
    color: var(--ys2-accent)
}

.ys2-library-hero {
    margin: 3px 0 28px
}

.ys2-library-hero h1 {
    font-size: 38px;
    font-weight: 400;
    letter-spacing: -1.3px;
    margin: 0
}

.ys2-library-hero p {
    color: var(--ys2-muted);
    font-size: 16px;
    margin: 10px 0 0
}

.ys2-library-tabs {
    border-bottom: 1px solid var(--ys2-line);
    display: flex;
    gap: 24px;
    margin: 26px 0 32px;
    font-size: 14px;
}

.ys2-library-tabs button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ys2-muted);
    cursor: pointer;
    font: inherit;
    padding: 0 0 13px
}

.ys2-library-tabs button.active {
    border-color: var(--ys2-accent);
    color: #191919;
    font-weight: 600;
}

.ys2-library-toolbar {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0 0 32px
}

.ys2-library-toolbar label {
    align-items: center;
    color: var(--ys2-muted);
    display: flex;
    flex: 0 1 auto;
    font-size: 14px;
    gap: 8px;
    min-width: 0;
    white-space: nowrap
}

.ys2-library-toolbar select {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 8px;
    color: var(--ys2-text);
    flex: 0 1 auto;
    font-size: 14px;
    height: 44px;
    max-width: 150px;
    min-width: 92px;
    padding: 0 32px 0 13px;
    text-overflow: ellipsis
}

.ys2-library-subtabs {
    display: flex;
    flex: 0 0 auto;
    gap: 9px
}

.ys2-library-subtabs button,
.ys2-page-section-head>button {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 8px;
    color: var(--ys2-text);
    cursor: pointer;
    font-size: 14px;
    height: 44px;
    padding: 0 14px;
    white-space: nowrap
}

.ys2-library-subtabs button.active {
    background: var(--ys2-accent-soft);
    border-color: var(--ys2-accent);
    color: var(--ys2-accent)
}

.ys2-library-login {
    border: 1px solid var(--ys2-line);
    border-radius: 12px;
    margin: 26px 0 42px;
    padding: 52px 24px;
    text-align: center
}

.ys2-library-login h2 {
    font-size: 23px;
    font-weight: 500;
    margin: 0 0 10px
}

.ys2-library-login p {
    color: var(--ys2-muted);
    margin: 0 auto 22px;
    max-width: 560px
}

.ys2-library-login>div {
    display: flex;
    gap: 12px;
    justify-content: center
}

.ys2-library-login a {
    border: 1px solid var(--ys2-line);
    border-radius: 8px;
    color: var(--ys2-text);
    padding: 10px 17px;
    background-color: #fff;
    font-weight: 600;
}

.ys2-library-login a:hover {
    background-color: #e9ecf0;
}

.ys2-library-login .ys2-library-login-primary {
    background: var(--ys2-accent);
    border-color: var(--ys2-accent);
    color: #fff
}

.ys2-library-login .ys2-library-login-primary:hover {
    background-color: #e4523f;
}

.ys2-library-local-list {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.ys2-library-local-card {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 10px;
    padding: 16px
}

.ys2-legal-page .ys-main {
    background: var(--ys2-bg) !important;
    color: var(--ys2-text) !important
}

.ys2-legal-document {
    max-width: 850px;
    padding: 26px 0 54px
}

.ys2-legal-document h1 {
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -1.2px;
    margin: 0 0 6px
}

.ys2-legal-document p,
.ys2-legal-document li {
    color: var(--ys2-muted);
    font-size: 16px;
    line-height: 1.58
}

.ys2-legal-document .ys2-legal-lead {
    margin: 0 0 27px
}

.ys2-legal-document ol {
    display: grid;
    gap: 15px;
    margin: 18px 0 20px;
    padding-left: 20px
}

.ys2-legal-document a {
    color: var(--ys2-accent)
}

.ys2-download-page .ys-main {
    padding-bottom: 64px
}

.ys2-download-hero {
    margin: 8px auto 30px;
    max-width: 980px;
    text-align: center
}

.ys2-download-hero-inner {
    background: linear-gradient(135deg, var(--ys2-surface) 0%, var(--ys2-accent-soft) 100%);
    border: 1px solid var(--ys2-line);
    border-radius: 18px;
    padding: 42px 28px 38px;
    position: relative;
    overflow: hidden
}

.ys2-download-hero-inner:after {
    background: var(--ys2-accent);
    border-radius: 50%;
    content: "";
    height: 160px;
    opacity: .07;
    position: absolute;
    right: -62px;
    top: -82px;
    width: 160px
}

.ys2-download-eyebrow {
    color: var(--ys2-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase
}

.ys2-download-hero h1 {
    font-size: 42px;
    font-weight: 450;
    letter-spacing: -1.5px;
    margin: 12px 0 9px
}

.ys2-download-hero p {
    color: var(--ys2-muted);
    font-size: 16px;
    margin: 0
}

.ys2-download-hero-meta {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 650;
    gap: 9px;
    margin-top: 20px;
    padding: 8px 14px
}

.ys2-download-hero-meta i {
    background: var(--ys2-line);
    border-radius: 50%;
    height: 4px;
    width: 4px
}

.ys2-download-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 980px
}

.ys2-download-card {
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 16px;
    box-shadow: var(--ys2-shadow);
    display: flex;
    flex-direction: column;
    min-height: 340px;
    padding: 28px;
    transition: border-color .2s, transform .2s
}

.ys2-download-card:hover {
    border-color: var(--ys2-accent);
    transform: translateY(-2px)
}

.ys2-download-card-head {
    align-items: center;
    display: flex;
    gap: 15px
}

.ys2-download-platform-icon {
    align-items: center;
    background: var(--ys2-accent-soft);
    border-radius: 13px;
    color: var(--ys2-accent);
    display: flex;
    flex: 0 0 50px;
    height: 50px;
    justify-content: center;
    width: 50px
}

.ys2-download-platform-icon svg {
    height: 28px;
    width: 28px
}

.ys2-download-card h2 {
    font-size: 25px;
    font-weight: 500;
    margin: 6px 0 0
}

.ys2-download-card-copy {
    padding: 22px 0 18px
}

.ys2-download-card p {
    color: var(--ys2-muted);
    font-size: 14px;
    line-height: 1.75;
    margin: 0
}

.ys2-download-action {
    align-items: center;
    background: var(--ys2-accent);
    border: 0;
    border-radius: 9px;
    color: #fff;
    display: flex;
    font: inherit;
    font-weight: 700;
    gap: 9px;
    justify-content: center;
    margin-bottom: 15px;
    margin-top: auto;
    min-height: 50px;
    padding: 0 19px;
    width: 100%
}

.ys2-download-action svg {
    height: 21px;
    width: 21px
}

.ys2-download-action:hover {
    color: #fff;
    filter: brightness(.96)
}

.ys2-download-card>button[disabled] {
    background: var(--ys2-line);
    color: var(--ys2-muted);
    cursor: not-allowed
}

.ys2-download-note {
    align-items: flex-start;
    color: var(--ys2-muted);
    display: flex;
    font-size: 12px;
    gap: 8px;
    line-height: 1.6
}

.ys2-download-note svg {
    flex: 0 0 16px;
    height: 16px;
    margin-top: 1px;
    width: 16px
}

.ys2-download-version {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 8px;
    color: var(--ys2-text);
    display: inline-flex;
    font-size: 14px;
    font-style: normal;
    margin-top: 20px;
    min-height: 42px;
    padding: 8px 14px
}

.ys2-download-card-footer {
    align-items: flex-start;
    display: flex;
    min-height: 25px
}

.ys2-download-guide {
    color: var(--ys2-accent);
    display: inline-flex;
    font-size: 14px;
    gap: 5px;
    text-decoration: underline;
    text-underline-offset: 3px
}

.ys2-download-guide:hover {
    color: var(--ys2-accent);
    filter: brightness(.9)
}

.ys2-download-page .ys-main {
    background: var(--ys2-bg) !important;
    color: var(--ys2-text)
}


html.ys-dark .ys2-type-primary-links a:hover,
html.ys-dark .ys2-type-child-filter a:hover {
    border-color: #fff;
}


html.ys-dark .ys2-type-page .ys2-type-filter-options a {
    background-color: #ccc;
}


html.ys-dark .ys2-type-page .ys2-type-filter-options a:hover,html.ys-dark .ys2-type-page .ys2-type-filter-options a.active {
    background-color: #fff;
    font-weight: 600;
}

html.ys-dark .ys2-type-primary-links a.active,
html.ys-dark .ys2-type-child-filter a.active{
    background-color: #fff;
    border-color: #fff;
    color: #000;
    font-weight: 600;
}


html.ys-dark .ys2-library-subtabs button.active {
    background-color: #1a1e25;
    border-color: #fff;
    color: #fff
}


html.ys-dark .ys2-library-tabs button.active {
    border-color: #fff;
    color: #fff;
}


html.ys-dark .ys2-library-login .ys2-library-login-primary {
    background-color: #d5d5d5;
    border-color: #000;
    color: #000
}

html.ys-dark .ys2-library-login .ys2-library-login-primary:hover {
    background-color: #fff;
}

html.ys-dark .ys2-library-login a  {
    background-color: #1a1e25;
}

html.ys-dark .ys2-library-login a:hover  {
    background-color: #111;
}

html.ys-dark .ys2-category-card:hover {
    border-color: #fff;
}



html.ys-dark .ys2-category-featured a:hover,
html.ys-dark .ys2-category-tags a:hover,
html.ys-dark .ys2-category-group-links a:hover {
    border-color: #fff
}


html.ys-dark .ys2-category-search input:focus {
    border-color: #fff
}


html.ys-dark .ys2-related-card {
    border-color: var(--ys2-surface);
}

html.ys-dark .ys2-related-video-box {
    border-color: var(--ys2-surface);;
}

html.ys-dark .ys2-type-breadcrumb a:hover {
    color: #fff;
}

html.ys-dark .ys2-related-card b {
    color: #ccc;
}


html.ys-dark .ys2-related-card:hover b{
    color: #fff;
}


html.ys-dark .ys2-download-card:hover {
    border-color: var(--ys2-text);
}


html.ys-dark .ys2-download-platform-icon {
    color: var(--ys2-text);
}

html.ys-dark .ys2-download-action {
    background: #fff;
    color: #000;
}

html.ys-dark .ys2-download-card>button[disabled] {
    background: var(--ys2-line);
    color: var(--ys2-muted);
}

html.ys-dark .ys2-series-pagination a:hover {
    border-color: #fff;
}

html.ys-dark .ys2-series-pagination a.active {
    background: #fff;
    border-color: #000;
    color: #000;
}


html.ys-dark .ys2-search-tabs a.active {
    border-color: #fff;
}


html.ys-dark .ys2-search-filter-links a.active, html.ys-dark .ys2-search-filter-links a:hover {
    background-color: #1a1e25;
    border-color: #fff;
    color: #fff;
}

@media(max-width:1180px) {

    .ys2-benefit-grid--app,
    .ys2-library-local-list {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .ys2-benefit-grid--game {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .ys2-category-group>div {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .ys2-series-library-page .ys2-series-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media(max-width:900px) {

    .ys2-category-grid,
    .ys2-category-featured {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ys2-library-filter {
        align-items: flex-start;
        flex-direction: column
    }

    .ys2-benefit-grid--app,
    .ys2-benefit-grid--game,
    .ys2-library-local-list {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .ys2-category-group>div {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ys2-series-library-page .ys2-series-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .ys2-series-filter {
        align-items: flex-start;
        flex-direction: column
    }

    .ys2-series-controls {
        width: 100%
    }
}

@media(max-width:900px) {
    .ys2-series-detail-page .ys2-series-hero {
        grid-template-columns: 260px minmax(0, 1fr)
    }

    .ys2-series-detail-copy {
        padding: 28px
    }

    .ys2-series-episode-list {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:620px) {

    .ys2-page-heading h1,
    .ys2-download-hero h1,
    .ys2-search-hero h1,
    .ys2-library-hero h1 {
        font-size: 31px
    }

    .ys2-category-grid,
    .ys2-category-featured,
    .ys2-download-grid {
        grid-template-columns: 1fr
    }

    .ys2-benefit-grid--app,
    .ys2-benefit-grid--game,
    .ys2-library-local-list {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ys2-category-group>div {
        grid-template-columns: 1fr
    }

    .ys2-download-page .ys-main {
        padding-bottom: 40px
    }

    .ys2-download-hero {
        margin-top: 0
    }

    .ys2-download-hero-inner {
        border-radius: 14px;
        padding: 30px 18px 28px
    }

    .ys2-download-hero p {
        font-size: 14px;
        line-height: 1.7
    }

    .ys2-download-card {
        min-height: 0;
        padding: 22px
    }

    .ys2-download-platform-icon {
        flex-basis: 46px;
        height: 46px;
        width: 46px
    }

    .ys2-download-card-copy {
        padding: 18px 0
    }

    .ys2-series-library-page .ys2-series-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:620px) {
    .ys2-series-detail-page .ys2-series-hero {
        grid-template-columns: 1fr
    }

    .ys2-series-detail-page .ys2-series-hero>img {
        aspect-ratio: 16/9
    }

    .ys2-series-detail-copy {
        padding: 23px
    }

    .ys2-series-detail-copy h1 {
        font-size: 30px
    }

    .ys2-series-episode-list {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.ys-main-home .ys2-series-grid {
    gap: 24px 18px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important
}

@media(max-width:1180px) {
    .ys-main-home .ys2-series-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important
    }
}

@media(max-width:980px) {
    .ys-main-home .ys2-series-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important
    }
}

@media(max-width:820px) {
    .ys-main-home .ys2-series-grid {
        gap: 22px 12px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }
}