.za-item{
    position:relative;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.04);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    will-change:transform;
    transform:translateZ(0);
}

.za-item:hover{
    background:var(--bg-hover);
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.za-item img{
    width:100%;
    height:240px;
    object-fit:cover;
    border-radius:0;
    margin-bottom:0;
    transition:transform .35s ease;
}
.za-item:hover img{
    transform:scale(1.04);
}
.za-item h3{
    color:var(--text-white);
    font-size:15px;
    font-weight:700;
    line-height:1.4;
    padding:12px;
    margin:0;
}

.so-tap-badge{
    position:absolute;
    top:12px;
    right:12px;
    background:rgba(239,68,68,.92);
    color:var(--text-white);
    padding:6px 10px;
    font-size:12px;
    font-weight:700;
    border-radius:999px;
    box-shadow:0 8px 18px rgba(0,0,0,.28);
}

.za-card{
    background:linear-gradient(180deg, var(--bg-card), var(--bg-card-2));
    border:1px solid rgba(255,255,255,.04);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:20px;
    box-shadow:var(--shadow-soft);
}

.za-cover{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:28px;
    align-items:start;
}

.za-cover img{
    width:220px;
    aspect-ratio:2/3;
    border-radius:var(--radius);
    object-fit:cover;
    box-shadow:var(--shadow-soft);
}

.za-title{
    font-size:32px;
    line-height:1.18;
    font-weight:800;
    letter-spacing:-0.6px;
    color:var(--text-white);
    margin-top:4px;
}
.za-cover-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100%;
}

.za-meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.za-meta-item{
    padding:8px 14px;
    border-radius:999px;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.05);

    font-size:13px;
    color:var(--text-main);
}
.za-meta-link{
    text-decoration:none;
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.za-meta-link:hover{
    background:rgba(139,92,246,.16);
    border-color:rgba(139,92,246,.28);
    color:#fff;
    transform:translateY(-1px);
}
.za-favorite-btn{
    padding:8px 14px;
    border-radius:999px;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.05);

    color:var(--text-main);
    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.za-favorite-btn:hover{
    background:rgba(236,72,153,.16);
    color:#fff;
    border-color:rgba(236,72,153,.28);

    transform:translateY(-1px);
}

.za-favorite-btn.active{
    background:linear-gradient(
        135deg,
        #ec4899,
        #f43f5e
    );

    color:#fff;

    border-color:rgba(255,255,255,.12);

    box-shadow:
        0 8px 20px rgba(236,72,153,.22);
}
/* ===============================
   SINGLE CTA
================================ */

.za-single-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:22px;
}

.za-listen-now-btn{
    min-height:50px;
    padding:0 24px;
    border:0;
    border-radius:999px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    color:#fff;

    font-size:15px;
    font-weight:900;
    letter-spacing:-0.2px;

    cursor:pointer;

    box-shadow:0 14px 32px rgba(139,92,246,.32);

    transition:transform .25s ease, box-shadow .25s ease;
}

.za-listen-now-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 42px rgba(139,92,246,.38);
}

.za-listen-now-btn:active{
    transform:scale(.96);
}
.za-scroll-episodes-btn{
    min-height:50px;
    padding:0 22px;
    border-radius:999px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);

    color:var(--text-white);
    font-size:15px;
    font-weight:800;
    text-decoration:none;

    transition:background .25s ease, transform .25s ease, border-color .25s ease;
}

.za-scroll-episodes-btn:hover{
    background:rgba(139,92,246,.16);
    border-color:rgba(139,92,246,.28);
    transform:translateY(-2px);
}

.za-scroll-episodes-btn:active{
    transform:scale(.96);
}
.za-share-btn{
    min-height:50px;
    padding:0 22px;
    border:none;
    border-radius:999px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);

    color:var(--text-white);
    font-size:15px;
    font-weight:800;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.za-share-btn:hover{
    background:rgba(59,130,246,.16);
    border-color:rgba(59,130,246,.28);
    transform:translateY(-2px);
}

.za-share-btn:active{
    transform:scale(.96);
}
.za-share-wrap{
    position:relative;
    display:inline-flex;
}

.za-share-menu{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:50;

    min-width:170px;
    padding:8px;

    display:none;
    flex-direction:column;
    gap:6px;

    border-radius:16px;
    background:linear-gradient(
        180deg,
        rgba(22,31,56,.98),
        rgba(17,24,39,.98)
    );
    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 18px 42px rgba(0,0,0,.32);
}

.za-share-menu.active{
    display:flex;
}

.za-share-option{
    width:100%;
    min-height:40px;
    padding:0 12px;

    display:flex;
    align-items:center;

    border:0;
    border-radius:12px;

    background:rgba(255,255,255,.055);
    color:var(--text-white);

    font-size:14px;
    font-weight:800;
    text-decoration:none;

    cursor:pointer;
}

.za-share-option:hover{
    background:rgba(139,92,246,.18);
}
.za-cover-desc{
    margin-top:22px;

    font-size:15px;
    line-height:1.8;
    color:var(--text-main);

    opacity:.88;

    max-width:700px;
}

/* ===============================
   DESCRIPTION
================================ */

.za-description{
    position:relative;

    color:var(--text-main);
    line-height:1.8;
    opacity:.92;
    font-size:15px;

    transition:max-height .3s ease, opacity .3s ease;
}

.za-description.collapsed{
    max-height:130px;
    overflow:hidden;
}

.za-description.collapsed::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:48px;

    background:linear-gradient(
        to bottom,
        transparent,
        var(--bg-card)
    );
}

.za-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;

    margin-top:12px;

    color:var(--primary);
    cursor:pointer;

    font-size:14px;
    font-weight:600;

    transition:color .25s ease, transform .25s ease;
}

.za-toggle:hover{
    color:var(--primary-hover);
    transform:translateX(1px);
}
.za-home-dark{
    background:var(--bg-main);
    color:var(--text-white);
    padding-bottom:140px;
}

.za-section{
    padding:24px 16px;
}
/* ===============================
   TYPOGRAPHY HIERARCHY
================================ */

.za-section h2,
.za-home-dark h2{
    font-size:28px;
    line-height:1.08;
    font-weight:900;
    letter-spacing:-0.8px;
    color:var(--text-white);
}

/* ===============================
   SECTION HEAD
================================ */

.za-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;

    margin:0 16px 22px;
}

.za-section-kicker{
    margin-bottom:6px;

    color:var(--accent);

    font-size:11px;
    font-weight:900;
    letter-spacing:1px;

    text-transform:uppercase;
}

.za-section-more{
    flex-shrink:0;

    color:var(--text-muted);
    font-size:13px;
    font-weight:700;

    transition:color .25s ease;
}

.za-section-more:hover{
    color:#fff;
}

.za-section > p,
.za-home-dark p{
    color:var(--text-muted);
}
.za-scroll-row{
    display:flex;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
    padding:0 32px 14px;
    overscroll-behavior-x:contain;
}
.za-scroll-row:hover .za-card-dark{
    opacity:.82;
}

.za-scroll-row .za-card-dark:hover{
    opacity:1;
}
.za-scroll-row::-webkit-scrollbar{
    display: none;
}
.za-scroll-row:active{
    cursor:grabbing;
}
.za-scroll-row .za-card-dark{
    scroll-snap-align:start;
}
/* ===============================
   HOME HERO — AUDIO APP PRO
================================ */

.za-hero{
    position:relative;
    min-height:560px;
    overflow:hidden;

    display:flex;
    align-items:flex-end;

    border-radius:0 0 34px 34px;
    background:var(--bg-main);
    box-shadow:var(--shadow-soft);
}

.za-hero > img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    transform:scale(1.02);
}

.za-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 24% 42%,
            rgba(139,92,246,.34),
            transparent 34%
        ),
        linear-gradient(
            to top,
            var(--bg-main) 0%,
            rgba(11,17,32,.92) 34%,
            rgba(11,17,32,.56) 68%,
            rgba(11,17,32,.18) 100%
        );
}

.za-hero-overlay{
    position:relative;
    z-index:2;

    width:100%;
    max-width:760px;

    padding:0 64px 72px;
}

.za-card-dark {
    flex:0 0 220px;
    min-width:220px;
    max-width:220px;
    scroll-snap-align: start;
    background: var(--bg-card);
    box-shadow:var(--shadow-soft);
    border:1px solid rgba(255,255,255,.04);
    border-radius:20px;
    padding:12px;
    text-decoration: none;
    color: var(--text-white);
    transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
    position: relative;
    display:block;
    will-change:transform;
    transform:translateZ(0);
    isolation:isolate;
}

.za-card-dark img {
    width: 100%;
    display:block;
    object-fit:cover;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    transition:transform .35s ease, opacity .25s ease;
    aspect-ratio:2/3;
}

.za-card-dark span{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;

    min-height:40px;

    font-size:14px;
    font-weight:700;
    letter-spacing:-0.2px;
    line-height:1.45;

    color:var(--text-main);

    transition:color .25s ease;
}
.za-card-dark:hover span{
    color:var(--text-white);
}
.za-card-dark::before{
    content:"";
    position:absolute;

    inset:-40%;

    background:
    radial-gradient(
        circle at top,
        rgba(255,255,255,.10),
        transparent 42%
    );

    opacity:0;
    pointer-events:none;

    transform:translateY(12px);
    transition:
    opacity .35s ease,
    transform .35s ease;

    z-index:0;
}

.za-card-dark:hover::before{
    opacity:1;
    transform:translateY(0);
}
.za-card-dark:hover {
    background: var(--bg-hover);
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(139,92,246,.18);
}
.za-card-dark:active{
    transform:scale(.97);
}
.za-card-dark:hover img {
    transform:scale(1.08) translateY(-2px);
}

.za-card-dark:hover .za-play-btn {
    opacity: 1;
    transform: translateY(-4px) scale(1);
}
.za-play-btn:hover{
    background: var(--primary);
    color: var(--text-white);
    transform: translateY(-4px) scale(1.06);
}
.za-play-btn:active{
    transform:scale(.94);
}
.za-play-center{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:3;

    width:42px;
    height:42px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    color:#fff;

    font-size:14px;
    font-weight:800;

    box-shadow:0 12px 28px rgba(139,92,246,.36);
}
.za-thumb{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-sm);
    isolation:isolate;
    box-shadow:0 12px 28px rgba(0,0,0,.24);
}

/* cinematic shadow */
.za-thumb::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.42),
        rgba(0,0,0,.08) 42%,
        transparent 72%
    );

    opacity:.88;
    transition:opacity .3s ease;
}

/* glow */
.za-thumb::after{
    content:"";
    position:absolute;
    inset:auto 10% -18px 10%;
    height:40px;

    background:rgba(139,92,246,.22);

    filter:blur(24px);

    z-index:0;
    opacity:.55;

    transition:
    opacity .3s ease,
    transform .3s ease;
}

.za-card-dark:hover .za-thumb::after{
    opacity:.85;
    transform:scale(1.06);
}

.za-card-dark:hover .za-thumb::before{
    opacity:1;
}

.za-play-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px) scale(.96);
    transition: opacity .25s ease, transform .25s ease, background .25s ease;
    font-size: 17px;
    color: #000;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
/* ===============================
   QUICK ACTION PILLS
================================ */

.za-quick-actions{
    display:flex;
    gap:10px;
    overflow-x:auto;

    margin:14px 16px 0;
    padding:0 0 4px;

    scrollbar-width:none;
}

.za-quick-actions::-webkit-scrollbar{
    display:none;
}

.za-quick-actions a{
    flex:0 0 auto;

    min-height:42px;
    padding:0 16px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.04)
    );

    border:1px solid rgba(255,255,255,.09);

    color:var(--text-main);
    font-size:13px;
    font-weight:800;

    box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.za-quick-actions a:hover{
    color:#fff;
    border-color:rgba(139,92,246,.28);
    background:rgba(139,92,246,.14);
}

.za-quick-actions a:active{
    transform:scale(.96);
}
/* ============================= */
/* CONTINUE SECTION - APP STYLE */
/* ============================= */

#za-continue-section{
    position:relative;
    z-index:2;

    margin:34px 16px 10px;
    padding:22px 18px 20px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(19,28,49,.96),
            rgba(11,17,32,.98)
        );

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 24px 48px rgba(0,0,0,.24);
}

.za-continue-title{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:20px;

    font-size:28px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-0.8px;

    color:#fff;
}

.za-empty-continue {
    width: 320px;
    padding: 40px 20px;
    border-radius: var(--radius);
    background: rgba(255,255,255,0.04);
    text-align: center;
    color: #aaa;
}

.za-empty-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.za-empty-text {
    font-weight: 600;
    margin-bottom: 6px;
}

.za-empty-sub {
    font-size: 13px;
    opacity: 0.6;
}
.za-skeleton{
    width:280px;
    flex:0 0 280px;
    height:158px;

    border-radius:var(--radius);
    overflow:hidden;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.045) 8%,
            rgba(255,255,255,.11) 18%,
            rgba(255,255,255,.045) 33%
        );

    background-size:240% 100%;
    animation:shimmer 1.35s ease-in-out infinite;

    border:1px solid rgba(255,255,255,.045);
    box-shadow:var(--shadow-soft);
}

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
/* ===============================
   ARCHIVE PRO
================================ */

.za-archive-hero{
    padding:34px;
    border-radius:28px;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(245,158,11,.18),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(22,31,56,.96),
            rgba(17,24,39,.98)
        );
}

.za-archive-hero h1{
    margin:8px 0 10px;

    color:#fff;
    font-size:42px;
    line-height:1.08;
    font-weight:900;
    letter-spacing:-1px;
}

.za-archive-hero p{
    margin:0;
    max-width:560px;

    color:var(--text-main);
    font-size:16px;
    line-height:1.7;
}

.za-archive-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.za-archive-card{
    display:block;
    color:#fff;
    text-decoration:none;
}

.za-archive-thumb{
    position:relative;
    overflow:hidden;

    border-radius:22px;

    background:var(--bg-card);

    box-shadow:var(--shadow-soft);

    isolation:isolate;
}

.za-archive-thumb img{
    width:100%;
    aspect-ratio:2/3;
    display:block;
    object-fit:cover;

    transition:transform .35s ease;
}

.za-archive-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.72),
            transparent 48%
        );

    opacity:.9;
}

.za-archive-play{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:3;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    color:#fff;

    font-size:14px;
    font-weight:900;

    box-shadow:0 12px 24px rgba(139,92,246,.32);
}

.za-archive-thumb em{
    position:absolute;
    top:12px;
    left:12px;
    z-index:3;

    padding:6px 10px;

    border-radius:999px;

    background:rgba(0,0,0,.55);
    color:#fff;

    font-size:12px;
    font-style:normal;
    font-weight:800;

    backdrop-filter:blur(8px);
}
.za-archive-status{
    position:absolute;
    left:12px;
    bottom:12px;
    z-index:3;

    padding:6px 10px;
    border-radius:999px;

    background:rgba(0,0,0,.55);
    color:#fff;

    font-size:12px;
    font-weight:800;

    backdrop-filter:blur(8px);
}

.za-archive-info{
    padding:12px 2px 0;
}

.za-archive-info strong{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;

    color:#fff;
    font-size:16px;
    line-height:1.35;
    font-weight:900;
}

.za-archive-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:9px;
}

.za-archive-meta span{
    padding:5px 9px;

    border-radius:999px;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.05);

    color:var(--text-muted);

    font-size:11px;
    font-weight:800;
}

.za-archive-card:hover .za-archive-thumb img{
    transform:scale(1.07);
}

.za-archive-card:hover .za-archive-info strong{
    color:#fff;
}
/* ===============================
   EXPLORE PAGE
================================ */

.za-explore-section{
    position:relative;
    margin-bottom:42px;
}

.za-explore-section::before,
.za-explore-section::after{
    content:"";
    position:absolute;
    top:74px;
    bottom:0;
    width:42px;
    z-index:2;
    pointer-events:none;
}

.za-explore-section::before{
    left:0;
    background:linear-gradient(to right, var(--bg-main), transparent);
}

.za-explore-section::after{
    right:0;
    background:linear-gradient(to left, var(--bg-main), transparent);
}
.za-explore-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    margin-bottom:18px;
}

.za-explore-head h2{
    margin:0;
}
.za-explore-head p{
    margin:7px 0 0;
    color:var(--text-muted);
    font-size:14px;
    line-height:1.5;
}
.za-explore-head .mta-slider-nav{
    flex-shrink:0;
}
.za-explore-more{
    margin-left:auto;
    flex-shrink:0;

    color:var(--text-muted);
    font-size:13px;
    font-weight:800;
    text-decoration:none;

    transition:color .25s ease, transform .25s ease;
}

.za-explore-more:hover{
    color:#fff;
    transform:translateX(2px);
}
.za-explore-section h2{
    margin:0 0 18px;

    color:#fff;
    font-size:30px;
    line-height:1.12;
    font-weight:900;
    letter-spacing:-.8px;
}

.za-explore-page .za-archive-grid{
    display:flex;
    gap:18px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;

    padding-bottom:12px;
}

.za-explore-page .za-archive-grid::-webkit-scrollbar{
    display:none;
}

.za-explore-page .za-archive-card{
    flex:0 0 220px;
    scroll-snap-align:start;
}

.za-explore-page .za-archive-thumb{
    border-radius:20px;
}
/* ===============================
   HISTORY PAGE
================================ */

.za-history-page{
    max-width:1360px;
}

.za-history-page .za-left{
    width:68%;
}

.za-history-head{
    padding:34px;
    border-radius:26px;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(139,92,246,.22),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(22,31,56,.96),
            rgba(17,24,39,.98)
        );
}

.za-history-head h1{
    margin:0 0 10px;
    color:#fff;

    font-size:42px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-1px;
}

.za-history-head p{
    margin:0;
    color:var(--text-main);
    font-size:16px;
    line-height:1.6;
}

.za-history-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.za-history-item{
    display:grid;
    grid-template-columns:150px 1fr 48px;
    gap:18px;
    align-items:center;

    padding:14px;

    border-radius:22px;

    background:linear-gradient(
        180deg,
        rgba(22,31,56,.96),
        rgba(17,24,39,.98)
    );

    border:1px solid rgba(255,255,255,.06);

    color:#fff;
    text-decoration:none;

    box-shadow:var(--shadow-soft);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}
.za-history-item.is-latest{
    border-color:rgba(139,92,246,.34);

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(139,92,246,.16),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(22,31,56,.98),
            rgba(17,24,39,.98)
        );

    box-shadow:
        0 20px 46px rgba(0,0,0,.28),
        0 0 0 1px rgba(139,92,246,.08);
}

.za-history-item.is-completed .za-history-progress div{
    background:linear-gradient(90deg,#22c55e,#84cc16);
}

.za-history-item.is-completed .za-history-info em{
    color:#22c55e;
}
.za-history-item:hover{
    transform:translateY(-3px);
    border-color:rgba(139,92,246,.28);
    box-shadow:var(--shadow-hover);
}

.za-history-thumb{
    width:150px;
    height:92px;

    border-radius:16px;
    overflow:hidden;

    background:var(--bg-card);
}

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

.za-history-placeholder{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;

    background:rgba(255,255,255,.06);
}

.za-history-info{
    min-width:0;
}

.za-history-info strong{
    display:block;

    margin-bottom:6px;

    color:#fff;
    font-size:18px;
    line-height:1.35;
    font-weight:900;
}

.za-history-info span{
    display:block;

    margin-bottom:10px;

    color:var(--text-muted);
    font-size:14px;
    font-weight:700;
}

.za-history-progress{
    width:100%;
    height:7px;

    overflow:hidden;

    border-radius:999px;
    background:rgba(0,0,0,.28);
}

.za-history-progress div{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
}

.za-history-info em{
    display:block;

    margin-top:8px;

    color:var(--accent);
    font-size:13px;
    font-style:normal;
    font-weight:800;
}

.za-history-play{
    width:44px;
    height:44px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg,var(--primary),var(--primary-hover));

    color:#fff;
    font-size:14px;
    font-weight:900;

    box-shadow:0 12px 24px rgba(139,92,246,.28);
}

.za-history-loading,
.za-history-empty{
    color:var(--text-main);
}

.za-history-empty{
    text-align:center;
    padding:36px 22px;
}

.za-history-empty div{
    font-size:38px;
    margin-bottom:10px;
}

.za-history-empty strong{
    display:block;
    margin-bottom:8px;

    color:#fff;
    font-size:20px;
}

.za-history-empty p{
    margin:0;
    color:var(--text-muted);
}
/* ===============================
   STORY PROGRESS
================================ */

.za-episode-head{
    margin-bottom:16px;
}

.za-episode-head h3{
    margin-bottom:12px;
}
.za-current-episode-box{
    margin-bottom:12px;
    padding:13px 16px;

    border-radius:16px;
    background:rgba(139,92,246,.12);
    border:1px solid rgba(139,92,246,.24);

    color:var(--text-white);
    font-size:14px;
    font-weight:800;

    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.za-resume-view-story{
    min-height:42px;
    padding:0 18px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border:none;
    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-hover)
    );

    color:#fff;
    font-size:14px;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 12px 28px rgba(139,92,246,.28);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.za-resume-view-story:hover{
    transform:translateY(-2px);
    box-shadow:
        0 16px 36px rgba(139,92,246,.34);
}
.za-story-progress{
    padding:14px 16px;
    border-radius:16px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.055);
}

.za-story-progress-text{
    display:flex;
    justify-content:space-between;
    gap:10px;

    margin-bottom:10px;

    color:var(--text-main);
    font-size:14px;
    font-weight:800;
}

.za-story-progress-bar{
    width:100%;
    height:7px;
    overflow:hidden;

    border-radius:999px;
    background:rgba(0,0,0,.28);
}

.za-story-progress-inner{
    width:0%;
    height:100%;

    border-radius:999px;
    background:linear-gradient(90deg,var(--primary),var(--accent));

    transition:width .35s ease;
}
/* ===============================
   EPISODE LIST
================================ */
.za-episode-list{
    max-height:360px;
    overflow-y:auto;
    padding-right:6px;
    scrollbar-width:thin;
    scrollbar-color:rgba(139,92,246,.35) transparent;
}
.za-episode-list::-webkit-scrollbar{
    width:6px;
}

.za-episode-list::-webkit-scrollbar-track{
    background:transparent;
}

.za-episode-list::-webkit-scrollbar-thumb{
    background:rgba(139,92,246,.28);
    border-radius:999px;
}

.za-episode-list::-webkit-scrollbar-thumb:hover{
    background:rgba(139,92,246,.48);
}

.za-episode-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;

    min-height:54px;
    padding:14px 17px;
    margin-bottom:10px;

    border-radius:14px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.04);
    color:var(--text-main);

    cursor:pointer;

    transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    color .25s ease;
    will-change:transform, background;
}

.za-episode-item:hover{
    background:var(--bg-hover);
    border-color:rgba(139,92,246,.22);
    transform:translateX(2px) scale(1.01);
}

.za-episode-item.active{
    background:linear-gradient(
        90deg,
        rgba(139,92,246,.32),
        rgba(59,130,246,.18)
    );

    border-color:rgba(139,92,246,.32);

    color:var(--text-white);
    font-weight:700;

    box-shadow:
    0 0 0 1px rgba(139,92,246,.12),
    0 0 18px rgba(139,92,246,.12),
    0 10px 26px rgba(0,0,0,.18);
}

.za-episode-item.watched{
    background:rgba(255,255,255,.03);
    color:rgba(255,255,255,.72);
    opacity:1;
}
.za-episode-item::after{
    content:"Nghe";
    min-width:74px;
    padding:5px 9px;
    border-radius:999px;

    background:rgba(255,255,255,.06);
    color:var(--text-muted);

    font-size:12px;
    font-weight:800;
    text-align:center;

    opacity:.72;
    transition:opacity .25s ease, transform .25s ease, background .25s ease;
}

.za-episode-item:hover::after{
    opacity:1;
    transform:translateX(2px);
    background:rgba(139,92,246,.16);
    color:var(--text-white);
}

.za-episode-item.active::after{
    content:"🎧 Đang nghe";
    min-width:104px;

    background:rgba(245,158,11,.16);
    color:var(--accent);
    opacity:1;
}

.za-episode-item.watched::after{
    content:"✓ Đã nghe";
    min-width:92px;

    background:rgba(34,197,94,.13);
    color:#22c55e;
    opacity:1;
}

.za-episode-item.active.watched::after{
    content:"🎧 Đang nghe";
    background:rgba(245,158,11,.16);
    color:var(--accent);
}

.za-episode-item:active{
    transform:scale(.98);
}
/* ===============================
   ARCHIVE PAGINATION
================================ */

.za-pagination{
    margin:28px 0 18px;
}

.za-pagination .nav-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.za-pagination .page-numbers{
    min-width:42px;
    height:42px;
    padding:0 14px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.06);

    color:var(--text-main);
    font-size:14px;
    font-weight:800;
    text-decoration:none;
}

.za-pagination .page-numbers.current{
    background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    color:#fff;
}

.za-pagination .page-numbers:hover{
    color:#fff;
    border-color:rgba(139,92,246,.28);
    background:rgba(139,92,246,.16);
}


/* ===============================
   LOAD MORE BUTTON
================================ */

#za-load-more{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin:4px 0 28px;

    min-width:220px;
    height:56px;
    padding:0 28px;

    border:none;
    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-hover)
    );

    color:var(--text-white);
    font-size:16px;
    font-weight:700;
    letter-spacing:-0.2px;

    cursor:pointer;

    box-shadow:
    0 12px 28px rgba(0,0,0,.24);

    transition:
    transform .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}

#za-load-more:hover{
    transform:translateY(-2px);
    box-shadow:
    0 16px 36px rgba(0,0,0,.3);
}

#za-load-more:active{
    transform:scale(.96);
}

#za-load-more.loading{
    opacity:.72;
    pointer-events:none;
    transform:scale(.98);
    filter:saturate(.85);
}
/* Ẩn scrollbar đẹp hơn */

#za-continue-container::-webkit-scrollbar{
    height:6px;
}

#za-continue-container::-webkit-scrollbar-thumb{
background: var(--bg-hover);
border-radius: 10px;
}


/* MOBILE */

@media(max-width:768px){

.za-explore-head .mta-slider-nav{
    display:none;
}
.za-explore-more{
    display:none;
}
.za-explore-section{
    margin-bottom:30px;
}

.za-explore-section::before,
.za-explore-section::after{
    display:none;
}

.za-explore-section h2{
    font-size:22px;
    margin-bottom:0;
}

.za-explore-head{
    margin-bottom:14px;
}

.za-explore-head p{
    font-size:13px;
    margin-top:6px;
}

.za-explore-page .za-archive-grid{
    gap:14px;
}

.za-explore-page .za-archive-card{
    flex:0 0 156px;
}

.za-archive-hero{
    padding:24px 18px;
    border-radius:24px;
}

.za-archive-hero h1{
    font-size:30px;
}

.za-archive-hero p{
    font-size:14px;
}

.za-archive-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.za-archive-info strong{
    font-size:14px;
}

.za-archive-meta span{
    font-size:10px;
}

.za-history-head{
    padding:24px 18px;
    border-radius:24px;
}

.za-history-head h1{
    font-size:30px;
}

.za-history-head p{
    font-size:14px;
}

.za-history-page .za-history-item{
    grid-template-columns:86px 1fr;
    gap:12px;

    width:100%;
    padding:12px;
    border-radius:18px;
}

.za-history-page .za-history-list{
    width:100%;
}

.za-history-page .za-left{
    width:100%;
    max-width:100%;
}

.za-history-thumb{
    width:96px;
    height:72px;
    border-radius:14px;
}

.za-history-info strong{
    font-size:15px;
}

.za-history-info span{
    font-size:13px;
}

.za-history-play{
    display:none;
}
    .za-pagination{
        margin:22px 0 10px;
    }

    .za-pagination .page-numbers{
        min-width:40px;
        height:40px;
        padding:0 12px;
        font-size:13px;
    }
.za-card-dark{
    min-width:158px;
    max-width:158px;

    padding:10px;

    border-radius:18px;
}
.za-card-dark img{
    border-radius:14px;
}

.za-play-btn{
    width:34px;
    height:34px;
    font-size:13px;
    opacity:1;
    transform:translateY(0) scale(1);
}

.za-scroll-row{
    gap:14px;
    padding:0 14px 12px;
    -webkit-overflow-scrolling:touch;
}
.za-slider-btn{
    display:none !important;
}
.mta-slider-nav{
    display:none !important;
}
.za-archive-page .za-left{
    width:100%;
    max-width:100%;
}
.za-card{
    padding:16px;
}

.za-cover{
    grid-template-columns:1fr;
    gap:18px;
}

.za-cover img{
    width:100%;
    max-height:360px;
    aspect-ratio:2/3;
    object-fit:cover;
}
.za-title{
    font-size:24px;
    line-height:1.25;
}
.za-cover-desc{
    margin-top:16px;
    font-size:14px;
    line-height:1.7;
}
.za-single-actions{
    margin-top:18px;
}

.za-listen-now-btn{
    width:100%;
    min-height:52px;
}
.za-scroll-episodes-btn{
    width:100%;
    min-height:50px;
}
.za-share-btn{
    width:100%;
    min-height:50px;
}
.za-share-wrap{
    width:100%;
}

.za-share-menu{
    left:0;
    right:0;
}
.za-section{
    padding:22px 0 18px;
}

.za-home-dark{
    padding-bottom:130px;
}

.za-card-dark span{
    font-size:13px;
    line-height:1.4;
}

#za-load-more{
    width:100%;
    min-width:0;
    height:52px;
    font-size:15px;
}
.za-slider-wrap::before,
.za-slider-wrap::after{
    content:none !important;
    display:none !important;
}

.za-hero-kicker{
    font-size:11px;
    margin-bottom:10px;
}

.za-hero-sub{
    font-size:13px;
    max-width:280px;
    margin-bottom:14px;
}

.za-hero-actions{
    gap:8px;
}

.za-hero{
    min-height:520px;
    border-radius:0 0 28px 28px;
}

.za-hero > img{
    object-position:center top;
}

.za-hero-overlay{
    padding:86px 16px 34px;
}

.za-hero-overlay h1{
    max-width:310px;
    margin-bottom:10px;

    font-size:30px;
    line-height:1.05;
    letter-spacing:-0.8px;
}

.za-hero-story{
    max-width:320px;
    font-size:13px;
}

.za-hero-sub{
    max-width:310px;
    font-size:13px;
    line-height:1.55;
}

.za-hero-actions{
    gap:9px;
}

.za-hero-btn{
    min-height:42px;
    padding:0 15px;
    font-size:12px;
}
.za-section-head{
    margin:0 14px 18px;
}

.za-section h2,
.za-home-dark h2{
    font-size:18px;
    letter-spacing:-0.45px;
}

.za-section-more{
    font-size:12px;
}
.za-episode-item::after{
    min-width:auto;
    padding:5px 8px;
    font-size:11px;
}

.za-episode-item.active::after{
    min-width:auto;
}

.za-episode-item.watched::after{
    min-width:auto;
}
}

/* CONTINUE LIST */

#za-continue-container{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding-bottom:6px;
    padding-right:14px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
}
/* ===== CONTINUE CLEAN FINAL ===== */

.za-continue-card{
    width:300px;
    flex:0 0 300px;
    cursor:pointer;

    border-radius:22px;
    overflow:hidden;

    background:linear-gradient(
        180deg,
        rgba(26,37,64,.96),
        rgba(19,28,49,.98)
    );

    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 18px 42px rgba(0,0,0,.28);

    scroll-snap-align:start;

    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    will-change:transform;
    transform:translateZ(0);
}

.za-continue-card:hover {
    transform:translateY(-4px);
    z-index:10;
    box-shadow:var(--shadow-hover);
    border-color:rgba(139,92,246,.22);
}
.za-continue-card:active{
    transform:scale(.98);
}
.za-continue-card:hover .za-thumb-img{
    transform:scale(1.08) translateY(-2px);
}

.za-thumb-wrap {
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
}

.za-thumb-img{
    width:100%;
    display:block;
    aspect-ratio:16/9;
    object-fit:cover;

    filter:saturate(1.06) contrast(1.03);

    transition:transform .35s ease, opacity .25s ease;
}

.za-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.42) 38%,
        rgba(0,0,0,.12) 68%,
        rgba(0,0,0,0) 100%
    );

    opacity:.92;

    transition:
    opacity .25s ease,
    background .25s ease;
}

.za-continue-card:hover .za-overlay{
    opacity:1;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.46) 40%,
        rgba(0,0,0,.08) 72%,
        rgba(0,0,0,0) 100%
    );
}

.za-thumb-info {
    position:absolute;
    left:14px;
    right:64px;
    bottom:14px;
    z-index:2;
    text-shadow:0 2px 12px rgba(0,0,0,.42);
    color:#fff;
}

.za-thumb-title{
    font-size:17px;
    font-weight:900;
    line-height:1.25;

    color:#fff;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.za-thumb-episode {
    font-size: 13px;
    opacity: 0.8;
}

/* PROGRESS riêng biệt */
.za-continue-card .za-progress-bar{
    width:100%;
    height:6px;
    margin-top:11px;

    background:rgba(255,255,255,.16);
    border-radius:999px;
    overflow:hidden;
}

.za-continue-card .za-progress-inner {
    height:100%;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    border-radius:999px;
    transition:width .35s ease;
}
/* ===============================
   RELATED SLIDER - COMPACT
================================ */

.za-related-slider{
    display:flex;
    gap:18px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding-bottom:24px;
}

.za-related-slider::-webkit-scrollbar{
    display:none;
}

.za-related-item{
    flex:0 0 220px;
    min-width:220px;
}

.za-related-item img{
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:18px;
}

.za-related-item h3{
    margin:12px 0 8px;
}

.za-related-item .za-archive-meta{
    margin-top:0;
}


/* ===============================
   SIDEBAR STICKY POLISH
================================ */

.za-right{
    position:sticky;
    top:92px;
    align-self:flex-start;
}

.za-right::before{
    content:"";
    display:block;
    height:1px;
    margin-bottom:14px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(139,92,246,.35),
        transparent
    );

    opacity:.65;
}
/* SIDEBAR UPGRADE */

.za-sidebar-box{
    background:linear-gradient(
    180deg,
    rgba(22,31,56,.96),
    rgba(17,24,39,.98)
);
    border:1px solid rgba(255,255,255,.055);
    border-radius: var(--radius);
    padding:18px;
    margin-bottom:22px;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    box-shadow:var(--shadow-soft);
}
.za-sidebar-box:hover{
    box-shadow:var(--shadow-hover);
    transform:translateY(-2px);
}

/* TITLE */
.za-sidebar-box h3{
    font-size:15px;
    font-weight:700;
    margin-bottom:14px;
    color: var(--text-white);
    display:flex;
    align-items:center;
    gap:8px;
    letter-spacing:-0.2px;
}
/* ===============================
   SMART SEARCH
================================ */

.za-smart-search{
    position:relative;
}

.za-smart-search-results{
    margin-top:12px;
}

.za-smart-search-hint{
    color:var(--text-muted);
    font-size:13px;
    line-height:1.5;
}

.za-smart-search-pills{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.za-smart-search-pills a{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 11px;

    border-radius:999px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.06);

    color:var(--text-main);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.za-smart-search-pills a:hover{
    color:#fff;
    background:rgba(139,92,246,.16);
    border-color:rgba(139,92,246,.28);
}
/* SEARCH */
.za-search-box{
    padding:12px;
}

.za-search{
    width:100%;
    padding:13px 14px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:12px;
    background: var(--bg-main);
    color: var(--text-main);
    outline:none;
    transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.za-search:focus{
    background: var(--bg-hover);
    border-color:rgba(139,92,246,.35);
    box-shadow:0 0 0 3px rgba(139,92,246,.12);
}
.za-sidebar-favorite-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.za-sidebar-fav-item{
    display:flex;
    align-items:center;
    gap:12px;

    padding:9px;
    border-radius:14px;

    color:var(--text-main);
    text-decoration:none;

    background:rgba(255,255,255,.035);

    transition:
        background .25s ease,
        transform .25s ease;
}

.za-sidebar-fav-item:hover{
    background:rgba(236,72,153,.12);
    transform:translateX(2px);
}

.za-sidebar-fav-thumb{
    width:54px;
    height:54px;

    border-radius:12px;
    overflow:hidden;

    flex:0 0 54px;

    background:rgba(255,255,255,.06);

    display:flex;
    align-items:center;
    justify-content:center;
}

.za-sidebar-fav-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.za-sidebar-fav-thumb span{
    font-size:22px;
}

.za-sidebar-fav-item strong{
    color:var(--text-main);
    font-size:14px;
    line-height:1.4;
    font-weight:700;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.za-sidebar-fav-item:hover strong{
    color:#fff;
}
/* HOT LIST */
.za-hot-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.za-hot-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px;
    border-radius:12px;
    text-decoration:none;
    color:var(--text-main);
    transition:background .25s ease, transform .25s ease;
}

.za-hot-item:hover{
    background:var(--bg-hover);
    transform:translateX(2px);
}
.za-hot-item:active{
    transform:scale(.98);
}
/* thumbnail */
.za-hot-thumb{
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:10px;
    flex-shrink:0;
}
/* title */
.za-hot-title{
    font-size:14px;
    line-height:1.45;
    font-weight:600;
    color:var(--text-main);

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    transition:color .25s ease;
}
.za-hot-item:hover .za-hot-title{
    color:var(--text-white);
}
/* ===== NOW PLAYING ===== */

.za-now-playing{
    display:flex;
    align-items:center;
    gap:14px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,.025)
    );

    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    padding:14px;

    cursor:pointer;

    box-shadow:
    0 12px 28px rgba(0,0,0,.18);

    transition:
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.za-now-playing:hover{
    border-color:rgba(139,92,246,.22);
    box-shadow:0 18px 36px rgba(0,0,0,.28);
    transform:translateY(-2px);
}

.za-now-thumb{
    width:86px;
    height:64px;
    border-radius:12px;
    overflow:hidden;
    flex-shrink:0;

    background:var(--bg-main);
    box-shadow:0 8px 18px rgba(0,0,0,.22);
}

.za-now-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .3s ease;
}
.za-now-playing:hover .za-now-thumb img{
    transform:scale(1.05);
}

.za-now-playing:active{
    transform:scale(.98);
}

.za-now-info{
    flex:1;
    min-width:0;
}

.za-now-title{
    font-size:14px;
    font-weight:800;
    line-height:1.35;
    color:var(--text-white);

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.za-now-episode{
    margin-top:4px;
    font-size:13px;
    line-height:1.4;
    color:var(--text-muted);
}
.za-now-percent{
    margin-top:8px;

    color:var(--accent);
    font-size:12px;
    font-weight:700;
}
.za-now-progress{
    width:100%;
    height:5px;
    background:rgba(0,0,0,.28);
    border-radius:999px;
    overflow:hidden;
    margin-top:10px;
}

#za-now-bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--primary), var(--accent));
    border-radius:999px;
    transition:width .35s ease;
}
/* ===== NETFLIX SLIDER ===== */

.za-slider-wrap{
    position:relative !important;
    overflow:hidden;
    width:100%;
    }
.za-slider-wrap::before,
.za-slider-wrap::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:60px;
    z-index:1;
    pointer-events:none;
    display:block;
}

.za-slider-wrap::before{
    left:0;
    background:linear-gradient(
        to right,
        var(--bg-main),
        transparent
    );
}

.za-slider-wrap::after{
    right:0;
    background:linear-gradient(
        to left,
        var(--bg-main),
        transparent
    );
}

.za-slider-btn{
    position:absolute !important;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:rgba(11,17,32,.78);
    color:#fff;
    font-size:24px;
    cursor:pointer;
    z-index:20;

    display:flex;
    align-items:center;
    justify-content:center;

    backdrop-filter:blur(4px);
    box-shadow:0 10px 24px rgba(0,0,0,.35);
    transition:background .25s ease, transform .25s ease, opacity .25s ease;
}

.za-slider-prev{
    left:10px;
}

.za-slider-next{
    right:18px;
}

.za-slider-btn:hover{
    background:var(--primary);
    transform:translateY(-50%) scale(1.06);
}
.za-slider-btn:active{
    transform:translateY(-50%) scale(.94);
}
/* ===============================
   FOCUS VISIBLE
================================ */

.za-card-dark:focus-visible,
.za-continue-card:focus-visible,
.za-hot-item:focus-visible,
.za-episode-item:focus-visible,
.za-play-btn:focus-visible,
.za-slider-btn:focus-visible,
#za-load-more:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
}
@media (max-width:768px){

    .za-scroll-row:hover .za-card-dark{
        opacity:1;
    }

    .za-continue-card{
        display:block;
        min-height:auto;
        flex:0 0 82%;
        width:82%;
        border-radius:20px;
    }

    .za-thumb-title{
        font-size:15px;
    }

    .za-play-center{
        width:40px;
        height:40px;
    }
#za-continue-section{
    margin:26px 14px 8px;
    padding:18px 14px 16px;
    border-radius:24px;
}

.za-continue-title{
    margin-bottom:16px;

    font-size:18px;
    letter-spacing:-0.45px;
}
}
/* ===============================
   HERO CONTENT
================================ */

.za-hero-pro{
    background:var(--bg-main);
}

.za-hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:14px;
    padding:7px 13px;

    border-radius:999px;
    background:rgba(139,92,246,.18);
    border:1px solid rgba(139,92,246,.26);

    color:rgba(255,255,255,.9);
    font-size:13px;
    font-weight:800;

    backdrop-filter:blur(10px);
}

.za-hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:16px;
}

.za-hero-meta span{
    display:inline-flex;
    align-items:center;

    padding:7px 12px;
    border-radius:999px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.09);

    color:rgba(255,255,255,.84);
    font-size:12px;
    font-weight:800;
}

.za-hero-story{
    margin:12px 0 8px;

    color:rgba(255,255,255,.78);
    font-size:15px;
    font-weight:700;
    line-height:1.45;
}

.za-hero-sub{
    max-width:520px;
    margin:0 0 22px;

    color:var(--text-muted);
    font-size:16px;
    line-height:1.7;
}

.za-hero-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.za-hero-btn{
    position:relative;
    z-index:5;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;
    padding:0 20px;

    border-radius:999px;

    font-size:14px;
    font-weight:900;

    transition:transform .25s ease, background .25s ease, border-color .25s ease;
}

.za-hero-btn.primary{
    background:linear-gradient(135deg,var(--primary),var(--primary-hover));
    color:#fff;
    box-shadow:0 14px 32px rgba(139,92,246,.32);
}

.za-hero-btn.ghost{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:var(--text-white);
}

.za-hero-btn:hover{
    transform:translateY(-2px);
}

/* ===============================
   REDUCED MOTION
================================ */

@media (prefers-reduced-motion: reduce){

    .za-card-dark,
    .za-card-dark img,
    .za-item,
    .za-item img,
    .za-continue-card,
    .za-thumb-img,
    .za-overlay,
    .za-play-btn,
    .za-episode-item,
    .za-episode-item::after,
    .za-toggle,
    .za-sidebar-box,
    .za-hot-item,
    .za-now-playing,
    .za-slider-btn,
    #za-load-more,
    #za-now-bar,
    .za-progress-inner{
        transition:none !important;
        animation:none !important;
    }

    .za-scroll-row,
    #za-continue-container{
        scroll-behavior:auto;
    }

    .za-skeleton{
        animation:none;
    }
}