:root {
    --color-primary: #8ee08a;
    --main-color: #8ee08a;
}

html,
body,
#wrapper,
#main-wrapper,
.layout-page,
.layout-page-404 {
    background: #111714 !important;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}

body.qtip-open {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-gutter: stable;
}

body[data-page="page_404"] #header,
body[data-page="page_404"] #header.header-home {
    background: #111714 !important;
}

.container-404 .c4-medium,
.container-404 .c4-small {
    color: #dce8dd;
}

.btn-secondary,
.btn-tab:not(.active) {
    background: #243028 !important;
    border-color: #2b3a30 !important;
    color: #e8f3ea !important;
}

.btn-secondary:hover,
.btn-tab:not(.active):hover {
    background: #2b3a30 !important;
    border-color: #3a4f42 !important;
    color: #8ee08a !important;
}

#sidebar_menu_bg {
    background: rgba(8, 12, 10, .75) !important;
}

#slider .swiper-slide,
.deslide-item .deslide-cover .deslide-cover-img {
    background: #111714 !important;
}

#header,
#header.header-home,
#header.fixed,
#sidebar_menu,
#sidebar_menu_bg,
#footer,
#footer-about {
    background: #111714 !important;
}

@media (min-width: 769px) {
    body[data-page="page_home"] #header.header-home:not(.fixed) {
        background: transparent !important;
    }
}

.btn-focus,
.btn-primary,
.btn-tab.active,
.btn-focus:hover,
.btn-primary:hover,
.btn-tab.active:hover,
.btn-focus:focus,
.btn-primary:focus,
.btn-tab.active:focus {
    background: #8ee08a !important;
    background-color: #8ee08a !important;
    border-color: #8ee08a !important;
    color: #0c140e !important;
}

a:hover,
.highlight-text,
.cat-heading,
.anif-block-header,
.logo-text,
.trending-list .item .number span {
    color: #8ee08a !important;
}

.deslide-item .desi-sub-text {
    color: #8ee08a !important;
}

.deslide-item .deslide-cover .deslide-cover-img:after {
    background: linear-gradient(0deg, #111714 0, rgba(17,23,20,0) 50%, #111714 100%) !important;
}

.pre-qtip-detail .pqd-li.badge-quality,
.pre-qtip-button .btn.btn-play {
    background: #8ee08a !important;
    color: #0c140e !important;
}

.qtip-anipaca,
.qtip-dark {
    background: #1a221d !important;
    border-color: #2b3a30 !important;
    color: #e8f3ea !important;
    max-width: 340px;
}

#anipaca-qtip-back {
    position: fixed;
    inset: 0;
    z-index: 2147482990;
    background: rgba(8, 12, 10, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

#anipaca-qtip-back.show {
    opacity: 1;
    visibility: visible;
}

#anipaca-qtip-box {
    position: fixed !important;
    z-index: 2147483000 !important;
    width: 340px;
    max-width: calc(100vw - 24px);
    display: block !important;
    background: #141b17;
    border: 1px solid rgba(142, 224, 138, .55);
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(142, 224, 138, .2),
        0 0 32px rgba(142, 224, 138, .32),
        0 18px 50px rgba(0, 0, 0, .55);
    color: #e8f3ea;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.96);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

#anipaca-qtip-box.show,
#anipaca-qtip-box.show[hidden] {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

#anipaca-qtip-box .aqtip {
    padding: 18px 18px 16px;
}

#anipaca-qtip-box .aqtip-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
    color: #fff;
}

#anipaca-qtip-box .aqtip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

#anipaca-qtip-box .aqtip-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #243028;
    color: #d7e8d9;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

#anipaca-qtip-box .aqtip-tag-hd {
    background: #8ee08a;
    color: #0c140e;
}

#anipaca-qtip-box .aqtip-meta {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #dce8dd;
}

#anipaca-qtip-box .aqtip-meta div {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px;
}

#anipaca-qtip-box .aqtip-meta span {
    color: #8ee08a;
    font-weight: 600;
}

#anipaca-qtip-box .aqtip-desc {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: #b7c6b9;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#anipaca-qtip-box .aqtip-actions {
    display: flex;
    gap: 8px;
}

#anipaca-qtip-box .aqtip-play,
#anipaca-qtip-box .aqtip-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

#anipaca-qtip-box .aqtip-play {
    flex: 1;
    background: #8ee08a;
    color: #0c140e !important;
}

#anipaca-qtip-box .aqtip-more {
    min-width: 88px;
    background: #243028;
    color: #fff !important;
}

#anipaca-qtip-poster {
    position: fixed;
    z-index: 2147482995;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    transform: scale(.96);
    transform-origin: center center;
    border: 1px solid rgba(142, 224, 138, .55);
    box-shadow:
        0 0 0 1px rgba(142, 224, 138, .2),
        0 0 32px rgba(142, 224, 138, .32),
        0 18px 50px rgba(0, 0, 0, .55);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

#anipaca-qtip-poster.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1.04);
}

#anipaca-qtip-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#anipaca-qtip-box .aqtip-head {
    display: none;
}

@media (max-width: 768px) {
    #anipaca-qtip-back {
        pointer-events: auto;
        background: rgba(8, 12, 10, .72);
    }

    #anipaca-qtip-poster {
        display: none !important;
    }

    #anipaca-qtip-box,
    #anipaca-qtip-box.show,
    #anipaca-qtip-box.show[hidden] {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100%;
        max-height: min(86vh, 640px);
        overflow: auto;
        border-radius: 22px 22px 0 0;
        transform: translateY(110%);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .45), 0 0 28px rgba(142, 224, 138, .2);
    }

    #anipaca-qtip-box.show,
    #anipaca-qtip-box.show[hidden] {
        transform: translateY(0);
    }

    #anipaca-qtip-box .aqtip-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 0;
    }

    #anipaca-qtip-box .aqtip-thumb {
        width: 64px;
        height: 90px;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 0 16px rgba(142, 224, 138, .35);
        flex-shrink: 0;
    }

    #anipaca-qtip-box .aqtip-close {
        margin-left: auto;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: #243028;
        color: #fff;
        font-size: 22px;
        line-height: 1;
        align-self: flex-start;
    }

    #anipaca-qtip-box .aqtip {
        padding: 12px 16px 20px;
    }

    #anipaca-qtip-box .aqtip-actions {
        position: sticky;
        bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    body.qtip-open {
        overflow: hidden;
    }
}

.film-poster .film-poster-img {
    color: transparent;
    font-size: 0;
    object-fit: cover;
}

.flw-item .film-poster {
    box-shadow: 10px 0 22px -6px rgba(142, 224, 138, .38);
}

.film_list .film_list-wrap .flw-item .film-poster::after {
    content: "";
    position: absolute;
    top: 12%;
    right: -8px;
    width: 14px;
    height: 76%;
    border-radius: 999px;
    background: rgba(142, 224, 138, .45);
    filter: blur(10px);
    pointer-events: none;
    z-index: 2;
    opacity: .8;
}

.flw-item:hover .film-poster {
    box-shadow: 14px 0 28px -4px rgba(142, 224, 138, .62);
}

.trending-list .item .film-poster {
    position: absolute !important;
    left: 40px !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
    box-shadow: none;
}

.trending-list .item .film-poster::after {
    display: none !important;
}

#modallogin.modal:not(.show) {
    display: none !important;
}

.ssl-item.watched {
    opacity: 0.8; 
     background: #4f553c !important; 
      }

.ssl-item.watched::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  color: #4CAF50; /* Green checkmark */
  font-size: 12px;
}

/* Keep active episode fully visible even if watched */
.ssl-item.active, 
.ssl-item.watched.active {
  opacity: 1;
  background-color: var(--color-primary);
}

/* Add this CSS to your existing styles */
.pc-toggle .tb-result {
    display: inline-block; /* Ensure the result is inline */
    margin-left: 5px; /* Add some space between the label and the result */
    font-weight: bold; /* Make the text bold for better visibility */
    white-space: nowrap; /* Prevent text wrapping */
}

.pc-toggle .tb-result span {
    margin-left: 5px; /* Add space between On/Off states */
}

.tick-age {
    background-color: #FF5700;
    /* Red color */
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;

    top: 0;
    left: 0;
}

.dropdown-menu {
   background: rgba(206, 211, 205, 0.568);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   min-width: 160px;
   padding: 8px 0;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   
}

.dropdown-menu .dropdown-item {
   color: rgba(0, 0, 0, 0.9);
   padding: 8px 15px;
   font-size: 14px;
   transition: all 0.2s ease;
}

.dropdown-menu .dropdown-item:hover {
   background: rgba(56, 56, 56, 0.5);
   color: #8ee08a;
}

.dropdown-menu-model {
   margin-top: 5px;
}

.dropdown-menu.show {
   display: block;
   position: absolute;
   transform: translate3d(0px, 38px, 0px);
   top: 0px;
   left: 0px;
   will-change: transform;
   z-index: 1000;
   animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translate3d(0px, 30px, 0px);
   }
   to {
      opacity: 1;
      transform: translate3d(0px, 38px, 0px);
   }
}





.episode-container {
    width: 100%;
    padding: 5px;
    background-color: #1e1e24;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.filter {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

#episode-range {

    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #444;
    border-radius: 5px;
    background-color: #2c2c34;
    color: #ddd;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#episode-range:hover {
    background-color: #3b3b44;
    color: #fff;
    border-color: #67686f;
}

.episodes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 12px;
}

.episode-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease-in-out;
    background-color: #35373d;
    color: #9ca3af;
}

.episode-item:hover {
    background-color: #67686f;
    color: #fff;
}


.episode-item.filler-highlight {
    color: #d1d5db;
    background: #35373d;
    background-image: linear-gradient(to right, #5a4944, #645a4b);
    transition: all 0.3s ease-in-out;
}

.episode-item.filler-highlight:hover {
    background: #9a6700;
    color: #fff;
}

.episode-item.active {
    background: #ff007f;
    color: #fff;
    font-weight: 600;
}

.episodes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    gap: 8px;
}

.tick-age {
    background-color: #FF5700;
    /* Red color */
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
}

.tick-item.tick-sub {
    background: #b0e3af;
    /* Blue color for sub */
    font-weight: 600;
    color: #111 !important;

}

.tick-item.tick-dub {
    background: #B9E7FF;
    /* Yellow color for dub */
    font-weight: 600;
    color: #111 !important;

}

.anime-qtip {
    position: absolute;
    z-index: 9999;
    width: 300px;
    background: #2b2b2b;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    padding: 15px;
}

.qtip-content {
    color: #fff;
}

.qtip-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.qtip-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.rating {
    color: #ffd700;
}

.quality-info {
    display: flex;
    gap: 5px;
}

.qtip-description {
    font-size: 14px;
    margin-bottom: 10px;
    color: #ccc;
}

.qtip-meta > div {
    font-size: 13px;
    margin-bottom: 5px;
    color: #ccc;
}

.qtip-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.btn-watch {
    flex: 1;
    background: #7676ff;
    color: white;
    padding: 8px;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
}

.btn-add {
    width: 40px;
    background: #3a3a3a;
    border: none;
    border-radius: 4px;
    color: white;
}

/* Zanora-style comments */
.block_area-header.justify-content-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .75rem;
}
.guidelines {
    border: 1px solid var(--main-color, #cae265);
    font-size: 12px;
    line-height: 1.2;
    padding: .3rem .3rem .3rem .6rem;
    background-color: #fff1;
    border-radius: .4rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: inherit;
    text-decoration: none;
}
.guidelines span {
    background-color: var(--main-color, #cae265);
    font-size: 10px;
    font-weight: 500;
    padding: .15rem .2rem;
    border-radius: 4px;
    color: #000;
    animation: guidelines-tag 1s infinite;
}
@keyframes guidelines-tag {
    0% { background-color: #fff; transform: scale(1); }
    50% { background-color: var(--main-color, #cae265); transform: scale(1.1); }
    100% { background-color: #fff; transform: scale(1); }
}
.no-comments {
    padding: 1.5rem 0;
    text-align: center;
    color: #aaa;
    font-size: 14px;
}
.comment-input .ci-emo {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
.comment-input .ci-emo .cb-icon {
    font-size: 16px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    color: #9d9fa6;
}
.dropdown-menu-emo {
    padding: .25rem;
    min-width: 320px;
}
.cw_l-line.comment-focus {
    outline: 1px solid var(--main-color, #cae265);
    border-radius: 6px;
}

#search-suggest {
    z-index: 4000;
}
#search-suggest .search-result-item {
    cursor: pointer;
}

#footer-about .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

#header .container {
    height: 70px !important;
}

#header #header_right {
    display: flex;
    align-items: center;
}

#header #mobile_search {
    color: #e8f3ea;
}

@media (max-width: 1299px) {
    #header #header_right {
        display: flex !important;
        align-items: center !important;
        height: 70px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: right !important;
    }

    #header #mobile_search {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        float: right !important;
        width: 40px !important;
        height: 40px !important;
        margin: 15px 10px 15px 0 !important;
        border: 1px solid rgba(142, 224, 138, .35);
        border-radius: 999px;
        color: #8ee08a !important;
        background: transparent;
        line-height: 1;
    }

    #header #mobile_search i {
        font-size: 16px !important;
        line-height: 1 !important;
        height: auto !important;
    }

    #header,
    #header .container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #header #header_right {
        position: absolute !important;
        right: 68px !important;
        top: 50% !important;
        float: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        z-index: 4;
    }

    #header #mobile_search {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        float: none !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        z-index: 4;
    }

    #header .btn-user.btn-login {
        height: 40px !important;
        line-height: 38px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 14px !important;
    }
}

@media (max-width: 400px) {
    /* The wordmark logo has no width cap, so on very narrow screens it grows
       wide enough to collide with the absolutely-positioned Login/search
       buttons on the right (which sit at `right: 68px`, ~148px reserved from
       the edge). Cap logo width relative to viewport so there's always a
       safe gap between it and the button group. */
    #header #logo {
        max-width: calc(100vw - 208px) !important;
        overflow: hidden;
    }

    #header #logo img {
        max-width: 100%;
        width: auto;
    }
}

#header .header_right-user.logged .btn-user-avatar {
    width: 36px !important;
    height: 36px !important;
    margin: 0 2px 0 8px !important;
}

#header .header_right-user.logged .btn-user-avatar .profile-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    overflow: hidden;
    background: #1a221d;
    border: 2px solid #8ee08a;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header .header_right-user.logged .btn-user-avatar .profile-avatar > i {
    color: #8ee08a;
    font-size: 15px;
    line-height: 1;
    z-index: 0;
}

#header .header_right-user.logged .btn-user-avatar .profile-avatar img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    display: block !important;
    z-index: 1;
    background: transparent;
}

.comment-input .user-avatar,
.cw_list .cw_l-line .user-avatar {
    background: #2b2f44;
    border-radius: 50%;
    overflow: hidden;
}

.layout-page-login {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

body[data-page="page_login"] #main-wrapper {
    margin-bottom: 0;
}

body[data-page="page_login"] #header,
body[data-page="page_login"] #header.header-home {
    background: #111714 !important;
}

.login-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    min-height: calc(100vh - 132px);
    align-items: stretch;
}

.login-mosaic {
    position: relative;
    overflow: hidden;
    background: #0b100d;
}

.login-mosaic-track {
    position: absolute;
    top: -8%;
    left: -10%;
    display: grid;
    grid-template-columns: repeat(6, 170px);
    gap: 10px;
    width: max-content;
    animation: login-mosaic-pan 42s linear infinite alternate;
    will-change: transform;
}

.login-mosaic-img {
    width: 170px;
    height: 240px;
    object-fit: cover;
    border-radius: 8px;
    background: #151c18;
}

.login-mosaic-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13,18,16,.35) 0%, rgba(13,18,16,.55) 55%, #111714 100%),
                linear-gradient(0deg, #111714 0%, rgba(13,18,16,.15) 40%, rgba(13,18,16,.35) 100%);
    pointer-events: none;
}

.login-mosaic-copy {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 48px;
    z-index: 2;
    max-width: 520px;
    text-shadow: 0 4px 24px rgba(0,0,0,.7);
}

.login-mosaic-copy h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.login-mosaic-copy p {
    color: #d7e8d9;
    font-size: 16px;
    line-height: 1.5;
}

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111714;
    padding: 28px 36px 40px;
    border-left: 1px solid #2b3a30;
}

.login-form-card {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.login-form-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #e8f3ea;
    margin: 0 0 1.25rem;
    line-height: 1.25;
    text-align: left;
}

.preform-login .form-group {
    margin-bottom: 14px;
    text-align: left;
}

.preform-login .prelabel {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #9eb0a3;
}

.preform-login .form-control {
    width: 100%;
    height: 46px;
    padding: 10px 14px;
    background: #1a221d !important;
    border: 1px solid #2b3a30 !important;
    border-radius: 10px !important;
    color: #f0f7f1 !important;
    box-shadow: none !important;
}

.preform-login .form-control::placeholder {
    color: #6d7d72;
}

.preform-login .form-control:focus {
    border-color: #8ee08a !important;
    box-shadow: 0 0 0 2px rgba(142, 224, 138, .22) !important;
}

.preform-login .login-btn {
    margin-top: 6px;
}

.preform-login .btn-primary {
    height: 46px;
    font-weight: 600;
    border-radius: 10px !important;
}

.login-form-footer {
    margin: 1rem 0 0;
    font-size: 14px;
    color: #9eb0a3;
    text-align: center;
}

.login-form-footer .link-highlight {
    color: #8ee08a !important;
    font-weight: 500;
}

.login-form-back {
    display: inline-block;
    margin-top: 1.25rem;
    font-size: 13px;
    color: #9eb0a3 !important;
    text-align: center;
    width: 100%;
}

.login-form-back:hover {
    color: #8ee08a !important;
}

@keyframes login-mosaic-pan {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-18%, -14%, 0); }
}

@media (max-width: 900px) {
    .login-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .login-panel {
        border-left: none;
        border-top: 1px solid #2b3a30;
        padding: 32px 20px 40px;
    }
    .login-mosaic {
        min-height: 240px;
    }
    .login-mosaic-copy {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }
    .login-mosaic-copy h2 {
        font-size: 24px;
    }
}

body[data-page="page_home"] #main-content .film_list.film_list-row,
body[data-page="page_home"] #main-content .film_list {
    position: relative;
    padding-right: 0;
}

/* Row poster: clip di dalam section — tidak melebar halaman, tanpa scrollbar */
.film_list-row-clip {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
    display: block;
}

body[data-page="page_home"] #main-content .film_list-row-clip > .film_list-wrap,
body[data-page="page_detail"] #main-content .film_list-row-clip > .film_list-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 4px 2px 6px;
    overflow: visible !important;
    box-sizing: border-box;
}

body[data-page="page_home"] #main-content,
body[data-page="page_home"] #main-content .container,
body[data-page="page_home"] #main-content .block_area,
body[data-page="page_home"] #main-content .film_list {
    max-width: 100% !important;
    min-width: 0 !important;
}

body[data-page="page_home"] #main-content .film_list .film_list-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 4px 2px 6px;
    min-width: 0 !important;
    max-width: none !important;
    width: max-content !important;
    box-sizing: border-box;
}

body[data-page="page_home"] #main-content .film_list .film_list-wrap .flw-item,
body[data-page="page_home"] #main-content .film_list.film_list-grid .film_list-wrap .flw-item,
body[data-page="page_home"] #main-content .film_list.film_list-wfeature .film_list-wrap .flw-item {
    flex: 0 0 168px !important;
    width: 168px !important;
    max-width: 168px !important;
    margin: 0 16px 0 0 !important;
    float: none !important;
}

body[data-page="page_home"] #main-content .film_list.film_list-row {
    position: relative;
    max-width: 100%;
    overflow: hidden !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
}

body[data-page="page_home"] #main-content .film_list .film_list-wrap {
    scroll-snap-type: x proximity;
}

body[data-page="page_home"] #main-content .film_list .film_list-wrap.film_list-auto-scroll {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

body[data-page="page_home"] #main-content .film_list .film_list-wrap.film_list-auto-scroll .flw-item-clone {
    pointer-events: none;
}

body[data-page="page_home"] #main-content .film_list .flw-item .film-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
}

body[data-page="page_home"] #main-content .film_list .flw-item .fd-infor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 11px;
    color: #9eb0a3;
    margin-top: 4px;
    line-height: 1.3;
}

body[data-page="page_home"] #main-content .film_list .flw-item .fd-infor .fdi-date {
    color: #b8c9bb;
}

body[data-page="page_home"] #main-content .film_list .flw-item .fd-infor .dot {
    display: none;
}

body[data-page="page_home"] #main-content .block_area_category .block_area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

body[data-page="page_home"] #main-content .block_area_category .bah-heading,
body[data-page="page_home"] #main-content .block_area_category .viewmore {
    float: none !important;
    margin: 0 !important;
}

.row-navi {
    display: none !important;
}

@media (max-width: 991px) {
    body[data-page="page_home"] #main-content .film_list.film_list-row,
    body[data-page="page_home"] #main-content .film_list {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        max-width: 100% !important;
    }

    body[data-page="page_home"] #main-content .film_list-row-clip {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body[data-page="page_home"] #main-content .film_list .film_list-wrap,
    body[data-page="page_home"] #main-content .film_list-row-clip > .film_list-wrap {
        display: flex !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        width: max-content !important;
        max-width: none !important;
        min-width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    body[data-page="page_home"] #main-content .film_list .film_list-wrap .flw-item,
    body[data-page="page_home"] #main-content .film_list.film_list-grid .film_list-wrap .flw-item,
    body[data-page="page_home"] #main-content .film_list.film_list-wfeature .film_list-wrap .flw-item {
        flex: 0 0 132px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        margin: 0 10px 0 0 !important;
        float: none !important;
    }

    body[data-page="page_home"] #main-content .film_list .flw-item .film-poster {
        background: #1c2620;
    }

    body[data-page="page_home"] #main-content .film_list .flw-item .film-name a {
        color: #eef7ef !important;
    }

    body[data-page="page_home"] #main-content .film_list-row-clip {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        min-height: 210px;
    }

    #anime-trending .trending-list,
    #trending-home {
        height: auto !important;
        opacity: 1 !important;
        animation: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: 0 0 8px !important;
        margin: 0 !important;
    }

    #trending-home:after {
        display: none !important;
    }

    #trending-home .swiper-container,
    #trending-home .swiper-wrapper {
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
    }

    #trending-home .swiper-wrapper {
        display: flex !important;
        width: max-content !important;
    }

    #trending-home .swiper-slide {
        width: 118px !important;
        height: auto !important;
        margin-right: 10px !important;
        flex: 0 0 118px !important;
    }

    .trending-list .item {
        width: 118px !important;
        height: auto !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
        display: block !important;
    }

    .trending-list .item .film-poster {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        display: block !important;
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 145% !important;
        border-radius: 10px;
        overflow: hidden !important;
    }

    .trending-list .item .number {
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        right: auto !important;
        bottom: auto !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 8px;
        background: #8ee08a !important;
        z-index: 4;
        overflow: hidden;
    }

    .trending-list .item .number span {
        position: static !important;
        display: block;
        color: #0c140e !important;
        font-size: 13px !important;
        line-height: 26px !important;
        text-align: center;
        transform: none !important;
    }

    .trending-list .item .number .film-title {
        display: none !important;
    }

    .share-buttons.share-buttons-home .share-buttons-block {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 4px 0 16px !important;
    }

    .share-buttons.share-buttons-home .sbb-title {
        flex: 1 1 140px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .share-buttons.share-buttons-home .sbb-title p {
        display: inline;
        margin-left: 4px;
    }
}

/* APFC: 4 kolom, daftar vertikal (bukan carousel) */
.anif-blocks {
    margin-top: 8px;
}

.anif-blocks .anif-block {
    min-height: 0 !important;
    padding: 14px 14px 4px;
    margin-bottom: 0;
    background: #141b17;
    border: 1px solid #2b3a30;
    border-radius: 12px;
    height: 100%;
}

.anif-block .anif-block-header {
    color: #8ee08a !important;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(43, 58, 48, .8);
}

.anif-blocks .anif-block-ul ul.ulclear {
    display: block !important;
    overflow: visible !important;
    padding: 0;
    margin: 0;
}

.anif-blocks .anif-block-ul li,
#anime-featured .anif-blocks .anif-block .anif-block-ul li,
#anime-featured .anif-blocks .anif-block .anif-block-ul li:nth-of-type(n+5) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 0;
}

.anif-blocks .anif-block-ul li:last-child {
    border-bottom: none !important;
}

.anif-blocks .anif-block-ul li .film-poster {
    position: relative !important;
    width: 48px !important;
    min-width: 48px !important;
    padding-bottom: 68px !important;
    height: 0 !important;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: none !important;
}

.anif-blocks .anif-block-ul li .film-detail {
    flex: 1;
    min-width: 0;
    padding: 0 0 0 10px !important;
}

.anif-blocks .anif-block-ul li .film-name {
    margin-bottom: 4px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.anif-blocks .anif-block-ul li .fd-infor {
    font-size: 11px;
}

.anif-blocks .anif-block-ul li .tick {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.anif-blocks .anif-block-ul li .clearfix {
    display: none;
}

.anif-block .more {
    border-top: 1px solid rgba(43, 58, 48, .6);
    margin-top: 4px;
}

.anif-block .more a {
    font-size: 13px;
    padding: 10px 0 6px !important;
    color: #8ee08a !important;
}

.anif-blocks .anif-block-ul li .film-fav:hover,
.anif-blocks .anif-block-ul li .film-play:hover {
    color: #8ee08a !important;
}

/* Sidebar Top 10 — daftar vertikal + nomor kiri */
.block_area-realtime {
    position: relative;
}

.block_area-realtime .cbox.cbox-list {
    background: transparent !important;
}

.block_area-realtime .cbox-content {
    padding: 0 !important;
}

.block_area-realtime .anif-block-chart ul.ulclear {
    display: block !important;
    overflow: visible !important;
    padding: 0;
}

.block_area-realtime .cbox.cbox-list .anif-block-chart li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0 36px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    overflow: visible !important;
}

.block_area-realtime .cbox.cbox-list .anif-block-chart li .film-number {
    position: absolute !important;
    left: -36px !important;
    top: 50% !important;
    width: 28px !important;
    transform: translateY(-50%) !important;
    text-align: center;
}

.block_area-realtime .cbox.cbox-list .anif-block-chart li .film-number span {
    display: inline-block;
    font-size: 15px !important;
    font-weight: 600;
    color: rgba(255, 255, 255, .35) !important;
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
    min-width: 0;
    height: auto;
}

.block_area-realtime .cbox.cbox-list .anif-block-chart li.item-top .film-number span {
    color: #8ee08a !important;
    border-bottom: 2px solid #8ee08a !important;
    padding-bottom: 2px !important;
    background: transparent !important;
}

.block_area-realtime .cbox.cbox-list .anif-block-chart li .film-poster {
    position: relative !important;
    width: 46px !important;
    min-width: 46px !important;
    padding-bottom: 64px !important;
    height: 0 !important;
    border-radius: 6px;
    flex-shrink: 0;
}

.block_area-realtime .cbox.cbox-list .anif-block-chart li .film-detail {
    flex: 1;
    min-width: 0;
    padding: 0 0 0 10px !important;
}

.block_area-realtime .cbox.cbox-list .anif-block-chart li .film-name {
    font-size: 13px !important;
    margin-bottom: 4px !important;
}

.block_area-realtime .cbox.cbox-list .anif-block-chart li .clearfix {
    display: none;
}

.hs-toggles .hst-item .hst-icon,
.hs-toggles .hst-item .hst-icon i,
.sb-setting .hs-toggles .hst-item .hst-icon i,
#sidebar_menu .hst-item .hst-icon i,
#header .hst-item .hst-icon i {
    color: #8ee08a !important;
}

.hs-toggles .hst-item .toggle-onoff>span {
    background: #8ee08a !important;
}

#header #mobile_menu.active i,
#header #mobile_search.active i,
#header .btn-on-header:hover,
#header .hst-item:hover .hst-icon,
#header .hst-item:hover .name,
#header .select-anime-name,
.search-content .filter-icon,
.sidebar_menu-list .nav-item.active > .nav-link,
.sidebar_menu-list .nav-link:hover,
.anw-tabs .nav-link.active,
.pre-tabs .nav-item .nav-link.active,
.viewmore .btn,
.more a,
.ftaz,
.bah-tab-min .nav-link.active {
    color: #8ee08a !important;
}

.pre-pagination .pagination .page-item .page-link,
.pagination .page-item .page-link {
    background: #1a221d !important;
    color: #c5d4c8 !important;
    border: none !important;
}

.pre-pagination .pagination .page-item .page-link:hover,
.pagination .page-item .page-link:hover {
    color: #8ee08a !important;
    background: #223028 !important;
}

.pre-pagination .pagination .page-item.active .page-link,
.pagination .page-item.active .page-link {
    background: #8ee08a !important;
    color: #0c140e !important;
}

.search-content .filter-icon,
.search-content .search-icon:hover {
    color: #8ee08a !important;
}

#header .btn-login,
#header .btn-user.btn-primary {
    background: #8ee08a !important;
    border-color: #8ee08a !important;
    color: #0c140e !important;
}

.header-setting .hst-item:hover .hst-icon,
.trending-navi > div:hover,
.swiper-pagination-bullet-active {
    background: #8ee08a !important;
}

/* Shortcut labels are already visible. Bootstrap's white tooltip was clipped
   ("opular Anime List") and sat on top of the hero. */
#header .tooltip,
#sidebar_menu .tooltip,
.header-setting .tooltip,
.hs-toggles > .tooltip {
    display: none !important;
}

.anw-tabs .nav-link.active,
.bah-tab-min .nav-link.active,
.pre-tabs .nav-item .nav-link.active {
    background: transparent !important;
    border-bottom-color: #8ee08a !important;
}

.cbox.cbox-genres ul li a:hover,
.color-list .nav-link:hover {
    color: #8ee08a !important;
    border-color: #8ee08a !important;
}

ul.az-list li a:hover,
ul.az-list li.active a,
.footer-az ul.az-list li.active a,
.main-az ul.az-list li.active a {
    color: #0c140e !important;
    background: #8ee08a !important;
}

.anif-block .more a,
.block_area .block_area-header .viewmore .btn {
    color: #8ee08a !important;
}

.form-control:focus,
.search-content input.search-input:focus {
    border-color: #8ee08a !important;
    box-shadow: 0 0 0 2px rgba(142, 224, 138, .25) !important;
}

.dropdown-menu,
#user_menu {
    background: #141b17 !important;
    border-color: #2b3a30 !important;
}

#user_menu .dropdown-item:hover,
#user_menu .dropdown-item:focus {
    background: #1e2a22 !important;
    color: #8ee08a !important;
}

/* Keep the account menu inside the screen. JS moves it to <body>. */
#user_menu.dropdown-menu,
#user_menu.dropdown-menu.show {
    position: fixed !important;
    top: 76px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(280px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 96px) !important;
    margin: 0 !important;
    z-index: 5000 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.dropdown-menu:not(.show) {
    display: none !important;
}

#user_menu .dropdown-item-user .user-detail .name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #8ee08a !important;
    margin-bottom: 2px !important;
}

#user_menu .dropdown-item-user .user-detail .mail {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #8a9a8f !important;
}

#user_menu .dropdown-item-user .user-detail .mail a {
    color: inherit !important;
    text-decoration: none !important;
}

#user_menu .grid-menu .dropdown-item {
    display: flex !important;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

.tick-item.tick-sub {
    background: #8ee08a !important;
    color: #0c140e !important;
}

.swiper-pagination-bullet-active,
.table_schedule-date .swiper-slide.active,
.day-item.active {
    background: #8ee08a !important;
    color: #0c140e !important;
}

/* ===== EN/JP + toggle switches (styles.min uses #ffbade) ===== */
.select-anime-name.toggle-lang,
.toggle-lang {
    background: #243028 !important;
    border: 1px solid #2b3a30;
}

.toggle-lang > span {
    font-weight: 600;
}

.toggle-lang > span.en,
.toggle-lang.off > span.jp {
    background: #8ee08a !important;
    color: #0c140e !important;
}

.toggle-lang > span.jp,
.toggle-lang.off > span.en {
    background: transparent !important;
    color: #c5d4c8 !important;
}

.toggle-onoff,
.hs-toggles .hst-item .toggle-onoff,
#discussion .display-toggle .toggle-onoff,
.toggle-wrap .toggle-onoff {
    background: #243028 !important;
}

.toggle-onoff > span,
.hs-toggles .hst-item .toggle-onoff > span {
    background: #8ee08a !important;
    box-shadow: 0 0 0 1px rgba(12, 20, 14, .35);
}

.toggle-onoff.off > span {
    background: #5a6b60 !important;
}

/* ===== Bulk remap legacy pink accent (#ffbade) ===== */
body .tick-item.tick-quality,
body .tick-item.tick-dub,
body .tick-item.tick-eps,
body .badge-quality,
body .block-rating .button-rate.active,
body .cbox.cbox-list .anif-block-chart li.item-top .film-number span {
    border-color: #8ee08a !important;
    color: #8ee08a !important;
}

body .tick-item.tick-quality,
body .tick-item.tick-dub,
body .badge-quality,
body .block-rating .button-rate.active,
body .ss-list .ssl-item.ssl-item-filler.active:before,
body .ss-list .ssl-item.ssl-item-filler.active .ssli-btn .btn.btn-circle,
body .player-servers .ps_-status {
    background: #8ee08a !important;
    color: #0c140e !important;
}

body .ss-list .ssl-item.ssl-item-filler:hover .ssli-filler {
    color: #8ee08a !important;
    border-color: #8ee08a !important;
}

body .pre-tabs .nav-item .nav-link:hover,
body .anw-tabs .nav-link:hover,
body .sidebar_menu-list .nav-link:hover,
body .fdi-item a:hover,
body .footer-links a:hover,
body .ftaz:hover,
body .color-list .nav-link.active,
body .rep-in .btn:hover i {
    color: #8ee08a !important;
}

body .form-check-input:checked,
body .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #8ee08a !important;
    border-color: #8ee08a !important;
}

body .search-content .search-icon,
body .filter-icon:hover {
    color: #8ee08a !important;
}

body #sidebar_menu .btn-secondary.toggle-sidebar {
    background: #243028 !important;
    border-color: #2b3a30 !important;
    color: #8ee08a !important;
}

body .desi-buttons .btn.btn-primary,
body .desi-buttons .btn.btn-focus {
    background: #8ee08a !important;
    color: #0c140e !important;
}

/* Sidebar: genres + top 10 */
#main-sidebar {
    padding-left: 24px;
}

.cbox.cbox-genres {
    background: #141b17 !important;
    border: 1px solid #2b3a30;
    border-radius: 12px;
    padding: 12px !important;
}

.cbox.cbox-genres ul li a,
ul.color-list li:nth-of-type(n) a {
    color: #c5d4c8 !important;
    border-color: transparent !important;
    border-radius: 6px;
    padding: 8px 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.cbox.cbox-genres ul li a:hover,
ul.color-list li a:hover {
    color: #8ee08a !important;
    background: rgba(142, 224, 138, .12) !important;
}

.cbox.cbox-genres .btn-showmore,
.cbox.cbox-genres .btn-showmore.active {
    background: #243028 !important;
    border: 1px solid #2b3a30 !important;
    color: #8ee08a !important;
    border-radius: 8px;
}

.block_area_sidebar .block_area-header {
    margin-bottom: 10px;
}

.block_area-realtime .anw-tabs .nav-link {
    font-size: 12px;
    padding: 6px 10px;
    color: #c5d4c8 !important;
}

.block_area-realtime .anw-tabs .nav-link.active {
    color: #8ee08a !important;
    background: rgba(142, 224, 138, .1) !important;
    border-radius: 6px;
}

#anime-featured .container {
    overflow: hidden;
}

body[data-page="page_home"] #main-content .block_area_home .block_area-header,
body[data-page="page_home"] #main-content .block_area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

body[data-page="page_home"] #main-content .block_area-header .bah-heading {
    float: none !important;
    margin: 0 !important;
}

body[data-page="page_home"] #main-content .block_area-header .viewmore {
    float: none !important;
}

@media (max-width: 1199px) {
    #main-sidebar {
        padding-left: 0;
        margin-top: 28px;
    }
}

@media (max-width: 768px) {
    .anif-blocks .row > [class*="col-"] {
        margin-bottom: 18px;
    }
}

/* Release schedule (home sidebar / full) */
.block_area-schedule .block_area-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.block_area-schedule .block_area-header .bah-heading {
    float: none !important;
    margin: 0 !important;
}

.block_area-schedule .schedule-clock,
.schedule-full .bah-time.schedule-clock {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    display: inline-block;
    line-height: 1.35 !important;
    padding: 6px 10px !important;
    background: #141b17 !important;
    color: #c5d4c8 !important;
    border: 1px solid #2b3a30 !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 0 0 2px !important;
}

.block_area-schedule .table_schedule {
    background: #141b17;
    border: 1px solid #2b3a30;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    clear: both;
}

.block_area-schedule .table_schedule-date {
    padding: 10px 34px 8px !important;
    background: #111714;
    border-bottom: 1px solid #2b3a30;
}

.block_area-schedule .table_schedule-date .swiper-container {
    overflow: hidden;
}

.block_area-schedule .table_schedule-date .swiper-slide,
.block_area-schedule .table_schedule-date .day-item {
    height: auto !important;
    box-sizing: border-box;
}

.block_area-schedule .table_schedule-date .tsd-item {
    background: #243028 !important;
    border: 1px solid transparent;
    padding: 6px 2px !important;
    border-radius: 8px !important;
    transition: background .15s ease, border-color .15s ease;
}

.block_area-schedule .table_schedule-date .tsd-item span {
    display: block;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.15;
}

.block_area-schedule .table_schedule-date .tsd-item .date {
    color: #9eb0a3 !important;
    font-size: 11px !important;
    line-height: 1.2;
    margin-top: 1px;
}

.block_area-schedule .table_schedule-date .tsd-item:hover {
    background: #2b3a30 !important;
}

.block_area-schedule .table_schedule-date .tsd-item.active,
.table_schedule .table_schedule-date .tsd-item.active {
    background: #8ee08a !important;
    color: #0c140e !important;
    border-color: #8ee08a !important;
}

.block_area-schedule .table_schedule-date .tsd-item.active .date,
.table_schedule .table_schedule-date .tsd-item.active .date {
    color: #0c140e !important;
}

.block_area-schedule .table_schedule-date .tsd-item .date {
    color: #9eb0a3 !important;
}

.block_area-schedule .ts-navigation .btn {
    background: #243028 !important;
    border: 1px solid #2b3a30 !important;
    color: #e8f3ea !important;
    width: 24px;
    height: 24px;
    left: 4px !important;
    border-radius: 7px !important;
    padding: 0 !important;
    z-index: 2;
}

.block_area-schedule .ts-navigation .btn.tsn-next {
    left: auto !important;
    right: 4px !important;
}

.block_area-schedule .ts-navigation .btn:hover {
    background: #8ee08a !important;
    color: #0c140e !important;
}

.block_area-schedule .table_schedule-list {
    margin: 0;
    padding: 8px 14px 12px;
}

.block_area-schedule .table_schedule-list li {
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    padding: 10px 0 !important;
}

.block_area-schedule .table_schedule-list li:last-child {
    border-bottom: none !important;
}

.block_area-schedule .table_schedule .table_schedule-list li .tsl-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 10px 0 !important;
    position: relative;
}

.block_area-schedule .table_schedule .table_schedule-list li .time {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 46px;
    width: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: #8ee08a !important;
}

.block_area-schedule .table_schedule .table_schedule-list li .film-detail {
    flex: 1 1 auto;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.block_area-schedule .table_schedule .table_schedule-list li .film-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: unset;
}

.block_area-schedule .table_schedule .table_schedule-list li .film-detail .fd-play {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

.block_area-schedule .schedule-ep {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 12px;
    color: #c5d4c8;
}

.block_area-schedule .schedule-ep i {
    color: #8ee08a;
    margin-right: 4px;
}

.block_area-schedule .table_schedule-list li:hover .time,
.table_schedule .table_schedule-list li:hover .time {
    color: #b8f5b4 !important;
}

.block_area-schedule .btn-showmore,
.block_area-schedule .table_schedule .btn-showmore {
    color: #8ee08a !important;
    padding: 0 14px 12px !important;
    margin-top: 0 !important;
}

.block_area-schedule .btn-showmore:hover {
    color: #b8f5b4 !important;
}

.block_area-schedule .schedule-empty .film-name {
    font-size: 14px !important;
    color: #c5d4c8 !important;
}

.block_area-schedule .schedule-empty-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #9eb0a3;
}

/* ========== Anime detail page ========== */
body[data-page="page_detail"] #header,
body[data-page="page_detail"] #header.header-home,
body[data-page="page_detail"] #header.fixed {
    background: #111714 !important;
}

body[data-page="page_detail"] #main-wrapper {
    background: transparent;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body[data-page="page_detail"] #main-wrapper + .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body[data-page="page_detail"] .container > #main-content {
    width: 100% !important;
    float: none !important;
    max-width: 100%;
    padding-bottom: 8px;
}

.anipaca-detail {
    margin-top: 0 !important;
}

.anipaca-detail .ani_detail-stage {
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

.anipaca-detail .anis-cover-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg, rgba(17, 23, 20, .96) 0%, rgba(17, 23, 20, .78) 42%, rgba(17, 23, 20, .5) 100%),
        linear-gradient(to top, #111714 0%, transparent 50%);
    pointer-events: none;
}

.anipaca-detail .anis-cover {
    opacity: .5;
    filter: blur(32px) saturate(1.15);
}

.anipaca-detail .ani_detail-stage > .container {
    position: relative;
    z-index: 2;
}

.anipaca-detail .anis-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    gap: 16px 28px;
    padding: 12px 0 8px !important;
    align-items: start;
}

.anipaca-detail .anisc-poster {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 220px;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    box-shadow: none !important;
}

.anipaca-detail .anisc-poster .film-poster {
    padding-bottom: 0 !important;
    height: auto !important;
    background: transparent !important;
    overflow: hidden;
    border-radius: 14px;
    line-height: 0;
}

.anipaca-detail .anisc-poster .film-poster::after {
    display: none !important;
    content: none !important;
}

.anipaca-detail .anisc-poster .film-poster-img {
    position: relative !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(142, 224, 138, .18);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}

.anipaca-detail .anisc-detail {
    padding: 0 !important;
    padding-right: 0 !important;
    min-height: 0 !important;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}

.anipaca-detail .anis-content > .detail-about-card {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 4px;
}

.anipaca-detail .detail-meta-panel {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 8px 0 12px !important;
    background: rgba(26, 34, 29, .94) !important;
    border: 1px solid #2b3a30;
    border-radius: 14px;
    padding: 16px 18px 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
}

.anipaca-detail .anisc-info {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 20px;
}

.anipaca-detail .anisc-info-heading.detail-meta-heading {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8ee08a !important;
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.anipaca-detail .detail-overview-mobile,
.anipaca-detail .anisc-info-heading.w-hide {
    display: none !important;
}

.anipaca-detail .anisc-info .item-title:not(.w-hide) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0 !important;
    align-items: flex-start;
    min-width: 0;
}

.anipaca-detail .anisc-info .item .item-head {
    margin-bottom: 0 !important;
    color: #9eb0a3;
    font-weight: 500;
    font-size: 12px;
}

.anipaca-detail .anisc-info .item .name {
    color: #e8f3ea;
    font-size: 13px;
    line-height: 1.4;
}

.anipaca-detail .anisc-info .item-list {
    grid-column: 1 / -1;
    border: none;
    padding: 8px 0 0;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.anipaca-detail .anisc-info .item-list .item-head {
    display: block;
    margin-bottom: 8px;
    color: #9eb0a3;
    font-size: 12px;
}

.anipaca-detail .anisc-info .item-list a {
    background: rgba(142, 224, 138, .08);
    border-color: rgba(142, 224, 138, .28);
    color: #b8f5b4 !important;
    font-size: 11px;
    margin: 0 4px 6px 0;
}

.anipaca-detail .anisc-info .item-list a:hover {
    background: rgba(142, 224, 138, .2);
    border-color: #8ee08a;
    color: #0c140e !important;
}

.anipaca-detail .prebreadcrumb {
    margin-bottom: 8px !important;
}

.anipaca-detail .prebreadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.anipaca-detail .prebreadcrumb .breadcrumb-item a {
    color: #9eb0a3;
}

.anipaca-detail .prebreadcrumb .breadcrumb-item a:hover {
    color: #8ee08a !important;
}

.anipaca-detail .prebreadcrumb .breadcrumb-item.active {
    color: #dce8dd;
}

.anipaca-detail .film-name {
    font-size: clamp(1.5rem, 2.8vw, 2.15rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
    color: #f2f8f3 !important;
    font-weight: 700;
}

.detail-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #2b3a30;
    background: #1a221d;
    color: #dce8dd;
}

.detail-badge-score {
    border-color: rgba(142, 224, 138, .35);
    color: #8ee08a;
}

.detail-badge-score .fa-star {
    color: #f0c040;
    font-size: 11px;
}

.detail-badge-status {
    background: rgba(142, 224, 138, .1);
    border-color: rgba(142, 224, 138, .28);
    color: #b8f5b4;
}

.anipaca-detail .film-stats {
    margin-bottom: 18px !important;
}

.anipaca-detail .film-stats .tick-item {
    background: rgba(36, 48, 40, .95) !important;
    border: 1px solid #3a4f42 !important;
    color: #e8f3ea !important;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 12px;
}

.anipaca-detail .film-stats .tick-item.tick-pg {
    background: #8ee08a !important;
    color: #0c140e !important;
    border-color: #8ee08a !important;
}

.anipaca-detail .film-stats .tick .item {
    color: #9eb0a3;
}

.anipaca-detail .film-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px !important;
}

.anipaca-detail .film-buttons .btn-play {
    font-weight: 700;
    padding: 11px 26px !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 20px rgba(142, 224, 138, .22) !important;
    background: #8ee08a !important;
    background-color: #8ee08a !important;
    border-color: #8ee08a !important;
    color: #0c140e !important;
}

.anipaca-detail .film-buttons .btn-play i,
.anipaca-detail .film-buttons .btn-play:hover,
.anipaca-detail .film-buttons .btn-play:focus {
    color: #0c140e !important;
    background: #8ee08a !important;
    border-color: #8ee08a !important;
}

.anipaca-detail .film-buttons .btn-light {
    background: #243028 !important;
    border: 1px solid #2b3a30 !important;
    color: #e8f3ea !important;
    border-radius: 999px !important;
}

.anipaca-detail .film-buttons .btn-light:hover {
    border-color: #8ee08a !important;
    color: #8ee08a !important;
}

.anipaca-detail .detail-about-card {
    margin-top: 6px;
    padding: 16px 18px;
    background: rgba(26, 34, 29, .72);
    border: 1px solid #2b3a30;
    border-radius: 14px;
}

.anipaca-detail .detail-about-card .film-description {
    margin-bottom: 0;
}

.anipaca-detail .film-description .text {
    font-size: 14px;
    line-height: 1.65;
    color: #c5d4c8;
    max-width: none;
}

.anipaca-detail .btn-more-desc {
    color: #8ee08a !important;
}

.anipaca-detail .film-text,
.anipaca-detail .anisc-info .film-text {
    display: none !important;
}

.anipaca-detail .detail-share.share-buttons-min {
    margin-top: 14px !important;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.anipaca-detail .detail-share .share-buttons-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.anipaca-detail .detail-share .sbb-title {
    font-size: 13px;
    color: #9eb0a3;
}

.anipaca-detail .detail-share .sbb-title p {
    display: none;
}

body[data-page="page_detail"] #main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* share-buttons-detail (used on the watch page) had no layout rules at all —
   it fell back to default block stacking, wrapping the share icons unevenly. */
.share-buttons.share-buttons-detail .share-buttons-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 4px 0 16px;
}

.share-buttons.share-buttons-detail .sbb-title {
    flex: 1 1 140px;
    margin: 0;
}

.share-buttons.share-buttons-detail .sbb-title p {
    display: inline;
    margin-left: 4px;
}

body[data-page="page_detail"] #main-content .block_area {
    background: #1a221d;
    border: 1px solid #2b3a30;
    border-radius: 14px;
    padding: 14px 16px 18px;
    margin-bottom: 18px;
}

body[data-page="page_detail"] #main-content .block_area:first-child {
    margin-top: 0 !important;
}

body[data-page="page_detail"] #ani_detail {
    margin-bottom: 0 !important;
}

body[data-page="page_detail"] .block_area-header {
    margin-bottom: 14px;
}

body[data-page="page_detail"] .block_area-header .cat-heading {
    font-size: 1.05rem;
    margin: 0;
}

body[data-page="page_detail"] .block_area-header .viewmore .btn {
    color: #8ee08a !important;
    font-size: 13px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body[data-page="page_detail"] .block_area-seasons .os-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #3a4f42 transparent;
}

body[data-page="page_detail"] .block_area-seasons .os-item {
    flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid #2b3a30;
    background: #243028;
}

body[data-page="page_detail"] .block_area-seasons .os-item.active {
    border-color: #8ee08a;
    box-shadow: 0 0 0 1px rgba(142, 224, 138, .25);
}

body[data-page="page_detail"] .block_area-seasons .os-item.active .title {
    color: #0c140e !important;
    background: #8ee08a !important;
}

body[data-page="page_detail"] .block_area-actors .bac-list-wrap,
body[data-page="movie_watch"] .block_area-actors .bac-list-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px;
}

body[data-page="page_detail"] .block_area-actors .bac-item,
body[data-page="movie_watch"] .block_area-actors .bac-item {
    background: #243028;
    border: 1px solid #2b3a30;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 !important;
}

body[data-page="page_detail"] .block_area-actors .per-info,
body[data-page="movie_watch"] .block_area-actors .per-info {
    height: 70px;
}

body[data-page="page_detail"] .block_area-promotions .screen-items .item {
    background: #243028;
    border: 1px solid #2b3a30;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

body[data-page="page_detail"] .block_area-promotions .screen-item-thumbnail {
    border-radius: 10px;
    overflow: hidden;
}

body[data-page="page_detail"] #main-content .block_area_category .film_list.film_list-row {
    position: relative;
    max-width: 100%;
    overflow: hidden !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
}


body[data-page="page_detail"] #main-content .block_area_category .film_list .film_list-wrap .flw-item {
    flex: 0 0 168px !important;
    width: 168px !important;
    max-width: 168px !important;
    margin: 0 16px 0 0 !important;
    float: none !important;
}

body[data-page="page_detail"] #main-content .block_area_category .film_list .flw-item .film-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
}

body[data-page="page_detail"] .premodal-characters .modal-content {
    background: #1a221d !important;
    border: 1px solid #2b3a30;
    border-radius: 14px;
}

body[data-page="page_detail"] .premodal-characters .modal-header {
    border-bottom-color: #2b3a30;
}

@media (max-width: 991px) {
    .anipaca-detail .anis-content {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 16px 18px;
        padding: 20px 0 16px !important;
    }

    .anipaca-detail .anisc-poster {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 110px;
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
    }

    .anipaca-detail .anisc-detail {
        grid-column: 2;
        grid-row: 1;
    }

    .anipaca-detail .anisc-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .anipaca-detail .detail-about-card.m-hide {
        display: none !important;
    }

    .anipaca-detail .detail-overview-mobile {
        display: block !important;
        grid-column: 1 / -1;
        margin-bottom: 4px !important;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .anipaca-detail .detail-overview-mobile .text {
        font-size: 13px;
        line-height: 1.55;
        color: #c5d4c8;
        max-height: 120px;
        overflow: auto;
    }
}

@media (max-width: 575px) {
    .anipaca-detail .anis-content {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .anipaca-detail .anisc-poster {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        width: min(168px, 72vw) !important;
        max-width: 168px;
        margin: 0 auto 12px;
    }

    .anipaca-detail .anisc-detail {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }

    .anipaca-detail .anis-content > .detail-about-card {
        grid-column: 1;
        grid-row: 3;
    }

    .anipaca-detail .anisc-poster .film-poster,
    .anipaca-detail .anisc-poster .film-poster-img {
        min-height: 1px;
    }

    .anipaca-detail .prebreadcrumb .breadcrumb {
        justify-content: center;
    }

    .anipaca-detail .detail-hero-badges,
    .anipaca-detail .film-buttons {
        justify-content: center;
    }

    .anipaca-detail .anisc-info {
        grid-template-columns: 1fr;
    }
}

body[data-page="page_home"] #main-content .block_area-content.block_area-list,
body[data-page="page_detail"] #main-content .block_area-content.block_area-list {
    min-width: 0;
    max-width: 100%;
}

/* === Watch (classic Anipaca — pre-theater / tanpa rail season lama) === */
.anipaca-watch.ap-theater {
    margin-top: 0 !important;
}

.anipaca-watch .ani_detail-stage {
    margin-bottom: 0 !important;
    position: relative;
    min-height: 0;
}

.anipaca-watch .anis-cover-wrap {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    min-height: 240px;
    overflow: hidden;
    pointer-events: none;
}

.anipaca-watch .anis-cover-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg, rgba(17, 23, 20, .97) 0%, rgba(17, 23, 20, .82) 45%, rgba(17, 23, 20, .55) 100%),
        linear-gradient(to top, #111714 0%, transparent 55%);
    pointer-events: none;
}

.anipaca-watch .anis-cover {
    opacity: .45;
    filter: blur(28px) saturate(1.1);
}

.anipaca-watch-heading {
    margin-bottom: 16px;
}

.anipaca-watch-heading .film-name {
    margin: 0 0 8px;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: 700;
    line-height: 1.25;
    color: #eef7ef;
}

.anipaca-watch-meta {
    margin: 0;
    font-size: 13px;
    color: #9cb8a4;
}

.anipaca-watch-meta .watch-ep-accent {
    color: var(--ap-watch-accent, #8ee08a);
    font-weight: 700;
}

.anipaca-watch-meta a {
    color: #8ee08a !important;
    font-weight: 600;
    text-decoration: none !important;
}

.anipaca-watch-meta a:hover {
    text-decoration: underline !important;
}

.ap-theater .ap-ep-panel-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--ap-watch-line);
    background: rgba(0, 0, 0, .22) !important;
    min-height: 0 !important;
    position: relative !important;
}

.ap-theater .ap-ep-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #eef7ef;
    line-height: 1.35;
}

.ap-theater .ap-ep-panel-head .ap-ep-range-select {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

/* === Anipaca Theater (watch) — layout sendiri, bukan clone sidebar lama === */
.ap-theater {
    margin-top: 0 !important;
    --ap-watch-accent: #8ee08a;
    --ap-watch-bg: #0a0f0d;
    --ap-watch-panel: rgba(18, 26, 22, .88);
    --ap-watch-line: rgba(142, 224, 138, .14);
}

.ap-theater-stage {
    margin-bottom: 0 !important;
    background:
        radial-gradient(ellipse 80% 55% at 50% -15%, rgba(142, 224, 138, .12), transparent 55%),
        var(--ap-watch-bg);
}

.ap-theater .ap-theater-bg {
    position: absolute;
    inset: auto auto 0 0;
    width: min(42vw, 320px);
    height: 200px;
    opacity: .35;
    pointer-events: none;
    mask-image: linear-gradient(135deg, #000 20%, transparent 75%);
    -webkit-mask-image: linear-gradient(135deg, #000 20%, transparent 75%);
}

.ap-theater .ap-theater-bg::after {
    display: none;
}

.ap-theater .ap-theater-bg .anis-cover {
    opacity: .5;
    filter: blur(40px) saturate(1.2);
}

.ap-theater .ani_detail-stage > .container {
    position: relative;
    z-index: 2;
}

.ap-theater .anis-watch-wrap {
    width: 100% !important;
    padding: 16px 12px 32px !important;
}

/* Jangan pakai tinggi 570px dari tema lama */
.ap-theater.anis-watch-tv .player-frame,
body[data-page="movie_watch"] .ap-theater .anis-watch-tv .player-frame {
    padding-bottom: 56.25% !important;
    height: auto !important;
}

.ap-theater-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ap-theater-head {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 14px 12px;
    background: var(--ap-watch-panel);
    border: 1px solid var(--ap-watch-line);
    border-left: 4px solid var(--ap-watch-accent);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ap-theater-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: #c5d4c8 !important;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}

.ap-theater-back:hover {
    background: rgba(142, 224, 138, .15);
    color: var(--ap-watch-accent) !important;
}

.ap-theater-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--ap-watch-line);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}

.ap-theater-kicker {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6d8a75;
    margin-bottom: 2px;
}

.ap-theater-titles .film-name {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    line-height: 1.25;
    font-weight: 700;
    color: #eef7ef;
}

.ap-theater-ep {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--ap-watch-accent);
    font-variant-numeric: tabular-nums;
}

.ap-theater-link {
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ap-watch-line);
    color: #c5d4c8 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.ap-theater-link:hover {
    border-color: var(--ap-watch-accent);
    color: var(--ap-watch-accent) !important;
}

.ap-theater-layout.anis-watch-tv {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* Player + episode sidebar (kiri ep, kanan video) — rata kiri, bukan tengah */
.ap-theater {
    --ap-player-max: 640px;
    --ap-ep-sidebar-w: 260px;
}

.ap-watch-stage {
    display: grid;
    grid-template-columns: minmax(200px, var(--ap-ep-sidebar-w)) minmax(0, var(--ap-player-max));
    gap: 14px;
    align-items: start;
    justify-content: start;
    width: 100%;
}

.ap-player-unit {
    width: 100%;
    max-width: var(--ap-player-max);
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--ap-watch-line);
    background: linear-gradient(180deg, rgba(22, 30, 26, .98) 0%, rgba(12, 16, 14, .98) 100%);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .45),
        0 0 0 1px rgba(142, 224, 138, .06);
}

.ap-theater-screen {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.ap-theater .ap-theater-screen.watch-player {
    width: 100% !important;
    float: none !important;
}

.ap-player-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a9a8e;
    background: rgba(0, 0, 0, .35);
    border-bottom: 1px solid rgba(142, 224, 138, .1);
}

.ap-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8ee08a;
    box-shadow: 0 0 8px rgba(142, 224, 138, .75);
    animation: ap-live-pulse 2s ease-in-out infinite;
}

@keyframes ap-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .65; transform: scale(.92); }
}

.ap-player-topbar-ep {
    margin-left: auto;
    color: var(--ap-watch-accent);
    font-variant-numeric: tabular-nums;
}

.ap-theater .ap-player-frame.player-frame {
    padding-bottom: 56.25% !important;
    margin: 0 !important;
    background: #000 !important;
    border-radius: 0;
}

.ap-theater .ap-player-frame iframe {
    border: none;
}

.ap-theater-deck.ap-player-deck {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 14px 14px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--ap-watch-line);
    border-radius: 0;
}

/* Sidebar episode (vertikal) */
.ap-theater .ap-ep-sidebar.ap-ep-rail {
    margin-top: 0 !important;
    width: 100% !important;
    min-width: 0;
    min-height: 200px;
    max-height: min(560px, calc(100vh - 200px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    grid-column: 1;
    grid-row: 1;
}

.ap-watch-stage .ap-player-unit {
    grid-column: 2;
    grid-row: 1;
}

.ap-theater .ap-ep-sidebar .ap-ep-rail-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.ap-theater .ap-ep-sidebar .ap-ep-rail-head {
    flex-shrink: 0;
}

.ap-theater .ap-ep-sidebar .ap-ep-range-select {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
}

.ap-theater .ap-ep-sidebar-list.ss-list {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-items: stretch;
    max-height: min(480px, calc(100vh - 260px));
    scroll-snap-type: none;
}

.ap-theater .ap-ep-sidebar-list .ssl-item {
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    padding: 8px 10px !important;
    text-align: left !important;
    scroll-snap-align: none;
}

.ap-theater .ap-ep-sidebar-list .ssl-item .ssli-order {
    flex: 0 0 26px;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center;
}

.ap-theater .ap-ep-sidebar-list .ssl-item .ssli-detail {
    display: block !important;
    flex: 1;
    min-width: 0;
    text-align: left !important;
}

.ap-theater .ap-ep-sidebar-list .ssl-item .ssli-detail .ep-name {
    font-size: 12px;
    line-height: 1.35;
    color: #c5d4c8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-theater .ap-ep-sidebar-list .ssl-item .ssli-btn {
    display: none !important;
}

.ap-theater .ap-ep-sidebar-list .ssl-item.active {
    background: rgba(142, 224, 138, .15) !important;
    border-color: var(--ap-watch-accent) !important;
}

.ap-theater .ap-ep-sidebar-list .ssl-item.active .ssli-order {
    color: var(--ap-watch-accent) !important;
}

.ap-theater .ap-ep-sidebar-list.ss-list-min .ssl-item {
    width: 100% !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
}

.ap-theater .ap-ep-sidebar-list.ss-list-min .ssl-item .ssli-order {
    font-size: 12px !important;
}

@media (max-width: 991px) {
    .ap-watch-stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .ap-watch-stage .ap-ep-sidebar {
        order: 2;
        max-height: min(320px, 45vh);
    }

    .ap-watch-stage .ap-player-unit {
        order: 1;
        max-width: 100%;
    }

    .ap-theater .ap-ep-sidebar-list.ss-list {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-height: none;
    }

    .ap-theater .ap-ep-sidebar-list .ssl-item {
        flex: 0 0 auto;
        width: 64px !important;
        flex-direction: column !important;
        padding: 8px 6px !important;
        text-align: center !important;
    }

    .ap-theater .ap-ep-sidebar-list .ssl-item .ssli-detail {
        display: none !important;
    }

    .ap-theater .ap-ep-sidebar-list .ssl-item .ssli-order {
        font-size: 16px !important;
    }
}

/* Reset legacy HiAnime server panel (pink sidebar + purple box) */
.ap-theater .player-servers {
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    background: transparent !important;
    border: none !important;
    position: static !important;
    overflow: visible !important;
}

.ap-theater .player-servers #servers-content {
    min-height: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
}

.ap-theater .player-servers .ps_-status {
    display: none !important;
}

.ap-theater .ap-stream-meta {
    margin: 0 0 12px;
    font-size: 12px;
    color: #9cb8a4;
}

.ap-theater .ap-stream-meta #server-notice-ep {
    color: var(--ap-watch-accent);
    font-weight: 700;
}

.ap-theater .player-servers .ps_-block {
    position: static !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    border: none !important;
    overflow: visible !important;
}

.ap-theater .player-servers .ps_-block .ps__-title {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 36px;
    margin: 0 !important;
    padding: 0 12px;
    line-height: 1 !important;
    font-size: 12px !important;
    font-weight: 700;
    color: #8ee08a !important;
    background: rgba(142, 224, 138, .12);
    border: 1px solid rgba(142, 224, 138, .35);
    border-radius: 999px;
    box-sizing: border-box;
}

.ap-theater .player-servers .ps_-block .ps__-title i {
    color: var(--ap-watch-accent) !important;
    width: auto !important;
}

.ap-theater .player-servers .ps__-list .item {
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ap-theater-qualities {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.ap-theater .ap-stream-meta {
    margin: 0 !important;
}

.ap-theater .ps_-block {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

.ap-theater .ps__-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.ap-theater .ps__-list .item .btn,
.ap-theater .btn-server {
    border-radius: 999px !important;
    padding: 8px 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid #2b3a30 !important;
    color: #dce8de !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.ap-theater .ps__-list .item .btn.btn-server.active,
.ap-theater .btn-server.active,
body[data-page="movie_watch"] .ap-theater .ps__-list .item .btn.btn-server.active,
body[data-page="movie_watch"] .ap-theater .btn-server.active {
    background: #8ee08a !important;
    border-color: #8ee08a !important;
    color: #0c140e !important;
}

.ap-theater-controls.player-controls {
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px dashed var(--ap-watch-line);
    background: transparent !important;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ap-theater .player-controls .pc-item {
    float: none !important;
    margin: 0 !important;
}

.ap-theater .player-controls .pc-right {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ap-theater .player-controls .pc-item .btn {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid #2b3a30 !important;
    color: #e8f5e9 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    white-space: nowrap;
}

.ap-theater .player-controls .pc-item .btn i {
    transform: none !important;
    margin: 0 !important;
    line-height: 1;
}

.ap-theater .player-controls .toggle-basic .tb-result {
    color: var(--ap-watch-accent) !important;
}

.ap-theater .toggle-basic.off .tb-result:before {
    color: #6d756f !important;
}

/* Episode rail horizontal (hanya jika BUKAN sidebar samping player) */
.ap-theater .ap-ep-rail:not(.ap-ep-sidebar),
.ap-theater #episodes-content:not(.ap-ep-sidebar) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    bottom: auto !important;
    margin-top: 14px;
    min-height: 108px;
    background: var(--ap-watch-panel) !important;
    border: 1px solid var(--ap-watch-line);
    border-radius: 16px;
    padding: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.ap-theater .ap-ep-sidebar.ap-ep-rail,
.ap-theater #episodes-content.ap-ep-sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    background: var(--ap-watch-panel) !important;
    border: 1px solid var(--ap-watch-line);
    border-radius: 16px;
    padding: 0;
}

.ap-theater .ap-ep-rail-inner,
.ap-theater .ap-ep-rail .seasons-block,
.ap-theater .ap-ep-rail .detail-seasons,
.ap-theater .ap-ep-rail .detail-infor-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    flex: 1;
    min-height: 0;
}

.ap-theater .ap-ep-empty {
    margin: 0;
    padding: 20px 16px 24px;
    font-size: 13px;
    color: #9cb8a4;
    text-align: center;
}

.ap-theater .ap-ep-range-select {
    width: 150px;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.ap-theater .ap-ep-rail-head {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    min-height: 44px;
    padding: 10px 14px !important;
    background: rgba(0, 0, 0, .2) !important;
    border-bottom: 1px solid var(--ap-watch-line);
}

.ap-theater .ap-ep-rail-head .ssc-list {
    position: static !important;
    transform: none !important;
}

.ap-theater .ap-ep-rail-head .ssc-label {
    font-size: 13px;
    font-weight: 700;
    color: #eef7ef;
}

.ap-theater .ap-ep-count {
    color: var(--ap-watch-accent);
}

.ap-theater .ap-ep-rail-head #episode-range {
    margin-left: 10px !important;
    background: #121a16;
    border-color: #2b3a30;
    color: #c5d4c8;
    border-radius: 8px;
    font-size: 11px;
}

.ap-theater .ss-list:not(.ap-ep-sidebar-list) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 14px 14px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-height: none !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.ap-theater .ss-list:not(.ap-ep-sidebar-list) .ssl-item {
    flex: 0 0 auto;
    width: 72px !important;
    min-height: 76px;
    margin: 0 !important;
    padding: 10px 6px 8px !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid transparent;
    scroll-snap-align: center;
    text-align: center;
    transition: transform .12s, border-color .12s, background .12s;
}

.ap-theater .ss-list:not(.ap-ep-sidebar-list) .ssl-item::before {
    display: none !important;
}

.ap-theater .ss-list:not(.ap-ep-sidebar-list) .ssl-item .ssli-order {
    position: static !important;
    transform: none !important;
    width: auto !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #8a9a8e !important;
    line-height: 1.1;
}

.ap-theater .ss-list:not(.ap-ep-sidebar-list) .ssl-item .ssli-detail {
    display: none;
}

.ap-theater .ss-list:not(.ap-ep-sidebar-list) .ssl-item .ssli-btn {
    display: none;
}

.ap-theater .ss-list:not(.ap-ep-sidebar-list) .ssl-item:hover {
    transform: translateY(-2px);
    border-color: var(--ap-watch-line);
    background: rgba(142, 224, 138, .08) !important;
}

.ap-theater .ss-list:not(.ap-ep-sidebar-list) .ssl-item.active {
    background: rgba(142, 224, 138, .18) !important;
    border-color: var(--ap-watch-accent) !important;
    box-shadow: 0 0 0 1px rgba(142, 224, 138, .25);
}

.ap-theater .ss-list:not(.ap-ep-sidebar-list) .ssl-item.active .ssli-order {
    color: var(--ap-watch-accent) !important;
}

.ap-theater .ss-list.ss-list-min:not(.ap-ep-sidebar-list) .ssl-item {
    width: 48px !important;
    min-height: 48px;
    padding: 8px 4px !important;
}

.ap-theater .ss-list.ss-list-min:not(.ap-ep-sidebar-list) .ssl-item .ssli-order {
    font-size: 14px !important;
}

.ap-theater .ss-list.ss-list-min:not(.ap-ep-sidebar-list) {
    font-size: 14px !important;
    text-align: left !important;
    padding: 12px 14px 14px !important;
}

.ap-theater .ss-list.ss-list-min .ssl-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ap-theater .ss-list.ssl-item-filler {
    opacity: .65;
}

.ap-theater .seasons-block-max .ss-list {
    top: auto !important;
}

.ap-theater .seasons-block-max .ss-choice {
    min-height: 0 !important;
}

.ap-theater .anis-watch-detail,
.ap-theater .prebreadcrumb {
    display: none !important;
}

.ap-theater .schedule-alert {
    margin: 0;
}

.ap-theater .schedule-alert .alert {
    border-radius: 12px;
    background: rgba(142, 224, 138, .08);
    border-color: var(--ap-watch-line);
    color: #c5d4c8;
}

.ap-theater .other-season {
    padding: 14px 16px;
    background: var(--ap-watch-panel);
    border: 1px solid var(--ap-watch-line);
    border-radius: 16px;
}

.ap-theater .other-season .os-title {
    font-size: 13px;
    font-weight: 700;
    color: #9cb8a4;
    margin-bottom: 10px;
}

.ap-theater .other-season .os-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

body[data-page="movie_watch"] #main-wrapper {
    min-height: 0;
    padding-top: 70px;
}

body[data-page="movie_watch"] #main-content {
    width: 100% !important;
    float: none !important;
    max-width: 100%;
}

body[data-page="movie_watch"] #main-sidebar,
body[data-page="movie_watch"] .block_area-genres {
    display: none !important;
}

/* Watch: matikan layout lama (sidebar 300px + episode absolute) */
body[data-page="movie_watch"] #ani_detail.ap-theater {
    margin-top: 0 !important;
}

body[data-page="movie_watch"] .layout-page-watchtv .ani_detail-stage > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
}

body[data-page="movie_watch"] .ap-theater .anis-watch,
body[data-page="movie_watch"] .ap-theater .anis-watch-tv,
body[data-page="movie_watch"] .ap-theater .anis-watch.ap-theater-layout {
    padding-left: 0 !important;
    width: 100% !important;
    float: none !important;
}

body[data-page="movie_watch"] .ap-theater #episodes-content,
body[data-page="movie_watch"] .ap-theater #episodes-content.ap-ep-sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
}

body[data-page="movie_watch"] .ap-theater .seasons-block,
body[data-page="movie_watch"] .ap-theater .seasons-block-max,
body[data-page="movie_watch"] .ap-theater .ap-ep-rail-inner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
}

body[data-page="movie_watch"] .ap-theater #episodes-content .ss-list,
body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list.ss-list {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

body[data-page="movie_watch"] .ap-theater .ss-choice {
    position: relative !important;
    min-height: 0 !important;
}

body[data-page="movie_watch"] .ap-theater .ss-choice .ssc-list,
body[data-page="movie_watch"] .ap-theater .ap-ep-rail-head .ssc-list {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    float: none !important;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item .ssli-order {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item .ssli-detail .ep-name {
    padding: 0 !important;
}

body[data-page="movie_watch"] .layout-page-watchtv .anis-watch-wrap,
body[data-page="movie_watch"] .ap-theater .anis-watch-wrap {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 12px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
}

body[data-page="movie_watch"] .ap-theater-shell {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
}

body[data-page="movie_watch"] .ap-watch-stage {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

body[data-page="movie_watch"] .ap-player-unit {
    margin: 0 !important;
    justify-self: stretch;
    max-width: none !important;
    width: 100%;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list.ss-list {
    display: none !important;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list.ss-list.is-on {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-content: start;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 6px;
    max-height: min(520px, 62vh);
    margin: 0 !important;
    padding: 8px !important;
    scrollbar-width: thin;
    scrollbar-color: #3d4a42 transparent;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    height: 34px !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
    border-radius: 8px;
    background: #2a3330 !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    box-sizing: border-box;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item:nth-of-type(odd) {
    background: #2a3330 !important;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item .ssli-order {
    flex: 0 0 auto !important;
    width: auto !important;
    display: block !important;
    line-height: 1 !important;
    font-size: 13px !important;
    font-weight: 600;
    color: #e8eee9 !important;
    text-align: center;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item .ssli-detail {
    display: none !important;
}

body[data-page="movie_watch"] #main-content {
    max-width: 100%;
    overflow-x: hidden;
}

body[data-page="movie_watch"] .ap-hrow {
    max-width: 100%;
    overflow: hidden;
}

body[data-page="movie_watch"] .ap-hrow .cat-heading {
    color: #eef7ef;
}

body[data-page="movie_watch"] .ap-hrow .film_list.film_list-grid .film_list-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #3d4a42 transparent;
}

body[data-page="movie_watch"] .ap-hrow .film_list.film_list-grid .film_list-wrap .flw-item {
    float: none !important;
    flex: 0 0 132px !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    margin: 0 !important;
}

body[data-page="movie_watch"] .ap-hrow .film-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    color: #eef7ef;
}

body[data-page="movie_watch"] .ap-hrow-empty {
    margin: 0;
    color: #9cb8a4;
    font-size: 13px;
}

body[data-page="movie_watch"] .ap-ep-panel-head,
body[data-page="movie_watch"] .ap-ep-tools {
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

body[data-page="movie_watch"] .ap-ep-tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar #episode-range.ap-ep-range-select,
body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar .ap-ep-filter {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    height: 40px !important;
    padding: 0 12px !important;
    line-height: 38px !important;
    background: #121a16 !important;
    border: 1px solid #2b3a30 !important;
    color: #c5d4c8 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar #episode-range.ap-ep-range-select {
    padding-right: 32px !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238ee08a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-color: #121a16 !important;
}

body[data-page="movie_watch"] .ap-server-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

body[data-page="movie_watch"] .ap-watching-note {
    background: rgba(142, 224, 138, .12);
    border: 1px solid rgba(142, 224, 138, .28);
    border-radius: 12px;
    padding: 12px;
    color: #eef7ef;
    font-size: 13px;
}

body[data-page="movie_watch"] .ap-watching-note strong,
body[data-page="movie_watch"] .ap-watching-note span {
    display: block;
}

body[data-page="movie_watch"] .ap-watching-note span {
    color: #8ee08a;
    font-weight: 700;
    margin: 4px 0 8px;
}

body[data-page="movie_watch"] .ap-watching-note p {
    margin: 0;
    color: #c5d4c8;
    font-size: 12px;
    line-height: 1.4;
}

body[data-page="movie_watch"] .other-season {
    width: 100%;
    margin-top: 8px;
    padding: 14px;
    background: rgba(18, 26, 22, .88);
    border: 1px solid rgba(142, 224, 138, .14);
    border-radius: 16px;
}

body[data-page="movie_watch"] .other-season .os-title {
    color: #eef7ef;
    margin-bottom: 10px;
}

body[data-page="movie_watch"] .os-list .os-item {
    width: calc(16.66% - 1rem);
}

body[data-page="movie_watch"] .other-season:not(.is-open) .os-item.os-extra {
    display: none !important;
}

body[data-page="movie_watch"] .os-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(142, 224, 138, .35);
    background: #121a16;
    color: #8ee08a;
    font-weight: 700;
    cursor: pointer;
}

body[data-page="movie_watch"] .os-item {
    background: #1c2620;
}

@media (max-width: 767px) {
    body[data-page="movie_watch"] .ap-server-row,
    body[data-page="movie_watch"] .ap-watch-stage {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="movie_watch"] .os-list .os-item {
        width: calc(50% - 1rem);
    }
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item.active::before {
    display: none !important;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item.active {
    border: 1px solid #8ee08a !important;
    background: #8ee08a !important;
    box-shadow: none !important;
}

body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item.active .ssli-order {
    color: #0c140e !important;
}

/* Header watch: tetap fixed & bisa diklik (tema lama ubah jadi relative di ≤1299px) */
body[data-page="movie_watch"] #header,
body[data-page="movie_watch"] #header.header-home {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10050 !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

body[data-page="movie_watch"] #header .container {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
}

body[data-page="movie_watch"] #header #mobile_menu,
body[data-page="movie_watch"] #header #mobile_search,
body[data-page="movie_watch"] #header #search,
body[data-page="movie_watch"] #header #header_right,
body[data-page="movie_watch"] #header a,
body[data-page="movie_watch"] #header button,
body[data-page="movie_watch"] #header input {
    pointer-events: auto !important;
}

body[data-page="movie_watch"] #search .search-content {
    display: block;
    background: #141b17 !important;
    border: 1px solid rgba(142, 224, 138, .35);
    border-radius: 999px;
    padding: 0 !important;
    overflow: hidden;
    height: 42px;
}

body[data-page="movie_watch"] .search-content form {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    margin: 0;
    position: relative;
}

body[data-page="movie_watch"] .search-content input.search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    background: transparent !important;
    color: #eef7ef !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 42px !important;
    padding: 0 8px !important;
    line-height: 42px;
}

body[data-page="movie_watch"] .search-content input.search-input::placeholder {
    color: #8a9a8e;
}

body[data-page="movie_watch"] .search-content .search-icon,
body[data-page="movie_watch"] .search-content .search-icon i {
    color: #8ee08a !important;
}

body[data-page="movie_watch"] .search-content .filter-icon,
body[data-page="movie_watch"] .search-content .search-icon {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    flex: 0 0 auto;
    transform: none !important;
}

body[data-page="movie_watch"] .search-content .filter-icon {
    width: 32px !important;
    height: 32px !important;
    margin: 0 0 0 5px !important;
    padding: 0 !important;
    line-height: 32px !important;
    text-align: center;
    font-size: 0 !important;
    background: #243028 !important;
    color: #8ee08a !important;
    border-radius: 999px;
}

body[data-page="movie_watch"] .search-content .filter-icon:before {
    content: "\f0b0";
    font-family: "Font Awesome 5 Free";
    font-size: 13px;
    font-weight: 900;
    line-height: 32px;
}

body[data-page="movie_watch"] .search-content .search-icon {
    width: 36px !important;
    height: 36px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    line-height: 36px !important;
    background: transparent !important;
}

body[data-page="movie_watch"] #ani_detail,
body[data-page="movie_watch"] #ani_detail.ap-theater {
    margin-top: 0 !important;
}

body[data-page="movie_watch"] .ani_detail-stage,
body[data-page="movie_watch"] .anis-cover-wrap {
    pointer-events: none;
}

body[data-page="movie_watch"] .ani_detail-stage .container,
body[data-page="movie_watch"] .anis-watch-wrap,
body[data-page="movie_watch"] .anis-watch-wrap a,
body[data-page="movie_watch"] .anis-watch-wrap button {
    pointer-events: auto;
}

#anipaca-qtip-back:not(.show) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#sidebar_menu_bg:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 1299px) {
    body[data-page="movie_watch"] #mobile_search {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        float: right !important;
        width: 40px !important;
        height: 40px !important;
        margin: 15px 10px 15px 0 !important;
        z-index: 5;
        color: #8ee08a !important;
        cursor: pointer;
        border: 1px solid rgba(142, 224, 138, .35);
        border-radius: 999px;
        background: transparent;
    }

    body[data-page="movie_watch"] #search {
        display: none !important;
        position: fixed !important;
        top: 76px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: 520px;
        margin: 0 auto !important;
        float: none !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 10070 !important;
    }

    body[data-page="movie_watch"] #search.active {
        display: block !important;
    }

    body[data-page="movie_watch"] #search .search-content,
    body[data-page="movie_watch"] #search.active .search-content {
        display: block !important;
        background: #141b17 !important;
        border: 1px solid rgba(142, 224, 138, .35);
        border-radius: 999px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
        padding: 0 !important;
        overflow: hidden;
    }

    body[data-page="movie_watch"] #header_right {
        display: flex !important;
        align-items: center !important;
        height: 70px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: right !important;
    }

    body[data-page="movie_watch"] #header .btn-user.btn-login {
        height: 40px !important;
        line-height: 38px !important;
        margin: 0 8px 0 0 !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    body[data-page="movie_watch"] #main-wrapper {
        padding-top: 70px !important;
    }

    body[data-page="movie_watch"] #header #mobile_menu {
        position: absolute !important;
        z-index: 5;
    }
}

@media (min-width: 1300px) {
    body[data-page="movie_watch"] #main-wrapper {
        padding-top: 70px !important;
    }
}

@media (max-width: 991px) {
    body[data-page="movie_watch"] .ap-watch-stage {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    body[data-page="movie_watch"] .ap-watch-stage .ap-player-unit {
        order: 1;
        grid-column: 1;
        grid-row: 1;
        max-width: 100% !important;
    }

    body[data-page="movie_watch"] .ap-watch-stage .ap-ep-sidebar {
        order: 2;
        grid-column: 1;
        grid-row: 2;
        max-height: none;
    }

    body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list.ss-list.is-on {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-height: 220px;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item {
        width: auto !important;
        height: 34px !important;
        margin: 0 !important;
        float: none !important;
        justify-content: center !important;
    }

    body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list .ssl-item .ssli-order {
        flex: 0 0 auto !important;
    }

    body[data-page="movie_watch"] .ap-server-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="movie_watch"] .anipaca-watch-heading .film-name {
        font-size: 1.15rem;
    }

    body[data-page="movie_watch"] .ap-player-deck,
    body[data-page="movie_watch"] .ap-theater-qualities,
    body[data-page="movie_watch"] .ap-theater .ps_-block {
        width: 100%;
        min-width: 0;
    }

    body[data-page="movie_watch"] .ap-watching-note {
        padding: 10px 12px;
    }

    body[data-page="movie_watch"] .ap-theater .ps__-list {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    body[data-page="movie_watch"] .ap-theater .ps__-list .item {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    body[data-page="movie_watch"] .ap-theater .ps__-list .item .btn,
    body[data-page="movie_watch"] .ap-theater .btn-server {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px 4px !important;
        line-height: 1.2 !important;
        text-align: center;
        box-sizing: border-box;
    }

    body[data-page="movie_watch"] .ap-theater-controls.player-controls {
        padding-top: 12px !important;
    }

    body[data-page="movie_watch"] .player-controls .pc-item,
    body[data-page="movie_watch"] .player-controls .pc-item.pc-toggle {
        float: none !important;
        margin: 0 !important;
        width: 100%;
    }

    body[data-page="movie_watch"] .ap-theater-controls .pc-toggle {
        width: auto;
    }

    body[data-page="movie_watch"] .ap-theater-controls {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    body[data-page="movie_watch"] .toggle-basic {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        min-height: 36px;
        padding: 6px 8px;
        line-height: 1.2;
        font-size: 11px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid #2b3a30;
        border-radius: 10px;
        box-sizing: border-box;
    }

    body[data-page="movie_watch"] .toggle-basic .tb-name {
        min-width: 0;
        white-space: normal;
        line-height: 1.15;
    }

    body[data-page="movie_watch"] .toggle-basic .tb-result {
        width: auto !important;
        flex: 0 0 auto;
    }

    body[data-page="movie_watch"] .player-controls .pc-right {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 8px;
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    body[data-page="movie_watch"] .player-controls .pc-right .pc-item {
        width: auto;
    }

    body[data-page="movie_watch"] .player-controls .pc-item .btn {
        width: 100%;
        height: 36px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 8px !important;
        box-sizing: border-box;
    }

    body[data-page="movie_watch"] .other-season {
        padding: 12px;
    }

    body[data-page="movie_watch"] .other-season .os-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0 !important;
    }

    body[data-page="movie_watch"] .os-list .os-item {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        height: 64px !important;
        float: none !important;
    }

    body[data-page="movie_watch"] .layout-page-watchtv .ani_detail-stage > .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 575px) {
    body[data-page="movie_watch"] .header-setting,
    body[data-page="movie_watch"] .header-group {
        display: none !important;
    }

    body[data-page="movie_watch"] .ap-theater .ap-ep-sidebar-list.ss-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* === Theme lock: ganti sisa pink/salmon (#ffbade, #fc887b) === */
body .btn-primary,
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:active,
body .btn-focus,
body .btn-focus:hover,
body .btn-focus:focus,
body .btn-focus:active,
body a.btn.btn-primary,
body a.btn.btn-focus,
body a.btn.btn-play,
body .btn.btn-play,
body .anis-content .anisc-detail .film-buttons .btn-primary,
body .anis-content .anisc-detail .film-buttons .btn-play,
body .deslide-item .desi-buttons .btn-primary,
body .deslide-item .desi-buttons .btn-focus {
    background: #8ee08a !important;
    background-color: #8ee08a !important;
    border-color: #8ee08a !important;
    color: #0c140e !important;
}

body .btn-primary i,
body .btn-primary .fas,
body .btn-play i,
body .btn-play .fas,
body .btn-focus i {
    color: #0c140e !important;
}

body .pre-qtip-button .btn.btn-play,
body .pre-qtip-button .btn.btn-play:hover {
    background: #8ee08a !important;
    color: #0c140e !important;
}

body .share-buttons .share-buttons-block .sbb-title span,
body .share-buttons .sbb-title span {
    color: #8ee08a !important;
}

body .anis-content .anisc-detail .film-buttons .btn-fav.active {
    color: #8ee08a !important;
    border-color: #8ee08a !important;
    background: transparent !important;
}

body .highlight-text,
body .anif-block .anif-block-header,
body .block_area .cat-heading,
body h2.cat-heading {
    color: #8ee08a !important;
}

@media (max-width: 759px) {
    #footer .footer-joingroup {
        float: none;
        margin: 8px auto 4px;
        justify-content: center;
    }

    #footer .footer-joingroup .anw-group {
        background: transparent !important;
        color: #eef7ef !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #footer .footer-joingroup .zrg-list {
        float: none;
        height: auto;
        justify-content: center;
        gap: 10px;
    }

    #footer .footer-links ul {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 18px;
    }

    #footer .footer-links ul li {
        display: inline-flex !important;
        margin: 0 !important;
        float: none !important;
    }

    #footer .footer-links ul li a {
        white-space: nowrap;
        line-height: 1.4;
    }
}

/* First-visit picker: Anime or Movies. Does not change anime data. */
html.ap-gate-open,
html.ap-gate-open body {
    overflow: hidden !important;
}

body[data-page="page_welcome"] {
    margin: 0;
    background: #0b100d;
    overflow: hidden;
}

.ap-watch-gate {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #0b100d;
    overflow: hidden;
}

a.ap-watch-pick {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.ap-watch-mosaic {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #0b100d;
}

.ap-watch-mosaic .login-mosaic-track {
    top: -12%;
    left: -8%;
}

.ap-watch-mosaic-fade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(8, 12, 10, .42) 0%, rgba(8, 12, 10, .78) 58%, #0b100d 100%);
    pointer-events: none;
}

.ap-watch-gate[hidden] {
    display: none !important;
}

.ap-watch-gate-card {
    position: relative;
    z-index: 2;
    width: min(720px, 100%);
    text-align: center;
}

.ap-watch-gate-card h2 {
    margin: 0 0 28px;
    color: #fff;
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .7);
}

.ap-watch-gate-row {
    display: flex;
    justify-content: center;
    gap: 18px;
}

.ap-watch-pick {
    width: 168px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #d7e6da;
    cursor: pointer;
}

.ap-watch-pick-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 168px;
    border-radius: 28px;
    border: 1px solid rgba(142, 224, 138, .28);
    background: rgba(17, 23, 20, .62);
    color: #e8f3ea;
    backdrop-filter: blur(8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.ap-watch-pick svg {
    width: 54px;
    height: 54px;
}

.ap-watch-pick > span {
    display: block;
    margin-top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .85);
}

.ap-watch-pick:hover .ap-watch-pick-face,
.ap-watch-pick:focus-visible .ap-watch-pick-face,
.ap-watch-pick.is-on .ap-watch-pick-face {
    border-color: #8ee08a;
    background: #1b2a20;
    color: #8ee08a;
    box-shadow: 0 0 0 1px #8ee08a, 0 0 28px rgba(142, 224, 138, .35);
}

.ap-watch-pick.is-on span,
.ap-watch-pick:hover span {
    color: #8ee08a;
}

.ap-watch-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    background: #8ee08a;
    color: #0c140e;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}

.ap-watch-pick.is-on .ap-watch-check {
    display: flex;
}

@media (max-width: 520px) {
    .ap-watch-gate-row {
        gap: 12px;
    }

    .ap-watch-pick {
        width: 140px;
    }

    .ap-watch-pick-face {
        height: 140px;
        border-radius: 22px;
    }
}